/* ─── Google Fonts ─────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ─── Theme tokens ──────────────────────────────────────────────────────────── */
:root {
    --kp-bg:               #f0f4f8;
    --kp-surface:          #ffffff;
    --kp-surface-2:        #f8fafc;
    --kp-surface-3:        #f1f5f9;
    --kp-border:           #e2e8f0;
    --kp-border-2:         #cbd5e1;
    --kp-text-1:           #0f172a;
    --kp-text-2:           #64748b;
    --kp-text-3:           #94a3b8;
    --kp-accent:           #c9a84c;
    --kp-accent-hover:     #b8943e;
    --kp-accent-soft:      #fdf8ec;
    --kp-accent-border:    #e8d08a;
    --kp-badge-bg:         #e8edf8;
    --kp-badge-text:       #1e40af;
    --kp-hover:            #f1f5fb;
    --kp-shadow-sm:        0 1px 2px rgba(0,0,0,.05);
    --kp-shadow:           0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
    --kp-shadow-md:        0 4px 12px rgba(0,0,0,.1), 0 2px 4px rgba(0,0,0,.06);
    --kp-radius:           10px;
    --kp-radius-sm:        6px;
    --kp-img-placeholder:  #f1f5f9;
    --kp-img-icon:         #cbd5e1;
    --kp-lokasi-surface:   #eff6ff;
    --kp-lokasi-text:      #1e40af;
    --kp-lokasi-sub:       #3b82f6;
    --kp-lokasi-meta:      #64748b;
    --kp-lokasi-border:    #bfdbfe;
    --kp-history-border:   #e2e8f0;
    --kp-history-text:     #94a3b8;
    --kp-danger:           #ef4444;
    --kp-danger-soft:      #fef2f2;
    --kp-success:          #22c55e;
    --kp-success-soft:     #f0fdf4;
    /* Sidebar — intentionally stays dark-navy in light mode (branded) */
    --kp-sidebar-bg:       #0b1a30;
    --kp-sidebar-border:   rgba(255,255,255,.07);
    --kp-sidebar-text-1:   #e8edf8;
    --kp-sidebar-text-2:   #8aadcc;
    --kp-sidebar-text-3:   #3d5a7a;
    --kp-sidebar-hover:    rgba(255,255,255,.06);
    --kp-sidebar-active:   rgba(201,168,76,.15);
    --kp-appbar-bg:        #0b1a30;
    --kp-appbar-border:    rgba(255,255,255,.07);
    --kp-appbar-text:      #e8edf8;
    --kp-appbar-sub:       #6888b0;
}

@media (prefers-color-scheme: dark) {
    :root {
        --kp-bg:               #080f1c;
        --kp-surface:          #101c30;
        --kp-surface-2:        #0d1828;
        --kp-surface-3:        #0a1522;
        --kp-border:           #1c3050;
        --kp-border-2:         #233d60;
        --kp-text-1:           #e2e8f0;
        --kp-text-2:           #7aa2c8;
        --kp-text-3:           #3d5a7a;
        --kp-accent:           #d4a84c;
        --kp-accent-hover:     #e0b85a;
        --kp-accent-soft:      #1a160a;
        --kp-accent-border:    #3d2e0a;
        --kp-badge-bg:         #1c3050;
        --kp-badge-text:       #93c5fd;
        --kp-hover:            #1c3050;
        --kp-shadow-sm:        0 1px 2px rgba(0,0,0,.3);
        --kp-shadow:           0 1px 3px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.3);
        --kp-shadow-md:        0 4px 12px rgba(0,0,0,.5), 0 2px 4px rgba(0,0,0,.3);
        --kp-img-placeholder:  #0d1828;
        --kp-img-icon:         #1c3050;
        --kp-lokasi-surface:   #0a1e38;
        --kp-lokasi-text:      #93c5fd;
        --kp-lokasi-sub:       #60a5fa;
        --kp-lokasi-meta:      #7aa2c8;
        --kp-lokasi-border:    #1c3050;
        --kp-history-border:   #1c3050;
        --kp-history-text:     #3d5a7a;
        --kp-danger:           #f87171;
        --kp-danger-soft:      #1a0a0a;
        --kp-success:          #4ade80;
        --kp-success-soft:     #0a1a0f;
        /* Sidebar dark mode — slightly deeper */
        --kp-sidebar-bg:       #060d1a;
        --kp-sidebar-border:   rgba(255,255,255,.06);
        --kp-sidebar-text-1:   #d8e4f0;
        --kp-sidebar-text-2:   #6888b0;
        --kp-sidebar-text-3:   #2c4a68;
        --kp-sidebar-hover:    rgba(255,255,255,.05);
        --kp-sidebar-active:   rgba(201,168,76,.12);
        --kp-appbar-bg:        #060d1a;
        --kp-appbar-border:    rgba(255,255,255,.06);
        --kp-appbar-text:      #d8e4f0;
        --kp-appbar-sub:       #4a6a8a;
    }
}

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

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ─── Sidebar nav ───────────────────────────────────────────────────────────── */

/* Prevent horizontal overflow from MudBlazor nav internals */
.mud-nav-menu,
.mud-nav-group,
.mud-nav-group-list,
.mud-nav-link {
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
}

.mud-nav-link {
    border-radius: 7px !important;
    margin: 1px 8px !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--kp-sidebar-text-2) !important;
    transition: background .15s, color .15s !important;
}

.mud-nav-link:hover {
    background: rgba(201,168,76,.1) !important;
    color: #e8d9a8 !important;
}

.mud-nav-link.nav-link-active,
.mud-nav-link.active {
    background: rgba(201,168,76,.18) !important;
    color: #c9a84c !important;
    font-weight: 600 !important;
}

.mud-nav-link .mud-icon-root {
    font-size: 18px !important;
    margin-right: 10px !important;
    opacity: .75;
}

.mud-nav-link.nav-link-active .mud-icon-root,
.mud-nav-link.active .mud-icon-root {
    opacity: 1;
    color: #c9a84c !important;
}

/* ─── App bar ───────────────────────────────────────────────────────────────── */
.mud-appbar {
    backdrop-filter: blur(8px) !important;
}

/* ─── Main content padding ──────────────────────────────────────────────────── */
.mud-main-content {
    background: var(--kp-bg) !important;
}

/* ─── Radzen Card ───────────────────────────────────────────────────────────── */
.rz-card {
    background: var(--kp-surface) !important;
    border: 1px solid var(--kp-border) !important;
    border-radius: var(--kp-radius) !important;
    box-shadow: var(--kp-shadow) !important;
    padding: 24px !important;
}

/* ─── Data grid ─────────────────────────────────────────────────────────────── */
.rz-data-grid {
    border-radius: var(--kp-radius-sm) !important;
    overflow: hidden !important;
    border: 1px solid var(--kp-border) !important;
}

.rz-grid-table {
    border-collapse: collapse !important;
    width: 100% !important;
}

.rz-grid-table thead tr {
    background: var(--kp-surface-2) !important;
}

.rz-grid-table thead th {
    background: var(--kp-surface-2) !important;
    color: var(--kp-text-3) !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: .8px !important;
    text-transform: uppercase !important;
    border-bottom: 1px solid var(--kp-border) !important;
    padding: 10px 14px !important;
    white-space: nowrap !important;
}

.rz-grid-table tbody tr {
    transition: background .1s;
}

.rz-grid-table tbody tr:hover td {
    background: var(--kp-hover) !important;
}

.rz-grid-table td {
    color: var(--kp-text-1) !important;
    font-size: 13px !important;
    border-bottom: 1px solid var(--kp-border) !important;
    padding: 10px 14px !important;
    vertical-align: middle !important;
}

.rz-grid-table tbody tr:last-child td {
    border-bottom: none !important;
}

.rz-paginator {
    background: var(--kp-surface-2) !important;
    border-top: 1px solid var(--kp-border) !important;
    color: var(--kp-text-2) !important;
    font-size: 12px !important;
    padding: 8px 14px !important;
}

.rz-paginator .rz-paginator-pages .rz-paginator-page {
    border-radius: 6px !important;
    font-size: 12px !important;
}

/* ─── Radzen Buttons ────────────────────────────────────────────────────────── */
.rz-button {
    font-family: 'Inter', sans-serif !important;
    font-weight: 500 !important;
    border-radius: var(--kp-radius-sm) !important;
    font-size: 13px !important;
    transition: all .15s !important;
}

.rz-button.rz-button-sm {
    font-size: 12px !important;
}

/* Primary button gold accent */
.rz-button-primary {
    background: var(--kp-accent) !important;
    border-color: var(--kp-accent) !important;
    color: #0c1a3a !important;
    font-weight: 600 !important;
    box-shadow: 0 1px 2px rgba(201,168,76,.3) !important;
}

.rz-button-primary:hover {
    background: var(--kp-accent-hover) !important;
    border-color: var(--kp-accent-hover) !important;
    box-shadow: 0 2px 6px rgba(201,168,76,.4) !important;
    transform: translateY(-1px) !important;
}

/* ─── Radzen inputs ─────────────────────────────────────────────────────────── */
.rz-textbox {
    font-family: 'Inter', sans-serif !important;
    font-size: 13px !important;
    border-radius: var(--kp-radius-sm) !important;
    border-color: var(--kp-border-2) !important;
    background: var(--kp-surface) !important;
    color: var(--kp-text-1) !important;
    transition: border-color .15s, box-shadow .15s !important;
}

.rz-textbox:focus {
    border-color: var(--kp-accent) !important;
    box-shadow: 0 0 0 3px rgba(201,168,76,.15) !important;
    outline: none !important;
}

/* ─── Utility classes ───────────────────────────────────────────────────────── */
.kp-badge {
    display: inline-block;
    padding: 3px 10px;
    background: var(--kp-badge-bg);
    color: var(--kp-badge-text);
    border-radius: 20px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .3px;
    text-transform: uppercase;
    white-space: nowrap;
}

.kp-badge-accent {
    background: var(--kp-accent-soft);
    color: var(--kp-accent);
    border: 1px solid var(--kp-accent-border);
}

.kp-img-placeholder {
    background: var(--kp-img-placeholder);
    display: flex;
    align-items: center;
    justify-content: center;
}

.kp-img-placeholder .material-icons {
    color: var(--kp-img-icon);
}

.kp-card-item {
    border: 1px solid var(--kp-border);
    border-radius: var(--kp-radius);
    overflow: hidden;
    cursor: pointer;
    transition: box-shadow .2s, transform .15s, border-color .15s;
    background: var(--kp-surface);
}

.kp-card-item:hover {
    box-shadow: var(--kp-shadow-md);
    transform: translateY(-2px);
    border-color: var(--kp-accent-border);
}

.kp-list-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border: 1px solid var(--kp-border);
    border-radius: var(--kp-radius-sm);
    background: var(--kp-surface);
    transition: background .12s, border-color .12s;
    cursor: pointer;
}

.kp-list-item:hover {
    background: var(--kp-hover);
    border-color: var(--kp-border-2);
}

.kp-section-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--kp-text-3);
    margin-bottom: 12px;
}

.kp-section-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--kp-border);
}

/* Page header bar */
.kp-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--kp-border);
}

.kp-page-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--kp-text-1);
    line-height: 1.2;
}

.kp-page-subtitle {
    font-size: 12px;
    color: var(--kp-text-3);
    margin-top: 2px;
}

/* Stat chip */
.kp-stat-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    background: var(--kp-surface-2);
    border: 1px solid var(--kp-border);
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    color: var(--kp-text-2);
}

/* Detail grid */
.kp-detail-row {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 10px 16px;
    padding: 8px 0;
    border-bottom: 1px solid var(--kp-border);
}

.kp-detail-row:last-child {
    border-bottom: none;
}

.kp-detail-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--kp-text-3);
    text-transform: uppercase;
    letter-spacing: .4px;
    padding-top: 1px;
}

.kp-detail-value {
    font-size: 13px;
    color: var(--kp-text-1);
    font-weight: 500;
}

/* Lokasi card */
.kp-lokasi-card {
    background: var(--kp-lokasi-surface);
    border-radius: var(--kp-radius-sm);
    padding: 12px 16px;
    margin-bottom: 8px;
    border: 1px solid var(--kp-lokasi-border);
}

/* View toggle */
.kp-view-toggle {
    display: flex;
    gap: 2px;
    background: var(--kp-surface-2);
    border: 1px solid var(--kp-border);
    border-radius: var(--kp-radius-sm);
    padding: 3px;
}

/* ─── Blazor defaults ───────────────────────────────────────────────────────── */
h1:focus { outline: none; }

.valid.modified:not([type=checkbox]) { outline: 1px solid #22c55e; }
.invalid { outline: 1px solid #ef4444; }
.validation-message { color: var(--kp-danger); font-size: 11px; margin-top: 3px; }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
    border-radius: 6px;
}
.blazor-error-boundary::after { content: "An error has occurred."; }

.darker-border-checkbox.form-check-input { border-color: #929292; }

/* ─── Scrollbar ─────────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--kp-border-2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--kp-text-3); }

/* ─── Selection ─────────────────────────────────────────────────────────────── */
::selection { background: rgba(201,168,76,.25); }