:root {
    --sidebar-w: 286px;
    --topbar-h: 66px;
    --page: #eef6ff;
    --page-2: #f7fbff;
    --surface: #ffffff;
    --surface-soft: #f8fbff;
    --navy-950: #06162b;
    --navy-900: #0a2340;
    --navy-800: #10375f;
    --navy-700: #174b7f;
    --primary: #087df4;
    --primary-700: #0565d7;
    --primary-50: #eaf4ff;
    --ink: #081b3c;
    --text: #173158;
    --muted: #66809f;
    --line: #dce9f7;
    --line-strong: #c8dbef;
    --green: #15b96f;
    --green-50: #e8fbf2;
    --green-400: #36d98b;
    --green-500: #15b96f;
    --green-600: #0ea765;
    --green-700: #0a8b55;
    --green-800: #086943;
    --green-900: #06452f;
    --green-950: #042a20;
    --blue-500: #087df4;
    --red-600: #df1f31;
    --red-50: #fff0f2;
    --pink: #f72585;
    --pink-50: #fff0f7;
    --orange: #ff7a30;
    --orange-50: #fff3eb;
    --yellow: #f4b400;
    --yellow-50: #fff8df;
    --red: #ff3b49;
    --red-50: #fff0f2;
    --purple: #7c4dff;
    --purple-50: #f3efff;
    --teal: #11b6a7;
    --gray: #8fa4b8;
    --shadow: 0 12px 34px rgba(23, 62, 105, .09);
    --shadow-sm: 0 6px 18px rgba(23, 62, 105, .07);
    --shadow-lg: 0 22px 55px rgba(10, 35, 64, .16);
    --radius: 14px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; min-height: 100%; }
body {
    font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    background:
        radial-gradient(circle at 75% 0%, rgba(8,125,244,.10), transparent 32%),
        linear-gradient(180deg, #f7fbff 0%, var(--page) 100%);
    color: var(--text);
    font-size: 14px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }

/* ===== App shell ===== */
.admin-shell { min-height: 100vh; display: flex; }
.app-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 300;
    width: var(--sidebar-w);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    color: #fff;
    background:
        linear-gradient(180deg, rgba(6,22,43,.90), rgba(6,22,43,.94)),
        radial-gradient(circle at 25% 15%, rgba(8,125,244,.28), transparent 35%),
        linear-gradient(180deg, #082744, #051426);
    box-shadow: 10px 0 32px rgba(6,22,43,.28);
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.22) transparent;
}
.app-sidebar::after {
    content: '';
    position: sticky;
    bottom: 0;
    height: 230px;
    min-height: 230px;
    margin-top: -230px;
    pointer-events: none;
    background:
        linear-gradient(180deg, transparent, rgba(4,18,34,.22) 20%, rgba(4,18,34,.82)),
        radial-gradient(ellipse at bottom, rgba(44, 126, 70, .55), transparent 62%);
}
.sidebar-brand { display: flex; gap: 13px; align-items: center; padding: 18px 14px 16px; position: relative; z-index: 1; }
.sidebar-crest { width: 56px; height: 68px; object-fit: contain; filter: drop-shadow(0 8px 18px rgba(0,0,0,.35)); }
.sidebar-brand strong { display: block; font-size: 18px; line-height: 1.12; font-weight: 800; letter-spacing: -.02em; }
.sidebar-brand span { display: block; margin-top: 5px; color: rgba(255,255,255,.72); font-size: 11px; }
.sidebar-nav { position: relative; z-index: 2; padding: 8px 10px 22px; }
.side-section { padding: 14px 14px 7px; color: rgba(255,255,255,.48); font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.side-link {
    display: flex;
    align-items: center;
    gap: 13px;
    min-height: 48px;
    padding: 11px 14px;
    margin: 3px 0;
    border-radius: 10px;
    color: rgba(255,255,255,.86);
    font-weight: 600;
    transition: background .18s ease, color .18s ease, transform .18s ease;
}
.side-link i { width: 26px; font-size: 22px; text-align: center; color: rgba(255,255,255,.78); }
.side-link:hover { background: rgba(255,255,255,.10); color: #fff; transform: translateX(2px); }
.side-link.active { background: linear-gradient(135deg, #0d86ff, #076fe8); color: #fff; box-shadow: 0 10px 24px rgba(8,125,244,.34); }
.side-link.active i { color: #fff; }
.sidebar-motto { margin-top: auto; padding: 34px 20px 18px; text-align: center; position: relative; z-index: 2; color: rgba(255,255,255,.88); }
.sidebar-motto em { display: block; font-size: 16px; line-height: 1.5; font-weight: 800; text-shadow: 0 2px 10px rgba(0,0,0,.35); }
.sidebar-motto span, .sidebar-motto small { display: block; margin-top: 18px; color: rgba(255,255,255,.70); font-size: 11px; }
.sidebar-motto small { margin-top: 8px; line-height: 1.5; }
.sidebar-overlay { display: none; position: fixed; inset: var(--topbar-h) 0 0 0; z-index: 240; background: rgba(6,22,43,.42); backdrop-filter: blur(2px); }

.app-main { min-width: 0; flex: 1; margin-left: var(--sidebar-w); }
.app-topbar {
    position: sticky;
    top: 0;
    z-index: 220;
    height: var(--topbar-h);
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 0 24px;
    background: rgba(255,255,255,.92);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 7px 22px rgba(28, 73, 120, .07);
    backdrop-filter: blur(14px);
}
.topbar-menu { width: 38px; height: 38px; border: 0; background: transparent; color: var(--ink); font-size: 24px; display: grid; place-items: center; border-radius: 9px; }
.topbar-menu:hover { background: var(--primary-50); color: var(--primary); }
.top-search { flex: 1; max-width: 660px; display: flex; align-items: center; gap: 10px; height: 42px; padding-left: 15px; background: #fff; border: 1px solid var(--line-strong); border-radius: 9px; box-shadow: var(--shadow-sm); }
.top-search > i { color: var(--muted); font-size: 19px; }
.top-search input[type="search"] { flex: 1; border: 0; outline: 0; min-width: 120px; color: var(--ink); font-size: 13px; }
.top-search button { width: 56px; align-self: stretch; border: 0; border-radius: 0 8px 8px 0; background: var(--primary); color: #fff; font-size: 20px; }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.icon-btn { position: relative; width: 39px; height: 39px; display: grid; place-items: center; border: 0; background: transparent; color: var(--ink); border-radius: 50%; font-size: 22px; }
.icon-btn:hover { background: var(--primary-50); color: var(--primary); }
.notif-dot { position: absolute; top: 1px; right: 1px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--red); color: #fff; border: 2px solid #fff; font-size: 10px; font-weight: 800; line-height: 14px; }
.topbar-user { display: flex; align-items: center; gap: 10px; color: var(--ink); }
.user-avatar { width: 43px; height: 43px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #dcecff, #b6d8ff); color: var(--primary); font-size: 22px; }
.topbar-user strong { display: block; font-size: 14px; font-weight: 800; line-height: 1.2; }
.topbar-user small { display: block; color: var(--muted); font-size: 12px; }
.logout-compact { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); background: #fff; }
.logout-compact:hover { color: #fff; border-color: var(--red); background: var(--red); }

.content-wrap { padding: 18px 24px 28px; }
.content-meta { display: flex; justify-content: flex-end; align-items: center; gap: 16px; min-height: 30px; margin-bottom: 10px; }
.breadcrumb { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12px; font-weight: 600; }
.breadcrumb a { color: var(--navy-800); }
.breadcrumb i { font-size: 15px; }
.date-badge { display: inline-flex; align-items: center; gap: 9px; color: var(--ink); font-size: 13px; font-weight: 700; }
.date-badge i { color: var(--primary); font-size: 21px; }
.admin-content { min-width: 0; }

/* ===== Shared page components ===== */
.page-hero { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-bottom: 18px; }
.page-title { display: flex; align-items: center; gap: 14px; }
.page-title-icon { width: 60px; height: 60px; display: grid; place-items: center; border-radius: 18px; color: var(--primary); background: linear-gradient(135deg, #dcecff, #f6fbff); font-size: 38px; box-shadow: var(--shadow-sm); }
.page-title h1 { margin: 0; color: var(--ink); font-size: clamp(23px, 3vw, 32px); line-height: 1.15; letter-spacing: -.04em; font-weight: 800; }
.page-title p { margin: 5px 0 0; color: var(--text); font-size: 14px; }
.page-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }

.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
.stats-grid.compact { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.stat-card { position: relative; overflow: hidden; display: flex; align-items: center; gap: 16px; min-height: 104px; padding: 18px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.stat-card::after { content: ''; position: absolute; inset: auto -40px -55px auto; width: 130px; height: 130px; border-radius: 50%; background: var(--tone-bg, var(--primary-50)); opacity: .78; }
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.stat-icon { position: relative; z-index: 1; width: 56px; height: 56px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 13px; color: var(--tone, var(--primary)); background: var(--tone-bg, var(--primary-50)); font-size: 31px; }
.stat-info { position: relative; z-index: 1; min-width: 0; }
.stat-label { color: var(--ink); font-weight: 700; font-size: 13px; }
.stat-num, .stat-value { color: var(--ink); font-weight: 800; font-size: clamp(24px, 2.5vw, 30px); line-height: 1.05; letter-spacing: -.04em; margin-top: 6px; }
.stat-sub { color: var(--muted); font-size: 12px; margin-top: 4px; }
.tone-blue { --tone: var(--primary); --tone-bg: var(--primary-50); }
.tone-green { --tone: var(--green); --tone-bg: var(--green-50); }
.tone-pink { --tone: var(--pink); --tone-bg: var(--pink-50); }
.tone-orange { --tone: var(--orange); --tone-bg: var(--orange-50); }
.tone-yellow { --tone: var(--yellow); --tone-bg: var(--yellow-50); }
.tone-purple { --tone: var(--purple); --tone-bg: var(--purple-50); }
.tone-red { --tone: var(--red); --tone-bg: var(--red-50); }
.tone-gray { --tone: var(--gray); --tone-bg: #f1f5f9; }

.card, .admin-card, .data-card, .filter-card, .chart-card, .info-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.data-card, .filter-card, .chart-card, .info-card { overflow: hidden; }
.card { padding: 18px; }
.card-header, .data-card-head, .filter-card-head, .chart-card-head, .info-card-head {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 15px 17px;
    border-bottom: 1px solid var(--line);
    background: linear-gradient(180deg, #fff, #f9fcff);
}
.card-header h2, .data-card-head h2, .data-card-head h3, .filter-card-head h2, .filter-card-head h3, .chart-card-head h2, .chart-card-head h3, .info-card-head h3 { margin: 0; color: var(--ink); font-size: 16px; font-weight: 800; }
.data-card-body, .filter-card-body, .chart-card-body, .info-card-body { padding: 16px; }

.filter-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 13px; align-items: end; }
.filter-field label, .form-field label, .form-group label, label { display: block; margin-bottom: 6px; color: var(--ink); font-size: 12px; font-weight: 700; }
.form-control, .input, .inf-input, select, textarea {
    width: 100%;
    min-height: 40px;
    padding: 9px 12px;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    background: #fff;
    color: var(--text);
    outline: none;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.form-control:focus, .input:focus, .inf-input:focus, select:focus, textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(8,125,244,.12); }
textarea.form-control, textarea.input, textarea.inf-input { min-height: 110px; resize: vertical; }

.btn, .action-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 38px; padding: 9px 14px; border-radius: 8px; border: 1px solid var(--line-strong); background: #fff; color: var(--ink); font-size: 13px; font-weight: 800; white-space: nowrap; transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease; }
.btn:hover, .action-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn.primary, .btn-primary, .action-btn.primary { border-color: var(--primary); background: var(--primary); color: #fff; }
.btn.success, .btn-green, .action-btn.success { border-color: var(--green); background: var(--green); color: #fff; }
.btn.danger, .btn-danger, .action-btn.danger { border-color: var(--red); background: var(--red); color: #fff; }
.btn.warning, .action-btn.warning { border-color: var(--yellow); background: var(--yellow); color: var(--ink); }
.btn.secondary, .btn-default, .btn-secondary, .action-btn.secondary { background: #fff; color: var(--primary); border-color: #a9d0ff; }
.btn.outline-red, .action-btn.outline-red { color: var(--red); border-color: #ffb8c0; background: #fff; }
.btn.small, .btn-sm, .action-btn.small { min-height: 30px; padding: 6px 10px; font-size: 12px; border-radius: 7px; }
.btn-edit { background: var(--green); color: #fff; border-color: var(--green); }
.btn-del { background: var(--red); color: #fff; border-color: var(--red); }

.table-wrap, .inf-table-wrap { width: 100%; overflow-x: auto; }
.table, .admin-table, .inf-table { width: 100%; border-collapse: collapse; min-width: 860px; font-size: 12.5px; }
.table th, .admin-table th, .inf-table th { padding: 11px 12px; background: #eef7ff; color: var(--ink); border: 1px solid var(--line); text-align: left; font-weight: 800; white-space: nowrap; }
.table td, .admin-table td, .inf-table td { padding: 10px 12px; border: 1px solid var(--line); color: var(--text); vertical-align: middle; }
.table tbody tr:hover, .admin-table tbody tr:hover, .inf-table tbody tr:hover { background: #f7fbff; }
.table-footer { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 13px 16px; color: var(--text); font-size: 13px; }
.pagination { display: flex; gap: 6px; align-items: center; }
.pagination a, .pagination span { min-width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--text); font-weight: 700; }
.pagination .active { background: var(--primary); border-color: var(--primary); color: #fff; }

.status-pill, .badge, .jk-badge { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 24px; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; }
.status-green, .badge-green, .status-pill.green { background: var(--green-50); color: #079657; }
.status-red, .badge-red, .status-pill.red { background: var(--red-50); color: #df1f31; }
.status-yellow, .badge-yellow, .status-pill.yellow { background: var(--yellow-50); color: #946a00; }
.status-blue, .badge-blue, .status-pill.blue { background: var(--primary-50); color: var(--primary-700); }
.status-gray, .badge-gray, .status-pill.gray { background: #eef2f7; color: #52667a; }
.status-pink, .status-pill.pink { background: var(--pink-50); color: var(--pink); }
.jk-laki { background: #dcedff; color: var(--primary-700); }
.jk-perempuan { background: var(--pink-50); color: var(--pink); }
.jk-other { background: #eef2f7; color: #52667a; }
.td-nik, .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; }
.td-nama { font-weight: 800; color: var(--ink); }
.id-badge { min-width: 28px; height: 24px; display: inline-grid; place-items: center; padding: 0 8px; border-radius: 7px; background: var(--primary-50); color: var(--primary); font-weight: 800; }

.alert, .inf-alert { display: flex; gap: 10px; align-items: flex-start; padding: 13px 15px; border-radius: 10px; background: #eaf4ff; color: var(--primary-700); border: 1px solid #b8d9ff; font-weight: 700; margin-bottom: 14px; }

/* ===== Charts ===== */
.dashboard-grid { display: grid; grid-template-columns: 1.25fr .8fr 1fr; gap: 14px; margin-bottom: 14px; }
.dashboard-grid.two { grid-template-columns: 1fr 1fr; }
.dashboard-grid.bottom { grid-template-columns: 1.5fr .75fr; }
.chart-card { min-height: 100%; }
.bars { display: flex; align-items: end; gap: 13px; min-height: 160px; padding: 12px 6px 0; border-bottom: 1px solid var(--line); }
.bar-item { flex: 1; min-width: 40px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 7px; color: var(--ink); font-size: 11px; font-weight: 700; }
.bar { width: min(48px, 100%); min-height: 8px; border-radius: 7px 7px 0 0; background: var(--bar-color, var(--primary)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.28); }
.bar-value { color: var(--ink); font-size: 12px; font-weight: 800; }
.donut-layout { display: flex; align-items: center; justify-content: center; gap: 28px; min-height: 176px; }
.donut { width: 142px; height: 142px; border-radius: 50%; background: conic-gradient(var(--primary) 0 var(--p1, 50%), var(--pink) var(--p1, 50%) 100%); position: relative; flex: 0 0 auto; }
.donut::after { content: ''; position: absolute; inset: 35px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.donut.centered::before { content: attr(data-label); position: absolute; z-index: 1; inset: 0; display: grid; place-items: center; color: var(--ink); font-weight: 800; }
.legend { display: grid; gap: 10px; color: var(--text); font-size: 13px; }
.legend-item { display: grid; grid-template-columns: 12px 1fr; gap: 9px; align-items: start; }
.legend-dot { width: 12px; height: 12px; border-radius: 50%; margin-top: 4px; background: var(--legend-color, var(--primary)); }
.mini-list { display: grid; gap: 9px; }
.mini-row { display: grid; grid-template-columns: minmax(110px, 1fr) minmax(80px, 50% ) 54px; gap: 10px; align-items: center; font-size: 13px; }
.mini-track { height: 12px; border-radius: 999px; background: #ecf3fb; overflow: hidden; }
.mini-fill { height: 100%; width: var(--w, 0%); background: var(--bar-color, var(--primary)); border-radius: inherit; }
.line-chart { width: 100%; min-height: 180px; }
.line-chart svg { width: 100%; height: 190px; overflow: visible; }
.chart-note { color: var(--muted); font-size: 12px; margin-top: 10px; }
.summary-banner { display: flex; align-items: center; gap: 16px; padding: 16px 18px; border: 1px solid #b7d9ff; border-radius: var(--radius); background: linear-gradient(135deg, #eaf6ff, #f7fbff); color: var(--text); }
.summary-banner i { font-size: 34px; color: var(--primary); }

/* Dashboard table/cards */
.panel-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.service-grid { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.service-card .info-card-body { min-height: 218px; display: flex; flex-direction: column; gap: 12px; }
.service-icon { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 14px; color: var(--primary); background: var(--primary-50); font-size: 28px; box-shadow: var(--shadow-sm); }
.service-card-title h3 { margin: 0; color: var(--ink); font-size: 15px; line-height: 1.35; }
.service-card-title p { margin: 5px 0 0; color: var(--muted); font-size: 12px; }
.service-card .action-btn { margin-top: auto; width: 100%; }
.info-list { display: grid; gap: 7px; }
.info-list div { display: flex; justify-content: space-between; gap: 10px; padding-bottom: 7px; border-bottom: 1px solid var(--line); }
.info-list span { color: var(--text); }
.info-list strong { color: var(--ink); }
.notification-list { display: grid; gap: 9px; }
.notification-item { display: grid; grid-template-columns: 32px 1fr auto; gap: 10px; align-items: center; padding-bottom: 9px; border-bottom: 1px solid var(--line); }
.notification-item i { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; background: var(--primary-50); color: var(--primary); }
.notification-item strong { display: block; color: var(--ink); font-size: 12px; }
.notification-item span, .notification-item time { color: var(--muted); font-size: 11px; }

/* Data Penduduk compatibility */
.inf-wrap { display: flex; flex-direction: column; gap: 14px; }
.inf-header { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 4px; }
.inf-header-left { display: grid; gap: 4px; }
.inf-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: var(--primary); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.inf-header h2 { display: flex; align-items: center; gap: 14px; margin: 0; color: var(--ink); font-size: clamp(24px, 3vw, 32px); line-height: 1.15; letter-spacing: -.04em; font-weight: 800; }
.inf-header h2 i { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 17px; color: var(--primary); background: linear-gradient(135deg, #dcecff, #f6fbff); font-size: 36px; box-shadow: var(--shadow-sm); }
.inf-header-sub { margin: 0; color: var(--text); }
.inf-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.inf-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.inf-card-head { display: flex; align-items: center; gap: 12px; padding: 15px 17px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, #fff, #f9fcff); }
.inf-card-head-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; color: var(--primary); background: var(--primary-50); font-size: 21px; }
.inf-card-head h3 { margin: 0; color: var(--ink); font-size: 16px; font-weight: 800; }
.inf-card-head p { margin: 2px 0 0; color: var(--muted); font-size: 12px; }
.inf-card-body { padding: 16px; }
.form-section-title { margin: 22px 0 14px; padding: 10px 14px; display: flex; align-items: center; gap: 9px; background: #eef7ff; border-left: 4px solid var(--primary); border-radius: 0 9px 9px 0; font-size: 12px; font-weight: 800; color: var(--primary-700); letter-spacing: .03em; text-transform: uppercase; }
.form-actions { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); display: flex; gap: 10px; flex-wrap: wrap; }

/* Legacy compatibility */
.container { max-width: 1280px; margin: 0 auto; padding: 0; }
.main { display: block; padding: 0; }
.aside { display: none; }
.header.card { display: none; }
.grid, .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.kpi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.kpi .item { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; }
.note { color: var(--muted); font-size: 12px; }
.import-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.import-bar input[type="file"] { flex: 1; min-width: 240px; padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: 8px; background: #fff; }

/* Preserve old admin-* names used by modules */
.admin-wrap { display: contents; }
.admin-header { display: none; }
.admin-sidebar { display: contents; }
.admin-nav-link { display: flex; }
.admin-card-header { display: flex; align-items: center; justify-content: space-between; padding: 15px 17px; border-bottom: 1px solid var(--line); }
.admin-card-body { padding: 16px; }

/* ===== Legacy module harmonizer =====
   Many older modules still ship inline green/red styles after this stylesheet.
   The !important mappings below keep them visually aligned with the current
   navy/blue admin theme without changing their CRUD/PDF logic. */
body { background: radial-gradient(circle at 75% 0%, rgba(8,125,244,.10), transparent 32%), linear-gradient(180deg, #f7fbff 0%, var(--page) 100%) !important; color: var(--text) !important; font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif !important; }

:root {
    --g950: var(--navy-950); --g900: var(--navy-900); --g800: var(--navy-800); --g700: var(--primary-700); --g600: var(--primary); --g500: var(--primary); --g400: #6fb6ff; --g100: #dcecff; --g50: var(--primary-50);
    --berita-green-950: var(--navy-950); --berita-green-900: var(--navy-900); --berita-green-800: var(--navy-800); --berita-green-700: var(--primary-700); --berita-green-600: var(--primary); --berita-green-500: var(--primary); --berita-green-400: #6fb6ff; --berita-green-100: #dcecff; --berita-green-50: var(--primary-50); --berita-ink: var(--ink); --berita-muted: var(--muted); --berita-line: var(--line); --berita-surface: var(--surface); --berita-page: var(--page); --berita-shadow: var(--shadow); --berita-radius: var(--radius);
    --galeri-green-950: var(--navy-950); --galeri-green-900: var(--navy-900); --galeri-green-800: var(--navy-800); --galeri-green-700: var(--primary-700); --galeri-green-600: var(--primary); --galeri-green-500: var(--primary); --galeri-green-400: #6fb6ff; --galeri-green-100: #dcecff; --galeri-green-50: var(--primary-50); --galeri-ink: var(--ink); --galeri-muted: var(--muted); --galeri-line: var(--line); --galeri-surface: var(--surface); --galeri-page: var(--page); --galeri-shadow: var(--shadow); --galeri-radius: var(--radius);
    --pengumuman-green-950: var(--navy-950); --pengumuman-green-900: var(--navy-900); --pengumuman-green-800: var(--navy-800); --pengumuman-green-700: var(--primary-700); --pengumuman-green-600: var(--primary); --pengumuman-green-500: var(--primary); --pengumuman-green-400: #6fb6ff; --pengumuman-green-100: #dcecff; --pengumuman-green-50: var(--primary-50); --pengumuman-ink: var(--ink); --pengumuman-muted: var(--muted); --pengumuman-line: var(--line); --pengumuman-surface: var(--surface); --pengumuman-page: var(--page); --pengumuman-shadow: var(--shadow); --pengumuman-radius: var(--radius);
    --pot-green-950: var(--navy-950); --pot-green-900: var(--navy-900); --pot-green-800: var(--navy-800); --pot-green-700: var(--primary-700); --pot-green-600: var(--primary); --pot-green-500: var(--primary); --pot-green-400: #6fb6ff; --pot-green-100: #dcecff; --pot-green-50: var(--primary-50); --pot-ink: var(--ink); --pot-muted: var(--muted); --pot-line: var(--line); --pot-surface: var(--surface); --pot-page: var(--page); --pot-shadow: var(--shadow); --pot-radius: var(--radius);
    --info-green-950: var(--navy-950); --info-green-900: var(--navy-900); --info-green-800: var(--navy-800); --info-green-700: var(--primary-700); --info-green-600: var(--primary); --info-green-500: var(--primary); --info-green-400: #6fb6ff; --info-green-100: #dcecff; --info-green-50: var(--primary-50); --info-ink: var(--ink); --info-muted: var(--muted); --info-line: var(--line); --info-surface: var(--surface); --info-page: var(--page); --info-shadow: var(--shadow); --info-radius: var(--radius);
    --layanan-green-950: var(--navy-950); --layanan-green-900: var(--navy-900); --layanan-green-800: var(--navy-800); --layanan-green-700: var(--primary-700); --layanan-green-600: var(--primary); --layanan-green-500: var(--primary); --layanan-green-400: #6fb6ff; --layanan-green-100: #dcecff; --layanan-green-50: var(--primary-50); --layanan-ink: var(--ink); --layanan-muted: var(--muted); --layanan-line: var(--line); --layanan-surface: var(--surface); --layanan-page: var(--page); --layanan-shadow: var(--shadow); --layanan-radius: var(--radius);
}

.page-head, .master-head { align-items: center !important; margin-bottom: 18px !important; }
.page-head h2, .master-head h2 { color: var(--ink) !important; font-size: clamp(23px, 3vw, 32px) !important; letter-spacing: -.04em !important; }
.page-head p, .master-head p { color: var(--text) !important; font-size: 13px !important; }
.cardx, .surat-card, .menu-card { background: var(--surface) !important; border: 1px solid var(--line) !important; border-radius: var(--radius) !important; box-shadow: var(--shadow) !important; }
.cardx::after, .surat-card::after { background: radial-gradient(circle, rgba(8,125,244,.10), transparent 70%) !important; }
.cardx:hover, .surat-card:hover { border-color: #a9d0ff !important; box-shadow: var(--shadow-lg) !important; }
.cardx h3, .surat-card h3, .menu-card h3 { color: var(--ink) !important; }
.cardx p, .surat-card p, .menu-card p { color: var(--muted) !important; }

[class$='-page']:not(.app-main), .berita-page, .galeri-page, .pengumuman-page, .pot-page, .info-page, .layanan-page, .domisili-page { padding: 0 !important; background: transparent !important; }
.berita-header, .galeri-header, .pengumuman-header, .pot-header, .info-header, .layanan-header, .domisili-header { background: linear-gradient(135deg, var(--navy-950), var(--navy-800), var(--primary-700)) !important; border-radius: var(--radius) !important; box-shadow: var(--shadow-lg) !important; }
.berita-eyebrow, .galeri-eyebrow, .pengumuman-eyebrow, .pot-eyebrow, .info-eyebrow, .layanan-eyebrow, .domisili-eyebrow, .master-eyebrow { color: #b6d8ff !important; }
.berita-title-icon, .galeri-title-icon, .pengumuman-title-icon, .pot-title-icon, .info-title-icon, .layanan-title-icon { color: #b6d8ff !important; filter: none !important; }
.berita-description, .galeri-description, .pengumuman-description, .pot-description, .info-description, .layanan-description, .domisili-desc { color: rgba(255,255,255,.78) !important; }
.berita-live-dot, .galeri-live-dot, .pengumuman-live-dot, .pot-live-dot, .info-live-dot, .layanan-live-dot, .live-dot { background: #6fb6ff !important; }

.berita-panel, .galeri-panel, .pengumuman-panel, .pot-panel, .info-panel, .layanan-panel, .master-panel { background: var(--surface) !important; border: 1px solid var(--line) !important; border-radius: var(--radius) !important; box-shadow: var(--shadow) !important; }
.berita-panel-head, .galeri-panel-head, .pengumuman-panel-head, .pot-panel-head, .info-panel-head, .layanan-panel-head, .master-panel-head { background: linear-gradient(180deg, #fff, #f9fcff) !important; border-bottom: 1px solid var(--line) !important; }
.berita-panel-icon, .galeri-panel-icon, .pengumuman-panel-icon, .pot-panel-icon, .info-panel-icon, .layanan-panel-icon { background: var(--primary-50) !important; color: var(--primary) !important; box-shadow: var(--shadow-sm) !important; }
.berita-panel-title h3, .galeri-panel-title h3, .pengumuman-panel-title h3, .pot-panel-title h3, .info-panel-title h3, .layanan-panel-title h3, .master-panel-head h3 { color: var(--ink) !important; }
.berita-panel-title p, .galeri-panel-title p, .pengumuman-panel-title p, .pot-panel-title p, .info-panel-title p, .layanan-panel-title p, .master-panel-head p { color: var(--muted) !important; }

.berita-btn, .galeri-btn, .pengumuman-btn, .pot-btn, .info-btn, .layanan-btn, .domisili-btn, .master-btn { border-radius: 8px !important; box-shadow: var(--shadow-sm) !important; }
.berita-btn-primary, .galeri-btn-primary, .pengumuman-btn-primary, .pot-btn-primary, .info-btn-primary, .layanan-btn-primary, .domisili-btn-primary, .master-btn-primary { background: var(--primary) !important; color: #fff !important; border: 1px solid var(--primary) !important; }
.berita-btn-light, .galeri-btn-light, .pengumuman-btn-light, .pot-btn-light, .info-btn-light, .layanan-btn-light, .domisili-btn-light, .master-btn-light, .berita-btn-ghost, .galeri-btn-ghost, .pengumuman-btn-ghost, .pot-btn-ghost, .info-btn-ghost, .layanan-btn-ghost, .master-btn-light { background: #fff !important; color: var(--primary) !important; border: 1px solid #a9d0ff !important; }
.berita-btn-delete, .galeri-btn-delete, .pengumuman-btn-delete, .pot-btn-delete, .info-btn-delete, .layanan-btn-delete, .master-btn-danger { background: var(--red) !important; color: #fff !important; border: 1px solid var(--red) !important; }
.berita-btn-edit, .galeri-btn-edit, .pengumuman-btn-edit, .pot-btn-edit, .info-btn-edit, .layanan-btn-edit { background: var(--green) !important; color: #fff !important; border: 1px solid var(--green) !important; }

.berita-toolbar, .galeri-toolbar, .pengumuman-toolbar, .pot-toolbar, .info-toolbar, .layanan-toolbar { margin-bottom: 16px !important; }
.berita-search input, .galeri-search input, .pengumuman-search input, .pot-search input, .info-search input, .layanan-search input,
.berita-filter, .galeri-filter, .pengumuman-filter, .pot-filter, .info-filter, .layanan-filter,
.berita-input, .galeri-input, .pengumuman-input, .pot-input, .info-input, .layanan-input, .domisili-input, .master-input { background: #fff !important; border: 1px solid var(--line-strong) !important; color: var(--text) !important; border-radius: 8px !important; }
.berita-search i, .galeri-search i, .pengumuman-search i, .pot-search i, .info-search i, .layanan-search i { color: var(--primary) !important; }
.berita-stat, .galeri-stat, .pengumuman-stat, .pot-stat, .info-stat, .layanan-stat { background: var(--primary-50) !important; color: var(--primary-700) !important; border-color: #b8d9ff !important; }

.berita-table-wrap, .galeri-table-wrap, .pengumuman-table-wrap, .pot-table-wrap, .info-table-wrap, .layanan-table-wrap, .master-table-wrap { border: 1px solid var(--line) !important; border-radius: var(--radius) !important; overflow-x: auto !important; }
.berita-table, .galeri-table, .pengumuman-table, .pot-table, .info-table, .layanan-table, .master-table { border-collapse: collapse !important; font-size: 12.5px !important; }
.berita-table th, .galeri-table th, .pengumuman-table th, .pot-table th, .info-table th, .layanan-table th, .master-table th { background: #eef7ff !important; color: var(--ink) !important; border: 1px solid var(--line) !important; }
.berita-table td, .galeri-table td, .pengumuman-table td, .pot-table td, .info-table td, .layanan-table td, .master-table td { border: 1px solid var(--line) !important; color: var(--text) !important; }
.berita-table tbody tr:hover, .galeri-table tbody tr:hover, .pengumuman-table tbody tr:hover, .pot-table tbody tr:hover, .info-table tbody tr:hover, .layanan-table tbody tr:hover, .master-table tbody tr:hover { background: #f7fbff !important; }

.master-stat { background: var(--surface) !important; border-color: var(--line) !important; box-shadow: var(--shadow) !important; }
.master-stat i, .master-section { color: var(--primary) !important; background: var(--primary-50) !important; border-color: #b8d9ff !important; }
.type-badge, .status-badge, .badge.pending { background: var(--primary-50) !important; color: var(--primary-700) !important; }
.status-active { background: var(--green-50) !important; color: #079657 !important; }
.status-inactive { background: #eef2f7 !important; color: #52667a !important; }
.cover, .cover-img, .berita-image, .galeri-image, .pengumuman-image, .pot-image, .info-image { border-radius: 12px !important; border: 1px solid var(--line) !important; box-shadow: var(--shadow-sm) !important; object-fit: cover !important; }

/* ===== Reinforced theme harmonizer for remaining large modules ===== */
:root {
    --pot-green-950: var(--navy-950) !important; --pot-green-900: var(--navy-900) !important; --pot-green-800: var(--navy-800) !important; --pot-green-700: var(--primary-700) !important; --pot-green-600: var(--primary) !important; --pot-green-500: var(--primary) !important; --pot-green-400: #6fb6ff !important; --pot-green-100: #dcecff !important; --pot-green-50: var(--primary-50) !important; --pot-ink: var(--ink) !important; --pot-muted: var(--muted) !important; --pot-line: var(--line) !important; --pot-surface: var(--surface) !important; --pot-page: var(--page) !important; --pot-shadow: var(--shadow) !important; --pot-radius: var(--radius) !important;
    --sotk-green-950: var(--navy-950) !important; --sotk-green-900: var(--navy-900) !important; --sotk-green-800: var(--navy-800) !important; --sotk-green-700: var(--primary-700) !important; --sotk-green-600: var(--primary) !important; --sotk-green-500: var(--primary) !important; --sotk-green-400: #6fb6ff !important; --sotk-green-100: #dcecff !important; --sotk-green-50: var(--primary-50) !important; --sotk-ink: var(--ink) !important; --sotk-muted: var(--muted) !important; --sotk-line: var(--line) !important; --sotk-surface: var(--surface) !important; --sotk-page: var(--page) !important; --sotk-shadow: var(--shadow) !important; --sotk-radius: var(--radius) !important;
    --pst-green-950: var(--navy-950) !important; --pst-green-900: var(--navy-900) !important; --pst-green-800: var(--navy-800) !important; --pst-green-700: var(--primary-700) !important; --pst-green-600: var(--primary) !important; --pst-green-500: var(--primary) !important; --pst-green-400: #6fb6ff !important; --pst-green-100: #dcecff !important; --pst-green-50: var(--primary-50) !important; --pst-ink: var(--ink) !important; --pst-muted: var(--muted) !important; --pst-line: var(--line) !important; --pst-surface: var(--surface) !important; --pst-page: var(--page) !important; --pst-shadow: var(--shadow) !important; --pst-radius: var(--radius) !important;
    --ppid-green-950: var(--navy-950) !important; --ppid-green-900: var(--navy-900) !important; --ppid-green-800: var(--navy-800) !important; --ppid-green-700: var(--primary-700) !important; --ppid-green-600: var(--primary) !important; --ppid-green-500: var(--primary) !important; --ppid-green-400: #6fb6ff !important; --ppid-green-100: #dcecff !important; --ppid-green-50: var(--primary-50) !important; --ppid-blue-500: var(--primary) !important; --ppid-yellow-500: var(--yellow) !important; --ppid-orange-500: var(--orange) !important; --ppid-red-500: var(--red) !important; --ppid-ink: var(--ink) !important; --ppid-muted: var(--muted) !important; --ppid-line: var(--line) !important; --ppid-surface: var(--surface) !important; --ppid-page: var(--page) !important; --ppid-shadow: var(--shadow) !important; --ppid-radius: var(--radius) !important;
}

.sotk-page, .pst-page, .ppid-page, .pot-page { padding: 0 !important; background: transparent !important; }
.sotk-header, .pst-header, .ppid-header, .pot-header { background: linear-gradient(135deg, var(--navy-950), var(--navy-800), var(--primary-700)) !important; border-radius: var(--radius) !important; box-shadow: var(--shadow-lg) !important; }
.sotk-eyebrow, .pst-eyebrow, .ppid-eyebrow, .pot-eyebrow { color: #b6d8ff !important; }
.sotk-title-icon, .pst-title-icon, .ppid-title-icon, .pot-title-icon { color: #b6d8ff !important; filter: none !important; }
.sotk-description, .pst-description, .ppid-description, .pot-description { color: rgba(255,255,255,.78) !important; }
.sotk-live-dot, .pst-live-dot, .ppid-live-dot, .pot-live-dot { background: #6fb6ff !important; }
.sotk-panel, .pst-panel, .ppid-panel, .pot-panel { background: var(--surface) !important; border: 1px solid var(--line) !important; border-radius: var(--radius) !important; box-shadow: var(--shadow) !important; }
.sotk-panel-head, .pst-panel-head, .ppid-panel-head, .pot-panel-head { background: linear-gradient(180deg, #fff, #f9fcff) !important; border-bottom: 1px solid var(--line) !important; }
.sotk-panel-icon, .pst-panel-icon, .ppid-panel-icon, .pot-panel-icon, .sotk-avatar, .pst-avatar, .ppid-avatar, .pot-avatar { background: var(--primary-50) !important; color: var(--primary) !important; box-shadow: var(--shadow-sm) !important; }
.sotk-panel-title h3, .pst-panel-title h3, .ppid-panel-title h3, .pot-panel-title h3, .sotk-name, .pst-title, .ppid-title-text, .pot-title { color: var(--ink) !important; }
.sotk-panel-title p, .pst-panel-title p, .ppid-panel-title p, .pot-panel-title p, .sotk-subtext, .pst-description-small, .ppid-subtitle, .pot-summary { color: var(--muted) !important; }
.sotk-btn, .pst-btn, .ppid-btn, .pot-btn { border-radius: 8px !important; box-shadow: var(--shadow-sm) !important; }
.sotk-btn-primary, .pst-btn-primary, .ppid-btn-primary, .pot-btn-primary { background: var(--primary) !important; color: #fff !important; border: 1px solid var(--primary) !important; }
.sotk-btn-light, .pst-btn-light, .ppid-btn-light, .pot-btn-light, .sotk-btn-ghost, .pst-btn-ghost, .ppid-btn-ghost, .pot-btn-ghost { background: #fff !important; color: var(--primary) !important; border: 1px solid #a9d0ff !important; }
.sotk-btn-edit, .pst-btn-edit, .ppid-btn-edit, .pot-btn-edit { background: var(--green) !important; color: #fff !important; border: 1px solid var(--green) !important; }
.sotk-btn-delete, .pst-btn-delete, .ppid-btn-delete, .pot-btn-delete { background: var(--red) !important; color: #fff !important; border: 1px solid var(--red) !important; }
.sotk-btn-view, .pst-btn-view, .pst-btn-pdf, .ppid-btn-view, .pot-btn-image, .pot-btn-video { background: var(--primary) !important; color: #fff !important; border: 1px solid var(--primary) !important; }
.sotk-search input, .pst-search input, .ppid-search input, .pot-search input, .sotk-input, .pst-input, .ppid-input, .pot-input, .pst-filter, .ppid-filter, .pot-filter { background: #fff !important; border: 1px solid var(--line-strong) !important; color: var(--text) !important; border-radius: 8px !important; }
.sotk-search i, .pst-search i, .ppid-search i, .pot-search i { color: var(--primary) !important; }
.sotk-stat, .pst-stat, .ppid-stat, .pot-stat, .sotk-order, .sotk-position, .pst-category, .pst-status, .ppid-badge, .pot-dusun, .pot-category { background: var(--primary-50) !important; color: var(--primary-700) !important; border: 1px solid #b8d9ff !important; }
.sotk-table-wrap, .pst-table-wrap, .ppid-table-wrap, .pot-table-wrap { border: 1px solid var(--line) !important; border-radius: var(--radius) !important; overflow-x: auto !important; }
.sotk-table, .pst-table, .ppid-table, .pot-table { border-collapse: collapse !important; font-size: 12.5px !important; }
.sotk-table th, .pst-table th, .ppid-table th, .pot-table th { background: #eef7ff !important; color: var(--ink) !important; border: 1px solid var(--line) !important; }
.sotk-table td, .pst-table td, .ppid-table td, .pot-table td { border: 1px solid var(--line) !important; color: var(--text) !important; }
.sotk-table tbody tr:hover, .pst-table tbody tr:hover, .ppid-table tbody tr:hover, .pot-table tbody tr:hover { background: #f7fbff !important; }
.sotk-photo, .pst-cover, .pst-cover-preview, .pot-image, .pot-preview, .cover-img { width: 112px !important; height: 78px !important; object-fit: cover !important; border-radius: 12px !important; border: 1px solid var(--line) !important; box-shadow: var(--shadow-sm) !important; }
.preview { max-width: 360px !important; width: 100% !important; height: 220px !important; object-fit: cover !important; border-radius: 12px !important; border: 1px solid var(--line) !important; box-shadow: var(--shadow-sm) !important; margin-top: 10px !important; }
.cover-img { width: 104px !important; height: 72px !important; display: block !important; }

/* ===== APBDes and Surat Desa harmonizer ===== */
.admin-content[data-page="apbdes.php"] .dashboard-grid.two { align-items: start; }
.admin-content[data-page="apbdes.php"] .admin-table { min-width: 620px; }
.admin-content[data-page="apbdes.php"] .stat-card .stat-value { font-size: clamp(18px, 2vw, 24px); }

.admin-content[data-page="surat_keterangan.php"] .service-card .info-card-body { min-height: 205px; }
.admin-content[data-page="surat_keterangan.php"] .service-icon { background: linear-gradient(135deg, #dcecff, #f6fbff); }

:root {
    --waris-green-950: var(--navy-950) !important; --waris-green-900: var(--navy-900) !important; --waris-green-800: var(--navy-800) !important; --waris-green-700: var(--primary-700) !important; --waris-green-600: var(--primary) !important; --waris-green-500: var(--primary) !important; --waris-green-400: #6fb6ff !important; --waris-green-100: #dcecff !important; --waris-green-50: var(--primary-50) !important; --waris-blue-500: var(--primary) !important; --waris-yellow-500: var(--yellow) !important; --waris-orange-500: var(--orange) !important; --waris-red-500: var(--red) !important; --waris-ink: var(--ink) !important; --waris-muted: var(--muted) !important; --waris-line: var(--line) !important; --waris-surface: var(--surface) !important; --waris-page: var(--page) !important; --waris-shadow: var(--shadow) !important; --waris-radius: var(--radius) !important;
    --sbb-green-950: var(--navy-950) !important; --sbb-green-900: var(--navy-900) !important; --sbb-green-800: var(--navy-800) !important; --sbb-green-700: var(--primary-700) !important; --sbb-green-600: var(--primary) !important; --sbb-green-500: var(--primary) !important; --sbb-green-400: #6fb6ff !important; --sbb-green-100: #dcecff !important; --sbb-green-50: var(--primary-50) !important; --sbb-blue-500: var(--primary) !important; --sbb-yellow-500: var(--yellow) !important; --sbb-orange-500: var(--orange) !important; --sbb-red-500: var(--red) !important; --sbb-ink: var(--ink) !important; --sbb-muted: var(--muted) !important; --sbb-line: var(--line) !important; --sbb-surface: var(--surface) !important; --sbb-page: var(--page) !important; --sbb-shadow: var(--shadow) !important; --sbb-radius: var(--radius) !important;
    --sbm-green-950: var(--navy-950) !important; --sbm-green-900: var(--navy-900) !important; --sbm-green-800: var(--navy-800) !important; --sbm-green-700: var(--primary-700) !important; --sbm-green-600: var(--primary) !important; --sbm-green-500: var(--primary) !important; --sbm-green-400: #6fb6ff !important; --sbm-green-100: #dcecff !important; --sbm-green-50: var(--primary-50) !important; --sbm-blue: var(--primary) !important; --sbm-yellow: var(--yellow) !important; --sbm-orange: var(--orange) !important; --sbm-red: var(--red) !important; --sbm-ink: var(--ink) !important; --sbm-muted: var(--muted) !important; --sbm-line: var(--line) !important; --sbm-surface: var(--surface) !important; --sbm-page: var(--page) !important; --sbm-shadow: var(--shadow) !important; --sbm-radius: var(--radius) !important;
    --gadai-green-950: var(--navy-950) !important; --gadai-green-900: var(--navy-900) !important; --gadai-green-800: var(--navy-800) !important; --gadai-green-700: var(--primary-700) !important; --gadai-green-600: var(--primary) !important; --gadai-green-500: var(--primary) !important; --gadai-green-400: #6fb6ff !important; --gadai-green-100: #dcecff !important; --gadai-green-50: var(--primary-50) !important; --gadai-blue-500: var(--primary) !important; --gadai-yellow-500: var(--yellow) !important; --gadai-orange-500: var(--orange) !important; --gadai-red-500: var(--red) !important; --gadai-ink: var(--ink) !important; --gadai-muted: var(--muted) !important; --gadai-line: var(--line) !important; --gadai-surface: var(--surface) !important; --gadai-page: var(--page) !important; --gadai-shadow: var(--shadow) !important; --gadai-radius: var(--radius) !important;
    --skkb-green-950: var(--navy-950) !important; --skkb-green-900: var(--navy-900) !important; --skkb-green-800: var(--navy-800) !important; --skkb-green-700: var(--primary-700) !important; --skkb-green-600: var(--primary) !important; --skkb-green-500: var(--primary) !important; --skkb-green-400: #6fb6ff !important; --skkb-green-100: #dcecff !important; --skkb-green-50: var(--primary-50) !important; --skkb-blue-500: var(--primary) !important; --skkb-yellow-500: var(--yellow) !important; --skkb-orange-500: var(--orange) !important; --skkb-red-500: var(--red) !important; --skkb-purple-500: var(--purple) !important; --skkb-ink: var(--ink) !important; --skkb-muted: var(--muted) !important; --skkb-line: var(--line) !important; --skkb-surface: var(--surface) !important; --skkb-page: var(--page) !important; --skkb-shadow: var(--shadow) !important; --skkb-radius: var(--radius) !important;
    --nikah-green-950: var(--navy-950) !important; --nikah-green-900: var(--navy-900) !important; --nikah-green-800: var(--navy-800) !important; --nikah-green-700: var(--primary-700) !important; --nikah-green-600: var(--primary) !important; --nikah-green-500: var(--primary) !important; --nikah-green-400: #6fb6ff !important; --nikah-green-100: #dcecff !important; --nikah-green-50: var(--primary-50) !important; --nikah-blue-500: var(--primary) !important; --nikah-yellow-500: var(--yellow) !important; --nikah-orange-500: var(--orange) !important; --nikah-pink-500: var(--pink) !important; --nikah-purple-500: var(--purple) !important; --nikah-red-500: var(--red) !important; --nikah-ink: var(--ink) !important; --nikah-muted: var(--muted) !important; --nikah-line: var(--line) !important; --nikah-surface: var(--surface) !important; --nikah-page: var(--page) !important; --nikah-shadow: var(--shadow) !important; --nikah-radius: var(--radius) !important;
    --pwaris-green-950: var(--navy-950) !important; --pwaris-green-900: var(--navy-900) !important; --pwaris-green-800: var(--navy-800) !important; --pwaris-green-700: var(--primary-700) !important; --pwaris-green-600: var(--primary) !important; --pwaris-green-500: var(--primary) !important; --pwaris-green-400: #6fb6ff !important; --pwaris-green-100: #dcecff !important; --pwaris-green-50: var(--primary-50) !important; --pwaris-blue-500: var(--primary) !important; --pwaris-yellow-500: var(--yellow) !important; --pwaris-orange-500: var(--orange) !important; --pwaris-purple-500: var(--purple) !important; --pwaris-red-500: var(--red) !important; --pwaris-ink: var(--ink) !important; --pwaris-muted: var(--muted) !important; --pwaris-line: var(--line) !important; --pwaris-surface: var(--surface) !important; --pwaris-page: var(--page) !important; --pwaris-shadow: var(--shadow) !important; --pwaris-radius: var(--radius) !important;
    --sph-green-950: var(--navy-950) !important; --sph-green-900: var(--navy-900) !important; --sph-green-800: var(--navy-800) !important; --sph-green-700: var(--primary-700) !important; --sph-green-600: var(--primary) !important; --sph-green-500: var(--primary) !important; --sph-green-400: #6fb6ff !important; --sph-green-100: #dcecff !important; --sph-green-50: var(--primary-50) !important; --sph-blue-500: var(--primary) !important; --sph-yellow-500: var(--yellow) !important; --sph-orange-500: var(--orange) !important; --sph-red-500: var(--red) !important; --sph-purple-500: var(--purple) !important; --sph-ink: var(--ink) !important; --sph-muted: var(--muted) !important; --sph-line: var(--line) !important; --sph-surface: var(--surface) !important; --sph-page: var(--page) !important; --sph-shadow: var(--shadow) !important; --sph-radius: var(--radius) !important;
    --kayu-green-950: var(--navy-950) !important; --kayu-green-900: var(--navy-900) !important; --kayu-green-800: var(--navy-800) !important; --kayu-green-700: var(--primary-700) !important; --kayu-green-600: var(--primary) !important; --kayu-green-500: var(--primary) !important; --kayu-green-400: #6fb6ff !important; --kayu-green-100: #dcecff !important; --kayu-green-50: var(--primary-50) !important; --kayu-blue-500: var(--primary) !important; --kayu-yellow-500: var(--yellow) !important; --kayu-orange-500: var(--orange) !important; --kayu-red-500: var(--red) !important; --kayu-ink: var(--ink) !important; --kayu-muted: var(--muted) !important; --kayu-line: var(--line) !important; --kayu-surface: var(--surface) !important; --kayu-page: var(--page) !important; --kayu-shadow: var(--shadow) !important; --kayu-radius: var(--radius) !important;
    --kesanggupan-green-950: var(--navy-950) !important; --kesanggupan-green-900: var(--navy-900) !important; --kesanggupan-green-800: var(--navy-800) !important; --kesanggupan-green-700: var(--primary-700) !important; --kesanggupan-green-600: var(--primary) !important; --kesanggupan-green-500: var(--primary) !important; --kesanggupan-green-400: #6fb6ff !important; --kesanggupan-green-100: #dcecff !important; --kesanggupan-green-50: var(--primary-50) !important; --kesanggupan-blue-500: var(--primary) !important; --kesanggupan-yellow-500: var(--yellow) !important; --kesanggupan-orange-500: var(--orange) !important; --kesanggupan-purple-500: var(--purple) !important; --kesanggupan-red-500: var(--red) !important; --kesanggupan-ink: var(--ink) !important; --kesanggupan-muted: var(--muted) !important; --kesanggupan-line: var(--line) !important; --kesanggupan-surface: var(--surface) !important; --kesanggupan-page: var(--page) !important; --kesanggupan-shadow: var(--shadow) !important; --kesanggupan-radius: var(--radius) !important;
    --undangan-green-950: var(--navy-950) !important; --undangan-green-900: var(--navy-900) !important; --undangan-green-800: var(--navy-800) !important; --undangan-green-700: var(--primary-700) !important; --undangan-green-600: var(--primary) !important; --undangan-green-500: var(--primary) !important; --undangan-green-400: #6fb6ff !important; --undangan-green-100: #dcecff !important; --undangan-green-50: var(--primary-50) !important; --undangan-blue-500: var(--primary) !important; --undangan-yellow-500: var(--yellow) !important; --undangan-orange-500: var(--orange) !important; --undangan-red-500: var(--red) !important; --undangan-ink: var(--ink) !important; --undangan-muted: var(--muted) !important; --undangan-line: var(--line) !important; --undangan-surface: var(--surface) !important; --undangan-page: var(--page) !important; --undangan-shadow: var(--shadow) !important; --undangan-radius: var(--radius) !important;
}

.sktm-page, .domisili-page, .hilang-page, .keramaian-page, .pindah-page, .merantau-page, .usaha-page, .kuasa-page, .ortu-page, .waris-page, .gadai-page, .sbm-page, .sbb-page, .sph-page, .skkb-page, .nikah-page, .kesanggupan-page, .kayu-page, .undangan-page, .pwaris-page { padding: 0 !important; background: transparent !important; }
.sktm-header, .domisili-header, .hilang-header, .keramaian-header, .pindah-header, .merantau-header, .usaha-header, .kuasa-header, .ortu-header, .waris-header, .gadai-header, .sbm-header, .sbb-header, .sph-header, .skkb-header, .nikah-header, .kesanggupan-header, .kayu-header, .undangan-header, .pwaris-header { background: linear-gradient(135deg, var(--navy-950), var(--navy-800), var(--primary-700)) !important; border-radius: var(--radius) !important; box-shadow: var(--shadow-lg) !important; }
.sktm-eyebrow, .domisili-eyebrow, .hilang-eyebrow, .keramaian-eyebrow, .pindah-eyebrow, .merantau-eyebrow, .usaha-eyebrow, .kuasa-eyebrow, .ortu-eyebrow, .waris-eyebrow, .gadai-eyebrow, .sbm-eyebrow, .sbb-eyebrow, .sph-eyebrow, .skkb-eyebrow, .nikah-eyebrow, .kesanggupan-eyebrow, .kayu-eyebrow, .undangan-eyebrow, .pwaris-eyebrow { color: #b6d8ff !important; }
.sktm-title-icon, .domisili-title-icon, .hilang-title-icon, .keramaian-title-icon, .pindah-title-icon, .merantau-title-icon, .usaha-title-icon, .kuasa-title-icon, .ortu-title-icon, .waris-title-icon, .gadai-title-icon, .sbm-title-icon, .sbb-title-icon, .sph-title-icon, .skkb-title-icon, .nikah-title-icon, .kesanggupan-title-icon, .kayu-title-icon, .undangan-title-icon, .pwaris-title-icon { color: #b6d8ff !important; filter: none !important; }
.sktm-description, .domisili-description, .hilang-description, .keramaian-description, .pindah-description, .merantau-description, .usaha-description, .kuasa-description, .ortu-description, .waris-description, .gadai-description, .sbm-description, .sbb-description, .sph-description, .skkb-description, .nikah-description, .kesanggupan-description, .kayu-description, .undangan-description, .pwaris-description { color: rgba(255,255,255,.78) !important; }
.sktm-live-dot, .domisili-live-dot, .hilang-live-dot, .keramaian-live-dot, .pindah-live-dot, .merantau-live-dot, .usaha-live-dot, .kuasa-live-dot, .ortu-live-dot, .waris-live-dot, .gadai-live-dot, .sbm-live-dot, .sbb-live-dot, .sph-live-dot, .skkb-live-dot, .nikah-live-dot, .kesanggupan-live-dot, .kayu-live-dot, .undangan-live-dot, .pwaris-live-dot { background: #6fb6ff !important; }
.sktm-panel, .domisili-panel, .hilang-panel, .keramaian-panel, .pindah-panel, .merantau-panel, .usaha-panel, .kuasa-panel, .ortu-panel, .waris-panel, .gadai-panel, .sbm-panel, .sbb-panel, .sph-panel, .skkb-panel, .nikah-panel, .kesanggupan-panel, .kayu-panel, .undangan-panel, .pwaris-panel { background: var(--surface) !important; border: 1px solid var(--line) !important; border-radius: var(--radius) !important; box-shadow: var(--shadow) !important; }
.sktm-panel-head, .domisili-panel-head, .hilang-panel-head, .keramaian-panel-head, .pindah-panel-head, .merantau-panel-head, .usaha-panel-head, .kuasa-panel-head, .ortu-panel-head, .waris-panel-head, .gadai-panel-head, .sbm-panel-head, .sbb-panel-head, .sph-panel-head, .skkb-panel-head, .nikah-panel-head, .kesanggupan-panel-head, .kayu-panel-head, .undangan-panel-head, .pwaris-panel-head { background: linear-gradient(180deg, #fff, #f9fcff) !important; border-bottom: 1px solid var(--line) !important; }
.sktm-panel-icon, .domisili-panel-icon, .hilang-panel-icon, .keramaian-panel-icon, .pindah-panel-icon, .merantau-panel-icon, .usaha-panel-icon, .kuasa-panel-icon, .ortu-panel-icon, .waris-panel-icon, .gadai-panel-icon, .sbm-panel-icon, .sbb-panel-icon, .sph-panel-icon, .skkb-panel-icon, .nikah-panel-icon, .kesanggupan-panel-icon, .kayu-panel-icon, .undangan-panel-icon, .pwaris-panel-icon { background: var(--primary-50) !important; color: var(--primary) !important; box-shadow: var(--shadow-sm) !important; }
.sktm-panel-title h3, .domisili-panel-title h3, .hilang-panel-title h3, .keramaian-panel-title h3, .pindah-panel-title h3, .merantau-panel-title h3, .usaha-panel-title h3, .kuasa-panel-title h3, .ortu-panel-title h3, .waris-panel-title h3, .gadai-panel-title h3, .sbm-panel-title h3, .sbb-panel-title h3, .sph-panel-title h3, .skkb-panel-title h3, .nikah-panel-title h3, .kesanggupan-panel-title h3, .kayu-panel-title h3, .undangan-panel-title h3, .pwaris-panel-title h3 { color: var(--ink) !important; }
.sktm-panel-title p, .domisili-panel-title p, .hilang-panel-title p, .keramaian-panel-title p, .pindah-panel-title p, .merantau-panel-title p, .usaha-panel-title p, .kuasa-panel-title p, .ortu-panel-title p, .waris-panel-title p, .gadai-panel-title p, .sbm-panel-title p, .sbb-panel-title p, .sph-panel-title p, .skkb-panel-title p, .nikah-panel-title p, .kesanggupan-panel-title p, .kayu-panel-title p, .undangan-panel-title p, .pwaris-panel-title p { color: var(--muted) !important; }
.sktm-btn, .domisili-btn, .hilang-btn, .keramaian-btn, .pindah-btn, .merantau-btn, .usaha-btn, .kuasa-btn, .ortu-btn, .waris-btn, .gadai-btn, .sbm-btn, .sbb-btn, .sph-btn, .skkb-btn, .nikah-btn, .kesanggupan-btn, .kayu-btn, .undangan-btn, .pwaris-btn { border-radius: 8px !important; box-shadow: var(--shadow-sm) !important; }
.sktm-btn-primary, .domisili-btn-primary, .hilang-btn-primary, .keramaian-btn-primary, .pindah-btn-primary, .merantau-btn-primary, .usaha-btn-primary, .kuasa-btn-primary, .ortu-btn-primary, .waris-btn-primary, .gadai-btn-primary, .sbm-btn-primary, .sbb-btn-primary, .sph-btn-primary, .skkb-btn-primary, .nikah-btn-primary, .kesanggupan-btn-primary, .kayu-btn-primary, .undangan-btn-primary, .pwaris-btn-primary { background: var(--primary) !important; color: #fff !important; border: 1px solid var(--primary) !important; }
.sktm-btn-light, .domisili-btn-light, .hilang-btn-light, .keramaian-btn-light, .pindah-btn-light, .merantau-btn-light, .usaha-btn-light, .kuasa-btn-light, .ortu-btn-light, .waris-btn-light, .gadai-btn-light, .sbm-btn-light, .sbb-btn-light, .sph-btn-light, .skkb-btn-light, .nikah-btn-light, .kesanggupan-btn-light, .kayu-btn-light, .undangan-btn-light, .pwaris-btn-light, .sktm-btn-ghost, .domisili-btn-ghost, .hilang-btn-ghost, .keramaian-btn-ghost, .pindah-btn-ghost, .merantau-btn-ghost, .usaha-btn-ghost, .kuasa-btn-ghost, .ortu-btn-ghost, .waris-btn-ghost, .gadai-btn-ghost, .sbm-btn-ghost, .sbb-btn-ghost, .sph-btn-ghost, .skkb-btn-ghost, .nikah-btn-ghost, .kesanggupan-btn-ghost, .kayu-btn-ghost, .undangan-btn-ghost, .pwaris-btn-ghost { background: #fff !important; color: var(--primary) !important; border: 1px solid #a9d0ff !important; }
.sktm-btn-delete, .domisili-btn-delete, .hilang-btn-delete, .keramaian-btn-delete, .pindah-btn-delete, .merantau-btn-delete, .usaha-btn-delete, .kuasa-btn-delete, .ortu-btn-delete, .waris-btn-delete, .gadai-btn-delete, .sbm-btn-delete, .sbb-btn-delete, .sph-btn-delete, .skkb-btn-delete, .nikah-btn-delete, .kesanggupan-btn-delete, .kayu-btn-delete, .undangan-btn-delete, .pwaris-btn-delete { background: var(--red) !important; color: #fff !important; border: 1px solid var(--red) !important; }
.sktm-btn-edit, .domisili-btn-edit, .hilang-btn-edit, .keramaian-btn-edit, .pindah-btn-edit, .merantau-btn-edit, .usaha-btn-edit, .kuasa-btn-edit, .ortu-btn-edit, .waris-btn-edit, .gadai-btn-edit, .sbm-btn-edit, .sbb-btn-edit, .sph-btn-edit, .skkb-btn-edit, .nikah-btn-edit, .kesanggupan-btn-edit, .kayu-btn-edit, .undangan-btn-edit, .pwaris-btn-edit { background: var(--green) !important; color: #fff !important; border: 1px solid var(--green) !important; }
.sktm-input, .domisili-input, .hilang-input, .keramaian-input, .pindah-input, .merantau-input, .usaha-input, .kuasa-input, .ortu-input, .waris-input, .gadai-input, .sbm-input, .sbb-input, .sph-input, .skkb-input, .nikah-input, .kesanggupan-input, .kayu-input, .undangan-input, .pwaris-input, .sktm-search input, .domisili-search input, .hilang-search input, .keramaian-search input, .pindah-search input, .merantau-search input, .usaha-search input, .kuasa-search input, .ortu-search input, .waris-search input, .gadai-search input, .sbm-search input, .sbb-search input, .sph-search input, .skkb-search input, .nikah-search input, .kesanggupan-search input, .kayu-search input, .undangan-search input, .pwaris-search input { background: #fff !important; border: 1px solid var(--line-strong) !important; color: var(--text) !important; border-radius: 8px !important; }
.sktm-search i, .domisili-search i, .hilang-search i, .keramaian-search i, .pindah-search i, .merantau-search i, .usaha-search i, .kuasa-search i, .ortu-search i, .waris-search i, .gadai-search i, .sbm-search i, .sbb-search i, .sph-search i, .skkb-search i, .nikah-search i, .kesanggupan-search i, .kayu-search i, .undangan-search i, .pwaris-search i { color: var(--primary) !important; }
.sktm-stat, .domisili-stat, .hilang-stat, .keramaian-stat, .pindah-stat, .merantau-stat, .usaha-stat, .kuasa-stat, .ortu-stat, .waris-stat, .gadai-stat, .sbm-stat, .sbb-stat, .sph-stat, .skkb-stat, .nikah-stat, .kesanggupan-stat, .kayu-stat, .undangan-stat, .pwaris-stat, .sktm-badge, .domisili-badge, .hilang-badge, .keramaian-badge, .pindah-badge, .merantau-badge, .usaha-badge, .kuasa-badge, .ortu-badge, .waris-badge, .gadai-badge, .sbm-badge, .sbb-badge, .sph-badge, .skkb-badge, .nikah-badge, .kesanggupan-badge, .kayu-badge, .undangan-badge, .pwaris-badge { background: var(--primary-50) !important; color: var(--primary-700) !important; border: 1px solid #b8d9ff !important; }
.sktm-table-wrap, .domisili-table-wrap, .hilang-table-wrap, .keramaian-table-wrap, .pindah-table-wrap, .merantau-table-wrap, .usaha-table-wrap, .kuasa-table-wrap, .ortu-table-wrap, .waris-table-wrap, .gadai-table-wrap, .sbm-table-wrap, .sbb-table-wrap, .sph-table-wrap, .skkb-table-wrap, .nikah-table-wrap, .kesanggupan-table-wrap, .kayu-table-wrap, .undangan-table-wrap, .pwaris-table-wrap { border: 1px solid var(--line) !important; border-radius: var(--radius) !important; overflow-x: auto !important; }
.sktm-table, .domisili-table, .hilang-table, .keramaian-table, .pindah-table, .merantau-table, .usaha-table, .kuasa-table, .ortu-table, .waris-table, .gadai-table, .sbm-table, .sbb-table, .sph-table, .skkb-table, .nikah-table, .kesanggupan-table, .kayu-table, .undangan-table, .pwaris-table { border-collapse: collapse !important; font-size: 12.5px !important; }
.sktm-table th, .domisili-table th, .hilang-table th, .keramaian-table th, .pindah-table th, .merantau-table th, .usaha-table th, .kuasa-table th, .ortu-table th, .waris-table th, .gadai-table th, .sbm-table th, .sbb-table th, .sph-table th, .skkb-table th, .nikah-table th, .kesanggupan-table th, .kayu-table th, .undangan-table th, .pwaris-table th { background: #eef7ff !important; color: var(--ink) !important; border: 1px solid var(--line) !important; }
.sktm-table td, .domisili-table td, .hilang-table td, .keramaian-table td, .pindah-table td, .merantau-table td, .usaha-table td, .kuasa-table td, .ortu-table td, .waris-table td, .gadai-table td, .sbm-table td, .sbb-table td, .sph-table td, .skkb-table td, .nikah-table td, .kesanggupan-table td, .kayu-table td, .undangan-table td, .pwaris-table td { border: 1px solid var(--line) !important; color: var(--text) !important; }
.sktm-table tbody tr:hover, .domisili-table tbody tr:hover, .hilang-table tbody tr:hover, .keramaian-table tbody tr:hover, .pindah-table tbody tr:hover, .merantau-table tbody tr:hover, .usaha-table tbody tr:hover, .kuasa-table tbody tr:hover, .ortu-table tbody tr:hover, .waris-table tbody tr:hover, .gadai-table tbody tr:hover, .sbm-table tbody tr:hover, .sbb-table tbody tr:hover, .sph-table tbody tr:hover, .skkb-table tbody tr:hover, .nikah-table tbody tr:hover, .kesanggupan-table tbody tr:hover, .kayu-table tbody tr:hover, .undangan-table tbody tr:hover, .pwaris-table tbody tr:hover { background: #f7fbff !important; }
.admin-content[data-page^="surat_"] .btn.primary { background: var(--primary) !important; color: #fff !important; border: 1px solid var(--primary) !important; box-shadow: var(--shadow-sm) !important; }
.admin-content[data-page^="surat_"] .btn:not(.primary), .admin-content[data-page^="surat_"] .btn.secondary { background: #fff !important; color: var(--primary) !important; border: 1px solid #a9d0ff !important; }
.admin-content[data-page^="surat_"] .btn.danger, .admin-content[data-page^="surat_"] .btn-delete { background: var(--red) !important; color: #fff !important; border: 1px solid var(--red) !important; }
.admin-content[data-page^="surat_"] .table th { background: #eef7ff !important; color: var(--ink) !important; border: 1px solid var(--line) !important; }
.admin-content[data-page^="surat_"] .table td { border: 1px solid var(--line) !important; color: var(--text) !important; }
.admin-content[data-page^="surat_"] h2, .admin-content[data-page^="surat_"] h3 { color: var(--ink) !important; }
.admin-content[data-page^="surat_"] [style*="color:#b91c1c"], .admin-content[data-page^="surat_"] [style*="color:red"] { color: var(--ink) !important; }
.admin-content[data-page^="surat_"] [class$="-header"] h1,
.admin-content[data-page^="surat_"] [class$="-header"] h2,
.admin-content[data-page^="surat_"] [class$="-header"] h3,
.admin-content[data-page^="surat_"] [class*="-header "] h1,
.admin-content[data-page^="surat_"] [class*="-header "] h2,
.admin-content[data-page^="surat_"] [class*="-header "] h3 { color: #fff !important; text-shadow: 0 2px 10px rgba(0,0,0,.18) !important; }
.admin-content[data-page^="surat_"] [class$="-header"] p,
.admin-content[data-page^="surat_"] [class$="-header"] span,
.admin-content[data-page^="surat_"] [class$="-desc"],
.admin-content[data-page^="surat_"] [class$="-description"],
.admin-content[data-page^="surat_"] [class*="-description"],
.admin-content[data-page^="surat_"] [class*="-desc"] { color: rgba(255,255,255,.82) !important; }
.admin-content[data-page^="surat_"] [class$="-header"] .btn,
.admin-content[data-page^="surat_"] [class$="-header"] [class$="-btn-light"] { text-shadow: none !important; }

@media (max-width: 1180px) {
    .stats-grid, .stats-grid.compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dashboard-grid, .dashboard-grid.two, .dashboard-grid.bottom { grid-template-columns: 1fr; }
    .panel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 940px) {
    .app-sidebar { transform: translateX(-105%); transition: transform .24s ease; }
    .app-sidebar.open { transform: translateX(0); }
    .sidebar-overlay.show { display: block; }
    .app-main { margin-left: 0; }
    .app-topbar { padding: 0 14px; gap: 10px; }
    .top-search { max-width: none; }
    .topbar-user span:not(.user-avatar), .topbar-user > i, .logout-compact { display: none; }
    .content-wrap { padding: 14px; }
    .content-meta { justify-content: space-between; }
}
@media (max-width: 640px) {
    :root { --topbar-h: 60px; }
    body { font-size: 13px; }
    .top-search { height: 38px; box-shadow: none; }
    .top-search input { font-size: 12px; }
    .top-search button { width: 42px; }
    .icon-btn:nth-child(2) { display: none; }
    .content-meta { display: none; }
    .page-hero { align-items: flex-start; flex-direction: column; }
    .page-title-icon { width: 50px; height: 50px; font-size: 30px; }
    .stats-grid, .stats-grid.compact, .panel-grid, .filter-grid, .grid, .form-grid, .kpi { grid-template-columns: 1fr; }
    .stat-card { min-height: 88px; }
    .donut-layout { flex-direction: column; }
    .table-footer { flex-direction: column; align-items: flex-start; }
}
