/* DESIGN TOKENS — the single source of values for the backend look.
   Light-mode values live here; the [data-bs-theme="dark"] block only
   overrides them. Never define a color only in the dark block: it yields
   one theme's text on the other theme's background. */
:root {
    /* Brand accent. */
    --accent: #2957ab;
    --accent-rgb: 41, 87, 171;
    --accent-ink: #ffffff;              /* text on accent fills */
    --accent-soft: #eaeef7;             /* accent-tinted background */
    /* Legacy alias: this stylesheet and some templates still read this name. */
    --primary-color: var(--accent);
    --primary-rgb: var(--accent-rgb);
    --bs-primary: #2957ab;
    --bs-primary-rgb: 41, 87, 171;
    --bs-link-color: #2957ab;
    --bs-link-color-rgb: 41, 87, 171;
    --bs-link-hover-color: #204485;

    /* Surfaces, named by elevation */
    --bg-body: #f8fafc;
    --bg-card: #ffffff;
    --bg-sunken: #eef1f7;               /* table heads, troughs, disabled bars */
    --bg-hover: #f1f5f9;
    --bg-sidebar: #ffffff;              /* legacy alias; used by widgets and dark mode */
    --bg-table-row: #ffffff;

    /* Sidebar surface gradient. Set both to var(--bg-card)/var(--bg-body)
       for a light sidebar that blends with the rest of the panel. */
    --sidebar-bg-top: #17203a;
    --sidebar-bg-bottom: #0d1424;
    --sidebar-ink: #97a6be;
    --sidebar-ink-strong: #ffffff;
    --sidebar-heading-ink: #64748b;

    /* Lines & text */
    --border-color: #f1f5f9;
    --border-color-darker: #e2e8f0;
    --text-main: #1e293b;
    --text-subtle: #475569;
    --text-muted: #94a3b8;
    --text-nav: #64748b;
    --topbar-bg: rgba(255, 255, 255, 0.8);

    /* Status colors — separate from the accent so states don't compete with actions */
    --good: #0f7a52;  --good-soft: #e3f5ec;
    --warn: #9a5b06;  --warn-soft: #fdf0dd;
    --crit: #ad2a2a;  --crit-soft: #fbe8e8;
    --info: #0e6e8c;  --info-soft: #e2f3f8;

    /* ── Type scale ───────────────────────────────────────────────────
       Six steps cover every font size; use them instead of ad-hoc values. */
    --fs-2xs: .68rem;   /* uppercase labels, small badges */
    --fs-xs:  .74rem;   /* captions, meta, timestamps */
    --fs-sm:  .80rem;   /* table cells, menu items, small buttons */
    --fs-md:  .86rem;   /* default UI text */
    --fs-lg:  .95rem;   /* card titles */
    --fs-xl:  1.05rem;  /* section titles */

    /* ── Radius scale ── */
    --r-xs: 6px;
    --r-sm: 10px;
    --r-md: 14px;
    --r-lg: 18px;
    --r-pill: 999px;

    /* Shell & font sizes */
    --sidebar-width: 235px;
    --app-font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --mono-font: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
}

[data-bs-theme="dark"] {
    --accent: #7aa5e8;
    --accent-rgb: 122, 165, 232;
    --accent-ink: #0b1626;
    --accent-soft: #1a2b45;
    --bs-primary: #7aa5e8;
    --bs-primary-rgb: 122, 165, 232;
    --bs-link-color: #7aa5e8;
    --bs-link-color-rgb: 122, 165, 232;
    --bs-link-hover-color: #9cc0f0;

    --bg-body: #0f172a;
    --bg-card: #1e293b;
    --bg-sunken: #121b30;
    --bg-hover: #334155;
    --bg-sidebar: #121b30;
    --bg-table-row: #1e293b;

    --border-color: #334155;
    --border-color-darker: #475569;
    --text-main: #e2e8f0;
    --text-subtle: #94a3b8;
    --text-muted: #64748b;
    --text-nav: #94a3b8;
    --topbar-bg: rgba(15, 23, 42, 0.85);

    --good: #5bd39d;  --good-soft: #15312a;
    --warn: #e8b45f;  --warn-soft: #352811;
    --crit: #f08a8a;  --crit-soft: #3a1d1f;
    --info: #7fc2d9;  --info-soft: #14303a;
}

body { 
    font-family: var(--app-font); 
    background-color: var(--bg-body);
}
h1, h2, h3, h4, h5, h6, .page-title, .navbar-brand {
    font-family: var(--app-font);
    letter-spacing: -0.01em;
}

.sidebar { 
    width: var(--sidebar-width); 
    height: 100vh; 
    position: fixed; 
    left: 0; 
    top: 0; 
    background: var(--bg-sidebar); 
    border-right: 1px solid var(--border-color);
    transition: all 0.3s; 
    z-index: 1000; 
    display: flex; 
    flex-direction: column; 
}

.sidebar-header { 
    padding: .75rem 1.5rem; 
    border-bottom: 1px solid var(--border-color); 
    background: var(--bg-sidebar); 
    z-index: 10; 
}

.sidebar-content { 
    flex-grow: 1; 
    overflow-y: auto; 
    padding-bottom: 0.5rem; 
}

.sidebar-footer { 
    border-top: 1px solid var(--border-color); 
    background: var(--bg-sidebar); 
    padding: 0.5rem 0.75rem; 
    flex-shrink: 0; 
}

.btn-sidebar-action { 
    color: var(--text-muted); 
    background: transparent; 
    border: none; 
    width: 40px; 
    height: 40px; 
    border-radius: var(--r-sm); 
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    font-size: var(--fs-lg); 
    transition: all 0.2s; 
    padding: 0; 
}

.btn-sidebar-action:hover { 
    background: var(--bg-hover); 
    color: var(--primary-color); 
}

.btn-sidebar-action.is-active { 
    background: rgba(var(--primary-rgb), 0.08); 
    color: var(--primary-color); 
}

/* Specific Dark Mode Overrides for compatibility if needed */
[data-bs-theme="dark"] .table td { background-color: var(--bg-card); }
[data-bs-theme="dark"] .nav-link:hover { background: var(--bg-hover); color: #e2e8f0; }
[data-bs-theme="dark"] .nav-link.active { background: rgba(var(--primary-rgb), 0.15); color: var(--primary-color); }
[data-bs-theme="dark"] .btn-sidebar-action.is-active { background: rgba(var(--primary-rgb), 0.15); color: #6ea8fe; }
[data-bs-theme="dark"] .btn-light-subtle { background: var(--bg-sidebar); border-color: var(--border-color); color: var(--text-muted); }
[data-bs-theme="dark"] .btn-light-subtle:hover { background: var(--bg-hover); color: #e2e8f0; }
[data-bs-theme="dark"] .table tbody tr { background: transparent !important; }
[data-bs-theme="dark"] .table tbody td { border-bottom: 1px solid var(--border-color) !important; color: var(--text-muted); }
[data-bs-theme="dark"] .table tbody td:first-child,
[data-bs-theme="dark"] .table tbody td:last-child { border: none; border-bottom: 1px solid var(--border-color) !important; }
[data-bs-theme="dark"] .table thead th { color: var(--text-muted); border-bottom: 1px solid var(--border-color) !important; }
[data-bs-theme="dark"] .table tbody tr:hover { background: rgba(255,255,255,0.02); box-shadow: none; }
[data-bs-theme="dark"] .sidebar-header h5 { color: #f8fafc !important; }

[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] .input-group-text {
    background-color: var(--bg-sidebar);
    border-color: var(--border-color-darker);
    color: var(--text-main);
}

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
    background-color: var(--bg-sidebar);
    border-color: var(--primary-color);
    color: #fff;
}

[data-bs-theme="dark"] .form-control::placeholder { color: var(--border-color-darker); }
[data-bs-theme="dark"] label { color: var(--text-muted); }
[data-bs-theme="dark"] .text-dark { color: #e2e8f0 !important; }
[data-bs-theme="dark"] .text-muted { color: var(--text-muted) !important; }
[data-bs-theme="dark"] .bg-white { background-color: var(--bg-sidebar) !important; }
[data-bs-theme="dark"] .border { border-color: var(--border-color) !important; }
[data-bs-theme="dark"] .bg-warning { color: var(--bg-body); }

#page-content-wrapper { 
    margin-left: var(--sidebar-width); 
    width: calc(100% - var(--sidebar-width)); 
    transition: all 0.3s; 
}

#wrapper.toggled .sidebar { left: calc(-1 * var(--sidebar-width)); }
#wrapper.toggled #page-content-wrapper { margin-left: 0; width: 100%; }

.nav-link { 
    padding: 0.6rem 1.25rem; 
    font-size: var(--fs-sm); 
    border-radius: var(--r-sm); 
    margin: 0.1rem 0.75rem; 
    color: var(--text-nav); 
    font-weight: 500; 
    transition: all 0.2s; 
}

.nav-link:hover { 
    background: var(--bg-hover); 
    color: var(--primary-color); 
}

.nav-link.active { 
    background: rgba(var(--primary-rgb), 0.08); 
    color: var(--primary-color); 
    font-weight: 600; 
}

.nav-link i { 
    width: 20px; 
    text-align: center; 
    margin-right: 10px; 
    opacity: 0.8; 
}

.sidebar-heading { 
    font-size: var(--fs-xs); 
    font-weight: 800; 
    color: var(--text-muted); 
    padding: 1.5rem 1.5rem 0.5rem; 
    text-transform: uppercase; 
    letter-spacing: 0.08em; 
}

.topbar { 
    background: var(--topbar-bg); 
    backdrop-filter: blur(12px); 
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-color-darker); 
}

.btn-light-subtle { 
    background: var(--bg-hover); 
    border: 1px solid var(--border-color-darker); 
    font-size: var(--fs-sm); 
    font-weight: 600; 
    color: var(--text-subtle); 
}

.btn-light-subtle:hover { 
    background: var(--border-color-darker); 
    color: var(--primary-color);
}

/* Smooth Table Styles - Flattened */
.table { border-collapse: collapse; margin-top: 0; width: 100% !important; }
.table thead th { 
    border-bottom: 1px solid var(--border-color); 
    color: var(--text-muted); 
    font-weight: 700; 
    text-transform: uppercase; 
    font-size: var(--fs-xs); 
    letter-spacing: 0.05em; 
    padding: 1rem 1.25rem; 
}

.table tbody tr { background: transparent; transition: all 0.2s; }
.table tbody tr:hover { 
    background: var(--bg-hover);
}

.table tbody td { 
    padding: 1rem 1.25rem; 
    border: none;
    border-bottom: 1px solid var(--border-color); 
}

.table tbody td:first-child { 
    border-left: none;
}

.table tbody td:last-child { 
    border-right: none;
}

.card { 
    border: none; 
    background: var(--bg-card); 
    border-radius: var(--r-md); 
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); 
}

.card-header { 
    background-color: var(--bg-card); 
    border-bottom: 1px solid var(--border-color); 
    border-top-left-radius: 1rem !important; 
    border-top-right-radius: 1rem !important; 
}

#wrapper.toggled .sidebar { margin-left: calc(-1 * var(--sidebar-width)); }

/* CKEditor Vertical Layout Fix */
.django-ckeditor-widget { display: block !important; width: 100% !important; }
.django-ckeditor-widget > div { width: 100% !important; }
.form-group label { display: block; margin-bottom: 0.5rem; font-weight: 600; }

/* ── Sidebar Overlay (mobile backdrop) ── */
#sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    z-index: 1050;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

/* ── Mobile: sidebar hidden by default, slides in as overlay on toggle ── */
@media (max-width: 991.98px) {
    .sidebar {
        left: calc(-1 * var(--sidebar-width)) !important;
        z-index: 1100;
        box-shadow: none !important;
        transition: left 0.3s ease, box-shadow 0.3s ease;
    }
    #page-content-wrapper {
        margin-left: 0 !important;
        width: 100% !important;
    }
    #wrapper.toggled .sidebar {
        left: 0 !important;
        margin-left: 0 !important;
        box-shadow: 6px 0 24px rgba(0, 0, 0, 0.18) !important;
    }
    #wrapper.toggled #sidebar-overlay {
        display: block;
    }
    .topbar.px-4 { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }
    .topbar.py-3 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
    #page-content-wrapper > .container-fluid {
        padding: 0.75rem !important;
    }
    .table { font-size: var(--fs-sm); }
    .table thead th { padding: 0.55rem 0.75rem !important; }
    .table tbody td { padding: 0.55rem 0.75rem !important; }
    .table tbody tr:hover { transform: none; }
    .card { border-radius: var(--r-sm); }
    .form-label { font-size: var(--fs-md); }
}

/* ── Desktop: normal sidebar behavior ── */
@media (min-width: 992px) {
    #sidebar-overlay { display: none !important; }
    .sidebar { left: 0 !important; }
    #page-content-wrapper { margin-left: var(--sidebar-width); width: calc(100% - var(--sidebar-width)); }
    #wrapper.toggled .sidebar { left: calc(-1 * var(--sidebar-width)) !important; }
    #wrapper.toggled #page-content-wrapper { margin-left: 0 !important; width: 100% !important; }
}

.notif-dropdown {
    width: 350px;
}

/* ── Responsive dropdown: prevent overflow on small screens ── */
@media (max-width: 576px) {
    .dropdown-menu-mobile-center,
    .notif-dropdown {
        width: calc(100vw - 2rem) !important;
        max-width: 400px;
        position: fixed !important;
        top: 70px !important;
        right: 1rem !important;
        left: 1rem !important;
        margin: 0 auto !important;
        transform: none !important;
        z-index: 1060;
    }
    .cke_button__removeformat,
    .cke_button__image,
    .cke_button__table,
    .cke_button__underline,
    .cke_button__source,
    .cke_button_label,
    .cke_combo__fontsize {
        display: none !important;
    }
    .row.g-3 > [class*="col-"] { padding-left: 0.5rem; padding-right: 0.5rem; }
    .input-group { flex-wrap: wrap; }
    select.form-select { min-width: 0; }
}


/* ── Select2 Dark Mode Fixes ── */
[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection,
[data-bs-theme="dark"] .select2-container--default .select2-selection--single,
[data-bs-theme="dark"] .select2-container--default .select2-selection--multiple {
    background-color: var(--bg-sidebar) !important;
    border-color: var(--border-color-darker) !important;
    color: var(--text-main) !important;
    height: auto !important;
    min-height: 42px;
    display: flex;
    align-items: center;
}

[data-bs-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered,
[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
    color: var(--text-main) !important;
    padding-left: 12px;
}

[data-bs-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--text-muted) transparent transparent transparent;
}

[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown,
[data-bs-theme="dark"] .select2-container--default .select2-dropdown {
    background-color: var(--bg-sidebar);
    border-color: var(--border-color-darker);
    color: var(--text-main);
    box-shadow: 0 10px 25px rgba(0,0,0,0.3);
}

[data-bs-theme="dark"] .select2-container--default .select2-search--dropdown .select2-search__field,
[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field {
    background-color: var(--bg-body);
    border-color: var(--border-color-darker);
    color: var(--text-main);
}

[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-results__option,
[data-bs-theme="dark"] .select2-container--default .select2-results__option {
    color: var(--text-main);
}

[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-results__option--highlighted[aria-selected],
[data-bs-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--primary-color);
    color: #fff;
}

[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-results__option[aria-selected="true"],
[data-bs-theme="dark"] .select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: rgba(var(--primary-rgb), 0.15);
    color: var(--primary-color);
}

[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice,
[data-bs-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--bg-body);
    border-color: var(--border-color-darker);
    color: var(--text-main);
}

/* Fix width and alignment */
.select2-container {
    width: 100% !important;
}

.select2-container--default .select2-selection--single {
    border-radius: var(--r-sm);
    padding: 0.35rem 0;
}

/* ── Page Preloader ── */
.page-preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    height: 100dvh;
    background: var(--bg-body);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease;
    pointer-events: all;
}
.preloader-spinner {
    width: 48px;
    height: 48px;
    border: 3px solid var(--border-color);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-bottom: 1rem;
}
.preloader-text {
    font-size: var(--fs-sm);
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    text-transform: uppercase;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}
/* ── Debug Dot Animation ── */
.debug-dot {
    width: 9px;
    height: 9px;
    margin-top: 5px;
    background-color: #ef4444;
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 0 rgba(239, 68, 68, 0.4);
    animation: pulse-debug 2s infinite;
}
@keyframes pulse-debug {
    0% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
    }
    70% {
        box-shadow: 0 0 0 6px rgba(239, 68, 68, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
    }
}


/* === vinza-ui-polish === */
* { scrollbar-width: thin; scrollbar-color: rgba(148,163,184,.45) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background-color: rgba(148,163,184,.4); border-radius: var(--r-sm); border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background-color: rgba(var(--primary-rgb),.6); background-clip: content-box; }
[data-bs-theme="dark"] * { scrollbar-color: rgba(148,163,184,.35) transparent; }
[data-bs-theme="dark"] ::-webkit-scrollbar-thumb { background-color: rgba(148,163,184,.28); }

/* density & lighter weights */
body { font-size: var(--fs-md); }
.table { font-size: var(--fs-md); }
.table td, .table th { padding-top: .55rem; padding-bottom: .55rem; }
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 { font-weight: 600; }
.card-title, .card-header { font-weight: 600; }
.fw-bold { font-weight: 600 !important; }


/* === luxe-dark-sidebar (token-driven) === */
.sidebar {
    background: linear-gradient(180deg, var(--sidebar-bg-top) 0%, var(--sidebar-bg-bottom) 100%);
    border-right: 1px solid rgba(255,255,255,0.06);
}
.sidebar-header, .sidebar-footer {
    background: transparent !important;
    border-color: rgba(255,255,255,0.08) !important;
}
.sidebar-content { overflow-x: hidden; }

/* brand / header text -> light */
.sidebar-header h5, .sidebar-header .text-dark, .sidebar-header .text-primary { color: #ffffff !important; }

/* nav items on dark */
.sidebar .nav-link {
    color: #97a6be !important;
    position: relative; white-space: nowrap; transition: background .18s ease, color .18s ease;
    border-radius: 0 !important; margin: 0; border-left: 3px solid transparent;
}
.sidebar .nav-link i { opacity: .7; transition: color .18s ease, opacity .18s ease; }
.sidebar .nav-link:hover { background: rgba(255,255,255,0.055) !important; color: #ffffff !important; }
.sidebar .nav-link:hover i { opacity: 1; color: #cbd5e1 !important; }
.sidebar .nav-link.active {
    background: linear-gradient(90deg, rgba(var(--primary-rgb),0.26), rgba(var(--primary-rgb),0.08)) !important;
    color: #ffffff !important;
    border-left-color: var(--primary-color) !important;
    font-weight: 600;
}
.sidebar .nav-link.active i { opacity: 1; color: #6ea8fe !important; }

/* section labels */
.sidebar .sidebar-heading { color: #64748b !important; }

/* footer action buttons */
.sidebar .btn-sidebar-action { color: #97a6be !important; }
.sidebar .btn-sidebar-action:hover { background: rgba(255,255,255,0.07) !important; color: #f1f5f9 !important; }
.sidebar .btn-sidebar-action.is-active { background: rgba(var(--primary-rgb),0.2) !important; color: #6ea8fe !important; }

/* misc text safety + scrollbar inside dark sidebar */
.sidebar .text-muted { color: #7c8aa3 !important; }
.sidebar-content::-webkit-scrollbar-thumb { background-color: rgba(255,255,255,0.16); }
.sidebar-content::-webkit-scrollbar-thumb:hover { background-color: rgba(var(--primary-rgb),0.6); }


/* === card-smooth-shadow === */
.card { box-shadow: 0 4px 20px rgba(15,23,42,0.06) !important; transition: box-shadow .28s ease; }
[data-bs-theme="dark"] .card { box-shadow: 0 6px 24px rgba(0,0,0,0.28) !important; }

/* === list header: trough surface ===
   Uses the trough surface so the header stands out from the card behind it. */
.table thead.table-light,
.table thead.table-light th,
.table thead th {
    background-color: var(--bg-sunken);
    --bs-table-bg: var(--bg-sunken);
}
.table thead th:first-child { border-top-left-radius: .5rem; }
.table thead th:last-child  { border-top-right-radius: .5rem; }

/* === smaller select widget text === */
.form-select,
select.form-control { font-size: var(--fs-md); }
.select2-container .select2-selection__rendered,
.select2-container .select2-selection__choice,
.select2-results__option,
.select2-search__field { font-size: var(--fs-md) !important; }

/* === smaller font on list-view action dropdown items === */
.table .dropdown-menu .dropdown-item { font-size: var(--fs-sm); padding-top: 0.35rem; padding-bottom: 0.35rem; }
.table .dropdown-menu .dropdown-item i { font-size: var(--fs-sm); }


/* === uniform font: one family from SiteConfig.backend_font (default Inter) ===
   The family inherits from <body>; only form controls need it, because
   browsers give them their own default font. */
body, button, input, select, textarea, optgroup {
    font-family: var(--app-font);
}

/* === sidebar: stronger shadow + subtle scrollbar (shown on hover) === */
.sidebar { box-shadow: 6px 0 28px rgba(2, 6, 23, 0.35), 1px 0 0 rgba(255, 255, 255, 0.04) !important; }
.sidebar-content {
    scroll-behavior: smooth; overscroll-behavior: contain;
    scrollbar-width: thin; scrollbar-color: transparent transparent; transition: scrollbar-color .25s;
}
.sidebar-content:hover, .sidebar-content:focus-within { scrollbar-color: rgba(255, 255, 255, 0.22) transparent; }
.sidebar-content::-webkit-scrollbar { width: 5px; }
.sidebar-content::-webkit-scrollbar-track { background: transparent; }
.sidebar-content::-webkit-scrollbar-thumb { background-color: transparent !important; border: 0; border-radius: var(--r-sm); background-clip: padding-box; transition: background-color .25s; }
.sidebar-content:hover::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, 0.22) !important; }
.sidebar-content::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 255, 255, 0.4) !important; }

/* === sidebar: collapsible sections, each with a bottom border === */
.sidebar-section { flex: 0 0 auto; /* keep .list-group (flex column) from shrinking this */ border-bottom: 1px solid rgba(255, 255, 255, 0.07); padding-bottom: .35rem; }
.sidebar-section:last-child { border-bottom: 0; }
.sidebar-section-toggle {
    display: flex; align-items: center; justify-content: space-between; width: 100%; border: 0; background: transparent; cursor: pointer;
    font-size: var(--fs-xs); font-weight: 800; color: #64748b; padding: 1rem 1.5rem 0.5rem; text-transform: uppercase; letter-spacing: 0.08em;
    transition: color .15s;
}
.sidebar-section-toggle:hover { color: #cbd5e1; }
.sidebar-section-toggle .sec-chev { font-size: var(--fs-2xs); opacity: .8; transition: transform .22s ease; }
.sidebar-section.collapsed .sidebar-section-toggle .sec-chev { transform: rotate(-90deg); }
.sidebar-section-body { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .25s ease; }
.sidebar-section-inner { min-height: 0; overflow: hidden; }
.sidebar-section.collapsed .sidebar-section-body { grid-template-rows: 0fr; }
.sidebar-section.collapsed { padding-bottom: .15rem; }


/* ══════════════════════════════════════════════════════════════════════
   ACCENT LAYER — Bootstrap compiles component colors as literals (#0d6efd),
   so overriding --bs-primary alone is not enough. Accent components are
   restated here through tokens.
   ══════════════════════════════════════════════════════════════════════ */
.btn-primary {
    --bs-btn-bg: var(--accent);
    --bs-btn-border-color: var(--accent);
    --bs-btn-color: var(--accent-ink);
    --bs-btn-hover-bg: color-mix(in srgb, var(--accent) 86%, #000);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--accent) 84%, #000);
    --bs-btn-hover-color: var(--accent-ink);
    --bs-btn-active-bg: color-mix(in srgb, var(--accent) 76%, #000);
    --bs-btn-active-border-color: color-mix(in srgb, var(--accent) 74%, #000);
    --bs-btn-active-color: var(--accent-ink);
    --bs-btn-disabled-bg: var(--accent);
    --bs-btn-disabled-border-color: var(--accent);
    --bs-btn-disabled-color: var(--accent-ink);
    --bs-btn-focus-shadow-rgb: var(--accent-rgb);
}
.btn-outline-primary {
    --bs-btn-color: var(--accent);
    --bs-btn-border-color: var(--accent);
    --bs-btn-hover-bg: var(--accent);
    --bs-btn-hover-border-color: var(--accent);
    --bs-btn-hover-color: var(--accent-ink);
    --bs-btn-active-bg: var(--accent);
    --bs-btn-active-border-color: var(--accent);
    --bs-btn-active-color: var(--accent-ink);
    --bs-btn-disabled-color: var(--accent);
    --bs-btn-disabled-border-color: var(--accent);
    --bs-btn-focus-shadow-rgb: var(--accent-rgb);
}
.btn-link { --bs-btn-color: var(--accent); --bs-btn-hover-color: var(--bs-link-hover-color); }
.form-check-input:checked { background-color: var(--accent); border-color: var(--accent); }
.form-check-input:focus { border-color: var(--accent); box-shadow: 0 0 0 .2rem rgba(var(--accent-rgb), .2); }
.form-control:focus, .form-select:focus {
    border-color: color-mix(in srgb, var(--accent) 55%, var(--border-color-darker));
    box-shadow: 0 0 0 .2rem rgba(var(--accent-rgb), .15);
}
.page-link { color: var(--accent); }
.page-item.active .page-link { background-color: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.dropdown-item.active, .dropdown-item:active { background-color: var(--accent); color: var(--accent-ink); }
.nav-pills .nav-link.active, .nav-pills .show > .nav-link { background-color: var(--accent); color: var(--accent-ink); }
.list-group-item.active { background-color: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.progress-bar { background-color: var(--accent); }
.spinner-border, .spinner-grow { color: var(--accent); }
.nav-tabs .nav-link.active { color: var(--accent); }
a:focus-visible, button:focus-visible, .btn:focus-visible,
[tabindex]:focus-visible, .form-control:focus-visible, .form-select:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Aligned numbers read as columns: tabular digits, right-aligned.
   Put .num on money, count or ID <td>/<th>. */
.table .num, .table .text-end.num { text-align: right; }
.num, .tabular {
    font-family: var(--mono-font);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
}

/* Status pills use status tokens, not accent tints. */


/* ══════════════════════════════════════════════════════════════════════
   Dark-mode contrast fixes.
   `badge bg-light text-dark` keeps a light background in dark mode while
   .text-dark turns light, which leaves light text on a light badge.
   ══════════════════════════════════════════════════════════════════════ */
[data-bs-theme="dark"] .bg-light { background-color: var(--bg-sunken) !important; }
[data-bs-theme="dark"] .form-control::placeholder,
[data-bs-theme="dark"] .form-select::placeholder { color: var(--text-muted); opacity: 1; }


/* ══════════════════════════════════════════════════════════════════════
   COMMAND PALETTE (Ctrl+K) — markup in base_backend.html
   ══════════════════════════════════════════════════════════════════════ */
.cmdk-kbd {
    font-family: var(--mono-font); font-size: var(--fs-xs); font-weight: 600;
    border: 1px solid var(--border-color-darker); background: var(--bg-card);
    color: var(--text-muted); border-radius: var(--r-xs); padding: .18rem .3rem; line-height: 1;
}
.cmdk .modal-content { border: 0; border-radius: var(--r-md); overflow: hidden; background: var(--bg-card); box-shadow: 0 24px 60px -20px rgba(2,6,23,.45); }
.cmdk-head { display: flex; align-items: center; gap: .6rem; padding: .85rem 1rem; border-bottom: 1px solid var(--border-color); color: var(--text-muted); }
.cmdk-input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--text-main); font-size: var(--fs-lg); outline: none; }
.cmdk-input::placeholder { color: var(--text-muted); }
.cmdk-body { max-height: 56vh; overflow-y: auto; padding: .4rem; }
.cmdk-hint { margin: 0; padding: 1.6rem 1rem; text-align: center; color: var(--text-muted); font-size: var(--fs-sm); }
.cmdk-group {
    display: flex; align-items: center; gap: .45rem; margin: .5rem .25rem .2rem;
    font-size: var(--fs-xs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted);
}
.cmdk-item {
    display: flex; align-items: baseline; gap: .6rem; padding: .5rem .65rem; border-radius: var(--r-sm);
    text-decoration: none; color: var(--text-main); font-size: var(--fs-sm);
}
.cmdk-item:hover, .cmdk-item.is-active { background: var(--accent-soft); color: var(--accent); }
.cmdk-title { font-weight: 600; }
.cmdk-sub { color: var(--text-muted); font-size: var(--fs-sm); margin-left: auto; text-align: right; }
.cmdk-item.is-active .cmdk-sub { color: inherit; opacity: .8; }
.cmdk-foot {
    display: flex; align-items: center; gap: .9rem; flex-wrap: wrap;
    padding: .55rem 1rem; border-top: 1px solid var(--border-color);
    background: var(--bg-sunken); color: var(--text-muted); font-size: var(--fs-xs);
}

/* ══════════════════════════════════════════════════════════════════════
   TWO-LANE SIDEBAR
   A narrow accent rail on the left holds shortcuts and tools; a wide panel
   on the right holds navigation. Frequent controls (theme, fullscreen,
   lock, profile) stay on the rail, always visible without scrolling.
   The rail uses --accent, so the console has one color source.
   ══════════════════════════════════════════════════════════════════════ */
:root {
    --sb-rail: 68px;
    --sidebar-width: 296px;
}

.sidebar {
    flex-direction: row;
    background: transparent;
    border-right: 0;
}

/* ── Rail ── */
.sb-rail {
    width: var(--sb-rail);
    flex: 0 0 var(--sb-rail);
    background: var(--accent);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: .85rem 0 .9rem;
    gap: .25rem;
    overflow: hidden;
}
.sb-rail .sb-logo {
    width: 42px; height: 42px; border-radius: var(--r-md);
    display: grid; place-items: center; margin-bottom: .75rem;
    background: rgba(255, 255, 255, .16); color: #fff;
    text-decoration: none; flex-shrink: 0;
}
.sb-rail .sb-logo img { width: 26px; height: 26px; object-fit: contain; }
.sb-ikon {
    width: 42px; height: 42px; border-radius: var(--r-md);
    display: grid; place-items: center; flex-shrink: 0;
    color: rgba(255, 255, 255, .72); background: transparent;
    border: 0; text-decoration: none; font-size: var(--fs-lg);
    transition: background .18s, color .18s;
}
.sb-ikon:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.sb-ikon.active { background: rgba(255, 255, 255, .22); color: #fff; }
.sb-pisah { width: 26px; height: 1px; background: rgba(255, 255, 255, .28); margin: .55rem 0; flex-shrink: 0; }
/* Paired theme buttons in one capsule, like a light/dark switch */
.sb-kapsul {
    background: rgba(255, 255, 255, .14); border-radius: var(--r-pill);
    padding: .2rem; display: flex; flex-direction: column; gap: .15rem; flex-shrink: 0;
}
.sb-kapsul .sb-ikon { width: 34px; height: 34px; border-radius: 50%; }
.sb-avatar {
    width: 38px; height: 38px; border-radius: 50%; overflow: hidden;
    display: grid; place-items: center; flex-shrink: 0;
    background: rgba(255, 255, 255, .22); color: #fff;
    font-weight: 700; font-size: var(--fs-md); text-decoration: none;
}
.sb-avatar img { width: 100%; height: 100%; object-fit: cover; }
.sb-lonceng { position: relative; }
.sb-lonceng .sb-titik {
    position: absolute; top: 7px; right: 8px; width: 7px; height: 7px;
    border-radius: 50%; background: #ffc94d; border: 1.5px solid var(--accent);
}

/* ── Navigation panel ── */
.sb-panel {
    flex: 1 1 auto; min-width: 0;
    display: flex; flex-direction: column;
    background: var(--bg-sidebar);
    border-right: 1px solid var(--border-color);
}
.sb-panel .sidebar-header { border-bottom: 0; padding: .9rem .85rem .35rem; }
.sb-kerja {
    display: flex; align-items: center; gap: .5rem;
    border: 1px solid var(--border-color); border-radius: var(--r-pill);
    padding: .3rem .3rem .3rem .9rem; text-decoration: none;
    background: var(--bg-body);
}
.sb-kerja .sb-nama {
    font-weight: 700; font-size: var(--fs-md); color: var(--text-nav);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sb-kerja .sb-tambah {
    width: 28px; height: 28px; border-radius: 50%; margin-left: auto;
    background: var(--accent); color: #fff;
    display: grid; place-items: center; font-size: var(--fs-sm); flex-shrink: 0;
}

/* Active items are full capsules.
   !important and .sidebar-prefixed selectors are deliberate: the older
   ".sidebar .nav-link" rules force radius 0, a left border and white text
   with !important, and must be outweighed. */
.sidebar .sb-panel .nav-link {
    border-radius: var(--r-pill) !important;
    margin: .1rem .6rem;
    padding: .62rem 1rem;
    border-left: 0 !important;
    /* Darker than --text-nav, which is tuned for a dark sidebar
       and looks faded on a white panel. */
    color: #475569;
}
.sidebar .sb-panel .nav-link:hover {
    background: var(--bg-hover) !important;
    color: var(--accent) !important;
}
.sidebar .sb-panel .nav-link:hover i { color: var(--accent) !important; }
.sidebar .sb-panel .nav-link.active {
    background: var(--accent) !important;
    color: var(--accent-ink) !important;
    box-shadow: 0 8px 18px -10px rgba(var(--accent-rgb), .9);
}
.sidebar .sb-panel .nav-link.active i { opacity: 1; color: var(--accent-ink) !important; }
.sb-panel .sidebar-heading { padding: 1.1rem 1.35rem .35rem; }

.sb-kartu {
    margin: .25rem .7rem .5rem;
    background: var(--accent-soft);
    border: 1px solid transparent;
    border-radius: var(--r-lg);
    padding: .9rem;
}
.sb-kartu .sb-kartu-judul {
    font-size: var(--fs-sm); font-weight: 700; color: var(--text-nav);
    line-height: 1.35; margin-bottom: .6rem;
}
.sb-kartu .btn {
    --bs-btn-padding-y: .4rem; font-size: var(--fs-sm); font-weight: 600;
    border-radius: var(--r-pill); width: 100%;
}
.sb-panel .sidebar-footer { border-top: 0; padding: 0 0 .5rem; }

/* ── Solid variant: the panel takes the accent too ──────────────────────
   Optional style, stored per browser. */
.sidebar[data-gaya="solid"] .sb-panel {
    background: var(--accent);
    border-right-color: rgba(255, 255, 255, .18);
}
.sidebar[data-gaya="solid"] .sb-kerja {
    background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .28);
}
.sidebar[data-gaya="solid"] .sb-kerja .sb-nama { color: #fff; }
.sidebar[data-gaya="solid"] .sb-kerja .sb-tambah { background: #fff; color: var(--accent); }
.sidebar[data-gaya="solid"] .sb-panel .nav-link { color: rgba(255, 255, 255, .82) !important; }
.sidebar[data-gaya="solid"] .sb-panel .nav-link i { color: rgba(255, 255, 255, .82) !important; }
.sidebar[data-gaya="solid"] .sb-panel .nav-link:hover,
.sidebar[data-gaya="solid"] .sb-panel .nav-link:hover i {
    background: rgba(255, 255, 255, .12) !important; color: #fff !important;
}
.sidebar[data-gaya="solid"] .sb-panel .nav-link.active,
.sidebar[data-gaya="solid"] .sb-panel .nav-link.active i {
    background: #fff !important; color: var(--accent) !important; box-shadow: none;
}
.sidebar[data-gaya="solid"] .sb-panel .nav-link.active i { background: transparent !important; }
.sidebar[data-gaya="solid"] .sb-panel .sidebar-heading,
.sidebar[data-gaya="solid"] .sb-panel .sidebar-section-toggle { color: rgba(255, 255, 255, .62); }
.sidebar[data-gaya="solid"] .sb-kartu {
    background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .25);
}
.sidebar[data-gaya="solid"] .sb-kartu .sb-kartu-judul { color: #fff; }
.sidebar[data-gaya="solid"] .sb-kartu .btn {
    background: #fff; border-color: #fff; color: var(--accent);
}
.sidebar[data-gaya="solid"] .sb-rail { border-right: 1px solid rgba(255, 255, 255, .18); }

/* Narrow screens: a slimmer panel keeps the page edge visible
   behind the open drawer. */
@media (max-width: 575.98px) {
    :root { --sidebar-width: 286px; }
}

/* ══════════════════════════════════════════════════════════════════════
   ALIGNMENT — slimmer rail, dark mode, and components that follow the
   token scale above.
   ══════════════════════════════════════════════════════════════════════ */
:root {
    --sb-rail: 52px;
    --sidebar-width: 272px;
}

/* ── Rail ────────────────────────────────────────────────────────────── */
.sb-rail { padding: .6rem 0 .7rem; gap: .15rem; }
.sb-rail .sb-logo { width: 36px; height: 36px; border-radius: var(--r-sm); margin-bottom: .5rem; }
.sb-rail .sb-logo img { width: 21px; height: 21px; }
.sb-ikon { width: 36px; height: 36px; border-radius: var(--r-sm); font-size: var(--fs-sm); }
.sb-kapsul .sb-ikon { width: 30px; height: 30px; }
.sb-avatar { width: 32px; height: 32px; font-size: var(--fs-2xs); }
.sb-pisah { width: 22px; margin: .4rem 0; }
.sb-lonceng .sb-titik { top: 5px; right: 6px; width: 6px; height: 6px; }

/* Dark mode: --accent is a light blue there. As a rail background it glows
   next to the dark panel and hides the white icons, so the rail uses its
   own dark surface. */
[data-bs-theme="dark"] .sb-rail {
    background: #0e1830;
    border-right: 1px solid var(--border-color);
}
[data-bs-theme="dark"] .sb-ikon { color: #a9b6cc; }
[data-bs-theme="dark"] .sb-ikon:hover { background: rgba(255, 255, 255, .08); color: #fff; }
[data-bs-theme="dark"] .sb-ikon.active { background: rgba(var(--accent-rgb), .22); color: var(--accent); }
[data-bs-theme="dark"] .sb-rail .sb-logo { background: rgba(var(--accent-rgb), .18); color: var(--accent); }
[data-bs-theme="dark"] .sb-kapsul { background: rgba(255, 255, 255, .07); }
[data-bs-theme="dark"] .sb-avatar { background: rgba(255, 255, 255, .12); }
[data-bs-theme="dark"] .sb-lonceng .sb-titik { border-color: #0e1830; }

/* ── Panel text contrast ─────────────────────────────────────────────── */
.sidebar .sb-panel .nav-link { color: var(--text-subtle); font-size: var(--fs-sm); }
.sidebar .sb-panel .nav-link i { color: var(--text-muted); }
.sb-panel .sidebar-heading,
.sb-panel .sidebar-section-toggle {
    font-size: var(--fs-2xs);
    color: var(--text-muted);
    letter-spacing: .08em;
}
[data-bs-theme="dark"] .sidebar .sb-panel .nav-link { color: #c2cddd; }
[data-bs-theme="dark"] .sidebar .sb-panel .nav-link i { color: #8695ad; }
[data-bs-theme="dark"] .sb-panel .sidebar-heading,
[data-bs-theme="dark"] .sb-panel .sidebar-section-toggle { color: #8695ad; }
.sidebar[data-gaya="solid"] .sb-panel .nav-link { color: rgba(255, 255, 255, .9) !important; }
.sidebar[data-gaya="solid"] .sb-panel .nav-link i { color: rgba(255, 255, 255, .78) !important; }
.sb-kerja .sb-nama { font-size: var(--fs-sm); }

/* ── Collapsed: the rail stays visible ────────────────────────────────
   Only the navigation panel hides; shortcuts and tools stay in place. */
@media (min-width: 992px) {
    #wrapper.toggled .sidebar {
        left: 0 !important;
        margin-left: 0;
        width: var(--sb-rail);
        overflow: hidden;
    }
    #wrapper.toggled .sb-panel { display: none; }
    #wrapper.toggled #page-content-wrapper {
        margin-left: var(--sb-rail) !important;
        width: calc(100% - var(--sb-rail)) !important;
    }
}

/* ── Notification dropdown ────────────────────────────────────────────
   Smaller text so titles fit the narrow list. */
.notif-dropdown { width: 326px; }
.notif-dropdown .dropdown-item { padding: .6rem .75rem !important; }
.notif-dropdown h6 { font-size: var(--fs-md); }
.notif-dropdown small,
.notif-dropdown .text-xs { font-size: var(--fs-2xs) !important; }
.notif-dropdown .notif-judul { font-size: var(--fs-sm); line-height: 1.3; }
.notif-dropdown .notif-isi { font-size: var(--fs-2xs); line-height: 1.45; }
.notif-dropdown .notif-waktu { font-size: var(--fs-2xs); }
.notif-dropdown .notif-ikon { width: 30px; height: 30px; font-size: var(--fs-2xs); }
.notif-dropdown .notif-titik { width: 6px; height: 6px; }
.notif-dropdown > li:first-child { padding: .7rem .75rem !important; }

/* ── Buttons: one size scale ──────────────────────────────────────────
   Keeps adjacent buttons the same height. */
.btn { font-size: var(--fs-sm); border-radius: var(--r-sm); }
.btn-sm { font-size: var(--fs-xs); border-radius: var(--r-xs); }
.btn-lg { font-size: var(--fs-md); border-radius: var(--r-md); }
.btn.rounded-pill, .btn.rounded-pill.btn-sm { border-radius: var(--r-pill); }

/* ── Other components follow the same scale ───────────────────────────── */
.card { border-radius: var(--r-md); }
.card-header { border-top-left-radius: var(--r-md) !important; border-top-right-radius: var(--r-md) !important; }
.form-control, .form-select { font-size: var(--fs-sm); border-radius: var(--r-sm); }
.form-label { font-size: var(--fs-xs); font-weight: 600; color: var(--text-subtle); }
.table { font-size: var(--fs-sm); }
.table thead th { font-size: var(--fs-2xs); letter-spacing: .05em; color: var(--text-muted); }
.dropdown-menu { border-radius: var(--r-md); font-size: var(--fs-sm); }
.dropdown-item { font-size: var(--fs-sm); border-radius: var(--r-xs); }
.alert { border-radius: var(--r-sm); font-size: var(--fs-sm); }
.page-title { font-size: var(--fs-xl); }
.modal-content { border-radius: var(--r-lg); }
.nav-pills .nav-link { font-size: var(--fs-sm); border-radius: var(--r-pill); }

/* Neutral buttons in dark mode. Bootstrap's .btn-light stays white: on a
   dark console it glows and reads as a primary action instead of a secondary one. */
[data-bs-theme="dark"] .btn-light,
[data-bs-theme="dark"] .btn-light-subtle,
[data-bs-theme="dark"] .btn-outline-secondary {
    background-color: var(--bg-sunken);
    border-color: var(--border-color-darker);
    color: var(--text-main);
}
[data-bs-theme="dark"] .btn-light:hover,
[data-bs-theme="dark"] .btn-light-subtle:hover,
[data-bs-theme="dark"] .btn-outline-secondary:hover {
    background-color: var(--bg-hover);
    border-color: var(--border-color-darker);
    color: #ffffff;
}
[data-bs-theme="dark"] .btn-light:focus-visible,
[data-bs-theme="dark"] .btn-light-subtle:focus-visible { color: #ffffff; }

/* ══════════════════════════════════════════════════════════════════════
   SHADOWS, UTILITY RADII, BUTTONS AND LINKS
   Also defines two widely used classes that Bootstrap lacks.
   ══════════════════════════════════════════════════════════════════════ */
:root {
    --sh-xs: 0 1px 2px rgba(15, 23, 42, .06);
    --sh-sm: 0 2px 8px -3px rgba(15, 23, 42, .12);
    --sh-md: 0 10px 24px -12px rgba(15, 23, 42, .24);
    --sh-lg: 0 20px 44px -22px rgba(15, 23, 42, .34);
}
[data-bs-theme="dark"] {
    --sh-xs: 0 1px 2px rgba(0, 0, 0, .35);
    --sh-sm: 0 2px 10px -3px rgba(0, 0, 0, .5);
    --sh-md: 0 12px 26px -14px rgba(0, 0, 0, .66);
    --sh-lg: 0 22px 48px -24px rgba(0, 0, 0, .75);
}

/* Shadows: three steps. */
.shadow-sm { box-shadow: var(--sh-sm) !important; }
.shadow    { box-shadow: var(--sh-md) !important; }
.shadow-lg { box-shadow: var(--sh-lg) !important; }
/* .shadow-2xl is not a Bootstrap class; the notification dropdown uses it. */
.shadow-2xl { box-shadow: var(--sh-lg) !important; }
.card { box-shadow: var(--sh-sm); }
.dropdown-menu { box-shadow: var(--sh-md); }
.modal-content { box-shadow: var(--sh-lg); }

/* Bootstrap radius utilities map to the same scale, so cards using
   rounded-3 and rounded-4 get matching corners. */
.rounded-1 { border-radius: var(--r-xs) !important; }
.rounded-2 { border-radius: var(--r-xs) !important; }
.rounded-3 { border-radius: var(--r-sm) !important; }
.rounded-4 { border-radius: var(--r-md) !important; }
.rounded-5 { border-radius: var(--r-lg) !important; }

/* .btn-xs is not a Bootstrap class; it is defined here. */
.btn-xs {
    --bs-btn-padding-y: .15rem;
    --bs-btn-padding-x: .5rem;
    font-size: var(--fs-2xs);
    border-radius: var(--r-xs);
    line-height: 1.4;
}

/* The three secondary-button styles (btn-light, btn-light-subtle,
   btn-outline-secondary) look the same. Class names stay, so templates
   need no changes. */
.btn-light, .btn-light-subtle, .btn-outline-secondary {
    background: var(--bg-card);
    border: 1px solid var(--border-color-darker);
    color: var(--text-subtle);
    font-weight: 600;
}
.btn-light:hover, .btn-light-subtle:hover, .btn-outline-secondary:hover {
    background: var(--bg-hover);
    border-color: var(--border-color-darker);
    color: var(--accent);
}

/* Links: one color, underlined on hover only. <a> elements acting as
   buttons or menu items are excluded; an underline there looks broken. */
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--bs-link-hover-color); text-decoration: underline; }
a.btn, a.nav-link, a.dropdown-item, a.page-link, a.badge,
a.sb-ikon, a.sb-logo, a.sb-avatar, a.sb-kerja, a.btn-sidebar-action,
.card a.stretched-link, .list-group-item-action {
    text-decoration: none !important;
}
a.btn:hover, a.nav-link:hover, a.dropdown-item:hover { text-decoration: none !important; }

/* Overrides a dark-sidebar rule that forces white header text;
   the panel header has a light background. */
.sb-panel .sidebar-header h5,
.sb-panel .sidebar-header .text-dark,
.sb-panel .sidebar-header .text-primary { color: var(--text-main) !important; }

/* Bootstrap's own radius variables map to the scale too. Otherwise parts
   sized from --bs-border-radius (input-group ends, badges, popovers) keep
   .5rem and mismatch the cards and buttons next to them. */
:root {
    --bs-border-radius: var(--r-sm);
    --bs-border-radius-sm: var(--r-xs);
    --bs-border-radius-lg: var(--r-md);
    --bs-border-radius-xl: var(--r-lg);
    --bs-border-radius-xxl: var(--r-lg);
    --bs-border-radius-pill: var(--r-pill);
}

/* Bootstrap semantic colors map to the site status tokens, so one table
   never shows two greens or two reds. The default .text-info cyan
   (#0dcaf0) is also off-palette. */
:root {
    --bs-success: #0f7a52;  --bs-success-rgb: 15, 122, 82;
    --bs-danger:  #ad2a2a;  --bs-danger-rgb: 173, 42, 42;
    --bs-warning: #9a5b06;  --bs-warning-rgb: 154, 91, 6;
    --bs-info:    #2f7f9e;  --bs-info-rgb: 47, 127, 158;
    --bs-secondary: #64748b; --bs-secondary-rgb: 100, 116, 139;
}
[data-bs-theme="dark"] {
    --bs-success: #5bd39d;  --bs-success-rgb: 91, 211, 157;
    --bs-danger:  #f08a8a;  --bs-danger-rgb: 240, 138, 138;
    --bs-warning: #e8b45f;  --bs-warning-rgb: 232, 180, 95;
    --bs-info:    #7fc2d9;  --bs-info-rgb: 127, 194, 217;
    --bs-secondary: #94a3b8; --bs-secondary-rgb: 148, 163, 184;
}

/* ══════════════════════════════════════════════════════════════════════
   SIDEBAR RAIL ON ALL SCREEN SIZES
   Rarely used top-bar controls (favorites, view site, language) live on
   the rail, which stays visible on phones too.
   ══════════════════════════════════════════════════════════════════════ */

/* Rail dropdowns need room to escape; any overflow other than
   visible clips them. */
.sb-rail { overflow: visible; }
.sb-rail .dropdown { position: relative; }
/* Bootstrap positions .dropdown-menu[data-bs-popper] at left: 0, top: 100%,
   which covers the icons on the 52px rail. These positions must win. */
.sb-rail .dropdown-menu, .sb-dropdown {
    position: absolute !important;
    inset: auto !important;
    top: 0 !important;
    left: calc(100% + 8px) !important;
    right: auto !important;
    transform: none !important;
    min-width: 190px;
    border-radius: var(--r-md);
    z-index: 1200;
}

/* Phones & tablets: hide the panel, not the whole sidebar.
   The rail stays, so shortcuts and tools remain available. */
@media (max-width: 991.98px) {
    :root { --sb-rail: 46px; }
    /* The sidebar stays at the left; only the panel hides. Shifting it
       left by the panel width would hide the rail, which sits on the
       sidebar's left side. */
    .sidebar {
        left: 0 !important;
        width: var(--sb-rail);
        overflow: visible;
    }
    .sb-panel { display: none; }
    #page-content-wrapper {
        margin-left: var(--sb-rail) !important;
        width: calc(100% - var(--sb-rail)) !important;
    }
    #wrapper.toggled .sidebar { left: 0 !important; width: var(--sidebar-width); }
    #wrapper.toggled .sb-panel { display: flex; }
    .sb-rail .sb-logo { width: 32px; height: 32px; }
    .sb-ikon { width: 32px; height: 32px; }
    .sb-kapsul .sb-ikon { width: 28px; height: 28px; }
    .sb-avatar { width: 28px; height: 28px; }
    /* On narrow screens rail dropdowns open to the right at a fixed
       width instead of overflowing the screen. */
    .sb-rail .dropdown-menu, .sb-dropdown {
        min-width: 170px;
        max-width: calc(100vw - var(--sb-rail) - 24px);
    }
}

/* Short screens: hide the least-used tools so the rail is not
   clipped at the bottom. */
@media (max-height: 680px) {
    .sidebar:not(.sb-v2) #btn-fullscreen, .sidebar:not(.sb-v2) #btn-lock-sidebar { display: none !important; }
}

/* Search button: below lg the label hides, leaving a non-square box
   where rounded-pill draws an oval. The box is locked square so the
   pill becomes a circle. */
.btn-cmdk {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
}
@media (min-width: 992px) {
    .btn-cmdk { width: auto; flex: 0 0 auto; }
}

/* ══════════════════════════════════════════════════════════════════════
   SIDEBAR: CONTRAST AND SIZE
   --text-subtle/--text-muted suit secondary text on white cards. On an
   all-text sidebar they make everything read like captions.
   ══════════════════════════════════════════════════════════════════════ */
.sidebar .sb-panel .nav-link { color: #2e3135; font-weight: 500; }
/* Icons sit one step lighter than their labels; at equal weight the
   menu reads like a row of symbols instead of a list of words. */
.sidebar .sb-panel .nav-link i { color: #55595f; }
.sidebar .sb-panel .nav-link:hover { color: var(--accent); }
.sidebar .sb-panel .nav-link:hover i { color: var(--accent) !important; }
/* Dark mode inverts this: the contrast ratio matches,
   not the color. */
[data-bs-theme="dark"] .sidebar .sb-panel .nav-link { color: #e8edf4; }
[data-bs-theme="dark"] .sidebar .sb-panel .nav-link i { color: #aebbcd; }

/* Group headers: smaller and tighter, so the menu items
   read first. */
.sb-panel .sidebar-section-toggle {
    font-size: var(--fs-xs) !important;
    letter-spacing: .1em;
    padding: .7rem 1.35rem .3rem !important;
    color: #94a3b8 !important;
    font-weight: 700;
}
.sb-panel .sidebar-section-toggle .sec-chev { font-size: var(--fs-xs); opacity: .7; }
[data-bs-theme="dark"] .sb-panel .sidebar-section-toggle { color: #8695ad !important; }

/* Monogram on a white tile: always readable on the accent rail. */
.sb-rail .sb-logo { background: #fff; color: var(--accent); }
.sb-rail .sb-logo-huruf {
    font-family: var(--app-font); font-weight: 800; font-size: var(--fs-xl); line-height: 1;
}
[data-bs-theme="dark"] .sb-rail .sb-logo { background: rgba(255, 255, 255, .92); color: #15284d; }

/* Workspace name uses the accent color. */
.sb-kerja .sb-nama { color: var(--accent) !important; font-weight: 700; }
.sidebar[data-gaya="solid"] .sb-kerja .sb-nama { color: #fff !important; }

/* Panel footer holds no card; keep a little breathing room. */
.sb-panel .sidebar-footer { padding: 0 0 .75rem; }

/* Rail dropdowns must sit above page content, including the sticky
   top bar (z-index 1030) and the mobile sidebar drawer (1100). */
.sb-rail .dropdown-menu, .sb-dropdown { z-index: 1200 !important; }
@media (max-width: 991.98px) {
    /* On phones the rail sits above content; its language menu must
       stay above the sticky top bar. */
    .sidebar { z-index: 1101; }
    .sb-rail .dropdown-menu, .sb-dropdown { z-index: 1205 !important; }
}

/* ══════════════════════════════════════════════════════════════════════
   BADGES — one system for the whole console.
   One shape: a small-radius tag (matching inputs and buttons) with a
   light background, matching border and colored text. Only the TONE
   varies, read from Bootstrap color classes already in the templates,
   so legacy markup matches without edits.
   New markup should use {% badge %} / {% status_badge %} from
   core_tags, which emit .badge.tone-* directly.
   ══════════════════════════════════════════════════════════════════════ */
.badge, .pill-status {
    --b-ink: var(--text-subtle);
    --b-bg: var(--bg-sunken);
    --b-bd: var(--border-color-darker);
    display: inline-flex;
    align-items: center;
    gap: .38em;
    max-width: 100%;
    padding: .32em .62em;
    font-family: var(--app-font);
    font-size: var(--fs-2xs);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: .01em;
    white-space: nowrap;
    vertical-align: middle;
    color: var(--b-ink) !important;
    background: var(--b-bg) !important;
    border: 1px solid var(--b-bd) !important;
    border-radius: var(--r-xs) !important;
}
.badge > i, .pill-status > i { font-size: .92em; margin: 0 !important; opacity: .9; }
/* Long text (titles, emails) truncates instead of wrapping table rows. */
.badge { overflow: hidden; text-overflow: ellipsis; }
.badge.text-wrap { white-space: normal; }
/* Technical values (slugs, cron expressions, icon names) use monospace. */
.badge.font-monospace, .badge.is-code {
    font-family: var(--mono-font);
    font-weight: 500;
    letter-spacing: 0;
}

/* Status dot: .badge-dot (from {% status_badge %}) and legacy .pill-status. */
.badge-dot::before, .pill-status::before {
    content: "";
    width: .5em; height: .5em;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}

/* ── Tones ──
   Explicit tones (.tone-*) win; the rest map from Bootstrap color
   classes in the templates. */
.badge.bg-success, .badge.bg-success-subtle, .badge.text-success, .badge.text-success-emphasis,
.badge.border-success, .pill-status.is-good, .badge.tone-good {
    --b-ink: var(--good);
    --b-bg: color-mix(in srgb, var(--good) 9%, var(--bg-card));
    --b-bd: color-mix(in srgb, var(--good) 26%, var(--bg-card));
}
.badge.bg-warning, .badge.bg-warning-subtle, .badge.text-warning, .badge.text-warning-emphasis,
.badge.border-warning, .pill-status.is-warn, .badge.tone-warn {
    --b-ink: var(--warn);
    --b-bg: color-mix(in srgb, var(--warn) 10%, var(--bg-card));
    --b-bd: color-mix(in srgb, var(--warn) 28%, var(--bg-card));
}
.badge.bg-danger, .badge.bg-danger-subtle, .badge.text-danger, .badge.text-danger-emphasis,
.badge.border-danger, .pill-status.is-crit, .badge.tone-crit {
    --b-ink: var(--crit);
    --b-bg: color-mix(in srgb, var(--crit) 8%, var(--bg-card));
    --b-bd: color-mix(in srgb, var(--crit) 26%, var(--bg-card));
}
.badge.bg-info, .badge.bg-info-subtle, .badge.text-info, .badge.text-info-emphasis,
.badge.border-info, .badge.tone-info {
    --b-ink: var(--info);
    --b-bg: color-mix(in srgb, var(--info) 9%, var(--bg-card));
    --b-bd: color-mix(in srgb, var(--info) 26%, var(--bg-card));
}
.badge.bg-primary, .badge.bg-primary-subtle, .badge.text-primary, .badge.text-primary-emphasis,
.badge.border-primary, .badge.tone-accent {
    --b-ink: var(--accent);
    --b-bg: color-mix(in srgb, var(--accent) 8%, var(--bg-card));
    --b-bd: color-mix(in srgb, var(--accent) 24%, var(--bg-card));
}
/* Neutral: gray, white and black all become the same neutral tag. */
.badge.bg-secondary, .badge.bg-secondary-subtle, .badge.text-secondary, .badge.text-secondary-emphasis,
.badge.bg-light, .badge.bg-white, .badge.bg-dark, .badge.text-dark, .badge.text-muted,
.pill-status.is-idle, .badge.tone-neutral {
    --b-ink: var(--text-subtle);
    --b-bg: var(--bg-sunken);
    --b-bd: var(--border-color-darker);
}
/* Combos like "bg-light border border-success": the border carries the
   tone, so it beats the neutral background above. */
.badge.bg-light.border-success { --b-ink: var(--good); --b-bd: color-mix(in srgb, var(--good) 30%, var(--bg-card)); }
.badge.bg-light.border-warning { --b-ink: var(--warn); --b-bd: color-mix(in srgb, var(--warn) 30%, var(--bg-card)); }
.badge.bg-light.border-danger  { --b-ink: var(--crit); --b-bd: color-mix(in srgb, var(--crit) 30%, var(--bg-card)); }
.badge.bg-light.border-primary { --b-ink: var(--accent); --b-bd: color-mix(in srgb, var(--accent) 30%, var(--bg-card)); }
/* Badges on colored surfaces (blue card headers, active items). */
.badge.text-white, .badge.tone-on-color {
    --b-ink: #fff;
    --b-bg: rgba(255, 255, 255, .18);
    --b-bd: rgba(255, 255, 255, .28);
}

/* ── Counters ──
   Icon-corner counts (bell, cart) and selection counters: a solid
   capsule, since they draw the eye rather than describe a state. */
#notif-badge, .position-absolute.badge, .badge.rounded-circle, .badge.is-count {
    --b-ink: #fff;
    --b-bg: var(--crit);
    --b-bd: var(--bg-card);
    justify-content: center;
    min-width: 1.5em;
    padding: .28em .45em;
    border-radius: var(--r-pill) !important;
    font-variant-numeric: tabular-nums;
}
[data-bs-theme="dark"] #notif-badge,
[data-bs-theme="dark"] .position-absolute.badge,
[data-bs-theme="dark"] .badge.is-count { --b-ink: #1a0b0b; }
.badge.is-count.tone-accent { --b-bg: var(--accent); --b-ink: var(--accent-ink); }
/* Inline counters (e.g. "12 permissions", user counts) stay tags. */
td .badge.rounded-circle { border-radius: var(--r-xs) !important; }

/* ══════════════════════════════════════════════════════════════════════
   LIST COMPONENTS — empty state, row actions, pagination.
   CSS for core/elements/{empty_state,row_actions,pagination}.html.
   ══════════════════════════════════════════════════════════════════════ */
.empty-row > td { padding: 0 !important; border-bottom: 0 !important; }
.empty-row:hover > td { background: transparent !important; }
.empty-state {
    display: flex; flex-direction: column; align-items: center;
    text-align: center;
    padding: 3rem 1.5rem;
}
.empty-state-icon {
    width: 52px; height: 52px;
    display: grid; place-items: center;
    margin-bottom: .9rem;
    border-radius: var(--r-md);
    background: var(--bg-sunken);
    color: var(--text-muted);
    font-size: 1.25rem;
}
.empty-state-title { font-size: var(--fs-md); font-weight: 600; color: var(--text-main); }
.empty-state-text { margin-top: .3rem; max-width: 34rem; font-size: var(--fs-sm); color: var(--text-muted); }

.btn-row-actions {
    width: 32px; height: 32px;
    display: inline-grid; place-items: center;
    padding: 0;
    border-radius: var(--r-sm);
    color: var(--text-muted);
    border: 1px solid transparent;
}
.btn-row-actions:hover, .btn-row-actions[aria-expanded="true"] {
    background: var(--bg-hover);
    border-color: var(--border-color-darker);
    color: var(--text-main);
}
.row-actions .dropdown-menu { min-width: 11rem; padding: .35rem; }
.row-actions .dropdown-item { padding: .45rem .65rem; }

.list-pagination {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: .75rem;
    padding: .85rem 1.25rem;
    border-top: 1px solid var(--border-color);
}
/* Pagination outside a card needs no top border. */
.card + .list-pagination, .card ~ .list-pagination { border-top: 0; padding-inline: .25rem; }
.list-pagination-info { font-size: var(--fs-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.list-pagination .pagination { gap: .25rem; }
.list-pagination .page-link {
    min-width: 32px; height: 32px;
    display: grid; place-items: center;
    padding: 0 .55rem;
    border: 1px solid var(--border-color-darker);
    border-radius: var(--r-sm) !important;
    background: var(--bg-card);
    color: var(--text-subtle);
    font-size: var(--fs-sm);
    font-variant-numeric: tabular-nums;
}
.list-pagination .page-link:hover { background: var(--bg-hover); color: var(--text-main); }
.list-pagination .page-item.active .page-link {
    background: var(--accent); border-color: var(--accent); color: var(--accent-ink);
}
.list-pagination .page-item.disabled .page-link { opacity: .45; background: transparent; }

/* ══════════════════════════════════════════════════════════════════════
   GENERIC FORM — two columns & tabs (core/generic_form.html)
   ══════════════════════════════════════════════════════════════════════ */
.form-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.5rem; }
.form-grid-2 > input[type="hidden"] { display: none; }
.form-grid-2 > div:has(textarea),
.form-grid-2 > div:has(.django-ckeditor-widget),
.form-grid-2 > div:has(.select2),
.form-grid-2 > div:has(input[type="checkbox"] + label + input[type="checkbox"]) { grid-column: 1 / -1; }
@media (max-width: 576px) { .form-grid-2 { grid-template-columns: 1fr; } }

.form-tabs-nav { border-bottom: 1px solid var(--border-color); background: var(--bg-card); }
.form-tabs-nav .nav-tabs { border-bottom: 0; gap: .25rem; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.form-tabs-nav .nav-tabs::-webkit-scrollbar { display: none; }
.form-tabs-nav .nav-link {
    position: relative;
    white-space: nowrap;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    padding: .85rem .9rem;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text-nav);
    background: transparent;
}
.form-tabs-nav .nav-link:hover { color: var(--text-main); }
.form-tabs-nav .nav-link.active { color: var(--accent); border-bottom-color: var(--accent); background: transparent; }
.tab-error-dot {
    display: inline-block;
    width: 7px; height: 7px;
    margin-left: .4rem;
    vertical-align: middle;
    border-radius: 50%;
    background: var(--crit);
}

/* ── Page header (core/elements/page_header.html) ── */
.page-head {
    display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
    gap: .75rem 1.5rem;
    margin-bottom: 1.5rem;
}
.page-head-text { min-width: 0; flex: 1 1 18rem; }
.page-head-title { margin: 0; font-size: 1.35rem; font-weight: 700; color: var(--text-main); display: flex; align-items: center; flex-wrap: wrap; }
.page-head-sub { margin: .3rem 0 0; font-size: var(--fs-sm); color: var(--text-muted); max-width: 48rem; }
.page-head-tools { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; }
.page-head-tools .btn { display: inline-flex; align-items: center; gap: .45rem; }
@media (max-width: 575.98px) {
    /* Icon only on phones; the label stays as title and for screen readers. */
    .page-head-tool-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .page-head-title { font-size: 1.15rem; }
}


/* Light sidebar: label #4a5261. Icons keep their color on hover (only
   the label takes the accent) so the list does not flicker. */
:root:not([data-bs-theme="dark"]) .sidebar:not([data-gaya="solid"]) .sb-panel .nav-link:not(.active) { color: #4a5261 !important; }
:root:not([data-bs-theme="dark"]) .sidebar:not([data-gaya="solid"]) .sb-panel .nav-link:not(.active):hover { color: var(--accent) !important; }
:root:not([data-bs-theme="dark"]) .sidebar:not([data-gaya="solid"]) .sb-panel .nav-link:not(.active) i,
:root:not([data-bs-theme="dark"]) .sidebar:not([data-gaya="solid"]) .sb-panel .nav-link:not(.active):hover i { color: #5c6370 !important; }

/* The solid style in dark mode matches light mode. --accent is light
   blue in the dark theme, so the color is pinned to the light accent. */
[data-bs-theme="dark"] .sidebar[data-gaya="solid"] .sb-rail,
[data-bs-theme="dark"] .sidebar[data-gaya="solid"] .sb-panel { background: #2957ab; }
[data-bs-theme="dark"] .sidebar[data-gaya="solid"] .sb-rail { border-right: 1px solid rgba(255, 255, 255, .18); }
[data-bs-theme="dark"] .sidebar[data-gaya="solid"] .sb-ikon { color: rgba(255, 255, 255, .72); }
[data-bs-theme="dark"] .sidebar[data-gaya="solid"] .sb-ikon:hover { background: rgba(255, 255, 255, .14); color: #fff; }
[data-bs-theme="dark"] .sidebar[data-gaya="solid"] .sb-ikon.active { background: rgba(255, 255, 255, .22); color: #fff; }
[data-bs-theme="dark"] .sidebar[data-gaya="solid"] .sb-kapsul { background: rgba(255, 255, 255, .14); }
[data-bs-theme="dark"] .sidebar[data-gaya="solid"] .sb-avatar { background: rgba(255, 255, 255, .22); }
[data-bs-theme="dark"] .sidebar[data-gaya="solid"] .sb-rail .sb-logo { background: #fff; color: #2957ab; }
[data-bs-theme="dark"] .sidebar[data-gaya="solid"] .sb-panel .nav-link.active,
[data-bs-theme="dark"] .sidebar[data-gaya="solid"] .sb-panel .nav-link.active i { color: #2957ab !important; }
[data-bs-theme="dark"] .sidebar[data-gaya="solid"] .sb-panel .sidebar-section-toggle { color: rgba(255, 255, 255, .62) !important; }
[data-bs-theme="dark"] .sidebar[data-gaya="solid"] .sb-kerja .sb-tambah { color: #2957ab; }

/* Row action menu: fixed-width icons keep labels aligned, whatever
   the icon or markup (fa-fw/me-2 or not). */
.row-actions .dropdown-item,
.dropdown-menu .dropdown-item:has(> i.fas, > i.fab, > i.far) {
    display: flex; align-items: center; gap: .6rem;
}
.row-actions .dropdown-item > i,
.dropdown-menu .dropdown-item > i.fas,
.dropdown-menu .dropdown-item > i.fab,
.dropdown-menu .dropdown-item > i.far {
    min-width: 1.15em; width: 1.15em; text-align: center; margin: 0 !important; flex-shrink: 0;
}
.row-actions .dropdown-item.text-danger > i { color: var(--crit) !important; }

/* Post list title: no slug, two lines max, limited width. */
.post-judul {
    display: flex; align-items: flex-start; gap: .5rem;
    max-width: 440px; min-width: 220px;
    font-weight: 600; font-size: var(--fs-sm); line-height: 1.4; color: var(--accent);
}
.post-judul > i { min-width: 1.1em; text-align: center; margin-top: .2em; opacity: .7; }
.post-judul > span {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; white-space: normal;
}
.post-judul:hover > span { text-decoration: underline; text-underline-offset: 2px; }

/* Count cells (categories/tags). */
.count-cell {
    display: inline-block; min-width: 2.2em; padding: .18em .55em;
    border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent);
    font-weight: 700; font-size: var(--fs-xs); text-align: center; text-decoration: none;
    font-variant-numeric: tabular-nums;
}
a.count-cell:hover { background: var(--accent); color: var(--accent-ink); }
.count-cell.is-zero { background: var(--bg-sunken); color: var(--text-muted); font-weight: 600; }

/* Post/product editor: separate save button + translation panel. */
.pe-simpan .btn { border-radius: var(--r-sm); }
.pe-simpan > .btn:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.pe-simpan > .dropdown-toggle-split { border-top-left-radius: 0; border-bottom-left-radius: 0;
    border-left: 1px solid rgba(255, 255, 255, .28); padding-left: .55rem; padding-right: .55rem; }
.pe-simpan .dropdown-menu { min-width: 190px; }
.trj-proses { color: var(--accent); }
.trj-sakelar .btn { font-size: var(--fs-xs); padding: .25rem .7rem; }
.trj-judul {
    background: var(--bg-sunken); border: 1px solid var(--border-color-darker); border-radius: var(--r-sm);
    padding: .6rem .75rem; font-weight: 600; font-size: var(--fs-sm); color: var(--text-main); line-height: 1.45;
}
.trj-isi {
    width: 100%; height: 300px; border: 1px solid var(--border-color-darker);
    border-radius: var(--r-sm); background: #fff;
}

/* App users (licensing). */
.min-w-0 { min-width: 0; }
.pengguna-avatar {
    width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
    display: inline-grid; place-items: center;
    background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: var(--fs-sm);
}
.pengguna-avatar.is-lg { width: 48px; height: 48px; font-size: var(--fs-lg); }

/* ── Top-bar breadcrumb ───────────────────────────────────────────────── */
.topbar-crumbs { flex: 0 1 auto; min-width: 0; margin-right: .75rem; }
.crumbs {
    display: flex; align-items: center; flex-wrap: nowrap; gap: .1rem;
    list-style: none; margin: 0; padding: 0; min-width: 0;
    font-size: var(--fs-sm); color: var(--text-muted); white-space: nowrap;
}
.crumbs li { display: flex; align-items: center; min-width: 0; flex-shrink: 1; }
.crumbs li + li::before {
    content: "\f054"; font-family: "Font Awesome 6 Free"; font-weight: 900;
    font-size: .55rem; opacity: .55; margin: 0 .5rem; flex-shrink: 0;
}
.crumbs a { color: var(--text-subtle); text-decoration: none; overflow: hidden; text-overflow: ellipsis; }
.crumbs a:hover { color: var(--accent); }
.crumbs span { overflow: hidden; text-overflow: ellipsis; }
.crumbs .crumb-rumah { flex-shrink: 0; }
.crumbs .crumb-rumah a {
    width: 30px; height: 30px; border-radius: var(--r-sm); display: grid; place-items: center;
    background: var(--bg-hover); color: var(--text-subtle);
}
.crumbs .crumb-rumah a:hover { background: var(--accent-soft); color: var(--accent); }
.crumbs .crumb-seksi span { color: var(--text-muted); }
.crumbs .crumb-akhir { color: var(--text-main); font-weight: 600; max-width: 26rem; }
.crumbs li:not(.crumb-akhir):not(.crumb-rumah) { max-width: 13rem; }
/* Medium screens: home + last two levels; phones: home + last level. */
@media (max-width: 1199.98px) {
    .crumbs li.crumb-seksi { display: none; }
}
@media (max-width: 767.98px) {
    .crumbs li:not(.crumb-rumah):not(.crumb-akhir) { display: none; }
    .crumbs .crumb-akhir { max-width: 42vw; }
    .topbar-crumbs { margin-right: .4rem; }
}
@media (max-width: 400px) {
    .crumbs .crumb-akhir { max-width: 30vw; }
}

/* ── Dashboard ────────────────────────────────────────────────────────── */
.dash-label {
    font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--text-muted); margin-bottom: .6rem;
}
.kpi {
    --k: var(--accent); --k-soft: var(--accent-soft);
    display: flex; flex-direction: column; gap: .35rem; height: 100%;
    padding: 1rem 1.1rem; border: 1px solid var(--border-color-darker) !important;
    border-radius: var(--r-md); background: var(--bg-card); color: inherit; text-decoration: none;
    box-shadow: none; transition: border-color .15s, box-shadow .15s, transform .15s;
}
a.kpi:hover { border-color: rgba(var(--accent-rgb), .45) !important; box-shadow: 0 8px 22px -14px rgba(15, 23, 42, .35); transform: translateY(-1px); }
.kpi-good { --k: var(--good); --k-soft: var(--good-soft); }
.kpi-warn { --k: var(--warn); --k-soft: var(--warn-soft); }
.kpi-crit { --k: var(--crit); --k-soft: var(--crit-soft); }
.kpi-info { --k: var(--info); --k-soft: var(--info-soft); }
.kpi-atas { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; }
.kpi-label { font-size: var(--fs-xs); font-weight: 600; color: var(--text-subtle); line-height: 1.3; }
.kpi-ikon {
    width: 34px; height: 34px; border-radius: var(--r-sm); flex-shrink: 0;
    display: grid; place-items: center; background: var(--k-soft); color: var(--k); font-size: var(--fs-sm);
}
.kpi-nilai { font-size: 1.45rem; font-weight: 700; color: var(--text-main); line-height: 1.15; letter-spacing: -.01em; word-break: break-word; }
.kpi-sub { font-size: var(--fs-xs); color: var(--text-muted); }
@media (max-width: 575.98px) { .kpi { padding: .85rem; } .kpi-nilai { font-size: 1.15rem; } .kpi-ikon { width: 28px; height: 28px; } }

.dash-card { border: 1px solid var(--border-color-darker) !important; border-radius: var(--r-md); box-shadow: none; overflow: hidden; }
.dash-card-head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
    padding: 1rem 1.15rem .75rem;
}
.dash-card-head h6 { margin: 0; font-size: var(--fs-md); font-weight: 700; color: var(--text-main); }
.dash-card-head p { margin: .2rem 0 0; font-size: var(--fs-xs); color: var(--text-muted); }
.dash-link { font-size: var(--fs-xs); font-weight: 600; text-decoration: none; white-space: nowrap; }
.dash-link i { font-size: .6rem; margin-left: .2rem; }
.dash-chart { position: relative; height: 300px; padding: 0 1rem 1rem; }
.dash-chart.is-kecil { height: 240px; }
.dash-table td { padding: .7rem 1.15rem !important; border-color: var(--border-color) !important; }
.dash-table tr:last-child td { border-bottom: 0; }
.dash-trunc { max-width: 260px; }
.dash-todo { display: flex; flex-direction: column; padding: 0 .6rem .7rem; }
.dash-todo-item {
    display: flex; align-items: center; gap: .75rem; padding: .65rem .55rem;
    border-radius: var(--r-sm); text-decoration: none; color: var(--text-main);
}
.dash-todo-item:hover { background: var(--bg-hover); }
.dash-todo-ikon {
    width: 32px; height: 32px; border-radius: var(--r-sm); display: grid; place-items: center; flex-shrink: 0;
    background: var(--accent-soft); color: var(--accent); font-size: var(--fs-sm);
}
.dash-todo-ikon.tone-good { background: var(--good-soft); color: var(--good); }
.dash-todo-ikon.tone-warn { background: var(--warn-soft); color: var(--warn); }
.dash-todo-ikon.tone-crit { background: var(--crit-soft); color: var(--crit); }
.dash-todo-ikon.tone-info { background: var(--info-soft); color: var(--info); }
.dash-todo-label { flex: 1; min-width: 0; font-size: var(--fs-sm); font-weight: 500; }
.dash-todo-n { font-weight: 700; font-size: var(--fs-md); font-variant-numeric: tabular-nums; }
.dash-todo-panah { font-size: .6rem; color: var(--text-muted); }
.dash-beres { text-align: center; padding: 1.5rem 1.25rem 2rem; }
.dash-beres > span {
    width: 46px; height: 46px; border-radius: 50%; display: inline-grid; place-items: center; margin-bottom: .6rem;
    background: var(--good-soft); color: var(--good); font-size: 1.2rem;
}
.kpi-nilai { font-variant-numeric: tabular-nums; }
/* The last breadcrumb item truncates; middle levels collapse first. */
.crumbs li:not(.crumb-akhir) { flex-shrink: 4; }
@media (max-width: 1439.98px) { .crumbs li.crumb-seksi { display: none; } }
.crumbs li.crumb-rumah { flex-shrink: 0 !important; }
/* Small phones: hide the area picker (sidebar filter) so the breadcrumb
   stays readable; Ctrl+K and the sidebar drawer remain. */
@media (max-width: 575.98px) {
    #area-chooser { display: none; }
    .crumbs .crumb-rumah a { width: 28px; height: 28px; }
    .crumbs li + li::before { margin: 0 .35rem; }
}

/* ══════════════════════════════════════════════════════════════════════
   SOFT DARK MODE
   One color family, small steps between layers, thin lines, and an
   accent used like the light theme's (medium fill + white text).
   Bootstrap variables (--bs-body-bg, --bs-secondary-bg) are restated so
   panels do not fall back to neutral gray.
   This block sits at the end of the file so it wins over earlier values.
   ══════════════════════════════════════════════════════════════════════ */
[data-bs-theme="dark"] {
    --accent: #5482d6;
    --accent-rgb: 84, 130, 214;
    --accent-ink: #ffffff;
    --accent-soft: #1d2a40;
    --bs-primary: #5482d6;
    --bs-primary-rgb: 84, 130, 214;
    --bs-link-color: #86a9ec;
    --bs-link-color-rgb: 134, 169, 236;
    --bs-link-hover-color: #a6c0f2;

    --bg-body: #12161e;
    --bg-card: #181d27;
    --bg-sunken: #151a23;
    --bg-hover: #1f2531;
    --bg-sidebar: #161b24;
    --bg-table-row: #181d27;

    --border-color: #222936;
    --border-color-darker: #2a3240;
    --text-main: #dce2eb;
    --text-subtle: #a7b1c0;
    --text-muted: #7f8a9b;
    --text-nav: #a7b1c0;
    --topbar-bg: rgba(18, 22, 30, .86);

    --good: #57c495;  --good-soft: #17281f;
    --warn: #dcaa5e;  --warn-soft: #2b2316;
    --crit: #e48585;  --crit-soft: #2e1b1d;
    --info: #74b6cd;  --info-soft: #152830;

    --bs-success: #57c495;  --bs-success-rgb: 87, 196, 149;
    --bs-danger:  #e48585;  --bs-danger-rgb: 228, 133, 133;
    --bs-warning: #dcaa5e;  --bs-warning-rgb: 220, 170, 94;
    --bs-info:    #74b6cd;  --bs-info-rgb: 116, 182, 205;
    --bs-secondary: #8d97a7; --bs-secondary-rgb: 141, 151, 167;

    /* Bootstrap variables read directly by templates */
    --bs-body-bg: var(--bg-card);
    --bs-body-bg-rgb: 24, 29, 39;
    --bs-body-color: var(--text-main);
    --bs-emphasis-color: #eef2f7;
    --bs-heading-color: #e6ebf2;
    --bs-secondary-color: var(--text-subtle);
    --bs-tertiary-color: var(--text-muted);
    --bs-secondary-bg: #1c222d;
    --bs-tertiary-bg: var(--bg-sunken);
    --bs-border-color: var(--border-color-darker);
    --bs-border-color-translucent: rgba(255, 255, 255, .07);
    --bs-primary-bg-subtle: var(--accent-soft);
    --bs-primary-border-subtle: #2c4166;
    --bs-primary-text-emphasis: #a6c0f2;

    --sh-xs: 0 1px 2px rgba(0, 0, 0, .22);
    --sh-sm: 0 1px 3px rgba(0, 0, 0, .22), 0 4px 12px -6px rgba(0, 0, 0, .3);
    --sh-md: 0 10px 24px -14px rgba(0, 0, 0, .5);
    --sh-lg: 0 20px 44px -22px rgba(0, 0, 0, .6);

    --sidebar-bg-top: #161b24;
    --sidebar-bg-bottom: #141920;
}
[data-bs-theme="dark"] body { color: var(--text-main); }
[data-bs-theme="dark"] .card { box-shadow: var(--sh-sm) !important; }
[data-bs-theme="dark"] .text-dark { color: var(--text-main) !important; }
[data-bs-theme="dark"] .nav-link:hover { color: var(--text-main); }
[data-bs-theme="dark"] .btn-sidebar-action.is-active { color: var(--bs-link-color); }
[data-bs-theme="dark"] .table tbody tr:hover { background: rgba(255, 255, 255, .018); }

/* Sidebar: one step darker than content, not a separate navy. */
[data-bs-theme="dark"] .sb-rail { background: #0f1319; border-right-color: var(--border-color); }
[data-bs-theme="dark"] .sb-lonceng .sb-titik { border-color: #0f1319; }
[data-bs-theme="dark"] .sb-ikon { color: #8f9aab; }
[data-bs-theme="dark"] .sb-ikon:hover { background: rgba(255, 255, 255, .06); color: var(--text-main); }
[data-bs-theme="dark"] .sb-ikon.active { background: rgba(var(--accent-rgb), .2); color: #a6c0f2; }
[data-bs-theme="dark"] .sb-kapsul { background: rgba(255, 255, 255, .05); }
[data-bs-theme="dark"] .sb-avatar { background: rgba(255, 255, 255, .09); }
[data-bs-theme="dark"] .sb-rail .sb-logo { background: #e3e8f0; color: #1d3561; }
[data-bs-theme="dark"] .sidebar:not([data-gaya="solid"]) .sb-panel .nav-link:not(.active) { color: #c3cbd7 !important; }
[data-bs-theme="dark"] .sidebar:not([data-gaya="solid"]) .sb-panel .nav-link:not(.active) i { color: #7f8a9b !important; }
[data-bs-theme="dark"] .sb-panel .sidebar-heading,
[data-bs-theme="dark"] .sb-panel .sidebar-section-toggle { color: #687386 !important; }
[data-bs-theme="dark"] .sb-kerja .sb-nama { color: #a6c0f2 !important; }
[data-bs-theme="dark"] .sidebar .sb-panel .nav-link.active { box-shadow: 0 6px 16px -10px rgba(0, 0, 0, .7); }
[data-bs-theme="dark"] .sidebar .sb-panel .nav-link:not(.active):hover { color: var(--text-main) !important; background: var(--bg-hover) !important; }

/* The image delete button uses a light pink; in dark mode it becomes a danger surface. */
[data-bs-theme="dark"] .gi-remove,
[data-bs-theme="dark"] .pf-remove { background: var(--crit-soft); color: var(--crit); }

/* Site logo on the rail tile: slightly larger than menu icons. */
.sb-rail .sb-logo img { width: 26px; height: 26px; object-fit: contain; }
@media (max-width: 991.98px) { .sb-rail .sb-logo img { width: 23px; height: 23px; } }

/* ── Counter badge (notifications) ─────────────────────────────────────
   A small dot in the button corner, matching the cart badge on the
   public site (base_public). */
.badge-hitung {
    position: absolute; top: -4px; right: -5px; z-index: 5;
    min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    background: #d23a3a; color: #fff;
    font: 700 10.5px/1 var(--app-font, system-ui, sans-serif); font-variant-numeric: tabular-nums;
    box-shadow: 0 0 0 2px var(--bg-card, #fff); pointer-events: none;
}
.badge-hitung.d-none { display: none !important; }

/* Hovered ACTIVE sidebar link: the hover rule paints the icon
   --accent on an --accent background, hiding it. */
.sidebar .sb-panel .nav-link.active:hover,
.sidebar .sb-panel .nav-link.active:hover i { color: var(--accent-ink) !important; }
.sidebar[data-gaya="solid"] .sb-panel .nav-link.active:hover,
.sidebar[data-gaya="solid"] .sb-panel .nav-link.active:hover i { color: var(--accent) !important; }

/* Queue counts on sidebar links (Helpdesk: pending confirmations, unread
   messages). A small pill at the right, following the active link color. */
.sidebar .sb-panel .nav-link { display: flex; align-items: center; }
.sb-hitung {
    min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    background: #d23a3a; color: #fff; font: 700 11px/1 var(--app-font, system-ui, sans-serif);
    font-variant-numeric: tabular-nums;
}
.sidebar .sb-panel .nav-link.active .sb-hitung { background: #fff; color: var(--accent); }
/* Long labels truncate cleanly instead of pushing the count
   out of the link pill. */
.sidebar .sb-panel .nav-link .sb-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-hitung { flex: none; margin-left: .4rem; }

/* Green accent (counterpart of .text-hijau etc. on the public site). */
:root { --hijau: #0c8540; --hijau-soft: #e7f5ec; --hijau-garis: #b9e2c8; }
[data-bs-theme="dark"] { --hijau: #4cc27f; --hijau-soft: rgba(76, 194, 127, .14); --hijau-garis: rgba(76, 194, 127, .35); }
.text-hijau { color: var(--hijau) !important; }
.badge-hijau { background: var(--hijau-soft) !important; color: var(--hijau) !important; border: 1px solid var(--hijau-garis); }


/* ======================================================================
 * Styles moved out of backend templates (scoped per layout/page).
 * ==================================================================== */

/* ==== Layout: templates/layouts/base_backend.html ==== */
@keyframes bell-ring {
            0%   { transform: rotate(0); }
            10%  { transform: rotate(18deg); }
            25%  { transform: rotate(-15deg); }
            40%  { transform: rotate(12deg); }
            55%  { transform: rotate(-8deg); }
            70%  { transform: rotate(5deg); }
            85%  { transform: rotate(-2deg); }
            100% { transform: rotate(0); }
        }
        @keyframes bell-idle-wobble {
            0%, 90% { transform: rotate(0); }
            93%      { transform: rotate(10deg); }
            96%      { transform: rotate(-10deg); }
            98%      { transform: rotate(5deg); }
            100%     { transform: rotate(0); }
        }
        /* The bell uses the same color as the other top-bar icons.
           The count badge marks new items, not the icon color. */
        :where([data-layout="backend"]) #notif-bell-icon.bell-has-unread {
            animation: bell-idle-wobble 4s ease-in-out infinite;
            color: inherit;
        }
        :where([data-layout="backend"]) #notif-bell-icon.bell-ring-intense {
            animation: bell-ring 0.7s ease-in-out !important;
            color: inherit;
        }
        :where([data-layout="backend"]) .status-dot {
            width: 8px; height: 8px; border-radius: 50%;
            display: inline-block; flex-shrink: 0;
            margin-left: 8px;
        }
        :where([data-layout="backend"]) .status-dot.bg-success {
            background-color: #0f7a52;
            box-shadow: 0 0 8px rgba(15, 122, 82, 0.6);
            animation: pulse-green 2s infinite;
        }
        :where([data-layout="backend"]) .status-dot.bg-danger {
            background-color: #ad2a2a;
            box-shadow: 0 0 8px rgba(173, 42, 42, 0.4);
        }
        @keyframes pulse-green {
            0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(15, 122, 82, 0.7); }
            70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(15, 122, 82, 0); }
            100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(15, 122, 82, 0); }
        }
        :where([data-layout="backend"]) .pwa-toast {
            position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%) translateY(100px);
            background: var(--bs-body-bg); border: 1px solid var(--bs-border-color);
            padding: 12px 16px; border-radius: 1rem; z-index: 9999;
            min-width: 320px; transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
            opacity: 0; pointer-events: none;
        }
        :where([data-layout="backend"]) .pwa-toast.show { transform: translateX(-50%) translateY(0); opacity: 1; pointer-events: all; }
        :where([data-layout="backend"]) .pwa-toast-icon {
            width: 36px; height: 36px; border-radius: 50%; background: var(--bs-primary-bg-subtle);
            display: flex; align-items: center; justify-content: center;
        }

/* ==== Page: apps/agent/templates/agent/config_form.html ==== */
:where([data-page~="agent-config-form"]) .prompt-preview { background: #f8f9fa; border-radius: 0.75rem; font-size: var(--fs-sm);
                      font-family: monospace; padding: 1rem; white-space: pre-wrap;
                      max-height: 220px; overflow-y: auto; color: #374151; }

/* ==== Page: apps/agent/templates/agent/index.html ==== */
:where([data-page~="agent-index"]) .agent-card { border: none; border-radius: 1.25rem; transition: all 0.25s ease; }
    :where([data-page~="agent-index"]) .agent-card:hover { transform: translateY(-3px); box-shadow: 0 12px 24px -6px rgba(0,0,0,0.12) !important; }
    :where([data-page~="agent-index"]) .agent-icon { width: 48px; height: 48px; border-radius: 0.875rem; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0; }
    :where([data-page~="agent-index"]) .stat-mini { border-radius: 1rem; padding: 1.25rem; }

/* ==== Page: apps/agent/templates/agent/session_detail.html ==== */
:where([data-page~="agent-session-detail"]) .msg-bubble { max-width: 78%; border-radius: 1rem; border: 1px solid transparent; }
    :where([data-page~="agent-session-detail"]) .msg-bubble.user { background: var(--bs-primary); color: #fff; border-bottom-right-radius: 0.25rem; }
    :where([data-page~="agent-session-detail"]) .msg-bubble.assistant { 
        background: var(--bs-tertiary-bg); 
        color: var(--bs-body-color); 
        border-color: var(--bs-border-color);
        border-bottom-left-radius: 0.25rem; 
    }
    :where([data-page~="agent-session-detail"]) .msg-bubble.assistant pre { 
        background: var(--bs-secondary-bg); 
        border: 1px solid var(--bs-border-color);
        border-radius: 0.5rem; 
        padding: 0.75rem; 
        font-size: var(--fs-sm); 
        color: var(--bs-body-color);
    }
    :where([data-page~="agent-session-detail"]) .msg-bubble img {
        max-width: 100%;
        max-height: 400px;
        object-fit: contain;
        border-radius: 0.75rem;
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
        display: block;
        cursor: pointer;
    }
    :where([data-page~="agent-session-detail"]) .msg-bubble.assistant code { font-size: 0.82em; color: var(--bs-primary-text-emphasis); }
    :where([data-page~="agent-session-detail"]) .chat-area { min-height: 300px; }
    :where([data-page~="agent-session-detail"]) .meta-pill { 
        font-size: var(--fs-sm); 
        background: var(--bs-tertiary-bg); 
        color: var(--bs-secondary-color);
        border: 1px solid var(--bs-border-color);
        border-radius: 2rem; 
        padding: 0.2rem 0.75rem; 
    }
    @media (max-width: 576px) {
        :where([data-page~="agent-session-detail"]) .chat-area { padding: 1rem !important; }
        :where([data-page~="agent-session-detail"]) .msg-bubble { max-width: 90%; padding: 0.75rem !important; font-size: var(--fs-md); }
        :where([data-page~="agent-session-detail"]) .card-body.py-3 { padding: 0.75rem !important; }
    }

/* ==== Page: apps/blog/templates/blog/menu_form.html ==== */
:where([data-page~="blog-menu-form"]) .sortable-ghost { opacity: 0.4; background-color: #f8f9fa; border: 2px dashed #ccc !important; }
    :where([data-page~="blog-menu-form"]) .menu-item-handle { cursor: move; }

    /* Content search: search box + suggestion list with type badges. */
    :where([data-page~="blog-menu-form"]) .menu-cari { position: relative; }
    :where([data-page~="blog-menu-form"]) .menu-cari .form-control { padding-left: 2.25rem; padding-right: 2.25rem; }
    :where([data-page~="blog-menu-form"]) .menu-cari .mc-ikon, :where([data-page~="blog-menu-form"]) .menu-cari .mc-putar {
        position: absolute; top: 50%; transform: translateY(-50%);
        color: var(--text-muted); font-size: var(--fs-sm); pointer-events: none;
    }
    :where([data-page~="blog-menu-form"]) .menu-cari .mc-ikon { left: .85rem; }
    :where([data-page~="blog-menu-form"]) .menu-cari .mc-putar { right: .85rem; }
    :where([data-page~="blog-menu-form"]) .menu-cari .mc-hapus {
        position: absolute; right: .45rem; top: 50%; transform: translateY(-50%);
        border: 0; background: transparent; color: var(--text-muted); padding: .2rem .4rem;
    }
    :where([data-page~="blog-menu-form"]) .mc-daftar {
        position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 1060;
        background: var(--bg-card); border: 1px solid var(--border-color-darker);
        border-radius: var(--r-sm); box-shadow: 0 12px 28px -12px rgba(15, 23, 42, .35);
        max-height: 320px; overflow-y: auto; padding: .3rem; margin: 0; list-style: none;
    }
    :where([data-page~="blog-menu-form"]) .mc-butir {
        display: flex; align-items: center; gap: .6rem; padding: .5rem .6rem;
        border-radius: var(--r-xs); cursor: pointer;
    }
    :where([data-page~="blog-menu-form"]) .mc-butir.aktif, :where([data-page~="blog-menu-form"]) .mc-butir:hover { background: var(--accent-soft); }
    :where([data-page~="blog-menu-form"]) .mc-butir .mc-teks { min-width: 0; flex: 1; }
    :where([data-page~="blog-menu-form"]) .mc-butir .mc-judul { font-size: var(--fs-sm); font-weight: 600; color: var(--text-main);
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    :where([data-page~="blog-menu-form"]) .mc-butir .mc-url { font-size: var(--fs-2xs); color: var(--text-muted); font-family: var(--mono-font);
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    :where([data-page~="blog-menu-form"]) .mc-butir .badge { flex-shrink: 0; min-width: 4.6rem; justify-content: center; }
    :where([data-page~="blog-menu-form"]) .mc-kosong { padding: .9rem .6rem; font-size: var(--fs-xs); color: var(--text-muted); text-align: center; }
    :where([data-page~="blog-menu-form"]) .mc-dipilih { font-size: var(--fs-xs); color: var(--good); margin-top: .4rem; }
    
    :where([data-page~="blog-menu-form"]) .dd-list { min-height: 10px; }
    :where([data-page~="blog-menu-form"]) .dd-item { display: block; position: relative; list-style: none; }
    :where([data-page~="blog-menu-form"]) .dd-handle:hover { border-color: var(--primary) !important; background-color: rgba(var(--primary-rgb), 0.02) !important; }
    
    /* Nesting indicator */
    :where([data-page~="blog-menu-form"]) .dd-item > .dd-list { margin-left: 30px; border-left: 2px solid var(--border-color); padding-left: 10px; }

/* ==== Page: apps/blog/templates/blog/post_form.html ==== */
/* Premium Editor Layout */
    :where([data-page~="blog-post-form"]) .editor-container { background: transparent; }
    :where([data-page~="blog-post-form"]) .main-editor-col {
        background: var(--bs-body-bg); border-radius: 1rem; padding: 1.5rem;
        border: 1px solid var(--bs-border-color);
        box-shadow: 0 20px 25px -5px rgba(0,0,0,0.05), 0 10px 10px -5px rgba(0,0,0,0.04) !important;
        transition: all 0.3s ease;
    }
    
    :where([data-page~="blog-post-form"]) #id_title {
        font-size: 1.5rem; font-weight: 800; border: none;
        border-bottom: 2px solid var(--bs-border-color); padding: 0 0 1rem 0;
        margin-bottom: 0.75rem; color: var(--bs-body-color);
        box-shadow: none !important; border-radius: 0;
        background: transparent;
        transition: border-color 0.3s ease;
    }
    :where([data-page~="blog-post-form"]) #id_title:focus { border-bottom-color: var(--bs-primary); }
    :where([data-page~="blog-post-form"]) #id_title::placeholder { color: var(--border-color-darker); }
    :where([data-page~="blog-post-form"]) #id_title:hover { border-bottom-color: var(--border-color-darker); }

    :where([data-page~="blog-post-form"]) .slug-wrapper {
        font-size: var(--fs-md); color: var(--bs-secondary-color); margin-bottom: 2.5rem;
        display: flex; align-items: center;
        padding: 0.5rem 1rem; background: var(--bs-secondary-bg); border-radius: 0.75rem;
        width: fit-content; max-width: 100%;
    }
    :where([data-page~="blog-post-form"]) .slug-wrapper span { margin-right: 5px; flex-shrink: 0; }
    :where([data-page~="blog-post-form"]) .slug-wrapper #id_slug { flex: 1 1 auto; min-width: 0; }
    :where([data-page~="blog-post-form"]) #id_slug { border: none; background: transparent; padding: 0; color: var(--bs-primary); font-weight: 600; width: auto; min-width: 150px; display: inline-block; font-size: var(--fs-md); border-bottom: 1px dashed var(--bs-primary); }
    :where([data-page~="blog-post-form"]) #id_slug:focus { outline: none; border-bottom-style: solid; }

    :where([data-page~="blog-post-form"]) .sidebar-panel {
        background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: 1rem;
        margin-bottom: 1.25rem;
        box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px 0 rgba(0,0,0,0.06) !important;
        transition: all 0.3s ease;
    }
    :where([data-page~="blog-post-form"]) .sidebar-panel:hover { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important; }
    
    :where([data-page~="blog-post-form"]) .panel-header {
        padding: 1rem 1.25rem; border-bottom: 1px solid var(--bs-border-color);
        border-radius: 1rem 1rem 0 0;
        font-weight: 700; font-size: var(--fs-xs); text-transform: uppercase;
        letter-spacing: 0.1em; color: var(--bs-secondary-color); background: var(--bs-secondary-bg);
    }
    :where([data-page~="blog-post-form"]) .panel-body { padding: 1.25rem; }
    
    :where([data-page~="blog-post-form"]) .sticky-sidebar { position: sticky; top: 97px; }

    /* ── Post File Cards ── */
    :where([data-page~="blog-post-form"]) .pf-card {
        display: flex; align-items: center; gap: 0.75rem;
        background: var(--bs-body-bg); border: 1.5px solid var(--bs-border-color); border-radius: 0.875rem;
        padding: 0.75rem; position: relative; cursor: pointer;
        transition: border-color 0.2s, box-shadow 0.2s;
    }
    :where([data-page~="blog-post-form"]) .pf-card:hover { border-color: var(--bs-primary); box-shadow: 0 4px 12px rgba(0,0,0,0.06); }
    :where([data-page~="blog-post-form"]) .pf-card:hover .pf-thumb::after {
        content: "";
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        position: absolute;
        inset: 0;
        background: rgba(41, 87, 171,0.75);
        border-radius: 0.625rem;
        display: flex; align-items: center; justify-content: center;
        color: #fff;
        font-size: 1.1rem;
    }
    :where([data-page~="blog-post-form"]) .pf-thumb { position: relative; }
    :where([data-page~="blog-post-form"]) .pf-thumb {
        width: 52px; height: 52px;
        border-radius: 0.625rem;
        overflow: hidden;
        flex-shrink: 0;
        background: var(--bs-secondary-bg);
        display: flex; align-items: center; justify-content: center;
    }
    :where([data-page~="blog-post-form"]) .pf-thumb img { width: 100%; height: 100%; object-fit: cover; }
    :where([data-page~="blog-post-form"]) .pf-icon { color: var(--bs-primary); opacity: 0.7; }
    :where([data-page~="blog-post-form"]) .pf-info { flex: 1; min-width: 0; }
    :where([data-page~="blog-post-form"]) .pf-name { font-size: var(--fs-sm); font-weight: 600; color: var(--bs-body-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    :where([data-page~="blog-post-form"]) .pf-size { font-size: var(--fs-xs); color: var(--bs-secondary-color); margin-top: 0.1rem; }
    :where([data-page~="blog-post-form"]) .pf-remove {
        width: 26px; height: 26px;
        border-radius: 50%;
        border: none;
        background: #fee2e2;
        color: #ad2a2a;
        display: flex; align-items: center; justify-content: center;
        font-size: var(--fs-xs);
        flex-shrink: 0;
        cursor: pointer;
        transition: background 0.2s;
        padding: 0;
    }
    :where([data-page~="blog-post-form"]) .pf-remove:hover { background: #ad2a2a; color: #fff; }

    @media (max-width: 768px) {
        :where([data-page~="blog-post-form"]) .pf-remove { width: 32px; height: 32px; font-size: var(--fs-md); }
    }

    :where([data-page~="blog-post-form"]) .django-ckeditor-widget { width: 100% !important; }
    :where([data-page~="blog-post-form"]) .cke_chrome { border: 1px solid var(--bs-border-color) !important; border-radius: 0.75rem !important; overflow: hidden; box-shadow: none !important; }
    :where([data-page~="blog-post-form"]) .cke_top { background: var(--bs-secondary-bg) !important; border-bottom: 1px solid var(--bs-border-color) !important; }

    :where([data-page~="blog-post-form"]) [data-bs-theme="dark"] .cke_bottom { background: var(--bs-body-bg) !important; border-top: 1px solid var(--bs-border-color) !important; }
    :where([data-page~="blog-post-form"]) [data-bs-theme="dark"] .cke_status { color: var(--bs-secondary-color) !important; }
    :where([data-page~="blog-post-form"]) [data-bs-theme="dark"] .cke_toolbar_separator { background-color: var(--bs-border-color) !important; }
    :where([data-page~="blog-post-form"]) [data-bs-theme="dark"] .cke_button_icon { filter: invert(1) hue-rotate(180deg); }
    
    /* ── Tag Chips Styling ── */
    :where([data-page~="blog-post-form"]) .tags-input-wrapper {
        display: flex; flex-wrap: wrap; gap: 0.5rem;
        padding: 0.5rem; border: 1px solid var(--bs-border-color);
        border-radius: 0.75rem; background: var(--bs-body-bg);
        min-height: 45px; align-items: center;
    }
    :where([data-page~="blog-post-form"]) .tag-chip {
        background: var(--bs-primary-bg-subtle); color: var(--bs-primary);
        padding: 0.25rem 0.75rem; border-radius: 2rem; font-size: var(--fs-sm);
        font-weight: 600; display: flex; align-items: center; gap: 0.5rem;
        border: 1px solid var(--bs-primary-border-subtle);
        transition: all 0.2s;
    }
    :where([data-page~="blog-post-form"]) .tag-chip:hover { background: var(--bs-primary); color: #fff; }
    :where([data-page~="blog-post-form"]) .tag-chip .remove-tag { cursor: pointer; opacity: 0.7; }
    :where([data-page~="blog-post-form"]) .tag-chip .remove-tag:hover { opacity: 1; }
    :where([data-page~="blog-post-form"]) #tag-input-field {
        border: none; outline: none; background: transparent;
        flex: 1; min-width: 100px; font-size: var(--fs-md);
        color: var(--bs-body-color);
    }
    :where([data-page~="blog-post-form"]) .tags-input-container { position: relative; }
    :where([data-page~="blog-post-form"]) .tag-suggestions {
        position: absolute; top: 100%; left: 0; right: 0;
        background: var(--bs-body-bg); border: 1px solid var(--bs-border-color);
        border-radius: 0.75rem; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
        z-index: 1000; margin-top: 0.5rem; max-height: 200px; overflow-y: auto;
        display: none;
    }
    :where([data-page~="blog-post-form"]) .suggestion-item {
        padding: 0.6rem 1rem; cursor: pointer; font-size: var(--fs-md);
        border-bottom: 1px solid var(--bs-border-color);
    }
    :where([data-page~="blog-post-form"]) .suggestion-item:last-child { border-bottom: none; }
    :where([data-page~="blog-post-form"]) .suggestion-item:hover, :where([data-page~="blog-post-form"]) .suggestion-item.active {
        background: var(--bs-primary-bg-subtle); color: var(--bs-primary);
    }

    @media (max-width: 576px) {
        :where([data-page~="blog-post-form"]) .main-editor-col {
            padding: 0.5rem;
        }
        :where([data-page~="blog-post-form"]) .file-section-header {
            text-align: center;
        }
        :where([data-page~="blog-post-form"]) .file-section-header .d-flex {
            justify-content: center;
            width: 100%;
        }
        :where([data-page~="blog-post-form"]) .file-section-header .btn {
            flex: 1;
            justify-content: center;
            padding: 0.5rem 0.75rem !important;
            font-size: var(--fs-sm) !important;
        }
    }


    :where([data-page~="blog-post-form"]) .pe-actionbar {position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:14px;
        background:var(--bs-body-bg);border:1px solid var(--bs-border-color);border-radius:12px;
        padding:10px 14px;margin-bottom:18px;box-shadow:0 4px 14px rgba(0,0,0,.05)}
    :where([data-page~="blog-post-form"]) .pe-ab-left {display:flex;align-items:center;gap:12px;min-width:0}
    :where([data-page~="blog-post-form"]) .pe-back {width:34px;height:34px;border-radius:9px;border:1px solid var(--bs-border-color);
        display:grid;place-items:center;color:var(--bs-secondary-color);text-decoration:none;flex:none}
    :where([data-page~="blog-post-form"]) .pe-back:hover {color:var(--bs-primary);border-color:var(--bs-primary)}
    :where([data-page~="blog-post-form"]) .pe-ab-title {font-weight:700;font-size: var(--fs-lg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
        display:flex;align-items:center;gap:8px;min-width:0}
    :where([data-page~="blog-post-form"]) .pe-ab-title #pe-title-text {overflow:hidden;text-overflow:ellipsis}
    :where([data-page~="blog-post-form"]) .pe-ab-right {margin-left:auto;display:flex;align-items:center;gap:8px;flex:none}
    :where([data-page~="blog-post-form"]) .pe-saved {font-size: var(--fs-sm);color:var(--bs-secondary-color);white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
    :where([data-page~="blog-post-form"]) .pe-saved.dirty {color:var(--bs-warning)}
    @media(max-width:640px){:where([data-page~="blog-post-form"]) .pe-ab-title #pe-title-text {max-width:100px}:where([data-page~="blog-post-form"]) .pe-saved {display:none}}
    

                body:where([data-page~="blog-post-form"]).pe-focus #pe-side-col {display:none}
                body:where([data-page~="blog-post-form"]).pe-focus #pe-main-col {flex:0 0 100%;max-width:100%}
                

                        :where([data-page~="blog-post-form"]) .pf-dropzone {border:2px dashed var(--bs-border-color);border-radius:12px;padding:14px;text-align:center;cursor:pointer;transition:border-color .15s,background .15s;background:var(--bs-secondary-bg)}
                        :where([data-page~="blog-post-form"]) .pf-dropzone:hover, :where([data-page~="blog-post-form"]) .pf-dropzone.drag {border-color:var(--bs-primary);background:rgba(var(--bs-primary-rgb),.06)}
                        :where([data-page~="blog-post-form"]) .pf-dz-preview {width:100%;height:150px;border-radius:9px;background-size:cover;background-position:center;background-repeat:no-repeat;display:grid;place-items:center;color:var(--bs-secondary-color);font-size:1.8rem;background-color:var(--bs-body-bg);margin-bottom:10px}
                        :where([data-page~="blog-post-form"]) .pf-dz-text {font-size: var(--fs-sm);color:var(--bs-secondary-color)} :where([data-page~="blog-post-form"]) .pf-dz-text b {color:var(--bs-primary)}
                        :where([data-page~="blog-post-form"]) .pf-dz-hint {font-size: var(--fs-xs);color:var(--bs-tertiary-color,#9aa)}

/* ==== Page: apps/core/templates/core/favorites.html ==== */
:where([data-page~="core-favorites"]) .fav-card {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        border: 1px solid rgba(0,0,0,0.05);
        border-radius: 1.25rem;
        overflow: hidden;
    }
    :where([data-page~="core-favorites"]) .fav-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 30px rgba(0,0,0,0.1) !important;
        border-color: var(--bs-primary);
    }
    :where([data-page~="core-favorites"]) .fav-icon-wrapper {
        width: 54px;
        height: 54px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 1rem;
        font-size: 1.5rem;
        margin-bottom: 0.75rem;
    }
    
    @media (max-width: 576px) {
        :where([data-page~="core-favorites"]) .fav-card {
            padding: 1rem !important;
            border-radius: 1rem;
        }
        :where([data-page~="core-favorites"]) .fav-icon-wrapper {
            width: 42px;
            height: 42px;
            font-size: 1.1rem;
            margin-bottom: 0.5rem;
            border-radius: 0.75rem;
        }
        :where([data-page~="core-favorites"]) .fav-card .fw-bold {
            font-size: var(--fs-xs) !important;
            line-height: 1.2;
        }
    }
    
    :where([data-page~="core-favorites"]) .category-label {
        font-size: var(--fs-sm);
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: var(--text-nav);
        margin-bottom: 1.5rem;
        display: flex;
        align-items: center;
    }
    :where([data-page~="core-favorites"]) .category-label::after {
        content: "";
        flex-grow: 1;
        height: 1px;
        background: rgba(0,0,0,0.05);
        margin-left: 1rem;
    }

    /* Custom Checkbox as Card */
    :where([data-page~="core-favorites"]) .menu-item-check {
        display: none;
    }
    :where([data-page~="core-favorites"]) .menu-item-label {
        display: block;
        padding: 1rem;
        border: 2px solid rgba(0,0,0,0.05);
        border-radius: 1rem;
        cursor: pointer;
        transition: all 0.2s;
        text-align: center;
        height: 100%;
    }
    :where([data-page~="core-favorites"]) .menu-item-check:checked + .menu-item-label {
        border-color: var(--bs-primary);
        background: rgba(var(--bs-primary-rgb), 0.05);
        box-shadow: 0 4px 12px rgba(var(--bs-primary-rgb), 0.1);
    }
    :where([data-page~="core-favorites"]) .menu-item-label i {
        font-size: 1rem;
        display: block;
        margin-bottom: 0.5rem;
        color: var(--text-nav);
    }
    :where([data-page~="core-favorites"]) .menu-item-check:checked + .menu-item-label i {
        color: var(--bs-primary);
    }
    :where([data-page~="core-favorites"]) .menu-item-label .item-name {
        font-size: var(--fs-sm);
        color: var(--text-subtle);
    }

/* ==== Page: apps/core/templates/core/group_form.html ==== */
:where([data-page~="core-group-form"]) .btn-xs { font-size: var(--fs-xs); line-height: 1.4; }
:where([data-page~="core-group-form"]) .perm-checkbox { cursor: pointer; }
:where([data-page~="core-group-form"]) .table td, :where([data-page~="core-group-form"]) .table th { vertical-align: middle; }

/* ==== Page: apps/core/templates/core/notification_list.html ==== */
:where([data-page~="core-notification-list"]) .notif-unread-row { background-color: rgba(41, 87, 171, 0.04) !important; position: relative; }
    :where([data-page~="core-notification-list"]) .notif-unread-row::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 3px;
        background-color: var(--bs-primary);
    }
    :where([data-page~="core-notification-list"]) .list-group-item:hover { background-color: #f8f9fc !important; }
    :where([data-page~="core-notification-list"]) .text-xs { font-size: var(--fs-xs); }
    :where([data-page~="core-notification-list"]) .letter-spacing-1 { letter-spacing: 1px; }

/* ==== Page: apps/core/templates/core/password_change.html ==== */
:where([data-page~="core-password-change"]) .card input[type="password"] {
        border-radius: 0.75rem;
        padding: 0.6rem 1rem;
        border: 1px solid var(--border-color-darker);
    }
    :where([data-page~="core-password-change"]) .card input[type="password"]:focus {
        border-color: #2957ab;
        box-shadow: 0 0 0 4px rgba(41, 87, 171, 0.1);
    }

/* ==== Page: apps/core/templates/core/site_config.html ==== */
/* Side Navigation Styling */
    :where([data-page~="core-site-config"]) .config-side-nav {
        background: #fff;
        border-radius: 1rem;
        padding: 0.75rem;
        position: sticky;
        top: 1.75rem;
    }
    :where([data-page~="core-site-config"]) [data-bs-theme="dark"] .config-side-nav { background: var(--bg-sunken); border: 1px solid var(--border-color-darker); }

    :where([data-page~="core-site-config"]) .config-tab-nav .nav-link {
        color: var(--text-nav);
        border: none;
        border-radius: 0.75rem;
        padding: 0.7rem 1rem;
        font-weight: 500;
        font-size: var(--fs-md);
        display: flex;
        align-items: center;
        gap: 0.75rem;
        margin-bottom: 0.25rem;
        transition: all 0.2s;
        text-align: left;
        width: 100%;
    }
    :where([data-page~="core-site-config"]) .config-tab-nav .nav-link:hover { background: var(--border-color); color: #2957ab; }
    :where([data-page~="core-site-config"]) [data-bs-theme="dark"] .config-tab-nav .nav-link:hover { background: var(--bg-hover); }
    
    :where([data-page~="core-site-config"]) .config-tab-nav .nav-link.active {
        background: #2957ab;
        color: #fff !important;
        box-shadow: 0 4px 12px rgba(41, 87, 171, 0.25);
    }
    :where([data-page~="core-site-config"]) .config-tab-nav .nav-link .tab-icon { font-size: 1rem; width: 20px; text-align: center; }
    :where([data-page~="core-site-config"]) .config-tab-nav .nav-link.active .tab-icon { color: #fff; }

    :where([data-page~="core-site-config"]) .config-tab-nav .nav-link .badge-error {
        display: inline-flex; align-items: center; justify-content: center;
        width: 18px; height: 18px; background: #ad2a2a; color: #fff;
        border-radius: 50%; font-size: var(--fs-xs); font-weight: 700;
        margin-left: auto;
    }

    :where([data-page~="core-site-config"]) .section-card {
        margin-bottom: 1.5rem;
        overflow: hidden;
        border-radius: 1rem;
        border: 1px solid var(--border-color);
        background-color: white;
    }
    :where([data-page~="core-site-config"]) [data-bs-theme="dark"] .section-card { background: var(--bs-secondary-bg);}
    :where([data-page~="core-site-config"]) .font-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .5rem; }
    :where([data-page~="core-site-config"]) .font-chip { display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; text-align: left; padding: .6rem .75rem;
                 border: 1px solid var(--border-color-darker); border-radius: .6rem; background: #fff; cursor: pointer; transition: border-color .15s, box-shadow .15s; color: #1e293b; }
    :where([data-page~="core-site-config"]) .font-chip:hover { border-color: var(--text-muted); }
    :where([data-page~="core-site-config"]) .font-chip.active { border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .15); }
    :where([data-page~="core-site-config"]) .font-chip-sample { font-size: 1.4rem; font-weight: 700; line-height: 1.1; }
    :where([data-page~="core-site-config"]) .font-chip-name { font-size: var(--fs-sm); font-weight: 600; }
    :where([data-page~="core-site-config"]) .font-chip-text { font-size: var(--fs-xs); color: var(--text-nav); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
    :where([data-page~="core-site-config"]) [data-bs-theme="dark"] .font-chip { background: var(--bg-sunken); border-color: var(--border-color-darker); color: var(--border-color-darker); }
    :where([data-page~="core-site-config"]) [data-bs-theme="dark"] .font-chip-text { color: var(--text-muted); }
    :where([data-page~="core-site-config"]) .section-card-header {
        background: white;
        padding: 0.6rem 1rem;
        font-size: var(--fs-sm);
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--text-nav);
        border-bottom: 1px solid var(--border-color);
        display: flex;
        align-items: center;
        gap: 0.35rem;
    }
    :where([data-page~="core-site-config"]) [data-bs-theme="dark"] .section-card-header { background: var(--bs-secondary-bg); border-color: var(--border-color-darker); color: var(--text-muted); }
    :where([data-page~="core-site-config"]) .section-card-body { padding: 1.25rem; }

    :where([data-page~="core-site-config"]) .field-row { margin-bottom: 1rem; }
    :where([data-page~="core-site-config"]) .field-row:last-child { margin-bottom: 0; }
    :where([data-page~="core-site-config"]) .field-label { font-size: var(--fs-sm); font-weight: 600; color: #374151; margin-bottom: 0.3rem; }
    :where([data-page~="core-site-config"]) .field-help { font-size: var(--fs-sm); color: #9ca3af; margin-top: 0.25rem; }
    :where([data-page~="core-site-config"]) .field-error { font-size: var(--fs-sm); color: #ad2a2a; margin-top: 0.25rem; }

    :where([data-page~="core-site-config"]) .img-preview-box {
        width: 72px; height: 72px;
        border: 2px dashed var(--border-color-darker);
        border-radius: 0.5rem;
        display: flex; align-items: center; justify-content: center;
        overflow: hidden; background: var(--bg-body);
        flex-shrink: 0;
    }
    :where([data-page~="core-site-config"]) .img-preview-box img { max-width: 100%; max-height: 100%; object-fit: contain; }
    :where([data-page~="core-site-config"]) .img-preview-box .placeholder-icon { color: var(--border-color-darker); font-size: 1.5rem; }

    :where([data-page~="core-site-config"]) .color-swatch {
        width: 20px; height: 20px; border-radius: 4px;
        border: 1px solid rgba(0,0,0,0.1);
        display: inline-block; vertical-align: middle;
        margin-left: 6px;
    }
    :where([data-page~="core-site-config"]) .toggle-card {
        background: var(--bg-body);
        border: 1px solid var(--border-color-darker);
        border-radius: 0.625rem;
        padding: 0.875rem 1rem;
        display: flex; align-items: center; justify-content: space-between;
        margin-bottom: 1rem;
    }
    :where([data-page~="core-site-config"]) .toggle-card .toggle-label { font-weight: 600; font-size: var(--fs-md); color: #374151; }
    :where([data-page~="core-site-config"]) .toggle-card .form-check-input { width: 2.2em; height: 1.2em; cursor: pointer; }

    :where([data-page~="core-site-config"]) .social-field { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
    :where([data-page~="core-site-config"]) .social-field:last-child { margin-bottom: 0; }
    :where([data-page~="core-site-config"]) .social-icon-box {
        width: 38px; height: 38px; border-radius: 0.5rem;
        display: flex; align-items: center; justify-content: center;
        font-size: 1rem; flex-shrink: 0;
    }

    :where([data-page~="core-site-config"]) .stats-item { background: var(--bg-body); border: 1px solid var(--border-color-darker); border-radius: 0.625rem; padding: 0.875rem; }

    :where([data-page~="core-site-config"]) .save-bar {
        position: sticky; bottom: 1.5rem; z-index: 100;
        background: rgba(255,255,255,0.9);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(41, 87, 171, 0.1);
        border-radius: 1.25rem;
        padding: 0.75rem 1.5rem;
        display: flex; align-items: center; justify-content: space-between;
        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    }
    :where([data-page~="core-site-config"]) [data-bs-theme="dark"] .save-bar { background: rgba(30,41,59,0.9); border-color: rgba(255,255,255,0.05); }
    :where([data-page~="core-site-config"]) [data-bs-theme="dark"] .section-card { border-color: var(--border-color-darker); }
    :where([data-page~="core-site-config"]) [data-bs-theme="dark"] .section-card-header { background: var(--bg-sunken); border-color: var(--border-color-darker); color: var(--text-muted); }
    :where([data-page~="core-site-config"]) [data-bs-theme="dark"] .toggle-card { background: var(--bg-sunken); border-color: var(--border-color-darker); }
    :where([data-page~="core-site-config"]) [data-bs-theme="dark"] .toggle-card .toggle-label { color: var(--border-color-darker); }
    :where([data-page~="core-site-config"]) [data-bs-theme="dark"] .stats-item { background: var(--bg-sunken); border-color: var(--border-color-darker); }
    :where([data-page~="core-site-config"]) [data-bs-theme="dark"] .img-preview-box { background: var(--bg-sunken); border-color: var(--border-color-darker); }
    :where([data-page~="core-site-config"]) [data-bs-theme="dark"] .field-label { color: var(--border-color-darker); }

/* ==== Page: apps/core/templates/core/staff_personal_panel.html ==== */
/* FAB Styles */
        :where([data-page~="core-staff-personal-panel"]) .pwa-control-fab {
            position: fixed; bottom: 30px; right: 30px; z-index: 1050;
            display: flex; flex-direction: column; align-items: flex-end;
        }
        :where([data-page~="core-staff-personal-panel"]) .fab-main {
            width: 56px; height: 56px; border-radius: 50%; border: none;
            background: var(--bs-primary); color: white;
            display: flex; align-items: center; justify-content: center;
            font-size: 1.25rem; transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(var(--bs-primary-rgb), 0.4);
        }
        :where([data-page~="core-staff-personal-panel"]) .fab-main:hover { transform: scale(1.1); }
        :where([data-page~="core-staff-personal-panel"]) .pwa-control-fab.active .fab-main { background: var(--bs-secondary); transform: rotate(90deg); }
        
        :where([data-page~="core-staff-personal-panel"]) .fab-options {
            display: flex; flex-direction: column; align-items: flex-end;
            gap: 12px; margin-bottom: 15px;
            opacity: 0; visibility: hidden; transform: translateY(20px);
            transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        }
        :where([data-page~="core-staff-personal-panel"]) .pwa-control-fab.active .fab-options { opacity: 1; visibility: visible; transform: translateY(0); }

        :where([data-page~="core-staff-personal-panel"]) .fab-opt {
            display: flex; align-items: center; gap: 10px;
            background: transparent; border: none; padding: 0;
        }
        :where([data-page~="core-staff-personal-panel"]) .fab-label {
            background: var(--bs-body-bg); color: var(--bs-body-color);
            padding: 4px 12px; border-radius: 20px; font-size: var(--fs-sm);
            font-weight: 600; box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            border: 1px solid var(--bs-border-color);
        }
        :where([data-page~="core-staff-personal-panel"]) .fab-icon-wrapper {
            width: 42px; height: 42px; border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            background: var(--bs-body-bg); box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            border: 1px solid var(--bs-border-color); transition: all 0.2s;
        }
        :where([data-page~="core-staff-personal-panel"]) .fab-opt:hover .fab-icon-wrapper { transform: scale(1.1); }

        @media (max-width: 576px) {
            :where([data-page~="core-staff-personal-panel"]) .pwa-control-fab { bottom: 20px; right: 20px; }
            :where([data-page~="core-staff-personal-panel"]) .fab-main { width: 48px; height: 48px; }
        }

/* ==== Page: apps/core/templates/core/test_push.html ==== */
:where([data-page~="core-test-push"]) .smaller { font-size: var(--fs-sm); }
    :where([data-page~="core-test-push"]) .bg-primary.bg-opacity-10 { background-color: rgba(var(--bs-primary-rgb), 0.1) !important; }

/* ==== Page: apps/finance/templates/finance/invoice_form.html ==== */
:where([data-page~="finance-invoice-form"]) .select2-container--default .select2-selection--single {
        border: 1px solid #dee2e6;
        height: 38px;
        border-radius: 0.5rem;
    }
    :where([data-page~="finance-invoice-form"]) .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: 36px;
        padding-left: 12px;
    }
    :where([data-page~="finance-invoice-form"]) .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 36px;
    }

/* ==== Page: apps/finance/templates/finance/report_dashboard.html ==== */
:where([data-page~="finance-report-dashboard"]) .transition-all { transition: all 0.3s ease; }
    :where([data-page~="finance-report-dashboard"]) .hover-translate-y:hover { transform: translateY(-5px); }
    :where([data-page~="finance-report-dashboard"]) .hover-bg-primary:hover { background-color: var(--bs-primary) !important; }
    :where([data-page~="finance-report-dashboard"]) .hover-text-white:hover { color: white !important; }
    
    @media (max-width: 768px) {
        :where([data-page~="finance-report-dashboard"]) .card-body { padding: 1rem !important; }
        :where([data-page~="finance-report-dashboard"]) .fs-5 { font-size: 1.1rem !important; }
    }

/* ==== Page: apps/finance/templates/finance/transaction_form.html ==== */
/* Premium Editor Layout for Transactions */
    :where([data-page~="finance-transaction-form"]) .editor-container { background: transparent; }
    :where([data-page~="finance-transaction-form"]) .main-editor-col { 
        background: #fff; 
        border-radius: 1rem; 
        padding: 2rem; 
        border: 1px solid rgba(0,0,0,0.05); 
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
        transition: all 0.3s ease;
    }
    
    :where([data-page~="finance-transaction-form"]) #id_title {
        font-size: 1.75rem;
        font-weight: 800;
        border: none;
        border-bottom: 2px solid var(--border-color);
        padding: 0 0 1rem 0;
        margin-bottom: 2rem;
        color: #0f172a;
        box-shadow: none !important;
        border-radius: 0;
        transition: border-color 0.3s ease;
    }
    :where([data-page~="finance-transaction-form"]) #id_title:focus { border-bottom-color: var(--bs-primary); }
    :where([data-page~="finance-transaction-form"]) #id_title::placeholder { color: var(--border-color-darker); }
    :where([data-page~="finance-transaction-form"]) #id_title:hover { border-bottom-color: var(--border-color-darker); }

    :where([data-page~="finance-transaction-form"]) .sidebar-panel {
        background: #fff;
        border: 1px solid var(--border-color);
        border-radius: 1rem;
        margin-bottom: 1.25rem;
        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
        transition: all 0.3s ease;
        overflow: hidden;
    }
    :where([data-page~="finance-transaction-form"]) .sidebar-panel:hover { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important; }
    
    :where([data-page~="finance-transaction-form"]) .panel-header {
        padding: 1rem 1.25rem;
        border-bottom: 1px solid var(--border-color);
        font-weight: 700;
        font-size: var(--fs-xs);
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: var(--text-nav);
        background: var(--bg-body);
    }
    :where([data-page~="finance-transaction-form"]) .panel-body { padding: 1.25rem; }
    
    :where([data-page~="finance-transaction-form"]) .sticky-sidebar { position: sticky; top: 97px; }

    :where([data-page~="finance-transaction-form"]) .django-ckeditor-widget { width: 100% !important; }
    :where([data-page~="finance-transaction-form"]) .cke_chrome { border: 1px solid var(--border-color) !important; border-radius: 0.75rem !important; overflow: hidden; box-shadow: none !important; }
    
    :where([data-page~="finance-transaction-form"]) [data-bs-theme="dark"] .main-editor-col, :where([data-page~="finance-transaction-form"]) [data-bs-theme="dark"] .sidebar-panel { background: var(--bg-card); border-color: var(--border-color-darker); }
    :where([data-page~="finance-transaction-form"]) [data-bs-theme="dark"] .panel-header { background: var(--bs-secondary-bg); border-color: var(--border-color-darker); }
    :where([data-page~="finance-transaction-form"]) [data-bs-theme="dark"] #id_title { color: var(--text-main); border-bottom-color: var(--border-color-darker); background: transparent; }


    :where([data-page~="finance-transaction-form"]) .pe-actionbar {position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:14px;background:var(--bs-body-bg);border:1px solid var(--bs-border-color);border-radius:12px;padding:10px 14px;margin-bottom:18px;box-shadow:0 4px 14px rgba(0,0,0,.05)}
    :where([data-page~="finance-transaction-form"]) .pe-ab-left {display:flex;align-items:center;gap:10px;min-width:0}
    :where([data-page~="finance-transaction-form"]) .pe-back {width:34px;height:34px;border-radius:9px;border:1px solid var(--bs-border-color);display:grid;place-items:center;color:var(--bs-secondary-color);text-decoration:none;flex:none}
    :where([data-page~="finance-transaction-form"]) .pe-back:hover {color:var(--bs-primary);border-color:var(--bs-primary)}
    :where([data-page~="finance-transaction-form"]) .pe-ab-title {font-weight:700;font-size: var(--fs-lg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
    :where([data-page~="finance-transaction-form"]) .pe-ab-right {margin-left:auto;display:flex;align-items:center;gap:8px;flex:none}
    :where([data-page~="finance-transaction-form"]) .pe-saved {font-size: var(--fs-sm);color:var(--bs-secondary-color);white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
    :where([data-page~="finance-transaction-form"]) .pe-saved.dirty {color:var(--bs-warning)}
    body:where([data-page~="finance-transaction-form"]).pe-focus #pe-side-col {display:none}
    body:where([data-page~="finance-transaction-form"]).pe-focus #pe-main-col {flex:0 0 100%;max-width:100%}
    @media(max-width:640px){:where([data-page~="finance-transaction-form"]) .pe-saved {display:none}}

/* ==== Page: apps/helpdesk/templates/helpdesk/inbox_form.html ==== */
:where([data-page~="helpdesk-inbox-form"]) .select2-container { display: block !important; width: 100% !important; }
    :where([data-page~="helpdesk-inbox-form"]) .select2-selection { width: 100% !important; }
    :where([data-page~="helpdesk-inbox-form"]) .select2-container--default .select2-selection--single {
        border: 1px solid var(--border-color-darker) !important;
    }

    /* ── Conversation header ─────────────────────────────────────────── */
    :where([data-page~="helpdesk-inbox-form"]) .ci-kepala { display: flex; gap: 1rem; align-items: flex-start; flex-wrap: wrap; }
    :where([data-page~="helpdesk-inbox-form"]) .ci-avatar {
        width: 46px; height: 46px; flex: 0 0 46px; border-radius: 50%;
        display: grid; place-items: center; font-weight: 700; font-size: 1.05rem;
        background: var(--bs-primary-bg-subtle, #e7eeff);
        color: var(--bs-primary, #2957ab); text-transform: uppercase;
    }
    :where([data-page~="helpdesk-inbox-form"]) .ci-nama { font-weight: 700; font-size: 1.05rem; line-height: 1.2; }

    /* Copyable rows: the button sits next to its value, not at the
       card edge, so it is clear what gets copied. */
    :where([data-page~="helpdesk-inbox-form"]) .ci-salin {
        display: inline-flex; align-items: center; gap: .45rem;
        border: 1px solid var(--bs-border-color); border-radius: 7px;
        padding: .2rem .25rem .2rem .55rem; background: var(--bs-body-bg);
        max-width: 100%;
    }
    :where([data-page~="helpdesk-inbox-form"]) .ci-salin .ci-nilai {
        font-family: var(--font-mono, ui-monospace, monospace); font-size: var(--fs-md);
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    :where([data-page~="helpdesk-inbox-form"]) .ci-salin .btn { --bs-btn-padding-y: .1rem; --bs-btn-padding-x: .4rem; }

    /* ── Conversation thread ─────────────────────────────────────────── */
    :where([data-page~="helpdesk-inbox-form"]) .ci-utas { display: flex; flex-direction: column; gap: 1.1rem; }
    :where([data-page~="helpdesk-inbox-form"]) .ci-gelembung { max-width: 85%; }
    :where([data-page~="helpdesk-inbox-form"]) .ci-gelembung .ci-isi {
        white-space: pre-wrap; line-height: 1.7; padding: 1rem 1.15rem;
        border-radius: 14px; border: 1px solid var(--bs-border-color);
        background: var(--bs-body-bg);
    }
    :where([data-page~="helpdesk-inbox-form"]) .ci-gelembung .ci-meta {
        font-size: var(--fs-sm); color: var(--bs-secondary-color); margin-top: .35rem;
    }
    :where([data-page~="helpdesk-inbox-form"]) .ci-masuk .ci-isi { border-top-left-radius: 4px; }
    :where([data-page~="helpdesk-inbox-form"]) .ci-keluar { align-self: flex-end; }
    :where([data-page~="helpdesk-inbox-form"]) .ci-keluar .ci-isi {
        border-top-right-radius: 4px;
        background: var(--bs-primary-bg-subtle, #eef3ff);
        border-color: var(--bs-primary-border-subtle, #cfdcfb);
    }
    :where([data-page~="helpdesk-inbox-form"]) .ci-keluar .ci-meta { text-align: right; }
    :where([data-page~="helpdesk-inbox-form"]) .ci-gagal .ci-isi {
        background: var(--bs-danger-bg-subtle, #fdeaea);
        border-color: var(--bs-danger-border-subtle, #f2c2c2);
    }

    /* ── Compose box ─────────────────────────────────────────────────── */
    :where([data-page~="helpdesk-inbox-form"]) .ci-tulis textarea {
        min-height: 150px; resize: vertical; line-height: 1.65;
        border-radius: 12px;
    }
    :where([data-page~="helpdesk-inbox-form"]) .ci-riwayat a { text-decoration: none; }
    :where([data-page~="helpdesk-inbox-form"]) .ci-riwayat li + li { margin-top: .5rem; }
    @media (max-width: 575.98px) { :where([data-page~="helpdesk-inbox-form"]) .ci-gelembung { max-width: 100%; } }

/* ==== Page: apps/portofolio/templates/portofolio/portofolio_form.html ==== */
/* Form tabs: one form, four groups. All fields stay inside the same
   <form>; tabs only hide them, so saving submits every field.
   Splitting into separate forms would drop fields on save. */
    :where([data-page~="portofolio-portofolio-form"]) .pf-tab .nav-link {
        border: 0; border-bottom: 2px solid transparent; border-radius: 0;
        color: var(--text-nav); font-size: var(--fs-sm); font-weight: 600;
        padding: .65rem .95rem;
    }
    :where([data-page~="portofolio-portofolio-form"]) .pf-tab .nav-link:hover { color: var(--accent); }
    :where([data-page~="portofolio-portofolio-form"]) .pf-tab .nav-link.active {
        color: var(--accent); background: transparent;
        border-bottom-color: var(--accent);
    }
    :where([data-page~="portofolio-portofolio-form"]) .pf-tab .nav-link .pf-n {
        display: inline-grid; place-items: center; width: 18px; height: 18px;
        margin-right: .4rem; border-radius: 50%;
        background: var(--bg-sunken); color: var(--text-muted);
        font-size: .62rem; font-weight: 700;
    }
    :where([data-page~="portofolio-portofolio-form"]) .pf-tab .nav-link.active .pf-n { background: var(--accent); color: #fff; }
    :where([data-page~="portofolio-portofolio-form"]) .pf-panel { padding-top: 1.25rem; }
    :where([data-page~="portofolio-portofolio-form"]) .pf-bantu { font-size: var(--fs-xs); color: var(--text-muted); margin-bottom: 1rem; }

/* ==== Page: apps/project/templates/project/project_form.html ==== */
:where([data-page~="project-project-form"]) .editor-container { background: transparent; }
    :where([data-page~="project-project-form"]) .main-editor-col {
        background: var(--bs-body-bg); border-radius: 1rem; padding: 1.5rem;
        border: 1px solid var(--bs-border-color);
        box-shadow: 0 20px 25px -5px rgba(0,0,0,0.05), 0 10px 10px -5px rgba(0,0,0,0.04) !important;
    }

    :where([data-page~="project-project-form"]) #id_name {
        font-size: 1.5rem; font-weight: 800; border: none;
        border-bottom: 2px solid var(--bs-border-color); padding: 0 0 1rem 0;
        margin-bottom: 0.75rem; color: var(--bs-body-color);
        box-shadow: none !important; border-radius: 0;
        background: transparent;
        transition: border-color 0.3s ease;
    }
    :where([data-page~="project-project-form"]) #id_name:focus { border-bottom-color: var(--bs-primary); }
    :where([data-page~="project-project-form"]) #id_name::placeholder { color: var(--border-color-darker); }

    :where([data-page~="project-project-form"]) .sidebar-panel {
        background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: 1rem;
        margin-bottom: 1.25rem;
        box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px 0 rgba(0,0,0,0.06) !important;
        transition: all 0.3s ease; overflow: hidden;
    }
    :where([data-page~="project-project-form"]) .sidebar-panel:hover { box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05) !important; }
    :where([data-page~="project-project-form"]) .panel-header {
        padding: 1rem 1.25rem; border-bottom: 1px solid var(--bs-border-color);
        font-weight: 700; font-size: var(--fs-xs); text-transform: uppercase;
        letter-spacing: 0.1em; color: var(--bs-secondary-color); background: var(--bs-secondary-bg);
    }
    :where([data-page~="project-project-form"]) .panel-body { padding: 1.25rem; }
    :where([data-page~="project-project-form"]) .sticky-sidebar { position: sticky; top: 80px; }

    /* ── Project File Cards ── */
    :where([data-page~="project-project-form"]) .pf-card {
        display: flex; align-items: center; gap: 0.75rem;
        background: var(--bs-body-bg); border: 1.5px solid var(--bs-border-color); border-radius: 0.875rem;
        padding: 0.75rem; position: relative; cursor: pointer;
        transition: border-color 0.2s, box-shadow 0.2s;
    }
    :where([data-page~="project-project-form"]) .pf-card:hover { border-color: var(--bs-primary); box-shadow: 0 4px 12px rgba(0,0,0,0.06); }
    :where([data-page~="project-project-form"]) .pf-card:hover .pf-thumb::after {
        content: ""; font-family: "Font Awesome 6 Free"; font-weight: 900;
        position: absolute; inset: 0; background: rgba(41, 87, 171,0.75);
        border-radius: 0.625rem; display: flex; align-items: center;
        justify-content: center; color: #fff; font-size: 1.1rem;
    }
    :where([data-page~="project-project-form"]) .pf-thumb {
        width: 52px; height: 52px; border-radius: 0.625rem; overflow: hidden;
        flex-shrink: 0; background: var(--bs-secondary-bg); display: flex;
        align-items: center; justify-content: center; position: relative;
    }
    :where([data-page~="project-project-form"]) .pf-thumb img { width: 100%; height: 100%; object-fit: cover; }
    :where([data-page~="project-project-form"]) .pf-icon { color: var(--bs-primary); opacity: 0.7; }
    :where([data-page~="project-project-form"]) .pf-info { flex: 1; min-width: 0; }
    :where([data-page~="project-project-form"]) .pf-name { font-size: var(--fs-sm); font-weight: 600; color: var(--bs-body-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    :where([data-page~="project-project-form"]) .pf-size { font-size: var(--fs-xs); color: var(--bs-secondary-color); margin-top: 0.1rem; }
    :where([data-page~="project-project-form"]) .pf-remove {
        width: 26px; height: 26px; border-radius: 50%; border: none;
        background: #fee2e2; color: #ad2a2a; display: flex;
        align-items: center; justify-content: center; font-size: var(--fs-xs);
        flex-shrink: 0; cursor: pointer; transition: background 0.2s; padding: 0;
    }
    :where([data-page~="project-project-form"]) .pf-remove:hover { background: #ad2a2a; color: #fff; }

    :where([data-page~="project-project-form"]) .django-ckeditor-widget { width: 100% !important; }
    :where([data-page~="project-project-form"]) .cke_chrome { border: 1px solid var(--bs-border-color) !important; border-radius: 0.75rem !important; overflow: hidden; box-shadow: none !important; }
    :where([data-page~="project-project-form"]) .cke_top { background: var(--bs-secondary-bg) !important; border-bottom: 1px solid var(--bs-border-color) !important; }

    :where([data-page~="project-project-form"]) [data-bs-theme="dark"] .cke_bottom { background: var(--bs-body-bg) !important; border-top: 1px solid var(--bs-border-color) !important; }
    :where([data-page~="project-project-form"]) [data-bs-theme="dark"] .cke_status { color: var(--bs-secondary-color) !important; }
    :where([data-page~="project-project-form"]) [data-bs-theme="dark"] .cke_toolbar_separator { background-color: var(--bs-border-color) !important; }
    :where([data-page~="project-project-form"]) [data-bs-theme="dark"] .cke_button_icon { filter: invert(1) hue-rotate(180deg); }


    :where([data-page~="project-project-form"]) .pe-actionbar {position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:14px;background:var(--bs-body-bg);border:1px solid var(--bs-border-color);border-radius:12px;padding:10px 14px;margin-bottom:18px;box-shadow:0 4px 14px rgba(0,0,0,.05)}
    :where([data-page~="project-project-form"]) .pe-ab-left {display:flex;align-items:center;gap:10px;min-width:0}
    :where([data-page~="project-project-form"]) .pe-back {width:34px;height:34px;border-radius:9px;border:1px solid var(--bs-border-color);display:grid;place-items:center;color:var(--bs-secondary-color);text-decoration:none;flex:none}
    :where([data-page~="project-project-form"]) .pe-back:hover {color:var(--bs-primary);border-color:var(--bs-primary)}
    :where([data-page~="project-project-form"]) .pe-ab-title {font-weight:700;font-size: var(--fs-lg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
    :where([data-page~="project-project-form"]) .pe-ab-right {margin-left:auto;display:flex;align-items:center;gap:8px;flex:none}
    :where([data-page~="project-project-form"]) .pe-saved {font-size: var(--fs-sm);color:var(--bs-secondary-color);white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
    :where([data-page~="project-project-form"]) .pe-saved.dirty {color:var(--bs-warning)}
    body:where([data-page~="project-project-form"]).pe-focus #pe-side-col {display:none}
    body:where([data-page~="project-project-form"]).pe-focus #pe-main-col {flex:0 0 100%;max-width:100%}
    @media(max-width:640px){:where([data-page~="project-project-form"]) .pe-saved {display:none}}

/* ==== Page: apps/staff/templates/staff/staff_payment_settle.html ==== */
:where([data-page~="staff-staff-payment-settle"]) .letter-spacing-1 { letter-spacing: 1px; }
    :where([data-page~="staff-staff-payment-settle"]) .border-dashed { border-style: dashed !important; }
    :where([data-page~="staff-staff-payment-settle"]) .transition-all { transition: all 0.3s ease; }
    :where([data-page~="staff-staff-payment-settle"]) .cursor-pointer { cursor: pointer; }
    :where([data-page~="staff-staff-payment-settle"]) .hover-shadow-sm:hover { shadow: 0 .125rem .25rem rgba(0,0,0,.075) !important; transform: translateY(-2px); }
    
    /* Hide default file input but keep it functional */
    :where([data-page~="staff-staff-payment-settle"]) #id_attachment {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        opacity: 0;
        cursor: pointer;
        z-index: 2;
    }
    :where([data-page~="staff-staff-payment-settle"]) #drop-area { position: relative; }

/* ==== Page: apps/staff/templates/staff/staff_payment_wizard.html ==== */
:where([data-page~="staff-staff-payment-wizard"]) .wizard-step { display: none; }
    :where([data-page~="staff-staff-payment-wizard"]) .wizard-step.active { display: block; animation: fadeIn 0.4s ease; }
    @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
    
    :where([data-page~="staff-staff-payment-wizard"]) .step-indicator { display: flex; justify-content: space-between; margin-bottom: 3rem; position: relative; }
    :where([data-page~="staff-staff-payment-wizard"]) .step-indicator::before { content: ""; position: absolute; top: 18px; left: 0; right: 0; height: 2px; background: var(--border-color-darker); z-index: 1; }
    :where([data-page~="staff-staff-payment-wizard"]) .step-item { position: relative; z-index: 2; text-align: center; width: 25%; }
    :where([data-page~="staff-staff-payment-wizard"]) .step-circle { width: 38px; height: 38px; border-radius: 50%; background: #fff; border: 2px solid var(--border-color-darker); display: flex; align-items: center; justify-content: center; margin: 0 auto 0.5rem; font-weight: 700; transition: all 0.3s; color: var(--text-muted); }
    :where([data-page~="staff-staff-payment-wizard"]) .step-item.active .step-circle { background: var(--bs-primary); border-color: var(--bs-primary); color: #fff; box-shadow: 0 0 0 4px rgba(var(--bs-primary-rgb), 0.15); }
    :where([data-page~="staff-staff-payment-wizard"]) .step-item.completed .step-circle { background: #0f7a52; border-color: #0f7a52; color: #fff; }
    :where([data-page~="staff-staff-payment-wizard"]) .step-label { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); transition: all 0.3s; }
    :where([data-page~="staff-staff-payment-wizard"]) .step-item.active .step-label { color: var(--bs-primary); }
    
    :where([data-page~="staff-staff-payment-wizard"]) .quick-btn { border: 1px solid var(--border-color-darker); padding: 0.4rem 0.8rem; border-radius: 0.5rem; font-size: var(--fs-sm); font-weight: 600; transition: all 0.2s; }
    :where([data-page~="staff-staff-payment-wizard"]) .quick-btn:hover { background: var(--bg-body); border-color: var(--bs-primary); color: var(--bs-primary); }
    
    :where([data-page~="staff-staff-payment-wizard"]) .staff-card { border: 1px solid var(--border-color); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; position: relative; overflow: hidden; height: 100%; }
    :where([data-page~="staff-staff-payment-wizard"]) .staff-card:hover { transform: translateY(-5px); border-color: var(--bs-primary); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); }
    :where([data-page~="staff-staff-payment-wizard"]) .staff-card.selected { border-color: var(--bs-primary); background: rgba(var(--bs-primary-rgb), 0.04); box-shadow: 0 0 0 2px var(--bs-primary); }
    :where([data-page~="staff-staff-payment-wizard"]) .staff-card .select-badge { position: absolute; top: 10px; right: 10px; width: 24px; height: 24px; background: var(--bs-primary); color: #fff; border-radius: 50%; display: none; align-items: center; justify-content: center; font-size: var(--fs-sm); z-index: 2; }
    :where([data-page~="staff-staff-payment-wizard"]) .staff-card.selected .select-badge { display: flex; }
    :where([data-page~="staff-staff-payment-wizard"]) .staff-img { width: 50px; height: 50px; object-fit: cover; border-radius: 12px; }
    :where([data-page~="staff-staff-payment-wizard"]) .staff-grid-container { max-height: 500px; overflow-y: auto; padding: 10px 5px; }
    
    :where([data-page~="staff-staff-payment-wizard"]) #staff-search { border-radius: 12px; padding-left: 40px; background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\" stroke=\"%2394a3b8\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-search\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><path d=\"M21 21l-4.35-4.35\"/></svg>"); background-repeat: no-repeat; background-position: 12px center; }
    
    :where([data-page~="staff-staff-payment-wizard"]) .payment-info-box { background: transparent; border-radius: 1rem; padding: 1.5rem; border: 1px dashed var(--border-color-darker); }

/* ==== Page: apps/store/templates/store/config_form.html ==== */
:where([data-page~="store-config-form"]) .cfg-tabs .nav-link { color: var(--bs-secondary-color); font-weight: 600; font-size: var(--fs-lg); border: none; border-bottom: 2px solid transparent; border-radius: 0; padding: .75rem 1rem; }
  :where([data-page~="store-config-form"]) .cfg-tabs .nav-link.active { color: var(--bs-primary); background: transparent; border-bottom-color: var(--bs-primary); }
  :where([data-page~="store-config-form"]) #pm-table td { vertical-align: middle; }
  :where([data-page~="store-config-form"]) #pm-table .pm-logo { height: 26px; width: auto; max-width: 90px; object-fit: contain; }

/* ==== Page: apps/store/templates/store/license_report.html ==== */
:where([data-page~="store-license-report"]) .lr-kartu { border-radius: 16px; background: var(--bs-body-bg); box-shadow: 0 1px 2px rgba(0,0,0,.05); padding: 1.1rem 1.25rem; height: 100%; }
:where([data-page~="store-license-report"]) .lr-angka { font-size: 1.7rem; font-weight: 700; line-height: 1.1; }
:where([data-page~="store-license-report"]) .lr-label { font-size: .8rem; color: var(--bs-secondary-color); }
:where([data-page~="store-license-report"]) .lr-versi { display: inline-block; font-size: .75rem; padding: .1rem .45rem; border-radius: 6px; margin: 0 .25rem .25rem 0; background: var(--bs-secondary-bg); }
:where([data-page~="store-license-report"]) .lr-versi.baru { background: var(--bs-success-bg-subtle); color: var(--bs-success-text-emphasis); }

/* ==== Page: apps/store/templates/store/order_manual_form.html ==== */
:where([data-page~="store-order-manual-form"]) #item-tabel td { vertical-align: top; }
:where([data-page~="store-order-manual-form"]) #item-tabel [name$="-quantity"], :where([data-page~="store-order-manual-form"]) #item-tabel [name$="-price"] { text-align: right; }
:where([data-page~="store-order-manual-form"]) #item-tabel .item-sub { padding-top: .6rem; }

/* ==== Page: apps/store/templates/store/product_form.html ==== */
:where([data-page~="store-product-form"]) .editor-container { background: transparent; }
    :where([data-page~="store-product-form"]) .main-editor-col {
        background: var(--bs-body-bg);
        border-radius: 1rem;
        padding: 1.5rem;
        border: 1px solid var(--bs-border-color);
        box-shadow: 0 20px 25px -5px rgba(0,0,0,0.05), 0 10px 10px -5px rgba(0,0,0,0.04) !important;
    }

    :where([data-page~="store-product-form"]) #id_name {
        font-size: 1.5rem;
        font-weight: 800;
        border: none;
        border-bottom: 2px solid var(--bs-border-color);
        padding: 0 0 1rem 0;
        margin-bottom: 0.75rem;
        color: var(--bs-body-color);
        box-shadow: none !important;
        border-radius: 0;
        background: transparent;
        transition: border-color 0.3s ease;
    }
    :where([data-page~="store-product-form"]) #id_name:focus { border-bottom-color: var(--bs-primary); }
    :where([data-page~="store-product-form"]) #id_name::placeholder { color: var(--border-color-darker); }

    /* Slug wrapper — same as blog post form */
    :where([data-page~="store-product-form"]) .slug-wrapper {
        font-size: var(--fs-md); color: var(--bs-secondary-color); margin-bottom: 2.5rem;
        display: flex; align-items: center;
        padding: 0.5rem 1rem; background: var(--bs-secondary-bg); border-radius: 0.75rem;
        width: fit-content; max-width: 100%;
    }
    :where([data-page~="store-product-form"]) .slug-wrapper span { margin-right: 5px; flex-shrink: 0; }
    :where([data-page~="store-product-form"]) .slug-wrapper #id_slug { flex: 1 1 auto; min-width: 0; }
    :where([data-page~="store-product-form"]) #id_slug {
        border: none; background: transparent; padding: 0;
        color: var(--bs-primary); font-weight: 600; width: auto;
        min-width: 150px; display: inline-block; font-size: var(--fs-md);
        border-bottom: 1px dashed var(--bs-primary);
    }
    :where([data-page~="store-product-form"]) #id_slug:focus { outline: none; border-bottom-style: solid; }

    :where([data-page~="store-product-form"]) .sidebar-panel {
        background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: 1rem;
        margin-bottom: 1.25rem;
        box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px 0 rgba(0,0,0,0.06) !important;
        transition: all 0.3s ease; overflow: hidden;
    }
    :where([data-page~="store-product-form"]) .sidebar-panel:hover { box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05) !important; }
    :where([data-page~="store-product-form"]) .panel-header {
        padding: 1rem 1.25rem; border-bottom: 1px solid var(--bs-border-color);
        font-weight: 700; font-size: var(--fs-xs); text-transform: uppercase;
        letter-spacing: 0.1em; color: var(--bs-secondary-color); background: var(--bs-secondary-bg);
    }
    :where([data-page~="store-product-form"]) .panel-body { padding: 1.25rem; }
    :where([data-page~="store-product-form"]) .sticky-sidebar { position: sticky; top: 97px; }

    /* ── Gallery Cards ── */
    :where([data-page~="store-product-form"]) .gi-card {
        display: flex; align-items: center; gap: 0.75rem;
        background: var(--bs-body-bg); border: 1.5px solid var(--bs-border-color); border-radius: 0.875rem;
        padding: 0.75rem; position: relative; cursor: pointer;
        transition: border-color 0.2s, box-shadow 0.2s;
    }
    :where([data-page~="store-product-form"]) .gi-card:hover { border-color: var(--bs-primary); box-shadow: 0 4px 12px rgba(0,0,0,0.06); }
    :where([data-page~="store-product-form"]) .gi-card:hover .gi-thumb::after {
        content: "";
        font-family: "Font Awesome 6 Free"; font-weight: 900;
        position: absolute; inset: 0;
        background: rgba(41, 87, 171,0.75); border-radius: 0.625rem;
        display: flex; align-items: center; justify-content: center;
        color: #fff; font-size: 1.1rem;
    }
    :where([data-page~="store-product-form"]) .gi-thumb {
        width: 52px; height: 52px; border-radius: 0.625rem;
        overflow: hidden; flex-shrink: 0; background: var(--bs-secondary-bg);
        display: flex; align-items: center; justify-content: center;
        position: relative;
    }
    :where([data-page~="store-product-form"]) .gi-thumb img { width: 100%; height: 100%; object-fit: cover; }
    :where([data-page~="store-product-form"]) .gi-info { flex: 1; min-width: 0; }
    :where([data-page~="store-product-form"]) .gi-name { font-size: var(--fs-sm); font-weight: 600; color: var(--bs-body-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    :where([data-page~="store-product-form"]) .gi-size { font-size: var(--fs-xs); color: var(--bs-secondary-color); margin-top: 0.1rem; }
    :where([data-page~="store-product-form"]) .gi-remove {
        width: 26px; height: 26px; border-radius: 50%; border: none;
        background: #fee2e2; color: #ad2a2a;
        display: flex; align-items: center; justify-content: center;
        font-size: var(--fs-xs); flex-shrink: 0; cursor: pointer;
        transition: background 0.2s; padding: 0;
    }
    :where([data-page~="store-product-form"]) .gi-remove:hover { background: #ad2a2a; color: #fff; }

    :where([data-page~="store-product-form"]) .django-ckeditor-widget { width: 100% !important; }
    :where([data-page~="store-product-form"]) .cke_chrome { border: 1px solid var(--bs-border-color) !important; border-radius: 0.75rem !important; overflow: hidden; box-shadow: none !important; }
    :where([data-page~="store-product-form"]) .cke_top { background: var(--bs-secondary-bg) !important; border-bottom: 1px solid var(--bs-border-color) !important; }

    :where([data-page~="store-product-form"]) [data-bs-theme="dark"] .cke_bottom { background: var(--bs-body-bg) !important; border-top: 1px solid var(--bs-border-color) !important; }
    :where([data-page~="store-product-form"]) [data-bs-theme="dark"] .cke_status { color: var(--bs-secondary-color) !important; }
    :where([data-page~="store-product-form"]) [data-bs-theme="dark"] .cke_toolbar_separator { background-color: var(--bs-border-color) !important; }
    :where([data-page~="store-product-form"]) [data-bs-theme="dark"] .cke_button_icon { filter: invert(1) hue-rotate(180deg); }

    @media (max-width: 576px) {
        :where([data-page~="store-product-form"]) .main-editor-col {
            padding: 0.5rem;
        }
        :where([data-page~="store-product-form"]) .section-header-responsive {
            text-align: center;
        }
        :where([data-page~="store-product-form"]) .section-header-responsive h6 {
            margin-bottom: 1rem !important;
        }
        :where([data-page~="store-product-form"]) .section-header-responsive .d-flex {
            justify-content: center;
            width: 100%;
        }
        :where([data-page~="store-product-form"]) .section-header-responsive .btn {
            flex: 1;
            justify-content: center;
            padding: 0.5rem 0.75rem !important;
            font-size: var(--fs-sm) !important;
        }
    }


    :where([data-page~="store-product-form"]) .pe-actionbar {position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:14px;
        background:var(--bs-body-bg);border:1px solid var(--bs-border-color);border-radius:12px;
        padding:10px 14px;margin-bottom:18px;box-shadow:0 4px 14px rgba(0,0,0,.05)}
    :where([data-page~="store-product-form"]) .pe-ab-left {display:flex;align-items:center;gap:10px;min-width:0}
    :where([data-page~="store-product-form"]) .pe-back {width:34px;height:34px;border-radius:9px;border:1px solid var(--bs-border-color);display:grid;place-items:center;color:var(--bs-secondary-color);text-decoration:none;flex:none}
    :where([data-page~="store-product-form"]) .pe-back:hover {color:var(--bs-primary);border-color:var(--bs-primary)}
    :where([data-page~="store-product-form"]) .pe-ab-title {font-weight:700;font-size: var(--fs-lg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:8px;min-width:0}
    :where([data-page~="store-product-form"]) .pe-ab-title #pe-title-text {overflow:hidden;text-overflow:ellipsis}
    :where([data-page~="store-product-form"]) .pe-ab-right {margin-left:auto;display:flex;align-items:center;gap:8px;flex:none}
    :where([data-page~="store-product-form"]) .pe-saved {font-size: var(--fs-sm);color:var(--bs-secondary-color);white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
    :where([data-page~="store-product-form"]) .pe-saved.dirty {color:var(--bs-warning)}
    body:where([data-page~="store-product-form"]).pe-focus #pe-side-col {display:none}
    body:where([data-page~="store-product-form"]).pe-focus #pe-main-col {flex:0 0 100%;max-width:100%}
    @media(max-width:640px){:where([data-page~="store-product-form"]) .pe-ab-title #pe-title-text {max-width:90px}:where([data-page~="store-product-form"]) .pe-saved {display:none}}
    

                        :where([data-page~="store-product-form"]) .pf-dropzone {border:2px dashed var(--bs-border-color);border-radius:12px;padding:14px;text-align:center;cursor:pointer;transition:border-color .15s,background .15s;background:var(--bs-secondary-bg)}
                        :where([data-page~="store-product-form"]) .pf-dropzone:hover, :where([data-page~="store-product-form"]) .pf-dropzone.drag {border-color:var(--bs-primary);background:rgba(var(--bs-primary-rgb),.06)}
                        :where([data-page~="store-product-form"]) .pf-dz-preview {width:100%;height:150px;border-radius:9px;background-size:cover;background-position:center;background-repeat:no-repeat;display:grid;place-items:center;color:var(--bs-secondary-color);font-size:1.8rem;background-color:var(--bs-body-bg);margin-bottom:10px}
                        :where([data-page~="store-product-form"]) .pf-dz-text {font-size: var(--fs-sm);color:var(--bs-secondary-color)} :where([data-page~="store-product-form"]) .pf-dz-text b {color:var(--bs-primary)}
                        :where([data-page~="store-product-form"]) .pf-dz-hint {font-size: var(--fs-xs);color:var(--bs-tertiary-color,#9aa)}

/* ==== Component: apps/agent/templates/agent/includes/ai_widget.html ==== */
.ai-fab {
        position: fixed;
        bottom: 1.5rem;
        right: 1.5rem;
        width: 52px;
        height: 52px;
        border-radius: 1rem;
        background: var(--ai-widget-primary);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 8px 20px rgba(0,0,0,0.15);
        cursor: pointer;
        z-index: 1050;
        transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }
    .ai-fab:hover { transform: scale(1.05) translateY(-3px); box-shadow: 0 12px 25px rgba(0,0,0,0.2); }
    .ai-fab i { font-size: 1.25rem; }
    .ai-panel {
        position: fixed;
        bottom: 5.5rem;
        right: 1.5rem;
        width: var(--ai-widget-width);
        height: var(--ai-widget-height);
        max-height: calc(100vh - 7rem);
        border-radius: 1rem;
        box-shadow: 0 20px 40px rgba(0,0,0,0.1);
        z-index: 1051;
        display: none;
        flex-direction: column;
        overflow: hidden;
        border: 1px solid var(--border-color-darker);
        animation: aiSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .ai-panel.active { display: flex; }
    @keyframes aiSlideUp {
        from { opacity: 0; transform: translateY(15px); }
        to { opacity: 1; transform: translateY(0); }
    }
    .ai-panel-header {
        padding: 0.75rem 1rem;
        border-bottom: 1px solid var(--border-color);
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .ai-panel-body { flex: 1; position: relative; background: #fff; }
    .ai-panel-iframe { width: 100%; height: 100%; border: none; }
    @media (max-width: 576px) {
        .ai-panel {
            width: calc(100vw - 2rem) !important;
            height: calc(100vh - 6rem) !important;
            right: 1rem;
            bottom: 4.5rem;
        }
        .ai-fab {
            bottom: 1rem;
            right: 1rem;
            width: 48px;
            height: 48px;
        }
    }

/* ==== Component: apps/blog/templates/blog/_social_share_modal.html ==== */
.ss-stage { background: repeating-conic-gradient(#eef1f6 0% 25%, #f8fafc 0% 50%) 50% / 24px 24px; min-height: 320px; padding: 1.25rem; user-select: none; touch-action: pan-y; }
    #ss-canvas { max-width: 100%; height: auto; background: #fff; cursor: grab; }
    #ss-canvas:active { cursor: grabbing; }
    .ss-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; border: 0; background: #fff; color: #111827; box-shadow: 0 6px 18px rgba(17,24,39,.18); z-index: 2; }
    .ss-nav:hover { background: #1e62e0; color: #fff; }
    .ss-nav-l { left: .5rem; } .ss-nav-r { right: .5rem; }
    .ss-dot { width: 10px; height: 10px; border-radius: 50%; border: 0; background: var(--border-color-darker); padding: 0; }
    .ss-dot.active { background: #1e62e0; width: 26px; border-radius: 6px; }
    .ss-ratio.active { background: #1e62e0; color: #fff; }
    .ss-mode[hidden] { display: none; }
    .ss-modebtn.active { background: #1e62e0; color: #fff; border-color: #1e62e0; }
    .ss-ratio.active .text-muted { color: rgba(255,255,255,.8) !important; }
    .ss-spinner { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(255,255,255,.6); border-radius: 1rem; }
    .ss-stage.ss-loading .ss-spinner { display: flex; }
    .ss-slide-l { animation: ssSlideL .28s ease; } .ss-slide-r { animation: ssSlideR .28s ease; }
    @keyframes ssSlideL { from { transform: translateX(30px); opacity: .4; } to { transform: none; opacity: 1; } }
    @keyframes ssSlideR { from { transform: translateX(-30px); opacity: .4; } to { transform: none; opacity: 1; } }

/* ==== Component: apps/core/templates/core/elements/bulk_action_bar.html ==== */
.bulk-action-bar {
        position: fixed;
        bottom: 2rem;
        left: 50%;
        transform: translateX(-50%);
        width: calc(100% - 4rem);
        max-width: 900px;
        background: #1e293b; /* Slate 800 */
        color: #fff;
        border-radius: 1.25rem;
        z-index: 1060;
        border: 1px solid rgba(255,255,255,0.1);
    }

    @media (max-width: 768px) {
        .bulk-action-bar {
            bottom: 1rem;
            width: calc(100% - 2rem);
            border-radius: 1rem;
        }
    }

    .selection-count-badge {
        width: 42px;
        height: 42px;
        background: var(--primary, #2957ab);
        color: #fff;
        border-radius: 0.75rem;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 800;
        font-size: 1.1rem;
        box-shadow: 0 4px 12px rgba(41, 87, 171, 0.3);
    }

    .bulk-confirm-dialog { max-width: 440px; }
    .bulk-confirm-dialog .modal-body { padding: 2rem 2.25rem !important; }

    .hover-opacity-100:hover { opacity: 1 !important; }

    /* Highlight an empty action select when "Apply" is pressed */
    #bulk-action-select.is-invalid { box-shadow: 0 0 0 3px rgba(154, 91, 6, .55) !important; animation: bulkShake .35s ease; }
    @keyframes bulkShake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

    /* Animation helper if not using Animate.css */
    .animate__fadeInUp {
        animation: fadeInUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }

    @keyframes fadeInUp {
        from { opacity: 0; transform: translate(-50%, 20px); }
        to { opacity: 1; transform: translate(-50%, 0); }
    }

/* ==== Component: apps/core/templates/core/elements/filter_bar.html ==== */
/* All filter-bar controls share one height, so the bottom-aligned
   (align-items-end) "Apply" button stays level. */
    .filter-bar .form-control,
    .filter-bar .form-select,
    .filter-bar .input-group-text,
    .filter-bar .btn {
        height: 38px;
        font-size: var(--fs-sm, .8rem);
        border-radius: var(--r-sm, 10px);
    }
    .filter-bar .input-group > .form-control { border-top-left-radius: 0; border-bottom-left-radius: 0; }
    .filter-bar .input-group > .input-group-text { border-top-right-radius: 0; border-bottom-right-radius: 0; }
    .filter-bar .input-group-text { background: var(--bg-sunken); color: var(--text-muted); font-weight: 600; }
    .filter-bar input[type="date"] { min-width: 9.5rem; }
    .filter-bar .mb-3, .filter-bar .form-group { margin-bottom: 0 !important; }
    /* Crispy labels are hidden: each filter's "-- Category --"
       option already labels it. */
    .filter-bar form label { display: none; }
    .filter-bar .btn-group .btn:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
    .filter-bar .btn-group .btn:last-child { border-top-left-radius: 0; border-bottom-left-radius: 0; }
    .filter-bar .form-control:focus, .filter-bar .form-select:focus {
        border-color: var(--bs-primary);
        box-shadow: 0 0 0 2px rgba(var(--bs-primary-rgb), 0.1);
    }

/* ==== Component: apps/core/templates/core/elements/form_terjemahan.html ==== */
.form-terjemahan .ft-tabs { border-bottom-color: var(--bs-border-color); }
.form-terjemahan .ft-tabs .nav-link { font-weight: 600; font-size: .88rem; color: var(--bs-secondary-color); }
.form-terjemahan .ft-tabs .nav-link.active { color: var(--accent, var(--bs-primary)); }
.form-terjemahan .ft-kode {
    display: inline-block; font: 700 .66rem/1 var(--font-mono, ui-monospace, monospace);
    padding: .2rem .35rem; border-radius: 5px; margin-right: .2rem;
    background: var(--bs-secondary-bg); color: var(--bs-secondary-color);
}
.form-terjemahan .nav-link.active .ft-kode { background: var(--accent, var(--bs-primary)); color: #fff; }
.form-terjemahan .ft-isi { padding-top: 1.1rem; }

/* ══════════════════════════════════════════════════════════════════════
   RAIL + SUB-MENU (Oktober 2026)
   Jalur 76px berisi satu ikon per grup menu; panel 248px hanya memuat
   grup yang dipilih. Ciutkan = panel tersembunyi, jalur tetap (memakai
   #wrapper.toggled yang sudah ada). Di bawah lg seluruh sidebar menjadi
   laci di luar layar, dibuka tombol menu di bilah atas.
   ══════════════════════════════════════════════════════════════════════ */
:root {
    --sb-rail: 60px;
    --sb-panel: 232px;
    --sidebar-width: calc(var(--sb-rail) + var(--sb-panel));
    --sb-lencana: #f97316;
}

/* ── Jalur ── */
/* Warna jalur = jalur backend lama: --accent (warna tombol primary), ikon
   putih transparan; mode gelap selangkah lebih gelap dari konten. */
.sidebar.sb-v2 .sb-rail {
    width: var(--sb-rail); flex: 0 0 var(--sb-rail);
    background: var(--accent); border-right: 0;
    padding: 12px 0 10px; gap: 4px; overflow: visible;
    box-shadow: inset -1px 0 0 rgba(0, 0, 0, .06);
}
.sb-v2 .sb-rail .sb-logo {
    width: 36px; height: 36px; border-radius: 8px; margin-bottom: 10px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .12);
    background: #fff; color: var(--accent);
}
.sb-v2 .sb-rail .sb-logo img { width: 22px; height: 22px; }
.sb-v2 .sb-grup-daftar {
    flex: 1 1 auto; min-height: 0; width: 100%;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    overflow-y: auto; overflow-x: hidden; scrollbar-width: none; padding: 2px 0;
}
.sb-v2 .sb-grup-daftar::-webkit-scrollbar { display: none; }
.sb-v2 .sb-rail-bawah {
    width: 100%; flex: 0 0 auto;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, .28);
}
.sidebar.sb-v2 .sb-ikon {
    position: relative; width: 36px; height: 36px; border-radius: 8px;
    color: rgba(255, 255, 255, .72); font-size: 15px; cursor: pointer;
}
.sidebar.sb-v2 .sb-ikon:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.sidebar.sb-v2 .sb-ikon.active { background: rgba(255, 255, 255, .22); color: #fff; box-shadow: 0 1px 2px rgba(16, 24, 40, .18), inset 0 0 0 1px rgba(255, 255, 255, .14); }
.sidebar.sb-v2 .sb-ikon:focus-visible,
.sidebar.sb-v2 .sb-logo:focus-visible,
.sidebar.sb-v2 .sb-avatar:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.sb-v2 .sb-lencana {
    position: absolute; top: -3px; right: -4px;
    min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box;
    border-radius: 999px; background: var(--sb-lencana); color: #fff;
    font-size: 9px; font-weight: 800; line-height: 16px; text-align: center;
}
.sidebar.sb-v2 .sb-avatar { width: 32px; height: 32px; margin-top: 4px; background: rgba(255, 255, 255, .16); color: #fff; font-size: var(--fs-sm); }
.sb-v2 .sb-perkakas .dropdown-item { display: flex; align-items: center; }
/* Menu di bagian bawah jalur membuka ke atas agar tidak terpotong. */
.sb-v2 .sb-rail-bawah .dropdown-menu { top: auto !important; bottom: 0 !important; }
.sb-v2 .sb-perkakas .dropdown-item.is-active { color: var(--accent); font-weight: 600; }
[data-bs-theme="dark"] .sidebar.sb-v2 .sb-rail { background: #0f1319; border-right: 1px solid var(--border-color); }
[data-bs-theme="dark"] .sidebar.sb-v2 .sb-rail-bawah { border-top-color: rgba(255, 255, 255, .08); }
[data-bs-theme="dark"] .sidebar.sb-v2 .sb-ikon { color: #8f9aab; }
[data-bs-theme="dark"] .sidebar.sb-v2 .sb-ikon:hover { background: rgba(255, 255, 255, .06); color: var(--text-main); }
[data-bs-theme="dark"] .sidebar.sb-v2 .sb-ikon.active { background: rgba(var(--accent-rgb), .2); color: #a6c0f2; box-shadow: 0 1px 2px rgba(0, 0, 0, .4), inset 0 0 0 1px rgba(255, 255, 255, .06); }
[data-bs-theme="dark"] .sidebar.sb-v2 .sb-avatar { background: rgba(255, 255, 255, .09); }
[data-bs-theme="dark"] .sidebar.sb-v2 .sb-rail .sb-logo { background: #e3e8f0; color: #1d3561; }

/* ── Panel ── */
.sidebar.sb-v2 .sb-panel {
    width: var(--sb-panel); flex: 0 0 var(--sb-panel);
    box-shadow: 4px 0 16px -10px rgba(16, 24, 40, .14);
    background: var(--bg-sidebar); border-right: 1px solid #e4e9f2;
}
[data-bs-theme="dark"] .sidebar.sb-v2 .sb-panel { border-right-color: var(--border-color); }
.sb-v2 .sb-panel .sidebar-header { padding: 16px 12px 2px; border-bottom: 0; background: transparent; }
.sb-v2 .sb-panel-atas { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sb-v2 .sb-alis {
    padding: 4px 8px 2px; font-size: 11px; font-weight: 800;
    letter-spacing: .08em; text-transform: uppercase; color: #64748b;
}
.sb-v2 .sb-judul-grup {
    margin: 0; padding: 0 8px 12px; font-size: 20px; font-weight: 700;
    color: var(--text-main); letter-spacing: -.01em;
}
.sb-v2 .sb-cari {
    display: flex; align-items: center; gap: 8px; width: 100%;
    height: 36px; margin: 0 0 10px; padding: 0 10px;
    border: 1px solid #dfe5ef; border-radius: 8px; box-shadow: 0 1px 2px rgba(16, 24, 40, .05); background: transparent;
    color: #64748b; font-size: var(--fs-sm); text-align: left; cursor: pointer;
}
.sb-v2 .sb-cari span { flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-v2 .sb-cari kbd { font-size: 10px; background: #f1f5f9; color: #64748b; border-radius: 6px; padding: 2px 6px; }
.sb-v2 .sb-cari:hover { border-color: var(--accent); color: var(--accent); }
[data-bs-theme="dark"] .sb-v2 .sb-cari { border-color: var(--border-color); color: #aebbcd; }
[data-bs-theme="dark"] .sb-v2 .sb-cari kbd { background: rgba(255, 255, 255, .08); color: #aebbcd; }
.sb-v2 .sb-tutup {
    width: 40px; height: 40px; border: 0; border-radius: 10px;
    background: #f1f4f9; color: #334155; display: grid; place-items: center;
}
.sb-v2 .sb-cari:focus-visible, .sb-v2 .sb-tutup:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Seksi: hanya grup terpilih yang tampil (setelah skrip siap; tanpa JS
   semua seksi tampil). Judul seksi tetap ada di markup untuk breadcrumb. */
.sb-v2.sb-siap .sidebar-section:not(.terpilih) { display: none; }
.sb-v2 .sidebar-section { border-bottom: 0; padding-bottom: 0; }
.sb-v2.sb-siap .sidebar-section-toggle { display: none !important; }
.sb-v2 .sidebar-section.collapsed .sidebar-section-body { grid-template-rows: 1fr; }

.sidebar.sb-v2 .sb-panel .nav-link {
    display: flex; align-items: center; gap: 10px;
    min-height: 36px; margin: 1px 8px; padding: 0 10px;
    border-radius: 8px !important; font-size: var(--fs-sm); font-weight: 500;
    color: #334155; background: transparent; box-shadow: none;
}
.sidebar.sb-v2 .sb-panel .nav-link i { width: 18px; text-align: center; color: #64748b; }
.sidebar.sb-v2 .sb-panel .nav-link:hover { background: #eef2f9 !important; color: #0f172a !important; }
.sidebar.sb-v2 .sb-panel .nav-link:hover i { color: var(--accent) !important; }
.sidebar.sb-v2 .sb-panel .nav-link.active {
    background: #e8eefa !important; color: #1d4384 !important; font-weight: 600;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .08), 0 0 0 1px rgba(16, 24, 40, .04);
}
.sidebar.sb-v2 .sb-panel .nav-link.active i { color: var(--accent) !important; }
.sidebar.sb-v2 .sb-panel .nav-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.sidebar.sb-v2 .sb-panel .sb-hitung { background: #fff1e6; color: #c2410c; }
.sidebar.sb-v2 .sb-panel .nav-link.active .sb-hitung { background: #fff; color: #c2410c; }
[data-bs-theme="dark"] .sidebar.sb-v2 .sb-panel .nav-link { color: #e8edf4; }
[data-bs-theme="dark"] .sidebar.sb-v2 .sb-panel .nav-link:hover { background: rgba(255, 255, 255, .06) !important; color: #fff !important; }
[data-bs-theme="dark"] .sidebar.sb-v2 .sb-panel .nav-link.active { background: rgba(var(--accent-rgb), .18) !important; color: var(--accent) !important; box-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 0 0 1px rgba(255, 255, 255, .04); }

/* Gaya "solid": panel beraksen (pilihan per peramban, tombol Gaya Sidebar). */
.sidebar.sb-v2[data-gaya="solid"] .sb-panel { background: var(--accent); border-right-color: rgba(255, 255, 255, .18); }
.sidebar.sb-v2[data-gaya="solid"] .sb-alis { color: rgba(255, 255, 255, .7); }
.sidebar.sb-v2[data-gaya="solid"] .sb-judul-grup { color: #fff; }
.sidebar.sb-v2[data-gaya="solid"] .sb-cari { border-color: rgba(255, 255, 255, .35); color: rgba(255, 255, 255, .85); }
.sidebar.sb-v2[data-gaya="solid"] .sb-panel .nav-link { color: rgba(255, 255, 255, .9) !important; }
.sidebar.sb-v2[data-gaya="solid"] .sb-panel .nav-link i { color: rgba(255, 255, 255, .78) !important; }
.sidebar.sb-v2[data-gaya="solid"] .sb-panel .nav-link:hover { background: rgba(255, 255, 255, .12) !important; color: #fff !important; }
.sidebar.sb-v2[data-gaya="solid"] .sb-panel .nav-link.active,
.sidebar.sb-v2[data-gaya="solid"] .sb-panel .nav-link.active i { background: #fff !important; color: var(--accent) !important; }

/* Layar pendek: jalur grup bergulir; perkakas di bawah tetap terlihat. */
@media (max-height: 680px) {
    .sidebar.sb-v2 .sb-ikon { width: 34px; height: 34px; }
}

/* ── Ponsel & tablet: laci di luar layar (jalur + panel) ── */
@media (max-width: 991.98px) {
    :root { --sb-rail: 64px; --sb-panel: 248px; }
    .sidebar.sb-v2 {
        left: calc(-1 * var(--sidebar-width) - 24px) !important;
        width: var(--sidebar-width) !important;
        max-width: calc(100vw - 32px);
    }
    .sidebar.sb-v2 .sb-panel { display: flex !important; flex: 1 1 auto; width: auto; min-width: 0; }
    #wrapper.toggled .sidebar.sb-v2 { left: 0 !important; }
    #wrapper #page-content-wrapper { margin-left: 0 !important; width: 100% !important; }
    .sidebar.sb-v2 .sb-ikon { width: 44px; height: 44px; }
    .sb-v2 .sb-rail .sb-logo { width: 40px; height: 40px; }
    .sidebar.sb-v2 .sb-avatar { width: 36px; height: 36px; }
    .sb-v2 .sb-rail .dropdown-menu, .sb-v2 .sb-dropdown { max-width: calc(100vw - var(--sb-rail) - 40px); }
}
@media (prefers-reduced-motion: reduce) {
    .sidebar.sb-v2, #page-content-wrapper { transition: none !important; }
}