/* Global appearance roles. Loaded after page CSS so every page uses the same typography and palette. */
:root {
    --cbs-font-family:'Segoe UI',Arial,sans-serif;
    --cbs-font-primary:calc(13px * var(--cbs-font-scale,1));
    --cbs-font-secondary:calc(11.5px * var(--cbs-font-scale,1));
    --cbs-font-label:calc(11px * var(--cbs-font-scale,1));
    --cbs-font-group:calc(11px * var(--cbs-font-scale,1));
    --cbs-font-title:calc(18px * var(--cbs-font-scale,1));
    --cbs-shell-duration:280ms;
}
html, body { color:var(--cbs-text); background:var(--cbs-bg); font-family:var(--cbs-font-family); font-size:var(--cbs-font-primary); }
html .cbs-app-body input, .cbs-app-body select, .cbs-app-body textarea, .cbs-app-body button, .cbs-app-body table { font-family:var(--cbs-font-family); }
html .cbs-app-body :is(.cbs-app-main,.cbs-sidebar,.cbs-app-header,.cbs-theme-panel) { font-family:var(--cbs-font-family); color:var(--cbs-text); }
html .cbs-app-body :is(.cbs-nav-text,.cbs-center-links strong,.cbs-user-copy strong,.cbs-client-copy strong,.cbs-direct-description,.cbs-standard-search-input,.cbs-customer-search-input,.cbs-direct-select,.cbs-direct-filter-input,.cbs-toolbar-check,.cbs-customer-name,.cbs-customer-contact-name,.cbs-data-cell,.cbs-data-cell strong,.cbs-data-primary-link,.cbs-detail-tab,.cbs-detail-info-card strong,.cbs-trip-link strong,.cbs-inline-editor-head strong,.cbs-split-panel-head strong,.cbs-inline-form-grid input,.cbs-inline-form-grid textarea,.cbs-record-copy strong,.cbs-center-card-title strong,.cbs-center-card-stat strong,.cbs-dashboard-panel-head strong,.cbs-button) {
    font-size:var(--cbs-font-primary); color:var(--cbs-text);
}
html .cbs-app-body :is(.cbs-center-links small,.cbs-user-copy small,.cbs-client-copy small,.cbs-customer-secondary,.cbs-customer-contact-line,.cbs-data-cell small,.cbs-row-customer-copy small,.cbs-detail-info-card small,.cbs-trip-link small,.cbs-inline-editor-head small,.cbs-split-panel-head small,.cbs-record-copy span,.cbs-empty-state p,.cbs-detail-placeholder p,.cbs-home-head p,.cbs-filter-chip,.cbs-overview-kpi small,.cbs-center-card-title small,.cbs-dashboard-panel-head span,.cbs-dashboard-list-row,.cbs-dashboard-list-row small,.cbs-dashboard-list-row a,.cbs-quick-actions a,.cbs-page-subtitle,.cbs-theme-head small) {
    font-size:var(--cbs-font-secondary); color:var(--cbs-text-2);
}
html .cbs-app-body :is(.cbs-data-grid-header>div,.cbs-customer-band,.cbs-direct-result-meta,.cbs-customer-value-line small,.cbs-customer-money-line small,.cbs-status-pill,.cbs-customer-age,.cbs-theme-label,.cbs-app-footer) { font-size:var(--cbs-font-label); }
html .cbs-app-body :is(.cbs-page-title,.cbs-home-head h1,.cbs-page-head h1,.cbs-module-placeholder-card h1) { font-size:var(--cbs-font-title); color:var(--cbs-text); }
html .cbs-app-body .cbs-global-search input { font-size:var(--cbs-font-primary); }
html .cbs-app-body .cbs-center-panel-head strong { font-size:var(--cbs-font-primary); color:var(--cbs-accent); }
html .cbs-app-body .cbs-center-panel-head small { font-size:var(--cbs-font-label); color:var(--cbs-text-2); }
html .cbs-app-body .cbs-nav-group-title { font-size:var(--cbs-font-group); color:var(--cbs-accent); }
html .cbs-app-body .cbs-button-primary { color:#fff; background:var(--cbs-accent-strong); }
html .cbs-app-body :is(.cbs-sidebar,.cbs-sidebar-main,.cbs-center-panel) { background:var(--cbs-sidebar); border-color:var(--cbs-border); }
html .cbs-app-body .cbs-sidebar-main { background:transparent; }
html .cbs-app-body .cbs-app-header { background:linear-gradient(115deg,var(--cbs-header),var(--cbs-surface-2)); border-color:var(--cbs-accent-border); box-shadow:inset 0 -1px 0 var(--cbs-border); }
html .cbs-app-body .cbs-app-footer { background:var(--cbs-footer); border-color:var(--cbs-accent-border); box-shadow:none; }
html .cbs-app-body :is(.cbs-global-search,.cbs-icon-button,.cbs-user-box) { border-color:var(--cbs-border); }
html .cbs-app-body :is(.cbs-overview-kpi,.cbs-dashboard-center-card,.cbs-direct-grid-card,.cbs-detail-info-card,.cbs-direct-toolbar,.cbs-detail-toolbar,.cbs-standard-table-card,.cbs-theme-panel) { background:var(--cbs-surface); border-color:var(--cbs-border); border-radius:var(--cbs-radius); }
html .cbs-app-body :is(.cbs-nav-entry:hover,.cbs-center-links>a:hover,.cbs-direct-grid-row:hover,.cbs-data-grid-row:hover) { background:var(--cbs-accent-faint); border-color:var(--cbs-accent-border); }
html .cbs-app-body :is(.cbs-nav-entry.is-active,.cbs-center-links>a.is-active,.cbs-center-links>a[aria-current='page']) { background:var(--cbs-accent-soft); border-color:var(--cbs-accent-border); }
html .cbs-app-body .cbs-center-links>a.is-active small { color:var(--cbs-text-2); }
html .cbs-app-body .cbs-app-header-actions .cbs-header-quick-add, .cbs-app-body .cbs-action-badge { color:#fff; background:var(--cbs-accent-strong); }
html .cbs-app-body .cbs-user-avatar { color:var(--cbs-accent); background:var(--cbs-accent-faint); }
html .cbs-app-body .cbs-center-back { font-size:var(--cbs-font-primary); }
html .cbs-app-body .cbs-quick-actions-title { color:var(--cbs-accent); font-size:var(--cbs-font-group); }
.cbs-theme-font-select { width:100%; min-height:40px; padding:0 10px; border:1px solid var(--cbs-border); border-radius:8px; color:var(--cbs-text); background:var(--cbs-input); font:inherit; font-size:var(--cbs-font-primary); }
html .cbs-app-body .cbs-theme-label { display:block; }
.cbs-theme-reset { width:100%; margin-top:16px; min-height:38px; border:1px solid var(--cbs-accent-border); border-radius:8px; color:var(--cbs-accent); background:var(--cbs-accent-faint); font:inherit; cursor:pointer; }
html .cbs-app-body .cbs-theme-panel { max-height:calc(100dvh - var(--cbs-header-height) - 24px); overflow-y:auto; overscroll-behavior:contain; }
html .cbs-app-body .cbs-nav-entry:focus-visible, .cbs-app-body .cbs-nav-group-title:focus-visible { outline:2px solid var(--cbs-accent); outline-offset:-2px; }
html .cbs-app-body :is(.cbs-money-negative,.cbs-open-balance.is-due,.cbs-inline-alert-danger,.cbs-status-pill.is-suspended) { color:var(--cbs-danger); border-color:color-mix(in srgb,var(--cbs-danger) 45%,var(--cbs-border)); background:var(--cbs-danger-soft); }
html .cbs-app-body :is(.cbs-status-pill.is-approved,.cbs-open-balance.is-credit) { color:var(--cbs-success); border-color:color-mix(in srgb,var(--cbs-success) 40%,var(--cbs-border)); background:var(--cbs-success-soft); }
html .cbs-app-body .cbs-status-pill.is-pending { color:var(--cbs-warning); border-color:color-mix(in srgb,var(--cbs-warning) 40%,var(--cbs-border)); background:var(--cbs-warning-soft); }
html .cbs-app-body .cbs-status-pill.is-reviewing { color:var(--cbs-accent); border-color:var(--cbs-accent-border); background:var(--cbs-accent-faint); }
@media (max-width:560px) { .cbs-app-body input, .cbs-app-body select, .cbs-app-body textarea { font-size:max(16px,var(--cbs-font-primary)) !important; } }


/* =========================================================
   SHARED GRID CONTRACT v20261006_03
   One visual language for every list/grid across the website.
   Font sizing comes only from WebsiteAppearance variables.
========================================================= */
:root{
    --cbs-grid-header-height:calc(42px * var(--cbs-font-scale,1));
    --cbs-grid-row-height:calc(72px * var(--cbs-font-scale,1));
    --cbs-grid-cell-x:10px;
    --cbs-grid-cell-y:7px;
}
html .cbs-app-body :is(.cbs-direct-grid-header,.cbs-data-grid-header,.cbs-customer-grid-header){
    min-height:var(--cbs-grid-header-height)!important;
    color:#fff!important;
    background:linear-gradient(135deg,
        color-mix(in srgb,var(--cbs-accent-strong) 58%,#111827),
        color-mix(in srgb,var(--cbs-accent-strong) 34%,#0b1220))!important;
    border-color:color-mix(in srgb,var(--cbs-accent) 38%,var(--cbs-border))!important;
    box-shadow:inset 0 -1px 0 rgba(255,255,255,.08),0 4px 12px rgba(0,0,0,.10)!important;
    font-family:var(--cbs-font-family)!important;
    font-size:var(--cbs-font-label)!important;
    font-weight:900!important;
    letter-spacing:.045em!important;
    text-transform:uppercase!important;
}
html .cbs-app-body :is(.cbs-direct-grid-header,.cbs-data-grid-header,.cbs-customer-grid-header)>*{
    color:#fff!important;
    font-size:var(--cbs-font-label)!important;
    font-weight:900!important;
}
html .cbs-app-body :is(.cbs-direct-grid-row,.cbs-data-grid-row,.cbs-customer-row){
    min-height:var(--cbs-grid-row-height)!important;
    color:var(--cbs-text-2)!important;
    font-family:var(--cbs-font-family)!important;
    font-size:var(--cbs-font-primary)!important;
    border-color:var(--cbs-border-soft)!important;
    background:var(--cbs-surface)!important;
}
html .cbs-app-body :is(.cbs-direct-grid-row,.cbs-data-grid-row,.cbs-customer-row):nth-child(even){
    background:color-mix(in srgb,var(--cbs-surface) 91%,var(--cbs-accent) 9%)!important;
}
html .cbs-app-body :is(.cbs-direct-grid-row,.cbs-data-grid-row,.cbs-customer-row):nth-child(odd){
    background:var(--cbs-surface)!important;
}
html .cbs-app-body :is(.cbs-direct-grid-row,.cbs-data-grid-row,.cbs-customer-row):hover{
    background:color-mix(in srgb,var(--cbs-accent) 10%,var(--cbs-surface))!important;
    box-shadow:inset 4px 0 0 var(--cbs-accent),0 8px 20px color-mix(in srgb,var(--cbs-accent-glow) 45%,transparent)!important;
}
html .cbs-app-body :is(.cbs-data-cell,.cbs-customer-cell,.pm-cell){
    padding:var(--cbs-grid-cell-y) var(--cbs-grid-cell-x)!important;
    color:var(--cbs-text-2)!important;
    font-family:var(--cbs-font-family)!important;
    font-size:var(--cbs-font-primary)!important;
}
html .cbs-app-body :is(.cbs-data-cell,.cbs-customer-cell,.pm-cell) strong{
    color:var(--cbs-text)!important;
    font-size:var(--cbs-font-primary)!important;
    font-weight:850!important;
}
html .cbs-app-body :is(.cbs-data-cell,.cbs-customer-cell,.pm-cell) :is(small,.pm-secondary,.pm-muted){
    font-size:var(--cbs-font-secondary)!important;
}
html .cbs-app-body :is(.cbs-status-pill,.pm-pill){font-size:var(--cbs-font-label)!important}
.cbs-grid-sticky-stack{
    position:sticky;
    top:var(--cbs-shell-top,var(--cbs-header-height));
    z-index:85;
    display:grid;
    gap:0;
    padding:0 0 1px;
    background:var(--cbs-bg);
}
.cbs-grid-sticky-stack>.cbs-direct-toolbar{position:relative!important;top:auto!important;z-index:2!important;margin-bottom:0!important;border-radius:10px 10px 0 0!important}
.cbs-grid-sticky-stack>.cbs-direct-grid-header{position:relative!important;top:auto!important;z-index:1!important;border-radius:0!important}
@media(max-width:1000px){.cbs-grid-sticky-stack{position:static}}

html .cbs-app-body :is(.cbs-data-thumb,.cbs-customer-image,.cbs-row-customer-avatar,.pm-product-image,.pm-image-preview,.pm-editor-image){
    background:#fff url('/Images/no-image.png') center/contain no-repeat!important;
}


/* =========================================================
   DESIGN SYSTEM EXTENSIONS v20261007_01
   Animated background controls + shared surface roles.
   ========================================================= */
:root {
    --cbs-radius-sm:8px;
    --cbs-radius-lg:14px;
    --cbs-surface-glow-strength:1;
}
.cbs-background-modes { grid-template-columns:repeat(2,minmax(0,1fr)); }
.cbs-background-modes button,.cbs-background-intensity button { position:relative; }
.cbs-background-modes button.is-active,.cbs-background-intensity button.is-active {
    color:var(--cbs-accent);
    border-color:var(--cbs-accent-border);
    background:var(--cbs-accent-faint);
    box-shadow:0 0 12px color-mix(in srgb,var(--cbs-accent-glow) 55%,transparent);
}
.cbs-motion-sample { width:18px; height:8px; display:inline-block; border-radius:999px; background:color-mix(in srgb,var(--cbs-accent) 45%,var(--cbs-border)); }
.cbs-motion-sample.is-animated { position:relative; overflow:hidden; }
.cbs-motion-sample.is-animated::after { content:""; position:absolute; top:0; bottom:0; width:8px; border-radius:999px; background:var(--cbs-accent); animation:cbsMotionSample 1.2s ease-in-out infinite alternate; }
@keyframes cbsMotionSample { from { left:0; } to { left:10px; } }
.cbs-intensity-sample { width:22px; height:8px; display:inline-block; border-radius:999px; background:var(--cbs-accent); box-shadow:0 0 8px var(--cbs-accent-glow); }
.cbs-intensity-sample.is-low { opacity:.35; }.cbs-intensity-sample.is-medium { opacity:.68; }.cbs-intensity-sample.is-high { opacity:1; }
@media(prefers-reduced-motion:reduce){.cbs-motion-sample.is-animated::after{animation:none!important;left:5px}}


/* =========================================================
   SETTINGS-CONTROLLED SHARED COMPONENT TOKENS v20261007_02
   ========================================================= */
:root {
    --cbs-page-gap:12px;
    --cbs-modal-width:720px;
    --cbs-modal-backdrop-opacity:.68;
    --cbs-drawer-width:440px;
    --cbs-drawer-backdrop-opacity:.58;
    --cbs-control-height:40px;
    --cbs-surface-glow-blur:14px;
}
.cbs-theme-mode-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
@media(max-width:420px) { .cbs-theme-mode-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }

html .cbs-app-body :is(.cbs-overview-kpi:hover,.cbs-dashboard-center-card:hover,.cbs-detail-info-card:hover,.cbs-direct-grid-row:hover,.cbs-data-grid-row:hover) {
    box-shadow:0 0 var(--cbs-surface-glow-blur,14px) color-mix(in srgb,var(--cbs-accent-glow) 42%,transparent);
}


/* =========================================================
   APPEARANCE PANEL REFINEMENT v20261007_08
   Cleaner control groups, fixed 4-mode layout, softer active states.
   ========================================================= */
.cbs-theme-panel {
    width:min(348px,calc(100vw - 24px)) !important;
    padding:14px !important;
    display:block !important;
    visibility:hidden;
    pointer-events:none;
    opacity:0;
    transform:translateY(-8px) scale(.985);
    transform-origin:top right;
    border:1px solid color-mix(in srgb,var(--cbs-accent) 34%,var(--cbs-border)) !important;
    border-radius:16px !important;
    background:
        linear-gradient(180deg,
            color-mix(in srgb,var(--cbs-surface) 96%,var(--cbs-accent) 4%),
            var(--cbs-surface)) !important;
    box-shadow:
        0 18px 46px rgba(0,0,0,.22),
        0 0 24px color-mix(in srgb,var(--cbs-accent-glow) 26%,transparent) !important;
    transition:
        opacity 150ms ease,
        transform 180ms cubic-bezier(.2,.75,.25,1),
        visibility 0s linear 180ms;
}
.cbs-theme-panel::before {
    content:"";
    position:absolute;
    top:0;
    left:20px;
    right:20px;
    height:1px;
    background:linear-gradient(90deg,transparent,var(--cbs-accent),transparent);
    opacity:.72;
}
.cbs-theme-panel.is-open {
    visibility:visible;
    pointer-events:auto;
    opacity:1;
    transform:translateY(0) scale(1);
    transition-delay:0s;
}
.cbs-theme-head {
    min-height:50px;
    padding:1px 1px 10px;
    align-items:center !important;
    border-bottom:1px solid var(--cbs-border-soft);
}
.cbs-theme-head strong {
    font-size:var(--cbs-font-primary) !important;
    font-weight:850 !important;
    letter-spacing:-.01em;
}
.cbs-theme-head small {
    max-width:235px;
    margin-top:4px !important;
    color:var(--cbs-muted) !important;
    font-size:var(--cbs-font-secondary) !important;
    line-height:1.35;
}
.cbs-theme-head .cbs-icon-button {
    width:36px;
    height:36px;
    border-color:var(--cbs-border-soft);
    border-radius:10px;
    background:color-mix(in srgb,var(--cbs-bg-raised) 82%,transparent);
}
.cbs-theme-label {
    margin:14px 0 7px !important;
    display:flex !important;
    align-items:center;
    gap:9px;
    color:var(--cbs-muted) !important;
    font-size:var(--cbs-font-label) !important;
    font-weight:850 !important;
    letter-spacing:.075em !important;
}
.cbs-theme-label::after {
    content:"";
    height:1px;
    flex:1 1 auto;
    background:linear-gradient(90deg,var(--cbs-border-soft),transparent);
}

/* Four modes must never be squeezed into four tiny columns. */
.cbs-theme-mode-grid {
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:8px !important;
}
.cbs-theme-mode-grid button {
    position:relative;
    min-height:44px !important;
    padding:0 11px !important;
    justify-content:flex-start !important;
    gap:8px !important;
    overflow:hidden;
    border:1px solid var(--cbs-border-soft) !important;
    border-radius:10px !important;
    color:var(--cbs-text-2) !important;
    background:color-mix(in srgb,var(--cbs-bg-raised) 78%,transparent) !important;
    font-size:var(--cbs-font-secondary) !important;
    font-weight:700 !important;
    white-space:nowrap;
    box-shadow:none !important;
    transition:color 130ms ease,border-color 130ms ease,background 130ms ease,box-shadow 130ms ease,transform 130ms ease;
}
.cbs-theme-mode-grid button .cbs-icon {
    width:17px;
    height:17px;
    flex:0 0 17px;
    color:var(--cbs-muted);
}
.cbs-theme-mode-grid button:hover {
    color:var(--cbs-text) !important;
    border-color:color-mix(in srgb,var(--cbs-accent) 34%,var(--cbs-border)) !important;
    background:color-mix(in srgb,var(--cbs-accent) 5%,var(--cbs-bg-raised)) !important;
    transform:translateY(-1px);
}
.cbs-theme-mode-grid button.is-active {
    color:var(--cbs-accent) !important;
    border-color:color-mix(in srgb,var(--cbs-accent) 58%,var(--cbs-border)) !important;
    background:color-mix(in srgb,var(--cbs-accent) 9%,var(--cbs-bg-raised)) !important;
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb,var(--cbs-accent) 10%,transparent),
        0 0 12px color-mix(in srgb,var(--cbs-accent-glow) 50%,transparent) !important;
}
.cbs-theme-mode-grid button.is-active .cbs-icon { color:var(--cbs-accent); }
.cbs-theme-mode-grid button.is-active::after {
    content:"";
    position:absolute;
    top:8px;
    right:8px;
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--cbs-accent);
    box-shadow:0 0 8px var(--cbs-accent-glow);
}

/* Accent choices: cleaner spacing and a softer selected ring. */
.cbs-accent-row {
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;
    gap:9px !important;
    padding:2px 1px 1px;
}
.cbs-accent {
    width:36px !important;
    height:36px !important;
    border:2px solid color-mix(in srgb,currentColor 18%,transparent) !important;
    border-radius:11px !important;
    box-shadow:0 5px 12px rgba(0,0,0,.10) !important;
}
.cbs-accent:hover { transform:translateY(-2px) scale(1.035) !important; }
.cbs-accent.is-active {
    outline:2px solid var(--cbs-text) !important;
    outline-offset:3px !important;
    box-shadow:0 0 14px color-mix(in srgb,currentColor 42%,transparent) !important;
}

/* Shared controls inside Appearance are intentionally compact and quiet. */
.cbs-theme-font-select {
    min-height:42px !important;
    padding:0 11px !important;
    border-color:var(--cbs-border-soft) !important;
    border-radius:10px !important;
    background:color-mix(in srgb,var(--cbs-input) 92%,var(--cbs-accent) 8%) !important;
    font-size:var(--cbs-font-primary) !important;
}
.cbs-theme-font-select:focus {
    outline:0;
    border-color:var(--cbs-accent) !important;
    box-shadow:0 0 0 2px color-mix(in srgb,var(--cbs-accent) 16%,transparent);
}
.cbs-theme-font-sizes {
    gap:8px !important;
}
.cbs-theme-font-sizes button,
.cbs-theme-modes:not(.cbs-theme-mode-grid) button {
    border-color:var(--cbs-border-soft) !important;
    background:color-mix(in srgb,var(--cbs-bg-raised) 80%,transparent) !important;
    box-shadow:none !important;
}
.cbs-theme-font-sizes button {
    min-height:46px !important;
    border-radius:10px !important;
    font-weight:700 !important;
}
.cbs-theme-font-sizes button:hover,
.cbs-theme-modes:not(.cbs-theme-mode-grid) button:hover {
    color:var(--cbs-text) !important;
    border-color:color-mix(in srgb,var(--cbs-accent) 36%,var(--cbs-border)) !important;
    background:color-mix(in srgb,var(--cbs-accent) 5%,var(--cbs-bg-raised)) !important;
}
.cbs-theme-font-sizes button.is-active,
.cbs-theme-modes:not(.cbs-theme-mode-grid) button.is-active {
    color:var(--cbs-accent) !important;
    border-color:color-mix(in srgb,var(--cbs-accent) 52%,var(--cbs-border)) !important;
    background:color-mix(in srgb,var(--cbs-accent) 8%,var(--cbs-bg-raised)) !important;
    box-shadow:0 0 10px color-mix(in srgb,var(--cbs-accent-glow) 42%,transparent) !important;
}
.cbs-theme-reset {
    min-height:40px !important;
    margin-top:15px !important;
    border-color:var(--cbs-border) !important;
    border-radius:10px !important;
    color:var(--cbs-text-2) !important;
    background:transparent !important;
    font-weight:700;
}
.cbs-theme-reset:hover {
    color:var(--cbs-accent) !important;
    border-color:var(--cbs-accent-border) !important;
    background:var(--cbs-accent-faint) !important;
}
@media(max-width:420px) {
    .cbs-theme-panel {
        right:8px !important;
        width:calc(100vw - 16px) !important;
        padding:12px !important;
    }
}
@media(prefers-reduced-motion:reduce) {
    .cbs-theme-panel,
    .cbs-theme-mode-grid button,
    .cbs-accent { transition:none !important; }
}