/* ===========================================================================
   HomeAccess theme — coastal palette matched to baharini.co.za
   Brand colours sampled from the site: navy #000080, ocean #0C5074,
   sienna #a0522d. Built on check-ux layout conventions (fixed header,
   collapsible sidebar, data-bs-theme light/dark, dark default).
   Accent = ocean blue; sienna is kept as a small warm touch (env--production).
   =========================================================================== */

:root {
  /* Layout dimensions (check-ux) */
  --header-height: 72px;
  --sidebar-width: 220px;
  --sidebar-collapsed-width: 56px;
  --sidebar-transition: width 0.2s ease;

  /* Coastal accent (ocean blue, sampled from baharini.co.za #0C5074) */
  --accent: #16688f;          /* ocean blue — borders, button bg */
  --accent-strong: #2e8fbf;   /* bright sea — text/active, legible on dark + light */
  --accent-soft: rgba(22, 104, 143, 0.15);
  --accent-gradient: linear-gradient(135deg, #2e8fbf 0%, #0c5074 100%);
  --accent-warm: #a0522d;     /* sienna — sparing warm touch (matches site) */

  /* Deep ocean-navy header (constant in both themes) */
  --header-bg: #0c2a3d;
}

/* ---- Theme tokens: light (default values + explicit light) ---- */
:root,
[data-bs-theme="light"] {
  --bg: #f5f7f8;
  --surface: #ffffff;
  --surface-2: #eef2f4;
  --surface-hover: #e8eef1;
  --text: #14323f;
  --text-2: #566872;
  --text-3: #93a1a9;
  --border: #dce5e9;
  --shadow: 0 2px 8px rgba(12, 42, 61, 0.07);
  --shadow-lg: 0 8px 32px rgba(12, 42, 61, 0.14);
  --gradient-surface: linear-gradient(135deg, #ffffff 0%, #f2f7f9 100%);
  /* DataTables row striping / hover (light) */
  --row-alt: rgba(12, 42, 61, 0.02);
  --row-hover: rgba(12, 42, 61, 0.04);
}

/* ---- Theme tokens: dark (default theme) — deep slate-navy ---- */
[data-bs-theme="dark"] {
  --bg: #0f1c24;
  --surface: #16262f;
  --surface-2: #11202a;
  --surface-hover: #1e3038;
  --text: #e9eef2;
  --text-2: #a7b4bd;
  --text-3: #6e7c86;
  --border: #243742;
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
  --gradient-surface: linear-gradient(135deg, #16262f 0%, #122029 100%);
  /* DataTables row striping / hover (dark) */
  --row-alt: rgba(255, 255, 255, 0.025);
  --row-hover: rgba(255, 255, 255, 0.055);
}

body {
  background-color: var(--bg);
  color: var(--text);
}

/* ===========================================================================
   Header (deep ocean-navy, 3px accent bottom border, fixed)
   =========================================================================== */
header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-height);
  z-index: 1050;
  background: var(--header-bg);
  border-bottom: 3px solid;
  border-image: var(--accent-gradient) 1;
  padding: 0 48px;
  display: flex;
  align-items: center;
  gap: 14px;
}

header .logo {
  display: flex;
  align-items: center;
  color: var(--accent-strong);
  font-size: 22px;
  text-decoration: none;
  flex-shrink: 0;
}
/* Baharini wordmark: seated in a clean white pill so the navy "Beach House" text
   stays legible on the deep-ocean header background. */
header .logo .brand-logo {
  display: block;
  height: 42px;
  width: auto;
  background: #fff;
  padding: 4px 11px;
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);
}
@media (max-width: 575.98px) {
  header .logo .brand-logo { height: 34px; padding: 3px 8px; }
}
/* Branded login: the wordmark on a white card so it reads in either theme. */
.login-logo {
  width: 220px;
  max-width: 78%;
  height: auto;
  background: #fff;
  padding: 12px 18px;
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

.header-tagline {
  color: rgba(255, 255, 255, 0.75);
  font-size: 13px;
  font-style: italic;
  white-space: nowrap;
}

.theme-btn {
  background: rgba(255, 255, 255, 0.15);
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #fff;
  flex-shrink: 0;
  transition: background 0.15s;
  margin-left: auto;
}
.theme-btn:hover { background: rgba(255, 255, 255, 0.28); }

[data-bs-theme="light"] .icon-sun  { display: none !important; }
[data-bs-theme="light"] .icon-moon { display: flex; }
[data-bs-theme="dark"]  .icon-sun  { display: flex; }
[data-bs-theme="dark"]  .icon-moon { display: none !important; }

@media (max-width: 767.98px) {
  header { padding: 0 16px; }

  /* Auto-collapse the sidebar on mobile (applies before JS — no flash).
     The rail stays unless the user taps the toggle, which adds .mobile-expanded
     to float the full sidebar over the content as an overlay. */
  .sidebar:not(.mobile-expanded) {
    width: var(--sidebar-collapsed-width);
    min-width: var(--sidebar-collapsed-width);
  }
  .sidebar:not(.mobile-expanded) .brand-text,
  .sidebar:not(.mobile-expanded) .nav-label,
  .sidebar:not(.mobile-expanded) .sidebar-user,
  .sidebar:not(.mobile-expanded) .sidebar-footer .version,
  .sidebar:not(.mobile-expanded) .sidebar-footer .env {
    opacity: 0;
    width: 0;
    overflow: hidden;
    /* collapse fully so nothing peeks out of the 56px rail */
    padding: 0;
    margin: 0;
    border: 0;
  }
  .sidebar:not(.mobile-expanded) .sidebar-footer { justify-content: center; padding: 8px 4px; }

  /* `body .main-content` (0,1,1) so it beats the later base `.main-content`
     (0,1,0) rule — media queries don't add specificity, so equal-specificity
     rules would otherwise lose on source order and leave a 220px gap. */
  body .main-content { margin-left: var(--sidebar-collapsed-width); }

  /* Tapped open: full-width sidebar overlays the content */
  .sidebar.mobile-expanded {
    width: var(--sidebar-width);
    min-width: var(--sidebar-width);
    z-index: 1100;
    box-shadow: var(--shadow-lg);
  }

  /* Dim the content behind the open drawer; tapping it closes the drawer (JS) */
  .sidebar.mobile-expanded ~ .sidebar-backdrop {
    display: block;
    position: fixed;
    top: calc(var(--header-height) + 3px);
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1090;
  }
}

/* ===========================================================================
   Sidebar (fixed, collapsible 220px -> 56px) — flex column so footer anchors
   =========================================================================== */
.sidebar {
  position: fixed;
  top: calc(var(--header-height) + 3px);
  left: 0;
  height: calc(100vh - var(--header-height) - 3px);
  width: var(--sidebar-width);
  min-width: var(--sidebar-width);
  overflow: hidden;
  overflow-y: auto;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  transition: var(--sidebar-transition);
  border-right: 1px solid var(--border);
}

.sidebar.collapsed {
  width: var(--sidebar-collapsed-width);
  min-width: var(--sidebar-collapsed-width);
}

/* Dark mode ocean-navy sidebar */
[data-bs-theme="dark"] .sidebar {
  background-color: #112029;
  border-right-color: #243742;
}
/* Light mode sidebar */
[data-bs-theme="light"] .sidebar {
  background-color: #eef3f5;
  border-right-color: #dce5e9;
}

.sidebar .sidebar-brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  min-height: 56px;
  white-space: nowrap;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.sidebar .sidebar-brand .brand-name {
  display: flex;
  align-items: center;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  overflow: hidden;
  transition: opacity 0.15s ease, width 0.2s ease;
}

.sidebar .brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.sidebar .brand-app  { color: var(--text); }
.sidebar .brand-sub  { font-size: 0.65rem; font-weight: 500; color: var(--text-3); letter-spacing: 0.02em; }

.sidebar.collapsed .brand-text {
  opacity: 0;
  width: 0;
  overflow: hidden;
}

.sidebar-toggle {
  background: transparent;
  border: none;
  color: var(--text-2);
  cursor: pointer;
  padding: 4px;
  flex-shrink: 0;
}
.sidebar-toggle:hover { color: var(--accent-strong); }

.sidebar-nav {
  list-style: none;
  padding: 0.5rem 0;
  margin: 0;
  flex: 1;
  overflow: hidden;
}

.sidebar-nav-item {
  display: flex;
  align-items: center;
  padding: 0.5rem 1rem;
  color: var(--text-2);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  border-radius: 0;
  border-left: 3px solid transparent;
  padding-left: calc(1rem - 3px);
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  gap: 0.75rem;
}

.sidebar-nav-item:hover {
  background-color: var(--surface-hover);
  color: var(--text);
  text-decoration: none;
}

/* Active: ocean-blue text + 3px left border, NO background fill */
.sidebar-nav-item.active {
  background-color: transparent;
  color: var(--accent-strong);
  border-left-color: var(--accent);
  font-weight: 600;
}

.sidebar-nav-item .nav-icon {
  flex-shrink: 0;
  width: 1.25rem;
  text-align: center;
  font-size: 0.9rem;
}

.sidebar-nav-item .nav-label {
  overflow: hidden;
  transition: opacity 0.15s ease, width 0.2s ease;
  flex: 1;
}

.sidebar-nav-item .soon-badge {
  flex: 0 0 auto;
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-3);
  background: var(--surface-2);
  padding: 1px 6px;
  border-radius: 4px;
}

.sidebar.collapsed .nav-label {
  opacity: 0;
  width: 0;
  overflow: hidden;
}

.sidebar-bottom {
  border-top: 1px solid var(--border);
  padding: 0.5rem 0;
  flex-shrink: 0;
}

/* ---- Sidebar footer: version + env tag (check-app-version Item 8) ---- */
.sidebar-footer {
  margin-top: auto;
  padding: 8px 12px;
  font-size: 0.75rem;
  color: var(--text-3);
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
}

.sidebar-footer .version {
  font-family: var(--bs-font-monospace, monospace);
  white-space: nowrap;
}

/* Signed-in user chip: name truncates with an ellipsis so a long name never overflows
   or gets clipped by the rail; the sign-out icon stays pinned and tappable. */
.sidebar-footer .sidebar-user {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.sidebar-footer .sidebar-logout {
  flex: 0 0 auto;
  color: var(--text-3);
  text-decoration: none;
  padding: 4px 6px;
  border-radius: 6px;
  line-height: 1;
}
.sidebar-footer .sidebar-logout:hover { color: var(--text); background: var(--surface-2); }

.sidebar-footer .env {
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.65rem;
  white-space: nowrap;
}

.sidebar-footer .env--local      { background: var(--surface-2); color: var(--text-2); }
.sidebar-footer .env--pi         { background: #0ea5e9; color: #fff; }
.sidebar-footer .env--linux      { background: #2563eb; color: #fff; }
.sidebar-footer .env--production { background: var(--accent-warm); color: #fff; }
.sidebar-footer .env--unknown    { background: var(--surface-2); color: var(--text-3); }

.sidebar.collapsed .sidebar-footer { justify-content: center; padding: 8px 4px; }
/* Collapsed rail: drop all text (env badge, version, username); keep only the sign-out icon. */
.sidebar.collapsed .sidebar-footer .env,
.sidebar.collapsed .sidebar-footer .version,
.sidebar.collapsed .sidebar-footer .sidebar-user { display: none; }

/* ===========================================================================
   Main content
   =========================================================================== */
.main-content {
  margin-left: var(--sidebar-width);
  margin-top: calc(var(--header-height) + 3px);
  min-height: calc(100vh - var(--header-height) - 3px);
  padding: 1.25rem;
  transition: margin-left 0.2s ease;
}

.sidebar.collapsed ~ .main-content,
body.sidebar-collapsed .main-content {
  margin-left: var(--sidebar-collapsed-width);
}

.main-content.no-sidebar { margin-left: 0; }

/* Mobile drawer backdrop — hidden except when the sidebar is tapped open on mobile */
.sidebar-backdrop { display: none; }

.page-header { margin-bottom: 1.25rem; }
.page-header h1 { font-size: 1.5rem; font-weight: 700; margin-bottom: 0.25rem; }

/* ===========================================================================
   Cards
   =========================================================================== */
.card {
  background: var(--gradient-surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow);
  color: var(--text);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.card:hover {
  box-shadow: var(--shadow), 0 4px 12px rgba(0, 0, 0, 0.08);
}

.card-header {
  background: transparent;
  border-bottom: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
  color: var(--accent-strong);
  padding: 10px 12px;
}

/* ===========================================================================
   Device cards (Devices admin page)
   =========================================================================== */
.device-card .device-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--surface-2, rgba(0, 0, 0, 0.04));
  color: var(--accent-strong);
  font-size: 1.05rem;
}
.device-card .device-name {
  font-weight: 600;
  line-height: 1.2;
}
.device-card .device-net {
  font-size: 0.95rem;
}
.device-card .device-meta {
  font-size: 0.75rem;
}
.device-card .min-w-0,
.device-card .text-truncate {
  min-width: 0;
}
.device-card .badge {
  font-weight: 500;
}
/* Control switch / open icon button (bottom-left of the card) — icon-only, clear tap target. */
.device-card .device-ctrl {
  font-size: 1.1rem;
  line-height: 1;
  padding: 0.2rem 0.55rem;
}

/* Compact device cards on phones so two fit per row (col-6). */
@media (max-width: 575.98px) {
  /* Halve the page's left/right whitespace on phones so tiles get more room (1.25rem → 0.625rem). */
  .main-content { padding-left: 0.625rem; padding-right: 0.625rem; }
  #device-grid { --bs-gutter-x: 0.5rem; --bs-gutter-y: 0.5rem; }
  .device-card .card-body { padding: 0.6rem; }
  .device-card .device-icon { width: 28px; height: 28px; font-size: 0.8rem; border-radius: 6px; }
  .device-card .device-name { font-size: 0.85rem; }
  .device-card .badge { font-size: 0.62rem; }
  .device-card .btn-edit-device { padding: 0.15rem 0.45rem; }
  .device-card .device-ctrl { font-size: 1rem; padding: 0.15rem 0.5rem; }
}

/* ===========================================================================
   Guest panel tiles — larger device icon (left) + switch control (right)
   =========================================================================== */
#guest-panel .device-icon {
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--accent-strong);
  font-size: 1.45rem;
}
/* `.min-w-0` is not a Bootstrap utility in this app — define it here so the title column can
   shrink (and text-truncate works), keeping the right-aligned switch inside the card. */
#guest-panel .min-w-0 { min-width: 0; }
/* A roomier switch — it's the guest's main touch control, standing alone on the right.
   Zero out the form-check label padding so the switch isn't pushed past the card edge. */
#guest-panel .form-switch {
  padding-left: 0;
  min-height: 0;
  margin: 0;
}
#guest-panel .form-switch .form-check-input {
  width: 2.6em;
  height: 1.3em;
  margin: 0;
  float: none;
  cursor: pointer;
}

/* ===========================================================================
   Buttons (ocean-blue primary)
   =========================================================================== */
.btn-primary {
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
  font-size: 0.8rem;
  padding: 0.3rem 0.75rem;
}
.btn-primary:hover {
  background-color: #0c5074 !important;
  border-color: #0c5074 !important;
}

/* ===========================================================================
   DataTables 2.x (dt-container) — ported from check-datatables, adapted to
   the coastal palette. Where the Herotel skill uses #FF5000 (orange) for the
   focus ring, active pagination, and the thead bottom-border, THIS app uses
   the ocean accent: var(--accent-strong) / var(--accent) / --accent-soft.
   All surface/text/border colours reuse the app's existing theme tokens.
   =========================================================================== */

/* Surface card — DataTable wrapper (gradient bg, matches the app's .card). */
.surface-card {
  background: var(--gradient-surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

/* Keep Bootstrap .row gutters from escaping the card; strip DT's mt-2 row. */
.card > .card-body.p-0 .dt-container .row {
  --bs-gutter-x: 0;
  margin-top: 0 !important;
}
.card > .card-body.p-0 .dt-container .dt-layout-start {
  padding: 5px 0 5px 5px;
}
.card > .card-body.p-0 .dt-container .dt-layout-end {
  padding: 5px 5px 5px 0;
}
.card > .card-body.p-0 .dt-container .dt-paging ul {
  margin-bottom: 0;
}
/* 5px horizontal breathing room back inside the p-0 card body. */
.card > .card-body.p-0 {
  padding-left: 5px !important;
  padding-right: 5px !important;
}

/* Container colour. */
.dt-container { color: var(--text); }

/* Toolbar label text — length, search, info, paging. */
.dt-container .dt-length,
.dt-container .dt-search,
.dt-container .dt-info,
.dt-container .dt-paging {
  color: var(--text-2);
  font-size: 0.8rem;
}

/* Search input + length select theming. */
.dt-container .dt-search input,
.dt-container .dt-length select {
  background: var(--surface-2) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: 6px;
  padding: 4px 8px;
}
/* Light mode: transparent inputs on the white card. */
[data-bs-theme="light"] .dt-container .dt-search input,
[data-bs-theme="light"] .dt-container .dt-length select {
  background: transparent !important;
}
/* Focus ring — ocean accent (NOT Herotel orange). */
.dt-container .dt-search input:focus,
.dt-container .dt-length select:focus {
  outline: none;
  border-color: var(--accent-strong) !important;
  box-shadow: 0 0 0 2px var(--accent-soft);
}

/* Right-side toolbar cell — flex so search + refresh + columns sit inline. */
.dt-container .dt-layout-end {
  display: flex !important;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
}
.dt-container .dt-layout-end > * {
  margin-left: 0 !important;
}

/* Pagination — sized to match btn-sm toolbar buttons. */
.dt-container .pagination .page-link {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
}
.dt-container .pagination .page-link:hover { background: var(--surface-hover); }
/* Active page — ocean accent gradient (NOT Herotel orange). */
.dt-container .pagination .page-item.active .page-link {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* Processing indicator. */
.dt-container .dt-processing {
  background: var(--surface) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-lg) !important;
}

/* ── Table cell styles ─────────────────────────────────────── */
table.dataTable thead th,
table.dataTable thead td {
  font-size: 0.7rem !important;
  color: var(--text-3) !important;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: 600;
  /* thead underline — ocean accent (NOT Herotel orange). */
  border-bottom: 2px solid var(--accent-strong) !important;
  border-top: none !important;
  padding: 8px 10px !important;
  background: transparent !important;
}
table.dataTable tbody tr > td {
  font-size: 0.8rem;
  padding: 7px 10px !important;
  vertical-align: middle;
  border-bottom: 1px solid var(--border) !important;
  color: var(--text);
}
.table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: var(--row-alt) !important;
  --bs-table-bg-type: var(--row-alt);
}
.table-hover > tbody > tr:hover > * {
  background-color: var(--row-hover) !important;
  --bs-table-bg-type: var(--row-hover);
}

/* ── DataTable row action buttons ──────────────────────────── */
.btn-row {
  padding: 1px 6px;
  font-size: 0.75rem;
  line-height: 1.5;
  border-radius: 4px;
}
.nobr { white-space: nowrap; }

/* Compact badges used in tables. */
.badge { font-weight: 600; --bs-badge-font-size: 9px; }

/* ===========================================================================
   DataTables Responsive extension — coastal-themed child rows + mobile toolbar
   =========================================================================== */

/* Expand/collapse control cell — accent colour */
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control::before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control::before {
  background-color: var(--accent-strong) !important;
  border: none;
  box-shadow: none;
}

/* Child (detail) row — blends with the surface card */
table.dataTable > tbody > tr.child {
  background: var(--surface-2) !important;
}
table.dataTable > tbody > tr.child td.child {
  border-bottom: 1px solid var(--border) !important;
  padding: 6px 12px !important;
}

/* Detail list inside the child row */
table.dataTable > tbody > tr.child ul.dtr-details {
  margin: 0;
  padding: 4px 0;
}
table.dataTable > tbody > tr.child ul.dtr-details li {
  border-bottom: 1px solid var(--border);
  padding: 4px 0;
}
table.dataTable > tbody > tr.child ul.dtr-details li:last-child {
  border-bottom: none;
}

/* Detail labels (column titles) */
table.dataTable > tbody > tr.child ul.dtr-details span.dtr-title {
  color: var(--text-3);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-weight: 600;
  min-width: 80px;
}

/* Detail values */
table.dataTable > tbody > tr.child ul.dtr-details span.dtr-data {
  color: var(--text);
  font-size: 0.8rem;
}

/* ===========================================================================
   Mobile toolbar + page-header overrides (≤ 575.98 px)
   =========================================================================== */
@media (max-width: 575.98px) {
  /* DT2 toolbar end cell (search + refresh + columns) — keep on ONE line; shrink the
     search box (a full-width Bootstrap .form-control) so the two buttons fit beside it. */
  .dt-container .dt-layout-end {
    flex-wrap: nowrap !important;
    gap: 4px !important;
  }
  .dt-container .dt-search {
    display: flex !important;
    align-items: center;
    gap: 4px;
    flex: 1 1 auto;
    min-width: 0;             /* allow the search cell to shrink below content size */
  }
  .dt-container .dt-search input {
    flex: 1 1 auto;
    width: auto !important;   /* override Bootstrap form-control width:100% */
    min-width: 0;
  }
  .dt-container .dt-layout-end .btn,
  .dt-container .dt-layout-end .btn-group {
    flex: 0 0 auto;           /* refresh + columns keep their natural size */
  }

  /* DT2 layout row — stack start (length) above end (search/buttons) */
  .dt-container .dt-layout-row {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  .dt-container .dt-layout-start,
  .dt-container .dt-layout-end {
    width: 100% !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
  }

  /* QR image — never overflow the modal on a small screen */
  #qr-modal img {
    max-width: 100%;
    height: auto;
  }
}

/* ===========================================================================
   Select2 — coastal palette overrides (dark + light, both themes)
   Scoped to .select2-* classes so these don't touch DataTables or other controls.
   =========================================================================== */

/* Selection box */
.select2-container--default .select2-selection--single {
  background-color: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  height: 38px;
  display: flex;
  align-items: center;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--text);
  line-height: 38px;
  padding-left: 10px;
  padding-right: 28px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 36px;
  top: 1px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: var(--text-3) transparent transparent transparent;
}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
  border-color: transparent transparent var(--text-3) transparent;
}

/* Focus ring — ocean accent */
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--accent-strong);
  box-shadow: 0 0 0 2px var(--accent-soft);
  outline: none;
}

/* Dropdown panel */
.select2-dropdown {
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: var(--shadow-lg);
  color: var(--text);
  z-index: 9999;
}

/* Search field inside the dropdown */
.select2-container--default .select2-search--dropdown .select2-search__field {
  background-color: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  padding: 4px 8px;
}
.select2-container--default .select2-search--dropdown .select2-search__field:focus {
  border-color: var(--accent-strong);
  box-shadow: 0 0 0 2px var(--accent-soft);
  outline: none;
}

/* Results list */
.select2-results__option {
  color: var(--text);
  padding: 6px 10px;
  font-size: 0.875rem;
}
.select2-results__option:hover,
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--accent-soft) !important;
  color: var(--accent-strong) !important;
}
.select2-container--default .select2-results__option[aria-selected="true"] {
  background-color: var(--surface-hover);
  color: var(--text);
}

/* Light-mode: selection box on a white card */
[data-bs-theme="light"] .select2-container--default .select2-selection--single {
  background-color: #ffffff;
}
[data-bs-theme="light"] .select2-dropdown {
  background-color: #ffffff;
}
[data-bs-theme="light"] .select2-container--default .select2-search--dropdown .select2-search__field {
  background-color: var(--surface-2);
}

/* ===========================================================================
   CSP: inline-style migration — all classes below replace inline style=""
   attributes so the app can drop 'unsafe-inline' from style-src CSP.
   =========================================================================== */

/* Auth / access-denied outer wrapper (margin-top: 3rem) */
.auth-wrap { margin-top: 3rem; }

/* Auth card + guest-status card (max-width: 420px; width: 100%) */
.auth-card { max-width: 420px; width: 100%; }

/* Guest status full-viewport centering wrapper */
.guest-status-wrap { min-height: calc(100vh - var(--header-height, 72px) - 30px); }

/* Toast container positioning (used in main layout + guest panel) */
.toast-top {
  z-index: 1100;
  margin-top: calc(var(--header-height, 72px) + 14px);
}

/* Guest panel property heading — fluid font scale */
.guest-title { font-size: clamp(1rem, 4.8vw, 1.75rem); }

/* DataTable action column — auto-shrink to content width */
.dt-shrink-col { width: 1px; white-space: nowrap; }

/* Cron log detail pre-block — scrollable with wrap */
.cron-log-detail { white-space: pre-wrap; max-height: 200px; overflow: auto; }

/* QR code image — constrained on large screens (mobile fallback already in media query) */
.qr-img { max-width: 280px; border-radius: 8px; }

/* Initial hidden state for elements shown later by jQuery .show() / .hide()
   (booking-qr-inline). Using a plain display:none (no !important) so jQuery
   .show()/.hide() can override it without needing class manipulation. */
.hidden-init { display: none; }

/* ---------------------------------------------------------------------------
   Device control "pending" animation — added to a device tile/card while a
   switch toggle is in flight (click → waiting for the server to confirm the
   new state). Used on both the Devices page (.btn-device-toggle / -open) and
   the guest panel (.form-check-input switch). Cleared when the authoritative
   state lands (socket device:update) or the request resolves.
   --------------------------------------------------------------------------- */
@keyframes ha-pending-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}
.is-pending { cursor: wait; }
.is-pending .form-check-input,
.is-pending .btn-device-toggle,
.is-pending .btn-device-open {
  animation: ha-pending-pulse 0.8s ease-in-out infinite;
  pointer-events: none;
}

/* ===========================================================================
   Settings page — All-Access actions
   =========================================================================== */
/* Copy + Regenerate buttons share one grid so they're equal width and height;
   capped on desktop, full-width on the narrow mobile card. */
.aa-actions { max-width: 360px; }

/* Live-status refresh indicator (guest / All-Access panel) — fixed pill, top-centre,
   0.75rem below the fixed header (var(--header-height), 72px + 3px accent border);
   shown by guest.js while a snapshot round-trip is in flight. */
.live-refresh {
  position: fixed;
  top: calc(var(--header-height, 72px) + 3px + 0.75rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 1080;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}