/* ============================================================
   SIMOAB — Design Tokens (Tema Siang & Malam)
   ============================================================ */

/* Tema Malam (default) */
:root,
[data-theme="dark"] {
    color-scheme: dark;

    --simoab-bg: #0A0A0A;
    --simoab-surface: #1A1A1A;
    --simoab-elevated: #141414;
    --simoab-input: #0A0A0A;
    --simoab-border: #2A2A2A;
    --simoab-border-light: #3A3A3A;

    --simoab-text: #FFFFFF;
    --simoab-text-muted: rgba(255, 255, 255, 0.65);
    --simoab-text-subtle: rgba(255, 255, 255, 0.4);

    --simoab-hover: rgba(255, 255, 255, 0.05);
    --simoab-header: rgba(10, 10, 10, 0.85);
    --simoab-overlay: rgba(0, 0, 0, 0.7);
    --simoab-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);

    --simoab-scrollbar-track: #0A0A0A;
    --simoab-scrollbar-thumb: #2A2A2A;

    /* Aksen kuning alat berat / safety (malam) */
    --simoab-accent: #F5C518;
    --simoab-accent-dark: #D4A017;
    --simoab-accent-light: #FEF3C7;
    --simoab-accent-bg: rgba(245, 197, 24, 0.12);
    --simoab-accent-border: rgba(245, 197, 24, 0.28);
    --simoab-accent-text: #0A0A0A;
    --simoab-accent-fg: #F5C518;
    --simoab-hero-glow: rgba(245, 197, 24, 0.08);
    --simoab-warn: #F5C518;
    --simoab-warn-bg: rgba(245, 197, 24, 0.12);
    --simoab-warn-border: rgba(245, 197, 24, 0.28);

    /* Sidebar — selalu gelap */
    --simoab-sidebar-bg: #141414;
    --simoab-sidebar-border: #2A2A2A;
    --simoab-sidebar-text: #FFFFFF;
    --simoab-sidebar-text-muted: rgba(255, 255, 255, 0.65);
    --simoab-sidebar-text-subtle: rgba(255, 255, 255, 0.4);
    --simoab-sidebar-hover: rgba(255, 255, 255, 0.05);
    --simoab-sidebar-scrollbar: #2A2A2A;
    --simoab-time-picker-filter: invert(0.85);

    /* Form typography & sizing (seragam di semua kontrol) */
    --simoab-form-font-family: inherit;
    --simoab-form-font-size: 0.875rem;
    --simoab-form-line-height: 1.25rem;
    --simoab-form-label-size: 0.75rem;
    --simoab-form-label-line-height: 1.25rem;
    --simoab-form-hint-size: 0.6875rem;
    --simoab-form-hint-line-height: 1.4;
    --simoab-form-padding-y: 0.5rem;
    --simoab-form-padding-x: 0.75rem;
    --simoab-form-min-height: 2.5rem;
    --simoab-form-radius: 0.5rem;
    --simoab-form-check-size: 1rem;

    /* Spacing ritme komponen */
    --simoab-gap-xs: 0.5rem;
    --simoab-gap-sm: 0.75rem;
    --simoab-gap-md: 1rem;
    --simoab-gap-lg: 1.25rem;
    --simoab-gap-xl: 1.5rem;
    --simoab-card-radius: 0.75rem;

    /*
     * JARAK ANTAR CARD — PATEN (wajib semua module)
     * Jangan override dengan gap-2/gap-3/mb-0/space-y-0 pada container card.
     * Gunakan .module-card-grid (grid) atau .module-card-stack (vertikal).
     */
    --simoab-card-gap: 1rem;          /* jarak antar card sejajar / dalam grid */
    --simoab-card-stack-gap: 1rem;    /* jarak antar card bertumpuk vertikal */
    /* Padding isi card / panel / modal — konten tidak boleh menempel tepi */
    --simoab-inset-x: 1.25rem;
    --simoab-inset-y: 1.25rem;
    --simoab-inset: var(--simoab-inset-y) var(--simoab-inset-x);
    --simoab-inset-sm: 1rem 1.125rem;
}

/* Tema Siang */
[data-theme="light"] {
    color-scheme: light;

    --simoab-bg: #F1F5F9;
    --simoab-surface: #FFFFFF;
    --simoab-elevated: #FFFFFF;
    --simoab-input: #F8FAFC;
    --simoab-border: #E2E8F0;
    --simoab-border-light: #CBD5E1;

    --simoab-text: #0F172A;
    --simoab-text-muted: #475569;
    --simoab-text-subtle: #94A3B8;

    --simoab-hover: rgba(15, 23, 42, 0.05);
    --simoab-header: rgba(255, 255, 255, 0.9);
    --simoab-overlay: rgba(15, 23, 42, 0.45);
    --simoab-shadow: 0 4px 24px rgba(15, 23, 42, 0.08);

    --simoab-scrollbar-track: #F1F5F9;
    --simoab-scrollbar-thumb: #CBD5E1;

    /*
     * Aksen kuning alat berat (siang) — bukan orange.
     * Fill: kuning safety; teks aksen: hampir hitam (bukan kuning terang) agar jelas di putih.
     */
    --simoab-accent: #F5C518;
    --simoab-accent-dark: #A8840F;
    --simoab-accent-light: #FEF9C3;
    --simoab-accent-bg: rgba(245, 197, 24, 0.18);
    --simoab-accent-border: rgba(15, 13, 8, 0.28);
    --simoab-accent-text: #0F0D08;
    --simoab-accent-fg: #0F0D08;
    --simoab-hero-glow: rgba(245, 197, 24, 0.12);
    --simoab-warn: #7C2D12;
    --simoab-warn-bg: rgba(124, 45, 18, 0.1);
    --simoab-warn-border: rgba(124, 45, 18, 0.28);

    /* Sidebar tetap hitam di mode siang */
    --simoab-sidebar-bg: #141414;
    --simoab-sidebar-border: #2A2A2A;
    --simoab-sidebar-text: #FFFFFF;
    --simoab-sidebar-text-muted: rgba(255, 255, 255, 0.65);
    --simoab-sidebar-text-subtle: rgba(255, 255, 255, 0.4);
    --simoab-sidebar-hover: rgba(255, 255, 255, 0.05);
    --simoab-sidebar-scrollbar: #2A2A2A;
}

/*
 * Tema siang: teks aksen di area konten = hampir hitam (bukan kuning #F5C518).
 * Fill/border tetap kuning via --simoab-accent. Sidebar gelap tidak diubah.
 */
[data-theme="light"] .app-shell-column .text-brand-yellow,
[data-theme="light"] .app-shell-column .text-brand-yellow-dark,
[data-theme="light"] .app-shell-column .text-brand-yellow-fg,
[data-theme="light"] .app-shell-column .hover\:text-brand-yellow:hover,
[data-theme="light"] main .text-brand-yellow,
[data-theme="light"] main .text-brand-yellow-dark,
[data-theme="light"] main .text-brand-yellow-fg,
[data-theme="light"] .simoab-modal-backdrop .text-brand-yellow,
[data-theme="light"] #toast-container .text-brand-yellow {
    color: var(--simoab-accent-fg) !important;
}

[data-theme="light"] main .text-orange-400,
[data-theme="light"] main .text-orange-500 {
    color: var(--simoab-warn) !important;
}

/* Banner langganan — kontras per tema */
.sub-banner--trial {
    border-color: var(--simoab-accent-border);
    background: var(--simoab-accent-bg);
    color: var(--simoab-accent-fg);
}
.sub-banner--urgent {
    border-color: var(--simoab-warn-border);
    background: var(--simoab-warn-bg);
    color: var(--simoab-warn);
}
.sub-banner--danger {
    border-color: rgba(239, 68, 68, 0.35);
    background: rgba(239, 68, 68, 0.1);
    color: #B91C1C;
}
[data-theme="dark"] .sub-banner--danger {
    color: #FCA5A5;
}
.sub-banner--ok {
    border-color: var(--simoab-border);
    background: var(--simoab-surface);
    color: var(--simoab-text-muted);
}

/* Status/peringatan: ganti utilitas orange Tailwind → warn (kuning/amber brand) */
.text-orange-400,
.text-orange-500 {
    color: var(--simoab-warn) !important;
}
.bg-orange-400\/5,
.bg-orange-400\/10 {
    background-color: var(--simoab-warn-bg) !important;
}
.border-orange-400\/10,
.border-orange-400\/20,
.border-orange-400\/25,
.border-orange-400\/30 {
    border-color: var(--simoab-warn-border) !important;
}
.from-orange-500\/20 {
    --tw-gradient-from: rgba(245, 197, 24, 0.2) var(--tw-gradient-from-position);
}

/* ============================================================
   Base
   ============================================================ */
html {
    transition: background-color 0.2s ease, color 0.2s ease;
}

body {
    background-color: var(--simoab-bg);
    color: var(--simoab-text);
}

/* ============================================================
   Scrollbar
   ============================================================ */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: var(--simoab-scrollbar-track);
}

::-webkit-scrollbar-thumb {
    background: var(--simoab-scrollbar-thumb);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--simoab-accent);
}

#sidebar nav {
    scrollbar-width: thin;
    scrollbar-color: var(--simoab-sidebar-scrollbar) transparent;
}

/* ============================================================
   Form elements
   ============================================================ */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    opacity: 0.5;
}

.theme-input,
.form-input {
    background-color: var(--simoab-input) !important;
    border-color: var(--simoab-border) !important;
    color: var(--simoab-text) !important;
}

.theme-input::placeholder,
.form-input::placeholder {
    color: var(--simoab-text-subtle) !important;
}

.theme-input:focus,
.form-input:focus {
    border-color: var(--simoab-accent) !important;
    outline: none;
    box-shadow: 0 0 0 1px var(--simoab-accent);
}

.simoab-formatted-number {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

select.theme-input option,
select.form-input option {
    background: var(--simoab-surface);
    color: var(--simoab-text);
}

/* --- Unified form field system --- */
.form-label,
.simoab-time-field-label,
.commercial-field label:not([aria-hidden="true"]) {
    display: block;
    font-family: var(--simoab-form-font-family);
    font-size: var(--simoab-form-label-size);
    line-height: var(--simoab-form-label-line-height);
    font-weight: 500;
    color: var(--simoab-text-muted);
    margin-bottom: 0.25rem;
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.form-field--inline {
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
}

.form-grid,
.company-form-grid {
    display: grid;
    gap: 0.75rem;
    width: 100%;
}

.form-grid-2,
.company-form-grid {
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .form-grid-2,
    .company-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.form-grid-3 {
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .form-grid-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .form-grid-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.form-field-full,
.form-grid .form-field-full,
.company-form-grid .form-field-full,
.form-grid .sm\:col-span-2,
.form-grid .md\:col-span-2,
.form-grid .lg\:col-span-2 {
    grid-column: 1 / -1;
    width: 100%;
}

.module-filter-span-full {
    grid-column: 1 / -1;
    min-width: 0;
}

.commercial-field-span-full {
    grid-column: 1 / -1;
    min-width: 0;
}

input.form-input,
textarea.form-input,
select.form-input,
input[type="date"].form-input,
input[type="datetime-local"].form-input,
input[type="time"].form-input,
input[type="number"].form-input,
input[type="search"].form-input,
input[type="email"].form-input,
input[type="password"].form-input,
input[type="tel"].form-input,
input[type="text"].form-input,
.module-filter-search,
input.module-filter-search,
.module-filter-date,
input.module-filter-date {
    width: 100%;
    min-height: var(--simoab-form-min-height);
    padding: var(--simoab-form-padding-y) var(--simoab-form-padding-x);
    font-family: var(--simoab-form-font-family);
    font-size: var(--simoab-form-font-size);
    line-height: var(--simoab-form-line-height);
    font-weight: 400;
    border: 1px solid var(--simoab-border);
    border-radius: var(--simoab-form-radius);
    background-color: var(--simoab-input);
    color: var(--simoab-text);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

select.form-input {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2394A3B8'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.625rem center;
    background-size: 1rem;
    padding-right: 2rem;
    cursor: pointer;
}

input[type="date"].form-input::-webkit-datetime-edit,
input[type="date"].module-filter-date::-webkit-datetime-edit,
input[type="datetime-local"].form-input::-webkit-datetime-edit {
    font-family: var(--simoab-form-font-family);
    font-size: var(--simoab-form-font-size);
    line-height: var(--simoab-form-line-height);
}

input[type="date"].form-input::-webkit-calendar-picker-indicator,
input[type="date"].module-filter-date::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.75;
}

textarea.form-input {
    resize: vertical;
    min-height: 4.5rem;
}

.form-input--textarea {
    min-height: 5rem;
    resize: vertical;
}

.form-input--sm {
    padding: 0.375rem 0.625rem;
    font-size: var(--simoab-form-font-size);
    line-height: var(--simoab-form-line-height);
    min-height: 2.25rem;
}

.form-input--narrow {
    width: auto;
    min-width: 5rem;
    max-width: 7rem;
}

.form-input.font-mono,
.form-input--mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-variant-numeric: tabular-nums;
}

.form-check,
.commercial-check {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--simoab-form-font-family);
    font-size: var(--simoab-form-font-size);
    line-height: var(--simoab-form-line-height);
    font-weight: 400;
    color: var(--simoab-text);
    cursor: pointer;
    user-select: none;
}

.commercial-check {
    align-items: flex-start;
    color: var(--simoab-text-muted);
}

.form-check input[type="checkbox"],
.form-check input[type="radio"],
.commercial-check input[type="checkbox"] {
    width: var(--simoab-form-check-size);
    height: var(--simoab-form-check-size);
    margin: 0;
    accent-color: var(--simoab-accent, #f5c400);
    flex-shrink: 0;
}

.commercial-check input[type="checkbox"] {
    margin-top: 0.125rem;
}

.form-check-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
}

.form-hint,
.field-hint {
    font-family: var(--simoab-form-font-family);
    font-size: var(--simoab-form-hint-size);
    line-height: var(--simoab-form-hint-line-height);
    color: var(--simoab-text-subtle);
    margin-top: 0.125rem;
}

/* Neutralize Tailwind text size overrides on form controls */
.form-input.text-xs,
.form-input.text-sm,
.form-input.text-base,
select.form-input.text-xs,
select.form-input.text-sm,
.simoab-select-trigger.text-xs,
.simoab-select-trigger.text-sm,
.module-filter-search.text-xs,
.module-filter-search.text-sm,
.module-filter-date.text-xs,
.module-filter-date.text-sm {
    font-size: var(--simoab-form-font-size) !important;
    line-height: var(--simoab-form-line-height) !important;
}

/* Filter bar inputs (list pages) */
.module-filter-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.625rem;
}

@media (min-width: 640px) {
    .module-filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .module-filter-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .module-filter-grid.is-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.module-filter-search:focus,
input.module-filter-date:focus,
select.form-input:focus,
textarea.form-input:focus,
input.form-input:focus {
    border-color: var(--simoab-accent) !important;
    outline: none;
    box-shadow: 0 0 0 1px var(--simoab-accent);
}

@media (min-width: 1024px) {
    .module-filter-search.is-wide {
        grid-column: span 2;
    }
}

/* Inline form panels — full width across modules */
.module-form-panel {
    width: 100%;
    max-width: none;
    background: var(--simoab-surface);
    border: 1px solid var(--simoab-border);
    border-radius: var(--simoab-card-radius, 0.75rem);
    padding: var(--simoab-inset, 1.25rem);
    box-sizing: border-box;
}

@media (min-width: 640px) {
    .module-form-panel {
        padding: var(--simoab-inset, 1.25rem);
    }
}

.module-form-panel__title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--simoab-text);
    margin-bottom: 0.75rem;
}

.module-form-panel__hint {
    font-family: var(--simoab-form-font-family);
    font-size: var(--simoab-form-hint-size);
    line-height: var(--simoab-form-hint-line-height);
    color: var(--simoab-text-muted);
    margin: -0.35rem 0 0.85rem;
}

.module-form-panel__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
    align-items: flex-end;
    width: 100%;
    margin-top: 0.25rem;
}

.module-form-panel__actions .form-field {
    flex: 1 1 10rem;
    min-width: 8rem;
}

/* Page-level form cards must never be width-capped by utility classes */
.module-page .module-form-panel.max-w-2xl,
.module-page .module-form-panel.max-w-3xl,
.module-page .module-form-panel.max-w-4xl,
.module-page .module-form-panel.max-w-5xl,
.module-page .module-form-panel.max-w-6xl,
.module-page .module-form-panel.max-w-7xl,
.module-page form.max-w-2xl,
.module-page form.max-w-3xl,
.module-page form.max-w-4xl,
.module-page form.max-w-5xl,
.module-page .module-content-stack.max-w-2xl,
.module-page .module-content-stack.max-w-3xl,
.module-page .module-content-stack.max-w-4xl,
.module-page .module-card-grid.max-w-5xl,
.module-page .module-card-grid.max-w-4xl,
.module-page.max-w-4xl {
    max-width: none !important;
    width: 100%;
}

/* Align legacy Tailwind form grids with the unified form system */
.module-form-panel .grid.sm\:grid-cols-2,
.module-page form .grid.sm\:grid-cols-2,
.simoab-modal-backdrop form .grid.sm\:grid-cols-2 {
    display: grid;
    gap: 0.75rem;
    width: 100%;
}

.module-form-panel .form-check.text-orange-400,
.form-check.text-orange-400 {
    color: var(--simoab-warn);
}

.payroll-bon-panel summary.module-form-panel__title,
.payroll-bon-panel summary.payroll-bon-panel__summary {
    margin-bottom: 0;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.payroll-bon-panel summary.module-form-panel__title::-webkit-details-marker,
.payroll-bon-panel summary.payroll-bon-panel__summary::-webkit-details-marker {
    display: none;
}

.payroll-bon-panel__label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.payroll-bon-panel__hint {
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--simoab-text-subtle, #64748b);
    background: var(--simoab-input, #f8fafc);
    border: 1px solid var(--simoab-border, #e2e8f0);
    border-radius: 999px;
    padding: 0.1rem 0.45rem;
    white-space: nowrap;
}

.payroll-bon-panel__chevron {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    color: var(--simoab-text-subtle, #64748b);
    transition: transform 0.2s ease;
}

.payroll-bon-panel[open] summary.module-form-panel__title,
.payroll-bon-panel[open] summary.payroll-bon-panel__summary {
    margin-bottom: 0.75rem;
}

.payroll-bon-panel[open] .payroll-bon-panel__chevron {
    transform: rotate(180deg);
    color: var(--simoab-accent, #eab308);
}

.payroll-bon-panel summary.payroll-bon-panel__summary:hover .payroll-bon-panel__chevron {
    color: var(--simoab-accent, #eab308);
}

/* Profil perusahaan — grid rules live with .form-grid above */

.company-logo-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 8rem;
    border: 1px dashed var(--simoab-border);
    border-radius: 0.75rem;
    background: var(--simoab-input);
    padding: 1rem;
}

.company-logo-preview img {
    max-width: 100%;
    max-height: 7rem;
    object-fit: contain;
}

.company-logo-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    color: var(--simoab-subtle);
    font-size: 0.75rem;
}

.company-summary {
    display: grid;
    gap: 0.625rem;
    font-size: 0.8125rem;
}

.company-summary div {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    padding-bottom: 0.375rem;
    border-bottom: 1px solid var(--simoab-border);
}

.company-summary dt {
    color: var(--simoab-subtle);
    flex-shrink: 0;
}

.company-summary dd {
    font-weight: 600;
    text-align: right;
    color: var(--simoab-text);
    word-break: break-word;
}

/* Table panel header */
.module-table-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: var(--simoab-inset-sm, 1rem 1.125rem);
    border-bottom: 1px solid var(--simoab-border);
    background: var(--simoab-input-bg, rgba(255, 255, 255, 0.03));
}

.module-table-header__title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--simoab-text);
}

.module-table-header__subtitle {
    font-size: 0.75rem;
    color: var(--simoab-text-subtle);
    margin-top: 0.125rem;
}

.simoab-data-table .col-right,
.simoab-data-table th.col-right,
.simoab-data-table td.col-right {
    text-align: right;
}

.simoab-data-table-empty td {
    padding: 2.5rem 1rem !important;
    text-align: center;
    color: var(--simoab-text-subtle);
}

.simoab-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
    align-items: center;
}

.simoab-filter-row .simoab-select,
.simoab-filter-row .form-input,
.simoab-filter-row .module-filter-search {
    flex: 1 1 10rem;
    min-width: 8rem;
}

.procedure-panel {
    background: var(--simoab-accent-bg);
    border: none;
    border-radius: 0;
    border-top: 1px solid var(--simoab-accent-border);
    padding: 1rem 1.25rem 1.125rem;
    font-size: 0.75rem;
    line-height: 1.6;
    color: var(--simoab-text-muted);
}

.procedure-details {
    border: 1px solid var(--simoab-border);
    border-radius: 0.75rem;
    background: var(--simoab-surface);
    overflow: hidden;
}

.procedure-summary {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.75rem 1rem;
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: background-color 0.15s ease;
}

.procedure-summary::-webkit-details-marker {
    display: none;
}

.procedure-summary:hover {
    background: var(--simoab-hover);
}

.procedure-details[open] .procedure-summary {
    border-bottom: 1px solid var(--simoab-border);
    background: var(--simoab-input);
}

.procedure-details[open] .procedure-summary-chevron {
    transform: rotate(180deg);
}

.procedure-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    padding: 0.125rem 0.5rem;
    border-radius: 0.375rem;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--simoab-accent-fg);
    background: var(--simoab-accent-bg);
    border: 1px solid var(--simoab-accent-border);
}

.procedure-summary-title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--simoab-text);
}

.procedure-summary-hint {
    font-size: 0.6875rem;
    color: var(--simoab-text-subtle);
}

.procedure-summary-chevron {
    color: var(--simoab-text-subtle);
    transition: transform 0.2s ease;
}

.procedure-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.875rem;
    padding-top: 0.875rem;
    border-top: 1px solid var(--simoab-accent-border);
}

.procedure-link {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--simoab-accent-fg);
    background: color-mix(in srgb, var(--simoab-accent) 8%, transparent);
    border: 1px solid var(--simoab-accent-border);
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.procedure-link:hover {
    background: color-mix(in srgb, var(--simoab-accent) 16%, transparent);
    border-color: var(--simoab-accent);
}

.procedure-title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--simoab-accent-fg);
    margin-bottom: 0.625rem;
}

.procedure-steps {
    list-style: decimal;
    padding-left: 1.25rem;
}

.procedure-steps li {
    margin-bottom: 0.375rem;
}

.procedure-steps li strong {
    color: var(--simoab-text);
    font-weight: 600;
}

.procedure-footer {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--simoab-accent-border);
    font-size: 0.6875rem;
    color: var(--simoab-text-subtle);
    font-style: italic;
}

.page-intro {
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--simoab-text-muted);
}

.menu-item-subtitle {
    display: block;
    font-size: 0.625rem;
    font-weight: 400;
    opacity: 0.7;
    line-height: 1.2;
    margin-top: 0.125rem;
}

/* ============================================================
   Custom Select (simoab-select)
   ============================================================ */
.simoab-select-wrap {
    position: relative;
    width: 100%;
}

.simoab-select-native {
    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;
}

.simoab-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    min-height: var(--simoab-form-min-height);
    padding: var(--simoab-form-padding-y) var(--simoab-form-padding-x);
    background-color: var(--simoab-input);
    border: 1px solid var(--simoab-border);
    border-radius: var(--simoab-form-radius);
    color: var(--simoab-text);
    font-family: var(--simoab-form-font-family);
    font-size: var(--simoab-form-font-size);
    line-height: var(--simoab-form-line-height);
    font-weight: 400;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.simoab-select-trigger:hover {
    border-color: var(--simoab-border-light);
}

.simoab-select-wrap.is-open .simoab-select-trigger,
.simoab-select-trigger:focus-visible {
    outline: none;
    border-color: var(--simoab-accent);
    box-shadow: 0 0 0 1px var(--simoab-accent);
}

.simoab-select-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.simoab-select-label.is-placeholder {
    color: var(--simoab-text-subtle);
}

.simoab-select-trigger-content {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    min-width: 0;
}

.simoab-select-thumb,
.simoab-select-option-thumb {
    flex-shrink: 0;
    object-fit: contain;
    object-position: center;
    background: transparent;
    border: none;
    border-radius: 0;
}

.simoab-select-thumb {
    width: 2rem;
    height: 1.5rem;
}

.simoab-select-option-thumb {
    width: 2.75rem;
    height: 2rem;
}

.simoab-select-wrap--equipment .simoab-select-trigger {
    min-height: calc(var(--simoab-form-min-height) + 0.125rem);
}

.simoab-select-wrap--equipment .simoab-select-option {
    align-items: flex-start;
    gap: 0.625rem;
    padding-top: 0.4375rem;
    padding-bottom: 0.4375rem;
}

.simoab-select-wrap--equipment .simoab-select-option-text {
    flex: 1;
    min-width: 0;
    line-height: 1.35;
}

.simoab-select-wrap--equipment .simoab-select-dropdown {
    min-width: 100%;
}

/* Select compact — tipe alat & opsi pendek dengan thumbnail */
.simoab-select-wrap--compact .simoab-select-label,
.simoab-select-wrap--compact .simoab-select-option-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.35;
}

.simoab-select-wrap--compact .simoab-select-option {
    align-items: center;
    gap: 0.5rem;
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
}

.simoab-select-wrap--compact .simoab-select-option-thumb {
    width: 2.25rem;
    height: 1.625rem;
}

.simoab-select-wrap--compact .simoab-select-thumb {
    width: 1.75rem;
    height: 1.375rem;
}

/* Select entitas — alat & proyek: label/opsi tidak terpotong */
.simoab-select-wrap--equipment .simoab-select-label,
.simoab-select-wrap--project .simoab-select-label {
    white-space: normal;
    overflow: hidden;
    text-overflow: unset;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.simoab-select-wrap--equipment .simoab-select-trigger,
.simoab-select-wrap--project .simoab-select-trigger {
    align-items: center;
    min-height: calc(var(--simoab-form-min-height) + 0.25rem);
    height: auto;
}

.simoab-select-wrap--equipment .simoab-select-trigger-content,
.simoab-select-wrap--project .simoab-select-trigger-content {
    align-items: flex-start;
    min-width: 0;
}

.simoab-select-wrap--equipment .simoab-select-thumb,
.simoab-select-wrap--project .simoab-select-thumb {
    margin-top: 0.125rem;
}

.simoab-select-wrap--project .simoab-select-option-text,
.simoab-select-wrap--equipment .simoab-select-option-text {
    white-space: normal;
    word-break: break-word;
    line-height: 1.35;
    text-align: left;
}

.simoab-select-wrap--project .simoab-select-option,
.simoab-select-wrap--equipment .simoab-select-option {
    align-items: flex-start;
}

.simoab-select-wrap--equipment .simoab-select-option-thumb,
.simoab-select-wrap--project .simoab-select-option-thumb {
    margin-top: 0.125rem;
}

.simoab-select-wrap--project .simoab-select-dropdown,
.simoab-select-wrap--equipment .simoab-select-dropdown {
    min-width: 100%;
}

.simoab-select-chevron {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    color: var(--simoab-text-subtle);
    transition: transform 0.2s ease, color 0.15s ease;
}

.simoab-select-wrap.is-open .simoab-select-chevron {
    transform: rotate(180deg);
    color: var(--simoab-accent-fg);
}

.simoab-select-chevron svg {
    width: 100%;
    height: 100%;
}

.simoab-select-dropdown {
    position: fixed;
    z-index: 9999;
    max-height: 280px;
    overflow-y: auto;
    padding: 0.375rem;
    background-color: var(--simoab-surface);
    border: 1px solid var(--simoab-border);
    border-radius: 0.625rem;
    box-shadow: var(--simoab-shadow);
    animation: selectDropIn 0.15s ease-out;
}

.simoab-select-search-wrap {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 0.25rem 0.25rem 0.5rem;
    margin: -0.125rem -0.125rem 0.25rem;
    background-color: var(--simoab-surface);
    border-bottom: 1px solid var(--simoab-border);
}

.simoab-select-search {
    width: 100%;
    padding: var(--simoab-form-padding-y) var(--simoab-form-padding-x);
    font-family: var(--simoab-form-font-family);
    font-size: var(--simoab-form-font-size);
    line-height: var(--simoab-form-line-height);
    color: var(--simoab-text);
    background-color: var(--simoab-input);
    border: 1px solid var(--simoab-border);
    border-radius: 0.375rem;
    outline: none;
}

.simoab-select-search:focus {
    border-color: var(--simoab-accent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--simoab-accent) 25%, transparent);
}

.simoab-select-search::-webkit-search-cancel-button {
    cursor: pointer;
}

.simoab-select-options {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.simoab-select-group {
    padding: 0.5rem 0.65rem 0.25rem;
    margin-top: 0.25rem;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--simoab-muted);
    border-top: 1px solid var(--simoab-border);
}

.simoab-select-group:first-child {
    margin-top: 0;
    border-top: none;
    padding-top: 0.25rem;
}

.simoab-select-group.is-filtered {
    display: none !important;
}

.simoab-select-empty {
    padding: 0.75rem 0.5rem;
    font-family: var(--simoab-form-font-family);
    font-size: var(--simoab-form-font-size);
    line-height: var(--simoab-form-line-height);
    color: var(--simoab-muted);
    text-align: center;
}

.simoab-select-option.is-filtered {
    display: none !important;
}

@keyframes selectDropIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.simoab-select-dropdown::-webkit-scrollbar {
    width: 4px;
}

.simoab-select-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 0.625rem;
    border: none;
    border-radius: 0.375rem;
    background: transparent;
    color: var(--simoab-text);
    font-family: var(--simoab-form-font-family);
    font-size: var(--simoab-form-font-size);
    line-height: var(--simoab-form-line-height);
    font-weight: 400;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.1s ease, color 0.1s ease;
}

.simoab-select-option:hover:not(.is-disabled):not(.is-selected) {
    background-color: var(--simoab-hover);
}

.simoab-select-option.is-selected {
    background-color: var(--simoab-accent-bg);
    color: var(--simoab-accent-fg);
    font-weight: 500;
}

.simoab-select-option.is-disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.simoab-select-option-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.simoab-select-check {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    opacity: 0;
    color: var(--simoab-accent-fg);
}

.simoab-select-option.is-selected .simoab-select-check {
    opacity: 1;
}

.simoab-select-check svg {
    width: 100%;
    height: 100%;
}

/* Modal: dropdown di atas konten modal */
#equipment-modal .simoab-select-dropdown,
#dwr-modal .simoab-select-dropdown,
#fuel-modal .simoab-select-dropdown,
#spr-modal .simoab-select-dropdown {
    z-index: 10000;
}

/* Mode pelacakan — form settings ringkas & sejajar */
.tracking-settings-panel__head {
    margin-bottom: 0.25rem;
}

.tracking-settings-panel .module-form-panel__title {
    margin-bottom: 0.35rem;
}

.tracking-settings-panel .module-form-panel__hint {
    margin: 0 0 1rem;
}

.tracking-settings-form {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.tracking-settings-form__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem 0.85rem;
}

@media (min-width: 640px) {
    .tracking-settings-form__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .tracking-settings-form__grid {
        grid-template-columns: minmax(12rem, 1.4fr) repeat(3, minmax(0, 1fr));
        align-items: end;
    }
}

.tracking-settings-form__grid .form-field {
    min-width: 0;
    margin: 0;
}

.tracking-input-suffix {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
    gap: 0;
}

.tracking-input-suffix .form-input {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.tracking-input-suffix span {
    display: inline-flex;
    align-items: center;
    padding: 0 0.7rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--simoab-text-muted, #6b7280);
    background: var(--simoab-input, rgba(255, 255, 255, 0.04));
    border: 1px solid var(--simoab-border, rgba(255, 255, 255, 0.12));
    border-left: 0;
    border-radius: 0 0.5rem 0.5rem 0;
    white-space: nowrap;
}

.tracking-settings-form__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    padding-top: 0.15rem;
    border-top: 1px solid var(--simoab-border, rgba(255, 255, 255, 0.08));
}

.tracking-settings-check {
    display: inline-flex;
    align-items: flex-start;
    gap: 0.55rem;
    max-width: 36rem;
    font-size: 0.8rem;
    line-height: 1.35;
    color: var(--simoab-text-muted, #9ca3af);
    cursor: pointer;
}

.tracking-settings-check input {
    margin-top: 0.15rem;
    flex-shrink: 0;
}

.tracking-settings-form__footer .module-btn-primary {
    margin-left: auto;
}

/* Project bar + live map shell */
.tracking-project-bar__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem 1rem;
    align-items: end;
}

@media (min-width: 768px) {
    .tracking-project-bar__grid {
        grid-template-columns: minmax(0, 1.6fr) minmax(9rem, 0.7fr) auto;
    }
}

.tracking-project-bar__actions {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    align-items: stretch;
}

@media (min-width: 768px) {
    .tracking-project-bar__actions {
        align-items: flex-end;
    }
}

.tracking-project-bar__hint {
    margin: 0;
    font-size: 0.68rem;
    line-height: 1.35;
    color: var(--simoab-text-muted, #9ca3af);
    max-width: 16rem;
    text-align: left;
}

@media (min-width: 768px) {
    .tracking-project-bar__hint {
        text-align: right;
    }
}

.tracking-map-shell {
    background: var(--simoab-surface);
    border: 1px solid var(--simoab-border);
    border-radius: var(--simoab-card-radius, 0.85rem);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.tracking-map-shell__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem 1rem;
    padding: 0.75rem 0.9rem;
    border-bottom: 1px solid var(--simoab-border);
    background: linear-gradient(180deg, rgba(245, 197, 24, 0.06), transparent);
}

.tracking-map-shell__title {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
}

.tracking-live-dot {
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 999px;
    background: #6b7280;
    flex-shrink: 0;
    box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.0);
}

.tracking-live-dot.is-live {
    background: #34d399;
    animation: tracking-live-pulse 1.8s ease-out infinite;
}

@keyframes tracking-live-pulse {
    0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.55); }
    70% { box-shadow: 0 0 0 8px rgba(52, 211, 153, 0); }
    100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
}

.tracking-map-shell__label {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--simoab-text);
}

.tracking-map-shell__meta {
    margin: 0.1rem 0 0;
    font-size: 0.68rem;
    color: var(--simoab-text-muted, #9ca3af);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 22rem;
}

.tracking-map-shell__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.tracking-filter-chip {
    border: 1px solid var(--simoab-border);
    background: transparent;
    color: var(--simoab-text-muted, #9ca3af);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    padding: 0.28rem 0.55rem;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.tracking-filter-chip:hover {
    border-color: rgba(245, 197, 24, 0.45);
    color: var(--simoab-text);
}

.tracking-filter-chip.is-active {
    background: rgba(245, 197, 24, 0.16);
    border-color: rgba(245, 197, 24, 0.55);
    color: #f5c518;
}

.tracking-map-stage {
    position: relative;
    min-height: 460px;
}

.tracking-map-canvas {
    width: 100%;
    height: 460px;
    background: #0b1220;
}

@media (min-width: 1024px) {
    .tracking-map-stage,
    .tracking-map-canvas {
        height: 560px;
        min-height: 560px;
    }
}

.tracking-map-hud {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 500;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.35rem;
    padding: 0.4rem;
    border-radius: 0.7rem;
    background: rgba(15, 23, 42, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    max-width: calc(100% - 5.5rem);
}

.tracking-map-hud__item {
    min-width: 3.2rem;
    text-align: center;
    padding: 0.25rem 0.35rem;
}

.tracking-map-hud__item span {
    display: block;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #94a3b8;
}

.tracking-map-hud__item strong {
    display: block;
    margin-top: 0.1rem;
    font-size: 0.95rem;
    font-weight: 800;
    color: #f8fafc;
    font-variant-numeric: tabular-nums;
}

.tracking-map-tools {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 500;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.tracking-map-tool {
    min-width: 3.1rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(15, 23, 42, 0.82);
    color: #e2e8f0;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.45rem 0.55rem;
    border-radius: 0.55rem;
    cursor: pointer;
    backdrop-filter: blur(8px);
}

.tracking-map-tool:hover {
    border-color: rgba(245, 197, 24, 0.5);
    color: #f5c518;
}

.tracking-map-legend {
    position: absolute;
    left: 0.75rem;
    bottom: 0.75rem;
    z-index: 500;
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem 0.7rem;
    max-width: calc(100% - 1.5rem);
    padding: 0.45rem 0.65rem;
    border-radius: 0.65rem;
    background: rgba(15, 23, 42, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    font-size: 0.65rem;
    color: #cbd5e1;
}

.tracking-map-legend span {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.trk-dot {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 999px;
    display: inline-block;
}

.trk-dot--phone { background: #f5c518; }
.trk-dot--iot { background: #34d399; }
.trk-dot--outside { background: #f87171; }
.trk-dot--stale { background: #9ca3af; }
.trk-dot--idle { background: #fbbf24; box-shadow: inset 0 0 0 1.5px #78350f; }

.tracking-map-empty {
    position: absolute;
    inset: 0;
    z-index: 450;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1.5rem;
    background:
        radial-gradient(ellipse at 30% 20%, rgba(245, 197, 24, 0.12), transparent 45%),
        radial-gradient(ellipse at 70% 80%, rgba(52, 211, 153, 0.08), transparent 40%),
        rgba(8, 12, 22, 0.72);
    pointer-events: none;
}

.tracking-map-empty.is-hidden {
    display: none;
}

.tracking-map-empty__title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
    color: #f8fafc;
}

.tracking-map-empty__text {
    margin: 0.45rem 0 0;
    max-width: 26rem;
    font-size: 0.8rem;
    line-height: 1.45;
    color: #94a3b8;
}

.tracking-map-shell__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.55rem 0.85rem;
    padding: 0.7rem 0.9rem;
    border-top: 1px solid var(--simoab-border);
}

.tracking-geofence-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.tracking-geofence-hint {
    margin: 0;
    font-size: 0.7rem;
    color: var(--simoab-text-muted, #9ca3af);
    max-width: 22rem;
}

.tracking-eq-marker {
    background: transparent !important;
    border: none !important;
}

.tracking-eq-pin {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 3.4rem;
    padding: 0.22rem 0.45rem;
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: #0f172a;
    border: 1.5px solid rgba(15, 23, 42, 0.25);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28);
    white-space: nowrap;
}

.tracking-eq-pin--phone { background: #f5c518; }
.tracking-eq-pin--iot { background: #34d399; }
.tracking-eq-pin--outside { background: #f87171; color: #450a0a; }
.tracking-eq-pin--stale { background: #9ca3af; color: #111827; }
.tracking-eq-pin--idle { background: #fbbf24; color: #78350f; }

.tracking-eq-pin.is-pulse {
    animation: tracking-pin-breathe 2.2s ease-in-out infinite;
}

@keyframes tracking-pin-breathe {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.tracking-leaflet-popup .leaflet-popup-content-wrapper {
    border-radius: 0.75rem;
    background: #0f172a;
    color: #e2e8f0;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}

.tracking-leaflet-popup .leaflet-popup-tip {
    background: #0f172a;
}

.tracking-leaflet-popup .leaflet-popup-content {
    margin: 0.7rem 0.8rem;
}

.trk-popup__code {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 800;
    color: #f5c518;
}

.trk-popup__name {
    margin: 0.15rem 0 0;
    font-size: 0.72rem;
    color: #94a3b8;
}

.trk-popup__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.45rem;
}

.trk-pop-badge {
    font-size: 0.58rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.15rem 0.4rem;
    border-radius: 999px;
    border: 1px solid transparent;
}

.trk-pop-badge--ok { color: #34d399; border-color: rgba(52, 211, 153, 0.35); background: rgba(52, 211, 153, 0.1); }
.trk-pop-badge--warn { color: #fbbf24; border-color: rgba(251, 191, 36, 0.35); background: rgba(251, 191, 36, 0.1); }
.trk-pop-badge--danger { color: #f87171; border-color: rgba(248, 113, 113, 0.4); background: rgba(248, 113, 113, 0.12); }
.trk-pop-badge--muted { color: #9ca3af; border-color: rgba(156, 163, 175, 0.35); background: rgba(156, 163, 175, 0.1); }

.trk-popup__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem 0.55rem;
    margin-top: 0.55rem;
}

.trk-popup__grid span {
    display: block;
    font-size: 0.58rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #64748b;
}

.trk-popup__grid strong {
    display: block;
    margin-top: 0.1rem;
    font-size: 0.72rem;
    color: #f1f5f9;
    font-weight: 700;
}

.trk-popup__note {
    margin: 0.55rem 0 0;
    font-size: 0.62rem;
    line-height: 1.35;
    color: #64748b;
}

.tracking-fleet-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    max-height: 220px;
    overflow: auto;
}

.tracking-fleet-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
    width: 100%;
    text-align: left;
    padding: 0.5rem 0.6rem;
    border-radius: 0.55rem;
    border: 1px solid var(--simoab-border);
    background: transparent;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.tracking-fleet-item:hover {
    border-color: rgba(245, 197, 24, 0.45);
    background: rgba(245, 197, 24, 0.05);
}

.tracking-fleet-item__code {
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--simoab-text);
}

.tracking-fleet-item__meta {
    font-size: 0.65rem;
    color: var(--simoab-text-muted, #9ca3af);
}

.tracking-fleet-item--outside { border-left: 3px solid #f87171; }
.tracking-fleet-item--idle { border-left: 3px solid #fbbf24; }
.tracking-fleet-item--stale { border-left: 3px solid #9ca3af; }
.tracking-fleet-item--iot { border-left: 3px solid #34d399; }
.tracking-fleet-item--phone { border-left: 3px solid #f5c518; }

/* IoT device panel */
.tracking-iot-panel__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem 1rem;
}

.tracking-iot-panel__head .module-form-panel__title {
    margin-bottom: 0.25rem;
}

.tracking-iot-panel__head .module-form-panel__hint {
    margin: 0;
    max-width: 42rem;
}

.tracking-iot-panel__head-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.tracking-iot-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 0.28rem 0.55rem;
    border-radius: 999px;
    border: 1px solid var(--simoab-border);
}

.tracking-iot-badge.is-on {
    color: #065f46;
    background: #d1fae5;
    border-color: #6ee7b7;
}

.tracking-iot-badge.is-off {
    color: #92400e;
    background: #fef3c7;
    border-color: #fcd34d;
}

.tracking-iot-panel.is-disabled {
    opacity: 0.72;
}

.tracking-iot-steps {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    margin: 1rem 0 0.85rem;
}

@media (min-width: 768px) {
    .tracking-iot-steps {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.tracking-iot-step {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 0.65rem;
    border-radius: 0.65rem;
    border: 1px solid var(--simoab-border);
    background: rgba(245, 197, 24, 0.04);
}

.tracking-iot-step span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 800;
    background: rgba(245, 197, 24, 0.2);
    color: #b45309;
    flex-shrink: 0;
}

.tracking-iot-step p {
    margin: 0;
    font-size: 0.7rem;
    line-height: 1.3;
    color: var(--simoab-text-muted, #9ca3af);
}

.tracking-iot-form {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.tracking-iot-form__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem 0.85rem;
}

@media (min-width: 640px) {
    .tracking-iot-form__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1100px) {
    .tracking-iot-form__grid {
        grid-template-columns: minmax(12rem, 1.35fr) repeat(3, minmax(0, 1fr));
        align-items: start;
    }
}

.tracking-iot-form__grid .form-field {
    margin: 0;
    min-width: 0;
}

.tracking-iot-field-hint {
    margin: 0.35rem 0 0;
    font-size: 0.68rem;
    line-height: 1.35;
    color: var(--simoab-text-muted, #9ca3af);
}

.tracking-iot-field-hint.is-warn {
    color: #d97706;
}

.tracking-iot-form__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding-top: 0.15rem;
    border-top: 1px solid var(--simoab-border);
}

.tracking-iot-form__note {
    margin: 0;
    font-size: 0.72rem;
    color: var(--simoab-text-muted, #9ca3af);
    max-width: 28rem;
}

.tracking-iot-token {
    margin-top: 0.9rem;
    padding: 0.85rem 0.95rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(245, 197, 24, 0.45);
    background: rgba(245, 197, 24, 0.08);
}

.tracking-iot-token__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.55rem;
    margin-bottom: 0.7rem;
}

.tracking-iot-token__title {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--simoab-text);
}

.tracking-iot-token__sub {
    margin: 0.15rem 0 0;
    font-size: 0.7rem;
    color: var(--simoab-text-muted, #9ca3af);
}

.tracking-iot-token__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.55rem;
}

@media (min-width: 768px) {
    .tracking-iot-token__grid {
        grid-template-columns: 1fr 1fr;
    }
}

.tracking-iot-token__field {
    position: relative;
    padding: 0.55rem 0.65rem 0.55rem;
    border-radius: 0.55rem;
    border: 1px solid rgba(245, 197, 24, 0.25);
    background: rgba(15, 23, 42, 0.04);
}

.tracking-iot-token__field span {
    display: block;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--simoab-text-muted, #9ca3af);
    margin-bottom: 0.25rem;
}

.tracking-iot-token__field code {
    display: block;
    font-size: 0.72rem;
    word-break: break-all;
    color: #b45309;
    padding-right: 3.2rem;
}

.tracking-iot-copy {
    position: absolute;
    top: 0.45rem;
    right: 0.45rem;
    border: 1px solid var(--simoab-border);
    background: var(--simoab-surface, #fff);
    color: var(--simoab-text);
    font-size: 0.62rem;
    font-weight: 700;
    padding: 0.2rem 0.45rem;
    border-radius: 0.4rem;
    cursor: pointer;
}

.tracking-iot-curl {
    margin: 0.65rem 0 0;
    padding: 0.65rem 0.75rem;
    border-radius: 0.55rem;
    background: #0f172a;
    color: #e2e8f0;
    font-size: 0.68rem;
    line-height: 1.45;
    overflow-x: auto;
}

.tracking-iot-token__hint {
    margin: 0.55rem 0 0;
    font-size: 0.68rem;
    color: var(--simoab-text-muted, #9ca3af);
}

.tracking-iot-table-wrap {
    margin-top: 1rem;
}

.tracking-iot-table-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.45rem;
}

.tracking-iot-table-title {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--simoab-text);
}

.tracking-iot-table-summary {
    margin: 0;
    font-size: 0.68rem;
    color: var(--simoab-text-muted, #9ca3af);
}

.tracking-iot-status {
    display: inline-flex;
    align-items: center;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 0.2rem 0.45rem;
    border-radius: 999px;
    border: 1px solid transparent;
}

.tracking-iot-status--online {
    color: #065f46;
    background: #d1fae5;
    border-color: #6ee7b7;
}

.tracking-iot-status--stale {
    color: #6b7280;
    background: #f3f4f6;
    border-color: #d1d5db;
}

.tracking-iot-status--pending {
    color: #92400e;
    background: #fef3c7;
    border-color: #fcd34d;
}

.tracking-iot-status--inactive {
    color: #991b1b;
    background: #fee2e2;
    border-color: #fca5a5;
}

html.dark .tracking-iot-badge.is-on,
html[data-theme="dark"] .tracking-iot-badge.is-on {
    color: #6ee7b7;
    background: rgba(52, 211, 153, 0.12);
    border-color: rgba(52, 211, 153, 0.35);
}

html.dark .tracking-iot-token__field code,
html[data-theme="dark"] .tracking-iot-token__field code {
    color: #f5c518;
}

html.dark .tracking-iot-token__field,
html[data-theme="dark"] .tracking-iot-token__field {
    background: rgba(2, 6, 23, 0.35);
}

.tracking-project-bar__btns {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    justify-content: flex-end;
}

.tracking-settings-checks {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    max-width: 36rem;
}

.tracking-reconcile-item {
    border: 1px solid var(--simoab-border);
    border-radius: 0.55rem;
    padding: 0.55rem 0.65rem;
    border-left-width: 3px;
}

.tracking-reconcile-item--ok { border-left-color: #34d399; }
.tracking-reconcile-item--warn { border-left-color: #fbbf24; }
.tracking-reconcile-item--critical { border-left-color: #f87171; }
.tracking-reconcile-item--missing_official,
.tracking-reconcile-item--gps_only { border-left-color: #9ca3af; }

.tracking-reconcile-status {
    color: var(--simoab-text-muted, #9ca3af);
}

.tracking-reconcile-item--critical .tracking-reconcile-status { color: #f87171; }
.tracking-reconcile-item--warn .tracking-reconcile-status { color: #fbbf24; }
.tracking-reconcile-item--ok .tracking-reconcile-status { color: #34d399; }

.tracking-replay-bar {
    position: absolute;
    left: 50%;
    bottom: 0.85rem;
    transform: translateX(-50%);
    z-index: 520;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    width: min(520px, calc(100% - 1.5rem));
    padding: 0.45rem 0.55rem;
    border-radius: 0.75rem;
    background: rgba(15, 23, 42, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(10px);
}

.tracking-replay-btn {
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.06);
    color: #f8fafc;
    width: 2rem;
    height: 2rem;
    border-radius: 0.45rem;
    font-size: 0.7rem;
    cursor: pointer;
    flex-shrink: 0;
}

.tracking-replay-btn:hover {
    border-color: rgba(245, 197, 24, 0.5);
    color: #f5c518;
}

.tracking-replay-scrubber {
    flex: 1;
    min-width: 0;
    accent-color: #f5c518;
}

.tracking-replay-time {
    font-size: 0.65rem;
    color: #cbd5e1;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    min-width: 6.5rem;
    text-align: right;
}

.tracking-replay-speed {
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(2, 6, 23, 0.55);
    color: #e2e8f0;
    font-size: 0.65rem;
    border-radius: 0.4rem;
    padding: 0.25rem 0.3rem;
}

#tracking-calibration-list .tracking-reconcile-item {
    background: var(--simoab-surface, transparent);
}

.tracking-wa-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 3.75rem;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    padding: 0.15rem 0.45rem;
    border-radius: 0.3rem;
    line-height: 1.2;
}

.tracking-wa-status--sent { color: #065f46; background: rgba(52, 211, 153, 0.2); }
.tracking-wa-status--failed { color: #991b1b; background: rgba(248, 113, 113, 0.2); }
.tracking-wa-status--skipped { color: #92400e; background: rgba(251, 191, 36, 0.2); }
.tracking-wa-status--queued { color: #1e3a5f; background: rgba(147, 197, 253, 0.25); }

#sys-whatsapp-logs-table {
    table-layout: fixed;
    width: 100%;
    min-width: 44rem;
}

#sys-whatsapp-logs-table col.wa-col-time { width: 10.75rem; }
#sys-whatsapp-logs-table col.wa-col-dest { width: 9.25rem; }
#sys-whatsapp-logs-table col.wa-col-status { width: 6.25rem; }
#sys-whatsapp-logs-table col.wa-col-channel { width: 6.25rem; }
#sys-whatsapp-logs-table col.wa-col-msg { width: auto; }

#sys-whatsapp-logs-table th,
#sys-whatsapp-logs-table td {
    vertical-align: middle;
    text-align: left;
    box-sizing: border-box;
}

#sys-whatsapp-logs-table .wa-cell-time,
#sys-whatsapp-logs-table .wa-cell-dest {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#sys-whatsapp-logs-table .wa-cell-channel {
    text-transform: lowercase;
    color: var(--simoab-text-muted, #6b7280);
    white-space: nowrap;
}

#sys-whatsapp-logs-table .wa-cell-msg {
    color: var(--simoab-text-muted, #6b7280);
    font-size: 0.8125rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#sys-whatsapp-logs-panel .module-table-header {
    align-items: center;
    flex-wrap: wrap;
}

.tracking-map-shell .leaflet-control-zoom {
    border: none !important;
    box-shadow: none !important;
    margin-right: 0.75rem !important;
    margin-bottom: 0.75rem !important;
}

.tracking-map-shell .leaflet-control-zoom a {
    width: 2rem !important;
    height: 2rem !important;
    line-height: 2rem !important;
    background: rgba(15, 23, 42, 0.85) !important;
    color: #e2e8f0 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    backdrop-filter: blur(8px);
}

.tracking-map-shell .leaflet-control-zoom a:hover {
    color: #f5c518 !important;
    border-color: rgba(245, 197, 24, 0.45) !important;
}

/* Ambang efisiensi BBM realtime — di bawah field liter */
.fuel-threshold-panel {
    border-radius: 0.75rem;
    border: 1px solid #d1d5db;
    background: #f8fafc;
    padding: 0.9rem 1rem;
    color: #111827;
}

.fuel-threshold-panel__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}

.fuel-threshold-panel__title {
    font-size: 0.8rem;
    font-weight: 700;
    color: #111827;
    line-height: 1.3;
}

.fuel-threshold-panel__sub {
    margin-top: 0.15rem;
    font-size: 0.68rem;
    color: #4b5563;
    line-height: 1.35;
}

.fuel-threshold-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 0.28rem 0.55rem;
    border-radius: 999px;
    border: 1px solid #9ca3af;
    color: #374151;
    background: #fff;
    white-space: nowrap;
    flex-shrink: 0;
}

.fuel-threshold-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
}

@media (min-width: 480px) {
    .fuel-threshold-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.fuel-threshold-cell {
    border: 1px solid #e5e7eb;
    border-radius: 0.55rem;
    background: #fff;
    padding: 0.55rem 0.6rem;
    min-width: 0;
}

.fuel-threshold-label {
    font-size: 0.65rem;
    font-weight: 600;
    color: #4b5563;
    margin-bottom: 0.2rem;
}

.fuel-threshold-value {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.9rem;
    font-weight: 700;
    color: #111827;
    line-height: 1.25;
}

.fuel-threshold-meta {
    margin-top: 0.15rem;
    font-size: 0.65rem;
    color: #6b7280;
    line-height: 1.3;
}

.fuel-threshold-analysis {
    margin-top: 0.75rem;
    border-top: 1px solid #e5e7eb;
    padding-top: 0.7rem;
}

.fuel-threshold-analysis__title {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #374151;
    margin-bottom: 0.35rem;
}

.fuel-threshold-hint {
    font-size: 0.78rem;
    line-height: 1.45;
    font-weight: 600;
    color: #1f2937;
}

.fuel-threshold-points {
    margin-top: 0.45rem;
    padding-left: 1.1rem;
    list-style: disc;
    font-size: 0.72rem;
    line-height: 1.45;
    color: #374151;
}

.fuel-threshold-points li + li {
    margin-top: 0.2rem;
}

.fuel-threshold-panel.is-ok {
    border-color: #6ee7b7;
    background: #ecfdf5;
}
.fuel-threshold-panel.is-ok .fuel-threshold-badge {
    color: #065f46;
    border-color: #34d399;
    background: #d1fae5;
}
.fuel-threshold-panel.is-ok .fuel-threshold-analysis {
    border-top-color: #a7f3d0;
}

.fuel-threshold-panel.is-warn {
    border-color: #fcd34d;
    background: #fffbeb;
}
.fuel-threshold-panel.is-warn .fuel-threshold-badge {
    color: #92400e;
    border-color: #f59e0b;
    background: #fef3c7;
}
.fuel-threshold-panel.is-warn .fuel-threshold-analysis {
    border-top-color: #fde68a;
}

.fuel-threshold-panel.is-block {
    border-color: #fca5a5;
    background: #fef2f2;
}
.fuel-threshold-panel.is-block .fuel-threshold-badge {
    color: #991b1b;
    border-color: #f87171;
    background: #fee2e2;
}
.fuel-threshold-panel.is-block .fuel-threshold-value,
.fuel-threshold-panel.is-block .fuel-threshold-hint {
    color: #7f1d1d;
}
.fuel-threshold-panel.is-block .fuel-threshold-meta {
    color: #9f1239;
}
.fuel-threshold-panel.is-block .fuel-threshold-points {
    color: #7f1d1d;
}
.fuel-threshold-panel.is-block .fuel-threshold-analysis {
    border-top-color: #fecaca;
    background: rgba(254, 226, 226, 0.55);
    margin-left: -0.25rem;
    margin-right: -0.25rem;
    padding: 0.7rem 0.75rem 0.55rem;
    border-radius: 0.5rem;
}
.fuel-threshold-panel.is-block .fuel-threshold-analysis__title {
    color: #991b1b;
}

.fuel-threshold-panel.is-pending {
    border-color: #d1d5db;
    background: #f8fafc;
}
.fuel-threshold-panel.is-pending .fuel-threshold-badge {
    color: #4b5563;
    border-color: #9ca3af;
    background: #fff;
}

html.dark .fuel-threshold-panel,
html[data-theme="dark"] .fuel-threshold-panel {
    border-color: rgba(255, 255, 255, 0.14);
    background: rgba(15, 23, 42, 0.55);
    color: #f3f4f6;
}
html.dark .fuel-threshold-panel__title,
html[data-theme="dark"] .fuel-threshold-panel__title,
html.dark .fuel-threshold-value,
html[data-theme="dark"] .fuel-threshold-value,
html.dark .fuel-threshold-hint,
html[data-theme="dark"] .fuel-threshold-hint {
    color: #f9fafb;
}
html.dark .fuel-threshold-panel__sub,
html[data-theme="dark"] .fuel-threshold-panel__sub,
html.dark .fuel-threshold-label,
html[data-theme="dark"] .fuel-threshold-label,
html.dark .fuel-threshold-meta,
html[data-theme="dark"] .fuel-threshold-meta,
html.dark .fuel-threshold-points,
html[data-theme="dark"] .fuel-threshold-points {
    color: #d1d5db;
}
html.dark .fuel-threshold-cell,
html[data-theme="dark"] .fuel-threshold-cell {
    background: rgba(2, 6, 23, 0.45);
    border-color: rgba(255, 255, 255, 0.1);
}
html.dark .fuel-threshold-analysis,
html[data-theme="dark"] .fuel-threshold-analysis {
    border-top-color: rgba(255, 255, 255, 0.12);
}

/* ============================================================
   Time Input (jam Indonesia — Pagi/Siang/Sore/Malam)
   ============================================================ */
.simoab-time-input {
    width: 100%;
    min-width: 0;
}

.simoab-time-range {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.625rem;
}

@media (min-width: 640px) {
    .simoab-time-range {
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        align-items: end;
        gap: 0.5rem;
    }
}

.simoab-time-field {
    min-width: 0;
}

.simoab-time-field-label {
    display: block;
    margin-bottom: 0.25rem;
}

.simoab-time-range-sep {
    display: none;
}

@media (min-width: 640px) {
    .simoab-time-range-sep {
        display: flex;
        align-items: center;
        justify-content: center;
        align-self: end;
        width: 1.75rem;
        height: 2.75rem;
        margin-bottom: 0;
        color: var(--simoab-muted);
        font-size: 1rem;
        line-height: 1;
        user-select: none;
    }
}

.simoab-time-range-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.375rem 0.75rem;
    margin-top: 0.5rem;
    padding: 0.625rem 0.75rem;
    font-size: 0.75rem;
    color: var(--simoab-subtle);
    background-color: color-mix(in srgb, var(--simoab-input) 88%, var(--simoab-accent) 12%);
    border: 1px solid var(--simoab-border);
    border-radius: 0.5rem;
}

.simoab-time-range-summary strong {
    color: var(--simoab-text);
    font-weight: 600;
}

.simoab-time-range-summary.is-warning {
    color: var(--simoab-warn);
    border-color: var(--simoab-warn-border);
    background-color: var(--simoab-warn-bg);
}

.simoab-time-range-summary.is-warning strong {
    color: var(--simoab-warn);
}

.simoab-time-input-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    min-width: 0;
    min-height: var(--simoab-form-min-height);
    padding: 0.25rem 0.5rem 0.25rem 0.625rem;
    background-color: var(--simoab-input);
    border: 1px solid var(--simoab-border);
    border-radius: var(--simoab-form-radius);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

@media (min-width: 640px) {
    .simoab-time-input-row {
        min-height: 2.625rem;
    }
}

.simoab-time-input-row:focus-within {
    border-color: var(--simoab-accent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--simoab-accent) 20%, transparent);
}

.simoab-time-input.is-complete .simoab-time-input-row {
    border-color: color-mix(in srgb, var(--simoab-border) 70%, var(--simoab-accent) 30%);
}

/* Native time input — tap anywhere opens picker on mobile */
.simoab-time-native {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    height: 2.25rem;
    padding: 0 0.25rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: var(--simoab-form-font-size);
    font-weight: 500;
    line-height: var(--simoab-form-line-height);
    color: var(--simoab-text);
    background: transparent;
    border: none;
    outline: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.simoab-time-native::-webkit-calendar-picker-indicator {
    width: 1.375rem;
    height: 1.375rem;
    margin-left: 0.25rem;
    cursor: pointer;
    opacity: 0.75;
    filter: var(--simoab-time-picker-filter, none);
}

.simoab-time-native:focus::-webkit-calendar-picker-indicator {
    opacity: 1;
}

.simoab-time-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-top: 0.375rem;
}

.simoab-time-preset {
    flex: 1 1 auto;
    min-width: 3.25rem;
    padding: 0.375rem 0.5rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: var(--simoab-form-font-size);
    font-weight: 500;
    line-height: var(--simoab-form-line-height);
    color: var(--simoab-muted);
    background: var(--simoab-input);
    border: 1px solid var(--simoab-border);
    border-radius: 0.375rem;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.simoab-time-preset:hover {
    color: var(--simoab-text);
    border-color: color-mix(in srgb, var(--simoab-border) 60%, var(--simoab-accent) 40%);
}

.simoab-time-preset.is-active {
    color: var(--simoab-accent-fg);
    background: var(--simoab-accent-bg);
    border-color: var(--simoab-accent-border);
}

.simoab-time-meta {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}

.simoab-time-period-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 2.75rem;
    padding: 0.3125rem 0.5rem;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-radius: 9999px;
    border: 1px solid transparent;
    user-select: none;
    white-space: nowrap;
    line-height: 1.1;
}

@media (min-width: 640px) {
    .simoab-time-period-badge {
        min-width: 3rem;
        font-size: 0.6875rem;
        padding: 0.25rem 0.5625rem;
    }
}

.simoab-time-period-badge[data-period="pagi"] {
    color: var(--simoab-accent-fg);
    background: var(--simoab-accent-bg);
    border-color: var(--simoab-accent-border);
}

.simoab-time-period-badge[data-period="siang"] {
    color: var(--simoab-warn);
    background: var(--simoab-warn-bg);
    border-color: var(--simoab-warn-border);
}

.simoab-time-period-badge[data-period="sore"] {
    color: #D97706;
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.25);
}

.simoab-time-period-badge[data-period="malam"] {
    color: #6366F1;
    background: rgba(99, 102, 241, 0.12);
    border-color: rgba(99, 102, 241, 0.25);
}

/* ============================================================
   Status badges — sistem semantik (semua portal & modul)
   Tone: success | warning | danger | info | accent | muted
   Legacy: .badge-operasi|standby|rusak|maintenance|disposal
   ============================================================ */
:root,
[data-theme="dark"] {
    --badge-success-bg: rgba(34, 197, 94, 0.14);
    --badge-success-fg: #4ADE80;
    --badge-success-bd: rgba(34, 197, 94, 0.32);
    --badge-warning-bg: rgba(245, 158, 11, 0.14);
    --badge-warning-fg: #FBBF24;
    --badge-warning-bd: rgba(245, 158, 11, 0.32);
    --badge-danger-bg: rgba(239, 68, 68, 0.14);
    --badge-danger-fg: #F87171;
    --badge-danger-bd: rgba(239, 68, 68, 0.32);
    --badge-info-bg: rgba(59, 130, 246, 0.14);
    --badge-info-fg: #60A5FA;
    --badge-info-bd: rgba(59, 130, 246, 0.32);
    --badge-accent-bg: var(--simoab-accent-bg);
    --badge-accent-fg: var(--simoab-accent-fg);
    --badge-accent-bd: var(--simoab-accent-border);
    --badge-muted-bg: rgba(148, 163, 184, 0.1);
    --badge-muted-fg: rgba(255, 255, 255, 0.55);
    --badge-muted-bd: rgba(148, 163, 184, 0.22);
}

[data-theme="light"] {
    --badge-success-bg: rgba(22, 163, 74, 0.1);
    --badge-success-fg: #15803D;
    --badge-success-bd: rgba(22, 163, 74, 0.28);
    --badge-warning-bg: rgba(180, 83, 9, 0.1);
    --badge-warning-fg: #B45309;
    --badge-warning-bd: rgba(180, 83, 9, 0.28);
    --badge-danger-bg: rgba(185, 28, 28, 0.1);
    --badge-danger-fg: #B91C1C;
    --badge-danger-bd: rgba(185, 28, 28, 0.28);
    --badge-info-bg: rgba(37, 99, 235, 0.1);
    --badge-info-fg: #1D4ED8;
    --badge-info-bd: rgba(37, 99, 235, 0.28);
    --badge-accent-bg: var(--simoab-accent-bg);
    --badge-accent-fg: var(--simoab-accent-fg);
    --badge-accent-bd: var(--simoab-accent-border);
    --badge-muted-bg: rgba(100, 116, 139, 0.08);
    --badge-muted-fg: #64748B;
    --badge-muted-bd: rgba(100, 116, 139, 0.22);
}

.simoab-badge,
.badge-operasi,
.badge-standby,
.badge-rusak,
.badge-maintenance,
.badge-disposal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    max-width: 100%;
    padding: 0.2rem 0.625rem;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.25rem;
    letter-spacing: 0.01em;
    white-space: nowrap;
    vertical-align: middle;
    box-sizing: border-box;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.simoab-badge--sm {
    padding: 0.1rem 0.5rem;
    font-size: 0.625rem;
    line-height: 1.1rem;
}

.simoab-badge--dot::before {
    content: '';
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 999px;
    background: currentColor;
    flex-shrink: 0;
    opacity: 0.9;
}

.simoab-badge--success {
    background: var(--badge-success-bg);
    color: var(--badge-success-fg);
    border-color: var(--badge-success-bd);
}

.simoab-badge--warning,
.badge-maintenance {
    background: var(--badge-warning-bg);
    color: var(--badge-warning-fg);
    border-color: var(--badge-warning-bd);
}

.simoab-badge--danger,
.badge-rusak {
    background: var(--badge-danger-bg);
    color: var(--badge-danger-fg);
    border-color: var(--badge-danger-bd);
}

.simoab-badge--info {
    background: var(--badge-info-bg);
    color: var(--badge-info-fg);
    border-color: var(--badge-info-bd);
}

.simoab-badge--accent,
.badge-operasi {
    background: var(--badge-accent-bg);
    color: var(--badge-accent-fg);
    border-color: var(--badge-accent-bd);
}

.simoab-badge--muted,
.badge-standby,
.badge-disposal {
    background: var(--badge-muted-bg);
    color: var(--badge-muted-fg);
    border-color: var(--badge-muted-bd);
}

/* ============================================================
   Table row hover
   ============================================================ */
.theme-table-row:hover {
    background-color: var(--simoab-hover);
}

/* ============================================================
   Animations
   ============================================================ */
@keyframes slideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

.toast-enter {
    animation: slideIn 0.3s ease-out;
}

/* ============================================================
   Theme toggle button
   ============================================================ */
.theme-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    border-radius: 0.5rem;
    border: 1px solid var(--simoab-border);
    background: var(--simoab-surface);
    color: var(--simoab-text-muted);
    transition: all 0.15s ease;
    cursor: pointer;
}

.theme-toggle-btn:hover {
    background: var(--simoab-hover);
    color: var(--simoab-text);
    border-color: var(--simoab-border-light);
}

.theme-toggle-btn svg {
    width: 1.125rem;
    height: 1.125rem;
}

/* ============================================================
   Landing hero glow
   ============================================================ */
.hero-glow {
    background: radial-gradient(ellipse at top, var(--simoab-hero-glow) 0%, transparent 50%);
}

.cta-glow {
    background: radial-gradient(circle at center, var(--simoab-hero-glow) 0%, transparent 70%);
}

/* ============================================================
   Landing — fleet showcase & motion
   ============================================================ */
.animate-fade-up {
    animation: landingFadeUp .7s ease both;
}
.lg\:animation-delay-200 { animation-delay: .15s; }

@keyframes landingFadeUp {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: translateY(0); }
}

[data-reveal] {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .6s ease, transform .6s ease;
}
[data-reveal].is-visible {
    opacity: 1;
    transform: none;
}

.landing-marquee {
    overflow: hidden;
}
.landing-marquee__track {
    display: flex;
    gap: 1rem;
    width: max-content;
    animation: landingMarquee 42s linear infinite;
}
.landing-marquee.is-paused .landing-marquee__track {
    animation-play-state: paused;
}
.landing-marquee__item {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-width: 11.5rem;
    padding: .65rem 1rem;
    border-radius: .9rem;
    border: 1px solid var(--simoab-border);
    background: var(--simoab-surface);
}

@keyframes landingMarquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

.landing-fleet-card {
    position: relative;
    overflow: hidden;
    border-radius: 1rem;
    border: 1px solid var(--simoab-border);
    background: var(--simoab-surface);
    padding: .9rem;
    transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.landing-fleet-card:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--simoab-yellow, #F5C518) 45%, var(--simoab-border));
}
.landing-fleet-card.is-active {
    border-color: color-mix(in srgb, #F5C518 55%, var(--simoab-border));
    box-shadow: 0 0 0 1px color-mix(in srgb, #F5C518 25%, transparent), 0 12px 30px rgba(0,0,0,.18);
}
.landing-fleet-card__glow {
    position: absolute;
    inset: 0;
    opacity: .55;
    pointer-events: none;
}
.landing-fleet-card__img {
    position: relative;
    width: 100%;
    height: 5.25rem;
    object-fit: contain;
    object-position: center;
    border-radius: 0;
    background: transparent;
    filter: drop-shadow(0 8px 14px rgba(0,0,0,.18));
    transition: transform .35s ease;
}
.landing-marquee__img {
    width: 4.75rem;
    height: 3.1rem;
    object-fit: contain;
    object-position: center;
    border-radius: 0;
    background: transparent;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,.14));
}
.landing-fleet-preview__img {
    position: relative;
    width: min(88%, 19rem);
    height: auto;
    border-radius: 0;
    background: transparent;
    filter: drop-shadow(0 18px 24px rgba(0,0,0,.28));
    transition: opacity .2s ease, transform .35s ease;
}
.landing-unit-chip__img {
    width: 3.75rem;
    height: 2.5rem;
    object-fit: contain;
    object-position: center;
    flex-shrink: 0;
    border-radius: 0;
    background: transparent;
    filter: drop-shadow(0 3px 6px rgba(0,0,0,.12));
}
.landing-hero-float img,
.landing-hero-dash-row img {
    border-radius: 0;
    background: transparent;
    object-fit: contain;
    filter: drop-shadow(0 6px 12px rgba(0,0,0,.16));
}
.landing-fleet-card:hover .landing-fleet-card__img,
.landing-fleet-card.is-active .landing-fleet-card__img {
    transform: scale(1.06) translateY(-2px);
}

.landing-fleet-preview {
    border-radius: 1.25rem;
    border: 1px solid var(--simoab-border);
    background: var(--simoab-surface);
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0,0,0,.22);
    transition: transform .2s ease, box-shadow .3s ease;
    will-change: transform;
}
.landing-fleet-preview.is-pulse {
    box-shadow: 0 0 0 1px color-mix(in srgb, #F5C518 35%, transparent), 0 22px 55px rgba(0,0,0,.28);
}
.landing-fleet-preview__stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 13rem;
    background:
        radial-gradient(circle at 50% 40%, color-mix(in srgb, #F5C518 16%, transparent), transparent 55%),
        linear-gradient(180deg, var(--simoab-input), var(--simoab-surface));
}
.landing-fleet-preview__ring {
    position: absolute;
    width: 11rem;
    height: 11rem;
    border-radius: 999px;
    border: 1px dashed color-mix(in srgb, #F5C518 35%, transparent);
    animation: landingSpin 18s linear infinite;
}
.landing-fleet-preview__img.is-switching {
    opacity: 0;
    transform: scale(.92) translateY(8px);
}

@keyframes landingSpin {
    to { transform: rotate(360deg); }
}

.landing-unit-chip {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem .9rem;
    border-radius: .9rem;
    border: 1px solid var(--simoab-border);
    background: var(--simoab-surface);
    transition: transform .2s ease, border-color .2s ease;
}
.landing-unit-chip.is-lifted {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, #F5C518 40%, var(--simoab-border));
}

.landing-hero-visual {
    position: relative;
}
.landing-hero-float {
    position: absolute;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .55rem .7rem;
    border-radius: .85rem;
    border: 1px solid var(--simoab-border);
    background: color-mix(in srgb, var(--simoab-surface) 92%, transparent);
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 30px rgba(0,0,0,.2);
    transition: transform .15s ease;
}
.landing-hero-float img {
    width: 2.75rem;
    height: 1.9rem;
    object-fit: contain;
}
.landing-hero-float--a { top: -0.5rem; left: -0.25rem; animation: landingFloat 4.5s ease-in-out infinite; }
.landing-hero-float--b { right: -0.35rem; bottom: 18%; animation: landingFloat 5.2s ease-in-out infinite .6s; }
.landing-hero-float--c { left: 8%; bottom: -0.75rem; animation: landingFloat 4.8s ease-in-out infinite 1.1s; }

@keyframes landingFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.landing-hero-dash-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .55rem .7rem;
    border-radius: .7rem;
    border: 1px solid color-mix(in srgb, var(--simoab-border) 80%, transparent);
    background: var(--simoab-input);
}
.landing-hero-dash-row img {
    width: 2.6rem;
    height: 1.8rem;
    object-fit: contain;
}

@media (prefers-reduced-motion: reduce) {
    .animate-fade-up,
    .landing-marquee__track,
    .landing-fleet-preview__ring,
    .landing-hero-float--a,
    .landing-hero-float--b,
    .landing-hero-float--c {
        animation: none !important;
    }
    [data-reveal] {
        opacity: 1;
        transform: none;
    }
}

/* ============================================================
   Landing — industrial equipment buttons (steel + hazard yellow)
   ============================================================ */
.landing-btn {
    --lb-steel-0: #3d4652;
    --lb-steel-1: #1c222b;
    --lb-steel-2: #0e1218;
    --lb-hazard: #F5C518;
    --lb-hazard-deep: #C9960F;
    --lb-hazard-glow: rgba(245, 197, 24, 0.35);

    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.7rem 1.35rem;
    border-radius: 0.7rem;
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    isolation: isolate;
    overflow: hidden;
    transition:
        transform 0.18s ease,
        box-shadow 0.22s ease,
        border-color 0.18s ease,
        background 0.18s ease,
        color 0.18s ease,
        filter 0.18s ease;
    -webkit-tap-highlight-color: transparent;
}
.landing-btn:focus-visible {
    outline: 2px solid var(--lb-hazard);
    outline-offset: 2px;
}
.landing-btn:disabled,
.landing-btn.is-busy {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none !important;
    filter: grayscale(0.15);
}
.landing-btn__shine {
    pointer-events: none;
    position: absolute;
    inset: 0;
    background: linear-gradient(
        115deg,
        transparent 0%,
        rgba(255, 255, 255, 0.18) 42%,
        transparent 58%
    );
    transform: translateX(-120%);
    transition: transform 0.55s ease;
    z-index: 1;
}
.landing-btn:hover .landing-btn__shine {
    transform: translateX(120%);
}
.landing-btn__label {
    position: relative;
    z-index: 2;
}
.landing-btn svg {
    position: relative;
    z-index: 2;
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

/* Primary — hazard yellow like excavator body */
.landing-btn--primary {
    color: #12161c;
    background:
        linear-gradient(180deg, #FFE566 0%, var(--lb-hazard) 42%, var(--lb-hazard-deep) 100%);
    border-color: color-mix(in srgb, #8a6a08 55%, #1a1f26);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.45),
        inset 0 -2px 0 rgba(0, 0, 0, 0.18),
        0 1px 0 rgba(255, 255, 255, 0.06),
        0 8px 22px var(--lb-hazard-glow);
}
.landing-btn--primary:hover {
    transform: translateY(-2px);
    filter: brightness(1.04);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        inset 0 -2px 0 rgba(0, 0, 0, 0.2),
        0 12px 28px rgba(245, 197, 24, 0.42);
}
.landing-btn--primary:active {
    transform: translateY(0);
    filter: brightness(0.97);
}

/* Steel — charcoal machine panel */
.landing-btn--steel {
    color: #f3f5f7;
    background:
        linear-gradient(180deg, var(--lb-steel-0) 0%, var(--lb-steel-1) 55%, var(--lb-steel-2) 100%);
    border-color: color-mix(in srgb, var(--lb-hazard) 28%, #4a5563);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        inset 0 -2px 0 rgba(0, 0, 0, 0.35),
        0 8px 20px rgba(0, 0, 0, 0.28);
}
.landing-btn--steel::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, #FFE566, var(--lb-hazard-deep));
    z-index: 2;
}
.landing-btn--steel:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--lb-hazard) 55%, #4a5563);
    color: #fff;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        0 0 0 1px color-mix(in srgb, var(--lb-hazard) 20%, transparent),
        0 12px 26px rgba(0, 0, 0, 0.35);
}

/* Ghost / outline — hazard edge on dark */
.landing-btn--ghost {
    color: var(--lb-hazard);
    background: color-mix(in srgb, var(--lb-steel-1) 72%, transparent);
    border-color: color-mix(in srgb, var(--lb-hazard) 42%, var(--simoab-border));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 4px 14px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(6px);
}
.landing-btn--ghost:hover {
    transform: translateY(-2px);
    color: #12161c;
    background: linear-gradient(180deg, #FFE566 0%, var(--lb-hazard) 100%);
    border-color: var(--lb-hazard-deep);
    box-shadow: 0 10px 24px var(--lb-hazard-glow);
}

.landing-btn--block {
    width: 100%;
}
.landing-btn--sm {
    padding: 0.5rem 0.95rem;
    font-size: 0.8125rem;
    border-radius: 0.6rem;
}
.landing-btn--lg {
    padding: 0.85rem 1.65rem;
    font-size: 0.9375rem;
    border-radius: 0.8rem;
}

.landing-badge-hazard {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.7rem;
    border-radius: 999px;
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #12161c;
    background: linear-gradient(180deg, #FFE566, var(--lb-hazard-deep, #C9960F));
    border: 1px solid color-mix(in srgb, #8a6a08 50%, #1a1f26);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 4px 12px rgba(245,197,24,.25);
}

/* Landing Tentang — OG banner as visual backdrop (copy lives in readable panel) */
.about-og-hero {
    position: relative;
    overflow: hidden;
    margin-top: 4rem;
    min-height: clamp(22rem, 48vw, 26rem);
    border-bottom: 1px solid var(--simoab-border);
    background: var(--simoab-bg);
}
.about-og-hero__media {
    position: absolute;
    inset: 0;
}
.about-og-hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Fokus ke visual alat di kanan; teks baked-in di banner OG diredam scrim kiri */
    object-position: 85% center;
    transform: scale(1.04);
    filter: saturate(0.92) brightness(0.88);
}
.about-og-hero__scrim {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg,
            var(--simoab-bg) 0%,
            color-mix(in srgb, var(--simoab-bg) 96%, transparent) 28%,
            color-mix(in srgb, var(--simoab-bg) 72%, transparent) 52%,
            color-mix(in srgb, var(--simoab-bg) 28%, transparent) 78%,
            color-mix(in srgb, var(--simoab-bg) 12%, transparent) 100%),
        linear-gradient(180deg,
            color-mix(in srgb, var(--simoab-bg) 55%, transparent) 0%,
            transparent 35%,
            color-mix(in srgb, var(--simoab-bg) 70%, transparent) 100%);
    pointer-events: none;
}
.about-og-hero__inner {
    position: relative;
    z-index: 1;
    max-width: 80rem;
    margin: 0 auto;
    padding: 5.5rem 1rem 2.5rem;
    display: flex;
    align-items: flex-end;
    min-height: inherit;
}
@media (min-width: 640px) {
    .about-og-hero__inner { padding-left: 1.5rem; padding-right: 1.5rem; }
}
@media (min-width: 1024px) {
    .about-og-hero__inner { padding: 6rem 2rem 3rem; }
}
.about-og-hero__panel {
    width: min(100%, 34rem);
    padding: 1.35rem 1.4rem 1.45rem;
    border-radius: 1.1rem;
    border: 1px solid color-mix(in srgb, var(--simoab-border) 80%, #F5C518);
    background: color-mix(in srgb, var(--simoab-surface) 92%, transparent);
    backdrop-filter: blur(14px);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.35);
}
.about-og-hero__brand {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-top: 0.35rem;
}
.about-og-hero__logo {
    width: 3rem;
    height: 3rem;
    border-radius: 0.75rem;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, #F5C518 40%, var(--simoab-border));
    background: var(--simoab-input);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.about-og-hero__logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 0.3rem;
}
.about-og-hero__logo-fallback {
    font-size: 0.8rem;
    font-weight: 800;
    color: #F5C518;
}
.about-og-hero__eyebrow {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #F5C518;
}
.about-og-hero__title {
    margin: 0;
    font-size: clamp(1.55rem, 3.2vw, 2.15rem);
    font-weight: 800;
    color: var(--simoab-text);
    line-height: 1.2;
}
.about-og-hero__title span {
    color: #F5C518;
}
.about-og-hero__tagline {
    margin: 0.75rem 0 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--simoab-text);
    line-height: 1.4;
}
.about-og-hero__lead {
    margin: 0.65rem 0 0;
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--simoab-text-muted);
}
.about-og-hero__lead strong {
    color: var(--simoab-text);
    font-weight: 600;
}
.about-og-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-top: 1.15rem;
}
.about-og-hero--empty .about-og-hero__media {
    background:
        radial-gradient(ellipse at 75% 40%, rgba(245,197,24,.16), transparent 55%),
        linear-gradient(135deg, var(--simoab-elevated), var(--simoab-input));
}
.about-og-hero--empty .about-og-hero__media img {
    display: none;
}

.platform-og-preview-card {
    position: relative;
    overflow: hidden;
    border-radius: 0.85rem;
    border: 1px solid var(--simoab-border);
    background: var(--simoab-input);
    aspect-ratio: 1200 / 630;
    max-height: 11rem;
}
.platform-og-preview-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.platform-og-preview-card__label {
    position: absolute;
    left: 0.65rem;
    bottom: 0.65rem;
    padding: 0.2rem 0.55rem;
    border-radius: 0.4rem;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #12161c;
    background: rgba(245, 197, 24, 0.92);
    backdrop-filter: blur(4px);
}

/* Sidebar — selalu gelap di semua tema */
#sidebar {
    background-color: var(--simoab-sidebar-bg);
    border-color: var(--simoab-sidebar-border);
    color: var(--simoab-sidebar-text);
}

#sidebar .sidebar-text { color: var(--simoab-sidebar-text); }
#sidebar .sidebar-muted { color: var(--simoab-sidebar-text-muted); }
#sidebar .sidebar-subtle { color: var(--simoab-sidebar-text-subtle); }
#sidebar .sidebar-border { border-color: var(--simoab-sidebar-border); }

#sidebar .sidebar-link {
    color: var(--simoab-sidebar-text-muted);
}
#sidebar .sidebar-link:hover {
    background-color: var(--simoab-sidebar-hover);
    color: var(--simoab-sidebar-text);
}

.report-tab-nav,
.module-tab-nav {
    scrollbar-width: thin;
}

.report-tab,
.module-tab,
.form-tab,
.commercial-tab {
    padding: 0.5rem 0.875rem;
    border-radius: 0.625rem;
    font-size: 0.8125rem;
    font-weight: 500;
    border: 1px solid transparent;
    color: var(--simoab-text-muted);
    background: transparent;
    cursor: pointer;
    outline: none;
    transition:
        color 0.15s ease,
        border-color 0.15s ease,
        background-color 0.15s ease,
        box-shadow 0.15s ease;
}

.report-tab:hover,
.module-tab:hover,
.form-tab:hover,
.commercial-tab:hover {
    color: var(--simoab-text);
    border-color: color-mix(in srgb, var(--simoab-accent) 28%, var(--simoab-border));
    background-color: color-mix(in srgb, var(--simoab-accent) 6%, transparent);
}

/* Active / selected tab — kontras jelas agar user tahu tab mana yang diproses */
.report-tab.is-active,
.module-tab.is-active,
.form-tab.is-active,
.commercial-tab.is-active,
.report-tab[aria-selected="true"],
.module-tab[aria-selected="true"],
.form-tab[aria-selected="true"],
.commercial-tab[aria-selected="true"] {
    background-color: var(--simoab-accent-bg);
    border-color: var(--simoab-accent-border);
    color: var(--simoab-accent-fg);
    font-weight: 700;
    box-shadow:
        inset 0 -2px 0 0 var(--simoab-accent),
        0 0 0 1px color-mix(in srgb, var(--simoab-accent) 18%, transparent);
}

/* Keyboard focus — ring aksen, beda dari active agar navigasi jelas */
.report-tab:focus-visible,
.module-tab:focus-visible,
.form-tab:focus-visible,
.commercial-tab:focus-visible,
.sub-duration-btn:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 2px var(--simoab-surface),
        0 0 0 4px color-mix(in srgb, var(--simoab-accent) 75%, transparent);
    border-color: var(--simoab-accent);
    color: var(--simoab-accent-fg);
}

.report-tab.is-active:focus-visible,
.module-tab.is-active:focus-visible,
.form-tab.is-active:focus-visible,
.commercial-tab.is-active:focus-visible,
.sub-duration-btn.is-active:focus-visible {
    box-shadow:
        inset 0 -2px 0 0 var(--simoab-accent),
        0 0 0 2px var(--simoab-surface),
        0 0 0 4px color-mix(in srgb, var(--simoab-accent) 75%, transparent);
}

/* Smooth transition for themed surfaces */
.bg-theme-bg,
.bg-theme-surface,
.bg-theme-elevated,
.bg-theme-input,
.bg-theme-header,
.border-theme-border,
.text-theme-text,
.text-theme-muted,
.text-theme-subtle {
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* Secure upload zone */
.simoab-upload-zone {
    position: relative;
    border: 1.5px dashed var(--simoab-border, rgba(255, 255, 255, 0.15));
    border-radius: 0.75rem;
    padding: 1rem;
    background: var(--simoab-input-bg, rgba(255, 255, 255, 0.03));
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}
.simoab-upload-zone:hover,
.simoab-upload-zone--active {
    border-color: rgba(234, 179, 8, 0.55);
    background: rgba(234, 179, 8, 0.05);
}
.simoab-upload-zone:focus-visible {
    outline: 2px solid rgba(234, 179, 8, 0.6);
    outline-offset: 2px;
}
.simoab-upload-zone__hint {
    font-size: 0.75rem;
    color: var(--simoab-text-muted);
}
.simoab-upload-zone__status {
    font-size: 0.75rem;
    margin-top: 0.5rem;
}
.simoab-upload-zone__status[data-tone="ok"] { color: rgb(74, 222, 128); }
.simoab-upload-zone__status[data-tone="idle"] { color: var(--simoab-text-subtle); }
.simoab-upload-progress {
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
    margin-top: 0.5rem;
}
.simoab-upload-progress__bar {
    height: 100%;
    width: 0%;
    background: rgb(234, 179, 8);
    transition: width 0.15s ease;
}

/* Compact data table — sparepart movements, dll. */
.simoab-data-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.simoab-data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
    line-height: 1.4;
    table-layout: auto;
}
.simoab-data-table thead tr {
    border-bottom: 1px solid var(--simoab-border, rgba(255, 255, 255, 0.1));
    color: var(--simoab-text-muted);
    background: var(--simoab-input-bg, rgba(255, 255, 255, 0.03));
}
.simoab-data-table th {
    padding: 0.85rem var(--simoab-inset-x, 1.25rem);
    font-weight: 500;
    vertical-align: middle;
    white-space: nowrap;
}
.simoab-data-table td {
    padding: 0.85rem var(--simoab-inset-x, 1.25rem);
    vertical-align: middle;
}
.simoab-data-table .col-date { width: 5.75rem; white-space: nowrap; }
.simoab-data-table .col-status { width: 6.75rem; min-width: 6.75rem; }
.simoab-data-table .col-sparepart { min-width: 10rem; max-width: 14rem; }
.simoab-data-table .col-source { min-width: 7rem; }
.simoab-data-table .col-equipment { width: 4.25rem; min-width: 4.25rem; white-space: nowrap; }
.simoab-data-table .col-qty {
    width: 6rem;
    min-width: 6rem;
    text-align: right;
    white-space: nowrap;
    padding-left: 0.75rem;
}
.simoab-data-table .col-cost {
    min-width: 10.5rem;
    text-align: right;
    white-space: nowrap;
    padding-left: 0.75rem;
}
.simoab-select-wrap--datatype {
    min-width: 8.5rem;
    width: 8.5rem;
    flex-shrink: 0;
}

.simoab-select-wrap--datatype .simoab-select-trigger {
    min-width: 8.5rem;
}

.simoab-api-param-row {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) 8.5rem auto minmax(0, 1.4fr) auto;
    gap: 0.5rem;
    align-items: center;
}

@media (max-width: 639px) {
    .simoab-api-param-row {
        grid-template-columns: 1fr 1fr;
    }
    .simoab-api-param-row .simoab-api-param-value {
        grid-column: 1 / -1;
    }
    .simoab-select-wrap--datatype {
        width: 100%;
        min-width: 0;
    }
}
.simoab-data-table th.col-qty,
.simoab-data-table th.col-cost,
.simoab-data-table th.col-action { text-align: right; }
.simoab-data-table .tabular { font-variant-numeric: tabular-nums; font-family: ui-monospace, monospace; }
.simoab-data-table .movement-cost {
    display: inline-block;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Sparepart — Riwayat Mutasi Stok */
.sparepart-movements-table th,
.sparepart-movements-table td {
    vertical-align: top;
}
.sparepart-movements-table th.text-left,
.sparepart-movements-table td:not(.col-qty):not(.col-cost):not(.col-action) {
    text-align: left;
}
.sparepart-mv-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
    min-width: 0;
}
.sparepart-mv-stack--end {
    align-items: flex-end;
    text-align: right;
}
.sparepart-mv-primary {
    color: var(--simoab-text);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.35;
}
.sparepart-mv-note {
    color: var(--simoab-text-subtle, #64748b);
    font-size: 0.6875rem;
    line-height: 1.35;
    max-width: 16rem;
    overflow-wrap: anywhere;
}
.sparepart-movements-table .col-qty {
    width: 7.5rem;
    min-width: 7.5rem;
}
.sparepart-movements-table .col-cost {
    width: 8.5rem;
    min-width: 8.5rem;
}
.simoab-movement-row { border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.simoab-movement-row--cancelled { opacity: 0.55; }
.simoab-movement-row--cancelled .movement-qty,
.simoab-movement-row--cancelled .movement-cost {
    text-decoration: line-through;
}
.simoab-movement-row--reversal {
    background: rgba(74, 222, 128, 0.04);
}
.simoab-movement-row--reversal .movement-qty {
    color: rgb(74, 222, 128);
}
.simoab-data-table-footnote {
    font-size: 0.625rem;
    line-height: 1.5;
    color: var(--simoab-text-subtle);
    margin-top: 0.75rem;
    padding: 0 0.25rem;
}

/* Table row action buttons */
.simoab-table-actions {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.375rem;
    max-width: 100%;
}

.simoab-table-empty {
    font-size: 0.75rem;
    color: var(--simoab-text-subtle);
}

.simoab-table-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    padding: 0.3125rem 0.5625rem;
    border-radius: 0.4375rem;
    border: 1px solid var(--simoab-border);
    background: transparent;
    color: var(--simoab-text-muted);
    font-size: 0.6875rem;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.simoab-table-btn:hover {
    color: var(--simoab-text);
    border-color: color-mix(in srgb, var(--simoab-accent) 28%, var(--simoab-border));
    background: var(--simoab-hover);
}

.simoab-table-btn__icon {
    flex-shrink: 0;
}

.simoab-table-btn__label {
    line-height: 1.2;
}

.simoab-table-btn--accent {
    border-color: color-mix(in srgb, var(--simoab-accent) 35%, var(--simoab-border));
    color: var(--simoab-accent-fg);
}

.simoab-table-btn--accent:hover {
    background: rgba(234, 179, 8, 0.1);
    color: var(--simoab-accent-fg);
}

.simoab-table-btn--approve {
    border-color: color-mix(in srgb, var(--simoab-accent) 45%, var(--simoab-border));
    background: var(--simoab-accent);
    color: var(--simoab-accent-text, #0a0a0a);
    font-weight: 600;
}

.simoab-table-btn--approve:hover {
    background: var(--simoab-accent-dark);
    color: var(--simoab-accent-text, #0a0a0a);
}

.simoab-table-btn--danger {
    border-color: rgba(248, 113, 113, 0.35);
    color: rgb(248, 113, 113);
}

.simoab-table-btn--danger:hover {
    background: rgba(248, 113, 113, 0.1);
    color: rgb(252, 165, 165);
}

.simoab-table-btn--icon-only {
    padding: 0.375rem;
}

.commercial-table .simoab-table-actions,
.commercial-table td .simoab-table-btn {
    justify-content: flex-end;
}

/* Equipment type illustrations — siluet bersih tanpa kotak latar */
.equipment-thumb {
    flex-shrink: 0;
    object-fit: contain;
    object-position: center;
    background: transparent;
    border: none;
    border-radius: 0;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,.12));
}

.equipment-thumb--xs { width: 1.75rem; height: 1.25rem; }
.equipment-thumb--sm { width: 2.25rem; height: 1.625rem; }
.equipment-thumb--md { width: 3rem; height: 2.125rem; }
.equipment-thumb--lg { width: 3.5rem; height: 2.5rem; }

.equipment-thumb--fill {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: inherit;
    object-fit: contain;
    filter: drop-shadow(0 6px 12px rgba(0,0,0,.16));
}

.equipment-name-cell {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 0.5rem;
    min-width: 0;
    text-decoration: none;
    color: inherit;
}

.equipment-name-cell__thumb {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

.equipment-name-cell > .equipment-thumb {
    flex-shrink: 0;
}

.simoab-data-table .equipment-name-cell {
    width: 100%;
}

.equipment-name-cell__text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.0625rem;
    min-width: 0;
    padding-top: 0.0625rem;
}

.equipment-name-cell__code {
    font-family: ui-monospace, monospace;
    font-size: 0.8125rem;
    color: var(--simoab-accent-fg);
    line-height: 1.2;
    text-decoration: none;
}

.equipment-name-cell__code:hover {
    text-decoration: underline;
}

.equipment-name-cell__name {
    font-size: 0.8125rem;
    color: var(--simoab-text);
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.equipment-name-cell__type {
    font-size: 0.6875rem;
    color: var(--simoab-text-subtle);
    line-height: 1.2;
}

/* Detail alat berat — header identitas */
.equipment-detail-identity {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.equipment-detail-identity__thumb {
    flex-shrink: 0;
    width: 3.5rem;
    height: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.3125rem;
    background: var(--simoab-input);
    border: 1px solid var(--simoab-border);
    border-radius: 0.75rem;
    overflow: hidden;
    line-height: 0;
}

.equipment-detail-identity__thumb .equipment-thumb--fill {
    object-fit: contain;
    object-position: center;
}

.equipment-detail-identity__text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.125rem;
    min-width: 0;
}

.equipment-detail-identity__headline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.equipment-detail-identity__code {
    margin: 0;
    font-family: ui-monospace, monospace;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--simoab-text);
}

.equipment-detail-identity__name {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.3;
    color: var(--simoab-text);
}

.equipment-detail-identity__meta {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.25;
    color: var(--simoab-text-subtle);
}

.equipment-inline {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    vertical-align: middle;
}

.equipment-inline__code {
    font-size: 0.75rem;
}

.equipment-locked-preview {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--simoab-border);
    border-radius: var(--simoab-form-radius);
    background: var(--simoab-input);
}

.equipment-locked-preview__text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.0625rem;
    min-width: 0;
    padding-top: 0.0625rem;
}

.equipment-locked-preview__code {
    font-family: ui-monospace, monospace;
    font-size: 0.8125rem;
    color: var(--simoab-accent-fg);
}

.equipment-locked-preview__name {
    font-size: 0.75rem;
    color: var(--simoab-text-muted);
}

/* ============================================================
   Responsive layout — mobile overflow & modals
   ============================================================ */
html {
    /* clip (not hidden) — hidden on html/body breaks position:sticky topbar */
    overflow-x: clip;
    -webkit-text-size-adjust: 100%;
}

body {
    overflow-x: clip;
}

/* Topbar sticky — jangan set overflow-x:hidden pada .app-shell-column (memutus sticky) */
.app-shell-column > header {
    position: sticky;
    top: 0;
    z-index: 20;
}

main > * {
    min-width: 0;
    max-width: 100%;
}

.overflow-x-auto,
.simoab-data-table-wrap,
.simoab-table-scroll {
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}

.simoab-data-table {
    min-width: 0;
}

@media (min-width: 640px) {
    .simoab-data-table {
        min-width: 36rem;
    }
}

@media (max-width: 639px) {
    .simoab-data-table th,
    .simoab-data-table td {
        padding: 0.625rem 0.75rem;
    }

    .simoab-data-table .col-sparepart {
        min-width: 8rem;
        max-width: 11rem;
    }

    .simoab-data-table .col-cost {
        min-width: 8.5rem;
    }
}

/* Modal — bottom sheet on mobile, centered on sm+ */
.simoab-modal-backdrop {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0;
}

@media (min-width: 640px) {
    .simoab-modal-backdrop {
        align-items: center;
        padding: 1rem;
    }
}

.simoab-modal-backdrop > .bg-theme-surface {
    width: 100%;
    max-height: 94vh;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

@media (min-width: 640px) {
    .simoab-modal-backdrop > .bg-theme-surface {
        max-height: 92vh;
        border-radius: 1rem;
    }
}

/* ============================================================
   CARD / PANEL / MODAL INSET — konten tidak menempel tepi
   Token: --simoab-inset / --simoab-inset-x / --simoab-inset-y
   ============================================================ */

.simoab-modal-backdrop > .bg-theme-surface > .p-5,
.simoab-modal-backdrop > .bg-theme-surface > [class*="border-b"].p-5,
.simoab-modal-backdrop > .bg-theme-surface > [class*="border-t"].p-5,
.simoab-modal-backdrop > .bg-theme-surface > form.p-5,
.simoab-modal-backdrop > .bg-theme-surface > form.overflow-y-auto,
.simoab-modal-backdrop > .bg-theme-surface > .overflow-y-auto.flex-1,
.simoab-modal-backdrop > .bg-theme-surface > [id$="-body"],
.simoab-modal-backdrop > .bg-theme-surface > [id$="-modal-body"] {
    padding: var(--simoab-inset, 1.25rem) !important;
    box-sizing: border-box;
}

.simoab-modal-backdrop > .bg-theme-surface > .flex.items-center.justify-between.p-5,
.simoab-modal-backdrop > .bg-theme-surface > .flex.items-start.justify-between.p-5,
.simoab-modal-backdrop > .bg-theme-surface > .p-5.border-b,
.simoab-modal-backdrop > .bg-theme-surface > .p-5.border-t,
.simoab-modal-backdrop > .bg-theme-surface > .flex.justify-end.gap-2.p-5 {
    padding: var(--simoab-inset-sm, 1rem 1.125rem) !important;
}

/* Utility class untuk body card/panel/modal */
.card-body,
.panel-body,
.modal-body,
.simoab-card-body,
.simoab-panel-body,
.simoab-modal-body {
    padding: var(--simoab-inset, 1.25rem);
    box-sizing: border-box;
}

.module-table > .p-4,
.module-table > .p-3,
.module-table > .px-4,
.module-table .module-table-empty,
.module-table [class*="text-center"].p-4,
.module-table [class*="text-center"].p-6,
.module-table .p-4.text-sm,
.module-table .p-6 {
    padding: var(--simoab-inset, 1.25rem) !important;
    box-sizing: border-box;
}

/* Pastikan form di dalam panel tidak menempel tepi via margin negatif */
.module-form-panel > :first-child,
.module-toolbar > :first-child,
.module-filters > :first-child {
    margin-top: 0;
}
.module-form-panel > :last-child,
.module-toolbar > :last-child,
.module-filters > :last-child {
    margin-bottom: 0;
}

/* Action rows in tables — wrap on narrow screens */
@media (max-width: 639px) {
    .simoab-action-cell {
        white-space: normal !important;
    }

    .simoab-action-cell .simoab-table-actions,
    .simoab-action-cell .inline-flex,
    .simoab-action-cell a,
    .simoab-action-cell button {
        margin-top: 0.125rem;
    }
}

/* Filter/toolbar rows */
.simoab-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    width: 100%;
}

.simoab-filter-row .theme-input,
.simoab-filter-row button {
    min-width: 0;
}

@media (max-width: 639px) {
    .simoab-filter-row .theme-input[type="date"] {
        flex: 1 1 calc(50% - 0.25rem);
        min-width: 7.5rem;
    }

    .simoab-filter-row button {
        flex: 1 1 100%;
    }
}

/* Toast clickable area restored on children */
#toast-container > * {
    pointer-events: auto;
    max-width: 100%;
}

.page-sop-footer {
    margin-top: 0.25rem;
    padding-top: 0;
    border-top: none;
}

.page-sop-footer .procedure-panel {
    margin-top: 0;
}

/* ============================================================
   Module page layout — konsisten antar halaman
   ============================================================ */
.module-page {
    display: flex;
    flex-direction: column;
    gap: var(--simoab-gap-lg);
}

.module-header {
    gap: var(--simoab-gap-sm);
}

.module-stats {
    gap: var(--simoab-card-gap, var(--simoab-gap-md));
}

.module-stats > div,
.report-kpi-card,
.module-stat-card {
    background: var(--simoab-surface);
    border: 1px solid var(--simoab-border);
    border-radius: var(--simoab-card-radius);
}

.module-stats > div {
    padding: 0.625rem 0.75rem;
    text-align: center;
}

/* KPI ringkas — detail proyek & panel serupa */
.project-kpi-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--simoab-card-gap, var(--simoab-gap-md));
}

@media (min-width: 640px) {
    .project-kpi-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .project-kpi-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

.project-kpi-card {
    background: var(--simoab-surface);
    border: 1px solid var(--simoab-border);
    border-radius: var(--simoab-card-radius);
    padding: var(--simoab-inset-sm, 1rem 1.125rem);
    display: flex;
    flex-direction: column;
    min-height: 5.5rem;
    box-sizing: border-box;
}

.project-kpi-link {
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.project-kpi-link:hover {
    border-color: color-mix(in srgb, var(--simoab-accent) 35%, var(--simoab-border));
    background: color-mix(in srgb, var(--simoab-accent) 4%, var(--simoab-surface));
}

.project-kpi-label {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--simoab-muted);
    line-height: 1.25;
}

.project-kpi-hint {
    font-size: 0.625rem;
    color: var(--simoab-subtle);
    margin-top: 0.125rem;
    line-height: 1.3;
}

.project-kpi-value {
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.3;
    margin-top: 0.375rem;
    color: var(--simoab-text);
    font-variant-numeric: tabular-nums;
}

.project-kpi-value.is-accent {
    color: var(--simoab-accent-fg);
}

.project-kpi-value.is-mono {
    font-family: ui-monospace, monospace;
}

.project-kpi-value.is-compact {
    font-size: 0.9375rem;
    font-weight: 600;
    word-break: break-word;
}

.project-kpi-foot {
    font-size: 0.6875rem;
    color: var(--simoab-subtle);
    margin-top: auto;
    padding-top: 0.375rem;
    line-height: 1.35;
}

.project-kpi-bar {
    height: 0.25rem;
    background: var(--simoab-input);
    border-radius: 9999px;
    overflow: hidden;
    margin-top: 0.375rem;
}

.project-kpi-bar > span {
    display: block;
    height: 100%;
    background: var(--simoab-accent);
    border-radius: 9999px;
}

.project-kpi-bar.is-warn > span {
    background: #fb923c;
}

.project-kpi-bar.is-danger > span {
    background: #f87171;
}

.commercial-tab-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--simoab-gap-xs);
    padding: 0.875rem 1.25rem;
    border-bottom: 1px solid var(--simoab-border);
    background: var(--simoab-input);
}

.commercial-body {
    padding: var(--simoab-gap-lg);
}

@media (min-width: 640px) {
    .commercial-body {
        padding: var(--simoab-gap-lg) var(--simoab-gap-xl) var(--simoab-gap-xl);
    }
}

.commercial-tab-panel:not(.hidden) {
    display: flex;
    flex-direction: column;
    gap: var(--simoab-gap-lg);
}

.commercial-lead {
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--simoab-text-subtle);
    margin: 0;
}

.commercial-form-grid {
    display: grid;
    gap: var(--simoab-gap-md);
}

.commercial-form-grid-3 {
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .commercial-form-grid-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.commercial-form-grid-4 {
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .commercial-form-grid-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .commercial-form-grid-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.commercial-field {
    display: flex;
    flex-direction: column;
    gap: 0.4375rem;
    min-width: 0;
}

.commercial-field label[aria-hidden="true"] {
    visibility: hidden;
    user-select: none;
}

.commercial-field textarea.form-input {
    min-height: 4.5rem;
    resize: vertical;
}

.commercial-options {
    display: grid;
    gap: var(--simoab-gap-sm);
    padding: var(--simoab-gap-md);
    border-radius: var(--simoab-card-radius);
    border: 1px solid var(--simoab-border);
    background: var(--simoab-input);
}

@media (min-width: 640px) {
    .commercial-options {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.commercial-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--simoab-border);
    border-radius: var(--simoab-card-radius);
    background: var(--simoab-input);
}

.commercial-table {
    width: 100%;
    font-size: 0.875rem;
    border-collapse: collapse;
}

.commercial-table thead tr {
    border-bottom: 1px solid var(--simoab-border);
    background: color-mix(in srgb, var(--simoab-input) 60%, var(--simoab-surface));
}

.commercial-table th {
    padding: 0.625rem 1rem;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--simoab-text-muted);
    text-align: left;
    white-space: nowrap;
}

.commercial-table th.is-right {
    text-align: right;
}

.commercial-table td {
    padding: 0.625rem 1rem;
    border-bottom: 1px solid color-mix(in srgb, var(--simoab-border) 65%, transparent);
    vertical-align: middle;
}

.commercial-table tbody tr:last-child td {
    border-bottom: none;
}

.commercial-table .form-input {
    width: 100%;
    min-height: 2.25rem;
    padding: 0.375rem 0.625rem;
    font-family: var(--simoab-form-font-family);
    font-size: var(--simoab-form-font-size);
    line-height: var(--simoab-form-line-height);
}

.commercial-table .commercial-empty {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--simoab-text-subtle);
    font-family: var(--simoab-form-font-family);
    font-size: var(--simoab-form-font-size);
    line-height: var(--simoab-form-line-height);
}

.commercial-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--simoab-gap-md);
    padding: var(--simoab-gap-md);
    border-radius: var(--simoab-card-radius);
    border: 1px solid var(--simoab-border);
    background: var(--simoab-input);
}

.commercial-filter-bar {
    display: grid;
    gap: var(--simoab-gap-md);
    padding: var(--simoab-gap-md);
    border-radius: var(--simoab-card-radius);
    border: 1px solid var(--simoab-border);
    background: var(--simoab-input);
}

.commercial-filter-bar.is-4 {
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .commercial-filter-bar.is-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .commercial-filter-bar.is-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.commercial-toolbar .commercial-field {
    flex: 0 0 auto;
}

.commercial-toolbar-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--simoab-gap-xs);
    margin-left: auto;
}

.commercial-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--simoab-gap-sm);
    padding-top: var(--simoab-gap-md);
    margin-top: 0.25rem;
    border-top: 1px solid var(--simoab-border);
}

.commercial-footer.is-end {
    justify-content: flex-end;
}

.commercial-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.25;
    border-radius: 0.5rem;
    border: 1px solid transparent;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
    white-space: nowrap;
}

.commercial-btn-primary {
    background: var(--simoab-accent);
    color: var(--simoab-accent-text, #0a0a0a);
}

.commercial-btn-primary:hover {
    background: var(--simoab-accent-dark);
}

.commercial-btn-secondary {
    background: transparent;
    border-color: var(--simoab-border);
    color: var(--simoab-text-muted);
    font-weight: 500;
}

.commercial-btn-secondary:hover {
    color: var(--simoab-text);
    border-color: color-mix(in srgb, var(--simoab-accent) 30%, var(--simoab-border));
}

.commercial-btn-ghost {
    background: transparent;
    border-color: color-mix(in srgb, var(--simoab-accent) 25%, var(--simoab-border));
    color: var(--simoab-accent-fg);
    font-weight: 500;
}

.commercial-btn-ghost:hover {
    background: rgba(234, 179, 8, 0.08);
}

.commercial-btn-danger {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: transparent;
    border: 1px solid rgba(248, 113, 113, 0.35);
    border-radius: 0.4375rem;
    padding: 0.3125rem 0.5625rem;
    color: rgb(248, 113, 113);
    font-size: 0.6875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.commercial-btn-danger:hover {
    background: rgba(248, 113, 113, 0.1);
    color: rgb(252, 165, 165);
}

.commercial-status {
    padding: 0.875rem 1rem;
    border-radius: 0.625rem;
    font-size: 0.8125rem;
    line-height: 1.5;
}

.commercial-status.is-closed {
    border: 1px solid rgba(234, 179, 8, 0.3);
    background: rgba(234, 179, 8, 0.06);
}

.commercial-status.is-pending {
    border: 1px solid rgba(251, 146, 60, 0.3);
    background: rgba(251, 146, 60, 0.06);
}

.commercial-status.is-ready {
    border: 1px solid rgba(34, 197, 94, 0.3);
    background: rgba(34, 197, 94, 0.06);
}

/* Panel Stok Tangki — tab proyek */
#project-commercial-panel,
.reconciliation-panel {
    padding: 0;
}

.fuel-tank-panel,
.idle-days-panel {
    display: flex;
    flex-direction: column;
    gap: var(--simoab-gap-lg);
}

.fuel-tank-kpi-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--simoab-gap-md);
}

@media (min-width: 1024px) {
    .fuel-tank-kpi-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.fuel-tank-panel .project-kpi-card {
    min-height: 6.25rem;
}

.fuel-tank-panel .project-kpi-foot .truncate {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fuel-tank-toolbar {
    align-items: center;
}

.fuel-tank-toolbar .commercial-toolbar-actions {
    align-self: center;
}

.fuel-tank-toolbar__info {
    flex: 1;
    min-width: 0;
}

.fuel-tank-toolbar__title {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--simoab-text);
}

.fuel-tank-toolbar__hint {
    margin: 0.125rem 0 0;
    font-size: 0.6875rem;
    line-height: 1.4;
    color: var(--simoab-text-subtle);
}

.commercial-table-section {
    border: 1px solid var(--simoab-border);
    border-radius: var(--simoab-card-radius);
    overflow: hidden;
    background: var(--simoab-input);
}

.commercial-table-section .commercial-table-wrap {
    border: none;
    border-radius: 0;
    background: transparent;
}

.commercial-table-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--simoab-gap-sm);
    padding: 0.875rem var(--simoab-gap-md);
    border-bottom: 1px solid var(--simoab-border);
    background: color-mix(in srgb, var(--simoab-input) 60%, var(--simoab-surface));
}

.commercial-table-header__title {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--simoab-text);
}

.commercial-table-header__hint {
    margin: 0.125rem 0 0;
    font-size: 0.6875rem;
    line-height: 1.4;
    color: var(--simoab-text-subtle);
}

.fuel-tank-movements-table {
    table-layout: fixed;
}

.fuel-tank-movements-table .col-date {
    width: 22%;
}

.fuel-tank-movements-table .col-type {
    width: 28%;
}

.fuel-tank-movements-table .col-liters {
    width: 18%;
}

.fuel-tank-movements-table .col-notes {
    width: 32%;
}

.fuel-tank-movements-table td.col-notes {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Panel Hari Libur — tab proyek */
.idle-day-form {
    display: flex;
    flex-direction: column;
    gap: var(--simoab-gap-md);
    padding: var(--simoab-gap-md);
    border-radius: var(--simoab-card-radius);
    border: 1px solid var(--simoab-border);
    background: var(--simoab-input);
}

.idle-day-form-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--simoab-gap-md);
    align-items: end;
}

@media (min-width: 640px) {
    .idle-day-form-row {
        grid-template-columns: minmax(9rem, 1fr) minmax(11rem, 1.35fr) auto;
    }
}

.idle-day-field-action .commercial-btn {
    width: 100%;
    min-height: var(--simoab-form-min-height);
}

@media (min-width: 640px) {
    .idle-day-field-action .commercial-btn {
        width: auto;
        min-width: 8.5rem;
    }
}

.idle-days-table {
    table-layout: fixed;
}

.idle-days-table .col-date {
    width: 24%;
}

.idle-days-table .col-equipment {
    width: 18%;
}

.idle-days-table .col-reason {
    width: 32%;
}

.idle-days-table .col-cost {
    width: 18%;
}

.idle-days-table .col-action {
    width: 8%;
}

.closing-history-item__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: flex-end;
    gap: 0.375rem 0.75rem;
    font-size: 0.75rem;
    color: var(--simoab-text-muted);
    text-align: right;
}

.closing-history-item__profit {
    font-weight: 600;
    color: var(--simoab-text);
}

.closing-history-item__profit.is-loss {
    color: #f87171;
}

.closing-history-item__date {
    color: var(--simoab-text-subtle);
}

.closing-history-empty {
    margin: 0;
    padding: 1.25rem 1rem;
    text-align: center;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--simoab-text-subtle);
}

/* Panel Rekonsiliasi Bulanan */
.reconciliation-panel__header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--simoab-gap-sm) var(--simoab-gap-md);
    padding: 1.25rem 1.25rem 0;
}

@media (min-width: 640px) {
    .reconciliation-panel__header {
        padding: 1.25rem 1.5rem 0;
    }
}

.reconciliation-panel__intro {
    min-width: 0;
    flex: 1;
}

.reconciliation-panel__title {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--simoab-text);
}

.reconciliation-panel__lead {
    margin: 0.25rem 0 0;
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--simoab-text-subtle);
}

.reconciliation-panel__body {
    display: flex;
    flex-direction: column;
    gap: var(--simoab-gap-lg);
    padding: 1rem 1.25rem 1.25rem;
}

@media (min-width: 640px) {
    .reconciliation-panel__body {
        padding: 1rem 1.5rem 1.5rem;
    }
}

.closing-card {
    border: 1px solid var(--simoab-border);
    border-radius: var(--simoab-card-radius);
    background: var(--simoab-input);
    overflow: hidden;
}

.closing-toolbar-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--simoab-gap-sm) var(--simoab-gap-md);
    padding: var(--simoab-gap-md);
}

.closing-period-fields {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--simoab-gap-sm);
}

.closing-field-month {
    width: 5.75rem;
    min-width: 5.75rem;
}

.closing-field-year {
    width: 6rem;
    min-width: 6rem;
}

.closing-field-year .form-input {
    width: 100%;
}

.closing-toolbar-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--simoab-gap-xs);
    margin-left: auto;
}

.closing-status {
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--simoab-border);
    font-size: 0.8125rem;
    line-height: 1.45;
}

.closing-status.is-ready {
    background: rgba(34, 197, 94, 0.06);
}

.closing-status.is-pending {
    background: rgba(251, 146, 60, 0.06);
}

.closing-status.is-closed {
    background: rgba(234, 179, 8, 0.06);
}

.closing-status__title {
    display: block;
    font-weight: 600;
    line-height: 1.35;
}

.closing-status__detail {
    margin: 0.25rem 0 0;
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--simoab-text-muted);
}

.closing-status.is-ready .closing-status__title {
    color: #4ade80;
}

.closing-status.is-pending .closing-status__title {
    color: #fb923c;
}

.closing-status.is-closed .closing-status__title {
    color: var(--simoab-accent-fg);
}

.closing-history-list {
    display: flex;
    flex-direction: column;
}

.closing-history-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid color-mix(in srgb, var(--simoab-border) 65%, transparent);
    font-size: 0.8125rem;
}

.closing-history-item:last-child {
    border-bottom: none;
}

.closing-history-item__period {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.375rem 0.625rem;
    min-width: 0;
}

.closing-history-item__label {
    font-family: ui-monospace, monospace;
    font-weight: 600;
    color: var(--simoab-accent-fg);
    line-height: 1.3;
}

.closing-history-item__range {
    font-size: 0.75rem;
    line-height: 1.35;
    color: var(--simoab-text-subtle);
}

.approval-closing-banner {
    background: rgba(34, 197, 94, 0.06);
    border: 1px solid rgba(34, 197, 94, 0.28);
    border-radius: 0.75rem;
    padding: 0.875rem 1rem;
}

.approval-closing-banner__title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--simoab-text);
}

.approval-closing-banner__subtitle {
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--simoab-text-muted);
    margin-top: 0.25rem;
}

.approval-closing-banner__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.approval-closing-chip {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem 0.625rem;
    max-width: 100%;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    border: 1px solid var(--simoab-border);
    background: var(--simoab-surface);
    font-size: 0.8125rem;
    text-decoration: none;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.approval-closing-chip:hover {
    border-color: color-mix(in srgb, var(--simoab-accent) 40%, var(--simoab-border));
    background: var(--simoab-hover);
}

.approval-closing-chip__period {
    font-family: ui-monospace, monospace;
    font-size: 0.75rem;
    color: var(--simoab-text-subtle);
}

.approval-closing-chip__action {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--simoab-accent-fg);
}

.commercial-section-title {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--simoab-text-muted);
    margin: 0 0 0.625rem;
}

.commercial-history-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.commercial-history-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: 0.625rem;
    border: 1px solid var(--simoab-border);
    background: var(--simoab-input);
    font-size: 0.8125rem;
}

.commercial-rate-row td {
    vertical-align: middle;
}

.commercial-loading {
    padding: 2.5rem 1rem;
    text-align: center;
    font-size: 0.875rem;
    color: var(--simoab-text-subtle);
}

#reports-module {
    font-size: 0.8125rem;
    line-height: 1.45;
}

#reports-module #report-tab-desc,
#reports-module #report-period-label {
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--simoab-text-subtle);
}

.report-kpi-card {
    padding: 0.75rem 0.875rem;
    text-align: center;
}

.report-kpi-label {
    font-size: 0.6875rem;
    line-height: 1.3;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--simoab-text-subtle);
}

.report-kpi-value {
    margin-top: 0.3125rem;
    font-size: 0.9375rem;
    line-height: 1.3;
    font-weight: 700;
    color: var(--simoab-text);
    font-variant-numeric: tabular-nums;
}

.report-kpi-value--compact {
    font-size: 0.875rem;
}

.report-kpi-sub {
    margin-top: 0.1875rem;
    font-size: 0.6875rem;
    line-height: 1.35;
    color: var(--simoab-text-muted);
}

#reports-module .module-stats {
    gap: var(--simoab-gap-sm);
}

#reports-module .module-stats > div,
#reports-module .report-kpi-card {
    padding: 0.75rem 0.875rem;
}

/* Panel & section laporan */
.report-section {
    background: var(--simoab-surface);
    border: 1px solid var(--simoab-border);
    border-radius: var(--simoab-card-radius);
    overflow: hidden;
}

.report-section__title {
    margin: 0;
    padding: 0.875rem 1rem 0.625rem;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--simoab-text);
}

.report-panel {
    background: var(--simoab-surface);
    border: 1px solid var(--simoab-border);
    border-radius: var(--simoab-card-radius);
    padding: 1rem 1.125rem;
}

.report-panel__title {
    margin: 0 0 0.75rem;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--simoab-text);
}

.report-panel__body {
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--simoab-text-muted);
}

.report-note {
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--simoab-text-subtle);
}

.report-code {
    font-family: ui-monospace, monospace;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--simoab-accent-fg);
}

.report-cost-grid {
    margin-top: 0.5rem;
    display: grid;
    gap: 0.375rem;
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--simoab-text-muted);
}

.report-cost-grid > div {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
}

.report-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 1rem 1rem;
}

.report-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
    line-height: 1.35;
    color: var(--simoab-text);
}

.report-table thead tr {
    border-bottom: 1px solid var(--simoab-border);
}

.report-table th {
    padding: 0.4375rem 0.75rem 0.4375rem 0;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--simoab-text-muted);
    text-align: left;
    vertical-align: bottom;
    white-space: nowrap;
}

.report-table th.col-right,
.report-table th.col-center {
    padding-right: 0;
    padding-left: 0.75rem;
}

.report-table th.col-right {
    text-align: right;
}

.report-table th.col-center {
    text-align: center;
}

.report-table td {
    padding: 0.5625rem 0.75rem 0.5625rem 0;
    border-bottom: 1px solid color-mix(in srgb, var(--simoab-border) 55%, transparent);
    vertical-align: middle;
    font-size: 0.8125rem;
}

.report-table td.col-right,
.report-table td.col-center {
    padding-right: 0;
    padding-left: 0.75rem;
}

.report-table td.col-right {
    text-align: right;
}

.report-table td.col-center {
    text-align: center;
}

.report-table td.tabular,
.report-table .tabular {
    font-family: ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
}

.report-table tbody tr:last-child td {
    border-bottom: none;
}

.report-table .report-empty td {
    padding: 1.5rem 0.75rem;
    text-align: center;
    color: var(--simoab-text-subtle);
    font-size: 0.8125rem;
}

.report-table .is-warn {
    color: #fb923c;
}

.report-table .is-accent {
    font-weight: 600;
    color: var(--simoab-accent-fg);
}

.report-table .is-profit-pos {
    color: #4ade80;
    font-weight: 600;
}

.report-table .is-profit-neg {
    color: #f87171;
    font-weight: 600;
}

.report-hasil-akhir-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.875rem 1.25rem;
    padding: 0.875rem 1.125rem;
    margin-bottom: 0;
    border-radius: 0.75rem;
    border: 1px solid color-mix(in srgb, var(--simoab-accent) 35%, var(--simoab-border));
    background: color-mix(in srgb, var(--simoab-accent) 8%, var(--simoab-surface));
}

.report-hasil-akhir-bar.hidden {
    display: none !important;
}

.report-hasil-akhir-bar__title {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--simoab-text);
}

.report-hasil-akhir-bar__sub {
    margin: 0.25rem 0 0;
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--simoab-text-muted);
}

.report-hasil-akhir-bar__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.report-profit-hero {
    display: grid;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    border-radius: 0.875rem;
    border: 1px solid var(--simoab-border);
    background: var(--simoab-surface);
    margin-bottom: 0;
}

@media (min-width: 768px) {
    .report-profit-hero {
        grid-template-columns: 1.4fr 1fr;
        align-items: center;
    }
}

.report-profit-hero.is-pos {
    border-color: color-mix(in srgb, #4ade80 35%, var(--simoab-border));
    background: color-mix(in srgb, #4ade80 6%, var(--simoab-surface));
}

.report-profit-hero.is-neg {
    border-color: color-mix(in srgb, #f87171 35%, var(--simoab-border));
    background: color-mix(in srgb, #f87171 6%, var(--simoab-surface));
}

.report-profit-hero__eyebrow {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--simoab-text-muted);
    margin: 0 0 0.375rem;
}

.report-profit-hero__value {
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    font-weight: 700;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
    margin: 0;
    color: var(--simoab-text);
}

.report-profit-hero.is-pos .report-profit-hero__value { color: #4ade80; }
.report-profit-hero.is-neg .report-profit-hero__value { color: #f87171; }

.report-profit-hero__sub {
    margin: 0.5rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--simoab-text-muted);
}

.report-profit-hero__meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.625rem 1rem;
}

.report-profit-hero__meta > div {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    font-size: 0.75rem;
    color: var(--simoab-text-muted);
}

.report-profit-hero__meta strong {
    font-size: 0.9375rem;
    color: var(--simoab-text);
}

.report-pl-panel .report-pl-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: 0.4rem 0;
    font-size: 0.8125rem;
    border-bottom: 1px solid color-mix(in srgb, var(--simoab-border) 70%, transparent);
}

.report-pl-row--revenue { font-weight: 600; }
.report-pl-row--deduct { color: var(--simoab-text-muted); padding-left: 0.5rem; }
.report-pl-row--subtotal {
    font-weight: 600;
    border-top: 1px solid var(--simoab-border);
    margin-top: 0.25rem;
    padding-top: 0.5rem;
}
.report-pl-row--net {
    font-size: 0.9375rem;
    font-weight: 700;
    border-bottom: none;
    padding-top: 0.625rem;
}
.report-pl-row--net.is-profit-pos { color: #4ade80; }
.report-pl-row--net.is-profit-neg { color: #f87171; }

.report-table .is-idle {
    opacity: 0.85;
    background: color-mix(in srgb, var(--simoab-input) 65%, transparent);
}

@media (max-width: 639px) {
    .report-table .hide-sm {
        display: none;
    }
}

@media (max-width: 767px) {
    .report-table .hide-md {
        display: none;
    }
}

@media (max-width: 1023px) {
    .report-table .hide-lg {
        display: none;
    }
}

@media (min-width: 640px) {
    .report-section__title {
        padding: 1rem 1.25rem 0.75rem;
    }

    .report-table-wrap {
        padding: 0 1.25rem 1.25rem;
    }
}

.module-filters {
    background: var(--simoab-surface);
    border: 1px solid var(--simoab-border);
    border-radius: var(--simoab-card-radius);
    padding: var(--simoab-inset, 1.25rem);
    box-sizing: border-box;
}

.module-table {
    background: var(--simoab-surface);
    border: 1px solid var(--simoab-border);
    border-radius: var(--simoab-card-radius);
    overflow: hidden;
}

.module-toolbar {
    background: var(--simoab-surface);
    border: 1px solid var(--simoab-border);
    border-radius: var(--simoab-card-radius);
    padding: var(--simoab-inset, 1.25rem);
    display: flex;
    flex-direction: column;
    gap: var(--simoab-gap-sm);
    box-sizing: border-box;
}

.module-content-stack {
    display: flex;
    flex-direction: column;
    gap: var(--simoab-card-stack-gap, var(--simoab-gap-md));
}

.module-filter-grid {
    gap: var(--simoab-gap-sm);
}

.module-filters .grid {
    gap: var(--simoab-gap-sm);
}

/* Legacy: theme-input on filters without form-input — same sizing */
input.theme-input:not(.form-input):not(.module-filter-search):not(.module-filter-date) {
    width: 100%;
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    border: 1px solid var(--simoab-border);
    border-radius: 0.5rem;
}

/* ============================================================
   CARD GAP — PATEN PUBLIK (semua module wajib patuh)
   Token: --simoab-card-gap / --simoab-card-stack-gap
   Utility Tailwind gap-* / space-y-* / mb-* pada container card
   akan ditimpa agar card tidak pernah menempel.
   ============================================================ */

.module-card-grid,
.module-page > .grid,
.module-page .grid.module-card-grid,
.module-stats.grid,
.project-kpi-grid,
.sys-tab-panel > .grid,
.module-content-stack > .grid {
    gap: var(--simoab-card-gap) !important;
    row-gap: var(--simoab-card-gap) !important;
    column-gap: var(--simoab-card-gap) !important;
}

/* Stack vertikal antar card (bukan isi dalam satu card) */
.module-card-stack,
.module-content-stack {
    display: flex;
    flex-direction: column;
    gap: var(--simoab-card-stack-gap) !important;
}

.sys-tab-panel:not(.hidden) {
    display: flex;
    flex-direction: column;
    gap: var(--simoab-card-stack-gap) !important;
}

/* space-y-* yang menampung card → konversi ke flex gap paten */
.module-page .space-y-4:has(> .module-form-panel),
.module-page .space-y-4:has(> .module-table),
.module-page .space-y-4:has(> .module-filters),
.module-page .space-y-4:has(> .module-toolbar),
.module-page .space-y-3:has(> .module-form-panel),
.module-page .space-y-6:has(> .module-form-panel),
.module-page .space-y-4:has(> .bg-theme-surface),
.sys-tab-panel .space-y-4:has(> .module-form-panel),
.sys-tab-panel .space-y-3:has(> .module-form-panel) {
    display: flex;
    flex-direction: column;
    gap: var(--simoab-card-stack-gap) !important;
}

.module-page .space-y-4:has(> .module-form-panel) > :not([hidden]) ~ :not([hidden]),
.module-page .space-y-3:has(> .module-form-panel) > :not([hidden]) ~ :not([hidden]),
.module-page .space-y-6:has(> .module-form-panel) > :not([hidden]) ~ :not([hidden]),
.module-page .space-y-4:has(> .module-table) > :not([hidden]) ~ :not([hidden]),
.module-page .space-y-4:has(> .bg-theme-surface) > :not([hidden]) ~ :not([hidden]),
.sys-tab-panel .space-y-4:has(> .module-form-panel) > :not([hidden]) ~ :not([hidden]),
.sys-tab-panel .space-y-3:has(> .module-form-panel) > :not([hidden]) ~ :not([hidden]),
.module-card-stack > :not([hidden]) ~ :not([hidden]),
.module-content-stack > :not([hidden]) ~ :not([hidden]),
.sys-tab-panel:not(.hidden) > :not([hidden]) ~ :not([hidden]) {
    margin-top: 0 !important;
}

/* Netralisasi margin utilitas yang sering membuat jarak dobel / nol */
.module-card-stack > .module-form-panel,
.module-card-stack > .module-table,
.module-card-stack > .module-filters,
.module-card-stack > .module-toolbar,
.module-card-stack > .module-stats,
.module-content-stack > .module-form-panel,
.module-content-stack > .module-table,
.sys-tab-panel > .module-form-panel,
.sys-tab-panel > .module-table,
.sys-tab-panel > .module-card-grid,
.module-card-grid > .module-form-panel,
.module-card-grid > .module-table,
.module-page > .module-form-panel,
.module-page > .module-table,
.module-page > .module-filters,
.module-page > .module-toolbar,
.module-page > .module-stats,
.module-page > .module-card-grid {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Grid di dalam halaman module yang berisi card — paksa jarak paten */
.module-page .grid:has(> .module-form-panel),
.module-page .grid:has(> .module-table),
.module-page .grid:has(> .module-filters),
.module-page .grid:has(> .module-stat-card),
.module-page .grid:has(> .bg-theme-surface.rounded-xl),
.module-page .grid:has(> .bg-theme-surface.rounded-lg),
.module-page .grid:has(> [class*="rounded-xl"].border),
.sys-tab-panel .grid:has(> .module-form-panel),
.sys-tab-panel .grid:has(> .module-table),
.sys-tab-panel .grid:has(> .rounded-lg.border) {
    gap: var(--simoab-card-gap) !important;
    row-gap: var(--simoab-card-gap) !important;
    column-gap: var(--simoab-card-gap) !important;
}

/* Stats / KPI cards */
.module-stats,
.module-page .module-stats {
    gap: var(--simoab-card-gap) !important;
}

/*
 * Sibling card tanpa parent ber-gap (hindari dobel jarak di .module-page
 * yang sudah punya gap sendiri).
 */
:where(:not(.module-page):not(.module-card-stack):not(.module-content-stack):not(.sys-tab-panel):not(.module-card-grid):not(.grid)) > .module-form-panel + .module-form-panel,
:where(:not(.module-page):not(.module-card-stack):not(.module-content-stack):not(.sys-tab-panel):not(.module-card-grid):not(.grid)) > .module-form-panel + .module-table,
:where(:not(.module-page):not(.module-card-stack):not(.module-content-stack):not(.sys-tab-panel):not(.module-card-grid):not(.grid)) > .module-table + .module-form-panel,
:where(:not(.module-page):not(.module-card-stack):not(.module-content-stack):not(.sys-tab-panel):not(.module-card-grid):not(.grid)) > .module-table + .module-table,
:where(:not(.module-page):not(.module-card-stack):not(.module-content-stack):not(.sys-tab-panel):not(.module-card-grid):not(.grid)) > .module-filters + .module-table,
:where(:not(.module-page):not(.module-card-stack):not(.module-content-stack):not(.sys-tab-panel):not(.module-card-grid):not(.grid)) > .module-toolbar + .module-table,
:where(:not(.module-page):not(.module-card-stack):not(.module-content-stack):not(.sys-tab-panel):not(.module-card-grid):not(.grid)) > .module-toolbar + .module-filters,
:where(:not(.module-page):not(.module-card-stack):not(.module-content-stack):not(.sys-tab-panel):not(.module-card-grid):not(.grid)) > .module-stats + .module-filters,
:where(:not(.module-page):not(.module-card-stack):not(.module-content-stack):not(.sys-tab-panel):not(.module-card-grid):not(.grid)) > .module-stats + .module-table,
:where(:not(.module-page):not(.module-card-stack):not(.module-content-stack):not(.sys-tab-panel):not(.module-card-grid):not(.grid)) > .module-card-grid + .module-form-panel,
:where(:not(.module-page):not(.module-card-stack):not(.module-content-stack):not(.sys-tab-panel):not(.module-card-grid):not(.grid)) > .module-form-panel + .module-card-grid {
    margin-top: var(--simoab-card-stack-gap);
}

.module-page > .bg-theme-surface:not(#project-commercial-panel):not(.reconciliation-panel),
.module-page > .grid > .bg-theme-surface:not(#project-commercial-panel):not(.reconciliation-panel),
.module-page .bg-theme-surface.rounded-xl:not(.module-table):not(#project-commercial-panel):not(.reconciliation-panel) {
    padding: var(--simoab-inset, 1.25rem);
    box-sizing: border-box;
}

@media (min-width: 640px) {
    .module-page > .bg-theme-surface:not(#project-commercial-panel):not(.reconciliation-panel),
    .module-page > .grid > .bg-theme-surface:not(#project-commercial-panel):not(.reconciliation-panel),
    .module-page .bg-theme-surface.rounded-xl:not(.module-table):not(#project-commercial-panel):not(.reconciliation-panel) {
        padding: var(--simoab-inset, 1.25rem);
    }
}

#report-content {
    display: flex;
    flex-direction: column;
    gap: var(--simoab-card-stack-gap, var(--simoab-gap-md));
}

#report-content .bg-theme-surface.rounded-xl {
    padding: var(--simoab-inset, 1.25rem);
    box-sizing: border-box;
}

@media (min-width: 640px) {
    #report-content .bg-theme-surface.rounded-xl {
        padding: var(--simoab-inset, 1.25rem);
    }
}

.module-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    background: var(--simoab-accent);
    color: var(--simoab-accent-text, #0a0a0a);
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 0.5rem;
    border: none;
    transition: background-color 0.15s ease;
}

.module-btn-primary:hover {
    background: var(--simoab-accent-dark);
    color: var(--simoab-accent-text, #0a0a0a);
}

.module-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    border: 1px solid var(--simoab-border);
    border-radius: 0.5rem;
    font-size: 0.875rem;
    color: var(--simoab-text-muted);
    text-decoration: none;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.module-btn-secondary:hover {
    color: var(--simoab-text);
    border-color: color-mix(in srgb, var(--simoab-accent) 30%, var(--simoab-border));
}

.module-btn-accent {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    border: 1px solid color-mix(in srgb, var(--simoab-accent) 30%, transparent);
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--simoab-accent-fg);
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.module-btn-accent:hover {
    background: color-mix(in srgb, var(--simoab-accent) 10%, transparent);
}

@media print {
    .page-sop-footer,
    #sidebar,
    #sidebar-overlay,
    header,
    #report-tab-nav,
    #btn-report-print,
    #btn-report-export,
    #btn-report-pdf,
    .module-toolbar,
    .module-header,
    .report-meta-bar,
    #report-loading,
    #report-error {
        display: none !important;
    }

    .report-print-header {
        display: block !important;
        margin-bottom: 12px;
        page-break-inside: avoid;
    }

    main {
        padding: 0 !important;
    }

    #reports-module {
        font-size: 10pt;
    }

    .report-kpi-label {
        font-size: 7pt;
    }

    .report-kpi-value {
        font-size: 11pt;
    }

    .report-kpi-sub,
    .report-note,
    .report-panel__body {
        font-size: 8pt;
    }

    .report-section__title,
    .report-panel__title {
        font-size: 9pt;
    }

    .report-table {
        font-size: 9pt;
    }

    .report-table th {
        font-size: 7pt;
    }

    .report-table td {
        font-size: 9pt;
    }

    .report-table-wrap {
        overflow: visible;
        padding: 0 0.75rem 0.75rem;
    }

    .report-section {
        break-inside: avoid;
    }
}

.report-print-header {
    display: none;
    border: 1px solid #ccc;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 1rem;
}

.report-print-header__inner {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border-bottom: 3px solid #f5c400;
}

.report-print-header__brand {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.report-print-header__logo {
    width: 52px;
    height: 52px;
    object-fit: contain;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 3px;
}

.report-print-header__logo-fallback {
    width: 52px;
    height: 52px;
    border-radius: 6px;
    background: #f5c400;
    color: #111;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.report-print-header__name {
    font-size: 14px;
    font-weight: 800;
    margin: 0 0 2px;
    text-transform: uppercase;
    color: #111;
}

.report-print-header__legal,
.report-print-header__line {
    margin: 0 0 2px;
    font-size: 9px;
    color: #555;
}

.report-print-header__meta {
    text-align: right;
    font-size: 9px;
    color: #444;
}

.report-print-header__title {
    font-weight: 800;
    font-size: 11px;
    text-transform: uppercase;
    margin: 0 0 4px;
    color: #111;
}

.report-print-header__date {
    margin: 0;
}

.report-tab.is-loading {
    opacity: 0.65;
    pointer-events: none;
}

.report-tab-nav.is-loading .report-tab:not(.is-active) {
    opacity: 0.5;
}

.report-spinner {
    width: 1rem;
    height: 1rem;
    border: 2px solid var(--simoab-border);
    border-top-color: var(--simoab-accent);
    border-radius: 9999px;
    animation: reportSpin 0.7s linear infinite;
}

@keyframes reportSpin {
    to { transform: rotate(360deg); }
}

.report-util-bar {
    height: 0.5rem;
    border-radius: 9999px;
    background: var(--simoab-input);
    overflow: hidden;
    width: 4rem;
    flex-shrink: 0;
}

.report-util-bar > span {
    display: block;
    height: 100%;
    background: rgb(234, 179, 8);
    border-radius: 9999px;
}

.report-util-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
}

.report-util-pct {
    min-width: 2.5rem;
    text-align: right;
    font-size: 0.8125rem;
    font-family: ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
}

.report-alert {
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    line-height: 1.45;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.report-alert__title {
    font-weight: 600;
}

.report-meta-bar {
    background: color-mix(in srgb, var(--simoab-surface) 90%, var(--simoab-accent) 10%);
    border: 1px solid color-mix(in srgb, var(--simoab-accent) 25%, var(--simoab-border));
    border-radius: 0.75rem;
    padding: 0.625rem 0.875rem;
}

.report-meta-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem 0.625rem;
    font-size: 0.75rem;
    color: var(--simoab-muted);
}

.report-meta-scope {
    font-weight: 600;
    color: var(--simoab-accent-fg);
}

.report-meta-dot {
    opacity: 0.5;
}

.report-meta-note {
    color: var(--simoab-text-muted);
}

.report-meta-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-left: auto;
}

.report-meta-tag {
    display: inline-flex;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    border: 1px solid var(--simoab-border);
    background: var(--simoab-input);
    font-size: 0.6875rem;
    color: var(--simoab-text);
}

.report-int-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.625rem;
}

@media (min-width: 768px) {
    .report-int-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.report-int-card {
    background: var(--simoab-surface);
    border: 1px solid var(--simoab-border);
    border-radius: 0.75rem;
    padding: 0.75rem 1rem;
}

.report-int-pending {
    font-size: 0.6875rem;
    color: #fb923c;
    font-weight: 600;
}

.report-int-ok {
    font-size: 0.6875rem;
    color: var(--simoab-muted);
}

.report-alert-link {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--simoab-accent-fg);
    white-space: nowrap;
}

.report-alert-link:hover {
    text-decoration: underline;
}

/* Busy / loading state untuk tombol CRUD & aksi backend */
.btn-busy-spinner {
    display: inline-block;
    width: 0.875rem;
    height: 0.875rem;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 9999px;
    animation: btnBusySpin 0.65s linear infinite;
    flex-shrink: 0;
    vertical-align: -0.1em;
}

@keyframes btnBusySpin {
    to { transform: rotate(360deg); }
}

button.is-busy,
.simoab-table-btn.is-busy,
.module-btn-primary.is-busy,
.module-btn-secondary.is-busy,
.module-btn-accent.is-busy,
a.is-busy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    opacity: 0.78;
    cursor: wait !important;
    pointer-events: none;
}

button.is-busy .btn-busy-label,
.simoab-table-btn.is-busy .btn-busy-label {
    white-space: nowrap;
}

.simoab-table-btn.is-busy {
    min-width: 4.5rem;
}

/* ===== Detil Langganan (tenant portal) ===== */
.sub-page {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.sub-summary__top {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}
.sub-summary__eyebrow {
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--simoab-text-subtle);
    font-weight: 600;
}
.sub-summary__title {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--simoab-text);
    margin-top: 0.15rem;
    line-height: 1.25;
}
.sub-summary__meta {
    font-size: 0.8125rem;
    color: var(--simoab-text-muted);
    margin-top: 0.35rem;
}
.sub-summary__note {
    font-size: 0.75rem;
    color: var(--simoab-text-subtle);
    margin: 0.85rem 0 0;
}
.sub-current-card--trial {
    border-color: color-mix(in srgb, var(--simoab-accent) 35%, var(--simoab-border));
    background: color-mix(in srgb, var(--simoab-accent) 6%, var(--simoab-surface));
}
.sub-current-card--active {
    border-color: color-mix(in srgb, #22c55e 28%, var(--simoab-border));
}
.sub-current-card--expired {
    border-color: color-mix(in srgb, #ef4444 30%, var(--simoab-border));
    background: color-mix(in srgb, #ef4444 6%, var(--simoab-surface));
}
.sub-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
    margin-top: 1.1rem;
}
@media (min-width: 640px) {
    .sub-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.sub-metric {
    background: var(--simoab-input);
    border: 1px solid var(--simoab-border);
    border-radius: 0.75rem;
    padding: 0.7rem 0.6rem;
    text-align: center;
}
.sub-metric__value {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--simoab-text);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}
.sub-metric__value--date { font-size: 0.9rem; }
.sub-metric__sep {
    margin: 0 0.1rem;
    color: var(--simoab-text-subtle);
    font-weight: 500;
}
.sub-metric__label {
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--simoab-text-muted);
    margin-top: 0.3rem;
}
.sub-features-toggle {
    margin-top: 1rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--simoab-border);
}
.sub-features-toggle > summary {
    cursor: pointer;
    list-style: none;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--simoab-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    user-select: none;
}
.sub-features-toggle > summary::-webkit-details-marker { display: none; }
.sub-features-toggle > summary::after {
    content: '+';
    float: right;
    font-weight: 700;
    color: var(--simoab-accent-fg);
}
.sub-features-toggle[open] > summary::after { content: '−'; }
.sub-features-toggle .sub-feature-list { margin-top: 0.75rem; }
.sub-feature-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.35rem;
}
.sub-feature-list li {
    position: relative;
    padding-left: 1rem;
    font-size: 0.8125rem;
    color: var(--simoab-text-muted);
}
.sub-feature-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.45rem;
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 999px;
    background: var(--simoab-accent);
}
.sub-feature-list--compact li { font-size: 0.75rem; }
.sub-inline-hint {
    font-size: 0.75rem;
    color: var(--simoab-text-subtle);
    margin: -0.25rem 0 0;
    text-align: center;
}
.sub-pending-banner {
    border-color: color-mix(in srgb, var(--simoab-accent) 35%, var(--simoab-border));
    background: color-mix(in srgb, var(--simoab-accent) 6%, var(--simoab-surface));
}
.sub-catalog.is-locked {
    opacity: 0.78;
    pointer-events: none;
}
.sub-catalog__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.85rem;
}
.sub-catalog__title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--simoab-text);
}
.sub-catalog__subtitle {
    font-size: 0.75rem;
    color: var(--simoab-text-muted);
    margin-top: 0.2rem;
    max-width: 36rem;
}
.sub-plans-grid {
    display: grid;
    gap: 0.85rem;
    grid-template-columns: 1fr;
}
@media (min-width: 768px) {
    .sub-plans-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
    .sub-plans-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.sub-plan-card {
    background: var(--simoab-surface);
    border: 1px solid var(--simoab-border);
    border-radius: 0.875rem;
    padding: 1rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    min-height: 100%;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.sub-plan-card.is-current {
    border-color: color-mix(in srgb, var(--simoab-accent) 40%, var(--simoab-border));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--simoab-accent) 20%, transparent);
}
.sub-plan-card.is-blocked { opacity: 0.7; }
.sub-plan-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}
.sub-plan-card__name {
    font-weight: 700;
    color: var(--simoab-text);
}
.sub-plan-card__code {
    font-size: 0.625rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    color: var(--simoab-text-subtle);
    margin-top: 0.15rem;
}
.sub-plan-card__pricing { margin-top: 0.15rem; }
.sub-plan-card__price {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--simoab-text);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}
.sub-plan-card__unit {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--simoab-text-subtle);
    margin-left: 0.15rem;
}
.sub-plan-card__total {
    font-size: 0.6875rem;
    color: var(--simoab-text-subtle);
    margin-top: 0.2rem;
}
.sub-plan-card__save {
    font-size: 0.6875rem;
    color: var(--simoab-accent-fg);
    margin-top: 0.15rem;
    font-weight: 600;
}
.sub-plan-card__desc {
    font-size: 0.75rem;
    color: var(--simoab-text-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.sub-plan-card__quota {
    font-size: 0.75rem;
    color: var(--simoab-text-subtle);
}
.sub-plan-card__footer {
    margin-top: auto;
    padding-top: 0.75rem;
    border-top: 1px solid var(--simoab-border);
}
.sub-plan-card__hint {
    font-size: 0.6875rem;
    color: var(--simoab-text-subtle);
    line-height: 1.4;
    margin: 0;
}
.sub-plan-card__hint--warn { color: var(--simoab-accent-fg); }
.sub-docs { margin-top: 0.25rem; }

/* Durasi berlangganan */
.sub-duration-picker {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    align-items: flex-start;
}
@media (min-width: 640px) {
    .sub-duration-picker { align-items: flex-end; }
}
.sub-duration-picker__label {
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--simoab-text-subtle);
    font-weight: 600;
}
.sub-duration-picker__options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.sub-duration-btn {
    min-width: 3.4rem;
    padding: 0.4rem 0.55rem;
    border-radius: 0.65rem;
    border: 1px solid var(--simoab-border);
    background: var(--simoab-input);
    color: var(--simoab-text-muted);
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.1;
    position: relative;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.sub-duration-btn:hover:not(:disabled) {
    border-color: color-mix(in srgb, var(--simoab-accent) 40%, var(--simoab-border));
}
.sub-duration-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.sub-duration-btn.is-active {
    border-color: var(--simoab-accent);
    background: var(--simoab-accent-bg);
    color: var(--simoab-accent-fg);
    font-weight: 700;
    box-shadow: inset 0 -2px 0 0 var(--simoab-accent);
}
.sub-duration-btn__n {
    font-size: 0.95rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.sub-duration-btn__u {
    font-size: 0.5625rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.8;
}
.sub-duration-btn__tag {
    position: absolute;
    top: -0.35rem;
    right: -0.3rem;
    font-size: 0.5rem;
    font-weight: 700;
    padding: 0.1rem 0.3rem;
    border-radius: 999px;
    background: var(--simoab-accent);
    color: var(--simoab-accent-text);
}

/* Panel pembayaran QRIS — layout modern, inset konsisten */
.qris-pay-panel {
    background: var(--simoab-surface);
    border: 1px solid color-mix(in srgb, var(--simoab-accent) 28%, var(--simoab-border));
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: var(--simoab-shadow);
}
.qris-pay-panel__inner {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: var(--simoab-inset, 1.25rem);
    box-sizing: border-box;
}
.qris-pay-panel__head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.125rem;
    border-radius: 0.875rem;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--simoab-accent) 12%, transparent), transparent 70%),
        var(--simoab-elevated);
    border: 1px solid var(--simoab-border);
}
.qris-pay-panel__badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    color: var(--simoab-accent-text);
    background: var(--simoab-accent);
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
}
.qris-pay-panel__title {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--simoab-text);
    margin: 0.45rem 0 0;
    letter-spacing: -0.02em;
    line-height: 1.25;
}
.qris-pay-panel__meta {
    font-size: 0.8125rem;
    color: var(--simoab-text-muted);
    margin: 0.35rem 0 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}
.qris-pay-panel__meta-sep {
    opacity: 0.5;
}
.qris-pay-panel__amount {
    text-align: right;
    flex-shrink: 0;
}
.qris-pay-panel__amount-label {
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--simoab-text-muted);
    font-weight: 600;
    margin: 0;
}
.qris-pay-panel__amount-value {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--simoab-accent-fg);
    font-variant-numeric: tabular-nums;
    margin: 0.2rem 0 0;
    letter-spacing: -0.02em;
    line-height: 1.2;
}
.qris-pay-panel__ttl {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.25rem;
    padding: 0.9rem 1.125rem;
    border: 1px solid color-mix(in srgb, var(--simoab-accent) 32%, var(--simoab-border));
    border-radius: 0.875rem;
    background: color-mix(in srgb, var(--simoab-accent) 9%, var(--simoab-elevated));
}
.qris-pay-panel__ttl-copy {
    flex: 1 1 12rem;
    min-width: 0;
}
.qris-pay-panel__ttl-label {
    margin: 0;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--simoab-text-muted);
}
.qris-pay-panel__ttl-hint {
    margin: 0.3rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--simoab-text-subtle);
}
.qris-pay-panel__ttl-value {
    margin: 0;
    text-align: right;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}
.qris-countdown__main {
    display: block;
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: var(--simoab-accent-fg);
    line-height: 1.15;
}
.qris-countdown__sub {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.75rem;
    color: var(--simoab-text-muted);
}
.qris-pay-panel__ttl-value.is-urgent .qris-countdown__main {
    color: #B45309;
}
.qris-pay-panel__ttl-value.is-expired .qris-countdown__main {
    color: #DC2626;
}
.qris-pay-panel__body {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    padding: 1.125rem;
    border: 1px solid var(--simoab-border);
    border-radius: 0.875rem;
    background: var(--simoab-elevated);
    box-sizing: border-box;
}
@media (min-width: 640px) {
    .qris-pay-panel__body {
        grid-template-columns: minmax(200px, 240px) minmax(0, 1fr);
        align-items: start;
        gap: 1.5rem;
    }
}
.qris-pay-panel__qr {
    background: #fff;
    border: 1px solid var(--simoab-border);
    border-radius: 0.875rem;
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    aspect-ratio: 1;
    max-width: 240px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}
.qris-pay-panel__qr-img {
    width: 100%;
    height: auto;
    object-fit: contain;
    image-rendering: pixelated;
}
.qris-pay-panel__qr-fallback {
    margin: 0;
    padding: 0.5rem;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--simoab-text-muted);
    text-align: center;
    word-break: break-all;
}
.qris-pay-panel__aside {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}
.qris-pay-panel__steps {
    margin: 0;
    padding-left: 1.15rem;
    display: grid;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--simoab-text-muted);
    line-height: 1.5;
}
.qris-pay-panel__docs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.qris-pay-panel__doc-link,
.qris-pay-panel__docs a {
    display: inline-flex;
    align-items: center;
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 0.5rem 0.85rem;
    border-radius: 0.625rem;
    border: 1px solid color-mix(in srgb, var(--simoab-accent) 35%, var(--simoab-border));
    color: var(--simoab-accent-fg);
    background: var(--simoab-accent-bg);
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.qris-pay-panel__doc-link:hover,
.qris-pay-panel__docs a:hover {
    background: color-mix(in srgb, var(--simoab-accent) 22%, transparent);
    border-color: var(--simoab-accent);
}
.qris-pay-panel__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
}
.qris-pay-panel__status {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--simoab-text-subtle);
}
.qris-pay-panel__status.is-paid {
    color: #16A34A;
    font-weight: 600;
}

/* Legacy class hooks (JS may still toggle) */
.qris-pay-panel__timer.is-expired {
    color: #DC2626;
    font-weight: 600;
}

/* ============================================================
   FINANCE TABLES — layout konsisten laporan keuangan
   ============================================================ */

#finance-module .finance-table-card {
    background: var(--simoab-surface);
    border: 1px solid var(--simoab-border);
    border-radius: var(--simoab-card-radius, 0.75rem);
    overflow: hidden;
    box-sizing: border-box;
}

#finance-module .finance-table-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: var(--simoab-inset-sm, 1rem 1.125rem);
    border-bottom: 1px solid var(--simoab-border);
    background: var(--simoab-input-bg, rgba(255, 255, 255, 0.03));
}

#finance-module .finance-table-card__title {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--simoab-text);
}

#finance-module .finance-table-card__subtitle {
    margin: 0.25rem 0 0;
    font-size: 0.75rem;
    color: var(--simoab-text-subtle);
}

#finance-module .finance-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

#finance-module .finance-table,
#finance-module table.module-data-table,
#finance-module table.finance-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
    line-height: 1.45;
}

#finance-module .finance-table thead tr,
#finance-module table.module-data-table thead tr {
    border-bottom: 1px solid var(--simoab-border);
    background: var(--simoab-input-bg, rgba(255, 255, 255, 0.03));
    color: var(--simoab-text-muted);
}

#finance-module .finance-table th,
#finance-module table.module-data-table th {
    padding: 0.75rem var(--simoab-inset-x, 1.25rem);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: left;
    white-space: nowrap;
    vertical-align: middle;
}

#finance-module .finance-table td,
#finance-module table.module-data-table td {
    padding: 0.7rem var(--simoab-inset-x, 1.25rem);
    border-bottom: 1px solid color-mix(in srgb, var(--simoab-border) 70%, transparent);
    vertical-align: middle;
    color: var(--simoab-text);
}

#finance-module .finance-table tbody tr:last-child td,
#finance-module table.module-data-table tbody tr:last-child td {
    border-bottom: none;
}

#finance-module .finance-table tbody tr:hover td,
#finance-module table.module-data-table tbody tr:hover td {
    background: var(--simoab-hover);
}

#finance-module .finance-table tfoot td,
#finance-module table.module-data-table tfoot td {
    padding: 0.8rem var(--simoab-inset-x, 1.25rem);
    border-top: 1px solid var(--simoab-border);
    background: var(--simoab-input-bg, rgba(255, 255, 255, 0.03));
    font-weight: 700;
    color: var(--simoab-text);
}

#finance-module .finance-table .col-num,
#finance-module .finance-table th.col-num,
#finance-module .finance-table td.col-num,
#finance-module .finance-table .text-right,
#finance-module table.module-data-table th.text-right,
#finance-module table.module-data-table td.text-right {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

#finance-module .finance-table .col-code,
#finance-module .finance-table td.font-mono,
#finance-module table.module-data-table td.font-mono {
    font-family: ui-monospace, Consolas, monospace;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

#finance-module .finance-table .col-code { width: 5.5rem; }
#finance-module .finance-table .col-date { width: 6.5rem; white-space: nowrap; }
#finance-module .finance-table .col-status { width: 6rem; }
#finance-module .finance-table .col-actions { width: 7rem; text-align: right; white-space: nowrap; }

#finance-module .finance-table .is-header-row td {
    font-weight: 700;
    color: var(--simoab-text-muted);
}

#finance-module .finance-table .is-empty td,
#finance-module table.module-data-table .text-center.text-theme-subtle {
    text-align: center;
    color: var(--simoab-text-subtle);
    font-style: italic;
    padding: 1.75rem var(--simoab-inset-x, 1.25rem);
}

#finance-module .finance-summary-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.25rem;
    padding: var(--simoab-inset, 1.25rem);
    border: 1px solid var(--simoab-border);
    border-radius: var(--simoab-card-radius, 0.75rem);
    background: var(--simoab-surface);
    box-sizing: border-box;
}

#finance-module .finance-summary-bar__label {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--simoab-text);
}

#finance-module .finance-summary-bar__value {
    margin: 0;
    font-family: ui-monospace, Consolas, monospace;
    font-size: 1.125rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

#finance-module .finance-summary-bar__value.is-pos { color: #16A34A; }
#finance-module .finance-summary-bar__value.is-neg { color: #DC2626; }

#finance-module .finance-grid-2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--simoab-card-gap, 1rem);
}

@media (min-width: 1024px) {
    #finance-module .finance-grid-2 {
        grid-template-columns: 1fr 1fr;
    }
}

#finance-module .finance-stack {
    display: flex;
    flex-direction: column;
    gap: var(--simoab-card-stack-gap, 1rem);
}

#finance-module .finance-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    border: 1px solid var(--simoab-border);
    color: var(--simoab-text-muted);
    text-transform: capitalize;
}

#finance-module .finance-badge.is-posted {
    border-color: color-mix(in srgb, #16A34A 40%, var(--simoab-border));
    color: #16A34A;
    background: color-mix(in srgb, #16A34A 10%, transparent);
}

#finance-module .finance-badge.is-void {
    border-color: color-mix(in srgb, #DC2626 40%, var(--simoab-border));
    color: #DC2626;
    background: color-mix(in srgb, #DC2626 10%, transparent);
}

#finance-module .finance-link {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--simoab-accent-fg);
    text-decoration: underline;
    text-underline-offset: 2px;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

#finance-module .finance-link.is-danger { color: #DC2626; }

#finance-module #finance-content {
    display: flex;
    flex-direction: column;
    gap: var(--simoab-card-stack-gap, 1rem);
}

/* Auth / register brand mark — platform logo */
.auth-brand-mark {
    text-decoration: none;
}

.auth-brand-mark__logo,
.auth-brand-mark__fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border-radius: 1rem;
    overflow: hidden;
    flex-shrink: 0;
}

.auth-brand-mark__logo {
    background: var(--simoab-surface);
    border: 1px solid var(--simoab-border);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--simoab-text) 6%, transparent);
}

.auth-brand-mark__logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 0.35rem;
    display: block;
}

.auth-brand-mark__fallback {
    background: var(--simoab-accent, #f5c518);
}

/* ============================================================
   Dashboard analytics — chart cards & quick links
   ============================================================ */
.dash-kpi-grid {
    gap: var(--simoab-card-gap, var(--simoab-gap-md));
}

.dash-chart-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--simoab-card-gap, var(--simoab-gap-md));
}

@media (min-width: 768px) {
    .dash-chart-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1280px) {
    .dash-chart-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.dash-chart-card {
    background: var(--simoab-surface);
    border: 1px solid var(--simoab-border);
    border-radius: var(--simoab-card-radius);
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

.dash-chart-card--wide {
    grid-column: 1 / -1;
}

@media (min-width: 1280px) {
    .dash-chart-card--wide {
        grid-column: span 2;
    }
}

.dash-chart-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.875rem 1rem 0.25rem;
}

.dash-chart-card__title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--simoab-text);
    line-height: 1.3;
}

.dash-chart-card__subtitle {
    margin-top: 0.15rem;
    font-size: 0.6875rem;
    color: var(--simoab-muted);
    line-height: 1.35;
}

.dash-chart-card__body {
    position: relative;
    height: 16rem;
    padding: 0.5rem 0.75rem 0.875rem;
    min-height: 12rem;
}

.dash-chart-card__body--sm {
    height: 14rem;
}

.dash-chart-card__body canvas {
    width: 100% !important;
    height: 100% !important;
}

.dash-chart-empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 1rem;
    text-align: center;
    font-size: 0.8125rem;
    color: var(--simoab-subtle);
    pointer-events: none;
}

.dash-chart-empty.hidden,
.dash-chart-card__body canvas.hidden {
    display: none !important;
}

.dash-quick-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    padding: 0.625rem 0.75rem;
    border-radius: var(--simoab-card-radius, 0.5rem);
    border: 1px solid var(--simoab-border);
    background: var(--simoab-input, var(--simoab-surface));
    color: var(--simoab-text);
    font-size: 0.75rem;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.dash-quick-link:hover {
    border-color: color-mix(in srgb, var(--simoab-accent) 40%, var(--simoab-border));
    background: color-mix(in srgb, var(--simoab-accent) 6%, var(--simoab-surface));
    color: var(--simoab-accent);
}

/* Pengajuan Sparepart — modal form */
.spr-form-section {
    padding: 0.85rem 0 0;
    border-top: 1px solid var(--simoab-border, rgba(0, 0, 0, 0.08));
}

.spr-form-section:first-of-type {
    border-top: 0;
    padding-top: 0;
}

.spr-form-section__title {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--simoab-text-muted, #6b7280);
    margin: 0 0 0.75rem;
}

.spr-form-section__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.spr-form-section--items {
    background: var(--simoab-input-bg, rgba(0, 0, 0, 0.02));
    border: 1px solid var(--simoab-border);
    border-radius: 0.75rem;
    padding: 0.85rem 0.9rem 1rem;
}

.spr-form-section--items .spr-form-section__title {
    color: var(--simoab-text);
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.875rem;
}

.spr-context-panel {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding: 0.65rem 0.75rem;
    border-radius: 0.65rem;
    border: 1px solid var(--simoab-border);
    background: var(--simoab-input-bg, rgba(0, 0, 0, 0.02));
}

.spr-context-panel__label {
    display: block;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--simoab-text-subtle, #9ca3af);
}

.spr-context-panel__value {
    display: block;
    font-size: 0.8125rem;
    color: var(--simoab-text);
    margin-top: 0.15rem;
    word-break: break-word;
}

.spr-items-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.spr-item-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 5.75rem 2.5rem;
    column-gap: 0.55rem;
    row-gap: 0.35rem;
    align-items: start;
    padding: 0.65rem 0.7rem;
    border-radius: 0.55rem;
    border: 1px solid var(--simoab-border);
    background: var(--simoab-surface, #fff);
}

.spr-item-row__part,
.spr-item-row__qty,
.spr-item-row__actions {
    min-width: 0;
}

.spr-item-row__part {
    grid-column: 1;
}

.spr-item-row__qty {
    grid-column: 2;
}

.spr-item-row__actions {
    grid-column: 3;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.spr-item-row .form-field {
    gap: 0.25rem;
}

.spr-item-row .form-label {
    margin-bottom: 0;
}

.spr-item-row__actions-spacer {
    visibility: hidden;
    user-select: none;
    pointer-events: none;
    margin-bottom: 0;
}

.spr-item-row__remove {
    box-sizing: border-box;
    width: 2.5rem;
    min-width: 2.5rem;
    height: var(--simoab-form-min-height);
    min-height: var(--simoab-form-min-height);
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    flex-shrink: 0;
    border-radius: var(--simoab-form-radius);
}

.spr-item-row .simoab-select-wrap,
.spr-item-row .simoab-select-trigger,
.spr-item-row .spr-item-qty {
    width: 100%;
}

.spr-item-row .simoab-select-trigger,
.spr-item-row .spr-item-qty {
    min-height: var(--simoab-form-min-height);
    height: var(--simoab-form-min-height);
    box-sizing: border-box;
    background-color: var(--simoab-input) !important;
    border: 1px solid var(--simoab-border);
    border-radius: var(--simoab-form-radius);
}

.spr-item-row .spr-item-qty {
    text-align: right;
    padding-top: 0;
    padding-bottom: 0;
}

.spr-item-row__stock {
    grid-column: 1 / -1;
    font-size: 0.65rem;
    color: var(--simoab-text-subtle);
    margin: 0;
    line-height: 1.35;
}

.spr-item-row__stock.is-low { color: #b45309; }
.spr-item-row__stock.is-empty { color: #b91c1c; }

@media (max-width: 639px) {
    .spr-item-row {
        grid-template-columns: minmax(0, 1fr) 2.5rem;
        grid-template-areas:
            "part part"
            "qty actions"
            "stock stock";
    }

    .spr-item-row__part { grid-area: part; }
    .spr-item-row__qty { grid-area: qty; max-width: 7rem; }
    .spr-item-row__actions { grid-area: actions; }
    .spr-item-row__stock { grid-area: stock; }
}

.spr-items-empty {
    padding: 1rem;
    text-align: center;
    font-size: 0.8125rem;
    color: var(--simoab-text-muted);
    border: 1px dashed var(--simoab-border);
    border-radius: 0.55rem;
}

@media (max-width: 639px) {
    .spr-context-panel {
        grid-template-columns: 1fr;
    }
}

/* Mutasi tangki BBM */
.fuel-stmt__summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}
@media (min-width: 640px) {
    .fuel-stmt__summary {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}
.fuel-stmt__summary > div {
    padding: 0.75rem 0.875rem;
    border: 1px solid var(--simoab-border);
    border-radius: 0.625rem;
    background: var(--simoab-input);
}
.fuel-stmt__label {
    display: block;
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--simoab-text-subtle);
    margin-bottom: 0.25rem;
}
.fuel-stmt-table tfoot td {
    font-weight: 700;
    border-top: 2px solid var(--simoab-border);
    background: color-mix(in srgb, var(--simoab-accent) 6%, var(--simoab-surface));
}
.fuel-stmt-row--opening td {
    background: var(--simoab-input);
    font-weight: 600;
}
.fuel-stmt-row--dayfoot td {
    font-size: 0.75rem;
    color: var(--simoab-text-muted);
    background: color-mix(in srgb, var(--simoab-border) 35%, transparent);
    border-top: 1px dashed var(--simoab-border);
}
.fuel-stmt__desc { display: block; color: var(--simoab-text); }
.fuel-stmt__meta {
    display: inline-block;
    margin-left: 0.35rem;
    font-size: 0.7rem;
    color: var(--simoab-accent-fg, var(--simoab-accent));
}
.fuel-stmt__type {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.65rem;
    color: var(--simoab-text-subtle);
}
.report-subsection { margin-bottom: 1.25rem; }
.report-subsection__title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--simoab-text);
    margin: 0 0 0.5rem;
}
.report-block { margin-top: 1.5rem; }
.report-block__title {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--simoab-text);
    margin: 0 0 0.25rem;
}