/* ========================================================
   Colibium Hotel Suite — Shared Styles (common.css)
   Blue/Cyan Palette v2.1
   ======================================================== */

/* ─── CSS VARIABLES ─── */
:root{
  --g900:#0f4c9d;--g800:#045a9f;--g700:#2a91b6;--g500:#5bcacf;--g200:#b3e8eb;--g100:#daf4f6;--g50:#edf9fa;
  --a50:#fffbeb;--a100:#fef3c7;--a200:#fde68a;--a600:#d97706;
  --gray900:#1e293b;--gray700:#475569;--gray600:#475569;--gray500:#64748b;--gray400:#94a3b8;--gray300:#cbd5e1;--gray200:#e2e8f0;--gray100:#f1f5f9;--gray50:#f8fafc;
  --blue50:#eff6ff;--blue100:#dbeafe;--blue700:#0f4c9d;
  --rose50:#fff1f2;--rose100:#ffe4e6;--rose500:#dc3f5e;
  --purple100:#ede9fe;--purple500:#7c5cbf;--purple600:#6d28d9;
  --teal100:#ccfbf1;--teal500:#60b69e;
  --bg:#f5f7fc;--surface:#ffffff;--s2:#f8fafc;--text:#475569;--muted:#64748b;--border:#e2e8f0;
  --sh:0 4px 24px rgba(0,0,0,.06);--shm:0 8px 32px rgba(0,0,0,.09);
  --glow:0 0 20px rgba(91,202,207,.4);--focus-ring:0 0 0 3px rgba(91,202,207,.3);
  --success:#2d7a62;--success-bg:#e6f5f0;--error:#b91c3a;--error-bg:#fef2f2;--warning:#92400e;--warning-bg:#fffbeb;--info:#0f4c9d;--info-bg:#eff6ff;
  --delta-up:#2d7a62;--delta-down:#b91c3a;
  --chart-rooms:#045a9f;--chart-fb:#2a91b6;--chart-spa:#d4960f;--chart-extras:#7c5cbf;
  --kpi-occupancy:#0f4c9d;--kpi-adr:#2a91b6;--kpi-revpar:#d4960f;--kpi-rating:#7c5cbf;
  --room-libre-bg:#e6f5f0;--room-libre-text:#2d7a62;--room-libre-border:#b2dfc9;--room-occupied:#045a9f;--room-suite:#6d28d9;--room-suite-border:#d4960f;--room-cleaning:#dbeafe;--room-cleaning-text:#0f4c9d;--room-maintenance:#fde68a;--room-maintenance-text:#92400e;
  --navy:#0f4c9d;--ocean:#045a9f;--secondary:#2a91b6;--accent:#5bcacf;--accent-light:#93dfe4;
  --heading:#1e293b;
  --success-border:#b2dfc9;--error-border:#fecaca;--warning-border:#fde68a;--info-border:#bfdbfe;
  --delta-up-bg:#e6f5f0;--delta-down-bg:#fef2f2;
  --urgency-critical:#b91c3a;--urgency-critical-bg:#fef2f2;--urgency-warning:#92400e;--urgency-warning-bg:#fffbeb;--urgency-info:#0f4c9d;--urgency-info-bg:#eff6ff;--urgency-success:#2d7a62;--urgency-success-bg:#e6f5f0;--urgency-progress:#045a9f;--urgency-progress-bg:#dbeafe;
}
[data-theme="dark"]{
  --bg:#080e24;--surface:#0d1b3a;--s2:#111f42;--text:#e2e8f0;--muted:rgba(255,255,255,.65);--border:#1a2550;
  --sh:0 4px 24px rgba(0,0,0,.4);--shm:0 8px 32px rgba(0,0,0,.5);
  --gray900:#e2e8f0;--gray700:#94a3b8;--gray600:#94a3b8;--gray500:rgba(255,255,255,.65);--gray200:#1a2550;--gray100:#111f42;--gray50:#0d1b3a;
  --g50:#081028;--g100:#0d1b3a;
  --blue50:#0e1829;--blue100:#1a2a44;
  --rose50:#1c0a0e;--rose100:#2e1018;
  --purple100:#1e1530;
  --teal100:#0a2a25;
  --a50:#1a1200;--a100:#241900;
  --success:#60b69e;--success-bg:rgba(96,182,158,.12);--error:#f87171;--error-bg:rgba(248,113,113,.10);--warning:#fbbf24;--warning-bg:rgba(251,191,36,.10);--info:#5bcacf;--info-bg:rgba(91,202,207,.10);
  --delta-up:#60b69e;--delta-down:#f87171;
  --chart-rooms:#2a91b6;--chart-fb:#5bcacf;--chart-spa:#fbbf24;--chart-extras:#a78bfa;
  --kpi-occupancy:#2a91b6;--kpi-adr:#5bcacf;--kpi-revpar:#fbbf24;--kpi-rating:#a78bfa;
  --room-libre-bg:rgba(45,122,98,.15);--room-libre-text:#60b69e;--room-libre-border:rgba(96,182,158,.3);--room-occupied:#2a91b6;--room-suite:#a78bfa;--room-suite-border:#fbbf24;--room-cleaning:#1a2a44;--room-cleaning-text:#5bcacf;--room-maintenance:#d4960f;--room-maintenance-text:#fbbf24;
  --navy:#0f4c9d;--ocean:#2a91b6;--secondary:#5bcacf;--accent:#5bcacf;--accent-light:#93dfe4;
  --heading:#ffffff;
  --success-border:rgba(96,182,158,.25);--error-border:rgba(248,113,113,.2);--warning-border:rgba(251,191,36,.2);--info-border:rgba(91,202,207,.2);
  --delta-up-bg:rgba(96,182,158,.12);--delta-down-bg:rgba(248,113,113,.10);
  --urgency-critical:#f87171;--urgency-critical-bg:rgba(248,113,113,.10);--urgency-warning:#fbbf24;--urgency-warning-bg:rgba(251,191,36,.10);--urgency-info:#5bcacf;--urgency-info-bg:rgba(91,202,207,.10);--urgency-success:#60b69e;--urgency-success-bg:rgba(96,182,158,.12);--urgency-progress:#2a91b6;--urgency-progress-bg:rgba(42,145,182,.12);
}

/* ─── RESET & SCROLLBAR ─── */
*{margin:0;padding:0;box-sizing:border-box;}
*::-webkit-scrollbar{width:6px;height:6px;}
*::-webkit-scrollbar-track{background:transparent;}
*::-webkit-scrollbar-thumb{background:var(--border);border-radius:6px;transition:background .2s;}
*::-webkit-scrollbar-thumb:hover{background:var(--muted);}
*{scrollbar-width:thin;scrollbar-color:var(--border) transparent;}

/* ─── BODY ─── */
body{font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--text);font-size:14px;line-height:1.5;transition:background .3s,color .3s;}

/* ─── NAV ─── */
nav{background:linear-gradient(135deg,var(--navy),var(--ocean));padding:0 20px;position:sticky;top:0;z-index:200;border-bottom:1px solid rgba(255,255,255,.07);}
.nav-in{max-width:1280px;margin:0 auto;display:flex;align-items:center;gap:6px;height:54px;}
.logo{font-weight:700;font-size:15px;color:#fff;text-decoration:none;display:flex;align-items:center;gap:8px;margin-right:12px;}
.logo-mark{width:26px;height:26px;background:rgba(255,255,255,.15);border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:13px;}
.logo span{color:var(--accent-light);}
.nav-pill{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);color:#fff;font-size:10px;font-weight:700;padding:3px 9px;border-radius:20px;letter-spacing:.4px;margin-left:4px;}
.navlink{font-size:12px;font-weight:500;color:rgba(255,255,255,.65);padding:5px 10px;border-radius:6px;cursor:pointer;border:none;background:none;text-decoration:none;white-space:nowrap;transition:all .2s;font-family:'DM Sans',sans-serif;}
.navlink:hover,.navlink.act{color:#fff;background:rgba(255,255,255,.12);}
.navlink.act{color:var(--accent-light);}
.tbtn{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#fff;border-radius:7px;padding:5px 9px;cursor:pointer;font-size:12px;margin-left:auto;transition:all .2s;}
.tbtn:hover{background:rgba(255,255,255,.2);}

/* ─── MOBILE NAV ─── */
.ham-btn{display:none;background:none;border:none;color:#fff;font-size:20px;cursor:pointer;padding:4px 8px;margin-left:auto;line-height:1;}
.nav-links{display:contents;}
@media(max-width:768px){
  .nav-in{flex-wrap:wrap;height:auto;min-height:54px;padding:8px 0;}
  .ham-btn{display:block;}
  .tbtn{margin-left:8px;}
  .nav-links{display:none;width:100%;order:10;flex-direction:column;gap:2px;padding:8px 0 12px;}
  .nav-links.open{display:flex;}
  .navlink{text-align:left;padding:8px 12px;font-size:13px;border-radius:8px;}
  .nav-pill{display:none;}
}

/* ─── COMMON COMPONENTS ─── */
.card{background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--sh);padding:16px;}
.section-lbl{font-size:9px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--muted);margin-bottom:8px;}
.badge{display:inline-flex;align-items:center;font-size:9px;font-weight:700;padding:2px 7px;border-radius:20px;}
.bg{background:var(--g100);color:var(--ocean);}
.bb{background:var(--blue100);color:var(--blue700);}
.ba{background:var(--a100);color:var(--a600);}
.br{background:var(--rose100);color:var(--error);}
.bp{background:var(--purple100);color:var(--purple600);}
[data-theme="dark"] .bg{color:var(--accent);}
[data-theme="dark"] .bb{color:var(--accent);}
[data-theme="dark"] .bp{color:#a78bfa;}
[data-theme="dark"] .br{color:var(--error);}
[data-theme="dark"] .ba{color:var(--warning);}

/* ─── FOOTER ─── */
.site-footer{background:var(--surface);border-top:1px solid var(--border);padding:20px 24px;text-align:center;}
.footer-logo{font-size:14px;font-weight:700;color:var(--gray900);}
.footer-logo span{color:var(--accent);}
.footer-sub{font-size:11px;color:var(--muted);margin-top:5px;}
.footer-sub a{color:var(--muted);text-decoration:none;}
.footer-sub a:hover{color:var(--accent);}
.footer-cta{display:inline-flex;align-items:center;gap:6px;margin-top:10px;padding:6px 16px;background:linear-gradient(135deg,var(--navy),var(--ocean));color:#fff;font-size:11px;font-weight:600;border-radius:8px;text-decoration:none;transition:opacity .2s;}
.footer-cta:hover{opacity:.9;}

/* ─── GLOSSARY ─── */
.glossary-fab{position:fixed;bottom:24px;right:24px;z-index:999;width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,var(--navy),var(--ocean));color:#fff;border:2px solid rgba(255,255,255,.2);cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px rgba(0,0,0,.25);transition:all .2s;font-family:'DM Sans',sans-serif;}
.glossary-fab:hover{transform:scale(1.08);box-shadow:0 6px 28px rgba(0,0,0,.35);}
.glossary-panel{position:fixed;bottom:84px;right:24px;z-index:998;width:360px;max-width:calc(100vw - 48px);max-height:70vh;background:var(--surface);border:1px solid var(--border);border-radius:18px;box-shadow:0 12px 48px rgba(0,0,0,.18);overflow:hidden;display:none;flex-direction:column;animation:glossFade .2s ease;}
.glossary-panel.open{display:flex;}
@keyframes glossFade{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
.gloss-header{padding:16px 18px 12px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:8px;}
.gloss-header h3{font-size:14px;font-weight:700;color:var(--gray900);flex:1;margin:0;}
.gloss-close{background:none;border:none;font-size:18px;cursor:pointer;color:var(--muted);padding:2px 6px;border-radius:6px;}
.gloss-close:hover{background:var(--s2);}
.gloss-search{margin:0 14px;padding:8px 12px;border:1px solid var(--border);border-radius:10px;font-size:12px;background:var(--s2);color:var(--text);outline:none;font-family:'DM Sans',sans-serif;width:calc(100% - 28px);margin-top:10px;}
.gloss-search:focus{border-color:var(--accent);}
.gloss-body{padding:10px 14px 18px;overflow-y:auto;flex:1;}
.gloss-item{padding:10px 0;border-bottom:1px solid var(--border);}
.gloss-item:last-child{border-bottom:none;}
.gloss-term{font-size:12px;font-weight:700;color:var(--ocean);margin-bottom:3px;display:flex;align-items:center;gap:6px;}
.gloss-cat{font-size:8px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:1px 5px;border-radius:6px;background:var(--g100);color:var(--ocean);}
.gloss-def{font-size:11.5px;color:var(--text);line-height:1.55;}
[data-theme="dark"] .glossary-fab{box-shadow:0 4px 20px rgba(0,0,0,.5);}
[data-theme="dark"] .glossary-panel{box-shadow:0 12px 48px rgba(0,0,0,.5);}
[data-theme="dark"] .gloss-cat{background:var(--g50);color:var(--accent-light);}
[data-theme="dark"] .gloss-term{color:var(--accent-light);}