:root{--blue:#123d7a;--gold:#f2b705;--bg:#f4f7fb;--text:#172033;--muted:#718096}*{box-sizing:border-box}body{margin:0;background:var(--bg);font-family:Inter,Segoe UI,Arial,sans-serif;color:var(--text)}aside{position:fixed;left:0;top:0;bottom:0;width:240px;background:linear-gradient(180deg,#123d7a,#0b2550);padding:22px 16px;color:white}aside .brand{font-weight:800;font-size:20px;margin-bottom:28px}aside a{display:block;color:white;text-decoration:none;padding:12px 14px;border-radius:12px;margin:6px 0;opacity:.92}aside a:hover{background:rgba(255,255,255,.12)}main{margin-left:240px;padding:28px}main.login-main{margin-left:0;min-height:100vh;display:flex;align-items:center;justify-content:center}header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}h1{margin:0;font-size:28px}.grid{display:grid;grid-template-columns:repeat(4,minmax(150px,1fr));gap:16px}.card,.login-card{background:white;border-radius:18px;padding:20px;box-shadow:0 10px 30px rgba(22,34,51,.08)}.card strong{display:block;font-size:34px;margin-top:10px;color:var(--blue)}.actions{margin:18px 0;display:flex;gap:10px;flex-wrap:wrap}.btn,button{border:0;background:var(--blue);color:white;text-decoration:none;padding:11px 16px;border-radius:12px;font-weight:700;cursor:pointer}.btn.secondary{background:#52627a}.filter{display:flex;gap:10px;margin:15px 0}.filter input,input{padding:11px;border:1px solid #d8e0ea;border-radius:10px;background:white}table{width:100%;border-collapse:collapse;background:white;border-radius:16px;overflow:hidden;box-shadow:0 10px 30px rgba(22,34,51,.06)}th,td{text-align:left;padding:12px 14px;border-bottom:1px solid #edf2f7}th{background:#eef4ff;color:#123d7a}.badge{background:#eef4ff;color:#123d7a;padding:6px 10px;border-radius:999px;font-weight:700}.alert{padding:12px 14px;border-radius:12px;margin-bottom:16px}.alert.ok{background:#e7f8ef;color:#136b3a}.alert.err{background:#fde8e8;color:#a61b1b}.login-card{width:100%;max-width:420px}.login-card label{display:block;margin:12px 0 6px}.login-card input{width:100%}.login-card button{width:100%;margin-top:18px}.muted{color:var(--muted);font-size:13px}@media(max-width:900px){aside{position:static;width:auto}main{margin-left:0;padding:16px}.grid{grid-template-columns:1fr 1fr}table{font-size:13px}}@media(max-width:560px){.grid{grid-template-columns:1fr}.filter{flex-direction:column}th,td{padding:9px}}

/* Badge / pill status presensi */
.badge-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 14px;
  border-radius:999px;
  font-weight:700;
  font-size:14px;
  line-height:1.2;
  white-space:nowrap;
  word-break:keep-all;
}

.badge-ok{
  background:#dcfce7 !important;
  color:#166534 !important;
}

.badge-danger{
  background:#fee2e2 !important;
  color:#b91c1c !important;
}

.badge-warn{
  background:#fef3c7 !important;
  color:#92400e !important;
}

.text-danger{
  color:#b91c1c !important;
  font-weight:700;
}

table td.status-cell,
table th.status-cell{
  white-space:nowrap;
  min-width:130px;
}

table td.num-cell,
table th.num-cell{
  white-space:nowrap;
}

/* =========================================================
   AFISGO Presensi - Premium UI Patch
   ========================================================= */

:root{
  --afisgo-navy:#0b2f63;
  --afisgo-navy-2:#123f7a;
  --afisgo-blue:#1267d8;
  --afisgo-bg:#f3f7fc;
  --afisgo-card:#ffffff;
  --afisgo-border:#e5edf7;
  --afisgo-text:#061b3a;
  --afisgo-muted:#64748b;
  --afisgo-green:#16a34a;
  --afisgo-red:#dc2626;
  --afisgo-yellow:#b45309;
}

body{
  background:linear-gradient(180deg,#f6f9fe 0%,#eef4fb 100%) !important;
  color:var(--afisgo-text);
}

aside{
  background:linear-gradient(180deg,#0b2f63 0%,#123f7a 60%,#0a2a57 100%) !important;
  box-shadow:12px 0 30px rgba(2, 22, 55, .12);
}

aside .brand{
  font-size:22px !important;
  font-weight:900 !important;
  letter-spacing:.2px;
  padding-bottom:22px;
  margin-bottom:16px;
  border-bottom:1px solid rgba(255,255,255,.15);
}

aside a{
  border-radius:14px;
  margin:6px 12px;
  padding:12px 16px !important;
  font-weight:700;
  color:#eaf2ff !important;
  transition:all .18s ease;
}

aside a:hover{
  background:rgba(255,255,255,.12);
  transform:translateX(3px);
}

main{
  padding:28px 34px !important;
}

header{
  margin-bottom:20px !important;
}

header h1{
  font-size:30px !important;
  font-weight:900 !important;
  color:#071f45;
  letter-spacing:-.5px;
}

/* alert */
.alert.ok{
  background:#e7f8ee !important;
  color:#08733b !important;
  border:1px solid #bbefd0;
  border-radius:16px;
  padding:14px 18px;
  font-weight:700;
}

/* actions */
.actions{
  margin:18px 0 20px !important;
}

.btn,
button{
  border:0 !important;
  border-radius:14px !important;
  padding:13px 22px !important;
  font-weight:900 !important;
  box-shadow:0 10px 20px rgba(11,47,99,.15);
  transition:all .18s ease;
}

.btn:hover,
button:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 24px rgba(11,47,99,.2);
}

/* filter menjadi card premium */
form.filter{
  background:#ffffff;
  border:1px solid var(--afisgo-border);
  border-radius:22px;
  padding:18px 20px !important;
  display:flex;
  align-items:end;
  gap:14px;
  flex-wrap:wrap;
  box-shadow:0 14px 40px rgba(15, 50, 95, .07);
  margin-bottom:14px;
}

form.filter label{
  display:flex;
  flex-direction:column;
  gap:7px;
  font-size:13px;
  font-weight:800;
  color:#0b2f63;
}

form.filter input,
form.filter select{
  height:44px;
  min-width:150px;
  border:1px solid #cbd8ea !important;
  border-radius:13px !important;
  padding:0 12px !important;
  background:#fbfdff;
  color:#061b3a;
  font-weight:700;
  outline:none;
}

form.filter input:focus,
form.filter select:focus{
  border-color:#1267d8 !important;
  box-shadow:0 0 0 4px rgba(18,103,216,.12);
}

form.filter select[name="employee_id"]{
  min-width:310px;
}

form.filter button{
  height:44px;
  min-width:92px;
  background:linear-gradient(135deg,#123f7a,#0b2f63) !important;
  color:white !important;
}

/* summary kecil */
.muted{
  color:#64748b !important;
  font-weight:700;
  margin:14px 0 !important;
}

.muted b{
  color:#0b2f63;
}

/* table premium */
table{
  width:100%;
  border-collapse:separate !important;
  border-spacing:0;
  background:white;
  border:1px solid var(--afisgo-border);
  border-radius:22px;
  overflow:hidden;
  box-shadow:0 18px 45px rgba(15, 50, 95, .08);
}

thead th{
  background:linear-gradient(180deg,#eef5ff,#e8f0fb) !important;
  color:#0b2f63 !important;
  font-size:14px !important;
  font-weight:900 !important;
  text-transform:none;
  padding:16px 16px !important;
  border-bottom:1px solid #dbe7f5 !important;
  white-space:nowrap;
}

tbody td{
  padding:15px 16px !important;
  border-bottom:1px solid #edf2f7 !important;
  font-size:15px;
  vertical-align:middle;
}

tbody tr:nth-child(even){
  background:#fbfdff;
}

tbody tr:hover{
  background:#f2f7ff !important;
}

/* kolom nama jangan terlalu pecah */
tbody td:first-child{
  font-weight:800;
  color:#071f45;
  min-width:190px;
  max-width:260px;
}

/* kolom tanggal dan jam */
tbody td:nth-child(2),
tbody td:nth-child(3),
tbody td:nth-child(4),
tbody td:nth-child(5),
tbody td:nth-child(6){
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}

/* badge premium */
.badge,
.badge-pill{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  padding:7px 14px !important;
  border-radius:999px !important;
  font-weight:900 !important;
  font-size:14px !important;
  line-height:1.1 !important;
  white-space:nowrap !important;
  min-width:max-content;
}

.badge-ok{
  background:#dcfce7 !important;
  color:#067034 !important;
}

.badge-danger{
  background:#fee2e2 !important;
  color:#b91c1c !important;
}

.badge-warn{
  background:#fef3c7 !important;
  color:#92400e !important;
}

.text-danger{
  color:#b91c1c !important;
  font-weight:900 !important;
}

.status-cell{
  white-space:nowrap !important;
  min-width:150px;
}

.num-cell{
  white-space:nowrap !important;
  min-width:110px;
}

/* Tidak Hadir lebih jelas */
td b[style*="dc3545"],
td b[style*="dc2626"]{
  display:inline-flex;
  background:#fee2e2;
  color:#b91c1c !important;
  padding:7px 14px;
  border-radius:999px;
  font-weight:900;
  white-space:nowrap;
}

/* mobile/tablet */
@media (max-width: 1100px){
  main{
    padding:20px !important;
  }

  form.filter{
    align-items:stretch;
  }

  form.filter label,
  form.filter input,
  form.filter select,
  form.filter button{
    width:100%;
  }

  form.filter select[name="employee_id"]{
    min-width:100%;
  }

  table{
    display:block;
    overflow-x:auto;
    white-space:nowrap;
  }
}

/* =========================================================
   AFISGO Presensi - Compact Premium Table Patch
   ========================================================= */

/* Konten agak dilebarkan */
main{
  padding:24px 26px !important;
}

/* Filter card lebih compact */
form.filter{
  padding:16px 18px !important;
  gap:12px !important;
  border-radius:20px !important;
}

form.filter input,
form.filter select{
  height:42px !important;
  font-size:14px !important;
}

form.filter select[name="employee_id"]{
  min-width:280px !important;
}

/* Tabel compact supaya muat */
table{
  table-layout:auto;
  font-size:14px !important;
}

thead th{
  padding:12px 12px !important;
  font-size:13px !important;
  line-height:1.15 !important;
}

tbody td{
  padding:10px 12px !important;
  font-size:14px !important;
  line-height:1.25 !important;
}

/* Nama jangan terlalu besar */
tbody td:first-child{
  font-size:14px !important;
  font-weight:800 !important;
  min-width:160px !important;
  max-width:220px !important;
}

/* Jam dan tanggal lebih rapat */
tbody td:nth-child(2),
tbody td:nth-child(3),
tbody td:nth-child(4),
tbody td:nth-child(5),
tbody td:nth-child(6){
  font-size:14px !important;
  white-space:nowrap !important;
}

/* Kolom keterangan jangan terlalu lebar */
tbody td:nth-child(7){
  min-width:90px;
  white-space:nowrap;
}

/* Badge lebih kecil tapi tetap premium */
.badge,
.badge-pill{
  padding:6px 11px !important;
  font-size:13px !important;
  line-height:1 !important;
  white-space:nowrap !important;
}

/* Kolom status dibuat cukup tapi tidak melebar berlebihan */
.status-cell{
  min-width:120px !important;
  white-space:nowrap !important;
}

.num-cell{
  min-width:88px !important;
  white-space:nowrap !important;
}

/* Header tetap menempel saat scroll panjang */
thead th{
  position:sticky;
  top:0;
  z-index:3;
}

/* Bungkus tabel agar kalau masih lebar, scroll hanya area tabel */
table{
  display:table;
}

/* Untuk layar sempit, izinkan scroll horizontal */
@media (max-width: 1400px){
  table{
    display:block;
    overflow-x:auto;
    white-space:nowrap;
  }
}

/* Biar area tabel tidak terlalu turun */
.muted{
  margin:10px 0 12px !important;
}

.actions{
  margin:12px 0 16px !important;
}

/* =========================================================
   AFISGO Presensi - Summary Cards
   ========================================================= */

.summary-cards{
  display:grid;
  grid-template-columns:repeat(7, minmax(120px, 1fr));
  gap:14px;
  margin:18px 0 18px;
}

.summary-card{
  background:#ffffff;
  border:1px solid #e5edf7;
  border-radius:20px;
  padding:16px 18px;
  box-shadow:0 12px 28px rgba(15, 50, 95, .07);
  position:relative;
  overflow:hidden;
}

.summary-card::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:6px;
  height:100%;
  background:#123f7a;
}

.summary-label{
  font-size:13px;
  font-weight:900;
  color:#64748b;
  margin-bottom:8px;
  white-space:nowrap;
}

.summary-value{
  font-size:28px;
  font-weight:1000;
  color:#071f45;
  line-height:1;
}

.card-total::before{ background:#0b2f63; }
.card-present::before{ background:#2563eb; }
.card-ok::before{ background:#16a34a; }
.card-late::before{ background:#dc2626; }
.card-early::before{ background:#f97316; }
.card-absent::before{ background:#991b1b; }
.card-warning::before{ background:#b45309; }

.card-late .summary-value,
.card-early .summary-value,
.card-absent .summary-value,
.card-warning .summary-value{
  color:#b91c1c;
}

.card-ok .summary-value,
.card-present .summary-value{
  color:#166534;
}

@media (max-width: 1500px){
  .summary-cards{
    grid-template-columns:repeat(4, minmax(140px, 1fr));
  }
}

@media (max-width: 900px){
  .summary-cards{
    grid-template-columns:repeat(2, minmax(140px, 1fr));
  }
}

@media (max-width: 520px){
  .summary-cards{
    grid-template-columns:1fr;
  }
}

/* Fix angka summary card */
.summary-card{
  min-height:86px !important;
}

.summary-value{
  display:block !important;
  margin-top:8px !important;
  font-size:30px !important;
  font-weight:1000 !important;
  color:#071f45 !important;
  line-height:1 !important;
}

.card-late .summary-value,
.card-early .summary-value,
.card-absent .summary-value,
.card-warning .summary-value{
  color:#b91c1c !important;
}

.card-ok .summary-value,
.card-present .summary-value{
  color:#166534 !important;
}

/* =========================================================
   AFISGO Presensi - Highlight Rows + Compact Summary
   ========================================================= */

/* Compact summary card */
.summary-cards{
  gap:10px !important;
  margin:14px 0 16px !important;
}

.summary-card{
  border-radius:16px !important;
  padding:12px 14px !important;
  min-height:72px !important;
}

.summary-label{
  font-size:12px !important;
  margin-bottom:6px !important;
}

.summary-value{
  font-size:25px !important;
  margin-top:4px !important;
}

/* Biar label panjang tetap rapi */
.summary-card .summary-label{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Highlight baris bermasalah */
tbody tr.row-absent{
  background:#fff5f5 !important;
}

tbody tr.row-absent:hover{
  background:#ffecec !important;
}

tbody tr.row-warning{
  background:#fffaf0 !important;
}

tbody tr.row-warning:hover{
  background:#fff3d6 !important;
}

tbody tr.row-early{
  background:#fff7ed !important;
}

tbody tr.row-early:hover{
  background:#ffedd5 !important;
}

tbody tr.row-late{
  background:#fef2f2 !important;
}

tbody tr.row-late:hover{
  background:#fee2e2 !important;
}

/* Garis kiri tipis sebagai indikator masalah */
tbody tr.row-absent td:first-child,
tbody tr.row-late td:first-child,
tbody tr.row-early td:first-child,
tbody tr.row-warning td:first-child{
  border-left:5px solid transparent;
}

tbody tr.row-absent td:first-child{
  border-left-color:#991b1b;
}

tbody tr.row-late td:first-child{
  border-left-color:#dc2626;
}

tbody tr.row-early td:first-child{
  border-left-color:#f97316;
}

tbody tr.row-warning td:first-child{
  border-left-color:#b45309;
}

/* Tombol Export Excel */
.export-btn{
  background:linear-gradient(135deg,#059669,#047857) !important;
  color:#ffffff !important;
  margin-left:10px;
}

.export-btn:hover{
  box-shadow:0 14px 24px rgba(5,150,105,.22) !important;
}

/* Tombol Export Excel */
.export-btn{
  background:linear-gradient(135deg,#059669,#047857) !important;
  color:#ffffff !important;
  margin-left:10px;
}

.export-btn:hover{
  box-shadow:0 14px 24px rgba(5,150,105,.22) !important;
}

/* Tombol Export Excel */
.export-btn{
  background:linear-gradient(135deg,#059669,#047857) !important;
  color:#ffffff !important;
  margin-left:10px;
}

.export-btn:hover{
  box-shadow:0 14px 24px rgba(5,150,105,.22) !important;
}

/* =========================================================
   AFISGO Presensi - Font Modern seperti aplikasi ChatGPT
   ========================================================= */

html,
body,
button,
input,
select,
textarea,
table,
th,
td{
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
}

/* Turunkan ketebalan agar tidak terlalu berat */
body{
  font-weight:500 !important;
}

header h1{
  font-weight:800 !important;
  letter-spacing:-0.6px;
}

aside .brand{
  font-weight:800 !important;
}

aside a{
  font-weight:650 !important;
}

form.filter label{
  font-weight:700 !important;
}

form.filter input,
form.filter select{
  font-weight:650 !important;
}

thead th{
  font-weight:750 !important;
  letter-spacing:-0.1px;
}

tbody td{
  font-weight:500 !important;
}

/* Nama pegawai tetap tegas tapi tidak terlalu berat */
tbody td:first-child{
  font-weight:700 !important;
}

/* Badge tetap jelas tapi tidak terlalu gemuk */
.badge,
.badge-pill{
  font-weight:700 !important;
}

/* Angka kartu ringkasan tetap kuat */
.summary-value{
  font-weight:800 !important;
}

.summary-label{
  font-weight:700 !important;
}

/* =========================================================
   AFISGO Presensi - Kalender Presensi
   ========================================================= */

.calendar-help{
  background:#e8f4ff;
  border:1px solid #bfdbfe;
  color:#0b2f63;
  border-radius:18px;
  padding:14px 18px;
  font-weight:700;
  margin-bottom:18px;
}

.calendar-form{
  background:#ffffff;
  border:1px solid #e5edf7;
  border-radius:22px;
  padding:20px;
  box-shadow:0 14px 40px rgba(15, 50, 95, .07);
  margin-bottom:24px;
}

.form-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(220px, 1fr));
  gap:16px;
}

.calendar-form label{
  display:flex;
  flex-direction:column;
  gap:7px;
  font-size:13px;
  font-weight:800;
  color:#0b2f63;
}

.calendar-form input,
.calendar-form select,
.calendar-form textarea{
  border:1px solid #cbd8ea;
  border-radius:13px;
  padding:11px 12px;
  background:#fbfdff;
  color:#061b3a;
  font-weight:650;
  outline:none;
  font-family:inherit;
}

.calendar-form input:focus,
.calendar-form select:focus,
.calendar-form textarea:focus{
  border-color:#1267d8;
  box-shadow:0 0 0 4px rgba(18,103,216,.12);
}

.notes-label{
  margin-top:16px;
}

.section-title{
  font-size:20px;
  font-weight:900;
  color:#071f45;
  margin:18px 0 12px;
}

.danger-btn{
  background:linear-gradient(135deg,#dc2626,#991b1b) !important;
  color:#ffffff !important;
  padding:8px 12px !important;
  font-size:12px !important;
  border-radius:10px !important;
}

@media (max-width: 1100px){
  .form-grid{
    grid-template-columns:1fr;
  }
}

/* =========================================================
   AFISGO Presensi - Lembur Presensi
   ========================================================= */

.overtime-page .calendar-help{
  background:#ecfdf5;
  border-color:#bbf7d0;
  color:#065f46;
}

.overtime-page .section-title{
  color:#064e3b;
}

/* Multi select pegawai lembur */
.multi-employee-select{
  min-height:180px;
}

.field-help{
  display:block;
  margin-top:4px;
  color:#64748b;
  font-size:12px;
  font-weight:600;
  line-height:1.35;
}

/* Scope lembur supaya tidak ambigu */
.scope-field{
  border-left:4px solid #10b981;
  padding-left:12px;
}

.multi-employee-select option{
  padding:5px 7px;
}

/* ===== LAYOUT FORM LEMBUR PRESENSI ===== */
.overtime-form-grid{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:18px 16px;
  align-items:start;
}

.overtime-form-grid .ot-date{grid-column:1; grid-row:1;}
.overtime-form-grid .ot-title{grid-column:2; grid-row:1;}
.overtime-form-grid .ot-scope{grid-column:3; grid-row:1;}

.overtime-form-grid .ot-employees{
  grid-column:1;
  grid-row:2 / span 3;
}

.overtime-form-grid .ot-start{grid-column:2; grid-row:2;}
.overtime-form-grid .ot-end{grid-column:3; grid-row:2;}

.overtime-form-grid .ot-minutes{grid-column:2; grid-row:3;}
.overtime-form-grid .ot-notes{grid-column:2 / span 2; grid-row:4;}

.overtime-form-grid .ot-actions{
  grid-column:1;
  grid-row:5;
  margin-top:4px;
}

.overtime-form-grid .multi-employee-select{
  min-height:265px;
}

.overtime-form-grid textarea{
  min-height:74px;
  resize:vertical;
}

.overtime-form-grid small.field-help{
  display:block;
  margin-top:8px;
  color:#64748b;
  line-height:1.4;
}

@media (max-width: 1100px){
  .overtime-form-grid{
    grid-template-columns:1fr 1fr;
  }

  .overtime-form-grid .ot-date{grid-column:1; grid-row:auto;}
  .overtime-form-grid .ot-title{grid-column:2; grid-row:auto;}
  .overtime-form-grid .ot-scope{grid-column:1 / span 2; grid-row:auto;}
  .overtime-form-grid .ot-employees{grid-column:1 / span 2; grid-row:auto;}
  .overtime-form-grid .ot-start{grid-column:1; grid-row:auto;}
  .overtime-form-grid .ot-end{grid-column:2; grid-row:auto;}
  .overtime-form-grid .ot-minutes{grid-column:1 / span 2; grid-row:auto;}
  .overtime-form-grid .ot-notes{grid-column:1 / span 2; grid-row:auto;}
  .overtime-form-grid .ot-actions{grid-column:1 / span 2; grid-row:auto;}
}

@media (max-width: 700px){
  .overtime-form-grid{
    grid-template-columns:1fr;
  }

  .overtime-form-grid .ot-date,
  .overtime-form-grid .ot-title,
  .overtime-form-grid .ot-scope,
  .overtime-form-grid .ot-employees,
  .overtime-form-grid .ot-start,
  .overtime-form-grid .ot-end,
  .overtime-form-grid .ot-minutes,
  .overtime-form-grid .ot-notes,
  .overtime-form-grid .ot-actions{
    grid-column:1;
    grid-row:auto;
  }
}

/* =========================================================
   FINAL ALIGNMENT - FORM LEMBUR PRESENSI
   Samakan posisi label/teks sesuai layout 3 kolom
   ========================================================= */

.overtime-page .calendar-form{
  padding:22px 24px !important;
}

/* Paksa grid khusus halaman lembur */
.overtime-page .form-grid{
  display:grid !important;
  grid-template-columns: 1fr 1fr 1fr !important;
  gap:18px 16px !important;
  align-items:start !important;
}

/* Semua label punya tinggi/arah yang konsisten */
.overtime-page .calendar-form label{
  display:flex !important;
  flex-direction:column !important;
  gap:8px !important;
  margin:0 !important;
  align-self:start !important;
}

/* Label teks rata dan tinggi sama */
.overtime-page .calendar-form label > span,
.overtime-page .calendar-form label{
  line-height:1.2 !important;
}

/* Samakan tinggi input/select/time */
.overtime-page .calendar-form input,
.overtime-page .calendar-form select{
  height:52px !important;
  min-height:52px !important;
  box-sizing:border-box !important;
}

/* Textarea catatan */
.overtime-page .calendar-form textarea{
  min-height:76px !important;
  height:76px !important;
  box-sizing:border-box !important;
}

/* Posisi field sesuai gambar */
.overtime-page label:has(input[name="overtime_date"]){
  grid-column:1 !important;
  grid-row:1 !important;
}

.overtime-page label:has(input[name="title"]){
  grid-column:2 !important;
  grid-row:1 !important;
}

.overtime-page label:has(select[name="unit_code"]){
  grid-column:3 !important;
  grid-row:1 !important;
}

.overtime-page label:has(select[name="employee_ids[]"]){
  grid-column:1 !important;
  grid-row:2 / span 4 !important;
}

.overtime-page label:has(input[name="overtime_start"]){
  grid-column:2 !important;
  grid-row:2 !important;
}

.overtime-page label:has(input[name="overtime_end"]){
  grid-column:3 !important;
  grid-row:2 !important;
}

.overtime-page label:has(input[name="minimum_minutes"]){
  grid-column:2 !important;
  grid-row:3 !important;
}

.overtime-page label:has(textarea[name="notes"]){
  grid-column:2 / span 2 !important;
  grid-row:4 !important;
}

/* Pegawai select lebih tinggi seperti gambar */
.overtime-page .multi-employee-select{
  height:250px !important;
  min-height:250px !important;
}

/* Help text tetap di bawah select, tidak menggeser label lain */
.overtime-page .field-help{
  margin-top:2px !important;
  font-size:12px !important;
  line-height:1.35 !important;
}

/* Tombol simpan di bawah kiri */
.overtime-page .actions{
  margin-top:18px !important;
}

/* Supaya tombol tidak ikut ketarik aneh */
.overtime-page .calendar-form > .actions{
  display:block !important;
}

/* Mobile/tablet tetap aman */
@media (max-width: 1100px){
  .overtime-page .form-grid{
    grid-template-columns:1fr 1fr !important;
  }

  .overtime-page label:has(input[name="overtime_date"]),
  .overtime-page label:has(input[name="title"]),
  .overtime-page label:has(select[name="unit_code"]),
  .overtime-page label:has(select[name="employee_ids[]"]),
  .overtime-page label:has(input[name="overtime_start"]),
  .overtime-page label:has(input[name="overtime_end"]),
  .overtime-page label:has(input[name="minimum_minutes"]),
  .overtime-page label:has(textarea[name="notes"]){
    grid-column:auto !important;
    grid-row:auto !important;
  }

  .overtime-page label:has(select[name="employee_ids[]"]),
  .overtime-page label:has(textarea[name="notes"]){
    grid-column:1 / span 2 !important;
  }
}

@media (max-width: 700px){
  .overtime-page .form-grid{
    grid-template-columns:1fr !important;
  }

  .overtime-page label:has(select[name="employee_ids[]"]),
  .overtime-page label:has(textarea[name="notes"]){
    grid-column:1 !important;
  }
}


/* Tinggikan kolom Pilih Pegawai */
.overtime-page .overtime-grid .ov-employees{
  grid-column:1 !important;
  grid-row:2 / span 6 !important;
}

.overtime-page .overtime-grid .multi-employee-select{
  height:420px !important;
  min-height:420px !important;
  max-height:420px !important;
  width:100% !important;
  box-sizing:border-box !important;
}


.overtime-page .overtime-grid .field-help{
  display:block !important;
  margin-top:8px !important;
  line-height:1.45 !important;
}

/* Kalender Presensi - multi select unit */
.calendar-unit-multiselect{
  min-height:132px !important;
  height:132px !important;
}

.calendar-page .field-help{
  display:block !important;
  margin-top:4px !important;
  color:#64748b !important;
  font-size:12px !important;
  font-weight:600 !important;
  line-height:1.35 !important;
}

/* Badge khusus status Libur */
.badge-libur{
  background:#dbeafe !important;
  color:#1d4ed8 !important;
  border:1px solid #bfdbfe !important;
  font-weight:800 !important;
}

/* Row libur dibuat biru sangat lembut */
tr:has(.badge-libur){
  background:#f8fbff !important;
}

/* FINAL: Status Libur harus beda dari status lain */
.badge-libur{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-width:76px !important;
  padding:7px 14px !important;
  border-radius:999px !important;
  background:#dbeafe !important;
  color:#1d4ed8 !important;
  border:1px solid #93c5fd !important;
  font-weight:900 !important;
  box-shadow:0 8px 18px rgba(29,78,216,.10) !important;
}

tr.row-libur td{
  background:#f0f7ff !important;
}

tr.row-libur td:first-child{
  border-left:5px solid #3b82f6 !important;
}

/* FINAL badge status pada kolom Keterangan */
.badge-libur{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-width:78px !important;
  padding:7px 14px !important;
  border-radius:999px !important;
  background:#dbeafe !important;
  color:#1d4ed8 !important;
  border:1px solid #93c5fd !important;
  font-weight:900 !important;
}

tr.row-libur td{
  background:#f0f7ff !important;
}

tr.row-libur td:first-child{
  border-left:5px solid #3b82f6 !important;
}

/* Status dan kolom lembur */
.card-overtime{
  border-top:4px solid #7c3aed !important;
}

.card-overtime .summary-value{
  color:#6d28d9 !important;
}

.text-overtime{
  color:#6d28d9 !important;
  font-weight:900 !important;
  white-space:nowrap !important;
}

/* Kolom dan kartu lembur */
.card-overtime{
  border-top:4px solid #7c3aed !important;
}

.card-overtime .summary-value{
  color:#6d28d9 !important;
  font-size:24px !important;
  font-weight:900 !important;
}

.text-overtime{
  color:#6d28d9 !important;
  font-weight:900 !important;
  white-space:nowrap !important;
}

/* Rapikan tinggi kolom Pilih Pegawai di Lembur Presensi */
.overtime-form .multi-employee-select,
.multi-employee-select{
  min-height:220px !important;
  height:260px !important;
  max-height:260px !important;
  overflow-y:auto !important;
}

/* Biar area form lembur tidak terlalu tinggi */
.overtime-form .ov-employees{
  align-self:start !important;
}

/* Catatan lembur dibuat proporsional */
.overtime-form textarea[name="notes"]{
  min-height:110px !important;
  max-height:150px !important;
  resize:vertical !important;
}

/* Tombol simpan lembur tetap rapi di bawah */
.overtime-form button[type="submit"]{
  width:max-content !important;
  min-width:240px !important;
}

/* Jika class form berbeda, tetap paksa select pegawai lembur compact */
select[name="employee_ids[]"]{
  height:260px !important;
  max-height:260px !important;
}

/* Final posisi tombol Simpan Aturan Lembur */
.overtime-page .overtime-grid .ot-actions{
  grid-column:1 !important;
  grid-row:4 !important;
  margin-top:2px !important;
  display:flex !important;
  justify-content:flex-start !important;
  align-items:center !important;
}

.overtime-page .overtime-grid .ot-actions button{
  position:static !important;
  min-width:240px !important;
  width:max-content !important;
  margin:0 !important;
}

/* Catatan tetap di kanan */
.overtime-page .overtime-grid .ov-notes{
  grid-column:2 / span 2 !important;
  grid-row:3 / span 2 !important;
}

/* FINAL Lembur: tombol simpan di bawah Catatan area kanan */
.overtime-page .overtime-grid .ov-notes{
  grid-column:2 / span 2 !important;
  grid-row:3 !important;
}

.overtime-page .overtime-grid .ot-actions{
  grid-column:2 / span 2 !important;
  grid-row:4 !important;
  margin-top:0 !important;
  display:flex !important;
  justify-content:flex-start !important;
  align-items:center !important;
}

.overtime-page .overtime-grid .ot-actions button{
  position:static !important;
  min-width:240px !important;
  width:max-content !important;
  margin:0 !important;
}

/* FINAL: Rapikan area kartu ringkasan Rekap Harian */
.summary-cards{
  display:grid !important;
  grid-template-columns:repeat(4, minmax(180px, 1fr)) !important;
  gap:14px 18px !important;
  align-items:stretch !important;
  margin:18px 0 22px 0 !important;
  max-width:100% !important;
}

.summary-card{
  min-height:92px !important;
  padding:18px 18px !important;
  border-radius:16px !important;
  background:#ffffff !important;
  box-shadow:0 10px 26px rgba(15, 23, 42, .07) !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
}

.summary-card .summary-label,
.summary-label{
  font-size:14px !important;
  font-weight:800 !important;
  color:#64748b !important;
  line-height:1.2 !important;
  margin-bottom:8px !important;
}

.summary-card .summary-value,
.summary-value{
  font-size:26px !important;
  line-height:1 !important;
  font-weight:900 !important;
}

/* Biar kartu Lembur beda tapi tetap halus */
.card-overtime{
  border-left:5px solid #7c3aed !important;
  border-top:0 !important;
}

.card-overtime .summary-value{
  color:#6d28d9 !important;
}

/* Tablet */
@media (max-width: 1200px){
  .summary-cards{
    grid-template-columns:repeat(3, minmax(180px, 1fr)) !important;
  }
}

/* HP */
@media (max-width: 700px){
  .summary-cards{
    grid-template-columns:repeat(2, minmax(140px, 1fr)) !important;
    gap:12px !important;
  }

  .summary-card{
    min-height:84px !important;
    padding:15px !important;
  }
}

@media (max-width: 460px){
  .summary-cards{
    grid-template-columns:1fr !important;
  }
}

/* FINAL FIX Rekap Harian: summary cards 4 x 2 rapi */
main .summary-cards{
  display:grid !important;
  grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
  gap:14px 16px !important;
  align-items:stretch !important;
  margin:16px 0 20px 0 !important;
  width:100% !important;
}

main .summary-cards .summary-card{
  min-width:0 !important;
  min-height:82px !important;
  padding:16px 18px !important;
  border-radius:16px !important;
  background:#ffffff !important;
  box-shadow:0 10px 26px rgba(15,23,42,.07) !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
}

main .summary-cards .summary-label{
  font-size:13px !important;
  font-weight:800 !important;
  color:#64748b !important;
  line-height:1.2 !important;
  margin:0 0 8px 0 !important;
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
}

main .summary-cards .summary-value{
  font-size:26px !important;
  line-height:1 !important;
  font-weight:900 !important;
  margin:0 !important;
}

/* Warna angka per kartu tetap jelas */
main .summary-cards .card-present .summary-value,
main .summary-cards .card-ok .summary-value{
  color:#166534 !important;
}

main .summary-cards .card-late .summary-value,
main .summary-cards .card-early .summary-value,
main .summary-cards .card-absent .summary-value,
main .summary-cards .card-warning .summary-value{
  color:#b91c1c !important;
}

main .summary-cards .card-overtime .summary-value{
  color:#6d28d9 !important;
}

/* Kartu lembur */
main .summary-cards .card-overtime{
  border-left:5px solid #7c3aed !important;
  border-top:0 !important;
}

/* Responsif */
@media (max-width: 1200px){
  main .summary-cards{
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px){
  main .summary-cards{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 480px){
  main .summary-cards{
    grid-template-columns:1fr !important;
  }
}

/* FINAL FIX: Rekap Harian summary cards cukup 1 baris di PC */
main .summary-cards{
  display:grid !important;
  grid-template-columns:repeat(8, minmax(115px, 1fr)) !important;
  gap:12px !important;
  align-items:stretch !important;
  margin:14px 0 18px 0 !important;
  width:100% !important;
}

main .summary-cards .summary-card{
  min-width:0 !important;
  min-height:78px !important;
  padding:14px 14px !important;
  border-radius:15px !important;
}

main .summary-cards .summary-label{
  font-size:12px !important;
  font-weight:800 !important;
  line-height:1.15 !important;
  margin:0 0 7px 0 !important;
  white-space:normal !important;
}

main .summary-cards .summary-value{
  font-size:25px !important;
  line-height:1 !important;
  margin:0 !important;
}

/* Laptop kecil: tetap coba 4 kolom */
@media (max-width: 1350px){
  main .summary-cards{
    grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
  }
}

/* Tablet */
@media (max-width: 900px){
  main .summary-cards{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }
}

/* HP */
@media (max-width: 480px){
  main .summary-cards{
    grid-template-columns:1fr !important;
  }
}

/* FINAL FIX: teks summary card rata tengah */
main .summary-cards .summary-card{
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  text-align:center !important;
}

main .summary-cards .summary-label{
  text-align:center !important;
  margin-bottom:8px !important;
}

main .summary-cards .summary-value{
  text-align:center !important;
  width:100% !important;
}

/* FINAL: badge dan row izin dari AFISGO Care */
.badge-leave{
  background:#DBEAFE !important;
  color:#1D4ED8 !important;
  border:1px solid #93C5FD !important;
}

.badge-sick{
  background:#FEF3C7 !important;
  color:#B45309 !important;
  border:1px solid #FCD34D !important;
}

.badge-cuti{
  background:#F3E8FF !important;
  color:#6D28D9 !important;
  border:1px solid #C4B5FD !important;
}

.badge-duty{
  background:#CCFBF1 !important;
  color:#0F766E !important;
  border:1px solid #5EEAD4 !important;
}

.row-leave td{
  background:#F8FBFF !important;
}

.card-leave::before{
  background:#2563EB !important;
}

.card-leave .summary-value{
  color:#1D4ED8 !important;
}

/* FINAL OVERRIDE: Rekap Harian 9 summary card rapi 1 baris di PC */
main .summary-cards{
  display:grid !important;
  grid-template-columns:repeat(9, minmax(0, 1fr)) !important;
  gap:8px !important;
  align-items:stretch !important;
  margin:12px 0 18px 0 !important;
  width:100% !important;
}

main .summary-cards .summary-card{
  min-width:0 !important;
  min-height:66px !important;
  padding:9px 8px !important;
  border-radius:13px !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  text-align:center !important;
}

main .summary-cards .summary-label{
  font-size:11px !important;
  line-height:1.12 !important;
  margin:0 0 5px 0 !important;
  font-weight:800 !important;
  text-align:center !important;
  white-space:normal !important;
}

main .summary-cards .summary-value{
  font-size:23px !important;
  line-height:1 !important;
  margin:0 !important;
  text-align:center !important;
}

/* Laptop sedang: tetap 1 baris, kotak lebih kecil */
@media (max-width: 1500px){
  main .summary-cards{
    grid-template-columns:repeat(9, minmax(0, 1fr)) !important;
    gap:7px !important;
  }

  main .summary-cards .summary-card{
    min-height:62px !important;
    padding:8px 6px !important;
  }

  main .summary-cards .summary-label{
    font-size:10.5px !important;
  }

  main .summary-cards .summary-value{
    font-size:21px !important;
  }
}

/* Tablet */
@media (max-width: 900px){
  main .summary-cards{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }
}

/* HP */
@media (max-width: 480px){
  main .summary-cards{
    grid-template-columns:1fr !important;
  }
}

/* FINAL POLISH: font Rekap Harian lebih ringan dan nyaman dibaca */
main{
  font-weight:500 !important;
}

main h1{
  font-weight:800 !important;
  letter-spacing:-0.5px !important;
}

main .filter label,
main label{
  font-weight:700 !important;
}

main select,
main input{
  font-weight:600 !important;
}

main .btn,
main button{
  font-weight:700 !important;
}

/* Summary card tidak terlalu tebal */
main .summary-cards .summary-label{
  font-weight:700 !important;
  color:#64748b !important;
}

main .summary-cards .summary-value{
  font-weight:800 !important;
}

/* Tabel Rekap Harian lebih soft */
main table th{
  font-weight:700 !important;
  font-size:13px !important;
}

main table td{
  font-weight:500 !important;
  font-size:13px !important;
}

/* Nama pegawai tetap jelas, tapi tidak terlalu berat */
main table td:first-child{
  font-weight:700 !important;
}

/* Badge jangan terlalu bold */
main .badge-pill,
main .badge{
  font-weight:700 !important;
}

/* Angka merah/hijau tetap tegas tapi tidak berlebihan */
main .danger,
main .ok{
  font-weight:700 !important;
}

/* =========================================================
   FINAL: Dashboard Landing Page AFISGO Presensi Animated
   Scoped khusus halaman dashboard agar tidak mengganggu modul lain
   ========================================================= */
.dashboard-landing{
  display:flex;
  flex-direction:column;
  gap:24px;
}

.afisgo-hero{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(280px,.7fr);
  gap:22px;
  padding:34px;
  border-radius:30px;
  overflow:hidden;
  color:#ffffff;
  background:
    radial-gradient(circle at 15% 20%, rgba(34,197,94,.32), transparent 30%),
    radial-gradient(circle at 88% 12%, rgba(242,183,5,.30), transparent 25%),
    linear-gradient(135deg,#061d46 0%,#123d7a 48%,#0f766e 100%);
  box-shadow:0 26px 68px rgba(15,23,42,.20);
  isolation:isolate;
}

.afisgo-hero::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    linear-gradient(115deg, transparent 0%, rgba(255,255,255,.22) 42%, transparent 46%),
    linear-gradient(135deg, rgba(255,255,255,.08), transparent 55%);
  transform:translateX(-120%);
  animation:heroShine 7s ease-in-out infinite;
  z-index:0;
}

.afisgo-hero::after{
  content:"";
  position:absolute;
  right:-80px;
  bottom:-120px;
  width:360px;
  height:360px;
  border-radius:999px;
  background:rgba(255,255,255,.09);
  animation:heroBlob 8s ease-in-out infinite alternate;
  z-index:0;
}

.hero-orbit{
  position:absolute;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.13);
  z-index:0;
  pointer-events:none;
}

.hero-orbit-one{
  width:260px;
  height:260px;
  right:70px;
  top:-95px;
  animation:slowSpin 18s linear infinite;
}

.hero-orbit-two{
  width:180px;
  height:180px;
  left:46%;
  bottom:-80px;
  animation:slowSpinReverse 22s linear infinite;
}

.hero-lightning{
  position:absolute;
  top:18px;
  right:34%;
  width:86px;
  height:150px;
  opacity:.18;
  background:linear-gradient(145deg, transparent 0 18%, #ffffff 18% 24%, transparent 24% 43%, #facc15 43% 50%, transparent 50%);
  filter:blur(.2px) drop-shadow(0 0 14px rgba(250,204,21,.55));
  animation:softLightning 5.5s ease-in-out infinite;
  z-index:0;
  pointer-events:none;
}

.hero-particles{
  position:absolute;
  inset:0;
  overflow:hidden;
  z-index:0;
  pointer-events:none;
}

.hero-particles span{
  position:absolute;
  width:7px;
  height:7px;
  border-radius:999px;
  background:rgba(255,255,255,.75);
  box-shadow:0 0 18px rgba(255,255,255,.7);
  animation:floatParticle 9s linear infinite;
}

.hero-particles span:nth-child(1){left:8%; bottom:-20px; animation-delay:0s; animation-duration:9s;}
.hero-particles span:nth-child(2){left:18%; bottom:-30px; animation-delay:1.2s; animation-duration:12s; width:5px;height:5px;}
.hero-particles span:nth-child(3){left:31%; bottom:-25px; animation-delay:2.1s; animation-duration:10s;}
.hero-particles span:nth-child(4){left:45%; bottom:-18px; animation-delay:.8s; animation-duration:13s; width:4px;height:4px;}
.hero-particles span:nth-child(5){left:58%; bottom:-28px; animation-delay:3.1s; animation-duration:11s;}
.hero-particles span:nth-child(6){left:69%; bottom:-18px; animation-delay:1.7s; animation-duration:12s; width:5px;height:5px;}
.hero-particles span:nth-child(7){left:78%; bottom:-30px; animation-delay:2.8s; animation-duration:10s;}
.hero-particles span:nth-child(8){left:87%; bottom:-20px; animation-delay:.4s; animation-duration:14s; width:4px;height:4px;}
.hero-particles span:nth-child(9){left:93%; bottom:-28px; animation-delay:4s; animation-duration:12s;}
.hero-particles span:nth-child(10){left:38%; bottom:-22px; animation-delay:4.8s; animation-duration:15s; width:4px;height:4px;}

.afisgo-hero-content,
.afisgo-hero-visual{
  position:relative;
  z-index:2;
}

.afisgo-hero-badge{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.22);
  font-size:12px;
  font-weight:800;
  letter-spacing:.2px;
  margin-bottom:14px;
  backdrop-filter:blur(8px);
}

.hero-dot{
  width:9px;
  height:9px;
  border-radius:999px;
  background:#22c55e;
  box-shadow:0 0 0 6px rgba(34,197,94,.18);
  animation:pulseDot 1.8s ease-in-out infinite;
}

.afisgo-hero-title{
  margin:0 0 12px 0;
  font-size:44px;
  line-height:1;
  font-weight:900;
  letter-spacing:-1.2px;
}

.afisgo-hero-subtitle{
  max-width:760px;
  margin:0;
  font-size:15.5px;
  line-height:1.75;
  color:rgba(255,255,255,.88);
}

.afisgo-hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:24px;
}

.hero-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:12px 16px;
  border-radius:14px;
  text-decoration:none;
  font-weight:800;
  font-size:13px;
  transition:.18s ease;
}

.hero-btn:hover{
  transform:translateY(-2px);
}

.hero-btn-primary{
  color:#063b2d;
  background:#ffffff;
}

.hero-btn-secondary{
  color:#ffffff;
  background:#059669;
  box-shadow:0 14px 32px rgba(5,150,105,.28);
}

.hero-btn-ghost{
  color:#ffffff;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.2);
}

.afisgo-hero-visual{
  display:grid;
  align-content:center;
  gap:14px;
}

.hero-mini-card{
  padding:18px;
  border-radius:20px;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.2);
  backdrop-filter:blur(10px);
  animation:miniCardFloat 5.5s ease-in-out infinite;
}

.hero-mini-card:nth-child(2){animation-delay:.8s;}
.hero-mini-card:nth-child(3){animation-delay:1.4s;}

.hero-mini-card span{
  display:block;
  font-size:12px;
  color:rgba(255,255,255,.75);
  font-weight:700;
  margin-bottom:8px;
}

.hero-mini-card strong{
  display:block;
  font-size:20px;
  color:#ffffff;
  font-weight:900;
}

.hero-mini-card-gold{
  background:rgba(250,204,21,.14);
  border-color:rgba(250,204,21,.25);
}

.kpi-grid{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:14px;
}

.kpi-card{
  display:flex;
  gap:13px;
  align-items:flex-start;
  min-height:126px;
  padding:18px;
  border-radius:22px;
  background:#ffffff;
  border:1px solid rgba(148,163,184,.18);
  box-shadow:0 16px 38px rgba(15,23,42,.07);
  transition:.18s ease;
}

.kpi-card:hover,
.quick-action-card:hover,
.feature-card:hover,
.workflow-step:hover{
  transform:translateY(-3px);
  box-shadow:0 20px 48px rgba(18,61,122,.13);
}

.kpi-icon{
  width:38px;
  height:38px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#eff6ff;
  font-size:18px;
  flex:0 0 auto;
}

.kpi-label{
  font-size:12px;
  color:#64748b;
  font-weight:800;
  margin-bottom:8px;
}

.kpi-value{
  font-size:30px;
  line-height:1;
  font-weight:900;
  color:#123d7a;
  letter-spacing:-.5px;
}

.kpi-note{
  margin-top:8px;
  color:#94a3b8;
  font-size:11.5px;
  line-height:1.35;
  font-weight:600;
}

.kpi-card-success .kpi-value{color:#166534;}
.kpi-card-warning .kpi-value{color:#b45309;}
.kpi-card-danger .kpi-value{color:#b91c1c;}
.kpi-card-info .kpi-value{color:#1d4ed8;}

.quick-actions{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
}

.quick-action-card{
  display:block;
  padding:18px;
  border-radius:22px;
  background:#ffffff;
  color:#0f172a;
  text-decoration:none;
  border:1px solid rgba(148,163,184,.18);
  box-shadow:0 14px 34px rgba(15,23,42,.06);
  transition:.18s ease;
}

.quick-action-title{
  font-size:15px;
  font-weight:900;
  color:#0b2f63;
  margin-bottom:8px;
}

.quick-action-desc{
  margin:0;
  font-size:13px;
  line-height:1.55;
  color:#64748b;
  font-weight:500;
}

.about-presensi-card,
.features-section,
.workflow-section,
.integration-card{
  background:#ffffff;
  border-radius:26px;
  padding:26px;
  border:1px solid rgba(148,163,184,.18);
  box-shadow:0 16px 42px rgba(15,23,42,.07);
}

.section-eyebrow{
  display:inline-flex;
  align-items:center;
  margin-bottom:8px;
  color:#0f766e;
  font-size:12px;
  font-weight:900;
  letter-spacing:.5px;
  text-transform:uppercase;
}

.section-title{
  margin:0 0 12px 0;
  color:#08275a;
  font-size:24px;
  line-height:1.2;
  font-weight:900;
  letter-spacing:-.4px;
}

.section-description{
  margin:0 0 12px 0;
  max-width:980px;
  color:#475569;
  font-size:14.5px;
  line-height:1.8;
  font-weight:500;
}

.about-presensi-highlight{
  margin-top:16px;
  display:inline-flex;
  padding:12px 14px;
  border-radius:16px;
  background:#ecfdf5;
  color:#047857;
  font-weight:800;
  border:1px solid #bbf7d0;
}

.features-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  margin-top:16px;
}

.feature-card{
  padding:18px;
  border-radius:20px;
  background:linear-gradient(180deg,#f8fbff,#ffffff);
  border:1px solid rgba(148,163,184,.18);
  transition:.18s ease;
}

.feature-icon{
  width:40px;
  height:40px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#eef6ff;
  margin-bottom:12px;
}

.feature-card h4,
.workflow-step h4{
  margin:0 0 8px 0;
  color:#0b2f63;
  font-size:15px;
  font-weight:900;
}

.feature-card p,
.workflow-step p{
  margin:0;
  color:#64748b;
  font-size:13px;
  line-height:1.6;
  font-weight:500;
}

.workflow-steps{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  margin-top:16px;
}

.workflow-step{
  position:relative;
  padding:18px;
  border-radius:20px;
  background:#f8fbff;
  border:1px solid rgba(148,163,184,.18);
  transition:.18s ease;
}

.workflow-number{
  width:34px;
  height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:#123d7a;
  color:#ffffff;
  font-weight:900;
  margin-bottom:12px;
}

.workflow-note{
  margin-top:16px;
  padding:14px 16px;
  border-radius:18px;
  background:#fff7ed;
  color:#9a3412;
  border:1px solid #fed7aa;
  font-size:13px;
  line-height:1.6;
  font-weight:700;
}

.integration-card{
  display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:20px;
  align-items:center;
}

.integration-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}

.integration-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px;
  border-radius:18px;
  background:#f8fbff;
  border:1px solid rgba(148,163,184,.18);
}

.integration-item strong{
  color:#0b2f63;
  font-size:13.5px;
  font-weight:900;
}

.integration-item small{
  margin-left:auto;
  color:#047857;
  font-size:11px;
  font-weight:900;
}

.status-dot{
  width:10px;
  height:10px;
  border-radius:999px;
  flex:0 0 auto;
}

.status-active{
  background:#22c55e;
  box-shadow:0 0 0 5px rgba(34,197,94,.14);
  animation:pulseDot 1.8s ease-in-out infinite;
}

.dashboard-footer{
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding:18px 20px;
  border-radius:22px;
  background:#0b2f63;
  color:#ffffff;
  box-shadow:0 16px 40px rgba(11,47,99,.18);
}

.dashboard-footer strong{
  font-weight:900;
}

.dashboard-footer span{
  color:rgba(255,255,255,.8);
  font-size:13px;
  line-height:1.5;
}

@keyframes heroShine{
  0%, 48%{transform:translateX(-130%);}
  58%, 100%{transform:translateX(130%);}
}

@keyframes heroBlob{
  from{transform:translate(0,0) scale(1);}
  to{transform:translate(-24px,-18px) scale(1.08);}
}

@keyframes slowSpin{
  from{transform:rotate(0deg);}
  to{transform:rotate(360deg);}
}

@keyframes slowSpinReverse{
  from{transform:rotate(360deg);}
  to{transform:rotate(0deg);}
}

@keyframes softLightning{
  0%, 76%, 100%{opacity:.08; transform:scale(.96) rotate(3deg);}
  78%{opacity:.38; transform:scale(1.06) rotate(-2deg);}
  80%{opacity:.12;}
  83%{opacity:.30;}
  86%{opacity:.10;}
}

@keyframes floatParticle{
  0%{transform:translateY(0) translateX(0); opacity:0;}
  12%{opacity:.8;}
  70%{opacity:.65;}
  100%{transform:translateY(-360px) translateX(32px); opacity:0;}
}

@keyframes miniCardFloat{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-8px);}
}

@keyframes pulseDot{
  0%,100%{box-shadow:0 0 0 4px rgba(34,197,94,.16);}
  50%{box-shadow:0 0 0 9px rgba(34,197,94,.05);}
}

@media (max-width:1500px){
  .kpi-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
  .quick-actions{grid-template-columns:repeat(2,minmax(0,1fr));}
}

@media (max-width:1100px){
  .afisgo-hero{grid-template-columns:1fr;}
  .features-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .workflow-steps{grid-template-columns:repeat(2,minmax(0,1fr));}
  .integration-card{grid-template-columns:1fr;}
}

@media (max-width:760px){
  .afisgo-hero{padding:24px;}
  .afisgo-hero-title{font-size:34px;}
  .kpi-grid,
  .quick-actions,
  .features-grid,
  .workflow-steps,
  .integration-grid{grid-template-columns:1fr;}
  .dashboard-footer{flex-direction:column;}
}

/* Hormati user yang memilih reduced motion */
@media (prefers-reduced-motion: reduce){
  .afisgo-hero::before,
  .afisgo-hero::after,
  .hero-orbit,
  .hero-lightning,
  .hero-particles span,
  .hero-dot,
  .status-active,
  .hero-mini-card{
    animation:none !important;
  }
}

/* =========================================================
   FINAL LEVEL UP: Animasi landing + sidebar premium
   ========================================================= */

/* Sidebar premium */
aside{
  width:250px !important;
  padding:22px 16px !important;
  background:
    radial-gradient(circle at 25% 8%, rgba(34,197,94,.22), transparent 28%),
    radial-gradient(circle at 88% 18%, rgba(242,183,5,.16), transparent 22%),
    linear-gradient(180deg,#071b42 0%,#0b2f63 48%,#06152f 100%) !important;
  box-shadow:18px 0 45px rgba(15,23,42,.22) !important;
  overflow:hidden !important;
  z-index:20 !important;
}

aside::before{
  content:"";
  position:absolute;
  inset:-80px -120px auto auto;
  width:240px;
  height:240px;
  border-radius:999px;
  background:rgba(255,255,255,.07);
  animation:sidebarGlowMove 9s ease-in-out infinite alternate;
  pointer-events:none;
}

aside::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(115deg, transparent 0%, rgba(255,255,255,.08) 45%, transparent 50%),
    repeating-linear-gradient(180deg, rgba(255,255,255,.035) 0 1px, transparent 1px 42px);
  opacity:.75;
  pointer-events:none;
}

aside .brand{
  position:relative;
  z-index:1;
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  min-height:48px !important;
  margin-bottom:24px !important;
  padding:12px 12px !important;
  border-radius:18px !important;
  background:rgba(255,255,255,.10) !important;
  border:1px solid rgba(255,255,255,.14) !important;
  color:#ffffff !important;
  font-size:18px !important;
  font-weight:900 !important;
  letter-spacing:-.3px !important;
  box-shadow:0 12px 28px rgba(0,0,0,.14) !important;
}

aside .brand::before{
  content:"★";
  width:28px;
  height:28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  color:#063b2d;
  background:linear-gradient(135deg,#ffffff,#bbf7d0);
  box-shadow:0 0 22px rgba(187,247,208,.35);
  animation:brandPulse 2.4s ease-in-out infinite;
}

aside a{
  position:relative !important;
  z-index:1 !important;
  display:flex !important;
  align-items:center !important;
  min-height:42px !important;
  margin:7px 0 !important;
  padding:11px 13px !important;
  border-radius:15px !important;
  color:rgba(255,255,255,.88) !important;
  font-weight:750 !important;
  letter-spacing:-.1px !important;
  opacity:1 !important;
  background:rgba(255,255,255,.045) !important;
  border:1px solid rgba(255,255,255,.06) !important;
  transition:transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease !important;
}

aside a:hover{
  transform:translateX(4px) !important;
  background:rgba(255,255,255,.14) !important;
  border-color:rgba(255,255,255,.18) !important;
  box-shadow:0 12px 24px rgba(0,0,0,.16), inset 3px 0 0 #22c55e !important;
}

aside a[href="/"]{
  background:linear-gradient(135deg, rgba(34,197,94,.26), rgba(255,255,255,.08)) !important;
  border-color:rgba(34,197,94,.32) !important;
  box-shadow:inset 3px 0 0 #22c55e !important;
}

/* Sesuaikan main karena sidebar jadi 250px */
main{
  margin-left:250px !important;
}

/* Animasi landing naik level */
.hero-lightning{
  opacity:.22 !important;
  animation:softLightningLevelUp 3.8s ease-in-out infinite !important;
}

.hero-particles-levelup span:nth-child(11){left:5%; bottom:-30px; animation-delay:.3s; animation-duration:8s; width:4px;height:4px;}
.hero-particles-levelup span:nth-child(12){left:13%; bottom:-22px; animation-delay:2.5s; animation-duration:10s; width:6px;height:6px;}
.hero-particles-levelup span:nth-child(13){left:24%; bottom:-34px; animation-delay:1.1s; animation-duration:11s; width:3px;height:3px;}
.hero-particles-levelup span:nth-child(14){left:36%; bottom:-26px; animation-delay:3.7s; animation-duration:9s; width:5px;height:5px;}
.hero-particles-levelup span:nth-child(15){left:52%; bottom:-32px; animation-delay:2.2s; animation-duration:12s; width:4px;height:4px;}
.hero-particles-levelup span:nth-child(16){left:63%; bottom:-24px; animation-delay:4.1s; animation-duration:10s; width:7px;height:7px;}
.hero-particles-levelup span:nth-child(17){left:73%; bottom:-36px; animation-delay:.9s; animation-duration:13s; width:3px;height:3px;}
.hero-particles-levelup span:nth-child(18){left:82%; bottom:-24px; animation-delay:3s; animation-duration:9s; width:5px;height:5px;}
.hero-particles-levelup span:nth-child(19){left:90%; bottom:-34px; animation-delay:1.8s; animation-duration:12s; width:4px;height:4px;}
.hero-particles-levelup span:nth-child(20){left:97%; bottom:-28px; animation-delay:5s; animation-duration:11s; width:6px;height:6px;}

.hero-meteor-rain{
  position:absolute;
  inset:0;
  overflow:hidden;
  z-index:1;
  pointer-events:none;
}

.hero-meteor-rain i{
  position:absolute;
  top:-80px;
  width:2px;
  height:72px;
  border-radius:999px;
  background:linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.9), rgba(250,204,21,.2));
  filter:drop-shadow(0 0 12px rgba(255,255,255,.65));
  transform:rotate(28deg);
  opacity:0;
  animation:meteorFall 6s linear infinite;
}

.hero-meteor-rain i:nth-child(1){left:12%; animation-delay:.4s; animation-duration:5.6s;}
.hero-meteor-rain i:nth-child(2){left:26%; animation-delay:2.1s; animation-duration:6.8s;}
.hero-meteor-rain i:nth-child(3){left:38%; animation-delay:1.1s; animation-duration:5.9s;}
.hero-meteor-rain i:nth-child(4){left:51%; animation-delay:3.3s; animation-duration:7.2s;}
.hero-meteor-rain i:nth-child(5){left:64%; animation-delay:1.8s; animation-duration:6.2s;}
.hero-meteor-rain i:nth-child(6){left:76%; animation-delay:4.4s; animation-duration:7s;}
.hero-meteor-rain i:nth-child(7){left:86%; animation-delay:2.8s; animation-duration:5.7s;}
.hero-meteor-rain i:nth-child(8){left:94%; animation-delay:5.1s; animation-duration:6.5s;}

.afisgo-hero::before{
  animation:heroShine 5.2s ease-in-out infinite !important;
}

.hero-mini-card{
  transition:transform .18s ease, background .18s ease, border-color .18s ease !important;
}

.hero-mini-card:hover{
  transform:translateY(-8px) scale(1.02) !important;
  background:rgba(255,255,255,.18) !important;
  border-color:rgba(255,255,255,.28) !important;
}

@keyframes softLightningLevelUp{
  0%, 58%, 100%{opacity:.08; transform:scale(.95) rotate(3deg);}
  60%{opacity:.50; transform:scale(1.10) rotate(-2deg);}
  62%{opacity:.14;}
  65%{opacity:.44; transform:scale(1.05) rotate(1deg);}
  68%{opacity:.12;}
  80%{opacity:.26;}
  83%{opacity:.09;}
}

@keyframes meteorFall{
  0%{transform:translate3d(0,-90px,0) rotate(28deg); opacity:0;}
  8%{opacity:.78;}
  38%{opacity:.48;}
  70%{opacity:0;}
  100%{transform:translate3d(-210px,520px,0) rotate(28deg); opacity:0;}
}

@keyframes sidebarGlowMove{
  from{transform:translate(0,0) scale(1);}
  to{transform:translate(-34px,70px) scale(1.18);}
}

@keyframes brandPulse{
  0%,100%{transform:scale(1); box-shadow:0 0 18px rgba(187,247,208,.28);}
  50%{transform:scale(1.08); box-shadow:0 0 28px rgba(187,247,208,.50);}
}

@media(max-width:900px){
  aside{
    position:static !important;
    width:auto !important;
  }

  main{
    margin-left:0 !important;
  }

  aside a[href="/"]{
    box-shadow:none !important;
  }
}

@media (prefers-reduced-motion: reduce){
  aside::before,
  aside .brand::before,
  .hero-meteor-rain i{
    animation:none !important;
  }
}

/* =========================================================
   FINAL: Multi Language ID-AR + RTL Arabic Formal Mode
   ========================================================= */
.topbar-tools{
  display:flex;
  align-items:center;
  gap:12px;
}

.current-user{
  font-weight:800;
  color:#0f172a;
}

.language-switch{
  display:flex;
  align-items:center;
  gap:4px;
  padding:4px;
  border-radius:999px;
  background:#eef4ff;
  border:1px solid rgba(18,61,122,.12);
}

.language-switch a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:30px;
  padding:7px 10px;
  border-radius:999px;
  text-decoration:none;
  color:#123d7a;
  font-size:12px;
  font-weight:900;
}

.language-switch a.active{
  color:#ffffff;
  background:#123d7a;
  box-shadow:0 8px 18px rgba(18,61,122,.18);
}

html.locale-ar,
body.locale-ar{
  font-family:Tahoma, Arial, "Segoe UI", sans-serif !important;
}

html.locale-ar body{
  text-align:right;
}

html.locale-ar aside{
  left:auto !important;
  right:0 !important;
}

html.locale-ar main{
  margin-left:0 !important;
  margin-right:250px !important;
}

html.locale-ar header{
  direction:rtl;
}

html.locale-ar aside .brand,
html.locale-ar aside a{
  direction:rtl;
  text-align:right;
}

html.locale-ar aside a:hover{
  transform:translateX(-4px) !important;
  box-shadow:0 12px 24px rgba(0,0,0,.16), inset -3px 0 0 #22c55e !important;
}

html.locale-ar aside a.active{
  box-shadow:inset -3px 0 0 #22c55e !important;
}

html.locale-ar .afisgo-hero,
html.locale-ar .kpi-card,
html.locale-ar .quick-action-card,
html.locale-ar .about-presensi-card,
html.locale-ar .features-section,
html.locale-ar .workflow-section,
html.locale-ar .integration-card,
html.locale-ar .dashboard-footer{
  direction:rtl;
}

html.locale-ar .afisgo-hero-title{
  letter-spacing:0 !important;
  line-height:1.18 !important;
}

html.locale-ar .afisgo-hero-subtitle,
html.locale-ar .section-description,
html.locale-ar .quick-action-desc,
html.locale-ar .feature-card p,
html.locale-ar .workflow-step p,
html.locale-ar .workflow-note{
  line-height:1.95 !important;
}

html.locale-ar .kpi-card{
  text-align:right;
}

html.locale-ar .integration-item small{
  margin-left:0;
  margin-right:auto;
}

html.locale-ar .dashboard-footer{
  flex-direction:row-reverse;
}

@media(max-width:900px){
  html.locale-ar aside{
    right:auto !important;
  }

  html.locale-ar main{
    margin-right:0 !important;
  }
}

/* =========================================================
   SAFE STEP 1: Language switch only
   ========================================================= */
.topbar-tools{
  display:flex;
  align-items:center;
  gap:12px;
}

.current-user{
  font-weight:800;
  color:#0f172a;
}

.language-switch{
  display:flex;
  align-items:center;
  gap:4px;
  padding:4px;
  border-radius:999px;
  background:#eef4ff;
  border:1px solid rgba(18,61,122,.14);
  box-shadow:0 8px 20px rgba(15,23,42,.06);
}

.language-switch a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:30px;
  padding:7px 11px;
  border-radius:999px;
  text-decoration:none;
  color:#123d7a;
  font-size:12px;
  font-weight:900;
  white-space:nowrap;
}

.language-switch a.active{
  color:#ffffff;
  background:#123d7a;
  box-shadow:0 8px 18px rgba(18,61,122,.18);
}

@media(max-width:700px){
  .topbar-tools{
    align-items:flex-end;
    flex-direction:column;
    gap:8px;
  }
}

/* =========================================================
   FINAL POLISH: Arabic RTL mode
   ========================================================= */
html.locale-ar,
body.locale-ar{
  font-family: Tahoma, Arial, "Segoe UI", sans-serif !important;
}

html.locale-ar body{
  text-align:right;
}

html.locale-ar aside{
  left:auto !important;
  right:0 !important;
  direction:rtl !important;
}

html.locale-ar main{
  margin-left:0 !important;
  margin-right:250px !important;
}

html.locale-ar header{
  direction:rtl !important;
}

html.locale-ar .topbar-tools{
  direction:ltr !important;
}

html.locale-ar aside .brand,
html.locale-ar aside a{
  direction:rtl !important;
  text-align:right !important;
}

html.locale-ar aside a:hover{
  transform:translateX(-4px) !important;
  box-shadow:0 12px 24px rgba(0,0,0,.16), inset -3px 0 0 #22c55e !important;
}

html.locale-ar aside a[href="/"],
html.locale-ar aside a.active{
  box-shadow:inset -3px 0 0 #22c55e !important;
}

html.locale-ar .dashboard-landing,
html.locale-ar .afisgo-hero,
html.locale-ar .kpi-card,
html.locale-ar .quick-action-card,
html.locale-ar .about-presensi-card,
html.locale-ar .features-section,
html.locale-ar .workflow-section,
html.locale-ar .integration-card,
html.locale-ar .dashboard-footer{
  direction:rtl !important;
  text-align:right !important;
}

html.locale-ar .afisgo-hero-title{
  letter-spacing:0 !important;
  line-height:1.18 !important;
}

html.locale-ar .afisgo-hero-subtitle,
html.locale-ar .section-description,
html.locale-ar .quick-action-desc,
html.locale-ar .feature-card p,
html.locale-ar .workflow-step p,
html.locale-ar .workflow-note,
html.locale-ar .dashboard-footer span{
  line-height:1.95 !important;
}

html.locale-ar .kpi-card{
  justify-content:flex-start !important;
}

html.locale-ar .integration-item small{
  margin-left:0 !important;
  margin-right:auto !important;
}

html.locale-ar .dashboard-footer{
  flex-direction:row-reverse !important;
}

@media(max-width:900px){
  html.locale-ar aside{
    right:auto !important;
    left:auto !important;
  }

  html.locale-ar main{
    margin-right:0 !important;
    margin-left:0 !important;
  }
}

/* =========================================================
   Compact Dashboard KPI Cards
   Icon dinaikkan ke pojok atas agar teks KPI lebih lega
   ========================================================= */
.kpi-card{
  position:relative;
  display:block;
  min-height:126px;
  padding:24px 18px 20px 82px;
}

.kpi-card .kpi-icon,
.kpi-icon{
  position:absolute;
  top:22px;
  left:22px;
  width:42px;
  height:42px;
  min-width:42px;
  border-radius:15px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.kpi-card .kpi-label,
.kpi-label{
  font-size:14px;
  line-height:1.22;
  margin-bottom:6px;
  max-width:100%;
}

.kpi-card .kpi-value,
.kpi-value{
  font-size:30px;
  line-height:1.05;
  margin-bottom:8px;
}

.kpi-card .kpi-note,
.kpi-note{
  margin-top:8px;
  line-height:1.35;
}

/* PC lebar: usahakan judul KPI jadi 1 baris */
@media (min-width:1200px){
  .kpi-card{
    padding-left:80px;
  }

  .kpi-card .kpi-label,
  .kpi-label{
    white-space:nowrap;
    font-size:13.5px;
  }
}

/* HP/tablet: tetap aman, boleh turun baris */
@media (max-width:768px){
  .kpi-card{
    padding:22px 16px 18px 76px;
    min-height:118px;
  }

  .kpi-card .kpi-icon,
  .kpi-icon{
    top:20px;
    left:18px;
    width:40px;
    height:40px;
    min-width:40px;
  }

  .kpi-card .kpi-label,
  .kpi-label{
    white-space:normal;
  }
}

/* RTL Arab: icon pindah kanan, teks tetap lega */
html.locale-ar .kpi-card{
  padding-left:18px;
  padding-right:82px;
  text-align:right;
}

html.locale-ar .kpi-card .kpi-icon,
html.locale-ar .kpi-icon{
  left:auto;
  right:22px;
}

@media (max-width:768px){
  html.locale-ar .kpi-card{
    padding-left:16px;
    padding-right:76px;
  }

  html.locale-ar .kpi-card .kpi-icon,
  html.locale-ar .kpi-icon{
    left:auto;
    right:18px;
  }
}

/* =========================================================
   FIX KPI Card: icon di atas teks, bukan pojok kiri
   ========================================================= */
.kpi-card{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  text-align:center;
  gap:7px;
  min-height:126px;
  padding:20px 12px 18px 12px;
}

.kpi-card .kpi-icon,
.kpi-icon{
  position:static;
  top:auto;
  left:auto;
  right:auto;
  width:42px;
  height:42px;
  min-width:42px;
  margin:0 auto 2px auto;
  border-radius:15px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
}

.kpi-card > div:not(.kpi-icon){
  width:100%;
}

.kpi-card .kpi-label,
.kpi-label{
  font-size:13.5px;
  line-height:1.2;
  margin:0 0 4px 0;
  max-width:100%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:clip;
  text-align:center;
}

.kpi-card .kpi-value,
.kpi-value{
  font-size:30px;
  line-height:1.05;
  margin:0 0 6px 0;
  text-align:center;
}

.kpi-card .kpi-note,
.kpi-note{
  margin-top:4px;
  font-size:11.5px;
  line-height:1.35;
  text-align:center;
}

/* Khusus judul yang panjang agar tetap muat di 1 baris */
@media (min-width:1200px){
  .kpi-card .kpi-label,
  .kpi-label{
    font-size:13px;
    letter-spacing:-0.15px;
  }
}

/* HP: boleh turun baris supaya tidak kepotong */
@media (max-width:768px){
  .kpi-card{
    min-height:118px;
    padding:18px 12px 16px 12px;
  }

  .kpi-card .kpi-label,
  .kpi-label{
    white-space:normal;
    overflow:visible;
  }
}

/* RTL Arab tetap icon di atas dan teks tengah */
html.locale-ar .kpi-card{
  padding:20px 12px 18px 12px;
  text-align:center;
}

html.locale-ar .kpi-card .kpi-icon,
html.locale-ar .kpi-icon{
  position:static;
  left:auto;
  right:auto;
  margin:0 auto 2px auto;
}

html.locale-ar .kpi-card .kpi-label,
html.locale-ar .kpi-label,
html.locale-ar .kpi-card .kpi-value,
html.locale-ar .kpi-value,
html.locale-ar .kpi-card .kpi-note,
html.locale-ar .kpi-note{
  text-align:center;
}

/* KPI final tightening: tetap icon di atas, tapi card lebih padat */
.kpi-card{
  min-height:112px;
  padding:16px 12px 14px 12px;
  gap:4px;
}

.kpi-card .kpi-icon,
.kpi-icon{
  width:38px;
  height:38px;
  min-width:38px;
  margin-bottom:2px;
}

.kpi-card .kpi-label,
.kpi-label{
  font-size:13px;
  margin-bottom:2px;
}

.kpi-card .kpi-value,
.kpi-value{
  font-size:28px;
  margin-bottom:3px;
}

.kpi-card .kpi-note,
.kpi-note{
  margin-top:2px;
  font-size:11.2px;
  line-height:1.25;
}

/* Setting menu admin */
.settings-menu-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}

.settings-menu-card{
  min-height:190px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.settings-menu-card h3{
  margin-top:0;
}

.settings-menu-card .actions{
  margin-top:18px;
}

@media (max-width:1100px){
  .settings-menu-grid{
    grid-template-columns:1fr;
  }
}

/* ================================
   LOGIN PREMIUM PAGE
================================ */
.login-main{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px 20px;
  background:
    radial-gradient(circle at top left, rgba(16,185,129,.16), transparent 26%),
    radial-gradient(circle at top right, rgba(59,130,246,.18), transparent 28%),
    linear-gradient(135deg, #071a2f 0%, #0b2f63 45%, #116466 100%);
  position:relative;
  overflow:hidden;
}

.login-main > header{
  position:absolute;
  top:18px;
  right:20px;
  z-index:20;
  background:transparent;
  padding:0;
  margin:0;
}

.login-main > header h1{
  display:none;
}

.login-main .topbar-tools{
  display:flex;
  align-items:center;
  gap:12px;
}

.login-premium-page{
  width:100%;
  max-width:1240px;
  position:relative;
  z-index:2;
}

.login-bg{
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:0;
}

.login-premium-shell{
  position:relative;
  z-index:2;
  min-height:680px;
  display:grid;
  grid-template-columns: 1.08fr .92fr;
  gap:28px;
  align-items:stretch;
}

.login-premium-brand,
.login-premium-card{
  border-radius:30px;
  position:relative;
  overflow:hidden;
}

.login-premium-brand{
  padding:44px 40px;
  color:#fff;
  background:
    linear-gradient(160deg, rgba(8,47,73,.72), rgba(10,76,110,.58)),
    rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 24px 60px rgba(2,8,23,.30);
  backdrop-filter:blur(14px);
}

.login-premium-card{
  padding:42px 34px;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(255,255,255,.42);
  box-shadow:0 24px 60px rgba(2,8,23,.26);
  backdrop-filter:blur(18px);
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.login-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 18px;
  border-radius:999px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.16);
  font-size:13px;
  font-weight:800;
  margin-bottom:22px;
  width:max-content;
  box-shadow:0 10px 22px rgba(0,0,0,.14);
}

.login-badge::before{
  content:"●";
  color:#22c55e;
  font-size:12px;
}

.login-premium-title{
  margin:0 0 14px;
  font-size:60px;
  line-height:1.02;
  font-weight:900;
  color:#ffffff;
  letter-spacing:-1.4px;
}

.login-premium-subtitle{
  margin:0;
  font-size:21px;
  line-height:1.75;
  color:rgba(255,255,255,.88);
  max-width:720px;
}

.login-feature-list{
  margin-top:36px;
  display:grid;
  gap:16px;
}

.login-feature-item{
  display:flex;
  gap:14px;
  align-items:flex-start;
  padding:16px 18px;
  border-radius:20px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}

.login-feature-icon{
  width:38px;
  height:38px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 38px;
  background:linear-gradient(135deg, rgba(16,185,129,.95), rgba(59,130,246,.95));
  color:#fff;
  font-size:16px;
  font-weight:900;
  box-shadow:0 10px 22px rgba(14,165,233,.28);
}

.login-feature-item strong{
  display:block;
  font-size:16px;
  color:#fff;
  margin-bottom:4px;
  font-weight:900;
}

.login-feature-item small{
  display:block;
  font-size:13px;
  line-height:1.55;
  color:rgba(255,255,255,.78);
  font-weight:600;
}

.login-card-head h2{
  margin:0 0 10px;
  color:#0b2f63;
  font-size:38px;
  line-height:1.12;
  font-weight:900;
}

.login-card-head p{
  margin:0 0 28px;
  color:#64748b;
  font-size:15px;
  line-height:1.7;
  font-weight:600;
}

.login-premium-form{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.login-premium-form label{
  font-size:15px;
  font-weight:800;
  color:#0f172a;
  margin-top:2px;
}

.login-premium-form input{
  width:100%;
  height:58px;
  border-radius:18px;
  border:1px solid rgba(148,163,184,.35);
  background:rgba(248,250,252,.96);
  padding:0 18px;
  font-size:15px;
  color:#0f172a;
  outline:none;
  transition:.2s ease;
  box-shadow:inset 0 1px 2px rgba(15,23,42,.04);
}

.login-premium-form input:focus{
  border-color:#2563eb;
  box-shadow:0 0 0 4px rgba(37,99,235,.12);
  background:#fff;
}

.login-premium-btn{
  margin-top:10px;
  height:58px;
  border:none;
  border-radius:18px;
  cursor:pointer;
  font-size:18px;
  font-weight:900;
  color:#fff;
  background:linear-gradient(135deg, #0f4aa1 0%, #10b981 100%);
  box-shadow:0 18px 36px rgba(16,185,129,.25);
  transition:.22s ease;
}

.login-premium-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 22px 42px rgba(16,185,129,.30);
}

.login-default-note{
  margin:16px 2px 0;
  font-size:13px;
  line-height:1.65;
  color:#64748b;
  font-weight:700;
}

.star{
  position:absolute;
  width:4px;
  height:4px;
  border-radius:50%;
  background:rgba(255,255,255,.95);
  box-shadow:0 0 10px rgba(255,255,255,.85);
  animation:twinkle 3s infinite ease-in-out;
}

.s1{top:8%; left:16%; animation-delay:.2s;}
.s2{top:18%; left:62%; animation-delay:1.1s;}
.s3{top:26%; left:84%; animation-delay:.6s;}
.s4{top:42%; left:28%; animation-delay:1.8s;}
.s5{top:54%; left:72%; animation-delay:2.1s;}
.s6{top:68%; left:10%; animation-delay:1.3s;}
.s7{top:76%; left:58%; animation-delay:.9s;}
.s8{top:86%; left:88%; animation-delay:1.7s;}

@keyframes twinkle{
  0%,100%{opacity:.2; transform:scale(.8);}
  50%{opacity:1; transform:scale(1.5);}
}

.shooting-star{
  position:absolute;
  width:140px;
  height:2px;
  background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.95));
  border-radius:999px;
  transform:rotate(-25deg);
  opacity:.0;
  filter:drop-shadow(0 0 10px rgba(255,255,255,.75));
}

.sh1{top:12%; left:58%; animation:shoot 6s infinite ease-in-out;}
.sh2{top:34%; left:74%; animation:shoot 8s infinite ease-in-out 2s;}
.sh3{top:65%; left:46%; animation:shoot 7s infinite ease-in-out 1s;}

@keyframes shoot{
  0%{opacity:0; transform:translate(0,0) rotate(-25deg);}
  10%{opacity:1;}
  30%{opacity:0; transform:translate(-180px,120px) rotate(-25deg);}
  100%{opacity:0; transform:translate(-180px,120px) rotate(-25deg);}
}

.glow-orb{
  position:absolute;
  border-radius:50%;
  filter:blur(8px);
  opacity:.26;
  animation:floatOrb 10s ease-in-out infinite;
}

.orb1{
  width:220px; height:220px;
  top:8%; left:6%;
  background:radial-gradient(circle, rgba(16,185,129,.9), rgba(16,185,129,0));
}

.orb2{
  width:280px; height:280px;
  right:8%; top:12%;
  background:radial-gradient(circle, rgba(59,130,246,.95), rgba(59,130,246,0));
  animation-delay:2s;
}

.orb3{
  width:240px; height:240px;
  left:34%; bottom:4%;
  background:radial-gradient(circle, rgba(255,255,255,.55), rgba(255,255,255,0));
  animation-delay:1.2s;
}

@keyframes floatOrb{
  0%,100%{transform:translateY(0) translateX(0);}
  50%{transform:translateY(-18px) translateX(10px);}
}

@media (max-width: 1100px){
  .login-premium-shell{
    grid-template-columns:1fr;
    min-height:auto;
  }

  .login-premium-brand{
    padding:34px 28px;
  }

  .login-premium-title{
    font-size:46px;
  }

  .login-premium-subtitle{
    font-size:18px;
  }
}

@media (max-width: 700px){
  .login-main{
    padding:90px 14px 18px;
  }

  .login-main > header{
    top:10px;
    right:12px;
  }

  .login-premium-card{
    padding:28px 20px;
    border-radius:24px;
  }

  .login-premium-brand{
    padding:28px 20px;
    border-radius:24px;
  }

  .login-premium-title{
    font-size:38px;
  }

  .login-premium-subtitle{
    font-size:16px;
    line-height:1.7;
  }

  .login-card-head h2{
    font-size:30px;
  }

  .login-premium-form input,
  .login-premium-btn{
    height:54px;
  }
}

html.locale-ar .login-premium-shell{
  direction:rtl;
}

html.locale-ar .login-premium-brand,
html.locale-ar .login-premium-card,
html.locale-ar .login-card-head,
html.locale-ar .login-premium-form,
html.locale-ar .login-feature-item{
  text-align:right;
}

html.locale-ar .login-feature-item{
  flex-direction:row-reverse;
}

/* =========================================================
   Login Premium Animation Layer
   Aurora + stars + shooting star + smooth card entrance
   ========================================================= */

.login-main{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:
    radial-gradient(circle at 18% 12%, rgba(34,197,94,.22), transparent 28%),
    radial-gradient(circle at 82% 18%, rgba(59,130,246,.24), transparent 32%),
    radial-gradient(circle at 50% 92%, rgba(20,184,166,.20), transparent 34%),
    linear-gradient(135deg, #06172b 0%, #0b2f63 48%, #0f766e 100%) !important;
}

/* Aurora bergerak */
.login-main::before{
  content:"";
  position:absolute;
  inset:-35%;
  z-index:-3;
  background:
    conic-gradient(
      from 120deg,
      rgba(34,197,94,.10),
      rgba(59,130,246,.18),
      rgba(14,165,233,.12),
      rgba(16,185,129,.15),
      rgba(34,197,94,.10)
    );
  filter:blur(26px);
  animation:loginAuroraSpin 18s linear infinite;
  opacity:.85;
}

/* Bintang kelap-kelip */
.login-main::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.95) 0 1.2px, transparent 1.4px),
    radial-gradient(circle, rgba(255,255,255,.70) 0 1px, transparent 1.2px),
    radial-gradient(circle, rgba(255,255,255,.48) 0 .8px, transparent 1px);
  background-size: 120px 120px, 180px 180px, 260px 260px;
  background-position: 0 0, 40px 60px, 90px 30px;
  animation:loginStarsMove 22s linear infinite, loginStarsBlink 3.5s ease-in-out infinite;
  opacity:.75;
}

/* Efek untuk card login lama dan login premium */
.login-card,
.login-premium-card{
  position:relative;
  overflow:hidden;
  animation:loginCardEntrance .75s cubic-bezier(.2,.8,.2,1) both;
}

/* Kilau halus melintas di card */
.login-card::before,
.login-premium-card::before{
  content:"";
  position:absolute;
  top:-40%;
  left:-85%;
  width:70%;
  height:190%;
  background:linear-gradient(
    115deg,
    transparent 0%,
    rgba(255,255,255,.08) 35%,
    rgba(255,255,255,.36) 50%,
    rgba(255,255,255,.08) 65%,
    transparent 100%
  );
  transform:rotate(12deg);
  animation:loginCardShine 4.8s ease-in-out infinite;
  pointer-events:none;
}

/* Shooting star memakai elemen visual card/login page jika ada */
.login-premium-page::before,
.login-card::after{
  content:"";
  position:fixed;
  top:18%;
  right:-180px;
  width:170px;
  height:2px;
  z-index:0;
  border-radius:999px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.95));
  box-shadow:0 0 14px rgba(255,255,255,.85);
  transform:rotate(-25deg);
  animation:loginShootingStar 5.8s ease-in-out infinite;
  pointer-events:none;
}

/* Tombol login terasa hidup */
.login-card button,
.login-premium-btn,
.login-premium-form button{
  position:relative;
  overflow:hidden;
  transition:transform .22s ease, box-shadow .22s ease, filter .22s ease;
}

.login-card button:hover,
.login-premium-btn:hover,
.login-premium-form button:hover{
  transform:translateY(-2px);
  filter:brightness(1.05);
  box-shadow:0 18px 36px rgba(37,99,235,.28);
}

.login-card button::after,
.login-premium-btn::after,
.login-premium-form button::after{
  content:"";
  position:absolute;
  top:0;
  left:-80%;
  width:50%;
  height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  transform:skewX(-18deg);
  animation:loginButtonShine 3.2s ease-in-out infinite;
}

/* Input lebih smooth */
.login-card input,
.login-premium-form input{
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.login-card input:focus,
.login-premium-form input:focus{
  transform:translateY(-1px);
  box-shadow:0 0 0 4px rgba(37,99,235,.12);
}

/* Animasi */
@keyframes loginAuroraSpin{
  0%{transform:rotate(0deg) scale(1);}
  50%{transform:rotate(180deg) scale(1.08);}
  100%{transform:rotate(360deg) scale(1);}
}

@keyframes loginStarsMove{
  0%{background-position:0 0, 40px 60px, 90px 30px;}
  100%{background-position:240px 240px, 220px 300px, 350px 290px;}
}

@keyframes loginStarsBlink{
  0%,100%{opacity:.52;}
  50%{opacity:.92;}
}

@keyframes loginShootingStar{
  0%{
    opacity:0;
    transform:translate(0,0) rotate(-25deg);
  }
  12%{opacity:1;}
  35%{
    opacity:0;
    transform:translate(-950px,520px) rotate(-25deg);
  }
  100%{
    opacity:0;
    transform:translate(-950px,520px) rotate(-25deg);
  }
}

@keyframes loginCardEntrance{
  from{
    opacity:0;
    transform:translateY(18px) scale(.985);
  }
  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

@keyframes loginCardShine{
  0%{left:-90%; opacity:0;}
  18%{opacity:.55;}
  42%{left:125%; opacity:0;}
  100%{left:125%; opacity:0;}
}

@keyframes loginButtonShine{
  0%{left:-80%; opacity:0;}
  35%{opacity:.8;}
  70%{left:130%; opacity:0;}
  100%{left:130%; opacity:0;}
}

/* Kurangi animasi jika perangkat/user memilih reduce motion */
@media (prefers-reduced-motion: reduce){
  .login-main::before,
  .login-main::after,
  .login-premium-page::before,
  .login-card::after,
  .login-card::before,
  .login-premium-card::before,
  .login-card button::after,
  .login-premium-btn::after,
  .login-premium-form button::after{
    animation:none !important;
  }
}

/* =========================================================
   Employee / Guru Pegawai Personal Dashboard
   ========================================================= */
.employee-page{
  position:relative;
  display:grid;
  gap:20px;
}

.employee-hero{
  position:relative;
  overflow:hidden;
  border-radius:28px;
  padding:28px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:22px;
  color:#fff;
  background:
    radial-gradient(circle at 18% 20%, rgba(34,197,94,.30), transparent 34%),
    radial-gradient(circle at 84% 12%, rgba(59,130,246,.34), transparent 34%),
    linear-gradient(135deg, #082f49 0%, #0f766e 100%);
  box-shadow:0 22px 48px rgba(15,23,42,.18);
}

.employee-hero::before{
  content:"";
  position:absolute;
  inset:-40%;
  background:conic-gradient(from 90deg, rgba(255,255,255,.05), rgba(20,184,166,.18), rgba(59,130,246,.14), rgba(255,255,255,.05));
  animation:employeeHeroSpin 16s linear infinite;
  pointer-events:none;
}

.employee-hero-content,
.employee-today-status,
.employee-hero-btn{
  position:relative;
  z-index:2;
}

.employee-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  width:max-content;
  padding:8px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.18);
  font-size:12px;
  font-weight:900;
  margin-bottom:12px;
}

.employee-badge::before{
  content:"●";
  color:#22c55e;
  font-size:10px;
}

.employee-hero h2{
  margin:0 0 10px;
  font-size:34px;
  line-height:1.16;
  letter-spacing:-.5px;
  color:#fff;
}

.employee-hero p{
  margin:0;
  color:rgba(255,255,255,.82);
  font-weight:700;
  line-height:1.6;
}

.employee-today-status{
  min-width:220px;
  padding:20px;
  border-radius:22px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(12px);
}

.employee-today-status span{
  display:block;
  font-size:12px;
  color:rgba(255,255,255,.78);
  font-weight:800;
  margin-bottom:8px;
}

.employee-today-status strong{
  display:block;
  font-size:24px;
  color:#fff;
  line-height:1.2;
}

.employee-hero-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 18px;
  border-radius:16px;
  background:rgba(255,255,255,.14);
  color:#fff;
  text-decoration:none;
  font-weight:900;
  border:1px solid rgba(255,255,255,.18);
}

.employee-today-grid{
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:14px;
}

.employee-stat-card{
  position:relative;
  overflow:hidden;
  border-radius:24px;
  padding:20px;
  background:#fff;
  border:1px solid rgba(226,232,240,.95);
  box-shadow:0 16px 38px rgba(15,23,42,.08);
}

.employee-stat-card::after{
  content:"";
  position:absolute;
  width:90px;
  height:90px;
  right:-34px;
  top:-34px;
  border-radius:999px;
  background:rgba(20,184,166,.10);
}

.employee-stat-card span{
  display:block;
  color:#64748b;
  font-size:12px;
  font-weight:900;
  margin-bottom:10px;
}

.employee-stat-card strong{
  display:block;
  color:#0f172a;
  font-size:30px;
  line-height:1;
  font-weight:950;
  letter-spacing:-.5px;
}

.employee-stat-card small{
  display:block;
  margin-top:8px;
  color:#64748b;
  font-weight:700;
}

.employee-stat-main{
  background:linear-gradient(180deg,#ffffff 0%, #f8fafc 100%);
}

.employee-panel{
  border-radius:24px;
  padding:22px;
  background:#fff;
  border:1px solid rgba(226,232,240,.95);
  box-shadow:0 16px 38px rgba(15,23,42,.07);
}

.employee-section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:18px;
}

.employee-section-head h3,
.employee-panel h3{
  margin:0;
  color:#0f172a;
  font-size:22px;
}

.employee-section-head p{
  margin:5px 0 0;
  color:#64748b;
  font-weight:700;
}

.employee-history-list{
  display:grid;
  gap:10px;
}

.employee-history-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 16px;
  border-radius:18px;
  background:#f8fafc;
  border:1px solid rgba(226,232,240,.8);
}

.employee-history-item strong{
  display:block;
  color:#0f172a;
  font-size:15px;
}

.employee-history-item small{
  display:block;
  color:#64748b;
  font-weight:800;
  margin-top:3px;
}

.employee-history-time{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.employee-history-time span,
.employee-status-pill{
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  padding:7px 10px;
  background:#e0f2fe;
  color:#075985;
  font-size:12px;
  font-weight:900;
}

.employee-filter{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:14px;
  align-items:end;
}

.employee-filter label{
  display:flex;
  flex-direction:column;
  gap:8px;
  color:#334155;
  font-weight:900;
}

.employee-filter input{
  height:44px;
  border-radius:14px;
  border:1px solid rgba(148,163,184,.45);
  padding:0 12px;
}

.employee-filter button{
  height:44px;
  border:none;
  border-radius:14px;
  background:linear-gradient(135deg,#0f4aa1,#10b981);
  color:#fff;
  font-weight:900;
  cursor:pointer;
}

@keyframes employeeHeroSpin{
  0%{transform:rotate(0deg) scale(1);}
  50%{transform:rotate(180deg) scale(1.05);}
  100%{transform:rotate(360deg) scale(1);}
}

@media (max-width: 900px){
  .employee-hero{
    flex-direction:column;
    align-items:flex-start;
    padding:24px 20px;
    border-radius:24px;
  }

  .employee-hero h2{
    font-size:28px;
  }

  .employee-today-status{
    width:100%;
    min-width:0;
  }

  .employee-today-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .employee-filter{
    grid-template-columns:1fr;
  }

  .employee-section-head{
    align-items:flex-start;
    flex-direction:column;
  }

  .employee-history-item{
    align-items:flex-start;
    flex-direction:column;
  }

  .employee-history-time{
    justify-content:flex-start;
  }
}

@media (max-width: 560px){
  .employee-page{
    gap:14px;
  }

  .employee-hero{
    margin:-4px -4px 0;
    padding:22px 18px;
  }

  .employee-hero h2{
    font-size:24px;
  }

  .employee-hero p{
    font-size:13px;
  }

  .employee-today-grid{
    grid-template-columns:1fr;
    gap:12px;
  }

  .employee-stat-card{
    border-radius:20px;
    padding:18px;
  }

  .employee-stat-card strong{
    font-size:28px;
  }

  .employee-panel{
    border-radius:20px;
    padding:18px;
  }

  .employee-history-time span{
    width:100%;
    justify-content:center;
  }
}

/* =========================================================
   EMPLOYEE MOBILE DASHBOARD PREMIUM FINAL
   Target: class aktif employee-mobile-dashboard
   ========================================================= */

.employee-mobile-dashboard{
  width:100%;
  max-width:980px;
  margin:0 auto;
  display:grid;
  gap:18px;
  position:relative;
}

.employee-mobile-dashboard::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  background:
    radial-gradient(circle at 20% 10%, rgba(16,185,129,.12), transparent 28%),
    radial-gradient(circle at 80% 22%, rgba(37,99,235,.12), transparent 30%),
    linear-gradient(180deg, #f8fbff 0%, #eef6ff 100%);
}

.employee-hero-card{
  position:relative;
  overflow:hidden;
  border-radius:30px;
  padding:26px;
  display:flex;
  align-items:center;
  gap:18px;
  color:#fff;
  background:
    radial-gradient(circle at 18% 18%, rgba(34,197,94,.34), transparent 30%),
    radial-gradient(circle at 85% 10%, rgba(96,165,250,.34), transparent 34%),
    linear-gradient(135deg, #082f49 0%, #0f4c81 48%, #0f766e 100%);
  box-shadow:0 24px 55px rgba(15,23,42,.22);
  isolation:isolate;
}

.employee-hero-card::before{
  content:"";
  position:absolute;
  inset:-60%;
  background:conic-gradient(
    from 120deg,
    rgba(255,255,255,.04),
    rgba(45,212,191,.22),
    rgba(59,130,246,.16),
    rgba(255,255,255,.04)
  );
  animation:empAurora 16s linear infinite;
  z-index:-2;
}

.employee-hero-card::after{
  content:"";
  position:absolute;
  width:180px;
  height:180px;
  border-radius:999px;
  right:-70px;
  bottom:-80px;
  background:rgba(255,255,255,.13);
  filter:blur(1px);
  z-index:-1;
}

.employee-hero-glow{
  position:absolute;
  width:130px;
  height:130px;
  left:-40px;
  top:-40px;
  border-radius:999px;
  background:rgba(34,197,94,.25);
  filter:blur(6px);
}

.employee-avatar{
  width:72px;
  height:72px;
  min-width:72px;
  border-radius:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:34px;
  font-weight:950;
  color:#0b2f63;
  background:linear-gradient(180deg,#ffffff,#dff7ef);
  box-shadow:0 18px 38px rgba(2,8,23,.22);
  border:1px solid rgba(255,255,255,.55);
  position:relative;
  z-index:2;
}

.employee-hero-info{
  position:relative;
  z-index:2;
  min-width:0;
}

.employee-hero-info .employee-badge{
  margin:0 0 9px;
  padding:7px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.18);
  color:#eafff7;
  font-size:11px;
  font-weight:950;
  letter-spacing:.2px;
}

.employee-hero-info h2{
  margin:0 0 7px;
  color:#fff;
  font-size:28px;
  line-height:1.12;
  letter-spacing:-.6px;
}

.employee-hero-info p{
  margin:0;
  color:rgba(255,255,255,.84);
  font-size:14px;
  line-height:1.45;
  font-weight:800;
}

.employee-today-card,
.employee-history-card{
  border-radius:28px;
  padding:22px;
  background:rgba(255,255,255,.94);
  border:1px solid rgba(226,232,240,.95);
  box-shadow:0 18px 42px rgba(15,23,42,.08);
  backdrop-filter:blur(14px);
}

.employee-section-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
  margin-bottom:18px;
}

.employee-section-head span{
  display:block;
  color:#64748b;
  font-size:12px;
  font-weight:950;
  margin-bottom:5px;
}

.employee-section-head strong{
  display:block;
  color:#0f172a;
  font-size:20px;
  line-height:1.2;
  font-weight:950;
}

.employee-status-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:8px 13px;
  border-radius:999px;
  background:#e0f2fe;
  color:#075985;
  font-size:12px;
  font-weight:950;
  white-space:nowrap;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
}

.employee-time-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-top:14px;
}

.employee-time-box{
  position:relative;
  background:linear-gradient(180deg,#f4fbff 0%, #eef8fb 100%);
  border:1px solid #bfdbfe;
  border-radius:18px;
  padding:14px 14px 12px;
  min-height:92px;
  overflow:hidden;
}

.employee-time-box::after{
  content:"";
  position:absolute;
  width:72px;
  height:72px;
  right:-30px;
  top:-30px;
  border-radius:999px;
  background:rgba(15,76,129,.06);
}

.employee-time-box.active{
  background:linear-gradient(135deg,#eff6ff 0%, #ecfdf5 100%);
  border-color:rgba(59,130,246,.18);
}

.employee-time-box small{
  display:block;
  color:#64748b;
  font-size:11px;
  font-weight:950;
  margin-bottom:9px;
}

.employee-time-box strong{
  position:relative;
  z-index:2;
  display:block;
  color:#0f172a;
  font-size:24px;
  line-height:1;
  font-weight:950;
  letter-spacing:-.5px;
}

.employee-metric-row{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-top:12px;
}

.employee-metric-row > div{
  border-radius:20px;
  padding:14px 15px;
  background:#f8fafc;
  border:1px solid rgba(226,232,240,.9);
}

.employee-metric-row small{
  display:block;
  color:#64748b;
  font-size:11px;
  font-weight:950;
  margin-bottom:7px;
}

.employee-metric-row strong{
  display:block;
  color:#0f172a;
  font-size:16px;
  font-weight:950;
}

.employee-mini-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:9px 13px;
  border-radius:999px;
  background:#0f4aa1;
  color:#fff;
  text-decoration:none;
  font-size:12px;
  font-weight:950;
  box-shadow:0 12px 24px rgba(15,74,161,.18);
}

.employee-history-list{
  display:grid;
  gap:11px;
}

.employee-history-item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  padding:15px 16px;
  border-radius:20px;
  background:linear-gradient(180deg,#ffffff,#f8fafc);
  border:1px solid rgba(226,232,240,.92);
  box-shadow:0 12px 26px rgba(15,23,42,.045);
}

.employee-history-item strong{
  display:block;
  color:#0f172a;
  font-size:15px;
  font-weight:950;
  margin-bottom:4px;
}

.employee-history-item small{
  display:inline-flex;
  padding:6px 10px;
  border-radius:999px;
  background:#e0f2fe;
  color:#075985;
  font-size:11px;
  font-weight:950;
}

.employee-history-time{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:110px;
  padding:9px 12px;
  border-radius:999px;
  background:#ecfdf5;
  color:#065f46;
  font-size:13px;
  font-weight:950;
  white-space:nowrap;
}

.employee-empty{
  padding:18px;
  border-radius:18px;
  background:#f8fafc;
  color:#64748b;
  font-weight:800;
}

/* Status colors */
.status-hadir,
.status-hadir-fleksibel{
  background:#dcfce7 !important;
  color:#166534 !important;
}

.status-belum-pulang,
.status-belum-ada{
  background:#e0f2fe !important;
  color:#075985 !important;
}

.status-libur{
  background:#fef3c7 !important;
  color:#92400e !important;
}

.status-izin,
.status-sakit,
.status-cuti,
.status-tugas-luar{
  background:#ede9fe !important;
  color:#5b21b6 !important;
}

/* Mobile employee layout: compact app-like */
@media (max-width:900px){
  body:has(.employee-mobile-dashboard){
    background:#eff6ff;
  }

  body:has(.employee-mobile-dashboard) aside{
    position:static !important;
    width:auto !important;
    margin:12px 12px 0 !important;
    padding:14px !important;
    border-radius:24px !important;
    min-height:0 !important;
    box-shadow:0 18px 38px rgba(15,23,42,.16) !important;
  }

  body:has(.employee-mobile-dashboard) aside .brand{
    margin-bottom:12px !important;
    font-size:16px !important;
  }

  body:has(.employee-mobile-dashboard) aside a{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    margin:4px 4px 0 0 !important;
    padding:10px 12px !important;
    border-radius:14px !important;
    font-size:12px !important;
    font-weight:950 !important;
  }

  body:has(.employee-mobile-dashboard) main{
    margin-left:0 !important;
    padding:14px 12px 22px !important;
  }

  body:has(.employee-mobile-dashboard) header{
    align-items:flex-start !important;
    gap:10px !important;
    margin:0 0 14px !important;
  }

  body:has(.employee-mobile-dashboard) header h1{
    font-size:24px !important;
    line-height:1.15 !important;
  }

  body:has(.employee-mobile-dashboard) .topbar-tools{
    gap:6px !important;
    align-items:flex-end !important;
    flex-direction:column !important;
  }

  body:has(.employee-mobile-dashboard) .current-user{
    font-size:11px !important;
    padding:0 !important;
    background:transparent !important;
    box-shadow:none !important;
  }

  .employee-mobile-dashboard{
    gap:14px;
  }

  .employee-hero-card{
    border-radius:26px;
    padding:22px 18px;
  }

  .employee-hero-info h2{
    font-size:23px;
  }

  .employee-time-grid{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }

  .employee-metric-row{
    grid-template-columns:1fr;
  }
}

@media (max-width:560px){
  body:has(.employee-mobile-dashboard) main{
    padding:12px 10px 20px !important;
  }

  body:has(.employee-mobile-dashboard) header{
    display:flex !important;
  }

  body:has(.employee-mobile-dashboard) .language-switch a{
    font-size:10px !important;
    padding:7px 9px !important;
  }

  .employee-hero-card{
    align-items:flex-start;
    padding:20px 16px;
    gap:14px;
  }

  .employee-avatar{
    width:58px;
    height:58px;
    min-width:58px;
    border-radius:20px;
    font-size:28px;
  }

  .employee-hero-info h2{
    font-size:20px;
    line-height:1.18;
  }

  .employee-hero-info p{
    font-size:12px;
  }

  .employee-today-card,
  .employee-history-card{
    border-radius:24px;
    padding:16px;
  }

  .employee-section-head{
    margin-bottom:14px;
  }

  .employee-section-head strong{
    font-size:17px;
  }

  .employee-status-pill{
    min-height:30px;
    padding:7px 10px;
    font-size:11px;
  }

  .employee-time-grid{
    gap:10px;
  }

  .employee-time-box{
    border-radius:18px;
    padding:14px;
  }

  .employee-time-box strong{
    font-size:21px;
  }

  .employee-history-item{
    border-radius:18px;
    padding:14px;
    align-items:flex-start;
    flex-direction:column;
  }

  .employee-history-time{
    width:100%;
    min-width:0;
  }
}

@keyframes empAurora{
  0%{transform:rotate(0deg) scale(1);}
  50%{transform:rotate(180deg) scale(1.05);}
  100%{transform:rotate(360deg) scale(1);}
}

/* =========================================================
   EMPLOYEE MOBILE FINAL POLISH
   Bikin tampilan HP lebih app-like dan premium
   ========================================================= */

@media (max-width:900px){

  body:has(.employee-mobile-dashboard) main{
    background:
      radial-gradient(circle at 16% 8%, rgba(16,185,129,.13), transparent 26%),
      radial-gradient(circle at 88% 12%, rgba(59,130,246,.13), transparent 28%),
      linear-gradient(180deg,#f8fbff 0%,#eef6ff 100%) !important;
  }

  /* Hilangkan judul Dashboard bawaan desktop di HP employee */
  body:has(.employee-mobile-dashboard) header h1{
    display:none !important;
  }

  body:has(.employee-mobile-dashboard) header{
    justify-content:flex-end !important;
    margin:-2px 0 12px !important;
  }

  body:has(.employee-mobile-dashboard) .topbar-tools{
    width:100% !important;
    display:flex !important;
    flex-direction:row !important;
    justify-content:space-between !important;
    align-items:center !important;
    gap:10px !important;
  }

  body:has(.employee-mobile-dashboard) .language-switch{
    order:2;
    margin-left:auto;
    box-shadow:0 12px 26px rgba(15,23,42,.08) !important;
  }

  body:has(.employee-mobile-dashboard) .current-user{
    order:1;
    color:#0f172a !important;
    font-size:13px !important;
    font-weight:950 !important;
    max-width:155px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  body:has(.employee-mobile-dashboard) aside{
    margin:10px 10px 0 !important;
    border-radius:26px !important;
  }

  body:has(.employee-mobile-dashboard) aside .brand{
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
  }

  body:has(.employee-mobile-dashboard) aside a{
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
  }

  .employee-hero-card{
    margin-top:2px;
    box-shadow:0 22px 48px rgba(15,23,42,.18);
  }

  .employee-today-card,
  .employee-history-card{
    box-shadow:0 18px 40px rgba(15,23,42,.07);
  }
}

@media (max-width:560px){

  body:has(.employee-mobile-dashboard) aside{
    margin:8px 8px 0 !important;
    padding:13px !important;
  }

  body:has(.employee-mobile-dashboard) aside a{
    padding:9px 11px !important;
    font-size:11.5px !important;
  }

  body:has(.employee-mobile-dashboard) .current-user{
    max-width:150px;
    font-size:12px !important;
  }

  .employee-mobile-dashboard{
    gap:13px !important;
  }

  .employee-section-head{
    align-items:flex-start !important;
  }

  .employee-section-head span{
    font-size:11px !important;
  }

  .employee-section-head strong{
    font-size:18px !important;
  }

  .employee-time-box strong{
    font-size:22px !important;
  }

  .employee-mini-link{
    padding:9px 14px !important;
    border-radius:999px !important;
  }
}

/* =========================================================
   EMPLOYEE MOBILE TOP NAV FINAL
   Brand + language, menu, profile/logout
   ========================================================= */

@media (max-width:900px){

  body:has(.employee-mobile-dashboard) header{
    display:none !important;
  }

  body:has(.employee-mobile-dashboard) aside.employee-mobile-aside{
    position:static !important;
    width:auto !important;
    min-height:0 !important;
    margin:10px 10px 0 !important;
    padding:12px !important;
    border-radius:26px !important;
    background:
      radial-gradient(circle at 78% 0%, rgba(255,255,255,.18), transparent 35%),
      linear-gradient(160deg,#082f49 0%, #143f73 55%, #06254d 100%) !important;
    box-shadow:0 18px 42px rgba(15,23,42,.18) !important;
    overflow:hidden !important;
  }

  .employee-mobile-head{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:10px !important;
    padding:2px 2px 10px !important;
  }

  aside.employee-mobile-aside .brand{
    margin:0 !important;
    min-height:42px !important;
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
    font-size:15px !important;
    font-weight:950 !important;
    color:#fff !important;
    white-space:nowrap !important;
  }

  aside.employee-mobile-aside .brand::before{
    width:34px !important;
    height:34px !important;
    min-width:34px !important;
    border-radius:13px !important;
  }

  .employee-mobile-lang{
    flex:0 0 auto !important;
    display:flex !important;
    gap:4px !important;
    padding:4px !important;
    border-radius:18px !important;
    background:rgba(255,255,255,.90) !important;
    box-shadow:0 12px 28px rgba(15,23,42,.18) !important;
  }

  .employee-mobile-lang a{
    margin:0 !important;
    padding:7px 10px !important;
    border-radius:14px !important;
    color:#0f4aa1 !important;
    background:transparent !important;
    font-size:10.5px !important;
    font-weight:950 !important;
    text-decoration:none !important;
  }

  .employee-mobile-lang a.active{
    background:#0f4aa1 !important;
    color:#fff !important;
  }

  .employee-mobile-menu{
    display:flex !important;
    gap:8px !important;
    flex-wrap:wrap !important;
    padding:9px 0 8px !important;
    border-top:1px solid rgba(255,255,255,.08) !important;
  }

  .employee-mobile-menu a{
    margin:0 !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:11px 13px !important;
    border-radius:15px !important;
    color:#fff !important;
    background:rgba(255,255,255,.08) !important;
    border:1px solid rgba(255,255,255,.10) !important;
    font-size:12px !important;
    font-weight:950 !important;
    text-decoration:none !important;
  }

  .employee-mobile-menu a:first-child{
    background:rgba(20,184,166,.30) !important;
    border-color:rgba(45,212,191,.35) !important;
  }

  .employee-mobile-userbar{
    margin-top:6px !important;
    padding:10px 0 0 !important;
    border-top:1px solid rgba(255,255,255,.08) !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:10px !important;
  }

  .employee-profile-link,
  .employee-logout-link{
    margin:0 !important;
    text-decoration:none !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    border-radius:15px !important;
    font-weight:950 !important;
  }

  .employee-profile-link{
    max-width:210px !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
    padding:9px 12px !important;
    color:#eafff7 !important;
    background:rgba(255,255,255,.07) !important;
    font-size:12px !important;
  }

  .employee-profile-link::before{
    content:"👤";
    margin-right:7px;
  }

  .employee-logout-link{
    padding:9px 12px !important;
    color:#fff !important;
    background:rgba(239,68,68,.20) !important;
    border:1px solid rgba(248,113,113,.28) !important;
    font-size:12px !important;
  }
}

@media (max-width:420px){
  .employee-mobile-head{
    gap:7px !important;
  }

  aside.employee-mobile-aside .brand{
    font-size:14px !important;
  }

  .employee-mobile-lang a{
    padding:7px 8px !important;
    font-size:10px !important;
  }

  .employee-profile-link{
    max-width:180px !important;
  }
}

/* =========================================================
   EMPLOYEE MOBILE CLEAN MODE
   Hapus area menu/hero/jadwal yang tidak diperlukan
   ========================================================= */

@media (max-width:900px){
  body:has(.employee-mobile-dashboard) aside.employee-mobile-aside{
    padding:12px !important;
    margin:10px 10px 8px !important;
  }

  body:has(.employee-mobile-dashboard) .employee-mobile-head{
    padding:0 !important;
  }

  body:has(.employee-mobile-dashboard) main{
    padding-top:8px !important;
  }

  body:has(.employee-mobile-dashboard) .employee-today-card{
  background:#ffffff;
  border:1px solid rgba(191,219,254,.55);
  border-radius:28px;
  padding:18px 16px 16px;
  box-shadow:0 14px 34px rgba(15,23,42,.06);
  margin-bottom:16px;
}

@media (max-width:560px){
  body:has(.employee-mobile-dashboard) aside.employee-mobile-aside{
    border-radius:24px !important;
  }

  body:has(.employee-mobile-dashboard) .employee-today-card,
  body:has(.employee-mobile-dashboard) .employee-history-card{
    border-radius:24px !important;
  }
}

/* =========================================================
   EMPLOYEE MOBILE HEADER CLEAN LANGUAGE + USER MENU
   ========================================================= */

@media (max-width:900px){

  body:has(.employee-mobile-dashboard) aside.employee-mobile-aside{
    padding:13px !important;
    border-radius:26px !important;
  }

  body:has(.employee-mobile-dashboard) .employee-mobile-head{
    align-items:center !important;
    padding:0 0 10px !important;
    border-bottom:1px solid rgba(255,255,255,.08) !important;
  }

  /* Rapikan pilihan bahasa: hilangkan kesan kotak putih besar */
  body:has(.employee-mobile-dashboard) .employee-mobile-lang{
    background:rgba(255,255,255,.10) !important;
    border:1px solid rgba(255,255,255,.16) !important;
    box-shadow:none !important;
    padding:4px !important;
    border-radius:17px !important;
    backdrop-filter:blur(12px) !important;
  }

  body:has(.employee-mobile-dashboard) .employee-mobile-lang a{
    color:rgba(255,255,255,.86) !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    padding:7px 10px !important;
    border-radius:13px !important;
  }

  body:has(.employee-mobile-dashboard) .employee-mobile-lang a.active{
    background:rgba(255,255,255,.92) !important;
    color:#0f4aa1 !important;
    box-shadow:0 8px 18px rgba(0,0,0,.14) !important;
  }

  /* Menu user + logout */
  body:has(.employee-mobile-dashboard) .employee-mobile-userbar{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:10px !important;
    padding-top:10px !important;
  }

  body:has(.employee-mobile-dashboard) .employee-profile-link,
  body:has(.employee-mobile-dashboard) .employee-logout-link{
    margin:0 !important;
    text-decoration:none !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    border-radius:16px !important;
    font-weight:950 !important;
    line-height:1 !important;
  }

  body:has(.employee-mobile-dashboard) .employee-profile-link{
    flex:1 1 auto !important;
    min-width:0 !important;
    max-width:none !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
    padding:11px 13px !important;
    color:#ffffff !important;
    background:rgba(255,255,255,.08) !important;
    border:1px solid rgba(255,255,255,.12) !important;
    font-size:12px !important;
  }

  body:has(.employee-mobile-dashboard) .employee-profile-link::before{
    content:"👤";
    margin-right:7px;
    opacity:.95;
  }

  body:has(.employee-mobile-dashboard) .employee-logout-link{
    flex:0 0 auto !important;
    padding:11px 14px !important;
    color:#fff !important;
    background:rgba(239,68,68,.22) !important;
    border:1px solid rgba(248,113,113,.30) !important;
    font-size:12px !important;
  }

  body:has(.employee-mobile-dashboard) .employee-logout-link:hover{
    background:rgba(239,68,68,.32) !important;
  }
}

@media (max-width:420px){
  body:has(.employee-mobile-dashboard) .employee-mobile-lang a{
    padding:7px 8px !important;
    font-size:10px !important;
  }

  body:has(.employee-mobile-dashboard) .employee-profile-link{
    font-size:11.5px !important;
  }

  body:has(.employee-mobile-dashboard) .employee-logout-link{
    font-size:11.5px !important;
    padding:11px 12px !important;
  }
}

/* =========================================================
   EMPLOYEE MOBILE SMALL DROPDOWN MENU
   Tombol kecil: tap -> nama user + logout
   ========================================================= */

@media (max-width:900px){

  body:has(.employee-mobile-dashboard) .employee-mobile-head{
    display:grid !important;
    grid-template-columns:1fr auto auto !important;
    align-items:center !important;
    gap:8px !important;
    position:relative !important;
  }

  body:has(.employee-mobile-dashboard) .employee-mobile-lang{
    grid-column:2 !important;
  }

  body:has(.employee-mobile-dashboard) .employee-mobile-dropdown{
    grid-column:3 !important;
    position:relative !important;
    z-index:50 !important;
  }

  body:has(.employee-mobile-dashboard) .employee-mobile-dropdown summary{
    list-style:none !important;
    width:42px !important;
    height:42px !important;
    border-radius:16px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    cursor:pointer !important;
    color:#fff !important;
    font-size:18px !important;
    font-weight:950 !important;
    background:rgba(255,255,255,.12) !important;
    border:1px solid rgba(255,255,255,.18) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08) !important;
  }

  body:has(.employee-mobile-dashboard) .employee-mobile-dropdown summary::-webkit-details-marker{
    display:none !important;
  }

  body:has(.employee-mobile-dashboard) .employee-mobile-dropdown[open] summary{
    background:rgba(255,255,255,.22) !important;
  }

  body:has(.employee-mobile-dashboard) .employee-mobile-dropdown-menu{
    position:absolute !important;
    top:50px !important;
    right:0 !important;
    width:210px !important;
    padding:10px !important;
    border-radius:18px !important;
    background:rgba(255,255,255,.96) !important;
    border:1px solid rgba(226,232,240,.95) !important;
    box-shadow:0 22px 45px rgba(15,23,42,.22) !important;
    backdrop-filter:blur(16px) !important;
  }

  body:has(.employee-mobile-dashboard) .employee-dropdown-user{
    padding:10px 11px !important;
    margin-bottom:8px !important;
    border-radius:14px !important;
    background:#eff6ff !important;
    color:#0f172a !important;
    font-size:12px !important;
    font-weight:950 !important;
    line-height:1.35 !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  body:has(.employee-mobile-dashboard) .employee-mobile-dropdown-menu a{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    margin:0 !important;
    padding:11px 12px !important;
    border-radius:14px !important;
    background:#ef4444 !important;
    color:#fff !important;
    text-decoration:none !important;
    font-size:12px !important;
    font-weight:950 !important;
  }

  /* Pastikan userbar lama tidak tampil kalau masih tersisa */
  body:has(.employee-mobile-dashboard) .employee-mobile-userbar{
    display:none !important;
  }
}

@media (max-width:420px){
  body:has(.employee-mobile-dashboard) .employee-mobile-dropdown summary{
    width:40px !important;
    height:40px !important;
    border-radius:15px !important;
  }

  body:has(.employee-mobile-dashboard) .employee-mobile-dropdown-menu{
    width:196px !important;
  }
}

/* =========================================================
   FIX EMPLOYEE DROPDOWN TERSEMBUNYI
   Membuat submenu ☰ tampil di atas header
   ========================================================= */

@media (max-width:900px){

  body:has(.employee-mobile-dashboard) aside.employee-mobile-aside{
    overflow:visible !important;
    position:relative !important;
    z-index:1000 !important;
  }

  body:has(.employee-mobile-dashboard) .employee-mobile-head{
    overflow:visible !important;
    position:relative !important;
    z-index:1002 !important;
  }

  body:has(.employee-mobile-dashboard) .employee-mobile-dropdown{
    position:relative !important;
    z-index:1005 !important;
  }

  body:has(.employee-mobile-dashboard) .employee-mobile-dropdown-menu{
    display:none !important;
    position:absolute !important;
    top:48px !important;
    right:0 !important;
    z-index:9999 !important;
  }

  body:has(.employee-mobile-dashboard) .employee-mobile-dropdown[open] .employee-mobile-dropdown-menu{
    display:block !important;
  }

  body:has(.employee-mobile-dashboard) .employee-mobile-dashboard,
  body:has(.employee-mobile-dashboard) main{
    position:relative !important;
    z-index:1 !important;
  }
}

/* =========================================================
   EMPLOYEE MOBILE PREMIUM HEADER
   ========================================================= */
@media (max-width:900px){

  body:has(.employee-mobile-dashboard) .topbar-tools .current-user{
    display:none !important;
  }

  body:has(.employee-mobile-dashboard) aside{
    padding-top:14px !important;
  }

  body:has(.employee-mobile-dashboard) aside .brand.employee-brand-welcome{
    display:flex !important;
    align-items:flex-start !important;
    justify-content:flex-start !important;
    min-height:90px !important;
    padding:14px 16px !important;
    border-radius:22px !important;
    background:linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.08)) !important;
    border:1px solid rgba(255,255,255,.16) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 10px 28px rgba(3,17,39,.18) !important;
    line-height:1.15 !important;
  }

  body:has(.employee-mobile-dashboard) aside .brand.employee-brand-welcome .employee-brand-welcome-copy{
    display:flex;
    flex-direction:column;
    gap:3px;
    width:100%;
  }

  body:has(.employee-mobile-dashboard) aside .brand.employee-brand-welcome .employee-brand-kicker{
    display:block;
    font-size:11px;
    font-weight:700;
    color:rgba(232,244,255,.86);
    letter-spacing:.2px;
  }

  body:has(.employee-mobile-dashboard) aside .brand.employee-brand-welcome .employee-brand-user{
    display:block;
    font-size:20px;
    line-height:1.15;
    font-weight:900;
    color:#ffffff;
    letter-spacing:-.2px;
    word-break:break-word;
  }

  body:has(.employee-mobile-dashboard) aside .brand.employee-brand-welcome .employee-brand-app{
    display:block;
    font-size:12px;
    font-weight:700;
    color:rgba(226,239,255,.88);
  }

  /* rapikan switch bahasa supaya lebih ringan */
  body:has(.employee-mobile-dashboard) .topbar-tools .language-switch{
    background:transparent !important;
    border:none !important;
    box-shadow:none !important;
    padding:0 !important;
    gap:6px !important;
  }

  body:has(.employee-mobile-dashboard) .topbar-tools .language-switch a{
    min-width:auto !important;
    padding:8px 12px !important;
    border-radius:14px !important;
    font-size:12px !important;
    font-weight:800 !important;
  }

  body:has(.employee-mobile-dashboard) .topbar-tools .language-switch a.active{
    box-shadow:0 8px 22px rgba(29,78,216,.24) !important;
  }
}

/* =========================================================
   EMPLOYEE MOBILE HEADER JUARA FINAL
   Rebuild final: welcome + bahasa + tombol akun dalam 1 baris stabil
   ========================================================= */

@media (max-width:900px){

  body:has(.employee-mobile-dashboard) header{
    display:none !important;
  }

  body:has(.employee-mobile-dashboard) aside.employee-mobile-aside{
    position:relative !important;
    overflow:visible !important;
    z-index:1000 !important;
    width:auto !important;
    min-height:0 !important;
    margin:10px 10px 8px !important;
    padding:12px !important;
    border-radius:26px !important;
    background:
      radial-gradient(circle at 82% 0%, rgba(255,255,255,.20), transparent 34%),
      radial-gradient(circle at 22% 18%, rgba(20,184,166,.15), transparent 30%),
      linear-gradient(150deg,#082f49 0%,#123d7a 55%,#06254d 100%) !important;
    box-shadow:0 18px 42px rgba(15,23,42,.18) !important;
  }

  body:has(.employee-mobile-dashboard) .employee-mobile-head-final{
    position:relative !important;
    overflow:visible !important;
    z-index:1002 !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto auto !important;
    align-items:center !important;
    gap:8px !important;
    padding:0 !important;
    border:0 !important;
  }

  body:has(.employee-mobile-dashboard) aside.employee-mobile-aside .brand.employee-brand-welcome{
    grid-column:1 !important;
    min-width:0 !important;
    min-height:72px !important;
    height:auto !important;
    margin:0 !important;
    padding:12px 13px !important;
    border-radius:22px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:10px !important;
    color:#fff !important;
    background:linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.075)) !important;
    border:1px solid rgba(255,255,255,.16) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 10px 24px rgba(0,0,0,.10) !important;
  }

  body:has(.employee-mobile-dashboard) aside.employee-mobile-aside .brand.employee-brand-welcome::before{
    content:"★" !important;
    width:36px !important;
    height:36px !important;
    min-width:36px !important;
    border-radius:14px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    color:#0f766e !important;
    background:linear-gradient(180deg,#ffffff,#dcfce7) !important;
    box-shadow:0 10px 20px rgba(0,0,0,.14) !important;
    font-size:14px !important;
  }

  body:has(.employee-mobile-dashboard) .employee-brand-welcome-copy{
    min-width:0 !important;
    display:flex !important;
    flex-direction:column !important;
    gap:2px !important;
    line-height:1.1 !important;
  }

  body:has(.employee-mobile-dashboard) .employee-brand-kicker{
    display:block !important;
    color:rgba(232,244,255,.86) !important;
    font-size:10.5px !important;
    font-weight:800 !important;
    letter-spacing:.15px !important;
  }

  body:has(.employee-mobile-dashboard) .employee-brand-user{
    display:block !important;
    color:#fff !important;
    font-size:17px !important;
    font-weight:950 !important;
    letter-spacing:-.25px !important;
    line-height:1.12 !important;
    max-width:100% !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }

  body:has(.employee-mobile-dashboard) .employee-brand-app{
    display:block !important;
    color:rgba(226,239,255,.88) !important;
    font-size:11px !important;
    font-weight:800 !important;
  }

  body:has(.employee-mobile-dashboard) .employee-mobile-lang{
    grid-column:2 !important;
    display:flex !important;
    align-items:center !important;
    gap:4px !important;
    margin:0 !important;
    padding:4px !important;
    border-radius:18px !important;
    background:rgba(255,255,255,.11) !important;
    border:1px solid rgba(255,255,255,.16) !important;
    box-shadow:none !important;
    backdrop-filter:blur(12px) !important;
    white-space:nowrap !important;
  }

  body:has(.employee-mobile-dashboard) .employee-mobile-lang a{
    margin:0 !important;
    padding:8px 9px !important;
    min-width:auto !important;
    border-radius:14px !important;
    color:rgba(255,255,255,.88) !important;
    background:transparent !important;
    border:0 !important;
    font-size:10px !important;
    font-weight:950 !important;
    text-decoration:none !important;
    box-shadow:none !important;
  }

  body:has(.employee-mobile-dashboard) .employee-mobile-lang a.active{
    background:rgba(255,255,255,.94) !important;
    color:#0f4aa1 !important;
    box-shadow:0 8px 18px rgba(0,0,0,.14) !important;
  }

  body:has(.employee-mobile-dashboard) .employee-mobile-dropdown{
    grid-column:3 !important;
    position:relative !important;
    z-index:1005 !important;
    margin:0 !important;
  }

  body:has(.employee-mobile-dashboard) .employee-mobile-dropdown summary{
    list-style:none !important;
    width:42px !important;
    height:42px !important;
    border-radius:16px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    cursor:pointer !important;
    color:#fff !important;
    font-size:18px !important;
    font-weight:950 !important;
    background:rgba(255,255,255,.12) !important;
    border:1px solid rgba(255,255,255,.18) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08) !important;
  }

  body:has(.employee-mobile-dashboard) .employee-mobile-dropdown summary::-webkit-details-marker{
    display:none !important;
  }

  body:has(.employee-mobile-dashboard) .employee-mobile-dropdown[open] summary{
    background:rgba(255,255,255,.22) !important;
  }

  body:has(.employee-mobile-dashboard) .employee-mobile-dropdown-menu{
    display:none !important;
    position:absolute !important;
    top:48px !important;
    right:0 !important;
    width:210px !important;
    z-index:9999 !important;
    padding:10px !important;
    border-radius:18px !important;
    background:rgba(255,255,255,.97) !important;
    border:1px solid rgba(226,232,240,.95) !important;
    box-shadow:0 22px 45px rgba(15,23,42,.24) !important;
    backdrop-filter:blur(16px) !important;
  }

  body:has(.employee-mobile-dashboard) .employee-mobile-dropdown[open] .employee-mobile-dropdown-menu{
    display:block !important;
  }

  body:has(.employee-mobile-dashboard) .employee-dropdown-user{
    padding:10px 11px !important;
    margin-bottom:8px !important;
    border-radius:14px !important;
    background:#eff6ff !important;
    color:#0f172a !important;
    font-size:12px !important;
    font-weight:950 !important;
    line-height:1.35 !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  body:has(.employee-mobile-dashboard) .employee-mobile-dropdown-menu a{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    margin:0 !important;
    padding:11px 12px !important;
    border-radius:14px !important;
    background:#ef4444 !important;
    color:#fff !important;
    text-decoration:none !important;
    font-size:12px !important;
    font-weight:950 !important;
  }

  body:has(.employee-mobile-dashboard) main{
    margin-left:0 !important;
    padding:8px 10px 22px !important;
    position:relative !important;
    z-index:1 !important;
  }

  body:has(.employee-mobile-dashboard) .employee-mobile-dashboard{
    position:relative !important;
    z-index:1 !important;
  }
}

@media (max-width:420px){

  body:has(.employee-mobile-dashboard) .employee-mobile-head-final{
    grid-template-columns:minmax(0,1fr) auto auto !important;
    gap:6px !important;
  }

  body:has(.employee-mobile-dashboard) aside.employee-mobile-aside .brand.employee-brand-welcome{
    min-height:68px !important;
    padding:11px 12px !important;
    border-radius:20px !important;
  }

  body:has(.employee-mobile-dashboard) aside.employee-mobile-aside .brand.employee-brand-welcome::before{
    width:34px !important;
    height:34px !important;
    min-width:34px !important;
    border-radius:13px !important;
  }

  body:has(.employee-mobile-dashboard) .employee-brand-user{
    font-size:15.5px !important;
  }

  body:has(.employee-mobile-dashboard) .employee-brand-kicker{
    font-size:10px !important;
  }

  body:has(.employee-mobile-dashboard) .employee-brand-app{
    font-size:10.5px !important;
  }

  body:has(.employee-mobile-dashboard) .employee-mobile-lang a{
    padding:7px 7px !important;
    font-size:9.5px !important;
  }

  body:has(.employee-mobile-dashboard) .employee-mobile-dropdown summary{
    width:40px !important;
    height:40px !important;
    border-radius:15px !important;
  }

  body:has(.employee-mobile-dashboard) .employee-mobile-dropdown-menu{
    width:196px !important;
  }
}

/* =========================================================
   EMPLOYEE HEADER FINAL CLEAN JUARA
   Bahasa dipindah ke dropdown, header fokus ke sambutan
   ========================================================= */

@media (max-width:900px){

  body:has(.employee-mobile-dashboard) .employee-mobile-head-final{
    grid-template-columns:minmax(0,1fr) auto !important;
    gap:10px !important;
    align-items:center !important;
  }

  body:has(.employee-mobile-dashboard) .employee-mobile-head-final > .employee-mobile-lang{
    display:none !important;
  }

  body:has(.employee-mobile-dashboard) aside.employee-mobile-aside .brand.employee-brand-welcome{
    min-height:82px !important;
    padding:14px 15px !important;
    border-radius:24px !important;
  }

  body:has(.employee-mobile-dashboard) aside.employee-mobile-aside .brand.employee-brand-welcome::before{
    width:42px !important;
    height:42px !important;
    min-width:42px !important;
    border-radius:16px !important;
    font-size:15px !important;
  }

  body:has(.employee-mobile-dashboard) .employee-brand-user{
    font-size:20px !important;
    max-width:100% !important;
    white-space:normal !important;
    overflow:visible !important;
    text-overflow:clip !important;
    line-height:1.12 !important;
  }

  body:has(.employee-mobile-dashboard) .employee-brand-kicker{
    font-size:11px !important;
  }

  body:has(.employee-mobile-dashboard) .employee-brand-app{
    font-size:11.5px !important;
  }

  body:has(.employee-mobile-dashboard) .employee-mobile-dropdown{
    grid-column:2 !important;
    align-self:start !important;
    margin-top:10px !important;
  }

  body:has(.employee-mobile-dashboard) .employee-mobile-dropdown summary{
    width:46px !important;
    height:46px !important;
    border-radius:17px !important;
    background:rgba(255,255,255,.16) !important;
  }

  body:has(.employee-mobile-dashboard) .employee-mobile-dropdown-menu{
    top:54px !important;
    right:0 !important;
    width:224px !important;
  }

  body:has(.employee-mobile-dashboard) .employee-mobile-lang-menu{
    display:flex !important;
    gap:6px !important;
    padding:6px !important;
    margin:0 0 8px !important;
    border-radius:15px !important;
    background:#f1f5f9 !important;
    border:1px solid rgba(226,232,240,.95) !important;
    box-shadow:none !important;
  }

  body:has(.employee-mobile-dashboard) .employee-mobile-lang-menu a{
    flex:1 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    margin:0 !important;
    padding:9px 8px !important;
    border-radius:12px !important;
    text-decoration:none !important;
    font-size:11px !important;
    font-weight:950 !important;
    color:#0f4aa1 !important;
    background:transparent !important;
  }

  body:has(.employee-mobile-dashboard) .employee-mobile-lang-menu a.active{
    background:#0f4aa1 !important;
    color:#fff !important;
    box-shadow:0 8px 18px rgba(15,74,161,.18) !important;
  }
}

@media (max-width:420px){

  body:has(.employee-mobile-dashboard) aside.employee-mobile-aside .brand.employee-brand-welcome{
    min-height:78px !important;
    padding:13px 13px !important;
  }

  body:has(.employee-mobile-dashboard) aside.employee-mobile-aside .brand.employee-brand-welcome::before{
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
  }

  body:has(.employee-mobile-dashboard) .employee-brand-user{
    font-size:17px !important;
  }

  body:has(.employee-mobile-dashboard) .employee-mobile-dropdown summary{
    width:42px !important;
    height:42px !important;
  }

  body:has(.employee-mobile-dashboard) .employee-mobile-dropdown-menu{
    width:210px !important;
  }
}


/* EMPLOYEE DASHBOARD NEAT LAYOUT */
.employee-metric-row > div{
  background:#f8fafc;
  border:1px solid rgba(191,219,254,.55);
  border-radius:18px;
  padding:14px 14px 12px;
  min-height:74px;
  box-sizing:border-box;
}

.employee-metric-row > div small{
  display:block;
  font-size:13px;
  font-weight:700;
  color:#64748b;
  margin-bottom:8px;
}

.employee-metric-row > div strong{
  display:block;
  font-size:16px;
  line-height:1.2;
  font-weight:900;
  color:#0f172a;
}

.employee-metric-row > div:nth-child(3){
  grid-column:1 / -1;
  text-align:center;
  min-height:72px;
}

.employee-time-box small{
  display:block;
  font-size:13px;
  font-weight:700;
  color:#64748b;
  margin-bottom:10px;
}

.employee-time-box strong{
  display:block;
  font-size:20px;
  line-height:1.1;
  font-weight:900;
  color:#0f172a;
}

.employee-time-box::after{
  content:"";
  position:absolute;
  top:-8px;
  right:-8px;
  width:54px;
  height:54px;
  border-radius:50%;
  background:rgba(15,118,110,.06);
}

.employee-time-box.active{
  background:linear-gradient(180deg,#f2fbff 0%, #edf8f7 100%);
}

@media (max-width: 768px){
  .employee-today-card{
    padding:16px 14px 14px;
    border-radius:26px;
  }

  .employee-time-grid{
    gap:10px;
  }

  .employee-time-box{
    min-height:86px;
    padding:12px 12px 10px;
    border-radius:16px;
  }

  .employee-time-box strong{
    font-size:17px;
  }

  .employee-metric-row{
    gap:10px;
  }

  .employee-metric-row > div{
    min-height:70px;
    padding:12px 12px 10px;
    border-radius:16px;
  }

  .employee-metric-row > div strong{
    font-size:14px;
  }
}

/* =========================================================
   EMPLOYEE MOBILE METRIC 2 KOLOM FINAL
   Terlambat + Pulang Cepat sejajar, Lembur full width
   ========================================================= */

@media (max-width:768px){

  body:has(.employee-mobile-dashboard) .employee-time-grid{
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:12px !important;
  }

  body:has(.employee-mobile-dashboard) .employee-metric-row{
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:12px !important;
    margin-top:12px !important;
  }

  body:has(.employee-mobile-dashboard) .employee-metric-row > div{
    width:auto !important;
    min-width:0 !important;
    margin:0 !important;
    box-sizing:border-box !important;
  }

  body:has(.employee-mobile-dashboard) .employee-metric-row > div:nth-child(1),
  body:has(.employee-mobile-dashboard) .employee-metric-row > div:nth-child(2){
    grid-column:auto !important;
  }

  body:has(.employee-mobile-dashboard) .employee-metric-row > div:nth-child(3){
    grid-column:1 / -1 !important;
    text-align:center !important;
  }
}

@media (max-width:420px){

  body:has(.employee-mobile-dashboard) .employee-time-grid,
  body:has(.employee-mobile-dashboard) .employee-metric-row{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:10px !important;
  }

  body:has(.employee-mobile-dashboard) .employee-time-box,
  body:has(.employee-mobile-dashboard) .employee-metric-row > div{
    min-height:76px !important;
    padding:12px 12px 10px !important;
    border-radius:16px !important;
  }

  body:has(.employee-mobile-dashboard) .employee-time-box strong{
    font-size:20px !important;
  }

  body:has(.employee-mobile-dashboard) .employee-metric-row > div strong{
    font-size:14px !important;
  }
}

/* =========================================================
   EMPLOYEE HISTORY PREMIUM MOBILE
   ========================================================= */

.employee-history-item{
  background:#ffffff;
  border:1px solid #d9e4f2;
  border-radius:20px;
  padding:16px 14px;
  box-shadow:0 8px 24px rgba(15,23,42,.05);
  margin-bottom:14px;
}

.employee-history-date{
  text-align:center;
  font-size:15px;
  font-weight:900;
  color:#0f172a;
  margin-bottom:12px;
}

.employee-history-mini-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-bottom:12px;
}

.employee-history-mini-box{
  background:#f8fbff;
  border:1px solid #cfe0f5;
  border-radius:14px;
  padding:10px 8px;
  text-align:center;
}

.employee-history-mini-box small{
  display:block;
  font-size:11px;
  line-height:1.2;
  color:#64748b;
  font-weight:700;
  margin-bottom:6px;
}

.employee-history-mini-box strong{
  display:block;
  font-size:12px;
  line-height:1.25;
  color:#0f172a;
  font-weight:900;
}

.employee-history-time-row{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}

.employee-history-time-chip{
  background:#edf9f4;
  border:1px solid #d3efe2;
  border-radius:14px;
  padding:10px 10px;
  text-align:center;
}

.employee-history-time-chip small{
  display:block;
  font-size:11px;
  color:#64748b;
  font-weight:700;
  margin-bottom:4px;
}

.employee-history-time-chip strong{
  display:block;
  font-size:14px;
  color:#065f46;
  font-weight:900;
}

@media (max-width:420px){
  .employee-history-mini-grid{
    gap:8px;
  }

  .employee-history-mini-box{
    padding:9px 6px;
  }

  .employee-history-mini-box small{
    font-size:10.5px;
  }

  .employee-history-mini-box strong{
    font-size:11.5px;
  }

  .employee-history-time-chip strong{
    font-size:13px;
  }
}

/* =========================================================
   EMPLOYEE HISTORY PREMIUM FINAL
   Status + Terlambat + Pulang Cepat, jam kecil di bawah
   ========================================================= */

.employee-history-premium-item{
  display:block !important;
  background:#ffffff !important;
  border:1px solid rgba(191,219,254,.70) !important;
  border-radius:20px !important;
  padding:16px 14px !important;
  box-shadow:0 10px 26px rgba(15,23,42,.055) !important;
  margin-bottom:14px !important;
}

.employee-history-date{
  text-align:center;
  font-size:16px;
  font-weight:950;
  color:#0f172a;
  margin-bottom:13px;
}

.employee-history-mini-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:9px;
  margin-bottom:11px;
}

.employee-history-mini-box{
  background:linear-gradient(180deg,#f8fbff 0%,#f1f8ff 100%);
  border:1px solid rgba(191,219,254,.85);
  border-radius:15px;
  padding:10px 7px;
  text-align:center;
  min-height:66px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.employee-history-mini-box small{
  display:block;
  font-size:10.5px;
  line-height:1.15;
  color:#64748b;
  font-weight:950;
  margin-bottom:6px;
}

.employee-history-mini-box strong{
  display:block;
  font-size:11.5px;
  line-height:1.22;
  color:#0f172a;
  font-weight:950;
  word-break:break-word;
}

.employee-history-time-row{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;
}

.employee-history-time-chip{
  background:#ecfdf5;
  border:1px solid rgba(187,247,208,.95);
  border-radius:15px;
  padding:9px 10px;
  text-align:center;
}

.employee-history-time-chip small{
  display:block;
  font-size:10.5px;
  color:#64748b;
  font-weight:950;
  margin-bottom:4px;
}

.employee-history-time-chip strong{
  display:block;
  font-size:14px;
  color:#065f46;
  font-weight:950;
}

@media (max-width:420px){
  .employee-history-premium-item{
    padding:15px 12px !important;
    border-radius:19px !important;
  }

  .employee-history-date{
    font-size:15px;
    margin-bottom:12px;
  }

  .employee-history-mini-grid{
    gap:7px;
  }

  .employee-history-mini-box{
    min-height:62px;
    padding:9px 5px;
    border-radius:13px;
  }

  .employee-history-mini-box small{
    font-size:9.8px;
  }

  .employee-history-mini-box strong{
    font-size:10.5px;
  }

  .employee-history-time-row{
    gap:7px;
  }

  .employee-history-time-chip{
    padding:8px 8px;
    border-radius:13px;
  }

  .employee-history-time-chip strong{
    font-size:13px;
  }
}

/* =========================================================
   EMPLOYEE HISTORY ACTIVE BLOCK FIX FINAL
   ========================================================= */

body:has(.employee-mobile-dashboard) .employee-history-card .employee-history-premium-item{
  display:block !important;
  background:#ffffff !important;
  border:1px solid rgba(191,219,254,.75) !important;
  border-radius:20px !important;
  padding:16px 14px !important;
  box-shadow:0 10px 26px rgba(15,23,42,.055) !important;
  margin-bottom:14px !important;
}

body:has(.employee-mobile-dashboard) .employee-history-card .employee-history-date{
  text-align:center !important;
  font-size:16px !important;
  font-weight:950 !important;
  color:#0f172a !important;
  margin-bottom:13px !important;
}

body:has(.employee-mobile-dashboard) .employee-history-card .employee-history-mini-grid{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:8px !important;
  margin-bottom:11px !important;
}

body:has(.employee-mobile-dashboard) .employee-history-card .employee-history-mini-box{
  background:linear-gradient(180deg,#f8fbff 0%,#f1f8ff 100%) !important;
  border:1px solid rgba(191,219,254,.85) !important;
  border-radius:15px !important;
  padding:10px 6px !important;
  text-align:center !important;
  min-height:66px !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
}

body:has(.employee-mobile-dashboard) .employee-history-card .employee-history-mini-box small{
  display:block !important;
  font-size:10px !important;
  line-height:1.15 !important;
  color:#64748b !important;
  font-weight:950 !important;
  margin-bottom:6px !important;
}

body:has(.employee-mobile-dashboard) .employee-history-card .employee-history-mini-box strong{
  display:block !important;
  font-size:10.5px !important;
  line-height:1.22 !important;
  color:#0f172a !important;
  font-weight:950 !important;
  word-break:break-word !important;
}

body:has(.employee-mobile-dashboard) .employee-history-card .employee-history-time-row{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:8px !important;
}

body:has(.employee-mobile-dashboard) .employee-history-card .employee-history-time-chip{
  background:#ecfdf5 !important;
  border:1px solid rgba(187,247,208,.95) !important;
  border-radius:15px !important;
  padding:9px 10px !important;
  text-align:center !important;
}

body:has(.employee-mobile-dashboard) .employee-history-card .employee-history-time-chip small{
  display:block !important;
  font-size:10px !important;
  color:#64748b !important;
  font-weight:950 !important;
  margin-bottom:4px !important;
}

body:has(.employee-mobile-dashboard) .employee-history-card .employee-history-time-chip strong{
  display:block !important;
  font-size:13px !important;
  color:#065f46 !important;
  font-weight:950 !important;
}

/* =========================================================
   EMPLOYEE MOBILE CENTER CARD HEADERS
   Tengah-kan judul Presensi Hari Ini dan Riwayat Singkat
   ========================================================= */

body:has(.employee-mobile-dashboard) .employee-today-card > .employee-section-head,
body:has(.employee-mobile-dashboard) .employee-history-card > .employee-section-head{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  gap:10px !important;
  margin-bottom:18px !important;
}

body:has(.employee-mobile-dashboard) .employee-today-card > .employee-section-head > div,
body:has(.employee-mobile-dashboard) .employee-history-card > .employee-section-head > div{
  width:100% !important;
  text-align:center !important;
}

body:has(.employee-mobile-dashboard) .employee-today-card .employee-status-pill{
  margin:0 auto !important;
}

body:has(.employee-mobile-dashboard) .employee-history-card .employee-mini-link{
  margin:0 auto !important;
}

@media (max-width:560px){
  body:has(.employee-mobile-dashboard) .employee-today-card > .employee-section-head,
  body:has(.employee-mobile-dashboard) .employee-history-card > .employee-section-head{
    gap:9px !important;
    margin-bottom:16px !important;
  }
}

/* =========================================================
   EMPLOYEE HISTORY PAGE CLEAN FINAL
   Samakan /me/history dengan tampilan Dashboard Saya
   ========================================================= */

@media (max-width:900px){

  /* Sembunyikan header desktop di halaman Riwayat Saya */
  body:has(.employee-page) main > header{
    display:none !important;
  }

  /* Paksa header atas employee sama seperti Dashboard Saya */
  body:has(.employee-page) aside.employee-mobile-aside{
    position:relative !important;
    overflow:visible !important;
    z-index:1000 !important;
    width:auto !important;
    min-height:0 !important;
    margin:10px 10px 8px !important;
    padding:12px !important;
    border-radius:26px !important;
    background:
      radial-gradient(circle at 82% 0%, rgba(255,255,255,.20), transparent 34%),
      radial-gradient(circle at 22% 18%, rgba(20,184,166,.15), transparent 30%),
      linear-gradient(150deg,#082f49 0%,#123d7a 55%,#06254d 100%) !important;
    box-shadow:0 18px 42px rgba(15,23,42,.18) !important;
  }

  body:has(.employee-page) .employee-mobile-head-final{
    position:relative !important;
    overflow:visible !important;
    z-index:1002 !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    align-items:center !important;
    gap:10px !important;
    padding:0 !important;
    border:0 !important;
  }

  body:has(.employee-page) aside.employee-mobile-aside .brand.employee-brand-welcome{
    grid-column:1 !important;
    min-width:0 !important;
    min-height:82px !important;
    height:auto !important;
    margin:0 !important;
    padding:14px 15px !important;
    border-radius:24px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:10px !important;
    color:#fff !important;
    background:linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.075)) !important;
    border:1px solid rgba(255,255,255,.16) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 10px 24px rgba(0,0,0,.10) !important;
  }

  body:has(.employee-page) aside.employee-mobile-aside .brand.employee-brand-welcome::before{
    content:"★" !important;
    width:42px !important;
    height:42px !important;
    min-width:42px !important;
    border-radius:16px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    color:#0f766e !important;
    background:linear-gradient(180deg,#ffffff,#dcfce7) !important;
    box-shadow:0 10px 20px rgba(0,0,0,.14) !important;
    font-size:15px !important;
  }

  body:has(.employee-page) .employee-brand-welcome-copy{
    min-width:0 !important;
    display:flex !important;
    flex-direction:column !important;
    gap:2px !important;
    line-height:1.1 !important;
  }

  body:has(.employee-page) .employee-brand-kicker{
    display:block !important;
    color:rgba(232,244,255,.86) !important;
    font-size:11px !important;
    font-weight:800 !important;
  }

  body:has(.employee-page) .employee-brand-user{
    display:block !important;
    color:#fff !important;
    font-size:20px !important;
    font-weight:950 !important;
    letter-spacing:-.25px !important;
    line-height:1.12 !important;
    white-space:normal !important;
    overflow:visible !important;
    text-overflow:clip !important;
  }

  body:has(.employee-page) .employee-brand-app{
    display:block !important;
    color:rgba(226,239,255,.88) !important;
    font-size:11.5px !important;
    font-weight:800 !important;
  }

  body:has(.employee-page) .employee-mobile-dropdown{
    grid-column:2 !important;
    align-self:start !important;
    margin-top:10px !important;
    position:relative !important;
    z-index:1005 !important;
  }

  body:has(.employee-page) .employee-mobile-dropdown summary{
    list-style:none !important;
    width:46px !important;
    height:46px !important;
    border-radius:17px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    cursor:pointer !important;
    color:#fff !important;
    font-size:18px !important;
    font-weight:950 !important;
    background:rgba(255,255,255,.16) !important;
    border:1px solid rgba(255,255,255,.18) !important;
  }

  body:has(.employee-page) .employee-mobile-dropdown summary::-webkit-details-marker{
    display:none !important;
  }

  body:has(.employee-page) .employee-mobile-dropdown-menu{
    display:none !important;
    position:absolute !important;
    top:54px !important;
    right:0 !important;
    width:224px !important;
    z-index:9999 !important;
    padding:10px !important;
    border-radius:18px !important;
    background:rgba(255,255,255,.97) !important;
    border:1px solid rgba(226,232,240,.95) !important;
    box-shadow:0 22px 45px rgba(15,23,42,.24) !important;
    backdrop-filter:blur(16px) !important;
  }

  body:has(.employee-page) .employee-mobile-dropdown[open] .employee-mobile-dropdown-menu{
    display:block !important;
  }

  /* Hapus hero besar hijau yang disilang */
  body:has(.employee-page) .employee-page > .employee-hero{
    display:none !important;
  }

  /* Samakan posisi konten dengan Dashboard Saya */
  body:has(.employee-page) main{
    margin-left:0 !important;
    padding:8px 10px 22px !important;
    position:relative !important;
    z-index:1 !important;
    background:
      radial-gradient(circle at 16% 8%, rgba(16,185,129,.13), transparent 26%),
      radial-gradient(circle at 88% 12%, rgba(59,130,246,.13), transparent 28%),
      linear-gradient(180deg,#f8fbff 0%,#eef6ff 100%) !important;
  }

  body:has(.employee-page) .employee-page{
    width:100% !important;
    max-width:980px !important;
    margin:0 auto !important;
    display:grid !important;
    gap:14px !important;
  }

  /* Filter tanggal dibuat card putih premium */
  body:has(.employee-page) .employee-panel{
    border-radius:24px !important;
    padding:18px !important;
    background:rgba(255,255,255,.94) !important;
    border:1px solid rgba(226,232,240,.95) !important;
    box-shadow:0 18px 40px rgba(15,23,42,.07) !important;
  }

  body:has(.employee-page) .employee-filter{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:14px !important;
  }

  body:has(.employee-page) .employee-filter label{
    font-weight:950 !important;
    color:#334155 !important;
  }

  body:has(.employee-page) .employee-filter input{
    height:48px !important;
    border-radius:16px !important;
    border:1px solid rgba(148,163,184,.40) !important;
    padding:0 14px !important;
    background:#fff !important;
  }

  body:has(.employee-page) .employee-filter button{
    height:50px !important;
    border-radius:16px !important;
    background:linear-gradient(135deg,#0f4aa1,#0f766e) !important;
    color:#fff !important;
    font-weight:950 !important;
    box-shadow:0 14px 28px rgba(15,74,161,.18) !important;
  }
}

@media (max-width:420px){
  body:has(.employee-page) aside.employee-mobile-aside .brand.employee-brand-welcome{
    min-height:78px !important;
    padding:13px 13px !important;
  }

  body:has(.employee-page) aside.employee-mobile-aside .brand.employee-brand-welcome::before{
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
  }

  body:has(.employee-page) .employee-brand-user{
    font-size:17px !important;
  }

  body:has(.employee-page) .employee-mobile-dropdown summary{
    width:42px !important;
    height:42px !important;
  }

  body:has(.employee-page) .employee-mobile-dropdown-menu{
    width:210px !important;
  }
}

/* =========================================================
   FIX /me/history dropdown dan tombol filter
   ========================================================= */

@media (max-width:900px){

  /* Dropdown akun di halaman Riwayat Saya dibuat lebih solid */
  body:has(.employee-page) .employee-mobile-dropdown-menu{
    background:#ffffff !important;
    border:1px solid rgba(203,213,225,.95) !important;
    box-shadow:0 24px 50px rgba(15,23,42,.28) !important;
    opacity:1 !important;
  }

  body:has(.employee-page) .employee-dropdown-user{
    background:#eff6ff !important;
    color:#0f172a !important;
    opacity:1 !important;
    font-weight:950 !important;
  }

  body:has(.employee-page) .employee-mobile-lang-menu{
    background:#f1f5f9 !important;
    border:1px solid rgba(203,213,225,.95) !important;
    opacity:1 !important;
  }

  body:has(.employee-page) .employee-mobile-lang-menu a{
    color:#0f4aa1 !important;
    opacity:1 !important;
  }

  body:has(.employee-page) .employee-mobile-lang-menu a.active{
    background:#0f4aa1 !important;
    color:#ffffff !important;
  }

  body:has(.employee-page) .employee-mobile-dropdown-menu a[href="/logout"]{
    background:#ef4444 !important;
    color:#ffffff !important;
    opacity:1 !important;
  }

  /* Tombol filter tanggal jangan melebar keluar card */
  body:has(.employee-page) .employee-filter{
    width:100% !important;
    max-width:100% !important;
    overflow:hidden !important;
  }

  body:has(.employee-page) .employee-filter button{
    width:100% !important;
    max-width:100% !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  body:has(.employee-page) .employee-panel{
    overflow:hidden !important;
  }
}

@media (max-width:420px){
  body:has(.employee-page) .employee-mobile-dropdown-menu{
    right:0 !important;
    width:205px !important;
  }

  body:has(.employee-page) .employee-filter button{
    height:48px !important;
    font-size:13px !important;
  }
}

/* =========================================================
   EMPLOYEE HISTORY BACK TO DASHBOARD BUTTON
   ========================================================= */

body:has(.employee-page) .employee-back-dashboard-wrap{
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  margin:-2px 0 2px !important;
}

body:has(.employee-page) .employee-back-dashboard-btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:46px !important;
  padding:0 20px !important;
  border-radius:999px !important;
  text-decoration:none !important;
  color:#ffffff !important;
  font-weight:950 !important;
  font-size:14px !important;
  background:linear-gradient(135deg,#0f4aa1,#0f766e) !important;
  box-shadow:0 14px 30px rgba(15,74,161,.20) !important;
}

body:has(.employee-page) .employee-back-dashboard-btn:hover{
  transform:translateY(-1px);
}

@media (max-width:560px){
  body:has(.employee-page) .employee-back-dashboard-wrap{
    margin:-2px 0 1px !important;
  }

  body:has(.employee-page) .employee-back-dashboard-btn{
    width:100% !important;
    max-width:260px !important;
    min-height:44px !important;
    font-size:13px !important;
  }
}

/* =========================================================
   LOGIN MOBILE FORM FIRST
   Di HP: form login di atas, panel brand/fitur pindah ke bawah
   ========================================================= */

@media (max-width: 900px){

  .login-premium-shell{
    display:flex !important;
    flex-direction:column !important;
    gap:22px !important;
  }

  .login-premium-card{
    order:1 !important;
  }

  .login-premium-brand{
    order:2 !important;
  }

  .login-main{
    align-items:flex-start !important;
    padding-top:86px !important;
  }

  .login-premium-card{
    border-radius:28px !important;
  }

  .login-premium-brand{
    border-radius:28px !important;
  }
}

@media (max-width: 560px){

  .login-main{
    padding:82px 14px 22px !important;
  }

  .login-premium-shell{
    gap:18px !important;
  }

  .login-premium-card{
    padding:28px 22px !important;
  }

  .login-premium-brand{
    padding:28px 22px !important;
  }

  .login-card-head h2{
    font-size:30px !important;
    line-height:1.15 !important;
  }

  .login-premium-title{
    font-size:36px !important;
    line-height:1.08 !important;
  }

  .login-premium-subtitle{
    font-size:15px !important;
    line-height:1.65 !important;
  }

  .login-feature-list{
    gap:12px !important;
  }

  .login-feature-item{
    padding:14px !important;
    border-radius:18px !important;
  }
}

/* =========================================================
   LOGIN MOBILE CENTER TEXT + ARABIC FRIENDLY
   ========================================================= */

@media (max-width:900px){

  .login-main > header{
    left:0 !important;
    right:0 !important;
    top:14px !important;
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    width:100% !important;
    text-align:center !important;
  }

  .login-main .topbar-tools{
    width:100% !important;
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
  }

  .login-main .language-switch{
    margin:0 auto !important;
    text-align:center !important;
  }

  .login-premium-card,
  .login-premium-brand,
  .login-card-head,
  .login-premium-form,
  .login-premium-title,
  .login-premium-subtitle,
  .login-feature-item,
  .login-feature-item div{
    text-align:center !important;
  }

  .login-badge{
    margin-left:auto !important;
    margin-right:auto !important;
  }

  .login-premium-form label{
    text-align:center !important;
  }

  .login-premium-form input{
    text-align:center !important;
  }

  .login-feature-item{
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
  }

  .login-feature-icon{
    margin:0 auto 4px !important;
  }

  .login-premium-brand{
    align-items:center !important;
  }

  .login-premium-title{
    margin-left:auto !important;
    margin-right:auto !important;
  }

  .login-premium-subtitle{
    margin-left:auto !important;
    margin-right:auto !important;
    max-width:680px !important;
  }
}

/* Arabic login: tetap center dan nyaman dibaca */
html.locale-ar .login-premium-card,
html.locale-ar .login-premium-brand,
html.locale-ar .login-card-head,
html.locale-ar .login-premium-form,
html.locale-ar .login-premium-title,
html.locale-ar .login-premium-subtitle,
html.locale-ar .login-feature-item,
html.locale-ar .login-feature-item div{
  text-align:center !important;
}

html.locale-ar .login-feature-item{
  flex-direction:column !important;
}

html.locale-ar .login-premium-form input{
  text-align:center !important;
}

/* =========================================================
   APPROVER MOBILE MONITORING LITE
   Untuk Wadir/Kepsek: HP monitoring cepat, PC tetap aman
   ========================================================= */

@media (max-width:900px){

  body:has(.dashboard-landing) aside.approver-mobile-aside{
    position:static !important;
    width:auto !important;
    min-height:0 !important;
    margin:10px 10px 8px !important;
    padding:13px !important;
    border-radius:26px !important;
    overflow:visible !important;
    background:
      radial-gradient(circle at 82% 0%, rgba(255,255,255,.20), transparent 34%),
      radial-gradient(circle at 22% 18%, rgba(20,184,166,.15), transparent 30%),
      linear-gradient(150deg,#082f49 0%,#123d7a 55%,#06254d 100%) !important;
    box-shadow:0 18px 42px rgba(15,23,42,.18) !important;
  }

  body:has(.dashboard-landing) aside.approver-mobile-aside .brand{
    margin:0 0 12px !important;
    min-height:58px !important;
    padding:12px 14px !important;
    border-radius:22px !important;
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
    color:#fff !important;
    background:linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.075)) !important;
    border:1px solid rgba(255,255,255,.16) !important;
    font-size:16px !important;
    font-weight:950 !important;
  }

  body:has(.dashboard-landing) aside.approver-mobile-aside .brand::before{
    content:"★" !important;
    width:36px !important;
    height:36px !important;
    min-width:36px !important;
    border-radius:14px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    color:#0f766e !important;
    background:linear-gradient(180deg,#ffffff,#dcfce7) !important;
    box-shadow:0 10px 20px rgba(0,0,0,.14) !important;
    font-size:14px !important;
  }

  body:has(.dashboard-landing) aside.approver-mobile-aside a{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    margin:4px 4px 0 0 !important;
    padding:10px 12px !important;
    border-radius:15px !important;
    color:#fff !important;
    background:rgba(255,255,255,.08) !important;
    border:1px solid rgba(255,255,255,.10) !important;
    font-size:12px !important;
    font-weight:950 !important;
    text-decoration:none !important;
  }

  body:has(.dashboard-landing) aside.approver-mobile-aside a[href="/"]{
    background:rgba(20,184,166,.30) !important;
    border-color:rgba(45,212,191,.35) !important;
  }

  body:has(.dashboard-landing) aside.approver-mobile-aside a[href="/logout"]{
    background:rgba(239,68,68,.20) !important;
    border-color:rgba(248,113,113,.30) !important;
  }

  body:has(.dashboard-landing) main{
    margin-left:0 !important;
    padding:10px 10px 22px !important;
    background:
      radial-gradient(circle at 16% 8%, rgba(16,185,129,.13), transparent 26%),
      radial-gradient(circle at 88% 12%, rgba(59,130,246,.13), transparent 28%),
      linear-gradient(180deg,#f8fbff 0%,#eef6ff 100%) !important;
  }

  body:has(.dashboard-landing) main > header{
    margin:0 0 12px !important;
  }

  body:has(.dashboard-landing) main > header h1{
    display:none !important;
  }

  body:has(.dashboard-landing) main > header .topbar-tools{
    width:100% !important;
    display:flex !important;
    justify-content:space-between !important;
    align-items:center !important;
    gap:10px !important;
  }

  body:has(.dashboard-landing) .current-user{
    color:#0f172a !important;
    font-weight:950 !important;
    font-size:13px !important;
    background:transparent !important;
    box-shadow:none !important;
    padding:0 !important;
    max-width:170px !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }

  body:has(.dashboard-landing) .language-switch{
    margin-left:auto !important;
    box-shadow:0 12px 26px rgba(15,23,42,.08) !important;
  }

  body:has(.dashboard-landing) .dashboard-landing{
    gap:14px !important;
  }

  body:has(.dashboard-landing) .afisgo-hero{
    border-radius:26px !important;
    padding:22px 18px !important;
    grid-template-columns:1fr !important;
    min-height:auto !important;
  }

  body:has(.dashboard-landing) .afisgo-hero-title{
    font-size:28px !important;
    line-height:1.14 !important;
  }

  body:has(.dashboard-landing) .afisgo-hero-subtitle{
    font-size:14px !important;
    line-height:1.65 !important;
  }

  body:has(.dashboard-landing) .afisgo-hero-visual{
    display:none !important;
  }

  body:has(.dashboard-landing) .afisgo-hero-actions{
    display:flex !important;
    gap:9px !important;
    flex-wrap:wrap !important;
  }

  body:has(.dashboard-landing) .hero-btn{
    flex:1 1 auto !important;
    min-height:42px !important;
    padding:10px 12px !important;
    border-radius:15px !important;
    font-size:12px !important;
    text-align:center !important;
  }

  body:has(.dashboard-landing) .kpi-grid{
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0,1fr)) !important;
    gap:12px !important;
  }

  body:has(.dashboard-landing) .kpi-card{
    min-height:118px !important;
    border-radius:22px !important;
    padding:16px 12px !important;
    text-align:center !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
  }

  body:has(.dashboard-landing) .kpi-card .kpi-icon,
  body:has(.dashboard-landing) .kpi-icon{
    margin:0 auto 7px !important;
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
  }

  body:has(.dashboard-landing) .kpi-label{
    font-size:11.5px !important;
    line-height:1.25 !important;
  }

  body:has(.dashboard-landing) .kpi-value{
    font-size:25px !important;
    line-height:1.1 !important;
  }

  body:has(.dashboard-landing) .kpi-note{
    font-size:10.5px !important;
    line-height:1.3 !important;
  }

  body:has(.dashboard-landing) .quick-actions{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:12px !important;
  }

  body:has(.dashboard-landing) .quick-action-card{
    border-radius:22px !important;
    padding:18px !important;
  }
}

@media (max-width:420px){
  body:has(.dashboard-landing) aside.approver-mobile-aside{
    margin:8px 8px 8px !important;
    padding:12px !important;
    border-radius:24px !important;
  }

  body:has(.dashboard-landing) aside.approver-mobile-aside a{
    font-size:11.5px !important;
    padding:9px 10px !important;
  }

  body:has(.dashboard-landing) .afisgo-hero-title{
    font-size:24px !important;
  }

  body:has(.dashboard-landing) .kpi-grid{
    gap:10px !important;
  }

  body:has(.dashboard-landing) .kpi-card{
    min-height:112px !important;
    padding:14px 10px !important;
  }
}

/* =========================================================
   APPROVER MOBILE PREMIUM POLISH FINAL
   Rapikan tampilan HP Wadir/Kepsek
   ========================================================= */

@media (max-width:900px){

  /* Header/menu atas lebih compact dan premium */
  body:has(.dashboard-landing) aside.approver-mobile-aside{
    margin:8px 8px 8px !important;
    padding:12px !important;
    border-radius:24px !important;
  }

  body:has(.dashboard-landing) aside.approver-mobile-aside .brand{
    min-height:54px !important;
    margin-bottom:10px !important;
    padding:10px 12px !important;
    border-radius:20px !important;
    font-size:15px !important;
  }

  body:has(.dashboard-landing) aside.approver-mobile-aside .brand::before{
    width:34px !important;
    height:34px !important;
    min-width:34px !important;
    border-radius:13px !important;
  }

  body:has(.dashboard-landing) aside.approver-mobile-aside a{
    padding:9px 11px !important;
    border-radius:14px !important;
    font-size:11.5px !important;
    margin:4px 3px 0 0 !important;
  }

  /* Hilangkan nama user yang berdiri sendiri di tengah */
  body:has(.dashboard-landing) main > header .current-user{
    display:none !important;
  }

  body:has(.dashboard-landing) main > header{
    justify-content:center !important;
    margin:0 0 10px !important;
  }

  body:has(.dashboard-landing) main > header .topbar-tools{
    justify-content:center !important;
  }

  body:has(.dashboard-landing) main > header .language-switch{
    margin:0 auto !important;
  }

  /* Hero lebih compact */
  body:has(.dashboard-landing) .afisgo-hero{
    border-radius:24px !important;
    padding:20px 16px !important;
    margin-top:0 !important;
    box-shadow:0 18px 42px rgba(15,23,42,.16) !important;
  }

  body:has(.dashboard-landing) .afisgo-hero-badge{
    margin:0 auto 14px !important;
    width:max-content !important;
    max-width:100% !important;
    padding:9px 13px !important;
    border-radius:999px !important;
    font-size:11.5px !important;
  }

  body:has(.dashboard-landing) .afisgo-hero-content{
    text-align:center !important;
  }

  body:has(.dashboard-landing) .afisgo-hero-title{
    font-size:27px !important;
    line-height:1.12 !important;
    text-align:center !important;
    margin-bottom:10px !important;
  }

  body:has(.dashboard-landing) .afisgo-hero-subtitle{
    font-size:13.5px !important;
    line-height:1.58 !important;
    text-align:center !important;
    max-width:360px !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  body:has(.dashboard-landing) .afisgo-hero-actions{
    justify-content:center !important;
    margin-top:16px !important;
  }

  body:has(.dashboard-landing) .hero-btn{
    max-width:260px !important;
    min-height:42px !important;
    border-radius:16px !important;
    font-size:12px !important;
    margin:0 auto !important;
  }

  /* KPI lebih compact dan rapi */
  body:has(.dashboard-landing) .kpi-grid{
    gap:10px !important;
  }

  body:has(.dashboard-landing) .kpi-card{
    min-height:112px !important;
    border-radius:22px !important;
    padding:14px 10px !important;
    box-shadow:0 14px 32px rgba(15,23,42,.08) !important;
  }

  body:has(.dashboard-landing) .kpi-card .kpi-icon,
  body:has(.dashboard-landing) .kpi-icon{
    width:36px !important;
    height:36px !important;
    min-width:36px !important;
    margin-bottom:7px !important;
    border-radius:14px !important;
  }

  body:has(.dashboard-landing) .kpi-label{
    font-size:11px !important;
    line-height:1.25 !important;
    min-height:28px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
  }

  body:has(.dashboard-landing) .kpi-value{
    font-size:25px !important;
    line-height:1.05 !important;
    margin-top:4px !important;
  }

  body:has(.dashboard-landing) .kpi-note{
    font-size:10px !important;
    line-height:1.25 !important;
    margin-top:5px !important;
    text-align:center !important;
  }

  /* Quick action lebih app-like */
  body:has(.dashboard-landing) .quick-actions{
    gap:10px !important;
  }

  body:has(.dashboard-landing) .quick-action-card{
    border-radius:22px !important;
    padding:16px !important;
    text-align:center !important;
  }

  body:has(.dashboard-landing) .quick-action-title{
    font-size:15px !important;
    text-align:center !important;
  }

  body:has(.dashboard-landing) .quick-action-desc{
    font-size:12px !important;
    text-align:center !important;
  }
}

@media (max-width:420px){

  body:has(.dashboard-landing) aside.approver-mobile-aside{
    margin:7px 7px 8px !important;
    padding:11px !important;
  }

  body:has(.dashboard-landing) aside.approver-mobile-aside a{
    font-size:11px !important;
    padding:8px 10px !important;
  }

  body:has(.dashboard-landing) .afisgo-hero{
    padding:18px 14px !important;
  }

  body:has(.dashboard-landing) .afisgo-hero-title{
    font-size:24px !important;
  }

  body:has(.dashboard-landing) .afisgo-hero-subtitle{
    font-size:13px !important;
  }

  body:has(.dashboard-landing) .kpi-card{
    min-height:108px !important;
    padding:13px 9px !important;
  }

  body:has(.dashboard-landing) .kpi-value{
    font-size:23px !important;
  }
}

/* =========================================================
   APPROVER MOBILE FINAL CLEAN
   Header compact, raw/logout di dropdown, hero monitoring ringkas
   ========================================================= */

.approver-mobile-hero-title{
  display:none;
}

@media (max-width:900px){

  body:has(aside.approver-mobile-aside) header{
    display:none !important;
  }

  body:has(aside.approver-mobile-aside) aside.approver-mobile-aside{
    position:relative !important;
    overflow:visible !important;
    z-index:1000 !important;
    width:auto !important;
    min-height:0 !important;
    margin:10px 10px 8px !important;
    padding:12px !important;
    border-radius:26px !important;
    background:
      radial-gradient(circle at 82% 0%, rgba(255,255,255,.20), transparent 34%),
      radial-gradient(circle at 22% 18%, rgba(20,184,166,.15), transparent 30%),
      linear-gradient(150deg,#082f49 0%,#123d7a 55%,#06254d 100%) !important;
    box-shadow:0 18px 42px rgba(15,23,42,.18) !important;
  }

  body:has(aside.approver-mobile-aside) .approver-mobile-head{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    align-items:center !important;
    gap:10px !important;
    position:relative !important;
    overflow:visible !important;
    z-index:1002 !important;
  }

  body:has(aside.approver-mobile-aside) aside.approver-mobile-aside .brand{
    grid-column:1 !important;
    min-height:62px !important;
    margin:0 !important;
    padding:12px 14px !important;
    border-radius:22px !important;
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
    color:#fff !important;
    background:linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.075)) !important;
    border:1px solid rgba(255,255,255,.16) !important;
    font-size:16px !important;
    font-weight:950 !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 10px 24px rgba(0,0,0,.10) !important;
  }

  body:has(aside.approver-mobile-aside) aside.approver-mobile-aside .brand::before{
    content:"★" !important;
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
    border-radius:15px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    color:#0f766e !important;
    background:linear-gradient(180deg,#ffffff,#dcfce7) !important;
    box-shadow:0 10px 20px rgba(0,0,0,.14) !important;
    font-size:14px !important;
  }

  body:has(aside.approver-mobile-aside) .approver-mobile-dropdown{
    grid-column:2 !important;
    position:relative !important;
    z-index:1005 !important;
    margin:0 !important;
  }

  body:has(aside.approver-mobile-aside) .approver-mobile-dropdown summary{
    list-style:none !important;
    width:46px !important;
    height:46px !important;
    border-radius:17px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    cursor:pointer !important;
    color:#fff !important;
    font-size:18px !important;
    font-weight:950 !important;
    background:rgba(255,255,255,.16) !important;
    border:1px solid rgba(255,255,255,.18) !important;
  }

  body:has(aside.approver-mobile-aside) .approver-mobile-dropdown summary::-webkit-details-marker{
    display:none !important;
  }

  body:has(aside.approver-mobile-aside) .approver-mobile-dropdown-menu{
    display:none !important;
    position:absolute !important;
    top:54px !important;
    right:0 !important;
    width:224px !important;
    z-index:9999 !important;
    padding:10px !important;
    border-radius:18px !important;
    background:#ffffff !important;
    border:1px solid rgba(226,232,240,.95) !important;
    box-shadow:0 22px 45px rgba(15,23,42,.24) !important;
  }

  body:has(aside.approver-mobile-aside) .approver-mobile-dropdown[open] .approver-mobile-dropdown-menu{
    display:block !important;
  }

  body:has(aside.approver-mobile-aside) .approver-dropdown-user{
    padding:10px 11px !important;
    margin-bottom:8px !important;
    border-radius:14px !important;
    background:#eff6ff !important;
    color:#0f172a !important;
    font-size:12px !important;
    font-weight:950 !important;
  }

  body:has(aside.approver-mobile-aside) .approver-mobile-lang-menu{
    display:flex !important;
    gap:6px !important;
    padding:6px !important;
    margin:0 0 8px !important;
    border-radius:15px !important;
    background:#f1f5f9 !important;
    border:1px solid rgba(226,232,240,.95) !important;
  }

  body:has(aside.approver-mobile-aside) .approver-mobile-lang-menu a{
    flex:1 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    margin:0 !important;
    padding:9px 8px !important;
    border-radius:12px !important;
    text-decoration:none !important;
    font-size:11px !important;
    font-weight:950 !important;
    color:#0f4aa1 !important;
    background:transparent !important;
  }

  body:has(aside.approver-mobile-aside) .approver-mobile-lang-menu a.active{
    background:#0f4aa1 !important;
    color:#fff !important;
  }

  body:has(aside.approver-mobile-aside) .approver-mobile-dropdown-menu > a{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    margin:0 0 8px !important;
    padding:11px 12px !important;
    border-radius:14px !important;
    background:#eff6ff !important;
    color:#0f4aa1 !important;
    text-decoration:none !important;
    font-size:12px !important;
    font-weight:950 !important;
  }

  body:has(aside.approver-mobile-aside) .approver-mobile-dropdown-menu > a.approver-dropdown-logout{
    margin-bottom:0 !important;
    background:#ef4444 !important;
    color:#fff !important;
  }

  body:has(aside.approver-mobile-aside) .approver-mobile-quick-menu{
    display:flex !important;
    gap:8px !important;
    flex-wrap:wrap !important;
    margin-top:10px !important;
    padding-top:10px !important;
    border-top:1px solid rgba(255,255,255,.08) !important;
  }

  body:has(aside.approver-mobile-aside) .approver-mobile-quick-menu a{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    margin:0 !important;
    padding:10px 12px !important;
    border-radius:15px !important;
    color:#fff !important;
    background:rgba(255,255,255,.08) !important;
    border:1px solid rgba(255,255,255,.10) !important;
    font-size:12px !important;
    font-weight:950 !important;
    text-decoration:none !important;
  }

  body:has(aside.approver-mobile-aside) .approver-mobile-quick-menu a:first-child{
    background:rgba(20,184,166,.30) !important;
    border-color:rgba(45,212,191,.35) !important;
  }

  body:has(aside.approver-mobile-aside) main{
    margin-left:0 !important;
    padding:8px 10px 22px !important;
    background:
      radial-gradient(circle at 16% 8%, rgba(16,185,129,.13), transparent 26%),
      radial-gradient(circle at 88% 12%, rgba(59,130,246,.13), transparent 28%),
      linear-gradient(180deg,#f8fbff 0%,#eef6ff 100%) !important;
  }

  body:has(aside.approver-mobile-aside) .afisgo-hero{
    border-radius:24px !important;
    padding:18px 16px !important;
    min-height:auto !important;
    text-align:center !important;
  }

  body:has(aside.approver-mobile-aside) .afisgo-hero-badge,
  body:has(aside.approver-mobile-aside) .afisgo-hero-title,
  body:has(aside.approver-mobile-aside) .afisgo-hero-subtitle{
    display:none !important;
  }

  body:has(aside.approver-mobile-aside) .approver-mobile-hero-title{
    display:block !important;
    text-align:center !important;
    color:#fff !important;
    margin:2px 0 14px !important;
  }

  body:has(aside.approver-mobile-aside) .approver-mobile-hero-title span{
    display:block !important;
    font-size:13px !important;
    font-weight:850 !important;
    opacity:.86 !important;
    margin-bottom:5px !important;
  }

  body:has(aside.approver-mobile-aside) .approver-mobile-hero-title strong{
    display:block !important;
    font-size:24px !important;
    line-height:1.18 !important;
    font-weight:950 !important;
  }

  body:has(aside.approver-mobile-aside) .afisgo-hero-visual{
    display:none !important;
  }

  body:has(aside.approver-mobile-aside) .afisgo-hero-actions{
    justify-content:center !important;
    margin-top:0 !important;
  }

  body:has(aside.approver-mobile-aside) .hero-btn{
    max-width:230px !important;
    margin:0 auto !important;
    min-height:42px !important;
    border-radius:16px !important;
    font-size:12px !important;
  }
}

@media (max-width:420px){
  body:has(aside.approver-mobile-aside) aside.approver-mobile-aside{
    margin:8px 8px 8px !important;
    padding:11px !important;
  }

  body:has(aside.approver-mobile-aside) aside.approver-mobile-aside .brand{
    min-height:58px !important;
    font-size:15px !important;
  }

  body:has(aside.approver-mobile-aside) .approver-mobile-quick-menu a{
    font-size:11.5px !important;
    padding:9px 10px !important;
  }

  body:has(aside.approver-mobile-aside) .approver-mobile-hero-title strong{
    font-size:22px !important;
  }
}

/* AFISGO FIX FINAL: Approver/Wadir/Kepsek PC menu */
@media (min-width: 769px) {
  aside.approver-mobile-aside .approver-mobile-dropdown,
  aside.approver-mobile-aside .approver-mobile-quick-menu {
    display: none !important;
  }

  aside.approver-mobile-aside .approver-mobile-head {
    display: block !important;
    margin-bottom: 18px !important;
  }

  aside.approver-mobile-aside .approver-desktop-menu {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  aside.approver-mobile-aside .approver-desktop-menu a {
    display: block !important;
    padding: 14px 16px !important;
    border-radius: 14px !important;
    text-decoration: none !important;
    color: #eaf7ff !important;
    background: rgba(255,255,255,.07) !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    font-weight: 800 !important;
  }

  aside.approver-mobile-aside .approver-desktop-menu a:hover {
    background: rgba(255,255,255,.14) !important;
  }
}

/* AFISGO FIX FINAL: Approver mobile stays mobile */
@media (max-width: 768px) {
  aside.approver-mobile-aside .approver-desktop-menu {
    display: none !important;
  }
}