/* ============================================================
   Gariverse — Custom UI (Tabler free · Inter · Dark mode)
   ============================================================ */

/* ── Inter font ──────────────────────────────────────────── */
*,
*::before,
*::after {
    box-sizing: border-box;
}

body,
.form-control,
.form-select,
.btn,
.dropdown-item,
.card,
.modal,
.nav,
.navbar,
input,
textarea,
select,
button {
    font-family:
        "Inter",
        system-ui,
        -apple-system,
        sans-serif !important;
}

/* ── Design tokens — light ───────────────────────────────── */
:root {
    /* Layout */
    --gv-sidebar-width: 240px;
    --gv-sidebar-collapsed-width: 68px;
    --gv-topbar-height: 56px;

    /* Sidebar */
    --gv-sidebar-bg: #16202e;
    --gv-sidebar-hover: rgba(255, 255, 255, 0.06);
    --gv-sidebar-active: rgba(255, 255, 255, 0.11);
    --gv-sidebar-text: rgba(255, 255, 255, 0.6);
    --gv-sidebar-label: rgba(255, 255, 255, 0.25);
    --gv-brand-bg: #206bc4;

    /* Surface */
    --gv-bg: #f1f5f9;
    --gv-surface: #ffffff;
    --gv-surface-2: #f8fafc;
    --gv-border: rgba(0, 0, 0, 0.07);
    --gv-border-input: #d4dae3;

    /* Text */
    --gv-text: #1e293b;
    --gv-text-2: #64748b;
    --gv-text-3: #94a3b8;

    /* Accent */
    --gv-primary: #206bc4;
    --gv-primary-hover: #1a5fab;
    --gv-primary-ring: rgba(32, 107, 196, 0.18);

    /* Shadow */
    --gv-shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.05);
    --gv-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.07);
    --gv-shadow: 0 4px 20px rgba(0, 0, 0, 0.09);
    --gv-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.13);

    /* Radius */
    --gv-r-sm: 8px;
    --gv-r: 20px;
    --gv-r-lg: 24px;
    --gv-r-xl: 28px;
    --gv-r-2xl: 32px;
}

/* ── Design tokens — dark ────────────────────────────────── */
[data-theme="dark"] {
    --gv-bg: #0f172a;
    --gv-surface: #1e293b;
    --gv-surface-2: #263040;
    --gv-border: rgba(255, 255, 255, 0.07);
    --gv-border-input: #3a4a5c;

    --gv-text: #e2e8f0;
    --gv-text-2: #94a3b8;
    --gv-text-3: #64748b;

    --gv-shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.2);
    --gv-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25);
    --gv-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    --gv-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.4);
}

/* ── Body / page layout ──────────────────────────────────── */
body {
    background: var(--gv-bg);
    color: var(--gv-text);
    transition:
        background 0.2s,
        color 0.2s;
}
.page {
    display: flex;
    min-height: 100vh;
}
.page-wrapper {
    flex: 1;
    margin-left: calc(var(--gv-sidebar-width) + 24px);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--gv-bg);
    transition:
        margin-left 0.25s,
        background 0.2s;
}

/* ═══════════════════════════════════════════════════════════
   SIDEBAR
═══════════════════════════════════════════════════════════ */
.gv-sidebar {
    position: fixed;
    top: 12px;
    left: 12px;
    width: var(--gv-sidebar-width);
    height: calc(100vh - 24px);
    background: var(--gv-sidebar-bg);
    display: flex;
    flex-direction: column;
    z-index: 1040;
    overflow: hidden;
    transition: transform 0.25s;
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.22);
}

/* Brand */
.gv-sidebar-brand {
    padding: 1.1rem 1rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

/* Tab collapse — floating button putih di tepi bawah sidebar */
.gv-collapse-tab {
    position: fixed;
    bottom: 80px;
    left: calc(
        12px + var(--gv-sidebar-width) - 18px
    ); /* setengah lebar (36px/2) masuk ke sidebar */
    width: 36px;
    height: 36px;
    background: #ffffff;
    border: none;
    border-radius: var(--gv-r-sm);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1041;
    padding: 0;
    outline: none;
    transition:
        box-shadow 0.15s,
        transform 0.1s;
}
.gv-collapse-tab:focus {
    outline: none;
}
.gv-collapse-tab:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.24);
    transform: scale(1.08);
}
.gv-collapse-tab .gv-collapse-icon-wrap {
    display: contents;
}
.gv-collapse-tab .gv-collapse-icon {
    display: block;
    font-size: 1.05rem;
    color: var(--gv-text-2);
    transition: transform 0.15s;
}
.gv-sidebar.is-collapsed ~ .gv-collapse-tab {
    left: calc(12px + var(--gv-sidebar-collapsed-width) - 18px);
}
.gv-sidebar.is-collapsed ~ .gv-collapse-tab .gv-collapse-icon {
    transform: rotate(180deg);
}

[data-theme="dark"] .gv-collapse-tab {
    background: #1e293b;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}
[data-theme="dark"] .gv-collapse-tab .gv-collapse-icon {
    color: rgba(255, 255, 255, 0.7);
}
.gv-brand-link {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    text-decoration: none;
}
.gv-brand-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--gv-brand-bg);
    color: #fff;
    font-weight: 700;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    letter-spacing: -0.02em;
}
.gv-brand-name {
    color: #fff;
    font-weight: 700;
    font-size: 0.9375rem;
    letter-spacing: -0.02em;
}

/* Nav */
.gv-sidebar-nav {
    flex: 1;
    padding: 0.5rem 0.75rem 0;
    overflow-y: auto;
    overflow-x: hidden;
}
.gv-sidebar-nav::-webkit-scrollbar {
    width: 3px;
}
.gv-sidebar-nav::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 3px;
}

.gv-nav-label {
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gv-sidebar-label);
    padding: 0.625rem 0.5rem 0.2rem;
}
.gv-nav-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 0.625rem;
    border-radius: var(--gv-r);
    color: var(--gv-sidebar-text);
    font-size: 0.8rem;
    font-weight: 500;
    text-decoration: none;
    transition:
        background 0.15s,
        color 0.15s;
    margin-bottom: 1px;
    line-height: 1.4;
}
.gv-nav-item:hover {
    background: var(--gv-sidebar-hover);
    color: rgba(255, 255, 255, 0.9);
}
.gv-nav-item.active {
    background: var(--gv-sidebar-active);
    color: #fff;
    font-weight: 600;
}
.gv-nav-icon {
    font-size: 0.9375rem;
    width: 1.1rem;
    text-align: center;
    flex-shrink: 0;
    opacity: 0.7;
    transition: opacity 0.15s;
}
.gv-nav-item:hover .gv-nav-icon,
.gv-nav-item.active .gv-nav-icon {
    opacity: 1;
}

/* Tombol "← Beranda" — back ke module launcher */
.gv-nav-back {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 0.75rem;
    border-radius: var(--gv-r);
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.78rem;
    font-weight: 500;
    text-decoration: none;
    transition:
        color 0.15s,
        background 0.15s;
    margin-bottom: 0.25rem;
    border: 1px dashed rgba(255, 255, 255, 0.15);
}
.gv-nav-back:hover {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.8);
}
.gv-nav-back .gv-nav-icon {
    opacity: 0.5;
    font-size: 0.8rem;
}

/* Footer / user card */
.gv-sidebar-spacer {
    display: none; /* nav flex:1 sudah mendorong footer ke bawah — spacer tidak diperlukan */
}
.gv-sidebar-footer {
    padding: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
}
.gv-user-card {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 0.5rem;
    border-radius: var(--gv-r-sm);
    transition: background 0.15s;
}
.gv-user-card:hover {
    background: var(--gv-sidebar-hover);
}
.gv-user-avatar,
.gv-user-avatar-initials {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 700;
}
.gv-user-avatar-initials {
    background: var(--gv-brand-bg);
    color: #fff;
}
.gv-user-info {
    flex: 1;
    min-width: 0;
}
.gv-user-name {
    font-size: 0.775rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.88);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}
.gv-user-role {
    font-size: 0.68rem;
    color: var(--gv-sidebar-label);
    line-height: 1.3;
}
.gv-logout-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--gv-sidebar-label);
    font-size: 0.9375rem;
    padding: 0.25rem;
    border-radius: var(--gv-r-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
        color 0.15s,
        background 0.15s;
}
.gv-logout-btn:hover {
    color: #e06c75;
    background: rgba(214, 57, 57, 0.12);
}

/* ── Sidebar collapsed state ─────────────────────────────────────── */
.gv-sidebar.is-collapsed {
    width: var(--gv-sidebar-collapsed-width);
}
.gv-sidebar.is-collapsed ~ .page-wrapper {
    margin-left: calc(var(--gv-sidebar-collapsed-width) + 24px);
}

/* Brand: sembunyikan nama, pusatkan ikon */
.gv-sidebar.is-collapsed .gv-sidebar-brand {
    justify-content: center;
    padding: 1.1rem 0.5rem;
}
.gv-sidebar.is-collapsed .gv-brand-name {
    display: none;
}

/* Nav: sembunyikan teks, pusatkan ikon */
.gv-sidebar.is-collapsed .gv-sidebar-nav {
    padding: 0.5rem 0.375rem 0;
}
.gv-sidebar.is-collapsed .gv-nav-label {
    display: none;
}
.gv-sidebar.is-collapsed .gv-nav-item {
    justify-content: center;
    padding: 0.5rem;
}
.gv-sidebar.is-collapsed .gv-nav-item > span {
    display: none;
}
.gv-sidebar.is-collapsed .gv-nav-back {
    justify-content: center;
    padding: 0.5rem;
}
.gv-sidebar.is-collapsed .gv-nav-back > span {
    display: none;
}
.gv-sidebar.is-collapsed .gv-nav-icon {
    width: auto;
    margin: 0;
    opacity: 0.8;
}

/* User card: sembunyikan nama & logout, pusatkan avatar */
.gv-sidebar.is-collapsed .gv-user-card {
    justify-content: center;
}
.gv-sidebar.is-collapsed .gv-user-info,
.gv-sidebar.is-collapsed .gv-user-actions {
    display: none;
}

/* App Switcher icon badge */
.gv-switcher-icon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
}

/* Mobile overlay & toggle */
.gv-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1039;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s;
}
.gv-overlay.is-visible {
    opacity: 1;
    pointer-events: all;
}

/* ═══════════════════════════════════════════════════════════
   TOP BAR — floating card, frosted glass
═══════════════════════════════════════════════════════════ */
.gv-topbar {
    height: var(--gv-topbar-height);
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(24px) saturate(1.6);
    -webkit-backdrop-filter: blur(24px) saturate(1.6);
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: var(--gv-r-xl);
    box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 4px 24px rgba(0,0,0,.06);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    position: sticky;
    top: 10px;
    z-index: 100;
    margin: 10px 16px 0;
    transition: background 0.2s, box-shadow 0.2s;
    flex-shrink: 0;
}
[data-theme="dark"] .gv-topbar {
    background: rgba(15, 23, 42, 0.78);
    border-bottom-color: rgba(255, 255, 255, 0.06);
    box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 4px 24px rgba(0,0,0,.28);
}
.gv-topbar-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    flex: 1;
}
.gv-topbar-right {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex: 1;
    justify-content: flex-end;
}
.gv-topbar-date {
    font-size: 0.75rem;
    color: var(--gv-text-3);
    font-weight: 400;
}
.gv-topbar-divider {
    width: 1px;
    height: 18px;
    background: var(--gv-border);
    margin: 0 0.25rem;
}
.gv-topbar-user-info {
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
}
.gv-topbar-name {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--gv-text);
    line-height: 1.2;
}
.gv-topbar-role {
    font-size: 0.68rem;
    color: var(--gv-text-3);
    line-height: 1.2;
}

/* Icon button — ghost style, bulat */
.gv-icon-btn {
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--gv-text-2);
    font-size: 0.9375rem;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
}
.gv-icon-btn:hover {
    background: rgba(0, 0, 0, 0.06);
    color: var(--gv-text);
}
[data-theme="dark"] .gv-icon-btn:hover {
    background: rgba(255, 255, 255, 0.09);
    color: rgba(255,255,255,.9);
}

/* Avatar button */
.gv-topbar-avatar-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    border-radius: 50%;
    display: flex;
}
.gv-topbar-avatar,
.gv-topbar-avatar-initials {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    transition:
        opacity 0.15s,
        transform 0.15s;
    box-shadow: 0 0 0 2px var(--gv-primary-ring);
}
.gv-topbar-avatar-initials {
    background: var(--gv-primary);
    color: #fff;
}
.gv-topbar-avatar-btn:hover .gv-topbar-avatar,
.gv-topbar-avatar-btn:hover .gv-topbar-avatar-initials {
    opacity: 0.82;
    transform: scale(0.96);
}

/* ═══════════════════════════════════════════════════════════
   PAGE CONTENT
═══════════════════════════════════════════════════════════ */
.page-header {
    background: transparent;
    border-bottom: none;
    padding: 1.25rem 0 0.5rem;
}
.page-title {
    font-size: 1.175rem;
    font-weight: 700;
    color: var(--gv-text);
    letter-spacing: -0.02em;
    margin-bottom: 0;
}
.page-subtitle {
    font-size: 0.8rem;
    color: var(--gv-text-2);
    margin-top: 0.2rem;
    margin-bottom: 0;
}
.page-body {
    flex: 1;
    padding-bottom: 2rem;
}

/* Breadcrumb — pill container modern */
.gv-breadcrumb-nav {
    display: inline-flex;
    margin-bottom: 0.375rem;
}
.gv-breadcrumb {
    --bs-link-color: var(--gv-text-3);
    --bs-link-color-rgb: 148, 163, 184;
    --bs-link-hover-color: var(--gv-text);
    --bs-link-hover-color-rgb: 30, 41, 59;
    --tblr-breadcrumb-link-color: var(--gv-text-3);
    --tblr-breadcrumb-item-active-color: var(--gv-text-2);
    --tblr-breadcrumb-divider-color: var(--gv-text-3);
    --tblr-breadcrumb-item-padding-x: 0.375rem;
    background: var(--gv-surface) !important;
    border: 1px solid var(--gv-border);
    border-radius: 30px;
    padding: 0.2rem 0.75rem !important;
    margin: 0;
    font-size: 0.72rem;
    align-items: center;
    box-shadow: var(--gv-shadow-xs);
}
.gv-breadcrumb .breadcrumb-item {
    display: flex;
    align-items: center;
}
.gv-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    content: "›";
    font-size: 0.8rem;
    color: var(--gv-text-3);
    padding-right: 0.375rem;
}
.gv-breadcrumb-home a {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gv-text-3) !important;
    font-size: 0.8rem;
    text-decoration: none !important;
    transition: color 0.15s;
}
.gv-breadcrumb-home a:hover {
    color: var(--gv-text) !important;
}
.gv-breadcrumb .breadcrumb-item a {
    color: var(--gv-text-3) !important;
    text-decoration: none !important;
    font-weight: 500;
    transition: color 0.15s;
}
.gv-breadcrumb .breadcrumb-item a:hover {
    color: var(--gv-text) !important;
}
.gv-breadcrumb .breadcrumb-item.active {
    color: var(--gv-text-2) !important;
    font-weight: 600;
    pointer-events: none;
}
[data-theme="dark"] .gv-breadcrumb {
    background: var(--gv-surface-2) !important;
}

/* Footer */
.footer {
    background: transparent;
    border-top: 1px solid var(--gv-border);
    padding: 0.75rem 0;
}
.footer .text-muted {
    font-size: 0.75rem;
    color: var(--gv-text-3) !important;
}

/* ═══════════════════════════════════════════════════════════
   CARDS
═══════════════════════════════════════════════════════════ */
.card {
    background: var(--gv-surface) !important;
    border-radius: var(--gv-r-lg) !important;
    border: 1px solid var(--gv-border) !important;
    box-shadow: var(--gv-shadow-xs);
    overflow: hidden;
    transition:
        background 0.2s,
        border-color 0.2s,
        box-shadow 0.15s;
}
.card:hover {
    box-shadow: var(--gv-shadow-sm);
}
.card-header {
    background: var(--gv-surface) !important;
    border-radius: var(--gv-r-lg) var(--gv-r-lg) 0 0 !important;
    border-bottom: 1px solid var(--gv-border) !important;
}
.card-footer {
    background: var(--gv-surface-2) !important;
    border-radius: 0 0 var(--gv-r-lg) var(--gv-r-lg) !important;
    border-top: 1px solid var(--gv-border) !important;
}
.card-title {
    color: var(--gv-text);
    font-weight: 600;
    font-size: 0.9375rem;
}

/* ═══════════════════════════════════════════════════════════
   BUTTONS — ukuran normal, elegan
═══════════════════════════════════════════════════════════ */
.btn {
    border-radius: 30px !important;
    font-weight: 500;
    font-size: 0.8375rem !important;
    padding: 0.45rem 1.25rem !important;
    letter-spacing: -0.01em;
    line-height: 1.5;
    transition: all 0.15s;
    box-shadow: none !important;
}
.btn:hover {
    transform: translateY(-1px);
}
.btn:active {
    transform: translateY(0);
}
.btn-sm {
    font-size: 0.775rem !important;
    padding: 0.25rem 0.9rem !important;
    border-radius: 30px !important;
}
.btn-lg {
    font-size: 0.9375rem !important;
    padding: 0.6rem 1.75rem !important;
    border-radius: 30px !important;
}
.btn-icon {
    border-radius: 50% !important;
    padding: 0.45rem !important;
}
/* Warna tombol — subtle gradient agar tidak datar */
.btn-primary {
    background: linear-gradient(135deg, #2878d0 0%, #206bc4 100%) !important;
    border-color: #206bc4 !important;
}
.btn-primary:hover {
    background: linear-gradient(135deg, #206bc4 0%, #1a5fab 100%) !important;
    border-color: #1a5fab !important;
}
.btn-outline-secondary {
    border-color: var(--gv-border-input) !important;
    color: var(--gv-text-2) !important;
}
.btn-outline-secondary:hover {
    background: var(--gv-surface-2) !important;
    color: var(--gv-text) !important;
    border-color: var(--gv-text-3) !important;
}
.btn-primary {
    background: var(--gv-primary) !important;
    border-color: var(--gv-primary) !important;
}
.btn-primary:hover {
    background: var(--gv-primary-hover) !important;
    border-color: var(--gv-primary-hover) !important;
}

/* ═══════════════════════════════════════════════════════════
   FORMS
═══════════════════════════════════════════════════════════ */
.form-control,
.form-select {
    border-radius: var(--gv-r) !important;
    border-color: var(--gv-border-input);
    background: var(--gv-surface);
    color: var(--gv-text);
    font-size: 0.8125rem;
    height: 40px;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    transition:
        border-color 0.15s,
        box-shadow 0.15s,
        background 0.2s;
}
textarea.form-control {
    height: auto;
}
.form-control:focus,
.form-select:focus {
    border-color: var(--gv-primary) !important;
    box-shadow: 0 0 0 3px var(--gv-primary-ring) !important;
    background: var(--gv-surface);
}
.form-control::placeholder {
    color: var(--gv-text-3);
}
.form-label {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--gv-text-2);
    margin-bottom: 0.375rem;
}

/* sm variants — konsisten tinggi 32px */
.form-control-sm,
.form-select-sm {
    border-radius: var(--gv-r) !important;
    font-size: 0.78rem !important;
    min-height: 32px !important;
    padding-top: 0.3rem !important;
    padding-bottom: 0.3rem !important;
}

/* Date input sm — paksa height 32px agar konsisten, override browser default */
input[type="date"].form-control-sm,
input[type="month"].form-control-sm {
    height: 32px !important;
    line-height: 1 !important;
}

/* Input group */
.input-group-text {
    border-radius: var(--gv-r) 0 0 var(--gv-r) !important;
    border-color: var(--gv-border-input);
    background: var(--gv-surface-2);
    color: var(--gv-text-3);
    font-size: 0.8125rem;
}
.input-group > .form-control:not(:last-child),
.input-group > .form-select:not(:last-child) {
    border-radius: 0 !important;
}
.input-group > .form-control:last-child,
.input-group > .form-select:last-child {
    border-radius: 0 var(--gv-r) var(--gv-r) 0 !important;
}
.input-group > .btn:last-child {
    border-radius: 0 var(--gv-r) var(--gv-r) 0 !important;
}
.input-group > .btn:first-child {
    border-radius: var(--gv-r) 0 0 var(--gv-r) !important;
}

/* Dark form */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
    background: var(--gv-surface-2);
    border-color: var(--gv-border-input);
    color: var(--gv-text);
}
[data-theme="dark"] .input-group-text {
    background: #1e293b;
    border-color: var(--gv-border-input);
}

/* ── Select2 ─────────────────────────────────────────────── */
select[data-control="select2"]:not(.select2-hidden-accessible) {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Trigger (pilihan terpilih). Pakai min-height (bukan height tetap) supaya
   multiple boleh tumbuh ke bawah saat pill banyak — single tetap 1 baris. */
.select2-container--bootstrap-5 .select2-selection {
    border-radius: 20px !important;
    border-color: var(--gv-border-input) !important;
    background: var(--gv-surface) !important;
    font-size: 0.8125rem !important;
    color: var(--gv-text) !important;
    min-height: 40px !important;
    display: flex !important;
    align-items: center !important;
    transition:
        border-color 0.15s,
        box-shadow 0.15s;
}
/* Single dipatok tepat 40px (isinya selalu 1 baris, nowrap ellipsis). */
.select2-container--bootstrap-5 .select2-selection--single {
    height: 40px !important;
}
/* Select2 sm — ikut form-select-sm 32px (select asli disembunyikan, container ada di sebelahnya) */
select.form-select-sm.select2-hidden-accessible
    + .select2-container
    .select2-selection {
    height: 32px !important;
    min-height: 32px !important;
    font-size: 0.78rem !important;
}
/* Rendered value & placeholder — pastikan vertikal center, teks clip */
.select2-container--bootstrap-5
    .select2-selection--single
    .select2-selection__rendered {
    line-height: 1.6 !important; /* sedikit lebih tinggi agar descender g, p, y tidak terpotong */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-right: 12px !important; /* ruang untuk tombol clear (×) + arrow caret */
    display: block !important;
    width: 100%;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
}
.select2-container--bootstrap-5
    .select2-selection--single
    .select2-selection__placeholder {
    line-height: 1.4 !important;
    display: flex !important;
    align-items: center !important;
}
/* Arrow caret */
.select2-container--bootstrap-5
    .select2-selection--single
    .select2-selection__arrow {
    height: 100% !important;
    top: 0 !important;
    display: flex !important;
    align-items: center !important;
}
.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection {
    border-color: var(--gv-primary) !important;
    box-shadow: 0 0 0 3px var(--gv-primary-ring) !important;
}
/* Descender (g, p, y) tidak terpotong — biarkan selection container visible */
.select2-container--bootstrap-5 .select2-selection--single {
    overflow: visible !important;
}

/* Multiple: kotak TUMBUH mengikuti jumlah pill (jangan dipatok 40px seperti single,
   supaya pill/nama panjang yang wrap tidak "keluar" ke atas kotak). */
.select2-container--bootstrap-5 .select2-selection--multiple {
    height: auto !important;
    min-height: 40px !important;
    align-items: stretch !important;
    padding: 3px 6px !important;
}
/* Vertikal-center isi multiple (pill + placeholder): ul jadi flex align-items center.
   TANPA justify/width/text-align → horizontal tetap rata kiri seperti tema. */
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered {
    height: auto !important;
    min-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    row-gap: 4px !important;
}
/* Field pencarian (tempat placeholder multiple). Tema: height 1.5rem (24px) tapi
   line-height 1.5 → teks mepet atas. Fix: line-height = height (1.5rem) supaya 1 baris
   placeholder pas center di kotak 24px, lalu kotak itu di-center dalam box 40px. */
.select2-container--bootstrap-5 .select2-selection--multiple .select2-search .select2-search__field {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    height: 1.5rem !important;
    min-height: 0 !important;
    line-height: 1.5rem !important;
}

/* Pill (tag) select2 multiple — background, warna, rounded, ukuran kecil (tak ubah layout) */
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice {
    background-color: var(--gv-primary-ring, rgba(32, 107, 196, 0.12)) !important;
    color: var(--gv-primary, #206bc4) !important;
    border: none !important;
    border-radius: 20px !important;
    padding: 2px 8px !important;
    font-size: 0.72rem !important;
    /* Teks pill 1 baris (jangan wrap ke dalam → pill tak jadi tinggi & keluar kotak). */
    white-space: nowrap !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1.4 !important;
    margin-top: 2px !important;
    margin-bottom: 2px !important;
    margin-right: 6px !important;
}

/* Dropdown panel */
.select2-container--bootstrap-5 .select2-dropdown {
    border-radius: 16px !important;
    border: 1px solid var(--gv-border) !important;
    background: var(--gv-surface) !important;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.1),
        0 2px 8px rgba(0, 0, 0, 0.06) !important;
    padding: 0.35rem;
    margin-top: 4px;
    overflow: hidden;
}

/* Search input — Metronic style: background terang, icon search, border bawah saja */
.select2-container--bootstrap-5 .select2-search--dropdown {
    padding: 0.35rem 0.35rem 0.3rem;
    border-bottom: 1px solid var(--gv-border);
    margin-bottom: 0.3rem;
}
.select2-container--bootstrap-5
    .select2-search--dropdown
    .select2-search__field {
    border-radius: 20px !important;
    border: 1px solid var(--gv-border-input) !important;
    background: var(--gv-surface-2) !important;
    color: var(--gv-text) !important;
    font-size: 0.8rem !important;
    padding: 0.4rem 0.75rem !important;
    transition:
        border-color 0.15s,
        box-shadow 0.15s;
}
.select2-container--bootstrap-5
    .select2-search--dropdown
    .select2-search__field::placeholder {
    color: var(--gv-text-3) !important;
}
.select2-container--bootstrap-5
    .select2-search--dropdown
    .select2-search__field:focus {
    border-color: var(--gv-primary) !important;
    box-shadow: 0 0 0 3px var(--gv-primary-ring) !important;
    outline: none !important;
    background: var(--gv-surface) !important;
}

/* Daftar opsi */
.select2-container--bootstrap-5 .select2-results__options {
    padding: 0;
    max-height: 240px;
}
.select2-container--bootstrap-5 .select2-results__option {
    color: var(--gv-text) !important;
    font-size: 0.8125rem !important;
    padding: 0.5rem 0.75rem !important;
    border-radius: 20px !important;
    transition:
        background 0.12s,
        color 0.12s;
    margin-bottom: 1px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.select2-container--bootstrap-5 .select2-results__option[aria-disabled="true"] {
    color: var(--gv-text-3) !important;
    font-style: italic;
}

/* Hover */
.select2-container--bootstrap-5 .select2-results__option--highlighted,
.select2-container--bootstrap-5
    .select2-results__options:hover
    .select2-results__option--selectable:hover {
    background: var(--gv-primary-ring) !important;
    color: var(--gv-primary) !important;
}
/* Highlighted tapi mouse sudah keluar → reset */
.select2-container--bootstrap-5
    .select2-results__option--highlighted:not(
        .select2-results__option--selected
    ):not(:hover) {
    background: transparent !important;
    color: var(--gv-text) !important;
}

/* Sudah dipilih → biru soft + centang kanan */
.select2-container--bootstrap-5 .select2-results__option--selected {
    background: var(--gv-primary-ring) !important;
    color: var(--gv-primary) !important;
    font-weight: 600;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
}
.select2-container--bootstrap-5 .select2-results__option--selected::after {
    content: "\2714"; /* ✔ heavy check mark — universal unicode */
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--gv-primary);
    flex-shrink: 0;
    margin-left: 0.5rem;
    line-height: 1;
}

/* Clear button (×) */
.select2-container--bootstrap-5 .select2-selection__clear {
    color: var(--gv-text-3) !important;
    transition: color 0.12s;
}
.select2-container--bootstrap-5 .select2-selection__clear:hover {
    color: var(--gv-text) !important;
}

/* Placeholder */
.select2-container--bootstrap-5 .select2-selection__placeholder {
    color: var(--gv-text-3) !important;
    font-size: 0.8rem;
}

/* ── Select2 dark mode — paksa warna text agar terbaca ────── */
[data-theme="dark"] .select2-container--bootstrap-5 .select2-selection {
    background: var(--gv-surface-2) !important;
    border-color: var(--gv-border-input) !important;
    color: var(--gv-text) !important;
}
[data-theme="dark"]
    .select2-container--bootstrap-5
    .select2-selection--single
    .select2-selection__rendered {
    color: var(--gv-text) !important;
}
[data-theme="dark"]
    .select2-container--bootstrap-5
    .select2-selection--single
    .select2-selection__placeholder {
    color: var(--gv-text-3) !important;
}
[data-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown {
    background: var(--gv-surface-2) !important;
    border-color: var(--gv-border-input) !important;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.35),
        0 2px 8px rgba(0, 0, 0, 0.2) !important;
}
[data-theme="dark"] .select2-container--bootstrap-5 .select2-search--dropdown {
    border-bottom-color: var(--gv-border-input) !important;
}
[data-theme="dark"]
    .select2-container--bootstrap-5
    .select2-search--dropdown
    .select2-search__field {
    background: var(--gv-surface) !important;
    border-color: var(--gv-border-input) !important;
    color: var(--gv-text) !important;
}
[data-theme="dark"] .select2-container--bootstrap-5 .select2-results__option {
    color: var(--gv-text) !important;
}
[data-theme="dark"]
    .select2-container--bootstrap-5
    .select2-results__option--highlighted,
[data-theme="dark"]
    .select2-container--bootstrap-5
    .select2-results__options:hover
    .select2-results__option--selectable:hover {
    background: rgba(32, 107, 196, 0.2) !important;
    color: #93c5fd !important;
}
[data-theme="dark"]
    .select2-container--bootstrap-5
    .select2-results__option--selected {
    background: rgba(32, 107, 196, 0.2) !important;
    color: #93c5fd !important;
}
[data-theme="dark"]
    .select2-container--bootstrap-5
    .select2-results__option--selected::after {
    color: #93c5fd;
}
[data-theme="dark"]
    .select2-container--bootstrap-5
    .select2-selection--multiple {
    background: var(--gv-surface-2) !important;
}
[data-theme="dark"]
    .select2-container--bootstrap-5
    .select2-selection--multiple
    .select2-selection__choice {
    background: rgba(32, 107, 196, 0.25) !important;
    border-color: rgba(32, 107, 196, 0.4) !important;
    color: #93c5fd !important;
}

/* ─── Dropdown ───────────────────────────────────────────── */
.dropdown-menu {
    background: var(--gv-surface) !important;
    border: 1px solid var(--gv-border) !important;
    border-radius: var(--gv-r-lg) !important;
    box-shadow: var(--gv-shadow-lg) !important;
    padding: 0.375rem;
    font-size: 0.8125rem;
}
.dropdown-item {
    border-radius: var(--gv-r-sm) !important;
    color: var(--gv-text) !important;
    font-size: 0.8125rem;
    transition: background 0.12s;
}
.dropdown-item:hover {
    background: var(--gv-surface-2) !important;
}
.dropdown-item.text-danger:hover {
    background: rgba(214, 57, 57, 0.08) !important;
}
.dropdown-divider {
    border-color: var(--gv-border);
    margin: 0.3rem 0;
}

/* ─── Copy button ────────────────────────────────────────── */
.gv-copy-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--gv-text-3);
    font-size: 0.75rem;
    padding: 2px 4px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition:
        opacity 0.15s,
        color 0.15s,
        background 0.15s;
    line-height: 1;
}
tr:hover .gv-copy-btn {
    opacity: 1;
}
.gv-copy-btn:hover {
    color: var(--gv-primary);
    background: var(--gv-primary-ring);
}
.gv-copy-btn.copied {
    color: #1a8c35;
    opacity: 1;
}

/* ─── Badges — pill modern ───────────────────────────────── */
.badge {
    border-radius: 30px !important;
    font-weight: 600;
    font-size: 0.7rem;
    letter-spacing: 0.01em;
    padding: 0.3em 0.75em !important;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    line-height: 1.4;
}
/* Light color variants — subtle, tidak mencolok */
.bg-blue-lt {
    background: rgba(32, 107, 196, 0.1) !important;
    color: #1d5fa0 !important;
}
.bg-green-lt {
    background: rgba(47, 179, 68, 0.1) !important;
    color: #1a8c35 !important;
}
.bg-red-lt {
    background: rgba(214, 57, 57, 0.1) !important;
    color: #b82e2e !important;
}
.bg-purple-lt {
    background: rgba(124, 58, 237, 0.1) !important;
    color: #6d28d9 !important;
}
.bg-orange-lt {
    background: rgba(247, 103, 7, 0.1) !important;
    color: #c05a04 !important;
}
.bg-cyan-lt {
    background: rgba(23, 162, 184, 0.1) !important;
    color: #0e7b8e !important;
}
/* Tabler semantic */
.bg-success-lt {
    background: rgba(47, 179, 68, 0.1) !important;
    color: #1a8c35 !important;
}
.bg-danger-lt {
    background: rgba(214, 57, 57, 0.1) !important;
    color: #b82e2e !important;
}
.bg-warning-lt {
    background: rgba(247, 103, 7, 0.1) !important;
    color: #c05a04 !important;
}
.bg-info-lt {
    background: rgba(23, 162, 184, 0.1) !important;
    color: #0e7b8e !important;
}
/* Dark mode */
[data-theme="dark"] .bg-blue-lt {
    background: rgba(32, 107, 196, 0.2) !important;
    color: #60a5fa !important;
}
[data-theme="dark"] .bg-green-lt {
    background: rgba(47, 179, 68, 0.2) !important;
    color: #4ade80 !important;
}
[data-theme="dark"] .bg-red-lt {
    background: rgba(214, 57, 57, 0.2) !important;
    color: #f87171 !important;
}
[data-theme="dark"] .bg-purple-lt {
    background: rgba(124, 58, 237, 0.2) !important;
    color: #a78bfa !important;
}
[data-theme="dark"] .bg-orange-lt {
    background: rgba(247, 103, 7, 0.2) !important;
    color: #fb923c !important;
}
[data-theme="dark"] .bg-success-lt {
    background: rgba(47, 179, 68, 0.2) !important;
    color: #4ade80 !important;
}
[data-theme="dark"] .bg-danger-lt {
    background: rgba(214, 57, 57, 0.2) !important;
    color: #f87171 !important;
}
.alert {
    border-radius: var(--gv-r) !important;
}

/* ─── Modals ─────────────────────────────────────────────── */
.modal-content {
    background: var(--gv-surface) !important;
    border: 1px solid var(--gv-border) !important;
    border-radius: var(--gv-r-xl) !important;
    box-shadow: var(--gv-shadow-lg);
}
.modal-header {
    border-radius: var(--gv-r-xl) var(--gv-r-xl) 0 0 !important;
    border-bottom: 1px solid var(--gv-border) !important;
}
.modal-footer {
    border-radius: 0 0 var(--gv-r-xl) var(--gv-r-xl) !important;
    border-top: 1px solid var(--gv-border) !important;
    background: var(--gv-surface-2) !important;
}
.modal-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--gv-text);
}

/* ─── Avatar ─────────────────────────────────────────────── */
.avatar {
    border-radius: var(--gv-r) !important;
}
.avatar.avatar-rounded {
    border-radius: 50% !important;
}

/* Avatar light color variants */
.avatar.bg-blue-lt {
    background: #dbeafe !important;
}
.avatar.bg-green-lt {
    background: #dcfce7 !important;
}
.avatar.bg-red-lt {
    background: #fee2e2 !important;
}
.avatar.bg-purple-lt {
    background: #ede9fe !important;
}
.avatar.bg-orange-lt {
    background: #ffedd5 !important;
}
[data-theme="dark"] .avatar.bg-blue-lt {
    background: rgba(32, 107, 196, 0.2) !important;
}
[data-theme="dark"] .avatar.bg-green-lt {
    background: rgba(47, 179, 68, 0.2) !important;
}
[data-theme="dark"] .avatar.bg-red-lt {
    background: rgba(214, 57, 57, 0.2) !important;
}
[data-theme="dark"] .avatar.bg-purple-lt {
    background: rgba(124, 58, 237, 0.2) !important;
}
[data-theme="dark"] .avatar.bg-orange-lt {
    background: rgba(247, 103, 7, 0.2) !important;
}

.text-blue {
    color: #206bc4 !important;
}
.text-green {
    color: #2fb344 !important;
}
.text-red {
    color: #d63939 !important;
}
.text-purple {
    color: #7c3aed !important;
}
.text-orange {
    color: #f76707 !important;
}

/* ─── Tables ─────────────────────────────────────────────── */
.table {
    color: var(--gv-text);
    font-size: 0.8125rem;
    border-collapse: separate;
    border-spacing: 0;
}
.table > :not(caption) > * > * {
    vertical-align: middle;
    border-bottom: 1px solid var(--gv-border);
    padding: 0.75rem 1rem;
}
/* Thead */
.table thead th {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gv-text-3);
    background: var(--gv-surface-2);
    border-bottom: 1px solid var(--gv-border) !important;
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
}
/* Hover row */
.table-hover > tbody > tr {
    transition: background 0.1s;
}
.table-hover > tbody > tr:hover > * {
    background: var(--gv-surface-2);
}
/* Kolom nomor dan action */
.table td:first-child,
.table th:first-child {
    padding-left: 1.25rem;
}
.table td:last-child,
.table th:last-child {
    padding-right: 1rem;
}
/* Warna teks body */
.table tbody td {
    color: var(--gv-text);
}
/* Dark mode */
[data-theme="dark"] .table thead th {
    background: rgba(255, 255, 255, 0.04);
}
[data-theme="dark"] .table-hover > tbody > tr:hover > * {
    background: rgba(255, 255, 255, 0.04);
}
/* table-responsive — scroll horizontal normal */
.table-responsive {
    overflow-x: auto;
}

/* Desktop: dropdown aksi tabel tak terpotong (tabel sudah muat, tak butuh scroll).
   overflow:visible di KEDUA sumbu — sebab overflow-x:auto memaksa overflow-y jadi auto (memotong).
   Layar < 992px tetap overflow-x:auto (scroll horizontal terjaga). */
@media (min-width: 992px) {
    .table-responsive {
        overflow: visible;
    }
    /* Card yang berisi tabel juga jangan memotong dropdown (card default overflow:hidden utk sudut membulat).
       :has() membatasi hanya ke card bertabel, card lain tak terpengaruh. */
    .card:has(.table-responsive) {
        overflow: visible;
    }
}

/* ─── Pagination — bulat, modern ────────────────────────── */
.pagination {
    gap: 3px;
    margin-bottom: 0;
    align-items: center;
}
.page-link {
    border-radius: 50% !important;
    background: transparent;
    border: none !important;
    color: var(--gv-text-2);
    font-size: 0.8rem;
    font-weight: 500;
    width: 32px;
    height: 32px;
    padding: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    line-height: 1;
}
.page-link:hover {
    background: var(--gv-surface-2) !important;
    color: var(--gv-text);
}
.page-item.active .page-link {
    background: var(--gv-primary) !important;
    color: #fff !important;
    box-shadow: 0 2px 10px var(--gv-primary-ring);
}
.page-item.disabled .page-link {
    color: var(--gv-text-3) !important;
    opacity: 0.5;
}

/* ─── Bulk Action Bar ───────────────────────────────────── */
.gv-bulk-bar {
    position: fixed;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--gv-surface);
    border: 1px solid var(--gv-border);
    border-radius: 30px;
    padding: 10px 10px 10px 20px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 1050;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition:
        opacity 0.25s,
        transform 0.25s;
}
.gv-bulk-bar.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}
.gv-bulk-bar .gv-bulk-count {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--gv-text);
}
.gv-bulk-bar .gv-bulk-count span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    border-radius: 30px;
    background: var(--gv-primary);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0 6px;
    margin-right: 4px;
}

/* ─── SweetAlert2 — compact modern ──────────────────────── */
.swal2-popup {
    border-radius: var(--gv-r-xl) !important;
    font-family: "Inter", sans-serif !important;
    padding: 1.5rem 1.75rem 1.75rem !important;
    max-width: 360px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), 0 4px 16px rgba(0, 0, 0, 0.08) !important;
    overflow: hidden !important;
}
.swal2-title {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: var(--gv-text) !important;
    padding: 0 !important;
    margin-bottom: .25rem !important;
    letter-spacing: -.02em !important;
}
.swal2-html-container,
.swal2-content {
    font-size: .8125rem !important;
    color: var(--gv-text-2) !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.5 !important;
}
.swal2-icon {
    margin: 0 auto .75rem !important;
}
/* Success icon — warna hijau Tabler, border tipis */
.swal2-icon.swal2-success {
    border-color: #2fb344 !important;
    box-shadow: 0 0 0 3px rgba(47, 179, 68, .15) !important;
}
.swal2-icon.swal2-success .swal2-success-ring {
    border-color: rgba(47, 179, 68, .5) !important;
}
.swal2-icon.swal2-success [class^="swal2-success-line"] {
    background-color: #2fb344 !important;
}
.swal2-actions {
    margin-top: 1.25rem !important;
    gap: .5rem !important;
}
.swal2-confirm,
.swal2-cancel,
.swal2-deny {
    border-radius: var(--gv-r) !important;
    font-size: .8125rem !important;
    font-weight: 500 !important;
    padding: .45rem 1.25rem !important;
}
.swal2-timer-progress-bar {
    background: var(--gv-primary) !important;
    height: 3px !important;
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — MOBILE
═══════════════════════════════════════════════════════════ */
@media (max-width: 991.98px) {
    .gv-sidebar {
        top: 0;
        left: 0;
        height: 100vh;
        border-radius: 0;
        transform: translateX(calc(-1 * var(--gv-sidebar-width)));
        box-shadow: none;
        width: var(
            --gv-sidebar-width
        ) !important; /* collapsed tidak berlaku di mobile */
    }
    .gv-sidebar.is-open {
        transform: translateX(0);
        box-shadow: var(--gv-shadow-lg);
    }
    .page-wrapper {
        margin-left: 0;
    }
    .gv-topbar {
        margin: 8px 10px 0;
        padding: 0 1rem;
    }
}

/* ── Notice block — compact soft-border style ────────────────────── */
.notice-warning,
.notice-info {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.775rem;
    font-weight: 500;
    line-height: 1.5;
    padding: 0.35rem 0.75rem;
    border-radius: 0.45rem;
    border: 1px solid transparent;
}
.notice-warning {
    background-color: rgba(240, 147, 44, 0.08);
    color: #b56a0a;
    border-color: rgba(240, 147, 44, 0.3);
}
.notice-warning i {
    color: #f0932c;
    font-size: 1rem;
    flex-shrink: 0;
}
.notice-info {
    background-color: rgba(59, 130, 246, 0.07);
    color: #1d4ed8;
    border-color: rgba(59, 130, 246, 0.3);
}
.notice-info i {
    color: #3b82f6;
    font-size: 1rem;
    flex-shrink: 0;
}

/* ── Select2: disabled option tetap tampil dengan style khusus ── */
.select2-results__option[aria-disabled="true"] {
    opacity: 1 !important;
    color: #adb5bd !important;
    cursor: not-allowed;
    font-style: italic;
}

/* ============================================================
   Dashboard — Hero greeting
   ============================================================ */
.gv-hero {
    display:flex; flex-direction:column; align-items:center;
    gap:.3rem; margin-bottom:.5rem;
}
.gv-hero-avatar-lg {
    width:52px; height:52px; border-radius:50%;
    background:var(--gv-primary,#206bc4); color:#fff;
    font-size:1rem; font-weight:700;
    display:flex; align-items:center; justify-content:center;
    overflow:hidden;
    box-shadow:0 4px 16px rgba(32,107,196,.25);
    margin-bottom:.15rem;
}
.gv-hero-avatar-lg img { width:100%; height:100%; object-fit:cover; }
.gv-hero-salutation { font-size:.72rem; color:var(--gv-text-2,#94a3b8); font-weight:400; }
.gv-hero-name-lg {
    font-size:1.35rem; font-weight:700;
    color:var(--gv-text,#1e293b);
    letter-spacing:-.03em; line-height:1;
}
[data-theme="dark"] .gv-hero-name-lg { color:#f1f5f9; }
.gv-hero-role { margin-top:.15rem; }
.gv-hero-badge {
    font-size:.65rem; font-weight:600; padding:3px 10px; border-radius:20px;
    display:inline-flex; align-items:center; gap:4px;
}
.gv-hero-badge.badge-danger  { background:rgba(214,57,57,.1);  color:#d63939; }
.gv-hero-badge.badge-primary { background:rgba(32,107,196,.1); color:#206bc4; }
.gv-hero-badge.badge-muted   { background:var(--gv-border,rgba(0,0,0,.06)); color:var(--gv-text-2); }
[data-theme="dark"] .gv-hero-badge.badge-muted { background:rgba(255,255,255,.07); }

/* ============================================================
   Dashboard — Dock
   ============================================================ */
.gv-dock-page {
    display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
    gap:1.75rem; padding:3vh 0 2rem; min-height:calc(100vh - 200px);
}
.gv-dock-section { display:flex; flex-direction:column; align-items:center; gap:.75rem; }
.gv-dock-label {
    font-size:.68rem; font-weight:700; letter-spacing:.1em;
    text-transform:uppercase; color:var(--gv-text-2,#94a3b8);
}

.gv-dock {
    display:flex; align-items:flex-end; gap:.25rem;
    padding:.75rem 1rem;
    /* TANPA backdrop-filter: blur pada container yang anaknya bertransformasi keluar
       batasnya (ikon zoom lalu menyusut) meninggalkan "hantu" layer di Chromium —
       menumpuk tiap hover. Bug ini ada selama backdrop-filter masih dipasang.
       Latar putih .82 mempertahankan kesan panel frosted tanpa lapisan blur. */
    background:rgba(255,255,255,.82);
    border:1px solid rgba(0,0,0,.08); border-radius:20px;
    box-shadow:0 8px 32px rgba(0,0,0,.08), 0 1px 0 rgba(255,255,255,.8) inset;
}
[data-theme="dark"] .gv-dock {
    background:rgba(30,41,59,.9);
    border-color:rgba(255,255,255,.08);
    box-shadow:0 8px 32px rgba(0,0,0,.3);
}

.gv-dock-item {
    position:relative; display:flex; flex-direction:column; align-items:center;
    text-decoration:none !important; cursor:pointer;
    padding:0 6px;
    transition:transform .2s cubic-bezier(.34,1.56,.64,1);
    transform-origin:bottom center;
}
.gv-dock-item:hover { transform:translateY(-12px) scale(1.25); z-index:10; text-decoration:none !important; }

.gv-dock:has(.gv-dock-item:hover) .gv-dock-item:not(:hover) { transform:translateY(0) scale(1); }
.gv-dock:has(.gv-dock-item:nth-child(1):hover) .gv-dock-item:nth-child(2),
.gv-dock:has(.gv-dock-item:nth-child(2):hover) .gv-dock-item:nth-child(1),
.gv-dock:has(.gv-dock-item:nth-child(2):hover) .gv-dock-item:nth-child(3),
.gv-dock:has(.gv-dock-item:nth-child(3):hover) .gv-dock-item:nth-child(2),
.gv-dock:has(.gv-dock-item:nth-child(3):hover) .gv-dock-item:nth-child(4),
.gv-dock:has(.gv-dock-item:nth-child(4):hover) .gv-dock-item:nth-child(3),
.gv-dock:has(.gv-dock-item:nth-child(4):hover) .gv-dock-item:nth-child(5),
.gv-dock:has(.gv-dock-item:nth-child(5):hover) .gv-dock-item:nth-child(4),
.gv-dock:has(.gv-dock-item:nth-child(5):hover) .gv-dock-item:nth-child(6) { transform:translateY(-6px) scale(1.12); }
.gv-dock:has(.gv-dock-item:nth-child(1):hover) .gv-dock-item:nth-child(3),
.gv-dock:has(.gv-dock-item:nth-child(2):hover) .gv-dock-item:nth-child(4),
.gv-dock:has(.gv-dock-item:nth-child(3):hover) .gv-dock-item:nth-child(1),
.gv-dock:has(.gv-dock-item:nth-child(3):hover) .gv-dock-item:nth-child(5),
.gv-dock:has(.gv-dock-item:nth-child(4):hover) .gv-dock-item:nth-child(2),
.gv-dock:has(.gv-dock-item:nth-child(4):hover) .gv-dock-item:nth-child(6),
.gv-dock:has(.gv-dock-item:nth-child(5):hover) .gv-dock-item:nth-child(3),
.gv-dock:has(.gv-dock-item:nth-child(6):hover) .gv-dock-item:nth-child(4) { transform:translateY(-3px) scale(1.05); }

.gv-dock-icon {
    width:64px; height:64px; border-radius:16px;
    display:flex; align-items:center; justify-content:center;
    font-size:1.75rem; box-shadow:0 4px 12px rgba(0,0,0,.12);
    transition:box-shadow .2s;
}
.gv-dock-item:hover .gv-dock-icon { box-shadow:0 8px 24px rgba(0,0,0,.18); }

.gv-dock-blue   { background:linear-gradient(135deg,#3b82f6,#1d4ed8); color:#fff; }
.gv-dock-green  { background:linear-gradient(135deg,#34d399,#059669); color:#fff; }
.gv-dock-orange { background:linear-gradient(135deg,#fb923c,#ea580c); color:#fff; }
.gv-dock-teal   { background:linear-gradient(135deg,#2dd4bf,#0d9488); color:#fff; }
.gv-dock-red    { background:linear-gradient(135deg,#f87171,#dc2626); color:#fff; }
.gv-dock-purple { background:linear-gradient(135deg,#c084fc,#9333ea); color:#fff; }
.gv-dock-pink   { background:linear-gradient(135deg,#f472b6,#db2777); color:#fff; }
.gv-dock-yellow { background:linear-gradient(135deg,#fbbf24,#d97706); color:#fff; }
.gv-dock-cyan   { background:linear-gradient(135deg,#22d3ee,#0891b2); color:#fff; }

.gv-dock-tooltip {
    position:absolute; bottom:calc(100% + 10px); left:50%; transform:translateX(-50%);
    background:rgba(15,23,42,.92); color:#fff;
    font-size:.72rem; font-weight:600; padding:4px 10px; border-radius:8px;
    white-space:nowrap; pointer-events:none; opacity:0; transition:opacity .15s;
    /* TANPA backdrop-filter: blur pada elemen yang animasi opacity + induk-nya
       bertransformasi meninggalkan "hantu" layer di Chromium yang menumpuk tiap
       hover (bekas pil gelap dekat header). Background .92 sudah cukup pekat. */
}
.gv-dock-tooltip::after {
    content:''; position:absolute; top:100%; left:50%; transform:translateX(-50%);
    border:4px solid transparent; border-top-color:rgba(15,23,42,.85);
}
.gv-dock-item:hover .gv-dock-tooltip { opacity:1; }

.gv-dock-name {
    margin-top:.4rem; font-size:.7rem; font-weight:600;
    color:var(--gv-text-2,#64748b); transition:color .2s;
}
.gv-dock-item:hover .gv-dock-name { color:var(--gv-text,#1e293b); }
[data-theme="dark"] .gv-dock-item:hover .gv-dock-name { color:#f1f5f9; }

/* ============================================================
   File Dropzone (komponen <x-file-dropzone>) — drag & drop + klik
   ============================================================ */
.gv-dropzone { position:relative; border:2px dashed var(--gv-border-input,#d5dbe3); border-radius:14px; padding:1.25rem; text-align:center; cursor:pointer; transition:border-color .15s, background .15s; background:var(--gv-surface,#fff); }
.gv-dropzone:hover { border-color:var(--gv-primary,#206bc4); background:var(--gv-primary-ring,rgba(32,107,196,.05)); }
.gv-dropzone.is-dragover { border-color:var(--gv-primary,#206bc4); background:var(--gv-primary-ring,rgba(32,107,196,.10)); }
.gv-dropzone.has-file { border-style:solid; border-color:var(--gv-primary,#206bc4); }
.gv-dropzone.is-invalid-dz { border-color:#d63939; }
.gv-dropzone-icon { font-size:1.75rem; color:var(--gv-text-3,#8a94a6); display:block; margin-bottom:.35rem; }
.gv-dropzone.has-file .gv-dropzone-icon { color:var(--gv-primary,#206bc4); }
.gv-dropzone-label { font-size:.85rem; font-weight:500; color:var(--gv-text-2,#4b5563); }
.gv-dropzone-hint { font-size:.72rem; margin-top:.15rem; }
.gv-dropzone-file { font-size:.78rem; margin-top:.35rem; color:var(--gv-primary,#206bc4); font-weight:600; word-break:break-all; }
.gv-dropzone-img { max-height:120px; border-radius:10px; margin-bottom:.5rem; object-fit:cover; }

/* ============================================================
   Mode cards (pilihan mode, mis. Tulis Artikel / Unggah PDF)
   ============================================================ */
.gv-mode-tabs { display:flex; gap:.75rem; }
.gv-mode-card { flex:1; display:flex; flex-direction:column; align-items:center; gap:.1rem; padding:.85rem 1rem; border:1.5px solid var(--gv-border-input,#d5dbe3); border-radius:14px; background:var(--gv-surface,#fff); cursor:pointer; transition:border-color .15s, background .15s, box-shadow .15s; text-align:center; }
.gv-mode-card:hover { border-color:var(--gv-primary,#206bc4); }
.gv-mode-card.active { border-color:var(--gv-primary,#206bc4); background:var(--gv-primary-ring,rgba(32,107,196,.08)); box-shadow:0 0 0 3px var(--gv-primary-ring,rgba(32,107,196,.12)); }
.gv-mode-icon { font-size:1.4rem; color:var(--gv-text-3,#8a94a6); }
.gv-mode-card.active .gv-mode-icon { color:var(--gv-primary,#206bc4); }
.gv-mode-title { font-weight:600; font-size:.85rem; color:var(--gv-text,#1f2733); }
.gv-mode-sub { font-size:.7rem; color:var(--gv-text-3,#8a94a6); }

/* ============================================================
   Rak Majalah — kartu cover (grid)
   ============================================================ */
.gv-mag-cover-card { display:block; text-decoration:none; color:inherit; }
.gv-mag-cover { position:relative; aspect-ratio:3/4; border-radius:12px; overflow:hidden; background:var(--gv-surface-2,#eef1f5); box-shadow:0 2px 10px rgba(0,0,0,.08); transition:transform .15s, box-shadow .15s; }
.gv-mag-cover-card:hover .gv-mag-cover { transform:translateY(-4px); box-shadow:0 10px 24px rgba(0,0,0,.16); }
.gv-mag-cover img { width:100%; height:100%; object-fit:contain; display:block; padding:.5rem; }
.gv-mag-cover-empty { width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:var(--gv-text-3,#8a94a6); font-size:2rem; }
.gv-mag-badge { position:absolute; top:.4rem; right:.4rem; font-size:.6rem; font-weight:600; padding:.1rem .45rem; border-radius:20px; background:rgba(0,0,0,.6); color:#fff; }
.gv-mag-title { margin-top:.45rem; font-size:.8rem; font-weight:600; color:var(--gv-text,#1f2733); line-height:1.3; }
.gv-mag-author { font-size:.72rem; color:var(--gv-text-3,#8a94a6); }

/* ============================================================
   Pembaca majalah — flipbook (PDF) + halaman artikel
   ============================================================ */
.gv-reader-toolbar { display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-bottom:1rem; padding:.55rem .9rem; background:var(--gv-surface,#fff); border:1px solid var(--gv-border,#e6e9ef); border-radius:12px; }
.gv-flip-stage { display:flex; justify-content:center; align-items:flex-start; background:linear-gradient(180deg,#2b2f38,#171a20); border-radius:14px; padding:1.75rem 1rem; min-height:62vh; overflow:auto; }
.gv-flip-stage #flipbook { width:100%; max-width:960px; }
.gv-flip-stage .stf__parent { margin:0 auto; }
/* Mode baca layar penuh (Fullscreen API) — batasi tinggi flipbook agar muat, scroll bila perlu */
#gv-reader:fullscreen { background:#12151b; padding:0; display:flex; flex-direction:column; }
#gv-reader:fullscreen .gv-reader-toolbar { margin:0; border-radius:0; }
#gv-reader:fullscreen .gv-flip-stage { flex:1; border-radius:0; min-height:0; align-items:center; }
#gv-reader:fullscreen .gv-flip-stage #flipbook { max-width:min(64vh, 960px); }
.gv-article-read { max-width:760px; margin:0 auto; line-height:1.85; font-size:1rem; }
.gv-article-read img { max-width:100%; height:auto; border-radius:8px; }
.gv-article-read h1 { font-size:1.6rem; }