/* ViyaBook — Dashboard stylesheet.
   Extracted verbatim from dashboard.html (5 inline <style> blocks), in the SAME
   ORDER, so the cascade is identical. Nothing was redesigned or re-written — this
   is a move, not a rewrite. Now cacheable across visits instead of re-downloaded
   inside every dashboard.html. */

/* ===== was <style> ===== */
:root{--primary:#185FA5;--primary-dark:#0C447C;--bg:#f5f8fc;--card:#fff;--text:#0b2148;--muted:#64748b;--border:#e5e7eb;--success:#16a34a;--warning:#f59e0b;--danger:#dc2626;--navy:#061d3e;--navy2:#03152f;--blue:#185FA5;--blue2:#0C447C;--green:#16a34a;--red:#dc2626;--orange:#f59e0b;--muted:#64748b;--line:var(--border);--bg:#f5f8fc;--card:#fff;--shadow:0 14px 38px rgba(15,23,42,.07);--r:18px}
    *{box-sizing:border-box} html,body{margin:0;background:var(--bg);font-family:Inter,"SF Pro Display","Segoe UI",Arial,sans-serif;color:#0f172a} body{min-height:100vh;min-height:100dvh}.app{display:grid;grid-template-columns:var(--vb-sidebar-w,220px) minmax(0,1fr);min-height:100vh;min-height:100dvh}.sidebar{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}.side-top{padding:22px 20px 18px;border-bottom:1px solid rgba(255,255,255,.08)}.brand{display:flex;align-items:center;gap:8px}.logo-text{margin-left:-8px}.logo{width:72px;height:72px;display:grid;place-items:center;flex-shrink:0;background:none !important;border:none !important;box-shadow:none !important;padding:0}.logo img{width:72px;height:72px;object-fit:contain;display:block}.brand .logo-text h2,.brand h2{margin:0;font-size:20px;font-weight:800;letter-spacing:-.03em;color:var(--card) !important;opacity:1 !important}.brand .logo-text p,.brand p{margin:2px 0 0;font-size:12px;color:rgba(255,255,255,.75) !important;font-weight:600;opacity:1 !important}.biz-select{margin-top:28px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.09);height:58px;border-radius:13px;padding:0 14px;display:flex;align-items:center;justify-content:space-between}.biz-select strong{display:block;font-size:16px;color:#fff}.biz-select span{display:block;font-size:12px;color:#9fb4d0;margin-top:2px}.nav-scroll{padding:22px 14px;overflow:auto;flex:1}.nav-section{font-size:12px;color:#8fa7c6;font-weight:800;letter-spacing:.08em;margin:18px 8px 8px}.nav-section:first-child{margin-top:0}.nav-link{height:46px;border-radius:13px;display:flex;align-items:center;gap:13px;color:#d7e5f7;text-decoration:none;padding:0 14px;font-size:15.5px;font-weight:700;transition:.18s}.nav-link i{font-size:22px;color:#b7c9df}.nav-link:hover{background:rgba(255,255,255,.08);color:#fff}.nav-link.active{background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;box-shadow:0 12px 24px rgba(24,95,165,.32)}.nav-link.active i{color:#fff}.badge-dot{margin-inline-start:auto;min-width:23px;height:23px;border-radius:999px;background:var(--danger);color:white;font-size:12px;display:grid;place-items:center;font-weight:900}.side-bottom{padding:18px 20px 24px;border-top:1px solid rgba(255,255,255,.08);display:grid;gap:10px}.side-action{height:44px;border:0;border-radius:13px;background:rgba(255,255,255,.06);color:#dbeafe;text-align:start;padding:0 16px;font-size:15px;font-weight:700;display:flex;align-items:center;gap:12px;cursor:pointer}.side-action:hover{background:rgba(255,255,255,.1)}
    .main{min-width:0}.topbar{height:72px;background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 36px;position:sticky;top:0;z-index:20}.top-actions{display:flex;align-items:center;gap:12px;flex-shrink:0}.search-wrap{height:48px;max-width:720px;min-width:280px;flex:1;border:1px solid #dce7f5;background:#fff;border-radius:13px;display:flex;align-items:center;gap:12px;padding:0 16px;box-shadow:0 8px 22px rgba(15,23,42,.04)}.search-wrap i{font-size:20px;color:var(--muted)}.search-wrap input{border:0;outline:0;background:transparent;width:100%;font-size:15px;font-weight:500;color:#0f172a}.search-wrap input::placeholder{color:#94a3b8}.top-icon{width:48px;height:48px;border:1px solid #dce7f5;border-radius:13px;background:#fff;display:grid;place-items:center;color:#0f172a;position:relative;cursor:pointer;flex-shrink:0}.top-icon i{font-size:21px}.top-icon .badge-dot{position:absolute;right:-5px;top:-7px}.user-btn{height:48px;border:1px solid #dce7f5;background:#fff;border-radius:13px;display:flex;align-items:center;gap:11px;padding:0 14px;min-width:190px;cursor:pointer;flex-shrink:0}.avatar{width:36px;height:36px;border-radius:50%;background:var(--primary);color:#fff;display:grid;place-items:center;font-weight:900}.user-btn strong{font-size:14px;display:block;line-height:1.05}.user-btn small{font-size:12px;color:var(--muted);font-weight:600}.content{padding:16px 28px 24px}.hero{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:14px}.hero h1{font-size:23px;line-height:1.1;margin:0 0 3px;font-weight:850;letter-spacing:-.035em}.hero p{margin:0;color:#475569;font-size:13.5px}.hero-actions{display:none;gap:12px}/* desktop: hidden (unchanged); shown on mobile only */.btn{height:46px;border-radius:12px;border:1px solid #dce7f5;background:#fff;color:#0f172a;display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:0 18px;font-size:15px;font-weight:800;text-decoration:none;cursor:pointer;box-shadow:0 5px 14px rgba(15,23,42,.04)}.btn.primary{background:var(--primary);color:#fff;border-color:var(--primary);box-shadow:none}.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:14px}.stat{background:#fff;border:1px solid #dce7f5;border-radius:16px;min-height:112px;padding:15px 18px;box-shadow:var(--shadow);position:relative}.stat-icon{position:absolute;right:16px;top:14px;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;font-size:20px}.stat h3{font-size:14px;font-weight:750;margin:0 46px 8px 0;color:#0f172a}.stat .value{font-size:23px;line-height:1.15;font-weight:600;letter-spacing:.01em}.stat p{margin:6px 0 0;color:var(--muted);font-size:12.5px}.blue{color:var(--primary)}.red{color:var(--danger)}.green{color:var(--success)}.orange{color:#d97706}.bg-blue{background:#eaf2ff}.bg-red{background:#fff0f1}.bg-green{background:#e9f9f0}.bg-orange{background:#fff5df}.dashboard-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:14px}.card{background:#fff;border:1px solid #dce7f5;border-radius:16px;box-shadow:var(--shadow);padding:16px 18px}.card-head{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e9eef6;padding-bottom:10px;margin-bottom:12px}.card-title{font-size:16px;font-weight:850;display:flex;align-items:center;gap:9px}.view{color:var(--primary);text-decoration:none;font-weight:750;font-size:14px}.chart-card{grid-row:span 1;grid-column:1/-1}.chart-controls{height:38px;border:1px solid #dce7f5;border-radius:10px;padding:0 12px;background:#fff;font-weight:700;color:#0f172a}.chart-legend{display:flex;justify-content:center;flex-wrap:wrap;gap:24px;align-items:center;margin:2px 0 8px;font-size:13px}.legend-item{display:flex;align-items:center;gap:8px}.legend-swatch{width:22px;height:12px;border-radius:3px;background:var(--primary)}.legend-out{background:#cbd8ea}.legend-line{width:26px;height:3px;background:var(--success);position:relative;border-radius:9px}.legend-line:after{content:"";width:9px;height:9px;border-radius:50%;background:#fbbf24;border:2px solid #0f172a;position:absolute;left:8px;top:-5px}.chart-box{height:300px;position:relative}.chart-box canvas{width:100%;height:100%;display:block}.list{display:grid}.row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;padding:9px 0;border-bottom:1px solid #e9eef6;cursor:pointer}.row:last-child{border-bottom:0}.row strong{display:block;font-size:15px}.row small{display:block;margin-top:3px;color:var(--muted);font-size:13px}.row .amount{text-align:end;font-weight:800}.pill{display:inline-flex;align-items:center;height:23px;border-radius:999px;padding:0 10px;font-size:12px;font-weight:800}.pill.paid{background:#dcfce7;color:#047857}.pill.draft{background:#f1f5f9;color:#475569}.pill.active{background:#dbeafe;color:#1d4ed8}.pill.overdue{background:#ffe4e6;color:#be123c}.empty{padding:28px 0;text-align:center;color:var(--muted)}.bottom-grid{display:grid;grid-template-columns:.75fr 1.25fr;gap:16px}.overdue-list .row{grid-template-columns:1fr auto auto;border-left:3px solid var(--danger);padding-left:12px}.quick-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.quick-tile{height:64px;border:1px solid #dce7f5;background:#fff;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;color:#0f172a;text-decoration:none;font-size:12.5px;font-weight:800;text-align:center;line-height:1.15}.quick-tile i{font-size:21px;color:var(--primary)}.quick-tile:hover{border-color:var(--primary);box-shadow:0 12px 24px rgba(24,95,165,.12)}@media(max-width:1250px){.dashboard-grid{grid-template-columns:1fr 1fr}.chart-card{grid-column:span 2}.bottom-grid{grid-template-columns:1fr}.stats{grid-template-columns:repeat(2,1fr)}}@media(max-width:900px){.app{grid-template-columns:1fr}.sidebar{display:none}.topbar{padding:0 18px}.content{padding:18px 16px calc(84px + env(safe-area-inset-bottom))}.hero{flex-direction:row;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:18px}.hero>div:first-child{flex:1 1 150px;min-width:0}.hero h1{font-size:22px}.hero p{font-size:13px}.hero-actions{display:flex;gap:10px;flex-wrap:wrap;flex:0 0 auto}.hero-actions .btn{height:42px;padding:0 14px;font-size:14px}.dashboard-grid{grid-template-columns:1fr;gap:14px}.bottom-grid{grid-template-columns:1fr;gap:14px}.chart-card{grid-column:auto}.chart-box{height:230px}.stats{grid-template-columns:1fr 1fr;gap:12px}.stat{min-height:0;padding:14px 16px;position:relative}.stat-icon{position:absolute;right:14px;top:13px;width:36px;height:36px;margin:0;font-size:19px}.stat h3{margin:0 44px 6px 0;font-size:13px}.stat .value{font-size:20px}.stat p{margin:6px 0 0;font-size:12px}.quick-grid{grid-template-columns:repeat(2,1fr);gap:12px}.quick-tile{height:96px;font-size:14px;gap:10px}.quick-tile i{font-size:26px}}@media(max-width:560px){.user-btn{min-width:0}.user-btn div:not(.avatar),.top-icon:nth-of-type(1){display:none}.content{padding:16px 14px calc(84px + env(safe-area-inset-bottom))}.hero h1{font-size:20px}.hero-actions .btn{height:40px;padding:0 12px;font-size:13px}.stats{gap:10px}.stat{padding:14px}.stat .value{font-size:19px}.quick-grid{gap:10px}.quick-tile{height:88px;font-size:13px}.quick-tile i{font-size:24px}}
    /* ── Finance row: Cash Flow + Net Income — two equal, matching cards ── */
    .insights-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:14px;align-items:stretch}
    /* Both cards = identical box (padding/radius/shadow from .card). flex column so the
       chart fills and the summary/table sits below. grid-column:auto cancels the legacy
       .chart-card{grid-column:1/-1} that was making Cash Flow span the whole row. */
    /* Compact insight cards — ALL FOUR share one fixed height so the 2×2 grid is
       perfectly even (Overdue = Cash Flow = P&L = Net Income). The chart/list flexes
       to fill what's left after the head, legend and footer. (Mobile overrides to
       height:auto so the taller mobile charts never clip.) */
    .insights-grid>.card{display:flex;flex-direction:column;height:360px;padding:13px 15px;grid-column:auto!important;margin:0!important;overflow:hidden!important}
    /* Overdue card: spread the invoices + bills sections to fill the height evenly so
       there is no large blank gap. */
    .insights-grid .insight-body{justify-content:space-between}
    .insights-grid .card-head{align-items:flex-start;padding-bottom:8px;margin-bottom:8px}
    .insights-grid .card-title{font-size:15px}
    .insights-grid .chart-legend{flex:0 0 auto;margin:1px 0 6px;font-size:11px;gap:14px}
    .insights-grid .chart-controls{height:30px;font-size:12px;padding:0 8px}
    .insights-grid .chart-box{flex:1 1 auto;min-height:60px;height:auto!important;width:100%}
    /* Chart overlays: skeleton while loading, clean message when a period has no data. */
    .chart-ov{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border-radius:10px}
    .chart-empty{color:var(--muted);font-size:13px;font-weight:600;text-align:center;padding:0 18px;line-height:1.4}
    .chart-skel{position:absolute;inset:0;border-radius:10px;background:linear-gradient(100deg,#eef2f7 30%,#f7fafc 50%,#eef2f7 70%);background-size:200% 100%;animation:chartShimmer 1.2s ease-in-out infinite}
    @keyframes chartShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
    html.viya-dv .chart-skel{background:linear-gradient(100deg,#16223c 30%,#1d2c49 50%,#16223c 70%);background-size:200% 100%}
    html.viya-dv .chart-empty{color:#9fb1cb}
    .card-sub{font-size:12.5px;color:var(--muted);font-weight:600;margin-top:3px}
    .fin-head-actions{display:flex;align-items:center;gap:10px;flex-shrink:0}
    .info-icon{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:50%;background:#e2e8f0;color:#475569;font-size:11px;font-weight:800;font-style:italic;cursor:help;position:relative;vertical-align:middle}
    .info-icon:hover::after,.info-icon:focus::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);background:#0f172a;color:#fff;font-size:11px;font-weight:600;font-style:normal;padding:7px 10px;border-radius:8px;white-space:nowrap;box-shadow:0 8px 22px rgba(15,23,42,.25);z-index:30}
    /* Cash Flow summary row — mirrors the Net Income table so the two cards match height */
    .cf-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px;border-top:2px solid #dce7f5;padding-top:8px;flex:0 0 auto}
    .cf-summary>div{display:flex;flex-direction:column;gap:3px;min-width:0}
    .cf-summary span{font-size:11px;color:var(--muted);font-weight:700}
    .cf-summary strong{font-size:14px;font-weight:850;letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .ni-table{width:100%;border-collapse:collapse;margin-top:8px;font-size:13px;flex:0 0 auto}
    .ni-table th,.ni-table td{padding:5px 8px;text-align:end;border-top:1px solid #e9eef6;white-space:nowrap}
    .ni-table thead th{color:var(--muted);font-size:11.5px;font-weight:800;border-top:0;padding-top:0}
    .ni-table th:first-child,.ni-table td:first-child{text-align:start}
    .ni-table td:first-child{font-weight:700;color:#0f172a}
    .ni-table tr.ni-net td{font-weight:850;border-top:2px solid #dce7f5}
    /* Prompt 119: blue clickable-looking amounts; equal size/alignment/row height. */
    .ni-table td:not(:first-child){color:#185FA5;font-weight:600}
    .ni-table tr.ni-net td:not(:first-child){color:#185FA5;font-weight:850}
    .ni-table th,.ni-table td{height:30px}
    .ni-filter{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--muted);margin:2px 0 8px;flex:0 0 auto;flex-wrap:wrap}
    .ni-filter .chart-controls{height:30px;font-size:12px;padding:0 8px}
    .ni-filter .info-icon{cursor:help}
    #netIncomeCard{border:1px solid #d8e1ee!important;border-radius:12px!important}
    /* Recent Invoices / Active Trips — keep compact (~260px) on laptop/tablet; a long
       list scrolls inside its own card so the page height doesn't grow and nothing is
       cut off. Only applies >=769px (mobile keeps its own stacked layout). */
    @media(min-width:1025px){
      /* Desktop only (>=1025px). Row 3 (Recent / Active) capped at 250px, Row 4
         (Overdue / Quick Actions) at 220px; the list area scrolls inside the card so
         nothing is cut off and the page height stays small. */
      .dashboard-grid>.card{display:flex;flex-direction:column;max-height:250px}
      .dashboard-grid>.card>div:last-child{flex:1 1 auto;min-height:0;overflow-y:auto}
      .bottom-grid>.card{display:flex;flex-direction:column;max-height:220px;overflow:hidden}
      .bottom-grid>.card .overdue-list{flex:1 1 auto;min-height:0;overflow-y:auto}
    }
    /* Tablet < 1024px: stack the two cards full width; chart card a touch shorter. */
    @media(max-width:1024px){.insights-grid{grid-template-columns:1fr}.insights-grid>.card{height:340px;min-height:0}}
    /* Phone <= 640px: keep charts in the 220-260px readable band (no oversize, no clip). */
    @media(max-width:640px){.insights-grid>.card{height:328px}.insights-grid .chart-legend{font-size:10px;gap:12px}}
    /* (Stale mobile overrides removed — the authoritative mobile dashboard layout is the
       comprehensive @media(max-width:768px) block further below. The old block forced a
       1-column insights grid and an #netIncomeCard id-rule whose margin-top/padding beat
       the new class rules and pushed Net Income out of alignment in the 2×2 grid.) */
    html.viya-dv .card-sub{color:#9fb1cb}
    html.viya-dv .cf-summary{border-top-color:#22324f}
    html.viya-dv .ni-table th,html.viya-dv .ni-table td{border-top-color:#22324f}
    html.viya-dv .ni-table td:first-child{color:#e6edf7}
    html.viya-dv .ni-table tr.ni-net td{border-top-color:#2b3c5c}
    html.viya-dv .info-icon{background:#22324f;color:#cbd5e1}
    /* ── Insights section header + new insight cards ── */
    .insights-head{display:flex;align-items:center;justify-content:space-between;margin:4px 0 10px;gap:12px}
    .insights-head h2{font-size:19px;font-weight:850;margin:0;letter-spacing:-.02em}
    .insights-customize{height:38px;border:1px solid #dce7f5;background:#fff;border-radius:11px;padding:0 16px;font-size:13.5px;font-weight:750;color:#0f172a;display:inline-flex;align-items:center;gap:7px;cursor:pointer}
    .insights-customize:hover{border-color:var(--primary);color:var(--primary)}
    .insights-customize i{font-size:17px}
    .insight-body{flex:1 1 auto;display:flex;flex-direction:column;min-height:0;overflow-y:auto}
    .ob-section{margin-bottom:10px}
    .ob-section:last-child{margin-bottom:0}
    .ob-label{font-size:12.5px;font-weight:800;color:#0f172a;margin-bottom:8px;display:flex;align-items:center;gap:8px}
    .ob-list{display:flex;flex-direction:column}
    .ob-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px solid #eef2f7;font-size:13px;cursor:pointer}
    .ob-row:last-child{border-bottom:0}
    .ob-row strong{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .ob-row .ob-amt{font-weight:850;white-space:nowrap}
    .ob-empty{padding:14px 0;color:var(--muted);font-size:13px;text-align:center}
    html.viya-dv .insights-customize{background:#0f1830;border-color:#22324f;color:#e6edf7}
    html.viya-dv .ob-label{color:#e6edf7}
    html.viya-dv .ob-row{border-bottom-color:#1b2740}
    html.viya-dv .ob-row strong{color:#e6edf7}
    /* dropdown menus (quick-add, notifications, profile) */
    .dd{position:relative}
    .dd-menu{position:absolute;top:calc(100% + 10px);right:0;min-width:230px;background:#fff;border:1px solid #dce7f5;border-radius:14px;box-shadow:0 22px 48px rgba(15,23,42,.16);padding:8px;display:none;z-index:60}
    .dd.open .dd-menu{display:block}
    .dd-item{display:flex;align-items:center;gap:11px;width:100%;border:0;background:transparent;text-align:start;height:42px;padding:0 12px;border-radius:10px;font-size:14.5px;font-weight:700;color:#0f172a;text-decoration:none;cursor:pointer;box-sizing:border-box}
    .dd-item i{font-size:19px;color:var(--primary)}
    .dd-item:hover{background:#eef4ff}
    .dd-head{font-size:12px;font-weight:800;letter-spacing:.06em;color:var(--muted);padding:6px 12px 8px;text-transform:uppercase}
    .dd-empty{padding:16px 12px;color:var(--muted);font-size:14px;text-align:center}
    .dd-foot{border-top:1px solid #eef2f8;margin-top:6px;color:var(--primary);justify-content:center}
    #notifList .dd-item{height:auto;padding:9px 12px;flex-direction:column;align-items:flex-start;gap:2px}
    #notifList .dd-item strong{font-size:14px}#notifList .dd-item small{font-size:12.5px;color:var(--muted);font-weight:600}
    /* global search results */
    .search-wrap{position:relative;overflow:visible}
    .search-results{position:absolute;top:calc(100% + 10px);left:0;right:0;background:#fff;border:1px solid #dce7f5;border-radius:14px;box-shadow:0 22px 48px rgba(15,23,42,.16);padding:8px;display:none;max-height:60vh;overflow:auto;z-index:60}
    .search-results.open{display:block}
    .sr-group{font-size:11px;font-weight:800;letter-spacing:.06em;color:#94a3b8;padding:8px 12px 4px;text-transform:uppercase}
    .sr-item{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:10px;cursor:pointer;text-decoration:none;color:#0f172a}
    .sr-item:hover{background:#eef4ff}
    .sr-item i{font-size:18px;color:var(--primary)}
    .sr-item strong{font-size:14px;display:block;font-weight:750}.sr-item small{font-size:12.5px;color:var(--muted)}
    .sr-item .sr-amt{margin-inline-start:auto;font-weight:800;font-size:13.5px}
    .sr-empty{padding:18px 12px;color:var(--muted);text-align:center;font-size:14px}
    /* skeleton loaders — shared system (.skel / .skel-line defined in skeleton.css) */
    .biz-select{cursor:pointer}
    /* ── dark mode overrides for dashboard-specific surfaces ── */
    html.viya-dv,html.viya-dv body{background:#0a0f1e!important;color:#e6edf7}
    html.viya-dv .topbar{background:rgba(13,20,38,.86);border-bottom-color:#1b2740}
    html.viya-dv .search-wrap{background:#0f1830;border-color:#22324f}
    html.viya-dv .search-wrap input{color:#e6edf7}
    html.viya-dv .search-wrap input::placeholder{color:#6f829e}
    html.viya-dv .top-icon,html.viya-dv .user-btn,html.viya-dv .btn,html.viya-dv .chart-controls{background:#0f1830;border-color:#22324f;color:#e6edf7}
    html.viya-dv .btn.primary{background:var(--primary);border-color:var(--primary);color:#fff}
    html.viya-dv .user-btn small{color:#9fb1cb}
    html.viya-dv .stat,html.viya-dv .card,html.viya-dv .quick-tile{background:#101a32;border-color:#22324f}
    html.viya-dv .stat h3,html.viya-dv .card-title,html.viya-dv .quick-tile{color:#e6edf7}
    html.viya-dv .hero h1{color:#f1f6ff}html.viya-dv .hero p,html.viya-dv .stat p{color:#9fb1cb}
    html.viya-dv .card-head{border-bottom-color:#22324f}
    html.viya-dv .row{border-bottom-color:#1b2740}html.viya-dv .row strong{color:#e6edf7}html.viya-dv .row small{color:#9fb1cb}
    html.viya-dv .empty{color:#9fb1cb}
    html.viya-dv .dd-menu,html.viya-dv .search-results{background:#101a32;border-color:#22324f}
    html.viya-dv .dd-item,html.viya-dv .sr-item,html.viya-dv .sr-item strong,html.viya-dv #notifList .dd-item strong{color:#e6edf7}
    html.viya-dv .dd-item:hover,html.viya-dv .sr-item:hover{background:#16233f}
    html.viya-dv .dd-head,html.viya-dv .dd-empty,html.viya-dv #notifList .dd-item small,html.viya-dv .sr-group,html.viya-dv .sr-item small,html.viya-dv .sr-empty,html.viya-dv .sr-amt,html.viya-dv .chart-legend{color:#9fb1cb}
    html.viya-dv .dd-foot{border-top-color:#22324f;color:#78aaff}
    html.viya-dv .legend-out{background:#52627a}
    html.viya-dv .bg-blue{background:#132a4f}html.viya-dv .bg-red{background:#3b1720}html.viya-dv .bg-green{background:#123321}html.viya-dv .bg-orange{background:#382914}
    html.viya-dv .value.blue{color:#5b9bff}html.viya-dv .value.green{color:#34d399}html.viya-dv .value.red{color:#f87171}html.viya-dv .value.orange{color:#fbbf24}
    /* ═══════════════════════════════════════════════════════
     VIYABOOK DASHBOARD — MOBILE FINAL v4
     Pixel-perfect native-app layout for ≤768px screens.
     Touches CSS only — zero JS/Firebase changes.
     All font sizes intentionally compact (your request).
   ═══════════════════════════════════════════════════════ */

    /* Mobile app layout — phones AND 10" tablets (<=1024px). Desktop (>=1025px) keeps
       the desktop dashboard unchanged. */
    @media (max-width:1024px) {

      /* ── 0. Base reset ── */
      html,body{ max-width:100vw; overflow-x:hidden ;overflow-x:clip}

      /* ── 1. Hide desktop chrome, show mobile layout ── */
      body.mobile-dashboard-v2 .topbar            { display:none !important }
      body.mobile-dashboard-v2 .sidebar           { display:none !important }
      body.mobile-dashboard-v2 .app               { grid-template-columns:1fr !important; width:100% !important; overflow-x:hidden !important }
      body.mobile-dashboard-v2 .main              { min-width:0 !important; padding:0 !important }
      body.mobile-dashboard-v2                    { padding:0 !important }

      /* ── 2. Top nav (injected by layout.js) ── */
      body.mobile-dashboard-v2 .top-nav           { height:48px !important; min-height:48px !important; margin:0 !important; padding:4px 12px !important }

      /* ── 3. Content wrapper ── */
      body.mobile-dashboard-v2 .content           { padding:6px 10px calc(110px + env(safe-area-inset-bottom,0px)) 10px !important }

      /* ── 4. Greeting ── */
      body.mobile-dashboard-v2 .hero              { margin:2px 0 6px !important; padding:0 !important; flex-direction:column !important; gap:0 !important }
      body.mobile-dashboard-v2 .hero h1           { font-size:15px !important; font-weight:700 !important; line-height:1.2 !important; margin:0 !important }
      body.mobile-dashboard-v2 .hero p            { font-size:11px !important; color:var(--muted) !important; margin:2px 0 0 !important; line-height:1.3 !important }
      /* Greeting wrapper: the desktop/≤900 rule sets `flex:1 1 150px` (a horizontal
         basis). Because the mobile hero is flex-COLUMN, that 150px becomes a vertical
         basis → a ~150px tall empty box under the greeting. Collapse it to content. */
      body.mobile-dashboard-v2 .hero > div        { flex:0 0 auto !important; min-height:0 !important; width:100% !important }
      body.mobile-dashboard-v2 .hero-actions      { display:none !important }

      /* ── 5. KPI stat cards — 2×2 grid, icon top-right pill ── */
      body.mobile-dashboard-v2 .stats             { display:grid !important; grid-template-columns:1fr 1fr !important; gap:7px !important; margin:0 0 8px !important; padding:0 !important }
      body.mobile-dashboard-v2 .stat              { position:relative !important; min-height:0 !important; padding:9px 10px !important; border-radius:11px !important; display:flex !important; flex-direction:column !important; gap:0 !important; overflow:hidden !important }
      body.mobile-dashboard-v2 .stat-icon         { position:absolute !important; top:8px !important; right:8px !important; width:28px !important; height:28px !important; border-radius:7px !important; font-size:14px !important; display:grid !important; place-items:center !important; margin:0 !important }
      body.mobile-dashboard-v2 .stat h3           { font-size:10px !important; font-weight:600 !important; color:var(--muted) !important; margin:0 0 3px !important; padding-right:36px !important; line-height:1.2 !important }
      body.mobile-dashboard-v2 .stat .value       { font-size:14px !important; font-weight:800 !important; line-height:1.2 !important; letter-spacing:-.01em !important; margin:0 !important }
      body.mobile-dashboard-v2 .stat p            { font-size:9px !important; color:#94a3b8 !important; margin:2px 0 0 !important; line-height:1.2 !important }

      /* ── 6. Insights section header ── */
      body.mobile-dashboard-v2 .insights-head     { margin:8px 0 6px !important; gap:8px !important }
      body.mobile-dashboard-v2 .insights-head h2  { font-size:14px !important; font-weight:800 !important; letter-spacing:-.01em !important }
      body.mobile-dashboard-v2 .insights-customize{ height:30px !important; font-size:12px !important; padding:0 10px !important; border-radius:8px !important }
      body.mobile-dashboard-v2 .insights-customize i { font-size:14px !important }

      /* ── 7. Insights grid — 2 per row, SAME card style/size/gap as Recent Invoices
         & Active Trips (the dashboard-grid below). stretch = equal heights per row. ── */
      body.mobile-dashboard-v2 .insights-grid     { display:grid !important; grid-template-columns:1fr 1fr !important; gap:7px !important; margin:0 0 7px !important; align-items:stretch !important }
      body.mobile-dashboard-v2 .insights-grid > .card { min-height:0 !important; max-height:none !important; height:auto !important; overflow:visible !important; padding:10px 9px !important; border-radius:12px !important; display:flex !important; flex-direction:column !important }
      /* All 4 cards equal half-width — no spanning */
      body.mobile-dashboard-v2 #overdueBillsCard  { grid-column:auto !important }
      body.mobile-dashboard-v2 #cashFlowCard      { grid-column:auto !important }
      body.mobile-dashboard-v2 #pnlCard           { grid-column:auto !important }
      body.mobile-dashboard-v2 #netIncomeCard     { grid-column:auto !important }
      /* Compact card-head for all narrow cards */
      body.mobile-dashboard-v2 #overdueBillsCard .card-title { font-size:13px !important }
      body.mobile-dashboard-v2 #netIncomeCard .card-title    { font-size:13px !important }

      /* ── 8. Insight card heads ── */
      body.mobile-dashboard-v2 .card-head         { padding-bottom:7px !important; margin-bottom:7px !important }
      body.mobile-dashboard-v2 .card-title        { font-size:13px !important; font-weight:800 !important }
      /* Match the clean Recent/Active header: no subtitle, no dropdown on mobile. */
      body.mobile-dashboard-v2 .card-sub          { display:none !important }
      body.mobile-dashboard-v2 .view              { font-size:11px !important }
      body.mobile-dashboard-v2 .fin-head-actions  { gap:4px !important }
      /* Hide 'View report' text link on narrow 2-col cards — too cramped */
      body.mobile-dashboard-v2 #cashFlowCard .fin-head-actions .view,
      body.mobile-dashboard-v2 #pnlCard .fin-head-actions .view  { display:none !important }
      body.mobile-dashboard-v2 .chart-controls    { display:none !important }
      /* Narrow card titles for 2-col cards */
      body.mobile-dashboard-v2 #cashFlowCard .card-title,
      body.mobile-dashboard-v2 #pnlCard .card-title   { font-size:13px !important }
      body.mobile-dashboard-v2 #cashFlowCard .card-sub,
      body.mobile-dashboard-v2 #pnlCard .card-sub     { font-size:9px !important }

      /* ── 9. Overdue Bills card ── */
      body.mobile-dashboard-v2 .insight-body      { overflow:visible !important }
      body.mobile-dashboard-v2 .ob-section        { margin-bottom:7px !important }
      body.mobile-dashboard-v2 .ob-label          { font-size:10px !important; margin-bottom:4px !important; gap:4px !important }
      /* Hide 'View all' on overdue card — too cramped at half width */
      body.mobile-dashboard-v2 #overdueBillsCard .view { display:none !important }
      body.mobile-dashboard-v2 #overdueBillsCard .ob-list .ob-row:nth-child(n+3) { display:none !important }
      body.mobile-dashboard-v2 .ob-row            { font-size:11px !important; padding:5px 0 !important }
      body.mobile-dashboard-v2 .ob-row strong     { font-size:11px !important }
      body.mobile-dashboard-v2 .ob-amt            { font-size:11px !important }
      body.mobile-dashboard-v2 .ob-empty          { font-size:11px !important; padding:8px 0 !important }
      body.mobile-dashboard-v2 .pill              { height:18px !important; font-size:10px !important; padding:0 7px !important }

      /* ── 10. Cash Flow chart card ── */
      body.mobile-dashboard-v2 #cashFlowCard .chart-legend { font-size:10px !important; gap:10px !important; margin:2px 0 5px !important }
      body.mobile-dashboard-v2 #cashFlowCard .legend-item  { gap:4px !important }
      body.mobile-dashboard-v2 #cashFlowCard .legend-swatch{ width:12px !important; height:5px !important }
      body.mobile-dashboard-v2 .chart-box         { height:240px !important; min-height:0 !important }
      body.mobile-dashboard-v2 .chart-box canvas  { max-height:240px !important }
      /* Phones: ONE chart per row so month labels stay readable (a half-width chart
         can't fit 6-12 month labels). Tablets keep the 2-up grid above. */
      @media (max-width:640px){
        body.mobile-dashboard-v2 .insights-grid   { grid-template-columns:1fr !important }
        body.mobile-dashboard-v2 .chart-box        { height:230px !important }
        body.mobile-dashboard-v2 .chart-box canvas { max-height:230px !important }
      }

      /* ── 11. Cash Flow summary row ── */
      body.mobile-dashboard-v2 .cf-summary        { grid-template-columns:repeat(3,1fr) !important; gap:4px !important; padding-top:6px !important; margin-top:6px !important }
      body.mobile-dashboard-v2 .cf-summary span   { font-size:8px !important }
      body.mobile-dashboard-v2 .cf-summary strong { font-size:11px !important }

      /* ── 12. P&L card — same sizing as Cash Flow ── */
      body.mobile-dashboard-v2 #pnlCard .chart-legend  { font-size:10px !important; gap:10px !important; margin:2px 0 5px !important }

      /* ── 13. Net Income card ── */
      body.mobile-dashboard-v2 .ni-box            { height:115px !important; min-height:0 !important }
      body.mobile-dashboard-v2 .ni-table          { font-size:9px !important; margin-top:4px !important; table-layout:fixed !important; width:100% !important }
      body.mobile-dashboard-v2 .ni-table th,
      body.mobile-dashboard-v2 .ni-table td       { padding:3px 2px !important; font-size:9px !important; overflow:hidden !important; text-overflow:ellipsis !important }
      body.mobile-dashboard-v2 .ni-table thead th { font-size:8.5px !important }

      /* ── 14. Recent invoices | Active trips — side by side ── */
      body.mobile-dashboard-v2 .dashboard-grid    { display:grid !important; grid-template-columns:1fr 1fr !important; gap:7px !important; margin:0 0 7px !important }
      body.mobile-dashboard-v2 .dashboard-grid > .card { max-height:none !important; overflow:visible !important; padding:10px 9px !important; border-radius:12px !important; display:flex !important; flex-direction:column !important }
      body.mobile-dashboard-v2 .dashboard-grid .card-title { font-size:11px !important }
      body.mobile-dashboard-v2 .dashboard-grid .view { font-size:10px !important }
      body.mobile-dashboard-v2 .row               { padding:5px 0 !important; gap:6px !important }
      body.mobile-dashboard-v2 .row strong        { font-size:11px !important; font-weight:700 !important }
      body.mobile-dashboard-v2 .row small         { font-size:10px !important }
      body.mobile-dashboard-v2 .row .amount       { font-size:11px !important; font-weight:800 !important }

      /* ── 15. Info scroll (syncInfoScroll moves cards here on mobile) — 2-col ── */
      body.mobile-dashboard-v2 #infoScroll        { display:grid !important; grid-template-columns:1fr 1fr !important; gap:7px !important; margin:0 0 7px !important; padding:0 !important }
      body.mobile-dashboard-v2 #infoScroll > .card{ width:auto !important; padding:10px 9px !important; border-radius:12px !important; margin:0 !important; height:auto !important; max-height:none !important; display:flex !important; flex-direction:column !important }
      body.mobile-dashboard-v2 #infoScroll .card-title { font-size:11px !important }
      body.mobile-dashboard-v2 #infoScroll .view  { font-size:10px !important }

      /* ── 16. Bottom grid — Overdue Invoices | Quick Actions side by side ── */
      body.mobile-dashboard-v2 .bottom-grid       { display:grid !important; grid-template-columns:1fr 1fr !important; gap:7px !important; margin:0 !important }
      body.mobile-dashboard-v2 .bottom-grid > .card { padding:10px 9px !important; border-radius:12px !important; margin:0 !important; max-height:none !important; overflow:visible !important; display:flex !important; flex-direction:column !important }
      /* Overdue card: compact list */
      body.mobile-dashboard-v2 .overdue-list .row { padding:5px 0 !important; padding-left:7px !important }
      body.mobile-dashboard-v2 .bottom-grid .card-title { font-size:11px !important }
      body.mobile-dashboard-v2 .bottom-grid .view { font-size:10px !important }
      /* Quick Actions: 2×4 grid inside the half-width card */
      body.mobile-dashboard-v2 .bottom-grid .quick-grid { display:grid !important; grid-template-columns:repeat(2,1fr) !important; gap:5px !important }
      body.mobile-dashboard-v2 .bottom-grid .quick-tile { padding:8px 3px 7px !important; font-size:8.5px !important; gap:4px !important; border-radius:9px !important }
      body.mobile-dashboard-v2 .bottom-grid .quick-tile i { width:28px !important; height:28px !important; font-size:15px !important; border-radius:7px !important }

      /* ── 17. Quick Actions — 4-column app-icon grid ── */
      body.mobile-dashboard-v2 .quick-grid        { display:grid !important; grid-template-columns:repeat(4,1fr) !important; gap:6px !important }
      body.mobile-dashboard-v2 .quick-tile        { height:auto !important; min-height:0 !important; padding:9px 3px 8px !important; border-radius:10px !important; font-size:9px !important; font-weight:700 !important; gap:5px !important; display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; text-align:center !important; line-height:1.2 !important; border:1px solid #e5e7eb !important; background:#fff !important }
      body.mobile-dashboard-v2 .quick-tile i      { width:32px !important; height:32px !important; font-size:17px !important; border-radius:8px !important; background:rgba(24,95,165,.1) !important; color:var(--primary) !important; display:grid !important; place-items:center !important }

      /* ── 18. Bottom nav — styled globally as the floating island in layout.js.
         (Per-page overrides removed so every page shares the same floating bar.) ── */

      /* ── 19. Dark mode ── */
      html.viya-dv body.mobile-dashboard-v2 .hero h1   { color:#f1f6ff !important }
      html.viya-dv body.mobile-dashboard-v2 .hero p    { color:#9fb1cb !important }
      html.viya-dv body.mobile-dashboard-v2 .stat h3   { color:#9fb1cb !important }
      html.viya-dv body.mobile-dashboard-v2 .stat p    { color:#7e8ca6 !important }
      html.viya-dv body.mobile-dashboard-v2 .quick-tile{ border-color:#22324f !important; color:#e6edf7 !important }
      html.viya-dv body.mobile-dashboard-v2 .quick-tile i { background:rgba(91,155,255,.15) !important; color:#78aaff !important }
      html.viya-dv body.mobile-dashboard-v2 .insights-head h2 { color:#f1f6ff !important }
    }

    /* ── Very small phones (<360px): stack every card grid to a single column so
       nothing is cramped. ── */
    @media (max-width:359px){
      body.mobile-dashboard-v2 .insights-grid,
      body.mobile-dashboard-v2 .dashboard-grid,
      body.mobile-dashboard-v2 .bottom-grid,
      body.mobile-dashboard-v2 #infoScroll { grid-template-columns:1fr !important }
    }

    /* ── Tablet 600-768px: 4-col KPI cards ── */
    /* (KPI stays 2 per row on phones and 10" tablets per the approved design — the
       old 4-column override for 601–768px was removed.) */

    /* A11y: a clear keyboard focus ring for the dashboard's interactive elements.
       The clickable rows/insight-rows/info-icon are non-native (role="link"/tabindex),
       and quick-tiles/view links are anchors — give all a consistent visible focus
       outline for keyboard users. :focus-visible only shows on keyboard focus, never
       on mouse click, so it doesn't alter the pointer experience. */
    .row:focus-visible,.ob-row:focus-visible,.quick-tile:focus-visible,.view:focus-visible,
    .info-icon:focus-visible,.insights-customize:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:8px}
    html.viya-dv .row:focus-visible,html.viya-dv .ob-row:focus-visible,html.viya-dv .quick-tile:focus-visible,
    html.viya-dv .view:focus-visible,html.viya-dv .info-icon:focus-visible{outline-color:#5b9bff}

/* ===== was <style id="vb-finance-gate"> ===== */
/* No-flash staff finance gate: the financial stat cards + finance charts stay
       HIDDEN until the role/permissions resolve (permissions-ready added by JS), and
       remain hidden for staff. So staff never see Revenue/Expenses/Profit/Paid — not
       even for one frame on reload. Owner/admin see them once permissions resolve. */
    body:not(.permissions-ready) .stat,
    body:not(.permissions-ready) #cashFlowCard,
    body:not(.permissions-ready) #pnlCard,
    body:not(.permissions-ready) #netIncomeCard,
    body.viya-finance-hidden .stat,
    body.viya-finance-hidden #cashFlowCard,
    body.viya-finance-hidden #pnlCard,
    body.viya-finance-hidden #netIncomeCard,
    body.staff-role .stat,
    body.staff-role #cashFlowCard,
    body.staff-role #pnlCard,
    body.staff-role #netIncomeCard{display:none!important}
    /* The whole "Insights for you" section is hidden by default and for staff, so it
       never flashes on reload before viyaGateInsights() removes it from the DOM. Only an
       owner/admin (permissions-ready + NOT staff-role) ever sees it. */
    body:not(.permissions-ready) section.insights,
    body.staff-role section.insights{display:none!important}

    /* ════════════════════════════════════════════════════════════════════
       DASHBOARD CHART HEIGHTS (Prompt 121) — correct, non-overlapping sizes.
       320px desktop · 280px tablet · 240px mobile. Applied to every chart box
       (Cash Flow / Revenue / Expenses / P&L / Profit / Net Income). The Net
       Income chart was 115px on phones → 5 Y-axis labels overlapped and bars
       compressed; this gives every chart real vertical room. Selectors include
       body.mobile-dashboard-v2 so they out-rank the older compact rules.
       ════════════════════════════════════════════════════════════════════ */
    .chart-box, .ni-box,
    body.mobile-dashboard-v2 .chart-box,
    body.mobile-dashboard-v2 .ni-box { height: 320px !important; min-height: 0 !important; position: relative !important; }
    .chart-box > canvas, .ni-box > canvas,
    body.mobile-dashboard-v2 .chart-box canvas,
    body.mobile-dashboard-v2 .ni-box canvas { width: 100% !important; height: 100% !important; max-height: none !important; display: block !important; }
    @media (max-width: 1024px) {
      .chart-box, .ni-box,
      body.mobile-dashboard-v2 .chart-box,
      body.mobile-dashboard-v2 .ni-box { height: 280px !important; }
    }
    @media (max-width: 768px) {
      .chart-box, .ni-box,
      body.mobile-dashboard-v2 .chart-box,
      body.mobile-dashboard-v2 .ni-box { height: 240px !important; }
    }

/* ===== was <style id="vb-desktop-scroll-lock"> ===== */
/* Desktop: sidebar fixed, only content scrolls. Mobile (<=1024) unchanged. */
@media (min-width:1025px){
  html, body { height:100% !important; }
  .app, .dashboard-shell { height:100vh !important;
 height:100dvh !important; overflow:hidden !important; }
  .app > .sidebar, .dashboard-shell > .sidebar, aside.sidebar, .sidebar { height:100vh !important;height:100dvh !important; }
  .app > .main, .dashboard-shell > .main-content,
  .main, .main-content, .content-scroll { height:100vh !important;
 height:100dvh !important; overflow-y:auto !important; min-height:0 !important; }
}

/* ===== was <style id="viya-sea"> ===== */
/* ── Sea-Chart theme layer: Sora headings + Space Mono figures + accents.
      Palette already ocean; this only adds fonts + lagoon/coral. No logic touched.
      Heading font scoped to :not([lang="dv"]) so Dhivehi (Faruma) is preserved. ── */




:root{
  --font-display:'Inter',system-ui,sans-serif;
  --font-mono:ui-monospace,monospace;
  --lagoon:#2CB8C6; --coral:#FF6A4D;
}
html:not([lang="dv"]) :is(.hero h1,.card-title,.stat h3,.brand h2){
  font-family:var(--font-display) !important; letter-spacing:-.02em;
}
html:not([lang="dv"]) :is(.stat .value,.row .amount,.ni-table td:not(:first-child)){
  font-family:var(--font-mono) !important; letter-spacing:-.02em;
}
/* lagoon focus ring on search + coral signal on the "New" hero action */
.search-wrap:focus-within{ border-color:var(--lagoon) !important; box-shadow:0 0 0 3px rgba(44,184,198,.18) !important; }
.hero-actions .btn.primary{ background:var(--coral) !important; border-color:var(--coral) !important; }

/* ── Match the design mockup: softer sea-shell cards + rounded ── */
.stat,.card,.quick-tile{ border-color:var(--border) !important; border-radius:16px !important; }
.stat{ box-shadow:0 14px 34px rgba(12,30,62,.06) !important; }

/* invoices / insights table headers → uppercase mono (design style) */
html:not([lang="dv"]) :is(.ni-table th, .card table th, .content table th){
  font-family:var(--font-mono) !important; text-transform:uppercase;
  letter-spacing:.06em; font-size:11px; color:var(--muted);
}

/* status pills → design chip tints */
.pill.paid{ background:rgba(18,161,80,.12) !important; color:#12A150 !important; }
.pill.overdue{ background:rgba(255,106,77,.14) !important; color:#E5484D !important; }
.pill.active{ background:rgba(24,95,165,.12) !important; color:var(--primary) !important; }
.pill.draft{ background:#EEF4FA !important; color:#5A708C !important; }

/* quick-tile icon chips (design: rounded tinted square) */
.quick-tile i{ color:var(--primary); }
.quick-tile:hover{ border-color:var(--lagoon) !important; }

/* ===== was <style id="vbd-redesign"> ===== */
/* ═══════════════ ViyaBook Dashboard redesign (self-contained) ═══════════════ */
:root{
  --vbd-bg:#eef2f8; --vbd-side:#0b1e42; --vbd-side2:#0a1730;
  --vbd-navy:#0f2544; --vbd-ink:#0f172a; --vbd-muted:#64748b; --vbd-line:#e6ecf5;
  --vbd-blue:#2563eb; --vbd-primary:#185FA5; --vbd-coral:#ff6a4d; --vbd-green:#16a34a;
  --vbd-teal:#2CB8C6; --vbd-card:#fff;
}
html,body{height:100%;margin:0;background:var(--vbd-bg);}
body{font-family:Inter,'SF Pro Display','Segoe UI',Arial,sans-serif;color:var(--vbd-ink);}
.vbd-app{display:grid;grid-template-columns:300px 1fr;height:100vh;
height:100dvh;overflow:hidden;background:var(--vbd-bg);}
/* ── SHARED APPSHELL ACTIVE (layout.js loaded) ─────────────────────────────────
   When layout.js runs it adds body.viya-sidebar-page, injects the ONE global
   sidebar + topbar, and moves this content into .viya-main. Disable the dashboard's
   own chrome so only the shared sidebar/topbar show, and let the content flow. ── */
body.viya-sidebar-page .vbd-app{display:block !important;height:auto !important;overflow:visible !important;background:transparent !important;}
body.viya-sidebar-page .vbd-side,
body.viya-sidebar-page .vbd-head,
body.viya-sidebar-page .vbd-overlay{display:none !important;}
body.viya-sidebar-page .vbd-main{display:block !important;height:auto !important;overflow:visible !important;}
body.viya-sidebar-page .vbd-body{max-width:none !important;margin:0 !important;padding:0 !important;}
*{box-sizing:border-box;}

/* ── Sidebar ── */
.vbd-side{background:linear-gradient(180deg,var(--vbd-side),var(--vbd-side2));display:flex;flex-direction:column;padding:20px 16px;gap:6px;height:100vh;height:100dvh;overflow-y:auto;}
.vbd-brand{display:flex;align-items:center;gap:11px;text-decoration:none;padding:6px 8px 14px;}
.vbd-logo{width:34px;height:34px;object-fit:contain;display:block;border-radius:9px;background:#12325f;padding:3px;flex:0 0 auto;}
.vbd-brand-copy{display:flex;flex-direction:column;line-height:1.1;min-width:0;}
.vbd-brand-name{font-size:20px;font-weight:800;color:#fff;letter-spacing:-.02em;white-space:nowrap;}
.vbd-brand-name b{color:#7db1ff;font-weight:800;}
.vbd-brand-tag{font-size:11px;color:#8aa0c4;font-weight:600;white-space:nowrap;}
/* Business selector (near top) — navigates to the business-selection page */
.vbd-side-biz{width:100%;display:flex;align-items:center;gap:11px;padding:10px 12px;margin:0 0 12px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);color:#eaf2ff;cursor:pointer;flex:0 0 auto;font:inherit;}
.vbd-side-biz:hover{background:rgba(255,255,255,.09);}
.vbd-side-biz .business-icon{width:34px;height:34px;border-radius:9px;background:#12325f;color:#9fc4ff;display:grid;place-items:center;font-size:16px;flex:0 0 auto;}
.vbd-side-biz .business-current{flex:1 1 auto;min-width:0;text-align:left;font-size:14px;font-weight:750;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.vbd-side-biz .business-arrow{color:#8aa0c4;flex:0 0 auto;font-size:15px;}
.vbd-nav{display:flex;flex-direction:column;gap:2px;margin-top:0;flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;}
.vbd-navgroup{display:flex;flex-direction:column;gap:2px;margin-bottom:8px;}
.vbd-navgroup-label{font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#6d84a8;padding:12px 14px 5px;}
.vbd-nav-item{display:flex;align-items:center;gap:13px;min-height:46px;padding:8px 14px;border-radius:12px;color:#b7c6de;text-decoration:none;font-size:15px;font-weight:600;line-height:1.25;transition:background .15s,color .15s;}
.vbd-nav-item i{font-size:21px;flex:0 0 auto;width:22px;text-align:center;}
/* :not(.vi) so this never matches the hydrated icon span (viya-icons.js turns
   <i class="ti"> into <span class="vi">). Without it, the icon span also got
   flex:1 1 auto and split the row, pushing short labels toward the centre —
   the shared sidebar's injected links carry both .nav-link AND .vbd-nav-item. */
.vbd-nav-item span:not(.vi){flex:1 1 auto;min-width:0;white-space:normal;overflow-wrap:break-word;word-break:break-word;line-height:1.25;}
.vbd-nav-item:hover{background:rgba(255,255,255,.06);color:#fff;}
.vbd-nav-item.active{background:rgba(255,255,255,.10);color:#fff;font-weight:750;box-shadow:inset 3px 0 0 #4d94ff;}
.vbd-badge{margin-left:auto;min-width:22px;height:22px;border-radius:999px;background:var(--vbd-coral);color:#fff;font-size:11.5px;font-weight:800;display:grid;place-items:center;padding:0 6px;}
.vbd-plan{margin-top:auto;display:block;text-decoration:none;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:16px;color:#cdd9ec;}
.vbd-plan strong{display:block;color:#fff;font-size:14px;font-weight:750;}
.vbd-plan span#vbdPlanSub{display:block;font-size:12.5px;color:#93a6c4;margin:4px 0 12px;}
.vbd-plan-btn{display:block;text-align:center;background:var(--vbd-teal);color:#04252a;font-weight:800;font-size:13px;padding:10px;border-radius:11px;}

/* ── Main + header ── */
.vbd-main{height:100vh;
height:100dvh;overflow-y:auto;display:flex;flex-direction:column;min-width:0;}
.vbd-head{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:14px;padding:18px 28px;background:var(--vbd-bg);}
.vbd-menu-btn{display:none;width:44px;height:44px;border:1px solid var(--vbd-line);border-radius:12px;background:#fff;color:#0f172a;align-items:center;justify-content:center;font-size:22px;cursor:pointer;flex:0 0 auto;}
.vbd-head-title{flex:0 1 auto;min-width:0;}
.vbd-head-title h1{margin:0;font-size:24px;font-weight:800;letter-spacing:-.02em;line-height:1.1;}
.vbd-head-title p{margin:2px 0 0;font-size:13px;color:var(--vbd-muted);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.vbd-search{position:relative;margin-left:0;margin-right:auto;flex:0 1 460px;display:flex;align-items:center;gap:10px;height:46px;background:#fff;border:1px solid var(--vbd-line);border-radius:14px;padding:0 14px;box-shadow:0 6px 18px rgba(15,23,42,.04);}
.vbd-search > i{color:#94a3b8;font-size:19px;}
.vbd-search input{flex:1;border:0;outline:0;background:transparent;font:inherit;font-size:14.5px;color:#0f172a;min-width:0;}
.vbd-search input::placeholder{color:#94a3b8;}
.vbd-search-results{position:absolute;top:calc(100% + 8px);left:0;right:0;background:#fff;border:1px solid var(--vbd-line);border-radius:14px;box-shadow:0 24px 60px rgba(15,23,42,.18);max-height:60vh;overflow:auto;padding:6px;display:none;z-index:40;}
.vbd-search-results.open{display:block;}
.vbd-icon-btn{width:46px;height:46px;flex:0 0 auto;border:1px solid var(--vbd-line);border-radius:14px;background:#fff;color:#475569;display:inline-flex;align-items:center;justify-content:center;font-size:20px;font-weight:800;cursor:pointer;position:relative;box-shadow:0 6px 18px rgba(15,23,42,.04);}
.vbd-icon-btn:hover{background:#f1f5f9;color:#0f172a;}
.vbd-lang{font-size:13.5px;letter-spacing:.02em;}
.vbd-lang i{font-size:20px;}
.vbd-dot{position:absolute;top:10px;right:11px;width:9px;height:9px;border-radius:50%;background:var(--vbd-coral);border:2px solid #fff;}
.vbd-avatar{width:46px;height:46px;flex:0 0 auto;border:0;border-radius:50%;background:radial-gradient(circle at 30% 30%,#3aa0ff,#1e5fa8);color:#fff;font-weight:800;font-size:15px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;}
.vbd-dd{position:relative;}
.vbd-dd-menu{position:absolute;top:calc(100% + 10px);right:0;min-width:240px;background:#fff;border:1px solid var(--vbd-line);border-radius:14px;box-shadow:0 24px 60px rgba(15,23,42,.18);padding:8px;display:none;z-index:50;}
.vbd-dd.open .vbd-dd-menu{display:block;}
.vbd-dd-head,.vbd-user-head{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#94a3b8;padding:8px 10px 6px;}
.vbd-user-head strong{color:#0f172a;font-size:14px;text-transform:none;letter-spacing:0;}
.dd-item{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:10px 12px;border-radius:10px;color:#0f172a;font-size:14px;font-weight:600;text-decoration:none;background:none;border:0;cursor:pointer;}
.dd-item i{font-size:18px;color:#64748b;}
.dd-item:hover{background:#f4f7fc;}
.dd-item.danger{color:#dc2626;}.dd-item.danger i{color:#dc2626;}
.dd-divider{height:1px;background:var(--vbd-line);margin:6px 4px;}
.dd-empty{padding:16px 12px;text-align:center;color:#94a3b8;font-size:13px;}
#notifList .dd-item{flex-direction:column;align-items:flex-start;gap:2px;}
#notifList .dd-item strong{font-size:13.5px;}
#notifList .dd-item small{font-size:12px;color:#64748b;}

/* ── Body / hero ── */
.vbd-body{padding:6px 28px 34px;display:flex;flex-direction:column;gap:20px;}
.vbd-hero{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;}
.vbd-hero-text h2{margin:0;font-size:34px;font-weight:850;letter-spacing:-.03em;line-height:1.05;}
.vbd-hero-text p{margin:8px 0 0;font-size:15px;color:var(--vbd-muted);font-weight:600;}
.vbd-newtrip{display:inline-flex;align-items:center;gap:8px;height:52px;padding:0 24px;border-radius:14px;background:var(--vbd-primary);color:#fff;font-weight:750;font-size:16px;text-decoration:none;box-shadow:0 14px 30px rgba(24,95,165,.28);white-space:nowrap;flex:0 0 auto;}
.vbd-newtrip:hover{background:#0C447C;}
.vbd-newtrip i{font-size:20px;}

/* ── Summary cards ── */
.vbd-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;}
.vbd-card{background:var(--vbd-card);border:1px solid var(--vbd-line);border-radius:18px;padding:20px;box-shadow:0 14px 34px rgba(12,30,62,.06);}
.vbd-card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.vbd-card-top span{font-size:15px;font-weight:700;color:#334155;}
.vbd-ci{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;color:#fff;font-size:20px;flex:0 0 auto;}
.vbd-ci.ci-blue{background:var(--vbd-blue);}.vbd-ci.ci-red{background:var(--vbd-coral);}
.vbd-ci.ci-dark{background:var(--vbd-navy);}.vbd-ci.ci-green{background:var(--vbd-green);}
.vbd-amt{font-size:32px;font-weight:800;letter-spacing:-.02em;line-height:1.1;font-family:var(--font-mono,inherit);}
.vbd-amt.blue{color:var(--vbd-blue);}.vbd-amt.red{color:var(--vbd-coral);}.vbd-amt.green{color:var(--vbd-green);}
.vbd-trend{margin-top:10px;font-size:13px;color:var(--vbd-muted);font-weight:600;}

/* ── Quick actions (navigation shortcuts — non-financial, visible to everyone) ── */
.vbd-quick{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;align-items:stretch;}
/* Taller card so margin-top:auto leaves real empty space → icon sits at the ABSOLUTE
   bottom-left. Title/subtitle stay pinned at the top; padding-bottom = 20px desktop
   (tablet 16 / mobile 14 in the media queries below). Card width/colors unchanged. */
.vbd-qa{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0;height:100%;min-height:164px;background:var(--vbd-card);border:1px solid var(--vbd-line);border-radius:16px;padding:16px 16px 20px;text-decoration:none;color:var(--vbd-ink);box-shadow:0 10px 26px rgba(12,30,62,.05);transition:transform .12s ease,box-shadow .15s ease,border-color .15s ease;}
.vbd-qa:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(12,30,62,.10);border-color:#d7e3f5;}
/* Icon pushed to the BOTTOM of the card (title + subtitle stay at the top).
   margin-top:auto absorbs the free space so the icon sits bottom-left; align-items:
   flex-start on .vbd-qa keeps it left. Works at every breakpoint (incl. when the
   subtitle is hidden on mobile) because the grid stretches all cards to equal height. */
.vbd-qa-ic{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;color:#fff;flex:0 0 auto;margin-top:auto;align-self:flex-start;}
.vbd-qa-ic i{font-size:22px;}
.vbd-qa-ic.q1{background:var(--vbd-primary);}
.vbd-qa-ic.q2{background:var(--vbd-teal);}
.vbd-qa-ic.q3{background:var(--vbd-blue);}
.vbd-qa-ic.q4{background:#9333ea;}
.vbd-qa-ic.q5{background:var(--vbd-coral);}
.vbd-qa-label{font-size:14.5px;font-weight:750;letter-spacing:-.01em;line-height:1.1;}
.vbd-qa-sub{font-size:12px;color:var(--vbd-muted);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
/* Quick Actions section (moved below Recent invoices): 24px above (20px body gap + 4). */
.vbd-qa-section{margin-top:4px;}
.vbd-qa-head{margin-bottom:14px;}
.vbd-qa-head h3{margin:0;font-size:18px;font-weight:800;letter-spacing:-.01em;color:var(--vbd-ink);}
.vbd-qa-head p{margin:4px 0 0;font-size:13.5px;color:var(--vbd-muted);font-weight:600;}
html.viya-dv .vbd-qa-head h3{color:#f1f6ff;}

/* ── Secondary stat cards (record COUNTS — non-financial, always visible) ── */
.vbd-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;}
.vbd-stat{display:flex;align-items:center;gap:14px;min-width:0;background:var(--vbd-card);border:1px solid var(--vbd-line);border-radius:18px;padding:18px 20px;box-shadow:0 14px 34px rgba(12,30,62,.06);}
.vbd-stat-ic{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;flex:0 0 auto;}
.vbd-stat-ic i{font-size:23px;}
.vbd-stat-ic.s-blue{background:#eaf2ff;color:var(--vbd-blue);}
.vbd-stat-ic.s-teal{background:#e2f6f8;color:#0e8f9c;}
.vbd-stat-meta{min-width:0;}
.vbd-stat-num{font-size:27px;font-weight:850;letter-spacing:-.02em;line-height:1.05;}
.vbd-stat-lbl{margin-top:2px;font-size:13px;color:var(--vbd-muted);font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* ── Chart + latest trips ── */
.vbd-mid{display:grid;grid-template-columns:1.9fr 1fr;gap:18px;align-items:stretch;}
.vbd-panel{background:var(--vbd-card);border:1px solid var(--vbd-line);border-radius:18px;padding:20px 22px;box-shadow:0 14px 34px rgba(12,30,62,.05);min-width:0;}
.vbd-panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;gap:12px;}
.vbd-panel-head h3{margin:0;font-size:18px;font-weight:800;letter-spacing:-.01em;}
.vbd-all{color:var(--vbd-primary);text-decoration:none;font-weight:750;font-size:14px;}
.vbd-legend{display:flex;gap:16px;font-size:13px;color:#64748b;font-weight:600;}
.vbd-legend span{display:inline-flex;align-items:center;gap:7px;}
.vbd-legend .lg{width:11px;height:11px;border-radius:3px;display:inline-block;}
.vbd-legend .lg-rev{background:var(--vbd-primary);}
.vbd-legend .lg-exp{background:#cbd8ea;}
.vbd-chart.chart-box{height:300px!important;position:relative;}
.vbd-chart canvas{width:100%!important;height:100%!important;display:block;}
.vbd-trips{display:flex;flex-direction:column;}
.vbd-trips .row{display:flex;align-items:center;gap:12px;justify-content:space-between;padding:13px 4px;border-bottom:1px solid #eef2f7;cursor:pointer;}
.vbd-trips .row:last-child{border-bottom:0;}
.vbd-trips .row:hover{background:#f8faff;}
.vbd-trips .row strong{display:block;font-size:14.5px;font-weight:750;}
.vbd-trips .row small{display:block;margin-top:3px;color:#94a3b8;font-size:12.5px;}
.vbd-trips .row .amount{font-weight:800;font-size:15px;text-align:right;}

/* ── Recent invoices table ── */
.vbd-table-wrap{overflow-x:auto;}
.vbd-table{width:100%;border-collapse:collapse;}
.vbd-table thead th{text-align:left;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#94a3b8;padding:6px 12px 12px;border-bottom:1px solid var(--vbd-line);white-space:nowrap;}
.vbd-table thead th.r{text-align:right;}.vbd-table thead th.c{text-align:center;}
.vbd-table tbody tr{display:table-row;}   /* beat the legacy .row{display:grid} rule */
.vbd-table tbody td{display:table-cell;padding:15px 12px;border-bottom:1px solid #f1f5f9;font-size:14.5px;vertical-align:middle;}
.vbd-table tbody tr:last-child td{border-bottom:0;}
.vbd-table tbody tr[data-href]{cursor:pointer;}
.vbd-table tbody tr[data-href]:hover td{background:#f8faff;}
.vbd-table .t-inv{font-weight:800;color:#0f172a;letter-spacing:.01em;}
.vbd-table .t-cust{display:flex;align-items:center;gap:11px;font-weight:700;}
.vbd-table .t-ava{width:34px;height:34px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#3aa0ff,#1e5fa8);color:#fff;font-size:12px;font-weight:800;display:grid;place-items:center;flex:0 0 auto;}
.vbd-table .amount,.vbd-table td.r{text-align:right;font-weight:800;white-space:nowrap;}
.vbd-table td.c{text-align:center;}
.vbd-pill{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 12px;border-radius:999px;font-size:12.5px;font-weight:800;}
.vbd-pill.paid{background:rgba(18,161,80,.12);color:#12A150;}
.vbd-pill.overdue{background:rgba(255,106,77,.14);color:#E5484D;}
.vbd-pill.pending{background:#fff5df;color:#b7791f;}
.vbd-pill.draft{background:#eef4fa;color:#5a708c;}
.vbd-empty{padding:26px 0;text-align:center;color:#94a3b8;font-size:14px;}

/* search-result rows */
.sr-group{font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#94a3b8;padding:8px 10px 4px;}
.sr-item{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:10px;text-decoration:none;color:#0f172a;}
.sr-item:hover{background:#f4f7fc;}
.sr-item i{font-size:18px;color:#64748b;}
.sr-item strong{display:block;font-size:13.5px;}
.sr-item small{display:block;font-size:12px;color:#94a3b8;}
.sr-amt{margin-left:auto;font-weight:800;font-size:13px;}
.sr-empty{padding:16px;text-align:center;color:#94a3b8;font-size:13px;}
.skel-line{height:12px;border-radius:6px;background:linear-gradient(90deg,#e9eef5 25%,#f4f7fb 50%,#e9eef5 75%);background-size:200% 100%;animation:vbdShim 1.4s infinite;margin:11px 0;}
.vbd-amt.skel{color:transparent!important;border-radius:8px;background:linear-gradient(90deg,#e9eef5 25%,#f4f7fb 50%,#e9eef5 75%);background-size:200% 100%;animation:vbdShim 1.4s infinite;min-height:30px;width:60%;}
@keyframes vbdShim{100%{background-position:-200% 0;}}
.vbd-overlay{display:none;}

/* ── Staff finance gate (mirror the .stat gate for the new cards + chart) ── */
body:not(.permissions-ready) .vbd-cards, body.viya-finance-hidden .vbd-cards, body.staff-role .vbd-cards,
body:not(.permissions-ready) .vbd-chart-panel, body.viya-finance-hidden .vbd-chart-panel, body.staff-role .vbd-chart-panel{display:none!important;}

/* ── Dark mode ── */
html.viya-dv, html.viya-dv body{background:#0a0f1e!important;color:#e6edf7;}
html.viya-dv .vbd-app{background:#0a0f1e;}
html.viya-dv .vbd-head{background:#0a0f1e;}
html.viya-dv .vbd-menu-btn,html.viya-dv .vbd-search,html.viya-dv .vbd-icon-btn{background:#101a32;border-color:#22324f;color:#e6edf7;}
html.viya-dv .vbd-search input{color:#e6edf7;}
html.viya-dv .vbd-head-title h1{color:#f1f6ff;}
html.viya-dv .vbd-card,html.viya-dv .vbd-panel,html.viya-dv .vbd-dd-menu,html.viya-dv .vbd-search-results{background:#101a32;border-color:#22324f;}
html.viya-dv .vbd-card-top span{color:#cdd9ec;}
html.viya-dv .vbd-panel-head h3,html.viya-dv .vbd-table .t-inv{color:#f1f6ff;}
html.viya-dv .vbd-table tbody td{border-color:#1b2740;color:#e6edf7;}
html.viya-dv .vbd-table thead th{color:#7f93b0;border-color:#22324f;}
html.viya-dv .vbd-trips .row{border-color:#1b2740;}
html.viya-dv .dd-item{color:#e6edf7;}html.viya-dv .dd-item:hover{background:rgba(255,255,255,.06);}
html.viya-dv .sr-item{color:#e6edf7;}html.viya-dv .sr-item:hover{background:rgba(255,255,255,.06);}
html.viya-dv .vbd-hero-text h2{color:#f1f6ff;}

/* ═══ Responsive ═══ */
@media (max-width:1100px){ .vbd-mid{grid-template-columns:1fr;} }
@media (min-width:901px) and (max-width:1200px){ .vbd-cards{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:900px){
  .vbd-app{grid-template-columns:1fr;}
  .vbd-side{position:fixed;top:0;left:0;width:270px;max-width:82vw;z-index:120;transform:translateX(-100%);transition:transform .25s ease;box-shadow:6px 0 30px rgba(8,14,30,.4);}
  body.vbd-side-open .vbd-side{transform:translateX(0);}
  .vbd-overlay{display:block;position:fixed;inset:0;background:rgba(8,14,30,.5);opacity:0;visibility:hidden;transition:opacity .25s;z-index:110;}
  body.vbd-side-open .vbd-overlay{opacity:1;visibility:visible;}
  .vbd-menu-btn{display:inline-flex;}
  .vbd-head{padding:14px 16px;gap:10px;flex-wrap:wrap;}
  .vbd-head-title{order:-1;flex:1 1 auto;}
  .vbd-search{order:3;flex:1 1 100%;margin-left:0;}
  .vbd-body{padding:6px 16px 30px;}
  .vbd-hero-text h2{font-size:26px;}
  .vbd-newtrip{height:46px;padding:0 18px;font-size:14px;}
  .vbd-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
  .vbd-amt{font-size:26px;}
}
@media (max-width:560px){
  .vbd-cards{grid-template-columns:1fr;}
  .vbd-hero{flex-wrap:wrap;}.vbd-newtrip{width:100%;justify-content:center;}
  /* Recent-invoices mobile cards are defined once in the ≤640 block below
     (compact grid-area card redesign) — no per-cell rules needed here. */
}

/* ── Step-3: quick actions + secondary stats — dark mode + responsive (4/2/1 spec) ── */
html.viya-dv .vbd-qa,html.viya-dv .vbd-stat{background:#101a32;border-color:#22324f;color:#e6edf7;}
html.viya-dv .vbd-qa-label,html.viya-dv .vbd-stat-num{color:#f1f6ff;}
html.viya-dv .vbd-stat-ic.s-blue{background:rgba(37,99,235,.18);color:#7db1ff;}
html.viya-dv .vbd-stat-ic.s-teal{background:rgba(44,184,198,.16);color:#5fd3dd;}
@media (max-width:900px){
  .vbd-quick{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;}
  .vbd-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
  .vbd-qa{padding-bottom:16px;}   /* tablet bottom padding */
}
@media (max-width:560px){
  .vbd-quick{grid-template-columns:repeat(2,minmax(0,1fr));}
  .vbd-stats{grid-template-columns:1fr;}
  .vbd-qa-sub{display:none;}
  .vbd-qa{padding-bottom:14px;}   /* mobile bottom padding */
}

/* ══════════ RESPONSIVE CARD-FIT LAYER (appended last — wins) ══════════
   Breakpoints: desktop 1025+ · tablet 641–1024 · mobile ≤640.
   Fixes: amount auto-fit (clamp, no overflow), equal card spacing, header
   one-line + icon-only dark button, invoices table→cards on mobile, trip-name
   truncation, chart fit. No JS/data/route changes. */

/* Utility classes (req 10) */
.text-truncate-safe{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.amount-fit,.vbd-amt{
  font-size:clamp(22px,2.4vw,30px) !important;   /* desktop max 30 */
  line-height:1.1;font-weight:800;letter-spacing:-.02em;
  word-break:break-word;overflow-wrap:anywhere;max-width:100%;
}

/* (1)(3) Equal card spacing + amount always inside the card, subtitle never clipped */
.vbd-cards{gap:18px;}
.vbd-card{overflow:hidden;min-width:0;}
.vbd-card-top{gap:10px;}
.vbd-card-top span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.vbd-card-top .vbd-ci{flex:0 0 auto;}   /* icon top-right, never shrinks */
.vbd-trend{overflow-wrap:anywhere;}

/* ══════ COMPACT SUMMARY CARDS — TABLET + MOBILE ONLY (2026-07-10). Desktop (>1180px)
   is untouched. KPI (.vbd-card) + stat (.vbd-stat) cards get less height/padding, smaller
   icon boxes + fonts, and flex column-between so there's no empty space under the value.
   Numbers stay LTR. Dhivehi uses the SAME compact sizes + line-height 1.3 (not the large
   global MV Waheed size) so cards don't grow taller in Dhivehi. ══════ */
@media (min-width:768px) and (max-width:1180px){
  .vbd-cards{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:12px !important; }
  .vbd-card{ padding:14px !important; border-radius:14px !important; min-height:124px; display:flex; flex-direction:column; justify-content:space-between; }
  .vbd-card-top{ margin-bottom:8px !important; }
  .vbd-card-top span{ font-size:14px !important; }
  .vbd-ci{ width:42px !important; height:42px !important; font-size:20px !important; border-radius:12px !important; }
  .vbd-amt{ font-size:26px !important; line-height:1.2 !important; }
  .vbd-trend{ margin-top:6px !important; font-size:12.5px !important; }
  .vbd-stats{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:12px !important; }
  .vbd-stat{ padding:14px 16px !important; gap:12px !important; }
  .vbd-stat-ic{ width:42px !important; height:42px !important; }
  .vbd-stat-ic i{ font-size:20px !important; }
  .vbd-stat-num{ font-size:23px !important; }
  /* Dhivehi: keep card text compact (beats the global large dv font by specificity). */
  html[lang="dv"] .vbd-card .vbd-card-top span, html[lang="dv"] .vbd-card .vbd-trend,
  html[lang="dv"] .vbd-stat .vbd-stat-lbl{ font-size:14px !important; }
}
@media (max-width:767px){
  .vbd-cards{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:8px !important; }
  .vbd-card{ padding:12px !important; border-radius:14px !important; min-height:108px; display:flex; flex-direction:column; justify-content:space-between; }
  .vbd-card-top{ margin-bottom:6px !important; gap:8px !important; }
  .vbd-card-top span{ font-size:13px !important; }
  .vbd-ci{ width:38px !important; height:38px !important; font-size:18px !important; border-radius:11px !important; }
  .vbd-amt{ font-size:22px !important; line-height:1.15 !important; }
  .vbd-trend{ margin-top:4px !important; font-size:11.5px !important; }
  .vbd-stats{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:8px !important; }
  .vbd-stat{ padding:12px 14px !important; gap:10px !important; }
  .vbd-stat-ic{ width:38px !important; height:38px !important; }
  .vbd-stat-ic i{ font-size:18px !important; }
  .vbd-stat-num{ font-size:20px !important; }
  html[lang="dv"] .vbd-card .vbd-card-top span, html[lang="dv"] .vbd-card .vbd-trend,
  html[lang="dv"] .vbd-stat .vbd-stat-lbl{ font-size:13px !important; }
}
/* Very narrow phones (<360px): one card per row. */
@media (max-width:359px){
  .vbd-cards, .vbd-stats{ grid-template-columns:1fr !important; }
}
/* Dhivehi dashboard cards: tighter leading so MV Waheed never inflates card height. */
html[lang="dv"] .vbd-card, html[lang="dv"] .vbd-stat,
body.lang-dv .vbd-card, body.lang-dv .vbd-stat{ line-height:1.3 !important; }

/* (7) Latest trips: name truncates, amount/status stay right-aligned */
.vbd-trips .row{gap:12px;}
.vbd-trips .row > div:first-child{min-width:0;flex:1 1 auto;}
.vbd-trips .row strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;}
.vbd-trips .row > div:last-child{flex:0 0 auto;text-align:right;}

/* (6) Recent invoices desktop: long customer names break instead of widening the table */
.vbd-table{table-layout:auto;width:100%;}
.vbd-table .t-cust{min-width:0;overflow-wrap:anywhere;}
.vbd-table td.r,.vbd-table .amount{white-space:nowrap;}

/* (8) Charts resize to card width, never overflow */
.vbd-panel{min-width:0;}
.vbd-chart.chart-box{max-width:100%;overflow:hidden;}
.vbd-chart canvas{max-width:100% !important;}

/* (5) Header: keep everything on one line; dark button icon-only + compact */
.vbd-head{flex-wrap:nowrap;}
.vbd-head #darkModeBtn{font-size:0;}          /* hide any label text the JS injects */
.vbd-head #darkModeBtn i{font-size:20px;}     /* keep the icon */
.vbd-head .vbd-icon-btn,.vbd-head .vbd-avatar{flex:0 0 auto;}
.vbd-head .vbd-search{min-width:0;}

/* ── (req 1,2,4) Wave-style centered container — the desktop zoom fix ──
   Root cause of "stretches too wide at zoom-out": .vbd-head and .vbd-body had no
   max-width, so they filled the entire 1fr main column and cards spread across the
   whole monitor. Cap both to ONE centered 1280px track so the header aligns with
   the content and wide screens / zoom-out show soft background on the sides. The
   sidebar (fixed 260px grid track) and mobile layout are untouched — below 1280px
   viewport width:100% applies and max-width is inert. Search stays flex:0 1 (never
   over-wide) and shrinks before the fixed icons, so no overlap at 150% zoom. */
.vbd-head,.vbd-body{width:100%;max-width:1440px;margin-inline:auto;}

/* ── TABLET 641–1024px ── */
@media (max-width:1024px){
  .amount-fit,.vbd-amt{ font-size:clamp(20px,3vw,24px) !important; }   /* tablet max 24 */
  .vbd-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;}
  .vbd-head{gap:10px;padding:16px 20px;}
  .vbd-head .vbd-icon-btn,.vbd-head .vbd-avatar{width:42px;height:42px;font-size:18px;}
  .vbd-search{flex:0 1 300px;}
  .vbd-body{padding:6px 20px 30px;}
  .vbd-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}   /* h-scroll fallback */
}

/* ── MOBILE ≤640px ── */
@media (max-width:640px){
  .amount-fit,.vbd-amt{ font-size:clamp(18px,6vw,22px) !important; }   /* mobile max 22 */
  .vbd-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
  .vbd-card{padding:16px;}
  /* Header: title on its own line, search moves BELOW the title, actions in one row */
  .vbd-head{flex-wrap:wrap;gap:8px;padding:14px 16px;}
  .vbd-head-title{order:0;flex:1 1 auto;min-width:0;}
  .vbd-menu-btn{order:-1;}
  .vbd-head .vbd-icon-btn,.vbd-head .vbd-avatar{width:40px;height:40px;font-size:18px;}
  .vbd-search{order:5;flex:1 1 100%;margin-left:0;}
  /* ═══ Recent invoices → compact one-card-per-invoice (mobile redesign 2026-07-10) ═══
     The desktop table markup is kept (no JS / invoice-logic change); CSS grid-areas on
     each <tr> lay the cells out as a card. High specificity + !important is deliberate —
     it beats the legacy `.row` and `.mobile-dashboard-v2 .row` overrides that were
     collapsing these rows (the cause of the "only the invoice number shows" bug). */
  body.mobile-dashboard-v2 .vbd-table-wrap{overflow:visible !important;}   /* req 9: no horizontal scroll */
  .vbd-table thead{display:none !important;}
  .vbd-table,.vbd-table tbody{display:block !important;width:100% !important;}
  body.mobile-dashboard-v2 .vbd-table tbody tr{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"inv status" "cust cust" "date date" "amount amount";
    align-items:start; column-gap:12px; row-gap:3px;
    width:100% !important; padding:14px !important; margin:0 0 12px !important;
    border:1px solid var(--vbd-line) !important; border-radius:16px !important;
    background:var(--vbd-card);
  }
  body.mobile-dashboard-v2 .vbd-table tbody tr:last-child{margin-bottom:0 !important;}
  body.mobile-dashboard-v2 .vbd-table tbody td{
    display:block !important; width:auto !important; padding:0 !important; border:0 !important;
    font-size:14px !important; text-align:left !important; white-space:normal !important;
    overflow-wrap:anywhere; min-width:0;
  }
  body.mobile-dashboard-v2 .vbd-table tbody td::before{display:none !important;}   /* req 8: no CUSTOMER/DATE/AMOUNT/STATUS labels */
  /* Invoice number — bold, top-left (req 3, 12) */
  .vbd-table td[data-label="Invoice"]{grid-area:inv;}
  .vbd-table td[data-label="Invoice"] .t-inv{font-size:15.5px;font-weight:800;overflow-wrap:anywhere;}
  /* Status badge — top-right (req 4) */
  .vbd-table td[data-label="Status"]{grid-area:status;justify-self:end;}
  /* Customer — wraps, max 2 lines, avatar hidden on the card (req 2, 10, 11) */
  .vbd-table td[data-label="Customer"]{grid-area:cust;margin-top:2px;}
  body.mobile-dashboard-v2 .vbd-table td[data-label="Customer"] .t-cust{
    display:-webkit-box !important; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    overflow:hidden; font-weight:700; font-size:14.5px; line-height:1.3; overflow-wrap:anywhere;
  }
  .vbd-table td[data-label="Customer"] .t-ava{display:none !important;}
  /* Date — under customer name (req 5) */
  .vbd-table td[data-label="Date"]{grid-area:date;color:var(--vbd-muted);font-size:12.5px;font-weight:600;}
  /* Amount — bold, 19px (req 6) */
  body.mobile-dashboard-v2 .vbd-table td[data-label="Amount"]{grid-area:amount;margin-top:6px;font-size:19px !important;font-weight:800 !important;text-align:left !important;white-space:nowrap;}
  .vbd-body{padding:6px 14px 28px;}
}
@media (max-width:400px){
  .vbd-cards,.vbd-quick{grid-template-columns:1fr;}   /* 1 card per row on tiny phones */
}

/* ══════════ KPI CARD RESPONSIVE SPEC (appended LAST — wins) — 2026-07-10 ══════════
   Revenue/Outstanding/Expenses/Profit (.vbd-card) + Total Invoices/Active Trips
   (.vbd-stat) and any future dashboard stat cards. Grid: desktop 1025+ = 4 cols ·
   tablet 641–1024 = 2 cols · mobile ≤640 = EXACTLY 2 cols (incl. ≤400, overriding the
   older 1-col rules above). Compact, equal height (grid-stretch + min-height floor),
   amounts auto-fit via clamp + wrap, cards clip so nothing overflows → no h-scroll.
   Only visual CSS — dashboard calculations / Firebase / routes / logic untouched. */
.vbd-card,.vbd-stat{min-width:0;overflow:hidden;box-sizing:border-box;}
.vbd-card{display:flex;flex-direction:column;}
.vbd-card .vbd-trend{margin-top:auto;}                 /* subtitle pinned to the bottom */
.vbd-amt,.vbd-stat-num{overflow-wrap:anywhere;word-break:break-word;max-width:100%;}
/* Dhivehi mode: amounts/numbers keep the Latin numeric font (never Thaana-shaped);
   higher specificity than vb-core's `html[lang=dv] *` Faruma rule so it wins. */
html[lang="dv"] .vbd-amt, html[lang="dv"] .vbd-stat-num, html[lang="dv"] .amount-fit, html[lang="dv"] .amount, html[lang="dv"] .vbd-table .amount,
body.lang-dv .vbd-amt, body.lang-dv .vbd-stat-num, body.lang-dv .amount-fit, body.lang-dv .amount{
  font-family:'Inter', ui-monospace, monospace !important; direction:ltr !important; letter-spacing:-.02em !important;
}

/* ── DESKTOP 1025px+ : keep the 4-column layout ── */
@media (min-width:1025px){
  .vbd-cards{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:18px!important;}
  .vbd-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:18px!important;}
  .vbd-card{min-height:164px;padding:20px;border-radius:18px;}
  .vbd-stat{min-height:120px;padding:18px 20px;border-radius:18px;}
  .vbd-card-top span{font-size:18px;}
  .vbd-ci{width:56px;height:56px;border-radius:15px;font-size:24px;}
  .vbd-stat-ic{width:56px;height:56px;border-radius:15px;}.vbd-stat-ic i{font-size:26px;}
  .vbd-amt,.vbd-stat-num{font-size:clamp(28px,2vw,34px)!important;}
  .vbd-trend,.vbd-stat-lbl{font-size:15px;}
}

/* ── TABLET 641–1024px : 2 per row, equal height, 16px gap ── */
@media (min-width:641px) and (max-width:1024px){
  .vbd-cards{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:16px!important;}
  .vbd-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:16px!important;}
  .vbd-card{min-height:144px;padding:16px 18px;border-radius:16px;}
  .vbd-stat{min-height:116px;padding:16px 18px;border-radius:16px;}
  .vbd-card-top{margin-bottom:10px;}
  .vbd-card-top span{font-size:16px;}
  .vbd-ci{width:48px;height:48px;border-radius:14px;font-size:21px;}
  .vbd-stat-ic{width:48px;height:48px;border-radius:14px;}.vbd-stat-ic i{font-size:23px;}
  .vbd-amt,.vbd-stat-num{font-size:clamp(22px,2vw,26px)!important;}
  .vbd-trend,.vbd-stat-lbl{font-size:13px;}
}

/* ── MOBILE ≤640px : EXACTLY 2 per row, compact ── */
@media (max-width:640px){
  .vbd-cards{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important;}
  .vbd-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important;}
  .vbd-card{min-height:124px;padding:13px 14px;border-radius:16px;}
  .vbd-stat{min-height:112px;padding:12px 13px;border-radius:16px;gap:10px;}
  .vbd-card-top{margin-bottom:8px;gap:8px;}
  .vbd-card-top span{font-size:14px;}
  .vbd-ci{width:42px;height:42px;border-radius:12px;font-size:19px;}
  .vbd-stat-ic{width:42px;height:42px;border-radius:12px;}.vbd-stat-ic i{font-size:20px;}
  .vbd-amt,.vbd-stat-num{font-size:clamp(18px,4vw,22px)!important;}
  .vbd-trend{margin-top:6px;font-size:12px;}
  .vbd-stat-lbl{font-size:12px;}
}

/* ══════════ QUICK ACTION RESPONSIVE SPEC (appended LAST — wins) — 2026-07-10 ══════════
   New Trip / Checkout / Create Invoice / Add Customer / Add Expense (.vbd-qa).
   Grid: desktop 1025+ = 5 cols · tablet 641–1024 = 3 cols · mobile ≤640 = 3 cols
   (5 cards → row 3 + row 2) · <320 = 2 cols. Title top-left, icon bottom-left;
   subtitle only on desktop. Equal height (grid-stretch + min-height), 12px gap, no
   overflow / h-scroll. Only visual CSS — click actions / routes / Firebase / logic kept. */
.vbd-qa{overflow:hidden;box-sizing:border-box;}
.vbd-qa-label{overflow-wrap:anywhere;word-break:break-word;max-width:100%;}

/* ── DESKTOP 1025px+ : 5 columns, tall cards, subtitle visible ── */
@media (min-width:1025px){
  .vbd-quick{grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:12px!important;}
  .vbd-qa{min-height:224px!important;padding:20px!important;}
  .vbd-qa-label{font-size:18px;}
  .vbd-qa-ic{width:56px;height:56px;border-radius:15px;}.vbd-qa-ic i{font-size:26px;}
}

/* ── TABLET 641–1024px : 3 per row, compact, no subtitle ── */
@media (min-width:641px) and (max-width:1024px){
  .vbd-quick{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:12px!important;}
  .vbd-qa{min-height:116px!important;padding:14px!important;}
  .vbd-qa-sub{display:none!important;}
  .vbd-qa-label{font-size:15px;}
  .vbd-qa-ic{width:40px;height:40px;border-radius:11px;}.vbd-qa-ic i{font-size:20px;}
}

/* ── MOBILE ≤640px : 3 per row (5 cards → 3 + 2) ── */
/* Compact SINGLE-LINE cards: small icon sits inline with the label (label one
   side, small icon the other) instead of a tall card with a big icon dumped at
   the bottom. Icon no longer pushed down (margin-top:auto cleared). */
@media (max-width:640px){
  /* 2 per row so each label fits on ONE line beside a small icon. */
  .vbd-quick{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;}
  .vbd-qa{flex-direction:row!important;align-items:center!important;justify-content:space-between!important;min-height:0!important;height:auto!important;padding:9px 11px!important;gap:8px!important;}
  .vbd-qa-sub{display:none!important;}
  /* Label: small, single line, never split mid-word. */
  .vbd-qa-label{font-size:12px!important;line-height:1.2!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;word-break:normal!important;overflow-wrap:normal!important;min-width:0;flex:1 1 auto;}
  .vbd-qa-ic{width:26px!important;height:26px!important;border-radius:8px!important;margin-top:0!important;align-self:center!important;flex:0 0 26px!important;}
  .vbd-qa-ic i{font-size:14px!important;}
}

/* ── <320px : drop to 2 per row ── */
@media (max-width:319px){
  .vbd-quick{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
}

/* ══════════ DASHBOARD TEXT VISIBILITY FIX (appended LAST — wins) — 2026-07-10 ══════════
   No ellipsis/clipping on KPI titles, stat labels, amounts or subtitles — they wrap to
   two lines instead. Amounts wrap at the "MVR–number" space and only break the number
   itself as a last resort, so they always fit and never overflow. Chart title/legend
   stack on mobile. Visual CSS only — dashboard calculations / Firebase / routes / auth
   / permissions untouched. */

/* KPI card titles (Revenue / Outstanding / Expenses / Profit) — full text, wrap, no ellipsis */
.vbd-card-top span{
  white-space:normal!important;overflow:visible!important;text-overflow:clip!important;
  overflow-wrap:anywhere;word-break:normal;line-height:1.2;
}
/* Small stat labels (Total invoices / Active trips) — show full label, wrap allowed */
.vbd-stat-lbl{
  white-space:normal!important;overflow:visible!important;text-overflow:clip!important;
  overflow-wrap:anywhere;word-break:normal;line-height:1.25;
}
/* Amounts — wrap at the MVR–number space; break the number only as a last resort */
.vbd-amt,.vbd-stat-num{
  white-space:normal!important;overflow:visible!important;
  overflow-wrap:anywhere;word-break:normal;max-width:100%;
}
/* Subtitle / trend line — wrap safely, never clip */
.vbd-trend{
  white-space:normal!important;overflow:visible!important;overflow-wrap:anywhere;word-break:normal;
}
/* Give the small-stat text column the full remaining width so the icon can't squeeze it */
.vbd-stat-meta{flex:1 1 auto;min-width:0;}

/* Cards must GROW (never clip) when a title/label wraps on tablet & mobile */
@media (max-width:1024px){ .vbd-card,.vbd-stat{overflow:visible!important;} }

/* Chart card on mobile: title full-width on top → legend below → chart below (no fighting) */
@media (max-width:640px){
  .vbd-chart-panel .vbd-panel-head{flex-direction:column;align-items:flex-start;gap:6px;}
  .vbd-chart-panel .vbd-panel-head h3{width:100%;white-space:normal;overflow-wrap:anywhere;}
  .vbd-chart-panel .vbd-legend{width:100%;flex-wrap:wrap;gap:14px;justify-content:flex-start;}
}
/* ═══ Dhivehi RTL card text — labels start from the RIGHT (2026-07-10) ═══
   This app pins html.dir="ltr", so html[dir="rtl"] selectors NEVER match — these
   use the real Dhivehi selectors (html[lang=dv] / body.lang-dv). Placed at the very
   end of the dashboard styles so they win over the #vbd-redesign card rules above.
   direction:rtl flips each card's flex rows so the label sits on the RIGHT (icon
   moves left — allowed); numbers stay LTR (isolated) but still sit on the right. */
:is(html[lang="dv"], body.lang-dv) :is(.vbd-card, .vbd-panel, .vbd-stat, .vbd-qa, .card, .stat-card, .trip-card, .invoice-card){
  direction: rtl !important;
  text-align: right !important;
}
:is(html[lang="dv"], body.lang-dv) :is(.vbd-card, .vbd-panel, .vbd-stat, .vbd-qa) :is(span, div, p, h1, h2, h3, h4, small, label){
  text-align: right !important;
}
:is(html[lang="dv"], body.lang-dv) :is(.vbd-amt, .amount, .amount-fit, .vbd-stat-num, .money, .number, .value, .date, time, .trip-no, .invoice-no, .t-inv, [class*="-amount"]){
  direction: ltr !important;
  unicode-bidi: isolate !important;
  text-align: right !important;
}

/* ═══ Dhivehi dashboard cards → EXACT English dimensions (2026-07-10) ═══
   The four .vbd-card KPIs (and the .vbd-stat count cards) were TALLER in Dhivehi
   only because the global "big Faruma" typography enlarged the label/value/helper
   text and set line-height 1.9 → extra height + internal empty space. Padding (20px),
   grid gap (18px), icon box (.vbd-ci 46px) and the grid were NEVER dv-specific, so
   they already match English — ONLY the inflated font-size / line-height is reset
   here to the English source values. RTL + Faruma are preserved (RTL set above).
   Dashboard-only; English is untouched (every rule is under html[lang="dv"]). */
html[lang="dv"] .vbd-card *, html[lang="dv"] .vbd-stat *{ line-height:1.3 !important; }
html[lang="dv"] .vbd-card-top span{ font-size:15px !important; line-height:1.2 !important; }        /* English label 15px */
html[lang="dv"] .vbd-card .vbd-amt{ font-size:clamp(22px,2.4vw,30px) !important; line-height:1.1 !important; }  /* English CARD-FIT */
html[lang="dv"] .vbd-card .vbd-trend{ font-size:13px !important; line-height:1.35 !important; }     /* English helper 13px */
html[lang="dv"] .vbd-stat .vbd-stat-num{ font-size:27px !important; line-height:1.05 !important; }  /* English count */
html[lang="dv"] .vbd-stat .vbd-stat-lbl{ font-size:13px !important; line-height:1.3 !important; }
/* Amount responsive clamps — match the English CARD-FIT layer at tablet/mobile exactly. */
@media (max-width:1024px){ html[lang="dv"] .vbd-card .vbd-amt{ font-size:clamp(20px,3vw,24px) !important; } }
@media (max-width:640px){ html[lang="dv"] .vbd-card .vbd-amt{ font-size:clamp(18px,6vw,22px) !important; } }

/* ══════════════════════════════════════════════════════════════════════════
   DASHBOARD — compact, equal summary cards + responsive charts (≤1024px).
   Declared LAST so it settles the earlier breakpoints (1250/1024/900/640/560).
   Layout/CSS only — no calculations, Firestore or other pages touched.
   Desktop (≥1025px) is unchanged.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width:1024px){

  /* No horizontal overflow anywhere on the page */
  html, body{ max-width:100% !important; overflow-x:hidden !important;overflow-x:clip !important; }
  .vbd-app, .vbd-main, .vbd-body{
    width:100% !important; max-width:100% !important;
    min-width:0 !important; overflow-x:hidden !important;
  }
  .vbd-body > *{ min-width:0 !important; max-width:100% !important; }

  /* ── Summary cards: compact + EQUAL size (2×2) ──────────────────────── */
  .vbd-cards{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:10px !important;               /* was 18px — removes dead space */
    align-items:stretch !important;    /* equal heights */
    width:100% !important; margin:0 0 12px !important;
  }
  .vbd-card{
    width:100% !important; min-width:0 !important;
    height:100% !important;            /* every card the same size */
    padding:12px 13px !important;      /* was 20px — compact */
    border-radius:14px !important;
    box-sizing:border-box !important; margin:0 !important;
    overflow:hidden !important;        /* nothing escapes the card */
    display:flex !important; flex-direction:column !important;
    justify-content:center !important; /* kills the big empty gap inside */
  }
  .vbd-card-top{ margin-bottom:6px !important; gap:8px !important; min-width:0 !important; }
  .vbd-card-top span:first-child{
    font-size:11.5px !important; font-weight:700 !important;
    white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important;
    min-width:0 !important;
  }
  .vbd-ci{ width:28px !important; height:28px !important; border-radius:9px !important; flex:0 0 auto !important; }
  .vbd-ci i{ font-size:15px !important; }

  /* ── Long amounts: shrink automatically, always stay INSIDE the card ── */
  .vbd-card .vbd-amt{
    font-size:clamp(13px,4.2vw,20px) !important;  /* auto-reduces as text grows */
    line-height:1.15 !important; letter-spacing:-.02em !important;
    max-width:100% !important; min-width:0 !important;
    white-space:normal !important;                 /* wrap instead of overflowing */
    overflow-wrap:anywhere !important; word-break:break-word !important;
    overflow:hidden !important; text-overflow:ellipsis !important;
    direction:ltr !important; unicode-bidi:isolate !important;  /* numbers LTR in DV */
  }
  .vbd-trend{
    font-size:10.5px !important; margin-top:3px !important;
    white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important;
    max-width:100% !important;
  }

  /* Record-count stat cards: compact + equal too */
  .vbd-stats{ gap:10px !important; align-items:stretch !important; width:100% !important; }
  .vbd-stat{
    height:100% !important; min-width:0 !important;
    padding:12px 13px !important; gap:10px !important;
    border-radius:14px !important; overflow:hidden !important; box-sizing:border-box !important;
  }
  .vbd-stat-ic{ width:36px !important; height:36px !important; border-radius:11px !important; }
  .vbd-stat-meta{ min-width:0 !important; }
  .vbd-stat-num{
    font-size:clamp(15px,4.4vw,21px) !important; line-height:1.1 !important;
    max-width:100% !important; overflow:hidden !important; text-overflow:ellipsis !important;
    direction:ltr !important; unicode-bidi:isolate !important;
  }
  .vbd-stat-lbl{ font-size:11px !important; }

  /* ── Remove large empty spaces ───────────────────────────────────────── */
  .vbd-body{ padding:6px 12px calc(92px + env(safe-area-inset-bottom)) !important; }
  .vbd-qa{ min-height:0 !important; height:auto !important; padding:12px !important; gap:4px !important; }
  .vbd-cards + *, .vbd-stats + *{ margin-top:12px !important; }

  /* ── Charts: responsive, no horizontal overflow ──────────────────────── */
  .insights-grid{ grid-template-columns:1fr !important; gap:12px !important; width:100% !important; }
  .insights-grid > .card, .card.chart-card, .vbd-panel{
    width:100% !important; max-width:100% !important;
    min-width:0 !important; box-sizing:border-box !important; overflow:hidden !important;
  }
  .chart-box, .vbd-chart{
    width:100% !important; max-width:100% !important;
    min-width:0 !important; overflow:hidden !important;
  }
  .chart-box canvas, .vbd-chart canvas, .insights-grid canvas{
    width:100% !important; max-width:100% !important; display:block !important;
  }
  /* Wide tables/lists scroll inside their own card — never the whole page */
  .vbd-panel .list, .vbd-table-wrap, .table-wrap{
    max-width:100% !important; overflow-x:auto !important; -webkit-overflow-scrolling:touch !important;
  }
}

/* Dashboard KPI mobile amounts: always fit on one line. */
@media (max-width:640px){
  .vbd-cards{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:8px !important;
  }

  .vbd-cards > .vbd-card{
    position:relative !important;
    overflow:hidden !important;
    padding:16px 12px 14px !important;
    min-width:0 !important;
  }

  .vbd-cards > .vbd-card .vbd-card-top{
    display:block !important;
    min-width:0 !important;
    margin:0 0 8px !important;
    padding-right:36px !important;
  }

  .vbd-cards > .vbd-card .vbd-card-top span:first-child{
    display:block !important;
    max-width:100% !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    font-size:14px !important;
    line-height:1.1 !important;
  }

  .vbd-cards > .vbd-card .vbd-ci{
    position:absolute !important;
    right:12px !important;
    top:52px !important;
    width:26px !important;
    height:26px !important;
    min-width:26px !important;
    max-width:26px !important;
    border-radius:8px !important;
    font-size:13px !important;
    z-index:1 !important;
  }

  .vbd-cards > .vbd-card .vbd-ci i{
    font-size:13px !important;
  }

  .vbd-cards > .vbd-card .vbd-amt{
    display:block !important;
    width:calc(100% - 30px) !important;
    max-width:calc(100% - 30px) !important;
    min-width:0 !important;
    font-size:clamp(10px,3.05vw,13px) !important;
    line-height:1 !important;
    font-weight:800 !important;
    white-space:nowrap !important;
    overflow:visible !important;
    text-overflow:clip !important;
    word-break:normal !important;
    overflow-wrap:normal !important;
    direction:ltr !important;
    unicode-bidi:isolate !important;
    letter-spacing:-.03em !important;
  }

  .vbd-cards > .vbd-card .vbd-trend{
    margin-top:auto !important;
    font-size:10.5px !important;
    line-height:1.15 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  html[lang="dv"] .vbd-cards > .vbd-card .vbd-amt,
  body.lang-dv .vbd-cards > .vbd-card .vbd-amt{
    font-size:clamp(10px,3.05vw,13px) !important;
    direction:ltr !important;
    unicode-bidi:isolate !important;
  }
}

/* Dashboard KPI mobile labels: show full names and helper text. */
@media (max-width:640px){
  .vbd-cards > .vbd-card .vbd-card-top{
    padding-right:0 !important;
    margin-bottom:8px !important;
  }

  .vbd-cards > .vbd-card .vbd-card-top span:first-child{
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    display:block !important;
    font-size:12px !important;
    line-height:1.05 !important;
    font-weight:800 !important;
    white-space:nowrap !important;
    overflow:visible !important;
    text-overflow:clip !important;
    letter-spacing:0 !important;
  }

  .vbd-cards > .vbd-card .vbd-trend{
    width:calc(100% - 32px) !important;
    max-width:calc(100% - 32px) !important;
    font-size:9.5px !important;
    line-height:1.05 !important;
    font-weight:700 !important;
    white-space:nowrap !important;
    overflow:visible !important;
    text-overflow:clip !important;
    letter-spacing:-.01em !important;
  }

  html[lang="dv"] .vbd-cards > .vbd-card .vbd-card-top span:first-child,
  body.lang-dv .vbd-cards > .vbd-card .vbd-card-top span:first-child{
    font-size:17px !important;
    line-height:1.05 !important;
    white-space:nowrap !important;
    overflow:visible !important;
    text-overflow:clip !important;
  }

  html[lang="dv"] .vbd-cards > .vbd-card .vbd-trend,
  body.lang-dv .vbd-cards > .vbd-card .vbd-trend{
    font-size:14px !important;
    line-height:1.05 !important;
    white-space:nowrap !important;
    overflow:visible !important;
    text-overflow:clip !important;
  }
}

/* Phones (≤560px): stay 2×2 and keep the amounts inside the cards */
@media (max-width:560px){
  .vbd-cards{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:8px !important; }
  .vbd-card{ padding:11px !important; }
  .vbd-card .vbd-amt{ font-size:clamp(12px,4.4vw,17px) !important; }
  .vbd-card-top span:first-child{ font-size:11px !important; }
  .vbd-trend{ font-size:10px !important; }
  .vbd-stat-num{ font-size:clamp(14px,4.6vw,18px) !important; }
  .chart-box, .vbd-chart{ height:220px !important; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   DASHBOARD — Task 106 safety guards.  APPENDED LAST so it wins the cascade.
   No redesign: not one grid-template, size, colour or breakpoint is changed.
   These only stop content from BREAKING the layout it already has.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── OVERFLOW ────────────────────────────────────────────────────────────────
   A grid/flex child defaults to min-width:auto, which means it refuses to shrink
   below its content. One long value ("MVR 1,234,567.89") or a long customer name
   then forces its column wider than the track and pushes the page sideways.
   dashboard.css has 12 multi-column grids declared with a bare `1fr`
   (`1fr 1fr`, `repeat(2,1fr)`, `repeat(3,1fr)`, `repeat(4,1fr)`) with no
   minmax(0,…) guard.
   Fixing the CHILDREN rather than the templates does the same job at EVERY
   breakpoint, and cannot accidentally override the responsive column counts. */
.stats > *,
.quick-grid > *,
.dashboard-grid > *,
.insights-grid > *,
.bottom-grid > *,
.cf-summary > *,
.vbd-kpis > *,
.list > *,
.row > * { min-width: 0; }

/* Long, unbroken strings (emails, reference numbers) must wrap, not extend. */
.row strong,
.row small,
.stat h3,
.vbd-card-top span { overflow-wrap: anywhere; }

/* ── CHARTS ──────────────────────────────────────────────────────────────────
   A canvas has an intrinsic size and will happily exceed its box. .chart-box
   canvas is already width/height:100%, but the BOX itself needs a shrink guard
   or the chart can widen the grid column that contains it. */
.chart-box,
.vbd-chart,
.ni-box { min-width: 0; max-width: 100%; }
.chart-box canvas,
.vbd-chart canvas,
.ni-box canvas { max-width: 100%; }

/* ── DHIVEHI ─────────────────────────────────────────────────────────────────
   LANGUAGE ONLY — html[lang="dv"]. (Note: html.viya-dv is DARK MODE despite the
   name; it must never be used as a Dhivehi signal.)
   In an RTL context the bidi algorithm can reorder a money string, so
   "MVR 1,234.56" is not guaranteed to render in that order. Currency, counts,
   dates and IDs are pinned LTR and isolated from the surrounding RTL run — the
   project-wide convention already used elsewhere in the codebase. */
html[lang="dv"] .vbd-amt,
html[lang="dv"] .stat .value,
html[lang="dv"] .row .amount,
html[lang="dv"] .cf-summary strong,
html[lang="dv"] #d-invoice-count,
html[lang="dv"] #d-trip-count {
  direction: ltr;
  unicode-bidi: isolate;
}
/* The KPI amount is end-aligned in RTL; keep the digits themselves LTR. */
html[lang="dv"] .row .amount { text-align: end; }

/* Dashboard Quick Actions: tablet-only one-row layout. */
@media (min-width:641px) and (max-width:1024px){
  .vbd-qa-section{
    margin-top:4px !important;
  }

  .vbd-qa-head{
    margin-bottom:10px !important;
  }

  .vbd-quick{
    display:grid !important;
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;
    gap:6px !important;
    align-items:stretch !important;
  }

  .vbd-quick > .vbd-qa{
    width:100% !important;
    min-width:0 !important;
    height:74px !important;
    min-height:74px !important;
    max-height:74px !important;
    padding:7px 8px !important;
    gap:2px !important;
    border-radius:13px !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    justify-content:flex-start !important;
    overflow:hidden !important;
    box-sizing:border-box !important;
  }

  .vbd-quick > .vbd-qa .vbd-qa-label{
    display:block !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    font-size:12px !important;
    line-height:1.08 !important;
    font-weight:750 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    word-break:normal !important;
    overflow-wrap:normal !important;
    letter-spacing:-.02em !important;
  }

  .vbd-quick > .vbd-qa .vbd-qa-sub{
    display:block !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    font-size:10px !important;
    line-height:1.05 !important;
    font-weight:600 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  .vbd-quick > .vbd-qa .vbd-qa-ic{
    width:32px !important;
    height:32px !important;
    min-width:32px !important;
    max-width:32px !important;
    flex:0 0 32px !important;
    border-radius:9px !important;
    margin-top:auto !important;
    align-self:flex-start !important;
  }

  .vbd-quick > .vbd-qa .vbd-qa-ic i{
    font-size:18px !important;
    line-height:1 !important;
  }
}

/* Recent invoices mobile: one-line rows in English and Dhivehi. */
@media (max-width:640px){
  body.mobile-dashboard-v2 #recent-invoices tr.row,
  #recent-invoices tr.row{
    display:grid !important;
    grid-template-columns:minmax(74px,.72fr) minmax(0,1fr) minmax(82px,.78fr) !important;
    grid-template-areas:"inv cust amount" !important;
    align-items:center !important;
    column-gap:6px !important;
    row-gap:0 !important;
    min-height:44px !important;
    padding:9px 10px !important;
    margin:0 !important;
    border:0 !important;
    border-bottom:1px solid var(--vbd-line) !important;
    border-radius:0 !important;
    background:transparent !important;
  }

  body.mobile-dashboard-v2 #recent-invoices tr.row:last-child,
  #recent-invoices tr.row:last-child{border-bottom:0 !important;}

  body.mobile-dashboard-v2 #recent-invoices tr.row td,
  #recent-invoices tr.row td{
    display:block !important;
    width:auto !important;
    min-width:0 !important;
    max-width:100% !important;
    padding:0 !important;
    border:0 !important;
    margin:0 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    line-height:1.15 !important;
    text-align:start !important;
  }

  body.mobile-dashboard-v2 #recent-invoices tr.row td::before,
  #recent-invoices tr.row td::before{
    display:none !important;
    content:none !important;
  }

  #recent-invoices td[data-label="Invoice"]{grid-area:inv !important;}
  #recent-invoices td[data-label="Customer"]{grid-area:cust !important;}
  #recent-invoices td[data-label="Date"]{display:none !important;}
  #recent-invoices td[data-label="Amount"]{grid-area:amount !important;text-align:end !important;}
  #recent-invoices td[data-label="Status"]{display:none !important;}

  #recent-invoices .t-inv{
    display:block !important;
    font-size:12px !important;
    font-weight:800 !important;
    letter-spacing:0 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  body.mobile-dashboard-v2 #recent-invoices .t-cust,
  #recent-invoices .t-cust{
    display:block !important;
    font-size:12px !important;
    font-weight:700 !important;
    line-height:1.15 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  #recent-invoices .t-ava{display:none !important;}

  #recent-invoices .t-mobile-amt{
    display:none;
  }

  #recent-invoices td[data-label="Date"]{
    color:var(--vbd-muted) !important;
    font-size:11.5px !important;
    font-weight:700 !important;
  }

  body.mobile-dashboard-v2 #recent-invoices td[data-label="Amount"],
  #recent-invoices td[data-label="Amount"]{
    font-family:'Inter', ui-monospace, monospace !important;
    font-size:12.5px !important;
    font-weight:800 !important;
    direction:ltr !important;
    unicode-bidi:isolate !important;
    letter-spacing:-.02em !important;
  }

  html[lang="dv"] #recent-invoices tr.row,
  body.lang-dv #recent-invoices tr.row{
    direction:rtl !important;
    grid-template-areas:"amount cust inv" !important;
  }

  html[lang="dv"] #recent-invoices .t-inv,
  html[lang="dv"] #recent-invoices .t-cust,
  html[lang="dv"] #recent-invoices td[data-label="Date"],
  body.lang-dv #recent-invoices .t-inv,
  body.lang-dv #recent-invoices .t-cust,
  body.lang-dv #recent-invoices td[data-label="Date"]{
    font-size:12px !important;
    line-height:1.15 !important;
  }
}

#recent-invoices .t-mobile-amt{display:none;}

@media (max-width:640px){
  #recent-invoices tr.row{
    grid-template-columns:minmax(70px,.72fr) minmax(0,1fr) !important;
    grid-template-areas:"inv cust" !important;
  }

  #recent-invoices td[data-label="Amount"],
  #recent-invoices td[data-label="Date"],
  #recent-invoices td[data-label="Status"]{
    display:none !important;
  }

  body.mobile-dashboard-v2 #recent-invoices .t-cust,
  #recent-invoices .t-cust{
    display:block !important;
    max-width:calc(100% - 74px) !important;
  }

  body.mobile-dashboard-v2 #recent-invoices tr.row td[data-label="Customer"],
  #recent-invoices tr.row td[data-label="Customer"]{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:6px !important;
  }

  #recent-invoices .t-mobile-amt{
    display:block !important;
    flex:0 0 auto !important;
    max-width:74px !important;
    font-family:'Inter', ui-monospace, monospace !important;
    font-size:11px !important;
    font-weight:800 !important;
    line-height:1 !important;
    white-space:nowrap !important;
    overflow:visible !important;
    text-overflow:clip !important;
    direction:ltr !important;
    unicode-bidi:isolate !important;
    letter-spacing:-.03em !important;
    text-align:end !important;
  }

  html[lang="dv"] #recent-invoices tr.row,
  body.lang-dv #recent-invoices tr.row{
    grid-template-areas:"cust inv" !important;
  }

  html[lang="dv"] #recent-invoices td[data-label="Customer"],
  body.lang-dv #recent-invoices td[data-label="Customer"]{
    direction:rtl !important;
  }
}

/* ══════════ TASK: Dashboard responsive polish (appended LAST — wins) — 2026-07-15 ══════════
   Layout/visual ONLY — no change to totals, financial calculations, chart data, routes or
   Firebase. Mobile bottom-nav clearance already exists (.vbd-body padding above), and the
   KPI 2×2 / no-ellipsis amounts / mobile invoice cards are already handled — untouched. */

/* ── DESKTOP: 4 KPI cards in ONE row only when they comfortably fit (≥1200px); 2×2 on
      narrower desktops so large "MVR 1,234,567.89" amounts never cramp or wrap. This
      overrides the earlier ≥1025 four-column rule for the 1025–1199 band only. ── */
@media (min-width:1025px) and (max-width:1199px){
  .vbd-cards{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
}

/* ── Chart ("Revenue vs expenses") + "Latest trips" stay SIDE BY SIDE from tablet up
      (previously stacked ≤1100). Mobile ≤767 still stacks for full-width readability. ── */
@media (min-width:768px){
  .vbd-mid{grid-template-columns:1.7fr 1fr!important;}
}

/* ── TABLET (768–1024): all Quick Action cards in ONE compact row; smaller chart,
      icons and padding so everything stays inside the screen. ── */
@media (min-width:768px) and (max-width:1024px){
  .vbd-quick{grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:8px!important;}
  .vbd-qa{min-height:104px!important;padding:12px 10px!important;}
  .vbd-qa-sub{display:none!important;}
  .vbd-qa-label{font-size:13px!important;line-height:1.15!important;}
  .vbd-qa-ic{width:34px!important;height:34px!important;border-radius:10px!important;}
  .vbd-qa-ic i{font-size:18px!important;}
  .vbd-chart.chart-box{height:240px!important;}
  .vbd-chart canvas{max-height:240px!important;}
}

/* ── MOBILE (≤767): chart height fits the screen (width already scales via canvas). ── */
@media (max-width:767px){
  .vbd-chart.chart-box{height:210px!important;}
  .vbd-chart canvas{max-height:210px!important;}
}