/* =====================================================================
   BUILD 211V11 — AS SURFACE INTERIOR SIGNATURE SYSTEM
   Loaded after every previous stylesheet.
   ===================================================================== */

#app .workspace94.as211v11-shell{
  --as11-gold:#d3a568;
  --as11-gold-2:#e4bc83;
  --as11-gold-soft:rgba(211,165,104,.12);
  --as11-gold-line:rgba(211,165,104,.34);
  --as11-panel:#10181d;
  --as11-panel-2:#141d22;
  --as11-panel-3:#0c1317;
  --as11-line:#303a40;
  --as11-line-soft:#222c31;
  --as11-text:#f3f2ee;
  --as11-muted:#849097;
  --as11-muted-2:#5e6a70;
}

/* -------- remove remaining legacy blue from NORMAL controls -------- */
#app .workspace94.as211v11-shell .primary-btn,
#app .workspace94.as211v11-shell button.primary-btn,
#app .workspace94.as211v11-shell .quick-actions .primary-btn{
  background:linear-gradient(135deg,#dbb174 0%,#c28c4e 100%)!important;
  border:1px solid #e0b881!important;
  color:#14110d!important;
  box-shadow:0 9px 25px rgba(194,140,78,.16)!important;
}
#app .workspace94.as211v11-shell .primary-btn:hover{
  filter:brightness(1.045)!important;
  transform:translateY(-1px)
}
#app .workspace94.as211v11-shell .tabs button.active,
#app .workspace94.as211v11-shell .workforce-clean-tabs button.active{
  background:var(--as11-gold-soft)!important;
  border-color:var(--as11-gold-line)!important;
  color:#fff0d8!important;
  box-shadow:inset 0 0 0 1px rgba(211,165,104,.15)!important
}

/* -------- sidebar: simpler, no blue tile, no box around every icon -------- */
#app .workspace94.as211v11-shell .workspace91c-menu-icon{
  border:0!important;
  background:transparent!important;
  color:#6f7c83!important;
  box-shadow:none!important
}
#app .workspace94.as211v11-shell .workspace91c-menu-item{
  border-radius:10px!important
}
#app .workspace94.as211v11-shell .workspace91c-menu-item.active{
  background:linear-gradient(90deg,rgba(211,165,104,.16),rgba(211,165,104,.035))!important;
  border:1px solid rgba(211,165,104,.23)!important;
  color:#fff5e5!important;
  box-shadow:inset 3px 0 0 var(--as11-gold)!important
}
#app .workspace94.as211v11-shell .workspace91c-menu-item.active .workspace91c-menu-icon{
  color:var(--as11-gold-2)!important;
  background:rgba(211,165,104,.08)!important
}
#app .workspace94.as211v11-shell .workspace91c-menu-group-label{
  color:#69767c!important;
  letter-spacing:.17em!important
}

/* -------- universal AS Surface signature page header -------- */
#app .workspace94.as211v11-shell .page-head{
  min-height:128px!important;
  padding:24px 26px!important;
  overflow:hidden!important;
  border:1px solid var(--as11-line)!important;
  border-radius:21px!important;
  background:
    radial-gradient(circle at 87% 18%,rgba(211,165,104,.10),transparent 24%),
    linear-gradient(145deg,#131c20,#10181c)!important;
  box-shadow:0 15px 38px rgba(0,0,0,.12)!important
}
#app .workspace94.as211v11-shell .page-head::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  left:auto!important;right:-68px!important;top:-80px!important;bottom:auto!important;
  width:430px!important;height:230px!important;
  border:1px solid rgba(211,165,104,.16)!important;
  border-radius:48px!important;
  transform:rotate(16deg)!important;
  background:linear-gradient(145deg,rgba(211,165,104,.035),transparent)!important;
  box-shadow:
    0 15px 0 rgba(211,165,104,.018),
    0 30px 0 rgba(211,165,104,.012)!important;
  opacity:1!important
}
#app .workspace94.as211v11-shell .page-head::after{
  content:""!important;
  position:absolute!important;
  left:26px!important;right:auto!important;bottom:0!important;top:auto!important;
  width:145px!important;height:2px!important;
  background:linear-gradient(90deg,var(--as11-gold),transparent)!important;
  transform:none!important;opacity:.88!important
}
#app .workspace94.as211v11-shell .page-head>div:first-child{
  position:relative;z-index:2;max-width:72%
}
#app .workspace94.as211v11-shell .page-head>div:first-child::after{
  content:"";
  position:absolute;left:0;top:-12px;width:250px;height:60px;
  pointer-events:none;opacity:.16;
  background:
    radial-gradient(circle at 3px 3px,var(--as11-gold) 0 2px,transparent 2.5px),
    linear-gradient(12deg,transparent 48%,rgba(211,165,104,.38) 49% 50%,transparent 51%);
  background-size:72px 42px,100% 100%
}
#app .workspace94.as211v11-shell .page-head small{
  position:relative;z-index:2;
  color:var(--as11-gold-2)!important;
  font-size:8px!important;font-weight:900!important;letter-spacing:.17em!important
}
#app .workspace94.as211v11-shell .page-head h1{
  position:relative;z-index:2;
  margin:6px 0 6px!important;
  color:var(--as11-text)!important;
  font-size:clamp(30px,2.6vw,43px)!important;
  line-height:1!important;letter-spacing:-.05em!important
}
#app .workspace94.as211v11-shell .page-head p{
  position:relative;z-index:2;
  color:#93a0a6!important;
  font-size:11px!important;line-height:1.55!important
}
#app .workspace94.as211v11-shell .page-head>.quick-actions,
#app .workspace94.as211v11-shell .page-head>button{
  position:relative;z-index:3
}

/* -------- KPI language: gold for neutral information, semantic colors only when meaningful -------- */
#app .workspace94.as211v11-shell .stat[style*="var(--blue)"],
#app .workspace94.as211v11-shell .stat[style*="var(--purple)"]{
  --accent:var(--as11-gold)!important
}
#app .workspace94.as211v11-shell .stat{
  border:1px solid var(--as11-line)!important;
  background:linear-gradient(145deg,rgba(211,165,104,.018),#11191e)!important;
  box-shadow:0 10px 25px rgba(0,0,0,.08)!important
}
#app .workspace94.as211v11-shell .stat::after{
  height:2px!important;left:14px!important;right:58%!important
}
#app .workspace94.as211v11-shell .stat .label{
  color:#8d999f!important;font-size:8px!important;letter-spacing:.11em!important
}
#app .workspace94.as211v11-shell .stat .value{
  font-size:29px!important;line-height:1!important
}
#app .workspace94.as211v11-shell .stat .meta{
  color:#7c888e!important;font-size:9px!important
}

/* -------- CRM: no rainbow pipeline; stages use material gold, Won/Lost remain semantic -------- */
#app .workspace94.as211v11-shell .crm-pipeline-strip{
  padding:8px!important;
  border:1px solid var(--as11-line)!important;
  border-radius:15px!important;
  background:#0c1317!important;
  gap:7px!important
}
#app .workspace94.as211v11-shell .crm-stage{
  min-width:128px!important;
  border:1px solid var(--as11-line)!important;
  border-top:1px solid var(--as11-line)!important;
  border-radius:12px!important;
  background:#11191e!important;
  color:var(--as11-text)!important
}
#app .workspace94.as211v11-shell .crm-stage:hover{
  border-color:var(--as11-gold-line)!important;
  background:#162024!important
}
#app .workspace94.as211v11-shell .crm-stage.active{
  border-color:var(--as11-gold-line)!important;
  background:linear-gradient(145deg,rgba(211,165,104,.13),#121a1f)!important;
  box-shadow:inset 0 0 0 1px rgba(211,165,104,.12)!important
}
#app .workspace94.as211v11-shell .crm-stage.active::before{
  content:"";position:absolute;left:12px;right:55%;top:0;height:2px;background:var(--as11-gold)
}
#app .workspace94.as211v11-shell .crm-stage[data-crm-status="Won"]{
  border-top-color:rgba(97,188,134,.68)!important
}
#app .workspace94.as211v11-shell .crm-stage[data-crm-status="Lost"]{
  border-top-color:rgba(226,117,123,.68)!important
}
#app .workspace94.as211v11-shell .crm-stage strong{font-size:22px!important}
#app .workspace94.as211v11-shell .crm-stage span{font-size:10px!important}
#app .workspace94.as211v11-shell .crm-stage small{color:#7e8a90!important}

/* -------- Accounts / finance: tabs + ageing become one coherent material strip -------- */
#app .workspace94.as211v11-shell .billing-ageing{
  display:grid!important;grid-template-columns:repeat(5,1fr)!important;
  padding:0!important;overflow:hidden!important;
  background:#10181d!important
}
#app .workspace94.as211v11-shell .billing-ageing>div{
  padding:15px 16px!important;
  border-right:1px solid var(--as11-line-soft)!important
}
#app .workspace94.as211v11-shell .billing-ageing>div:last-child{border-right:0!important}
#app .workspace94.as211v11-shell .billing-ageing small{color:#7e8a90!important}
#app .workspace94.as211v11-shell .billing-ageing strong{font-size:18px!important}

/* -------- tables: larger, less cramped, less ERP-like -------- */
#app .workspace94.as211v11-shell .table-wrap,
#app .workspace94.as211v11-shell .command-table-wrap{
  border:1px solid var(--as11-line)!important;
  border-radius:15px!important;
  background:#0f171b!important
}
#app .workspace94.as211v11-shell .data-table th{
  padding:13px 14px!important;
  background:
    linear-gradient(180deg,rgba(211,165,104,.055),transparent),
    #172128!important;
  color:#a0aaaf!important;
  border-bottom:1px solid #38444b!important;
  font-size:8.5px!important;letter-spacing:.10em!important
}
#app .workspace94.as211v11-shell .data-table td{
  padding:15px 14px!important;
  color:#cbd1d3!important;
  font-size:10px!important;line-height:1.45!important;
  border-bottom:1px solid #222c31!important
}
#app .workspace94.as211v11-shell .data-table td strong{
  color:#f1f1ed!important;font-size:10.5px!important
}
#app .workspace94.as211v11-shell .data-table td small{
  color:#88949a!important;font-size:8.5px!important;line-height:1.4!important
}
#app .workspace94.as211v11-shell .data-table tbody tr:hover td{
  background:rgba(211,165,104,.035)!important
}

/* -------- sections / cards: cleaner hierarchy -------- */
#app .workspace94.as211v11-shell .card.section{
  padding:18px!important
}
#app .workspace94.as211v11-shell .section-title{
  margin-bottom:13px!important
}
#app .workspace94.as211v11-shell .section-title h2{
  color:#f1f1ed!important;font-size:18px!important;letter-spacing:-.03em!important
}
#app .workspace94.as211v11-shell .section-title small{
  color:#859197!important;font-size:9px!important
}
#app .workspace94.as211v11-shell .empty-state{
  min-height:78px!important;
  display:grid!important;place-items:center!important;
  border:1px dashed #313d43!important;border-radius:12px!important;
  color:#849097!important;background:#121a1f!important
}

/* -------- search bars / forms -------- */
#app .workspace94.as211v11-shell .module-search-bar,
#app .workspace94.as211v11-shell .list-search-bar{
  border:1px solid var(--as11-line)!important;
  border-radius:14px!important;
  background:#0f171b!important
}
#app .workspace94.as211v11-shell input,
#app .workspace94.as211v11-shell select,
#app .workspace94.as211v11-shell textarea{
  background:#0a1013!important;
  border-color:#303a40!important;
  color:#f0f1ee!important
}
#app .workspace94.as211v11-shell input:focus,
#app .workspace94.as211v11-shell select:focus,
#app .workspace94.as211v11-shell textarea:focus{
  border-color:var(--as11-gold-line)!important;
  box-shadow:0 0 0 3px rgba(211,165,104,.07)!important
}

/* -------- command center: make top section feel like one designed composition -------- */
#app .workspace94.as211v11-shell .as-command-hero{
  min-height:218px!important;
  background:
    radial-gradient(circle at 84% 18%,rgba(211,165,104,.13),transparent 24%),
    linear-gradient(145deg,#141d21,#10181c)!important
}
#app .workspace94.as211v11-shell .as-command-hero::after{
  content:"";position:absolute;left:41%;top:25px;width:390px;height:120px;
  opacity:.18;pointer-events:none;
  background:
    radial-gradient(circle at 4px 4px,var(--as11-gold) 0 2px,transparent 2.5px),
    linear-gradient(12deg,transparent 49%,rgba(211,165,104,.45) 50% 51%,transparent 52%);
  background-size:80px 52px,100% 100%
}
#app .workspace94.as211v11-shell .as-command-hero h1{
  font-size:clamp(37px,3.4vw,53px)!important
}
#app .workspace94.as211v11-shell .as-command-hero .primary-btn,
#app .workspace94.as211v11-shell .as-command-hero .secondary-btn{
  min-height:38px!important
}
#app .workspace94.as211v11-shell .as-quick-actions>button{
  border-color:#313c42!important;
  background:#11191e!important
}
#app .workspace94.as211v11-shell .as-quick-actions>button:first-child{
  border-color:var(--as11-gold-line)!important;
  background:linear-gradient(145deg,rgba(211,165,104,.11),#121a1f)!important
}
#app .workspace94.as211v11-shell .as-kpi-card{
  border-color:#303a40!important;background:#11191e!important
}
#app .workspace94.as211v11-shell .as-kpi-card::before{
  background:var(--as11-gold)!important
}
#app .workspace94.as211v11-shell .as-flow-step{
  border-color:#303a40!important;background:#121a1f!important
}
#app .workspace94.as211v11-shell .as-flow-number{
  color:var(--as11-gold-2)!important;
  background:rgba(211,165,104,.12)!important;
  border-color:rgba(211,165,104,.28)!important
}

/* -------- remaining legacy blue borders in generic cards -> gold/neutral -------- */
#app .workspace94.as211v11-shell .card[style*="var(--blue)"],
#app .workspace94.as211v11-shell [style*="border-color:var(--blue)"],
#app .workspace94.as211v11-shell [style*="--accent:var(--blue)"]{
  --accent:var(--as11-gold)!important;
  border-color:var(--as11-gold-line)!important
}
#app .workspace94.as211v11-shell [style*="--accent:var(--purple)"]{
  --accent:#b99269!important
}

/* -------- make blank canvas intentional rather than dead -------- */
#app .workspace94.as211v11-shell .workspace91c-main>.content::after{
  content:"";
  position:absolute;z-index:-1;pointer-events:none;
  width:460px;height:150px;right:20px;bottom:12px;
  border:1px solid rgba(211,165,104,.09);border-radius:42px;
  transform:rotate(-9deg);opacity:.55;
  box-shadow:0 -13px 0 rgba(211,165,104,.012),0 -26px 0 rgba(211,165,104,.008)
}

/* -------- mobile -------- */
@media(max-width:800px){
  #app .workspace94.as211v11-shell .page-head{
    min-height:0!important;padding:18px!important
  }
  #app .workspace94.as211v11-shell .page-head::before{
    width:210px!important;height:120px!important;right:-60px!important;top:-45px!important
  }
  #app .workspace94.as211v11-shell .page-head>div:first-child{max-width:82%}
  #app .workspace94.as211v11-shell .page-head h1{font-size:28px!important}
  #app .workspace94.as211v11-shell .crm-stage{min-width:114px!important}
  #app .workspace94.as211v11-shell .data-table td{font-size:9px!important;padding:12px 10px!important}
  #app .workspace94.as211v11-shell .as94-mobile-tabbar{
    border-color:#3a454b!important;
    background:rgba(15,23,27,.96)!important
  }
  #app .workspace94.as211v11-shell .as94-mobile-tab.active{
    color:var(--as11-gold-2)!important;background:rgba(211,165,104,.13)!important
  }
}

/* print templates retain existing dedicated design */
@media print{
  #app .workspace94.as211v11-shell .page-head::before,
  #app .workspace94.as211v11-shell .page-head::after,
  #app .workspace94.as211v11-shell .workspace91c-main>.content::after{display:none!important}
}