/* ======================================
   RawdaCloud theme (DB-driven)
   Do NOT hardcode palette colors here.
   DB injects these variables in header.php:
   --bg, --card, --text, --muted,
   --gm-topbar-brand-bg, --gm-topbar-strip-bg, --gm-topbar-text
   ====================================== */

:root{
  /* Map legacy gm variables to DB variables */
  --gm-bg: var(--bg);
  --gm-card: var(--card);
  --gm-text: var(--text);
  --gm-muted: var(--muted);

  /* Keep non-palette UI tokens (safe) */
  --gm-border: rgba(226,232,240,.85);
  --gm-hover: rgba(238,241,249,.55);
  --gm-focus: rgba(91,124,255,.16);
  --gm-primary-soft: rgba(91,124,255,.12);
  --gm-pill-bg: rgba(91,124,255,.12);
  --gm-radius: 16px;
  --gm-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);

  /* Typography (can be overridden from Settings if you store them) */
  --gm-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --gm-font-size: 15px;
  --gm-line-height: 1.6;
  --gm-font-weight: 700;

  /* Topbar (compat) */
  --gm-topbar-bg: var(--gm-topbar-brand-bg);

  /* Bridge legacy variables used by style.css */
  --bg: var(--bg);
  --card: var(--card);
  --border: var(--gm-border);
  --text: var(--text);
  --muted: var(--muted);
  --gm-topbar-text: var(--gm-topbar-text);
}

/* optional: dark tweaks without overriding DB palette */
html[data-theme="dark"]{
  --gm-border: rgba(34,49,79,.9);
  --gm-hover: rgba(19,34,66,.55);
  --gm-focus: rgba(122,162,255,.22);
  --gm-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);

  /* Keep bridge */
  --border: var(--gm-border);
}


/* Global typography + colors (applies to whole system) */
html, body{
  background: var(--bg);
  color: var(--text);
  font-family: var(--gm-font-family);
  font-size: var(--gm-font-size);
  line-height: var(--gm-line-height);
}
body{ font-weight: var(--gm-font-weight); }

/* Language-aware font family (from Settings DB) */
:root{
  --gm-font-family-ar: var(--gm-font-family);
  --gm-font-family-en: var(--gm-font-family);
}
.gm-rtl body{ font-family: var(--gm-font-family-ar); }
.gm-ltr body{ font-family: var(--gm-font-family-en); }

/* Shell */
.gm-shell{min-height:100vh;display:flex;background:var(--gm-bg);}
.gm-rtl{direction:rtl;}
.gm-ltr{direction:ltr;}

/* Sidebar */
.gm-sidebar{width:280px;flex:0 0 280px;background:linear-gradient(180deg, var(--gm-sidebar-grad-from, var(--gm-sidebar-bg, var(--gm-card))), var(--gm-sidebar-grad-to, var(--gm-sidebar-bg, var(--gm-card))));border-inline-end:1px solid var(--gm-border);position:sticky;top:0;align-self:flex-start;min-height:100vh;}
.gm-sidebar-brand{padding:18px 16px 10px 16px;}
.gm-brand{display:flex;gap:12px;align-items:center;text-decoration:none;}
.gm-brand-logo{width:44px;height:44px;border-radius:14px;object-fit:cover;box-shadow:0 6px 16px rgba(15,23,42,.08);}
.gm-brand-fallback{width:44px;height:44px;border-radius:14px;background:linear-gradient(135deg,var(--gm-primary),var(--gm-primary-2));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;letter-spacing:.5px;}
.gm-brand-text{min-width:0;}
.gm-brand-title{font-weight:800;color:var(--gm-text);line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px;}
.gm-brand-sub{font-size:12px;color:var(--gm-muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px;}

.gm-nav{padding:10px 10px 14px 10px;display:flex;flex-direction:column;gap:4px;}
.gm-nav-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;color:var(--gm-text);text-decoration:none;font-weight:600;transition:background .15s ease, transform .15s ease;}
.gm-nav-item:hover{background:var(--gm-sidebar-hover, var(--gm-hover));transform:translateY(-1px);color:#fff;}
.gm-nav-item:hover .gm-ico{opacity:1;}
.gm-nav-item:hover span{color:#fff;}
.gm-nav-item span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.gm-ico{width:18px;height:18px;opacity:.8;}
.gm-pill{background:var(--gm-pill-bg);color:var(--gm-primary);font-weight:800;font-size:12px;border-radius:999px;padding:2px 8px;}

/* Main area */
.gm-main{flex:1;min-width:0;display:flex;flex-direction:column;}
.gm-topbar{position:sticky;top:0;z-index:10;background:var(--gm-topbar-bg);backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid var(--gm-border);display:flex;align-items:stretch;justify-content:space-between;padding:0;}

/* Topbar split (brand block + full-width strip)
   Fixes the "empty side" issue in RTL/LTR and allows two-tone coloring from Settings.
*/
.gm-topbar-brandblock{background:var(--gm-topbar-brand-bg);padding:12px 14px;display:flex;align-items:center;border-inline-end:1px solid var(--gm-border);min-width:74px;}
.gm-topbar-strip{flex:1;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;background:var(--gm-topbar-strip-bg);color:var(--gm-topbar-text);}
.gm-topbar-strip .gm-btn,.gm-topbar-strip .gm-select,.gm-topbar-strip .gm-userpill{color:var(--gm-topbar-text);}
.gm-topbar-strip .gm-btn{border-color:rgba(255,255,255,.18);}
.gm-topbar-strip .gm-btn:hover{background:rgba(255,255,255,.10);}

.gm-topbar-brand{display:flex;gap:12px;align-items:center;}
.gm-topbar-left,.gm-topbar-right{display:flex;align-items:center;gap:10px;}

.gm-inline{display:inline;}
.gm-select{border:1px solid var(--gm-border);background:var(--gm-card);border-radius:12px;padding:8px 10px;font-weight:700;color:var(--gm-text);outline:none;}
.gm-select:focus{box-shadow:0 0 0 4px var(--gm-focus);border-color:rgba(91,124,255,.55);}

/* Form controls (ensure readable text in Dark mode; overrides legacy defaults safely) */
.gm-content input,
.gm-content textarea,
.gm-content select,
.gm-content .input,
.gm-content .select{
  color: var(--gm-text);
  background: var(--gm-card);
  border-color: var(--gm-border);
}
.gm-content input::placeholder,
.gm-content textarea::placeholder{
  color: color-mix(in srgb, var(--gm-muted) 85%, transparent);
}
html[data-theme="dark"] .gm-content input::placeholder,
html[data-theme="dark"] .gm-content textarea::placeholder{
  color: color-mix(in srgb, var(--gm-muted) 92%, transparent);
}

.gm-btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--gm-border);background:var(--gm-card);border-radius:14px;padding:9px 12px;font-weight:800;color:var(--gm-text);text-decoration:none;}
.gm-btn:hover{box-shadow:0 8px 20px rgba(15,23,42,.08);}

.gm-content{padding:18px;max-width:1400px;width:100%;margin:0 auto;}

/* Footer */
.gm-footer{padding:14px 18px;color:var(--gm-muted);border-top:1px solid var(--gm-border);background:color-mix(in srgb, var(--gm-card) 88%, transparent);}
.gm-footer-inner{max-width:1400px;margin:0 auto;font-size:12px;display:flex;align-items:center;justify-content:center;gap:8px;}
.gm-footer-sep{opacity:.65;}
.gm-footer-meta{font-weight:800;color:var(--gm-muted);}

/* Responsive */
@media (max-width: 1024px){
  .gm-sidebar{width:240px;flex-basis:240px;}
}
@media (max-width: 860px){
  .gm-sidebar{display:none;}
  .gm-content{padding:14px;}
}

/* Make legacy page containers look like RawdaCloud cards without changing PHP output */
.gm-content .card,
.gm-content .panel,
.gm-content .box,
.gm-content .section{
  background:var(--gm-card);
  border:1px solid var(--gm-border);
  border-radius:var(--gm-radius);
  box-shadow:var(--gm-shadow);
}

/* Improve legacy tables in a safe way */
.gm-content table{border-collapse:separate;border-spacing:0;width:100%;}
.gm-content table th,
.gm-content table td{border-bottom:1px solid rgba(226,232,240,.8);}
.gm-content table th{color:var(--gm-muted);font-size:12px;text-transform:uppercase;letter-spacing:.04em;}

/* Subtle row hover for readability (no HTML changes required) */
.gm-content table tbody tr:hover td{background:rgba(238,241,249,.55);}
html[data-theme="dark"] .gm-content table tbody tr:hover td{background:rgba(19,34,66,.55);}
/* ================================
   RawdaCloud-inspired page components (UI only)
   ================================ */

.rc-page{display:block;}
.rc-pagehead{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin-bottom:14px;}
.rc-pagehead--split{align-items:center;}
.rc-title{font-size:22px;font-weight:900;color:var(--gm-text);line-height:1.2;}
.rc-subtitle{color:var(--gm-muted);font-weight:700;font-size:12px;margin-top:4px;}
.rc-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end;}

.rc-btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--gm-border);background:var(--gm-card);border-radius:14px;padding:9px 12px;font-weight:800;color:var(--gm-text);text-decoration:none;cursor:pointer;}
.rc-btn i{width:18px;height:18px;}
.rc-btn:hover{box-shadow:0 10px 22px rgba(15,23,42,.08);transform:translateY(-1px);}
.rc-btn--primary{border-color:rgba(91,124,255,.35);background:linear-gradient(135deg, var(--gm-primary-soft), rgba(124,92,255,.10));}

.rc-filterbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px;}
.rc-search{flex:1;min-width:260px;display:flex;align-items:center;gap:10px;background:var(--gm-card);border:1px solid var(--gm-border);border-radius:16px;padding:10px 12px;}
.rc-search i{width:18px;height:18px;opacity:.7;}
.rc-input{flex:1;border:0;background:transparent;outline:none;font-weight:700;color:var(--gm-text);}
.rc-input::placeholder{color:rgba(107,114,128,.85);font-weight:700;}

.rc-cardgrid{display:grid;grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));gap:12px;}
.rc-card{display:flex;gap:12px;align-items:flex-start;text-decoration:none;background:var(--gm-card);border:1px solid var(--gm-border);border-radius:18px;padding:14px 14px;box-shadow:var(--gm-shadow);transition:transform .15s ease, box-shadow .15s ease;}
.rc-card:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(15,23,42,.10);}
.rc-card-ico{width:42px;height:42px;border-radius:16px;background:linear-gradient(135deg, var(--gm-primary-soft), rgba(124,92,255,.10));display:flex;align-items:center;justify-content:center;flex:0 0 42px;}
.rc-card-ico i{width:20px;height:20px;color:var(--gm-primary);}
.rc-card-title{font-weight:900;color:var(--gm-text);}
.rc-card-desc{color:var(--gm-muted);font-weight:700;font-size:12px;margin-top:4px;}

.rc-surface{background:var(--gm-card);border:1px solid var(--gm-border);border-radius:18px;box-shadow:var(--gm-shadow);padding:14px 14px;margin-bottom:14px;}
.rc-sectionhead{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:10px;}
.rc-h2{font-weight:900;color:var(--gm-text);font-size:16px;}
.rc-hint{color:var(--gm-muted);font-weight:700;font-size:12px;}

.rc-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 14px 0;}
.rc-tab{display:inline-flex;align-items:center;gap:8px;text-decoration:none;border:1px solid var(--gm-border);background:var(--gm-card);border-radius:999px;padding:8px 12px;font-weight:900;color:var(--gm-text);}
.rc-tab i{width:18px;height:18px;opacity:.85;}
.rc-tab.is-active{border-color:rgba(91,124,255,.45);box-shadow:0 0 0 4px var(--gm-focus);}

.rc-table th{text-transform:none !important;letter-spacing:0 !important;}

/* RTL polish */
.gm-rtl .rc-actions{justify-content:flex-start;}
.gm-rtl .rc-pagehead{align-items:center;}

@media (max-width: 860px){
  .rc-search{min-width:200px;}
}


.gm-btn-ghost{background:transparent;}
html[data-theme="dark"] .gm-btn-ghost{background:transparent;}
.gm-ico-sun{display:none;}
html[data-theme="dark"] .gm-ico-moon{display:none;}
html[data-theme="dark"] .gm-ico-sun{display:inline-block;}

/* ================================
   Occupancy dashboard helpers
   ================================ */
.rc-badge{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--gm-border);border-radius:999px;padding:6px 10px;font-weight:900;font-size:12px;line-height:1;color:var(--gm-text);background:var(--gm-card);}
.rc-badge--ghost{background:transparent;}
.rc-badge--ok{border-color:rgba(16,185,129,.35);background:rgba(16,185,129,.10);color:rgb(16,185,129);}
.rc-badge--warn{border-color:rgba(245,158,11,.35);background:rgba(245,158,11,.10);color:rgb(245,158,11);}
.rc-badge--bad{border-color:rgba(239,68,68,.35);background:rgba(239,68,68,.10);color:rgb(239,68,68);}

.rc-progress{height:10px;border-radius:999px;background:rgba(148,163,184,.25);overflow:hidden;border:1px solid rgba(148,163,184,.18);}
html[data-theme="dark"] .rc-progress{background:rgba(148,163,184,.15);}
.rc-progress__bar{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--gm-primary),var(--gm-primary-2));}

.rc-metric{background:rgba(148,163,184,.12);border:1px solid rgba(148,163,184,.14);border-radius:16px;padding:10px 12px;}
html[data-theme="dark"] .rc-metric{background:rgba(148,163,184,.08);}
.rc-metric__val{font-weight:900;color:var(--gm-text);font-size:18px;margin-top:4px;}


/* --- Nested sidebar groups (HR/Students/Finance) --- */
.gm-nav-group{margin:4px 8px;}
.gm-nav-group > summary{list-style:none;cursor:pointer;}
.gm-nav-group > summary::-webkit-details-marker{display:none;}
.gm-nav-group-title{border-radius:14px;}
.gm-nav-sub{margin:6px 0 6px 10px;padding:6px 0 6px 10px;border-inline-start:1px solid var(--gm-border);}
.gm-nav-sub .gm-nav-item{margin:2px 0;}
.gm-nav-subitem{font-size:0.95em;opacity:0.95;}
.gm-nav-subtitle{border-radius:12px;opacity:0.95;}
.gm-nav-caret{margin-inline-start:auto;opacity:0.7;transition:transform .15s ease;}
details[open] > summary .gm-nav-caret{transform:rotate(180deg);}



/* Sidebar active item (optional): add class="is-active" in PHP when needed */
.gm-nav-item.is-active{background:var(--gm-sidebar-hover, var(--gm-hover));color:#fff;}
.gm-nav-item.is-active .gm-ico{opacity:1;}


/* === Green Mind Sidebar: text + gradient + hover === */
.gm-sidebar{
  background: linear-gradient(180deg, var(--gm-sidebar-grad-from), var(--gm-sidebar-grad-to)) !important;
  color: var(--gm-sidebar-text) !important;
}
.gm-sidebar .gm-nav-item,
.gm-sidebar .gm-nav-item span,
.gm-sidebar .gm-nav-item i,
.gm-sidebar .gm-brand-title,
.gm-sidebar .gm-nav-group-title,
.gm-sidebar .gm-nav-subtitle{
  color: var(--gm-sidebar-text) !important;
}

.gm-sidebar .gm-nav-item{
  transition: all .18s ease;
  border-radius: 14px;
}

.gm-sidebar .gm-nav-item:hover{
  background: var(--gm-sidebar-hover) !important;
  color: #fff !important;
  transform: translateX(4px);
}
.gm-sidebar .gm-nav-item:hover span,
.gm-sidebar .gm-nav-item:hover i{ color:#fff !important; }

.gm-sidebar details.gm-nav-group > summary{ list-style:none; cursor:pointer; }
.gm-sidebar details.gm-nav-group > summary::-webkit-details-marker{ display:none; }

/* keep multi-open, collapsed by default handled by removing 'open' attribute in PHP */