/* app.css — AyurFlow shell: tokens (light + dark), top bar, left sidebar, cards, planner, print. */
:root {
  --primary: #0f5c4a;          /* AyurFlow green */
  --primary-2: #17795f;
  --primary-text: #0f5c4a;
  --accent: #d9822b;           /* saffron */
  --bg: #f3f6f4;
  --surface: #ffffff;
  --surface-2: #f8faf9;
  --border: #dde5e1;
  --text: #1d2a25;
  --text-muted: #5f6f68;
  --ok: #1f7a3d; --okbg: #e7f6ec;
  --warn: #9a5b00; --warnbg: #fff4e0;
  --err: #b42318; --errbg: #fdecec;
  --male: #2f6fb3; --female: #b5487c; --common: #6c757d;
  --shadow: 0 2px 10px rgba(16, 40, 32, .06);
  --sidebar-w: 236px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --primary: #2c8f74; --primary-2: #37a585; --primary-text: #7fd1b6; --accent: #f0a04b;
    --bg: #0f1513; --surface: #17201d; --surface-2: #1c2723; --border: #2a3833; --text: #e4ece8; --text-muted: #9fb2aa;
    --ok: #6fd08f; --okbg: #12301f; --warn: #f3c06b; --warnbg: #3a2c12; --err: #ff8a80; --errbg: #3a1b1b;
    --male: #7fb1e8; --female: #e795bd; --common: #a5adb5; --shadow: 0 2px 10px rgba(0,0,0,.35);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --primary: #2c8f74; --primary-2: #37a585; --primary-text: #7fd1b6; --accent: #f0a04b;
  --bg: #0f1513; --surface: #17201d; --surface-2: #1c2723; --border: #2a3833; --text: #e4ece8; --text-muted: #9fb2aa;
  --ok: #6fd08f; --okbg: #12301f; --warn: #f3c06b; --warnbg: #3a2c12; --err: #ff8a80; --errbg: #3a1b1b;
  --male: #7fb1e8; --female: #e795bd; --common: #a5adb5; --shadow: 0 2px 10px rgba(0,0,0,.35);
  color-scheme: dark;
}

html, body { background: var(--bg); color: var(--text); }
body { font-family: 'Segoe UI', system-ui, -apple-system, Arial, sans-serif; font-size: .92rem; margin: 0; }
a { color: var(--primary-text); }
.text-muted, .muted { color: var(--text-muted) !important; }
.hide { display: none !important; }

/* Bootstrap surfaces follow the theme */
.card, .modal-content, .dropdown-menu, .list-group-item, .form-control, .form-select, .table {
  --bs-body-bg: var(--surface); --bs-body-color: var(--text); --bs-border-color: var(--border);
  background-color: var(--surface); color: var(--text); border-color: var(--border);
}
.table {
  --bs-table-bg: var(--surface); --bs-table-color: var(--text); --bs-table-border-color: var(--border);
  --bs-table-striped-bg: var(--surface-2); --bs-table-striped-color: var(--text);
  --bs-table-hover-bg: color-mix(in srgb, var(--primary) 9%, var(--surface)); --bs-table-hover-color: var(--text);
  --bs-table-active-bg: color-mix(in srgb, var(--primary) 14%, var(--surface)); --bs-table-active-color: var(--text);
}
.table > thead th { color: var(--text-muted); }
/* Bootstrap's own dark mode is switched on by theme-init.js; these keep its greys on AyurFlow's palette. */
[data-bs-theme="dark"] { --bs-body-bg: var(--bg); --bs-body-color: var(--text); --bs-emphasis-color: var(--text);
  --bs-secondary-color: var(--text-muted); --bs-tertiary-bg: var(--surface-2); --bs-secondary-bg: var(--surface-2); --bs-border-color: var(--border); }
.form-control:focus, .form-select:focus { border-color: var(--primary-2); box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--primary) 20%, transparent); }
.btn-primary { --bs-btn-bg: var(--primary); --bs-btn-border-color: var(--primary); --bs-btn-hover-bg: var(--primary-2); --bs-btn-hover-border-color: var(--primary-2); --bs-btn-active-bg: var(--primary-2); }
.btn-outline-primary { --bs-btn-color: var(--primary-text); --bs-btn-border-color: var(--primary); --bs-btn-hover-bg: var(--primary); --bs-btn-hover-border-color: var(--primary); }
.modal-header, .modal-footer { border-color: var(--border); }
.btn-close { filter: var(--btn-close-filter, none); }
:root[data-theme="dark"] .btn-close { filter: invert(1); }

/* ── Shell ───────────────────────────────────────────────────────────── */
.topbar {
  position: fixed; inset: 0 0 auto 0; height: 54px; z-index: 1030; display: flex; align-items: center; gap: 10px;
  padding: 0 14px; background: var(--primary); color: #fff; box-shadow: var(--shadow);
}
.topbar .brand { font-weight: 800; letter-spacing: .02em; font-size: 1.05rem; display: flex; align-items: center; gap: 8px; color: #fff; text-decoration: none; }
.topbar .brand .leaf { color: #ffd59a; }
.topbar .centre { opacity: .85; font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 30vw; }
.topbar .centre-logo { height: 34px; max-width: 120px; object-fit: contain; background: #fff; border-radius: 6px; padding: 2px 4px; }
.topbar .avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; display: block; border: 2px solid rgba(255,255,255,.7); }
.user-photo { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: var(--surface-2); display: inline-flex; align-items: center; justify-content: center; color: var(--text-muted); flex: none; }
.user-photo.lg { width: 88px; height: 88px; font-size: 2.2rem; }
.topbar .spacer { flex: 1; }
.topbar select { max-width: 180px; background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.3); }
.topbar select option { color: var(--text); background: var(--surface); }
.topbar .icon-btn { background: transparent; border: 0; color: #fff; font-size: 1.15rem; padding: 6px 8px; border-radius: 8px; }
.topbar .icon-btn:hover { background: rgba(255,255,255,.12); }
.topbar a.icon-btn { text-decoration: none; display: inline-flex; align-items: center; }
.sidebar {
  position: fixed; top: 54px; bottom: 0; left: 0; width: var(--sidebar-w); overflow: hidden; z-index: 1020;
  background: var(--surface); border-right: 1px solid var(--border); transition: transform .2s ease, width .15s ease;
  display: flex; flex-direction: column;
}
/* Menu search (top), entries (scroll), powered-by + hide button (bottom) */
.side-search { position: relative; margin: 10px 8px 4px; flex: 0 0 auto; }
.side-search > i { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: .85rem; pointer-events: none; }
.side-search input { width: 100%; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); border-radius: 8px; padding: 6px 28px 6px 30px; font-size: .85rem; outline: none; }
.side-search input:focus { border-color: var(--primary); background: var(--surface); }
.side-search input::-webkit-search-cancel-button { display: none; }
.side-search .ms-clear { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: var(--text-muted); padding: 2px 6px; font-size: .75rem; }
.side-menu { flex: 1 1 auto; overflow-y: auto; padding: 0 8px 12px; }
.side-menu .ms-hide { display: none !important; }
.side-menu .ms-none { font-size: .8rem; color: var(--text-muted); padding: 10px; }
.side-foot { flex: 0 0 auto; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 6px; padding: 6px 8px; }
.side-foot .powered { flex: 1; display: flex; align-items: center; gap: 6px; font-size: .68rem; color: var(--text-muted); white-space: nowrap; padding-left: 4px; }
.side-foot .powered img { height: 16px; width: auto; }
[data-bs-theme="dark"] .side-foot .powered img { background: #fff; border-radius: 4px; padding: 1px 3px; }
.side-collapse { border: 1px solid var(--border); background: var(--surface-2); color: var(--text-muted); border-radius: 8px; width: 32px; height: 30px; flex: 0 0 auto; }
.side-collapse:hover { color: var(--text); }
/* Hidden menu (icons only) — desktop; opens over the page while the mouse is on it */
@media (min-width: 992px) {
  body.nav-mini { --sidebar-w: 64px; }
  body.nav-mini .sidebar:not(:hover):not(:focus-within) .lbl,
  body.nav-mini .sidebar:not(:hover):not(:focus-within) .grp,
  body.nav-mini .sidebar:not(:hover):not(:focus-within) .side-search input,
  body.nav-mini .sidebar:not(:hover):not(:focus-within) .side-search .ms-clear,
  body.nav-mini .sidebar:not(:hover):not(:focus-within) .powered { display: none; }
  body.nav-mini .sidebar:not(:hover):not(:focus-within) a { justify-content: center; padding: 9px 0; }
  body.nav-mini .sidebar:not(:hover):not(:focus-within) .side-search { height: 32px; }
  body.nav-mini .sidebar:not(:hover):not(:focus-within) .side-search > i { left: 50%; transform: translate(-50%, -50%); }
  body.nav-mini .sidebar:not(:hover):not(:focus-within) .side-foot { justify-content: center; }
  body.nav-mini .sidebar:not(:hover):not(:focus-within) .side-menu a + .grp,
  body.nav-mini .sidebar:not(:hover):not(:focus-within) .side-menu .grp { display: block; height: 1px; margin: 8px 10px; background: var(--border); font-size: 0; }
  body.nav-mini .sidebar:hover, body.nav-mini .sidebar:focus-within { width: 236px; box-shadow: 8px 0 24px rgba(0,0,0,.18); }
}
.lbl { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar .grp { font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin: 14px 10px 4px; }
.sidebar a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; color: var(--text); text-decoration: none; }
.sidebar a:hover { background: var(--surface-2); }
.sidebar a.active { background: color-mix(in srgb, var(--primary) 14%, transparent); color: var(--primary-text); font-weight: 600; }
.sidebar a i { font-size: 1.05rem; width: 20px; text-align: center; }
.main { margin-left: var(--sidebar-w); padding: 70px 18px 40px; min-height: 100vh; }
.page-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.page-title { font-size: 1.25rem; font-weight: 700; margin: 0; }
.page-head .tools { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.backdrop { display: none; }
.demo-banner { background: var(--warnbg); color: var(--warn); text-align: center; padding: 4px; font-size: .8rem; position: fixed; top: 54px; left: var(--sidebar-w); right: 0; z-index: 1010; }

@media (max-width: 991px) {
  .sidebar { transform: translateX(-100%); box-shadow: var(--shadow); }
  body.nav-open .sidebar { transform: none; }
  body.nav-open .backdrop { display: block; position: fixed; inset: 54px 0 0 0; background: rgba(0,0,0,.3); z-index: 1015; }
  .main { margin-left: 0; padding: 66px 12px 40px; }
  .demo-banner { left: 0; }
  .topbar .centre { display: none; }
}
@media (min-width: 992px) { .menu-btn { display: none; } }

.panel { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); padding: 14px; }
.panel + .panel { margin-top: 14px; }
.panel h3 { font-size: 1rem; font-weight: 700; margin: 0 0 10px; }

/* gender chips */
.g { display: inline-block; font-size: .68rem; font-weight: 700; padding: 1px 6px; border-radius: 6px; border: 1px solid currentColor; }
.g-M { color: var(--male); } .g-F { color: var(--female); } .g-C { color: var(--common); }
.ip { color: var(--err); border: 1px solid var(--err); border-radius: 6px; font-size: .66rem; font-weight: 700; padding: 0 5px; margin-left: 4px; }
.status-pill { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: .74rem; font-weight: 600; color: #fff; white-space: nowrap; }

/* issues */
.issue { border-radius: 8px; padding: 7px 10px; margin-bottom: 6px; font-size: .86rem; display: flex; gap: 8px; align-items: flex-start; }
.issue.block { background: var(--errbg); color: var(--err); }
.issue.reason { background: var(--warnbg); color: var(--warn); }
.issue.ok { background: var(--okbg); color: var(--ok); }

/* schedule table */
.sched td, .sched th { vertical-align: middle; }
.sched tr.conflict td { background: var(--errbg) !important; }
.sched tr.freed td { opacity: .55; text-decoration: line-through; }
.sched .time { white-space: nowrap; font-weight: 600; }
.sched .procs { font-size: .84rem; }
.sched-section { font-weight: 700; padding: 8px 2px; color: var(--primary-text); }

/* availability */
.free-chip { display: inline-block; background: var(--okbg); color: var(--ok); border-radius: 6px; padding: 2px 8px; margin: 2px 4px 2px 0; font-size: .82rem; white-space: nowrap; }
.full-chip { background: var(--errbg); color: var(--err); border-radius: 6px; padding: 2px 8px; font-size: .82rem; }
.off-chip { background: var(--surface-2); color: var(--text-muted); border-radius: 6px; padding: 2px 8px; font-size: .82rem; }
.timeline { position: relative; height: 22px; background: var(--okbg); border-radius: 5px; overflow: hidden; }
.timeline span { position: absolute; top: 0; bottom: 0; background: color-mix(in srgb, var(--err) 55%, transparent); }

/* live dashboard tiles */
.tile { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; background: var(--surface); }
.tile.busy { border-left: 5px solid var(--err); }
.tile.free { border-left: 5px solid var(--ok); }
.tile.off { border-left: 5px solid var(--border); opacity: .7; }
.tile .name { font-weight: 700; }
.tile .sub { font-size: .8rem; color: var(--text-muted); }

.toast-container { z-index: 2000; }

/* tour */
.tour-hl { position: relative; z-index: 2101 !important; box-shadow: 0 0 0 4px var(--accent), 0 0 0 9999px rgba(0,0,0,.45) !important; border-radius: 8px; }
.tour-pop { position: fixed; z-index: 2102; max-width: 320px; background: var(--surface); color: var(--text); border-radius: 12px; padding: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.3); border: 1px solid var(--border); }
.tour-pop h4 { font-size: 1rem; margin: 0 0 6px; }
.tour-pop p { margin: 0 0 10px; font-size: .88rem; }

/* print */
.print-only { display: none; }
@media print {
  @page { size: A4 landscape; margin: 10mm; }
  .topbar, .sidebar, .no-print, .demo-banner, .btn, .backdrop, .toast-container { display: none !important; }
  .main { margin: 0; padding: 0; }
  .print-only { display: block; }
  body, .panel { background: #fff !important; color: #000 !important; box-shadow: none !important; border: 0 !important; }
  .table { font-size: 10pt; }
  .table td, .table th { border: 1px solid #999 !important; color: #000 !important; background: #fff !important; }
  .status-pill { color: #000 !important; background: none !important; border: 1px solid #999; }
  .page-break { page-break-before: always; }
}

/* Sub-master links in dialogs ("Add / edit procedures") and the Back bar on the page they open (layout.js) */
.sub-link { font-size: .78rem; font-weight: 600; margin-left: 6px; text-decoration: none; white-space: nowrap; color: var(--primary-text, var(--primary)); }
.sub-link:hover { text-decoration: underline; }
.sub-link i { font-size: .72rem; }
.back-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; padding: 8px 10px; border-radius: 10px;
  background: color-mix(in srgb, var(--primary) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--border)); }