/* ======================================================================
   SPPK THEME SYSTEM

   Satu sumber warna, tipografi, permukaan, dan ukuran card untuk seluruh
   modul internal. File ini wajib dimuat paling akhir setelah CSS per fitur.
   Polanya mengikuti arsitektur PBPH Logistik: token lebih dahulu, komponen
   netral menggunakan token, warna semantik tetap hanya pada aksi/status.
   ====================================================================== */

:root {
    --sppk-font-meta: 0.75rem;
    --sppk-font-ui: 0.8125rem;
    --sppk-font-body: 0.875rem;
    --sppk-font-h4: 1rem;
    --sppk-font-h3: 1.125rem;
    --sppk-font-h2: clamp(1.35rem, 1.2rem + 0.5vw, 1.6rem);
    --sppk-font-h1: clamp(1.65rem, 1.45rem + 0.75vw, 2rem);
    --sppk-line-ui: 1.4;
    --sppk-line-body: 1.55;
    --sppk-card-radius: 1rem;
    --sppk-card-radius-compact: 0.75rem;
    --sppk-card-padding: clamp(1rem, 0.85rem + 0.55vw, 1.4rem);
    --sppk-card-gap: 1rem;
}

body.sppk-app-shell:not(.dark) {
    color-scheme: light;
    --sppk-theme-page: #ffffff;
    --sppk-theme-surface: #ffffff;
    --sppk-theme-surface-soft: #f7f9fa;
    --sppk-theme-surface-raised: #ffffff;
    --sppk-theme-line: #dfe4e8;
    --sppk-theme-line-soft: #edf0f2;
    --sppk-theme-heading: #172033;
    --sppk-theme-text: #344054;
    --sppk-theme-copy: #475467;
    --sppk-theme-muted: #667085;
    --sppk-theme-subtle: #7d8998;
    --sppk-theme-link: #087653;
    --sppk-theme-brand: #087653;
    --sppk-theme-brand-soft: #eaf7f1;
    --sppk-theme-input: #ffffff;
    --sppk-theme-placeholder: #7b8796;
    --sppk-theme-shadow: 0 12px 32px rgba(23, 32, 51, 0.07);
    --sppk-theme-shadow-soft: 0 6px 18px rgba(23, 32, 51, 0.055);
}

body.sppk-app-shell.dark {
    color-scheme: dark;
    --sppk-theme-page: #171717;
    --sppk-theme-surface: #202020;
    --sppk-theme-surface-soft: #252525;
    --sppk-theme-surface-raised: #292929;
    --sppk-theme-line: #383838;
    --sppk-theme-line-soft: #303030;
    --sppk-theme-heading: #f4f4f4;
    --sppk-theme-text: #e2e2e2;
    --sppk-theme-copy: #cccccc;
    --sppk-theme-muted: #ababab;
    --sppk-theme-subtle: #8f8f8f;
    --sppk-theme-link: #79d9ae;
    --sppk-theme-brand: #63d6a0;
    --sppk-theme-brand-soft: #1d332a;
    --sppk-theme-input: #1b1b1b;
    --sppk-theme-placeholder: #8f8f8f;
    --sppk-theme-shadow: 0 16px 38px rgba(0, 0, 0, 0.24);
    --sppk-theme-shadow-soft: 0 7px 20px rgba(0, 0, 0, 0.2);
}

/* Alias untuk token lama setiap modul. Dengan ini file fitur tidak lagi
   menentukan sendiri warna baca saat tema berubah. */
body.sppk-app-shell .main-content,
body.sppk-app-shell .main-content .content-area,
body.sppk-app-shell .main-content .content-area > * {
    --bg: var(--sppk-theme-surface) !important;
    --surface: var(--sppk-theme-surface) !important;
    --soft: var(--sppk-theme-surface-soft) !important;
    --panel: var(--sppk-theme-surface) !important;
    --card: var(--sppk-theme-surface) !important;
    --text: var(--sppk-theme-heading) !important;
    --ink: var(--sppk-theme-heading) !important;
    --copy: var(--sppk-theme-copy) !important;
    --muted: var(--sppk-theme-muted) !important;
    --line: var(--sppk-theme-line) !important;
    --border: var(--sppk-theme-line) !important;
    --shadow: var(--sppk-theme-shadow) !important;
    --ac-surface: var(--sppk-theme-surface) !important;
    --ac-surface-soft: var(--sppk-theme-surface-soft) !important;
    --ac-text: var(--sppk-theme-heading) !important;
    --ac-copy: var(--sppk-theme-copy) !important;
    --ac-muted: var(--sppk-theme-muted) !important;
    --ac-line: var(--sppk-theme-line) !important;
    --mw-surface: var(--sppk-theme-surface) !important;
    --mw-text: var(--sppk-theme-heading) !important;
    --mw-copy: var(--sppk-theme-copy) !important;
    --mw-line: var(--sppk-theme-line) !important;
    --ih-surface: var(--sppk-theme-surface) !important;
    --ih-soft: var(--sppk-theme-surface-soft) !important;
    --ih-ink: var(--sppk-theme-heading) !important;
    --ih-copy: var(--sppk-theme-copy) !important;
    --ih-line: var(--sppk-theme-line) !important;
    --ops-surface: var(--sppk-theme-surface) !important;
    --ops-surface-soft: var(--sppk-theme-surface-soft) !important;
    --ops-text: var(--sppk-theme-heading) !important;
    --ops-copy: var(--sppk-theme-copy) !important;
    --ops-muted: var(--sppk-theme-muted) !important;
    --ops-line: var(--sppk-theme-line) !important;
    --target-card: var(--sppk-theme-surface) !important;
    --target-panel: var(--sppk-theme-surface-soft) !important;
    --target-text: var(--sppk-theme-heading) !important;
    --target-ink: var(--sppk-theme-heading) !important;
    --target-muted: var(--sppk-theme-muted) !important;
    --target-line: var(--sppk-theme-line) !important;
    --setting-surface: var(--sppk-theme-surface) !important;
    --setting-surface-soft: var(--sppk-theme-surface-soft) !important;
    --setting-ink: var(--sppk-theme-heading) !important;
    --setting-copy: var(--sppk-theme-copy) !important;
    --setting-muted: var(--sppk-theme-muted) !important;
    --setting-line: var(--sppk-theme-line) !important;
    --settings-neutral-surface: var(--sppk-theme-surface) !important;
    --settings-neutral-soft: var(--sppk-theme-surface-soft) !important;
    --settings-neutral-ink: var(--sppk-theme-heading) !important;
    --settings-neutral-copy: var(--sppk-theme-copy) !important;
    --settings-neutral-muted: var(--sppk-theme-muted) !important;
    --settings-neutral-line: var(--sppk-theme-line) !important;
    --account-surface: var(--sppk-theme-surface) !important;
    --account-surface-muted: var(--sppk-theme-surface-soft) !important;
    --account-heading: var(--sppk-theme-heading) !important;
    --account-copy: var(--sppk-theme-copy) !important;
    --account-line: var(--sppk-theme-line) !important;
    --database-surface: var(--sppk-theme-surface) !important;
    --database-surface-muted: var(--sppk-theme-surface-soft) !important;
    --database-heading: var(--sppk-theme-heading) !important;
    --database-copy: var(--sppk-theme-copy) !important;
    --database-border: var(--sppk-theme-line) !important;
    --gallery-surface: var(--sppk-theme-surface) !important;
    --gallery-surface-soft: var(--sppk-theme-surface-soft) !important;
    --gallery-heading: var(--sppk-theme-heading) !important;
    --gallery-copy: var(--sppk-theme-copy) !important;
    --gallery-muted: var(--sppk-theme-muted) !important;
    --gallery-line: var(--sppk-theme-line) !important;
    --rekap-surface: var(--sppk-theme-surface) !important;
    --rekap-ink: var(--sppk-theme-heading) !important;
    --rekap-muted: var(--sppk-theme-muted) !important;
    --rekap-border: var(--sppk-theme-line) !important;
    --rekap-table-head: var(--sppk-theme-surface-soft) !important;
    --rekap-table-line: var(--sppk-theme-line-soft) !important;
    --unit-surface: var(--sppk-theme-surface) !important;
    --unit-panel: var(--sppk-theme-surface-soft) !important;
    --unit-ink: var(--sppk-theme-heading) !important;
    --unit-muted: var(--sppk-theme-muted) !important;
    --unit-line: var(--sppk-theme-line) !important;
    --bs-body-color: var(--sppk-theme-text) !important;
    --bs-card-bg: var(--sppk-theme-surface) !important;
    --bs-card-color: var(--sppk-theme-text) !important;
    --bs-card-border-color: var(--sppk-theme-line) !important;
    --bs-table-bg: transparent !important;
    --bs-table-color: var(--sppk-theme-text) !important;
}

html,
body.sppk-app-shell {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body.sppk-app-shell,
body.sppk-app-shell button,
body.sppk-app-shell input,
body.sppk-app-shell select,
body.sppk-app-shell textarea {
    font-family: "Segoe UI Variable Text", "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
    font-feature-settings: "kern" 1, "liga" 1;
    text-rendering: optimizeLegibility;
}

body.sppk-app-shell {
    background: var(--sppk-theme-page) !important;
    color: var(--sppk-theme-text) !important;
    font-size: var(--sppk-font-body);
    line-height: var(--sppk-line-body);
}

html body.sppk-app-shell .main-content,
html body.sppk-app-shell .main-content .content-area,
html body.sppk-app-shell .main-content .content-area > .container,
html body.sppk-app-shell .main-content .content-area > .container-fluid {
    background-color: var(--sppk-theme-page) !important;
    color: var(--sppk-theme-text) !important;
}

/* Shell */
html body.sppk-app-shell #appSidebar,
html body.sppk-app-shell .topbar {
    border-color: var(--sppk-theme-line) !important;
    background: var(--sppk-theme-surface) !important;
    color: var(--sppk-theme-text) !important;
}

html body.sppk-app-shell #appSidebar {
    box-shadow: 7px 0 24px color-mix(in srgb, var(--sppk-theme-heading) 7%, transparent) !important;
}

html body.sppk-app-shell .topbar {
    box-shadow: 0 8px 24px color-mix(in srgb, var(--sppk-theme-heading) 6%, transparent) !important;
}

html body.sppk-app-shell #appSidebar .sidebar-nav-label {
    margin-block: 1.2rem 0.55rem !important;
    color: var(--sppk-theme-subtle) !important;
    font-size: 0.75rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.11em !important;
    line-height: 1.35 !important;
}
html body.sppk-app-shell #appSidebar .sidebar-nav-label:first-child {
    margin-top: 0.45rem !important;
}
html body.sppk-app-shell #appSidebar .menu-link,
html body.sppk-app-shell #appSidebar .menu-link > span:not(.sidebar-menu-badge) {
    color: var(--sppk-theme-copy) !important;
    font-size: 11.5px !important;
    font-weight: 650 !important;
    line-height: 1.4 !important;
}
html body.sppk-app-shell #appSidebar .sidebar-menu-badge {
    font-size: 0.675rem !important;
    line-height: 1 !important;
}
html body.sppk-app-shell #appSidebar .menu-link {
    min-height: 2.875rem !important;
    padding-block: 0.625rem !important;
}
html body.sppk-app-shell #appSidebar .menu-link > i {
    flex-basis: 1.875rem !important;
    width: 1.875rem !important;
    height: 1.875rem !important;
    color: var(--sppk-theme-muted) !important;
    background: var(--sppk-theme-surface-soft) !important;
    font-size: 0.875rem !important;
}
html body.sppk-app-shell #appSidebar .menu-link:hover {
    border-color: var(--sppk-theme-line) !important;
    color: var(--sppk-theme-heading) !important;
    background: var(--sppk-theme-surface-soft) !important;
}
html body.sppk-app-shell #appSidebar .menu-link.menu-active {
    border-color: color-mix(in srgb, var(--sppk-theme-brand) 25%, var(--sppk-theme-line)) !important;
    color: var(--sppk-theme-brand) !important;
    background: var(--sppk-theme-brand-soft) !important;
    box-shadow: inset 3px 0 0 var(--sppk-theme-brand) !important;
}
html body.sppk-app-shell #appSidebar .menu-link.menu-active span,
html body.sppk-app-shell #appSidebar .menu-link.menu-active > i { color: var(--sppk-theme-brand) !important; }
html body.sppk-app-shell #appSidebar .sidebar-profile {
    border-color: var(--sppk-theme-line) !important;
    color: var(--sppk-theme-text) !important;
    background: var(--sppk-theme-surface) !important;
    box-shadow: var(--sppk-theme-shadow-soft) !important;
}
html body.sppk-app-shell #appSidebar .sidebar-profile :is(h5, p, span),
html body.sppk-app-shell .topbar :is(h1, h2, h3, h4, p, small, span, #live-clock) {
    color: var(--sppk-theme-text) !important;
    -webkit-text-fill-color: currentColor !important;
}
html body.sppk-app-shell .topbar :is(.topbar-eyebrow, .system-status) { color: var(--sppk-theme-brand) !important; }

/* Permukaan netral */
html body.sppk-app-shell .main-content .content-area :is(
    .card, [class$="-card"], [class*="-card "],
    .panel, [class$="-panel"], [class*="-panel "],
    .glass-panel, .content-box, .info-box, .feature-box, .metric-box, .stat-box,
    .table-responsive, .dataTables_wrapper, .accordion-item, .list-group-item,
    .modal-content, .offcanvas, .dropdown-menu, .popover
):not(.theme-mode-card):not(.alert):not(.toast):not(.access-denied-hero) {
    border-color: var(--sppk-theme-line) !important;
    background: var(--sppk-theme-surface) !important;
    background-image: none !important;
    color: var(--sppk-theme-text) !important;
    box-shadow: var(--sppk-theme-shadow-soft) !important;
}

html body.sppk-app-shell .main-content .content-area :is(
    [class$="-hero"], [class*="-hero "], .hero-chart, .dashboard-command-deck
):not(.theme-mode-card):not(.access-denied-hero) {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    border-color: var(--sppk-theme-line) !important;
    background: var(--sppk-theme-surface) !important;
    background-image: none !important;
    color: var(--sppk-theme-text) !important;
    box-shadow: var(--sppk-theme-shadow) !important;
}

html body.sppk-app-shell .main-content .content-area :is(
    [class$="-hero"], [class*="-hero "], .hero-chart, .dashboard-command-deck
):not(.access-denied-hero)::before,
html body.sppk-app-shell .main-content .content-area :is(
    [class$="-hero"], [class*="-hero "], .hero-chart, .dashboard-command-deck
):not(.access-denied-hero)::after {
    opacity: 0.045 !important;
    pointer-events: none !important;
}

/* Heading dan teks baca. Reset text-fill penting karena beberapa modul lama
   mengunci warna putih dengan WebKit text fill. */
html body.sppk-app-shell .main-content .content-area
:is(h1, h2, h3, h4, h5, h6, strong, b, .title, .page-title, .section-title, .card-title, .panel-title, .form-title, .table-title, .fw-bold, .fw-semibold)
:not(.btn):not(.btn *):not(button):not(button *):not(.badge):not(.badge *):not(.alert):not(.alert *):not(.hero-enterprise *) {
    color: var(--sppk-theme-heading) !important;
    -webkit-text-fill-color: var(--sppk-theme-heading) !important;
    opacity: 1 !important;
    filter: none !important;
    mix-blend-mode: normal !important;
    text-shadow: none !important;
}

html body.sppk-app-shell .main-content .content-area
:is(p, li, dt, dd, blockquote, time, label, legend, th, td, small, span, em)
:not(.btn):not(.btn *):not(button):not(button *):not(.badge):not(.badge *):not(.alert):not(.alert *):not(.toast):not(.toast *):not(.hero-enterprise *):not(.access-denied-hero *) {
    color: var(--sppk-theme-copy) !important;
    -webkit-text-fill-color: var(--sppk-theme-copy) !important;
    opacity: 1 !important;
    filter: none !important;
    mix-blend-mode: normal !important;
    text-shadow: none !important;
}

html body.sppk-app-shell .main-content .content-area
:is(.text-muted, .text-secondary, .form-text, .help-text, .caption, .meta, [class*="description"], [class*="subtitle"], [class*="detail"], [class*="note"])
:not(.alert):not(.alert *):not(.badge):not(.badge *):not(.hero-enterprise *) {
    color: var(--sppk-theme-muted) !important;
    -webkit-text-fill-color: var(--sppk-theme-muted) !important;
}

html body.sppk-app-shell .main-content .content-area a:not(.btn):not(.badge):not(.nav-link) {
    color: var(--sppk-theme-link);
}

/* Skala baca PBPH: konten tidak boleh kembali ke 8–11px. */
html body.sppk-app-shell .main-content .content-area :is(h1, .page-title) {
    font-size: var(--sppk-font-h1) !important;
    line-height: 1.18 !important;
}
html body.sppk-app-shell .main-content .content-area :is(h2, .panel-title) {
    font-size: var(--sppk-font-h2) !important;
    line-height: 1.22 !important;
}
html body.sppk-app-shell .main-content .content-area h3 {
    font-size: var(--sppk-font-h3) !important;
    line-height: 1.3 !important;
}
html body.sppk-app-shell .main-content .content-area :is(h4, h5, h6) {
    font-size: var(--sppk-font-h4) !important;
    line-height: 1.35 !important;
}
html body.sppk-app-shell .main-content .content-area :is(p, li, dd, .description, .helper-text, .form-help, .empty-state, .notice, .alert) {
    font-size: var(--sppk-font-body) !important;
    line-height: var(--sppk-line-body) !important;
}
html body.sppk-app-shell .main-content .content-area :is(td, label, .form-label, .filter-label, .btn, button, [role="button"]) {
    font-size: var(--sppk-font-ui) !important;
    line-height: var(--sppk-line-ui) !important;
}
html body.sppk-app-shell .main-content .content-area :is(small, .badge, .eyebrow, .kicker, .caption, .meta, .status, th) {
    font-size: var(--sppk-font-meta) !important;
    line-height: 1.4 !important;
}

/* Card mengikuti konten. Tidak ada label yang dipotong oleh tinggi atau
   overflow card induk. Pengecualian media mempertahankan cropping gambar. */
html body.sppk-app-shell .main-content .content-area :is(
    .card, [class$="-card"], [class*="-card "],
    .panel, [class$="-panel"], [class*="-panel "],
    [class$="-hero"], [class*="-hero "], .dashboard-command-deck
):not(.gallery-image):not(.image-card):not(.media-card) {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
    height: auto !important;
    min-height: 0;
}

html body.sppk-app-shell .main-content .content-area :is(
    .card, [class$="-card"], [class*="-card "],
    .panel, [class$="-panel"], [class*="-panel "],
    [class$="-hero"], [class*="-hero "]
) :is(label, .label, [class*="label"], [class*="eyebrow"], [class*="kicker"], [class*="caption"], small) {
    max-width: 100%;
    min-height: 1.35em;
    overflow: visible !important;
    white-space: normal !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere;
    word-break: normal;
    line-height: 1.4 !important;
}

html body.sppk-app-shell .main-content .content-area :is(.card-body, .panel-body, [class*="-body"], [class*="-copy"]) {
    min-width: 0;
    max-width: 100%;
    height: auto !important;
}

/* Form dan tabel */
html body.sppk-app-shell .main-content .content-area :is(
    input:not([type="checkbox"]):not([type="radio"]), select, textarea,
    .form-control, .form-select, .input-group-text, .modern-input, .modern-select
) {
    min-height: 2.5rem;
    border-color: var(--sppk-theme-line) !important;
    background-color: var(--sppk-theme-input) !important;
    color: var(--sppk-theme-heading) !important;
    -webkit-text-fill-color: var(--sppk-theme-heading) !important;
    font-size: var(--sppk-font-body) !important;
}
html body.sppk-app-shell .main-content .content-area :is(input, textarea, .form-control)::placeholder {
    color: var(--sppk-theme-placeholder) !important;
    -webkit-text-fill-color: var(--sppk-theme-placeholder) !important;
    opacity: 1 !important;
}
html body.sppk-app-shell .main-content .content-area select option {
    color: var(--sppk-theme-heading) !important;
    background: var(--sppk-theme-input) !important;
}
html body.sppk-app-shell .main-content .content-area :is(.table, .dataTable) > :not(caption) > * > * {
    border-color: var(--sppk-theme-line-soft) !important;
    background-color: var(--sppk-theme-surface) !important;
    color: var(--sppk-theme-text) !important;
    -webkit-text-fill-color: var(--sppk-theme-text) !important;
}
html body.sppk-app-shell .main-content .content-area :is(.table, .dataTable) thead th {
    border-color: var(--sppk-theme-line) !important;
    background-color: var(--sppk-theme-surface-soft) !important;
    color: var(--sppk-theme-copy) !important;
    -webkit-text-fill-color: var(--sppk-theme-copy) !important;
}
html body.sppk-app-shell .main-content .content-area :is(.table-striped > tbody > tr:nth-of-type(odd) > *, .table-hover > tbody > tr:hover > *) {
    background-color: var(--sppk-theme-surface-soft) !important;
}

/* Warna semantik dikembalikan setelah normalisasi teks. */
html body.sppk-app-shell .main-content .content-area
:is(.btn-primary, .btn-success, .btn-danger, .btn-dark, .bg-primary, .bg-success, .bg-danger, .bg-dark)
:is(span, strong, small, i),
html body.sppk-app-shell .main-content .content-area
:is(.btn-primary, .btn-success, .btn-danger, .btn-dark) {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}
html body.sppk-app-shell .main-content .content-area :is(.btn-warning, .bg-warning) :is(span, strong, small, i) {
    color: #342506 !important;
    -webkit-text-fill-color: #342506 !important;
}
html body.sppk-app-shell .main-content .content-area :is(.text-success) { color: #087f5b !important; -webkit-text-fill-color: #087f5b !important; }
html body.sppk-app-shell .main-content .content-area :is(.text-danger) { color: #c9364b !important; -webkit-text-fill-color: #c9364b !important; }
html body.sppk-app-shell .main-content .content-area :is(.text-warning) { color: #9a6500 !important; -webkit-text-fill-color: #9a6500 !important; }
html body.sppk-app-shell .main-content .content-area :is(.text-primary) { color: #356bd6 !important; -webkit-text-fill-color: #356bd6 !important; }

/* Preview tema dan hero visual memang sengaja memiliki foreground sendiri. */
html body.sppk-app-shell .theme-mode-card.dark-mode-card :is(h1, h2, h3, h4, p, span, strong, i),
html body.sppk-app-shell .main-content .content-area .hero-enterprise :is(h1, h2, h3, h4, p, span, strong, small, i) {
    color: #f4f4f4 !important;
    -webkit-text-fill-color: #f4f4f4 !important;
}
html body.sppk-app-shell .theme-mode-card.light-mode-card :is(h1, h2, h3, h4, p, span, strong, i) {
    color: #172033 !important;
    -webkit-text-fill-color: #172033 !important;
}

/* Dashboard command deck */
html body.sppk-app-shell .page-shell.main-content .content-area .dashboard-workspace .dashboard-command-deck {
    --control-surface: var(--sppk-theme-surface) !important;
    --control-surface-soft: var(--sppk-theme-surface-soft) !important;
    --control-card: var(--sppk-theme-surface-soft) !important;
    --control-line: var(--sppk-theme-line) !important;
    --control-text: var(--sppk-theme-heading) !important;
    --control-muted: var(--sppk-theme-muted) !important;
    --control-brand: var(--sppk-theme-brand) !important;
    border-color: var(--sppk-theme-line) !important;
    background: var(--sppk-theme-surface) !important;
    color: var(--sppk-theme-text) !important;
}
html body.sppk-app-shell .page-shell.main-content .content-area .dashboard-workspace .dashboard-command-deck
:is(.dashboard-command-header h1, .dashboard-kpi-grid .kpi-card h2) {
    color: var(--sppk-theme-heading) !important;
    -webkit-text-fill-color: var(--sppk-theme-heading) !important;
}
html body.sppk-app-shell .page-shell.main-content .content-area .dashboard-workspace .dashboard-command-deck
:is(.dashboard-command-header p, .dashboard-kpi-grid .kpi-card small, .dashboard-kpi-grid .kpi-card > span) {
    color: var(--sppk-theme-copy) !important;
    -webkit-text-fill-color: var(--sppk-theme-copy) !important;
}
html body.sppk-app-shell .page-shell.main-content .content-area .dashboard-workspace .dashboard-command-deck
:is(.dashboard-command-eyebrow, .dashboard-command-eyebrow i, .dashboard-command-live) {
    color: var(--sppk-theme-brand) !important;
    -webkit-text-fill-color: var(--sppk-theme-brand) !important;
}
html body.sppk-app-shell .page-shell.main-content .content-area .dashboard-workspace .dashboard-command-deck .dashboard-command-live {
    border-color: color-mix(in srgb, var(--sppk-theme-brand) 28%, var(--sppk-theme-line)) !important;
    background: var(--sppk-theme-brand-soft) !important;
}
html body.sppk-app-shell .page-shell.main-content .content-area .dashboard-workspace .dashboard-command-deck .dashboard-kpi-grid .kpi-card,
html body.sppk-app-shell .page-shell.main-content .content-area .dashboard-workspace .dashboard-command-deck .dashboard-kpi-grid .kpi-card:hover {
    min-height: 7.4rem !important;
    overflow: visible !important;
    border-color: var(--sppk-theme-line) !important;
    background: var(--sppk-theme-surface-soft) !important;
    color: var(--sppk-theme-text) !important;
    box-shadow: var(--sppk-theme-shadow-soft) !important;
}

/* Pusat Aktivitas memiliki selector ID yang sebelumnya mengunci hero gelap. */
html body.sppk-app-shell .page-shell.main-content .content-area #operationalActivityCenter .oac-hero {
    border-color: var(--sppk-theme-line) !important;
    background: var(--sppk-theme-surface) !important;
    background-image: none !important;
    color: var(--sppk-theme-text) !important;
}
html body.sppk-app-shell .page-shell.main-content .content-area #operationalActivityCenter .oac-hero
:is(h1, p, span, strong, small, .oac-eye) {
    color: var(--sppk-theme-text) !important;
    -webkit-text-fill-color: var(--sppk-theme-text) !important;
    text-shadow: none !important;
}
html body.sppk-app-shell .page-shell.main-content .content-area #operationalActivityCenter .oac-hero .oac-eye,
html body.sppk-app-shell .page-shell.main-content .content-area #operationalActivityCenter .oac-hero aside span {
    color: var(--sppk-theme-brand) !important;
    -webkit-text-fill-color: var(--sppk-theme-brand) !important;
}
html body.sppk-app-shell .page-shell.main-content .content-area #operationalActivityCenter .oac-hero aside {
    border-color: var(--sppk-theme-line) !important;
    background: var(--sppk-theme-surface-soft) !important;
    color: var(--sppk-theme-text) !important;
}

/* ----------------------------------------------------------------------
   ROOT AUTHORITY

   Style warisan memakai selector panjang dan !important. Root ID memberi
   sistem tema otoritas deterministik tanpa tambalan per halaman.
   ---------------------------------------------------------------------- */
html body#sppkAppShell.sppk-app-shell,
html body#sppkAppShell.sppk-app-shell .page-shell.main-content,
html body#sppkAppShell.sppk-app-shell .page-shell.main-content .content-area {
    background: var(--sppk-theme-page) !important;
    color: var(--sppk-theme-text) !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content .content-area :is(
    .card, [class$="-card"], [class*="-card "],
    .panel, [class$="-panel"], [class*="-panel "],
    .glass-panel, .content-box, .info-box, .feature-box, .metric-box, .stat-box,
    .table-responsive, .dataTables_wrapper, .accordion-item, .list-group-item,
    .modal-content, .offcanvas, .dropdown-menu, .popover
):not(.theme-mode-card):not(.alert):not(.toast):not(.access-denied-hero) {
    border-color: var(--sppk-theme-line) !important;
    background: var(--sppk-theme-surface) !important;
    background-image: none !important;
    color: var(--sppk-theme-text) !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content .content-area :is(
    [class$="-hero"], [class*="-hero "], .hero-chart, .dashboard-command-deck
):not(.theme-mode-card):not(.access-denied-hero) {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    border-color: var(--sppk-theme-line) !important;
    background: var(--sppk-theme-surface) !important;
    background-image: none !important;
    color: var(--sppk-theme-text) !important;
    box-shadow: var(--sppk-theme-shadow) !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content .content-area
:is(h1, h2, h3, h4, h5, h6, strong, b, .title, .page-title, .section-title, .card-title, .panel-title, .form-title, .table-title, .fw-bold, .fw-semibold)
:not(.btn):not(.btn *):not(button):not(button *):not(.badge):not(.badge *):not(.alert):not(.alert *):not(.hero-enterprise *) {
    color: var(--sppk-theme-heading) !important;
    -webkit-text-fill-color: var(--sppk-theme-heading) !important;
    opacity: 1 !important;
    filter: none !important;
    mix-blend-mode: normal !important;
    text-shadow: none !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content .content-area
:is(p, li, dt, dd, blockquote, time, label, legend, th, td, small, span, em)
:not(.btn):not(.btn *):not(button):not(button *):not(.badge):not(.badge *):not(.alert):not(.alert *):not(.toast):not(.toast *):not(.hero-enterprise *):not(.access-denied-hero *) {
    color: var(--sppk-theme-copy) !important;
    -webkit-text-fill-color: var(--sppk-theme-copy) !important;
    opacity: 1 !important;
    filter: none !important;
    mix-blend-mode: normal !important;
    text-shadow: none !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content .content-area
:is(.text-muted, .text-secondary, .form-text, .help-text, .caption, .meta, [class*="description"], [class*="subtitle"], [class*="detail"], [class*="note"])
:not(.alert):not(.alert *):not(.badge):not(.badge *):not(.hero-enterprise *) {
    color: var(--sppk-theme-muted) !important;
    -webkit-text-fill-color: var(--sppk-theme-muted) !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content .content-area :is(
    input:not([type="checkbox"]):not([type="radio"]), select, textarea,
    .form-control, .form-select, .input-group-text, .modern-input, .modern-select
) {
    border-color: var(--sppk-theme-line) !important;
    background-color: var(--sppk-theme-input) !important;
    color: var(--sppk-theme-heading) !important;
    -webkit-text-fill-color: var(--sppk-theme-heading) !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content .content-area
:is(.table, .dataTable) > :not(caption) > * > *,
html body#sppkAppShell.sppk-app-shell .page-shell.main-content .content-area
:is(.table, .dataTable) thead th {
    border-color: var(--sppk-theme-line-soft) !important;
    background-color: var(--sppk-theme-surface) !important;
    color: var(--sppk-theme-text) !important;
    -webkit-text-fill-color: var(--sppk-theme-text) !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content .content-area
:is(.table, .dataTable) thead th {
    border-color: var(--sppk-theme-line) !important;
    background-color: var(--sppk-theme-surface-soft) !important;
    color: var(--sppk-theme-copy) !important;
    -webkit-text-fill-color: var(--sppk-theme-copy) !important;
}

/* Warna semantik dikembalikan setelah reset root. */
html body#sppkAppShell.sppk-app-shell .page-shell.main-content .content-area
:is(.btn-primary, .btn-success, .btn-danger, .btn-dark, .bg-primary, .bg-success, .bg-danger, .bg-dark),
html body#sppkAppShell.sppk-app-shell .page-shell.main-content .content-area
:is(.btn-primary, .btn-success, .btn-danger, .btn-dark, .bg-primary, .bg-success, .bg-danger, .bg-dark) * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content .content-area
:is(.btn-warning, .bg-warning),
html body#sppkAppShell.sppk-app-shell .page-shell.main-content .content-area
:is(.btn-warning, .bg-warning) * {
    color: #342506 !important;
    -webkit-text-fill-color: #342506 !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content .content-area .theme-mode-card.dark-mode-card,
html body#sppkAppShell.sppk-app-shell .page-shell.main-content .content-area .theme-mode-card.dark-mode-card * {
    color: #f4f4f4 !important;
    -webkit-text-fill-color: #f4f4f4 !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content .content-area .hero-enterprise :is(h1, h2, h3, h4, p, span, strong, small, i) {
    color: #f4f4f4 !important;
    -webkit-text-fill-color: #f4f4f4 !important;
}

/* Dashboard memakai kelas bg-* hanya sebagai penanda aksen. Permukaan card
   sudah dinetralkan oleh tema, sehingga foreground harus kembali mengikuti
   token tema dan bukan warna kontras Bootstrap lama. */
html body#sppkAppShell.sppk-app-shell .page-shell.main-content .content-area
.dashboard-workspace .dashboard-command-deck .dashboard-kpi-grid .kpi-card,
html body#sppkAppShell.sppk-app-shell .page-shell.main-content .content-area
.dashboard-workspace .dashboard-command-deck .dashboard-kpi-grid .kpi-card :is(h2, strong, b) {
    color: var(--sppk-theme-heading) !important;
    -webkit-text-fill-color: var(--sppk-theme-heading) !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content .content-area
.dashboard-workspace .dashboard-command-deck .dashboard-kpi-grid .kpi-card :is(small, span):not(.dashboard-history-value) {
    color: var(--sppk-theme-copy) !important;
    -webkit-text-fill-color: var(--sppk-theme-copy) !important;
}

/* Hero Target Tahunan mengikuti prinsip yang sama dengan PBPH: permukaan
   terang memakai foreground gelap, permukaan gelap memakai foreground terang. */
html body#sppkAppShell.sppk-app-shell .page-shell.main-content .content-area .target-hero {
    border-color: var(--sppk-theme-line) !important;
    background: var(--sppk-theme-surface) !important;
    background-image:
        radial-gradient(circle at 92% 14%, var(--sppk-theme-brand-soft), transparent 34%),
        linear-gradient(135deg, var(--sppk-theme-surface) 0%, var(--sppk-theme-surface-soft) 100%) !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content .content-area .target-hero
:is(.hero-title, .hero-status-card h3) {
    color: var(--sppk-theme-heading) !important;
    -webkit-text-fill-color: var(--sppk-theme-heading) !important;
    text-shadow: none !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content .content-area .target-hero
:is(.hero-subtitle, .hero-status-card p) {
    color: var(--sppk-theme-copy) !important;
    -webkit-text-fill-color: var(--sppk-theme-copy) !important;
    text-shadow: none !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content .content-area .target-hero
:is(.hero-badge, .status-live) {
    border-color: color-mix(in srgb, var(--sppk-theme-brand) 30%, var(--sppk-theme-line)) !important;
    background: var(--sppk-theme-brand-soft) !important;
    color: var(--sppk-theme-brand) !important;
    -webkit-text-fill-color: var(--sppk-theme-brand) !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content .content-area .target-hero .hero-status-card {
    border-color: var(--sppk-theme-line) !important;
    background: color-mix(in srgb, var(--sppk-theme-surface) 92%, var(--sppk-theme-brand-soft)) !important;
    box-shadow: var(--sppk-theme-shadow-soft) !important;
}

/* Identitas versi dan breadcrumb harus tetap terbaca di permukaan putih. */
html body#sppkAppShell.sppk-app-shell .sidebar .logo-version,
html body#sppkAppShell.sppk-app-shell .sidebar [class*="version"] {
    color: var(--sppk-theme-muted) !important;
    -webkit-text-fill-color: var(--sppk-theme-muted) !important;
    opacity: 1 !important;
}

html body#sppkAppShell.sppk-app-shell .topbar :is(
    .breadcrumb, .breadcrumb-item, .breadcrumb-item a,
    [class*="breadcrumb"], [class*="breadcrumb"] a
) {
    color: var(--sppk-theme-copy) !important;
    -webkit-text-fill-color: var(--sppk-theme-copy) !important;
    opacity: 1 !important;
}

/* Kartu ini adalah preview, sehingga masing-masing harus mempertahankan
   identitas visualnya pada kedua mode aplikasi. */
html body#sppkAppShell.sppk-app-shell .page-shell.main-content .content-area .theme-mode-card.light-mode-card {
    border-color: #e5a900 !important;
    background: linear-gradient(135deg, #ffc247, #ffba08) !important;
    background-image: linear-gradient(135deg, #ffc247, #ffba08) !important;
    color: #172033 !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content .content-area .theme-mode-card.light-mode-card :is(h1, h2, h3, h4, p, span, strong, i) {
    color: #172033 !important;
    -webkit-text-fill-color: #172033 !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content .content-area .theme-mode-card.dark-mode-card {
    border-color: #293246 !important;
    background: #111827 !important;
    background-image: none !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content .content-area .theme-mode-card.dark-mode-card button:disabled {
    border-color: #dfe4e8 !important;
    background: #f7f9fa !important;
    color: #344054 !important;
    -webkit-text-fill-color: #344054 !important;
    opacity: 1 !important;
}

/* ----------------------------------------------------------------------
   LEGACY HERO NORMALIZATION

   Beberapa modul lama mengunci foreground putih karena dahulu selalu
   memakai gradient gelap. Setelah permukaan diseragamkan, foreground hero
   netral harus mengikuti token tema. Hero About/Regulasi tetap dikecualikan
   karena memang memakai foto/gradient gelap sebagai media visual.
   ---------------------------------------------------------------------- */
html body#sppkAppShell.sppk-app-shell .page-shell.main-content .content-area
:is(.theme-hero, .info-hero, .gallery-hero, .rekap-production-hero)
:is(h1, h2, h3, h4, h5, h6, strong, b, .hero-title, .gallery-title) {
    color: var(--sppk-theme-heading) !important;
    -webkit-text-fill-color: var(--sppk-theme-heading) !important;
    text-shadow: none !important;
    opacity: 1 !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content .content-area
:is(.theme-hero, .info-hero, .gallery-hero, .rekap-production-hero)
:is(p, small, span, .hero-subtitle, .gallery-subtitle) {
    color: var(--sppk-theme-copy) !important;
    -webkit-text-fill-color: var(--sppk-theme-copy) !important;
    text-shadow: none !important;
    opacity: 1 !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content .content-area
:is(.theme-hero, .info-hero, .gallery-hero)
:is(.hero-badge, .gallery-badge, .preview-live, .status-live) {
    color: var(--sppk-theme-brand) !important;
    -webkit-text-fill-color: var(--sppk-theme-brand) !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content .content-area
:is(.theme-hero .hero-preview-card, .info-hero .hero-status-card, .gallery-hero .gallery-live-card) {
    border-color: var(--sppk-theme-line) !important;
    background: var(--sppk-theme-surface-soft) !important;
    background-image: none !important;
    color: var(--sppk-theme-text) !important;
    box-shadow: var(--sppk-theme-shadow-soft) !important;
}

/* Rekap memakai bg-* sebagai aksen. Card tetap putih/gelap netral, sehingga
   seluruh isi harus mengikuti foreground tema. */
html body#sppkAppShell.sppk-app-shell .page-shell.main-content .content-area
.rekap-produksi-page .rekap-stat-card,
html body#sppkAppShell.sppk-app-shell .page-shell.main-content .content-area
.rekap-produksi-page .rekap-stat-card :is(h1, h2, h3, h4, h5, h6, p, span, small, strong, b) {
    color: var(--sppk-theme-heading) !important;
    -webkit-text-fill-color: var(--sppk-theme-heading) !important;
    text-shadow: none !important;
    opacity: 1 !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content .content-area
.rekap-produksi-page .rekap-stat-card :is(p, small, .text-white-50) {
    color: var(--sppk-theme-copy) !important;
    -webkit-text-fill-color: var(--sppk-theme-copy) !important;
}

/* Workspace grafik memiliki token gelap historis. Permukaan panel sekarang
   mengikuti tema global, jadi label HTML-nya juga mengikuti token global.
   Warna dataset canvas tetap ditangani recap-chart-theme.js. */
html body#sppkAppShell.sppk-app-shell .page-shell.main-content .content-area
.sppk-rekap-chart-page :is(.analytics-card, .chart-box, .sppk-chart-panel)
:is(h1, h2, h3, h4, h5, h6, strong, b) {
    color: var(--sppk-theme-heading) !important;
    -webkit-text-fill-color: var(--sppk-theme-heading) !important;
    text-shadow: none !important;
    opacity: 1 !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content .content-area
.sppk-rekap-chart-page :is(.analytics-card, .chart-box, .sppk-chart-panel)
:is(p, span, small, label) {
    color: var(--sppk-theme-copy) !important;
    -webkit-text-fill-color: var(--sppk-theme-copy) !important;
    text-shadow: none !important;
    opacity: 1 !important;
}

/* ----------------------------------------------------------------------
   DASHBOARD DARK SURFACE CONTRACT

   Dashboard lama dibangun dari beberapa generasi komponen. Sebagian memakai
   .card, sebagian memakai nama *-panel / *-item, dan sebagian mengunci
   background putih langsung di modulnya. Kontrak berikut hanya aktif pada
   route Dashboard dalam mode gelap dan memastikan seluruh permukaan informasi
   memakai lapisan gelap yang konsisten. Warna semantik tetap menjadi aksen
   pada border, ikon, progress, dan status; bukan background card terang.
   ---------------------------------------------------------------------- */
html body#sppkAppShell.sppk-app-shell.dark.sppk-route-dashboard
.page-shell.main-content .content-area :is(
    .dashboard-command-deck,
    .dashboard-active-target,
    .dashboard-section,
    .card,
    .kpi-card,
    .dashboard-management-panel,
    .dashboard-extension-card,
    .monitoring-popup-launcher,
    .dashboard-monitor-modal .modal-content
) {
    border-color: var(--sppk-theme-line) !important;
    background-color: var(--sppk-theme-surface) !important;
    background-image: none !important;
    color: var(--sppk-theme-text) !important;
    box-shadow: var(--sppk-theme-shadow-soft) !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-dashboard
.page-shell.main-content .content-area :is(
    .kpi-card,
    .dashboard-card,
    .dashboard-active-target-item,
    .quick-menu-modern,
    .monitoring-launcher-button,
    .dashboard-coverage-item,
    .dashboard-attention-item,
    .dashboard-readiness-item,
    .dashboard-activity-recap-row,
    .dashboard-weather-metric,
    .dashboard-risk-panel,
    .dashboard-document-item,
    .activity-item,
    .warning-item,
    .dashboard-definition-item
) {
    border-color: var(--sppk-theme-line) !important;
    background-color: var(--sppk-theme-surface-soft) !important;
    background-image: none !important;
    color: var(--sppk-theme-text) !important;
    box-shadow: none !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-dashboard
.page-shell.main-content .content-area :is(
    .card-header,
    .dashboard-flow-header,
    .modal-header,
    .modal-footer,
    .dashboard-extension-card-head,
    .dashboard-panel-heading
) {
    border-color: var(--sppk-theme-line) !important;
    background-color: var(--sppk-theme-surface-soft) !important;
    background-image: none !important;
    color: var(--sppk-theme-heading) !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-dashboard
.page-shell.main-content .content-area :is(
    .card-body,
    .modal-body,
    .dashboard-management-table-wrap,
    .dashboard-activity-recap-table-wrap,
    .flow-chart-stage,
    .dashboard-mini-map,
    .dashboard-empty-state,
    .dashboard-activity-filter-empty
) {
    border-color: var(--sppk-theme-line-soft) !important;
    background-color: var(--sppk-theme-surface) !important;
    background-image: none !important;
    color: var(--sppk-theme-text) !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-dashboard
.page-shell.main-content .content-area
:is(.dashboard-management-table, .dashboard-activity-recap-table) :is(th, td) {
    border-color: var(--sppk-theme-line-soft) !important;
    background-color: var(--sppk-theme-surface) !important;
    background-image: none !important;
    color: var(--sppk-theme-copy) !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-dashboard
.page-shell.main-content .content-area
:is(.dashboard-management-table, .dashboard-activity-recap-table) th {
    background-color: var(--sppk-theme-surface-soft) !important;
    color: var(--sppk-theme-heading) !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-dashboard
.page-shell.main-content .content-area
:is(
    .dashboard-command-deck,
    .dashboard-active-target,
    .dashboard-section,
    .card,
    .kpi-card,
    .dashboard-management-panel,
    .dashboard-extension-card,
    .monitoring-popup-launcher,
    .dashboard-monitor-modal .modal-content
) :is(h1, h2, h3, h4, h5, h6, strong, b) {
    color: var(--sppk-theme-heading) !important;
    -webkit-text-fill-color: var(--sppk-theme-heading) !important;
    text-shadow: none !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-dashboard
.page-shell.main-content .content-area
:is(
    .dashboard-command-deck,
    .dashboard-active-target,
    .dashboard-section,
    .card,
    .kpi-card,
    .dashboard-management-panel,
    .dashboard-extension-card,
    .monitoring-popup-launcher,
    .dashboard-monitor-modal .modal-content
) :is(p, small, label) {
    color: var(--sppk-theme-copy) !important;
    -webkit-text-fill-color: var(--sppk-theme-copy) !important;
    text-shadow: none !important;
}

/* Badge, ikon, tombol dan angka KPI tetap membawa warna fungsi masing-masing. */
html body#sppkAppShell.sppk-app-shell.dark.sppk-route-dashboard
.page-shell.main-content .content-area :is(
    .badge,
    [class*="status"],
    [class*="icon"],
    .btn,
    button,
    .dashboard-smart-progress-reading,
    .monitoring-launcher-count
) {
    -webkit-text-fill-color: currentColor;
}

/* ----------------------------------------------------------------------
   DASHBOARD COMPACT DENSITY

   Satu skala padat untuk seluruh Dashboard. Struktur, data, dan interaksi
   tetap utuh; yang diperkecil hanya ruang, tinggi card, ikon, serta angka.
   ---------------------------------------------------------------------- */
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard
.page-shell.main-content .content-area .dashboard-workspace {
    --bs-gutter-x: 0.85rem;
    --bs-gutter-y: 0.85rem;
}

/* Hero / control center utama. */
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard
.page-shell.main-content .content-area .dashboard-command-deck {
    margin-bottom: 1rem !important;
    padding: 1rem !important;
    border-radius: 0.875rem !important;
}

html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard
.page-shell.main-content .content-area .dashboard-command-header {
    gap: 0.75rem !important;
    margin-bottom: 0.75rem !important;
}

html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard
.page-shell.main-content .content-area .dashboard-command-header h1 {
    font-size: 1.25rem !important;
    line-height: 1.15 !important;
}

html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard
.page-shell.main-content .content-area .dashboard-command-header p {
    margin-top: 0.25rem !important;
    font-size: 0.7rem !important;
}

html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard
.page-shell.main-content .content-area .dashboard-command-live {
    padding: 0.4rem 0.55rem !important;
    font-size: 0.6rem !important;
}

html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard
.page-shell.main-content .content-area .dashboard-command-deck .dashboard-kpi-grid {
    --bs-gutter-x: 0.65rem !important;
    --bs-gutter-y: 0.65rem !important;
}

html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard
.page-shell.main-content .content-area .dashboard-command-deck .dashboard-kpi-grid .kpi-card {
    min-height: 5.75rem !important;
    padding: 0.75rem 0.8rem 0.65rem !important;
    border-radius: 0.65rem !important;
}

html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard
.page-shell.main-content .content-area .dashboard-command-deck .control-kpi-icon {
    width: 1.8rem !important;
    height: 1.8rem !important;
    margin: 0 1.75rem 0.35rem 0.45rem !important;
    border-radius: 0.5rem !important;
    font-size: 0.75rem !important;
}

html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard
.page-shell.main-content .content-area .dashboard-command-deck .kpi-card h2 {
    margin: 0.35rem 0 0.15rem !important;
    font-size: 1.35rem !important;
    line-height: 1.05 !important;
}

html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard
.page-shell.main-content .content-area .dashboard-command-deck .kpi-card :is(small, span) {
    font-size: 0.58rem !important;
    line-height: 1.25 !important;
}

/* Card KPI pada hero mode gelap bersifat netral. Warna semantik tidak lagi
   dipakai sebagai garis penanda maupun latar ikon; status realtime di header
   tetap dipertahankan karena merupakan informasi keadaan sistem. */
html body#sppkAppShell.sppk-app-shell.dark.sppk-route-dashboard
.page-shell.main-content .content-area .dashboard-command-deck .dashboard-kpi-grid .kpi-card,
html body#sppkAppShell.sppk-app-shell.dark.sppk-route-dashboard
.page-shell.main-content .content-area .dashboard-command-deck .dashboard-kpi-grid .kpi-card:hover {
    border-color: var(--sppk-theme-line) !important;
    background: var(--sppk-theme-surface-soft) !important;
    background-image: none !important;
    box-shadow: none !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-dashboard
.page-shell.main-content .content-area .dashboard-command-deck .dashboard-kpi-grid .kpi-card::before {
    display: none !important;
    animation: none !important;
    content: none !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-dashboard
.page-shell.main-content .content-area .dashboard-command-deck .dashboard-kpi-grid .control-kpi-icon {
    border: 1px solid var(--sppk-theme-line) !important;
    background: var(--sppk-theme-surface-raised) !important;
    background-image: none !important;
    color: var(--sppk-theme-copy) !important;
    -webkit-text-fill-color: var(--sppk-theme-copy) !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-dashboard
.page-shell.main-content .content-area .dashboard-command-deck .dashboard-kpi-grid .control-kpi-icon i {
    color: var(--sppk-theme-copy) !important;
    -webkit-text-fill-color: var(--sppk-theme-copy) !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-dashboard
.page-shell.main-content .content-area .dashboard-command-deck .dashboard-kpi-grid .dashboard-history-button,
html body#sppkAppShell.sppk-app-shell.dark.sppk-route-dashboard
.page-shell.main-content .content-area .dashboard-command-deck .dashboard-kpi-grid .dashboard-history-button:hover,
html body#sppkAppShell.sppk-app-shell.dark.sppk-route-dashboard
.page-shell.main-content .content-area .dashboard-command-deck .dashboard-kpi-grid .dashboard-history-button[aria-expanded="true"] {
    border-color: var(--sppk-theme-line) !important;
    background: var(--sppk-theme-surface-raised) !important;
    background-image: none !important;
    color: var(--sppk-theme-muted) !important;
    -webkit-text-fill-color: var(--sppk-theme-muted) !important;
    box-shadow: none !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-dashboard
.page-shell.main-content .content-area .dashboard-command-deck .dashboard-kpi-grid .dashboard-history-button i {
    color: var(--sppk-theme-muted) !important;
    -webkit-text-fill-color: var(--sppk-theme-muted) !important;
}

/* Dashboard light icon contrast. Ikon lama banyak membawa foreground putih
   dari class Bootstrap sehingga menghilang di atas permukaan pastel/putih. */
html body#sppkAppShell.sppk-app-shell:not(.dark).sppk-route-dashboard
.page-shell.main-content .content-area .dashboard-command-deck .dashboard-kpi-grid .control-kpi-icon {
    border: 1px solid #cbd8d2 !important;
    background: #edf5f1 !important;
    background-image: none !important;
    color: #185c48 !important;
    -webkit-text-fill-color: #185c48 !important;
}

html body#sppkAppShell.sppk-app-shell:not(.dark).sppk-route-dashboard
.page-shell.main-content .content-area .dashboard-command-deck .dashboard-kpi-grid > div:nth-child(2) .control-kpi-icon {
    border-color: #c7d6ec !important;
    background: #eef4fc !important;
    color: #245aa5 !important;
    -webkit-text-fill-color: #245aa5 !important;
}

html body#sppkAppShell.sppk-app-shell:not(.dark).sppk-route-dashboard
.page-shell.main-content .content-area .dashboard-command-deck .dashboard-kpi-grid > div:nth-child(3) .control-kpi-icon {
    border-color: #e5d4a9 !important;
    background: #fff7df !important;
    color: #76520a !important;
    -webkit-text-fill-color: #76520a !important;
}

html body#sppkAppShell.sppk-app-shell:not(.dark).sppk-route-dashboard
.page-shell.main-content .content-area .dashboard-command-deck .dashboard-kpi-grid > div:nth-child(4) .control-kpi-icon {
    border-color: #e8c9d0 !important;
    background: #fff1f4 !important;
    color: #a92f47 !important;
    -webkit-text-fill-color: #a92f47 !important;
}

html body#sppkAppShell.sppk-app-shell:not(.dark).sppk-route-dashboard
.page-shell.main-content .content-area .dashboard-command-deck .dashboard-kpi-grid .control-kpi-icon i {
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
    opacity: 1 !important;
}

html body#sppkAppShell.sppk-app-shell:not(.dark).sppk-route-dashboard
.page-shell.main-content .content-area .dashboard-history-button {
    border-color: #bcd2c8 !important;
    background: #eef7f3 !important;
    background-image: none !important;
    color: #12694d !important;
    -webkit-text-fill-color: #12694d !important;
    opacity: 1 !important;
}

html body#sppkAppShell.sppk-app-shell:not(.dark).sppk-route-dashboard
.page-shell.main-content .content-area .dashboard-history-button i {
    color: #12694d !important;
    -webkit-text-fill-color: #12694d !important;
    opacity: 1 !important;
}

html body#sppkAppShell.sppk-app-shell:not(.dark).sppk-route-dashboard
.page-shell.main-content .content-area :is(
    .dashboard-active-target-icon,
    .dashboard-active-target-item-icon,
    .dashboard-coverage-icon,
    .dashboard-definition-item-icon,
    .activity-icon,
    .monitoring-launcher-icon
) {
    border: 1px solid #c7d8d0 !important;
    background: #edf6f2 !important;
    background-image: none !important;
    color: #12694d !important;
    -webkit-text-fill-color: #12694d !important;
    opacity: 1 !important;
}

html body#sppkAppShell.sppk-app-shell:not(.dark).sppk-route-dashboard
.page-shell.main-content .content-area :is(
    .dashboard-active-target-icon,
    .dashboard-active-target-item-icon,
    .dashboard-coverage-icon,
    .dashboard-definition-item-icon,
    .activity-icon,
    .monitoring-launcher-icon
) i {
    color: #12694d !important;
    -webkit-text-fill-color: #12694d !important;
    opacity: 1 !important;
}

html body#sppkAppShell.sppk-app-shell:not(.dark).sppk-route-dashboard
.page-shell.main-content .content-area :is(
    .section-title i,
    .dashboard-command-eyebrow i,
    .dashboard-running-label i,
    .dashboard-running-group i,
    .dashboard-active-target-status i,
    .dashboard-management-source i,
    .dashboard-extension-heading i,
    .dashboard-extension-card-head i
) {
    color: #185c48 !important;
    -webkit-text-fill-color: #185c48 !important;
    opacity: 1 !important;
}

/* Target aktif dan rincian target. */
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard
.page-shell.main-content .content-area .dashboard-active-target {
    margin-bottom: 0.9rem !important;
    padding: 0.75rem !important;
    border-radius: 0.85rem !important;
}

html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard
.page-shell.main-content .content-area .dashboard-active-target-icon {
    width: 2rem !important;
    height: 2rem !important;
    font-size: 0.85rem !important;
}

html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard
.page-shell.main-content .content-area .dashboard-active-target-heading h2 {
    font-size: 1.15rem !important;
}

html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard
.page-shell.main-content .content-area :is(.dashboard-active-target-status, .dashboard-active-target-toggle) {
    min-height: 2rem !important;
    padding: 0.35rem 0.55rem !important;
    font-size: 0.62rem !important;
}

html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard
.page-shell.main-content .content-area .dashboard-active-target-content {
    padding-top: 0.65rem !important;
}

html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard
.page-shell.main-content .content-area .dashboard-active-target-grid {
    gap: 0.6rem !important;
}

html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard
.page-shell.main-content .content-area .dashboard-active-target-item {
    min-height: 4.25rem !important;
    gap: 0.55rem !important;
    padding: 0.6rem !important;
}

html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard
.page-shell.main-content .content-area .dashboard-active-target-item strong {
    font-size: 1.05rem !important;
}

/* Monitoring Produksi. */
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard
.page-shell.main-content .content-area .dashboard-metrics-section {
    margin-block: 0.85rem !important;
}

html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard
.page-shell.main-content .content-area .dashboard-metrics-section .row {
    --bs-gutter-x: 0.75rem !important;
    --bs-gutter-y: 0.75rem !important;
}

html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard
.page-shell.main-content .content-area .dashboard-metrics-section .dashboard-card {
    min-height: 6.25rem !important;
    border-radius: 0.75rem !important;
}

html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard
.page-shell.main-content .content-area .dashboard-metrics-section .dashboard-card .card-body {
    min-height: 6.15rem !important;
    padding: 0.6rem 0.7rem 0.5rem !important;
}

html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard
.page-shell.main-content .content-area .dashboard-metrics-section .dashboard-card h2 {
    margin: 0.2rem 0 0.35rem !important;
    font-size: 1.2rem !important;
    line-height: 1 !important;
}

html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard
.page-shell.main-content .content-area .dashboard-metrics-section .dashboard-card :is(h6, small) {
    font-size: 0.55rem !important;
}

html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard
.page-shell.main-content .content-area .dashboard-metrics-section .dashboard-card small {
    padding: 0.25rem 0.4rem !important;
}

html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard
.page-shell.main-content .content-area .dashboard-metrics-section .dashboard-card .dashboard-history-button {
    top: 0.45rem !important;
    right: 0.45rem !important;
    width: 1.45rem !important;
    height: 1.45rem !important;
}

/* Isi Monitoring Produksi memakai empat baris tetap agar judul, nilai,
   keterangan, status, dan progress tidak saling bertabrakan pada card padat. */
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard
.page-shell.main-content .content-area .dashboard-metrics-section .dashboard-card {
    min-height: 7rem !important;
}

html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard
.page-shell.main-content .content-area .dashboard-metrics-section .dashboard-card .card-body {
    display: grid !important;
    grid-template-rows: auto auto auto minmax(1.35rem, auto) !important;
    align-content: start !important;
    gap: 0.2rem !important;
    min-height: 6.9rem !important;
    padding: 0.65rem 0.7rem 0.55rem !important;
}

html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard
.page-shell.main-content .content-area .dashboard-metrics-section .dashboard-card h6 {
    min-width: 0 !important;
    min-height: 0 !important;
    padding-right: 1.8rem !important;
    overflow: hidden !important;
    font-size: 0.56rem !important;
    line-height: 1.2 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard
.page-shell.main-content .content-area .dashboard-metrics-section .dashboard-card h2 {
    min-width: 0 !important;
    margin: 0.1rem 0 0.15rem !important;
    overflow: hidden !important;
    font-size: 1.15rem !important;
    line-height: 1.05 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard
.page-shell.main-content .content-area .dashboard-metrics-section .dashboard-card > .card-body > small {
    display: inline-flex !important;
    align-items: center !important;
    align-self: start !important;
    justify-self: start !important;
    gap: 0.35rem !important;
    width: auto !important;
    max-width: 100% !important;
    min-height: 1.35rem !important;
    margin: 0 !important;
    padding: 0.25rem 0.4rem !important;
    overflow: hidden !important;
    font-size: 0.55rem !important;
    line-height: 1.15 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard
.page-shell.main-content .content-area .dashboard-metrics-section .dashboard-card > .card-body > small::after {
    flex: 0 0 auto !important;
    margin-left: 0 !important;
    padding-left: 0.35rem !important;
    font-size: 0.47rem !important;
    line-height: 1 !important;
}

html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard
.page-shell.main-content .content-area .dashboard-metrics-section .dashboard-smart-progress {
    position: relative !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    align-self: end !important;
    width: 100% !important;
    margin-top: 0.05rem !important;
    row-gap: 0.22rem !important;
}

html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard
.page-shell.main-content .content-area .dashboard-metrics-section .dashboard-smart-progress-meta {
    gap: 0.5rem !important;
    min-height: 0.9rem !important;
}

html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard
.page-shell.main-content .content-area .dashboard-metrics-section :is(
    .dashboard-smart-progress-status,
    .dashboard-smart-progress-reading
) {
    font-size: 0.48rem !important;
    line-height: 1 !important;
}

html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard
.page-shell.main-content .content-area .dashboard-metrics-section .dashboard-smart-progress-reading {
    padding: 0.18rem 0.35rem !important;
}

html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard
.page-shell.main-content .content-area .dashboard-metrics-section .dashboard-smart-progress-track {
    height: 0.32rem !important;
}

/* Panel grafik, monitoring, manajemen, dan ekstensi bagian bawah. */
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard
.page-shell.main-content .content-area :is(
    .dashboard-flow-panel,
    .monitoring-popup-launcher,
    .dashboard-management-panel,
    .dashboard-extension-card
) {
    border-radius: 0.8rem !important;
}

html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard
.page-shell.main-content .content-area :is(
    .dashboard-flow-panel .card-header,
    .dashboard-panel-heading
) {
    gap: 0.65rem !important;
    padding: 0.75rem 0.85rem !important;
    margin-bottom: 0 !important;
}

html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard
.page-shell.main-content .content-area .dashboard-extension-card-head {
    gap: 0.65rem !important;
    margin-bottom: 0.65rem !important;
    padding: 0 !important;
}

html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard
.page-shell.main-content .content-area .dashboard-flow-panel .card-body {
    padding: 0.75rem !important;
}

html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard
.page-shell.main-content .content-area .dashboard-flow-panel .flow-chart-stage {
    height: 22rem !important;
    min-height: 22rem !important;
}

html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard
.page-shell.main-content .content-area :is(.dashboard-management-grid, .dashboard-management-main, .dashboard-management-side) {
    gap: 0.75rem !important;
}

html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard
.page-shell.main-content .content-area .dashboard-panel-heading h3 {
    font-size: 0.85rem !important;
}

html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard
.page-shell.main-content .content-area .dashboard-coverage-grid {
    gap: 0.55rem !important;
    padding: 0.7rem !important;
}

html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard
.page-shell.main-content .content-area .dashboard-coverage-item {
    min-height: 4.5rem !important;
    gap: 0.5rem !important;
    padding: 0.55rem !important;
}

html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard
.page-shell.main-content .content-area .dashboard-coverage-item strong {
    font-size: 1.05rem !important;
}

html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard
.page-shell.main-content .content-area .dashboard-extension-shell {
    margin-top: 0.9rem !important;
    padding: 0.85rem !important;
    border-radius: 0.9rem !important;
}

html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard
.page-shell.main-content .content-area .dashboard-extension-heading {
    margin-bottom: 0.75rem !important;
    padding: 0.8rem 0.9rem !important;
}

html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard
.page-shell.main-content .content-area :is(.dashboard-extension-grid, .dashboard-extension-grid-secondary) {
    gap: 0.75rem !important;
    margin-top: 0.75rem !important;
}

html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard
.page-shell.main-content .content-area .dashboard-extension-card {
    padding: 0.75rem !important;
}

html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard
.page-shell.main-content .content-area :is(.dashboard-mini-map, .dashboard-mini-map svg) {
    height: 13rem !important;
    min-height: 13rem !important;
}

html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard
.page-shell.main-content .content-area .dashboard-weather-status {
    min-height: 6rem !important;
}

/* ----------------------------------------------------------------------
   GLOBAL READABLE TYPE FLOOR

   Browser desktop umumnya memakai 16px sebagai ukuran dasar. SPPK memakai
   skala sedikit lebih padat (15/13/12/11), tetapi tidak mengizinkan modul
   lama menurunkan teks informatif hingga 8-10px. Sidebar sengaja dikecualikan
   karena memiliki skala navigasi sendiri yang sudah disepakati.
   ---------------------------------------------------------------------- */
html body#sppkAppShell.sppk-app-shell {
    font-size: 15px !important;
}

html body#sppkAppShell.sppk-app-shell
.page-shell.main-content .content-area :is(
    p, li, dt, dd, blockquote,
    .description, .subtitle, .copy,
    [class*="description"], [class*="subtitle"], [class*="-copy"]
) {
    font-size: max(13px, 0.8125rem) !important;
    line-height: 1.5 !important;
}

html body#sppkAppShell.sppk-app-shell
.page-shell.main-content .content-area :is(
    label, .form-label, .form-check-label,
    input, select, textarea,
    .form-control, .form-select, .modern-input, .modern-select
) {
    font-size: max(12px, 0.75rem) !important;
    line-height: 1.4 !important;
}

html body#sppkAppShell.sppk-app-shell
.page-shell.main-content .content-area :is(
    small, .small, .form-text, .help-text,
    [class*="kicker"], [class*="eyebrow"],
    [class$="-meta"], [class*="-meta "],
    [class$="-label"], [class*="-label "]
) {
    font-size: max(11px, 0.6875rem) !important;
    line-height: 1.35 !important;
}

html body#sppkAppShell.sppk-app-shell
.page-shell.main-content .content-area :is(.btn, button, [role="button"]) {
    font-size: max(11.5px, 0.71875rem) !important;
    line-height: 1.3 !important;
}

html body#sppkAppShell.sppk-app-shell
.page-shell.main-content .content-area :is(.table, .dataTable, table) th {
    font-size: max(11px, 0.6875rem) !important;
    line-height: 1.35 !important;
}

html body#sppkAppShell.sppk-app-shell
.page-shell.main-content .content-area :is(.table, .dataTable, table) td {
    font-size: max(12px, 0.75rem) !important;
    line-height: 1.45 !important;
}

/* Nilai dashboard tetap ringkas tetapi tidak boleh memakai label mikro. */
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard
.page-shell.main-content .content-area :is(
    .dashboard-command-deck .kpi-card small,
    .dashboard-command-deck .kpi-card > span,
    .dashboard-metrics-section .dashboard-card h6,
    .dashboard-metrics-section .dashboard-card > .card-body > small,
    .dashboard-smart-progress-status,
    .dashboard-smart-progress-reading
) {
    font-size: 11px !important;
    line-height: 1.25 !important;
}

html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard
.page-shell.main-content .content-area .dashboard-metrics-section .dashboard-card {
    min-height: 7.65rem !important;
}

html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard
.page-shell.main-content .content-area .dashboard-metrics-section .dashboard-card .card-body {
    grid-template-rows: auto auto auto minmax(1.75rem, auto) !important;
    min-height: 7.55rem !important;
}

@media (max-width: 767.98px) {
    html body.sppk-app-shell .main-content .content-area :is(
        [class$="-hero"], [class*="-hero "], .hero-chart, .dashboard-command-deck
    ) {
        align-items: stretch;
        flex-direction: column;
        height: auto !important;
        min-height: 0 !important;
    }
    html body.sppk-app-shell .main-content .content-area :is(
        [class$="-hero"], [class*="-hero "], .hero-chart, .dashboard-command-deck
    ) :is(.card, [class$="-card"], [class*="-card "], aside, [class*="state"], [class*="status"]) {
        width: 100%;
        max-width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.sppk-app-shell *,
    body.sppk-app-shell *::before,
    body.sppk-app-shell *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* ----------------------------------------------------------------------
   INPUT FORMS — DARK SURFACES

   Form lama memiliki token navy sendiri. Sambungkan token tersebut ke tema
   aktif agar kotak operator, header, dan footer memakai permukaan yang sama.
   ---------------------------------------------------------------------- */
html body#sppkAppShell.sppk-app-shell.dark
.page-shell.main-content .content-area .sppk-input-workspace {
    --sppk-input-surface: var(--sppk-theme-surface) !important;
    --sppk-input-surface-soft: var(--sppk-theme-surface-soft) !important;
    --sppk-input-field: var(--sppk-theme-input) !important;
    --sppk-input-heading: var(--sppk-theme-heading) !important;
    --sppk-input-copy: var(--sppk-theme-copy) !important;
    --sppk-input-label: var(--sppk-theme-copy) !important;
    --sppk-input-line: var(--sppk-theme-line) !important;
    --sppk-input-muted: var(--sppk-theme-muted) !important;
}

html body#sppkAppShell.sppk-app-shell.dark
.page-shell.main-content .content-area .sppk-input-workspace
:is(.custom-card, .sppk-form-shell, .card-body) {
    border-color: var(--sppk-theme-line) !important;
    background: var(--sppk-theme-surface) !important;
    background-image: none !important;
    color: var(--sppk-theme-text) !important;
}

html body#sppkAppShell.sppk-app-shell.dark
.page-shell.main-content .content-area .sppk-input-workspace
:is(.unit-box, .card-header, .section-header, .custom-header, .card-footer, .custom-footer) {
    border-color: var(--sppk-theme-line) !important;
    background: var(--sppk-theme-surface-soft) !important;
    background-image: none !important;
    color: var(--sppk-theme-text) !important;
}

html body#sppkAppShell.sppk-app-shell.dark
.page-shell.main-content .content-area .sppk-input-workspace .unit-box:hover,
html body#sppkAppShell.sppk-app-shell.dark
.page-shell.main-content .content-area .sppk-input-workspace .unit-box:focus-within {
    border-color: var(--sppk-theme-brand) !important;
    background: var(--sppk-theme-surface-raised) !important;
}

html body#sppkAppShell.sppk-app-shell.dark
.page-shell.main-content .content-area .sppk-input-workspace
:is(.card-header, .section-header, .custom-header) :is(h1, h2, h3, h4, h5, h6, span, strong, i) {
    color: var(--sppk-theme-heading) !important;
    -webkit-text-fill-color: var(--sppk-theme-heading) !important;
}

html body#sppkAppShell.sppk-app-shell.dark
.page-shell.main-content .content-area .sppk-input-workspace
:is(.card-header, .section-header, .custom-header) i {
    color: var(--sppk-theme-brand) !important;
    -webkit-text-fill-color: var(--sppk-theme-brand) !important;
}

html body#sppkAppShell.sppk-app-shell.dark
.page-shell.main-content .content-area .sppk-input-workspace
.sppk-input-table :is(thead, thead tr) {
    background: var(--sppk-theme-surface-soft) !important;
    color: var(--sppk-theme-copy) !important;
}

/* ----------------------------------------------------------------------
   DASHBOARD — DARK ICON CONTRAST

   Pasangkan simbol dengan latar gelapnya. Background pastel dan foreground
   putih dari modul lama tidak cocok ketika card mengikuti tema gelap pusat.
   Scope route juga mencakup dialog dashboard yang dipindah ke body oleh UI.
   ---------------------------------------------------------------------- */
html body#sppkAppShell.sppk-app-shell.dark.sppk-route-dashboard {
    --sppk-dashboard-icon-green: #79d9ae;
    --sppk-dashboard-icon-green-bg: #1d332a;
    --sppk-dashboard-icon-blue: #93bce8;
    --sppk-dashboard-icon-blue-bg: #203047;
    --sppk-dashboard-icon-amber: #e4bd79;
    --sppk-dashboard-icon-amber-bg: #3b3020;
    --sppk-dashboard-icon-rose: #e2a0ad;
    --sppk-dashboard-icon-rose-bg: #3a252c;
    --sppk-dashboard-icon-violet: #b6a4df;
    --sppk-dashboard-icon-violet-bg: #30283e;
    --sppk-dashboard-icon-cyan: #8ec9d2;
    --sppk-dashboard-icon-cyan-bg: #20363b;
    --sppk-dashboard-icon-slate: #bcc6d3;
    --sppk-dashboard-icon-slate-bg: #29313b;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-dashboard :is(
    .dashboard-active-target-icon, .dashboard-active-target-item-icon,
    .dashboard-coverage-icon, .dashboard-definition-symbol,
    .dashboard-definition-item-icon, .dashboard-history-icon,
    .monitoring-launcher-icon, .analytic-icon, .warning-icon, .activity-icon,
    .dashboard-document-icon, .dashboard-insight-icon, .dashboard-weather-symbol,
    .welcome-security-icon, .export-confirm-symbol, .export-confirm-summary-icon,
    .dashboard-attention-item > span
) {
    --sppk-dashboard-icon: var(--sppk-dashboard-icon-green);
    --sppk-dashboard-icon-bg: var(--sppk-dashboard-icon-green-bg);
    border-color: var(--sppk-theme-line) !important;
    background: var(--sppk-dashboard-icon-bg) !important;
    background-image: none !important;
    color: var(--sppk-dashboard-icon) !important;
    -webkit-text-fill-color: currentColor !important;
    box-shadow: none !important;
    opacity: 1 !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-dashboard :is(
    .dashboard-active-target-item.is-blue .dashboard-active-target-item-icon,
    .dashboard-coverage-item.is-blue .dashboard-coverage-icon,
    .dashboard-definition-item.is-formula .dashboard-definition-item-icon,
    .dashboard-attention-item.is-info > span,
    .analytic-icon.bg-primary, .warning-icon.bg-primary
) {
    --sppk-dashboard-icon: var(--sppk-dashboard-icon-blue);
    --sppk-dashboard-icon-bg: var(--sppk-dashboard-icon-blue-bg);
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-dashboard :is(
    .dashboard-active-target-item.is-amber .dashboard-active-target-item-icon,
    .dashboard-coverage-item.is-amber .dashboard-coverage-icon,
    .dashboard-definition-item.is-benefit .dashboard-definition-item-icon,
    .monitoring-launcher-button.warning .monitoring-launcher-icon,
    .dashboard-attention-item.is-warning > span,
    .dashboard-weather-symbol, .analytic-icon.bg-warning, .warning-icon.bg-warning
) {
    --sppk-dashboard-icon: var(--sppk-dashboard-icon-amber);
    --sppk-dashboard-icon-bg: var(--sppk-dashboard-icon-amber-bg);
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-dashboard :is(
    .dashboard-active-target-item.is-rose .dashboard-active-target-item-icon,
    .dashboard-coverage-item.is-rose .dashboard-coverage-icon,
    .dashboard-coverage-item.is-red .dashboard-coverage-icon,
    .dashboard-definition-item.is-percentage .dashboard-definition-item-icon,
    .dashboard-attention-item.is-danger > span,
    .export-confirm-symbol, .analytic-icon.bg-danger, .warning-icon.bg-danger
) {
    --sppk-dashboard-icon: var(--sppk-dashboard-icon-rose);
    --sppk-dashboard-icon-bg: var(--sppk-dashboard-icon-rose-bg);
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-dashboard :is(
    .dashboard-active-target-item.is-violet .dashboard-active-target-item-icon,
    .dashboard-coverage-item.is-violet .dashboard-coverage-icon,
    .dashboard-definition-item.is-interpretation .dashboard-definition-item-icon,
    .dashboard-document-icon, .dashboard-insight-icon
) {
    --sppk-dashboard-icon: var(--sppk-dashboard-icon-violet);
    --sppk-dashboard-icon-bg: var(--sppk-dashboard-icon-violet-bg);
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-dashboard :is(
    .dashboard-coverage-item.is-cyan .dashboard-coverage-icon,
    .analytic-icon.bg-info, .warning-icon.bg-info
) {
    --sppk-dashboard-icon: var(--sppk-dashboard-icon-cyan);
    --sppk-dashboard-icon-bg: var(--sppk-dashboard-icon-cyan-bg);
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-dashboard :is(
    .dashboard-coverage-item.is-slate .dashboard-coverage-icon,
    .monitoring-launcher-button.activity .monitoring-launcher-icon,
    .analytic-icon.bg-secondary, .warning-icon.bg-secondary
) {
    --sppk-dashboard-icon: var(--sppk-dashboard-icon-slate);
    --sppk-dashboard-icon-bg: var(--sppk-dashboard-icon-slate-bg);
}

/* Variasi yang dibuat ulang oleh JavaScript memakai pasangan warna yang sama. */
html body#sppkAppShell.sppk-app-shell.dark.sppk-route-dashboard :is(
    .dashboard-document-item.is-spreadsheet .dashboard-document-icon,
    .dashboard-insight-item.is-positive .dashboard-insight-icon
) {
    --sppk-dashboard-icon: var(--sppk-dashboard-icon-green);
    --sppk-dashboard-icon-bg: var(--sppk-dashboard-icon-green-bg);
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-dashboard
.dashboard-insight-item.is-warning .dashboard-insight-icon {
    --sppk-dashboard-icon: var(--sppk-dashboard-icon-amber);
    --sppk-dashboard-icon-bg: var(--sppk-dashboard-icon-amber-bg);
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-dashboard :is(
    .dashboard-active-target-icon, .dashboard-active-target-item-icon,
    .dashboard-coverage-icon, .dashboard-definition-symbol,
    .dashboard-definition-item-icon, .dashboard-history-icon,
    .monitoring-launcher-icon, .analytic-icon, .warning-icon, .activity-icon,
    .dashboard-document-icon, .dashboard-insight-icon, .dashboard-weather-symbol,
    .welcome-security-icon, .export-confirm-symbol, .export-confirm-summary-icon,
    .dashboard-attention-item > span
) i {
    color: var(--sppk-dashboard-icon) !important;
    -webkit-text-fill-color: currentColor !important;
    opacity: 1 !important;
}

/* Reset bg-* pada shell juga mewarnai seluruh turunannya; kalahkan aturan itu
   khusus pada ikon monitoring, tanpa mengubah warna tombol Bootstrap. */
html body#sppkAppShell.sppk-app-shell.dark.sppk-route-dashboard
.page-shell.main-content .content-area
:is(.analytic-icon, .warning-icon, .analytic-icon i, .warning-icon i) {
    color: var(--sppk-dashboard-icon) !important;
    -webkit-text-fill-color: currentColor !important;
}

/* Ikon inline mengikuti foreground kontrol, bukan putih/pastel bawaan. */
html body#sppkAppShell.sppk-app-shell.dark.sppk-route-dashboard
.page-shell.main-content .content-area :is(
    .section-title, .quick-menu-modern, .dashboard-running-label,
    .dashboard-running-group, .dashboard-management-eyebrow,
    .dashboard-management-source, .dashboard-extension-eyebrow,
    .dashboard-extension-kicker, .dashboard-extension-footnote,
    .dashboard-location-guidance, .dashboard-readiness-note,
    .dashboard-activity-recap-note, .dashboard-mini-map-empty,
    .dashboard-empty-state, .dashboard-activity-recap-empty,
    .dashboard-attention-clear, .monitor-modal-empty,
    .dashboard-table-empty, .dashboard-weather-metrics
) i {
    color: var(--sppk-theme-brand) !important;
    -webkit-text-fill-color: currentColor !important;
    opacity: 1 !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-dashboard :is(
    .dashboard-icon-button, .dashboard-secondary-button,
    .dashboard-extension-link, .dashboard-document-actions a
) {
    border-color: var(--sppk-theme-line) !important;
    background: var(--sppk-theme-surface-raised) !important;
    background-image: none !important;
    color: var(--sppk-theme-link) !important;
    -webkit-text-fill-color: currentColor !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-dashboard
.dashboard-document-delete {
    border-color: #63404b !important;
    background: var(--sppk-dashboard-icon-rose-bg) !important;
    color: var(--sppk-dashboard-icon-rose) !important;
    -webkit-text-fill-color: currentColor !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-dashboard :is(
    .dashboard-icon-button, .dashboard-secondary-button,
    .dashboard-extension-link, .dashboard-document-actions a,
    .dashboard-document-delete, .dashboard-primary-button,
    .dashboard-active-target-toggle, .dashboard-active-target-status,
    .dashboard-activity-filter-button, .dashboard-flow-filter
) i {
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
    opacity: 1 !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-dashboard :is(
    .dashboard-definition-note, .dashboard-form-note,
    .dashboard-definition-eyebrow, .export-confirm-eyebrow,
    .export-confirm-recommendation-title, .export-confirm-security
) i {
    color: var(--sppk-theme-brand) !important;
    -webkit-text-fill-color: currentColor !important;
}

/* Bootstrap close adalah gambar, sehingga cukup normalkan latar dan filter. */
html body#sppkAppShell.sppk-app-shell.dark.sppk-route-dashboard
:is(.dashboard-monitor-modal, .dashboard-extension-modal, #dashboardInfoModal, #exportPdfModal) .btn-close {
    background-color: transparent !important;
    filter: invert(0.8) !important;
    opacity: 1 !important;
}

/* ----------------------------------------------------------------------
   DASHBOARD — HISTORY POPOVER DARK SURFACES

   Popup histori masih mempunyai palet hijau lama di dashboard_realtime.php.
   Pakai token netral pusat untuk semua lapisannya; warna naik/turun cukup
   pada teks dan simbol. Scope tidak bergantung pada posisi popup di DOM.
   ---------------------------------------------------------------------- */
html body#sppkAppShell.sppk-app-shell.dark.sppk-route-dashboard
#dashboardHistoryPopover {
    border-color: var(--sppk-theme-line) !important;
    background: var(--sppk-theme-surface) !important;
    background-image: none !important;
    color: var(--sppk-theme-text) !important;
    -webkit-text-fill-color: currentColor !important;
    box-shadow: var(--sppk-theme-shadow) !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-dashboard
#dashboardHistoryPopover .dashboard-history-comparison {
    border-color: var(--sppk-theme-line) !important;
    background: var(--sppk-theme-surface-soft) !important;
    background-image: none !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-dashboard
#dashboardHistoryPopover :is(.dashboard-history-icon, .dashboard-history-close, .dashboard-history-change) {
    background: var(--sppk-theme-surface-raised) !important;
    background-image: none !important;
    color: var(--sppk-theme-copy) !important;
    -webkit-text-fill-color: currentColor !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-dashboard
#dashboardHistoryPopover .dashboard-history-close:is(:hover, :focus-visible) {
    background: var(--sppk-theme-line) !important;
    color: var(--sppk-theme-heading) !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-dashboard
#dashboardHistoryPopover .dashboard-history-close:focus-visible {
    outline: 2px solid var(--sppk-theme-muted);
    outline-offset: 2px;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-dashboard
#dashboardHistoryPopover :is(.dashboard-history-popover-head strong, .dashboard-history-comparison strong) {
    color: var(--sppk-theme-heading) !important;
    -webkit-text-fill-color: currentColor !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-dashboard
#dashboardHistoryPopover :is(.dashboard-history-popover-head small, .dashboard-history-comparison span, .dashboard-history-comparison > i) {
    color: var(--sppk-theme-muted) !important;
    -webkit-text-fill-color: currentColor !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-dashboard
#dashboardHistoryPopover > p {
    color: var(--sppk-theme-copy) !important;
    -webkit-text-fill-color: currentColor !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-dashboard
#dashboardHistoryPopover .dashboard-history-change.is-up {
    color: var(--sppk-dashboard-icon-green) !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-dashboard
#dashboardHistoryPopover .dashboard-history-change.is-down {
    color: var(--sppk-dashboard-icon-rose) !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-dashboard
#dashboardHistoryPopover :is(.dashboard-history-icon, .dashboard-history-close, .dashboard-history-change) :is(i, span, strong) {
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
}

/* Tombol pembuka pada Monitoring Produksi mengikuti ikon histori KPI atas. */
html body#sppkAppShell.sppk-app-shell.dark.sppk-route-dashboard
.page-shell.main-content .content-area .dashboard-workspace
.dashboard-metrics-section .dashboard-card .dashboard-history-button {
    border-color: var(--sppk-theme-line) !important;
    background: var(--sppk-theme-surface-raised) !important;
    background-image: none !important;
    color: var(--sppk-theme-copy) !important;
    -webkit-text-fill-color: currentColor !important;
    box-shadow: none !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-dashboard
.page-shell.main-content .content-area .dashboard-workspace
.dashboard-metrics-section .dashboard-card .dashboard-history-button i {
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
}

/* ----------------------------------------------------------------------
   DASHBOARD — CARD DETAIL MODAL DARK SURFACES

   Modal dipindahkan langsung ke body saat dashboard siap. Scope ID modal
   tetap menjangkau header, isi, serta kartu definisinya setelah dipindah.
   ---------------------------------------------------------------------- */
html body#sppkAppShell.sppk-app-shell.dark.sppk-route-dashboard
#dashboardInfoModal .dashboard-definition-content {
    border-color: var(--sppk-theme-line) !important;
    background: var(--sppk-theme-surface) !important;
    background-image: none !important;
    color: var(--sppk-theme-text) !important;
    -webkit-text-fill-color: currentColor !important;
    box-shadow: var(--sppk-theme-shadow) !important;
}

/* Hilangkan pola kisi dan garis orbit dekoratif dari palet lama. */
html body#sppkAppShell.sppk-app-shell.dark.sppk-route-dashboard
#dashboardInfoModal .dashboard-definition-content::before,
html body#sppkAppShell.sppk-app-shell.dark.sppk-route-dashboard
#dashboardInfoModal .dashboard-definition-header::after {
    content: none !important;
    background: none !important;
    animation: none !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-dashboard
#dashboardInfoModal :is(.dashboard-definition-header, .dashboard-definition-item) {
    border-color: var(--sppk-theme-line) !important;
    background: var(--sppk-theme-surface-soft) !important;
    background-image: none !important;
    color: var(--sppk-theme-text) !important;
    box-shadow: none !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-dashboard
#dashboardInfoModal .dashboard-definition-body {
    background: var(--sppk-theme-surface) !important;
    background-image: none !important;
    color: var(--sppk-theme-text) !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-dashboard
#dashboardInfoModal :is(.modal-title, .dashboard-definition-item h6) {
    color: var(--sppk-theme-heading) !important;
    -webkit-text-fill-color: currentColor !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-dashboard
#dashboardInfoModal :is(.dashboard-definition-intro, .dashboard-definition-item p) {
    color: var(--sppk-theme-copy) !important;
    -webkit-text-fill-color: currentColor !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-dashboard
#dashboardInfoModal .dashboard-definition-item .dashboard-definition-formula {
    color: var(--sppk-theme-text) !important;
    -webkit-text-fill-color: currentColor !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-dashboard
#dashboardInfoModal .dashboard-definition-eyebrow {
    color: var(--sppk-theme-muted) !important;
    -webkit-text-fill-color: currentColor !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-dashboard
#dashboardInfoModal :is(.dashboard-definition-symbol, .dashboard-definition-note) {
    border-color: var(--sppk-theme-line) !important;
    background: var(--sppk-theme-surface-raised) !important;
    background-image: none !important;
    color: var(--sppk-theme-copy) !important;
    -webkit-text-fill-color: currentColor !important;
    box-shadow: none !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-dashboard
#dashboardInfoModal :is(.dashboard-definition-symbol i, .dashboard-definition-eyebrow i, .dashboard-definition-note span) {
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-dashboard
#dashboardInfoModal .dashboard-definition-note i {
    color: var(--sppk-theme-brand) !important;
    -webkit-text-fill-color: currentColor !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-dashboard
#dashboardInfoModal .dashboard-definition-close {
    border-color: var(--sppk-theme-line) !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-dashboard
#dashboardInfoModal .dashboard-definition-close:focus-visible {
    outline: 2px solid var(--sppk-theme-muted) !important;
    outline-offset: 2px;
}

/* Backdrop popup ini juga netral, agar dashboard tidak mendapat tint hijau. */
html body#sppkAppShell.sppk-app-shell.dark.sppk-route-dashboard:has(#dashboardInfoModal.show)
.modal-backdrop {
    background-color: #000000 !important;
    background-image: none !important;
}

/* ----------------------------------------------------------------------
   DASHBOARD — COMPLETE NEUTRAL DARK PALETTE V7

   Seluruh permukaan memakai tiga lapisan abu-abu pusat. Warna semantik
   dibawa teks/ikon/data, bukan fill hijau/navy pada panel atau tombol.
   Wilayah popup dicakup eksplisit karena dipindahkan langsung ke body.
   Grafik, fill progres, warna poligon peta, sidebar dan ukurannya tetap utuh.
   ---------------------------------------------------------------------- */
html body#sppkAppShell.sppk-app-shell.dark.sppk-route-dashboard {
    --sppk-dashboard-icon-green-bg: var(--sppk-theme-surface-raised);
    --sppk-dashboard-icon-blue-bg: var(--sppk-theme-surface-raised);
    --sppk-dashboard-icon-amber-bg: var(--sppk-theme-surface-raised);
    --sppk-dashboard-icon-rose-bg: var(--sppk-theme-surface-raised);
    --sppk-dashboard-icon-violet-bg: var(--sppk-theme-surface-raised);
    --sppk-dashboard-icon-cyan-bg: var(--sppk-theme-surface-raised);
    --sppk-dashboard-icon-slate-bg: var(--sppk-theme-surface-raised);
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-dashboard
:is(.dashboard-workspace, .dashboard-extension-shell, #welcomeModal) {
    --dashboard-page-bg: var(--sppk-theme-page) !important;
    --intel-ink: var(--sppk-theme-heading) !important;
    --intel-muted: var(--sppk-theme-copy) !important;
    --intel-line: var(--sppk-theme-line) !important;
    --intel-green-soft: var(--sppk-theme-surface-raised) !important;
    --welcome-ink: var(--sppk-theme-heading) !important;
    --welcome-copy: var(--sppk-theme-copy) !important;
    --welcome-line: var(--sppk-theme-line) !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-dashboard
:is(
.page-shell.main-content .content-area,
    #dashboardInfoModal, #exportPdfModal, #welcomeModal, #activityCenter,
    #smartAnalyticModal, #warningMonitoringModal, #liveActivityModal,
    #dashboardDocumentModal, #dashboardWeatherLocationModal
)
:is(
    .dashboard-command-deck,
    .dashboard-active-target,
    .dashboard-section,
    .card,
    .dashboard-management-panel,
    .dashboard-management-header,
    .dashboard-extension-shell,
    .dashboard-extension-card,
    .monitoring-popup-launcher,
    .dashboard-flow-panel,
    .flow-chart-stage,
    .dashboard-context-bar,
    .dashboard-empty-state,
    .dashboard-mini-map,
    .dashboard-activity-recap-empty,
    .dashboard-activity-recap-table-wrap,
    .dashboard-management-table-wrap,
    .card-body,
    .modal-content,
    .modal-body,
    .offcanvas-body,
    .welcome-modal-content
) {
    border-color: var(--sppk-theme-line) !important;
    background: var(--sppk-theme-surface) !important;
    background-image: none !important;
    color: var(--sppk-theme-text) !important;
    box-shadow: var(--sppk-theme-shadow-soft) !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-dashboard
:is(#activityCenter, .dashboard-workspace-toast) {
    border-color: var(--sppk-theme-line) !important;
    background: var(--sppk-theme-surface) !important;
    background-image: none !important;
    color: var(--sppk-theme-text) !important;
    box-shadow: var(--sppk-theme-shadow) !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-dashboard
:is(
.page-shell.main-content .content-area,
    #dashboardInfoModal, #exportPdfModal, #welcomeModal, #activityCenter,
    #smartAnalyticModal, #warningMonitoringModal, #liveActivityModal,
    #dashboardDocumentModal, #dashboardWeatherLocationModal
)
:is(
    .dashboard-active-target-item,
    .dashboard-card,
    .kpi-card,
    .quick-menu-modern,
    .dashboard-coverage-item,
    .dashboard-attention-item,
    .dashboard-readiness-item,
    .dashboard-document-item,
    .dashboard-insight-item,
    .dashboard-risk-panel,
    .dashboard-weather-status,
    .dashboard-weather-content,
    .activity-item,
    .warning-item,
    .monitor-modal-state,
    .monitor-modal-empty,
    .dashboard-definition-item,
    .export-confirm-summary,
    .export-confirm-warning,
    .export-confirm-recommendation,
    .welcome-policy-panel,
    .welcome-consent,
    .dashboard-active-target-empty,
    .dashboard-extension-heading,
    .dashboard-extension-card-head,
    .dashboard-panel-heading,
    .card-header,
    .dashboard-flow-header,
    .modal-header,
    .modal-footer,
    .offcanvas-header,
    .welcome-modal-header,
    .welcome-modal-footer,
    .dashboard-control-grid > .dashboard-quick-section > .section-title
) {
    border-color: var(--sppk-theme-line) !important;
    background: var(--sppk-theme-surface-soft) !important;
    background-image: none !important;
    color: var(--sppk-theme-text) !important;
    box-shadow: none !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-dashboard
:is(
.page-shell.main-content .content-area,
    #dashboardInfoModal, #exportPdfModal, #welcomeModal, #activityCenter,
    #smartAnalyticModal, #warningMonitoringModal, #liveActivityModal,
    #dashboardDocumentModal, #dashboardWeatherLocationModal
)
:is(
    .dashboard-command-live,
    .dashboard-active-target-status,
    .dashboard-management-source,
    .dashboard-extension-safe,
    .dashboard-insight-live,
    .dashboard-risk-badge,
    .dashboard-activity-status,
    .dashboard-activity-category,
    .dashboard-activity-module,
    .dashboard-document-meta span,
    .dashboard-activity-recap-summary > span,
    .dashboard-activity-filter-button b,
    .monitoring-launcher-count,
    .dashboard-weather-metrics span,
    .dashboard-user-avatar,
    .dashboard-smart-progress-reading,
    .dashboard-flow-filters,
    .dashboard-activity-filter,
    .dashboard-running-label,
    .export-confirm-security,
    .dashboard-form-note,
    .dashboard-definition-note,
    .dashboard-preview-trigger-icon,
    .welcome-modal-eyebrow
) {
    border-color: var(--sppk-theme-line) !important;
    background: var(--sppk-theme-surface-raised) !important;
    background-image: none !important;
    color: var(--sppk-theme-copy) !important;
    -webkit-text-fill-color: currentColor !important;
    box-shadow: none !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-dashboard
:is(
.page-shell.main-content .content-area,
    #dashboardInfoModal, #exportPdfModal, #welcomeModal, #activityCenter,
    #smartAnalyticModal, #warningMonitoringModal, #liveActivityModal,
    #dashboardDocumentModal, #dashboardWeatherLocationModal
)
:is(.dashboard-readiness-track, .dashboard-smart-progress-track, .progress) {
    border-color: var(--sppk-theme-line) !important;
    background: var(--sppk-theme-surface-raised) !important;
    background-image: none !important;
    box-shadow: none !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-dashboard
:is(
.page-shell.main-content .content-area,
    #dashboardInfoModal, #exportPdfModal, #welcomeModal, #activityCenter,
    #smartAnalyticModal, #warningMonitoringModal, #liveActivityModal,
    #dashboardDocumentModal, #dashboardWeatherLocationModal
)
:is(
    button:not(.btn-close):not(.carousel-control-prev):not(.carousel-control-next):not(.dashboard-history-button),
    a.btn, .dashboard-context-tab, .dashboard-context-action, .dashboard-extension-link,
    .dashboard-document-actions a, .dashboard-history-close
) {
    border-color: var(--sppk-theme-line) !important;
    background: var(--sppk-theme-surface-raised) !important;
    background-image: none !important;
    color: var(--sppk-theme-text) !important;
    -webkit-text-fill-color: currentColor !important;
    box-shadow: none !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-dashboard
:is(
.page-shell.main-content .content-area,
    #dashboardInfoModal, #exportPdfModal, #welcomeModal, #activityCenter,
    #smartAnalyticModal, #warningMonitoringModal, #liveActivityModal,
    #dashboardDocumentModal, #dashboardWeatherLocationModal
)
:is(
    button:not(.btn-close):not(.carousel-control-prev):not(.carousel-control-next):not(.dashboard-history-button),
    a.btn, .dashboard-context-tab, .dashboard-context-action, .dashboard-extension-link,
    .dashboard-document-actions a, .dashboard-history-close
):is(:hover, :focus-visible, .is-active, [aria-expanded="true"]):not(:disabled) {
    border-color: var(--sppk-theme-subtle) !important;
    background: #333333 !important;
    color: var(--sppk-theme-heading) !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-dashboard
:is(
.page-shell.main-content .content-area,
    #dashboardInfoModal, #exportPdfModal, #welcomeModal, #activityCenter,
    #smartAnalyticModal, #warningMonitoringModal, #liveActivityModal,
    #dashboardDocumentModal, #dashboardWeatherLocationModal
)
:is(
    button:not(.btn-close):not(.carousel-control-prev):not(.carousel-control-next):not(.dashboard-history-button),
    a.btn, .dashboard-context-tab, .dashboard-context-action, .dashboard-extension-link,
    .dashboard-document-actions a, .dashboard-history-close
):is(.is-active, [aria-selected="true"]) {
    border-color: var(--sppk-theme-brand) !important;
    color: var(--sppk-theme-link) !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-dashboard
:is(
.page-shell.main-content .content-area,
    #dashboardInfoModal, #exportPdfModal, #welcomeModal, #activityCenter,
    #smartAnalyticModal, #warningMonitoringModal, #liveActivityModal,
    #dashboardDocumentModal, #dashboardWeatherLocationModal
)
:is(
    button:not(.btn-close):not(.carousel-control-prev):not(.carousel-control-next):not(.dashboard-history-button),
    a.btn, .dashboard-context-tab, .dashboard-context-action, .dashboard-extension-link,
    .dashboard-document-actions a, .dashboard-history-close
):focus-visible {
    outline: 2px solid var(--sppk-theme-brand) !important;
    outline-offset: 2px;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-dashboard
:is(
.page-shell.main-content .content-area,
    #dashboardInfoModal, #exportPdfModal, #welcomeModal, #activityCenter,
    #smartAnalyticModal, #warningMonitoringModal, #liveActivityModal,
    #dashboardDocumentModal, #dashboardWeatherLocationModal
)
:is(
    button:not(.btn-close):not(.carousel-control-prev):not(.carousel-control-next):not(.dashboard-history-button),
    a.btn, .dashboard-context-tab, .dashboard-context-action, .dashboard-extension-link,
    .dashboard-document-actions a, .dashboard-history-close
)
:is(i, span, strong, b) {
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-dashboard
:is(
.page-shell.main-content .content-area,
    #dashboardInfoModal, #exportPdfModal, #welcomeModal, #activityCenter,
    #smartAnalyticModal, #warningMonitoringModal, #liveActivityModal,
    #dashboardDocumentModal, #dashboardWeatherLocationModal
)
:is(
    button:not(.btn-close):not(.carousel-control-prev):not(.carousel-control-next):not(.dashboard-history-button),
    a.btn, .dashboard-context-tab, .dashboard-context-action, .dashboard-extension-link,
    .dashboard-document-actions a, .dashboard-history-close
):disabled {
    color: var(--sppk-theme-subtle) !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-dashboard
:is(
.page-shell.main-content .content-area,
    #dashboardInfoModal, #exportPdfModal, #welcomeModal, #activityCenter,
    #smartAnalyticModal, #warningMonitoringModal, #liveActivityModal,
    #dashboardDocumentModal, #dashboardWeatherLocationModal
)
:is(
    button:not(.btn-close):not(.carousel-control-prev):not(.carousel-control-next):not(.dashboard-history-button),
    a.btn, .dashboard-context-tab, .dashboard-context-action, .dashboard-extension-link,
    .dashboard-document-actions a, .dashboard-history-close
):is(.btn-danger, .dashboard-document-delete, .export-confirm-submit) {
    color: var(--sppk-dashboard-icon-rose) !important;
    -webkit-text-fill-color: currentColor !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-dashboard
:is(
.page-shell.main-content .content-area,
    #dashboardInfoModal, #exportPdfModal, #welcomeModal, #activityCenter,
    #smartAnalyticModal, #warningMonitoringModal, #liveActivityModal,
    #dashboardDocumentModal, #dashboardWeatherLocationModal
)
:is(
    button:not(.btn-close):not(.carousel-control-prev):not(.carousel-control-next):not(.dashboard-history-button),
    a.btn, .dashboard-context-tab, .dashboard-context-action, .dashboard-extension-link,
    .dashboard-document-actions a, .dashboard-history-close
).btn-warning {
    color: var(--sppk-dashboard-icon-amber) !important;
    -webkit-text-fill-color: currentColor !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-dashboard
:is(
.page-shell.main-content .content-area,
    #dashboardInfoModal, #exportPdfModal, #welcomeModal, #activityCenter,
    #smartAnalyticModal, #warningMonitoringModal, #liveActivityModal,
    #dashboardDocumentModal, #dashboardWeatherLocationModal
)
:is(h1, h2, h3, h4, h5, h6, strong, b) {
    color: var(--sppk-theme-heading) !important;
    -webkit-text-fill-color: currentColor !important;
    text-shadow: none !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-dashboard
:is(
.page-shell.main-content .content-area,
    #dashboardInfoModal, #exportPdfModal, #welcomeModal, #activityCenter,
    #smartAnalyticModal, #warningMonitoringModal, #liveActivityModal,
    #dashboardDocumentModal, #dashboardWeatherLocationModal
)
:is(
    p,
    small,
    label,
    .form-text,
    .form-label,
    .dashboard-running-group span,
    .dashboard-map-legend,
    .dashboard-location-guidance,
    .dashboard-readiness-note,
    .dashboard-table-empty,
    .warning-text,
    .activity-content,
    .dashboard-activity-filter-status,
    .export-confirm-summary-label,
    .export-confirm-security,
    .welcome-consent-help
) {
    color: var(--sppk-theme-copy) !important;
    -webkit-text-fill-color: currentColor !important;
    text-shadow: none !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-dashboard
:is(
.page-shell.main-content .content-area,
    #dashboardInfoModal, #exportPdfModal, #welcomeModal, #activityCenter,
    #smartAnalyticModal, #warningMonitoringModal, #liveActivityModal,
    #dashboardDocumentModal, #dashboardWeatherLocationModal
)
:is(.modal-kicker, .dashboard-extension-kicker, .dashboard-extension-eyebrow, .welcome-modal-kicker, .welcome-footer-status) {
    color: var(--sppk-theme-muted) !important;
    -webkit-text-fill-color: currentColor !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-dashboard
:is(
.page-shell.main-content .content-area,
    #dashboardInfoModal, #exportPdfModal, #welcomeModal, #activityCenter,
    #smartAnalyticModal, #warningMonitoringModal, #liveActivityModal,
    #dashboardDocumentModal, #dashboardWeatherLocationModal
)
:is(.dashboard-panel-heading > div > span, .dashboard-mini-map-empty, .dashboard-empty-state span) {
    color: var(--sppk-theme-copy) !important;
    -webkit-text-fill-color: currentColor !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-dashboard
:is(
.page-shell.main-content .content-area,
    #dashboardInfoModal, #exportPdfModal, #welcomeModal, #activityCenter,
    #smartAnalyticModal, #warningMonitoringModal, #liveActivityModal,
    #dashboardDocumentModal, #dashboardWeatherLocationModal
)
:is(.dashboard-definition-formula) {
    color: var(--sppk-theme-text) !important;
    -webkit-text-fill-color: currentColor !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-dashboard
:is(
.page-shell.main-content .content-area,
    #dashboardInfoModal, #exportPdfModal, #welcomeModal, #activityCenter,
    #smartAnalyticModal, #warningMonitoringModal, #liveActivityModal,
    #dashboardDocumentModal, #dashboardWeatherLocationModal
)
:is(
    .dashboard-activity-module,
    .dashboard-active-target-status.is-ready,
    .dashboard-risk-badge,
    .dashboard-extension-safe,
    .dashboard-insight-live
) {
    color: var(--sppk-dashboard-icon-green) !important;
    -webkit-text-fill-color: currentColor !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-dashboard
:is(
.page-shell.main-content .content-area,
    #dashboardInfoModal, #exportPdfModal, #welcomeModal, #activityCenter,
    #smartAnalyticModal, #warningMonitoringModal, #liveActivityModal,
    #dashboardDocumentModal, #dashboardWeatherLocationModal
)
:is(
    .dashboard-activity-module.is-blue,
    .dashboard-activity-status.is-auth
) {
    color: var(--sppk-dashboard-icon-blue) !important;
    -webkit-text-fill-color: currentColor !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-dashboard
:is(
.page-shell.main-content .content-area,
    #dashboardInfoModal, #exportPdfModal, #welcomeModal, #activityCenter,
    #smartAnalyticModal, #warningMonitoringModal, #liveActivityModal,
    #dashboardDocumentModal, #dashboardWeatherLocationModal
)
:is(
    .dashboard-activity-module.is-amber,
    .dashboard-activity-module.is-orange,
    .dashboard-active-target-status.is-empty,
    .dashboard-risk-panel.is-watch .dashboard-risk-badge,
    .dashboard-activity-recap-summary .has-attention,
    .has-attention .dashboard-activity-category,
    .btn-warning,
    .export-confirm-warning-title
) {
    color: var(--sppk-dashboard-icon-amber) !important;
    -webkit-text-fill-color: currentColor !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-dashboard
:is(
.page-shell.main-content .content-area,
    #dashboardInfoModal, #exportPdfModal, #welcomeModal, #activityCenter,
    #smartAnalyticModal, #warningMonitoringModal, #liveActivityModal,
    #dashboardDocumentModal, #dashboardWeatherLocationModal
)
:is(
    .dashboard-activity-module.is-red,
    .dashboard-risk-panel.is-high .dashboard-risk-badge,
    .dashboard-document-delete,
    .btn-danger,
    .export-confirm-submit
) {
    color: var(--sppk-dashboard-icon-rose) !important;
    -webkit-text-fill-color: currentColor !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-dashboard
:is(
.page-shell.main-content .content-area,
    #dashboardInfoModal, #exportPdfModal, #welcomeModal, #activityCenter,
    #smartAnalyticModal, #warningMonitoringModal, #liveActivityModal,
    #dashboardDocumentModal, #dashboardWeatherLocationModal
)
:is(
    .dashboard-activity-module.is-slate
) {
    color: var(--sppk-dashboard-icon-slate) !important;
    -webkit-text-fill-color: currentColor !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-dashboard
:is(
.page-shell.main-content .content-area,
    #dashboardInfoModal, #exportPdfModal, #welcomeModal, #activityCenter,
    #smartAnalyticModal, #warningMonitoringModal, #liveActivityModal,
    #dashboardDocumentModal, #dashboardWeatherLocationModal
)
:is(.dashboard-management-table, .dashboard-activity-recap-table)
:is(th, td) {
    border-color: var(--sppk-theme-line-soft) !important;
    background: var(--sppk-theme-surface) !important;
    background-image: none !important;
    color: var(--sppk-theme-copy) !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-dashboard
:is(
.page-shell.main-content .content-area,
    #dashboardInfoModal, #exportPdfModal, #welcomeModal, #activityCenter,
    #smartAnalyticModal, #warningMonitoringModal, #liveActivityModal,
    #dashboardDocumentModal, #dashboardWeatherLocationModal
)
:is(.dashboard-management-table, .dashboard-activity-recap-table) th {
    background: var(--sppk-theme-surface-soft) !important;
    color: var(--sppk-theme-heading) !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-dashboard
:is(
.page-shell.main-content .content-area,
    #dashboardInfoModal, #exportPdfModal, #welcomeModal, #activityCenter,
    #smartAnalyticModal, #warningMonitoringModal, #liveActivityModal,
    #dashboardDocumentModal, #dashboardWeatherLocationModal
)
:is(.dashboard-management-table, .dashboard-activity-recap-table) tbody tr:hover td {
    background: var(--sppk-theme-surface-raised) !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-dashboard
:is(
.page-shell.main-content .content-area,
    #dashboardInfoModal, #exportPdfModal, #welcomeModal, #activityCenter,
    #smartAnalyticModal, #warningMonitoringModal, #liveActivityModal,
    #dashboardDocumentModal, #dashboardWeatherLocationModal
)
:is(.dashboard-management-table, .dashboard-activity-recap-table)
:is(time, td p) {
    color: var(--sppk-theme-copy) !important;
    -webkit-text-fill-color: currentColor !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-dashboard
:is(
.page-shell.main-content .content-area,
    #dashboardInfoModal, #exportPdfModal, #welcomeModal, #activityCenter,
    #smartAnalyticModal, #warningMonitoringModal, #liveActivityModal,
    #dashboardDocumentModal, #dashboardWeatherLocationModal
)
:is(.form-control, .form-select, .dashboard-extension-select) {
    border-color: var(--sppk-theme-line) !important;
    background-color: var(--sppk-theme-input) !important;
    color: var(--sppk-theme-text) !important;
    -webkit-text-fill-color: currentColor !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-dashboard
:is(
.page-shell.main-content .content-area,
    #dashboardInfoModal, #exportPdfModal, #welcomeModal, #activityCenter,
    #smartAnalyticModal, #warningMonitoringModal, #liveActivityModal,
    #dashboardDocumentModal, #dashboardWeatherLocationModal
)
:is(.form-control, .form-select, .dashboard-extension-select) option {
    background-color: var(--sppk-theme-input) !important;
    color: var(--sppk-theme-text) !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-dashboard
:is(
.page-shell.main-content .content-area,
    #dashboardInfoModal, #exportPdfModal, #welcomeModal, #activityCenter,
    #smartAnalyticModal, #warningMonitoringModal, #liveActivityModal,
    #dashboardDocumentModal, #dashboardWeatherLocationModal
) input::file-selector-button {
    border-color: var(--sppk-theme-line) !important;
    background-color: var(--sppk-theme-surface-raised) !important;
    color: var(--sppk-theme-copy) !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-dashboard
:is(
.page-shell.main-content .content-area,
    #dashboardInfoModal, #exportPdfModal, #welcomeModal, #activityCenter,
    #smartAnalyticModal, #warningMonitoringModal, #liveActivityModal,
    #dashboardDocumentModal, #dashboardWeatherLocationModal
) .btn-close {
    border-color: var(--sppk-theme-line) !important;
    background-color: transparent !important;
    filter: invert(0.8) !important;
    opacity: 1 !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-dashboard
:is(
.page-shell.main-content .content-area,
    #dashboardInfoModal, #exportPdfModal, #welcomeModal, #activityCenter,
    #smartAnalyticModal, #warningMonitoringModal, #liveActivityModal,
    #dashboardDocumentModal, #dashboardWeatherLocationModal
) .dashboard-running-text {
    border-color: var(--sppk-theme-line) !important;
    color: var(--sppk-theme-copy) !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-dashboard
:is(
.page-shell.main-content .content-area,
    #dashboardInfoModal, #exportPdfModal, #welcomeModal, #activityCenter,
    #smartAnalyticModal, #warningMonitoringModal, #liveActivityModal,
    #dashboardDocumentModal, #dashboardWeatherLocationModal
)
.dashboard-command-deck::before,
html body#sppkAppShell.sppk-app-shell.dark.sppk-route-dashboard
:is(
.page-shell.main-content .content-area,
    #dashboardInfoModal, #exportPdfModal, #welcomeModal, #activityCenter,
    #smartAnalyticModal, #warningMonitoringModal, #liveActivityModal,
    #dashboardDocumentModal, #dashboardWeatherLocationModal
)
.dashboard-command-deck .kpi-card::before,
html body#sppkAppShell.sppk-app-shell.dark.sppk-route-dashboard
:is(
.page-shell.main-content .content-area,
    #dashboardInfoModal, #exportPdfModal, #welcomeModal, #activityCenter,
    #smartAnalyticModal, #warningMonitoringModal, #liveActivityModal,
    #dashboardDocumentModal, #dashboardWeatherLocationModal
)
.dashboard-metrics-section .dashboard-card::before,
html body#sppkAppShell.sppk-app-shell.dark.sppk-route-dashboard
:is(
.page-shell.main-content .content-area,
    #dashboardInfoModal, #exportPdfModal, #welcomeModal, #activityCenter,
    #smartAnalyticModal, #warningMonitoringModal, #liveActivityModal,
    #dashboardDocumentModal, #dashboardWeatherLocationModal
)
.dashboard-metrics-section .dashboard-card::after,
html body#sppkAppShell.sppk-app-shell.dark.sppk-route-dashboard
:is(
.page-shell.main-content .content-area,
    #dashboardInfoModal, #exportPdfModal, #welcomeModal, #activityCenter,
    #smartAnalyticModal, #warningMonitoringModal, #liveActivityModal,
    #dashboardDocumentModal, #dashboardWeatherLocationModal
)
.dashboard-daily-section .card::before,
html body#sppkAppShell.sppk-app-shell.dark.sppk-route-dashboard
:is(
.page-shell.main-content .content-area,
    #dashboardInfoModal, #exportPdfModal, #welcomeModal, #activityCenter,
    #smartAnalyticModal, #warningMonitoringModal, #liveActivityModal,
    #dashboardDocumentModal, #dashboardWeatherLocationModal
)
.dashboard-daily-section .card::after,
html body#sppkAppShell.sppk-app-shell.dark.sppk-route-dashboard
:is(
.page-shell.main-content .content-area,
    #dashboardInfoModal, #exportPdfModal, #welcomeModal, #activityCenter,
    #smartAnalyticModal, #warningMonitoringModal, #liveActivityModal,
    #dashboardDocumentModal, #dashboardWeatherLocationModal
)
.dashboard-quick-section .quick-menu-modern::before,
html body#sppkAppShell.sppk-app-shell.dark.sppk-route-dashboard
:is(
.page-shell.main-content .content-area,
    #dashboardInfoModal, #exportPdfModal, #welcomeModal, #activityCenter,
    #smartAnalyticModal, #warningMonitoringModal, #liveActivityModal,
    #dashboardDocumentModal, #dashboardWeatherLocationModal
)
.dashboard-quick-section .quick-menu-modern::after,
html body#sppkAppShell.sppk-app-shell.dark.sppk-route-dashboard
:is(
.page-shell.main-content .content-area,
    #dashboardInfoModal, #exportPdfModal, #welcomeModal, #activityCenter,
    #smartAnalyticModal, #warningMonitoringModal, #liveActivityModal,
    #dashboardDocumentModal, #dashboardWeatherLocationModal
)
.monitoring-popup-launcher::before,
html body#sppkAppShell.sppk-app-shell.dark.sppk-route-dashboard
:is(
.page-shell.main-content .content-area,
    #dashboardInfoModal, #exportPdfModal, #welcomeModal, #activityCenter,
    #smartAnalyticModal, #warningMonitoringModal, #liveActivityModal,
    #dashboardDocumentModal, #dashboardWeatherLocationModal
)
.monitoring-launcher-button::before,
html body#sppkAppShell.sppk-app-shell.dark.sppk-route-dashboard
:is(
.page-shell.main-content .content-area,
    #dashboardInfoModal, #exportPdfModal, #welcomeModal, #activityCenter,
    #smartAnalyticModal, #warningMonitoringModal, #liveActivityModal,
    #dashboardDocumentModal, #dashboardWeatherLocationModal
)
.monitoring-launcher-button::after,
html body#sppkAppShell.sppk-app-shell.dark.sppk-route-dashboard
:is(
.page-shell.main-content .content-area,
    #dashboardInfoModal, #exportPdfModal, #welcomeModal, #activityCenter,
    #smartAnalyticModal, #warningMonitoringModal, #liveActivityModal,
    #dashboardDocumentModal, #dashboardWeatherLocationModal
)
.dashboard-control-grid::before,
html body#sppkAppShell.sppk-app-shell.dark.sppk-route-dashboard
:is(
.page-shell.main-content .content-area,
    #dashboardInfoModal, #exportPdfModal, #welcomeModal, #activityCenter,
    #smartAnalyticModal, #warningMonitoringModal, #liveActivityModal,
    #dashboardDocumentModal, #dashboardWeatherLocationModal
)
.dashboard-management-header::after,
html body#sppkAppShell.sppk-app-shell.dark.sppk-route-dashboard
:is(
.page-shell.main-content .content-area,
    #dashboardInfoModal, #exportPdfModal, #welcomeModal, #activityCenter,
    #smartAnalyticModal, #warningMonitoringModal, #liveActivityModal,
    #dashboardDocumentModal, #dashboardWeatherLocationModal
)
.dashboard-management-panel::before,
html body#sppkAppShell.sppk-app-shell.dark.sppk-route-dashboard
:is(
.page-shell.main-content .content-area,
    #dashboardInfoModal, #exportPdfModal, #welcomeModal, #activityCenter,
    #smartAnalyticModal, #warningMonitoringModal, #liveActivityModal,
    #dashboardDocumentModal, #dashboardWeatherLocationModal
)
.dashboard-extension-heading::after,
html body#sppkAppShell.sppk-app-shell.dark.sppk-route-dashboard
:is(
.page-shell.main-content .content-area,
    #dashboardInfoModal, #exportPdfModal, #welcomeModal, #activityCenter,
    #smartAnalyticModal, #warningMonitoringModal, #liveActivityModal,
    #dashboardDocumentModal, #dashboardWeatherLocationModal
)
.dashboard-extension-card::before,
html body#sppkAppShell.sppk-app-shell.dark.sppk-route-dashboard
:is(
.page-shell.main-content .content-area,
    #dashboardInfoModal, #exportPdfModal, #welcomeModal, #activityCenter,
    #smartAnalyticModal, #warningMonitoringModal, #liveActivityModal,
    #dashboardDocumentModal, #dashboardWeatherLocationModal
)
.export-confirm-content::before,
html body#sppkAppShell.sppk-app-shell.dark.sppk-route-dashboard
:is(
.page-shell.main-content .content-area,
    #dashboardInfoModal, #exportPdfModal, #welcomeModal, #activityCenter,
    #smartAnalyticModal, #warningMonitoringModal, #liveActivityModal,
    #dashboardDocumentModal, #dashboardWeatherLocationModal
)
.export-confirm-header::after,
html body#sppkAppShell.sppk-app-shell.dark.sppk-route-dashboard
:is(
.page-shell.main-content .content-area,
    #dashboardInfoModal, #exportPdfModal, #welcomeModal, #activityCenter,
    #smartAnalyticModal, #warningMonitoringModal, #liveActivityModal,
    #dashboardDocumentModal, #dashboardWeatherLocationModal
)
.welcome-modal-header::before,
html body#sppkAppShell.sppk-app-shell.dark.sppk-route-dashboard
:is(
.page-shell.main-content .content-area,
    #dashboardInfoModal, #exportPdfModal, #welcomeModal, #activityCenter,
    #smartAnalyticModal, #warningMonitoringModal, #liveActivityModal,
    #dashboardDocumentModal, #dashboardWeatherLocationModal
)
.welcome-modal-header::after {
    content: none !important;
    background: none !important;
    animation: none !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-dashboard
:is(
.page-shell.main-content .content-area,
    #dashboardInfoModal, #exportPdfModal, #welcomeModal, #activityCenter,
    #smartAnalyticModal, #warningMonitoringModal, #liveActivityModal,
    #dashboardDocumentModal, #dashboardWeatherLocationModal
) .dashboard-running-group span::after {
    background: var(--sppk-theme-subtle) !important;
    box-shadow: none !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-dashboard
.modal-backdrop {
    background-color: #000000 !important;
    background-image: none !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-dashboard
.dashboard-workspace-toast :is(strong, p) {
    color: var(--sppk-theme-copy) !important;
    -webkit-text-fill-color: currentColor !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-dashboard
.dashboard-workspace-toast > i {
    background: var(--sppk-theme-surface-raised) !important;
    color: var(--sppk-dashboard-icon-green) !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-dashboard
.dashboard-workspace-toast.is-error > i {
    color: var(--sppk-dashboard-icon-rose) !important;
}

/* DASHBOARD V8 — ORDERED OPERATIONS GRID AND COMPACT FLOW CHART
   Grid areas replace the old negative-margin rail arrangement.
   The existing theme, sidebar, form hooks and indicator data remain. */
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard
.page-shell.main-content .content-area #dashboardOperations {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 16.5rem !important;
    grid-template-areas: "daily daily" "flow quick" "flow monitor" !important;
    grid-template-rows: auto auto 1fr !important;
    align-items: start !important;
    gap: 0.75rem !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0.75rem 0 1.4rem !important;
}

html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard
.page-shell.main-content .content-area #dashboardOperations::before {
    content: none !important;
    background: none !important;
    box-shadow: none !important;
}

html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard
.page-shell.main-content .content-area #dashboardOperations .dashboard-daily-section .row {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 0.625rem !important;
    margin: 0 !important;
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
}

html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard
.page-shell.main-content .content-area #dashboardOperations .dashboard-daily-section .row > [class*="col-"] {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard
.page-shell.main-content .content-area #dashboardOperations .dashboard-daily-section .card {
    height: 100% !important;
    min-height: 7.4rem !important;
    margin: 0 !important;
    transform: none !important;
}

html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard
.page-shell.main-content .content-area #dashboardOperations .dashboard-daily-section .card-body {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 0.75rem !important;
}

html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard
.page-shell.main-content .content-area #dashboardOperations .dashboard-daily-section h1 {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: baseline !important;
    gap: 0.3rem !important;
    min-width: 0 !important;
}

html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard
.page-shell.main-content .content-area #dashboardOperations .dashboard-daily-section hr {
    margin: 0.5rem 0 !important;
}

html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard
.page-shell.main-content .content-area #dashboardOperations .dashboard-daily-section .card-body > div:last-child {
    min-width: 0 !important;
    margin-top: auto !important;
    overflow: visible !important;
    overflow-wrap: anywhere;
    white-space: normal !important;
    text-overflow: clip !important;
}

html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard
.page-shell.main-content .content-area #dashboardOperations :is(.dashboard-quick-section, .operations-status-side) {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    justify-self: stretch !important;
    align-self: start !important;
}

html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard
.page-shell.main-content .content-area #dashboardOperations :is(.dashboard-quick-section, .monitoring-center) {
    box-sizing: border-box;
    padding: 0.75rem !important;
    border: 1px solid var(--sppk-theme-line) !important;
    border-radius: 0.8rem !important;
}

html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard
.page-shell.main-content .content-area #dashboardOperations :is(.dashboard-quick-section, .monitoring-center) > .section-title {
    width: 100% !important;
    min-height: 1.9rem !important;
    margin: 0 0 0.6rem !important;
    padding: 0 0 0.5rem !important;
    border: 0 !important;
    border-bottom: 1px solid var(--sppk-theme-line) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard
.page-shell.main-content .content-area #dashboardOperations .dashboard-quick-section .row {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0.5rem !important;
    margin: 0 !important;
}

html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard
.page-shell.main-content .content-area #dashboardOperations .dashboard-quick-section .row > [class*="col-"] {
    margin: 0 !important;
    padding: 0 !important;
}

html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard
.page-shell.main-content .content-area #dashboardOperations .dashboard-quick-section a {
    display: block !important;
    width: 100% !important;
}

html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard
.page-shell.main-content .content-area #dashboardOperations .dashboard-quick-section .quick-menu-modern {
    display: flex !important;
    align-items: center !important;
    gap: 0.6rem !important;
    width: 100% !important;
    min-height: 2.7rem !important;
    padding: 0.5rem 0.65rem !important;
    border-radius: 0.55rem !important;
    transform: none !important;
}

html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard
.page-shell.main-content .content-area #dashboardOperations .monitoring-popup-launcher {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0.5rem !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
}

html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard
.page-shell.main-content .content-area #dashboardOperations .monitoring-launcher-button {
    min-height: 2.7rem !important;
    padding: 0.5rem 0.65rem !important;
    border-radius: 0.55rem !important;
    transform: none !important;
}

html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard
.page-shell.main-content .content-area #dashboardOperations .monitoring-launcher-button small {
    display: block !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
}

html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard
.page-shell.main-content .content-area #dashboardOperations .dashboard-flow-panel {
    display: block !important;
    grid-area: flow !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    align-self: start !important;
}

html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard
.page-shell.main-content .content-area #dashboardOperations .dashboard-flow-header {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 0.65rem !important;
}

html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard
.page-shell.main-content .content-area #dashboardOperations .dashboard-flow-heading {
    flex: 1 0 11rem;
    min-width: 0;
}

html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard
.page-shell.main-content .content-area #dashboardOperations .dashboard-flow-controls {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    gap: 0.4rem !important;
    max-width: 100% !important;
    margin-left: auto;
}

html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard
.page-shell.main-content .content-area #dashboardOperations .dashboard-flow-panel .flow-chart-stage {
    position: relative !important;
    width: 100% !important;
    height: 18rem !important;
    min-height: 18rem !important;
    max-height: 18rem !important;
}

@media (max-width: 1199.98px) {
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard
.page-shell.main-content .content-area #dashboardOperations {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas: "daily" "flow" "quick" "monitor" !important;
    grid-template-rows: auto !important;
}
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard
.page-shell.main-content .content-area #dashboardOperations .dashboard-daily-section .row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard
.page-shell.main-content .content-area #dashboardOperations :is(.dashboard-quick-section .row, .monitoring-popup-launcher) {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
}

@media (max-width: 767.98px) {
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard
.page-shell.main-content .content-area #dashboardOperations :is(.dashboard-quick-section .row, .monitoring-popup-launcher) {
    grid-template-columns: minmax(0, 1fr) !important;
}
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard
.page-shell.main-content .content-area #dashboardOperations .dashboard-flow-header {
    align-items: stretch !important;
    flex-direction: column !important;
}
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard
.page-shell.main-content .content-area #dashboardOperations .dashboard-flow-heading {
    flex: 0 0 auto;
}
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard
.page-shell.main-content .content-area #dashboardOperations .dashboard-flow-controls {
    width: 100% !important;
    margin-left: 0;
}
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard
.page-shell.main-content .content-area #dashboardOperations .dashboard-flow-filters {
    display: flex !important;
    width: 100% !important;
    min-width: 0;
    overflow: visible !important;
}
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard
.page-shell.main-content .content-area #dashboardOperations .dashboard-flow-filter {
    flex: 1 1 0 !important;
    min-width: 0;
    padding-right: 0.35rem !important;
    padding-left: 0.35rem !important;
}
}

@media (max-width: 419.98px) {
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard
.page-shell.main-content .content-area #dashboardOperations .dashboard-daily-section .row {
    grid-template-columns: minmax(0, 1fr) !important;
}
}

/* DASHBOARD V9 — FLOW PANEL FILLS THE ADJACENT CONTROL COLUMN
   Desktop: stretch across both control rows, then give remaining height
   to the chart. The absolute canvas cannot increase its grid track's
   intrinsic height when Chart.js updates its pixel dimensions.
   The one-column layout keeps the compact V8 chart height. */
@media (min-width: 1200px) {
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard
.page-shell.main-content .content-area #dashboardOperations .dashboard-flow-panel {
    display: flex !important;
    flex-direction: column !important;
    align-self: stretch !important;
    height: auto !important;
    min-height: 0 !important;
}
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard
.page-shell.main-content .content-area #dashboardOperations .dashboard-flow-header {
    flex: 0 0 auto !important;
}
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard
.page-shell.main-content .content-area #dashboardOperations .dashboard-flow-panel > .card-body {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 0 !important;
    min-height: 0 !important;
}
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard
.page-shell.main-content .content-area #dashboardOperations .dashboard-flow-panel .flow-chart-stage {
    flex: 1 1 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
}
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard
.page-shell.main-content .content-area #dashboardOperations .dashboard-flow-panel .flow-chart-stage > canvas {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}
}

/* DASHBOARD V10 — CONSISTENT CARD WIDTHS WITH THE SIDEBAR COLLAPSED
   Use the added content width, remove legacy section caps and give peer
   cards equal tracks. Both bootstrap html state and controller body state
   are covered. Normal-sidebar layout and popup dimensions stay unchanged. */
:is(
    html.sidebar-is-collapsed body#sppkAppShell.sppk-app-shell.sppk-route-dashboard,
    html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard.sidebar-is-collapsed
)
.page-shell.main-content .content-area #dashboardWorkspace {
    box-sizing: border-box;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin-inline: 0 !important;
    padding-inline: 0 !important;
}

:is(
    html.sidebar-is-collapsed body#sppkAppShell.sppk-app-shell.sppk-route-dashboard,
    html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard.sidebar-is-collapsed
)
.page-shell.main-content .content-area :is(.dashboard-command-deck, .dashboard-active-target, #dashboardProduction, #dashboardOperations, #dashboardManagementLayer, #dashboardExtensions, .dashboard-context-bar, .dashboard-running-text) {
    box-sizing: border-box;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin-inline: 0 !important;
}

:is(
    html.sidebar-is-collapsed body#sppkAppShell.sppk-app-shell.sppk-route-dashboard,
    html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard.sidebar-is-collapsed
)
.page-shell.main-content .content-area :is(.dashboard-kpi-grid, .dashboard-metrics-section > .row, .dashboard-daily-section > .row) {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 0.75rem !important;
    width: 100% !important;
    max-width: none !important;
    margin-inline: 0 !important;
    --bs-gutter-x: 0 !important;
    --bs-gutter-y: 0 !important;
}

:is(
    html.sidebar-is-collapsed body#sppkAppShell.sppk-app-shell.sppk-route-dashboard,
    html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard.sidebar-is-collapsed
)
.page-shell.main-content .content-area :is(.dashboard-kpi-grid, .dashboard-metrics-section > .row, .dashboard-daily-section > .row) > [class*="col-"] {
    box-sizing: border-box;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

:is(
    html.sidebar-is-collapsed body#sppkAppShell.sppk-app-shell.sppk-route-dashboard,
    html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard.sidebar-is-collapsed
)
.page-shell.main-content .content-area .dashboard-kpi-grid > :not([class*="col-"]) {
    grid-column: 1 / -1 !important;
    min-width: 0 !important;
}

:is(
    html.sidebar-is-collapsed body#sppkAppShell.sppk-app-shell.sppk-route-dashboard,
    html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard.sidebar-is-collapsed
)
.page-shell.main-content .content-area :is(.dashboard-kpi-grid > [class*="col-"] > .kpi-card, .dashboard-metrics-section .dashboard-card, .dashboard-daily-section .row > [class*="col-"] > .card, .dashboard-active-target-item, .dashboard-coverage-item, .dashboard-management-panel, .dashboard-extension-card) {
    box-sizing: border-box;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
}

:is(
    html.sidebar-is-collapsed body#sppkAppShell.sppk-app-shell.sppk-route-dashboard,
    html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard.sidebar-is-collapsed
)
.page-shell.main-content .content-area :is(.dashboard-active-target-grid, .dashboard-coverage-grid, .dashboard-management-grid, .dashboard-management-main, .dashboard-management-side, .dashboard-extension-grid) {
    box-sizing: border-box;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
}

@media (min-width: 1200px) {
:is(
    html.sidebar-is-collapsed body#sppkAppShell.sppk-app-shell.sppk-route-dashboard,
    html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard.sidebar-is-collapsed
)
.page-shell.main-content .content-area #dashboardOperations {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-template-areas: "daily daily daily daily" "flow flow flow quick" "flow flow flow monitor" !important;
    gap: 0.75rem !important;
}
:is(
    html.sidebar-is-collapsed body#sppkAppShell.sppk-app-shell.sppk-route-dashboard,
    html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard.sidebar-is-collapsed
)
.page-shell.main-content .content-area :is(.dashboard-management-grid, .dashboard-extension-grid-primary, .dashboard-extension-grid-secondary) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.75rem !important;
}
}

@media (max-width: 1199.98px) {
:is(
    html.sidebar-is-collapsed body#sppkAppShell.sppk-app-shell.sppk-route-dashboard,
    html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard.sidebar-is-collapsed
)
.page-shell.main-content .content-area :is(.dashboard-kpi-grid, .dashboard-metrics-section > .row, .dashboard-daily-section > .row) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}

@media (max-width: 419.98px) {
:is(
    html.sidebar-is-collapsed body#sppkAppShell.sppk-app-shell.sppk-route-dashboard,
    html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard.sidebar-is-collapsed
)
.page-shell.main-content .content-area :is(.dashboard-kpi-grid, .dashboard-metrics-section > .row, .dashboard-daily-section > .row) {
    grid-template-columns: minmax(0, 1fr) !important;
}
}

/* KPI V11 — NEUTRAL CARD EDGES IN DARK MODE
   Keep tone variables for progress, icons and data. Only decorative
   card outlines change; light-mode accents remain in the feature CSS. */
html body#sppkAppShell.sppk-app-shell.dark.sppk-route-kpi-operasional
.page-shell.main-content .content-area #kpiOperationalPage .kpi-tile {
    border: 1px solid var(--sppk-theme-line) !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-kpi-operasional
.page-shell.main-content .content-area #kpiOperationalPage :is(
    .kpi-hero, .kpi-hero-score, .kpi-filterbar, .kpi-panel, .kpi-freshness > span
) {
    border-color: var(--sppk-theme-line) !important;
}

/* KPI V12 — DARK ICONS, FILTERS AND DEFINITION CONTROLS
   Neutral surfaces with readable foregrounds. --tone and all data/legend
   colors remain intact. These rules do not match light mode. */
html body#sppkAppShell.sppk-app-shell.dark.sppk-route-kpi-operasional
.page-shell.main-content .content-area #kpiOperationalPage :is(.kpi-icon, .kpi-insight-list i, .kpi-readonly) {
    background: var(--sppk-theme-surface-raised) !important;
    background-image: none !important;
    color: var(--sppk-theme-link) !important;
    -webkit-text-fill-color: currentColor !important;
    box-shadow: none !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-kpi-operasional
.page-shell.main-content .content-area #kpiOperationalPage .kpi-tile.tone-blue .kpi-icon {
    color: #93bce8 !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-kpi-operasional
.page-shell.main-content .content-area #kpiOperationalPage .kpi-tile.tone-amber .kpi-icon {
    color: #e4bd79 !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-kpi-operasional
.page-shell.main-content .content-area #kpiOperationalPage .kpi-tile.tone-cyan .kpi-icon {
    color: #8ec9d2 !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-kpi-operasional
.page-shell.main-content .content-area #kpiOperationalPage .kpi-tile.tone-violet .kpi-icon {
    color: #b6a4df !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-kpi-operasional
.page-shell.main-content .content-area #kpiOperationalPage .kpi-tile.tone-orange .kpi-icon {
    color: #e8b285 !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-kpi-operasional
.page-shell.main-content .content-area #kpiOperationalPage .kpi-tile.tone-rose .kpi-icon {
    color: #e2a0ad !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-kpi-operasional
.page-shell.main-content .content-area #kpiOperationalPage .kpi-tile.tone-slate .kpi-icon {
    color: #bcc6d3 !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-kpi-operasional
.page-shell.main-content .content-area #kpiOperationalPage :is(.kpi-filter-buttons button, .kpi-info) {
    border-color: var(--sppk-theme-line) !important;
    background: var(--sppk-theme-surface-raised) !important;
    background-image: none !important;
    color: var(--sppk-theme-copy) !important;
    -webkit-text-fill-color: currentColor !important;
    box-shadow: none !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-kpi-operasional
.page-shell.main-content .content-area #kpiOperationalPage .kpi-info {
    border-radius: 0.4rem;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-kpi-operasional
.page-shell.main-content .content-area #kpiOperationalPage :is(.kpi-filter-buttons button, .kpi-info):is(:hover, :focus-visible):not(:disabled) {
    border-color: var(--sppk-theme-subtle) !important;
    background: #333333 !important;
    color: var(--sppk-theme-heading) !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-kpi-operasional
.page-shell.main-content .content-area #kpiOperationalPage .kpi-filter-buttons button:is(.is-active, [aria-pressed="true"]) {
    border-color: var(--sppk-theme-subtle) !important;
    background: #333333 !important;
    color: var(--sppk-theme-link) !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-kpi-operasional
.page-shell.main-content .content-area #kpiOperationalPage :is(.kpi-filter-buttons button, .kpi-info):focus-visible {
    outline: 2px solid var(--sppk-theme-brand) !important;
    outline-offset: 2px;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-kpi-operasional
.page-shell.main-content .content-area #kpiOperationalPage :is(.kpi-filter-buttons button, .kpi-info):disabled {
    color: var(--sppk-theme-subtle) !important;
    opacity: 0.65;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-kpi-operasional
.page-shell.main-content .content-area #kpiOperationalPage :is(.kpi-icon > i, .kpi-info > i, .kpi-readonly > i, .kpi-filter-buttons button > i) {
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-kpi-operasional
.page-shell.main-content .content-area #kpiOperationalPage :is(.kpi-flow-row > i, .kpi-method-note > i, .kpi-eyebrow > i) {
    color: var(--sppk-theme-link) !important;
    -webkit-text-fill-color: currentColor !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-kpi-operasional
.page-shell.main-content .content-area #kpiOperationalPage .kpi-progress {
    background: var(--sppk-theme-surface-raised) !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-kpi-operasional
#kpiDefinitionModal :is(.modal-content, .modal-body) {
    border-color: var(--sppk-theme-line) !important;
    background: var(--sppk-theme-surface) !important;
    background-image: none !important;
    color: var(--sppk-theme-copy) !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-kpi-operasional
#kpiDefinitionModal .modal-header {
    border-color: var(--sppk-theme-line) !important;
    background: var(--sppk-theme-surface-soft) !important;
    color: var(--sppk-theme-heading) !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-kpi-operasional
#kpiDefinitionModal .kpi-source {
    border-color: var(--sppk-theme-line) !important;
    background: var(--sppk-theme-surface-raised) !important;
    background-image: none !important;
    color: var(--sppk-theme-copy) !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-kpi-operasional
#kpiDefinitionModal .kpi-source > i {
    color: var(--sppk-theme-link) !important;
    -webkit-text-fill-color: currentColor !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-kpi-operasional
#kpiDefinitionModal :is(.modal-title, .kpi-source strong) {
    color: var(--sppk-theme-heading) !important;
    -webkit-text-fill-color: currentColor !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-kpi-operasional
#kpiDefinitionModal :is(.modal-body p, .kpi-source span, .kpi-source small, .kpi-section-kicker) {
    color: var(--sppk-theme-copy) !important;
    -webkit-text-fill-color: currentColor !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-kpi-operasional
#kpiDefinitionModal .btn-close {
    background-color: transparent !important;
    filter: invert(0.8) !important;
    opacity: 1 !important;
    box-shadow: none !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-kpi-operasional
#kpiDefinitionModal .btn-close:is(:hover, :focus-visible) {
    background-color: var(--sppk-theme-surface-raised) !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-kpi-operasional
#kpiDefinitionModal .btn-close:focus-visible {
    outline: 2px solid var(--sppk-theme-brand) !important;
    outline-offset: 2px;
}

/* ACTIVITY CENTER V13 — DARK CONTROLS AND DETAIL POPUP
   Includes the operational page actually required by activity_center.php,
   its detail dialog and the administrator's linked audit log controls.
   Native forms, links, permissions and all data handlers stay intact. */
html body#sppkAppShell.sppk-app-shell.dark.sppk-route-activity_center
.page-shell.main-content .content-area #operationalActivityCenter :is(button, .oac-filter form > a, .oac-modules a, .people a, .audit .oac-head > a) {
    border-color: var(--sppk-theme-line) !important;
    background: var(--sppk-theme-surface-raised) !important;
    background-image: none !important;
    color: var(--sppk-theme-text) !important;
    -webkit-text-fill-color: currentColor !important;
    box-shadow: none !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-activity_center
.page-shell.main-content .content-area #operationalActivityCenter :is(button, .oac-filter form > a, .oac-modules a, .people a, .audit .oac-head > a):is(:hover, :focus-visible):not(:disabled) {
    border-color: var(--sppk-theme-subtle) !important;
    background: #333333 !important;
    color: var(--sppk-theme-heading) !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-activity_center
.page-shell.main-content .content-area #operationalActivityCenter :is(button, .oac-filter form > a, .oac-modules a, .people a, .audit .oac-head > a):is(.active, [aria-current="page"], [aria-selected="true"]) {
    border-color: var(--sppk-theme-subtle) !important;
    background: #333333 !important;
    color: var(--sppk-theme-link) !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-activity_center
.page-shell.main-content .content-area #operationalActivityCenter :is(button, .oac-filter form > a, .oac-modules a, .people a, .audit .oac-head > a):focus-visible {
    outline: 2px solid var(--sppk-theme-brand) !important;
    outline-offset: 2px;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-activity_center
.page-shell.main-content .content-area #operationalActivityCenter :is(button, .oac-filter form > a, .oac-modules a, .people a, .audit .oac-head > a):disabled {
    color: var(--sppk-theme-subtle) !important;
    opacity: 0.65;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-activity_center
.page-shell.main-content .content-area #operationalActivityCenter :is(button, .oac-filter form > a, .oac-modules a, .people a, .audit .oac-head > a) :is(i, strong) {
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-activity_center
.page-shell.main-content .content-area #operationalActivityCenter :is(.oac-kpis article > i, .oac-filter > header > i, .oac-icon, .people a > span) {
    background: var(--sppk-theme-surface-raised) !important;
    background-image: none !important;
    color: var(--sppk-theme-link) !important;
    -webkit-text-fill-color: currentColor !important;
    box-shadow: none !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-activity_center
.page-shell.main-content .content-area #operationalActivityCenter .oac-kpis article:nth-child(2) > i {
    color: #93bce8 !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-activity_center
.page-shell.main-content .content-area #operationalActivityCenter :is(.oac-kpis article:nth-child(3) > i, .oac-filter > header > i, .people a > span) {
    color: #b6a4df !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-activity_center
.page-shell.main-content .content-area #operationalActivityCenter .oac-kpis article.risk > i {
    color: #e2a0ad !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-activity_center
.page-shell.main-content .content-area #operationalActivityCenter :is(.facts i, .audit-grid > article > i, .oac-empty i) {
    color: var(--sppk-theme-link) !important;
    -webkit-text-fill-color: currentColor !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-activity_center
.page-shell.main-content .content-area #operationalActivityCenter .oac-filter :is(input:not([type="hidden"]), select) {
    border-color: var(--sppk-theme-line) !important;
    background-color: var(--sppk-theme-input) !important;
    color: var(--sppk-theme-text) !important;
    -webkit-text-fill-color: currentColor !important;
    color-scheme: dark;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-activity_center
.page-shell.main-content .content-area #operationalActivityCenter .oac-filter option {
    background-color: var(--sppk-theme-input) !important;
    color: var(--sppk-theme-text) !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-activity_center
.page-shell.main-content .content-area #operationalActivityCenter .oac-filter input::placeholder {
    color: var(--sppk-theme-placeholder) !important;
    -webkit-text-fill-color: currentColor !important;
    opacity: 1;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-activity_center
.page-shell.main-content .content-area #operationalActivityCenter .oac-filter :is(input, select):focus-visible {
    border-color: var(--sppk-theme-subtle) !important;
    outline: 2px solid var(--sppk-theme-brand) !important;
    outline-offset: 2px;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-activity_center
#activityDetailModal :is(.modal-content, .modal-body) {
    border-color: var(--sppk-theme-line) !important;
    background: var(--sppk-theme-surface) !important;
    background-image: none !important;
    color: var(--sppk-theme-text) !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-activity_center
#activityDetailModal :is(.modal-header, .modal-body dl > div) {
    border-color: var(--sppk-theme-line) !important;
    background: var(--sppk-theme-surface-soft) !important;
    background-image: none !important;
    color: var(--sppk-theme-text) !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-activity_center
#activityDetailModal :is(.modal-header h2, dd) {
    color: var(--sppk-theme-heading) !important;
    -webkit-text-fill-color: currentColor !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-activity_center
#activityDetailModal :is(.modal-header span, dt) {
    color: var(--sppk-theme-copy) !important;
    -webkit-text-fill-color: currentColor !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-activity_center
#activityDetailModal .btn-close {
    border-color: var(--sppk-theme-line) !important;
    background-color: transparent !important;
    filter: invert(0.8) !important;
    opacity: 1 !important;
    box-shadow: none !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-activity_center
#activityDetailModal .btn-close:is(:hover, :focus-visible) {
    background-color: var(--sppk-theme-surface-raised) !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-activity_center
#activityDetailModal .btn-close:focus-visible {
    outline: 2px solid var(--sppk-theme-brand) !important;
    outline-offset: 2px;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-activity_log
.page-shell.main-content .content-area .activity-center-page :is(button, a.btn-kembali) {
    border-color: var(--sppk-theme-line) !important;
    background: var(--sppk-theme-surface-raised) !important;
    background-image: none !important;
    color: var(--sppk-theme-text) !important;
    -webkit-text-fill-color: currentColor !important;
    box-shadow: none !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-activity_log
.page-shell.main-content .content-area .activity-center-page :is(button, a.btn-kembali):is(:hover, :focus-visible):not(:disabled) {
    border-color: var(--sppk-theme-subtle) !important;
    background: #333333 !important;
    color: var(--sppk-theme-heading) !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-activity_log
.page-shell.main-content .content-area .activity-center-page :is(button, a.btn-kembali):focus-visible {
    outline: 2px solid var(--sppk-theme-brand) !important;
    outline-offset: 2px;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-activity_log
.page-shell.main-content .content-area .activity-center-page :is(button, a.btn-kembali) i {
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-activity_log
.page-shell.main-content .content-area .activity-center-page .activity-log-panel button.btn.btn-danger {
    color: #e2a0ad !important;
    -webkit-text-fill-color: currentColor !important;
}

/* ACTIVITY CENTER V14 — AUDIT ACTION AND OPERATIONAL STATUS
   Keep the audit link compact instead of stretching with the heading.
   Both status variants use the neutral night palette. */
html body#sppkAppShell.sppk-app-shell.dark.sppk-route-activity_center
.page-shell.main-content .content-area #operationalActivityCenter .audit > .oac-head {
    align-items: center;
    flex-wrap: wrap;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-activity_center
.page-shell.main-content .content-area #operationalActivityCenter .audit > .oac-head > div {
    flex: 1 1 240px;
    min-width: 0;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-activity_center
.page-shell.main-content .content-area #operationalActivityCenter .audit > .oac-head > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    flex: 0 0 auto;
    gap: 6px;
    margin: 0 0 0 auto;
    padding: 8px 12px;
    min-height: 34px;
    height: auto;
    border: 1px solid var(--sppk-theme-line);
    border-radius: 10px;
    line-height: 1.4;
    white-space: nowrap;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-activity_center
.page-shell.main-content .content-area #operationalActivityCenter .oac-side .advice {
    align-items: flex-start;
    background: var(--sppk-theme-surface-raised) !important;
    background-image: none !important;
    color: var(--sppk-theme-copy) !important;
    -webkit-text-fill-color: currentColor !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-activity_center
.page-shell.main-content .content-area #operationalActivityCenter .oac-side .advice > span {
    min-width: 0;
    color: var(--sppk-theme-copy) !important;
    -webkit-text-fill-color: currentColor !important;
    line-height: 1.55;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-activity_center
.page-shell.main-content .content-area #operationalActivityCenter .oac-side .advice > i {
    flex: 0 0 auto;
    color: #e2a0ad !important;
    -webkit-text-fill-color: currentColor !important;
    line-height: 1.55;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-activity_center
.page-shell.main-content .content-area #operationalActivityCenter .oac-side .advice.safe > i {
    color: var(--sppk-theme-link) !important;
}

/* GALLERY V15 — NEUTRAL NIGHT SURFACES
   Remove the legacy grid, gradients and animated card borders in night
   mode. Keep gallery media, page geometry and the light palette intact. */
html body#sppkAppShell.sppk-app-shell.dark.sppk-route-galeri
.page-shell.main-content .content-area .modern-gallery-wrapper {
    --gallery-surface: var(--sppk-theme-surface) !important;
    --gallery-surface-soft: var(--sppk-theme-surface-soft) !important;
    --gallery-heading: var(--sppk-theme-heading) !important;
    --gallery-copy: var(--sppk-theme-copy) !important;
    --gallery-muted: var(--sppk-theme-muted) !important;
    --gallery-line: var(--sppk-theme-line) !important;
    --gallery-shadow: var(--sppk-theme-shadow-soft) !important;
    background: var(--sppk-theme-page) !important;
    background-image: none !important;
    color: var(--sppk-theme-copy) !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-galeri
.page-shell.main-content .content-area .modern-gallery-wrapper :is(.gallery-hero, .enterprise-gallery-card, .gallery-content, .gallery-bottom-panel) {
    border-color: var(--sppk-theme-line) !important;
    background: var(--sppk-theme-surface) !important;
    background-image: none !important;
    color: var(--sppk-theme-text) !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-galeri
.page-shell.main-content .content-area .modern-gallery-wrapper :is(.gallery-hero, .enterprise-gallery-card, .gallery-bottom-panel) {
    box-shadow: var(--sppk-theme-shadow-soft) !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-galeri
.page-shell.main-content .content-area .modern-gallery-wrapper .enterprise-gallery-card {
    animation: none !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-galeri
.page-shell.main-content .content-area .modern-gallery-wrapper :is(.gallery-hero .gallery-stat-card, .gallery-filter-bar) {
    border-color: var(--sppk-theme-line) !important;
    background: var(--sppk-theme-surface-soft) !important;
    background-image: none !important;
    box-shadow: none !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-galeri
.page-shell.main-content .content-area .modern-gallery-wrapper .gallery-hero-overlay {
    background: none !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-galeri
.page-shell.main-content .content-area .modern-gallery-wrapper .gallery-hero::after {
    opacity: 0 !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-galeri
.page-shell.main-content .content-area .modern-gallery-wrapper :is(.gallery-title, .gallery-stat-card h2, .gallery-content h4, .gallery-bottom-panel h3) {
    color: var(--sppk-theme-heading) !important;
    -webkit-text-fill-color: currentColor !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-galeri
.page-shell.main-content .content-area .modern-gallery-wrapper :is(.gallery-subtitle, .gallery-stat-card p, .gallery-content p, .gallery-bottom-panel p) {
    color: var(--sppk-theme-copy) !important;
    -webkit-text-fill-color: currentColor !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-galeri
.page-shell.main-content .content-area .modern-gallery-wrapper :is(.gallery-badge, .gallery-category, .gallery-stat-icon, .gallery-icon) {
    border-color: var(--sppk-theme-line) !important;
    background: var(--sppk-theme-surface-raised) !important;
    background-image: none !important;
    color: var(--sppk-theme-link) !important;
    -webkit-text-fill-color: currentColor !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-galeri
.page-shell.main-content .content-area .modern-gallery-wrapper :is(.gallery-badge, .gallery-stat-icon, .gallery-icon) > i {
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-galeri
.page-shell.main-content .content-area .modern-gallery-wrapper .gallery-footer {
    border-color: var(--sppk-theme-line) !important;
    color: var(--sppk-theme-muted) !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-galeri
.page-shell.main-content .content-area .modern-gallery-wrapper .gallery-footer > span {
    color: var(--sppk-theme-muted) !important;
    -webkit-text-fill-color: currentColor !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-galeri
.page-shell.main-content .content-area .modern-gallery-wrapper .gallery-footer > .status-live {
    color: var(--sppk-theme-link) !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-galeri
.page-shell.main-content .content-area .modern-gallery-wrapper :is(.btn, .filter-btn, .overlay-btn, .btn-enterprise-back),
html body#sppkAppShell.sppk-app-shell.dark.sppk-route-galeri
:is(#modalUploadGaleri, [id^="editGaleri"], [id^="videoPreview"]) .btn {
    border-color: var(--sppk-theme-line) !important;
    background: var(--sppk-theme-surface-raised) !important;
    background-image: none !important;
    color: var(--sppk-theme-text) !important;
    -webkit-text-fill-color: currentColor !important;
    box-shadow: none !important;
    filter: none !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-galeri
.page-shell.main-content .content-area .modern-gallery-wrapper :is(.btn, .filter-btn, .overlay-btn, .btn-enterprise-back):is(:hover, :focus-visible),
html body#sppkAppShell.sppk-app-shell.dark.sppk-route-galeri
:is(#modalUploadGaleri, [id^="editGaleri"], [id^="videoPreview"]) .btn:is(:hover, :focus-visible) {
    border-color: var(--sppk-theme-subtle) !important;
    background: #333333 !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-galeri
.page-shell.main-content .content-area .modern-gallery-wrapper .filter-btn.active {
    background: #333333 !important;
    color: var(--sppk-theme-link) !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-galeri
.page-shell.main-content .content-area .modern-gallery-wrapper :is(.btn, .filter-btn, .overlay-btn, .btn-enterprise-back):focus-visible,
html body#sppkAppShell.sppk-app-shell.dark.sppk-route-galeri
:is(#modalUploadGaleri, [id^="editGaleri"], [id^="videoPreview"]) .btn:focus-visible {
    outline: 2px solid var(--sppk-theme-brand) !important;
    outline-offset: 2px;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-galeri
.page-shell.main-content .content-area .modern-gallery-wrapper :is(.btn, .filter-btn, .overlay-btn, .btn-enterprise-back) > i {
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-galeri
.page-shell.main-content .content-area .modern-gallery-wrapper .btn-warning {
    color: #e4bd79 !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-galeri
.page-shell.main-content .content-area .modern-gallery-wrapper .btn-danger {
    color: #e2a0ad !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-galeri
:is(#modalUploadGaleri, [id^="editGaleri"], [id^="videoPreview"]) :is(.modal-content, .modal-body) {
    border-color: var(--sppk-theme-line) !important;
    background: var(--sppk-theme-surface) !important;
    background-image: none !important;
    color: var(--sppk-theme-copy) !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-galeri
:is(#modalUploadGaleri, [id^="editGaleri"], [id^="videoPreview"]) .modal-content {
    box-shadow: var(--sppk-theme-shadow) !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-galeri
:is(#modalUploadGaleri, [id^="editGaleri"], [id^="videoPreview"]) :is(.modal-header, .modal-footer) {
    border-color: var(--sppk-theme-line) !important;
    background: var(--sppk-theme-surface-soft) !important;
    background-image: none !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-galeri
#modalUploadGaleri .modal-header::before {
    background: var(--sppk-theme-line) !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-galeri
:is(#modalUploadGaleri, [id^="editGaleri"], [id^="videoPreview"]) .modal-title {
    color: var(--sppk-theme-heading) !important;
    -webkit-text-fill-color: currentColor !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-galeri
:is(#modalUploadGaleri, [id^="editGaleri"], [id^="videoPreview"]) .form-label {
    color: var(--sppk-theme-copy) !important;
    -webkit-text-fill-color: currentColor !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-galeri
:is(#modalUploadGaleri, [id^="editGaleri"], [id^="videoPreview"]) :is(.form-control, .form-select, option) {
    border-color: var(--sppk-theme-line) !important;
    background-color: var(--sppk-theme-input) !important;
    color: var(--sppk-theme-text) !important;
    -webkit-text-fill-color: currentColor !important;
    box-shadow: none !important;
    color-scheme: dark;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-galeri
:is(#modalUploadGaleri, [id^="editGaleri"], [id^="videoPreview"]) :is(.form-control, .form-select):focus {
    border-color: var(--sppk-theme-subtle) !important;
    outline: 2px solid var(--sppk-theme-brand) !important;
    outline-offset: 2px;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-galeri
#modalUploadGaleri input[type="file"]::file-selector-button {
    background: var(--sppk-theme-surface-raised) !important;
    color: var(--sppk-theme-text) !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-galeri
#modalUploadGaleri :is(#previewImage, #previewVideo) {
    border-color: var(--sppk-theme-line) !important;
    background: var(--sppk-theme-input) !important;
    box-shadow: none !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-galeri
:is(#modalUploadGaleri, [id^="editGaleri"], [id^="videoPreview"]) .btn-close {
    border-color: var(--sppk-theme-line) !important;
    background-color: transparent !important;
    filter: invert(0.8) !important;
    opacity: 1 !important;
    box-shadow: none !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-galeri
:is(#modalUploadGaleri, [id^="editGaleri"], [id^="videoPreview"]) .btn-close:is(:hover, :focus-visible) {
    background-color: var(--sppk-theme-surface-raised) !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-galeri
:is(#modalUploadGaleri, [id^="editGaleri"], [id^="videoPreview"]) .btn-close:focus-visible {
    outline: 2px solid var(--sppk-theme-brand) !important;
    outline-offset: 2px;
}

/* CUSTOMER SERVICE V16 — NEUTRAL NIGHT WORKSPACE
   Theme-only overrides for the customer-service route, including FAQ,
   ticket fields/notices and the separate page header and footer. */
html body#sppkAppShell.sppk-app-shell.dark.sppk-route-customer-service
.page-shell.main-content .content-area .customer-service-page {
    --cs-surface: var(--sppk-theme-surface) !important;
    --cs-surface-soft: var(--sppk-theme-surface-soft) !important;
    --cs-text: var(--sppk-theme-heading) !important;
    --cs-copy: var(--sppk-theme-copy) !important;
    --cs-muted: var(--sppk-theme-muted) !important;
    --cs-line: var(--sppk-theme-line) !important;
    --cs-accent: var(--sppk-theme-link) !important;
    --cs-accent-2: var(--sppk-theme-link) !important;
    --primary: var(--sppk-theme-link) !important;
    --primary-dark: var(--sppk-theme-link) !important;
    --secondary: var(--sppk-theme-heading) !important;
    --gray: var(--sppk-theme-muted) !important;
    --light: var(--sppk-theme-surface-soft) !important;
    --white: var(--sppk-theme-surface-raised) !important;
    --border: var(--sppk-theme-line) !important;
    background: var(--sppk-theme-page) !important;
    color: var(--sppk-theme-copy) !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-customer-service
.page-shell.main-content .content-area .customer-service-topbar,
html body#sppkAppShell.sppk-app-shell.dark.sppk-route-customer-service
.page-shell.main-content .content-area .customer-service-page :is(.hero, .card, .stats .stat-card) {
    border-color: var(--sppk-theme-line) !important;
    background: var(--sppk-theme-surface) !important;
    background-image: none !important;
    box-shadow: var(--sppk-theme-shadow-soft) !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-customer-service
.page-shell.main-content .content-area .customer-service-page :is(.hero .support-photo, .support-box, .faq-empty, .alert-success-custom) {
    border-color: var(--sppk-theme-line) !important;
    background: var(--sppk-theme-surface-soft) !important;
    background-image: none !important;
    color: var(--sppk-theme-copy) !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-customer-service
.page-shell.main-content .content-area .customer-service-page .hero::before {
    background: none !important;
    opacity: 0 !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-customer-service
.page-shell.main-content .content-area .customer-service-page .support-photo img {
    border-color: var(--sppk-theme-line) !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-customer-service
.page-shell.main-content .content-area .customer-service-page .section-title,
html body#sppkAppShell.sppk-app-shell.dark.sppk-route-customer-service
.page-shell.main-content .content-area .customer-service-page .faq-item {
    border-color: var(--sppk-theme-line) !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-customer-service
.page-shell.main-content .content-area .customer-service-topbar .page-title,
html body#sppkAppShell.sppk-app-shell.dark.sppk-route-customer-service
.page-shell.main-content .content-area .customer-service-page :is(h1, h2, h3, h5, .faq-question, .faq-question > span, .alert-success-custom strong, .faq-empty strong),
html body#sppkAppShell.sppk-app-shell.dark.sppk-route-customer-service
.page-shell.main-content .content-area .customer-service-site-footer strong {
    color: var(--sppk-theme-heading) !important;
    -webkit-text-fill-color: currentColor !important;
    text-shadow: none !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-customer-service
.page-shell.main-content .content-area .customer-service-page :is(p, .support-info span, .faq-answer, .form-group label),
html body#sppkAppShell.sppk-app-shell.dark.sppk-route-customer-service
.page-shell.main-content .content-area .customer-service-site-footer :is(span, .customer-service-site-footer__brand) {
    color: var(--sppk-theme-copy) !important;
    -webkit-text-fill-color: currentColor !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-customer-service
.page-shell.main-content .content-area .customer-service-topbar > div:last-child span,
html body#sppkAppShell.sppk-app-shell.dark.sppk-route-customer-service
.page-shell.main-content .content-area .customer-service-page :is(.section-title > span, .faq-results-meta, .faq-results-meta > span) {
    color: var(--sppk-theme-muted) !important;
    -webkit-text-fill-color: currentColor !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-customer-service
.page-shell.main-content .content-area .customer-service-page :is(.support-box > a, .faq-category-label, .faq-question > i, .success-icon, .success-icon > i),
html body#sppkAppShell.sppk-app-shell.dark.sppk-route-customer-service
.page-shell.main-content .content-area .customer-service-site-footer .customer-service-site-footer__status {
    color: var(--sppk-theme-link) !important;
    -webkit-text-fill-color: currentColor !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-customer-service
.page-shell.main-content .content-area .customer-service-topbar .page-title > i,
html body#sppkAppShell.sppk-app-shell.dark.sppk-route-customer-service
.page-shell.main-content .content-area .customer-service-page :is(.hero-badge, .support-icon),
html body#sppkAppShell.sppk-app-shell.dark.sppk-route-customer-service
.page-shell.main-content .content-area .customer-service-site-footer .customer-service-site-footer__mark {
    border-color: var(--sppk-theme-line) !important;
    background: var(--sppk-theme-surface-raised) !important;
    background-image: none !important;
    color: var(--sppk-theme-link) !important;
    -webkit-text-fill-color: currentColor !important;
    box-shadow: none !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-customer-service
.page-shell.main-content .content-area .customer-service-page .support-icon.blue {
    color: #93bce8 !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-customer-service
.page-shell.main-content .content-area .customer-service-page .support-icon.orange {
    color: #e4bd79 !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-customer-service
.page-shell.main-content .content-area .customer-service-page .support-icon.red {
    color: #e2a0ad !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-customer-service
.page-shell.main-content .content-area .customer-service-page :is(.hero-badge, .support-icon) > i,
html body#sppkAppShell.sppk-app-shell.dark.sppk-route-customer-service
.page-shell.main-content .content-area .customer-service-site-footer .customer-service-site-footer__mark > i {
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-customer-service
.page-shell.main-content .content-area .customer-service-page :is(.btn, .submit-btn, .faq-filter, .faq-clear, .faq-action-link),
html body#sppkAppShell.sppk-app-shell.dark.sppk-route-customer-service
.page-shell.main-content .content-area .customer-service-site-footer .customer-service-site-footer__links a {
    border-color: var(--sppk-theme-line) !important;
    background: var(--sppk-theme-surface-raised) !important;
    background-image: none !important;
    color: var(--sppk-theme-text) !important;
    -webkit-text-fill-color: currentColor !important;
    box-shadow: none !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-customer-service
.page-shell.main-content .content-area .customer-service-page :is(.btn, .submit-btn, .faq-filter, .faq-clear, .faq-action-link):is(:hover, :focus-visible),
html body#sppkAppShell.sppk-app-shell.dark.sppk-route-customer-service
.page-shell.main-content .content-area .customer-service-site-footer .customer-service-site-footer__links a:is(:hover, :focus-visible) {
    border-color: var(--sppk-theme-subtle) !important;
    background: #333333 !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-customer-service
.page-shell.main-content .content-area .customer-service-page .faq-filter.is-active {
    background: #333333 !important;
    color: var(--sppk-theme-link) !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-customer-service
.page-shell.main-content .content-area .customer-service-page :is(.btn, .submit-btn, .faq-filter, .faq-clear, .faq-action-link) > i,
html body#sppkAppShell.sppk-app-shell.dark.sppk-route-customer-service
.page-shell.main-content .content-area .customer-service-site-footer .customer-service-site-footer__links a > i {
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-customer-service
.page-shell.main-content .content-area .customer-service-page .faq-results-meta button {
    background: transparent !important;
    color: var(--sppk-theme-link) !important;
    -webkit-text-fill-color: currentColor !important;
    box-shadow: none !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-customer-service
.page-shell.main-content .content-area .customer-service-page :is(.btn, .submit-btn, .faq-filter, .faq-clear, .faq-action-link):focus-visible,
html body#sppkAppShell.sppk-app-shell.dark.sppk-route-customer-service
.page-shell.main-content .content-area .customer-service-site-footer .customer-service-site-footer__links a:focus-visible,
html body#sppkAppShell.sppk-app-shell.dark.sppk-route-customer-service
.page-shell.main-content .content-area .customer-service-page .faq-results-meta button:focus-visible,
html body#sppkAppShell.sppk-app-shell.dark.sppk-route-customer-service
.page-shell.main-content .content-area .customer-service-page .faq-question:focus-visible,
html body#sppkAppShell.sppk-app-shell.dark.sppk-route-customer-service
.page-shell.main-content .content-area .customer-service-page .support-box > a:focus-visible {
    outline: 2px solid var(--sppk-theme-brand) !important;
    outline-offset: 2px;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-customer-service
.page-shell.main-content .content-area .customer-service-page :is(.form-control, .faq-search) {
    border-color: var(--sppk-theme-line) !important;
    background-color: var(--sppk-theme-input) !important;
    color: var(--sppk-theme-text) !important;
    -webkit-text-fill-color: currentColor !important;
    box-shadow: none !important;
    color-scheme: dark;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-customer-service
.page-shell.main-content .content-area .customer-service-page :is(.form-control, .faq-search):focus {
    border-color: var(--sppk-theme-subtle) !important;
    outline: 2px solid var(--sppk-theme-brand) !important;
    outline-offset: 2px;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-customer-service
.page-shell.main-content .content-area .customer-service-page :is(.form-control, .faq-search)::placeholder {
    color: var(--sppk-theme-placeholder) !important;
    -webkit-text-fill-color: currentColor !important;
    opacity: 1;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-customer-service
.page-shell.main-content .content-area .customer-service-page option {
    background-color: var(--sppk-theme-input) !important;
    color: var(--sppk-theme-text) !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-customer-service
.page-shell.main-content .content-area .customer-service-page .faq-search-wrap > i {
    color: var(--sppk-theme-muted) !important;
    -webkit-text-fill-color: currentColor !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-customer-service
.page-shell.main-content .content-area .customer-service-page #ticket > div[style*="#fee2e2"] {
    background: var(--sppk-theme-surface-soft) !important;
    color: #e2a0ad !important;
    -webkit-text-fill-color: currentColor !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-customer-service
.page-shell.main-content .content-area .customer-service-site-footer {
    border-color: var(--sppk-theme-line) !important;
    background: var(--sppk-theme-page) !important;
    color: var(--sppk-theme-muted) !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-customer-service
.page-shell.main-content .content-area .customer-service-site-footer .customer-service-site-footer__status::before {
    background: var(--sppk-theme-link) !important;
    box-shadow: none !important;
}

/* ANNUAL TARGET V17 — NEUTRAL NIGHT SURFACES AND CONTROLS
   Includes active RKT, both target tables, the body-mounted plot editor
   and the linked annual editor. Calculations and handlers stay intact. */
html body#sppkAppShell.sppk-app-shell.dark.sppk-route-target
.page-shell.main-content .content-area #annualTargetPage.enterprise-target-wrapper {
    --target-ink: var(--sppk-theme-heading) !important;
    --target-muted: var(--sppk-theme-muted) !important;
    background: var(--sppk-theme-page) !important;
    color: var(--sppk-theme-copy) !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-target
.page-shell.main-content .content-area :is(.glass-panel, .target-hero),
html body#sppkAppShell.sppk-app-shell.dark.sppk-route-edit_target
.page-shell.main-content .content-area .card {
    border-color: var(--sppk-theme-line) !important;
    background: var(--sppk-theme-surface) !important;
    background-image: none !important;
    box-shadow: var(--sppk-theme-shadow-soft) !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-target
.page-shell.main-content .content-area #annualTargetPage.enterprise-target-wrapper :is(.target-data-header, .target-hero .hero-status-card) {
    border-color: var(--sppk-theme-line) !important;
    background: var(--sppk-theme-surface-soft) !important;
    background-image: none !important;
    color: var(--sppk-theme-text) !important;
    box-shadow: none !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-target
.page-shell.main-content .content-area #annualTargetPage.enterprise-target-wrapper::before,
html body#sppkAppShell.sppk-app-shell.dark.sppk-route-target
.page-shell.main-content .content-area #annualTargetPage.enterprise-target-wrapper .glass-panel::before,
html body#sppkAppShell.sppk-app-shell.dark.sppk-route-target
.page-shell.main-content .content-area #annualTargetPage.enterprise-target-wrapper .target-hero::after,
html body#sppkAppShell.sppk-app-shell.dark.sppk-route-target
.page-shell.main-content .content-area #annualTargetPage.enterprise-target-wrapper .target-data-header::after {
    background: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
    opacity: 0 !important;
    animation: none !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-target
.page-shell.main-content .content-area #annualTargetPage.enterprise-target-wrapper .hero-overlay {
    background: none !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-target
.page-shell.main-content .content-area #annualTargetPage.enterprise-target-wrapper :is(h1, h3),
html body#sppkAppShell.sppk-app-shell.dark.sppk-route-target
#editPetakModal .modal-title,
html body#sppkAppShell.sppk-app-shell.dark.sppk-route-edit_target
.page-shell.main-content .content-area h3 {
    color: var(--sppk-theme-heading) !important;
    -webkit-text-fill-color: currentColor !important;
    text-shadow: none !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-target
.page-shell.main-content .content-area #annualTargetPage.enterprise-target-wrapper :is(p, label, .modern-label),
html body#sppkAppShell.sppk-app-shell.dark.sppk-route-target
#editPetakModal label,
html body#sppkAppShell.sppk-app-shell.dark.sppk-route-edit_target
.page-shell.main-content .content-area label {
    color: var(--sppk-theme-copy) !important;
    -webkit-text-fill-color: currentColor !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-target
.page-shell.main-content .content-area #annualTargetPage.enterprise-target-wrapper .target-data-header__eyebrow {
    color: var(--sppk-theme-muted) !important;
    -webkit-text-fill-color: currentColor !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-target
.page-shell.main-content .content-area > .glass-panel > div[style] {
    color: var(--sppk-theme-link) !important;
    -webkit-text-fill-color: currentColor !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-target
.page-shell.main-content .content-area #annualTargetPage.enterprise-target-wrapper :is(.panel-icon, .hero-badge, .target-hero .status-live, .year-badge) {
    border-color: var(--sppk-theme-line) !important;
    background: var(--sppk-theme-surface-raised) !important;
    background-image: none !important;
    color: var(--sppk-theme-link) !important;
    -webkit-text-fill-color: currentColor !important;
    box-shadow: none !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-target
.page-shell.main-content .content-area #annualTargetPage.enterprise-target-wrapper .panel-icon.primary {
    color: #93bce8 !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-target
.page-shell.main-content .content-area #annualTargetPage.enterprise-target-wrapper :is(.panel-icon, .hero-badge) > i {
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-target
.page-shell.main-content .content-area #annualTargetPage.enterprise-target-wrapper .target-hero .pulse-dot {
    background: var(--sppk-theme-link) !important;
    box-shadow: none !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-target
.page-shell.main-content .content-area #annualTargetPage.enterprise-target-wrapper .enterprise-table :is(th, td) {
    border-color: var(--sppk-theme-line) !important;
    background-image: none !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-target
.page-shell.main-content .content-area #annualTargetPage.enterprise-target-wrapper .enterprise-table thead th {
    background: var(--sppk-theme-surface-soft) !important;
    color: var(--sppk-theme-heading) !important;
    -webkit-text-fill-color: currentColor !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-target
.page-shell.main-content .content-area #annualTargetPage.enterprise-target-wrapper .enterprise-table tbody :is(tr, td) {
    background: var(--sppk-theme-surface) !important;
    color: var(--sppk-theme-text) !important;
    -webkit-text-fill-color: currentColor !important;
    box-shadow: none !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-target
.page-shell.main-content .content-area #annualTargetPage.enterprise-target-wrapper .enterprise-table tbody tr:hover > td {
    background: var(--sppk-theme-surface-soft) !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-target
.page-shell.main-content .content-area #annualTargetPage.enterprise-target-wrapper .enterprise-table strong {
    color: var(--sppk-theme-heading) !important;
    -webkit-text-fill-color: currentColor !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-target
.page-shell.main-content .content-area #annualTargetPage.enterprise-target-wrapper .enterprise-table small {
    color: var(--sppk-theme-muted) !important;
    -webkit-text-fill-color: currentColor !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-target
.page-shell.main-content .content-area #annualTargetPage.enterprise-target-wrapper :is(.btn, .btn-enterprise-save, .btn-action),
html body#sppkAppShell.sppk-app-shell.dark.sppk-route-target
#editPetakModal :is(.btn, .btn-enterprise-save),
html body#sppkAppShell.sppk-app-shell.dark.sppk-route-edit_target
.page-shell.main-content .content-area .btn {
    border-color: var(--sppk-theme-line) !important;
    background: var(--sppk-theme-surface-raised) !important;
    background-image: none !important;
    color: var(--sppk-theme-text) !important;
    -webkit-text-fill-color: currentColor !important;
    box-shadow: none !important;
    filter: none !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-target
.page-shell.main-content .content-area #annualTargetPage.enterprise-target-wrapper :is(.btn, .btn-enterprise-save, .btn-action):is(:hover, :focus-visible),
html body#sppkAppShell.sppk-app-shell.dark.sppk-route-target
#editPetakModal :is(.btn, .btn-enterprise-save):is(:hover, :focus-visible),
html body#sppkAppShell.sppk-app-shell.dark.sppk-route-edit_target
.page-shell.main-content .content-area .btn:is(:hover, :focus-visible) {
    border-color: var(--sppk-theme-subtle) !important;
    background: #333333 !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-target
.page-shell.main-content .content-area #annualTargetPage.enterprise-target-wrapper :is(.btn, .btn-enterprise-save, .btn-action):focus-visible,
html body#sppkAppShell.sppk-app-shell.dark.sppk-route-target
#editPetakModal :is(.btn, .btn-enterprise-save):focus-visible,
html body#sppkAppShell.sppk-app-shell.dark.sppk-route-edit_target
.page-shell.main-content .content-area .btn:focus-visible {
    outline: 2px solid var(--sppk-theme-brand) !important;
    outline-offset: 2px;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-target
.page-shell.main-content .content-area #annualTargetPage.enterprise-target-wrapper > .glass-panel:first-child .btn-success {
    background: #333333 !important;
    color: var(--sppk-theme-link) !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-target
.page-shell.main-content .content-area #annualTargetPage.enterprise-target-wrapper .btn-action.warning,
html body#sppkAppShell.sppk-app-shell.dark.sppk-route-edit_target
.page-shell.main-content .content-area .btn-warning {
    color: #e4bd79 !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-target
.page-shell.main-content .content-area #annualTargetPage.enterprise-target-wrapper .btn-action.danger {
    color: #e2a0ad !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-target
.page-shell.main-content .content-area #annualTargetPage.enterprise-target-wrapper :is(.btn, .btn-enterprise-save, .btn-action) > i,
html body#sppkAppShell.sppk-app-shell.dark.sppk-route-target
#editPetakModal :is(.btn, .btn-enterprise-save) > i {
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-target
.page-shell.main-content .content-area #annualTargetPage.enterprise-target-wrapper .modern-input,
html body#sppkAppShell.sppk-app-shell.dark.sppk-route-target
#editPetakModal .modern-input,
html body#sppkAppShell.sppk-app-shell.dark.sppk-route-edit_target
.page-shell.main-content .content-area .form-control {
    border-color: var(--sppk-theme-line) !important;
    background-color: var(--sppk-theme-input) !important;
    color: var(--sppk-theme-text) !important;
    -webkit-text-fill-color: currentColor !important;
    box-shadow: none !important;
    color-scheme: dark;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-target
.page-shell.main-content .content-area #annualTargetPage.enterprise-target-wrapper .modern-input:focus,
html body#sppkAppShell.sppk-app-shell.dark.sppk-route-target
#editPetakModal .modern-input:focus,
html body#sppkAppShell.sppk-app-shell.dark.sppk-route-edit_target
.page-shell.main-content .content-area .form-control:focus {
    border-color: var(--sppk-theme-subtle) !important;
    outline: 2px solid var(--sppk-theme-brand) !important;
    outline-offset: 2px;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-target
.page-shell.main-content .content-area #annualTargetPage.enterprise-target-wrapper .modern-input::placeholder,
html body#sppkAppShell.sppk-app-shell.dark.sppk-route-target
#editPetakModal .modern-input::placeholder,
html body#sppkAppShell.sppk-app-shell.dark.sppk-route-edit_target
.page-shell.main-content .content-area .form-control::placeholder {
    color: var(--sppk-theme-placeholder) !important;
    -webkit-text-fill-color: currentColor !important;
    opacity: 1;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-target
.page-shell.main-content .content-area #annualTargetPage.enterprise-target-wrapper option {
    background-color: var(--sppk-theme-input) !important;
    color: var(--sppk-theme-text) !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-target
#editPetakModal :is(.modal-content, .modal-body),
html body#sppkAppShell.sppk-app-shell.dark.sppk-route-edit_target
.page-shell.main-content .content-area .card-body {
    border-color: var(--sppk-theme-line) !important;
    background: var(--sppk-theme-surface) !important;
    background-image: none !important;
    color: var(--sppk-theme-copy) !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-target
#editPetakModal .modal-content {
    box-shadow: var(--sppk-theme-shadow) !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-target
#editPetakModal :is(.modal-header, .modal-footer) {
    border-color: var(--sppk-theme-line) !important;
    background: var(--sppk-theme-surface-soft) !important;
    background-image: none !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-target
#editPetakModal .btn-close {
    border-color: var(--sppk-theme-line) !important;
    background-color: transparent !important;
    filter: invert(0.8) !important;
    opacity: 1 !important;
    box-shadow: none !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-target
#editPetakModal .btn-close:is(:hover, :focus-visible) {
    background-color: var(--sppk-theme-surface-raised) !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-target
#editPetakModal .btn-close:focus-visible {
    outline: 2px solid var(--sppk-theme-brand) !important;
    outline-offset: 2px;
}

/* PLOT PROGRESS V18 — NEUTRAL NIGHT MAP AND ATTRIBUTE DIALOGS
   Keep data fills, road colors, geometry, clip paths, layer visibility,
   progress values and saved user colors intact. */
html body#sppkAppShell.sppk-app-shell.dark.sppk-route-progress_petak
.page-shell.main-content .content-area #progressPetakHeader,
html body#sppkAppShell.sppk-app-shell.dark.sppk-route-progress_petak
.page-shell.main-content .content-area #progressPetakControls,
html body#sppkAppShell.sppk-app-shell.dark.sppk-route-progress_petak
.page-shell.main-content .content-area #progressPetakMap {
    border-color: var(--sppk-theme-line) !important;
    background: var(--sppk-theme-surface) !important;
    background-image: none !important;
    box-shadow: var(--sppk-theme-shadow-soft) !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-progress_petak
.page-shell.main-content .content-area #progressPetakMap {
    animation: none !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-progress_petak
#svgPetak {
    background: var(--sppk-theme-page) !important;
    background-image: none !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-progress_petak
.page-shell.main-content .content-area #progressPetakHeader h2 {
    color: var(--sppk-theme-heading) !important;
    -webkit-text-fill-color: currentColor !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-progress_petak
.page-shell.main-content .content-area #progressPetakHeader p,
html body#sppkAppShell.sppk-app-shell.dark.sppk-route-progress_petak
.page-shell.main-content .content-area #progressPetakControls :is(label, .petak-download-title, .legend-config) {
    color: var(--sppk-theme-copy) !important;
    -webkit-text-fill-color: currentColor !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-progress_petak
.page-shell.main-content .content-area #progressPetakHeader .progress-petak-eyebrow {
    color: var(--sppk-theme-muted) !important;
    -webkit-text-fill-color: currentColor !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-progress_petak
.page-shell.main-content .content-area #progressPetakHeader .progress-petak-eyebrow > i {
    color: var(--sppk-theme-link) !important;
    -webkit-text-fill-color: currentColor !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-progress_petak
.page-shell.main-content .content-area #progressPetakHeader .progress-petak-status {
    border-color: var(--sppk-theme-line) !important;
    background: var(--sppk-theme-surface-raised) !important;
    color: var(--sppk-theme-link) !important;
    -webkit-text-fill-color: currentColor !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-progress_petak
.page-shell.main-content .content-area #progressPetakControls :is(.petak-download-popover, .legend-config) {
    border-color: var(--sppk-theme-line) !important;
    background: var(--sppk-theme-surface-soft) !important;
    background-image: none !important;
    color: var(--sppk-theme-copy) !important;
    box-shadow: var(--sppk-theme-shadow) !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-progress_petak
.page-shell.main-content .content-area #progressPetakControls .legend-config :is(h5, .petak-download-title) {
    color: var(--sppk-theme-heading) !important;
    -webkit-text-fill-color: currentColor !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-progress_petak
.page-shell.main-content .content-area #progressPetakControls .legend-config hr {
    border-color: var(--sppk-theme-line) !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-progress_petak
.page-shell.main-content .content-area #progressPetakControls select {
    border-color: var(--sppk-theme-line) !important;
    background-color: var(--sppk-theme-input) !important;
    color: var(--sppk-theme-text) !important;
    -webkit-text-fill-color: currentColor !important;
    box-shadow: none !important;
    color-scheme: dark;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-progress_petak
.page-shell.main-content .content-area #progressPetakControls option {
    background-color: var(--sppk-theme-input) !important;
    color: var(--sppk-theme-text) !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-progress_petak
.page-shell.main-content .content-area #progressPetakControls select:focus-visible {
    border-color: var(--sppk-theme-subtle) !important;
    outline: 2px solid var(--sppk-theme-brand) !important;
    outline-offset: 2px;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-progress_petak
.page-shell.main-content .content-area #progressPetakControls input[type="checkbox"] {
    accent-color: var(--sppk-theme-brand);
    color-scheme: dark;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-progress_petak
.page-shell.main-content .content-area #progressPetakControls :is(.petak-icon-action, [id="legendToggle"], [id="btnDownloadKML"], .road-size),
html body#sppkAppShell.sppk-app-shell.dark.sppk-route-progress_petak
#petakInfoModal .petak-info-close,
html body#sppkAppShell.sppk-app-shell.dark.sppk-route-progress_petak
#jalanInfoModal .jalan-info-close {
    border-color: var(--sppk-theme-line) !important;
    background: var(--sppk-theme-surface-raised) !important;
    background-image: none !important;
    color: var(--sppk-theme-text) !important;
    -webkit-text-fill-color: currentColor !important;
    box-shadow: none !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-progress_petak
.page-shell.main-content .content-area #progressPetakControls :is(.petak-icon-action, [id="legendToggle"], [id="btnDownloadKML"], .road-size):is(:hover, :focus-visible),
html body#sppkAppShell.sppk-app-shell.dark.sppk-route-progress_petak
#petakInfoModal .petak-info-close:is(:hover, :focus-visible),
html body#sppkAppShell.sppk-app-shell.dark.sppk-route-progress_petak
#jalanInfoModal .jalan-info-close:is(:hover, :focus-visible) {
    border-color: var(--sppk-theme-subtle) !important;
    background: #333333 !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-progress_petak
.page-shell.main-content .content-area #progressPetakControls .petak-download-menu[open] > .petak-icon-action {
    background: #333333 !important;
    color: var(--sppk-theme-link) !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-progress_petak
.page-shell.main-content .content-area #progressPetakControls :is(.petak-icon-action, [id="legendToggle"], [id="btnDownloadKML"], .road-size) > :is(i, span),
html body#sppkAppShell.sppk-app-shell.dark.sppk-route-progress_petak
.page-shell.main-content .content-area #progressPetakHeader .progress-petak-status > i {
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-progress_petak
.page-shell.main-content .content-area #progressPetakControls :is(.petak-icon-action, [id="legendToggle"], [id="btnDownloadKML"], .road-size):focus-visible,
html body#sppkAppShell.sppk-app-shell.dark.sppk-route-progress_petak
#petakInfoModal .petak-info-close:focus-visible,
html body#sppkAppShell.sppk-app-shell.dark.sppk-route-progress_petak
#jalanInfoModal .jalan-info-close:focus-visible {
    outline: 2px solid var(--sppk-theme-brand) !important;
    outline-offset: 2px;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-progress_petak
.page-shell.main-content .content-area #progressPetakControls .color-choice {
    border-color: var(--sppk-theme-line) !important;
    box-shadow: 0 0 0 1px var(--sppk-theme-subtle) !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-progress_petak
#svgPetak .petak-interactive > polygon:first-of-type {
    fill: var(--sppk-theme-surface-raised) !important;
    stroke: var(--sppk-theme-subtle) !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-progress_petak
#svgPetak .petak-interactive:is(:hover, :focus) > polygon:first-of-type {
    stroke: var(--sppk-theme-link) !important;
    filter: drop-shadow(0 0 3px rgba(121, 217, 174, 0.25)) !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-progress_petak
#svgPetak .petak-interactive > text {
    fill: var(--sppk-theme-heading) !important;
    color: var(--sppk-theme-heading) !important;
    -webkit-text-fill-color: currentColor !important;
    stroke: var(--sppk-theme-page) !important;
    stroke-width: 2px;
    stroke-linejoin: round;
    paint-order: stroke fill;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-progress_petak
#petakInfoModal,
html body#sppkAppShell.sppk-app-shell.dark.sppk-route-progress_petak
#jalanInfoModal {
    background: rgba(0, 0, 0, 0.64) !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-progress_petak
#petakInfoModal .petak-info-card,
html body#sppkAppShell.sppk-app-shell.dark.sppk-route-progress_petak
#jalanInfoModal .jalan-info-card {
    border-color: var(--sppk-theme-line) !important;
    background: var(--sppk-theme-surface) !important;
    background-image: none !important;
    color: var(--sppk-theme-text) !important;
    box-shadow: var(--sppk-theme-shadow) !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-progress_petak
#petakInfoModal .petak-info-grid > div,
html body#sppkAppShell.sppk-app-shell.dark.sppk-route-progress_petak
#jalanInfoModal .jalan-info-item {
    border-color: var(--sppk-theme-line) !important;
    background: var(--sppk-theme-surface-soft) !important;
    background-image: none !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-progress_petak
#petakInfoModal :is(h3, strong),
html body#sppkAppShell.sppk-app-shell.dark.sppk-route-progress_petak
#jalanInfoModal :is(h3, strong) {
    color: var(--sppk-theme-heading) !important;
    -webkit-text-fill-color: currentColor !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-progress_petak
#petakInfoModal :is(.petak-info-header span, .petak-info-header small, .petak-info-grid span, .petak-info-note, .petak-info-progress > div:first-child > span),
html body#sppkAppShell.sppk-app-shell.dark.sppk-route-progress_petak
#jalanInfoModal :is(.jalan-info-jenis, .jalan-info-item > span) {
    color: var(--sppk-theme-copy) !important;
    -webkit-text-fill-color: currentColor !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-progress_petak
#petakInfoModal .petak-info-icon,
html body#sppkAppShell.sppk-app-shell.dark.sppk-route-progress_petak
#jalanInfoModal .jalan-info-icon {
    background: var(--sppk-theme-surface-raised) !important;
    background-image: none !important;
    color: var(--sppk-theme-link) !important;
    -webkit-text-fill-color: currentColor !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-progress_petak
#petakInfoModal :is(.petak-info-icon > i, .petak-info-note > i) {
    color: var(--sppk-theme-link) !important;
    -webkit-text-fill-color: currentColor !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-progress_petak
#petakInfoModal .petak-info-track {
    background: var(--sppk-theme-line) !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-progress_petak
#petakInfoModal .petak-info-status {
    background: var(--sppk-theme-surface-raised) !important;
    background-image: none !important;
    color: #93bce8 !important;
    -webkit-text-fill-color: currentColor !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-progress_petak
#petakInfoModal .petak-info-status.is-complete {
    color: var(--sppk-theme-link) !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-progress_petak
#petakInfoModal .petak-info-status.is-empty {
    color: var(--sppk-theme-muted) !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-progress_petak
#petakInfoModal .petak-info-status.is-muted {
    color: #e4bd79 !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-progress_petak
#petakInfoModal .petak-info-status > :is(i, span) {
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
}

/* INFORMATION CENTER V19 — RECENT TICKET ICONS ONLY */
html body#sppkAppShell.sppk-app-shell.dark.sppk-route-pusat-informasi
.page-shell.main-content .content-area #informationHub .information-list .list-icon:has(> i.bi-chat-left-text) {
    background: var(--sppk-theme-surface-raised) !important;
    color: #b6a4df !important;
    -webkit-text-fill-color: currentColor !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-pusat-informasi
.page-shell.main-content .content-area #informationHub .information-list .list-icon > i.bi-chat-left-text {
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
}

/* INFORMATION FOLDER MODAL V20 — VIEWPORT CENTERING AND NIGHT PALETTE
   Only this dialog is mounted on body; main-page cards stay unchanged.
   Bootstrap keeps ownership of visibility, focus, dismissal and backdrop. */
html body#sppkAppShell.sppk-app-shell.sppk-route-pusat-informasi
> #informationFolderModal {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

html body#sppkAppShell.sppk-app-shell.sppk-route-pusat-informasi
> #informationFolderModal > .modal-dialog {
    display: flex !important;
    align-items: center !important;
    width: calc(100% - 32px) !important;
    max-width: 1180px !important;
    height: calc(100% - 32px) !important;
    min-height: 0 !important;
    margin: 16px auto !important;
    transform: none !important;
    pointer-events: none;
}

html body#sppkAppShell.sppk-app-shell.sppk-route-pusat-informasi
> #informationFolderModal .modal-content {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    min-height: 0;
    max-height: 100% !important;
    border: 1px solid var(--sppk-theme-line) !important;
    border-radius: 16px !important;
    overflow: hidden;
    pointer-events: auto;
}

html body#sppkAppShell.sppk-app-shell.sppk-route-pusat-informasi
> #informationFolderModal :is(.modal-header, .modal-footer) {
    flex: 0 0 auto;
}

html body#sppkAppShell.sppk-app-shell.sppk-route-pusat-informasi
> #informationFolderModal .modal-body {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    min-height: 0;
    overflow: auto;
}

html body#sppkAppShell.sppk-app-shell.sppk-route-pusat-informasi
> #informationFolderModal .table-responsive {
    overflow: auto;
    border: 1px solid var(--sppk-theme-line) !important;
    border-radius: 14px;
    box-shadow: var(--sppk-theme-shadow-soft);
}

html body#sppkAppShell.sppk-app-shell.sppk-route-pusat-informasi
> #informationFolderModal .modal-title {
    font-size: var(--sppk-font-h2) !important;
    line-height: 1.22 !important;
}

html body#sppkAppShell.sppk-app-shell.sppk-route-pusat-informasi
> #informationFolderModal small,
html body#sppkAppShell.sppk-app-shell.sppk-route-pusat-informasi
> #informationFolderModal .information-popup-table th {
    font-size: max(11px, 0.6875rem) !important;
    line-height: 1.35 !important;
}

html body#sppkAppShell.sppk-app-shell.sppk-route-pusat-informasi
> #informationFolderModal p {
    font-size: max(13px, 0.8125rem) !important;
    line-height: 1.5 !important;
}

html body#sppkAppShell.sppk-app-shell.sppk-route-pusat-informasi
> #informationFolderModal .information-popup-table td {
    font-size: max(12px, 0.75rem) !important;
    line-height: 1.45 !important;
}

html body#sppkAppShell.sppk-app-shell.sppk-route-pusat-informasi
> #informationFolderModal .btn-close {
    font-size: max(11.5px, 0.71875rem) !important;
    line-height: 1.3 !important;
}

html body#sppkAppShell.sppk-app-shell:not(.dark).sppk-route-pusat-informasi
> #informationFolderModal :is(.modal-content, .table-responsive) {
    background: var(--sppk-theme-surface) !important;
    background-image: none !important;
    box-shadow: var(--sppk-theme-shadow-soft) !important;
}

html body#sppkAppShell.sppk-app-shell:not(.dark).sppk-route-pusat-informasi
> #informationFolderModal :is(.information-modal-title-wrap, .information-modal-title-wrap div, .information-modal-title-wrap span, .information-modal-title-wrap small, .information-modal-title-wrap h2, .information-modal-title-wrap p, .information-table-toolbar > span, .information-popup-table th, .information-popup-table td, .information-modal-footer > span) {
    color: #334155 !important;
}

html body#sppkAppShell.sppk-app-shell:not(.dark).sppk-route-pusat-informasi
> #informationFolderModal :is(.information-popup-empty, .information-popup-empty span, .information-popup-empty strong, .information-popup-empty p, .information-modal-title-wrap i, .information-table-toolbar i, .information-modal-footer > span i) {
    color: var(--sppk-theme-copy) !important;
    -webkit-text-fill-color: currentColor !important;
}

html body#sppkAppShell.sppk-app-shell:not(.dark).sppk-route-pusat-informasi
> #informationFolderModal :is(.information-popup-empty, .information-modal-title-wrap i, .information-table-toolbar i, .information-modal-footer > span i) {
    text-shadow: none !important;
    filter: none !important;
    opacity: 1 !important;
    mix-blend-mode: normal !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-pusat-informasi
> #informationFolderModal {
    --ifm-accent: #bcc6d3 !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-pusat-informasi
> #informationFolderModal[data-tone="danger"] {
    --ifm-accent: #e2a0ad !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-pusat-informasi
> #informationFolderModal[data-tone="amber"] {
    --ifm-accent: #e4bd79 !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-pusat-informasi
> #informationFolderModal[data-tone="violet"] {
    --ifm-accent: #b6a4df !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-pusat-informasi
> #informationFolderModal[data-tone="green"] {
    --ifm-accent: #79d9ae !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-pusat-informasi
> #informationFolderModal[data-tone="blue"] {
    --ifm-accent: #93bce8 !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-pusat-informasi
> #informationFolderModal[data-tone="slate"] {
    --ifm-accent: #bcc6d3 !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-pusat-informasi
> #informationFolderModal :is(.modal-content, .modal-body, .information-table-shell, .table-responsive) {
    border-color: var(--sppk-theme-line) !important;
    background: var(--sppk-theme-surface) !important;
    background-image: none !important;
    color: var(--sppk-theme-text) !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-pusat-informasi
> #informationFolderModal .modal-content {
    box-shadow: var(--sppk-theme-shadow) !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-pusat-informasi
> #informationFolderModal :is(.information-modal-header, .information-modal-footer, .information-table-toolbar) {
    border-color: var(--sppk-theme-line) !important;
    background: var(--sppk-theme-surface-soft) !important;
    background-image: none !important;
    color: var(--sppk-theme-copy) !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-pusat-informasi
> #informationFolderModal :is(.modal-title, .information-popup-empty strong) {
    color: var(--sppk-theme-heading) !important;
    -webkit-text-fill-color: currentColor !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-pusat-informasi
> #informationFolderModal :is(.information-modal-title-wrap small, .information-modal-title-wrap p, .information-table-toolbar > span, .information-modal-footer > span, .information-popup-empty p) {
    color: var(--sppk-theme-copy) !important;
    -webkit-text-fill-color: currentColor !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-pusat-informasi
> #informationFolderModal :is(.information-modal-icon, .information-popup-empty > span, .information-table-toolbar > b) {
    border-color: var(--sppk-theme-line) !important;
    background: var(--sppk-theme-surface-raised) !important;
    background-image: none !important;
    color: var(--ifm-accent) !important;
    -webkit-text-fill-color: currentColor !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-pusat-informasi
> #informationFolderModal :is(.information-modal-icon i, .information-popup-empty > span i, .information-table-toolbar > span i, .information-modal-footer > span i) {
    color: var(--ifm-accent) !important;
    -webkit-text-fill-color: currentColor !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-pusat-informasi
> #informationFolderModal .information-popup-table :is(th, td) {
    border-color: var(--sppk-theme-line) !important;
    background-image: none !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-pusat-informasi
> #informationFolderModal .information-popup-table th {
    background: var(--sppk-theme-surface-soft) !important;
    color: var(--sppk-theme-copy) !important;
    -webkit-text-fill-color: currentColor !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-pusat-informasi
> #informationFolderModal .information-popup-table td {
    background: var(--sppk-theme-surface) !important;
    color: var(--sppk-theme-text) !important;
    -webkit-text-fill-color: currentColor !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-pusat-informasi
> #informationFolderModal .information-popup-table tbody tr:hover td {
    background: var(--sppk-theme-surface-soft) !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-pusat-informasi
> #informationFolderModal .information-popup-table td[data-status="open"] {
    color: #e4bd79 !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-pusat-informasi
> #informationFolderModal .information-popup-table td[data-status="diproses"] {
    color: #93bce8 !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-pusat-informasi
> #informationFolderModal .information-popup-table td[data-status="selesai"] {
    color: #79d9ae !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-pusat-informasi
> #informationFolderModal .information-popup-table td[data-status="ditutup"] {
    color: #79d9ae !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-pusat-informasi
> #informationFolderModal .information-source-link {
    border-color: var(--sppk-theme-line) !important;
    background: var(--sppk-theme-surface-raised) !important;
    background-image: none !important;
    color: var(--ifm-accent) !important;
    -webkit-text-fill-color: currentColor !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-pusat-informasi
> #informationFolderModal .information-source-link > i {
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-pusat-informasi
> #informationFolderModal .information-source-link:is(:hover, :focus-visible) {
    border-color: var(--sppk-theme-subtle) !important;
    background: #333333 !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-pusat-informasi
> #informationFolderModal .btn-close {
    border-color: var(--sppk-theme-line) !important;
    background-color: transparent !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 4 8 8M12 4l-8 8' fill='none' stroke='%23cccccc' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") !important;
    filter: none !important;
    opacity: 1 !important;
    box-shadow: none !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-pusat-informasi
> #informationFolderModal .btn-close:is(:hover, :focus-visible) {
    background-color: var(--sppk-theme-surface-raised) !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-pusat-informasi
> #informationFolderModal :is(.btn-close, .information-source-link):focus-visible {
    outline: 2px solid var(--sppk-theme-brand) !important;
    outline-offset: 2px;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-pusat-informasi:has(> #informationFolderModal.show)
> .modal-backdrop {
    background-color: #000000 !important;
    background-image: none !important;
}

/* UPLOAD KML V21 — NEUTRAL NIGHT WORKSPACE
   Scoped to upload_kml and its existing regions. Native upload, parsing,
   year/date/layer fields and dataset actions keep their original behavior. */
html body#sppkAppShell.sppk-app-shell.dark.sppk-route-upload_kml
.page-shell.main-content .content-area :is(#kmlPageHeader, #kmlDatasetSummary, #kmlUploadPanel, #kmlDatasetPanel, .parse-result, .alert) {
    border-color: var(--sppk-theme-line) !important;
    background: var(--sppk-theme-surface) !important;
    background-image: none !important;
    color: var(--sppk-theme-text) !important;
    box-shadow: var(--sppk-theme-shadow-soft) !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-upload_kml
.page-shell.main-content .content-area #kmlPageHeader::before,
html body#sppkAppShell.sppk-app-shell.dark.sppk-route-upload_kml
.page-shell.main-content .content-area #kmlPageHeader::after,
html body#sppkAppShell.sppk-app-shell.dark.sppk-route-upload_kml
.page-shell.main-content .content-area #kmlDatasetSummary .gis-card::before {
    display: none !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-upload_kml
.page-shell.main-content .content-area :is(#kmlPageHeader, #kmlDatasetSummary, #kmlUploadPanel, #kmlDatasetPanel, .parse-result, .alert) :is(h1, h2, h3, h5, strong) {
    color: var(--sppk-theme-heading) !important;
    -webkit-text-fill-color: currentColor !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-upload_kml
.page-shell.main-content .content-area :is(#kmlPageHeader, #kmlDatasetSummary, #kmlUploadPanel, #kmlDatasetPanel, .parse-result, .alert) :is(p, small, label, .modern-label, .gis-badge, .file-kml > span) {
    color: var(--sppk-theme-copy) !important;
    -webkit-text-fill-color: currentColor !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-upload_kml
.page-shell.main-content .content-area :is(#kmlPageHeader, #kmlDatasetSummary, #kmlUploadPanel, #kmlDatasetPanel, .parse-result, .alert) i {
    color: var(--sppk-theme-copy) !important;
    -webkit-text-fill-color: currentColor !important;
    filter: none !important;
    text-shadow: none !important;
    opacity: 1 !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-upload_kml
.page-shell.main-content .content-area #kmlPageHeader .gis-badge {
    background: transparent !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-upload_kml
.page-shell.main-content .content-area #kmlDatasetSummary > summary,
html body#sppkAppShell.sppk-app-shell.dark.sppk-route-upload_kml
.page-shell.main-content .content-area #kmlUploadPanel .panel-header,
html body#sppkAppShell.sppk-app-shell.dark.sppk-route-upload_kml
.page-shell.main-content .content-area #kmlDatasetPanel .panel-header {
    border-color: var(--sppk-theme-line) !important;
    background: var(--sppk-theme-surface-soft) !important;
    background-image: none !important;
    color: var(--sppk-theme-copy) !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-upload_kml
.page-shell.main-content .content-area #kmlDatasetSummary > summary > span {
    color: var(--sppk-theme-copy) !important;
    -webkit-text-fill-color: currentColor !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-upload_kml
.page-shell.main-content .content-area #kmlDatasetSummary > summary small,
html body#sppkAppShell.sppk-app-shell.dark.sppk-route-upload_kml
.page-shell.main-content .content-area #kmlDatasetSummary .gis-card > span {
    color: var(--sppk-theme-muted) !important;
    -webkit-text-fill-color: currentColor !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-upload_kml
.page-shell.main-content .content-area #kmlDatasetSummary > summary::after {
    color: var(--sppk-theme-copy) !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-upload_kml
.page-shell.main-content .content-area #kmlDatasetSummary > summary:is(:hover, :focus-visible) {
    background: var(--sppk-theme-surface-raised) !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-upload_kml
.page-shell.main-content .content-area #kmlDatasetSummary .gis-card {
    border-color: var(--sppk-theme-line) !important;
    background: var(--sppk-theme-surface-soft) !important;
    background-image: none !important;
    box-shadow: none !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-upload_kml
.page-shell.main-content .content-area #kmlUploadPanel :is(.panel-icon, .btn-enterprise-save),
html body#sppkAppShell.sppk-app-shell.dark.sppk-route-upload_kml
.page-shell.main-content .content-area #kmlDatasetPanel :is(.panel-icon, .btn-action, .tahun-badge, .badge),
html body#sppkAppShell.sppk-app-shell.dark.sppk-route-upload_kml
.page-shell.main-content .content-area :is(#kmlPageHeader, #kmlDatasetSummary, #kmlUploadPanel, #kmlDatasetPanel, .parse-result, .alert) .petak-badge {
    border-color: var(--sppk-theme-line) !important;
    background: var(--sppk-theme-surface-raised) !important;
    background-image: none !important;
    color: var(--sppk-theme-copy) !important;
    -webkit-text-fill-color: currentColor !important;
    box-shadow: none !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-upload_kml
.page-shell.main-content .content-area #kmlUploadPanel .upload-box {
    border-color: var(--sppk-theme-subtle) !important;
    background: var(--sppk-theme-surface-soft) !important;
    background-image: none !important;
    box-shadow: none !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-upload_kml
.page-shell.main-content .content-area #kmlUploadPanel .upload-box:hover {
    border-color: var(--sppk-theme-muted) !important;
    background: var(--sppk-theme-surface-raised) !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-upload_kml
.page-shell.main-content .content-area #kmlUploadPanel .drop-zone {
    border-color: var(--sppk-theme-line) !important;
    background: var(--sppk-theme-surface) !important;
    background-image: none !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-upload_kml
.page-shell.main-content .content-area #kmlUploadPanel :is(.panel-icon.success, .panel-icon.success i, .drop-zone > i, .btn-enterprise-save),
html body#sppkAppShell.sppk-app-shell.dark.sppk-route-upload_kml
.page-shell.main-content .content-area :is(#kmlPageHeader, #kmlDatasetSummary, #kmlUploadPanel, #kmlDatasetPanel, .parse-result, .alert) :is(.petak-badge, .bi-check-circle-fill) {
    color: var(--sppk-theme-link) !important;
    -webkit-text-fill-color: currentColor !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-upload_kml
.page-shell.main-content .content-area #kmlDatasetPanel :is(.panel-icon.primary, .panel-icon.primary i, .file-kml > i) {
    color: #93bce8 !important;
    -webkit-text-fill-color: currentColor !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-upload_kml
.page-shell.main-content .content-area #kmlUploadPanel :is(.modern-input, .modern-input option) {
    border-color: var(--sppk-theme-line) !important;
    background: var(--sppk-theme-input) !important;
    background-image: none !important;
    color: var(--sppk-theme-text) !important;
    -webkit-text-fill-color: currentColor !important;
    color-scheme: dark;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-upload_kml
.page-shell.main-content .content-area #kmlUploadPanel .modern-input::placeholder {
    color: var(--sppk-theme-placeholder) !important;
    -webkit-text-fill-color: currentColor !important;
    opacity: 1 !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-upload_kml
.page-shell.main-content .content-area #kmlUploadPanel .modern-input:focus {
    border-color: var(--sppk-theme-brand) !important;
    box-shadow: 0 0 0 3px rgba(99, 214, 160, 0.14) !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-upload_kml
.page-shell.main-content .content-area #kmlUploadPanel input[type="file"]::file-selector-button {
    border-color: var(--sppk-theme-line) !important;
    background: var(--sppk-theme-surface-raised) !important;
    color: var(--sppk-theme-copy) !important;
    -webkit-text-fill-color: currentColor !important;
    box-shadow: none !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-upload_kml
.page-shell.main-content .content-area #kmlUploadPanel input[type="file"]:hover::file-selector-button {
    background: #333333 !important;
    color: var(--sppk-theme-heading) !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-upload_kml
.page-shell.main-content .content-area #kmlUploadPanel .btn-enterprise-save:is(:hover, :focus-visible),
html body#sppkAppShell.sppk-app-shell.dark.sppk-route-upload_kml
.page-shell.main-content .content-area #kmlDatasetPanel .btn-action:is(:hover, :focus-visible) {
    border-color: var(--sppk-theme-subtle) !important;
    background: #333333 !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-upload_kml
.page-shell.main-content .content-area #kmlUploadPanel .btn-enterprise-save:focus-visible,
html body#sppkAppShell.sppk-app-shell.dark.sppk-route-upload_kml
.page-shell.main-content .content-area #kmlDatasetPanel .btn-action:focus-visible,
html body#sppkAppShell.sppk-app-shell.dark.sppk-route-upload_kml
.page-shell.main-content .content-area #kmlDatasetSummary > summary:focus-visible {
    outline: 2px solid var(--sppk-theme-brand) !important;
    outline-offset: 2px;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-upload_kml
.page-shell.main-content .content-area #kmlDatasetPanel .btn-action.success {
    color: var(--sppk-theme-link) !important;
    -webkit-text-fill-color: currentColor !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-upload_kml
.page-shell.main-content .content-area #kmlDatasetPanel .btn-action.danger {
    color: #e2a0ad !important;
    -webkit-text-fill-color: currentColor !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-upload_kml
.page-shell.main-content .content-area #kmlDatasetPanel .btn-action i {
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-upload_kml
.page-shell.main-content .content-area #kmlDatasetPanel .badge.bg-success {
    color: var(--sppk-theme-link) !important;
    -webkit-text-fill-color: currentColor !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-upload_kml
.page-shell.main-content .content-area #kmlDatasetPanel .badge.bg-primary {
    color: #93bce8 !important;
    -webkit-text-fill-color: currentColor !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-upload_kml
.page-shell.main-content .content-area #kmlDatasetPanel .badge.bg-warning {
    color: #e4bd79 !important;
    -webkit-text-fill-color: currentColor !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-upload_kml
.page-shell.main-content .content-area #kmlDatasetPanel .table-wrapper {
    border-color: var(--sppk-theme-line) !important;
    background: var(--sppk-theme-surface) !important;
    background-image: none !important;
    box-shadow: none !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-upload_kml
.page-shell.main-content .content-area #kmlDatasetPanel .enterprise-table {
    --bs-table-bg: var(--sppk-theme-surface) !important;
    --bs-table-color: var(--sppk-theme-text) !important;
    --bs-table-striped-bg: var(--sppk-theme-surface-soft) !important;
    --bs-table-hover-bg: var(--sppk-theme-surface-soft) !important;
    --bs-table-hover-color: var(--sppk-theme-text) !important;
    --bs-table-accent-bg: transparent !important;
    border-color: var(--sppk-theme-line) !important;
    background: var(--sppk-theme-surface) !important;
    color: var(--sppk-theme-text) !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-upload_kml
.page-shell.main-content .content-area #kmlDatasetPanel .enterprise-table :is(th, td) {
    border-color: var(--sppk-theme-line) !important;
    background-image: none !important;
    box-shadow: none !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-upload_kml
.page-shell.main-content .content-area #kmlDatasetPanel .enterprise-table thead th {
    background: var(--sppk-theme-surface-soft) !important;
    color: var(--sppk-theme-copy) !important;
    -webkit-text-fill-color: currentColor !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-upload_kml
.page-shell.main-content .content-area #kmlDatasetPanel .enterprise-table tbody td {
    background: var(--sppk-theme-surface) !important;
    color: var(--sppk-theme-text) !important;
    -webkit-text-fill-color: currentColor !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-upload_kml
.page-shell.main-content .content-area #kmlDatasetPanel .enterprise-table tbody tr:hover,
html body#sppkAppShell.sppk-app-shell.dark.sppk-route-upload_kml
.page-shell.main-content .content-area #kmlDatasetPanel .enterprise-table tbody tr:hover td {
    background: var(--sppk-theme-surface-soft) !important;
    background-image: none !important;
    box-shadow: none !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-upload_kml
.page-shell.main-content .content-area :is(#kmlPageHeader, #kmlDatasetSummary, #kmlUploadPanel, #kmlDatasetPanel, .parse-result, .alert).alert,
html body#sppkAppShell.sppk-app-shell.dark.sppk-route-upload_kml
.page-shell.main-content .content-area :is(#kmlPageHeader, #kmlDatasetSummary, #kmlUploadPanel, #kmlDatasetPanel, .parse-result, .alert).parse-result {
    border-color: var(--sppk-theme-line) !important;
    background: var(--sppk-theme-surface-soft) !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-upload_kml
.page-shell.main-content .content-area :is(#kmlPageHeader, #kmlDatasetSummary, #kmlUploadPanel, #kmlDatasetPanel, .parse-result, .alert).alert-success,
html body#sppkAppShell.sppk-app-shell.dark.sppk-route-upload_kml
.page-shell.main-content .content-area :is(#kmlPageHeader, #kmlDatasetSummary, #kmlUploadPanel, #kmlDatasetPanel, .parse-result, .alert).alert-success :is(strong, p) {
    color: var(--sppk-theme-link) !important;
    -webkit-text-fill-color: currentColor !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-upload_kml
.page-shell.main-content .content-area :is(#kmlPageHeader, #kmlDatasetSummary, #kmlUploadPanel, #kmlDatasetPanel, .parse-result, .alert).alert-danger,
html body#sppkAppShell.sppk-app-shell.dark.sppk-route-upload_kml
.page-shell.main-content .content-area :is(#kmlPageHeader, #kmlDatasetSummary, #kmlUploadPanel, #kmlDatasetPanel, .parse-result, .alert).alert-danger :is(strong, p) {
    color: #e2a0ad !important;
    -webkit-text-fill-color: currentColor !important;
}

html body#sppkAppShell.sppk-app-shell.dark.sppk-route-upload_kml
.page-shell.main-content .content-area :is(#kmlPageHeader, #kmlDatasetSummary, #kmlUploadPanel, #kmlDatasetPanel, .parse-result, .alert).parse-result hr {
    border-color: var(--sppk-theme-line) !important;
}

/* SETTINGS V22 — GLOBAL DIALOG WITH CATEGORY SIDEBAR
   Native dialog owns the top layer and focus containment. Child settings
   pages retain their original forms, CSRF and processing endpoints. */
html body#sppkAppShell.sppk-app-shell > #sppkSettingsDialog {
    --settings-selected: #edf0f2;
    position: fixed;
    inset: 0;
    width: min(1040px, calc(100% - 40px));
    max-width: calc(100% - 40px) !important;
    height: min(700px, calc(100vh - 56px));
    height: min(700px, calc(100dvh - 56px));
    max-height: calc(100% - 32px);
    margin: auto !important;
    padding: 0 !important;
    grid-template-columns: 216px minmax(0, 1fr);
    overflow: hidden;
    border: 1px solid var(--sppk-theme-line);
    border-radius: 18px;
    background: var(--sppk-theme-surface);
    color: var(--sppk-theme-text);
    box-shadow: 0 28px 90px rgba(0, 0, 0, .24);
    font-size: 13px;
    line-height: 1.45;
}
html body#sppkAppShell.sppk-app-shell.dark > #sppkSettingsDialog { --settings-selected: #333333; }
html body#sppkAppShell.sppk-app-shell > #sppkSettingsDialog[open] { display: grid !important; }
html body#sppkAppShell.sppk-app-shell > #sppkSettingsDialog:not([open]) { display: none !important; }
html body#sppkAppShell.sppk-app-shell > #sppkSettingsDialog::backdrop { background: rgba(0, 0, 0, .48); }
html body#sppkAppShell.sppk-app-shell > #sppkSettingsDialog,
html body#sppkAppShell.sppk-app-shell > #sppkSettingsDialog * { box-sizing: border-box; }
html body#sppkAppShell.sppk-app-shell > #sppkSettingsDialog [hidden] { display: none !important; }
html body#sppkAppShell.sppk-app-shell > #sppkSettingsDialog :is(button, a, select) { -webkit-tap-highlight-color: transparent; }
html body#sppkAppShell.sppk-app-shell > #sppkSettingsDialog :is(button, a, select):focus-visible { outline: 2px solid var(--sppk-theme-brand); outline-offset: 3px; }
html body#sppkAppShell.sppk-app-shell > #sppkSettingsDialog :is(button, select) { font: inherit; }
html body#sppkAppShell.sppk-app-shell > #sppkSettingsDialog button { cursor: pointer; }
html body#sppkAppShell.sppk-app-shell > #sppkSettingsDialog svg { width: 19px; height: 19px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
html body#sppkAppShell.sppk-app-shell > #sppkSettingsDialog .settings-symbols { position: absolute; width: 0; height: 0; overflow: hidden; }
html body#sppkAppShell.sppk-app-shell > #sppkSettingsDialog .settings-sidebar { display: flex; flex-direction: column; min-height: 0; padding: 26px 12px 18px; border-right: 1px solid var(--sppk-theme-line); background: var(--sppk-theme-surface-soft); }
html body#sppkAppShell.sppk-app-shell > #sppkSettingsDialog .settings-sidebar-heading { padding: 0 12px 23px; }
html body#sppkAppShell.sppk-app-shell > #sppkSettingsDialog .settings-sidebar-heading h1 { margin: 0 0 5px; color: var(--sppk-theme-heading); font-size: 20px; font-weight: 650; letter-spacing: -.035em; line-height: 1.25; }
html body#sppkAppShell.sppk-app-shell > #sppkSettingsDialog .settings-sidebar-heading > span { color: var(--sppk-theme-muted); font-size: 11px; }
html body#sppkAppShell.sppk-app-shell > #sppkSettingsDialog .settings-navigation { display: flex; flex-direction: column; gap: 4px; min-height: 0; overflow-y: auto; padding: 3px; }
html body#sppkAppShell.sppk-app-shell > #sppkSettingsDialog .settings-tab { display: flex; align-items: center; gap: 11px; width: 100%; min-height: 40px; margin: 0; padding: 10px 11px; border: 0; border-radius: 8px; background: transparent; color: var(--sppk-theme-copy); font-size: 12px; font-weight: 500; text-align: left; text-decoration: none; }
html body#sppkAppShell.sppk-app-shell > #sppkSettingsDialog .settings-tab:hover { background: var(--settings-selected); color: var(--sppk-theme-heading); }
html body#sppkAppShell.sppk-app-shell > #sppkSettingsDialog .settings-tab.is-active { background: var(--settings-selected); color: var(--sppk-theme-heading); font-weight: 650; }
html body#sppkAppShell.sppk-app-shell > #sppkSettingsDialog .settings-tab.is-active svg { color: var(--sppk-theme-link); }
html body#sppkAppShell.sppk-app-shell > #sppkSettingsDialog .settings-sidebar-footer { display: flex; align-items: center; gap: 9px; margin-top: auto; padding: 22px 10px 0; }
html body#sppkAppShell.sppk-app-shell > #sppkSettingsDialog .settings-app-mark { display: grid; flex: 0 0 auto; place-items: center; width: 30px; height: 30px; border: 1px solid var(--sppk-theme-line); border-radius: 8px; color: var(--sppk-theme-link); font-size: 16px; font-weight: 750; }
html body#sppkAppShell.sppk-app-shell > #sppkSettingsDialog .settings-sidebar-footer strong { display: block; color: var(--sppk-theme-copy); font-size: 11px; font-weight: 650; }
html body#sppkAppShell.sppk-app-shell > #sppkSettingsDialog .settings-sidebar-footer div > span { display: block; max-width: 135px; margin-top: 2px; color: var(--sppk-theme-muted); font-size: 9px; line-height: 1.4; }
html body#sppkAppShell.sppk-app-shell > #sppkSettingsDialog .settings-main { display: grid; grid-template-rows: auto minmax(0, 1fr); min-width: 0; min-height: 0; background: var(--sppk-theme-surface); }
html body#sppkAppShell.sppk-app-shell > #sppkSettingsDialog .settings-main-header { position: relative; z-index: 5; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; min-width: 0; padding: 24px 26px 20px 24px; border-bottom: 1px solid var(--sppk-theme-line); background: var(--sppk-theme-surface); }
html body#sppkAppShell.sppk-app-shell > #sppkSettingsDialog .settings-main-heading { display: flex; align-items: flex-start; gap: 13px; min-width: 0; }
html body#sppkAppShell.sppk-app-shell > #sppkSettingsDialog .settings-main-heading-copy { min-width: 0; }
html body#sppkAppShell.sppk-app-shell > #sppkSettingsDialog .settings-history-navigation { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 3px; margin-top: -1px; }
html body#sppkAppShell.sppk-app-shell > #sppkSettingsDialog .settings-history-navigation button { display: grid; place-items: center; width: 32px; height: 32px; margin: 0; padding: 0; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--sppk-theme-copy); transition: background-color .16s ease, border-color .16s ease, color .16s ease, opacity .16s ease; }
html body#sppkAppShell.sppk-app-shell > #sppkSettingsDialog .settings-history-navigation button svg { width: 18px; height: 18px; stroke-width: 1.9; }
html body#sppkAppShell.sppk-app-shell > #sppkSettingsDialog .settings-history-navigation button:not(:disabled):hover { border-color: var(--sppk-theme-line); background: var(--settings-selected); color: var(--sppk-theme-heading); }
html body#sppkAppShell.sppk-app-shell > #sppkSettingsDialog .settings-history-navigation button:disabled { cursor: default; color: var(--sppk-theme-muted); opacity: .34; }
html body#sppkAppShell.sppk-app-shell > #sppkSettingsDialog .settings-main-header h2 { margin: 0 0 5px; color: var(--sppk-theme-heading); font-size: 22px; font-weight: 650; letter-spacing: -.025em; line-height: 1.3; }
html body#sppkAppShell.sppk-app-shell > #sppkSettingsDialog .settings-main-header p { margin: 0; color: var(--sppk-theme-muted); font-size: 12px; line-height: 1.5; }
html body#sppkAppShell.sppk-app-shell > #sppkSettingsDialog .settings-close { display: grid; flex: 0 0 auto; place-items: center; width: 32px; height: 32px; margin: -2px -3px 0 0; padding: 6px; border: 0; border-radius: 8px; background: transparent; color: var(--sppk-theme-copy); }
html body#sppkAppShell.sppk-app-shell > #sppkSettingsDialog .settings-close:hover { background: var(--settings-selected); color: var(--sppk-theme-heading); }
html body#sppkAppShell.sppk-app-shell > #sppkSettingsDialog .settings-panels { min-width: 0; min-height: 0; overflow: hidden; }
html body#sppkAppShell.sppk-app-shell > #sppkSettingsDialog .settings-view { display: flex; flex-direction: column; width: 100%; height: 100%; min-width: 0; min-height: 0; overflow: hidden; }
html body#sppkAppShell.sppk-app-shell > #sppkSettingsDialog .settings-scroll-view { overflow-y: auto; padding: 6px 30px 28px; }
html body#sppkAppShell.sppk-app-shell > #sppkSettingsDialog .settings-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 23px 0; border-bottom: 1px solid var(--sppk-theme-line-soft); }
html body#sppkAppShell.sppk-app-shell > #sppkSettingsDialog .settings-row-copy { min-width: 0; }
html body#sppkAppShell.sppk-app-shell > #sppkSettingsDialog .settings-row h3 { margin: 0 0 5px; color: var(--sppk-theme-heading); font-size: 13px; font-weight: 600; line-height: 1.4; }
html body#sppkAppShell.sppk-app-shell > #sppkSettingsDialog .settings-row p { margin: 0; color: var(--sppk-theme-muted); font-size: 11.5px; line-height: 1.5; overflow-wrap: anywhere; }
html body#sppkAppShell.sppk-app-shell > #sppkSettingsDialog .settings-value { color: var(--sppk-theme-copy); font-size: 12px; white-space: nowrap; }
html body#sppkAppShell.sppk-app-shell > #sppkSettingsDialog .settings-select { flex: 0 0 auto; width: 126px; max-width: 100%; min-height: 36px; padding: 7px 10px; border: 1px solid var(--sppk-theme-line); border-radius: 8px; background: var(--sppk-theme-input); color: var(--sppk-theme-text); font-size: 12px; color-scheme: inherit; }
html body#sppkAppShell.sppk-app-shell > #sppkSettingsDialog .settings-button { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: 9px; min-height: 34px; padding: 7px 11px; border: 1px solid var(--sppk-theme-line); border-radius: 8px; background: var(--sppk-theme-surface-raised); color: var(--sppk-theme-copy); font-size: 11.5px; font-weight: 550; text-decoration: none; white-space: nowrap; }
html body#sppkAppShell.sppk-app-shell > #sppkSettingsDialog .settings-button svg { width: 14px; height: 14px; }
html body#sppkAppShell.sppk-app-shell > #sppkSettingsDialog .settings-button:hover { background: var(--settings-selected); color: var(--sppk-theme-heading); }
html body#sppkAppShell.sppk-app-shell > #sppkSettingsDialog .settings-footnote { margin: 22px 0 0; color: var(--sppk-theme-muted); font-size: 11px; line-height: 1.65; }
html body#sppkAppShell.sppk-app-shell > #sppkSettingsDialog .settings-frame-toolbar { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 10px 22px; border-bottom: 1px solid var(--sppk-theme-line-soft); background: var(--sppk-theme-surface); color: var(--sppk-theme-muted); font-size: 11px; }
html body#sppkAppShell.sppk-app-shell > #sppkSettingsDialog .settings-frame-toolbar a { display: inline-flex; align-items: center; gap: 6px; color: var(--sppk-theme-copy); font-size: 10.5px; text-decoration: none; white-space: nowrap; }
html body#sppkAppShell.sppk-app-shell > #sppkSettingsDialog .settings-frame-toolbar a:hover { color: var(--sppk-theme-link); }
html body#sppkAppShell.sppk-app-shell > #sppkSettingsDialog .settings-frame-toolbar a svg { width: 12px; height: 12px; }
html body#sppkAppShell.sppk-app-shell > #sppkSettingsDialog .settings-subnavigation { display: flex; align-items: center; gap: 5px; }
html body#sppkAppShell.sppk-app-shell > #sppkSettingsDialog .settings-subnavigation button { padding: 5px 8px; border: 0; border-radius: 6px; background: transparent; color: var(--sppk-theme-muted); font-size: 11px; }
html body#sppkAppShell.sppk-app-shell > #sppkSettingsDialog .settings-subnavigation button.is-active { background: var(--settings-selected); color: var(--sppk-theme-heading); }
html body#sppkAppShell.sppk-app-shell > #sppkSettingsDialog .settings-frame-slot { position: relative; flex: 1 1 auto; min-height: 0; min-width: 0; overflow: hidden; background: var(--sppk-theme-surface); }
html body#sppkAppShell.sppk-app-shell > #sppkSettingsDialog .settings-frame { display: block; width: 100%; height: 100%; min-height: 0; border: 0; background: var(--sppk-theme-surface); color-scheme: inherit; }
html body#sppkAppShell.sppk-app-shell > #sppkSettingsDialog .settings-frame-loading { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px; background: var(--sppk-theme-surface); color: var(--sppk-theme-muted); font-size: 12px; text-align: center; }
html body#sppkAppShell.sppk-app-shell > #sppkSettingsDialog .settings-frame-loading::before { content: ''; width: 24px; height: 24px; border: 2px solid var(--sppk-theme-line); border-top-color: var(--sppk-theme-link); border-radius: 50%; animation: sppk-settings-loading .8s linear infinite; }
html body#sppkAppShell.sppk-app-shell > #sppkSettingsDialog .settings-frame-loading.is-error::before { display: none; }
html body#sppkAppShell.sppk-app-shell > #sppkSettingsDialog .settings-about-heading { padding: 28px 0 20px; text-align: center; }
html body#sppkAppShell.sppk-app-shell > #sppkSettingsDialog .settings-about-mark { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 12px; border: 1px solid var(--sppk-theme-line); border-radius: 15px; background: var(--sppk-theme-surface-soft); color: var(--sppk-theme-link); font-size: 28px; font-weight: 750; }
html body#sppkAppShell.sppk-app-shell > #sppkSettingsDialog .settings-about-heading h3 { margin: 0 0 5px; color: var(--sppk-theme-heading); font-size: 20px; font-weight: 700; }
html body#sppkAppShell.sppk-app-shell > #sppkSettingsDialog .settings-about-heading p { margin: 0; color: var(--sppk-theme-muted); font-size: 12px; }
html body#sppkAppShell.sppk-app-shell > #sppkSettingsDialog .settings-about-list { margin: 0; }
html body#sppkAppShell.sppk-app-shell > #sppkSettingsDialog .settings-about-list > div { display: flex; justify-content: space-between; gap: 24px; padding: 15px 0; border-bottom: 1px solid var(--sppk-theme-line-soft); }
html body#sppkAppShell.sppk-app-shell > #sppkSettingsDialog .settings-about-list dt { color: var(--sppk-theme-muted); font-size: 12px; font-weight: 400; }
html body#sppkAppShell.sppk-app-shell > #sppkSettingsDialog .settings-about-list dd { margin: 0; color: var(--sppk-theme-text); font-size: 12px; text-align: right; }
html body#sppkAppShell.sppk-app-shell > #sppkSettingsDialog .settings-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
html body#sppkAppShell.sppk-app-shell #sppkSettingsLauncher { padding: 28px; border: 1px solid var(--sppk-theme-line); border-radius: 14px; background: var(--sppk-theme-surface); }
html body#sppkAppShell.sppk-app-shell #sppkSettingsLauncher button { padding: 9px 14px; border: 1px solid var(--sppk-theme-line); border-radius: 8px; background: var(--sppk-theme-surface-raised); color: var(--sppk-theme-text); }
html body#sppkAppShell.sppk-app-shell #sppkSettingsLauncher a { margin-left: 14px; }

/* Original settings modules shown inside the dialog. These rules never
   apply when the same routes are opened as ordinary full pages. */
html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell { min-width: 0 !important; min-height: 100vh; background: var(--sppk-theme-surface) !important; }
html.sppk-settings-embedded body#sppkAppShell :is(#appSidebar, .sidebar-backdrop, .topbar, #csToggle, #csPanel, #ai-toggle, #ai-panel) { display: none !important; }
html.sppk-settings-embedded body#sppkAppShell .page-shell.main-content { width: 100% !important; max-width: none !important; min-height: 100vh; margin: 0 !important; padding: 0 !important; background: var(--sppk-theme-surface) !important; }
html.sppk-settings-embedded body#sppkAppShell .page-shell.main-content .content-area { width: 100%; min-height: 0; margin: 0 !important; padding: 20px !important; background: var(--sppk-theme-surface) !important; }
html.sppk-settings-embedded body#sppkAppShell .content-area > :is(.container-fluid, .enterprise-theme-wrapper, .enterprise-account-wrapper, .enterprise-user-wrapper, .database-system-page, .security-center-page, .access-control-page) { min-height: 0 !important; max-width: none !important; margin: 0 !important; padding: 0 !important; background: var(--sppk-theme-surface) !important; }
html.sppk-settings-embedded body#sppkAppShell .content-area :is(.theme-hero, .account-hero, .user-hero, .database-hero, .security-hero) { display: none !important; }
html.sppk-settings-embedded body#sppkAppShell .content-area .access-hero { min-height: 0 !important; padding: 0 !important; margin-bottom: 16px !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
html.sppk-settings-embedded body#sppkAppShell .content-area .access-hero > div { display: none !important; }
html.sppk-settings-embedded body#sppkAppShell .content-area :is(.account-hero, .theme-hero) ~ .enterprise-footer { display: none !important; }
html.sppk-settings-embedded body#sppkAppShell.dark .content-area :is(.appearance-mode-panel, .font-preview, .theme-preview, .database-panel, .database-info-panel, .compact-card) { background: var(--sppk-theme-surface) !important; border-color: var(--sppk-theme-line) !important; box-shadow: none !important; }
html.sppk-settings-embedded body#sppkAppShell.dark .content-area :is(.modern-select, .modern-input, .form-control, .form-select) { background-color: var(--sppk-theme-input) !important; color: var(--sppk-theme-text) !important; border-color: var(--sppk-theme-line) !important; }
@keyframes sppk-settings-loading { to { transform: rotate(1turn); } }
@media (max-width: 767.98px) {
    html body#sppkAppShell.sppk-app-shell > #sppkSettingsDialog { width: calc(100% - 24px); max-width: calc(100% - 24px) !important; height: calc(100vh - 24px); height: calc(100dvh - 24px); max-height: calc(100% - 24px); grid-template-columns: 176px minmax(0, 1fr); }
    html body#sppkAppShell.sppk-app-shell > #sppkSettingsDialog .settings-sidebar { padding: 23px 8px 16px; }
    html body#sppkAppShell.sppk-app-shell > #sppkSettingsDialog .settings-sidebar-heading { padding-inline: 10px; }
    html body#sppkAppShell.sppk-app-shell > #sppkSettingsDialog .settings-sidebar-heading h1 { font-size: 18px; }
    html body#sppkAppShell.sppk-app-shell > #sppkSettingsDialog .settings-tab { gap: 8px; padding: 10px 8px; font-size: 11.5px; }
    html body#sppkAppShell.sppk-app-shell > #sppkSettingsDialog .settings-main-header { padding: 23px 18px 19px; }
    html body#sppkAppShell.sppk-app-shell > #sppkSettingsDialog .settings-main-header h2 { font-size: 20px; }
    html body#sppkAppShell.sppk-app-shell > #sppkSettingsDialog .settings-scroll-view { padding: 0 20px 22px; }
    html body#sppkAppShell.sppk-app-shell > #sppkSettingsDialog .settings-row { align-items: flex-start; flex-direction: column; gap: 12px; padding: 20px 0; }
    html body#sppkAppShell.sppk-app-shell > #sppkSettingsDialog .settings-frame-toolbar { padding-inline: 16px; }
}
@media (max-width: 575.98px) {
    html body#sppkAppShell.sppk-app-shell > #sppkSettingsDialog { grid-template-columns: 54px minmax(0, 1fr); border-radius: 13px; }
    html body#sppkAppShell.sppk-app-shell > #sppkSettingsDialog .settings-sidebar { padding: 75px 5px 12px; }
    html body#sppkAppShell.sppk-app-shell > #sppkSettingsDialog .settings-sidebar-heading,
    html body#sppkAppShell.sppk-app-shell > #sppkSettingsDialog .settings-sidebar-footer,
    html body#sppkAppShell.sppk-app-shell > #sppkSettingsDialog .settings-tab > span { display: none; }
    html body#sppkAppShell.sppk-app-shell > #sppkSettingsDialog .settings-tab { justify-content: center; padding: 10px 0; }
    html body#sppkAppShell.sppk-app-shell > #sppkSettingsDialog .settings-navigation { overflow-x: hidden; }
    html body#sppkAppShell.sppk-app-shell > #sppkSettingsDialog .settings-main-header { padding: 22px 15px 17px; gap: 10px; }
    html body#sppkAppShell.sppk-app-shell > #sppkSettingsDialog .settings-main-heading { gap: 7px; }
    html body#sppkAppShell.sppk-app-shell > #sppkSettingsDialog .settings-history-navigation { gap: 0; }
    html body#sppkAppShell.sppk-app-shell > #sppkSettingsDialog .settings-history-navigation button { width: 27px; height: 30px; }
    html body#sppkAppShell.sppk-app-shell > #sppkSettingsDialog .settings-main-header p { font-size: 11px; }
    html body#sppkAppShell.sppk-app-shell > #sppkSettingsDialog .settings-scroll-view { padding-inline: 17px; }
    html body#sppkAppShell.sppk-app-shell > #sppkSettingsDialog .settings-frame-toolbar { align-items: flex-start; flex-wrap: wrap; gap: 8px; padding: 9px 12px; }
    html body#sppkAppShell.sppk-app-shell > #sppkSettingsDialog .settings-subnavigation button { font-size: 10.5px; }
    html body#sppkAppShell.sppk-app-shell > #sppkSettingsDialog .settings-about-list > div { flex-direction: column; gap: 6px; }
    html body#sppkAppShell.sppk-app-shell > #sppkSettingsDialog .settings-about-list dd { text-align: left; }
    html.sppk-settings-embedded body#sppkAppShell .page-shell.main-content .content-area { padding: 14px !important; }
}
@media (prefers-reduced-motion: reduce) {
    html body#sppkAppShell.sppk-app-shell > #sppkSettingsDialog .settings-frame-loading::before { animation: none; }
}

/* SETTINGS MODULES V23 — COMPACT ROWS INSIDE THE EXISTING DIALOG ONLY */
html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent {
    --settings-danger: #b4233b !important;
    --settings-warning: #8a5900 !important;
    --settings-info: #225fad !important;
    padding: 0 28px 24px !important;
    color: var(--sppk-theme-text) !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell.dark
.page-shell.main-content #sppkPageContent {
    --settings-danger: #e2a0ad !important;
    --settings-warning: #e4bd79 !important;
    --settings-info: #93bce8 !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent :is(.card, .compact-card, .glass-panel, .database-panel, .database-info-panel, .appearance-mode-panel, .access-kpi-card, .theme-mode-card, .mini-menu-card) {
    min-height: 0 !important;
    height: auto !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    transform: none !important;
    animation: none !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent :is(.card, .compact-card, .glass-panel, .database-panel, .database-info-panel, .appearance-mode-panel, .access-kpi-card, .theme-mode-card, .mini-menu-card)::before,
html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent :is(.card, .compact-card, .glass-panel, .database-panel, .database-info-panel, .appearance-mode-panel, .access-kpi-card, .theme-mode-card, .mini-menu-card)::after {
    display: none !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent :is(h2, h3, h4, h5, h6) {
    margin: 0 0 5px !important;
    color: var(--sppk-theme-heading) !important;
    -webkit-text-fill-color: currentColor !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.45 !important;
    letter-spacing: normal !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent :is(p, small, dt) {
    margin: 0 !important;
    color: var(--sppk-theme-muted) !important;
    -webkit-text-fill-color: currentColor !important;
    font-size: 11.5px !important;
    line-height: 1.55 !important;
    letter-spacing: normal !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent :is(label, .form-label, .modern-label) {
    margin: 0 !important;
    color: var(--sppk-theme-copy) !important;
    -webkit-text-fill-color: currentColor !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent :is(.panel-icon, .section-icon, .database-panel-icon, .database-panel-kicker, .theme-mode-icon, .mini-menu-icon) {
    display: none !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent :is(.panel-header, .section-header, .table-header, .database-panel-heading, .database-info-heading) {
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent .card-header {
    margin: 0 !important;
    padding: 20px 0 12px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent :is(.row, .card-body) {
    --bs-gutter-x: 0 !important;
    --bs-gutter-y: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent :is(.enterprise-theme-wrapper, .enterprise-account-wrapper, .security-center-page) > .row,
html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent .database-overview-grid {
    display: block !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent :is(.enterprise-theme-wrapper, .enterprise-account-wrapper, .security-center-page) > .row > [class*="col-"],
html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent .database-overview-grid > [class*="col-"] {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent :is(.modern-input, .modern-select, .form-control, .form-select) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 35px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 7px 10px !important;
    border: 1px solid var(--sppk-theme-line) !important;
    border-radius: 8px !important;
    background-color: var(--sppk-theme-input) !important;
    color: var(--sppk-theme-text) !important;
    -webkit-text-fill-color: currentColor !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
    box-shadow: none !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent :is(.modern-input, .modern-select, .form-control, .form-select):focus {
    border-color: var(--sppk-theme-brand) !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--sppk-theme-brand) 18%, transparent) !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent textarea {
    resize: vertical !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent :is(button:not(.btn-close), .btn, .btn-save-modern) {
    min-height: 33px !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    padding: 7px 11px !important;
    border: 1px solid var(--sppk-theme-line) !important;
    border-radius: 8px !important;
    background: var(--sppk-theme-surface-raised) !important;
    background-image: none !important;
    color: var(--sppk-theme-copy) !important;
    -webkit-text-fill-color: currentColor !important;
    font-size: 11.5px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    box-shadow: none !important;
    transform: none !important;
    letter-spacing: normal !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent :is(button:not(.btn-close), .btn, .btn-save-modern):is(:hover, :focus-visible) {
    border-color: var(--sppk-theme-subtle) !important;
    background: var(--sppk-theme-surface-soft) !important;
    box-shadow: none !important;
    transform: none !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent :is(button, a, input, select, textarea):focus-visible {
    outline: 2px solid var(--sppk-theme-brand) !important;
    outline-offset: 2px !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent :is(button.btn-danger, a.btn-danger, button.btn-outline-danger, a.btn-outline-danger, button.database-action-danger, button.btn-action.danger) {
    color: var(--settings-danger) !important;
    -webkit-text-fill-color: currentColor !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent :is(button.btn-primary, a.btn-primary, button.btn-success, a.btn-success, button.database-action-primary, button.btn-save-modern) {
    color: var(--sppk-theme-link) !important;
    -webkit-text-fill-color: currentColor !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent :is(button.btn-warning, a.btn-warning) {
    color: var(--settings-warning) !important;
    -webkit-text-fill-color: currentColor !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent :is(button, .btn, .upload-btn) i {
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent :is(.badge, .role-badge, .status-badge, .online-badge, .database-status-row) {
    padding: 4px 7px !important;
    border: 1px solid var(--sppk-theme-line) !important;
    border-radius: 6px !important;
    background: var(--sppk-theme-surface-soft) !important;
    background-image: none !important;
    color: var(--sppk-theme-copy) !important;
    -webkit-text-fill-color: currentColor !important;
    font-size: 10.5px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    box-shadow: none !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent :is(.bg-success, .text-bg-success, .status-badge.online, .online-badge, .database-status-row, .text-success) {
    color: var(--sppk-theme-link) !important;
    -webkit-text-fill-color: currentColor !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent :is(.bg-danger, .text-bg-danger, .text-danger, .database-value-danger) {
    color: var(--settings-danger) !important;
    -webkit-text-fill-color: currentColor !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent :is(.bg-warning, .text-bg-warning, .text-warning, .database-value-warning) {
    color: var(--settings-warning) !important;
    -webkit-text-fill-color: currentColor !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent :is(.bg-primary, .text-bg-primary, .text-primary, .role-badge.admin, .database-value-primary) {
    color: var(--settings-info) !important;
    -webkit-text-fill-color: currentColor !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent :is(.badge, .role-badge, .status-badge) i {
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent .appearance-mode-panel {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 12px 22px !important;
    margin: 0 !important;
    padding: 23px 0 !important;
    border-bottom: 1px solid var(--sppk-theme-line-soft) !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent .appearance-mode-heading {
    display: block !important;
    margin: 0 !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent .appearance-mode-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    margin: 0 !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent .theme-mode-card {
    display: block !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent .theme-mode-card :is(.theme-mode-icon, h3, p) {
    display: none !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent [data-set-theme-mode][aria-pressed="true"] {
    border-color: var(--sppk-theme-subtle) !important;
    background: var(--sppk-theme-surface-soft) !important;
    color: var(--sppk-theme-link) !important;
    -webkit-text-fill-color: currentColor !important;
    font-weight: 600 !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent .enterprise-theme-wrapper > .row > [class*="col-"] > .glass-panel {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(180px, 240px) !important;
    align-items: center !important;
    gap: 10px 22px !important;
    padding: 23px 0 !important;
    border-bottom: 1px solid var(--sppk-theme-line-soft) !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent .enterprise-theme-wrapper .modern-select {
    grid-column: 2 !important;
    grid-row: 1 !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent .font-preview {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 8px 0 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    text-align: left !important;
    box-shadow: none !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent .font-preview h2 {
    margin: 0 !important;
    color: var(--sppk-theme-copy) !important;
    -webkit-text-fill-color: currentColor !important;
    font-size: 13px !important;
    font-weight: 400 !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent .font-preview p {
    display: none !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent .theme-grid {
    grid-column: 2 !important;
    display: grid !important;
    grid-template-columns: repeat(8, 13px) !important;
    gap: 7px !important;
    justify-content: end !important;
    margin: 0 !important;
    padding: 0 !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent .theme-box {
    width: 13px !important;
    height: 13px !important;
    min-height: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    box-shadow: none !important;
    transform: none !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent .enterprise-account-wrapper .compact-card {
    margin: 0 !important;
    padding: 22px 0 !important;
    border-bottom: 1px solid var(--sppk-theme-line-soft) !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent .profile-card {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 64px !important;
    align-items: center !important;
    gap: 7px 18px !important;
    text-align: left !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent .profile-top {
    position: relative !important;
    grid-column: 2 !important;
    grid-row: 1 / 3 !important;
    width: 64px !important;
    height: 64px !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent :is(.profile-photo, .profile-initial) {
    width: 64px !important;
    height: 64px !important;
    margin: 0 !important;
    border: 1px solid var(--sppk-theme-line) !important;
    border-radius: 50% !important;
    background: var(--sppk-theme-surface-soft) !important;
    color: var(--sppk-theme-copy) !important;
    font-size: 23px !important;
    object-fit: cover !important;
    box-shadow: none !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent .profile-content {
    grid-column: 1 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent .profile-content :is(h3, p) {
    overflow-wrap: anywhere !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent .profile-content .online-badge {
    display: inline-flex !important;
    margin-top: 6px !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent .upload-btn {
    position: absolute !important;
    inset: auto -3px -3px auto !important;
    display: grid !important;
    place-items: center !important;
    width: 26px !important;
    height: 26px !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 1px solid var(--sppk-theme-line) !important;
    border-radius: 50% !important;
    background: var(--sppk-theme-surface-raised) !important;
    color: var(--sppk-theme-copy) !important;
    font-size: 12px !important;
    box-shadow: none !important;
    transform: none !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent .mini-info-grid {
    grid-column: 1 !important;
    grid-row: 2 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px 18px !important;
    margin: 0 !important;
    padding: 0 !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent .mini-info-card {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    text-align: left !important;
    box-shadow: none !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent .mini-info-card strong {
    color: var(--sppk-theme-copy) !important;
    -webkit-text-fill-color: currentColor !important;
    font-size: 11px !important;
    font-weight: 500 !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent .enterprise-account-wrapper form {
    margin: 8px 0 0 !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent .enterprise-account-wrapper form > .row {
    display: block !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent .enterprise-account-wrapper form > .row > [class*="col-"] {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(180px, 240px) !important;
    align-items: center !important;
    gap: 12px 22px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 16px 0 !important;
    border-bottom: 1px solid var(--sppk-theme-line-soft) !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent .enterprise-account-wrapper form > .row > .mt-4 {
    display: flex !important;
    justify-content: flex-end !important;
    padding-bottom: 0 !important;
    border: 0 !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent .password-wrapper {
    position: relative !important;
    min-width: 0 !important;
    width: 100% !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent .password-wrapper input {
    padding-right: 36px !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent button.password-toggle {
    position: absolute !important;
    top: 50% !important;
    right: 4px !important;
    width: 29px !important;
    height: 29px !important;
    min-height: 29px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    transform: translateY(-50%) !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent button.password-toggle:is(:hover, :focus-visible) {
    transform: translateY(-50%) !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent .enterprise-account-wrapper .compact-card > .row {
    display: block !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent .enterprise-account-wrapper .compact-card > .row > [class*="col-"] {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent .mini-menu-card {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 6px 20px !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 13px 0 !important;
    border-bottom: 1px solid var(--sppk-theme-line-soft) !important;
    text-align: left !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent .mini-menu-card h5 {
    margin: 0 !important;
    font-size: 12px !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent .mini-menu-card p {
    text-align: right !important;
    font-size: 11px !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent .menu-card-link:hover .mini-menu-card {
    background: var(--sppk-theme-surface-soft) !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent :is(.database-status-panel, .database-backup-panel) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 5px 24px !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 23px 0 !important;
    border-bottom: 1px solid var(--sppk-theme-line-soft) !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent :is(.database-status-panel, .database-backup-panel) > h2 {
    grid-column: 1 !important;
    grid-row: 1 !important;
    margin: 0 !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent :is(.database-status-panel, .database-backup-panel) > p {
    grid-column: 1 !important;
    grid-row: 2 !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent :is(.database-status-row, .database-action-stack) {
    grid-column: 2 !important;
    grid-row: 1 / 3 !important;
    align-self: center !important;
    margin: 0 !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent .database-action-stack {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    justify-content: flex-end !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent .database-action-stack :is(form, button) {
    width: auto !important;
    margin: 0 !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent .database-action-stack .btn {
    white-space: nowrap !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent :is(.database-security-panel, .database-info-panel) {
    display: block !important;
    margin: 0 !important;
    padding: 23px 0 0 !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent .database-security-panel > p {
    margin: 4px 0 12px !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent .database-facts {
    display: block !important;
    margin: 10px 0 0 !important;
    padding: 0 !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent .database-facts > div {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 20px !important;
    padding: 13px 0 !important;
    border: 0 !important;
    border-bottom: 1px solid var(--sppk-theme-line-soft) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent .database-facts dd {
    margin: 0 !important;
    color: var(--sppk-theme-text) !important;
    -webkit-text-fill-color: currentColor !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    text-align: right !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent .security-center-page :is(.security-info-card, .security-password-card) {
    margin: 0 !important;
    padding: 22px 0 !important;
    border-bottom: 1px solid var(--sppk-theme-line-soft) !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent .security-info-card .card-body > div {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(180px, 240px) !important;
    align-items: start !important;
    gap: 12px 22px !important;
    margin: 0 !important;
    padding: 13px 0 !important;
    border-bottom: 1px solid var(--sppk-theme-line-soft) !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent .security-info-card .card-body > div > div {
    color: var(--sppk-theme-text) !important;
    font-size: 12px !important;
    text-align: right !important;
    overflow-wrap: anywhere !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent .security-password-card form > div,
html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent > .container-fluid > .card > .card-body > form > .mb-3 {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(180px, 240px) !important;
    align-items: center !important;
    gap: 12px 22px !important;
    margin: 0 !important;
    padding: 16px 0 !important;
    border-bottom: 1px solid var(--sppk-theme-line-soft) !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent .security-password-card form > button {
    display: block !important;
    margin: 18px 0 0 auto !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent .user-directory-panel {
    margin: 0 !important;
    padding: 22px 0 !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent .user-directory-panel .table-header {
    margin-bottom: 14px !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent .access-hero {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    margin: 0 !important;
    padding: 20px 0 18px !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent .access-hero > div {
    display: block !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent .access-control-page > .row {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 0 0 20px !important;
    border-bottom: 1px solid var(--sppk-theme-line-soft) !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent .access-control-page > .row > [class*="col-"] {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent .access-kpi-card .card-body {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    text-align: left !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent .access-kpi-card h3 {
    margin: 0 !important;
    font-size: 18px !important;
    font-weight: 600 !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent .access-kpi-card small {
    font-size: 10.5px !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent .access-table-panel {
    margin: 0 !important;
    padding: 20px 0 0 !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent .access-users-panel {
    margin-top: 6px !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent .table-responsive {
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow-x: auto !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent .table {
    --bs-table-bg: transparent !important;
    --bs-table-color: var(--sppk-theme-text) !important;
    --bs-table-striped-bg: transparent !important;
    --bs-table-hover-bg: var(--sppk-theme-surface-soft) !important;
    --bs-table-accent-bg: transparent !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-collapse: collapse !important;
    background: transparent !important;
    color: var(--sppk-theme-text) !important;
    font-size: 11.5px !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent .table :is(th, td) {
    padding: 11px 8px !important;
    border-color: var(--sppk-theme-line-soft) !important;
    background-image: none !important;
    box-shadow: none !important;
    font-size: 11.5px !important;
    line-height: 1.5 !important;
    vertical-align: middle !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent .table thead th {
    background: var(--sppk-theme-surface-soft) !important;
    color: var(--sppk-theme-copy) !important;
    -webkit-text-fill-color: currentColor !important;
    font-size: 10.5px !important;
    font-weight: 600 !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent .table tbody :is(th, td) {
    background: transparent !important;
    color: var(--sppk-theme-text) !important;
    -webkit-text-fill-color: currentColor !important;
    font-weight: 400 !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent .table tbody tr:hover > :is(th, td) {
    background: var(--sppk-theme-surface-soft) !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent .database-security-table {
    margin-top: 5px !important;
    table-layout: fixed !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent .database-security-table tbody :is(th, td) {
    padding: 12px 0 !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent .database-security-table tbody th {
    width: 65% !important;
    color: var(--sppk-theme-copy) !important;
    -webkit-text-fill-color: currentColor !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent .database-security-table td {
    text-align: right !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent .table tbody td.database-value-danger {
    color: var(--settings-danger) !important;
    -webkit-text-fill-color: currentColor !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent .table tbody td.database-value-warning {
    color: var(--settings-warning) !important;
    -webkit-text-fill-color: currentColor !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent .table tbody td.database-value-primary {
    color: var(--settings-info) !important;
    -webkit-text-fill-color: currentColor !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent :is(.user-photo, .user-initial) {
    width: 28px !important;
    height: 28px !important;
    flex: 0 0 28px !important;
    border-radius: 50% !important;
    background: var(--sppk-theme-surface-soft) !important;
    color: var(--sppk-theme-copy) !important;
    font-size: 12px !important;
    box-shadow: none !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent .user-info {
    gap: 8px !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent .user-info h6 {
    margin: 0 !important;
    font-size: 12px !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent .user-info small {
    font-size: 10px !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent .username-box {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--sppk-theme-copy) !important;
    -webkit-text-fill-color: currentColor !important;
    font-size: 11.5px !important;
    box-shadow: none !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent .action-group {
    gap: 5px !important;
    flex-wrap: wrap !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent .access-control-page td > .d-flex {
    gap: 5px !important;
    flex-wrap: wrap !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent :is(.modal-content, .modal-body) {
    background: var(--sppk-theme-surface) !important;
    color: var(--sppk-theme-text) !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent .modal-content {
    border: 1px solid var(--sppk-theme-line) !important;
    border-radius: 12px !important;
    box-shadow: var(--sppk-theme-shadow) !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent :is(.modal-header, .modal-footer) {
    padding: 16px 20px !important;
    border-color: var(--sppk-theme-line) !important;
    background: var(--sppk-theme-surface-soft) !important;
    background-image: none !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent .modal-body {
    padding: 20px !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent .modal-title {
    margin: 0 !important;
    color: var(--sppk-theme-heading) !important;
    -webkit-text-fill-color: currentColor !important;
    font-size: 14px !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent .btn-close {
    width: 30px !important;
    height: 30px !important;
    padding: 6px !important;
    border: 0 !important;
    border-radius: 6px !important;
    background-color: transparent !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 4 8 8M12 4l-8 8' fill='none' stroke='%23475467' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 14px 14px !important;
    filter: none !important;
    opacity: 1 !important;
    box-shadow: none !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell.dark
.page-shell.main-content #sppkPageContent .btn-close {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 4 8 8M12 4l-8 8' fill='none' stroke='%23cccccc' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent .btn-close:hover {
    background-color: var(--sppk-theme-surface-raised) !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent :is(.alert, .database-restore-warning) {
    padding: 12px !important;
    border: 1px solid var(--sppk-theme-line) !important;
    border-radius: 8px !important;
    background: var(--sppk-theme-surface-soft) !important;
    background-image: none !important;
    color: var(--sppk-theme-copy) !important;
    -webkit-text-fill-color: currentColor !important;
    font-size: 11.5px !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent .alert-success {
    color: var(--sppk-theme-link) !important;
    -webkit-text-fill-color: currentColor !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent .alert-danger {
    color: var(--settings-danger) !important;
    -webkit-text-fill-color: currentColor !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent input[type="file"]::file-selector-button {
    padding: 5px 9px !important;
    border: 1px solid var(--sppk-theme-line) !important;
    border-radius: 5px !important;
    background: var(--sppk-theme-surface-raised) !important;
    color: var(--sppk-theme-copy) !important;
    font: inherit !important;
}

html.sppk-settings-embedded,
html.sppk-settings-embedded body#sppkAppShell,
html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent * {
    scrollbar-width: thin !important;
    scrollbar-color: #777777 transparent !important;
}

html.sppk-settings-embedded::-webkit-scrollbar,
html.sppk-settings-embedded body#sppkAppShell::-webkit-scrollbar,
html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent *::-webkit-scrollbar {
    width: 6px !important;
    height: 6px !important;
}

html.sppk-settings-embedded::-webkit-scrollbar-thumb,
html.sppk-settings-embedded body#sppkAppShell::-webkit-scrollbar-thumb,
html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent *::-webkit-scrollbar-thumb {
    border-radius: 8px !important;
    background: #777777 !important;
    background-image: none !important;
}

html.sppk-settings-embedded::-webkit-scrollbar-track,
html.sppk-settings-embedded body#sppkAppShell::-webkit-scrollbar-track,
html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent *::-webkit-scrollbar-track {
    background: transparent !important;
}

html body#sppkAppShell.sppk-app-shell > #sppkSettingsDialog .settings-frame-toolbar {
    justify-content: flex-end !important;
    min-height: 36px !important;
    padding: 8px 28px !important;
    border-bottom: 0 !important;
}

html body#sppkAppShell.sppk-app-shell > #sppkSettingsDialog .settings-frame-toolbar > span {
    display: none !important;
}

html body#sppkAppShell.sppk-app-shell > #sppkSettingsDialog .settings-frame-toolbar:has(.settings-subnavigation) {
    justify-content: space-between !important;
}

html body#sppkAppShell.sppk-app-shell > #sppkSettingsDialog :is(.settings-scroll-view, .settings-navigation) {
    scrollbar-width: thin !important;
    scrollbar-color: #777777 transparent !important;
}

@media (max-width: 639.98px) {
    html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
    .page-shell.main-content #sppkPageContent {
        padding: 0 18px 20px !important;
    }
    
    html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
    .page-shell.main-content #sppkPageContent .appearance-mode-panel,
    html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
    .page-shell.main-content #sppkPageContent .enterprise-theme-wrapper > .row > [class*="col-"] > .glass-panel,
    html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
    .page-shell.main-content #sppkPageContent .enterprise-account-wrapper form > .row > [class*="col-"],
    html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
    .page-shell.main-content #sppkPageContent .security-info-card .card-body > div,
    html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
    .page-shell.main-content #sppkPageContent .security-password-card form > div,
    html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
    .page-shell.main-content #sppkPageContent > .container-fluid > .card > .card-body > form > .mb-3,
    html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
    .page-shell.main-content #sppkPageContent .database-status-panel,
    html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
    .page-shell.main-content #sppkPageContent .database-backup-panel {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 10px !important;
    }
    
    html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
    .page-shell.main-content #sppkPageContent :is(.enterprise-theme-wrapper .modern-select, .theme-grid, .database-status-row, .database-action-stack) {
        grid-column: 1 !important;
        grid-row: auto !important;
        justify-self: start !important;
    }
    
    html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
    .page-shell.main-content #sppkPageContent .appearance-mode-grid {
        justify-content: flex-start !important;
    }
    
    html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
    .page-shell.main-content #sppkPageContent .database-action-stack {
        justify-content: flex-start !important;
    }
    
    html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
    .page-shell.main-content #sppkPageContent .database-status-panel > p,
    html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
    .page-shell.main-content #sppkPageContent .database-backup-panel > p {
        grid-column: 1 !important;
        grid-row: auto !important;
    }
    
    html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
    .page-shell.main-content #sppkPageContent .security-info-card .card-body > div > div {
        text-align: left !important;
    }
    
    html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
    .page-shell.main-content #sppkPageContent .mini-menu-card {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 3px !important;
    }
    
    html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
    .page-shell.main-content #sppkPageContent .mini-menu-card p {
        text-align: left !important;
    }
    
    html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
    .page-shell.main-content #sppkPageContent .access-control-page > .row {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    
    html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
    .page-shell.main-content #sppkPageContent .access-hero {
        align-items: flex-start !important;
        flex-wrap: wrap !important;
    }
    
    html body#sppkAppShell.sppk-app-shell > #sppkSettingsDialog .settings-frame-toolbar {
        padding-inline: 18px !important;
    }
}

/* V24: style-clean.css paints .table tbody tr white. Reset every painted
   table layer inside the Database settings frame, including row shadows. */
html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent .database-security-table {
    --bs-table-bg: var(--sppk-theme-surface) !important;
    --bs-table-bg-type: var(--sppk-theme-surface) !important;
    --bs-table-bg-state: var(--sppk-theme-surface) !important;
    --bs-table-color: var(--sppk-theme-text) !important;
    --bs-table-color-type: var(--sppk-theme-text) !important;
    --bs-table-color-state: var(--sppk-theme-text) !important;
    --bs-table-border-color: var(--sppk-theme-line-soft) !important;
    --bs-table-accent-bg: transparent !important;
    border: 0 !important;
    border-spacing: 0 !important;
    border-collapse: collapse !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent .database-security-table,
html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent .database-security-table > tbody,
html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent .database-security-table > tbody > tr {
    background: var(--sppk-theme-surface) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent .database-security-table > tbody > tr > :is(th, td) {
    padding: 12px 0 !important;
    border: 0 !important;
    border-bottom: 1px solid var(--sppk-theme-line-soft) !important;
    border-radius: 0 !important;
    background: var(--sppk-theme-surface) !important;
    box-shadow: none !important;
    color: var(--sppk-theme-text) !important;
    -webkit-text-fill-color: currentColor !important;
    font-weight: 400 !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent .database-security-table > tbody > tr > th {
    width: 65% !important;
    padding-right: 16px !important;
    color: var(--sppk-theme-copy) !important;
    text-align: left !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent .database-security-table > tbody > tr > td {
    font-variant-numeric: tabular-nums !important;
    text-align: right !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent .database-security-table > tbody > tr:hover > :is(th, td) {
    background: var(--sppk-theme-surface-soft) !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent .database-security-table > tbody > tr:last-child > :is(th, td) {
    border-bottom: 0 !important;
}

/* V25: Sistem navigation lives in the account menu, shared across sizes. */
html body#sppkAppShell.sppk-app-shell #appSidebar #sppkProfileTrigger {
    border-color: transparent !important;
    border-radius: 12px !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
}
html body#sppkAppShell.sppk-app-shell #appSidebar #sppkProfileTrigger:is(:hover, [aria-expanded="true"]) {
    background: var(--sppk-theme-surface-soft) !important;
}
html body#sppkAppShell.sppk-app-shell #appSidebar #sppkProfileTrigger .sidebar-profile-action {
    color: var(--sppk-theme-copy) !important;
    font-size: 16px !important;
    transform: none !important;
}
html body#sppkAppShell.sppk-app-shell #sppkTopbarProfileTrigger {
    padding: 0 !important;
    border-color: var(--sppk-theme-line) !important;
    background: var(--sppk-theme-surface) !important;
    color: var(--sppk-theme-text) !important;
    box-shadow: none !important;
    cursor: pointer;
    font: inherit;
    transform: none !important;
}
html body#sppkAppShell.sppk-app-shell #sppkTopbarProfileTrigger .topbar-account-avatar,
html body#sppkAppShell.sppk-app-shell #appSidebar #sppkProfileTrigger .profile-avatar,
html body#sppkAppShell.sppk-app-shell #appSidebar #sppkProfileTrigger .avatar-default {
    border-color: var(--sppk-theme-line) !important;
    background: var(--sppk-theme-surface-raised) !important;
    color: var(--sppk-theme-heading) !important;
    box-shadow: none !important;
}
html body#sppkAppShell.sppk-app-shell #sppkTopbarProfileTrigger .topbar-account-initial {
    color: var(--sppk-theme-heading) !important;
    -webkit-text-fill-color: currentColor !important;
}
html body#sppkAppShell.sppk-app-shell #sppkProfileMenu {
    position: fixed !important;
    inset: auto !important;
    left: var(--sppk-profile-left, 8px) !important;
    top: var(--sppk-profile-top, 8px) !important;
    z-index: 1090 !important;
    box-sizing: border-box !important;
    width: min(288px, var(--sppk-profile-max-width, calc(100vw - 16px))) !important;
    min-width: 0 !important;
    max-width: calc(100vw - 16px) !important;
    max-height: var(--sppk-profile-max-height, calc(100dvh - 16px)) !important;
    margin: 0 !important;
    padding: 6px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    border: 1px solid var(--sppk-theme-line) !important;
    border-radius: 14px !important;
    background: var(--sppk-theme-surface) !important;
    color: var(--sppk-theme-text) !important;
    font-family: var(--global-font, 'Poppins'), sans-serif !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
    text-align: left !important;
    box-shadow: var(--sppk-theme-shadow) !important;
    scrollbar-width: thin;
}
html body#sppkAppShell.sppk-app-shell #sppkProfileMenu[hidden] {
    display: none !important;
}
html body#sppkAppShell.sppk-app-shell #sppkProfileMenu:not([hidden]) {
    display: block !important;
}
html body#sppkAppShell.sppk-app-shell #sppkProfileMenu .sppk-profile-menu__identity {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px !important;
}
html body#sppkAppShell.sppk-app-shell #sppkProfileMenu .sppk-profile-menu__avatar {
    display: grid !important;
    place-items: center !important;
    flex: 0 0 36px !important;
    width: 36px !important;
    height: 36px !important;
    overflow: hidden !important;
    border: 1px solid var(--sppk-theme-line) !important;
    border-radius: 50% !important;
    background: var(--sppk-theme-surface-raised) !important;
    color: var(--sppk-theme-heading) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
}
html body#sppkAppShell.sppk-app-shell #sppkProfileMenu .sppk-profile-menu__avatar img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}
html body#sppkAppShell.sppk-app-shell #sppkProfileMenu .sppk-profile-menu__copy {
    display: grid !important;
    min-width: 0 !important;
    gap: 1px !important;
}
html body#sppkAppShell.sppk-app-shell #sppkProfileMenu .sppk-profile-menu__copy > * {
    min-width: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    color: var(--sppk-theme-muted) !important;
    -webkit-text-fill-color: currentColor !important;
    font-size: 10.5px !important;
    font-weight: 400 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}
html body#sppkAppShell.sppk-app-shell #sppkProfileMenu .sppk-profile-menu__copy > strong {
    color: var(--sppk-theme-heading) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}
html body#sppkAppShell.sppk-app-shell #sppkProfileMenu .sppk-profile-menu__separator {
    height: 1px !important;
    margin: 5px 4px !important;
    border: 0 !important;
    background: var(--sppk-theme-line-soft) !important;
}
html body#sppkAppShell.sppk-app-shell #sppkProfileMenu .sppk-profile-menu__logout-form {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}
html body#sppkAppShell.sppk-app-shell #sppkProfileMenu .sppk-profile-menu__item {
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    min-height: 38px !important;
    margin: 0 !important;
    padding: 9px 10px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: var(--sppk-theme-text) !important;
    -webkit-text-fill-color: currentColor !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    text-decoration: none !important;
    box-shadow: none !important;
    transform: none !important;
    cursor: pointer !important;
}
html body#sppkAppShell.sppk-app-shell #sppkProfileMenu .sppk-profile-menu__item :is(span, i) {
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
}
html body#sppkAppShell.sppk-app-shell #sppkProfileMenu .sppk-profile-menu__item > i {
    flex: 0 0 18px !important;
    font-size: 16px !important;
    text-align: center !important;
}
html body#sppkAppShell.sppk-app-shell #sppkProfileMenu .sppk-profile-menu__item > .sppk-profile-menu__hint {
    margin-left: auto !important;
    color: var(--sppk-theme-muted) !important;
    font-size: 11px !important;
}
html body#sppkAppShell.sppk-app-shell #sppkProfileMenu .sppk-profile-menu__item:is(:hover, :focus-visible) {
    background: var(--sppk-theme-surface-soft) !important;
}
html body#sppkAppShell.sppk-app-shell #sppkProfileMenu .sppk-profile-menu__item--logout {
    color: #b4233b !important;
}
html body#sppkAppShell.sppk-app-shell.dark #sppkProfileMenu .sppk-profile-menu__item--logout {
    color: #e2a0ad !important;
}
html body#sppkAppShell.sppk-app-shell :is(#sppkProfileTrigger, #sppkTopbarProfileTrigger, #sppkProfileMenu .sppk-profile-menu__item):focus-visible {
    outline: 2px solid var(--sppk-theme-brand) !important;
    outline-offset: -2px !important;
}
@media (min-width: 768px) {
    html body#sppkAppShell.sppk-app-shell #appSidebar #sppkProfileTrigger {
        display: flex !important;
    }
    html.sidebar-is-collapsed body#sppkAppShell.sppk-app-shell #appSidebar #sppkProfileTrigger,
    html body#sppkAppShell.sppk-app-shell.sidebar-is-collapsed #appSidebar #sppkProfileTrigger {
        justify-content: center !important;
        width: 44px !important;
        min-height: 44px !important;
        margin-inline: auto !important;
        padding: 5px !important;
        gap: 0 !important;
    }
    html.sidebar-is-collapsed body#sppkAppShell.sppk-app-shell #appSidebar #sppkProfileTrigger .profile-avatar,
    html body#sppkAppShell.sppk-app-shell.sidebar-is-collapsed #appSidebar #sppkProfileTrigger .profile-avatar {
        width: 32px !important;
        height: 32px !important;
        flex: 0 0 32px !important;
    }
    html.sidebar-is-collapsed body#sppkAppShell.sppk-app-shell #appSidebar #sppkProfileTrigger :is(.sidebar-profile-copy, .sidebar-profile-action),
    html body#sppkAppShell.sppk-app-shell.sidebar-is-collapsed #appSidebar #sppkProfileTrigger :is(.sidebar-profile-copy, .sidebar-profile-action) {
        display: none !important;
    }
}

/* V27: hidden is the initial state; no offscreen slide-in during CSS loading. */
html body #csPanel.cs-panel {
    display: none !important;
    position: fixed !important;
    right: 22px !important;
    bottom: 96px !important;
    width: min(396px, calc(100vw - 32px)) !important;
    max-width: calc(100vw - 32px) !important;
    height: min(602px, calc(100vh - 112px)) !important;
    height: min(602px, calc(100dvh - 112px)) !important;
    max-height: calc(100dvh - 112px) !important;
    box-sizing: border-box !important;
    flex-direction: column !important;
    overflow: hidden !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
}
html body #csPanel.cs-panel[hidden],
html body #csPanel.cs-panel:not(.active) {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}
html body #csPanel.cs-panel.active:not([hidden]) {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}
html body #csToggle.cs-floating-button {
    padding: 0 !important;
    border: 1px solid transparent;
    font: inherit;
}
html body #csPanel .cs-body {
    min-height: 0 !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
}
html body #csPanel .cs-header p {
    margin-bottom: 0;
}
html body #csPanel #csMessage {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}
html body #csPanel :is(#csClose, #csSendBtn) {
    padding: 0 !important;
    cursor: pointer;
}

/* Neutral dark surfaces match the rest of the internal application. */
html body#sppkAppShell.sppk-app-shell.dark #csPanel.cs-panel {
    --sppk-widget-ink: var(--sppk-theme-heading) !important;
    --sppk-widget-copy: var(--sppk-theme-copy) !important;
    --sppk-widget-muted: var(--sppk-theme-muted) !important;
    --sppk-widget-surface: var(--sppk-theme-surface) !important;
    --sppk-widget-soft: var(--sppk-theme-surface-soft) !important;
    --sppk-widget-line: var(--sppk-theme-line) !important;
    --sppk-widget-emerald: var(--sppk-theme-link) !important;
    border: 1px solid var(--sppk-theme-line) !important;
    border-radius: 16px !important;
    background: var(--sppk-theme-surface) !important;
    color: var(--sppk-theme-text) !important;
    box-shadow: var(--sppk-theme-shadow) !important;
}
html body#sppkAppShell.sppk-app-shell.dark #csPanel :is(.cs-header, .cs-footer) {
    border-color: var(--sppk-theme-line-soft) !important;
    background: var(--sppk-theme-surface) !important;
    color: var(--sppk-theme-text) !important;
}
html body#sppkAppShell.sppk-app-shell.dark #csPanel .cs-header {
    border-bottom: 1px solid var(--sppk-theme-line-soft) !important;
}
html body#sppkAppShell.sppk-app-shell.dark #csPanel .cs-body {
    background: var(--sppk-theme-page) !important;
    color: var(--sppk-theme-copy) !important;
    scrollbar-color: #777777 transparent !important;
}
html body#sppkAppShell.sppk-app-shell.dark #csPanel .cs-card {
    border: 1px solid var(--sppk-theme-line-soft) !important;
    border-radius: 12px !important;
    background: var(--sppk-theme-surface) !important;
    color: var(--sppk-theme-text) !important;
    box-shadow: none !important;
    transform: none !important;
}
html body#sppkAppShell.sppk-app-shell.dark #csPanel .cs-header::after,
html body#sppkAppShell.sppk-app-shell.dark #csPanel .cs-card::after {
    display: none !important;
    content: none !important;
    animation: none !important;
}
html body#sppkAppShell.sppk-app-shell.dark #csPanel :is(.cs-header h3, .cs-card-title) {
    color: var(--sppk-theme-heading) !important;
    -webkit-text-fill-color: currentColor !important;
}
html body#sppkAppShell.sppk-app-shell.dark #csPanel :is(.cs-header p, .cs-card p) {
    color: var(--sppk-theme-copy) !important;
    -webkit-text-fill-color: currentColor !important;
    font-size: 11.5px !important;
    opacity: 1 !important;
}
html body#sppkAppShell.sppk-app-shell.dark #csPanel .cs-online {
    color: var(--sppk-theme-muted) !important;
    -webkit-text-fill-color: currentColor !important;
}
html body#sppkAppShell.sppk-app-shell.dark #csPanel .cs-online-dot {
    background: var(--sppk-theme-brand) !important;
    box-shadow: none !important;
    animation: none !important;
}
html body#sppkAppShell.sppk-app-shell.dark #csPanel .cs-card-title i {
    color: var(--sppk-theme-copy) !important;
    -webkit-text-fill-color: currentColor !important;
}
html body#sppkAppShell.sppk-app-shell.dark #csPanel :is(.cs-btn, .cs-quick a, #csSendBtn) {
    border: 1px solid var(--sppk-theme-line) !important;
    background: var(--sppk-theme-surface-soft) !important;
    color: var(--sppk-theme-text) !important;
    -webkit-text-fill-color: currentColor !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    box-shadow: none !important;
    filter: none !important;
    transform: none !important;
    animation: none !important;
}
html body#sppkAppShell.sppk-app-shell.dark #csPanel .cs-btn {
    color: var(--sppk-theme-link) !important;
    -webkit-text-fill-color: currentColor !important;
}
html body#sppkAppShell.sppk-app-shell.dark #csPanel :is(.cs-btn, .cs-quick a, #csSendBtn):is(:hover, :focus-visible) {
    border-color: var(--sppk-theme-line) !important;
    background: var(--sppk-theme-surface-raised) !important;
    color: var(--sppk-theme-text) !important;
    -webkit-text-fill-color: currentColor !important;
    filter: none !important;
    transform: none !important;
    box-shadow: none !important;
}
html body#sppkAppShell.sppk-app-shell.dark #csPanel :is(.cs-btn i, #csSendBtn i) {
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
}
html body#sppkAppShell.sppk-app-shell.dark #csPanel #csClose {
    border: 1px solid var(--sppk-theme-line) !important;
    background: transparent !important;
    color: var(--sppk-theme-copy) !important;
    -webkit-text-fill-color: currentColor !important;
    transform: none !important;
    box-shadow: none !important;
}
html body#sppkAppShell.sppk-app-shell.dark #csPanel #csClose:is(:hover, :focus-visible) {
    background: var(--sppk-theme-surface-raised) !important;
}
html body#sppkAppShell.sppk-app-shell.dark #csPanel #csMessage {
    border: 1px solid var(--sppk-theme-line) !important;
    background: var(--sppk-theme-input) !important;
    color: var(--sppk-theme-text) !important;
    -webkit-text-fill-color: currentColor !important;
    font-size: 11.5px !important;
    box-shadow: none !important;
}
html body#sppkAppShell.sppk-app-shell.dark #csPanel #csMessage::placeholder {
    color: var(--sppk-theme-muted) !important;
    -webkit-text-fill-color: currentColor !important;
    opacity: 1 !important;
}
html body#sppkAppShell.sppk-app-shell.dark #csToggle.cs-floating-button {
    border: 1px solid var(--sppk-theme-line) !important;
    background: var(--sppk-theme-surface-raised) !important;
    color: var(--sppk-theme-heading) !important;
    -webkit-text-fill-color: currentColor !important;
    box-shadow: var(--sppk-theme-shadow-soft) !important;
    animation: none !important;
    filter: none !important;
    transform: none !important;
}
html body#sppkAppShell.sppk-app-shell.dark #csToggle.cs-floating-button i {
    color: var(--sppk-theme-heading) !important;
    -webkit-text-fill-color: currentColor !important;
}
html body#sppkAppShell.sppk-app-shell.dark #csToggle.cs-floating-button:is(:hover, [aria-expanded="true"]) {
    background: var(--sppk-theme-surface-soft) !important;
}
html body#sppkAppShell.sppk-app-shell.dark #csPanel :is(a, button, input):focus-visible,
html body#sppkAppShell.sppk-app-shell.dark #csToggle:focus-visible {
    outline: 2px solid var(--sppk-theme-brand) !important;
    outline-offset: 2px;
}
@media (max-width: 768px) {
    html body #csPanel.cs-panel {
        right: 12px !important;
        bottom: 82px !important;
        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;
        height: min(602px, calc(100vh - 94px)) !important;
        height: min(602px, calc(100dvh - 94px)) !important;
        max-height: calc(100dvh - 94px) !important;
    }
}

/* V28: Input Harian sidebar and original input documents beside it. */

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent #sppkDailyInputWorkspace {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent #sppkDailyInputWorkspace .daily-input-heading {
    display: grid !important;
    gap: 4px !important;
    margin: 0 0 18px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent #sppkDailyInputWorkspace .daily-input-heading h2 {
    margin: 0 !important;
    color: var(--sppk-theme-heading) !important;
    -webkit-text-fill-color: currentColor !important;
    font-size: 24px !important;
    font-weight: 650 !important;
    line-height: 1.25 !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent #sppkDailyInputWorkspace .daily-input-heading p {
    margin: 0 !important;
    color: var(--sppk-theme-muted) !important;
    -webkit-text-fill-color: currentColor !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent #sppkDailyInputWorkspace .daily-input-layout {
    display: grid !important;
    grid-template-columns: 216px minmax(0, 1fr) !important;
    min-width: 0 !important;
    height: max(420px, calc(100dvh - 238px)) !important;
    min-height: 420px !important;
    overflow: hidden !important;
    border: 1px solid var(--sppk-theme-line) !important;
    border-radius: 14px !important;
    background: var(--sppk-theme-surface) !important;
    box-shadow: none !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent #sppkDailyInputWorkspace .daily-input-navigation {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 12px !important;
    overflow-y: auto !important;
    border: 0 !important;
    border-right: 1px solid var(--sppk-theme-line) !important;
    background: var(--sppk-theme-surface-soft) !important;
    scrollbar-width: thin !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent #sppkDailyInputWorkspace .daily-input-navigation h3 {
    margin: 6px 8px 12px !important;
    color: var(--sppk-theme-copy) !important;
    -webkit-text-fill-color: currentColor !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent #sppkDailyInputWorkspace .daily-input-tabs {
    display: flex !important;
    gap: 4px !important;
    flex-direction: column !important;
    min-width: 0 !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent #sppkDailyInputWorkspace .daily-input-tab {
    display: flex !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 10px !important;
    color: var(--sppk-theme-copy) !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    align-items: center !important;
    min-width: 0 !important;
    min-height: 64px !important;
    border-radius: 8px !important;
    font-size: 11.5px !important;
    line-height: 1.4 !important;
    text-decoration: none !important;
    box-shadow: none !important;
    transform: none !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent #sppkDailyInputWorkspace .daily-input-tab > i {
    width: 18px !important;
    flex: 0 0 18px !important;
    color: var(--sppk-theme-copy) !important;
    font-size: 17px !important;
    text-align: center !important;
    -webkit-text-fill-color: currentColor !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent #sppkDailyInputWorkspace .daily-input-tab-copy {
    display: grid !important;
    gap: 3px !important;
    min-width: 0 !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent #sppkDailyInputWorkspace .daily-input-tab-copy strong {
    margin: 0 !important;
    color: var(--sppk-theme-heading) !important;
    -webkit-text-fill-color: currentColor !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    overflow-wrap: anywhere !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent #sppkDailyInputWorkspace .daily-input-tab-copy small {
    margin: 0 !important;
    color: var(--sppk-theme-muted) !important;
    -webkit-text-fill-color: currentColor !important;
    font-size: 10px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    overflow-wrap: anywhere !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent #sppkDailyInputWorkspace .daily-input-tab:is(:hover, .is-active) {
    background: var(--sppk-theme-surface-raised) !important;
    border-color: var(--sppk-theme-line) !important;
    box-shadow: none !important;
    transform: none !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent #sppkDailyInputWorkspace .daily-input-tab[aria-disabled="true"] {
    color: var(--sppk-theme-muted) !important;
    opacity: 1 !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent #sppkDailyInputWorkspace .daily-input-tab > .daily-input-lock {
    width: 12px !important;
    flex: 0 0 12px !important;
    color: var(--sppk-theme-muted) !important;
    margin-left: auto !important;
    font-size: 11px !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent #sppkDailyInputWorkspace .daily-input-main {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    min-height: 0 !important;
    background: var(--sppk-theme-surface) !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent #sppkDailyInputWorkspace .daily-input-form-heading {
    display: flex !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 16px 20px !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex: 0 0 auto !important;
    border: 0 !important;
    border-bottom: 1px solid var(--sppk-theme-line-soft) !important;
    background: var(--sppk-theme-surface) !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent #sppkDailyInputWorkspace .daily-input-form-heading > div {
    min-width: 0 !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent #sppkDailyInputWorkspace .daily-input-form-heading h3 {
    margin: 0 !important;
    color: var(--sppk-theme-heading) !important;
    -webkit-text-fill-color: currentColor !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent #sppkDailyInputWorkspace .daily-input-form-heading p {
    margin: 4px 0 0 !important;
    color: var(--sppk-theme-muted) !important;
    -webkit-text-fill-color: currentColor !important;
    font-size: 11.5px !important;
    line-height: 1.5 !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent #sppkDailyInputWorkspace .daily-input-open-page {
    display: inline-flex !important;
    gap: 6px !important;
    flex: 0 0 auto !important;
    padding: 6px 8px !important;
    color: var(--sppk-theme-copy) !important;
    align-items: center !important;
    min-height: 30px !important;
    border: 1px solid var(--sppk-theme-line) !important;
    border-radius: 7px !important;
    background: transparent !important;
    font-size: 10.5px !important;
    line-height: 1.4 !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent #sppkDailyInputWorkspace .daily-input-open-page :is(span, i) {
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
    font-size: inherit !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent #sppkDailyInputWorkspace .daily-input-panels {
    display: flex !important;
    flex: 1 1 auto !important;
    position: relative !important;
    flex-direction: column !important;
    min-width: 0 !important;
    min-height: 0 !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent #sppkDailyInputWorkspace .daily-input-panel {
    display: flex !important;
    flex: 1 1 auto !important;
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    flex-direction: column !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--sppk-theme-surface) !important;
    box-shadow: none !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent #sppkDailyInputWorkspace :is(.daily-input-panel, .daily-input-loading, .daily-input-retry, .daily-input-open-page)[hidden] {
    display: none !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent #sppkDailyInputWorkspace .daily-input-frame {
    display: block !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    background: var(--sppk-theme-surface) !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent #sppkDailyInputWorkspace .daily-input-loading {
    position: absolute !important;
    inset: 0 !important;
    display: grid !important;
    gap: 12px !important;
    padding: 20px !important;
    color: var(--sppk-theme-copy) !important;
    background: var(--sppk-theme-surface) !important;
    z-index: 2 !important;
    place-items: center !important;
    align-content: center !important;
    text-align: center !important;
    font-size: 12px !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent #sppkDailyInputWorkspace .daily-input-loading-message {
    color: var(--sppk-theme-copy) !important;
    -webkit-text-fill-color: currentColor !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent #sppkDailyInputWorkspace .daily-input-retry {
    padding: 7px 12px !important;
    border: 1px solid var(--sppk-theme-line) !important;
    color: var(--sppk-theme-heading) !important;
    background: var(--sppk-theme-surface-raised) !important;
    -webkit-text-fill-color: currentColor !important;
    border-radius: 8px !important;
    font-size: 11.5px !important;
    line-height: 1.4 !important;
    box-shadow: none !important;
    cursor: pointer !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent #sppkDailyInputWorkspace :is(.daily-input-tab, .daily-input-open-page, .daily-input-retry):focus-visible {
    outline: 2px solid var(--sppk-theme-brand) !important;
    outline-offset: -2px !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent #sppkDailyInputWorkspace .daily-input-noscript {
    padding: 20px !important;
    color: var(--sppk-theme-copy) !important;
    font-size: 12px !important;
}

html.sppk-input-embedded body#sppkAppShell.sppk-app-shell {
    min-width: 0 !important;
    min-height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    background: var(--sppk-theme-surface) !important;
}

html.sppk-input-embedded body#sppkAppShell.sppk-app-shell :is(#appSidebar, .sidebar-backdrop, .topbar, #csToggle, #csPanel, #ai-toggle, #ai-panel, #sppkProfileMenu) {
    display: none !important;
}

html.sppk-input-embedded body#sppkAppShell.sppk-app-shell .page-shell.main-content {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    background: var(--sppk-theme-surface) !important;
    transition: none !important;
}

html.sppk-input-embedded body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 18px !important;
    background: var(--sppk-theme-surface) !important;
}

html.sppk-input-embedded body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent > .sppk-input-workspace {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

html.sppk-input-embedded body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent .sppk-form-hero {
    display: none !important;
}

html.sppk-input-embedded body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent .sppk-form-shell {
    box-shadow: none !important;
    border-radius: 12px !important;
}

@media (max-width: 900px) {

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent #sppkDailyInputWorkspace .daily-input-layout {
    grid-template-columns: 180px minmax(0, 1fr) !important;
}

}
@media (max-width: 639.98px) {

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent #sppkDailyInputWorkspace .daily-input-layout {
    grid-template-columns: 54px minmax(0, 1fr) !important;
    border-radius: 10px !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent #sppkDailyInputWorkspace .daily-input-navigation {
    padding: 6px !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent #sppkDailyInputWorkspace .daily-input-navigation h3 {
    display: none !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent #sppkDailyInputWorkspace .daily-input-tab {
    padding: 10px 6px !important;
    gap: 0 !important;
    justify-content: center !important;
    min-height: 44px !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent #sppkDailyInputWorkspace .daily-input-tab-copy {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent #sppkDailyInputWorkspace .daily-input-tab > .daily-input-lock {
    display: none !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent #sppkDailyInputWorkspace .daily-input-form-heading {
    padding: 12px !important;
    gap: 8px !important;
    align-items: flex-start !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent #sppkDailyInputWorkspace .daily-input-form-heading h3 {
    font-size: 12.5px !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent #sppkDailyInputWorkspace .daily-input-form-heading p {
    display: none !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent #sppkDailyInputWorkspace .daily-input-open-page {
    padding: 5px !important;
    min-height: 28px !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent #sppkDailyInputWorkspace .daily-input-open-page span {
    display: none !important;
}

html.sppk-input-embedded body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent {
    padding: 12px !important;
}

}

/* SETTINGS V35 — CUSTOMER SUPPORT INSIDE ACCOUNT SETTINGS ONLY. */
html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell.sppk-route-customer-service
.page-shell.main-content #sppkPageContent .customer-service-page {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: var(--sppk-theme-surface) !important;
    color: var(--sppk-theme-text) !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell.sppk-route-customer-service
.page-shell.main-content #sppkPageContent :is(.customer-service-topbar, .customer-service-page > .hero, .customer-service-page > .stats, .customer-service-site-footer) {
    display: none !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell.sppk-route-customer-service
.page-shell.main-content #sppkPageContent .customer-service-page .grid {
    display: block !important;
    margin: 0 !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell.sppk-route-customer-service
.page-shell.main-content #sppkPageContent .customer-service-page .card {
    margin: 0 !important;
    padding: 20px 0 !important;
    border: 0 !important;
    border-bottom: 1px solid var(--sppk-theme-line-soft) !important;
    background: transparent !important;
    box-shadow: none !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell.sppk-route-customer-service
.page-shell.main-content #sppkPageContent .customer-service-page .card:first-child {
    padding-top: 0 !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell.sppk-route-customer-service
.page-shell.main-content #sppkPageContent .customer-service-page #ticket {
    position: static !important;
    margin-top: 20px !important;
    padding-top: 20px !important;
    scroll-margin-top: 12px;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell.sppk-route-customer-service
.page-shell.main-content #sppkPageContent .customer-service-page .section-title {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: baseline !important;
    gap: 4px 12px !important;
    margin: 0 0 14px !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell.sppk-route-customer-service
.page-shell.main-content #sppkPageContent .customer-service-page .support-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell.sppk-route-customer-service
.page-shell.main-content #sppkPageContent .customer-service-page .support-box {
    min-width: 0 !important;
    padding: 14px !important;
    border: 1px solid var(--sppk-theme-line-soft) !important;
    border-radius: 10px !important;
    background: var(--sppk-theme-surface-soft) !important;
    box-shadow: none !important;
    transform: none !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell.sppk-route-customer-service
.page-shell.main-content #sppkPageContent .customer-service-page .support-box > a {
    display: inline-flex !important;
    margin-top: 10px !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell.sppk-route-customer-service
.page-shell.main-content #sppkPageContent .customer-service-page .support-icon {
    width: 32px !important;
    height: 32px !important;
    margin-bottom: 10px !important;
    border: 1px solid var(--sppk-theme-line) !important;
    border-radius: 8px !important;
    background: var(--sppk-theme-surface) !important;
    color: var(--sppk-theme-link) !important;
    font-size: 15px !important;
    box-shadow: none !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell.sppk-route-customer-service
.page-shell.main-content #sppkPageContent .customer-service-page .ticket-form {
    gap: 14px !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell.sppk-route-customer-service
.page-shell.main-content #sppkPageContent .customer-service-page .form-group {
    gap: 6px !important;
}

html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell.sppk-route-customer-service
.page-shell.main-content #sppkPageContent .customer-service-page .submit-btn {
    justify-self: end !important;
    width: auto !important;
    padding: 10px 16px !important;
    border-radius: 8px !important;
}

@media (max-width: 480px) {
    html.sppk-settings-embedded body#sppkAppShell.sppk-app-shell.sppk-route-customer-service
    .page-shell.main-content #sppkPageContent .customer-service-page .support-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

/* ======================================================================
   DASHBOARD V36 — LIGHT THEME CONTROL AND LABEL CONTRAST
   Both html and body must be in light mode. Every new rule is confined to
   the dashboard and its owned dialogs; existing dark rules remain intact.
   No chart colors, media overlays, map polygons or component sizes change.
   ====================================================================== */

html:not(.dark) body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark) {
    --sppk-light-ink: #243247 !important;
    --sppk-light-copy: #526176 !important;
    --sppk-light-border: #7c8b9e !important;
    --sppk-light-soft: #f4f7fa !important;
    --sppk-light-green: #086445 !important;
    --sppk-light-green-soft: #e8f5ee !important;
    --sppk-light-blue: #21589a !important;
    --sppk-light-blue-soft: #edf4ff !important;
    --sppk-light-amber: #78500c !important;
    --sppk-light-amber-soft: #fff4d6 !important;
    --sppk-light-red: #a3243d !important;
    --sppk-light-red-soft: #fff1f3 !important;
}

html:not(.dark) body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark)
:is(#sppkPageContent, #dashboardHistoryPopover, #dashboardInfoModal, #exportPdfModal, #welcomeModal, #activityCenter, #smartAnalyticModal, #warningMonitoringModal, #liveActivityModal, #dashboardDocumentModal, #dashboardWeatherLocationModal) :is(.dashboard-active-target-toggle, .dashboard-history-button, .dashboard-history-close, .dashboard-flow-filter, .dashboard-activity-filter-button, .dashboard-context-tab, .dashboard-context-action, .dashboard-secondary-button, .dashboard-primary-button, .dashboard-icon-button, .dashboard-extension-link, .dashboard-document-actions a, .dashboard-document-delete, .monitoring-launcher-button, .quick-menu-modern, .monitor-modal-action, .btn:not(.btn-close)) {
    background-color: var(--sppk-light-control-bg, #ffffff) !important;
    background-image: none !important;
    border-color: var(--sppk-light-control-border, var(--sppk-light-border)) !important;
    color: var(--sppk-light-control-fg, var(--sppk-light-ink)) !important;
    -webkit-text-fill-color: currentColor !important;
    box-shadow: inset 0 0 0 1px var(--sppk-light-control-border, var(--sppk-light-border)) !important;
    text-shadow: none !important;
    opacity: 1 !important;
}

html:not(.dark) body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark)
:is(#sppkPageContent, #dashboardHistoryPopover, #dashboardInfoModal, #exportPdfModal, #welcomeModal, #activityCenter, #smartAnalyticModal, #warningMonitoringModal, #liveActivityModal, #dashboardDocumentModal, #dashboardWeatherLocationModal) :is(.dashboard-active-target-toggle, .dashboard-history-button, .dashboard-history-close, .dashboard-flow-filter, .dashboard-activity-filter-button, .dashboard-context-tab, .dashboard-context-action, .dashboard-secondary-button, .dashboard-primary-button, .dashboard-icon-button, .dashboard-extension-link, .dashboard-document-actions a, .dashboard-document-delete, .monitoring-launcher-button, .quick-menu-modern, .monitor-modal-action, .btn:not(.btn-close)) :is(span, i, b, strong, small) {
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
    text-shadow: none !important;
    opacity: 1 !important;
}

html:not(.dark) body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark)
:is(#sppkPageContent, #dashboardHistoryPopover, #dashboardInfoModal, #exportPdfModal, #welcomeModal, #activityCenter, #smartAnalyticModal, #warningMonitoringModal, #liveActivityModal, #dashboardDocumentModal, #dashboardWeatherLocationModal) :is(.dashboard-active-target-toggle, .dashboard-history-button, .dashboard-history-close, .dashboard-flow-filter, .dashboard-activity-filter-button, .dashboard-context-tab, .dashboard-context-action, .dashboard-secondary-button, .dashboard-primary-button, .dashboard-icon-button, .dashboard-extension-link, .dashboard-document-actions a, .dashboard-document-delete, .monitoring-launcher-button, .quick-menu-modern, .monitor-modal-action, .btn:not(.btn-close)):hover:not(:disabled):not([aria-disabled="true"]) {
    --sppk-light-control-bg: #eaf0f6 !important;
    --sppk-light-control-fg: var(--sppk-light-ink) !important;
    --sppk-light-control-border: #53657d !important;
}

html:not(.dark) body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark)
:is(#sppkPageContent, #dashboardHistoryPopover, #dashboardInfoModal, #exportPdfModal, #welcomeModal, #activityCenter, #smartAnalyticModal, #warningMonitoringModal, #liveActivityModal, #dashboardDocumentModal, #dashboardWeatherLocationModal) :is(.dashboard-primary-button, .dashboard-context-action.is-primary, .btn-success, .btn-primary, .export-confirm-submit, .welcome-start-button),
html:not(.dark) body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark)
:is(#sppkPageContent, #dashboardHistoryPopover, #dashboardInfoModal, #exportPdfModal, #welcomeModal, #activityCenter, #smartAnalyticModal, #warningMonitoringModal, #liveActivityModal, #dashboardDocumentModal, #dashboardWeatherLocationModal) :is(.dashboard-flow-filter, .dashboard-activity-filter-button, .dashboard-context-tab):is(.is-active, [aria-pressed="true"]),
html:not(.dark) body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark)
:is(#sppkPageContent, #dashboardHistoryPopover, #dashboardInfoModal, #exportPdfModal, #welcomeModal, #activityCenter, #smartAnalyticModal, #warningMonitoringModal, #liveActivityModal, #dashboardDocumentModal, #dashboardWeatherLocationModal) :is(.dashboard-active-target-toggle, .dashboard-history-button)[aria-expanded="true"] {
    --sppk-light-control-bg: var(--sppk-light-green) !important;
    --sppk-light-control-fg: #ffffff !important;
    --sppk-light-control-border: var(--sppk-light-green) !important;
}

html:not(.dark) body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark)
:is(#sppkPageContent, #dashboardHistoryPopover, #dashboardInfoModal, #exportPdfModal, #welcomeModal, #activityCenter, #smartAnalyticModal, #warningMonitoringModal, #liveActivityModal, #dashboardDocumentModal, #dashboardWeatherLocationModal) :is(.dashboard-primary-button, .dashboard-context-action.is-primary, .btn-success, .btn-primary, .export-confirm-submit, .welcome-start-button):hover:not(:disabled):not([aria-disabled="true"]),
html:not(.dark) body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark)
:is(#sppkPageContent, #dashboardHistoryPopover, #dashboardInfoModal, #exportPdfModal, #welcomeModal, #activityCenter, #smartAnalyticModal, #warningMonitoringModal, #liveActivityModal, #dashboardDocumentModal, #dashboardWeatherLocationModal) :is(.dashboard-flow-filter, .dashboard-activity-filter-button, .dashboard-context-tab):is(.is-active, [aria-pressed="true"]):hover:not(:disabled):not([aria-disabled="true"]),
html:not(.dark) body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark)
:is(#sppkPageContent, #dashboardHistoryPopover, #dashboardInfoModal, #exportPdfModal, #welcomeModal, #activityCenter, #smartAnalyticModal, #warningMonitoringModal, #liveActivityModal, #dashboardDocumentModal, #dashboardWeatherLocationModal) :is(.dashboard-active-target-toggle, .dashboard-history-button)[aria-expanded="true"]:hover:not(:disabled):not([aria-disabled="true"]) {
    --sppk-light-control-bg: #064e36 !important;
    --sppk-light-control-fg: #ffffff !important;
    --sppk-light-control-border: #064e36 !important;
}

html:not(.dark) body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark)
:is(#sppkPageContent, #dashboardHistoryPopover, #dashboardInfoModal, #exportPdfModal, #welcomeModal, #activityCenter, #smartAnalyticModal, #warningMonitoringModal, #liveActivityModal, #dashboardDocumentModal, #dashboardWeatherLocationModal) .btn-dark {
    --sppk-light-control-bg: var(--sppk-light-ink) !important;
    --sppk-light-control-fg: #ffffff !important;
    --sppk-light-control-border: var(--sppk-light-ink) !important;
}

html:not(.dark) body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark)
:is(#sppkPageContent, #dashboardHistoryPopover, #dashboardInfoModal, #exportPdfModal, #welcomeModal, #activityCenter, #smartAnalyticModal, #warningMonitoringModal, #liveActivityModal, #dashboardDocumentModal, #dashboardWeatherLocationModal) .btn-dark:hover:not(:disabled) {
    --sppk-light-control-bg: #172033 !important;
    --sppk-light-control-fg: #ffffff !important;
}

html:not(.dark) body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark)
:is(#sppkPageContent, #dashboardHistoryPopover, #dashboardInfoModal, #exportPdfModal, #welcomeModal, #activityCenter, #smartAnalyticModal, #warningMonitoringModal, #liveActivityModal, #dashboardDocumentModal, #dashboardWeatherLocationModal) :is(.dashboard-document-delete, .btn-danger, .btn-outline-danger) {
    --sppk-light-control-bg: var(--sppk-light-red-soft) !important;
    --sppk-light-control-fg: var(--sppk-light-red) !important;
    --sppk-light-control-border: #b34157 !important;
}

html:not(.dark) body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark)
:is(#sppkPageContent, #dashboardHistoryPopover, #dashboardInfoModal, #exportPdfModal, #welcomeModal, #activityCenter, #smartAnalyticModal, #warningMonitoringModal, #liveActivityModal, #dashboardDocumentModal, #dashboardWeatherLocationModal) :is(.dashboard-document-delete, .btn-danger, .btn-outline-danger):hover:not(:disabled) {
    --sppk-light-control-bg: #fce0e6 !important;
    --sppk-light-control-fg: #82182e !important;
    --sppk-light-control-border: #a3243d !important;
}

html:not(.dark) body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark)
:is(#sppkPageContent, #dashboardHistoryPopover, #dashboardInfoModal, #exportPdfModal, #welcomeModal, #activityCenter, #smartAnalyticModal, #warningMonitoringModal, #liveActivityModal, #dashboardDocumentModal, #dashboardWeatherLocationModal) :is(.btn-warning, .btn-outline-warning) {
    --sppk-light-control-bg: var(--sppk-light-amber-soft) !important;
    --sppk-light-control-fg: var(--sppk-light-amber) !important;
    --sppk-light-control-border: #95701e !important;
}

html:not(.dark) body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark)
:is(#sppkPageContent, #dashboardHistoryPopover, #dashboardInfoModal, #exportPdfModal, #welcomeModal, #activityCenter, #smartAnalyticModal, #warningMonitoringModal, #liveActivityModal, #dashboardDocumentModal, #dashboardWeatherLocationModal) :is(.btn-warning, .btn-outline-warning):hover:not(:disabled) {
    --sppk-light-control-bg: #ffe6a6 !important;
    --sppk-light-control-fg: #634009 !important;
    --sppk-light-control-border: #78500c !important;
}

html:not(.dark) body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark)
:is(#sppkPageContent, #dashboardHistoryPopover, #dashboardInfoModal, #exportPdfModal, #welcomeModal, #activityCenter, #smartAnalyticModal, #warningMonitoringModal, #liveActivityModal, #dashboardDocumentModal, #dashboardWeatherLocationModal) :is(.dashboard-active-target-toggle, .dashboard-history-button, .dashboard-history-close, .dashboard-flow-filter, .dashboard-activity-filter-button, .dashboard-context-tab, .dashboard-context-action, .dashboard-secondary-button, .dashboard-primary-button, .dashboard-icon-button, .dashboard-extension-link, .dashboard-document-actions a, .dashboard-document-delete, .monitoring-launcher-button, .quick-menu-modern, .monitor-modal-action, .btn:not(.btn-close)):is(:disabled, [aria-disabled="true"]) {
    --sppk-light-control-bg: #e8edf2 !important;
    --sppk-light-control-fg: var(--sppk-light-copy) !important;
    --sppk-light-control-border: #98a5b5 !important;
    cursor: not-allowed !important;
}

html:not(.dark) body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark)
:is(#sppkPageContent, #dashboardHistoryPopover, #dashboardInfoModal, #exportPdfModal, #welcomeModal, #activityCenter, #smartAnalyticModal, #warningMonitoringModal, #liveActivityModal, #dashboardDocumentModal, #dashboardWeatherLocationModal) :is(.dashboard-active-target-toggle, .dashboard-history-button, .dashboard-history-close, .dashboard-flow-filter, .dashboard-activity-filter-button, .dashboard-context-tab, .dashboard-context-action, .dashboard-secondary-button, .dashboard-primary-button, .dashboard-icon-button, .dashboard-extension-link, .dashboard-document-actions a, .dashboard-document-delete, .monitoring-launcher-button, .quick-menu-modern, .monitor-modal-action, .btn:not(.btn-close)):focus-visible,
html:not(.dark) body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark)
:is(#sppkPageContent, #dashboardHistoryPopover, #dashboardInfoModal, #exportPdfModal, #welcomeModal, #activityCenter, #smartAnalyticModal, #warningMonitoringModal, #liveActivityModal, #dashboardDocumentModal, #dashboardWeatherLocationModal) :is(.dashboard-info-card, .dashboard-extension-select, .form-control, .form-select):focus-visible {
    outline: 3px solid var(--sppk-light-blue) !important;
    outline-offset: 3px !important;
}

html:not(.dark) body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark)
:is(#sppkPageContent, #dashboardHistoryPopover, #dashboardInfoModal, #exportPdfModal, #welcomeModal, #activityCenter, #smartAnalyticModal, #warningMonitoringModal, #liveActivityModal, #dashboardDocumentModal, #dashboardWeatherLocationModal) .dashboard-activity-filter-button b {
    background: #e4ebf3 !important;
    color: var(--sppk-light-ink) !important;
    -webkit-text-fill-color: currentColor !important;
}

html:not(.dark) body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark)
:is(#sppkPageContent, #dashboardHistoryPopover, #dashboardInfoModal, #exportPdfModal, #welcomeModal, #activityCenter, #smartAnalyticModal, #warningMonitoringModal, #liveActivityModal, #dashboardDocumentModal, #dashboardWeatherLocationModal) .dashboard-activity-filter-button:is(.is-active, [aria-pressed="true"]) b {
    background: #ffffff !important;
    color: var(--sppk-light-green) !important;
    -webkit-text-fill-color: currentColor !important;
}

html:not(.dark) body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark)
:is(#sppkPageContent, #dashboardHistoryPopover, #dashboardInfoModal, #exportPdfModal, #welcomeModal, #activityCenter, #smartAnalyticModal, #warningMonitoringModal, #liveActivityModal, #dashboardDocumentModal, #dashboardWeatherLocationModal) .monitoring-launcher-button::after {
    background: var(--sppk-light-control-bg, #ffffff) !important;
}

html:not(.dark) body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark)
:is(#sppkPageContent, #dashboardHistoryPopover, #dashboardInfoModal, #exportPdfModal, #welcomeModal, #activityCenter, #smartAnalyticModal, #warningMonitoringModal, #liveActivityModal, #dashboardDocumentModal, #dashboardWeatherLocationModal) .monitoring-launcher-button small {
    color: var(--sppk-light-copy) !important;
    -webkit-text-fill-color: currentColor !important;
}

html:not(.dark) body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark)
:is(#sppkPageContent, #dashboardHistoryPopover, #dashboardInfoModal, #exportPdfModal, #welcomeModal, #activityCenter, #smartAnalyticModal, #warningMonitoringModal, #liveActivityModal, #dashboardDocumentModal, #dashboardWeatherLocationModal) .monitoring-launcher-button.analytic :is(.monitoring-launcher-icon, .monitoring-launcher-count) {
    background: var(--sppk-light-blue-soft) !important;
    color: var(--sppk-light-blue) !important;
    -webkit-text-fill-color: currentColor !important;
}

html:not(.dark) body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark)
:is(#sppkPageContent, #dashboardHistoryPopover, #dashboardInfoModal, #exportPdfModal, #welcomeModal, #activityCenter, #smartAnalyticModal, #warningMonitoringModal, #liveActivityModal, #dashboardDocumentModal, #dashboardWeatherLocationModal) .monitoring-launcher-button.warning :is(.monitoring-launcher-icon, .monitoring-launcher-count) {
    background: var(--sppk-light-red-soft) !important;
    color: var(--sppk-light-red) !important;
    -webkit-text-fill-color: currentColor !important;
}

html:not(.dark) body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark)
:is(#sppkPageContent, #dashboardHistoryPopover, #dashboardInfoModal, #exportPdfModal, #welcomeModal, #activityCenter, #smartAnalyticModal, #warningMonitoringModal, #liveActivityModal, #dashboardDocumentModal, #dashboardWeatherLocationModal) .monitoring-launcher-button.activity :is(.monitoring-launcher-icon, .monitoring-launcher-count) {
    background: var(--sppk-light-green-soft) !important;
    color: var(--sppk-light-green) !important;
    -webkit-text-fill-color: currentColor !important;
}

html:not(.dark) body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark)
:is(#sppkPageContent, #dashboardHistoryPopover, #dashboardInfoModal, #exportPdfModal, #welcomeModal, #activityCenter, #smartAnalyticModal, #warningMonitoringModal, #liveActivityModal, #dashboardDocumentModal, #dashboardWeatherLocationModal) .monitoring-launcher-icon i {
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
}

html:not(.dark) body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark)
:is(#sppkPageContent, #dashboardHistoryPopover, #dashboardInfoModal, #exportPdfModal, #welcomeModal, #activityCenter, #smartAnalyticModal, #warningMonitoringModal, #liveActivityModal, #dashboardDocumentModal, #dashboardWeatherLocationModal) .dashboard-flow-header {
    background: var(--sppk-light-soft) !important;
    color: var(--sppk-light-ink) !important;
    -webkit-text-fill-color: currentColor !important;
}

html:not(.dark) body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark)
:is(#sppkPageContent, #dashboardHistoryPopover, #dashboardInfoModal, #exportPdfModal, #welcomeModal, #activityCenter, #smartAnalyticModal, #warningMonitoringModal, #liveActivityModal, #dashboardDocumentModal, #dashboardWeatherLocationModal) .dashboard-flow-heading :is(h5, small, i) {
    color: var(--sppk-light-ink) !important;
    -webkit-text-fill-color: currentColor !important;
    opacity: 1 !important;
    text-shadow: none !important;
}

html:not(.dark) body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark)
:is(#sppkPageContent, #dashboardHistoryPopover, #dashboardInfoModal, #exportPdfModal, #welcomeModal, #activityCenter, #smartAnalyticModal, #warningMonitoringModal, #liveActivityModal, #dashboardDocumentModal, #dashboardWeatherLocationModal) :is(.dashboard-flow-filters, .dashboard-activity-filter) {
    background: var(--sppk-light-soft) !important;
    border-color: #cbd5df !important;
}

html:not(.dark) body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark)
:is(#sppkPageContent, #dashboardHistoryPopover, #dashboardInfoModal, #exportPdfModal, #welcomeModal, #activityCenter, #smartAnalyticModal, #warningMonitoringModal, #liveActivityModal, #dashboardDocumentModal, #dashboardWeatherLocationModal) :is(.kpi-card > p, .kpi-card > small, .kpi-card > span, .dashboard-card > small, .dashboard-active-target-kicker, .dashboard-command-eyebrow, .dashboard-management-eyebrow, .dashboard-management-source, .dashboard-extension-eyebrow, .dashboard-extension-kicker, .dashboard-running-group, .dashboard-running-label, .dashboard-activity-filter-status, .dashboard-definition-eyebrow, .dashboard-history-note, .dashboard-history-eyebrow, .dashboard-location-guidance, .dashboard-form-note, .monitoring-launcher-heading, label, .form-label, .form-text) {
    color: var(--sppk-light-copy) !important;
    -webkit-text-fill-color: currentColor !important;
    opacity: 1 !important;
    text-shadow: none !important;
}

html:not(.dark) body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark)
:is(#sppkPageContent, #dashboardHistoryPopover, #dashboardInfoModal, #exportPdfModal, #welcomeModal, #activityCenter, #smartAnalyticModal, #warningMonitoringModal, #liveActivityModal, #dashboardDocumentModal, #dashboardWeatherLocationModal) :is(.kpi-card > p, .kpi-card > small, .kpi-card > span, .dashboard-card > small, .dashboard-running-group, .dashboard-running-label, .dashboard-management-source, .dashboard-form-note) :is(span, small, i) {
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
    opacity: 1 !important;
}

html:not(.dark) body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark)
:is(#sppkPageContent, #dashboardHistoryPopover, #dashboardInfoModal, #exportPdfModal, #welcomeModal, #activityCenter, #smartAnalyticModal, #warningMonitoringModal, #liveActivityModal, #dashboardDocumentModal, #dashboardWeatherLocationModal) :is(.dashboard-extension-select, .form-control, .form-select) {
    background-color: #ffffff !important;
    color: var(--sppk-light-ink) !important;
    -webkit-text-fill-color: currentColor !important;
    border-color: var(--sppk-light-border) !important;
}

html:not(.dark) body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark)
:is(#sppkPageContent, #dashboardHistoryPopover, #dashboardInfoModal, #exportPdfModal, #welcomeModal, #activityCenter, #smartAnalyticModal, #warningMonitoringModal, #liveActivityModal, #dashboardDocumentModal, #dashboardWeatherLocationModal) :is(.dashboard-extension-select, .form-select) option {
    background-color: #ffffff !important;
    color: var(--sppk-light-ink) !important;
    -webkit-text-fill-color: currentColor !important;
}

html:not(.dark) body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark)
:is(#sppkPageContent, #dashboardHistoryPopover, #dashboardInfoModal, #exportPdfModal, #welcomeModal, #activityCenter, #smartAnalyticModal, #warningMonitoringModal, #liveActivityModal, #dashboardDocumentModal, #dashboardWeatherLocationModal) :is(.dashboard-extension-select, .form-control, .form-select):disabled {
    background-color: #e8edf2 !important;
    color: var(--sppk-light-copy) !important;
    -webkit-text-fill-color: currentColor !important;
    opacity: 1 !important;
}

html:not(.dark) body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark)
:is(#sppkPageContent, #dashboardHistoryPopover, #dashboardInfoModal, #exportPdfModal, #welcomeModal, #activityCenter, #smartAnalyticModal, #warningMonitoringModal, #liveActivityModal, #dashboardDocumentModal, #dashboardWeatherLocationModal) :is(input, textarea)::placeholder {
    color: var(--sppk-light-copy) !important;
    -webkit-text-fill-color: currentColor !important;
    opacity: 1 !important;
}

html:not(.dark) body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark)
:is(#sppkPageContent, #dashboardHistoryPopover, #dashboardInfoModal, #exportPdfModal, #welcomeModal, #activityCenter, #smartAnalyticModal, #warningMonitoringModal, #liveActivityModal, #dashboardDocumentModal, #dashboardWeatherLocationModal) :is(.dashboard-command-live, .dashboard-active-target-status, .dashboard-extension-safe, .dashboard-insight-live, .dashboard-risk-badge, .dashboard-activity-status, .dashboard-activity-category, .dashboard-activity-module, .dashboard-smart-progress-reading, .dashboard-weather-status, .dashboard-document-meta span, .dashboard-activity-recap-summary > span) {
    background: var(--sppk-light-soft) !important;
    color: var(--sppk-light-ink) !important;
    -webkit-text-fill-color: currentColor !important;
    border-color: #cbd5df !important;
    opacity: 1 !important;
    text-shadow: none !important;
}

html:not(.dark) body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark)
:is(#sppkPageContent, #dashboardHistoryPopover, #dashboardInfoModal, #exportPdfModal, #welcomeModal, #activityCenter, #smartAnalyticModal, #warningMonitoringModal, #liveActivityModal, #dashboardDocumentModal, #dashboardWeatherLocationModal) :is(.dashboard-command-live, .dashboard-active-target-status, .dashboard-extension-safe, .dashboard-insight-live, .dashboard-risk-badge, .dashboard-activity-status, .dashboard-activity-category, .dashboard-activity-module, .dashboard-smart-progress-reading, .dashboard-weather-status, .dashboard-document-meta span, .dashboard-activity-recap-summary > span) :is(i, b, strong, small) {
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
}

html:not(.dark) body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark)
:is(#sppkPageContent, #dashboardHistoryPopover, #dashboardInfoModal, #exportPdfModal, #welcomeModal, #activityCenter, #smartAnalyticModal, #warningMonitoringModal, #liveActivityModal, #dashboardDocumentModal, #dashboardWeatherLocationModal) :is(.dashboard-command-live, .dashboard-active-target-status.is-ready, .dashboard-extension-safe, .dashboard-insight-live, .dashboard-activity-status, .dashboard-activity-category, .dashboard-risk-badge, .dashboard-activity-module) {
    background: var(--sppk-light-green-soft) !important;
    color: var(--sppk-light-green) !important;
    -webkit-text-fill-color: currentColor !important;
}

html:not(.dark) body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark)
:is(#sppkPageContent, #dashboardHistoryPopover, #dashboardInfoModal, #exportPdfModal, #welcomeModal, #activityCenter, #smartAnalyticModal, #warningMonitoringModal, #liveActivityModal, #dashboardDocumentModal, #dashboardWeatherLocationModal) :is(.dashboard-activity-module.is-blue, .dashboard-activity-status.is-auth, .dashboard-risk-badge.is-loading) {
    background: var(--sppk-light-blue-soft) !important;
    color: var(--sppk-light-blue) !important;
    -webkit-text-fill-color: currentColor !important;
}

html:not(.dark) body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark)
:is(#sppkPageContent, #dashboardHistoryPopover, #dashboardInfoModal, #exportPdfModal, #welcomeModal, #activityCenter, #smartAnalyticModal, #warningMonitoringModal, #liveActivityModal, #dashboardDocumentModal, #dashboardWeatherLocationModal) :is(.dashboard-active-target-status.is-empty, .has-attention .dashboard-activity-category, .dashboard-activity-module.is-amber, .dashboard-activity-module.is-orange, .dashboard-risk-panel.is-watch .dashboard-risk-badge, .dashboard-activity-recap-summary > .has-attention) {
    background: var(--sppk-light-amber-soft) !important;
    color: var(--sppk-light-amber) !important;
    -webkit-text-fill-color: currentColor !important;
}

html:not(.dark) body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark)
:is(#sppkPageContent, #dashboardHistoryPopover, #dashboardInfoModal, #exportPdfModal, #welcomeModal, #activityCenter, #smartAnalyticModal, #warningMonitoringModal, #liveActivityModal, #dashboardDocumentModal, #dashboardWeatherLocationModal) :is(.dashboard-activity-module.is-red, .dashboard-activity-status.is-danger, .dashboard-risk-panel.is-high .dashboard-risk-badge) {
    background: var(--sppk-light-red-soft) !important;
    color: var(--sppk-light-red) !important;
    -webkit-text-fill-color: currentColor !important;
}

html:not(.dark) body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark)
:is(#sppkPageContent, #dashboardHistoryPopover, #dashboardInfoModal, #exportPdfModal, #welcomeModal, #activityCenter, #smartAnalyticModal, #warningMonitoringModal, #liveActivityModal, #dashboardDocumentModal, #dashboardWeatherLocationModal) .dashboard-activity-module.is-slate {
    background: var(--sppk-light-soft) !important;
    color: var(--sppk-light-copy) !important;
}

html:not(.dark) body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark)
:is(#sppkPageContent, #dashboardHistoryPopover, #dashboardInfoModal, #exportPdfModal, #welcomeModal, #activityCenter, #smartAnalyticModal, #warningMonitoringModal, #liveActivityModal, #dashboardDocumentModal, #dashboardWeatherLocationModal) .dashboard-smart-progress-status {
    color: var(--sppk-light-copy) !important;
    -webkit-text-fill-color: currentColor !important;
    opacity: 1 !important;
}

html:not(.dark) body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark)
:is(#sppkPageContent, #dashboardHistoryPopover, #dashboardInfoModal, #exportPdfModal, #welcomeModal, #activityCenter, #smartAnalyticModal, #warningMonitoringModal, #liveActivityModal, #dashboardDocumentModal, #dashboardWeatherLocationModal) .dashboard-smart-progress.is-critical .dashboard-smart-progress-status {
    color: var(--sppk-light-red) !important;
}

html:not(.dark) body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark)
:is(#sppkPageContent, #dashboardHistoryPopover, #dashboardInfoModal, #exportPdfModal, #welcomeModal, #activityCenter, #smartAnalyticModal, #warningMonitoringModal, #liveActivityModal, #dashboardDocumentModal, #dashboardWeatherLocationModal) .dashboard-smart-progress.is-warning .dashboard-smart-progress-status {
    color: var(--sppk-light-amber) !important;
}

html:not(.dark) body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark)
:is(#sppkPageContent, #dashboardHistoryPopover, #dashboardInfoModal, #exportPdfModal, #welcomeModal, #activityCenter, #smartAnalyticModal, #warningMonitoringModal, #liveActivityModal, #dashboardDocumentModal, #dashboardWeatherLocationModal) .dashboard-smart-progress.is-progress .dashboard-smart-progress-status {
    color: var(--sppk-light-blue) !important;
}

html:not(.dark) body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark)
:is(#sppkPageContent, #dashboardHistoryPopover, #dashboardInfoModal, #exportPdfModal, #welcomeModal, #activityCenter, #smartAnalyticModal, #warningMonitoringModal, #liveActivityModal, #dashboardDocumentModal, #dashboardWeatherLocationModal) .dashboard-smart-progress.is-complete .dashboard-smart-progress-status {
    color: var(--sppk-light-green) !important;
}

html:not(.dark) body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark)
:is(#sppkPageContent, #dashboardHistoryPopover, #dashboardInfoModal, #exportPdfModal, #welcomeModal, #activityCenter, #smartAnalyticModal, #warningMonitoringModal, #liveActivityModal, #dashboardDocumentModal, #dashboardWeatherLocationModal) .dashboard-smart-progress.is-empty .dashboard-smart-progress-status {
    color: var(--sppk-light-copy) !important;
}

html:not(.dark) body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark)
:is(#sppkPageContent, #dashboardHistoryPopover, #dashboardInfoModal, #exportPdfModal, #welcomeModal, #activityCenter, #smartAnalyticModal, #warningMonitoringModal, #liveActivityModal, #dashboardDocumentModal, #dashboardWeatherLocationModal) .btn-close {
    filter: none !important;
    opacity: 1 !important;
}

/* ======================================================================
   DASHBOARD V37 — SOFTER LIGHT-THEME TEXT
   Moderate gray text and medium weights replace the dense V36 palette.
   Selectors require light mode on html/body and the dashboard route.
   Existing dark styles, dimensions and scroll behavior remain unchanged.
   ====================================================================== */

html:not(.dark) body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark) {
    --sppk-light-ink: #586475 !important;
    --sppk-light-copy: #626c7b !important;
    --sppk-light-green: #39785f !important;
    --sppk-light-blue: #426b91 !important;
    --sppk-light-amber: #886930 !important;
    --sppk-light-red: #a14f60 !important;
}

html:not(.dark) body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark)
:is(#sppkPageContent, #dashboardHistoryPopover, #dashboardInfoModal, #exportPdfModal, #welcomeModal, #activityCenter, #smartAnalyticModal, #warningMonitoringModal, #liveActivityModal, #dashboardDocumentModal, #dashboardWeatherLocationModal) {
    --sppk-theme-heading: #526071 !important;
    --sppk-theme-text: #586475 !important;
    --sppk-theme-copy: #626c7b !important;
    --sppk-theme-muted: #687181 !important;
    --sppk-theme-link: #39785f !important;
    --sppk-theme-brand: #39785f !important;
    color: var(--sppk-theme-text) !important;
}

html:not(.dark) body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark)
:is(#sppkPageContent, #dashboardHistoryPopover, #dashboardInfoModal, #exportPdfModal, #welcomeModal, #activityCenter, #smartAnalyticModal, #warningMonitoringModal, #liveActivityModal, #dashboardDocumentModal, #dashboardWeatherLocationModal) :is(h1, h2, h3, h4, h5, h6, .section-title, .card-title):not(.text-danger):not(.text-warning):not(.text-success):not(.text-primary):not(.text-info) {
    color: var(--sppk-theme-heading) !important;
    -webkit-text-fill-color: currentColor !important;
    font-weight: 600 !important;
}

html:not(.dark) body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark)
:is(#sppkPageContent, #dashboardHistoryPopover, #dashboardInfoModal, #exportPdfModal, #welcomeModal, #activityCenter, #smartAnalyticModal, #warningMonitoringModal, #liveActivityModal, #dashboardDocumentModal, #dashboardWeatherLocationModal) :is(.kpi-card, .dashboard-card) h2.counter {
    color: var(--sppk-theme-heading) !important;
    -webkit-text-fill-color: currentColor !important;
    font-weight: 600 !important;
}

html:not(.dark) body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark)
:is(#sppkPageContent, #dashboardHistoryPopover, #dashboardInfoModal, #exportPdfModal, #welcomeModal, #activityCenter, #smartAnalyticModal, #warningMonitoringModal, #liveActivityModal, #dashboardDocumentModal, #dashboardWeatherLocationModal) :is(p, td, .form-text, .dashboard-extension-footnote, .dashboard-location-guidance) {
    font-weight: 400 !important;
}

html:not(.dark) body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark)
:is(#sppkPageContent, #dashboardHistoryPopover, #dashboardInfoModal, #exportPdfModal, #welcomeModal, #activityCenter, #smartAnalyticModal, #warningMonitoringModal, #liveActivityModal, #dashboardDocumentModal, #dashboardWeatherLocationModal) :is(strong, b, th) {
    font-weight: 600 !important;
}

html:not(.dark) body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark)
:is(#sppkPageContent, #dashboardHistoryPopover, #dashboardInfoModal, #exportPdfModal, #welcomeModal, #activityCenter, #smartAnalyticModal, #warningMonitoringModal, #liveActivityModal, #dashboardDocumentModal, #dashboardWeatherLocationModal) :is(.kpi-card > small, .dashboard-card > small, .dashboard-smart-progress-status, .dashboard-running-label, .dashboard-active-target-kicker, .dashboard-command-eyebrow, .dashboard-extension-eyebrow, .dashboard-extension-kicker, .dashboard-management-eyebrow, .dashboard-management-source, .dashboard-activity-module, .dashboard-activity-category, .dashboard-activity-status, .dashboard-risk-badge, label, .form-label) {
    font-weight: 500 !important;
}

html:not(.dark) body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark)
:is(#sppkPageContent, #dashboardHistoryPopover, #dashboardInfoModal, #exportPdfModal, #welcomeModal, #activityCenter, #smartAnalyticModal, #warningMonitoringModal, #liveActivityModal, #dashboardDocumentModal, #dashboardWeatherLocationModal) :is(.dashboard-active-target-toggle, .dashboard-history-button, .dashboard-history-close, .dashboard-flow-filter, .dashboard-activity-filter-button, .dashboard-context-tab, .dashboard-context-action, .dashboard-secondary-button, .dashboard-primary-button, .dashboard-icon-button, .dashboard-extension-link, .dashboard-document-actions a, .dashboard-document-delete, .monitoring-launcher-button, .quick-menu-modern, .monitor-modal-action, .btn:not(.btn-close)) {
    font-weight: 500 !important;
}

html:not(.dark) body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark)
:is(#sppkPageContent, #dashboardHistoryPopover, #dashboardInfoModal, #exportPdfModal, #welcomeModal, #activityCenter, #smartAnalyticModal, #warningMonitoringModal, #liveActivityModal, #dashboardDocumentModal, #dashboardWeatherLocationModal) :is(.dashboard-active-target-toggle, .dashboard-history-button, .dashboard-history-close, .dashboard-flow-filter, .dashboard-activity-filter-button, .dashboard-context-tab, .dashboard-context-action, .dashboard-secondary-button, .dashboard-primary-button, .dashboard-icon-button, .dashboard-extension-link, .dashboard-document-actions a, .dashboard-document-delete, .monitoring-launcher-button, .quick-menu-modern, .monitor-modal-action, .btn:not(.btn-close)) :is(span, strong, b, small) {
    font-weight: inherit !important;
}

html:not(.dark) body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark)
:is(#sppkPageContent, #dashboardHistoryPopover, #dashboardInfoModal, #exportPdfModal, #welcomeModal, #activityCenter, #smartAnalyticModal, #warningMonitoringModal, #liveActivityModal, #dashboardDocumentModal, #dashboardWeatherLocationModal) :is(.dashboard-primary-button, .dashboard-context-action.is-primary, .btn-success, .btn-primary, .export-confirm-submit, .welcome-start-button),
html:not(.dark) body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark)
:is(#sppkPageContent, #dashboardHistoryPopover, #dashboardInfoModal, #exportPdfModal, #welcomeModal, #activityCenter, #smartAnalyticModal, #warningMonitoringModal, #liveActivityModal, #dashboardDocumentModal, #dashboardWeatherLocationModal) :is(.dashboard-flow-filter, .dashboard-activity-filter-button, .dashboard-context-tab):is(.is-active, [aria-pressed="true"]),
html:not(.dark) body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark)
:is(#sppkPageContent, #dashboardHistoryPopover, #dashboardInfoModal, #exportPdfModal, #welcomeModal, #activityCenter, #smartAnalyticModal, #warningMonitoringModal, #liveActivityModal, #dashboardDocumentModal, #dashboardWeatherLocationModal) :is(.dashboard-active-target-toggle, .dashboard-history-button)[aria-expanded="true"] {
    font-weight: 600 !important;
}

html:not(.dark) body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark)
:is(#sppkPageContent, #dashboardHistoryPopover, #dashboardInfoModal, #exportPdfModal, #welcomeModal, #activityCenter, #smartAnalyticModal, #warningMonitoringModal, #liveActivityModal, #dashboardDocumentModal, #dashboardWeatherLocationModal) :is(.dashboard-active-target-toggle, .dashboard-history-button, .dashboard-history-close, .dashboard-flow-filter, .dashboard-activity-filter-button, .dashboard-context-tab, .dashboard-context-action, .dashboard-secondary-button, .dashboard-primary-button, .dashboard-icon-button, .dashboard-extension-link, .dashboard-document-actions a, .dashboard-document-delete, .monitoring-launcher-button, .quick-menu-modern, .monitor-modal-action, .btn:not(.btn-close)):hover:not(:disabled):not([aria-disabled="true"]) {
    --sppk-light-control-bg: #eff2f5 !important;
    --sppk-light-control-fg: var(--sppk-light-ink) !important;
    --sppk-light-control-border: #7c8b9e !important;
}

html:not(.dark) body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark)
:is(#sppkPageContent, #dashboardHistoryPopover, #dashboardInfoModal, #exportPdfModal, #welcomeModal, #activityCenter, #smartAnalyticModal, #warningMonitoringModal, #liveActivityModal, #dashboardDocumentModal, #dashboardWeatherLocationModal) :is(.dashboard-primary-button, .dashboard-context-action.is-primary, .btn-success, .btn-primary, .export-confirm-submit, .welcome-start-button):hover:not(:disabled):not([aria-disabled="true"]),
html:not(.dark) body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark)
:is(#sppkPageContent, #dashboardHistoryPopover, #dashboardInfoModal, #exportPdfModal, #welcomeModal, #activityCenter, #smartAnalyticModal, #warningMonitoringModal, #liveActivityModal, #dashboardDocumentModal, #dashboardWeatherLocationModal) :is(.dashboard-flow-filter, .dashboard-activity-filter-button, .dashboard-context-tab):is(.is-active, [aria-pressed="true"]):hover:not(:disabled):not([aria-disabled="true"]),
html:not(.dark) body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark)
:is(#sppkPageContent, #dashboardHistoryPopover, #dashboardInfoModal, #exportPdfModal, #welcomeModal, #activityCenter, #smartAnalyticModal, #warningMonitoringModal, #liveActivityModal, #dashboardDocumentModal, #dashboardWeatherLocationModal) :is(.dashboard-active-target-toggle, .dashboard-history-button)[aria-expanded="true"]:hover:not(:disabled):not([aria-disabled="true"]) {
    --sppk-light-control-bg: #326f57 !important;
    --sppk-light-control-fg: #ffffff !important;
    --sppk-light-control-border: #326f57 !important;
}

html:not(.dark) body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark)
:is(#sppkPageContent, #dashboardHistoryPopover, #dashboardInfoModal, #exportPdfModal, #welcomeModal, #activityCenter, #smartAnalyticModal, #warningMonitoringModal, #liveActivityModal, #dashboardDocumentModal, #dashboardWeatherLocationModal) .btn-dark {
    --sppk-light-control-bg: #586475 !important;
    --sppk-light-control-fg: #ffffff !important;
    --sppk-light-control-border: #586475 !important;
}

html:not(.dark) body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark)
:is(#sppkPageContent, #dashboardHistoryPopover, #dashboardInfoModal, #exportPdfModal, #welcomeModal, #activityCenter, #smartAnalyticModal, #warningMonitoringModal, #liveActivityModal, #dashboardDocumentModal, #dashboardWeatherLocationModal) .btn-dark:hover:not(:disabled) {
    --sppk-light-control-bg: #526071 !important;
    --sppk-light-control-fg: #ffffff !important;
    --sppk-light-control-border: #526071 !important;
}

html:not(.dark) body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark)
:is(#sppkPageContent, #dashboardHistoryPopover, #dashboardInfoModal, #exportPdfModal, #welcomeModal, #activityCenter, #smartAnalyticModal, #warningMonitoringModal, #liveActivityModal, #dashboardDocumentModal, #dashboardWeatherLocationModal) :is(.dashboard-document-delete, .btn-danger, .btn-outline-danger):hover:not(:disabled) {
    --sppk-light-control-bg: #fff1f3 !important;
    --sppk-light-control-fg: #a14f60 !important;
    --sppk-light-control-border: #a14f60 !important;
}

html:not(.dark) body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark)
:is(#sppkPageContent, #dashboardHistoryPopover, #dashboardInfoModal, #exportPdfModal, #welcomeModal, #activityCenter, #smartAnalyticModal, #warningMonitoringModal, #liveActivityModal, #dashboardDocumentModal, #dashboardWeatherLocationModal) :is(.btn-warning, .btn-outline-warning):hover:not(:disabled) {
    --sppk-light-control-bg: #fff4d6 !important;
    --sppk-light-control-fg: #886930 !important;
    --sppk-light-control-border: #886930 !important;
}

html:not(.dark) body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark)
:is(#sppkPageContent, #dashboardHistoryPopover, #dashboardInfoModal, #exportPdfModal, #welcomeModal, #activityCenter, #smartAnalyticModal, #warningMonitoringModal, #liveActivityModal, #dashboardDocumentModal, #dashboardWeatherLocationModal) .dashboard-activity-filter-button b {
    font-weight: 600 !important;
}

html:not(.dark) body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark)
:is(#sppkPageContent, #dashboardHistoryPopover, #dashboardInfoModal, #exportPdfModal, #welcomeModal, #activityCenter, #smartAnalyticModal, #warningMonitoringModal, #liveActivityModal, #dashboardDocumentModal, #dashboardWeatherLocationModal) .monitoring-launcher-button strong {
    font-weight: 600 !important;
}

html:not(.dark) body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark)
:is(#sppkPageContent, #dashboardHistoryPopover, #dashboardInfoModal, #exportPdfModal, #welcomeModal, #activityCenter, #smartAnalyticModal, #warningMonitoringModal, #liveActivityModal, #dashboardDocumentModal, #dashboardWeatherLocationModal) .monitoring-launcher-button small {
    font-weight: 400 !important;
}

html:not(.dark) body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark)
:is(#sppkPageContent, #dashboardHistoryPopover, #dashboardInfoModal, #exportPdfModal, #welcomeModal, #activityCenter, #smartAnalyticModal, #warningMonitoringModal, #liveActivityModal, #dashboardDocumentModal, #dashboardWeatherLocationModal) :is(.monitoring-launcher-count, .dashboard-smart-progress-reading) {
    font-weight: 500 !important;
}

/* ======================================================================
   DASHBOARD V38 — TWO LEGACY HERO SURFACES
   Only Dashboard Extensions and Cakupan & Kendali Informasi are targeted.
   Theme tokens supply a light neutral surface by day and gray by night.
   Existing V37 text weights and component geometry remain in place.
   ====================================================================== */

html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent
:is(#dashboardManagementLayer > .dashboard-management-header, #dashboardExtensions > .dashboard-extension-heading) {
    background: var(--sppk-theme-surface-soft) !important;
    background-image: none !important;
    border-color: var(--sppk-theme-line) !important;
    color: var(--sppk-theme-text) !important;
    box-shadow: none !important;
}

html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent
:is(#dashboardManagementLayer > .dashboard-management-header, #dashboardExtensions > .dashboard-extension-heading)::before,
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent
:is(#dashboardManagementLayer > .dashboard-management-header, #dashboardExtensions > .dashboard-extension-heading)::after {
    display: none !important;
}

html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent
:is(#dashboardManagementLayer > .dashboard-management-header, #dashboardExtensions > .dashboard-extension-heading) h2,
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent
:is(#dashboardManagementLayer > .dashboard-management-header, #dashboardExtensions > .dashboard-extension-heading) h2 * {
    color: var(--sppk-theme-heading) !important;
    -webkit-text-fill-color: currentColor !important;
    text-shadow: none !important;
}

html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent
:is(#dashboardManagementLayer > .dashboard-management-header, #dashboardExtensions > .dashboard-extension-heading) p {
    color: var(--sppk-theme-copy) !important;
    -webkit-text-fill-color: currentColor !important;
    text-shadow: none !important;
}

html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent
:is(#dashboardManagementLayer > .dashboard-management-header, #dashboardExtensions > .dashboard-extension-heading)
:is(.dashboard-management-eyebrow, .dashboard-extension-eyebrow) {
    color: var(--sppk-theme-muted) !important;
    -webkit-text-fill-color: currentColor !important;
    text-shadow: none !important;
}

html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent
:is(#dashboardManagementLayer > .dashboard-management-header, #dashboardExtensions > .dashboard-extension-heading)
:is(.dashboard-management-source, .dashboard-extension-safe) {
    background: var(--sppk-theme-surface-raised) !important;
    background-image: none !important;
    border-color: var(--sppk-theme-line) !important;
    color: var(--sppk-theme-link) !important;
    -webkit-text-fill-color: currentColor !important;
    text-shadow: none !important;
    box-shadow: none !important;
}

html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent
:is(#dashboardManagementLayer > .dashboard-management-header, #dashboardExtensions > .dashboard-extension-heading)
:is(.dashboard-management-eyebrow, .dashboard-extension-eyebrow, .dashboard-management-source, .dashboard-extension-safe) :is(i, span) {
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
    text-shadow: none !important;
}

/* TOPBAR V39 — RIBBON DISPLAY OPTIONS ON THE INTERNAL SHELL. */
html body#sppkAppShell.sppk-app-shell #sppkTopbarDisplayControl,
html body#sppkAppShell.sppk-app-shell #sppkTopbarDisplayControl * {
    box-sizing: border-box !important;
}

html body#sppkAppShell.sppk-app-shell #sppkTopbar {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    z-index: 1010 !important;
    padding-right: 64px !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
}

html body#sppkAppShell.sppk-app-shell #sppkTopbarDisplayControl {
    position: fixed !important;
    top: 8px !important;
    right: 12px !important;
    z-index: 1020 !important;
    color: var(--sppk-theme-text) !important;
}

html body#sppkAppShell.sppk-app-shell #sppkTopbarDisplayControl [hidden],
html body#sppkAppShell.sppk-app-shell #sppkTopbarDisplayControl[hidden] {
    display: none !important;
}

html body#sppkAppShell.sppk-app-shell #sppkTopbarDisplayControl button {
    font-family: inherit !important;
    text-shadow: none !important;
    cursor: pointer;
}

html body#sppkAppShell.sppk-app-shell #sppkTopbarDisplayTrigger {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    width: 38px !important;
    height: 28px !important;
    padding: 4px !important;
    border: 1px solid var(--sppk-theme-line) !important;
    border-radius: 7px !important;
    background: var(--sppk-theme-surface) !important;
    color: var(--sppk-theme-copy) !important;
    -webkit-text-fill-color: currentColor !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .06) !important;
}

html body#sppkAppShell.sppk-app-shell #sppkTopbarDisplayControl svg {
    width: 19px !important;
    height: 19px !important;
    flex: 0 0 auto !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.6 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

html body#sppkAppShell.sppk-app-shell #sppkTopbarDisplayControl .sppk-topbar-display-chevron {
    width: 9px !important;
    height: 9px !important;
}

html body#sppkAppShell.sppk-app-shell #sppkTopbarDisplayMenu {
    position: absolute !important;
    top: calc(100% + 7px) !important;
    right: 0 !important;
    width: min(300px, calc(100vw - 24px)) !important;
    max-height: calc(100vh - 60px) !important;
    max-height: calc(100dvh - 60px) !important;
    overflow-y: auto !important;
    padding: 6px !important;
    border: 1px solid var(--sppk-theme-line) !important;
    border-radius: 11px !important;
    background: var(--sppk-theme-surface) !important;
    color: var(--sppk-theme-text) !important;
    box-shadow: var(--sppk-theme-shadow) !important;
}

html body#sppkAppShell.sppk-app-shell #sppkTopbarDisplayControl .sppk-topbar-display-heading {
    padding: 7px 9px 10px !important;
    color: var(--sppk-theme-muted) !important;
    -webkit-text-fill-color: currentColor !important;
    font-size: 11px !important;
    font-weight: 500 !important;
}

html body#sppkAppShell.sppk-app-shell #sppkTopbarDisplayControl .sppk-topbar-display-option {
    display: grid !important;
    grid-template-columns: 22px minmax(0, 1fr) 16px !important;
    align-items: start !important;
    gap: 9px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 10px 9px !important;
    border: 0 !important;
    border-radius: 7px !important;
    background: transparent !important;
    color: var(--sppk-theme-copy) !important;
    -webkit-text-fill-color: currentColor !important;
    text-align: left !important;
}

html body#sppkAppShell.sppk-app-shell #sppkTopbarDisplayControl .sppk-topbar-display-option strong {
    display: block !important;
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
    font-size: 12px !important;
    font-weight: 550 !important;
    line-height: 1.4 !important;
}

html body#sppkAppShell.sppk-app-shell #sppkTopbarDisplayControl .sppk-topbar-display-option small {
    display: block !important;
    margin-top: 3px !important;
    color: var(--sppk-theme-muted) !important;
    -webkit-text-fill-color: currentColor !important;
    font-size: 10.5px !important;
    font-weight: 400 !important;
    line-height: 1.45 !important;
    white-space: normal !important;
}

html body#sppkAppShell.sppk-app-shell #sppkTopbarDisplayControl
:is(.sppk-topbar-display-option:hover, .sppk-topbar-display-option[aria-checked="true"], #sppkTopbarDisplayTrigger:hover, #sppkTopbarDisplayTrigger[aria-expanded="true"]) {
    background: var(--sppk-theme-surface-soft) !important;
    color: var(--sppk-theme-link) !important;
}

html body#sppkAppShell.sppk-app-shell #sppkTopbarDisplayControl .sppk-topbar-display-check {
    width: 16px !important;
    height: 16px !important;
    visibility: hidden !important;
}

html body#sppkAppShell.sppk-app-shell #sppkTopbarDisplayControl [aria-checked="true"] .sppk-topbar-display-check {
    visibility: visible !important;
}

html body#sppkAppShell.sppk-app-shell #sppkTopbarDisplayControl button:focus-visible {
    outline: 2px solid var(--sppk-theme-link) !important;
    outline-offset: 2px !important;
}

html body#sppkAppShell.sppk-app-shell #sppkTopbarRevealEdge {
    display: none !important;
    position: fixed !important;
    top: 0 !important;
    right: 56px !important;
    left: var(--sppk-sidebar-current-width, var(--sppk-shell-sidebar, 268px)) !important;
    z-index: 1011 !important;
    height: 7px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    cursor: pointer;
}

html:not(.sppk-settings-embedded):not(.sppk-input-embedded)[data-sppk-topbar-mode="pinned"]
body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent {
    margin-top: var(--sppk-topbar-measured-height, var(--sppk-shell-header, 104px)) !important;
}

html:not(.sppk-settings-embedded):not(.sppk-input-embedded):is([data-sppk-topbar-mode="auto"], [data-sppk-topbar-mode="off"])
body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent {
    margin-top: 36px !important;
    min-height: calc(100vh - 36px) !important;
    min-height: calc(100dvh - 36px) !important;
}

html[data-sppk-topbar-mode="off"] body#sppkAppShell.sppk-app-shell #sppkTopbar,
html[data-sppk-topbar-mode="auto"]:not([data-sppk-topbar-open="true"]) body#sppkAppShell.sppk-app-shell #sppkTopbar {
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(calc(-100% - 1px)) !important;
}

html[data-sppk-topbar-mode="auto"] body#sppkAppShell.sppk-app-shell #sppkTopbarRevealEdge {
    display: block !important;
}

html body#sppkAppShell.sppk-app-shell #sppkTopbarRevealEdge:focus-visible {
    background: var(--sppk-theme-brand-soft) !important;
    outline: 2px solid var(--sppk-theme-link) !important;
    outline-offset: -2px !important;
}

html:is(.sppk-settings-embedded, .sppk-input-embedded) body#sppkAppShell.sppk-app-shell
:is(#sppkTopbarDisplayControl, #sppkTopbarRevealEdge) {
    display: none !important;
}

@media (max-width: 991.98px) {
    html body#sppkAppShell.sppk-app-shell #sppkTopbarRevealEdge { left: 0 !important; }
}

@media (max-width: 575.98px) {
    html body#sppkAppShell.sppk-app-shell #sppkTopbar { padding-right: 58px !important; }
    html body#sppkAppShell.sppk-app-shell #sppkTopbarDisplayControl { right: 8px !important; }
}

/* TOPBAR V40 — SMOOTH AUTO-HIDE REVEAL WITHOUT MOVING PAGE CONTENT. */
html[data-sppk-topbar-mode="auto"] body#sppkAppShell.sppk-app-shell #sppkTopbar {
    transition: transform 300ms cubic-bezier(.4, 0, .2, 1), visibility 0s linear 300ms !important;
}

html[data-sppk-topbar-mode="auto"][data-sppk-topbar-open="true"] body#sppkAppShell.sppk-app-shell #sppkTopbar {
    transform: translateY(0) !important;
    visibility: visible !important;
    transition: transform 300ms cubic-bezier(.22, 1, .36, 1), visibility 0s linear 0s !important;
}

@media (prefers-reduced-motion: reduce) {
    html[data-sppk-topbar-mode="auto"] body#sppkAppShell.sppk-app-shell #sppkTopbar,
    html[data-sppk-topbar-mode="auto"][data-sppk-topbar-open="true"] body#sppkAppShell.sppk-app-shell #sppkTopbar {
        transition: none !important;
    }
}

/* ======================================================================
   GLOBAL TYPOGRAPHY V41 — NEUTRAL GPT-STYLE READING AND UI SCALE
   Sizes are an SPPK adaptation, not a copy of proprietary ChatGPT assets.
   Keep semantic colors, icon fonts, charts, map labels and code intact.
   The saved website-font preference can still override the system default.
   ====================================================================== */

:root {
    --sppk-system-font: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    --global-font: var(--sppk-system-font);
}

/* Important declarations inside this named layer outrank legacy unlayered
   important declarations. Future type changes should extend this same
   layer, rather than adding increasingly specific module overrides.
   Font preference defaults above remain unlayered and non-important so
   a saved inline --global-font selection continues to take precedence. */
@layer sppk-typography {
:root {
    --sppk-font-meta: .75rem !important;
    --sppk-font-ui: .875rem !important;
    --sppk-font-body: 1rem !important;
    --sppk-font-h4: 1rem !important;
    --sppk-font-h3: 1.125rem !important;
    --sppk-font-h2: 1.25rem !important;
    --sppk-font-h1: 1.5rem !important;
    --sppk-line-ui: 1.45 !important;
    --sppk-line-body: 1.6 !important;
}

html[data-sppk-typography="gpt"] body#sppkAppShell.sppk-app-shell:not(.dark) {
    --sppk-type-heading: #333333;
    --sppk-type-text: #414141;
    --sppk-type-copy: #505050;
    --sppk-type-muted: #686868;
    --sppk-type-subtle: #6e6e6e;
    --sppk-type-placeholder: #6e6e6e;
    --sppk-light-ink: var(--sppk-type-text) !important;
    --sppk-light-copy: var(--sppk-type-copy) !important;
}

html[data-sppk-typography="gpt"] body#sppkAppShell.sppk-app-shell.dark {
    --sppk-type-heading: #f0f0f0;
    --sppk-type-text: #e6e6e6;
    --sppk-type-copy: #d0d0d0;
    --sppk-type-muted: #afafaf;
    --sppk-type-subtle: #a1a1a1;
    --sppk-type-placeholder: #999999;
}

/* Replace local typography tokens as well as shell tokens. In particular,
   the light dashboard used to redeclare a different navy/gray palette. */
html[data-sppk-typography="gpt"] body#sppkAppShell.sppk-app-shell,
html[data-sppk-typography="gpt"] body#sppkAppShell.sppk-app-shell :is(
    #sppkPageContent, #dashboardHistoryPopover, #dashboardInfoModal,
    #exportPdfModal, #welcomeModal, #activityCenter, #smartAnalyticModal,
    #warningMonitoringModal, #liveActivityModal, #dashboardDocumentModal,
    #dashboardWeatherLocationModal, #informationFolderModal,
    #sppkSettingsDialog, #sppkProfileMenu, #sidebarAccountModal,
    #sppkTopbarDisplayControl, #csPanel, #ai-panel
) {
    --sppk-theme-heading: var(--sppk-type-heading) !important;
    --sppk-theme-text: var(--sppk-type-text) !important;
    --sppk-theme-copy: var(--sppk-type-copy) !important;
    --sppk-theme-muted: var(--sppk-type-muted) !important;
    --sppk-theme-subtle: var(--sppk-type-subtle) !important;
    --sppk-theme-placeholder: var(--sppk-type-placeholder) !important;
}

/* Exact match to the older light-dashboard token scope, after V37. */
html[data-sppk-typography="gpt"]:not(.dark)
body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark) :is(
    #sppkPageContent, #dashboardHistoryPopover, #dashboardInfoModal,
    #exportPdfModal, #welcomeModal, #activityCenter, #smartAnalyticModal,
    #warningMonitoringModal, #liveActivityModal, #dashboardDocumentModal,
    #dashboardWeatherLocationModal
) {
    --sppk-theme-heading: var(--sppk-type-heading) !important;
    --sppk-theme-text: var(--sppk-type-text) !important;
    --sppk-theme-copy: var(--sppk-type-copy) !important;
    --sppk-theme-muted: var(--sppk-type-muted) !important;
}

html[data-sppk-typography="gpt"]:not(.dark)
body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark) {
    --sppk-light-ink: var(--sppk-type-text) !important;
    --sppk-light-copy: var(--sppk-type-copy) !important;
}

html[data-sppk-typography="gpt"] body#sppkAppShell.sppk-app-shell {
    color: var(--sppk-theme-text) !important;
    font-family: var(--global-font, var(--sppk-system-font)) !important;
    font-size: var(--sppk-font-body) !important;
    font-weight: 400 !important;
    line-height: var(--sppk-line-body) !important;
    letter-spacing: normal !important;
}

/* Do not use a universal font-family selector: Bootstrap/Font Awesome and
   embedded map/chart renderers own their own glyphs and dimensions. */
html[data-sppk-typography="gpt"] body#sppkAppShell.sppk-app-shell
:where(div, section, article, aside, nav, header, footer, main, dialog,
       h1, h2, h3, h4, h5, h6, p, span, a, button, input, select, textarea,
       label, legend, fieldset, table, caption, th, td, ul, ol, li, dl, dt, dd,
       details, summary, blockquote, option, optgroup, small, strong, b, em, time):not(:where(.bi, [class^="bi-"], [class*=" bi-"], .fa, .fas, .far, .fab,
            .fal, .fad, [class^="fa-"], [class*=" fa-"], .material-icons,
            .material-symbols-outlined, pre, pre *, code, code *, kbd, samp,
            svg *, .leaflet-container *, .maplibregl-map *, .mapboxgl-map *,
            .apexcharts-canvas *, .highcharts-container *)) {
    font-family: var(--global-font, var(--sppk-system-font)) !important;
}

html[data-sppk-typography="gpt"] body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent {
    font-size: var(--sppk-font-body) !important;
    font-weight: 400 !important;
    line-height: var(--sppk-line-body) !important;
}

/* Inline text follows its surrounding text. This replaces old 8–11px
   spans without flattening the hierarchy inside headings and buttons. */
html[data-sppk-typography="gpt"] body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent :is(span, a, strong, b, em, time):not(:where(.bi, [class^="bi-"], [class*=" bi-"], .fa, .fas, .far, .fab,
            [class^="fa-"], [class*=" fa-"], .material-icons, .material-symbols-outlined,
            .leaflet-container *, .maplibregl-map *, .mapboxgl-map *,
            .apexcharts-canvas *, .highcharts-container *, svg *, pre *, code *)),
html[data-sppk-typography="gpt"] body#sppkAppShell.sppk-app-shell
:is(#sppkSettingsDialog, #sppkProfileMenu, #dashboardHistoryPopover,
    #dashboardInfoModal, #exportPdfModal, #welcomeModal, #activityCenter,
    #smartAnalyticModal, #warningMonitoringModal, #liveActivityModal,
    #dashboardDocumentModal, #dashboardWeatherLocationModal, #informationFolderModal,
    #sidebarAccountModal, #csPanel, #ai-panel) :is(span, a, strong, b, em, time):not(:where(.bi, [class^="bi-"], [class*=" bi-"], .fa, .fas, .far, .fab,
            [class^="fa-"], [class*=" fa-"], .material-icons, .material-symbols-outlined,
            .leaflet-container *, svg *, pre *, code *)) {
    font-size: max(.75rem, 1em) !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    letter-spacing: normal !important;
}

html[data-sppk-typography="gpt"] body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent :is(
    p, li, dt, dd, blockquote, .description, .subtitle, .copy,
    [class*="description"], [class*="subtitle"], [class*="-copy"]
):not(:where(.btn *, button *, .badge *, .leaflet-container *, svg *, pre *, code *)) {
    font-size: var(--sppk-font-body) !important;
    font-weight: 400 !important;
    line-height: var(--sppk-line-body) !important;
    letter-spacing: normal !important;
}

html[data-sppk-typography="gpt"] body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent :is(h1, .page-title, .form-title) {
    font-size: var(--sppk-font-h1) !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    letter-spacing: -.02em !important;
}

html[data-sppk-typography="gpt"] body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent :is(h2, .section-title, .panel-title, .card-title, .modal-title) {
    font-size: var(--sppk-font-h2) !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    letter-spacing: -.015em !important;
}

html[data-sppk-typography="gpt"] body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent h3 {
    font-size: var(--sppk-font-h3) !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    letter-spacing: -.01em !important;
}

html[data-sppk-typography="gpt"] body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent :is(h4, h5, h6, .title) {
    font-size: var(--sppk-font-h4) !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    letter-spacing: normal !important;
}

html[data-sppk-typography="gpt"] body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent :is(strong, b, .fw-bold, .fw-semibold) {
    font-weight: 600 !important;
}

/* Controls, labels and dense operational data share the UI scale. Cards
   with role=button keep their own content hierarchy. */
html[data-sppk-typography="gpt"] body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent
:is(button, .btn, a[role="button"], input, select, textarea,
    .form-control, .form-select, .modern-input, .modern-select,
    label, .form-label, .form-check-label, .modern-label),
html[data-sppk-typography="gpt"] body#sppkAppShell.sppk-app-shell
:is(#sppkPageContent, #sppkSettingsDialog, #sppkProfileMenu,
    .modal, .offcanvas, .popover, #csPanel, #ai-panel)
:is(button, .btn, a[role="button"], input, select, textarea,
    .form-control, .form-select, .modern-input, .modern-select,
    label, .form-label, .form-check-label, .modern-label) {
    font-size: var(--sppk-font-ui) !important;
    font-weight: 500 !important;
    line-height: var(--sppk-line-ui) !important;
    letter-spacing: normal !important;
}

html[data-sppk-typography="gpt"] body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent :is(input, select, textarea, .form-control, .form-select, .modern-input, .modern-select) {
    font-weight: 400 !important;
}

html[data-sppk-typography="gpt"] body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent :is(input, textarea)::placeholder {
    color: var(--sppk-theme-placeholder) !important;
    opacity: 1 !important;
}

html[data-sppk-typography="gpt"] body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent :is(
    small, .small, .form-text, .help-text, .form-help, .caption, .badge, [class$="-badge"],
    [class*="kicker"], [class*="eyebrow"], [class$="-meta"],
    [class*="-meta "], [class$="-label"], [class*="-label "]
):not(:where(label, .form-label, .form-check-label, button *, .btn *,
             .leaflet-container *, svg *, pre *, code *)) {
    font-size: var(--sppk-font-meta) !important;
    font-weight: 500 !important;
    line-height: 1.45 !important;
    letter-spacing: normal !important;
}

html[data-sppk-typography="gpt"] body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent :is(table, .table, .dataTable) :is(th, td),
html[data-sppk-typography="gpt"] body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent :is(table, .table, .dataTable) :is(th, td) :is(p, span, a, strong, b):not(:where(.bi, [class^="bi-"], [class*=" bi-"], .fa, .fas, .far, .fab, [class^="fa-"], [class*=" fa-"])) {
    font-size: var(--sppk-font-ui) !important;
    line-height: 1.45 !important;
    letter-spacing: normal !important;
}

html[data-sppk-typography="gpt"] body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent th { font-weight: 600 !important; }
html[data-sppk-typography="gpt"] body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent td { font-weight: 400 !important; }

/* Main navigation, header and account controls. Icons retain their size. */
html[data-sppk-typography="gpt"] body#sppkAppShell.sppk-app-shell #appSidebar :is(
    .menu-link, .menu-link > span:not(.sidebar-menu-badge),
    .sidebar-profile h5, .sidebar-profile .profile-name
) {
    font-size: var(--sppk-font-ui) !important;
    font-weight: 500 !important;
    line-height: 1.45 !important;
    letter-spacing: normal !important;
}
html[data-sppk-typography="gpt"] body#sppkAppShell.sppk-app-shell #appSidebar :is(
    .sidebar-nav-label, .sidebar-menu-badge, .sidebar-profile p, .sidebar-profile small
) {
    font-size: var(--sppk-font-meta) !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    letter-spacing: normal !important;
}
html[data-sppk-typography="gpt"] body#sppkAppShell.sppk-app-shell #sppkTopbar :is(
    .topbar-page-title, h1, h2, h3, h4
) {
    font-size: var(--sppk-font-h3) !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    letter-spacing: -.01em !important;
}
html[data-sppk-typography="gpt"] body#sppkAppShell.sppk-app-shell #sppkTopbar :is(
    .topbar-page-description, .topbar-eyebrow, .system-status, small, #live-date
) { font-size: var(--sppk-font-meta) !important; font-weight: 400 !important; line-height: 1.45 !important; }
html[data-sppk-typography="gpt"] body#sppkAppShell.sppk-app-shell #sppkTopbar #live-clock {
    font-size: var(--sppk-font-ui) !important;
    font-weight: 500 !important;
}
html[data-sppk-typography="gpt"] body#sppkAppShell.sppk-app-shell #sppkProfileMenu :is(
    .sppk-profile-menu__item, .sppk-profile-menu__item span, .sppk-profile-menu__copy > strong
) { font-size: var(--sppk-font-ui) !important; font-weight: 500 !important; line-height: 1.45 !important; }
html[data-sppk-typography="gpt"] body#sppkAppShell.sppk-app-shell #sppkProfileMenu .sppk-profile-menu__copy > :not(strong),
html[data-sppk-typography="gpt"] body#sppkAppShell.sppk-app-shell #sppkTopbarDisplayControl :is(small, .sppk-topbar-display-heading) {
    font-size: var(--sppk-font-meta) !important;
    font-weight: 400 !important;
    line-height: 1.45 !important;
}
html[data-sppk-typography="gpt"] body#sppkAppShell.sppk-app-shell #sppkTopbarDisplayControl .sppk-topbar-display-option strong {
    font-size: var(--sppk-font-ui) !important;
    font-weight: 500 !important;
    line-height: 1.45 !important;
}

/* Stable information hierarchy for cards, rather than oversized headings. */
html[data-sppk-typography="gpt"] body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent :is(.card, [class$="-card"], [class*="-card "], .panel, [class$="-panel"], [class*="-panel "])
:is(p, .description, .subtitle) {
    font-size: var(--sppk-font-ui) !important;
    line-height: 1.55 !important;
}

html[data-sppk-typography="gpt"] body#sppkAppShell.sppk-app-shell.sppk-route-dashboard
.page-shell.main-content #sppkPageContent :is(.kpi-card, .dashboard-card) h2.counter,
html[data-sppk-typography="gpt"] body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent :is(.kpi-value, .metric-value, .stat-value, .ops-kpi-value) {
    font-size: 1.5rem !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    letter-spacing: -.02em !important;
    font-variant-numeric: tabular-nums;
}

html[data-sppk-typography="gpt"] body#sppkAppShell.sppk-app-shell.sppk-route-dashboard
.page-shell.main-content #sppkPageContent :is(
    .dashboard-command-deck .kpi-card small,
    .dashboard-command-deck .kpi-card > span,
    .dashboard-metrics-section .dashboard-card h6,
    .dashboard-metrics-section .dashboard-card > .card-body > small,
    .dashboard-smart-progress-status, .dashboard-smart-progress-reading
) { font-size: var(--sppk-font-meta) !important; font-weight: 500 !important; line-height: 1.45 !important; }

html[data-sppk-typography="gpt"] body#sppkAppShell.sppk-app-shell.sppk-route-dashboard
.page-shell.main-content #sppkPageContent :is(.kpi-card, .dashboard-card) h2.counter > span {
    font-size: var(--sppk-font-meta) !important;
    font-weight: 400 !important;
    line-height: 1.45 !important;
    letter-spacing: normal !important;
}

html[data-sppk-typography="gpt"] body#sppkAppShell.sppk-app-shell.sppk-route-dashboard
.page-shell.main-content #sppkPageContent :is(
    #dashboardManagementLayer > .dashboard-management-header,
    #dashboardExtensions > .dashboard-extension-heading
) h2 {
    font-size: var(--sppk-font-h2) !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    letter-spacing: -.015em !important;
}

/* Daily input navigation has an extra ID in its original compact rules. */
html[data-sppk-typography="gpt"] body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent #sppkDailyInputWorkspace :is(
    .daily-input-tab, .daily-input-tab-copy strong, .daily-input-active-title
) { font-size: var(--sppk-font-ui) !important; font-weight: 500 !important; line-height: 1.45 !important; }
html[data-sppk-typography="gpt"] body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent #sppkDailyInputWorkspace :is(.daily-input-tab-copy small, .daily-input-navigation h3) {
    font-size: var(--sppk-font-meta) !important;
    font-weight: 500 !important;
    line-height: 1.45 !important;
    letter-spacing: normal !important;
}

/* Native settings dialog, embedded settings pages, and detached popups. */
html[data-sppk-typography="gpt"] body#sppkAppShell.sppk-app-shell > #sppkSettingsDialog {
    font-size: var(--sppk-font-ui) !important;
    line-height: 1.5 !important;
}
html[data-sppk-typography="gpt"] body#sppkAppShell.sppk-app-shell > #sppkSettingsDialog :is(
    .settings-tab, .settings-tab.is-active, .settings-row h3, .settings-shortcut-card strong, .settings-action,
    .settings-appearance-option, .settings-appearance-option strong
) { font-size: var(--sppk-font-ui) !important; font-weight: 500 !important; line-height: 1.45 !important; letter-spacing: normal !important; }
html[data-sppk-typography="gpt"] body#sppkAppShell.sppk-app-shell > #sppkSettingsDialog :is(
    .settings-sidebar-heading > span, .settings-sidebar-footer strong, .settings-sidebar-footer div > span,
    .settings-main-header p, .settings-row p, .settings-shortcut-card span, .settings-account-meta,
    .settings-appearance-option small
) { font-size: var(--sppk-font-meta) !important; font-weight: 400 !important; line-height: 1.5 !important; }
html[data-sppk-typography="gpt"] body#sppkAppShell.sppk-app-shell > #sppkSettingsDialog :is(
    .settings-sidebar-heading h1, .settings-main-header h2
) { font-size: var(--sppk-font-h2) !important; font-weight: 600 !important; line-height: 1.35 !important; letter-spacing: -.015em !important; }

html[data-sppk-typography="gpt"].sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent :is(h2, h3, h4, h5, h6) {
    font-size: var(--sppk-font-h4) !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
}
html[data-sppk-typography="gpt"].sppk-settings-embedded body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent :is(p, dt) {
    font-size: var(--sppk-font-ui) !important;
    font-weight: 400 !important;
    line-height: 1.55 !important;
}

html[data-sppk-typography="gpt"] body#sppkAppShell.sppk-app-shell
:is(.modal, .offcanvas, .popover, #dashboardHistoryPopover, #activityCenter, #csPanel, #ai-panel)
:is(p, li, label, input, select, textarea, button, .btn, .ai-message, .chat-message) {
    font-size: var(--sppk-font-ui) !important;
    line-height: 1.5 !important;
    letter-spacing: normal !important;
}
html[data-sppk-typography="gpt"] body#sppkAppShell.sppk-app-shell
:is(.modal, .offcanvas, .popover, #dashboardHistoryPopover, #activityCenter, #csPanel, #ai-panel)
:is(small, .small, .form-text, .caption, time, [class$="-meta"]) {
    font-size: var(--sppk-font-meta) !important;
    line-height: 1.45 !important;
    letter-spacing: normal !important;
}
html[data-sppk-typography="gpt"] body#sppkAppShell.sppk-app-shell
:is(.modal, .offcanvas, .popover, #dashboardHistoryPopover, #activityCenter, #csPanel, #ai-panel)
:is(h1, h2, h3, .modal-title, .popover-header) {
    font-size: var(--sppk-font-h3) !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    letter-spacing: -.01em !important;
}
} /* @layer sppk-typography */


/* SAME-PAGE UPDATES V42: a compact status; existing content stays visible. */
html body#sppkAppShell.sppk-app-shell #sppkPageUpdateStatus {
    position: fixed;
    right: 20px;
    bottom: 16px;
    z-index: 1085;
    max-width: min(420px, calc(100vw - 32px));
    padding: 10px 14px;
    border: 1px solid var(--sppk-theme-line);
    border-radius: 10px;
    background: var(--sppk-theme-surface-raised);
    color: var(--sppk-theme-copy);
    box-shadow: var(--sppk-theme-shadow-soft);
    font-family: var(--global-font);
    font-size: .875rem;
    line-height: 1.45;
    pointer-events: none;
}
html body#sppkAppShell.sppk-app-shell #sppkPageUpdateStatus[hidden] { display: none !important; }
html body#sppkAppShell.sppk-app-shell #sppkPageContent[aria-busy="true"] { overflow-anchor: none; }

/* ----------------------------------------------------------------------
   V43 — INPUT HARIAN: HEADER SESUAI JENIS INPUT
   Same component palette for the sidebar, selected form heading, full-page
   hero and existing inner headings. Only header colors change. The iframe
   host already owns .is-active; CSS follows it without another listener,
   request, DOM replacement or navigation. Card bodies retain theme tokens.
   The named layer overrides legacy Bootstrap/global important colors while
   leaving the V41 typography scale and V42 update behavior intact.
   ---------------------------------------------------------------------- */
@layer sppk-input-headers {

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent :is(#sppkDailyInputWorkspace, #sppkDailyInputWorkspace .daily-input-tab, .sppk-input-workspace) {
    --sppk-input-header-bg: var(--sppk-theme-surface-soft) !important;
    --sppk-input-header-ink: var(--sppk-theme-heading) !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent :is(
    #sppkDailyInputWorkspace:has(.daily-input-tab.is-active[data-input-route="form"]),
    #sppkDailyInputWorkspace .daily-input-tab[data-input-route="form"],
    .sppk-input-workspace.sppk-input-produksi
) {
    --sppk-input-header-bg: #edf5f0 !important;
    --sppk-input-header-ink: #24644b !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent :is(
    #sppkDailyInputWorkspace:has(.daily-input-tab.is-active[data-input-route="tuk"]),
    #sppkDailyInputWorkspace .daily-input-tab[data-input-route="tuk"],
    .sppk-input-workspace.sppk-input-tuk
) {
    --sppk-input-header-bg: #edf2f9 !important;
    --sppk-input-header-ink: #335f9e !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent :is(
    #sppkDailyInputWorkspace:has(.daily-input-tab.is-active[data-input-route="input_bbm"]),
    #sppkDailyInputWorkspace .daily-input-tab[data-input-route="input_bbm"],
    .sppk-input-workspace.sppk-input-bbm
) {
    --sppk-input-header-bg: #faeef1 !important;
    --sppk-input-header-ink: #9b4050 !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent :is(
    #sppkDailyInputWorkspace:has(.daily-input-tab.is-active[data-input-route="input_jalan"]),
    #sppkDailyInputWorkspace .daily-input-tab[data-input-route="input_jalan"],
    .sppk-input-workspace.sppk-input-jalan
) {
    --sppk-input-header-bg: #faf3e7 !important;
    --sppk-input-header-ink: #815b20 !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent :is(
    #sppkDailyInputWorkspace:has(.daily-input-tab.is-active[data-input-route="input_houling"]),
    #sppkDailyInputWorkspace .daily-input-tab[data-input-route="input_houling"],
    .sppk-input-workspace.sppk-input-houling
) {
    --sppk-input-header-bg: #edf4f6 !important;
    --sppk-input-header-ink: #296477 !important;
}

html body#sppkAppShell.sppk-app-shell.dark .page-shell.main-content #sppkPageContent :is(
    #sppkDailyInputWorkspace:has(.daily-input-tab.is-active[data-input-route="form"]),
    #sppkDailyInputWorkspace .daily-input-tab[data-input-route="form"],
    .sppk-input-workspace.sppk-input-produksi
) {
    --sppk-input-header-bg: #242e29 !important;
    --sppk-input-header-ink: #90cdb0 !important;
}

html body#sppkAppShell.sppk-app-shell.dark .page-shell.main-content #sppkPageContent :is(
    #sppkDailyInputWorkspace:has(.daily-input-tab.is-active[data-input-route="tuk"]),
    #sppkDailyInputWorkspace .daily-input-tab[data-input-route="tuk"],
    .sppk-input-workspace.sppk-input-tuk
) {
    --sppk-input-header-bg: #252c36 !important;
    --sppk-input-header-ink: #9ebfe7 !important;
}

html body#sppkAppShell.sppk-app-shell.dark .page-shell.main-content #sppkPageContent :is(
    #sppkDailyInputWorkspace:has(.daily-input-tab.is-active[data-input-route="input_bbm"]),
    #sppkDailyInputWorkspace .daily-input-tab[data-input-route="input_bbm"],
    .sppk-input-workspace.sppk-input-bbm
) {
    --sppk-input-header-bg: #33282c !important;
    --sppk-input-header-ink: #e3a4b1 !important;
}

html body#sppkAppShell.sppk-app-shell.dark .page-shell.main-content #sppkPageContent :is(
    #sppkDailyInputWorkspace:has(.daily-input-tab.is-active[data-input-route="input_jalan"]),
    #sppkDailyInputWorkspace .daily-input-tab[data-input-route="input_jalan"],
    .sppk-input-workspace.sppk-input-jalan
) {
    --sppk-input-header-bg: #332e25 !important;
    --sppk-input-header-ink: #dec08d !important;
}

html body#sppkAppShell.sppk-app-shell.dark .page-shell.main-content #sppkPageContent :is(
    #sppkDailyInputWorkspace:has(.daily-input-tab.is-active[data-input-route="input_houling"]),
    #sppkDailyInputWorkspace .daily-input-tab[data-input-route="input_houling"],
    .sppk-input-workspace.sppk-input-houling
) {
    --sppk-input-header-bg: #242f33 !important;
    --sppk-input-header-ink: #97c8d5 !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent .sppk-input-produksi #formBulldozer {
    --sppk-input-header-bg: #faf3e7 !important;
    --sppk-input-header-ink: #815b20 !important;
}

html body#sppkAppShell.sppk-app-shell.dark .page-shell.main-content #sppkPageContent .sppk-input-produksi #formBulldozer {
    --sppk-input-header-bg: #332e25 !important;
    --sppk-input-header-ink: #dec08d !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent :is(
    #sppkDailyInputWorkspace .daily-input-form-heading,
    .sppk-input-workspace .sppk-form-hero,
    .sppk-input-workspace .card-header
) {
    background: var(--sppk-input-header-bg) !important;
    background-image: none !important;
    color: var(--sppk-input-header-ink) !important;
    -webkit-text-fill-color: currentColor !important;
    border-color: var(--sppk-theme-line-soft) !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent :is(
    #sppkDailyInputWorkspace .daily-input-form-heading h3,
    #sppkDailyInputWorkspace .daily-input-tab.is-active .daily-input-tab-copy strong,
    #sppkDailyInputWorkspace .daily-input-tab > i:not(.daily-input-lock),
    .sppk-input-workspace .sppk-form-hero .dashboard-title,
    .sppk-input-workspace .sppk-form-hero .dashboard-title i,
    .sppk-input-workspace .sppk-form-hero .dashboard-icon,
    .sppk-input-workspace .sppk-form-hero .dashboard-icon i,
    .sppk-input-workspace .sppk-form-hero .dashboard-logo,
    .sppk-input-workspace .sppk-form-hero .dashboard-logo i,
    .sppk-input-workspace .card-header :is(h5, i, span, strong),
    .sppk-input-workspace .section-title,
    .sppk-input-workspace .section-title i,
    .sppk-input-workspace .unit-title
) {
    color: var(--sppk-input-header-ink) !important;
    -webkit-text-fill-color: currentColor !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent :is(
    #sppkDailyInputWorkspace .daily-input-form-heading p,
    .sppk-input-workspace .sppk-form-hero .dashboard-subtitle
) {
    color: var(--sppk-theme-copy) !important;
    -webkit-text-fill-color: currentColor !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent .sppk-input-workspace .sppk-form-hero :is(.dashboard-icon, .dashboard-logo) {
    background: var(--sppk-input-header-bg) !important;
    background-image: none !important;
    border-color: var(--sppk-theme-line-soft) !important;
    box-shadow: none !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent .sppk-input-workspace .sppk-form-hero::before {
    content: none !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent .sppk-input-workspace .unit-title::before {
    background: var(--sppk-input-header-ink) !important;
    box-shadow: none !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent .sppk-input-workspace .sppk-input-table :is(thead, thead tr, thead th) {
    --bs-table-bg: var(--sppk-input-header-bg) !important;
    --bs-table-color: var(--sppk-input-header-ink) !important;
    --bs-table-accent-bg: transparent !important;
    background: var(--sppk-input-header-bg) !important;
    background-image: none !important;
    color: var(--sppk-input-header-ink) !important;
    -webkit-text-fill-color: currentColor !important;
    box-shadow: none !important;
}

}

/* V44: Rekapitulasi shares the exact Input Harian workspace geometry. */

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent #sppkRecapWorkspace {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent #sppkRecapWorkspace .recap-workspace-heading {
    display: grid !important;
    gap: 4px !important;
    margin: 0 0 18px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent #sppkRecapWorkspace .recap-workspace-heading h2 {
    margin: 0 !important;
    color: var(--sppk-theme-heading) !important;
    -webkit-text-fill-color: currentColor !important;
    font-size: 24px !important;
    font-weight: 650 !important;
    line-height: 1.25 !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent #sppkRecapWorkspace .recap-workspace-heading p {
    margin: 0 !important;
    color: var(--sppk-theme-muted) !important;
    -webkit-text-fill-color: currentColor !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent #sppkRecapWorkspace .recap-workspace-layout {
    display: grid !important;
    grid-template-columns: 216px minmax(0, 1fr) !important;
    min-width: 0 !important;
    height: max(420px, calc(100dvh - 238px)) !important;
    min-height: 420px !important;
    overflow: hidden !important;
    border: 1px solid var(--sppk-theme-line) !important;
    border-radius: 14px !important;
    background: var(--sppk-theme-surface) !important;
    box-shadow: none !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent #sppkRecapWorkspace .recap-workspace-navigation {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 12px !important;
    overflow-y: auto !important;
    border: 0 !important;
    border-right: 1px solid var(--sppk-theme-line) !important;
    background: var(--sppk-theme-surface-soft) !important;
    scrollbar-width: thin !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent #sppkRecapWorkspace .recap-workspace-navigation h3 {
    margin: 6px 8px 12px !important;
    color: var(--sppk-theme-copy) !important;
    -webkit-text-fill-color: currentColor !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent #sppkRecapWorkspace .recap-workspace-tabs {
    display: flex !important;
    gap: 4px !important;
    flex-direction: column !important;
    min-width: 0 !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent #sppkRecapWorkspace .recap-workspace-tab {
    display: flex !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 10px !important;
    color: var(--sppk-theme-copy) !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    align-items: center !important;
    min-width: 0 !important;
    min-height: 64px !important;
    border-radius: 8px !important;
    font-size: 11.5px !important;
    line-height: 1.4 !important;
    text-decoration: none !important;
    box-shadow: none !important;
    transform: none !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent #sppkRecapWorkspace .recap-workspace-tab > i {
    width: 18px !important;
    flex: 0 0 18px !important;
    color: var(--sppk-theme-copy) !important;
    font-size: 17px !important;
    text-align: center !important;
    -webkit-text-fill-color: currentColor !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent #sppkRecapWorkspace .recap-workspace-tab-copy {
    display: grid !important;
    gap: 3px !important;
    min-width: 0 !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent #sppkRecapWorkspace .recap-workspace-tab-copy strong {
    margin: 0 !important;
    color: var(--sppk-theme-heading) !important;
    -webkit-text-fill-color: currentColor !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    overflow-wrap: anywhere !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent #sppkRecapWorkspace .recap-workspace-tab-copy small {
    margin: 0 !important;
    color: var(--sppk-theme-muted) !important;
    -webkit-text-fill-color: currentColor !important;
    font-size: 10px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    overflow-wrap: anywhere !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent #sppkRecapWorkspace .recap-workspace-tab:is(:hover, .is-active) {
    background: var(--sppk-theme-surface-raised) !important;
    border-color: var(--sppk-theme-line) !important;
    box-shadow: none !important;
    transform: none !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent #sppkRecapWorkspace .recap-workspace-tab[aria-disabled="true"] {
    color: var(--sppk-theme-muted) !important;
    opacity: 1 !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent #sppkRecapWorkspace .recap-workspace-tab > .recap-workspace-lock {
    width: 12px !important;
    flex: 0 0 12px !important;
    color: var(--sppk-theme-muted) !important;
    margin-left: auto !important;
    font-size: 11px !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent #sppkRecapWorkspace .recap-workspace-main {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    min-height: 0 !important;
    background: var(--sppk-theme-surface) !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent #sppkRecapWorkspace .recap-workspace-report-heading {
    display: flex !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 16px 20px !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex: 0 0 auto !important;
    border: 0 !important;
    border-bottom: 1px solid var(--sppk-theme-line-soft) !important;
    background: var(--sppk-theme-surface) !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent #sppkRecapWorkspace .recap-workspace-report-heading > div {
    min-width: 0 !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent #sppkRecapWorkspace .recap-workspace-report-heading h3 {
    margin: 0 !important;
    color: var(--sppk-theme-heading) !important;
    -webkit-text-fill-color: currentColor !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent #sppkRecapWorkspace .recap-workspace-report-heading p {
    margin: 4px 0 0 !important;
    color: var(--sppk-theme-muted) !important;
    -webkit-text-fill-color: currentColor !important;
    font-size: 11.5px !important;
    line-height: 1.5 !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent #sppkRecapWorkspace .recap-workspace-open-page {
    display: inline-flex !important;
    gap: 6px !important;
    flex: 0 0 auto !important;
    padding: 6px 8px !important;
    color: var(--sppk-theme-copy) !important;
    align-items: center !important;
    min-height: 30px !important;
    border: 1px solid var(--sppk-theme-line) !important;
    border-radius: 7px !important;
    background: transparent !important;
    font-size: 10.5px !important;
    line-height: 1.4 !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent #sppkRecapWorkspace .recap-workspace-open-page :is(span, i) {
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
    font-size: inherit !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent #sppkRecapWorkspace .recap-workspace-panels {
    display: flex !important;
    flex: 1 1 auto !important;
    position: relative !important;
    flex-direction: column !important;
    min-width: 0 !important;
    min-height: 0 !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent #sppkRecapWorkspace .recap-workspace-panel {
    display: flex !important;
    flex: 1 1 auto !important;
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    flex-direction: column !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--sppk-theme-surface) !important;
    box-shadow: none !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent #sppkRecapWorkspace :is(.recap-workspace-panel, .recap-workspace-loading, .recap-workspace-retry, .recap-workspace-open-page)[hidden] {
    display: none !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent #sppkRecapWorkspace .recap-workspace-frame {
    display: block !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    background: var(--sppk-theme-surface) !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent #sppkRecapWorkspace .recap-workspace-loading {
    position: absolute !important;
    inset: 0 !important;
    display: grid !important;
    gap: 12px !important;
    padding: 20px !important;
    color: var(--sppk-theme-copy) !important;
    background: var(--sppk-theme-surface) !important;
    z-index: 2 !important;
    place-items: center !important;
    align-content: center !important;
    text-align: center !important;
    font-size: 12px !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent #sppkRecapWorkspace .recap-workspace-loading-message {
    color: var(--sppk-theme-copy) !important;
    -webkit-text-fill-color: currentColor !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent #sppkRecapWorkspace .recap-workspace-retry {
    padding: 7px 12px !important;
    border: 1px solid var(--sppk-theme-line) !important;
    color: var(--sppk-theme-heading) !important;
    background: var(--sppk-theme-surface-raised) !important;
    -webkit-text-fill-color: currentColor !important;
    border-radius: 8px !important;
    font-size: 11.5px !important;
    line-height: 1.4 !important;
    box-shadow: none !important;
    cursor: pointer !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent #sppkRecapWorkspace :is(.recap-workspace-tab, .recap-workspace-open-page, .recap-workspace-retry):focus-visible {
    outline: 2px solid var(--sppk-theme-brand) !important;
    outline-offset: -2px !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent #sppkRecapWorkspace .recap-workspace-noscript {
    padding: 20px !important;
    color: var(--sppk-theme-copy) !important;
    font-size: 12px !important;
}

html.sppk-recap-embedded body#sppkAppShell.sppk-app-shell {
    min-width: 0 !important;
    min-height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    background: var(--sppk-theme-surface) !important;
}

html.sppk-recap-embedded body#sppkAppShell.sppk-app-shell :is(#appSidebar, .sidebar-backdrop, .topbar, #csToggle, #csPanel, #ai-toggle, #ai-panel, #sppkProfileMenu) {
    display: none !important;
}

html.sppk-recap-embedded body#sppkAppShell.sppk-app-shell .page-shell.main-content {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    background: var(--sppk-theme-surface) !important;
    transition: none !important;
}

html.sppk-recap-embedded body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 18px !important;
    background: var(--sppk-theme-surface) !important;
}

html.sppk-recap-embedded body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent > .sppk-recap-module {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

@media (max-width: 900px) {

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent #sppkRecapWorkspace .recap-workspace-layout {
    grid-template-columns: 180px minmax(0, 1fr) !important;
}

}
@media (max-width: 639.98px) {

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent #sppkRecapWorkspace .recap-workspace-layout {
    grid-template-columns: 54px minmax(0, 1fr) !important;
    border-radius: 10px !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent #sppkRecapWorkspace .recap-workspace-navigation {
    padding: 6px !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent #sppkRecapWorkspace .recap-workspace-navigation h3 {
    display: none !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent #sppkRecapWorkspace .recap-workspace-tab {
    padding: 10px 6px !important;
    gap: 0 !important;
    justify-content: center !important;
    min-height: 44px !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent #sppkRecapWorkspace .recap-workspace-tab-copy {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent #sppkRecapWorkspace .recap-workspace-tab > .recap-workspace-lock {
    display: none !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent #sppkRecapWorkspace .recap-workspace-report-heading {
    padding: 12px !important;
    gap: 8px !important;
    align-items: flex-start !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent #sppkRecapWorkspace .recap-workspace-report-heading h3 {
    font-size: 12.5px !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent #sppkRecapWorkspace .recap-workspace-report-heading p {
    display: none !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent #sppkRecapWorkspace .recap-workspace-open-page {
    padding: 5px !important;
    min-height: 28px !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent #sppkRecapWorkspace .recap-workspace-open-page span {
    display: none !important;
}

html.sppk-recap-embedded body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent {
    padding: 12px !important;
}

}


/* V44: component colors follow V43 Input Harian; report bodies stay neutral. */
@layer sppk-recap-headers {
html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent :is(
    #sppkRecapWorkspace, #sppkRecapWorkspace .recap-workspace-tab
) {
    --sppk-recap-header-bg: var(--sppk-theme-surface-soft) !important;
    --sppk-recap-header-ink: var(--sppk-theme-heading) !important;
}
html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent :is(
    #sppkRecapWorkspace:has(.recap-workspace-tab.is-active[data-recap-route="rekap"]),
    #sppkRecapWorkspace .recap-workspace-tab[data-recap-route="rekap"]
),
html.sppk-recap-embedded[data-sppk-recap-family="rekap"] body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent {
    --sppk-recap-header-bg: #edf5f0 !important;
    --sppk-recap-header-ink: #24644b !important;
}
html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent :is(
    #sppkRecapWorkspace:has(.recap-workspace-tab.is-active[data-recap-route="rekap-tuk"]),
    #sppkRecapWorkspace .recap-workspace-tab[data-recap-route="rekap-tuk"]
),
html.sppk-recap-embedded[data-sppk-recap-family="rekap-tuk"] body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent {
    --sppk-recap-header-bg: #edf2f9 !important;
    --sppk-recap-header-ink: #335f9e !important;
}
html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent :is(
    #sppkRecapWorkspace:has(.recap-workspace-tab.is-active[data-recap-route="rekap_bbm"]),
    #sppkRecapWorkspace .recap-workspace-tab[data-recap-route="rekap_bbm"]
),
html.sppk-recap-embedded[data-sppk-recap-family="rekap_bbm"] body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent {
    --sppk-recap-header-bg: #faeef1 !important;
    --sppk-recap-header-ink: #9b4050 !important;
}
html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent :is(
    #sppkRecapWorkspace:has(.recap-workspace-tab.is-active[data-recap-route="rekap_jalan"]),
    #sppkRecapWorkspace .recap-workspace-tab[data-recap-route="rekap_jalan"]
),
html.sppk-recap-embedded[data-sppk-recap-family="rekap_jalan"] body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent {
    --sppk-recap-header-bg: #faf3e7 !important;
    --sppk-recap-header-ink: #815b20 !important;
}
html.sppk-recap-embedded body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent #rekapPanelBulldozer {
    --sppk-recap-header-bg: #faf3e7 !important;
    --sppk-recap-header-ink: #815b20 !important;
}
html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent :is(
    #sppkRecapWorkspace:has(.recap-workspace-tab.is-active[data-recap-route="rekap_houling"]),
    #sppkRecapWorkspace .recap-workspace-tab[data-recap-route="rekap_houling"]
),
html.sppk-recap-embedded[data-sppk-recap-family="rekap_houling"] body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent {
    --sppk-recap-header-bg: #edf4f6 !important;
    --sppk-recap-header-ink: #296477 !important;
}
html body#sppkAppShell.sppk-app-shell.dark .page-shell.main-content #sppkPageContent :is(
    #sppkRecapWorkspace:has(.recap-workspace-tab.is-active[data-recap-route="rekap"]),
    #sppkRecapWorkspace .recap-workspace-tab[data-recap-route="rekap"]
),
html.sppk-recap-embedded[data-sppk-recap-family="rekap"] body#sppkAppShell.sppk-app-shell.dark .page-shell.main-content #sppkPageContent {
    --sppk-recap-header-bg: #242e29 !important;
    --sppk-recap-header-ink: #90cdb0 !important;
}
html body#sppkAppShell.sppk-app-shell.dark .page-shell.main-content #sppkPageContent :is(
    #sppkRecapWorkspace:has(.recap-workspace-tab.is-active[data-recap-route="rekap-tuk"]),
    #sppkRecapWorkspace .recap-workspace-tab[data-recap-route="rekap-tuk"]
),
html.sppk-recap-embedded[data-sppk-recap-family="rekap-tuk"] body#sppkAppShell.sppk-app-shell.dark .page-shell.main-content #sppkPageContent {
    --sppk-recap-header-bg: #252c36 !important;
    --sppk-recap-header-ink: #9ebfe7 !important;
}
html body#sppkAppShell.sppk-app-shell.dark .page-shell.main-content #sppkPageContent :is(
    #sppkRecapWorkspace:has(.recap-workspace-tab.is-active[data-recap-route="rekap_bbm"]),
    #sppkRecapWorkspace .recap-workspace-tab[data-recap-route="rekap_bbm"]
),
html.sppk-recap-embedded[data-sppk-recap-family="rekap_bbm"] body#sppkAppShell.sppk-app-shell.dark .page-shell.main-content #sppkPageContent {
    --sppk-recap-header-bg: #33282c !important;
    --sppk-recap-header-ink: #e3a4b1 !important;
}
html body#sppkAppShell.sppk-app-shell.dark .page-shell.main-content #sppkPageContent :is(
    #sppkRecapWorkspace:has(.recap-workspace-tab.is-active[data-recap-route="rekap_jalan"]),
    #sppkRecapWorkspace .recap-workspace-tab[data-recap-route="rekap_jalan"]
),
html.sppk-recap-embedded[data-sppk-recap-family="rekap_jalan"] body#sppkAppShell.sppk-app-shell.dark .page-shell.main-content #sppkPageContent {
    --sppk-recap-header-bg: #332e25 !important;
    --sppk-recap-header-ink: #dec08d !important;
}
html.sppk-recap-embedded body#sppkAppShell.sppk-app-shell.dark .page-shell.main-content #sppkPageContent #rekapPanelBulldozer {
    --sppk-recap-header-bg: #332e25 !important;
    --sppk-recap-header-ink: #dec08d !important;
}
html body#sppkAppShell.sppk-app-shell.dark .page-shell.main-content #sppkPageContent :is(
    #sppkRecapWorkspace:has(.recap-workspace-tab.is-active[data-recap-route="rekap_houling"]),
    #sppkRecapWorkspace .recap-workspace-tab[data-recap-route="rekap_houling"]
),
html.sppk-recap-embedded[data-sppk-recap-family="rekap_houling"] body#sppkAppShell.sppk-app-shell.dark .page-shell.main-content #sppkPageContent {
    --sppk-recap-header-bg: #242f33 !important;
    --sppk-recap-header-ink: #97c8d5 !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent #sppkRecapWorkspace .recap-workspace-report-heading {
    background: var(--sppk-recap-header-bg) !important;
    background-image: none !important;
    border-color: var(--sppk-theme-line-soft) !important;
}
html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent #sppkRecapWorkspace :is(
    .recap-workspace-report-heading h3,
    .recap-workspace-tab.is-active .recap-workspace-tab-copy strong,
    .recap-workspace-tab > i:not(.recap-workspace-lock)
) {
    color: var(--sppk-recap-header-ink) !important;
    -webkit-text-fill-color: currentColor !important;
}
html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent #sppkRecapWorkspace .recap-workspace-report-heading p {
    color: var(--sppk-theme-copy) !important;
    -webkit-text-fill-color: currentColor !important;
}
html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent #sppkRecapWorkspace .recap-workspace-empty {
    margin: 0 !important;
    padding: 20px !important;
    color: var(--sppk-theme-muted) !important;
}
html.sppk-recap-embedded body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent :is(
    .rekap-detail-hero, .rekap-production-hero
) {
    min-height: 0 !important;
    margin: 0 0 16px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    overflow: visible !important;
}
html.sppk-recap-embedded body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent :is(
    .rekap-detail-hero, .rekap-production-hero
)::before {
    content: none !important;
}
html.sppk-recap-embedded body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent :is(
    .rekap-detail-hero-body, .rekap-production-hero-body
) {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 0 !important;
}
/* The selected report title lives in the host header. Keep period dates,
   filter actions and exports visible in the child document. */
html.sppk-recap-embedded body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent .rekap-detail-hero-body > div:first-child:not(.rekap-detail-actions),
html.sppk-recap-embedded body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent .rekap-production-hero-body > div:first-child > :is(h3, .text-muted) {
    display: none !important;
}
html.sppk-recap-embedded body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent :is(
    .rekap-detail-actions, .rekap-period-actions
) {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
}
html.sppk-recap-embedded body#sppkAppShell.sppk-app-shell :is(#sppkTopbarDisplayControl, #sppkProfileMenu) {
    display: none !important;
}
html.sppk-recap-embedded body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent > :is(.container-fluid, .container, .rekap-detail-page, .rekap-produksi-page) {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}
html.sppk-recap-embedded body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent :is(
    .rekap-detail-page, .rekap-produksi-page
) :is(thead, thead tr, thead th, .rekap-operator-head, .rekap-data-card > .card-header) {
    --bs-table-bg: var(--sppk-recap-header-bg) !important;
    --bs-table-color: var(--sppk-recap-header-ink) !important;
    --bs-table-accent-bg: transparent !important;
    background: var(--sppk-recap-header-bg) !important;
    background-image: none !important;
    color: var(--sppk-recap-header-ink) !important;
    -webkit-text-fill-color: currentColor !important;
    box-shadow: none !important;
}
html.sppk-recap-embedded body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent :is(
    .rekap-operator-head, .rekap-data-card > .card-header
) :is(h5, i, span, small) {
    color: var(--sppk-recap-header-ink) !important;
    -webkit-text-fill-color: currentColor !important;
}
}

/* Use the identical typography override layer as Input Harian. */
@layer sppk-typography {
html[data-sppk-typography="gpt"] body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent #sppkRecapWorkspace :is(
    .recap-workspace-tab, .recap-workspace-tab-copy strong, .recap-workspace-active-title
) { font-size: var(--sppk-font-ui) !important; font-weight: 500 !important; line-height: 1.45 !important; }
html[data-sppk-typography="gpt"] body#sppkAppShell.sppk-app-shell
.page-shell.main-content #sppkPageContent #sppkRecapWorkspace :is(.recap-workspace-tab-copy small, .recap-workspace-navigation h3) {
    font-size: var(--sppk-font-meta) !important;
    font-weight: 500 !important;
    line-height: 1.45 !important;
    letter-spacing: normal !important;
}
}

/* V45 — REKAP: READABLE BUTTONS AND ACTIONS AT TOP RIGHT
   Component layer overrides text-fill/background pairs from legacy headers.
   Report queries, filters, exports and the cached workspace remain unchanged. */
@layer sppk-recap-headers {

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent :is(.rekap-produksi-page, .rekap-detail-page),
html.sppk-recap-embedded body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent,
html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent #sppkRecapWorkspace {
    --sppk-recap-action-neutral-bg: #f2f5f7 !important;
    --sppk-recap-action-neutral-ink: #405264 !important;
    --sppk-recap-action-neutral-line: #7d8b98 !important;
    --sppk-recap-action-neutral-hover-bg: #e7edf2 !important;
    --sppk-recap-action-neutral-hover-ink: #2d3c4d !important;
    --sppk-recap-action-neutral-hover-line: #687b8c !important;
    --sppk-recap-action-green-bg: #edf5f0 !important;
    --sppk-recap-action-green-ink: #24644b !important;
    --sppk-recap-action-green-line: #668c78 !important;
    --sppk-recap-action-green-hover-bg: #e0efe5 !important;
    --sppk-recap-action-green-hover-ink: #1c523c !important;
    --sppk-recap-action-green-hover-line: #4f7b64 !important;
    --sppk-recap-action-blue-bg: #edf2f9 !important;
    --sppk-recap-action-blue-ink: #335f9e !important;
    --sppk-recap-action-blue-line: #6c87ab !important;
    --sppk-recap-action-blue-hover-bg: #e1eaf7 !important;
    --sppk-recap-action-blue-hover-ink: #274672 !important;
    --sppk-recap-action-blue-hover-line: #58789f !important;
    --sppk-recap-action-red-bg: #faeef1 !important;
    --sppk-recap-action-red-ink: #9b4050 !important;
    --sppk-recap-action-red-line: #a57580 !important;
    --sppk-recap-action-red-hover-bg: #f5dfe5 !important;
    --sppk-recap-action-red-hover-ink: #853345 !important;
    --sppk-recap-action-red-hover-line: #975c6a !important;
    --sppk-recap-action-amber-bg: #faf3e7 !important;
    --sppk-recap-action-amber-ink: #815b20 !important;
    --sppk-recap-action-amber-line: #a1834e !important;
    --sppk-recap-action-amber-hover-bg: #f3e7cf !important;
    --sppk-recap-action-amber-hover-ink: #6c4b1c !important;
    --sppk-recap-action-amber-hover-line: #987641 !important;
    --sppk-recap-action-selected-bg: #24644b !important;
    --sppk-recap-action-selected-ink: #ffffff !important;
    --sppk-recap-action-selected-line: #24644b !important;
    --sppk-recap-action-selected-hover-bg: #1b503b !important;
    --sppk-recap-action-selected-hover-ink: #ffffff !important;
    --sppk-recap-action-selected-hover-line: #1b503b !important;
    --sppk-recap-button-focus: #335f9e !important;
}

html body#sppkAppShell.sppk-app-shell.dark .page-shell.main-content #sppkPageContent :is(.rekap-produksi-page, .rekap-detail-page),
html.sppk-recap-embedded body#sppkAppShell.sppk-app-shell.dark .page-shell.main-content #sppkPageContent,
html body#sppkAppShell.sppk-app-shell.dark .page-shell.main-content #sppkPageContent #sppkRecapWorkspace {
    --sppk-recap-action-neutral-bg: #2a2d31 !important;
    --sppk-recap-action-neutral-ink: #d6dce4 !important;
    --sppk-recap-action-neutral-line: #76818e !important;
    --sppk-recap-action-neutral-hover-bg: #373d43 !important;
    --sppk-recap-action-neutral-hover-ink: #f0f2f5 !important;
    --sppk-recap-action-neutral-hover-line: #8a98a6 !important;
    --sppk-recap-action-green-bg: #263a31 !important;
    --sppk-recap-action-green-ink: #9ed4b6 !important;
    --sppk-recap-action-green-line: #6d9d85 !important;
    --sppk-recap-action-green-hover-bg: #30493b !important;
    --sppk-recap-action-green-hover-ink: #b5e4ca !important;
    --sppk-recap-action-green-hover-line: #85b79a !important;
    --sppk-recap-action-blue-bg: #283447 !important;
    --sppk-recap-action-blue-ink: #acc7ed !important;
    --sppk-recap-action-blue-line: #7e9bc7 !important;
    --sppk-recap-action-blue-hover-bg: #33435b !important;
    --sppk-recap-action-blue-hover-ink: #c0d8f6 !important;
    --sppk-recap-action-blue-hover-line: #96b3de !important;
    --sppk-recap-action-red-bg: #3a2930 !important;
    --sppk-recap-action-red-ink: #e6afbd !important;
    --sppk-recap-action-red-line: #ae7c8b !important;
    --sppk-recap-action-red-hover-bg: #4b343d !important;
    --sppk-recap-action-red-hover-ink: #f0c3cf !important;
    --sppk-recap-action-red-hover-line: #c996a6 !important;
    --sppk-recap-action-amber-bg: #3a3326 !important;
    --sppk-recap-action-amber-ink: #e6ca95 !important;
    --sppk-recap-action-amber-line: #aa946b !important;
    --sppk-recap-action-amber-hover-bg: #4b4231 !important;
    --sppk-recap-action-amber-hover-ink: #f2d9ad !important;
    --sppk-recap-action-amber-hover-line: #bca47c !important;
    --sppk-recap-action-selected-bg: #83b79d !important;
    --sppk-recap-action-selected-ink: #11251a !important;
    --sppk-recap-action-selected-line: #83b79d !important;
    --sppk-recap-action-selected-hover-bg: #a1ceb5 !important;
    --sppk-recap-action-selected-hover-ink: #11251a !important;
    --sppk-recap-action-selected-hover-line: #a1ceb5 !important;
    --sppk-recap-button-focus: #acc7ed !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent :is(.rekap-produksi-page, .rekap-detail-page) :where(.btn:not(.btn-close), .rekap-unit-tab, .rekap-analytics-rail-link, .recap-workspace-open-page, .recap-workspace-retry),
html.sppk-recap-embedded body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent :where(.btn:not(.btn-close), .rekap-unit-tab, .rekap-analytics-rail-link, .recap-workspace-open-page, .recap-workspace-retry),
html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent #sppkRecapWorkspace :where(.btn:not(.btn-close), .rekap-unit-tab, .rekap-analytics-rail-link, .recap-workspace-open-page, .recap-workspace-retry) {
    --sppk-recap-button-bg: var(--sppk-recap-action-neutral-bg) !important;
    --sppk-recap-button-ink: var(--sppk-recap-action-neutral-ink) !important;
    --sppk-recap-button-line: var(--sppk-recap-action-neutral-line) !important;
    --sppk-recap-button-hover-bg: var(--sppk-recap-action-neutral-hover-bg) !important;
    --sppk-recap-button-hover-ink: var(--sppk-recap-action-neutral-hover-ink) !important;
    --sppk-recap-button-hover-line: var(--sppk-recap-action-neutral-hover-line) !important;
    background: var(--sppk-recap-button-bg) !important;
    background-image: none !important;
    color: var(--sppk-recap-button-ink) !important;
    -webkit-text-fill-color: currentColor !important;
    border: 1px solid var(--sppk-recap-button-line) !important;
    opacity: 1 !important;
    filter: none !important;
    box-shadow: none !important;
    transform: none !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent :is(.rekap-produksi-page, .rekap-detail-page) :is(.btn-success, .btn-outline-success),
html.sppk-recap-embedded body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent :is(.btn-success, .btn-outline-success),
html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent #sppkRecapWorkspace :is(.btn-success, .btn-outline-success) {
    --sppk-recap-button-bg: var(--sppk-recap-action-green-bg) !important;
    --sppk-recap-button-ink: var(--sppk-recap-action-green-ink) !important;
    --sppk-recap-button-line: var(--sppk-recap-action-green-line) !important;
    --sppk-recap-button-hover-bg: var(--sppk-recap-action-green-hover-bg) !important;
    --sppk-recap-button-hover-ink: var(--sppk-recap-action-green-hover-ink) !important;
    --sppk-recap-button-hover-line: var(--sppk-recap-action-green-hover-line) !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent :is(.rekap-produksi-page, .rekap-detail-page) :is(.btn-primary, .btn-outline-primary),
html.sppk-recap-embedded body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent :is(.btn-primary, .btn-outline-primary),
html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent #sppkRecapWorkspace :is(.btn-primary, .btn-outline-primary) {
    --sppk-recap-button-bg: var(--sppk-recap-action-blue-bg) !important;
    --sppk-recap-button-ink: var(--sppk-recap-action-blue-ink) !important;
    --sppk-recap-button-line: var(--sppk-recap-action-blue-line) !important;
    --sppk-recap-button-hover-bg: var(--sppk-recap-action-blue-hover-bg) !important;
    --sppk-recap-button-hover-ink: var(--sppk-recap-action-blue-hover-ink) !important;
    --sppk-recap-button-hover-line: var(--sppk-recap-action-blue-hover-line) !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent :is(.rekap-produksi-page, .rekap-detail-page) :is(.btn-danger, .btn-outline-danger),
html.sppk-recap-embedded body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent :is(.btn-danger, .btn-outline-danger),
html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent #sppkRecapWorkspace :is(.btn-danger, .btn-outline-danger) {
    --sppk-recap-button-bg: var(--sppk-recap-action-red-bg) !important;
    --sppk-recap-button-ink: var(--sppk-recap-action-red-ink) !important;
    --sppk-recap-button-line: var(--sppk-recap-action-red-line) !important;
    --sppk-recap-button-hover-bg: var(--sppk-recap-action-red-hover-bg) !important;
    --sppk-recap-button-hover-ink: var(--sppk-recap-action-red-hover-ink) !important;
    --sppk-recap-button-hover-line: var(--sppk-recap-action-red-hover-line) !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent :is(.rekap-produksi-page, .rekap-detail-page) :is(.btn-warning, .btn-outline-warning),
html.sppk-recap-embedded body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent :is(.btn-warning, .btn-outline-warning),
html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent #sppkRecapWorkspace :is(.btn-warning, .btn-outline-warning) {
    --sppk-recap-button-bg: var(--sppk-recap-action-amber-bg) !important;
    --sppk-recap-button-ink: var(--sppk-recap-action-amber-ink) !important;
    --sppk-recap-button-line: var(--sppk-recap-action-amber-line) !important;
    --sppk-recap-button-hover-bg: var(--sppk-recap-action-amber-hover-bg) !important;
    --sppk-recap-button-hover-ink: var(--sppk-recap-action-amber-hover-ink) !important;
    --sppk-recap-button-hover-line: var(--sppk-recap-action-amber-hover-line) !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent :is(.rekap-produksi-page, .rekap-detail-page) :is([data-rekap-period].btn-success, .rekap-unit-tab.is-active, .btn.active, .btn[aria-pressed="true"], .btn[aria-current="page"]),
html.sppk-recap-embedded body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent :is([data-rekap-period].btn-success, .rekap-unit-tab.is-active, .btn.active, .btn[aria-pressed="true"], .btn[aria-current="page"]),
html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent #sppkRecapWorkspace :is([data-rekap-period].btn-success, .rekap-unit-tab.is-active, .btn.active, .btn[aria-pressed="true"], .btn[aria-current="page"]) {
    --sppk-recap-button-bg: var(--sppk-recap-action-selected-bg) !important;
    --sppk-recap-button-ink: var(--sppk-recap-action-selected-ink) !important;
    --sppk-recap-button-line: var(--sppk-recap-action-selected-line) !important;
    --sppk-recap-button-hover-bg: var(--sppk-recap-action-selected-hover-bg) !important;
    --sppk-recap-button-hover-ink: var(--sppk-recap-action-selected-hover-ink) !important;
    --sppk-recap-button-hover-line: var(--sppk-recap-action-selected-hover-line) !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent :is(.rekap-produksi-page, .rekap-detail-page) :where(.btn:not(.btn-close), .rekap-unit-tab, .rekap-analytics-rail-link, .recap-workspace-open-page, .recap-workspace-retry) :is(i, span, strong, b, small, em),
html.sppk-recap-embedded body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent :where(.btn:not(.btn-close), .rekap-unit-tab, .rekap-analytics-rail-link, .recap-workspace-open-page, .recap-workspace-retry) :is(i, span, strong, b, small, em),
html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent #sppkRecapWorkspace :where(.btn:not(.btn-close), .rekap-unit-tab, .rekap-analytics-rail-link, .recap-workspace-open-page, .recap-workspace-retry) :is(i, span, strong, b, small, em) {
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent :is(.rekap-produksi-page, .rekap-detail-page) .rekap-unit-tab .rekap-unit-tab-icon,
html.sppk-recap-embedded body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent .rekap-unit-tab .rekap-unit-tab-icon,
html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent #sppkRecapWorkspace .rekap-unit-tab .rekap-unit-tab-icon {
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent :is(.rekap-produksi-page, .rekap-detail-page) :where(.btn:not(.btn-close), .rekap-unit-tab, .rekap-analytics-rail-link, .recap-workspace-open-page, .recap-workspace-retry):is(:hover, :focus-visible, :active):not(:disabled):not([aria-disabled="true"]),
html.sppk-recap-embedded body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent :where(.btn:not(.btn-close), .rekap-unit-tab, .rekap-analytics-rail-link, .recap-workspace-open-page, .recap-workspace-retry):is(:hover, :focus-visible, :active):not(:disabled):not([aria-disabled="true"]),
html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent #sppkRecapWorkspace :where(.btn:not(.btn-close), .rekap-unit-tab, .rekap-analytics-rail-link, .recap-workspace-open-page, .recap-workspace-retry):is(:hover, :focus-visible, :active):not(:disabled):not([aria-disabled="true"]) {
    background: var(--sppk-recap-button-hover-bg) !important;
    color: var(--sppk-recap-button-hover-ink) !important;
    -webkit-text-fill-color: currentColor !important;
    border-color: var(--sppk-recap-button-hover-line) !important;
    box-shadow: none !important;
    transform: none !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent :is(.rekap-produksi-page, .rekap-detail-page) :where(.btn:not(.btn-close), .rekap-unit-tab, .rekap-analytics-rail-link, .recap-workspace-open-page, .recap-workspace-retry):focus-visible,
html.sppk-recap-embedded body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent :where(.btn:not(.btn-close), .rekap-unit-tab, .rekap-analytics-rail-link, .recap-workspace-open-page, .recap-workspace-retry):focus-visible,
html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent #sppkRecapWorkspace :where(.btn:not(.btn-close), .rekap-unit-tab, .rekap-analytics-rail-link, .recap-workspace-open-page, .recap-workspace-retry):focus-visible {
    outline: 2px solid var(--sppk-recap-button-focus) !important;
    outline-offset: 2px !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent :is(.rekap-produksi-page, .rekap-detail-page) :where(.btn:not(.btn-close), .rekap-unit-tab, .rekap-analytics-rail-link, .recap-workspace-open-page, .recap-workspace-retry):is(:disabled, [aria-disabled="true"]),
html.sppk-recap-embedded body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent :where(.btn:not(.btn-close), .rekap-unit-tab, .rekap-analytics-rail-link, .recap-workspace-open-page, .recap-workspace-retry):is(:disabled, [aria-disabled="true"]),
html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent #sppkRecapWorkspace :where(.btn:not(.btn-close), .rekap-unit-tab, .rekap-analytics-rail-link, .recap-workspace-open-page, .recap-workspace-retry):is(:disabled, [aria-disabled="true"]) {
    --sppk-recap-button-bg: var(--sppk-recap-action-neutral-bg) !important;
    --sppk-recap-button-ink: var(--sppk-recap-action-neutral-ink) !important;
    --sppk-recap-button-line: var(--sppk-recap-action-neutral-line) !important;
    background: var(--sppk-recap-action-neutral-bg) !important;
    color: var(--sppk-recap-action-neutral-ink) !important;
    border-color: var(--sppk-recap-action-neutral-line) !important;
    opacity: 1 !important;
    cursor: not-allowed !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent :is(.rekap-produksi-page, .rekap-detail-page) :is(.rekap-production-hero-body, .rekap-detail-hero-body) {
    min-height: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 12px !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent :is(.rekap-produksi-page, .rekap-detail-page) :is(.rekap-period-actions, .rekap-detail-actions) {
    display: flex !important;
    flex: 0 1 auto !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    align-items: flex-start !important;
    align-self: flex-start !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    margin-inline-start: auto !important;
    gap: 8px !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent :is(.rekap-produksi-page, .rekap-detail-page) :is(.rekap-period-actions, .rekap-detail-actions) .btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    min-height: 36px !important;
    max-width: 100% !important;
    padding: 7px 12px !important;
    border-radius: 8px !important;
    white-space: normal !important;
    text-align: center !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent #sppkRecapWorkspace .recap-workspace-report-heading {
    align-items: flex-start !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent #sppkRecapWorkspace .recap-workspace-open-page {
    margin-inline-start: auto !important;
    align-self: flex-start !important;
}

}

/* V47 — MAIN RECAP: CONSISTENT INSETS AND THEME-AWARE LABELS
   Only report-page components are affected. Keep the V45 action palette,
   V44 cached workspace and V46 dedicated chart pages intact. */
@layer sppk-recap-headers {

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent :is(.rekap-produksi-page, .rekap-detail-page) {
    --sppk-recap-inset: 20px !important;
    --rekap-ink: var(--sppk-theme-heading) !important;
    --rekap-muted: var(--sppk-theme-copy) !important;
    --rekap-border: var(--sppk-theme-line) !important;
    --rekap-surface: var(--sppk-theme-surface) !important;
    --rekap-table-line: var(--sppk-theme-line-soft) !important;
    --rekap-detail-ink: var(--sppk-theme-heading) !important;
    --rekap-detail-muted: var(--sppk-theme-copy) !important;
    --rekap-detail-border: var(--sppk-theme-line) !important;
    --rekap-detail-surface: var(--sppk-theme-surface) !important;
    --rekap-detail-table-line: var(--sppk-theme-line-soft) !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent .rekap-produksi-page {
    --sppk-recap-header-bg: #edf5f0 !important;
    --sppk-recap-header-ink: #24644b !important;
}

html body#sppkAppShell.sppk-app-shell.dark .page-shell.main-content #sppkPageContent .rekap-produksi-page {
    --sppk-recap-header-bg: #242e29 !important;
    --sppk-recap-header-ink: #90cdb0 !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent .rekap-tuk-page {
    --sppk-recap-header-bg: #edf2f9 !important;
    --sppk-recap-header-ink: #335f9e !important;
}

html body#sppkAppShell.sppk-app-shell.dark .page-shell.main-content #sppkPageContent .rekap-tuk-page {
    --sppk-recap-header-bg: #252c36 !important;
    --sppk-recap-header-ink: #9ebfe7 !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent .rekap-bbm-page {
    --sppk-recap-header-bg: #faeef1 !important;
    --sppk-recap-header-ink: #9b4050 !important;
}

html body#sppkAppShell.sppk-app-shell.dark .page-shell.main-content #sppkPageContent .rekap-bbm-page {
    --sppk-recap-header-bg: #33282c !important;
    --sppk-recap-header-ink: #e3a4b1 !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent .rekap-jalan-page {
    --sppk-recap-header-bg: #faf3e7 !important;
    --sppk-recap-header-ink: #815b20 !important;
}

html body#sppkAppShell.sppk-app-shell.dark .page-shell.main-content #sppkPageContent .rekap-jalan-page {
    --sppk-recap-header-bg: #332e25 !important;
    --sppk-recap-header-ink: #dec08d !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent .rekap-houling-page {
    --sppk-recap-header-bg: #edf4f6 !important;
    --sppk-recap-header-ink: #296477 !important;
}

html body#sppkAppShell.sppk-app-shell.dark .page-shell.main-content #sppkPageContent .rekap-houling-page {
    --sppk-recap-header-bg: #242f33 !important;
    --sppk-recap-header-ink: #97c8d5 !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent .rekap-produksi-page #rekapPanelBulldozer {
    --sppk-recap-header-bg: #faf3e7 !important;
    --sppk-recap-header-ink: #815b20 !important;
}

html body#sppkAppShell.sppk-app-shell.dark .page-shell.main-content #sppkPageContent .rekap-produksi-page #rekapPanelBulldozer {
    --sppk-recap-header-bg: #332e25 !important;
    --sppk-recap-header-ink: #dec08d !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent :is(.rekap-produksi-page, .rekap-detail-page) :is(.rekap-stat-card-body, .rekap-detail-stat-card-body, .rekap-data-card > .card-body, .rekap-detail-chart-body, .rekap-detail-table-body) {
    box-sizing: border-box !important;
    min-width: 0 !important;
    padding: var(--sppk-recap-inset) !important;
    color: var(--sppk-theme-text) !important;
    -webkit-text-fill-color: currentColor !important;
    text-shadow: none !important;
    opacity: 1 !important;
    filter: none !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent :is(.rekap-produksi-page, .rekap-detail-page) :is(.rekap-stat-card, .rekap-detail-stat-card) {
    height: auto !important;
    min-height: 136px !important;
    display: flex !important;
    flex-direction: column !important;
    background: var(--sppk-theme-surface) !important;
    background-image: none !important;
    color: var(--sppk-theme-heading) !important;
    -webkit-text-fill-color: currentColor !important;
    text-shadow: none !important;
    opacity: 1 !important;
    filter: none !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent :is(.rekap-produksi-page, .rekap-detail-page) :is(.rekap-stat-card-body, .rekap-detail-stat-card-body) {
    display: flex !important;
    flex: 1 1 auto !important;
    height: auto !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: stretch !important;
    gap: 6px !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent :is(.rekap-produksi-page, .rekap-detail-page) :is(.rekap-stat-card, .rekap-detail-stat-card) :is(h2, h3, h4, h5) {
    margin: 0 !important;
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
    color: var(--sppk-theme-heading) !important;
    -webkit-text-fill-color: currentColor !important;
    text-shadow: none !important;
    opacity: 1 !important;
    filter: none !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent :is(.rekap-produksi-page, .rekap-detail-page) :is(.rekap-stat-card, .rekap-detail-stat-card) :is(h6, p, small, .text-muted, .text-white-50) {
    margin: 0 !important;
    overflow-wrap: anywhere !important;
    color: var(--sppk-theme-copy) !important;
    -webkit-text-fill-color: currentColor !important;
    text-shadow: none !important;
    opacity: 1 !important;
    filter: none !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent :is(.rekap-produksi-page, .rekap-detail-page) :is(.rekap-data-card > .card-header, .rekap-operator-head, .rekap-detail-panel-header) {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    min-width: 0 !important;
    padding: 16px var(--sppk-recap-inset) !important;
    background: var(--sppk-recap-header-bg) !important;
    background-image: none !important;
    color: var(--sppk-recap-header-ink) !important;
    -webkit-text-fill-color: currentColor !important;
    text-shadow: none !important;
    opacity: 1 !important;
    filter: none !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent :is(.rekap-produksi-page, .rekap-detail-page) :is(.rekap-data-card > .card-header, .rekap-operator-head, .rekap-detail-panel-header) :is(h1, h2, h3, h4, h5, h6, p, span, small, strong, b, em, i, label):not(:where(.btn, .btn *, .badge, .badge *, .rekap-unit-tab, .rekap-unit-tab *)) {
    overflow-wrap: anywhere !important;
    color: var(--sppk-recap-header-ink) !important;
    -webkit-text-fill-color: currentColor !important;
    text-shadow: none !important;
    opacity: 1 !important;
    filter: none !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent :is(.rekap-produksi-page, .rekap-detail-page) :is(.rekap-data-card > .card-header, .rekap-operator-head, .rekap-detail-panel-header) :is(h1, h2, h3, h4, h5, h6, p) {
    margin: 0 !important;
    min-width: 0 !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent :is(.rekap-produksi-page, .rekap-detail-page) .rekap-operator-head > div {
    min-width: 0 !important;
    max-width: 100% !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent :is(.rekap-produksi-page, .rekap-detail-page) .rekap-operator-head > div > span {
    flex: 0 0 34px !important;
    background: transparent !important;
    background-image: none !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent :is(.rekap-produksi-page, .rekap-detail-page) .rekap-operator-head > div > div {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    min-width: 0 !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent :is(.rekap-produksi-page, .rekap-detail-page) .rekap-operator-head em {
    min-width: 0 !important;
    max-width: 100% !important;
    font-style: normal !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent :is(.rekap-produksi-page, .rekap-detail-page) .rekap-operator-card > .card-body {
    padding: 0 !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent :is(.rekap-produksi-page, .rekap-detail-page) .table :is(th, td) {
    padding: 12px 16px !important;
    vertical-align: middle !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent :is(.rekap-produksi-page, .rekap-detail-page) .rekap-operator-card .table :is(th, td):first-child {
    padding-left: var(--sppk-recap-inset) !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent :is(.rekap-produksi-page, .rekap-detail-page) .rekap-operator-card .table :is(th, td):last-child {
    padding-right: var(--sppk-recap-inset) !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent :is(.rekap-produksi-page, .rekap-detail-page) .table :is(thead, thead tr, thead th) {
    --bs-table-bg: var(--sppk-recap-header-bg) !important;
    --bs-table-color: var(--sppk-recap-header-ink) !important;
    --bs-table-accent-bg: transparent !important;
    background: var(--sppk-recap-header-bg) !important;
    background-image: none !important;
    box-shadow: none !important;
    color: var(--sppk-recap-header-ink) !important;
    -webkit-text-fill-color: currentColor !important;
    text-shadow: none !important;
    opacity: 1 !important;
    filter: none !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent :is(.rekap-produksi-page, .rekap-detail-page) .table thead :is(h1, h2, h3, h4, h5, h6, p, span, small, strong, b, em, i, label):not(:where(.btn, .btn *, .badge, .badge *, .rekap-unit-tab, .rekap-unit-tab *)) {
    color: var(--sppk-recap-header-ink) !important;
    -webkit-text-fill-color: currentColor !important;
    text-shadow: none !important;
    opacity: 1 !important;
    filter: none !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent :is(.rekap-produksi-page, .rekap-detail-page) :is(.rekap-production-hero, .rekap-detail-hero) {
    background: var(--sppk-theme-surface) !important;
    background-image: none !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent :is(.rekap-produksi-page, .rekap-detail-page) :is(.rekap-production-hero, .rekap-detail-hero)::before {
    content: none !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent :is(.rekap-produksi-page, .rekap-detail-page) :is(.rekap-production-hero-body, .rekap-detail-hero-body) {
    padding: var(--sppk-recap-inset) !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent :is(.rekap-produksi-page, .rekap-detail-page) :is(.rekap-production-hero-body, .rekap-detail-hero-body) > div:first-child {
    min-width: 0 !important;
    max-width: 100% !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent :is(.rekap-produksi-page, .rekap-detail-page) :is(.rekap-production-hero, .rekap-detail-hero) :is(h1, h2, h3, h4, h5, h6, i):not(:where(.btn, .btn *, .badge, .badge *, .rekap-unit-tab, .rekap-unit-tab *)) {
    color: var(--sppk-theme-heading) !important;
    -webkit-text-fill-color: currentColor !important;
    text-shadow: none !important;
    opacity: 1 !important;
    filter: none !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent :is(.rekap-produksi-page, .rekap-detail-page) :is(.rekap-production-hero, .rekap-detail-hero) :is(p, small, span, .text-success):not(:where(.btn, .btn *, .badge, .badge *, .rekap-unit-tab, .rekap-unit-tab *)) {
    overflow-wrap: anywhere !important;
    color: var(--sppk-theme-copy) !important;
    -webkit-text-fill-color: currentColor !important;
    text-shadow: none !important;
    opacity: 1 !important;
    filter: none !important;
}

html.sppk-recap-embedded body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent :is(.rekap-produksi-page, .rekap-detail-page) :is(.rekap-production-hero, .rekap-detail-hero, .rekap-production-hero-body, .rekap-detail-hero-body) {
    padding: 0 !important;
    background: transparent !important;
    background-image: none !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent :is(.rekap-produksi-page, .rekap-detail-page) .rekap-analytics-rail {
    padding: 16px var(--sppk-recap-inset) !important;
    gap: 12px !important;
    background: var(--sppk-theme-surface-soft) !important;
    background-image: none !important;
    border-color: var(--sppk-theme-line) !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent :is(.rekap-produksi-page, .rekap-detail-page) .rekap-analytics-rail-copy {
    gap: 4px !important;
    overflow-wrap: anywhere !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent :is(.rekap-produksi-page, .rekap-detail-page) :is(.rekap-analytics-rail-copy strong, .rekap-table-empty strong) {
    color: var(--sppk-theme-heading) !important;
    -webkit-text-fill-color: currentColor !important;
    text-shadow: none !important;
    opacity: 1 !important;
    filter: none !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent :is(.rekap-produksi-page, .rekap-detail-page) :is(.rekap-analytics-rail-copy small, .rekap-analytics-rail-copy span, .rekap-table-empty span) {
    color: var(--sppk-theme-copy) !important;
    -webkit-text-fill-color: currentColor !important;
    text-shadow: none !important;
    opacity: 1 !important;
    filter: none !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent :is(.rekap-produksi-page, .rekap-detail-page) :is(.rekap-analytics-rail-icon, .rekap-table-empty i) {
    background: var(--sppk-recap-header-bg) !important;
    color: var(--sppk-recap-header-ink) !important;
    -webkit-text-fill-color: currentColor !important;
    text-shadow: none !important;
    opacity: 1 !important;
    filter: none !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent :is(.rekap-produksi-page, .rekap-detail-page) :is(.dataTables_wrapper, .dt-container) :is(label, .dataTables_info, .dt-info) {
    color: var(--sppk-theme-copy) !important;
    -webkit-text-fill-color: currentColor !important;
    text-shadow: none !important;
    opacity: 1 !important;
    filter: none !important;
}

@media (max-width: 639.98px) {

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent :is(.rekap-produksi-page, .rekap-detail-page) {
    --sppk-recap-inset: 16px !important;
}

html body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent :is(.rekap-produksi-page, .rekap-detail-page) :is(.rekap-data-card > .card-header, .rekap-operator-head, .rekap-detail-panel-header) {
    padding: 14px var(--sppk-recap-inset) !important;
    gap: 10px !important;
}

}
}

/* V48 — TARGET TAHUNAN: LIGHT HERO/LABELS AND GENERATE SPACING
   Functional controls retain their palette. Only light-mode Edit/Delete
   receive the same amber/red foreground-background pairs as recap V45. */
@layer sppk-target-polish {

html body#sppkAppShell.sppk-app-shell.sppk-route-target:not(.dark) .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper {
    --target-ink: var(--sppk-theme-heading) !important;
    --target-muted: var(--sppk-theme-copy) !important;
}

html body#sppkAppShell.sppk-app-shell.sppk-route-target:not(.dark) .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper .target-hero {
    background: var(--sppk-theme-surface) !important;
    background-image: none !important;
    border-color: var(--sppk-theme-line) !important;
    box-shadow: var(--sppk-theme-shadow-soft) !important;
}

html body#sppkAppShell.sppk-app-shell.sppk-route-target:not(.dark) .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper .target-hero::after,
html body#sppkAppShell.sppk-app-shell.sppk-route-target:not(.dark) .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper::before {
    content: none !important;
    background: none !important;
    animation: none !important;
}

html body#sppkAppShell.sppk-app-shell.sppk-route-target:not(.dark) .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper .target-hero .hero-overlay {
    background: none !important;
}

html body#sppkAppShell.sppk-app-shell.sppk-route-target:not(.dark) .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper .target-hero .hero-status-card {
    background: var(--sppk-theme-surface-soft) !important;
    background-image: none !important;
    border-color: var(--sppk-theme-line) !important;
    box-shadow: none !important;
    color: var(--sppk-theme-text) !important;
    -webkit-text-fill-color: currentColor !important;
    opacity: 1 !important;
    text-shadow: none !important;
    filter: none !important;
}

html body#sppkAppShell.sppk-app-shell.sppk-route-target:not(.dark) .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper :is(h1, h2, h3, h4, h5, h6, .hero-title, .hero-status-card h3, .enterprise-table strong):not(:where(button, button *, .btn, .btn *, .btn-enterprise-save, .btn-enterprise-save *, .btn-action, .btn-action *)) {
    color: var(--sppk-theme-heading) !important;
    -webkit-text-fill-color: currentColor !important;
    opacity: 1 !important;
    text-shadow: none !important;
    filter: none !important;
}

html body#sppkAppShell.sppk-app-shell.sppk-route-target:not(.dark) .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper :is(p, label, .modern-label, .hero-subtitle, .hero-status-card p, .target-year-filter-row label):not(:where(button, button *, .btn, .btn *, .btn-enterprise-save, .btn-enterprise-save *, .btn-action, .btn-action *)) {
    color: var(--sppk-theme-copy) !important;
    -webkit-text-fill-color: currentColor !important;
    opacity: 1 !important;
    text-shadow: none !important;
    filter: none !important;
}

html body#sppkAppShell.sppk-app-shell.sppk-route-target:not(.dark) .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper :is(small, .target-data-header__eyebrow):not(:where(button, button *, .btn, .btn *, .btn-enterprise-save, .btn-enterprise-save *, .btn-action, .btn-action *)) {
    color: var(--sppk-theme-muted) !important;
    -webkit-text-fill-color: currentColor !important;
    opacity: 1 !important;
    text-shadow: none !important;
    filter: none !important;
}

html body#sppkAppShell.sppk-app-shell.sppk-route-target:not(.dark) .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper .target-data-header {
    background: var(--sppk-theme-surface-soft) !important;
    background-image: none !important;
    border-color: var(--sppk-theme-line-soft) !important;
    color: var(--sppk-theme-heading) !important;
    -webkit-text-fill-color: currentColor !important;
    opacity: 1 !important;
    text-shadow: none !important;
    filter: none !important;
}

html body#sppkAppShell.sppk-app-shell.sppk-route-target:not(.dark) .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper :is(.hero-badge, .target-hero .status-live, .panel-icon.success) {
    background: #edf5f0 !important;
    background-image: none !important;
    border-color: var(--sppk-theme-line) !important;
    box-shadow: none !important;
    color: #24644b !important;
    -webkit-text-fill-color: currentColor !important;
    opacity: 1 !important;
    text-shadow: none !important;
    filter: none !important;
}

html body#sppkAppShell.sppk-app-shell.sppk-route-target:not(.dark) .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper .panel-icon.primary {
    background: #edf2f9 !important;
    background-image: none !important;
    border-color: var(--sppk-theme-line) !important;
    box-shadow: none !important;
    color: #335f9e !important;
    -webkit-text-fill-color: currentColor !important;
    opacity: 1 !important;
    text-shadow: none !important;
    filter: none !important;
}

html body#sppkAppShell.sppk-app-shell.sppk-route-target:not(.dark) .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper :is(.panel-icon, .hero-badge, .target-hero .status-live) :is(i, span) {
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
}

html body#sppkAppShell.sppk-app-shell.sppk-route-target:not(.dark) .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper .target-hero .pulse-dot {
    background: #24644b !important;
    box-shadow: none !important;
}

html body#sppkAppShell.sppk-app-shell.sppk-route-target:not(.dark) .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper .year-badge {
    background: var(--sppk-theme-surface-soft) !important;
    background-image: none !important;
    color: var(--sppk-theme-heading) !important;
    -webkit-text-fill-color: currentColor !important;
    opacity: 1 !important;
    text-shadow: none !important;
    filter: none !important;
}

html body#sppkAppShell.sppk-app-shell.sppk-route-target:not(.dark) .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper .enterprise-table thead th {
    --bs-table-bg: var(--sppk-theme-surface-soft) !important;
    --bs-table-color: var(--sppk-theme-heading) !important;
    background: var(--sppk-theme-surface-soft) !important;
    background-image: none !important;
    color: var(--sppk-theme-heading) !important;
    -webkit-text-fill-color: currentColor !important;
    opacity: 1 !important;
    text-shadow: none !important;
    filter: none !important;
}

html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper .panel-header:has(select.target-year-select) {
    align-items: flex-start !important;
}

html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper .panel-header:has(select.target-year-select) > div:last-child {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper form:has(select.target-year-select) {
    width: 100% !important;
    max-width: 100% !important;
}

html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper form:has(select.target-year-select) > .row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 16px !important;
    margin: 0 !important;
    --bs-gutter-x: 0 !important;
    --bs-gutter-y: 0 !important;
}

html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper form:has(select.target-year-select) > .row > .col-md-3 {
    flex: 0 1 220px !important;
    width: 220px !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper form:has(select.target-year-select) > .row > .col-md-4 {
    flex: 0 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper form:has(select.target-year-select) select.target-year-select {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper form:has(select.target-year-select) button[name="generate_petak"] {
    max-width: 100% !important;
    white-space: normal !important;
}

html body#sppkAppShell.sppk-app-shell.sppk-route-target:not(.dark) .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper .btn-action.warning {
    background: #faf3e7 !important;
    background-image: none !important;
    border: 1px solid #a1834e !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    transform: none !important;
    color: #815b20 !important;
    -webkit-text-fill-color: currentColor !important;
    opacity: 1 !important;
    text-shadow: none !important;
    filter: none !important;
}

html body#sppkAppShell.sppk-app-shell.sppk-route-target:not(.dark) .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper .btn-action.warning > i {
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
}

html body#sppkAppShell.sppk-app-shell.sppk-route-target:not(.dark) .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper .btn-action.warning:is(:hover, :focus-visible, :active) {
    background: #f3e7cf !important;
    background-image: none !important;
    border-color: #987641 !important;
    box-shadow: none !important;
    transform: none !important;
    color: #6c4b1c !important;
    -webkit-text-fill-color: currentColor !important;
    opacity: 1 !important;
    text-shadow: none !important;
    filter: none !important;
}

html body#sppkAppShell.sppk-app-shell.sppk-route-target:not(.dark) .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper .btn-action.danger {
    background: #faeef1 !important;
    background-image: none !important;
    border: 1px solid #a57580 !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    transform: none !important;
    color: #9b4050 !important;
    -webkit-text-fill-color: currentColor !important;
    opacity: 1 !important;
    text-shadow: none !important;
    filter: none !important;
}

html body#sppkAppShell.sppk-app-shell.sppk-route-target:not(.dark) .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper .btn-action.danger > i {
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
}

html body#sppkAppShell.sppk-app-shell.sppk-route-target:not(.dark) .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper .btn-action.danger:is(:hover, :focus-visible, :active) {
    background: #f5dfe5 !important;
    background-image: none !important;
    border-color: #975c6a !important;
    box-shadow: none !important;
    transform: none !important;
    color: #853345 !important;
    -webkit-text-fill-color: currentColor !important;
    opacity: 1 !important;
    text-shadow: none !important;
    filter: none !important;
}

html body#sppkAppShell.sppk-app-shell.sppk-route-target:not(.dark) .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper .btn-action:is(.warning, .danger):focus-visible {
    outline: 2px solid #335f9e !important;
    outline-offset: 2px !important;
}

@media (max-width: 575.98px) {

html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper form:has(select.target-year-select) > .row {
    gap: 12px !important;
}

html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper form:has(select.target-year-select) > .row > :is(.col-md-3, .col-md-4) {
    flex: 1 1 100% !important;
    width: 100% !important;
}

html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper form:has(select.target-year-select) button[name="generate_petak"] {
    width: 100% !important;
}

}
}

/* V49 — local Target editor/confirmation dialogs; no background navigation. */
@layer sppk-target-polish {
html.sppk-target-dialog-open { overflow: hidden !important; scrollbar-gutter: stable !important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper :is(#sppkTargetEditDialog, #sppkTargetDeleteDialog) {
    position: fixed !important;
    inset: 0 !important;
    width: min(720px, calc(100% - 32px)) !important;
    height: fit-content !important;
    max-width: none !important;
    max-height: calc(100dvh - 40px) !important;
    margin: auto !important;
    padding: 0 !important;
    border: 1px solid var(--sppk-theme-line) !important;
    border-radius: 16px !important;
    background: var(--sppk-theme-surface) !important;
    background-image: none !important;
    color: var(--sppk-theme-text) !important;
    -webkit-text-fill-color: currentColor !important;
    box-shadow: 0 20px 65px #00000038 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}
html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper #sppkTargetDeleteDialog { width: min(520px, calc(100% - 32px)) !important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper .sppk-target-dialog:not([open]),
html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper .sppk-target-dialog [hidden] { display: none !important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper .sppk-target-dialog[open] { display: flex !important; flex-direction: column !important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper .sppk-target-dialog::backdrop { background: #00000080 !important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper .sppk-target-dialog-header {
    display: flex !important; align-items: flex-start !important; justify-content: space-between !important;
    flex: 0 0 auto !important; gap: 16px !important; padding: 20px !important;
    border-bottom: 1px solid var(--sppk-theme-line-soft) !important;
}
html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper .sppk-target-dialog-header > div { min-width: 0 !important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper .sppk-target-dialog :is(h3, strong) {
    margin: 0 !important; color: var(--sppk-theme-heading) !important;
    -webkit-text-fill-color: currentColor !important; text-shadow: none !important; overflow-wrap: anywhere !important;
}
html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper .sppk-target-dialog :is(p, label) {
    color: var(--sppk-theme-copy) !important; -webkit-text-fill-color: currentColor !important;
    text-shadow: none !important; overflow-wrap: anywhere !important;
}
html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper .sppk-target-dialog-header p { margin: 6px 0 0 !important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper .sppk-target-dialog form {
    display: flex !important; flex: 1 1 auto !important; flex-direction: column !important;
    min-height: 0 !important; overflow: hidden !important; margin: 0 !important;
}
html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper .sppk-target-dialog-body {
    padding: 20px !important; min-height: 0 !important; overflow-y: auto !important; overscroll-behavior: contain !important;
}
html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper .sppk-target-field-grid {
    display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important; margin: 0 0 16px !important; padding: 0 !important; border: 0 !important; min-width: 0 !important;
}
html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper .sppk-target-field { min-width: 0 !important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper .sppk-target-field label { display: block !important; margin-bottom: 6px !important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper .sppk-target-field input {
    width: 100% !important; min-width: 0 !important; box-sizing: border-box !important;
    background: var(--sppk-theme-input) !important; color: var(--sppk-theme-text) !important;
    -webkit-text-fill-color: currentColor !important; border: 1px solid var(--sppk-theme-line) !important;
}
html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper .sppk-target-dialog-footer {
    display: flex !important; justify-content: flex-end !important; flex-wrap: wrap !important;
    flex: 0 0 auto !important; gap: 10px !important; margin: 0 !important; padding: 16px 20px !important;
    border-top: 1px solid var(--sppk-theme-line-soft) !important; background: var(--sppk-theme-surface-soft) !important;
}
html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper .sppk-target-dialog-status { margin: 0 !important; padding: 16px 20px !important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper .sppk-target-dialog-status[data-error="true"] { color: #9b4050 !important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-target.dark .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper .sppk-target-dialog-status[data-error="true"] { color: #e6afbd !important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper .sppk-target-delete-warning {
    padding: 14px 16px !important; border: 1px solid #a57580 !important; border-radius: 10px !important;
    background: #faeef1 !important; color: #9b4050 !important;
}
html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper .sppk-target-delete-warning :is(p, strong) { color: #9b4050 !important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper .sppk-target-delete-warning p { margin: 6px 0 0 !important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-target.dark .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper .sppk-target-delete-warning { background: #3a2930 !important; border-color: #ae7c8b !important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-target.dark .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper .sppk-target-delete-warning :is(p, strong) { color: #e6afbd !important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper .sppk-target-delete-blocked { margin: 14px 0 0 !important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper :is(.sppk-target-cancel, .sppk-target-dialog-close) {
    border: 1px solid var(--sppk-theme-line) !important; border-radius: 8px !important;
    background: var(--sppk-theme-surface) !important; background-image: none !important;
    color: var(--sppk-theme-text) !important; -webkit-text-fill-color: currentColor !important;
    box-shadow: none !important; cursor: pointer !important;
}
html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper .sppk-target-dialog-close {
    flex: 0 0 32px !important; width: 32px !important; height: 32px !important; padding: 0 !important;
    display: grid !important; place-items: center !important;
}
html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper .sppk-target-confirm-delete {
    border: 1px solid #a57580 !important; background: #faeef1 !important; background-image: none !important;
    color: #9b4050 !important; -webkit-text-fill-color: currentColor !important; box-shadow: none !important;
}
html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper .sppk-target-confirm-delete:is(:hover, :focus-visible) { background: #f5dfe5 !important; color: #853345 !important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-target.dark .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper .sppk-target-confirm-delete { border-color: #ae7c8b !important; background: #3a2930 !important; color: #e6afbd !important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-target.dark .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper .sppk-target-confirm-delete:is(:hover, :focus-visible) { background: #4b343d !important; color: #f0c3cf !important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper .sppk-target-dialog button:disabled { cursor: wait !important; opacity: .65 !important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper .sppk-target-dialog :is(button, input):focus-visible { outline: 2px solid var(--sppk-theme-link) !important; outline-offset: 2px !important; }
html body#sppkAppShell.sppk-app-shell .sppk-target-notice {
    position: fixed !important; right: 20px !important; bottom: 20px !important; z-index: 2100000 !important;
    max-width: min(440px, calc(100% - 40px)) !important; padding: 12px 16px !important;
    border: 1px solid var(--sppk-theme-line) !important; border-radius: 10px !important;
    background: var(--sppk-theme-surface) !important; color: var(--sppk-theme-text) !important;
    -webkit-text-fill-color: currentColor !important; box-shadow: var(--sppk-theme-shadow-soft) !important;
}
html body#sppkAppShell.sppk-app-shell .sppk-target-notice[hidden] { display: none !important; }
@media (max-width: 575.98px) {
html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper .sppk-target-field-grid { grid-template-columns: minmax(0, 1fr) !important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper :is(.sppk-target-dialog-header, .sppk-target-dialog-body) { padding: 16px !important; }
}
}

/* PROGRESS PETAK V50 — TITLE INSET AND ALIGNMENT
   The compact map header keeps the shared typography and theme palette. */
html body#sppkAppShell.sppk-app-shell.sppk-route-progress_petak
.page-shell.main-content #sppkPageContent #progressPetakHeader.progress-petak-hero {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 14px 20px !important;
    box-sizing: border-box !important;
    text-align: left !important;
}

html body#sppkAppShell.sppk-app-shell.sppk-route-progress_petak
.page-shell.main-content #sppkPageContent #progressPetakHeader.progress-petak-hero > div:first-child {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

html body#sppkAppShell.sppk-app-shell.sppk-route-progress_petak
.page-shell.main-content #sppkPageContent #progressPetakHeader.progress-petak-hero :is(.progress-petak-eyebrow, h2) {
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
}

@media (max-width: 767.98px) {
    html body#sppkAppShell.sppk-app-shell.sppk-route-progress_petak
    .page-shell.main-content #sppkPageContent #progressPetakHeader.progress-petak-hero {
        padding: 12px 16px !important;
    }
}

/* DASHBOARD V51 — READABLE DEFINITION HEADER IN LIGHT MODE
   ID scope remains valid when the modal is moved directly under body. */
html:not(.dark) body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark)
#dashboardInfoModal .dashboard-definition-header {
    border-bottom: 1px solid var(--sppk-theme-line) !important;
    background: var(--sppk-theme-surface-soft) !important;
    background-image: none !important;
    color: var(--sppk-theme-heading) !important;
}

html:not(.dark) body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark)
#dashboardInfoModal .dashboard-definition-header::after {
    content: none !important;
    background: none !important;
}

html:not(.dark) body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark)
#dashboardInfoModal .dashboard-definition-header #infoJudul.modal-title {
    color: var(--sppk-theme-heading) !important;
    -webkit-text-fill-color: currentColor !important;
    opacity: 1 !important;
    text-shadow: none !important;
}

html:not(.dark) body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark)
#dashboardInfoModal .dashboard-definition-header .dashboard-definition-eyebrow {
    color: var(--sppk-theme-muted) !important;
    -webkit-text-fill-color: currentColor !important;
}

html:not(.dark) body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark)
#dashboardInfoModal .dashboard-definition-header .dashboard-definition-symbol {
    border-color: var(--sppk-theme-line) !important;
    background: var(--sppk-theme-brand-soft) !important;
    color: var(--sppk-theme-brand) !important;
    -webkit-text-fill-color: currentColor !important;
    box-shadow: none !important;
}

html:not(.dark) body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark)
#dashboardInfoModal .dashboard-definition-header :is(.dashboard-definition-symbol, .dashboard-definition-eyebrow) i {
    color: var(--sppk-theme-brand) !important;
    -webkit-text-fill-color: currentColor !important;
}

html:not(.dark) body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark)
#dashboardInfoModal .dashboard-definition-header .dashboard-definition-close {
    border-color: var(--sppk-theme-line) !important;
    background-color: var(--sppk-theme-surface) !important;
    filter: none !important;
    opacity: 1 !important;
}

html:not(.dark) body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark)
#dashboardInfoModal .dashboard-definition-header .dashboard-definition-close:is(:hover, :focus-visible) {
    background-color: var(--sppk-theme-surface-soft) !important;
}

html:not(.dark) body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark)
#dashboardInfoModal .dashboard-definition-header .dashboard-definition-close:focus-visible {
    outline: 2px solid var(--sppk-theme-brand) !important;
    outline-offset: 2px !important;
}

/* DASHBOARD V52 — PDF CONFIRMATION LIGHT PALETTE
   Scope by modal ID so the palette survives its relocation under body. */
html:not(.dark) body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark)
#exportPdfModal .export-confirm-content {
    border-color: var(--sppk-theme-line) !important;
    background: var(--sppk-theme-surface) !important;
    color: var(--sppk-theme-copy) !important;
    box-shadow: var(--sppk-theme-shadow) !important;
}

html:not(.dark) body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark)
#exportPdfModal .export-confirm-content::before,
html:not(.dark) body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark)
#exportPdfModal .export-confirm-content .export-confirm-header::after {
    content: none !important;
    background: none !important;
    animation: none !important;
}

html:not(.dark) body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark)
#exportPdfModal .export-confirm-content :is(.export-confirm-header, .export-confirm-footer) {
    border-color: var(--sppk-theme-line) !important;
    background: var(--sppk-theme-surface-soft) !important;
    color: var(--sppk-theme-copy) !important;
}

html:not(.dark) body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark)
#exportPdfModal .export-confirm-content .export-confirm-header {
    border-bottom: 1px solid var(--sppk-theme-line) !important;
}

html:not(.dark) body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark)
#exportPdfModal .export-confirm-content .export-confirm-body {
    background: var(--sppk-theme-surface) !important;
    color: var(--sppk-theme-copy) !important;
}

html:not(.dark) body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark)
#exportPdfModal .export-confirm-content :is(#exportPdfModalTitle, h6) {
    color: var(--sppk-theme-heading) !important;
    -webkit-text-fill-color: currentColor !important;
    opacity: 1 !important;
    text-shadow: none !important;
}

html:not(.dark) body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark)
#exportPdfModal .export-confirm-content :is(.export-confirm-header p, .export-confirm-summary p) {
    color: var(--sppk-theme-copy) !important;
    -webkit-text-fill-color: currentColor !important;
}

html:not(.dark) body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark)
#exportPdfModal .export-confirm-content :is(.export-confirm-eyebrow, .export-confirm-summary-label, .export-confirm-security) {
    color: var(--sppk-theme-muted) !important;
    -webkit-text-fill-color: currentColor !important;
}

html:not(.dark) body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark)
#exportPdfModal .export-confirm-content .export-confirm-summary {
    border-color: var(--sppk-theme-line) !important;
    background: var(--sppk-theme-surface-soft) !important;
}

html:not(.dark) body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark)
#exportPdfModal .export-confirm-content .export-confirm-symbol {
    border-color: var(--sppk-theme-line) !important;
    background: var(--sppk-light-red-soft, #fff1f3) !important;
    color: var(--sppk-light-red, #a14f60) !important;
    -webkit-text-fill-color: currentColor !important;
    box-shadow: none !important;
}

html:not(.dark) body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark)
#exportPdfModal .export-confirm-content .export-confirm-summary-icon {
    background: var(--sppk-light-green-soft, #f1f8f4) !important;
    color: var(--sppk-light-green, #39765c) !important;
    -webkit-text-fill-color: currentColor !important;
}

html:not(.dark) body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark)
#exportPdfModal .export-confirm-content :is(.export-confirm-symbol, .export-confirm-summary-icon) i {
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
}

html:not(.dark) body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark)
#exportPdfModal .export-confirm-content :is(.export-confirm-eyebrow, .export-confirm-security) i {
    color: var(--sppk-light-green, #39765c) !important;
    -webkit-text-fill-color: currentColor !important;
}

html:not(.dark) body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark)
#exportPdfModal .export-confirm-content .export-confirm-warning {
    border-color: #e3cc96 !important;
    background: #fff8e7 !important;
}

html:not(.dark) body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark)
#exportPdfModal .export-confirm-content .export-confirm-warning :is(.export-confirm-warning-title, li, span, i) {
    color: #795719 !important;
    -webkit-text-fill-color: currentColor !important;
}

html:not(.dark) body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark)
#exportPdfModal .export-confirm-content .export-confirm-recommendation {
    border-color: #cbded1 !important;
    background: #f1f8f4 !important;
}

html:not(.dark) body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark)
#exportPdfModal .export-confirm-content .export-confirm-recommendation :is(.export-confirm-recommendation-title, li, span, i) {
    color: #376149 !important;
    -webkit-text-fill-color: currentColor !important;
}

html:not(.dark) body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark)
#exportPdfModal .export-confirm-content :is(.export-confirm-cancel, .export-confirm-close) {
    border-color: var(--sppk-theme-line) !important;
    background-color: var(--sppk-theme-surface) !important;
    box-shadow: none !important;
    filter: none !important;
    opacity: 1 !important;
}

html:not(.dark) body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark)
#exportPdfModal .export-confirm-content .export-confirm-cancel {
    background-image: none !important;
    color: var(--sppk-theme-copy) !important;
    -webkit-text-fill-color: currentColor !important;
}

html:not(.dark) body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark)
#exportPdfModal .export-confirm-content .export-confirm-submit,
html:not(.dark) body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark)
#exportPdfModal .export-confirm-content .export-confirm-submit:visited {
    border-color: var(--sppk-light-green, #39765c) !important;
    background: var(--sppk-light-green, #39765c) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: currentColor !important;
    box-shadow: none !important;
}

html:not(.dark) body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark)
#exportPdfModal .export-confirm-content :is(.export-confirm-cancel, .export-confirm-close):is(:hover, :focus-visible) {
    background-color: var(--sppk-theme-surface-soft) !important;
}

html:not(.dark) body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark)
#exportPdfModal .export-confirm-content .export-confirm-submit:is(:hover, :focus-visible) {
    border-color: #326f57 !important;
    background: #326f57 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: currentColor !important;
}

html:not(.dark) body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark)
#exportPdfModal .export-confirm-content :is(.export-confirm-cancel, .export-confirm-submit) :is(i, span) {
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
}

html:not(.dark) body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark)
#exportPdfModal .export-confirm-content :is(.export-confirm-close, .export-confirm-cancel, .export-confirm-submit):focus-visible {
    outline: 2px solid var(--sppk-light-green, #39765c) !important;
    outline-offset: 3px !important;
}

/* DASHBOARD V53 — SMART MONITORING LIGHT POPUPS
   ID scopes continue to match after Bootstrap overlays move under body. */
html:not(.dark) body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark)
:is(#smartAnalyticModal, #warningMonitoringModal, #liveActivityModal).dashboard-monitor-modal .modal-content {
    border-color: var(--sppk-theme-line) !important;
    background: var(--sppk-theme-surface) !important;
    color: var(--sppk-theme-copy) !important;
    box-shadow: var(--sppk-theme-shadow) !important;
}

html:not(.dark) body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark)
:is(#smartAnalyticModal, #warningMonitoringModal, #liveActivityModal).dashboard-monitor-modal .modal-content .modal-header {
    border-color: var(--sppk-theme-line) !important;
    background: var(--sppk-theme-surface-soft) !important;
    color: var(--sppk-theme-heading) !important;
}

html:not(.dark) body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark)
:is(#smartAnalyticModal, #warningMonitoringModal, #liveActivityModal).dashboard-monitor-modal .modal-content .modal-body {
    background: var(--sppk-theme-surface) !important;
    color: var(--sppk-theme-copy) !important;
}

html:not(.dark) body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark)
:is(#smartAnalyticModal, #warningMonitoringModal, #liveActivityModal).dashboard-monitor-modal .modal-content :is(.modal-title, .monitor-modal-state h5, .monitor-modal-empty strong, .activity-content .fw-semibold) {
    color: var(--sppk-theme-heading) !important;
    -webkit-text-fill-color: currentColor !important;
    text-shadow: none !important;
}

html:not(.dark) body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark)
:is(#smartAnalyticModal, #warningMonitoringModal, #liveActivityModal).dashboard-monitor-modal .modal-content .modal-header .modal-kicker {
    color: var(--sppk-light-blue, #426b91) !important;
    -webkit-text-fill-color: currentColor !important;
}

html:not(.dark) body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark)
:is(#smartAnalyticModal, #warningMonitoringModal, #liveActivityModal).dashboard-monitor-modal .modal-content .modal-header .warning-kicker {
    color: var(--sppk-light-amber, #886930) !important;
    -webkit-text-fill-color: currentColor !important;
}

html:not(.dark) body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark)
:is(#smartAnalyticModal, #warningMonitoringModal, #liveActivityModal).dashboard-monitor-modal .modal-content :is(.monitor-modal-state, .warning-item, .activity-item, .monitor-modal-empty) {
    border-color: var(--sppk-theme-line) !important;
    background: var(--sppk-theme-surface-soft) !important;
    color: var(--sppk-theme-copy) !important;
    box-shadow: none !important;
}

html:not(.dark) body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark)
:is(#smartAnalyticModal, #warningMonitoringModal, #liveActivityModal).dashboard-monitor-modal .modal-content :is(.monitor-modal-state p, .warning-text, .warning-text span, .warning-text strong, .warning-text b, .activity-content, .activity-content small, .monitor-modal-empty span) {
    color: var(--sppk-theme-copy) !important;
    -webkit-text-fill-color: currentColor !important;
}

html:not(.dark) body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark)
:is(#smartAnalyticModal, #warningMonitoringModal, #liveActivityModal).dashboard-monitor-modal .modal-content :is(.analytic-icon, .warning-icon, .activity-icon) {
    --sppk-monitor-icon-ink: var(--sppk-light-blue, #426b91);
    --sppk-monitor-icon-bg: var(--sppk-light-blue-soft, #edf4ff);
    border-color: var(--sppk-theme-line) !important;
    background: var(--sppk-monitor-icon-bg) !important;
    color: var(--sppk-monitor-icon-ink) !important;
    -webkit-text-fill-color: currentColor !important;
    box-shadow: none !important;
}

html:not(.dark) body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark)
:is(#smartAnalyticModal, #warningMonitoringModal, #liveActivityModal).dashboard-monitor-modal .modal-content :is(.analytic-icon, .warning-icon).bg-danger {
    --sppk-monitor-icon-ink: var(--sppk-light-red, #a14f60);
    --sppk-monitor-icon-bg: var(--sppk-light-red-soft, #fff1f3);
}

html:not(.dark) body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark)
:is(#smartAnalyticModal, #warningMonitoringModal, #liveActivityModal).dashboard-monitor-modal .modal-content :is(.analytic-icon, .warning-icon).bg-warning {
    --sppk-monitor-icon-ink: var(--sppk-light-amber, #886930);
    --sppk-monitor-icon-bg: var(--sppk-light-amber-soft, #fff4d6);
}

html:not(.dark) body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark)
:is(#smartAnalyticModal, #warningMonitoringModal, #liveActivityModal).dashboard-monitor-modal .modal-content :is(.analytic-icon.bg-success, .warning-icon.bg-success, .activity-icon) {
    --sppk-monitor-icon-ink: var(--sppk-light-green, #39785f);
    --sppk-monitor-icon-bg: var(--sppk-light-green-soft, #e8f5ee);
}

html:not(.dark) body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark)
:is(#smartAnalyticModal, #warningMonitoringModal, #liveActivityModal).dashboard-monitor-modal .modal-content :is(.analytic-icon, .warning-icon):is(.bg-secondary, .bg-dark, .bg-light) {
    --sppk-monitor-icon-ink: var(--sppk-theme-copy);
    --sppk-monitor-icon-bg: var(--sppk-theme-surface-soft);
}

html:not(.dark) body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark)
:is(#smartAnalyticModal, #warningMonitoringModal, #liveActivityModal).dashboard-monitor-modal .modal-content :is(.analytic-icon, .warning-icon, .activity-icon) i {
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
}

html:not(.dark) body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark)
:is(#smartAnalyticModal, #warningMonitoringModal, #liveActivityModal).dashboard-monitor-modal .modal-content .monitor-modal-empty > i {
    color: var(--sppk-light-green, #39785f) !important;
    -webkit-text-fill-color: currentColor !important;
}

html:not(.dark) body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark)
:is(#smartAnalyticModal, #warningMonitoringModal, #liveActivityModal).dashboard-monitor-modal .modal-content .modal-title .badge {
    border-color: var(--sppk-theme-line) !important;
    background: var(--sppk-light-green-soft, #e8f5ee) !important;
    color: var(--sppk-light-green, #39785f) !important;
    -webkit-text-fill-color: currentColor !important;
}

html:not(.dark) body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark)
:is(#smartAnalyticModal, #warningMonitoringModal, #liveActivityModal).dashboard-monitor-modal .modal-content .modal-header .btn-close {
    background-color: transparent !important;
    filter: none !important;
    opacity: 1 !important;
    box-shadow: none !important;
}

html:not(.dark) body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark)
:is(#smartAnalyticModal, #warningMonitoringModal, #liveActivityModal).dashboard-monitor-modal .modal-content .modal-header .btn-close:is(:hover, :focus-visible) {
    background-color: var(--sppk-theme-surface) !important;
}

html:not(.dark) body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark)
:is(#smartAnalyticModal, #warningMonitoringModal, #liveActivityModal).dashboard-monitor-modal .modal-content .modal-body .monitor-modal-action {
    border-color: var(--sppk-light-green, #39785f) !important;
    background: var(--sppk-light-green, #39785f) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: currentColor !important;
    box-shadow: none !important;
}

html:not(.dark) body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark)
:is(#smartAnalyticModal, #warningMonitoringModal, #liveActivityModal).dashboard-monitor-modal .modal-content .modal-body .monitor-modal-action:is(:hover, :focus-visible) {
    border-color: #326f57 !important;
    background: #326f57 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: currentColor !important;
}

html:not(.dark) body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark)
:is(#smartAnalyticModal, #warningMonitoringModal, #liveActivityModal).dashboard-monitor-modal .modal-content .modal-body .monitor-modal-action :is(i, span) {
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
}

html:not(.dark) body#sppkAppShell.sppk-app-shell.sppk-route-dashboard:not(.dark)
:is(#smartAnalyticModal, #warningMonitoringModal, #liveActivityModal).dashboard-monitor-modal .modal-content :is(.btn-close, .monitor-modal-action):focus-visible {
    outline: 2px solid var(--sppk-light-green, #39785f) !important;
    outline-offset: 3px !important;
}

/* SIDEBAR V54 — CLEAR BRAND AND ACTIVE RKT IN LIGHT MODE
   Preserve the existing logo asset, typography and compact-rail geometry. */
html:not(.dark) body#sppkAppShell.sppk-app-shell:not(.dark)
#appSidebar .sidebar-logo .sidebar-primary-logo {
    filter: none !important;
    box-shadow: none !important;
    opacity: 1 !important;
    mix-blend-mode: normal !important;
}

html:not(.dark) body#sppkAppShell.sppk-app-shell:not(.dark)
#appSidebar .sidebar-logo .sidebar-brand-version,
html:not(.dark) body#sppkAppShell.sppk-app-shell:not(.dark)
#appSidebar .sidebar-logo .sidebar-brand-version > span {
    color: var(--sppk-theme-muted) !important;
    -webkit-text-fill-color: currentColor !important;
    text-shadow: none !important;
    opacity: 1 !important;
}

html:not(.dark) body#sppkAppShell.sppk-app-shell:not(.dark)
#appSidebar .sidebar-logo .sidebar-brand-version > i {
    color: #2d7051 !important;
    -webkit-text-fill-color: currentColor !important;
    opacity: 1 !important;
}

html:not(.dark) body#sppkAppShell.sppk-app-shell:not(.dark)
#appSidebar .sidebar-logo .rkt-global-badge {
    border-color: #bed9cb !important;
    background: var(--sppk-theme-brand-soft, #e8f5ee) !important;
    color: #245b43 !important;
    -webkit-text-fill-color: currentColor !important;
    box-shadow: none !important;
    text-shadow: none !important;
    opacity: 1 !important;
}

html:not(.dark) body#sppkAppShell.sppk-app-shell:not(.dark)
#appSidebar .sidebar-logo .rkt-global-badge i {
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
    opacity: 1 !important;
}

/* ACTIVITY CENTER V55 — QUIET, STRUCTURED WORKSPACE */
@layer sppk-activity-layout {
html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #operationalActivityCenter, html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #activityDetailModal {
    --oac-risk-ink: #a3243d!important;
    --oac-risk-bg: #fff1f3!important;
    color: var(--sppk-theme-copy)!important;
}
html body#sppkAppShell.dark.sppk-route-activity_center #operationalActivityCenter {
    --oac-risk-ink: #e2a0ad!important;
    --oac-risk-bg: #32262b!important;
}
html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #operationalActivityCenter {
    width: 100%!important; max-width: 1240px!important; min-width: 0!important;
    margin: 0 auto!important; padding: 4px 0 32px!important;
    background: transparent!important; box-shadow: none!important;
}
html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #operationalActivityCenter *, html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #activityDetailModal * { box-sizing: border-box!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #operationalActivityCenter :is(h1, h2, h3, strong, dt), html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #activityDetailModal :is(h2, dd) {
    color: var(--sppk-theme-heading)!important; -webkit-text-fill-color: currentColor!important;
    text-shadow: none!important; overflow-wrap: anywhere!important;
}
html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #operationalActivityCenter :is(p, label, .facts span), html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #activityDetailModal dt {
    color: var(--sppk-theme-copy)!important; -webkit-text-fill-color: currentColor!important;
    overflow-wrap: anywhere!important;
}
html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #operationalActivityCenter :is(a, button) { text-decoration: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #operationalActivityCenter :is(a, button) :is(i, span), html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #activityDetailModal .btn-close i {
    color: inherit!important; -webkit-text-fill-color: currentColor!important;
}
html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #operationalActivityCenter .oac-page-header {
    display: flex!important; align-items: flex-start!important; justify-content: space-between!important;
    gap: 20px!important; margin: 0 0 24px!important; padding: 0!important;
}
html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #operationalActivityCenter .oac-page-copy { min-width: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #operationalActivityCenter .oac-page-header h1 { margin: 0 0 8px!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #operationalActivityCenter .oac-page-header p { max-width: 720px!important; margin: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #operationalActivityCenter .oac-page-meta {
    display: flex!important; flex-wrap: wrap!important; gap: 8px 18px!important; margin-top: 14px!important;
    color: var(--sppk-theme-muted)!important;
}
html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #operationalActivityCenter .oac-page-meta span { display: inline-flex!important; align-items: center!important; gap: 7px!important; color: inherit!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #operationalActivityCenter .oac-page-meta i { color: inherit!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #operationalActivityCenter :is(.oac-button, .oac-detail-button) {
    display: inline-flex!important; align-items: center!important; justify-content: center!important; gap: 8px!important;
    min-height: 38px!important; padding: 8px 13px!important;
    border: 1px solid var(--sppk-theme-line)!important; border-radius: 9px!important;
    background: var(--sppk-theme-surface)!important; color: var(--sppk-theme-copy)!important;
    -webkit-text-fill-color: currentColor!important; box-shadow: none!important;
    cursor: pointer!important; white-space: normal!important;
}
html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #operationalActivityCenter .oac-audit-link { flex: 0 0 auto!important; align-self: flex-start!important; margin: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #operationalActivityCenter :is(.oac-button, .oac-detail-button):is(:hover, :focus-visible) {
    background: var(--sppk-theme-surface-soft)!important; color: var(--sppk-theme-heading)!important;
}
html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #operationalActivityCenter .oac-button-primary {
    border-color: var(--sppk-theme-heading)!important; background: var(--sppk-theme-heading)!important;
    color: var(--sppk-theme-surface)!important; -webkit-text-fill-color: currentColor!important;
}
html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #operationalActivityCenter .oac-button-primary:is(:hover, :focus-visible) {
    background: var(--sppk-theme-text)!important; color: var(--sppk-theme-surface)!important;
}
html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #operationalActivityCenter .oac-kpis {
    display: grid!important; grid-template-columns: repeat(4, minmax(0, 1fr))!important;
    gap: 0!important; margin: 0 0 24px!important; overflow: hidden!important;
    border: 1px solid var(--sppk-theme-line)!important; border-radius: 12px!important;
    background: var(--sppk-theme-surface)!important;
}
html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #operationalActivityCenter .oac-kpis article {
    display: flex!important; align-items: flex-start!important; gap: 12px!important; min-width: 0!important;
    margin: 0!important; padding: 18px 16px!important; border: 0!important;
    border-right: 1px solid var(--sppk-theme-line)!important; border-radius: 0!important;
    background: transparent!important; box-shadow: none!important;
}
html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #operationalActivityCenter .oac-kpis article:last-child { border-right: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #operationalActivityCenter .oac-kpis article > i {
    display: grid!important; place-items: center!important; flex: 0 0 30px!important;
    width: 30px!important; height: 30px!important; margin: 0!important; border: 0!important; border-radius: 8px!important;
    background: var(--sppk-theme-surface-soft)!important; color: var(--sppk-theme-copy)!important;
    -webkit-text-fill-color: currentColor!important; box-shadow: none!important;
}
html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #operationalActivityCenter .oac-kpis article > div { min-width: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #operationalActivityCenter .oac-kpis :is(small, span) { display: block!important; color: var(--sppk-theme-muted)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #operationalActivityCenter .oac-kpis strong { display: block!important; margin: 5px 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #operationalActivityCenter .oac-kpis .is-attention strong { color: var(--oac-risk-ink)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #operationalActivityCenter :is(.oac-filter, .oac-panel) {
    min-width: 0!important; padding: 20px!important; border: 1px solid var(--sppk-theme-line)!important;
    border-radius: 12px!important; background: var(--sppk-theme-surface)!important; box-shadow: none!important;
}
html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #operationalActivityCenter .oac-filter { margin: 0 0 16px!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #operationalActivityCenter .oac-filter > header { display: flex!important; align-items: flex-start!important; gap: 12px!important; margin: 0 0 18px!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #operationalActivityCenter :is(h2, h3) { margin: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #operationalActivityCenter :is(.oac-filter header p, .oac-head p) { margin: 5px 0 0!important; color: var(--sppk-theme-muted)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #operationalActivityCenter .oac-filter form { display: grid!important; grid-template-columns: repeat(4, minmax(0, 1fr))!important; align-items: end!important; gap: 16px!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #operationalActivityCenter .oac-filter label { display: block!important; min-width: 0!important; margin: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #operationalActivityCenter .oac-filter label > span { display: block!important; margin-bottom: 7px!important; color: var(--sppk-theme-copy)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #operationalActivityCenter .oac-filter :is(input:not([type="hidden"]), select) {
    display: block!important; width: 100%!important; min-width: 0!important; max-width: 100%!important; height: 42px!important;
    margin: 0!important; padding: 8px 11px!important; border: 1px solid var(--sppk-theme-line)!important;
    border-radius: 8px!important; background: var(--sppk-theme-surface)!important;
    color: var(--sppk-theme-text)!important; -webkit-text-fill-color: currentColor!important;
    box-shadow: none!important; color-scheme: inherit!important;
}
html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #operationalActivityCenter .oac-filter input::placeholder { color: var(--sppk-theme-muted)!important; -webkit-text-fill-color: currentColor!important; opacity: 1!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #operationalActivityCenter .oac-filter .wide { grid-column: span 2!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #operationalActivityCenter .oac-filter-actions { grid-column: span 2!important; display: flex!important; justify-content: flex-end!important; align-items: center!important; flex-wrap: wrap!important; gap: 8px!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #operationalActivityCenter .oac-modules { display: flex!important; flex-wrap: wrap!important; gap: 6px!important; margin: 0 0 24px!important; padding: 0 0 16px!important; border-bottom: 1px solid var(--sppk-theme-line)!important; overflow: visible!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #operationalActivityCenter .oac-modules a {
    display: inline-flex!important; align-items: center!important; gap: 7px!important; min-width: 0!important; min-height: 36px!important;
    max-width: 100%!important; padding: 7px 11px!important; border: 1px solid transparent!important; border-radius: 8px!important;
    background: transparent!important; color: var(--sppk-theme-copy)!important; -webkit-text-fill-color: currentColor!important;
    white-space: normal!important; overflow-wrap: anywhere!important;
}
html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #operationalActivityCenter .oac-modules a:is(:hover, :focus-visible), html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #operationalActivityCenter .oac-modules a.active {
    border-color: var(--sppk-theme-line)!important; background: var(--sppk-theme-surface-soft)!important;
    color: var(--sppk-theme-heading)!important; -webkit-text-fill-color: currentColor!important;
}
html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #operationalActivityCenter .oac-grid { display: grid!important; grid-template-columns: minmax(0, 1fr) 290px!important; align-items: start!important; gap: 28px!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #operationalActivityCenter .oac-timeline { padding: 0!important; border: 0!important; border-radius: 0!important; background: transparent!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #operationalActivityCenter .oac-head { display: flex!important; align-items: flex-start!important; justify-content: space-between!important; flex-wrap: wrap!important; gap: 12px!important; margin: 0 0 18px!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #operationalActivityCenter .oac-head > div { min-width: 0!important; flex: 1 1 180px!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #operationalActivityCenter .oac-result-count { flex: 0 0 auto!important; padding: 4px 8px!important; border-radius: 6px!important; background: var(--sppk-theme-surface-soft)!important; color: var(--sppk-theme-muted)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #operationalActivityCenter .oac-days { display: grid!important; gap: 26px!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #operationalActivityCenter .oac-day { min-width: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #operationalActivityCenter .oac-day > header { display: flex!important; justify-content: space-between!important; align-items: center!important; flex-wrap: wrap!important; gap: 8px!important; margin: 0!important; padding: 0 0 11px!important; border-bottom: 1px solid var(--sppk-theme-line)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #operationalActivityCenter .oac-day > header time { color: var(--sppk-theme-heading)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #operationalActivityCenter .oac-day > header span { color: var(--sppk-theme-muted)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #operationalActivityCenter .oac-record {
    display: grid!important; grid-template-columns: 32px minmax(0, 1fr) 32px!important; align-items: start!important;
    gap: 12px!important; min-width: 0!important; margin: 0!important; padding: 18px 0!important;
    border: 0!important; border-bottom: 1px solid var(--sppk-theme-line-soft)!important; border-radius: 0!important;
    background: transparent!important; box-shadow: none!important;
}
html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #operationalActivityCenter .oac-record:last-child { border-bottom: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #operationalActivityCenter .oac-icon {
    display: grid!important; place-items: center!important; width: 32px!important; height: 32px!important; border-radius: 8px!important;
    background: var(--sppk-theme-surface-soft)!important; color: var(--sppk-theme-copy)!important;
    -webkit-text-fill-color: currentColor!important; box-shadow: none!important;
}
html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #operationalActivityCenter .oac-record-copy { min-width: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #operationalActivityCenter .oac-meta { display: flex!important; flex-wrap: wrap!important; align-items: center!important; gap: 6px 9px!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #operationalActivityCenter .oac-meta > span { color: var(--sppk-theme-muted)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #operationalActivityCenter .oac-meta b { padding: 2px 7px!important; border-radius: 5px!important; background: var(--oac-risk-bg)!important; color: var(--oac-risk-ink)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #operationalActivityCenter .oac-record h3 { margin: 5px 0 8px!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #operationalActivityCenter .facts { display: flex!important; flex-wrap: wrap!important; gap: 5px 14px!important; margin: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #operationalActivityCenter .facts span { min-width: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #operationalActivityCenter .facts i { margin-right: 5px!important; color: var(--sppk-theme-muted)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #operationalActivityCenter .oac-record blockquote { margin: 12px 0 0!important; padding: 10px 12px!important; border: 0!important; border-left: 2px solid var(--sppk-theme-line)!important; border-radius: 0 6px 6px 0!important; background: var(--sppk-theme-surface-soft)!important; color: var(--sppk-theme-copy)!important; -webkit-text-fill-color: currentColor!important; overflow-wrap: anywhere!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #operationalActivityCenter .oac-record blockquote span { display: block!important; margin-bottom: 4px!important; color: var(--sppk-theme-muted)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #operationalActivityCenter .no-note { margin: 10px 0 0!important; color: var(--sppk-theme-muted)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #operationalActivityCenter .oac-detail-button { min-height: 32px!important; width: 32px!important; height: 32px!important; padding: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #operationalActivityCenter .oac-empty { display: flex!important; flex-direction: column!important; align-items: center!important; justify-content: center!important; gap: 12px!important; min-height: 260px!important; padding: 30px 20px!important; text-align: center!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #operationalActivityCenter .oac-empty > i { color: var(--sppk-theme-muted)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #operationalActivityCenter .oac-empty p { max-width: 380px!important; margin: 0 0 4px!important; color: var(--sppk-theme-muted)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #operationalActivityCenter .oac-side { display: grid!important; align-content: start!important; gap: 18px!important; min-width: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #operationalActivityCenter .oac-side .oac-head { margin-bottom: 12px!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #operationalActivityCenter .oac-side > article > p { margin: 0 0 14px!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #operationalActivityCenter .oac-side dl { margin: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #operationalActivityCenter .oac-side dl > div { display: flex!important; justify-content: space-between!important; align-items: baseline!important; gap: 12px!important; padding: 10px 0!important; border-bottom: 1px solid var(--sppk-theme-line-soft)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #operationalActivityCenter .oac-side :is(dt, dd) { margin: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #operationalActivityCenter .oac-side dd { color: var(--sppk-theme-heading)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #operationalActivityCenter .oac-side dd.red { color: var(--oac-risk-ink)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #operationalActivityCenter .advice { display: flex!important; align-items: flex-start!important; gap: 8px!important; margin-top: 14px!important; padding: 11px!important; border: 1px solid var(--sppk-theme-line)!important; border-radius: 8px!important; background: var(--sppk-theme-surface-soft)!important; color: var(--sppk-theme-copy)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #operationalActivityCenter .advice > span { min-width: 0!important; color: inherit!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #operationalActivityCenter .advice > i { flex: 0 0 auto!important; color: var(--oac-risk-ink)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #operationalActivityCenter .advice.safe > i { color: var(--sppk-theme-link)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #operationalActivityCenter .people { display: grid!important; gap: 3px!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #operationalActivityCenter .people a { display: grid!important; grid-template-columns: 28px minmax(0, 1fr) 14px!important; align-items: center!important; gap: 9px!important; padding: 9px 0!important; border: 0!important; border-radius: 6px!important; background: transparent!important; color: var(--sppk-theme-copy)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #operationalActivityCenter .people a:is(:hover, :focus-visible) { background: var(--sppk-theme-surface-soft)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #operationalActivityCenter .people a > span { display: grid!important; place-items: center!important; width: 28px!important; height: 28px!important; border-radius: 7px!important; background: var(--sppk-theme-surface-soft)!important; color: var(--sppk-theme-copy)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #operationalActivityCenter .people strong { min-width: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #operationalActivityCenter .people a > i { color: var(--sppk-theme-muted)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #operationalActivityCenter .audit { margin-top: 28px!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #operationalActivityCenter .oac-admin-label { display: inline-flex!important; align-items: center!important; gap: 7px!important; color: var(--sppk-theme-muted)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #operationalActivityCenter .audit-grid { display: grid!important; grid-template-columns: minmax(0, 1fr)!important; gap: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #operationalActivityCenter .audit-grid article { display: grid!important; grid-template-columns: 20px minmax(0, 1fr) auto!important; align-items: start!important; gap: 12px!important; padding: 13px 0!important; border: 0!important; border-bottom: 1px solid var(--sppk-theme-line-soft)!important; border-radius: 0!important; background: transparent!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #operationalActivityCenter .audit-grid article:last-child { border-bottom: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #operationalActivityCenter .audit-grid article > div { min-width: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #operationalActivityCenter .audit-grid article > i { color: var(--sppk-theme-muted)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #operationalActivityCenter .audit-grid p { margin: 4px 0 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #operationalActivityCenter .audit-grid time { color: var(--sppk-theme-muted)!important; -webkit-text-fill-color: currentColor!important; white-space: nowrap!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #operationalActivityCenter .oac-muted { color: var(--sppk-theme-muted)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #operationalActivityCenter :is(a, button, input:not([type="hidden"]), select):focus-visible, html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #activityDetailModal .btn-close:focus-visible { outline: 2px solid var(--sppk-theme-link)!important; outline-offset: 3px!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #activityDetailModal .modal-dialog { width: calc(100% - 32px)!important; max-width: 680px!important; margin-right: auto!important; margin-left: auto!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #activityDetailModal .oac-modal { overflow: hidden!important; border: 1px solid var(--sppk-theme-line)!important; border-radius: 14px!important; background: var(--sppk-theme-surface)!important; color: var(--sppk-theme-copy)!important; box-shadow: var(--sppk-theme-shadow)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #activityDetailModal .modal-header { display: flex!important; align-items: flex-start!important; justify-content: space-between!important; gap: 18px!important; padding: 20px 22px!important; border-bottom: 1px solid var(--sppk-theme-line)!important; background: var(--sppk-theme-surface-soft)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #activityDetailModal .modal-header > div { min-width: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #activityDetailModal #detailModule { display: block!important; margin-bottom: 6px!important; color: var(--sppk-theme-muted)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #activityDetailModal #detailTitle { margin: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #activityDetailModal .btn-close { flex: 0 0 auto!important; margin: 0!important; background-color: transparent!important; filter: none!important; opacity: 1!important; box-shadow: none!important; }
html body#sppkAppShell.dark.sppk-route-activity_center #activityDetailModal .btn-close { filter: invert(.85)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #activityDetailModal .modal-body { padding: 22px!important; background: var(--sppk-theme-surface)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #activityDetailModal .modal-body dl { display: grid!important; grid-template-columns: repeat(2, minmax(0, 1fr))!important; gap: 18px 22px!important; margin: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #activityDetailModal .modal-body dl > div { min-width: 0!important; padding: 0 0 12px!important; border: 0!important; border-bottom: 1px solid var(--sppk-theme-line-soft)!important; border-radius: 0!important; background: transparent!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #activityDetailModal .modal-body dl > div.wide { grid-column: 1 / -1!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #activityDetailModal dt { margin: 0 0 5px!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #activityDetailModal dd { margin: 0!important; white-space: pre-wrap!important; overflow-wrap: anywhere!important; }
@media (max-width: 1199.98px) {
    html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #operationalActivityCenter .oac-grid { grid-template-columns: minmax(0, 1fr)!important; gap: 24px!important; }
    html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #operationalActivityCenter .oac-side { grid-template-columns: repeat(2, minmax(0, 1fr))!important; }
    html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #operationalActivityCenter .oac-filter form { grid-template-columns: repeat(2, minmax(0, 1fr))!important; }
    html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #operationalActivityCenter .oac-filter .wide { grid-column: auto!important; }
    html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #operationalActivityCenter .oac-filter-actions { grid-column: auto!important; }
}
@media (max-width: 899.98px) {
    html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #operationalActivityCenter .oac-kpis { grid-template-columns: repeat(2, minmax(0, 1fr))!important; }
    html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #operationalActivityCenter .oac-kpis article { border-bottom: 1px solid var(--sppk-theme-line)!important; }
    html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #operationalActivityCenter .oac-kpis article:nth-child(2n) { border-right: 0!important; }
    html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #operationalActivityCenter .oac-kpis article:nth-last-child(-n/**/+2) { border-bottom: 0!important; }
}
@media (max-width: 575.98px) {
    html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #operationalActivityCenter .oac-page-header { flex-direction: column!important; gap: 16px!important; }
    html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #operationalActivityCenter .oac-kpis article { gap: 8px!important; padding: 15px 12px!important; }
    html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #operationalActivityCenter .oac-kpis article > i { display: none!important; }
    html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #operationalActivityCenter :is(.oac-filter, .oac-panel) { padding: 16px!important; }
    html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #operationalActivityCenter .oac-timeline { padding: 0!important; }
    html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #operationalActivityCenter .oac-filter form { grid-template-columns: minmax(0, 1fr)!important; gap: 14px!important; }
    html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #operationalActivityCenter .oac-filter-actions { justify-content: flex-end!important; }
    html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #operationalActivityCenter .oac-side { grid-template-columns: minmax(0, 1fr)!important; }
    html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #operationalActivityCenter .oac-record { grid-template-columns: 28px minmax(0, 1fr) 30px!important; gap: 9px!important; }
    html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #operationalActivityCenter .oac-icon { width: 28px!important; height: 28px!important; }
    html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #operationalActivityCenter .oac-detail-button { width: 30px!important; height: 30px!important; min-height: 30px!important; }
    html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #operationalActivityCenter .facts { flex-direction: column!important; }
    html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #operationalActivityCenter .audit-grid article { grid-template-columns: 20px minmax(0, 1fr)!important; }
    html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #operationalActivityCenter .audit-grid time { grid-column: 2!important; white-space: normal!important; }
    html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #activityDetailModal .modal-dialog { width: calc(100% - 20px)!important; }
    html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #activityDetailModal :is(.modal-header, .modal-body) { padding: 18px!important; }
    html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #activityDetailModal .modal-body dl { grid-template-columns: minmax(0, 1fr)!important; }
}
}

/* Keep the shared font family and establish a compact page hierarchy. */
@layer sppk-typography {
html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #sppkPageContent #operationalActivityCenter #oacPageTitle { font-size: 1.5rem!important; line-height: 1.3!important; font-weight: 600!important; letter-spacing: -.025em!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #sppkPageContent #operationalActivityCenter :is(h2, h3), html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #activityDetailModal .oac-modal #detailTitle { font-size: 1rem!important; line-height: 1.4!important; font-weight: 600!important; letter-spacing: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #sppkPageContent #operationalActivityCenter .oac-kpis strong { font-size: 1.5rem!important; line-height: 1.2!important; font-weight: 600!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #sppkPageContent #operationalActivityCenter :is(.oac-page-meta, .oac-kpis small, .oac-kpis span, .oac-filter header p, .oac-head p, .oac-result-count, .oac-day > header, .oac-meta, .oac-meta b, .facts, .facts span, .no-note, .oac-record blockquote span, .oac-admin-label, .audit-grid time), html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #activityDetailModal #detailModule { font-size: .75rem!important; line-height: 1.5!important; font-weight: 400!important; text-transform: none!important; letter-spacing: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #sppkPageContent #operationalActivityCenter :is(.oac-meta b, .oac-day > header time) { font-weight: 500!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #sppkPageContent #operationalActivityCenter :is(.oac-record blockquote, .advice, .advice span, .people strong, .oac-side dt, .oac-side dd, .audit-grid strong, .audit-grid p), html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #activityDetailModal :is(dt, dd) { font-size: .875rem!important; line-height: 1.55!important; font-weight: 400!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #sppkPageContent #operationalActivityCenter :is(.people strong, .oac-side dd, .audit-grid strong) { font-weight: 500!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-activity_center #sppkPageContent #operationalActivityCenter .oac-empty > i { font-size: 1.75rem!important; }
}

/* UPLOAD KML V56 — CLEAN DATA WORKSPACE */
@layer sppk-kml-layout {
html body#sppkAppShell.sppk-app-shell.sppk-route-upload_kml #kmlWorkspace {
    --kml-danger: #a3243d!important;
    --kml-danger-soft: #fff1f3!important;
    width: 100%!important; max-width: 1240px!important; min-width: 0!important;
    margin: 0 auto!important; padding: 4px 0 32px!important;
    color: var(--sppk-theme-copy)!important; background: transparent!important; box-shadow: none!important;
}
html body#sppkAppShell.sppk-app-shell.dark.sppk-route-upload_kml #kmlWorkspace {
    --kml-danger: #e2a0ad!important; --kml-danger-soft: #32262b!important;
    color-scheme: dark!important;
}
html body#sppkAppShell.sppk-app-shell.sppk-route-upload_kml #kmlWorkspace * { box-sizing: border-box!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-upload_kml #kmlWorkspace :is(h1, h2, h3, dt, dd, strong) {
    color: var(--sppk-theme-heading)!important; -webkit-text-fill-color: currentColor!important;
    text-shadow: none!important; overflow-wrap: anywhere!important;
}
html body#sppkAppShell.sppk-app-shell.sppk-route-upload_kml #kmlWorkspace :is(p, label, td, th, time) {
    color: var(--sppk-theme-copy)!important; -webkit-text-fill-color: currentColor!important;
    text-shadow: none!important;
}
html body#sppkAppShell.sppk-app-shell.sppk-route-upload_kml #kmlWorkspace :is(button, i, span) { -webkit-text-fill-color: currentColor!important; text-shadow: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-upload_kml #kmlWorkspace .kml-page-heading {
    display: flex!important; align-items: flex-start!important; justify-content: space-between!important;
    flex-wrap: wrap!important; gap: 14px 24px!important; margin: 0 0 24px!important; padding: 0!important;
    border: 0!important; border-radius: 0!important; background: transparent!important; background-image: none!important; box-shadow: none!important;
}
html body#sppkAppShell.sppk-app-shell.sppk-route-upload_kml #kmlWorkspace .kml-page-heading > div { min-width: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-upload_kml #kmlWorkspace .kml-page-heading h1 { margin: 0 0 8px!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-upload_kml #kmlWorkspace .kml-page-heading p { margin: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-upload_kml #kmlWorkspace .kml-page-meta {
    display: inline-flex!important; align-items: center!important; gap: 7px!important;
    padding-top: 5px!important; color: var(--sppk-theme-muted)!important;
}
html body#sppkAppShell.sppk-app-shell.sppk-route-upload_kml #kmlWorkspace .kml-page-meta i { color: inherit!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-upload_kml #kmlWorkspace .kml-summary {
    display: grid!important; grid-template-columns: repeat(4, minmax(0, 1fr))!important;
    gap: 0!important; margin: 0 0 28px!important; padding: 0!important;
    overflow: hidden!important; border: 1px solid var(--sppk-theme-line)!important;
    border-radius: 12px!important; background: var(--sppk-theme-surface)!important; box-shadow: none!important;
}
html body#sppkAppShell.sppk-app-shell.sppk-route-upload_kml #kmlWorkspace .kml-summary > div {
    min-width: 0!important; padding: 17px 20px!important;
    border: 0!important; border-right: 1px solid var(--sppk-theme-line)!important; background: transparent!important;
}
html body#sppkAppShell.sppk-app-shell.sppk-route-upload_kml #kmlWorkspace .kml-summary > div:last-child { border-right: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-upload_kml #kmlWorkspace .kml-summary dt { margin: 0 0 6px!important; color: var(--sppk-theme-muted)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-upload_kml #kmlWorkspace .kml-summary dd { margin: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-upload_kml #kmlWorkspace .kml-summary small { color: var(--sppk-theme-muted)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-upload_kml #kmlWorkspace .kml-upload-layout {
    display: grid!important; grid-template-columns: minmax(0, 1fr) 280px!important;
    gap: 28px!important; align-items: start!important; margin: 0 0 30px!important;
}
html body#sppkAppShell.sppk-app-shell.sppk-route-upload_kml #kmlWorkspace .kml-panel {
    min-width: 0!important; padding: 22px!important; border: 1px solid var(--sppk-theme-line)!important;
    border-radius: 12px!important; background: var(--sppk-theme-surface)!important; box-shadow: none!important;
}
html body#sppkAppShell.sppk-app-shell.sppk-route-upload_kml #kmlWorkspace .kml-section-heading { margin: 0 0 20px!important; padding: 0!important; border: 0!important; background: transparent!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-upload_kml #kmlWorkspace :is(h2, h3) { margin: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-upload_kml #kmlWorkspace .kml-section-heading p { margin: 6px 0 0!important; color: var(--sppk-theme-muted)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-upload_kml #kmlWorkspace .kml-upload-form { margin: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-upload_kml #kmlWorkspace .kml-fields {
    display: grid!important; grid-template-columns: repeat(3, minmax(0, 1fr))!important; gap: 16px!important;
}
html body#sppkAppShell.sppk-app-shell.sppk-route-upload_kml #kmlWorkspace .kml-field { min-width: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-upload_kml #kmlWorkspace label { display: block!important; margin: 0 0 8px!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-upload_kml #kmlWorkspace :is(input:not([type="hidden"]), select) {
    display: block!important; width: 100%!important; max-width: 100%!important; min-width: 0!important; height: 42px!important;
    margin: 0!important; padding: 8px 10px!important; border: 1px solid var(--sppk-theme-line)!important;
    border-radius: 8px!important; background: var(--sppk-theme-surface)!important; background-image: none!important;
    color: var(--sppk-theme-text)!important; -webkit-text-fill-color: currentColor!important;
    box-shadow: none!important; color-scheme: light!important;
}
html body#sppkAppShell.sppk-app-shell.dark.sppk-route-upload_kml #kmlWorkspace :is(input:not([type="hidden"]), select) { color-scheme: dark!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-upload_kml #kmlWorkspace select option { background: var(--sppk-theme-surface)!important; color: var(--sppk-theme-text)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-upload_kml #kmlWorkspace .kml-file-field { margin-top: 20px!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-upload_kml #kmlWorkspace .kml-file-picker {
    display: grid!important; grid-template-columns: 32px minmax(0, 1fr)!important; align-items: start!important; gap: 12px!important;
    padding: 16px!important; border: 1px solid var(--sppk-theme-line)!important; border-radius: 9px!important;
    background: var(--sppk-theme-surface-soft)!important;
}
html body#sppkAppShell.sppk-app-shell.sppk-route-upload_kml #kmlWorkspace .kml-file-picker > div { min-width: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-upload_kml #kmlWorkspace .kml-file-icon { display: grid!important; place-items: center!important; width: 32px!important; height: 32px!important; color: var(--sppk-theme-muted)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-upload_kml #kmlWorkspace .kml-file-icon i { color: inherit!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-upload_kml #kmlWorkspace .kml-file-picker p { margin: 0 0 10px!important; overflow-wrap: anywhere!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-upload_kml #kmlWorkspace input[type="file"] {
    height: auto!important; min-height: 38px!important; padding: 0!important; border: 0!important; border-radius: 6px!important;
    background: transparent!important; color: var(--sppk-theme-copy)!important;
}
html body#sppkAppShell.sppk-app-shell.sppk-route-upload_kml #kmlWorkspace input[type="file"]::file-selector-button {
    min-height: 38px!important; margin: 0 10px 0 0!important; padding: 7px 11px!important;
    border: 1px solid var(--sppk-theme-line)!important; border-radius: 7px!important;
    background: var(--sppk-theme-surface)!important; color: var(--sppk-theme-heading)!important;
    -webkit-text-fill-color: currentColor!important; font: inherit!important; cursor: pointer!important;
}
html body#sppkAppShell.sppk-app-shell.sppk-route-upload_kml #kmlWorkspace input[type="file"]:hover::file-selector-button { background: var(--sppk-theme-surface-raised)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-upload_kml #kmlWorkspace .kml-form-actions {
    display: flex!important; justify-content: flex-end!important; gap: 10px!important; margin-top: 20px!important;
    padding-top: 18px!important; border-top: 1px solid var(--sppk-theme-line-soft)!important;
}
html body#sppkAppShell.sppk-app-shell.sppk-route-upload_kml #kmlWorkspace .kml-button {
    display: inline-flex!important; align-items: center!important; justify-content: center!important; gap: 7px!important;
    min-height: 38px!important; margin: 0!important; padding: 8px 12px!important;
    border: 1px solid var(--sppk-theme-line)!important; border-radius: 8px!important;
    background: var(--sppk-theme-surface)!important; color: var(--sppk-theme-copy)!important;
    box-shadow: none!important; cursor: pointer!important; text-decoration: none!important; white-space: nowrap!important;
}
html body#sppkAppShell.sppk-app-shell.sppk-route-upload_kml #kmlWorkspace .kml-button :is(i, span) { color: inherit!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-upload_kml #kmlWorkspace .kml-button:is(:hover, :focus-visible) { background: var(--sppk-theme-surface-soft)!important; color: var(--sppk-theme-heading)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-upload_kml #kmlWorkspace .kml-button-primary {
    border-color: var(--sppk-theme-heading)!important; background: var(--sppk-theme-heading)!important;
    color: var(--sppk-theme-surface)!important; -webkit-text-fill-color: currentColor!important;
}
html body#sppkAppShell.sppk-app-shell.sppk-route-upload_kml #kmlWorkspace .kml-button-primary:is(:hover, :focus-visible) { background: var(--sppk-theme-text)!important; color: var(--sppk-theme-surface)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-upload_kml #kmlWorkspace .kml-delete-button { border-color: transparent!important; color: var(--kml-danger)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-upload_kml #kmlWorkspace .kml-delete-button:is(:hover, :focus-visible) { background: var(--kml-danger-soft)!important; color: var(--kml-danger)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-upload_kml #kmlWorkspace button:disabled { opacity: .65!important; cursor: wait!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-upload_kml #kmlWorkspace :is(button, input, select, .kml-table-scroll):focus-visible {
    outline: 2px solid var(--sppk-theme-muted)!important; outline-offset: 3px!important; box-shadow: none!important;
}
html body#sppkAppShell.sppk-app-shell.sppk-route-upload_kml #kmlWorkspace .kml-guide { min-width: 0!important; padding: 5px 0 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-upload_kml #kmlWorkspace .kml-guide ol { margin: 20px 0 0!important; padding-left: 22px!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-upload_kml #kmlWorkspace .kml-guide li { margin: 0 0 18px!important; padding-left: 6px!important; color: var(--sppk-theme-muted)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-upload_kml #kmlWorkspace .kml-guide li strong { display: block!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-upload_kml #kmlWorkspace .kml-guide li p { margin: 5px 0 0!important; color: var(--sppk-theme-muted)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-upload_kml #kmlWorkspace .kml-guide-note {
    display: flex!important; align-items: flex-start!important; gap: 8px!important;
    margin: 6px 0 0!important; padding: 14px 0 0!important; border-top: 1px solid var(--sppk-theme-line)!important;
    color: var(--sppk-theme-muted)!important;
}
html body#sppkAppShell.sppk-app-shell.sppk-route-upload_kml #kmlWorkspace .kml-guide-note :is(i, span) { color: inherit!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-upload_kml #kmlWorkspace .kml-guide-note span { min-width: 0!important; overflow-wrap: anywhere!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-upload_kml #kmlWorkspace .kml-guide-note i { flex: 0 0 auto!important; margin-top: 2px!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-upload_kml #kmlWorkspace .kml-datasets { min-width: 0!important; margin: 0!important; padding: 0!important; border: 0!important; border-radius: 0!important; background: transparent!important; box-shadow: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-upload_kml #kmlWorkspace .kml-dataset-heading { display: flex!important; align-items: flex-start!important; justify-content: space-between!important; gap: 16px!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-upload_kml #kmlWorkspace .kml-dataset-heading > div { min-width: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-upload_kml #kmlWorkspace .kml-count {
    flex: 0 0 auto!important; padding: 4px 8px!important; border-radius: 6px!important;
    background: var(--sppk-theme-surface-soft)!important; color: var(--sppk-theme-muted)!important;
}
html body#sppkAppShell.sppk-app-shell.sppk-route-upload_kml #kmlWorkspace .kml-table-scroll { max-width: 100%!important; overflow-x: auto!important; border-top: 1px solid var(--sppk-theme-line)!important; border-bottom: 1px solid var(--sppk-theme-line)!important; border-radius: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-upload_kml #kmlWorkspace .kml-table { width: 100%!important; min-width: 760px!important; table-layout: fixed!important; border-collapse: collapse!important; margin: 0!important; background: var(--sppk-theme-surface)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-upload_kml #kmlWorkspace .kml-table :is(th, td) { padding: 15px 12px!important; vertical-align: middle!important; border: 0!important; border-bottom: 1px solid var(--sppk-theme-line-soft)!important; background: var(--sppk-theme-surface)!important; box-shadow: none!important; text-align: left!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-upload_kml #kmlWorkspace .kml-table th { font-weight: 500!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-upload_kml #kmlWorkspace .kml-table thead th { background: var(--sppk-theme-surface-soft)!important; color: var(--sppk-theme-muted)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-upload_kml #kmlWorkspace .kml-table tbody tr:last-child > :is(th, td) { border-bottom: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-upload_kml #kmlWorkspace .kml-table tbody tr:hover > :is(th, td) { background: var(--sppk-theme-surface-soft)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-upload_kml #kmlWorkspace .kml-table thead th:first-child { width: auto!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-upload_kml #kmlWorkspace .kml-table thead th:nth-child(2) { width: 96px!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-upload_kml #kmlWorkspace .kml-table thead th:nth-child(3) { width: 140px!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-upload_kml #kmlWorkspace .kml-table thead th:nth-child(4) { width: 148px!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-upload_kml #kmlWorkspace .kml-table thead th:nth-child(5) { width: 228px!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-upload_kml #kmlWorkspace .kml-file-name { display: grid!important; grid-template-columns: 18px minmax(0, 1fr)!important; align-items: start!important; gap: 9px!important; min-width: 0!important; color: var(--sppk-theme-heading)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-upload_kml #kmlWorkspace .kml-file-name span { min-width: 0!important; overflow-wrap: anywhere!important; color: inherit!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-upload_kml #kmlWorkspace .kml-file-name i { color: var(--sppk-theme-muted)!important; margin-top: 2px!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-upload_kml #kmlWorkspace .kml-year { color: var(--sppk-theme-copy)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-upload_kml #kmlWorkspace .kml-layer { display: inline-block!important; max-width: 100%!important; padding: 4px 7px!important; border: 0!important; border-radius: 6px!important; background: var(--sppk-theme-surface-soft)!important; color: var(--sppk-theme-copy)!important; white-space: normal!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-upload_kml #kmlWorkspace .kml-upload-date time { color: var(--sppk-theme-muted)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-upload_kml #kmlWorkspace .kml-table .kml-action-column { text-align: right!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-upload_kml #kmlWorkspace .kml-row-actions { display: flex!important; align-items: center!important; justify-content: flex-end!important; gap: 7px!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-upload_kml #kmlWorkspace .kml-row-actions form { margin: 0!important; padding: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-upload_kml #kmlWorkspace .kml-empty { display: flex!important; align-items: center!important; justify-content: center!important; flex-direction: column!important; gap: 12px!important; min-height: 210px!important; padding: 28px 20px!important; border-top: 1px solid var(--sppk-theme-line)!important; text-align: center!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-upload_kml #kmlWorkspace .kml-empty > i { color: var(--sppk-theme-muted)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-upload_kml #kmlWorkspace .kml-empty p { max-width: 400px!important; margin: 0!important; color: var(--sppk-theme-muted)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-upload_kml #kmlWorkspace .kml-notice { display: flex!important; align-items: flex-start!important; gap: 10px!important; margin: 0 0 24px!important; padding: 14px 16px!important; border: 1px solid var(--sppk-theme-line)!important; border-radius: 9px!important; background: var(--sppk-theme-surface-soft)!important; color: var(--sppk-theme-copy)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-upload_kml #kmlWorkspace .kml-notice i { color: var(--sppk-theme-copy)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-upload_kml #kmlWorkspace .kml-notice p { margin: 5px 0 0!important; color: var(--sppk-theme-muted)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-upload_kml #kmlWorkspace .kml-sr-only { position: absolute!important; width: 1px!important; height: 1px!important; padding: 0!important; margin: -1px!important; overflow: hidden!important; clip: rect(0,0,0,0)!important; white-space: nowrap!important; border: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-upload_kml #sppkPageContent > :is(.parse-result, .alert) {
    max-width: 1240px!important; margin: 0 auto 20px!important; padding: 18px 20px!important;
    border: 1px solid var(--sppk-theme-line)!important; border-radius: 10px!important;
    background: var(--sppk-theme-surface-soft)!important; color: var(--sppk-theme-copy)!important; box-shadow: none!important;
    -webkit-text-fill-color: currentColor!important; overflow-wrap: anywhere!important;
}
html body#sppkAppShell.sppk-app-shell.sppk-route-upload_kml #sppkPageContent > :is(.parse-result, .alert) :is(h5, strong) { color: var(--sppk-theme-heading)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-upload_kml #sppkPageContent > :is(.parse-result, .alert) :is(p, i) { color: var(--sppk-theme-copy)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-upload_kml #sppkPageContent > :is(.parse-result, .alert) h5 { margin: 0 0 12px!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-upload_kml #sppkPageContent > :is(.parse-result, .alert) p { margin: 6px 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-upload_kml #sppkPageContent > :is(.parse-result, .alert) hr { border-color: var(--sppk-theme-line)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-upload_kml #sppkPageContent > :is(.parse-result, .alert) .petak-container { display: flex!important; flex-wrap: wrap!important; gap: 7px!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-upload_kml #sppkPageContent > :is(.parse-result, .alert) .petak-badge { padding: 4px 8px!important; border-radius: 6px!important; background: var(--sppk-theme-surface)!important; color: var(--sppk-theme-copy)!important; -webkit-text-fill-color: currentColor!important; }
@media (max-width: 1199.98px) {
    html body#sppkAppShell.sppk-app-shell.sppk-route-upload_kml #kmlWorkspace .kml-upload-layout { grid-template-columns: minmax(0, 1fr)!important; gap: 22px!important; }
    html body#sppkAppShell.sppk-app-shell.sppk-route-upload_kml #kmlWorkspace .kml-guide ol { display: grid!important; grid-template-columns: repeat(3, minmax(0, 1fr))!important; gap: 24px!important; }
    html body#sppkAppShell.sppk-app-shell.sppk-route-upload_kml #kmlWorkspace .kml-guide li { margin: 0!important; }
}
@media (max-width: 767.98px) {
    html body#sppkAppShell.sppk-app-shell.sppk-route-upload_kml #kmlWorkspace .kml-summary { grid-template-columns: repeat(2, minmax(0, 1fr))!important; }
    html body#sppkAppShell.sppk-app-shell.sppk-route-upload_kml #kmlWorkspace .kml-summary > div { padding: 15px 16px!important; }
    html body#sppkAppShell.sppk-app-shell.sppk-route-upload_kml #kmlWorkspace .kml-summary > div:nth-child(2) { border-right: 0!important; }
    html body#sppkAppShell.sppk-app-shell.sppk-route-upload_kml #kmlWorkspace .kml-summary > div:nth-child(-n/**/+2) { border-bottom: 1px solid var(--sppk-theme-line)!important; }
    html body#sppkAppShell.sppk-app-shell.sppk-route-upload_kml #kmlWorkspace .kml-panel { padding: 18px 16px!important; }
    html body#sppkAppShell.sppk-app-shell.sppk-route-upload_kml #kmlWorkspace .kml-fields { grid-template-columns: minmax(0, 1fr)!important; }
    html body#sppkAppShell.sppk-app-shell.sppk-route-upload_kml #kmlWorkspace .kml-guide ol { display: block!important; }
    html body#sppkAppShell.sppk-app-shell.sppk-route-upload_kml #kmlWorkspace .kml-guide li { margin-bottom: 16px!important; }
    html body#sppkAppShell.sppk-app-shell.sppk-route-upload_kml #kmlWorkspace .kml-file-picker { grid-template-columns: minmax(0, 1fr)!important; padding: 13px!important; gap: 8px!important; }
    html body#sppkAppShell.sppk-app-shell.sppk-route-upload_kml #kmlWorkspace .kml-file-icon { display: none!important; }
    html body#sppkAppShell.sppk-app-shell.sppk-route-upload_kml #kmlWorkspace .kml-dataset-heading { flex-wrap: wrap!important; gap: 10px!important; }
}
}
@layer sppk-typography {
html body#sppkAppShell.sppk-app-shell.sppk-route-upload_kml #sppkPageContent #kmlWorkspace { font-size: .875rem!important; line-height: 1.6!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-upload_kml #sppkPageContent #kmlWorkspace :is(p, label, input, select, button, td, th, .kml-guide li) { font-size: .875rem!important; line-height: 1.5!important; letter-spacing: normal!important; text-transform: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-upload_kml #sppkPageContent #kmlWorkspace h1 { font-size: 1.5rem!important; font-weight: 600!important; line-height: 1.3!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-upload_kml #sppkPageContent #kmlWorkspace :is(h2, h3) { font-size: 1rem!important; font-weight: 600!important; line-height: 1.4!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-upload_kml #sppkPageContent #kmlWorkspace .kml-summary dd { font-size: 1.5rem!important; font-weight: 600!important; line-height: 1.35!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-upload_kml #sppkPageContent #kmlWorkspace .kml-summary dt { font-size: .75rem!important; font-weight: 500!important; line-height: 1.5!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-upload_kml #sppkPageContent #kmlWorkspace :is(.kml-summary small, .kml-page-meta, .kml-count, .kml-layer, .kml-upload-date, .kml-upload-date time, .kml-guide-note) { font-size: .75rem!important; line-height: 1.5!important; font-weight: 400!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-upload_kml #sppkPageContent #kmlWorkspace :is(label, strong, button, .kml-filename-cell) { font-weight: 500!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-upload_kml #sppkPageContent #kmlWorkspace .kml-file-icon i, html body#sppkAppShell.sppk-app-shell.sppk-route-upload_kml #sppkPageContent #kmlWorkspace .kml-empty > i { font-size: 1.5rem!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-upload_kml #sppkPageContent > :is(.parse-result, .alert) :is(h5, strong, p, span) { font-size: .875rem!important; line-height: 1.5!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-upload_kml #sppkPageContent > :is(.parse-result, .alert) h5 { font-weight: 600!important; }
}

/* INFORMATION CENTER V57 — COMPACT FOLDERS AND QUIET WORKSPACE */
@layer sppk-info-layout {
html body#sppkAppShell.sppk-app-shell.sppk-route-pusat-informasi #informationHub, html body#sppkAppShell.sppk-app-shell.sppk-route-pusat-informasi #informationFolderModal {
    --info-risk: #a3243d!important; --info-risk-soft: #fff1f3!important;
    --info-open: #8b6118!important; --info-progress: #245e9b!important; --info-done: #286747!important;
    color: var(--sppk-theme-copy)!important;
}
html body#sppkAppShell.dark.sppk-route-pusat-informasi :is(#informationHub, #informationFolderModal) {
    --info-risk: #e2a0ad!important; --info-risk-soft: #32262b!important;
    --info-open: #e4bd79!important; --info-progress: #93bce8!important; --info-done: #79d9ae!important;
}
html body#sppkAppShell.sppk-app-shell.sppk-route-pusat-informasi #informationHub {
    display: grid!important; grid-template-columns: minmax(0, 1fr)!important; gap: 28px!important;
    width: 100%!important; max-width: 1240px!important; min-width: 0!important;
    margin: 0 auto!important; padding: 4px 0 32px!important;
    background: transparent!important; box-shadow: none!important;
}
html body#sppkAppShell.sppk-app-shell.sppk-route-pusat-informasi #informationHub *, html body#sppkAppShell.sppk-app-shell.sppk-route-pusat-informasi #informationFolderModal * { box-sizing: border-box!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-pusat-informasi #informationHub > *, html body#sppkAppShell.sppk-app-shell.sppk-route-pusat-informasi #informationHub .information-folder-section { min-width: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-pusat-informasi #informationHub :is(h1, h2, strong), html body#sppkAppShell.sppk-app-shell.sppk-route-pusat-informasi #informationFolderModal :is(h2, strong) {
    color: var(--sppk-theme-heading)!important; -webkit-text-fill-color: currentColor!important;
    text-shadow: none!important; overflow-wrap: anywhere!important;
}
html body#sppkAppShell.sppk-app-shell.sppk-route-pusat-informasi #informationHub :is(p, span, em, time), html body#sppkAppShell.sppk-app-shell.sppk-route-pusat-informasi #informationFolderModal :is(p, small, span, th, td) {
    color: var(--sppk-theme-copy)!important; -webkit-text-fill-color: currentColor!important; text-shadow: none!important;
}
html body#sppkAppShell.sppk-app-shell.sppk-route-pusat-informasi #informationHub i, html body#sppkAppShell.sppk-app-shell.sppk-route-pusat-informasi #informationFolderModal i { color: inherit!important; -webkit-text-fill-color: currentColor!important; text-shadow: none!important; filter: none!important; opacity: 1!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-pusat-informasi #informationHub .information-page-header {
    display: flex!important; align-items: flex-start!important; justify-content: space-between!important; flex-wrap: wrap!important;
    gap: 16px 28px!important; margin: 0!important; padding: 0!important;
}
html body#sppkAppShell.sppk-app-shell.sppk-route-pusat-informasi #informationHub .information-page-header > div { min-width: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-pusat-informasi #informationHub .information-page-header h1 { margin: 0 0 8px!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-pusat-informasi #informationHub .information-page-header p { max-width: 700px!important; margin: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-pusat-informasi #informationHub .information-page-meta { display: flex!important; flex-wrap: wrap!important; align-items: center!important; gap: 8px 16px!important; padding-top: 6px!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-pusat-informasi #informationHub .information-page-meta span { display: inline-flex!important; align-items: center!important; gap: 6px!important; color: var(--sppk-theme-muted)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-pusat-informasi #informationHub .information-section-heading {
    display: flex!important; align-items: flex-start!important; justify-content: space-between!important;
    gap: 16px!important; margin: 0 0 16px!important; padding: 0!important;
}
html body#sppkAppShell.sppk-app-shell.sppk-route-pusat-informasi #informationHub :is(h2, h3) { margin: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-pusat-informasi #informationHub .information-section-heading p { margin: 5px 0 0!important; color: var(--sppk-theme-muted)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-pusat-informasi #informationHub .information-result-count { flex: 0 0 auto!important; padding: 4px 8px!important; border-radius: 6px!important; background: var(--sppk-theme-surface-soft)!important; color: var(--sppk-theme-muted)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-pusat-informasi #informationHub .information-folders { display: grid!important; grid-template-columns: repeat(3, minmax(0, 1fr))!important; gap: 12px!important; margin: 0!important; padding: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-pusat-informasi #informationHub .information-folder {
    position: relative!important; display: grid!important; grid-template-columns: 22px minmax(0, 1fr) 12px!important;
    align-items: center!important; gap: 12px!important; width: 100%!important; min-width: 0!important; min-height: 94px!important;
    margin: 0!important; padding: 16px!important; border: 1px solid var(--sppk-theme-line)!important; border-radius: 10px!important;
    appearance: none!important; background: var(--sppk-theme-surface)!important; background-image: none!important;
    color: var(--sppk-theme-copy)!important; text-align: left!important; cursor: pointer!important;
    box-shadow: none!important; transform: none!important; transition: background-color .12s ease, border-color .12s ease!important;
}
html body#sppkAppShell.sppk-app-shell.sppk-route-pusat-informasi #informationHub .information-folder:is(:hover, :focus-visible) { background: var(--sppk-theme-surface-soft)!important; border-color: var(--sppk-theme-subtle)!important; box-shadow: none!important; transform: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-pusat-informasi #informationHub .folder-icon { display: grid!important; place-items: center!important; width: 22px!important; height: 22px!important; padding: 0!important; border: 0!important; border-radius: 0!important; background: transparent!important; color: var(--sppk-theme-copy)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-pusat-informasi #informationHub .folder-copy { display: block!important; min-width: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-pusat-informasi #informationHub .folder-copy strong { display: block!important; margin: 0 0 5px!important; overflow-wrap: anywhere!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-pusat-informasi #informationHub .folder-count { display: block!important; margin: 0!important; padding: 0!important; background: transparent!important; color: var(--sppk-theme-muted)!important; text-align: left!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-pusat-informasi #informationHub .folder-count b { color: inherit!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-pusat-informasi #informationHub .folder-arrow { position: static!important; width: 12px!important; height: auto!important; color: var(--sppk-theme-muted)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-pusat-informasi #informationHub .information-panels { display: grid!important; grid-template-columns: repeat(2, minmax(0, 1fr))!important; align-items: start!important; gap: 28px!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-pusat-informasi #informationHub .information-panel { min-width: 0!important; padding: 0!important; border: 0!important; border-radius: 0!important; background: transparent!important; box-shadow: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-pusat-informasi #informationHub .information-panel > header {
    display: flex!important; align-items: flex-start!important; justify-content: space-between!important; flex-wrap: wrap!important;
    gap: 10px!important; margin: 0!important; padding: 0 0 16px!important; border-bottom: 1px solid var(--sppk-theme-line)!important;
}
html body#sppkAppShell.sppk-app-shell.sppk-route-pusat-informasi #informationHub .information-panel > header > div { min-width: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-pusat-informasi #informationHub .information-panel > header h2 { margin: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-pusat-informasi #informationHub .information-panel > header p { margin: 5px 0 0!important; color: var(--sppk-theme-muted)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-pusat-informasi #informationHub .information-panel > header > b { display: block!important; padding: 4px 8px!important; border: 0!important; border-radius: 6px!important; background: var(--sppk-theme-surface-soft)!important; color: var(--sppk-theme-copy)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-pusat-informasi #informationHub .information-list { display: grid!important; gap: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-pusat-informasi #informationHub .information-list > div {
    display: grid!important; grid-template-columns: 28px minmax(0, 1fr) auto!important; align-items: start!important;
    gap: 10px!important; min-width: 0!important; padding: 15px 0!important; border: 0!important; border-bottom: 1px solid var(--sppk-theme-line-soft)!important;
}
html body#sppkAppShell.sppk-app-shell.sppk-route-pusat-informasi #informationHub .information-list > div:last-child { border-bottom: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-pusat-informasi #informationHub .list-icon { display: grid!important; place-items: center!important; width: 28px!important; height: 28px!important; border-radius: 7px!important; background: var(--sppk-theme-surface-soft)!important; color: var(--sppk-theme-copy)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-pusat-informasi #informationHub .list-icon.is-risk { background: var(--info-risk-soft)!important; color: var(--info-risk)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-pusat-informasi #informationHub .information-list p { min-width: 0!important; margin: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-pusat-informasi #informationHub .information-list :is(strong, em) { display: block!important; font-style: normal!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-pusat-informasi #informationHub .information-list em { margin-top: 4px!important; overflow: visible!important; overflow-wrap: anywhere!important; white-space: normal!important; color: var(--sppk-theme-muted)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-pusat-informasi #informationHub .information-list time { padding-top: 2px!important; color: var(--sppk-theme-muted)!important; white-space: nowrap!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-pusat-informasi #informationHub .information-empty { display: flex!important; flex-direction: column!important; align-items: center!important; justify-content: center!important; gap: 10px!important; min-height: 170px!important; padding: 24px 16px!important; text-align: center!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-pusat-informasi #informationHub .information-empty i { margin: 0!important; color: var(--sppk-theme-muted)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-pusat-informasi #informationHub .information-empty span { max-width: 390px!important; margin: 0!important; color: var(--sppk-theme-muted)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-pusat-informasi #informationHub .information-note { display: flex!important; align-items: flex-start!important; gap: 10px!important; margin: 0!important; padding: 14px 16px!important; border: 1px solid var(--sppk-theme-line)!important; border-radius: 9px!important; background: var(--sppk-theme-surface-soft)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-pusat-informasi #informationHub .information-note > i { flex: 0 0 auto!important; margin-top: 2px!important; color: var(--sppk-theme-muted)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-pusat-informasi #informationHub .information-note p { min-width: 0!important; margin: 0!important; overflow-wrap: anywhere!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-pusat-informasi #informationHub button:focus-visible, html body#sppkAppShell.sppk-app-shell.sppk-route-pusat-informasi #informationFolderModal :is(button, a, .table-responsive):focus-visible { outline: 2px solid var(--sppk-theme-muted)!important; outline-offset: 3px!important; box-shadow: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-pusat-informasi #informationHub .information-sr-only, html body#sppkAppShell.sppk-app-shell.sppk-route-pusat-informasi #informationFolderModal .information-sr-only { position: absolute!important; width: 1px!important; height: 1px!important; padding: 0!important; margin: -1px!important; overflow: hidden!important; clip: rect(0, 0, 0, 0)!important; white-space: nowrap!important; border: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-pusat-informasi #informationFolderModal > .modal-dialog { display: flex!important; align-items: center!important; width: calc(100% - 32px)!important; max-width: 1080px!important; height: calc(100% - 32px)!important; min-height: 0!important; margin: 16px auto!important; transform: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-pusat-informasi #informationFolderModal .modal-content { display: flex!important; flex-direction: column!important; width: 100%!important; min-width: 0!important; min-height: 0!important; max-height: 100%!important; overflow: hidden!important; border: 1px solid var(--sppk-theme-line)!important; border-radius: 14px!important; background: var(--sppk-theme-surface)!important; color: var(--sppk-theme-copy)!important; box-shadow: var(--sppk-theme-shadow)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-pusat-informasi #informationFolderModal :is(.information-modal-header, .information-modal-footer) { flex: 0 0 auto!important; padding: 18px 22px!important; border-color: var(--sppk-theme-line)!important; background: var(--sppk-theme-surface)!important; background-image: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-pusat-informasi #informationFolderModal .information-modal-header { display: flex!important; align-items: flex-start!important; justify-content: space-between!important; gap: 16px!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-pusat-informasi #informationFolderModal .information-modal-title-wrap { display: flex!important; align-items: flex-start!important; gap: 12px!important; min-width: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-pusat-informasi #informationFolderModal .information-modal-title-wrap > div { min-width: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-pusat-informasi #informationFolderModal .information-modal-icon { display: grid!important; place-items: center!important; flex: 0 0 32px!important; width: 32px!important; height: 32px!important; border: 0!important; border-radius: 8px!important; background: var(--sppk-theme-surface-soft)!important; color: var(--sppk-theme-copy)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-pusat-informasi #informationFolderModal .information-modal-title-wrap small { display: block!important; margin: 0 0 4px!important; color: var(--sppk-theme-muted)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-pusat-informasi #informationFolderModal .information-modal-title-wrap h2 { margin: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-pusat-informasi #informationFolderModal .information-modal-title-wrap p { margin: 7px 0 0!important; color: var(--sppk-theme-muted)!important; overflow-wrap: anywhere!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-pusat-informasi #informationFolderModal .information-modal-close { display: grid!important; place-items: center!important; flex: 0 0 32px!important; width: 32px!important; height: 32px!important; margin: 0!important; padding: 0!important; border: 0!important; border-radius: 7px!important; background: transparent!important; color: var(--sppk-theme-copy)!important; cursor: pointer!important; box-shadow: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-pusat-informasi #informationFolderModal .information-modal-close:is(:hover, :focus-visible) { background: var(--sppk-theme-surface-soft)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-pusat-informasi #informationFolderModal .modal-body { flex: 1 1 auto!important; min-width: 0!important; min-height: 0!important; max-width: 100%!important; padding: 0 22px 22px!important; overflow: auto!important; background: var(--sppk-theme-surface)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-pusat-informasi #informationFolderModal .information-table-shell { overflow: hidden!important; border: 0!important; border-radius: 0!important; background: var(--sppk-theme-surface)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-pusat-informasi #informationFolderModal .information-table-toolbar { display: flex!important; align-items: center!important; justify-content: space-between!important; flex-wrap: wrap!important; gap: 10px!important; margin: 0!important; padding: 15px 0!important; border: 0!important; background: transparent!important; color: var(--sppk-theme-copy)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-pusat-informasi #informationFolderModal .information-table-toolbar span { color: var(--sppk-theme-copy)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-pusat-informasi #informationFolderModal .information-table-toolbar span i { margin-right: 6px!important; color: inherit!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-pusat-informasi #informationFolderModal .information-table-toolbar b { padding: 4px 8px!important; border: 0!important; border-radius: 6px!important; background: var(--sppk-theme-surface-soft)!important; color: var(--sppk-theme-muted)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-pusat-informasi #informationFolderModal .table-responsive { max-width: 100%!important; overflow: auto!important; border: 0!important; border-top: 1px solid var(--sppk-theme-line)!important; border-bottom: 1px solid var(--sppk-theme-line)!important; border-radius: 0!important; background: var(--sppk-theme-surface)!important; box-shadow: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-pusat-informasi #informationFolderModal .information-popup-table { width: 100%!important; min-width: 720px!important; margin: 0!important; border-collapse: collapse!important; background: var(--sppk-theme-surface)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-pusat-informasi #informationFolderModal .information-popup-table th { padding: 12px 14px!important; border: 0!important; border-bottom: 1px solid var(--sppk-theme-line)!important; background: var(--sppk-theme-surface-soft)!important; color: var(--sppk-theme-copy)!important; text-align: left!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-pusat-informasi #informationFolderModal .information-popup-table td { max-width: 360px!important; padding: 14px!important; border: 0!important; border-bottom: 1px solid var(--sppk-theme-line-soft)!important; background: var(--sppk-theme-surface)!important; color: var(--sppk-theme-copy)!important; vertical-align: top!important; overflow-wrap: anywhere!important; white-space: normal!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-pusat-informasi #informationFolderModal .information-popup-table tbody tr:last-child td { border-bottom: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-pusat-informasi #informationFolderModal .information-popup-table tbody tr:hover td { background: var(--sppk-theme-surface-soft)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-pusat-informasi #informationFolderModal .information-popup-table td[data-status="open"] { color: var(--info-open)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-pusat-informasi #informationFolderModal .information-popup-table td[data-status="diproses"] { color: var(--info-progress)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-pusat-informasi #informationFolderModal .information-popup-table :is(td[data-status="selesai"], td[data-status="ditutup"]) { color: var(--info-done)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-pusat-informasi #informationFolderModal .information-popup-empty { display: flex!important; flex-direction: column!important; align-items: center!important; justify-content: center!important; gap: 10px!important; min-height: 230px!important; padding: 25px 20px!important; text-align: center!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-pusat-informasi #informationFolderModal .information-popup-empty > span { display: grid!important; place-items: center!important; width: 38px!important; height: 38px!important; margin: 0!important; border-radius: 9px!important; background: var(--sppk-theme-surface-soft)!important; color: var(--sppk-theme-muted)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-pusat-informasi #informationFolderModal .information-popup-empty p { max-width: 440px!important; margin: 0!important; color: var(--sppk-theme-muted)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-pusat-informasi #informationFolderModal .information-modal-footer { display: flex!important; justify-content: space-between!important; align-items: center!important; gap: 12px!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-pusat-informasi #informationFolderModal .information-modal-footer > span { min-width: 0!important; margin: 0!important; color: var(--sppk-theme-muted)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-pusat-informasi #informationFolderModal .information-source-link { display: inline-flex!important; align-items: center!important; justify-content: center!important; gap: 7px!important; min-height: 38px!important; margin: 0!important; padding: 8px 12px!important; border: 1px solid var(--sppk-theme-line)!important; border-radius: 8px!important; background: var(--sppk-theme-surface)!important; color: var(--sppk-theme-copy)!important; -webkit-text-fill-color: currentColor!important; text-decoration: none!important; white-space: normal!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-pusat-informasi #informationFolderModal .information-source-link:is(:hover, :focus-visible) { background: var(--sppk-theme-surface-soft)!important; color: var(--sppk-theme-heading)!important; }
@media (max-width: 1199.98px) { html body#sppkAppShell.sppk-app-shell.sppk-route-pusat-informasi #informationHub .information-folders { grid-template-columns: repeat(2, minmax(0, 1fr))!important; } }
@media (max-width: 767.98px) {
    html body#sppkAppShell.sppk-app-shell.sppk-route-pusat-informasi #informationHub .information-panels { grid-template-columns: minmax(0, 1fr)!important; gap: 24px!important; }
    html body#sppkAppShell.sppk-app-shell.sppk-route-pusat-informasi #informationHub .information-list > div { grid-template-columns: 28px minmax(0, 1fr)!important; }
    html body#sppkAppShell.sppk-app-shell.sppk-route-pusat-informasi #informationHub .information-list time { grid-column: 2!important; }
    html body#sppkAppShell.sppk-app-shell.sppk-route-pusat-informasi #informationFolderModal :is(.information-modal-header, .information-modal-footer) { padding: 16px!important; }
    html body#sppkAppShell.sppk-app-shell.sppk-route-pusat-informasi #informationFolderModal .modal-body { padding: 0 16px 16px!important; }
    html body#sppkAppShell.sppk-app-shell.sppk-route-pusat-informasi #informationFolderModal .information-modal-icon { display: none!important; }
    html body#sppkAppShell.sppk-app-shell.sppk-route-pusat-informasi #informationFolderModal .information-modal-footer { align-items: flex-start!important; flex-direction: column!important; }
    html body#sppkAppShell.sppk-app-shell.sppk-route-pusat-informasi #informationFolderModal .information-source-link { align-self: flex-end!important; }
}
@media (max-width: 575.98px) {
    html body#sppkAppShell.sppk-app-shell.sppk-route-pusat-informasi #informationHub .information-folders { grid-template-columns: minmax(0, 1fr)!important; gap: 10px!important; }
    html body#sppkAppShell.sppk-app-shell.sppk-route-pusat-informasi #informationHub .information-folder { min-height: 84px!important; padding: 14px!important; }
}
@media (prefers-reduced-motion: reduce) { html body#sppkAppShell.sppk-app-shell.sppk-route-pusat-informasi #informationHub .information-folder { transition: none!important; } }
}
@layer sppk-typography {
html body#sppkAppShell.sppk-app-shell.sppk-route-pusat-informasi #sppkPageContent #informationHub { font-size: .875rem!important; line-height: 1.6!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-pusat-informasi #sppkPageContent #informationHub :is(p, strong, em, button) { font-size: .875rem!important; line-height: 1.5!important; letter-spacing: normal!important; text-transform: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-pusat-informasi #sppkPageContent #informationHub h1 { font-size: 1.5rem!important; line-height: 1.3!important; font-weight: 600!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-pusat-informasi #sppkPageContent #informationHub h2 { font-size: 1rem!important; line-height: 1.4!important; font-weight: 600!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-pusat-informasi #sppkPageContent #informationHub :is(.folder-count, .folder-count b, .information-page-meta span, .information-result-count, .information-list time, .information-panel header > b, .information-note p, .information-note strong) { font-size: .75rem!important; line-height: 1.5!important; font-weight: 400!important; letter-spacing: normal!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-pusat-informasi #sppkPageContent #informationHub :is(.folder-copy strong, .information-list strong, .information-empty strong) { font-weight: 500!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-pusat-informasi #sppkPageContent #informationHub .folder-icon i { font-size: 1.25rem!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-pusat-informasi #sppkPageContent #informationHub .folder-arrow { font-size: .75rem!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-pusat-informasi #sppkPageContent #informationHub .information-empty > i { font-size: 1.5rem!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-pusat-informasi #informationFolderModal :is(th, td, p, a, button) { font-size: .875rem!important; line-height: 1.5!important; letter-spacing: normal!important; text-transform: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-pusat-informasi #informationFolderModal h2 { font-size: 1.125rem!important; line-height: 1.4!important; font-weight: 600!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-pusat-informasi #informationFolderModal :is(small, .information-table-toolbar, .information-table-toolbar span, .information-table-toolbar b, .information-modal-footer > span) { font-size: .75rem!important; line-height: 1.5!important; font-weight: 400!important; letter-spacing: normal!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-pusat-informasi #informationFolderModal :is(th, strong) { font-weight: 500!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-pusat-informasi #informationFolderModal .information-popup-empty > span i { font-size: 1.5rem!important; }
}

/* TARGET TAHUNAN V58 — CLEAN PLANNING WORKSPACE
   Reopens the existing target layer to supersede V48 layout rules.
   Functional button palettes retain their light/dark treatment. */
@layer sppk-target-polish {
html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper.sppk-target-workspace {
    display: grid!important; grid-template-columns: minmax(0, 1fr)!important; gap: 28px!important;
    width: 100%!important; max-width: 1240px!important; min-width: 0!important;
    margin: 0 auto!important; padding: 4px 0 32px!important;
    background: transparent!important; color: var(--sppk-theme-copy)!important; box-shadow: none!important;
}
html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper.sppk-target-workspace::before, html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper.sppk-target-workspace .target-rkt-panel::before { content: none!important; display: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper.sppk-target-workspace * { box-sizing: border-box!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper.sppk-target-workspace > * { min-width: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper.sppk-target-workspace :is(h1, h2, h3, h4, strong) { color: var(--sppk-theme-heading)!important; -webkit-text-fill-color: currentColor!important; text-shadow: none!important; overflow-wrap: anywhere!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper.sppk-target-workspace :is(p, label, td, th) { color: var(--sppk-theme-copy)!important; -webkit-text-fill-color: currentColor!important; text-shadow: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper.sppk-target-workspace :is(button, i, span, small) { -webkit-text-fill-color: currentColor!important; text-shadow: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper.sppk-target-workspace .target-page-heading { display: flex!important; align-items: flex-start!important; justify-content: space-between!important; flex-wrap: wrap!important; gap: 16px 24px!important; margin: 0!important; padding: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper.sppk-target-workspace .target-page-heading > div { min-width: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper.sppk-target-workspace .target-page-heading h1 { margin: 0 0 8px!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper.sppk-target-workspace .target-page-heading p { margin: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper.sppk-target-workspace .target-active-label { display: inline-flex!important; align-items: center!important; gap: 7px!important; padding: 6px 9px!important; border: 1px solid var(--sppk-theme-line)!important; border-radius: 7px!important; background: var(--sppk-theme-surface-soft)!important; color: var(--sppk-theme-copy)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper.sppk-target-workspace .target-active-label i { color: inherit!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper.sppk-target-workspace .target-rkt-panel { display: grid!important; grid-template-columns: minmax(210px, .7fr) minmax(0, 1.3fr)!important; align-items: center!important; gap: 20px!important; margin: 0!important; padding: 0 0 24px!important; border: 0!important; border-bottom: 1px solid var(--sppk-theme-line)!important; border-radius: 0!important; background: transparent!important; box-shadow: none!important; transform: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper.sppk-target-workspace .target-rkt-panel > div { min-width: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper.sppk-target-workspace :is(h2, h3, h4) { margin: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper.sppk-target-workspace .target-rkt-panel p { margin: 6px 0 0!important; color: var(--sppk-theme-muted)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper.sppk-target-workspace .target-rkt-options { display: flex!important; justify-content: flex-end!important; flex-wrap: wrap!important; gap: 8px!important; width: auto!important; margin: 0!important; padding: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper.sppk-target-workspace .target-rkt-options > .col-md-2 { flex: 0 0 auto!important; width: auto!important; max-width: 100%!important; min-width: 0!important; margin: 0!important; padding: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper.sppk-target-workspace .target-rkt-options form { margin: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper.sppk-target-workspace .target-rkt-options .btn { display: inline-flex!important; align-items: center!important; justify-content: center!important; gap: 8px!important; width: auto!important; min-width: 104px!important; min-height: 40px!important; margin: 0!important; padding: 8px 11px!important; border-radius: 8px!important; box-shadow: none!important; transform: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper.sppk-target-workspace .target-rkt-options .btn br { display: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper.sppk-target-workspace .target-rkt-options .target-rkt-empty { margin: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper.sppk-target-workspace .target-panel { min-width: 0!important; margin: 0!important; padding: 22px!important; border: 1px solid var(--sppk-theme-line)!important; border-radius: 12px!important; background: var(--sppk-theme-surface)!important; box-shadow: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper.sppk-target-workspace .target-section-heading { display: flex!important; align-items: flex-start!important; justify-content: space-between!important; gap: 16px!important; margin: 0 0 18px!important; padding: 0!important; border: 0!important; border-radius: 0!important; background: transparent!important; background-image: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper.sppk-target-workspace .target-section-heading > div { min-width: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper.sppk-target-workspace .target-section-heading p { margin: 6px 0 0!important; color: var(--sppk-theme-muted)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper.sppk-target-workspace .target-input-panel form { margin: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper.sppk-target-workspace .target-input-grid { display: grid!important; grid-template-columns: repeat(3, minmax(0, 1fr))!important; gap: 18px 16px!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper.sppk-target-workspace .target-input-field { min-width: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper.sppk-target-workspace label { display: block!important; margin: 0 0 8px!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper.sppk-target-workspace label span { color: var(--sppk-theme-muted)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper.sppk-target-workspace :is(input:not([type="hidden"]), select) { display: block!important; width: 100%!important; min-width: 0!important; max-width: 100%!important; height: 42px!important; margin: 0!important; padding: 8px 11px!important; border: 1px solid var(--sppk-theme-line)!important; border-radius: 8px!important; background: var(--sppk-theme-surface)!important; background-image: none!important; color: var(--sppk-theme-text)!important; -webkit-text-fill-color: currentColor!important; box-shadow: none!important; color-scheme: light!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-target.dark .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper.sppk-target-workspace :is(input:not([type="hidden"]), select) { color-scheme: dark!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper.sppk-target-workspace select option { background: var(--sppk-theme-surface)!important; color: var(--sppk-theme-text)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper.sppk-target-workspace input::placeholder { color: var(--sppk-theme-muted)!important; -webkit-text-fill-color: currentColor!important; opacity: 1!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper.sppk-target-workspace .target-form-actions { display: flex!important; align-items: center!important; justify-content: flex-end!important; margin: 20px 0 0!important; padding: 18px 0 0!important; border-top: 1px solid var(--sppk-theme-line-soft)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper.sppk-target-workspace .btn-enterprise-save { display: inline-flex!important; align-items: center!important; justify-content: center!important; gap: 7px!important; min-width: 0!important; min-height: 40px!important; max-width: 100%!important; margin: 0!important; padding: 9px 14px!important; border: 0!important; border-radius: 8px!important; box-shadow: none!important; transform: none!important; filter: none!important; cursor: pointer!important; white-space: normal!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper.sppk-target-workspace .btn-enterprise-save:is(:hover, :focus-visible) { transform: none!important; box-shadow: none!important; filter: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper.sppk-target-workspace :is(.btn-enterprise-save, .btn-action) > :is(i, span) { color: inherit!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-target:not(.dark) .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper.sppk-target-workspace .btn-enterprise-save { background: linear-gradient(135deg, #5b35c8, #7c3aed 58%, #9d4edd)!important; color: #ffffff!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-target:not(.dark) .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper.sppk-target-workspace .target-rkt-options .btn-success { border-color: #0f9a70!important; background: linear-gradient(135deg, #047857, #10b981)!important; color: #ffffff!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-target:not(.dark) .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper.sppk-target-workspace .target-rkt-options .btn-outline-success { border-color: rgba(16,185,129,.35)!important; background: transparent!important; color: #078461!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-target.dark .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper.sppk-target-workspace .target-rkt-options .btn-success { background: #333333!important; color: #79d9ae!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper.sppk-target-workspace .target-data-section { display: grid!important; gap: 30px!important; min-width: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper.sppk-target-workspace .target-table-section { min-width: 0!important; margin: 0!important; padding: 0!important; border: 0!important; border-radius: 0!important; background: transparent!important; box-shadow: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper.sppk-target-workspace .target-year-filter-row { display: flex!important; align-items: center!important; flex-wrap: wrap!important; flex: 0 0 auto!important; gap: 10px!important; margin: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper.sppk-target-workspace .target-year-filter-row label { margin: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper.sppk-target-workspace select.target-year-filter { width: 122px!important; min-height: 42px!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper.sppk-target-workspace .target-generate-panel { display: grid!important; grid-template-columns: minmax(0, 1fr) auto!important; align-items: center!important; gap: 16px 24px!important; margin: 0 0 20px!important; padding: 16px!important; border: 1px solid var(--sppk-theme-line)!important; border-radius: 9px!important; background: var(--sppk-theme-surface-soft)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper.sppk-target-workspace .target-generate-panel > div { min-width: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper.sppk-target-workspace .target-generate-panel p { margin: 5px 0 0!important; color: var(--sppk-theme-muted)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper.sppk-target-workspace .target-generate-form { display: flex!important; align-items: flex-end!important; justify-content: flex-end!important; gap: 16px!important; margin: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper.sppk-target-workspace .target-generate-year { min-width: 0!important; width: 150px!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper.sppk-target-workspace .target-generate-year label { margin-bottom: 6px!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper.sppk-target-workspace .target-generate-form button[name="generate_petak"] { width: auto!important; max-width: 100%!important; min-height: 42px!important; white-space: normal!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper.sppk-target-workspace .table-responsive { max-width: 100%!important; overflow-x: auto!important; border: 0!important; border-top: 1px solid var(--sppk-theme-line)!important; border-bottom: 1px solid var(--sppk-theme-line)!important; border-radius: 0!important; background: var(--sppk-theme-surface)!important; box-shadow: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper.sppk-target-workspace .target-table { width: 100%!important; min-width: 820px!important; table-layout: fixed!important; margin: 0!important; border-collapse: collapse!important; border-spacing: 0!important; background: var(--sppk-theme-surface)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper.sppk-target-workspace .target-table :is(th, td) { padding: 14px 12px!important; border: 0!important; border-bottom: 1px solid var(--sppk-theme-line-soft)!important; border-radius: 0!important; background: var(--sppk-theme-surface)!important; background-image: none!important; color: var(--sppk-theme-copy)!important; text-align: left!important; vertical-align: middle!important; overflow-wrap: anywhere!important; box-shadow: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper.sppk-target-workspace .target-table thead th { background: var(--sppk-theme-surface-soft)!important; color: var(--sppk-theme-muted)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper.sppk-target-workspace .target-table thead th:first-child { width: 98px!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper.sppk-target-workspace .target-table thead th:last-child { width: 104px!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper.sppk-target-workspace .target-table :is(tr, tr:hover) { background: transparent!important; box-shadow: none!important; transform: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper.sppk-target-workspace .target-table tbody tr:hover td { background: var(--sppk-theme-surface-soft)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper.sppk-target-workspace .target-table tbody tr:last-child td { border-bottom: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper.sppk-target-workspace .target-table .year-badge { display: inline!important; min-width: 0!important; margin: 0!important; padding: 0!important; border: 0!important; border-radius: 0!important; background: transparent!important; color: var(--sppk-theme-heading)!important; box-shadow: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper.sppk-target-workspace .target-table small { color: var(--sppk-theme-muted)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper.sppk-target-workspace .target-table .action-group { display: flex!important; align-items: center!important; justify-content: flex-end!important; gap: 8px!important; margin: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper.sppk-target-workspace .target-table .target-action-heading { text-align: right!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper.sppk-target-workspace .btn-action { display: inline-grid!important; place-items: center!important; width: 32px!important; height: 32px!important; margin: 0!important; padding: 0!important; border-width: 1px!important; border-style: solid!important; border-radius: 7px!important; box-shadow: none!important; transform: none!important; cursor: pointer!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper.sppk-target-workspace .btn-action:is(:hover, :focus-visible) { transform: none!important; box-shadow: none!important; filter: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper.sppk-target-workspace .sppk-target-empty td { padding: 30px 16px!important; color: var(--sppk-theme-muted)!important; text-align: center!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper.sppk-target-workspace .target-page-notice { display: flex!important; align-items: flex-start!important; gap: 10px!important; margin: 0!important; padding: 14px 16px!important; border: 1px solid var(--sppk-theme-line)!important; border-radius: 9px!important; background: var(--sppk-theme-surface-soft)!important; color: var(--sppk-theme-copy)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper.sppk-target-workspace .target-page-notice span { min-width: 0!important; color: inherit!important; overflow-wrap: anywhere!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper.sppk-target-workspace .target-page-notice i { color: inherit!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper.sppk-target-workspace :is(button, input, select, .table-responsive):focus-visible { outline: 2px solid var(--sppk-theme-muted)!important; outline-offset: 3px!important; box-shadow: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper.sppk-target-workspace button:disabled { opacity: .65!important; cursor: not-allowed!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper.sppk-target-workspace .sppk-target-dialog { border-radius: 12px!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper.sppk-target-workspace .sppk-target-dialog-header { padding: 20px!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper.sppk-target-workspace .sppk-target-dialog-header p { color: var(--sppk-theme-muted)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper.sppk-target-workspace .sppk-target-dialog-footer .btn-enterprise-save { min-height: 38px!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-target:not(.dark) .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper.sppk-target-workspace .sppk-target-delete-warning :is(p, strong) { color: #9b4050!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-target.dark .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper.sppk-target-workspace .sppk-target-delete-warning :is(p, strong) { color: #e6afbd!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper.sppk-target-workspace .sppk-target-cancel { display: inline-flex!important; align-items: center!important; justify-content: center!important; min-height: 38px!important; padding: 8px 12px!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper.sppk-target-workspace .sppk-target-dialog-close { min-height: 32px!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper.sppk-target-workspace .target-sr-only { position: absolute!important; width: 1px!important; height: 1px!important; padding: 0!important; margin: -1px!important; overflow: hidden!important; clip: rect(0, 0, 0, 0)!important; white-space: nowrap!important; border: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper.sppk-target-workspace [hidden] { display: none!important; }
@media (max-width: 1199.98px) {
    html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper.sppk-target-workspace .target-rkt-panel { grid-template-columns: minmax(0, 1fr)!important; gap: 16px!important; }
    html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper.sppk-target-workspace .target-rkt-options { justify-content: flex-start!important; }
    html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper.sppk-target-workspace .target-generate-panel { grid-template-columns: minmax(0, 1fr)!important; }
    html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper.sppk-target-workspace .target-generate-form { justify-content: flex-start!important; }
}
@media (max-width: 991.98px) { html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper.sppk-target-workspace .target-input-grid { grid-template-columns: repeat(2, minmax(0, 1fr))!important; } }
@media (max-width: 575.98px) {
    html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper.sppk-target-workspace .target-panel { padding: 18px 16px!important; }
    html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper.sppk-target-workspace .target-input-grid { grid-template-columns: minmax(0, 1fr)!important; }
    html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper.sppk-target-workspace .target-section-heading { flex-wrap: wrap!important; }
    html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper.sppk-target-workspace .target-year-filter-row { width: 100%!important; justify-content: flex-end!important; }
    html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper.sppk-target-workspace .target-generate-form { flex-direction: column!important; align-items: stretch!important; width: 100%!important; gap: 14px!important; }
    html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper.sppk-target-workspace .target-generate-year { width: 100%!important; }
    html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper.sppk-target-workspace .target-generate-form button[name="generate_petak"] { width: 100%!important; }
}
}
@layer sppk-typography {
html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper.sppk-target-workspace { font-size: .875rem!important; line-height: 1.6!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper.sppk-target-workspace :is(p, label, input, select, button, td, th, strong, .year-badge) { font-size: .875rem!important; line-height: 1.5!important; font-weight: 400!important; letter-spacing: normal!important; text-transform: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper.sppk-target-workspace h1 { font-size: 1.5rem!important; line-height: 1.3!important; font-weight: 600!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper.sppk-target-workspace :is(h2, h3) { font-size: 1rem!important; line-height: 1.4!important; font-weight: 600!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper.sppk-target-workspace :is(h4, label, button, th, .year-badge) { font-weight: 500!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper.sppk-target-workspace h4 { font-size: .875rem!important; line-height: 1.5!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper.sppk-target-workspace :is(small, .target-active-label, label span, .target-rkt-options .btn) { font-size: .75rem!important; line-height: 1.5!important; letter-spacing: normal!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper.sppk-target-workspace .sppk-target-dialog h3 { font-size: 1.125rem!important; line-height: 1.4!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-target .page-shell.main-content #sppkPageContent #annualTargetPage.enterprise-target-wrapper.sppk-target-workspace .sppk-target-dialog-close { font-size: 1.25rem!important; }
}

/* REKAPITULASI V59 — QUIET SIDEBAR AND html body#sppkAppShell.sppk-app-shell:is(.sppk-route-rekap, .sppk-route-rekap-tuk, .sppk-route-rekap_bbm, .sppk-route-rekap_jalan, .sppk-route-rekap_houling) .page-shell.main-content #sppkPageContent :is(.rekap-produksi-page, .rekap-detail-page) WORKSPACE */
@layer sppk-recap-headers {
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-rekap .page-shell.main-content #sppkPageContent #sppkRecapWorkspace.sppk-recap-clean { --recap-selected: #edf0f2!important; display: block!important; width: 100%!important; max-width: 1240px!important; min-width: 0!important; margin: 0 auto!important; padding: 4px 0 24px!important; color: var(--sppk-theme-copy)!important; background: transparent!important; box-shadow: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-rekap.dark .page-shell.main-content #sppkPageContent #sppkRecapWorkspace.sppk-recap-clean { --recap-selected: #303030!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-rekap .page-shell.main-content #sppkPageContent #sppkRecapWorkspace.sppk-recap-clean *, html body#sppkAppShell.sppk-app-shell:is(.sppk-route-rekap, .sppk-route-rekap-tuk, .sppk-route-rekap_bbm, .sppk-route-rekap_jalan, .sppk-route-rekap_houling) .page-shell.main-content #sppkPageContent :is(.rekap-produksi-page, .rekap-detail-page) * { box-sizing: border-box!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-rekap .page-shell.main-content #sppkPageContent #sppkRecapWorkspace.sppk-recap-clean .recap-workspace-heading { display: block!important; margin: 0 0 24px!important; padding: 0!important; border: 0!important; background: transparent!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-rekap .page-shell.main-content #sppkPageContent #sppkRecapWorkspace.sppk-recap-clean .recap-workspace-heading h1 { margin: 0 0 8px!important; color: var(--sppk-theme-heading)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-rekap .page-shell.main-content #sppkPageContent #sppkRecapWorkspace.sppk-recap-clean .recap-workspace-heading p { margin: 0!important; color: var(--sppk-theme-copy)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-rekap .page-shell.main-content #sppkPageContent #sppkRecapWorkspace.sppk-recap-clean .recap-workspace-layout { display: grid!important; grid-template-columns: 200px minmax(0, 1fr)!important; width: 100%!important; min-width: 0!important; height: max(480px, calc(100dvh - 230px))!important; min-height: 480px!important; overflow: hidden!important; border: 1px solid var(--sppk-theme-line)!important; border-radius: 12px!important; background: var(--sppk-theme-surface)!important; box-shadow: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-rekap .page-shell.main-content #sppkPageContent #sppkRecapWorkspace.sppk-recap-clean .recap-workspace-navigation { display: flex!important; flex-direction: column!important; min-width: 0!important; min-height: 0!important; padding: 14px 10px!important; overflow-y: auto!important; border: 0!important; border-right: 1px solid var(--sppk-theme-line)!important; background: var(--sppk-theme-surface)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-rekap .page-shell.main-content #sppkPageContent #sppkRecapWorkspace.sppk-recap-clean .recap-workspace-navigation h2 { margin: 4px 10px 14px!important; color: var(--sppk-theme-muted)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-rekap .page-shell.main-content #sppkPageContent #sppkRecapWorkspace.sppk-recap-clean .recap-workspace-tabs { display: grid!important; align-content: start!important; gap: 4px!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-rekap .page-shell.main-content #sppkPageContent #sppkRecapWorkspace.sppk-recap-clean .recap-workspace-tab { display: flex!important; align-items: center!important; min-width: 0!important; min-height: 56px!important; gap: 10px!important; margin: 0!important; padding: 10px!important; border: 0!important; border-radius: 8px!important; background: transparent!important; color: var(--sppk-theme-copy)!important; -webkit-text-fill-color: currentColor!important; text-decoration: none!important; box-shadow: none!important; transform: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-rekap .page-shell.main-content #sppkPageContent #sppkRecapWorkspace.sppk-recap-clean .recap-workspace-tab > i { flex: 0 0 18px!important; width: 18px!important; padding: 0!important; border: 0!important; border-radius: 0!important; background: transparent!important; color: inherit!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-rekap .page-shell.main-content #sppkPageContent #sppkRecapWorkspace.sppk-recap-clean .recap-workspace-tab-copy { display: grid!important; gap: 3px!important; min-width: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-rekap .page-shell.main-content #sppkPageContent #sppkRecapWorkspace.sppk-recap-clean .recap-workspace-tab-copy strong { color: inherit!important; -webkit-text-fill-color: currentColor!important; overflow-wrap: anywhere!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-rekap .page-shell.main-content #sppkPageContent #sppkRecapWorkspace.sppk-recap-clean .recap-workspace-tab-copy small { color: var(--sppk-theme-muted)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-rekap .page-shell.main-content #sppkPageContent #sppkRecapWorkspace.sppk-recap-clean .recap-workspace-tab:is(:hover, :focus-visible) { background: var(--sppk-theme-surface-soft)!important; color: var(--sppk-theme-heading)!important; transform: none!important; box-shadow: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-rekap .page-shell.main-content #sppkPageContent #sppkRecapWorkspace.sppk-recap-clean .recap-workspace-tab.is-active { background: var(--recap-selected)!important; color: var(--sppk-theme-heading)!important; -webkit-text-fill-color: currentColor!important; box-shadow: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-rekap .page-shell.main-content #sppkPageContent #sppkRecapWorkspace.sppk-recap-clean .recap-workspace-tab.is-active strong, html body#sppkAppShell.sppk-app-shell.sppk-route-menu-rekap .page-shell.main-content #sppkPageContent #sppkRecapWorkspace.sppk-recap-clean .recap-workspace-tab.is-active > i { color: var(--sppk-theme-heading)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-rekap .page-shell.main-content #sppkPageContent #sppkRecapWorkspace.sppk-recap-clean .recap-workspace-tab[aria-disabled="true"] { opacity: 1!important; color: var(--sppk-theme-muted)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-rekap .page-shell.main-content #sppkPageContent #sppkRecapWorkspace.sppk-recap-clean .recap-workspace-tab > .recap-workspace-lock { flex: 0 0 12px!important; width: 12px!important; margin-left: auto!important; color: var(--sppk-theme-muted)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-rekap .page-shell.main-content #sppkPageContent #sppkRecapWorkspace.sppk-recap-clean .recap-workspace-main { display: flex!important; flex-direction: column!important; min-width: 0!important; min-height: 0!important; background: var(--sppk-theme-surface)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-rekap .page-shell.main-content #sppkPageContent #sppkRecapWorkspace.sppk-recap-clean .recap-workspace-report-heading { display: flex!important; flex: 0 0 auto!important; align-items: flex-start!important; justify-content: space-between!important; flex-wrap: wrap!important; gap: 12px!important; margin: 0!important; padding: 18px 20px!important; border: 0!important; border-bottom: 1px solid var(--sppk-theme-line)!important; border-radius: 0!important; background: var(--sppk-theme-surface)!important; background-image: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-rekap .page-shell.main-content #sppkPageContent #sppkRecapWorkspace.sppk-recap-clean .recap-workspace-report-heading > div { flex: 1 1 200px!important; min-width: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-rekap .page-shell.main-content #sppkPageContent #sppkRecapWorkspace.sppk-recap-clean .recap-workspace-report-heading h2 { margin: 0!important; color: var(--sppk-theme-heading)!important; -webkit-text-fill-color: currentColor!important; overflow-wrap: anywhere!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-rekap .page-shell.main-content #sppkPageContent #sppkRecapWorkspace.sppk-recap-clean .recap-workspace-report-heading p { display: block!important; margin: 5px 0 0!important; color: var(--sppk-theme-muted)!important; -webkit-text-fill-color: currentColor!important; overflow-wrap: anywhere!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-rekap .page-shell.main-content #sppkPageContent #sppkRecapWorkspace.sppk-recap-clean .recap-workspace-open-page { display: inline-flex!important; flex: 0 0 auto!important; align-items: center!important; justify-content: center!important; gap: 7px!important; min-height: 36px!important; margin: 0 0 0 auto!important; padding: 8px 11px!important; border: 1px solid var(--sppk-theme-line)!important; border-radius: 8px!important; background: var(--sppk-theme-surface)!important; color: var(--sppk-theme-copy)!important; -webkit-text-fill-color: currentColor!important; text-decoration: none!important; box-shadow: none!important; transform: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-rekap .page-shell.main-content #sppkPageContent #sppkRecapWorkspace.sppk-recap-clean .recap-workspace-open-page :is(i, span) { color: inherit!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-rekap .page-shell.main-content #sppkPageContent #sppkRecapWorkspace.sppk-recap-clean .recap-workspace-open-page:is(:hover, :focus-visible) { background: var(--sppk-theme-surface-soft)!important; color: var(--sppk-theme-heading)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-rekap .page-shell.main-content #sppkPageContent #sppkRecapWorkspace.sppk-recap-clean .recap-workspace-panels { position: relative!important; flex: 1 1 auto!important; min-width: 0!important; min-height: 0!important; overflow: hidden!important; background: var(--sppk-theme-surface)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-rekap .page-shell.main-content #sppkPageContent #sppkRecapWorkspace.sppk-recap-clean .recap-workspace-panel { position: relative!important; width: 100%!important; height: 100%!important; min-width: 0!important; min-height: 0!important; overflow: hidden!important; background: var(--sppk-theme-surface)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-rekap .page-shell.main-content #sppkPageContent #sppkRecapWorkspace.sppk-recap-clean .recap-workspace-frame { display: block!important; width: 100%!important; height: 100%!important; min-width: 0!important; min-height: 0!important; margin: 0!important; padding: 0!important; border: 0!important; background: var(--sppk-theme-surface)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-rekap .page-shell.main-content #sppkPageContent #sppkRecapWorkspace.sppk-recap-clean .recap-workspace-loading { position: absolute!important; inset: 0!important; display: flex!important; align-items: center!important; justify-content: center!important; flex-direction: column!important; gap: 12px!important; padding: 24px!important; background: var(--sppk-theme-surface)!important; color: var(--sppk-theme-muted)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-rekap .page-shell.main-content #sppkPageContent #sppkRecapWorkspace.sppk-recap-clean .recap-workspace-loading-message { color: var(--sppk-theme-muted)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-rekap .page-shell.main-content #sppkPageContent #sppkRecapWorkspace.sppk-recap-clean .recap-workspace-retry { display: inline-flex!important; align-items: center!important; justify-content: center!important; min-height: 36px!important; padding: 8px 12px!important; border: 1px solid var(--sppk-theme-line)!important; border-radius: 8px!important; background: var(--sppk-theme-surface-soft)!important; color: var(--sppk-theme-copy)!important; -webkit-text-fill-color: currentColor!important; box-shadow: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-rekap .page-shell.main-content #sppkPageContent #sppkRecapWorkspace.sppk-recap-clean :is(.recap-workspace-empty, .recap-workspace-noscript) { margin: 0!important; padding: 24px!important; color: var(--sppk-theme-muted)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-rekap .page-shell.main-content #sppkPageContent #sppkRecapWorkspace.sppk-recap-clean :is(a, button):focus-visible { outline: 2px solid var(--sppk-theme-muted)!important; outline-offset: 2px!important; box-shadow: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-rekap .page-shell.main-content #sppkPageContent #sppkRecapWorkspace.sppk-recap-clean [hidden] { display: none!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-rekap, .sppk-route-rekap-tuk, .sppk-route-rekap_bbm, .sppk-route-rekap_jalan, .sppk-route-rekap_houling) .page-shell.main-content #sppkPageContent :is(.rekap-produksi-page, .rekap-detail-page) { width: 100%!important; max-width: 1240px!important; min-width: 0!important; margin: 0 auto!important; padding: 4px 0 28px!important; color: var(--sppk-theme-copy)!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-rekap, .sppk-route-rekap-tuk, .sppk-route-rekap_bbm, .sppk-route-rekap_jalan, .sppk-route-rekap_houling) .page-shell.main-content #sppkPageContent :is(.rekap-produksi-page, .rekap-detail-page), html body#sppkAppShell.sppk-app-shell:is(.sppk-route-rekap, .sppk-route-rekap-tuk, .sppk-route-rekap_bbm, .sppk-route-rekap_jalan, .sppk-route-rekap_houling) .page-shell.main-content #sppkPageContent :is(.rekap-produksi-page, .rekap-detail-page) #rekapPanelBulldozer { --sppk-recap-header-bg: var(--sppk-theme-surface-soft)!important; --sppk-recap-header-ink: var(--sppk-theme-copy)!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-rekap, .sppk-route-rekap-tuk, .sppk-route-rekap_bbm, .sppk-route-rekap_jalan, .sppk-route-rekap_houling) .page-shell.main-content #sppkPageContent :is(.rekap-produksi-page, .rekap-detail-page) :is(.rekap-production-hero, .rekap-detail-hero) { min-height: 0!important; margin: 0 0 20px!important; padding: 0!important; border: 0!important; border-radius: 0!important; background: transparent!important; background-image: none!important; box-shadow: none!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-rekap, .sppk-route-rekap-tuk, .sppk-route-rekap_bbm, .sppk-route-rekap_jalan, .sppk-route-rekap_houling) .page-shell.main-content #sppkPageContent :is(.rekap-produksi-page, .rekap-detail-page) :is(.rekap-production-hero-body, .rekap-detail-hero-body) { display: flex!important; align-items: flex-start!important; justify-content: space-between!important; flex-wrap: wrap!important; gap: 16px!important; margin: 0!important; padding: 0!important; background: transparent!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-rekap, .sppk-route-rekap-tuk, .sppk-route-rekap_bbm, .sppk-route-rekap_jalan, .sppk-route-rekap_houling) .page-shell.main-content #sppkPageContent :is(.rekap-produksi-page, .rekap-detail-page) :is(.rekap-production-hero-body, .rekap-detail-hero-body) > div:first-child { min-width: 0!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-rekap, .sppk-route-rekap-tuk, .sppk-route-rekap_bbm, .sppk-route-rekap_jalan, .sppk-route-rekap_houling) .page-shell.main-content #sppkPageContent :is(.rekap-produksi-page, .rekap-detail-page) :is(.rekap-production-hero, .rekap-detail-hero) :is(h2, h3) { margin: 0 0 7px!important; color: var(--sppk-theme-heading)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-rekap, .sppk-route-rekap-tuk, .sppk-route-rekap_bbm, .sppk-route-rekap_jalan, .sppk-route-rekap_houling) .page-shell.main-content #sppkPageContent :is(.rekap-produksi-page, .rekap-detail-page) :is(.rekap-production-hero, .rekap-detail-hero) :is(p, small) { color: var(--sppk-theme-muted)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-rekap, .sppk-route-rekap-tuk, .sppk-route-rekap_bbm, .sppk-route-rekap_jalan, .sppk-route-rekap_houling) .page-shell.main-content #sppkPageContent :is(.rekap-produksi-page, .rekap-detail-page) :is(.rekap-detail-actions, .rekap-period-actions) { display: flex!important; align-items: center!important; justify-content: flex-end!important; flex-wrap: wrap!important; gap: 8px!important; margin: 0 0 0 auto!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-rekap, .sppk-route-rekap-tuk, .sppk-route-rekap_bbm, .sppk-route-rekap_jalan, .sppk-route-rekap_houling) .page-shell.main-content #sppkPageContent :is(.rekap-produksi-page, .rekap-detail-page) :is(.rekap-stat-grid, .rekap-detail-stat-grid) { display: grid!important; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr))!important; gap: 12px!important; margin: 0 0 24px!important; padding: 0!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-rekap, .sppk-route-rekap-tuk, .sppk-route-rekap_bbm, .sppk-route-rekap_jalan, .sppk-route-rekap_houling) .page-shell.main-content #sppkPageContent :is(.rekap-produksi-page, .rekap-detail-page) :is(.rekap-stat-column, .rekap-detail-stat-column) { flex: none!important; width: auto!important; min-width: 0!important; max-width: 100%!important; margin: 0!important; padding: 0!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-rekap, .sppk-route-rekap-tuk, .sppk-route-rekap_bbm, .sppk-route-rekap_jalan, .sppk-route-rekap_houling) .page-shell.main-content #sppkPageContent :is(.rekap-produksi-page, .rekap-detail-page) :is(.rekap-stat-card, .rekap-detail-stat-card) { display: flex!important; flex-direction: column!important; min-width: 0!important; min-height: 108px!important; height: auto!important; margin: 0!important; border: 1px solid var(--sppk-theme-line)!important; border-radius: 10px!important; background: var(--sppk-theme-surface)!important; background-image: none!important; color: var(--sppk-theme-heading)!important; box-shadow: none!important; transform: none!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-rekap, .sppk-route-rekap-tuk, .sppk-route-rekap_bbm, .sppk-route-rekap_jalan, .sppk-route-rekap_houling) .page-shell.main-content #sppkPageContent :is(.rekap-produksi-page, .rekap-detail-page) :is(.rekap-stat-card, .rekap-detail-stat-card)::before { display: none!important; content: none!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-rekap, .sppk-route-rekap-tuk, .sppk-route-rekap_bbm, .sppk-route-rekap_jalan, .sppk-route-rekap_houling) .page-shell.main-content #sppkPageContent :is(.rekap-produksi-page, .rekap-detail-page) :is(.rekap-stat-card-body, .rekap-detail-stat-card-body) { display: flex!important; flex-direction: column!important; flex: 1 1 auto!important; align-items: flex-start!important; justify-content: center!important; gap: 6px!important; min-width: 0!important; height: auto!important; padding: 16px!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-rekap, .sppk-route-rekap-tuk, .sppk-route-rekap_bbm, .sppk-route-rekap_jalan, .sppk-route-rekap_houling) .page-shell.main-content #sppkPageContent :is(.rekap-produksi-page, .rekap-detail-page) :is(.rekap-stat-card, .rekap-detail-stat-card) :is(h2, h3, h4, h5) { margin: 0!important; min-width: 0!important; color: var(--sppk-theme-heading)!important; -webkit-text-fill-color: currentColor!important; overflow-wrap: anywhere!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-rekap, .sppk-route-rekap-tuk, .sppk-route-rekap_bbm, .sppk-route-rekap_jalan, .sppk-route-rekap_houling) .page-shell.main-content #sppkPageContent :is(.rekap-produksi-page, .rekap-detail-page) :is(.rekap-stat-card, .rekap-detail-stat-card) :is(h6, p, small) { margin: 0!important; color: var(--sppk-theme-muted)!important; -webkit-text-fill-color: currentColor!important; overflow-wrap: anywhere!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-rekap, .sppk-route-rekap-tuk, .sppk-route-rekap_bbm, .sppk-route-rekap_jalan, .sppk-route-rekap_houling) .page-shell.main-content #sppkPageContent :is(.rekap-produksi-page, .rekap-detail-page) :is(.rekap-data-card, .rekap-operator-card, .rekap-detail-chart-card, .rekap-detail-table-card) { min-width: 0!important; border: 1px solid var(--sppk-theme-line)!important; border-radius: 10px!important; background: var(--sppk-theme-surface)!important; background-image: none!important; box-shadow: none!important; transform: none!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-rekap, .sppk-route-rekap-tuk, .sppk-route-rekap_bbm, .sppk-route-rekap_jalan, .sppk-route-rekap_houling) .page-shell.main-content #sppkPageContent :is(.rekap-produksi-page, .rekap-detail-page) :is(.rekap-data-card > .card-header, .rekap-operator-head, .rekap-detail-panel-header) { display: flex!important; align-items: center!important; justify-content: space-between!important; flex-wrap: wrap!important; gap: 12px!important; min-width: 0!important; padding: 16px 18px!important; border: 0!important; border-bottom: 1px solid var(--sppk-theme-line)!important; background: var(--sppk-theme-surface)!important; background-image: none!important; color: var(--sppk-theme-heading)!important; -webkit-text-fill-color: currentColor!important; box-shadow: none!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-rekap, .sppk-route-rekap-tuk, .sppk-route-rekap_bbm, .sppk-route-rekap_jalan, .sppk-route-rekap_houling) .page-shell.main-content #sppkPageContent :is(.rekap-produksi-page, .rekap-detail-page) :is(.rekap-data-card > .card-header, .rekap-operator-head, .rekap-detail-panel-header) :is(h3, h4, h5, h6, p, span, small, strong, em, i):not(:where(.btn, .btn *, .badge, .badge *, .rekap-unit-tab, .rekap-unit-tab *)) { color: var(--sppk-theme-copy)!important; -webkit-text-fill-color: currentColor!important; text-shadow: none!important; overflow-wrap: anywhere!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-rekap, .sppk-route-rekap-tuk, .sppk-route-rekap_bbm, .sppk-route-rekap_jalan, .sppk-route-rekap_houling) .page-shell.main-content #sppkPageContent :is(.rekap-produksi-page, .rekap-detail-page) :is(.rekap-data-card > .card-header, .rekap-operator-head, .rekap-detail-panel-header) :is(h3, h4, h5, strong):not(:where(.btn, .btn *, .badge, .badge *, .rekap-unit-tab, .rekap-unit-tab *)) { color: var(--sppk-theme-heading)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-rekap, .sppk-route-rekap-tuk, .sppk-route-rekap_bbm, .sppk-route-rekap_jalan, .sppk-route-rekap_houling) .page-shell.main-content #sppkPageContent :is(.rekap-produksi-page, .rekap-detail-page) :is(.rekap-data-card > .card-body, .rekap-detail-chart-body, .rekap-detail-table-body) { min-width: 0!important; padding: 18px!important; background: var(--sppk-theme-surface)!important; color: var(--sppk-theme-copy)!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-rekap, .sppk-route-rekap-tuk, .sppk-route-rekap_bbm, .sppk-route-rekap_jalan, .sppk-route-rekap_houling) .page-shell.main-content #sppkPageContent :is(.rekap-produksi-page, .rekap-detail-page) .rekap-operator-card > .card-body { padding: 0!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-rekap, .sppk-route-rekap-tuk, .sppk-route-rekap_bbm, .sppk-route-rekap_jalan, .sppk-route-rekap_houling) .page-shell.main-content #sppkPageContent :is(.rekap-produksi-page, .rekap-detail-page) .rekap-operator-head > div > span { background: transparent!important; color: var(--sppk-theme-copy)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-rekap, .sppk-route-rekap-tuk, .sppk-route-rekap_bbm, .sppk-route-rekap_jalan, .sppk-route-rekap_houling) .page-shell.main-content #sppkPageContent :is(.rekap-produksi-page, .rekap-detail-page) .rekap-unit-switcher { margin: 0 0 18px!important; padding: 5px!important; gap: 8px!important; border: 1px solid var(--sppk-theme-line)!important; border-radius: 9px!important; background: var(--sppk-theme-surface-soft)!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-rekap, .sppk-route-rekap-tuk, .sppk-route-rekap_bbm, .sppk-route-rekap_jalan, .sppk-route-rekap_houling) .page-shell.main-content #sppkPageContent :is(.rekap-produksi-page, .rekap-detail-page) .rekap-unit-panel.is-active { animation: none!important; transform: none!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-rekap, .sppk-route-rekap-tuk, .sppk-route-rekap_bbm, .sppk-route-rekap_jalan, .sppk-route-rekap_houling) .page-shell.main-content #sppkPageContent :is(.rekap-produksi-page, .rekap-detail-page) .table-responsive { min-width: 0!important; max-width: 100%!important; overflow-x: auto!important; border-radius: 0!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-rekap, .sppk-route-rekap-tuk, .sppk-route-rekap_bbm, .sppk-route-rekap_jalan, .sppk-route-rekap_houling) .page-shell.main-content #sppkPageContent :is(.rekap-produksi-page, .rekap-detail-page) .table { margin: 0!important; border-collapse: collapse!important; border-spacing: 0!important; background: var(--sppk-theme-surface)!important; color: var(--sppk-theme-copy)!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-rekap, .sppk-route-rekap-tuk, .sppk-route-rekap_bbm, .sppk-route-rekap_jalan, .sppk-route-rekap_houling) .page-shell.main-content #sppkPageContent :is(.rekap-produksi-page, .rekap-detail-page) .table :is(th, td) { padding: 12px 16px!important; border-color: var(--sppk-theme-line-soft)!important; box-shadow: none!important; vertical-align: middle!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-rekap, .sppk-route-rekap-tuk, .sppk-route-rekap_bbm, .sppk-route-rekap_jalan, .sppk-route-rekap_houling) .page-shell.main-content #sppkPageContent :is(.rekap-produksi-page, .rekap-detail-page) .table :is(thead, thead tr, thead th) { --bs-table-bg: var(--sppk-theme-surface-soft)!important; --bs-table-color: var(--sppk-theme-copy)!important; --bs-table-accent-bg: transparent!important; background: var(--sppk-theme-surface-soft)!important; background-image: none!important; color: var(--sppk-theme-copy)!important; -webkit-text-fill-color: currentColor!important; border-color: var(--sppk-theme-line)!important; box-shadow: none!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-rekap, .sppk-route-rekap-tuk, .sppk-route-rekap_bbm, .sppk-route-rekap_jalan, .sppk-route-rekap_houling) .page-shell.main-content #sppkPageContent :is(.rekap-produksi-page, .rekap-detail-page) .table thead :is(span, strong, small, i):not(:where(.btn, .btn *, .badge, .badge *)) { color: inherit!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-rekap, .sppk-route-rekap-tuk, .sppk-route-rekap_bbm, .sppk-route-rekap_jalan, .sppk-route-rekap_houling) .page-shell.main-content #sppkPageContent :is(.rekap-produksi-page, .rekap-detail-page) .table tbody td { --bs-table-bg: var(--sppk-theme-surface)!important; --bs-table-color: var(--sppk-theme-copy)!important; --bs-table-accent-bg: transparent!important; background: var(--sppk-theme-surface)!important; color: var(--sppk-theme-copy)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-rekap, .sppk-route-rekap-tuk, .sppk-route-rekap_bbm, .sppk-route-rekap_jalan, .sppk-route-rekap_houling) .page-shell.main-content #sppkPageContent :is(.rekap-produksi-page, .rekap-detail-page) .table tbody tr:nth-child(even) td { background: var(--sppk-theme-surface)!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-rekap, .sppk-route-rekap-tuk, .sppk-route-rekap_bbm, .sppk-route-rekap_jalan, .sppk-route-rekap_houling) .page-shell.main-content #sppkPageContent :is(.rekap-produksi-page, .rekap-detail-page) .table tbody tr:hover td { background: var(--sppk-theme-surface-soft)!important; color: var(--sppk-theme-copy)!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-rekap, .sppk-route-rekap-tuk, .sppk-route-rekap_bbm, .sppk-route-rekap_jalan, .sppk-route-rekap_houling) .page-shell.main-content #sppkPageContent :is(.rekap-produksi-page, .rekap-detail-page) .table tbody td :is(strong, small):not(:where(.btn, .btn *, .badge, .badge *)) { color: inherit!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-rekap, .sppk-route-rekap-tuk, .sppk-route-rekap_bbm, .sppk-route-rekap_jalan, .sppk-route-rekap_houling) .page-shell.main-content #sppkPageContent :is(.rekap-produksi-page, .rekap-detail-page) .rekap-analytics-rail { gap: 12px!important; padding: 16px!important; border: 1px solid var(--sppk-theme-line)!important; border-radius: 9px!important; background: var(--sppk-theme-surface-soft)!important; box-shadow: none!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-rekap, .sppk-route-rekap-tuk, .sppk-route-rekap_bbm, .sppk-route-rekap_jalan, .sppk-route-rekap_houling) .page-shell.main-content #sppkPageContent :is(.rekap-produksi-page, .rekap-detail-page) .rekap-analytics-rail-icon { background: var(--sppk-theme-surface)!important; color: var(--sppk-theme-copy)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-rekap, .sppk-route-rekap-tuk, .sppk-route-rekap_bbm, .sppk-route-rekap_jalan, .sppk-route-rekap_houling) .page-shell.main-content #sppkPageContent :is(.rekap-produksi-page, .rekap-detail-page) :is(.rekap-analytics-rail-copy strong, .rekap-table-empty strong) { color: var(--sppk-theme-heading)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-rekap, .sppk-route-rekap-tuk, .sppk-route-rekap_bbm, .sppk-route-rekap_jalan, .sppk-route-rekap_houling) .page-shell.main-content #sppkPageContent :is(.rekap-produksi-page, .rekap-detail-page) :is(.rekap-analytics-rail-copy small, .rekap-analytics-rail-copy span, .rekap-table-empty span) { color: var(--sppk-theme-muted)!important; -webkit-text-fill-color: currentColor!important; }
html.sppk-recap-embedded body#sppkAppShell.sppk-app-shell:is(.sppk-route-rekap, .sppk-route-rekap-tuk, .sppk-route-rekap_bbm, .sppk-route-rekap_jalan, .sppk-route-rekap_houling) .page-shell.main-content #sppkPageContent { padding: 18px!important; }
html.sppk-recap-embedded body#sppkAppShell.sppk-app-shell:is(.sppk-route-rekap, .sppk-route-rekap-tuk, .sppk-route-rekap_bbm, .sppk-route-rekap_jalan, .sppk-route-rekap_houling) .page-shell.main-content #sppkPageContent > :is(.rekap-produksi-page, .rekap-detail-page) { width: 100%!important; max-width: none!important; margin: 0!important; padding: 0!important; }
@media (max-width: 1023.98px) { html body#sppkAppShell.sppk-app-shell.sppk-route-menu-rekap .page-shell.main-content #sppkPageContent #sppkRecapWorkspace.sppk-recap-clean .recap-workspace-layout { grid-template-columns: 176px minmax(0, 1fr)!important; } }
@media (max-width: 767.98px) {
    html body#sppkAppShell.sppk-app-shell.sppk-route-menu-rekap .page-shell.main-content #sppkPageContent #sppkRecapWorkspace.sppk-recap-clean .recap-workspace-layout { grid-template-columns: 56px minmax(0, 1fr)!important; border-radius: 10px!important; }
    html body#sppkAppShell.sppk-app-shell.sppk-route-menu-rekap .page-shell.main-content #sppkPageContent #sppkRecapWorkspace.sppk-recap-clean .recap-workspace-navigation { padding: 8px 5px!important; }
    html body#sppkAppShell.sppk-app-shell.sppk-route-menu-rekap .page-shell.main-content #sppkPageContent #sppkRecapWorkspace.sppk-recap-clean .recap-workspace-navigation h2 { display: none!important; }
    html body#sppkAppShell.sppk-app-shell.sppk-route-menu-rekap .page-shell.main-content #sppkPageContent #sppkRecapWorkspace.sppk-recap-clean .recap-workspace-tab { min-height: 44px!important; justify-content: center!important; gap: 0!important; padding: 10px 6px!important; }
    html body#sppkAppShell.sppk-app-shell.sppk-route-menu-rekap .page-shell.main-content #sppkPageContent #sppkRecapWorkspace.sppk-recap-clean .recap-workspace-tab-copy { position: absolute!important; width: 1px!important; height: 1px!important; margin: -1px!important; padding: 0!important; overflow: hidden!important; clip: rect(0, 0, 0, 0)!important; white-space: nowrap!important; }
    html body#sppkAppShell.sppk-app-shell.sppk-route-menu-rekap .page-shell.main-content #sppkPageContent #sppkRecapWorkspace.sppk-recap-clean .recap-workspace-tab > .recap-workspace-lock { display: none!important; }
    html body#sppkAppShell.sppk-app-shell.sppk-route-menu-rekap .page-shell.main-content #sppkPageContent #sppkRecapWorkspace.sppk-recap-clean .recap-workspace-report-heading { padding: 14px!important; gap: 10px!important; }
    html body#sppkAppShell.sppk-app-shell.sppk-route-menu-rekap .page-shell.main-content #sppkPageContent #sppkRecapWorkspace.sppk-recap-clean .recap-workspace-report-heading > div { flex-basis: 100px!important; }
    html body#sppkAppShell.sppk-app-shell.sppk-route-menu-rekap .page-shell.main-content #sppkPageContent #sppkRecapWorkspace.sppk-recap-clean .recap-workspace-report-heading p { display: none!important; }
    html body#sppkAppShell.sppk-app-shell.sppk-route-menu-rekap .page-shell.main-content #sppkPageContent #sppkRecapWorkspace.sppk-recap-clean .recap-workspace-open-page { width: 34px!important; min-height: 34px!important; padding: 7px!important; }
    html body#sppkAppShell.sppk-app-shell.sppk-route-menu-rekap .page-shell.main-content #sppkPageContent #sppkRecapWorkspace.sppk-recap-clean .recap-workspace-open-page span { display: none!important; }
    html body#sppkAppShell.sppk-app-shell:is(.sppk-route-rekap, .sppk-route-rekap-tuk, .sppk-route-rekap_bbm, .sppk-route-rekap_jalan, .sppk-route-rekap_houling) .page-shell.main-content #sppkPageContent :is(.rekap-produksi-page, .rekap-detail-page) :is(.rekap-stat-grid, .rekap-detail-stat-grid) { grid-template-columns: repeat(2, minmax(0, 1fr))!important; gap: 10px!important; }
    html body#sppkAppShell.sppk-app-shell:is(.sppk-route-rekap, .sppk-route-rekap-tuk, .sppk-route-rekap_bbm, .sppk-route-rekap_jalan, .sppk-route-rekap_houling) .page-shell.main-content #sppkPageContent :is(.rekap-produksi-page, .rekap-detail-page) :is(.rekap-data-card > .card-header, .rekap-operator-head, .rekap-detail-panel-header) { padding: 14px 16px!important; }
    html body#sppkAppShell.sppk-app-shell:is(.sppk-route-rekap, .sppk-route-rekap-tuk, .sppk-route-rekap_bbm, .sppk-route-rekap_jalan, .sppk-route-rekap_houling) .page-shell.main-content #sppkPageContent :is(.rekap-produksi-page, .rekap-detail-page) :is(.rekap-data-card > .card-body, .rekap-detail-chart-body, .rekap-detail-table-body) { padding: 16px!important; }
    html body#sppkAppShell.sppk-app-shell:is(.sppk-route-rekap, .sppk-route-rekap-tuk, .sppk-route-rekap_bbm, .sppk-route-rekap_jalan, .sppk-route-rekap_houling) .page-shell.main-content #sppkPageContent :is(.rekap-produksi-page, .rekap-detail-page) .rekap-operator-card > .card-body { padding: 0!important; }
    html.sppk-recap-embedded body#sppkAppShell.sppk-app-shell:is(.sppk-route-rekap, .sppk-route-rekap-tuk, .sppk-route-rekap_bbm, .sppk-route-rekap_jalan, .sppk-route-rekap_houling) .page-shell.main-content #sppkPageContent { padding: 14px!important; }
}
}
@layer sppk-typography {
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-rekap .page-shell.main-content #sppkPageContent #sppkRecapWorkspace.sppk-recap-clean { font-size: .875rem!important; line-height: 1.6!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-rekap .page-shell.main-content #sppkPageContent #sppkRecapWorkspace.sppk-recap-clean .recap-workspace-heading h1 { font-size: 1.5rem!important; font-weight: 600!important; line-height: 1.3!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-rekap .page-shell.main-content #sppkPageContent #sppkRecapWorkspace.sppk-recap-clean :is(.recap-workspace-heading p, .recap-workspace-tab, .recap-workspace-tab-copy strong, .recap-workspace-open-page, .recap-workspace-loading-message, .recap-workspace-retry, .recap-workspace-empty) { font-size: .875rem!important; line-height: 1.5!important; font-weight: 400!important; letter-spacing: normal!important; text-transform: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-rekap .page-shell.main-content #sppkPageContent #sppkRecapWorkspace.sppk-recap-clean .recap-workspace-tab-copy strong { font-weight: 500!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-rekap .page-shell.main-content #sppkPageContent #sppkRecapWorkspace.sppk-recap-clean :is(.recap-workspace-tab-copy small, .recap-workspace-navigation h2, .recap-workspace-report-heading p) { font-size: .75rem!important; line-height: 1.5!important; font-weight: 400!important; letter-spacing: normal!important; text-transform: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-rekap .page-shell.main-content #sppkPageContent #sppkRecapWorkspace.sppk-recap-clean .recap-workspace-report-heading h2 { font-size: 1rem!important; line-height: 1.4!important; font-weight: 600!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-rekap .page-shell.main-content #sppkPageContent #sppkRecapWorkspace.sppk-recap-clean .recap-workspace-tab > i { font-size: 1.125rem!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-rekap .page-shell.main-content #sppkPageContent #sppkRecapWorkspace.sppk-recap-clean .recap-workspace-tab > .recap-workspace-lock { font-size: .75rem!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-rekap, .sppk-route-rekap-tuk, .sppk-route-rekap_bbm, .sppk-route-rekap_jalan, .sppk-route-rekap_houling) .page-shell.main-content #sppkPageContent :is(.rekap-produksi-page, .rekap-detail-page) :is(p, td, th, label) { font-size: .875rem!important; line-height: 1.5!important; letter-spacing: normal!important; text-transform: none!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-rekap, .sppk-route-rekap-tuk, .sppk-route-rekap_bbm, .sppk-route-rekap_jalan, .sppk-route-rekap_houling) .page-shell.main-content #sppkPageContent :is(.rekap-produksi-page, .rekap-detail-page) :is(.rekap-production-hero, .rekap-detail-hero) :is(h2, h3) { font-size: 1.5rem!important; line-height: 1.3!important; font-weight: 600!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-rekap, .sppk-route-rekap-tuk, .sppk-route-rekap_bbm, .sppk-route-rekap_jalan, .sppk-route-rekap_houling) .page-shell.main-content #sppkPageContent :is(.rekap-produksi-page, .rekap-detail-page) :is(.rekap-stat-card, .rekap-detail-stat-card) :is(h2, h3, h4, h5) { font-size: 1.25rem!important; line-height: 1.35!important; font-weight: 600!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-rekap, .sppk-route-rekap-tuk, .sppk-route-rekap_bbm, .sppk-route-rekap_jalan, .sppk-route-rekap_houling) .page-shell.main-content #sppkPageContent :is(.rekap-produksi-page, .rekap-detail-page) :is(.rekap-stat-card, .rekap-detail-stat-card) :is(h6, p, small) { font-size: .75rem!important; line-height: 1.5!important; font-weight: 400!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-rekap, .sppk-route-rekap-tuk, .sppk-route-rekap_bbm, .sppk-route-rekap_jalan, .sppk-route-rekap_houling) .page-shell.main-content #sppkPageContent :is(.rekap-produksi-page, .rekap-detail-page) :is(.rekap-data-card > .card-header, .rekap-operator-head, .rekap-detail-panel-header) :is(h3, h4, h5, strong) { font-size: 1rem!important; line-height: 1.4!important; font-weight: 500!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-rekap, .sppk-route-rekap-tuk, .sppk-route-rekap_bbm, .sppk-route-rekap_jalan, .sppk-route-rekap_houling) .page-shell.main-content #sppkPageContent :is(.rekap-produksi-page, .rekap-detail-page) :is(.rekap-data-card > .card-header, .rekap-operator-head, .rekap-detail-panel-header) :is(small, em) { font-size: .75rem!important; line-height: 1.5!important; font-weight: 400!important; letter-spacing: normal!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-rekap, .sppk-route-rekap-tuk, .sppk-route-rekap_bbm, .sppk-route-rekap_jalan, .sppk-route-rekap_houling) .page-shell.main-content #sppkPageContent :is(.rekap-produksi-page, .rekap-detail-page) .table thead th { font-size: .75rem!important; font-weight: 500!important; line-height: 1.5!important; letter-spacing: normal!important; text-transform: none!important; }
}

/* INPUT HARIAN V60 — NEUTRAL WORKSPACE AND CLEAR, QUIET INPUT html body#sppkAppShell.sppk-app-shell:is(.sppk-route-form, .sppk-route-tuk, .sppk-route-input_bbm, .sppk-route-input_jalan, .sppk-route-input_houling) .page-shell.main-content #sppkPageContent #sppkDailyEntryForm.sppk-input-workspace.sppk-input-cleanS */
@layer sppk-input-headers {
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-input .page-shell.main-content #sppkPageContent #sppkDailyInputWorkspace.sppk-daily-input-clean { --daily-selected: #edf0f2!important; display: block!important; width: 100%!important; max-width: 1240px!important; min-width: 0!important; margin: 0 auto!important; padding: 4px 0 24px!important; color: var(--sppk-theme-copy)!important; background: transparent!important; box-shadow: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-input.dark .page-shell.main-content #sppkPageContent #sppkDailyInputWorkspace.sppk-daily-input-clean { --daily-selected: #303030!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-input .page-shell.main-content #sppkPageContent #sppkDailyInputWorkspace.sppk-daily-input-clean *, html body#sppkAppShell.sppk-app-shell:is(.sppk-route-form, .sppk-route-tuk, .sppk-route-input_bbm, .sppk-route-input_jalan, .sppk-route-input_houling) .page-shell.main-content #sppkPageContent #sppkDailyEntryForm.sppk-input-workspace.sppk-input-clean * { box-sizing: border-box!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-input .page-shell.main-content #sppkPageContent #sppkDailyInputWorkspace.sppk-daily-input-clean, html body#sppkAppShell.sppk-app-shell.sppk-route-menu-input .page-shell.main-content #sppkPageContent #sppkDailyInputWorkspace.sppk-daily-input-clean .daily-input-tab, html body#sppkAppShell.sppk-app-shell:is(.sppk-route-form, .sppk-route-tuk, .sppk-route-input_bbm, .sppk-route-input_jalan, .sppk-route-input_houling) .page-shell.main-content #sppkPageContent #sppkDailyEntryForm.sppk-input-workspace.sppk-input-clean, html body#sppkAppShell.sppk-app-shell:is(.sppk-route-form, .sppk-route-tuk, .sppk-route-input_bbm, .sppk-route-input_jalan, .sppk-route-input_houling) .page-shell.main-content #sppkPageContent #sppkDailyEntryForm.sppk-input-workspace.sppk-input-clean #formBulldozer { --sppk-input-header-bg: var(--sppk-theme-surface)!important; --sppk-input-header-ink: var(--sppk-theme-heading)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-input .page-shell.main-content #sppkPageContent #sppkDailyInputWorkspace.sppk-daily-input-clean .daily-input-heading { display: block!important; margin: 0 0 24px!important; padding: 0!important; border: 0!important; background: transparent!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-input .page-shell.main-content #sppkPageContent #sppkDailyInputWorkspace.sppk-daily-input-clean .daily-input-heading h1 { margin: 0 0 8px!important; color: var(--sppk-theme-heading)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-input .page-shell.main-content #sppkPageContent #sppkDailyInputWorkspace.sppk-daily-input-clean .daily-input-heading p { margin: 0!important; color: var(--sppk-theme-copy)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-input .page-shell.main-content #sppkPageContent #sppkDailyInputWorkspace.sppk-daily-input-clean .daily-input-layout { display: grid!important; grid-template-columns: 200px minmax(0, 1fr)!important; width: 100%!important; min-width: 0!important; height: max(480px, calc(100dvh - 230px))!important; min-height: 480px!important; overflow: hidden!important; border: 1px solid var(--sppk-theme-line)!important; border-radius: 12px!important; background: var(--sppk-theme-surface)!important; box-shadow: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-input .page-shell.main-content #sppkPageContent #sppkDailyInputWorkspace.sppk-daily-input-clean .daily-input-navigation { display: flex!important; flex-direction: column!important; min-width: 0!important; min-height: 0!important; padding: 14px 10px!important; overflow-y: auto!important; border: 0!important; border-right: 1px solid var(--sppk-theme-line)!important; background: var(--sppk-theme-surface)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-input .page-shell.main-content #sppkPageContent #sppkDailyInputWorkspace.sppk-daily-input-clean .daily-input-navigation h2 { margin: 4px 10px 14px!important; color: var(--sppk-theme-muted)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-input .page-shell.main-content #sppkPageContent #sppkDailyInputWorkspace.sppk-daily-input-clean .daily-input-tabs { display: grid!important; align-content: start!important; gap: 4px!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-input .page-shell.main-content #sppkPageContent #sppkDailyInputWorkspace.sppk-daily-input-clean .daily-input-tab { display: flex!important; align-items: center!important; min-width: 0!important; min-height: 56px!important; gap: 10px!important; margin: 0!important; padding: 10px!important; border: 0!important; border-radius: 8px!important; background: transparent!important; color: var(--sppk-theme-copy)!important; -webkit-text-fill-color: currentColor!important; text-decoration: none!important; box-shadow: none!important; transform: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-input .page-shell.main-content #sppkPageContent #sppkDailyInputWorkspace.sppk-daily-input-clean .daily-input-tab > i { flex: 0 0 18px!important; width: 18px!important; padding: 0!important; border: 0!important; border-radius: 0!important; background: transparent!important; color: inherit!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-input .page-shell.main-content #sppkPageContent #sppkDailyInputWorkspace.sppk-daily-input-clean .daily-input-tab-copy { display: grid!important; gap: 3px!important; min-width: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-input .page-shell.main-content #sppkPageContent #sppkDailyInputWorkspace.sppk-daily-input-clean .daily-input-tab-copy strong { color: inherit!important; -webkit-text-fill-color: currentColor!important; overflow-wrap: anywhere!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-input .page-shell.main-content #sppkPageContent #sppkDailyInputWorkspace.sppk-daily-input-clean .daily-input-tab-copy small { color: var(--sppk-theme-muted)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-input .page-shell.main-content #sppkPageContent #sppkDailyInputWorkspace.sppk-daily-input-clean .daily-input-tab:is(:hover, :focus-visible) { background: var(--sppk-theme-surface-soft)!important; color: var(--sppk-theme-heading)!important; transform: none!important; box-shadow: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-input .page-shell.main-content #sppkPageContent #sppkDailyInputWorkspace.sppk-daily-input-clean .daily-input-tab.is-active { background: var(--daily-selected)!important; color: var(--sppk-theme-heading)!important; -webkit-text-fill-color: currentColor!important; box-shadow: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-input .page-shell.main-content #sppkPageContent #sppkDailyInputWorkspace.sppk-daily-input-clean .daily-input-tab.is-active strong, html body#sppkAppShell.sppk-app-shell.sppk-route-menu-input .page-shell.main-content #sppkPageContent #sppkDailyInputWorkspace.sppk-daily-input-clean .daily-input-tab.is-active > i { color: var(--sppk-theme-heading)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-input .page-shell.main-content #sppkPageContent #sppkDailyInputWorkspace.sppk-daily-input-clean .daily-input-tab[aria-disabled="true"] { opacity: 1!important; color: var(--sppk-theme-muted)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-input .page-shell.main-content #sppkPageContent #sppkDailyInputWorkspace.sppk-daily-input-clean .daily-input-tab > .daily-input-lock { flex: 0 0 12px!important; width: 12px!important; margin-left: auto!important; color: var(--sppk-theme-muted)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-input .page-shell.main-content #sppkPageContent #sppkDailyInputWorkspace.sppk-daily-input-clean .daily-input-main { display: flex!important; flex-direction: column!important; min-width: 0!important; min-height: 0!important; background: var(--sppk-theme-surface)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-input .page-shell.main-content #sppkPageContent #sppkDailyInputWorkspace.sppk-daily-input-clean .daily-input-form-heading { display: flex!important; flex: 0 0 auto!important; align-items: flex-start!important; justify-content: space-between!important; flex-wrap: wrap!important; gap: 12px!important; margin: 0!important; padding: 18px 20px!important; border: 0!important; border-bottom: 1px solid var(--sppk-theme-line)!important; border-radius: 0!important; background: var(--sppk-theme-surface)!important; background-image: none!important; box-shadow: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-input .page-shell.main-content #sppkPageContent #sppkDailyInputWorkspace.sppk-daily-input-clean .daily-input-form-heading > div { flex: 1 1 200px!important; min-width: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-input .page-shell.main-content #sppkPageContent #sppkDailyInputWorkspace.sppk-daily-input-clean .daily-input-form-heading h2 { margin: 0!important; color: var(--sppk-theme-heading)!important; -webkit-text-fill-color: currentColor!important; overflow-wrap: anywhere!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-input .page-shell.main-content #sppkPageContent #sppkDailyInputWorkspace.sppk-daily-input-clean .daily-input-form-heading p { display: block!important; margin: 5px 0 0!important; color: var(--sppk-theme-muted)!important; -webkit-text-fill-color: currentColor!important; overflow-wrap: anywhere!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-input .page-shell.main-content #sppkPageContent #sppkDailyInputWorkspace.sppk-daily-input-clean .daily-input-open-page { display: inline-flex!important; flex: 0 0 auto!important; align-items: center!important; justify-content: center!important; gap: 7px!important; min-height: 36px!important; margin: 0 0 0 auto!important; padding: 8px 11px!important; border: 1px solid var(--sppk-theme-line)!important; border-radius: 8px!important; background: var(--sppk-theme-surface)!important; color: var(--sppk-theme-copy)!important; -webkit-text-fill-color: currentColor!important; text-decoration: none!important; box-shadow: none!important; transform: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-input .page-shell.main-content #sppkPageContent #sppkDailyInputWorkspace.sppk-daily-input-clean .daily-input-open-page :is(i, span) { color: inherit!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-input .page-shell.main-content #sppkPageContent #sppkDailyInputWorkspace.sppk-daily-input-clean .daily-input-open-page:is(:hover, :focus-visible) { background: var(--sppk-theme-surface-soft)!important; color: var(--sppk-theme-heading)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-input .page-shell.main-content #sppkPageContent #sppkDailyInputWorkspace.sppk-daily-input-clean .daily-input-panels { position: relative!important; flex: 1 1 auto!important; min-width: 0!important; min-height: 0!important; overflow: hidden!important; background: var(--sppk-theme-surface)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-input .page-shell.main-content #sppkPageContent #sppkDailyInputWorkspace.sppk-daily-input-clean .daily-input-panel { position: relative!important; width: 100%!important; height: 100%!important; min-width: 0!important; min-height: 0!important; overflow: hidden!important; background: var(--sppk-theme-surface)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-input .page-shell.main-content #sppkPageContent #sppkDailyInputWorkspace.sppk-daily-input-clean .daily-input-frame { display: block!important; width: 100%!important; height: 100%!important; min-width: 0!important; min-height: 0!important; margin: 0!important; padding: 0!important; border: 0!important; background: var(--sppk-theme-surface)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-input .page-shell.main-content #sppkPageContent #sppkDailyInputWorkspace.sppk-daily-input-clean .daily-input-loading { position: absolute!important; inset: 0!important; display: flex!important; align-items: center!important; justify-content: center!important; flex-direction: column!important; gap: 12px!important; padding: 24px!important; background: var(--sppk-theme-surface)!important; color: var(--sppk-theme-muted)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-input .page-shell.main-content #sppkPageContent #sppkDailyInputWorkspace.sppk-daily-input-clean .daily-input-loading-message { color: var(--sppk-theme-muted)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-input .page-shell.main-content #sppkPageContent #sppkDailyInputWorkspace.sppk-daily-input-clean .daily-input-retry { display: inline-flex!important; align-items: center!important; justify-content: center!important; min-height: 36px!important; padding: 8px 12px!important; border: 1px solid var(--sppk-theme-line)!important; border-radius: 8px!important; background: var(--sppk-theme-surface-soft)!important; color: var(--sppk-theme-copy)!important; -webkit-text-fill-color: currentColor!important; box-shadow: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-input .page-shell.main-content #sppkPageContent #sppkDailyInputWorkspace.sppk-daily-input-clean .daily-input-noscript { margin: 0!important; padding: 24px!important; color: var(--sppk-theme-muted)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-input .page-shell.main-content #sppkPageContent #sppkDailyInputWorkspace.sppk-daily-input-clean :is(a, button):focus-visible { outline: 2px solid var(--sppk-theme-muted)!important; outline-offset: 2px!important; box-shadow: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-input .page-shell.main-content #sppkPageContent #sppkDailyInputWorkspace.sppk-daily-input-clean [hidden], html body#sppkAppShell.sppk-app-shell:is(.sppk-route-form, .sppk-route-tuk, .sppk-route-input_bbm, .sppk-route-input_jalan, .sppk-route-input_houling) .page-shell.main-content #sppkPageContent #sppkDailyEntryForm.sppk-input-workspace.sppk-input-clean [hidden] { display: none!important; }

html body#sppkAppShell.sppk-app-shell:is(.sppk-route-form, .sppk-route-tuk, .sppk-route-input_bbm, .sppk-route-input_jalan, .sppk-route-input_houling) .page-shell.main-content #sppkPageContent #sppkDailyEntryForm.sppk-input-workspace.sppk-input-clean { --daily-field-line: #d4d4d4!important; --daily-focus: #777777!important; --daily-placeholder: #707070!important; --daily-primary-bg: #303030!important; --daily-primary-ink: #ffffff!important; --daily-primary-hover: #454545!important; --daily-invalid: #b42318!important; color-scheme: light!important; width: 100%!important; max-width: 1100px!important; min-width: 0!important; margin: 0 auto!important; padding: 4px 0 28px!important; color: var(--sppk-theme-copy)!important; background: transparent!important; }
html body#sppkAppShell.sppk-app-shell.dark:is(.sppk-route-form, .sppk-route-tuk, .sppk-route-input_bbm, .sppk-route-input_jalan, .sppk-route-input_houling) .page-shell.main-content #sppkPageContent #sppkDailyEntryForm.sppk-input-workspace.sppk-input-clean { --daily-field-line: #505050!important; --daily-focus: #b5b5b5!important; --daily-placeholder: #a6a6a6!important; --daily-primary-bg: #ededed!important; --daily-primary-ink: #202020!important; --daily-primary-hover: #ffffff!important; --daily-invalid: #ffaba5!important; color-scheme: dark!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-form, .sppk-route-tuk, .sppk-route-input_bbm, .sppk-route-input_jalan, .sppk-route-input_houling) .page-shell.main-content #sppkPageContent #sppkDailyEntryForm.sppk-input-workspace.sppk-input-clean .sppk-form-hero { display: block!important; min-height: 0!important; margin: 0 0 24px!important; padding: 0!important; overflow: visible!important; border: 0!important; border-radius: 0!important; background: transparent!important; background-image: none!important; box-shadow: none!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-form, .sppk-route-tuk, .sppk-route-input_bbm, .sppk-route-input_jalan, .sppk-route-input_houling) .page-shell.main-content #sppkPageContent #sppkDailyEntryForm.sppk-input-workspace.sppk-input-clean .sppk-form-hero .dashboard-title { margin: 0 0 8px!important; color: var(--sppk-theme-heading)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-form, .sppk-route-tuk, .sppk-route-input_bbm, .sppk-route-input_jalan, .sppk-route-input_houling) .page-shell.main-content #sppkPageContent #sppkDailyEntryForm.sppk-input-workspace.sppk-input-clean .sppk-form-hero .dashboard-subtitle { margin: 0!important; color: var(--sppk-theme-copy)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-form, .sppk-route-tuk, .sppk-route-input_bbm, .sppk-route-input_jalan, .sppk-route-input_houling) .page-shell.main-content #sppkPageContent #sppkDailyEntryForm.sppk-input-workspace.sppk-input-clean .sppk-form-hero :is(.dashboard-logo, .dashboard-icon, .dashboard-title > i) { display: none!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-form, .sppk-route-tuk, .sppk-route-input_bbm, .sppk-route-input_jalan, .sppk-route-input_houling) .page-shell.main-content #sppkPageContent #sppkDailyEntryForm.sppk-input-workspace.sppk-input-clean .daily-entry-form { min-width: 0!important; margin: 0!important; padding: 0!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-form, .sppk-route-tuk, .sppk-route-input_bbm, .sppk-route-input_jalan, .sppk-route-input_houling) .page-shell.main-content #sppkPageContent #sppkDailyEntryForm.sppk-input-workspace.sppk-input-clean :is(.sppk-form-shell, .custom-card) { min-width: 0!important; margin: 0 0 20px!important; overflow: visible!important; border: 1px solid var(--sppk-theme-line)!important; border-radius: 10px!important; background: var(--sppk-theme-surface)!important; background-image: none!important; box-shadow: none!important; transform: none!important; transition: none!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-form, .sppk-route-tuk, .sppk-route-input_bbm, .sppk-route-input_jalan, .sppk-route-input_houling) .page-shell.main-content #sppkPageContent #sppkDailyEntryForm.sppk-input-workspace.sppk-input-clean :is(.sppk-form-shell, .custom-card):is(:hover, :focus-within) { border-color: var(--sppk-theme-line)!important; background: var(--sppk-theme-surface)!important; box-shadow: none!important; transform: none!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-form, .sppk-route-tuk, .sppk-route-input_bbm, .sppk-route-input_jalan, .sppk-route-input_houling) .page-shell.main-content #sppkPageContent #sppkDailyEntryForm.sppk-input-workspace.sppk-input-clean :is(.sppk-form-shell, .custom-card) > .card-body { min-width: 0!important; padding: 20px!important; background: var(--sppk-theme-surface)!important; border-radius: inherit!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-form, .sppk-route-tuk, .sppk-route-input_bbm, .sppk-route-input_jalan, .sppk-route-input_houling) .page-shell.main-content #sppkPageContent #sppkDailyEntryForm.sppk-input-workspace.sppk-input-clean .card-header { min-height: 0!important; margin: 0!important; padding: 18px 20px 0!important; border: 0!important; border-radius: 10px 10px 0 0!important; background: var(--sppk-theme-surface)!important; background-image: none!important; color: var(--sppk-theme-heading)!important; -webkit-text-fill-color: currentColor!important; box-shadow: none!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-form, .sppk-route-tuk, .sppk-route-input_bbm, .sppk-route-input_jalan, .sppk-route-input_houling) .page-shell.main-content #sppkPageContent #sppkDailyEntryForm.sppk-input-workspace.sppk-input-clean :is(.card-header h2, .section-title, .daily-entry-section-title h2) { display: block!important; margin: 0 0 16px!important; color: var(--sppk-theme-heading)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-form, .sppk-route-tuk, .sppk-route-input_bbm, .sppk-route-input_jalan, .sppk-route-input_houling) .page-shell.main-content #sppkPageContent #sppkDailyEntryForm.sppk-input-workspace.sppk-input-clean .card-header h2 { margin: 0!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-form, .sppk-route-tuk, .sppk-route-input_bbm, .sppk-route-input_jalan, .sppk-route-input_houling) .page-shell.main-content #sppkPageContent #sppkDailyEntryForm.sppk-input-workspace.sppk-input-clean :is(.section-title > i, .card-header h2 > i) { margin-right: 7px!important; color: var(--sppk-theme-muted)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-form, .sppk-route-tuk, .sppk-route-input_bbm, .sppk-route-input_jalan, .sppk-route-input_houling) .page-shell.main-content #sppkPageContent #sppkDailyEntryForm.sppk-input-workspace.sppk-input-clean .daily-entry-form .row { display: grid!important; grid-template-columns: repeat(2, minmax(0, 1fr))!important; gap: 18px 20px!important; width: 100%!important; max-width: 100%!important; margin: 0!important; padding: 0!important; --bs-gutter-x: 0!important; --bs-gutter-y: 0!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-form, .sppk-route-tuk, .sppk-route-input_bbm, .sppk-route-input_jalan, .sppk-route-input_houling) .page-shell.main-content #sppkPageContent #sppkDailyEntryForm.sppk-input-workspace.sppk-input-clean .daily-entry-form .row > * { flex: none!important; width: auto!important; max-width: 100%!important; min-width: 0!important; margin: 0!important; padding: 0!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-form, .sppk-route-tuk, .sppk-route-input_bbm, .sppk-route-input_jalan, .sppk-route-input_houling) .page-shell.main-content #sppkPageContent #sppkDailyEntryForm.sppk-input-workspace.sppk-input-clean .daily-entry-form .row > :is(.col-12, .col-md-12, .daily-entry-section-title) { grid-column: 1 / -1!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-form, .sppk-route-tuk, .sppk-route-input_bbm, .sppk-route-input_jalan, .sppk-route-input_houling) .page-shell.main-content #sppkPageContent #sppkDailyEntryForm.sppk-input-workspace.sppk-input-clean .daily-entry-section-title { min-width: 0!important; margin: 22px 0 16px!important; padding: 20px 0 0!important; border-top: 1px solid var(--sppk-theme-line-soft)!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-form, .sppk-route-tuk, .sppk-route-input_bbm, .sppk-route-input_jalan, .sppk-route-input_houling) .page-shell.main-content #sppkPageContent #sppkDailyEntryForm.sppk-input-workspace.sppk-input-clean .daily-entry-form .row > .daily-entry-section-title { margin: 4px 0 0!important; padding: 20px 0 0!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-form, .sppk-route-tuk, .sppk-route-input_bbm, .sppk-route-input_jalan, .sppk-route-input_houling) .page-shell.main-content #sppkPageContent #sppkDailyEntryForm.sppk-input-workspace.sppk-input-clean .daily-entry-section-title:first-child, html body#sppkAppShell.sppk-app-shell:is(.sppk-route-form, .sppk-route-tuk, .sppk-route-input_bbm, .sppk-route-input_jalan, .sppk-route-input_houling) .page-shell.main-content #sppkPageContent #sppkDailyEntryForm.sppk-input-workspace.sppk-input-clean .daily-entry-form .row > .daily-entry-section-title:first-child { margin-top: 0!important; padding-top: 0!important; border-top: 0!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-form, .sppk-route-tuk, .sppk-route-input_bbm, .sppk-route-input_jalan, .sppk-route-input_houling) .page-shell.main-content #sppkPageContent #sppkDailyEntryForm.sppk-input-workspace.sppk-input-clean .daily-entry-section-title h2 { margin: 0!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-form, .sppk-route-tuk, .sppk-route-input_bbm, .sppk-route-input_jalan, .sppk-route-input_houling) .page-shell.main-content #sppkPageContent #sppkDailyEntryForm.sppk-input-workspace.sppk-input-clean .daily-entry-section-title p { margin: 6px 0 0!important; color: var(--sppk-theme-muted)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-form, .sppk-route-tuk, .sppk-route-input_bbm, .sppk-route-input_jalan, .sppk-route-input_houling) .page-shell.main-content #sppkPageContent #sppkDailyEntryForm.sppk-input-workspace.sppk-input-clean .unit-box { min-width: 0!important; margin: 0 0 16px!important; padding: 18px!important; overflow: visible!important; border: 1px solid var(--sppk-theme-line-soft)!important; border-radius: 8px!important; background: var(--sppk-theme-surface)!important; box-shadow: none!important; transform: none!important; transition: none!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-form, .sppk-route-tuk, .sppk-route-input_bbm, .sppk-route-input_jalan, .sppk-route-input_houling) .page-shell.main-content #sppkPageContent #sppkDailyEntryForm.sppk-input-workspace.sppk-input-clean .unit-box:last-child { margin-bottom: 0!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-form, .sppk-route-tuk, .sppk-route-input_bbm, .sppk-route-input_jalan, .sppk-route-input_houling) .page-shell.main-content #sppkPageContent #sppkDailyEntryForm.sppk-input-workspace.sppk-input-clean .unit-box:is(:hover, :focus-within) { background: var(--sppk-theme-surface)!important; border-color: var(--sppk-theme-line-soft)!important; box-shadow: none!important; transform: none!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-form, .sppk-route-tuk, .sppk-route-input_bbm, .sppk-route-input_jalan, .sppk-route-input_houling) .page-shell.main-content #sppkPageContent #sppkDailyEntryForm.sppk-input-workspace.sppk-input-clean .unit-title { display: block!important; margin: 0 0 16px!important; color: var(--sppk-theme-heading)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-form, .sppk-route-tuk, .sppk-route-input_bbm, .sppk-route-input_jalan, .sppk-route-input_houling) .page-shell.main-content #sppkPageContent #sppkDailyEntryForm.sppk-input-workspace.sppk-input-clean :is(.sppk-form-hero, .custom-card, .sppk-form-shell, .unit-title)::before, html body#sppkAppShell.sppk-app-shell:is(.sppk-route-form, .sppk-route-tuk, .sppk-route-input_bbm, .sppk-route-input_jalan, .sppk-route-input_houling) .page-shell.main-content #sppkPageContent #sppkDailyEntryForm.sppk-input-workspace.sppk-input-clean :is(.sppk-form-hero, .custom-card, .sppk-form-shell)::after { display: none!important; content: none!important; animation: none!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-form, .sppk-route-tuk, .sppk-route-input_bbm, .sppk-route-input_jalan, .sppk-route-input_houling) .page-shell.main-content #sppkPageContent #sppkDailyEntryForm.sppk-input-workspace.sppk-input-clean label { display: flex!important; flex-wrap: wrap!important; align-items: baseline!important; gap: 4px 7px!important; margin: 0 0 8px!important; padding: 0!important; color: var(--sppk-theme-text)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-form, .sppk-route-tuk, .sppk-route-input_bbm, .sppk-route-input_jalan, .sppk-route-input_houling) .page-shell.main-content #sppkPageContent #sppkDailyEntryForm.sppk-input-workspace.sppk-input-clean .daily-entry-required { color: var(--sppk-theme-muted)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-form, .sppk-route-tuk, .sppk-route-input_bbm, .sppk-route-input_jalan, .sppk-route-input_houling) .page-shell.main-content #sppkPageContent #sppkDailyEntryForm.sppk-input-workspace.sppk-input-clean :is(.form-control, .form-select) { width: 100%!important; max-width: 100%!important; min-width: 0!important; height: auto!important; min-height: 44px!important; margin: 0!important; padding: 10px 12px!important; border: 1px solid var(--daily-field-line)!important; border-radius: 8px!important; background-color: var(--sppk-theme-surface)!important; color: var(--sppk-theme-text)!important; -webkit-text-fill-color: currentColor!important; box-shadow: none!important; transform: none!important; transition: border-color 120ms ease!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-form, .sppk-route-tuk, .sppk-route-input_bbm, .sppk-route-input_jalan, .sppk-route-input_houling) .page-shell.main-content #sppkPageContent #sppkDailyEntryForm.sppk-input-workspace.sppk-input-clean select:is(.form-control, .form-select) { padding-right: 36px!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-form, .sppk-route-tuk, .sppk-route-input_bbm, .sppk-route-input_jalan, .sppk-route-input_houling) .page-shell.main-content #sppkPageContent #sppkDailyEntryForm.sppk-input-workspace.sppk-input-clean .form-select { --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23777777' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m3 6 5 5 5-5'/%3e%3c/svg%3e")!important; background-image: var(--bs-form-select-bg-img)!important; background-repeat: no-repeat!important; background-position: right 12px center!important; background-size: 16px 12px!important; }
html body#sppkAppShell.sppk-app-shell.dark:is(.sppk-route-form, .sppk-route-tuk, .sppk-route-input_bbm, .sppk-route-input_jalan, .sppk-route-input_houling) .page-shell.main-content #sppkPageContent #sppkDailyEntryForm.sppk-input-workspace.sppk-input-clean .form-select { --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23afafaf' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m3 6 5 5 5-5'/%3e%3c/svg%3e")!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-form, .sppk-route-tuk, .sppk-route-input_bbm, .sppk-route-input_jalan, .sppk-route-input_houling) .page-shell.main-content #sppkPageContent #sppkDailyEntryForm.sppk-input-workspace.sppk-input-clean :is(.form-control, .form-select):focus { border-color: var(--daily-focus)!important; background-color: var(--sppk-theme-surface)!important; color: var(--sppk-theme-text)!important; outline: 2px solid var(--daily-focus)!important; outline-offset: 2px!important; box-shadow: none!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-form, .sppk-route-tuk, .sppk-route-input_bbm, .sppk-route-input_jalan, .sppk-route-input_houling) .page-shell.main-content #sppkPageContent #sppkDailyEntryForm.sppk-input-workspace.sppk-input-clean :is(.form-control, .form-select)::placeholder { color: var(--daily-placeholder)!important; -webkit-text-fill-color: currentColor!important; opacity: 1!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-form, .sppk-route-tuk, .sppk-route-input_bbm, .sppk-route-input_jalan, .sppk-route-input_houling) .page-shell.main-content #sppkPageContent #sppkDailyEntryForm.sppk-input-workspace.sppk-input-clean textarea.form-control { min-height: 112px!important; height: auto!important; padding: 12px!important; resize: vertical!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-form, .sppk-route-tuk, .sppk-route-input_bbm, .sppk-route-input_jalan, .sppk-route-input_houling) .page-shell.main-content #sppkPageContent #sppkDailyEntryForm.sppk-input-workspace.sppk-input-clean :is(.form-control, .form-select):disabled, html body#sppkAppShell.sppk-app-shell:is(.sppk-route-form, .sppk-route-tuk, .sppk-route-input_bbm, .sppk-route-input_jalan, .sppk-route-input_houling) .page-shell.main-content #sppkPageContent #sppkDailyEntryForm.sppk-input-workspace.sppk-input-clean .form-control[readonly] { background-color: var(--sppk-theme-surface-soft)!important; color: var(--sppk-theme-muted)!important; cursor: default!important; opacity: 1!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-form, .sppk-route-tuk, .sppk-route-input_bbm, .sppk-route-input_jalan, .sppk-route-input_houling) .page-shell.main-content #sppkPageContent #sppkDailyEntryForm.sppk-input-workspace.sppk-input-clean .unit-type-help { display: block!important; margin: 7px 0 0!important; color: var(--sppk-theme-muted)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-form, .sppk-route-tuk, .sppk-route-input_bbm, .sppk-route-input_jalan, .sppk-route-input_houling) .page-shell.main-content #sppkPageContent #sppkDailyEntryForm.sppk-input-workspace.sppk-input-clean :is(.is-invalid, .was-validated :invalid) { border-color: var(--daily-invalid)!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-form, .sppk-route-tuk, .sppk-route-input_bbm, .sppk-route-input_jalan, .sppk-route-input_houling) .page-shell.main-content #sppkPageContent #sppkDailyEntryForm.sppk-input-workspace.sppk-input-clean :is(.is-invalid, .was-validated :invalid):focus { outline-color: var(--daily-invalid)!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-form, .sppk-route-tuk, .sppk-route-input_bbm, .sppk-route-input_jalan, .sppk-route-input_houling) .page-shell.main-content #sppkPageContent #sppkDailyEntryForm.sppk-input-workspace.sppk-input-clean .invalid-feedback { color: var(--daily-invalid)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-form, .sppk-route-tuk, .sppk-route-input_bbm, .sppk-route-input_jalan, .sppk-route-input_houling) .page-shell.main-content #sppkPageContent #sppkDailyEntryForm.sppk-input-workspace.sppk-input-clean .sppk-input-actions { display: flex!important; flex-direction: row!important; flex-wrap: wrap!important; align-items: center!important; justify-content: flex-end!important; gap: 12px 20px!important; width: 100%!important; margin: 20px 0 0!important; padding: 18px 0 0!important; border: 0!important; border-top: 1px solid var(--sppk-theme-line-soft)!important; border-radius: 0!important; background: transparent!important; box-shadow: none!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-form, .sppk-route-tuk, .sppk-route-input_bbm, .sppk-route-input_jalan, .sppk-route-input_houling) .page-shell.main-content #sppkPageContent #sppkDailyEntryForm.sppk-input-workspace.sppk-input-clean .card-footer.sppk-input-actions { margin: 0!important; padding: 18px 20px!important; border-radius: 0 0 10px 10px!important; background: var(--sppk-theme-surface)!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-form, .sppk-route-tuk, .sppk-route-input_bbm, .sppk-route-input_jalan, .sppk-route-input_houling) .page-shell.main-content #sppkPageContent #sppkDailyEntryForm.sppk-input-workspace.sppk-input-clean .daily-entry-form .row > .sppk-input-actions { margin-top: 2px!important; padding: 18px 0 0!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-form, .sppk-route-tuk, .sppk-route-input_bbm, .sppk-route-input_jalan, .sppk-route-input_houling) .page-shell.main-content #sppkPageContent #sppkDailyEntryForm.sppk-input-workspace.sppk-input-clean .sppk-input-actions > :is(.custom-alert, .footer-warning) { flex: 1 1 240px!important; display: block!important; min-width: 0!important; margin: 0!important; padding: 0!important; border: 0!important; border-radius: 0!important; background: transparent!important; color: var(--sppk-theme-muted)!important; -webkit-text-fill-color: currentColor!important; box-shadow: none!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-form, .sppk-route-tuk, .sppk-route-input_bbm, .sppk-route-input_jalan, .sppk-route-input_houling) .page-shell.main-content #sppkPageContent #sppkDailyEntryForm.sppk-input-workspace.sppk-input-clean .sppk-input-actions > :is(.custom-alert, .footer-warning) i { margin-right: 5px!important; color: inherit!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-form, .sppk-route-tuk, .sppk-route-input_bbm, .sppk-route-input_jalan, .sppk-route-input_houling) .page-shell.main-content #sppkPageContent #sppkDailyEntryForm.sppk-input-workspace.sppk-input-clean .sppk-input-actions > #btnSimpan { display: inline-flex!important; flex: 0 0 auto!important; align-items: center!important; justify-content: center!important; gap: 8px!important; width: auto!important; max-width: 100%!important; min-height: 42px!important; margin: 0 0 0 auto!important; padding: 10px 16px!important; border: 1px solid var(--daily-primary-bg)!important; border-radius: 8px!important; background: var(--daily-primary-bg)!important; background-image: none!important; color: var(--daily-primary-ink)!important; -webkit-text-fill-color: currentColor!important; white-space: normal!important; box-shadow: none!important; filter: none!important; transform: none!important; transition: background-color 120ms ease!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-form, .sppk-route-tuk, .sppk-route-input_bbm, .sppk-route-input_jalan, .sppk-route-input_houling) .page-shell.main-content #sppkPageContent #sppkDailyEntryForm.sppk-input-workspace.sppk-input-clean .sppk-input-actions > #btnSimpan > i { margin: 0!important; color: inherit!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-form, .sppk-route-tuk, .sppk-route-input_bbm, .sppk-route-input_jalan, .sppk-route-input_houling) .page-shell.main-content #sppkPageContent #sppkDailyEntryForm.sppk-input-workspace.sppk-input-clean .sppk-input-actions > #btnSimpan:is(:hover, :focus-visible) { border-color: var(--daily-primary-hover)!important; background: var(--daily-primary-hover)!important; color: var(--daily-primary-ink)!important; box-shadow: none!important; filter: none!important; transform: none!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-form, .sppk-route-tuk, .sppk-route-input_bbm, .sppk-route-input_jalan, .sppk-route-input_houling) .page-shell.main-content #sppkPageContent #sppkDailyEntryForm.sppk-input-workspace.sppk-input-clean .sppk-input-actions > #btnSimpan:focus-visible { outline: 2px solid var(--daily-focus)!important; outline-offset: 3px!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-form, .sppk-route-tuk, .sppk-route-input_bbm, .sppk-route-input_jalan, .sppk-route-input_houling) .page-shell.main-content #sppkPageContent #sppkDailyEntryForm.sppk-input-workspace.sppk-input-clean .sppk-input-actions > #btnSimpan:disabled { opacity: .6!important; cursor: wait!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-form, .sppk-route-tuk, .sppk-route-input_bbm, .sppk-route-input_jalan, .sppk-route-input_houling) .page-shell.main-content #sppkPageContent #sppkDailyEntryForm.sppk-input-workspace.sppk-input-clean .sppk-input-table { width: 100%!important; max-width: 100%!important; min-width: 0!important; padding: 0!important; overflow-x: auto!important; scrollbar-color: var(--daily-field-line) transparent!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-form, .sppk-route-tuk, .sppk-route-input_bbm, .sppk-route-input_jalan, .sppk-route-input_houling) .page-shell.main-content #sppkPageContent #sppkDailyEntryForm.sppk-input-workspace.sppk-input-clean .sppk-input-table:focus-visible { outline: 2px solid var(--daily-focus)!important; outline-offset: 2px!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-form, .sppk-route-tuk, .sppk-route-input_bbm, .sppk-route-input_jalan, .sppk-route-input_houling) .page-shell.main-content #sppkPageContent #sppkDailyEntryForm.sppk-input-workspace.sppk-input-clean .sppk-input-table .table { width: 100%!important; min-width: 880px!important; margin: 0!important; border-collapse: collapse!important; border-spacing: 0!important; background: var(--sppk-theme-surface)!important; color: var(--sppk-theme-copy)!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-form, .sppk-route-tuk, .sppk-route-input_bbm, .sppk-route-input_jalan, .sppk-route-input_houling) .page-shell.main-content #sppkPageContent #sppkDailyEntryForm.sppk-input-workspace.sppk-input-clean .sppk-input-table :is(thead, thead tr, thead th) { --bs-table-bg: var(--sppk-theme-surface-soft)!important; --bs-table-color: var(--sppk-theme-copy)!important; --bs-table-accent-bg: transparent!important; background: var(--sppk-theme-surface-soft)!important; background-image: none!important; color: var(--sppk-theme-copy)!important; -webkit-text-fill-color: currentColor!important; box-shadow: none!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-form, .sppk-route-tuk, .sppk-route-input_bbm, .sppk-route-input_jalan, .sppk-route-input_houling) .page-shell.main-content #sppkPageContent #sppkDailyEntryForm.sppk-input-workspace.sppk-input-clean .sppk-input-table :is(th, td) { padding: 12px 10px!important; border: 0!important; border-bottom: 1px solid var(--sppk-theme-line-soft)!important; border-radius: 0!important; vertical-align: middle!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-form, .sppk-route-tuk, .sppk-route-input_bbm, .sppk-route-input_jalan, .sppk-route-input_houling) .page-shell.main-content #sppkPageContent #sppkDailyEntryForm.sppk-input-workspace.sppk-input-clean .sppk-input-table tbody :is(tr, td) { --bs-table-bg: var(--sppk-theme-surface)!important; --bs-table-color: var(--sppk-theme-copy)!important; --bs-table-accent-bg: transparent!important; background: var(--sppk-theme-surface)!important; color: var(--sppk-theme-copy)!important; -webkit-text-fill-color: currentColor!important; box-shadow: none!important; transform: none!important; transition: none!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-form, .sppk-route-tuk, .sppk-route-input_bbm, .sppk-route-input_jalan, .sppk-route-input_houling) .page-shell.main-content #sppkPageContent #sppkDailyEntryForm.sppk-input-workspace.sppk-input-clean .sppk-input-table tbody tr:is(:hover, :focus-within) { background: var(--sppk-theme-surface)!important; box-shadow: none!important; transform: none!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-form, .sppk-route-tuk, .sppk-route-input_bbm, .sppk-route-input_jalan, .sppk-route-input_houling) .page-shell.main-content #sppkPageContent #sppkDailyEntryForm.sppk-input-workspace.sppk-input-clean .sppk-input-table th:first-child { width: 44px!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-form, .sppk-route-tuk, .sppk-route-input_bbm, .sppk-route-input_jalan, .sppk-route-input_houling) .page-shell.main-content #sppkPageContent #sppkDailyEntryForm.sppk-input-workspace.sppk-input-clean .sppk-input-table th:nth-child(2) { width: 22%!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-form, .sppk-route-tuk, .sppk-route-input_bbm, .sppk-route-input_jalan, .sppk-route-input_houling) .page-shell.main-content #sppkPageContent #sppkDailyEntryForm.sppk-input-workspace.sppk-input-clean .sppk-input-table th:nth-child(3) { width: 17%!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-form, .sppk-route-tuk, .sppk-route-input_bbm, .sppk-route-input_jalan, .sppk-route-input_houling) .page-shell.main-content #sppkPageContent #sppkDailyEntryForm.sppk-input-workspace.sppk-input-clean .sppk-input-table .form-control { min-height: 42px!important; padding: 9px 10px!important; }
html.sppk-input-embedded body#sppkAppShell.sppk-app-shell:is(.sppk-route-form, .sppk-route-tuk, .sppk-route-input_bbm, .sppk-route-input_jalan, .sppk-route-input_houling) .page-shell.main-content #sppkPageContent { padding: 20px!important; background: var(--sppk-theme-surface)!important; }
html.sppk-input-embedded body#sppkAppShell.sppk-app-shell:is(.sppk-route-form, .sppk-route-tuk, .sppk-route-input_bbm, .sppk-route-input_jalan, .sppk-route-input_houling) .page-shell.main-content #sppkPageContent > #sppkDailyEntryForm.sppk-input-workspace.sppk-input-clean { width: 100%!important; max-width: none!important; margin: 0!important; padding: 0 0 8px!important; }
html.sppk-input-embedded body#sppkAppShell.sppk-app-shell:is(.sppk-route-form, .sppk-route-tuk, .sppk-route-input_bbm, .sppk-route-input_jalan, .sppk-route-input_houling) .page-shell.main-content #sppkPageContent > #sppkDailyEntryForm.sppk-input-workspace.sppk-input-clean > .sppk-form-hero { display: none!important; }
html.sppk-input-embedded body#sppkAppShell.sppk-app-shell:is(.sppk-route-form, .sppk-route-tuk, .sppk-route-input_bbm, .sppk-route-input_jalan, .sppk-route-input_houling) .page-shell.main-content #sppkPageContent #sppkDailyEntryForm.sppk-input-workspace.sppk-input-clean > .sppk-form-shell, html.sppk-input-embedded body#sppkAppShell.sppk-app-shell:is(.sppk-route-form, .sppk-route-tuk, .sppk-route-input_bbm, .sppk-route-input_jalan, .sppk-route-input_houling) .page-shell.main-content #sppkPageContent #sppkDailyEntryForm.sppk-input-workspace.sppk-input-clean > form > :is(.custom-card, .sppk-form-shell) { border: 0!important; border-radius: 0!important; }
html.sppk-input-embedded body#sppkAppShell.sppk-app-shell:is(.sppk-route-form, .sppk-route-tuk, .sppk-route-input_bbm, .sppk-route-input_jalan, .sppk-route-input_houling) .page-shell.main-content #sppkPageContent #sppkDailyEntryForm.sppk-input-workspace.sppk-input-clean > .sppk-form-shell > .card-body, html.sppk-input-embedded body#sppkAppShell.sppk-app-shell:is(.sppk-route-form, .sppk-route-tuk, .sppk-route-input_bbm, .sppk-route-input_jalan, .sppk-route-input_houling) .page-shell.main-content #sppkPageContent #sppkDailyEntryForm.sppk-input-workspace.sppk-input-clean > form > :is(.custom-card, .sppk-form-shell) > .card-body { padding: 0!important; }
html.sppk-input-embedded body#sppkAppShell.sppk-app-shell:is(.sppk-route-form, .sppk-route-tuk, .sppk-route-input_bbm, .sppk-route-input_jalan, .sppk-route-input_houling) .page-shell.main-content #sppkPageContent #sppkDailyEntryForm.sppk-input-workspace.sppk-input-clean > form > .custom-card > .card-header { padding: 0 0 18px!important; }
html.sppk-input-embedded body#sppkAppShell.sppk-app-shell:is(.sppk-route-form, .sppk-route-tuk, .sppk-route-input_bbm, .sppk-route-input_jalan, .sppk-route-input_houling) .page-shell.main-content #sppkPageContent #sppkDailyEntryForm.sppk-input-workspace.sppk-input-clean .card-footer.sppk-input-actions { padding: 18px 0 0!important; }
html.sppk-input-embedded body#sppkAppShell.sppk-app-shell:is(.sppk-route-form, .sppk-route-tuk, .sppk-route-input_bbm, .sppk-route-input_jalan, .sppk-route-input_houling) .page-shell.main-content #sppkPageContent #sppkDailyEntryForm.sppk-input-workspace.sppk-input-clean > form > .custom-card { margin-bottom: 24px!important; }
@media (min-width: 1100px) { html body#sppkAppShell.sppk-app-shell:is(.sppk-route-form, .sppk-route-tuk, .sppk-route-input_bbm, .sppk-route-input_jalan, .sppk-route-input_houling) .page-shell.main-content #sppkPageContent #sppkDailyEntryForm.sppk-input-workspace.sppk-input-clean .unit-box .row { grid-template-columns: repeat(3, minmax(0, 1fr))!important; } }
@media (max-width: 1023.98px) { html body#sppkAppShell.sppk-app-shell.sppk-route-menu-input .page-shell.main-content #sppkPageContent #sppkDailyInputWorkspace.sppk-daily-input-clean .daily-input-layout { grid-template-columns: 176px minmax(0, 1fr)!important; } }
@media (max-width: 767.98px) {
    html body#sppkAppShell.sppk-app-shell.sppk-route-menu-input .page-shell.main-content #sppkPageContent #sppkDailyInputWorkspace.sppk-daily-input-clean .daily-input-layout { grid-template-columns: 56px minmax(0, 1fr)!important; border-radius: 10px!important; }
    html body#sppkAppShell.sppk-app-shell.sppk-route-menu-input .page-shell.main-content #sppkPageContent #sppkDailyInputWorkspace.sppk-daily-input-clean .daily-input-navigation { padding: 8px 5px!important; }
    html body#sppkAppShell.sppk-app-shell.sppk-route-menu-input .page-shell.main-content #sppkPageContent #sppkDailyInputWorkspace.sppk-daily-input-clean .daily-input-navigation h2 { display: none!important; }
    html body#sppkAppShell.sppk-app-shell.sppk-route-menu-input .page-shell.main-content #sppkPageContent #sppkDailyInputWorkspace.sppk-daily-input-clean .daily-input-tab { min-height: 44px!important; justify-content: center!important; gap: 0!important; padding: 10px 6px!important; }
    html body#sppkAppShell.sppk-app-shell.sppk-route-menu-input .page-shell.main-content #sppkPageContent #sppkDailyInputWorkspace.sppk-daily-input-clean .daily-input-tab-copy { position: absolute!important; width: 1px!important; height: 1px!important; margin: -1px!important; padding: 0!important; overflow: hidden!important; clip: rect(0, 0, 0, 0)!important; white-space: nowrap!important; }
    html body#sppkAppShell.sppk-app-shell.sppk-route-menu-input .page-shell.main-content #sppkPageContent #sppkDailyInputWorkspace.sppk-daily-input-clean .daily-input-tab > .daily-input-lock { display: none!important; }
    html body#sppkAppShell.sppk-app-shell.sppk-route-menu-input .page-shell.main-content #sppkPageContent #sppkDailyInputWorkspace.sppk-daily-input-clean .daily-input-form-heading { padding: 14px!important; gap: 10px!important; }
    html body#sppkAppShell.sppk-app-shell.sppk-route-menu-input .page-shell.main-content #sppkPageContent #sppkDailyInputWorkspace.sppk-daily-input-clean .daily-input-form-heading > div { flex-basis: 100px!important; }
    html body#sppkAppShell.sppk-app-shell.sppk-route-menu-input .page-shell.main-content #sppkPageContent #sppkDailyInputWorkspace.sppk-daily-input-clean .daily-input-form-heading p { display: none!important; }
    html body#sppkAppShell.sppk-app-shell.sppk-route-menu-input .page-shell.main-content #sppkPageContent #sppkDailyInputWorkspace.sppk-daily-input-clean .daily-input-open-page { width: 34px!important; min-height: 34px!important; padding: 7px!important; }
    html body#sppkAppShell.sppk-app-shell.sppk-route-menu-input .page-shell.main-content #sppkPageContent #sppkDailyInputWorkspace.sppk-daily-input-clean .daily-input-open-page span { display: none!important; }
    html body#sppkAppShell.sppk-app-shell:is(.sppk-route-form, .sppk-route-tuk, .sppk-route-input_bbm, .sppk-route-input_jalan, .sppk-route-input_houling) .page-shell.main-content #sppkPageContent #sppkDailyEntryForm.sppk-input-workspace.sppk-input-clean :is(.sppk-form-shell, .custom-card) > .card-body { padding: 16px!important; }
    html body#sppkAppShell.sppk-app-shell:is(.sppk-route-form, .sppk-route-tuk, .sppk-route-input_bbm, .sppk-route-input_jalan, .sppk-route-input_houling) .page-shell.main-content #sppkPageContent #sppkDailyEntryForm.sppk-input-workspace.sppk-input-clean .card-header { padding: 16px 16px 0!important; }
    html body#sppkAppShell.sppk-app-shell:is(.sppk-route-form, .sppk-route-tuk, .sppk-route-input_bbm, .sppk-route-input_jalan, .sppk-route-input_houling) .page-shell.main-content #sppkPageContent #sppkDailyEntryForm.sppk-input-workspace.sppk-input-clean .unit-box { padding: 14px!important; }
    html body#sppkAppShell.sppk-app-shell:is(.sppk-route-form, .sppk-route-tuk, .sppk-route-input_bbm, .sppk-route-input_jalan, .sppk-route-input_houling) .page-shell.main-content #sppkPageContent #sppkDailyEntryForm.sppk-input-workspace.sppk-input-clean .card-footer.sppk-input-actions { padding: 16px!important; }
    html.sppk-input-embedded body#sppkAppShell.sppk-app-shell:is(.sppk-route-form, .sppk-route-tuk, .sppk-route-input_bbm, .sppk-route-input_jalan, .sppk-route-input_houling) .page-shell.main-content #sppkPageContent { padding: 16px!important; }
    html.sppk-input-embedded body#sppkAppShell.sppk-app-shell:is(.sppk-route-form, .sppk-route-tuk, .sppk-route-input_bbm, .sppk-route-input_jalan, .sppk-route-input_houling) .page-shell.main-content #sppkPageContent #sppkDailyEntryForm.sppk-input-workspace.sppk-input-clean > .sppk-form-shell > .card-body, html.sppk-input-embedded body#sppkAppShell.sppk-app-shell:is(.sppk-route-form, .sppk-route-tuk, .sppk-route-input_bbm, .sppk-route-input_jalan, .sppk-route-input_houling) .page-shell.main-content #sppkPageContent #sppkDailyEntryForm.sppk-input-workspace.sppk-input-clean > form > :is(.custom-card, .sppk-form-shell) > .card-body { padding: 0!important; }
    html.sppk-input-embedded body#sppkAppShell.sppk-app-shell:is(.sppk-route-form, .sppk-route-tuk, .sppk-route-input_bbm, .sppk-route-input_jalan, .sppk-route-input_houling) .page-shell.main-content #sppkPageContent #sppkDailyEntryForm.sppk-input-workspace.sppk-input-clean > form > .custom-card > .card-header { padding: 0 0 16px!important; }
    html.sppk-input-embedded body#sppkAppShell.sppk-app-shell:is(.sppk-route-form, .sppk-route-tuk, .sppk-route-input_bbm, .sppk-route-input_jalan, .sppk-route-input_houling) .page-shell.main-content #sppkPageContent #sppkDailyEntryForm.sppk-input-workspace.sppk-input-clean .card-footer.sppk-input-actions { padding: 16px 0 0!important; }
}
@media (max-width: 599.98px) { html body#sppkAppShell.sppk-app-shell:is(.sppk-route-form, .sppk-route-tuk, .sppk-route-input_bbm, .sppk-route-input_jalan, .sppk-route-input_houling) .page-shell.main-content #sppkPageContent #sppkDailyEntryForm.sppk-input-workspace.sppk-input-clean .daily-entry-form .row { grid-template-columns: minmax(0, 1fr)!important; gap: 18px!important; } }
@media (prefers-reduced-motion: reduce) { html body#sppkAppShell.sppk-app-shell:is(.sppk-route-form, .sppk-route-tuk, .sppk-route-input_bbm, .sppk-route-input_jalan, .sppk-route-input_houling) .page-shell.main-content #sppkPageContent #sppkDailyEntryForm.sppk-input-workspace.sppk-input-clean :is(.form-control, .form-select, #btnSimpan) { transition: none!important; } }
}
@layer sppk-typography {
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-input .page-shell.main-content #sppkPageContent #sppkDailyInputWorkspace.sppk-daily-input-clean, html body#sppkAppShell.sppk-app-shell:is(.sppk-route-form, .sppk-route-tuk, .sppk-route-input_bbm, .sppk-route-input_jalan, .sppk-route-input_houling) .page-shell.main-content #sppkPageContent #sppkDailyEntryForm.sppk-input-workspace.sppk-input-clean { font-size: .875rem!important; line-height: 1.6!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-input .page-shell.main-content #sppkPageContent #sppkDailyInputWorkspace.sppk-daily-input-clean .daily-input-heading h1, html body#sppkAppShell.sppk-app-shell:is(.sppk-route-form, .sppk-route-tuk, .sppk-route-input_bbm, .sppk-route-input_jalan, .sppk-route-input_houling) .page-shell.main-content #sppkPageContent #sppkDailyEntryForm.sppk-input-workspace.sppk-input-clean .sppk-form-hero h1 { font-size: 1.5rem!important; font-weight: 600!important; line-height: 1.3!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-input .page-shell.main-content #sppkPageContent #sppkDailyInputWorkspace.sppk-daily-input-clean :is(.daily-input-heading p, .daily-input-tab, .daily-input-tab-copy strong, .daily-input-open-page, .daily-input-loading-message, .daily-input-retry) { font-size: .875rem!important; line-height: 1.5!important; font-weight: 400!important; letter-spacing: normal!important; text-transform: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-input .page-shell.main-content #sppkPageContent #sppkDailyInputWorkspace.sppk-daily-input-clean .daily-input-tab-copy strong { font-weight: 500!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-input .page-shell.main-content #sppkPageContent #sppkDailyInputWorkspace.sppk-daily-input-clean :is(.daily-input-tab-copy small, .daily-input-navigation h2, .daily-input-form-heading p) { font-size: .75rem!important; line-height: 1.5!important; font-weight: 400!important; letter-spacing: normal!important; text-transform: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-input .page-shell.main-content #sppkPageContent #sppkDailyInputWorkspace.sppk-daily-input-clean .daily-input-form-heading h2 { font-size: 1rem!important; line-height: 1.4!important; font-weight: 600!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-input .page-shell.main-content #sppkPageContent #sppkDailyInputWorkspace.sppk-daily-input-clean .daily-input-tab > i { font-size: 1.125rem!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-input .page-shell.main-content #sppkPageContent #sppkDailyInputWorkspace.sppk-daily-input-clean .daily-input-tab > .daily-input-lock { font-size: .75rem!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-form, .sppk-route-tuk, .sppk-route-input_bbm, .sppk-route-input_jalan, .sppk-route-input_houling) .page-shell.main-content #sppkPageContent #sppkDailyEntryForm.sppk-input-workspace.sppk-input-clean :is(label, .form-label, .custom-label, .form-control, .form-select, .sppk-form-hero p) { font-size: .875rem!important; font-weight: 400!important; line-height: 1.5!important; letter-spacing: normal!important; text-transform: none!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-form, .sppk-route-tuk, .sppk-route-input_bbm, .sppk-route-input_jalan, .sppk-route-input_houling) .page-shell.main-content #sppkPageContent #sppkDailyEntryForm.sppk-input-workspace.sppk-input-clean :is(label, .form-label, .custom-label) { color: var(--sppk-theme-text)!important; -webkit-text-fill-color: currentColor!important; font-weight: 500!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-form, .sppk-route-tuk, .sppk-route-input_bbm, .sppk-route-input_jalan, .sppk-route-input_houling) .page-shell.main-content #sppkPageContent #sppkDailyEntryForm.sppk-input-workspace.sppk-input-clean :is(.card-header h2, .section-title, .daily-entry-section-title h2) { color: var(--sppk-theme-heading)!important; -webkit-text-fill-color: currentColor!important; font-size: 1rem!important; font-weight: 500!important; line-height: 1.4!important; letter-spacing: normal!important; text-transform: none!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-form, .sppk-route-tuk, .sppk-route-input_bbm, .sppk-route-input_jalan, .sppk-route-input_houling) .page-shell.main-content #sppkPageContent #sppkDailyEntryForm.sppk-input-workspace.sppk-input-clean .unit-title { color: var(--sppk-theme-heading)!important; font-size: .875rem!important; line-height: 1.5!important; font-weight: 500!important; letter-spacing: normal!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-form, .sppk-route-tuk, .sppk-route-input_bbm, .sppk-route-input_jalan, .sppk-route-input_houling) .page-shell.main-content #sppkPageContent #sppkDailyEntryForm.sppk-input-workspace.sppk-input-clean :is(.unit-type-help, .daily-entry-required, .daily-entry-section-title p, .custom-alert, .footer-warning) { font-size: .75rem!important; line-height: 1.6!important; font-weight: 400!important; letter-spacing: normal!important; text-transform: none!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-form, .sppk-route-tuk, .sppk-route-input_bbm, .sppk-route-input_jalan, .sppk-route-input_houling) .page-shell.main-content #sppkPageContent #sppkDailyEntryForm.sppk-input-workspace.sppk-input-clean .daily-entry-required { color: var(--sppk-theme-muted)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-form, .sppk-route-tuk, .sppk-route-input_bbm, .sppk-route-input_jalan, .sppk-route-input_houling) .page-shell.main-content #sppkPageContent #sppkDailyEntryForm.sppk-input-workspace.sppk-input-clean .sppk-input-actions > #btnSimpan { font-size: .875rem!important; line-height: 1.5!important; font-weight: 500!important; letter-spacing: normal!important; text-transform: none!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-form, .sppk-route-tuk, .sppk-route-input_bbm, .sppk-route-input_jalan, .sppk-route-input_houling) .page-shell.main-content #sppkPageContent #sppkDailyEntryForm.sppk-input-workspace.sppk-input-clean .sppk-input-table th { font-size: .75rem!important; line-height: 1.5!important; font-weight: 500!important; letter-spacing: normal!important; text-transform: none!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-form, .sppk-route-tuk, .sppk-route-input_bbm, .sppk-route-input_jalan, .sppk-route-input_houling) .page-shell.main-content #sppkPageContent #sppkDailyEntryForm.sppk-input-workspace.sppk-input-clean .sppk-input-table td { font-size: .875rem!important; font-weight: 400!important; }
}

/* GALERI V61 — CLEAN MEDIA GRID, NATIVE PREVIEWS AND QUIET DIALOGS */
@layer sppk-gallery-layout {
html body#sppkAppShell.sppk-app-shell.sppk-route-galeri .page-shell.main-content #sppkPageContent #sppkGalleryWorkspace.sppk-gallery-clean { --gallery-primary: #303030!important; --gallery-primary-ink: #ffffff!important; --gallery-primary-hover: #454545!important; --gallery-field-line: #d4d4d4!important; --gallery-focus: #777777!important; --gallery-danger: #a82d38!important; display: block!important; width: 100%!important; max-width: 1240px!important; min-width: 0!important; margin: 0 auto!important; padding: 4px 0 24px!important; border: 0!important; background: transparent!important; background-image: none!important; color: var(--sppk-theme-copy)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-galeri.dark .page-shell.main-content #sppkPageContent #sppkGalleryWorkspace.sppk-gallery-clean { --gallery-primary: #ededed!important; --gallery-primary-ink: #202020!important; --gallery-primary-hover: #ffffff!important; --gallery-field-line: #505050!important; --gallery-focus: #b5b5b5!important; --gallery-danger: #efa6ad!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-galeri .page-shell.main-content #sppkPageContent #sppkGalleryWorkspace.sppk-gallery-clean *, html body#sppkAppShell.sppk-app-shell.sppk-route-galeri :is(#modalUploadGaleri, [id^="editGaleri"], [id^="videoPreview"]).sppk-gallery-dialog * { box-sizing: border-box!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-galeri .page-shell.main-content #sppkPageContent #sppkGalleryWorkspace.sppk-gallery-clean .gallery-page-heading { display: flex!important; align-items: flex-start!important; justify-content: space-between!important; flex-wrap: wrap!important; gap: 18px 24px!important; margin: 0 0 24px!important; padding: 0!important; border: 0!important; background: transparent!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-galeri .page-shell.main-content #sppkPageContent #sppkGalleryWorkspace.sppk-gallery-clean .gallery-page-heading > div { flex: 1 1 300px!important; min-width: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-galeri .page-shell.main-content #sppkPageContent #sppkGalleryWorkspace.sppk-gallery-clean .gallery-page-heading h1 { margin: 0 0 8px!important; color: var(--sppk-theme-heading)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-galeri .page-shell.main-content #sppkPageContent #sppkGalleryWorkspace.sppk-gallery-clean .gallery-page-heading p { margin: 0!important; color: var(--sppk-theme-copy)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-galeri .page-shell.main-content #sppkPageContent #sppkGalleryWorkspace.sppk-gallery-clean .gallery-upload-button { display: inline-flex!important; flex: 0 0 auto!important; align-items: center!important; justify-content: center!important; gap: 8px!important; min-height: 40px!important; margin: 0 0 0 auto!important; padding: 9px 14px!important; border: 1px solid var(--gallery-primary)!important; border-radius: 8px!important; background: var(--gallery-primary)!important; background-image: none!important; color: var(--gallery-primary-ink)!important; -webkit-text-fill-color: currentColor!important; box-shadow: none!important; transform: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-galeri .page-shell.main-content #sppkPageContent #sppkGalleryWorkspace.sppk-gallery-clean .gallery-upload-button:is(:hover, :focus-visible) { background: var(--gallery-primary-hover)!important; border-color: var(--gallery-primary-hover)!important; color: var(--gallery-primary-ink)!important; box-shadow: none!important; transform: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-galeri .page-shell.main-content #sppkPageContent #sppkGalleryWorkspace.sppk-gallery-clean .gallery-upload-button > i { color: inherit!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-galeri .page-shell.main-content #sppkPageContent #sppkGalleryWorkspace.sppk-gallery-clean .gallery-toolbar { display: grid!important; grid-template-columns: minmax(240px, 1fr) minmax(150px, 200px) minmax(150px, 180px)!important; gap: 16px!important; margin: 0 0 22px!important; padding: 18px!important; border: 1px solid var(--sppk-theme-line)!important; border-radius: 10px!important; background: var(--sppk-theme-surface)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-galeri .page-shell.main-content #sppkPageContent #sppkGalleryWorkspace.sppk-gallery-clean .gallery-toolbar > div { min-width: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-galeri .page-shell.main-content #sppkPageContent #sppkGalleryWorkspace.sppk-gallery-clean .gallery-toolbar label { display: block!important; margin: 0 0 7px!important; padding: 0!important; color: var(--sppk-theme-text)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-galeri .page-shell.main-content #sppkPageContent #sppkGalleryWorkspace.sppk-gallery-clean .gallery-toolbar :is(input, select) { color-scheme: light!important; display: block!important; width: 100%!important; max-width: 100%!important; min-width: 0!important; min-height: 42px!important; margin: 0!important; padding: 9px 11px!important; border: 1px solid var(--gallery-field-line)!important; border-radius: 8px!important; background-color: var(--sppk-theme-surface)!important; color: var(--sppk-theme-text)!important; -webkit-text-fill-color: currentColor!important; box-shadow: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-galeri.dark .page-shell.main-content #sppkPageContent #sppkGalleryWorkspace.sppk-gallery-clean .gallery-toolbar :is(input, select) { color-scheme: dark!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-galeri .page-shell.main-content #sppkPageContent #sppkGalleryWorkspace.sppk-gallery-clean .gallery-search-control { position: relative!important; min-width: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-galeri .page-shell.main-content #sppkPageContent #sppkGalleryWorkspace.sppk-gallery-clean .gallery-search-control > i { position: absolute!important; top: 50%!important; left: 12px!important; transform: translateY(-50%)!important; color: var(--sppk-theme-muted)!important; -webkit-text-fill-color: currentColor!important; pointer-events: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-galeri .page-shell.main-content #sppkPageContent #sppkGalleryWorkspace.sppk-gallery-clean .gallery-search-control input { padding-left: 36px!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-galeri .page-shell.main-content #sppkPageContent #sppkGalleryWorkspace.sppk-gallery-clean .gallery-toolbar :is(input, select):focus { border-color: var(--gallery-focus)!important; outline: 2px solid var(--gallery-focus)!important; outline-offset: 2px!important; box-shadow: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-galeri .page-shell.main-content #sppkPageContent #sppkGalleryWorkspace.sppk-gallery-clean .gallery-results-heading { display: flex!important; align-items: baseline!important; justify-content: space-between!important; flex-wrap: wrap!important; gap: 7px 16px!important; margin: 0 0 16px!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-galeri .page-shell.main-content #sppkPageContent #sppkGalleryWorkspace.sppk-gallery-clean .gallery-results-heading h2 { margin: 0!important; color: var(--sppk-theme-heading)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-galeri .page-shell.main-content #sppkPageContent #sppkGalleryWorkspace.sppk-gallery-clean .gallery-results-heading p { margin: 0!important; color: var(--sppk-theme-muted)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-galeri .page-shell.main-content #sppkPageContent #sppkGalleryWorkspace.sppk-gallery-clean .gallery-grid { display: grid!important; grid-template-columns: repeat(3, minmax(0, 1fr))!important; align-items: stretch!important; gap: 18px!important; width: 100%!important; min-width: 0!important; margin: 0!important; padding: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-galeri .page-shell.main-content #sppkPageContent #sppkGalleryWorkspace.sppk-gallery-clean .gallery-item { display: flex!important; min-width: 0!important; max-width: 100%!important; margin: 0!important; padding: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-galeri .page-shell.main-content #sppkPageContent #sppkGalleryWorkspace.sppk-gallery-clean .enterprise-gallery-card { display: flex!important; flex-direction: column!important; width: 100%!important; min-width: 0!important; height: 100%!important; margin: 0!important; overflow: hidden!important; border: 1px solid var(--sppk-theme-line)!important; border-radius: 10px!important; background: var(--sppk-theme-surface)!important; background-image: none!important; box-shadow: none!important; transform: none!important; animation: none!important; transition: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-galeri .page-shell.main-content #sppkPageContent #sppkGalleryWorkspace.sppk-gallery-clean .enterprise-gallery-card:is(:hover, :focus-within) { background: var(--sppk-theme-surface)!important; border-color: var(--sppk-theme-line)!important; box-shadow: none!important; transform: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-galeri .page-shell.main-content #sppkPageContent #sppkGalleryWorkspace.sppk-gallery-clean .gallery-image-wrapper { position: relative!important; flex: 0 0 auto!important; width: 100%!important; aspect-ratio: 16 / 10!important; overflow: hidden!important; border-bottom: 1px solid var(--sppk-theme-line-soft)!important; background: var(--sppk-theme-surface-soft)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-galeri .page-shell.main-content #sppkPageContent #sppkGalleryWorkspace.sppk-gallery-clean .gallery-image { display: block!important; width: 100%!important; height: 100%!important; margin: 0!important; border: 0!important; border-radius: 0!important; object-fit: cover!important; box-shadow: none!important; transform: none!important; transition: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-galeri .page-shell.main-content #sppkPageContent #sppkGalleryWorkspace.sppk-gallery-clean video.gallery-image { object-fit: contain!important; background: #171717!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-galeri .page-shell.main-content #sppkPageContent #sppkGalleryWorkspace.sppk-gallery-clean .enterprise-gallery-card:hover .gallery-image { transform: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-galeri .page-shell.main-content #sppkPageContent #sppkGalleryWorkspace.sppk-gallery-clean .gallery-overlay { position: absolute!important; z-index: 1!important; inset: 10px 10px auto auto!important; display: block!important; width: auto!important; height: auto!important; margin: 0!important; padding: 0!important; background: transparent!important; background-image: none!important; opacity: 1!important; pointer-events: none!important; transition: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-galeri .page-shell.main-content #sppkPageContent #sppkGalleryWorkspace.sppk-gallery-clean .overlay-content { display: block!important; margin: 0!important; padding: 0!important; pointer-events: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-galeri .page-shell.main-content #sppkPageContent #sppkGalleryWorkspace.sppk-gallery-clean .overlay-btn { display: inline-flex!important; align-items: center!important; justify-content: center!important; width: 34px!important; height: 34px!important; min-height: 34px!important; margin: 0!important; padding: 7px!important; border: 1px solid var(--sppk-theme-line)!important; border-radius: 8px!important; background: var(--sppk-theme-surface)!important; background-image: none!important; color: var(--sppk-theme-text)!important; -webkit-text-fill-color: currentColor!important; text-decoration: none!important; pointer-events: auto!important; box-shadow: none!important; transform: none!important; transition: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-galeri .page-shell.main-content #sppkPageContent #sppkGalleryWorkspace.sppk-gallery-clean .overlay-btn:is(:hover, :focus-visible) { border-color: var(--gallery-field-line)!important; background: var(--sppk-theme-surface-soft)!important; color: var(--sppk-theme-text)!important; box-shadow: none!important; transform: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-galeri .page-shell.main-content #sppkPageContent #sppkGalleryWorkspace.sppk-gallery-clean .overlay-btn > i { color: inherit!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-galeri .page-shell.main-content #sppkPageContent #sppkGalleryWorkspace.sppk-gallery-clean .gallery-content { display: flex!important; flex: 1 1 auto!important; flex-direction: column!important; min-width: 0!important; padding: 16px!important; background: var(--sppk-theme-surface)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-galeri .page-shell.main-content #sppkPageContent #sppkGalleryWorkspace.sppk-gallery-clean .gallery-card-meta { display: flex!important; align-items: center!important; justify-content: space-between!important; flex-wrap: wrap!important; gap: 6px 12px!important; margin: 0 0 12px!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-galeri .page-shell.main-content #sppkPageContent #sppkGalleryWorkspace.sppk-gallery-clean .gallery-category { position: static!important; display: inline-flex!important; align-items: center!important; min-width: 0!important; max-width: 100%!important; margin: 0!important; padding: 3px 7px!important; border: 1px solid var(--sppk-theme-line-soft)!important; border-radius: 5px!important; background: var(--sppk-theme-surface-soft)!important; background-image: none!important; color: var(--sppk-theme-copy)!important; -webkit-text-fill-color: currentColor!important; overflow-wrap: anywhere!important; backdrop-filter: none!important; box-shadow: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-galeri .page-shell.main-content #sppkPageContent #sppkGalleryWorkspace.sppk-gallery-clean .gallery-media-kind { color: var(--sppk-theme-muted)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-galeri .page-shell.main-content #sppkPageContent #sppkGalleryWorkspace.sppk-gallery-clean .gallery-content h3 { margin: 0 0 8px!important; color: var(--sppk-theme-heading)!important; -webkit-text-fill-color: currentColor!important; overflow-wrap: anywhere!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-galeri .page-shell.main-content #sppkPageContent #sppkGalleryWorkspace.sppk-gallery-clean .gallery-content > p { display: -webkit-box!important; -webkit-line-clamp: 3!important; -webkit-box-orient: vertical!important; min-width: 0!important; margin: 0 0 16px!important; overflow: hidden!important; color: var(--sppk-theme-copy)!important; -webkit-text-fill-color: currentColor!important; overflow-wrap: anywhere!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-galeri .page-shell.main-content #sppkPageContent #sppkGalleryWorkspace.sppk-gallery-clean .gallery-footer { display: flex!important; align-items: baseline!important; justify-content: space-between!important; flex-wrap: wrap!important; gap: 5px 12px!important; margin: auto 0 0!important; padding: 12px 0 0!important; border-top: 1px solid var(--sppk-theme-line-soft)!important; color: var(--sppk-theme-muted)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-galeri .page-shell.main-content #sppkPageContent #sppkGalleryWorkspace.sppk-gallery-clean .gallery-footer span { min-width: 0!important; color: inherit!important; -webkit-text-fill-color: currentColor!important; overflow-wrap: anywhere!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-galeri .page-shell.main-content #sppkPageContent #sppkGalleryWorkspace.sppk-gallery-clean .gallery-card-actions { display: flex!important; align-items: center!important; justify-content: flex-end!important; gap: 8px!important; margin: 12px 0 0!important; padding: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-galeri .page-shell.main-content #sppkPageContent #sppkGalleryWorkspace.sppk-gallery-clean .gallery-card-actions .btn { display: inline-flex!important; flex: 0 0 auto!important; align-items: center!important; justify-content: center!important; gap: 6px!important; min-height: 32px!important; margin: 0!important; padding: 6px 10px!important; border: 1px solid var(--sppk-theme-line)!important; border-radius: 7px!important; background: var(--sppk-theme-surface)!important; background-image: none!important; color: var(--sppk-theme-copy)!important; -webkit-text-fill-color: currentColor!important; box-shadow: none!important; transform: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-galeri .page-shell.main-content #sppkPageContent #sppkGalleryWorkspace.sppk-gallery-clean .gallery-card-actions .btn-danger { color: var(--gallery-danger)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-galeri .page-shell.main-content #sppkPageContent #sppkGalleryWorkspace.sppk-gallery-clean .gallery-card-actions .btn:is(:hover, :focus-visible) { background: var(--sppk-theme-surface-soft)!important; border-color: var(--gallery-field-line)!important; box-shadow: none!important; transform: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-galeri .page-shell.main-content #sppkPageContent #sppkGalleryWorkspace.sppk-gallery-clean .gallery-card-actions .btn > i { color: inherit!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-galeri .page-shell.main-content #sppkPageContent #sppkGalleryWorkspace.sppk-gallery-clean .gallery-content > .gallery-footer ~ :not(.gallery-card-actions) { display: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-galeri .page-shell.main-content #sppkPageContent #sppkGalleryWorkspace.sppk-gallery-clean .gallery-empty-state { display: flex!important; align-items: center!important; flex-direction: column!important; gap: 10px!important; margin: 0!important; padding: 48px 20px!important; border: 1px dashed var(--sppk-theme-line)!important; border-radius: 10px!important; background: var(--sppk-theme-surface)!important; color: var(--sppk-theme-muted)!important; text-align: center!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-galeri .page-shell.main-content #sppkPageContent #sppkGalleryWorkspace.sppk-gallery-clean .gallery-empty-state > i { color: var(--sppk-theme-muted)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-galeri .page-shell.main-content #sppkPageContent #sppkGalleryWorkspace.sppk-gallery-clean .gallery-empty-state h3 { margin: 0!important; color: var(--sppk-theme-heading)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-galeri .page-shell.main-content #sppkPageContent #sppkGalleryWorkspace.sppk-gallery-clean .gallery-empty-state p { max-width: 480px!important; margin: 0!important; color: var(--sppk-theme-copy)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-galeri .page-shell.main-content #sppkPageContent #sppkGalleryWorkspace.sppk-gallery-clean .gallery-page-footer { display: flex!important; justify-content: flex-start!important; margin: 24px 0 0!important; padding: 18px 0 0!important; border-top: 1px solid var(--sppk-theme-line-soft)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-galeri .page-shell.main-content #sppkPageContent #sppkGalleryWorkspace.sppk-gallery-clean .gallery-page-footer a { display: inline-flex!important; align-items: center!important; gap: 7px!important; min-height: 32px!important; color: var(--sppk-theme-copy)!important; -webkit-text-fill-color: currentColor!important; text-decoration: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-galeri .page-shell.main-content #sppkPageContent #sppkGalleryWorkspace.sppk-gallery-clean :is(a, button):focus-visible { outline: 2px solid var(--gallery-focus)!important; outline-offset: 2px!important; box-shadow: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-galeri .page-shell.main-content #sppkPageContent #sppkGalleryWorkspace.sppk-gallery-clean [hidden] { display: none!important; }

html body#sppkAppShell.sppk-app-shell.sppk-route-galeri :is(#modalUploadGaleri, [id^="editGaleri"], [id^="videoPreview"]).sppk-gallery-dialog { --gallery-dialog-primary: #303030!important; --gallery-dialog-primary-ink: #ffffff!important; --gallery-dialog-primary-hover: #454545!important; --gallery-dialog-line: #d4d4d4!important; --gallery-dialog-focus: #777777!important; color: var(--sppk-theme-copy)!important; color-scheme: light!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-galeri.dark :is(#modalUploadGaleri, [id^="editGaleri"], [id^="videoPreview"]).sppk-gallery-dialog { --gallery-dialog-primary: #ededed!important; --gallery-dialog-primary-ink: #202020!important; --gallery-dialog-primary-hover: #ffffff!important; --gallery-dialog-line: #505050!important; --gallery-dialog-focus: #b5b5b5!important; color-scheme: dark!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-galeri :is(#modalUploadGaleri, [id^="editGaleri"], [id^="videoPreview"]).sppk-gallery-dialog .modal-dialog { --bs-modal-margin: 24px!important; width: auto!important; max-width: 680px!important; margin: 24px auto!important; padding: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-galeri :is(#modalUploadGaleri, [id^="editGaleri"], [id^="videoPreview"]).sppk-gallery-dialog[id^="videoPreview"] .modal-dialog { max-width: 1040px!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-galeri :is(#modalUploadGaleri, [id^="editGaleri"], [id^="videoPreview"]).sppk-gallery-dialog .modal-content { min-width: 0!important; overflow: hidden!important; border: 1px solid var(--sppk-theme-line)!important; border-radius: 12px!important; background: var(--sppk-theme-surface)!important; background-image: none!important; color: var(--sppk-theme-copy)!important; box-shadow: var(--sppk-theme-shadow)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-galeri :is(#modalUploadGaleri, [id^="editGaleri"], [id^="videoPreview"]).sppk-gallery-dialog .modal-content > form { display: flex!important; flex-direction: column!important; min-height: 0!important; max-height: 100%!important; overflow: hidden!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-galeri :is(#modalUploadGaleri, [id^="editGaleri"], [id^="videoPreview"]).sppk-gallery-dialog :is(.modal-header, .modal-footer) { display: flex!important; align-items: center!important; flex-wrap: wrap!important; gap: 12px!important; min-height: 0!important; margin: 0!important; padding: 18px 22px!important; border: 0!important; border-radius: 0!important; background: var(--sppk-theme-surface)!important; background-image: none!important; color: var(--sppk-theme-heading)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-galeri :is(#modalUploadGaleri, [id^="editGaleri"], [id^="videoPreview"]).sppk-gallery-dialog .modal-header { border-bottom: 1px solid var(--sppk-theme-line-soft)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-galeri :is(#modalUploadGaleri, [id^="editGaleri"], [id^="videoPreview"]).sppk-gallery-dialog .modal-header::before { display: none!important; content: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-galeri :is(#modalUploadGaleri, [id^="editGaleri"], [id^="videoPreview"]).sppk-gallery-dialog .modal-title { min-width: 0!important; margin: 0!important; color: var(--sppk-theme-heading)!important; -webkit-text-fill-color: currentColor!important; overflow-wrap: anywhere!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-galeri :is(#modalUploadGaleri, [id^="editGaleri"], [id^="videoPreview"]).sppk-gallery-dialog .modal-body { display: block!important; flex: 1 1 auto!important; min-width: 0!important; min-height: 0!important; overflow-y: auto!important; padding: 22px!important; background: var(--sppk-theme-surface)!important; background-image: none!important; color: var(--sppk-theme-copy)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-galeri :is(#modalUploadGaleri, [id^="editGaleri"], [id^="videoPreview"]).sppk-gallery-dialog .modal-body > .mb-3 { margin: 0 0 18px!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-galeri :is(#modalUploadGaleri, [id^="editGaleri"], [id^="videoPreview"]).sppk-gallery-dialog .modal-body > .mb-3:last-child { margin-bottom: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-galeri :is(#modalUploadGaleri, [id^="editGaleri"], [id^="videoPreview"]).sppk-gallery-dialog .modal-body > .text-center { display: flex!important; justify-content: center!important; min-width: 0!important; min-height: 0!important; margin: 0!important; padding: 0!important; background: transparent!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-galeri :is(#modalUploadGaleri, [id^="editGaleri"], [id^="videoPreview"]).sppk-gallery-dialog .form-label { display: block!important; margin: 0 0 7px!important; color: var(--sppk-theme-text)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-galeri :is(#modalUploadGaleri, [id^="editGaleri"], [id^="videoPreview"]).sppk-gallery-dialog :is(.form-control, .form-select) { width: 100%!important; max-width: 100%!important; min-width: 0!important; min-height: 42px!important; padding: 9px 11px!important; border: 1px solid var(--gallery-dialog-line)!important; border-radius: 8px!important; background-color: var(--sppk-theme-surface)!important; color: var(--sppk-theme-text)!important; -webkit-text-fill-color: currentColor!important; box-shadow: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-galeri :is(#modalUploadGaleri, [id^="editGaleri"], [id^="videoPreview"]).sppk-gallery-dialog :is(.form-control, .form-select):focus { border-color: var(--gallery-dialog-focus)!important; outline: 2px solid var(--gallery-dialog-focus)!important; outline-offset: 2px!important; box-shadow: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-galeri :is(#modalUploadGaleri, [id^="editGaleri"], [id^="videoPreview"]).sppk-gallery-dialog option { background-color: var(--sppk-theme-surface)!important; color: var(--sppk-theme-text)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-galeri :is(#modalUploadGaleri, [id^="editGaleri"], [id^="videoPreview"]).sppk-gallery-dialog textarea.form-control { min-height: 100px!important; height: auto!important; resize: vertical!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-galeri :is(#modalUploadGaleri, [id^="editGaleri"], [id^="videoPreview"]).sppk-gallery-dialog input[type="file"] { padding: 6px!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-galeri :is(#modalUploadGaleri, [id^="editGaleri"], [id^="videoPreview"]).sppk-gallery-dialog input[type="file"]::file-selector-button { margin: 0 10px 0 0!important; padding: 6px 10px!important; border: 0!important; border-radius: 5px!important; background: var(--sppk-theme-surface-soft)!important; color: var(--sppk-theme-copy)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-galeri :is(#modalUploadGaleri, [id^="editGaleri"], [id^="videoPreview"]).sppk-gallery-dialog :is(#previewImage, #previewVideo) { width: 100%!important; max-width: 100%!important; height: auto!important; max-height: 300px!important; margin: 0!important; padding: 0!important; border: 1px solid var(--sppk-theme-line-soft)!important; border-radius: 8px!important; background: var(--sppk-theme-surface-soft)!important; object-fit: contain!important; box-shadow: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-galeri :is(#modalUploadGaleri, [id^="editGaleri"], [id^="videoPreview"]).sppk-gallery-dialog .gallery-edit-preview { display: flex!important; justify-content: center!important; min-width: 0!important; margin: 0 0 20px!important; padding: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-galeri :is(#modalUploadGaleri, [id^="editGaleri"], [id^="videoPreview"]).sppk-gallery-dialog .gallery-edit-preview :is(img, video) { width: 100%!important; max-width: 100%!important; height: 200px!important; padding: 0!important; border: 1px solid var(--sppk-theme-line-soft)!important; border-radius: 8px!important; background: var(--sppk-theme-surface-soft)!important; object-fit: contain!important; box-shadow: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-galeri :is(#modalUploadGaleri, [id^="editGaleri"], [id^="videoPreview"]).sppk-gallery-dialog[id^="videoPreview"] .modal-body { padding: 16px!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-galeri :is(#modalUploadGaleri, [id^="editGaleri"], [id^="videoPreview"]).sppk-gallery-dialog[id^="videoPreview"] .modal-body > video { display: block!important; width: 100%!important; height: auto!important; max-height: 72dvh!important; margin: 0!important; border: 0!important; border-radius: 8px!important; background: #171717!important; object-fit: contain!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-galeri :is(#modalUploadGaleri, [id^="editGaleri"], [id^="videoPreview"]).sppk-gallery-dialog .modal-footer { justify-content: flex-end!important; border-top: 1px solid var(--sppk-theme-line-soft)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-galeri :is(#modalUploadGaleri, [id^="editGaleri"], [id^="videoPreview"]).sppk-gallery-dialog .modal-footer .btn { display: inline-flex!important; align-items: center!important; justify-content: center!important; gap: 7px!important; width: auto!important; min-width: 0!important; max-width: 100%!important; min-height: 38px!important; margin: 0!important; padding: 8px 13px!important; border: 1px solid var(--sppk-theme-line)!important; border-radius: 8px!important; background: var(--sppk-theme-surface)!important; background-image: none!important; color: var(--sppk-theme-copy)!important; -webkit-text-fill-color: currentColor!important; box-shadow: none!important; transform: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-galeri :is(#modalUploadGaleri, [id^="editGaleri"], [id^="videoPreview"]).sppk-gallery-dialog .modal-footer .btn-success { border-color: var(--gallery-dialog-primary)!important; background: var(--gallery-dialog-primary)!important; color: var(--gallery-dialog-primary-ink)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-galeri :is(#modalUploadGaleri, [id^="editGaleri"], [id^="videoPreview"]).sppk-gallery-dialog .modal-footer .btn:is(:hover, :focus-visible) { background: var(--sppk-theme-surface-soft)!important; color: var(--sppk-theme-copy)!important; box-shadow: none!important; transform: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-galeri :is(#modalUploadGaleri, [id^="editGaleri"], [id^="videoPreview"]).sppk-gallery-dialog .modal-footer .btn-success:is(:hover, :focus-visible) { background: var(--gallery-dialog-primary-hover)!important; border-color: var(--gallery-dialog-primary-hover)!important; color: var(--gallery-dialog-primary-ink)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-galeri :is(#modalUploadGaleri, [id^="editGaleri"], [id^="videoPreview"]).sppk-gallery-dialog .btn-close { flex: 0 0 32px!important; width: 32px!important; height: 32px!important; min-height: 32px!important; margin: 0 0 0 auto!important; padding: 8px!important; border: 0!important; border-radius: 6px!important; background-color: transparent!important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='m4 4 8 8m0-8-8 8' stroke='%23686868' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E")!important; background-position: center!important; background-repeat: no-repeat!important; background-size: 18px 18px!important; opacity: 1!important; filter: none!important; box-shadow: none!important; transform: none!important; transition: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-galeri.dark :is(#modalUploadGaleri, [id^="editGaleri"], [id^="videoPreview"]).sppk-gallery-dialog .btn-close { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='m4 4 8 8m0-8-8 8' stroke='%23afafaf' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E")!important; filter: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-galeri :is(#modalUploadGaleri, [id^="editGaleri"], [id^="videoPreview"]).sppk-gallery-dialog .btn-close:is(:hover, :focus-visible) { background-color: var(--sppk-theme-surface-soft)!important; box-shadow: none!important; transform: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-galeri :is(#modalUploadGaleri, [id^="editGaleri"], [id^="videoPreview"]).sppk-gallery-dialog :is(a, button):focus-visible { outline: 2px solid var(--gallery-dialog-focus)!important; outline-offset: 2px!important; }
@media (max-width: 1023.98px) {
    html body#sppkAppShell.sppk-app-shell.sppk-route-galeri .page-shell.main-content #sppkPageContent #sppkGalleryWorkspace.sppk-gallery-clean .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr))!important; }
    html body#sppkAppShell.sppk-app-shell.sppk-route-galeri .page-shell.main-content #sppkPageContent #sppkGalleryWorkspace.sppk-gallery-clean .gallery-toolbar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr)!important; }
    html body#sppkAppShell.sppk-app-shell.sppk-route-galeri .page-shell.main-content #sppkPageContent #sppkGalleryWorkspace.sppk-gallery-clean .gallery-search-field { grid-column: 1 / -1!important; }
}
@media (max-width: 599.98px) {
    html body#sppkAppShell.sppk-app-shell.sppk-route-galeri .page-shell.main-content #sppkPageContent #sppkGalleryWorkspace.sppk-gallery-clean .gallery-grid { grid-template-columns: minmax(0, 1fr)!important; gap: 16px!important; }
    html body#sppkAppShell.sppk-app-shell.sppk-route-galeri .page-shell.main-content #sppkPageContent #sppkGalleryWorkspace.sppk-gallery-clean .gallery-toolbar { padding: 14px!important; gap: 14px!important; }
    html body#sppkAppShell.sppk-app-shell.sppk-route-galeri .page-shell.main-content #sppkPageContent #sppkGalleryWorkspace.sppk-gallery-clean .gallery-content { padding: 16px!important; }
    html body#sppkAppShell.sppk-app-shell.sppk-route-galeri .page-shell.main-content #sppkPageContent #sppkGalleryWorkspace.sppk-gallery-clean .gallery-page-heading { gap: 14px!important; }
    html body#sppkAppShell.sppk-app-shell.sppk-route-galeri .page-shell.main-content #sppkPageContent #sppkGalleryWorkspace.sppk-gallery-clean .gallery-page-heading > div { flex-basis: 100%!important; }
    html body#sppkAppShell.sppk-app-shell.sppk-route-galeri :is(#modalUploadGaleri, [id^="editGaleri"], [id^="videoPreview"]).sppk-gallery-dialog .modal-dialog { --bs-modal-margin: 12px!important; margin: 12px!important; }
    html body#sppkAppShell.sppk-app-shell.sppk-route-galeri :is(#modalUploadGaleri, [id^="editGaleri"], [id^="videoPreview"]).sppk-gallery-dialog :is(.modal-header, .modal-footer) { padding: 16px!important; }
    html body#sppkAppShell.sppk-app-shell.sppk-route-galeri :is(#modalUploadGaleri, [id^="editGaleri"], [id^="videoPreview"]).sppk-gallery-dialog .modal-body { padding: 16px!important; }
    html body#sppkAppShell.sppk-app-shell.sppk-route-galeri :is(#modalUploadGaleri, [id^="editGaleri"], [id^="videoPreview"]).sppk-gallery-dialog .gallery-edit-preview { padding: 0!important; }
}
}
@layer sppk-typography {
html body#sppkAppShell.sppk-app-shell.sppk-route-galeri .page-shell.main-content #sppkPageContent #sppkGalleryWorkspace.sppk-gallery-clean, html body#sppkAppShell.sppk-app-shell.sppk-route-galeri :is(#modalUploadGaleri, [id^="editGaleri"], [id^="videoPreview"]).sppk-gallery-dialog { font-size: .875rem!important; line-height: 1.6!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-galeri .page-shell.main-content #sppkPageContent #sppkGalleryWorkspace.sppk-gallery-clean .gallery-page-heading h1 { font-size: 1.5rem!important; line-height: 1.3!important; font-weight: 600!important; letter-spacing: normal!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-galeri .page-shell.main-content #sppkPageContent #sppkGalleryWorkspace.sppk-gallery-clean :is(.gallery-page-heading p, .gallery-toolbar input, .gallery-toolbar select, .gallery-upload-button, .gallery-content > p, .gallery-page-footer a), html body#sppkAppShell.sppk-app-shell.sppk-route-galeri :is(#modalUploadGaleri, [id^="editGaleri"], [id^="videoPreview"]).sppk-gallery-dialog :is(.form-control, .form-select, .modal-footer .btn) { font-size: .875rem!important; line-height: 1.5!important; font-weight: 400!important; letter-spacing: normal!important; text-transform: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-galeri .page-shell.main-content #sppkPageContent #sppkGalleryWorkspace.sppk-gallery-clean :is(.gallery-upload-button, .gallery-toolbar label), html body#sppkAppShell.sppk-app-shell.sppk-route-galeri :is(#modalUploadGaleri, [id^="editGaleri"], [id^="videoPreview"]).sppk-gallery-dialog .form-label { font-size: .875rem!important; line-height: 1.5!important; font-weight: 500!important; letter-spacing: normal!important; text-transform: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-galeri .page-shell.main-content #sppkPageContent #sppkGalleryWorkspace.sppk-gallery-clean :is(.gallery-results-heading h2, .gallery-content h3, .gallery-empty-state h3) { font-size: 1rem!important; line-height: 1.4!important; font-weight: 500!important; letter-spacing: normal!important; text-transform: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-galeri .page-shell.main-content #sppkPageContent #sppkGalleryWorkspace.sppk-gallery-clean :is(.gallery-results-heading p, .gallery-category, .gallery-media-kind, .gallery-footer span, .gallery-card-actions .btn) { font-size: .75rem!important; line-height: 1.5!important; font-weight: 400!important; letter-spacing: normal!important; text-transform: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-galeri .page-shell.main-content #sppkPageContent #sppkGalleryWorkspace.sppk-gallery-clean .gallery-toolbar label, html body#sppkAppShell.sppk-app-shell.sppk-route-galeri :is(#modalUploadGaleri, [id^="editGaleri"], [id^="videoPreview"]).sppk-gallery-dialog .form-label { color: var(--sppk-theme-text)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-galeri .page-shell.main-content #sppkPageContent #sppkGalleryWorkspace.sppk-gallery-clean .gallery-empty-state > i { font-size: 1.75rem!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-galeri .page-shell.main-content #sppkPageContent #sppkGalleryWorkspace.sppk-gallery-clean .overlay-btn > i { font-size: 1rem!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-galeri :is(#modalUploadGaleri, [id^="editGaleri"], [id^="videoPreview"]).sppk-gallery-dialog .modal-title { font-size: 1.125rem!important; line-height: 1.4!important; font-weight: 500!important; letter-spacing: normal!important; text-transform: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-galeri :is(#modalUploadGaleri, [id^="editGaleri"], [id^="videoPreview"]).sppk-gallery-dialog .modal-footer .btn { font-weight: 500!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-galeri :is(#modalUploadGaleri, [id^="editGaleri"], [id^="videoPreview"]).sppk-gallery-dialog input[type="file"]::file-selector-button { font: inherit!important; }
}

/* KPI OPERASIONAL V62 — CLEAR METRICS AND A QUIET OPERATIONAL WORKSPACE */
@layer sppk-kpi-layout {
html body#sppkAppShell.sppk-app-shell.sppk-route-kpi-operasional .page-shell.main-content #sppkPageContent #kpiOperationalPage.sppk-kpi-clean { --ink: var(--sppk-theme-heading)!important; --muted: var(--sppk-theme-muted)!important; --line: var(--sppk-theme-line)!important; --surface: var(--sppk-theme-surface)!important; --soft: var(--sppk-theme-surface-soft)!important; --kpi-selected: #edf0f2!important; --kpi-focus: #777777!important; --kpi-good: #24644b!important; --kpi-watch: #815b20!important; --kpi-risk: #9b4050!important; display: grid!important; grid-template-columns: minmax(0, 1fr)!important; gap: 24px!important; width: 100%!important; max-width: 1240px!important; min-width: 0!important; margin: 0 auto!important; padding: 4px 0 28px!important; color: var(--sppk-theme-copy)!important; background: transparent!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-kpi-operasional.dark .page-shell.main-content #sppkPageContent #kpiOperationalPage.sppk-kpi-clean { --kpi-selected: #303030!important; --kpi-focus: #b5b5b5!important; --kpi-good: #90cdb0!important; --kpi-watch: #dec08d!important; --kpi-risk: #e3a4b1!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-kpi-operasional .page-shell.main-content #sppkPageContent #kpiOperationalPage.sppk-kpi-clean *, html body#sppkAppShell.sppk-app-shell.sppk-route-kpi-operasional #kpiDefinitionModal.sppk-kpi-dialog * { box-sizing: border-box!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-kpi-operasional .page-shell.main-content #sppkPageContent #kpiOperationalPage.sppk-kpi-clean > * { min-width: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-kpi-operasional .page-shell.main-content #sppkPageContent #kpiOperationalPage.sppk-kpi-clean .kpi-hero { display: flex!important; align-items: flex-start!important; justify-content: space-between!important; gap: 20px 32px!important; min-height: 0!important; margin: 0!important; padding: 0!important; border: 0!important; border-radius: 0!important; background: transparent!important; background-image: none!important; color: var(--sppk-theme-copy)!important; box-shadow: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-kpi-operasional .page-shell.main-content #sppkPageContent #kpiOperationalPage.sppk-kpi-clean .kpi-hero > div:first-child { flex: 1 1 auto!important; min-width: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-kpi-operasional .page-shell.main-content #sppkPageContent #kpiOperationalPage.sppk-kpi-clean .kpi-eyebrow { display: inline-flex!important; align-items: center!important; gap: 6px!important; margin: 0 0 9px!important; color: var(--sppk-theme-muted)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-kpi-operasional .page-shell.main-content #sppkPageContent #kpiOperationalPage.sppk-kpi-clean .kpi-eyebrow > i { color: inherit!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-kpi-operasional .page-shell.main-content #sppkPageContent #kpiOperationalPage.sppk-kpi-clean .kpi-hero h1 { margin: 0 0 8px!important; color: var(--sppk-theme-heading)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-kpi-operasional .page-shell.main-content #sppkPageContent #kpiOperationalPage.sppk-kpi-clean .kpi-hero p { max-width: 700px!important; margin: 0!important; color: var(--sppk-theme-copy)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-kpi-operasional .page-shell.main-content #sppkPageContent #kpiOperationalPage.sppk-kpi-clean .kpi-hero-score { display: grid!important; flex: 0 0 220px!important; gap: 5px!important; min-width: 0!important; margin: 0!important; padding: 16px 18px!important; border: 1px solid var(--sppk-theme-line)!important; border-radius: 10px!important; background: var(--sppk-theme-surface)!important; background-image: none!important; color: var(--sppk-theme-copy)!important; text-align: left!important; box-shadow: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-kpi-operasional .page-shell.main-content #sppkPageContent #kpiOperationalPage.sppk-kpi-clean .kpi-hero-score :is(span, small) { display: block!important; color: var(--sppk-theme-muted)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-kpi-operasional .page-shell.main-content #sppkPageContent #kpiOperationalPage.sppk-kpi-clean .kpi-hero-score strong { display: block!important; color: var(--sppk-theme-heading)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-kpi-operasional .page-shell.main-content #sppkPageContent #kpiOperationalPage.sppk-kpi-clean .kpi-notice { display: flex!important; align-items: flex-start!important; gap: 10px!important; min-width: 0!important; margin: 0!important; padding: 14px 16px!important; border: 1px solid var(--sppk-theme-line)!important; border-radius: 9px!important; background: var(--sppk-theme-surface-soft)!important; color: var(--sppk-theme-copy)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-kpi-operasional .page-shell.main-content #sppkPageContent #kpiOperationalPage.sppk-kpi-clean .kpi-notice > i { flex: 0 0 18px!important; color: var(--kpi-watch)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-kpi-operasional .page-shell.main-content #sppkPageContent #kpiOperationalPage.sppk-kpi-clean .kpi-notice > span { min-width: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-kpi-operasional .page-shell.main-content #sppkPageContent #kpiOperationalPage.sppk-kpi-clean .kpi-filterbar { display: flex!important; align-items: center!important; justify-content: space-between!important; flex-wrap: wrap!important; gap: 12px 20px!important; margin: 0 0 -8px!important; padding: 0!important; border: 0!important; border-radius: 0!important; background: transparent!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-kpi-operasional .page-shell.main-content #sppkPageContent #kpiOperationalPage.sppk-kpi-clean .kpi-filterbar h2 { margin: 0!important; color: var(--sppk-theme-heading)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-kpi-operasional .page-shell.main-content #sppkPageContent #kpiOperationalPage.sppk-kpi-clean .kpi-filter-buttons { display: flex!important; flex-wrap: wrap!important; align-items: center!important; gap: 6px!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-kpi-operasional .page-shell.main-content #sppkPageContent #kpiOperationalPage.sppk-kpi-clean .kpi-filter-buttons button { display: inline-flex!important; align-items: center!important; justify-content: center!important; min-height: 34px!important; margin: 0!important; padding: 7px 11px!important; border: 1px solid var(--sppk-theme-line)!important; border-radius: 7px!important; background: var(--sppk-theme-surface)!important; color: var(--sppk-theme-copy)!important; -webkit-text-fill-color: currentColor!important; box-shadow: none!important; transform: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-kpi-operasional .page-shell.main-content #sppkPageContent #kpiOperationalPage.sppk-kpi-clean .kpi-filter-buttons button:is(:hover, :focus-visible) { border-color: var(--sppk-theme-line)!important; background: var(--sppk-theme-surface-soft)!important; color: var(--sppk-theme-heading)!important; transform: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-kpi-operasional .page-shell.main-content #sppkPageContent #kpiOperationalPage.sppk-kpi-clean .kpi-filter-buttons button:is(.is-active, [aria-pressed="true"]) { border-color: var(--sppk-theme-line)!important; background: var(--kpi-selected)!important; color: var(--sppk-theme-heading)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-kpi-operasional .page-shell.main-content #sppkPageContent #kpiOperationalPage.sppk-kpi-clean .kpi-strip { display: grid!important; grid-template-columns: repeat(4, minmax(0, 1fr))!important; align-items: stretch!important; gap: 14px!important; margin: 0!important; padding: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-kpi-operasional .page-shell.main-content #sppkPageContent #kpiOperationalPage.sppk-kpi-clean .kpi-tile { display: flex!important; flex-direction: column!important; min-width: 0!important; min-height: 190px!important; margin: 0!important; padding: 16px!important; border: 1px solid var(--sppk-theme-line)!important; border-top: 2px solid var(--tone)!important; border-radius: 10px!important; background: var(--sppk-theme-surface)!important; background-image: none!important; color: var(--sppk-theme-copy)!important; box-shadow: none!important; transform: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-kpi-operasional.dark .page-shell.main-content #sppkPageContent #kpiOperationalPage.sppk-kpi-clean .kpi-tile { border: 1px solid var(--sppk-theme-line)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-kpi-operasional .page-shell.main-content #sppkPageContent #kpiOperationalPage.sppk-kpi-clean .kpi-tile-top { display: flex!important; align-items: center!important; justify-content: space-between!important; gap: 12px!important; min-width: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-kpi-operasional .page-shell.main-content #sppkPageContent #kpiOperationalPage.sppk-kpi-clean .kpi-icon { display: inline-flex!important; align-items: center!important; justify-content: center!important; width: 30px!important; height: 30px!important; padding: 0!important; border: 0!important; border-radius: 7px!important; background: var(--sppk-theme-surface-soft)!important; background-image: none!important; color: var(--sppk-theme-copy)!important; -webkit-text-fill-color: currentColor!important; box-shadow: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-kpi-operasional .page-shell.main-content #sppkPageContent #kpiOperationalPage.sppk-kpi-clean .kpi-icon > i { color: inherit!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-kpi-operasional .page-shell.main-content #sppkPageContent #kpiOperationalPage.sppk-kpi-clean .kpi-info { display: inline-flex!important; align-items: center!important; justify-content: center!important; width: 30px!important; height: 30px!important; margin: 0!important; padding: 6px!important; border: 0!important; border-radius: 6px!important; background: transparent!important; background-image: none!important; color: var(--sppk-theme-muted)!important; -webkit-text-fill-color: currentColor!important; box-shadow: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-kpi-operasional .page-shell.main-content #sppkPageContent #kpiOperationalPage.sppk-kpi-clean .kpi-info > i { color: inherit!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-kpi-operasional .page-shell.main-content #sppkPageContent #kpiOperationalPage.sppk-kpi-clean .kpi-info:is(:hover, :focus-visible) { background: var(--sppk-theme-surface-soft)!important; color: var(--sppk-theme-heading)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-kpi-operasional .page-shell.main-content #sppkPageContent #kpiOperationalPage.sppk-kpi-clean .kpi-label { display: block!important; min-width: 0!important; margin: 10px 0 0!important; color: var(--sppk-theme-muted)!important; -webkit-text-fill-color: currentColor!important; overflow-wrap: anywhere!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-kpi-operasional .page-shell.main-content #sppkPageContent #kpiOperationalPage.sppk-kpi-clean .kpi-value { display: block!important; min-width: 0!important; margin: 4px 0 0!important; color: var(--sppk-theme-heading)!important; -webkit-text-fill-color: currentColor!important; overflow-wrap: anywhere!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-kpi-operasional .page-shell.main-content #sppkPageContent #kpiOperationalPage.sppk-kpi-clean .kpi-progress { height: 4px!important; margin: 14px 0 10px!important; overflow: hidden!important; border-radius: 4px!important; background: var(--sppk-theme-surface-raised)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-kpi-operasional .page-shell.main-content #sppkPageContent #kpiOperationalPage.sppk-kpi-clean .kpi-meta { display: grid!important; grid-template-columns: minmax(0, 1fr)!important; gap: 4px!important; min-width: 0!important; margin-top: auto!important; color: var(--sppk-theme-muted)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-kpi-operasional .page-shell.main-content #sppkPageContent #kpiOperationalPage.sppk-kpi-clean .kpi-meta > span { min-width: 0!important; color: var(--sppk-theme-muted)!important; -webkit-text-fill-color: currentColor!important; overflow-wrap: anywhere!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-kpi-operasional .page-shell.main-content #sppkPageContent #kpiOperationalPage.sppk-kpi-clean .kpi-meta b { min-width: 0!important; text-align: left!important; overflow-wrap: anywhere!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-kpi-operasional .page-shell.main-content #sppkPageContent #kpiOperationalPage.sppk-kpi-clean :is(.status-complete, .status-good) { color: var(--kpi-good)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-kpi-operasional .page-shell.main-content #sppkPageContent #kpiOperationalPage.sppk-kpi-clean .status-watch { color: var(--kpi-watch)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-kpi-operasional .page-shell.main-content #sppkPageContent #kpiOperationalPage.sppk-kpi-clean .status-risk { color: var(--kpi-risk)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-kpi-operasional .page-shell.main-content #sppkPageContent #kpiOperationalPage.sppk-kpi-clean .status-muted { color: var(--sppk-theme-muted)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-kpi-operasional .page-shell.main-content #sppkPageContent #kpiOperationalPage.sppk-kpi-clean .kpi-main-grid { display: grid!important; grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr)!important; align-items: stretch!important; gap: 18px!important; min-width: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-kpi-operasional .page-shell.main-content #sppkPageContent #kpiOperationalPage.sppk-kpi-clean .kpi-panel { min-width: 0!important; padding: 20px!important; border: 1px solid var(--sppk-theme-line)!important; border-radius: 10px!important; background: var(--sppk-theme-surface)!important; background-image: none!important; color: var(--sppk-theme-copy)!important; box-shadow: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-kpi-operasional .page-shell.main-content #sppkPageContent #kpiOperationalPage.sppk-kpi-clean .kpi-chart-panel { display: flex!important; flex-direction: column!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-kpi-operasional .page-shell.main-content #sppkPageContent #kpiOperationalPage.sppk-kpi-clean .kpi-panel-head { display: flex!important; align-items: flex-start!important; justify-content: space-between!important; flex-wrap: wrap!important; gap: 12px 18px!important; min-width: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-kpi-operasional .page-shell.main-content #sppkPageContent #kpiOperationalPage.sppk-kpi-clean .kpi-panel-head > div { min-width: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-kpi-operasional .page-shell.main-content #sppkPageContent #kpiOperationalPage.sppk-kpi-clean .kpi-section-kicker { display: inline-block!important; margin: 0 0 6px!important; color: var(--sppk-theme-muted)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-kpi-operasional .page-shell.main-content #sppkPageContent #kpiOperationalPage.sppk-kpi-clean .kpi-panel-head h2 { margin: 0!important; color: var(--sppk-theme-heading)!important; -webkit-text-fill-color: currentColor!important; overflow-wrap: anywhere!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-kpi-operasional .page-shell.main-content #sppkPageContent #kpiOperationalPage.sppk-kpi-clean .kpi-panel-head p { margin: 6px 0 0!important; color: var(--sppk-theme-muted)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-kpi-operasional .page-shell.main-content #sppkPageContent #kpiOperationalPage.sppk-kpi-clean .kpi-legend { display: flex!important; align-items: center!important; justify-content: flex-start!important; flex-wrap: wrap!important; gap: 8px 12px!important; margin: 0!important; color: var(--sppk-theme-muted)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-kpi-operasional .page-shell.main-content #sppkPageContent #kpiOperationalPage.sppk-kpi-clean .kpi-legend span { color: inherit!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-kpi-operasional .page-shell.main-content #sppkPageContent #kpiOperationalPage.sppk-kpi-clean .kpi-chart-wrap { position: relative!important; flex: 1 1 auto!important; min-width: 0!important; min-height: 280px!important; height: 300px!important; margin: 16px 0 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-kpi-operasional .page-shell.main-content #sppkPageContent #kpiOperationalPage.sppk-kpi-clean .kpi-chart-wrap canvas { position: absolute!important; inset: 0!important; display: block!important; width: 100%!important; height: 100%!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-kpi-operasional .page-shell.main-content #sppkPageContent #kpiOperationalPage.sppk-kpi-clean .kpi-insight-list { display: grid!important; gap: 0!important; margin: 10px 0 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-kpi-operasional .page-shell.main-content #sppkPageContent #kpiOperationalPage.sppk-kpi-clean .kpi-insight-list > div { display: flex!important; align-items: flex-start!important; gap: 10px!important; min-width: 0!important; padding: 14px 0!important; border: 0!important; border-bottom: 1px solid var(--sppk-theme-line-soft)!important; border-radius: 0!important; background: transparent!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-kpi-operasional .page-shell.main-content #sppkPageContent #kpiOperationalPage.sppk-kpi-clean .kpi-insight-list > div:last-child { padding-bottom: 0!important; border-bottom: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-kpi-operasional .page-shell.main-content #sppkPageContent #kpiOperationalPage.sppk-kpi-clean .kpi-insight-list i { display: inline-flex!important; align-items: center!important; justify-content: center!important; flex: 0 0 28px!important; width: 28px!important; height: 28px!important; padding: 0!important; border: 0!important; border-radius: 6px!important; background: var(--sppk-theme-surface-soft)!important; color: var(--sppk-theme-copy)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-kpi-operasional .page-shell.main-content #sppkPageContent #kpiOperationalPage.sppk-kpi-clean .kpi-insight-list span { min-width: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-kpi-operasional .page-shell.main-content #sppkPageContent #kpiOperationalPage.sppk-kpi-clean .kpi-insight-list strong { display: block!important; color: var(--sppk-theme-text)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-kpi-operasional .page-shell.main-content #sppkPageContent #kpiOperationalPage.sppk-kpi-clean .kpi-insight-list small { display: block!important; margin: 4px 0 0!important; color: var(--sppk-theme-muted)!important; -webkit-text-fill-color: currentColor!important; overflow-wrap: anywhere!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-kpi-operasional .page-shell.main-content #sppkPageContent #kpiOperationalPage.sppk-kpi-clean .kpi-readonly { display: inline-flex!important; align-items: center!important; gap: 6px!important; margin: 0!important; padding: 5px 8px!important; border: 1px solid var(--sppk-theme-line)!important; border-radius: 6px!important; background: var(--sppk-theme-surface-soft)!important; background-image: none!important; color: var(--sppk-theme-copy)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-kpi-operasional .page-shell.main-content #sppkPageContent #kpiOperationalPage.sppk-kpi-clean .kpi-readonly > i { color: inherit!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-kpi-operasional .page-shell.main-content #sppkPageContent #kpiOperationalPage.sppk-kpi-clean .kpi-flow-row { display: grid!important; grid-template-columns: repeat(4, minmax(0, 1fr))!important; align-items: stretch!important; gap: 12px!important; margin: 20px 0 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-kpi-operasional .page-shell.main-content #sppkPageContent #kpiOperationalPage.sppk-kpi-clean .kpi-flow-row > div { min-width: 0!important; padding: 14px 16px!important; border: 1px solid var(--sppk-theme-line-soft)!important; border-radius: 8px!important; background: var(--sppk-theme-surface-soft)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-kpi-operasional .page-shell.main-content #sppkPageContent #kpiOperationalPage.sppk-kpi-clean .kpi-flow-row > i { display: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-kpi-operasional .page-shell.main-content #sppkPageContent #kpiOperationalPage.sppk-kpi-clean .kpi-flow-row :is(span, small) { display: block!important; color: var(--sppk-theme-muted)!important; -webkit-text-fill-color: currentColor!important; overflow-wrap: anywhere!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-kpi-operasional .page-shell.main-content #sppkPageContent #kpiOperationalPage.sppk-kpi-clean .kpi-flow-row strong { display: block!important; margin: 5px 0!important; color: var(--sppk-theme-heading)!important; -webkit-text-fill-color: currentColor!important; overflow-wrap: anywhere!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-kpi-operasional .page-shell.main-content #sppkPageContent #kpiOperationalPage.sppk-kpi-clean .kpi-freshness { display: grid!important; grid-template-columns: repeat(5, minmax(0, 1fr))!important; gap: 10px!important; margin: 18px 0 0!important; padding: 18px 0 0!important; border-top: 1px solid var(--sppk-theme-line-soft)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-kpi-operasional .page-shell.main-content #sppkPageContent #kpiOperationalPage.sppk-kpi-clean .kpi-freshness > span { min-width: 0!important; padding: 0!important; border: 0!important; border-radius: 0!important; color: var(--sppk-theme-muted)!important; -webkit-text-fill-color: currentColor!important; overflow-wrap: anywhere!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-kpi-operasional .page-shell.main-content #sppkPageContent #kpiOperationalPage.sppk-kpi-clean .kpi-freshness b { display: block!important; margin: 0 0 4px!important; color: var(--sppk-theme-text)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-kpi-operasional .page-shell.main-content #sppkPageContent #kpiOperationalPage.sppk-kpi-clean .kpi-method-note { display: block!important; margin: 0!important; padding: 0!important; color: var(--sppk-theme-muted)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-kpi-operasional .page-shell.main-content #sppkPageContent #kpiOperationalPage.sppk-kpi-clean .kpi-method-note i { color: inherit!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-kpi-operasional .page-shell.main-content #sppkPageContent #kpiOperationalPage.sppk-kpi-clean :is(button, a):focus-visible { outline: 2px solid var(--kpi-focus)!important; outline-offset: 2px!important; box-shadow: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-kpi-operasional .page-shell.main-content #sppkPageContent #kpiOperationalPage.sppk-kpi-clean [hidden] { display: none!important; }

html body#sppkAppShell.sppk-app-shell.sppk-route-kpi-operasional #kpiDefinitionModal.sppk-kpi-dialog { color: var(--sppk-theme-copy)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-kpi-operasional #kpiDefinitionModal.sppk-kpi-dialog .modal-dialog { width: auto!important; max-width: 620px!important; margin: 24px auto!important; --bs-modal-margin: 24px!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-kpi-operasional #kpiDefinitionModal.sppk-kpi-dialog .modal-content { border: 1px solid var(--sppk-theme-line)!important; border-radius: 12px!important; background: var(--sppk-theme-surface)!important; color: var(--sppk-theme-copy)!important; box-shadow: var(--sppk-theme-shadow)!important; overflow: hidden!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-kpi-operasional #kpiDefinitionModal.sppk-kpi-dialog .modal-header { display: flex!important; align-items: flex-start!important; gap: 16px!important; padding: 20px!important; border: 0!important; border-bottom: 1px solid var(--sppk-theme-line-soft)!important; background: var(--sppk-theme-surface)!important; color: var(--sppk-theme-heading)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-kpi-operasional #kpiDefinitionModal.sppk-kpi-dialog .modal-header > div { min-width: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-kpi-operasional #kpiDefinitionModal.sppk-kpi-dialog .kpi-section-kicker { display: block!important; margin: 0 0 6px!important; color: var(--sppk-theme-muted)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-kpi-operasional #kpiDefinitionModal.sppk-kpi-dialog .modal-title { margin: 0!important; color: var(--sppk-theme-heading)!important; -webkit-text-fill-color: currentColor!important; overflow-wrap: anywhere!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-kpi-operasional #kpiDefinitionModal.sppk-kpi-dialog .modal-body { min-height: 0!important; padding: 20px!important; overflow-y: auto!important; background: var(--sppk-theme-surface)!important; color: var(--sppk-theme-copy)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-kpi-operasional #kpiDefinitionModal.sppk-kpi-dialog .modal-body p { margin: 0 0 18px!important; color: var(--sppk-theme-copy)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-kpi-operasional #kpiDefinitionModal.sppk-kpi-dialog .kpi-source { display: flex!important; align-items: flex-start!important; gap: 10px!important; min-width: 0!important; padding: 14px!important; border: 1px solid var(--sppk-theme-line-soft)!important; border-radius: 8px!important; background: var(--sppk-theme-surface-soft)!important; color: var(--sppk-theme-copy)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-kpi-operasional #kpiDefinitionModal.sppk-kpi-dialog .kpi-source > i { flex: 0 0 18px!important; color: var(--sppk-theme-muted)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-kpi-operasional #kpiDefinitionModal.sppk-kpi-dialog .kpi-source > span { display: block!important; min-width: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-kpi-operasional #kpiDefinitionModal.sppk-kpi-dialog .kpi-source small { display: block!important; margin: 0 0 4px!important; color: var(--sppk-theme-muted)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-kpi-operasional #kpiDefinitionModal.sppk-kpi-dialog .kpi-source strong { display: block!important; color: var(--sppk-theme-text)!important; -webkit-text-fill-color: currentColor!important; overflow-wrap: anywhere!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-kpi-operasional #kpiDefinitionModal.sppk-kpi-dialog .btn-close { flex: 0 0 32px!important; width: 32px!important; height: 32px!important; min-height: 32px!important; margin: 0 0 0 auto!important; padding: 8px!important; border: 0!important; border-radius: 6px!important; background-color: transparent!important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='m4 4 8 8m0-8-8 8' stroke='%23686868' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E")!important; background-position: center!important; background-repeat: no-repeat!important; background-size: 18px 18px!important; opacity: 1!important; filter: none!important; box-shadow: none!important; transform: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-kpi-operasional.dark #kpiDefinitionModal.sppk-kpi-dialog .btn-close { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='m4 4 8 8m0-8-8 8' stroke='%23afafaf' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E")!important; filter: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-kpi-operasional #kpiDefinitionModal.sppk-kpi-dialog .btn-close:is(:hover, :focus-visible) { background-color: var(--sppk-theme-surface-soft)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-kpi-operasional #kpiDefinitionModal.sppk-kpi-dialog .btn-close:focus-visible { outline: 2px solid var(--sppk-theme-muted)!important; outline-offset: 2px!important; }
@media (max-width: 1199.98px) { html body#sppkAppShell.sppk-app-shell.sppk-route-kpi-operasional .page-shell.main-content #sppkPageContent #kpiOperationalPage.sppk-kpi-clean .kpi-strip { grid-template-columns: repeat(2, minmax(0, 1fr))!important; } }
@media (max-width: 1099.98px) { html body#sppkAppShell.sppk-app-shell.sppk-route-kpi-operasional .page-shell.main-content #sppkPageContent #kpiOperationalPage.sppk-kpi-clean .kpi-main-grid { grid-template-columns: minmax(0, 1fr)!important; } }
@media (max-width: 767.98px) {
    html body#sppkAppShell.sppk-app-shell.sppk-route-kpi-operasional .page-shell.main-content #sppkPageContent #kpiOperationalPage.sppk-kpi-clean .kpi-hero { flex-direction: column!important; gap: 18px!important; }
    html body#sppkAppShell.sppk-app-shell.sppk-route-kpi-operasional .page-shell.main-content #sppkPageContent #kpiOperationalPage.sppk-kpi-clean .kpi-hero-score { flex-basis: auto!important; width: 100%!important; padding: 14px 16px!important; }
    html body#sppkAppShell.sppk-app-shell.sppk-route-kpi-operasional .page-shell.main-content #sppkPageContent #kpiOperationalPage.sppk-kpi-clean .kpi-filterbar { align-items: flex-start!important; flex-direction: column!important; }
    html body#sppkAppShell.sppk-app-shell.sppk-route-kpi-operasional .page-shell.main-content #sppkPageContent #kpiOperationalPage.sppk-kpi-clean .kpi-filter-buttons { width: 100%!important; }
    html body#sppkAppShell.sppk-app-shell.sppk-route-kpi-operasional .page-shell.main-content #sppkPageContent #kpiOperationalPage.sppk-kpi-clean .kpi-filter-buttons button { flex: 0 0 auto!important; }
    html body#sppkAppShell.sppk-app-shell.sppk-route-kpi-operasional .page-shell.main-content #sppkPageContent #kpiOperationalPage.sppk-kpi-clean .kpi-panel { padding: 16px!important; }
    html body#sppkAppShell.sppk-app-shell.sppk-route-kpi-operasional .page-shell.main-content #sppkPageContent #kpiOperationalPage.sppk-kpi-clean .kpi-chart-wrap { min-height: 240px!important; height: 260px!important; }
    html body#sppkAppShell.sppk-app-shell.sppk-route-kpi-operasional .page-shell.main-content #sppkPageContent #kpiOperationalPage.sppk-kpi-clean .kpi-flow-row { grid-template-columns: repeat(2, minmax(0, 1fr))!important; gap: 10px!important; }
    html body#sppkAppShell.sppk-app-shell.sppk-route-kpi-operasional .page-shell.main-content #sppkPageContent #kpiOperationalPage.sppk-kpi-clean .kpi-freshness { grid-template-columns: repeat(2, minmax(0, 1fr))!important; gap: 14px!important; }
    html body#sppkAppShell.sppk-app-shell.sppk-route-kpi-operasional #kpiDefinitionModal.sppk-kpi-dialog .modal-dialog { margin: 12px!important; --bs-modal-margin: 12px!important; }
    html body#sppkAppShell.sppk-app-shell.sppk-route-kpi-operasional #kpiDefinitionModal.sppk-kpi-dialog :is(.modal-header, .modal-body) { padding: 16px!important; }
}
@media (max-width: 599.98px) { html body#sppkAppShell.sppk-app-shell.sppk-route-kpi-operasional .page-shell.main-content #sppkPageContent #kpiOperationalPage.sppk-kpi-clean .kpi-strip { grid-template-columns: minmax(0, 1fr)!important; gap: 12px!important; } }
}
@layer sppk-typography {
html body#sppkAppShell.sppk-app-shell.sppk-route-kpi-operasional .page-shell.main-content #sppkPageContent #kpiOperationalPage.sppk-kpi-clean, html body#sppkAppShell.sppk-app-shell.sppk-route-kpi-operasional #kpiDefinitionModal.sppk-kpi-dialog { font-size: .875rem!important; line-height: 1.6!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-kpi-operasional .page-shell.main-content #sppkPageContent #kpiOperationalPage.sppk-kpi-clean .kpi-hero h1 { font-size: 1.5rem!important; line-height: 1.3!important; font-weight: 600!important; letter-spacing: normal!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-kpi-operasional .page-shell.main-content #sppkPageContent #kpiOperationalPage.sppk-kpi-clean .kpi-hero p, html body#sppkAppShell.sppk-app-shell.sppk-route-kpi-operasional #kpiDefinitionModal.sppk-kpi-dialog .modal-body p { font-size: .875rem!important; line-height: 1.6!important; font-weight: 400!important; letter-spacing: normal!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-kpi-operasional .page-shell.main-content #sppkPageContent #kpiOperationalPage.sppk-kpi-clean :is(.kpi-eyebrow, .kpi-section-kicker, .kpi-hero-score span, .kpi-hero-score small, .kpi-label, .kpi-meta, .kpi-meta > span, .kpi-meta > b, .kpi-legend, .kpi-legend span, .kpi-panel-head p, .kpi-insight-list small, .kpi-readonly, .kpi-flow-row span, .kpi-flow-row small, .kpi-freshness > span, .kpi-method-note), html body#sppkAppShell.sppk-app-shell.sppk-route-kpi-operasional #kpiDefinitionModal.sppk-kpi-dialog :is(.kpi-section-kicker, .kpi-source small) { font-size: .75rem!important; line-height: 1.5!important; font-weight: 400!important; letter-spacing: normal!important; text-transform: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-kpi-operasional .page-shell.main-content #sppkPageContent #kpiOperationalPage.sppk-kpi-clean :is(.kpi-value, .kpi-hero-score strong) { font-size: 1.5rem!important; line-height: 1.3!important; font-weight: 600!important; letter-spacing: normal!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-kpi-operasional .page-shell.main-content #sppkPageContent #kpiOperationalPage.sppk-kpi-clean :is(.kpi-filterbar h2, .kpi-panel-head h2) { font-size: 1rem!important; line-height: 1.4!important; font-weight: 500!important; letter-spacing: normal!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-kpi-operasional .page-shell.main-content #sppkPageContent #kpiOperationalPage.sppk-kpi-clean .kpi-filter-buttons button { font-size: .75rem!important; line-height: 1.5!important; font-weight: 500!important; letter-spacing: normal!important; text-transform: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-kpi-operasional .page-shell.main-content #sppkPageContent #kpiOperationalPage.sppk-kpi-clean :is(.kpi-insight-list strong, .kpi-freshness b) { font-size: .875rem!important; line-height: 1.5!important; font-weight: 500!important; letter-spacing: normal!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-kpi-operasional .page-shell.main-content #sppkPageContent #kpiOperationalPage.sppk-kpi-clean .kpi-flow-row strong { font-size: 1.25rem!important; line-height: 1.3!important; font-weight: 500!important; letter-spacing: normal!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-kpi-operasional .page-shell.main-content #sppkPageContent #kpiOperationalPage.sppk-kpi-clean .kpi-icon i { font-size: 1rem!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-kpi-operasional #kpiDefinitionModal.sppk-kpi-dialog .modal-title { font-size: 1.125rem!important; line-height: 1.4!important; font-weight: 500!important; letter-spacing: normal!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-kpi-operasional #kpiDefinitionModal.sppk-kpi-dialog .kpi-source strong { font-size: .875rem!important; line-height: 1.5!important; font-weight: 500!important; letter-spacing: normal!important; }
}

/* SPPK V63 — Dashboard: ringkas, tema netral, dan scroll halaman alami.
   Scope hanya rute dashboard. Perhitungan dan controller modul dipertahankan. */
@layer sppk-dashboard-layout {
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard { --db-surface: #ffffff; --db-soft: #f7f9fa; --db-raised: #edf0f2; --db-line: #dfe4e8; --db-field-line: #c6cdd3; --db-heading: #333333; --db-text: #414141; --db-copy: #505050; --db-muted: #686868; --db-good: #24644b; --db-watch: #815b20; --db-risk: #9b4050; --db-info: #335f9e; --db-primary: #303030; --db-primary-ink: #ffffff; --db-focus: #777777; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard.dark { --db-surface: #202020; --db-soft: #252525; --db-raised: #303030; --db-line: #383838; --db-field-line: #686868; --db-heading: #f0f0f0; --db-text: #e6e6e6; --db-copy: #d0d0d0; --db-muted: #afafaf; --db-good: #90cdb0; --db-watch: #dec08d; --db-risk: #e3a4b1; --db-info: #9ebfe7; --db-primary: #ededed; --db-primary-ink: #202020; --db-focus: #b5b5b5; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent { min-width: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean, html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardManagementLayer, html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardExtensions { box-sizing: border-box!important; width: 100%!important; max-width: 1280px!important; min-width: 0!important; height: auto!important; margin: 0 auto 24px!important; padding: 0!important; background: transparent!important; color: var(--db-copy)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-intelligence-center .page-shell.main-content #sppkPageContent .ic-shell { box-sizing: border-box!important; width: 100%!important; max-width: 1280px!important; min-width: 0!important; height: auto!important; margin: 0 auto 24px!important; padding: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean :is(.row, .dashboard-control-grid, .dashboard-section, .dashboard-kpi-grid), html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardManagementLayer :is(.dashboard-management-grid, .dashboard-management-main, .dashboard-management-side), html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardExtensions :is(.dashboard-extension-grid, .dashboard-extension-card) { min-width: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean .dashboard-command-deck { margin: 0 0 20px!important; padding: 0!important; border: 0!important; background: transparent!important; box-shadow: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean .dashboard-command-header, html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardManagementLayer .dashboard-management-header, html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardExtensions .dashboard-extension-heading { display: flex!important; align-items: flex-start!important; justify-content: space-between!important; gap: 20px!important; margin: 0 0 20px!important; padding: 0!important; border: 0!important; background: transparent!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean .dashboard-command-header > div:first-child, html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardManagementLayer .dashboard-management-header > div, html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardExtensions .dashboard-extension-heading > div { min-width: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean :is(.dashboard-command-eyebrow, .dashboard-active-target-kicker), html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardManagementLayer .dashboard-management-eyebrow, html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardExtensions :is(.dashboard-extension-eyebrow, .dashboard-extension-kicker) { display: inline-flex!important; align-items: center!important; gap: 7px!important; margin: 0 0 6px!important; color: var(--db-muted)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean :is(h1, h2, h3, h5, h6, .section-title), html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardManagementLayer :is(h2, h3), html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardExtensions :is(h2, h3) { color: var(--db-heading)!important; -webkit-text-fill-color: currentColor!important; overflow-wrap: anywhere!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean .dashboard-command-header h1 { margin: 0 0 8px!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean .dashboard-command-header p, html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardManagementLayer .dashboard-management-header p, html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardExtensions .dashboard-extension-heading p { margin: 0!important; max-width: 720px!important; color: var(--db-copy)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean .dashboard-command-live, html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardManagementLayer .dashboard-management-source, html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardExtensions :is(.dashboard-extension-safe, .dashboard-insight-live) { display: inline-flex!important; align-items: center!important; gap: 7px!important; flex: 0 0 auto!important; padding: 6px 9px!important; border: 1px solid var(--db-line)!important; border-radius: 6px!important; background: var(--db-soft)!important; color: var(--db-copy)!important; -webkit-text-fill-color: currentColor!important; white-space: normal!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean .dashboard-command-live > span { width: 6px!important; height: 6px!important; background: var(--db-good)!important; box-shadow: none!important; animation: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean :is(.dashboard-kpi-grid, .dashboard-metrics-section > .row, .dashboard-daily-section > .row) { display: grid!important; grid-template-columns: repeat(4, minmax(0, 1fr))!important; gap: 14px!important; margin: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean :is(.dashboard-kpi-grid, .dashboard-metrics-section > .row, .dashboard-daily-section > .row) > [class*="col-"] { display: flex!important; width: auto!important; max-width: none!important; min-width: 0!important; margin: 0!important; padding: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean :is(.kpi-card, .dashboard-card, .dashboard-daily-section .card, .dashboard-flow-panel), html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardManagementLayer .dashboard-management-panel, html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardExtensions .dashboard-extension-card { position: relative!important; box-sizing: border-box!important; width: 100%!important; min-width: 0!important; margin: 0!important; border: 1px solid var(--db-line)!important; border-left: 1px solid var(--db-line)!important; border-radius: 10px!important; background: var(--db-surface)!important; background-image: none!important; color: var(--db-copy)!important; box-shadow: none!important; transform: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean :is(.kpi-card, .dashboard-card, .dashboard-daily-section .card, .dashboard-flow-panel)::before, html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean :is(.kpi-card, .dashboard-card, .dashboard-daily-section .card, .dashboard-flow-panel)::after, html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardManagementLayer .dashboard-management-panel::before, html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardManagementLayer .dashboard-management-panel::after, html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardExtensions .dashboard-extension-card::before, html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardExtensions .dashboard-extension-card::after { display: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean .kpi-card { display: flex!important; flex-direction: column!important; align-items: flex-start!important; gap: 0!important; min-height: 152px!important; padding: 18px!important; overflow: visible!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean .kpi-card > small { display: block!important; padding-right: 26px!important; color: var(--db-muted)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean .kpi-card > h2 { width: 100%!important; margin: 10px 0 8px!important; color: var(--db-heading)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean .kpi-card > span { margin: auto 0 0!important; color: var(--db-copy)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean .control-kpi-icon { position: static!important; display: inline-flex!important; align-items: center!important; justify-content: center!important; width: 28px!important; height: 28px!important; margin: 0 0 12px!important; border: 0!important; border-radius: 6px!important; background: var(--db-soft)!important; color: var(--db-copy)!important; transform: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean .control-kpi-icon i { color: inherit!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean :is(.dashboard-card, .dashboard-daily-section .card) .card-body { display: flex!important; flex-direction: column!important; min-width: 0!important; padding: 18px!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean .dashboard-card .card-body { min-height: 178px!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean .dashboard-card h6 { min-height: 36px!important; margin: 0 0 10px!important; padding-right: 24px!important; color: var(--db-muted)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean .dashboard-card h2 { margin: 0 0 10px!important; color: var(--db-heading)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean .dashboard-card small { color: var(--db-copy)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean .dashboard-card .progress { display: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean .dashboard-smart-progress { height: auto!important; min-height: 0!important; margin: auto 0 0!important; padding: 14px 0 0!important; border: 0!important; background: transparent!important; box-shadow: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean .dashboard-smart-progress-meta { display: flex!important; justify-content: space-between!important; align-items: flex-start!important; gap: 10px!important; margin-bottom: 7px!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean :is(.dashboard-smart-progress-status, .dashboard-smart-progress-reading) { color: var(--db-muted)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean .dashboard-smart-progress-track { display: block!important; height: 4px!important; padding: 0!important; border: 0!important; border-radius: 3px!important; background: var(--db-raised)!important; box-shadow: none!important; overflow: hidden!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean .dashboard-smart-progress-fill { display: block!important; height: 100%!important; width: var(--progress-level)!important; border-radius: inherit!important; background: var(--db-info)!important; box-shadow: none!important; animation: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean .dashboard-smart-progress.is-complete .dashboard-smart-progress-fill { background: var(--db-good)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean .dashboard-smart-progress.is-warning .dashboard-smart-progress-fill { background: var(--db-watch)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean .dashboard-smart-progress.is-critical .dashboard-smart-progress-fill { background: var(--db-risk)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean :is(.dashboard-smart-progress-tip, .dashboard-smart-progress-fill)::after, html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean .dashboard-smart-progress-tip { display: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent .dashboard-history-button { position: absolute!important; top: 12px!important; right: 12px!important; display: inline-flex!important; align-items: center!important; justify-content: center!important; width: 28px!important; height: 28px!important; min-height: 28px!important; margin: 0!important; padding: 0!important; border: 0!important; border-radius: 6px!important; background: var(--db-soft)!important; color: var(--db-muted)!important; -webkit-text-fill-color: currentColor!important; box-shadow: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean #bannerCarousel { width: 100%!important; margin: 0 0 20px!important; border: 1px solid var(--db-line)!important; border-radius: 10px!important; box-shadow: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean #bannerCarousel :is(.carousel-inner, .carousel-item, .banner-image) { height: 200px!important; min-height: 0!important; max-height: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean #bannerCarousel .banner-image { object-fit: cover!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean #bannerCarousel .carousel-caption { right: auto!important; left: 54px!important; bottom: 24px!important; max-width: calc(100% - 108px)!important; padding: 10px 14px!important; border: 0!important; border-radius: 8px!important; background: rgba(23,23,23,.84)!important; text-align: left!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean #bannerCarousel .carousel-caption :is(h2, p) { margin: 0!important; color: #ffffff!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean #bannerCarousel .carousel-caption p { margin-top: 4px!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean #bannerCarousel :is(.carousel-control-prev, .carousel-control-next) { width: 44px!important; border: 0!important; background: transparent!important; opacity: 1!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean #bannerCarousel :is(.carousel-control-prev-icon, .carousel-control-next-icon) { width: 24px!important; height: 24px!important; border-radius: 4px!important; background-color: rgba(23,23,23,.8)!important; background-size: 16px!important; filter: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean #bannerCarousel .carousel-indicators { margin-bottom: 8px!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean .dashboard-active-target { margin: 0 0 14px!important; padding: 16px 18px!important; border: 1px solid var(--db-line)!important; border-radius: 10px!important; background: var(--db-surface)!important; box-shadow: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean .dashboard-active-target-header { display: flex!important; flex-wrap: wrap!important; align-items: center!important; justify-content: space-between!important; gap: 14px!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean .dashboard-active-target-heading, html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean .dashboard-active-target-actions { display: flex!important; flex-wrap: wrap!important; align-items: center!important; gap: 12px!important; min-width: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean .dashboard-active-target-icon { display: inline-flex!important; align-items: center!important; justify-content: center!important; width: 32px!important; height: 32px!important; border: 0!important; border-radius: 6px!important; background: var(--db-soft)!important; color: var(--db-copy)!important; box-shadow: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean .dashboard-active-target-heading h2 { margin: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean .dashboard-active-target-kicker { margin: 0 0 2px!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean .dashboard-active-target-status { padding: 0!important; border: 0!important; background: transparent!important; color: var(--db-muted)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean .dashboard-active-target-grid { grid-template-columns: repeat(5, minmax(0, 1fr))!important; gap: 12px!important; margin: 16px 0 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean .dashboard-active-target-item { min-width: 0!important; padding: 14px!important; border: 1px solid var(--db-line)!important; border-radius: 8px!important; background: var(--db-soft)!important; color: var(--db-copy)!important; box-shadow: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean .dashboard-active-target-item :is(span, small, i) { color: var(--db-muted)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean .dashboard-active-target-item strong { color: var(--db-heading)!important; -webkit-text-fill-color: currentColor!important; overflow-wrap: anywhere!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean .dashboard-active-target-empty { border: 0!important; background: var(--db-soft)!important; color: var(--db-copy)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean .dashboard-running-text { min-height: 36px!important; margin: 0 0 24px!important; border: 1px solid var(--db-line)!important; border-radius: 6px!important; background: var(--db-soft)!important; box-shadow: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean .dashboard-running-label { border: 0!important; background: var(--db-raised)!important; color: var(--db-copy)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean .dashboard-running-group span { color: var(--db-muted)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean .dashboard-section { margin: 0!important; padding: 0!important; border: 0!important; background: transparent!important; box-shadow: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean .dashboard-metrics-section { margin-bottom: 26px!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean .section-title { display: flex!important; align-items: center!important; gap: 8px!important; margin: 0 0 14px!important; padding: 0!important; border: 0!important; background: transparent!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean .section-title i { color: var(--db-muted)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent :is(.dashboard-info-card, .dashboard-active-target-item) { overflow-wrap: anywhere!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean .dashboard-control-grid { display: grid!important; grid-template-columns: minmax(0, 1fr) 320px!important; grid-template-areas: "daily daily" "flow quick" "flow monitor"!important; gap: 20px!important; align-items: stretch!important; margin: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean .dashboard-daily-section { grid-area: daily!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean .dashboard-daily-section .card-body { min-height: 184px!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean .dashboard-daily-section :is(small, .text-dark, .card-body > div) { color: var(--db-copy)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean .dashboard-daily-section h1 { margin: 12px 0 8px!important; color: var(--db-heading)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean .dashboard-daily-section h1 span { color: var(--db-muted)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean .dashboard-daily-section hr { margin: 14px 0!important; border-color: var(--db-line)!important; opacity: 1!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean :is(.operations-status-layout, .operations-status-side) { display: contents!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean .dashboard-quick-section { grid-area: quick!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean .dashboard-quick-section > .row { display: grid!important; grid-template-columns: minmax(0, 1fr)!important; gap: 10px!important; margin: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean .dashboard-quick-section > .row > [class*="col-"] { width: auto!important; min-width: 0!important; margin: 0!important; padding: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean .dashboard-quick-section :is(a, button) { display: flex!important; align-items: center!important; justify-content: flex-start!important; gap: 10px!important; width: 100%!important; min-height: 42px!important; margin: 0!important; padding: 10px 12px!important; border: 1px solid var(--db-line)!important; border-radius: 7px!important; background: var(--db-surface)!important; color: var(--db-text)!important; -webkit-text-fill-color: currentColor!important; box-shadow: none!important; transform: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean .dashboard-quick-section i { color: var(--db-muted)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean .dashboard-quick-section .quick-menu-modern { display: flex!important; align-items: center!important; gap: 10px!important; min-height: 0!important; margin: 0!important; padding: 0!important; border: 0!important; border-radius: 0!important; background: transparent!important; color: inherit!important; box-shadow: none!important; transform: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean .dashboard-quick-section .quick-menu-modern span { color: inherit!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean .monitoring-center { grid-area: monitor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean .monitoring-popup-launcher { display: grid!important; gap: 10px!important; padding: 0!important; border: 0!important; background: transparent!important; box-shadow: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean .monitoring-launcher-heading { display: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean .monitoring-launcher-button { display: flex!important; align-items: center!important; gap: 10px!important; min-width: 0!important; width: 100%!important; margin: 0!important; padding: 12px!important; border: 1px solid var(--db-line)!important; border-radius: 7px!important; background: var(--db-surface)!important; color: var(--db-text)!important; box-shadow: none!important; transform: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean .monitoring-launcher-button > span:nth-child(2) { flex: 1!important; min-width: 0!important; text-align: left!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean .monitoring-launcher-button strong { display: block!important; color: var(--db-text)!important; -webkit-text-fill-color: currentColor!important; overflow-wrap: anywhere!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean .monitoring-launcher-button small { display: block!important; margin: 3px 0 0!important; color: var(--db-muted)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean .monitoring-launcher-icon, html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean .monitoring-launcher-count { display: inline-flex!important; align-items: center!important; justify-content: center!important; flex: 0 0 28px!important; width: 28px!important; height: 28px!important; padding: 0!important; border: 0!important; border-radius: 6px!important; background: var(--db-soft)!important; color: var(--db-copy)!important; -webkit-text-fill-color: currentColor!important; box-shadow: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean .monitoring-launcher-icon i { color: inherit!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean .dashboard-flow-panel { grid-area: flow!important; display: flex!important; flex-direction: column!important; min-height: 0!important; height: auto!important; overflow: hidden!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean .dashboard-flow-header { display: flex!important; flex-wrap: wrap!important; align-items: flex-start!important; justify-content: space-between!important; gap: 14px!important; padding: 18px!important; border: 0!important; border-bottom: 1px solid var(--db-line)!important; background: var(--db-surface)!important; color: var(--db-heading)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean .dashboard-flow-heading { min-width: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean .dashboard-flow-heading h5 { display: flex!important; gap: 8px!important; margin: 0 0 4px!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean .dashboard-flow-heading small { color: var(--db-muted)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean .dashboard-flow-controls { display: flex!important; flex-wrap: wrap!important; justify-content: flex-end!important; gap: 8px!important; margin-left: auto!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean .dashboard-flow-filters { display: flex!important; flex-wrap: wrap!important; gap: 4px!important; padding: 3px!important; border: 1px solid var(--db-line)!important; border-radius: 7px!important; background: var(--db-soft)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean .dashboard-flow-filter { min-height: 30px!important; padding: 5px 8px!important; border: 0!important; border-radius: 4px!important; background: transparent!important; color: var(--db-copy)!important; -webkit-text-fill-color: currentColor!important; box-shadow: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean .dashboard-flow-filter.is-active { background: var(--db-primary)!important; color: var(--db-primary-ink)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean .dashboard-flow-filter :is(i, span) { color: inherit!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean .dashboard-flow-panel > .card-body { display: flex!important; flex: 1 1 auto!important; min-width: 0!important; min-height: 300px!important; padding: 18px!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean .flow-chart-stage { position: relative!important; flex: 1 1 auto!important; width: 100%!important; height: auto!important; min-height: 280px!important; max-height: none!important; margin: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean #flowChart { position: absolute!important; inset: 0!important; display: block!important; width: 100%!important; height: 100%!important; max-height: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardManagementLayer .dashboard-management-grid { display: grid!important; grid-template-columns: minmax(0, 1fr) 320px!important; gap: 20px!important; align-items: start!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardManagementLayer :is(.dashboard-management-main, .dashboard-management-side) { display: grid!important; grid-template-columns: minmax(0, 1fr)!important; gap: 20px!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardManagementLayer .dashboard-management-header h2, html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardExtensions .dashboard-extension-heading h2 { margin: 0 0 8px!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardManagementLayer .dashboard-management-panel, html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardExtensions .dashboard-extension-card { padding: 18px!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardManagementLayer .dashboard-panel-heading, html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardExtensions .dashboard-extension-card-head { display: flex!important; flex-wrap: wrap!important; align-items: flex-start!important; justify-content: space-between!important; gap: 12px!important; min-width: 0!important; margin: 0 0 16px!important; padding: 0!important; border: 0!important; background: transparent!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardManagementLayer .dashboard-panel-heading > div, html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardExtensions .dashboard-extension-card-head > div { flex: 1 1 200px!important; min-width: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardManagementLayer .dashboard-panel-heading :is(span, small), html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardExtensions .dashboard-extension-card-head p { color: var(--db-muted)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardManagementLayer .dashboard-panel-heading h3, html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardExtensions .dashboard-extension-card-head h3 { margin: 4px 0 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardExtensions .dashboard-extension-card-head p { margin: 8px 0 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardManagementLayer .dashboard-coverage-grid { display: grid!important; grid-template-columns: repeat(2, minmax(0, 1fr))!important; gap: 12px!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardManagementLayer .dashboard-coverage-item { display: flex!important; align-items: flex-start!important; gap: 12px!important; min-width: 0!important; padding: 14px!important; border: 1px solid var(--db-line)!important; border-radius: 7px!important; background: var(--db-soft)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardManagementLayer .dashboard-coverage-item > div { min-width: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardManagementLayer :is(.dashboard-coverage-icon, .dashboard-user-avatar, .dashboard-attention-item > span) { display: inline-flex!important; align-items: center!important; justify-content: center!important; flex: 0 0 28px!important; width: 28px!important; height: 28px!important; margin: 0!important; padding: 0!important; border: 0!important; border-radius: 6px!important; background: var(--db-raised)!important; color: var(--db-copy)!important; box-shadow: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardManagementLayer .dashboard-coverage-icon i, html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardManagementLayer .dashboard-attention-item > span i { color: inherit!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardManagementLayer .dashboard-coverage-item :is(span, small), html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardManagementLayer :is(.dashboard-readiness-note, .dashboard-attention-item small) { color: var(--db-muted)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardManagementLayer .dashboard-coverage-item :is(strong, small) { display: block!important; margin: 4px 0 0!important; overflow-wrap: anywhere!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardManagementLayer .dashboard-coverage-item strong { color: var(--db-heading)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardManagementLayer .dashboard-management-table-wrap, html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardExtensions .dashboard-activity-recap-table-wrap { min-width: 0!important; width: 100%!important; margin: 0!important; border: 1px solid var(--db-line)!important; border-radius: 7px!important; overflow: auto!important; background: var(--db-surface)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardManagementLayer .dashboard-management-table, html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardExtensions .dashboard-activity-recap-table { width: 100%!important; margin: 0!important; border-collapse: collapse!important; background: transparent!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardManagementLayer .dashboard-management-table { min-width: 600px!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardExtensions .dashboard-activity-recap-table { min-width: 800px!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardManagementLayer .dashboard-management-table th, html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardExtensions .dashboard-activity-recap-table th { padding: 12px!important; border: 0!important; border-bottom: 1px solid var(--db-line)!important; background: var(--db-soft)!important; color: var(--db-copy)!important; -webkit-text-fill-color: currentColor!important; text-align: left!important; white-space: nowrap!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardManagementLayer .dashboard-management-table td, html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardExtensions .dashboard-activity-recap-table td { padding: 12px!important; border: 0!important; border-bottom: 1px solid var(--db-line)!important; background: var(--db-surface)!important; color: var(--db-copy)!important; -webkit-text-fill-color: currentColor!important; vertical-align: top!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardManagementLayer .dashboard-management-table td :is(strong, span), html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardExtensions .dashboard-activity-recap-table td :is(strong, p, time) { color: inherit!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardManagementLayer .dashboard-activity-status, html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardExtensions :is(.dashboard-activity-module, .dashboard-activity-category) { border: 1px solid var(--db-line)!important; background: var(--db-soft)!important; color: var(--db-copy)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardManagementLayer .dashboard-attention-list { display: grid!important; gap: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardManagementLayer .dashboard-attention-item { display: flex!important; gap: 10px!important; margin: 0!important; padding: 12px 0!important; border: 0!important; border-bottom: 1px solid var(--db-line)!important; border-radius: 0!important; background: transparent!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardManagementLayer .dashboard-attention-item:last-child { border-bottom: 0!important; padding-bottom: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardManagementLayer .dashboard-attention-item > div { min-width: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardManagementLayer .dashboard-attention-item strong { color: var(--db-text)!important; -webkit-text-fill-color: currentColor!important; overflow-wrap: anywhere!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardManagementLayer .dashboard-attention-item small { display: block!important; margin-top: 4px!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardManagementLayer .dashboard-attention-clear { border: 0!important; background: var(--db-soft)!important; color: var(--db-copy)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardManagementLayer .dashboard-attention-clear :is(i, strong, span) { color: var(--db-copy)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardManagementLayer .dashboard-readiness-list { display: grid!important; gap: 16px!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardManagementLayer .dashboard-readiness-item { padding: 0!important; border: 0!important; background: transparent!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardManagementLayer .dashboard-readiness-item > div:first-child { color: var(--db-copy)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardManagementLayer .dashboard-readiness-item :is(span, strong) { color: var(--db-copy)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardManagementLayer .dashboard-readiness-track { height: 4px!important; margin: 7px 0 0!important; border: 0!important; border-radius: 3px!important; background: var(--db-raised)!important; box-shadow: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardManagementLayer .dashboard-readiness-track > span { background: var(--db-good)!important; box-shadow: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardManagementLayer .dashboard-readiness-note { margin: 16px 0 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardExtensions .dashboard-extension-grid { display: grid!important; gap: 20px!important; margin: 0 0 20px!important; align-items: stretch!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardExtensions .dashboard-extension-grid-primary { grid-template-columns: repeat(2, minmax(0, 1fr))!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardExtensions .dashboard-extension-grid-secondary { grid-template-columns: minmax(0, 1fr)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardExtensions .dashboard-petak-card { display: flex!important; flex-direction: column!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardExtensions .dashboard-mini-map { flex: 1 1 auto!important; width: 100%!important; height: 320px!important; min-height: 300px!important; border: 1px solid var(--db-line)!important; border-radius: 7px!important; background: var(--db-soft)!important; box-shadow: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardExtensions .dashboard-mini-map svg { display: block!important; width: 100%!important; height: 100%!important; min-height: 300px!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardExtensions :is(.dashboard-extension-footnote, .dashboard-location-guidance, .dashboard-activity-filter-status, .dashboard-activity-recap-note) { color: var(--db-muted)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardExtensions .dashboard-map-legend { flex-wrap: wrap!important; gap: 12px!important; padding: 12px 0 0!important; color: var(--db-copy)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardExtensions .dashboard-map-legend span { color: var(--db-copy)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardExtensions .dashboard-region-grid { display: grid!important; grid-template-columns: repeat(2, minmax(0, 1fr))!important; gap: 12px!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardExtensions .dashboard-region-grid > div { min-width: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardExtensions :is(label, .dashboard-location-title) { color: var(--db-copy)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardExtensions :is(.dashboard-weather-location-picker, .dashboard-weather-current, .dashboard-weather-metrics, .dashboard-weather-status, .dashboard-risk-panel, .dashboard-empty-state, .dashboard-activity-recap-empty) { border-color: var(--db-line)!important; background: var(--db-soft)!important; background-image: none!important; color: var(--db-copy)!important; box-shadow: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardExtensions :is(.dashboard-weather-status, .dashboard-empty-state, .dashboard-activity-recap-empty) :is(i, strong, span), html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardExtensions :is(.dashboard-weather-current, .dashboard-weather-metrics, .dashboard-risk-panel) :is(strong, span, p, b, i) { color: inherit!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardExtensions .dashboard-weather-symbol { border: 0!important; background: var(--db-raised)!important; color: var(--db-copy)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardExtensions .dashboard-risk-badge { border: 1px solid var(--db-line)!important; background: var(--db-surface)!important; color: var(--db-copy)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardExtensions .dashboard-risk-badge.is-good { color: var(--db-good)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardExtensions .dashboard-risk-badge.is-watch { color: var(--db-watch)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardExtensions .dashboard-risk-badge.is-danger { color: var(--db-risk)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardExtensions .dashboard-document-list { display: grid!important; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr))!important; gap: 12px!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardExtensions .dashboard-document-list > .dashboard-empty-state { grid-column: 1 / -1!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardExtensions :is(.dashboard-document-item, .dashboard-document-card) { min-width: 0!important; padding: 14px!important; border: 1px solid var(--db-line)!important; border-radius: 7px!important; background: var(--db-soft)!important; color: var(--db-copy)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardExtensions :is(.dashboard-document-item, .dashboard-document-card) :is(strong, h4, span, small, p) { color: inherit!important; -webkit-text-fill-color: currentColor!important; overflow-wrap: anywhere!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardExtensions .dashboard-document-meta span { padding: 3px 6px!important; border: 0!important; border-radius: 4px!important; background: var(--db-raised)!important; color: var(--db-copy)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardExtensions .dashboard-document-icon { display: inline-flex!important; align-items: center!important; justify-content: center!important; flex: 0 0 30px!important; width: 30px!important; height: 30px!important; border: 0!important; border-radius: 6px!important; background: var(--db-raised)!important; color: var(--db-copy)!important; box-shadow: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardExtensions .dashboard-document-icon i { color: inherit!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardExtensions .dashboard-document-actions :is(a, button) { display: inline-flex!important; align-items: center!important; justify-content: center!important; width: 30px!important; height: 30px!important; padding: 0!important; border: 1px solid var(--db-line)!important; border-radius: 6px!important; background: var(--db-surface)!important; color: var(--db-copy)!important; box-shadow: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardExtensions .dashboard-document-actions .dashboard-document-delete { color: var(--db-risk)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardExtensions .dashboard-document-actions i { color: inherit!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardExtensions .dashboard-activity-recap-summary { display: flex!important; flex-wrap: wrap!important; gap: 10px!important; margin-bottom: 14px!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardExtensions .dashboard-activity-recap-summary > span { padding: 6px 9px!important; border: 1px solid var(--db-line)!important; border-radius: 6px!important; background: var(--db-soft)!important; color: var(--db-copy)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardExtensions .dashboard-activity-recap-summary :is(i, strong) { color: inherit!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardExtensions .dashboard-activity-filter { display: flex!important; flex-wrap: wrap!important; gap: 6px!important; padding: 0!important; margin: 0 0 12px!important; border: 0!important; background: transparent!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardExtensions .dashboard-activity-filter-button { display: inline-flex!important; align-items: center!important; gap: 7px!important; min-height: 34px!important; padding: 6px 10px!important; border: 1px solid var(--db-line)!important; border-radius: 6px!important; background: var(--db-surface)!important; color: var(--db-copy)!important; -webkit-text-fill-color: currentColor!important; box-shadow: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardExtensions .dashboard-activity-filter-button.is-active { background: var(--db-raised)!important; color: var(--db-heading)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardExtensions .dashboard-activity-filter-button :is(i, span, b) { background: transparent!important; color: inherit!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardExtensions .dashboard-activity-recap-table tbody tr.has-attention td { background: var(--db-soft)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardExtensions .dashboard-activity-recap-table td:last-child { min-width: 260px!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardExtensions .dashboard-activity-recap-table td p { margin: 6px 0 0!important; overflow-wrap: anywhere!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent :is(.dashboard-active-target-toggle, .dashboard-icon-button, .dashboard-extension-link, .dashboard-secondary-button), html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard :is(#dashboardInfoModal,#exportPdfModal,#smartAnalyticModal,#warningMonitoringModal,#liveActivityModal,#dashboardDocumentModal,#dashboardWeatherLocationModal) :is(.btn-secondary, .btn-outline-secondary) { display: inline-flex!important; align-items: center!important; justify-content: center!important; gap: 7px!important; min-height: 34px!important; padding: 7px 10px!important; border: 1px solid var(--db-line)!important; border-radius: 6px!important; background: var(--db-surface)!important; color: var(--db-text)!important; -webkit-text-fill-color: currentColor!important; box-shadow: none!important; transform: none!important; text-decoration: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent .dashboard-primary-button, html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard :is(#dashboardInfoModal,#exportPdfModal,#smartAnalyticModal,#warningMonitoringModal,#liveActivityModal,#dashboardDocumentModal,#dashboardWeatherLocationModal) :is(.btn-primary, .btn-success, .dashboard-primary-button) { display: inline-flex!important; align-items: center!important; justify-content: center!important; gap: 7px!important; min-height: 34px!important; padding: 7px 12px!important; border: 1px solid var(--db-primary)!important; border-radius: 6px!important; background: var(--db-primary)!important; color: var(--db-primary-ink)!important; -webkit-text-fill-color: currentColor!important; box-shadow: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent :is(button, a):focus-visible, html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard :is(#dashboardInfoModal,#exportPdfModal,#smartAnalyticModal,#warningMonitoringModal,#liveActivityModal,#dashboardDocumentModal,#dashboardWeatherLocationModal) :is(button, a):focus-visible, html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard #dashboardHistoryPopover button:focus-visible { outline: 2px solid var(--db-focus)!important; outline-offset: 3px!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent :is(.dashboard-quick-section a, .monitoring-launcher-button, .dashboard-history-button, .dashboard-active-target-toggle, .dashboard-extension-link, .dashboard-icon-button):hover { background-color: var(--db-raised)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent :is(input, select, textarea), html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard :is(#dashboardInfoModal,#exportPdfModal,#smartAnalyticModal,#warningMonitoringModal,#liveActivityModal,#dashboardDocumentModal,#dashboardWeatherLocationModal) :is(.form-control, .form-select) { box-sizing: border-box!important; min-width: 0!important; max-width: 100%!important; min-height: 36px!important; border: 1px solid var(--db-field-line)!important; border-radius: 6px!important; background-color: var(--db-surface)!important; color: var(--db-text)!important; -webkit-text-fill-color: currentColor!important; box-shadow: none!important; color-scheme: light!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard.dark #sppkPageContent :is(input, select, textarea), html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard.dark :is(#dashboardInfoModal,#exportPdfModal,#smartAnalyticModal,#warningMonitoringModal,#liveActivityModal,#dashboardDocumentModal,#dashboardWeatherLocationModal) :is(.form-control, .form-select) { color-scheme: dark!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent :is(input, select, textarea):focus, html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard :is(#dashboardInfoModal,#exportPdfModal,#smartAnalyticModal,#warningMonitoringModal,#liveActivityModal,#dashboardDocumentModal,#dashboardWeatherLocationModal) :is(.form-control, .form-select):focus { outline: 2px solid var(--db-focus)!important; outline-offset: 1px!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent [hidden] { display: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard #dashboardHistoryPopover { padding: 16px!important; border: 1px solid var(--db-line)!important; border-radius: 10px!important; background: var(--db-surface)!important; color: var(--db-copy)!important; box-shadow: 0 8px 24px rgba(0,0,0,.15)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard #dashboardHistoryPopover[hidden] { display: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard #dashboardHistoryPopover :is(strong, small, span, p, i, #dashboardHistoryChange) { color: var(--db-copy)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard #dashboardHistoryPopover .dashboard-history-comparison { padding: 12px!important; border: 1px solid var(--db-line)!important; border-radius: 7px!important; background: var(--db-soft)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard #dashboardHistoryPopover :is(.dashboard-history-icon, .dashboard-history-close) { border: 0!important; background: var(--db-soft)!important; color: var(--db-copy)!important; box-shadow: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard :is(#dashboardInfoModal,#exportPdfModal,#smartAnalyticModal,#warningMonitoringModal,#liveActivityModal,#dashboardDocumentModal,#dashboardWeatherLocationModal) .modal-content { border: 1px solid var(--db-line)!important; border-radius: 12px!important; background: var(--db-surface)!important; color: var(--db-copy)!important; box-shadow: 0 12px 40px rgba(0,0,0,.2)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard :is(#dashboardInfoModal,#exportPdfModal,#smartAnalyticModal,#warningMonitoringModal,#liveActivityModal,#dashboardDocumentModal,#dashboardWeatherLocationModal) :is(.modal-header, .modal-body, .modal-footer) { padding: 20px!important; border-color: var(--db-line)!important; background: var(--db-surface)!important; color: var(--db-copy)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard :is(#dashboardInfoModal,#exportPdfModal,#smartAnalyticModal,#warningMonitoringModal,#liveActivityModal,#dashboardDocumentModal,#dashboardWeatherLocationModal) .modal-header { align-items: flex-start!important; gap: 16px!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard :is(#dashboardInfoModal,#exportPdfModal,#smartAnalyticModal,#warningMonitoringModal,#liveActivityModal,#dashboardDocumentModal,#dashboardWeatherLocationModal) .modal-title { margin: 0!important; color: var(--db-heading)!important; -webkit-text-fill-color: currentColor!important; overflow-wrap: anywhere!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard :is(#dashboardInfoModal,#exportPdfModal,#smartAnalyticModal,#warningMonitoringModal,#liveActivityModal,#dashboardDocumentModal,#dashboardWeatherLocationModal) :is(.modal-kicker, .dashboard-definition-kicker, .dashboard-definition-subtitle, .form-text) { color: var(--db-muted)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard :is(#dashboardInfoModal,#exportPdfModal,#smartAnalyticModal,#warningMonitoringModal,#liveActivityModal,#dashboardDocumentModal,#dashboardWeatherLocationModal) :is(.dashboard-definition-heading-icon, .dashboard-definition-item-icon, .analytic-icon) { border: 0!important; background: var(--db-soft)!important; color: var(--db-copy)!important; -webkit-text-fill-color: currentColor!important; box-shadow: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard :is(#dashboardInfoModal,#exportPdfModal,#smartAnalyticModal,#warningMonitoringModal,#liveActivityModal,#dashboardDocumentModal,#dashboardWeatherLocationModal) :is(.dashboard-definition-item, .dashboard-definition-note, .monitor-modal-state, .monitor-warning-item, .monitor-activity-item, .export-pdf-intro, .export-pdf-section, .dashboard-export-info) { border-color: var(--db-line)!important; background: var(--db-soft)!important; color: var(--db-copy)!important; box-shadow: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard :is(#dashboardInfoModal,#exportPdfModal,#smartAnalyticModal,#warningMonitoringModal,#liveActivityModal,#dashboardDocumentModal,#dashboardWeatherLocationModal) :is(.dashboard-definition-item, .monitor-modal-state, .monitor-warning-item, .monitor-activity-item) :is(h5, h6, p, strong, small, span) { color: var(--db-copy)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard :is(#dashboardInfoModal,#exportPdfModal,#smartAnalyticModal,#warningMonitoringModal,#liveActivityModal,#dashboardDocumentModal,#dashboardWeatherLocationModal) .dashboard-definition-formula { border-color: var(--db-line)!important; background: var(--db-raised)!important; color: var(--db-text)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard :is(#dashboardInfoModal,#exportPdfModal,#smartAnalyticModal,#warningMonitoringModal,#liveActivityModal,#dashboardDocumentModal,#dashboardWeatherLocationModal) :is(label, .form-label) { color: var(--db-copy)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard :is(#dashboardInfoModal,#exportPdfModal,#smartAnalyticModal,#warningMonitoringModal,#liveActivityModal,#dashboardDocumentModal,#dashboardWeatherLocationModal) .dashboard-definition-note :is(i, span) { color: var(--db-copy)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard :is(#dashboardInfoModal,#exportPdfModal,#smartAnalyticModal,#warningMonitoringModal,#liveActivityModal,#dashboardDocumentModal,#dashboardWeatherLocationModal) .badge { border: 1px solid var(--db-line)!important; background: var(--db-soft)!important; color: var(--db-copy)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard :is(#dashboardInfoModal,#exportPdfModal,#smartAnalyticModal,#warningMonitoringModal,#liveActivityModal,#dashboardDocumentModal,#dashboardWeatherLocationModal) :is(.export-confirm-summary, .export-confirm-warning, .export-confirm-recommendation) { padding: 14px!important; border: 1px solid var(--db-line)!important; border-radius: 8px!important; background: var(--db-soft)!important; color: var(--db-copy)!important; box-shadow: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard :is(#dashboardInfoModal,#exportPdfModal,#smartAnalyticModal,#warningMonitoringModal,#liveActivityModal,#dashboardDocumentModal,#dashboardWeatherLocationModal) :is(.export-confirm-header, .export-confirm-summary, .export-confirm-warning, .export-confirm-recommendation, .export-confirm-footer) :is(h6, p, li, span, i) { color: var(--db-copy)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard :is(#dashboardInfoModal,#exportPdfModal,#smartAnalyticModal,#warningMonitoringModal,#liveActivityModal,#dashboardDocumentModal,#dashboardWeatherLocationModal) :is(.export-confirm-symbol, .export-confirm-summary-icon) { border: 0!important; background: var(--db-raised)!important; color: var(--db-copy)!important; box-shadow: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard :is(#dashboardInfoModal,#exportPdfModal,#smartAnalyticModal,#warningMonitoringModal,#liveActivityModal,#dashboardDocumentModal,#dashboardWeatherLocationModal) .export-confirm-cancel { border: 1px solid var(--db-line)!important; border-radius: 6px!important; background: var(--db-surface)!important; color: var(--db-text)!important; -webkit-text-fill-color: currentColor!important; box-shadow: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard :is(#dashboardInfoModal,#exportPdfModal,#smartAnalyticModal,#warningMonitoringModal,#liveActivityModal,#dashboardDocumentModal,#dashboardWeatherLocationModal) .export-confirm-submit { border: 1px solid var(--db-primary)!important; border-radius: 6px!important; background: var(--db-primary)!important; color: var(--db-primary-ink)!important; -webkit-text-fill-color: currentColor!important; box-shadow: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard :is(#dashboardInfoModal,#exportPdfModal,#smartAnalyticModal,#warningMonitoringModal,#liveActivityModal,#dashboardDocumentModal,#dashboardWeatherLocationModal) :is(.export-confirm-cancel, .export-confirm-submit) i { color: inherit!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard :is(#dashboardInfoModal,#exportPdfModal,#smartAnalyticModal,#warningMonitoringModal,#liveActivityModal,#dashboardDocumentModal,#dashboardWeatherLocationModal) .btn-close { flex: 0 0 32px!important; width: 32px!important; height: 32px!important; min-height: 32px!important; margin: 0 0 0 auto!important; padding: 8px!important; border: 0!important; border-radius: 6px!important; background-color: transparent!important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='m4 4 8 8m0-8-8 8' stroke='%23686868' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E")!important; background-position: center!important; background-repeat: no-repeat!important; background-size: 18px 18px!important; opacity: 1!important; filter: none!important; box-shadow: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard.dark :is(#dashboardInfoModal,#exportPdfModal,#smartAnalyticModal,#warningMonitoringModal,#liveActivityModal,#dashboardDocumentModal,#dashboardWeatherLocationModal) .btn-close { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='m4 4 8 8m0-8-8 8' stroke='%23afafaf' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E")!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard :is(#dashboardInfoModal,#exportPdfModal,#smartAnalyticModal,#warningMonitoringModal,#liveActivityModal,#dashboardDocumentModal,#dashboardWeatherLocationModal) .btn-close:is(:hover, :focus-visible) { background-color: var(--db-soft)!important; }
@media (max-width: 1199.98px) {
 html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean :is(.dashboard-kpi-grid, .dashboard-metrics-section > .row, .dashboard-daily-section > .row) { grid-template-columns: repeat(2, minmax(0, 1fr))!important; }
 html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean .dashboard-control-grid { grid-template-columns: minmax(0, 1fr)!important; grid-template-areas: "daily" "flow" "quick" "monitor"!important; }
 html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean .dashboard-quick-section > .row, html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean .monitoring-popup-launcher { grid-template-columns: repeat(3, minmax(0, 1fr))!important; }
 html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean .dashboard-flow-panel > .card-body { min-height: 320px!important; }
 html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardManagementLayer .dashboard-management-grid { grid-template-columns: minmax(0, 1fr)!important; }
 html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardManagementLayer .dashboard-management-side { grid-template-columns: repeat(2, minmax(0, 1fr))!important; }
 html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean .dashboard-active-target-grid { grid-template-columns: repeat(3, minmax(0, 1fr))!important; }
}
@media (max-width: 899.98px) { html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardExtensions .dashboard-extension-grid-primary { grid-template-columns: minmax(0, 1fr)!important; } }
@media (max-width: 767.98px) {
 html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean .dashboard-command-header, html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardManagementLayer .dashboard-management-header, html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardExtensions .dashboard-extension-heading { flex-direction: column!important; gap: 14px!important; }
 html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean .dashboard-quick-section > .row, html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean .monitoring-popup-launcher, html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardManagementLayer .dashboard-management-side { grid-template-columns: minmax(0, 1fr)!important; }
 html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean .dashboard-flow-header, html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardManagementLayer .dashboard-management-panel, html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardExtensions .dashboard-extension-card { padding: 16px!important; }
 html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean .dashboard-flow-controls { justify-content: flex-start!important; width: 100%!important; margin: 0!important; }
 html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean .dashboard-flow-panel > .card-body { padding: 14px!important; min-height: 280px!important; }
 html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean .flow-chart-stage { min-height: 250px!important; }
 html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean #bannerCarousel :is(.carousel-inner, .carousel-item, .banner-image) { height: 170px!important; }
 html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean #bannerCarousel .carousel-caption { left: 40px!important; bottom: 22px!important; max-width: calc(100% - 80px)!important; padding: 8px 10px!important; }
 html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean #bannerCarousel :is(.carousel-control-prev, .carousel-control-next) { width: 34px!important; }
 html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean .dashboard-active-target-grid { grid-template-columns: repeat(2, minmax(0, 1fr))!important; }
 html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard :is(#dashboardInfoModal,#exportPdfModal,#smartAnalyticModal,#warningMonitoringModal,#liveActivityModal,#dashboardDocumentModal,#dashboardWeatherLocationModal) :is(.modal-header, .modal-body, .modal-footer) { padding: 16px!important; }
}
@media (max-width: 599.98px) {
 html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean :is(.dashboard-kpi-grid, .dashboard-metrics-section > .row, .dashboard-daily-section > .row), html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardManagementLayer .dashboard-coverage-grid { grid-template-columns: minmax(0, 1fr)!important; gap: 12px!important; }
 html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean :is(.kpi-card, .dashboard-card .card-body, .dashboard-daily-section .card-body) { min-height: 0!important; }
 html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean .dashboard-active-target-actions { justify-content: space-between!important; width: 100%!important; }
 html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardExtensions .dashboard-region-grid { grid-template-columns: minmax(0, 1fr)!important; }
}
}
@layer sppk-typography {
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean, html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardManagementLayer, html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardExtensions, html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard :is(#dashboardInfoModal,#exportPdfModal,#smartAnalyticModal,#warningMonitoringModal,#liveActivityModal,#dashboardDocumentModal,#dashboardWeatherLocationModal), html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard #dashboardHistoryPopover { font-size: .875rem!important; line-height: 1.6!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean :is(#dashboardControlTitle, .kpi-card > h2, .dashboard-card h2, .dashboard-daily-section h1) { font-size: 1.5rem!important; line-height: 1.3!important; font-weight: 600!important; letter-spacing: normal!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean :is(.section-title, .dashboard-flow-heading h5, .dashboard-active-target-heading h2), html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardManagementLayer :is(h2, h3), html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardExtensions :is(h2, h3) { font-size: 1rem!important; line-height: 1.4!important; font-weight: 500!important; letter-spacing: normal!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean :is(.dashboard-command-eyebrow, .dashboard-command-live, .kpi-card > small, .kpi-card > span, .dashboard-card h6, .dashboard-card small, .dashboard-smart-progress-meta, .dashboard-active-target-kicker, .dashboard-active-target-status, .dashboard-running-text, .dashboard-daily-section small, .dashboard-flow-filter, .dashboard-flow-heading small, .monitoring-launcher-button small, .monitoring-launcher-count), html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardManagementLayer :is(.dashboard-management-eyebrow, .dashboard-management-source, .dashboard-panel-heading span, .dashboard-panel-heading small, .dashboard-coverage-item span, .dashboard-coverage-item small, .dashboard-attention-item small, .dashboard-readiness-note, .dashboard-management-table), html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardExtensions :is(.dashboard-extension-eyebrow, .dashboard-extension-safe, .dashboard-extension-kicker, .dashboard-extension-card-head p, .dashboard-extension-footnote, .dashboard-location-guidance, .dashboard-activity-filter-status, .dashboard-activity-recap-note, .dashboard-activity-recap-summary, .dashboard-activity-filter-button, .dashboard-map-legend), html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard #dashboardHistoryPopover :is(small, p, .dashboard-history-change) { font-size: .75rem!important; line-height: 1.5!important; font-weight: 400!important; letter-spacing: normal!important; text-transform: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean .dashboard-card h6 { font-weight: 500!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean .dashboard-daily-section h1 span { font-size: .875rem!important; line-height: 1.4!important; font-weight: 400!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean .monitoring-launcher-button strong, html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardManagementLayer .dashboard-attention-item strong { font-size: .875rem!important; line-height: 1.4!important; font-weight: 500!important; letter-spacing: normal!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean #bannerCarousel .carousel-caption h2 { font-size: 1rem!important; line-height: 1.4!important; font-weight: 500!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean #bannerCarousel .carousel-caption p { font-size: .75rem!important; line-height: 1.5!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardWorkspace.sppk-dashboard-clean :is(.control-kpi-icon i, .monitoring-launcher-icon i), html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardManagementLayer .dashboard-coverage-icon i { font-size: 1rem!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent #dashboardManagementLayer .dashboard-coverage-item strong { font-size: 1.25rem!important; line-height: 1.3!important; font-weight: 600!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard :is(#dashboardInfoModal,#exportPdfModal,#smartAnalyticModal,#warningMonitoringModal,#liveActivityModal,#dashboardDocumentModal,#dashboardWeatherLocationModal) .modal-title { font-size: 1.125rem!important; line-height: 1.4!important; font-weight: 500!important; letter-spacing: normal!important; }
}

/* SPPK V64 — Panduan Dashboard. Semua aturan dibatasi halaman panduan
   dan satu tautan masuk panduan pada dashboard. Tidak mengunci scroll. */
@layer sppk-dashboard-guide-layout {
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard-info { --dg-surface: #ffffff; --dg-soft: #f7f9fa; --dg-hover: #edf0f2; --dg-line: #dfe4e8; --dg-heading: #333333; --dg-text: #414141; --dg-copy: #505050; --dg-muted: #686868; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard-info.dark { --dg-surface: #202020; --dg-soft: #252525; --dg-hover: #303030; --dg-line: #383838; --dg-heading: #f0f0f0; --dg-text: #e6e6e6; --dg-copy: #d0d0d0; --dg-muted: #afafaf; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard-info .page-shell.main-content #sppkPageContent #dashboardInfoPage.sppk-dashboard-guide { box-sizing: border-box!important; width: 100%!important; max-width: 1280px!important; min-width: 0!important; min-height: 0!important; margin: 0 auto 28px!important; padding: 0!important; border: 0!important; border-radius: 0!important; background: transparent!important; color: var(--dg-copy)!important; box-shadow: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard-info .page-shell.main-content #sppkPageContent #dashboardInfoPage.sppk-dashboard-guide::before, html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard-info .page-shell.main-content #sppkPageContent #dashboardInfoPage.sppk-dashboard-guide::after { display: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard-info .page-shell.main-content #sppkPageContent #dashboardInfoPage.sppk-dashboard-guide :is(.dashboard-guide-header, .dashboard-guide-layout, .dashboard-guide-content, .dashboard-guide-section, .dashboard-guide-feature, .dashboard-guide-feature > div) { min-width: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard-info .page-shell.main-content #sppkPageContent #dashboardInfoPage.sppk-dashboard-guide .dashboard-guide-header { display: flex!important; align-items: flex-start!important; justify-content: space-between!important; gap: 24px!important; margin: 0 0 28px!important; padding: 0 0 24px!important; border-bottom: 1px solid var(--dg-line)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard-info .page-shell.main-content #sppkPageContent #dashboardInfoPage.sppk-dashboard-guide .dashboard-guide-header > div { min-width: 0!important; max-width: 760px!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard-info .page-shell.main-content #sppkPageContent #dashboardInfoPage.sppk-dashboard-guide .dashboard-guide-eyebrow { display: inline-flex!important; align-items: center!important; gap: 7px!important; margin: 0 0 8px!important; color: var(--dg-muted)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard-info .page-shell.main-content #sppkPageContent #dashboardInfoPage.sppk-dashboard-guide h1 { margin: 0 0 10px!important; color: var(--dg-heading)!important; -webkit-text-fill-color: currentColor!important; overflow-wrap: anywhere!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard-info .page-shell.main-content #sppkPageContent #dashboardInfoPage.sppk-dashboard-guide :is(p, li, dd) { color: var(--dg-copy)!important; -webkit-text-fill-color: currentColor!important; overflow-wrap: anywhere!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard-info .page-shell.main-content #sppkPageContent #dashboardInfoPage.sppk-dashboard-guide p { margin: 0 0 14px!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard-info .page-shell.main-content #sppkPageContent #dashboardInfoPage.sppk-dashboard-guide .dashboard-guide-header p { margin: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard-info .page-shell.main-content #sppkPageContent #dashboardInfoPage.sppk-dashboard-guide strong { color: var(--dg-text)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard-info .page-shell.main-content #sppkPageContent #dashboardInfoPage.sppk-dashboard-guide .dashboard-guide-back { display: inline-flex!important; align-items: center!important; justify-content: center!important; flex: 0 0 auto!important; gap: 8px!important; min-height: 36px!important; margin: 2px 0 0!important; padding: 8px 12px!important; border: 1px solid var(--dg-line)!important; border-radius: 7px!important; background: var(--dg-surface)!important; color: var(--dg-text)!important; -webkit-text-fill-color: currentColor!important; text-decoration: none!important; box-shadow: none!important; transform: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard-info .page-shell.main-content #sppkPageContent #dashboardInfoPage.sppk-dashboard-guide .dashboard-guide-back:hover { background: var(--dg-hover)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard-info .page-shell.main-content #sppkPageContent #dashboardInfoPage.sppk-dashboard-guide .dashboard-guide-layout { display: grid!important; grid-template-columns: 196px minmax(0, 1fr)!important; align-items: start!important; gap: 28px!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard-info .page-shell.main-content #sppkPageContent #dashboardInfoPage.sppk-dashboard-guide .dashboard-guide-nav { position: sticky!important; top: 96px!important; display: grid!important; gap: 4px!important; min-width: 0!important; margin: 0!important; padding: 12px!important; border: 1px solid var(--dg-line)!important; border-radius: 8px!important; background: var(--dg-soft)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard-info .page-shell.main-content #sppkPageContent #dashboardInfoPage.sppk-dashboard-guide .dashboard-guide-nav > span { display: block!important; margin: 2px 8px 8px!important; color: var(--dg-muted)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard-info .page-shell.main-content #sppkPageContent #dashboardInfoPage.sppk-dashboard-guide .dashboard-guide-nav a { display: flex!important; align-items: center!important; min-width: 0!important; min-height: 34px!important; padding: 7px 8px!important; border: 0!important; border-radius: 5px!important; background: transparent!important; color: var(--dg-copy)!important; -webkit-text-fill-color: currentColor!important; text-decoration: none!important; overflow-wrap: anywhere!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard-info .page-shell.main-content #sppkPageContent #dashboardInfoPage.sppk-dashboard-guide .dashboard-guide-nav a:hover { background: var(--dg-hover)!important; color: var(--dg-heading)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard-info .page-shell.main-content #sppkPageContent #dashboardInfoPage.sppk-dashboard-guide .dashboard-guide-content { width: 100%!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard-info .page-shell.main-content #sppkPageContent #dashboardInfoPage.sppk-dashboard-guide .dashboard-guide-section { margin: 0 0 28px!important; padding: 0 0 28px!important; border: 0!important; border-bottom: 1px solid var(--dg-line)!important; border-radius: 0!important; background: transparent!important; box-shadow: none!important; scroll-margin-top: 112px!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard-info .page-shell.main-content #sppkPageContent #dashboardInfoPage.sppk-dashboard-guide .dashboard-guide-section:last-child { margin-bottom: 0!important; padding-bottom: 0!important; border-bottom: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard-info .page-shell.main-content #sppkPageContent #dashboardInfoPage.sppk-dashboard-guide .dashboard-guide-kicker { display: block!important; margin: 0 0 6px!important; color: var(--dg-muted)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard-info .page-shell.main-content #sppkPageContent #dashboardInfoPage.sppk-dashboard-guide h2 { margin: 0 0 14px!important; color: var(--dg-heading)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard-info .page-shell.main-content #sppkPageContent #dashboardInfoPage.sppk-dashboard-guide h3 { margin: 0 0 5px!important; color: var(--dg-text)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard-info .page-shell.main-content #sppkPageContent #dashboardInfoPage.sppk-dashboard-guide .dashboard-guide-muted { color: var(--dg-muted)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard-info .page-shell.main-content #sppkPageContent #dashboardInfoPage.sppk-dashboard-guide .dashboard-guide-note { display: flex!important; align-items: flex-start!important; gap: 10px!important; margin: 18px 0!important; padding: 14px 16px!important; border: 1px solid var(--dg-line)!important; border-radius: 8px!important; background: var(--dg-soft)!important; color: var(--dg-copy)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard-info .page-shell.main-content #sppkPageContent #dashboardInfoPage.sppk-dashboard-guide .dashboard-guide-note > i { flex: 0 0 18px!important; margin-top: 2px!important; color: var(--dg-muted)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard-info .page-shell.main-content #sppkPageContent #dashboardInfoPage.sppk-dashboard-guide .dashboard-guide-note p { margin: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard-info .page-shell.main-content #sppkPageContent #dashboardInfoPage.sppk-dashboard-guide .dashboard-guide-feature-list { display: grid!important; grid-template-columns: repeat(2, minmax(0, 1fr))!important; column-gap: 24px!important; row-gap: 0!important; margin: 8px 0 0!important; padding: 0!important; list-style: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard-info .page-shell.main-content #sppkPageContent #dashboardInfoPage.sppk-dashboard-guide .dashboard-guide-feature { display: flex!important; align-items: flex-start!important; gap: 12px!important; margin: 0!important; padding: 18px 0!important; border-bottom: 1px solid var(--dg-line)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard-info .page-shell.main-content #sppkPageContent #dashboardInfoPage.sppk-dashboard-guide .dashboard-guide-feature:last-child { border-bottom: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard-info .page-shell.main-content #sppkPageContent #dashboardInfoPage.sppk-dashboard-guide .dashboard-guide-feature p { margin: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard-info .page-shell.main-content #sppkPageContent #dashboardInfoPage.sppk-dashboard-guide .dashboard-guide-icon { display: inline-flex!important; align-items: center!important; justify-content: center!important; flex: 0 0 30px!important; width: 30px!important; height: 30px!important; padding: 0!important; border: 0!important; border-radius: 6px!important; background: var(--dg-soft)!important; color: var(--dg-copy)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard-info .page-shell.main-content #sppkPageContent #dashboardInfoPage.sppk-dashboard-guide i { color: inherit!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard-info .page-shell.main-content #sppkPageContent #dashboardInfoPage.sppk-dashboard-guide .dashboard-guide-flow { display: grid!important; grid-template-columns: repeat(4, minmax(0, 1fr))!important; gap: 10px!important; margin: 18px 0 14px!important; padding: 0!important; list-style: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard-info .page-shell.main-content #sppkPageContent #dashboardInfoPage.sppk-dashboard-guide .dashboard-guide-flow li { display: flex!important; align-items: flex-start!important; gap: 9px!important; min-width: 0!important; padding: 12px!important; border: 1px solid var(--dg-line)!important; border-radius: 7px!important; background: var(--dg-soft)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard-info .page-shell.main-content #sppkPageContent #dashboardInfoPage.sppk-dashboard-guide .dashboard-guide-flow li > span { display: inline-flex!important; align-items: center!important; justify-content: center!important; flex: 0 0 22px!important; width: 22px!important; height: 22px!important; border: 1px solid var(--dg-line)!important; border-radius: 50%!important; background: var(--dg-surface)!important; color: var(--dg-copy)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard-info .page-shell.main-content #sppkPageContent #dashboardInfoPage.sppk-dashboard-guide .dashboard-guide-flow li > div { min-width: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard-info .page-shell.main-content #sppkPageContent #dashboardInfoPage.sppk-dashboard-guide .dashboard-guide-flow :is(strong, small) { display: block!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard-info .page-shell.main-content #sppkPageContent #dashboardInfoPage.sppk-dashboard-guide .dashboard-guide-flow small { margin: 4px 0 0!important; color: var(--dg-muted)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard-info .page-shell.main-content #sppkPageContent #dashboardInfoPage.sppk-dashboard-guide .dashboard-guide-table-wrap { display: block!important; min-width: 0!important; width: 100%!important; max-width: 100%!important; margin: 20px 0!important; border: 1px solid var(--dg-line)!important; border-radius: 8px!important; background: var(--dg-surface)!important; overflow-x: auto!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard-info .page-shell.main-content #sppkPageContent #dashboardInfoPage.sppk-dashboard-guide .dashboard-guide-table { width: 100%!important; min-width: 680px!important; margin: 0!important; border-collapse: collapse!important; table-layout: fixed!important; background: transparent!important; color: var(--dg-copy)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard-info .page-shell.main-content #sppkPageContent #dashboardInfoPage.sppk-dashboard-guide .dashboard-guide-table :is(th, td) { padding: 12px 14px!important; border: 0!important; border-bottom: 1px solid var(--dg-line)!important; background: var(--dg-surface)!important; color: var(--dg-copy)!important; -webkit-text-fill-color: currentColor!important; text-align: left!important; vertical-align: top!important; overflow-wrap: anywhere!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard-info .page-shell.main-content #sppkPageContent #dashboardInfoPage.sppk-dashboard-guide .dashboard-guide-table thead th { background: var(--dg-soft)!important; color: var(--dg-text)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard-info .page-shell.main-content #sppkPageContent #dashboardInfoPage.sppk-dashboard-guide .dashboard-guide-table thead th:first-child { width: 26%!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard-info .page-shell.main-content #sppkPageContent #dashboardInfoPage.sppk-dashboard-guide .dashboard-guide-table thead th:nth-child(2) { width: 25%!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard-info .page-shell.main-content #sppkPageContent #dashboardInfoPage.sppk-dashboard-guide .dashboard-guide-table tbody th { color: var(--dg-text)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard-info .page-shell.main-content #sppkPageContent #dashboardInfoPage.sppk-dashboard-guide .dashboard-guide-table tbody tr:last-child :is(th, td) { border-bottom: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard-info .page-shell.main-content #sppkPageContent #dashboardInfoPage.sppk-dashboard-guide .dashboard-guide-explanations { display: grid!important; gap: 0!important; margin: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard-info .page-shell.main-content #sppkPageContent #dashboardInfoPage.sppk-dashboard-guide .dashboard-guide-explanations > div { min-width: 0!important; padding: 16px 0!important; border-bottom: 1px solid var(--dg-line)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard-info .page-shell.main-content #sppkPageContent #dashboardInfoPage.sppk-dashboard-guide .dashboard-guide-explanations > div:first-child { padding-top: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard-info .page-shell.main-content #sppkPageContent #dashboardInfoPage.sppk-dashboard-guide .dashboard-guide-explanations > div:last-child { padding-bottom: 0!important; border-bottom: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard-info .page-shell.main-content #sppkPageContent #dashboardInfoPage.sppk-dashboard-guide dt { margin: 0 0 6px!important; color: var(--dg-text)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard-info .page-shell.main-content #sppkPageContent #dashboardInfoPage.sppk-dashboard-guide dd { margin: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard-info .page-shell.main-content #sppkPageContent #dashboardInfoPage.sppk-dashboard-guide .dashboard-guide-checklist { display: grid!important; gap: 14px!important; margin: 0!important; padding: 0!important; list-style: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard-info .page-shell.main-content #sppkPageContent #dashboardInfoPage.sppk-dashboard-guide .dashboard-guide-checklist li { display: flex!important; align-items: flex-start!important; gap: 10px!important; min-width: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard-info .page-shell.main-content #sppkPageContent #dashboardInfoPage.sppk-dashboard-guide .dashboard-guide-checklist i { flex: 0 0 18px!important; margin-top: 3px!important; color: var(--dg-muted)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard-info .page-shell.main-content #sppkPageContent #dashboardInfoPage.sppk-dashboard-guide :is(a, .dashboard-guide-table-wrap):focus-visible { outline: 2px solid var(--dg-muted)!important; outline-offset: 3px!important; box-shadow: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard-info .page-shell.main-content #sppkPageContent #dashboardInfoPage.sppk-dashboard-guide .dashboard-guide-section:focus { outline: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent a[href="index.php?page=dashboard-info"] { display: inline-flex!important; align-items: center!important; justify-content: center!important; gap: 8px!important; max-width: 100%!important; min-height: 36px!important; padding: 9px 14px!important; border: 1px solid var(--db-line)!important; border-radius: 7px!important; background: var(--db-surface)!important; color: var(--db-text)!important; -webkit-text-fill-color: currentColor!important; box-shadow: none!important; transform: none!important; text-decoration: none!important; white-space: normal!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent a[href="index.php?page=dashboard-info"] i { color: inherit!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent a[href="index.php?page=dashboard-info"]:hover { background: var(--db-soft)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent a[href="index.php?page=dashboard-info"]:focus-visible { outline: 2px solid var(--db-muted)!important; outline-offset: 3px!important; }
@media (max-width: 1199.98px) {
 html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard-info .page-shell.main-content #sppkPageContent #dashboardInfoPage.sppk-dashboard-guide .dashboard-guide-layout { grid-template-columns: minmax(0, 1fr)!important; gap: 24px!important; }
 html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard-info .page-shell.main-content #sppkPageContent #dashboardInfoPage.sppk-dashboard-guide .dashboard-guide-nav { position: static!important; grid-template-columns: repeat(3, minmax(0, 1fr))!important; }
 html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard-info .page-shell.main-content #sppkPageContent #dashboardInfoPage.sppk-dashboard-guide .dashboard-guide-nav > span { grid-column: 1 / -1!important; }
}
@media (max-width: 767.98px) {
 html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard-info .page-shell.main-content #sppkPageContent #dashboardInfoPage.sppk-dashboard-guide .dashboard-guide-header { flex-direction: column!important; gap: 16px!important; margin-bottom: 20px!important; padding-bottom: 20px!important; }
 html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard-info .page-shell.main-content #sppkPageContent #dashboardInfoPage.sppk-dashboard-guide .dashboard-guide-nav { grid-template-columns: repeat(2, minmax(0, 1fr))!important; }
 html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard-info .page-shell.main-content #sppkPageContent #dashboardInfoPage.sppk-dashboard-guide .dashboard-guide-feature-list { grid-template-columns: minmax(0, 1fr)!important; }
 html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard-info .page-shell.main-content #sppkPageContent #dashboardInfoPage.sppk-dashboard-guide .dashboard-guide-flow { grid-template-columns: repeat(2, minmax(0, 1fr))!important; }
 html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard-info .page-shell.main-content #sppkPageContent #dashboardInfoPage.sppk-dashboard-guide .dashboard-guide-note { padding: 12px!important; }
 html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard-info .page-shell.main-content #sppkPageContent #dashboardInfoPage.sppk-dashboard-guide .dashboard-guide-section { margin-bottom: 24px!important; padding-bottom: 24px!important; }
}
}
@layer sppk-typography {
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard-info .page-shell.main-content #sppkPageContent #dashboardInfoPage.sppk-dashboard-guide { font-size: .875rem!important; line-height: 1.65!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard-info .page-shell.main-content #sppkPageContent #dashboardInfoPage.sppk-dashboard-guide h1 { font-size: 1.5rem!important; line-height: 1.3!important; font-weight: 600!important; letter-spacing: normal!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard-info .page-shell.main-content #sppkPageContent #dashboardInfoPage.sppk-dashboard-guide h2 { font-size: 1.125rem!important; line-height: 1.4!important; font-weight: 500!important; letter-spacing: normal!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard-info .page-shell.main-content #sppkPageContent #dashboardInfoPage.sppk-dashboard-guide :is(h3, dt, strong, .dashboard-guide-table th) { font-size: .875rem!important; line-height: 1.5!important; font-weight: 500!important; letter-spacing: normal!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard-info .page-shell.main-content #sppkPageContent #dashboardInfoPage.sppk-dashboard-guide :is(p, dd, li, .dashboard-guide-table td) { font-size: .875rem!important; line-height: 1.65!important; font-weight: 400!important; letter-spacing: normal!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard-info .page-shell.main-content #sppkPageContent #dashboardInfoPage.sppk-dashboard-guide :is(.dashboard-guide-eyebrow, .dashboard-guide-kicker, .dashboard-guide-nav > span, .dashboard-guide-flow small, .dashboard-guide-flow li > span) { font-size: .75rem!important; line-height: 1.5!important; font-weight: 400!important; letter-spacing: normal!important; text-transform: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard-info .page-shell.main-content #sppkPageContent #dashboardInfoPage.sppk-dashboard-guide :is(.dashboard-guide-nav a, .dashboard-guide-back), html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard .page-shell.main-content #sppkPageContent a[href="index.php?page=dashboard-info"] { font-size: .875rem!important; line-height: 1.5!important; font-weight: 400!important; letter-spacing: normal!important; text-transform: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard-info .page-shell.main-content #sppkPageContent #dashboardInfoPage.sppk-dashboard-guide .dashboard-guide-icon i { font-size: 1rem!important; }
}

/* SPPK V65 — Navigasi panel panduan; tinggi area konten tetap saat tab berubah. */
@layer sppk-dashboard-guide-layout {
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard-info .page-shell.main-content #sppkPageContent #dashboardInfoPage.sppk-dashboard-guide.sppk-dashboard-guide-tabs .dashboard-guide-nav button[role="tab"] { display: flex!important; align-items: center!important; min-width: 0!important; width: 100%!important; min-height: 34px!important; margin: 0!important; padding: 7px 8px!important; border: 0!important; border-radius: 5px!important; background: transparent!important; color: var(--dg-copy)!important; -webkit-text-fill-color: currentColor!important; text-align: left!important; text-decoration: none!important; overflow-wrap: anywhere!important; cursor: pointer!important; box-shadow: none!important; transform: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard-info .page-shell.main-content #sppkPageContent #dashboardInfoPage.sppk-dashboard-guide.sppk-dashboard-guide-tabs .dashboard-guide-nav button[role="tab"]:hover { background: var(--dg-hover)!important; color: var(--dg-heading)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard-info .page-shell.main-content #sppkPageContent #dashboardInfoPage.sppk-dashboard-guide.sppk-dashboard-guide-tabs .dashboard-guide-nav button[aria-selected="true"] { background: var(--dg-hover)!important; color: var(--dg-heading)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard-info .page-shell.main-content #sppkPageContent #dashboardInfoPage.sppk-dashboard-guide.sppk-dashboard-guide-tabs .dashboard-guide-nav button[role="tab"]:focus-visible { outline: 2px solid var(--dg-muted)!important; outline-offset: 2px!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard-info .page-shell.main-content #sppkPageContent #dashboardInfoPage.sppk-dashboard-guide.sppk-dashboard-guide-tabs .dashboard-guide-content { position: relative!important; height: clamp(320px, calc(100dvh - 260px), 740px)!important; min-height: 0!important; overflow: hidden!important; overflow-anchor: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard-info .page-shell.main-content #sppkPageContent #dashboardInfoPage.sppk-dashboard-guide.sppk-dashboard-guide-tabs .dashboard-guide-section[role="tabpanel"] { box-sizing: border-box!important; width: 100%!important; height: 100%!important; min-height: 0!important; max-height: 100%!important; margin: 0!important; padding: 0 12px 8px 0!important; border: 0!important; overflow-x: hidden!important; overflow-y: auto!important; overscroll-behavior-y: contain!important; overflow-anchor: none!important; scrollbar-gutter: stable!important; scrollbar-color: var(--dg-muted) var(--dg-soft)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard-info .page-shell.main-content #sppkPageContent #dashboardInfoPage.sppk-dashboard-guide.sppk-dashboard-guide-tabs .dashboard-guide-section[role="tabpanel"]:not([hidden]) { display: block!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard-info .page-shell.main-content #sppkPageContent #dashboardInfoPage.sppk-dashboard-guide.sppk-dashboard-guide-tabs .dashboard-guide-section[role="tabpanel"][hidden] { display: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard-info .page-shell.main-content #sppkPageContent #dashboardInfoPage.sppk-dashboard-guide.sppk-dashboard-guide-tabs .dashboard-guide-section[role="tabpanel"]:focus-visible { outline: 2px solid var(--dg-muted)!important; outline-offset: -2px!important; }
@media (max-width: 1199.98px) { html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard-info .page-shell.main-content #sppkPageContent #dashboardInfoPage.sppk-dashboard-guide.sppk-dashboard-guide-tabs .dashboard-guide-content { height: clamp(320px, calc(100dvh - 360px), 700px)!important; } }
@media (max-width: 767.98px) { html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard-info .page-shell.main-content #sppkPageContent #dashboardInfoPage.sppk-dashboard-guide.sppk-dashboard-guide-tabs .dashboard-guide-content { height: clamp(300px, calc(100dvh - 390px), 640px)!important; } }
}
@layer sppk-typography {
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard-info .page-shell.main-content #sppkPageContent #dashboardInfoPage.sppk-dashboard-guide.sppk-dashboard-guide-tabs .dashboard-guide-nav button[role="tab"] { font-size: .875rem!important; line-height: 1.5!important; font-weight: 400!important; letter-spacing: normal!important; text-transform: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard-info .page-shell.main-content #sppkPageContent #dashboardInfoPage.sppk-dashboard-guide.sppk-dashboard-guide-tabs .dashboard-guide-nav button[aria-selected="true"] { font-weight: 400!important; }
}

/* SPPK V66 — Histori dashboard: hierarki teks dan popup netral. */
@layer sppk-dashboard-layout {
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard #dashboardHistoryPopover.sppk-history-clean { box-sizing: border-box!important; max-width: calc(100vw - 24px)!important; max-height: calc(100dvh - 24px)!important; margin: 0!important; padding: 18px!important; border: 1px solid var(--db-line)!important; border-radius: 12px!important; background: var(--db-surface)!important; color: var(--db-copy)!important; box-shadow: 0 12px 32px rgba(0,0,0,.18)!important; overflow-x: hidden!important; overflow-y: auto!important; overscroll-behavior: contain!important; opacity: 0!important; transform: translateY(4px)!important; transform-origin: top right!important; transition: opacity .14s ease, transform .14s ease!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard.dark #dashboardHistoryPopover.sppk-history-clean { box-shadow: 0 14px 36px rgba(0,0,0,.35)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard #dashboardHistoryPopover.sppk-history-clean.is-visible { opacity: 1!important; transform: translateY(0)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard #dashboardHistoryPopover.sppk-history-clean[hidden] { display: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard #dashboardHistoryPopover.sppk-history-clean .dashboard-history-popover-head { display: flex!important; align-items: flex-start!important; gap: 10px!important; min-width: 0!important; margin: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard #dashboardHistoryPopover.sppk-history-clean .dashboard-history-icon { display: inline-flex!important; align-items: center!important; justify-content: center!important; flex: 0 0 24px!important; width: 24px!important; height: 28px!important; margin: 0!important; padding: 0!important; border: 0!important; border-radius: 0!important; background: transparent!important; color: var(--db-muted)!important; box-shadow: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard #dashboardHistoryPopover.sppk-history-clean .dashboard-history-popover-head > div { display: grid!important; flex: 1 1 auto!important; min-width: 0!important; gap: 4px!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard #dashboardHistoryPopover.sppk-history-clean .dashboard-history-popover-head small { color: var(--db-muted)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard #dashboardHistoryPopover.sppk-history-clean #dashboardHistoryTitle { display: block!important; min-width: 0!important; margin: 0!important; overflow: visible!important; text-overflow: clip!important; white-space: normal!important; overflow-wrap: anywhere!important; color: var(--db-heading)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard #dashboardHistoryPopover.sppk-history-clean .dashboard-history-close { display: inline-flex!important; align-items: center!important; justify-content: center!important; flex: 0 0 28px!important; width: 28px!important; height: 28px!important; min-height: 28px!important; margin: -2px -4px 0 0!important; padding: 0!important; border: 0!important; border-radius: 6px!important; background: transparent!important; color: var(--db-muted)!important; -webkit-text-fill-color: currentColor!important; box-shadow: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard #dashboardHistoryPopover.sppk-history-clean .dashboard-history-close:hover { background: var(--db-soft)!important; color: var(--db-heading)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard #dashboardHistoryPopover.sppk-history-clean .dashboard-history-close:focus-visible { outline: 2px solid var(--db-focus)!important; outline-offset: 2px!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard #dashboardHistoryPopover.sppk-history-clean .dashboard-history-comparison { display: grid!important; grid-template-columns: repeat(2, minmax(0, 1fr))!important; align-items: start!important; gap: 16px!important; margin: 16px 0 0!important; padding: 14px!important; border: 1px solid var(--db-line)!important; border-radius: 8px!important; background: var(--db-soft)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard #dashboardHistoryPopover.sppk-history-clean .dashboard-history-comparison > i { display: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard #dashboardHistoryPopover.sppk-history-clean .dashboard-history-comparison > div { display: grid!important; gap: 6px!important; min-width: 0!important; text-align: left!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard #dashboardHistoryPopover.sppk-history-clean .dashboard-history-comparison > div:last-child { padding-left: 16px!important; border-left: 1px solid var(--db-line)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard #dashboardHistoryPopover.sppk-history-clean .dashboard-history-comparison span { color: var(--db-muted)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard #dashboardHistoryPopover.sppk-history-clean :is(#dashboardHistoryPrevious, #dashboardHistoryCurrent) { display: block!important; min-width: 0!important; margin: 0!important; overflow: visible!important; text-overflow: clip!important; white-space: normal!important; overflow-wrap: anywhere!important; font-variant-numeric: tabular-nums!important; color: var(--db-heading)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard #dashboardHistoryPopover.sppk-history-clean .dashboard-history-change { display: grid!important; grid-template-columns: 16px minmax(0, 1fr) auto!important; align-items: start!important; gap: 8px!important; margin: 14px 0 0!important; padding: 0!important; border: 0!important; border-radius: 0!important; background: transparent!important; color: var(--db-copy)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard #dashboardHistoryPopover.sppk-history-clean .dashboard-history-change :is(span, i, strong) { color: inherit!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard #dashboardHistoryPopover.sppk-history-clean .dashboard-history-change strong { min-width: 0!important; max-width: 132px!important; margin: 0!important; overflow: visible!important; text-overflow: clip!important; white-space: normal!important; overflow-wrap: anywhere!important; text-align: right!important; font-variant-numeric: tabular-nums!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard #dashboardHistoryPopover.sppk-history-clean #dashboardHistoryPeriod { margin: 12px 0 0!important; padding: 12px 0 0!important; border-top: 1px solid var(--db-line)!important; color: var(--db-muted)!important; -webkit-text-fill-color: currentColor!important; white-space: normal!important; overflow-wrap: anywhere!important; }
@media (max-width: 359.98px) { html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard #dashboardHistoryPopover.sppk-history-clean { padding: 14px!important; } html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard #dashboardHistoryPopover.sppk-history-clean .dashboard-history-comparison { gap: 12px!important; padding: 12px!important; } html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard #dashboardHistoryPopover.sppk-history-clean .dashboard-history-comparison > div:last-child { padding-left: 12px!important; } html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard #dashboardHistoryPopover.sppk-history-clean .dashboard-history-change strong { max-width: 100px!important; } }
@media (prefers-reduced-motion: reduce) { html body#sppkAppShell.sppk-app-shell.sppk-route-dashboard #dashboardHistoryPopover.sppk-history-clean { transition: none!important; } }
}
@layer sppk-typography {
html[data-sppk-typography="gpt"] body#sppkAppShell.sppk-app-shell.sppk-route-dashboard #dashboardHistoryPopover.sppk-history-clean { font-size: .875rem!important; line-height: 1.5!important; font-weight: 400!important; }
html[data-sppk-typography="gpt"] body#sppkAppShell.sppk-app-shell.sppk-route-dashboard #dashboardHistoryPopover.sppk-history-clean .dashboard-history-popover-head small { font-size: .75rem!important; line-height: 1.4!important; font-weight: 400!important; letter-spacing: normal!important; text-transform: none!important; }
html[data-sppk-typography="gpt"] body#sppkAppShell.sppk-app-shell.sppk-route-dashboard #dashboardHistoryPopover.sppk-history-clean #dashboardHistoryTitle { font-size: .875rem!important; line-height: 1.4!important; font-weight: 600!important; letter-spacing: normal!important; }
html[data-sppk-typography="gpt"] body#sppkAppShell.sppk-app-shell.sppk-route-dashboard #dashboardHistoryPopover.sppk-history-clean .dashboard-history-comparison span { font-size: .75rem!important; line-height: 1.5!important; font-weight: 400!important; letter-spacing: normal!important; }
html[data-sppk-typography="gpt"] body#sppkAppShell.sppk-app-shell.sppk-route-dashboard #dashboardHistoryPopover.sppk-history-clean :is(#dashboardHistoryPrevious, #dashboardHistoryCurrent) { font-size: 1.125rem!important; line-height: 1.4!important; font-weight: 600!important; letter-spacing: normal!important; }
html[data-sppk-typography="gpt"] body#sppkAppShell.sppk-app-shell.sppk-route-dashboard #dashboardHistoryPopover.sppk-history-clean .dashboard-history-change, html[data-sppk-typography="gpt"] body#sppkAppShell.sppk-app-shell.sppk-route-dashboard #dashboardHistoryPopover.sppk-history-clean .dashboard-history-change > span { font-size: .8125rem!important; line-height: 1.5!important; font-weight: 400!important; letter-spacing: normal!important; }
html[data-sppk-typography="gpt"] body#sppkAppShell.sppk-app-shell.sppk-route-dashboard #dashboardHistoryPopover.sppk-history-clean .dashboard-history-change > strong { font-size: .875rem!important; line-height: 1.5!important; font-weight: 500!important; letter-spacing: normal!important; }
html[data-sppk-typography="gpt"] body#sppkAppShell.sppk-app-shell.sppk-route-dashboard #dashboardHistoryPopover.sppk-history-clean #dashboardHistoryPeriod { font-size: .75rem!important; line-height: 1.5!important; font-weight: 400!important; letter-spacing: normal!important; }
html[data-sppk-typography="gpt"] body#sppkAppShell.sppk-app-shell.sppk-route-dashboard #dashboardHistoryPopover.sppk-history-clean .dashboard-history-icon i { font-size: 1rem!important; line-height: 1!important; }
html[data-sppk-typography="gpt"] body#sppkAppShell.sppk-app-shell.sppk-route-dashboard #dashboardHistoryPopover.sppk-history-clean .dashboard-history-close i { font-size: .875rem!important; line-height: 1!important; }
html[data-sppk-typography="gpt"] body#sppkAppShell.sppk-app-shell.sppk-route-dashboard #dashboardHistoryPopover.sppk-history-clean .dashboard-history-change > i { font-size: .8125rem!important; line-height: 1.5!important; }
}

/* SPPK V67 — Pilihan fitur Input Harian dan Rekapitulasi di header. */
@layer sppk-input-headers {
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-input .page-shell.main-content #sppkPageContent #sppkDailyInputWorkspace.sppk-daily-input-clean.sppk-workspace-header-tabs .daily-input-layout { display: grid!important; grid-template-columns: minmax(0, 1fr)!important; grid-template-rows: auto minmax(0, 1fr)!important; gap: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-input .page-shell.main-content #sppkPageContent #sppkDailyInputWorkspace.sppk-daily-input-clean.sppk-workspace-header-tabs .daily-input-navigation { display: block!important; width: 100%!important; min-width: 0!important; min-height: 0!important; padding: 10px 12px!important; border: 0!important; border-right: 0!important; border-bottom: 1px solid var(--sppk-theme-line)!important; border-radius: 0!important; overflow: visible!important; background: var(--sppk-theme-surface)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-input .page-shell.main-content #sppkPageContent #sppkDailyInputWorkspace.sppk-daily-input-clean.sppk-workspace-header-tabs .daily-input-navigation > h2 { display: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-input .page-shell.main-content #sppkPageContent #sppkDailyInputWorkspace.sppk-daily-input-clean.sppk-workspace-header-tabs .daily-input-tabs { display: flex!important; flex-direction: row!important; flex-wrap: nowrap!important; align-items: stretch!important; align-content: normal!important; gap: 6px!important; min-width: 0!important; max-width: 100%!important; margin: 0!important; padding: 3px 1px 6px!important; overflow-x: auto!important; overflow-y: hidden!important; overscroll-behavior-x: contain!important; scrollbar-width: thin!important; scrollbar-color: var(--sppk-theme-muted) transparent!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-input .page-shell.main-content #sppkPageContent #sppkDailyInputWorkspace.sppk-daily-input-clean.sppk-workspace-header-tabs .daily-input-tab { display: flex!important; flex: 1 0 auto!important; align-items: center!important; justify-content: center!important; gap: 8px!important; width: auto!important; min-width: 148px!important; min-height: 40px!important; margin: 0!important; padding: 9px 12px!important; border: 0!important; border-radius: 7px!important; white-space: nowrap!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-input .page-shell.main-content #sppkPageContent #sppkDailyInputWorkspace.sppk-daily-input-clean.sppk-workspace-header-tabs .daily-input-tab > i { display: inline-flex!important; align-items: center!important; justify-content: center!important; flex: 0 0 18px!important; width: 18px!important; margin: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-input .page-shell.main-content #sppkPageContent #sppkDailyInputWorkspace.sppk-daily-input-clean.sppk-workspace-header-tabs .daily-input-tab-copy { display: block!important; min-width: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-input .page-shell.main-content #sppkPageContent #sppkDailyInputWorkspace.sppk-daily-input-clean.sppk-workspace-header-tabs .daily-input-tab-copy strong { display: block!important; overflow-wrap: normal!important; white-space: nowrap!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-input .page-shell.main-content #sppkPageContent #sppkDailyInputWorkspace.sppk-daily-input-clean.sppk-workspace-header-tabs .daily-input-tab-copy small { display: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-input .page-shell.main-content #sppkPageContent #sppkDailyInputWorkspace.sppk-daily-input-clean.sppk-workspace-header-tabs .daily-input-tab > .daily-input-lock { flex: 0 0 12px!important; width: 12px!important; margin: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-input .page-shell.main-content #sppkPageContent #sppkDailyInputWorkspace.sppk-daily-input-clean.sppk-workspace-header-tabs .daily-input-main { min-width: 0!important; min-height: 0!important; width: 100%!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-input .page-shell.main-content #sppkPageContent #sppkDailyInputWorkspace.sppk-daily-input-clean.sppk-workspace-header-tabs .daily-input-form-heading { padding: 16px 20px!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-input .page-shell.main-content #sppkPageContent #sppkDailyInputWorkspace.sppk-daily-input-clean.sppk-workspace-header-tabs .daily-input-tab:focus-visible { outline: 2px solid var(--sppk-theme-muted)!important; outline-offset: -2px!important; }
@media (max-width: 767.98px) { html body#sppkAppShell.sppk-app-shell.sppk-route-menu-input .page-shell.main-content #sppkPageContent #sppkDailyInputWorkspace.sppk-daily-input-clean.sppk-workspace-header-tabs .daily-input-navigation { padding: 8px!important; } html body#sppkAppShell.sppk-app-shell.sppk-route-menu-input .page-shell.main-content #sppkPageContent #sppkDailyInputWorkspace.sppk-daily-input-clean.sppk-workspace-header-tabs .daily-input-form-heading { padding: 14px 16px!important; } }
}
@layer sppk-typography {
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-input .page-shell.main-content #sppkPageContent #sppkDailyInputWorkspace.sppk-daily-input-clean.sppk-workspace-header-tabs .daily-input-tab, html body#sppkAppShell.sppk-app-shell.sppk-route-menu-input .page-shell.main-content #sppkPageContent #sppkDailyInputWorkspace.sppk-daily-input-clean.sppk-workspace-header-tabs .daily-input-tab-copy strong { font-size: .875rem!important; line-height: 1.5!important; font-weight: 500!important; letter-spacing: normal!important; text-transform: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-input .page-shell.main-content #sppkPageContent #sppkDailyInputWorkspace.sppk-daily-input-clean.sppk-workspace-header-tabs .daily-input-tab > i { font-size: 1rem!important; line-height: 1!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-input .page-shell.main-content #sppkPageContent #sppkDailyInputWorkspace.sppk-daily-input-clean.sppk-workspace-header-tabs .daily-input-tab > .daily-input-lock { font-size: .75rem!important; line-height: 1!important; }
}

@layer sppk-recap-headers {
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-rekap .page-shell.main-content #sppkPageContent #sppkRecapWorkspace.sppk-recap-clean.sppk-workspace-header-tabs .recap-workspace-layout { display: grid!important; grid-template-columns: minmax(0, 1fr)!important; grid-template-rows: auto minmax(0, 1fr)!important; gap: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-rekap .page-shell.main-content #sppkPageContent #sppkRecapWorkspace.sppk-recap-clean.sppk-workspace-header-tabs .recap-workspace-navigation { display: block!important; width: 100%!important; min-width: 0!important; min-height: 0!important; padding: 10px 12px!important; border: 0!important; border-right: 0!important; border-bottom: 1px solid var(--sppk-theme-line)!important; border-radius: 0!important; overflow: visible!important; background: var(--sppk-theme-surface)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-rekap .page-shell.main-content #sppkPageContent #sppkRecapWorkspace.sppk-recap-clean.sppk-workspace-header-tabs .recap-workspace-navigation > h2 { display: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-rekap .page-shell.main-content #sppkPageContent #sppkRecapWorkspace.sppk-recap-clean.sppk-workspace-header-tabs .recap-workspace-tabs { display: flex!important; flex-direction: row!important; flex-wrap: nowrap!important; align-items: stretch!important; align-content: normal!important; gap: 6px!important; min-width: 0!important; max-width: 100%!important; margin: 0!important; padding: 3px 1px 6px!important; overflow-x: auto!important; overflow-y: hidden!important; overscroll-behavior-x: contain!important; scrollbar-width: thin!important; scrollbar-color: var(--sppk-theme-muted) transparent!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-rekap .page-shell.main-content #sppkPageContent #sppkRecapWorkspace.sppk-recap-clean.sppk-workspace-header-tabs .recap-workspace-tab { display: flex!important; flex: 1 0 auto!important; align-items: center!important; justify-content: center!important; gap: 8px!important; width: auto!important; min-width: 148px!important; min-height: 40px!important; margin: 0!important; padding: 9px 12px!important; border: 0!important; border-radius: 7px!important; white-space: nowrap!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-rekap .page-shell.main-content #sppkPageContent #sppkRecapWorkspace.sppk-recap-clean.sppk-workspace-header-tabs .recap-workspace-tab > i { display: inline-flex!important; align-items: center!important; justify-content: center!important; flex: 0 0 18px!important; width: 18px!important; margin: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-rekap .page-shell.main-content #sppkPageContent #sppkRecapWorkspace.sppk-recap-clean.sppk-workspace-header-tabs .recap-workspace-tab-copy { display: block!important; min-width: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-rekap .page-shell.main-content #sppkPageContent #sppkRecapWorkspace.sppk-recap-clean.sppk-workspace-header-tabs .recap-workspace-tab-copy strong { display: block!important; overflow-wrap: normal!important; white-space: nowrap!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-rekap .page-shell.main-content #sppkPageContent #sppkRecapWorkspace.sppk-recap-clean.sppk-workspace-header-tabs .recap-workspace-tab-copy small { display: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-rekap .page-shell.main-content #sppkPageContent #sppkRecapWorkspace.sppk-recap-clean.sppk-workspace-header-tabs .recap-workspace-tab > .recap-workspace-lock { flex: 0 0 12px!important; width: 12px!important; margin: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-rekap .page-shell.main-content #sppkPageContent #sppkRecapWorkspace.sppk-recap-clean.sppk-workspace-header-tabs .recap-workspace-main { min-width: 0!important; min-height: 0!important; width: 100%!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-rekap .page-shell.main-content #sppkPageContent #sppkRecapWorkspace.sppk-recap-clean.sppk-workspace-header-tabs .recap-workspace-report-heading { padding: 16px 20px!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-rekap .page-shell.main-content #sppkPageContent #sppkRecapWorkspace.sppk-recap-clean.sppk-workspace-header-tabs .recap-workspace-tab:focus-visible { outline: 2px solid var(--sppk-theme-muted)!important; outline-offset: -2px!important; }
@media (max-width: 767.98px) { html body#sppkAppShell.sppk-app-shell.sppk-route-menu-rekap .page-shell.main-content #sppkPageContent #sppkRecapWorkspace.sppk-recap-clean.sppk-workspace-header-tabs .recap-workspace-navigation { padding: 8px!important; } html body#sppkAppShell.sppk-app-shell.sppk-route-menu-rekap .page-shell.main-content #sppkPageContent #sppkRecapWorkspace.sppk-recap-clean.sppk-workspace-header-tabs .recap-workspace-report-heading { padding: 14px 16px!important; } }
}
@layer sppk-typography {
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-rekap .page-shell.main-content #sppkPageContent #sppkRecapWorkspace.sppk-recap-clean.sppk-workspace-header-tabs .recap-workspace-tab, html body#sppkAppShell.sppk-app-shell.sppk-route-menu-rekap .page-shell.main-content #sppkPageContent #sppkRecapWorkspace.sppk-recap-clean.sppk-workspace-header-tabs .recap-workspace-tab-copy strong { font-size: .875rem!important; line-height: 1.5!important; font-weight: 500!important; letter-spacing: normal!important; text-transform: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-rekap .page-shell.main-content #sppkPageContent #sppkRecapWorkspace.sppk-recap-clean.sppk-workspace-header-tabs .recap-workspace-tab > i { font-size: 1rem!important; line-height: 1!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-rekap .page-shell.main-content #sppkPageContent #sppkRecapWorkspace.sppk-recap-clean.sppk-workspace-header-tabs .recap-workspace-tab > .recap-workspace-lock { font-size: .75rem!important; line-height: 1!important; }
}


/* SPPK V68 — Toolbar rekap ringkas di bagian atas laporan. */
@layer sppk-recap-headers {
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-rekap, .sppk-route-rekap-tuk, .sppk-route-rekap_bbm, .sppk-route-rekap_jalan, .sppk-route-rekap_houling) .page-shell.main-content #sppkPageContent .sppk-recap-toolbar-layout :is(.rekap-production-hero, .rekap-detail-hero) { position: relative!important; z-index: 2!important; overflow: visible!important; margin: 0 0 16px!important; transform: none!important; backdrop-filter: none!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-rekap, .sppk-route-rekap-tuk, .sppk-route-rekap_bbm, .sppk-route-rekap_jalan, .sppk-route-rekap_houling) .page-shell.main-content #sppkPageContent .sppk-recap-toolbar-layout .sppk-recap-toolbar { display: grid!important; grid-template-columns: minmax(0, 1fr) auto!important; align-items: center!important; gap: 12px!important; min-height: 40px!important; padding: 0 0 12px!important; border-bottom: 1px solid var(--sppk-theme-line)!important; overflow: visible!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-rekap, .sppk-route-rekap-tuk, .sppk-route-rekap_bbm, .sppk-route-rekap_jalan, .sppk-route-rekap_houling) .page-shell.main-content #sppkPageContent .sppk-recap-toolbar-layout .sppk-recap-toolbar-copy { min-width: 0!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-rekap, .sppk-route-rekap-tuk, .sppk-route-rekap_bbm, .sppk-route-rekap_jalan, .sppk-route-rekap_houling) .page-shell.main-content #sppkPageContent .sppk-recap-toolbar-layout .sppk-recap-toolbar-actions { display: flex!important; flex: none!important; flex-wrap: nowrap!important; align-items: center!important; align-self: center!important; justify-content: flex-end!important; justify-self: end!important; gap: 8px!important; width: auto!important; min-width: 0!important; max-width: 100%!important; margin: 0!important; padding: 0!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-rekap, .sppk-route-rekap-tuk, .sppk-route-rekap_bbm, .sppk-route-rekap_jalan, .sppk-route-rekap_houling) .page-shell.main-content #sppkPageContent .sppk-recap-toolbar-layout .sppk-recap-toolbar-actions .sppk-recap-icon-action { display: inline-flex!important; flex: 0 0 36px!important; align-items: center!important; justify-content: center!important; width: 36px!important; height: 36px!important; min-width: 36px!important; min-height: 36px!important; max-width: 36px!important; margin: 0!important; padding: 0!important; border-radius: 7px!important; box-shadow: none!important; gap: 0!important; white-space: nowrap!important; transform: none!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-rekap, .sppk-route-rekap-tuk, .sppk-route-rekap_bbm, .sppk-route-rekap_jalan, .sppk-route-rekap_houling) .page-shell.main-content #sppkPageContent .sppk-recap-toolbar-layout .sppk-recap-toolbar-actions .sppk-recap-icon-action .sppk-recap-action-label { display: none!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-rekap, .sppk-route-rekap-tuk, .sppk-route-rekap_bbm, .sppk-route-rekap_jalan, .sppk-route-rekap_houling) .page-shell.main-content #sppkPageContent .sppk-recap-toolbar-layout .sppk-recap-period-note { display: none!important; margin: 0!important; color: var(--sppk-theme-muted)!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-rekap, .sppk-route-rekap-tuk, .sppk-route-rekap_bbm, .sppk-route-rekap_jalan, .sppk-route-rekap_houling) .page-shell.main-content #sppkPageContent .sppk-recap-toolbar-layout .sppk-recap-filter { position: relative!important; flex: 0 1 auto!important; margin: 0!important; min-width: 0!important; border: 0!important; padding: 0!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-rekap, .sppk-route-rekap-tuk, .sppk-route-rekap_bbm, .sppk-route-rekap_jalan, .sppk-route-rekap_houling) .page-shell.main-content #sppkPageContent .sppk-recap-toolbar-layout .sppk-recap-filter-toggle { display: inline-flex!important; align-items: center!important; justify-content: center!important; gap: 8px!important; min-height: 36px!important; margin: 0!important; padding: 7px 10px!important; border: 1px solid var(--sppk-theme-line)!important; border-radius: 7px!important; background: var(--sppk-theme-surface)!important; color: var(--sppk-theme-copy)!important; -webkit-text-fill-color: currentColor!important; list-style: none!important; cursor: pointer!important; white-space: nowrap!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-rekap, .sppk-route-rekap-tuk, .sppk-route-rekap_bbm, .sppk-route-rekap_jalan, .sppk-route-rekap_houling) .page-shell.main-content #sppkPageContent .sppk-recap-toolbar-layout .sppk-recap-filter-toggle::-webkit-details-marker { display: none!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-rekap, .sppk-route-rekap-tuk, .sppk-route-rekap_bbm, .sppk-route-rekap_jalan, .sppk-route-rekap_houling) .page-shell.main-content #sppkPageContent .sppk-recap-toolbar-layout .sppk-recap-filter-toggle::marker { content: ''!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-rekap, .sppk-route-rekap-tuk, .sppk-route-rekap_bbm, .sppk-route-rekap_jalan, .sppk-route-rekap_houling) .page-shell.main-content #sppkPageContent .sppk-recap-toolbar-layout .sppk-recap-filter-toggle :is(span, i) { color: inherit!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-rekap, .sppk-route-rekap-tuk, .sppk-route-rekap_bbm, .sppk-route-rekap_jalan, .sppk-route-rekap_houling) .page-shell.main-content #sppkPageContent .sppk-recap-toolbar-layout .sppk-recap-filter-toggle:hover, html body#sppkAppShell.sppk-app-shell:is(.sppk-route-rekap, .sppk-route-rekap-tuk, .sppk-route-rekap_bbm, .sppk-route-rekap_jalan, .sppk-route-rekap_houling) .page-shell.main-content #sppkPageContent .sppk-recap-toolbar-layout .sppk-recap-filter[open] .sppk-recap-filter-toggle { background: var(--sppk-theme-surface-soft)!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-rekap, .sppk-route-rekap-tuk, .sppk-route-rekap_bbm, .sppk-route-rekap_jalan, .sppk-route-rekap_houling) .page-shell.main-content #sppkPageContent .sppk-recap-toolbar-layout .sppk-recap-filter-menu { display: none!important; position: absolute!important; inset: auto 0 auto auto!important; top: calc(100% + 6px)!important; z-index: 30!important; width: 184px!important; max-width: calc(100vw - 32px)!important; max-height: min(240px, calc(100dvh - 120px))!important; overflow-y: auto!important; padding: 6px!important; margin: 0!important; border: 1px solid var(--sppk-theme-line)!important; border-radius: 9px!important; background: var(--sppk-theme-surface)!important; color: var(--sppk-theme-copy)!important; box-shadow: 0 8px 24px rgba(0, 0, 0, .12)!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-rekap, .sppk-route-rekap-tuk, .sppk-route-rekap_bbm, .sppk-route-rekap_jalan, .sppk-route-rekap_houling) .page-shell.main-content #sppkPageContent .sppk-recap-toolbar-layout .sppk-recap-filter[open] .sppk-recap-filter-menu { display: grid!important; gap: 3px!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-rekap, .sppk-route-rekap-tuk, .sppk-route-rekap_bbm, .sppk-route-rekap_jalan, .sppk-route-rekap_houling) .page-shell.main-content #sppkPageContent .sppk-recap-toolbar-layout .sppk-recap-filter-menu > a.btn { display: flex!important; align-items: center!important; justify-content: space-between!important; width: 100%!important; min-height: 36px!important; margin: 0!important; padding: 8px 10px!important; border: 0!important; border-radius: 5px!important; background: transparent!important; color: var(--sppk-theme-copy)!important; -webkit-text-fill-color: currentColor!important; box-shadow: none!important; text-align: left!important; text-decoration: none!important; white-space: normal!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-rekap, .sppk-route-rekap-tuk, .sppk-route-rekap_bbm, .sppk-route-rekap_jalan, .sppk-route-rekap_houling) .page-shell.main-content #sppkPageContent .sppk-recap-toolbar-layout .sppk-recap-filter-menu > a.btn:is(:hover, .btn-success) { background: var(--sppk-theme-surface-soft)!important; color: var(--sppk-theme-heading)!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-rekap, .sppk-route-rekap-tuk, .sppk-route-rekap_bbm, .sppk-route-rekap_jalan, .sppk-route-rekap_houling) .page-shell.main-content #sppkPageContent .sppk-recap-toolbar-layout .sppk-recap-filter-menu > a.btn-success::after { content: '\2713'!important; margin-inline-start: 12px!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-rekap, .sppk-route-rekap-tuk, .sppk-route-rekap_bbm, .sppk-route-rekap_jalan, .sppk-route-rekap_houling) .page-shell.main-content #sppkPageContent .sppk-recap-toolbar-layout :is(.sppk-recap-icon-action, .sppk-recap-filter-toggle, .sppk-recap-filter-menu > a):focus-visible { outline: 2px solid var(--sppk-theme-muted)!important; outline-offset: 2px!important; box-shadow: none!important; }
html.sppk-recap-embedded body#sppkAppShell.sppk-app-shell:is(.sppk-route-rekap, .sppk-route-rekap-tuk, .sppk-route-rekap_bbm, .sppk-route-rekap_jalan, .sppk-route-rekap_houling) .page-shell.main-content #sppkPageContent .sppk-recap-toolbar-layout .sppk-recap-toolbar { grid-template-columns: minmax(0, 1fr) auto!important; }
html.sppk-recap-embedded body#sppkAppShell.sppk-app-shell:is(.sppk-route-rekap, .sppk-route-rekap-tuk, .sppk-route-rekap_bbm, .sppk-route-rekap_jalan, .sppk-route-rekap_houling) .page-shell.main-content #sppkPageContent .sppk-recap-toolbar-layout .sppk-recap-period-note { display: block!important; }
@media (max-width: 600px) {
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-rekap, .sppk-route-rekap-tuk, .sppk-route-rekap_bbm, .sppk-route-rekap_jalan, .sppk-route-rekap_houling) .page-shell.main-content #sppkPageContent .sppk-recap-toolbar-layout .sppk-recap-toolbar { grid-template-columns: minmax(0, 1fr)!important; gap: 10px!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-rekap, .sppk-route-rekap-tuk, .sppk-route-rekap_bbm, .sppk-route-rekap_jalan, .sppk-route-rekap_houling) .page-shell.main-content #sppkPageContent .sppk-recap-toolbar-layout .sppk-recap-toolbar-actions { justify-self: end!important; }
html.sppk-recap-embedded body#sppkAppShell.sppk-app-shell:is(.sppk-route-rekap, .sppk-route-rekap-tuk, .sppk-route-rekap_bbm, .sppk-route-rekap_jalan, .sppk-route-rekap_houling) .page-shell.main-content #sppkPageContent .sppk-recap-toolbar-layout .sppk-recap-toolbar { grid-template-columns: minmax(0, 1fr) auto!important; gap: 8px!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-rekap, .sppk-route-rekap-tuk, .sppk-route-rekap_bbm, .sppk-route-rekap_jalan, .sppk-route-rekap_houling) .page-shell.main-content #sppkPageContent .sppk-recap-toolbar-layout .sppk-recap-filter-toggle { gap: 6px!important; padding: 7px 8px!important; }
}
}
@layer sppk-typography {
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-rekap, .sppk-route-rekap-tuk, .sppk-route-rekap_bbm, .sppk-route-rekap_jalan, .sppk-route-rekap_houling) .page-shell.main-content #sppkPageContent .sppk-recap-toolbar-layout .sppk-recap-icon-action > i { font-size: 1rem!important; line-height: 1!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-rekap, .sppk-route-rekap-tuk, .sppk-route-rekap_bbm, .sppk-route-rekap_jalan, .sppk-route-rekap_houling) .page-shell.main-content #sppkPageContent .sppk-recap-toolbar-layout :is(.sppk-recap-filter-toggle, .sppk-recap-filter-menu > a) { font-size: .875rem!important; line-height: 1.4!important; font-weight: 400!important; letter-spacing: normal!important; text-transform: none!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-rekap, .sppk-route-rekap-tuk, .sppk-route-rekap_bbm, .sppk-route-rekap_jalan, .sppk-route-rekap_houling) .page-shell.main-content #sppkPageContent .sppk-recap-toolbar-layout .sppk-recap-filter-menu > a.btn-success { font-weight: 500!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-rekap, .sppk-route-rekap-tuk, .sppk-route-rekap_bbm, .sppk-route-rekap_jalan, .sppk-route-rekap_houling) .page-shell.main-content #sppkPageContent .sppk-recap-toolbar-layout .sppk-recap-filter-toggle > .bi-chevron-down { font-size: .6875rem!important; }
html body#sppkAppShell.sppk-app-shell:is(.sppk-route-rekap, .sppk-route-rekap-tuk, .sppk-route-rekap_bbm, .sppk-route-rekap_jalan, .sppk-route-rekap_houling) .page-shell.main-content #sppkPageContent .sppk-recap-toolbar-layout .sppk-recap-period-note { font-size: .75rem!important; line-height: 1.5!important; font-weight: 400!important; }
}

/* SPPK V69 — Kontrol laporan di kiri Buka halaman penuh. */
@layer sppk-recap-headers {
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-rekap .page-shell.main-content #sppkPageContent #sppkRecapWorkspace.sppk-recap-clean.sppk-workspace-header-tabs.sppk-recap-actions-in-header .recap-workspace-report-heading { position: relative!important; z-index: 4!important; align-items: center!important; overflow: visible!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-rekap .page-shell.main-content #sppkPageContent #sppkRecapWorkspace.sppk-recap-clean.sppk-workspace-header-tabs.sppk-recap-actions-in-header .recap-workspace-report-heading > .recap-workspace-header-actions { display: flex!important; flex: 0 1 auto!important; align-items: center!important; justify-content: flex-end!important; flex-wrap: nowrap!important; gap: 8px!important; min-width: 0!important; max-width: 100%!important; margin: 0 0 0 auto!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-rekap .page-shell.main-content #sppkPageContent #sppkRecapWorkspace.sppk-recap-clean.sppk-workspace-header-tabs.sppk-recap-actions-in-header .sppk-recap-header-toolbar { display: flex!important; flex: 0 1 auto!important; align-items: center!important; justify-content: flex-end!important; flex-wrap: nowrap!important; gap: 8px!important; min-height: 36px!important; min-width: 0!important; max-width: 100%!important; margin: 0!important; padding: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-rekap .page-shell.main-content #sppkPageContent #sppkRecapWorkspace.sppk-recap-clean.sppk-workspace-header-tabs.sppk-recap-actions-in-header .sppk-recap-header-toolbar[hidden] { display: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-rekap .page-shell.main-content #sppkPageContent #sppkRecapWorkspace.sppk-recap-clean.sppk-workspace-header-tabs.sppk-recap-actions-in-header .recap-workspace-header-actions > .recap-workspace-open-page { flex: 0 0 auto!important; height: 36px!important; min-height: 36px!important; margin: 0!important; padding: 0 10px!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-rekap .page-shell.main-content #sppkPageContent #sppkRecapWorkspace.sppk-recap-clean.sppk-workspace-header-tabs.sppk-recap-actions-in-header .sppk-recap-toolbar-actions .sppk-recap-icon-action { display: inline-flex!important; flex: 0 0 36px!important; align-items: center!important; justify-content: center!important; width: 36px!important; height: 36px!important; min-width: 36px!important; min-height: 36px!important; max-width: 36px!important; margin: 0!important; padding: 0!important; border-radius: 7px!important; box-shadow: none!important; gap: 0!important; white-space: nowrap!important; transform: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-rekap .page-shell.main-content #sppkPageContent #sppkRecapWorkspace.sppk-recap-clean.sppk-workspace-header-tabs.sppk-recap-actions-in-header .sppk-recap-toolbar-actions .sppk-recap-icon-action .sppk-recap-action-label { display: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-rekap .page-shell.main-content #sppkPageContent #sppkRecapWorkspace.sppk-recap-clean.sppk-workspace-header-tabs.sppk-recap-actions-in-header .sppk-recap-filter { position: relative!important; flex: 0 1 auto!important; margin: 0!important; min-width: 0!important; border: 0!important; padding: 0!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-rekap .page-shell.main-content #sppkPageContent #sppkRecapWorkspace.sppk-recap-clean.sppk-workspace-header-tabs.sppk-recap-actions-in-header .sppk-recap-filter-toggle { display: inline-flex!important; align-items: center!important; justify-content: center!important; gap: 8px!important; min-height: 36px!important; margin: 0!important; padding: 7px 10px!important; border: 1px solid var(--sppk-theme-line)!important; border-radius: 7px!important; background: var(--sppk-theme-surface)!important; color: var(--sppk-theme-copy)!important; -webkit-text-fill-color: currentColor!important; list-style: none!important; cursor: pointer!important; white-space: nowrap!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-rekap .page-shell.main-content #sppkPageContent #sppkRecapWorkspace.sppk-recap-clean.sppk-workspace-header-tabs.sppk-recap-actions-in-header .sppk-recap-filter-toggle::-webkit-details-marker { display: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-rekap .page-shell.main-content #sppkPageContent #sppkRecapWorkspace.sppk-recap-clean.sppk-workspace-header-tabs.sppk-recap-actions-in-header .sppk-recap-filter-toggle::marker { content: ''!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-rekap .page-shell.main-content #sppkPageContent #sppkRecapWorkspace.sppk-recap-clean.sppk-workspace-header-tabs.sppk-recap-actions-in-header .sppk-recap-filter-toggle :is(span, i) { color: inherit!important; -webkit-text-fill-color: currentColor!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-rekap .page-shell.main-content #sppkPageContent #sppkRecapWorkspace.sppk-recap-clean.sppk-workspace-header-tabs.sppk-recap-actions-in-header .sppk-recap-filter-toggle:hover, html body#sppkAppShell.sppk-app-shell.sppk-route-menu-rekap .page-shell.main-content #sppkPageContent #sppkRecapWorkspace.sppk-recap-clean.sppk-workspace-header-tabs.sppk-recap-actions-in-header .sppk-recap-filter[open] .sppk-recap-filter-toggle { background: var(--sppk-theme-surface-soft)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-rekap .page-shell.main-content #sppkPageContent #sppkRecapWorkspace.sppk-recap-clean.sppk-workspace-header-tabs.sppk-recap-actions-in-header .sppk-recap-filter-menu { display: none!important; position: absolute!important; inset: auto 0 auto auto!important; top: calc(100% + 6px)!important; z-index: 30!important; width: 184px!important; max-width: calc(100vw - 32px)!important; max-height: min(240px, calc(100dvh - 120px))!important; overflow-y: auto!important; padding: 6px!important; margin: 0!important; border: 1px solid var(--sppk-theme-line)!important; border-radius: 9px!important; background: var(--sppk-theme-surface)!important; color: var(--sppk-theme-copy)!important; box-shadow: 0 8px 24px rgba(0, 0, 0, .12)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-rekap .page-shell.main-content #sppkPageContent #sppkRecapWorkspace.sppk-recap-clean.sppk-workspace-header-tabs.sppk-recap-actions-in-header .sppk-recap-filter[open] .sppk-recap-filter-menu { display: grid!important; gap: 3px!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-rekap .page-shell.main-content #sppkPageContent #sppkRecapWorkspace.sppk-recap-clean.sppk-workspace-header-tabs.sppk-recap-actions-in-header .sppk-recap-filter-menu > a.btn { display: flex!important; align-items: center!important; justify-content: space-between!important; width: 100%!important; min-height: 36px!important; margin: 0!important; padding: 8px 10px!important; border: 0!important; border-radius: 5px!important; background: transparent!important; color: var(--sppk-theme-copy)!important; -webkit-text-fill-color: currentColor!important; box-shadow: none!important; text-align: left!important; text-decoration: none!important; white-space: normal!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-rekap .page-shell.main-content #sppkPageContent #sppkRecapWorkspace.sppk-recap-clean.sppk-workspace-header-tabs.sppk-recap-actions-in-header .sppk-recap-filter-menu > a.btn:is(:hover, .btn-success) { background: var(--sppk-theme-surface-soft)!important; color: var(--sppk-theme-heading)!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-rekap .page-shell.main-content #sppkPageContent #sppkRecapWorkspace.sppk-recap-clean.sppk-workspace-header-tabs.sppk-recap-actions-in-header .sppk-recap-filter-menu > a.btn-success::after { content: '\2713'!important; margin-inline-start: 12px!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-rekap .page-shell.main-content #sppkPageContent #sppkRecapWorkspace.sppk-recap-clean.sppk-workspace-header-tabs.sppk-recap-actions-in-header :is(.sppk-recap-icon-action, .sppk-recap-filter-toggle, .sppk-recap-filter-menu > a):focus-visible { outline: 2px solid var(--sppk-theme-muted)!important; outline-offset: 2px!important; box-shadow: none!important; }

@media (max-width: 767.98px) {
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-rekap .page-shell.main-content #sppkPageContent #sppkRecapWorkspace.sppk-recap-clean.sppk-workspace-header-tabs.sppk-recap-actions-in-header .recap-workspace-report-heading > .recap-workspace-header-actions { flex: 1 1 100%!important; width: 100%!important; flex-wrap: wrap!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-rekap .page-shell.main-content #sppkPageContent #sppkRecapWorkspace.sppk-recap-clean.sppk-workspace-header-tabs.sppk-recap-actions-in-header .sppk-recap-filter-toggle { gap: 6px!important; padding: 7px 8px!important; }
}
@media (max-width: 480px) { html body#sppkAppShell.sppk-app-shell.sppk-route-menu-rekap .page-shell.main-content #sppkPageContent #sppkRecapWorkspace.sppk-recap-clean.sppk-workspace-header-tabs.sppk-recap-actions-in-header .sppk-recap-filter-toggle > .bi-calendar3 { display: none!important; } }
}
@layer sppk-typography {
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-rekap .page-shell.main-content #sppkPageContent #sppkRecapWorkspace.sppk-recap-clean.sppk-workspace-header-tabs.sppk-recap-actions-in-header .sppk-recap-icon-action > i { font-size: 1rem!important; line-height: 1!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-rekap .page-shell.main-content #sppkPageContent #sppkRecapWorkspace.sppk-recap-clean.sppk-workspace-header-tabs.sppk-recap-actions-in-header :is(.sppk-recap-filter-toggle, .sppk-recap-filter-menu > a) { font-size: .875rem!important; line-height: 1.4!important; font-weight: 400!important; letter-spacing: normal!important; text-transform: none!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-rekap .page-shell.main-content #sppkPageContent #sppkRecapWorkspace.sppk-recap-clean.sppk-workspace-header-tabs.sppk-recap-actions-in-header .sppk-recap-filter-menu > a.btn-success { font-weight: 500!important; }
html body#sppkAppShell.sppk-app-shell.sppk-route-menu-rekap .page-shell.main-content #sppkPageContent #sppkRecapWorkspace.sppk-recap-clean.sppk-workspace-header-tabs.sppk-recap-actions-in-header .sppk-recap-filter-toggle > .bi-chevron-down { font-size: .6875rem!important; }
}

@layer sppk-recap-headers {
html.sppk-recap-embedded.sppk-recap-actions-in-host body#sppkAppShell.sppk-app-shell .page-shell.main-content #sppkPageContent .sppk-recap-toolbar-layout :is(.rekap-production-hero, .rekap-detail-hero) { display: none!important; }
}
/* ================================================================
   GLOBAL POPUP INTERACTION LOCK
   The open popup owns interaction; the application behind it stays still.
   ================================================================ */
html.sppk-popup-locked,
html.sppk-popup-locked body {
    overflow: hidden !important;
    overscroll-behavior: none !important;
}

html.sppk-popup-locked body {
    scrollbar-gutter: stable;
}

html.sppk-popup-locked :is(
    dialog[open],
    .modal.show,
    .offcanvas.show,
    .petak-info-modal.show,
    .jalan-info-modal.show,
    #dashboardHistoryPopover:not([hidden]),
    #csPanel.active:not([hidden]),
    #ai-panel[style*="display: block"],
    [data-sppk-popup-lock="true"]
) {
    overscroll-behavior: contain;
}

html.sppk-popup-locked :is(
    dialog[open],
    .modal.show,
    .offcanvas.show,
    .petak-info-modal.show,
    .jalan-info-modal.show,
    #dashboardHistoryPopover:not([hidden]),
    #csPanel.active:not([hidden]),
    #ai-panel[style*="display: block"]
) :is(.modal-body, .offcanvas-body, [class*="-body"], [class*="-content"], [class*="-scroll"]) {
    overscroll-behavior: contain;
}