/* Wrap */
.rbat-reslist-wrap{max-width:100%;margin:0 auto;padding:12px;width:95%}
.rbat-reslist-wrap{position:relative}
/* Guard: never allow page-level horizontal scroll from internal wide content */
.rbat-reslist-wrap{ overflow-x: hidden; width:100%; }
/* Dark theme legibility fixes */
.rbat-reslist-wrap[data-theme="dark"] .rbat-nav-ttl{ color:#e6edf3; }
.rbat-reslist-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:8px; max-width:100%}
.rbat-reslist-title{margin:0;font-size:18px}
/* Keep header controls clickable without forcing stacking contexts */
.rbat-reslist-controls .rbat-btn{pointer-events:auto}

/* Controls */
.rbat-reslist-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap; max-width:100%}
.rbat-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border:1px solid #ccc;border-radius:6px;background:#fff;cursor:pointer;font-size:14px;line-height:1.2;white-space:nowrap; vertical-align:middle; user-select:none}
.rbat-reslist-controls .rbat-btn{min-height:32px}
.rbat-reslist-controls #rbat-fullscreen-toggle,
.rbat-reslist-controls #rbat-wakelock-toggle{margin-left:6px}
.rbat-reslist-controls .rbat-btn.active{background:#2563eb;border-color:#2563eb;color:#fff}
.rbat-btn.active{background:#0f62fe;border-color:#0f62fe;color:#fff}
.rbat-btn-primary{background:#0f62fe;border-color:#0f62fe;color:#fff}
/* Ensure primary stands out in top actions even if themes override buttons */
.rbat-actions-top .rbat-btn-primary{background:#0f62fe !important;border-color:#0f62fe !important;color:#fff !important}
.rbat-btn-danger{background:#ffeded;border-color:#ffb2b2;color:#b43434}
/* Make danger buttons clearly visible across themes without requiring hover */
.rbat-btn.rbat-btn-danger{ background:#dc2626; border-color:#dc2626; color:#fff }
.rbat-btn.rbat-btn-danger:hover{ filter:brightness(0.95) }
.rbat-datebox{display:flex;align-items:center}
.rbat-date-input{padding:6px 8px;border:1px solid #ccc;border-radius:6px; min-width:160px}

/* NYT: Hop til dato */
.rbat-datejump{display:flex;align-items:center;gap:8px;margin-left:auto; min-width:220px}
.rbat-datejump-label{font-size:12px;color:#666}

/* App */
.rbat-reslist-app{
  border:1px solid #e5e5e5;border-radius:8px;padding:10px;min-height:120px;background:#fff;
  overflow:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; position:relative; z-index:1;
  width:100%; max-width:100%; box-sizing:border-box;
}
.rbat-floor-embed{margin-top:10px; position:relative; z-index:10000; pointer-events:auto}
/* Allow horizontal scroll so canvas wider than the viewport is usable on mobile */
.rbat-floor-embed{ width:100%; overflow-x:auto; }
#rbat-floor-embed{ width:100%; max-width:100%; overflow-x:auto; }
#rbat-floor-embed .rbat-floor-embed-inner{
  width:100%; max-width:100%; position:relative;
  /* Only allow horizontal scrolling inside the embed; let vertical swipes scroll the page */
  overflow-x:auto; overflow-y:hidden;
  -webkit-overflow-scrolling:touch; touch-action:pan-x pinch-zoom;
  transform:scale(1) !important; transform-origin:0 0 !important; will-change: transform;
}
#rbat-floor-embed .rbat-floor-embed-inner *{ -webkit-user-select:none; user-select:none; }
/* Floor toolbar layout */
.rbat-floor-embed-toolbar{ width:100%; box-sizing:border-box; position:sticky; top:0; z-index:10001; background:#fff; pointer-events:auto }
.rbat-reslist-wrap[data-theme="dark"] .rbat-floor-embed-toolbar{ background:#0f141a }
/* Make sure the canvas sits under the toolbar in stacking order */
#rbat-floor-embed .rbat-floor-embed-inner{ position:relative; z-index:0 }
/* Visually merge toolbar with the card edges inside the floor-embed card */
.rbat-floor-embed .rbat-floor-embed-toolbar{
  margin: 0 0 8px; /* no negative margins to avoid overlap under previous card */
  padding: 0 0 8px;
  border-bottom: 1px solid #e5e5e5;
}
.rbat-reslist-wrap[data-theme="dark"] .rbat-floor-embed .rbat-floor-embed-toolbar{
  border-bottom-color: #273040;
}
/* Dark mode card background/border for app areas so they match header tone */
.rbat-reslist-wrap[data-theme="dark"] .rbat-reslist-app{
  background: #0b1220;
  border-color: #273040;
}
.rbat-floor-embed-toolbar .rbat-floor-embed-controls{ display:flex; gap:8px; align-items:center; flex-wrap:wrap }
/* Ensure toolbar buttons are always clickable above the canvas */
.rbat-floor-embed-toolbar .rbat-btn{ position:relative; z-index:11; pointer-events:auto !important }

/* Ensure all major sections span the wrapper width uniformly */
.rbat-reslist-head,
.rbat-reslist-controls,
.rbat-actions-top,
.rbat-reslist-app,
.rbat-floor-embed{
  width:100%;
  max-width:100%;
}

/* Ensure the embedded app area isn’t visually empty while JS loads */
#rbat-admin-floor-app{ min-height:220px; position:relative }
#rbat-admin-floor-app:empty::before{ content:"Indlæser bordplan…"; display:block; color:#6b7280; font-size:14px; padding:8px }
/* Mobile toggle for floor visibility */
#rbat-mobile-floor-toggle{ display:none; margin:8px 0; }
#rbat-mobile-floor-toggle .rbat-btn{ width:100%; justify-content:center }
.rbat-reslist-wrap.rbat-is-fullscreen{width:100vw;max-width:100vw;padding:0;margin:0}
.rbat-reslist-wrap.rbat-is-fullscreen .rbat-reslist-app{height:100vh;max-height:100vh;border-radius:0;border:none}
.rbat-reslist-wrap.rbat-is-fullscreen .rbat-week-grid,
.rbat-reslist-wrap.rbat-is-fullscreen .rbat-day-col{overflow:auto}
/* In fullscreen, inner sections should follow the wrapper content box, not the viewport width,
   to avoid 1px drift and mismatched widths due to scrollbars. */
.rbat-reslist-wrap.rbat-is-fullscreen .rbat-reslist-head,
.rbat-reslist-wrap.rbat-is-fullscreen .rbat-reslist-controls,
.rbat-reslist-wrap.rbat-is-fullscreen .rbat-actions-top,
.rbat-reslist-wrap.rbat-is-fullscreen .rbat-reslist-app,
.rbat-reslist-wrap.rbat-is-fullscreen .rbat-floor-embed{ width:100%; max-width:100%; box-sizing:border-box }
.rbat-reslist-loading,.rbat-reslist-error,.rbat-reslist-empty{padding:12px}

/* Discreet summary bar */
.rbat-summary{display:flex;align-items:center;gap:8px;padding:6px 8px;margin:0 0 6px 0;color:#555;font-size:13px;border:1px dashed #eee;border-radius:8px;background:#fafafa}
.rbat-summary .count{font-weight:700;color:#111}

/* Month */
.rbat-month .rbat-nav{display:flex;align-items:center;gap:6px;margin-bottom:8px;flex-wrap:wrap}
.rbat-nav-ttl{margin-left:8px;font-weight:600}
.rbat-month-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.rbat-month-cell{border:1px solid #eee;border-radius:8px;padding:8px;min-height:94px;display:flex;flex-direction:column;gap:8px}
.rbat-month-cell.muted{opacity:.6}
.rbat-month-cell-head{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:#666}
.rbat-chip{padding:5px 8px;border:1px solid #cfe5ff;background:#f0f7ff;border-radius:6px;cursor:pointer;font-size:12px}
.rbat-month-empty{font-size:12px;color:#999}

/* Week */
.rbat-week .rbat-nav{display:flex;align-items:center;gap:6px;margin-bottom:8px;flex-wrap:wrap}
.rbat-week .rbat-nav .rbat-nav-ttl{color:#111}
.rbat-week-body{overflow-x:auto; -webkit-overflow-scrolling:touch; touch-action:pan-x pan-y}
.rbat-week-headrow,
.rbat-week-grid{min-width: 900px}
.rbat-week-headrow{display:grid;grid-template-columns:80px repeat(7,1fr);gap:6px;margin-bottom:6px}
.rbat-week-timecol{min-width:80px}
.rbat-week-dayhead{border:1px solid #eee;border-radius:8px;padding:6px;text-align:center;font-size:12px;color:#444; background:#fafafa}
.rbat-week-dayhead .dow{font-weight:600}
.rbat-week-grid{display:grid;grid-template-columns:80px repeat(7,1fr);gap:6px}
.rbat-week-timecol .rbat-hour{height:40px;font-size:11px;color:#777;display:flex;align-items:flex-start;justify-content:flex-end;padding:2px 6px}
.rbat-week-col{position:relative;background:#fff;border:1px solid #eee;border-radius:8px;overflow:hidden}
.rbat-week-cell{height:40px;border-bottom:1px dashed #f0f0f0}

/* Day */
.rbat-day .rbat-nav{display:flex;align-items:center;gap:6px;margin-bottom:8px;flex-wrap:wrap}
.rbat-day .rbat-nav .rbat-nav-ttl{color:#111}
.rbat-day-head{margin-bottom:6px;font-weight:600}
.rbat-day-grid{display:grid;grid-template-columns:80px 1fr;gap:6px;align-items:start}
.rbat-day-timecol{min-width:80px}
.rbat-day-timecol .rbat-hour{height:40px;font-size:11px;color:#777;display:flex;align-items:flex-start;justify-content:flex-end;padding:2px 6px}
.rbat-day-col{position:relative;background:#fff;border:1px solid #eee;border-radius:8px;overflow:hidden}
.rbat-day-cell{height:40px;border-bottom:1px dashed #f0f0f0}

/* Lodrette reservationer (uge/dag) */
.rbat-res{position:absolute;left:6px;right:6px;min-height:24px;border:1px solid #bce4c5;background:#e9f8ee;border-radius:6px;padding:4px 6px;font-size:12px;overflow:hidden;box-shadow:0 1px 0 rgba(0,0,0,.03)}
.rbat-res .r-time{font-weight:600;margin-bottom:2px}
.rbat-res .r-txt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Board (bord-visning) */
.rbat-board .rbat-nav{display:flex;align-items:center;gap:6px;margin-bottom:8px;flex-wrap:wrap}

/* Hide admin-floor helper tip inside embedded floor under the calendar */
.rbat-floor-embed .rbat-floor-help{display:none !important}

/* Scroll-container der indeholder både header (tid) og lanes (borde) */
.rbat-board-body{
  overflow-x:auto; overflow-y:visible;
  -webkit-overflow-scrolling:touch; touch-action:pan-x pan-y;
  white-space:normal; max-width:100%;
  position:relative; /* needed context for sticky children */
}

/* Header med tom venstrespalte (til bordetiketter) + vandret timerække */
.rbat-board-header{display:flex;align-items:stretch;gap:6px;margin-bottom:6px;width:max-content}
/* Sticky left spacer to align with sticky labels below */
.rbat-board-leftspacer{
  width:80px;min-width:80px;flex:0 0 80px;
  position:sticky;left:0;z-index:3;background:#fff;
}
.rbat-board-timerow{
  display:flex; flex-wrap:nowrap; align-items:stretch;
  border:1px solid #eee;border-radius:8px;
  /* Allow the timerow to grow beyond the viewport so the outer body can scroll */
  overflow:visible;
  width:max-content;
}
.rbat-board-timecell{
  width:80px;min-width:0;flex:0 0 auto;
  border-right:1px dashed #f1f1f1;padding:6px 4px;
  font-size:11px;color:#666;text-align:center;background:#fafafa;
  white-space:nowrap
}
.rbat-board-timecell:last-child{border-right:none}

/* Lanes (en række pr. bord) */
.rbat-board-lanes{width:max-content}
.rbat-board-row{display:flex;align-items:stretch;gap:6px;margin-bottom:6px}
.rbat-board-label{
  width:80px;min-width:80px;flex:0 0 80px;
  border:1px solid #eee;border-radius:8px;padding:8px;font-weight:600;background:#fcfcfc;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  position:sticky;left:0;z-index:2; /* keep visible when horizontally scrolling */
  border-right-color:#e6e6e6;
}

/* Selve tidslinjen for en række – ingen egen scroll; bredden styres af timerække */
.rbat-board-lane{
  position:relative;border:1px solid #eee;border-radius:8px;background:#fff;
  overflow:visible; height:72px; /* taller lanes for two-line chips */
}

/* Vandrette reservationer */
.rbat-res-h{
  position:absolute;top:6px;bottom:6px;min-height:40px;
  border:1px solid #bce4c5;background:#e9f8ee;border-radius:6px;padding:4px 6px;
  font-size:12px;display:flex;flex-direction:column;justify-content:center;gap:2px;
  box-shadow:0 1px 0 rgba(0,0,0,.03);
  box-sizing:border-box
}
.rbat-res-h .r-time{font-weight:600}
.rbat-res-h .r-txt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rbat-res-h .r-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#333}

/* Combo overlays shown on individual table lanes */
.rbat-res-h-combo{
  border-color:#f4b4b4;
  background:#ffe9e9;
}
.rbat-res-h-combo .r-time{ color:#7a1f1f }

/* Dark theme combo tint */
.rbat-reslist-wrap[data-theme="dark"] .rbat-res-h-combo{
  background:#2a0f12; /* deeper, less bright red tint */
  border-color:#6b2a32;
}
.rbat-reslist-wrap[data-theme="dark"] .rbat-res-h-combo .r-time{ color:#f2b9bd }

/* Right-side combo timerange label inside lane */
.rbat-combo-rightlabel{
  font-size: 11px;
  color: #7a1f1f;
  background: transparent;
}
.rbat-reslist-wrap[data-theme="dark"] .rbat-combo-rightlabel{ color:#f5cccc }

/* Ensure combo chips stay red even if generic .rbat-res-h dark styles apply later */
.rbat-res-h.rbat-res-h-combo{ background:#ffe9e9; border-color:#f4b4b4 }
.rbat-reslist-wrap[data-theme="dark"] .rbat-res-h.rbat-res-h-combo{ background:#2a0f12 !important; border-color:#6b2a32 !important }
.rbat-reslist-wrap[data-theme="dark"] .rbat-res-h.rbat-res-h-combo .r-time{ color:#f2b9bd !important }

/* Modal */
.rbat-modal-root{position:fixed;inset:0;z-index:2147483000}
.rbat-modal{
  position:fixed;inset:0;background:rgba(0,0,0,.25);
  /* display is controlled by dialog[open] */
  align-items:center;justify-content:center;padding:16px;
  z-index:2147483000;
}
dialog.rbat-modal{ display:none; }
dialog.rbat-modal[open]{ display:flex; }
.rbat-reslist-wrap dialog#rbat-create-modal{
  position:fixed; inset:0; z-index:2147483000; padding:8px; display:none;
  background: rgba(0,0,0,.25);
}
.rbat-reslist-wrap dialog#rbat-create-modal[open]{ display:flex; align-items:flex-start; justify-content:center; }
.rbat-reslist-wrap dialog#rbat-create-modal::backdrop{ background: rgba(0,0,0,.35); }
.rbat-modal-box{
  background:#fff;border-radius:12px;max-width:640px;
  width:min(calc(100vw - 16px), 640px);
  /* Adaptive height: cap to viewport, let inner form scroll */
  max-height: calc(100dvh - 16px);
  max-height: calc(100svh - 16px);
  max-height: calc(100vh  - 16px);
  overflow:hidden; /* outer container does not scroll */
  box-shadow:0 10px 50px rgba(0,0,0,.25);
  display:flex;flex-direction:column;
  color:#111; /* strong contrast in light mode */
}
.rbat-modal-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid #eee;font-weight:600;color:#111;background:#fff; position:sticky; top:0; z-index:2}
.rbat-reslist-wrap dialog#rbat-create-modal .rbat-modal-head{ position:sticky; top:0; background:#fff; z-index:2; pointer-events:auto }
.rbat-modal-x{border:none;background:transparent;font-size:22px;cursor:pointer;line-height:1}
.rbat-modal-list{padding:10px; flex:1 1 auto; overflow:auto; min-height:0}
.rbat-modal-row{display:grid;grid-template-columns:70px 1fr auto;gap:8px;align-items:center;padding:6px 0;border-bottom:1px solid #f5f5f5}
.rbat-modal-row:last-child{border-bottom:none}
.rbat-modal-foot{display:flex;align-items:center;gap:8px;justify-content:flex-end;padding:10px;border-top:1px solid #eee; position:sticky; bottom:0; background:#fff; z-index:2; pointer-events:auto; color:#111}

/* Form i modal */
.rbat-form{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:12px; box-sizing:border-box; background:#fff}
/* Create modal: single scroll area = the form section between head and foot */
.rbat-reslist-wrap dialog#rbat-create-modal .rbat-form{
  background:transparent; border-radius:0; max-width:none; width:auto;
  flex:1 1 auto; overflow:auto; box-shadow:none; min-height:0; /* allow flexbox to shrink */
  overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
}
@media (max-width: 640px){
  .rbat-modal-box{ max-width: 560px; width: calc(100vw - 12px); }
}
.rbat-field{display:flex;flex-direction:column;gap:6px; min-width:0}
.rbat-form .rbat-field > label{font-size:12px;color:#111;font-weight:600}
.rbat-field-span-2{grid-column:1 / -1}
.rbat-field-textarea{grid-column:1 / -1}
.rbat-input,.rbat-textarea{width:100%;max-width:100%;padding:8px;border:1px solid #d1d5db;border-radius:6px;background:#fff;font-size:14px; box-sizing:border-box; color:#111}
.rbat-input::placeholder,.rbat-textarea::placeholder{ color:#6b7280 }
.rbat-textarea{min-height:80px}

/* Inline error text in forms */
.rbat-error{color:#b32d2e;margin:6px 10px 0}

/* Ghost primary – "usynlig" gem-knap indtil hover/focus */
.rbat-btn-ghost-primary{
  background:#fff;border-color:#fff;color:#fff; /* visuelt "usynlig" */
  transition:all .15s ease;
  box-shadow:none;
}
.rbat-modal-box:hover .rbat-btn-ghost-primary,
.rbat-btn-ghost-primary:focus,
.rbat-btn-ghost-primary:focus-visible{
  background:#0f62fe;border-color:#0f62fe;color:#fff;
  outline:none;
}

/* Switch-styles til "Automatisk bordvalg" */
.rbat-switch{display:inline-flex;align-items:center;gap:8px;cursor:pointer;user-select:none}
.rbat-switch input{position:absolute;opacity:0;pointer-events:none}
.rbat-switch-ui{
  width:38px;height:22px;border-radius:999px;border:1px solid #ccc;background:#f2f2f2;position:relative;display:inline-block;transition:all .15s;
}
.rbat-switch-ui::after{
  content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.1);transition:all .15s;
}
.rbat-switch input:checked + .rbat-switch-ui{
  background:#0f62fe;border-color:#0f62fe;
}
.rbat-switch input:checked + .rbat-switch-ui::after{
  transform:translateX(16px);
}
.rbat-switch-label{font-size:14px}

/* Toast */
.rbat-toast{
  position:fixed;right:16px;bottom:16px;min-width:260px;max-width:360px;
  background:#fff;border:1px solid #ddd;border-radius:10px;
  box-shadow:0 8px 40px rgba(0,0,0,.12);
  opacity:0;pointer-events:none;transform:translateY(10px);
  transition:all .15s;z-index:999999
}
.rbat-toast.show{opacity:1;pointer-events:auto;transform:translateY(0)}
.rbat-toast .rbat-toast-body{padding:10px 14px}

/* Responsive tweaks */
@media (max-width: 820px){
  .rbat-board-leftspacer,.rbat-board-label{width:120px;min-width:120px;flex:0 0 120px}
  .rbat-month-grid{gap:4px}
}
@media (max-width: 640px){
  /* Stack head title and controls for small screens */
  .rbat-reslist-head{flex-direction:column;align-items:stretch;gap:8px; max-width:100%; overflow:hidden}
  .rbat-reslist-controls{gap:6px; max-width:100%; overflow:hidden}
  .rbat-reslist-title{font-size:16px}
  .rbat-datejump{margin-left:0}
  .rbat-reslist-wrap{padding:8px}
  .rbat-reslist-app{padding:6px}

  .rbat-form{grid-template-columns:1fr}
  .rbat-reslist-app{padding:8px}

  .rbat-week-headrow{grid-template-columns:52px repeat(7,1fr)}
  .rbat-week-grid{grid-template-columns:52px repeat(7,1fr)}
  .rbat-day-grid{grid-template-columns:60px 1fr}

  .rbat-week-headrow,
  .rbat-week-grid{min-width: 560px}

  .rbat-week-timecol .rbat-hour,
  .rbat-day-timecol .rbat-hour{font-size:10px;padding:2px 4px}

  /* Narrower label column to expose more timeline on small screens */
  /* Use !important and higher specificity to beat any cached fallback */
  .rbat-board-leftspacer,.rbat-board-label{width:72px !important;min-width:72px !important;flex:0 0 72px !important}
  #rbat-reslist-app .rbat-board-leftspacer,
  #rbat-reslist-app .rbat-board-label{width:72px !important;min-width:72px !important;flex:0 0 72px !important}
  /* Increase specificity so this wins over inline fallback CSS */
  #rbat-reslist-app .rbat-board-leftspacer,
  #rbat-reslist-app .rbat-board-label{width:72px;min-width:72px;flex:0 0 72px}
  .rbat-board-timecell{width:64px;min-width:0}
  .rbat-month-cell{min-height:84px;padding:6px}
  .rbat-month-cell-head{font-size:11px}
  /* Show calendar first and floorplan below; no special tabs needed on mobile */
  /* Keep calendar (app) first, floor embed below */
  #rbat-reslist-app{order:1}
  #rbat-floor-embed{order:2}
  .rbat-floor-embed{margin-top:8px}
  /* Show floor toggle on small screens */
  #rbat-mobile-floor-toggle{ display:block }
  /* Constrain floor embed height on small screens to reduce overflow */
  /* Prefer single horizontal scrollbar for the floor; let the page handle vertical
    Make the outer section taller on mobile */
  #rbat-floor-embed{ min-height: 70vh; max-height: 92vh; overflow-x:auto; overflow-y:visible; padding-bottom: 12px }
  /* A small spacer under the floor to make page scroll gesture easier */
  #rbat-floor-embed::after{ content:""; display:block; height:10px }

  /* Stack floor toolbar: title above buttons */
  .rbat-floor-embed-toolbar{ flex-direction:column; align-items:stretch !important; justify-content:flex-start !important }
  .rbat-floor-embed-toolbar .rbat-muted{ margin-bottom:4px }
  .rbat-floor-embed-toolbar .rbat-floor-embed-controls{ justify-content:flex-start; flex-wrap:wrap }

  /* Compact board rows on small screens */
  .rbat-board-row{ gap:4px; margin-bottom:4px }
  .rbat-board-label{ padding:4px; font-size:11px }
  .rbat-board-timecell{ padding:4px 2px }

  /* Sticky nav bar for board/day/week so controls stay visible when scrolling */
  .rbat-board .rbat-nav,
  .rbat-day .rbat-nav,
  .rbat-week .rbat-nav{ position:sticky; top:0; z-index:4; background:#fff; padding-top:6px; margin-bottom:6px }
  .rbat-reslist-wrap[data-theme="dark"] .rbat-board .rbat-nav,
  .rbat-reslist-wrap[data-theme="dark"] .rbat-day .rbat-nav,
  .rbat-reslist-wrap[data-theme="dark"] .rbat-week .rbat-nav{ background:#111827 }

  /* Optional bottom toolbar (hidden by default; can be enabled later) */
  .rbat-mobile-toolbar{ position:sticky; bottom:0; left:0; right:0; display:flex; gap:6px; padding:6px; background:#fff; border-top:1px solid #eee }
  .rbat-reslist-wrap[data-theme="dark"] .rbat-mobile-toolbar{ background:#111827; border-top-color:#26313f }
}

/* Ekstra kompakt layout for meget små mobiler */
@media (max-width: 480px){
  .rbat-modal{padding:10px}
  .rbat-modal-box{width:calc(100vw - 16px); max-height:88vh}
  .rbat-modal-head{ padding:10px 12px }
  .rbat-modal-list{ padding:8px 10px }
  .rbat-modal-row{grid-template-columns:60px 1fr}
  .rbat-modal-row .rbat-btn{justify-self:end; margin-top:6px}
  /* Tighten board lane height and font sizes for extra small screens */
  .rbat-board-timecell{width:56px !important;min-width:0 !important;font-size:10px}
  /* Extra compact on very small screens */
  .rbat-board-leftspacer,.rbat-board-label{width:64px !important;min-width:64px !important;flex:0 0 64px !important}
  #rbat-reslist-app .rbat-board-leftspacer,
  #rbat-reslist-app .rbat-board-label{width:64px !important;min-width:64px !important;flex:0 0 64px !important}
  /* Increase specificity so this wins over inline fallback CSS */
  #rbat-reslist-app .rbat-board-leftspacer,
  #rbat-reslist-app .rbat-board-label{width:64px;min-width:64px;flex:0 0 64px}
  .rbat-board-lane{height:60px}
  .rbat-res-h{min-height:34px;font-size:11px}
  /* Tighter but still tall floor embed on very small screens */
  #rbat-floor-embed{ min-height: 65vh; max-height: 88vh }
}

/* Dark theme – applied when wrapper has data-theme="dark" */
.rbat-reslist-wrap[data-theme="dark"]{
  color-scheme: dark;
}
.rbat-reslist-wrap[data-theme="dark"] .rbat-reslist-app{ background:#111827; border-color:#26313f }
.rbat-reslist-wrap[data-theme="dark"] .rbat-reslist-head{ color:#c8d1dc }
.rbat-reslist-wrap[data-theme="dark"] .rbat-reslist-title{ color:#e6edf3 }
.rbat-reslist-wrap[data-theme="dark"] .rbat-reslist-controls .rbat-btn,
.rbat-reslist-wrap[data-theme="dark"] .rbat-btn{
  background:#0f141a; color:#c8d1dc; border-color:#273040
}
.rbat-reslist-wrap[data-theme="dark"] .rbat-btn:hover{ background:#121923; border-color:#324055 }
.rbat-reslist-wrap[data-theme="dark"] .rbat-btn.active,
.rbat-reslist-wrap[data-theme="dark"] .rbat-btn-primary{ background:#2563eb; border-color:#2563eb; color:#fff }
.rbat-reslist-wrap[data-theme="dark"] .rbat-btn-danger{ background:#2a1515; border-color:#5e2a2a; color:#ffb3b3 }
/* In dark theme, ensure explicit danger buttons are red and readable */
.rbat-reslist-wrap[data-theme="dark"] .rbat-btn.rbat-btn-danger{ background:#b91c1c; border-color:#b91c1c; color:#fff }
.rbat-reslist-wrap[data-theme="dark"] .rbat-btn.rbat-btn-danger:hover{ filter:brightness(1.05) }
.rbat-reslist-wrap[data-theme="dark"] .rbat-datejump-label{ color:#a3b1c2 }
.rbat-reslist-wrap[data-theme="dark"] .rbat-date-input{ background:#0f141a; border-color:#273040; color:#d6dde6 }

/* Summary + chips */
.rbat-reslist-wrap[data-theme="dark"] .rbat-summary{ background:#0f141a; border-color:#273040; color:#aab7c6 }
.rbat-reslist-wrap[data-theme="dark"] .rbat-summary .count{ color:#e6edf3 }
.rbat-reslist-wrap[data-theme="dark"] .rbat-chip{ background:#0e1a2d; border-color:#213b6b; color:#cfe1ff }
.rbat-reslist-wrap[data-theme="dark"] .rbat-month-empty{ color:#7f8b99 }

/* Month */
.rbat-reslist-wrap[data-theme="dark"] .rbat-month-cell{ background:#162238; border-color:#2b3a50 }
.rbat-reslist-wrap[data-theme="dark"] .rbat-month-cell-head{ color:#93a4b7 }

/* Improve date title visibility in dark theme for week/day */
.rbat-reslist-wrap[data-theme="dark"] .rbat-week .rbat-nav .rbat-nav-ttl,
.rbat-reslist-wrap[data-theme="dark"] .rbat-day .rbat-nav .rbat-nav-ttl,
.rbat-reslist-wrap[data-theme="dark"] .rbat-day-head{
  color:#e6edf3;
}

/* Week/Day grids */
.rbat-reslist-wrap[data-theme="dark"] .rbat-week-dayhead{ background:#162238; border-color:#2b3a50; color:#e2e8f0 }
.rbat-reslist-wrap[data-theme="dark"] .rbat-week-timecol .rbat-hour,
.rbat-reslist-wrap[data-theme="dark"] .rbat-day-timecol .rbat-hour{ color:#93a4b7 }
.rbat-reslist-wrap[data-theme="dark"] .rbat-week-col,
.rbat-reslist-wrap[data-theme="dark"] .rbat-day-col{ background:#162238; border-color:#2b3a50 }
.rbat-reslist-wrap[data-theme="dark"] .rbat-week-cell,
.rbat-reslist-wrap[data-theme="dark"] .rbat-day-cell{ border-bottom-color:#344457 }

/* Vertical reservation chips */
.rbat-reslist-wrap[data-theme="dark"] .rbat-res{ background:#113a20; border-color:#2a7a45; box-shadow:none }
.rbat-reslist-wrap[data-theme="dark"] .rbat-res .r-time{ color:#d7f4e2 }
.rbat-reslist-wrap[data-theme="dark"] .rbat-res .r-txt{ color:#c7ead6 }

/* Board timeline */
.rbat-reslist-wrap[data-theme="dark"] .rbat-board-leftspacer{ background:#162238 }
.rbat-reslist-wrap[data-theme="dark"] .rbat-board-timerow{ background:#162238; border-color:#2b3a50 }
.rbat-reslist-wrap[data-theme="dark"] .rbat-board-timecell{ background:#162238; border-right-color:#344457; color:#cbd5e1 }
.rbat-reslist-wrap[data-theme="dark"] .rbat-board-label{ background:#162238; border-color:#2b3a50; color:#e2e8f0; border-right-color:#344457 }
.rbat-reslist-wrap[data-theme="dark"] .rbat-board-lane{ background:#162238; border-color:#2b3a50 }
.rbat-reslist-wrap[data-theme="dark"] .rbat-res-h{ background:#113a20; border-color:#2a7a45; box-shadow:none }
.rbat-reslist-wrap[data-theme="dark"] .rbat-res-h .r-time{ color:#d7f4e2 }
.rbat-reslist-wrap[data-theme="dark"] .rbat-res-h .r-name,
.rbat-reslist-wrap[data-theme="dark"] .rbat-res-h .r-txt{ color:#c7ead6 }

/* Modal */
.rbat-reslist-wrap[data-theme="dark"] .rbat-modal{ background:rgba(0,0,0,.6) }
.rbat-reslist-wrap[data-theme="dark"] .rbat-modal-box{ background:#0f141a; color:#e6edf3; box-shadow:0 10px 40px rgba(0,0,0,.5) }
.rbat-reslist-wrap[data-theme="dark"] .rbat-modal-head{ border-bottom-color:#273040; color:#e6edf3; background:#0f141a }
.rbat-reslist-wrap[data-theme="dark"] .rbat-modal-list{ color:#c8d1dc; background:transparent }
.rbat-reslist-wrap[data-theme="dark"] .rbat-modal-row{ border-bottom-color:#1a2330 }
.rbat-reslist-wrap[data-theme="dark"] .rbat-modal-foot{ border-top-color:#273040; background:#0f141a; color:#e6edf3 }

/* Dark theme inputs/buttons inside modals */
.rbat-reslist-wrap[data-theme="dark"] .rbat-input,
.rbat-reslist-wrap[data-theme="dark"] .rbat-textarea{ background:#111827; color:#e6edf3; border-color:#334155 }
.rbat-reslist-wrap[data-theme="dark"] .rbat-input::placeholder,
.rbat-reslist-wrap[data-theme="dark"] .rbat-textarea::placeholder{ color:#9aa4b2 }
.rbat-reslist-wrap[data-theme="dark"] .rbat-btn{ background:#1f2937; border-color:#374151; color:#e6edf3 }
.rbat-reslist-wrap[data-theme="dark"] .rbat-btn.rbat-btn-danger{ background:#dc2626; border-color:#dc2626; color:#fff }

/* Create reservation form container should follow dark theme */
.rbat-reslist-wrap[data-theme="dark"] dialog#rbat-create-modal .rbat-form{
  background:#0b0f14;
}

/* Edit reservation form should also use dark background in dark mode */
.rbat-reslist-wrap[data-theme="dark"] dialog#rbat-edit-modal .rbat-form{
  background:#0b0f14;
}

/* Names modal: ensure list + fields inherit dark backgrounds */
.rbat-reslist-wrap[data-theme="dark"] dialog#rbat-names-modal .rbat-modal-list{
  background:transparent; color:#c8d1dc;
}
.rbat-reslist-wrap[data-theme="dark"] dialog#rbat-names-modal .rbat-input{
  background:#0f141a; border-color:#273040; color:#d6dde6;
}
.rbat-reslist-wrap[data-theme="dark"] dialog#rbat-names-modal .rbat-modal-head,
.rbat-reslist-wrap[data-theme="dark"] dialog#rbat-names-modal .rbat-modal-foot{
  background:#0f141a; color:#e6edf3; border-color:#273040;
}
/* Names modal: slightly stronger row separators for readability in dark */
.rbat-reslist-wrap[data-theme="dark"] dialog#rbat-names-modal .rbat-modal-row{
  border-bottom-color:#223042;
}

/* --- Order modal (Menukort integration) --- */
.rbat-order-modal .rbat-modal-box{ max-width: 1100px; width: 95vw; }
.rbat-order{ display:flex; flex-direction: column; }
.rbat-order-body{ display:grid; grid-template-columns: 1fr 1fr 280px; gap:16px; min-height: 420px; padding: 10px; box-sizing: border-box; }
.rbat-order-left{ overflow:auto; border-right: 1px solid var(--rbat-border,#ddd); padding-right:8px; }
.rbat-order-sec{ margin-bottom: 14px; }
/* Clearer section titles */
.rbat-order-sec-title{
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .02em;
  color: #374151;
  margin: 10px 0 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--rbat-border,#e5e7eb);
}
/* Consistent alignment for name/description (left) and price (right) */
.rbat-order-item{
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 12px;
  width: 100%;
  align-items: center;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
}
.rbat-order-item .r-text{
  display: flex; flex-direction: column; gap: 3px; text-align: left;
  min-width: 0; /* allow text to truncate before price */
}
.rbat-order-item .r-name{
  font-weight: 600; color: #111827; line-height: 1.25;
}
.rbat-order-item .r-desc{
  font-size: 12px; color:#6b7280; opacity:.95; line-height:1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  line-clamp: 2; /* standard property */
}
.rbat-order-item .r-price{
  justify-self: end; align-self: center; white-space: nowrap;
  font-weight: 600; color:#111827; font-variant-numeric: tabular-nums;
}
.rbat-order-item:hover{ background: var(--rbat-bg-2,#f6f7f7); border-color: var(--rbat-border,#e0e0e0); }
.rbat-order-item:focus,
.rbat-order-item:focus-visible{ outline: 2px solid #2563eb; outline-offset: 1px; }
.rbat-order-mid{ overflow:auto; }
.rbat-order-lines{ display:flex; flex-direction: column; gap:8px; }
.rbat-order-lines .r-line{ display:grid; grid-template-columns: 1fr 72px 1fr 90px 32px; gap:8px; align-items:center; }
.rbat-order-lines .r-title{ font-weight:500; }
.rbat-order-lines .r-qty{ width:100%; padding:6px 8px; }
.rbat-order-lines .r-note{ width:100%; padding:6px 8px; }
.rbat-order-lines .r-line-total{ text-align:right; font-variant-numeric: tabular-nums; }
.rbat-order-lines .r-del{ border:none; background:#f44336; color:#fff; border-radius:4px; width:32px; height:32px; cursor:pointer; }
.rbat-order-right{ border-left:1px solid var(--rbat-border,#ddd); padding-left:8px; display:flex; flex-direction:column; gap:8px; }
.rbat-order-right .r-sum, .rbat-order-right .r-vat, .rbat-order-right .r-total{ display:flex; justify-content: space-between; }
.rbat-order-right .r-total{ font-weight:700; font-size:1.05rem; }
.rbat-order-right .r-split{ margin-top: 8px; display:flex; flex-direction:column; gap:6px; }
.rbat-order-right .r-split input{ width:100px; }

@media (max-width: 900px){
  .rbat-order-body{ grid-template-columns: 1fr; }
  .rbat-order-left{ border-right:none; padding-right:0; }
  .rbat-order-right{ border-left:none; padding-left:0; }
}
/* Dark theme for Order modal */
.rbat-reslist-wrap[data-theme="dark"] .rbat-order-modal .rbat-modal-box{
  --rbat-border: #273040;
  --rbat-bg-2: #121923;
}
.rbat-reslist-wrap[data-theme="dark"] .rbat-order-body{ background: transparent; }
.rbat-reslist-wrap[data-theme="dark"] .rbat-order-left{ border-right-color: var(--rbat-border,#273040); }
.rbat-reslist-wrap[data-theme="dark"] .rbat-order-right{ border-left-color: var(--rbat-border,#273040); }
.rbat-reslist-wrap[data-theme="dark"] .rbat-order-sec-title{ color:#dfe7f1; border-bottom-color: var(--rbat-border,#273040); }
.rbat-reslist-wrap[data-theme="dark"] .rbat-order-item{
  background: transparent; border-color: transparent; color:#e6edf3;
}
.rbat-reslist-wrap[data-theme="dark"] .rbat-order-item .r-name{ color:#e6edf3; }
.rbat-reslist-wrap[data-theme="dark"] .rbat-order-item .r-desc{ color:#9aa4b2; }
.rbat-reslist-wrap[data-theme="dark"] .rbat-order-item .r-price{ color:#e6edf3; }
.rbat-reslist-wrap[data-theme="dark"] .rbat-order-item:hover{ background: var(--rbat-bg-2,#121923); border-color: var(--rbat-border,#273040); }
.rbat-reslist-wrap[data-theme="dark"] .rbat-order-lines .r-title{ color:#e6edf3; }
.rbat-reslist-wrap[data-theme="dark"] .rbat-order-lines .r-qty,
.rbat-reslist-wrap[data-theme="dark"] .rbat-order-lines .r-note{
  background:#0f141a; border:1px solid #273040; color:#d6dde6;
}
.rbat-reslist-wrap[data-theme="dark"] .rbat-order-lines .r-line-total{ color:#e6edf3; }
.rbat-reslist-wrap[data-theme="dark"] .rbat-order-right .r-sum,
.rbat-reslist-wrap[data-theme="dark"] .rbat-order-right .r-vat,
.rbat-reslist-wrap[data-theme="dark"] .rbat-order-right .r-total{ color:#e6edf3; }
.rbat-reslist-wrap[data-theme="dark"] .rbat-order-right .r-split input{
  background:#0f141a; border:1px solid #273040; color:#d6dde6;
}
.rbat-reslist-wrap[data-theme="dark"] .rbat-input,
.rbat-reslist-wrap[data-theme="dark"] .rbat-textarea{ background:#0f141a; border-color:#273040; color:#d6dde6 }
.rbat-reslist-wrap[data-theme="dark"] .rbat-form .rbat-field > label{ color:#dfe7f1 }
.rbat-reslist-wrap[data-theme="dark"] .rbat-input::placeholder,
.rbat-reslist-wrap[data-theme="dark"] .rbat-textarea::placeholder{ color:#b9c7d6 }
.rbat-reslist-wrap[data-theme="dark"] #rbat-create-modal .rbat-muted{ color:#cfe1ff }
.rbat-reslist-wrap[data-theme="dark"] .rbat-switch-label{ color:#d6dde6 }
.rbat-reslist-wrap[data-theme="dark"] .rbat-error{ color:#ff9191 }
.rbat-reslist-wrap[data-theme="dark"] .rbat-switch-ui{ background:#141b24; border-color:#2b384c }
.rbat-reslist-wrap[data-theme="dark"] .rbat-switch-ui::after{ background:#0b0f14 }
.rbat-reslist-wrap[data-theme="dark"] .rbat-switch input:checked + .rbat-switch-ui{ background:#2563eb; border-color:#2563eb }

/* Toast */
.rbat-reslist-wrap[data-theme="dark"] .rbat-toast{ background:#0f141a; border-color:#273040; box-shadow:0 8px 40px rgba(0,0,0,.35) }
.rbat-reslist-wrap[data-theme="dark"] .rbat-toast .rbat-toast-body{ color:#d6dde6 }

/* Discreet corner theme toggle */
.rbat-theme-toggle{
  position:absolute; left:10px; top:10px; right:auto;
  width:28px; height:28px; padding:0; line-height:1; display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px; border:1px solid hsl(0, 0%, 80%); background:#fff; color:#333; font-size:14px;
  opacity:.8; z-index:10;
}
.rbat-theme-toggle:hover{ opacity:1; background:#f6f6f6 }
.rbat-theme-toggle.active{ background:#2563eb; border-color:#2563eb; color:#fff }
.rbat-reslist-wrap.rbat-is-fullscreen .rbat-theme-toggle{ position:fixed } /* keep visible in fullscreen */

/* Dark skin for the toggle in dark mode */
.rbat-reslist-wrap[data-theme="dark"] .rbat-theme-toggle{ background:#0f141a; border-color:#273040; color:#c8d1dc }
.rbat-reslist-wrap[data-theme="dark"] .rbat-theme-toggle:hover{ background:#121923 }
.rbat-reslist-wrap[data-theme="dark"] .rbat-theme-toggle.active{ background:#2563eb; border-color:#2563eb; color:#fff }

/* Match header and view-tab backgrounds to the widget background in dark mode */
.rbat-reslist-wrap[data-theme="dark"] .rbat-reslist-head,
.rbat-reslist-wrap[data-theme="dark"] .rbat-reslist-controls,
.rbat-reslist-wrap[data-theme="dark"] .rbat-month .rbat-nav,
.rbat-reslist-wrap[data-theme="dark"] .rbat-week .rbat-nav,
.rbat-reslist-wrap[data-theme="dark"] .rbat-day .rbat-nav{
  background:#111827;
}

/* Visually merge head + controls + app into one card in dark theme */
.rbat-reslist-wrap[data-theme="dark"] .rbat-reslist-head{
  margin-bottom:0;
  background:#111827;
  border:1px solid #26313f;
  border-bottom:none;
  border-radius:8px 8px 0 0;
  padding:10px; box-sizing:border-box;
}
.rbat-reslist-wrap[data-theme="dark"] .rbat-reslist-controls{
  margin-bottom:0;
  background:#111827;
  border-left:1px solid #26313f;
  border-right:1px solid #26313f;
  border-bottom:none;
  border-radius:0;
  padding:10px; box-sizing:border-box;
}
.rbat-reslist-wrap[data-theme="dark"] .rbat-reslist-app{
  margin-top:0;
  border-top:none;
  border-radius:0 0 8px 8px;
}

/* Actions row right above the calendar ('+ Opret reservation') – match card background and remove white gap */
.rbat-reslist-wrap[data-theme="dark"] .rbat-actions-top{
  background:#111827;
  border-left:1px solid #26313f;
  border-right:1px solid #26313f;
  border-bottom:none;
  margin:0 !important; /* override inline margin-bottom */
  padding:10px; box-sizing:border-box;
}

/* Embedded floor plan: improve contrast for nav and canvas in dark mode */
.rbat-reslist-wrap[data-theme="dark"] .rbat-floor-nav{ color:#e6edf3 }
.rbat-reslist-wrap[data-theme="dark"] .rbat-floor-nav-title{ color:#e6edf3 }
.rbat-reslist-wrap[data-theme="dark"] .rbat-floor-nav-btn{ background:#0f141a; border-color:#273040; color:#e6edf3 }
.rbat-reslist-wrap[data-theme="dark"] .rbat-floor-nav-btn:hover{ background:#121923 }
/* Keep existing calendar/floor backgrounds; focus on lightening foreground text */
/* Muted helper text (e.g., snap to grid) should be readable */
.rbat-reslist-wrap[data-theme="dark"] .rbat-muted{ color:#9fb0c2 }

/* Inspector (embedded admin-floor) – improve contrast in dark theme */
.rbat-reslist-wrap[data-theme="dark"] .rbat-inspector label{ color:#e6edf3 }
.rbat-reslist-wrap[data-theme="dark"] .rbat-inspector input,
.rbat-reslist-wrap[data-theme="dark"] .rbat-inspector select{
  background:#0f141a; border-color:#273040; color:#d6dde6;
}
.rbat-reslist-wrap[data-theme="dark"] .rbat-inspector input::placeholder,
.rbat-reslist-wrap[data-theme="dark"] .rbat-inspector select::placeholder{ color:#93a4b7 }
.rbat-reslist-wrap[data-theme="dark"] .rbat-sec-title{ color:#e6edf3 }
.rbat-reslist-wrap[data-theme="dark"] .rbat-node .label{ color:#d6dde6 }
.rbat-reslist-wrap[data-theme="dark"] .rbat-floor-help{ background:#0f141a; border-color:#273040; color:#c8d1dc }

/* Ensure all inputs in embedded admin-floor use dark fields to avoid light bg + light text */
.rbat-reslist-wrap[data-theme="dark"] #rbat-admin-floor-app input,
.rbat-reslist-wrap[data-theme="dark"] #rbat-admin-floor-app select,
.rbat-reslist-wrap[data-theme="dark"] #rbat-admin-floor-app textarea{
  background:#0f141a; border-color:#273040; color:#d6dde6;
}

/* Temporary move mode: allow dragging in embed without full edit UI */
.rbat-floor-embed .temp-move #rbat-stage,
.rbat-floor-embed .temp-move .rbat-admin-canvas{
  pointer-events:auto !important;
}

/* Ensure the inline 'Redigér' button is on top and readable */
.rbat-floor-embed .rbat-node .rbat-node-edit{
  z-index: 10; /* above icon */
  color: #111; /* readable on white background */
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
}
.rbat-reslist-wrap[data-theme="dark"] .rbat-floor-embed .rbat-node .rbat-node-edit{
  background:#1f2937 !important; /* slate-800 */
  border-color:#374151 !important; /* slate-700 */
  color:#fff !important;
}

/* --- Mobile polish for BOARD calendar chips --- */
@media (max-width: 640px){
  /* Slightly taller lane so two lines fit without clipping */
  .rbat-board-lane{ height:68px }
  /* Loosen chip padding and vertical insets */
  .rbat-res-h{ top:4px; bottom:4px; padding:6px 8px; line-height:1.25; box-sizing:border-box }
  .rbat-res-h .r-time{ line-height:1.2 }
  /* Allow two lines and truncate beyond that for long names or labels */
  .rbat-res-h .r-name,
  .rbat-res-h .r-txt{
    white-space:normal;
    display:-webkit-box;
    line-clamp:2; /* standard */
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    text-overflow:ellipsis;
  }
}

@media (max-width: 480px){
  /* On very small devices, ensure minimum chip height is big enough for two lines */
  .rbat-board-lane{ height:64px }
  .rbat-res-h{ min-height:40px }
}