/* =========================================================================
   ANAGHA — Jobs Handy Portal
   Reuses brand tokens; adds app-shell + login styling.
   ========================================================================= */
:root{
  --indigo-950:#0D0A24; --indigo-900:#14102E; --indigo-800:#1B1547;
  --indigo-700:#2A246A; --indigo-600:#3A309A; --indigo-500:#4F44C4; --indigo-400:#7166E0;
  --gold-700:#C98410; --gold-600:#E09A12; --gold-500:#F3B430; --gold-400:#F9C859; --gold-200:#FCE6AE;
  --ink:#15122B; --ink-soft:#3B3759; --muted:#6E6A88;
  --line:#E7E5F2; --line-strong:#D2CFE6; --paper:#FFFFFF; --off:#F6F5FB; --off-2:#EFEDF8;
  --ok:#1F9D63; --ok-bg:#E4F5EC; --warn:#C98410; --warn-bg:#FBF0D8; --rej:#C8432F; --rej-bg:#FAE6E2;
  --radius:16px; --radius-sm:10px;
  --shadow-sm:0 1px 2px rgba(20,16,46,.06),0 2px 8px rgba(20,16,46,.05);
  --shadow-md:0 8px 24px rgba(20,16,46,.08),0 2px 8px rgba(20,16,46,.05);
  --shadow-lg:0 30px 70px -24px rgba(20,16,46,.4),0 8px 24px rgba(20,16,46,.12);
  --sans:"Plus Jakarta Sans",system-ui,sans-serif;
  --display:"Sora",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
}
*{box-sizing:border-box;}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--off);-webkit-font-smoothing:antialiased;line-height:1.5;}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;letter-spacing:-.02em;margin:0;line-height:1.1;}
button{font-family:var(--sans);cursor:pointer;}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:600;font-size:14px;padding:12px 20px;border-radius:100px;border:1.5px solid transparent;transition:transform .16s,background .16s,box-shadow .16s,color .16s;white-space:nowrap;line-height:1;}
.btn svg{width:16px;height:16px;}
.btn-gold{background:var(--gold-500);color:var(--indigo-900);box-shadow:0 14px 30px -14px rgba(224,154,18,.7);}
.btn-gold:hover{background:var(--gold-400);transform:translateY(-1px);}
.btn-indigo{background:var(--indigo-700);color:#fff;}
.btn-indigo:hover{background:var(--indigo-600);transform:translateY(-1px);}
.btn-ghost{background:transparent;border-color:var(--line-strong);color:var(--ink-soft);}
.btn-ghost:hover{border-color:var(--indigo-700);color:var(--indigo-700);}
.btn-sm{padding:8px 14px;font-size:13px;}
.btn-ok{background:var(--ok);color:#fff;}
.btn-ok:hover{filter:brightness(1.05);}
.btn-rej{background:transparent;border-color:var(--rej);color:var(--rej);}
.btn-rej:hover{background:var(--rej-bg);}
.btn-block{width:100%;}

/* ---------- LOGIN ---------- */
.login-wrap{min-height:100vh;display:grid;grid-template-columns:1.1fr 1fr;}
.login-aside{
  position:relative;overflow:hidden;color:#fff;padding:56px 60px;display:flex;flex-direction:column;justify-content:space-between;
  background:
    radial-gradient(900px 500px at 80% 0%,rgba(79,68,196,.6),transparent 60%),
    radial-gradient(700px 400px at 0% 100%,rgba(243,180,48,.16),transparent 55%),
    linear-gradient(160deg,var(--indigo-800),var(--indigo-950));
}
.login-aside::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:54px 54px;mask-image:radial-gradient(700px 500px at 60% 40%,#000,transparent 80%);}
.login-aside .la-top{position:relative;display:flex;align-items:center;gap:14px;}
.login-aside .la-top img{height:34px;}
.login-aside .la-badge{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-400);border:1px solid rgba(243,180,48,.4);border-radius:100px;padding:5px 12px;}
.login-aside .la-mid{position:relative;}
.login-aside .la-mid .eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-400);margin-bottom:20px;display:block;}
.login-aside h1{font-size:clamp(32px,3.6vw,46px);line-height:1.05;margin-bottom:20px;}
.login-aside p{color:rgba(255,255,255,.74);font-size:16px;line-height:1.6;max-width:420px;}
.login-aside .la-feats{position:relative;display:flex;flex-direction:column;gap:14px;}
.la-feat{display:flex;align-items:center;gap:13px;color:rgba(255,255,255,.86);font-size:14.5px;}
.la-feat .fi{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:rgba(255,255,255,.08);color:var(--gold-400);flex-shrink:0;}
.la-feat .fi svg{width:17px;height:17px;}

.login-main{display:grid;place-items:center;padding:40px;}
.login-card{width:100%;max-width:400px;}
.login-card .lc-h{margin-bottom:28px;}
.login-card h2{font-size:28px;margin-bottom:8px;}
.login-card .lc-h p{color:var(--muted);font-size:15px;}
.role-toggle{display:grid;grid-template-columns:1fr 1fr;gap:6px;background:var(--off-2);padding:6px;border-radius:14px;margin-bottom:22px;}
.role-toggle button{border:none;background:transparent;padding:11px;border-radius:9px;font-weight:600;font-size:14px;color:var(--muted);display:flex;align-items:center;justify-content:center;gap:8px;transition:.16s;}
.role-toggle button svg{width:16px;height:16px;}
.role-toggle button.active{background:#fff;color:var(--indigo-700);box-shadow:var(--shadow-sm);}
.field{margin-bottom:16px;}
.field label{display:block;font-size:13px;font-weight:600;color:var(--ink-soft);margin-bottom:7px;}
.field input{width:100%;padding:13px 15px;border:1.5px solid var(--line-strong);border-radius:11px;font-family:var(--sans);font-size:14.5px;color:var(--ink);transition:border-color .15s,box-shadow .15s;background:#fff;}
.field input:focus{outline:none;border-color:var(--indigo-500);box-shadow:0 0 0 3px rgba(79,68,196,.12);}
.login-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px;font-size:13px;}
.login-row label{display:flex;align-items:center;gap:8px;color:var(--muted);}
.login-row a{color:var(--indigo-600);font-weight:600;}
.login-hint{margin-top:18px;font-size:12.5px;color:var(--muted);text-align:center;font-family:var(--mono);letter-spacing:.02em;}

/* ---------- APP SHELL ---------- */
.app{display:none;grid-template-columns:260px 1fr;min-height:100vh;}
.app.show{display:grid;}
.sidebar{background:var(--indigo-950);color:#fff;padding:24px 18px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;}
.sb-brand{display:flex;align-items:center;gap:10px;padding:6px 8px 22px;}
.sb-brand img{height:30px;}
.sb-section{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.4);padding:16px 12px 8px;}
.sb-nav{display:flex;flex-direction:column;gap:3px;}
.sb-link{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:11px;color:rgba(255,255,255,.72);font-weight:500;font-size:14.5px;transition:background .15s,color .15s;border:none;background:transparent;text-align:left;width:100%;}
.sb-link svg{width:18px;height:18px;opacity:.85;flex-shrink:0;}
.sb-link:hover{background:rgba(255,255,255,.06);color:#fff;}
.sb-link.active{background:var(--indigo-600);color:#fff;}
.sb-link .badge{margin-left:auto;background:var(--gold-500);color:var(--indigo-900);font-size:11px;font-weight:700;font-family:var(--mono);min-width:20px;height:20px;border-radius:100px;display:grid;place-items:center;padding:0 6px;}
.sb-foot{margin-top:auto;padding-top:18px;border-top:1px solid rgba(255,255,255,.1);}
.sb-user{display:flex;align-items:center;gap:11px;padding:8px;}
.sb-user .ava{width:38px;height:38px;border-radius:50%;background:var(--gold-500);color:var(--indigo-900);display:grid;place-items:center;font-weight:700;font-family:var(--display);flex-shrink:0;}
.sb-user .un{font-weight:600;font-size:13.5px;}
.sb-user .ur{font-size:11.5px;color:rgba(255,255,255,.5);font-family:var(--mono);letter-spacing:.04em;text-transform:uppercase;}
.sb-logout{margin-top:10px;width:100%;background:rgba(255,255,255,.06);border:none;color:rgba(255,255,255,.7);padding:10px;border-radius:10px;font-size:13px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:8px;transition:.15s;}
.sb-logout:hover{background:rgba(255,255,255,.12);color:#fff;}
.sb-logout svg{width:15px;height:15px;}

/* ---------- MAIN ---------- */
.main{display:flex;flex-direction:column;min-width:0;}
.topbar{height:72px;background:rgba(255,255,255,.85);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:20px;padding:0 32px;position:sticky;top:0;z-index:20;}
.topbar .search{flex:1;max-width:360px;display:flex;align-items:center;gap:10px;background:var(--off);border:1px solid var(--line);border-radius:100px;padding:9px 16px;color:var(--muted);font-size:14px;}
.topbar .search svg{width:16px;height:16px;}
.topbar .search input{border:none;background:transparent;outline:none;font-family:var(--sans);font-size:14px;flex:1;color:var(--ink);}
.topbar .tb-right{margin-left:auto;display:flex;align-items:center;gap:14px;}
.icon-btn{width:40px;height:40px;border-radius:11px;border:1px solid var(--line);background:#fff;display:grid;place-items:center;color:var(--ink-soft);position:relative;}
.icon-btn svg{width:18px;height:18px;}
.icon-btn .dot{position:absolute;top:9px;right:10px;width:7px;height:7px;border-radius:50%;background:var(--gold-500);border:2px solid #fff;}

.content{padding:32px;max-width:1180px;width:100%;}
.view{display:none;}
.view.active{display:block;animation:fade .3s ease;}
@keyframes fade{from{transform:translateY(10px);}to{transform:none;}}
@media (prefers-reduced-motion: reduce){ .view.active{animation:none;} }

.page-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:26px;gap:20px;flex-wrap:wrap;}
.page-head .ph-l h1{font-size:30px;margin-bottom:6px;}
.page-head .ph-l p{color:var(--muted);font-size:14.5px;}
.greet-name{color:var(--indigo-600);}

/* stat cards */
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:26px;}
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px;}
.stat .si{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;margin-bottom:16px;}
.stat .si svg{width:20px;height:20px;}
.stat .sv{font-family:var(--display);font-weight:700;font-size:30px;letter-spacing:-.02em;}
.stat .sl{font-size:13px;color:var(--muted);margin-top:3px;}
.si.i1{background:var(--indigo-700);color:var(--gold-400);}
.si.i2{background:var(--warn-bg);color:var(--warn);}
.si.i3{background:var(--ok-bg);color:var(--ok);}
.si.i4{background:var(--off-2);color:var(--indigo-600);}

/* panels */
.grid-2{display:grid;grid-template-columns:1.5fr 1fr;gap:20px;}
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px;}
.panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;}
.panel-head h3{font-size:18px;}
.panel-head a{font-size:13px;font-weight:600;color:var(--indigo-600);}

/* table */
.tbl{width:100%;border-collapse:collapse;}
.tbl th{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-align:left;padding:0 14px 12px;font-weight:500;border-bottom:1px solid var(--line);}
.tbl td{padding:14px;border-bottom:1px solid var(--line);font-size:14px;vertical-align:middle;}
.tbl tr:last-child td{border-bottom:none;}
.tbl tr.row-hover:hover{background:var(--off);}
.tbl .td-main{font-weight:600;}
.tbl .td-sub{font-size:12px;color:var(--muted);margin-top:2px;}
.tbl .num{font-family:var(--mono);}

/* badges */
.badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:5px 11px;border-radius:100px;font-family:var(--sans);}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;}
.badge.pending{color:var(--warn);background:var(--warn-bg);}
.badge.approved{color:var(--ok);background:var(--ok-bg);}
.badge.rejected{color:var(--rej);background:var(--rej-bg);}
.badge.draft{color:var(--muted);background:var(--off-2);}

/* activity */
.act{display:flex;gap:13px;padding:13px 0;border-bottom:1px solid var(--line);}
.act:last-child{border-bottom:none;}
.act .ai{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;flex-shrink:0;background:var(--off-2);color:var(--indigo-600);}
.act .ai svg{width:16px;height:16px;}
.act .at{font-size:13.5px;font-weight:500;}
.act .as{font-size:12px;color:var(--muted);margin-top:2px;}
.act .atime{margin-left:auto;font-size:11.5px;color:var(--muted);font-family:var(--mono);white-space:nowrap;}

/* form */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.form-grid .full{grid-column:1/-1;}
.lbl{display:block;font-size:13px;font-weight:600;color:var(--ink-soft);margin-bottom:7px;}
.inp,.sel,.ta{width:100%;padding:12px 14px;border:1.5px solid var(--line-strong);border-radius:10px;font-family:var(--sans);font-size:14px;color:var(--ink);background:#fff;transition:border-color .15s,box-shadow .15s;}
.inp:focus,.sel:focus,.ta:focus{outline:none;border-color:var(--indigo-500);box-shadow:0 0 0 3px rgba(79,68,196,.12);}
.ta{resize:vertical;min-height:84px;}

/* upload */
.drop{border:2px dashed var(--line-strong);border-radius:14px;padding:36px;text-align:center;color:var(--muted);background:var(--off);transition:border-color .15s,background .15s;cursor:pointer;}
.drop:hover{border-color:var(--indigo-400);background:#fff;}
.drop .di{width:48px;height:48px;border-radius:13px;background:var(--indigo-700);color:var(--gold-400);display:grid;place-items:center;margin:0 auto 14px;}
.drop .di svg{width:22px;height:22px;}
.drop b{color:var(--ink);font-weight:600;}

/* doc list */
.doc{display:flex;align-items:center;gap:14px;padding:14px;border:1px solid var(--line);border-radius:12px;margin-bottom:10px;}
.doc .dic{width:40px;height:40px;border-radius:9px;background:var(--off-2);color:var(--indigo-600);display:grid;place-items:center;flex-shrink:0;}
.doc .dic svg{width:18px;height:18px;}
.doc .dn{font-weight:600;font-size:14px;}
.doc .dm{font-size:12px;color:var(--muted);margin-top:1px;font-family:var(--mono);}

/* roadmap / payroll */
.road{display:flex;flex-direction:column;gap:0;}
.road-item{display:grid;grid-template-columns:120px 1fr;gap:24px;padding:22px 0;border-top:1px solid var(--line);}
.road-item:first-child{border-top:none;}
.road-when{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--indigo-600);font-weight:500;}
.road-when .ph-tag{display:inline-block;margin-top:8px;font-size:10px;padding:3px 9px;border-radius:100px;text-transform:uppercase;letter-spacing:.08em;}
.ph-live{background:var(--ok-bg);color:var(--ok);}
.ph-soon{background:var(--warn-bg);color:var(--warn);}
.ph-plan{background:var(--off-2);color:var(--muted);}
.road-item h4{font-size:17px;margin-bottom:6px;}
.road-item p{font-size:14px;color:var(--muted);line-height:1.55;}
.integ-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px;}
.integ{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:12px;padding:12px 16px;font-weight:600;font-size:14px;background:#fff;}
.integ .igl{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;color:#fff;font-family:var(--display);font-weight:800;font-size:14px;}

/* toast */
.toast-wrap{position:fixed;bottom:24px;right:24px;display:flex;flex-direction:column;gap:10px;z-index:200;}
.toast{display:flex;align-items:center;gap:12px;background:var(--indigo-900);color:#fff;padding:14px 18px;border-radius:12px;box-shadow:var(--shadow-lg);font-size:14px;font-weight:500;min-width:280px;animation:toastin .3s ease;}
.toast .tic{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:var(--ok);flex-shrink:0;}
.toast .tic svg{width:16px;height:16px;}
.toast .tsub{font-size:12px;color:rgba(255,255,255,.6);font-weight:400;margin-top:2px;}
@keyframes toastin{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}}

.admin-only{display:none;}
body[data-role="admin"] .admin-only{display:flex;}
body[data-role="admin"] .employee-only{display:none;}

@media(max-width:1080px){
  .stat-row{grid-template-columns:repeat(2,1fr);}
  .grid-2{grid-template-columns:1fr;}
  .login-wrap{grid-template-columns:1fr;}
  .login-aside{display:none;}
}
@media(max-width:820px){
  .app.show{grid-template-columns:1fr;}
  .sidebar{position:fixed;left:-280px;z-index:50;transition:left .25s;width:260px;}
  .sidebar.open{left:0;}
}
@media(max-width:560px){
  .stat-row{grid-template-columns:1fr;}
  .form-grid{grid-template-columns:1fr;}
  .content{padding:20px;}
}