/* AS Surface OS 216B1 — Safe Visual Refinement
   CSS-only layer over the proven 216A8 baseline.
   No route/app/server/database changes. */
html.as216a8-native{
  --b1-bg:#eee9e2;--b1-bg2:#f6f2ec;--b1-paper:#fffdf9;--b1-paper2:#f8f3ed;
  --b1-line:#ded4ca;--b1-line2:#cfc1b4;--b1-ink:#1b1e1d;--b1-muted:#746e68;
  --b1-tan:#c9955b;--b1-tan2:#e5bc88;--b1-green:#248a69;--b1-amber:#c98331;--b1-red:#bb514a;
  --b1-shadow:0 7px 22px rgba(57,43,31,.065);--b1-shadow2:0 14px 36px rgba(57,43,31,.08);
}

/* Workspace rhythm: keep the current shell, refine only surfaces. */
html.as216a8-native #app .workspace94.as211v11a-shell .workspace91c-main,
html.as216a8-native #app .workspace94.as211v11a-shell .workspace86-main{
  background:linear-gradient(180deg,#f5f1eb 0,#eee8e0 100%)!important;color:var(--b1-ink)!important;
}
html.as216a8-native #app .workspace94.as211v11a-shell .workspace91c-main>.content,
html.as216a8-native #app .workspace94.as211v11a-shell .workspace86-main>.content{
  max-width:1680px!important;margin:0 auto!important;padding:22px 24px 38px!important;
}

/* Topbar / sidebar retain current architecture; only spacing and finish change. */
html.as216a8-native #app .workspace94.as211v11a-shell .workspace91c-topbar,
html.as216a8-native #app .workspace94.as211v11a-shell .workspace86-topbar{
  background:#0c1417!important;border:1px solid #253136!important;border-radius:15px!important;
  min-height:62px!important;box-shadow:0 8px 25px rgba(0,0,0,.11)!important;
}
html.as216a8-native #app .workspace94.as211v11a-shell .workspace91c-sidebar{
  background:linear-gradient(180deg,#091114,#0d171a 54%,#081013)!important;
  border-right:1px solid rgba(225,189,142,.16)!important;box-shadow:10px 0 32px rgba(5,10,12,.11)!important;
}
html.as216a8-native #app .workspace94.as211v11a-shell .workspace91c-menu-item{
  min-height:40px!important;border-radius:10px!important;margin:1px 5px!important;
}
html.as216a8-native #app .workspace94.as211v11a-shell .workspace91c-menu-item.active{
  background:linear-gradient(90deg,rgba(229,188,136,.20),rgba(229,188,136,.055))!important;
  border-color:rgba(229,188,136,.25)!important;box-shadow:inset 3px 0 #d9aa70!important;
}

/* Universal page header — premium but compact, not a giant dark block. */
html.as216a8-native #app .workspace94.as211v11a-shell .workspace91c-main .page-head:not(.command-page-head),
html.as216a8-native #app .workspace94.as211v11a-shell .workspace86-main .page-head:not(.command-page-head){
  min-height:94px!important;padding:19px 22px!important;margin:0 0 16px!important;border-radius:17px!important;
  border:1px solid #2b3539!important;background:
    radial-gradient(circle at 91% 16%,rgba(229,188,136,.105),transparent 24%),
    linear-gradient(112deg,#0f181b,#172123 72%,#202421)!important;
  box-shadow:0 10px 28px rgba(24,28,27,.10)!important;
}
html.as216a8-native #app .workspace94.as211v11a-shell .workspace91c-main .page-head:not(.command-page-head):after{opacity:.58!important}
html.as216a8-native #app .workspace94.as211v11a-shell .workspace91c-main .page-head h1{font-size:26px!important;letter-spacing:-.025em!important}
html.as216a8-native #app .workspace94.as211v11a-shell .workspace91c-main .page-head p{font-size:10.5px!important;line-height:1.45!important}
html.as216a8-native #app .workspace94.as211v11a-shell .as216a8-eyebrow{color:#e7bd87!important;font-size:8px!important;letter-spacing:.16em!important}

/* One real surface system. Do NOT use [class*="-card"] broad matching here. */
html.as216a8-native #app .workspace94.as211v11a-shell .workspace91c-main :is(
 .card,.card.section,.section,.table-wrap,.command-table-wrap,.planner-toolbar,.planner-backlog,.planner-week-board,
 .clean-attendance-shell,.clean-salary-sheet,.contractor-payroll-sheet,.attendance-biometric-audit,
 .appearance-controls,.appearance-live,.brand-studio,.billing-ageing,.crm-pipeline-strip,
 .material-command-order,.order-timeline-card,.cloud-next-card,.sync-grid>article,.device-grid>article
){
  background:var(--b1-paper)!important;background-image:none!important;color:var(--b1-ink)!important;
  border-color:var(--b1-line)!important;box-shadow:var(--b1-shadow)!important;
}
html.as216a8-native #app .workspace94.as211v11a-shell .workspace91c-main :is(.card,.card.section,.section,.planner-toolbar,.planner-backlog,.appearance-controls,.appearance-live,.brand-studio){border-radius:15px!important}

/* Exact KPI / summary cells across current modules. */
html.as216a8-native #app .workspace94.as211v11a-shell .workspace91c-main :is(
 .stat,.as216a8-metric-cell,
 .clean-attendance-stats>div,.clean-payroll-kpis>div,.clean-detail-grid>div,
 .contractor-mini-stats>article,.contractor-totals>div,.contractor-payroll-kpis>div,.payroll-contractor-totals>div,
 .pay-detail-hero>div,.pay-detail-grid>div,.pay-detail-attendance>div,.command-detail-summary>article,
 .sync-stats>.stat,.as215-kpis>article,.as215-detail-kpis>div
){
  background:var(--b1-paper)!important;background-image:none!important;border:1px solid var(--b1-line)!important;
  color:var(--b1-ink)!important;box-shadow:0 5px 15px rgba(57,43,31,.045)!important;border-radius:13px!important;
}
html.as216a8-native #app .workspace94.as211v11a-shell .workspace91c-main .as216a8-metric-cell:before,
html.as216a8-native #app .workspace94.as211v11a-shell .workspace91c-main .stat:before{
  content:""!important;position:absolute!important;left:14px!important;right:auto!important;top:0!important;width:38px!important;height:3px!important;
  border-radius:0 0 4px 4px!important;background:var(--b1-tan)!important;opacity:.88!important;
}
html.as216a8-native #app .workspace94.as211v11a-shell .workspace91c-main :is(.stat,.as216a8-metric-cell,.clean-attendance-stats>div,.clean-payroll-kpis>div,.contractor-mini-stats>article,.contractor-totals>div) :is(strong,b,.value,h2,h3){color:var(--b1-ink)!important;text-shadow:none!important}
html.as216a8-native #app .workspace94.as211v11a-shell .workspace91c-main :is(.stat,.as216a8-metric-cell,.clean-attendance-stats>div,.clean-payroll-kpis>div,.contractor-mini-stats>article,.contractor-totals>div) :is(small,span,p,.meta,.label){color:var(--b1-muted)!important;text-shadow:none!important}

/* Workforce + Attendance: exact current classes. */
html.as216a8-native #app .workspace94.as211v11a-shell :is(.clean-workforce-head,.attendance-toolbar,.attendance-section-title,.section-head){color:var(--b1-ink)!important}
html.as216a8-native #app .workspace94.as211v11a-shell :is(.workforce-clean-tabs,.attendance-view-switch,.payroll-scope-tabs){
  background:#f3ede6!important;border:1px solid var(--b1-line)!important;border-radius:12px!important;padding:4px!important;box-shadow:none!important;
}
html.as216a8-native #app .workspace94.as211v11a-shell :is(.workforce-clean-tabs,.attendance-view-switch,.payroll-scope-tabs) button{
  background:transparent!important;color:#5f5851!important;border:1px solid transparent!important;border-radius:9px!important;box-shadow:none!important;
}
html.as216a8-native #app .workspace94.as211v11a-shell :is(.workforce-clean-tabs,.attendance-view-switch,.payroll-scope-tabs) button.active{
  background:#fffaf3!important;color:#2e231a!important;border-color:#d6b181!important;box-shadow:0 2px 7px rgba(77,56,37,.07)!important;
}
html.as216a8-native #app .workspace94.as211v11a-shell :is(.attendance-health,.attendance-signals,.attendance-row,.attendance-detail-section,.pay-date-group,.pay-day-ledger,.contractor-policy,.contractor-ready,.contractor-alert,.contractor-pending-payroll,.contractor-payroll-note,.pay-detail-section){
  background:var(--b1-paper2)!important;background-image:none!important;border-color:var(--b1-line)!important;color:var(--b1-ink)!important;box-shadow:none!important;
}
html.as216a8-native #app .workspace94.as211v11a-shell :is(.attendance-health-facts>div,.attendance-signal,.attendance-detail-grid>div,.attendance-detail-hero>div,.attendance-session-list>div,.attendance-raw-punches>div,.contractor-policy-rules>span,.pay-date-chip){
  background:var(--b1-paper)!important;background-image:none!important;border-color:var(--b1-line)!important;color:var(--b1-ink)!important;
}
html.as216a8-native #app .workspace94.as211v11a-shell :is(.attendance-biometric-audit,.as216a8-status-strip){
  background:#eef8f3!important;background-image:none!important;border:1px solid #c9e2d6!important;color:#235d49!important;box-shadow:none!important;
}
html.as216a8-native #app .workspace94.as211v11a-shell :is(.attendance-biometric-audit,.as216a8-status-strip) :is(strong,b,h3,h4){color:#1f624b!important}

/* Payroll: remove dark inner islands and make formula/status intentional. */
html.as216a8-native #app .workspace94.as211v11a-shell :is(.clean-payroll-head,.clean-payroll-details,.clean-payroll-bottom,.clean-adjust-summary,.pay-detail-columns,.pay-detail-payment){color:var(--b1-ink)!important}
html.as216a8-native #app .workspace94.as211v11a-shell :is(.clean-payroll-alert,.owner-policy-note,.pay-detail-rule,.pay-detail-footnote,.contractor-modal-rule){
  background:#faf5ee!important;background-image:none!important;border-color:#ddcdbb!important;color:#6e6257!important;
}
html.as216a8-native #app .workspace94.as211v11a-shell .pay-detail-formula{
  background:#f6ecdf!important;border-color:#d7b789!important;color:var(--b1-ink)!important;
}
html.as216a8-native #app .workspace94.as211v11a-shell .pay-detail-formula .result{background:#ead3b5!important;color:#2b2119!important}
html.as216a8-native #app .workspace94.as211v11a-shell .pay-detail-formula .result strong{color:#2b2119!important}

/* Finance / Accounts / CRM. */
html.as216a8-native #app .workspace94.as211v11a-shell .billing-ageing{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;overflow:hidden!important}
html.as216a8-native #app .workspace94.as211v11a-shell .billing-ageing>div{background:var(--b1-paper)!important;border-color:var(--b1-line)!important;color:var(--b1-ink)!important}
html.as216a8-native #app .workspace94.as211v11a-shell .crm-pipeline-strip{background:#f4eee7!important;padding:7px!important;border-radius:14px!important}
html.as216a8-native #app .workspace94.as211v11a-shell .crm-stage{background:var(--b1-paper)!important;color:var(--b1-ink)!important;border:1px solid var(--b1-line)!important;box-shadow:none!important}
html.as216a8-native #app .workspace94.as211v11a-shell .crm-stage.active{background:#f5e8d7!important;border-color:#cda474!important;box-shadow:inset 0 0 0 1px rgba(201,149,91,.08)!important}

/* Material / planning / orders / operator lists: light business rows, dark only technical scanning stages. */
html.as216a8-native #app .workspace94.as211v11a-shell :is(.compact-row,.dispatch-row,.finance-expense-row,.operator-performance-row,.planner-unscheduled-card,.planner-entry-card,.material-command-order,.order-timeline-card){
  background:var(--b1-paper)!important;background-image:none!important;color:var(--b1-ink)!important;border-color:var(--b1-line)!important;box-shadow:none!important;
}
html.as216a8-native #app .workspace94.as211v11a-shell :is(.compact-row,.dispatch-row,.finance-expense-row,.operator-performance-row):hover{background:#f7f1ea!important}
html.as216a8-native #app .workspace94.as211v11a-shell .planner-view-tabs{background:#eee6dd!important;border-color:var(--b1-line)!important}
html.as216a8-native #app .workspace94.as211v11a-shell .planner-view-tabs button{color:#625b54!important}
html.as216a8-native #app .workspace94.as211v11a-shell .planner-view-tabs button.active{background:#fffaf4!important;color:#2d241c!important;border:1px solid #d5b17e!important}

/* Tables everywhere. */
html.as216a8-native #app .workspace94.as211v11a-shell :is(.table-wrap,.command-table-wrap,.attendance-table-wrap,.payroll-sheet,.contractor-payroll-sheet,.as215-table-wrap){
  background:var(--b1-paper)!important;border:1px solid var(--b1-line)!important;border-radius:13px!important;box-shadow:none!important;overflow:auto!important;
}
html.as216a8-native #app .workspace94.as211v11a-shell :is(.data-table,.attendance-table,.clean-payroll-table,.contractor-wage-payroll-table,.pay-day-ledger-table,.as215-table,.as215-mini){background:var(--b1-paper)!important;color:var(--b1-ink)!important}
html.as216a8-native #app .workspace94.as211v11a-shell :is(.data-table,.attendance-table,.clean-payroll-table,.contractor-wage-payroll-table,.pay-day-ledger-table,.as215-table,.as215-mini) th{
  background:#f1ebe4!important;background-image:none!important;color:#655d55!important;border-color:var(--b1-line)!important;font-size:9px!important;letter-spacing:.075em!important;
}
html.as216a8-native #app .workspace94.as211v11a-shell :is(.data-table,.attendance-table,.clean-payroll-table,.contractor-wage-payroll-table,.pay-day-ledger-table,.as215-table,.as215-mini) td{
  background:var(--b1-paper)!important;color:#292b29!important;border-color:#ece4dc!important;
}
html.as216a8-native #app .workspace94.as211v11a-shell :is(.data-table,.attendance-table,.clean-payroll-table,.contractor-wage-payroll-table,.pay-day-ledger-table,.as215-table,.as215-mini) tbody tr:nth-child(even) td{background:#fbf8f4!important}
html.as216a8-native #app .workspace94.as211v11a-shell :is(.data-table,.attendance-table,.clean-payroll-table,.contractor-wage-payroll-table,.pay-day-ledger-table,.as215-table,.as215-mini) tbody tr:hover td{background:#f5eee6!important}

/* Inputs / controls. */
html.as216a8-native #app .workspace94.as211v11a-shell .workspace91c-main :is(input,select,textarea),
html.as216a8-native .modal-card :is(input,select,textarea),
html.as216a8-native #as215-native-host :is(input,select,textarea){
  background:var(--b1-paper)!important;color:var(--b1-ink)!important;border:1px solid var(--b1-line2)!important;border-radius:9px!important;box-shadow:none!important;
}
html.as216a8-native #app .workspace94.as211v11a-shell .workspace91c-main :is(input,select,textarea):focus,
html.as216a8-native .modal-card :is(input,select,textarea):focus,
html.as216a8-native #as215-native-host :is(input,select,textarea):focus{border-color:#b88754!important;outline:3px solid rgba(184,135,84,.11)!important}
html.as216a8-native #app .workspace94.as211v11a-shell .workspace91c-main label{color:#504a44!important}

/* Buttons. */
html.as216a8-native #app .workspace94.as211v11a-shell .workspace91c-main .primary-btn,
html.as216a8-native #as215-native-host .as215-primary{background:#d5a66a!important;background-image:none!important;color:#231a12!important;border:1px solid #c9955b!important;box-shadow:none!important}
html.as216a8-native #app .workspace94.as211v11a-shell .workspace91c-main .secondary-btn,
html.as216a8-native #as215-native-host .as215-secondary{background:#fffaf4!important;color:#403a35!important;border:1px solid var(--b1-line2)!important;box-shadow:none!important}

/* Modals: same design language as pages. */
html.as216a8-native .modal-backdrop,html.as216a8-native .as-modal-root{background:rgba(10,15,17,.58)!important;backdrop-filter:blur(5px)!important}
html.as216a8-native .modal-card,html.as216a8-native .as215-dialog{
  background:var(--b1-paper)!important;background-image:none!important;color:var(--b1-ink)!important;border:1px solid var(--b1-line)!important;border-radius:17px!important;box-shadow:0 24px 70px rgba(16,18,17,.23)!important;
}
html.as216a8-native .modal-head,html.as216a8-native .as215-dialog>header{border-color:var(--b1-line)!important}
html.as216a8-native .modal-head h2,html.as216a8-native .as215-dialog h2{color:var(--b1-ink)!important}
html.as216a8-native .modal-head small,html.as216a8-native .as215-dialog header small{color:#9a6a3e!important}

/* Native quotation module — stop its dark cells from looking like a second OS. */
html.as216a8-native #as215-native-host{--as215-bg:var(--b1-bg);--as215-panel:var(--b1-paper);--as215-panel2:var(--b1-paper2);--as215-line:var(--b1-line);--as215-text:var(--b1-ink);--as215-muted:var(--b1-muted);--as215-accent:#c9955b;--as215-accent2:#9c6a3d;--as215-shadow:var(--b1-shadow2);color:var(--b1-ink)!important}
html.as216a8-native #as215-native-host :is(.as215-card,.as215-line,.as215-ref,.as215-scratch,.as215-cost-block,.as215-note,.as215-total-card,.as215-capture-zone,.as215-review-lock){background:var(--b1-paper)!important;background-image:none!important;color:var(--b1-ink)!important;border-color:var(--b1-line)!important;box-shadow:var(--b1-shadow)!important}
html.as216a8-native #as215-native-host .as215-line>header{background:#f4eee7!important;border-color:var(--b1-line)!important}
html.as216a8-native #as215-native-host .as215-line>footer{border-color:var(--b1-line)!important;color:var(--b1-muted)!important}
html.as216a8-native #as215-native-host .as215-line>footer b{color:var(--b1-ink)!important}
html.as216a8-native #as215-native-host .as215-native-tab{background:#fffaf4!important;color:#5d554d!important;border-color:var(--b1-line2)!important}
html.as216a8-native #as215-native-host .as215-native-tab.active{background:#f1e2cf!important;color:#2e2218!important;border-color:#c9955b!important}
html.as216a8-native #as215-native-host :is(.as215-table,.as215-mini) td{color:var(--b1-ink)!important}
html.as216a8-native #as215-native-host :is(.as215-hero p,.as215-section-head p,.as215-table td small,.as215-line header small){color:var(--b1-muted)!important}

/* Appearance Studio — remove the 'dark app inside light app' effect. */
html.as216a8-native #app .workspace94.as211v11a-shell .appearance-layout{gap:16px!important}
html.as216a8-native #app .workspace94.as211v11a-shell :is(.appearance-controls,.appearance-live,.brand-studio,.brand-upload-preview,.theme-option,.accent-option,.mini-os-preview,.brand-document-preview,.appearance-notes>div){
  background:var(--b1-paper)!important;background-image:none!important;color:var(--b1-ink)!important;border-color:var(--b1-line)!important;box-shadow:none!important;
}
html.as216a8-native #app .workspace94.as211v11a-shell .brand-studio{background:var(--b1-paper2)!important}
html.as216a8-native #app .workspace94.as211v11a-shell .theme-option.selected{background:#f3e6d5!important;border-color:#c9955b!important;box-shadow:0 0 0 2px rgba(201,149,91,.10)!important}

/* Semantic statuses keep meaning. */
html.as216a8-native #app .workspace94.as211v11a-shell :is(.status-badge,.payroll-status,.payment-status,.as215-status){box-shadow:none!important}
html.as216a8-native #app .workspace94.as211v11a-shell :is(.paid,.success,.approved,.ready){color:var(--b1-green)!important}
html.as216a8-native #app .workspace94.as211v11a-shell :is(.warning,.needs-attention,.pending){color:var(--b1-amber)!important}
html.as216a8-native #app .workspace94.as211v11a-shell :is(.danger,.error,.critical){color:var(--b1-red)!important}

/* Technical surfaces intentionally stay dark. This is an explicit allow-list. */
html.as216a8-native #app .workspace94.as211v11a-shell :is(.operator-scan,.scanner-stage,.camera-stage,[class*="webgl"],[class*="cad-"],[class*="3d-"],[class*="viewer"],[class*="machine-console"],[class*="bed-twin"]){
  background:#10191d!important;color:#edf3f4!important;border-color:#2a383e!important;
}
html.as216a8-native #app .workspace94.as211v11a-shell :is(.operator-scan,.scanner-stage,.camera-stage,[class*="webgl"],[class*="cad-"],[class*="3d-"],[class*="viewer"],[class*="machine-console"],[class*="bed-twin"]) :is(h1,h2,h3,h4,strong,b){color:#f2f5f5!important}

/* Small-screen discipline. */
@media(max-width:1100px){
  html.as216a8-native #app .workspace94.as211v11a-shell .billing-ageing{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
@media(max-width:800px){
  html.as216a8-native #app .workspace94.as211v11a-shell .workspace91c-main>.content{padding:14px 11px calc(88px + env(safe-area-inset-bottom,0px))!important}
  html.as216a8-native #app .workspace94.as211v11a-shell .workspace91c-main .page-head:not(.command-page-head){min-height:86px!important;padding:16px!important}
  html.as216a8-native #app .workspace94.as211v11a-shell .billing-ageing{grid-template-columns:1fr 1fr!important}
}
@media(max-width:520px){html.as216a8-native #app .workspace94.as211v11a-shell .billing-ageing{grid-template-columns:1fr!important}}