/* ==================================================================
   Light / dark theme + top-bar switches (theme and language).
   <html data-theme="dark"> is set before the page paints (see base.html).
=================================================================== */

/* ---------- Theme switch (sun / moon pill) ---------- */
.pm-theme-switch { position: relative; width: 62px; height: 32px; flex: 0 0 62px; border: 1px solid var(--line); border-radius: 99px; background: var(--bg);
  display: flex; align-items: center; justify-content: space-between; padding: 0 9px; cursor: pointer; color: var(--muted); font-size: .8rem;
  transition: background .2s, border-color .2s; }
.pm-theme-switch:hover { border-color: #cfd8dd; }
.pm-theme-switch:focus-visible { outline: 3px solid rgba(15, 91, 102, .35); outline-offset: 2px; }
.pm-theme-switch .bi-sun-fill { color: #D9962B; }
.pm-theme-switch .bi-moon-stars-fill { color: #7C8FD8; }
.pm-theme-knob { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 4px rgba(16, 24, 40, .25); transition: transform .22s ease; }
html[data-theme="dark"] .pm-theme-knob { transform: translateX(30px); background: #2A3D47; }

/* ---------- Language menu (flags) ---------- */
.pm-lang-btn { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 10px 0 8px; border: 1px solid var(--line); border-radius: 99px;
  background: transparent; color: var(--ink); font-family: inherit; font-size: .8rem; font-weight: 600; letter-spacing: .02em; cursor: pointer; }
.pm-lang-btn:hover { background: var(--bg); }
.pm-lang-btn i.bi-translate { color: var(--brand); }
.pm-lang-caret { font-size: .65rem; color: var(--muted); }
.pm-flag { display: inline-block; flex: 0 0 auto; width: 22px; height: 15px; object-fit: cover; border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(16, 24, 40, .12); background: #eee; }
.pm-lang-menu { min-width: 220px; padding: 6px; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 12px 32px rgba(16, 24, 40, .16); }
.pm-lang-title { font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 6px 10px 6px; }
.pm-lang-menu button.dropdown-item { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 9px;
  font-size: .92rem; color: var(--ink); text-align: start; }
.pm-lang-menu button.dropdown-item .pm-flag { width: 24px; height: 16px; }
.pm-lang-menu button.dropdown-item .name { flex: 1; unicode-bidi: isolate; }
.pm-lang-menu button.dropdown-item:hover { background: var(--bg); }
.pm-lang-menu .code { font-size: .7rem; font-weight: 700; color: var(--muted); letter-spacing: .05em; }
.pm-lang-menu .is-current { background: var(--brand-soft); color: var(--brand-700, var(--brand)); font-weight: 600; }
.pm-lang-menu .is-current .tick { color: var(--brand); font-size: 1rem; }
.pm-lang-menu [lang="ar"] .name { font-family: "Segoe UI", Tahoma, "Noto Naskh Arabic", sans-serif; }

/* ======================= DARK THEME ======================= */
html[data-theme="dark"] {
  color-scheme: dark;
  --brand: #2C9BA6; --brand-600: #3AAEB8; --brand-700: #6CCAD2; --brand-ink: #081E23;
  --brand-soft: #12343A; --brand-ring: rgba(76, 190, 199, .25);
  --accent-soft: #3A2C12;
  --bg: #0E1A20; --surface: #15232B; --ink: #E6EEF2; --ink-2: #C2CFD6; --muted: #8DA2AE; --line: #24363F; --line-2: #1F3038;
  --ok: #4CC79F; --ok-soft: #123A2F; --warn: #E8B04B; --warn-soft: #3A2C12; --bad: #F07167; --bad-soft: #3D1A1F; --info: #6CB8E6; --info-soft: #132C3B;
  --bs-body-bg: var(--bg); --bs-body-color: var(--ink); --bs-secondary-color: var(--muted); --bs-border-color: var(--line);
  --bs-emphasis-color: #fff; --bs-secondary-bg: #1A2A33; --bs-tertiary-bg: #15232B; --bs-heading-color: var(--ink);
  --bs-primary-rgb: 44, 155, 166; --bs-link-color: #6CCAD2; --bs-link-color-rgb: 108, 202, 210; --bs-link-hover-color: #9BDDE3;
  --bs-card-bg: var(--surface);
}
html[data-theme="dark"] .pm, html[data-theme="dark"] .pm-modal {
  --pm-ink: #E6EEF2; --pm-sea: #5CC6CF; --pm-sea-deep: #A6E3E8; --pm-sea-soft: #12343A; --pm-primary: #1D7F89; --pm-primary-deep: #24939E;
  --pm-mist: #0E1A20; --pm-card: #15232B; --pm-raise: #1A2A33; --pm-line: #24363F; --pm-row-line: #1F3038; --pm-input-line: #2E434D;
  --pm-input-hover: #3E5662; --pm-track: #24363F; --pm-placeholder: #6E8592; --pm-muted: #8DA2AE;
  --pm-ok: #4CC79F; --pm-ok-soft: #123A2F; --pm-warn: #E8B04B; --pm-warn-soft: #3A2C12; --pm-slate: #B3C0C9; --pm-slate-soft: #24323A;
  --pm-danger: #F07167; --pm-danger-soft: #3D1A1F; --pm-danger-line: #5A2A2E;
  --pm-ring: rgba(92, 198, 207, .18); --pm-ring-strong: rgba(92, 198, 207, .4); --pm-shadow: rgba(0, 0, 0, .35);
}
html[data-theme="dark"] body { background: var(--bg); color: var(--ink); }

/* shell */
html[data-theme="dark"] .app-sidebar { background: #081E23; }
html[data-theme="dark"] .app-sidebar .nav-link.active { background: #1D7F89; }
html[data-theme="dark"] .app-topbar { background: #121F26; border-bottom-color: var(--line); }
html[data-theme="dark"] .app-topbar .search input { background: #0E1A20; color: var(--ink); }
html[data-theme="dark"] .app-topbar .search input:focus { background: #15232B; }
html[data-theme="dark"] .app-topbar .kbd { background: #15232B; color: var(--muted); }
html[data-theme="dark"] .pm-user-btn { background: #15232B; }
html[data-theme="dark"] .pm-user-btn:hover, html[data-theme="dark"] .pm-theme-switch:hover { border-color: #3E5662; }
html[data-theme="dark"] .pm-user-avatar { background: #1D7F89; }
html[data-theme="dark"] .dropdown-menu { --bs-dropdown-bg: #15232B; --bs-dropdown-color: var(--ink); --bs-dropdown-border-color: var(--line);
  --bs-dropdown-link-color: var(--ink); --bs-dropdown-link-hover-bg: #1A2A33; --bs-dropdown-link-hover-color: #fff; --bs-dropdown-divider-bg: var(--line); }
html[data-theme="dark"] .pm-user-menu .dropdown-item.is-danger, html[data-theme="dark"] .pm-user-menu .dropdown-item.is-danger i { color: #F07167; }
html[data-theme="dark"] .pm-user-menu .dropdown-item.is-danger:hover { background: #3D1A1F; }
html[data-theme="dark"] .net-pill.online { background: #123A2F; color: #4CC79F; }

/* bootstrap surfaces used on the older pages */
html[data-theme="dark"] .card { --bs-card-bg: #15232B; --bs-card-border-color: var(--line); --bs-card-cap-bg: #1A2A33; --bs-card-color: var(--ink); }
html[data-theme="dark"] .card-header, html[data-theme="dark"] .card-footer { border-color: var(--line); }
html[data-theme="dark"] .table { --bs-table-bg: transparent; --bs-table-color: var(--ink); --bs-table-border-color: var(--line);
  --bs-table-striped-bg: #1A2A33; --bs-table-hover-bg: #1A2A33; --bs-table-hover-color: var(--ink); }
html[data-theme="dark"] .table thead th { background: #1A2A33; color: var(--muted); border-color: var(--line); }
html[data-theme="dark"] .table-hover tbody tr:hover { --bs-table-hover-bg: #1A2A33; }
html[data-theme="dark"] .form-control, html[data-theme="dark"] .form-select { background-color: #0F1C22; color: var(--ink); border-color: #2E434D; }
html[data-theme="dark"] .form-control:focus, html[data-theme="dark"] .form-select:focus { background-color: #12212A; color: var(--ink); border-color: var(--brand); }
html[data-theme="dark"] .form-control::placeholder { color: #6E8592; }
html[data-theme="dark"] .form-control[readonly], html[data-theme="dark"] .form-control:disabled { background: #1A2A33; }
html[data-theme="dark"] .form-select { --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%238DA2AE' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); }
html[data-theme="dark"] .form-check-input { background-color: #0F1C22; border-color: #3E5662; }
html[data-theme="dark"] .form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }
html[data-theme="dark"] .input-group-text { background: #1A2A33; color: var(--muted); border-color: #2E434D; }
html[data-theme="dark"] .btn-light { --bs-btn-bg: #1A2A33; --bs-btn-color: var(--ink); --bs-btn-border-color: var(--line); --bs-btn-hover-bg: #22343E;
  --bs-btn-hover-color: #fff; --bs-btn-hover-border-color: #3E5662; --bs-btn-active-bg: #22343E; --bs-btn-active-color: #fff; }
html[data-theme="dark"] .btn-outline-primary { --bs-btn-color: #6CCAD2; --bs-btn-border-color: #2C9BA6; --bs-btn-hover-bg: #2C9BA6; --bs-btn-active-bg: #2C9BA6; background: transparent; }
html[data-theme="dark"] .btn-primary { --bs-btn-bg: #1D7F89; --bs-btn-border-color: #1D7F89; --bs-btn-hover-bg: #24939E; --bs-btn-hover-border-color: #24939E; }
html[data-theme="dark"] .modal-content { --bs-modal-bg: #15232B; --bs-modal-color: var(--ink); --bs-modal-border-color: var(--line); --bs-modal-header-border-color: var(--line);
  --bs-modal-footer-border-color: var(--line); }
html[data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
html[data-theme="dark"] .list-group { --bs-list-group-bg: #15232B; --bs-list-group-color: var(--ink); --bs-list-group-border-color: var(--line);
  --bs-list-group-action-hover-bg: #1A2A33; --bs-list-group-action-hover-color: #fff; }
html[data-theme="dark"] .nav-tabs { --bs-nav-tabs-border-color: var(--line); --bs-nav-tabs-link-active-bg: #15232B; --bs-nav-tabs-link-active-color: var(--ink);
  --bs-nav-tabs-link-active-border-color: var(--line) var(--line) #15232B; }
html[data-theme="dark"] .text-muted { color: var(--muted) !important; }
html[data-theme="dark"] .text-dark { color: var(--ink) !important; }
html[data-theme="dark"] .bg-white, html[data-theme="dark"] .bg-light { background-color: #15232B !important; }
html[data-theme="dark"] .border, html[data-theme="dark"] .border-top, html[data-theme="dark"] .border-bottom { border-color: var(--line) !important; }
html[data-theme="dark"] hr { border-color: var(--line); opacity: 1; }
html[data-theme="dark"] .alert-warning { background: #3A2C12; border-color: #5A4520; color: #F2C97A; }
html[data-theme="dark"] .alert-danger { background: #3D1A1F; border-color: #5A2A2E; color: #F5A5A0; }
html[data-theme="dark"] .alert-success { background: #123A2F; border-color: #1F5A48; color: #8EE0C2; }
html[data-theme="dark"] .alert-info { background: #132C3B; border-color: #20465C; color: #A9D6F2; }
html[data-theme="dark"] .progress { background: #24363F; }
html[data-theme="dark"] .kbd, html[data-theme="dark"] kbd { background: #1A2A33; color: var(--ink-2); }

/* app.css components with fixed light colours */
html[data-theme="dark"] .quick-action, html[data-theme="dark"] .room-tile, html[data-theme="dark"] .menu-item,
html[data-theme="dark"] .cat-tabs .nav-link, html[data-theme="dark"] .role-pick { background: #15232B; border-color: var(--line); color: var(--ink); }
html[data-theme="dark"] .cat-tabs .nav-link.active { background: var(--brand); color: #fff; border-color: var(--brand); }
html[data-theme="dark"] .avail td.room { background: #15232B; }
html[data-theme="dark"] .avail .free { background: #123A2F; color: #4CC79F; }
html[data-theme="dark"] .avail .free:hover { background: #18513F; }
html[data-theme="dark"] .timeline .t-ico { background: #1A2A33; }
html[data-theme="dark"] .perm-group-head, html[data-theme="dark"] .matrix .grp td { background: #1A2A33; }
html[data-theme="dark"] .perm-row:hover { background: #1A2A33; }
html[data-theme="dark"] .ico-teal { background: #12343A; color: #5CC6CF; } html[data-theme="dark"] .ico-amber { background: #3A2C12; color: #E8B04B; }
html[data-theme="dark"] .ico-rose { background: #3D1A1F; color: #F07167; } html[data-theme="dark"] .ico-sky { background: #132C3B; color: #6CB8E6; }
html[data-theme="dark"] .ico-violet { background: #2A2342; color: #B9A6F5; } html[data-theme="dark"] .ico-slate { background: #24323A; color: #B3C0C9; }
html[data-theme="dark"] .ico-green { background: #123A2F; color: #4CC79F; }
html[data-theme="dark"] .badge-soft-secondary { background: #24323A; color: #B3C0C9; }
html[data-theme="dark"] .badge-soft-primary { background: #12343A; color: #8FD9DF; }
html[data-theme="dark"] .badge-soft-success { background: #123A2F; color: #4CC79F; }
html[data-theme="dark"] .badge-soft-warning { background: #3A2C12; color: #E8B04B; }
html[data-theme="dark"] .badge-soft-danger { background: #3D1A1F; color: #F07167; }
html[data-theme="dark"] .badge-soft-info { background: #132C3B; color: #6CB8E6; }
html[data-theme="dark"] .badge-soft-dark { background: #24323A; color: #E6EEF2; }
html[data-theme="dark"] .owe { background: #3D1A1F; color: #F5A5A0; border-color: #5A2A2E; }
html[data-theme="dark"] .st-kitchen { background: #3A2412; color: #F0A35E; } html[data-theme="dark"] .st-bar { background: #2A2342; color: #B9A6F5; }
html[data-theme="dark"] .st-receipt { background: #12343A; color: #5CC6CF; } html[data-theme="dark"] .st-other { background: #24323A; color: #B3C0C9; }
html[data-theme="dark"] .bg-brand-soft { background: #12343A !important; }
html[data-theme="dark"] .empty { color: var(--muted); }

/* paper stays paper: receipts and tickets keep a white sheet */
html[data-theme="dark"] .receipt, html[data-theme="dark"] .ticket-paper, html[data-theme="dark"] .print-paper { background: #fff; color: #111; }

/* auth pages */
html[data-theme="dark"] .lg-page, html[data-theme="dark"] .lg-form-side { background: #0E1A20; color: var(--ink); }

@media (prefers-reduced-motion: reduce) { .pm-theme-knob { transition: none; } }
html[data-theme="dark"] .pm-notice { background: #3A2C12; border-color: #5A4520; color: #F2C97A; }
html[data-theme="dark"] .pm-notice:hover { color: #FFE0A3; }
html[data-theme="dark"] .pm-notice > i:first-child { color: #E8B04B; }

/* Phones: keep the top bar on one line – flag only, smaller switch */
@media (max-width: 575.98px) {
  .app-topbar .pm-lang-btn { padding: 0 7px; gap: 0; }
  .app-topbar .pm-lang-btn > span, .app-topbar .pm-lang-caret { display: none; }
  .app-topbar .pm-theme-switch { width: 52px; flex-basis: 52px; padding: 0 6px; }
  html[data-theme="dark"] .app-topbar .pm-theme-knob { transform: translateX(20px); }
  html[dir="rtl"][data-theme="dark"] .app-topbar .pm-theme-knob { transform: translateX(-20px); }
  .app-topbar .ms-auto.gap-2 { gap: 6px !important; }
}
@media (max-width: 380px) { .app-topbar .net-pill { display: none !important; } }