/* ==========================================================================
   SIAKAD UMMAT — UI Theme (based on Tabler / Bootstrap 5 design language)
   --------------------------------------------------------------------------
   This stylesheet is the "design layer" applied on top of Tabler
   (https://tabler.io — MIT, Bootstrap 5). It:
     1. Overrides Tabler theme variables with the SIAKAD brand palette.
     2. Styles the application shell (header, sidebar, content, footer).
     3. Restyles every legacy class used across the views so the whole
        system inherits the new look without touching each view.
   ========================================================================== */

:root {
    /* ── SIAKAD brand ─────────────────────────────────────── */
    --brand-accent: #2563eb;
    --brand-accent-hover: #1d4ed8;
    --brand-accent-soft: #dbeafe;
    --brand-blue: #3b82f6;
    --brand-red: #ef4444;
    --brand-red-hover: #dc2626;
    --brand-amber: #f59e0b;
    --brand-green: #10b981;
    --brand-dark: #0f172a;
    --brand-navy: #101c33;

    /* Surfaces */
    --surface-bg: #f2f5fa;
    --surface-sidebar: #101c33;
    --surface-sidebar-2: #0b1526;
    --surface-card: #ffffff;
    --surface-soft: #f8fafc;

    /* Text */
    --text-primary: #1e293b;
    --text-secondary: #475569;
    --text-muted: #94a3b8;
    --text-sidebar: rgba(255,255,255,.66);
    --text-sidebar-active: #ffffff;

    /* Borders */
    --border-light: #e5e9f2;
    --border-med: #cbd5e1;

    /* Shadows */
    --shadow-xs: 0 1px 2px rgba(15,23,42,.05);
    --shadow-sm: 0 1px 3px rgba(15,23,42,.07), 0 1px 2px rgba(15,23,42,.05);
    --shadow-md: 0 6px 18px rgba(15,23,42,.09);
    --shadow-lg: 0 18px 44px rgba(15,23,42,.16);

    /* Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;

    /* Typography */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Layout */
    --header-height: 62px;
    --sidebar-width: 258px;

    /* ── Tabler variable overrides (components pick these up) ── */
    --tblr-primary: #2563eb;
    --tblr-primary-rgb: 37, 99, 235;
    --tblr-primary-fg: #ffffff;
    --tblr-link-color: #2563eb;
    --tblr-link-hover-color: #1d4ed8;
    --tblr-border-color: #e5e9f2;
    --tblr-border-color-light: #eef1f7;
    --tblr-bg-surface: #f2f5fa;
    --tblr-bg-surface-secondary: #f8fafc;
    --tblr-body-bg: #f2f5fa;
    --tblr-body-color: #1e293b;
    --tblr-font-sans-serif: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --tblr-body-font-family: var(--tblr-font-sans-serif);
    --tblr-btn-border-radius: 8px;
    --tblr-card-border-radius: 14px;
    --tblr-shadow-card: 0 1px 3px rgba(15,23,42,.05);
}

/* ══ Base ═══════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    font-family: var(--font-family);
    font-size: 15px;
    color: var(--text-primary);
    background: var(--surface-bg);
    line-height: 1.6;
    -webkit-tap-highlight-color: transparent;
    overflow-x: hidden;
}

a { color: var(--brand-accent); text-decoration: none; transition: all .18s ease; }
a:hover { color: var(--brand-accent-hover); text-decoration: none; }

img { max-width: 100%; height: auto; }

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 .5em;
    font-weight: 600;
    line-height: 1.3;
    color: var(--text-primary);
}

/* ══ Header ═════════════════════════════════════════════════ */
#header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--header-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px 0 20px;
    background: #ffffff;
    border-bottom: 1px solid var(--border-light);
    z-index: 100;
    gap: 12px;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1;
}

.header-left h2 {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: var(--brand-dark);
    letter-spacing: -0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: linear-gradient(120deg, var(--brand-dark), var(--brand-accent));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.header-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }

/* Logo UMMAT di pojok kiri-atas header (setelah login) */
.header-logo {
    width: 40px;
    height: 40px;
    object-fit: contain;
    flex-shrink: 0;
    filter: drop-shadow(0 2px 6px rgba(15,23,42,.16));
}

/* User chip */
.user-info {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 12px 5px 6px;
    background: var(--surface-soft);
    border: 1px solid var(--border-light);
    border-radius: 40px;
}

.user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand-accent), #4f8ef7);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(37,99,235,.35);
}

.user-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.logout-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--brand-red);
    font-weight: 600;
    font-size: 13px;
    padding: 8px 16px;
    border: 1.5px solid rgba(239,68,68,.4);
    border-radius: 40px;
    transition: all .18s ease;
    background: transparent;
    white-space: nowrap;
}

.logout-btn:hover {
    background: var(--brand-red);
    color: #fff;
    border-color: var(--brand-red);
    box-shadow: 0 6px 16px rgba(239,68,68,.3);
}

/* Hamburger */
.sidebar-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    width: 28px;
    height: 20px;
    position: relative;
    padding: 0;
    flex-shrink: 0;
}
.sidebar-toggle span {
    display: block;
    width: 100%;
    height: 2.5px;
    background: var(--text-primary);
    border-radius: 3px;
    position: absolute;
    left: 0;
    transition: all .25s ease;
}
.sidebar-toggle span:nth-child(1) { top: 0; }
.sidebar-toggle span:nth-child(2) { top: 8.5px; }
.sidebar-toggle span:nth-child(3) { top: 17px; }
.sidebar-toggle.is-active span:nth-child(1) { top: 8.5px; transform: rotate(45deg); }
.sidebar-toggle.is-active span:nth-child(2) { opacity: 0; }
.sidebar-toggle.is-active span:nth-child(3) { top: 8.5px; transform: rotate(-45deg); }

/* ══ Middle / content area ══════════════════════════════════ */
#middle {
    display: flex;
    width: 100%;
    min-height: 100vh;
    padding-top: var(--header-height);
}

/* ══ Sidebar ════════════════════════════════════════════════ */
#left-column {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--sidebar-width);
    height: 100vh;
    height: 100dvh;
    background: linear-gradient(180deg, var(--surface-sidebar) 0%, var(--surface-sidebar-2) 100%);
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 90;
    display: flex;
    flex-direction: column;
    padding: 0 0 24px 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.18) transparent;
}
#left-column::-webkit-scrollbar { width: 5px; }
#left-column::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 3px; }

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 11px;
    height: var(--header-height);
    padding: 0 22px;
    background: rgba(0,0,0,.22);
    border-bottom: 1px solid rgba(255,255,255,.07);
    flex-shrink: 0;
}
.sidebar-logo { width: 30px; height: auto; flex-shrink: 0; filter: drop-shadow(0 2px 6px rgba(0,0,0,.4)); }
.sidebar-brand-text {
    font-size: 19px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.02em;
}

/* Sidebar section headers (h3) */
#left-column h3.sidebar-section,
#left-column h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    color: rgba(255,255,255,.38);
    text-transform: uppercase;
    letter-spacing: .09em;
    padding: 18px 20px 8px;
    margin: 0;
    user-select: none;
    cursor: pointer;
    transition: color .18s ease;
}
#left-column h3:hover { color: rgba(255,255,255,.75); }
#left-column h3 .sec-arrow {
    font-size: 9px;
    width: 14px;
    color: rgba(255,255,255,.45);
    transition: transform .2s ease;
}
#left-column h3 i { font-size: 13px; width: 16px; text-align: center; opacity: .8; }

/* Sidebar nav lists */
ul.nav.sidebar-nav,
ul.nav {
    list-style: none;
    padding: 0 12px;
    margin: 0 0 6px;
    display: block;
}

ul.nav li { margin-bottom: 2px; }

ul.nav li a {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 12px;
    color: var(--text-sidebar);
    font-size: 13.5px;
    font-weight: 400;
    border-radius: 9px;
    border: none;
    background: transparent;
    transition: all .18s ease;
    line-height: 1.4;
    position: relative;
}

ul.nav li a i {
    width: 18px;
    text-align: center;
    font-size: 14px;
    opacity: .85;
    flex-shrink: 0;
    transition: all .18s ease;
}

ul.nav li a:hover,
ul.nav li.active a {
    background: rgba(255,255,255,.09);
    color: var(--text-sidebar-active);
}

ul.nav li.active a {
    background: linear-gradient(120deg, var(--brand-accent), #3b82f6);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 6px 16px rgba(37,99,235,.35);
}

ul.nav li.active a i { opacity: 1; }

/* Sidebar footer */
.sidebar-footer-menu {
    margin-top: auto;
    padding: 16px 18px;
    border-top: 1px solid rgba(255,255,255,.07);
}
.sidebar-stats {
    font-size: 12px;
    color: rgba(255,255,255,.45);
    margin-bottom: 12px;
    line-height: 1.7;
}
.sidebar-logout {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 600;
    color: #fca5a5;
    background: rgba(239,68,68,.13);
    border-radius: 9px;
    transition: all .18s ease;
}
.sidebar-logout:hover {
    background: var(--brand-red);
    color: #fff;
    box-shadow: 0 6px 16px rgba(239,68,68,.35);
}

/* ══ Center column ══════════════════════════════════════════ */
#center-column {
    flex: 1;
    margin-left: var(--sidebar-width);
    padding: 26px 28px 44px;
    min-width: 0;
}

/* ══ Right column (rare legacy) ═════════════════════════════ */
#right-column {
    width: 260px;
    flex-shrink: 0;
    padding: 24px 20px;
    background: var(--surface-card);
    border-left: 1px solid var(--border-light);
}

/* ══ Footer ═════════════════════════════════════════════════ */
#footer {
    width: calc(100% - var(--sidebar-width));
    padding: 16px 24px;
    background: var(--surface-card);
    border-top: 1px solid var(--border-light);
    text-align: center;
    font-size: 12px;
    color: var(--text-muted);
    margin-left: var(--sidebar-width);
}

/* ══ Page title bar (legacy .top-bar-adm) ═══════════════════ */
.top-bar-adm,
.top-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 14px;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border-light);
}

.top-bar-adm h1,
.top-bar h1 {
    margin: 0;
    font-size: 22px;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}

.top-bar-adm h1 { position: relative; padding-left: 14px; }
.top-bar-adm h1::before {
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 4px;
    border-radius: 4px;
    background: linear-gradient(180deg, var(--brand-accent), #60a5fa);
}

.top-bar-adm .button,
.top-bar .button { margin-left: 4px; }

.breadcrumbs {
    width: 100%;
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
.breadcrumbs select { width: auto; min-width: 130px; }

h1.page-title {
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 18px;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}

/* ══ Filter / select bar ════════════════════════════════════ */
.select-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    padding: 13px 16px;
    background: var(--surface-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
}

.select-bar select,
.select-bar input[type="text"],
.select-bar input[type="search"],
.select-bar input[type="date"] {
    max-width: 250px;
    width: auto;
    min-width: 140px;
    margin: 0;
}
.select-bar label { margin: 0; font-weight: 500; white-space: nowrap; }
.select-bar b {
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
}
.select-bar form {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
}
.select-bar select, .select-bar input, .select-bar label, .select-bar div, .select-bar b { float: none !important; }
.select-bar > div { display: inline-flex; align-items: center; gap: 8px; }
.select-bar h3 { margin: 0; font-size: 15px; font-weight: 600; color: var(--text-primary); }

.filter-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.obj-right { float: none; }

/* ══ Cards & panels ═════════════════════════════════════════ */
.area,
.panel,
.card:not(.tblr-card) {
    background: var(--surface-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: var(--shadow-xs);
}

/* Legacy .card-header — behaves like Tabler card header */
.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border-light);
    flex-wrap: wrap;
    gap: 8px;
}
.card-header h3,
.card-header h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}
.card-header h3 i, .card-header h4 i { color: var(--brand-accent); margin-right: 6px; }

.panel strong { display: block; margin-bottom: 10px; font-weight: 600; }

/* Legacy .box */
.box {
    background: var(--surface-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: 16px 18px;
    margin-bottom: 18px;
    box-shadow: var(--shadow-xs);
}
.box h3, .box h4 { margin-top: 0; font-size: 15px; font-weight: 700; }

/* Stat cards (dashboards) */
.stat-card {
    background: var(--surface-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: 18px;
    box-shadow: var(--shadow-xs);
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: relative;
    overflow: hidden;
    transition: all .2s ease;
}
.stat-card::after {
    content: '';
    position: absolute;
    top: -28px;
    right: -28px;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(37,99,235,.10), transparent 70%);
}
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.stat-card .stat-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
}
.stat-card .stat-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}
.stat-card .stat-sub { font-size: 12px; color: var(--text-muted); }

/* ══ Buttons ════════════════════════════════════════════════ */
.button,
input[type="submit"],
input[type="button"],
button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 18px;
    font-family: var(--font-family);
    font-size: 13.5px;
    font-weight: 600;
    color: #fff;
    background: var(--brand-accent);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-decoration: none;
    transition: all .18s ease;
    line-height: 1.5;
    white-space: nowrap;
}

.button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
button:hover {
    background: var(--brand-accent-hover);
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(37,99,235,.32);
}

/* Legacy button variants */
.btn-success, .button.success { background: var(--brand-green); }
.btn-success:hover { background: #059669; box-shadow: 0 6px 16px rgba(16,185,129,.32); }

.btn-danger, .button.danger { background: var(--brand-red); }
.btn-danger:hover { background: var(--brand-red-hover); box-shadow: 0 6px 16px rgba(239,68,68,.32); }

.btn-warning, .button.warning { background: var(--brand-amber); color: #451a03; }
.btn-warning:hover { background: #d97706; color: #fff; }

.btn-outline {
    background: transparent;
    color: var(--brand-accent);
    border: 1.5px solid var(--brand-accent);
}
.btn-outline:hover { background: var(--brand-accent); color: #fff; }

.btn-sm { padding: 5px 12px; font-size: 12px; }

/* Legacy action link classes */
.navi,
.browse-button,
.print-button,
.small-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 14px;
    font-family: var(--font-family);
    font-size: 12px;
    font-weight: 600;
    color: #fff !important;
    background: var(--brand-accent);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
    transition: all .18s ease;
    line-height: 1.4;
    white-space: nowrap;
    vertical-align: middle;
}
.navi:hover,
.browse-button:hover,
.print-button:hover,
.small-button:hover {
    background: var(--brand-accent-hover);
    color: #fff !important;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(37,99,235,.32);
}
.navi.add, .navi.edit, .navi.browse, .navi.button, .navi.print { color: #fff !important; }

a.search,
.navi.search {
    background: transparent;
    color: var(--brand-accent) !important;
    border: 1.5px solid var(--brand-accent);
}
a.search:hover,
.navi.search:hover { background: var(--brand-accent); color: #fff !important; }

.small-button { padding: 4px 10px; }

/* Legacy module-specific buttons */
.btn-simpan { background: var(--brand-accent); color: #fff; }
.btn-simpan:hover { background: var(--brand-accent-hover); }
.btn-batal { background: #e2e8f0; color: #334155; }
.btn-batal:hover { background: #cbd5e1; color: #1e293b; box-shadow: none; transform: none; }
.btn-daftar { background: var(--brand-green); color: #fff; }
.btn-daftar:hover { background: #059669; }
.btn-blue { background: var(--brand-accent); color: #fff; }
.btn-blue:hover { background: var(--brand-accent-hover); }
.btn-green { background: var(--brand-green); color: #fff; }
.btn-green:hover { background: #059669; }

.btn-right {
    background: var(--brand-accent);
    color: #fff;
    border-radius: 8px;
    padding: 8px 16px;
    font-weight: 600;
    font-size: 13px;
    border: none;
    transition: all .18s ease;
}
.btn-right:hover { background: var(--brand-accent-hover); }

.btn-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.btn-row .btn,
.btn-row button {
    background: var(--brand-accent);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 8px 16px;
    font-weight: 600;
}
.btn-row .btn:hover { background: var(--brand-accent-hover); }

/* Bootstrap .btn without modifier → brand primary */
.btn:not(.btn-primary):not(.btn-secondary):not(.btn-success):not(.btn-danger):not(.btn-warning):not(.btn-info):not(.btn-dark):not(.btn-light):not(.btn-outline-primary):not(.btn-outline-secondary):not(.btn-outline-success):not(.btn-outline-danger):not(.btn-outline-warning):not(.btn-outline-info):not(.btn-outline-dark):not(.btn-outline-light):not(.btn-link):not(.btn-ghost):not(.btn-icon) {
    background: var(--brand-accent);
    color: #fff;
    border: none;
}
.btn:not(.btn-primary):not(.btn-secondary):not(.btn-success):not(.btn-danger):not(.btn-warning):not(.btn-info):not(.btn-dark):not(.btn-light):not(.btn-outline-primary):not(.btn-outline-secondary):not(.btn-outline-success):not(.btn-outline-danger):not(.btn-outline-warning):not(.btn-outline-info):not(.btn-outline-dark):not(.btn-outline-light):not(.btn-link):not(.btn-ghost):not(.btn-icon):hover {
    background: var(--brand-accent-hover);
    color: #fff;
}

/* ══ Forms ══════════════════════════════════════════════════ */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="date"],
input[type="search"],
input[type="file"],
textarea,
select {
    width: 100%;
    max-width: 400px;
    padding: 9px 13px;
    font-family: var(--font-family);
    font-size: 13.5px;
    color: var(--text-primary);
    background: var(--surface-card);
    border: 1.5px solid var(--border-med);
    border-radius: 9px;
    transition: all .18s ease;
    outline: none;
    line-height: 1.5;
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--brand-accent);
    box-shadow: 0 0 0 3px rgba(37,99,235,.14);
    background: #fff;
}

label {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 5px;
}

input.text {
    padding: 8px 12px;
    height: auto;
    font-family: var(--font-family);
    font-size: 13.5px;
    color: var(--text-primary);
    background: var(--surface-card);
    border: 1.5px solid var(--border-med);
    border-radius: 9px;
    outline: none;
    transition: all .18s ease;
}
input.text:focus {
    border-color: var(--brand-accent);
    box-shadow: 0 0 0 3px rgba(37,99,235,.14);
}

/* Legacy .input class on inputs */
input.input {
    padding: 8px 12px;
    font-size: 13.5px;
    border: 1.5px solid var(--border-med);
    border-radius: 9px;
    outline: none;
    transition: all .18s ease;
    background: var(--surface-card);
    color: var(--text-primary);
}
input.input:focus { border-color: var(--brand-accent); box-shadow: 0 0 0 3px rgba(37,99,235,.14); }

/* ══ Tables ═════════════════════════════════════════════════ */
/* Legacy wrapper: <div class="table"> */
div.table {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 20px;
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}

/* ══ Header tabel seragam (biru) ══════════════════════════════
   Semua tabel aplikasi memakai satu gaya header:
   latar biru #2563eb, teks putih, huruf kapital kecil. */
table thead th {
    background: #2563eb;
    color: #fff;
    font-weight: 700;
    text-align: left;
    padding: 10px 13px;
    border-bottom: 2px solid #1d4ed8;
    white-space: nowrap;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .05em;
}

table tbody td {
    padding: 10px 13px;
    border-bottom: 1px solid var(--border-light);
    vertical-align: middle;
}

table tbody tr { transition: background .15s ease; }
table tbody tr:hover { background: #f3f7ff; }
table tbody tr:nth-child(even) { background: #fafbfe; }
table tbody tr:nth-child(even):hover { background: #eef4ff; }

/* Legacy .listing tables */
table.listing,
.listing {
    width: 100%;
    border-collapse: collapse;
    background: var(--surface-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    overflow: hidden;
    font-size: 13.5px;
    margin-bottom: 16px;
}
table.listing th,
.listing th {
    background: #2563eb;
    color: #fff;
    font-weight: 700;
    text-align: left;
    padding: 10px 13px;
    border-bottom: 2px solid #1d4ed8;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .05em;
    white-space: nowrap;
}
table.listing td,
.listing td {
    padding: 9px 13px;
    border-bottom: 1px solid var(--border-light);
    vertical-align: top;
}
table.listing tr:last-child td,
.listing tr:last-child td { border-bottom: none; }
table.listing tr:nth-child(even) td,
.listing tr:nth-child(even) td { background: #fafbfe; }
table.listing tr:hover td,
.listing tr:hover td { background: #f3f7ff; }
table.listing tr.bg td,
.listing tr.bg td { background: #f8fafc; }
table.listing td.first, table.listing th.first { padding-left: 14px; }
table.listing td.last, table.listing th.last { padding-right: 14px; }
table.listing th.full { text-align: center; }
#facebox table.listing { margin-bottom: 0; }

/* Legacy .tabel class */
table.tabel {
    width: 100%;
    border-collapse: collapse;
    background: var(--surface-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    font-size: 13.5px;
}
table.tabel th {
    background: #2563eb;
    color: #fff;
    padding: 10px 13px;
    border-bottom: 2px solid #1d4ed8;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .05em;
    text-align: left;
    white-space: nowrap;
    font-weight: 700;
}
table.tabel td { padding: 8px 12px; border-bottom: 1px solid var(--border-light); }

/* ══ DataTables theme ═══════════════════════════════════════ */
.dataTables_wrapper { width: 100%; overflow-x: auto; padding-bottom: 4px; }

table.dataTable thead th {
    border-bottom: 2px solid #1d4ed8 !important;
    color: #fff !important;
    background: #2563eb !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: .05em !important;
    padding: 10px 13px !important;
    white-space: nowrap;
    font-weight: 700;
}

table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc {
    background-image: none !important;
}
table.dataTable thead .sorting::after,
table.dataTable thead .sorting_asc::after,
table.dataTable thead .sorting_desc::after {
    content: '\2195';
    display: inline-block;
    margin-left: 6px;
    opacity: .85;
    font-size: 10px;
    color: #fff;
}
table.dataTable thead .sorting_asc::after { content: '\25B2'; }
table.dataTable thead .sorting_desc::after { content: '\25BC'; }

table.dataTable tbody tr { background: transparent; }
table.dataTable tbody td { padding: 10px 13px; }

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter { margin-bottom: 12px; }
.dataTables_wrapper .dataTables_length select {
    max-width: 80px;
    padding: 5px 8px;
    display: inline-block;
    margin: 0 4px;
}
.dataTables_wrapper .dataTables_filter label { font-weight: 500; color: var(--text-secondary); }
.dataTables_wrapper .dataTables_filter input {
    max-width: 210px;
    padding: 6px 12px;
    border: 1.5px solid var(--border-med);
    border-radius: 8px;
    display: inline-block;
    margin-left: 6px;
    outline: none;
    transition: all .18s ease;
}
.dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--brand-accent);
    box-shadow: 0 0 0 3px rgba(37,99,235,.14);
}
.dataTables_wrapper .dataTables_info {
    font-size: 12px;
    color: var(--text-muted);
    padding: 8px 0;
}
.dataTables_wrapper .dataTables_paginate {
    padding: 8px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 6px 12px;
    font-size: 12px;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    background: var(--surface-card);
    color: var(--text-primary) !important;
    cursor: pointer;
    transition: all .18s ease;
    margin: 0;
    display: inline-block;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--brand-accent);
    color: #fff !important;
    border-color: var(--brand-accent);
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--brand-accent);
    color: #fff !important;
    border-color: var(--brand-accent);
    font-weight: 600;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
    opacity: .5;
    cursor: default;
    pointer-events: none;
}

/* ══ CI pagination (create_links) ═══════════════════════════ */
.pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 10px 0;
    margin: 10px 0;
    justify-content: center;
}
.pagination a,
.pagination strong,
.pagination span.current,
.pagination span.disabled {
    display: inline-block;
    padding: 6px 12px;
    font-size: 12px;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    background: var(--surface-card);
    color: var(--text-primary) !important;
    text-decoration: none;
    transition: all .18s ease;
    font-weight: 500;
}
.pagination a:hover {
    background: var(--brand-accent);
    color: #fff !important;
    border-color: var(--brand-accent);
}
.pagination strong,
.pagination span.current {
    background: var(--brand-accent);
    color: #fff !important;
    border-color: var(--brand-accent);
}
.pagination span.disabled { opacity: .5; pointer-events: none; }

.total-rows {
    float: right;
    font-size: 12px;
    color: var(--text-muted);
    margin: 8px 0 16px;
}

/* Info/summary under tables */
.select {
    padding: 9px 13px;
    background: var(--surface-soft);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    margin-top: 10px;
    font-size: 13.5px;
    color: var(--text-primary);
}

/* ══ Messages / alerts ══════════════════════════════════════ */
.message,
.success,
.error,
.alert-info {
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    margin-bottom: 16px;
    font-size: 13.5px;
    border-left: 4px solid;
    font-weight: 500;
}
.message { background: #eff6ff; border-color: var(--brand-accent); color: #1e3a5f; }
.success { background: #ecfdf5; border-color: var(--brand-green); color: #065f46; }
.error { background: #fef2f2; border-color: var(--brand-red); color: #991b1b; }
.alert-info { background: #fffbeb; border-color: var(--brand-amber); color: #92400e; }

/* ══ Status boxes ═══════════════════════════════════════════ */
.status-box {
    display: inline-block;
    padding: 5px 11px;
    margin: 2px;
    border-radius: 6px;
    background: #f1f5f9;
    color: #334155;
    cursor: pointer;
    transition: all .18s ease;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid transparent;
}
.status-box.selected { background: var(--brand-accent); color: #fff; box-shadow: 0 4px 10px rgba(37,99,235,.3); }
.status-box:hover { background: var(--brand-accent-hover); color: #fff; }

/* ══ Tabs (legacy ul.tabs + .tab_content) ═══════════════════ */
ul.tabs {
    list-style: none;
    margin: 0 0 18px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    border-bottom: 2px solid var(--border-light);
}
ul.tabs li { margin: 0; }
ul.tabs li a {
    display: inline-block;
    padding: 10px 18px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-secondary);
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    transition: all .18s ease;
    border-radius: 8px 8px 0 0;
}
ul.tabs li a:hover { color: var(--brand-accent); background: var(--surface-soft); }
ul.tabs li.active a {
    color: var(--brand-accent);
    border-bottom-color: var(--brand-accent);
    background: #fff;
}
.tab_content {
    padding: 18px 2px 4px;
    animation: tabFade .22s ease;
}
@keyframes tabFade {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ══ Facebox lightbox ═══════════════════════════════════════ */
#facebox {
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-lg) !important;
    border: none !important;
}
#facebox .popup { border-radius: var(--radius-md) !important; }
#facebox .content { border-radius: var(--radius-md) !important; padding: 18px; }
#facebox .close {
    background: var(--brand-red);
    border-radius: 50%;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
#facebox_overlay { background: rgba(15,23,42,.55) !important; }

/* ══ DatePicker popup ═══════════════════════════════════════ */
.dpDiv {
    background: var(--surface-card) !important;
    border: 1px solid var(--border-light) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-lg) !important;
    padding: 10px;
    font-family: var(--font-family);
    z-index: 10000;
}
.dpTable {
    font-family: var(--font-family);
    font-size: 13.5px;
    text-align: center;
    color: var(--text-primary) !important;
    background: var(--surface-card) !important;
    border-collapse: separate;
    border-spacing: 2px;
    width: 100%;
}
.dpTD, .dpTitleTD, .dpButtonTD, .dpTodayButtonTD, .dpDayTD { border: none; }
.dpTD { padding: 4px 6px; border-radius: 6px; cursor: pointer; color: var(--text-primary) !important; }
.dpTDHover { background: var(--brand-accent) !important; color: #fff !important; border-radius: 6px; cursor: pointer; }
.dpDayHighlightTD { background: var(--brand-accent-soft) !important; border-radius: 6px; }
.dpDayHighlight { color: var(--brand-accent-hover) !important; font-weight: 700; }
.dpTitleTR { background: var(--brand-accent) !important; border-radius: 8px !important; }
.dpTitleTD { border-radius: 6px; }
.dpTitleText { font-size: 13px; color: #fff !important; font-weight: 700 !important; letter-spacing: .02em; }
.dpButton {
    font-family: var(--font-family);
    font-size: 14px;
    font-weight: 700;
    color: #fff !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer;
    padding: 0 8px;
    line-height: 1;
}
.dpButton:hover { color: #bfdbfe !important; }
.dpDayTR td {
    color: var(--text-muted) !important;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 0;
    text-transform: uppercase;
}
.dpTodayButton {
    font-family: var(--font-family);
    font-size: 12px;
    color: var(--brand-accent) !important;
    background: #eff6ff !important;
    border: 1px solid var(--border-light) !important;
    border-radius: 6px;
    padding: 5px 12px;
    cursor: pointer;
    margin: 2px;
    transition: all .18s ease;
}
.dpTodayButton:hover {
    background: var(--brand-accent) !important;
    color: #fff !important;
    border-color: var(--brand-accent) !important;
}

/* ══ Auth pages ═════════════════════════════════════════════ */
.auth-body {
    background: radial-gradient(1200px 700px at 15% 0%, #16305c 0%, transparent 55%),
                radial-gradient(1000px 600px at 100% 100%, #0c3a86 0%, transparent 50%),
                linear-gradient(160deg, #0b1526 0%, #101c33 55%, #0c1e3a 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    font-family: var(--font-family);
}

.auth-wrap {
    display: flex;
    gap: 24px;
    max-width: 1160px;
    width: 100%;
    align-items: stretch;
    justify-content: center;
}

.auth-card {
    display: flex;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 30px 80px rgba(4,10,26,.55);
    width: 100%;
    max-width: 640px;
    overflow: hidden;
}

.auth-brand {
    flex: 1.05;
    background: linear-gradient(155deg, #101c33 0%, #1d3a72 60%, #2563eb 130%);
    padding: 44px 36px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #fff;
    position: relative;
    overflow: hidden;
}
.auth-brand::before {
    content: '';
    position: absolute;
    top: -80px;
    right: -80px;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.10), transparent 70%);
}
.auth-brand .logo { width: 76px; height: auto; margin-bottom: 22px; filter: drop-shadow(0 4px 14px rgba(0,0,0,.35)); }
.auth-brand h1 { font-size: 30px; font-weight: 800; margin-bottom: 6px; letter-spacing: -0.03em; color: #fff; }
.auth-brand .subtitle { font-size: 13.5px; opacity: .78; margin-bottom: 26px; line-height: 1.6; font-weight: 400; }
.auth-brand .features { list-style: none; margin: 0; padding: 0; }
.auth-brand .features li {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 13px;
    font-size: 13.5px;
    opacity: .88;
}
.auth-brand .features li i {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.12);
    border-radius: 10px;
    font-size: 14px;
    flex-shrink: 0;
}

.auth-form {
    flex: 1;
    padding: 44px 38px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.auth-form h2 { font-size: 22px; font-weight: 800; color: #0f172a; margin-bottom: 4px; }
.auth-form .auth-sub { font-size: 13.5px; color: #64748b; margin-bottom: 24px; }

.auth-form .form-group { margin-bottom: 17px; }
.auth-form .form-group label {
    display: block;
    font-size: 11.5px;
    font-weight: 700;
    color: #475569;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.auth-form .form-group .input-wrapper { position: relative; }
.auth-form .form-group .input-wrapper i {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 14px;
    pointer-events: none;
}
.auth-form .form-group input {
    width: 100%;
    padding: 12px 15px 12px 43px;
    font-size: 14px;
    font-family: var(--font-family);
    border: 1.5px solid var(--border-light);
    border-radius: 10px;
    background: #f8fafc;
    color: #0f172a;
    outline: none;
    transition: all .2s;
    max-width: 100%;
}
.auth-form .form-group input:focus {
    border-color: var(--brand-accent);
    box-shadow: 0 0 0 3px rgba(37,99,235,.13);
    background: #fff;
}

.auth-form .equation-row { display: flex; align-items: center; gap: 10px; }
.auth-form .equation-row label { margin-bottom: 0; white-space: nowrap; }
.auth-form .equation-row .equation-text {
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 6px;
}
.auth-form .equation-row input { max-width: 80px; padding: 12px 14px; text-align: center; font-size: 15px; font-weight: 700; }

.auth-form .btn-login {
    width: 100%;
    padding: 13px;
    background: linear-gradient(120deg, var(--brand-accent), #3b82f6);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    font-family: var(--font-family);
    cursor: pointer;
    transition: all .2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 8px 22px rgba(37,99,235,.28);
}
.auth-form .btn-login:hover {
    background: linear-gradient(120deg, var(--brand-accent-hover), #2563eb);
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(37,99,235,.38);
}

.auth-form .btn-sso {
    width: 100%;
    padding: 12px;
    background: #0f172a;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 600;
    font-family: var(--font-family);
    cursor: pointer;
    transition: all .2s;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    margin-top: 10px;
}
.auth-form .btn-sso:hover {
    background: #1e293b;
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(15,23,42,.3);
    color: #fff;
}

.auth-form .btn-cancel {
    width: 100%;
    padding: 11px;
    background: transparent;
    color: #64748b;
    border: 1.5px solid var(--border-light);
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    font-family: var(--font-family);
    cursor: pointer;
    transition: all .2s;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    margin-top: 8px;
}
.auth-form .btn-cancel:hover { border-color: #94a3b8; color: #334155; background: #f8fafc; }

.auth-form .reset-link {
    display: block;
    text-align: center;
    margin-top: 12px;
    font-size: 13px;
    color: var(--brand-accent);
    text-decoration: none;
    font-weight: 600;
}
.auth-form .reset-link:hover { text-decoration: underline; color: var(--brand-accent-hover); }

.auth-form .form-actions { margin-top: 6px; }

.auth-form .error-messages {
    margin-top: 12px;
    padding: 11px 14px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 10px;
    color: #991b1b;
    font-size: 12.5px;
    line-height: 1.6;
}
.auth-form .alert-message {
    margin-top: 10px;
    padding: 11px 14px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 10px;
    color: #92400e;
    font-size: 12.5px;
    line-height: 1.6;
}

.auth-form .alert-box {
    margin-top: 14px;
    padding: 13px 15px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 10px;
    color: #92400e;
    font-size: 12.5px;
    line-height: 1.6;
    display: none;
}
.auth-form .alert-box.alert-danger { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.auth-form .alert-box.alert-success { background: #ecfdf5; border-color: #bbf7d0; color: #065f46; }
.auth-form .alert-box.alert-warning { background: #fffbeb; border-color: #fde68a; color: #92400e; }

/* Video panel (mhs login) */
.video-panel {
    flex: 1;
    background: rgba(255,255,255,.05);
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-width: 0;
    max-width: 560px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 30px 80px rgba(4,10,26,.45);
}
.video-panel .video-header {
    padding: 16px 20px;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.video-panel .video-header i { font-size: 15px; opacity: .75; }
.video-panel .video-header span { font-size: 13px; font-weight: 600; opacity: .85; }
.video-panel .video-body { flex: 1; display: flex; align-items: center; justify-content: center; padding: 12px; }
.video-panel .video-body iframe {
    width: 100%;
    height: 100%;
    min-height: 400px;
    border-radius: 12px;
    border: none;
}

/* ══ Survey block (modal) ═══════════════════════════════════ */
.survey-block-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(11,21,38,.82); z-index: 9998;
    display: flex; justify-content: center; align-items: center;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.survey-block-container {
    background: #fff; border-radius: var(--radius-lg);
    box-shadow: 0 25px 70px rgba(4,10,26,.5);
    max-width: 95%; width: 820px; max-height: 90vh; overflow-y: auto; z-index: 9999;
}
.survey-block-header {
    background: linear-gradient(135deg, #101c33, #2563eb);
    color: #fff; padding: 24px; border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    text-align: center;
}
.survey-block-header h3 { margin: 0; font-size: 21px; font-weight: 800; color: #fff; }
.survey-block-badge {
    background: #fff; color: #2563eb; padding: 4px 16px;
    border-radius: 20px; font-size: 13px; font-weight: 700;
    margin-top: 10px; display: inline-block;
}
.survey-block-body { padding: 24px 28px; }
.survey-block-info { background: #eff6ff; border-left: 3px solid #2563eb; border-radius: 8px; padding: 14px 18px; margin-bottom: 20px; }
.survey-block-item { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: 20px; margin-bottom: 14px; }
.survey-block-title { font-weight: 700; color: #1e293b; margin-bottom: 10px; font-size: 15px; }
.survey-block-description { color: #64748b; font-size: 13px; margin-bottom: 14px; line-height: 1.7; }
.survey-block-link {
    display: block; background: #2563eb; color: #fff; padding: 11px 20px;
    border-radius: 8px; text-align: center; font-weight: 700; font-size: 13px;
    transition: all .18s ease; text-decoration: none;
}
.survey-block-link:hover { background: #1d4ed8; color: #fff; }
.survey-block-note { background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px; padding: 14px 18px; margin-top: 18px; color: #92400e; font-size: 13px; }
.main-content-blocked { filter: blur(4px); pointer-events: none; user-select: none; }

/* ══ Misc ═══════════════════════════════════════════════════ */
.ajax_loading {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 60px 0;
}
.ajax_loading img { width: 56px; }

/* Elemen khusus cetak: disembunyikan di layar, hanya tampil saat print */
.print-only { display: none; }

.clear { clear: both; }

.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(11,21,38,.55);
    z-index: 89;
    opacity: 0;
    transition: opacity .25s ease;
}
.sidebar-overlay.show { opacity: 1; display: block; }

/* ══ Responsive ═════════════════════════════════════════════ */
@media (max-width: 992px) {
    :root { --sidebar-width: 64px; }

    .sidebar-brand { justify-content: center; padding: 0 10px; }
    .sidebar-brand-text { display: none; }
    .sidebar-logo { width: 24px; }
    #left-column h3.sidebar-section,
    #left-column h3 { justify-content: center; padding: 16px 6px 8px; font-size: 0; }
    #left-column h3 .sec-arrow { display: none; }
    #left-column h3 i { font-size: 15px; opacity: .8; }

    ul.nav.sidebar-nav,
    ul.nav {
        padding: 0 6px;
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }
    ul.nav li a {
        justify-content: center;
        padding: 10px 6px;
        font-size: 0;
        gap: 0;
        border-radius: 9px;
    }
    ul.nav li a i { font-size: 16px; margin: 0; }
    ul.nav li a span { display: none; }

    .sidebar-footer-menu { display: none; }

    #header { padding-left: 20px; }
    .header-logo { width: 34px; height: 34px; }
    #center-column { margin-left: 64px; padding: 20px 16px 32px; }
    #footer { margin-left: 64px; }
}

@media (max-width: 768px) {
    :root { --sidebar-width: 0px; }

    .sidebar-toggle { display: block; }

    #left-column {
        display: block;
        width: 284px;
        z-index: 92;
        transform: translateX(-100%);
        transition: transform .28s cubic-bezier(.4,0,.2,1);
    }
    #left-column.open {
        transform: translateX(0);
        box-shadow: 8px 0 32px rgba(4,10,26,.35);
    }
    .sidebar-brand-text { display: block; }
    .sidebar-brand { justify-content: flex-start; padding: 0 20px; }
    #left-column h3.sidebar-section,
    #left-column h3 { justify-content: flex-start; padding: 16px 20px 8px; font-size: 11px; }
    #left-column h3 .sec-arrow { display: inline-block; }
    ul.nav.sidebar-nav,
    ul.nav { padding: 0 12px; }
    ul.nav li a { justify-content: flex-start; font-size: 13.5px; gap: 11px; padding: 11px 12px; min-height: 44px; }
    ul.nav li a i { font-size: 14px; margin: 0; }
    ul.nav li a span { display: inline; }

    .sidebar-footer-menu { display: block; }

    .sidebar-overlay { display: block; pointer-events: none; }
    .sidebar-overlay.show { pointer-events: auto; }

    #header { padding: 0 12px; height: 58px; }
    .header-left h2 { font-size: 14.5px; }
    .header-logo { width: 30px; height: 30px; }
    .user-avatar { width: 30px; height: 30px; font-size: 12px; }
    .user-name { display: none; }
    #center-column { margin-left: 0; padding: 16px 12px 32px; }
    #footer { margin-left: 0; }

    #middle { flex-direction: column; }
    #right-column { width: 100%; border-left: none; border-top: 1px solid var(--border-light); }

    .top-bar-adm { flex-direction: column; align-items: flex-start; }
    .top-bar-adm h1 { font-size: 18px; }
    .top-bar-adm > div:last-child { width: 100%; display: flex; flex-wrap: wrap; gap: 8px; }
    .top-bar-adm > div:last-child .button { flex: 1; text-align: center; min-width: 0; }

    .select-bar { flex-direction: column; align-items: stretch; }
    .select-bar select,
    .select-bar input[type="text"],
    .select-bar input[type="search"] { max-width: 100%; }
    .filter-group { flex-direction: column; align-items: stretch; }

    .dataTables_wrapper .dataTables_length { float: none !important; text-align: left; margin-bottom: 8px; }
    .dataTables_wrapper .dataTables_filter { float: none !important; text-align: left; margin-bottom: 8px; }
    .dataTables_wrapper .dataTables_filter input { max-width: 100%; width: 100%; margin-left: 0; }
    .dataTables_wrapper .dataTables_info { text-align: left; }
    .dataTables_wrapper .dataTables_paginate { text-align: left; float: none !important; justify-content: flex-start; }

    .card-header { flex-direction: column; align-items: flex-start; }

    input[type="text"], input[type="password"], input[type="email"],
    input[type="number"], input[type="date"], input[type="search"],
    textarea, select {
        padding: 10px 14px;
        font-size: 16px; /* prevent zoom on iOS */
        max-width: 100%;
    }
    .stat-card { padding: 14px; }
    .sidebar-toggle { width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; margin-left: -6px; }
    .sidebar-toggle span { width: 22px; left: auto; }
    .logout-btn { padding: 8px 12px; font-size: 12px; }

    .survey-block-container { max-width: 100% !important; margin: 10px; max-height: 85vh; }
    .survey-block-header { padding: 16px; }
    .survey-block-header h3 { font-size: 18px; }
    .survey-block-body { padding: 16px; }
    .survey-block-item { padding: 14px; }

    /* Auth pages */
    .auth-body { padding: 16px; }
    .auth-wrap { flex-direction: column; align-items: center; gap: 16px; }
    .auth-card { max-width: 480px; min-height: auto; }
    .auth-brand { padding: 30px 26px; }
    .auth-brand .features { display: none; }
    .auth-form { padding: 30px 26px; }
    .auth-brand h1 { font-size: 24px; }
    .video-panel { width: 100%; max-width: 480px; }
}

@media (max-width: 480px) {
    #header h2 {
        font-size: 13px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 130px;
    }
    .header-logo { display: none; }
    .user-name { display: none; }
    .user-info { gap: 6px; padding: 4px 8px 4px 4px; }
    .logout-btn { padding: 8px 10px; font-size: 11px; gap: 5px; }
    .top-bar-adm h1 { font-size: 16px; }
    #center-column { padding: 12px 8px 24px; }

    .area, .panel { padding: 14px; }
    .box { padding: 12px 14px; }

    table { font-size: 12.5px; }
    table thead th { padding: 8px 6px; font-size: 10.5px; }
    table tbody td { padding: 8px 6px; }

    .button, input[type="submit"], input[type="button"], button {
        padding: 10px 16px;
        font-size: 12.5px;
        min-height: 44px;
    }
    .top-bar-adm > div:last-child .button { width: 100%; }

    .select-bar { padding: 10px 12px; }

    /* Card view for tables on very small screens */
    .table-card-view table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0,0,0,0);
    }
    .table-card-view table tbody tr {
        display: block;
        border: 1px solid var(--border-light);
        border-radius: 10px;
        margin-bottom: 10px;
        padding: 10px;
        background: var(--surface-card);
    }
    .table-card-view table tbody td {
        display: flex;
        padding: 6px 4px;
        border: none;
        border-bottom: 1px solid #f1f5f9;
        font-size: 12px;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
    }
    .table-card-view table tbody td:last-child { border-bottom: none; }
    .table-card-view table tbody td::before {
        content: attr(data-label);
        font-weight: 700;
        color: var(--text-muted);
        font-size: 10.5px;
        text-transform: uppercase;
        letter-spacing: .04em;
        flex-shrink: 0;
    }

    .stat-card .stat-value { font-size: 15px; }

    /* Auth pages */
    .auth-body { padding: 10px; }
    .auth-card { flex-direction: column; max-width: 100%; border-radius: 14px; }
    .auth-brand { padding: 22px 18px; min-height: 130px; }
    .auth-brand .logo { width: 52px; margin-bottom: 12px; }
    .auth-brand h1 { font-size: 20px; }
    .auth-brand .subtitle { font-size: 12px; margin-bottom: 0; }
    .auth-form { padding: 22px 18px; }
    .auth-form h2 { font-size: 18px; }
    .auth-form .auth-sub { font-size: 12px; margin-bottom: 18px; }
    .auth-form .form-group { margin-bottom: 13px; }
    .auth-form .form-group label { font-size: 10.5px; }
    .auth-form .form-group input { padding: 11px 13px 11px 38px; font-size: 16px; }
    .auth-form .form-group .input-wrapper i { left: 12px; font-size: 13px; }
    .auth-form .btn-login, .auth-form .btn-sso, .auth-form .btn-cancel { padding: 12px; font-size: 13px; min-height: 46px; }
    .auth-form .equation-row { flex-wrap: wrap; }
    .auth-form .equation-row input { max-width: 74px; }
    .auth-form .error-messages, .auth-form .alert-message { font-size: 11.5px; padding: 9px 12px; }
    .video-panel { border-radius: 14px; }
    .video-panel .video-header { padding: 12px 16px; }
    .video-panel .video-body iframe { min-height: 200px; }

    .survey-block-container { max-width: 100% !important; margin: 10px; max-height: 85vh; }
    .survey-block-header { padding: 16px; }
    .survey-block-header h3 { font-size: 18px; }
    .survey-block-body { padding: 16px; }
    .survey-block-item { padding: 14px; }
}

/* ══ Tombol aksi halaman (Preview / Cetak) ═══════════════════
   Semua menu memakai pembungkus ini supaya posisinya SERAGAM:
   selalu di kanan atas konten, dalam satu baris tersendiri.
   Gaya inline lama (float kiri/bawah, position:absolute, margin
   berbeda-beda) ditimpa di sini, jadi tidak perlu diubah satu-satu. */
#noprint,
.aksi-cetak,
#print-button,
.print-bar {
    float: right !important;
    position: static !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    clear: none !important;
    margin: 0 0 10px 12px !important;
    text-align: right !important;
}

/* Elemen setelah tombol turun ke bawahnya supaya tidak tertimpa. */
#noprint + *,
.aksi-cetak + *,
#print-button + *,
.print-bar + * {
    clear: both;
}

/* Di dalam bar judul (.top-bar-adm/.top-bar = flexbox) tombol cukup menjadi
   item terakhir baris supaya otomatis berada di kanan. */
.top-bar-adm .aksi-cetak,
.top-bar .aksi-cetak,
.top-bar-adm #noprint,
.top-bar #noprint {
    float: none !important;
    margin: 0 !important;
}

/* ══ Print ══════════════════════════════════════════════════ */
@media print {
    /* (1) Lepas scroll-container pada html/body. Sebelumnya body memakai
       overflow-x:hidden yang membuat overflow-y terhitung "auto" (body jadi
       scroll container) sehingga Chrome meng-clip hasil cetak hanya pada
       halaman pertama dan memunculkan scrollbar di sisi kanan. */
    html, body {
        overflow: visible !important;
        height: auto !important;
        width: auto !important;
    }

    /* (2) Sembunyikan shell aplikasi & semua kontrol UI agar tidak ikut
       tercetak (tombol "cetak", header, sidebar, filter, pagination, dll). */
    #header, #left-column, #right-column, #footer,
    .sidebar-toggle, .logout-btn, .sidebar-overlay, .mobile-nav-overlay,
    .top-bar-adm, .select-bar, .breadcrumbs,
    .pagination, .total-rows, .ajax_loading,
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_paginate,
    .dataTables_processing,
    .noprint, #noprint, .aksi-cetak, .print-bar,
    .print-button, .button, .navi, .browse-button, .small-button,
    .btn, .btn-row, .close,
    button, input[type="submit"], input[type="button"], input[type="reset"], form,
    iframe, [id*="chatbase"], [class*="chatbase"],
    .survey-block-overlay, .survey-block-container { display: none !important; }

    /* (3) Lepas scroll-container pada wrapper tabel — mencegah tabel panjang
       hanya tercetak pada halaman pertama. */
    #middle { display: block !important; padding: 0 !important; }
    #center-column {
        margin-left: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        max-width: 100% !important;
    }
    div.table, .dataTables_wrapper, .table-responsive-wrap,
    .table-responsive-wrap table { overflow: visible !important; }

    /* (4) Netralkan lebar tetap laporan (mis. 900px) agar muat di kertas
       A4 dan tidak memunculkan scrollbar horizontal. */
    #kartu, #kartu_header { width: 100% !important; max-width: 100% !important; }
    .trans-container, .headcover-table, #area, #count_area { max-width: 100% !important; }

    /* (5) Header tabel diulang di setiap halaman & baris tidak terpotong. */
    thead { display: table-header-group; }
    tr { page-break-inside: avoid; }

    /* (6) Pemecah halaman eksplisit. */
    .page-break { page-break-before: always !important; break-before: page !important; }

    /* (7) Konten yang hanya untuk cetak. */
    .print-only { display: block !important; }

    /* (8) Tipografi & warna cetak. */
    table { font-size: 10pt; }
    table tbody td, table thead th { padding: 4px 6px; }
    body { background: #fff; }
    a { color: #000; text-decoration: none; }
}