/* ==========================================================================
   OrbitHR — Design System
   A modern, warm-neutral SaaS look inspired by contemporary HCM products.
   ========================================================================== */

:root{
  --brand-50:#f2f0ff;
  --brand-100:#e4e0ff;
  --brand-300:#b4a5ff;
  --brand-500:#6c4cf1;
  --brand-600:#5a37e8;
  --brand-700:#4926c4;
  --accent-teal:#0ea5a3;
  --accent-amber:#f59e0b;
  --accent-rose:#f43f5e;

  --ink-900:#14121f;
  --ink-700:#3c3856;
  --ink-500:#6b6685;
  --ink-300:#a7a2c0;
  --ink-100:#e9e6f5;

  --surface-0:#ffffff;
  --surface-50:#f7f6fc;
  --surface-100:#f0eefb;
  --surface-200:#e6e3f6;

  --success:#12b76a;
  --success-bg:#e7f9f0;
  --info:#2d7dfb;
  --info-bg:#e8f0ff;
  --warning:#f59e0b;
  --warning-bg:#fef3e2;
  --danger:#f0384f;
  --danger-bg:#fde9ec;
  --muted:#8b869e;
  --muted-bg:#eeedf5;
  --purple:#8b5cf6;
  --purple-bg:#f1ecff;

  --radius-sm:8px;
  --radius-md:14px;
  --radius-lg:20px;
  --shadow-sm:0 1px 2px rgba(20,18,31,.06);
  --shadow-md:0 8px 24px -8px rgba(76,54,178,.18);
  --shadow-lg:0 20px 45px -15px rgba(58,38,150,.28);
  --sidebar-w:264px;
  --sidebar-w-collapsed:80px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  background:var(--surface-50);
  color:var(--ink-900);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
ul{list-style:none;margin:0;padding:0}
img{max-width:100%}
button{font-family:inherit}

/* ---------- Motion system ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
}
@keyframes fadeSlideUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes popIn{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes spin{to{transform:rotate(360deg)}}

/* Every full page load gets a gentle entrance; content pieces stagger in. */
.content{animation:fadeSlideUp .45s cubic-bezier(.16,1,.3,1) backwards}
.content > *{animation:fadeSlideUp .5s cubic-bezier(.16,1,.3,1) backwards}
.content > *:nth-child(1){animation-delay:.02s}
.content > *:nth-child(2){animation-delay:.06s}
.content > *:nth-child(3){animation-delay:.10s}
.content > *:nth-child(4){animation-delay:.14s}
.content > *:nth-child(5){animation-delay:.18s}
.content > *:nth-child(n+6){animation-delay:.20s}
.stat-grid .stat-card,.grid-3 > *,.grid-2 > *{animation:fadeSlideUp .45s cubic-bezier(.16,1,.3,1) backwards}
.stat-grid .stat-card:nth-child(1){animation-delay:.04s}
.stat-grid .stat-card:nth-child(2){animation-delay:.09s}
.stat-grid .stat-card:nth-child(3){animation-delay:.14s}
.stat-grid .stat-card:nth-child(4){animation-delay:.19s}
table.table tbody tr{animation:fadeIn .35s ease backwards}
/* Sidebar and topbar are persistent app chrome, not per-page content — this
   is a multi-page app with a full reload on every navigation, so animating
   them here meant the dark sidebar visibly flashed in on every single click.
   Only .content (the part that actually changes) gets an entrance animation;
   the shell around it now renders instantly, the way persistent nav should. */

/* ---------- Auth / Login screen ---------- */
.auth-wrap{
  min-height:100vh;
  display:grid;
  grid-template-columns:1fr 1fr;
}
@media (max-width:900px){ .auth-wrap{grid-template-columns:1fr} .auth-visual{display:none} }

.auth-visual{
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.18), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(255,255,255,.12), transparent 45%),
    linear-gradient(135deg,var(--brand-600),var(--brand-700) 60%, #2c1a86);
  color:#fff;
  padding:60px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  animation:fadeIn .6s ease backwards;
}
.auth-visual h1{font-size:2.4rem;line-height:1.2;font-weight:800;margin:0 0 12px;animation:fadeSlideUp .6s cubic-bezier(.16,1,.3,1) .1s backwards}
.auth-visual p{opacity:.85;font-size:1.05rem;max-width:420px;animation:fadeSlideUp .6s cubic-bezier(.16,1,.3,1) .18s backwards}
.auth-stats{display:flex;gap:36px;margin-top:40px;animation:fadeSlideUp .6s cubic-bezier(.16,1,.3,1) .26s backwards}
.auth-stats div b{display:block;font-size:1.6rem;font-weight:800}
.auth-stats div span{opacity:.8;font-size:.85rem}
.auth-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.14);
  padding:8px 16px;border-radius:999px;font-size:.85rem;font-weight:600;width:fit-content;animation:fadeSlideUp .5s cubic-bezier(.16,1,.3,1) backwards}

.auth-form-side{display:flex;align-items:center;justify-content:center;padding:40px}
.auth-card{width:100%;max-width:400px;animation:popIn .55s cubic-bezier(.16,1,.3,1) .05s backwards}
.auth-card .logo{display:flex;align-items:center;gap:10px;margin-bottom:32px;font-weight:800;font-size:1.3rem}
.auth-card .logo .mark{
  width:38px;height:38px;border-radius:11px;
  background:linear-gradient(135deg,var(--brand-500),var(--accent-teal));
  display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;
}
.auth-card h2{font-size:1.6rem;margin:0 0 6px;font-weight:800}
.auth-card p.sub{color:var(--ink-500);margin:0 0 28px}

.form-group{margin-bottom:18px}
.form-group label{display:block;font-size:.85rem;font-weight:600;color:var(--ink-700);margin-bottom:6px}
.form-control, select.form-control, textarea.form-control{
  width:100%;padding:12px 14px;border-radius:var(--radius-sm);
  border:1.5px solid var(--surface-200);background:var(--surface-0);
  font-size:.95rem;color:var(--ink-900);transition:border-color .15s, box-shadow .15s;
}
.form-control:focus{outline:none;border-color:var(--brand-500);box-shadow:0 0 0 4px var(--brand-100)}
textarea.form-control{resize:vertical;min-height:90px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-row.cols-3{grid-template-columns:1fr 1fr 1fr}
@media (max-width:700px){.form-row, .form-row.cols-3{grid-template-columns:1fr}}

/* Password show/hide toggle */
.password-field{position:relative}
.password-field .form-control{padding-right:44px}
.password-toggle{
  position:absolute;right:4px;top:50%;transform:translateY(-50%);
  width:36px;height:36px;border:none;background:transparent;border-radius:8px;
  display:flex;align-items:center;justify-content:center;color:var(--ink-300);cursor:pointer;
  transition:color .15s ease, background .15s ease;
}
.password-toggle:hover{color:var(--brand-600);background:var(--surface-100)}
.password-toggle:active{transform:translateY(-50%) scale(.92)}

/* Remember-me checkbox */
.form-check-row{display:flex;align-items:center;justify-content:space-between;margin:-6px 0 20px}
.check-remember{display:flex;align-items:center;gap:9px;font-size:.85rem;font-weight:600;color:var(--ink-700);cursor:pointer;user-select:none}
.check-remember input{position:absolute;opacity:0;width:0;height:0}
.check-box{
  width:18px;height:18px;border-radius:6px;border:1.5px solid var(--surface-200);background:var(--surface-0);
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;transition:background .15s ease,border-color .15s ease,transform .1s ease;
}
.check-box svg{opacity:0;transform:scale(.5);transition:opacity .12s ease,transform .12s ease}
.check-remember input:checked + .check-box{background:linear-gradient(135deg,var(--brand-500),var(--brand-600));border-color:var(--brand-600)}
.check-remember input:checked + .check-box svg{opacity:1;transform:scale(1)}
.check-remember input:focus-visible + .check-box{box-shadow:0 0 0 4px var(--brand-100)}
.check-remember:active .check-box{transform:scale(.9)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 20px;border-radius:var(--radius-sm);font-weight:700;font-size:.9rem;
  border:none;cursor:pointer;position:relative;
  transition:transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.98)}
.btn-primary{background:linear-gradient(135deg,var(--brand-500),var(--brand-600));color:#fff;box-shadow:var(--shadow-md)}
.btn-primary:hover{background:linear-gradient(135deg,var(--brand-600),var(--brand-700));box-shadow:0 12px 28px -10px rgba(76,54,178,.45)}
.btn-block{width:100%}
.btn-outline{background:var(--surface-0);border:1.5px solid var(--surface-200);color:var(--ink-700)}
.btn-outline:hover{border-color:var(--brand-300);color:var(--brand-600);box-shadow:var(--shadow-sm)}
.btn-sm{padding:7px 14px;font-size:.8rem;border-radius:8px}
.btn-danger{background:var(--danger);color:#fff}
.btn-danger:hover{background:#d92c44;box-shadow:0 10px 22px -10px rgba(240,56,79,.5)}
.btn-success{background:var(--success);color:#fff}
.btn-success:hover{background:#0da05c;box-shadow:0 10px 22px -10px rgba(18,183,106,.5)}
.btn-ghost{background:transparent;color:var(--ink-500)}
.btn-ghost:hover{background:var(--surface-100);color:var(--ink-900);transform:translateY(-1px)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none !important}

.alert{display:flex;align-items:flex-start;gap:10px;padding:12px 16px;border-radius:var(--radius-sm);font-size:.88rem;margin-bottom:18px;font-weight:500;
  overflow:hidden;max-height:400px;transition:max-height .35s ease,opacity .3s ease,padding .35s ease,margin .35s ease}
.alert.alert-closing{max-height:0;opacity:0;padding-top:0;padding-bottom:0;margin-bottom:0;border-width:0}
.alert-body{flex:1;min-width:0}
.alert-close{flex:0 0 auto;background:transparent;border:0;padding:2px 4px;margin:-2px -4px -2px 0;cursor:pointer;
  font-size:1rem;line-height:1;color:currentColor;opacity:.55;border-radius:6px;transition:opacity .15s,background .15s}
.alert-close:hover{opacity:1;background:rgba(0,0,0,.06)}
.alert-close:focus-visible{outline:2px solid currentColor;outline-offset:1px}
.alert-danger{background:var(--danger-bg);color:#a5182f}
.alert-success{background:var(--success-bg);color:#087a48}
.alert-info{background:var(--info-bg);color:#1451ad}
.demo-creds{margin-top:24px;padding:14px 16px;background:var(--surface-100);border-radius:var(--radius-sm);font-size:.8rem;color:var(--ink-500)}
.demo-creds b{color:var(--ink-700)}

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

.sidebar{
  width:var(--sidebar-w);flex:0 0 var(--sidebar-w);
  background:linear-gradient(180deg,#1c1436,#150f2c);
  color:#e7e3fb;position:sticky;top:0;height:100vh;z-index:30;
  display:flex;flex-direction:column;overflow:visible;
  transition:width .25s cubic-bezier(.4,0,.2,1),flex-basis .25s cubic-bezier(.4,0,.2,1);
}
.sidebar-head{flex:0 0 auto;padding:22px 16px 4px}
.sidebar-scroll{
  flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;padding:0 16px 22px;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.16) transparent;
}
.sidebar-scroll::-webkit-scrollbar{width:6px}
.sidebar-scroll::-webkit-scrollbar-track{background:transparent}
.sidebar-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border-radius:10px}
.sidebar-scroll::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.3)}
.sidebar .logo{display:flex;align-items:center;gap:10px;padding:6px 10px 22px;font-weight:800;font-size:1.15rem;color:#fff;transition:justify-content .2s ease}
.sidebar .logo .mark{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--brand-500),var(--accent-teal));display:flex;align-items:center;justify-content:center;font-weight:800;flex:0 0 auto;font-size:.95rem}
.sidebar .logo .logo-text{white-space:nowrap;overflow:hidden}
.nav-section-title{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:#7b74a3;margin:18px 12px 8px;font-weight:700;white-space:nowrap;overflow:hidden}

/* Collapsible section groups — click a section title to expand/collapse
   it; state persists per-browser and the section holding the current
   page is always forced open regardless of what was saved (see app.js). */
.nav-group-label{
  display:flex;align-items:center;justify-content:space-between;
  margin:16px 4px 6px;padding:6px 8px;border-radius:8px;
  font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;font-weight:700;
  color:#7b74a3;cursor:pointer;user-select:none;
  transition:color .15s ease,background .15s ease;
}
.nav-group-label:hover{color:#c9c4e8;background:rgba(255,255,255,.05)}
.nav-group-chevron{font-size:.65rem;transition:transform .25s cubic-bezier(.4,0,.2,1);flex:0 0 auto}
.nav-group-label.collapsed .nav-group-chevron{transform:rotate(-90deg)}
.nav-group-items{list-style:none;overflow:hidden;max-height:1200px;transition:max-height .32s cubic-bezier(.4,0,.2,1)}
.nav-group-items.collapsed{max-height:0}
/* Applied for one frame on load only, while JS restores each group's
   saved open/closed state — without this, restoring a saved-open group
   plays its .32s expand transition on every page load, which pushes
   everything below it (including the active link) further down the
   sidebar mid-animation. Real user clicks never get this class, so the
   toggle still animates normally after the page has settled. */
.nav-anim-off .nav-group-items{transition:none !important}

.nav-link{
  display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;
  color:#c9c4e8;font-size:.88rem;font-weight:600;margin-bottom:2px;
  transition:background .16s ease,color .16s ease,transform .16s ease,box-shadow .2s ease,justify-content .2s ease,padding .2s ease;
  position:relative;
}
.nav-link .ic{width:20px;text-align:center;font-size:.92rem;flex:0 0 auto;transition:transform .18s cubic-bezier(.34,1.56,.64,1);opacity:.85}
.nav-link .label{white-space:nowrap;overflow:hidden}
.nav-link:hover{background:rgba(255,255,255,.07);color:#fff;transform:translateX(3px)}
.nav-link:hover .ic{transform:scale(1.12);opacity:1}
.nav-link.active{background:linear-gradient(135deg,var(--brand-500),var(--brand-600));color:#fff;box-shadow:0 6px 18px -6px rgba(108,76,241,.6)}
.nav-link.active .ic{opacity:1}
.nav-link.active::before{content:'';position:absolute;left:-4px;top:22%;bottom:22%;width:3px;border-radius:0 3px 3px 0;background:#fff}
.nav-badge{margin-left:auto;background:var(--accent-rose);color:#fff;font-size:.65rem;font-weight:800;padding:1px 7px;border-radius:999px}

/* Collapse/expand rail toggle */
.sidebar-toggle{
  position:absolute;top:24px;right:-15px;width:30px;height:30px;border-radius:50%;
  background:#fff;border:1.5px solid var(--surface-200);color:var(--brand-600);
  display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:70;padding:0;
  box-shadow:var(--shadow-md);transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s ease,background .2s ease;
}
.sidebar-toggle:hover{transform:scale(1.1);box-shadow:var(--shadow-lg);background:var(--brand-50)}
.sidebar-toggle:active{transform:scale(.94)}
.sidebar-toggle svg{transition:transform .3s cubic-bezier(.4,0,.2,1)}

@media (min-width:901px){
  html.sb-collapsed .sidebar{width:var(--sidebar-w-collapsed);flex-basis:var(--sidebar-w-collapsed)}
  html.sb-collapsed .sidebar .logo{justify-content:center}
  html.sb-collapsed .sidebar .logo .logo-text{display:none}
  html.sb-collapsed .nav-section-title{display:none}
  html.sb-collapsed .nav-group-label{justify-content:center;padding:12px 0;cursor:default}
  html.sb-collapsed .nav-group-label span:first-child,
  html.sb-collapsed .nav-group-chevron{display:none}
  html.sb-collapsed .nav-group-items.collapsed{max-height:none}
  html.sb-collapsed .nav-link{justify-content:center;padding:11px 0;gap:0}
  html.sb-collapsed .nav-link .label{display:none}
  html.sb-collapsed .nav-link:hover{transform:none}
  html.sb-collapsed .sidebar-toggle svg{transform:rotate(180deg)}
}

/* Tooltip shown next to an icon-only nav link when the sidebar is
   collapsed — a single element appended to <body> and positioned via JS
   (see app.js), not CSS ::after, because .sidebar-scroll needs
   overflow-x:hidden for its own scrolling and would otherwise clip a
   tooltip positioned outside the sidebar's width. */
#sidebarTooltip{
  position:fixed;background:#1c1436;color:#fff;font-size:.76rem;font-weight:600;
  padding:6px 11px;border-radius:7px;white-space:nowrap;box-shadow:var(--shadow-lg);
  z-index:200;pointer-events:none;opacity:0;transition:opacity .12s ease;
}
#sidebarTooltip.show{opacity:1}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 28px;background:var(--surface-0);border-bottom:1px solid var(--surface-200);
  position:sticky;top:0;z-index:20;
}
.topbar h1{font-size:1.15rem;margin:0;font-weight:800}
.topbar .breadcrumb{font-size:.8rem;color:var(--ink-500);margin-top:2px}
.topbar-right{display:flex;align-items:center;gap:18px}
.icon-btn{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:var(--surface-100);color:var(--ink-700);position:relative;border:none;cursor:pointer;font-size:1rem;transition:background .15s ease,transform .15s cubic-bezier(.34,1.56,.64,1),color .15s ease}
.icon-btn:hover{background:var(--brand-100);color:var(--brand-600);transform:translateY(-1px) scale(1.05)}
.icon-btn:active{transform:scale(.94)}
.icon-btn .dot{position:absolute;top:6px;right:7px;width:8px;height:8px;background:var(--accent-rose);border-radius:50%;border:2px solid var(--surface-0)}
.user-chip{display:flex;align-items:center;gap:10px;padding:6px 10px 6px 6px;border-radius:999px;background:var(--surface-100);cursor:pointer;transition:background .15s ease,transform .15s ease}
.user-chip:hover{background:var(--surface-200);transform:translateY(-1px)}
.avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--brand-500),var(--accent-teal));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.8rem;flex:0 0 auto}
.avatar.lg{width:64px;height:64px;font-size:1.3rem}
.avatar.sm{width:28px;height:28px;font-size:.65rem}
.user-chip .name{font-size:.82rem;font-weight:700;line-height:1.1}
.user-chip .role{font-size:.7rem;color:var(--ink-500);text-transform:capitalize}

.content{padding:26px 28px 60px;max-width:1400px;width:100%;margin:0 auto}

/* ---------- Cards / Widgets ---------- */
.card{background:var(--surface-0);border-radius:var(--radius-md);border:1px solid var(--surface-200);box-shadow:var(--shadow-sm)}
.card-body{padding:22px}
.card-header{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--surface-200)}
.card-header h3{margin:0;font-size:1rem;font-weight:800}
.card-header .sub{font-size:.78rem;color:var(--ink-500);margin-top:2px}

.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:24px}
@media (max-width:1100px){.stat-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.stat-grid{grid-template-columns:1fr}}

/* Dashboard chart cards */
.charts-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:18px;margin-bottom:22px}
@media (max-width:1000px){.charts-grid{grid-template-columns:1fr}}
.chart-card .card-header h3{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.chart-card .card-header h3 i{font-size:.85rem;color:var(--brand-500)}
.chart-wrap{position:relative;height:260px}
.stat-card{background:var(--surface-0);border-radius:var(--radius-md);border:1px solid var(--surface-200);padding:20px 22px;box-shadow:var(--shadow-sm);position:relative;overflow:hidden;transition:transform .22s cubic-bezier(.34,1.56,.64,1),box-shadow .22s ease,border-color .22s ease}
.stat-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--brand-100)}
.stat-card .ic{width:42px;height:42px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:1.15rem;margin-bottom:14px}
.stat-card .val{font-size:1.7rem;font-weight:800;line-height:1}
.stat-card .lbl{color:var(--ink-500);font-size:.82rem;margin-top:6px;font-weight:600}
.stat-card .trend{font-size:.75rem;font-weight:700;margin-top:10px;display:inline-flex;align-items:center;gap:4px}
.trend.up{color:var(--success)}
.trend.down{color:var(--danger)}
.ic-brand{background:var(--brand-100);color:var(--brand-600)}
.ic-teal{background:#dcf7f4;color:var(--accent-teal)}
.ic-amber{background:var(--warning-bg);color:var(--warning)}
.ic-rose{background:var(--danger-bg);color:var(--accent-rose)}

.grid-2{display:grid;grid-template-columns:2fr 1fr;gap:22px}
@media (max-width:1000px){.grid-2{grid-template-columns:1fr}}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:1000px){.grid-3{grid-template-columns:1fr}}

/* ---------- Tables ---------- */
.table-wrap{overflow-x:auto}

/* Attendance selfie thumbnails + hover-zoom preview. The preview overlay
   uses position:fixed (not absolute) specifically so it always escapes
   .table-wrap's overflow-x:auto — an absolutely-positioned popup would get
   silently clipped by the table's own scroll container. */
.selfie-thumb{display:inline-block;cursor:zoom-in;line-height:0}
.selfie-thumb .thumb{
  width:34px;height:34px;border-radius:9px;object-fit:cover;
  border:2px solid var(--surface-200);transition:transform .15s ease,border-color .15s ease;
}
.selfie-thumb:hover .thumb{transform:scale(1.08);border-color:var(--brand-300)}
.selfie-emoji{font-size:1.25rem;cursor:default;opacity:.7}

#selfiePreviewOverlay{
  position:fixed;z-index:500;display:none;pointer-events:none;
  background:#fff;padding:8px;border-radius:14px;box-shadow:var(--shadow-lg);
  border:1px solid var(--surface-200);
  animation:popIn .15s cubic-bezier(.34,1.56,.64,1);
}
#selfiePreviewOverlay.show{display:block}
#selfiePreviewOverlay img{width:220px;height:220px;object-fit:cover;border-radius:9px;display:block}

table.table{width:100%;border-collapse:collapse;font-size:.87rem}
table.table th{
  text-align:left;padding:12px 16px;background:var(--surface-50);color:var(--ink-500);
  font-weight:700;font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;
  border-bottom:1px solid var(--surface-200);white-space:nowrap;
}
table.table td{padding:13px 16px;border-bottom:1px solid var(--surface-100);vertical-align:middle}
table.table tr:last-child td{border-bottom:none}
table.table tbody tr:hover{background:var(--surface-50)}

/* Roster table: a bolder top border marks where a new date's block of
   rows begins (the date cell itself is only printed on that first row —
   see roster-date-start on the <tr> too — so consecutive same-date rows
   read as one visual group instead of repeating the date over and over),
   and weekend rows get a faint tint to stand out at a glance. */
.roster-table tr.roster-date-start td{border-top:2px solid var(--surface-200)}
.roster-table tr.roster-date-start:first-child td{border-top:none}
.roster-table tr.roster-weekend{background:#fffaf0}
.roster-table tr.roster-weekend:hover{background:#fef3e2}

.cell-name{display:flex;align-items:center;gap:10px}
.cell-name .meta{display:flex;flex-direction:column}
.cell-name .meta b{font-size:.86rem}
.cell-name .meta span{font-size:.75rem;color:var(--ink-500)}

.badge{display:inline-block;padding:4px 11px;border-radius:999px;font-size:.72rem;font-weight:700}
.badge-success{background:var(--success-bg);color:#0a7a4d}
.badge-info{background:var(--info-bg);color:#1451ad}
.badge-warning{background:var(--warning-bg);color:#a25c05}
.badge-danger{background:var(--danger-bg);color:#b0102a}
.badge-muted{background:var(--muted-bg);color:#5f5a78}
.badge-purple{background:var(--purple-bg);color:#6633d6}

.pill-tabs{display:flex;gap:6px;background:var(--surface-100);padding:5px;border-radius:11px;width:fit-content;margin-bottom:20px;flex-wrap:wrap}
.pill-tabs a{padding:8px 16px;border-radius:8px;font-size:.82rem;font-weight:700;color:var(--ink-500);transition:background .18s ease,color .18s ease,box-shadow .18s ease}
.pill-tabs a:hover{color:var(--brand-600)}
.pill-tabs a.active{background:var(--surface-0);color:var(--brand-600);box-shadow:var(--shadow-sm)}

.toolbar{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin-bottom:18px;padding:14px 18px;background:var(--surface-0);
  border:1px solid var(--surface-200);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);
}
.toolbar h3{margin:0}
.toolbar .btn-sm{transition:transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .2s ease,background .2s ease,border-color .2s ease,color .2s ease}
.search-box{position:relative}
.search-box input{padding-left:36px;min-width:260px}
.search-box .ic{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--ink-300)}

.progress{height:8px;background:var(--surface-200);border-radius:99px;overflow:hidden}
.progress > div{height:100%;background:linear-gradient(90deg,var(--brand-500),var(--accent-teal));border-radius:99px}

.empty-state{text-align:center;padding:50px 20px;color:var(--ink-500)}
.empty-state .ic{font-size:2.4rem;margin-bottom:10px}

.divider{height:1px;background:var(--surface-200);margin:18px 0}

.chip{display:inline-flex;align-items:center;gap:6px;background:var(--surface-100);padding:5px 12px;border-radius:999px;font-size:.78rem;font-weight:600;color:var(--ink-700)}

/* ---------- "Cool page" utilities: animated stat chips + fade-in cards ----------
   Reusable building blocks for giving a page the same polished feel as
   the Shifts & Roster page — a row of colored-accent stat chips that
   animate in on load, plus cards/filter bars that gently fade+slide up
   instead of just popping into place. Opt-in per element (add the class),
   doesn't change anything on pages that don't use it. */
.stat-chip-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-bottom:18px}
.stat-chip{
  background:var(--surface-0);border-radius:14px;padding:15px 14px;text-align:center;
  box-shadow:var(--shadow-sm);border-top:3px solid var(--chip-color,var(--surface-200));
  transition:transform .2s ease,box-shadow .2s ease;
  opacity:0;transform:translateY(12px);animation:chipIn .4s cubic-bezier(.16,1,.3,1) forwards;
}
.stat-chip:nth-child(1){animation-delay:.02s} .stat-chip:nth-child(2){animation-delay:.06s}
.stat-chip:nth-child(3){animation-delay:.1s} .stat-chip:nth-child(4){animation-delay:.14s}
.stat-chip:nth-child(5){animation-delay:.18s} .stat-chip:nth-child(6){animation-delay:.22s}
.stat-chip:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.stat-chip .cv{font-size:1.6rem;font-weight:800;color:var(--chip-color,var(--ink-900));line-height:1}
.stat-chip .cl{font-size:.68rem;font-weight:700;color:var(--ink-500);margin-top:6px;text-transform:uppercase;letter-spacing:.05em}
@keyframes chipIn{to{opacity:1;transform:translateY(0)}}

.fade-card{opacity:0;transform:translateY(10px);animation:fadeCardIn .4s cubic-bezier(.16,1,.3,1) forwards}
.fade-card.d1{animation-delay:.05s} .fade-card.d2{animation-delay:.1s} .fade-card.d3{animation-delay:.15s}
@keyframes fadeCardIn{to{opacity:1;transform:translateY(0)}}

@media (prefers-reduced-motion:reduce){
  .stat-chip,.fade-card{animation:none;opacity:1;transform:none}
}

.kv{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px dashed var(--surface-200);font-size:.87rem}
.kv b{color:var(--ink-500);font-weight:600}
.kv span{font-weight:700}

.modal-bg{
  position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:100;padding:20px;
  background:rgba(20,18,31,0);visibility:hidden;opacity:0;pointer-events:none;
  transition:opacity .25s ease, background-color .25s ease, visibility 0s linear .25s;
  animation:none;transform:none;
}
.modal-bg.show{
  background:rgba(15,23,42,.55);visibility:visible;opacity:1;pointer-events:auto;
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  transition:opacity .25s ease, background-color .25s ease, visibility 0s linear 0s;
}
.modal-box{
  background:#fff;border-radius:20px;max-width:520px;width:100%;max-height:92vh;overflow-y:auto;
  box-shadow:0 24px 60px rgba(15,23,42,.22);
  transform:scale(.88) translateY(16px);opacity:0;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1), opacity .22s ease;
}
.modal-bg.show .modal-box{transform:scale(1) translateY(0);opacity:1}
.modal-box .card-header{position:sticky;top:0;background:#fff;z-index:1;padding:22px 26px 18px;border-radius:20px 20px 0 0}
.modal-box .card-header h3{font-size:1.25rem}
.modal-box .card-body{padding:22px 26px 26px}
.modal-box [data-modal-close]{
  width:34px !important;height:34px !important;padding:0 !important;flex:0 0 auto;
  background:var(--surface-100) !important;border-radius:9px !important;color:var(--ink-500) !important;
  display:flex;align-items:center;justify-content:center;font-size:1rem;
  transition:background .15s ease,color .15s ease;
}
.modal-box [data-modal-close]:hover{background:var(--surface-200) !important;color:var(--ink-900) !important;transform:none}
body.modal-open{overflow:hidden}

.timeline{border-left:2px solid var(--surface-200);margin-left:8px;padding-left:20px}
.timeline-item{position:relative;padding-bottom:20px}
.timeline-item::before{content:'';position:absolute;left:-26px;top:2px;width:10px;height:10px;border-radius:50%;background:var(--brand-500)}

.calendar-mini{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center;font-size:.75rem}
.calendar-mini span{padding:6px 0;color:var(--ink-500);font-weight:700}
.calendar-mini .day{padding:8px 0;border-radius:8px;font-weight:600;color:var(--ink-700)}
.calendar-mini .day.today{background:var(--brand-500);color:#fff}
.calendar-mini .day.holiday{background:var(--danger-bg);color:var(--danger)}

.login-hint{font-size:.78rem;color:var(--ink-500);text-align:center;margin-top:18px}

.sidebar-close{display:none}
body.no-scroll{overflow:hidden}

@media (max-width:900px){
  .sidebar{position:fixed;left:-280px;z-index:60;transition:left .25s cubic-bezier(.4,0,.2,1)}
  .sidebar.open{left:0;box-shadow:var(--shadow-lg)}
  .sidebar-toggle{display:none}
  html.sb-collapsed .sidebar{width:var(--sidebar-w);flex-basis:var(--sidebar-w)}
  .sidebar-head{position:relative}
  .sidebar-close{
    display:flex;align-items:center;justify-content:center;position:absolute;top:18px;right:14px;
    width:32px;height:32px;border-radius:9px;background:rgba(255,255,255,.08);border:none;
    color:#fff;font-size:1rem;cursor:pointer;transition:background .15s ease,transform .15s ease;
  }
  .sidebar-close:hover{background:rgba(255,255,255,.16)}
  .sidebar-close:active{transform:scale(.92)}
  .sidebar-backdrop{
    position:fixed;inset:0;z-index:55;background:rgba(20,18,31,0);
    visibility:hidden;opacity:0;pointer-events:none;
    transition:opacity .25s ease,background-color .25s ease,visibility 0s linear .25s;
  }
  .sidebar-backdrop.show{
    background:rgba(20,18,31,.5);visibility:visible;opacity:1;pointer-events:auto;
    transition:opacity .25s ease,background-color .25s ease,visibility 0s linear 0s;
  }
  .content{padding:18px}
  .grid-2{grid-template-columns:1fr}
}
@media (min-width:901px){.sidebar-backdrop{display:none}}
.hamburger{display:none;background:none;border:none;font-size:1.3rem;cursor:pointer;color:var(--ink-700)}
@media (max-width:900px){.hamburger{display:block}}