/* Vanilla CSS — shadcn-style monochrome (neutral palette) */
:root {
    --neutral-50: #fafafa;
    --neutral-100: #f5f5f5;
    --neutral-200: #e5e5e5;
    --neutral-300: #d4d4d4;
    --neutral-400: #a3a3a3;
    --neutral-500: #737373;
    --neutral-600: #525252;
    --neutral-800: #262626;
    --neutral-900: #171717;
    --neutral-950: #0a0a0a;
    --danger: #dc2626;

    --bg: var(--neutral-50);
    --fg: var(--neutral-950);
    --card: #fff;
    --border: var(--neutral-200);
    --muted: var(--neutral-500);
    --input-bg: #fff;
    --ring: var(--neutral-950);
    --btn-bg: var(--neutral-900);
    --btn-bg-hover: var(--neutral-800);
    --btn-fg: #fff;
    --ghost-hover: var(--neutral-100);
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: var(--neutral-950);
        --fg: var(--neutral-50);
        --card: var(--neutral-900);
        --border: var(--neutral-800);
        --muted: var(--neutral-400);
        --input-bg: var(--neutral-950);
        --ring: var(--neutral-300);
        --btn-bg: var(--neutral-100);
        --btn-bg-hover: var(--neutral-200);
        --btn-fg: var(--neutral-900);
        --ghost-hover: var(--neutral-800);
    }
}

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

body {
    margin: 0;
    min-height: 100vh;
    background: var(--bg);
    color: var(--fg);
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* Brand */
.brand { display: flex; align-items: center; gap: 10px; font-weight: 600; letter-spacing: -0.01em; color: inherit; text-decoration: none; }
.brand-mark { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 6px; background: var(--fg); color: var(--bg); font-size: 12px; font-weight: 600; }

/* Auth layout: card centered on desktop, fits mobile */
.auth { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 40px 16px; }
.auth-inner { width: 100%; max-width: 400px; }
.auth .brand { justify-content: center; margin-bottom: 28px; }

/* Card */
.card { background: var(--card); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 1px 2px rgb(0 0 0 / 0.05); padding: 24px; }
.card-header { text-align: center; margin-bottom: 24px; }
.card-title { margin: 0; font-size: 24px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
.card-description { margin: 6px 0 0; color: var(--muted); }

@media (min-width: 640px) {
    .card { padding: 32px; }
}

/* Form */
.form { display: grid; gap: 20px; }
.field { display: grid; gap: 8px; }
.label { font-weight: 500; }

.input {
    width: 100%;
    height: 40px;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--input-bg);
    color: inherit;
    font: inherit;
    outline: none;
    transition: box-shadow .15s, border-color .15s;
}
.input::placeholder { color: var(--neutral-400); }
.input:focus { border-color: var(--ring); box-shadow: 0 0 0 1px var(--ring); }
.input[aria-invalid="true"] { border-color: var(--danger); }
.input[aria-invalid="true"]:focus { box-shadow: 0 0 0 1px var(--danger); }

.error { margin: 0; color: var(--danger); font-size: 13px; }

.checkbox { display: flex; align-items: center; gap: 8px; color: var(--muted); cursor: pointer; }
.checkbox input { width: 16px; height: 16px; margin: 0; accent-color: var(--btn-bg); }

/* Buttons */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    height: 40px; padding: 0 16px;
    border: 1px solid transparent; border-radius: 6px;
    background: var(--btn-bg); color: var(--btn-fg);
    font: inherit; font-weight: 500; cursor: pointer;
    transition: background-color .15s, box-shadow .15s;
}
.btn:hover { background: var(--btn-bg-hover); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--ring); }
.btn-block { width: 100%; }
.btn-outline { background: transparent; color: inherit; border-color: var(--border); }
.btn-outline:hover { background: var(--ghost-hover); }

/* App shell */
.topbar { border-bottom: 1px solid var(--border); background: var(--card); position: sticky; top: 0; z-index: 10; }
.container { width: 100%; max-width: 2200px; margin: 0 auto; padding-inline: clamp(16px, 3vw, 48px); }
.topbar-row { display: flex; align-items: center; gap: 24px; min-height: 56px; }
.topbar-row .spacer { flex: 1; }
.nav { display: flex; align-items: center; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav a { padding: 6px 12px; border-radius: 6px; color: var(--muted); font-weight: 500; text-decoration: none; white-space: nowrap; transition: color .15s, background-color .15s; }
.nav a:hover { color: var(--fg); background: var(--ghost-hover); }
.nav a[aria-current="page"] { color: var(--fg); }
.user { display: flex; align-items: center; gap: 12px; }
.user-name { color: var(--muted); display: none; }
.avatar { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border); background: var(--ghost-hover); font-size: 11px; font-weight: 600; }
.btn-sm { height: 32px; padding: 0 12px; font-size: 13px; }

@media (max-width: 767px) {
    .topbar-row { flex-wrap: wrap; gap: 0 16px; padding-top: 8px; }
    .topbar-row .nav { order: 3; flex: 0 0 100%; margin: 0 -8px 8px; }
}
@media (min-width: 640px) { .user-name { display: inline; } }

/* Page */
.page { padding-top: 32px; padding-bottom: 48px; display: grid; gap: 24px; }
.page-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.page-title { margin: 0; font-size: clamp(24px, 2.2vw, 32px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.2; }
.page-subtitle { margin: 4px 0 0; color: var(--muted); }

/* Stats grid */
.grid { display: grid; gap: 16px; }
.grid-stats { grid-template-columns: 1fr; }
@media (min-width: 540px) { .grid-stats { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grid-stats { grid-template-columns: repeat(4, 1fr); } }
.grid-cards { grid-template-columns: 1fr; }
@media (min-width: 640px) { .grid-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grid-cards { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1536px) { .grid-cards { grid-template-columns: repeat(4, 1fr); } }
.grid-main { grid-template-columns: 1fr; }
@media (min-width: 1024px) { .grid-main { grid-template-columns: 3fr 2fr; } }
@media (min-width: 1536px) { .grid-main { grid-template-columns: 2fr 1fr; } }

.panel { background: var(--card); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 1px 2px rgb(0 0 0 / 0.05); }
.panel-header { padding: 20px 20px 0; }
.panel-title { margin: 0; font-weight: 600; font-size: 14px; }
.panel-desc { margin: 4px 0 0; color: var(--muted); }
.panel-body { padding: 20px; }
.stat-head { display: flex; justify-content: space-between; align-items: center; }
.stat-icon { color: var(--muted); }
.stat-value { margin: 8px 0 0; font-size: 26px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.stat-note { margin: 2px 0 0; font-size: 12px; color: var(--muted); }

/* Bar chart (CSS only) */
.chart { display: grid; grid-template-columns: 32px 1fr; gap: 8px; height: clamp(220px, 32vh, 420px); }
.chart-y { display: flex; flex-direction: column; justify-content: space-between; padding-bottom: 20px; font-size: 11px; color: var(--muted); text-align: right; }
.chart-plot { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(4px, 0.8vw, 14px); align-items: end; border-bottom: 1px solid var(--border); }
.chart-col { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.chart-bar { width: 100%; background: var(--fg); border-radius: 3px 3px 0 0; opacity: .9; transition: opacity .15s; }
.chart-col:hover .chart-bar { opacity: 1; }
.chart-x { display: grid; grid-template-columns: 32px 1fr; gap: 8px; margin-top: 6px; }
.chart-x div { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(4px, 0.8vw, 14px); font-size: 11px; color: var(--muted); text-align: center; }
.chart-wrap { overflow-x: auto; }
.chart-wrap > * { min-width: 360px; }

/* List rows */
.list { display: grid; gap: 4px; }
.list-item { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
.list-main { flex: 1; min-width: 0; }
.list-title { margin: 0; font-weight: 500; line-height: 1.3; }
.list-sub { margin: 0; color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Badge */
.badge { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--border); font-size: 12px; font-weight: 500; white-space: nowrap; }
.badge-solid { background: var(--btn-bg); color: var(--btn-fg); border-color: transparent; }
.badge-muted { background: var(--ghost-hover); }

/* Table */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; }
.table th { color: var(--muted); font-weight: 500; font-size: 13px; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--ghost-hover); }
.mono { font-variant-numeric: tabular-nums; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }

/* Toolbar */
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; }
.toolbar .input { max-width: 260px; }

/* Large screens: scale type & spacing slightly */
@media (min-width: 1536px) {
    body { font-size: 15px; }
    .stat-value { font-size: 30px; }
    .page { gap: 28px; padding-top: 40px; }
}

/* Phones: header actions full width, tables become stacked cards */
@media (max-width: 639px) {
    .page { padding-top: 20px; gap: 16px; }
    .page-header > .btn, .toolbar, .toolbar .input { width: 100%; max-width: none; }

    .panel.table-wrap { overflow: visible; background: transparent; border: 0; box-shadow: none; }
    .table, .table tbody, .table tr, .table td { display: block; width: 100%; }
    .table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .table tbody { display: grid; gap: 12px; }
    .table tr { background: var(--card); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 1px 2px rgb(0 0 0 / 0.05); padding: 4px 16px; }
    .table tbody tr:hover { background: var(--card); }
    .table td { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 10px 0; white-space: normal; text-align: right; border-bottom: 1px solid var(--border); }
    .table td:last-child { border-bottom: 0; }
    .table td::before { content: attr(data-label); color: var(--muted); font-size: 13px; text-align: left; flex: none; }
}

/* Alerts, links, forms (master data) */
.alert { padding: 12px 16px; border: 1px solid var(--border); border-radius: 8px; background: var(--card); }
.alert-error { border-color: var(--danger); color: var(--danger); }
.link { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.muted { color: var(--muted); font-weight: 400; }
.card-link { display: block; color: inherit; text-decoration: none; transition: border-color .15s, background-color .15s; }
.card-link:hover { border-color: var(--ring); }
select.input { appearance: auto; }
.form-actions { display: flex; justify-content: flex-end; gap: 8px; }
.btn { text-decoration: none; }
.btn-danger:hover { color: var(--danger); border-color: var(--danger); }

/* Organization tree */
.tree-node summary { list-style: none; cursor: pointer; }
.tree-node summary::-webkit-details-marker { display: none; }
.tree-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 8px 10px; border-radius: 6px; }
.tree-row:hover { background: var(--ghost-hover); }
.tree-info { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.tree-name { font-weight: 500; }
.tree-code { color: var(--muted); }
.tree-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.tree-actions form { margin: 0; }
.tree-children { margin-left: 14px; padding-left: 14px; border-left: 1px solid var(--border); }
@media (max-width: 639px) {
    .tree-children { margin-left: 6px; padding-left: 8px; }
    .form-actions .btn { flex: 1; }
}

/* Forms (wide / grid) */
.form-grid { display: grid; gap: 20px; margin-top: 16px; grid-template-columns: 1fr; align-items: start; }

/* Form pages: dipusatkan di tengah, lebar menyesuaikan layar */
.form-page { width: 100%; max-width: 640px; margin-inline: auto; display: grid; gap: 24px; }
.form-page-wide { max-width: 880px; }
.field { align-content: start; min-width: 0; }
.page, .form-page, .form, .form-grid, .field { grid-template-columns: minmax(0, 1fr); }
.page > *, .form-page > *, .form > * { min-width: 0; }
@media (min-width: 640px) { .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.input, select.input { min-width: 0; }
@media (min-width: 1536px) {
    .form-page { max-width: 720px; }
    .form-page-wide { max-width: 1000px; }
}
@media (max-width: 639px) {
    .form-page { gap: 16px; }
    .form-page .panel-body { padding: 16px; }
    .form-actions { flex-direction: column-reverse; }
    .form-actions .btn { width: 100%; flex: none; }
    .thumb-signature { width: 120px; }
}
@media (min-width: 640px) {
    .form-grid { grid-template-columns: repeat(2, 1fr); }
    .form-grid .span-2 { grid-column: 1 / -1; }
}
.file-input { height: auto; padding: 8px 12px; }
.thumb { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); background: var(--ghost-hover); }
.thumb-signature { width: 160px; height: 72px; object-fit: contain; background: #fff; }
.upload-current { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
img.avatar { object-fit: cover; padding: 0; }

.person { display: flex; align-items: center; gap: 12px; text-align: left; min-width: 0; }
.pager { display: flex; align-items: center; justify-content: center; gap: 16px; }
.pager [aria-disabled="true"] { opacity: .5; pointer-events: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.btn-danger-solid { background: var(--danger); color: #fff; }
.btn-danger-solid:hover { background: #b91c1c; }

/* SweetAlert2 theme (monochrome, mengikuti light/dark) */
.swal2-container { font-family: inherit; }
.swal-popup.swal2-popup { background: var(--card) !important; color: var(--fg) !important; border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 10px 30px rgb(0 0 0 / 0.15); font-size: 14px; padding: 24px; }
.swal-title.swal2-title { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; color: var(--fg); padding: 0; }
.swal-text.swal2-html-container { color: var(--muted); margin: 8px 0 0; font-size: 14px; }
.swal-actions.swal2-actions { gap: 8px; margin-top: 20px; }
.swal2-popup .swal2-icon { transform: scale(.8); margin: 4px auto 8px; }
.swal-toast-popup.swal2-popup.swal2-toast { padding: 12px 16px; align-items: center; }
.swal-toast-popup .swal2-title { font-size: 14px; font-weight: 500; margin: 0 8px; color: var(--fg); }
.swal2-popup .swal2-close { color: var(--muted); }
.swal2-timer-progress-bar { background: var(--fg); opacity: .25; }
.swal2-popup .swal2-actions .btn:focus-visible { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--ring); }

/* SweetAlert2: ikon & elemen bawaan yang ikut latar putih */
.swal2-popup .swal2-icon.swal2-success [class^='swal2-success-circular-line'],
.swal2-popup .swal2-icon.swal2-success .swal2-success-fix { background: transparent !important; }
.swal2-popup .swal2-icon.swal2-success .swal2-success-ring { border-color: rgb(34 197 94 / .3); }
.swal2-popup .swal2-icon.swal2-success [class^='swal2-success-line'] { background-color: #22c55e; }
.swal2-popup .swal2-icon.swal2-error { border-color: var(--danger); color: var(--danger); }
.swal2-popup .swal2-icon.swal2-error [class^='swal2-x-mark-line'] { background-color: var(--danger); }
.swal2-popup .swal2-icon.swal2-warning { border-color: var(--neutral-400); color: var(--fg); }
.swal2-popup .swal2-icon.swal2-question { border-color: var(--neutral-400); color: var(--fg); }

/* Editor atribut jenis asset & hasil impor */
.attr-list { display: grid; gap: 12px; margin-top: 16px; }
.attr-row { display: grid; gap: 12px; align-items: start; padding: 12px; border: 1px solid var(--border); border-radius: 8px; grid-template-columns: minmax(0, 1fr); }
.attr-row .attr-remove { justify-self: start; }
@media (min-width: 768px) {
    .attr-row { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 0.8fr) minmax(0, 1.4fr) auto; }
    .attr-row .attr-remove { margin-top: 26px; }
}
.import-errors { margin: 12px 0 0; padding-left: 20px; max-height: 320px; overflow: auto; display: grid; gap: 4px; font-size: 13px; }

/* Dropdown bertingkat lokasi & filter */
.loc-picker-selects { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); margin-top: 8px; }
@media (min-width: 640px) { .loc-picker-selects { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .loc-picker-selects { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.form-grid .loc-picker-selects { margin-top: 4px; }
.filter-form { display: grid; gap: 16px; }
.filter-row { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .filter-row { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }