.sidebar{width:250px;padding:18px 12px 14px;transition:width .2s ease,transform .2s ease;box-shadow:5px 0 24px rgb(var(--ds-rgb-overlay) / .12)}.sidebar .brand{flex:0 0 auto;padding:0 9px 16px}.sidebar .brand img{width:118px;max-height:44px}.sidebar nav{display:block;overflow:visible}.nav-group{display:grid;gap:2px;margin-bottom:13px}.nav-group h2{margin:0;padding:5px 11px;color:var(--ds-nav-heading);font:800 8px "DM Sans";letter-spacing:1.25px;text-transform:uppercase}.nav-item{position:relative;gap:10px;min-height:36px;padding:8px 10px;font-size:11px}.nav-item span{display:grid;place-items:center;flex:0 0 22px;width:22px;height:22px;border-radius:6px;background:rgb(var(--ds-rgb-white) / .06);color:var(--ds-nav-icon);font-size:12px;font-style:normal}.nav-item em{min-width:0;overflow:hidden;font-style:normal;text-overflow:ellipsis;white-space:nowrap}.nav-item.active span{background:var(--ds-white);color:var(--ds-primary)}.nav-count{display:grid;place-items:center;min-width:19px;height:19px;margin-left:auto;padding:0 5px;border-radius:99px;background:var(--ds-danger);color:var(--ds-white);font-size:9px}.sidebar-bottom{padding-top:4px}.sidebar-mode-toggle{display:flex;align-items:center;gap:10px;width:100%;min-height:36px;padding:8px 10px;border:1px solid rgb(var(--ds-rgb-white) / .09);border-radius:8px;background:rgb(var(--ds-rgb-white) / .03);color:var(--ds-nav-text);font:700 10px "DM Sans";cursor:pointer}.sidebar-mode-toggle span{display:grid;place-items:center;width:22px}.sidebar-mode-toggle em{font-style:normal}.capacity{padding:12px 9px}.profile{padding-top:11px}main{margin-left:250px;transition:margin-left .2s ease}#bms-topbar{left:250px;transition:left .2s ease}body[data-sidebar-mode="rail"] .sidebar{width:72px;padding-inline:8px}body[data-sidebar-mode="rail"] main{margin-left:72px}body[data-sidebar-mode="rail"] #bms-topbar{left:72px}body[data-sidebar-mode="rail"] .brand{justify-content:center;padding-inline:0}body[data-sidebar-mode="rail"] .brand img{width:45px;object-fit:cover;object-position:left}body[data-sidebar-mode="rail"] .brand small,body[data-sidebar-mode="rail"] .nav-group h2,body[data-sidebar-mode="rail"] .nav-item em,body[data-sidebar-mode="rail"] .capacity,body[data-sidebar-mode="rail"] .profile div,body[data-sidebar-mode="rail"] .profile button,body[data-sidebar-mode="rail"] .sidebar-mode-toggle em{display:none}body[data-sidebar-mode="rail"] .nav-group{margin-bottom:8px}body[data-sidebar-mode="rail"] .nav-item{justify-content:center;padding:7px}body[data-sidebar-mode="rail"] .nav-item span{flex-basis:30px;width:30px;height:30px}body[data-sidebar-mode="rail"] .nav-count{position:absolute;top:2px;right:0;min-width:16px;height:16px;font-size:8px}body[data-sidebar-mode="rail"] .profile{justify-content:center}body[data-sidebar-mode="rail"] .sidebar-mode-toggle{justify-content:center}body[data-sidebar-mode="hidden"] .sidebar{transform:translateX(-105%)}body[data-sidebar-mode="hidden"] main{margin-left:0}body[data-sidebar-mode="hidden"] #bms-topbar{left:0}.important-action-panel{width:min(440px,calc(100vw - 28px));max-height:calc(100vh - 100px);overflow:hidden;border-radius:13px}.important-action-panel header small{display:block;margin-top:3px;color:var(--ds-text-muted);font-size:10px}.important-action-panel footer{padding:11px 14px;border-top:1px solid var(--ds-line)}.important-action-list{max-height:calc(100vh - 240px);overflow:auto;padding:10px!important}.important-action-list .important-action{position:relative;display:grid;grid-template-columns:1fr auto;gap:8px;padding:0!important;overflow:hidden;border:1px solid var(--ds-line)!important;border-left:5px solid var(--ds-primary-bright)!important;background:var(--ds-white)!important}.important-action-open{display:grid;gap:4px;width:100%;padding:12px;border:0;background:transparent;color:var(--ds-ink);text-align:left;cursor:pointer}.important-action-open strong{font:800 12px Manrope}.important-action-open>span:not(.important-action-type),.important-action-open small{color:var(--ds-text-muted);font-size:10px;line-height:1.4}.important-action-open b{margin-top:3px;color:var(--ds-primary);font-size:9px}.important-action-type{width:max-content;padding:3px 6px;border-radius:4px;background:var(--ds-primary-soft);color:var(--ds-primary);font-size:8px;font-weight:900;letter-spacing:.5px;text-transform:uppercase}.important-action-clear{align-self:start;margin:8px 8px 0 0;border:1px solid var(--ds-line);border-radius:6px;background:var(--ds-white);color:var(--ds-text-muted);padding:6px 8px;font-size:9px;font-weight:800;cursor:pointer}.important-action.is-message{border-left-color:var(--ds-danger)!important;background:var(--ds-danger-wash)!important}.important-action.is-message .important-action-type{background:var(--ds-danger);color:var(--ds-white)}.important-action.is-message .important-action-open strong{color:var(--ds-danger-strong)}.important-action.is-pinned::after{content:"PINNED";position:absolute;top:8px;right:57px;color:var(--ds-danger);font-size:7px;font-weight:900;letter-spacing:.7px}.important-action.is-callback{border-left-color:var(--ds-warning)!important;background:var(--ds-warning-wash)!important}.important-action.is-callback .important-action-type{background:var(--ds-warning-soft);color:var(--ds-warning-strong)}.important-action.is-finance-approved{border-left-color:var(--ds-success)!important;background:var(--ds-success-wash)!important}.important-action.is-finance-approved .important-action-type{background:var(--ds-success-soft);color:var(--ds-success-strong)}.important-action.is-finance-decision{border-left-color:var(--ds-violet)!important;background:var(--ds-violet-wash)!important}.important-action.is-finance-decision .important-action-type{background:var(--ds-violet-soft);color:var(--ds-violet-strong)}.important-action.is-workflow{border-left-color:var(--ds-teal)!important;background:var(--ds-surface)!important}.important-action.is-fleet{border-left-color:var(--ds-orange)!important;background:var(--ds-orange-wash)!important}.important-action.is-fleet .important-action-type{background:var(--ds-orange-soft);color:var(--ds-orange-strong)}.important-action.is-hr{border-left-color:var(--ds-violet)!important;background:var(--ds-violet-wash)!important}.important-action.is-hr .important-action-type{background:var(--ds-violet-soft);color:var(--ds-violet-strong)}.important-action-empty{display:grid;gap:5px;padding:30px 16px;text-align:center;color:var(--ds-text-muted)}.important-action-empty strong{color:var(--ds-ink-soft)}
@media(max-width:760px){body::after{content:"";position:fixed;inset:0;z-index:12025;background:rgb(var(--ds-rgb-overlay) / .52);opacity:0;pointer-events:none;transition:opacity .2s}body.sidebar-mobile-open::after{opacity:1;pointer-events:auto}.sidebar,.sidebar body[data-sidebar-mode="rail"]{inset:0 auto 0 0!important;z-index:12030!important;display:flex!important;width:min(286px,86vw)!important;height:100dvh!important;max-height:100dvh!important;padding:17px 12px!important;overflow-y:auto!important;overflow-x:hidden!important;border:0!important;transform:translateX(-105%)!important;transition:none!important}.sidebar nav{display:block!important;min-width:0!important}.sidebar .brand,.sidebar-bottom{display:flex!important}.sidebar .brand{justify-content:flex-start!important}.sidebar .brand img{width:118px!important;object-fit:contain!important}.sidebar .brand small,.sidebar .nav-group h2,.sidebar .nav-item em,.sidebar .profile div,.sidebar .sidebar-mode-toggle em{display:block!important}.sidebar .capacity{display:none!important}.sidebar .nav-group{display:grid!important;margin-bottom:13px!important}.sidebar .nav-item{display:flex!important;justify-content:flex-start!important;width:100%!important;min-height:40px!important;padding:8px 10px!important;font-size:11px!important;white-space:nowrap!important}.sidebar .nav-item span{flex-basis:26px!important;width:26px!important;height:26px!important;font-size:12px!important}.sidebar .nav-count{position:static!important;margin-left:auto!important}.sidebar-mobile-open .sidebar{transform:translateX(0)!important}main,body[data-sidebar-mode="rail"] main,body[data-sidebar-mode="hidden"] main{margin-left:0!important;padding-top:64px!important;transition:none!important}#bms-topbar,body[data-sidebar-mode="rail"] #bms-topbar,body[data-sidebar-mode="hidden"] #bms-topbar{left:0!important;transition:none!important}.important-action-panel{inset:70px 8px auto!important;width:calc(100vw - 16px)!important;max-height:calc(100dvh - 84px)}.important-action-list{max-height:calc(100dvh - 230px)}#bms-topbar-notifications{font-size:0!important}#bms-topbar-notifications b{font-size:10px!important}}

/* The customer directory becomes stacked cards on phones, so its global table
   minimum must not leak past the viewport after the mobile stylesheet loads. */
@media(max-width:720px){#customers-view table{min-width:0!important}}

/* The running-version label, rendered by version-label.js into the sidebar footer and the
   settings page heading. Muted and small on purpose: it is a deploy check, not a heading. */
.app-version{display:block;color:var(--ds-nav-heading);font-size:9px;letter-spacing:.3px}

/* ---- Shared layout shell (pipeline item #49) ----
   Every screen renders inside one frame: the sidebar, the #bms-topbar header and <main>.
   These rules give every view the same content frame and the three shared breakpoints:
   iPad (up to 1180px), desktop (1181-1899px) and the wall TV (1900px and wider). Colours are
   design-system tokens only (tests/design-system.test.js). */

/* The sidebar "Workshop capacity 72%, 18 of 25 slots" block is hard-coded in index.html and
   nothing updates it: an invented number. Hidden until a real capacity source exists. */
.sidebar .capacity{display:none!important}
/* The demo-era "Switch role" preview button; applyRoleInterface already hides it after sign-in. */
#role-toggle{display:none!important}
/* The "My dashboard" entry added by bms-navigation.js for roles that have a dashboard. */
#bms-my-dashboard[hidden]{display:none!important}
#bms-my-dashboard span{background:var(--ds-accent);color:var(--ds-ink)}

/* The content frame every view sits in */
main>.view{box-sizing:border-box;min-width:0}
main>.view :focus-visible{outline:2px solid var(--ds-accent);outline-offset:2px}

/* iPad: touch-sized nav and controls, the rail by default leaves room for content */
@media (min-width:761px) and (max-width:1180px){
 .nav-item{min-height:var(--ds-touch)}
 main>.view button,main>.view select,main>.view input:not([type="checkbox"]):not([type="radio"]){min-height:40px}
}
/* Wall TV: larger type and spacing for reading across the workshop */
@media (min-width:1900px){
 .nav-item{min-height:44px;font-size:13px}
 .nav-group h2{font-size:10px}
 main>.view{font-size:var(--ds-text-md)}
}