/* ============================================================
   Base / Reset / Layout shell
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text-primary);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  transition:background .25s ease, color .25s ease;
}
h1,h2,h3,h4{font-family:var(--font-display);margin:0;color:var(--text-primary);}
p{margin:0;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;}
ul{list-style:none;margin:0;padding:0;}
img{max-width:100%;display:block;}

::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:8px;}
::-webkit-scrollbar-track{background:transparent;}

/* Applied to <html> and <body> by js/layout.js's openSidebar()/closeSidebar()
   while the mobile off-canvas sidebar is open, so a scroll gesture stays on
   the sidebar's own nav list instead of falling through to the page behind it. */
.scroll-locked{overflow:hidden;}

.app-shell{
  display:flex;
  min-height:100vh;
}

/* ---------- Sidebar ---------- */
.sidebar{
  flex:none;
  width:264px;
  background:var(--sidebar-bg);
  background-image:linear-gradient(180deg, var(--sidebar-bg) 0%, #15123a 100%);
  color:var(--sidebar-text);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:28px 20px;
  position:sticky;
  top:0;
  height:100vh;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 6px 8px;
  margin-bottom:8px;
}
.brand-mark{
  width:34px;height:34px;border-radius:9px;
  background:linear-gradient(135deg, var(--indigo), var(--violet));
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:800;color:#fff;font-size:15px;
  box-shadow:0 6px 16px rgba(79,70,229,.45);
}
.brand-name{
  font-family:var(--font-display);font-weight:800;color:#fff;font-size:17px;letter-spacing:.2px;
  flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* In-sidebar close button — only meaningful (and only shown) on mobile,
   where the sidebar is an off-canvas overlay; lives inside the sidebar
   itself so it's always on top and tappable, unlike the topbar hamburger
   which the open sidebar visually covers. Wired to the same closeSidebar()
   used by the scrim and nav-link taps. */
.sidebar-close{
  display:none;width:30px;height:30px;flex:none;border-radius:8px;border:none;
  background:rgba(255,255,255,.08);color:#fff;align-items:center;justify-content:center;
}
.sidebar-close:hover{background:rgba(255,255,255,.15);}

.nav{display:flex;flex-direction:column;gap:16px;margin-top:6px;overflow-y:auto;}
.nav-group{display:flex;flex-direction:column;gap:3px;}
.nav-group-label{
  font-size:10.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;
  color:rgba(255,255,255,.38);padding:0 14px 6px;
}
.nav-item{
  display:flex;align-items:center;gap:12px;
  padding:11px 14px;border-radius:10px;
  color:var(--sidebar-text);font-size:14.5px;font-weight:600;
  transition:background .15s ease, color .15s ease;
  position:relative;
}
.nav-item .ico{width:18px;height:18px;flex:none;opacity:.9;}
/* Truncate rather than wrap a long label (e.g. "Employee Management") so its
   "Upcoming" badge always stays on the same line instead of getting pushed
   or making the row look lopsided. */
.nav-item span{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.nav-item:hover{background:rgba(255,255,255,.07);color:#fff;}
.nav-item.active{
  color:#fff;
  background:linear-gradient(90deg, rgba(79,70,229,.9), rgba(124,58,237,.75));
  box-shadow:0 6px 18px rgba(79,70,229,.35);
}
.nav-item.disabled{opacity:.5;cursor:not-allowed;}
.nav-item.disabled:hover{background:transparent;color:var(--sidebar-text);}
.nav-badge{
  margin-left:auto;flex:none;font-size:10px;font-weight:700;letter-spacing:.4px;
  background:rgba(255,255,255,.12);color:rgba(255,255,255,.8);
  padding:3px 7px;border-radius:999px;text-transform:uppercase;
}

/* ---------- Collapsible sidebar "folder" groups (CRM, HRMS, Finance,
   Team & Admin) — the label becomes a clickable toggle with a chevron;
   .nav-folder-items animates open/closed via grid-template-rows so it
   doesn't need a fixed max-height. ---------- */
.nav-group-label.folder-toggle{
  width:100%;background:none;border:none;font:inherit;border-radius:8px;
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  cursor:pointer;padding:8px 10px 8px 14px;
}
.nav-group-label.folder-toggle:hover{background:rgba(255,255,255,.05);}
.nav-group-label.folder-toggle .chev-ico{
  display:inline-flex;flex:none;opacity:.55;transition:transform .2s ease;
}
.nav-group.folder.open > .folder-toggle .chev-ico{transform:rotate(90deg);}
.nav-folder-items{
  display:grid;grid-template-rows:0fr;overflow:hidden;
  transition:grid-template-rows .22s ease;
}
.nav-folder-items .items-inner{
  overflow:hidden;min-height:0;display:flex;flex-direction:column;gap:3px;
}
/* Indent nested items a touch past their folder label so the hierarchy
   reads clearly, on mobile as well as desktop. */
.nav-folder-items .nav-item{padding-left:24px;}
.nav-group.folder.open > .nav-folder-items{grid-template-rows:1fr;}

/* Reused by settings.html's profile card and the topbar profile pill
   (js/layout.js .tp-avatar) — the sidebar no longer has its own account
   footer; that menu now lives top-right in the topbar (see components.css
   .topbar-profile / .profile-pop). */
.user-avatar{
  width:34px;height:34px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:13px;color:#fff;
  background:linear-gradient(135deg, var(--sky), var(--indigo));
}

/* ---------- Main column ---------- */
.main-col{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--bg);}

/* ---------- Topbar ---------- */
.topbar{
  display:flex;align-items:center;gap:14px;
  padding:16px 28px;
  border-bottom:1px solid var(--border);
  background:var(--surface);
  position:sticky;top:0;z-index:20;
  flex-wrap:wrap;
}
.search-wrap{
  flex:1 1 260px;min-width:180px;max-width:420px;
  display:flex;align-items:center;gap:8px;
  background:var(--bg-alt);border:1px solid var(--border);
  border-radius:10px;padding:9px 14px;color:var(--text-muted);
}
.search-wrap input{
  border:none;outline:none;background:transparent;width:100%;
  font-size:13.5px;color:var(--text-primary);font-family:var(--font-body);
}
.search-wrap svg{flex:none;opacity:.7;}

.chip-btn{
  display:flex;align-items:center;gap:8px;
  background:var(--bg-alt);border:1px solid var(--border);
  border-radius:10px;padding:8px 12px;font-size:12.5px;color:var(--text-secondary);font-weight:600;
  white-space:nowrap;
}
.chip-btn svg{flex:none;}
.chip-btn.quick-note{background:#FDEDD8;border-color:#FAD7A8;color:#A46309;}
:root[data-theme="dark"] .chip-btn.quick-note{background:#4D2E04;border-color:#744606;color:#F7C278;}

.icon-btn{
  width:38px;height:38px;border-radius:10px;border:1px solid var(--border);
  background:var(--bg-alt);display:flex;align-items:center;justify-content:center;
  color:var(--text-secondary);position:relative;flex:none;
}
.icon-btn:hover{background:var(--border-soft);}
.icon-btn .dot{
  position:absolute;top:7px;right:7px;width:7px;height:7px;border-radius:50%;
  background:var(--rose);border:2px solid var(--surface);
}

.topbar-spacer{margin-left:auto;display:flex;align-items:center;gap:12px;flex-wrap:wrap;}

/* digital clock */
.digital-clock{display:flex;flex-direction:column;align-items:flex-end;line-height:1.15;}
.digital-clock .time{font-family:var(--font-display);font-weight:700;font-size:15px;color:var(--text-primary);letter-spacing:.5px;}
.digital-clock .date{font-size:11px;color:var(--text-muted);font-weight:600;}

/* ---------- Page content ---------- */
.page{padding:28px;flex:1;min-width:0;}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:22px;flex-wrap:wrap;}
.page-title{font-size:30px;font-weight:800;color:var(--text-primary);}
/* Dashboard's "Good Morning, Name" greeting reuses .page-title but reads
   better a size down — it's a welcome line, not a section heading. */
.greeting-title{font-size:23px;}
.page-sub{font-size:14px;color:var(--text-secondary);margin-top:4px;}

/* Utility: two-column layout that stacks to one column on narrower screens */
.two-col-responsive{display:grid;grid-template-columns:1.4fr 1fr;gap:18px;}

/* ---------- Mobile nav toggle + scrim ---------- */
.menu-toggle{
  display:none;width:38px;height:38px;border-radius:10px;border:1px solid var(--border);
  background:var(--bg-alt);align-items:center;justify-content:center;color:var(--text-secondary);flex:none;
}
.sidebar-scrim{
  display:none;position:fixed;inset:0;background:rgba(10,10,20,.5);z-index:40;
}
.sidebar-scrim.open{display:block;}

.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 18px;border-radius:10px;font-weight:700;font-size:13.5px;border:none;
}
.btn-primary{background:linear-gradient(135deg, var(--indigo), var(--violet));color:#fff;box-shadow:0 8px 20px rgba(79,70,229,.3);}
.btn-ghost{background:var(--surface);border:1px solid var(--border);color:var(--text-primary);}
.btn:disabled{opacity:.55;cursor:not-allowed;}

.select-field{
  padding:9px 30px 9px 12px;border-radius:9px;border:1px solid var(--border);
  background:var(--bg-alt) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none"><path d="m6 9 6 6 6-6" stroke="%236B7280" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat right 10px center;
  color:var(--text-primary);font-size:13px;font-weight:600;font-family:var(--font-body);appearance:none;
}
.select-field:focus{outline:none;border-color:var(--indigo-light);}

.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);}

/* dim overlay for modals */
.overlay{
  position:fixed;inset:0;background:rgba(15,13,30,.45);
  display:none;align-items:center;justify-content:center;z-index:100;
  backdrop-filter: blur(2px);
}
.overlay.open{display:flex;}

@media (max-width: 900px){
  /* The nav list (CRM/HRMS folders, Finance, Team & Admin — all expandable)
     can now be taller than the screen, so the fixed sidebar needs its own
     scroll; overscroll-behavior:contain stops a scroll that hits the top/
     bottom of that list from "spilling over" into the page behind it — the
     page itself is separately locked via .scroll-locked (see js/layout.js
     openSidebar()/closeSidebar()) while the sidebar is open. */
  .sidebar{
    position:fixed;left:-280px;top:0;z-index:50;transition:left .2s ease;box-shadow:var(--shadow-lg);
    height:100vh;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  }
  .sidebar.open{left:0;}
  .app-shell{flex-direction:column;}
  .menu-toggle{display:flex;}
  .sidebar-close{display:flex;}
  .page{padding:18px;}
  .page-title{font-size:24px;}
  .greeting-title{font-size:19px;}
  .topbar{padding:12px 16px;gap:10px;}
  .two-col-responsive{grid-template-columns:1fr;}
}

@media (max-width: 600px){
  .page{padding:14px;}
  .page-title{font-size:21px;}
  .greeting-title{font-size:18px;}
  .topbar{padding:10px 12px;}
  .digital-clock{align-items:flex-start;}
  .search-wrap{flex-basis:100%;order:3;max-width:none;}
  .topbar-spacer{gap:8px;}
  .stat-grid{grid-template-columns:1fr 1fr;}
}

@media (max-width: 420px){
  .stat-grid{grid-template-columns:1fr;}
  .chip-btn span{display:none;}
}