/* =====================================================================
   AS SURFACE OS BUILD 211V11 — MATERIAL WORKBENCH UI
   Structural visual redesign. Business logic untouched.
   ===================================================================== */

:root{
  --as10-gold:#d0a367;
  --as10-gold-2:#e3bd86;
  --as10-gold-soft:rgba(208,163,103,.10);
  --as10-gold-line:rgba(208,163,103,.30);
  --as10-green:#61bc86;
  --as10-red:#e2757b;
  --as10-amber:#d8a45f;
  --as10-radius:18px;
}
html[data-theme="graphite"]{
  --as10-bg:#090d10;
  --as10-bg-2:#0c1216;
  --as10-slab:#11191d;
  --as10-slab-2:#151e22;
  --as10-slab-3:#0d1418;
  --as10-line:#303a40;
  --as10-line-soft:#232c31;
  --as10-text:#f2f1ed;
  --as10-text-2:#c9cecf;
  --as10-muted:#7c878d;
  --as10-muted-2:#59656b;
  --as10-input:#0a1013;
  --as10-sidebar:#0b1114;
}
html[data-theme="studio"]{
  --as10-bg:#ece8e0;
  --as10-bg-2:#f5f2ec;
  --as10-slab:#fffdf8;
  --as10-slab-2:#f6f1e8;
  --as10-slab-3:#fbf7f0;
  --as10-line:#d8d0c3;
  --as10-line-soft:#e6dfd4;
  --as10-text:#272725;
  --as10-text-2:#474846;
  --as10-muted:#777a77;
  --as10-muted-2:#989a96;
  --as10-input:#fffdfa;
  --as10-sidebar:#1b1c1b;
}

/* ---------- Whole desktop shell becomes a floating material workbench ---------- */
@media(min-width:801px){
  .workspace94.as211v10-shell{
    --as-menu-w:244px!important;
    background:
      radial-gradient(circle at 88% 8%,rgba(208,163,103,.075),transparent 25%),
      var(--as10-bg)!important;
  }

  .workspace94 .workspace91c-sidebar{
    position:fixed!important;
    left:12px!important;top:12px!important;bottom:12px!important;
    width:220px!important;height:auto!important;
    border:1px solid var(--as10-line)!important;
    border-radius:22px!important;
    overflow:hidden!important;
    background:
      linear-gradient(160deg,rgba(208,163,103,.035),transparent 35%),
      var(--as10-sidebar)!important;
    box-shadow:0 24px 60px rgba(0,0,0,.20)!important;
  }

  .workspace94 .workspace91c-sidebar-head{
    height:90px!important;min-height:90px!important;padding:17px 16px!important;
    border-bottom:1px solid var(--as10-line-soft)!important;
    background:
      linear-gradient(135deg,rgba(208,163,103,.055),transparent 55%)!important;
  }
  .workspace94 .workspace91c-logo{
    width:52px!important;height:46px!important;border-radius:10px!important
  }
  .workspace94 .workspace91c-brand strong{
    font-size:13px!important;letter-spacing:.045em!important
  }
  .workspace94 .workspace91c-brand small{
    color:#7e898f!important;font-size:7px!important;letter-spacing:.11em!important
  }

  .workspace94 .workspace91c-menu{
    padding:13px 10px 20px!important
  }
  .workspace94 .workspace91c-menu-group-label{
    padding:8px 10px 5px!important;
    color:#626e74!important;font-size:7px!important;letter-spacing:.16em!important
  }
  .workspace94 .workspace91c-menu-item{
    min-height:42px!important;
    margin:3px 0!important;padding:6px 9px!important;
    border:1px solid transparent!important;border-radius:11px!important;
    color:#7f8b91!important;background:transparent!important;
    transition:.15s ease!important
  }
  .workspace94 .workspace91c-menu-item:hover{
    color:#e9e8e4!important;background:#121b20!important;
    border-color:#28343a!important;transform:translateX(2px)
  }
  .workspace94 .workspace91c-menu-item.active{
    color:#fff4df!important;
    background:
      linear-gradient(90deg,rgba(208,163,103,.18),rgba(208,163,103,.055))!important;
    border-color:rgba(208,163,103,.30)!important;
    box-shadow:inset 3px 0 0 var(--as10-gold),0 8px 20px rgba(0,0,0,.12)!important
  }
  .workspace94 .workspace91c-menu-icon{
    width:29px!important;height:29px!important;min-width:29px!important;
    border:1px solid #273238!important;border-radius:8px!important;
    background:#11191e!important;color:#7f8b91!important
  }
  .workspace94 .workspace91c-menu-item.active .workspace91c-menu-icon{
    background:rgba(208,163,103,.14)!important;
    border-color:rgba(208,163,103,.27)!important;color:var(--as10-gold-2)!important
  }

  .workspace94 .workspace91c-sidebar-foot{
    border-top:1px solid var(--as10-line-soft)!important;
    background:linear-gradient(0deg,rgba(208,163,103,.04),transparent)!important
  }
  .workspace94 .workspace91c-sidebar-foot strong{
    color:var(--as10-gold-2)!important
  }

  .workspace94 .workspace91c-topbar{
    position:fixed!important;
    top:12px!important;left:244px!important;right:12px!important;
    width:auto!important;height:66px!important;min-height:66px!important;
    margin-left:0!important;padding:9px 16px!important;
    border:1px solid var(--as10-line)!important;
    border-radius:18px!important;
    background:color-mix(in srgb,var(--as10-slab) 92%,transparent)!important;
    box-shadow:0 18px 48px rgba(0,0,0,.16)!important;
    backdrop-filter:blur(22px)!important;
  }
  .workspace94 .workspace91c-topbar:before{
    content:"";position:absolute;left:18px;right:18px;bottom:-1px;height:1px;
    background:linear-gradient(90deg,var(--as10-gold),transparent 34%);
    opacity:.38;pointer-events:none
  }

  .workspace94 .workspace91c-main,
  .workspace94 .workspace86-main{
    margin-left:244px!important;
    width:calc(100% - 244px)!important;
    padding-top:82px!important;
    background:
      radial-gradient(circle at 84% 4%,rgba(208,163,103,.06),transparent 22%),
      var(--as10-bg)!important;
  }
  .workspace94 .workspace91c-main:before{
    content:"";position:fixed;pointer-events:none;z-index:0;
    width:540px;height:220px;right:-150px;bottom:-70px;
    border:1px solid rgba(208,163,103,.13);border-radius:44px;
    transform:rotate(-10deg);
    box-shadow:0 -14px 0 rgba(208,163,103,.018),0 -28px 0 rgba(208,163,103,.012)
  }
  .workspace94 .workspace91c-main>.content{
    position:relative;z-index:1;
    width:min(calc(100% - 36px),1660px)!important;
    padding:18px 0 74px!important;
  }
}

/* ---------- Topbar ---------- */
.workspace94 .workspace86-route small{
  color:var(--as10-gold)!important;
  font-size:7px!important;font-weight:900!important;letter-spacing:.16em!important
}
.workspace94 .workspace86-route strong{
  color:var(--as10-text)!important;
  font-size:14px!important;letter-spacing:-.015em!important
}
.workspace94 .workspace86-search{
  border:1px solid var(--as10-line)!important;
  border-radius:12px!important;background:var(--as10-input)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.015)!important
}
.workspace94 .workspace86-search input{
  background:transparent!important;border:0!important;color:var(--as10-text)!important
}
.workspace94 .workspace86-search:focus-within{
  border-color:var(--as10-gold-line)!important;
  box-shadow:0 0 0 3px rgba(208,163,103,.07)!important
}
.workspace94 .workspace86-search kbd{
  border-color:var(--as10-line)!important;background:var(--as10-slab-2)!important;color:var(--as10-muted)!important
}
.workspace94 .workspace86-user>button{
  background:var(--as10-slab-2)!important;border-color:var(--as10-line)!important;color:var(--as10-text-2)!important
}
.workspace94 .workspace86-user>.avatar{
  background:linear-gradient(145deg,rgba(208,163,103,.24),var(--as10-slab))!important;
  border:1px solid rgba(208,163,103,.30)!important;color:#fff1d9!important
}

/* ---------- Every page gets a visible title slab ---------- */
.workspace94 .page-head{
  position:relative!important;overflow:hidden!important;
  margin:0 0 18px!important;padding:21px 23px!important;
  border:1px solid var(--as10-line)!important;border-radius:20px!important;
  background:
    radial-gradient(circle at 92% 18%,rgba(208,163,103,.10),transparent 25%),
    linear-gradient(145deg,var(--as10-slab-2),var(--as10-slab))!important;
  box-shadow:0 16px 38px rgba(0,0,0,.11)!important
}
.workspace94 .page-head:before{
  content:"";position:absolute;right:-52px;bottom:-58px;width:300px;height:120px;
  border:1px solid rgba(208,163,103,.17);border-radius:34px;transform:rotate(-9deg);
  box-shadow:0 -10px 0 rgba(208,163,103,.018),0 -20px 0 rgba(208,163,103,.012)
}
.workspace94 .page-head:after{
  content:"";position:absolute;left:23px;bottom:-1px;width:120px;height:2px;
  background:linear-gradient(90deg,var(--as10-gold),transparent)
}
.workspace94 .page-head>*{position:relative;z-index:1}
.workspace94 .page-head small{
  color:var(--as10-gold)!important;font-size:8px!important;letter-spacing:.16em!important
}
.workspace94 .page-head h1{
  color:var(--as10-text)!important;font-size:clamp(28px,2.7vw,42px)!important;
  letter-spacing:-.05em!important;margin-top:5px!important
}
.workspace94 .page-head p{color:var(--as10-muted)!important}

/* ---------- Cards visibly become material slabs ---------- */
.workspace94 .card,
.workspace94 .section,
.workspace94 .module-search-bar{
  position:relative!important;
  border:1px solid var(--as10-line)!important;border-radius:17px!important;
  background:
    linear-gradient(145deg,rgba(208,163,103,.018),transparent 28%),
    var(--as10-slab)!important;
  color:var(--as10-text)!important;
  box-shadow:0 12px 30px rgba(0,0,0,.09)!important
}
.workspace94 .section:before,
.workspace94 .card.section:before{
  content:"";position:absolute;left:18px;top:-1px;width:72px;height:1px;
  background:linear-gradient(90deg,var(--as10-gold),transparent);opacity:.55
}
.workspace94 .section-title h2,
.workspace94 .section-title h3,
.workspace94 .card h2,.workspace94 .card h3{color:var(--as10-text)!important}
.workspace94 .section-title small,.workspace94 .card small{color:var(--as10-muted)!important}

/* ---------- Stats ---------- */
.workspace94 .stats{gap:10px!important}
.workspace94 .stat{
  min-height:116px!important;padding:16px!important;
  border-radius:15px!important;border:1px solid var(--as10-line)!important;
  background:var(--as10-slab)!important;
  box-shadow:0 10px 26px rgba(0,0,0,.075)!important
}
.workspace94 .stat:after{
  content:"";position:absolute;left:16px;right:46%;bottom:0;height:2px;
  background:var(--accent,var(--as10-gold));opacity:.56
}
.workspace94 .stat .label{color:var(--as10-muted)!important;font-size:8px!important;letter-spacing:.10em!important}
.workspace94 .stat .value{color:var(--as10-text)!important;font-size:30px!important;letter-spacing:-.045em!important}
.workspace94 .stat .meta{color:var(--as10-muted)!important}

/* ---------- Buttons/forms ---------- */
.workspace94 .primary-btn{
  background:linear-gradient(135deg,#d9ad72,#b98247)!important;
  color:#12100d!important;border:1px solid #dcb47e!important;
  box-shadow:0 8px 22px rgba(185,130,70,.13)!important
}
.workspace94 .secondary-btn{
  background:var(--as10-slab-2)!important;color:var(--as10-text-2)!important;
  border:1px solid var(--as10-line)!important
}
.workspace94 .secondary-btn:hover{
  border-color:var(--as10-gold-line)!important;background:#172125!important
}
.workspace94 input,
.workspace94 select,
.workspace94 textarea{
  background:var(--as10-input)!important;color:var(--as10-text)!important;
  border:1px solid var(--as10-line)!important;border-radius:10px!important
}
.workspace94 input:focus,
.workspace94 select:focus,
.workspace94 textarea:focus{
  border-color:var(--as10-gold-line)!important;
  box-shadow:0 0 0 3px rgba(208,163,103,.07)!important
}
.workspace94 label{color:var(--as10-text-2)!important}
.workspace94 label>small{color:var(--as10-muted)!important}

/* ---------- Tables: materially different ---------- */
.workspace94 .table-wrap,
.workspace94 .command-table-wrap{
  border:1px solid var(--as10-line)!important;border-radius:15px!important;
  overflow:auto!important;background:var(--as10-slab)!important
}
.workspace94 .data-table{
  border-collapse:separate!important;border-spacing:0!important
}
.workspace94 .data-table th{
  position:sticky;top:0;z-index:2;
  padding:12px 13px!important;
  background:
    linear-gradient(180deg,rgba(208,163,103,.055),transparent),
    var(--as10-slab-3)!important;
  color:var(--as10-muted)!important;
  border-bottom:1px solid var(--as10-line)!important;
  font-size:8px!important;font-weight:900!important;letter-spacing:.11em!important
}
.workspace94 .data-table td{
  padding:13px!important;color:var(--as10-text-2)!important;
  border-bottom:1px solid var(--as10-line-soft)!important;
  background:transparent!important
}
.workspace94 .data-table tbody tr:hover td{
  background:rgba(208,163,103,.035)!important
}
.workspace94 .data-table tbody tr:last-child td{border-bottom:0!important}

/* ---------- Modals ---------- */
.workspace94 .modal-backdrop{
  background:rgba(3,6,8,.74)!important;backdrop-filter:blur(10px)!important
}
.workspace94 .modal-card{
  border:1px solid var(--as10-line)!important;border-radius:22px!important;
  background:
    radial-gradient(circle at 96% 0,rgba(208,163,103,.10),transparent 26%),
    var(--as10-slab)!important;
  box-shadow:0 36px 110px rgba(0,0,0,.48)!important
}
.workspace94 .modal-head{
  padding-bottom:15px!important;border-bottom:1px solid var(--as10-line-soft)!important
}
.workspace94 .modal-head small{color:var(--as10-gold)!important;letter-spacing:.14em!important}
.workspace94 .modal-head h2{font-size:26px!important;letter-spacing:-.035em!important}

/* ---------- Command Center gets visibly new layout language ---------- */
.workspace94 .as-command-hero{
  min-height:210px!important;padding:27px 28px!important;
  border:1px solid var(--as10-line)!important;border-radius:22px!important;
  background:
    radial-gradient(circle at 83% 24%,rgba(208,163,103,.13),transparent 25%),
    linear-gradient(145deg,var(--as10-slab-2),var(--as10-slab))!important;
  box-shadow:0 18px 44px rgba(0,0,0,.12)!important
}
.workspace94 .as-command-hero:before{
  content:"";position:absolute;right:-72px;bottom:-90px;width:470px;height:180px;
  border:1px solid rgba(208,163,103,.17);border-radius:44px;transform:rotate(-8deg);
  box-shadow:0 -13px 0 rgba(208,163,103,.018),0 -26px 0 rgba(208,163,103,.012)
}
.workspace94 .as-command-hero-copy h1{
  font-size:clamp(34px,3.5vw,52px)!important;letter-spacing:-.055em!important
}
.workspace94 .as-command-hero-copy p{color:var(--as10-muted)!important}
.workspace94 .command-eyebrow{color:var(--as10-gold)!important;letter-spacing:.15em!important}
.workspace94 .as-health-card,
.workspace94 .as-command-clock{
  border:1px solid var(--as10-line)!important;border-radius:14px!important;
  background:rgba(10,16,19,.52)!important;backdrop-filter:blur(8px)
}

.workspace94 .as-quick-actions{
  display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;
  gap:10px!important;margin:13px 0!important
}
.workspace94 .as-quick-actions>button{
  min-height:82px!important;padding:14px!important;
  border:1px solid var(--as10-line)!important;border-radius:14px!important;
  background:var(--as10-slab)!important;box-shadow:0 9px 22px rgba(0,0,0,.075)!important
}
.workspace94 .as-quick-actions>button:hover{
  border-color:var(--as10-gold-line)!important;
  background:linear-gradient(145deg,rgba(208,163,103,.075),var(--as10-slab))!important;
  transform:translateY(-2px)
}
.workspace94 .as-quick-actions>button>span{
  background:rgba(208,163,103,.12)!important;color:var(--as10-gold-2)!important
}

.workspace94 .as-command-kpis{
  display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:10px!important
}
.workspace94 .as-kpi-card{
  position:relative;min-height:92px!important;padding:15px!important;
  border:1px solid var(--as10-line)!important;border-radius:14px!important;
  background:var(--as10-slab)!important;text-align:left!important;
  box-shadow:0 9px 22px rgba(0,0,0,.07)!important
}
.workspace94 .as-kpi-card:before{
  content:"";position:absolute;left:0;top:14px;bottom:14px;width:2px;background:var(--as10-gold);opacity:.68
}
.workspace94 .as-kpi-card small{color:var(--as10-muted)!important}
.workspace94 .as-kpi-card strong{font-size:29px!important;color:var(--as10-text)!important}
.workspace94 .as-kpi-card span{color:var(--as10-muted)!important}

/* factory flow resembles CNC node rail */
.workspace94 .as-flow-track{
  padding:12px!important;border:1px solid var(--as10-line-soft)!important;
  border-radius:15px!important;background:var(--as10-bg-2)!important
}
.workspace94 .as-flow-step{
  position:relative!important;
  border:1px solid var(--as10-line)!important;border-radius:12px!important;
  background:var(--as10-slab-2)!important
}
.workspace94 .as-flow-step:hover{
  border-color:var(--as10-gold-line)!important
}
.workspace94 .as-flow-number{
  background:rgba(208,163,103,.13)!important;
  border:1px solid rgba(208,163,103,.28)!important;color:var(--as10-gold-2)!important
}

/* ---------- Workforce / payroll ---------- */
.workspace94 .workforce-clean-tabs{
  padding:5px!important;border:1px solid var(--as10-line)!important;
  border-radius:14px!important;background:var(--as10-slab-3)!important
}
.workspace94 .workforce-clean-tabs button.active{
  color:#fff2dc!important;background:rgba(208,163,103,.13)!important;
  box-shadow:inset 0 0 0 1px rgba(208,163,103,.26)!important
}
.workspace94 .clean-payroll-kpis article{
  min-height:116px!important;padding:16px!important;
  border:1px solid var(--as10-line)!important;border-radius:15px!important;
  background:var(--as10-slab)!important
}
.workspace94 .clean-payroll-kpis article:before{
  content:"";position:absolute;left:16px;right:48%;bottom:0;height:2px;background:var(--as10-gold);opacity:.55
}
.workspace94 .clean-payroll-ready,
.workspace94 .clean-payroll-alert,
.workspace94 .clean-detail-grid>div{
  border-color:var(--as10-line)!important;background:var(--as10-slab-2)!important
}
.workspace94 .clean-payable>strong{color:var(--as10-gold-2)!important}

/* ---------- Common rows in orders/planning/inventory ---------- */
.workspace94 .compact-row,
.workspace94 .planner-entry-card,
.workspace94 .planner-unscheduled-card,
.workspace94 .material-command-order,
.workspace94 .dispatch-row,
.workspace94 .order-timeline-card,
.workspace94 .operator-performance-row,
.workspace94 .finance-expense-row{
  border:1px solid var(--as10-line)!important;border-radius:12px!important;
  background:var(--as10-slab-2)!important
}
.workspace94 .compact-row:hover,
.workspace94 .planner-entry-card:hover,
.workspace94 .material-command-order:hover,
.workspace94 .dispatch-row:hover{
  border-color:var(--as10-gold-line)!important;background:#172125!important
}

/* ---------- Light theme keeps material/workbench concept ---------- */
html[data-theme="studio"] .workspace94 .workspace91c-sidebar{
  background:linear-gradient(160deg,rgba(208,163,103,.05),#191a19)!important
}
html[data-theme="studio"] .workspace94 .workspace91c-menu-item{color:#a3a6a1!important}
html[data-theme="studio"] .workspace94 .workspace91c-menu-item.active{color:#fff4df!important}
html[data-theme="studio"] .workspace94 .workspace91c-topbar{
  background:rgba(255,253,248,.92)!important;box-shadow:0 14px 42px rgba(68,53,31,.09)!important
}
html[data-theme="studio"] .workspace94 .workspace91c-main,
html[data-theme="studio"] .workspace94 .workspace86-main{
  background:var(--as10-bg)!important
}
html[data-theme="studio"] .workspace94 .secondary-btn:hover{
  background:#efe8dc!important
}

/* ---------- Mobile: obvious new material dock and headers ---------- */
@media(max-width:800px){
  .workspace94.as211v10-shell{
    background:var(--as10-bg)!important
  }
  .workspace94 .workspace91c-topbar{
    min-height:60px!important;
    background:color-mix(in srgb,var(--as10-slab) 94%,transparent)!important;
    border-bottom:1px solid var(--as10-line)!important;
    box-shadow:0 9px 28px rgba(0,0,0,.16)!important
  }
  .workspace94 .workspace91c-main>.content{
    padding:12px 10px 92px!important
  }
  .workspace94 .page-head{
    padding:17px!important;border-radius:16px!important
  }
  .workspace94 .page-head h1{font-size:28px!important}
  .workspace94 .card,.workspace94 .section{border-radius:15px!important}
  .workspace94 .as-command-hero{padding:18px!important;min-height:0!important}
  .workspace94 .as-quick-actions{
    grid-template-columns:repeat(2,minmax(0,1fr))!important
  }
  .workspace94 .as-command-kpis{
    grid-template-columns:repeat(2,minmax(0,1fr))!important
  }
  .workspace94 .as94-mobile-tabbar{
    left:10px!important;right:10px!important;bottom:8px!important;width:auto!important;
    padding:5px!important;
    border:1px solid var(--as10-line)!important;border-radius:18px!important;
    background:color-mix(in srgb,var(--as10-slab) 95%,transparent)!important;
    box-shadow:0 20px 54px rgba(0,0,0,.32)!important;backdrop-filter:blur(22px)!important
  }
  .workspace94 .as94-mobile-tab{
    border-radius:12px!important;color:var(--as10-muted)!important
  }
  .workspace94 .as94-mobile-tab.active{
    color:var(--as10-gold-2)!important;background:rgba(208,163,103,.12)!important
  }
  .workspace94 .as94-mobile-scan{
    color:#11100d!important;
    background:linear-gradient(145deg,#d8aa6d,#b67c3f)!important;
    transform:translateY(-5px)!important;border-radius:13px!important
  }
  .workspace94 .modal-card{
    border-radius:20px 20px 0 0!important
  }
}

/* Dedicated print/payslip layouts continue to control themselves. */
@media print{
  .workspace94 .page-head:before,
  .workspace94 .page-head:after,
  .workspace94 .workspace91c-main:before,
  .workspace94 .as-command-hero:before{display:none!important}
}