:root {
  --ink:#10292f; --ink-2:#1a3b43; --ink-3:#2a505a;
  --paper:#f3f6f5; --line:#e1e8e6; --text:#1b2a2d; --muted:#6a7b7f;
  --teal:#0f766e; --teal-dark:#0b5c56; --brass:#b7852f;
  --bs-body-font-family:'Manrope',system-ui,sans-serif; --bs-body-color:var(--text);
  --bs-link-color:var(--teal); --bs-link-hover-color:var(--teal-dark);
  --bs-border-color:var(--line);
}
body { background:var(--paper); font-size:.93rem; }
h4, h5 { font-weight:800; letter-spacing:-.01em; }
.app { display:flex; min-height:100vh; }
.content { flex:1; min-width:0; }

/* sidebar */
.sidebar { width:248px; flex-shrink:0; background:var(--ink); color:#cfe0e0; display:flex; flex-direction:column; position:sticky; top:0; height:100vh; z-index:1040; }
.brand { display:flex; align-items:center; gap:.7rem; padding:1.15rem 1.2rem; color:#fff; font-weight:800; font-size:1.1rem; letter-spacing:-.01em; }
.brand-mark { width:34px; height:34px; border-radius:9px; background:var(--brass); color:#fff; display:grid; place-items:center; font-size:1.05rem; }
.nav-scroll { overflow-y:auto; padding:0 .7rem 1.5rem; flex:1; }
.nav-scroll::-webkit-scrollbar { width:0; }
.grp { color:#7e9aa0; font-size:.72rem; font-weight:700; padding:1.1rem .7rem .35rem; letter-spacing:.03em; }
.nav-link-x { display:flex; align-items:center; gap:.7rem; padding:.5rem .7rem; margin:1px 0; border-radius:8px; color:#c3d6d7; text-decoration:none; font-weight:500; }
.nav-link-x i { font-size:1.05rem; width:1.2rem; text-align:center; opacity:.85; }
.nav-link-x:hover { background:var(--ink-2); color:#fff; }
.nav-link-x.active { background:var(--teal); color:#fff; font-weight:700; box-shadow:inset 3px 0 0 var(--brass); }
.nav-link-x.active i { opacity:1; }

/* topbar */
.topbar { display:flex; align-items:center; gap:.75rem; background:#fff; border-bottom:1px solid var(--line); padding:.55rem 1.25rem; position:sticky; top:0; z-index:1030; }
.today { color:var(--muted); font-weight:500; }
.avatar { width:30px; height:30px; border-radius:50%; background:var(--ink); color:#fff; display:grid; place-items:center; font-weight:700; font-size:.8rem; }

/* cards & tables */
.card { border:1px solid var(--line); border-radius:12px; box-shadow:0 1px 2px rgba(16,41,47,.04); }
.card-header { background:#fff; border-bottom:1px solid var(--line); font-weight:700; padding:.75rem 1rem; border-radius:12px 12px 0 0 !important; }
.table { --bs-table-striped-bg:#f8faf9; --bs-table-hover-bg:#f1f6f5; margin-bottom:0; }
.table thead th { font-size:.78rem; font-weight:700; color:var(--muted); background:#fafcfb; border-bottom:1px solid var(--line); white-space:nowrap; }
.table td, .table th { padding:.55rem .75rem; }
.card > .table:last-child, .card > .table-responsive:last-child > .table { border-radius:0 0 12px 12px; }
.form-control, .form-select { border-radius:8px; border-color:#d3dddb; }
.form-control:focus, .form-select:focus { border-color:var(--teal); box-shadow:0 0 0 .2rem rgba(15,118,110,.15); }
.form-label { font-weight:600; font-size:.85rem; margin-bottom:.3rem; }

/* buttons */
.btn { border-radius:8px; font-weight:600; }
.btn i { margin-right:.3rem; }
.btn-sm i { margin-right:.2rem; }
.btn-primary { --bs-btn-bg:var(--teal); --bs-btn-border-color:var(--teal); --bs-btn-hover-bg:var(--teal-dark); --bs-btn-hover-border-color:var(--teal-dark); --bs-btn-active-bg:var(--teal-dark); --bs-btn-active-border-color:var(--teal-dark); }
.btn-outline-primary { --bs-btn-color:var(--teal); --bs-btn-border-color:var(--teal); --bs-btn-hover-bg:var(--teal); --bs-btn-hover-border-color:var(--teal); --bs-btn-active-bg:var(--teal-dark); }
.btn-success { --bs-btn-bg:#17805a; --bs-btn-border-color:#17805a; --bs-btn-hover-bg:#116646; --bs-btn-hover-border-color:#116646; }
.btn-warning { --bs-btn-bg:var(--brass); --bs-btn-border-color:var(--brass); --bs-btn-color:#fff; --bs-btn-hover-bg:#9a6f24; --bs-btn-hover-border-color:#9a6f24; --bs-btn-hover-color:#fff; --bs-btn-active-color:#fff; }

/* status pills */
.st { display:inline-flex; align-items:center; gap:.4rem; padding:.16rem .65rem; border-radius:999px; font-size:.74rem; font-weight:700; white-space:nowrap; }
.st::before { content:''; width:6px; height:6px; border-radius:50%; background:currentColor; }
.st-success { background:#e2f4ea; color:#16704a; } .st-primary { background:#e2edfb; color:#1c5cb0; }
.st-info { background:#dff2f6; color:#0d6c80; } .st-warning { background:#fcefd3; color:#8a5a00; }
.st-danger { background:#fbe3e3; color:#a02828; } .st-secondary { background:#eaeeee; color:#56676b; }

/* dashboard */
.hero { background:var(--ink); color:#fff; border-radius:14px; padding:1.4rem 1.6rem; }
.hero .pct { font-size:3rem; font-weight:800; line-height:1; letter-spacing:-.03em; }
.roombar { display:flex; height:14px; border-radius:7px; overflow:hidden; background:var(--ink-2); }
.roombar > span { display:block; height:100%; }
.legend { display:flex; flex-wrap:wrap; gap:.4rem 1.1rem; font-size:.8rem; color:#b9cfd1; margin-top:.75rem; }
.legend i { display:inline-block; width:9px; height:9px; border-radius:3px; margin-right:.35rem; }
.tile { display:flex; align-items:center; gap:.85rem; background:#fff; border:1px solid var(--line); border-radius:12px; padding:.8rem 1rem; height:100%; }
.tile .ico { width:40px; height:40px; border-radius:10px; display:grid; place-items:center; font-size:1.15rem; flex-shrink:0; }
.tile .num { font-size:1.55rem; font-weight:800; line-height:1.1; }
.tile .lbl { color:var(--muted); font-size:.8rem; font-weight:600; }
.ico-success { background:#e2f4ea; color:#16704a; } .ico-primary { background:#e2edfb; color:#1c5cb0; }
.ico-info { background:#dff2f6; color:#0d6c80; } .ico-warning { background:#fcefd3; color:#8a5a00; }
.ico-danger { background:#fbe3e3; color:#a02828; } .ico-secondary { background:#eaeeee; color:#56676b; } .ico-dark { background:var(--ink); color:#fff; }

/* calendar */
.cal { font-size:.76rem; border-collapse:separate; border-spacing:0; background:#fff; }
.cal th, .cal td { border:1px solid var(--line); min-width:46px; height:34px; padding:0 3px; text-align:center; white-space:nowrap; }
.cal th { background:#fafcfb; font-weight:700; color:var(--muted); }
.cal th.room, .cal td.room { position:sticky; left:0; background:#fff; z-index:2; min-width:120px; text-align:left; padding-left:.6rem; }
.cal td.b-Confirmed { background:var(--teal); color:#fff; } .cal td.b-Tentative { background:#7fd0dc; color:#0b3b45; }
.cal td.b-CheckedIn { background:#17805a; color:#fff; } .cal td.b-CheckedOut { background:#b8c4c6; color:#2b3a3d; }
.cal td.today, .cal th.today { box-shadow:inset 0 0 0 2px var(--brass); }
.cal td.free { cursor:pointer; } .cal td.free:hover { background:#e4f3f1; }

/* login */
.login-wrap { min-height:100vh; display:grid; grid-template-columns:1.1fr 1fr; }
.login-side { background:var(--ink); color:#fff; padding:3rem; display:flex; flex-direction:column; justify-content:space-between; }
.login-side h1 { font-weight:800; letter-spacing:-.02em; font-size:2.3rem; max-width:14ch; }
.login-form { display:flex; align-items:center; justify-content:center; padding:2rem; background:#fff; }
@media (max-width:900px) { .login-wrap { grid-template-columns:1fr; } .login-side { display:none; } }

@media (max-width:991px) {
  .sidebar { position:fixed; left:0; top:0; transform:translateX(-100%); transition:transform .2s; }
  .sidebar.open { transform:none; box-shadow:0 0 0 100vmax rgba(0,0,0,.35); }
}
@media (prefers-reduced-motion:reduce) { .sidebar { transition:none; } }
@media print { .sidebar, .no-print, .topbar { display:none !important; } body { background:#fff; } .card { border:none; box-shadow:none; } }