/*
 * erp-theme.css — Role-Based Design System v3.0
 * MAJOR UPGRADE: Immersive hero, responsive-first, role environments
 * Admin=Amber/Yellow, Supervisor=Burgundy/Red, Karyawan=Emerald/Green
 */

/* ===== GOOGLE FONTS + MATERIAL ICONS ===== */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,400;0,600;0,700;0,800;1,700;1,800&family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons+Round');

/* ===== AMBIENT ROLE BACKGROUNDS — Makes each role FEEL different ===== */
/*
  Strategy: page background gets subtle role-tinted ambient gradient
  Login page = invasive full-bleed photo (GREAT, keep as-is)
  Main dashboard = sidebar photo + big hero (GREAT, keep as-is)
  Branch pages = role-tinted bg + immersive page hero + role banner

  Admin  (Amber) = warm yellow-tinted, tension/alert mood
  Supervisor (Burgundy) = red-tinted, authority/command mood
  Karyawan   (Green) = green-tinted, energy/alive mood
*/

/* ===== ROOT TOKENS (default = admin) ===== */
:root {
  --p:#D97706; --pd:#78350F; --pa:#FCD34D; --ps:#92400E;
  --bg:#FFFBEB; --bg2:#FEF3C7; --sb:#0D0800;
  --gl:rgba(217,119,6,.35); --gl2:rgba(252,211,77,.18);
  --cb:#FEF3C7; --ct:#92400E;
  --bar:linear-gradient(90deg,#78350F,#D97706,#FCD34D);
  --sbw:260px;

  /* Admin hero: construction site overview, strategic bird-eye view */
  --ph:url('https://images.unsplash.com/photo-1504307651254-35680f356dfd?w=1600&q=90&fit=crop&auto=format');
  --ph2:url('https://images.unsplash.com/photo-1504307651254-35680f356dfd?w=800&q=80&fit=crop&auto=format');
  --ov:linear-gradient(145deg,rgba(13,8,0,.97) 0%,rgba(92,46,0,.88) 30%,rgba(180,83,9,.52) 62%,rgba(217,119,6,.15) 100%);
  --hero-label:"PUSAT KENDALI";
  --hero-title:"PERINGATAN\ADINI";
  --hero-sub:"Monitor semua indikator sebelum melewati batas kritis";
  --env-msg:"⚠️  Admin aktif — pantau, antisipasi, kendalikan";
  --env-color:#92400E;
  --env-bg:#FEF3C7;
  --env-border:#D97706;
}

/* ===== ADMIN — AMBER "PERINGATAN DINI" ===== */
[data-role="admin"] {
  --p:#D97706; --pd:#78350F; --pa:#FCD34D; --ps:#92400E;
  --bg:#FFFBEB; --bg2:#FEF3C7; --sb:#0D0800;
  --gl:rgba(217,119,6,.35); --gl2:rgba(252,211,77,.18);
  --cb:#FEF3C7; --ct:#92400E;
  --bar:linear-gradient(90deg,#78350F,#D97706,#FCD34D);
  --ph:url('https://images.unsplash.com/photo-1504307651254-35680f356dfd?w=1600&q=90&fit=crop&auto=format');
  --ph2:url('https://images.unsplash.com/photo-1504307651254-35680f356dfd?w=800&q=80&fit=crop&auto=format');
  --ov:linear-gradient(145deg,rgba(13,8,0,.97) 0%,rgba(92,46,0,.88) 30%,rgba(180,83,9,.52) 62%,rgba(217,119,6,.15) 100%);
}

/* ===== SUPERVISOR — BURGUNDY "PERINTAH TEGAS" ===== */
[data-role="supervisor"] {
  --p:#9B1C1C; --pd:#450A0A; --pa:#FCA5A5; --ps:#7F1D1D;
  --bg:#FFF5F5; --bg2:#FEE2E2; --sb:#0A0101;
  --gl:rgba(155,28,28,.4); --gl2:rgba(252,165,165,.15);
  --cb:#FEE2E2; --ct:#7F1D1D;
  --bar:linear-gradient(90deg,#450A0A,#9B1C1C,#EF4444);
  /* Site foreman commanding crew — authority, no-nonsense */
  --ph:url('https://images.unsplash.com/photo-1541888946425-d81bb19240f5?w=1600&q=90&fit=crop&auto=format');
  --ph2:url('https://images.unsplash.com/photo-1541888946425-d81bb19240f5?w=800&q=80&fit=crop&auto=format');
  --ov:linear-gradient(145deg,rgba(10,1,1,.98) 0%,rgba(127,29,29,.92) 32%,rgba(155,28,28,.58) 65%,rgba(239,68,68,.12) 100%);
}

/* ===== KARYAWAN — EMERALD GREEN "SIAP BEKERJA" ===== */
[data-role="karyawan"] {
  --p:#16A34A; --pd:#052E16; --pa:#86EFAC; --ps:#15803D;
  --bg:#F0FDF4; --bg2:#DCFCE7; --sb:#020D06;
  --gl:rgba(22,163,74,.32); --gl2:rgba(134,239,172,.14);
  --cb:#DCFCE7; --ct:#166534;
  --bar:linear-gradient(90deg,#052E16,#16A34A,#86EFAC);
  /* Active workers, alive, energetic, ready */
  --ph:url('https://images.unsplash.com/photo-1590486803833-1b5dc97544f9?w=1600&q=90&fit=crop&auto=format');
  --ph2:url('https://images.unsplash.com/photo-1590486803833-1b5dc97544f9?w=800&q=80&fit=crop&auto=format');
  --ov:linear-gradient(145deg,rgba(2,13,6,.97) 0%,rgba(5,46,22,.86) 30%,rgba(22,163,74,.5) 64%,rgba(134,239,172,.12) 100%);
}

/* ===== BASE RESET ===== */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { font-family:'Space Grotesk',sans-serif; background:var(--bg); color:#111; min-height:100vh; display:flex; transition:background .4s ease; }

/* ===== AMBIENT PAGE ATMOSPHERE — role-tinted body bg =====
   So even the blank areas between cards feel "owned" by the role.
   This is what makes login feel "alive" — the bg IS the environment.
   Same philosophy applied to branch pages via subtle gradient noise.
*/
[data-role="admin"] body,
body[data-role="admin"] {
  background:
    radial-gradient(ellipse 80% 60% at 50% -10%, rgba(252,211,77,.14) 0%, transparent 65%),
    radial-gradient(ellipse 40% 30% at 100% 80%, rgba(217,119,6,.08) 0%, transparent 60%),
    #FFFBEB;
}
[data-role="supervisor"] body,
body[data-role="supervisor"] {
  background:
    radial-gradient(ellipse 80% 60% at 50% -10%, rgba(252,165,165,.16) 0%, transparent 65%),
    radial-gradient(ellipse 40% 30% at 0% 80%, rgba(153,27,27,.07) 0%, transparent 60%),
    #FFF5F5;
}
[data-role="karyawan"] body,
body[data-role="karyawan"] {
  background:
    radial-gradient(ellipse 80% 60% at 50% -10%, rgba(134,239,172,.18) 0%, transparent 65%),
    radial-gradient(ellipse 40% 30% at 100% 80%, rgba(22,163,74,.07) 0%, transparent 60%),
    #F0FDF4;
}

/* Ambient background on html element (works better for most pages) */
html[data-role="admin"] { background:#FFFBEB; }
html[data-role="supervisor"] { background:#FFF5F5; }
html[data-role="karyawan"] { background:#F0FDF4; }

/* ===== SIDEBAR ===== */
.sidebar { width:var(--sbw); background:var(--sb); height:100vh; position:fixed; left:0; top:0; display:flex; flex-direction:column; z-index:200; transition:transform .3s cubic-bezier(.4,0,.2,1); border-right:1px solid rgba(255,255,255,.04); }

/* Ensure sidebar hidden by default on mobile — applies to BOTH .sidebar and .erp-sidebar */
@media (max-width:768px) {
  .sidebar { transform:translateX(-100%); }
  .sidebar.open { transform:translateX(0); }
}
.sb-hero { height:170px; position:relative; overflow:hidden; flex-shrink:0; }
.sb-photo { position:absolute; inset:0; background-image:var(--ph2); background-size:cover; background-position:center 25%; opacity:.5; filter:saturate(.6) brightness(.75); transition:opacity .5s,transform 8s ease; }
.sb-hero:hover .sb-photo { opacity:.8; transform:scale(1.04); }
.sb-photo-ov { position:absolute; inset:0; background:linear-gradient(180deg,transparent 0%,var(--sb) 100%); }
.sb-hero::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--bar); z-index:3; }
.sb-brand { position:absolute; bottom:0; left:0; right:0; z-index:2; padding:10px 14px; display:flex; align-items:center; gap:9px; }
.sb-icon { width:36px; height:36px; background:var(--p); border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:18px; box-shadow:0 4px 12px var(--gl); flex-shrink:0; }
.sb-name { font-family:'Barlow Condensed',sans-serif; font-size:15px; font-weight:800; color:#fff; text-transform:uppercase; letter-spacing:.5px; }
.sb-sub { font-size:9px; color:rgba(255,255,255,.38); letter-spacing:1.2px; text-transform:uppercase; }
.role-pill { margin:0 10px 6px; padding:6px 12px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07); border-left:3px solid var(--p); border-radius:7px; display:flex; align-items:center; gap:8px; }
.rp-dot { width:7px; height:7px; border-radius:50%; background:var(--pa); animation:pulse 2.5s ease-in-out infinite; flex-shrink:0; }
@keyframes pulse { 0%,100%{opacity:1;box-shadow:0 0 0 0 var(--pa);}50%{opacity:.5;box-shadow:0 0 0 4px transparent;} }
.rp-text { font-size:10px; font-weight:700; color:var(--pa); letter-spacing:.8px; text-transform:uppercase; }
.nav-menu { flex:1; padding:2px 0 6px; overflow-y:auto; list-style:none; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.08) transparent; }
.nav-sec { font-size:8.5px; font-weight:700; letter-spacing:1.8px; text-transform:uppercase; color:rgba(255,255,255,.18); padding:12px 14px 4px; }
.nav-li { margin:1px 7px; }
.nav-a { display:flex; align-items:center; gap:10px; padding:8px 11px; color:rgba(255,255,255,.45); font-size:12.5px; font-weight:500; border-radius:7px; cursor:pointer; transition:all .15s; text-decoration:none; }
.nav-a:hover { background:rgba(255,255,255,.07); color:rgba(255,255,255,.9); }
.nav-li.active .nav-a { background:var(--p); color:#fff; box-shadow:0 2px 14px var(--gl); font-weight:600; }
.nav-a .material-icons-round { font-size:16px; flex-shrink:0; }
.sb-foot { padding:8px 7px 10px; border-top:1px solid rgba(255,255,255,.05); flex-shrink:0; }
.sb-user { display:flex; align-items:center; gap:9px; padding:9px 11px; border-radius:7px; }
.sb-avatar { width:32px; height:32px; border-radius:50%; background:var(--p); display:flex; align-items:center; justify-content:center; font-family:'Barlow Condensed',sans-serif; font-size:13px; font-weight:800; color:#fff; flex-shrink:0; box-shadow:0 2px 8px var(--gl); }
.sb-uname { font-size:12.5px; font-weight:600; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sb-urole { font-size:9.5px; color:var(--pa); text-transform:uppercase; letter-spacing:.6px; }
.btn-out { margin-left:auto; background:none; border:1px solid rgba(255,255,255,.1); color:rgba(255,255,255,.38); border-radius:6px; padding:4px 7px; font-size:10.5px; cursor:pointer; transition:all .15s; flex-shrink:0; }
.btn-out:hover { background:rgba(255,255,255,.08); color:#fff; }

/* ===== HAMBURGER + OVERLAY ===== */
.hamburger { display:none; position:fixed; top:14px; left:14px; z-index:400; width:42px; height:42px; background:var(--p); border:none; border-radius:11px; cursor:pointer; align-items:center; justify-content:center; box-shadow:0 4px 16px var(--gl); transition:transform .15s; }
.hamburger:active { transform:scale(.93); }
.hamburger .material-icons-round { font-size:21px; color:#fff; }
.sb-overlay { display:block; position:fixed; inset:0; background:rgba(0,0,0,.58); z-index:190; backdrop-filter:blur(3px); opacity:0; pointer-events:none; transition:opacity .3s; }
.sb-overlay.open { opacity:1; pointer-events:auto; }

/* ===== MAIN + TOPBAR ===== */
.main { margin-left:var(--sbw); flex:1; display:flex; flex-direction:column; min-width:0; }
.topbar { height:54px; background:rgba(255,255,255,.94); backdrop-filter:blur(16px); border-bottom:1px solid rgba(0,0,0,.07); display:flex; align-items:center; padding:0 20px; gap:12px; position:sticky; top:0; z-index:100; }
.topbar-title { font-family:'Barlow Condensed',sans-serif; font-size:18px; font-weight:800; color:var(--pd); flex:1; text-transform:uppercase; letter-spacing:.3px; }
.topbar-back { display:flex; align-items:center; gap:6px; color:var(--p); font-size:12.5px; font-weight:600; text-decoration:none; padding:5px 10px; border-radius:7px; transition:background .15s; border:none; background:none; cursor:pointer; font-family:'Space Grotesk'; }
.topbar-back:hover { background:var(--cb); }
.topbar-back .material-icons-round { font-size:16px; }
.ib { width:36px; height:36px; border:none; background:none; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; color:#6B7280; transition:background .15s; position:relative; }
.ib:hover { background:rgba(0,0,0,.06); }
.ib .material-icons-round { font-size:19px; }
.notif-dot { position:absolute; top:6px; right:6px; width:7px; height:7px; background:var(--p); border-radius:50%; border:2px solid white; }
.tb-avatar { width:32px; height:32px; border-radius:50%; background:var(--p); display:flex; align-items:center; justify-content:center; font-family:'Barlow Condensed',sans-serif; font-size:13px; font-weight:800; color:#fff; flex-shrink:0; }

/* ===== BRANCH PAGE HERO — IMMERSIVE LIKE LOGIN ===== */
/* Main hero (used on dashboard index.html) stays as-is */
/* Branch pages get this upgraded hero */
.page-hero {
  position:relative; overflow:hidden;
  min-height:260px;   /* taller — more presence */
  display:flex; align-items:flex-end;
}
.page-hero-photo {
  position:absolute; inset:0;
  background-image:var(--ph);
  background-size:cover;
  background-position:center 30%;
  opacity:.68;    /* slightly more visible = more "alive" */
  filter:saturate(.78) brightness(.82);
  transform:scale(1.05);
  transition:transform 12s ease, opacity .4s;
}
.page-hero:hover .page-hero-photo { transform:scale(1.0); opacity:.82; }

/* Diagonal texture — same DNA as login.html */
.page-hero::before {
  content:'';
  position:absolute; inset:0; z-index:1;
  background-image:repeating-linear-gradient(
    -45deg,
    transparent, transparent 28px,
    rgba(255,255,255,.018) 28px, rgba(255,255,255,.018) 29px
  );
  pointer-events:none;
}
.page-hero-ov {
  position:absolute; inset:0; z-index:2;
  background:var(--ov);
}

/* Grain noise for film-like depth — same as login */
.page-hero-grain {
  position:absolute; inset:0; z-index:3; opacity:.045;
  pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:256px;
}

/* Role accent stripe — TOP of hero (matches login's left stripe) */
.page-hero::after {
  content:''; position:absolute;
  top:0; left:0; right:0; height:3px;
  background:var(--bar); z-index:5;
}

/* Role signature — bottom glassmorphic strip (like login footer zone) */
.page-hero-strip {
  position:absolute; bottom:0; left:0; right:0; z-index:4;
  background:rgba(0,0,0,.38);
  backdrop-filter:blur(10px);
  border-top:1px solid rgba(255,255,255,.07);
  padding:7px 28px;
  display:flex; align-items:center; gap:18px;
  overflow:hidden;
}
.phs-item {
  display:flex; align-items:center; gap:5px;
  font-size:10px; color:rgba(255,255,255,.42);
  white-space:nowrap;
}
.phs-item .material-icons-round { font-size:12px; color:var(--pa); }
.phs-sdiv { width:1px; height:12px; background:rgba(255,255,255,.14); flex-shrink:0; }

.page-hero-body {
  position:relative; z-index:4;
  padding:32px 28px 50px; width:100%;   /* 50px bottom to clear strip */
  display:flex; align-items:flex-end; justify-content:space-between; gap:20px;
}
.page-hero-left { flex:1; min-width:0; }
.page-hero-eyebrow {
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(8px);
  border-radius:20px;
  padding:4px 12px 4px 8px;
  font-size:9.5px; font-weight:700;
  color:rgba(255,255,255,.85); text-transform:uppercase; letter-spacing:1.2px;
  margin-bottom:10px;
}
.page-hero-eyebrow-dot {
  width:6px; height:6px; border-radius:50%;
  background:var(--pa); animation:pulse 2.5s ease-in-out infinite;
}
.page-hero-title {
  font-family:'Barlow Condensed',sans-serif;
  font-weight:800; color:#fff;
  font-size:clamp(28px,4.5vw,50px);
  line-height:.93; text-transform:uppercase;
  letter-spacing:-0.5px;
  margin-bottom:10px;
}
.page-hero-title em { color:var(--pa); font-style:italic; }
.page-hero-sub {
  font-size:12.5px; color:rgba(255,255,255,.52);
  line-height:1.65; max-width:380px;
}
/* Right side stats inside hero */
.page-hero-stats {
  display:flex; gap:24px; align-items:flex-end;
  flex-shrink:0;
}
.phs { text-align:right; }
.phs-n {
  font-family:'Barlow Condensed',sans-serif;
  font-size:32px; font-weight:800;
  color:var(--pa); line-height:1; letter-spacing:-1px;
}
.phs-l {
  font-size:9px; color:rgba(255,255,255,.35);
  text-transform:uppercase; letter-spacing:1px; margin-top:2px;
}
.phs-div { width:1px; height:40px; background:rgba(255,255,255,.15); }

/* ===== ROLE ENV BANNER (below hero) ===== */
/* Stronger role environment signal strip */
.role-env-banner {
  background:var(--bg2);
  border-bottom:2px solid var(--p);   /* stronger border */
  padding:9px 28px;
  display:flex; align-items:center; gap:10px;
  font-size:11px; font-weight:700; color:var(--pd);
  position:relative; overflow:hidden;
}
.role-env-banner::before {
  content:'';
  position:absolute; left:0; top:0; bottom:0; width:4px;
  background:var(--bar);
}
.role-env-banner .material-icons-round { font-size:15px; color:var(--p); }

/* ===== INNER + CARDS ===== */
.inner { padding:20px 22px; }
.card { background:#fff; border-radius:13px; border:1px solid rgba(0,0,0,.06); overflow:hidden; margin-bottom:16px; box-shadow:0 1px 4px rgba(0,0,0,.04); }
.card-h { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; border-bottom:1px solid rgba(0,0,0,.05); }
.card-ttl { display:flex; align-items:center; gap:7px; font-family:'Barlow Condensed',sans-serif; font-size:14px; font-weight:800; color:var(--pd); text-transform:uppercase; letter-spacing:.3px; }
.card-ttl .material-icons-round { font-size:15px; color:var(--p); }
.card-b { padding:14px 16px; }

/* ===== FORM ELEMENTS ===== */
.f-label { display:block; font-size:9.5px; font-weight:700; color:#6B7280; text-transform:uppercase; letter-spacing:.8px; margin-bottom:5px; }
.f-input { width:100%; padding:9px 12px; border:1.5px solid #E5E7EB; border-radius:7px; font-size:13px; font-family:'Space Grotesk'; outline:none; transition:border-color .15s,box-shadow .15s; }
.f-input:focus { border-color:var(--p); box-shadow:0 0 0 3px var(--gl2); }
.f-input::placeholder { color:#C4C9D4; }
.f-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px; }
.f-grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; margin-bottom:12px; }
.f-row { margin-bottom:12px; }

/* ===== BUTTONS ===== */
.btn-primary { padding:9px 18px; background:var(--p); color:#fff; border:none; border-radius:8px; font-size:13px; font-weight:700; cursor:pointer; font-family:'Space Grotesk'; transition:opacity .15s,transform .1s; }
.btn-primary:hover { opacity:.88; }
.btn-primary:active { transform:scale(.97); }
.btn-secondary { padding:9px 16px; background:#fff; color:#6B7280; border:1px solid #E5E7EB; border-radius:8px; font-size:13px; cursor:pointer; font-family:'Space Grotesk'; }
.btn-danger { padding:9px 16px; background:#FEE2E2; color:#991B1B; border:1px solid #FECACA; border-radius:8px; font-size:13px; font-weight:700; cursor:pointer; font-family:'Space Grotesk'; }
.btn-text { background:none; border:none; color:var(--p); font-size:11.5px; font-weight:600; cursor:pointer; font-family:'Space Grotesk'; }

/* ===== TABLE ===== */
.tbl { width:100%; border-collapse:collapse; font-size:12.5px; }
.tbl th { padding:8px 11px; text-align:left; font-size:9px; font-weight:700; color:#9CA3AF; text-transform:uppercase; letter-spacing:.8px; border-bottom:2px solid rgba(0,0,0,.05); }
.tbl td { padding:11px 11px; border-bottom:1px solid rgba(0,0,0,.04); vertical-align:middle; }
.tbl tr:last-child td { border-bottom:none; }
.tbl tr:hover td { background:var(--bg); }
.tbl-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* ===== BADGES ===== */
.badge { display:inline-flex; align-items:center; padding:2px 8px; border-radius:20px; font-size:10.5px; font-weight:700; }
.badge.active,.badge.green { background:#DCFCE7; color:#166534; }
.badge.done,.badge.blue { background:#DBEAFE; color:#1E40AF; }
.badge.plan,.badge.role { background:var(--cb); color:var(--ct); }
.badge.hold,.badge.purple { background:#F3E8FF; color:#6B21A8; }
.badge.red { background:#FEE2E2; color:#991B1B; }
.badge.gray { background:#F3F4F6; color:#374151; }

/* ===== KPI MINI CARDS ===== */
.kpi-row { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:18px; }
.kpi-mini { background:#fff; border-radius:12px; padding:14px; border:1px solid rgba(0,0,0,.06); position:relative; overflow:hidden; transition:box-shadow .2s,transform .2s; }
.kpi-mini:hover { box-shadow:0 6px 20px rgba(0,0,0,.09); transform:translateY(-2px); }
.kpi-mini::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--bar); }
.kpi-mini.alt::before { background:linear-gradient(90deg,#374151,#9CA3AF); }
.kpi-mini-val { font-family:'Barlow Condensed',sans-serif; font-size:28px; font-weight:800; color:var(--pd); line-height:1; margin-bottom:3px; }
.kpi-mini-lbl { font-size:9.5px; color:#9CA3AF; font-weight:700; text-transform:uppercase; letter-spacing:.8px; }
.kpi-mini-sub { font-size:11px; color:#6B7280; margin-top:4px; }

/* Alias (some pages use stat-box / stat-row) */
.stat-row { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:18px; }
.stat-box { background:#fff; border-radius:12px; padding:14px; border:1px solid rgba(0,0,0,.06); position:relative; overflow:hidden; }
.stat-box::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--bar); }
.stat-box.alt::before { background:linear-gradient(90deg,#374151,#9CA3AF); }
.stat-val { font-family:'Barlow Condensed',sans-serif; font-size:28px; font-weight:800; color:var(--pd); line-height:1; margin-bottom:3px; }
.stat-lbl { font-size:9.5px; color:#9CA3AF; font-weight:700; text-transform:uppercase; letter-spacing:.8px; }
.stat-sub { font-size:11px; color:#6B7280; margin-top:4px; }
.section-title { font-family:'Barlow Condensed',sans-serif; font-size:15px; font-weight:800; color:var(--pd); text-transform:uppercase; margin-bottom:12px; display:flex; align-items:center; gap:7px; letter-spacing:.3px; }
.section-title .material-icons-round { font-size:16px; color:var(--p); }

/* ===== MODAL ===== */
.modal { display:none; position:fixed; inset:0; background:rgba(0,0,0,.55); align-items:center; justify-content:center; z-index:9999; backdrop-filter:blur(4px); padding:16px; }
.modal.show { display:flex; }
.modal-box { background:#fff; border-radius:15px; width:100%; max-width:520px; max-height:90vh; overflow-y:auto; box-shadow:0 24px 64px rgba(0,0,0,.28); }
.modal-h { display:flex; align-items:center; justify-content:space-between; padding:16px 20px 12px; border-bottom:1px solid rgba(0,0,0,.06); }
.modal-ttl { font-family:'Barlow Condensed',sans-serif; font-size:17px; font-weight:800; color:var(--pd); text-transform:uppercase; }
.modal-close { background:none; border:none; cursor:pointer; color:#9CA3AF; width:26px; height:26px; display:flex; align-items:center; justify-content:center; border-radius:50%; font-size:18px; }
.modal-close:hover { background:rgba(0,0,0,.06); }
.modal-b { padding:16px 20px; }
.modal-f { display:flex; justify-content:flex-end; gap:9px; padding:12px 20px; border-top:1px solid rgba(0,0,0,.06); }

/* ===== TOAST ===== */
#toast { position:fixed; bottom:22px; right:22px; padding:11px 17px; border-radius:9px; font-size:12.5px; font-weight:500; color:#fff; z-index:99999; display:none; box-shadow:0 4px 18px rgba(0,0,0,.2); font-family:'Space Grotesk'; max-width:300px; }

/* ===== PROGRESS BAR ===== */
.prog-wrap { height:7px; background:rgba(0,0,0,.07); border-radius:10px; overflow:hidden; }
.prog-fill { height:100%; background:var(--bar); border-radius:10px; transition:width 1s ease; }

/* ===== RESPONSIVE — MOBILE FIRST ===== */
/* Tablet */
@media (max-width:1200px) { .kpi-row,.stat-row{grid-template-columns:repeat(2,1fr);} }

/* Mobile */
@media (max-width:768px) {
  .sidebar { transform:translateX(-100%); }
  .sidebar.open { transform:translateX(0); }
  .main { margin-left:0 !important; }
  .erp-content { margin-left:0 !important; }
  .hamburger { display:flex; }
  .hamburger-v3 { display:flex; }
  .topbar { padding-left:62px; }
  .inner { padding:12px 14px; }
  .kpi-row,.stat-row { grid-template-columns:repeat(2,1fr); gap:10px; }
  .f-grid-2,.f-grid-3 { grid-template-columns:1fr; }
  .modal-box { max-width:100%; }
  .page-hero { min-height:220px; }
  .page-hero-body { padding:20px 18px 46px; flex-direction:column; align-items:flex-start; gap:12px; }
  .page-hero-stats { display:none; }
  .page-hero-title { font-size:clamp(26px,8vw,40px); }
  .page-hero-strip { padding:6px 18px; gap:12px; }
  .phs-item { font-size:9px; }
  .role-env-banner { padding:8px 16px; font-size:10.5px; }
  .card-b,.card-body { padding:12px 14px; }
  .tbl-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
}

/* Small mobile */
@media (max-width:480px) {
  .kpi-row,.stat-row { grid-template-columns:1fr 1fr; gap:8px; }
  .kpi-mini-val,.stat-val,.kpi-value { font-size:22px; }
  .page-hero { min-height:185px; }
  .page-hero-body { padding:16px 14px 42px; }
  .page-hero-title { font-size:clamp(24px,9vw,36px); }
  .page-hero-eyebrow { font-size:8.5px; }
  .inner { padding:10px 12px; }
  .topbar { padding-left:58px; }
  .topbar-title { font-size:15px; }
}

/* ===== ROLE-SPECIFIC AMBIENT CARD TREATMENTS =====
   Cards adopt subtle role tint so even the content area has identity.
   Pattern borrowed from construction-tracker ref: warm bg + white cards.
*/

/* Admin: KPI cards get amber left accent on hover */
[data-role="admin"] .kpi-mini:hover,
[data-role="admin"] .kpi-card:hover,
[data-role="admin"] .stat-box:hover {
  border-left: 3px solid var(--p);
  box-shadow: 0 6px 24px rgba(217,119,6,.14);
}

/* Supervisor: cards get red shadow on hover — commanding, urgent */
[data-role="supervisor"] .kpi-mini:hover,
[data-role="supervisor"] .kpi-card:hover,
[data-role="supervisor"] .stat-box:hover {
  border-left: 3px solid var(--p);
  box-shadow: 0 6px 24px rgba(153,27,27,.14);
}

/* Karyawan: cards get green shadow on hover — energetic, alive */
[data-role="karyawan"] .kpi-mini:hover,
[data-role="karyawan"] .kpi-card:hover,
[data-role="karyawan"] .stat-box:hover {
  border-left: 3px solid var(--p);
  box-shadow: 0 6px 24px rgba(22,163,74,.14);
}

/* ===== ROLE SIGNATURE TOPBAR ACCENT LINE =====
   Thin role-colored line at very top of topbar — subtle brand signal
*/
.topbar::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 2px;
  background: var(--bar);
}
.topbar { position: relative; } /* ensure ::before works */

/* ===== CARD TABLE ROW HOVER — role tint =====*/
[data-role="admin"] .tbl tr:hover td,
[data-role="admin"] .data-table tr:hover td { background: rgba(252,211,77,.07); }
[data-role="supervisor"] .tbl tr:hover td,
[data-role="supervisor"] .data-table tr:hover td { background: rgba(252,165,165,.07); }
[data-role="karyawan"] .tbl tr:hover td,
[data-role="karyawan"] .data-table tr:hover td { background: rgba(134,239,172,.07); }

/* ===== MOBILE BOTTOM NAV (for HP users) =====
   Floating action bar at bottom for quick mobile navigation
   Shown only on mobile — improves HP UX dramatically
*/
.mobile-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 60px;
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(16px);
  border-top: 1px solid rgba(0,0,0,.08);
  z-index: 400;
  padding: 0 8px;
  align-items: center;
  justify-content: space-around;
  box-shadow: 0 -4px 24px rgba(0,0,0,.08);
}
.mob-nav-btn {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 6px 10px; border-radius: 10px;
  border: none; background: none; cursor: pointer;
  color: #9CA3AF; font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px;
  text-decoration: none; font-family: 'Space Grotesk', sans-serif;
  transition: all .15s;
}
.mob-nav-btn .material-icons-round { font-size: 22px; }
.mob-nav-btn.active { color: var(--p); background: var(--cb); }
.mob-nav-btn:active { transform: scale(.93); }

@media (max-width: 768px) {
  .mobile-bottom-nav { display: flex; }
  /* Push page content up so bottom nav doesn't cover it */
  .main, .erp-content { padding-bottom: 60px; }
  /* Hide sidebar on mobile, use bottom nav instead */
  .sidebar { transform: translateX(-100%); }
  .sidebar.open { transform: translateX(0); }
}

/* ===== COMPATIBILITY LAYER FOR OLDER PAGE STRUCTURE =====
   Alias old class names → new design tokens
   Ensures finance, procurement, kanban pages auto-upgraded */

/* old: erp-content / page-content → same as .main */
.erp-content { margin-left:var(--sbw); flex:1; display:flex; flex-direction:column; min-width:0; transition:margin-left .3s cubic-bezier(.4,0,.2,1); }
.page-content { flex:1; display:flex; flex-direction:column; }
.inner-content { padding:20px 22px; }

/* old: page-hero-overlay → page-hero-ov */
.page-hero-overlay {
  position:absolute; inset:0; z-index:2;
  background:var(--ov);
}
/* old: page-hero-content → page-hero-body */
.page-hero-content {
  position:relative; z-index:3;
  padding:28px 28px 26px; width:100%;
  display:flex; align-items:flex-end;
  justify-content:space-between; gap:20px;
}
/* old: page-eyebrow → page-hero-eyebrow styling */
.page-eyebrow {
  display:inline-flex; align-items:center; gap:6px;
  font-size:9.5px; font-weight:700;
  color:var(--pa); text-transform:uppercase; letter-spacing:1.4px;
  margin-bottom:8px;
}
.page-eyebrow-dot {
  width:7px; height:7px; border-radius:50%;
  background:var(--pa); animation:pulse 2.5s ease-in-out infinite;
}
/* old: page-hero-title (h1) */
.page-hero h1.page-hero-title, .page-hero-title {
  font-family:'Barlow Condensed',sans-serif;
  font-weight:800; color:#fff;
  font-size:clamp(26px,4vw,44px);
  line-height:.95; text-transform:uppercase;
  letter-spacing:-0.5px;
  margin-bottom:8px;
}
.page-hero-title em { color:var(--pa); font-style:italic; }
/* old: page-hero-sub */
.page-hero-sub { font-size:12px; color:rgba(255,255,255,.52); line-height:1.6; max-width:360px; }
/* old: page-hero-actions */
.page-hero-actions { display:flex; gap:8px; align-items:center; flex-shrink:0; flex-wrap:wrap; }

/* old: kpi-grid */
.kpi-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:18px; }
/* old: kpi-card */
.kpi-card {
  background:#fff; border-radius:12px; padding:14px;
  border:1px solid rgba(0,0,0,.06); position:relative; overflow:hidden;
  transition:box-shadow .2s,transform .2s;
}
.kpi-card:hover { box-shadow:0 6px 20px rgba(0,0,0,.09); transform:translateY(-2px); }
.kpi-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--bar); }
.kpi-card.warning::before { background:linear-gradient(90deg,#92400E,#D97706,#FCD34D); }
.kpi-card.danger::before { background:linear-gradient(90deg,#450A0A,#991B1B,#EF4444); }
.kpi-card.success::before { background:linear-gradient(90deg,#052E16,#16A34A,#86EFAC); }
.kpi-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.kpi-icon { width:34px; height:34px; border-radius:8px; background:var(--cb); display:flex; align-items:center; justify-content:center; }
.kpi-icon .material-icons-round { font-size:18px; color:var(--p); }
.kpi-icon.danger { background:#FEE2E2; }
.kpi-icon.danger .material-icons-round { color:#991B1B; }
.kpi-icon.success { background:#DCFCE7; }
.kpi-icon.success .material-icons-round { color:#16A34A; }
.kpi-trend { display:flex; align-items:center; gap:2px; font-size:10px; font-weight:600; }
.kpi-trend .material-icons-round { font-size:12px; }
.kpi-trend.up { color:#16A34A; }
.kpi-trend.down { color:#DC2626; }
.kpi-trend.neutral { color:#9CA3AF; }
.kpi-label { font-size:9.5px; font-weight:700; color:#9CA3AF; text-transform:uppercase; letter-spacing:.7px; margin-bottom:3px; }
.kpi-value { font-family:'Barlow Condensed',sans-serif; font-size:26px; font-weight:800; color:var(--pd); line-height:1; margin-bottom:2px; }
.kpi-sub { font-size:11px; color:#6B7280; }

/* old: card-header / card-title */
.card-header { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; border-bottom:1px solid rgba(0,0,0,.05); }
.card-title { display:flex; align-items:center; gap:7px; font-family:'Barlow Condensed',sans-serif; font-size:14px; font-weight:800; color:var(--pd); text-transform:uppercase; letter-spacing:.3px; }
.card-title .material-icons-round { font-size:15px; color:var(--p); }
.card-body { padding:14px 16px; }

/* old: data-table */
.data-table { width:100%; border-collapse:collapse; font-size:12.5px; }
.data-table th { padding:8px 12px; text-align:left; font-size:9px; font-weight:700; color:#9CA3AF; text-transform:uppercase; letter-spacing:.8px; border-bottom:2px solid rgba(0,0,0,.05); }
.data-table td { padding:11px 12px; border-bottom:1px solid rgba(0,0,0,.04); vertical-align:middle; }
.data-table tr:last-child td { border-bottom:none; }
.data-table tr:hover td { background:var(--bg); }

/* old: btn classes */
.btn { display:inline-flex; align-items:center; gap:6px; padding:8px 16px; border:none; border-radius:8px; font-size:12.5px; font-weight:600; cursor:pointer; font-family:'Space Grotesk'; transition:all .15s; text-decoration:none; }
.btn-primary.btn { background:var(--p); color:#fff; }
.btn-ghost { background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.2); backdrop-filter:blur(8px); }
.btn-ghost:hover { background:rgba(255,255,255,.22); }
.btn.btn-text { background:none; color:var(--p); border:none; }
.btn .material-icons-round { font-size:16px; }

/* old: badge classes */
.badge-done { background:#DCFCE7; color:#166534; display:inline-flex; padding:2px 8px; border-radius:20px; font-size:10.5px; font-weight:700; }
.badge-warning { background:#FEF3C7; color:#92400E; display:inline-flex; padding:2px 8px; border-radius:20px; font-size:10.5px; font-weight:700; }
.badge-danger { background:#FEE2E2; color:#991B1B; display:inline-flex; padding:2px 8px; border-radius:20px; font-size:10.5px; font-weight:700; }

/* old: field-input */
.field-input { padding:7px 12px; border:1.5px solid rgba(255,255,255,.25); border-radius:7px; font-size:12.5px; font-family:'Space Grotesk'; outline:none; background:rgba(255,255,255,.12); color:#fff; }
.field-input:focus { border-color:var(--pa); }

/* old: progress-wrap / progress-fill */
.progress-wrap { height:7px; background:rgba(0,0,0,.08); border-radius:10px; overflow:hidden; }
.progress-fill { height:100%; background:var(--bar); border-radius:10px; transition:width 1s ease; }

/* old: showToast fn compatibility */
/* global toast */
#erpToast { position:fixed; bottom:22px; right:22px; padding:11px 17px; border-radius:9px; font-size:12.5px; font-weight:500; color:#fff; z-index:99999; display:none; box-shadow:0 4px 18px rgba(0,0,0,.2); font-family:'Space Grotesk'; max-width:300px; }

@media (max-width:768px) {
  .erp-content { margin-left:0; }
  .kpi-grid { grid-template-columns:repeat(2,1fr); gap:10px; }
  .inner-content { padding:12px 14px; }
  .page-hero-content { flex-direction:column; align-items:flex-start; }
  .page-hero-actions { display:none; }
}
@media (max-width:480px) {
  .kpi-grid { grid-template-columns:1fr 1fr; gap:8px; }
  .kpi-value { font-size:22px; }
}

/* ===== NAV V3 COMPATIBILITY (erp-nav-v3.js class names) ===== */
/* Inject sidebar via #erp-nav, topbar via #erp-topbar */

/* Main layout when using erp-nav-v3.js structure */
.erp-sidebar {
  width:var(--sbw); background:var(--sb);
  height:100vh; position:fixed; left:0; top:0;
  display:flex; flex-direction:column; z-index:200;
  transition:transform .3s cubic-bezier(.4,0,.2,1);
  border-right:1px solid rgba(255,255,255,.04);
}
.sidebar-hero { height:170px; position:relative; overflow:hidden; flex-shrink:0; }
.sidebar-hero-photo {
  position:absolute; inset:0;
  background-image:var(--ph2);
  background-size:cover; background-position:center 25%;
  opacity:.5; filter:saturate(.6) brightness(.75);
  transition:opacity .5s,transform 8s ease;
}
.sidebar-hero:hover .sidebar-hero-photo { opacity:.8; transform:scale(1.04); }
.sidebar-hero-overlay { position:absolute; inset:0; background:linear-gradient(180deg,transparent 0%,var(--sb) 100%); }
.sidebar-hero::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--bar); z-index:3; }
.sidebar-brand { position:absolute; bottom:0; left:0; right:0; z-index:2; padding:10px 14px; display:flex; align-items:center; gap:9px; }
.logo-icon { width:36px; height:36px; background:var(--p); border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:18px; box-shadow:0 4px 12px var(--gl); flex-shrink:0; }
.logo-text strong { display:block; font-family:'Barlow Condensed',sans-serif; font-size:14px; font-weight:800; color:#fff; text-transform:uppercase; }
.logo-text span { font-size:9px; color:rgba(255,255,255,.38); letter-spacing:1.2px; text-transform:uppercase; }
.role-pill { margin:0 10px 6px; padding:6px 12px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07); border-left:3px solid var(--p); border-radius:7px; display:flex; align-items:center; gap:8px; }
.role-pill-dot { width:7px; height:7px; border-radius:50%; background:var(--pa); animation:pulse 2.5s ease-in-out infinite; flex-shrink:0; }
.role-pill-text { font-size:10px; font-weight:700; color:var(--pa); letter-spacing:.8px; text-transform:uppercase; }
.nav-menu { flex:1; padding:2px 0 6px; overflow-y:auto; list-style:none; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.08) transparent; }
.nav-section-label { font-size:8.5px; font-weight:700; letter-spacing:1.8px; text-transform:uppercase; color:rgba(255,255,255,.18); padding:12px 14px 4px; }
.nav-item { margin:1px 7px; }
.nav-link { display:flex; align-items:center; gap:10px; padding:8px 11px; color:rgba(255,255,255,.45); font-size:12.5px; font-weight:500; border-radius:7px; cursor:pointer; transition:all .15s; text-decoration:none; }
.nav-link:hover { background:rgba(255,255,255,.07); color:rgba(255,255,255,.9); }
.nav-item.active .nav-link { background:var(--p); color:#fff; box-shadow:0 2px 14px var(--gl); font-weight:600; }
.nav-link .material-icons-round { font-size:16px; flex-shrink:0; }
.nav-footer { padding:8px 7px 10px; border-top:1px solid rgba(255,255,255,.05); flex-shrink:0; }
.user-card { display:flex; align-items:center; gap:9px; padding:9px 11px; border-radius:7px; }
.user-avatar { width:32px; height:32px; border-radius:50%; background:var(--p); display:flex; align-items:center; justify-content:center; font-family:'Barlow Condensed',sans-serif; font-size:13px; font-weight:800; color:#fff; flex-shrink:0; box-shadow:0 2px 8px var(--gl); }
.user-name-el { font-size:12.5px; font-weight:600; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:80px; }
.user-role-el { font-size:9.5px; color:var(--pa); text-transform:uppercase; letter-spacing:.6px; }
.btn-logout { margin-left:auto; background:none; border:1px solid rgba(255,255,255,.1); color:rgba(255,255,255,.38); border-radius:6px; padding:4px 7px; font-size:10.5px; cursor:pointer; transition:all .15s; flex-shrink:0; }
.btn-logout:hover { background:rgba(255,255,255,.08); color:#fff; }

/* Old topbar from v3 */
.erp-topbar { height:54px; background:rgba(255,255,255,.94); backdrop-filter:blur(16px); border-bottom:1px solid rgba(0,0,0,.07); display:flex; align-items:center; padding:0 20px; gap:12px; position:sticky; top:0; z-index:100; }
.erp-topbar .topbar-back { display:flex; align-items:center; gap:6px; color:var(--p); font-size:12.5px; font-weight:600; text-decoration:none; padding:5px 10px; border-radius:7px; transition:background .15s; }
.erp-topbar .topbar-back:hover { background:var(--cb); }
.erp-topbar .topbar-back .material-icons-round { font-size:16px; }
.erp-topbar .topbar-title { font-family:'Barlow Condensed',sans-serif; font-size:18px; font-weight:800; color:var(--pd); flex:1; text-transform:uppercase; letter-spacing:.3px; }
.erp-topbar .topbar-divider { width:1px; height:20px; background:rgba(0,0,0,.1); }
.erp-topbar .topbar-actions { display:flex; align-items:center; gap:4px; }
.icon-btn { width:36px; height:36px; border:none; background:none; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; color:#6B7280; transition:background .15s; position:relative; }
.icon-btn:hover { background:rgba(0,0,0,.06); }
.icon-btn .material-icons-round { font-size:19px; }
.notif-dot { position:absolute; top:6px; right:6px; width:7px; height:7px; background:var(--p); border-radius:50%; border:2px solid white; }

/* v3 mobile hamburger */
#erp-nav { position:fixed; left:0; top:0; height:100vh; z-index:200; }
.hamburger-v3 { display:none; position:fixed; top:14px; left:14px; z-index:400; width:42px; height:42px; background:var(--p); border:none; border-radius:11px; cursor:pointer; align-items:center; justify-content:center; box-shadow:0 4px 16px var(--gl); }
.hamburger-v3 .material-icons-round { font-size:21px; color:#fff; }
.sidebar-overlay { position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:190; backdrop-filter:blur(3px); opacity:0; pointer-events:none; transition:opacity .3s; }
.sidebar-overlay.open { opacity:1; pointer-events:auto; }

/* ===== MOBILE RESPONSIVE — TOTAL FIX ===== */
@media (max-width:768px) {

  /* --- SIDEBAR: hidden by default on mobile, slides in on .open --- */
  .sidebar,
  .erp-sidebar,
  #erp-nav .erp-sidebar {
    transform: translateX(-100%) !important;
    transition: transform .3s cubic-bezier(.4,0,.2,1) !important;
    z-index: 300 !important;
  }
  .sidebar.open,
  .erp-sidebar.open,
  #erp-nav .erp-sidebar.open {
    transform: translateX(0) !important;
  }

  /* --- MAIN CONTENT: no left margin on mobile --- */
  .main,
  .erp-content,
  .erp-content[style],
  main[style] {
    margin-left: 0 !important;
  }

  /* --- HAMBURGER: show on mobile --- */
  .hamburger, .hamburger-v3, .hamburger-btn { display: flex !important; }

  /* --- TOPBAR: make room for hamburger, prevent overflow --- */
  .topbar,
  .erp-topbar {
    padding-left: 62px !important;
    padding-right: 10px !important;
    overflow: hidden;
  }
  .topbar-title,
  .erp-topbar .topbar-title {
    font-size: 15px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
  }
  /* Hide search & non-essential topbar items on mobile */
  .topbar-search,
  .erp-topbar .topbar-search { display: none !important; }
  .topbar-logout-label { display: none !important; }
  .topbar-hide-mobile { display: none !important; }

  /* --- HERO --- */
  .page-hero { min-height: 200px; }
  .page-hero-body,
  .page-hero-content {
    padding: 18px 16px 48px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }
  .page-hero-stats { display: none !important; }
  .page-hero-title { font-size: clamp(24px, 8vw, 38px) !important; }
  .page-hero-actions { display: none !important; }
  .page-hero-strip { padding: 6px 14px; gap: 10px; overflow-x: auto; }

  /* --- INNER CONTENT --- */
  .inner,
  .inner-content { padding: 12px 12px 80px !important; }

  /* --- GRIDS --- */
  .kpi-row, .stat-row, .kpi-grid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .f-grid-2, .f-grid-3 { grid-template-columns: 1fr !important; }
  .role-env-banner { padding: 8px 14px; font-size: 10.5px; }

  /* --- MODAL --- */
  .modal { padding: 10px; }
  .modal-box { max-width: 100% !important; border-radius: 12px; }

  /* --- CARDS --- */
  .card-b, .card-body { padding: 10px 12px !important; }

  /* --- TABLES --- */
  .tbl-wrap, .tbl, .data-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* card-body scroll — untuk hr-attendance, hr-payroll */
  .card-body { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* modal tanpa class (finance-budget, finance-payments) */
  [id$="Modal"] > div, [id$="modal"] > div { width: 95vw !important; max-width: 95vw !important; }
}

/* Small mobile */
@media (max-width: 480px) {
  .kpi-row, .stat-row, .kpi-grid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .kpi-mini-val, .stat-val, .kpi-value { font-size: 20px !important; }
  .page-hero { min-height: 170px; }
  .inner, .inner-content { padding: 10px 10px 80px !important; }
  .topbar, .erp-topbar { padding-left: 58px !important; }
  .topbar-title, .erp-topbar .topbar-title { font-size: 13px !important; }
}

/* Mobile bottom nav */
.mobile-bottom-nav { display: none; }
@media (max-width: 768px) {
  .mobile-bottom-nav { display: flex; }
  .main, .erp-content { padding-bottom: 60px; }
}

/* ===== NOTIFICATION BADGE & PANEL (C1.1) ===== */
.notif-badge {
  position:absolute; top:2px; right:2px;
  min-width:16px; height:16px; padding:0 3px;
  background:#EF4444; color:#fff;
  border-radius:8px; border:2px solid #fff;
  font-size:9px; font-weight:800;
  display:flex; align-items:center; justify-content:center;
  font-family:'Space Grotesk',sans-serif;
  pointer-events:none; line-height:1;
}
.notif-wrapper { position:relative; }
.notif-panel {
  position:absolute; top:calc(100% + 8px); right:0;
  width:320px; background:#fff;
  border-radius:12px; border:1px solid rgba(0,0,0,.08);
  box-shadow:0 8px 32px rgba(0,0,0,.14);
  z-index:9999; overflow:hidden;
}
.notif-panel-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px; border-bottom:1px solid rgba(0,0,0,.06);
  font-family:'Barlow Condensed',sans-serif;
  font-size:13px; font-weight:800; color:var(--pd);
  text-transform:uppercase; letter-spacing:.3px;
}
.notif-list { max-height:360px; overflow-y:auto; }
.notif-item {
  display:flex; align-items:flex-start; gap:10px;
  padding:11px 14px; cursor:pointer;
  border-bottom:1px solid rgba(0,0,0,.04);
  transition:background .12s;
}
.notif-item:hover { background:var(--bg); }
.notif-item.unread { background:var(--bg2); }
.notif-item:last-child { border-bottom:none; }
.notif-empty {
  padding:28px 16px; text-align:center;
  color:#9CA3AF; font-size:12.5px;
}
@media (max-width:480px) {
  .notif-panel { width:calc(100vw - 28px); right:-8px; }
}