/* VQ HRM Lite — clean card UI (BambooHR-inspired), Gusto-style inline hints */
:root{
  --amber:#d9a441;
  --bg:#0b0b0e;
  --brand:#d9a441;
  --brand-d:#b9862f;
  --card:#141417;
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-display:'Space Grotesk','Inter',system-ui,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,monospace;
  --green:#7fb069;
  --ink:#ece7db;
  --line:rgba(236,231,219,.12);
  --muted:#a39e93;
  --panel:#141417;
  --panel2:#1c1c21;
  --radius:3px;
  --red:#e5484d;
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-display:'Space Grotesk','Inter',system-ui,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,monospace;
}
*{box-sizing:border-box;}
body{margin:0;font-family:var(--font-body);
  background:var(--bg);color:var(--ink);font-size:14px;line-height:1.45;}
.app{display:flex;min-height:100vh;}
aside.sidebar{width:230px;background:var(--panel);color:#cbd5e1;padding:18px 12px;position:sticky;top:0;height:100vh;flex-shrink:0;}
.sidebar .brand{color:var(--ink);font-weight:700;font-size:17px;padding:4px 10px 16px;}
.sidebar .brand small{display:block;font-weight:400;color:#94a3b8;font-size:11px;}
.navbtn{display:block;width:100%;text-align:left;background:none;border:0;color:#cbd5e1;
  padding:10px 12px;border-radius:3px;font-size:14px;cursor:pointer;margin-bottom:2px;}
.navbtn:hover{background:var(--panel);color:var(--ink);}
.navbtn.active{background:var(--brand);color:var(--ink);font-weight:600;}
.navbtn .badge{background:var(--red);color:var(--ink);border-radius:3px;font-size:11px;padding:1px 7px;margin-left:6px;}
main{flex:1;min-width:0;padding:26px;max-width:1200px;}
h1{font-size:22px;margin:0 0 4px;}
.page{display:none;}.page.active{display:block;animation:fade .15s ease;}
@keyframes fade{from{opacity:.4;}to{opacity:1;}}
.sub{color:var(--muted);margin:0 0 18px;}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-bottom:20px;}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px;box-shadow:none;}
.stat .num{font-size:26px;font-weight:700;}
.stat .lbl{color:var(--muted);font-size:12px;margin-top:2px;}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center;}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:14px;}
.spacer{flex:1;}
table{width:100%;border-collapse:collapse;background:var(--card);border-radius:var(--radius);overflow:hidden;}
th,td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--line);}
th{background:var(--panel2);font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;}
tr:last-child td{border-bottom:0;}
tr:hover td{background:var(--panel2);}
input,select,textarea{font:inherit;padding:9px 11px;border:1px solid var(--line);border-radius:3px;background:var(--panel);width:100%;}
input:focus,select:focus,textarea:focus{outline:2px solid #bfdbfe;border-color:var(--brand);}
.field{margin-bottom:14px;}
.field label{display:block;font-weight:600;margin-bottom:5px;font-size:13px;}
.hint{font-size:12px;color:var(--muted);margin-top:4px;}
.btn{display:inline-block;border:0;border-radius:3px;padding:9px 16px;font:inherit;font-weight:600;cursor:pointer;background:color-mix(in srgb, #eef2f7 16%, transparent);color:var(--ink);}
.btn:hover{filter:brightness(.97);}
.btn.primary{background:var(--brand);color:var(--ink);}
.btn.primary:hover{background:var(--brand-d);}
.btn.green{background:var(--green);color:var(--ink);}
.btn.red{background:var(--red);color:var(--ink);}
.btn.small{padding:5px 10px;font-size:12px;}
.btn:disabled{opacity:.5;cursor:not-allowed;}
.pill{display:inline-block;padding:2px 10px;border-radius:3px;font-size:12px;font-weight:600;}
.p-P,.pill.present{background:var(--panel2);color:color-mix(in srgb, #166534 55%, #ece7db);}
.p-A,.pill.absent{background:var(--panel2);color:color-mix(in srgb, #991b1b 55%, #ece7db);}
.p-H,.pill.half{background:var(--panel2);color:color-mix(in srgb, #92400e 55%, #ece7db);}
.p-L,.pill.leave{background:var(--panel2);color:color-mix(in srgb, #1e40af 55%, #ece7db);}
.p-WO,.pill.wo{background:var(--panel2);color:color-mix(in srgb, #475569 55%, #ece7db);}
.p-HO,.pill.holiday{background:color-mix(in srgb, #ede9fe 16%, transparent);color:color-mix(in srgb, #5b21b6 55%, #ece7db);}
.pill.pending{background:var(--panel2);color:color-mix(in srgb, #92400e 55%, #ece7db);}
.pill.approved{background:var(--panel2);color:color-mix(in srgb, #166534 55%, #ece7db);}
.pill.rejected{background:var(--panel2);color:color-mix(in srgb, #991b1b 55%, #ece7db);}
/* modal */
.modal-back{position:fixed;inset:0;background:rgba(15,23,42,.5);display:none;align-items:flex-start;justify-content:center;padding:40px 16px;z-index:50;}
.modal-back.open{display:flex;}
.modal{background:var(--panel);border-radius:3px;max-width:560px;width:100%;padding:24px;max-height:88vh;overflow:auto;}
.modal h2{margin:0 0 4px;font-size:18px;}
.modal .x{float:right;border:0;background:none;font-size:20px;cursor:pointer;color:var(--muted);}
/* attendance grid */
.attgrid{overflow-x:auto;background:var(--card);border-radius:var(--radius);border:1px solid var(--line);}
.attgrid table{min-width:900px;}
.attgrid td.cell{padding:0;text-align:center;}
.cellbtn{width:100%;min-width:34px;padding:7px 2px;border:0;background:none;cursor:pointer;font-weight:700;font-size:12px;}
.cellbtn:hover{outline:2px solid var(--brand);}
.cellbtn.c-P{color:color-mix(in srgb, #166534 55%, #ece7db);}.cellbtn.c-A{color:color-mix(in srgb, #991b1b 55%, #ece7db);}.cellbtn.c-H{color:color-mix(in srgb, #92400e 55%, #ece7db);}
.cellbtn.c-L{color:color-mix(in srgb, #1e40af 55%, #ece7db);}.cellbtn.c-WO{color:#94a3b8;}.cellbtn.c-HO{color:color-mix(in srgb, #5b21b6 55%, #ece7db);}
.legend{font-size:12px;color:var(--muted);display:flex;gap:12px;flex-wrap:wrap;margin-top:8px;}
.markbtn{border:1px solid var(--line);background:var(--panel);border-radius:3px;padding:5px 9px;cursor:pointer;font-size:12px;font-weight:700;}
.markbtn.on-P{background:var(--panel2);border-color:#16a34a;}
.markbtn.on-A{background:var(--panel2);border-color:#dc2626;}
.markbtn.on-H{background:var(--panel2);border-color:#d97706;}
.markbtn.on-L{background:var(--panel2);border-color:#2563eb;}
.markbtn.on-HO{background:color-mix(in srgb, #ede9fe 16%, transparent);border-color:#7c3aed;}
/* calendar */
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;}
.cal .dow{font-size:11px;color:var(--muted);text-transform:uppercase;text-align:center;padding:6px;}
.cal .day{background:var(--card);border:1px solid var(--line);border-radius:3px;min-height:74px;padding:6px;font-size:12px;}
.cal .day.other{opacity:.35;}
.cal .day .dt{font-weight:700;}
.cal .day.out{background:var(--panel2);border-color:var(--line);}
.cal .who{font-size:11px;background:var(--panel2);border-radius:4px;padding:1px 5px;margin-top:3px;display:inline-block;}
/* toast */
#toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--panel);color:var(--ink);
  padding:11px 20px;border-radius:3px;font-size:14px;display:none;z-index:99;box-shadow:none;}
#toast.show{display:block;}
/* print */
.print-area{display:none;}
@media print{
  body>*{display:none!important;}
  .print-area{display:block!important;position:static;}
  .payslip{border:1px solid #000;padding:28px;max-width:700px;margin:0 auto;font-size:14px;color:#000;}
  .payslip h2{margin:0;}.payslip table{border:1px solid #000;}
  .payslip th,.payslip td{border:1px solid #000;padding:8px;}
}
@media(max-width:820px){
  aside.sidebar{width:64px;padding:14px 8px;}
  aside.sidebar .brand small, .navbtn .lbltxt{display:none;}
  .navbtn{text-align:center;font-size:18px;}
  main{padding:16px;}
}

/* ===== vq reskin normalization (auto-generated) ===== */
body{font-family:var(--font-body);background:var(--bg);color:var(--ink);}
h1,h2,h3,h4,.brand,.logo{font-family:var(--font-body);}
button{font-family:var(--font-body);}