/* =====================================================================
   KALEN Lite - App Stylesheet  (v0.3 — skala ringkas)
   Tema   : Light Blue / Clean / Airy (mockup final biru muda)
   Target : nyaman tanpa scroll berlebih di laptop 1366x768 (viewport ±1366x625)
   Skala  : root 14px · body 13.5px · tabel 13px · judul halaman 20px
   ===================================================================== */

@font-face { font-family: 'Plus Jakarta Sans'; font-weight: 400; font-style: normal; font-display: swap; src: url('../vendor/fonts/plus-jakarta-sans-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-weight: 500; font-style: normal; font-display: swap; src: url('../vendor/fonts/plus-jakarta-sans-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-weight: 600; font-style: normal; font-display: swap; src: url('../vendor/fonts/plus-jakarta-sans-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-weight: 700; font-style: normal; font-display: swap; src: url('../vendor/fonts/plus-jakarta-sans-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-weight: 800; font-style: normal; font-display: swap; src: url('../vendor/fonts/plus-jakarta-sans-latin-800-normal.woff2') format('woff2'); }

:root {
    --kl-primary: #2563EB;
    --kl-primary-2: #3B82F6;
    --kl-primary-soft: #DBEAFE;
    --kl-primary-softer: #EFF6FF;
    --kl-cyan: #06B6D4;
    --kl-cyan-soft: #CFFAFE;
    --kl-teal: #14B8A6;
    --kl-success: #22C55E;
    --kl-success-soft: #DCFCE7;
    --kl-warning: #F59E0B;
    --kl-warning-soft: #FEF3C7;
    --kl-danger: #EF4444;
    --kl-danger-soft: #FEE2E2;
    --kl-purple: #8B5CF6;
    --kl-purple-soft: #EDE9FE;
    --kl-orange: #F97316;
    --kl-orange-soft: #FFEDD5;

    --kl-bg: #F5F8FC;
    --kl-surface: #FFFFFF;
    --kl-sidebar: #F7FAFE;
    --kl-border: #E6EDF6;
    --kl-border-strong: #D6E0EC;

    --kl-text: #0F172A;
    --kl-text-2: #334155;
    --kl-muted: #64748B;

    --kl-radius: 12px;
    --kl-radius-sm: 8px;
    --kl-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 2px 10px rgba(37, 99, 235, .04);
    --kl-shadow-lg: 0 10px 28px rgba(15, 23, 42, .10);

    --kl-sidebar-w: 232px;
    --kl-sidebar-w-mini: 68px;
    --kl-topbar-h: 56px;
    --kl-gap: 16px;

    /* Bootstrap overrides */
    --bs-body-font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --bs-body-font-size: .9643rem; /* 13.5px */
    --bs-body-color: var(--kl-text-2);
    --bs-body-bg: var(--kl-bg);
    --bs-primary: #2563EB;
    --bs-primary-rgb: 37, 99, 235;
    --bs-border-color: var(--kl-border);
    --bs-link-color: #2563EB;
    --bs-link-color-rgb: 37, 99, 235;
    --bs-link-hover-color: #1D4ED8;
    --bs-border-radius: 8px;
}

/* Root 14px: seluruh ukuran berbasis rem (termasuk Bootstrap) ikut ringkas */
html { font-size: 14px; }
html, body { height: 100%; }
body.app-body { background: var(--kl-bg); -webkit-font-smoothing: antialiased; line-height: 1.45; }
h1, h2, h3, h4, h5, h6 { color: var(--kl-text); font-weight: 700; }
h4 { font-size: 1.15rem; } h5 { font-size: 1.05rem; }
a { text-decoration: none; }
small, .small { font-size: .857rem; }
.min-w-0 { min-width: 0; }
.shadow-soft { box-shadow: var(--kl-shadow-lg) !important; border: 1px solid var(--kl-border) !important; border-radius: 10px; }
.text-primary { color: var(--kl-primary) !important; }

/* ---------------------------------------------------------------------
   Shell
   --------------------------------------------------------------------- */
.app-shell { display: flex; min-height: 100vh; }
.app-main { flex: 1 1 auto; min-width: 0; margin-left: var(--kl-sidebar-w); display: flex; flex-direction: column; transition: margin-left .2s ease; }
.app-content { flex: 1 1 auto; padding: 18px 22px 20px; }
.app-footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px; padding: 8px 22px; font-size: .8rem; color: var(--kl-muted); border-top: 1px solid var(--kl-border); background: var(--kl-surface); }

/* ---------------------------------------------------------------------
   Sidebar
   --------------------------------------------------------------------- */
.app-sidebar {
    position: fixed; inset: 0 auto 0 0; width: var(--kl-sidebar-w); z-index: 1040;
    background: var(--kl-sidebar); border-right: 1px solid var(--kl-border);
    display: flex; flex-direction: column; transition: width .2s ease, transform .2s ease;
}
.sidebar-brand { height: var(--kl-topbar-h); display: flex; align-items: center; justify-content: space-between; padding: 0 16px; border-bottom: 1px solid var(--kl-border); flex-shrink: 0; }
.brand-link { display: flex; align-items: center; gap: 9px; min-width: 0; }
.brand-logo { width: 32px; height: 32px; object-fit: contain; flex-shrink: 0; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; white-space: nowrap; }
.brand-name { font-size: 1.1rem; font-weight: 800; color: var(--kl-text); letter-spacing: -.01em; }
.brand-tagline { font-size: .72rem; color: var(--kl-muted); }

.sidebar-nav { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; padding: 12px 10px; scrollbar-width: thin; }
.nav-list, .nav-sub { list-style: none; margin: 0; padding: 0; }
.nav-list > li { margin-bottom: 2px; }
.nav-link-item {
    width: 100%; display: flex; align-items: center; gap: 11px; padding: 8px 12px; border-radius: 8px;
    color: var(--kl-text-2); font-weight: 500; font-size: .93rem; background: transparent; border: 0; text-align: left;
    transition: background .15s ease, color .15s ease;
}
.nav-link-item:hover { background: var(--kl-primary-softer); color: var(--kl-primary); }
.nav-link-item.active { background: linear-gradient(135deg, #3B82F6, #60A5FA); color: #fff; box-shadow: 0 4px 12px rgba(59, 130, 246, .25); }
.nav-link-item.group-active { color: var(--kl-primary); background: var(--kl-primary-softer); }
.nav-icon { font-size: 1.1rem; width: 20px; text-align: center; flex-shrink: 0; }
.nav-text { flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-caret { font-size: .7rem; transition: transform .2s ease; color: var(--kl-muted); }
.nav-group.open .nav-caret { transform: rotate(180deg); }
.nav-sub { display: none; padding: 2px 0 4px 43px; }
.nav-group.open .nav-sub { display: block; }
.nav-sub-title { display: none; }
.nav-sub-link { display: block; padding: 6px 10px; border-radius: 6px; color: var(--kl-muted); font-size: .88rem; position: relative; }
.nav-sub-link::before { content: ''; position: absolute; left: -10px; top: 50%; width: 4px; height: 4px; border-radius: 50%; background: var(--kl-border-strong); transform: translateY(-50%); }
.nav-sub-link:hover { color: var(--kl-primary); background: var(--kl-primary-softer); }
.nav-sub-link.active { color: var(--kl-primary); font-weight: 600; background: var(--kl-primary-softer); }
.nav-sub-link.active::before { background: var(--kl-primary); }

.sidebar-promo { padding: 10px; position: relative; flex-shrink: 0; }
.promo-card { background: linear-gradient(160deg, #EAF3FF 0%, #F2F8FF 60%, #E7F7FB 100%); border: 1px solid var(--kl-border); border-radius: 10px; padding: 12px 12px 0; overflow: hidden; }
.promo-title { font-weight: 800; color: var(--kl-text); font-size: .9rem; }
.promo-sub { font-size: .75rem; color: var(--kl-muted); max-width: 130px; }
.promo-img { display: block; width: 100%; height: auto; max-height: 70px; object-fit: contain; object-position: bottom; margin-top: 2px; }
.sidebar-collapse-btn { position: absolute; top: 18px; right: 18px; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--kl-border); background: #fff; color: var(--kl-primary); align-items: center; justify-content: center; box-shadow: var(--kl-shadow); font-size: .75rem; }
.sidebar-collapse-btn:hover { background: var(--kl-primary-soft); }
/* Kartu promo hanya tampil di layar tinggi, supaya menu tidak tertutup */
@media (max-height: 860px) {
    .promo-card { display: none; }
    .sidebar-promo { display: flex; justify-content: flex-end; padding: 8px 12px; border-top: 1px solid var(--kl-border); }
    .sidebar-collapse-btn { position: static; }
}

/* Minimize (desktop) */
@media (min-width: 992px) {
    .sidebar-mini .app-sidebar { width: var(--kl-sidebar-w-mini); }
    .sidebar-mini .app-main { margin-left: var(--kl-sidebar-w-mini); }
    .sidebar-mini .brand-text, .sidebar-mini .nav-text, .sidebar-mini .nav-caret, .sidebar-mini .promo-card { display: none; }
    .sidebar-mini .sidebar-brand { justify-content: center; padding: 0; }
    .sidebar-mini .nav-link-item { justify-content: center; padding: 9px; }
    .sidebar-mini .sidebar-nav { overflow: visible; padding: 12px 10px; }
    .sidebar-mini .sidebar-promo { padding: 8px 0; display: flex; justify-content: center; }
    .sidebar-mini .sidebar-collapse-btn { position: static; }
    .sidebar-mini .sidebar-collapse-btn i { transform: rotate(180deg); }
    .sidebar-mini .nav-group { position: relative; }
    .sidebar-mini .nav-group .nav-sub { display: none !important; position: absolute; left: calc(100% + 8px); top: 0; min-width: 190px; padding: 6px; background: #fff; border: 1px solid var(--kl-border); border-radius: 10px; box-shadow: var(--kl-shadow-lg); z-index: 1050; }
    .sidebar-mini .nav-group:hover .nav-sub, .sidebar-mini .nav-group:focus-within .nav-sub { display: block !important; }
    .sidebar-mini .nav-group .nav-sub::before { content: ''; position: absolute; left: -10px; top: 0; width: 10px; height: 100%; }
    .sidebar-mini .nav-sub-title { display: block; font-weight: 700; color: var(--kl-text); padding: 4px 10px 6px; font-size: .85rem; }
    .sidebar-mini .nav-sub-link::before { display: none; }
}

/* Offcanvas (mobile/tablet) */
.sidebar-backdrop { display: none; }
@media (max-width: 991.98px) {
    .app-sidebar { transform: translateX(-100%); box-shadow: var(--kl-shadow-lg); width: min(84vw, 260px); }
    .app-main { margin-left: 0; }
    .sidebar-open .app-sidebar { transform: translateX(0); }
    .sidebar-open .sidebar-backdrop { display: block; position: fixed; inset: 0; background: rgba(15, 23, 42, .35); z-index: 1035; }
    .app-content { padding: 14px 12px 18px; }
    .app-footer { padding: 8px 12px; }
}

/* ---------------------------------------------------------------------
   Topbar
   --------------------------------------------------------------------- */
.app-topbar { position: sticky; top: 0; z-index: 1030; height: var(--kl-topbar-h); display: flex; align-items: center; gap: 12px; padding: 0 22px; background: rgba(255, 255, 255, .94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--kl-border); }
.btn-icon { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--kl-text-2); font-size: 1.15rem; flex-shrink: 0; }
.btn-icon:hover { background: var(--kl-primary-softer); color: var(--kl-primary); }
.btn-burger { border-color: var(--kl-border); background: #fff; }
.topbar-search { position: relative; flex: 1 1 auto; max-width: 520px; }
.topbar-search .form-control { height: 36px; padding: 0 76px 0 36px; border-radius: 8px; background: #F4F7FB; border-color: #EDF1F7; font-size: .93rem; }
.topbar-search .form-control:focus { background: #fff; }
.search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--kl-muted); font-size: .9rem; }
.search-kbd { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: #E9EEF5; color: var(--kl-muted); font-size: .7rem; border-radius: 5px; padding: 2px 6px; font-family: inherit; }
.search-results { display: none; position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: #fff; border: 1px solid var(--kl-border); border-radius: 10px; box-shadow: var(--kl-shadow-lg); max-height: 320px; overflow-y: auto; padding: 5px; z-index: 1060; }
.search-results.show { display: block; }
.search-results a { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 6px; color: var(--kl-text-2); }
.search-results a:hover, .search-results a.focused { background: var(--kl-primary-softer); color: var(--kl-primary); }
.search-empty { padding: 10px; color: var(--kl-muted); font-size: .85rem; }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.notif-menu { width: 280px; }
.user-chip { display: flex; align-items: center; gap: 8px; border: 0; background: transparent; padding: 3px 6px; border-radius: 10px; color: var(--kl-text); }
.user-chip:hover { background: var(--kl-primary-softer); }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, #2563EB, #3B82F6); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .8rem; flex-shrink: 0; }
.avatar-sm { width: 28px; height: 28px; font-size: .7rem; }
.user-meta { flex-direction: column; align-items: flex-start; line-height: 1.2; }
.user-name { font-weight: 700; font-size: .88rem; }
.user-role { font-size: .75rem; color: var(--kl-muted); }
.dropdown-menu { font-size: .93rem; --bs-dropdown-item-padding-y: .4rem; }
@media (max-width: 991.98px) { .app-topbar { padding: 0 10px; gap: 8px; } }
@media (max-width: 575.98px) { .topbar-search .form-control { padding-right: 10px; } .topbar-actions .dropdown:first-child { display: none; } }

/* ---------------------------------------------------------------------
   Page header
   --------------------------------------------------------------------- */
.page-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.page-title { font-size: 1.43rem; font-weight: 800; margin: 0; letter-spacing: -.015em; line-height: 1.25; }
.page-subtitle { margin: 2px 0 0; color: var(--kl-muted); font-size: .9rem; }
.page-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.date-chip { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--kl-border); border-radius: 8px; padding: 6px 12px; font-weight: 600; font-size: .88rem; color: var(--kl-text); }
@media (max-width: 575.98px) { .page-title { font-size: 1.25rem; } .page-subtitle { font-size: .85rem; } }

/* ---------------------------------------------------------------------
   Cards & stat
   --------------------------------------------------------------------- */
.card-soft, .card { background: var(--kl-surface); border: 1px solid var(--kl-border); border-radius: var(--kl-radius); box-shadow: var(--kl-shadow); }
.card-soft { padding: 16px; }
.card-header-soft { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.card-header-soft h2, .card-header-soft h3 { font-size: 1rem; margin: 0; }
.stat-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; height: 100%; }
.stat-icon { width: 42px; height: 42px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0; }
.stat-label { color: var(--kl-text-2); font-size: .85rem; line-height: 1.3; }
.stat-value { font-size: 1.3rem; font-weight: 800; color: var(--kl-text); line-height: 1.25; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat-trend { font-size: .78rem; color: var(--kl-muted); }

.quick-tile { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; height: 100%; transition: transform .15s ease, box-shadow .15s ease; }
.quick-tile:hover { transform: translateY(-1px); box-shadow: var(--kl-shadow); }
.quick-tile i { font-size: 1.35rem; }
.quick-tile .qt-title { display: block; font-weight: 700; font-size: .9rem; line-height: 1.25; }
.quick-tile .qt-sub { font-size: .78rem; opacity: .8; }

.bg-soft-primary { background: var(--kl-primary-soft) !important; color: var(--kl-primary) !important; }
.bg-soft-success { background: var(--kl-success-soft) !important; color: #16A34A !important; }
.bg-soft-warning { background: var(--kl-warning-soft) !important; color: #D97706 !important; }
.bg-soft-danger { background: var(--kl-danger-soft) !important; color: var(--kl-danger) !important; }
.bg-soft-purple { background: var(--kl-purple-soft) !important; color: var(--kl-purple) !important; }
.bg-soft-cyan { background: var(--kl-cyan-soft) !important; color: #0891B2 !important; }
.bg-soft-orange { background: var(--kl-orange-soft) !important; color: var(--kl-orange) !important; }
.bg-soft-muted { background: #EEF2F7 !important; color: var(--kl-muted) !important; }

.alert-soft-warning { display: flex; align-items: center; gap: 10px; background: #FEF6DD; border: 1px solid #F8DC8E; color: #7C4A03; border-radius: 10px; padding: 8px 12px; font-size: .9rem; }

.empty-state { text-align: center; padding: 32px 16px; }
.empty-icon { width: 56px; height: 56px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.5rem; }

/* ---------------------------------------------------------------------
   Badge status
   --------------------------------------------------------------------- */
.badge-soft { display: inline-flex; align-items: center; gap: 3px; padding: 3px 8px; border-radius: 6px; font-weight: 600; font-size: .75rem; line-height: 1.2; white-space: nowrap; }

/* ---------------------------------------------------------------------
   Buttons (warna konsisten per fungsi)
   Primary = simpan/tambah, Light = batal/kembali, Soft-danger = nonaktif/void/force logout,
   Soft-warning = unlock/reset, Soft-success = aktifkan/cetak
   --------------------------------------------------------------------- */
.btn { --bs-btn-padding-y: .4rem; --bs-btn-padding-x: .85rem; --bs-btn-font-size: .93rem; --bs-btn-border-radius: 8px; font-weight: 600; }
.btn-sm { --bs-btn-padding-y: .25rem; --bs-btn-padding-x: .55rem; --bs-btn-font-size: .82rem; --bs-btn-border-radius: 6px; }
.btn-primary { --bs-btn-bg: #2563EB; --bs-btn-border-color: #2563EB; --bs-btn-hover-bg: #1D4ED8; --bs-btn-hover-border-color: #1D4ED8; --bs-btn-active-bg: #1E40AF; --bs-btn-disabled-bg: #93B4F5; --bs-btn-disabled-border-color: #93B4F5; }
.btn-gradient { background: linear-gradient(90deg, #0EA5E9, #2563EB); border: 0; color: #fff; }
.btn-gradient:hover, .btn-gradient:focus { background: linear-gradient(90deg, #0284C7, #1D4ED8); color: #fff; }
.btn-light { --bs-btn-bg: #F1F5F9; --bs-btn-border-color: #E2E8F0; --bs-btn-hover-bg: #E2E8F0; --bs-btn-color: var(--kl-text-2); }
.btn-light-primary { background: var(--kl-primary-softer); color: var(--kl-primary); border: 1px solid var(--kl-primary-soft); }
.btn-light-primary:hover { background: var(--kl-primary-soft); color: var(--kl-primary); }
.btn-soft-danger { background: var(--kl-danger-soft); color: #DC2626; border: 1px solid #FECACA; }
.btn-soft-danger:hover { background: #FECACA; color: #B91C1C; }
.btn-soft-warning { background: var(--kl-warning-soft); color: #B45309; border: 1px solid #FDE68A; }
.btn-soft-warning:hover { background: #FDE68A; color: #92400E; }
.btn-soft-success { background: var(--kl-success-soft); color: #15803D; border: 1px solid #BBF7D0; }
.btn-soft-success:hover { background: #BBF7D0; color: #166534; }
.btn-icon-sm { width: 28px; height: 28px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }

/* ---------------------------------------------------------------------
   Form (tinggi input 34px)
   --------------------------------------------------------------------- */
.form-label { font-weight: 600; color: var(--kl-text); font-size: .86rem; margin-bottom: 4px; }
.form-control, .form-select { background-color: #fff; border-radius: 8px; border-color: var(--kl-border-strong); padding: .38rem .7rem; font-size: .93rem; color: var(--kl-text); min-height: 34px; }
.form-select { padding-right: 2rem; background-position: right .6rem center; }
textarea.form-control { min-height: 0; }
.form-control-sm, .form-select-sm { border-radius: 6px; padding: .22rem .5rem; font-size: .85rem; min-height: 28px; }
.form-select-sm { padding-right: 1.8rem; }
.form-control:disabled, .form-select:disabled, .form-control[readonly]:not(.flatpickr-input) { background-color: #F1F5F9; }
.form-control:focus, .form-select:focus { border-color: #93C5FD; box-shadow: 0 0 0 .18rem rgba(59, 130, 246, .15); }
.input-group-text { font-size: .9rem; padding: .38rem .65rem; background: #F4F7FB; border-color: var(--kl-border-strong); }
.form-text { color: var(--kl-muted); font-size: .8rem; margin-top: 3px; }
.invalid-feedback { font-size: .8rem; }
.form-check { font-size: .93rem; }
.input-number { text-align: right; font-variant-numeric: tabular-nums; }
.form-section-title { font-size: .95rem; font-weight: 700; margin-bottom: 10px; color: var(--kl-text); }
.flatpickr-input[readonly] { background-color: #fff; }

/* ---------------------------------------------------------------------
   Table (baris ±38px)
   --------------------------------------------------------------------- */
.table { --bs-table-striped-bg: #F8FAFD; margin-bottom: 0; vertical-align: middle; font-size: .93rem; }
.table > :not(caption) > * > * { padding: .5rem .7rem; border-bottom-color: #EEF2F7; }
.table thead th { background: #F4F7FB; color: var(--kl-text-2); font-weight: 600; font-size: .8rem; white-space: nowrap; border-bottom: 1px solid var(--kl-border); padding-top: .55rem; padding-bottom: .55rem; }
.table thead th:first-child { border-top-left-radius: 8px; }
.table thead th:last-child { border-top-right-radius: 8px; }
.table-hover > tbody > tr:hover > * { --bs-table-bg-state: #EFF6FF; }
.table .col-actions { width: 1%; white-space: nowrap; text-align: right; }
.table-responsive { border-radius: 8px; }

.filter-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; margin-bottom: 12px; }
.filter-bar .form-label { font-size: .8rem; margin-bottom: 3px; }
.filter-bar .form-control, .filter-bar .form-select { min-width: 140px; }

.pagination-bar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; padding-top: 12px; font-size: .88rem; }
.pagination-info { display: flex; align-items: center; gap: 6px; }
.pagination { --bs-pagination-padding-x: .6rem; --bs-pagination-padding-y: .25rem; --bs-pagination-font-size: .85rem; --bs-pagination-border-radius: 6px; --bs-pagination-color: var(--kl-text-2); --bs-pagination-active-bg: #2563EB; --bs-pagination-active-border-color: #2563EB; --bs-pagination-border-color: var(--kl-border); gap: 3px; }
.pagination .page-link { border-radius: 6px !important; }
.jump-page { display: flex; align-items: center; gap: 5px; }
.jump-page .form-control { width: 64px; }

/* ---------------------------------------------------------------------
   Toast & modal
   --------------------------------------------------------------------- */
.toast-container { z-index: 1090; }
.toast.kl-toast { border: 0; border-radius: 10px; box-shadow: var(--kl-shadow-lg); overflow: hidden; min-width: 280px; font-size: .93rem; }
.kl-toast .toast-body { display: flex; align-items: flex-start; gap: 10px; padding: 10px 10px 10px 12px; }
.kl-toast .toast-icon { width: 28px; height: 28px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-size: .95rem; flex-shrink: 0; }
.kl-toast .toast-msg { flex: 1 1 auto; color: var(--kl-text); font-weight: 500; padding-top: 4px; }
.kl-toast.toast-success { border-left: 4px solid var(--kl-success); }
.kl-toast.toast-danger { border-left: 4px solid var(--kl-danger); }
.kl-toast.toast-warning { border-left: 4px solid var(--kl-warning); }
.kl-toast.toast-info { border-left: 4px solid var(--kl-primary-2); }
.modal-content { border: 0; border-radius: 14px; box-shadow: var(--kl-shadow-lg); }
.modal-header { border-bottom-color: var(--kl-border); padding: 12px 16px; }
.modal-header .modal-title { font-size: 1.05rem; }
.modal-body { padding: 16px; }
.modal-footer { border-top-color: var(--kl-border); padding: 10px 16px; }
.confirm-icon { width: 52px; height: 52px; border-radius: 50%; margin: 0 auto; display: flex; align-items: center; justify-content: center; font-size: 1.45rem; background: var(--kl-warning-soft); color: #D97706; }
.confirm-icon.variant-danger { background: var(--kl-danger-soft); color: var(--kl-danger); }
.confirm-icon.variant-primary { background: var(--kl-primary-soft); color: var(--kl-primary); }

/* ---------------------------------------------------------------------
   Permission matrix (ringkas, kode permission sebagai tooltip)
   --------------------------------------------------------------------- */
.perm-grid { columns: 3 300px; column-gap: 12px; }
.perm-group { break-inside: avoid; border: 1px solid var(--kl-border); border-radius: 10px; overflow: hidden; margin-bottom: 12px; background: #fff; }
.perm-group-head { background: #F4F7FB; padding: 6px 10px; display: flex; align-items: center; justify-content: space-between; font-weight: 700; font-size: .88rem; color: var(--kl-text); }
.perm-group-head .btn { --bs-btn-padding-y: .1rem; --bs-btn-padding-x: .45rem; --bs-btn-font-size: .75rem; }
.perm-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 10px; border-top: 1px solid #EEF2F7; font-size: .88rem; cursor: pointer; margin: 0; }
.perm-item:hover { background: #F8FAFD; }
.perm-item .form-check-input { width: 2.1em; height: 1.15em; cursor: pointer; margin: 0; }
.perm-code { font-size: .72rem; color: var(--kl-muted); }

/* JSON viewer audit */
.json-view { background: #F8FAFC; border: 1px solid var(--kl-border); border-radius: 8px; padding: 10px; font-size: .78rem; max-height: 280px; overflow: auto; white-space: pre-wrap; word-break: break-word; margin: 0; }

/* ---------------------------------------------------------------------
   Login (split screen) — muat 1 layar tanpa scroll di 1280x600 ke atas
   --------------------------------------------------------------------- */
.login-page { min-height: 100vh; display: flex; background: #fff; }
.login-hero {
    flex: 0 0 52%; position: relative; overflow: hidden; padding: clamp(20px, 4.5vh, 44px) clamp(24px, 3.5vw, 52px); display: flex; flex-direction: column;
    background:
        radial-gradient(circle at 12% 88%, rgba(191, 219, 254, .55) 0, rgba(191, 219, 254, 0) 32%),
        radial-gradient(circle at 92% 18%, rgba(165, 243, 252, .45) 0, rgba(165, 243, 252, 0) 34%),
        linear-gradient(160deg, #F2F7FF 0%, #E6F1FF 45%, #DDF3FB 100%);
}
.login-hero::after { content: ''; position: absolute; right: -110px; bottom: -150px; width: 480px; height: 480px; border-radius: 50%; background: linear-gradient(160deg, rgba(186, 230, 253, .55), rgba(125, 211, 252, .35)); z-index: 0; }
.login-dots { position: absolute; width: 150px; height: 150px; background-image: radial-gradient(#BFD7F5 1.5px, transparent 1.5px); background-size: 16px 16px; opacity: .8; z-index: 0; }
.login-dots.dots-tr { top: 0; right: 20px; }
.login-dots.dots-bl { bottom: 30px; left: 0; }
.login-hero > *:not(.login-dots):not(.login-illustration) { position: relative; z-index: 1; }
.login-brand { display: flex; align-items: center; gap: 10px; }
.login-brand img { width: 42px; height: 42px; object-fit: contain; }
.login-brand .brand-name { font-size: 1.45rem; }
.login-brand .brand-tagline { font-size: .82rem; }
.login-eyebrow { margin-top: clamp(16px, 5vh, 44px); letter-spacing: .22em; font-size: .72rem; font-weight: 600; color: #4B6A92; text-transform: uppercase; }
.login-headline { font-size: clamp(1.45rem, 2.4vw, 2.35rem); font-weight: 800; line-height: 1.18; color: #0B2A5B; letter-spacing: -.02em; margin: 8px 0 10px; max-width: 520px; }
.login-desc { color: #4B6A92; font-size: .93rem; max-width: 470px; margin-bottom: 0; }
.feature-chips { display: grid; grid-template-columns: repeat(2, max-content); gap: 8px; margin-top: clamp(12px, 3vh, 22px); }
.feature-chip { display: inline-flex; align-items: center; gap: 7px; background: rgba(255, 255, 255, .85); border-radius: 8px; padding: 6px 11px; font-weight: 600; color: #0B2A5B; font-size: .82rem; box-shadow: 0 1px 6px rgba(37, 99, 235, .06); }
.feature-chip i { color: var(--kl-primary); font-size: .95rem; }
.login-illustration { position: absolute; right: 8px; bottom: 26px; width: auto; height: min(40vh, 330px); max-width: 42%; z-index: 1; }
.login-copy { margin-top: auto; padding-top: 16px; color: #4B6A92; font-size: .78rem; }
.login-panel { flex: 1 1 auto; display: flex; flex-direction: column; padding: 16px clamp(20px, 3.5vw, 48px); }
.login-panel-top { display: flex; justify-content: flex-end; gap: 8px; }
.login-form-wrap { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; }
.login-form { width: 100%; max-width: 400px; }
.login-form h1 { font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; margin-bottom: 2px; }
.login-form .lead-text { color: var(--kl-muted); font-size: .93rem; margin-bottom: clamp(12px, 3vh, 22px); }
.input-icon { position: relative; }
.input-icon > .bi:first-child { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--kl-muted); font-size: 1rem; }
.input-icon .form-control { height: 42px; padding-left: 40px; border-radius: 8px; }
.input-icon .toggle-password { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: var(--kl-muted); width: 32px; height: 32px; border-radius: 6px; font-size: 1rem; }
.input-icon .toggle-password:hover { background: var(--kl-primary-softer); color: var(--kl-primary); }
.btn-login { height: 42px; font-size: 1rem; border-radius: 8px; }
.login-divider { display: flex; align-items: center; gap: 10px; color: var(--kl-muted); font-size: .8rem; margin: clamp(10px, 2.4vh, 18px) 0; }
.login-divider::before, .login-divider::after { content: ''; flex: 1; height: 1px; background: var(--kl-border); }
.secure-box { display: flex; gap: 12px; align-items: center; background: #F7FAFD; border: 1px solid var(--kl-border); border-radius: 10px; padding: 10px 14px; }
.secure-box .shield { width: 38px; height: 38px; border-radius: 50%; background: #E9F1FF; display: flex; align-items: center; justify-content: center; color: var(--kl-primary); font-size: 1.15rem; flex-shrink: 0; }
.secure-box .fw-bold { font-size: .88rem; }
.secure-box .small { font-size: .78rem; line-height: 1.35; }
.login-alert { border-radius: 8px; padding: 8px 12px; font-size: .88rem; margin-bottom: 12px; }
/* Layar pendek: ringkas lagi */
@media (min-width: 992px) and (max-height: 680px) {
    .login-desc { display: none; }
    .login-illustration { height: 34vh; }
    .login-form .mb-4 { margin-bottom: .8rem !important; }
    .login-form .mb-3 { margin-bottom: .6rem !important; }
}
@media (min-width: 992px) and (max-width: 1199.98px) { .login-illustration { display: none; } }
@media (max-width: 991.98px) {
    .login-page { flex-direction: column; }
    .login-hero { flex: none; padding: 18px 18px 16px; }
    .login-eyebrow, .login-desc, .login-illustration, .login-copy, .login-dots { display: none; }
    .login-headline { font-size: 1.25rem; margin: 10px 0 0; }
    .feature-chips { display: none; }
    .login-panel { padding: 14px 18px 22px; }
    .login-panel-top { display: none; }
    .login-form h1 { font-size: 1.35rem; }
    .secure-box { display: none; }
    .login-divider { display: none; }
}

/* ---------------------------------------------------------------------
   Print
   --------------------------------------------------------------------- */
@media print {
    .app-sidebar, .app-topbar, .app-footer, .page-actions, .pagination-bar, .filter-bar, .toast-container { display: none !important; }
    .app-main { margin: 0 !important; }
    .card-soft, .card { box-shadow: none; }
}

/* Bar aksi menempel di bawah layar untuk halaman panjang (mis. Hak Akses) */
.sticky-actions { position: sticky; bottom: 8px; z-index: 5; box-shadow: var(--kl-shadow-lg); }

/* ---------------------------------------------------------------------
   Produk
   --------------------------------------------------------------------- */
.product-thumb { width: 34px; height: 34px; border-radius: 8px; object-fit: cover; border: 1px solid var(--kl-border); flex-shrink: 0; background: #fff; }
.product-thumb-empty { display: inline-flex; align-items: center; justify-content: center; color: #A8B5C7; background: #F4F7FB; font-size: .95rem; }
.photo-preview { width: 64px; height: 64px; border-radius: 10px; border: 1px dashed var(--kl-border-strong); background: #F8FAFD; display: flex; align-items: center; justify-content: center; color: #A8B5C7; font-size: 1.6rem; overflow: hidden; flex-shrink: 0; }
.photo-preview img { width: 100%; height: 100%; object-fit: cover; }
.switch-list { border: 1px solid var(--kl-border); border-radius: 10px; overflow: hidden; }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 10px; margin: 0; font-size: .9rem; color: var(--kl-text); cursor: pointer; }
.switch-row + .switch-row { border-top: 1px solid #EEF2F7; }
.switch-row .form-check-input { width: 2.1em; height: 1.15em; margin: 0; cursor: pointer; }
.stock-info { background: #F8FAFD; border: 1px solid var(--kl-border); border-radius: 10px; padding: 8px 10px; font-size: .88rem; }
.stock-info > div:not(.small) { display: flex; justify-content: space-between; }
.stock-info strong { color: var(--kl-text); }
.table-units > :not(caption) > * > * { padding: .35rem .5rem; }
.table-units tr.row-base td:first-child { box-shadow: inset 3px 0 0 var(--kl-primary-2); }

/* ---------------------------------------------------------------------
   Transaksi (pembelian, nanti POS): pencarian produk & tabel item
   --------------------------------------------------------------------- */
.picker-wrap { position: relative; }
.picker-results { display: none; position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 1065; background: #fff; border: 1px solid var(--kl-border); border-radius: 10px; box-shadow: var(--kl-shadow-lg); max-height: 320px; overflow-y: auto; padding: 4px; }
.picker-results.show { display: block; }
.picker-item { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left; border: 0; background: transparent; padding: 7px 10px; border-radius: 7px; }
.picker-item:hover, .picker-item.active { background: var(--kl-primary-softer); }
.picker-item.inactive { opacity: .6; }
.picker-name { display: block; font-weight: 600; color: var(--kl-text); font-size: .93rem; }
.picker-meta { display: block; font-size: .78rem; color: var(--kl-muted); }
.picker-right { font-size: .8rem; color: var(--kl-text-2); white-space: nowrap; }
.picker-empty { padding: 10px; color: var(--kl-muted); font-size: .88rem; }
.items-scroll { max-height: calc(100vh - 330px); min-height: 150px; overflow-y: auto; border: 1px solid var(--kl-border); border-radius: 8px; }
.items-scroll thead th { position: sticky; top: 0; z-index: 2; }
.table-items > :not(caption) > * > * { padding: .35rem .5rem; }
.items-empty { text-align: center; color: var(--kl-muted); padding: 22px 10px; font-size: .9rem; }
.items-empty i { font-size: 1.6rem; color: #A8B5C7; }
.purchase-total { font-size: 1.25rem; font-weight: 800; color: var(--kl-text); }
.purchase-total span { color: var(--kl-primary); }
.row-void td { color: var(--kl-muted); text-decoration: line-through; text-decoration-color: rgba(100, 116, 139, .5); }
.row-void td:last-child, .row-void td:nth-last-child(2), .row-void td:first-child { text-decoration: none; }
.detail-list { display: grid; grid-template-columns: 100px 1fr; gap: 6px 10px; font-size: .9rem; }
.detail-list dt { color: var(--kl-muted); font-weight: 500; }
.detail-list dd { margin: 0; color: var(--kl-text); font-weight: 600; }
.row-opening td { background: #F8FAFD !important; font-style: italic; }
.shift-figures .fig { background: #F8FAFD; border: 1px solid var(--kl-border); border-radius: 10px; padding: 8px 10px; }
.shift-figures .fig span { display: block; font-size: .78rem; color: var(--kl-muted); }
.shift-figures .fig strong { font-size: 1.05rem; color: var(--kl-text); }

/* ---------------------------------------------------------------------
   POS (Layar Kasir) — muat 1366x625 tanpa scroll halaman; keranjang scroll sendiri
   --------------------------------------------------------------------- */
.pos-page .app-footer { display: none; }
.pos-page .app-content { padding: 12px 14px; }
.pos-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 12px; }
@media (min-width: 992px) {
    .pos-layout { height: calc(100vh - var(--kl-topbar-h) - 24px); min-height: 480px; }
}
@media (max-width: 991.98px) {
    .pos-layout { grid-template-columns: 1fr; }
    .pos-cart { max-height: 55vh; }
}
.pos-main, .pos-side { display: flex; flex-direction: column; min-height: 0; padding: 12px; }
.pos-topbar { display: flex; gap: 10px; align-items: center; }
.input-group-lg-pos .form-control, .input-group-lg-pos .input-group-text, .input-group-lg-pos .btn { height: 42px; font-size: .98rem; }
.btn-voice { background: var(--kl-primary); color: #fff; border: 0; width: 46px; }
.btn-voice:hover, .btn-voice:focus { background: #1D4ED8; color: #fff; }
.btn-voice:disabled { background: #94A3B8; color: #fff; }
.btn-voice.is-listening { background: var(--kl-danger); animation: kl-pulse 1.1s infinite; }
@keyframes kl-pulse { 0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, .5); } 70% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); } 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); } }
.pos-shift-chip { display: flex; align-items: center; gap: 8px; padding: 5px 10px; border-radius: 10px; background: var(--kl-primary-softer); color: var(--kl-primary); white-space: nowrap; }
.pos-shift-chip strong { display: block; font-size: .85rem; line-height: 1.1; }
.pos-shift-chip small { display: block; font-size: .72rem; color: var(--kl-muted); }
.voice-status { margin-top: 8px; padding: 6px 10px; border-radius: 8px; font-size: .84rem; background: #F1F5F9; color: var(--kl-text-2); }
.voice-status.is-listening { background: var(--kl-danger-soft); color: #B91C1C; }
.voice-status.is-success { background: var(--kl-success-soft); color: #15803D; }
.voice-status.is-warning { background: var(--kl-warning-soft); color: #B45309; }
.voice-status.is-info { background: var(--kl-primary-softer); color: var(--kl-primary); }
.voice-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--kl-danger); margin-right: 6px; animation: kl-pulse 1.1s infinite; }
.pos-cart { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin-top: 10px; border: 1px solid var(--kl-border); border-radius: 10px; }
.pos-cart thead th { position: sticky; top: 0; z-index: 2; background: #F8FAFD; }
.pos-cart .table { table-layout: fixed; }
.pos-cart td.min-w-0 { overflow: hidden; }
.pos-cart .row-short td { background: #FFF5F5; }
.pos-cart .row-flash td { animation: kl-flash 1s ease; }
@keyframes kl-flash { from { background: var(--kl-primary-soft); } to { background: transparent; } }
.qty-stepper { display: flex; align-items: center; gap: 2px; }
.qty-stepper .btn { width: 28px; padding: 0; height: 28px; flex-shrink: 0; }
.qty-stepper .form-control { height: 28px; padding: 2px 4px; min-width: 0; }
.pos-cart-footer { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding-top: 8px; }
.pos-cart-footer kbd, .items-empty kbd { background: #E2E8F0; color: var(--kl-text-2); font-size: .72rem; padding: 1px 5px; }
.pos-side .form-label { margin-bottom: 3px; }
.pos-total { background: linear-gradient(135deg, var(--kl-primary), var(--kl-primary-2)); color: #fff; border-radius: 12px; padding: 10px 14px; }
.pos-total span { display: block; font-size: .8rem; opacity: .85; }
.pos-total strong { display: block; font-size: 1.75rem; font-weight: 800; line-height: 1.15; letter-spacing: -.5px; word-break: break-all; }
.pay-methods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.pay-method { border: 1px solid var(--kl-border-strong); background: #fff; border-radius: 8px; padding: 6px 4px; font-size: .82rem; font-weight: 600; color: var(--kl-text-2); }
.pay-method:hover { border-color: var(--kl-primary-2); }
.pay-method.active { background: var(--kl-primary-softer); border-color: var(--kl-primary); color: var(--kl-primary); box-shadow: inset 0 0 0 1px var(--kl-primary); }
.pos-paid { font-size: 1.1rem; font-weight: 700; text-align: right; }
.quick-cash { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.quick-cash .btn { padding: 2px 8px; font-size: .78rem; border: 1px solid var(--kl-border); }
.pos-change { display: flex; justify-content: space-between; align-items: baseline; margin-top: 8px; padding: 8px 12px; border-radius: 10px; background: var(--kl-success-soft); color: #15803D; }
.pos-change strong { font-size: 1.2rem; }
.pos-change.is-short { background: var(--kl-danger-soft); color: #B91C1C; }
.btn-pay { height: 48px; font-size: 1.05rem; font-weight: 700; margin-top: 10px; }
.btn-pay.is-loading { opacity: .7; pointer-events: none; }
.pos-side .mt-auto { margin-top: auto !important; }
.done-change { background: var(--kl-success-soft); color: #15803D; border-radius: 10px; padding: 10px; }
.done-change span { display: block; font-size: .8rem; }
.done-change strong { font-size: 1.6rem; font-weight: 800; }
.done-change.is-noncash { display: none; }
/* POS: toast tetap kanan-bawah area kerja, tidak menutupi tombol Bayar */
@media (min-width: 992px) { .pos-page .toast-container { right: 346px !important; } }

/* Opname & retur */
.opname-stats .fig { background: #fff; border: 1px solid var(--kl-border); border-radius: 10px; padding: 8px 12px; height: 100%; }
.opname-stats .fig span { display: block; font-size: .78rem; color: var(--kl-muted); }
.opname-stats .fig strong { font-size: 1.15rem; color: var(--kl-text); }
#opnameTable .row-flash td { animation: kl-flash 1s ease; }

/* ---------------------------------------------------------------------
   Dashboard M6: tabel ringkas, grafik SVG, donut pembayaran
   --------------------------------------------------------------------- */
.table-dash { font-size: .84rem; table-layout: fixed; }
.table-dash > :not(caption) > * > * { padding: .38rem .45rem; border-bottom-color: var(--kl-border); }
.table-dash thead th { background: #F8FAFD; color: var(--kl-text-2); font-weight: 600; font-size: .78rem; border-bottom: 0; }
.table-dash thead th:first-child { border-radius: 8px 0 0 8px; }
.table-dash thead th:last-child { border-radius: 0 8px 8px 0; }
.table-dash tbody tr:last-child td { border-bottom: 0; }
.link-more { font-size: .82rem; font-weight: 600; white-space: nowrap; text-decoration: none; }
.pay-badge { display: inline-flex; align-items: center; gap: 5px; font-size: .78rem; font-weight: 600; color: var(--kl-text-2); white-space: nowrap; }
.pay-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.thumb-xs { width: 26px; height: 26px; border-radius: 6px; object-fit: cover; flex-shrink: 0; }
.thumb-initial { display: inline-flex; align-items: center; justify-content: center; background: var(--kl-primary-softer); color: var(--kl-primary); font-size: .66rem; font-weight: 700; }
.stock-pill { display: inline-block; min-width: 28px; text-align: center; padding: 1px 7px; border-radius: 6px; background: var(--kl-danger-soft); color: #B91C1C; font-weight: 700; font-size: .8rem; }
.stat-link { display: block; height: 100%; color: inherit; text-decoration: none; }
.stat-link:hover .stat-card { box-shadow: var(--kl-shadow); }
.seg .btn { border: 1px solid var(--kl-border); background: #fff; color: var(--kl-text-2); font-weight: 600; font-size: .78rem; padding: 3px 10px; }
.seg .btn.active { background: var(--kl-primary); border-color: var(--kl-primary); color: #fff; }
.chart-card { display: flex; flex-direction: column; }
.chart-card.is-loading .ch-host { opacity: .45; transition: opacity .15s; }
.ch-wrap { position: relative; flex: 1 1 auto; }
.ch-host { height: 190px; }
.ch-grid { stroke: #EDF1F7; stroke-width: 1; }
.ch-axis { stroke: #D6E0EC; stroke-width: 1; }
.ch-tick { fill: var(--kl-muted); font-size: 10.5px; font-family: inherit; }
.ch-bar { fill: var(--kl-primary-2); transition: opacity .12s; }
.ch-bar.is-dim { opacity: .35; }
.ch-hit { fill: transparent; cursor: default; }
.ch-tooltip { position: absolute; z-index: 5; pointer-events: none; background: #0F172A; color: #fff; border-radius: 8px; padding: 5px 9px; font-size: .78rem; box-shadow: var(--kl-shadow); white-space: nowrap; }
.ch-tip-label { color: #CBD5E1; font-size: .72rem; }
.ch-tip-value { font-weight: 700; }
.ch-empty { position: absolute; inset: 0 0 22px 60px; display: flex; align-items: center; justify-content: center; color: var(--kl-muted); font-size: .85rem; pointer-events: none; }
.ch-empty[hidden] { display: none; }
.donut-wrap { display: flex; align-items: center; gap: 16px; }
.donut { width: 150px; height: 150px; flex-shrink: 0; transform: rotate(-90deg); }
.donut text { transform: rotate(90deg); transform-origin: 60px 60px; }
.donut-track { fill: none; stroke: #EEF2F7; stroke-width: 14; }
.donut-seg { fill: none; stroke-width: 14; }
.donut-num { font-size: 20px; font-weight: 800; fill: var(--kl-text); }
.donut-sub { font-size: 9px; fill: var(--kl-muted); }
.donut-legend { list-style: none; padding: 0; margin: 0; flex: 1 1 auto; min-width: 0; font-size: .84rem; }
.donut-legend li { display: grid; grid-template-columns: 10px 1fr auto; column-gap: 8px; align-items: center; padding: 3px 0; }
.donut-legend .lg-name { color: var(--kl-text); font-weight: 600; }
.donut-legend .lg-val { color: var(--kl-text-2); text-align: right; }
.donut-legend .lg-amt { grid-column: 2 / 4; color: var(--kl-muted); font-size: .76rem; }
/* Notifikasi lonceng */
.notif-badge { position: absolute; top: -3px; right: -5px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--kl-danger); color: #fff; font-size: .65rem; font-weight: 700; line-height: 16px; text-align: center; border: 2px solid #fff; box-sizing: content-box; }
.notif-menu { width: 320px; }
.notif-item { display: flex; gap: 10px; align-items: flex-start; padding: 9px 12px; color: inherit; text-decoration: none; border-bottom: 1px solid var(--kl-border); }
.notif-item:last-child { border-bottom: 0; }
.notif-item:hover { background: var(--kl-primary-softer); }
.notif-icon { width: 30px; height: 30px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.notif-title { display: block; font-weight: 600; font-size: .86rem; color: var(--kl-text); }
.notif-sub { display: block; font-size: .78rem; color: var(--kl-muted); white-space: normal; }

/* Laporan (M7) */
.report-group-title { font-size: .95rem; font-weight: 700; color: var(--kl-text-2); margin: 4px 0 8px; }
.report-tile { display: flex; align-items: center; gap: 12px; padding: 12px 14px; height: 100%; color: inherit; text-decoration: none; transition: box-shadow .15s, transform .15s; }
.report-tile:hover { box-shadow: var(--kl-shadow); transform: translateY(-1px); color: inherit; }
.report-tile .rt-title { display: block; font-weight: 700; color: var(--kl-text); }
.report-tile .rt-desc { display: block; font-size: .8rem; color: var(--kl-muted); }
.report-meta span { margin-right: 4px; }
.report-totals { display: flex; flex-wrap: wrap; gap: 8px; }
.report-totals .rt-item { background: var(--kl-primary-softer); border: 1px solid var(--kl-primary-soft); border-radius: 10px; padding: 6px 12px; min-width: 130px; }
.report-totals .rt-item span { display: block; font-size: .75rem; color: var(--kl-muted); }
.report-totals .rt-item strong { font-size: 1rem; color: var(--kl-text); }
.table-report { font-size: .84rem; }
.table-report tfoot th { background: #EFF6FF; border-top: 2px solid var(--kl-border-strong); }
.brand-preview { width: 52px; height: 52px; object-fit: contain; border: 1px solid var(--kl-border); border-radius: 10px; background: #fff; padding: 4px; flex-shrink: 0; }
.brand-preview-sm { width: 40px; height: 40px; }