/* JAKSA visual system: Flowui-inspired navy, cream, yellow, coral, and sky-blue. */
:root {
    --flow-navy: #123f7e;
    --flow-navy-deep: #082b61;
    --flow-sky: #2b8cea;
    --flow-yellow: #ffd15e;
    --flow-coral: #e95870;
    --flow-canvas: #f4faff;
    --flow-card: #ffffff;
    --flow-ink: #092d61;
    --flow-muted: #6c85a3;
    --flow-line: #dce9f4;

    --navy: var(--flow-navy);
    --blue: var(--flow-sky);
    --blue-dark: var(--flow-navy-deep);
    --cyan: #45c5b8;
    --green: #45c5b8;
    --amber: var(--flow-yellow);
    --red: var(--flow-coral);
    --text: var(--flow-muted);
    --muted: #9aa2a8;
    --line: var(--flow-line);
    --soft: var(--flow-canvas);
    --white: var(--flow-card);
    --brand-purple: var(--flow-navy);
    --brand-indigo: var(--flow-navy);
    --brand-blue: var(--flow-navy);
    --brand-teal: var(--flow-sky);
    --brand-gradient: linear-gradient(135deg, #123f7e, #2787d7 56%, #45c5b8);
    --sidebar: 228px;
}

/* Main canvas and surfaces */
body:not(.landing-page):not(.login-page) { color: var(--flow-muted) !important; background: var(--flow-canvas) !important; }
body:not(.landing-page) .content-shell { background: var(--flow-canvas) !important; }
.topbar { background: rgba(255, 253, 250, .95) !important; border-color: var(--flow-line) !important; box-shadow: 0 3px 15px rgba(12,52,70,.05) !important; }
.topbar::after { background: linear-gradient(90deg, transparent, var(--flow-yellow) 24%, var(--flow-coral) 53%, var(--flow-sky) 75%, transparent) !important; opacity: .75 !important; }
.topbar-title strong, .brand strong, .page-heading h1, .panel-header h2, .modal-header h2 { color: var(--flow-ink) !important; }
.topbar-title span, .brand small, .nav-label { color: #9aa4a8 !important; }
.topbar { min-height: 52px !important; padding-inline: 20px !important; }
.topbar-title span { font-size: 8px !important; letter-spacing: .9px !important; }
.topbar-title strong { margin-top: 0; font-size: 12px !important; }
.main-content { padding-top: 16px !important; }

/* One shared application palette: operational blue, soft turquoise, white, and yellow accents. */
.topbar::after { background: linear-gradient(90deg, transparent, var(--flow-sky) 25%, #45c5b8 56%, var(--flow-yellow) 78%, transparent) !important; }
.sidebar { background: linear-gradient(165deg, #123f7e 0%, #0d5f90 55%, #0a718c 100%) !important; }
.sidebar::before { border-color: rgba(102,218,230,.14) !important; }
.nav-link.active { color: #fff !important; background: linear-gradient(102deg, #247fd2, #42c7bd) !important; }
.nav-link.active .nav-icon { color: #fff !important; background: rgba(255,255,255,.18) !important; }
.nav-parent.active { background: linear-gradient(102deg, rgba(37,126,209,.80), rgba(65,195,186,.78)) !important; box-shadow: inset 3px 0 0 #8ce5f0, 0 7px 16px rgba(4,38,88,.16) !important; }
.nav-parent.active .nav-icon { color: #fff !important; background: rgba(255,255,255,.18) !important; }
.nav-sublink.active { color: #fff !important; background: linear-gradient(102deg, #237ed1, #2d9fc2 65%, #ffd05d) !important; }
.nav-link.active::after { background: var(--flow-yellow) !important; box-shadow: 0 0 0 4px rgba(255,209,94,.18) !important; }
.nav-status-dot { background: var(--flow-yellow) !important; box-shadow: 0 0 0 4px rgba(255,209,94,.16) !important; }

.panel, .reference-panel, .profile-summary-card, .company-summary-card, .reference-data-section,
.ring-stat-card, .mini-analytics-card, .filter-panel, .register-panel, .form-section, .single-detail,
.accounting-dashboard-card, .simulation-history-card { box-shadow: 0 7px 20px rgba(21,78,133,.07) !important; }
.btn-primary, .company-summary-card header button, .main-graph-card header a, .reference-section-header > a,
.distribution-action-button, .btn-agenda-generate { background: linear-gradient(135deg, #237bd1, #45c5b8) !important; box-shadow: 0 7px 16px rgba(29,113,192,.20) !important; }
.btn-primary:hover, .company-summary-card header button:hover, .main-graph-card header a:hover,
.reference-section-header > a:hover, .distribution-action-button:hover, .btn-agenda-generate:hover { background: linear-gradient(135deg, #155eae, #31a99f) !important; }
.btn-secondary, .btn-ghost, .btn-agendaris-sync, .btn-shift-handover, .btn-agenda-generate[data-can-cancel="true"] { color: #2162a4 !important; background: #f5fbff !important; border-color: #c8e4f4 !important; }
.btn-secondary:hover, .btn-ghost:hover, .btn-agendaris-sync:hover, .btn-shift-handover:hover,
.btn-agenda-generate[data-can-cancel="true"]:hover { color: #0d417f !important; background: #e5f5ff !important; border-color: #9ad6ee !important; }
.btn-danger, .btn-danger-outline, .btn-delete { background: linear-gradient(135deg, #ed6c7f, #df4561) !important; border-color: transparent !important; }

input, select, textarea { background: #fff !important; border-color: #d5e6f3 !important; }
input:focus, select:focus, textarea:focus { border-color: #2b8cea !important; box-shadow: 0 0 0 3px rgba(43,140,234,.13) !important; }
th, td { border-color: #deebf5 !important; }
tbody tr:hover, .table tbody tr:hover { background: #f1fbff !important; }
.icon-btn, .menu-toggle, .topbar-icon, .date-pill { color: #1d62a5 !important; border-color: #d8e8f3 !important; }
.icon-btn:hover, .menu-toggle:hover, .topbar-icon:hover { background: linear-gradient(135deg, #237bd1, #45c5b8) !important; border-color: transparent !important; }
.date-pill-time, .record-link, .text-link, .back-link, .agenda-file-link, .accounting-dashboard-link { color: #2586d8 !important; }
.pagination li.active a { color: #fff !important; background: linear-gradient(135deg, #237bd1, #45c5b8) !important; border-color: transparent !important; }

.pill, .badge, .tag, .status-chip, .account-role { color: #176cae !important; background: #e8f6ff !important; border-color: #c6e6f7 !important; }
.status-success, .badge-success, .is-success, .is-profit { color: #177f79 !important; background: #e6faf5 !important; border-color: #bdeae0 !important; }
.status-danger, .badge-danger, .is-loss { color: #b44257 !important; background: #fff0f3 !important; border-color: #f4c9d1 !important; }
.section-number, .modal-section-heading > span, .distribution-section-title > div > span,
.account-name-cell > span, .vehicle-form-stepper li.complete > span, .progress-document-tab.complete > span { color: #1765ad !important; background: #e4f4ff !important; border-color: #bfdef3 !important; }
.vehicle-module-tab.active > span, .vehicle-form-stepper li.active > span, .progress-document-tab.active > span { background: linear-gradient(135deg, #237bd1, #45c5b8) !important; }

/* Dark navigation rail */
.sidebar { color: #d9e8ec !important; background: linear-gradient(180deg, #0d3b50, #092f41) !important; border: 0 !important; box-shadow: 8px 0 28px rgba(5,34,48,.19) !important; }
.sidebar::before { border-color: rgba(255, 215, 101, .11) !important; }
.brand strong { color: #fff !important; }
.brand small { color: rgba(225,241,244,.68) !important; }
.nav-label { color: rgba(223,239,241,.50) !important; }
.nav-link, .nav-sublink { color: rgba(239,248,248,.79) !important; }
.nav-link:hover, .nav-sublink:hover { color: #fff !important; background: rgba(255,255,255,.09) !important; }
.nav-link.active { color: var(--flow-navy) !important; background: var(--flow-yellow) !important; box-shadow: 0 8px 17px rgba(2,28,40,.17) !important; }
.nav-parent.active {
    color: #fff !important;
    background: linear-gradient(90deg, rgba(39,166,196,.24), rgba(53,182,209,.11)) !important;
    box-shadow: inset 3px 0 0 #21c0dc, inset 0 0 0 1px rgba(92,204,224,.30) !important;
}
.nav-link.active::after { background: var(--flow-coral) !important; box-shadow: 0 0 0 4px rgba(237,93,104,.15) !important; }
.nav-icon, .nav-link .nav-icon { color: rgba(226,241,244,.75) !important; }
.nav-link.active .nav-icon { color: var(--flow-navy) !important; }
.nav-parent.active .nav-icon { color: #b9edf7 !important; }
.nav-sublink.active { color: var(--flow-navy) !important; background: var(--flow-yellow) !important; box-shadow: 0 7px 15px rgba(2,28,40,.15) !important; }
.nav-submenu { border-left-color: rgba(255,255,255,.16) !important; }
.nav-link-muted, .nav-link-muted:hover { color: rgba(230,242,244,.70) !important; background: transparent !important; }
.nav-status-dot { background: var(--flow-sky) !important; box-shadow: 0 0 0 4px rgba(70,184,211,.16) !important; }
.sidebar-pattern { color: rgba(255,255,255,.045) !important; }
.sidebar-account { color: #eaf5f5 !important; background: rgba(255,255,255,.08) !important; border-color: rgba(255,255,255,.12) !important; }
.sidebar-account-avatar { color: var(--flow-navy) !important; background: var(--flow-yellow) !important; }
.sidebar-account small { color: rgba(233,246,246,.64) !important; }
.sidebar-account button { color: #fff !important; background: rgba(255,255,255,.12) !important; }
.sidebar-account button:hover { background: rgba(255,255,255,.22) !important; }
.image-nav-icon, .nav-link:hover .image-nav-icon { background: transparent !important; border-color: transparent !important; box-shadow: none !important; }
.image-nav-icon::before { background: currentColor !important; }
.nav-link.active .image-nav-icon, .nav-parent.active .image-nav-icon { background: transparent !important; box-shadow: none !important; }
.nav-link.active .image-nav-icon::before, .nav-parent.active .image-nav-icon::before { background: currentColor !important; }

/* Larger, calmer navigation rhythm matching the operational reference. */
.sidebar { padding: 20px 14px !important; }
.brand.brand-jaksa { min-height: 61px !important; padding: 3px 10px 17px !important; }
.brand-jaksa-wordmark { width: 112px !important; filter: drop-shadow(0 4px 7px rgba(0,0,0,.15)) !important; }
.brand-jaksa-expansion { color: rgba(226,241,244,.76) !important; font-size: 6.2px !important; }
.brand-jaksa-expansion b { background: none !important; -webkit-text-fill-color: #fff !important; color: #fff !important; }
.main-nav { padding-top: 0; }
.nav-label { margin: 0 10px 8px !important; font-size: 8px !important; letter-spacing: .9px !important; }
.nav-label-spaced { margin-top: 22px !important; }
.nav-link { min-height: 40px !important; margin-bottom: 4px !important; padding: 8px 10px !important; border-radius: 8px !important; font-size: 10.5px !important; font-weight: 650 !important; }
.nav-icon, .nav-link .nav-icon { flex: 0 0 26px !important; width: 26px !important; height: 26px !important; color: rgba(235,248,249,.93) !important; background: transparent !important; border: 0 !important; border-radius: 8px !important; box-shadow: none !important; font-size: 12px !important; }
.image-nav-icon::before { width: 18px !important; height: 18px !important; }
.nav-link:hover .nav-icon { color: #fff !important; background: rgba(255,255,255,.11) !important; box-shadow: none !important; transform: none !important; }
.nav-link.active .nav-icon { color: var(--flow-navy) !important; background: rgba(255,255,255,.36) !important; }
.nav-parent.active .nav-icon { color: var(--flow-navy) !important; background: var(--flow-yellow) !important; border-radius: 50% !important; box-shadow: 0 4px 10px rgba(0,0,0,.16) !important; }
.nav-parent.active { border-radius: 8px !important; }
.nav-chevron { font-size: inherit !important; }
.nav-submenu { margin: -1px 0 7px 20px !important; padding: 3px 0 3px 13px !important; }
.nav-sublink { min-height: 32px !important; padding: 6px 9px !important; border-radius: 7px !important; font-size: 9.5px !important; font-weight: 650 !important; }
.nav-sublink > span { font-size: 5px !important; }
.nav-sublink.active { box-shadow: 0 7px 16px rgba(0,0,0,.15) !important; }

/* Cards and supporting information */
.panel, .reference-panel, .profile-summary-card, .company-summary-card, .reference-data-section,
.ring-stat-card, .mini-analytics-card, .filter-panel, .register-panel, .form-section, .single-detail,
.accounting-dashboard-card, .simulation-history-card {
    background: var(--flow-card) !important;
    border-color: var(--flow-line) !important;
    box-shadow: 0 8px 22px rgba(93,75,34,.055) !important;
}
.eyebrow, .page-heading .eyebrow { color: var(--flow-sky) !important; }
.page-heading p, .panel-header p { color: var(--flow-muted) !important; }
.profile-avatar, .modal-title-icon, .distribution-title-icon, .success-toast-icon, .admin-takeover-mark {
    color: #fff !important;
    background: var(--brand-gradient) !important;
}

/* Action system */
.btn-primary, .company-summary-card header button, .main-graph-card header a, .reference-section-header > a,
.distribution-action-button, .btn-agenda-generate {
    color: #fff !important;
    background: var(--brand-gradient) !important;
    border-color: transparent !important;
    box-shadow: 0 8px 18px rgba(12,52,70,.20) !important;
}
.btn-primary:hover, .company-summary-card header button:hover, .main-graph-card header a:hover,
.reference-section-header > a:hover, .distribution-action-button:hover, .btn-agenda-generate:hover {
    background: linear-gradient(135deg, #082a3a, #10455e 63%, #36a9c6) !important;
}
.btn-secondary, .btn-ghost, .btn-agendaris-sync, .btn-shift-handover, .btn-agenda-generate[data-can-cancel="true"] {
    color: var(--flow-navy) !important;
    background: #fff6d9 !important;
    border-color: #f0d98e !important;
    box-shadow: none !important;
}
.btn-secondary:hover, .btn-ghost:hover, .btn-agendaris-sync:hover, .btn-shift-handover:hover,
.btn-agenda-generate[data-can-cancel="true"]:hover { color: var(--flow-navy) !important; background: var(--flow-yellow) !important; border-color: #eabf48 !important; }
.btn-danger, .btn-danger-outline, .btn-delete { color: #fff !important; background: var(--flow-coral) !important; border-color: var(--flow-coral) !important; }
.btn-danger:hover, .btn-danger-outline:hover, .btn-delete:hover { background: #d94b59 !important; border-color: #d94b59 !important; }

/* Shared controls now use the same generous touch target as the reference. */
.btn { min-height: 37px !important; padding: 8px 14px !important; border-radius: 7px !important; font-size: 9.5px !important; font-weight: 750 !important; letter-spacing: 0; }
.icon-btn { width: 29px !important; height: 29px !important; border-radius: 7px !important; font-size: 13px !important; box-shadow: none !important; }
.menu-toggle, .topbar-icon { width: 32px !important; height: 32px !important; border-radius: 8px !important; }
.date-pill { min-height: 32px !important; padding-inline: 10px !important; border-radius: 7px !important; font-size: 9px !important; }
.topbar-bell-icon { width: 15px !important; height: 15px !important; }
.topbar-profile-trigger { min-height: 38px !important; gap: 9px !important; padding: 4px 9px 4px 5px !important; border-radius: 11px !important; }
.topbar-profile-avatar { flex-basis: 28px !important; width: 28px !important; height: 28px !important; border-radius: 9px !important; font-size: 10px !important; }
.topbar-profile-copy strong { font-size: 9px !important; }
.topbar-profile-copy small { font-size: 7px !important; }

/* Fields and data */
input, select, textarea { color: var(--flow-ink) !important; background: #fffefa !important; border-color: #ebe3d5 !important; }
input:focus, select:focus, textarea:focus { border-color: var(--flow-sky) !important; box-shadow: 0 0 0 3px rgba(70,184,211,.14) !important; }
thead, .table thead { background: #fff4d7 !important; }
thead th, .table thead th { color: #667781 !important; }
th, td { border-color: #f0e8da !important; }
tbody tr:hover, .table tbody tr:hover { background: #fff9e9 !important; }
.icon-btn, .menu-toggle, .topbar-icon, .date-pill { color: var(--flow-navy) !important; background: #fff !important; border-color: #e9e2d6 !important; }
.icon-btn:hover, .menu-toggle:hover, .topbar-icon:hover { color: #fff !important; background: var(--flow-navy) !important; border-color: var(--flow-navy) !important; }
.date-pill-time, .record-link, .text-link, .back-link, .agenda-file-link, .accounting-dashboard-link { color: var(--flow-sky) !important; }
.pagination li.active a { color: var(--flow-navy) !important; background: var(--flow-yellow) !important; border-color: var(--flow-yellow) !important; }

/* Statuses, icons, and dashboard data colors */
.section-number, .modal-section-heading > span, .distribution-section-title > div > span,
.account-name-cell > span, .vehicle-form-stepper li.complete > span, .progress-document-tab.complete > span {
    color: var(--flow-navy) !important;
    background: #fff0bf !important;
    border-color: #eed07a !important;
}
.vehicle-module-tab.active > span, .vehicle-form-stepper li.active > span, .progress-document-tab.active > span {
    color: #fff !important;
    background: var(--brand-gradient) !important;
    border-color: transparent !important;
}
.pill, .badge, .tag, .status-chip, .account-role { color: var(--flow-navy) !important; background: #fff2c7 !important; border-color: #f0d581 !important; }
.status-success, .badge-success, .is-success, .is-profit { color: var(--flow-navy) !important; background: #fff0b5 !important; border-color: #edcf72 !important; }
.status-danger, .badge-danger, .is-loss { color: #a33e49 !important; background: #fff0f1 !important; border-color: #f1c4c7 !important; }
.company-metric.orange { background: linear-gradient(135deg, #ffe889, #ffd15d) !important; }
.company-metric.navy { color: #fff !important; background: linear-gradient(135deg, #0c3446, #15546d) !important; }
.company-metric.navy * { color: #fff !important; }
.company-metric.blue, .company-metric.teal, .company-metric.green { color: #fff !important; background: linear-gradient(135deg, #54c7df, #38a9c5) !important; }
.company-metric.blue *, .company-metric.teal *, .company-metric.green * { color: #fff !important; }
.reference-chart-line { stroke: var(--flow-sky) !important; }
.reference-chart-point { fill: var(--flow-coral) !important; stroke: #fff !important; }
.reference-legend .orange, .reference-donut-legend .orange { background: var(--flow-yellow) !important; }
.reference-legend .green, .reference-donut-legend .green, .green-ring { --ring-color: var(--flow-sky) !important; background-color: var(--flow-sky) !important; }
.reference-legend .blue, .reference-donut-legend .blue { background: var(--flow-navy) !important; }
.reference-legend .purple, .reference-donut-legend .purple { background: var(--flow-coral) !important; }

/* Login and landing controls share the new palette without altering their composition. */
.login-page { background: var(--flow-canvas) !important; }
.login-brand-panel, .landing-login-header { background: var(--brand-gradient) !important; }
.login-brand-mark { color: var(--flow-navy) !important; background: var(--flow-yellow) !important; }
.login-eyebrow { color: var(--flow-sky) !important; -webkit-text-fill-color: currentColor !important; }
.login-submit, .landing-login-submit, .geo-primary-action { color: #fff !important; background: var(--brand-gradient) !important; }
.geo-landing-page { --landing-ink: var(--flow-navy); --landing-deep: var(--flow-navy-deep); --landing-slate: var(--flow-navy); --landing-rose: var(--flow-coral); --landing-peach: var(--flow-yellow); }
.geo-core-icon { background: var(--brand-gradient) !important; }
.node-distribution b { color: var(--flow-navy) !important; background: var(--flow-yellow) !important; }

/* Security register: spacious operational tables with the supplied dashboard treatment. */
.security-page-heading {
    position: relative;
    min-height: 110px;
    margin-bottom: 2px;
    padding: 16px 10px;
    overflow: hidden;
    background:
        radial-gradient(ellipse 48% 190% at 80% -90%, rgba(72,198,222,.24), transparent 63%),
        radial-gradient(ellipse 32% 150% at 100% 0%, rgba(104,224,214,.16), transparent 69%),
        linear-gradient(90deg, #fff 0%, #fbfdff 52%, #ebf8ff 100%);
    border: 0;
    border-radius: 0;
}
.security-page-heading::after {
    position: absolute;
    top: 0;
    right: 8%;
    bottom: auto;
    left: auto;
    width: 560px;
    height: 340px;
    border: 38px solid rgba(55,169,225,.13);
    border-radius: 50%;
    background: transparent;
    box-shadow: 78px 31px 0 -33px rgba(69,197,184,.12);
    content: "";
    pointer-events: none;
    transform: rotate(-18deg);
}
.security-page-heading > * { position: relative; z-index: 1; }
.security-page-heading .eyebrow { color: #168faa !important; }
.security-page-heading h1 { margin-bottom: 3px; color: #0b3148 !important; font-size: clamp(23px, 2.1vw, 31px); }
.security-page-heading p:not(.eyebrow) { max-width: 620px; color: #68819a !important; font-size: 11px; }

.security-distribution-tabs {
    gap: 10px !important;
    margin: 12px 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
}
.security-distribution-tabs .progress-document-tab {
    min-height: 72px;
    padding: 12px 14px !important;
    color: var(--flow-ink) !important;
    background: #f4fbfe !important;
    border: 1px solid #ccebf3 !important;
    border-radius: 11px !important;
    box-shadow: none !important;
}
.security-distribution-tabs .progress-document-tab.active {
    background: #f0fbfe !important;
    border-color: #50c2dc !important;
    box-shadow: 0 7px 18px rgba(25,120,145,.09) !important;
}
.security-distribution-tabs .progress-document-tab > span {
    color: var(--flow-navy) !important;
    background: #dff4fa !important;
    border-color: transparent !important;
    box-shadow: none !important;
}
.security-distribution-tabs .progress-document-tab.active > span { color: #fff !important; background: linear-gradient(135deg, #087a9b, #33b7d1) !important; }
.security-distribution-tabs .progress-document-tab strong { color: var(--flow-ink) !important; font-size: 11px !important; }
.security-distribution-tabs .progress-document-tab small { color: #6f8390 !important; font-size: 9px !important; }

/* Tata letak Security dipertahankan; warna, ukuran, ikon, dan aksi mengikuti filter global. */
.security-filter-panel { margin-top: 12px; }

.security-register-panel {
    margin-top: 14px;
    padding: 7px !important;
    overflow: hidden;
    background: #fff !important;
    border: 1px solid #e2edf2 !important;
    border-top: 0 !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 24px rgba(29,82,106,.06) !important;
}
.security-register-panel .table-wrap {
    overflow: auto;
    border: 1px solid #e3edf2;
    border-radius: 9px;
}
.security-register-panel table { min-width: 920px; }
.security-register-panel th {
    height: 43px;
    letter-spacing: .05px !important;
    text-transform: none !important;
}
.security-register-panel td {
    min-height: 0;
    padding-top: 11px !important;
    padding-bottom: 11px !important;
    color: #658093 !important;
    vertical-align: middle !important;
}
.security-register-panel td strong { color: var(--flow-ink) !important; font-size: 11px; }
.security-register-panel tbody tr:nth-child(even) { background: #fcfeff !important; }
.security-register-panel tbody tr:hover { background: #f3fbfd !important; }
.security-register-panel .date-cell strong { color: var(--flow-ink) !important; }
.security-register-panel .date-cell span { margin-top: 3px; color: #91a0aa !important; }
.security-register-panel .distribution-action-button {
    min-height: 39px;
    padding-inline: 16px;
    border-radius: 10px;
    font-size: 10px;
}
.security-register-panel .table-list-footer {
    padding: 11px 7px 4px !important;
    color: #72818c;
}
.security-register-panel .table-length-form select { min-height: 37px; background: #fff !important; }
.security-type-chip,
.security-expedition-chip {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    max-width: 130px;
    padding: 4px 8px;
    overflow: hidden;
    border-radius: 999px;
    font-size: 7.5px;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.security-type-chip { color: #177f9e; background: #e5f6fb; }
.security-expedition-chip { color: #1881a0; background: #e4f7fb; }
.security-register-panel .pickup-status.completed { color: #147d98 !important; background: #e4f5fa !important; border-color: #bfe6f0 !important; }
.security-register-panel .pickup-status.pending { color: #9d7416 !important; background: #fff4cb !important; border-color: #f2dc8a !important; }

@media (max-width: 700px) {
    .security-page-heading { min-height: 96px; padding: 14px; }
    .security-page-heading::after { top: -155px; right: -220px; left: auto; opacity: .42; }
    .security-distribution-tabs { gap: 9px !important; overflow-x: auto; }
    .security-distribution-tabs .progress-document-tab { flex: 0 0 220px; }
    .security-register-panel { padding: 7px !important; }
}

/* Distribusi Dokumen: the page follows the supplied operational dashboard reference. */
.distribution-page {
    --sidebar: 247px;
    background:
        radial-gradient(circle at 100% 92%, rgba(75,203,220,.22) 0 13%, transparent 13.2%),
        radial-gradient(circle at 92% 100%, rgba(255,211,90,.29) 0 14%, transparent 14.2%),
        linear-gradient(135deg, #f7fbff, #f4fbfd 64%, #edfaff) !important;
}
.distribution-page .content-shell { background: transparent !important; }
.distribution-page .sidebar {
    padding: 14px 13px !important;
    background: linear-gradient(160deg, #123d72 0%, #0b5885 48%, #0c6f92 100%) !important;
    box-shadow: 7px 0 26px rgba(12,50,87,.23) !important;
}
.distribution-page .brand.brand-jaksa { min-height: 68px !important; padding: 0 8px 18px !important; }
.distribution-page .brand-jaksa-wordmark { width: 153px !important; filter: brightness(0) invert(1) drop-shadow(0 3px 7px rgba(0,0,0,.14)) !important; }
.distribution-page .brand-jaksa-expansion { color: rgba(245,250,255,.83) !important; font-size: 6px !important; }
.distribution-page .brand-jaksa-expansion b { color: #fff !important; -webkit-text-fill-color: #fff !important; }
.distribution-page .brand.brand-jaksa::before { position: absolute; top: 27px; right: 24px; width: 10px; height: 13px; background: #ffd565; clip-path: polygon(50% 0, 100% 100%, 0 100%); content: ""; pointer-events: none; }
.distribution-page .nav-label { color: rgba(231,246,254,.72) !important; font-size: 8px !important; }
.distribution-page .nav-link { min-height: 45px !important; margin-bottom: 4px !important; padding: 8px 10px !important; color: rgba(247,252,255,.92) !important; font-size: 11px !important; }
.distribution-page .nav-icon,
.distribution-page .nav-link .nav-icon {
    flex-basis: 33px !important;
    width: 33px !important;
    height: 33px !important;
    color: #fff !important;
    background: rgba(154,216,251,.18) !important;
    border: 1px solid rgba(207,240,255,.08) !important;
    border-radius: 9px !important;
}
.distribution-page .image-nav-icon::before { width: 19px !important; height: 19px !important; }
.distribution-page .nav-link.active { color: #fff !important; background: linear-gradient(100deg, #2682d1, #35c7c2 78%) !important; box-shadow: 0 7px 16px rgba(4,28,68,.24) !important; }
.distribution-page .nav-link.active::after { display: none !important; }
.distribution-page .nav-parent.active { color: #fff !important; background: linear-gradient(100deg, #287ad0, #47cbbd 100%) !important; box-shadow: inset 3px 0 0 #76dbff, 0 7px 16px rgba(4,28,68,.22) !important; }
.distribution-page .nav-parent.active .nav-icon { color: #fff !important; background: rgba(255,255,255,.18) !important; box-shadow: none !important; }
.distribution-page .nav-submenu { margin: 1px 0 7px 24px !important; padding: 4px 0 4px 13px !important; border-left-color: rgba(143,224,234,.42) !important; }
.distribution-page .nav-sublink { min-height: 34px !important; padding: 6px 9px !important; color: rgba(238,249,253,.89) !important; font-size: 9.5px !important; }
.distribution-page .nav-sublink > span { color: #67d7dc !important; }
.distribution-page .nav-sublink.active { color: #fff !important; background: linear-gradient(100deg, #237aca, #3aadd0 64%, #ffd45d) !important; box-shadow: 0 6px 13px rgba(4,36,75,.24) !important; }
.distribution-page .nav-sublink.active > span { color: #fff !important; }
.distribution-page .nav-link-muted .nav-icon { color: #fff !important; background: rgba(154,216,251,.18) !important; border-color: rgba(207,240,255,.08) !important; }
.distribution-page .nav-status-dot { background: #ffd562 !important; box-shadow: none !important; }
.distribution-page .sidebar-pattern { color: rgba(255,255,255,.055) !important; }

.distribution-page .topbar {
    min-height: 60px !important;
    padding-inline: 22px !important;
    background: rgba(255,255,255,.92) !important;
    box-shadow: 0 5px 18px rgba(15,55,86,.10) !important;
}
.distribution-page .topbar::after { display: none !important; }
.distribution-page .topbar-title span { color: #547096 !important; font-size: 8px !important; }
.distribution-page .topbar-title strong { color: #082b60 !important; font-size: 15px !important; }
.distribution-page .menu-toggle { display: grid !important; width: 45px !important; height: 45px !important; margin-right: 15px !important; color: #0a6694 !important; background: #e6f6fe !important; border: 0 !important; border-radius: 50% !important; box-shadow: 0 5px 15px rgba(18,123,168,.14) !important; }
.distribution-page .topbar-icon { width: 43px !important; height: 43px !important; color: #12396b !important; border-color: #e4edf5 !important; border-radius: 50% !important; }
.distribution-page .date-pill { min-height: 43px !important; color: #214675 !important; border-color: #e4edf5 !important; border-radius: 14px !important; }
.distribution-page .topbar-profile-trigger { min-height: 43px !important; border-color: #e4edf5 !important; border-radius: 14px !important; }
.distribution-page .topbar-profile-avatar { color: #fff !important; background: linear-gradient(135deg, #df3d62, #ad2657) !important; border-radius: 50% !important; }
.distribution-page .main-content { max-width: none !important; padding: 23px 28px 22px !important; }
.distribution-page .footer { padding: 10px 28px !important; color: #6681a0 !important; background: rgba(255,255,255,.68) !important; }

.distribution-page .distribution-heading {
    min-height: 75px !important;
    margin: -23px -28px 14px !important;
    padding: 23px 28px 12px !important;
    background:
        radial-gradient(ellipse 52% 180% at 68% -90%, rgba(72,198,222,.27), transparent 63%),
        radial-gradient(ellipse 35% 140% at 94% 0%, rgba(104,224,214,.18), transparent 69%),
        linear-gradient(90deg, #ffffff 0%, #fbfdff 50%, #eaf8ff 100%) !important;
}
.distribution-page .distribution-heading::after { display: none !important; }
.distribution-page .distribution-heading .eyebrow { color: #17668d !important; font-size: 9px !important; }
.distribution-page .distribution-heading h1 { color: #092c60 !important; font-size: clamp(25px, 2.2vw, 34px) !important; letter-spacing: -.8px !important; }
.distribution-page .security-filter-panel { margin-top: 0 !important; }
.distribution-page .distribution-filter-form { grid-template-columns: minmax(240px,1.5fr) minmax(160px,.72fr) minmax(160px,.72fr) var(--system-filter-height) max-content !important; gap: 10px !important; }
.distribution-page .security-filter-panel .filter-actions { gap: 6px !important; }
.distribution-page .security-filter-panel .list-order-filter { width: var(--system-filter-height) !important; }

.distribution-page .security-register-panel {
    min-height: 0 !important;
    margin-top: 15px !important;
    padding: 10px !important;
    overflow: hidden !important;
    border: 1px solid #d6e4ee !important;
    border-radius: 15px !important;
    background: #fff !important;
    box-shadow: 0 7px 20px rgba(21,78,133,.07) !important;
}
.distribution-page .security-register-panel .table-wrap {
    overflow: auto !important;
    border: 0 !important;
    border-radius: 10px 10px 0 0 !important;
}
.distribution-page .security-register-panel table { min-width: 1040px; }
.distribution-page .security-register-panel th { height: 48px !important; color: #fff !important; }
.distribution-page .security-register-panel td { color: #55749b !important; }
.distribution-page .security-register-panel tbody tr:hover { background: #f1fbff !important; }
.distribution-page .security-register-panel .empty-state { min-height: 205px; padding: 48px 20px 24px !important; }
.distribution-page .security-register-panel .empty-state > span { display: grid; width: 66px; height: 66px; margin: 0 auto; place-items: center; color: #1877bd !important; background: radial-gradient(circle at 70% 30%, #d8f3ff, #eaf8ff 66%); border-radius: 50%; font-size: 0 !important; }
.distribution-page .security-register-panel .empty-state > span::before { content: "☷"; font-size: 38px; font-weight: 900; line-height: 1; transform: rotate(180deg); }
.distribution-page .security-register-panel .empty-state strong { margin-top: 10px !important; color: #0a346a !important; font-size: 12px !important; }
.distribution-page .security-register-panel .empty-state p { color: #6684ad !important; font-size: 9px !important; }
.distribution-page .security-register-panel .table-list-footer { min-height: 57px; padding: 12px 20px !important; border-top: 1px solid #dfebf3; background: #fff !important; }
.distribution-page .security-register-panel .table-length-form { color: #315684 !important; font-size: 9px !important; }
.distribution-page .security-register-panel .table-length-form select { min-height: 32px !important; color: #0d3970 !important; border-color: #dce8f3 !important; border-radius: 8px !important; }

@media (max-width: 1000px) {
    .distribution-page .distribution-filter-form { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .distribution-page .distribution-filter-form .search-group { grid-column: span 2; }
}
@media (max-width: 700px) {
    .distribution-page .main-content { padding: 16px !important; }
    .distribution-page .distribution-heading { margin: -16px -16px 12px !important; padding: 18px 16px 12px !important; }
    .distribution-page .security-distribution-tabs .progress-document-tab { flex-basis: 260px !important; }
}

/* Final global overrides: these are deliberately last so legacy page modules inherit the same palette. */
body:not(.landing-page):not(.login-page),
body:not(.landing-page) .content-shell { background: var(--flow-canvas) !important; }
.sidebar { background: linear-gradient(165deg, #123f7e 0%, #0d5f90 55%, #0a718c 100%) !important; }
.topbar::after { background: linear-gradient(90deg, transparent, #2b8cea 25%, #45c5b8 57%, #ffd15e 78%, transparent) !important; }
.nav-link.active { color: #fff !important; background: linear-gradient(102deg, #247fd2, #42c7bd) !important; }
.nav-link.active .nav-icon,
.nav-parent.active .nav-icon { color: #fff !important; background: rgba(255,255,255,.18) !important; }
.nav-parent.active { background: linear-gradient(102deg, rgba(37,126,209,.80), rgba(65,195,186,.78)) !important; box-shadow: inset 3px 0 0 #8ce5f0, 0 7px 16px rgba(4,38,88,.16) !important; }
.nav-sublink.active { color: #fff !important; background: linear-gradient(102deg, #237ed1, #2d9fc2 65%, #ffd05d) !important; }
.nav-status-dot { background: #ffd15e !important; box-shadow: 0 0 0 4px rgba(255,209,94,.16) !important; }
.panel, .reference-panel, .profile-summary-card, .company-summary-card, .reference-data-section,
.ring-stat-card, .mini-analytics-card, .filter-panel, .register-panel, .form-section, .single-detail,
.accounting-dashboard-card, .simulation-history-card { border-color: #dce9f4 !important; box-shadow: 0 7px 20px rgba(21,78,133,.07) !important; }
.btn-primary, .company-summary-card header button, .main-graph-card header a, .reference-section-header > a,
.distribution-action-button, .btn-agenda-generate { color: #fff !important; background: linear-gradient(135deg, #237bd1, #45c5b8) !important; border-color: transparent !important; box-shadow: 0 7px 16px rgba(29,113,192,.20) !important; }
.btn-secondary, .btn-ghost, .btn-agendaris-sync, .btn-shift-handover, .btn-agenda-generate[data-can-cancel="true"] { color: #2162a4 !important; background: #f5fbff !important; border-color: #c8e4f4 !important; }
.btn-danger, .btn-danger-outline, .btn-delete { color: #fff !important; background: linear-gradient(135deg, #ed6c7f, #df4561) !important; border-color: transparent !important; }
input, select, textarea { color: #183d6d !important; background: #fff !important; border-color: #d5e6f3 !important; }
input:focus, select:focus, textarea:focus { border-color: #2b8cea !important; box-shadow: 0 0 0 3px rgba(43,140,234,.13) !important; }
th, td { border-color: #deebf5 !important; }
tbody tr:hover, .table tbody tr:hover { background: #f1fbff !important; }
.icon-btn, .menu-toggle, .topbar-icon, .date-pill { color: #1d62a5 !important; background: #fff !important; border-color: #d8e8f3 !important; }
.icon-btn:hover, .menu-toggle:hover, .topbar-icon:hover { color: #fff !important; background: linear-gradient(135deg, #237bd1, #45c5b8) !important; border-color: transparent !important; }
.date-pill-time, .record-link, .text-link, .back-link, .agenda-file-link, .accounting-dashboard-link { color: #2586d8 !important; }
.pagination li.active a { color: #fff !important; background: linear-gradient(135deg, #237bd1, #45c5b8) !important; border-color: transparent !important; }
.pill, .badge, .tag, .status-chip, .account-role { color: #176cae !important; background: #e8f6ff !important; border-color: #c6e6f7 !important; }
.status-success, .badge-success, .is-success, .is-profit { color: #177f79 !important; background: #e6faf5 !important; border-color: #bdeae0 !important; }
.status-danger, .badge-danger, .is-loss { color: #b44257 !important; background: #fff0f3 !important; border-color: #f4c9d1 !important; }
.section-number, .modal-section-heading > span, .distribution-section-title > div > span,
.account-name-cell > span, .vehicle-form-stepper li.complete > span, .progress-document-tab.complete > span { color: #1765ad !important; background: #e4f4ff !important; border-color: #bfdef3 !important; }
.vehicle-module-tab.active > span, .vehicle-form-stepper li.active > span, .progress-document-tab.active > span { color: #fff !important; background: linear-gradient(135deg, #237bd1, #45c5b8) !important; }

/* Decorative backdrop for Distribusi Dokumen.  It is purely visual and sits behind every control. */
.distribution-page { overflow-x: hidden; }
body.distribution-page .content-shell {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background:
        radial-gradient(ellipse 38% 24% at 90% 108%, rgba(255,205,88,.28) 0 34%, transparent 34.5%),
        radial-gradient(ellipse 34% 28% at 72% 106%, rgba(65,198,196,.18) 0 37%, transparent 37.5%),
        linear-gradient(145deg, #f8fbff 0%, #f3faff 58%, #edf9ff 100%) !important;
}
body.distribution-page .main-content { background: transparent !important; }
.distribution-page .content-shell::before,
.distribution-page .content-shell::after {
    position: absolute;
    z-index: 0;
    display: block;
    border-radius: 50%;
    content: "";
    pointer-events: none;
}
.distribution-page .content-shell::before {
    top: 92px;
    right: -235px;
    width: 510px;
    height: 510px;
    background: radial-gradient(circle, rgba(96,211,225,.18) 0 42%, rgba(96,211,225,.07) 42.5% 58%, transparent 58.5%);
}
.distribution-page .content-shell::after {
    right: -130px;
    bottom: -215px;
    width: 570px;
    height: 410px;
    background: linear-gradient(135deg, rgba(35,160,221,.20), rgba(63,202,190,.15) 56%, rgba(255,205,88,.28));
    transform: rotate(-16deg);
}
.distribution-page .topbar,
.distribution-page .main-content,
.distribution-page .footer { position: relative; z-index: 1; }
.distribution-page .sidebar { overflow: hidden !important; }
.distribution-page .sidebar::after {
    position: absolute;
    right: -95px;
    bottom: -110px;
    width: 305px;
    height: 245px;
    background:
        radial-gradient(ellipse at 52% 62%, transparent 0 35%, rgba(69,197,184,.74) 35.6% 54%, transparent 54.6%),
        radial-gradient(ellipse at 46% 75%, rgba(49,155,211,.68) 0 49%, transparent 49.5%);
    border-radius: 50%;
    content: "";
    opacity: .78;
    pointer-events: none;
}

.distribution-page .distribution-heading { position: relative; overflow: hidden; }
.distribution-page .distribution-heading::before {
    position: absolute;
    top: -255px;
    right: 8%;
    width: 620px;
    height: 390px;
    border: 42px solid rgba(55,169,225,.13);
    border-radius: 50%;
    box-shadow: 86px 34px 0 -37px rgba(69,197,184,.12);
    content: "";
    transform: rotate(-18deg);
    pointer-events: none;
}
.distribution-page .distribution-heading > * { position: relative; z-index: 1; }
@media (max-width: 700px) {
    .distribution-page .content-shell::before { right: -270px; opacity: .65; }
    .distribution-page .distribution-heading::before { right: -260px; opacity: .72; }
}

/* Shared table and navigation treatment, matched to Distribusi Dokumen. */
.sidebar { background: linear-gradient(160deg, #123f7e 0%, #0b5885 48%, #0c6f92 100%) !important; }
.nav-link,
.nav-sublink { color: rgba(247,252,255,.92) !important; }
.nav-icon,
.nav-link .nav-icon {
    color: #fff !important;
    background: rgba(154,216,251,.18) !important;
    border: 1px solid rgba(207,240,255,.08) !important;
}
.nav-link:hover { color: #fff !important; background: rgba(125,213,226,.16) !important; }
.nav-link.active,
.nav-parent.active { color: #fff !important; background: linear-gradient(100deg, #287ad0, #47cbbd 100%) !important; }
.nav-link.active .nav-icon,
.nav-parent.active .nav-icon { color: #fff !important; background: rgba(255,255,255,.18) !important; box-shadow: none !important; }
.nav-sublink:hover { color: #fff !important; background: rgba(126,216,229,.14) !important; }
.nav-sublink.active { color: #fff !important; background: linear-gradient(100deg, #237aca, #3aadd0 64%, #ffd45d) !important; }

.register-panel,
.agendaris-table-panel,
.progress-document-panel { border-color: #d8e7f2 !important; }
.table-list-footer { background: #fff !important; border-top-color: #dce9f3 !important; }

/* Apply the Distribusi Dokumen backdrop to every in-system module. */
body:not(.landing-page):not(.login-page):not(.distribution-page) .content-shell {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background:
        radial-gradient(ellipse 38% 24% at 90% 108%, rgba(255,205,88,.25) 0 34%, transparent 34.5%),
        radial-gradient(ellipse 34% 28% at 72% 106%, rgba(65,198,196,.16) 0 37%, transparent 37.5%),
        linear-gradient(145deg, #f8fbff 0%, #f3faff 58%, #edf9ff 100%) !important;
}
body:not(.landing-page):not(.login-page):not(.distribution-page) .content-shell::before,
body:not(.landing-page):not(.login-page):not(.distribution-page) .content-shell::after {
    position: absolute;
    z-index: 0;
    display: block;
    border-radius: 50%;
    content: "";
    pointer-events: none;
}
body:not(.landing-page):not(.login-page):not(.distribution-page) .content-shell::before {
    top: 70px;
    right: -235px;
    width: 510px;
    height: 510px;
    background: radial-gradient(circle, rgba(96,211,225,.16) 0 42%, rgba(96,211,225,.06) 42.5% 58%, transparent 58.5%);
}
body:not(.landing-page):not(.login-page):not(.distribution-page) .content-shell::after {
    right: -130px;
    bottom: -215px;
    width: 570px;
    height: 410px;
    background: linear-gradient(135deg, rgba(35,160,221,.18), rgba(63,202,190,.13) 56%, rgba(255,205,88,.25));
    transform: rotate(-16deg);
}
body:not(.landing-page):not(.login-page):not(.distribution-page) .topbar,
body:not(.landing-page):not(.login-page):not(.distribution-page) .main-content,
body:not(.landing-page):not(.login-page):not(.distribution-page) .footer { position: relative; z-index: 1; }
body:not(.landing-page):not(.login-page):not(.distribution-page) .main-content { background: transparent !important; }
body:not(.landing-page):not(.login-page):not(.distribution-page) .footer { background: rgba(255,255,255,.68) !important; }

body:not(.landing-page):not(.login-page) .sidebar { overflow: hidden !important; }
body:not(.landing-page):not(.login-page):not(.distribution-page) .sidebar::after {
    position: absolute;
    right: -95px;
    bottom: -110px;
    width: 305px;
    height: 245px;
    background:
        radial-gradient(ellipse at 52% 62%, transparent 0 35%, rgba(69,197,184,.74) 35.6% 54%, transparent 54.6%),
        radial-gradient(ellipse at 46% 75%, rgba(49,155,211,.68) 0 49%, transparent 49.5%);
    border-radius: 50%;
    content: "";
    opacity: .78;
    pointer-events: none;
}

body:not(.landing-page):not(.login-page) .page-heading:not(.security-page-heading):not(.distribution-heading) {
    position: relative;
    min-height: 106px;
    margin: -16px -18px 16px;
    padding: 21px 18px 14px;
    overflow: hidden;
    background:
        radial-gradient(ellipse 48% 190% at 80% -90%, rgba(72,198,222,.24), transparent 63%),
        radial-gradient(ellipse 32% 150% at 100% 0%, rgba(104,224,214,.16), transparent 69%),
        linear-gradient(90deg, #fff 0%, #fbfdff 52%, #ebf8ff 100%);
}
body:not(.landing-page):not(.login-page) .page-heading:not(.security-page-heading):not(.distribution-heading)::after {
    position: absolute;
    top: -190px;
    right: 13%;
    width: 500px;
    height: 310px;
    border: 36px solid rgba(55,169,225,.11);
    border-radius: 50%;
    box-shadow: 72px 28px 0 -32px rgba(69,197,184,.10);
    content: "";
    transform: rotate(-18deg);
    pointer-events: none;
}
body:not(.landing-page):not(.login-page) .page-heading:not(.security-page-heading):not(.distribution-heading) > * { position: relative; z-index: 1; }

.filter-actions .btn-secondary {
    color: #fff !important;
    background: linear-gradient(135deg, #237bd1, #45c5b8) !important;
    border-color: transparent !important;
    box-shadow: 0 7px 16px rgba(29,113,192,.20) !important;
}
.filter-actions .btn-ghost { color: #2162a4 !important; background: #f5fbff !important; border-color: #c8e4f4 !important; }
.heading-actions > .btn-primary,
.heading-button-group .btn-primary {
    color: #fff !important;
    background: linear-gradient(135deg, #ffbd45, #ffa828) !important;
    border-color: transparent !important;
    box-shadow: 0 8px 16px rgba(238,154,27,.27) !important;
}

/* Headings that do not use page-heading (dashboard and account modules) receive the same backdrop. */
body:not(.landing-page):not(.login-page) .dashboard-intro,
body:not(.landing-page):not(.login-page) .account-heading,
body:not(.landing-page):not(.login-page) .heading-actions:not(.page-heading):not(.distribution-heading) {
    position: relative;
    min-height: 96px;
    margin-bottom: 16px;
    padding: 18px;
    overflow: hidden;
    background:
        radial-gradient(ellipse 48% 190% at 80% -90%, rgba(72,198,222,.22), transparent 63%),
        radial-gradient(ellipse 32% 150% at 100% 0%, rgba(104,224,214,.14), transparent 69%),
        linear-gradient(90deg, #fff 0%, #fbfdff 52%, #ebf8ff 100%);
    border: 1px solid #dceaf4;
    border-radius: 14px;
}
body:not(.landing-page):not(.login-page) .dashboard-intro::after,
body:not(.landing-page):not(.login-page) .account-heading::after,
body:not(.landing-page):not(.login-page) .heading-actions:not(.page-heading):not(.distribution-heading)::after {
    position: absolute;
    top: -180px;
    right: 7%;
    width: 440px;
    height: 290px;
    border: 32px solid rgba(55,169,225,.10);
    border-radius: 50%;
    box-shadow: 64px 26px 0 -28px rgba(69,197,184,.10);
    content: "";
    transform: rotate(-18deg);
    pointer-events: none;
}
body:not(.landing-page):not(.login-page) .dashboard-intro > *,
body:not(.landing-page):not(.login-page) .account-heading > *,
body:not(.landing-page):not(.login-page) .heading-actions:not(.page-heading):not(.distribution-heading) > * { position: relative; z-index: 1; }

/* Rekap komposisi SDM Kanwil: pita warna khusus, bukan gradasi tabel global. */
#sdmCompositionSummaryDialog .kanwil-sdm-summary-table thead {
    background: linear-gradient(90deg, #2a4f7f 0%, #294e7d 71%, #149da9 71%, #27b2b0 94%, #ffd365 94% 100%) !important;
}
#sdmCompositionSummaryDialog .kanwil-sdm-summary-table thead tr,
#sdmCompositionSummaryDialog .kanwil-sdm-summary-table thead th {
    border: 0 !important;
    background: transparent !important;
}
#sdmCompositionSummaryDialog .kanwil-sdm-summary-table thead th:last-child {
    color: #172b3f !important;
}

/* Accounting has several dedicated components; all of them use the shared Distribusi palette. */
.accounting-page .accounting-menu-card {
    --accounting-tone: #237bd1;
    --accounting-tint: #e8f5ff;
    border-top-color: #45c5b8 !important;
    background: #fff !important;
    box-shadow: 0 7px 20px rgba(21,78,133,.07) !important;
}
.accounting-page .accounting-menu-card.is-rka { --accounting-tone: #237bd1; --accounting-tint: #e8f5ff; }
.accounting-page .accounting-menu-card.is-export { --accounting-tone: #239e9a; --accounting-tint: #e8faf6; }
.accounting-page .accounting-menu-card.is-source { --accounting-tone: #ce9018; --accounting-tint: #fff7df; }
.accounting-page .accounting-menu-icon { color: #fff !important; background: linear-gradient(135deg, #237bd1, #45c5b8) !important; }
.accounting-page .accounting-menu-card.is-source .accounting-menu-icon { color: #77500b !important; background: #ffe7a0 !important; }
.accounting-page .accounting-menu-card>b,
.accounting-page .accounting-menu-card small { color: var(--accounting-tone) !important; }

.accounting-page .lr-report-tabs { background: #edf8ff !important; border-color: #c8e3f3 !important; }
.accounting-page .lr-report-tab:hover { background: #f6fcff !important; border-color: #b8deef !important; }
.accounting-page .lr-report-tab.is-active { border-color: #45c5b8 !important; box-shadow: 0 5px 14px rgba(31,118,172,.10) !important; }
.accounting-page .lr-report-tab-badge,
.accounting-page .export-document-icon,
.accounting-page .lr-settings-icon { background: linear-gradient(135deg, #237bd1, #45c5b8) !important; }
.accounting-page .lr-report-tab:not(.is-active) .lr-report-tab-badge { color: #2770ac !important; background: #e4f3ff !important; }
.accounting-page .lr-report-panel,
.accounting-page .export-document-panel,
.accounting-page .simulation-history { border-top-color: #45c5b8 !important; }
.accounting-page .lr-report-header,
.accounting-page .simulation-history-heading { background: linear-gradient(100deg, #f0f9ff, #fff 56%, #effcf9) !important; border-bottom-color: #dce9f3 !important; }
.accounting-page .lr-report-year,
.accounting-page .simulation-history-count { color: #187f7d !important; background: #e7faf5 !important; border-color: #bce8df !important; }
.accounting-page .lr-report-table .lr-row-major > * { background: #eff8ff !important; }
.accounting-page .lr-report-table .lr-row-subtotal > * { background: #edf6ff !important; }
.accounting-page .lr-report-table .lr-row-profit > * { border-top-color: #0a65d2 !important; background: #e7f2ff !important; }
.accounting-page .lr-report-table .lr-row-detail-total > * { background: #e8f7ff !important; }
.accounting-page .lr-group-chevron { color: #237bd1 !important; background: #e5f4ff !important; }
.accounting-page .lr-percent-expand:hover,
.accounting-page .lr-percent-expand:focus-visible { color: #176cae !important; background: #e7f5ff !important; }
.accounting-page .lr-percentage-detail { background: linear-gradient(90deg, #eef9ff, #f8fffd) !important; border-top-color: #a8dbe9 !important; border-bottom-color: #cfe8ef !important; }
.accounting-page .lr-percentage-detail strong { color: #176cae !important; }

.accounting-page .simulation-intro-card { border-top-color: #45c5b8 !important; background: linear-gradient(105deg, #edf9ff 0%, #fff 63%) !important; }
.accounting-page .simulation-table th { color: #fff !important; background: transparent !important; }
.accounting-page .simulation-table tbody tr:hover { background: #f1fbff !important; }
.accounting-page .simulation-period-badge { color: #2162a4 !important; border-color: #c9e2f1 !important; background: #f5fbff !important; }
.accounting-page .simulation-period-badge strong { color: #17817d !important; }
.accounting-page .simulation-stat-info { color: #2162a4 !important; border-color: #c9e2f1 !important; background: #eef8ff !important; }
.accounting-page .simulation-stat-success { color: #177f79 !important; border-color: #bdeae0 !important; background: #e6faf5 !important; }
.accounting-page .simulation-stat-warning { color: #9a6a12 !important; border-color: #f0d99d !important; background: #fff8e6 !important; }

.accounting-page .export-document-intro { background: linear-gradient(100deg, #f0f9ff, #fff 58%, #effcf9) !important; border-bottom-color: #dce9f3 !important; }
.accounting-page .export-unit-toolbar,
.accounting-page .export-document-note,
.accounting-page .formula-builder,
.accounting-page .formula-advanced { border-color: #d5e7f2 !important; background: #f7fbff !important; }
.accounting-page .export-document-note { border-left-color: #45c5b8 !important; }
.accounting-page .export-unit-grid input:checked + span { border-color: #45c5b8 !important; background: #ecfaf6 !important; box-shadow: 0 0 0 2px rgba(69,197,184,.09) !important; }
.accounting-page .export-unit-grid input:checked + span i { color: #fff !important; background: #2faaa2 !important; border-color: #2faaa2 !important; }
.accounting-page .export-unit-grid input:focus-visible + span { outline-color: #2b8cea !important; }

.accounting-page .lr-lob-picker[open] > summary { border-color: #45c5b8 !important; box-shadow: 0 0 0 3px rgba(69,197,184,.12) !important; }
.accounting-page .lr-lob-options label:hover { background: #eef9ff !important; }
.accounting-page .lr-lob-options input,
.accounting-page .formula-active-check input { accent-color: #237bd1 !important; }
.accounting-page .lr-rka-editable td[data-rka-calculated=true] { background: #eaf6ff !important; }

/* Progress Dokumen inherits the completed Security distribution language. */
.progress-page .topbar {
    min-height: 60px !important;
    padding-inline: 22px !important;
    background: rgba(255,255,255,.92) !important;
    box-shadow: 0 5px 18px rgba(15,55,86,.10) !important;
}
.progress-page .topbar-title span { color: #547096 !important; font-size: 8px !important; }
.progress-page .topbar-title strong { color: #082b60 !important; font-size: 15px !important; }
.progress-page .menu-toggle {
    display: grid !important; width: 45px !important; height: 45px !important; margin-right: 15px !important;
    color: #0a6694 !important; background: #e6f6fe !important; border: 0 !important; border-radius: 50% !important;
    box-shadow: 0 5px 15px rgba(18,123,168,.14) !important;
}
.progress-page .topbar-icon { width: 43px !important; height: 43px !important; color: #12396b !important; border-color: #e4edf5 !important; border-radius: 50% !important; }
.progress-page .date-pill,
.progress-page .topbar-profile-trigger { min-height: 43px !important; border-color: #e4edf5 !important; border-radius: 14px !important; }
.progress-page .topbar-profile-avatar { color: #fff !important; background: linear-gradient(135deg, #df3d62, #ad2657) !important; border-radius: 50% !important; }
.progress-page .main-content { max-width: none !important; padding: 23px 28px 22px !important; }
.progress-page .footer { padding: 10px 28px !important; color: #6681a0 !important; background: rgba(255,255,255,.68) !important; }

.progress-page .distribution-heading {
    min-height: 112px !important; margin: -23px -28px 14px !important; padding: 23px 28px 15px !important;
    background:
        radial-gradient(ellipse 52% 180% at 68% -90%, rgba(72,198,222,.27), transparent 63%),
        radial-gradient(ellipse 35% 140% at 94% 0%, rgba(104,224,214,.18), transparent 69%),
        linear-gradient(90deg, #fff 0%, #fbfdff 50%, #eaf8ff 100%) !important;
}
.progress-page .distribution-heading::after { display: none !important; }
.progress-page .distribution-heading .eyebrow { color: #17668d !important; font-size: 9px !important; }
.progress-page .distribution-heading h1 { color: #092c60 !important; font-size: clamp(25px, 2.2vw, 34px) !important; letter-spacing: -.8px !important; }
.progress-page .distribution-heading p:not(.eyebrow) { color: #6280aa !important; }
.progress-page .distribution-heading .heading-button-group { gap: 10px !important; }
.progress-page .distribution-heading .btn-primary {
    min-height: 47px !important; padding-inline: 22px !important; background: linear-gradient(135deg, #ffbd45, #ffa828) !important;
    border-color: transparent !important; border-radius: 12px !important; box-shadow: 0 8px 16px rgba(238,154,27,.27) !important; font-size: 10px !important;
}
.progress-page .distribution-heading .btn-secondary {
    min-height: 47px !important; color: #276397 !important; background: rgba(255,255,255,.86) !important;
    border-color: #cbe5f6 !important; border-radius: 12px !important; box-shadow: 0 5px 13px rgba(24,95,144,.08) !important;
}

.progress-page .security-filter-panel { margin-top: 0 !important; }
.progress-page .agendaris-filter-form { gap: 10px !important; }
.progress-page .security-filter-panel .filter-actions { gap: 6px !important; }
.progress-page .security-filter-panel .list-order-filter { width: var(--system-filter-height) !important; }

.progress-page .security-register-panel {
    min-height: 306px; margin-top: 15px !important; padding: 0 !important; overflow: hidden !important; border: 0 !important; border-radius: 15px !important;
    background: #fff !important; box-shadow: 0 9px 21px rgba(20,70,109,.11) !important;
}
.progress-page .security-register-panel .table-wrap { border: 0 !important; border-radius: 0 !important; }
.progress-page .security-register-panel table { min-width: 1040px; }
.progress-page .security-register-panel th { height: 48px !important; color: #fff !important; }
.progress-page .security-register-panel td { color: #55749b !important; }
.progress-page .security-register-panel tbody tr:hover { background: #f1fbff !important; }
.progress-page .security-register-panel .table-list-footer { min-height: 57px; padding: 12px 20px !important; border-top: 1px solid #dfebf3; background: #fff !important; }
.progress-page .security-register-panel .table-length-form { color: #315684 !important; font-size: 9px !important; }
.progress-page .security-register-panel .table-length-form select { min-height: 32px !important; color: #0d3970 !important; border-color: #dce8f3 !important; border-radius: 8px !important; }
.progress-page .security-register-panel .agenda-source.security { color: #008d58 !important; background: #e4fbef !important; border-color: #a7edc8 !important; }
.progress-page .security-register-panel .agenda-source.manual { color: #0878c1 !important; background: #e7f5ff !important; border-color: #b9e1f7 !important; }
.progress-page .security-register-panel .agenda-incomplete { color: #a56d00 !important; background: #fff6c9 !important; border-color: #f5cf58 !important; }

/* Isi tabel arsip Dokumen Masuk dan Dokumen Keluar dibuat lebih tegas. */
.document-archive-table .table-wrap > table > tbody > tr > td,
.document-archive-table .table-wrap > table > tbody > tr > td strong { color: #111827 !important; }

@media (max-width: 1000px) {
    .progress-page .agendaris-filter-form { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .progress-page .agendaris-filter-form .search-group { grid-column: span 2; }
}
@media (max-width: 700px) {
    .progress-page .main-content { padding: 16px !important; }
    .progress-page .distribution-heading { margin: -16px -16px 12px !important; padding: 18px 16px 12px !important; }
}