: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;
  }
}

/* AFISGO - Jadwal Shift Security */
.security-shift-page .shift-form {
  display: grid !important;
  gap: 18px !important;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
  align-items: start !important;
}

.security-shift-page label {
  display: flex !important;
  flex-direction: column !important;
  gap: 7px !important;
  font-weight: 800 !important;
}

.security-shift-page input,
.security-shift-page select,
.security-shift-page textarea {
  width: 100% !important;
  min-height: 46px !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 12px !important;
  padding: 10px 12px !important;
  font-weight: 700 !important;
  background: #fff !important;
}

.security-shift-page select[multiple] {
  height: 230px !important;
  min-height: 230px !important;
  padding: 10px !important;
}

.security-shift-page textarea {
  min-height: 90px !important;
  resize: vertical !important;
}

.security-shift-page .full-row {
  grid-column: 1 / -1 !important;
}

.security-shift-page .help {
  color: #64748b !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

.security-shift-page .shift-actions {
  grid-column: 1 / -1 !important;
  display: flex !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

/* AFISGO IZIN CUTI COMPACT PREMIUM FINAL */
.izin-cuti-page .afisgo-hero-card{
  padding:26px 32px !important;
  border-radius:24px !important;
  margin-bottom:22px !important;
  background:linear-gradient(135deg,#0b3a72,#0f766e) !important;
  color:#fff !important;
  min-height:190px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:24px !important;
}

.izin-cuti-page .hero-badge{
  display:inline-flex !important;
  align-items:center !important;
  padding:8px 14px !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.16) !important;
  color:#fff !important;
  font-weight:800 !important;
  font-size:13px !important;
  margin-bottom:14px !important;
}

.izin-cuti-page .afisgo-hero-title{
  color:#fff !important;
  font-size:42px !important;
  line-height:1.05 !important;
  margin:0 0 10px !important;
}

.izin-cuti-page .afisgo-hero-subtitle{
  color:rgba(255,255,255,.88) !important;
  max-width:720px !important;
  font-size:16px !important;
  line-height:1.6 !important;
}

.izin-cuti-page .hero-actions{
  display:flex !important;
  gap:12px !important;
  flex-wrap:wrap !important;
}

.izin-cuti-page .hero-actions .btn{
  white-space:nowrap !important;
  border-radius:14px !important;
  padding:13px 18px !important;
}

.izin-cuti-page .izin-summary-grid{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(150px,1fr)) !important;
  gap:16px !important;
  margin-top:18px !important;
}

.izin-cuti-page .izin-summary-card{
  padding:20px 22px !important;
  min-height:105px !important;
}

.izin-cuti-page .izin-summary-card strong{
  font-size:32px !important;
  margin-top:8px !important;
}

.izin-cuti-page .izin-table-card{
  padding:22px !important;
}

.izin-cuti-page .izin-table-card h1{
  font-size:24px !important;
}

.izin-cuti-page table{
  table-layout:fixed !important;
  font-size:13px !important;
}

.izin-cuti-page th{
  font-size:12px !important;
  padding:12px 12px !important;
  white-space:nowrap !important;
}

.izin-cuti-page td{
  font-size:13px !important;
  padding:13px 12px !important;
  vertical-align:middle !important;
}

.izin-cuti-page td strong{
  font-size:14px !important;
  line-height:1.35 !important;
  color:#0b2f63 !important;
}

.izin-cuti-page td .muted{
  font-size:11px !important;
  line-height:1.35 !important;
  margin-top:4px !important;
}

.izin-cuti-page .izin-number{
  font-size:14px !important;
  line-height:1.35 !important;
  word-break:break-word !important;
}

.izin-cuti-page .izin-person-name{
  font-size:15px !important;
  line-height:1.35 !important;
}

.izin-cuti-page .badge{
  font-size:11px !important;
  padding:7px 10px !important;
  border-radius:999px !important;
  white-space:nowrap !important;
}

.izin-cuti-page .btn.secondary{
  padding:9px 13px !important;
  font-size:12px !important;
  border-radius:12px !important;
}

@media(max-width:900px){
  .izin-cuti-page .afisgo-hero-card{
    flex-direction:column !important;
    align-items:flex-start !important;
  }
  .izin-cuti-page .izin-summary-grid{
    grid-template-columns:repeat(2,1fr) !important;
  }
}

@media(max-width:560px){
  .izin-cuti-page .izin-summary-grid{
    grid-template-columns:1fr !important;
  }
}


/* AFISGO IZIN CUTI GRID EMERGENCY FIX */
.izin-cuti-page .izin-summary-grid{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(160px,1fr)) !important;
  gap:16px !important;
  margin:18px 0 22px !important;
}
.izin-cuti-page .izin-summary-grid .card{
  width:auto !important;
  min-height:110px !important;
}
@media(max-width:900px){
  .izin-cuti-page .izin-summary-grid{
    grid-template-columns:repeat(2,1fr) !important;
  }
}
@media(max-width:560px){
  .izin-cuti-page .izin-summary-grid{
    grid-template-columns:1fr !important;
  }
}

/* AFISGO PRESENSI - CLONE UI SISFO IZIN FINAL */
.sisfo-izin-page{
  padding-top: 8px !important;
}

.sisfo-izin-header{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:18px !important;
  margin-bottom:22px !important;
}

.sisfo-izin-header h2{
  margin:0 !important;
  font-size:28px !important;
  line-height:1.2 !important;
  font-weight:900 !important;
  color:#0f172a !important;
}

.sisfo-izin-header p{
  margin:6px 0 0 !important;
  font-size:14px !important;
  color:#64748b !important;
  font-weight:600 !important;
}

.sisfo-izin-header-actions{
  display:flex !important;
  gap:10px !important;
  flex-wrap:wrap !important;
}

.sisfo-btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:40px !important;
  padding:10px 16px !important;
  border-radius:10px !important;
  font-size:14px !important;
  font-weight:800 !important;
  text-decoration:none !important;
  border:0 !important;
}

.sisfo-btn-primary{
  background:#047857 !important;
  color:#fff !important;
}

.sisfo-btn-primary:hover{
  background:#065f46 !important;
}

.sisfo-btn-secondary{
  background:#475569 !important;
  color:#fff !important;
}

.sisfo-btn-dark{
  background:#1e293b !important;
  color:#fff !important;
}

.sisfo-table-card,
.sisfo-filter-card,
.sisfo-summary-card{
  background:#fff !important;
  border:1px solid #dbe3ea !important;
  border-radius:18px !important;
  box-shadow:0 12px 30px rgba(15,23,42,.055) !important;
}

.sisfo-table-card{
  overflow:hidden !important;
  margin-bottom:20px !important;
}

.sisfo-table-scroll{
  width:100% !important;
  overflow-x:auto !important;
}

.sisfo-izin-table{
  width:100% !important;
  border-collapse:separate !important;
  border-spacing:0 !important;
  table-layout:auto !important;
  box-shadow:none !important;
  border-radius:0 !important;
  margin:0 !important;
  font-size:14px !important;
}

.sisfo-izin-table th{
  background:#f8fafc !important;
  color:#475569 !important;
  font-size:12px !important;
  font-weight:900 !important;
  text-transform:uppercase !important;
  letter-spacing:.04em !important;
  padding:13px 16px !important;
  border-bottom:1px solid #e2e8f0 !important;
  white-space:nowrap !important;
}

.sisfo-izin-table td{
  background:#fff !important;
  color:#0f172a !important;
  font-size:14px !important;
  padding:14px 16px !important;
  border-bottom:1px solid #e2e8f0 !important;
  vertical-align:middle !important;
}

.sisfo-izin-table tr:hover td{
  background:#f8fafc !important;
}

.sisfo-request-number,
.sisfo-person{
  font-size:14px !important;
  line-height:1.35 !important;
  font-weight:800 !important;
  color:#0f172a !important;
}

.sisfo-muted{
  margin-top:4px !important;
  font-size:12px !important;
  color:#64748b !important;
  font-weight:600 !important;
}

.sisfo-empty{
  padding:40px 16px !important;
  text-align:center !important;
  color:#64748b !important;
  font-weight:700 !important;
}

.sisfo-badge{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:6px 12px !important;
  border-radius:999px !important;
  font-size:12px !important;
  font-weight:900 !important;
  white-space:nowrap !important;
}

.sisfo-badge-blue{
  background:#dbeafe !important;
  color:#1d4ed8 !important;
}

.sisfo-badge-green{
  background:#dcfce7 !important;
  color:#15803d !important;
}

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

.sisfo-badge-amber{
  background:#fef3c7 !important;
  color:#b45309 !important;
}

.sisfo-badge-neutral{
  background:#e2e8f0 !important;
  color:#334155 !important;
}

.sisfo-detail-link{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:30px !important;
  padding:5px 10px !important;
  border-radius:9px !important;
  background:#ecfdf5 !important;
  color:#047857 !important;
  font-size:13px !important;
  font-weight:900 !important;
  text-decoration:none !important;
}

.sisfo-detail-link:hover{
  background:#d1fae5 !important;
  color:#065f46 !important;
}

.sisfo-summary-grid{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(150px,1fr)) !important;
  gap:16px !important;
  margin-bottom:20px !important;
}

.sisfo-summary-card{
  padding:20px !important;
}

.sisfo-summary-card div{
  font-size:14px !important;
  color:#64748b !important;
  font-weight:700 !important;
}

.sisfo-summary-card strong{
  display:block !important;
  margin-top:6px !important;
  font-size:32px !important;
  line-height:1 !important;
  font-weight:950 !important;
  color:#0f172a !important;
}

.sisfo-summary-card strong.blue{
  color:#1d4ed8 !important;
}

.sisfo-summary-card strong.green{
  color:#047857 !important;
}

.sisfo-summary-card strong.red{
  color:#b91c1c !important;
}

.sisfo-filter-card{
  padding:20px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:14px !important;
  margin-bottom:28px !important;
}

.sisfo-filter-note{
  font-size:14px !important;
  color:#64748b !important;
  font-weight:700 !important;
}

.text-right{
  text-align:right !important;
}

@media(max-width:900px){
  .sisfo-izin-header,
  .sisfo-filter-card{
    flex-direction:column !important;
    align-items:flex-start !important;
  }

  .sisfo-summary-grid{
    grid-template-columns:repeat(2,minmax(150px,1fr)) !important;
  }
}

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

  .sisfo-izin-header h2{
    font-size:24px !important;
  }
}

/* =========================================================
   AFISGO EMPLOYEE MOBILE POLISH FINAL V1
   Fokus: HP Guru/Pegawai saja, tidak ganggu admin/approver
   ========================================================= */

@media (max-width:900px){

  body:has(.employee-mobile-dashboard),
  body:has(.employee-page){
    background:#eef5ff !important;
    overflow-x:hidden !important;
  }

  body:has(.employee-mobile-dashboard) main,
  body:has(.employee-page) main{
    margin-left:0 !important;
    padding:8px 10px 24px !important;
    max-width:100% !important;
    overflow-x:hidden !important;
  }

  body:has(.employee-mobile-dashboard) aside.employee-mobile-aside,
  body:has(.employee-page) aside.employee-mobile-aside{
    margin:10px 10px 8px !important;
    padding:10px !important;
    border-radius:24px !important;
  }

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

  body:has(.employee-mobile-dashboard) aside.employee-mobile-aside .brand.employee-brand-welcome,
  body:has(.employee-page) aside.employee-mobile-aside .brand.employee-brand-welcome{
    min-height:74px !important;
    padding:12px 13px !important;
    border-radius:21px !important;
  }

  body:has(.employee-mobile-dashboard) .employee-brand-user,
  body:has(.employee-page) .employee-brand-user{
    font-size:17px !important;
    line-height:1.14 !important;
    max-width:100% !important;
    white-space:normal !important;
    word-break:break-word !important;
  }

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

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

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

  body:has(.employee-mobile-dashboard) .employee-mobile-dropdown-menu,
  body:has(.employee-page) .employee-mobile-dropdown-menu{
    top:50px !important;
    right:0 !important;
    width:220px !important;
    z-index:99999 !important;
  }

  body:has(.employee-mobile-dashboard) .employee-mobile-dashboard,
  body:has(.employee-page) .employee-page{
    width:100% !important;
    max-width:560px !important;
    margin:0 auto !important;
  }

  body:has(.employee-mobile-dashboard) .employee-today-card,
  body:has(.employee-mobile-dashboard) .employee-history-card,
  body:has(.employee-page) .employee-panel{
    border-radius:22px !important;
    padding:14px !important;
    box-shadow:0 12px 30px rgba(15,23,42,.075) !important;
  }

  body:has(.employee-mobile-dashboard) .employee-section-head{
    gap:10px !important;
    align-items:flex-start !important;
  }

  body:has(.employee-mobile-dashboard) .employee-section-head span{
    font-size:11px !important;
    letter-spacing:.12em !important;
  }

  body:has(.employee-mobile-dashboard) .employee-section-head strong{
    font-size:16px !important;
    line-height:1.2 !important;
  }

  body:has(.employee-mobile-dashboard) .employee-today-card .employee-status-pill{
    font-size:11px !important;
    padding:7px 10px !important;
    border-radius:999px !important;
    white-space:nowrap !important;
  }

  body:has(.employee-mobile-dashboard) .employee-time-grid{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:10px !important;
    margin-top:12px !important;
  }

  body:has(.employee-mobile-dashboard) .employee-time-box{
    min-height:76px !important;
    padding:11px 10px !important;
    border-radius:16px !important;
  }

  body:has(.employee-mobile-dashboard) .employee-time-box small{
    font-size:11px !important;
    margin-bottom:8px !important;
  }

  body:has(.employee-mobile-dashboard) .employee-time-box strong{
    font-size:19px !important;
  }

  body:has(.employee-mobile-dashboard) .employee-metric-row{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:10px !important;
    margin-top:10px !important;
  }

  body:has(.employee-mobile-dashboard) .employee-metric-row > div{
    min-height:68px !important;
    padding:11px 9px !important;
    border-radius:16px !important;
  }

  body:has(.employee-mobile-dashboard) .employee-metric-row > div:nth-child(3){
    grid-column:1 / -1 !important;
  }

  body:has(.employee-mobile-dashboard) .employee-metric-row > div small{
    font-size:10.5px !important;
    margin-bottom:7px !important;
  }

  body:has(.employee-mobile-dashboard) .employee-metric-row > div strong{
    font-size:13px !important;
    line-height:1.25 !important;
  }

  body:has(.employee-mobile-dashboard) .employee-history-card .employee-history-mini-grid{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:7px !important;
  }

  body:has(.employee-mobile-dashboard) .employee-history-card .employee-history-mini-box{
    min-height:62px !important;
    padding:8px 5px !important;
    border-radius:13px !important;
  }

  body:has(.employee-mobile-dashboard) .employee-history-card .employee-history-mini-box small{
    font-size:9.5px !important;
  }

  body:has(.employee-mobile-dashboard) .employee-history-card .employee-history-mini-box strong{
    font-size:10px !important;
  }

  body:has(.employee-page) .employee-page > .employee-hero{
    display:none !important;
  }

  body:has(.employee-page) .employee-filter{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
    margin:0 !important;
  }

  body:has(.employee-page) .employee-filter label{
    font-size:12px !important;
    font-weight:850 !important;
  }

  body:has(.employee-page) .employee-filter input,
  body:has(.employee-page) .employee-filter button{
    width:100% !important;
    min-height:44px !important;
    border-radius:14px !important;
  }

  body:has(.employee-page) .employee-back-dashboard-wrap{
    margin:12px 0 !important;
  }

  body:has(.employee-page) .employee-back-dashboard-btn{
    width:100% !important;
    justify-content:center !important;
    min-height:46px !important;
    border-radius:16px !important;
  }

  body:has(.employee-page) .employee-panel h3{
    font-size:16px !important;
    margin:0 0 12px !important;
  }

  body:has(.employee-page) .table-wrap{
    width:100% !important;
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch !important;
    border-radius:16px !important;
  }

  body:has(.employee-page) .table-wrap table{
    min-width:760px !important;
    font-size:12px !important;
  }

  body:has(.employee-page) .table-wrap th,
  body:has(.employee-page) .table-wrap td{
    padding:10px 9px !important;
    white-space:nowrap !important;
  }
}

@media (max-width:380px){
  body:has(.employee-mobile-dashboard) .employee-brand-user,
  body:has(.employee-page) .employee-brand-user{
    font-size:15.5px !important;
  }

  body:has(.employee-mobile-dashboard) .employee-time-box strong{
    font-size:17px !important;
  }

  body:has(.employee-mobile-dashboard) .employee-metric-row > div strong{
    font-size:12px !important;
  }
}


/* =========================================================
   AFISGO EMPLOYEE LEAVE ACTION BUTTON V1
   Tombol Ajukan Izin/Cuti di dashboard Guru/Pegawai
   ========================================================= */

.employee-action-card{
  margin:16px 0 18px;
}

.employee-leave-action-btn{
  display:flex;
  align-items:center;
  gap:14px;
  width:100%;
  text-decoration:none;
  border-radius:24px;
  padding:16px 16px;
  background:
    radial-gradient(circle at 92% 12%, rgba(255,255,255,.22), transparent 30%),
    linear-gradient(135deg,#0f4aa1 0%, #1769d2 55%, #073b7a 100%);
  color:#fff;
  box-shadow:0 16px 34px rgba(15,74,161,.23);
  border:1px solid rgba(255,255,255,.18);
}

.employee-leave-action-icon{
  width:46px;
  height:46px;
  min-width:46px;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.94);
  color:#0f766e;
  font-weight:950;
  box-shadow:0 10px 22px rgba(0,0,0,.14);
}

.employee-leave-action-text{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
  flex:1;
}

.employee-leave-action-text strong{
  display:block;
  color:#fff;
  font-size:16px;
  line-height:1.15;
  font-weight:950;
  letter-spacing:-.2px;
}

.employee-leave-action-text small{
  display:block;
  color:rgba(239,246,255,.90);
  font-size:12px;
  line-height:1.35;
  font-weight:750;
}

.employee-leave-action-arrow{
  width:30px;
  height:30px;
  min-width:30px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.16);
  color:#fff;
  font-size:28px;
  font-weight:700;
  line-height:1;
}

@media (max-width:900px){
  body:has(.employee-mobile-dashboard) .employee-action-card{
    margin:12px 0 16px !important;
  }

  body:has(.employee-mobile-dashboard) .employee-leave-action-btn{
    border-radius:22px !important;
    padding:14px 14px !important;
    gap:12px !important;
  }

  body:has(.employee-mobile-dashboard) .employee-leave-action-icon{
    width:42px !important;
    height:42px !important;
    min-width:42px !important;
    border-radius:16px !important;
  }

  body:has(.employee-mobile-dashboard) .employee-leave-action-text strong{
    font-size:15px !important;
  }

  body:has(.employee-mobile-dashboard) .employee-leave-action-text small{
    font-size:11px !important;
  }

  body:has(.employee-mobile-dashboard) .employee-leave-action-arrow{
    width:28px !important;
    height:28px !important;
    min-width:28px !important;
    font-size:25px !important;
  }
}

@media (max-width:380px){
  body:has(.employee-mobile-dashboard) .employee-leave-action-btn{
    padding:13px 12px !important;
    gap:10px !important;
  }

  body:has(.employee-mobile-dashboard) .employee-leave-action-text strong{
    font-size:14px !important;
  }

  body:has(.employee-mobile-dashboard) .employee-leave-action-text small{
    font-size:10.5px !important;
  }
}


/* =========================================================
   AFISGO EMPLOYEE LEAVE BUTTON COMPACT V2
   Kecilkan tombol Ajukan Izin/Cuti di dashboard guru/pegawai HP
   ========================================================= */
@media (max-width:900px){
  body:has(.employee-mobile-dashboard) .employee-action-card{
    width:100% !important;
    max-width:560px !important;
    margin:8px auto 12px !important;
    padding:0 !important;
  }

  body:has(.employee-mobile-dashboard) .employee-leave-action-btn,
  body:has(.employee-mobile-dashboard) .employee-action-main{
    min-height:58px !important;
    padding:10px 13px !important;
    border-radius:18px !important;
    gap:10px !important;
    box-shadow:0 10px 22px rgba(18,61,122,.16) !important;
  }

  body:has(.employee-mobile-dashboard) .employee-action-icon,
  body:has(.employee-mobile-dashboard) .employee-leave-action-btn > span:first-child{
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
    border-radius:14px !important;
    font-size:15px !important;
  }

  body:has(.employee-mobile-dashboard) .employee-action-text strong,
  body:has(.employee-mobile-dashboard) .employee-leave-action-btn strong{
    font-size:13.5px !important;
    line-height:1.12 !important;
    font-weight:950 !important;
  }

  body:has(.employee-mobile-dashboard) .employee-action-text small,
  body:has(.employee-mobile-dashboard) .employee-leave-action-btn small{
    font-size:10px !important;
    line-height:1.2 !important;
    font-weight:750 !important;
  }

  body:has(.employee-mobile-dashboard) .employee-leave-action-btn::after,
  body:has(.employee-mobile-dashboard) .employee-action-main::after{
    width:28px !important;
    height:28px !important;
    min-width:28px !important;
    border-radius:999px !important;
    font-size:13px !important;
  }
}

@media (max-width:390px){
  body:has(.employee-mobile-dashboard) .employee-leave-action-btn,
  body:has(.employee-mobile-dashboard) .employee-action-main{
    min-height:54px !important;
    padding:9px 12px !important;
    border-radius:17px !important;
  }

  body:has(.employee-mobile-dashboard) .employee-action-icon,
  body:has(.employee-mobile-dashboard) .employee-leave-action-btn > span:first-child{
    width:36px !important;
    height:36px !important;
    min-width:36px !important;
  }

  body:has(.employee-mobile-dashboard) .employee-action-text strong,
  body:has(.employee-mobile-dashboard) .employee-leave-action-btn strong{
    font-size:13px !important;
  }

  body:has(.employee-mobile-dashboard) .employee-action-text small,
  body:has(.employee-mobile-dashboard) .employee-leave-action-btn small{
    font-size:9.5px !important;
  }
}

/* =========================================================
   AFISGO EMPLOYEE LEAVE CARD LOCK FINAL V3
   Lock tampilan compact seperti screenshot user
   ========================================================= */
@media (max-width:900px){

  body:has(.employee-mobile-dashboard) .employee-action-card{
    width:100% !important;
    max-width:360px !important;
    margin:12px auto 16px !important;
    padding:0 !important;
    background:transparent !important;
    border:none !important;
    box-shadow:none !important;
  }

  body:has(.employee-mobile-dashboard) .employee-leave-action-btn,
  body:has(.employee-mobile-dashboard) .employee-action-main{
    min-height:60px !important;
    padding:10px 14px !important;
    border-radius:18px !important;
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
    background:linear-gradient(135deg,#0f8d67 0%, #256fda 58%, #365f9f 100%) !important;
    box-shadow:0 10px 22px rgba(30,76,155,.20) !important;
    overflow:hidden !important;
    position:relative !important;
  }

  body:has(.employee-mobile-dashboard) .employee-leave-action-btn::before,
  body:has(.employee-mobile-dashboard) .employee-action-main::before{
    content:"" !important;
    position:absolute !important;
    inset:0 !important;
    background:linear-gradient(90deg,rgba(255,255,255,.08),rgba(255,255,255,0) 30%,rgba(255,255,255,.10) 100%) !important;
    pointer-events:none !important;
  }

  body:has(.employee-mobile-dashboard) .employee-action-icon,
  body:has(.employee-mobile-dashboard) .employee-leave-action-btn > span:first-child{
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
    border-radius:14px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    background:rgba(255,255,255,.92) !important;
    color:#106a5d !important;
    font-size:16px !important;
    box-shadow:0 4px 10px rgba(0,0,0,.10) !important;
    position:relative !important;
    z-index:2 !important;
  }

  body:has(.employee-mobile-dashboard) .employee-action-text{
    flex:1 1 auto !important;
    min-width:0 !important;
    position:relative !important;
    z-index:2 !important;
  }

  body:has(.employee-mobile-dashboard) .employee-action-text strong,
  body:has(.employee-mobile-dashboard) .employee-leave-action-btn strong{
    display:block !important;
    font-size:13.5px !important;
    line-height:1.15 !important;
    font-weight:900 !important;
    color:#ffffff !important;
    margin:0 0 2px !important;
  }

  body:has(.employee-mobile-dashboard) .employee-action-text small,
  body:has(.employee-mobile-dashboard) .employee-leave-action-btn small{
    display:block !important;
    font-size:10px !important;
    line-height:1.2 !important;
    font-weight:700 !important;
    color:rgba(255,255,255,.92) !important;
    margin:0 !important;
  }

  body:has(.employee-mobile-dashboard) .employee-leave-action-btn::after,
  body:has(.employee-mobile-dashboard) .employee-action-main::after{
    content:"›" !important;
    width:28px !important;
    height:28px !important;
    min-width:28px !important;
    border-radius:999px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    background:rgba(255,255,255,.18) !important;
    color:#fff !important;
    font-size:20px !important;
    font-weight:900 !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.18) !important;
    position:relative !important;
    z-index:2 !important;
  }

  body:has(.employee-mobile-dashboard) .employee-leave-action-btn:hover,
  body:has(.employee-mobile-dashboard) .employee-action-main:hover{
    transform:translateY(-1px) !important;
    box-shadow:0 14px 28px rgba(30,76,155,.24) !important;
  }

  body:has(.employee-mobile-dashboard) .employee-leave-action-btn:active,
  body:has(.employee-mobile-dashboard) .employee-action-main:active{
    transform:scale(.985) !important;
  }
}

@media (max-width:390px){
  body:has(.employee-mobile-dashboard) .employee-action-card{
    max-width:340px !important;
  }

  body:has(.employee-mobile-dashboard) .employee-leave-action-btn,
  body:has(.employee-mobile-dashboard) .employee-action-main{
    min-height:56px !important;
    padding:9px 12px !important;
    border-radius:17px !important;
  }

  body:has(.employee-mobile-dashboard) .employee-action-icon,
  body:has(.employee-mobile-dashboard) .employee-leave-action-btn > span:first-child{
    width:36px !important;
    height:36px !important;
    min-width:36px !important;
  }

  body:has(.employee-mobile-dashboard) .employee-action-text strong,
  body:has(.employee-mobile-dashboard) .employee-leave-action-btn strong{
    font-size:13px !important;
  }

  body:has(.employee-mobile-dashboard) .employee-action-text small,
  body:has(.employee-mobile-dashboard) .employee-leave-action-btn small{
    font-size:9.4px !important;
  }
}

/* =========================================================
   AFISGO EMPLOYEE LEAVE CARD CLEAN FINAL V4
   Fix panah dobel + hapus teks kecil + rapikan compact button
   ========================================================= */
@media (max-width:900px){

  body:has(.employee-mobile-dashboard) .employee-action-card{
    width:100% !important;
    max-width:360px !important;
    margin:12px auto 16px !important;
    padding:0 !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
  }

  body:has(.employee-mobile-dashboard) .employee-leave-action-btn,
  body:has(.employee-mobile-dashboard) .employee-action-main{
    width:100% !important;
    min-height:58px !important;
    padding:10px 13px !important;
    border-radius:18px !important;
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
    text-decoration:none !important;
    background:linear-gradient(135deg,#0f8f72 0%,#1e73d8 62%,#4169aa 100%) !important;
    box-shadow:0 12px 24px rgba(30,76,155,.20) !important;
    position:relative !important;
    overflow:hidden !important;
  }

  body:has(.employee-mobile-dashboard) .employee-leave-action-btn::before,
  body:has(.employee-mobile-dashboard) .employee-action-main::before{
    content:"" !important;
    position:absolute !important;
    inset:0 !important;
    background:
      radial-gradient(circle at 92% 10%, rgba(255,255,255,.14), transparent 30%),
      linear-gradient(90deg, rgba(255,255,255,.08), transparent 38%) !important;
    pointer-events:none !important;
  }

  body:has(.employee-mobile-dashboard) .employee-action-icon,
  body:has(.employee-mobile-dashboard) .employee-leave-action-btn > span:first-child{
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
    border-radius:14px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    background:rgba(255,255,255,.94) !important;
    color:#0f766e !important;
    font-size:16px !important;
    font-weight:950 !important;
    box-shadow:0 5px 12px rgba(0,0,0,.10) !important;
    position:relative !important;
    z-index:2 !important;
  }

  body:has(.employee-mobile-dashboard) .employee-action-text{
    flex:1 1 auto !important;
    min-width:0 !important;
    display:flex !important;
    align-items:center !important;
    position:relative !important;
    z-index:2 !important;
  }

  body:has(.employee-mobile-dashboard) .employee-action-text strong,
  body:has(.employee-mobile-dashboard) .employee-leave-action-btn strong{
    display:block !important;
    margin:0 !important;
    font-size:14px !important;
    line-height:1.1 !important;
    font-weight:950 !important;
    color:#ffffff !important;
    white-space:nowrap !important;
  }

  /* HAPUS TEKS KECIL */
  body:has(.employee-mobile-dashboard) .employee-action-text small,
  body:has(.employee-mobile-dashboard) .employee-leave-action-btn small{
    display:none !important;
  }

  /* HAPUS PANAH / CIRCLE TAMBAHAN DARI HTML/CSS LAMA */
  body:has(.employee-mobile-dashboard) .employee-leave-action-btn > span:not(:first-child):not(.employee-action-text),
  body:has(.employee-mobile-dashboard) .employee-action-main > span:not(:first-child):not(.employee-action-text),
  body:has(.employee-mobile-dashboard) .employee-leave-action-btn .employee-action-arrow,
  body:has(.employee-mobile-dashboard) .employee-action-main .employee-action-arrow{
    display:none !important;
  }

  /* BUAT 1 PANAH SAJA */
  body:has(.employee-mobile-dashboard) .employee-leave-action-btn::after,
  body:has(.employee-mobile-dashboard) .employee-action-main::after{
    content:"›" !important;
    width:30px !important;
    height:30px !important;
    min-width:30px !important;
    border-radius:999px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    background:rgba(255,255,255,.18) !important;
    color:#ffffff !important;
    font-size:22px !important;
    line-height:1 !important;
    font-weight:950 !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.18) !important;
    position:relative !important;
    z-index:2 !important;
  }

  body:has(.employee-mobile-dashboard) .employee-leave-action-btn:active,
  body:has(.employee-mobile-dashboard) .employee-action-main:active{
    transform:scale(.985) !important;
  }
}

@media (max-width:390px){
  body:has(.employee-mobile-dashboard) .employee-action-card{
    max-width:340px !important;
  }

  body:has(.employee-mobile-dashboard) .employee-leave-action-btn,
  body:has(.employee-mobile-dashboard) .employee-action-main{
    min-height:56px !important;
    padding:9px 12px !important;
  }

  body:has(.employee-mobile-dashboard) .employee-action-text strong,
  body:has(.employee-mobile-dashboard) .employee-leave-action-btn strong{
    font-size:13.5px !important;
  }
}

/* =========================================================
   AFISGO EMPLOYEE LEAVE BUTTON TEXT RESTORE FINAL V5
   Kembalikan teks tombol yang tersembunyi akibat selector sebelumnya
   ========================================================= */
@media (max-width:900px){

  body:has(.employee-mobile-dashboard) .employee-action-card{
    width:100% !important;
    max-width:360px !important;
    margin:12px auto 16px !important;
    padding:0 !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
  }

  body:has(.employee-mobile-dashboard) .employee-leave-action-btn,
  body:has(.employee-mobile-dashboard) .employee-action-main{
    width:100% !important;
    min-height:58px !important;
    padding:10px 13px !important;
    border-radius:18px !important;
    display:flex !important;
    align-items:center !important;
    gap:11px !important;
    text-decoration:none !important;
    background:linear-gradient(135deg,#0f8f72 0%,#1e73d8 62%,#4169aa 100%) !important;
    box-shadow:0 12px 24px rgba(30,76,155,.20) !important;
    position:relative !important;
    overflow:hidden !important;
  }

  /* icon kiri */
  body:has(.employee-mobile-dashboard) .employee-leave-action-btn > span:first-child,
  body:has(.employee-mobile-dashboard) .employee-action-main > span:first-child,
  body:has(.employee-mobile-dashboard) .employee-action-icon{
    display:flex !important;
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
    border-radius:14px !important;
    align-items:center !important;
    justify-content:center !important;
    background:rgba(255,255,255,.94) !important;
    color:#0f766e !important;
    font-size:16px !important;
    font-weight:950 !important;
    box-shadow:0 5px 12px rgba(0,0,0,.10) !important;
    position:relative !important;
    z-index:2 !important;
  }

  /* KUNCI: span/div yang punya strong adalah area teks, jangan disembunyikan */
  body:has(.employee-mobile-dashboard) .employee-leave-action-btn span:has(strong),
  body:has(.employee-mobile-dashboard) .employee-action-main span:has(strong),
  body:has(.employee-mobile-dashboard) .employee-leave-action-btn div:has(strong),
  body:has(.employee-mobile-dashboard) .employee-action-main div:has(strong),
  body:has(.employee-mobile-dashboard) .employee-action-text{
    display:flex !important;
    flex:1 1 auto !important;
    min-width:0 !important;
    align-items:center !important;
    justify-content:flex-start !important;
    position:relative !important;
    z-index:3 !important;
  }

  body:has(.employee-mobile-dashboard) .employee-leave-action-btn strong,
  body:has(.employee-mobile-dashboard) .employee-action-main strong,
  body:has(.employee-mobile-dashboard) .employee-action-text strong{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
    margin:0 !important;
    padding:0 !important;
    color:#ffffff !important;
    font-size:14px !important;
    line-height:1.1 !important;
    font-weight:950 !important;
    white-space:nowrap !important;
    text-align:left !important;
  }

  /* teks kecil tetap dihapus */
  body:has(.employee-mobile-dashboard) .employee-leave-action-btn small,
  body:has(.employee-mobile-dashboard) .employee-action-main small,
  body:has(.employee-mobile-dashboard) .employee-action-text small{
    display:none !important;
  }

  /* sembunyikan hanya span tambahan yang tidak punya strong dan bukan icon pertama */
  body:has(.employee-mobile-dashboard) .employee-leave-action-btn > span:not(:first-child):not(:has(strong)),
  body:has(.employee-mobile-dashboard) .employee-action-main > span:not(:first-child):not(:has(strong)){
    display:none !important;
  }

  /* satu panah kanan saja */
  body:has(.employee-mobile-dashboard) .employee-leave-action-btn::after,
  body:has(.employee-mobile-dashboard) .employee-action-main::after{
    content:"›" !important;
    width:30px !important;
    height:30px !important;
    min-width:30px !important;
    border-radius:999px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    background:rgba(255,255,255,.18) !important;
    color:#ffffff !important;
    font-size:22px !important;
    line-height:1 !important;
    font-weight:950 !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.18) !important;
    position:relative !important;
    z-index:2 !important;
  }
}

@media (max-width:390px){
  body:has(.employee-mobile-dashboard) .employee-action-card{
    max-width:340px !important;
  }

  body:has(.employee-mobile-dashboard) .employee-leave-action-btn,
  body:has(.employee-mobile-dashboard) .employee-action-main{
    min-height:56px !important;
    padding:9px 12px !important;
  }

  body:has(.employee-mobile-dashboard) .employee-leave-action-btn strong,
  body:has(.employee-mobile-dashboard) .employee-action-main strong,
  body:has(.employee-mobile-dashboard) .employee-action-text strong{
    font-size:13.5px !important;
  }
}

/* =========================================================
   AFISGO SAFE LEAVE BUTTON FINAL V6
   Override aman berdasarkan HTML aktif:
   .employee-leave-action-icon
   .employee-leave-action-text
   .employee-leave-action-arrow
   ========================================================= */
@media (max-width:900px){

  body:has(.employee-mobile-dashboard) section.employee-action-card{
    width:100% !important;
    max-width:360px !important;
    margin:12px auto 16px !important;
    padding:0 !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
  }

  body:has(.employee-mobile-dashboard) a.employee-leave-action-btn{
    width:100% !important;
    min-height:58px !important;
    padding:10px 13px !important;
    border-radius:18px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:11px !important;
    text-decoration:none !important;
    background:
      radial-gradient(circle at 92% 10%, rgba(255,255,255,.14), transparent 30%),
      linear-gradient(135deg,#0f8f72 0%,#1e73d8 62%,#4169aa 100%) !important;
    box-shadow:0 12px 24px rgba(30,76,155,.20) !important;
    position:relative !important;
    overflow:hidden !important;
  }

  /* matikan pseudo panah lama supaya tidak dobel */
  body:has(.employee-mobile-dashboard) a.employee-leave-action-btn::before,
  body:has(.employee-mobile-dashboard) a.employee-leave-action-btn::after{
    display:none !important;
    content:none !important;
  }

  body:has(.employee-mobile-dashboard) a.employee-leave-action-btn .employee-leave-action-icon{
    display:flex !important;
    visibility:visible !important;
    opacity:1 !important;
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
    border-radius:14px !important;
    align-items:center !important;
    justify-content:center !important;
    background:rgba(255,255,255,.94) !important;
    color:#0f766e !important;
    font-size:16px !important;
    font-weight:950 !important;
    box-shadow:0 5px 12px rgba(0,0,0,.10) !important;
    position:relative !important;
    z-index:3 !important;
  }

  body:has(.employee-mobile-dashboard) a.employee-leave-action-btn .employee-leave-action-text{
    display:flex !important;
    visibility:visible !important;
    opacity:1 !important;
    flex:1 1 auto !important;
    min-width:0 !important;
    align-items:center !important;
    justify-content:flex-start !important;
    position:relative !important;
    z-index:3 !important;
  }

  body:has(.employee-mobile-dashboard) a.employee-leave-action-btn .employee-leave-action-text strong{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
    margin:0 !important;
    padding:0 !important;
    color:#ffffff !important;
    font-size:14px !important;
    line-height:1.1 !important;
    font-weight:950 !important;
    white-space:nowrap !important;
    text-align:left !important;
  }

  /* subtitle dihapus */
  body:has(.employee-mobile-dashboard) a.employee-leave-action-btn .employee-leave-action-text small{
    display:none !important;
  }

  body:has(.employee-mobile-dashboard) a.employee-leave-action-btn .employee-leave-action-arrow{
    display:flex !important;
    visibility:visible !important;
    opacity:1 !important;
    width:30px !important;
    height:30px !important;
    min-width:30px !important;
    border-radius:999px !important;
    align-items:center !important;
    justify-content:center !important;
    background:rgba(255,255,255,.18) !important;
    color:#ffffff !important;
    font-size:22px !important;
    line-height:1 !important;
    font-weight:950 !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.18) !important;
    position:relative !important;
    z-index:3 !important;
  }

  body:has(.employee-mobile-dashboard) a.employee-leave-action-btn:active{
    transform:scale(.985) !important;
  }
}

@media (max-width:390px){
  body:has(.employee-mobile-dashboard) section.employee-action-card{
    max-width:340px !important;
  }

  body:has(.employee-mobile-dashboard) a.employee-leave-action-btn{
    min-height:56px !important;
    padding:9px 12px !important;
  }

  body:has(.employee-mobile-dashboard) a.employee-leave-action-btn .employee-leave-action-text strong{
    font-size:13.5px !important;
  }
}

/* =========================================================
   AFISGO LEAVE BUTTON SPECIFICITY FIX V7
   Mengalahkan CSS lama yang menyembunyikan span teks/panah
   ========================================================= */
@media (max-width:900px){

  body:has(.employee-mobile-dashboard) section.employee-action-card > a.employee-leave-action-btn{
    width:100% !important;
    max-width:360px !important;
    min-height:58px !important;
    margin:0 auto !important;
    padding:10px 13px !important;
    border-radius:18px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:11px !important;
    text-decoration:none !important;
    background:
      radial-gradient(circle at 92% 10%, rgba(255,255,255,.14), transparent 30%),
      linear-gradient(135deg,#0f8f72 0%,#1e73d8 62%,#4169aa 100%) !important;
    box-shadow:0 12px 24px rgba(30,76,155,.20) !important;
    position:relative !important;
    overflow:hidden !important;
  }

  body:has(.employee-mobile-dashboard) section.employee-action-card{
    width:100% !important;
    max-width:360px !important;
    margin:12px auto 16px !important;
    padding:0 !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
  }

  body:has(.employee-mobile-dashboard) section.employee-action-card > a.employee-leave-action-btn > span.employee-leave-action-icon{
    display:flex !important;
    visibility:visible !important;
    opacity:1 !important;
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
    border-radius:14px !important;
    align-items:center !important;
    justify-content:center !important;
    background:rgba(255,255,255,.94) !important;
    color:#0f766e !important;
    font-size:16px !important;
    font-weight:950 !important;
    box-shadow:0 5px 12px rgba(0,0,0,.10) !important;
    position:relative !important;
    z-index:5 !important;
  }

  /* INI KUNCI: paksa direct child text span muncul, melawan selector lama */
  body:has(.employee-mobile-dashboard) section.employee-action-card > a.employee-leave-action-btn > span.employee-leave-action-text{
    display:flex !important;
    visibility:visible !important;
    opacity:1 !important;
    flex:1 1 auto !important;
    min-width:0 !important;
    align-items:center !important;
    justify-content:flex-start !important;
    position:relative !important;
    z-index:5 !important;
  }

  body:has(.employee-mobile-dashboard) section.employee-action-card > a.employee-leave-action-btn > span.employee-leave-action-text > strong{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
    margin:0 !important;
    padding:0 !important;
    color:#ffffff !important;
    font-size:14px !important;
    line-height:1.1 !important;
    font-weight:950 !important;
    white-space:nowrap !important;
    text-align:left !important;
  }

  body:has(.employee-mobile-dashboard) section.employee-action-card > a.employee-leave-action-btn > span.employee-leave-action-text > small{
    display:none !important;
  }

  /* INI JUGA KUNCI: paksa arrow span asli muncul, bukan pseudo */
  body:has(.employee-mobile-dashboard) section.employee-action-card > a.employee-leave-action-btn > span.employee-leave-action-arrow{
    display:flex !important;
    visibility:visible !important;
    opacity:1 !important;
    width:30px !important;
    height:30px !important;
    min-width:30px !important;
    border-radius:999px !important;
    align-items:center !important;
    justify-content:center !important;
    background:rgba(255,255,255,.18) !important;
    color:#ffffff !important;
    font-size:22px !important;
    line-height:1 !important;
    font-weight:950 !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.18) !important;
    position:relative !important;
    z-index:5 !important;
  }

  body:has(.employee-mobile-dashboard) section.employee-action-card > a.employee-leave-action-btn::before,
  body:has(.employee-mobile-dashboard) section.employee-action-card > a.employee-leave-action-btn::after{
    display:none !important;
    content:none !important;
  }
}

@media (max-width:390px){
  body:has(.employee-mobile-dashboard) section.employee-action-card,
  body:has(.employee-mobile-dashboard) section.employee-action-card > a.employee-leave-action-btn{
    max-width:340px !important;
  }

  body:has(.employee-mobile-dashboard) section.employee-action-card > a.employee-leave-action-btn{
    min-height:56px !important;
    padding:9px 12px !important;
  }

  body:has(.employee-mobile-dashboard) section.employee-action-card > a.employee-leave-action-btn > span.employee-leave-action-text > strong{
    font-size:13.5px !important;
  }
}

/* =========================================================
   AFISGO LEAVE BUTTON SMALLER BLUE BOX V8
   Kecilkan kotak biru Ajukan Izin/Cuti
   ========================================================= */
@media (max-width:900px){

  body:has(.employee-mobile-dashboard) section.employee-action-card{
    width:100% !important;
    max-width:300px !important;
    margin:12px auto 16px !important;
    padding:0 !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
  }

  body:has(.employee-mobile-dashboard) section.employee-action-card > a.employee-leave-action-btn{
    width:100% !important;
    max-width:300px !important;
    min-height:52px !important;
    padding:8px 11px !important;
    border-radius:17px !important;
    gap:9px !important;
    box-shadow:0 10px 20px rgba(30,76,155,.18) !important;
  }

  body:has(.employee-mobile-dashboard) section.employee-action-card > a.employee-leave-action-btn > span.employee-leave-action-icon{
    width:34px !important;
    height:34px !important;
    min-width:34px !important;
    border-radius:13px !important;
    font-size:14px !important;
  }

  body:has(.employee-mobile-dashboard) section.employee-action-card > a.employee-leave-action-btn > span.employee-leave-action-text{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex:1 1 auto !important;
    min-width:0 !important;
  }

  body:has(.employee-mobile-dashboard) section.employee-action-card > a.employee-leave-action-btn > span.employee-leave-action-text > strong{
    display:block !important;
    color:#ffffff !important;
    font-size:13px !important;
    line-height:1.1 !important;
    font-weight:950 !important;
    white-space:nowrap !important;
    text-align:center !important;
  }

  body:has(.employee-mobile-dashboard) section.employee-action-card > a.employee-leave-action-btn > span.employee-leave-action-text > small{
    display:none !important;
  }

  body:has(.employee-mobile-dashboard) section.employee-action-card > a.employee-leave-action-btn > span.employee-leave-action-arrow{
    width:26px !important;
    height:26px !important;
    min-width:26px !important;
    font-size:19px !important;
  }
}

@media (max-width:390px){
  body:has(.employee-mobile-dashboard) section.employee-action-card{
    max-width:286px !important;
  }

  body:has(.employee-mobile-dashboard) section.employee-action-card > a.employee-leave-action-btn{
    max-width:286px !important;
    min-height:50px !important;
    padding:8px 10px !important;
  }

  body:has(.employee-mobile-dashboard) section.employee-action-card > a.employee-leave-action-btn > span.employee-leave-action-text > strong{
    font-size:12.5px !important;
  }
}

/* AFISGO_PRESENSI_EMPLOYEE_EXACT_IZIN_SIDEBAR_V1 */
/* Sidebar Dashboard Presensi guru/pegawai disamakan dengan sidebar Izin & Cuti. */
@media (min-width: 901px) {
  html body.af-presensi-shell aside.employee-mobile-aside.af-sidebar,
  html body aside.employee-mobile-aside.af-sidebar {
    width: 250px !important;
    min-width: 250px !important;
    max-width: 250px !important;
    background:
      radial-gradient(circle at 70% 8%, rgba(255,255,255,.14), transparent 0 110px),
      linear-gradient(180deg, #123d7a 0%, #0b2550 100%) !important;
    padding: 22px 16px !important;
    border-right: 0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  html body.af-presensi-shell main.af-main,
  html body main.af-main {
    margin-left: 250px !important;
  }

  html body aside.employee-mobile-aside.af-sidebar .af-brand {
    min-height: 58px !important;
    padding: 12px 14px !important;
    margin: 0 0 24px 0 !important;
    border-radius: 18px !important;
    background: rgba(255,255,255,.14) !important;
    border: 1px solid rgba(255,255,255,.22) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.15) !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
  }

  html body aside.employee-mobile-aside.af-sidebar .af-brand-mark {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    border-radius: 999px !important;
    background: #dcfce7 !important;
    color: transparent !important;
    position: relative !important;
    box-shadow: 0 8px 20px rgba(15,23,42,.18) !important;
  }

  html body aside.employee-mobile-aside.af-sidebar .af-brand-mark::after {
    content: "★" !important;
    color: #14532d !important;
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 16px !important;
    font-weight: 900 !important;
  }

  html body aside.employee-mobile-aside.af-sidebar .af-brand-title {
    color: #ffffff !important;
    font-size: 18px !important;
    line-height: 1.1 !important;
    font-weight: 900 !important;
    letter-spacing: -.03em !important;
    white-space: nowrap !important;
  }

  html body aside.employee-mobile-aside.af-sidebar .af-brand-subtitle {
    display: none !important;
  }

  html body aside.employee-mobile-aside.af-sidebar .af-nav-section {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body aside.employee-mobile-aside.af-sidebar .af-nav-link {
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 14px !important;
    margin: 8px 0 !important;
    border-radius: 13px !important;
    background: rgba(255,255,255,.075) !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    color: rgba(255,255,255,.95) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    font-size: 15px !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    box-shadow: none !important;
  }

  html body aside.employee-mobile-aside.af-sidebar .af-nav-icon {
    display: none !important;
  }

  html body aside.employee-mobile-aside.af-sidebar .af-nav-link span:last-child {
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 850 !important;
  }

  html body aside.employee-mobile-aside.af-sidebar .af-nav-link:hover {
    background: rgba(255,255,255,.13) !important;
    color: #ffffff !important;
    transform: none !important;
  }

  html body aside.employee-mobile-aside.af-sidebar .af-nav-link.active {
    background: rgba(34,197,94,.22) !important;
    border-color: rgba(74,222,128,.45) !important;
    box-shadow: inset 4px 0 0 #22c55e !important;
    color: #ffffff !important;
  }

  html body aside.employee-mobile-aside.af-sidebar .af-dashboard-version {
    margin-top: 26px !important;
    text-align: center !important;
    color: rgba(255,255,255,.48) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
  }
}


/* AFISGO_PC_TODAY_CARD_ONLY_SAFE_V1 */
/* PC/Laptop guru: hanya rapikan kartu Presensi Hari Ini. Riwayat Singkat tidak disentuh. */
@media (min-width: 901px) {
  body.af-presensi-shell main.af-main .employee-mobile-dashboard > .employee-today-card {
    display: grid !important;
    grid-template-columns: 190px 1fr 1.25fr !important;
    gap: 12px !important;
    align-items: stretch !important;
    padding: 16px 18px !important;
    min-height: 0 !important;
    height: auto !important;
    border-radius: 22px !important;
  }

  body.af-presensi-shell main.af-main .employee-mobile-dashboard > .employee-today-card > .employee-section-head {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
  }

  body.af-presensi-shell main.af-main .employee-mobile-dashboard > .employee-today-card > .employee-section-head > div {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
    width: auto !important;
  }

  body.af-presensi-shell main.af-main .employee-mobile-dashboard > .employee-today-card > .employee-section-head span {
    font-size: 11px !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    letter-spacing: .01em !important;
  }

  body.af-presensi-shell main.af-main .employee-mobile-dashboard > .employee-today-card > .employee-section-head strong {
    font-size: 20px !important;
    line-height: 1 !important;
  }

  body.af-presensi-shell main.af-main .employee-mobile-dashboard > .employee-today-card .employee-status-pill {
    width: auto !important;
    min-width: 0 !important;
    min-height: 26px !important;
    height: 26px !important;
    padding: 5px 12px !important;
    margin: 0 !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  body.af-presensi-shell main.af-main .employee-mobile-dashboard > .employee-today-card > .employee-time-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin: 0 !important;
    width: 100% !important;
  }

  body.af-presensi-shell main.af-main .employee-mobile-dashboard > .employee-today-card > .employee-time-grid > .employee-time-box {
    min-height: 72px !important;
    padding: 12px 14px !important;
    border-radius: 16px !important;
  }

  body.af-presensi-shell main.af-main .employee-mobile-dashboard > .employee-today-card > .employee-time-grid small {
    font-size: 10px !important;
    margin-bottom: 7px !important;
  }

  body.af-presensi-shell main.af-main .employee-mobile-dashboard > .employee-today-card > .employee-time-grid strong {
    font-size: 21px !important;
    line-height: 1 !important;
  }

  body.af-presensi-shell main.af-main .employee-mobile-dashboard > .employee-today-card > .employee-metric-row {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin: 0 !important;
    width: 100% !important;
  }

  body.af-presensi-shell main.af-main .employee-mobile-dashboard > .employee-today-card > .employee-metric-row > div,
  body.af-presensi-shell main.af-main .employee-mobile-dashboard > .employee-today-card > .employee-metric-row > div:nth-child(1),
  body.af-presensi-shell main.af-main .employee-mobile-dashboard > .employee-today-card > .employee-metric-row > div:nth-child(2),
  body.af-presensi-shell main.af-main .employee-mobile-dashboard > .employee-today-card > .employee-metric-row > div:nth-child(3) {
    min-height: 72px !important;
    padding: 12px 14px !important;
    border-radius: 16px !important;
    grid-column: auto !important;
    width: auto !important;
  }

  body.af-presensi-shell main.af-main .employee-mobile-dashboard > .employee-today-card > .employee-metric-row small {
    font-size: 10px !important;
    margin-bottom: 7px !important;
  }

  body.af-presensi-shell main.af-main .employee-mobile-dashboard > .employee-today-card > .employee-metric-row strong {
    font-size: 15px !important;
    line-height: 1.1 !important;
  }
}

/* AFISGO_PC_TODAY_CARD_FINAL_V1 */
/* Aman: card baru hanya tampil di PC. Card lama tetap untuk HP. */
.employee-pc-today-final {
  display: none;
}

@media (min-width: 901px) {
  body.af-presensi-shell .employee-mobile-dashboard > .employee-today-card {
    display: none !important;
  }

  body.af-presensi-shell .employee-mobile-dashboard > .employee-pc-today-final {
    display: grid !important;
    grid-template-columns: 180px repeat(5, minmax(110px, 1fr));
    gap: 10px;
    align-items: stretch;
    width: 100%;
    max-width: 980px;
    margin: 0 auto 14px;
    padding: 16px;
    border-radius: 24px;
    background: #ffffff;
    border: 1px solid rgba(203,213,225,.75);
    box-shadow: 0 22px 45px rgba(15,23,42,.08);
  }

  body.af-presensi-shell .employee-pc-today-main,
  body.af-presensi-shell .employee-pc-today-item {
    min-height: 76px;
    border-radius: 18px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  body.af-presensi-shell .employee-pc-today-main {
    background: transparent;
  }

  body.af-presensi-shell .employee-pc-today-item {
    background: linear-gradient(135deg, #eff6ff, #ecfdf5);
    border: 1px solid #bfdbfe;
  }

  body.af-presensi-shell .employee-pc-today-main small,
  body.af-presensi-shell .employee-pc-today-item small {
    display: block;
    color: #64748b;
    font-size: 11px;
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: 8px;
  }

  body.af-presensi-shell .employee-pc-today-main strong {
    color: #0f172a;
    font-size: 20px;
    font-weight: 950;
    line-height: 1;
  }

  body.af-presensi-shell .employee-pc-today-item strong {
    color: #0f172a;
    font-size: 17px;
    font-weight: 950;
    line-height: 1.1;
  }

  body.af-presensi-shell .employee-pc-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    margin-top: 10px;
    padding: 7px 13px;
    border-radius: 999px;
    background: #e0f2fe;
    color: #075985;
    font-size: 11px;
    font-weight: 950;
    line-height: 1;
  }
}

@media (max-width: 900px) {
  .employee-pc-today-final {
    display: none !important;
  }
}


/* AFISGO_PREMIUM_EMPLOYEE_PC_DASHBOARD_V1 */
.afisgo-premium-employee-dashboard {
  display: none;
}

@media (min-width: 901px) {
  body.af-presensi-shell main.af-main {
    background: linear-gradient(135deg, #f8fafc 0%, #eef7ff 52%, #f1fdf7 100%) !important;
  }

  body.af-presensi-shell main.af-main .employee-mobile-dashboard {
    max-width: 1360px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 20px 28px 60px !important;
  }

  body.af-presensi-shell main.af-main .employee-mobile-dashboard > :not(.afisgo-premium-employee-dashboard) {
    display: none !important;
  }

  body.af-presensi-shell .afisgo-premium-employee-dashboard {
    display: block !important;
    width: 100% !important;
  }

  body.af-presensi-shell .afisgo-premium-hero {
    position: relative !important;
    overflow: hidden !important;
    min-height: 370px !important;
    border-radius: 30px !important;
    padding: 42px 44px 34px !important;
    background:
      radial-gradient(circle at 82% 16%, rgba(255,255,255,.18), transparent 0 160px),
      radial-gradient(circle at 18% 0%, rgba(255,255,255,.16), transparent 0 230px),
      linear-gradient(135deg, #064e3b 0%, #047857 54%, #5ea94b 100%) !important;
    box-shadow: 0 28px 70px rgba(15,23,42,.18) !important;
    color: #fff !important;
  }

  body.af-presensi-shell .afisgo-hero-bg-shape {
    position: absolute !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255,255,255,.15) !important;
    pointer-events: none !important;
  }

  body.af-presensi-shell .afisgo-hero-bg-shape-one {
    width: 430px !important;
    height: 430px !important;
    left: -130px !important;
    top: -180px !important;
  }

  body.af-presensi-shell .afisgo-hero-bg-shape-two {
    width: 360px !important;
    height: 360px !important;
    right: -95px !important;
    top: -70px !important;
  }

  body.af-presensi-shell .afisgo-hero-content {
    position: relative !important;
    z-index: 2 !important;
    max-width: 620px !important;
  }

  body.af-presensi-shell .afisgo-hero-icon {
    width: 58px !important;
    height: 58px !important;
    border-radius: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 28px !important;
    background: rgba(255,255,255,.14) !important;
    border: 1px solid rgba(255,255,255,.20) !important;
    font-size: 28px !important;
    font-weight: 900 !important;
  }

  body.af-presensi-shell .afisgo-hero-kicker {
    display: inline-flex !important;
    padding: 8px 14px !important;
    margin-bottom: 14px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.14) !important;
    color: #d1fae5 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    letter-spacing: .02em !important;
  }

  body.af-presensi-shell .afisgo-hero-content h2 {
    margin: 0 !important;
    color: #ffffff !important;
    font-size: 46px !important;
    line-height: 1.08 !important;
    letter-spacing: -.055em !important;
    font-weight: 950 !important;
    text-shadow: 0 2px 18px rgba(0,0,0,.14) !important;
  }

  body.af-presensi-shell .afisgo-hero-content p {
    max-width: 560px !important;
    margin: 14px 0 0 !important;
    color: rgba(255,255,255,.88) !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
    font-weight: 650 !important;
  }

  body.af-presensi-shell .afisgo-hero-clock {
    position: absolute !important;
    z-index: 1 !important;
    right: 90px !important;
    top: 92px !important;
    width: 150px !important;
    height: 150px !important;
    border-radius: 42px !important;
    background: rgba(255,255,255,.10) !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: rgba(255,255,255,.78) !important;
    font-size: 82px !important;
  }

  body.af-presensi-shell .afisgo-today-strip {
    position: relative !important;
    z-index: 3 !important;
    margin-top: 34px !important;
    display: grid !important;
    grid-template-columns: 1.35fr repeat(5, 1fr) !important;
    gap: 0 !important;
    width: 100% !important;
    min-height: 104px !important;
    padding: 18px 20px !important;
    border-radius: 24px !important;
    background: rgba(255,255,255,.96) !important;
    border: 1px solid rgba(226,232,240,.9) !important;
    box-shadow: 0 22px 46px rgba(15,23,42,.12) !important;
    color: #0f172a !important;
  }

  body.af-presensi-shell .afisgo-today-cell {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    min-width: 0 !important;
    padding: 0 18px !important;
    border-right: 1px solid #e5e7eb !important;
  }

  body.af-presensi-shell .afisgo-today-cell:last-child {
    border-right: 0 !important;
  }

  body.af-presensi-shell .afisgo-cell-icon {
    width: 46px !important;
    height: 46px !important;
    border-radius: 17px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #e8f8ef !important;
    color: #047857 !important;
    font-size: 21px !important;
    flex: 0 0 auto !important;
  }

  body.af-presensi-shell .afisgo-cell-icon.green { background:#e8f8ef !important; color:#047857 !important; }
  body.af-presensi-shell .afisgo-cell-icon.blue { background:#eff6ff !important; color:#1d4ed8 !important; }
  body.af-presensi-shell .afisgo-cell-icon.orange { background:#fff7ed !important; color:#ea580c !important; }
  body.af-presensi-shell .afisgo-cell-icon.purple { background:#faf5ff !important; color:#a855f7 !important; }
  body.af-presensi-shell .afisgo-cell-icon.indigo { background:#eef2ff !important; color:#4f46e5 !important; }

  body.af-presensi-shell .afisgo-today-cell small {
    display: block !important;
    margin-bottom: 6px !important;
    color: #64748b !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
  }

  body.af-presensi-shell .afisgo-today-cell strong {
    display: block !important;
    color: #0f172a !important;
    font-size: 18px !important;
    font-weight: 950 !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
  }

  body.af-presensi-shell .afisgo-today-date strong {
    font-size: 20px !important;
  }

  body.af-presensi-shell .afisgo-status-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: fit-content !important;
    margin-top: 7px !important;
    padding: 6px 11px !important;
    border-radius: 999px !important;
    background: #dff2ff !important;
    color: #0369a1 !important;
    font-size: 11px !important;
    font-style: normal !important;
    font-weight: 950 !important;
    line-height: 1 !important;
  }

  body.af-presensi-shell .afisgo-premium-history {
    margin-top: 24px !important;
    padding: 24px !important;
    border-radius: 28px !important;
    background: rgba(255,255,255,.92) !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 20px 55px rgba(15,23,42,.08) !important;
  }

  body.af-presensi-shell .afisgo-history-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 18px !important;
    margin-bottom: 18px !important;
  }

  body.af-presensi-shell .afisgo-history-kicker {
    color: #64748b !important;
    font-size: 12px !important;
    font-weight: 900 !important;
  }

  body.af-presensi-shell .afisgo-history-head h3 {
    margin: 4px 0 0 !important;
    color: #0f172a !important;
    font-size: 22px !important;
    line-height: 1.15 !important;
    font-weight: 950 !important;
    letter-spacing: -.03em !important;
  }

  body.af-presensi-shell .afisgo-history-head a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 42px !important;
    padding: 0 18px !important;
    border-radius: 16px !important;
    border: 1px solid #e2e8f0 !important;
    background: #ffffff !important;
    color: #0f172a !important;
    text-decoration: none !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    box-shadow: 0 12px 26px rgba(15,23,42,.06) !important;
  }

  body.af-presensi-shell .afisgo-history-table {
    overflow: hidden !important;
    border-radius: 20px !important;
    border: 1px solid #e5e7eb !important;
    background: #ffffff !important;
  }

  body.af-presensi-shell .afisgo-history-table table {
    width: 100% !important;
    border-collapse: collapse !important;
  }

  body.af-presensi-shell .afisgo-history-table th,
  body.af-presensi-shell .afisgo-history-table td {
    padding: 15px 18px !important;
    border-bottom: 1px solid #eef2f7 !important;
    color: #334155 !important;
    font-size: 13px !important;
    text-align: left !important;
    white-space: nowrap !important;
  }

  body.af-presensi-shell .afisgo-history-table th {
    background: #f8fafc !important;
    color: #64748b !important;
    font-size: 12px !important;
    font-weight: 950 !important;
  }

  body.af-presensi-shell .afisgo-history-table td.ok {
    color: #059669 !important;
    font-weight: 850 !important;
  }

  body.af-presensi-shell .afisgo-history-status {
    display: inline-flex !important;
    padding: 7px 12px !important;
    border-radius: 999px !important;
    background: #dcfce7 !important;
    color: #15803d !important;
    font-size: 12px !important;
    font-weight: 950 !important;
  }

  body.af-presensi-shell .afisgo-empty-row {
    text-align: center !important;
    color: #64748b !important;
    font-weight: 800 !important;
  }
}

@media (max-width: 900px) {
  .afisgo-premium-employee-dashboard {
    display: none !important;
  }
}

/* AFISGO_SAFE_PREMIUM_DASHBOARD_TUNE_V1 */
/* Final aman: hide header Dashboard, geser konten premium ke kiri, rapikan hero. */
@media (min-width: 901px) {
  body.af-presensi-shell main.af-main:has(.afisgo-premium-employee-dashboard) > header {
    display: none !important;
  }

  body.af-presensi-shell main.af-main:has(.afisgo-premium-employee-dashboard) {
    padding-top: 18px !important;
  }

  body.af-presensi-shell main.af-main:has(.afisgo-premium-employee-dashboard) .employee-mobile-dashboard {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 6px 18px 60px 6px !important;
  }

  body.af-presensi-shell main.af-main:has(.afisgo-premium-employee-dashboard) .afisgo-premium-hero {
    margin: 0 !important;
    max-width: 100% !important;
    min-height: 355px !important;
    border-radius: 30px !important;
    padding: 40px 40px 30px !important;
  }

  body.af-presensi-shell main.af-main:has(.afisgo-premium-employee-dashboard) .afisgo-hero-content h2 {
    font-size: 44px !important;
    line-height: 1.08 !important;
    letter-spacing: -.05em !important;
    margin: 0 !important;
  }

  body.af-presensi-shell main.af-main:has(.afisgo-premium-employee-dashboard) .afisgo-hero-content p {
    max-width: 660px !important;
    margin-top: 14px !important;
  }

  body.af-presensi-shell main.af-main:has(.afisgo-premium-employee-dashboard) .afisgo-today-strip {
    margin-top: 30px !important;
    min-height: 100px !important;
    padding: 16px 18px !important;
    border-radius: 24px !important;
  }

  body.af-presensi-shell main.af-main:has(.afisgo-premium-employee-dashboard) .afisgo-premium-history {
    margin-top: 24px !important;
  }
}

/* AFISGO_FINAL_POLISH_PREMIUM_DASHBOARD_PC_V1 */
/* Final polish dashboard PC guru: hilangkan header bawaan dan geser konten premium ke kiri. */
@media (min-width: 901px) {
  /* Hapus tulisan Dashboard bawaan */
  body.af-presensi-shell main.af-main > header {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  /* Kurangi ruang atas main */
  body.af-presensi-shell main.af-main {
    padding-top: 18px !important;
  }

  /* Paksa area dashboard tidak terlalu center */
  body.af-presensi-shell main.af-main .employee-mobile-dashboard {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 10px 22px 70px 20px !important;
  }

  /* Geser konten premium ke kiri dan lebarkan */
  body.af-presensi-shell main.af-main .afisgo-premium-employee-dashboard {
    width: calc(100% + 80px) !important;
    max-width: none !important;
    margin-left: -80px !important;
    margin-right: 0 !important;
  }

  body.af-presensi-shell main.af-main .afisgo-premium-hero {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }

  body.af-presensi-shell main.af-main .afisgo-premium-history {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* AFISGO_RESTORE_EMPLOYEE_MOBILE_HEADER_V1 */
/* Restore tampilan HP guru/pegawai. Tidak berlaku untuk PC. */
.afisgo-mobile-employee-head {
  display: none;
}

@media (max-width: 900px) {
  /* Sidebar PC disembunyikan khusus HP */
  body.af-presensi-shell aside.employee-mobile-aside.af-sidebar {
    display: none !important;
  }

  body.af-presensi-shell main.af-main {
    margin-left: 0 !important;
    width: 100% !important;
    padding: 0 !important;
  }

  body.af-presensi-shell main.af-main > header {
    display: none !important;
  }

  body.af-presensi-shell .employee-mobile-dashboard {
    width: min(100%, 430px) !important;
    max-width: 430px !important;
    margin: 0 auto !important;
    padding: 14px 12px 36px !important;
  }

  body.af-presensi-shell .afisgo-premium-employee-dashboard {
    display: none !important;
  }

  .afisgo-mobile-employee-head {
    display: block !important;
    margin: 0 0 16px !important;
  }

  .afisgo-mobile-employee-brand {
    display: flex !important;
    align-items: center !important;
    gap: 13px !important;
    padding: 16px 16px !important;
    border-radius: 24px !important;
    background:
      radial-gradient(circle at 78% 8%, rgba(255,255,255,.18), transparent 0 110px),
      linear-gradient(135deg, #163b70, #1d4f8e) !important;
    color: #ffffff !important;
    box-shadow: 0 18px 38px rgba(15,23,42,.16) !important;
    border: 1px solid rgba(255,255,255,.18) !important;
  }

  .afisgo-mobile-employee-mark {
    width: 48px !important;
    height: 48px !important;
    border-radius: 17px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #ecfdf5 !important;
    color: #047857 !important;
    font-size: 20px !important;
    font-weight: 950 !important;
    flex: 0 0 auto !important;
  }

  .afisgo-mobile-employee-welcome {
    font-size: 11px !important;
    font-weight: 850 !important;
    opacity: .92 !important;
    line-height: 1.1 !important;
  }

  .afisgo-mobile-employee-name {
    margin-top: 2px !important;
    font-size: 18px !important;
    font-weight: 950 !important;
    line-height: 1.05 !important;
    letter-spacing: -.025em !important;
  }

  .afisgo-mobile-employee-sub {
    margin-top: 3px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    color: #dbeafe !important;
  }

  .afisgo-mobile-employee-menu {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
    margin-top: 10px !important;
  }

  .afisgo-mobile-employee-menu a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 44px !important;
    padding: 10px 10px !important;
    border-radius: 15px !important;
    text-decoration: none !important;
    background: #ffffff !important;
    border: 1px solid #dbeafe !important;
    color: #0f172a !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    box-shadow: 0 10px 24px rgba(15,23,42,.06) !important;
  }

  .afisgo-mobile-employee-menu a.active {
    background: linear-gradient(135deg, #0f766e, #2563eb) !important;
    color: #ffffff !important;
    border-color: transparent !important;
  }

  /* Pastikan card mobile lama tetap rapi */
  body.af-presensi-shell .employee-today-card {
    margin-top: 12px !important;
  }
}

/* AFISGO_MOBILE_EMPLOYEE_HAMBURGER_FIXED_V1 */
/* HP guru/pegawai: header ringkas + hamburger. PC tidak disentuh. */
@media (max-width: 900px) {
  body.af-presensi-shell aside.employee-mobile-aside.af-sidebar {
    display: none !important;
  }

  body.af-presensi-shell main.af-main {
    margin-left: 0 !important;
    width: 100% !important;
    padding: 0 !important;
  }

  body.af-presensi-shell main.af-main > header {
    display: none !important;
  }

  body.af-presensi-shell .employee-mobile-dashboard {
    width: min(100%, 430px) !important;
    max-width: 430px !important;
    margin: 0 auto !important;
    padding: 14px 12px 36px !important;
  }

  body.af-presensi-shell .afisgo-premium-employee-dashboard {
    display: none !important;
  }

  .afisgo-mobile-employee-head {
    display: block !important;
    margin: 0 0 14px !important;
    position: relative !important;
    z-index: 20 !important;
  }

  .afisgo-mobile-employee-brand {
    display: flex !important;
    align-items: center !important;
    gap: 13px !important;
    min-height: 86px !important;
    padding: 14px 14px !important;
    border-radius: 24px !important;
    background:
      radial-gradient(circle at 78% 8%, rgba(255,255,255,.18), transparent 0 110px),
      linear-gradient(135deg, #163b70, #1d4f8e) !important;
    color: #ffffff !important;
    box-shadow: 0 18px 38px rgba(15,23,42,.16) !important;
    border: 1px solid rgba(255,255,255,.18) !important;
  }

  .afisgo-mobile-employee-mark {
    width: 48px !important;
    height: 48px !important;
    border-radius: 17px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #ecfdf5 !important;
    color: #047857 !important;
    font-size: 20px !important;
    font-weight: 950 !important;
    flex: 0 0 auto !important;
  }

  .afisgo-mobile-employee-text {
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }

  .afisgo-mobile-employee-welcome {
    font-size: 11px !important;
    font-weight: 850 !important;
    opacity: .92 !important;
    line-height: 1.1 !important;
  }

  .afisgo-mobile-employee-name {
    margin-top: 2px !important;
    font-size: 18px !important;
    font-weight: 950 !important;
    line-height: 1.05 !important;
    letter-spacing: -.025em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .afisgo-mobile-employee-sub {
    margin-top: 3px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    color: #dbeafe !important;
  }

  .afisgo-mobile-menu-toggle {
    width: 50px !important;
    height: 50px !important;
    border: 0 !important;
    border-radius: 17px !important;
    background: rgba(255,255,255,.18) !important;
    color: #ffffff !important;
    font-size: 26px !important;
    font-weight: 950 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    flex: 0 0 auto !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18) !important;
  }

  .afisgo-mobile-menu-panel {
    display: none !important;
    margin-top: 10px !important;
    padding: 10px !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    border: 1px solid #dbeafe !important;
    box-shadow: 0 18px 38px rgba(15,23,42,.12) !important;
  }

  body.afisgo-mobile-menu-open .afisgo-mobile-menu-panel {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .afisgo-mobile-menu-panel a {
    display: flex !important;
    align-items: center !important;
    min-height: 44px !important;
    padding: 10px 14px !important;
    border-radius: 14px !important;
    text-decoration: none !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    color: #0f172a !important;
    font-size: 13px !important;
    font-weight: 900 !important;
  }

  .afisgo-mobile-menu-panel a.active {
    background: linear-gradient(135deg, #0f766e, #2563eb) !important;
    color: #ffffff !important;
    border-color: transparent !important;
  }

  body.af-presensi-shell .employee-today-card {
    margin-top: 12px !important;
  }
}

/* AFISGO_MOBILE_EMPLOYEE_MENU_LINK_FIXED_V2 */
/* Mobile guru: menu hamburger ringkas, link jelas ke Presensi/Izin, PC tidak disentuh. */
@media (max-width: 900px) {
  .afisgo-mobile-menu-panel {
    display: none !important;
    margin-top: 8px !important;
    padding: 8px !important;
    border-radius: 18px !important;
    background: rgba(255,255,255,.96) !important;
    border: 1px solid #dbeafe !important;
    box-shadow: 0 16px 32px rgba(15,23,42,.12) !important;
  }

  body.afisgo-mobile-menu-open .afisgo-mobile-menu-panel {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 7px !important;
  }

  .afisgo-mobile-menu-panel a {
    min-height: 40px !important;
    padding: 9px 12px !important;
    border-radius: 13px !important;
    font-size: 12px !important;
    font-weight: 900 !important;
  }

  .afisgo-mobile-menu-panel a.active {
    background: linear-gradient(135deg, #0f766e, #2563eb) !important;
    color: #ffffff !important;
  }

  .afisgo-mobile-employee-brand {
    margin-bottom: 0 !important;
  }

  body:not(.afisgo-mobile-menu-open) .afisgo-mobile-menu-panel {
    display: none !important;
  }
}

/* AFISGO_MOBILE_MENU_ASLI_BAHASA_LOGOUT_V1 */
/* HP Presensi: hamburger hanya Bahasa + Logout. Tidak mengubah PC. */
@media (max-width: 900px) {
  .afisgo-mobile-menu-panel {
    display: none !important;
    margin-top: 10px !important;
    padding: 12px !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    border: 1px solid #dbeafe !important;
    box-shadow: 0 18px 38px rgba(15,23,42,.12) !important;
  }

  body.afisgo-mobile-menu-open .afisgo-mobile-menu-panel {
    display: block !important;
  }

  .afisgo-mobile-lang-panel {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin-bottom: 9px !important;
    padding: 6px !important;
    border-radius: 16px !important;
    background: #f1f5f9 !important;
  }

  .afisgo-mobile-lang-panel a {
    min-height: 38px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 13px !important;
    text-decoration: none !important;
    color: #334155 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .afisgo-mobile-lang-panel a.active {
    color: #ffffff !important;
    background: linear-gradient(135deg, #0f766e, #2563eb) !important;
    box-shadow: 0 10px 22px rgba(37,99,235,.18) !important;
  }

  .afisgo-mobile-logout-link {
    min-height: 42px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 14px !important;
    text-decoration: none !important;
    color: #0f172a !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    font-size: 13px !important;
    font-weight: 900 !important;
  }

  /* AFISGO_MOBILE_MENU_PROFILE_PASSWORD_V1 */
  /* Hanya tampilkan Profil, Ganti Password, dan Logout di hamburger guru/pegawai. */
  .afisgo-mobile-menu-panel > a {
    display: none !important;
  }

  .afisgo-mobile-menu-panel > a.afisgo-mobile-profile-link,
  .afisgo-mobile-menu-panel > a.afisgo-mobile-password-link,
  .afisgo-mobile-menu-panel > a.afisgo-mobile-logout-link {
    min-height: 42px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 10px 14px !important;
    border-radius: 14px !important;
    text-decoration: none !important;
    color: #0f172a !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    font-size: 13px !important;
    font-weight: 900 !important;
  }

  .afisgo-mobile-menu-panel > a.afisgo-mobile-profile-link,
  .afisgo-mobile-menu-panel > a.afisgo-mobile-password-link {
    margin-bottom: 8px !important;
  }

  .afisgo-mobile-menu-panel > a.afisgo-mobile-profile-link:hover,
  .afisgo-mobile-menu-panel > a.afisgo-mobile-password-link:hover {
    color: #123d7a !important;
    background: #eff6ff !important;
    border-color: #bfdbfe !important;
  }

  .afisgo-mobile-menu-panel > a.afisgo-mobile-logout-link {
    justify-content: center !important;
    color: #991b1b !important;
    background: #fff7f7 !important;
    border-color: #fecaca !important;
  }
}


/* AFISGO_REKAP_IZIN_MOBILE_COMPACT_V1 */
/* Tombol Rekap Izin dibuat lebih kecil dan warna dibedakan. */
@media (max-width: 900px) {
  .employee-rekap-action-card {
    margin-top: 10px !important;
  }

  .employee-rekap-action-card .employee-rekap-action-btn {
    width: 84% !important;
    max-width: 330px !important;
    margin: 0 auto !important;
    min-height: 52px !important;
    padding: 10px 14px !important;
    border-radius: 16px !important;
    background: linear-gradient(135deg, #0f766e 0%, #14b8a6 100%) !important;
    box-shadow: 0 10px 24px rgba(15, 118, 110, .20) !important;
  }

  .employee-rekap-action-card .employee-leave-action-icon {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    border-radius: 12px !important;
    font-size: 15px !important;
  }

  .employee-rekap-action-card .employee-leave-action-text strong {
    font-size: 15px !important;
    line-height: 1.1 !important;
  }

  .employee-rekap-action-card .employee-leave-action-text small {
    display: none !important;
  }

  .employee-rekap-action-card .employee-leave-action-arrow {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    font-size: 18px !important;
    background: rgba(255,255,255,.20) !important;
  }
}


/* AFISGO_MOBILE_TODAY_CARD_CENTER_FONT_V1 */
/* HP guru: rapikan Presensi Hari Ini, teks center dan font lebih terbaca */
@media (max-width: 900px) {
  body.af-presensi-shell main.af-main .employee-mobile-dashboard > .employee-today-card > .employee-time-grid > .employee-time-box,
  body.af-presensi-shell main.af-main .employee-mobile-dashboard > .employee-today-card > .employee-metric-row > div {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    min-height: 76px !important;
    padding: 13px 12px !important;
  }

  body.af-presensi-shell main.af-main .employee-mobile-dashboard > .employee-today-card > .employee-time-grid small,
  body.af-presensi-shell main.af-main .employee-mobile-dashboard > .employee-today-card > .employee-metric-row small {
    width: 100% !important;
    display: block !important;
    text-align: center !important;
    font-size: 12px !important;
    line-height: 1.15 !important;
    font-weight: 850 !important;
    margin: 0 0 8px 0 !important;
    color: #64748b !important;
  }

  body.af-presensi-shell main.af-main .employee-mobile-dashboard > .employee-today-card > .employee-time-grid strong,
  body.af-presensi-shell main.af-main .employee-mobile-dashboard > .employee-today-card > .employee-metric-row strong {
    width: 100% !important;
    display: block !important;
    text-align: center !important;
    font-size: 15px !important;
    line-height: 1.15 !important;
    font-weight: 950 !important;
    color: #0f172a !important;
  }

  body.af-presensi-shell main.af-main .employee-mobile-dashboard > .employee-today-card > .employee-section-head {
    text-align: center !important;
  }

  body.af-presensi-shell main.af-main .employee-mobile-dashboard > .employee-today-card > .employee-section-head span {
    font-size: 12px !important;
    font-weight: 900 !important;
  }

  body.af-presensi-shell main.af-main .employee-mobile-dashboard > .employee-today-card > .employee-section-head strong {
    font-size: 18px !important;
    font-weight: 950 !important;
  }

  body.af-presensi-shell main.af-main .employee-mobile-dashboard > .employee-today-card .employee-status-pill {
    font-size: 12px !important;
    font-weight: 950 !important;
    min-height: 30px !important;
  }
}

/* AFISGO_MOBILE_MENU_PROFILE_PASSWORD_FINAL_V1 */
@media (max-width: 900px) {
  .afisgo-mobile-menu-panel {
    padding: 14px !important;
    border-radius: 22px !important;
    background: rgba(255,255,255,.98) !important;
    border: 1px solid #dbeafe !important;
    box-shadow: 0 20px 45px rgba(15,23,42,.16) !important;
  }

  .afisgo-mobile-menu-title {
    margin: 1px 2px 10px !important;
    color: #64748b !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
  }

  .afisgo-mobile-lang-panel {
    margin-bottom: 12px !important;
    padding: 5px !important;
    border-radius: 15px !important;
    background: #eef2f7 !important;
  }

  .afisgo-mobile-account-links {
    display: grid !important;
    gap: 8px !important;
  }

  .afisgo-mobile-menu-panel
  .afisgo-mobile-account-links
  > a.afisgo-mobile-profile-link,

  .afisgo-mobile-menu-panel
  .afisgo-mobile-account-links
  > a.afisgo-mobile-password-link {
    min-height: 58px !important;
    display: grid !important;
    grid-template-columns: 38px minmax(0,1fr) 22px !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 10px 12px !important;
    border-radius: 15px !important;
    color: #0f172a !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    text-decoration: none !important;
    box-shadow: 0 6px 16px rgba(15,23,42,.05) !important;
  }

  .afisgo-mobile-menu-panel
  .afisgo-mobile-account-links
  > a:active {
    transform: scale(.99) !important;
    background: #eff6ff !important;
    border-color: #bfdbfe !important;
  }

  .afisgo-mobile-menu-icon {
    width: 36px !important;
    height: 36px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, #e0f2fe, #dbeafe) !important;
    font-size: 17px !important;
  }

  .afisgo-mobile-menu-text {
    min-width: 0 !important;
    display: block !important;
  }

  .afisgo-mobile-menu-text strong,
  .afisgo-mobile-menu-text small {
    display: block !important;
  }

  .afisgo-mobile-menu-text strong {
    color: #0f172a !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    line-height: 1.3 !important;
  }

  .afisgo-mobile-menu-text small {
    margin-top: 2px !important;
    color: #64748b !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
  }

  .afisgo-mobile-menu-arrow {
    color: #94a3b8 !important;
    font-size: 22px !important;
    font-weight: 500 !important;
    text-align: right !important;
  }

  .afisgo-mobile-menu-panel
  > a.afisgo-mobile-logout-link {
    min-height: 58px !important;
    display: grid !important;
    grid-template-columns: 38px minmax(0,1fr) !important;
    align-items: center !important;
    gap: 10px !important;
    margin-top: 11px !important;
    padding: 10px 12px !important;
    border-radius: 15px !important;
    color: #991b1b !important;
    background: #fff7f7 !important;
    border: 1px solid #fecaca !important;
    text-decoration: none !important;
    box-shadow: none !important;
  }

  .afisgo-mobile-menu-panel
  > a.afisgo-mobile-logout-link
  .afisgo-mobile-menu-icon {
    background: #fee2e2 !important;
  }

  .afisgo-mobile-menu-panel
  > a.afisgo-mobile-logout-link
  .afisgo-mobile-menu-text strong {
    color: #991b1b !important;
  }

  .afisgo-mobile-menu-panel
  > a.afisgo-mobile-logout-link
  .afisgo-mobile-menu-text small {
    color: #b91c1c !important;
  }
}

/* AFISGO_MOBILE_MENU_COMPACT_FLOATING_V1 */
@media (max-width: 900px) {
  .afisgo-mobile-employee-card {
    position: relative !important;
  }

  .afisgo-mobile-menu-panel {
    position: absolute !important;
    top: 84px !important;
    right: 12px !important;
    left: auto !important;
    z-index: 9999 !important;

    width: min(278px, calc(100vw - 44px)) !important;
    margin: 0 !important;
    padding: 10px !important;

    border-radius: 17px !important;
    background: rgba(255,255,255,.99) !important;
    border: 1px solid #dbeafe !important;
    box-shadow: 0 18px 42px rgba(15,23,42,.20) !important;
  }

  body.afisgo-mobile-menu-open .afisgo-mobile-menu-panel {
    display: block !important;
  }

  .afisgo-mobile-menu-title {
    display: none !important;
  }

  .afisgo-mobile-lang-panel {
    margin: 0 0 8px !important;
    padding: 4px !important;
    border-radius: 13px !important;
  }

  .afisgo-mobile-lang-panel a {
    min-height: 34px !important;
    padding: 6px 8px !important;
    border-radius: 10px !important;
    font-size: 11px !important;
  }

  .afisgo-mobile-account-links {
    gap: 6px !important;
  }

  .afisgo-mobile-menu-panel
  .afisgo-mobile-account-links
  > a.afisgo-mobile-profile-link,

  .afisgo-mobile-menu-panel
  .afisgo-mobile-account-links
  > a.afisgo-mobile-password-link {
    min-height: 44px !important;
    grid-template-columns: 30px minmax(0,1fr) 16px !important;
    gap: 8px !important;

    padding: 7px 9px !important;
    border-radius: 12px !important;

    box-shadow: none !important;
  }

  .afisgo-mobile-menu-icon {
    width: 28px !important;
    height: 28px !important;
    border-radius: 9px !important;
    font-size: 14px !important;
  }

  .afisgo-mobile-menu-text strong {
    font-size: 12px !important;
    line-height: 1.2 !important;
  }

  .afisgo-mobile-menu-text small {
    display: none !important;
  }

  .afisgo-mobile-menu-arrow {
    font-size: 17px !important;
  }

  .afisgo-mobile-menu-panel
  > a.afisgo-mobile-logout-link {
    min-height: 42px !important;
    grid-template-columns: 30px minmax(0,1fr) !important;
    gap: 8px !important;

    margin-top: 8px !important;
    padding: 7px 9px !important;
    border-radius: 12px !important;
  }

  .afisgo-mobile-menu-panel
  > a.afisgo-mobile-logout-link
  .afisgo-mobile-menu-text strong {
    font-size: 12px !important;
  }
}

/* AFISGO_MOBILE_MENU_NARROW_FINAL_V1 */
@media (max-width: 900px) {
  .afisgo-mobile-menu-panel {
    width: 228px !important;
    max-width: calc(100vw - 34px) !important;
    right: 10px !important;
  }

  .afisgo-mobile-lang-panel {
    grid-template-columns: 1fr 1fr !important;
    gap: 4px !important;
  }

  .afisgo-mobile-lang-panel a {
    padding-left: 5px !important;
    padding-right: 5px !important;
    font-size: 10px !important;
  }

  .afisgo-mobile-menu-panel
  .afisgo-mobile-account-links
  > a.afisgo-mobile-profile-link,

  .afisgo-mobile-menu-panel
  .afisgo-mobile-account-links
  > a.afisgo-mobile-password-link {
    grid-template-columns: 27px minmax(0,1fr) 12px !important;
    gap: 6px !important;
    padding-left: 7px !important;
    padding-right: 7px !important;
  }

  .afisgo-mobile-menu-panel
  > a.afisgo-mobile-logout-link {
    grid-template-columns: 27px minmax(0,1fr) !important;
    gap: 6px !important;
    padding-left: 7px !important;
    padding-right: 7px !important;
  }

  .afisgo-mobile-menu-icon {
    width: 26px !important;
    height: 26px !important;
    font-size: 13px !important;
  }

  .afisgo-mobile-menu-text strong {
    font-size: 11px !important;
  }

  .afisgo-mobile-menu-arrow {
    font-size: 15px !important;
  }
}

/* AFISGO_MOBILE_HORIZONTAL_OVERFLOW_FIX_V1 */
@media (max-width: 900px) {
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  body.af-presensi-shell {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  body.af-presensi-shell main.af-main {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
  }

  body.af-presensi-shell main.af-main > header {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body.af-presensi-shell .employee-mobile-dashboard {
    width: calc(100vw - 24px) !important;
    max-width: 430px !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 14px 0 36px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  body.af-presensi-shell .employee-mobile-dashboard *,
  body.af-presensi-shell .employee-mobile-dashboard *::before,
  body.af-presensi-shell .employee-mobile-dashboard *::after {
    box-sizing: border-box !important;
  }

  body.af-presensi-shell .afisgo-mobile-employee-head,
  body.af-presensi-shell .afisgo-mobile-employee-brand,
  body.af-presensi-shell .employee-today-card,
  body.af-presensi-shell .employee-action-card,
  body.af-presensi-shell .employee-rekap-action-card,
  body.af-presensi-shell .employee-history-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body.af-presensi-shell .afisgo-mobile-employee-brand {
    display: grid !important;
    grid-template-columns: 52px minmax(0, 1fr) 48px !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 14px !important;
    overflow: hidden !important;
  }

  body.af-presensi-shell .afisgo-mobile-employee-mark {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
  }

  body.af-presensi-shell .afisgo-mobile-employee-text {
    width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  body.af-presensi-shell .afisgo-mobile-employee-name {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: clip !important;

    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;

    font-size: 16px !important;
    line-height: 1.08 !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }

  body.af-presensi-shell .afisgo-mobile-menu-toggle {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    justify-self: end !important;
    padding: 0 !important;
  }

  body.af-presensi-shell .employee-time-grid,
  body.af-presensi-shell .employee-metric-row {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body.af-presensi-shell .employee-time-grid > *,
  body.af-presensi-shell .employee-metric-row > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body.af-presensi-shell .employee-leave-action-btn,
  body.af-presensi-shell .employee-rekap-action-btn {
    max-width: calc(100% - 20px) !important;
    min-width: 0 !important;
  }
}

@media (max-width: 380px) {
  body.af-presensi-shell .employee-mobile-dashboard {
    width: calc(100vw - 16px) !important;
  }

  body.af-presensi-shell .afisgo-mobile-employee-brand {
    grid-template-columns: 46px minmax(0, 1fr) 44px !important;
    gap: 9px !important;
    padding: 12px !important;
  }

  body.af-presensi-shell .afisgo-mobile-employee-mark {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
  }

  body.af-presensi-shell .afisgo-mobile-menu-toggle {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
  }

  body.af-presensi-shell .afisgo-mobile-employee-name {
    font-size: 15px !important;
  }
}

/* AFISGO_LOGIN_REMEMBER_EMAIL_TOGGLE_PASSWORD_V1 */
.af-login-password-wrap {
  position: relative;
  width: 100%;
}

.af-login-password-wrap input {
  width: 100% !important;
  padding-right: 52px !important;
}

.af-login-password-toggle {
  position: absolute !important;
  top: 50% !important;
  right: 8px !important;
  z-index: 3 !important;

  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  padding: 0 !important;

  display: grid !important;
  place-items: center !important;

  transform: translateY(-50%) !important;
  border: 0 !important;
  border-radius: 10px !important;

  background: #eef4ff !important;
  color: #123d7a !important;
  box-shadow: none !important;

  font-size: 16px !important;
  line-height: 1 !important;
  cursor: pointer !important;
}

.af-login-password-toggle:hover {
  transform: translateY(-50%) !important;
  background: #dbeafe !important;
  filter: none !important;
  box-shadow: none !important;
}

.af-login-password-toggle::after {
  display: none !important;
}

.af-login-remember-row {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 9px !important;

  margin: 2px 0 2px !important;
  padding: 0 !important;

  color: #475569 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-align: left !important;
  cursor: pointer !important;
}

.af-login-remember-row input[type="checkbox"] {
  width: 17px !important;
  height: 17px !important;
  min-width: 17px !important;
  margin: 0 !important;
  padding: 0 !important;

  accent-color: #123d7a !important;
  cursor: pointer !important;
}

html.locale-ar .af-login-password-toggle {
  right: auto !important;
  left: 8px !important;
}

html.locale-ar .af-login-password-wrap input {
  padding-right: 12px !important;
  padding-left: 52px !important;
}

html.locale-ar .af-login-remember-row {
  justify-content: flex-start !important;
  direction: rtl !important;
  text-align: right !important;
}

@media (max-width: 560px) {
  .af-login-password-toggle {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
  }

  .af-login-remember-row {
    font-size: 12px !important;
  }
}

/* AFISGO_MOBILE_EMPLOYEE_OFFICIAL_LOGO_V1 */
@media (max-width: 900px) {
  body.af-presensi-shell .afisgo-mobile-employee-mark {
    overflow: hidden !important;
    padding: 5px !important;
    background: #ffffff !important;
    border: 1px solid rgba(255,255,255,.85) !important;
    box-shadow: 0 8px 18px rgba(15,23,42,.15) !important;
  }

  body.af-presensi-shell .afisgo-mobile-employee-logo {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    border-radius: 12px !important;
  }
}

/* AFISGO_MOBILE_SKY_EFFECTS_V1 */
.afisgo-mobile-sky-effects {
  display: none;
}

@media (max-width: 900px) {
  body.af-presensi-shell .employee-mobile-dashboard {
    position: relative !important;
    isolation: isolate !important;
  }

  body.af-presensi-shell .afisgo-mobile-sky-effects {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    border-radius: 28px !important;
  }

  /*
   * Konten utama selalu berada di atas efek.
   * Menu hamburger tetap mengikuti z-index tinggi yang sudah ada.
   */
  body.af-presensi-shell .employee-mobile-dashboard
  > :not(.afisgo-mobile-sky-effects) {
    position: relative !important;
    z-index: 2 !important;
  }

  body.af-presensi-shell .afisgo-sky-star {
    position: absolute !important;
    display: block !important;
    width: 4px !important;
    height: 4px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.95) !important;
    box-shadow:
      0 0 5px rgba(255,255,255,.95),
      0 0 11px rgba(125,211,252,.72) !important;
    opacity: .25;
    animation:
      afisgoStarTwinkle 3.6s ease-in-out infinite !important;
  }

  body.af-presensi-shell .afisgo-sky-star::before,
  body.af-presensi-shell .afisgo-sky-star::after {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    background: rgba(255,255,255,.65) !important;
    border-radius: 999px !important;
  }

  body.af-presensi-shell .afisgo-sky-star::before {
    width: 10px !important;
    height: 1px !important;
  }

  body.af-presensi-shell .afisgo-sky-star::after {
    width: 1px !important;
    height: 10px !important;
  }

  body.af-presensi-shell .star-1 {
    top: 4% !important;
    left: 8% !important;
    animation-delay: -.4s !important;
  }

  body.af-presensi-shell .star-2 {
    top: 11% !important;
    left: 82% !important;
    width: 3px !important;
    height: 3px !important;
    animation-delay: -1.7s !important;
  }

  body.af-presensi-shell .star-3 {
    top: 20% !important;
    left: 15% !important;
    animation-delay: -2.8s !important;
  }

  body.af-presensi-shell .star-4 {
    top: 30% !important;
    left: 91% !important;
    width: 3px !important;
    height: 3px !important;
    animation-delay: -.9s !important;
  }

  body.af-presensi-shell .star-5 {
    top: 39% !important;
    left: 5% !important;
    animation-delay: -2.1s !important;
  }

  body.af-presensi-shell .star-6 {
    top: 48% !important;
    left: 76% !important;
    width: 5px !important;
    height: 5px !important;
    animation-delay: -3.2s !important;
  }

  body.af-presensi-shell .star-7 {
    top: 57% !important;
    left: 22% !important;
    width: 3px !important;
    height: 3px !important;
    animation-delay: -1.3s !important;
  }

  body.af-presensi-shell .star-8 {
    top: 66% !important;
    left: 94% !important;
    animation-delay: -2.5s !important;
  }

  body.af-presensi-shell .star-9 {
    top: 73% !important;
    left: 10% !important;
    width: 3px !important;
    height: 3px !important;
    animation-delay: -.2s !important;
  }

  body.af-presensi-shell .star-10 {
    top: 81% !important;
    left: 69% !important;
    animation-delay: -1.9s !important;
  }

  body.af-presensi-shell .star-11 {
    top: 89% !important;
    left: 31% !important;
    width: 5px !important;
    height: 5px !important;
    animation-delay: -3.1s !important;
  }

  body.af-presensi-shell .star-12 {
    top: 95% !important;
    left: 88% !important;
    width: 3px !important;
    height: 3px !important;
    animation-delay: -1.1s !important;
  }

  body.af-presensi-shell .afisgo-sky-meteor {
    position: absolute !important;
    z-index: 1 !important;
    width: 92px !important;
    height: 2px !important;
    border-radius: 999px !important;
    opacity: 0;
    pointer-events: none !important;

    background:
      linear-gradient(
        90deg,
        rgba(255,255,255,0),
        rgba(255,255,255,.94)
      ) !important;

    filter:
      drop-shadow(0 0 5px rgba(125,211,252,.75)) !important;

    transform:
      rotate(-32deg) translate3d(0,0,0);

    animation:
      afisgoMeteorFly 9s linear infinite !important;
  }

  body.af-presensi-shell .afisgo-sky-meteor::after {
    content: "" !important;
    position: absolute !important;
    right: -2px !important;
    top: 50% !important;
    width: 5px !important;
    height: 5px !important;
    transform: translateY(-50%) !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    box-shadow:
      0 0 8px rgba(255,255,255,.95),
      0 0 15px rgba(96,165,250,.75) !important;
  }

  body.af-presensi-shell .meteor-1 {
    top: 11% !important;
    left: -125px !important;
    animation-delay: 1.2s !important;
  }

  body.af-presensi-shell .meteor-2 {
    top: 60% !important;
    left: -145px !important;
    width: 74px !important;
    animation-delay: 6.1s !important;
    animation-duration: 12s !important;
  }
}

@keyframes afisgoStarTwinkle {
  0%,
  100% {
    opacity: .16;
    transform: scale(.72);
  }

  45% {
    opacity: .9;
    transform: scale(1.18);
  }

  65% {
    opacity: .42;
    transform: scale(.92);
  }
}

@keyframes afisgoMeteorFly {
  0% {
    opacity: 0;
    transform:
      rotate(-32deg)
      translate3d(0, 0, 0);
  }

  7% {
    opacity: .92;
  }

  20% {
    opacity: .75;
  }

  30% {
    opacity: 0;
    transform:
      rotate(-32deg)
      translate3d(620px, 0, 0);
  }

  100% {
    opacity: 0;
    transform:
      rotate(-32deg)
      translate3d(620px, 0, 0);
  }
}

/* Hormati pengaturan pengguna yang mengurangi animasi. */
@media (prefers-reduced-motion: reduce) {
  .afisgo-sky-star,
  .afisgo-sky-meteor {
    animation: none !important;
  }

  .afisgo-sky-star {
    opacity: .28;
  }

  .afisgo-sky-meteor {
    display: none !important;
  }
}

/* AFISGO_MOBILE_SKY_VISIBLE_MENU_ZINDEX_FIX_V1 */
@media (max-width: 900px) {

  /*
   * Dashboard menjadi konteks utama.
   */
  body.af-presensi-shell .employee-mobile-dashboard {
    position: relative !important;
    isolation: isolate !important;
  }

  /*
   * Layer bintang tetap di belakang konten,
   * tetapi di atas background dashboard.
   */
  body.af-presensi-shell .afisgo-mobile-sky-effects {
    z-index: 1 !important;
    overflow: hidden !important;
    opacity: 1 !important;
  }

  /*
   * Kartu dan tombol berada di atas animasi.
   */
  body.af-presensi-shell .employee-mobile-dashboard
  > :not(.afisgo-mobile-sky-effects):not(.afisgo-mobile-employee-head) {
    position: relative !important;
    z-index: 3 !important;
  }

  /*
   * Header dan dropdown harus paling atas.
   */
  body.af-presensi-shell
  .employee-mobile-dashboard
  > .afisgo-mobile-employee-head {
    position: relative !important;
    z-index: 100 !important;
  }

  body.af-presensi-shell .afisgo-mobile-menu-panel {
    z-index: 99999 !important;
  }

  /*
   * Bintang dibuat lebih terlihat pada background terang.
   */
  body.af-presensi-shell .afisgo-sky-star {
    width: 5px !important;
    height: 5px !important;

    background: #2563eb !important;

    box-shadow:
      0 0 4px rgba(37,99,235,.95),
      0 0 10px rgba(14,165,233,.78),
      0 0 18px rgba(56,189,248,.45) !important;

    opacity: .58;
  }

  body.af-presensi-shell .afisgo-sky-star::before,
  body.af-presensi-shell .afisgo-sky-star::after {
    background: rgba(37,99,235,.72) !important;
  }

  /*
   * Sebagian bintang diberi warna emas agar lebih hidup.
   */
  body.af-presensi-shell .star-2,
  body.af-presensi-shell .star-5,
  body.af-presensi-shell .star-8,
  body.af-presensi-shell .star-11 {
    background: #f59e0b !important;

    box-shadow:
      0 0 5px rgba(245,158,11,.95),
      0 0 12px rgba(251,191,36,.72),
      0 0 20px rgba(253,224,71,.42) !important;
  }

  body.af-presensi-shell .star-2::before,
  body.af-presensi-shell .star-2::after,
  body.af-presensi-shell .star-5::before,
  body.af-presensi-shell .star-5::after,
  body.af-presensi-shell .star-8::before,
  body.af-presensi-shell .star-8::after,
  body.af-presensi-shell .star-11::before,
  body.af-presensi-shell .star-11::after {
    background: rgba(245,158,11,.75) !important;
  }

  /*
   * Meteor diperkuat agar tampak jelas.
   */
  body.af-presensi-shell .afisgo-sky-meteor {
    width: 120px !important;
    height: 3px !important;

    background:
      linear-gradient(
        90deg,
        rgba(37,99,235,0),
        rgba(14,165,233,.70),
        rgba(255,255,255,1)
      ) !important;

    filter:
      drop-shadow(0 0 5px rgba(37,99,235,.95))
      drop-shadow(0 0 10px rgba(14,165,233,.75)) !important;
  }

  body.af-presensi-shell .afisgo-sky-meteor::after {
    width: 7px !important;
    height: 7px !important;

    background: #ffffff !important;

    box-shadow:
      0 0 7px rgba(255,255,255,1),
      0 0 14px rgba(37,99,235,.95),
      0 0 22px rgba(14,165,233,.65) !important;
  }

  /*
   * Meteor lebih sering terlihat saat pengujian,
   * tetapi tetap tidak terlalu ramai.
   */
  body.af-presensi-shell .meteor-1 {
    animation-duration: 7s !important;
    animation-delay: .5s !important;
  }

  body.af-presensi-shell .meteor-2 {
    animation-duration: 10s !important;
    animation-delay: 3.8s !important;
  }
}

/*
 * Animasi meteor menyeberang seluruh lebar HP.
 */
@keyframes afisgoMeteorFly {
  0% {
    opacity: 0;
    transform:
      rotate(-32deg)
      translate3d(0, 0, 0);
  }

  5% {
    opacity: 1;
  }

  24% {
    opacity: .95;
  }

  38% {
    opacity: 0;
    transform:
      rotate(-32deg)
      translate3d(720px, 0, 0);
  }

  100% {
    opacity: 0;
    transform:
      rotate(-32deg)
      translate3d(720px, 0, 0);
  }
}

/* AFISGO_MOBILE_SKY_LAYER_EXACT_FIX_V1 */
@media (max-width: 900px) {

  body.af-presensi-shell .employee-mobile-dashboard {
    position: relative !important;
    isolation: isolate !important;
  }

  /*
   * Efek harus berada di atas kartu agar terlihat,
   * tetapi tidak menangkap sentuhan pengguna.
   */
  body.af-presensi-shell .afisgo-mobile-sky-effects {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 40 !important;
    pointer-events: none !important;
    overflow: hidden !important;
    border-radius: 0 !important;
    opacity: 1 !important;
  }

  /*
   * Header dan dropdown tetap lebih tinggi.
   */
  body.af-presensi-shell
  .employee-mobile-dashboard
  > .afisgo-mobile-employee-head {
    position: relative !important;
    z-index: 100 !important;
  }

  body.af-presensi-shell .afisgo-mobile-menu-panel {
    z-index: 99999 !important;
  }

  /*
   * Bintang terlihat tetapi tidak terlalu ramai.
   */
  body.af-presensi-shell .afisgo-sky-star {
    display: block !important;
    width: 6px !important;
    height: 6px !important;
    opacity: .72;
    animation: afisgoStarTwinkle 3.2s ease-in-out infinite !important;
  }

  body.af-presensi-shell .afisgo-sky-star::before {
    width: 14px !important;
    height: 1.5px !important;
  }

  body.af-presensi-shell .afisgo-sky-star::after {
    width: 1.5px !important;
    height: 14px !important;
  }

  /*
   * Meteor dipaksa tampil di atas kartu.
   */
  body.af-presensi-shell .afisgo-sky-meteor {
    display: block !important;
    z-index: 41 !important;
    width: 130px !important;
    height: 3px !important;
    opacity: 0;
    animation-name: afisgoMeteorVisibleExact !important;
    animation-timing-function: linear !important;
    animation-iteration-count: infinite !important;
  }

  body.af-presensi-shell .meteor-1 {
    top: 18% !important;
    left: -160px !important;
    animation-duration: 7s !important;
    animation-delay: .8s !important;
  }

  body.af-presensi-shell .meteor-2 {
    top: 68% !important;
    left: -160px !important;
    animation-duration: 10s !important;
    animation-delay: 4s !important;
  }
}

@keyframes afisgoMeteorVisibleExact {
  0% {
    opacity: 0;
    transform: rotate(-28deg) translate3d(0,0,0);
  }

  5% {
    opacity: .95;
  }

  25% {
    opacity: .9;
  }

  42% {
    opacity: 0;
    transform: rotate(-28deg) translate3d(850px,0,0);
  }

  100% {
    opacity: 0;
    transform: rotate(-28deg) translate3d(850px,0,0);
  }
}

/*
 * Jangan matikan total efek pada HP yang memakai reduced motion.
 * Gunakan versi lebih lambat.
 */
@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  body.af-presensi-shell .afisgo-sky-star {
    display: block !important;
    animation: afisgoStarTwinkle 6s ease-in-out infinite !important;
  }

  body.af-presensi-shell .afisgo-sky-meteor {
    display: block !important;
    animation-name: afisgoMeteorVisibleExact !important;
    animation-duration: 14s !important;
  }
}

/* AFISGO_MOBILE_SKY_REAL_MOTION_FINAL_V1 */
@media (max-width: 900px) {

  /*
   * Bintang tidak sekadar berkedip,
   * tetapi bergerak perlahan pada arah berbeda.
   */
  body.af-presensi-shell .star-1,
  body.af-presensi-shell .star-4,
  body.af-presensi-shell .star-7,
  body.af-presensi-shell .star-10 {
    animation:
      afisgoStarFloatA 5s ease-in-out infinite !important;
  }

  body.af-presensi-shell .star-2,
  body.af-presensi-shell .star-5,
  body.af-presensi-shell .star-8,
  body.af-presensi-shell .star-11 {
    animation:
      afisgoStarFloatB 6.5s ease-in-out infinite !important;
  }

  body.af-presensi-shell .star-3,
  body.af-presensi-shell .star-6,
  body.af-presensi-shell .star-9,
  body.af-presensi-shell .star-12 {
    animation:
      afisgoStarFloatC 4.5s ease-in-out infinite !important;
  }

  body.af-presensi-shell .star-2  { animation-delay: -1s !important; }
  body.af-presensi-shell .star-3  { animation-delay: -2s !important; }
  body.af-presensi-shell .star-4  { animation-delay: -3s !important; }
  body.af-presensi-shell .star-5  { animation-delay: -4s !important; }
  body.af-presensi-shell .star-6  { animation-delay: -1.5s !important; }
  body.af-presensi-shell .star-7  { animation-delay: -2.5s !important; }
  body.af-presensi-shell .star-8  { animation-delay: -3.5s !important; }
  body.af-presensi-shell .star-9  { animation-delay: -.7s !important; }
  body.af-presensi-shell .star-10 { animation-delay: -1.8s !important; }
  body.af-presensi-shell .star-11 { animation-delay: -2.8s !important; }
  body.af-presensi-shell .star-12 { animation-delay: -3.8s !important; }

  /*
   * Meteor kini boleh dikendalikan keyframe.
   */
  body.af-presensi-shell .afisgo-sky-meteor {
    opacity: 0;
    animation-name: afisgoMeteorRealMotion !important;
    animation-timing-function: linear !important;
    animation-iteration-count: infinite !important;
    will-change: transform, opacity !important;
  }

  body.af-presensi-shell .meteor-1 {
    top: 17% !important;
    left: -170px !important;
    animation-duration: 6s !important;
    animation-delay: .5s !important;
  }

  body.af-presensi-shell .meteor-2 {
    top: 62% !important;
    left: -170px !important;
    animation-duration: 8s !important;
    animation-delay: 2.5s !important;
  }
}

@keyframes afisgoStarFloatA {
  0%,
  100% {
    opacity: .25;
    transform: translate3d(0, 0, 0) scale(.65) rotate(0deg);
  }

  50% {
    opacity: 1;
    transform: translate3d(18px, -14px, 0) scale(1.3) rotate(25deg);
  }
}

@keyframes afisgoStarFloatB {
  0%,
  100% {
    opacity: .3;
    transform: translate3d(0, 0, 0) scale(.7) rotate(0deg);
  }

  50% {
    opacity: 1;
    transform: translate3d(-16px, 17px, 0) scale(1.25) rotate(-22deg);
  }
}

@keyframes afisgoStarFloatC {
  0%,
  100% {
    opacity: .28;
    transform: translate3d(0, 0, 0) scale(.7);
  }

  50% {
    opacity: .95;
    transform: translate3d(8px, -20px, 0) scale(1.35);
  }
}

@keyframes afisgoMeteorRealMotion {
  0% {
    opacity: 0;
    transform: rotate(-28deg) translate3d(0, 0, 0);
  }

  3% {
    opacity: 1;
  }

  32% {
    opacity: 1;
  }

  48% {
    opacity: 0;
    transform: rotate(-28deg) translate3d(850px, 0, 0);
  }

  100% {
    opacity: 0;
    transform: rotate(-28deg) translate3d(850px, 0, 0);
  }
}

/*
 * Pada reduce-motion tetap bergerak, tetapi lebih lambat.
 */
@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  body.af-presensi-shell .afisgo-sky-star {
    animation-duration: 9s !important;
  }

  body.af-presensi-shell .afisgo-sky-meteor {
    display: block !important;
    animation-name: afisgoMeteorRealMotion !important;
    animation-duration: 14s !important;
  }
}

/* AFISGO_METEOR_DIRECTION_DOWN_FINAL_V1 */
@keyframes afisgoMeteorRealMotion {
  0% {
    opacity: 0;
    transform: rotate(28deg) translate3d(0, 0, 0);
  }

  3% {
    opacity: 1;
  }

  32% {
    opacity: 1;
  }

  48% {
    opacity: 0;
    transform: rotate(28deg) translate3d(850px, 0, 0);
  }

  100% {
    opacity: 0;
    transform: rotate(28deg) translate3d(850px, 0, 0);
  }
}

/* AFISGO_SHOOTING_STAR_FINAL_V1 */
@media (max-width: 900px) {

  body.af-presensi-shell .afisgo-sky-meteor {
    width: 72px !important;
    height: 2px !important;
    border-radius: 999px !important;

    background:
      linear-gradient(
        90deg,
        rgba(255,255,255,0),
        rgba(125,211,252,.55),
        rgba(255,255,255,.98)
      ) !important;

    filter:
      drop-shadow(0 0 3px rgba(255,255,255,.95))
      drop-shadow(0 0 7px rgba(56,189,248,.65)) !important;

    animation-name: afisgoShootingStarFall !important;
    animation-timing-function: ease-out !important;
    animation-iteration-count: infinite !important;
    pointer-events: none !important;
  }

  body.af-presensi-shell .afisgo-sky-meteor::after {
    width: 5px !important;
    height: 5px !important;
    right: -1px !important;

    background: #ffffff !important;

    box-shadow:
      0 0 5px rgba(255,255,255,1),
      0 0 10px rgba(56,189,248,.75) !important;
  }

  body.af-presensi-shell .meteor-1 {
    top: 10% !important;
    left: -90px !important;
    animation-duration: 10s !important;
    animation-delay: 1.5s !important;
  }

  body.af-presensi-shell .meteor-2 {
    top: 48% !important;
    left: -110px !important;
    width: 58px !important;
    animation-duration: 13s !important;
    animation-delay: 7s !important;
  }
}

@keyframes afisgoShootingStarFall {
  0% {
    opacity: 0;
    transform: rotate(32deg) translate3d(0,0,0) scale(.85);
  }

  4% {
    opacity: 1;
  }

  14% {
    opacity: .95;
  }

  24% {
    opacity: 0;
    transform: rotate(32deg) translate3d(520px,0,0) scale(1);
  }

  100% {
    opacity: 0;
    transform: rotate(32deg) translate3d(520px,0,0) scale(1);
  }
}

@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  body.af-presensi-shell .afisgo-sky-meteor {
    display: block !important;
    animation-name: afisgoShootingStarFall !important;
    animation-duration: 16s !important;
  }
}

/* AFISGO_SHOOTING_STAR_GOLD_VISIBLE_V1 */
@media (max-width: 900px) {

  body.af-presensi-shell .afisgo-sky-meteor {
    width: 105px !important;
    height: 3px !important;

    background:
      linear-gradient(
        90deg,
        rgba(255,193,7,0) 0%,
        rgba(245,158,11,.28) 28%,
        rgba(251,191,36,.78) 70%,
        rgba(255,255,255,1) 100%
      ) !important;

    filter:
      drop-shadow(0 0 4px rgba(255,255,255,1))
      drop-shadow(0 0 8px rgba(251,191,36,.95))
      drop-shadow(0 0 14px rgba(245,158,11,.70)) !important;
  }

  body.af-presensi-shell .afisgo-sky-meteor::after {
    width: 8px !important;
    height: 8px !important;
    right: -2px !important;

    background: #fffbea !important;

    box-shadow:
      0 0 5px rgba(255,255,255,1),
      0 0 11px rgba(251,191,36,1),
      0 0 18px rgba(245,158,11,.85) !important;
  }

  body.af-presensi-shell .meteor-1 {
    top: 12% !important;
    left: -125px !important;
    animation-duration: 9s !important;
    animation-delay: .8s !important;
  }

  body.af-presensi-shell .meteor-2 {
    top: 53% !important;
    left: -125px !important;
    width: 88px !important;
    animation-duration: 12s !important;
    animation-delay: 5s !important;
  }
}

@keyframes afisgoShootingStarFall {
  0% {
    opacity: 0;
    transform: rotate(32deg) translate3d(0,0,0) scale(.9);
  }

  3% {
    opacity: 1;
  }

  18% {
    opacity: 1;
  }

  34% {
    opacity: .95;
  }

  48% {
    opacity: 0;
    transform: rotate(32deg) translate3d(620px,0,0) scale(1);
  }

  100% {
    opacity: 0;
    transform: rotate(32deg) translate3d(620px,0,0) scale(1);
  }
}

/* AFISGO_MOBILE_SKY_SOFT_PREMIUM_FINAL_V1 */
@media (max-width: 900px) {

  /*
   * Kurangi jumlah bintang terlihat.
   * Sisakan 8 titik agar tidak terlalu ramai.
   */
  body.af-presensi-shell .star-4,
  body.af-presensi-shell .star-6,
  body.af-presensi-shell .star-9,
  body.af-presensi-shell .star-12 {
    display: none !important;
  }

  /*
   * Bintang biru dibuat lebih kecil dan lembut.
   */
  body.af-presensi-shell .afisgo-sky-star {
    width: 4px !important;
    height: 4px !important;

    opacity: .42 !important;

    background: rgba(59,130,246,.82) !important;

    box-shadow:
      0 0 3px rgba(59,130,246,.72),
      0 0 7px rgba(56,189,248,.42) !important;
  }

  body.af-presensi-shell .afisgo-sky-star::before {
    width: 9px !important;
    height: 1px !important;
    background: rgba(59,130,246,.46) !important;
  }

  body.af-presensi-shell .afisgo-sky-star::after {
    width: 1px !important;
    height: 9px !important;
    background: rgba(59,130,246,.46) !important;
  }

  /*
   * Bintang emas juga dibuat lebih lembut.
   */
  body.af-presensi-shell .star-2,
  body.af-presensi-shell .star-5,
  body.af-presensi-shell .star-8,
  body.af-presensi-shell .star-11 {
    background: rgba(245,158,11,.86) !important;

    box-shadow:
      0 0 3px rgba(245,158,11,.72),
      0 0 8px rgba(251,191,36,.40) !important;
  }

  body.af-presensi-shell .star-2::before,
  body.af-presensi-shell .star-2::after,
  body.af-presensi-shell .star-5::before,
  body.af-presensi-shell .star-5::after,
  body.af-presensi-shell .star-8::before,
  body.af-presensi-shell .star-8::after,
  body.af-presensi-shell .star-11::before,
  body.af-presensi-shell .star-11::after {
    background: rgba(245,158,11,.50) !important;
  }

  /*
   * Gerakan bintang diperlambat dan diperkecil.
   */
  body.af-presensi-shell .star-1,
  body.af-presensi-shell .star-7,
  body.af-presensi-shell .star-10 {
    animation:
      afisgoStarSoftA 8s ease-in-out infinite !important;
  }

  body.af-presensi-shell .star-2,
  body.af-presensi-shell .star-5,
  body.af-presensi-shell .star-8,
  body.af-presensi-shell .star-11 {
    animation:
      afisgoStarSoftB 9.5s ease-in-out infinite !important;
  }

  body.af-presensi-shell .star-3 {
    animation:
      afisgoStarSoftC 7.5s ease-in-out infinite !important;
  }

  /*
   * Bintang jatuh kedua dimatikan.
   * Cukup satu bintang jatuh agar lebih elegan.
   */
  body.af-presensi-shell .meteor-2 {
    display: none !important;
  }

  /*
   * Bintang jatuh utama dibuat lebih tipis dan lembut.
   */
  body.af-presensi-shell .meteor-1 {
    display: block !important;
    top: 14% !important;
    left: -115px !important;

    width: 82px !important;
    height: 2px !important;

    animation-name: afisgoShootingStarSoft !important;
    animation-duration: 10s !important;
    animation-delay: 2s !important;
    animation-timing-function: ease-out !important;
    animation-iteration-count: infinite !important;

    background:
      linear-gradient(
        90deg,
        rgba(245,158,11,0) 0%,
        rgba(245,158,11,.18) 35%,
        rgba(251,191,36,.58) 72%,
        rgba(255,255,255,.92) 100%
      ) !important;

    filter:
      drop-shadow(0 0 3px rgba(255,255,255,.70))
      drop-shadow(0 0 6px rgba(245,158,11,.48)) !important;
  }

  body.af-presensi-shell .meteor-1::after {
    width: 5px !important;
    height: 5px !important;
    right: -1px !important;

    background: rgba(255,255,255,.96) !important;

    box-shadow:
      0 0 4px rgba(255,255,255,.82),
      0 0 8px rgba(251,191,36,.58) !important;
  }
}

@keyframes afisgoStarSoftA {
  0%,
  100% {
    opacity: .24;
    transform: translate3d(0,0,0) scale(.82);
  }

  50% {
    opacity: .62;
    transform: translate3d(7px,-6px,0) scale(1.08);
  }
}

@keyframes afisgoStarSoftB {
  0%,
  100% {
    opacity: .22;
    transform: translate3d(0,0,0) scale(.82);
  }

  50% {
    opacity: .58;
    transform: translate3d(-6px,7px,0) scale(1.06);
  }
}

@keyframes afisgoStarSoftC {
  0%,
  100% {
    opacity: .24;
    transform: translate3d(0,0,0) scale(.84);
  }

  50% {
    opacity: .60;
    transform: translate3d(5px,-8px,0) scale(1.08);
  }
}

@keyframes afisgoShootingStarSoft {
  0% {
    opacity: 0;
    transform: rotate(32deg) translate3d(0,0,0) scale(.92);
  }

  4% {
    opacity: .88;
  }

  16% {
    opacity: .82;
  }

  29% {
    opacity: 0;
    transform: rotate(32deg) translate3d(560px,0,0) scale(1);
  }

  100% {
    opacity: 0;
    transform: rotate(32deg) translate3d(560px,0,0) scale(1);
  }
}

/*
 * Pada perangkat reduce-motion, tetap tampil lebih lambat.
 */
@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  body.af-presensi-shell .afisgo-sky-star {
    animation-duration: 12s !important;
  }

  body.af-presensi-shell .meteor-1 {
    display: block !important;
    animation-name: afisgoShootingStarSoft !important;
    animation-duration: 16s !important;
  }
}

/* AFISGO_MOBILE_NAME_ARROW_ANIMATION_V1 */
@media (max-width: 900px) {

  /*
   * Nama guru/pegawai:
   * kilau putih-biru yang lembut, bukan berkedip tajam.
   */
  body.af-presensi-shell .afisgo-mobile-employee-name {
    position: relative !important;
    display: inline-block !important;
    color: #ffffff !important;
    text-shadow:
      0 0 0 rgba(255,255,255,0) !important;

    animation:
      afisgoEmployeeNameGlow 5.5s ease-in-out infinite !important;
  }

  /*
   * Lingkaran panah tombol Ajukan Izin/Cuti.
   */
  body.af-presensi-shell
  .employee-action-card:not(.employee-rekap-action-card)
  .employee-leave-action-arrow {
    animation:
      afisgoActionArrowPulse 2.4s ease-in-out infinite !important;
    transform-origin: center !important;
    will-change: transform, box-shadow !important;
  }

  /*
   * Lingkaran panah tombol Rekap Izin.
   * Delay dibedakan agar tidak bergerak bersamaan.
   */
  body.af-presensi-shell
  .employee-rekap-action-card
  .employee-leave-action-arrow {
    animation:
      afisgoActionArrowPulseSoft 3s ease-in-out infinite !important;
    animation-delay: -1.1s !important;
    transform-origin: center !important;
    will-change: transform, box-shadow !important;
  }
}

@keyframes afisgoEmployeeNameGlow {
  0%,
  68%,
  100% {
    text-shadow:
      0 0 0 rgba(255,255,255,0);
    transform: translate3d(0,0,0);
  }

  76% {
    text-shadow:
      0 0 5px rgba(255,255,255,.55),
      0 0 11px rgba(147,197,253,.38);
    transform: translate3d(1px,0,0);
  }

  84% {
    text-shadow:
      0 0 8px rgba(255,255,255,.82),
      0 0 16px rgba(96,165,250,.48);
    transform: translate3d(0,0,0);
  }

  92% {
    text-shadow:
      0 0 4px rgba(255,255,255,.40),
      0 0 9px rgba(147,197,253,.28);
  }
}

@keyframes afisgoActionArrowPulse {
  0%,
  100% {
    transform: translate3d(0,0,0) scale(1);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.18),
      0 0 0 rgba(255,255,255,0);
  }

  45% {
    transform: translate3d(4px,0,0) scale(1.08);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.26),
      0 0 9px rgba(255,255,255,.28);
  }

  65% {
    transform: translate3d(1px,0,0) scale(1.02);
  }
}

@keyframes afisgoActionArrowPulseSoft {
  0%,
  100% {
    transform: translate3d(0,0,0) scale(1);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.16),
      0 0 0 rgba(255,255,255,0);
  }

  50% {
    transform: translate3d(3px,0,0) scale(1.06);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.22),
      0 0 7px rgba(255,255,255,.22);
  }
}

/*
 * Pada HP dengan pengaturan kurangi animasi,
 * tetap tampil tetapi lebih lambat dan lebih lembut.
 */
@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  body.af-presensi-shell .afisgo-mobile-employee-name {
    animation-duration: 9s !important;
  }

  body.af-presensi-shell .employee-leave-action-arrow {
    animation-duration: 5s !important;
  }
}

/* AFISGO_MOBILE_NAME_ARROW_REAL_MOTION_FINAL_V1 */
@media (max-width: 900px) {

  /*
   * Nama:
   * memakai filter karena text-shadow lama terkunci !important.
   */
  body.af-presensi-shell .afisgo-mobile-employee-name {
    animation:
      afisgoEmployeeNameRealGlow 5s ease-in-out infinite !important;
    will-change: filter !important;
  }

  /*
   * Panah Ajukan Izin:
   * gunakan translate dan scale individual agar tidak bentrok
   * dengan transform dari aturan CSS lama.
   */
  body.af-presensi-shell
  .employee-action-card:not(.employee-rekap-action-card)
  .employee-leave-action-arrow {
    translate: 0 0;
    scale: 1;
    animation:
      afisgoArrowRealMove 1.8s ease-in-out infinite !important;
    will-change: translate, scale, filter !important;
  }

  /*
   * Panah Rekap Izin:
   * ritme berbeda agar tidak bergerak bersamaan.
   */
  body.af-presensi-shell
  .employee-rekap-action-card
  .employee-leave-action-arrow {
    translate: 0 0;
    scale: 1;
    animation:
      afisgoArrowRealMoveSoft 2.4s ease-in-out infinite !important;
    animation-delay: -.8s !important;
    will-change: translate, scale, filter !important;
  }
}

@keyframes afisgoEmployeeNameRealGlow {
  0%,
  62%,
  100% {
    filter:
      drop-shadow(0 0 0 rgba(255,255,255,0));
  }

  72% {
    filter:
      drop-shadow(0 0 3px rgba(255,255,255,.55))
      drop-shadow(0 0 7px rgba(147,197,253,.38));
  }

  82% {
    filter:
      drop-shadow(0 0 5px rgba(255,255,255,.90))
      drop-shadow(0 0 11px rgba(96,165,250,.62));
  }

  92% {
    filter:
      drop-shadow(0 0 2px rgba(255,255,255,.40))
      drop-shadow(0 0 5px rgba(147,197,253,.28));
  }
}

@keyframes afisgoArrowRealMove {
  0%,
  100% {
    translate: 0 0;
    scale: 1;
    filter:
      drop-shadow(0 0 0 rgba(255,255,255,0));
  }

  42% {
    translate: 6px 0;
    scale: 1.12;
    filter:
      drop-shadow(0 0 5px rgba(255,255,255,.55));
  }

  68% {
    translate: 2px 0;
    scale: 1.04;
    filter:
      drop-shadow(0 0 2px rgba(255,255,255,.28));
  }
}

@keyframes afisgoArrowRealMoveSoft {
  0%,
  100% {
    translate: 0 0;
    scale: 1;
    filter:
      drop-shadow(0 0 0 rgba(255,255,255,0));
  }

  50% {
    translate: 5px 0;
    scale: 1.10;
    filter:
      drop-shadow(0 0 4px rgba(255,255,255,.46));
  }
}

/*
 * Tetap bergerak pada perangkat yang mengaktifkan reduce motion,
 * tetapi lebih lambat.
 */
@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  body.af-presensi-shell .afisgo-mobile-employee-name {
    animation:
      afisgoEmployeeNameRealGlow 8s ease-in-out infinite !important;
  }

  body.af-presensi-shell
  .employee-action-card:not(.employee-rekap-action-card)
  .employee-leave-action-arrow {
    animation:
      afisgoArrowRealMove 3.8s ease-in-out infinite !important;
  }

  body.af-presensi-shell
  .employee-rekap-action-card
  .employee-leave-action-arrow {
    animation:
      afisgoArrowRealMoveSoft 4.5s ease-in-out infinite !important;
  }
}

/* AFISGO_MOBILE_NAME_BUTTON_SHOOTING_STAR_V1 */
@media (max-width: 900px) {

  /*
   * Area teks header dibuat siap untuk efek lokal.
   */
  body.af-presensi-shell .afisgo-mobile-employee-text {
    position: relative !important;
    overflow: visible !important;
    isolation: isolate !important;
  }

  /*
   * Bintang jatuh kecil di kanan nama user.
   */
  body.af-presensi-shell .afisgo-mobile-employee-text::after {
    content: "" !important;
    position: absolute !important;
    right: 2px !important;
    top: 16px !important;
    width: 54px !important;
    height: 2px !important;
    pointer-events: none !important;
    z-index: 3 !important;
    opacity: 0 !important;
    border-radius: 999px !important;

    background:
      linear-gradient(
        90deg,
        rgba(245,158,11,0) 0%,
        rgba(245,158,11,.18) 30%,
        rgba(251,191,36,.65) 72%,
        rgba(255,255,255,.98) 100%
      ) !important;

    transform: rotate(28deg) translate3d(0,0,0) scale(.95) !important;

    filter:
      drop-shadow(0 0 3px rgba(255,255,255,.78))
      drop-shadow(0 0 6px rgba(251,191,36,.52)) !important;

    animation:
      afisgoMiniShootName 7.5s ease-out infinite !important;
  }

  body.af-presensi-shell .afisgo-mobile-employee-text::before {
    content: "" !important;
    position: absolute !important;
    right: 8px !important;
    top: 14px !important;
    width: 7px !important;
    height: 7px !important;
    border-radius: 999px !important;
    pointer-events: none !important;
    opacity: 0 !important;
    z-index: 4 !important;
    background: rgba(255,255,255,.96) !important;
    box-shadow:
      0 0 5px rgba(255,255,255,.82),
      0 0 10px rgba(251,191,36,.52) !important;

    animation:
      afisgoMiniSparkName 7.5s ease-out infinite !important;
  }

  /*
   * Tombol Ajukan Izin / Cuti dan Rekap Izin:
   * efek kilau kecil dekat sisi kanan tombol.
   */
  body.af-presensi-shell .employee-leave-action-btn {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate !important;
  }

  body.af-presensi-shell .employee-leave-action-btn::after {
    content: "" !important;
    position: absolute !important;
    right: 18px !important;
    top: 50% !important;
    width: 44px !important;
    height: 2px !important;
    pointer-events: none !important;
    z-index: 2 !important;
    opacity: 0 !important;
    border-radius: 999px !important;

    background:
      linear-gradient(
        90deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,.18) 28%,
        rgba(191,219,254,.48) 60%,
        rgba(255,255,255,.95) 100%
      ) !important;

    transform:
      translate3d(0,-50%,0)
      rotate(-18deg)
      scale(.95) !important;

    filter:
      drop-shadow(0 0 3px rgba(255,255,255,.42))
      drop-shadow(0 0 6px rgba(147,197,253,.30)) !important;

    animation:
      afisgoMiniShootButton 6.2s ease-out infinite !important;
  }

  /*
   * Rekap Izin diberi delay berbeda supaya tidak serempak.
   */
  body.af-presensi-shell .employee-rekap-action-btn::after {
    animation-delay: 1.8s !important;
  }

  /*
   * Tambahan cahaya halus di lingkaran panah tombol.
   */
  body.af-presensi-shell .employee-leave-action-arrow {
    position: relative !important;
    z-index: 3 !important;
  }

  body.af-presensi-shell .employee-leave-action-arrow::after {
    content: "" !important;
    position: absolute !important;
    inset: -2px !important;
    border-radius: 999px !important;
    pointer-events: none !important;
    opacity: 0 !important;
    background:
      radial-gradient(
        circle,
        rgba(255,255,255,.35) 0%,
        rgba(255,255,255,.12) 45%,
        rgba(255,255,255,0) 78%
      ) !important;

    animation:
      afisgoArrowHalo 2.8s ease-in-out infinite !important;
  }

  body.af-presensi-shell .employee-rekap-action-btn .employee-leave-action-arrow::after {
    animation-delay: .9s !important;
  }
}

@keyframes afisgoMiniShootName {
  0%,
  58%,
  100% {
    opacity: 0;
    transform: rotate(28deg) translate3d(0,0,0) scale(.95);
  }

  61% {
    opacity: .92;
  }

  74% {
    opacity: .80;
    transform: rotate(28deg) translate3d(34px,0,0) scale(1);
  }

  82% {
    opacity: 0;
    transform: rotate(28deg) translate3d(50px,0,0) scale(1);
  }
}

@keyframes afisgoMiniSparkName {
  0%,
  58%,
  100% {
    opacity: 0;
    transform: scale(.7);
  }

  63% {
    opacity: .92;
    transform: scale(1.08);
  }

  72% {
    opacity: .50;
    transform: scale(.92);
  }

  80% {
    opacity: 0;
    transform: scale(.7);
  }
}

@keyframes afisgoMiniShootButton {
  0%,
  66%,
  100% {
    opacity: 0;
    transform:
      translate3d(0,-50%,0)
      rotate(-18deg)
      scale(.95);
  }

  70% {
    opacity: .88;
  }

  82% {
    opacity: .76;
    transform:
      translate3d(24px,-50%,0)
      rotate(-18deg)
      scale(1);
  }

  90% {
    opacity: 0;
    transform:
      translate3d(38px,-50%,0)
      rotate(-18deg)
      scale(1);
  }
}

@keyframes afisgoArrowHalo {
  0%,
  100% {
    opacity: 0;
    transform: scale(.88);
  }

  42% {
    opacity: .42;
    transform: scale(1.12);
  }

  58% {
    opacity: .18;
    transform: scale(1.02);
  }
}

/*
 * Jika perangkat reduce-motion aktif,
 * efek tetap ada tapi lebih lambat.
 */
@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  body.af-presensi-shell .afisgo-mobile-employee-text::after,
  body.af-presensi-shell .afisgo-mobile-employee-text::before {
    animation-duration: 10s !important;
  }

  body.af-presensi-shell .employee-leave-action-btn::after {
    animation-duration: 9s !important;
  }

  body.af-presensi-shell .employee-leave-action-arrow::after {
    animation-duration: 4.5s !important;
  }
}

/* AFISGO_REAL_LOCAL_SPARK_ELEMENTS_STYLE_V1 */
@media (max-width: 900px) {

  /*
   * Efek kanan nama.
   */
  body.af-presensi-shell .afisgo-mobile-employee-name-wrap {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  body.af-presensi-shell .afisgo-mobile-employee-name {
    flex: 0 1 auto !important;
    width: auto !important;
    max-width: calc(100% - 50px) !important;
    min-width: 0 !important;
  }

  body.af-presensi-shell .afisgo-name-shooting-star {
    position: absolute !important;
    top: 50% !important;
    left: min(145px, calc(100% - 48px)) !important;

    display: block !important;
    width: 42px !important;
    height: 2px !important;

    opacity: 0;
    pointer-events: none !important;
    z-index: 8 !important;
    border-radius: 999px !important;

    background:
      linear-gradient(
        90deg,
        rgba(245,158,11,0) 0%,
        rgba(251,191,36,.38) 45%,
        rgba(255,255,255,.96) 100%
      ) !important;

    filter:
      drop-shadow(0 0 3px rgba(255,255,255,.85))
      drop-shadow(0 0 7px rgba(251,191,36,.70)) !important;

    animation:
      afisgoNameRealShootingStar 5.8s ease-out infinite !important;
  }

  body.af-presensi-shell .afisgo-name-shooting-star-head {
    position: absolute !important;
    right: -2px !important;
    top: 50% !important;

    display: block !important;
    width: 7px !important;
    height: 7px !important;

    transform: translateY(-50%) !important;
    border-radius: 999px !important;
    background: #fffdf2 !important;

    box-shadow:
      0 0 5px rgba(255,255,255,.95),
      0 0 11px rgba(251,191,36,.80) !important;
  }

  /*
   * Tombol menjadi wadah efek.
   */
  body.af-presensi-shell .employee-leave-action-btn {
    position: relative !important;
    overflow: hidden !important;
  }

  body.af-presensi-shell .afisgo-button-shooting-star {
    position: absolute !important;
    top: 50% !important;
    right: 35px !important;

    display: block !important;
    width: 54px !important;
    height: 2px !important;

    opacity: 0;
    pointer-events: none !important;
    z-index: 4 !important;
    border-radius: 999px !important;

    background:
      linear-gradient(
        90deg,
        rgba(255,255,255,0) 0%,
        rgba(191,219,254,.42) 45%,
        rgba(255,255,255,.98) 100%
      ) !important;

    filter:
      drop-shadow(0 0 3px rgba(255,255,255,.72))
      drop-shadow(0 0 7px rgba(147,197,253,.48)) !important;

    animation:
      afisgoButtonRealShootingStar 4.8s ease-out infinite !important;
  }

  body.af-presensi-shell .afisgo-button-shooting-star-rekap {
    animation-delay: 1.5s !important;
  }

  body.af-presensi-shell .afisgo-button-shooting-star-head {
    position: absolute !important;
    right: -2px !important;
    top: 50% !important;

    display: block !important;
    width: 6px !important;
    height: 6px !important;

    transform: translateY(-50%) !important;
    border-radius: 999px !important;
    background: #ffffff !important;

    box-shadow:
      0 0 5px rgba(255,255,255,.92),
      0 0 9px rgba(191,219,254,.65) !important;
  }
}

@keyframes afisgoNameRealShootingStar {
  0%,
  55%,
  100% {
    opacity: 0;
    translate: -18px -8px;
    rotate: 24deg;
    scale: .85;
  }

  59% {
    opacity: .95;
  }

  73% {
    opacity: .90;
    translate: 10px 5px;
    rotate: 24deg;
    scale: 1;
  }

  82% {
    opacity: 0;
    translate: 28px 14px;
    rotate: 24deg;
    scale: 1;
  }
}

@keyframes afisgoButtonRealShootingStar {
  0%,
  58%,
  100% {
    opacity: 0;
    translate: -34px -7px;
    rotate: 18deg;
    scale: .88;
  }

  63% {
    opacity: .92;
  }

  78% {
    opacity: .86;
    translate: -4px 3px;
    rotate: 18deg;
    scale: 1;
  }

  88% {
    opacity: 0;
    translate: 18px 12px;
    rotate: 18deg;
    scale: 1;
  }
}

@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  body.af-presensi-shell .afisgo-name-shooting-star {
    animation-duration: 9s !important;
  }

  body.af-presensi-shell .afisgo-button-shooting-star {
    animation-duration: 8s !important;
  }
}

/* AFISGO_MOBILE_LOCAL_LIGHTNING_FINAL_V1 */
@media (max-width: 900px) {

  /*
   * Nama tetap stabil:
   * matikan semua glow, filter, dan gerakan lama.
   */
  body.af-presensi-shell .afisgo-mobile-employee-name {
    animation: none !important;
    filter: none !important;
    transform: none !important;
    text-shadow: none !important;
  }

  /*
   * Efek kanan nama:
   * elemen lama dipakai ulang sebagai kilat kecil.
   */
  body.af-presensi-shell .afisgo-name-shooting-star {
    position: absolute !important;
    top: 50% !important;
    left: min(148px, calc(100% - 34px)) !important;

    display: block !important;
    width: 18px !important;
    height: 30px !important;

    border-radius: 0 !important;
    opacity: 0;
    overflow: visible !important;
    pointer-events: none !important;
    z-index: 8 !important;

    background:
      linear-gradient(
        180deg,
        #ffffff 0%,
        #fde68a 38%,
        #f59e0b 100%
      ) !important;

    clip-path:
      polygon(
        56% 0%,
        18% 49%,
        47% 49%,
        30% 100%,
        87% 38%,
        58% 38%
      ) !important;

    filter:
      drop-shadow(0 0 3px rgba(255,255,255,.95))
      drop-shadow(0 0 7px rgba(251,191,36,.90))
      drop-shadow(0 0 11px rgba(245,158,11,.55)) !important;

    animation:
      afisgoNameLightningFlash 5.8s ease-in-out infinite !important;
  }

  /*
   * Kepala bintang lama dijadikan percikan kecil.
   */
  body.af-presensi-shell .afisgo-name-shooting-star-head {
    position: absolute !important;
    right: -8px !important;
    top: 5px !important;

    display: block !important;
    width: 6px !important;
    height: 6px !important;

    border-radius: 999px !important;
    background: #ffffff !important;

    transform: none !important;

    box-shadow:
      0 0 4px rgba(255,255,255,1),
      0 0 9px rgba(251,191,36,.92) !important;

    animation:
      afisgoNameLightningSpark 5.8s ease-in-out infinite !important;
  }

  /*
   * Efek tombol:
   * ubah garis bintang menjadi kilat pendek dekat panah.
   */
  body.af-presensi-shell .afisgo-button-shooting-star {
    position: absolute !important;
    top: 50% !important;
    right: 42px !important;

    display: block !important;
    width: 13px !important;
    height: 23px !important;

    border-radius: 0 !important;
    opacity: 0;
    overflow: visible !important;
    pointer-events: none !important;
    z-index: 6 !important;

    background:
      linear-gradient(
        180deg,
        #ffffff 0%,
        #dbeafe 42%,
        #60a5fa 100%
      ) !important;

    clip-path:
      polygon(
        58% 0%,
        20% 48%,
        48% 48%,
        31% 100%,
        88% 37%,
        59% 37%
      ) !important;

    filter:
      drop-shadow(0 0 3px rgba(255,255,255,.95))
      drop-shadow(0 0 7px rgba(147,197,253,.82)) !important;

    animation:
      afisgoButtonLightningFlash 4.6s ease-in-out infinite !important;
  }

  /*
   * Tombol Rekap menyala tidak bersamaan.
   */
  body.af-presensi-shell .afisgo-button-shooting-star-rekap {
    animation-delay: 1.5s !important;
  }

  body.af-presensi-shell .afisgo-button-shooting-star-head {
    position: absolute !important;
    right: -6px !important;
    top: 4px !important;

    display: block !important;
    width: 5px !important;
    height: 5px !important;

    border-radius: 999px !important;
    background: #ffffff !important;
    transform: none !important;

    box-shadow:
      0 0 4px rgba(255,255,255,.95),
      0 0 8px rgba(147,197,253,.75) !important;
  }
}

/*
 * Kilat di kanan nama:
 * muncul cepat, berkedip dua kali, lalu menghilang.
 */
@keyframes afisgoNameLightningFlash {
  0%,
  62%,
  100% {
    opacity: 0;
    scale: .70;
    rotate: -8deg;
  }

  65% {
    opacity: 1;
    scale: 1.10;
    rotate: -3deg;
  }

  68% {
    opacity: .20;
    scale: .92;
  }

  71% {
    opacity: .96;
    scale: 1;
    rotate: 3deg;
  }

  78% {
    opacity: 0;
    scale: .78;
    rotate: 6deg;
  }
}

@keyframes afisgoNameLightningSpark {
  0%,
  63%,
  100% {
    opacity: 0;
    scale: .50;
  }

  66% {
    opacity: 1;
    scale: 1.25;
  }

  70% {
    opacity: .25;
    scale: .80;
  }

  73% {
    opacity: .90;
    scale: 1;
  }

  78% {
    opacity: 0;
    scale: .50;
  }
}

/*
 * Kilat tombol:
 * muncul singkat dekat panah tanpa menutupi teks.
 */
@keyframes afisgoButtonLightningFlash {
  0%,
  67%,
  100% {
    opacity: 0;
    scale: .65;
    rotate: -6deg;
  }

  70% {
    opacity: .95;
    scale: 1.12;
    rotate: 0deg;
  }

  74% {
    opacity: .20;
    scale: .88;
  }

  77% {
    opacity: .82;
    scale: 1;
    rotate: 4deg;
  }

  84% {
    opacity: 0;
    scale: .70;
  }
}

/*
 * Pada perangkat reduce-motion,
 * tetap tampil tetapi lebih jarang.
 */
@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  body.af-presensi-shell .afisgo-mobile-employee-name {
    animation: none !important;
  }

  body.af-presensi-shell .afisgo-name-shooting-star,
  body.af-presensi-shell .afisgo-name-shooting-star-head {
    animation-duration: 9s !important;
  }

  body.af-presensi-shell .afisgo-button-shooting-star {
    animation-duration: 8s !important;
  }
}

/* AFISGO_MOBILE_LOGIN_SHINE_EFFECT_FINAL_V1 */
@media (max-width: 900px) {

  /*
   * Nama tetap stabil tanpa glow lama.
   */
  body.af-presensi-shell .afisgo-mobile-employee-name {
    animation: none !important;
    filter: none !important;
    transform: none !important;
    text-shadow: none !important;
  }

  /*
   * Wadah nama siap menerima cahaya menyapu.
   */
  body.af-presensi-shell .afisgo-mobile-employee-name-wrap {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate !important;
    border-radius: 7px !important;
  }

  body.af-presensi-shell .afisgo-mobile-employee-name {
    position: relative !important;
    z-index: 3 !important;
  }

  /*
   * Elemen kilat lama diubah menjadi cahaya menyapu,
   * sama seperti animasi tombol Login.
   */
  body.af-presensi-shell .afisgo-name-shooting-star {
    position: absolute !important;
    top: -25% !important;
    left: -55% !important;
    right: auto !important;

    display: block !important;
    width: 42% !important;
    height: 150% !important;

    opacity: 0;
    border-radius: 0 !important;
    clip-path: none !important;
    pointer-events: none !important;
    z-index: 2 !important;

    background:
      linear-gradient(
        90deg,
        transparent 0%,
        rgba(255,255,255,.08) 20%,
        rgba(255,255,255,.58) 50%,
        rgba(253,230,138,.32) 64%,
        transparent 100%
      ) !important;

    box-shadow: none !important;
    filter: none !important;

    transform: skewX(-18deg) !important;

    animation:
      afisgoNameLoginShine 4.8s ease-in-out infinite !important;
  }

  /*
   * Kepala bintang/kilat lama tidak dibutuhkan.
   */
  body.af-presensi-shell .afisgo-name-shooting-star-head {
    display: none !important;
    animation: none !important;
  }

  /*
   * Tombol tetap menjadi wadah cahaya.
   */
  body.af-presensi-shell .employee-leave-action-btn,
  body.af-presensi-shell .employee-rekap-action-btn {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate !important;
  }

  /*
   * Pastikan isi tombol berada di atas cahaya.
   */
  body.af-presensi-shell .employee-leave-action-icon,
  body.af-presensi-shell .employee-leave-action-text,
  body.af-presensi-shell .employee-leave-action-arrow {
    position: relative !important;
    z-index: 5 !important;
  }

  /*
   * Elemen efek nyata menjadi garis cahaya lebar
   * seperti tombol Login.
   */
  body.af-presensi-shell .afisgo-button-shooting-star {
    position: absolute !important;
    top: -30% !important;
    left: -60% !important;
    right: auto !important;

    display: block !important;
    width: 48% !important;
    height: 160% !important;

    opacity: 0;
    border-radius: 0 !important;
    clip-path: none !important;
    pointer-events: none !important;
    z-index: 2 !important;

    background:
      linear-gradient(
        90deg,
        transparent 0%,
        rgba(255,255,255,.06) 20%,
        rgba(255,255,255,.46) 50%,
        rgba(255,255,255,.10) 72%,
        transparent 100%
      ) !important;

    box-shadow: none !important;
    filter: none !important;

    transform: skewX(-18deg) !important;

    animation:
      afisgoButtonLoginShine 3.8s ease-in-out infinite !important;
  }

  /*
   * Rekap Izin dibuat tidak menyapu bersamaan.
   */
  body.af-presensi-shell .afisgo-button-shooting-star-rekap {
    animation-delay: 1.4s !important;

    background:
      linear-gradient(
        90deg,
        transparent 0%,
        rgba(255,255,255,.05) 20%,
        rgba(209,250,229,.48) 50%,
        rgba(255,255,255,.10) 72%,
        transparent 100%
      ) !important;
  }

  body.af-presensi-shell .afisgo-button-shooting-star-head {
    display: none !important;
    animation: none !important;
  }
}

/*
 * Cahaya menyapu pendek pada nama.
 */
@keyframes afisgoNameLoginShine {
  0%,
  15% {
    left: -55%;
    opacity: 0;
  }

  28% {
    opacity: .82;
  }

  52% {
    left: 118%;
    opacity: 0;
  }

  100% {
    left: 118%;
    opacity: 0;
  }
}

/*
 * Cahaya menyapu tombol seperti tombol Login.
 */
@keyframes afisgoButtonLoginShine {
  0%,
  12% {
    left: -60%;
    opacity: 0;
  }

  30% {
    opacity: .82;
  }

  62% {
    left: 125%;
    opacity: 0;
  }

  100% {
    left: 125%;
    opacity: 0;
  }
}

/*
 * Pada HP yang mengurangi animasi,
 * efek tetap berjalan tetapi lebih lambat.
 */
@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  body.af-presensi-shell .afisgo-name-shooting-star {
    display: block !important;
    animation:
      afisgoNameLoginShine 8s ease-in-out infinite !important;
  }

  body.af-presensi-shell .afisgo-button-shooting-star {
    display: block !important;
    animation:
      afisgoButtonLoginShine 7s ease-in-out infinite !important;
  }
}

/* AFISGO_MOBILE_LOGIN_SHINE_TRANSLATE_FIX_V1 */
@media (max-width: 900px) {

  /*
   * Posisi awal tetap di kiri.
   * Pergerakan dikendalikan oleh translate,
   * bukan left yang sebelumnya terkunci !important.
   */
  body.af-presensi-shell .afisgo-name-shooting-star {
    left: -55% !important;
    opacity: 0;
    translate: 0 0;
    animation:
      afisgoNameShineTranslate 4.8s ease-in-out infinite !important;
    will-change: translate, opacity !important;
  }

  body.af-presensi-shell .afisgo-button-shooting-star {
    left: -60% !important;
    opacity: 0;
    translate: 0 0;
    animation:
      afisgoButtonShineTranslate 3.8s ease-in-out infinite !important;
    will-change: translate, opacity !important;
  }

  body.af-presensi-shell .afisgo-button-shooting-star-rekap {
    animation-delay: 1.4s !important;
  }
}

@keyframes afisgoNameShineTranslate {
  0%,
  12% {
    opacity: 0;
    translate: 0 0;
  }

  25% {
    opacity: .90;
  }

  55% {
    opacity: .55;
    translate: 420% 0;
  }

  68% {
    opacity: 0;
    translate: 480% 0;
  }

  100% {
    opacity: 0;
    translate: 480% 0;
  }
}

@keyframes afisgoButtonShineTranslate {
  0%,
  10% {
    opacity: 0;
    translate: 0 0;
  }

  26% {
    opacity: .88;
  }

  58% {
    opacity: .62;
    translate: 390% 0;
  }

  70% {
    opacity: 0;
    translate: 440% 0;
  }

  100% {
    opacity: 0;
    translate: 440% 0;
  }
}

@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  body.af-presensi-shell .afisgo-name-shooting-star {
    animation:
      afisgoNameShineTranslate 8s ease-in-out infinite !important;
  }

  body.af-presensi-shell .afisgo-button-shooting-star {
    animation:
      afisgoButtonShineTranslate 7s ease-in-out infinite !important;
  }
}

/* AFISGO_MOBILE_NAME_SHINE_WIDE_FINAL_V1 */
@media (max-width: 900px) {

  /*
   * Area nama dibuat selebar kolom teks header.
   */
  body.af-presensi-shell .afisgo-mobile-employee-name-wrap {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    position: relative !important;
  }

  /*
   * Cahaya dibuat lebih lebar dan tinggi,
   * sehingga terasa seperti efek tombol Login.
   */
  body.af-presensi-shell .afisgo-name-shooting-star {
    top: -40% !important;
    left: -65% !important;

    width: 72% !important;
    height: 190% !important;

    background:
      linear-gradient(
        90deg,
        transparent 0%,
        rgba(255,255,255,.05) 18%,
        rgba(255,255,255,.48) 44%,
        rgba(253,230,138,.36) 56%,
        rgba(255,255,255,.14) 70%,
        transparent 100%
      ) !important;

    animation:
      afisgoNameShineWide 4.8s ease-in-out infinite !important;
  }
}

@keyframes afisgoNameShineWide {
  0%,
  12% {
    opacity: 0;
    translate: 0 0;
  }

  24% {
    opacity: .88;
  }

  54% {
    opacity: .72;
    translate: 240% 0;
  }

  68% {
    opacity: 0;
    translate: 290% 0;
  }

  100% {
    opacity: 0;
    translate: 290% 0;
  }
}

@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  body.af-presensi-shell .afisgo-name-shooting-star {
    animation:
      afisgoNameShineWide 8s ease-in-out infinite !important;
  }
}

/* AFISGO_HEADER_FULL_SHINE_STYLE_V1 */
@media (max-width: 900px) {

  /*
   * Header biru menjadi wadah utama cahaya.
   */
  body.af-presensi-shell .afisgo-mobile-employee-brand {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate !important;
  }

  /*
   * Logo, teks, dan tombol hamburger tetap di atas cahaya.
   */
  body.af-presensi-shell .afisgo-mobile-employee-mark,
  body.af-presensi-shell .afisgo-mobile-employee-text,
  body.af-presensi-shell .afisgo-mobile-menu-toggle {
    position: relative !important;
    z-index: 5 !important;
  }

  /*
   * Cahaya menyapu seluruh header biru.
   */
  body.af-presensi-shell
  .afisgo-mobile-employee-brand
  > .afisgo-name-shooting-star {
    position: absolute !important;
    top: -40% !important;
    left: -55% !important;
    right: auto !important;

    display: block !important;
    width: 38% !important;
    height: 190% !important;

    opacity: 0;
    border-radius: 0 !important;
    clip-path: none !important;
    pointer-events: none !important;
    z-index: 2 !important;

    background:
      linear-gradient(
        90deg,
        transparent 0%,
        rgba(255,255,255,.04) 18%,
        rgba(255,255,255,.18) 36%,
        rgba(255,255,255,.60) 50%,
        rgba(253,230,138,.30) 61%,
        rgba(255,255,255,.10) 74%,
        transparent 100%
      ) !important;

    box-shadow: none !important;
    filter: none !important;
    transform: skewX(-18deg) !important;

    animation:
      afisgoHeaderFullShine 4.8s ease-in-out infinite !important;

    will-change: translate, opacity !important;
  }

  body.af-presensi-shell
  .afisgo-mobile-employee-brand
  > .afisgo-name-shooting-star
  .afisgo-name-shooting-star-head {
    display: none !important;
  }

  /*
   * Nama tetap stabil.
   */
  body.af-presensi-shell .afisgo-mobile-employee-name {
    animation: none !important;
    filter: none !important;
    transform: none !important;
    text-shadow: none !important;
  }
}

@keyframes afisgoHeaderFullShine {
  0%,
  12% {
    opacity: 0;
    translate: 0 0;
  }

  25% {
    opacity: .88;
  }

  56% {
    opacity: .65;
    translate: 410% 0;
  }

  68% {
    opacity: 0;
    translate: 470% 0;
  }

  100% {
    opacity: 0;
    translate: 470% 0;
  }
}

@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  body.af-presensi-shell
  .afisgo-mobile-employee-brand
  > .afisgo-name-shooting-star {
    animation:
      afisgoHeaderFullShine 8s ease-in-out infinite !important;
  }
}

/* =========================================================
   AFISGO_PRESENSI_APPROVER_MOBILE_CSS_V13
   Cleanup dashboard HP Kepala Sekolah dan Wadir.
   Desktop, Super Admin, guru, dan pegawai tidak berubah.
   ========================================================= */

@media (max-width: 900px) {

  /*
   * Hide link navigasi yang tidak diperlukan pada HP approver.
   */
  body.af-presensi-approver
  aside.approver-mobile-aside
  .af-approver-mobile-hide-v13 {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /*
   * Dua KPI teknis tidak diperlukan untuk pemantauan harian
   * Kepala Sekolah dan Wadir.
   */
  body.af-presensi-approver
  .kpi-card.af-approver-mobile-technical-v13 {
    display: none !important;
  }

  /*
   * Empat KPI operasional tersisa dibuat tetap dua kolom.
   */
  body.af-presensi-approver .kpi-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  /*
   * Rekap Harian sudah tersedia melalui tombol besar
   * Buka Rekap Harian. Pengajuan izin pribadi dibahas terpisah.
   */
  body.af-presensi-approver
  .quick-action-card.af-approver-mobile-hide-v13 {
    display: none !important;
  }

  /*
   * Konten informatif panjang tidak diperlukan pada dashboard
   * operasional HP approver.
   */
  body.af-presensi-approver .about-presensi-section,
  body.af-presensi-approver .features-section,
  body.af-presensi-approver .workflow-section,
  body.af-presensi-approver .integration-section,
  body.af-presensi-approver .dashboard-footer {
    display: none !important;
  }

  /*
   * Dashboard diakhiri lebih ringkas setelah kartu operasional.
   */
  body.af-presensi-approver .dashboard-landing {
    padding-bottom: 26px !important;
  }
}