/* OTOVERA Professional Desktop — unified application design system
   Applies to every app.js module (all pages use these shared primitives).
   Add last in <head> after all previous stylesheets. No business data logic.
*/
:root {
  color-scheme:light;
  font-family:'Segoe UI',Tahoma,Arial,sans-serif!important;
  font-size:13px!important;
  --sidebar:246px!important;
  --ink:#22344a!important; --muted:#617185!important;
  --line:#d4dce5!important; --line-dark:#bdc9d5!important;
  --surface:#fff!important; --surface-2:#f4f6f8!important;
  --blue:#255c96!important; --blue-soft:#e6eef7!important;
  --shadow:none!important;
  --erp-canvas:#eef1f4; --erp-sidebar:#e8edf2; --erp-dark:#213a55;
  --erp-accent:#24649c; --erp-border:#d5dde5; --erp-muted:#708094;
}
*,*::before,*::after{box-sizing:border-box}
html,body{background:var(--erp-canvas)!important;color:#243448!important;font-family:'Segoe UI',Tahoma,Arial,sans-serif!important}
body{margin:0!important;font-size:12.5px!important;letter-spacing:0!important}
button,input,select,textarea,option{font-family:inherit!important;font-size:12px!important;letter-spacing:0!important}
button,select{cursor:pointer}input:disabled,select:disabled,textarea:disabled{background:#edf0f3!important;color:#8a98a8!important}
:focus-visible{outline:2px solid #4383bf!important;outline-offset:2px!important}
::selection{background:#d3e4f8;color:#173b5e}
[hidden]{display:none!important}
/* A single Windows-style application shell instead of card-based SaaS chrome */
.shell{display:grid!important;grid-template-columns:var(--sidebar) minmax(0,1fr)!important;min-height:100dvh!important;background:var(--erp-canvas)!important}
.sidebar{position:sticky!important;top:0!important;height:100dvh!important;display:flex!important;flex-direction:column!important;overflow:hidden!important;padding:0!important;background:var(--erp-sidebar)!important;border-right:1px solid #c5d0da!important;color:#283b50!important;box-shadow:none!important;z-index:31!important}
.brand-block{flex:none!important;margin:0!important;padding:17px 14px 13px!important;background:#f5f7f9!important;display:flex!important;align-items:flex-start!important;justify-content:center!important;flex-direction:column!important;gap:3px!important;min-height:82px!important;border:0!important;border-bottom:1px solid #cbd5df!important;box-shadow:inset 0 3px 0 var(--erp-accent)!important}
.brand-block img{width:167px!important;max-height:39px!important;object-fit:contain!important;object-position:left center!important;filter:none!important}
.brand-block span{font-size:10px!important;color:#667789!important;letter-spacing:.02em!important;padding:0!important}
#nav{display:block!important;flex:1!important;min-height:0!important;overflow-y:auto!important;overflow-x:hidden!important;padding:7px 6px 16px!important;scrollbar-width:thin!important;scrollbar-color:#becbd8 transparent!important}
#nav .erp-nav-group{background:transparent!important;border:0!important;border-radius:0!important;overflow:visible!important;margin:0 0 3px!important}
#nav .erp-nav-head{display:flex!important;align-items:center!important;gap:8px!important;min-height:33px!important;height:33px!important;background:transparent!important;color:#405468!important;text-align:left!important;padding:0 10px!important;margin:0!important;width:100%!important;border:0!important;border-radius:3px!important;box-shadow:none!important;font-size:11px!important;font-weight:700!important;letter-spacing:.01em!important;text-transform:none!important}
#nav .erp-nav-head:hover{background:#dae3ec!important;color:#193c5d!important}
#nav .erp-nav-head.has-active{color:#164b7a!important;background:#dde8f2!important}
#nav .erp-nav-caret{font-size:12px!important;color:#56718c!important;width:13px!important;line-height:1!important}
#nav .erp-nav-count{display:none!important}
#nav .erp-nav-items{margin:0 0 6px 9px!important;padding:0 0 0 7px!important;border-left:1px solid #c6d1de!important;background:transparent!important}
#nav .erp-nav-item,#nav button[data-page]{display:flex!important;align-items:center!important;gap:8px!important;width:100%!important;min-height:30px!important;height:auto!important;background:transparent!important;color:#35495c!important;font-size:12px!important;font-weight:450!important;line-height:1.25!important;padding:6px 9px!important;margin:0!important;border:1px solid transparent!important;border-radius:3px!important;text-align:left!important;box-shadow:none!important;transition:background .12s!important}
#nav .erp-nav-item:hover,#nav button[data-page]:hover{background:#dde7f0!important;color:#18456f!important}
#nav .erp-nav-item.active,#nav button[data-page].active{color:#174e81!important;background:#d4e5f6!important;border-color:#bdd2e6!important;box-shadow:inset 3px 0 0 var(--erp-accent)!important;font-weight:650!important}
#nav .nav-icon{display:grid!important;place-items:center!important;width:17px!important;height:17px!important;color:#617a90!important;flex:none!important}
#nav .nav-icon svg{width:16px!important;height:16px!important;stroke-width:1.8!important}
#nav .nav-label{min-width:0!important;line-height:1.3!important}
.side-bottom{flex:none!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;padding:11px 13px!important;margin:0!important;background:#e0e7ee!important;border:0!important;border-top:1px solid #c7d3df!important;color:#496076!important}
.side-bottom strong{font-size:10.5px!important;color:#294967!important;letter-spacing:.04em!important}
.side-bottom span{font-size:9px!important;color:#73859a!important;line-height:1.2!important;text-align:right!important}
.workspace{min-width:0!important;display:flex!important;flex-direction:column!important;min-height:100dvh!important;background:var(--erp-canvas)!important}
.topbar{flex:none!important;position:sticky!important;top:0!important;z-index:20!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;flex-wrap:nowrap!important;height:56px!important;min-height:56px!important;padding:0 17px!important;background:#fafbfc!important;border:0!important;border-bottom:1px solid #ced8e2!important;box-shadow:none!important}
.topbar-left{min-width:200px!important;gap:9px!important;display:flex!important;align-items:center!important}
.global-search{position:relative!important;min-width:220px!important;max-width:375px!important;border:1px solid #cfd9e2!important;background:white!important;border-radius:3px!important;min-height:32px!important;box-shadow:none!important}
.global-search input{border:0!important;background:transparent!important;min-height:30px!important;font-size:11.5px!important;padding:5px 6px!important;box-shadow:none!important}
.global-search>span{color:#7890a4!important}
.global-search kbd{font-size:9px!important;background:#f4f7fa!important;color:#788a9c!important;border:1px solid #e0e6ed!important;border-radius:2px!important}
.topbar-status{display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:4px!important;flex:1!important;min-width:0!important}
.status-chip{display:flex!important;align-items:center!important;gap:7px!important;border:0!important;background:transparent!important;border-radius:3px!important;padding:6px 9px!important;min-height:36px!important;box-shadow:none!important;color:#536478!important}
.status-chip:hover{background:#edf2f6!important}
.status-chip span:not(.status-icon){font-size:9.5px!important;line-height:1.35!important;white-space:nowrap!important}
.status-chip strong{font-size:11px!important;color:#263d55!important;font-variant-numeric:tabular-nums!important}
.status-icon{width:21px!important;height:21px!important;border-radius:3px!important;font-size:12px!important}
.user-tools{display:flex!important;align-items:center!important;gap:6px!important;flex:none!important;padding-left:10px!important;border-left:1px solid #d9e0e7!important}
.user-chip{background:transparent!important;border:0!important;padding:2px 4px!important;gap:6px!important;border-radius:3px!important;box-shadow:none!important}
.user-chip span{font-size:10.5px!important;color:#42566c!important}
.avatar{width:27px!important;height:27px!important;border-radius:3px!important;background:#d9e6f2!important;color:#235c8b!important;font-size:10px!important}
.icon-button{width:31px!important;height:31px!important;min-height:31px!important;display:inline-grid!important;place-items:center!important;border-radius:3px!important;border:1px solid #d2dbe5!important;color:#3c556d!important;background:#fff!important;padding:0!important;box-shadow:none!important}
.icon-button:hover{background:#e7f0f8!important;border-color:#aac6e0!important}
.pro-workbar,.otovera-full-workbar{flex:none!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;height:31px!important;min-height:31px!important;padding:0 20px!important;color:#6c7d8e!important;background:#e7edf3!important;border-bottom:1px solid #d6e0e9!important;font-size:10px!important;font-weight:600!important;letter-spacing:.03em!important}
.pro-workbar-right{color:#8899aa!important}
.content{flex:1!important;min-width:0!important;margin:0!important;padding:15px 20px 24px!important;background:var(--erp-canvas)!important;max-width:none!important;width:100%!important}
.page-head{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:15px!important;min-height:68px!important;margin:0 0 12px!important;background:#fff!important;padding:12px 17px!important;border:1px solid #d3dde6!important;border-left:3px solid var(--erp-accent)!important;border-radius:2px!important;box-shadow:none!important}
.page-head h1{color:#253e56!important;font-size:19px!important;line-height:1.2!important;font-weight:650!important;letter-spacing:-.015em!important;margin:4px 0 0!important}
.page-head .breadcrumb{font-size:10px!important;color:#71859a!important;letter-spacing:0!important}
.page-subtitle{font-size:11px!important;margin:4px 0 0!important;color:#8793a0!important}
.page-head-right{display:flex!important;align-items:center!important;gap:10px!important}
.date-chip{border:0!important;background:transparent!important;color:#7b8d9e!important;font-size:10px!important;box-shadow:none!important}
#actions{display:flex!important;gap:6px!important;flex-wrap:wrap!important;align-items:center!important}
#notice{margin:0 0 12px!important;border:1px solid #d2dfed!important;border-left:3px solid var(--erp-accent)!important;border-radius:2px!important;background:#f6f9fc!important;padding:9px 12px!important;color:#2b5678!important}
#view{min-width:0!important}
/* Global typography + actions */
h1,h2,h3,h4{color:#2a4057!important;letter-spacing:0!important;font-family:'Segoe UI',Tahoma,Arial,sans-serif!important}
p{line-height:1.48!important}
a{color:#225c92!important;text-decoration:none!important}a:hover{text-decoration:underline!important}
button,.primary,.quiet,.danger,.small{border-radius:3px!important;box-shadow:none!important;text-shadow:none!important;transition:background-color .1s,border-color .1s!important}
button.primary,.primary{background:#276397!important;border:1px solid #235783!important;color:#fff!important;font-weight:600!important;min-height:32px!important;padding:6px 12px!important}
button.primary:hover,.primary:hover{background:#1d5385!important}
button.quiet,.quiet,button:not(.primary):not(.danger):not(.icon-button):not(.erp-nav-head):not(.erp-nav-item):not([data-page]):not(.workflow-step):not(.tab),.report-actions a{font-weight:550!important}
button.quiet,.quiet{border:1px solid #cbd6e0!important;background:#fff!important;color:#35536f!important;min-height:31px!important;padding:5px 11px!important}
button.quiet:hover,.quiet:hover{background:#eef4f9!important;border-color:#abc2d6!important;text-decoration:none!important}
button.danger,.danger{background:#fff!important;color:#b33c45!important;border:1px solid #ebc4ca!important;min-height:31px!important;padding:5px 11px!important}
button.danger:hover,.danger:hover{background:#fff0f1!important}
button.small,.small{font-size:10.5px!important;min-height:27px!important;padding:4px 9px!important}
/* Dashboard grid and reusable KPI cards */
.cards,.dashboard-cards,.module-kpis,.cash-cards,.vehicle-finance{gap:8px!important;margin:0 0 12px!important}
.card,.stat{background:#fff!important;border:1px solid #d6dfe7!important;border-left:2px solid #a6c1d8!important;border-radius:2px!important;box-shadow:none!important;padding:13px 14px!important;min-height:92px!important}
.card.accent,.card:first-child,.stat:first-child{border-left-color:var(--erp-accent)!important}
.card span,.stat>span{display:block!important;font-size:10px!important;font-weight:550!important;color:#748699!important}
.card strong,.stat b{display:block!important;font-size:19px!important;font-weight:650!important;letter-spacing:-.02em!important;color:#244a6d!important;line-height:1.4!important;font-variant-numeric:tabular-nums!important}
.card small,.stat small{font-size:9.5px!important;color:#8a96a4!important}
.panel,.panel.wide,.vehicle-detail,.quick-actions-panel,.contact-statement,.profile-card{border:1px solid #d5dde5!important;border-radius:2px!important;box-shadow:none!important;background:#fff!important;overflow:visible!important}
.panel{margin-bottom:12px!important}
.panel-head,.panel .panel-head,.vehicle-detail>.panel-head{background:#f7f9fb!important;border-bottom:1px solid #e0e6eb!important;border-radius:0!important;padding:10px 14px!important;margin:0!important;min-height:43px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important}
.panel-head h2,.panel .panel-head h2{font-size:12.5px!important;font-weight:700!important;line-height:1.35!important;color:#2d475f!important;margin:0!important}
.panel-head .muted,.panel-head span{font-size:10px!important;color:#8190a0!important}
.panel>.panel-body,.panel .body{padding:12px!important}
/* Data grids across ALL modules: vehicles, contacts, finance, commercial, stock */
.table-scroll,.stock-table-wrap,.scroll,.import-preview,.reconciliation-preview{max-width:100%!important;overflow:auto!important;scrollbar-color:#c0cedb transparent!important;scrollbar-width:thin!important}
table{border-collapse:separate!important;border-spacing:0!important;width:100%!important;font-size:11.5px!important;color:#364d63!important}
thead th,th{position:sticky!important;top:0!important;z-index:2!important;background:#edf2f7!important;color:#495f75!important;border-bottom:1px solid #cbd7e2!important;border-top:0!important;font-size:10px!important;letter-spacing:0!important;text-transform:none!important;font-weight:700!important;padding:9px 10px!important;white-space:nowrap!important}
tbody td,td{background:#fff!important;border-bottom:1px solid #e7ecf1!important;font-size:11.2px!important;padding:8px 10px!important;color:#385067!important;vertical-align:middle!important;line-height:1.42!important}
tbody tr:nth-child(even)>td{background:#fbfcfe!important}
tbody tr:hover>td{background:#eaf3fb!important}
td strong{font-size:11px!important;font-weight:650!important;color:#273e56!important}
td small{font-size:9.5px!important;line-height:1.45!important;color:#8a98a6!important;margin-top:2px!important}
.num,.value,.amount{font-variant-numeric:tabular-nums!important}
.pill,.badge,.status-pill{border:1px solid #d2e1d8!important;border-radius:3px!important;padding:3px 7px!important;background:#eef7f1!important;color:#327252!important;line-height:1.35!important;font-weight:650!important;font-size:9.5px!important}
.pill.gray{background:#f1f3f5!important;color:#647381!important;border-color:#dfe4e9!important}
.pill.amber{background:#fff8e8!important;color:#9b701d!important;border-color:#ebdbb4!important}
.pill.red{background:#fff0f1!important;color:#ad3d4a!important;border-color:#f0cdd0!important}
.empty{padding:28px 16px!important;color:#7b8e9d!important;font-size:11px!important}
/* Filters, editable commercial documents, quote, tables and order lines */
.toolbar,.vehicle-filter,.statement-filters,.chart-toolbar,.dashboard-quick-actions,.module-quick-create{background:#f8fafc!important;border:1px solid #d6dfe8!important;border-radius:2px!important;box-shadow:none!important;padding:10px 12px!important;margin:0 0 10px!important;gap:8px!important}
.toolbar label,.statement-filters label{font-size:10px!important;color:#5b6d80!important}
label{display:grid!important;gap:5px!important;color:#465d73!important;font-size:11px!important;font-weight:600!important;line-height:1.4!important}
input,select,textarea{border:1px solid #cbd6e0!important;background:#fff!important;color:#2b4055!important;border-radius:3px!important;min-height:33px!important;padding:6px 9px!important;box-shadow:none!important;width:100%;max-width:100%;font-size:11.7px!important}
input:hover,select:hover,textarea:hover{border-color:#9db5cb!important}
input:focus,select:focus,textarea:focus{border-color:#4280ba!important;box-shadow:0 0 0 2px rgba(46,109,167,.12)!important;outline:none!important}
textarea{min-height:83px!important;line-height:1.45!important}
input[type="checkbox"],input[type="radio"]{min-height:0!important;width:auto!important;accent-color:#28659a!important}
input[type="file"]{padding:5px!important;line-height:1.3!important;background:#fdfefe!important}
input[type="date"],input[type="datetime-local"]{font-variant-numeric:tabular-nums!important}
.fields,.form-grid,.reconciliation-fields{gap:11px 12px!important}
.fields label.wide,.fields .wide{grid-column:1/-1!important}
.dialog-actions,.reconciliation-actions,.statement-actions{background:#f7f9fb!important;border-top:1px solid #dce4eb!important;padding:11px 16px!important;gap:8px!important}
/* Full-screen editor dialogs, multi-line invoices and quick add */
dialog{max-width:min(95vw,1050px)!important;max-height:91dvh!important;border:1px solid #b8c7d5!important;border-radius:4px!important;background:#fff!important;color:#2a4258!important;box-shadow:0 24px 70px rgba(19,44,69,.22)!important;padding:0!important}
dialog::backdrop{background:rgba(25,39,54,.36)!important;backdrop-filter:none!important}
dialog form{display:flex!important;flex-direction:column!important;max-height:90dvh!important;min-height:0!important;overflow:auto!important;margin:0!important}
dialog .dialog-top{position:sticky!important;top:0!important;z-index:4!important;background:#eaf0f6!important;border-bottom:1px solid #c8d6e2!important;border-radius:0!important;padding:13px 16px!important;display:flex!important;justify-content:space-between!important;align-items:center!important;gap:12px!important}
.dialog-top h2{font-size:16px!important;font-weight:650!important;color:#24435e!important;margin:2px 0!important}
.dialog-kicker{font-size:9.5px!important;letter-spacing:.06em!important;color:#6c849a!important}
dialog .fields{padding:15px 18px!important;gap:11px 15px!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;align-items:start!important}
dialog #form-help,dialog .muted,dialog .error{padding-left:18px!important;padding-right:18px!important}
dialog .dialog-actions{position:sticky!important;bottom:0!important;z-index:5!important;margin-top:auto!important;justify-content:flex-end!important}
.import-format,.import-format-columns,.import-preview{font-size:11px!important;line-height:1.6!important;border-color:#d6dfe8!important}
.erp-workflow{background:#f8fafc!important;border:1px solid #d7dfe6!important;border-radius:2px!important;padding:8px!important;gap:5px!important}
.workflow-step,.quick-action{border-radius:2px!important;background:#fff!important;border:1px solid #d6dfe7!important;box-shadow:none!important}
.workflow-step.active,.quick-action:hover{background:#e8f1fa!important;border-color:#aac8df!important}
.module-quick-create{justify-content:flex-start!important}
.segmented{border-radius:3px!important;background:#edf1f5!important}.segmented button{border-radius:2px!important}
.chart-wrap,.cash-chart,.due-bars{background:#fff!important}
.chart-grid{stroke:#e3e9f0!important}
.chart-line{stroke:#2e6aa0!important;stroke-width:2!important}
.chart-area{fill:#2b6aab12!important}
.activity-item{border-bottom:1px solid #edf0f3!important;padding:8px 12px!important}
.vehicle-specs{border-color:#dce3e9!important}
.vehicle-specs>div{background:#fff!important;border-color:#e2e9ef!important;padding:10px 12px!important}
.vehicle-specs span{font-size:9.5px!important}.vehicle-specs strong{font-size:11px!important}
.contact-statement{padding:0!important}.contact-statement-head{padding:15px!important;border-bottom:1px solid #dbe3ea!important}
.profile-card{border-radius:2px!important}.profile-logo{background:#f3f6f8!important}
/* Tabs/widgets used in per-module forms and report sections */
.tabs,.tabs-bar,.tab-bar,.tab-strip{border-bottom:1px solid #ccd9e5!important;border-radius:0!important;background:#f5f7fa!important;gap:0!important}
.tabs button,.tab-bar button,.tab-strip button{border-radius:0!important;font-size:11px!important;white-space:nowrap!important}
.tabs button.active,.tab-bar button.active{background:#fff!important;color:#215c91!important;border-bottom:2px solid #286da5!important}
/* Login; same design vocabulary as authenticated ERP */
.login{background:linear-gradient(110deg,#e0e9f1 0%,#f1f4f6 50%,#e3ebf2 100%)!important}
.login-card{border-radius:3px!important;border:1px solid #cad7e2!important;box-shadow:0 14px 55px rgba(40,69,94,.08)!important;background:white!important}
.login-brand img{filter:none!important}
.login-card h1{font-size:22px!important;letter-spacing:-.02em!important}
.login-card .primary{width:100%!important;min-height:37px!important}
.otovera-app-footer,.erp-shell-footer,.otovera-full-footer{display:flex!important;justify-content:space-between!important;align-items:center!important;gap:14px!important;flex-wrap:wrap!important;border-top:1px solid #ced9e2!important;background:#e8eef4!important;color:#718397!important;padding:8px 19px!important;font-size:10px!important;min-height:34px!important}
.otovera-app-footer strong,.erp-shell-footer strong,.otovera-full-footer strong{color:#334e68!important}
/* Desktop-to-tablet and mobile remains usable. No page-name or data-page logic changed */
@media (max-width:1450px){.topbar-status .status-chip:nth-child(1){display:none!important}.status-chip{padding:5px!important}.topbar{gap:6px!important}.content{padding:13px!important}}
@media (max-width:1170px){:root{--sidebar:226px!important}.status-chip{display:none!important}.status-chip:nth-child(2){display:flex!important}.page-head{align-items:flex-start!important;flex-wrap:wrap!important}.cards{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
@media (max-width:820px){
  .shell{display:block!important}.sidebar{position:fixed!important;top:0!important;left:-260px!important;width:246px!important;height:100dvh!important;z-index:50!important;transition:left .15s!important}
  .shell.sidebar-open .sidebar{left:0!important}
  .workspace{width:100%!important;min-height:100dvh!important}
  .topbar{height:auto!important;min-height:53px!important;padding:8px 10px!important;gap:6px!important}
  .topbar-left{min-width:0!important;flex:1!important}.global-search{min-width:0!important;max-width:none!important}
  .user-chip #who{display:none!important}.user-chip{padding:0!important}
  .content{padding:11px!important}.page-head{padding:12px!important}
  .page-head h1{font-size:17px!important}.cards{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .status-chip{display:none!important}dialog{max-width:96vw!important;width:96vw!important}
}
@media (max-width:530px){.topbar{padding:7px!important}.global-search kbd{display:none!important}.date-chip{display:none!important}.content{padding:8px!important}.page-head{padding:10px!important}.card,.stat{padding:10px!important;min-height:78px!important}.card strong{font-size:17px!important}.panel-head{padding:10px!important}.toolbar{padding:8px!important}.toolbar>label{min-width:100%!important}dialog .fields{grid-template-columns:1fr!important;padding:11px!important}.user-chip{display:none!important}.pro-workbar,.otovera-full-workbar{padding:0 10px!important;font-size:9px!important}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
/* Fix legacy grid/absolute search behavior explicitly: one-line desktop toolbar */
.topbar .global-search{display:flex!important;flex-direction:row!important;align-items:center!important;gap:5px!important;padding:0 8px!important;height:33px!important;min-height:33px!important;overflow:hidden!important}
.topbar .global-search>span{display:inline-flex!important;flex:none!important;align-items:center!important;justify-content:center!important;width:16px!important;height:21px!important}
.topbar .global-search input{display:block!important;position:static!important;flex:1 1 auto!important;width:100%!important;height:31px!important;min-height:31px!important;margin:0!important;padding:0!important;line-height:30px!important;white-space:nowrap!important;transform:none!important}
.topbar .global-search kbd{position:static!important;display:inline-flex!important;flex:none!important;align-items:center!important;white-space:nowrap!important;transform:none!important;margin:0!important;padding:3px 4px!important;inset:auto!important}