/* Master desain tabel: satu berkas untuk semua daftar & tabel termasuk PHP dan JS */
:root{--df-sidebar-width:242px;--df-sidebar-start:#073643;--df-sidebar-end:#052c37;--df-header-height:66px;--df-table-header:#f0f6f8;--df-table-border:#dfebef;--df-table-font:12px;--df-table-y:11px}
aside{width:var(--df-sidebar-width)!important;background:linear-gradient(160deg,var(--df-sidebar-start),var(--df-sidebar-end))!important}
main{margin-left:var(--df-sidebar-width)!important}
.topbar{height:var(--df-header-height)!important}
.menu{text-decoration:none}
.topbar .nav-toggle{border:none;background:transparent;color:var(--teal);font-size:20px;cursor:pointer}
.topbar-location,.topbar-user{white-space:nowrap;color:#587a89}
.topbar-signout{color:#68818c;text-decoration:none;font-size:11px;border-left:1px solid #dae5e8;padding-left:12px}
.sidebar-collapsed aside{width:68px!important}
.sidebar-collapsed main{margin-left:68px!important}
.sidebar-collapsed aside .logo b,.sidebar-collapsed aside .logo small,.sidebar-collapsed .section-head{display:none}
.sidebar-collapsed .menu{font-size:0;gap:0}
.sidebar-collapsed .menu .ico{font-size:18px;display:block;width:100%}
/* Semua tabel menerima gaya tunggal dari master table */
.table-wrap{overflow-x:auto;max-width:100%;border:1px solid var(--df-table-border);border-radius:9px}
.table-wrap table{border-collapse:separate!important;border-spacing:0!important;width:100%;font-size:var(--df-table-font);background:white}
.table-wrap table thead th{background:var(--df-table-header)!important;color:#405e6e;border-bottom:1px solid var(--df-table-border);text-align:left;white-space:nowrap}
.table-wrap table th,.table-wrap table td{padding:var(--df-table-y) 12px!important;border-bottom:1px solid var(--df-table-border)!important;vertical-align:middle}
.table-wrap table tbody tr:hover td{background:#f5fcfd}
.table-wrap table tbody tr:last-child td{border-bottom:0!important}
.table-wrap table td:last-child{white-space:nowrap}
.table-wrap .df-filter-row th{padding:5px!important;position:sticky;top:39px;background:#fff!important;z-index:2}
.table-wrap .df-filter-row input{width:100%;min-width:60px;max-width:100%;border:1px solid #dce8ea;border-radius:5px;padding:7px;font-size:11px;outline-color:#0092a1}
.df-table-tools{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;padding:8px 0;font-size:11px;color:#617b88}
.df-table-tools button,.df-table-tools select{border:1px solid #d5e3e6;border-radius:6px;background:white;padding:5px 8px;color:#34586b;cursor:pointer;font-size:11px}
.df-table-tools .df-page{background:#068c9a;color:#fff;border-color:#068c9a}
.df-table-tools label{display:inline-flex;align-items:center;gap:6px}
.df-table-footer{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 2px;color:#7b96a0;font-size:11px}
.df-table-footer button{border:1px solid #cddfe4;background:#fff;border-radius:5px;padding:5px 9px;cursor:pointer}
.df-table-footer button:disabled{opacity:.4;cursor:default}
.auth-page{min-height:100vh;background:linear-gradient(145deg,#e6f7fa,#f7fafb 55%,#e7f8f4);display:flex;justify-content:center;align-items:center;padding:22px}
.auth-card{width:min(460px,100%);background:#fff;padding:32px;border:1px solid #dbe9ee;border-radius:20px;box-shadow:0 18px 55px #0b52601b}
.auth-card h1{font-size:25px;margin:6px 0}.auth-card p{color:#65808d;line-height:1.6}
.auth-card .field{margin-top:16px}.auth-card .field input{width:100%}
.brand-mark{color:#03a6af;font-size:38px}.error-box{padding:12px;border-radius:8px;background:#fff0f0;color:#b92332}
.settings-panel{background:white;border:1px solid #d8e7eb;border-radius:12px;padding:20px;margin-top:15px;box-shadow:var(--shadow)}
.settings-panel h3{margin:0 0 15px}
.settings-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.settings-grid label,.settings-column label{display:flex;flex-direction:column;gap:6px;font-size:12px;color:#507181}
.settings-grid input,.settings-grid select,.settings-column input{width:100%;padding:9px;border-radius:7px;border:1px solid #d3e2e7;background:white;color:#14384a}
.settings-column{display:grid;grid-template-columns:2fr 1fr 1fr;align-items:center;gap:12px;border-bottom:1px solid #ebf0f2;padding:10px 0}
.settings-column label.checkbox{flex-direction:row;align-items:center;justify-content:flex-start}
.settings-column input[type=checkbox]{width:auto}
.settings-actions{margin-top:18px;display:flex;gap:8px;justify-content:flex-end}
.settings-hint{font-size:12px;color:#7792a0;line-height:1.7}
@media(min-width:761px){.table-wrap table thead th{position:sticky;top:0;z-index:3}}
@media(max-width:760px){aside{width:100%!important;max-height:230px}main{margin-left:0!important}.settings-grid{grid-template-columns:1fr}.topbar-user,.topbar-location{display:none}.sidebar-collapsed aside{width:100%!important}.sidebar-collapsed main{margin-left:0!important}}

/* Tema tabel modern: satu sumber gaya untuk semua tabel. */
body.df-table-modern .table-wrap{border-radius:9px;border-color:#e2edf0;background:#fff}
body.df-table-modern .table-wrap table thead th{background:var(--df-table-header)!important;color:#18364a;font-weight:800}
body.df-table-modern .table-wrap table tbody tr:hover td{background:#f6fcfd}
body.df-table-modern .table-wrap table tbody td{color:#273c4d}
.table-wrap .df-filter-row[hidden]{display:none!important}
body.df-table-modern .df-table-tools{padding:10px 0;justify-content:space-between}
body.df-table-modern .df-table-tools .df-toggle{font-weight:700;background:#fff;border:1px solid #d5e4e8}
.df-table-footer{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:13px 2px 6px;color:#607688;font-size:11px}
.df-table-page-size{display:flex;align-items:center;gap:10px}
.df-table-page-size label{display:flex;align-items:center;gap:8px}
.df-table-page-size select{border:1px solid #d6e5eb;background:#fff;border-radius:8px;padding:8px 10px;min-width:67px;font-size:11px;font-weight:700;color:#18364a}
.df-table-pagination{display:flex;align-items:center;gap:5px}
.df-table-pagination button{display:flex;align-items:center;justify-content:center;border:1px solid transparent;min-width:29px;height:30px;border-radius:7px;background:#fff;color:#233b51;font-weight:700;font-size:11px;cursor:pointer}
.df-table-pagination button:first-child,.df-table-pagination button:last-child{border-color:#d9e7eb}
.df-table-pagination button.active{background:linear-gradient(100deg,#078b91,#0ca6ab);color:#fff;border-color:#049398}
.df-table-pagination button:disabled{opacity:.38;cursor:default}
.df-table-pagination span{padding:0 3px;color:#738e9c}
/* Aksi tabel juga diatur terpusat. */
.df-action-group{display:flex;align-items:center;gap:5px;justify-content:flex-start;flex-wrap:nowrap}
.df-action{font:inherit;font-size:10.5px;font-weight:700;display:inline-flex;align-items:center;gap:4px;text-decoration:none;white-space:nowrap;border-radius:8px;min-height:30px;padding:0 7px;border:1px solid #d9e8ec;background:#eaf7f8;color:#057b85;cursor:pointer}
.df-action:hover{background:#d9f1f3}
.df-action-delete{background:#fff0f0;color:#c6383b;border-color:#ffe3e4}
.df-action-delete:hover{background:#ffe1e1}
.df-action-group form{display:inline-flex;margin:0}

/* Popup filter nilai pada setiap kolom, sama konsepnya dengan contoh pengguna. */
.df-column-filter-trigger{display:inline-flex;align-items:center;justify-content:center;margin-left:6px;border:1px solid #d6e4e7;background:#fff;color:#4b7685;border-radius:4px;min-width:18px;height:18px;padding:0 3px;font-size:12px;line-height:1;vertical-align:middle;cursor:pointer}
.df-column-filter-trigger:hover{background:#dff5f3;border-color:#14a4a4}
.df-col-resize-handle{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;width:9px;height:21px;padding:0;margin-left:4px;border:0;background:transparent;color:#9bb0b8;font-size:14px;cursor:col-resize;touch-action:none;user-select:none}
.df-col-resize-handle:hover{background:#d8f4f3;color:#008e8b}.df-column-resizing,.df-column-resizing *{cursor:col-resize!important;user-select:none!important}
.df-column-filter-popup{position:fixed;z-index:9999;width:288px;max-width:calc(100vw - 16px);background:#fff;border:1px solid #d2e1e9;border-radius:14px;padding:13px;box-shadow:0 15px 35px rgba(9,50,69,.22);font-size:12px;color:#244359}
.df-column-popup-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:11px}.df-column-popup-title strong{font-size:14px}.df-column-popup-title button{border:0;background:none;color:#758da1;font-size:20px;cursor:pointer;line-height:1}
.df-column-popup-buttons{display:flex;gap:5px;margin-bottom:10px}.df-column-popup-buttons button{flex:1;border:1px solid #d4e2e8;border-radius:7px;background:#fff;padding:9px 4px;color:#2e536b;cursor:pointer;font-size:10px;font-weight:650}
.df-column-popup-buttons button:hover{background:#eaf8f8}.df-column-filter-popup input[type=search]{width:100%;border:1px solid #d3e2e8;border-radius:8px;padding:10px 11px;margin-bottom:8px;color:#2b4657;background:#fff;outline-color:#009494}
.df-column-popup-list{max-height:234px;overflow-y:auto;border-top:1px solid #edf2f4;padding-top:7px;scrollbar-width:thin}.df-column-popup-list label{display:flex;align-items:center;gap:5px;padding:7px 5px;cursor:pointer;font-size:11px;min-height:30px}.df-column-popup-list label:hover{background:#f2fbfc}.df-column-popup-list label[hidden]{display:none!important}.df-column-popup-list input[type=checkbox]{width:16px;height:16px;accent-color:#068e99}.df-filter-select-all{border-bottom:1px solid #edf2f4}
.df-column-popup-hint{border-top:1px solid #edf1f2;color:#748d9c;padding:9px 3px 0;margin:7px 0 0;font-size:10px;line-height:1.5}
.df-table-zebra .table-wrap table tbody tr:nth-child(even) td{background:#f8fbfc}
.df-table-zebra .table-wrap table tbody tr:hover td{background:#f0fafb}

.df-server-col-filter-count{font-size:11px;color:#657f8b;background:#eef9fb;border:1px solid #d9eaf0;border-radius:7px;margin-top:7px;padding:7px 9px}.df-server-col-filter-count[hidden]{display:none!important}