* { box-sizing: border-box; margin: 0; padding: 0; }

  :root {
    --bg: #ECEFE9;
    --surface: #FFFFFF;
    --sidebar: #12262A;
    --sidebar-text: #93AFA9;
    --sidebar-text-active: #FFFFFF;
    --accent: #0077A3;
    --accent-dark: #005D80;
    --accent-tint: #D2E6EE;
    --amber: #B8720F;
    --amber-tint: #F0DCB0;
    --text: #16211E;
    --muted: #526059;
    --border: #BFC9B4;
    --danger: #C13C2E;
    --danger-tint: #F5D0C9;
    --success: #1F8F5E;
    --success-tint: #CBEADA;
    --row-tint: #E9EDE2;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --bg: #12181A; --surface: #1B2325; --sidebar: #0B1517; --sidebar-text: #8AA39C; --sidebar-text-active: #FFFFFF;
      --accent: #2FA8DB; --accent-dark: #7DD0F0; --accent-tint: #1B3944; --amber: #E5AC4E; --amber-tint: #3E3016;
      --text: #ECEFEA; --muted: #94A69F; --border: #38443F; --danger: #FF8A73; --danger-tint: #3F211B;
      --success: #4FD494; --success-tint: #17402C; --row-tint: #212B2D;
    }
  }
  :root[data-theme="dark"] {
    --bg: #12181A;
    --surface: #1B2325;
    --sidebar: #0B1517;
    --sidebar-text: #8AA39C;
    --sidebar-text-active: #FFFFFF;
    --accent: #2FA8DB;
    --accent-dark: #7DD0F0;
    --accent-tint: #1B3944;
    --amber: #E5AC4E;
    --amber-tint: #3E3016;
    --text: #ECEFEA;
    --muted: #94A69F;
    --border: #38443F;
    --danger: #FF8A73;
    --danger-tint: #3F211B;
    --success: #4FD494;
    --success-tint: #17402C;
    --row-tint: #212B2D;
  }

  html, body { max-width: 100%; overflow-x: hidden; }
  body { font-family: 'Archivo', 'Segoe UI', system-ui, sans-serif; background: var(--bg); color: var(--text); font-size: 14px; line-height: 1.5; font-variant-numeric: tabular-nums; }
  .mono { font-family: 'IBM Plex Mono', 'SF Mono', Consolas, monospace; }
  .layout { display: flex; min-height: 100vh; }
  .role-hidden { display: none !important; }
  :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } }

  * { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
  *::-webkit-scrollbar { width: 9px; height: 9px; }
  *::-webkit-scrollbar-track { background: transparent; }
  *::-webkit-scrollbar-thumb { background-color: var(--border); border-radius: 100px; border: 2px solid transparent; background-clip: padding-box; }
  *::-webkit-scrollbar-thumb:hover { background-color: var(--muted); background-clip: padding-box; }
  *::-webkit-scrollbar-corner { background: transparent; }
  nav { scrollbar-color: rgba(255,255,255,0.22) transparent; }
  nav::-webkit-scrollbar-thumb { background-color: rgba(255,255,255,0.22); background-clip: padding-box; }
  nav::-webkit-scrollbar-thumb:hover { background-color: rgba(255,255,255,0.36); background-clip: padding-box; }

  .sidebar { width: 240px; flex-shrink: 0; background: var(--sidebar); color: var(--sidebar-text); padding: 24px 0; display: flex; flex-direction: column; position: relative; transition: width 0.16s ease; }
  .sidebar-toggle-btn { position: absolute; top: 22px; right: -13px; width: 26px; height: 26px; border-radius: 50%; background: var(--surface); border: 1px solid var(--border); color: var(--muted); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 5; padding: 0; }
  .sidebar-toggle-btn:hover { color: var(--accent); border-color: var(--accent); }
  .sidebar-toggle-btn svg { transition: transform 0.16s ease; }
  body.sidebar-collapsed .sidebar-toggle-btn svg { transform: rotate(180deg); }
  .brand { padding: 0 22px 20px; font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 17px; color: #fff; letter-spacing: -0.01em; }
  .brand .dim { color: var(--sidebar-text); font-weight: 500; opacity: 0.6; padding: 0 2px; }
  .brand small { display: block; font-size: 11px; color: var(--sidebar-text); font-weight: 500; margin-top: 5px; letter-spacing: 0; }
  .brand-short { display: none; }
  .role-switcher { padding: 0 22px 18px; }
  .role-switcher label { display:block; font-size: 11px; color: var(--sidebar-text); margin-bottom: 5px; font-weight: 500; }
  .role-switcher select { width: 100%; padding: 8px 9px; border-radius: 7px; border: 1px solid rgba(255,255,255,0.16); background: rgba(255,255,255,0.07); color: #fff; font-size: 12.5px; font-family: inherit; font-weight: 500; }
  .role-switcher select option { color: #000; }
  nav { flex: 1; border-top: 1px solid rgba(255,255,255,0.09); padding-top: 6px; overflow-y: auto; }
  .nav-group { padding: 0 10px; }
  .nav-group-label { padding: 15px 12px 5px; font-size: 11px; font-weight: 600; color: var(--sidebar-text); opacity: 0.5; }
  .nav-group:first-child .nav-group-label { padding-top: 6px; }
  .nav-group:not(:has(.nav-item:not(.role-hidden))) { display: none; }
  .nav-item { display: flex; align-items: center; gap: 11px; padding: 10px 12px; cursor: pointer; font-size: 13.5px; font-weight: 500; border-radius: 7px; color: var(--sidebar-text); }
  .nav-item svg { flex-shrink: 0; opacity: 0.8; }
  .nav-item:hover { background: rgba(255,255,255,0.06); color: #fff; }
  .nav-item.active { color: var(--sidebar-text-active); background: var(--accent); }
  .nav-item.active svg { opacity: 1; }
  .nav-item.dropdown-parent .nav-chevron { margin-left: auto; flex-shrink: 0; opacity: 0.6; transition: transform 0.15s ease; }
  .nav-item.dropdown-parent.open .nav-chevron { transform: rotate(90deg); }
  .nav-dropdown { overflow: hidden; max-height: 0; transition: max-height 0.18s ease; }
  .nav-dropdown.open { max-height: 600px; }
  .nav-item.nav-child { padding-left: 34px; font-size: 13px; }
  .nav-item.nav-child svg { width: 6px; height: 6px; flex-shrink: 0; opacity: 0.6; }
  body.sidebar-collapsed .nav-item.dropdown-parent .nav-chevron,
  body.sidebar-collapsed .nav-dropdown { display: none; }
  .sidebar-foot { padding: 16px 22px 0; font-size: 11.5px; color: var(--sidebar-text); opacity: 0.6; border-top: 1px solid rgba(255,255,255,0.09); margin-top: 10px; padding-top: 16px; }

  .main { flex: 1; min-width: 0; padding: 30px 34px 60px; max-width: 1440px; }
  .page, .subview { display: none; }
  .page.active, .subview.active { display: block; }

  .page-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 22px; }
  .page-header h1 { font-size: 21px; font-weight: 700; margin-bottom: 4px; letter-spacing: -0.01em; }
  .page-header p { color: var(--muted); font-size: 13px; }
  .back-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); cursor: pointer; margin-bottom: 14px; font-weight: 500; }
  .back-link:hover { color: var(--text); }

  .metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); gap: 12px; margin-bottom: 20px; }
  .metric-card { background: var(--surface); border: 1px solid var(--border); border-radius: 9px; padding: 15px 17px; }
  .metric-card.cost-only { border-left: 3px solid var(--amber); }
  .metric-label { font-size: 11.5px; color: var(--muted); margin-bottom: 8px; font-weight: 500; }
  .metric-value { font-family: 'IBM Plex Mono', monospace; font-size: 21px; font-weight: 600; letter-spacing: -0.01em; }

  .panel { background: var(--surface); border: 1px solid var(--border); border-radius: 9px; overflow: visible; margin-bottom: 18px; }
  .panel-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--border); flex-wrap: wrap; gap: 8px; }
  .panel-head h2 { font-size: 14px; font-weight: 600; }

  .filter-row { display: flex; gap: 8px; align-items: center; padding: 12px 18px; border-bottom: 1px solid var(--border); background: var(--row-tint); flex-wrap: wrap; }
  .filter-row select, .filter-row input[type="date"], .filter-row input[type="text"] { padding: 7px 10px; border: 1px solid var(--border); border-radius: 6px; font-size: 12.5px; font-family: inherit; background: var(--surface); color: var(--text); }
  .filter-row .filter-label { font-size: 12px; color: var(--muted); margin-right: 2px; font-weight: 500; }
  .filter-row .reset { margin-left: auto; }

  table { width: 100%; border-collapse: collapse; }
  th, td { text-align: left; padding: 10px 13px; font-size: 13px; border-bottom: 1px solid var(--border); white-space: nowrap; }
  th { color: var(--muted); font-weight: 600; font-size: 11.5px; background: var(--row-tint); }
  tbody tr:nth-child(even) { background: var(--row-tint); }
  tbody tr:last-child td { border-bottom: none; }
  td.num, th.num { font-family: 'IBM Plex Mono', monospace; }
  .empty-row td { text-align: center; color: var(--muted); padding: 26px; background: var(--surface) !important; }
  tr.clickable { cursor: pointer; }
  tr.clickable:hover td { background: var(--accent-tint); }

  .toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; gap: 12px; flex-wrap: wrap; }
  .search { padding: 8px 12px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px; width: 220px; background: var(--surface); font-family: inherit; }

  .btn { font-family: inherit; font-size: 13px; font-weight: 600; padding: 8px 16px; border-radius: 7px; border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; }
  .btn:hover { border-color: var(--muted); }
  .btn:disabled { opacity: 0.5; cursor: not-allowed; }
  .btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
  .btn-primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
  .btn-sm { padding: 5px 11px; font-size: 12.5px; }

  .seg-switch { display: flex; border: 1px solid var(--border); border-radius: 7px; overflow: hidden; flex-shrink: 0; }
  .seg-btn { font-family: inherit; font-size: 12.5px; font-weight: 600; padding: 6px 12px; border: none; background: var(--surface); color: var(--muted); cursor: pointer; border-right: 1px solid var(--border); }
  .seg-btn:last-child { border-right: none; }
  .seg-btn:hover { background: var(--row-tint); }
  .seg-btn.active { background: var(--accent); color: #fff; }
  .btn-icon { background: none; border: none; color: var(--muted); cursor: pointer; padding: 4px; font-size: 14px; border-radius: 5px; }
  .btn-icon:hover { color: var(--text); background: var(--row-tint); }

  .badge { font-size: 12px; padding: 3px 9px; border-radius: 4px; font-family: 'IBM Plex Mono', monospace; }
  .badge-fuel { background: var(--amber-tint); color: var(--amber); }
  .badge-plat { background: var(--accent-tint); color: var(--accent-dark); cursor: pointer; font-weight: 500; }
  .badge-plat:hover { opacity: 0.78; }
  body.role-no-kendaraan .badge-plat[onclick*="jumpToVehicle"] { background: transparent; padding: 0; cursor: default; pointer-events: none; }
  body.role-no-kendaraan tr.clickable[onclick*="jumpToVehicle"] { cursor: default; pointer-events: none; }
  body.role-no-kendaraan tr.clickable[onclick*="jumpToVehicle"]:hover td { background: transparent; }
  body.role-no-kendaraan .expand-link[onclick*="jumpToVehicle"] { display: none; }
  body.role-no-kendaraan .notif-item[onclick*="closeNotifAndOpenVehicle"] { cursor: default; pointer-events: none; }
  .text-danger { color: var(--danger); }
  .link-text { color: var(--accent-dark); cursor: pointer; }
  .link-text:hover { text-decoration: underline; }

  .badge-status { font-size: 11.5px; padding: 3px 9px; border-radius: 4px; font-weight: 600; white-space: nowrap; }
  .status-belum { background: var(--danger-tint); color: var(--danger); }
  .status-proses { background: var(--amber-tint); color: var(--amber); }
  .status-lunas { background: var(--success-tint); color: var(--success); }
  .status-menunggu { background: var(--row-tint); color: var(--muted); }
  .status-diterima { background: var(--success-tint); color: var(--success); }
  .status-warning { background: var(--amber-tint); color: var(--amber); }

  .list-row { display: flex; justify-content: space-between; align-items: center; padding: 13px 18px; border-bottom: 1px solid var(--border); cursor: pointer; }
  .list-row:last-child { border-bottom: none; }
  .list-row:hover { background: var(--row-tint); }
  .list-row .name { font-weight: 600; font-size: 13.5px; display: flex; align-items: center; gap: 8px; }
  .list-row .sub { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
  .list-row .right { text-align: right; font-size: 12.5px; color: var(--muted); }
  .list-row .right .amount { font-family: 'IBM Plex Mono', monospace; color: var(--text); font-weight: 600; display: block; margin-bottom: 2px; }

  .entity-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; flex-wrap: wrap; gap: 10px; }
  .entity-title { display: flex; align-items: center; gap: 13px; }
  .entity-icon { width: 44px; height: 44px; border-radius: 9px; background: var(--accent-tint); color: var(--accent-dark); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
  .entity-title h1 { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
  .entity-title h1.mono { font-family: 'IBM Plex Mono', monospace; letter-spacing: 0; }
  .entity-title h1 .badge-status { margin-left: 9px; vertical-align: middle; font-family: 'Archivo', sans-serif; }
  .entity-title p { font-size: 13px; color: var(--muted); margin-top: 2px; }

  .detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; padding: 18px; }
  .detail-item .dl { font-size: 12px; color: var(--muted); margin-bottom: 3px; }
  .detail-item .dv { font-size: 14px; font-weight: 600; }
  .detail-item .dv.mono { font-family: 'IBM Plex Mono', monospace; font-weight: 500; }
  .section-label { font-size: 12px; color: var(--muted); padding: 14px 18px 4px; font-weight: 500; }

  .status-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 18px; border-bottom: 1px solid var(--border); gap: 12px; flex-wrap: wrap; }
  .status-row:last-child { border-bottom: none; }
  .status-row .label { font-size: 13px; font-weight: 600; }
  .status-actions { display: flex; align-items: center; gap: 8px; }
  .status-actions select { padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; font-size: 12.5px; font-family: inherit; }

  .modal-overlay { position: fixed; inset: 0; background: rgba(18,38,42,0.5); display: none; align-items: center; justify-content: center; z-index: 50; padding: 24px; }
  .modal-overlay.active { display: flex; }
  .modal { background: var(--surface); border-radius: 12px; width: 520px; max-width: 100%; max-height: 88vh; overflow-y: auto; }
  .modal-head { display: flex; justify-content: space-between; align-items: center; padding: 18px 22px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--surface); }
  .modal-head h2 { font-size: 15px; font-weight: 700; }
  .modal-body { padding: 20px 22px; }
  .modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 16px 22px; border-top: 1px solid var(--border); position: sticky; bottom: 0; background: var(--surface); }
  .modal-section-label { font-size: 12px; font-weight: 600; color: var(--text); margin: 18px 0 10px; padding-top: 12px; border-top: 1px solid var(--border); }
  .modal-section-label:first-child { margin-top: 0; padding-top: 0; border-top: none; }

  .form-group { margin-bottom: 14px; }
  .form-group label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 5px; font-weight: 500; }
  .form-group input, .form-group select { width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px; font-family: inherit; background: var(--surface); color: var(--text); }
  .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .form-row.three { grid-template-columns: 1fr 1fr 1fr; }
  .upload-box { border: 1.5px dashed #B9C2B4; border-radius: 7px; padding: 22px; text-align: center; color: var(--muted); font-size: 12.5px; }

  .item-list-row { display: grid; grid-template-columns: 1fr 0.6fr 0.6fr auto; gap: 8px; margin-bottom: 8px; align-items: center; }
  .item-list-row.two { grid-template-columns: 1.4fr 0.7fr auto; }
  .item-list-row input, .item-list-row select { padding: 7px 9px; border: 1px solid var(--border); border-radius: 6px; font-size: 12.5px; font-family: inherit; }
  .item-remove { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 15px; }
  .item-remove:hover { color: var(--danger); }
  .add-row-btn { font-size: 12.5px; color: var(--accent-dark); background: none; border: none; cursor: pointer; padding: 4px 0; font-weight: 600; }
  .item-total { text-align: right; font-size: 13px; font-weight: 600; margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--border); }

  .toast { position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%) translateY(12px); background: var(--sidebar); color: #fff; padding: 11px 20px; border-radius: 8px; font-size: 13px; font-weight: 500; opacity: 0; pointer-events: none; transition: all 0.25s ease; z-index: 60; }
  .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

  .notif-panel { background: var(--danger-tint); border: 1px solid #EAC4BE; border-radius: 9px; padding: 14px 18px; margin-bottom: 20px; }
  .notif-panel .notif-head { font-size: 13px; font-weight: 700; color: var(--danger); margin-bottom: 6px; display: flex; align-items: center; gap: 8px; }

  .topbar { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-bottom: 20px; }
  .theme-toggle { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: 9px; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--muted); }
  .theme-toggle:hover { border-color: var(--accent); color: var(--accent); }
  .notif-bell-wrap { position: relative; }
  .notif-bell { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: 9px; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
  .notif-bell:hover { border-color: var(--muted); }
  .notif-badge { position: absolute; top: -5px; right: -5px; background: var(--danger); color: #fff; font-size: 10px; font-weight: 700; border-radius: 10px; min-width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; padding: 0 4px; }
  .notif-dropdown { display: none; position: absolute; top: 46px; right: 0; width: 340px; max-height: 380px; overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 12px 30px rgba(18,38,42,0.16); z-index: 45; }
  .notif-dropdown.open { display: block; }
  .notif-dropdown-head { padding: 12px 16px; font-weight: 700; font-size: 13px; border-bottom: 1px solid var(--border); }
  .notif-dropdown .notif-item { padding: 10px 16px; }
  .notif-dropdown-empty { padding: 20px 16px; text-align: center; color: var(--muted); font-size: 13px; }

  .table-scroll { max-height: 420px; overflow-y: auto; overflow-x: auto; }
  .table-scroll.short { max-height: 300px; }
  .pagination { display: flex; align-items: center; justify-content: space-between; padding: 10px 18px; border-top: 1px solid var(--border); font-size: 12.5px; color: var(--muted); }
  .pagination .page-indicator { white-space: nowrap; font-weight: 500; }
  .panel-head .expand-link { font-size: 12.5px; color: var(--accent-dark); cursor: pointer; font-weight: 600; }
  .panel-head .expand-link:hover { text-decoration: underline; }

  .ms-wrap { position: relative; display: inline-block; }
  .ms-panel { display: none; position: absolute; top: 38px; left: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 9px; box-shadow: 0 12px 30px rgba(18,38,42,0.16); z-index: 45; padding: 8px; min-width: 150px; max-height: 260px; overflow-y: auto; }
  .ms-panel.open { display: block; }
  .ms-panel label { display: flex; align-items: center; gap: 8px; padding: 5px 6px; font-size: 12.5px; cursor: pointer; border-radius: 5px; white-space: nowrap; }
  .ms-panel label:hover { background: var(--row-tint); }
  .ms-panel .ms-divider { border-top: 1px solid var(--border); margin: 4px 0; }
  .ms-toggle-all { display: block; width: 100%; text-align: left; background: none; border: none; color: var(--accent-dark); font-size: 12px; font-weight: 600; cursor: pointer; padding: 5px 6px; font-family: inherit; border-radius: 5px; }
  .ms-toggle-all:hover { background: var(--row-tint); text-decoration: underline; }
  .ms-search { display: block; width: 100%; box-sizing: border-box; padding: 6px 8px; margin-bottom: 6px; border: 1px solid var(--border); border-radius: 6px; font-size: 12.5px; font-family: inherit; color: var(--text); }
  .ms-search:focus { outline: none; border-color: var(--accent); }
  .ms-panel .ms-empty { padding: 6px; font-size: 12px; color: var(--muted); }

  tr.expand-row > td { background: var(--row-tint); padding: 0 18px 12px; }
  .expand-inner { border-left: 2px solid var(--accent); padding: 10px 14px; margin-top: 2px; }
  .expand-inner .ei-title { font-size: 12px; color: var(--muted); margin-bottom: 6px; font-weight: 500; }
  .expand-inner table { background: var(--surface); border: 1px solid var(--border); border-radius: 7px; }
  .expand-caret { display: inline-block; width: 14px; color: var(--muted); }
  .notif-item { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; border-top: 1px solid var(--border); cursor: pointer; font-size: 13px; }
  .notif-item:first-of-type { border-top: none; }
  .notif-item:hover { text-decoration: underline; }
  .notif-item .days { font-family: 'IBM Plex Mono', monospace; color: var(--danger); font-weight: 600; white-space: nowrap; }

  .checkbox-row { display: flex; align-items: center; gap: 8px; }
  .invoice-summary-box { background: var(--surface); border: 1px solid var(--border); border-radius: 9px; padding: 16px 18px; }
  .invoice-summary-box .row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 13px; }
  .invoice-summary-box .row.total { border-top: 1px solid var(--border); margin-top: 6px; padding-top: 10px; font-weight: 700; font-size: 15px; }
  .invoice-doc { background: var(--surface); border: 1px solid var(--border); border-radius: 9px; padding: 24px; max-width: 820px; width: 100%; box-sizing: border-box; }
  .invoice-doc-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .invoice-doc-head { display: flex; justify-content: space-between; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
  .invoice-doc-head h2 { font-size: 16px; font-weight: 700; }
  .invoice-doc-head p { font-size: 12.5px; color: var(--muted); margin-top: 2px; }

  /* ---- Grafik ringkasan (Dashboard) ---- */
  .chart-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-bottom: 18px; }
  .chart-card { background: var(--surface); border: 1px solid var(--border); border-radius: 9px; padding: 16px 18px 14px; }
  .chart-card-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; gap: 8px; flex-wrap: wrap; }
  .chart-card-head h3 { font-size: 12.5px; font-weight: 600; }
  .chart-total { font-family: 'IBM Plex Mono', monospace; font-size: 17px; font-weight: 600; margin-top: 4px; letter-spacing: -0.01em; }
  .chart-legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 11.5px; color: var(--muted); font-weight: 500; }
  .chart-legend .dot { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 5px; vertical-align: middle; }
  .chart-canvas-wrap { position: relative; height: 170px; }
  .chart-canvas-wrap.tall { height: 260px; }
  .chart-canvas-wrap canvas { max-width: 100%; }
  .chart-empty { font-size: 12.5px; color: var(--muted); text-align: center; padding: 46px 10px; }

  input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; accent-color: var(--accent); }
  .nav-item { min-height: 42px; }
  .btn { min-height: 38px; }

  /* Sidebar manually minimized (persists via localStorage, any screen width) */
  body.sidebar-collapsed .sidebar { width: 68px; }
  body.sidebar-collapsed .brand-full, body.sidebar-collapsed .brand small,
  body.sidebar-collapsed .nav-item span, body.sidebar-collapsed .role-switcher label,
  body.sidebar-collapsed .nav-group-label, body.sidebar-collapsed .sidebar-foot { display: none; }
  body.sidebar-collapsed .brand-short { display: block; text-align: center; }
  body.sidebar-collapsed .brand { padding: 0 8px 20px; text-align: center; }
  body.sidebar-collapsed .role-switcher { padding: 0 10px 18px; }
  body.sidebar-collapsed .role-switcher select { font-size: 9.5px; padding: 6px 2px; text-align: center; text-align-last: center; }
  body.sidebar-collapsed .nav-item { justify-content: center; }
  body.sidebar-collapsed .nav-group { padding: 0 8px; }

  /* Tablet (iPad portrait/landscape): tighten spacing, keep sidebar labelled */
  @media (max-width: 1024px) {
    .main { padding: 26px 24px 50px; }
    .sidebar { width: 204px; }
  }

  /* Narrower tablets / split-view: stack side-by-side layouts */
  @media (max-width: 860px) {
    .detail-grid { grid-template-columns: 1fr; }
    .form-row, .form-row.three { grid-template-columns: 1fr; }
    .page-header { flex-direction: column; align-items: flex-start; gap: 8px; }
    .invoice-doc-head { flex-direction: column; gap: 14px; }
    .invoice-doc-head > div:last-child { align-self: flex-start !important; text-align: left !important; }
  }

  /* Phone-width / very narrow split-view: collapse sidebar to icons */
  @media (max-width: 640px) {
    .sidebar { width: 74px; }
    .brand small, .nav-item span, .role-switcher label, .nav-group-label { display: none; }
    .role-switcher select { font-size: 10px; padding: 6px 2px; }
    .nav-item { justify-content: center; }
    .main { padding: 18px 14px 40px; }
    .metrics { grid-template-columns: repeat(2, 1fr); }
    .chart-grid { grid-template-columns: 1fr; }
    .toolbar { flex-direction: column; align-items: stretch; gap: 10px; }
    .search { width: 100%; }
  }