/* Womark A81 — interface redesign layer (on top of A80's ui-a80.css).
   Owns the shell, page anatomy and the main workspaces. It only restyles and
   re-lays-out existing elements; every id, handler and form field is unchanged. */

:root{
  --w-canvas:#f4f5f2;--w-surface:#fff;--w-surface-2:#fafbf9;--w-ink:#121512;--w-ink-2:#343a35;--w-muted:#687068;--w-faint:#959c94;
  --w-line:#e5e8e3;--w-line-2:#d6dbd4;--w-hover:#f0f2ee;
  --w-accent:#0f7a53;--w-accent-ink:#0b5c3e;--w-accent-soft:#e6f3ec;--w-accent-line:#b9dcc9;
  --w-warn:#9a6400;--w-warn-soft:#fdf4e2;--w-bad:#b3261e;--w-bad-soft:#fcebea;
  --w-r-lg:16px;--w-r:12px;--w-r-sm:9px;
  --w-shadow-1:0 1px 2px rgba(18,21,18,.05);
  --w-shadow-2:0 1px 2px rgba(18,21,18,.04),0 8px 24px rgba(18,21,18,.06);
  --w-sidebar:252px;--w-topbar:64px;
}

/* ============ Canvas ============ */
html body{background:var(--w-canvas)!important}
html body .main{background:transparent!important}

/* ============ Sidebar (desktop) ============ */
@media (min-width:701px){
  html body .sidebar{width:var(--w-sidebar)!important;background:var(--w-surface)!important;padding:0!important;display:flex!important;flex-direction:column!important;box-shadow:none!important}
  html body .main{margin-inline-start:var(--w-sidebar)!important}
  html[dir=ltr] body .main,html:not([dir=rtl]) body .main{margin-left:var(--w-sidebar)!important;margin-right:0!important}
  html[dir=rtl] body .main{margin-right:var(--w-sidebar)!important;margin-left:0!important}
  html body .sidebar-brand{height:var(--w-topbar)!important;min-height:var(--w-topbar)!important;margin:0!important;padding:0 20px!important;display:flex!important;align-items:center!important;border-bottom:1px solid var(--w-line)!important}
  html body .sidebar-brand img{max-height:26px!important;width:auto!important}
  html body .sidebar-brand .brand-fallback{font-size:19px!important;font-weight:800!important;letter-spacing:.18em}
  html body .sidebar-scroll{flex:1 1 auto!important;overflow-y:auto!important;padding:12px 12px 16px!important}
  /* Every destination is visible: groups read as section labels, not accordions. */
  html body .sidebar .nav-section{margin:0 0 6px!important;padding:0!important;border:0!important}
  html body .sidebar .nav-section .nav-group-content{display:block!important;max-height:none!important;opacity:1!important;visibility:visible!important;overflow:visible!important;padding:0!important;margin:0!important}
  html body .sidebar .nav-group-toggle{width:100%!important;height:auto!important;min-height:0!important;padding:14px 10px 6px!important;background:transparent!important;cursor:default!important;pointer-events:none;border-radius:0!important}
  html body .sidebar .nav-group-toggle span:first-child{font-size:10.5px!important;font-weight:700!important;letter-spacing:.08em!important;text-transform:uppercase!important;color:var(--w-faint)!important}
  html[dir=rtl] body .sidebar .nav-group-toggle span:first-child{font-size:12px!important;letter-spacing:0!important;text-transform:none!important}
  html body .sidebar .nav-chevron{display:none!important}
  html body .sidebar .nav{position:relative!important;display:flex!important;align-items:center!important;gap:10px!important;width:100%!important;min-height:38px!important;height:auto!important;margin:1px 0!important;padding:7px 10px!important;border:0!important;border-radius:var(--w-r-sm)!important;background:transparent!important;color:var(--w-ink-2)!important;box-shadow:none!important;font-size:13.5px!important;font-weight:550!important;transform:none!important;text-align:start!important}
  html body .sidebar .nav:hover{background:var(--w-hover)!important;color:var(--w-ink)!important}
  html body .sidebar .nav.active{background:var(--w-accent-soft)!important;color:var(--w-accent-ink)!important;font-weight:700!important}
  html body .sidebar .nav.active:before{content:"";position:absolute;inset-block:8px;inset-inline-start:-12px;width:3px;border-radius:0 3px 3px 0;background:var(--w-accent)}
  html[dir=rtl] body .sidebar .nav.active:before{border-radius:3px 0 0 3px}
  html body .sidebar .nav b{font-weight:inherit!important;font-size:inherit!important;color:inherit!important}
  html body .sidebar .nav small{display:none!important}
  html body .sidebar .nav-icon{width:20px!important;height:20px!important;min-width:20px!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important;color:var(--w-muted)!important;display:grid!important;place-items:center!important}
  html body .sidebar .nav-icon svg{width:18px!important;height:18px!important;stroke-width:1.8}
  html body .sidebar .nav.active .nav-icon{color:var(--w-accent)!important;background:transparent!important}
  html body .sidebar .nav:hover .nav-icon{color:var(--w-ink)!important}
  html body .sidebar .nav-section-single{margin-bottom:2px!important}
  html body .sidebar .nav-bottom{border-top:1px solid var(--w-line)!important;padding:10px 12px!important;margin:0!important}
  html body .sidebar .account-menu-btn{min-height:48px!important;padding:8px 10px!important}
  html body .sidebar .account-menu-btn small{display:block!important;font-size:11px!important;color:var(--w-muted)!important;font-weight:500!important}
  html body .sidebar .account-menu-btn b{font-weight:700!important}
  html body .sidebar .account-menu-btn .nav-icon{width:32px!important;height:32px!important;min-width:32px!important;border-radius:50%!important;background:var(--w-hover)!important}
}

/* ============ Top bar ============ */
@media (min-width:701px){
  html body .topbar{height:var(--w-topbar)!important;min-height:var(--w-topbar)!important;padding:0 28px!important;background:rgba(255,255,255,.86)!important;border-bottom:1px solid var(--w-line)!important;backdrop-filter:blur(16px) saturate(140%)!important;-webkit-backdrop-filter:blur(16px) saturate(140%)!important;box-shadow:none!important}
  html body .topbar-context{gap:0!important;min-width:0}
  html body .topbar-eyebrow{font-size:11px!important;font-weight:600!important;color:var(--w-faint)!important;margin-bottom:1px!important}
  html body .topbar .page-title{font-size:19px!important;font-weight:750!important;line-height:1.25!important;letter-spacing:-.01em}
  html[dir=rtl] body .topbar .page-title{font-size:20px!important}
  html body .topbar .page-subtitle{display:none!important}
  html body .global-search-wrap{height:40px!important;min-height:40px!important;border-radius:var(--w-r)!important;background:var(--w-surface-2)!important;border:1px solid var(--w-line)!important;box-shadow:none!important}
  html body .global-search-wrap:focus-within{background:#fff!important;border-color:var(--w-accent)!important;box-shadow:0 0 0 3px rgba(15,122,83,.14)!important}
  html body .global-search-wrap kbd{background:#fff!important;border:1px solid var(--w-line)!important;color:var(--w-muted)!important;border-radius:6px!important;font-size:10.5px!important}
  html body .top-actions{gap:10px!important}
  html body .top-actions .top-new-sale{height:40px!important;min-height:40px!important;border-radius:var(--w-r)!important;padding:0 16px!important}
  html body .top-actions .user-pill{height:40px!important;border-radius:var(--w-r)!important}
}

/* ============ Page anatomy ============ */
/* One title per page. When a screen renders its own page header, the top bar
   steps down to a breadcrumb (section / page) and the header carries the title. */
@media (min-width:701px){
  html body.w-has-pagehead .topbar-context{display:flex!important;flex-direction:row!important;align-items:center!important;gap:8px!important}
  html body.w-has-pagehead .topbar-eyebrow{font-size:13px!important;margin:0!important;color:var(--w-muted)!important;text-transform:none!important;letter-spacing:0!important}
  html body.w-has-pagehead .topbar-eyebrow:after{content:"/";margin-inline-start:8px;color:var(--w-line-2)}
  html body.w-has-pagehead .topbar .page-title{font-size:13.5px!important;font-weight:650!important;color:var(--w-ink)!important;letter-spacing:0!important}
}
html body #view>.pos-logs-header,html body #view>.collection-toolbar,html body #view>.section-head,html body #view .payments-header,html body #view .opscmd-head{
  display:flex!important;align-items:flex-end!important;justify-content:space-between!important;gap:20px!important;
  background:transparent!important;border:0!important;box-shadow:none!important;border-radius:0!important;padding:0!important;margin:0 0 20px!important;color:var(--w-ink)!important}
html body #view>.pos-logs-header .section-title,html body #view>.collection-toolbar .section-title,html body #view>.section-head .section-title,html body #view .payments-header h1,html body #view .opscmd-head h2{
  font-size:26px!important;font-weight:780!important;line-height:1.2!important;letter-spacing:-.02em!important;margin:2px 0 0!important;color:var(--w-ink)!important}
html[dir=rtl] body #view>.pos-logs-header .section-title,html[dir=rtl] body #view>.collection-toolbar .section-title,html[dir=rtl] body #view>.section-head .section-title,html[dir=rtl] body #view .payments-header h1,html[dir=rtl] body #view .opscmd-head h2{letter-spacing:0!important}
html body #view>.pos-logs-header .muted,html body #view>.collection-toolbar .muted,html body #view>.section-head .muted,
html body #view .payments-header p,html body #view .opscmd-head p{font-size:13.5px!important;line-height:1.55!important;color:var(--w-muted)!important;margin:6px 0 0!important;max-width:72ch}
html body #view .payments-eyebrow,html body #view .opscmd-kicker,html body #view>.pos-logs-header .section-kicker{font-size:11.5px!important;font-weight:650!important;color:var(--w-faint)!important}
html body #view .payments-header .btn{background:var(--w-surface)!important;color:var(--w-ink)!important;border:1px solid var(--w-line-2)!important}
html body #view .payments-header .btn:hover{background:var(--w-hover)!important}
@media (max-width:700px){
  html body #view>.pos-logs-header,html body #view>.collection-toolbar,html body #view>.section-head,html body #view .payments-header,html body #view .opscmd-head{flex-direction:column!important;align-items:stretch!important;gap:12px!important;margin-bottom:14px!important}
  html body #view>.pos-logs-header .section-title,html body #view>.collection-toolbar .section-title,html body #view>.section-head .section-title,html body #view .payments-header h1,html body #view .opscmd-head h2{font-size:21px!important}
}
/* Dashboard: the top bar already has + New Sale on desktop. */


@media (min-width:701px){
  html body .content{padding:24px 28px 40px!important;max-width:1520px!important}
}
html body .table-wrap{border-radius:var(--w-r-lg)!important;border:1px solid var(--w-line)!important;box-shadow:var(--w-shadow-1)!important;background:var(--w-surface)!important;overflow:auto}
html body .section-title{font-weight:750!important;color:var(--w-ink)!important}
html body .section-kicker{color:var(--w-faint)!important;font-weight:650!important}

/* ============ Buttons ============ */
html body .btn{border-radius:var(--w-r-sm)!important;min-height:38px;font-weight:650!important;border-color:var(--w-line-2)!important;box-shadow:none!important}
html body .btn.small{min-height:32px}
html body .btn.primary{background:var(--w-ink)!important;border-color:var(--w-ink)!important;color:#fff!important}
html body .btn.primary:not(:disabled):hover{background:#2a302b!important;border-color:#2a302b!important}
html body .btn.danger{background:var(--w-bad)!important;border-color:var(--w-bad)!important;color:#fff!important}

/* ============ Inputs ============ */
html body input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]),html body select{border-radius:var(--w-r-sm)!important;min-height:40px}
html body textarea{border-radius:var(--w-r-sm)!important}
html body label{color:var(--w-ink-2)}

/* ============ Tables ============ */
html body .table thead th,html body table.table th{white-space:normal!important;background:var(--w-surface-2)!important;color:var(--w-muted)!important;border-bottom:1px solid var(--w-line)!important;font-weight:650!important;position:sticky;top:0;z-index:1}
html body .table td{border-bottom:1px solid #eef0ec!important}
html body .table tbody tr:last-child td{border-bottom:0!important}

/* ============ Badges ============ */


/* ============ Empty states ============ */

html body .cart-empty,html body .return-empty,html body .center-empty{min-height:0!important;padding:28px 20px!important}
html body .pos-workspace .cart-empty{min-height:150px!important;border:1px dashed var(--w-line-2)!important;border-radius:var(--w-r)!important;background:var(--w-surface-2)!important}

/* ============ Toolbars: filters sit on one line ============ */
@media (min-width:901px){
  html body .pos-activity-head{display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:space-between!important;gap:20px!important;padding:16px 20px!important;background:transparent!important;border-bottom:1px solid var(--w-line)!important}
  html body .pos-activity-head>div:first-child .section-kicker,html body .pos-activity-head>div:first-child p{display:none!important}
  html body .pos-activity-head>div:first-child .section-title{font-size:15px!important}
  html body .pos-activity-head .toolbar{display:grid!important;grid-template-columns:minmax(220px,320px) 160px 160px auto!important;gap:8px!important;align-items:center!important;flex:0 1 auto!important;width:auto!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important;margin:0!important}
  html body .pos-activity-head .toolbar>*{width:100%!important;margin:0!important}
  html body .pos-activity-head .toolbar .btn{width:auto!important}
  html body .pos-activity-panel>#docTable{padding:16px 20px 20px}
}

/* ============ POS workspace ============ */
html body .pos-smart-command-center{border-radius:var(--w-r-lg)!important;border-color:var(--w-line)!important;box-shadow:var(--w-shadow-1)!important}
html body .pos-workspace .pro-cart-item{padding:12px 14px!important;border-color:var(--w-line)!important}
html body .pos-workspace .pro-cart-item .compact-field>span,html body .pos-workspace .pro-cart-item .line-total>span{font-size:11px!important;font-weight:650!important;color:var(--w-muted)!important}
html[dir=rtl] body .pos-workspace .pro-cart-item .compact-field>span{letter-spacing:0!important;text-transform:none!important}
html body .pos-workspace .pro-cart-item input,html body .pos-workspace .pro-cart-item select{min-height:36px!important;height:36px!important}
html body .pos-workspace .pro-cart-item .qty-control{height:36px!important}
html body .pos-workspace .pos-cart-thumb{width:44px!important;height:44px!important;border-radius:10px!important}
/* Wide screens: each cart line is one row — product, qty, price, discount, total, remove. */
@media (min-width:1360px){
  html body .pos-workspace .pro-cart-item{display:grid!important;grid-template-columns:minmax(170px,1fr) 100px 100px 150px 96px 28px!important;column-gap:10px!important;align-items:end!important}
  html body .pos-workspace .pro-cart-item .cart-product-row,html body .pos-workspace .pro-cart-item .cart-controls{display:contents!important}
  html body .pos-workspace .pro-cart-item .cart-product{grid-column:1;align-self:center!important;min-width:0}
  html body .pos-workspace .pro-cart-item .qty-control{grid-column:2;width:100%!important}
  html body .pos-workspace .pro-cart-item .pos-sale-price-only{grid-column:3;min-width:0!important}
  html body .pos-workspace .pro-cart-item .discount-field{grid-column:4;min-width:0!important}
  html body .pos-workspace .pro-cart-item .line-total{grid-column:5;min-width:0!important;text-align:end}
  html body .pos-workspace .pro-cart-item>.cart-product-row>.icon-btn{grid-column:6;grid-row:1;align-self:center!important}
  html body .pos-workspace .pro-cart-item .compact-field{margin:0!important;width:100%!important}
  html body .pos-workspace .pro-cart-item .cart-meta{display:flex!important;flex-direction:row!important;flex-wrap:wrap!important;gap:2px 10px!important}
}

/* A82: readiness line beside the total, so the cashier sees what Complete will do. */
.pos-quick-checkout:has(.pos-quick-ready){grid-template-columns:auto minmax(0,1fr) auto auto}
.pos-quick-checkout .pos-quick-ready{min-width:0;justify-self:stretch;padding:7px 11px;border:1px solid #e3e5e7;border-radius:9px;background:#f7f8f8;color:#3c4246;font-size:12px;font-weight:650;line-height:1.35}
.pos-quick-checkout .pos-quick-ready[data-tone="ok"]{border-color:#cfe5d8;background:#f1f8f4;color:#1f5d3f}
.pos-quick-checkout .pos-quick-ready[data-tone="warn"]{border-color:#e9dcc0;background:#fbf7ee;color:#6b4f12}
@media (max-width:720px){.pos-quick-checkout:has(.pos-quick-ready){grid-template-columns:1fr auto!important}.pos-quick-checkout .pos-quick-ready{grid-column:1/-1}}

/* A83: checkout dock step headings. */
.pos-checkout-dock .pos-step-head{grid-column:1/-1;display:flex;align-items:center;gap:8px;margin:12px 0 2px;color:#30363a;font-size:12px;font-weight:750}
.pos-checkout-dock .pos-step-head:first-child{margin-top:0}
.pos-checkout-dock .pos-step-head b{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#202326;color:#fff;font-size:11px}
.pos-checkout-dock > .pos-step-head{margin:14px 0 6px}

/* A83: Operations follow-up views (pickup / picked up / over 7 days). */
.ops-phase-strip{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.ops-phase-strip .ops-phase{flex:1 1 200px;display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 10px;padding:11px 14px;border:1px solid #e1e4e6;border-radius:12px;background:#fff;color:#30363a;text-align:start;cursor:pointer}
.ops-phase-strip .ops-phase span{font-size:13px;font-weight:750}
.ops-phase-strip .ops-phase b{grid-row:span 2;font-size:20px}
.ops-phase-strip .ops-phase small{color:#7b8287;font-size:11px}
.ops-phase-strip .ops-phase:hover{border-color:#c6cbce}
.ops-phase-strip .ops-phase.active{border-color:#202326;box-shadow:inset 0 0 0 1px #202326}
.ops-phase-strip .phase-overdue7 b{color:#a3402f}
.ops-phase-strip .ops-phase-clear{flex:0 0 auto;align-self:center;padding:8px 12px;border:1px solid #e1e4e6;border-radius:10px;background:#f6f7f7;cursor:pointer;font-size:12px}
@media (max-width:700px){.ops-phase-strip .ops-phase{flex-basis:100%}}