:root{
  --sg-bg:#f4f6fb; --sg-sidebar:#16243a; --sg-sidebar-2:#1f3354;
  --sg-accent:#2f6df0; --sg-text:#1f2d3d; --sg-muted:#7a869a;
}
*{box-sizing:border-box}
body{background:var(--sg-bg);color:var(--sg-text);font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Naskh Arabic",sans-serif}

/* ---- shell ---- */
.sg-shell{display:flex;min-height:100vh}
.sg-sidebar{width:240px;background:linear-gradient(180deg,var(--sg-sidebar),var(--sg-sidebar-2));color:#cdd7e6;flex-shrink:0;position:sticky;top:0;height:100vh;overflow-y:auto}
.sg-brand{font-size:1.25rem;font-weight:700;color:#fff;padding:18px 20px;border-bottom:1px solid rgba(255,255,255,.08)}
.sg-brand i{color:var(--sg-accent)}
.sg-nav{padding:10px 0}
.sg-nav-item{display:flex;align-items:center;gap:12px;padding:11px 20px;color:#aab7c9;text-decoration:none;font-size:.92rem;border-inline-start:3px solid transparent}
.sg-nav-item:hover{background:rgba(255,255,255,.05);color:#fff}
.sg-nav-item.active{background:rgba(47,109,240,.15);color:#fff;border-inline-start-color:var(--sg-accent)}
.sg-nav-item i{font-size:1.05rem;width:20px;text-align:center}
.sg-main{flex:1;display:flex;flex-direction:column;min-width:0}
.sg-topbar{display:flex;align-items:center;gap:12px;background:#fff;padding:12px 22px;border-bottom:1px solid #e7ebf2;position:sticky;top:0;z-index:5}
.sg-topbar-title{font-weight:600}
.sg-content{padding:22px;flex:1}

/* ---- stat cards ---- */
.sg-stat{background:#fff;border-radius:14px;padding:16px;position:relative;overflow:hidden;box-shadow:0 1px 3px rgba(16,30,54,.06)}
.sg-stat i{font-size:1.6rem;opacity:.85}
.sg-stat-value{font-size:1.7rem;font-weight:700;line-height:1.1;margin-top:6px}
.sg-stat-label{color:var(--sg-muted);font-size:.8rem}
.sg-stat-primary i{color:#2f6df0}.sg-stat-info i{color:#0aa2c0}.sg-stat-success i{color:#1a9d56}
.sg-stat-danger i{color:#dc3545}.sg-stat-warning i{color:#d39e00}.sg-stat-secondary i{color:#6c757d}

/* ---- status badges ---- */
.sg-badge-present,.sg-badge-overtime{background:#d6f3e3;color:#0f7a45}
.sg-badge-late{background:#fff3cd;color:#8a6d00}
.sg-badge-absent{background:#fdd9dd;color:#b02a37}
.sg-badge-early_leave{background:#ffe5d0;color:#a35200}
.sg-badge-weekly_off,.sg-badge-holiday,.sg-badge-on_leave{background:#e2e8f0;color:#48566a}

.card{border:none;border-radius:14px;box-shadow:0 1px 3px rgba(16,30,54,.06)}
.card-header{background:#fff;border-bottom:1px solid #eef1f6;font-weight:600;border-radius:14px 14px 0 0!important}

/* ---- auth / punch ---- */
.sg-auth-body{display:flex;align-items:center;justify-content:center;min-height:100vh;background:linear-gradient(135deg,#16243a,#2f6df0)}
.sg-auth-wrap{width:100%;max-width:420px;padding:16px}
.sg-login-card,.sg-punch-card{background:#fff;border-radius:18px;padding:30px;box-shadow:0 18px 50px rgba(0,0,0,.25)}
.sg-login-logo{width:64px;height:64px;border-radius:50%;background:rgba(47,109,240,.12);color:#2f6df0;display:inline-flex;align-items:center;justify-content:center;font-size:1.8rem}
.sg-cam{width:100%;max-width:320px;border-radius:14px;background:#000;aspect-ratio:3/4;object-fit:cover}

@media (max-width:991px){
  .sg-sidebar{position:fixed;inset-inline-start:-240px;z-index:1050;transition:.2s}
  .sg-sidebar.open{inset-inline-start:0}
}

/* ---- instant search box ---- */
.sg-searchbox{position:relative;max-width:280px}
.sg-searchbox i{position:absolute;inset-inline-start:10px;top:50%;transform:translateY(-50%);color:var(--sg-muted);font-size:.85rem}
.sg-searchbox .sg-search{padding-inline-start:30px}