/* Override/tambahan KHUSUS sub-app di atas css/pinix-shell.css (base shared, di-load semua subdomain via css/main-style.php).
   Jangan copy ulang rule yang sudah ada di css/pinix-shell.css ke sini -- base sudah otomatis ke-load untuk semua subdomain.
   Taruh di sini HANYA rule yang genuinely beda/khusus untuk subdomain app. */
.login-brand .bird{width:60px;height:60px;background:transparent;border:none;box-shadow:none;flex:0 0 60px;padding:0;border-radius:0;transform:translateY(-1px);}
.login-brand .bird img{width:100%;height:100%;display:block;object-fit:contain;}
.login-brand-copy{display:flex;flex-direction:column;line-height:1;justify-content:center;transform:translateY(1px);}
.login-brand-copy span{font-size:9px;font-weight:700;letter-spacing:.04em;color:var(--faint);margin-top:6px;line-height:1.4;}
.login-actions{padding:4px 20px 20px;}
.login-actions .btn{width:100%;min-height:42px;height:auto;padding:10px 16px;border-radius:10px;box-shadow:0 10px 18px -10px color-mix(in srgb,var(--primary) 60%,transparent);}
.login-actions .btn span{line-height:1;}
.login-support{padding:0 20px 20px;display:flex;flex-direction:column;gap:12px;}
.login-support .btn,
.login-support a.btn,
.login-support .linknav-lupa-pswd{
  width:100%;
  min-height:40px;
  padding:9px 14px;
  border-radius:10px;
  box-shadow:none;
  justify-content:center;
}
.login-support .btn,
.login-support a.btn{border-color:var(--border)!important;}
.login-support .linknav-lupa-pswd{background:var(--surface-2);color:var(--heading);}
.login-support .linknav-lupa-pswd i{font-size:12px;color:var(--primary);}
.login-support .btn:hover,
.login-support a.btn:hover,
.login-support .linknav-lupa-pswd:hover{background:var(--surface-3);border-color:var(--border-strong)!important;color:var(--heading);}
.login-foot{padding:0 2px;text-align:center;display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;}
.login-foot a{font-size:11.5px;font-weight:600;color:var(--muted);text-decoration:none;}
.login-foot a:hover{color:var(--primary);text-decoration:underline;}
/* ===== LEGAL PAGES ===== */
.legal-shell{padding:32px 18px 42px;}
.legal-panel{max-width:760px;border-radius:18px!important;}
.legal-panel .login-head p{max-width:640px;}
.legal-hero{display:flex;align-items:flex-start;gap:14px;padding:18px 20px 6px;}
.legal-hero .legal-mark{width:48px;height:48px;border-radius:14px;background:color-mix(in srgb,var(--primary) 12%,transparent);color:var(--primary);display:flex;align-items:center;justify-content:center;flex:0 0 48px;font-size:18px;}
.legal-hero .legal-meta{flex:1;min-width:0;}
.legal-hero .legal-meta b{display:block;font-size:16px;font-weight:800;color:var(--heading);line-height:1.25;}
.legal-hero .legal-meta span{display:block;margin-top:4px;font-size:12px;color:var(--muted);line-height:1.5;}
.legal-body{padding-top:8px!important;}
.legal-stack{display:flex;flex-direction:column;gap:12px;padding:0 20px 8px;}
.legal-section{border:1px solid var(--border);border-radius:12px;background:var(--surface-2);padding:14px 14px 13px;}
.legal-section.spaced{margin:0 20px 14px;}
.legal-section h2,.legal-section h3{margin:0;color:var(--heading);line-height:1.35;}
.legal-section h2{font-size:15px;font-weight:800;}
.legal-section h3{font-size:13px;font-weight:800;margin-bottom:8px;}
.legal-section p{margin:0;color:var(--text);font-size:12.5px;line-height:1.65;}
.legal-section ul{margin:8px 0 0 18px;padding:0;color:var(--text);font-size:12.5px;line-height:1.65;}
.legal-section li{margin:0 0 5px;}
.legal-note{padding:0 20px 20px;}
.legal-note .note-box{border:1px solid var(--border);border-radius:12px;background:var(--surface);padding:12px 14px;font-size:12.5px;line-height:1.6;color:var(--muted);}
.legal-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;padding:0 20px 14px;}
.legal-contact{border:1px solid var(--border);border-radius:12px;background:var(--surface-2);padding:14px;display:flex;gap:12px;align-items:flex-start;}
.legal-contact .ic{width:38px;height:38px;border-radius:11px;flex:0 0 38px;display:flex;align-items:center;justify-content:center;font-size:15px;color:var(--primary);background:color-mix(in srgb,var(--primary) 12%,transparent);}
.legal-contact .tx{min-width:0;flex:1;}
.legal-contact .tx b{display:block;font-size:13px;font-weight:800;color:var(--heading);margin-bottom:4px;}
.legal-contact .tx span,.legal-contact .tx a{display:block;font-size:12.5px;line-height:1.55;color:var(--text);text-decoration:none;word-break:break-word;}
.legal-contact .tx a:hover{color:var(--primary);text-decoration:underline;}
.legal-cta{padding:0 20px 20px;display:flex;gap:10px;flex-wrap:wrap;}
.legal-cta .btn{flex:1;min-width:180px;}
.legal-foot{padding:0 20px 20px;text-align:center;color:var(--faint);font-size:11.5px;line-height:1.5;}
.legal-foot a{color:var(--primary);text-decoration:none;font-weight:600;}
.legal-foot a:hover{text-decoration:underline;}
@media(max-width:460px){
  .stats{grid-template-columns:1fr 1fr;gap:10px;}
  .stat{padding:11px 12px;}
  .ph-actions .btn span{display:none;}
  .legal-grid{grid-template-columns:1fr;}
  .legal-cta .btn{min-width:0;}
  .legal-hero{padding:16px 18px 4px;}
}
/* ===== MERGED FROM pinix-shell.css (latest additions) ===== */
.sb-foot-title{font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--sb-label);padding:0 10px 8px;}
.sb-foot .nav-item:last-child{margin-bottom:0;}
.dr-body .ec{border:1px solid var(--border);border-radius:11px;background:var(--surface-2);margin-bottom:10px;}
.dr-body .ec:last-child{margin-bottom:0;}

/* ===== MOBILE BRAND BACKGROUND (override base merah -> biru, samakan dengan sub-config) ===== */
@media(max-width:860px){
  .main{background:linear-gradient(180deg,var(--primary) 0%,#3f8ef0 22%,#62a8f3 44%,#8ec1f6 72%,#aed4f9 100%);background-attachment:fixed;}
  .tb{background:var(--secondary);border-bottom:1px solid rgba(255,255,255,.16);box-shadow:0 4px 16px -6px rgba(0,40,120,.4);}
  /* Judul halaman di atas gradient biru: putih (berlaku juga dark — gradient dark tetap gelap) */
  .page-head h1{color:#fff;}
  .page-head p{color:rgba(255,255,255,.78)!important;}
  html[data-theme="dark"] .main{background:linear-gradient(180deg,#0a1f4e 0%,#0d1f40 20%,#0f1628 46%,#05070b 100%)!important;background-attachment:fixed;}
  html[data-theme="dark"] .tb{background:var(--surface);border-bottom:2px solid #0D6EFD;box-shadow:0 4px 18px -8px rgba(0,0,0,.7);}
}
/* Penambal: css/pinix-shell.css baris 886 (.card{background-color:var(--surface)!important}) berlaku semua ukuran layar,
   menimpa balik rule ".card{background:transparent}" di blok mobile atas. Perlu !important + di luar blok yang sama
   supaya menang, sama seperti pola yang sudah dipakai sub-config/css/pinix-shell.css. */
@media(max-width:860px){
  .card{background-color:transparent!important;border-color:transparent!important;border-radius:0!important;border:none!important;box-shadow:none!important;}
  html[data-theme="dark"] .card{background-color:transparent!important;border:none!important;box-shadow:none!important;}
}
/* Dashboard panel cards (dashboard-operator-dashboard-hr-data.php, dashboard-operator-kpi-dashboard.php:
   .hr-dashboard-grid/.hr-panel-grid) bukan pola list CRUD di atas -- tidak punya .card-list .ec pengganti,
   jadi transparent override di atas bikin panel/chart-nya menyatu tembus ke background gradient. Kembalikan solid. */
@media(max-width:860px){
  .hr-dashboard-grid .card,.hr-panel-grid .card,.dashboard-home-card{background-color:var(--surface)!important;border:1px solid var(--border)!important;border-radius:12px!important;box-shadow:var(--shadow)!important;}
}

/* Toolbar & footer pagination jadi kartu putih mengambang (samakan dengan sub-config), supaya tidak menyatu polos ke background gradient setelah .card jadi transparan */
@media(max-width:860px){
  .toolbar{background:#fff!important;border-radius:15px!important;box-shadow:0 12px 26px -12px rgba(0,40,120,.35)!important;margin-bottom:11px!important;border-bottom:none!important;padding:18px 16px 12px!important;}
  .count{color:var(--muted)!important;}
  .pagi{background:#fff!important;border-radius:15px!important;box-shadow:0 12px 26px -12px rgba(0,40,120,.35)!important;margin-top:11px!important;border-top:none!important;}
  .pagi .info{color:var(--muted)!important;}
  .pt-footer,.access-rights-footer{background:#fff!important;border-radius:15px!important;box-shadow:0 12px 26px -12px rgba(0,40,120,.35)!important;margin-top:11px!important;padding:12px 13px!important;}
  .pt-info,#ptInfo{color:var(--muted)!important;}
  html[data-theme="dark"] .toolbar{background:transparent!important;box-shadow:none!important;border-radius:0!important;margin-bottom:0!important;border-bottom:1px solid rgba(255,255,255,.1)!important;}
  html[data-theme="dark"] .pagi{background:transparent!important;border-radius:0!important;box-shadow:none!important;margin-top:0!important;border-top:1px solid rgba(255,255,255,.1)!important;}
  html[data-theme="dark"] .pt-footer,html[data-theme="dark"] .access-rights-footer{background:transparent!important;border-radius:0!important;box-shadow:none!important;margin-top:0!important;}
  html[data-theme="dark"] .count,html[data-theme="dark"] .pagi .info{color:rgba(255,255,255,.75)!important;}
  html[data-theme="dark"] .pt-info,html[data-theme="dark"] #ptInfo{color:rgba(255,255,255,.75)!important;}
}
.bc-center-row .row-act{justify-content:center;}
@media(max-width:860px){
  #wrapper_AbsenBulananKaryawan.table-wrap{display:block!important;overflow-x:auto;}
}

/* dvc-d: item "Aktifkan Notif WA" dkk di sidebar-left.php ditandai khusus-desktop, sembunyikan di mobile drawer */
@media(max-width:860px){
  .dvc-d{display:none!important;}
}

/* Lebar combobox filter Category di toolbar Testing Post — mengikuti pola .approval-filter-select
   (base css/pinix-shell.css baris ~1058). Tinggi/padding/font-size dikendalikan class .combo-sm
   (base css/pinix-shell.css, dekat blok .combo aktif) yang ditempel di wrapper-nya di markup —
   bukan lagi hardcode di sini, supaya bisa ganti ukuran cukup ganti class. */
.toolbar .filter-combo-testing-post{width:auto;min-width:170px;max-width:240px;flex:0 1 200px;}
.toolbar .filter-combo-testing-post .combo{width:100%;}

/* Popup "Divisi & Jabatan" (dashboard-operator-karyawan-manage-divisi-jabatan.php) di mobile:
   - header baris Divisi (label+input+3 tombol icon) di-flex-wrap supaya tombol tidak numpuk/kegencet dengan input.
   - baris Jabatan pakai <table> dengan kolom fixed-width (130px select + 2x15px tombol) — di layar sempit ini
     menyisakan ruang terlalu kecil buat input nama jabatan. Ubah row jadi block yang wrap 2 baris: input jabatan
     full-width di baris pertama, select group + tombol di baris kedua. */
@media(max-width:576px){
  #wrapper_DivisiJabatan_ManageDivJab .wrapper-text-divisi .input-group{flex-wrap:wrap;}
  #wrapper_DivisiJabatan_ManageDivJab .wrapper-text-divisi .input-group .nama-divisi-karyawan{flex:1 1 100%;min-width:0;order:1;}
  #wrapper_DivisiJabatan_ManageDivJab .wrapper-text-divisi .input-group .handle-drag-list-divisi{order:0;}
  #wrapper_DivisiJabatan_ManageDivJab .wrapper-text-divisi .input-group .toggle-list-jabatan,
  #wrapper_DivisiJabatan_ManageDivJab .wrapper-text-divisi .input-group .paramremovedivisi,
  #wrapper_DivisiJabatan_ManageDivJab .wrapper-text-divisi .input-group .add-item-divisi-karyawan1{order:2;}

  #wrapper_DivisiJabatan_ManageDivJab .row-item-jabatan-karyawan{display:flex;flex-wrap:wrap;width:100%;}
  #wrapper_DivisiJabatan_ManageDivJab .row-item-jabatan-karyawan td{display:block;width:auto!important;box-sizing:border-box;}
  #wrapper_DivisiJabatan_ManageDivJab .row-item-jabatan-karyawan td:first-child{flex:1 1 100%;}
  #wrapper_DivisiJabatan_ManageDivJab .row-item-jabatan-karyawan td:not(:first-child){flex:0 0 auto;padding-top:0!important;}
  #wrapper_DivisiJabatan_ManageDivJab .row-item-jabatan-karyawan .group-jabatan-karyawan{width:auto;min-width:110px;}
}