/* Tema Inventaris (light) — lihat design.md: kartu putih tanpa garis, aksen teal, latar gradasi lembut. Di atas Bootstrap 5.3.
   --accent = teal dekoratif (garis/titik); --accent-strong = versi gelapnya untuk teks/tombol (4.9:1, WCAG AA).
   Nama lama (--brand, --egg-*) dipetakan ke token baru agar kelas yang ada tetap jalan. */
:root {
    --bg: #f5fafa;
    --surface: #fff;
    --surface-muted: #f3f4f6;
    --line: #eef1f4;
    --text-strong: #111827;
    --text: #1f2937;
    --text-muted: #6b7280; /* 4.8:1 di putih */
    --accent: #17b6c6;
    --accent-strong: #0e7c86;
    --accent-strong-hover: #0b666e;
    --accent-soft: #e3f6f8;
    --chart: #1f5aa6;
    --chart-hover: #174785;
    --radius-lg: 1rem;
    --radius-md: .75rem;
    --radius-sm: .5rem;
    --shadow-card: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px rgba(16, 24, 40, .04);

    --egg: var(--accent);
    --egg-soft: var(--accent-soft);
    --egg-softer: var(--bg);
    --brand: var(--accent-strong);
    --brand-dark: var(--accent-strong-hover);
    --brand-darker: #09535a;

    --bs-primary: #0e7c86;
    --bs-primary-rgb: 14, 124, 134;
    --bs-primary-text-emphasis: #09535a;
    --bs-primary-bg-subtle: #e3f6f8;
    --bs-primary-border-subtle: #b9e8ee;
    --bs-link-color: #0e7c86;
    --bs-link-color-rgb: 14, 124, 134;
    --bs-link-hover-color: #09535a;
    --bs-link-hover-color-rgb: 9, 83, 90;
    --bs-body-color: var(--text);
    --bs-secondary-color: var(--text-muted);
    --bs-heading-color: var(--text-strong);
    --bs-border-color: var(--line);
    --bs-border-radius: .5rem;
    --bs-focus-ring-color: rgba(14, 124, 134, .2);
    /* Inter (Google Fonts, display=swap); fallback system-ui bila CDN tak terjangkau */
    --bs-body-font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --bs-body-font-size: .9375rem;
    --bs-body-line-height: 1.55;
    color-scheme: light;
}

/* bukan --bs-body-bg: itu juga dipakai card & input */
body {
    background:
        radial-gradient(60rem 40rem at 0 0, #e2f5f3, transparent 70%),
        radial-gradient(50rem 40rem at 100% 100%, #fceeea, transparent 70%),
        var(--bg);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
}

/* Tipografi — skala tetap: 12 caption/th · 13 label/small · 14 tabel · 15 body/menu · 17 judul kartu (.section-title) · 20 nama barang (.h5) · 22 judul halaman (.page-title) · 24 sapaan (.h4) · 28 KPI/hero login.
   Spacing kelipatan 4px (Bootstrap 1=4 · 2=8 · 3=16 · 4=24): antar-blok halaman mb-4/g-3, isi kartu p-3, toolbar px-3 py-2, ikon-teks me-1.
   Judul selalu weight 600 (jangan tambah .fw-semibold); angka tabular */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-weight: 600; letter-spacing: -.011em; }
small, .small { font-size: .8125rem; }
.section-title { font-size: 1.0625rem; font-weight: 600; line-height: 1.3; letter-spacing: -.011em; color: var(--bs-heading-color); margin-bottom: 0; }
.page-title { font-size: 1.375rem; font-weight: 600; line-height: 1.25; letter-spacing: -.015em; margin-bottom: 0; }
.form-label { font-size: .8125rem; font-weight: 500; color: var(--text); margin-bottom: .5rem; }
.kpi-label { font-size: .875rem; font-weight: 500; color: var(--bs-secondary-color); }
.kpi-value { font-size: 1.75rem; font-weight: 600; line-height: 1.2; letter-spacing: -.02em; color: var(--bs-heading-color); font-variant-numeric: tabular-nums; }
.badge { font-variant-numeric: tabular-nums; letter-spacing: .01em; }

/* Interaksi & aksesibilitas */
.form-select, .form-check-input, label[for] { cursor: pointer; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
@media (pointer: coarse) { /* target sentuh >= 44px */
    .btn-sm, .form-select-sm { min-height: 2.75rem; }
    .btn-sm { display: inline-flex; align-items: center; justify-content: center; }
    .page-link { min-width: 2.75rem; min-height: 2.75rem; display: flex; align-items: center; justify-content: center; }
    .form-check-input { width: 1.25em; height: 1.25em; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } }

/* Bootstrap Icons sebagai SVG sprite (lihat components/icon.blade.php) */
.bi { width: 1em; height: 1em; fill: currentColor; vertical-align: -.125em; flex-shrink: 0; }

.btn-primary {
    --bs-btn-bg: var(--brand);
    --bs-btn-border-color: var(--brand);
    --bs-btn-hover-bg: var(--brand-dark);
    --bs-btn-hover-border-color: var(--brand-dark);
    --bs-btn-active-bg: var(--brand-darker);
    --bs-btn-active-border-color: var(--brand-darker);
    --bs-btn-disabled-bg: var(--brand);
    --bs-btn-disabled-border-color: var(--brand);
    --bs-btn-focus-shadow-rgb: 14, 124, 134;
}
/* Tombol ikon persegi 36px (aksi baris tabel) */
.btn-icon { display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; padding: 0; font-size: 1rem; }
@media (pointer: coarse) { .btn-icon { width: 2.75rem; height: 2.75rem; } }
/* Tombol sekunder: putih tanpa garis, terangkat oleh bayangan tipis */
.btn-light {
    --bs-btn-bg: #fff;
    --bs-btn-border-color: #fff;
    --bs-btn-hover-bg: var(--accent-soft);
    --bs-btn-hover-border-color: var(--accent-soft);
    --bs-btn-hover-color: var(--brand-darker);
    --bs-btn-active-bg: var(--accent-soft);
    --bs-btn-active-border-color: var(--accent-soft);
    --bs-btn-color: var(--text);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 0 0 1px rgba(16, 24, 40, .04);
}
.form-control, .form-select { border-color: #dfe3e8; }
.form-control:focus, .form-select:focus, .form-check-input:focus {
    border-color: var(--egg);
    box-shadow: 0 0 0 .25rem var(--bs-focus-ring-color);
}
.input-group-text { border-color: #dfe3e8; color: var(--text-muted); }
/* Tombol lihat/sembunyikan password: menyatu dengan input */
.btn-toggle-pw { --bs-btn-bg: #fff; --bs-btn-border-color: #dfe3e8; --bs-btn-color: var(--text-muted); --bs-btn-hover-bg: var(--egg-softer); --bs-btn-hover-color: var(--brand-darker); --bs-btn-hover-border-color: #dfe3e8; --bs-btn-active-bg: var(--egg-soft); --bs-btn-active-border-color: #dfe3e8; }
.input-group:focus-within .btn-toggle-pw, .input-group:focus-within .input-group-text { border-color: var(--egg); }

/* Halaman login: latar gradasi lembut + kartu 2 kolom (panel hijau di >= lg) */
.login-card { max-width: 26rem; border-radius: 1.25rem; box-shadow: 0 20px 50px -12px rgba(16, 24, 40, .14); }
@media (min-width: 992px) { .login-card { max-width: 54rem; } }
.login-hero { color: #fff; background: var(--brand); }
.login-hero-icon { display: inline-grid; place-items: center; width: 3rem; height: 3rem; border-radius: .875rem; background: rgba(255, 255, 255, .15); font-size: 1.5rem; }
.login-hero-title { color: #fff; font-size: 1.75rem; line-height: 1.2; letter-spacing: -.02em; margin-bottom: .5rem; }
.login-hero-text { color: rgba(255, 255, 255, .92); } /* >= 4.5:1 di atas --brand */
.login-hero-mark { font-size: 4.5rem; opacity: .18; align-self: flex-end; } /* ornamen QR, dekoratif */
.login-page .input-group-lg > .form-control { font-size: 1rem; }
.form-check-input:checked, .form-check-input:indeterminate {
    background-color: var(--brand);
    border-color: var(--brand);
}
.pagination {
    --bs-pagination-color: var(--brand);
    --bs-pagination-hover-color: var(--brand-darker);
    --bs-pagination-hover-bg: var(--egg-soft);
    --bs-pagination-focus-color: var(--brand-darker);
    --bs-pagination-active-bg: var(--brand);
    --bs-pagination-active-border-color: var(--brand);
    --bs-pagination-focus-box-shadow: 0 0 0 .25rem var(--bs-focus-ring-color);
    margin-bottom: 0;
}
/* Kartu: putih tanpa garis luar, dipisah bayangan halus (garis dalam kartu tetap --line) */
.card { --bs-card-border-width: 0; --bs-card-border-radius: var(--radius-lg); --bs-card-inner-border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.card-header, .card-footer { background: #fff; border-color: var(--line); }
.min-w-0 { min-width: 0; }

/* Sidebar putih: offcanvas di mobile, kartu mengambang statis di >= lg */
.sidebar { --bs-offcanvas-width: 260px; --bs-offcanvas-bg: #fff; }
@media (min-width: 992px) {
    .sidebar {
        width: 248px;
        flex-shrink: 0;
        position: sticky;
        top: 1rem;
        height: calc(100vh - 2rem);
        margin: 1rem 0 1rem 1rem;
        background-color: #fff !important; /* offcanvas-lg memaksa transparent */
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-card);
    }
    /* Bar teal di tepi kanan sidebar, sejajar menu aktif (nav p-3 = 1rem) */
    .sidebar .nav-link.active::after { content: ""; position: absolute; top: .375rem; bottom: .375rem; right: -1rem; width: 3px; border-radius: 3px 0 0 3px; background: var(--accent); }
}
.sidebar-head { border-bottom: 1px solid var(--line); }
.sidebar .nav-heading {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
    padding: .75rem .75rem .25rem;
}
.sidebar .nav-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: .75rem;
    min-height: 2.75rem;
    padding: .625rem .75rem;
    color: var(--text);
    border-radius: .625rem;
    font-size: .9375rem;
    transition: background-color .15s, color .15s;
}
.sidebar .nav-link .bi { font-size: 1.25rem; color: var(--text-muted); }
.sidebar .nav-link:hover { background: var(--surface-muted); }
.sidebar .nav-link.active { background: var(--accent-soft); color: var(--accent-strong); font-weight: 500; }
.sidebar .nav-link.active .bi { color: var(--accent-strong); }

.topbar { height: 3.75rem; }
/* Topbar konten: tanpa latar putih, kaca tipis saat menempel di atas */
.topbar-main { height: auto; padding-block: 1rem; background: rgba(245, 250, 250, .8); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.user-chip { display: inline-flex; align-items: center; gap: .5rem; height: 3rem; padding: 0 1rem 0 .5rem; background: #fff; border-radius: var(--radius-md); box-shadow: var(--shadow-card); }
.btn-logout {
    --bs-btn-color: #64748b;
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: #b42318;
    --bs-btn-hover-bg: #fef3f2;
    --bs-btn-hover-border-color: #fecdca;
    --bs-btn-active-color: #b42318;
    --bs-btn-active-bg: #fee4e2;
    --bs-btn-active-border-color: #fecdca;
    --bs-btn-focus-shadow-rgb: 180, 35, 24;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .375rem .75rem;
    border-radius: 2rem;
    font-weight: 500;
}

.stat-icon, .avatar {
    display: inline-grid;
    place-items: center;
    flex-shrink: 0;
}
.brand-logo { display: block; width: 100%; max-width: 17rem; height: auto; }
.stat-icon { width: 2.75rem; height: 2.75rem; border-radius: .625rem; font-size: 1.25rem; }
.avatar { width: 2rem; height: 2rem; border-radius: 50%; background: var(--accent-soft); color: var(--accent-strong); font-weight: 600; font-size: .8125rem; }

.stat-link { transition: border-color .15s, box-shadow .15s, transform .15s; }
.stat-link:hover { box-shadow: 0 2px 4px rgba(16, 24, 40, .04), 0 12px 28px rgba(16, 24, 40, .08); transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) { .stat-link:hover { transform: none; } }


.table { --bs-table-hover-bg: var(--egg-softer); font-size: .875rem; font-variant-numeric: tabular-nums; }
.table > thead th {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--bs-secondary-color);
    font-weight: 600;
    background: var(--egg-softer);
    white-space: nowrap;
}
.table > tbody td { border-color: var(--line); }

/* Grafik batang horizontal (laporan) — CSS saja, tanpa library */
.chart-row { display: grid; grid-template-columns: minmax(0, 11rem) 1fr auto; align-items: center; gap: .75rem; padding: .25rem; border-radius: .375rem; font-size: .8125rem; }
.chart-row:hover { background: var(--egg-softer); }
.chart-label { color: var(--text); }
.chart-track { height: .75rem; }
.chart-bar { display: block; height: 100%; min-width: 2px; background: var(--chart); border-radius: 0 4px 4px 0; }
.chart-row:hover .chart-bar { background: var(--chart-hover); }
.chart-value { font-variant-numeric: tabular-nums; color: var(--text); font-weight: 500; text-align: right; min-width: 6.5rem; }
@media (max-width: 575.98px) { .chart-row { grid-template-columns: minmax(0, 7rem) 1fr; } .chart-value { grid-column: 2; text-align: left; min-width: 0; } }
/* Tren bulanan: kolom vertikal, scroll horizontal bila banyak bulan */
.trend { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .25rem; }
.trend-col { flex: 1 0 3.5rem; display: flex; flex-direction: column; align-items: center; gap: .25rem; border-radius: .375rem; padding: .25rem 0; }
.trend-col:hover { background: var(--egg-softer); }
.trend-track { display: flex; align-items: flex-end; width: 60%; max-width: 2.5rem; height: 9rem; }
.trend-bar { display: block; width: 100%; min-height: 2px; background: var(--chart); border-radius: 4px 4px 0 0; }
.trend-col:hover .trend-bar { background: var(--chart-hover); }
.trend-value { font-size: .75rem; font-weight: 500; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.trend-label { font-size: .75rem; color: var(--bs-secondary-color); white-space: nowrap; }
@media (min-width: 1200px) { .border-xl-bottom-0 { border-bottom: 0 !important; } .border-xl-end { border-right: 1px solid var(--line); } }

/* Flatpickr disamakan dengan warna tema */
.flatpickr-day.selected, .flatpickr-day.selected:hover, .flatpickr-day.selected:focus { background: var(--brand); border-color: var(--brand); }
.flatpickr-day.today { border-color: var(--egg); }
.flatpickr-day:hover, .flatpickr-day:focus { background: var(--egg-soft); border-color: var(--egg-soft); }
.flatpickr-calendar { box-shadow: 0 8px 24px rgba(16, 24, 40, .12); border-radius: .75rem; }

/* Select2 (tema bootstrap-5) disamakan dengan warna tema */
.select2-container--bootstrap-5 .select2-selection { border-color: #dfe3e8; }
.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection { border-color: var(--egg); box-shadow: 0 0 0 .25rem var(--bs-focus-ring-color); }
.select2-container--bootstrap-5 .select2-dropdown { border-color: var(--egg); }
.select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field:focus { border-color: var(--egg); box-shadow: 0 0 0 .25rem var(--bs-focus-ring-color); }
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--highlighted { background: var(--egg-soft); color: var(--brand-darker); }
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--selected { background: var(--brand); color: #fff; }