:root{--sidebar-width:220px;--workspace-nav:#162238;--workspace-selection:#2563eb;--workspace-canvas:#fbfcfe;--workspace-selected:#f3f7ff;--radius-xl:16px;--radius-lg:12px;--radius-md:8px;--inspector-font-title:18px;--inspector-font-heading:16px;--inspector-font-body:13px;--inspector-font-note:12px}:root[data-theme=dark]{--workspace-canvas:#0d1728;--workspace-selected:#182d49}body{font-family:Inter,Segoe UI,Arial,sans-serif}button,input,select,textarea{font:inherit}.app-shell.has-sidebar{padding:24px 28px 32px calc(var(--sidebar-width) + 28px)}.app-shell.has-sidebar.is-sidebar-collapsed,:root[data-sidebar-collapsed=true] .app-shell.has-sidebar{padding-left:calc(var(--sidebar-collapsed-width) + 28px)}.has-sidebar .page-grid{width:100%;max-width:none}.app-shell .app-sidebar{background:var(--workspace-nav);color:#f7fbff;padding:16px 12px;border:0;box-shadow:none;gap:20px}.app-shell .app-sidebar :is(.sidebar-collapse-button,.sidebar-nav-item,.sidebar-utility-button){color:#f7fbff;border-radius:8px;font-size:13px}.app-shell .app-sidebar :is(.sidebar-nav-item,.sidebar-utility-button){min-height:44px}.app-shell .app-sidebar :is(.sidebar-nav-item,.sidebar-utility-button):hover{background:#ffffff12;border-color:transparent}.app-shell .app-sidebar :is(.sidebar-nav-item,.sidebar-utility-button).is-active{background:#233d5d;border-color:#ffffff14;color:#fff}.app-shell .sidebar-collapse-button{background:#ffffff0d;border-color:#ffffff20}.app-shell .sidebar-footer{border-color:#ffffff20}.app-shell .app-sidebar .advertime-logo-ink{fill:#fff}.app-shell .mobile-header-brand .advertime-logo-ink{fill:var(--text)}.app-shell :is(.page-head h2,.customer-detail-title h2){font-weight:700;letter-spacing:-.035em}.app-shell :is(.customer-dashboard-card,.metric-card,.detail-card,.activity-group,.settings-section-card){box-shadow:none;border-radius:12px}.app-shell :is(button,a,input,select,textarea,summary,[tabindex]):focus-visible{outline:2px solid var(--workspace-selection);outline-offset:3px}.portal-app-root.is-modal-open:before{background:rgb(7 29 59/18%);-webkit-backdrop-filter:none;backdrop-filter:none}.app-shell .drawer-card:not([hidden]){container:form-panel/inline-size;position:fixed;inset:0 0 0 auto;width:min(520px,100vw);height:100dvh;max-height:100dvh;border:0;border-left:1px solid var(--line);border-radius:0;transform:none;background:var(--surface);box-shadow:-12px 0 36px rgb(7 29 59/10%)}.app-shell :is(#boardCardDrawer,#mileageEntryDrawer):not([hidden]){width:min(620px,100vw)}.app-shell .drawer-card:not([hidden]) .drawer-head{padding:22px 24px 18px;background:var(--surface)}.app-shell .drawer-card:not([hidden]) .drawer-head h2{font-size:20px;line-height:1.35}.app-shell .drawer-card:not([hidden])>form{flex:1 1;overflow-y:auto;min-height:0;padding:20px 24px 0;align-content:start;gap:18px 14px}.app-shell .drawer-card:not([hidden]) .form-actions{position:-webkit-sticky;position:sticky;bottom:0;grid-column:1/-1;z-index:3;display:flex;flex-wrap:wrap;margin:12px -24px 0;padding:16px 24px max(16px,env(safe-area-inset-bottom));border-top:1px solid var(--line);background:var(--surface);gap:8px;-webkit-backdrop-filter:none;backdrop-filter:none}.app-shell .drawer-card:not([hidden]) .form-actions>*{flex:0 1 auto;width:auto}.app-shell .drawer-card:not([hidden]) .form-actions .danger-button{margin-left:auto}.app-shell .detail-inspector-actions .toolbar-actions>button,.app-shell .drawer-card:not([hidden]) .form-actions>button{min-height:40px;padding:8px 12px;font-size:13px;line-height:18px;font-weight:700}@container form-panel (max-width: 500px){.app-shell .drawer-card:not([hidden]) .form-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.app-shell .drawer-card:not([hidden]) .form-actions>*{min-width:0;width:100%}.app-shell .drawer-card:not([hidden]) .form-actions .danger-button{grid-column:1/-1;margin-left:0}}.app-shell .drawer-card:not([hidden]) .is-reserved-hidden{display:none}.app-shell .drawer-card:not([hidden]) label{font-size:13px;line-height:1.5}.app-shell .drawer-card:not([hidden]) :is(input,select,textarea){font-size:14px}.app-shell .drawer-card:not([hidden])>#serviceContractArchive{flex:1 1}.app-shell.has-sidebar:has(:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel):not([hidden])){padding:0 0 0 var(--sidebar-width)}.app-shell.has-sidebar.is-sidebar-collapsed:has(:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel):not([hidden])),:root[data-sidebar-collapsed=true] .app-shell.has-sidebar:has(:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel):not([hidden])){padding-left:var(--sidebar-collapsed-width)}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel){display:block;background:var(--workspace-canvas);min-height:100dvh;gap:0}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .customer-detail-topbar,:is(#overviewPanel,#billingPanel,#mileagePanel) .overview-topbar{grid-template-columns:auto minmax(150px,180px) minmax(160px,1fr) 104px 120px 64px auto;position:-webkit-sticky;position:sticky;top:0;min-height:76px;z-index:40;padding:16px 24px;gap:12px;border:0;border-bottom:1px solid var(--line);border-radius:0;background:var(--surface);box-shadow:none}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .customer-detail-title h2{font-size:23px}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .customer-detail-back{display:none}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .customer-detail-control :is(input,select){width:100%;min-width:0;min-height:42px;height:42px;padding:8px 12px;border:1px solid var(--line);border-radius:7px;background:var(--field-bg);color:var(--text);font-size:13px;box-shadow:none}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .customer-detail-control select{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding-inline:12px 36px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1.5 1.5L6 6L10.5 1.5' stroke='%230f2240' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:12px 8px}:root[data-theme=dark] :is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .customer-detail-control select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1.5 1.5L6 6L10.5 1.5' stroke='%23edf2ff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .customer-detail-primary-action{min-height:42px;height:42px;padding:8px 12px;border-radius:7px;font-size:13px}.customer-detail-month-navigation{display:flex;gap:4px}.customer-detail-month-navigation button{display:grid;place-items:center;width:30px;min-width:30px;height:42px;min-height:42px;padding:0;border:0;background:transparent}.customer-detail-month-navigation svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .customer-detail-layout{display:grid;grid-template-columns:minmax(0,1fr) var(--inspector-width,340px);grid-template-areas:"attention inspector" "main inspector";grid-gap:0;gap:0;align-items:start}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .customer-detail-layout:has(.customer-detail-inspector[data-mode=form]){grid-template-columns:minmax(0,1fr) var(--inspector-width,460px)}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .detail-attention-section{padding:24px 24px 12px;background:var(--workspace-canvas)}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .detail-attention-head h2{font-size:15px;font-weight:600}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .detail-attention-grid{display:block}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .month-overview-toolbar{display:none}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .month-overview-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .month-card{min-width:0;padding:16px;border-radius:10px;box-shadow:none;background:var(--surface)}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .month-card h3{font-size:14px}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) :is(.month-stat-row,.month-card p){font-size:12px}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .customer-detail-layout>.detail-main{padding:0 24px 32px;gap:14px}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .customer-detail-filterbar{padding:4px 0;border:0;background:transparent;box-shadow:none}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .customer-detail-type-control{width:210px}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .customer-detail-activity-head{align-items:baseline;padding-right:15px}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .customer-detail-activity-columns{grid-template-columns:minmax(0,1fr) 44px;width:244px;gap:10px;padding:0;text-align:right;font-size:10px;font-weight:600}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .activity-group{border-radius:9px;background:var(--surface)}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .activity-group+.activity-group{margin-top:12px}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .activity-group-head{grid-template-columns:18px minmax(110px,auto) minmax(0,1fr);padding:14px;gap:10px;background:var(--surface-soft)}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .activity-group-title{font-size:14px}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .activity-summary{gap:8px 14px;font-size:11px}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .activity-row{grid-template-columns:24px minmax(0,1fr) minmax(244px,max-content);gap:12px;padding:14px;min-height:84px;align-items:center}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .activity-row.is-selected{background:var(--workspace-selected);box-shadow:inset 3px 0 var(--workspace-selection),inset 0 0 0 1px var(--workspace-selection)}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .activity-icon{width:24px;height:24px}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .activity-main{justify-content:center}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .activity-title{font-size:13px;line-height:1.45}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .activity-preview{font-size:12px;-webkit-line-clamp:1}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .activity-meta{padding-top:4px;margin-top:0;font-size:11px}#detailPanel .activity-meta-date{white-space:nowrap}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .activity-badge-row{display:inline-flex;margin:0 0 0 6px}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .activity-payment-pill{font-size:11px}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .activity-side{display:grid;grid-template-columns:minmax(0,1fr) 44px;grid-template-rows:auto auto;align-content:center;align-items:center;grid-gap:5px 10px;gap:5px 10px;font-size:12px;text-align:right}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .activity-amount{grid-column:1;font-size:13px;white-space:nowrap}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .activity-balance{grid-column:1;font-size:11px}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .activity-tail{display:contents}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .activity-tail .activity-date{display:none}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .activity-actions{grid-column:2;grid-row:1/3;align-self:center}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .activity-open-action{min-height:36px;font-size:12px}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .customer-detail-inspector{display:block;position:-webkit-sticky;position:sticky;top:76px;width:100%;min-height:calc(100dvh - 76px);max-height:calc(100dvh - 76px);padding:22px;border:0;border-left:1px solid var(--line);border-radius:0;background:var(--surface);box-shadow:none}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .detail-inspector-head h2{font-size:16px}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .detail-inspector-section{font-size:13px}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .detail-inspector-section p{white-space:pre-wrap;overflow-wrap:anywhere}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .detail-inspector-default>.customer-hero{margin-top:18px;padding:16px 0;border:0;border-block:1px solid var(--line);box-shadow:none;border-radius:0}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .detail-inspector-default .customer-meta{display:grid;grid-gap:6px;gap:6px}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .detail-inspector-default .customer-head{display:block;position:relative}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .detail-inspector-default .customer-title-row{padding-right:40px}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .detail-inspector-default .customer-head>.icon-button{position:absolute;top:0;right:0}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .detail-inspector-default :is(.detail-grid,.stat-grid,.progress-card){margin-top:12px}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .detail-inspector-default .stat-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .detail-inspector-default .metric-card{padding:12px}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .detail-inspector-actions{margin-top:22px}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .customer-detail-inspector[data-mode=form]{padding:0;overflow:hidden}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .customer-detail-inspector:not([data-mode=form]) .detail-inspector-drawer-host{display:none}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .detail-inspector-drawer-host{height:calc(100dvh - 76px)}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .detail-inspector-drawer-host .drawer-card:not([hidden]){position:static;width:100%;height:100%;max-height:100%;border:0;box-shadow:none;overflow:hidden}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) #detailCustomerDrawerHost,:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) #detailReportDrawerHost{height:100%}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .detail-inspector-drawer-host .drawer-card>form{grid-template-columns:minmax(0,1fr)}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .detail-inspector-drawer-host :is(.paired-fields,.invoice-payment-grid){grid-template-columns:repeat(2,minmax(0,1fr))}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .detail-inspector-drawer-host :is(.paired-fields,.invoice-payment-grid)>*{grid-column:auto;min-width:0}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .detail-inspector-drawer-host .invoice-payment-status{grid-column:1/-1}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .detail-inspector-drawer-host .paired-fields{align-items:end}:root[data-theme=dark] .activity-payment-pill.is-uninvoiced{color:#ffaaaa}:root[data-theme=dark] .activity-payment-pill.is-unpaid{color:#f6c469}:root[data-theme=dark] .activity-payment-pill.is-paid{color:#6be3a1}:root[data-theme=dark] .activity-payment-pill.is-partner{color:#9bbdff}@media (max-width:1320px) and (min-width:901px){:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .customer-detail-topbar{grid-template-columns:minmax(0,1fr) 104px 120px auto;grid-template-areas:"title customer customer action" "search year month arrows";gap:10px}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .customer-detail-title{grid-area:title}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .customer-detail-customer-control{grid-area:customer}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .customer-detail-search-control{grid-area:search}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .customer-detail-year-control{grid-area:year}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .customer-detail-month-control{grid-area:month}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .customer-detail-month-navigation{grid-area:arrows;justify-content:flex-end}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .customer-detail-primary-action{grid-area:action}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .customer-detail-inspector{top:128px;min-height:calc(100dvh - 128px);max-height:calc(100dvh - 128px)}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .detail-inspector-drawer-host{height:calc(100dvh - 128px)}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .customer-detail-layout:has(.customer-detail-inspector[data-mode=form]){grid-template-columns:minmax(0,1fr) var(--inspector-width,400px)}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .customer-detail-layout:has(.customer-detail-inspector[data-mode=form]) .month-overview-grid{grid-template-columns:1fr}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .customer-detail-layout:has(.customer-detail-inspector[data-mode=form]) .month-card:not(:first-child){display:none}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .activity-row{grid-template-columns:20px minmax(0,1fr)}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .activity-main{grid-column:2;grid-row:1}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .activity-side{grid-column:2;grid-row:2}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .customer-detail-activity-columns{display:none}}@media (max-width:1100px){:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .month-overview-grid{grid-template-columns:1fr}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .month-card:not(:first-child){display:none}}@media (max-width:900px){.app-shell.has-sidebar,.app-shell.has-sidebar.is-sidebar-collapsed,.app-shell.has-sidebar.is-sidebar-collapsed:has(:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel):not([hidden])),.app-shell.has-sidebar:has(:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel):not([hidden])),:root[data-sidebar-collapsed=true] .app-shell.has-sidebar,:root[data-sidebar-collapsed=true] .app-shell.has-sidebar:has(:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel):not([hidden])){width:100%;margin-inline:0;padding:12px 0}.app-shell .app-header{padding-bottom:12px}.app-shell.has-sidebar #dashboardPanel>.dashboard-overview-section,.app-shell.has-sidebar .app-header,.app-shell.has-sidebar.settings-page-shell .settings-main{padding-inline:16px}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .customer-detail-topbar{position:relative;grid-template-columns:104px minmax(0,1fr) 68px;grid-template-areas:"title title title" "customer customer customer" "search search search" "year month arrows" "action action action";padding:16px;gap:10px}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .customer-detail-title{grid-area:title}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .customer-detail-title h2{font-size:22px}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .customer-detail-customer-control{grid-area:customer}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .customer-detail-search-control{grid-area:search}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .customer-detail-year-control{grid-area:year}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .customer-detail-month-control{grid-area:month}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .customer-detail-month-navigation{grid-area:arrows}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .customer-detail-primary-action{grid-area:action}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .customer-detail-layout,:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .customer-detail-layout:has(.customer-detail-inspector[data-mode=form]){grid-template-columns:minmax(0,1fr);grid-template-areas:"attention" "main" "inspector"}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .detail-attention-section{padding:18px 16px 8px}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .customer-detail-layout>.detail-main{padding:0 16px 20px}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .month-overview-grid{grid-template-columns:1fr}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .month-card:not(:first-child){display:none}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .customer-detail-activity-columns{display:none}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .activity-row{grid-template-columns:24px minmax(0,1fr);gap:8px 12px}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .activity-icon{display:grid;grid-column:1;grid-row:1;align-self:start;margin-top:-2px}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .activity-main{grid-column:2;grid-row:1;justify-content:flex-start}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .activity-side{grid-column:2;grid-row:2;width:100%;text-align:left;margin-top:4px}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .activity-actions{justify-content:flex-end}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .activity-group-head{grid-template-columns:16px minmax(0,1fr);gap:8px}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .activity-summary{grid-column:2;justify-content:flex-start;flex-wrap:wrap}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .activity-summary span:last-child{width:auto}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .activity-badge-row{margin-left:0}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .customer-detail-inspector[data-mode=default]{position:static;min-height:0;max-height:none;display:block;border-top:1px solid var(--line)}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .customer-detail-inspector:not([data-mode=default]){position:fixed;inset:0 0 0 auto;z-index:110;width:min(520px,100vw);height:100dvh;min-height:0;max-height:100dvh;padding:20px}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .customer-detail-inspector[data-mode=form]{padding:0}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .detail-inspector-drawer-host{height:100dvh}body:has(.is-detail-inspector-open){overflow:hidden}}@media (max-width:520px){.app-shell .drawer-card:not([hidden]){width:100vw}.app-shell .drawer-card:not([hidden]) .drawer-head{padding:18px 16px}.app-shell .drawer-card:not([hidden])>form{padding:18px 16px 0;grid-template-columns:minmax(0,1fr)}.app-shell .drawer-card:not([hidden]) .form-actions{margin-inline:-16px;padding-inline:16px}.app-shell .drawer-card:not([hidden]) :is(input,select,textarea),:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .customer-detail-control :is(input,select){font-size:16px}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .detail-inspector-drawer-host :is(.paired-fields,.invoice-payment-grid){grid-template-columns:1fr}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .customer-detail-inspector:not([data-mode=default]){width:100vw}}@media (prefers-reduced-motion:reduce){.app-shell *,.app-shell :after,.app-shell :before{transition:none!important;scroll-behavior:auto!important}}.inspector-layout-toolbar,.inspector-resize-handle{display:none}@media (min-width:901px){:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel){--inspector-top:76px}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .customer-detail-inspector{display:flex;flex-direction:column}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .customer-detail-inspector>*{flex-shrink:0}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .detail-inspector-actions{margin-bottom:16px}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .inspector-layout-toolbar{position:-webkit-sticky;position:sticky;bottom:-22px;z-index:60;display:flex;justify-content:flex-end;align-items:center;height:32px;margin:auto -22px -22px;padding:0 16px;border-top:1px solid var(--line);background:var(--surface)}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .inspector-layout-menu{position:relative}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .inspector-layout-menu>summary{cursor:pointer;padding:6px 8px;border-radius:6px;color:var(--muted);font-size:12px}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .inspector-layout-menu>summary:hover,:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .inspector-layout-menu[open]>summary{background:var(--surface-soft);color:var(--text)}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .inspector-layout-options{position:absolute;bottom:calc(100% + 6px);right:0;width:200px;padding:6px;border:1px solid var(--line);border-radius:8px;background:var(--surface);box-shadow:0 8px 24px rgb(7 29 59/14%)}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .inspector-layout-options button{display:block;width:100%;padding:10px;min-height:38px;border:0;border-radius:5px;background:transparent;color:var(--text);text-align:left;font-size:13px}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .inspector-layout-options button:hover,:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .inspector-layout-options button[aria-pressed=true]{background:var(--workspace-selected)}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .inspector-layout-options button[aria-pressed=true]{font-weight:700}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .customer-detail-inspector[data-mode=form] .inspector-layout-toolbar{margin:0;bottom:0}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .detail-inspector-drawer-host{height:calc(100dvh - var(--inspector-top) - 32px)}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .customer-detail-layout[data-inspector-side=left],:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .customer-detail-layout[data-inspector-side=left]:has(.customer-detail-inspector[data-mode=form]){grid-template-columns:var(--inspector-width,340px) minmax(0,1fr);grid-template-areas:"inspector attention" "inspector main"}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) [data-inspector-side=left] .customer-detail-inspector{border-left:0;border-right:1px solid var(--line)}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .inspector-resize-handle{display:block;position:-webkit-sticky;position:sticky;top:var(--inspector-top);grid-area:inspector;justify-self:start;align-self:start;z-index:65;width:10px;height:calc(100dvh - var(--inspector-top));transform:translateX(-50%);cursor:col-resize;touch-action:none}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) [data-inspector-side=left] .inspector-resize-handle{justify-self:end;transform:translateX(50%)}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .inspector-resize-handle:after{content:"";position:absolute;inset:0 4px;background:transparent}.is-inspector-resizing :is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .inspector-resize-handle:after,:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .inspector-resize-handle:focus-visible:after,:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .inspector-resize-handle:hover:after{background:var(--workspace-selection)}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .inspector-resize-handle:focus-visible{outline:none}.is-inspector-resizing,.is-inspector-resizing *{cursor:col-resize!important;-webkit-user-select:none!important;-moz-user-select:none!important;user-select:none!important}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .customer-detail-layout{container-type:inline-size}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .customer-detail-layout>.detail-main{container-type:inline-size}@container (max-width: 580px){:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .activity-row{grid-template-columns:20px minmax(0,1fr)}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .activity-main{grid-column:2;grid-row:1}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .activity-side{grid-column:1/-1;grid-row:2}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .customer-detail-activity-columns{display:none}}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .detail-attention-section{container-type:inline-size}@container (max-width: 620px){:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .month-overview-grid{grid-template-columns:1fr}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .month-card:not(:first-child){display:none}}}@media (min-width:901px) and (max-width:1320px){:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel){--inspector-top:128px}}.app-shell.has-sidebar:has(:is(#overviewPanel,#billingPanel,#mileagePanel):not([hidden])){padding:0 0 0 var(--sidebar-width)}.app-shell.has-sidebar.is-sidebar-collapsed:has(:is(#overviewPanel,#billingPanel,#mileagePanel):not([hidden])),:root[data-sidebar-collapsed=true] .app-shell.has-sidebar:has(:is(#overviewPanel,#billingPanel,#mileagePanel):not([hidden])){padding-left:var(--sidebar-collapsed-width)}:is(#overviewPanel,#billingPanel,#mileagePanel){display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"topbar" "content";grid-template-rows:auto 1fr;align-items:start;grid-gap:0;gap:0;min-height:100dvh;background:var(--workspace-canvas)}:is(#overviewPanel,#billingPanel,#mileagePanel) .overview-content{display:contents}:is(#overviewPanel,#billingPanel,#mileagePanel) .overview-topbar{display:grid;grid-area:topbar;grid-template-columns:auto minmax(0,1fr);align-items:center;margin:0}:is(#overviewPanel,#billingPanel,#mileagePanel) .overview-topbar h2{font-size:23px;line-height:28px}:is(#overviewPanel,#billingPanel,#mileagePanel) .overview-topbar p{margin:1px 0 0;max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;line-height:13px}:is(#overviewPanel,#billingPanel,#mileagePanel) .overview-head-actions{display:flex;flex-wrap:nowrap;gap:12px;min-width:0;width:100%}:is(#overviewPanel,#billingPanel,#mileagePanel) .overview-search{flex:1 1;width:auto;min-width:0;max-width:none}:is(#overviewPanel,#billingPanel,#mileagePanel) .overview-search input{height:42px;min-height:42px;padding:8px 40px;border:1px solid var(--line);border-radius:7px;background:var(--field-bg);color:var(--text);box-shadow:none;font-size:13px;font-weight:400}:is(#overviewPanel,#billingPanel,#mileagePanel) .overview-search input::placeholder{font-weight:400;font-style:normal}:is(#overviewPanel,#billingPanel,#mileagePanel) .header-utility-group{display:flex;flex:0 0 auto;gap:12px}:is(#overviewPanel,#billingPanel,#mileagePanel) :is(.customer-overview-sort,.service-overview-sort,#headerContextButtonHost){width:auto}:is(#overviewPanel,#billingPanel,#mileagePanel) :is(.service-filter-trigger,#headerContextButton){height:42px;min-height:42px;border-radius:7px;box-shadow:none}:is(#overviewPanel,#billingPanel,#mileagePanel) #headerContextButton{width:auto;padding:8px 12px;background:var(--button-strong-bg);border-color:var(--button-strong-border);color:var(--button-strong-fg);font-size:13px}:is(#overviewPanel,#billingPanel,#mileagePanel) #headerContextButtonLabel{display:inline}:is(#overviewPanel,#billingPanel,#mileagePanel) #customerDashboardGrid{grid-area:content;padding:24px;container-type:inline-size}@media (min-width:901px){:is(#overviewPanel,#billingPanel,#mileagePanel):has(:is(#overviewCustomerDrawerHost,#overviewServiceDrawerHost,#billingInspector,#mileageInspector):not([hidden])){grid-template-columns:minmax(0,1fr) min(460px,45%);grid-template-areas:"topbar topbar" "content inspector"}:is(#overviewPanel,#billingPanel,#mileagePanel) :is(#overviewCustomerDrawerHost,#overviewServiceDrawerHost,#billingInspector,#mileageInspector){grid-area:inspector;position:-webkit-sticky;position:sticky;top:76px;height:calc(100dvh - 76px);min-width:0;margin:0;padding:0;border-left:1px solid var(--line);background:var(--surface)}:is(#overviewPanel,#billingPanel,#mileagePanel) :is(#customerDrawer,#billingStatusModal,#mileageEntryDrawer,#mileageAddressDrawer,#mileagePeriodDrawer):not([hidden]){position:static;width:100%;height:100%;max-height:100%;border:0;box-shadow:none}:is(#overviewPanel,#billingPanel,#mileagePanel) :is(#customerForm,#billingStatusForm){grid-template-columns:minmax(0,1fr)}}@media (max-width:900px){.app-shell.has-sidebar.is-sidebar-collapsed:has(:is(#overviewPanel,#billingPanel,#mileagePanel):not([hidden])),.app-shell.has-sidebar:has(:is(#overviewPanel,#billingPanel,#mileagePanel):not([hidden])),:root[data-sidebar-collapsed=true] .app-shell.has-sidebar:has(:is(#overviewPanel,#billingPanel,#mileagePanel):not([hidden])){padding:12px 0}:is(#overviewPanel,#billingPanel,#mileagePanel) .overview-topbar{position:relative;grid-template-columns:minmax(0,1fr);padding:16px}:is(#overviewPanel,#billingPanel,#mileagePanel) .overview-topbar p{max-width:none;white-space:normal}:is(#overviewPanel,#billingPanel,#mileagePanel) .overview-head-actions{display:grid;grid-template-columns:minmax(0,1fr) auto}:is(#overviewPanel,#billingPanel,#mileagePanel) .overview-search{grid-column:1/-1}:is(#overviewPanel,#billingPanel,#mileagePanel) .header-utility-group{grid-column:1/-1;justify-content:flex-end;width:100%}:is(#overviewPanel,#billingPanel,#mileagePanel) #customerDashboardGrid{padding:16px;grid-template-columns:minmax(0,1fr)}}#serviceDetailPanel .service-detail-topbar{grid-template-columns:auto minmax(150px,190px) minmax(160px,1fr) minmax(180px,240px) auto}#serviceDetailPanel .customer-detail-layout,#serviceDetailPanel .customer-detail-layout:has(.customer-detail-inspector[data-mode=form]){grid-template-areas:"main inspector"}#serviceDetailPanel .customer-detail-layout[data-inspector-side=left],#serviceDetailPanel .customer-detail-layout[data-inspector-side=left]:has(.customer-detail-inspector[data-mode=form]){grid-template-areas:"inspector main"}#serviceDetailPanel .customer-detail-layout>.detail-main{grid-area:main;padding-top:24px;min-width:0}#serviceDetailPanel .detail-main>.section-block>.section-head h2{font-size:16px}#serviceDetailPanel .activity-group-head{grid-template-columns:minmax(0,1fr) auto}#serviceDetailPanel .activity-preview{display:block;-webkit-line-clamp:unset;white-space:pre-wrap}#serviceDetailPanel .activity-tail .activity-date{display:block;grid-column:1}#serviceDetailPanel .activity-side{grid-template-columns:minmax(0,1fr) 52px}#serviceDetailPanel #editServiceCustomerDetailButton{grid-column:1/-1}#serviceDetailPanel :is(#serviceDetailCustomerDrawerHost,#serviceReportDrawerHost){height:100%}#serviceDetailPanel #serviceContractArchive{overflow-y:auto;min-height:0;padding:20px 24px}@media (min-width:901px) and (max-width:1320px){#serviceDetailPanel .service-detail-topbar{grid-template-columns:minmax(0,1fr) minmax(200px,1fr) auto;grid-template-areas:"title customer action" "search period period"}#serviceDetailPanel .service-detail-period-control{grid-area:period}}@media (max-width:900px){#serviceDetailPanel .service-detail-topbar{grid-template-columns:minmax(0,1fr);grid-template-areas:"title" "customer" "search" "period" "action"}#serviceDetailPanel .service-detail-period-control{grid-area:period}#serviceDetailPanel .customer-detail-layout,#serviceDetailPanel .customer-detail-layout:has(.customer-detail-inspector[data-mode=form]),#serviceDetailPanel .customer-detail-layout[data-inspector-side=left],#serviceDetailPanel .customer-detail-layout[data-inspector-side=left]:has(.customer-detail-inspector[data-mode=form]){grid-template-columns:minmax(0,1fr);grid-template-areas:"main" "inspector"}}#billingPanel .overview-topbar p{max-width:none}#billingPanel .billing-content{grid-area:content;display:grid;grid-gap:20px;gap:20px;min-width:0;padding:24px;container:billing-content/inline-size}#billingPanel .billing-month-controls{justify-self:end;margin:0}#billingPanel .portal-month-nav{min-height:42px;border-radius:7px;box-shadow:none}#billingPanel .portal-month-nav-current{font-size:13px}#billingPanel .billing-stat-card{border-radius:10px;box-shadow:none}#billingPanel .billing-stat-card strong{font-size:16px;overflow-wrap:anywhere}#billingPanel .billing-row-preview{white-space:pre-wrap}#billingPanel .billing-row .activity-amount{white-space:nowrap}#billingPanel .billing-status-context-card{overflow-wrap:anywhere}@container billing-content (max-width: 700px){#billingPanel .billing-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}#billingPanel .billing-section-head{flex-wrap:wrap}}@container billing-content (max-width: 520px){#billingPanel .billing-row{grid-template-columns:minmax(0,1fr)}#billingPanel .billing-row .activity-icon{display:none}#billingPanel .billing-row-main{grid-column:1;grid-row:1}#billingPanel .billing-row-side{grid-column:1;grid-row:2;display:flex;align-items:center;flex-wrap:wrap;gap:8px;text-align:left}#billingPanel .billing-row-action{margin:0 0 0 auto;padding:0}#billingPanel .billing-customer-head{align-items:start;flex-direction:column;gap:8px}#billingPanel .billing-customer-head .activity-summary{justify-content:flex-start}}@container form-panel (max-width: 500px){#billingPanel .billing-status-fields{grid-template-columns:minmax(0,1fr)}#billingPanel .billing-status-fields>label{grid-column:auto;grid-row:auto}}@media (max-width:900px){#billingPanel .billing-content{padding:16px}#billingPanel .billing-month-controls{justify-self:stretch;width:100%}#billingPanel :is(.billing-month-host,.portal-month-nav){width:100%}}#mileagePanel .overview-topbar{grid-template-columns:auto minmax(0,1fr) auto}#mileagePanel .mileage-year-toolbar{justify-self:end;gap:0;margin:0}#mileagePanel .mileage-year-toolbar :is(button,input){height:42px;min-height:42px;box-shadow:none;font-size:13px}#mileagePanel #mileagePrevYearButton{margin-right:0;border-right-width:0}#mileagePanel #mileageNextYearButton{margin-left:0;border-left-width:0}#mileagePanel #mileageYearInput{border-inline:1px solid var(--line)}#mileagePanel .mileage-month-head{cursor:pointer;list-style:none}#mileagePanel .mileage-month-head::-webkit-details-marker{display:none}#mileagePanel .mileage-month-head:focus-visible{outline:2px solid var(--line-strong);outline-offset:-3px}#mileagePanel .mileage-month-head .activity-group-title{display:flex;align-items:center;gap:10px}#mileagePanel .mileage-month-chevron{width:14px;height:14px;flex-shrink:0;fill:none;stroke:var(--muted);stroke-width:1.6}#mileagePanel .mileage-month-group[open] .mileage-month-chevron{transform:rotate(90deg)}#mileagePanel .mileage-month-group:not([open])>.mileage-month-head{border-bottom:0}#mileagePanel #mileageNewEntryButton{display:flex;align-items:center;gap:8px;min-height:42px;height:42px;padding:8px 12px;border-radius:7px;font-size:13px}#mileagePanel .mileage-workspace-content{grid-area:content;display:grid;grid-gap:20px;gap:20px;min-width:0;padding:24px;container:mileage-content/inline-size}#mileagePanel .mileage-summary-grid{grid-template-columns:repeat(4,minmax(0,1fr))}#mileagePanel .mileage-stat-card{box-shadow:none;border-radius:10px}#mileagePanel .mileage-stat-card strong{font-size:16px;overflow-wrap:anywhere}#mileagePanel #mileageInspector{padding:0 22px 22px;background:var(--surface);min-width:0}#mileagePanel #mileageInspector[data-mode=default]{overflow-y:auto}#mileagePanel .mileage-address-panel{margin-inline:-22px;padding:0;border:0;border-radius:0;box-shadow:none}#mileagePanel .mileage-address-panel :is(.mileage-side-head,.mileage-address-card,.mileage-address-empty){padding-inline:22px}#mileagePanel .mileage-address-panel h3{font-size:16px}#mileagePanel{grid-template-areas:"topbar" "actions" "content" "inspector";grid-template-rows:auto auto 1fr auto}#mileagePanel .detail-actions-bar{grid-area:actions;width:100%}#mileagePanel #mileageInspector{grid-area:inspector}#mileagePanel #mileageInspector[data-mode=form]{padding:0}#mileagePanel #mileageInspector[data-mode=default] #mileageInspectorDrawerHost{display:none}#mileagePanel #mileageInspectorDrawerHost{height:100%}#mileagePanel #mileageInspector .drawer-card>form{grid-template-columns:minmax(0,1fr)}#mileagePanel .mileage-entry-form :is(.mileage-period-field,.mileage-date-fields){grid-column:1;grid-row:auto}#mileagePanel .mileage-address-list{overflow-wrap:anywhere}@media (min-width:901px){#mileagePanel:has(#mileageInspector:not([hidden])){grid-template-columns:minmax(0,1fr) 340px;grid-template-areas:"topbar topbar" "actions actions" "content inspector";grid-template-rows:auto auto 1fr}#mileagePanel:has(#mileageInspector[data-mode=form]){grid-template-columns:minmax(0,1fr) min(560px,53%)}#mileagePanel #mileageInspector{top:128px;height:calc(100dvh - 128px);max-height:calc(100dvh - 128px)}#mileagePanel #mileageInspector[data-mode=form]{overflow:hidden}}@container mileage-content (max-width: 750px){#mileagePanel .mileage-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}#mileagePanel .mileage-month-head{flex-wrap:wrap}#mileagePanel .mileage-month-head .activity-summary{justify-content:flex-start}}@container form-panel (max-width: 560px){#mileageEntryDrawer .mileage-stop-item{grid-template-columns:24px minmax(0,1fr) auto;gap:8px;padding-block:10px}#mileageEntryDrawer .mileage-stop-item>:is(label,input[type=text]){grid-column:2/-1;grid-row:2;min-width:0;width:100%}#mileageEntryDrawer .mileage-stop-item>.inline-action{grid-column:3;grid-row:1}#mileageEntryDrawer .mileage-stop-item>select{grid-column:2;grid-row:1;min-width:0;width:100%}#mileageEntryDrawer .mileage-stop-item>[data-mileage-route-address-id]{grid-column:2/-1;grid-row:2}#mileageEntryDrawer .mileage-stop-item>label>:is(input,select){grid-column:auto;min-width:0}}@media (max-width:900px){#mileagePanel .overview-topbar{grid-template-columns:minmax(0,1fr)}#mileagePanel .mileage-year-toolbar{justify-self:start}#mileagePanel .mileage-workspace-content{padding:16px}#mileagePanel #mileageInspector{border-top:1px solid var(--line)}}#mileageDetailPanel .mileage-detail-topbar{grid-template-columns:auto minmax(0,1fr);grid-template-areas:none}#mileageDetailPanel .mileage-detail-topbar>*{grid-area:auto}#mileageDetailPanel #mileageBackButton{margin:0;min-height:42px;height:42px;padding:8px 12px;border-radius:7px;font-size:13px}#mileageDetailPanel .customer-detail-layout{grid-template-areas:"main inspector"}#mileageDetailPanel .customer-detail-layout>.detail-main{padding:24px;container:mileage-detail-content/inline-size}#mileageDetailPanel #mileageDetailGrid{grid-template-columns:minmax(0,1fr);gap:20px}#mileageDetailPanel #mileageDetailGrid .detail-card{min-width:0;border-radius:10px;box-shadow:none}@container mileage-detail-content (min-width: 720px){#mileageDetailPanel #mileageDetailGrid{grid-template-columns:minmax(0,2fr) minmax(0,3fr)}}#mileageDetailPanel .mileage-detail-hero{display:grid;grid-template-columns:minmax(0,1fr);grid-gap:20px;gap:20px}#mileageDetailPanel .mileage-detail-hero h2{white-space:pre-wrap}#mileageDetailPanel .mileage-detail-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-gap:10px;gap:10px;margin-top:12px}#mileageDetailPanel .mileage-detail-stats>div{display:grid;grid-gap:6px;gap:6px;padding:12px;border:1px solid var(--line);border-radius:10px;min-width:0}#mileageDetailPanel .mileage-detail-stats dt{color:var(--muted);font-size:12px}#mileageDetailPanel .mileage-detail-stats dd{margin:0;font-size:15px;font-weight:700;overflow-wrap:anywhere}#mileageDetailPanel .mileage-entry-form :is(.mileage-period-field,.mileage-date-fields){grid-column:1;grid-row:auto}#mileageDetailPanel .mileage-waypoint-row :is(strong,small){overflow-wrap:anywhere}@media (min-width:901px){#mileageDetailPanel{--inspector-top:128px}#mileageDetailPanel .customer-detail-inspector{top:var(--inspector-top);min-height:calc(100dvh - var(--inspector-top));max-height:calc(100dvh - var(--inspector-top))}#mileageDetailPanel .customer-detail-layout[data-inspector-side=left],#mileageDetailPanel .customer-detail-layout[data-inspector-side=left]:has(.customer-detail-inspector[data-mode=form]){grid-template-areas:"inspector main"}}@media (max-width:900px){#mileageDetailPanel .mileage-detail-topbar{grid-template-columns:auto minmax(0,1fr)}#mileageDetailPanel .customer-detail-layout,#mileageDetailPanel .customer-detail-layout:has(.customer-detail-inspector[data-mode=form]){grid-template-areas:"main" "inspector"}#mileageDetailPanel .customer-detail-layout>.detail-main{padding:16px}}@media (min-width:901px){:is(#detailPanel,#serviceDetailPanel){--detail-header-height:76px;--inspector-top:calc(var(--detail-header-height) + 52px)}:is(#detailPanel,#serviceDetailPanel) .customer-detail-topbar{min-height:var(--detail-header-height)}:is(#detailPanel,#serviceDetailPanel) .customer-detail-inspector{top:var(--inspector-top);min-height:calc(100dvh - var(--inspector-top));max-height:calc(100dvh - var(--inspector-top))}}@media (min-width:901px) and (max-width:1320px){:is(#detailPanel,#serviceDetailPanel){--detail-header-height:128px}}#boardPanel .board-detail-topbar{display:grid;grid-template-columns:minmax(0,1fr) minmax(160px,240px) auto;grid-template-areas:none;margin:0}#boardPanel .board-detail-topbar>*{grid-area:auto;min-width:0}:is(#boardPanel,#detailPanel,#serviceDetailPanel,#mileagePanel,#mileageDetailPanel) .detail-actions-bar{position:-webkit-sticky;position:sticky;top:var(--detail-header-height,76px);z-index:39;height:52px;padding:7px 24px;border-bottom:1px solid var(--line);background:var(--surface-soft)}:is(#boardPanel,#detailPanel,#serviceDetailPanel,#mileagePanel,#mileageDetailPanel) .detail-actions-menu{position:relative}:is(#boardPanel,#detailPanel,#serviceDetailPanel,#mileagePanel,#mileageDetailPanel) .detail-actions-menu>summary{display:none}:is(#boardPanel,#detailPanel,#serviceDetailPanel,#mileagePanel,#mileageDetailPanel) .detail-actions-buttons{display:flex;justify-content:flex-end;gap:8px;background:var(--surface-soft)}:is(#boardPanel,#detailPanel,#serviceDetailPanel,#mileagePanel,#mileageDetailPanel) .detail-actions-buttons button{display:flex;align-items:center;justify-content:center;gap:6px;min-height:36px;height:36px;padding:6px 10px;border:1px solid var(--line);border-radius:7px;background:var(--surface);color:var(--text);font-size:12px;box-shadow:none;white-space:nowrap}:is(#boardPanel,#detailPanel,#serviceDetailPanel,#mileagePanel,#mileageDetailPanel) .detail-actions-buttons button:hover:not(:disabled){background:var(--surface-soft)}:is(#boardPanel,#detailPanel,#serviceDetailPanel,#mileagePanel,#mileageDetailPanel) .detail-actions-buttons button.danger-button{color:var(--danger)}:is(#boardPanel,#detailPanel,#serviceDetailPanel,#mileagePanel,#mileageDetailPanel) .detail-actions-buttons button:disabled{opacity:.5;cursor:not-allowed}:is(#boardPanel,#detailPanel,#serviceDetailPanel,#mileagePanel,#mileageDetailPanel) .detail-actions-buttons .header-create-icon{width:16px;height:16px}:is(#boardPanel,#detailPanel,#serviceDetailPanel,#mileagePanel,#mileageDetailPanel) .detail-actions-buttons .header-create-icon svg{width:16px;height:16px}#boardPanel #boardSectionTitle{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#boardPanel .board-actions-bar{display:flex;align-items:center;gap:12px}#boardPanel .board-actions-menu{flex:1 1;min-width:0}#boardPanel .board-save-feedback{display:flex;align-items:center;flex-wrap:wrap;gap:6px;min-width:0;font-size:11px;color:var(--muted)}#boardPanel .board-save-feedback .inline-action{font-size:11px}#boardPanel #boardSaveStatus:is([data-phase=error],[data-phase=conflict]){color:var(--danger)}@media (max-width:900px){#boardPanel .board-actions-bar{display:block}#boardPanel .board-save-feedback{position:absolute;left:16px;top:8px;max-width:calc(100% - 160px);min-height:40px;align-content:center}}#boardPanel #headerContextButton{display:flex;align-items:center;gap:8px;width:auto;height:42px;min-height:42px;padding:8px 12px;border-radius:7px;background:var(--button-strong-bg);border-color:var(--button-strong-border);color:var(--button-strong-fg);font-size:13px;box-shadow:none}#boardPanel #headerContextButtonLabel{display:inline}#boardPanel .customer-detail-layout{grid-template-areas:"main inspector";min-width:0}#boardPanel .customer-detail-layout>.detail-main{padding:24px;min-width:0;overflow:hidden}#boardPanel .board-scroll-area{min-width:0}#boardPanel #boardColumns{height:auto;min-height:calc(100dvh - 130px);overflow:auto}#boardPanel .board-column{min-width:0;border-radius:10px;box-shadow:none}#boardPanel .board-inspector-info{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}#boardPanel .board-inspector-info h3{margin:0;overflow-wrap:anywhere}#boardPanel #boardSectionSubtitle{color:var(--muted);font-size:13px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}#boardPanel .board-inspector-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-gap:10px;gap:10px;margin-block:16px}#boardPanel .board-inspector-stats>div{display:grid;grid-gap:6px;gap:6px;padding:12px;min-width:0;border:1px solid var(--line);border-radius:10px}#boardPanel .board-inspector-stats dt{color:var(--muted);font-size:12px}#boardPanel .board-inspector-stats dd{margin:0;font-size:16px;font-weight:700}#boardPanel #boardCustomerNavigationHost :is(a,label,select){width:100%;min-width:0}#boardPanel #boardCustomerNavigationHost :is(a,select){min-height:40px;border-radius:7px;box-shadow:none;font-size:13px}#boardPanel .board-label-manager{min-height:0;flex:1 1;overflow:auto;padding:24px}#boardPanel .board-label-form{grid-template-columns:minmax(0,1fr)}#boardPanel .board-label-form .form-actions{margin:12px 0 0;padding-inline:0}#boardPanel .board-drawer-form :is(input,select,textarea){min-width:0}@container form-panel (max-width: 560px){#boardCardDrawer :is(.board-reminder-grid,.board-reminder-custom){grid-template-columns:minmax(0,1fr)}#boardCardDrawer .board-form-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}#boardCardDrawer .board-form-actions>*{min-width:0;width:100%}#boardCardDrawer .board-form-actions>.danger-button{grid-column:1/-1;margin-left:0}#boardCardDrawer .board-form-actions>:is(#duplicateBoardCardButton,#archiveBoardCardButton){grid-column:auto}}#boardCardDrawer .board-rich-text-editor{height:220px;min-height:140px;max-height:none;overflow:auto;resize:vertical}#boardCardDrawer .board-rich-text-content{min-height:100%}#boardCardAttachmentDraft{min-width:0;container:board-files/inline-size}#boardCardAttachmentDraft .attachment-chip{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-gap:10px;gap:10px}#boardCardAttachmentDraft .attachment-chip-main{display:flex;align-items:center;gap:10px;min-width:0}#boardCardAttachmentDraft .board-card-image-thumbnail{width:36px;height:36px;flex-shrink:0}#boardCardAttachmentDraft .board-attachment-copy{display:grid;grid-gap:2px;gap:2px;min-width:0;overflow-wrap:anywhere}#boardCardAttachmentDraft .attachment-chip-actions{gap:4px 12px}#boardCardAttachmentDraft .attachment-chip-actions button{min-height:32px;white-space:nowrap}@container board-files (max-width: 400px){#boardCardAttachmentDraft .attachment-chip{grid-template-columns:minmax(0,1fr)}#boardCardAttachmentDraft .attachment-chip-actions{justify-content:flex-start}}@media (max-width:900px){#boardCardAttachmentDraft .attachment-chip-actions button{min-height:40px}}@media (min-width:901px){#boardPanel{--inspector-top:128px}#boardPanel .customer-detail-layout>.detail-main{height:calc(100dvh - var(--inspector-top));min-height:0;padding:24px 0 12px 24px}#boardPanel .board-scroll-area{height:100%;overflow:hidden}#boardPanel #boardColumns{height:100%;min-height:0;padding-right:24px;scrollbar-color:var(--line-strong) var(--surface-soft)}#boardPanel #boardColumns::-webkit-scrollbar{width:12px;height:12px}#boardPanel #boardColumns::-webkit-scrollbar-track{background:var(--surface-soft)}#boardPanel #boardColumns::-webkit-scrollbar-thumb{background:var(--line-strong);border:3px solid var(--surface-soft);border-radius:8px}#boardPanel .customer-detail-inspector{top:var(--inspector-top);min-height:calc(100dvh - var(--inspector-top));max-height:calc(100dvh - var(--inspector-top))}#boardPanel .customer-detail-layout[data-inspector-side=left],#boardPanel .customer-detail-layout[data-inspector-side=left]:has(.customer-detail-inspector[data-mode=form]){grid-template-areas:"inspector main"}}@media (max-width:900px){:is(#boardPanel,#detailPanel,#serviceDetailPanel,#mileagePanel,#mileageDetailPanel) .detail-actions-bar{position:relative;top:auto;z-index:41;height:auto;padding:8px 16px}:is(#boardPanel,#detailPanel,#serviceDetailPanel,#mileagePanel,#mileageDetailPanel) .detail-actions-menu>summary{display:flex;align-items:center;justify-content:center;gap:8px;width:max-content;min-height:40px;-webkit-margin-start:auto;margin-inline-start:auto;padding:8px 12px;border:1px solid var(--line);border-radius:7px;background:var(--surface);cursor:pointer;font-size:13px;font-weight:600;list-style:none}:is(#boardPanel,#detailPanel,#serviceDetailPanel,#mileagePanel,#mileageDetailPanel) .detail-actions-menu>summary::-webkit-details-marker{display:none}:is(#boardPanel,#detailPanel,#serviceDetailPanel,#mileagePanel,#mileageDetailPanel) .detail-actions-menu>summary svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6}:is(#boardPanel,#detailPanel,#serviceDetailPanel,#mileagePanel,#mileageDetailPanel) .detail-actions-menu[open]>summary svg{transform:rotate(180deg)}:is(#boardPanel,#detailPanel,#serviceDetailPanel,#mileagePanel,#mileageDetailPanel) .detail-actions-buttons{position:absolute;top:calc(100% + 6px);left:auto;right:0;display:grid;justify-content:stretch;grid-gap:4px;gap:4px;width:min(260px,100%);padding:6px;border:1px solid var(--line);border-radius:8px;background:var(--surface-soft);box-shadow:0 8px 24px rgb(7 29 59/14%)}:is(#boardPanel,#detailPanel,#serviceDetailPanel,#mileagePanel,#mileageDetailPanel) .detail-actions-buttons button{justify-content:flex-start;width:100%;min-height:40px;height:40px;border-color:transparent;font-size:13px}#boardPanel .board-detail-topbar{grid-template-columns:minmax(0,1fr) auto}#boardPanel .board-detail-topbar .customer-detail-title{grid-column:1/-1}#boardPanel .customer-detail-layout,#boardPanel .customer-detail-layout:has(.customer-detail-inspector[data-mode=form]){grid-template-areas:"main" "inspector"}#boardPanel .customer-detail-layout>.detail-main{padding:16px}#boardPanel #boardColumns{min-height:0}}#overviewPanel .customer-dashboard-region{grid-area:content;min-width:0;container:customer-overview/inline-size}#overviewPanel :is(#customerDashboardGrid,#discontinuedServicesGrid){width:100%;max-width:2400px;margin-inline:auto;grid-template-columns:repeat(var(--overview-columns,1),minmax(0,1fr));align-content:start}#overviewPanel .service-discontinued-section{max-width:2400px;margin-inline:auto;padding:0 24px 24px}#overviewPanel .service-discontinued-section details{border:1px solid var(--line);border-radius:9px;overflow:hidden;background:var(--surface)}#overviewPanel .service-discontinued-section summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px;background:var(--surface-soft);cursor:pointer;list-style:none}#overviewPanel .service-discontinued-section summary::-webkit-details-marker{display:none}#overviewPanel .service-discontinued-section summary:focus-visible{outline:2px solid var(--workspace-selection);outline-offset:-2px}#overviewPanel .service-discontinued-section summary h3{margin:0;font-size:15px}#overviewPanel #discontinuedServicesCount{margin-left:6px;color:var(--muted);font-size:12px;font-weight:600}#overviewPanel .service-discontinued-section summary svg{width:16px;height:16px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.6}#overviewPanel .service-discontinued-section details[open] summary svg{transform:rotate(90deg)}#overviewPanel .service-discontinued-content{padding:20px 16px}#overviewPanel .service-discontinued-content p{margin:0;color:var(--muted);font-size:13px}#overviewPanel .service-discontinued-empty{grid-column:1/-1}.app-shell .status-pill.is-discontinued{background:#000;color:#fff}@media (max-width:900px){#overviewPanel .service-discontinued-section{padding:0 16px 16px}}#overviewPanel .customer-dashboard-card{min-width:0;container:overview-card/inline-size}#overviewPanel .dashboard-card-head{flex-wrap:wrap}#overviewPanel .dashboard-card-head>div{flex:1 1 180px;min-width:0}#overviewPanel .dashboard-card-head h3,#overviewPanel :is(.dashboard-rate,.dashboard-special,.dashboard-footer){overflow-wrap:anywhere}#overviewPanel .dashboard-card-head .status-pill{max-width:100%;white-space:normal}#overviewPanel .service-dashboard-card .dashboard-mini-stats{grid-template-columns:repeat(2,minmax(0,1fr))}#overviewPanel .service-dashboard-card .dashboard-mini-card:first-child{grid-column:1;grid-row:1}#overviewPanel .service-dashboard-card .dashboard-mini-card:nth-child(2){grid-column:1/-1;grid-row:2}#overviewPanel .service-dashboard-card .dashboard-mini-card:nth-child(3){grid-column:2;grid-row:1}@container customer-overview (min-width: 720px){#overviewPanel :is(#customerDashboardGrid,#discontinuedServicesGrid){--overview-columns:2}}@container customer-overview (min-width: 1280px){#overviewPanel :is(#customerDashboardGrid,#discontinuedServicesGrid){--overview-columns:3}}@container customer-overview (min-width: 2000px){#overviewPanel :is(#customerDashboardGrid,#discontinuedServicesGrid){--overview-columns:4}}@container overview-card (max-width: 520px){#overviewPanel .customer-dashboard-card .dashboard-mini-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:480px){#overviewPanel .service-dashboard-card .dashboard-card-head>div{flex-basis:auto}}@container overview-card (max-width: 280px){#overviewPanel .customer-dashboard-card .dashboard-mini-stats{grid-template-columns:minmax(0,1fr)}#overviewPanel .service-dashboard-card .dashboard-mini-card:nth-child(n){grid-column:auto;grid-row:auto}}#billingPanel #billingStatusContext,#mileagePanel #mileageInspectorOverview,:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .detail-inspector-default{font-size:var(--inspector-font-body);line-height:1.5}#billingPanel #billingStatusContext .billing-status-context-card>strong,#mileagePanel #mileageInspectorOverview .mileage-address-card strong,:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .detail-inspector-default :is(.customer-hero h2,.board-inspector-info h3,.metric-value,.board-inspector-stats dd,.mileage-detail-stats dd){font-size:var(--inspector-font-title);line-height:1.35;overflow-wrap:anywhere}#mileagePanel #mileageInspectorOverview .mileage-side-head h3,:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .detail-inspector-default :is(.detail-inspector-head h2,.detail-inspector-section h3,.detail-inspector-actions h3,.detail-title){font-size:var(--inspector-font-heading);line-height:1.35}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .detail-inspector-default .detail-title{overflow-wrap:anywhere}#billingPanel #billingStatusContext .billing-status-context-card>span,#mileagePanel #mileageInspectorOverview :is(.mileage-address-card span,.mileage-address-empty),:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .detail-inspector-default :is(.customer-meta,.detail-copy,.metric-label,.progress-head,.progress-head strong,.board-inspector-stats dt,.mileage-detail-stats dt,#boardSectionSubtitle){font-size:var(--inspector-font-body);line-height:1.5}:is(#detailPanel,#serviceDetailPanel,#mileageDetailPanel,#boardPanel) .detail-inspector-default :is(.detail-inspector-head p,.metric-note,.detail-label,.drawer-kicker,.customer-board-link){font-size:var(--inspector-font-note);line-height:1.5}