:root {
  --navy: #0B3C66;
  --navy-dark: #082A49;
  --cyan: #0E6FAE;
  --amber: #E8A33D;
  --amber-dark: #C9822A;
  --bg: #F4F6F8;
  --ink: #1A1F26;
  --ink-soft: #5A6B7B;
  --white: #FFFFFF;
  --border: #E1E7ED;
  --danger: #D64545;
  --success: #1B9E5A;
  --radius: 10px;
  --shadow-sm: 0 2px 8px rgba(11,60,102,0.06);
  --shadow-md: 0 8px 24px rgba(11,60,102,0.12);
}

* { box-sizing: border-box; }
body { margin:0; font-family:'Inter',sans-serif; background: var(--bg); color: var(--ink); }
a { text-decoration:none; color:inherit; }
h1,h2,h3,h4 { font-family:'Poppins',sans-serif; margin:0; color: var(--navy-dark); }
table { width:100%; border-collapse: collapse; }

/* ============ GUEST / LOGIN ============ */
.guest-body {
  min-height: 100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background: linear-gradient(135deg, var(--navy-dark), var(--navy) 60%, var(--cyan));
  padding: 20px;
}
.login-card {
  background: var(--white);
  border-radius: 14px;
  padding: 44px 36px;
  width: 100%;
  max-width: 400px;
  box-shadow: var(--shadow-md);
}
.login-brand { text-align:center; margin-bottom: 28px; }
.login-brand .icon {
  width:56px; height:56px;
  background: linear-gradient(135deg, var(--navy), var(--cyan));
  border-radius: 12px;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:26px;
  margin: 0 auto 14px;
}
.login-logo {
  max-height: 64px !important;
  max-width: 200px !important;
  min-width: 0;
  width: auto !important;
  height: auto !important;
  margin: 0 auto 14px;
  display: block;
  object-fit: contain;
}
.login-brand h2 { font-size:19px; }
.login-brand p { color: var(--ink-soft); font-size:13px; margin-top:4px; }

/* Password show/hide toggle */
.password-input-wrap { position:relative; }
.password-input-wrap .form-control { padding-right:44px; }
.password-toggle-btn {
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  background:none; border:none; color: var(--ink-soft);
  width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  border-radius:6px; cursor:pointer; font-size:16px;
}
.password-toggle-btn:hover { background: var(--bg); color: var(--navy); }

/* Captcha */
.captcha-wrap { display:flex; align-items:center; gap:10px; }
.captcha-image { height:50px; border-radius:8px; border:1.5px solid var(--border); background:#F4F6F8; }
.captcha-refresh-btn {
  width:42px; height:42px; flex-shrink:0;
  background: var(--bg); border:1.5px solid var(--border); border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  color: var(--ink-soft); font-size:17px; cursor:pointer;
  transition: all .15s;
}
.captcha-refresh-btn:hover { background: var(--navy); color:#fff; border-color: var(--navy); }
.captcha-refresh-btn:active { transform: rotate(180deg); }

/* ============ LAYOUT ============ */
.admin-wrap { display:flex; min-height:100vh; }
.admin-sidebar {
  width: 250px;
  background: var(--navy-dark);
  color: #C9DCEA;
  flex-shrink:0;
  display:flex;
  flex-direction:column;
  position: sticky;
  top:0;
  height:100vh;
  overflow-y:auto;
}
.sidebar-brand { display:flex; align-items:center; gap:12px; padding:22px 20px; border-bottom:1px solid rgba(255,255,255,0.1); }
.sidebar-brand > div { min-width:0; }
.sidebar-brand-icon {
  width:38px; height:38px;
  background: var(--amber);
  color: var(--navy-dark);
  border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  font-size:18px;
  flex-shrink:0;
}
.sidebar-brand-logo {
  max-height: 38px !important;
  max-width: 110px !important;
  min-width: 0;
  width: auto !important;
  height: auto !important;
  object-fit: contain;
  flex-shrink: 0;
}
.sidebar-brand strong { display:block; color:#fff; font-size:13.5px; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sidebar-brand small { display:block; color:#9DBBCF; font-size:10.5px; line-height:1.4; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px; }

.sidebar-nav { display:flex; flex-direction:column; padding: 16px 12px; flex:1; }
.sidebar-nav a {
  padding: 11px 14px;
  border-radius: 8px;
  font-size:14px;
  font-weight:500;
  color:#C9DCEA;
  display:flex; align-items:center; gap:10px;
  margin-bottom:2px;
  transition: all .15s;
}
.sidebar-nav a:hover { background: rgba(255,255,255,0.07); color:#fff; }
.sidebar-nav a.active { background: var(--amber); color: var(--navy-dark); font-weight:600; }
.sidebar-label { font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:#6E93AB; padding:18px 14px 8px; }

/* Menu induk collapsible (mis. "Presensi") */
.sidebar-group { display:flex; flex-direction:column; }
.sidebar-group-toggle {
  padding: 11px 14px;
  border-radius: 8px;
  font-size:14px;
  font-weight:500;
  color:#C9DCEA;
  background:none;
  border:none;
  width:100%;
  display:flex; align-items:center; justify-content:space-between;
  gap:10px;
  margin-bottom:2px;
  cursor:pointer;
  transition: all .15s;
  font-family: inherit;
  text-align:left;
}
.sidebar-group-toggle span { display:flex; align-items:flex-start; gap:10px; text-align:left; }
.sidebar-group-toggle span i { flex-shrink:0; margin-top:2px; }
.sidebar-group-toggle:hover { background: rgba(255,255,255,0.07); color:#fff; }
.sidebar-group-toggle.active { color:#fff; }
.sidebar-group-arrow { font-size:12px; transition: transform .15s; }
.sidebar-group.open .sidebar-group-arrow { transform: rotate(180deg); }
.sidebar-group-menu { display:flex; flex-direction:column; padding-left:14px; }
.sidebar-group-menu a {
  padding: 9px 14px;
  border-radius: 8px;
  font-size:13.5px;
  font-weight:500;
  color:#AFC9DC;
  display:flex; align-items:center; gap:10px;
  margin-bottom:2px;
  transition: all .15s;
}
.sidebar-group-menu a:hover { background: rgba(255,255,255,0.07); color:#fff; }
.sidebar-group-menu a.active { background: var(--amber); color: var(--navy-dark); font-weight:600; }
.sidebar-item-ico { width:22px; height:22px; border-radius:6px; display:flex; align-items:center; justify-content:center; font-size:11px; color:#fff; flex-shrink:0; }
.sidebar-group-menu a.active .sidebar-item-ico { background:rgba(8,42,73,.25) !important; }

.sidebar-external { margin-top:auto; }
.sidebar-logout { color:#F3A9A0 !important; }
.sidebar-logout:hover { background: rgba(214,69,69,0.15) !important; }

.admin-main { flex:1; min-width:0; display:flex; flex-direction:column; }
.admin-topbar {
  background:#fff;
  padding: 14px 26px;
  display:flex; align-items:center; justify-content:space-between;
  box-shadow: var(--shadow-sm);
  position: sticky; top:0; z-index:10;
}
.sidebar-toggle-btn { display:none; background:none; border:none; font-size:22px; color: var(--navy); }
.admin-user { font-size:14px; font-weight:600; color: var(--navy-dark); display:flex; align-items:center; gap:8px; }
.admin-topbar-right { display:flex; align-items:center; gap:12px; }
.topbar-avatar { width:36px; height:36px; border-radius:50%; background:var(--navy); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; flex-shrink:0; }
.admin-content { padding: 26px; flex:1; }

@media (max-width: 900px) {
  .admin-sidebar { position:fixed; left:-260px; z-index:200; transition:left .25s; }
  .admin-sidebar.open { left:0; }
  .sidebar-toggle-btn { display:block; }
  .admin-content { padding: 18px; }
}

/* ============ PAGE HEAD ============ */
.admin-page-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; flex-wrap:wrap; gap:12px; }
.admin-page-head h1 { font-size:22px; }
.admin-breadcrumb { font-size:13px; color: var(--ink-soft); margin-top:4px; }

/* ============ CARD / PANEL ============ */
.panel { background:#fff; border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 24px; margin-bottom:22px; }
.panel-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; flex-wrap:wrap; gap:10px; }
.panel-head h3 { font-size:16px; }

/* ============ STATS GRID ============ */
.stats-grid { display:grid; grid-template-columns: repeat(4,1fr); gap:18px; margin-bottom:24px; }
@media (max-width:900px) { .stats-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width:560px) { .stats-grid { grid-template-columns: 1fr; } }
.stat-card { background:#fff; border-radius: var(--radius); padding:22px; box-shadow: var(--shadow-sm); display:flex; align-items:center; gap:16px; }
.stat-icon { width:50px; height:50px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:22px; color:#fff; flex-shrink:0; }
.stat-card h3 { font-size:24px; }
.stat-card span { font-size:13px; color: var(--ink-soft); }

/* ============ BUTTONS ============ */
.btn {
  display:inline-flex; align-items:center; gap:7px;
  padding: 10px 18px;
  border-radius:8px;
  font-size:14px; font-weight:600;
  border:1.5px solid transparent;
  cursor:pointer;
  transition: all .15s;
}
.btn-primary { background: var(--navy); color:#fff; }
.btn-primary:hover { background: var(--navy-dark); }
.btn-amber { background: var(--amber); color: var(--navy-dark); }
.btn-amber:hover { background: var(--amber-dark); color:#fff; }
.btn-outline { border-color: var(--border); color: var(--ink-soft); background:#fff; }
.btn-outline:hover { border-color: var(--navy); color: var(--navy); }
.btn-danger { background:#FDECEA; color: var(--danger); }
.btn-danger:hover { background: var(--danger); color:#fff; }
.btn-sm { padding:7px 13px; font-size:12.5px; }
.btn-block { width:100%; justify-content:center; }

/* ============ FORM ============ */
.form-group { margin-bottom:18px; }
.form-group label { display:block; font-size:13.5px; font-weight:600; margin-bottom:7px; }
.form-hint { font-size:12px; color: var(--ink-soft); margin-top:5px; }
.form-control {
  width:100%; padding:11px 14px;
  border:1.5px solid var(--border); border-radius:8px;
  font-size:14px; font-family:'Inter',sans-serif;
  background:#fff;
}
.form-control:focus { outline:none; border-color: var(--cyan); }
textarea.form-control { min-height:120px; resize:vertical; }
.form-row { display:grid; grid-template-columns: 1fr 1fr; gap:16px; }
.form-row-3 { display:grid; grid-template-columns: 1fr 1fr 1fr; gap:16px; }
@media (max-width:700px) { .form-row, .form-row-3 { grid-template-columns: 1fr; } }
.form-check { display:flex; align-items:center; gap:8px; }
.form-check input { width:17px; height:17px; }

.img-preview-box {
  width:160px; height:120px;
  border:1.5px dashed var(--border);
  border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  background: var(--bg);
  margin-bottom:10px;
  color: var(--ink-soft);
  font-size:12px;
}
.img-preview-box img { width:100%; height:100%; object-fit:cover; }

.gallery-manage-grid { display:flex; gap:12px; flex-wrap:wrap; margin-top:10px; }
.gallery-manage-item { position:relative; width:100px; height:100px; border-radius:8px; overflow:hidden; }
.gallery-manage-item img { width:100%; height:100%; object-fit:cover; }
.gallery-manage-item button {
  position:absolute; top:4px; right:4px;
  width:24px; height:24px; border-radius:50%;
  background:rgba(214,69,69,0.9); color:#fff; border:none;
  display:flex; align-items:center; justify-content:center;
  font-size:13px; cursor:pointer;
}

/* ============ TABLE ============ */
.table-wrap { overflow-x:auto; }
table.data-table { width:100%; font-size:13.5px; }
table.data-table td { padding:6px 0; border-bottom:1px solid var(--border); }
table.admin-table { font-size:14px; }
table.admin-table th {
  text-align:left; padding:12px 14px;
  background: var(--bg);
  color: var(--ink-soft);
  font-weight:600; font-size:12.5px;
  text-transform:uppercase; letter-spacing:.03em;
  white-space:nowrap;
}
table.admin-table td { padding:12px 14px; border-bottom:1px solid var(--border); vertical-align:middle; }
table.admin-table tr:last-child td { border-bottom:none; }
.table-thumb { width:48px; height:48px; border-radius:6px; object-fit:cover; background: var(--bg); }
.table-actions { display:flex; gap:8px; }

.badge { display:inline-flex; padding:4px 11px; border-radius:20px; font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.02em; }
.badge-success { background:#E6F7EE; color: var(--success); }
.badge-secondary { background:#EEF1F4; color: var(--ink-soft); }
.badge-warning { background:#FFF3E0; color: var(--amber-dark); }
.badge-danger { background:#FDECEA; color: var(--danger); }

/* ============ ALERT ============ */
.alert { padding:14px 18px; border-radius:8px; font-size:14px; margin-bottom:20px; display:flex; gap:10px; align-items:flex-start; }
.alert-success { background:#E6F7EE; color:#1B7A43; border:1px solid #B7E8CB; }
.alert-error { background:#FDECEA; color:#B23A2E; border:1px solid #F5C6BF; }

/* ============ PAGINATION ============ */
.pagination { display:flex; gap:6px; margin-top:20px; }
.pagination a, .pagination span {
  width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  border-radius:6px; font-size:13px; font-weight:600;
  border:1px solid var(--border); color: var(--ink-soft);
}
.pagination .active { background: var(--navy); color:#fff; border-color: var(--navy); }

/* ============ EMPTY STATE ============ */
.empty-state-admin { text-align:center; padding:50px 20px; color: var(--ink-soft); }
.empty-state-admin i { font-size:40px; color: var(--border); display:block; margin-bottom:12px; }

/* ============ SPEC BUILDER (tabel spesifikasi dinamis) ============ */
.spec-group { border:1.5px solid var(--border); border-radius:10px; padding:18px; margin-bottom:16px; background: var(--bg); }
.spec-group-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; gap:10px; }
.spec-group-head input { flex:1; }
.spec-table-edit { width:100%; border-collapse: collapse; background:#fff; border-radius:8px; overflow:hidden; }
.spec-table-edit th, .spec-table-edit td { padding:8px; border:1px solid var(--border); }
.spec-table-edit input { width:100%; border:none; padding:4px; font-size:13px; background:transparent; }
.spec-table-edit input:focus { outline:1px solid var(--cyan); }
.spec-row-actions { white-space:nowrap; }
.spec-col-actions-row { text-align:center; }

/* ============ DASHBOARD UTAMA (module grid ala mockup) ============ */
.rbac-banner { background:linear-gradient(90deg, #FFF7E8, #FFFFFF); border:1px solid #F3D9A8; border-radius:var(--radius); padding:14px 18px; display:flex; align-items:center; gap:12px; margin-bottom:22px; }
.rbac-banner i { font-size:20px; color:var(--amber-dark); flex-shrink:0; }
.rbac-banner p { margin:0; font-size:13px; color:var(--ink-soft); }
.rbac-banner b { color:var(--navy-dark); }

.hstat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; margin-bottom:26px; }
.hstat-card { background:#fff; border-radius:var(--radius); padding:18px 20px; box-shadow:var(--shadow-sm); display:flex; align-items:center; gap:14px; border:1px solid var(--border); }
.hstat-ico { width:48px; height:48px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:22px; color:#fff; flex-shrink:0; }
.hstat-num { font-size:22px; font-weight:800; color:var(--navy-dark); line-height:1.1; }
.hstat-lbl { font-size:12px; color:var(--ink-soft); margin-top:2px; }

.dash-section-title { display:flex; align-items:center; justify-content:space-between; margin:28px 0 14px; flex-wrap:wrap; gap:6px; }
.dash-section-title h3 { font-size:15px; }
.dash-section-title span { font-size:12px; color:var(--ink-soft); }

.master-strip { display:flex; gap:12px; flex-wrap:wrap; }
.master-chip { display:flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--border); border-radius:999px; padding:8px 16px 8px 8px; font-size:12.5px; font-weight:600; color:var(--navy-dark); box-shadow:var(--shadow-sm); transition:.15s; }
.master-chip:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
.master-chip .c-ico { width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; color:#fff; flex-shrink:0; }

.module-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:16px; }
.module-card {
  background:#fff; border-radius:var(--radius); padding:20px; border:1px solid var(--border);
  box-shadow:var(--shadow-sm); cursor:pointer; transition:.18s; position:relative; overflow:hidden; display:block;
}
.module-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); }
.module-card.locked { opacity:.45; cursor:not-allowed; pointer-events:none; }
.module-card .m-ico { width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:22px; color:#fff; margin-bottom:14px; }
.module-card h4 { font-size:14px; margin-bottom:4px; }
.module-card p { font-size:11.5px; color:var(--ink-soft); margin:0 0 10px; line-height:1.5; min-height:32px; }
.module-card .m-meta { font-size:11px; color:var(--ink-soft); display:flex; align-items:center; gap:6px; }
.module-card .lock-badge { position:absolute; top:14px; right:14px; font-size:15px; color:var(--ink-soft); }
.module-card .m-arrow { position:absolute; bottom:16px; right:16px; font-size:14px; color:var(--ink-soft); opacity:0; transition:.15s; }
.module-card:not(.locked):hover .m-arrow { opacity:1; transform:translateX(3px); }

/* Hero banner warna di atas tiap halaman modul */
.module-hero { border-radius:var(--radius); padding:20px 24px; color:#fff; display:flex; align-items:center; gap:16px; margin-bottom:22px; }
.module-hero .h-ico { width:48px; height:48px; border-radius:14px; background:rgba(255,255,255,.18); display:flex; align-items:center; justify-content:center; font-size:24px; flex-shrink:0; }
.module-hero h2 { color:#fff; font-size:18px; }
.module-hero p { margin:2px 0 0; opacity:.9; font-size:12.5px; }

/* =====================================================================
 * TEMA SERAGAM (v2026-09): banner judul sebaris + tombol kaca + header tabel navy
 * Berlaku otomatis untuk semua halaman admin yang memakai .admin-page-head
 * dan table.admin-table. Ikon banner disisipkan layout dari menu yang aktif.
 * ===================================================================== */
.module-hero { display:none; } /* digantikan banner .admin-page-head */
.admin-page-head {
  position:relative; gap:10px 16px; padding:14px 18px; margin-bottom:16px; border-radius:18px; color:#fff; flex-wrap:wrap;
  background:
    radial-gradient(circle at 96% -20%, rgba(245,165,36,.38), transparent 190px),
    radial-gradient(ellipse at 45% 140%, rgba(255,255,255,.12), transparent 220px),
    linear-gradient(115deg,#0B2545 0%,#13315C 45%,#2563EB 100%);
  box-shadow:0 10px 26px -14px rgba(11,37,69,.7);
}
.admin-page-head > * { position:relative; z-index:1; }
.admin-page-head > div:not(.kh-ico):first-of-type, .admin-page-head > .kh-ico + div { flex:1; min-width:180px; }
.admin-page-head h1 { color:#fff; font-size:19px; line-height:1.2; margin:0; }
.admin-page-head h1 small, .admin-page-head h1 span:not(.badge) { color:rgba(255,255,255,.8); }
.admin-page-head .admin-breadcrumb { color:rgba(255,255,255,.75); font-size:12px; margin-top:3px; }
.admin-page-head .admin-breadcrumb a, .admin-page-head .admin-breadcrumb b, .admin-page-head .admin-breadcrumb strong,
.admin-page-head .admin-breadcrumb span:not(.badge) { color:#fff !important; }
.admin-page-head p { color:rgba(255,255,255,.8); }
.admin-page-head .form-hint, .admin-page-head label { color:rgba(255,255,255,.8); }
.admin-page-head .kh-ico { --mc:#F5A524; width:44px; height:44px; border-radius:13px; display:grid; place-items:center; font-size:21px; flex:none; color:#fff;
  background:linear-gradient(135deg, color-mix(in srgb, var(--mc) 85%, #fff), var(--mc)); box-shadow:0 6px 14px -6px var(--mc), inset 0 0 0 1px rgba(255,255,255,.3); }
.admin-page-head .btn { height:34px; padding:0 12px; border-radius:10px; font-size:12.5px; font-weight:600; color:#fff; white-space:nowrap;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.24); backdrop-filter:blur(6px); transition:.18s; }
.admin-page-head .btn:hover { background:rgba(255,255,255,.24); color:#fff; border-color:rgba(255,255,255,.4); transform:translateY(-1px); }
.admin-page-head .btn-primary, .admin-page-head .btn-amber, .admin-page-head .btn-success {
  color:#0B2545; font-weight:700; border:0; background:linear-gradient(135deg,#FFD166,#F5A524); box-shadow:0 6px 14px -6px rgba(245,165,36,.9); }
.admin-page-head .btn-primary:hover, .admin-page-head .btn-amber:hover, .admin-page-head .btn-success:hover { color:#0B2545; background:linear-gradient(135deg,#FFDB85,#F7B23F); }
.admin-page-head .btn-danger { background:rgba(239,68,68,.22); border-color:rgba(252,165,165,.5); }
.admin-page-head .btn-danger:hover { background:#EF4444; }
.admin-page-head .form-control { height:34px; padding:4px 10px; border-radius:10px; border:0; font-size:13px; }
.admin-page-head select.form-control { padding-right:28px; }
/* koperasi: banner halaman detail menggantikan banner modul */
.admin-content:has(.admin-page-head) .kop-hero { display:none; }

/* ---------- Tabel: header navy seragam ---------- */
.table-wrap { border-radius:14px; }
table.admin-table { border-collapse:separate; border-spacing:0; width:100%; }
table.admin-table thead tr { background:linear-gradient(100deg,#0B2545 0%,#13315C 50%,#1E4D8C 100%); }
table.admin-table thead th { background:transparent; color:#fff; font-size:12px; letter-spacing:.06em; padding:13px 14px; border-bottom:3px solid #F5A524; }
table.admin-table thead th a { color:#fff; }
table.admin-table thead th i { color:#F5C451; margin-right:5px; }
table.admin-table thead th:first-child { border-top-left-radius:12px; }
table.admin-table thead th:last-child { border-top-right-radius:12px; }
table.admin-table thead th input[type=checkbox] { accent-color:#F5A524; }
table.admin-table tbody tr { transition:background .15s; }
table.admin-table tbody tr:nth-child(even) { background:#F8FAFC; }
table.admin-table tbody tr:hover { background:#FFF8E6; }

@media (max-width:640px) {
  .admin-page-head { padding:12px 14px; border-radius:14px; }
  .admin-page-head h1 { font-size:17px; }
}
@media print {
  .admin-page-head { background:none !important; color:#000 !important; box-shadow:none !important; padding:0 !important; }
  .admin-page-head .kh-ico { display:none !important; }
  .admin-page-head h1, .admin-page-head .admin-breadcrumb { color:#000 !important; }
  table.admin-table thead tr { background:none !important; }
  table.admin-table thead th { color:#000 !important; border-bottom:1px solid #000 !important; }
}

/* ================= MODE PANTAU (role hanya lihat, mis. CEO) ================= */
.pantau-bar{display:flex;align-items:center;gap:8px;margin-bottom:14px;padding:9px 14px;border-radius:12px;font-size:13px;color:#0B2545;
  background:linear-gradient(90deg,#FEF3C7,#FFFBEB);border:1px solid #FCD34D}
.pantau-bar i{color:#D97706;font-size:16px}
.mode-lihat form[method="post" i] button,
.mode-lihat form[method="post" i] input[type="submit"],
.mode-lihat form[method="post" i] .btn,
.mode-lihat a[href$="/create"], .mode-lihat a[href*="/create?"],
.mode-lihat a[href$="/edit"], .mode-lihat a[href*="/edit?"],
.mode-lihat a[href$="/import"], .mode-lihat a[href$="/import-jabatan"], .mode-lihat a[href$="/bulk-foto"],
.mode-lihat a[href$="/manual"], .mode-lihat a[href$="/generate"], .mode-lihat a[href*="/generate?"],
.mode-lihat a[href*="isi-jumlah"], .mode-lihat a[href*="presensijaya-sso"],
.mode-lihat [data-confirm], .mode-lihat .btn-danger,
.mode-lihat details.kop-box { display:none !important; }

/* ================= DASHBOARD RINGKAS (v2026-09) ================= */
.dash-brief{display:flex;align-items:center;gap:10px;margin-bottom:16px;padding:10px 16px;border-radius:12px;background:linear-gradient(90deg,#FFF7E8,#fff);border:1px solid #F3D9A8;font-size:12.5px;color:var(--ink-soft)}
.dash-brief i{color:var(--amber-dark);font-size:16px;flex:none}
.dash-brief b{color:var(--navy-dark)}
.dash-brief a{color:var(--navy);text-decoration:underline;font-weight:600}

.dash-metrics{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:10px;margin-bottom:18px}
.dm-item{display:flex;align-items:center;gap:11px;padding:13px 16px;background:#fff;border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-sm);min-width:0;transition:.15s}
.dm-item:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.dm-ico{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:17px;color:#fff;flex:none;box-shadow:0 4px 10px -4px rgba(0,0,0,.25)}
.dm-num{font:800 19px Poppins,sans-serif;color:var(--navy-dark);line-height:1.1}
.dm-lbl{font-size:11px;color:var(--ink-soft);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.dash-section-title{display:flex;align-items:center;gap:8px;margin:20px 0 10px;flex-wrap:wrap}
.dash-section-title h3{font:700 13px Poppins,sans-serif;color:var(--navy-dark);display:flex;align-items:center;gap:7px;margin:0}
.dash-section-title .dst-line{flex:1;height:1px;background:linear-gradient(90deg,var(--border),transparent)}
.dash-section-title span{font-size:11px;color:var(--ink-soft)}

.dash-modgrid{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:4px}
.mod-chip{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--border);border-radius:13px;padding:8px 14px 8px 8px;
  min-width:168px;flex:1 1 190px;max-width:240px;box-shadow:var(--shadow-sm);transition:.15s;position:relative}
.mod-chip:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);border-color:transparent}
.mod-chip .mc-ico{width:32px;height:32px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:15px;color:#fff;flex:none}
.mod-chip .mc-txt{min-width:0}
.mod-chip .mc-txt b{display:block;font-size:12.5px;color:var(--navy-dark);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mod-chip .mc-txt small{display:block;font-size:10.5px;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mod-chip.locked{opacity:.4;pointer-events:none}

.master-strip{margin-bottom:2px}

.dash-tabbar{display:flex;gap:6px;flex-wrap:wrap;margin:22px 0 14px;padding:5px;background:#fff;border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-sm)}
.dash-tab{display:flex;align-items:center;gap:7px;border:0;background:transparent;color:var(--ink-soft);font:600 12.5px Inter,sans-serif;padding:8px 14px;border-radius:10px;cursor:pointer;transition:.15s;white-space:nowrap}
.dash-tab i{font-size:14px}
.dash-tab:hover{background:var(--bg)}
.dash-tab.on{background:linear-gradient(135deg,#0B2545,#1E4D8C);color:#fff;box-shadow:0 4px 10px -4px rgba(11,37,69,.5)}
.dash-tab.on i{color:#fff!important}
.dash-tabpanel{display:none}
.dash-tabpanel.on{display:block;animation:dashFade .15s ease}
@keyframes dashFade{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
.dash-tabsum{font-size:11.5px;color:var(--ink-soft);margin-bottom:10px}
@media (max-width:720px){.dash-tabbar{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch}}

.dash-linkbtn{border:0;background:transparent;color:var(--navy);font-size:12px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:5px;padding:0}
.dash-linkbtn:hover{text-decoration:underline}
.dash-fav{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:6px}
.fav-tile{display:flex;flex-direction:column;align-items:center;gap:8px;width:88px;padding:12px 6px;border-radius:16px;background:#fff;border:1px solid var(--border);box-shadow:var(--shadow-sm);transition:.15s;text-align:center}
.fav-tile:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:transparent}
.fav-tile span{font-size:11px;font-weight:600;color:var(--navy-dark);line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fav-ico{width:46px;height:46px;border-radius:15px;display:flex;align-items:center;justify-content:center;font-size:21px;color:#fff;box-shadow:0 6px 14px -6px rgba(0,0,0,.3)}

.dash-toggle-all{display:flex;align-items:center;gap:8px;border:1px dashed var(--border);background:#fff;color:var(--ink-soft);font:600 12.5px Inter,sans-serif;padding:9px 16px;border-radius:12px;cursor:pointer;margin:22px 0 4px;transition:.15s}
.dash-toggle-all:hover{background:var(--bg);color:var(--navy-dark)}
.dash-toggle-all.on{color:var(--navy-dark);border-style:solid}
#dashSemuaModul .dash-tabbar{margin-top:14px}