@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700&family=Barlow:wght@400;500;600&display=swap');

/* Palet dari brand identity Lafirza Group: teal #036975 + amber #F9B117 */
:root{
  --navy:#036975; --navy2:#0A8494; --brand-amber:#F9B117; --bg:#F3F7F7; --card:#FFFFFF;
  --border:#DFE7E8; --text:#15282B; --text2:#5D7276; --text3:#93A5A8;
  --green:#0F9D58; --green-bg:#E6F6EC; --amber:#C77700; --amber-bg:#FFF2DE;
  --blue:#1A73E8; --blue-bg:#E8F0FE; --red:#D93025; --red-bg:#FDE8E7;
}
*{box-sizing:border-box;}
body{margin:0;font-family:'Barlow','Segoe UI',Arial,sans-serif;background:var(--bg);color:var(--text);}
h1,h2,h3,h4,.brand,.loginbrand,.stat .value,.clockcard .time{font-family:'Poppins','Segoe UI',Arial,sans-serif;}
button{font-family:'Barlow','Segoe UI',Arial,sans-serif;}
input:focus,select:focus,textarea:focus{outline:2px solid var(--brand-amber);outline-offset:0;border-color:var(--brand-amber);}
.loginwrap{min-height:100vh;display:flex;align-items:center;justify-content:center;}
.loginbox{background:#fff;border:1px solid var(--border);border-radius:12px;padding:32px;width:320px;}
.loginbrand{font-weight:600;font-size:16px;color:var(--navy);display:flex;align-items:center;gap:8px;}
.dot{width:9px;height:9px;border-radius:50%;background:var(--green);display:inline-block;}
.loginsub{font-size:12.5px;color:var(--text2);margin:6px 0 20px;}
.loginbox label{display:block;font-size:12px;color:var(--text2);margin:12px 0 5px;}
.loginbox input{width:100%;padding:10px;border:1px solid var(--border);border-radius:7px;font-size:13px;}
.loginbox button{margin-top:20px;width:100%;padding:11px;background:var(--navy);color:#fff;border:none;border-radius:7px;font-size:13px;font-weight:600;cursor:pointer;}
.loginerr{color:var(--red);font-size:12px;margin-top:10px;min-height:16px;}

.topbar{background:var(--navy);color:#fff;padding:14px 24px;display:flex;align-items:center;justify-content:space-between;}
.topbar .brand{font-weight:600;font-size:15px;}
.topbar .user{font-size:12.5px;color:#CBD5E1;display:flex;align-items:center;gap:10px;}
.topbar button{background:none;border:1px solid #3E96A1;color:#D7EDEF;padding:5px 10px;border-radius:6px;font-size:11.5px;cursor:pointer;}
.topbar img.logo{height:30px;display:block;}
.content{max-width:1100px;margin:0 auto;padding:24px;}
.pagehead h1{font-size:19px;margin:0 0 3px;font-weight:600;}
.pagehead p{margin:0 0 18px;font-size:13px;color:var(--text2);}
.grid{display:grid;gap:14px;}
.grid-4{grid-template-columns:repeat(4,1fr);}
.grid-2{grid-template-columns:2fr 1fr;}
.card{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:16px;}
.card h3{font-size:13px;margin:0 0 12px;font-weight:600;}
.stat .label{font-size:12px;color:var(--text2);margin-bottom:6px;}
.stat .value{font-size:24px;font-weight:600;}
table{width:100%;border-collapse:collapse;font-size:12.5px;}
th{text-align:left;color:var(--text2);font-weight:600;padding:8px 6px;border-bottom:1px solid var(--border);}
td{padding:9px 6px;border-bottom:1px solid #F1F2F4;}
.badge{display:inline-block;padding:2px 9px;border-radius:20px;font-size:11px;font-weight:600;}
.b-green{background:var(--green-bg);color:var(--green);}
.b-amber{background:var(--amber-bg);color:var(--amber);}
.b-blue{background:var(--blue-bg);color:var(--blue);}
.b-red{background:var(--red-bg);color:var(--red);}
.clockcard{background:var(--navy);color:#fff;border-radius:12px;padding:24px;text-align:center;}
.clockcard .time{font-size:34px;font-weight:600;}
.clockcard .status{font-size:12px;color:#B9C5DC;margin:10px 0 16px;}
.clockbtns{display:flex;gap:10px;justify-content:center;}
.clockbtns button{flex:1;max-width:150px;padding:11px;border-radius:8px;border:none;font-size:13px;font-weight:600;cursor:pointer;}
.btn-in{background:#3CCB7F;color:#0B3B23;}
.btn-out{background:var(--brand-amber);color:#4A3503;}
.formcard label{display:block;font-size:12px;color:var(--text2);margin:12px 0 5px;}
.formcard select,.formcard input,.formcard textarea{width:100%;padding:9px 10px;border:1px solid var(--border);border-radius:7px;font-size:13px;}
.formcard button{margin-top:16px;width:100%;padding:11px;background:var(--navy);color:#fff;border:none;border-radius:7px;font-size:13px;font-weight:600;cursor:pointer;}
.reqrow{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid #F1F2F4;font-size:12.5px;}
.reqrow:last-child{border-bottom:none;}
.approvebtns button{padding:5px 11px;border-radius:6px;border:none;font-size:11.5px;font-weight:600;cursor:pointer;margin-left:6px;}
.appbtn-ok{background:var(--green-bg);color:var(--green);}
.appbtn-no{background:var(--red-bg);color:var(--red);}
.hidden{display:none;}
.msg{font-size:12px;margin-top:10px;}
.msg.err{color:var(--red);}
.msg.ok{color:var(--green);}

/* Halaman kelola karyawan */
.grid-3{grid-template-columns:repeat(3,1fr);}
.fieldgroup{border:1px solid var(--border);border-radius:10px;padding:14px;background:#FAFBFC;}
.fieldgroup h4{margin:0;font-size:12.5px;font-weight:600;}
.fieldgroup .gsub{font-size:11px;color:var(--text3);margin:2px 0 6px;}
.fg-pribadi{border-top:3px solid #7C7CE0;}
.fg-pegawai{border-top:3px solid #34A87C;}
.fg-didik{border-top:3px solid #D0803C;}
.fg-komp{border-top:3px solid #C9A227;}
.fg-kinerja{border-top:3px solid #6FA83C;}
.fg-legal{border-top:3px solid #C05C8A;}
.photobox{width:90px;height:120px;border:1.5px dashed var(--border);border-radius:8px;object-fit:cover;background:#fff;display:block;}
.photorow{display:flex;gap:12px;align-items:flex-start;margin-top:6px;}
.photorow .hint{font-size:11px;color:var(--text3);}
.empphoto{width:30px;height:40px;border-radius:4px;object-fit:cover;background:#EEF0F3;}
@media (max-width:900px){.grid-3{grid-template-columns:1fr;}}
.fg-sehat{border-top:3px solid #3C9EA8;}
.docrow{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
.docrow input[type=file]{border:none;padding:4px 0;font-size:12px;}
.doclink{font-size:12px;color:var(--blue);font-weight:600;text-decoration:none;white-space:nowrap;}

/* Aksen amber di kartu jam staff + footer credit */
.clockcard .time{color:var(--brand-amber);}
.credit{text-align:center;font-size:12px;color:var(--text3);padding:26px 0 18px;}
.credit b{color:var(--navy);font-weight:600;}
.loginlogo{height:56px;display:block;margin:0 auto 6px;}

/* Login dengan latar foto front office + kartu kaca */
.loginpage{background:url('/assets/office-bg.jpg') center/cover no-repeat fixed;}
.loginpage .loginwrap{background:linear-gradient(160deg, rgba(3,105,117,.62), rgba(3,105,117,.28));}
.loginpage .loginbox{background:rgba(255,255,255,.94);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:none;box-shadow:0 24px 60px rgba(2,48,54,.35);}

/* Strip logo entitas Lafirza Group */
.logingroup{margin-top:22px;padding-top:16px;border-top:1px solid var(--border);text-align:center;}
.logingroup p{font-size:10.5px;color:var(--text3);margin:0 0 10px;letter-spacing:.8px;text-transform:uppercase;}
.grouplogos{display:flex;gap:20px;justify-content:center;align-items:center;}
.grouplogos img{height:28px;width:auto;}
.groupstrip{display:flex;justify-content:center;align-items:center;gap:24px;margin-top:26px;}
.groupstrip img{height:26px;width:auto;opacity:.92;}

/* Ikon garis minimalis */
svg.icon{width:16px;height:16px;flex:none;stroke:var(--navy);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.card h3,.fieldgroup h4{display:flex;align-items:center;gap:7px;}
.stat .label{display:flex;align-items:center;gap:6px;}
.stat .label svg.icon{width:14px;height:14px;}
.entityrow{display:flex;align-items:center;gap:9px;}
.entityrow img{height:20px;width:auto;}