/* ===========================================================
   Aarvi Unicon Suite — shared design system
   Website + EMS + SafeFamily
   =========================================================== */
:root{
  --primary:#2563eb; --primary-dark:#1d4ed8; --accent:#06b6d4; --gold:#fbbf24;
  --ink:#0f172a; --muted:#64748b; --line:#e2e8f0; --bg:#f1f5f9; --surface:#fff;
  --success:#10b981; --danger:#ef4444; --warning:#f59e0b;
  --sf:#7c3aed; --sf-accent:#ec4899;   /* SafeFamily accent (purple/pink) */
  --radius:14px; --radius-sm:9px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.06); --shadow:0 8px 24px rgba(15,23,42,.08);
  --shadow-lg:0 20px 45px rgba(15,23,42,.14);
  --grad:linear-gradient(135deg,var(--primary),var(--accent));
  --grad-sf:linear-gradient(135deg,var(--sf),var(--sf-accent));
  --font:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font);background:var(--bg);color:var(--ink);line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block}

/* ===== App shell (EMS + SafeFamily dashboards) ===== */
.app{display:flex;min-height:100vh}
.sidebar{width:260px;background:var(--ink);color:#cbd5e1;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.sidebar.sf .brand{background:rgba(124,58,237,.12)}
.sidebar .brand{padding:22px 20px;background:rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.08)}
.sidebar .brand img{width:100%;max-width:190px;height:auto;object-fit:contain;opacity:.98;display:block}
.sidebar .brand .brand-logo{width:100%;max-width:200px;height:auto;display:block}
.sidebar .brand .tag{font-size:11px;letter-spacing:2px;color:#64748b;margin-top:8px;text-transform:uppercase}
.sidebar nav{padding:14px 12px;flex:1;overflow-y:auto}
.sidebar nav .sec{font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#475569;padding:14px 14px 6px}
.sidebar nav a{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:var(--radius-sm);color:#94a3b8;font-weight:500;font-size:14.5px;margin-bottom:3px;transition:all .18s}
.sidebar nav a:hover{background:rgba(255,255,255,.06);color:#fff}
.sidebar nav a.active{background:var(--grad);color:#fff;box-shadow:var(--shadow)}
.sidebar.sf nav a.active{background:var(--grad-sf)}
.sidebar nav a .ic{width:20px;text-align:center;font-size:16px}
.sidebar .foot{padding:16px 20px;border-top:1px solid rgba(255,255,255,.08);font-size:12px;color:#64748b}
.main{flex:1;display:flex;flex-direction:column;min-width:0}
.topbar{background:var(--surface);border-bottom:1px solid var(--line);padding:16px 28px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:20}
.topbar h1{font-size:20px;font-weight:700}
.topbar .user{display:flex;align-items:center;gap:12px}
.avatar{width:38px;height:38px;border-radius:50%;background:var(--grad);color:#fff;font-weight:700;display:grid;place-items:center;font-size:15px}
.sf .avatar,.avatar.sf{background:var(--grad-sf)}
.content{padding:28px;flex:1}

/* ===== Stats / cards ===== */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:18px;margin-bottom:26px}
.stat-card{background:var(--surface);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow-sm);border:1px solid var(--line);display:flex;align-items:center;gap:16px}
.stat-card .icon{width:52px;height:52px;border-radius:13px;display:grid;place-items:center;font-size:22px;color:#fff;background:var(--grad);flex-shrink:0}
.stat-card .icon.green{background:linear-gradient(135deg,#10b981,#34d399)}
.stat-card .icon.gold{background:linear-gradient(135deg,#f59e0b,#fbbf24)}
.stat-card .icon.sf{background:var(--grad-sf)}
.stat-card .num{font-size:28px;font-weight:800;line-height:1}
.stat-card .lbl{color:var(--muted);font-size:13.5px;margin-top:4px}
.panel{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow-sm);border:1px solid var(--line);overflow:hidden;margin-bottom:22px}
.panel-head{padding:18px 22px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.panel-head h2{font-size:16px;font-weight:700}
.panel-body{padding:6px 0}
.panel-body.pad{padding:22px}

/* ===== Table ===== */
table{width:100%;border-collapse:collapse}
thead th{text-align:left;font-size:12px;letter-spacing:.4px;text-transform:uppercase;color:var(--muted);padding:14px 22px;border-bottom:1px solid var(--line)}
tbody td{padding:13px 22px;border-bottom:1px solid var(--line);font-size:14.5px;vertical-align:middle}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:#f8fafc}
.emp-cell{display:flex;align-items:center;gap:12px}
.emp-cell .avatar{width:36px;height:36px;font-size:13px}
.emp-cell .nm{font-weight:600}
.emp-cell .em{font-size:12.5px;color:var(--muted)}

/* ===== Badges ===== */
.badge{display:inline-block;padding:4px 11px;border-radius:999px;font-size:12px;font-weight:600}
.badge.active,.badge.present,.badge.paid{background:#dcfce7;color:#15803d}
.badge.inactive,.badge.absent{background:#fee2e2;color:#b91c1c}
.badge.leave{background:#fef3c7;color:#b45309}
.badge.half_day{background:#e0e7ff;color:#4338ca}
.badge.holiday{background:#f1f5f9;color:#475569}
.badge.generated{background:#dbeafe;color:#1d4ed8}
.badge.blocked{background:#fee2e2;color:#b91c1c}
.badge.allowed{background:#dcfce7;color:#15803d}

/* ===== Buttons ===== */
.btn{display:inline-flex;align-items:center;gap:8px;cursor:pointer;padding:10px 18px;border-radius:var(--radius-sm);border:1px solid transparent;font-weight:600;font-size:14px;font-family:var(--font);transition:all .16s;text-decoration:none}
.btn-primary{background:var(--grad);color:#fff;box-shadow:var(--shadow-sm)}
.btn-primary:hover{box-shadow:var(--shadow);transform:translateY(-1px)}
.btn-sf{background:var(--grad-sf);color:#fff}
.btn-ghost{background:var(--surface);border-color:var(--line);color:var(--ink)}
.btn-ghost:hover{background:#f8fafc}
.btn-sm{padding:6px 12px;font-size:13px}
.btn-danger{background:#fee2e2;color:var(--danger)}
.btn-danger:hover{background:var(--danger);color:#fff}
.btn-edit{background:#dbeafe;color:var(--primary)}
.btn-edit:hover{background:var(--primary);color:#fff}
.actions{display:flex;gap:6px;flex-wrap:wrap}

/* ===== Search & forms ===== */
.search{display:flex;align-items:center;gap:8px;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-sm);padding:4px 6px 4px 12px}
.search input{border:none;background:transparent;outline:none;padding:8px;font-size:14px;width:220px;font-family:var(--font)}
.form-wrap{max-width:820px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:24px}
.field{display:flex;flex-direction:column;gap:6px}
.field.full{grid-column:1/-1}
.field label{font-size:13.5px;font-weight:600;color:#334155}
.field input,.field select,.field textarea{padding:11px 13px;border:1px solid var(--line);border-radius:var(--radius-sm);font-size:14.5px;font-family:var(--font);background:var(--surface);transition:border .15s,box-shadow .15s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(37,99,235,.12)}
.field .err{color:var(--danger);font-size:12.5px}
.form-foot{padding:18px 24px;border-top:1px solid var(--line);display:flex;gap:10px;justify-content:flex-end}
.inline-form{display:flex;gap:10px;align-items:end;flex-wrap:wrap}

/* ===== Alerts ===== */
.alert{padding:13px 18px;border-radius:var(--radius-sm);margin-bottom:20px;font-size:14px;font-weight:500;display:flex;align-items:center;gap:10px}
.alert.success{background:#dcfce7;color:#15803d;border:1px solid #bbf7d0}
.alert.error{background:#fee2e2;color:#b91c1c;border:1px solid #fecaca}
.alert.info{background:#eff6ff;color:#1e40af;border:1px solid #bfdbfe}

/* ===== Login ===== */
.login-page{min-height:100vh;display:grid;place-items:center;padding:24px;
  background:radial-gradient(1200px 600px at 20% -10%,#dbeafe 0%,transparent 60%),
             radial-gradient(1000px 500px at 100% 110%,#cffafe 0%,transparent 55%),var(--bg)}
.login-page.sf{background:radial-gradient(1200px 600px at 20% -10%,#ede9fe 0%,transparent 60%),
             radial-gradient(1000px 500px at 100% 110%,#fce7f3 0%,transparent 55%),var(--bg)}
.login-card{width:100%;max-width:420px;background:var(--surface);border-radius:20px;box-shadow:var(--shadow-lg);overflow:hidden;border:1px solid var(--line)}
.login-head{padding:34px 34px 10px;text-align:center}
.login-head img{height:48px;width:auto;max-width:80%;object-fit:contain;margin:0 auto 14px;display:block}
.login-head h1{font-size:21px;font-weight:800}
.login-head .pill{display:inline-block;margin-top:8px;padding:4px 12px;border-radius:999px;font-size:12px;font-weight:700;color:#fff;background:var(--grad)}
.login-head .pill.sf{background:var(--grad-sf)}
.login-head p{color:var(--muted);font-size:14px;margin-top:8px}
.login-body{padding:22px 34px 34px}
.login-body .field{margin-bottom:16px}
.login-body .btn{width:100%;justify-content:center;padding:13px;font-size:15px}
.login-foot{text-align:center;padding:16px;background:var(--bg);font-size:12.5px;color:var(--muted);border-top:1px solid var(--line)}
.login-foot a{color:var(--primary);font-weight:600}
.hint{background:#eff6ff;border:1px dashed #bfdbfe;color:#1e40af;padding:10px 14px;border-radius:9px;font-size:12.5px;margin-bottom:18px;text-align:center}
.hint.sf{background:#f5f3ff;border-color:#ddd6fe;color:#6d28d9}

.empty{padding:48px;text-align:center;color:var(--muted)}
.empty .big{font-size:38px;margin-bottom:8px}
.progress{height:10px;background:var(--line);border-radius:999px;overflow:hidden}
.progress > span{display:block;height:100%;background:var(--grad-sf)}

/* child chips for SafeFamily */
.child-chips{display:flex;gap:8px;padding:0 12px 8px;flex-wrap:wrap}
.child-chips a{padding:7px 13px;border-radius:999px;background:rgba(255,255,255,.06);color:#cbd5e1;font-size:13px;font-weight:600}
.child-chips a.active{background:var(--grad-sf);color:#fff}

.detail-grid{display:grid;grid-template-columns:1fr 1fr}
.detail-grid .row{padding:16px 24px;border-bottom:1px solid var(--line)}
.detail-grid .row .k{font-size:12px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted)}
.detail-grid .row .v{font-size:15px;font-weight:600;margin-top:3px}
.profile-head{display:flex;align-items:center;gap:18px;padding:24px;border-bottom:1px solid var(--line)}
.profile-head .avatar{width:64px;height:64px;font-size:24px}
.token-box{font-family:monospace;font-size:12px;background:#0f172a;color:#a7f3d0;padding:14px;border-radius:10px;word-break:break-all;line-height:1.5}

@media (max-width:900px){
  .sidebar{position:fixed;left:-260px;z-index:50;transition:left .25s;box-shadow:var(--shadow-lg)}
  .sidebar.open{left:0}
  .form-grid,.detail-grid{grid-template-columns:1fr}
  .search input{width:140px}
  .menu-toggle{display:inline-flex!important}
}
.menu-toggle{display:none;background:none;border:none;font-size:22px;cursor:pointer;color:var(--ink)}

/* ===== Payslip ===== */
.payslip .payslip-head { display:flex; justify-content:space-between; align-items:flex-start; padding:24px; }
.payslip .muted { color: var(--muted); font-size:13px; }
.payslip-grid { display:grid; grid-template-columns:1fr 1fr; gap:0; border-top:1px solid var(--line); }
.payslip-grid .col { padding:22px 24px; }
.payslip-grid .col:first-child { border-right:1px solid var(--line); }
.payslip-grid .col h4 { font-size:12px; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); margin-bottom:14px; }
.payslip-grid .line { display:flex; justify-content:space-between; padding:9px 0; font-size:14.5px; }
.payslip-grid .line.total { border-top:1px dashed var(--line); margin-top:8px; padding-top:12px; font-size:15px; }
.netpay { display:flex; justify-content:space-between; align-items:center; padding:20px 24px; margin:0; background:linear-gradient(135deg, rgba(37,99,235,.08), rgba(6,182,212,.08)); border-top:1px solid var(--line); }
.netpay span:first-child { font-weight:600; color:#334155; }
.netpay .amt { font-size:26px; font-weight:800; color:var(--primary); }
@media (max-width: 700px){ .payslip-grid { grid-template-columns:1fr; } .payslip-grid .col:first-child{ border-right:none; border-bottom:1px solid var(--line);} }
@media print { .sidebar, .topbar, .form-foot { display:none !important; } .content{ padding:0 } .app{display:block} }

/* ===== SafeFamily helpers ===== */
.dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:#94a3b8; margin-right:4px; }
.dot.on { background:#10b981; }
.app-list { display:flex; flex-direction:column; }
.app-row { display:flex; align-items:center; gap:14px; padding:14px 22px; border-bottom:1px solid var(--line); }
.app-row:last-child { border-bottom:none; }
.app-row .app-ic { width:40px; height:40px; border-radius:10px; background:var(--bg); display:grid; place-items:center; font-size:18px; }
.app-row .app-meta { flex:1; }
.app-row .app-meta .nm { font-weight:600; }
.app-row .app-meta .sub { font-size:12.5px; color:var(--muted); }
.app-row .bar { height:8px; background:var(--bg); border-radius:999px; overflow:hidden; width:120px; }
.app-row .bar > span { display:block; height:100%; background:var(--grad-sf); }
.loc-map { height:320px; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); }
.loc-map iframe { width:100%; height:100%; border:0; }
.kv { display:flex; gap:8px; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--line); font-size:14px; }
.kv:last-child { border-bottom:none; }
.kv .k { color:var(--muted); }
.jwt-box { background:#0f172a; color:#e2e8f0; padding:14px 16px; border-radius:10px; font-family:monospace; font-size:12.5px; word-break:break-all; margin:12px 0; }

/* ===== Employee photo ===== */
.avatar-photo { position:relative; overflow:hidden; }
.avatar-photo img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:inherit; }
.photo-upload { display:flex; align-items:center; gap:18px; }
.photo-preview { width:90px; height:90px; border-radius:14px; object-fit:cover; border:1px solid var(--line); background:var(--bg); }
.photo-preview.is-empty { display:inline-block; }
.photo-preview.is-empty::after { content:"No photo"; }

/* ===== Leave status badges + violet icon ===== */
.badge.pending  { background:#fef9c3; color:#a16207; }
.badge.approved { background:#dcfce7; color:#15803d; }
.badge.rejected { background:#fee2e2; color:#b91c1c; }
.badge.cancelled{ background:#f1f5f9; color:#64748b; }
.stat-card .icon.violet { background:linear-gradient(135deg,#7c3aed,#a78bfa); }

/* checkbox row (admin privilege toggles) */
.chk { display:flex; align-items:center; gap:9px; font-size:14px; font-weight:500; color:#334155; padding:8px 0; cursor:pointer; }
.chk input[type=checkbox] { width:17px; height:17px; accent-color: var(--sf-primary, #7c3aed); cursor:pointer; }

/* inline small input (reject/revision note fields) */
.sel { padding:7px 10px; border:1px solid var(--line); border-radius:8px; font-size:13px; font-family:inherit; background:#fff; color:var(--ink); }
.sel:focus { outline:none; border-color:var(--primary); }

/* ===== Standalone helpers for intern/mentor task views ===== */
.nm{font-weight:600;color:var(--text,#0f172a)}
.em{font-size:12.5px;color:var(--muted)}
/* key/value rows when used inside a plain panel-body (no .detail-grid wrapper) */
.panel-body > .row{display:flex;gap:16px;padding:12px 22px;border-bottom:1px solid var(--line)}
.panel-body > .row:last-child{border-bottom:none}
.panel-body > .row .k{flex:0 0 130px;font-size:12px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);padding-top:2px}
.panel-body > .row .v{flex:1;font-size:14.5px;font-weight:500;color:var(--text,#0f172a)}
/* padded panel-body for prose/forms in intern views (scoped, opt-in) */
.panel-body.pad{padding:18px 22px}
.panel-body.pad > p{margin:0}