/* Seed Savers Network — base styles (no frameworks, mobile-friendly) */
* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg:#f5f1e5; --panel:#fffdf6; --ink:#203016; --muted:#6f765f;
  --brand:#1d3a10; --brand-dark:#102407; --brand-soft:#eef4df; --line:#ded6c5;
  --ok:#2f6b2f; --warn:#a66512; --bad:#9f332b; --harvest:#c58a1a; --seed-red:#7d2f2a;
}
body { font-family: "Segoe UI", Roboto, system-ui, sans-serif; background:var(--bg); color:var(--ink); }
a { color:var(--brand); text-decoration:none; }

/* Layout */
.layout { display:flex; min-height:100vh; }
.sidebar { width:248px; background:#fff; color:#5b6472; flex-shrink:0; position:sticky; top:0; height:100vh;
           overflow-y:auto; border-right:1px solid var(--line); }
.sidebar .brand a { display:flex; align-items:center; gap:11px; padding:18px 18px; border-bottom:1px solid var(--line); }
.brand-logo { width:46px; height:46px; border-radius:50%; background:transparent; color:var(--brand); display:flex; align-items:center;
              justify-content:center; font-size:1.25rem; flex-shrink:0; overflow:hidden; }
.brand-logo img { width:100%; height:100%; display:block; object-fit:contain; }
.brand-text { display:flex; flex-direction:column; font-size:1.2rem; font-weight:800; color:var(--brand); line-height:1.1; }
.brand-text small { font-size:.68rem; font-weight:500; color:var(--muted); letter-spacing:.02em; }
.sidebar nav { padding:10px 12px 24px; }
.navlink { display:flex; align-items:center; gap:13px; padding:11px 14px; color:#5b6472; font-size:.93rem;
           font-weight:500; border-radius:11px; margin-bottom:3px; transition:background .15s ease, color .15s ease; }
.navlink .ni { width:22px; text-align:center; font-size:1.05rem; flex-shrink:0; }
.navlink:hover { background:#eef1f5; color:var(--ink); }
.navlink.on { background:var(--brand); color:#fff; font-weight:600; box-shadow:0 6px 14px rgba(29,58,16,.28); }
.nav-group { display:flex; align-items:center; justify-content:space-between; width:100%;
             padding:14px 14px 7px; font-size:.68rem; text-transform:uppercase; letter-spacing:.08em;
             color:#9aa1ab; font-weight:700; background:none; border:none; cursor:pointer; text-align:left; }
.nav-group:hover { color:var(--brand); }
.ng-caret { font-size:.6rem; opacity:.6; transition:transform .2s ease; }
.nav-sec.open > .nav-group .ng-caret { transform:rotate(180deg); }
.nav-sub { overflow:hidden; max-height:0; transition:max-height .25s ease; }
.nav-sec.open > .nav-sub { max-height:520px; }

.main { flex:1; display:flex; flex-direction:column; min-width:0; }
.topbar { display:flex; align-items:center; gap:16px; background:var(--panel); padding:12px 24px;
          border-bottom:1px solid var(--line); position:sticky; top:0; z-index:5; }
.topbar h1 { font-size:1.4rem; font-weight:800; }
.topbar-search { flex:1; max-width:420px; display:flex; align-items:center; gap:8px; background:#f7f3e9;
                 border:1px solid var(--line); border-radius:24px; padding:7px 16px; }
.topbar-search .ts-ic { color:var(--muted); font-size:.9rem; }
.topbar-search input { flex:1; width:100%; min-width:0; border:none; background:none; padding:0; font-size:.9rem; }
.topbar-search input:focus { outline:none; }
.topbar-actions { display:flex; align-items:center; gap:18px; margin-left:auto; }
.tb-ic { position:relative; font-size:1.25rem; color:var(--ink); line-height:1; }
.tb-badge { position:absolute; top:-8px; right:-9px; background:var(--seed-red); color:#fff; font-size:.62rem;
            font-weight:700; min-width:17px; height:17px; line-height:17px; text-align:center; border-radius:9px; padding:0 4px; }
.tb-user { display:flex; align-items:center; gap:10px; padding-left:18px; border-left:1px solid var(--line); }
.tb-avatar { width:40px; height:40px; border-radius:50%; background:var(--brand); color:#fff; display:flex;
             align-items:center; justify-content:center; font-weight:700; flex-shrink:0; }
.tb-user-meta { display:flex; flex-direction:column; line-height:1.15; }
.tb-user-meta strong { font-size:.88rem; }
.tb-user-meta small { font-size:.74rem; color:var(--muted); text-transform:capitalize; }
.tb-logout { font-size:1.2rem; color:var(--muted); margin-left:4px; }
.tb-logout:hover { color:var(--bad); }
.menu-toggle { display:none; font-size:1.3rem; background:none; border:none; cursor:pointer; }
.content { padding:22px; flex:1; }
.appfoot { padding:14px 20px; color:var(--muted); border-top:1px solid var(--line); }

/* Cards / grid */
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:16px; margin-bottom:22px; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:18px; }
.card .num { font-size:1.8rem; font-weight:700; }
.card .lbl { color:var(--muted); font-size:.85rem; margin-top:4px; }

.panel { background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:20px; margin-bottom:20px; }
.panel-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.panel-head h2 { font-size:1.05rem; }

/* Tables */
table { width:100%; border-collapse:collapse; font-size:.9rem; }
th, td { text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); }
th { background:#f8f2e3; color:var(--muted); font-weight:600; font-size:.8rem; text-transform:uppercase; letter-spacing:.03em; }
tr:hover td { background:#fbf7ed; }

/* Forms */
.form-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; }
label { display:block; font-size:.83rem; color:var(--muted); margin-bottom:5px; }
input, select, textarea {
  width:100%; padding:9px 11px; border:1px solid var(--line); border-radius:7px;
  font-size:.92rem; background:var(--panel); font-family:inherit;
}
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--brand); }
.form-actions { margin-top:16px; display:flex; gap:10px; }

/* Buttons */
.btn { display:inline-block; background:var(--brand); color:#fff; padding:9px 16px; border:none; border-radius:7px; font-size:.9rem; cursor:pointer; }
.btn:hover { background:var(--brand-dark); }
.btn-sm { padding:5px 11px; font-size:.82rem; }
.btn-light { background:#efe8d8; color:var(--ink); }
.btn.btn-light { background:var(--brand); color:#fff; }
.btn.btn-light:hover { background:var(--brand-dark); color:#fff; }
.btn-danger { background:var(--bad); }
.btn-ok { background:var(--ok); }

/* Badges */
.badge { display:inline-block; padding:3px 9px; border-radius:20px; font-size:.75rem; font-weight:600; }
.badge-available, .badge-paid, .badge-confirmed, .badge-present, .badge-done { background:#e5f2d6; color:var(--ok); }
.badge-occupied, .badge-partial, .badge-pending, .badge-in_progress { background:#fbedc8; color:var(--warn); }
.badge-maintenance, .badge-unpaid, .badge-cancelled, .badge-absent { background:#fee2e2; color:var(--bad); }
.badge-checked_in, .badge-reserved, .badge-inspected, .badge-assigned { background:var(--brand-soft); color:var(--brand); }
.badge-checked_out, .badge-out_of_service, .badge-closed, .badge-low, .badge-no_show { background:#e8e1d2; color:var(--muted); }
.badge-cleaning { background:#f3e6cd; color:var(--harvest); }
/* Housekeeping / maintenance statuses & priorities */
.badge-dirty, .badge-open, .badge-medium { background:#fef3c7; color:var(--warn); }
.badge-clean, .badge-resolved { background:#dcfce7; color:var(--ok); }
.badge-maintenance_required, .badge-high { background:#fee2e2; color:var(--bad); }

/* Flash */
.flash { padding:12px 16px; border-radius:8px; margin-bottom:18px; font-size:.9rem; }
.flash-success { background:#e5f2d6; color:var(--ok); }
.flash-error { background:#fee2e2; color:var(--bad); }
.flash-info { background:var(--brand-soft); color:var(--brand-dark); }

.toolbar { display:flex; gap:10px; margin-bottom:16px; flex-wrap:wrap; }
.muted { color:var(--muted); }
.right { text-align:right; }

/* Responsive */
@media (max-width: 820px) {
  .sidebar { position:fixed; left:-260px; z-index:20; transition:left .2s; box-shadow:2px 0 12px rgba(0,0,0,.12); }
  body.sidebar-open .sidebar { left:0; }
  .menu-toggle { display:block; }
  table { font-size:.82rem; }
  th, td { padding:8px; }
}

/* Login (split layout) */
.auth-split { display:flex; min-height:100vh; }
.auth-panel { flex:0 0 44%; max-width:520px; display:flex; flex-direction:column;
              padding:48px 56px; background:#fff; }
.auth-brand { display:flex; align-items:center; gap:12px; }
.auth-logo { width:46px; height:46px; border-radius:12px; background:#fdeaea; display:flex;
             align-items:center; justify-content:center; font-size:1.5rem; flex-shrink:0; }
.auth-logo img { width:32px; height:32px; object-fit:contain; }
.auth-brand-text { display:flex; flex-direction:column; line-height:1.15; }
.auth-brand-text strong { font-size:1.15rem; font-weight:800; color:var(--ink); }
.auth-brand-text small { font-size:.78rem; color:var(--muted); }
.auth-form { margin:auto 0; }
.auth-form h1 { font-size:2rem; font-weight:800; margin-bottom:4px; }
.auth-sub { color:var(--muted); font-size:.92rem; margin-bottom:24px; }
.auth-field { display:flex; align-items:center; gap:10px; border:1px solid var(--line);
              border-radius:10px; padding:0 14px; margin-bottom:14px; background:#fff;
              transition:border-color .15s, box-shadow .15s; }
.auth-field:focus-within { border-color:var(--brand); box-shadow:0 0 0 3px rgba(31,111,235,.12); }
.auth-field .auth-ic { font-size:1rem; opacity:.65; flex-shrink:0; }
.auth-field input { flex:1; border:none; outline:none; padding:14px 0; font-size:.95rem; background:none; }
.auth-eye { border:none; background:none; cursor:pointer; font-size:1rem; opacity:.5; padding:4px; }
.auth-eye.on { opacity:1; }
.auth-submit { width:100%; padding:14px; font-size:1rem; font-weight:700; margin-top:6px; }
.auth-hint { color:var(--muted); font-size:.82rem; margin-top:16px; text-align:center; }
.auth-foot { color:var(--muted); font-size:.78rem; }
.auth-hero { flex:1; background:linear-gradient(135deg,#1f6feb 0%,#0d2a57 100%);
             background-size:cover; background-position:center; position:relative; }
.auth-hero-overlay { position:absolute; inset:0; display:flex; flex-direction:column;
                     align-items:center; justify-content:center; text-align:center; color:#fff;
                     background:rgba(13,26,48,.42); padding:24px; }
.auth-hero-logo { font-size:3.4rem; margin-bottom:12px; }
.auth-hero-logo img { width:72px; height:72px; object-fit:contain; }
.auth-hero-overlay h2 { font-size:1.8rem; font-weight:800; text-shadow:0 2px 12px rgba(0,0,0,.35); }
.auth-hero-overlay p { font-size:1rem; opacity:.92; margin-top:4px; text-shadow:0 1px 8px rgba(0,0,0,.35); }
@media (max-width: 820px) {
  .auth-hero { display:none; }
  .auth-panel { flex:1; max-width:none; padding:40px 28px; }
}

/* Public booking brand */
.pub-brand { display:flex; align-items:center; gap:12px; }
.pub-brand img { width:54px; height:54px; object-fit:contain; flex-shrink:0; }

/* Global search results */
.gs-group .gs-item { display:flex; align-items:center; gap:12px; padding:11px 14px; border:1px solid var(--line);
                     border-radius:10px; margin-bottom:8px; text-decoration:none; color:var(--ink); background:var(--panel);
                     transition:border-color .12s, box-shadow .12s, transform .12s; }
.gs-group .gs-item:last-child { margin-bottom:0; }
.gs-group .gs-item:hover { border-color:var(--brand); box-shadow:0 3px 10px rgba(0,0,0,.07); transform:translateX(2px); }
.gs-item .gs-ic { font-size:1.3rem; flex-shrink:0; }
.gs-item .gs-main { flex:1; min-width:0; }
.gs-item .gs-main strong { display:block; }
.gs-item .gs-main small { color:var(--muted); }
.gs-item .gs-tag { font-size:.7rem; font-weight:700; color:var(--brand); background:var(--brand-soft); padding:2px 9px; border-radius:20px; white-space:nowrap; }

/* Phone country-code input (guest form) */
.phone-group { display:flex; gap:8px; }
.phone-cc { flex:0 0 46%; max-width:210px; }
.phone-num { flex:1; min-width:0; }

/* Reservation availability guard */
.res-warn { display:none; padding:10px 12px; border-radius:8px; font-size:.88rem; font-weight:600; }
.res-warn.hard { background:#fdeaea; color:#a3261f; border:1px solid #f3c0bc; }
.res-warn.soft { background:#fff7e6; color:#8a5a00; border:1px solid #f3e2b8; }
.group-rooms label.taken { opacity:.5; text-decoration:line-through; cursor:not-allowed; background:#f0eee9; }

/* Print receipt */
@media print { .sidebar, .topbar, .appfoot, .toolbar, .no-print { display:none !important; } .content { padding:0; } }

/* ---- Global responsiveness: wide tables scroll inside their panel on small screens ---- */
@media (max-width: 820px) {
  .panel { overflow-x: auto; }
  .cards { grid-template-columns: repeat(auto-fit, minmax(140px,1fr)); }
  .topbar h1 { font-size: 1.1rem; }
  .topbar-search { display:none; }            /* free up room on small screens */
  .tb-user-meta { display:none; }             /* keep just the avatar */
  .topbar-actions { gap:14px; }
}

/* =========================================================
   RESTAURANT POS  (Restra-style layout)
   ========================================================= */
/* Post-sale confirmation + change-due banner */
.pos2-done { background:#fff; border:1px solid var(--line); border-radius:12px; padding:16px 18px; margin-bottom:16px; }
.pos2-done-head { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.pos2-done-head span { color:var(--ok); font-size:.95rem; }
.pos2-done-actions { display:flex; gap:8px; }
.pos2-changeban { margin-top:14px; background:var(--ok); color:#fff; border-radius:12px;
                  padding:18px 22px; display:flex; align-items:center; justify-content:space-between;
                  font-size:1.3rem; font-weight:600; letter-spacing:.01em; }
.pos2-changeban span { font-size:2.2rem; font-weight:800; }

.pos2 { display:grid; grid-template-columns: 1fr 340px; gap:18px; align-items:start; }
.pos2-main { min-width:0; }

/* Order controls */
.pos2-controls { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px;
                 background:#fff; border:1px solid var(--line); border-radius:12px; padding:14px; margin-bottom:14px; }
.pos2-controls label { font-size:.78rem; }

/* Category buttons */
.pos2-cats { display:flex; gap:10px; overflow-x:auto; padding-bottom:6px; margin-bottom:12px; }
.pos2-cat { flex:0 0 auto; display:flex; align-items:center; gap:9px; background:#fff; border:1.5px solid var(--line);
            border-radius:12px; padding:10px 14px; cursor:pointer; min-width:120px; }
.pos2-cat .ci { font-size:1.4rem; }
.pos2-cat .cn { font-weight:600; font-size:.85rem; }
.pos2-cat .cc { margin-left:auto; font-size:.72rem; color:var(--muted); background:#eee6d6; padding:1px 7px; border-radius:10px; }
.pos2-cat.on { border-color:var(--brand); background:var(--brand-soft); }
.pos2-cat.on .cn { color:var(--brand); }

.pos2-search { margin-bottom:14px; }

/* Catalog cards */
.pos2-group { margin-bottom:18px; }
.pos2-group h3 { font-size:1rem; margin-bottom:10px; }
.pos2-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(185px,1fr)); gap:16px; }
.pos2-card { background:#fff; border:1px solid var(--line); border-radius:16px; padding:12px; cursor:pointer;
             text-align:left; display:flex; flex-direction:column; gap:9px; box-shadow:0 1px 3px rgba(0,0,0,.05);
             transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.pos2-card:hover { transform:translateY(-4px); box-shadow:0 12px 26px rgba(0,0,0,.14); border-color:var(--brand); }
.pos2-card:active { transform:translateY(-1px) scale(.99); }
.pos2-card .pc-img { width:100%; height:132px; border-radius:13px; overflow:hidden; background:#eee6d6;
                     display:flex; align-items:center; justify-content:center; font-size:3.4rem; }
.pos2-card .pc-img img { width:100%; height:100%; object-fit:cover; display:block;
                         transition:transform .3s ease; }
.pos2-card:hover .pc-img > img { transform:scale(1.06); }
.pos2-card .pc-room { background:var(--brand-soft); }
.pos2-card .pc-name { font-weight:700; font-size:.98rem; line-height:1.28; min-height:2.55em;
                      display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.pos2-card .pc-sub { font-size:.76rem; color:var(--muted); }
.pos2-card .pc-price { margin-top:auto; font-weight:800; color:var(--brand); font-size:1.02rem; }
.pos2-card .pc-price small { color:var(--muted); font-weight:500; font-size:.7rem; }

/* Hover-flip recipe on food cards */
.pos2-card .pc-flip { position:relative; perspective:700px; }
.pos2-card .pc-flip .pc-face { position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
                               border-radius:10px; overflow:hidden; backface-visibility:hidden;
                               transition:transform .55s cubic-bezier(.4,.2,.2,1); }
.pos2-card .pc-flip .pc-front { transform:rotateY(0deg); }
.pos2-card .pc-flip .pc-back  { transform:rotateY(180deg); flex-direction:column; align-items:stretch;
                                gap:3px; padding:8px 9px; text-align:left;
                                background:linear-gradient(150deg,var(--brand) 0%,var(--brand-dark) 100%); color:#fff; }
.pos2-card.has-recipe:hover   .pc-front,
.pos2-card.has-recipe.flipped .pc-front { transform:rotateY(180deg); }
.pos2-card.has-recipe:hover   .pc-back,
.pos2-card.has-recipe.flipped .pc-back  { transform:rotateY(360deg); }
.pos2-card .pc-recipe-h { font-size:.7rem; font-weight:800; letter-spacing:.3px; opacity:.95; flex-shrink:0; padding-right:20px; }
.pos2-card .pc-recipe { font-size:.66rem; line-height:1.3; overflow:auto; }
/* Tap target to flip on touch screens (hover handles mouse) */
.pos2-card .pc-recipe-badge { position:absolute; top:5px; right:5px; z-index:2; cursor:pointer;
                              font-size:.9rem; line-height:1; background:rgba(255,255,255,.9);
                              border-radius:50%; padding:3px 4px; box-shadow:0 1px 4px rgba(0,0,0,.2);
                              transition:opacity .3s; }
.pos2-card.has-recipe:hover .pc-recipe-badge { opacity:0; }
.pos2-card.has-recipe.flipped .pc-recipe-badge { opacity:1; }   /* keep tappable to flip back on touch */

/* Cart */
.pos2-cart { background:#fff; border:1px solid var(--line); border-radius:14px; position:sticky; top:78px;
             display:flex; flex-direction:column; max-height:calc(100vh - 100px); }
.pos2-cart-top { display:flex; gap:10px; padding:14px; border-bottom:1px solid var(--line); }
.pos2-act { flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; padding:10px; border:1px solid var(--line);
            background:#f8f3e8; border-radius:10px; cursor:pointer; font-size:.78rem; color:var(--ink); }
.pos2-act span { font-size:1.2rem; }
.pos2-cart-info { display:flex; justify-content:space-between; padding:12px 16px; border-bottom:1px solid var(--line); }
.pos2-cart-info small { display:block; font-size:.7rem; color:var(--muted); text-transform:uppercase; }
.pos2-cart-info strong { font-size:.92rem; }

.pos2-lines { flex:1; overflow-y:auto; padding:4px 0; min-height:90px; }
.pos2-empty { padding:34px 16px; text-align:center; color:var(--muted); }
.pos2-line { display:flex; align-items:center; gap:10px; padding:10px 14px; border-bottom:1px solid #eee6d6; position:relative; }
.pos2-line .pl-img { width:44px; height:44px; border-radius:9px; object-fit:cover; flex-shrink:0; }
.pos2-line .pl-emoji { display:flex; align-items:center; justify-content:center; background:#eee6d6; font-size:1.3rem; }
.pos2-line .pl-info { flex:1; min-width:0; }
.pos2-line .pl-info strong { display:block; font-size:.85rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pos2-line .pl-info small { color:var(--muted); font-size:.76rem; }
.pos2-line .pl-right { text-align:right; }
.pos2-line .pl-amt { font-weight:700; font-size:.82rem; margin-top:3px; }
.pos2-qty { display:inline-flex; align-items:center; gap:6px; }
.pos2-qty button { width:24px; height:24px; border:1px solid var(--line); background:#f8f3e8; border-radius:6px; cursor:pointer; font-size:1rem; line-height:1; }
.pos2-qty span { min-width:18px; text-align:center; font-weight:600; font-size:.85rem; }
.pos2-line .pl-rm { position:absolute; top:6px; right:8px; color:#cbd5e1; border:none; background:none; cursor:pointer; font-size:1rem; }
.pos2-line .pl-rm:hover { color:var(--bad); }

.pos2-totals { padding:12px 16px; border-top:1px solid var(--line); font-size:.9rem; }
.pos2-totals .row { display:flex; justify-content:space-between; padding:3px 0; }
.pos2-totals .net { font-size:1.25rem; font-weight:700; border-top:1px dashed var(--line); margin-top:6px; padding-top:8px; }
.pos2-pay { padding:12px 16px; border-top:1px solid var(--line); }
.pos2-pay-row { display:flex; gap:8px; }
.pos2-pay-row select, .pos2-pay-row input { width:50%; }
.pos2-autoprint { display:flex; align-items:center; gap:7px; font-size:.82rem; color:var(--muted); margin:10px 2px; }
.pos2-autoprint input { width:auto; }
.pos-change { font-weight:700; color:var(--ok); }
.pos2-create { width:100%; padding:13px; font-size:1.02rem; }
.pos2-cancel { width:100%; padding:9px; margin-top:8px; background:none; border:none; color:var(--muted); cursor:pointer; }

@media (max-width: 920px) {
  .pos2 { grid-template-columns:1fr; }
  .pos2-cart { position:static; max-height:none; }
}

/* Table-service floor grid */
.floor-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:14px; }
.floor-tile { border:1px solid var(--line); border-left:5px solid var(--line); border-radius:12px; padding:13px;
              background:var(--panel); display:flex; flex-direction:column; gap:8px; }
.floor-tile.ft-available { border-left-color:var(--ok); }
.floor-tile.ft-occupied  { border-left-color:var(--warn); background:#fff8e6; }
.floor-tile.ft-reserved  { border-left-color:var(--brand); }
.floor-tile.ft-cleaning  { border-left-color:var(--harvest); }
.ft-head { display:flex; align-items:center; justify-content:space-between; }
.ft-head strong { font-size:1.15rem; }
.ft-meta { font-size:.78rem; color:var(--muted); }
.ft-total { font-weight:800; font-size:1.1rem; }
.ft-open-row { display:flex; gap:6px; margin-bottom:7px; }
.ft-open .btn { width:100%; }
:root[data-theme="dark"] .floor-tile.ft-occupied { background:var(--elev); }

/* =========================================================
   STAFF MOBILE APP (phone-first shell)
   ========================================================= */
body.mobile-app { background:var(--bg); max-width:520px; margin:0 auto; min-height:100vh; position:relative; }
.m-top { position:sticky; top:0; z-index:10; background:var(--brand); color:#fff; padding:14px 16px;
         display:flex; align-items:center; justify-content:space-between; }
.m-title { font-size:1.15rem; font-weight:700; }
.m-sub { font-size:.8rem; opacity:.9; }
.m-logout { color:#fff; font-size:1.3rem; text-decoration:none; }
.m-content { padding:16px; padding-bottom:84px; }
.m-h3 { margin:18px 0 10px; font-size:.95rem; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }

.m-cards { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.m-card { background:#fff; border:1px solid var(--line); border-radius:12px; padding:16px; text-align:center; }
.m-num { font-size:1.7rem; font-weight:700; color:var(--brand); }
.m-lbl { font-size:.8rem; color:var(--muted); margin-top:2px; }

.m-item { display:flex; align-items:center; gap:12px; background:#fff; border:1px solid var(--line);
          border-radius:12px; padding:13px 14px; margin-bottom:10px; text-decoration:none; color:var(--ink); }
.m-item-main { flex:1; display:flex; flex-direction:column; gap:2px; min-width:0; }
.m-item-main small { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.m-avatar { width:40px; height:40px; border-radius:50%; background:var(--brand); color:#fff;
            display:flex; align-items:center; justify-content:center; font-weight:700; flex-shrink:0; }
.m-empty { background:#fff; border:1px dashed var(--line); border-radius:12px; padding:30px 16px; text-align:center; color:var(--muted); }

.m-task { background:#fff; border:1px solid var(--line); border-radius:12px; padding:14px; margin-bottom:12px; }
.m-task-head { display:flex; justify-content:space-between; align-items:flex-start; gap:8px; }
.m-task-desc { color:var(--muted); font-size:.88rem; margin:8px 0; }
.m-task-meta { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
.m-task-actions { display:flex; gap:8px; }

.m-tabs { display:flex; gap:8px; margin-bottom:14px; }
.m-tabs a { flex:1; text-align:center; padding:9px; border-radius:10px; background:#fff; border:1px solid var(--line);
            color:var(--muted); font-size:.88rem; text-decoration:none; }
.m-tabs a.on { background:var(--brand); color:#fff; border-color:var(--brand); }

/* Chat */
.m-back { display:inline-block; margin-bottom:8px; }
.m-chat-name { font-weight:700; margin-bottom:10px; }
.m-chat { display:flex; flex-direction:column; gap:8px; margin-bottom:14px; }
.m-bubble { max-width:78%; padding:9px 12px; border-radius:14px; font-size:.9rem; position:relative; }
.m-bubble.mine { align-self:flex-end; background:var(--brand); color:#fff; border-bottom-right-radius:4px; }
.m-bubble.theirs { align-self:flex-start; background:#fff; border:1px solid var(--line); border-bottom-left-radius:4px; }
.m-time { display:block; font-size:.68rem; opacity:.7; margin-top:3px; }
.m-compose { position:fixed; bottom:64px; left:0; right:0; max-width:520px; margin:0 auto; display:flex; gap:8px;
             padding:10px 12px; background:#fff; border-top:1px solid var(--line); }
.m-compose input { flex:1; }

/* Bottom nav */
.m-nav { position:fixed; bottom:0; left:0; right:0; max-width:520px; margin:0 auto; height:64px;
         background:#fff; border-top:1px solid var(--line); display:flex; }
.m-nav a { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
           color:var(--muted); text-decoration:none; font-size:.72rem; }
.m-nav a span { font-size:1.25rem; position:relative; }
.m-nav a.on { color:var(--brand); }
.m-badge { position:absolute; top:-6px; right:-12px; background:var(--bad); color:#fff; font-size:.62rem;
           font-style:normal; min-width:16px; height:16px; line-height:16px; text-align:center; border-radius:9px; padding:0 4px; }

/* =========================================================
   DASHBOARD (Travl-style overview)
   ========================================================= */
.dash { --dgreen:var(--brand); --coral:var(--seed-red); --pink:var(--brand-soft); }

/* Top stat cards */
.dash-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-bottom:20px; }
.dstat { background:#fff; border:1px solid var(--line); border-radius:14px; padding:18px 20px;
         display:flex; align-items:center; gap:16px; }
.dstat-ic { width:54px; height:54px; border-radius:14px; display:flex; align-items:center;
            justify-content:center; font-size:1.5rem; flex-shrink:0; }
.dstat-ic.pink { background:var(--pink); }
.dstat-num { font-size:1.7rem; font-weight:800; line-height:1.1; }
.dstat-lbl { color:var(--muted); font-size:.84rem; margin-top:2px; }

/* Main two-column grid */
.dash-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:20px; align-items:start; }
.dright { display:flex; flex-direction:column; gap:18px; }

.dpanel { background:#fff; border:1px solid var(--line); border-radius:16px; padding:22px; }
.dpanel-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; flex-wrap:wrap; }
.dpanel-head h2 { font-size:1.15rem; font-weight:700; }

/* Calendar */
.dcal-month { font-weight:600; color:var(--ink); }
.dcal { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; text-align:center; }
.dcal-wd { font-size:.7rem; font-weight:700; color:var(--muted); text-transform:uppercase; padding:6px 0; letter-spacing:.04em; }
.dcal-day { position:relative; aspect-ratio:1; display:flex; align-items:center; justify-content:center;
            font-size:.9rem; border-radius:12px; color:var(--ink); }
.dcal-day.muted { color:transparent; }
.dcal-day.today { background:var(--coral); color:#fff; font-weight:700; }
.dcal-dot { position:absolute; bottom:7px; left:50%; transform:translateX(-50%);
            width:6px; height:6px; border-radius:50%; background:var(--coral); }
.dcal-dot.light { background:#fff; }

/* Recent bookings list */
.dbookings { margin-top:18px; border-top:1px solid var(--line); padding-top:6px; }
.dbook { display:flex; align-items:center; gap:14px; padding:12px 0; border-bottom:1px solid #eee6d6; color:var(--ink); }
.dbook:last-child { border-bottom:none; }
.dbook-thumb { width:60px; height:48px; border-radius:10px; background:#eee6d6; display:flex;
               align-items:center; justify-content:center; font-size:1.5rem; flex-shrink:0; }
.dbook-main { flex:1; min-width:0; }
.dbook-main strong { display:block; font-size:.95rem; }
.dbook-main small { color:var(--muted); display:flex; align-items:center; gap:6px; font-size:.8rem; }
.dbook-guest { width:20px; height:20px; border-radius:50%; background:var(--dgreen); color:#fff;
               display:inline-flex; align-items:center; justify-content:center; font-size:.65rem; font-weight:700; }
.dbook-tag { flex-shrink:0; min-width:48px; text-align:center; padding:9px 12px; border-radius:10px;
             font-weight:700; font-size:.85rem; color:#fff; background:var(--dgreen); }
.dbook-tag.tag-pending, .dbook-tag.tag-cancelled { background:var(--coral); }
.dbook-tag.tag-checked_out { background:#9a8f73; }

/* Reservation stats */
.dtabs { display:flex; gap:18px; }
.dtab { background:none; border:none; cursor:pointer; font-size:.9rem; color:var(--muted);
        padding:4px 0; border-bottom:2px solid transparent; font-family:inherit; }
.dtab.on { color:var(--dgreen); border-bottom-color:var(--dgreen); font-weight:700; }
.dlegend { display:flex; gap:24px; margin-bottom:14px; font-size:.85rem; color:var(--muted); }
.dleg { display:flex; align-items:center; gap:7px; }
.dleg strong { color:var(--ink); }
.dleg .sw { width:11px; height:11px; border-radius:3px; display:inline-block; }
.dleg .sw.in { background:var(--dgreen); }
.dleg .sw.out { background:var(--coral); }

.dchart { display:flex; align-items:flex-end; gap:10px; height:200px;
          border-bottom:1px solid var(--line); padding-bottom:0; }
.dchart-col { flex:1; display:flex; flex-direction:column; align-items:center; height:100%; }
.dchart-bars { flex:1; display:flex; align-items:flex-end; justify-content:center; gap:5px; width:100%; }
.dchart-bar { width:11px; border-radius:6px; min-height:3px; transition:height .3s; }
.dchart-bar.in  { background:var(--dgreen); }
.dchart-bar.out { background:var(--coral); }
.dchart-lab { font-size:.74rem; color:var(--muted); margin-top:8px; }

/* Availability cards */
.davail { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.davail-card { background:var(--dgreen); color:#fff; border-radius:16px; padding:20px; }
.davail-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.davail-top span { font-size:.9rem; opacity:.9; }
.davail-top strong { font-size:1.6rem; font-weight:800; }
.dbar { height:8px; background:rgba(255,255,255,.2); border-radius:6px; overflow:hidden; }
.dbar i { display:block; height:100%; background:#fff; border-radius:6px; }

/* Bottom strip */
.dbottom { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.dbstat { background:#fff; border:1px solid var(--line); border-radius:14px; padding:20px; text-align:center; }
.dbstat-num { font-size:1.6rem; font-weight:800; }

@media (max-width: 980px) {
  .dash-stats, .dbottom { grid-template-columns:repeat(2,1fr); }
  .dash-grid { grid-template-columns:1fr; }
}
@media (max-width: 560px) {
  .dash-stats, .dbottom, .davail { grid-template-columns:1fr; }
}

/* =========================================================
   GUEST LIST / PORTAL
   ========================================================= */
.gp { --teal:var(--brand); --coral:var(--seed-red); }

/* Filter bar */
.gp-bar { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:18px; }
.gp-tabs { display:flex; gap:26px; }
.gp-tab { color:var(--muted); font-size:.93rem; padding:6px 0; border-bottom:2px solid transparent; }
.gp-tab:hover { color:var(--ink); }
.gp-tab.on { color:var(--teal); font-weight:700; border-bottom-color:var(--teal); }
.gp-bar-right { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.gp-find input { width:200px; padding:8px 14px; border-radius:22px; border:1px solid var(--line); background:#f7f3e9; font-size:.88rem; }
.gp-find input:focus { outline:none; border-color:var(--teal); background:#fff; }
.gp-date { background:var(--teal); color:#fff; padding:9px 18px; border-radius:9px; font-size:.88rem; font-weight:600; }
.gp-sort { border:1px solid var(--line); color:var(--ink); padding:9px 16px; border-radius:9px; font-size:.88rem; }
.gp-sort:hover { border-color:var(--teal); }

/* Table */
.gp-panel { background:#fff; border:1px solid var(--line); border-radius:16px; padding:6px 18px 14px; overflow-x:auto; }
.gp-table { width:100%; border-collapse:collapse; }
.gp-table thead th { text-align:left; padding:18px 14px; font-size:.85rem; font-weight:700; color:var(--ink);
                     text-transform:none; letter-spacing:0; background:none; border-bottom:2px solid var(--line); white-space:nowrap; }
.gp-table tbody td { padding:16px 14px; border-bottom:1px solid #eee6d6; font-size:.9rem; vertical-align:middle; }
.gp-table tbody tr:last-child td { border-bottom:none; }
.gp-table tbody tr:hover td { background:#fbf7ed; }
.gp-check { width:36px; }
.gp-check input { width:16px; height:16px; cursor:pointer; }
.gp-muted { color:var(--muted); }
.gp-sub { display:block; color:var(--muted); font-size:.8rem; margin-top:2px; }

/* Guest cell */
.gp-guest { display:flex; align-items:center; gap:12px; color:var(--ink); }
.gp-guest:hover .gp-guest-meta strong { color:var(--teal); }
.gp-avatar { width:42px; height:42px; border-radius:50%; color:#fff; font-weight:700; flex-shrink:0;
             display:flex; align-items:center; justify-content:center; font-size:1rem; }
.gp-guest-meta { display:flex; flex-direction:column; line-height:1.25; }
.gp-guest-meta strong { font-size:.93rem; }
.gp-guest-meta small { color:var(--coral); font-size:.78rem; }

/* VIP / repeat-guest tags */
.g-vip { display:inline-block; font-size:.66rem; font-weight:700; color:#92600a; background:#fef3c7;
         border:1px solid #f5d98b; border-radius:20px; padding:1px 8px; margin-left:6px; vertical-align:middle; }
.g-repeat { display:inline-block; font-size:.66rem; font-weight:600; color:var(--brand); background:var(--brand-soft);
            border-radius:20px; padding:1px 8px; margin-left:5px; vertical-align:middle; }

/* Notes button */
.gp-notes { background:#edf3df; color:#687058; border:none; border-radius:8px; padding:9px 16px;
            font-size:.85rem; cursor:pointer; font-family:inherit; }
.gp-notes:hover { background:#e1ead0; }

/* Status pills */
.gp-pill { display:inline-block; min-width:92px; text-align:center; padding:8px 14px; border-radius:9px;
           font-size:.83rem; font-weight:600; }
.pill-pending  { background:#f5a623; color:#fff; }
.pill-booked   { background:var(--ok); color:#fff; }
.pill-canceled { background:#e2453a; color:#fff; }
.pill-out      { background:#eee6d6; color:var(--muted); }
.pill-none     { background:#f6e5d6; color:var(--coral); }

/* Row actions menu (no-JS details dropdown) */
.gp-menu { position:relative; }
.gp-menu summary { list-style:none; cursor:pointer; color:var(--muted); font-size:1.3rem; line-height:1;
                   padding:4px 8px; border-radius:7px; text-align:center; }
.gp-menu summary::-webkit-details-marker { display:none; }
.gp-menu summary:hover { background:#f0eadb; color:var(--ink); }
.gp-menu-pop { position:absolute; right:0; top:32px; z-index:10; background:#fff; border:1px solid var(--line);
               border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.12); min-width:150px; padding:6px; }
.gp-menu-pop a { display:block; padding:9px 12px; border-radius:7px; color:var(--ink); font-size:.88rem; }
.gp-menu-pop a:hover { background:#f7f3e9; }
.gp-menu-pop a.danger { color:var(--bad); }

@media (max-width: 720px) {
  .gp-find input { width:150px; }
  .gp-tabs { gap:16px; font-size:.85rem; }
}

/* =========================================================
   GUEST DETAILS
   ========================================================= */
.gd { --teal:var(--brand); display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:stretch; }

.gd-card { background:#fff; border:1px solid var(--line); border-radius:18px; padding:26px; }
.gd-head { display:flex; gap:20px; align-items:flex-start; }
.gd-photo { width:120px; height:120px; border-radius:14px; flex-shrink:0; color:#fff; font-weight:700;
            font-size:2.6rem; display:flex; align-items:center; justify-content:center; }
.gd-id { flex:1; min-width:0; }
.gd-id h2 { font-size:1.7rem; font-weight:800; line-height:1.1; }
.gd-id p { color:var(--muted); font-size:.86rem; margin-top:4px; }
.gd-actions { display:flex; gap:12px; margin-top:16px; }
.gd-call { width:46px; height:46px; border:1.5px solid var(--teal); border-radius:11px; display:flex;
           align-items:center; justify-content:center; font-size:1.2rem; color:var(--teal); }
.gd-call:hover { background:var(--brand-soft); }
.gd-msg { display:inline-flex; align-items:center; gap:9px; background:var(--teal); color:#fff; border:none;
          border-radius:11px; padding:0 22px; height:46px; font-size:.95rem; font-weight:600; cursor:pointer; font-family:inherit; }
.gd-msg:hover { background:var(--brand-dark); }
.gd-msg[disabled] { background:#9aa7b8; cursor:not-allowed; }
.gd-msg span { font-size:1.1rem; }

.gd-dates { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:26px; }
.gd-dates small, .gd-room small, .gd-fac-label { display:block; color:var(--muted); font-size:.83rem; margin-bottom:6px; }
.gd-dates strong { font-size:1rem; font-weight:600; }
.gd-hr { border:none; border-top:1px solid var(--line); margin:22px 0; }
.gd-room { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.gd-room strong { font-size:1.3rem; font-weight:800; }
.gd-price span { font-size:.85rem; font-weight:500; color:var(--muted); }
.gd-desc { color:var(--muted); font-size:.92rem; line-height:1.7; margin:20px 0; }
.gd-facilities { display:flex; flex-wrap:wrap; gap:12px; }
.gd-fac { display:inline-flex; align-items:center; gap:9px; background:var(--brand-soft); color:var(--teal);
          border-radius:11px; padding:13px 18px; font-size:.92rem; font-weight:600; }
.gd-fac i { font-style:normal; font-size:1.05rem; }

/* Gallery */
.gd-gallery { position:relative; border-radius:18px; overflow:hidden; min-height:520px; }
.gd-slide { position:absolute; inset:0; opacity:0; transition:opacity .35s; display:flex; align-items:flex-end; }
.gd-slide.on { opacity:1; }
.gd-slide-cap { width:100%; padding:30px; color:#fff;
                background:linear-gradient(to top, rgba(0,0,0,.6), transparent); }
.gd-slide-cap h3 { font-size:1.7rem; font-weight:800; margin-bottom:8px; }
.gd-slide-cap p { font-size:.92rem; line-height:1.6; opacity:.92; max-width:560px; }
.gd-nav { position:absolute; bottom:24px; width:46px; height:46px; border:none; border-radius:50%;
          background:rgba(255,255,255,.22); color:#fff; font-size:1.3rem; cursor:pointer; backdrop-filter:blur(3px); }
.gd-nav:hover { background:rgba(255,255,255,.4); }
.gd-nav.prev { left:24px; } .gd-nav.next { right:24px; }

@media (max-width: 900px) {
  .gd { grid-template-columns:1fr; }
  .gd-gallery { min-height:340px; }
}
@media (max-width: 520px) {
  .gd-head { flex-direction:column; }
  .gd-dates, .gd-room { grid-template-columns:1fr; }
}

/* =========================================================
   OCCUPANCY CALENDAR (tape chart: rooms × days)
   ========================================================= */
.cal-legend { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:14px; font-size:.8rem; color:var(--muted); }
.cal-legend span { display:inline-flex; align-items:center; gap:6px; }
.cal-legend-btn { display:inline-flex; align-items:center; gap:6px; font-size:.8rem; font-weight:600; color:var(--ink);
                  background:var(--panel); border:1px solid var(--line); border-radius:20px; padding:4px 11px; cursor:pointer;
                  transition:border-color .12s, box-shadow .12s, transform .12s; }
.cal-legend-btn:hover { border-color:var(--brand); }
.cal-legend-btn.on { border-color:var(--brand); box-shadow:0 0 0 2px var(--brand-soth, var(--brand-soft)); transform:translateY(-1px); }
.cal-legend-clear { font-size:.78rem; font-weight:600; color:#a3261f; background:#fdeaea; border:1px solid #f3c0bc;
                    border-radius:20px; padding:4px 11px; cursor:pointer; }
/* Highlight mode: dim everything, spotlight the chosen status */
.cal-grid.cal-hilite-on .cal-cell { opacity:.28; }
.cal-grid.cal-hilite-on .cal-cell.hilite { opacity:1; box-shadow:inset 0 0 0 2px #1d3a10; }
.cal-sw { width:14px; height:14px; border-radius:4px; display:inline-block; border:1px solid var(--line); }
.cal-sw.available    { background:#b7e08a; }
.cal-sw.reserved     { background:#f2b53d; }
.cal-sw.occupied     { background:#ef8638; }
.cal-sw.pending      { background:#ffce2e; }
.cal-sw.checked_out  { background:#b9ad95; }
.cal-sw.outserv      { background:#79858b; }
.cal-sw.maintenance  { background:repeating-linear-gradient(45deg,#ef4444,#ef4444 4px,#fecaca 4px,#fecaca 8px); }

/* Occupancy calendar pagination */
.cal-pager { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; align-items:center; margin-top:14px; }
.cal-pager .btn.disabled { opacity:.45; pointer-events:none; }

/* ===== Month Overview (day-cells + occupancy heat) ===== */
.mo-legend { display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin:4px 0 14px; font-size:.8rem; color:var(--muted); }
.mo-legend span { display:inline-flex; align-items:center; gap:6px; }
.mo-sw { width:14px; height:14px; border-radius:4px; display:inline-block; border:1px solid rgba(0,0,0,.12); }
.mo-sw.o0, .mo-occfill.o0 { background:#b7e08a; }
.mo-sw.o1, .mo-occfill.o1 { background:#dbe267; }
.mo-sw.o2, .mo-occfill.o2 { background:#ffce2e; }
.mo-sw.o3, .mo-occfill.o3 { background:#ef8638; }
.mo-sw.o4, .mo-occfill.o4 { background:#e0584a; }

.mo-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:8px; }
.mo-dow { text-align:center; font-size:.72rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.4px; padding-bottom:2px; }
.mo-cell { border:1px solid var(--line); border-radius:12px; min-height:92px; padding:9px; cursor:pointer;
           display:flex; flex-direction:column; align-items:flex-start; gap:2px; text-align:left;
           color:#26310f; position:relative; transition:transform .14s, box-shadow .14s, border-color .14s; }
.mo-cell:hover { transform:translateY(-3px); box-shadow:0 10px 22px rgba(0,0,0,.14); border-color:var(--brand); }
.mo-cell.mo-empty { background:transparent; border:none; cursor:default; min-height:0; }
.mo-cell.mo-empty:hover { transform:none; box-shadow:none; }
.mo-cell.o0 { background:#eef7e2; }
.mo-cell.o1 { background:#f6f6d8; }
.mo-cell.o2 { background:#fff2c9; }
.mo-cell.o3 { background:#ffe0c6; }
.mo-cell.o4 { background:#fbd5cf; }
.mo-cell.mo-today { outline:2px solid var(--brand); outline-offset:1px; }
.mo-num { font-size:1.15rem; font-weight:800; line-height:1; }
.mo-occ { font-size:1.05rem; font-weight:800; color:#1d3a10; }
.mo-mini { font-size:.68rem; color:#5b6347; margin-top:auto; }

/* Glassmorphism day-detail card */
.mo-overlay { position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center;
              padding:20px; background:rgba(20,28,12,.45); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.mo-overlay[hidden] { display:none; }
.mo-card { position:relative; width:min(560px,96vw); max-height:88vh; display:flex; flex-direction:column;
           background:rgba(255,255,255,.78); backdrop-filter:blur(18px) saturate(160%); -webkit-backdrop-filter:blur(18px) saturate(160%);
           border:1px solid rgba(255,255,255,.6); border-radius:20px; box-shadow:0 24px 60px rgba(0,0,0,.32);
           overflow:hidden; animation:moPop .22s ease; }
@keyframes moPop { from { opacity:0; transform:translateY(14px) scale(.97); } to { opacity:1; transform:none; } }
.mo-card-head { padding:20px 22px 14px; border-bottom:1px solid rgba(0,0,0,.07); }
.mo-card-head h3 { font-size:1.25rem; font-weight:800; color:#1d2e10; margin:0 38px 0 0; }
.mo-occbar { height:8px; border-radius:6px; background:rgba(0,0,0,.08); overflow:hidden; margin:12px 0 8px; }
.mo-occfill { display:block; height:100%; border-radius:6px; transition:width .3s ease; }
.mo-summary { font-size:.85rem; color:#3a4426; margin:0 0 10px; font-weight:600; }
.mo-chips { display:flex; flex-wrap:wrap; gap:6px; }
.mo-chip { display:inline-flex; align-items:center; gap:5px; font-size:.72rem; font-weight:700; color:#33401c;
           background:rgba(255,255,255,.7); border:1px solid rgba(0,0,0,.08); border-radius:20px; padding:3px 10px; }
.mo-chip .cal-sw { width:11px; height:11px; }
.mo-card-body { overflow:auto; padding:6px 22px 14px; }
.mo-table { width:100%; border-collapse:collapse; font-size:.84rem; }
.mo-table th { position:sticky; top:0; background:rgba(255,255,255,.9); backdrop-filter:blur(4px);
               text-align:left; font-size:.68rem; text-transform:uppercase; letter-spacing:.3px; color:var(--muted); padding:7px 8px; }
.mo-table td { padding:7px 8px; border-top:1px solid rgba(0,0,0,.06); vertical-align:top; }
.mo-stat { display:inline-flex; align-items:center; gap:6px; font-weight:600; white-space:nowrap; }
.mo-card-foot { display:flex; gap:8px; justify-content:flex-end; padding:12px 22px; border-top:1px solid rgba(0,0,0,.07); }
.mo-close, .mo-nav { position:absolute; top:14px; border:none; cursor:pointer; border-radius:50%;
                     background:rgba(255,255,255,.65); color:#26310f; font-weight:700; }
.mo-close { right:14px; width:30px; height:30px; font-size:1rem; }
.mo-nav { top:50%; transform:translateY(-50%); width:38px; height:38px; font-size:1.5rem; line-height:1;
          box-shadow:0 3px 10px rgba(0,0,0,.18); }
.mo-prev { left:-10px; }
.mo-next { right:-10px; }
.mo-close:hover, .mo-nav:hover { background:#fff; }

@media (max-width:680px) {
  .mo-cell { min-height:74px; padding:7px; border-radius:10px; }
  .mo-num { font-size:1rem; } .mo-occ { font-size:.92rem; } .mo-mini { font-size:.6rem; }
  .mo-nav { width:32px; height:32px; }
  .mo-prev { left:4px; } .mo-next { right:4px; }
}
@media print {
  .mo-overlay { position:static; background:none; backdrop-filter:none; padding:0; display:block; }
  .mo-overlay[hidden] { display:none; }
  .mo-card { width:100%; max-height:none; box-shadow:none; border:none; background:#fff; backdrop-filter:none; }
  .mo-nav, .mo-close { display:none; }
  body > .layout .sidebar, body > .layout .topbar, body > .layout .appfoot { display:none !important; }
}

/* Room summary table under the calendar */
.cal-summary { width:100%; border-collapse:collapse; font-size:.86rem; }
.cal-summary th, .cal-summary td { padding:9px 12px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
.cal-summary thead th { font-size:.72rem; text-transform:uppercase; letter-spacing:.4px; color:var(--muted); }
.cal-summary tbody tr:hover { background:var(--brand-soft); }
.cal-stat { display:inline-flex; align-items:center; gap:7px; font-weight:600; white-space:nowrap; }

/* Branded print header (shown only on print / PDF) */
.print-only { display:none; }
.print-head { align-items:center; gap:16px; border-bottom:2px solid var(--brand); padding-bottom:12px; margin-bottom:16px; }
.print-head .print-logo { width:60px; height:60px; object-fit:contain; }
.print-head .print-org { flex:1; }
.print-head .print-org h1 { font-size:1.35rem; margin:0; color:var(--brand); }
.print-head .print-org p { margin:3px 0 0; font-size:.8rem; color:var(--muted); }
.print-head .print-meta { text-align:right; font-size:.78rem; display:flex; flex-direction:column; gap:2px; color:var(--muted); }
.print-head .print-meta strong { font-size:.95rem; color:var(--ink); }
@media print {
  .print-only { display:flex; }
  .cal-cell, .cal-sw, .cal-dayh, .cal-roomh, .print-head { -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .cal-grid, .cal-summary { font-size:.7rem; }
}

.cal-grid { border-collapse:separate; border-spacing:0; width:auto; min-width:100%; font-size:.82rem; }
.cal-grid th, .cal-grid td { border:1px solid var(--line); padding:0; }
.cal-grid thead th { background:#f8f2e3; text-transform:none; letter-spacing:0; }
.cal-roomh { position:sticky; left:0; z-index:2; min-width:110px; text-align:left; padding:8px 10px !important; }
.cal-dayh { width:34px; min-width:34px; text-align:center; padding:5px 0 !important; color:var(--ink); line-height:1.1; }
.cal-dayh-click { cursor:pointer; transition:background .12s; }
.cal-dayh-click:hover { background:var(--brand-soft); box-shadow:inset 0 -3px 0 var(--brand); }
.cal-dayh small { display:block; font-size:.62rem; color:var(--muted); font-weight:500; }
.cal-dayh.wknd { background:#eee6d6; }
.cal-dayh.hol  { background:#f6e5d6; color:var(--bad); }
.cal-dayh.today { background:var(--brand); color:#fff; }
.cal-dayh.today small { color:#e6f0d7; }

.cal-room { position:sticky; left:0; z-index:1; background:var(--panel); min-width:120px; max-width:190px;
            padding:3px 10px !important; line-height:1.12; }
.cal-room strong { display:block; font-size:.8rem; line-height:1.15; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cal-room small { display:block; color:var(--muted); font-size:.66rem; line-height:1.1;
                  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.cal-cell { height:30px; width:32px; min-width:32px; text-align:center; font-size:.72rem; font-weight:700; color:#2f351f; cursor:default; }
@media (max-width:820px) {
  .cal-roomh, .cal-room { min-width:96px; max-width:130px; padding:3px 7px !important; }
  .cal-room strong { font-size:.74rem; }
  .cal-room small { font-size:.6rem; }
  .cal-cell { height:28px; width:28px; min-width:28px; }
}
.cal-cell.available    { background:#b7e08a; }
.cal-cell.reserved     { background:#f2b53d; color:#4a3300; }
.cal-cell.occupied     { background:#ef8638; color:#3a1a00; }
.cal-cell.pending      { background:#ffce2e; color:#594400; }
.cal-cell.checked_out  { background:#b9ad95; color:#3a3320; }
.cal-cell.outserv      { background:#79858b; color:#fff; }
.cal-cell.maintenance  { background:repeating-linear-gradient(45deg,#ef4444,#ef4444 6px,#fecaca 6px,#fecaca 12px); color:#5a0a0a; }
:root[data-theme="dark"] .cal-grid thead th,
:root[data-theme="dark"] .cal-dayh.wknd { background:var(--elev); }

/* =========================================================
   NIGHT / DARK MODE  (toggled via data-theme on <html>)
   Most colors come from the variables below; the rules that
   follow only re-skin the surfaces that hardcode light colors.
   ========================================================= */
:root[data-theme="dark"] {
  --bg:#10170c; --panel:#192212; --elev:#24301a; --ink:#eef3e4; --muted:#a8b398;
  --brand:#a8c66c; --brand-dark:#dce9b8; --brand-soft:#263719; --line:#34432a;
  --ok:#8fca68; --warn:#f2bd57; --bad:#ec7d72; --harvest:#d6a33a; --seed-red:#d16d61;
}

/* Theme toggle button (visible pill in the topbar) */
.tb-theme { display:inline-flex; align-items:center; gap:7px; background:var(--panel); color:var(--ink);
            border:1px solid var(--line); border-radius:20px; padding:6px 13px; font-size:.82rem;
            font-weight:600; cursor:pointer; font-family:inherit; line-height:1; }
.tb-theme:hover { border-color:var(--brand); color:var(--brand); }
.tb-theme .tb-theme-ic { font-size:1rem; }
@media (max-width: 820px) { .tb-theme .tb-theme-lbl { display:none; } }

/* White surfaces → panel */
:root[data-theme="dark"] .sidebar,
:root[data-theme="dark"] .pos2-done,
:root[data-theme="dark"] .pos2-controls,
:root[data-theme="dark"] .pos2-cat,
:root[data-theme="dark"] .pos2-card,
:root[data-theme="dark"] .pos2-cart,
:root[data-theme="dark"] .dstat,
:root[data-theme="dark"] .dpanel,
:root[data-theme="dark"] .dbstat,
:root[data-theme="dark"] .gp-panel,
:root[data-theme="dark"] .gp-menu-pop,
:root[data-theme="dark"] .gd-card,
:root[data-theme="dark"] .m-card,
:root[data-theme="dark"] .m-item,
:root[data-theme="dark"] .m-task,
:root[data-theme="dark"] .m-empty,
:root[data-theme="dark"] .m-tabs a,
:root[data-theme="dark"] .m-compose,
:root[data-theme="dark"] .m-nav,
:root[data-theme="dark"] .m-bubble.theirs,
:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea {
  background:var(--panel); color:var(--ink);
}

/* Sidebar nav in dark mode: hover uses the elevated surface and the active
   pill keeps dark text (in dark theme --brand is a light green). */
:root[data-theme="dark"] .navlink:hover { background:var(--elev); }
:root[data-theme="dark"] .navlink.on { background:var(--brand); color:#16210d; box-shadow:none; }

/* Light-grey fills → elevated surface */
:root[data-theme="dark"] th,
:root[data-theme="dark"] tr:hover td,
:root[data-theme="dark"] .gp-table tbody tr:hover td,
:root[data-theme="dark"] .topbar-search,
:root[data-theme="dark"] .gp-find input,
:root[data-theme="dark"] .btn-light,
:root[data-theme="dark"] .pos2-act,
:root[data-theme="dark"] .pos2-cat .cc,
:root[data-theme="dark"] .pos2-card .pc-img,
:root[data-theme="dark"] .pos2-line .pl-emoji,
:root[data-theme="dark"] .pos2-qty button,
:root[data-theme="dark"] .dbook-thumb,
:root[data-theme="dark"] .gp-notes,
:root[data-theme="dark"] .gp-menu summary:hover,
:root[data-theme="dark"] .gp-menu-pop a:hover,
:root[data-theme="dark"] .navlink:hover {
  background:var(--elev); color:var(--ink);
}

/* Text that hardcodes the dark ink colour */
:root[data-theme="dark"] .brand-text,
:root[data-theme="dark"] .gp-table thead th,
:root[data-theme="dark"] .btn-light,
:root[data-theme="dark"] .gp-sort,
:root[data-theme="dark"] .pos2-act { color:var(--ink); }

/* Faint hardcoded list dividers → use the themed line colour */
:root[data-theme="dark"] .pos2-line,
:root[data-theme="dark"] .dbook,
:root[data-theme="dark"] .gp-table tbody td { border-color:var(--line); }

/* Active states tuned for dark */
:root[data-theme="dark"] .navlink.on { background:#263719; color:var(--brand-dark); }
:root[data-theme="dark"] .pos2-cat.on { background:#263719; }
:root[data-theme="dark"] .pos2-card .pc-room,
:root[data-theme="dark"] .pos2-cat.on { border-color:var(--brand); }

/* Mobile app shell */
:root[data-theme="dark"] body.mobile-app { background:var(--bg); }

/* =========================================================
   SEED SAVERS NETWORK BRAND OVERRIDES
   Keep this last so legacy page-level whites/blues cannot wash out the theme.
   ========================================================= */
body {
  background:
    linear-gradient(180deg, rgba(238,244,223,.85), rgba(245,241,229,0) 260px),
    var(--bg);
}

.sidebar {
  background:var(--brand);
  color:#dfe8c8;
  border-right:none;
}
.sidebar .brand a {
  border-bottom:1px solid rgba(255,255,255,.14);
}
.brand-logo {
  background:transparent;
  color:var(--brand);
}
.brand-text,
.brand-text small,
.navlink,
.nav-group {
  color:#e6edcf;
}
.brand-text small,
.nav-group {
  opacity:.76;
}
.navlink:hover {
  background:rgba(255,255,255,.10);
  color:#fffdf6;
}
.navlink.on {
  background:#fffdf6;
  color:var(--brand);
}
.topbar {
  background:#fffdf6;
  box-shadow:0 1px 0 var(--line), 0 10px 28px rgba(29,58,16,.07);
}
.card,
.panel,
.pos2-done,
.pos2-controls,
.pos2-cat,
.pos2-card,
.pos2-cart,
.floor-tile,
.m-card,
.m-item,
.m-task,
.m-empty,
.m-tabs a,
.m-compose,
.m-nav,
.dstat,
.dpanel,
.dbstat,
.gp-panel,
.gp-menu-pop,
.gd-card,
.pub,
.login-card {
  background:var(--panel);
  border-color:var(--line);
}
.dstat-ic.pink,
.tb-theme,
.topbar-search,
.btn-light,
.pos2-act,
.dbook-thumb {
  background:var(--brand-soft);
}
.davail-card,
.m-top,
.m-tabs a.on,
.m-bubble.mine,
.btn,
.gp-date,
.gd-msg {
  background:var(--brand);
}
.btn:hover,
.gd-msg:hover {
  background:var(--brand-dark);
}
.dcal-day.today,
.dbook-tag.tag-pending,
.dbook-tag.tag-cancelled,
.tb-badge,
.m-badge {
  background:var(--seed-red);
}
:root[data-theme="dark"] .sidebar {
  background:#0f1b09;
}
:root[data-theme="dark"] .topbar,
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .panel,
:root[data-theme="dark"] .dstat,
:root[data-theme="dark"] .dpanel,
:root[data-theme="dark"] .dbstat,
:root[data-theme="dark"] .gp-panel,
:root[data-theme="dark"] .gd-card,
:root[data-theme="dark"] .login-card {
  background:var(--panel);
}

/* =========================================================
   HUMAN RESOURCE MODULE
   ========================================================= */
/* KPI cards */
.hr-kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; margin-bottom:20px; }
.hr-kpis-wide { grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); }
.hr-kpi { background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:16px 18px;
          display:flex; align-items:center; gap:14px; }
.hr-kpi-ic { font-size:1.6rem; width:46px; height:46px; display:flex; align-items:center; justify-content:center;
             background:var(--brand-soft); border-radius:12px; flex:0 0 auto; }
.hr-kpi-num { font-size:1.55rem; font-weight:800; color:var(--ink); line-height:1.1; }
.hr-kpi-lbl { font-size:.8rem; color:var(--muted); margin-top:2px; }
.hr-kpi.hr-g .hr-kpi-ic { background:#e5f2d6; }
.hr-kpi.hr-r .hr-kpi-ic { background:#fee2e2; }
.hr-kpi.hr-y .hr-kpi-ic { background:#fbedc8; }
.hr-kpi.hr-d .hr-kpi-ic { background:#dbe6f5; }

/* Wide tables (payroll) scroll horizontally on small screens instead of squashing. */
.table-scroll { overflow-x:auto; }
.payroll-tbl { min-width:920px; }
.payroll-tbl input[type=number] { text-align:right; }
/* Selected row highlight (e.g. active appraisal cycle). */
tr.row-on > td { background:var(--accent-soft, #eef5e6); }

/* Tabs (org structure + profile) */
.hr-tabs { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:18px; border-bottom:1px solid var(--line); }
.hr-tab { padding:9px 16px; border-radius:8px 8px 0 0; color:var(--muted); font-weight:600; font-size:.9rem;
          border:1px solid transparent; border-bottom:none; cursor:pointer; }
.hr-tab.on { background:var(--panel); color:var(--brand); border-color:var(--line); }

/* Filters toolbar */
.hr-filters { flex-wrap:wrap; align-items:end; gap:12px; }
.hr-filters > div { min-width:150px; }

/* Pager */
.hr-pager { display:flex; align-items:center; gap:14px; margin-top:14px; }

/* Avatars */
.hr-avatar-sm, .hr-avatar-lg { display:flex; align-items:center; justify-content:center; overflow:hidden;
   background:var(--brand-soft); color:var(--brand); font-weight:700; border-radius:50%; }
.hr-avatar-sm { width:34px; height:34px; font-size:.85rem; }
.hr-avatar-lg { width:84px; height:84px; font-size:2rem; flex:0 0 auto; }
.hr-avatar-sm img, .hr-avatar-lg img { width:100%; height:100%; object-fit:cover; }

/* Photo upload field */
.hr-photo-field { grid-row:span 3; }
.hr-photo-prev { width:120px; height:140px; border:1px solid var(--line); border-radius:8px; overflow:hidden;
   display:flex; align-items:center; justify-content:center; background:var(--brand-soft); color:var(--muted); margin:4px 0 8px; }
.hr-photo-prev img { width:100%; height:100%; object-fit:cover; }

/* Profile header */
.hr-profile-head { display:flex; gap:20px; align-items:center; }
.hr-profile-meta h2 { margin:0 0 4px; display:flex; align-items:center; gap:10px; }
.hr-profile-sub { color:var(--muted); display:flex; gap:6px; flex-wrap:wrap; margin-bottom:8px; }
.hr-profile-tags { display:flex; flex-wrap:wrap; gap:6px; }
.chip { background:var(--brand-soft); color:var(--brand); border-radius:14px; padding:3px 11px; font-size:.78rem; font-weight:600; }

/* Definition lists */
.hr-dl { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:0 28px; }
.hr-dl-row { display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px solid var(--line); }
.hr-dl-row dt { color:var(--muted); font-size:.85rem; }
.hr-dl-row dd { margin:0; font-weight:600; text-align:right; }
label.chk { display:flex; align-items:center; gap:8px; margin-top:24px; }
label.chk input { width:auto; }

/* Two-column grid of panels */
.hr-grid-2 { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:20px; }
.hr-grid-2 .panel { margin-bottom:0; }
.hr-grid-2 + .hr-grid-2, .panel + .hr-grid-2 { margin-top:20px; }

/* Horizontal bar charts */
.hr-bars { display:flex; flex-direction:column; gap:10px; }
.hr-bar-row { display:flex; align-items:center; gap:10px; font-size:.85rem; }
.hr-bar-lbl { flex:0 0 130px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hr-bar-track { flex:1; background:var(--brand-soft); border-radius:6px; height:14px; overflow:hidden; }
.hr-bar-track i { display:block; height:100%; background:var(--brand); border-radius:6px; }
.hr-bar-val { flex:0 0 32px; text-align:right; font-weight:700; }

/* Gender donut */
.hr-donut-wrap { display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
.hr-donut { width:140px; height:140px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.hr-donut span { width:84px; height:84px; background:var(--panel); border-radius:50%; display:flex; align-items:center;
   justify-content:center; font-size:1.5rem; font-weight:800; color:var(--ink); }
.hr-legend { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.hr-legend li { display:flex; align-items:center; gap:8px; font-size:.88rem; }
.hr-legend i { width:14px; height:14px; border-radius:4px; flex:0 0 auto; }

/* Timeline */
.hr-timeline { list-style:none; margin:0; padding:0 0 0 6px; }
.hr-timeline li { position:relative; padding:0 0 16px 22px; border-left:2px solid var(--line); }
.hr-timeline li:last-child { border-left-color:transparent; }
.hr-tl-dot { position:absolute; left:-7px; top:3px; width:12px; height:12px; border-radius:50%;
   background:var(--brand); border:2px solid var(--panel); }

/* Dark mode surfaces */
:root[data-theme="dark"] .hr-kpi,
:root[data-theme="dark"] .hr-tab.on { background:var(--panel); }

/* =========================================================
   SIDEBAR CONTRAST GUARD
   Bind the sidebar surface and its text together at a higher
   specificity so a stale/partial cache can never leave pale
   link text sitting on the pale panel (light-on-light). Also
   brightens the faint group headers for readability.
   ========================================================= */
.sidebar { background:var(--brand); }
.sidebar .navlink,
.sidebar .navlink .nt,
.sidebar .navlink .ni { color:#eef4df; }
.sidebar .navlink:hover { background:rgba(255,255,255,.10); }
.sidebar .navlink:hover .nt,
.sidebar .navlink:hover .ni { color:#fffdf6; }
.sidebar .navlink.on { background:#fffdf6; }
.sidebar .navlink.on .nt,
.sidebar .navlink.on .ni { color:var(--brand); }
.sidebar .nav-group { color:#cfdcb3; opacity:1; }
.sidebar .nav-group:hover { color:#fff; }
.sidebar .brand-text,
.sidebar .brand-text small { color:#fff; }
:root[data-theme="dark"] .sidebar { background:#0f1b09; }