/* Auto Smart Carwash — ASP yellow / white / black brand layer.
   Loaded last so the product has one visual language without rewriting business UI CSS. */
:root{
  --asp-yellow:#FEC521;
  --asp-yellow-2:#FFD747;
  --asp-yellow-dark:#B47A00;
  --asp-yellow-soft:#FFF5C4;
  --asp-black:#0B0B0B;
  --asp-black-2:#171717;
  --asp-white:#FFFFFF;
  --asp-canvas:#F6F6F2;
  --asp-line:#E6E3D9;

  /* Compatibility bridge for the original UI tokens. */
  --ink:#161616;
  --ink-soft:#5E5B52;
  --muted:#858076;
  --line:#E2DED2;
  --line-soft:#EEEAE0;
  --paper:#FFFFFF;
  --canvas:#F6F6F2;
  --canvas-2:#EFEEE8;
  --sidebar:#0B0B0B;
  --sidebar-2:#171717;
  --green:#A56E00;
  --green-dark:#765000;
  --green-soft:#FFF5C4;
  --mint:#FEC521;
  --lime:#FFE36A;
  --blue:#1B1B1B;
  --blue-soft:#F0EFEA;
  --purple:#2D2D2D;
  --purple-soft:#F2F1EC;
  --orange:#C88900;
  --orange-soft:#FFF3C8;
  --shadow:0 18px 45px rgba(11,11,11,.08);
  --shadow-sm:0 8px 24px rgba(11,11,11,.07);
}

html{accent-color:var(--asp-yellow)}
body{background:var(--asp-canvas);color:var(--ink)}
::selection{background:var(--asp-yellow);color:var(--asp-black)}
::-webkit-scrollbar-thumb{background:#C7C1AF}

/* Shell */
.sidebar{
  background:
    linear-gradient(180deg,rgba(254,197,33,.055),transparent 18%),
    linear-gradient(180deg,var(--asp-black),#111 68%,#080808);
  color:#F4F2EA;
  border-right:1px solid rgba(254,197,33,.14);
  box-shadow:12px 0 40px rgba(0,0,0,.12);
}
.ambient-one{background:radial-gradient(circle,rgba(254,197,33,.23),transparent 68%)}
.ambient-two{background:radial-gradient(circle,rgba(254,197,33,.11),transparent 70%)}
.brand-mark{
  width:48px;
  border-radius:12px;
  background:var(--asp-yellow);
  color:var(--asp-black);
  box-shadow:0 10px 28px rgba(254,197,33,.25);
  font-weight:950;
  font-size:.76rem;
  letter-spacing:-.06em;
  transform:none;
}
.brand-mark-asp{font-style:italic}
.brand-copy strong{color:#fff}
.brand-copy strong span{color:var(--asp-yellow)}
.brand-copy small,.nav-caption,.workspace-chip small{color:#8E8878}
.workspace-chip{background:rgba(255,255,255,.045);border-color:rgba(254,197,33,.12)}
.workspace-icon{background:rgba(254,197,33,.12);color:var(--asp-yellow)}
.side-link{color:#AAA496}
.side-link:hover{color:#fff;background:rgba(254,197,33,.08)}
.side-link.active{
  color:#fff;
  background:linear-gradient(100deg,rgba(254,197,33,.19),rgba(254,197,33,.055));
  box-shadow:inset 0 0 0 1px rgba(254,197,33,.16);
}
.side-link.active:before{background:var(--asp-yellow);box-shadow:0 0 15px rgba(254,197,33,.52)}
.side-link.active .side-icon{background:rgba(254,197,33,.13);color:var(--asp-yellow)}
.nav-pill{background:var(--asp-yellow);color:var(--asp-black)}
.nav-pill.warm,.nav-pill.pro{background:#fff;color:#111}
.profile-card,.system-card{border-color:rgba(254,197,33,.11)}
.avatar,.top-avatar{background:linear-gradient(145deg,#262626,#0B0B0B);color:var(--asp-yellow)}
.live-dot{background:#36B56C;box-shadow:0 0 0 4px rgba(54,181,108,.12)}
.profile-popover{background:#151515;border-color:rgba(254,197,33,.14)}
.profile-popover button.account-action:hover{color:var(--asp-yellow);background:rgba(254,197,33,.08)}

.topbar{background:rgba(246,246,242,.91);border-bottom-color:rgba(214,208,191,.78)}
.live-clock i,.section-kicker,.hero-kicker{color:#9A6900}
.notification-btn span{background:var(--asp-yellow);border-color:#fff}

/* Shared components */
.btn-primary-cf,
.login-submit,
.scan-button,
.pending-card-actions button.pay,
.discovered-printer button,
.table-card-actions button.primary{
  color:var(--asp-black)!important;
  background:linear-gradient(135deg,var(--asp-yellow-2),var(--asp-yellow))!important;
  border-color:var(--asp-yellow)!important;
  box-shadow:0 10px 24px rgba(254,197,33,.22)!important;
}
.btn-primary-cf:hover,.login-submit:hover,.scan-button:hover{color:#000!important;filter:brightness(.98)}
.btn-secondary-cf:hover{border-color:#CBA527;background:var(--asp-yellow-soft);color:#5E4100}
.metric-icon.green,.table-management-metrics .green,.counting-overview>span,
.owner-rental-product-icon,.admin-rental-product-icon,.merchant-plan-icon,
.platform-overview-item>span,.live-price-head>span,.feature-selector-icon{
  background:var(--asp-yellow-soft)!important;color:#8A5D00!important;
}
input:focus,select:focus,textarea:focus,.field-wrap:focus-within{
  border-color:#E0AE12!important;
  box-shadow:0 0 0 3px rgba(254,197,33,.14)!important;
}
input[type="checkbox"],input[type="radio"]{accent-color:#D89E00}

/* Cards and tables */
.panel,.metric-card,.data-panel,.counting-card,.service-order-card,.platform-package-card,
.platform-settings-card,.billing-summary-card,.owner-notification-card{
  border-color:var(--asp-line);
}
.service-order-card{border-left-color:var(--asp-yellow)}
.data-table th{background:#FAF9F4;color:#6F695D}
.data-table tbody tr:hover{background:#FFFCF0}
.counting-overview{border-color:#E8D48B;background:linear-gradient(135deg,#FFF9DE,#fff)}
.counting-card:hover{border-color:#E3CA72;box-shadow:0 13px 30px rgba(60,45,0,.09)}
.counting-uid,.counting-token-code{background:#F8F7F2}

/* Device/counting: brand yellow for interaction, status colors stay semantic. */
.pairing-code-card{border-color:#E8CF76;background:linear-gradient(145deg,#FFF9DF,#FFF4B7)}
.pairing-code-card small,.pairing-code-card button,.pairing-steps>div.active{color:#805700}
.pairing-steps>div.active span{background:var(--asp-yellow);color:#111}
.agent-install-tabs button.active{border-color:#E0B72B;background:var(--asp-yellow-soft);color:#6E4B00}
.agent-card.online .agent-machine{background:#EAF8F0;color:#188554}
.agent-card.online .agent-state,.route-health.online{color:#188554}
.security-chip{background:#F3F2EC;color:#302F2A}

/* Cashier: one ASP accent regardless of merchant preset. */
.cashier-workspace,
.cashier-workspace.merchant-carwash,
.cashier-workspace.merchant-retail,
.cashier-workspace.merchant-workshop{
  --cashier-accent:#FEC521!important;
  --cashier-accent-strong:#B47A00!important;
  --cashier-accent-soft:#FFF5C4!important;
  --cashier-accent-shadow:rgba(254,197,33,.24)!important;
  color:#181818;
}
.cashier-only-shell{background:radial-gradient(circle at 7% 0,#FFF4BA 0,transparent 29%),#F6F6F2}
.cashier-pos-brand>span,.cashier-segmented button.active,.cashier-pending-submit,.cashier-new-order,.cashier-pay-button{
  color:#0B0B0B!important;background:linear-gradient(135deg,#FFD747,#FEC521)!important;
}
.cashier-pos-brand>span i,.cashier-new-order i,.cashier-pay-button i{color:#0B0B0B!important}
.cashier-printer-switch button.active{color:#8A5D00;background:#FFF9DF}
.cashier-context-item strong i,.cashier-product-copy b,.cashier-summary .cashier-total strong,
.cashier-cart-head>span,.cashier-workspace-switch button.active,.cashier-pending-row-top>strong{color:#8A5D00!important}
.cashier-table-area-tabs button.active{background:var(--asp-yellow)!important;border-color:var(--asp-yellow)!important;color:#111!important}
.cashier-table-map-item.selected{outline-color:rgba(254,197,33,.26);border-color:#E2B214;background:#FFF9D9;color:#5E4100}
.cashier-table-choose.selected{border-color:#E5C14A;background:#FFF9DE;color:#554000}

/* Login/register */
.login-showcase{background:
  radial-gradient(circle at 18% 10%,rgba(254,197,33,.2),transparent 35%),
  linear-gradient(145deg,#0B0B0B,#181818)!important}
.login-showcase .brand-mark{background:var(--asp-yellow);color:#0B0B0B}
.login-showcase .brand-copy strong span,.mobile-login-brand strong span{color:#B77C00}
.login-form-side{background:#F8F7F2}
.login-card-new{border:1px solid #E9E2CF;box-shadow:0 22px 58px rgba(29,23,6,.12)}
.login-submit{color:#111}

/* Cafe/e-menu */
body.emenu-public{
  --ink:#111111;--muted:#78736A;--green:#A36D00;--mint:#FEC521;--paper:#F6F6F2;--line:#E5E0D4;--gold:#FEC521;--white:#fff;
  background:#F6F6F2;
}
.emenu-ambient.one{background:#FFF0A3}.emenu-ambient.two{background:#ECE9E1}
.emenu-brand>span,.emenu-footer>div>span{background:#0B0B0B;color:var(--asp-yellow)}
.emenu-table-chip>i{background:var(--asp-yellow);color:#111}
.emenu-hero{background:linear-gradient(115deg,#090909,#1B1B1B);box-shadow:0 25px 65px rgba(0,0,0,.2)}
.emenu-kicker,.emenu-kicker i,.emenu-hero-meta i{color:var(--asp-yellow)}
.emenu-hero p{color:#E7E3D9}
.plate{background:linear-gradient(145deg,#fff,#E9E4D8);color:#9B6900;box-shadow:0 24px 50px rgba(0,0,0,.28),inset 0 0 0 16px #F5F1E7}
.emenu-categories button.active,.public-stepper,.emenu-cart-fab{background:#0B0B0B;color:#fff}
.public-menu-copy>strong{color:#8C5E00}.public-menu-copy>button{background:var(--asp-yellow);color:#111}
.emenu-cart-fab>span b{background:var(--asp-yellow);color:#111}
.emenu-footer a{color:#8A5D00}

/* Member portal */
.member-brand>span{background:#0B0B0B!important;color:var(--asp-yellow)!important}
.member-btn.primary{background:var(--asp-yellow)!important;color:#111!important}
.member-top{border-bottom-color:#E8E2D2}

/* High-contrast yellow focus for keyboard users. */
:focus-visible{outline:3px solid rgba(254,197,33,.75);outline-offset:2px}

/* Remaining legacy POS accents normalized to ASP yellow/black. */
.cashier-category-tabs button.active,
.cashier-payment-methods button.active{
  border-color:#E6C34D!important;
  background:#FFF8D8!important;
  color:#7A5200!important;
}
.cashier-add-icon,
.cashier-cart-head>span{
  background:#FFF5C4!important;
  color:#7A5200!important;
}
.cashier-product-qty,.cashier-workspace-switch button.active b{background:#FEC521!important;color:#0B0B0B!important}
.cashier-order-total strong,.cashier-product-lock b{color:#8A5D00!important}
.cashier-order-actions button.primary,
.cashier-auth-actions>button:last-child,
.cashier-pending-submit{
  background:linear-gradient(135deg,#FFD747,#FEC521)!important;
  color:#0B0B0B!important;
  box-shadow:0 8px 18px rgba(254,197,33,.22)!important;
}
.cashier-workspace-switch button:hover,.cashier-workspace-switch button.active{color:#8A5D00!important}
.cashier-workspace-switch button b{background:#F1EEE4!important;color:#6A6459!important}
.cashier-workspace-switch button.active b{background:#FEC521!important;color:#111!important}