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

    :root {
      --orange:       #F97316;
      --orange-dark:  #EA580C;
      --orange-light: #FFF7ED;
      --sun-yellow:   #FDBA24;
      --black:        #071820;
      --text:         #071820;
      --text-muted:   #64748B;
      --border:       #CBD5E1;
      --bg:           #F0F4F8;
      --surface:      #FFFFFF;
      --radius-sm:    8px;
      --radius-md:    12px;
      --shadow-sm:    0 1px 2px rgba(7,24,32,0.05);
      --shadow-md:    0 8px 24px rgba(7,24,32,0.08);
      --sidebar-w:    240px;
    }

    body {
      font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
      background: var(--bg); color: var(--text);
      display: flex; height: 100vh; overflow: hidden;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }

    /* ─── SIDEBAR ──────────────────────────── */
    #sidebar {
      width: var(--sidebar-w); min-width: var(--sidebar-w);
      background: var(--black); display: flex; flex-direction: column;
      height: 100vh; overflow-y: auto; flex-shrink: 0;
      border-right: 1px solid rgba(203,213,225,0.10);
      box-shadow: 8px 0 24px rgba(7,24,32,0.08);
    }
    .brand {
      display: flex; align-items: center; gap: 10px;
      padding: 20px 18px; border-bottom: 1px solid rgba(255,255,255,0.08); flex-shrink: 0;
    }
    .brand-icon {
      width: 44px; height: 44px; background: var(--orange); border-radius: 10px;
      display: flex; align-items: center; justify-content: center;
      font-weight: 800; font-size: 16px; color: #fff; flex-shrink: 0;
    }
    .brand-icon.has-logo { background: transparent; }
    .brand-icon img {
      width: 100%; height: 100%; object-fit: contain; border-radius: 9px; display: block;
    }
    .brand-name { max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size: 15px; font-weight: 750; color: #fff; letter-spacing:-0.1px; }
    .brand-sub  { font-size: 10px; color: #94A3B8; letter-spacing: 0.9px; text-transform: uppercase; }
    .nav-group  { padding: 11px 0 3px; }
    .nav-section-label {
      font-size: 9.5px; font-weight: 700; color: #64748B;
      text-transform: uppercase; letter-spacing: 1.15px; padding: 5px 20px 6px;
    }
    .nav-item {
      display: flex; align-items: center; gap: 10px;
      position: relative; margin: 2px 10px; padding: 9px 11px;
      color: #CBD5E1; font-size: 13px; font-weight: 550;
      cursor: pointer; text-decoration: none;
      border: 1px solid transparent; border-radius: 9px; transition: all 0.16s ease;
    }
    .nav-item:hover { color: #fff; background: rgba(255,255,255,0.07); }
    .nav-item.active { color: #fff; background: rgba(249,115,22,0.15); border-color: rgba(249,115,22,0.25); }
    .nav-item.active::before { content:''; position:absolute; left:-11px; top:7px; bottom:7px; width:3px; border-radius:0 3px 3px 0; background:var(--orange); }
    .nav-item svg { width: 16px; height: 16px; flex-shrink: 0; color:#94A3B8; transition:color 0.16s ease; }
    .nav-item:hover svg { color:#fff; }
    .nav-item.active svg { color:var(--orange); }
    .nav-badge { margin-left: auto; background: #DC2626; color: #fff; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 10px; }
    .addon-tag { display:inline-flex; align-items:center; flex-shrink:0; white-space:nowrap; margin-left:auto; border:1px solid rgba(249,115,22,.45); color:#FDBA74; background:rgba(249,115,22,.10); font-size:8px; font-weight:800; letter-spacing:.06em; line-height:1.25; padding:1px 5px; border-radius:999px; }
    .addon-tag + .nav-badge { margin-left:4px; }

    /* ─── MAIN ──────────────────────────────── */
    #main { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; padding-top: 8px; background: var(--surface); }

    /* ─── PAGE HEADER ───────────────────────── */
    .page-header {
      background: var(--surface); border-bottom: 1px solid var(--border);
      padding: 14px 28px; min-height: 70px; display: flex; align-items: center; gap: 12px;
      flex-shrink: 0; z-index: 40; box-shadow:var(--shadow-sm);
    }
    #main.vehicle-instalment-workspace > .page-header { display: none; }
    #main.self-header-workspace > .page-header { display: none; }
    .page-title  { display:flex; align-items:center; gap:9px; font-size: 20px; font-weight: 760; letter-spacing:-0.3px; line-height:1.2; }
    .page-title::before { content:''; width:4px; height:19px; border-radius:4px; background:var(--orange); flex-shrink:0; }
    .page-subtitle { font-size: 12px; color: var(--text-muted); margin: 4px 0 0 13px; }
    .header-spacer { flex: 1; }

    /* ─── BUTTONS ───────────────────────────── */
    .btn {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 8px 14px; border-radius: 9px;
      font-size: 13px; font-weight: 650; cursor: pointer; border: none;
      transition: all 0.13s; white-space: nowrap; line-height: 1; font-family: inherit;
    }
    .btn svg { width: 13px; height: 13px; }
    .btn-primary  { background: var(--orange); color: #fff; box-shadow:0 1px 2px rgba(7,24,32,0.12); }
    .btn-primary:hover { background: var(--orange-dark); box-shadow:0 4px 12px rgba(249,115,22,0.22); }
    .btn-danger   { background: #DC2626; color: #fff; }
    .btn-danger:hover { background: #B91C1C; }
    /* Polish A (21 Oct): the in-page confirmation (a page <dialog>, styled like the Cash Sales popups). */
    .rf-confirm-dialog { position:fixed; inset:0; margin:auto; height:fit-content; width:min(460px,calc(100vw - 24px)); max-height:calc(100dvh - 24px); padding:0; border:1px solid var(--rf-line-2,var(--border)); border-radius:14px; background:var(--rf-panel,var(--surface)); color:var(--rf-head,var(--text)); box-shadow:0 24px 70px rgba(7,24,32,.32); }
    .rf-confirm-dialog::backdrop { background:rgba(7,24,32,.55); }
    .rf-confirm-dialog form { display:grid; gap:12px; margin:0; padding:18px 20px; }
    .rf-confirm-dialog h3 { margin:0; font-size:16px; font-weight:800; }
    .rf-confirm-dialog p { margin:0; font-size:13px; line-height:1.45; color:var(--rf-muted,var(--text-muted)); overflow-wrap:anywhere; }
    .rf-confirm-buttons { display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; margin-top:4px; }
    .btn-success  { background: #16A34A; color: #fff; }
    .btn-success:hover { background: #15803D; }
    .btn-ghost    { background: #fff; color: var(--text-muted); border: 1px solid var(--border); }
    .btn-ghost:hover { background: var(--bg); color: var(--text); }
    .btn-icon     { padding: 8px 10px; background: #fff; border: 1px solid var(--border); color: var(--text-muted); }
    .btn-icon:hover { background: var(--bg); color: var(--text); }
    .btn-today    { background: var(--orange-light); color: var(--orange); border: 1px solid #FDBA74; font-weight: 600; }

    .view-toggle  { display: flex; border: 1px solid var(--border); border-radius: 9px; overflow: hidden; box-shadow:var(--shadow-sm); }
    .view-toggle .vtbtn { padding: 8px 16px; font-size: 12.5px; font-weight: 500; cursor: pointer; border: none; background: #fff; color: var(--text-muted); transition: all 0.12s; line-height: 1; font-family: inherit; }
    .view-toggle .vtbtn:not(:last-child) { border-right: 1px solid var(--border); }
    .view-toggle .vtbtn.active { background: var(--orange); color: #fff; }
    .period-label { font-size: 15px; font-weight: 700; min-width: 200px; text-align: center; }

    /* ─── STATS BAR ──────────────────────────── */
    .stats-bar { background: var(--surface); border-bottom: 1px solid var(--border); padding: 0 28px; display: flex; align-items: center; flex-shrink: 0; height: 46px; }
    .stat-item  { display: flex; align-items: center; gap: 8px; padding: 0 22px; font-size: 12.5px; }
    .stat-item:first-child { padding-left: 0; }
    .stat-item:not(:first-child) { border-left: 1px solid var(--border); }
    .stat-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
    .stat-dot.ongoing     { background: #2563EB; }
    .stat-dot.upcoming    { background: #7C3AED; }
    .stat-dot.overdue     { background: #DC2626; }
    .stat-dot.finished    { background: #15803D; }
    .stat-count { font-weight: 700; font-size: 16px; }
    .stat-label { color: var(--text-muted); }
    .stats-right { margin-left: auto; font-size: 11px; color: #9CA3AF; }

    /* ─── LOGIN PAGE ────────────────────────────── */
    #login-page { position: fixed; inset: 0; background: var(--bg); z-index: 9999; display: flex; align-items: center; justify-content: center; }
    .login-card { background: #fff; border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow-md); padding: 40px 44px; width: 380px; max-width: 94vw; }
    .login-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; }
    .login-brand-icon { width: 42px; height: 42px; background: var(--orange); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 20px; flex-shrink: 0; }
    .login-brand-icon.has-logo { background: transparent; }
    .login-brand-icon img { width: 100%; height: 100%; object-fit: contain; border-radius: 9px; display: block; }
    .brand-icon img[hidden], .login-brand-icon img[hidden] { display: none !important; }
    .login-brand-name { font-size: 18px; font-weight: 800; color: var(--text); }
    .login-brand-sub  { font-size: 12px; color: var(--text-muted); margin-top: 1px; }
    .login-title { font-size: 22px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
    .login-subtitle { font-size: 13px; color: var(--text-muted); margin-bottom: 28px; }
    .login-field { margin-bottom: 16px; }
    .login-field label { display: block; font-size: 12.5px; font-weight: 600; color: var(--text); margin-bottom: 5px; }
    .login-field input { width: 100%; height: 42px; padding: 0 12px; border: 1px solid var(--border); border-radius: 10px; font-size: 14px; font-family: inherit; color: var(--text); background: #fff; outline: none; box-sizing: border-box; }
    .login-field input:focus { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(249,115,22,0.12); }
    .login-error { background: #FEF2F2; border: 1px solid #FECACA; border-radius: 8px; padding: 10px 12px; font-size: 13px; color: #991B1B; margin-bottom: 16px; display: none; }
    /* GL-10: password recovery from the Desktop sign-in, as in the Staff app */
    .login-forgot-password { display: block; margin: -6px 0 14px auto; padding: 3px 0; border: 0; background: transparent; color: var(--rf-link, #9A4109); font-size: 12px; font-weight: 700; font-family: inherit; cursor: pointer; }
    .login-forgot-password:hover, .login-forgot-password:focus-visible { text-decoration: underline; outline: none; }
    .login-forgot-password:disabled { opacity: .55; cursor: wait; text-decoration: none; }
    .login-error.success { background: #F0FDF4; border-color: #BBF7D0; color: #166534; }
    .login-btn { width: 100%; height: 42px; background: var(--orange); color: #fff; border: none; border-radius: 8px; font-size: 14px; font-weight: 700; font-family: inherit; cursor: pointer; transition: background 0.15s; }
    .login-btn:hover:not(:disabled) { background: #D94F15; }
    .login-btn:disabled { opacity: 0.6; cursor: not-allowed; }
    /* ─── SIDEBAR USER STRIP ─────────────────────── */
    .sidebar-user { padding: 11px 12px; margin: auto 10px 14px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.10); border-radius: 12px; box-shadow:0 8px 20px rgba(0,0,0,0.12); }
    .sidebar-user-email { font-size: 12px; font-weight: 650; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .sidebar-user-role  { font-size: 11px; color: #CBD5E1; margin-top: 2px; }
    .sidebar-logout { width: 100%; margin-top: 8px; padding: 6px 0; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12); border-radius: 8px; font-size: 12px; font-family: inherit; color: #CBD5E1; cursor: pointer; }
    .sidebar-logout:hover { background: rgba(249,115,22,0.14); color: #fff; border-color: rgba(249,115,22,0.35); }
    /* ─── LEGEND BAR ─────────────────────────── */
    .legend-bar { background: #fff; border-bottom: 1px solid var(--border); padding: 9px 28px; display: flex; align-items: center; gap: 18px; flex-shrink: 0; }
    /* ─── PLANNING BOARD FILTER BAR ─────────── */
    #pb-filter-bar { display: none; background: var(--bg); border-bottom: 1px solid var(--border); padding: 10px 28px; flex-shrink: 0; align-items: center; gap: 10px; flex-wrap: wrap; }
    #pb-filter-bar.visible { display: flex; }
    .pb-filter-input { height: 36px; padding: 0 11px; border: 1px solid var(--border); border-radius: 9px; font-size: 12.5px; font-family: inherit; color: var(--text); background: #fff; outline: none; min-width: 0; box-shadow:var(--shadow-sm); }
    .pb-filter-input:focus { border-color: var(--orange); box-shadow: 0 0 0 2px rgba(249,115,22,0.12); }
    .pb-filter-input::placeholder { color: #9CA3AF; }
    #pb-f-plate { width: 200px; }
    #pb-f-brand { width: 150px; }
    #pb-f-status { width: 155px; }
    #pb-f-branch { width: 180px; }
    .pb-filter-clear { height: 36px; padding: 0 13px; border: 1px solid var(--border); border-radius: 9px; font-size: 12px; font-weight:650; font-family: inherit; background: #fff; color: var(--text-muted); cursor: pointer; box-shadow:var(--shadow-sm); }
    .pb-filter-clear:hover { background: #fff; color:var(--text); border-color:#94A3B8; }
    .legend-item { display: flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight:650; color: var(--text-muted); }
    .legend-swatch { width: 24px; height: 10px; border-radius: 999px; border: 1px solid; }
    .legend-swatch.ongoing     { background: #DBEAFE; border-color: #93C5FD; }
    .legend-swatch.overdue     { background: #FEE2E2; border-color: #FCA5A5; }
    .legend-swatch.maintenance { background: #F3F4F6; border-color: #D1D5DB; }
    .legend-swatch.finished    { background: #F0FDF4; border-color: #86EFAC; }
    .legend-hint { margin-left: auto; font-size: 11px; color: var(--text-muted); }

    /* ─── OPS TOOLS PAGE ─────────────────────── */
    #ops-page { display:none; flex:1; flex-direction:column; overflow:hidden; background:var(--bg); }
    #ops-page.open { display:flex; }

    /* ─── Ops Tools redesign (Reports-style tabs) ─── */
    .ops2-header { display:none; background:#fff; border-bottom:1px solid var(--border); padding:8px 28px; align-items:center; gap:12px; flex-shrink:0; }
    .ops2-header.drill-mode { display:flex; }
    .ops2-header-left { display:flex; align-items:center; gap:10px; }
    .ops2-header-title { font-size:20px; font-weight:800; color:var(--text); }
    .ops2-header-sub { font-size:11.5px; color:var(--text-muted); margin-top:2px; }

    .ops2-tab-row { background:var(--bg); border-bottom:1px solid var(--border); padding:14px 28px; display:grid; grid-template-columns:repeat(6,minmax(150px,1fr)); align-items:stretch; gap:10px; flex-shrink:0; overflow-x:auto; }
    .ops2-tab { --ops-card-bg:#fff; --ops-card-accent:var(--orange); --ops-card-icon-bg:#FFF7ED; min-width:150px; min-height:82px; display:grid; grid-template-columns:36px 1fr; grid-template-rows:auto auto; column-gap:10px; row-gap:2px; align-items:center; padding:9px 12px 11px; border:1px solid var(--border); border-top:3px solid var(--ops-card-accent); border-radius:12px; background:var(--ops-card-bg); color:var(--text); cursor:pointer; text-align:left; font-family:inherit; transition:border-color .15s,box-shadow .15s,transform .15s; box-shadow:var(--shadow-sm); outline:none; }
    .ops2-tab:hover { border-color:#94A3B8; box-shadow:0 5px 14px rgba(7,24,32,.08); transform:translateY(-1px); }
    .ops2-tab.active { border-color:var(--orange); border-top-color:var(--ops-card-accent); box-shadow:0 0 0 2px rgba(249,115,22,.12),0 5px 14px rgba(7,24,32,.08); }
    .ops2-tab:focus-visible { box-shadow:0 0 0 3px rgba(249,115,22,.22),0 5px 14px rgba(7,24,32,.08); }
    .ops2-tab svg { grid-row:1 / span 2; width:18px; height:18px; padding:8px; box-sizing:content-box; border-radius:9px; color:var(--ops-card-accent); background:var(--ops-card-icon-bg); }
    .ops2-tab-title { align-self:end; font-size:11px; line-height:1.15; font-weight:700; color:var(--text-muted); white-space:normal; }
    .ops2-tab-value { align-self:start; display:flex; align-items:baseline; gap:6px; min-width:0; }
    .ops2-tab-num { font-size:22px; line-height:1; font-weight:800; color:var(--ops-card-accent); }
    .ops2-tab-meta { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:9.5px; font-weight:650; color:var(--text-muted); }
    .ops-tone-orange { --ops-card-bg:#FFF7ED; --ops-card-accent:#F97316; --ops-card-icon-bg:#FFEDD5; }
    .ops-tone-blue   { --ops-card-bg:#EFF6FF; --ops-card-accent:#2563EB; --ops-card-icon-bg:#DBEAFE; }
    .ops-tone-red    { --ops-card-bg:#FEF2F2; --ops-card-accent:#DC2626; --ops-card-icon-bg:#FEE2E2; }
    .ops-tone-green  { --ops-card-bg:#ECFDF5; --ops-card-accent:#15803D; --ops-card-icon-bg:#D1FAE5; }
    .ops-tone-yellow { --ops-card-bg:#FFFBEB; --ops-card-accent:#D97706; --ops-card-icon-bg:#FEF3C7; }
    .ops-tone-navy   { --ops-card-bg:#F0F4F8; --ops-card-accent:#071820; --ops-card-icon-bg:#E2E8F0; }

    .ops2-content { flex:1; display:flex; flex-direction:column; overflow:hidden; }

    .ops2-filter-bar { background:#fff; border-bottom:1px solid var(--border); padding:10px 28px; display:flex; align-items:center; gap:8px; flex-shrink:0; flex-wrap:wrap; min-height:54px; }
    .ops2-filter-group { display:contents; }
    .ops2-filter-group.hidden { display:none !important; }
    .ops2-tool-title { font-size:14px; font-weight:800; color:var(--text); margin-right:4px; white-space:nowrap; flex-shrink:0; }
    .ops2-fi { padding:7px 10px; border:1.5px solid var(--border); border-radius:7px; font-size:12.5px; font-family:inherit; outline:none; height:34px; background:#fff; color:var(--text); }
    .ops2-fi:focus { border-color:var(--orange); box-shadow:0 0 0 2px rgba(249,115,22,0.1); }
    .ops2-fi-wide { min-width:170px; }
    .ops2-sep { font-size:12px; color:var(--text-muted); flex-shrink:0; }
    .ops2-spacer { flex:1; }

    .ops2-count-bar { padding:7px 28px; font-size:11.5px; color:var(--text-muted); background:#FAFAFA; border-bottom:1px solid #F0F0F0; flex-shrink:0; display:flex; align-items:center; gap:20px; }

    .ops2-body { flex:1; overflow-y:auto; padding:20px 28px; }
    .ops2-results { display:none; flex-direction:column; gap:7px; }
    .ops2-results.ops2-active { display:flex; }

    /* Legacy — still used inside results cards */
    .ops-header { margin-bottom:0; }
    .ops-header-title { font-size:20px; font-weight:800; color:var(--text); }
    .ops-header-sub { font-size:12px; color:var(--text-muted); margin-top:3px; }
    .ops-widget { background:#fff; border-radius:10px; border:1px solid #E5E7EB; box-shadow:0 1px 4px rgba(0,0,0,0.06); overflow:hidden; transition:box-shadow 0.3s,border-color 0.3s; }
    @keyframes ops-highlight { 0%{box-shadow:0 0 0 3px rgba(249,115,22,0.45);border-color:var(--orange);} 70%{box-shadow:0 0 0 6px rgba(249,115,22,0.08);border-color:rgba(249,115,22,0.4);} 100%{box-shadow:0 1px 4px rgba(0,0,0,0.06);border-color:#E5E7EB;} }
    .ops-widget.kpi-flash { animation: ops-highlight 1.6s ease-out forwards; }
    .ops-widget.ops-hidden { display:none !important; }
    .ops-drillback-btn { display:inline-flex; align-items:center; gap:5px; padding:5px 12px; background:#fff; border:1px solid #D1D5DB; border-radius:6px; font-size:12px; font-weight:600; color:#374151; cursor:pointer; transition:background .15s,border-color .15s; white-space:nowrap; flex-shrink:0; }
    .ops-drillback-btn:hover { background:#F9FAFB; border-color:#9CA3AF; }
    .ops-drillback-btn svg { flex-shrink:0; }
    .ops-widget-header { display:flex; align-items:center; gap:8px; padding:12px 14px; border-bottom:1px solid #F0F0F0; background:#FAFAFA; }
    .ops-widget-icon { width:28px; height:28px; border-radius:7px; display:flex; align-items:center; justify-content:center; background:#F3F4F6; flex-shrink:0; }
    .ops-widget-icon svg { width:14px; height:14px; color:var(--orange); stroke:var(--orange); }
    .ops-widget-title { font-size:13px; font-weight:700; color:var(--text); flex:1; }
    .ops-widget-actions { display:flex; gap:4px; margin-left:auto; }
    .ops-widget-btn { width:24px; height:24px; border:none; background:none; cursor:pointer; border-radius:5px; display:flex; align-items:center; justify-content:center; color:#9CA3AF; transition:background .15s; }
    .ops-widget-btn:hover { background:#F3F4F6; color:#4B5563; }
    .ops-widget-btn svg { width:13px; height:13px; }
    .ops-filters { padding:10px 14px 12px; border-bottom:1px solid #FDDCB5; border-top:2px solid #F97316; display:flex; flex-wrap:wrap; gap:7px; background:linear-gradient(to bottom,#FFF8F2,#FFF4EC); box-shadow:0 2px 6px rgba(249,115,22,0.06) inset; }
    .ops-filter { display:flex; flex-direction:column; gap:2px; }
    .ops-filter label { font-size:10px; font-weight:600; color:#A36130; text-transform:uppercase; letter-spacing:0.4px; }
    .ops-filter input, .ops-filter select { height:28px; border:1px solid #F0D0B4; border-radius:6px; padding:0 8px; font-size:12px; font-family:inherit; color:var(--text); background:#fff; outline:none; min-width:120px; box-shadow:0 1px 3px rgba(0,0,0,0.05); }
    .ops-filter input:focus, .ops-filter select:focus { border-color:var(--orange); box-shadow:0 0 0 2px rgba(249,115,22,0.12); }
    .ops-filter-wide input, .ops-filter-wide select { min-width:160px; }
    .ops-results { padding:10px 14px; display:flex; flex-direction:column; gap:7px; min-height:80px; max-height:420px; overflow-y:auto; }
    .ops-empty { text-align:center; padding:28px 0; color:#9CA3AF; font-size:12.5px; }
    .ops-empty svg { width:28px; height:28px; margin:0 auto 8px; display:block; opacity:0.4; }
    .ops-card { background:#F8F9FA; border:1px solid #EEEFF2; border-radius:8px; padding:10px 12px; border-left:3px solid #D1D5DB; display:flex; flex-direction:column; gap:5px; position:relative; }
    .ops-card.oc-ongoing { border-left-color:#93C5FD; }
    .ops-card.oc-upcoming { border-left-color:#C4B5FD; }
    .ops-card.oc-overdue { border-left-color:#FCA5A5; }
    .ops-card.oc-finished { border-left-color:#86EFAC; }
    .ops-card.oc-available { border-left-color:var(--orange); }
    .ops-card-top { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
    .ops-card-name { font-size:13px; font-weight:700; color:var(--text); }
    .ops-card-phone { font-size:11px; color:var(--text-muted); margin-top:1px; }
    .ops-card-badge { display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:20px; font-size:10px; font-weight:700; flex-shrink:0; }
    .ops-card-badge.b-ongoing  { background:#DBEAFE; color:#1E40AF; }
    .ops-card-badge.b-upcoming { background:#F3E8FF; color:#6B21A8; }
    .ops-card-badge.b-overdue  { background:#FEE2E2; color:#991B1B; }
    .ops-card-badge.b-finished { background:#F0FDF4; color:#15803D; }
    .ops-card-badge.b-available{ background:#FFF7ED; color:#9A3412; }
    .ops-card-meta { display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:2px; }
    .ops-meta-item { display:flex; flex-direction:column; gap:1px; }
    .ops-meta-label { font-size:9.5px; font-weight:600; color:#9CA3AF; text-transform:uppercase; letter-spacing:0.3px; }
    .ops-meta-value { font-size:11.5px; color:var(--text); font-weight:500; }
    .ops-meta-value.red { color:#DC2626; font-weight:700; }
    .ops-meta-value.green { color:#15803D; font-weight:700; }
    .ops-meta-value.orange { color:#F97316; font-weight:700; }
    .ops-meta-value.overdue-flag { color:#DC2626; display:flex; align-items:center; gap:4px; }
    .ops-card-footer { display:flex; align-items:center; justify-content:space-between; margin-top:3px; flex-wrap:wrap; gap:6px; }
    .ops-card-vehicle { font-size:11px; color:#4B5563; font-weight:600; background:#F3F4F6; padding:2px 8px; border-radius:5px; display:inline-flex; align-items:center; gap:4px; }
    .ops-card-btn { height:26px; padding:0 10px; font-size:11px; border-radius:6px; border:1px solid var(--orange); background:#fff; color:var(--orange); font-weight:700; cursor:pointer; font-family:inherit; transition:background .15s; }
    .ops-card-btn:hover { background:var(--orange); color:#fff; }
    .ops-count-bar { padding:6px 14px 0; font-size:11px; color:#9CA3AF; border-top:1px solid #F0F0F0; display:flex; align-items:center; justify-content:space-between; }
    .ops-card { cursor:pointer; transition:box-shadow .15s; }
    .ops-card:hover { box-shadow:0 2px 10px rgba(0,0,0,0.09); }
    .ops-card-actions { display:flex; flex-wrap:wrap; gap:4px; margin-top:6px; padding-top:6px; border-top:1px solid #E9EAEC; }
    .ops-act-btn { height:24px; padding:0 9px; font-size:11px; border-radius:5px; border:1px solid #D1D5DB; background:#fff; color:#374151; font-weight:600; cursor:pointer; font-family:inherit; transition:background .12s,border-color .12s; white-space:nowrap; }
    .ops-act-btn:hover { background:#F3F4F6; border-color:#9CA3AF; }
    .ops-act-btn.act-primary { border-color:var(--orange); color:var(--orange); }
    .ops-act-btn.act-primary:hover { background:#FFF7ED; }
    .ops-act-btn.act-danger { border-color:#FCA5A5; color:#DC2626; }
    .ops-act-btn.act-danger:hover { background:#FEF2F2; }
    .ops-act-btn.act-open { background:#E2E8F0; border-color:#CBD5E1; color:#071820; }
    .ops-act-btn.act-open:hover { background:#CBD5E1; border-color:#94A3B8; }
    .ops-act-btn.act-edit { background:#EFF6FF; border-color:#BFDBFE; color:#1D4ED8; }
    .ops-act-btn.act-edit:hover { background:#DBEAFE; border-color:#93C5FD; }
    .ops-act-btn.act-payment { background:#ECFDF5; border-color:#A7F3D0; color:#15803D; }
    .ops-act-btn.act-payment:hover { background:#D1FAE5; border-color:#6EE7B7; }
    .ops-act-btn.act-print { background:#F8FAFC; border-color:#CBD5E1; color:#475569; }
    .ops-act-btn.act-print:hover { background:#F1F5F9; border-color:#94A3B8; }
    .ops-act-btn.act-invoice { background:#FFFBEB; border-color:#FDE68A; color:#92400E; }
    .ops-act-btn.act-invoice:hover { background:#FEF3C7; border-color:#FCD34D; }
    .ops-act-btn.act-return { background:#F97316; border-color:#F97316; color:#FFFFFF; }
    .ops-act-btn.act-return:hover { background:#EA580C; border-color:#EA580C; color:#FFFFFF; }
    .ops-card.ops-card-static { cursor:default; }
    /* ─── VEHICLE DETAIL POPUP ─── */
    #veh-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.4); z-index:1400; display:none; }
    #veh-overlay.open { display:block; }
    .veh-popup { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); background:#fff; border:1px solid var(--border); border-radius:14px; box-shadow:0 16px 60px rgba(0,0,0,0.22); width:360px; z-index:1500; overflow:hidden; display:none; }
    .veh-popup.open { display:block; }
    .veh-popup-header { padding:14px 18px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
    .veh-popup-title { font-size:15px; font-weight:800; }
    .veh-popup-plate { font-size:11px; color:var(--text-muted); margin-top:2px; }
    .veh-popup-body { padding:16px 18px; display:flex; flex-direction:column; gap:8px; }
    .veh-info-row { display:flex; justify-content:space-between; align-items:center; font-size:12.5px; padding:5px 0; border-bottom:1px solid #F5F5F5; }
    .veh-info-row:last-child { border-bottom:none; }
    .veh-info-label { color:#6B7280; font-weight:500; }
    .veh-info-val { font-weight:700; color:var(--text); }
    .veh-popup-footer { padding:12px 18px; border-top:1px solid var(--border); display:flex; justify-content:flex-end; gap:8px; }
    /* ─── UPDATE PAYMENT POPUP ─── */
    #upay-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.45); z-index:1400; display:none; }
    #upay-overlay.open { display:block; }
    .upay-popup { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); background:#fff; border:1px solid var(--border); border-radius:14px; box-shadow:0 16px 60px rgba(0,0,0,0.25); width:420px; z-index:1500; overflow:hidden; display:none; }
    .upay-popup.open { display:block; }
    .upay-header { padding:14px 18px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
    .upay-title { font-size:14px; font-weight:700; }
    .upay-body { padding:16px 18px; display:flex; flex-direction:column; gap:12px; }
    .upay-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
    .upay-field { display:flex; flex-direction:column; gap:4px; }
    .upay-label { font-size:11px; font-weight:600; color:#6B7280; }
    .upay-input { height:34px; border:1px solid #D1D5DB; border-radius:7px; padding:0 10px; font-size:13px; font-family:inherit; outline:none; }
    .upay-input:focus { border-color:var(--orange); }
    .upay-input[readonly] { background:#F9FAFB; color:#374151; }
    .upay-divider { border:none; border-top:1px solid #F0F0F0; margin:2px 0; }
    .upay-result { background:#F9FAFB; border-radius:8px; padding:10px 12px; display:flex; flex-direction:column; gap:5px; }
    .upay-result-row { display:flex; justify-content:space-between; font-size:12.5px; }
    .upay-result-row .upay-rlabel { color:#6B7280; }
    .upay-result-row .upay-rval { font-weight:700; }
    .upay-result-row .upay-rval.red { color:#DC2626; }
    .upay-result-row .upay-rval.green { color:#15803D; }
    .upay-result-row .upay-rval.orange { color:#F97316; }
    .upay-footer { padding:12px 18px; border-top:1px solid var(--border); display:flex; gap:8px; justify-content:flex-end; }

    /* ─── BOOKING PAYMENT HISTORY ─── */
    #bk-pay-history-wrap { margin-top:2px; }
    .bk-pay-hist-hd { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
    .bk-pay-hist-title { font-size:12px; font-weight:700; color:#374151; text-transform:uppercase; letter-spacing:0.4px; }
    .bk-pay-hist-row { display:grid; grid-template-columns:90px 90px 1fr 1fr 28px; gap:6px; align-items:center; padding:7px 10px; background:#F9FAFB; border:1px solid #E5E7EB; border-radius:7px; margin-bottom:5px; font-size:12px; }
    .bk-pay-hist-date { color:#6B7280; font-weight:500; }
    .bk-pay-hist-amount { font-weight:700; color:#15803D; }
    .bk-pay-hist-method { color:#374151; }
    .bk-pay-hist-ref { color:#6B7280; font-style:italic; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .bk-pay-del-btn { background:none; border:none; color:#9CA3AF; font-size:14px; cursor:pointer; padding:0; width:24px; height:24px; border-radius:4px; display:flex; align-items:center; justify-content:center; }
    .bk-pay-del-btn:hover { background:#FEE2E2; color:#DC2626; }
    .bk-pay-empty { text-align:center; padding:14px; color:#9CA3AF; font-size:12.5px; background:#F9FAFB; border:1px dashed #E5E7EB; border-radius:7px; }
    .bk-pay-total-row { display:flex; justify-content:space-between; align-items:center; padding:7px 10px; background:#EFF6FF; border:1px solid #BFDBFE; border-radius:7px; font-size:12.5px; font-weight:700; color:#1D4ED8; margin-top:4px; }

    /* ─── DASHBOARD PAGE ──────────────────────── */
    #dashboard-page { display:none; flex:1; overflow-y:auto; background:var(--bg); flex-direction:column; }
    /* ─── DASHBOARD ─────────────────────────────────────────── */
    .dash-hdr { background:#F8FAFC; border-bottom:1px solid var(--border); padding:11px 28px; display:flex; align-items:center; gap:16px; flex-shrink:0; flex-wrap:wrap; }
    .dash-hdr-title { display:none; }
    .dash-hdr-date { font-size:12.5px; font-weight:600; color:var(--text-muted); flex:1; }
    .dash-hdr-actions { display:flex; gap:8px; flex-wrap:wrap; margin-left:auto; }
    .dash-body { padding:24px 28px 32px; display:flex; flex-direction:column; gap:20px; overflow-y:auto; }

    /* KPI Action Cards */
    .dash-kpi-row { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; }
    .dash-kpi { --dash-kpi-bg:#FFFFFF; --dash-kpi-accent:#64748B; --dash-kpi-icon-bg:#F1F5F9; position:relative; overflow:hidden; min-height:90px; background:var(--dash-kpi-bg); border-radius:12px; padding:12px 12px 10px; display:flex; flex-direction:column; gap:5px; box-shadow:var(--shadow-sm); cursor:pointer; transition:box-shadow 0.18s ease,transform 0.16s ease,border-color 0.16s ease,filter 0.16s ease; border:1px solid #E2E8F0; }
    .dash-kpi.kpi-orange { --dash-kpi-bg:#FFF7ED; --dash-kpi-accent:#F97316; --dash-kpi-icon-bg:#FFEDD5; }
    .dash-kpi.kpi-blue   { --dash-kpi-bg:#EFF6FF; --dash-kpi-accent:#2563EB; --dash-kpi-icon-bg:#DBEAFE; }
    .dash-kpi.kpi-red    { --dash-kpi-bg:#FEF2F2; --dash-kpi-accent:#DC2626; --dash-kpi-icon-bg:#FEE2E2; }
    .dash-kpi.kpi-green  { --dash-kpi-bg:#ECFDF5; --dash-kpi-accent:#15803D; --dash-kpi-icon-bg:#D1FAE5; }
    .dash-kpi.kpi-purple { --dash-kpi-bg:#F5F3FF; --dash-kpi-accent:#7C3AED; --dash-kpi-icon-bg:#EDE9FE; }
    .dash-kpi.kpi-yellow { --dash-kpi-bg:#FFFBEB; --dash-kpi-accent:#D97706; --dash-kpi-icon-bg:#FEF3C7; }
    .dash-kpi.kpi-teal   { --dash-kpi-bg:#F0FDFA; --dash-kpi-accent:#0F766E; --dash-kpi-icon-bg:#CCFBF1; }
    .dash-kpi::before { content:''; position:absolute; left:0; right:0; top:0; height:3px; background:var(--dash-kpi-accent); }
    .dash-kpi:hover { box-shadow:0 10px 26px rgba(7,24,32,0.11); transform:translateY(-2px); }
    .dash-kpi:active { transform:translateY(0); box-shadow:var(--shadow-sm); }
    .dash-kpi-icon { width:30px; height:30px; border-radius:8px; display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--dash-kpi-accent); background:var(--dash-kpi-icon-bg); border:1px solid rgba(203,213,225,0.55); }
    .dash-kpi-icon svg { width:16px; height:16px; }
    .dash-kpi:hover.kpi-orange { border-color:rgba(249,115,22,0.25); }
    .dash-kpi:hover.kpi-red    { border-color:rgba(220,38,38,0.2); }
    .dash-kpi:hover.kpi-blue   { border-color:rgba(37,99,235,0.2); }
    .dash-kpi:hover.kpi-green  { border-color:rgba(5,150,105,0.2); }
    .dash-kpi-num { font-size:24px; font-weight:820; line-height:1; color:var(--dash-kpi-accent); letter-spacing:-0.6px; }
    .dash-kpi:hover.kpi-teal   { border-color:rgba(13,148,136,0.25); }
    .dash-kpi-label { font-size:10.5px; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.4px; line-height:1.25; }

    /* Quick Action Buttons */
    .dash-actions-row { display:flex; gap:10px; flex-wrap:wrap; }
    /* Release F #2 / D1: Dashboard "Customize" panel */
    .dash-card-hidden, .dash-kpi-row.dash-row-empty { display:none !important; }
    /* flex:none: the panel sits in the dashboard's flex column and .rf-card sets overflow:hidden, so without it the
       column squeezed the open panel to a 30 px strip (Release I2, found in the release 18 staging UAT). */
    .dash-cz { flex:none; margin:0 0 14px; padding:14px 16px; display:flex; flex-direction:column; gap:10px; border:1px solid var(--rf-line-2, var(--border)); border-radius:12px; background:var(--rf-panel, #fff); color:var(--rf-head, var(--text)); }
    .dash-cz-head { display:flex; gap:12px; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; }
    .dash-cz-head strong { display:block; font-size:14px; }
    .dash-cz-head span { display:block; font-size:12px; color:var(--rf-muted, var(--text-muted)); margin-top:2px; max-width:640px; }
    .dash-cz-acts { display:flex; gap:8px; flex-wrap:wrap; }
    .dash-cz-list { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr)); gap:6px; }
    .dash-cz-item { display:flex; align-items:center; gap:6px; min-width:0; padding:6px 6px 6px 8px; border:1px solid var(--rf-line-2, var(--border)); border-radius:9px; background:var(--rf-panel-2, #fff); cursor:grab; }
    .dash-cz-item.is-hidden .dash-cz-name { opacity:.55; }
    .dash-cz-item.is-dragging { opacity:.5; }
    .dash-cz-grip { color:var(--text-muted); letter-spacing:-2px; user-select:none; }
    .dash-cz-name { flex:1; min-width:0; font-size:12.5px; font-weight:600; line-height:1.35; white-space:normal; overflow-wrap:anywhere; }
    .dash-cz-name em { font-style:normal; font-size:10.5px; font-weight:700; padding:1px 6px; border-radius:10px; margin-left:4px; display:inline-block; white-space:nowrap; }
    .dash-cz-key { background:#FEF3C7; color:#92400E; }
    .dash-cz-off { background:#F1F5F9; color:#475569; }
    .dash-cz-btn { width:32px; height:32px; flex:none; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--rf-line-2, var(--border)); border-radius:8px; background:var(--rf-panel, #fff); color:var(--rf-head, var(--text)); cursor:pointer; padding:0; }
    .dash-cz-btn svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
    .dash-cz-btn[disabled] { opacity:.35; cursor:default; }
    .dash-cz-btn:focus-visible { outline:3px solid rgba(249,115,22,.35); outline-offset:1px; }
    .dash-cz-lock { cursor:default; color:var(--text-muted); border-style:dashed; }
    .dash-cz-note { margin:0; font-size:11.5px; color:var(--text-muted); }
    .dash-action-btn { min-height:36px; display:inline-flex; align-items:center; gap:7px; padding:8px 14px; border-radius:9px; font-size:12.5px; font-weight:650; cursor:pointer; border:1px solid var(--border); background:#fff; color:var(--text); transition:all 0.15s ease; white-space:nowrap; box-shadow:var(--shadow-sm); }
    .dash-action-btn:hover { background:#fff; border-color:#94A3B8; transform:translateY(-1px); }
    .dash-action-btn.primary { background:var(--orange); color:#fff; border-color:var(--orange); }
    .dash-action-btn.primary:hover { background:var(--orange-dark); border-color:var(--orange-dark); }

    /* Mid-row panels */
    .dash-mid-row { display:grid; grid-template-columns:1.25fr 0.9fr 1.1fr; gap:16px; }
    .dash-panel { background:#fff; border:1px solid #E2E8F0; border-radius:14px; box-shadow:var(--shadow-sm); overflow:hidden; }
    .dash-panel-hdr { min-height:45px; padding:12px 16px; border-bottom:1px solid #E2E8F0; display:flex; align-items:center; background:#F8FAFC; }
    .dash-panel-title { font-size:13px; font-weight:750; flex:1; color:var(--text); }
    .dash-lookup-body { padding:12px 14px; display:flex; flex-direction:column; gap:8px; }
    .dash-lookup-row { display:flex; gap:7px; }
    .dash-lookup-input { flex:1; height:38px; border:1px solid var(--border); border-radius:9px; padding:0 11px; font-size:13px; outline:none; min-width:0; }
    .dash-lookup-input:focus { border-color:var(--orange); box-shadow:0 0 0 3px rgba(249,115,22,0.10); }
    .dash-lookup-btn { height:38px; padding:0 14px; background:var(--orange); color:#fff; border:none; border-radius:9px; font-size:12.5px; font-weight:700; cursor:pointer; flex-shrink:0; }
    .dash-lookup-btn:hover { background:var(--orange-dark); }
    .dash-lookup-result { font-size:12px; color:var(--text-muted); display:flex; flex-direction:column; gap:5px; }
    .dash-lookup-hit { background:#F9FAFB; border:1px solid var(--border); border-radius:7px; padding:8px 11px; cursor:pointer; }
    .dash-lookup-hit:hover { background:#FFF0E6; border-color:var(--orange); }
    .dash-lookup-hit-name { font-size:12.5px; font-weight:700; color:var(--text); }
    .dash-lookup-hit-sub { font-size:11px; color:var(--text-muted); margin-top:1px; }

    /* Vehicle Status panel */
    .dash-vstatus-body { padding:14px; display:flex; flex-direction:column; gap:9px; }
    .dash-vstatus-row { display:flex; align-items:center; gap:9px; }
    .dash-vstatus-dot { width:9px; height:9px; border-radius:50%; flex-shrink:0; }
    .dash-vstatus-label { font-size:12.5px; color:var(--text-muted); flex:1; }
    .dash-vstatus-val { font-size:15px; font-weight:700; }
    .dot-green { background:#22C55E; } .dot-orange { background:var(--orange); }
    .dot-red { background:#DC2626; } .dot-grey { background:#9CA3AF; }

    /* Quick Close */
    .dash-close-body { padding:12px 14px; display:flex; flex-direction:column; gap:8px; }
    .dash-close-input { height:38px; border:1px solid var(--border); border-radius:9px; padding:0 11px; font-size:13px; outline:none; width:100%; box-sizing:border-box; }
    .dash-close-input:focus { border-color:var(--orange); box-shadow:0 0 0 3px rgba(249,115,22,0.10); }
    .dash-close-btn { width:100%; height:38px; background:var(--orange); color:#fff; border:none; border-radius:9px; font-size:12.5px; font-weight:700; cursor:pointer; }
    .dash-close-btn:hover { background:var(--orange-dark); }
    .dash-close-result { font-size:12px; color:var(--text-muted); }

    /* Daily Attention sections */
    .dash-attention-row { display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; }
    .dash-section { background:#fff; border:1px solid #E2E8F0; border-radius:14px; box-shadow:var(--shadow-sm); overflow:hidden; }
    .dash-sec-hdr { min-height:45px; padding:12px 14px; border-bottom:1px solid #E2E8F0; display:flex; align-items:center; gap:8px; background:#F8FAFC; }
    .dash-sec-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
    .dash-sec-title { font-size:13px; font-weight:750; flex:1; }
    .dash-sec-link { font-size:12px; color:var(--orange); text-decoration:none; cursor:pointer; flex-shrink:0; }
    .dash-sec-link:hover { text-decoration:underline; }
    .dash-item { padding:11px 14px; border-bottom:1px solid #E2E8F0; display:flex; flex-direction:column; gap:3px; transition:background 0.15s ease; }
    .dash-item:hover { background:#F8FAFC; }
    .dash-item:last-child { border-bottom:none; }
    .dash-item-main { display:flex; align-items:center; gap:8px; }
    .dash-item-name { font-size:13px; font-weight:600; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .dash-item-badge { font-size:10px; font-weight:700; padding:2px 7px; border-radius:20px; white-space:nowrap; flex-shrink:0; }
    .badge-due   { background:#FEF3C7; color:#92400E; }
    .badge-refund{ background:#ECFDF5; color:#065F46; }
    .badge-paid  { background:#D1FAE5; color:#065F46; }
    .badge-over  { background:#FEE2E2; color:#991B1B; }
    .dash-item-sub { font-size:11px; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .dash-item-actions { display:flex; gap:6px; margin-top:4px; }
    .dash-btn { font-size:11px; font-weight:650; padding:4px 10px; border-radius:7px; border:1px solid var(--border); background:#fff; cursor:pointer; }
    .dash-btn:hover { background:#F9FAFB; }
    .dash-btn-orange { background:var(--orange); color:#fff; border-color:var(--orange); }
    .dash-btn-orange:hover { background:var(--orange-dark); }

    @media (max-width: 1200px) {
      .dash-kpi-row { grid-template-columns:repeat(3,minmax(0,1fr)); }
      .dash-mid-row, .dash-attention-row { grid-template-columns:1fr 1fr; }
    }
    @media (max-width: 760px) {
      .dash-body { padding:16px 14px 24px; }
      .dash-hdr { padding:10px 14px; }
      .dash-kpi-row { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
      .dash-mid-row, .dash-attention-row { grid-template-columns:1fr; }
      .dash-kpi { min-height:88px; }
    }
    .dash-empty { padding:22px 14px; text-align:center; font-size:13px; color:#9CA3AF; }

    /* ─── NOTIFICATIONS PAGE ───────────────────── */
    #notif-page { display:none; flex:1; overflow-y:auto; background:var(--bg); flex-direction:column; }
    #notif-page.open { display:flex; }
    .notif-header { background:transparent; padding:16px 24px 0; display:flex; align-items:center; gap:8px; flex-shrink:0; }
    .notif-header .btn { height:34px; border-radius:9px; background:#fff; box-shadow:var(--shadow-sm); }
    .notif-header .btn:hover { color:var(--orange); border-color:var(--orange); background:#FFF7ED; }
    .notif-filters { background:#fff; border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow-sm); margin:12px 24px 0; padding:10px 12px; display:flex; flex-wrap:wrap; gap:8px; align-items:center; flex-shrink:0; }
    .notif-filter-sel { height:34px; min-width:150px; border:1px solid var(--border); border-radius:9px; padding:0 32px 0 11px; font-size:12px; font-family:inherit; color:var(--text); background:#fff; outline:none; }
    .notif-filter-sel:focus { border-color:var(--orange); box-shadow:0 0 0 3px rgba(249,115,22,.10); }
    .notif-filters .btn { height:34px; border-radius:9px; color:#fff; background:var(--black); border-color:var(--black); }
    .notif-filters .btn:hover { background:var(--orange); border-color:var(--orange); }
    .notif-summary { margin:9px 24px 0; padding:0 2px; background:transparent; border:0; font-size:12px; color:var(--text-muted); }
    .notif-summary strong { color:var(--orange); }
    .notif-body { flex:1; padding:12px 24px 26px; overflow-y:auto; }
    .notif-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; gap:12px; width:100%; max-width:none; }
    .notif-card { --notif-accent:#64748B; --notif-tint:#F8FAFC; position:relative; overflow:hidden; min-height:124px; background:linear-gradient(135deg,var(--notif-tint) 0%,#fff 42%); border:1px solid var(--border); border-top:3px solid var(--notif-accent); border-radius:14px; padding:16px; display:flex; align-items:flex-start; gap:13px; box-shadow:0 5px 16px rgba(7,24,32,.055); transition:transform .16s ease,box-shadow .16s ease,opacity .2s; }
    .notif-card:hover { transform:translateY(-1px); box-shadow:0 10px 24px rgba(7,24,32,.09); }
    .notif-card:not(.is-read)::after { content:''; position:absolute; top:13px; right:13px; width:7px; height:7px; border-radius:50%; background:var(--notif-accent); box-shadow:0 0 0 3px #fff; }
    .notif-card.nt-overdue  { --notif-accent:#DC2626; --notif-tint:#FEF2F2; }
    .notif-card.nt-dropoff  { --notif-accent:#2563EB; --notif-tint:#EFF6FF; }
    .notif-card.nt-balance  { --notif-accent:#F97316; --notif-tint:#FFF7ED; }
    .notif-card.nt-refund   { --notif-accent:#7C3AED; --notif-tint:#F5F3FF; }
    .notif-card.nt-exp-soon { --notif-accent:#D97706; --notif-tint:#FFFBEB; }
    .notif-card.nt-expired  { --notif-accent:#DC2626; --notif-tint:#FEF2F2; }
    .notif-card.nt-sambung-due { --notif-accent:#7C3AED; --notif-tint:#F5F3FF; }
    .notif-card.nt-takeback { --notif-accent:#EA580C; --notif-tint:#FFF7ED; }
    .notif-card.is-read { opacity:.62; background:#fff; box-shadow:none; }
    .notif-icon { width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--notif-accent); background:var(--notif-tint); border:1px solid color-mix(in srgb,var(--notif-accent) 18%,transparent); }
    .notif-icon svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
    .notif-content { flex:1; min-width:0; }
    .notif-type { font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.65px; color:var(--notif-accent); margin-bottom:3px; }
    .notif-title { font-size:14px; font-weight:750; color:var(--black); margin-bottom:4px; padding-right:12px; }
    .notif-sub { font-size:12.5px; line-height:1.45; color:var(--text-muted); }
    /* Release F #10 / D5: customer, car and agreement-number links on alerts (page and bell) */
    .notif-refs, .rf-bell-refs { display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; margin:0 0 4px; font-size:12px; }
    .notif-ref-link, .rf-bell-ref { appearance:none; border:0; background:none; padding:0; margin:0; font:inherit; color:var(--rf-link,#7A5C00); font-weight:650; text-align:left; cursor:pointer; text-decoration:underline; text-decoration-color:transparent; text-underline-offset:2px; overflow-wrap:anywhere; }
    .notif-ref-link:hover, .notif-ref-link:focus-visible, .rf-bell-ref:hover, .rf-bell-ref:focus-visible { text-decoration-color:currentColor; }
    .notif-title-link, .rf-bell-title-link { font-weight:inherit; color:inherit; }
    .notif-ref-no, .rf-bell-ref-no { color:var(--text-muted); font-weight:650; }
    .notif-meta { display:flex; align-items:center; gap:8px; margin-top:6px; flex-wrap:wrap; }
    .notif-pill { display:inline-block; padding:2px 9px; border-radius:10px; font-size:11px; font-weight:600; }
    .np-red    { background:#FEE2E2; color:#991B1B; }
    .np-orange { background:#FFF7ED; color:#C2410C; }
    .np-blue   { background:#DBEAFE; color:#1E40AF; }
    .np-purple { background:#F3E8FF; color:#6D28D9; }
    .np-yellow { background:#FEF3C7; color:#92400E; }
    .np-grey   { background:#F3F4F6; color:#6B7280; }
    .notif-actions { display:flex; flex-direction:column; gap:7px; align-items:flex-end; flex-shrink:0; padding-top:13px; }
    .notif-act-btn { height:30px; padding:0 11px; font-size:11px; border-radius:8px; border:1px solid var(--black); background:var(--black); color:#fff; font-weight:700; font-family:inherit; cursor:pointer; white-space:nowrap; }
    .notif-act-btn:hover { border-color:var(--orange); background:var(--orange); color:#fff; }
    .notif-read-btn { width:30px; height:30px; border-radius:8px; border:1px solid var(--border); background:#fff; color:var(--text-muted); cursor:pointer; font-size:13px; display:flex; align-items:center; justify-content:center; }
    .notif-read-btn:hover { color:var(--orange); border-color:var(--orange); background:#FFF7ED; }
    .notif-empty { text-align:center; padding:60px 28px; color:#9CA3AF; font-size:14px; }
    .notif-badge-count { background:#DC2626; color:#fff; font-size:10px; font-weight:700; padding:1px 6px; border-radius:10px; margin-left:auto; }
    @media (max-width:1100px) { .notif-list { grid-template-columns:1fr; } }
    @media (max-width:640px) {
      .notif-header { padding:12px 14px 0; }
      .notif-filters { margin:10px 14px 0; }
      .notif-filter-sel { flex:1; min-width:125px; }
      .notif-summary { margin-left:14px; margin-right:14px; }
      .notif-body { padding:10px 14px 20px; }
      .notif-card { padding:13px; gap:10px; }
      .notif-actions { padding-top:16px; }
    }

    /* ─── VEHICLES PAGE ────────────────────────── */
    #vehicles-page { display:none; flex:1; overflow:hidden; background:var(--bg); flex-direction:column; }
    #vehicles-page.open { display:flex; }
    .vdb-tabs { display:flex; align-items:center; background:#fff; border-bottom:1px solid var(--border); flex-shrink:0; padding-right:28px; }
    .vdb-tab { padding:11px 20px; font-size:13px; font-weight:600; color:var(--text-muted); cursor:pointer; border-bottom:2px solid transparent; transition:all 0.12s; }
    .vdb-tab.active { color:var(--orange); border-bottom-color:var(--orange); }
    .vdb-tab:hover:not(.active) { color:var(--text); background:#F9FAFB; }
    #vdb-hdr-actions { margin-left:auto; display:flex; align-items:center; }
    #vdb-hdr-actions .btn { padding-top:7px; padding-bottom:7px; }
    /* service history panel */
    #svc-panel, #vim-finance-panel { display:none; flex:1; overflow:hidden; flex-direction:column; }
    #svc-panel.open, #vim-finance-panel.open { display:flex; }
    .svc-toolbar { background:#fff; border-bottom:1px solid var(--border); padding:10px 24px; display:flex; flex-wrap:wrap; gap:8px; align-items:flex-end; flex-shrink:0; }
    .svc-fg { display:flex; flex-direction:column; gap:3px; }
    .svc-fg label { font-size:10px; font-weight:600; color:#6B7280; text-transform:uppercase; letter-spacing:0.4px; }
    .svc-fg input, .svc-fg select { height:32px; border:1px solid var(--border); border-radius:6px; padding:0 10px; font-size:12px; outline:none; }
    .svc-fg input:focus, .svc-fg select:focus { border-color:var(--orange); }
    .svc-summary { padding:8px 24px; background:#FFF8F2; border-bottom:1px solid #FDDCB5; font-size:13px; color:#6B7280; flex-shrink:0; }
    .svc-summary strong { color:var(--orange); }
    .svc-body { flex:1; padding:16px 24px; overflow-y:auto; background:#F4F5F7; }
    .svc-reminder { background:#FEF3C7; border:1px solid #FDE68A; border-radius:8px; padding:10px 14px; margin-bottom:12px; font-size:13px; color:#92400E; }
    .svc-table-wrap { background:#fff; border-radius:12px; border:1px solid #DCE4EB; overflow:hidden; box-shadow:var(--shadow-sm); }
    .svc-table { width:100%; border-collapse:collapse; font-size:13px; }
    .svc-table th { background:#F8FAFC; padding:11px 14px; text-align:left; font-size:10.5px; font-weight:750; text-transform:uppercase; letter-spacing:0.5px; color:var(--text-muted); border-bottom:1px solid #CBD5E1; white-space:nowrap; }
    .svc-table td { padding:11px 14px; border-bottom:1px solid #E8EDF2; vertical-align:middle; }
    .svc-table tr:last-child td { border-bottom:none; }
    .svc-table tr:hover td { background:#FFF8F2; }
    .svc-type-pill { display:inline-block; padding:2px 8px; border-radius:10px; font-size:11px; font-weight:600; background:#F3F4F6; color:#374151; white-space:nowrap; }
    .svc-stat-pill { display:inline-block; padding:2px 9px; border-radius:10px; font-size:11px; font-weight:600; }
    .sv-completed   { background:#F0FDF4; color:#15803D; }
    .sv-scheduled   { background:#DBEAFE; color:#1E40AF; }
    .sv-in-progress { background:#FEF3C7; color:#92400E; }
    .sv-upcoming    { background:#DBEAFE; color:#1E40AF; }
    .sv-overdue     { background:#FEE2E2; color:#991B1B; }
    .svc-act-btn { height:26px; padding:0 10px; font-size:11px; border-radius:5px; border:1px solid var(--border); background:#fff; color:#374151; font-weight:600; cursor:pointer; }
    /* Service Reminder status badges */
    .svr-due  { background:#FEE2E2; color:#991B1B; }
    .svr-soon { background:#FEF3C7; color:#92400E; }
    .svr-ok   { background:#F0FDF4; color:#15803D; }
    .svr-none { background:#F3F4F6; color:#6B7280; }
    .svc-act-btn:hover { border-color:#9CA3AF; }
    .svc-act-btn.del { color:#DC2626; border-color:#FECACA; }
    .svc-act-btn.del:hover { background:#FEF2F2; }
    /* service modal */
    #svc-modal-overlay, #msd-modal-overlay, #gps-modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.45); z-index:2000; }
    #svc-modal-overlay.open, #msd-modal-overlay.open { display:flex; align-items:center; justify-content:center; }
    #svc-modal, .svc-modal-shell { background:#fff; border-radius:12px; width:580px; max-height:90vh; overflow-y:auto; box-shadow:0 8px 32px rgba(0,0,0,0.18); }
    .svc-mhdr { padding:16px 22px 12px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; background:#fff; z-index:1; }
    .svc-mtitle { font-size:16px; font-weight:700; }
    .svc-mbody { padding:18px 22px; display:grid; grid-template-columns:1fr 1fr; gap:12px; }
    .svc-mbody .full { grid-column:1/-1; }
    .svc-mf { display:flex; flex-direction:column; gap:3px; }
    .svc-mf label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.4px; color:#6B7280; }
    .svc-mf input, .svc-mf select, .svc-mf textarea { padding:8px 10px; border:1.5px solid var(--border); border-radius:7px; font-size:13px; font-family:inherit; outline:none; }
    .svc-mf input:focus, .svc-mf select:focus, .svc-mf textarea:focus { border-color:var(--orange); box-shadow:0 0 0 3px rgba(249,115,22,0.1); }
    .svc-mf textarea { resize:vertical; min-height:56px; }
    .svc-mf input[readonly] { background:#F9FAFB; color:#6B7280; }
    .svc-sync-info { grid-column:1/-1; font-size:11.5px; color:#6B7280; background:#F9FAFB; border-radius:7px; padding:8px 12px; border:1px solid var(--border); }
    .svc-mftr { padding:12px 22px; border-top:1px solid var(--border); display:flex; gap:8px; justify-content:flex-end; position:sticky; bottom:0; background:#fff; }
    .vdb-header { background:#fff; border-bottom:1px solid var(--border); padding:14px 28px; display:flex; align-items:center; gap:12px; flex-shrink:0; }
    .vdb-title { font-size:18px; font-weight:700; flex:1; }
    .vdb-body { flex:1; display:grid; grid-template-columns:360px 1fr; overflow:hidden; }
    .vdb-list-panel { border-right:1px solid #DCE4EB; display:flex; flex-direction:column; overflow:hidden; background:#fff; }
    .vdb-filters { padding:12px 14px; border-bottom:1px solid #DCE4EB; display:flex; flex-direction:column; gap:8px; flex-shrink:0; background:#F8FAFC; }
    .vdb-search { padding:8px 11px; border:1px solid var(--border); border-radius:9px; font-size:13px; font-family:inherit; outline:none; width:100%; box-sizing:border-box; background:#fff; box-shadow:var(--shadow-sm); }
    .vdb-search:focus { border-color:var(--orange); }
    .vdb-filter-row { display:flex; gap:6px; }
    .vdb-filter-sel { flex:1; height:32px; border:1px solid var(--border); border-radius:8px; padding:0 8px; font-size:12px; background:#fff; }
    .vdb-count { font-size:11px; font-weight:650; color:var(--text-muted); padding:7px 14px; background:#fff; border-bottom:1px solid #E8EDF2; flex-shrink:0; }
    .vdb-list { flex:1; overflow-y:auto; }
    .vdb-cat-hdr { display:flex; align-items:center; gap:7px; padding:7px 14px; background:#EEF3F6; border-bottom:1px solid #DCE4EB; cursor:pointer; user-select:none; position:sticky; top:0; z-index:5; }
    .vdb-cat-hdr:hover { background:#E6EDF2; }
    .vdb-cat-hdr-arrow { font-size:10px; color:#6B7280; transition:transform 0.15s; }
    .vdb-cat-hdr-arrow.collapsed { transform:rotate(-90deg); }
    .vdb-cat-hdr-name { font-size:11px; font-weight:800; color:var(--black); text-transform:uppercase; letter-spacing:0.5px; flex:1; }
    .vdb-cat-hdr-badge { background:#fff; color:var(--text-muted); font-size:10px; font-weight:750; border:1px solid #CBD5E1; border-radius:999px; padding:1px 7px; }
    .vdb-row { padding:11px 14px; border-bottom:1px solid #E8EDF2; cursor:pointer; transition:background 0.1s,border-color 0.1s; }
    .vdb-row:hover { background:#FFF7ED; }
    .vdb-row.active { background:var(--orange-light); border-left:3px solid var(--orange); box-shadow:inset 0 0 0 1px rgba(249,115,22,0.08); }
    .vdb-row-hidden { display:none; }
    .vdb-row-top { display:flex; align-items:center; justify-content:space-between; gap:6px; }
    .vdb-row-name { font-size:13px; font-weight:750; color:var(--black); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .vdb-row-plate { font-size:11.5px; font-weight:700; color:var(--text-muted); background:#F3F4F6; padding:1px 7px; border-radius:5px; white-space:nowrap; }
    .vdb-row-meta { font-size:11.5px; color:var(--text-muted); margin-top:2px; }
    .vdb-row-badges { display:flex; flex-wrap:wrap; gap:3px; margin-top:5px; }
    .vdb-badge { display:inline-flex; align-items:center; padding:1px 8px; border-radius:10px; font-size:10.5px; font-weight:600; }
    .vdb-badge.st-available   { background:#F0FDF4; color:#15803D; }
    .vdb-badge.st-rented      { background:#DBEAFE; color:#1E40AF; }
    .vdb-badge.st-maintenance { background:#FEF3C7; color:#92400E; }
    .vdb-badge.st-inactive    { background:#F3F4F6; color:#6B7280; }
    .vdb-badge.st-overdue     { background:#FEF2F2; color:#DC2626; }
    .vdb-badge.ex-expired     { background:#FEE2E2; color:#991B1B; }
    .vdb-badge.ex-expiring    { background:#FEF3C7; color:#92400E; }
    .vdb-empty { padding:48px 16px; text-align:center; color:var(--text-muted); font-size:13px; }
    /* vehicle profile */
    .vdb-profile { flex:1; overflow-y:auto; padding:24px 28px; background:#F4F5F7; }
    .vdb-profile-placeholder { display:flex; align-items:center; justify-content:center; height:100%; color:var(--text-muted); font-size:13px; flex-direction:column; gap:10px; }
    .vdb-profile-placeholder svg { color:#D1D5DB; }
    .vdb-phdr { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:18px; gap:12px; }
    .vdb-phdr-left {}
    .vdb-phdr-name { font-size:20px; font-weight:800; }
    .vdb-phdr-sub { font-size:13px; color:var(--text-muted); margin-top:3px; }
    .vdb-phdr-actions { display:flex; gap:6px; flex-shrink:0; }
    .vdb-psec { background:#fff; border:1px solid #DCE4EB; border-radius:12px; padding:16px 18px; margin-bottom:14px; box-shadow:var(--shadow-sm); }
    .vdb-psec-title { font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.6px; color:var(--text-muted); margin-bottom:12px; padding-bottom:7px; border-bottom:1px solid var(--border); }
    .vdb-fg { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
    .vdb-fg.c3 { grid-template-columns:1fr 1fr 1fr; }
    .vdb-fg.c1 { grid-template-columns:1fr; }
    .vdb-f { display:flex; flex-direction:column; gap:3px; }
    .vdb-f label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.4px; color:var(--text-muted); }
    .vdb-f input, .vdb-f select, .vdb-f textarea { padding:7px 10px; border:1.5px solid var(--border); border-radius:7px; font-size:13px; font-family:inherit; outline:none; background:#F9FAFB; color:var(--text); }
    .vdb-f input.em, .vdb-f select.em, .vdb-f textarea.em { background:#fff; }
    .vdb-f input.em:focus, .vdb-f select.em:focus, .vdb-f textarea.em:focus { border-color:var(--orange); box-shadow:0 0 0 3px rgba(249,115,22,0.1); }
    .vdb-f textarea { resize:vertical; min-height:56px; }
    .vdb-expiry-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
    .vdb-exp-pill { padding:2px 10px; border-radius:10px; font-size:11px; font-weight:700; }
    .vdb-exp-pill.expired  { background:#FEE2E2; color:#991B1B; }
    .vdb-exp-pill.expiring { background:#FEF3C7; color:#92400E; }
    .vdb-exp-pill.valid    { background:#F0FDF4; color:#15803D; }
    .vdb-exp-pill.none     { background:#F3F4F6; color:#9CA3AF; }
    .vdb-edit-bar { display:flex; gap:8px; padding-top:12px; border-top:1px solid var(--border); margin-top:4px; }
    /* vehicle add/edit modal */
    #vdb-modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.45); z-index:2000; }
    #vdb-modal-overlay.open { display:flex; align-items:center; justify-content:center; }
    #vdb-modal { background:#fff; border-radius:12px; width:640px; max-height:90vh; overflow-y:auto; box-shadow:0 8px 32px rgba(0,0,0,0.18); }
    .vdb-mhdr { padding:16px 22px 12px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; background:#fff; z-index:1; }
    .vdb-mtitle { font-size:16px; font-weight:700; }
    .vdb-mbody { padding:18px 22px; }
    .vdb-msec-title { font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.6px; color:var(--text-muted); margin:16px 0 10px; padding-bottom:6px; border-bottom:1px solid var(--border); }
    .vdb-msec-title:first-child { margin-top:0; }
    .vdb-mfg { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:10px; }
    .vdb-mfg.c3 { grid-template-columns:1fr 1fr 1fr; }
    .vdb-mfg.c1 { grid-template-columns:1fr; }
    .vdb-mf { display:flex; flex-direction:column; gap:3px; }
    .cpd-list { display:flex; flex-direction:column; gap:6px; }
    .cpd-list .cpd-row { cursor:default; }
    .cpd-list .cpd-row .btn { flex:none; }
    .cpd-foot { display:flex; justify-content:flex-end; margin-top:8px; }
    .vm-brand-row { display:flex; align-items:center; gap:8px; }
    .vm-brand-row select { flex:1; min-width:0; }
    .vm-brand-logo { display:inline-flex; flex:none; min-width:36px; min-height:36px; align-items:center; justify-content:center; }
    .vm-brand-logo:empty { display:none; }
    .vdb-mf label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.4px; color:var(--text-muted); }
    .vdb-mf input, .vdb-mf select, .vdb-mf textarea { padding:8px 10px; border:1.5px solid var(--border); border-radius:7px; font-size:13px; font-family:inherit; outline:none; }
    .vdb-mf input:focus, .vdb-mf select:focus, .vdb-mf textarea:focus { border-color:var(--orange); box-shadow:0 0 0 3px rgba(249,115,22,0.1); }
    .vdb-mf textarea { resize:vertical; min-height:56px; }
    .vdb-mftr { padding:12px 22px; border-top:1px solid var(--border); display:flex; gap:8px; justify-content:flex-end; position:sticky; bottom:0; background:#fff; }

    /* ─── EXPENSES PAGE ────────────────────────── */
    #expenses-page { display:none; flex:1; overflow-y:auto; background:#F4F5F7; }
    #expenses-page.open { display:flex; flex-direction:column; }
    .exp-header { background:#fff; border-bottom:1px solid var(--border); padding:14px 28px; display:flex; align-items:center; gap:12px; flex-shrink:0; }
    .exp-title { font-size:18px; font-weight:700; flex:1; }
    .exp-filters { background:#fff; border-bottom:1px solid var(--border); padding:10px 28px; display:flex; flex-wrap:wrap; gap:8px; align-items:flex-end; flex-shrink:0; }
    .exp-filter-group { display:flex; flex-direction:column; gap:3px; }
    .exp-filter-group label { font-size:10px; font-weight:600; color:#6B7280; text-transform:uppercase; letter-spacing:0.4px; }
    .exp-filter-group input, .exp-filter-group select { height:32px; border:1px solid var(--border); border-radius:6px; padding:0 10px; font-size:12px; }
    .exp-filter-group input:focus, .exp-filter-group select:focus { outline:none; border-color:var(--orange); }
    .exp-summary { padding:8px 28px; background:#FFF8F2; border-bottom:1px solid #FDDCB5; font-size:13px; color:#6B7280; }
    .exp-summary strong { color:var(--orange); }
    .exp-body { flex:1; padding:18px 28px; overflow-y:auto; }
    .exp-table-wrap { background:#fff; border-radius:12px; border:1px solid #DCE4EB; overflow:hidden; box-shadow:var(--shadow-sm); }
    .exp-table { width:100%; border-collapse:collapse; font-size:13px; }
    .exp-table th { background:#F8FAFC; padding:11px 14px; text-align:left; font-size:10.5px; font-weight:750; text-transform:uppercase; letter-spacing:0.5px; color:var(--text-muted); border-bottom:1px solid #CBD5E1; white-space:nowrap; }
    .exp-table td { padding:11px 14px; border-bottom:1px solid #E8EDF2; vertical-align:middle; }
    .exp-table tr:last-child td { border-bottom:none; }
    .exp-table tr:hover td { background:#FFF8F2; }
    .exp-date { white-space:nowrap; font-variant-numeric:tabular-nums; }
    .exp-cat-pill { display:inline-block; padding:2px 9px; border-radius:10px; font-size:11px; font-weight:600; background:#F3F4F6; color:#374151; white-space:nowrap; }
    .exp-amount { font-weight:700; }
    .exp-act-btn { height:26px; padding:0 10px; font-size:11px; border-radius:5px; border:1px solid var(--border); background:#fff; color:#374151; font-weight:600; cursor:pointer; }
    .exp-act-btn:hover { border-color:#9CA3AF; }
    .exp-act-btn.del { color:#DC2626; border-color:#FECACA; }
    .exp-act-btn.del:hover { background:#FEF2F2; }

    /* ─── INVOICE REGISTER ─────────────────────── */
    #invoices-page { display:none; flex:1; overflow:hidden; background:#F4F5F7; flex-direction:column; }
    #invoices-page.open { display:flex; }
    .inv-header { background:#fff; border-bottom:1px solid var(--border); padding:16px 28px; display:flex; align-items:center; gap:12px; flex-shrink:0; }
    .inv-title { font-size:18px; font-weight:750; flex:1; }
    .inv-note { font-size:12px; color:var(--text-muted); }
    .inv-filters { background:#fff; border-bottom:1px solid var(--border); padding:11px 28px; display:flex; flex-wrap:wrap; gap:8px; align-items:flex-end; flex-shrink:0; }
    .inv-filter { display:flex; flex-direction:column; gap:3px; }
    .inv-filter.search { flex:1 1 250px; max-width:360px; }
    .inv-filter label { font-size:10px; font-weight:700; color:#64748B; text-transform:uppercase; letter-spacing:.45px; }
    .inv-filter input, .inv-filter select { height:34px; min-width:130px; border:1px solid var(--border); border-radius:7px; padding:0 10px; background:#fff; color:var(--text); font:inherit; font-size:12px; outline:none; }
    .inv-filter.search input { width:100%; }
    .inv-filter input:focus, .inv-filter select:focus { border-color:var(--orange); box-shadow:0 0 0 3px rgba(249,115,22,.10); }
    .inv-summary { display:grid; grid-template-columns:repeat(4,minmax(150px,1fr)); gap:12px; padding:18px 28px 0; flex-shrink:0; }
    .inv-stat { background:#fff; border:1px solid #DCE4EB; border-radius:11px; padding:13px 15px; box-shadow:var(--shadow-sm); }
    .inv-stat-label { color:var(--text-muted); font-size:10px; font-weight:750; letter-spacing:.5px; text-transform:uppercase; }
    .inv-stat-value { margin-top:5px; font-size:19px; font-weight:800; color:var(--black); font-variant-numeric:tabular-nums; }
    .inv-stat.outstanding { border-left:3px solid #DC2626; }
    .inv-stat.outstanding .inv-stat-value { color:#B91C1C; }
    .inv-body { flex:1; min-height:0; padding:14px 28px 24px; overflow:auto; }
    .inv-table-wrap { min-width:960px; background:#fff; border:1px solid #DCE4EB; border-radius:12px; overflow:hidden; box-shadow:var(--shadow-sm); }
    .inv-table { width:100%; border-collapse:collapse; font-size:12.5px; }
    .inv-table th { position:sticky; top:0; z-index:1; background:#F8FAFC; padding:10px 12px; text-align:left; font-size:10px; font-weight:800; color:#64748B; text-transform:uppercase; letter-spacing:.5px; border-bottom:1px solid #CBD5E1; white-space:nowrap; }
    .inv-table td { padding:11px 12px; border-bottom:1px solid #E8EDF2; vertical-align:middle; }
    .inv-table tr:last-child td { border-bottom:none; }
    .inv-table tbody tr:hover td { background:#FFF8F2; }
    .inv-number { font-weight:750; color:#C2410C; white-space:nowrap; }
    .inv-customer { font-weight:700; color:var(--black); }
    .inv-sub { color:var(--text-muted); font-size:11px; margin-top:2px; }
    .inv-period { white-space:nowrap; }
    .inv-money { font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; text-align:right; }
    .inv-pill { display:inline-flex; align-items:center; padding:3px 9px; border-radius:999px; font-size:10.5px; font-weight:750; white-space:nowrap; }
    .inv-pill.paid { background:#DCFCE7; color:#15803D; }
    .inv-pill.outstanding { background:#FEE2E2; color:#B91C1C; }
    .inv-pill.credit { background:#FFF7ED; color:#C2410C; }
    .inv-life { display:inline-flex; padding:3px 8px; border-radius:6px; background:#F1F5F9; color:#475569; font-size:10.5px; font-weight:700; white-space:nowrap; }
    .inv-life.overdue { background:#FEE2E2; color:#B91C1C; }
    .inv-print-btn { height:29px; padding:0 11px; border:1px solid #FDBA74; border-radius:7px; background:#FFF7ED; color:#C2410C; font-size:11px; font-weight:700; font-family:inherit; cursor:pointer; white-space:nowrap; }
    .inv-print-btn:hover { background:#FFEDD5; border-color:var(--orange); }
    .inv-empty { padding:52px 20px !important; text-align:center; color:#94A3B8; }

    /* ─── PLATFORM SUBSCRIPTION & BILLS ─── */
    #platform-billing-page { display:none; flex:1; min-height:0; overflow:hidden; background:#F4F5F7; flex-direction:column; }
    #platform-billing-page.open { display:flex; }
    .pbill-header { padding:18px 28px; background:#fff; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:14px; }
    .pbill-header-copy { flex:1; }
    .pbill-header h2 { margin:0; font-size:19px; color:#0F172A; }
    .pbill-header p { margin:4px 0 0; color:#64748B; font-size:12px; }
    .pbill-refresh { height:34px; padding:0 13px; border:1px solid #CBD5E1; border-radius:8px; background:#fff; color:#334155; font:inherit; font-size:12px; font-weight:700; cursor:pointer; }
    .pbill-body { flex:1; min-height:0; overflow:auto; padding:18px 28px 28px; }
    .pbill-status-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-bottom:16px; }
    .pbill-stat { padding:14px 16px; background:#fff; border:1px solid #DCE4EB; border-radius:11px; box-shadow:var(--shadow-sm); }
    .pbill-stat span { display:block; color:#64748B; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.5px; }
    .pbill-stat strong { display:block; margin-top:6px; color:#0F172A; font-size:17px; }
    .pbill-panel { background:#fff; border:1px solid #DCE4EB; border-radius:12px; overflow:hidden; box-shadow:var(--shadow-sm); }
    .pbill-panel-head { padding:14px 16px; border-bottom:1px solid #E2E8F0; display:flex; align-items:center; justify-content:space-between; }
    .pbill-panel-head strong { color:#0F172A; font-size:14px; }
    .pbill-table { width:100%; border-collapse:collapse; font-size:12.5px; }
    .pbill-table th { padding:10px 13px; background:#F8FAFC; color:#64748B; font-size:10px; text-transform:uppercase; letter-spacing:.45px; text-align:left; border-bottom:1px solid #E2E8F0; }
    .pbill-table td { padding:12px 13px; border-bottom:1px solid #E8EDF2; vertical-align:middle; }
    .pbill-table tr:last-child td { border-bottom:0; }
    .pbill-table tbody tr:hover td { background:#FFF8F2; }
    .pbill-number { color:#C2410C; font-weight:800; }
    .pbill-money { text-align:right; font-variant-numeric:tabular-nums; font-weight:700; white-space:nowrap; }
    .pbill-badge { display:inline-flex; padding:3px 9px; border-radius:999px; background:#F1F5F9; color:#475569; font-size:10px; font-weight:800; text-transform:uppercase; }
    .pbill-badge.paid { background:#DCFCE7; color:#15803D; }
    .pbill-badge.overdue { background:#FEE2E2; color:#B91C1C; }
    .pbill-badge.issued, .pbill-badge.partially_paid { background:#FEF3C7; color:#A16207; }
    .pbill-open { height:29px; padding:0 11px; border:1px solid #FDBA74; border-radius:7px; background:#FFF7ED; color:#C2410C; font:inherit; font-size:11px; font-weight:800; cursor:pointer; }
    .pbill-row-actions { display:flex; align-items:center; gap:6px; white-space:nowrap; }
    .pbill-pay { height:29px; padding:0 11px; border:1px solid #F97316; border-radius:7px; background:#F97316; color:#fff; font:inherit; font-size:11px; font-weight:800; cursor:pointer; }
    .pbill-pay:hover { background:#EA580C; border-color:#EA580C; }
    .pbill-empty { padding:46px 18px !important; color:#94A3B8; text-align:center; }
    .pbill-detail { margin-top:16px; padding:20px; background:#fff; border:1px solid #DCE4EB; border-radius:12px; box-shadow:var(--shadow-sm); }
    .pbill-detail[hidden] { display:none; }
    .pbill-detail-head { display:flex; align-items:flex-start; gap:14px; padding-bottom:15px; border-bottom:2px solid #F97316; }
    .pbill-detail-head > div { flex:1; }
    .pbill-detail-head h3 { margin:0; color:#0F172A; font-size:18px; }
    .pbill-detail-head p { margin:4px 0 0; color:#64748B; font-size:12px; }
    .pbill-close { width:32px; height:32px; border:1px solid #CBD5E1; border-radius:8px; background:#fff; cursor:pointer; font-size:18px; }
    .pbill-detail-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 28px; margin:16px 0; }
    .pbill-detail-row { display:flex; justify-content:space-between; gap:16px; padding:9px 0; border-bottom:1px solid #E2E8F0; }
    .pbill-detail-row span { color:#64748B; }
    .pbill-detail-row strong { text-align:right; color:#0F172A; }
    .pbill-detail-actions { display:flex; flex-wrap:wrap; gap:8px; padding-top:4px; }
    .pbill-detail-actions button { height:34px; padding:0 13px; border:1px solid #CBD5E1; border-radius:8px; background:#fff; color:#334155; font:inherit; font-size:12px; font-weight:750; cursor:pointer; }
    .pbill-detail-actions button.primary { background:#F97316; border-color:#F97316; color:#fff; }
    .pbill-detail-actions button:disabled { cursor:not-allowed; opacity:.55; }
    .pbill-gateway-note { margin:13px 0 0; padding:10px 12px; border-radius:8px; background:#FFF7ED; color:#9A3412; font-size:11.5px; }
    /* Marketing card (owner, 28 Oct 2026, option A): a gift button next to every bell, for the business owner while a card
       they have not closed is live; it opens the standard card in a panel under it (the side menu has no room on a laptop).
       The orange dot is on while the button shows. */
    .rf-mcard-btn { color:#16A34A; }
    .rf-mcard-btn[hidden] { display:none; }
    .rf-mcard-dot { position:absolute; top:6px; right:6px; width:9px; height:9px; border-radius:50%; background:#F97316; box-shadow:0 0 0 2px #fff; }
    #rf-mcard-panel { position:fixed; z-index:9000; top:72px; right:16px; border-radius:14px; box-shadow:0 18px 48px rgba(7,24,32,.28); outline:none; }
    #rf-mcard-panel[hidden] { display:none; }
    /* GL-16: the Referrals panel and the referral saving (Day/Night through the shared --rf tokens) */
    .pbill-referrals { margin-top:16px; }
    #platform-billing-referral-body { padding:4px 16px 12px; }
    .pbill-referral-copy p { margin:10px 0 6px; font-size:12px; line-height:1.5; color:var(--rf-text, #334155); }
    .pbill-referral-copy p.inv-sub { margin-top:0; color:var(--rf-soft, #64748B); }
    html.rf-app .pbill-detail-row.pbill-saving strong, .pbill-detail-row.pbill-saving strong { color:var(--rf-green, #15803D); }
    html.rf-app .pbill-gateway-note.pbill-saving-note, .pbill-gateway-note.pbill-saving-note { background-color:color-mix(in srgb, var(--rf-green, #15803D) 13%, transparent); color:var(--rf-green, #15803D); }
    /* CR-5: Pay by bank transfer + receipt (Day/Night through the shared --rf tokens) */
    .pbill-badge.review { margin-left:4px; background:color-mix(in srgb, var(--rf-blue) 13%, transparent); color:var(--rf-blue); }
    .pbill-note { margin-top:5px; max-width:280px; font-size:11px; line-height:1.4; color:var(--rf-soft); }
    .pbill-note.bad { color:var(--rf-red); font-weight:700; }
    #pbill-pay-overlay { position:fixed; inset:0; background:rgba(7,24,32,0.48); z-index:1600; display:none; }
    #pbill-pay-overlay.open { display:block; }
    .pbill-pay-section { border:1px solid var(--rf-line-2); border-radius:12px; padding:10px 14px; background:var(--rf-panel-2); }
    .pbill-pay-section h4 { margin:2px 0 8px; font-size:12px; color:var(--rf-head); }
    .pbill-pay-row { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:6px 0; border-bottom:1px solid var(--rf-line); font-size:12.5px; }
    .pbill-pay-row:last-child { border-bottom:0; }
    .pbill-pay-row span { color:var(--rf-soft); }
    .pbill-pay-row strong { color:var(--rf-head); text-align:right; overflow-wrap:anywhere; font-variant-numeric:tabular-nums; }
    .pbill-pay-ref { margin-top:8px; font-size:12.5px; color:var(--rf-text); }
    .pbill-pay-ref strong { color:var(--rf-head); }
    .pbill-copy { height:24px; margin-left:6px; padding:0 8px; border:1px solid var(--rf-line-2); border-radius:6px; background:var(--rf-panel); color:var(--rf-text); font:inherit; font-size:10.5px; font-weight:700; cursor:pointer; }
    .pbill-pay-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 10px; }
    .pbill-pay-grid .full { grid-column:1 / -1; }
    .pbill-pay-msg { margin-top:8px; padding:8px 10px; border-radius:8px; font-size:12px; line-height:1.45; font-weight:600; }
    .pbill-pay-msg[hidden] { display:none; }
    .pbill-pay-msg.warn { color:var(--rf-amber); background:color-mix(in srgb, var(--rf-amber) 10%, transparent); }
    .pbill-pay-msg.error { color:var(--rf-red); background:color-mix(in srgb, var(--rf-red) 10%, transparent); }
    .pbill-receipt-img { display:block; max-width:100%; max-height:60vh; margin:4px auto 0; border:1px solid var(--rf-line-2); border-radius:8px; background:#fff; }
    /* CR-6: Change package (CR-1 key-tag cards; Day/Night through the shared --rf tokens) */
    .pkgchg-section { margin-top:18px; }
    .pkgchg-section[hidden], .pkgchg-banner[hidden], .pkgchg-notices[hidden] { display:none; }
    .pkgchg-head { display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px 14px; margin:0 0 10px; font-size:12.5px; color:var(--rf-text); }
    .pkgchg-head span { color:var(--rf-soft); }
    .pkgchg-head strong { color:var(--rf-head); }
    .pkgchg-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:12px; }
    .pkgchg-card { display:flex; flex-direction:column; gap:7px; padding:13px 14px 13px 18px; font-size:12.5px; }
    .pkgchg-card-hd { display:flex; justify-content:space-between; align-items:flex-start; gap:8px; }
    .pkgchg-card-hd strong { font-size:14px; color:var(--rf-head); }
    .pkgchg-kind { flex:none; padding:2px 8px; border-radius:999px; font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--s, var(--rf-grey)); background:color-mix(in srgb, var(--s, var(--rf-grey)) 12%, transparent); }
    .pkgchg-price { font-size:18px; font-weight:700; color:var(--rf-head); font-variant-numeric:tabular-nums; }
    .pkgchg-price small { font-size:11px; font-weight:500; color:var(--rf-muted); }
    .pkgchg-line { display:flex; justify-content:space-between; align-items:baseline; gap:10px; padding:2px 0; color:var(--rf-text); }
    .pkgchg-line span { color:var(--rf-soft); }
    .pkgchg-line b { color:var(--rf-head); font-variant-numeric:tabular-nums; text-align:right; }
    .pkgchg-ok { color:var(--rf-green); font-weight:700; }
    .pkgchg-bad { color:var(--rf-red); font-weight:700; }
    .pkgchg-sub { margin-top:3px; font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--rf-muted); }
    .pkgchg-list { margin:0; padding-left:16px; color:var(--rf-text); line-height:1.5; }
    .pkgchg-hint { font-size:11.5px; color:var(--rf-muted); line-height:1.45; }
    .pkgchg-warn { font-size:12px; color:var(--rf-amber); font-weight:600; line-height:1.45; }
    .pkgchg-error { font-size:12px; color:var(--rf-red); font-weight:600; line-height:1.45; }
    .pkgchg-actions { display:flex; flex-wrap:wrap; gap:6px; margin-top:auto; padding-top:6px; }
    .pkgchg-banner { margin-top:12px; padding:10px 12px 10px 18px; font-size:12.5px; line-height:1.5; }
    .pkgchg-banner strong { color:var(--rf-head); }
    .pkgchg-note { padding:10px 12px 10px 18px; margin:0 0 12px; font-size:12.5px; line-height:1.5; }
    #pkgchg-overlay { position:fixed; inset:0; background:rgba(7,24,32,0.48); z-index:1600; display:none; }
    #pkgchg-overlay.open { display:block; }
    .pkgchg-notices { margin-bottom:16px; }
    .pkgchg-notice { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; padding:11px 16px; border-bottom:1px solid var(--rf-line); font-size:12.5px; color:var(--rf-text); }
    .pkgchg-notice:last-child { border-bottom:0; }
    .pkgchg-notice strong { color:var(--rf-head); }
    .pkgchg-notice.unread { background:color-mix(in srgb, var(--rf-blue) 6%, transparent); }
    @media (max-width:900px) { .pbill-status-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .pbill-detail-grid { grid-template-columns:1fr; } .pbill-table-wrap { overflow:auto; } .pbill-table { min-width:760px; } }
    /* expense modal */
    #exp-modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.45); z-index:1800; }
    #exp-modal-overlay.open { display:flex; align-items:center; justify-content:center; }
    #exp-modal { background:#fff; border-radius:12px; width:540px; max-height:90vh; overflow-y:auto; box-shadow:0 8px 32px rgba(0,0,0,0.18); }
    .exp-modal-hdr { padding:18px 22px 14px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; background:#fff; z-index:1; }
    .exp-modal-title { font-size:16px; font-weight:700; }
    .exp-modal-body { padding:18px 22px; display:grid; grid-template-columns:1fr 1fr; gap:12px; }
    .exp-modal-body .full { grid-column:1/-1; }
    .exp-field { display:flex; flex-direction:column; gap:4px; }
    .exp-field label { font-size:11px; font-weight:600; color:#6B7280; text-transform:uppercase; letter-spacing:0.4px; }
    .exp-field input, .exp-field select, .exp-field textarea { border:1px solid var(--border); border-radius:7px; padding:8px 10px; font-size:13px; font-family:inherit; }
    .exp-field input:focus, .exp-field select:focus, .exp-field textarea:focus { outline:none; border-color:var(--orange); box-shadow:0 0 0 2px rgba(249,115,22,0.12); }
    .exp-field textarea { resize:vertical; min-height:60px; }
    .exp-modal-ftr { padding:14px 22px; border-top:1px solid var(--border); display:flex; gap:8px; justify-content:flex-end; position:sticky; bottom:0; background:#fff; }
    .exp-recurring-row { display:flex; align-items:center; gap:8px; }
    .exp-recurring-row input[type=checkbox] { width:16px; height:16px; accent-color:var(--orange); cursor:pointer; }

    /* ─── ADMIN PAGE ─────────────────────────── */
    #admin-page { display:none; flex:1; overflow-y:auto; background:#F4F5F7; flex-direction:column; }
    #admin-page.open { display:flex; }
    /* ─── VEHICLE LOAN TRACKER PAGE ─────────── */
    #loantracker-page { display:none; flex:1; overflow:hidden; background:#F4F5F7; flex-direction:column; }
    #loantracker-page.open { display:flex; }
    .lt-native { flex:1; min-height:0; overflow:auto; padding:18px 24px 32px; }
    .lt-toolbar { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
    .lt-toolbar select { height:34px; border:1px solid #CBD5E1; border-radius:8px; padding:0 10px; background:#fff; }
    .lt-toolbar .btn-primary { margin-left:auto; }
    .lt-summary { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; margin-bottom:18px; }
    .lt-stat { padding:13px; border:1px solid #DCE4EB; border-radius:11px; background:#fff; box-shadow:var(--shadow-sm); text-align:center; }
    .lt-stat strong { display:block; font-size:18px; color:#0F172A; }.lt-stat span { display:block; margin-top:4px; font-size:9px; font-weight:800; color:#64748B; text-transform:uppercase; }
    .lt-group { margin:18px 0 8px; }.lt-group-head { display:flex; justify-content:space-between; margin-bottom:9px; color:#334155; font-size:12px; font-weight:800; }
    .lt-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:12px; }
    .lt-card { background:#fff; border:1px solid #DCE4EB; border-top:3px solid #0EA5E9; border-radius:11px; padding:13px; box-shadow:var(--shadow-sm); }.lt-card.overdue { border-top-color:#EF4444; }.lt-card.done { border-top-color:#22C55E; opacity:.78; }
    .lt-card-head,.lt-card-meta,.lt-card-actions { display:flex; align-items:center; justify-content:space-between; gap:8px; }.lt-card-head strong { color:#0F172A; }.lt-card-meta { margin:10px 0; color:#64748B; font-size:11px; }
    .lt-status { display:inline-flex; padding:4px 7px; border-radius:999px; background:#FEE2E2; color:#B91C1C; font-size:10px; font-weight:800; }.lt-status.paid { background:#DCFCE7; color:#166534; }
    .lt-months { display:grid; grid-template-columns:repeat(6,1fr); gap:6px; margin:11px 0; }.lt-month { border:1px solid #CBD5E1; border-radius:7px; background:#fff; padding:5px 1px; color:#64748B; font-size:9px; cursor:pointer; }.lt-month.paid { background:#16A34A; border-color:#16A34A; color:#fff; }.lt-month.overdue { border:2px solid #EF4444; color:#B91C1C; }
    .lt-card-actions button { border:0; background:none; color:#64748B; font-size:10px; cursor:pointer; }.lt-empty { padding:24px; border:1px dashed #CBD5E1; border-radius:10px; color:#94A3B8; text-align:center; }
    .lt-modal { display:none; position:fixed; inset:0; z-index:1600; padding:50px 18px; overflow:auto; background:rgba(15,23,42,.58); }.lt-modal.open { display:flex; align-items:flex-start; justify-content:center; }.lt-dialog { width:min(720px,100%); padding:22px; border-radius:14px; background:#fff; box-shadow:0 24px 70px rgba(0,0,0,.25); }.lt-dialog h3 { margin:0 0 16px; }.lt-form { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }.lt-form label { display:grid; gap:5px; color:#475569; font-size:11px; font-weight:700; }.lt-form input,.lt-form select { width:100%; height:36px; padding:0 10px; border:1px solid #CBD5E1; border-radius:8px; }.lt-form .wide { grid-column:1/-1; }.lt-dialog-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:18px; }
    .lt-toolbar .lt-cat-btn { margin-left:auto; }.lt-toolbar .lt-cat-btn + .btn-primary { margin-left:0; }.lt-banner { margin:0 0 12px; padding:10px 12px; border:1px solid #FCD34D; border-radius:10px; background:#FFFBEB; color:#92400E; font-size:12px; font-weight:700; }.lt-cat-list { display:grid; gap:8px; margin-bottom:12px; }.lt-cat-row { display:flex; align-items:center; gap:8px; }.lt-cat-row input { flex:1; height:36px; padding:0 10px; border:1px solid #CBD5E1; border-radius:8px; }.lt-cat-row span { min-width:64px; color:#64748B; font-size:11px; }
    @media(max-width:900px){.lt-summary{grid-template-columns:repeat(3,1fr)}.lt-native{padding:14px}.lt-grid{grid-template-columns:1fr}}
    /* Booking Requests Page */
    #booking-requests-page { display:none; flex:1; overflow-y:auto; background:#F4F5F7; flex-direction:column; }
    #booking-requests-page.open { display:flex; }

    /* ── Customer Documents Review Page ── */
    #doc-review-page { display:none; flex:1; overflow-y:auto; background:#F4F5F7; flex-direction:column; }
    #doc-review-page.open { display:flex; }
    .dr-toolbar { background:#fff; border-bottom:1px solid var(--border); padding:14px 28px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; flex-shrink:0; }
    .dr-filter-btn { padding:6px 14px; border-radius:20px; border:1.5px solid var(--border); background:#fff; font-size:12px; font-weight:600; color:var(--text-muted); cursor:pointer; transition:.15s; white-space:nowrap; display:inline-flex; align-items:center; gap:6px; }
    .dr-filter-btn:hover { border-color:#aaa; color:var(--text); }
    .dr-filter-btn.active { background:var(--orange); border-color:var(--orange); color:#fff; }
    .dr-badge-count { display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; border-radius:9px; background:rgba(255,255,255,0.3); font-size:10px; font-weight:700; padding:0 4px; margin-left:4px; }
    .dr-queue { padding:22px 28px 28px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-content:start; gap:18px; flex:1; }
    .dr-icon { width:15px; height:15px; display:inline-block; flex:0 0 auto; vertical-align:-2px; }
    .dr-card { background:#fff; border:1px solid var(--border); border-radius:12px; padding:16px 18px; display:grid; grid-template-columns:1fr auto; align-items:center; gap:12px; cursor:pointer; transition:.15s; }
    .dr-card:hover { border-color:#ccc; box-shadow:0 2px 8px rgba(0,0,0,0.06); }
    .dr-card-left { display:flex; flex-direction:column; gap:4px; min-width:0; }
    .dr-card-customer { font-size:14px; font-weight:700; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .dr-card-meta { font-size:12px; color:var(--text-muted); }
    .dr-card-doctype { font-size:12px; font-weight:600; color:var(--text); margin-top:2px; }
    .dr-card-date { font-size:11px; color:var(--text-muted); }
    .dr-card-right { display:flex; flex-direction:column; align-items:flex-end; gap:8px; flex-shrink:0; }
    .dr-status { display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:20px; font-size:11px; font-weight:700; white-space:nowrap; }
    .dr-status-pending  { background:#FEF3C7; color:#B45309; }
    .dr-status-approved { background:#D1FAE5; color:#065F46; }
    .dr-status-rejected { background:#FEE2E2; color:#991B1B; }
    .dr-review-btn { padding:6px 14px; border-radius:8px; background:var(--orange); border:none; color:#fff; font-size:12px; font-weight:600; cursor:pointer; }
    .dr-empty { grid-column:1/-1; text-align:center; padding:56px 20px; color:var(--text-muted); font-size:14px; background:#fff; border:1px dashed #CBD5E1; border-radius:14px; }
    .dr-empty-icon { width:48px; height:48px; margin:0 auto 12px; border-radius:14px; background:#FFF7ED; color:var(--orange); display:flex; align-items:center; justify-content:center; }
    .dr-empty-icon .dr-icon { width:24px; height:24px; }
    /* ── Grouped customer cards ─────────────────────────────── */
    .dr-cust-card { background:#fff; border:1px solid #D7E0E8; border-top:3px solid #CBD5E1; border-radius:14px; overflow:hidden; transition:.18s ease; box-shadow:0 5px 18px rgba(7,24,32,.06); }
    .dr-cust-card.pending { border-top-color:#F97316; }
    .dr-cust-card.approved { border-top-color:#16A34A; }
    .dr-cust-card.rejected { border-top-color:#EF4444; }
    .dr-cust-card:hover { border-color:#CBD5E1; border-top-color:var(--orange); box-shadow:0 12px 30px rgba(7,24,32,.11); transform:translateY(-2px); }
    .dr-cust-hdr { padding:17px 18px; display:flex; align-items:flex-start; gap:12px; border-bottom:1px solid rgba(203,213,225,.7); }
    .dr-cust-card.pending .dr-cust-hdr { background:linear-gradient(135deg,#FFF7ED 0%,#FFFFFF 72%); }
    .dr-cust-card.approved .dr-cust-hdr { background:linear-gradient(135deg,#F0FDF4 0%,#FFFFFF 72%); }
    .dr-cust-card.rejected .dr-cust-hdr { background:linear-gradient(135deg,#FEF2F2 0%,#FFFFFF 72%); }
    .dr-cust-avatar { width:40px; height:40px; border-radius:10px; background:#FFF7ED; color:var(--orange); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
    .dr-cust-avatar .dr-icon { width:20px; height:20px; }
    .dr-cust-info { flex:1; min-width:0; }
    .dr-cust-name { font-size:14px; font-weight:800; color:#071820; letter-spacing:.01em; }
    .dr-cust-meta { font-size:12px; color:var(--text-muted); margin-top:2px; }
    .dr-cust-badges { display:flex; gap:6px; margin-top:8px; flex-wrap:wrap; }
    .dr-cust-badge { display:inline-flex; align-items:center; gap:4px; padding:3px 8px; border-radius:20px; font-size:11px; font-weight:700; }
    .dr-cust-badge-pending  { background:#FEF3C7; color:#B45309; }
    .dr-cust-badge-approved { background:#D1FAE5; color:#065F46; }
    .dr-cust-badge-rejected { background:#FEE2E2; color:#991B1B; }
    .dr-cust-open-btn { align-self:center; padding:8px 14px; border-radius:9px; border:1px solid #071820; background:#071820; font-size:12px; font-weight:700; color:#fff; cursor:pointer; white-space:nowrap; flex-shrink:0; transition:.15s; display:inline-flex; align-items:center; gap:6px; box-shadow:0 3px 8px rgba(7,24,32,.14); }
    .dr-cust-open-btn:hover { background:#F97316; border-color:#F97316; box-shadow:0 5px 12px rgba(249,115,22,.22); }
    .dr-doc-list { padding:12px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; background:#F8FAFC; }
    .dr-doc-row { display:flex; align-items:center; gap:9px; min-width:0; padding:10px; cursor:pointer; transition:.15s; border:1px solid #E2E8F0; border-radius:10px; background:#fff; }
    .dr-doc-row:last-child { border-bottom:1px solid #E2E8F0; }
    .dr-doc-row:hover { background:#FFF7ED; border-color:#FDBA74; box-shadow:0 4px 10px rgba(249,115,22,.08); }
    .dr-doc-row-icon { width:28px; height:28px; border-radius:8px; display:flex; align-items:center; justify-content:center; background:#F8FAFC; color:#64748B; flex-shrink:0; }
    .dr-doc-row-icon.pending_review { background:#FFFBEB; color:#D97706; }
    .dr-doc-row-icon.approved { background:#F0FDF4; color:#16A34A; }
    .dr-doc-row-icon.rejected { background:#FEF2F2; color:#DC2626; }
    .dr-doc-row-label { flex:1; font-size:13px; color:var(--text); font-weight:500; min-width:0; }
    @media(max-width:1180px){ .dr-queue { grid-template-columns:1fr; } }
    @media(max-width:700px){ .dr-queue { padding:16px; } .dr-doc-list { grid-template-columns:1fr; } .dr-cust-hdr { flex-wrap:wrap; } .dr-cust-open-btn { margin-left:52px; } }
    /* ── Customer docs slide-over panel ─────────────────────── */
    #dr-cust-backdrop { position:fixed; inset:0; background:rgba(0,0,0,0.22); z-index:399; display:none; }
    #dr-cust-backdrop.open { display:block; }
    #dr-cust-panel { position:fixed; top:0; right:0; bottom:0; width:400px; max-width:100vw; background:#fff; border-left:1px solid var(--border); box-shadow:-4px 0 24px rgba(0,0,0,0.10); z-index:400; transform:translateX(100%); transition:transform .25s cubic-bezier(.4,0,.2,1); display:flex; flex-direction:column; overflow:hidden; }
    #dr-cust-panel.open { transform:translateX(0); }
    .dr-cp-hdr { padding:18px 20px 16px; border-bottom:1px solid var(--border); display:flex; align-items:flex-start; gap:12px; flex-shrink:0; }
    .dr-cp-close { width:32px; height:32px; border-radius:8px; border:1px solid var(--border); background:#fff; cursor:pointer; font-size:18px; display:flex; align-items:center; justify-content:center; color:var(--text-muted); flex-shrink:0; }
    .dr-cp-close:hover { background:#F3F4F6; }
    .dr-cp-info { flex:1; min-width:0; }
    .dr-cp-name { font-size:16px; font-weight:700; color:var(--text); }
    .dr-cp-meta { font-size:12px; color:var(--text-muted); margin-top:3px; line-height:1.5; }
    .dr-cp-body { flex:1; overflow-y:auto; }
    .dr-cp-body .dr-doc-list { grid-template-columns:1fr; }
    .dr-cp-section-title { font-size:11px; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.05em; padding:14px 20px 8px; }

    /* ── Document Detail Panel (slide-in from right) ── */
    #doc-detail-panel { position:fixed; top:0; right:0; width:460px; max-width:100vw; height:100vh; background:#fff; border-left:1px solid var(--border); box-shadow:-4px 0 24px rgba(0,0,0,0.1); z-index:900; transform:translateX(110%); transition:transform .25s cubic-bezier(.4,0,.2,1); display:flex; flex-direction:column; overflow:hidden; }
    #doc-detail-panel.open { transform:translateX(0); }
    #doc-panel-backdrop { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.35); z-index:899; }
    #doc-panel-backdrop.open { display:block; }
    .dp-header { padding:18px 20px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:12px; flex-shrink:0; }
    .dp-close { width:32px; height:32px; border-radius:8px; border:1px solid var(--border); background:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--text-muted); flex-shrink:0; }
    .dp-close:hover { background:#F3F4F6; }
    .dp-title { font-size:16px; font-weight:700; color:var(--text); }
    .dp-body { flex:1; overflow-y:auto; padding:20px; display:flex; flex-direction:column; gap:16px; }
    .dp-section-label { font-size:10px; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.05em; margin-bottom:6px; }
    .dp-info-row { display:flex; justify-content:space-between; align-items:flex-start; padding:10px 0; border-bottom:1px solid #F3F4F6; font-size:13px; }
    .dp-info-label { color:var(--text-muted); flex-shrink:0; }
    .dp-info-val { color:var(--text); font-weight:600; text-align:right; }
    .dp-preview { width:100%; border-radius:10px; border:1px solid var(--border); background:#F9FAFB; min-height:200px; display:flex; align-items:center; justify-content:center; overflow:hidden; position:relative; }
    .dp-preview img { width:100%; height:auto; max-height:320px; object-fit:contain; border-radius:10px; }
    .dp-preview-pdf { display:flex; flex-direction:column; align-items:center; gap:8px; padding:32px; color:var(--text-muted); font-size:13px; }
    .dp-preview-loading { color:var(--text-muted); font-size:13px; display:flex; align-items:center; justify-content:center; gap:7px; }
    .dp-preview-err { color:var(--text-muted); font-size:12px; text-align:center; padding:20px; display:flex; align-items:center; justify-content:center; gap:7px; }
    .dp-actions { display:flex; flex-direction:column; gap:10px; flex-shrink:0; padding:16px 20px; border-top:1px solid var(--border); background:#fff; }
    .dp-reject-area { display:none; flex-direction:column; gap:8px; }
    .dp-reject-area.open { display:flex; }
    .dp-reject-textarea { width:100%; padding:10px 12px; border:1.5px solid var(--border); border-radius:8px; font-size:13px; font-family:inherit; color:var(--text); resize:vertical; min-height:80px; box-sizing:border-box; }
    .dp-reject-textarea:focus { outline:none; border-color:var(--orange); }
    .dp-btn-approve { padding:11px; border-radius:9px; background:#10B981; border:none; color:#fff; font-size:14px; font-weight:700; cursor:pointer; transition:.15s; display:flex; align-items:center; justify-content:center; gap:7px; }
    .dp-btn-approve:hover { background:#059669; }
    .dp-btn-approve:disabled { opacity:.5; cursor:not-allowed; }
    .dp-btn-reject-toggle { padding:11px; border-radius:9px; background:#fff; border:1.5px solid #EF4444; color:#EF4444; font-size:14px; font-weight:700; cursor:pointer; transition:.15s; display:flex; align-items:center; justify-content:center; gap:7px; }
    .dp-btn-reject-toggle:hover { background:#FEF2F2; }
    .dp-btn-reject-confirm { padding:11px; border-radius:9px; background:#EF4444; border:none; color:#fff; font-size:14px; font-weight:700; cursor:pointer; transition:.15s; display:flex; align-items:center; justify-content:center; gap:7px; }
    .dp-btn-reject-confirm:hover { background:#DC2626; }
    .dp-btn-reject-confirm:disabled { opacity:.5; cursor:not-allowed; }
    .dp-status-done { padding:14px; border-radius:10px; font-size:14px; font-weight:700; text-align:center; display:flex; align-items:center; justify-content:center; gap:7px; }
    .dp-status-done.approved { background:#D1FAE5; color:#065F46; }
    .dp-status-done.rejected { background:#FEE2E2; color:#991B1B; }
    @media(max-width:600px){ #doc-detail-panel { width:100vw; } }
    .br-body { padding:24px 28px; flex:1; }
    .br-summary { display:grid; grid-template-columns:repeat(5,minmax(120px,1fr)); gap:10px; margin-bottom:14px; }
    .br-summary-card { background:#fff; border:1px solid var(--border); border-radius:10px; padding:12px 14px; }
    .br-summary-label { font-size:10px; font-weight:700; letter-spacing:.45px; color:var(--text-muted); text-transform:uppercase; }
    .br-summary-value { margin-top:3px; font-size:22px; line-height:1; font-weight:800; color:var(--text); }
    .br-filters { display:flex; gap:10px; margin-bottom:18px; align-items:center; flex-wrap:wrap; }
    .br-search { width:240px; min-width:180px; padding:7px 10px; border:1.5px solid var(--border); border-radius:8px; font:inherit; font-size:12px; color:var(--text); background:#fff; }
    .br-search:focus { outline:none; border-color:#0D9488; box-shadow:0 0 0 2px rgba(13,148,136,.12); }
    .br-branch-filter { min-width:170px; padding:7px 28px 7px 10px; border:1.5px solid var(--border); border-radius:8px; font:inherit; font-size:12px; color:var(--text); background:#fff; }
    .br-branch-filter:focus { outline:none; border-color:#0D9488; box-shadow:0 0 0 2px rgba(13,148,136,.12); }
    .br-refresh-btn { margin-left:auto; }
    .br-cleanup-tools { display:none; align-items:center; gap:8px; padding-left:4px; }
    .br-cleanup-tools.open { display:flex; }
    .br-selected-count { min-width:70px; color:var(--text-muted); font-size:12px; font-weight:700; text-align:center; }
    .br-cleanup-btn { display:inline-flex; align-items:center; gap:6px; }
    .br-remove-btn { color:#B91C1C; border-color:#FCA5A5 !important; background:#FFF7F7 !important; }
    .br-remove-btn:hover:not(:disabled) { color:#991B1B; border-color:#EF4444 !important; background:#FEF2F2 !important; }
    .br-remove-btn:disabled { opacity:.45; cursor:not-allowed; }
    .br-filter-btn { padding:6px 14px; border-radius:20px; border:1.5px solid var(--border); background:#fff; font-size:12px; font-weight:600; color:var(--text-muted); cursor:pointer; transition:all 0.15s; }
    .br-filter-btn.active { background:#0D9488; color:#fff; border-color:#0D9488; }
    .br-list { display:flex; flex-direction:column; gap:10px; }
    .br-card { background:#fff; border-radius:12px; box-shadow:0 1px 4px rgba(0,0,0,0.07); border:1.5px solid transparent; cursor:pointer; transition:box-shadow 0.15s,border-color 0.15s; overflow:hidden; }
    .br-card:hover { box-shadow:0 4px 14px rgba(0,0,0,0.1); border-color:rgba(13,148,136,0.25); }
    .br-card-hdr { display:flex; align-items:center; gap:14px; padding:14px 18px; }
    .br-card-icon { width:42px; height:42px; border-radius:50%; background:#F0FDFA; color:#0F766E; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
    .br-icon { width:15px; height:15px; display:inline-block; flex:0 0 auto; vertical-align:-2px; }
    .br-card-icon .br-icon { width:21px; height:21px; }
    .br-select { display:flex; align-items:center; justify-content:center; width:26px; height:26px; border:1px solid #CBD5E1; border-radius:7px; background:#fff; flex:0 0 auto; cursor:pointer; }
    .br-select:hover { border-color:var(--orange); background:#FFF7ED; }
    .br-select input { width:15px; height:15px; margin:0; accent-color:var(--orange); cursor:pointer; }
    .br-card-info { flex:1; min-width:0; }
    .br-card-name { font-weight:700; font-size:14px; color:var(--text); }
    .br-card-vehicle { font-size:12px; color:var(--text-muted); margin-top:2px; }
    .br-card-meta { display:flex; gap:18px; flex-wrap:wrap; font-size:12px; color:var(--text-muted); }
    .br-card-meta span { display:flex; align-items:center; gap:4px; }
    .br-status-pill { padding:3px 10px; border-radius:20px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.3px; }
    .br-status-pending  { background:#FEF3C7; color:#B45309; }
    .br-status-confirmed { background:#D1FAE5; color:#065F46; }
    .br-status-docs { background:#DBEAFE; color:#1D4ED8; }
    .br-status-rejected  { background:#FEE2E2; color:#991B1B; }
    .br-status-cancelled { background:#F3F4F6; color:#6B7280; }
    .br-status-converted { background:#EDE9FE; color:#5B21B6; }
    .br-source-pill { flex-shrink:0; padding:4px 9px; border:1px solid #FED7AA; border-radius:20px; background:#FFF7ED; color:#9A3412; font-size:10px; font-weight:750; white-space:nowrap; }
    .br-source-pill.mobile { border-color:#BFDBFE; background:#EFF6FF; color:#1D4ED8; }
    .br-empty { text-align:center; padding:60px 20px; color:var(--text-muted); font-size:14px; }
    @media(max-width:900px){ .br-summary { grid-template-columns:repeat(2,minmax(120px,1fr)); } .br-search { width:100%; } }
    /* Booking detail panel */
    .br-detail-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.35); z-index:900; align-items:flex-end; justify-content:flex-end; }
    .br-detail-overlay.open { display:flex; }
    .br-detail-panel { background:#fff; width:460px; height:100%; overflow-y:auto; box-shadow:-4px 0 24px rgba(0,0,0,0.12); display:flex; flex-direction:column; }
    .br-detail-hdr { padding:20px 22px 16px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:12px; flex-shrink:0; }
    .br-detail-close { width:32px; height:32px; border-radius:50%; border:none; background:#F3F4F6; cursor:pointer; font-size:18px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
    .br-detail-close:hover { background:#E5E7EB; }
    .br-detail-title { font-size:17px; font-weight:800; color:var(--text); flex:1; }
    .br-detail-body { padding:20px 22px; flex:1; }
    .br-detail-section { margin-bottom:20px; }
    .br-detail-section-title { font-size:11px; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:8px; }
    .br-detail-row { display:flex; justify-content:space-between; align-items:flex-start; padding:6px 0; border-bottom:1px solid #F3F4F6; font-size:13px; }
    .br-detail-row:last-child { border-bottom:none; }
    .br-detail-label { color:var(--text-muted); font-weight:500; flex-shrink:0; margin-right:12px; }
    .br-detail-value { color:var(--text); font-weight:600; text-align:right; }
    .br-detail-notes { background:#F9FAFB; border-radius:8px; padding:10px 12px; font-size:13px; color:var(--text); line-height:1.5; white-space:pre-wrap; margin-top:4px; }
    .br-actions { padding:16px 22px; border-top:1px solid var(--border); display:flex; flex-direction:column; gap:8px; flex-shrink:0; }
    .br-actions-row { display:flex; gap:8px; }
    .br-action-btn { flex:1; padding:10px; border-radius:8px; border:none; font-size:13px; font-weight:700; cursor:pointer; transition:opacity 0.15s; }
    .br-action-btn:hover { opacity:0.85; }
    .br-action-btn:disabled { opacity:0.4; cursor:not-allowed; }
    .br-btn-confirm  { background:#0D9488; color:#fff; }
    .br-btn-reject   { background:#EF4444; color:#fff; }
    .br-btn-cancel   { background:#6B7280; color:#fff; }
    .br-btn-convert  { background:#7C3AED; color:#fff; }
    .br-btn-docs     { background:#D97706; color:#fff; }
    .br-btn-save-notes { background:#F3F4F6; color:#374151; border:1px solid var(--border) !important; font-size:12px; padding:6px 14px; align-self:flex-end; flex:0 !important; }
    .br-staff-notes { width:100%; border:1.5px solid var(--border); border-radius:8px; padding:8px 10px; font-size:13px; font-family:inherit; resize:vertical; min-height:60px; }
    .br-staff-notes:focus { outline:none; border-color:#0D9488; }
    .br-status-docs  { background:#FEF9C3; color:#854D0E; }
    /* Inline reason box — reject (red) and docs-request (amber) */
    .br-reason-box { display:none; flex-direction:column; gap:8px; border-radius:8px; padding:12px; margin-top:2px; }
    .br-reason-box.open { display:flex; }
    .br-reason-box.reject { background:#FFF1F2; border:1.5px solid #FECACA; }
    .br-reason-box.docs   { background:#FFFBEB; border:1.5px solid #FDE68A; }
    .br-reason-box-label { font-size:12px; font-weight:700; }
    .br-reason-box.reject .br-reason-box-label { color:#991B1B; }
    .br-reason-box.docs   .br-reason-box-label { color:#92400E; }
    .br-reason-box-hint { font-size:11px; color:var(--text-muted); margin-top:-4px; }
    .br-reason-textarea { border-radius:6px; padding:8px 10px; font-size:13px; resize:vertical; min-height:72px; font-family:inherit; outline:none; width:100%; box-sizing:border-box; }
    .br-reason-box.reject .br-reason-textarea { border:1.5px solid #FCA5A5; }
    .br-reason-box.reject .br-reason-textarea:focus { border-color:#EF4444; box-shadow:0 0 0 2px rgba(239,68,68,0.08); }
    .br-reason-box.docs   .br-reason-textarea { border:1.5px solid #FCD34D; }
    .br-reason-box.docs   .br-reason-textarea:focus { border-color:#D97706; box-shadow:0 0 0 2px rgba(217,119,6,0.08); }
    .br-reason-box-btns { display:flex; gap:8px; align-items:center; }
    .br-reason-confirm-btn { padding:8px 16px; border-radius:7px; border:none; font-size:13px; font-weight:700; cursor:pointer; color:#fff; }
    .br-reason-box.reject .br-reason-confirm-btn { background:#EF4444; }
    .br-reason-box.docs   .br-reason-confirm-btn { background:#D97706; }
    .br-reason-cancel-link { font-size:12px; color:var(--text-muted); cursor:pointer; text-decoration:underline; }
    /* Customer-facing reason display in detail body */
    .br-customer-msg { background:#FFF7ED; border:1.5px solid #FED7AA; border-radius:8px; padding:10px 12px; font-size:13px; color:#92400E; line-height:1.5; margin-top:4px; }
    .br-reject-msg   { background:#FFF1F2; border:1.5px solid #FECACA; border-radius:8px; padding:10px 12px; font-size:13px; color:#991B1B; line-height:1.5; margin-top:4px; }
    .br-notif-badge  { display:inline-flex; align-items:center; gap:5px; background:#EFF6FF; color:#1D4ED8; border:1px solid #BFDBFE; border-radius:6px; font-size:11px; font-weight:700; padding:3px 8px; margin-top:6px; }
    .br-contact-badge { display:inline-flex; align-items:center; gap:5px; border-radius:6px; font-size:11px; font-weight:700; padding:3px 8px; white-space:nowrap; }
    .br-contact-needed { background:#FFF7ED; color:#9A3412; border:1px solid #FED7AA; }
    .br-contact-planned { background:#EFF6FF; color:#1D4ED8; border:1px solid #BFDBFE; }
    .br-contact-due { background:#FEF2F2; color:#B91C1C; border:1px solid #FECACA; }
    .br-followup-card { border:1px solid #DCE4EB; border-radius:10px; background:#F8FAFC; padding:12px; }
    .br-followup-card.due { border-color:#FCA5A5; background:#FFF7F7; }
    .br-followup-head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
    .br-followup-title { font-size:12px; font-weight:800; color:var(--text); }
    .br-followup-meta { font-size:11px; color:var(--text-muted); margin-top:3px; }
    .br-followup-form { margin-top:10px; display:grid; grid-template-columns:1fr 1fr; gap:8px; }
    .br-followup-field { display:flex; flex-direction:column; gap:4px; }
    .br-followup-field.full { grid-column:1/-1; }
    .br-followup-field label { font-size:10px; font-weight:700; color:var(--text-muted); letter-spacing:.35px; text-transform:uppercase; }
    .br-followup-field input, .br-followup-field select, .br-followup-field textarea { width:100%; box-sizing:border-box; border:1.5px solid var(--border); border-radius:7px; background:#fff; padding:7px 9px; font:inherit; font-size:12px; }
    .br-followup-field textarea { min-height:58px; resize:vertical; }
    .br-followup-field input:focus, .br-followup-field select:focus, .br-followup-field textarea:focus { outline:none; border-color:#0D9488; box-shadow:0 0 0 2px rgba(13,148,136,.1); }
    .br-followup-actions { grid-column:1/-1; display:flex; gap:8px; flex-wrap:wrap; }
    .br-followup-btn { border:1px solid var(--border); border-radius:7px; padding:7px 10px; background:#fff; color:#374151; font-size:11px; font-weight:750; cursor:pointer; }
    .br-followup-btn.primary { border-color:#0D9488; background:#0D9488; color:#fff; }
    .br-followup-btn.cancel { color:#B91C1C; border-color:#FCA5A5; }
    .br-followup-history { display:flex; flex-direction:column; gap:7px; margin-top:10px; }
    .br-followup-history-row { border-left:3px solid #CBD5E1; padding:3px 0 3px 9px; }
    .br-followup-history-row.completed { border-left-color:#10B981; }
    .br-followup-history-row.cancelled { border-left-color:#9CA3AF; }
    .br-followup-history-main { font-size:12px; font-weight:700; color:var(--text); }
    .br-followup-history-note { font-size:11px; color:#4B5563; margin-top:2px; white-space:pre-wrap; }
    .br-followup-history-meta { font-size:10px; color:var(--text-muted); margin-top:2px; }
    @media(max-width:900px) {
      .br-refresh-btn { margin-left:0; }
      .br-cleanup-tools { width:100%; padding-left:0; }
    }
    /* Admin header */
    .adm-hdr { background:linear-gradient(115deg,#FFFFFF 0%,#FFF8F2 100%); border-bottom:1px solid #E4E9EF; padding:20px 28px; display:flex; align-items:center; gap:20px; flex-shrink:0; }
    .adm-hdr-copy { display:flex; align-items:center; gap:13px; min-width:0; }
    .adm-hdr-mark { width:40px; height:40px; display:flex; align-items:center; justify-content:center; flex:0 0 auto; border-radius:12px; color:#fff; background:#0A1D26; box-shadow:0 8px 18px rgba(10,29,38,.16); }
    .adm-hdr-mark svg { width:19px; height:19px; }
    .adm-hdr-eyebrow { color:#C2410C; font-size:9px; font-weight:850; letter-spacing:.13em; text-transform:uppercase; }
    .adm-hdr-title { margin-top:2px; font-size:18px; line-height:1.2; font-weight:800; color:#0A1D26; }
    .adm-hdr-subtitle { margin-top:2px; color:#72808B; font-size:11px; }
    .adm-hdr-search { margin-left:auto; position:relative; flex:0 0 auto; }
    .adm-hdr-search input { padding:10px 14px 10px 37px; border:1px solid #D7E0E7; border-radius:10px; font-size:12px; font-family:inherit; outline:none; width:260px; background:#fff; box-shadow:0 3px 10px rgba(8,28,38,.04); }
    .adm-hdr-search input:focus { border-color:var(--orange); box-shadow:0 0 0 3px rgba(249,115,22,0.1); }
    .adm-hdr-search-icon { position:absolute; left:10px; top:50%; transform:translateY(-50%); color:#9CA3AF; pointer-events:none; }
    /* Admin workspace and category navigation */
    .adm-workspace { width:100%; padding:24px 28px 30px; display:grid; grid-template-columns:244px minmax(0,1fr); gap:18px; flex:1; min-height:0; overflow:hidden; }
    .adm-cat-row { min-height:0; overflow-y:auto; align-self:stretch; padding:10px; background:#fff; border:1px solid #DDE5EB; border-radius:14px; box-shadow:0 7px 24px rgba(7,24,32,.055); }
    .adm-cat-group { padding:13px 11px 7px; color:#97A3AD; font-size:9px; line-height:1; font-weight:850; letter-spacing:.12em; text-transform:uppercase; }
    .adm-cat-group:first-child { padding-top:8px; }
    .adm-cat-btn { width:100%; display:grid; grid-template-columns:30px minmax(0,1fr) 14px; align-items:center; gap:9px; min-height:42px; margin:2px 0; padding:6px 9px; background:transparent; color:#53616C; border:1px solid transparent; border-radius:9px; font-size:12px; font-weight:680; text-align:left; cursor:pointer; font-family:inherit; transition:background .16s,color .16s,border-color .16s,transform .16s; }
    .adm-cat-btn:hover { color:#152832; background:#F7F9FA; border-color:#E5EBEF; transform:translateX(1px); }
    .adm-cat-btn.active { color:#9A3412; background:#FFF3E9; border-color:#FED7AA; box-shadow:inset 3px 0 0 var(--orange); }
    .adm-cat-icon { width:28px; height:28px; display:flex; align-items:center; justify-content:center; border-radius:8px; color:#647581; background:#F1F4F6; }
    .adm-cat-icon svg { width:14px; height:14px; }
    .adm-cat-btn.active .adm-cat-icon { color:#fff; background:var(--orange); box-shadow:0 4px 9px rgba(249,115,22,.22); }
    .adm-cat-label { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .adm-cat-chevron { color:#BBC4CB; font-size:15px; line-height:1; text-align:center; }
    .adm-cat-btn.active .adm-cat-chevron { color:#EA7B35; }
    .adm-cat-btn.hidden { display:none; }
    /* Admin content */
    .adm-content { min-width:0; overflow-y:auto; padding:0 5px 30px 0; }
    .adm-content-heading { min-height:74px; display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:2px 3px 14px; }
    .adm-content-kicker { color:var(--orange); font-size:9px; font-weight:850; letter-spacing:.12em; text-transform:uppercase; }
    .adm-content-title { margin:4px 0 3px; color:#0A1D26; font-size:21px; line-height:1.18; font-weight:820; letter-spacing:-.025em; }
    .adm-content-description { margin:0; max-width:680px; color:#75828C; font-size:12px; line-height:1.5; }
    .adm-owner-pill { flex:0 0 auto; display:inline-flex; align-items:center; gap:7px; margin-top:7px; padding:7px 10px; border:1px solid #DDE5EB; border-radius:999px; color:#56646E; background:#fff; font-size:10px; font-weight:750; box-shadow:0 3px 10px rgba(8,28,38,.04); }
    .adm-owner-pill::before { content:''; width:6px; height:6px; border-radius:50%; background:#16A34A; box-shadow:0 0 0 3px #DCFCE7; }
    .adm-section { display:none; width:100%; background:#fff; border:1px solid #DDE5EB; border-radius:14px; padding:26px 28px; box-shadow:0 8px 28px rgba(7,24,32,.055); }
    .adm-section.active { display:block; }
    .theme-surface-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
    .theme-surface-card { padding:17px; border:1px solid #DDE5EB; border-radius:13px; background:#F8FAFC; }
    .theme-surface-card h3 { margin:0; font-size:14px; color:#172B36; }
    .theme-surface-card > p { margin:4px 0 14px; color:#71808A; font-size:11px; line-height:1.45; }
    .theme-preset-list { display:grid; gap:7px; margin-bottom:13px; }
    .theme-preset-option { display:flex; align-items:center; gap:9px; padding:9px; border:1px solid #DCE4EB; border-radius:9px; background:#fff; cursor:pointer; }
    .theme-preset-option:has(input:checked) { border-color:var(--orange); box-shadow:0 0 0 2px rgba(249,115,22,.10); }
    .theme-preset-option input { accent-color:var(--orange); }
    .theme-preset-swatch { width:38px; height:22px; border-radius:7px; border:1px solid rgba(15,23,42,.10); background:linear-gradient(90deg,var(--swatch-nav) 0 58%,var(--swatch-primary) 58%); }
    .theme-colours { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
    .theme-colours label { color:#64748B; font-size:10px; font-weight:800; text-transform:uppercase; }
    .theme-colours input { display:block; width:100%; height:38px; margin-top:5px; padding:3px; border:1px solid #CBD5E1; border-radius:8px; background:#fff; }
    .theme-preview { height:72px; margin-top:13px; padding:10px; border-radius:10px; color:#fff; background:var(--preview-nav); box-shadow:inset 0 -22px 0 rgba(255,255,255,.10); }
    .theme-preview span { display:inline-block; padding:5px 9px; border-radius:7px; background:var(--preview-primary); font-size:10px; font-weight:850; }
    @media(max-width:1050px){.theme-surface-grid{grid-template-columns:1fr}}
    .capacity-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:14px; }
    .capacity-card { border:1px solid #DCE4EB; border-radius:10px; padding:15px; background:#F8FAFC; }
    .capacity-card span { display:block; color:var(--text-muted); font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
    .capacity-card strong { display:block; margin-top:5px; color:var(--text); font-size:20px; }
    .capacity-card small { display:block; margin-top:4px; color:var(--text-muted); font-size:11px; line-height:1.45; }
    .capacity-card.at-limit { border-color:#FED7AA; background:#FFF7ED; }
    .capacity-package { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px; border:1px solid #FED7AA; border-radius:10px; background:#FFF7ED; }
    .capacity-package strong { color:#9A3412; }
    .branch-admin-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:16px; }
    .branch-admin-head p { margin:4px 0 0; color:var(--text-muted); font-size:12px; line-height:1.5; }
    .branch-capacity-pill { flex:0 0 auto; padding:7px 10px; border:1px solid #FED7AA; border-radius:999px; background:#FFF7ED; color:#9A3412; font-size:11px; font-weight:800; }
    .branch-capacity-pill.at-limit { border-color:#FCA5A5; background:#FEF2F2; color:#B91C1C; }
    .branch-admin-list { display:grid; gap:12px; }
    .branch-admin-card { border:1px solid #DCE4EB; border-radius:11px; padding:16px; background:#F8FAFC; }
    .branch-admin-card.inactive { opacity:.72; background:#F3F4F6; }
    .branch-admin-card-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
    .branch-admin-card-head strong { font-size:14px; }
    .branch-admin-badges { display:flex; gap:6px; flex-wrap:wrap; }
    .branch-admin-badge { padding:4px 7px; border-radius:999px; background:#E5E7EB; color:#4B5563; font-size:9px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }
    .branch-admin-badge.default { background:#FFEDD5; color:#C2410C; }
    .branch-admin-badge.active { background:#DCFCE7; color:#166534; }
    .branch-admin-fields { display:grid; grid-template-columns:1fr 1fr; gap:10px 12px; }
    .branch-admin-fields .wide { grid-column:1/-1; }
    .branch-admin-check { display:flex; align-items:center; gap:8px; margin-top:12px; color:#374151; font-size:12px; }
    .branch-admin-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; padding-top:12px; border-top:1px solid #E5E7EB; }
    .branch-add-panel { margin-top:18px; padding:18px; border:1px dashed #FDBA74; border-radius:11px; background:#FFF7ED; }
    .branch-add-panel h3 { margin:0 0 12px; font-size:14px; color:#9A3412; }
    #adms-branches { max-width:none; }
    #adms-staff { max-width:none; }
    #adms-actlog { max-width:none; }
    #adms-booking-engine { max-width:none; padding:0; border:0; background:transparent; }
    .sys-users-table-wrap { border:1px solid #DCE4EB; border-radius:12px; overflow-x:auto; box-shadow:var(--shadow-sm); background:#fff; }
    .sys-users-table { min-width:900px; }
    .adm-section-title { font-size:11px; font-weight:800; color:var(--orange); text-transform:uppercase; letter-spacing:.5px; margin-bottom:14px; }
    .adm-two-col { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
    .adm-save-row { margin-top:20px; padding-top:16px; border-top:1px solid var(--border); }
    #admin-page.open { display:flex; }
    .admin-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; width:100%; max-width:none; }
    .admin-card { background:#fff; border:1px solid var(--border); border-radius:12px; padding:22px 24px; }
    .admin-card.full { grid-column:span 2; }
    .admin-card-title { font-size:13px; font-weight:800; color:var(--text); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:16px; padding-bottom:10px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:8px; }
    .admin-card-title svg { color:var(--orange); }
    .admin-field { margin-bottom:12px; }
    .admin-field:last-child { margin-bottom:0; }
    .admin-label { font-size:11px; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:4px; display:block; }
    .admin-input { width:100%; padding:8px 11px; border:1.5px solid var(--border); border-radius:7px; font-size:13px; color:var(--text); font-family:inherit; outline:none; }
    .admin-input:focus { border-color:var(--orange); box-shadow:0 0 0 3px rgba(249,115,22,0.1); }
    textarea.admin-input { resize:vertical; min-height:80px; line-height:1.5; }
    .admin-save-btn { margin-top:14px; }
    .sb-agreement-plan { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-bottom:18px; }
    .sb-agreement-plan-step { border:1px solid #DCE4EB; border-radius:10px; padding:12px 13px; background:#F8FAFC; }
    .sb-agreement-plan-step strong { display:block; color:#172B36; font-size:12px; }
    .sb-agreement-plan-step span { display:block; margin-top:3px; color:#6B7B87; font-size:10px; line-height:1.45; }
    .sb-agreement-plan-step.editable { border-color:#FED7AA; background:#FFF7ED; }
    .sb-agreement-editor-tabs { display:flex; gap:8px; padding:5px; margin-bottom:22px; border:1px solid #DDE5EB; border-radius:12px; background:#F8FAFC; }
    .sb-agreement-editor-tab { flex:1; border:0; border-radius:9px; padding:11px 14px; background:transparent; color:#5F7180; font:inherit; font-size:13px; font-weight:750; cursor:pointer; }
    .sb-agreement-editor-tab.active { background:#fff; color:#C75012; box-shadow:0 2px 8px rgba(7,24,32,.09); }
    .sb-agreement-editor-panel[hidden] { display:none !important; }
    .sb-agreement-plan-step.editable strong { color:#9A3412; }
    .sb-agreement-pages { display:grid; gap:12px; }
    .sb-agreement-page-editor { border:1px solid #DCE4EB; border-radius:11px; padding:15px; background:#F8FAFC; }
    .sb-agreement-page-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:11px; }
    .sb-agreement-page-head strong { font-size:13px; color:#172B36; }
    .sb-agreement-page-remove { border:0; background:transparent; color:#B91C1C; font-size:11px; font-weight:750; cursor:pointer; }
    .sb-agreement-page-remove:disabled { display:none; }
    .sb-agreement-page-help { margin:8px 0 0; color:#6B7B87; font-size:11px; line-height:1.45; }
    .sb-agreement-page-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:12px; }
    .sb-agreement-page-count { color:#64748B; font-size:11px; font-weight:700; }
    .be-admin-status { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:18px; padding:13px 15px; border:1px solid #FED7AA; border-radius:10px; background:#FFF7ED; }
    .be-admin-status strong { display:block; font-size:13px; color:#9A3412; }
    .be-admin-status span { display:block; margin-top:3px; font-size:11px; color:#9A5A30; }
    .be-admin-status.active { border-color:#A7F3D0; background:#ECFDF5; }
    .be-admin-status.active strong { color:#065F46; }
    .be-admin-status.active span { color:#39705A; }
    .be-page-intro { margin:0 0 14px; font-size:12px; line-height:1.55; color:var(--text-muted); }
    .be-editor-stack { min-width:0; display:grid; gap:16px; }
    .be-panel { min-width:0; padding:18px; border:1px solid var(--border); border-radius:12px; background:#fff; box-shadow:var(--shadow-sm); }
    .be-panel-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:15px; }
    .be-panel-head strong { display:block; font-size:14px; color:var(--text); }
    .be-panel-head span { display:block; margin-top:3px; color:var(--text-muted); font-size:10px; line-height:1.45; }
    .be-theme-grid { display:grid; grid-template-columns:repeat(3,minmax(150px,1fr)); gap:10px; margin-bottom:16px; }
    .be-theme-option { position:relative; display:block; cursor:pointer; }
    .be-theme-option input { position:absolute; opacity:0; pointer-events:none; }
    .be-theme-card { min-height:112px; height:100%; padding:13px; display:flex; flex-direction:column; border:1.5px solid var(--border); border-radius:10px; background:#fff; transition:.15s ease; }
    .be-theme-option input:checked + .be-theme-card { border-color:var(--orange); box-shadow:0 0 0 3px rgba(249,115,22,.1); }
    .be-theme-card strong { display:block; margin-bottom:3px; font-size:12px; }
    .be-theme-card small { color:var(--text-muted); font-size:10px; line-height:1.45; }
    .be-theme-swatches { display:flex; gap:5px; margin-bottom:10px; }
    .be-theme-swatches i { width:25px; height:12px; border-radius:999px; }
    .be-admin-layout { display:grid; grid-template-columns:minmax(620px,1fr) minmax(320px,380px); gap:20px; align-items:start; }
    .be-admin-form { display:grid; grid-template-columns:1fr 1fr; gap:12px 14px; }
    .be-admin-form .full { grid-column:1/-1; }
    .be-preview-column { position:sticky; top:18px; align-self:start; min-width:0; }
    .be-preview-label { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; color:var(--text-muted); font-size:10px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; }
    .be-preview-label span:last-child { color:#15803D; letter-spacing:0; text-transform:none; }
    .be-action-bar { position:sticky; bottom:0; z-index:8; display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:0; padding:13px 16px; border:1px solid var(--border); border-radius:11px; background:rgba(255,255,255,.96); box-shadow:0 -7px 22px rgba(7,24,32,.08); backdrop-filter:blur(8px); }
    .be-action-copy strong { display:block; font-size:12px; color:var(--text); }
    .be-action-copy span { display:block; margin-top:2px; font-size:10px; color:var(--text-muted); }
    .be-action-buttons { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
    .bm-lock-banner { display:flex; align-items:flex-start; gap:11px; padding:13px 15px; margin-bottom:16px; border:1px solid #FCD34D; border-radius:10px; background:#FFFBEB; color:#92400E; }
    .bm-lock-banner strong { display:block; font-size:13px; }
    .bm-lock-banner span { display:block; margin-top:3px; font-size:11px; line-height:1.45; }
    .bm-provider-panel { margin:16px 0; padding:15px; border:1px solid var(--border); border-radius:10px; background:#F8FAFC; }
    .bm-provider-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:12px; }
    .bm-provider-head strong { display:block; font-size:13px; color:var(--text); }
    .bm-provider-head span { display:block; margin-top:3px; font-size:11px; line-height:1.45; color:var(--text-muted); }
    .bm-readiness { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; margin-top:12px; }
    .bm-readiness-card { padding:11px; border:1px solid #E2E8F0; border-radius:8px; background:#fff; }
    .bm-readiness-card strong { display:block; margin-bottom:3px; font-size:12px; color:#334155; }
    .bm-readiness-card span { display:block; font-size:10px; line-height:1.45; color:#64748B; }
    .bm-readiness-blockers { grid-column:1/-1; padding:11px; border:1px solid #FCD34D; border-radius:8px; background:#FFFBEB; color:#92400E; }
    .bm-readiness-blockers strong { display:block; margin-bottom:5px; font-size:11px; }
    .bm-readiness-blockers ul { margin:0; padding-left:18px; font-size:10px; line-height:1.55; }
    .bm-template-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:16px; }
    .bm-template-card { border:1px solid var(--border); border-radius:10px; padding:13px; background:#fff; box-shadow:var(--shadow-sm); }
    .bm-template-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:10px; }
    .bm-template-card-head strong { display:block; font-size:13px; color:var(--text); }
    .bm-template-card-head small { display:block; margin-top:2px; color:var(--text-muted); font-size:10px; text-transform:uppercase; letter-spacing:.45px; }
    .bm-template-card textarea { min-height:112px; resize:vertical; line-height:1.45; }
    .bm-placeholder-list { display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
    .bm-placeholder-list code { padding:4px 6px; border:1px solid #E5E7EB; border-radius:5px; background:#F9FAFB; color:#475569; font-size:10px; }
    .br-message-box { margin-top:9px; padding:11px; border:1px solid #D8E1EA; border-radius:9px; background:#F8FAFC; }
    .br-message-controls { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
    .br-message-controls select { width:100%; padding:8px 9px; border:1px solid #D1D5DB; border-radius:7px; background:#fff; font:inherit; font-size:12px; }
    .br-message-actions { display:flex; gap:7px; flex-wrap:wrap; margin-top:9px; }
    .br-message-preview { display:none; margin-top:9px; border:1px solid #CBD5E1; border-radius:8px; overflow:hidden; background:#fff; }
    .br-message-preview.show { display:block; }
    .br-message-preview-row { padding:8px 10px; border-bottom:1px solid #EEF2F7; font-size:11px; color:#64748B; }
    .br-message-preview-row strong { color:#334155; }
    .br-message-preview-body { padding:10px; white-space:pre-wrap; font-size:12px; line-height:1.5; color:#1F2937; }
    .br-outbox-row { padding:8px 0; border-bottom:1px solid #EEF2F7; }
    .br-outbox-row:last-child { border-bottom:none; }
    .br-outbox-main { display:flex; justify-content:space-between; gap:10px; font-size:12px; font-weight:700; color:#334155; }
    .br-held-pill { color:#92400E; background:#FEF3C7; border-radius:999px; padding:2px 7px; font-size:9px; text-transform:uppercase; letter-spacing:.4px; }
    .br-outbox-meta { margin-top:3px; font-size:10px; color:#64748B; }
    .be-color-input { height:40px; padding:4px; cursor:pointer; }
    .be-catalog-editor { margin:0; }
    .be-catalog-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:11px; }
    .be-catalog-head strong { display:block; font-size:13px; }
    .be-catalog-head span { display:block; margin-top:3px; color:var(--text-muted); font-size:10px; line-height:1.45; }
    .be-catalog-tools { display:flex; align-items:center; gap:8px; flex-shrink:0; }
    .be-catalog-search { width:210px; min-height:34px; padding:7px 10px; border:1px solid var(--border); border-radius:8px; color:var(--text); background:#fff; font:inherit; font-size:11px; outline:none; }
    .be-catalog-search:focus { border-color:var(--orange); box-shadow:0 0 0 2px rgba(249,115,22,.1); }
    .be-catalog-count { flex-shrink:0; padding:4px 9px; border-radius:999px; background:#FFF7ED; color:#9A3412; font-size:10px; font-weight:800; }
    .be-catalog-columns { display:grid; grid-template-columns:26px minmax(170px,1fr) 92px 68px; gap:10px; align-items:center; padding:7px 12px; border:1px solid var(--border); border-bottom:0; border-radius:9px 9px 0 0; color:var(--text-muted); background:#F8FAFC; font-size:9px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }
    .be-catalog-columns span:nth-child(3), .be-catalog-columns span:nth-child(4) { text-align:center; }
    .be-catalog-list { display:grid; gap:0; border:1px solid var(--border); border-radius:0 0 9px 9px; overflow:hidden; }
    .be-catalog-empty { padding:18px; border:1px dashed var(--border); border-radius:10px; color:var(--text-muted); font-size:11px; text-align:center; }
    .be-catalog-list .be-catalog-empty { border:0; border-radius:0; }
    .be-catalog-item { overflow:hidden; border-bottom:1px solid var(--border); background:#fff; }
    .be-catalog-item:last-child { border-bottom:0; }
    .be-catalog-item[hidden] { display:none; }
    .be-catalog-item-head { display:grid; grid-template-columns:26px minmax(170px,1fr) 92px 68px; align-items:center; gap:10px; padding:9px 12px; background:#fff; }
    .be-catalog-item.editing .be-catalog-item-head { background:#FFF7ED; }
    .be-catalog-item-head input { width:16px; height:16px; accent-color:var(--orange); }
    .be-catalog-item-title { min-width:0; }
    .be-catalog-item-title strong { display:block; overflow:hidden; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
    .be-catalog-item-title span { color:var(--text-muted); font-size:9px; }
    .be-catalog-item-head label { display:flex; align-items:center; justify-content:center; gap:6px; font-size:10px; font-weight:750; }
    .be-catalog-edit-btn { min-height:28px; padding:0 9px; border:1px solid var(--border); border-radius:7px; color:#475569; background:#fff; font:inherit; font-size:10px; font-weight:800; cursor:pointer; }
    .be-catalog-edit-btn:hover { border-color:#FDBA74; color:#C2410C; background:#FFF7ED; }
    .be-catalog-item.editing .be-catalog-edit-btn { border-color:var(--orange); color:#fff; background:var(--orange); }
    .be-catalog-fields { display:none; grid-template-columns:minmax(0,1fr) 92px; gap:9px 10px; padding:13px 12px 14px; border-top:1px solid #FED7AA; background:#FFFCF8; }
    .be-catalog-item.editing .be-catalog-fields { display:grid; }
    .be-catalog-field { min-width:0; }
    .be-catalog-field.full { grid-column:1/-1; }
    .be-catalog-field label { display:block; margin-bottom:5px; color:var(--text-muted); font-size:9px; font-weight:750; text-transform:uppercase; letter-spacing:.04em; }
    .be-catalog-field input { width:100%; min-height:35px; border:1px solid var(--border); border-radius:7px; padding:7px 9px; color:var(--text); background:#fff; font:inherit; font-size:11px; }
    .be-catalog-field input:focus { outline:none; border-color:var(--orange); box-shadow:0 0 0 2px rgba(249,115,22,.1); }
    .be-photo-editor { display:grid; grid-template-columns:96px minmax(0,1fr); gap:10px; align-items:start; }
    .be-photo-thumb { width:96px; height:72px; border:1px solid var(--border); border-radius:8px; object-fit:cover; background:#F1F5F9; }
    .be-photo-thumb.empty { object-fit:contain; padding:18px; opacity:.58; }
    .be-photo-controls { min-width:0; display:flex; gap:7px; flex-wrap:wrap; align-items:center; }
    .be-photo-upload { position:relative; overflow:hidden; display:inline-flex; align-items:center; justify-content:center; min-height:32px; padding:0 10px; border:1px solid var(--orange); border-radius:7px; color:#C2410C; background:#FFF7ED; font-size:10px; font-weight:800; cursor:pointer; }
    .be-photo-upload input { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }
    .be-photo-clear { min-height:32px; padding:0 10px; border:1px solid var(--border); border-radius:7px; color:var(--text-muted); background:#fff; font:inherit; font-size:10px; font-weight:750; cursor:pointer; }
    .be-photo-clear:disabled { cursor:not-allowed; opacity:.5; }
    .be-photo-status { flex-basis:100%; min-height:14px; color:var(--text-muted); font-size:9px; line-height:1.45; }
    .be-photo-status.error { color:#B91C1C; }
    .be-photo-help { margin-top:6px; color:var(--text-muted); font-size:9px; line-height:1.45; }
    .be-preview-shell { overflow:hidden; border:1px solid #303030; border-radius:13px; color:#fff; background:#181818; box-shadow:var(--shadow-sm); }
    .be-preview-top { height:36px; display:flex; align-items:center; justify-content:space-between; padding:0 12px; color:#fff; background:var(--be-preview-accent,#0B2935); font-size:8px; font-weight:800; }
    .be-preview-hero { padding:29px 16px 39px; color:#fff; background:linear-gradient(rgba(8,17,21,.58),rgba(8,17,21,.75)),url('../../booking/assets/restar-fleet-hero.webp') center/cover; }
    .be-preview-hero small { color:var(--be-preview-primary,#F97316); font-size:7px; font-weight:900; letter-spacing:.14em; text-transform:uppercase; }
    .be-preview-hero strong { display:block; margin-top:7px; font-size:19px; line-height:1.05; letter-spacing:-.04em; }
    .be-preview-search { display:grid; grid-template-columns:1fr 1fr; gap:5px; margin:10px; padding:9px; border-left:3px solid var(--be-preview-primary,#F97316); border-radius:8px; background:#232323; box-shadow:0 6px 16px rgba(0,0,0,.24); }
    .be-preview-search > small { grid-column:1/-1; color:var(--be-preview-primary,#F97316); font-size:6px; font-weight:900; letter-spacing:.13em; }
    .be-preview-search div { min-width:0; padding:5px 6px; border:1px solid #3B3B3B; border-radius:4px; background:#181818; }
    .be-preview-search div em { display:block; color:#999; font-size:5px; font-style:normal; text-transform:uppercase; }
    .be-preview-search div span { display:block; overflow:hidden; margin-top:2px; color:#fff; font-size:7px; font-weight:700; white-space:nowrap; }
    .be-preview-search b { grid-column:1/-1; height:19px; border-radius:4px; color:#171717; background:var(--be-preview-primary,#F97316); font-size:7px; line-height:19px; text-align:center; }
    .be-preview-filters { display:flex; gap:4px; padding:2px 10px 5px; }
    .be-preview-filters span { padding:3px 6px; border:1px solid #383838; border-radius:999px; color:#aaa; font-size:6px; }
    .be-preview-filters span:first-child { border-color:var(--be-preview-primary,#F97316); color:#171717; background:var(--be-preview-primary,#F97316); }
    .be-preview-fleet { padding:18px 10px 12px; }
    .be-preview-fleet > strong { display:block; margin-bottom:8px; font-size:9px; }
    .be-preview-car { overflow:hidden; border:1px solid #353535; border-radius:8px; color:#fff; background:#232323; }
    .be-preview-car-visual { height:82px; padding:9px; display:flex; align-items:flex-end; color:#fff; background:linear-gradient(0deg,rgba(0,0,0,.58),rgba(0,0,0,.04)),url('../../booking/assets/sample-myvi.webp') center/cover; font-size:10px; font-weight:850; }
    .be-preview-car-info { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:9px; font-size:8px; }
    .be-preview-car-info button { border:0; border-radius:999px; padding:5px 8px; color:#171717; background:var(--be-preview-primary,#F97316); font-size:7px; font-weight:800; }
    .be-preview-caption { padding:0 10px 12px; color:#7A8990; font-size:8px; text-align:center; }
    .be-preview-shell.theme-minimal { border-color:#D7E0E4; color:#15252D; background:#F7F4EF; }
    .be-preview-shell.theme-minimal .be-preview-hero { color:#15252D; background:linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,.82)),url('../../booking/assets/restar-fleet-hero.webp') center/cover; }
    .be-preview-shell.theme-minimal .be-preview-top { background:#fff; color:#15252D; border-bottom:1px solid #E1E8EB; }
    .be-preview-shell.theme-minimal .be-preview-search,.be-preview-shell.theme-minimal .be-preview-car { color:#15252D; background:#fff; border-color:#E1E8EB; }
    .be-preview-shell.theme-minimal .be-preview-search div { background:#F7F9FA; border-color:#E1E8EB; }.be-preview-shell.theme-minimal .be-preview-search div span { color:#15252D; }.be-preview-shell.theme-minimal .be-preview-filters span { border-color:#D7E0E4; color:#62727A; }
    .be-preview-shell.theme-bold .be-preview-hero strong { text-transform:uppercase; }
    .be-preview-shell.theme-bold .be-preview-car { border-width:2px; border-color:var(--be-preview-accent); }
    .logo-preview { width:120px; height:60px; object-fit:contain; border:1px solid var(--border); border-radius:6px; display:none; margin-bottom:8px; }
    .biz-section { margin-bottom:18px; padding-bottom:16px; border-bottom:1px solid var(--border); }
    .biz-section:last-child { margin-bottom:0; padding-bottom:0; border-bottom:none; }
    .biz-section-title { font-size:11px; font-weight:800; color:var(--orange); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:10px; }
    .biz-row { display:flex; gap:16px; align-items:flex-start; flex-wrap:wrap; }
    .biz-row .admin-field { flex:1; min-width:160px; }
    .biz-toggle-row { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
    .biz-toggle-row label { font-size:13px; color:var(--text); cursor:pointer; }
    .biz-methods-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:6px; }
    .biz-method-item { display:flex; align-items:center; gap:6px; font-size:13px; color:var(--text); }
    .biz-method-item input[type=checkbox] { accent-color:var(--orange); width:15px; height:15px; }
    /* Vehicle Category Admin */
    .vc-table { width:100%; border-collapse:collapse; font-size:13px; }
    .vc-table th { font-size:10.5px; font-weight:750; color:var(--text-muted); text-transform:uppercase; letter-spacing:.5px; padding:10px 12px; text-align:left; border-bottom:1px solid #CBD5E1; background:#F8FAFC; }
    .vc-table td { padding:9px 12px; border-bottom:1px solid #E8EDF2; vertical-align:middle; }
    .vc-table tr:last-child td { border-bottom:none; }
    .vc-table input[type=text], .vc-table input[type=number] { height:30px; border:1px solid var(--border); border-radius:5px; padding:0 8px; font-size:12.5px; outline:none; width:100%; }
    .vc-table input:focus { border-color:var(--orange); }
    .vc-active-toggle { accent-color:var(--orange); width:15px; height:15px; cursor:pointer; }
    .vc-del-btn { background:none; border:none; color:#DC2626; cursor:pointer; font-size:16px; padding:2px 6px; border-radius:4px; }
    .vc-del-btn:hover { background:#FEF2F2; }
    .vc-add-row { display:flex; gap:8px; margin-top:12px; align-items:center; }
    .vc-add-row input { height:34px; border:1px solid var(--border); border-radius:7px; padding:0 10px; font-size:13px; outline:none; flex:1; }
    .vc-add-row input:focus { border-color:var(--orange); }
    /* CR-11: expense types */
    .et-builtin-tag { display:inline-block; margin-left:6px; font-size:10.5px; font-weight:700; color:var(--text-muted); background:#F1F5F9; border-radius:999px; padding:1px 8px; vertical-align:middle; }
    .et-name-static { font-weight:600; }
    .et-hidden-row td { opacity:.55; }
    .et-add-row label { display:flex; align-items:center; gap:6px; font-size:12.5px; white-space:nowrap; }
    .exp-type-add-btn { background:none; border:none; color:var(--orange); cursor:pointer; font-size:11.5px; font-weight:700; padding:0 0 0 6px; text-transform:none; letter-spacing:0; }
    .exp-type-add-btn:hover { text-decoration:underline; }
    .vc-veh-count { font-size:11px; color:#6B7280; font-weight:600; }

    /* Extra Charges Admin */
    .ec-table { width:100%; border-collapse:collapse; font-size:13px; }
    .ec-table th { font-size:10.5px; font-weight:750; color:var(--text-muted); text-transform:uppercase; letter-spacing:.5px; padding:10px 12px; text-align:left; border-bottom:1px solid #CBD5E1; background:#F8FAFC; }
    .ec-table td { padding:9px 12px; border-bottom:1px solid #E8EDF2; vertical-align:middle; }
    .ec-table tr:last-child td { border-bottom:none; }
    .ec-table input[type=text], .ec-table input[type=number], .ec-table select { height:30px; border:1px solid var(--border); border-radius:5px; padding:0 8px; font-size:12.5px; outline:none; width:100%; }
    .ec-table input:focus, .ec-table select:focus { border-color:var(--orange); }
    .ec-active-toggle { accent-color:var(--orange); width:15px; height:15px; cursor:pointer; }
    .ec-del-btn { background:none; border:none; color:#DC2626; cursor:pointer; font-size:16px; padding:2px 6px; border-radius:4px; }
    .ec-del-btn:hover { background:#FEF2F2; }
    .ec-add-btn { margin-top:10px; }
    /* Extra Charges in Booking */
    /* Extra Charges compact row in booking form */
    .bk-ec-compact-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 14px; background:#F9FAFB; border:1px solid var(--border); border-radius:8px; margin-bottom:12px; }
    .bk-ec-compact-label { font-size:11px; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.4px; margin-bottom:2px; }
    .bk-ec-compact-summary { font-size:12px; color:var(--text-muted); max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .bk-ec-compact-total { font-size:15px; font-weight:800; color:var(--orange); }
    .bk-ec-manage-btn { font-size:12px !important; padding:0 12px !important; height:30px !important; }
    /* Extra Charges slide panel rows */
    .bk-ec-row { display:flex; align-items:center; gap:8px; padding:8px 0; border-bottom:1px solid #F3F4F6; }
    .bk-ec-row:last-child { border-bottom:none; }
    .bk-ec-check { accent-color:var(--orange); width:15px; height:15px; cursor:pointer; flex-shrink:0; }
    .bk-ec-name { flex:1; font-size:13px; color:var(--text); cursor:pointer; }
    .bk-ec-amt { width:90px; height:32px; border:1px solid var(--border); border-radius:5px; padding:0 8px; font-size:13px; outline:none; }
    .bk-ec-amt:focus { border-color:var(--orange); }
    .bk-ec-amt:disabled { background:#F9FAFB; color:var(--text-muted); }
    /* Panel custom charge inputs */
    #ec-panel-custom-name:focus, #ec-panel-custom-amt:focus { border-color:var(--orange); }
    /* Inline EC rows in booking popup (Edit/Remove per item) */
    .bk-ec-inline-row { display:flex; align-items:center; gap:6px; padding:7px 0; border-bottom:1px solid #F3F4F6; }
    .bk-ec-inline-row:last-child { border-bottom:none; }
    .bk-ec-inline-info { flex:1; min-width:0; }
    .bk-ec-inline-name { font-size:13px; color:var(--text); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .bk-ec-inline-sub { font-size:11px; color:var(--text-muted); margin-top:1px; }
    .bk-ec-inline-total { font-size:13px; font-weight:700; color:var(--orange); width:76px; text-align:right; flex-shrink:0; }
    .bk-ec-inline-btn { background:none; border:1px solid var(--border); border-radius:5px; padding:0 8px; height:24px; font-size:11px; cursor:pointer; white-space:nowrap; color:var(--text); }
    .bk-ec-inline-btn:hover { background:#F3F4F6; }
    .bk-ec-inline-btn.remove { color:#DC2626; border-color:#FCA5A5; }
    .bk-ec-inline-btn.remove:hover { background:#FEF2F2; }
    /* EC edit modal overlay (z-index above EC slide panel) */
    #adm-ec-edit-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:1200; align-items:center; justify-content:center; }
    #adm-ec-edit-overlay.open { display:flex; }
    .adm-ec-edit-card { background:#fff; border-radius:12px; padding:24px; width:340px; max-width:92vw; box-shadow:0 8px 40px rgba(0,0,0,.22); }
    /* Activity Log */
    .al-filters { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:14px; }
    .al-filters .admin-input { flex:none; }
    .al-wrap { overflow-x:auto; max-height:480px; overflow-y:auto; border:1px solid #DCE4EB; border-radius:12px; box-shadow:var(--shadow-sm); background:#fff; }
    .al-table { width:100%; min-width:1000px; border-collapse:collapse; font-size:12.5px; }
    .al-table th { background:#F8FAFC; font-size:10.5px; font-weight:750; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.5px; padding:10px 13px; text-align:left; border-bottom:1px solid #CBD5E1; position:sticky; top:0; z-index:1; }
    .al-table td { padding:10px 13px; border-bottom:1px solid #E8EDF2; color:var(--text); vertical-align:middle; }
    .al-table tr:last-child td { border-bottom:none; }
    .al-table tr:hover td { background:#FFF8F2; }
    .al-action-pill { display:inline-block; padding:2px 8px; border-radius:20px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.3px; }
    .al-action-pill.booking   { background:#EFF6FF; color:#1D4ED8; }
    .al-action-pill.payment   { background:#F0FDF4; color:#15803D; }
    .al-action-pill.vehicle   { background:#FFF7ED; color:#C2410C; }
    .al-action-pill.customer  { background:#F5F3FF; color:#6D28D9; }
    .al-action-pill.expense   { background:#FEF3C7; color:#92400E; }
    .al-action-pill.admin     { background:#F1F5F9; color:#475569; }
    .al-action-pill.return    { background:#FFF1F2; color:#BE123C; }
    .al-empty { text-align:center; padding:32px; color:var(--text-muted); font-size:13px; }
    .logo-preview.show { display:block; }
    .upload-btn { display:inline-flex; align-items:center; gap:6px; padding:7px 14px; background:var(--bg); border:1.5px dashed var(--border); border-radius:7px; font-size:12.5px; color:var(--text-muted); cursor:pointer; font-family:inherit; }
    .upload-btn:hover { border-color:var(--orange); color:var(--orange); }
    .users-placeholder { text-align:center; padding:32px 0; color:var(--text-muted); }
    .users-placeholder svg { margin-bottom:12px; color:#D1D5DB; }
    .users-placeholder p { font-size:13px; }
    .users-placeholder small { font-size:11.5px; color:#9CA3AF; }
    /* staff / users */
    .staff-toolbar { display:flex; align-items:center; gap:8px; margin-bottom:14px; }
    .staff-search { flex:1; max-width:280px; padding:8px 11px; border:1px solid var(--border); border-radius:9px; font-size:13px; font-family:inherit; outline:none; box-shadow:var(--shadow-sm); }
    .staff-search:focus { border-color:var(--orange); }
    .staff-table { width:100%; border-collapse:collapse; font-size:13px; }
    .staff-table th { background:#F8FAFC; padding:11px 14px; text-align:left; font-size:10.5px; font-weight:750; text-transform:uppercase; letter-spacing:0.5px; color:var(--text-muted); border-bottom:1px solid #CBD5E1; white-space:nowrap; }
    .staff-table td { padding:11px 14px; border-bottom:1px solid #E8EDF2; vertical-align:middle; }
    .staff-table tr:last-child td { border-bottom:none; }
    .staff-table tr:hover td { background:#FFF8F2; }
    .staff-role-pill { display:inline-block; padding:2px 9px; border-radius:10px; font-size:11px; font-weight:600; }
    .sr-owner   { background:#FEF3C7; color:#92400E; }
    .sr-manager { background:#DBEAFE; color:#1E40AF; }
    .sr-staff   { background:#F0FDF4; color:#15803D; }
    .sr-viewer  { background:#F3F4F6; color:#6B7280; }
    .staff-status-dot { width:8px; height:8px; border-radius:50%; display:inline-block; margin-right:5px; }
    .ss-active   { background:#15803D; }
    .ss-inactive { background:#9CA3AF; }
    .staff-act-btn { height:28px; padding:0 10px; font-size:11px; border-radius:7px; border:1px solid var(--border); background:#fff; color:var(--text); font-weight:650; cursor:pointer; }
    .staff-act-btn:hover { border-color:#9CA3AF; }
    .staff-act-btn.del { color:#DC2626; border-color:#FECACA; }
    .staff-act-btn.del:hover { background:#FEF2F2; }
    .stm-hdr { padding:16px 22px 12px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; background:#fff; z-index:1; }
    .stm-title { font-size:16px; font-weight:700; }
    .stm-body { padding:18px 22px; }
    .stm-sec { font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; color:var(--text-muted); margin:16px 0 10px; padding-bottom:6px; border-bottom:1px solid var(--border); }
    .stm-sec:first-child { margin-top:0; }
    .stm-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:10px; }
    .stm-grid.c1 { grid-template-columns:1fr; }
    .stm-f { display:flex; flex-direction:column; gap:3px; }
    .stm-f label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.4px; color:var(--text-muted); }
    .stm-f input, .stm-f select, .stm-f textarea { padding:8px 10px; border:1.5px solid var(--border); border-radius:7px; font-size:13px; font-family:inherit; outline:none; }
    .stm-f input:focus, .stm-f select:focus, .stm-f textarea:focus { border-color:var(--orange); box-shadow:0 0 0 3px rgba(249,115,22,0.1); }
    .stm-f textarea { resize:vertical; min-height:56px; }
    .stm-perms { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
    .stm-perm { display:flex; align-items:center; gap:7px; font-size:13px; cursor:pointer; }
    .stm-perm input[type=checkbox] { width:15px; height:15px; accent-color:var(--orange); cursor:pointer; }
    .stm-ftr { padding:12px 22px; border-top:1px solid var(--border); display:flex; gap:8px; justify-content:flex-end; position:sticky; bottom:0; background:#fff; }
    /* backup/import/export */
    .bk-section-title { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; color:var(--text-muted); margin-bottom:10px; padding-bottom:6px; border-bottom:1px solid var(--border); }
    .bk-btn-row { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
    .bk-btn { display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border-radius:7px; border:1px solid var(--border); background:#fff; font-size:12.5px; font-weight:600; cursor:pointer; color:var(--text); font-family:inherit; transition:all 0.12s; }
    .bk-btn:hover { border-color:var(--orange); color:var(--orange); }
    .bk-btn.bk-danger { border-color:#FECACA; color:#DC2626; }
    .bk-btn.bk-danger:hover { background:#FEF2F2; }
    .bk-warn { background:#FEF3C7; border:1px solid #FDE68A; border-radius:8px; padding:10px 14px; font-size:12px; color:#92400E; margin-bottom:12px; }
    .imp-card { background:#fff; border:1px solid var(--border); border-radius:10px; padding:16px 18px; margin-bottom:12px; }
    .imp-card-hdr { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
    .imp-card-title { font-size:14px; font-weight:700; flex:1; }
    .imp-card-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
    .imp-card-hint { font-size:12px; color:var(--text-muted); margin-top:8px; }
    .imp-toggle { display:flex; align-items:center; gap:5px; font-size:12px; font-weight:600; color:var(--text); cursor:pointer; white-space:nowrap; }
    /* Import preview modal */
    #imp-modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:3000; display:none; align-items:center; justify-content:center; }
    #imp-modal-overlay.open { display:flex; }
    #imp-modal { background:#fff; border-radius:14px; box-shadow:0 20px 60px rgba(0,0,0,0.25); width:900px; max-width:96vw; max-height:88vh; display:flex; flex-direction:column; overflow:hidden; }
    .imp-modal-hdr { padding:16px 22px 14px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
    .imp-modal-title { font-size:16px; font-weight:800; }
    .imp-modal-summary { display:flex; gap:14px; flex-wrap:wrap; padding:10px 22px; background:#F9FAFB; border-bottom:1px solid var(--border); font-size:12.5px; }
    .imp-modal-body { flex:1; overflow:auto; }
    .imp-modal-ftr { padding:14px 22px; border-top:1px solid var(--border); display:flex; align-items:center; gap:10px; }
    .imp-stat-new    { color:#15803D; font-weight:700; }
    .imp-stat-skip   { color:#6B7280; font-weight:700; }
    .imp-stat-error  { color:#DC2626; font-weight:700; }
    .imp-tbl { width:100%; border-collapse:collapse; font-size:12px; }
    .imp-tbl th { background:#F8FAFC; padding:10px 12px; text-align:left; font-size:10.5px; font-weight:750; text-transform:uppercase; letter-spacing:0.5px; color:var(--text-muted); border-bottom:1px solid #CBD5E1; position:sticky; top:0; white-space:nowrap; }
    .imp-tbl td { padding:9px 12px; border-bottom:1px solid #E8EDF2; vertical-align:top; font-size:12px; }
    .imp-tbl tr.imp-row-valid:hover td { background:#FFF8F2; }
    .imp-tbl tr.imp-row-error td { background:#FEF2F2; }
    .imp-tbl tr.imp-row-skip td { color:#9CA3AF; }
    .imp-badge-new   { display:inline-block; padding:1px 7px; border-radius:8px; font-size:10px; font-weight:700; background:#DCFCE7; color:#15803D; }
    .imp-badge-update{ display:inline-block; padding:1px 7px; border-radius:8px; font-size:10px; font-weight:700; background:#FFF7ED; color:#C2410C; }
    .imp-badge-skip  { display:inline-block; padding:1px 7px; border-radius:8px; font-size:10px; font-weight:700; background:#F3F4F6; color:#6B7280; }
    .imp-badge-error { display:inline-block; padding:1px 7px; border-radius:8px; font-size:10px; font-weight:700; background:#FEE2E2; color:#DC2626; }
    .imp-badge-warn  { display:inline-block; padding:1px 7px; border-radius:8px; font-size:10px; font-weight:700; background:#FEF3C7; color:#92400E; }
    .imp-tbl tr.imp-row-warn td { background:#FFFBEB; }
    /* backup preview modal */
    #bk-preview-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:2100; align-items:center; justify-content:center; }
    #bk-preview-overlay.open { display:flex; }
    #bk-preview-modal { background:#fff; border-radius:12px; width:700px; max-height:85vh; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 8px 32px rgba(0,0,0,0.2); }
    .bkp-hdr { padding:16px 22px 12px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
    .bkp-title { font-size:16px; font-weight:700; }
    .bkp-summary { display:flex; gap:12px; flex-wrap:wrap; padding:12px 22px; border-bottom:1px solid var(--border); background:#F9FAFB; }
    .bkp-stat { display:flex; align-items:center; gap:5px; font-size:12.5px; font-weight:600; }
    .bkp-stat.s-new    { color:#15803D; }
    .bkp-stat.s-update { color:#1E40AF; }
    .bkp-stat.s-skip   { color:#6B7280; }
    .bkp-body { flex:1; overflow:auto; padding:0; }
    .bkp-table { width:100%; border-collapse:collapse; font-size:12.5px; }
    .bkp-table th { background:#F8FAFC; padding:10px 14px; text-align:left; font-size:10.5px; font-weight:750; text-transform:uppercase; letter-spacing:0.5px; color:var(--text-muted); border-bottom:1px solid #CBD5E1; white-space:nowrap; position:sticky; top:0; }
    .bkp-table td { padding:10px 14px; border-bottom:1px solid #E8EDF2; vertical-align:middle; }
    .bkp-table tr:hover td { background:#FFF8F2; }
    .bkp-badge { display:inline-block; padding:1px 8px; border-radius:10px; font-size:10.5px; font-weight:700; }
    .bkp-badge.new    { background:#F0FDF4; color:#15803D; }
    .bkp-badge.update { background:#DBEAFE; color:#1E40AF; }
    .bkp-badge.skip   { background:#F3F4F6; color:#6B7280; }
    .bkp-ftr { padding:12px 22px; border-top:1px solid var(--border); display:flex; gap:8px; justify-content:flex-end; }

    /* ─── REPORTS PAGE ───────────────────────── */
    #reports-page { display:none; flex:1; flex-direction:column; overflow:hidden; background:var(--bg); }
    #reports-page.open { display:flex; }
    .rpt-header { background:#fff; border-bottom:1px solid var(--border); padding:16px 28px; display:flex; align-items:center; gap:16px; flex-shrink:0; }
    .rpt-header-title { font-size:20px; font-weight:800; color:var(--text); }
    .rpt-header-search { margin-left:auto; position:relative; }
    .rpt-header-search input { padding:9px 12px 9px 34px; border:1.5px solid #CBD5E1; border-radius:9px; font-size:13px; font-family:inherit; outline:none; width:220px; background:#fff; color:#071820; }
    .rpt-header-search input:focus { border-color:#F97316; box-shadow:0 0 0 3px rgba(249,115,22,.12); }
    .rpt-header-search-icon { position:absolute; left:10px; top:50%; transform:translateY(-50%); color:#9CA3AF; pointer-events:none; }
    .rpt-dropdown-row { background:#fff; border-bottom:1px solid var(--border); padding:14px 28px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; flex-shrink:0; box-shadow:0 3px 12px rgba(7,24,32,.04); }
    .rpt-dd { position:relative; }
    .rpt-dd-btn { display:flex; align-items:center; gap:6px; padding:8px 14px; background:#fff; color:#071820; border:1px solid #CBD5E1; border-radius:9px; font-size:13px; font-weight:700; cursor:pointer; font-family:inherit; white-space:nowrap; transition:.15s ease; }
    .rpt-dd-btn:hover { background:#FFF7ED; border-color:#FDBA74; color:#C2410C; }
    .rpt-dd-btn.open { background:#F97316; border-color:#F97316; color:#fff; box-shadow:0 4px 12px rgba(249,115,22,.2); }
    .rpt-dd-btn svg { transition:transform 0.15s; }
    .rpt-dd-btn.open svg { transform:rotate(180deg); }
    .rpt-dd-menu { display:none; position:absolute; top:calc(100% + 6px); left:0; background:#fff; border:1px solid var(--border); border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,0.12); z-index:500; min-width:230px; overflow:hidden; }
    .rpt-dd-menu.open { display:block; }
    .rpt-dd-item { padding:10px 16px; font-size:13px; cursor:pointer; color:var(--text); transition:background 0.1s; white-space:nowrap; }
    .rpt-dd-item:hover { background:#FFF7ED; color:#C2410C; }
    .rpt-dd-item.active { background:#FFEDD5; color:#C2410C; font-weight:700; }
    .rpt-dd-item.hidden { display:none; }
    .rpt-dd-placeholder { padding:12px 16px; font-size:12.5px; color:var(--text-muted); font-style:italic; }
    .rpt-dd-cat-label { padding:8px 16px 4px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.7px; color:#9CA3AF; background:#F9FAFB; border-bottom:1px solid #F3F4F6; }
    .rpt-content { flex:1; display:flex; flex-direction:column; overflow:hidden; }
    .rpt-content-header { background:#F8FAFC; border-bottom:1px solid var(--border); padding:13px 28px; display:flex; align-items:center; gap:10px; flex-shrink:0; flex-wrap:wrap; }
    .rpt-title { font-size:15px; font-weight:800; color:#071820; margin-right:8px; white-space:nowrap; padding-left:10px; border-left:3px solid #F97316; }
    .rpt-filter-input { padding:8px 11px; border:1.5px solid #CBD5E1; border-radius:8px; font-size:12.5px; font-family:inherit; outline:none; background:#fff; color:#071820; }
    .rpt-filter-input:focus { border-color:#F97316; box-shadow:0 0 0 3px rgba(249,115,22,.1); }
    .rpt-spacer { flex:1; }
    .rpt-content-header .btn { border-radius:8px; font-weight:700; }
    .rpt-content-header .btn:last-child { background:#F97316; border-color:#F97316; color:#fff; box-shadow:0 3px 9px rgba(249,115,22,.18); }
    .rpt-content-header .btn:last-child:hover { background:#EA580C; border-color:#EA580C; }
    .rpt-body { flex:1; overflow:auto; padding:20px 28px; }
    .rpt-table { width:100%; border-collapse:separate; border-spacing:0; font-size:13px; background:#fff; border:1px solid #DCE4EB; border-radius:12px; overflow:hidden; box-shadow:0 6px 20px rgba(7,24,32,.06); }
    .rpt-table th { background:#071820; padding:11px 14px; text-align:left; font-size:10.5px; font-weight:750; text-transform:uppercase; letter-spacing:0.5px; color:#CBD5E1; border-bottom:1px solid #071820; }
    .rpt-table td { padding:11px 14px; border-bottom:1px solid #E8EDF2; vertical-align:middle; }
    .rpt-table tr:last-child td { border-bottom:none; }
    .rpt-table tr:hover td { background:#FFF8F2; }
    .rpt-source-link { padding:0; border:0; color:#C2410C; background:transparent; font:inherit; font-weight:750; cursor:pointer; text-align:left; text-decoration:underline; text-decoration-color:#FDBA74; text-underline-offset:2px; }
    .rpt-source-link:hover { color:#9A3412; text-decoration-color:#9A3412; }
    /* Release G: report links (car, customer, agreement, filtered lists). On screen only; print shows plain text. */
    .rpt-link { padding:0; border:0; margin:0; color:var(--rf-link, #9A4109); background:transparent; font:inherit; font-weight:650; cursor:pointer; text-align:left; text-decoration:none; }
    .rpt-link:hover, .rpt-link:focus-visible { color:var(--rf-link, #9A4109); text-decoration:underline; text-underline-offset:2px; }
    .rpt-table tr.rpt-row-link { cursor:pointer; }
    .rpt-cell-action { margin-left:10px; padding:3px 9px; border:1px solid var(--rf-line-2, #CBD5E1); border-radius:999px; color:var(--rf-link, #9A4109); background:transparent; font:inherit; font-size:11.5px; font-weight:700; cursor:pointer; }
    .rpt-cell-action:hover, .rpt-cell-action:focus-visible { text-decoration:underline; text-underline-offset:2px; }
    .rpt-back-btn { position:fixed; left:50%; bottom:22px; transform:translateX(-50%); z-index:1100; padding:10px 18px; border:0; border-radius:999px; background:#071820; color:#fff; font:inherit; font-size:13px; font-weight:750; box-shadow:0 10px 28px rgba(7,24,32,.28); cursor:pointer; }
    .rpt-back-btn:hover, .rpt-back-btn:focus-visible { background:#0F2A36; }
    .rpt-back-btn[hidden] { display:none; }
    .rpt-tone-in { color:var(--rf-green, #166534); font-weight:800; }
    .rpt-tone-out { color:var(--rf-red, #B01B1B); font-weight:800; }
    .rpt-tone-pos { color:var(--rf-green, #166534); }
    .rpt-tone-neg { color:var(--rf-red, #B01B1B); }
    .rpt-cash-in { color:#15803D; font-weight:800; }
    .rpt-cash-out { color:#B91C1C; font-weight:800; }
    .rpt-net-note { margin:-3px 0 14px; color:#64748B; font-size:11px; line-height:1.45; }
    .rpt-empty { text-align:center; padding:60px 20px; color:var(--text-muted); font-size:13px; }
    .rpt-empty svg { display:block; margin:0 auto 12px; color:#D1D5DB; }
    .rpt-stat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:20px; }
    .rpt-stat-card { background:linear-gradient(145deg,#FFFFFF,#F8FAFC); border:1px solid #DCE4EB; border-top:3px solid #F97316; border-radius:12px; padding:18px 20px; box-shadow:0 5px 16px rgba(7,24,32,.05); }
    .rpt-stat-label { font-size:11.5px; color:var(--text-muted); font-weight:500; margin-bottom:6px; }
    .rpt-stat-value { font-size:24px; font-weight:800; color:var(--text); }
    .rpt-stat-value.orange { color:var(--orange); }
    .rpt-stat-value.green  { color:#15803D; }
    .rpt-stat-value.red    { color:#DC2626; }
    .rpt-stat-row { display:flex; gap:14px; flex-wrap:wrap; margin-bottom:18px; }
    .rpt-stat-row .rpt-stat-card { flex:1; min-width:140px; padding:14px 18px; }
    .rpt-stat-row .rpt-stat-value { font-size:18px; }

    /* Reports and notifications studio */
    .workspace-eyebrow { margin-bottom:5px; color:var(--orange); font-size:10px; font-weight:850; letter-spacing:1px; text-transform:uppercase; }
    #reports-page, #notif-page { --workspace-pad:24px; }
    .rpt-studio-header, .notif-header { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:22px var(--workspace-pad) 15px; background:transparent; border:0; }
    .rpt-studio-header h2, .notif-hero-copy h2 { margin:0; color:var(--black); font-size:24px; line-height:1.15; letter-spacing:-.35px; }
    .rpt-studio-header p, .notif-hero-copy p { margin:6px 0 0; color:var(--text-muted); font-size:12.5px; line-height:1.45; }
    .rpt-live-pill { display:inline-flex; align-items:center; gap:7px; padding:8px 11px; border:1px solid #BBF7D0; border-radius:999px; color:#047857; background:#F0FDF4; font-size:10.5px; font-weight:750; white-space:nowrap; }
    .rpt-live-pill span { width:7px; height:7px; border-radius:50%; background:#10B981; box-shadow:0 0 0 4px rgba(16,185,129,.12); }
    .rpt-pulse-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:11px; padding:0 var(--workspace-pad) 15px; }
    .rpt-pulse-card { display:flex; align-items:center; gap:11px; min-height:66px; padding:11px 13px; border:1px solid #DFE6EA; border-radius:12px; background:#fff; box-shadow:0 4px 14px rgba(7,24,32,.04); }
    .rpt-pulse-mark { width:34px; height:34px; display:grid; place-items:center; flex:0 0 auto; border-radius:10px; background:#EFF6FF; color:#2563EB; font-size:13px; font-weight:900; }
    .rpt-pulse-mark.red { color:#DC2626; background:#FEF2F2; }.rpt-pulse-mark.orange { color:#EA580C; background:#FFF7ED; }.rpt-pulse-mark.green { color:#059669; background:#ECFDF5; }
    .rpt-pulse-card small { display:block; color:#77858C; font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.45px; }
    .rpt-pulse-card strong { display:block; margin-top:3px; overflow:hidden; color:var(--black); font-size:16px; font-weight:850; text-overflow:ellipsis; white-space:nowrap; }
    .rpt-library-bar { margin:0 var(--workspace-pad) 14px; border:1px solid #DCE4EB; border-radius:14px; background:#fff; box-shadow:0 6px 18px rgba(7,24,32,.045); overflow:visible; }
    .rpt-library-label { display:flex; align-items:baseline; gap:9px; padding:12px 15px 0; }
    .rpt-library-label strong { color:var(--black); font-size:13px; }.rpt-library-label span { color:var(--text-muted); font-size:11px; }
    .rpt-dropdown-row { padding:10px 14px 13px; border:0; border-radius:14px; box-shadow:none; }
    .rpt-dd-btn { min-height:36px; padding:8px 11px; border-color:#DCE4EB; border-radius:9px; font-size:11.5px; }
    .rpt-dd-count { display:inline-grid; min-width:20px; height:20px; place-items:center; padding:0 5px; border-radius:999px; color:#64748B; background:#F1F5F9; font-size:9px; }
    .rpt-dd-btn.open .rpt-dd-count { color:#C2410C; background:#fff; }
    .rpt-dd-menu { top:calc(100% + 5px); min-width:220px; border-radius:11px; box-shadow:0 14px 32px rgba(7,24,32,.14); }
    .rpt-header-search { margin-left:auto; }.rpt-header-search input { height:36px; width:190px; padding-top:7px; padding-bottom:7px; font-size:11.5px; }
    .rpt-content { margin:0 var(--workspace-pad) 24px; border:1px solid #DCE4EB; border-radius:15px; background:#fff; box-shadow:0 8px 26px rgba(7,24,32,.055); overflow:hidden; }
    .rpt-content-header { display:grid; grid-template-columns:minmax(210px,auto) minmax(460px,1fr) auto auto; gap:12px; padding:14px 16px; background:linear-gradient(115deg,#fff 0%,#FFF9F4 100%); }
    #reports-page.sambung-report-only .rpt-pulse-grid { display:none; }
    .rpt-selected-copy { display:flex; flex-direction:column; justify-content:center; min-width:0; padding-left:10px; border-left:3px solid var(--orange); }
    .rpt-selected-copy>span { color:var(--orange); font-size:8.5px; font-weight:800; text-transform:uppercase; letter-spacing:.65px; }
    .rpt-title { margin:3px 0 0; padding:0; border:0; font-size:15px; overflow:hidden; text-overflow:ellipsis; }
    .rpt-filter-row { display:flex; align-items:center; gap:7px; min-width:0; flex-wrap:wrap; }
    .rpt-filter-input { height:35px; padding:7px 9px; border-color:#D7E0E5; border-radius:8px; font-size:11px; }
    .rpt-spacer { display:none; }.rpt-content-header>.btn { align-self:center; min-height:35px; white-space:nowrap; }.rpt-content-header>.btn:last-child { background:var(--orange); border-color:var(--orange); color:#fff; }
    .rpt-body { padding:17px; background:#F7F9FA; }.rpt-stat-grid, .rpt-stat-row { gap:11px; margin-bottom:14px; }.rpt-stat-card { padding:14px 16px; border-top-width:2px; box-shadow:0 3px 12px rgba(7,24,32,.04); }.rpt-stat-value { font-size:20px; }
    .rpt-table { border-radius:11px; box-shadow:0 4px 14px rgba(7,24,32,.045); }.rpt-table th { background:#0A2730; }

    .notif-header { padding-bottom:15px; }.notif-header-actions { display:flex; align-items:center; gap:8px; }.notif-header .btn, .notif-header .ops-drillback-btn { min-height:36px; border-radius:9px; box-shadow:none; }.notif-header .btn-primary { color:#fff; background:var(--orange); border-color:var(--orange); }
    .notif-pulse-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; padding:0 var(--workspace-pad) 15px; }
    .notif-pulse { display:flex; align-items:center; gap:10px; min-height:62px; padding:10px 12px; border:1px solid #DFE6EA; border-radius:12px; background:#fff; box-shadow:0 4px 14px rgba(7,24,32,.04); color:var(--text); font-family:inherit; cursor:pointer; text-align:left; transition:.16s ease; }
    .notif-pulse:hover { border-color:#FDBA74; transform:translateY(-1px); box-shadow:0 7px 18px rgba(7,24,32,.07); }.notif-pulse.active { border-color:#F6A667; background:#FFF9F4; box-shadow:inset 0 -3px var(--orange),0 7px 18px rgba(249,115,22,.08); }
    .notif-pulse-icon { width:32px; height:32px; display:grid; place-items:center; flex:0 0 auto; border-radius:9px; color:#475569; background:#F1F5F9; font-size:12px; font-weight:900; }
    .notif-pulse-icon.urgent { color:#DC2626; background:#FEF2F2; }.notif-pulse-icon.today { color:#2563EB; background:#EFF6FF; }.notif-pulse-icon.money { color:#EA580C; background:#FFF7ED; }.notif-pulse-icon.unread { color:#7C3AED; background:#F5F3FF; }
    .notif-pulse strong { display:block; color:var(--black); font-size:16px; line-height:1; }.notif-pulse small { display:block; margin-top:4px; color:var(--text-muted); font-size:9px; font-weight:750; text-transform:uppercase; letter-spacing:.4px; }
    .notif-workspace { margin:0 var(--workspace-pad) 24px; border:1px solid #DCE4EB; border-radius:15px; background:#fff; box-shadow:0 8px 26px rgba(7,24,32,.055); overflow:hidden; }
    .notif-filters { margin:0; padding:12px 14px; border:0; border-bottom:1px solid var(--border); border-radius:0; box-shadow:none; background:#fff; }
    .notif-filter-copy { min-width:240px; margin-right:5px; }.notif-filter-copy strong { display:block; color:var(--black); font-size:12px; }.notif-filter-copy span { display:block; margin-top:2px; color:var(--text-muted); font-size:10px; }
    .notif-filter-sel { min-width:145px; }.notif-mark-all { margin-left:auto; }.notif-summary { margin:0; padding:9px 15px; border-bottom:1px solid #E8EDF2; background:#F8FAFC; }
    .notif-body { padding:14px; background:#F7F9FA; overflow:visible; }.notif-list { display:block; }.notif-group + .notif-group { margin-top:17px; }
    .notif-group-heading { display:flex; align-items:center; gap:8px; margin:0 2px 9px; color:#52616A; font-size:10px; font-weight:850; letter-spacing:.65px; text-transform:uppercase; }.notif-group-heading span { min-width:22px; padding:2px 6px; border-radius:999px; color:#52616A; background:#E8EDF2; text-align:center; font-size:9px; }
    .notif-group-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }.notif-card { min-height:116px; border-top-width:2px; border-radius:12px; padding:14px; box-shadow:0 4px 14px rgba(7,24,32,.045); }.notif-card.is-read { opacity:.72; }
    .notif-empty { min-height:230px; display:grid; place-items:center; padding:40px 28px; border:1px dashed #CFD9DE; border-radius:12px; background:#fff; }
    @media (max-width:1250px) { .rpt-content-header { grid-template-columns:1fr auto auto; }.rpt-filter-row { grid-column:1/-1; grid-row:2; }.rpt-pulse-grid { grid-template-columns:repeat(2,1fr); }.notif-pulse-grid { grid-template-columns:repeat(3,1fr); }.notif-group-grid { grid-template-columns:1fr; } }
    @media (max-width:760px) { #reports-page, #notif-page { --workspace-pad:14px; }.rpt-studio-header, .notif-header { align-items:flex-start; flex-direction:column; padding-top:17px; }.rpt-studio-header h2, .notif-hero-copy h2 { font-size:21px; }.rpt-library-label { align-items:flex-start; flex-direction:column; gap:2px; }.rpt-header-search { width:100%; margin-left:0; }.rpt-header-search input { width:100%; }.rpt-content-header { grid-template-columns:1fr 1fr; }.rpt-selected-copy, .rpt-filter-row { grid-column:1/-1; }.rpt-content-header>.btn { width:100%; justify-content:center; }.notif-pulse-grid { grid-template-columns:repeat(2,1fr); }.notif-filter-copy { width:100%; }.notif-filter-sel { flex:1; }.notif-mark-all { width:100%; margin-left:0; } }

    /* ─── CR-4 NOTIFICATION BELL ─────────────── */
    .rf-bell-btn { position:relative; width:40px; height:40px; flex:0 0 auto; display:inline-grid; place-items:center; padding:0; border:1px solid var(--border); border-radius:11px; background:#fff; color:var(--black); cursor:pointer; box-shadow:var(--shadow-sm); font-family:inherit; transition:color .15s ease,border-color .15s ease,background .15s ease; }
    .rf-bell-btn:hover, .rf-bell-btn[aria-expanded="true"] { color:var(--orange); border-color:var(--orange); background:#FFF7ED; }
    .rf-bell-btn:focus-visible { outline:3px solid rgba(249,115,22,.35); outline-offset:2px; }
    .rf-bell-btn svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
    .rf-bell-count { position:absolute; top:-7px; right:-7px; min-width:19px; height:19px; padding:0 5px; border-radius:999px; background:#DC2626; color:#fff; font-size:10.5px; font-weight:800; line-height:19px; text-align:center; box-shadow:0 0 0 2px #fff; }
    .rf-bell-count[hidden] { display:none; }
    .page-header > .rf-bell-btn { margin-left:2px; }
    .sbd-hero-tools { position:relative; z-index:1; flex:0 0 auto; max-width:calc(100% - 300px); display:flex; align-items:flex-start; gap:10px; min-width:0; }
    .sbd-hero-tools > .rf-bell-btn { width:36px; height:36px; }
    /* Owner decision (7 Oct): the bell is on every Desktop page, including pages with their own header. */
    .rpt-studio-header > .rpt-live-pill { margin-left:auto; }
    .inv-header > .rf-bell-btn, .notif-header-actions > .rf-bell-btn, .sbx-command-actions > .rf-bell-btn, #sambung-bayar-page .panel-head .rf-bell-btn { width:36px; height:36px; }
    #rf-bell-panel { position:fixed; z-index:9000; top:72px; right:16px; width:min(400px,calc(100vw - 24px)); max-height:min(640px,calc(100vh - 88px)); display:flex; flex-direction:column; background:#fff; border:1px solid var(--border); border-radius:14px; box-shadow:0 18px 48px rgba(7,24,32,.18); overflow:hidden; }
    #rf-bell-panel[hidden] { display:none; }
    .rf-bell-head { display:flex; align-items:center; gap:10px; padding:14px 14px 12px 16px; border-bottom:1px solid var(--border); }
    .rf-bell-head h3 { margin:0; color:var(--black); font-size:15px; font-weight:800; }
    .rf-bell-head-count { color:var(--text-muted); font-size:11.5px; }
    .rf-bell-close { margin-left:auto; width:30px; height:30px; display:grid; place-items:center; border:1px solid var(--border); border-radius:8px; background:#fff; color:var(--text-muted); cursor:pointer; font-size:16px; line-height:1; }
    .rf-bell-close:hover { color:var(--orange); border-color:var(--orange); }
    .rf-bell-body { flex:1; overflow-y:auto; padding-bottom:6px; }
    .rf-bell-section-title { display:flex; align-items:center; gap:8px; padding:12px 16px 6px; color:#52616A; font-size:10px; font-weight:850; letter-spacing:.6px; text-transform:uppercase; }
    .rf-bell-section-title span { min-width:20px; padding:1px 6px; border-radius:999px; background:#E8EDF2; text-align:center; font-size:9px; }
    .rf-bell-section-title button { margin-left:auto; padding:0; border:0; background:none; color:var(--orange); cursor:pointer; font-family:inherit; font-size:11px; font-weight:750; letter-spacing:0; text-transform:none; }
    .rf-bell-item { position:relative; padding:10px 16px 11px 24px; border-top:1px solid #F1F4F6; }
    .rf-bell-item.is-unread::before { content:''; position:absolute; left:10px; top:16px; width:7px; height:7px; border-radius:50%; background:var(--orange); }
    .rf-bell-item.is-message { background:linear-gradient(90deg,#FFF9F4 0%,#fff 70%); }
    .rf-bell-item-type { color:var(--orange); font-size:9.5px; font-weight:850; letter-spacing:.5px; text-transform:uppercase; }
    .rf-bell-item-type.alert { color:#52616A; }
    .rf-bell-item.is-support { background:#FFFBEA; }
    .rf-bell-item-type.support { display:inline-block; padding:1px 6px; border-radius:5px; background:rgba(245,197,24,.28); color:#7A5C00; }
    .rf-bell-item-when { margin-top:4px; color:var(--text-muted); font-size:11px; }
    .rf-bell-link.rf-bell-support-open { border-color:#F5C518; background:#F5C518; color:#10181E; }
    .rf-bell-item-title { margin-top:2px; color:var(--black); font-size:13px; font-weight:750; overflow-wrap:anywhere; }
    .rf-bell-item-sub { margin-top:3px; color:var(--text-muted); font-size:12px; line-height:1.45; white-space:pre-line; overflow-wrap:anywhere; }
    .rf-bell-item-actions { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:8px; }
    .rf-bell-link, .rf-bell-action { min-height:28px; display:inline-flex; align-items:center; padding:0 10px; border-radius:8px; font-family:inherit; font-size:11px; font-weight:750; text-decoration:none; cursor:pointer; }
    .rf-bell-link { border:1px solid var(--black); background:var(--black); color:#fff; }
    .rf-bell-link:hover { border-color:var(--orange); background:var(--orange); }
    .rf-bell-action { border:1px solid var(--border); background:#fff; color:var(--text); }
    .rf-bell-action:hover { border-color:var(--orange); color:var(--orange); }
    .rf-bell-empty { padding:8px 16px 12px 24px; color:#9CA3AF; font-size:12px; }
    .rf-bell-foot { padding:10px 14px; border-top:1px solid var(--border); background:#F8FAFC; }
    .rf-bell-foot button { width:100%; min-height:34px; border:1px solid var(--border); border-radius:9px; background:#fff; color:var(--black); cursor:pointer; font-family:inherit; font-size:12px; font-weight:750; }
    .rf-bell-foot button:hover { border-color:var(--orange); color:var(--orange); }
    /* SA-3 (integration): no right-to-left layout rules; the bell stays where it is in every language. */

    /* ─── CUSTOMER DATABASE PAGE ─────────────── */
    #customers-page { display:none; flex:1; overflow:hidden; background:var(--bg); flex-direction:column; }
    #customers-page.open { display:flex; }
    .cdb-header { background:#fff; border-bottom:1px solid var(--border); padding:10px 28px; display:flex; align-items:center; justify-content:flex-end; gap:12px; flex-shrink:0; }
    .cdb-title { font-size:18px; font-weight:700; }
    .cdb-subtitle { font-size:11.5px; color:var(--text-muted); margin-top:2px; }
    .cdb-body { flex:1; display:grid; grid-template-columns:360px 1fr; overflow:hidden; }
    .cdb-list-panel { border-right:1px solid #DCE4EB; display:flex; flex-direction:column; overflow:hidden; background:#fff; }
    .cdb-search-bar { padding:12px 16px; border-bottom:1px solid #DCE4EB; display:flex; gap:8px; flex-shrink:0; background:#F8FAFC; }
    .cdb-search-input { flex:1; padding:8px 11px; border:1px solid var(--border); border-radius:9px; font-size:13px; font-family:inherit; outline:none; background:#fff; box-shadow:var(--shadow-sm); }
    .cdb-search-input:focus { border-color:var(--orange); }
    .cdb-list { flex:1; overflow-y:auto; }
    .cdb-row { padding:12px 16px; border-bottom:1px solid #E8EDF2; cursor:pointer; transition:background 0.1s,border-color 0.1s; display:flex; align-items:center; gap:12px; }
    .cdb-row:hover { background:#FFF7ED; }
    .cdb-row.active { background:var(--orange-light); border-left:3px solid var(--orange); box-shadow:inset 0 0 0 1px rgba(249,115,22,0.08); }
    .cdb-avatar { width:36px; height:36px; border-radius:10px; background:var(--orange-light); color:var(--orange); border:1px solid #FED7AA; font-weight:800; font-size:14px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
    .cdb-row-info { min-width:0; }
    .cdb-row-name { font-size:13px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .cdb-row-phone { font-size:11.5px; color:var(--text-muted); margin-top:1px; }
    .cdb-empty { padding:48px 16px; text-align:center; color:var(--text-muted); font-size:13px; }
    .cdb-detail-panel { overflow-y:auto; padding:24px 28px; }
    .cdb-detail-placeholder { display:flex; align-items:center; justify-content:center; height:100%; color:var(--text-muted); font-size:13px; flex-direction:column; gap:10px; }
    .cdb-detail-placeholder svg { color:#D1D5DB; }
    .cdb-section-title { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.6px; color:var(--text-muted); margin-bottom:12px; padding-bottom:6px; border-bottom:1px solid var(--border); }
    .cdb-field { margin-bottom:12px; }
    .cdb-field label { display:block; font-size:11px; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:4px; }
    .cdb-field input, .cdb-field textarea { width:100%; padding:8px 11px; border:1.5px solid var(--border); border-radius:7px; font-size:13px; color:var(--text); font-family:inherit; outline:none; background:#F9FAFB; }
    .cdb-field input.edit-mode, .cdb-field textarea.edit-mode { background:#fff; }
    .cdb-field input.edit-mode:focus, .cdb-field textarea.edit-mode:focus { border-color:var(--orange); box-shadow:0 0 0 3px rgba(249,115,22,0.1); }
    .cdb-field textarea { resize:vertical; min-height:60px; }
    .cdb-field-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
    .cdb-detail-actions { display:flex; gap:8px; margin-top:20px; padding-top:16px; border-top:1px solid var(--border); }
    .cdb-list-count { font-size:11px; font-weight:650; color:var(--text-muted); padding:7px 16px; background:#fff; border-bottom:1px solid #E8EDF2; flex-shrink:0; }

    /* ─── BOARD ──────────────────────────────── */
    /* board-wrapper: flex column, constrains height, no overflow of its own */
    .board-wrapper { flex: 1; min-height: 0; overflow: hidden; padding: 14px 28px 28px; display: flex; flex-direction: column; }
    /* board-card: single scroll container — handles both X and Y */
    .board-card    { flex: 1; min-height: 0; min-width: 0; background: #fff; border: 1px solid #DCE4EB; border-radius: 14px; overflow: auto; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y; overscroll-behavior: contain; box-shadow:0 8px 24px rgba(7,24,32,0.06); }

    /* ─── PLANNING TABLE ─────────────────────── */
    /* min-width: max-content ensures table is never compressed — always as wide as its columns need */
    .pb-table { border-collapse: collapse; white-space: nowrap; min-width: max-content; }
    .pb-table thead th {
      background: #F8FAFC; border-bottom: 1px solid #CBD5E1;
      font-size: 10.5px; font-weight: 700; color: var(--text-muted);
      position: sticky; top: 0; z-index: 30;
      padding: 10px 0 9px; text-align: center; user-select: none;
    }
    .th-vehicle { width: 235px; min-width: 235px; text-align: left !important; padding-left: 16px !important; position: sticky !important; left: 0 !important; z-index: 40 !important; border-right: 1px solid #CBD5E1 !important; box-shadow: 5px 0 12px rgba(7,24,32,0.05) !important; background: #F8FAFC !important; color:var(--black) !important; letter-spacing:0.35px; text-transform:uppercase; }
    .th-day { width: 42px; min-width: 42px; }
    .pb-table.week-view .th-day { width: auto; min-width: 160px; }
    .th-day.today-hdr  { background: #FFF7ED !important; box-shadow:inset 1px 0 rgba(249,115,22,0.35), inset -1px 0 rgba(249,115,22,0.18); }
    .th-day.weekend-hdr { background: #F1F5F9 !important; }
    .th-day-inner { display: flex; flex-direction: column; align-items: center; gap: 2px; }
    .th-day-num { font-size: 13px; font-weight: 700; color: var(--text); width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 50%; }
    .th-day.today-hdr .th-day-num { background: var(--orange); color: #fff; box-shadow:0 3px 8px rgba(249,115,22,0.25); }
    .th-day-name { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.5px; color: #9CA3AF; }
    .pb-table.week-view .th-day-name { font-size: 11px; }

    .pb-table tbody tr { border-bottom: 1px solid #E8EDF2; height: 56px; }
    .pb-table tbody tr:last-child { border-bottom: none; }

    /* Category group header row */
    .pb-cat-row { --cat-bg:#F4F7F9; --cat-text:#334155; --cat-accent:#64748B; --cat-border:#DCE4EB; background:var(--cat-bg) !important; height:36px !important; border-bottom:1px solid var(--cat-border) !important; border-top:1px solid var(--cat-border) !important; cursor:pointer; user-select:none; }
    .pb-cat-row:hover { filter:brightness(.985); }
    .pb-cat-row td { padding: 0 !important; }
    .pb-cat-sticky { position:sticky; left:0; background:var(--cat-bg); z-index:10; border-right:1px solid var(--cat-border); box-shadow:inset 4px 0 0 var(--cat-accent), 5px 0 12px rgba(7,24,32,0.04); height:36px; vertical-align:middle; padding:0 16px 0 18px !important; white-space:nowrap; min-width:235px; }
    .pb-cat-row:hover .pb-cat-sticky { background:var(--cat-bg); }
    .pb-cat-inner { display: flex; align-items: center; gap: 8px; }
    .pb-cat-arrow { font-size: 11px; color: #6B7280; transition: transform 0.18s; display: inline-block; }
    .pb-cat-arrow.collapsed { transform: rotate(-90deg); }
    .pb-cat-name { font-size:11px; font-weight:800; color:var(--cat-text); text-transform:uppercase; letter-spacing:0.7px; }
    .pb-cat-badge { background:rgba(255,255,255,.78); color:var(--cat-text); font-size:9.5px; font-weight:750; border:1px solid var(--cat-border); border-radius:999px; padding:1px 7px; }
    .pb-cat-stripe { background:var(--cat-bg); border-right:1px solid var(--cat-border); height:36px; vertical-align:middle; }
    .pb-cat-tone-green  { --cat-bg:#ECFDF5; --cat-text:#047857; --cat-accent:#10B981; --cat-border:#A7F3D0; }
    .pb-cat-tone-blue   { --cat-bg:#EFF6FF; --cat-text:#1D4ED8; --cat-accent:#3B82F6; --cat-border:#BFDBFE; }
    .pb-cat-tone-orange { --cat-bg:#FFF7ED; --cat-text:#C2410C; --cat-accent:#F97316; --cat-border:#FED7AA; }
    .pb-cat-tone-yellow { --cat-bg:#FFFBEB; --cat-text:#92400E; --cat-accent:#FDBA24; --cat-border:#FDE68A; }
    .pb-cat-tone-purple { --cat-bg:#F5F3FF; --cat-text:#6D28D9; --cat-accent:#8B5CF6; --cat-border:#DDD6FE; }
    .pb-cat-tone-teal   { --cat-bg:#F0FDFA; --cat-text:#0F766E; --cat-accent:#14B8A6; --cat-border:#99F6E4; }
    .pb-veh-row-hidden { display: none; }

    .td-vehicle { position: sticky; left: 0; background: #fff; z-index: 10; border-right: 1px solid #CBD5E1; box-shadow: 5px 0 12px rgba(7,24,32,0.05); padding: 0 16px; height: 58px; vertical-align: middle; transition: background 0.12s; min-width: 235px; }
    .pb-table tbody tr:hover .td-vehicle { background: #FFF8F2; }
    .vehicle-card { display:flex; flex-direction:column; justify-content:center; gap:3px; min-width:0; }
    .vehicle-name { font-size:12.5px; font-weight:750; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:200px; color:var(--black); }
    .vehicle-plate { font-size:10.5px; color:#64748B; font-weight:600; letter-spacing:0.25px; }

    .td-empty { height: 58px; vertical-align: middle; border-right: 1px solid #EDF1F4; cursor: pointer; transition: background 0.1s; position: relative; }
    .td-empty:hover { background: #FFF7ED; box-shadow:inset 0 0 0 1px rgba(249,115,22,0.16); }
    .td-empty.today-col { background: rgba(249,115,22,0.045); box-shadow:inset 1px 0 rgba(249,115,22,0.22), inset -1px 0 rgba(249,115,22,0.14); }
    .td-empty.weekend-col { background: #F8FAFC; }
    .td-empty.weekend-col:hover { background: #FFF7ED; }
    .td-empty.today-col.weekend-col { background: rgba(249,115,22,0.04); }
    .td-empty:hover::after { content: '+'; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 18px; color: var(--orange); opacity: 0.5; pointer-events: none; }

    .td-res { height: 56px; vertical-align: middle; padding: 10px 0; cursor: pointer; position: relative; }
    .td-res.today-col { box-shadow:inset 1px 0 rgba(249,115,22,0.22), inset -1px 0 rgba(249,115,22,0.14); background: rgba(249,115,22,0.025); }
    .res-bar { height: 34px; display: flex; align-items: center; padding: 0 9px; font-size: 11.5px; font-weight: 650; overflow: visible; transition: filter 0.12s, box-shadow 0.12s, opacity 0.12s, transform 0.12s; border-radius: 0; min-width: 0; user-select: none; -webkit-user-drag: none; cursor: pointer; position: relative; }
    .res-bar:hover { filter: brightness(0.98); box-shadow: 0 5px 12px rgba(7,24,32,0.13); transform:translateY(-1px); }
    .res-bar:active { filter: brightness(0.88); box-shadow: 0 1px 6px rgba(0,0,0,0.15); opacity: 0.92; }
    .td-res.r-start .res-bar  { border-radius: 7px 0 0 7px; margin-left: 5px; }
    .td-res.r-end   .res-bar  { border-radius: 0 7px 7px 0; margin-right: 5px; }
    .td-res.r-start.r-end .res-bar { border-radius: 7px; margin: 0 5px; }
    .td-res.r-mid   .res-bar  { border-radius: 0; }

    .res-bar.s-ongoing     { background: #DBEAFE; color: #1E40AF; border-top: 1.5px solid #93C5FD; border-bottom: 1.5px solid #93C5FD; }
    .res-bar.s-upcoming    { background: #F3E8FF; color: #6B21A8; border-top: 1.5px solid #C4B5FD; border-bottom: 1.5px solid #C4B5FD; }
    .res-bar.s-overdue     { background: #FEE2E2; color: #991B1B; border-top: 1.5px solid #FCA5A5; border-bottom: 1.5px solid #FCA5A5; }
    .res-bar.s-maintenance { background: #F3F4F6; color: #4B5563; border-top: 1.5px solid #D1D5DB; border-bottom: 1.5px solid #D1D5DB; }
    .res-bar.s-finished    { background: #F0FDF4; color: #15803D; border-top: 1.5px solid #86EFAC; border-bottom: 1.5px solid #86EFAC; }

    .td-res.r-start .res-bar.s-ongoing     { border-left: 1.5px solid #93C5FD; }
    .td-res.r-end   .res-bar.s-ongoing     { border-right: 1.5px solid #93C5FD; }
    .td-res.r-start.r-end .res-bar.s-ongoing { border: 1.5px solid #93C5FD; }
    .td-res.r-start .res-bar.s-upcoming    { border-left: 1.5px solid #C4B5FD; }
    .td-res.r-end   .res-bar.s-upcoming    { border-right: 1.5px solid #C4B5FD; }
    .td-res.r-start.r-end .res-bar.s-upcoming { border: 1.5px solid #C4B5FD; }
    .td-res.r-start .res-bar.s-overdue     { border-left: 1.5px solid #FCA5A5; }
    .td-res.r-end   .res-bar.s-overdue     { border-right: 1.5px solid #FCA5A5; }
    .td-res.r-start.r-end .res-bar.s-overdue { border: 1.5px solid #FCA5A5; }
    .td-res.r-start .res-bar.s-maintenance { border-left: 1.5px solid #D1D5DB; }
    .td-res.r-end   .res-bar.s-maintenance { border-right: 1.5px solid #D1D5DB; }
    .td-res.r-start.r-end .res-bar.s-maintenance { border: 1.5px solid #D1D5DB; }
    .td-res.r-start .res-bar.s-finished    { border-left: 1.5px solid #86EFAC; }
    .td-res.r-end   .res-bar.s-finished    { border-right: 1.5px solid #86EFAC; }
    .td-res.r-start.r-end .res-bar.s-finished { border: 1.5px solid #86EFAC; }

    .res-label { display: none; align-items: center; gap: 4px; overflow: hidden; white-space: nowrap; max-width: 200px; flex-shrink: 0; pointer-events: none; }
    .td-res.r-start .res-label { display: flex; }
    .res-label-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; max-width: 140px; }
    .res-label-meta { font-size: 10px; opacity: 0.6; flex-shrink: 0; margin-left: 2px; white-space: nowrap; }
    .res-label-icon { flex-shrink: 0; }

    @keyframes pulse-overdue { 0%,100%{opacity:1} 50%{opacity:.72} }
    .res-bar.s-overdue { animation: pulse-overdue 2s ease-in-out infinite; }
    .res-bar.s-overdue:hover { animation: none; }

    /* ─── POPUP OVERLAY ──────────────────────── */
    #popup-overlay { position: fixed; inset: 0; z-index: 900; display: none; background: rgba(0,0,0,0.1); }
    #popup-overlay.open { display: block; }

    /* ─── DETAIL POPUP ───────────────────────── */
    .detail-popup { position: fixed; background: #fff; border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 12px 48px rgba(0,0,0,0.18); width: 400px; z-index: 1000; overflow: hidden; display: none; }
    .detail-popup.open { display: block; }
    .dp-header { padding: 16px 18px 14px; border-bottom: 1px solid var(--border); display: flex; align-items: flex-start; justify-content: space-between; }
    .dp-status-row { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
    .dp-vehicle-name { font-size: 16px; font-weight: 800; }
    .dp-plate { font-size: 12px; color: var(--text-muted); font-weight: 500; margin-top: 2px; }
    .status-pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; }
    .status-pill::before { content:''; width:6px; height:6px; border-radius:50%; background:currentColor; }
    .status-pill.ongoing     { background:#DBEAFE; color:#1E40AF; }
    .status-pill.upcoming    { background:#F3E8FF; color:#6B21A8; }
    .status-pill.overdue     { background:#FEE2E2; color:#991B1B; }
    .status-pill.maintenance { background:#F3F4F6; color:#4B5563; }
    .status-pill.finished    { background:#F0FDF4; color:#15803D; }
    .status-pill.cancelled   { background:#F9FAFB; color:#9CA3AF; }
    .dp-close { width:30px; height:30px; border-radius:50%; border:none; background:#F3F4F6; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:18px; color:var(--text-muted); flex-shrink:0; }
    .dp-close:hover { background:#E5E7EB; color:var(--text); }
    .dp-body { padding: 14px 18px; max-height: 65vh; overflow-y: auto; }
    .dp-section { margin-bottom: 12px; }
    .dp-section:last-child { margin-bottom: 0; }
    .dp-section-title { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #9CA3AF; margin-bottom: 7px; }
    .dp-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; font-size: 13px; }
    .dp-row:last-child { margin-bottom: 0; }
    .dp-label { color: var(--text-muted); }
    .dp-value { font-weight: 600; text-align: right; }
    .dp-value.big   { font-size: 16px; color: var(--orange); }
    .dp-value.green { color: #15803D; }
    .dp-value.red   { color: #DC2626; }
    .dp-divider { border: none; border-top: 1px solid var(--border); margin: 10px 0; }
    .dp-note { background: #F9FAFB; border-radius: 7px; padding: 9px 12px; font-size: 12.5px; color: var(--text-muted); line-height: 1.5; }
    .dp-actions { padding: 12px 18px; border-top: 1px solid var(--border); display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    /* Reservation ID bar — detail popup */
    .dp-res-id-bar { display:flex; align-items:center; gap:8px; background:#FFF7ED; border:1px solid #FED7AA; border-radius:8px; padding:7px 12px; margin-bottom:12px; }
    .dp-res-id-label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.8px; color:#C2410C; flex-shrink:0; }
    .dp-res-id-val { font-size:11.5px; font-weight:700; font-family:monospace; color:#1C1C1E; flex:1; word-break:break-all; }
    .dp-res-id-copy { flex-shrink:0; background:none; border:1px solid #FED7AA; border-radius:5px; padding:2px 8px; font-size:11px; font-weight:600; color:#C2410C; cursor:pointer; white-space:nowrap; }
    .dp-res-id-copy:hover { background:#FEF3E2; }
    /* Res ID chip in ops cards */
    .ops-card-res-id { font-size:11px; color:#9CA3AF; margin:2px 0 5px; display:flex; align-items:center; gap:5px; }
    .ops-res-id-chip { font-family:monospace; font-size:10.5px; color:#6B7280; background:#F3F4F6; border-radius:4px; padding:1px 6px; }
    .ops-res-id-copy { background:none; border:none; cursor:pointer; color:#9CA3AF; font-size:11px; padding:0 2px; line-height:1; }
    .ops-res-id-copy:hover { color:var(--orange); }
    .dp-actions .btn { justify-content: center; font-size: 12.5px; }

    /* ─── BOOKING POPUP ──────────────────────── */
    .booking-popup { position: fixed; background: #fff; border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 12px 48px rgba(0,0,0,0.18); width: 540px; z-index: 1000; overflow: hidden; display: none; }
    .booking-popup.open { display: block; }
    .bp-header { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
    .bp-title  { font-size: 15px; font-weight: 700; }
    .bp-body   { padding: 0 20px 4px; max-height: 72vh; overflow-y: auto; }
    .bp-footer { padding: 12px 20px; border-top: 1px solid var(--border); display: flex; gap: 8px; flex-shrink: 0; }
    .bp-footer .btn { flex: 1; justify-content: center; }

    /* Form section titles */
    .form-section {
      padding: 14px 0 0;
      border-top: 1px solid var(--border);
      margin-top: 14px;
    }
    .form-section:first-child { border-top: none; margin-top: 0; padding-top: 16px; }
    .form-section-hd {
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: 12px;
    }
    .form-section-title {
      font-size: 10px; font-weight: 800;
      text-transform: uppercase; letter-spacing: 1px;
      color: var(--orange);
    }

    /* Add customer button (in section header) */
    .btn-add-cust {
      display: inline-flex; align-items: center; gap: 4px;
      padding: 4px 10px;
      background: var(--orange-light); border: 1px solid #FDBA74;
      border-radius: 6px; color: var(--orange);
      font-size: 11px; font-weight: 600; cursor: pointer;
      font-family: inherit; transition: all 0.12s;
    }
    .btn-add-cust:hover { background: #FED7AA; }

    /* Form controls */
    .form-group { margin-bottom: 12px; }
    .form-group:last-child { margin-bottom: 0; }
    .form-label { display: block; font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 5px; }
    .form-control { width: 100%; padding: 9px 12px; border: 1.5px solid var(--border); border-radius: 8px; font-size: 13.5px; color: var(--text); background: #fff; outline: none; transition: border-color 0.15s, box-shadow 0.15s; font-family: inherit; }
    input[type=number].form-control::-webkit-inner-spin-button,
    input[type=number].form-control::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
    input[type=number].form-control { -moz-appearance: textfield; appearance: textfield; }
    .form-control:focus { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(249,115,22,0.1); }
    .form-control[readonly] { background: #F9FAFB; color: var(--text-muted); cursor: default; }
    textarea.form-control { resize: vertical; min-height: 60px; }
    /* Dealer speed stage 2: the agreement form's buyer search (replaces the one long buyer dropdown). */
    .sb-buyer-picker { position: relative; flex: 1; min-width: 0; }
    .sb-buyer-results { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30; max-height: 280px; overflow-y: auto; background: var(--surface, #fff); border: 1.5px solid var(--border); border-radius: 8px; box-shadow: 0 8px 24px rgba(15, 23, 42, .12); padding: 4px; }
    .sb-buyer-option { display: block; width: 100%; text-align: left; border: 0; background: transparent; padding: 8px 10px; border-radius: 6px; font: inherit; font-size: 13.5px; color: var(--text); cursor: pointer; }
    .sb-buyer-option span { color: var(--text-muted); font-size: 12.5px; margin-left: 6px; }
    .sb-buyer-option:hover, .sb-buyer-option[aria-selected="true"] { background: var(--bg-subtle, #f1f5f9); }
    .sb-buyer-more { padding: 8px 10px; color: var(--text-muted); font-size: 12.5px; }
    .sb-buyer-results { min-width: min(320px, calc(100vw - 32px)); }
    @media (max-width: 640px) { #sb-agreement-form .form-group:has(.sb-buyer-picker) { grid-column: 1 / -1; } }
    .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

    /* Rental type toggle */
    .rental-type-toggle { display: flex; border: 1.5px solid var(--border); border-radius: 8px; overflow: hidden; }
    .rental-type-toggle button { flex: 1; padding: 9px; font-size: 13px; font-weight: 500; cursor: pointer; border: none; background: #fff; color: var(--text-muted); transition: all 0.12s; font-family: inherit; }
    .rental-type-toggle button:not(:last-child) { border-right: 1.5px solid var(--border); }
    .rental-type-toggle button.active { background: var(--orange); color: #fff; }

    /* Duration chip */
    .duration-chip { background: #F0FDF4; border: 1px solid #86EFAC; border-radius: 7px; padding: 8px 12px; font-size: 12.5px; font-weight: 600; color: #15803D; margin-bottom: 12px; display: none; }
    .duration-chip.show { display: block; }

    /* Conflict warning */
    .conflict-warn { background: #FEF2F2; border: 1.5px solid #FECACA; border-radius: 8px; padding: 10px 12px; font-size: 12.5px; color: #991B1B; display: none; align-items: flex-start; gap: 8px; line-height: 1.4; margin-bottom: 12px; }
    .conflict-warn.show { display: flex; }
    .conflict-warn svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; }

    /* Balance row */
    .balance-row { display: flex; justify-content: space-between; align-items: center; background: #F9FAFB; border: 1.5px solid var(--border); border-radius: 8px; padding: 10px 14px; margin-bottom: 12px; }
    .balance-row .bal-label { font-size: 12.5px; color: var(--text-muted); font-weight: 500; }
    .balance-row .bal-amount { font-size: 16px; font-weight: 800; }
    .balance-row .bal-amount.owed { color: #DC2626; }
    .balance-row .bal-amount.settled { color: #15803D; }
    .balance-row .bal-amount.refund { color: #F97316; }

    /* Booking source chips */
    .source-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
    .source-chip { padding: 6px 14px; border: 1.5px solid var(--border); border-radius: 20px; font-size: 12px; font-weight: 500; cursor: pointer; background: #fff; color: var(--text-muted); transition: all 0.12s; font-family: inherit; }
    .source-chip.active { background: var(--orange-light); border-color: var(--orange); color: var(--orange); font-weight: 700; }
    .source-chip:hover:not(.active) { border-color: var(--orange); color: var(--orange); }

    /* ─── ADD CUSTOMER POPUP ─────────────────── */
    #cust-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.3); z-index: 1050; display: none; }
    #cust-overlay.open { display: block; }
    .add-cust-popup { position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); background: #fff; border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 16px 60px rgba(0,0,0,0.25); width: min(760px,calc(100vw - 32px)); max-height:92vh; z-index: 1100; overflow: hidden; display: none; }
    .add-cust-popup.open { display: block; }
    .add-cust-popup .bp-body { max-height:calc(92vh - 124px); overflow-y:auto; }
    .buyer-profile-section { margin:4px 0 16px; padding:14px; border:1px solid #FED7AA; border-radius:10px; background:#FFF7ED; }
    .buyer-profile-title { font-size:12px; font-weight:800; color:#9A3412; text-transform:uppercase; letter-spacing:.06em; margin-bottom:4px; }
    .buyer-profile-help { font-size:11.5px; color:#7C2D12; margin-bottom:12px; }

    /* ─── PROCESS RETURN POPUP ──────────────── */
    #return-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.45); z-index:1200; display:none; }
    #return-overlay.open { display:block; }
    .return-popup { position:fixed; top:30px; left:50%; transform:translateX(-50%); background:#fff; border:1px solid var(--border); border-radius:14px; box-shadow:0 16px 60px rgba(0,0,0,0.25); width:660px; max-height:90vh; display:none; flex-direction:column; z-index:1300; overflow:hidden; }
    .return-popup.open { display:flex; }
    .rp-summary { background:#F9FAFB; border:1px solid var(--border); border-radius:10px; padding:12px 16px; margin-bottom:14px; display:grid; grid-template-columns:1fr 1fr; gap:6px 20px; }
    .rp-sum-row { display:flex; gap:6px; font-size:12px; }
    .rp-sum-label { color:var(--text-muted); width:90px; flex-shrink:0; }
    .rp-sum-val { font-weight:700; color:var(--text); }
    .rp-late-warn { background:#FEF2F2; border:1.5px solid #FECACA; border-radius:8px; padding:9px 12px; font-size:12px; color:#991B1B; font-weight:600; display:none; margin-bottom:12px; }
    .rp-late-warn.show { display:block; }
    .rp-balance-box { background:#F9FAFB; border:1.5px solid var(--border); border-radius:8px; padding:12px 16px; margin-bottom:12px; display:flex; justify-content:space-between; align-items:center; }
    .rp-balance-box .bal-label { font-size:13px; color:var(--text-muted); }
    .rp-balance-box .bal-amount { font-size:18px; font-weight:800; }
    .rp-balance-box .bal-amount.owed { color:#DC2626; }
    .rp-balance-box .bal-amount.settled { color:#15803D; }
    .rp-balance-box .bal-amount.refund { color:#F97316; }

    /* ─── TOAST ──────────────────────────────── */
    #toast-container { position: fixed; bottom: 22px; right: 22px; z-index: 9999; display: flex; flex-direction: column; gap: 8px; }
    .toast { background: #1A1A1A; color: #fff; padding: 11px 16px; border-radius: 9px; font-size: 13px; font-weight: 500; box-shadow: 0 4px 24px rgba(0,0,0,0.22); display: flex; align-items: center; gap: 8px; max-width: 360px; animation: toastIn 0.2s ease; }
    .toast.success { border-left: 4px solid #16A34A; }
    .toast.info    { border-left: 4px solid var(--orange); }
    .toast.error   { border-left: 4px solid #DC2626; }
    @keyframes toastIn { from{transform:translateX(20px);opacity:0} to{transform:translateX(0);opacity:1} }

    ::-webkit-scrollbar { width: 6px; height: 6px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: #D1D5DB; border-radius: 3px; }
    ::-webkit-scrollbar-thumb:hover { background: #9CA3AF; }

    /* ═══ DESIGN 06 — FORMS & OPERATIONAL DIALOGS ═══════════ */
    #veh-overlay,
    #upay-overlay,
    #svc-modal-overlay,
    #msd-modal-overlay,
    #vdb-modal-overlay,
    #exp-modal-overlay,
    #cust-overlay,
    #return-overlay {
      background:rgba(7,24,32,0.48);
      backdrop-filter:blur(2px);
    }
    .veh-popup,
    .upay-popup,
    #svc-modal,
    .svc-modal-shell,
    #vdb-modal,
    #exp-modal,
    .booking-popup,
    .add-cust-popup,
    .return-popup {
      border:1px solid #DCE4EB;
      border-radius:16px;
      box-shadow:0 24px 70px rgba(7,24,32,0.24);
    }
    .veh-popup-header,
    .upay-header,
    .svc-mhdr,
    .vdb-mhdr,
    .exp-modal-hdr,
    .bp-header,
    .dp-header {
      min-height:58px;
      padding:15px 20px;
      background:#FFFFFF;
      border-bottom:1px solid #E2E8F0;
    }
    .veh-popup-title,
    .upay-title,
    .svc-mtitle,
    .vdb-mtitle,
    .exp-modal-title,
    .bp-title,
    .dp-vehicle-name {
      color:#071820;
      font-size:16px;
      font-weight:800;
      letter-spacing:-0.15px;
    }
    .bp-title::before,
    .upay-title::before,
    .svc-mtitle::before,
    .vdb-mtitle::before,
    .exp-modal-title::before {
      content:'';
      display:inline-block;
      width:4px;
      height:17px;
      margin-right:9px;
      border-radius:999px;
      background:#F97316;
      vertical-align:-3px;
    }
    .dp-close {
      width:32px;
      height:32px;
      border:1px solid #E2E8F0;
      background:#F8FAFC;
      color:#64748B;
      font-size:18px;
    }
    .dp-close:hover { background:#FFF7ED; border-color:#FDBA74; color:#F97316; }
    .bp-body,
    .upay-body,
    .svc-mbody,
    .vdb-mbody,
    .exp-modal-body,
    .veh-popup-body { background:#FFFFFF; }
    .bp-footer,
    .upay-footer,
    .svc-mftr,
    .vdb-mftr,
    .exp-modal-ftr,
    .veh-popup-footer,
    .dp-actions {
      padding:13px 20px;
      background:#F8FAFC;
      border-top:1px solid #E2E8F0;
    }
    .form-section { border-top-color:#E2E8F0; }
    .form-section-title,
    .vdb-msec-title,
    .dp-section-title {
      color:#F97316;
      font-weight:800;
      letter-spacing:0.8px;
    }
    .form-label,
    .upay-label,
    .svc-mf label,
    .vdb-mf label,
    .exp-field label {
      color:#64748B;
      font-weight:750;
    }
    .form-control,
    .upay-input,
    .svc-mf input,
    .svc-mf select,
    .svc-mf textarea,
    .vdb-mf input,
    .vdb-mf select,
    .vdb-mf textarea,
    .exp-field input,
    .exp-field select,
    .exp-field textarea {
      min-height:40px;
      border:1px solid #CBD5E1;
      border-radius:9px;
      background:#FFFFFF;
      color:#071820;
      transition:border-color .15s, box-shadow .15s, background .15s;
    }
    .form-control:hover,
    .upay-input:hover,
    .svc-mf input:hover,
    .svc-mf select:hover,
    .vdb-mf input:hover,
    .vdb-mf select:hover,
    .exp-field input:hover,
    .exp-field select:hover { border-color:#94A3B8; }
    .form-control:focus,
    .upay-input:focus,
    .svc-mf input:focus,
    .svc-mf select:focus,
    .svc-mf textarea:focus,
    .vdb-mf input:focus,
    .vdb-mf select:focus,
    .vdb-mf textarea:focus,
    .exp-field input:focus,
    .exp-field select:focus,
    .exp-field textarea:focus {
      outline:none;
      border-color:#F97316;
      box-shadow:0 0 0 3px rgba(249,115,22,0.13);
    }
    .form-control[readonly],
    .upay-input[readonly],
    .svc-mf input[readonly] { background:#F8FAFC; color:#64748B; }
    .upay-result,
    .rp-summary,
    .balance-row,
    .rp-balance-box,
    .svc-sync-info {
      background:#F8FAFC;
      border:1px solid #DCE4EB;
      border-radius:10px;
    }
    .rental-type-toggle { border-color:#CBD5E1; border-radius:9px; }
    .rental-type-toggle button.active { background:#F97316; box-shadow:inset 0 -2px 0 rgba(7,24,32,0.12); }
    .source-chip { border-color:#CBD5E1; }
    .source-chip.active { background:#FFF7ED; border-color:#F97316; color:#C2410C; }
    .duration-chip { background:#F0FDF4; border-color:#86EFAC; }
    .conflict-warn,
    .rp-late-warn { border-radius:10px; }
    .return-popup { top:50%; transform:translate(-50%,-50%); }
    .booking-popup { max-width:calc(100vw - 32px); }
    #svc-modal,
    .svc-modal-shell,
    #vdb-modal,
    #exp-modal,
    .add-cust-popup,
    .return-popup,
    .upay-popup { max-width:calc(100vw - 32px); }

    /* ═══ DESIGN 07 — ACTIONS, FEEDBACK & EMPTY STATES ═══════ */
    .btn {
      min-height:36px;
      padding:0 15px;
      border-radius:9px;
      font-weight:700;
      letter-spacing:-0.05px;
      box-shadow:0 1px 2px rgba(7,24,32,0.08);
      transition:background .15s, border-color .15s, color .15s, box-shadow .15s, transform .15s;
    }
    .btn:hover:not(:disabled) { transform:translateY(-1px); }
    .btn:active:not(:disabled) { transform:translateY(0); box-shadow:none; }
    .btn:focus-visible {
      outline:none;
      box-shadow:0 0 0 3px rgba(249,115,22,0.20);
    }
    .btn:disabled,
    .btn[disabled] {
      opacity:.48;
      cursor:not-allowed;
      transform:none;
      box-shadow:none;
    }
    .btn-primary { background:#F97316; color:#FFFFFF; }
    .btn-primary:hover:not(:disabled) { background:#EA580C; box-shadow:0 5px 14px rgba(249,115,22,0.24); }
    .btn-ghost,
    .btn-icon { background:#FFFFFF; border:1px solid #CBD5E1; color:#475569; }
    .btn-ghost:hover:not(:disabled),
    .btn-icon:hover:not(:disabled) { background:#F8FAFC; border-color:#94A3B8; color:#071820; }
    .btn-success { background:#15803D; }
    .btn-danger { background:#DC2626; }
    .btn-today { background:#FFF7ED; border-color:#FDBA74; color:#EA580C; }

    .status-pill,
    .ops-card-badge,
    .dash-item-badge,
    .vdb-badge,
    .dr-cust-badge,
    .bkp-badge,
    .import-badge,
    .imp-badge-new,
    .imp-badge-update,
    .imp-badge-skip,
    .imp-badge-error,
    .imp-badge-warn {
      min-height:20px;
      display:inline-flex;
      align-items:center;
      border:1px solid transparent;
      border-radius:999px;
      font-weight:750;
      line-height:1;
      white-space:nowrap;
    }
    .status-pill.ongoing,
    .ops-card-badge.b-ongoing,
    .vdb-badge.st-rented { border-color:#BFDBFE; }
    .status-pill.upcoming,
    .ops-card-badge.b-upcoming { border-color:#DDD6FE; }
    .status-pill.overdue,
    .ops-card-badge.b-overdue,
    .vdb-badge.st-overdue,
    .vdb-badge.ex-expired { border-color:#FECACA; }
    .status-pill.finished,
    .ops-card-badge.b-finished,
    .vdb-badge.st-available { border-color:#BBF7D0; }
    .status-pill.maintenance,
    .vdb-badge.st-maintenance,
    .vdb-badge.ex-expiring { border-color:#FDE68A; }
    .status-pill.cancelled,
    .vdb-badge.st-inactive { border-color:#E2E8F0; }

    .bk-warn,
    .conflict-warn,
    .rp-late-warn {
      border-radius:10px;
      box-shadow:0 1px 2px rgba(7,24,32,0.04);
      line-height:1.5;
    }
    .bk-warn { background:#FFFBEB; border-color:#FDE68A; color:#92400E; }
    .conflict-warn,
    .rp-late-warn { background:#FEF2F2; border-color:#FECACA; color:#991B1B; }

    #toast-container { bottom:24px; right:24px; gap:10px; }
    .toast {
      min-width:260px;
      padding:12px 15px;
      border:1px solid #DCE4EB;
      border-left-width:4px;
      border-radius:10px;
      background:#FFFFFF;
      color:#071820;
      font-weight:650;
      box-shadow:0 14px 36px rgba(7,24,32,0.18);
    }
    .toast.success { border-left-color:#16A34A; }
    .toast.info { border-left-color:#F97316; }
    .toast.error { border-left-color:#DC2626; }

    .ops-empty,
    .bk-pay-empty,
    .dash-empty,
    .notif-empty,
    .vdb-empty,
    .dr-empty,
    .br-empty,
    .rpt-empty,
    .cdb-empty {
      color:#64748B;
      background:#F8FAFC;
      border:1px dashed #CBD5E1;
      border-radius:10px;
    }
    .ops-empty,
    .dash-empty,
    .vdb-empty,
    .br-empty,
    .cdb-empty { margin:12px; }
    .notif-empty,
    .dr-empty,
    .rpt-empty { margin:16px; }
    .ops-empty svg,
    .rpt-empty svg { color:#94A3B8; opacity:.72; }
    .al-empty {
      color:#64748B;
      background:#F8FAFC;
      text-align:center;
      padding:30px !important;
    }

    /* ─── IMPORT PREVIEW MODAL ───────────────── */
    #import-overlay { position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:2000;display:none;align-items:center;justify-content:center; }
    #import-overlay.open { display:flex; }
    .import-modal { background:#fff;border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,0.3);width:760px;max-width:95vw;max-height:85vh;display:flex;flex-direction:column;overflow:hidden; }
    .import-modal-header { padding:18px 22px 14px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center; }
    .import-modal-title { font-size:16px;font-weight:800; }
    .import-summary { display:flex;gap:16px;padding:12px 22px;background:#F9FAFB;border-bottom:1px solid var(--border);font-size:12.5px; }
    .import-stat { display:flex;align-items:center;gap:6px;font-weight:600; }
    .import-stat.new    { color:#15803D; }
    .import-stat.update { color:#F97316; }
    .import-stat.skip   { color:#6B7280; }
    .import-table-wrap { flex:1;overflow:auto;padding:0; }
    .import-table { width:100%;border-collapse:collapse;font-size:12px; }
    .import-table th { background:#F8FAFC;padding:10px 12px;text-align:left;font-size:10.5px;font-weight:750;text-transform:uppercase;letter-spacing:0.5px;color:var(--text-muted);border-bottom:1px solid #CBD5E1;position:sticky;top:0; }
    .import-table td { padding:9px 12px;border-bottom:1px solid #E8EDF2;vertical-align:top; }
    .import-table tr.row-new    td:first-child { border-left:3px solid #15803D; }
    .import-table tr.row-update td:first-child { border-left:3px solid #F97316; }
    .import-table tr.row-skip   { color:#9CA3AF; }
    .import-table tr.row-error  { background:#FEF2F2; }
    .import-table tr.row-error  td:first-child { border-left:3px solid #DC2626; }
    .import-table tr.row-warning { background:#FFFBEB; }
    .import-table tr.row-warning td:first-child { border-left:3px solid #D97706; }
    .import-badge.error  { background:#FEE2E2;color:#DC2626; }
    .import-badge.warning{ background:#FEF3C7;color:#92400E; }
    .import-error-msg    { font-size:11px;color:#DC2626;margin-top:2px; }
    .import-warn-msg     { font-size:11px;color:#92400E;margin-top:2px; }
    #import-col-detected { font-size:11.5px;color:#15803D;padding:6px 22px 0;background:#F0FDF4;border-bottom:1px solid #BBF7D0; }
    #import-err-detail   { font-size:11.5px;color:#DC2626;padding:6px 22px 0 22px;background:#FEF2F2;border-bottom:1px solid #FECACA;max-height:80px;overflow-y:auto; }
    .import-badge { display:inline-block;padding:1px 7px;border-radius:10px;font-size:10px;font-weight:700; }
    .import-badge.new    { background:#DCFCE7;color:#15803D; }
    .import-badge.update { background:#FFF7ED;color:#C2410C; }
    .import-badge.skip   { background:#F3F4F6;color:#6B7280; }
    .import-modal-footer { padding:14px 22px;border-top:1px solid var(--border);display:flex;gap:10px;justify-content:flex-end; }

    /* ═══ SIDEBAR TOGGLE BUTTON ══════════════════════════════ */
    #sidebar-toggle { display:none; align-items:center; justify-content:center; width:36px; height:36px; border:1px solid var(--border); border-radius:8px; background:#fff; cursor:pointer; flex-shrink:0; color:var(--text); margin-right:4px; }
    #sidebar-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.45); z-index:850; }
    #sidebar-overlay.visible { display:block; }

    /* ═══ RESPONSIVE — TABLET (≤ 900px) ═════════════════════ */
    @media (max-width: 900px) {
      :root { --sidebar-w: 64px; }
      .brand { padding: 14px 12px; justify-content: center; }
      .brand-name, .brand-sub { display: none; }
      .nav-section-label { display: none; }
      .nav-item { padding: 10px 0; justify-content: center; font-size: 0; gap: 0; }
      .nav-item svg { width: 18px; height: 18px; }
      .nav-badge, .addon-tag { display: none; }
      .cdb-body { grid-template-columns: 280px 1fr; }
      .vdb-body { grid-template-columns: 280px 1fr; }
      .adm-two-col { grid-template-columns: 1fr; }
      .admin-card.full { grid-column: span 1; }
      .rpt-stat-grid { grid-template-columns: 1fr 1fr; }
      .page-header { padding: 12px 18px; }
    }

    /* ═══ RESPONSIVE — MOBILE (≤ 640px) ═════════════════════ */
    @media (max-width: 640px) {
      body { overflow-x: hidden; }

      /* Sidebar: off-canvas drawer */
      #sidebar {
        position: fixed; top: 0; left: 0; z-index: 860;
        transform: translateX(-100%); transition: transform 0.22s ease;
        width: 240px !important; min-width: 240px !important;
      }
      #sidebar.sb-open { transform: translateX(0); }

      /* Restore sidebar text when open as drawer */
      #sidebar.sb-open .brand-name,
      #sidebar.sb-open .brand-sub,
      #sidebar.sb-open .nav-section-label { display: block; }
      #sidebar.sb-open .nav-item { padding: 9px 18px; font-size: 13px; justify-content: flex-start; gap: 10px; }
      #sidebar.sb-open .nav-item svg { width: 15px; height: 15px; }
      #sidebar.sb-open .nav-badge, #sidebar.sb-open .addon-tag { display: flex; }

      /* Show hamburger */
      #sidebar-toggle { display: flex; }

      /* Main area takes full width */
      #main { width: 100%; min-width: 0; }

      /* Page header */
      .page-header { padding: 10px 12px; flex-wrap: wrap; gap: 6px; }
      #main.vehicle-instalment-workspace > .page-header { display: none; }
      /* Dealer speed (stage 1, owner 28 Oct 2026): pages with their own header (the dealer Dashboard, Agreements and
         Expenses, Expenses, Invoices, Loan Tracker, Settings, Subscription & Bills, Reports, Notifications) hid the
         only menu button on a phone. They keep a slim bar with just that button. */
      #main.vehicle-instalment-workspace > .page-header,
      #main.self-header-workspace > .page-header { display: flex; min-height: 0; padding: 8px 12px; box-shadow: none; }
      #main.vehicle-instalment-workspace > .page-header > :not(#sidebar-toggle),
      #main.self-header-workspace > .page-header > :not(#sidebar-toggle) { display: none !important; }
      .page-title { font-size: 15px; }
      .period-label { min-width: auto; font-size: 13px; }
      .view-toggle .vtbtn { padding: 6px 10px; font-size: 11.5px; }
      .header-spacer { display: none; }

      /* Stats & legend bars */
      .stats-bar { padding: 0 12px; height: auto; min-height: 36px; flex-wrap: wrap; }
      .stat-item { padding: 6px 10px; font-size: 11.5px; }
      .legend-bar { padding: 6px 12px; flex-wrap: wrap; gap: 8px; }
      .legend-hint { display: none; }

      /* Board */
      .board-wrapper { padding: 8px 10px 16px; overflow: hidden; }

      /* Planning board header: hide subtitle on very small */
      .page-subtitle { display: none; }

      /* ── Two-panel layouts → stacked ── */
      .cdb-body { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
      .cdb-list-panel { max-height: 45vh; border-right: none; border-bottom: 1px solid var(--border); }
      .cdb-detail-panel { padding: 14px; }
      .cdb-field-row { grid-template-columns: 1fr; }
      .cdb-header { padding: 10px 14px; }

      .vdb-body { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
      .vdb-list-panel { max-height: 45vh; border-right: none; border-bottom: 1px solid var(--border); }
      .vdb-header { padding: 10px 14px; }
      .vdb-tabs { padding-right:14px; }
      .vdb-fg { grid-template-columns: 1fr 1fr; }
      .vdb-fg.c3 { grid-template-columns: 1fr 1fr; }

      /* ── Popups ── */
      .booking-popup { width: calc(100vw - 16px) !important; max-width: calc(100vw - 16px) !important; left: 8px !important; transform: none !important; top: 8px !important; max-height: calc(100vh - 16px); }
      .detail-popup  { width: calc(100vw - 16px) !important; max-width: calc(100vw - 16px) !important; left: 8px !important; transform: none !important; }
      .return-popup  { width: calc(100vw - 16px) !important; left: 8px !important; transform: none !important; top: 8px; max-height: calc(100vh - 16px); }
      .upay-popup    { width: calc(100vw - 16px) !important; }

      .form-row { grid-template-columns: 1fr; }
      .dp-actions { grid-template-columns: 1fr; }
      .rp-summary { grid-template-columns: 1fr; }

      /* ── Modals ── */
      #vdb-modal    { width: calc(100vw - 16px) !important; }
      #exp-modal    { width: calc(100vw - 16px) !important; }
      #svc-modal    { width: calc(100vw - 16px) !important; }
      .exp-modal-body { grid-template-columns: 1fr; }
      .svc-mbody    { grid-template-columns: 1fr; }
      .stm-grid     { grid-template-columns: 1fr; }
      .vdb-mfg      { grid-template-columns: 1fr 1fr; }

      /* ── Expenses page ── */
      .exp-header { padding: 10px 14px; flex-wrap: wrap; }
      .exp-content { padding: 12px; }
      .exp-table-wrap { overflow-x: auto; }
      .exp-filters { flex-wrap: wrap; padding: 10px 12px; }

      /* ── Reports ── */
      .rpt-header { padding: 12px 16px; }
      .rpt-header-search input { width: 160px; }
      .rpt-dropdown-row { padding: 10px 14px; gap: 6px; }
      .rpt-dd-btn { font-size: 12px; padding: 7px 11px; }
      .rpt-content-header { padding: 10px 14px; flex-wrap: wrap; }
      .rpt-body { padding: 12px 14px; }
      .rpt-stat-grid { grid-template-columns: 1fr 1fr; }

      /* ── Notifications ── */
      .notif-header { padding: 10px 14px; }
      .notif-filters { padding: 8px 12px; }
      .notif-body { padding: 10px 12px; }
      .notif-summary { padding: 6px 12px; }
      .notif-card { padding: 10px 12px; gap: 10px; }

      /* ── Operations ── */
      .ops2-header { padding: 10px 14px; }
      .ops2-tab-row { padding: 0 14px; }
      .ops2-tab { padding: 10px 12px; font-size: 12px; }
      .ops2-filter-bar { padding: 8px 14px; gap: 6px; }
      .ops2-count-bar { padding: 5px 14px; }
      .ops2-body { padding: 12px 14px; }
      .ops2-fi-wide { min-width: 140px; }

      /* ── Administration ── */
      .adm-hdr { padding: 12px 14px; }
      .adm-hdr-search input { width: 150px; }
      .adm-cat-row { padding: 10px 14px; gap:6px; }
      .adm-cat-btn { font-size: 12px; padding: 7px 11px; }
      .adm-content { padding: 14px; }
      .adm-section { padding: 16px; }
      .adm-two-col { grid-template-columns: 1fr; }
      #adms-agreement > div { grid-template-columns: 1fr !important; }
      .biz-row { flex-direction: column; }
      .al-filters { flex-direction: column; align-items: stretch; }
      .al-filters .admin-input { max-width: 100% !important; }
      .al-wrap { font-size: 11.5px; }

      /* ── Backup modal ── */
      #bk-preview-modal { width: calc(100vw - 16px); }
      #import-modal, .import-modal { width: calc(100vw - 16px) !important; }

      /* ── Upay row ── */
      .upay-row { grid-template-columns: 1fr; }

      /* ── Staff modal perms ── */
      .stm-perms { grid-template-columns: 1fr; }

      /* ── Biz methods grid ── */
      .biz-methods-grid { grid-template-columns: 1fr 1fr; }

      /* ── Return popup km/charges grid ── */
      .rp-km-row { flex-direction: column; }
    }

    /* ═══ DESIGN 08 — RESPONSIVE LAYOUT POLISH ══════════════ */
    @media (max-width: 1180px) {
      .page-header { padding-left:20px; padding-right:20px; gap:10px; }
      #board-controls { flex-wrap:wrap; justify-content:flex-end; row-gap:7px; }
      .period-label { min-width:150px; }
      .stats-bar,
      .legend-bar,
      #pb-filter-bar { padding-left:20px; padding-right:20px; }
      .dash-body,
      .adm-content,
      .rpt-body,
      .ops2-body { padding-left:20px; padding-right:20px; }
      .admin-grid { gap:16px; }
      .adm-section { max-width:100%; }
      .be-admin-layout { grid-template-columns:minmax(0,1fr) 300px; }
    }

    @media (max-width: 900px) {
      .page-title { font-size:18px; }
      #board-controls { gap:6px; }
      #board-controls .btn { min-height:34px; padding-left:11px; padding-right:11px; }
      .period-label { min-width:130px; font-size:13px; }
      .stats-bar { padding-left:18px; padding-right:18px; }
      .stat-item { padding-left:12px; padding-right:12px; }
      .legend-bar { padding-left:18px; padding-right:18px; gap:12px; }
      #pb-filter-bar { padding-left:18px; padding-right:18px; }
      .admin-grid { grid-template-columns:1fr; }
      .admin-card.full { grid-column:span 1; }
      .adm-cat-row {
        flex-wrap:nowrap;
        overflow-x:auto;
        padding-left:18px;
        padding-right:18px;
        scrollbar-width:thin;
      }
      .adm-cat-btn { flex:0 0 auto; }
      .adm-content { padding:20px 18px; }
      .adm-section { padding:20px; }
      .branch-admin-fields { grid-template-columns:1fr; }
      .branch-admin-fields .wide { grid-column:auto; }
      .be-admin-layout { grid-template-columns:1fr; }
      .be-preview-column { position:relative; top:auto; max-width:420px; }
      .vdb-profile,
      .cdb-detail-panel { padding:18px; }
      .rpt-dropdown-row,
      .ops2-tab-row { overflow-x:auto; flex-wrap:nowrap; }
      .rpt-dd-btn,
      .ops2-tab { flex:0 0 auto; }
      .inv-summary { grid-template-columns:repeat(2,minmax(150px,1fr)); }
    }

    @media (max-width: 640px) {
      .page-header { align-items:center; }
      #board-controls {
        width:100%;
        margin-top:4px;
        justify-content:flex-start;
      }
      #board-controls .period-label { flex:1; min-width:110px; }
      #board-controls .btn-primary { margin-left:auto; }
      .stats-right { width:100%; margin:0; padding:0 0 7px; }
      .legend-bar {
        flex-wrap:nowrap;
        overflow-x:auto;
        gap:12px;
        scrollbar-width:thin;
      }
      .legend-item,
      #btn-show-finished { flex:0 0 auto; }
      #pb-filter-bar { gap:8px; }
      #pb-f-plate { width:100%; }
      #pb-f-brand,
      #pb-f-status,
      #pb-f-branch { flex:1 1 130px; width:auto; }
      .dash-body,
      .adm-content,
      .rpt-body,
      .ops2-body { padding-left:12px; padding-right:12px; }
      .inv-header { padding:12px 14px; align-items:flex-start; flex-direction:column; }
      .inv-filters { padding:10px 12px; }
      .inv-filter.search { max-width:none; width:100%; }
      .inv-summary { padding:12px 12px 0; gap:8px; }
      .inv-body { padding:10px 12px 18px; }
      .adm-cat-row { padding-left:12px; padding-right:12px; }
      .adm-section { padding:16px 14px; }
      .branch-admin-head { flex-direction:column; }
      .be-theme-grid,
      .be-admin-form { grid-template-columns:1fr; }
      .be-admin-form .full { grid-column:auto; }
      .be-panel { padding:15px 13px; }
      .be-catalog-head { flex-direction:column; }
      .be-catalog-tools { width:100%; }
      .be-catalog-search { flex:1; width:auto; }
      .be-catalog-columns { display:none; }
      .be-catalog-list { border-radius:9px; }
      .bm-template-grid,
      .bm-readiness { grid-template-columns:1fr; }
      .be-catalog-item-head { grid-template-columns:26px minmax(0,1fr) 68px; }
      .be-catalog-item-head label { grid-column:2; grid-row:2; justify-content:flex-start; }
      .be-catalog-edit-btn { grid-column:3; grid-row:1/3; }
      .be-catalog-fields { grid-template-columns:1fr; }
      .be-catalog-field.full { grid-column:auto; }
      .be-action-bar { position:relative; flex-direction:column; align-items:stretch; }
      .be-action-buttons { justify-content:stretch; }
      .be-action-buttons .btn { flex:1; justify-content:center; }
      .vdb-profile,
      .cdb-detail-panel { padding:14px 12px; }
      .vdb-mfg.c3 { grid-template-columns:1fr 1fr; }
      .bp-header,
      .upay-header,
      .svc-mhdr,
      .vdb-mhdr,
      .exp-modal-hdr { padding-left:15px; padding-right:15px; }
      .bp-body,
      .upay-body,
      .svc-mbody,
      .vdb-mbody,
      .exp-modal-body { padding-left:15px; padding-right:15px; }
      .bp-footer,
      .upay-footer,
      .svc-mftr,
      .vdb-mftr,
      .exp-modal-ftr { flex-wrap:wrap; padding-left:15px; padding-right:15px; }
      .bp-footer .btn { min-width:calc(50% - 4px); }
      #toast-container { left:12px; right:12px; bottom:12px; }
      .toast { min-width:0; max-width:none; width:100%; box-sizing:border-box; }
      .login-card { padding:30px 24px; }
    }

    @media (max-width: 460px) {
      .page-title { font-size:16px; }
      #board-controls .btn { padding-left:9px; padding-right:9px; }
      #board-controls .btn-primary { width:100%; justify-content:center; margin-left:0; }
      .dash-kpi-row,
      .rpt-stat-grid,
      .inv-summary { grid-template-columns:1fr; }
      .vdb-fg,
      .vdb-fg.c3,
      .vdb-mfg,
      .vdb-mfg.c3,
      .biz-methods-grid { grid-template-columns:1fr; }
      .bp-footer .btn,
      .upay-footer .btn,
      .svc-mftr .btn,
      .vdb-mftr .btn,
      .exp-modal-ftr .btn { flex:1 1 100%; width:100%; justify-content:center; }
      .import-summary { flex-wrap:wrap; gap:8px 14px; }
    }

    /* ═══ ADMINISTRATION WORKSPACE — RESPONSIVE ═════════════ */
    @media (max-width: 1180px) {
      .adm-workspace { grid-template-columns:220px minmax(0,1fr); padding:20px; gap:18px; }
      .adm-hdr { padding-left:20px; padding-right:20px; }
      .adm-content { padding-left:0; padding-right:3px; }
    }
    @media (max-width: 900px) {
      #admin-page { overflow-y:auto; }
      .adm-hdr { padding:16px 18px; }
      .adm-hdr-subtitle { display:none; }
      .adm-hdr-search input { width:220px; }
      .adm-workspace { display:block; padding:16px 18px 24px; overflow:visible; }
      .adm-cat-row { display:flex; gap:6px; overflow-x:auto; overflow-y:hidden; margin-bottom:16px; padding:7px; border-radius:12px; scrollbar-width:thin; }
      .adm-cat-group { display:none; }
      .adm-cat-btn { width:auto; flex:0 0 auto; display:flex; min-height:36px; margin:0; padding:5px 10px 5px 6px; gap:7px; }
      .adm-cat-btn:hover { transform:none; }
      .adm-cat-icon { width:25px; height:25px; }
      .adm-cat-chevron { display:none; }
      .adm-content { overflow:visible; padding:0 0 24px; }
      .adm-content-heading { padding-left:2px; padding-right:2px; }
      .adm-section { max-width:none; padding:22px; }
    }
    @media (max-width: 640px) {
      .adm-hdr { align-items:flex-start; flex-wrap:wrap; gap:12px; padding:14px 12px; }
      .adm-hdr-copy { width:100%; }
      .adm-hdr-mark { width:36px; height:36px; border-radius:10px; }
      .adm-hdr-search { width:100%; margin-left:0; }
      .adm-hdr-search input { width:100%; box-sizing:border-box; }
      .adm-workspace { padding:12px; }
      .adm-cat-row { padding:6px; }
      .adm-content-heading { min-height:0; padding:5px 2px 13px; }
      .adm-content-title { font-size:19px; }
      .adm-content-description { font-size:11px; }
      .adm-owner-pill { display:none; }
      .adm-section { padding:18px 15px; border-radius:12px; }
    }

    /* ═══ SAMBUNG BAYAR DASHBOARD & AGREEMENT OPERATIONS ═══ */
    #sambung-dashboard-page { display:none; flex:1; overflow-y:auto; background:linear-gradient(180deg,#F6F9FC 0,#EEF3F8 100%); padding:18px 20px 28px; }
    .sbd-shell { width:100%; max-width:none; margin:0; display:grid; gap:14px; }
    .sbd-hero { position:relative; overflow:hidden; min-height:92px; padding:18px 20px; display:flex; align-items:center; justify-content:space-between; gap:20px; border:1px solid #DCE5EE; border-left:4px solid var(--orange); background:linear-gradient(105deg,#FFFFFF 0%,#FFFFFF 62%,#FFF7ED 100%); box-shadow:0 5px 18px rgba(15,23,42,.055); }
    .sbd-hero::after { content:''; position:absolute; right:-62px; bottom:-94px; width:250px; height:250px; border-radius:50%; background:radial-gradient(circle,rgba(249,115,22,.11),rgba(249,115,22,0) 68%); pointer-events:none; }
    .sbd-hero-copy { position:relative; z-index:1; display:flex; align-items:center; gap:14px; min-width:0; }
    .sbd-hero-mark { width:46px; height:46px; flex:0 0 auto; display:grid; place-items:center; border-radius:13px; color:#fff; background:linear-gradient(145deg,#FB923C,#EA580C); box-shadow:0 8px 18px rgba(234,88,12,.22); }
    .sbd-hero-mark svg { width:23px; height:23px; }
    .sbd-eyebrow { margin-bottom:3px; color:#EA580C; font-size:9px; font-weight:850; letter-spacing:.12em; text-transform:uppercase; }
    .sbd-hero h2 { margin:0; font-size:23px; line-height:1.1; letter-spacing:-.02em; }
    .sbd-hero p { margin:5px 0 0; color:var(--text-muted); font-size:12px; }
    .sbd-actions { position:relative; z-index:1; display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
    .sbd-actions .btn { min-height:36px; }
    .sbd-kpis { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:10px; }
    .sbd-kpis .dash-kpi { width:100%; min-width:0; min-height:102px; padding:13px 13px 11px; text-align:left; font:inherit; }
    .sbd-kpis .dash-kpi-num { margin-top:1px; font-size:22px; }
    .sbd-kpis .dash-kpi-label { font-size:9.5px; }
    .sbd-kpis .dash-kpi:focus-visible { outline:3px solid rgba(249,115,22,.25); outline-offset:2px; }
    .sbd-performance-report { overflow:hidden; min-height:278px; margin:18px 0 16px; padding:17px 18px 16px; border:1px solid #DCE5EE; border-top:3px solid var(--orange); border-radius:14px; background:linear-gradient(135deg,#FFFFFF 0%,#FFFFFF 67%,#FFF7ED 100%); color:var(--text); box-shadow:0 5px 18px rgba(15,23,42,.055); }
    .sbd-performance-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:14px; }
    .sbd-performance-head h3 { margin:0; color:var(--text); font-size:18px; letter-spacing:-.02em; }
    .sbd-performance-head p { margin:4px 0 0; color:var(--text-muted); font-size:10.5px; }
    .sbd-performance-head .btn { border-color:#D5DEE6; background:#fff; color:#475569; }
    .sbd-performance-head .btn:hover { border-color:#F97316; background:#FFF7ED; color:#C2410C; }
    .sbd-performance-body { display:grid; grid-template-columns:minmax(640px,1.28fr) minmax(420px,.82fr); gap:20px; }
    .sbd-score-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
    .sbd-score-card { min-width:0; padding:10px 12px; display:grid; grid-template-columns:66px minmax(0,1fr); align-items:center; gap:12px; border:1px solid #E2E8F0; border-radius:11px; background:#F8FAFC; color:var(--text); text-align:left; font:inherit; cursor:pointer; transition:background .15s,border-color .15s,transform .15s; }
    .sbd-score-card:hover { border-color:#FDBA74; background:#FFF7ED; transform:translateY(-1px); }
    .sbd-donut { --score:0; --score-color:#F97316; position:relative; width:62px; height:62px; display:grid; place-items:center; border-radius:50%; background:conic-gradient(var(--score-color) calc(var(--score) * 1%),#E2E8F0 0); }
    .sbd-donut::after { content:''; position:absolute; inset:10px; border-radius:50%; background:#fff; box-shadow:inset 0 0 0 1px #E2E8F0; }
    .sbd-donut strong { position:relative; z-index:1; color:#172B36; font-size:14px; }
    .sbd-score-copy strong { display:block; color:#172B36; font-size:12px; }
    .sbd-score-copy span { display:block; margin-top:4px; color:#64748B; font-size:9.5px; line-height:1.35; }
    .sbd-chart-card { min-width:0; padding:11px 13px 9px; border:1px solid #E2E8F0; border-radius:11px; background:#F8FAFC; color:var(--text); }
    .sbd-chart-head { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; }
    .sbd-chart-head strong { color:#172B36; font-size:12px; }
    .sbd-chart-head span { color:#EA580C; font-size:13px; font-weight:850; white-space:nowrap; }
    .sbd-chart-subtitle { margin-top:3px; color:#64748B; font-size:9.5px; }
    .sbd-bars { height:128px; margin-top:11px; padding-top:8px; display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); align-items:end; gap:6px; border-bottom:1px solid #CBD5E1; background:repeating-linear-gradient(to bottom,#E8EEF4 0,#E8EEF4 1px,transparent 1px,transparent 32px); }
    .sbd-bar-column { min-width:0; height:100%; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:5px; }
    .sbd-bar { width:min(25px,78%); min-height:4px; height:max(4px,calc(var(--bar-height) * 1%)); border-radius:5px 5px 1px 1px; background:#CBD5E1; box-shadow:0 0 0 1px rgba(148,163,184,.08); transition:height .25s ease,background .15s; }
    .sbd-bar.has-value { background:#2563EB; }
    .sbd-bar.current { background:#F97316; }
    .sbd-bar-column small { color:#64748B; font-size:8px; font-weight:700; text-transform:uppercase; }
    .sbd-performance-note { margin:10px 0 0; color:#64748B; font-size:9px; line-height:1.4; }
    #sbd-performance-detail-overlay { display:none; position:fixed; inset:0; z-index:2450; padding:20px; overflow:auto; background:rgba(7,24,32,.55); }
    #sbd-performance-detail-overlay.open { display:flex; align-items:center; justify-content:center; }
    .sbd-detail-modal { width:min(850px,100%); max-height:calc(100vh - 40px); display:flex; flex-direction:column; overflow:hidden; border-radius:14px; background:#fff; box-shadow:0 24px 70px rgba(7,24,32,.3); }
    .sbd-detail-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:18px 20px; border-bottom:1px solid #DCE5EE; }
    .sbd-detail-head h3 { margin:0; font-size:18px; }
    .sbd-detail-head p { margin:4px 0 0; color:#64748B; font-size:11px; }
    .sbd-detail-body { min-height:0; overflow:auto; padding:16px 20px 20px; }
    .sbd-detail-summary { padding:12px 14px; border:1px solid #FED7AA; border-radius:9px; background:#FFF7ED; color:#9A3412; font-size:12px; font-weight:750; }
    .sbd-detail-controls { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:14px 0 8px; color:#64748B; font-size:11px; }
    .sbd-detail-list { display:grid; gap:7px; }
    .sbd-detail-row { width:100%; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:11px 12px; border:1px solid #E2E8F0; border-radius:9px; background:#fff; color:#172B36; text-align:left; font:inherit; cursor:pointer; }
    .sbd-detail-row:hover { border-color:#FB923C; background:#FFF7ED; }
    .sbd-detail-row:disabled { cursor:default; opacity:.7; }
    .sbd-detail-row strong { display:block; font-size:12px; }
    .sbd-detail-row small { display:block; margin-top:3px; color:#64748B; font-size:10px; }
    .sbd-detail-row-value { flex:0 0 auto; text-align:right; font-size:11px; font-weight:750; }
    .sbd-detail-row-value small { color:#64748B; }
    .sbd-detail-empty { padding:28px; color:#64748B; text-align:center; font-size:12px; }
    .sbd-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; align-items:start; }
    .sbd-column { min-width:0; display:grid; gap:12px; align-content:start; }
    .sbd-panel { --sbd-accent:#64748B; padding:0; overflow:hidden; border-color:#DCE5EE; border-radius:13px; background:#fff; box-shadow:0 4px 14px rgba(15,23,42,.045); }
    .sbd-panel.recovery { --sbd-accent:#F97316; }
    .sbd-panel.priorities { --sbd-accent:#DC2626; }
    .sbd-panel.upcoming { --sbd-accent:#7C3AED; }
    .sbd-panel.payments { --sbd-accent:#15803D; }
    .sbd-panel.expiry { --sbd-accent:#0F766E; grid-column:1/-1; }
    .sbd-panel-head { min-height:67px; padding:12px 14px; display:flex; align-items:center; gap:11px; border-bottom:1px solid #E7EDF3; background:linear-gradient(180deg,#FFFFFF,#FAFCFE); }
    .sbd-panel-icon { width:34px; height:34px; flex:0 0 auto; display:grid; place-items:center; border-radius:9px; color:var(--sbd-accent); background:color-mix(in srgb,var(--sbd-accent) 10%,#fff); border:1px solid color-mix(in srgb,var(--sbd-accent) 18%,#fff); }
    .sbd-panel-icon svg { width:17px; height:17px; }
    .sbd-panel-copy { min-width:0; flex:1; }
    .sbd-panel-head h3 { margin:0; font-size:14px; }
    .sbd-panel-head p { margin:3px 0 0; color:var(--text-muted); font-size:10.5px; }
    .sbd-panel-count { min-width:25px; height:25px; padding:0 8px; display:inline-grid; place-items:center; border-radius:999px; color:var(--sbd-accent); background:color-mix(in srgb,var(--sbd-accent) 9%,#fff); border:1px solid color-mix(in srgb,var(--sbd-accent) 16%,#fff); font-size:10px; font-weight:850; }
    .sbd-list { padding:5px 12px 8px; display:grid; }
    .sbd-row { width:100%; border:0; border-bottom:1px solid #EDF2F6; border-radius:0; background:#fff; padding:12px 7px; display:flex; justify-content:space-between; align-items:flex-start; gap:14px; text-align:left; color:var(--text); transition:background .15s,color .15s; }
    .sbd-row:last-child { border-bottom:0; }
    button.sbd-row { cursor:pointer; }
    button.sbd-row:hover { background:#F8FAFC; color:#0F172A; }
    .sbd-row-main { min-width:0; }
    .sbd-row-main strong { display:block; font-size:13px; overflow-wrap:anywhere; }
    .sbd-row-main span { display:block; margin-top:3px; color:var(--text-muted); font-size:11px; overflow-wrap:anywhere; }
    .sbd-row-value { flex:0 0 auto; text-align:right; font-size:12px; font-weight:800; }
    .sbd-empty-state { min-height:86px; padding:14px 18px; display:flex; align-items:center; justify-content:center; gap:11px; color:var(--text-muted); text-align:left; }
    .sbd-empty-state-icon { width:34px; height:34px; flex:0 0 auto; display:grid; place-items:center; border-radius:50%; color:var(--sbd-accent); background:color-mix(in srgb,var(--sbd-accent) 8%,#fff); border:1px solid color-mix(in srgb,var(--sbd-accent) 15%,#fff); font-size:15px; font-weight:850; }
    .sbd-empty-state strong { display:block; color:#334155; font-size:12px; }
    .sbd-empty-state span:last-child { display:block; margin-top:2px; font-size:10.5px; }
    .sbd-danger { color:#b91c1c; }
    .sbd-warning { color:#c2410c; }
    .sbd-success { color:#15803d; }
    #sambung-deposit-modal-overlay { display:none; position:fixed; inset:0; z-index:2450; background:rgba(7,24,32,.5); padding:20px; overflow:auto; }
    #sambung-deposit-modal-overlay.open { display:flex; align-items:flex-start; justify-content:center; }
    .sbd-deposit-modal { width:min(980px,100%); }
    .sbd-deposit-body { display:grid; gap:16px; padding:18px; max-height:calc(100vh - 110px); overflow:auto; }
    .sbd-deposit-form { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; padding:14px; border:1px solid var(--border); border-radius:10px; background:var(--bg); }
    .sbd-deposit-form-head { grid-column:1/-1; }
    .sbd-deposit-form-head h4 { margin:0; font-size:14px; }
    .sbd-deposit-form-head p { margin:4px 0 0; color:var(--text-muted); font-size:11px; }
    .sbd-deposit-list { display:grid; gap:8px; padding-top:10px; }
    .sbd-deposit-invoice { display:grid; grid-template-columns:1.1fr 1.5fr 1fr auto; align-items:center; gap:12px; padding:12px 14px; border:1px solid var(--border); border-left:4px solid #16A34A; border-radius:10px; background:#fff; box-shadow:var(--shadow-sm); }
    .sbd-deposit-invoice small { display:block; color:#94A3B8; font-size:8.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; }
    .sbd-deposit-invoice strong { display:block; margin-top:3px; color:var(--text); font-size:12px; overflow-wrap:anywhere; }
    .sbd-deposit-invoice .income { color:#15803D; font-size:14px; }
    .sba-commandbar { border-radius:10px 10px 0 0; }
    .sba-register-switch { height:30px; flex:0 0 auto; }
    .sba-register-switch .vtbtn { min-height:30px; padding:5px 10px; font-size:10.5px; }
    .sba-register-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; padding-top:12px; }
    .sba-agreement-card { position:relative; min-width:0; padding:14px; border:1px solid var(--border); border-left:4px solid #2563EB; border-radius:11px; background:var(--surface); box-shadow:var(--shadow-sm); cursor:pointer; transition:border-color .15s,box-shadow .15s,transform .15s; }
    .sba-agreement-card:hover { border-color:#FDBA74; border-left-color:var(--orange); box-shadow:0 8px 20px rgba(7,24,32,.08); transform:translateY(-1px); }
    .sba-agreement-card:focus-visible { outline:3px solid rgba(249,115,22,.22); outline-offset:2px; }
    .sba-agreement-card.danger { border-left-color:#DC2626; background:linear-gradient(135deg,#FEF2F2 0%,#fff 44%); }
    .sba-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
    .sba-card-number { color:var(--text); font-size:13px; font-weight:850; }
    .sba-card-buyer { margin-top:4px; color:var(--text); font-size:14px; font-weight:750; }
    .sba-card-vehicle { margin-top:3px; color:var(--text-muted); font-size:11px; }
    .sba-card-meta { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin-top:12px; padding-top:11px; border-top:1px solid var(--border); }
    .sba-card-meta span { min-width:0; }
    .sba-card-meta small { display:block; color:#94A3B8; font-size:8.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; }
    .sba-card-meta strong { display:block; margin-top:2px; color:#334155; font-size:11px; overflow-wrap:anywhere; }
    .sba-card-meta strong.danger { color:#DC2626; }
    .sba-card-foot { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:10px; color:var(--text-muted); font-size:10px; }
    .sba-card-open { color:var(--orange); font-weight:800; }
    .sb-detail-actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
    .sb-summary-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:10px; margin-bottom:16px; }
    .sb-summary-card { min-width:0; padding:12px; border:1px solid var(--border); border-radius:10px; background:var(--bg); }
    .sb-summary-card small { display:block; color:var(--text-muted); font-size:10px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }
    .sb-summary-card strong { display:block; margin-top:4px; color:var(--text); font-size:16px; overflow-wrap:anywhere; }
    .sb-identity-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-bottom:16px; }
    .sb-info-card { padding:14px; border:1px solid var(--border); border-radius:10px; background:var(--surface); }
    .sb-info-card h4 { margin:0 0 10px; font-size:13px; }
    .sb-info-list { display:grid; grid-template-columns:minmax(110px,.7fr) minmax(0,1.3fr); gap:6px 10px; font-size:12px; }
    .sb-info-list span { color:var(--text-muted); }
    .sb-info-list strong { color:var(--text); font-weight:650; overflow-wrap:anywhere; }
    .sb-section { border-top:1px solid var(--border); margin-top:18px; padding-top:16px; }
    .sb-section-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:12px; }
    .sb-section-head h4 { margin:0; }
    .sb-section-head p { margin:3px 0 0; color:var(--text-muted); font-size:12px; }
    .sb-table-wrap { overflow:auto; border:1px solid var(--border); border-radius:10px; }
    .sb-table { width:100%; border-collapse:collapse; font-size:12px; }
    .sb-table th { padding:9px 10px; background:var(--bg); color:var(--text-muted); text-align:left; white-space:nowrap; }
    .sb-table td { padding:10px; border-top:1px solid var(--border); color:var(--text); vertical-align:top; }
    .sb-table td.num { text-align:right; white-space:nowrap; }
    .sb-payment-form { display:grid; grid-template-columns:2fr 1fr 1fr; gap:10px; }
    .sb-payment-form .wide { grid-column:span 2; }
    .sb-payment-actions { grid-column:1/-1; display:flex; justify-content:flex-end; gap:8px; flex-wrap:wrap; }
    .sb-status-pill { display:inline-flex; align-items:center; border-radius:999px; padding:3px 8px; font-size:10px; font-weight:800; white-space:nowrap; background:#f1f5f9; color:#475569; }
    .sb-status-pill.overdue, .sb-status-pill.required { background:#fee2e2; color:#b91c1c; }
    .sb-status-pill.partial, .sb-status-pill.in_progress { background:#ffedd5; color:#c2410c; }
    .sb-status-pill.paid, .sb-status-pill.completed, .sb-status-pill.waived { background:#dcfce7; color:#15803d; }
    .sb-empty { padding:16px; color:var(--text-muted); text-align:center; }
    /* Paid plan handover photos (owner, 22 Oct 2026) */
    .sb-ho-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; }
    .sb-ho-slot { position:relative; aspect-ratio:4/3; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; overflow:hidden; border:1px dashed var(--border); border-radius:10px; background:var(--bg); color:var(--text-muted); font:inherit; font-size:11px; cursor:pointer; padding:0; }
    .sb-ho-slot.has { border-style:solid; }
    .sb-ho-slot img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
    .sb-ho-label { position:absolute; left:6px; bottom:6px; max-width:calc(100% - 12px); padding:2px 6px; border-radius:6px; background:rgba(7,24,32,.72); color:#fff; font-size:10px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .sb-ho-slot:not(.has) .sb-ho-label { position:static; background:none; color:var(--text); }
    .sb-ho-form { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:12px; }
    .sb-ho-form label { display:grid; gap:4px; font-size:11px; color:var(--text-muted); }
    .sb-ho-actions { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-top:12px; }
    @media (max-width:760px) { .sb-ho-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .sb-ho-form { grid-template-columns:1fr; } }
    /* Signed agreement copy (owner, 23 Oct 2026): the Agreement ▾ and Owner Agreement ▾ menus, the card and the dialogs. */
    .sb-doc-menu { position:relative; display:inline-flex; }
    .sb-doc-menu-list { position:absolute; right:0; top:calc(100% + 4px); z-index:60; display:grid; min-width:230px; padding:4px; border:1px solid var(--border); border-radius:10px; background:var(--surface); box-shadow:0 10px 28px rgba(7,24,32,.18); }
    .sb-doc-menu-list[hidden] { display:none; }
    .sb-doc-menu-list button { padding:9px 12px; border:0; border-radius:7px; background:none; color:var(--text); font:inherit; font-size:13px; text-align:left; cursor:pointer; }
    .sb-doc-menu-list button:hover, .sb-doc-menu-list button:focus-visible { background:var(--bg); outline:none; }
    .sb-doc-menu-list button.main { font-weight:700; }
    .sb-summary-card.sb-signed-card { grid-column:1 / -1; display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 12px; padding:10px 12px; }
    /* Dealer speed (stage 1): the agreement opens on what matters (paid, overdue, next due, months left), then the
       overdue and next few payments; the whole schedule is one button away. "Updating…" while a save's figures load. */
    .sb-summary-grid.sb-key-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
    .sb-summary-grid.sb-key-grid strong { font-size:19px; }
    .sb-summary-grid.sb-key-grid .sb-key-sub { display:block; margin-top:2px; color:var(--text-muted); font-size:11px; font-weight:600; }
    .sb-summary-grid.sb-money-grid { grid-template-columns:repeat(5,minmax(0,1fr)); }
    .sb-schedule-toggle { display:flex; justify-content:center; padding-top:10px; }
    .sb-updating-note { display:flex; align-items:center; gap:8px; margin-bottom:12px; padding:9px 12px; border:1px solid var(--border); border-radius:10px; background:var(--bg); color:var(--text-muted); font-size:12px; font-weight:700; }
    #sb-agreement-detail.sb-updating-stale .sb-summary-grid strong, #sb-agreement-detail.sb-updating-stale .sb-table-wrap { opacity:.35; }
    .sb-summary-card.sb-signed-card strong { margin-top:0; font-size:14px; }
    .sb-summary-card.sb-signed-missing { border-color:#fcd34d; background:#fffbeb; }
    .sb-summary-card.sb-signed-missing strong { color:#b45309; }
    .sb-summary-card .sb-signed-note { color:var(--text-muted); font-size:12px; font-weight:600; }
    .sb-signed-dialog { width:min(620px,calc(100vw - 24px)); }
    .sb-signed-dialog .sb-signed-field { display:grid; gap:5px; font-size:12px; color:var(--rf-muted,var(--text-muted)); }
    .sb-signed-dialog .sb-signed-check { display:flex; align-items:flex-start; gap:8px; font-size:13px; color:var(--rf-head,var(--text)); }
    .sb-signed-dialog .sb-signed-file { font-size:12px; color:var(--rf-muted,var(--text-muted)); overflow-wrap:anywhere; }
    .sb-signed-dialog .sb-signed-error { margin:0; font-size:12px; color:#b91c1c; }
    .sb-signed-dialog .sb-signed-switch { display:grid; gap:6px; padding:10px 12px; border:1px solid var(--border); border-radius:10px; background:var(--bg); }
    .sb-signed-dialog .sb-signed-versions { display:grid; gap:8px; max-height:52vh; overflow:auto; }
    .sb-signed-dialog .sb-signed-version { display:grid; gap:4px; padding:10px 12px; border:1px solid var(--border); border-radius:10px; font-size:12px; }
    .sb-signed-dialog .sb-signed-version-head { display:flex; justify-content:space-between; align-items:center; gap:8px; }
    .sb-signed-dialog .sb-signed-hash { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11px; overflow-wrap:anywhere; color:var(--rf-muted,var(--text-muted)); }
    #sambung-agreement-detail-overlay { display:none; position:fixed; inset:0; z-index:2300; padding:20px; background:rgba(7,24,32,.55); overflow:auto; }
    #sambung-agreement-detail-overlay.open { display:flex; align-items:flex-start; justify-content:center; }
    .sba-detail-modal { width:min(1180px,100%); max-height:calc(100vh - 40px); margin:auto; display:flex; flex-direction:column; overflow:hidden; border-radius:14px; background:var(--surface); box-shadow:0 24px 70px rgba(7,24,32,.3); }
    .sba-detail-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:16px 18px; border-bottom:1px solid var(--border); background:#fff; flex-shrink:0; }
    .sba-detail-head h3 { margin:0; }
    .sba-detail-head p { margin:4px 0 0; color:var(--text-muted); font-size:12px; }
    .sba-detail-body { padding:18px; color:var(--text-muted); overflow:auto; }
    #sambung-expenses-page { display:none; flex:1; overflow-y:auto; background:var(--bg); padding:14px 18px 28px; }
    .sbx-shell { width:100%; max-width:1500px; margin:0 auto; }
    .sbx-kpis { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; margin-bottom:12px; }
    .sbx-kpis .ops2-tab { width:100%; min-width:0; cursor:default; }
    .sbx-kpis .ops2-tab-num { font-size:18px; white-space:nowrap; letter-spacing:-.02em; }
    .sbx-commandbar { min-height:46px; display:flex; flex-wrap:wrap; align-items:center; gap:8px; min-width:0; max-width:100%; box-sizing:border-box; padding:7px 10px; border:1px solid var(--border); border-radius:10px 10px 0 0; background:var(--surface); box-shadow:var(--shadow-sm); }
    .sbx-command-title { flex:0 0 auto; margin-right:4px; color:var(--text); font-size:12px; font-weight:800; }
    .sbx-commandbar input, .sbx-commandbar select { height:30px; min-width:125px; max-width:190px; padding:0 9px; border:1px solid #D5DEE6; border-radius:6px; background:#fff; color:var(--text); font:inherit; font-size:11px; outline:none; }
    .sbx-commandbar input:focus, .sbx-commandbar select:focus { border-color:var(--orange); box-shadow:0 0 0 2px rgba(249,115,22,.1); }
    .sbx-commandbar .search { width:180px; }
    .sbx-command-actions { margin-left:auto; display:flex; gap:6px; align-items:center; }
    .sbx-results-line { padding:7px 10px; border:1px solid var(--border); border-top:0; color:var(--text-muted); background:#fff; font-size:10px; }
    .sbx-list { display:grid; gap:8px; padding-top:12px; }
    .sbx-expense-card { background:#fff; border-left-color:#F97316; padding:11px 12px; }
    .sbx-expense-card .ops-card-name { font-size:12px; text-transform:uppercase; letter-spacing:.01em; }
    .sbx-expense-description { margin-top:2px; color:#4B5563; font-size:11px; }
    .sbx-expense-card .ops-card-meta { gap:8px 20px; }
    .sbx-meta-item { display:grid; gap:1px; }
    .sbx-meta-item small { color:#94A3B8; font-size:8.5px; font-weight:750; letter-spacing:.06em; text-transform:uppercase; }
    .sbx-meta-item strong { color:#334155; font-size:10.5px; }
    .sbx-meta-item strong.amount { color:#DC2626; font-size:12px; }
    .sbx-field { display:grid; gap:5px; min-width:0; }
    .sbx-field label { color:var(--text-muted); font-size:10px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }
    .sbx-field input, .sbx-field select { width:100%; min-width:0; padding:9px 10px; border:1px solid var(--border); border-radius:8px; background:var(--surface); color:var(--text); font:inherit; font-size:12px; }
    .sbx-link { display:block; color:var(--text-muted); font-size:11px; margin-top:3px; }
    #sambung-expense-modal-overlay { display:none; position:fixed; inset:0; z-index:2400; background:rgba(7,24,32,.5); padding:20px; overflow:auto; }
    #sambung-expense-modal-overlay.open { display:flex; align-items:flex-start; justify-content:center; }
    .sbx-modal { width:min(820px,100%); margin:auto; background:var(--surface); border-radius:14px; box-shadow:0 24px 70px rgba(7,24,32,.28); overflow:hidden; }
    .sbx-modal-head { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; padding:18px 20px; border-bottom:1px solid var(--border); }
    .sbx-modal-head h3 { margin:0; }
    .sbx-modal-head p { margin:4px 0 0; color:var(--text-muted); font-size:12px; }
    .sbx-form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; padding:20px; }
    .sbx-form .full { grid-column:1/-1; }
    .sbx-form textarea { resize:vertical; min-height:72px; }
    .sbx-modal-actions { grid-column:1/-1; display:flex; justify-content:flex-end; gap:8px; padding-top:4px; }
    @media (max-width:1600px) {
      .sbd-kpis { grid-template-columns:repeat(4,minmax(0,1fr)); }
    }
    @media (max-width:1350px) {
      .sbd-performance-body { grid-template-columns:1fr; }
      .sbx-commandbar { flex-wrap:wrap; }
      .sbx-command-actions { margin-left:0; }
    }
    @media (max-width:1120px) {
      .sbd-kpis { grid-template-columns:repeat(3,minmax(0,1fr)); }
      .sbx-kpis { grid-template-columns:repeat(3,minmax(0,1fr)); }
      .sbx-commandbar { flex-wrap:wrap; }
      .sbx-command-actions { margin-left:0; }
      .sb-summary-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
      .sb-summary-grid.sb-key-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
      .sb-summary-grid.sb-money-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
    }
    @media (max-width:760px) {
      #sambung-dashboard-page, #sambung-bayar-page, #sambung-expenses-page { padding:14px !important; }
      .sbd-hero { display:grid; }
      .sbd-hero-copy { align-items:flex-start; }
      .sbd-actions { justify-content:flex-start; }
      .sbd-hero-tools { width:100%; max-width:none; }
      .sbd-hero-tools > .sbd-actions { flex:1; min-width:0; }
      .sbd-actions .btn { flex:1 1 140px; justify-content:center; }
      .sbd-kpis, .sbd-grid { grid-template-columns:1fr; }
      .sbd-column { gap:12px; }
      .sbd-performance-report { padding:15px; }
      .sbd-performance-head { display:grid; }
      .sbd-performance-head .btn { justify-self:start; }
      .sbd-score-grid { grid-template-columns:1fr; }
      .sbd-bars { gap:3px; }
      #sbd-performance-detail-overlay { padding:8px; }
      .sbd-detail-modal { max-height:calc(100vh - 16px); }
      .sbd-detail-row { align-items:flex-start; }
      .sbd-panel.expiry { grid-column:1; }
      .sbd-deposit-form, .sbd-deposit-invoice { grid-template-columns:1fr; }
      #sb-summary { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
      .sb-summary-grid, .sb-identity-grid, .sb-summary-grid.sb-money-grid { grid-template-columns:1fr; }
      .sb-summary-grid.sb-key-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
      .sb-payment-form { grid-template-columns:1fr; }
      .sb-payment-form .wide { grid-column:auto; }
      .sb-payment-actions .btn { flex:1 1 100%; justify-content:center; }
      .sba-register-list, .sba-card-meta { grid-template-columns:1fr 1fr; }
      .sbx-kpis, .sbx-form { grid-template-columns:1fr; }
      .sbx-commandbar { align-items:stretch; }
      .sbx-command-title { width:100%; }
      .sba-register-switch { width:100%; }
      .sba-register-switch .vtbtn { flex:1; justify-content:center; }
      .sbx-commandbar input, .sbx-commandbar select { width:100%; max-width:none; }
      .sbx-command-actions { width:100%; }
      .sbx-command-actions .btn { flex:1; justify-content:center; }
      .sbx-form .full, .sbx-modal-actions { grid-column:auto; }
      .sbx-modal-actions .btn { flex:1; justify-content:center; }
      #sambung-agreement-detail-overlay { padding:8px; }
      .sba-detail-modal { max-height:calc(100vh - 16px); }
      .sba-detail-head { flex-direction:column; }
    }

    /* ═══ PRINT STYLES ══════════════════════════════════════ */
    #rpt-print-header { display: none; }

    @media print {
      /* Hide everything except the active report content */
      #sidebar, #sidebar-overlay,
      .rpt-header, .rpt-dropdown-row, .rpt-content-header,
      #board-wrapper, #customers-page, #admin-page, #loantracker-page,
      #ops-page, #expenses-page, #invoices-page, #vehicles-page, #notif-page, #dashboard-page { display: none !important; }

      body, html { background: #fff !important; margin: 0; padding: 0; }
      #reports-page { display: block !important; height: auto !important; overflow: visible !important; }
      .rpt-content  { display: block !important; overflow: visible !important; }
      .rpt-body     { padding: 0 !important; overflow: visible !important; }

      /* Show the print header */
      #rpt-print-header { display: block !important; margin-bottom: 20px; padding-bottom: 14px; border-bottom: 2px solid #111; }
      .rpt-ph-top       { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 10px; }
      .rpt-ph-logo      { max-height: 54px; max-width: 160px; object-fit: contain; display: block; }
      .rpt-ph-company   { font-size: 13px; color: #333; line-height: 1.5; }
      .rpt-ph-company strong { font-size: 15px; color: #111; display: block; margin-bottom: 2px; }
      .rpt-ph-meta      { margin-top: 10px; }
      .rpt-ph-title     { font-size: 20px; font-weight: 800; color: #111; margin-bottom: 6px; }
      .rpt-ph-details   { font-size: 11.5px; color: #555; display: flex; gap: 24px; flex-wrap: wrap; }
      .rpt-ph-detail    { }
      .rpt-ph-detail span { font-weight: 600; color: #111; }

      /* Table print styles */
      .rpt-table       { width: 100%; border-collapse: collapse; font-size: 11.5px; page-break-inside: auto; }
      .rpt-table th    { background: #f3f4f6 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; padding: 7px 10px; font-size: 10px; border: 1px solid #ddd; }
      .rpt-table td    { padding: 7px 10px; border: 1px solid #eee; }
      .rpt-table tr    { page-break-inside: avoid; }
      /* Release G: links print as plain text; on-screen-only controls are hidden. */
      .rpt-link        { color: inherit !important; font-weight: inherit !important; text-decoration: none !important; }
      .rpt-cell-action, .rpt-screen-only { display: none !important; }

      @page { size: A4 portrait; margin: 14mm 14mm 12mm 14mm; }
    }