/* Mineral Workspace Redesign
   A quiet, modern operations console built for dense daily work. */
:root{
  --bg:#f5f6f8;
  --surface:#fff;
  --surface-subtle:#f8f9fb;
  --surface-hover:#f2f5fa;
  --border:#e2e6ec;
  --border-strong:#cbd2dc;
  --text:#172033;
  --text-2:#5f6b7a;
  --text-3:#8b95a5;
  --primary:#3d5bd9;
  --primary-hover:#3048b3;
  --primary-soft:#eef1ff;
  --success:#16836f;
  --success-soft:#eaf7f3;
  --warning:#a76517;
  --warning-soft:#fff6e7;
  --danger:#c64555;
  --danger-soft:#fdeef0;
  --info:#2d6cdf;
  --shadow-xs:0 1px 2px rgba(16,24,40,.04);
  --shadow-sm:0 6px 18px rgba(16,24,40,.055)
}
html,body{background:var(--bg);color:var(--text)}
body{background-image:none;font-size:14px}
*{scrollbar-color:#aeb7c3 #eef0f3}
*::-webkit-scrollbar-track{background:#eef0f3}
*::-webkit-scrollbar-thumb{border-color:#eef0f3;background:#aeb7c3}
*::-webkit-scrollbar-thumb:hover{background:#8e99a8}

/* Login: simple, calm, and brand-led */
.login-view{
  background:
    radial-gradient(circle at 18% 25%,rgba(61,91,217,.08),transparent 28%),
    linear-gradient(90deg,#f0f2f6 0 50%,#f7f8fa 50%)
}
.login-view:before{color:#1b2740;text-shadow:none;font-size:38px}
.login-view:after{color:#7b8696;letter-spacing:2px}
.login-card{
  border:1px solid var(--border);
  border-radius:14px;
  background:#fff;
  box-shadow:0 20px 60px rgba(25,37,62,.12);
  backdrop-filter:none
}
.login-brand{color:var(--text)}
.login-brand small{color:var(--text-3)}
.login-card h1{color:var(--text)}
.login-card>p,.remember{color:var(--text-2)}
.login-card label:not(.remember){color:#455164}
.login-card input{border-color:var(--border-strong);background:#fff}
.login-card input:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(61,91,217,.1)}
.brand-logo{box-shadow:0 4px 12px rgba(45,108,223,.18)}

/* Navigation: white workspace header */
.topbar{
  height:58px;
  padding:0 18px;
  background:rgba(255,255,255,.96);
  color:var(--text);
  border-bottom:1px solid var(--border);
  box-shadow:0 1px 0 rgba(16,24,40,.025);
  backdrop-filter:blur(12px)
}
.topbar:after{display:none}
.topbar .logo{height:58px;min-width:148px;color:var(--text);border-right:1px solid #eceff3}
.topbar .logo b{font-weight:750}
.topbar nav{height:58px;gap:3px}
.topbar nav button{
  position:relative;
  height:58px;
  min-height:58px;
  padding:0 12px;
  border:0;
  border-radius:0;
  background:transparent!important;
  color:#687486;
  box-shadow:none!important
}
.topbar nav button i{
  width:22px;height:22px;
  border:0;
  border-radius:6px;
  background:#f1f3f6;
  color:#7c8797
}
.topbar nav button:hover{background:#f7f8fa!important;color:#28374f}
.topbar nav button:hover i{background:#eceff5;color:#53637a;border:0}
.topbar nav button.active{
  background:#f7f8ff!important;
  color:var(--primary);
  box-shadow:inset 0 -2px var(--primary)!important
}
.topbar nav button.active i{border:0;background:var(--primary-soft);color:var(--primary)}
.topbar .user-menu{
  height:38px;
  min-height:38px;
  margin-left:auto;
  padding:4px 8px;
  border:1px solid transparent;
  border-radius:8px;
  color:var(--text);
  background:transparent!important
}
.topbar .user-menu:hover{border-color:var(--border);background:#f7f8fa!important}
.topbar .user-menu[aria-expanded="true"]{border-color:#c8d6f7;background:#f3f6ff!important;color:var(--primary)}
.account-menu-popover{position:absolute;right:14px;top:48px;z-index:80;width:136px;padding:6px;background:#fff;border:1px solid #d9e1ec;border-radius:10px;box-shadow:0 14px 34px rgba(23,32,51,.15),0 3px 9px rgba(23,32,51,.08)}
.account-menu-popover::before{content:"";position:absolute;right:24px;top:-5px;width:9px;height:9px;background:#fff;border-left:1px solid #d9e1ec;border-top:1px solid #d9e1ec;transform:rotate(45deg)}
.account-menu-popover button{position:relative;z-index:1;width:100%;height:36px;display:flex;align-items:center;justify-content:flex-start;gap:8px;padding:0 10px;border:0;border-radius:7px;background:transparent;color:#c64555;box-shadow:none;font-weight:650}
.account-menu-popover button:hover{background:#fff1f3;color:#b52f42;box-shadow:none}
.account-menu-popover .ui-icon{width:15px;height:15px}
.topbar .avatar{
  width:28px;height:28px;
  border:0;
  background:#eef1f5;
  color:#3f4d61;
  box-shadow:none
}

/* Page hierarchy */
main{padding:18px 20px 28px;background:transparent}
.page-heading,.stock-toolbar,.hot-toolbar,.report-toolbar,.logs-toolbar{margin-bottom:14px}
.page-heading h1,.stock-toolbar h1,.hot-toolbar h1,.report-toolbar h1,.logs-toolbar h1{
  color:var(--text);
  font-size:20px;
  font-weight:750;
  letter-spacing:-.2px
}
.stock-toolbar p,.hot-toolbar p,.report-toolbar p,.logs-toolbar p{margin-top:4px;color:var(--text-2)}
.live-badge{
  border:1px solid #c7ded8;
  border-radius:6px;
  background:#f2faf7;
  color:var(--success);
  box-shadow:none
}

/* One clean control system */
button{
  border-radius:7px;
  border-color:var(--border-strong);
  background:#fff;
  color:#465267;
  box-shadow:var(--shadow-xs);
  font-weight:600
}
button:hover{border-color:#aeb8c6;background:#f8f9fb;color:#28374d}
.primary,.add-order-btn{
  border-color:var(--primary)!important;
  background:var(--primary)!important;
  box-shadow:0 2px 6px rgba(61,91,217,.16)!important;
  color:#fff!important
}
.primary:hover,.add-order-btn:hover{
  border-color:var(--primary-hover)!important;
  background:var(--primary-hover)!important;
  box-shadow:0 3px 8px rgba(61,91,217,.2)!important
}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  box-shadow:0 0 0 3px rgba(61,91,217,.11)!important
}
.filter-actions>button,.module-filter-actions>button{height:36px;min-height:36px;border-radius:7px}
.stock-toolbar>#addInventory{height:36px;min-height:36px}

/* KPI cards */
.metrics{
  gap:8px;
  margin-bottom:12px;
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none
}
.metrics .metric{
  min-width:128px;
  min-height:64px;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:10px;
  background:#fff;
  color:var(--text);
  box-shadow:var(--shadow-xs)
}
.metrics .metric:before{display:none}
.metrics .metric span{color:var(--text-3);font-size:11px}
.metrics .metric b,.metrics .metric.profit b{color:#243149;font-size:16px;font-variant-numeric:tabular-nums}
.metrics .metric.profit{border-color:#cde4dd;background:#fbfffd}
.metrics .metric.profit b{color:var(--success)}
.inventory-metrics,.report-metrics,.logs-metrics{gap:8px}
.inventory-metrics>div,.report-metric,.log-metric{
  border:1px solid var(--border);
  border-radius:10px;
  background:#fff;
  box-shadow:var(--shadow-xs)
}
.report-metric:before,.log-metric:before{background:#d7dce4}
.report-metric.profit:before{background:var(--success)}
.inventory-metrics span,.report-metric span,.log-metric span{color:var(--text-3)}
.inventory-metrics b,.report-metric b,.log-metric b{color:#28354b}

/* Filter panels */
.filters,.inventory-filters,.hot-filters,.report-filters,.logs-filters{
  gap:8px;
  padding:10px;
  border:1px solid var(--border);
  border-radius:10px 10px 0 0;
  background:#fff;
  box-shadow:none
}
.filters input,.filters select,.inventory-filters input,.hot-filters input,
.report-filters input,.report-filters select,.logs-filters input,.logs-filters select,
.form-grid input,.form-grid select,.form-grid textarea{
  min-height:36px;
  border-color:var(--border-strong);
  border-radius:7px;
  background:#fff;
  color:#354258
}
.filters input:hover,.filters select:hover,.inventory-filters input:hover,.hot-filters input:hover,
.report-filters input:hover,.report-filters select:hover,.logs-filters input:hover,.logs-filters select:hover,
.form-grid input:hover,.form-grid select:hover,.form-grid textarea:hover{border-color:#aeb8c6;background:#fff}
.filters input:focus,.filters select:focus,.inventory-filters input:focus,.hot-filters input:focus,
.report-filters input:focus,.report-filters select:focus,.logs-filters input:focus,.logs-filters select:focus,
.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(61,91,217,.08)
}
.quick-filters,.report-quick{
  min-height:42px;
  padding:6px 10px;
  border-color:var(--border);
  border-radius:0 0 10px 10px;
  background:var(--surface-subtle);
  box-shadow:none
}
.quick-filters button,.report-quick button{
  height:28px;
  border-color:transparent;
  background:transparent!important;
  color:#667286;
  box-shadow:none
}
.quick-filters button:hover,.report-quick button:hover,.report-quick button.active{
  border-color:#d8def4;
  background:var(--primary-soft)!important;
  color:var(--primary)
}
.quick-filters button:nth-last-child(-n+2){border-color:transparent;background:transparent!important;color:var(--danger)}
.quick-filters button:nth-last-child(-n+2):hover{border-color:#f1c9cf;background:var(--danger-soft)!important}

/* Stable compact actions */
.module-filter-actions,.filter-actions{gap:7px;justify-self:end;width:max-content}
.module-filter-actions>button{width:auto;min-width:74px;padding:0 13px}
.inventory-filters{grid-template-columns:200px minmax(320px,1fr) max-content}
.hot-filters{grid-template-columns:minmax(300px,1fr) 150px 150px max-content}
.report-filters{grid-template-columns:minmax(170px,1fr) minmax(170px,1fr) 150px 150px max-content}
.logs-filters{grid-template-columns:minmax(260px,1.7fr) repeat(3,minmax(130px,.75fr)) 145px 145px max-content}

/* Tables */
.sheet-wrap,.inventory-table-wrap,.hot-table-wrap,.report-table-wrap,.logs-table-wrap{
  border:1px solid var(--border);
  border-radius:10px;
  background:#fff;
  box-shadow:none
}
.inventory-table-wrap,.hot-table-wrap,.logs-table-wrap{border-top:1px solid var(--border);border-radius:10px}
.orders-sheet th,.inventory-table th,.hot-table th,.report-table th,.logs-table th{
  height:38px;
  border-right-color:#edf0f3;
  border-bottom-color:#dfe3e9;
  background:#f7f8fa;
  color:#5d697a;
  text-shadow:none;
  font-weight:650
}
.orders-sheet td,.inventory-table td,.hot-table td,.report-table td,.logs-table td{
  border-right-color:#f0f2f5;
  border-bottom-color:#e7eaee;
  color:#263348
}
.orders-sheet tbody tr:nth-child(even) td,.inventory-table tbody tr:nth-child(even) td,
.hot-table tbody tr:nth-child(even) td,.report-table tbody tr:nth-child(even) td,
.logs-table tbody tr:nth-child(even) td{background:#fff}
.orders-sheet tbody tr:hover td,.inventory-table tbody tr:hover td,.hot-table tbody tr:hover td,
.report-table tbody tr:hover td,.logs-table tbody tr:hover td{background:#f5f7fb}
.orders-sheet td.pin{background:#fff;box-shadow:8px 0 12px -13px rgba(23,32,51,.6)}
.orders-sheet tbody tr:hover td.pin{background:#f5f7fb}
.order-no{background:#f8f8fb!important;color:#34415a}
.product-img,.inventory-image,.hot-product-image{
  border:1px solid var(--border);
  border-radius:7px;
  background:#f4f5f7;
  box-shadow:none
}
.inline-input,.inline-select{border-color:transparent;background:#f5f6f8;color:#354258}
.inline-input:hover,.inline-select:hover{border-color:#ccd3dc;background:#fff}
.inline-input:focus,.inline-select:focus{border-color:var(--primary);box-shadow:0 0 0 2px rgba(61,91,217,.08)}
.inline-select.has-value{border-color:#d4d9e3;background:#f6f7fa;color:#344057}
.select-small .inline-select{border-color:#d1d7e0;background:#f1f3f6;color:#3e4a5d}

/* Restrained order state colors */
.inline-select.status-tone-0{border-color:#ecd59d;background:#fff8e8;color:#8c5b10}
.inline-select.status-tone-1{border-color:#c6cff3;background:#f1f3ff;color:#4256a8}
.inline-select.status-tone-2{border-color:#cbd0ed;background:#f4f3fd;color:#594ba2}
.inline-select.status-tone-3{border-color:#b7d8ee;background:#eef8fd;color:#216b9a}
.inline-select.status-tone-4{border-color:#edc5ca;background:#fdf1f2;color:#a33e4b}
.inline-select.status-tone-5{border-color:#e7d0b5;background:#fff6eb;color:#955c22}
.inline-select.status-tone-6{border-color:#b7ddcf;background:#edf8f4;color:#18735f}
.inline-select.status-tone-7{border-color:#aad8c8;background:#eaf7f2;color:#136e5b}
.profit-positive,.report-positive,.stock-value,.hot-quantity{color:var(--success)}
.profit-negative,.report-negative{color:var(--danger)}

/* Row actions stay familiar but visually quiet */
.orders-sheet .actions button,.inventory-actions button{
  border:1px solid var(--border-strong);
  border-radius:6px!important;
  background:#fff!important;
  color:#526075;
  box-shadow:none
}
.orders-sheet .actions .edit,.inventory-actions .edit{border-color:#b8c5e9;color:#3f58bb}
.orders-sheet .actions .edit:hover,.inventory-actions .edit:hover{border-color:#8c9fe0;background:#f1f3ff!important}
.orders-sheet .actions .delete,.inventory-actions .delete{border-color:#ecc5ca;color:var(--danger)}
.orders-sheet .actions .delete:hover,.inventory-actions .delete:hover{border-color:#dc949e;background:var(--danger-soft)!important}
.orders-sheet .actions .copy{border-color:#d2d8e0;color:#59677b}
.orders-sheet .actions .copy:hover{border-color:#aeb8c6;background:#f5f6f8!important}

/* After-sales */
.orders-sheet tbody tr.has-after td{background-color:#fffdf9;background-image:none}
.after-sales-row>td{background:#fafbfc!important;border-bottom-color:var(--border)!important}
.after-sales-details summary{background:#fafbfc;color:#5e6a7b}
.after-sales-details summary:hover{background:#f5f6f8;color:var(--primary)}
.after-sales-grid{border-top-color:var(--border);background:#fff}
.after-sales-details summary b,.after-sales-badge,.alert-badge.after{background:var(--danger-soft);color:var(--danger)}
.after-sales-details summary em,.alert-badge.note{background:var(--warning-soft);color:var(--warning)}
.refund-paste-zone,.image-paste-zone{border-color:#bfc8d4;background:#f7f8fa}
.refund-paste-zone:hover,.refund-paste-zone:focus,.refund-paste-zone.is-active,
.image-paste-zone:hover,.image-paste-zone:focus{border-color:var(--primary);background:#f4f5ff;box-shadow:0 0 0 3px rgba(61,91,217,.08)}

/* Reports and logs */
.report-user-details>summary,.report-shop-details>summary{background:#fff;color:#35445b}
.report-user-details[open]>summary,.report-shop-details[open]>summary{background:#f7f8ff;color:var(--primary)}
.report-user-details[open]>summary.report-summary-grid{background:#f7f8ff;box-shadow:inset 3px 0 var(--primary)}
.report-shop-list{border-color:var(--border);background:#f6f7f9}
.report-summary-grid,.report-shop-list,.report-orders-table{border-color:var(--border)}
.report-count-badge{border-color:#d4daf3;background:var(--primary-soft);color:var(--primary)}
.report-count-badge.warning{border-color:#edc8cd;background:var(--danger-soft);color:var(--danger)}
.log-action-badge{border-color:#d9dee5;background:#f5f6f8;color:#5b687a}
.log-action-badge.created{border-color:#b8ddcf;background:var(--success-soft);color:var(--success)}
.log-action-badge.updated{border-color:#c9d2f3;background:var(--primary-soft);color:var(--primary)}
.log-action-badge.deleted{border-color:#ecc5ca;background:var(--danger-soft);color:var(--danger)}
.log-field-chip{border-color:#dce1e7;background:#f6f7f9;color:#4a586d}
.log-old{background:var(--danger-soft);color:#a33d4b}
.log-new{background:var(--success-soft);color:#146e5c}
.logs-pagination{border-color:var(--border);background:#fff}
.log-page-button.active{border-color:var(--primary);background:var(--primary);box-shadow:none}

/* Dialogs */
dialog{
  border:1px solid var(--border);
  border-radius:14px;
  background:#fff;
  box-shadow:0 24px 70px rgba(21,29,46,.2)
}
dialog::backdrop{background:rgba(24,31,45,.42);backdrop-filter:blur(2px)}
#orderForm>header,.inventory-dialog form>header{border-color:var(--border);background:#fff}
#orderForm>footer,.inventory-dialog form>footer{border-color:var(--border);background:#fafbfc}
#orderForm h2,.inventory-dialog h2{color:var(--text)}
.form-grid label{color:#4e5b6d}
.calculation{border:1px solid #cfe5dd;background:#f1faf7}
.calculation b{color:var(--success)}
.toast{border:0;background:#273348;color:#fff;box-shadow:0 10px 28px rgba(23,32,51,.18)}
.empty{min-height:220px;padding:48px;border-color:var(--border);border-radius:10px;background:#fff}
.empty div{color:#253248}
.empty p,.placeholder-card p{color:var(--text-3)}
.image-dialog{background:#11151d}
.image-dialog::backdrop{background:rgba(10,13,19,.84)}
.image-dialog button{border-color:rgba(255,255,255,.45);background:rgba(20,24,32,.78);box-shadow:none}

/* Mobile keeps controls useful, not oversized */
@media(max-width:1280px){
  .inventory-filters{grid-template-columns:190px minmax(260px,1fr) max-content}
  .hot-filters{grid-template-columns:minmax(240px,1fr) 140px 140px max-content}
  .report-filters{grid-template-columns:repeat(2,minmax(170px,1fr)) 140px 140px max-content}
  .logs-filters{grid-template-columns:minmax(230px,1.5fr) repeat(3,minmax(120px,.8fr)) 135px 135px max-content}
}
@media(max-width:900px){
  .inventory-filters,.hot-filters,.report-filters,.logs-filters{grid-template-columns:1fr 1fr}
  .module-filter-actions{grid-column:1/-1;justify-self:end;width:max-content}
  .module-filter-actions>button{width:auto;min-width:74px}
}
@media(max-width:800px){
  .topbar{background:#fff;border-top:1px solid var(--border)}
  .topbar nav button.active{background:var(--primary-soft)!important;box-shadow:inset 0 2px var(--primary)!important}
  .login-view{background:#f3f4f7}
}
@media(max-width:560px){
  main{padding:14px 10px 76px}
  .module-filter-actions{width:100%}
  .module-filter-actions>button{flex:1}
  .empty{min-height:190px;padding:38px 20px}
}
/* Unified line icon geometry */
.topbar nav button i svg{
  width:15px;
  height:15px;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round
}
/* Visual Hierarchy Pass — clear section depth without card clutter */
:root{
  --canvas:#f1f4f8;
  --surface-soft-2:#f6f8fb;
  --line-clear:#d6dee9;
  --line-strong-2:#c2cddc;
  --shadow-card:0 1px 2px rgba(16,24,40,.045),0 7px 20px rgba(25,42,70,.055)
}
body{background:var(--canvas)}
main{padding:22px 22px 30px}
.page-heading,.stock-toolbar,.hot-toolbar,.report-toolbar,.logs-toolbar{
  min-height:44px;
  margin-bottom:14px;
  padding:0 2px;
  align-items:center
}
.page-heading h1,.stock-toolbar h1,.hot-toolbar h1,.report-toolbar h1,.logs-toolbar h1{
  position:relative;
  padding-left:12px;
  font-size:22px;
  line-height:30px;
  font-weight:760
}
.page-heading h1:before,.stock-toolbar h1:before,.hot-toolbar h1:before,.report-toolbar h1:before,.logs-toolbar h1:before{
  content:"";
  position:absolute;
  left:0;
  top:5px;
  bottom:5px;
  width:3px;
  border-radius:2px;
  background:var(--primary)
}

/* Level 1: summary band */
.metrics{
  display:grid;
  grid-template-columns:repeat(8,minmax(112px,1fr));
  gap:0;
  min-height:80px;
  margin-bottom:14px;
  border:1px solid var(--line-clear);
  border-radius:11px;
  background:#fff;
  box-shadow:var(--shadow-card);
  overflow:hidden
}
.metrics .metric{
  min-width:0;
  min-height:80px;
  display:grid;
  align-content:center;
  gap:3px;
  padding:12px 16px;
  border:0;
  border-radius:0;
  background:#fff;
  box-shadow:none
}
.metrics .metric+.metric{border-left:1px solid #e8edf3}
.metrics .metric span{font-size:11.5px;line-height:18px;color:#778396}
.metrics .metric b,.metrics .metric.profit b{
  font-size:19px;
  line-height:27px;
  font-weight:720;
  color:#1c2940;
  font-variant-numeric:tabular-nums
}
.metrics .metric:nth-child(3) b{color:#3154bb}
.metrics .metric.profit{border:0;background:#f2fbf7}
.metrics .metric.profit b{color:var(--success)}

.inventory-metrics,.report-metrics,.logs-metrics{margin-bottom:14px;gap:10px}
.inventory-metrics>div,.report-metric,.log-metric{
  min-height:72px;
  border-color:var(--line-clear);
  box-shadow:var(--shadow-card)
}

/* Level 2: search workbench */
.filters,.inventory-filters,.hot-filters,.report-filters,.logs-filters{
  position:relative;
  z-index:2;
  padding:13px;
  border-color:var(--line-clear);
  border-radius:11px 11px 0 0;
  box-shadow:0 2px 8px rgba(22,39,65,.045)
}
.filters input,.filters select,.inventory-filters input,.hot-filters input,
.report-filters input,.report-filters select,.logs-filters input,.logs-filters select{
  height:38px;
  min-height:38px;
  border-color:#c7d1de;
  background:#fff;
  box-shadow:inset 0 1px 2px rgba(23,35,54,.025)
}
.quick-filters,.report-quick{
  min-height:44px;
  margin-bottom:14px;
  padding:7px 13px;
  border-color:var(--line-clear);
  border-top-color:#e8edf3;
  border-radius:0 0 11px 11px;
  background:#f6f8fb;
  box-shadow:0 4px 12px rgba(22,39,65,.035)
}
.quick-filters:before,.report-quick>span{
  padding-right:10px;
  margin-right:2px;
  border-right:1px solid #dce3ec;
  color:#69778c
}
.quick-filters button,.report-quick button{
  min-width:0;
  border-radius:6px;
  padding:0 10px
}

/* Level 3: data surface */
.sheet-wrap,.inventory-table-wrap,.hot-table-wrap,.report-table-wrap,.logs-table-wrap{
  height:auto;
  min-height:0;
  max-height:calc(100vh - 322px);
  border-color:var(--line-clear);
  border-radius:11px;
  box-shadow:var(--shadow-card);
  background:#fff
}
.sheet-wrap{height:auto;min-height:0}
.orders-sheet th,.inventory-table th,.hot-table th,.report-table th,.logs-table th{
  height:42px;
  background:#edf1f6;
  color:#46556b;
  border-bottom:1px solid var(--line-strong-2);
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.1px
}
.orders-sheet td,.inventory-table td,.hot-table td,.report-table td,.logs-table td{
  border-right-color:#edf1f5;
  border-bottom-color:#dfe5ec
}
.orders-sheet tbody tr:not(.after-sales-row)>td{min-height:92px}
.orders-sheet tbody tr:hover td,.inventory-table tbody tr:hover td,.hot-table tbody tr:hover td,.logs-table tbody tr:hover td{
  background:#f3f7fd
}
.orders-sheet td:nth-child(6),.orders-sheet th:nth-child(6),
.orders-sheet td:nth-child(10),.orders-sheet th:nth-child(10),
.orders-sheet td:nth-child(15),.orders-sheet th:nth-child(15){
  border-left:2px solid #d3dce8
}
.orders-sheet th.pin{box-shadow:8px 0 13px -13px rgba(22,35,54,.8)}
.orders-sheet td.pin{box-shadow:8px 0 13px -13px rgba(22,35,54,.65)}
.orders-sheet .order-no,.orders-sheet .pin-customer b,.orders-sheet [data-output="totalCost"],.orders-sheet [data-output="profit"]{font-weight:680}
.orders-sheet td:nth-child(n+15){font-variant-numeric:tabular-nums}

/* Inputs must look editable rather than disabled */
.inline-input,.inline-select{
  border:1px solid #d2dae5;
  background:#fff;
  color:#314057;
  box-shadow:0 1px 2px rgba(16,24,40,.025)
}
.inline-input:hover,.inline-select:hover{border-color:#aebccc;background:#fff}
.inline-select.has-value{border-color:#c4cede;background:#f8fafc}

/* Level 4: nested after-sales surface */
.after-sales-row>td{
  border-top:0!important;
  border-bottom:1px solid var(--line-clear)!important;
  background:#f4f7fa!important
}
.after-sales-details{
  position:relative;
  border-left:3px solid #9bb4e8;
  background:#f6f8fb
}
.after-sales-details summary{
  height:40px;
  padding:0 14px;
  border-bottom:0;
  background:#f6f8fb;
  color:#44546a;
  font-size:12px
}
.after-sales-details summary span{font-size:12.5px;font-weight:680}
.after-sales-details[open] summary{border-bottom:1px solid #dde4ed;background:#f2f5f9}
.after-sales-grid{background:#fbfcfe;box-shadow:inset 0 1px #fff}
.after-sales-details summary b,.after-sales-details summary em{
  border:1px solid currentColor;
  border-color:color-mix(in srgb,currentColor,transparent 70%)
}
.refund-paste-zone{background:#fff}

/* Empty and low-data states stop looking unfinished */
.empty{
  min-height:230px;
  border-color:var(--line-clear);
  background:
    radial-gradient(circle at 50% 34%,rgba(61,91,217,.055),transparent 90px),
    #fff
}
.empty div{font-size:16px}
.empty p{margin-top:7px}
.sheet-wrap+.empty{margin-top:0}

/* Hierarchy for report expansion and logs */
.report-user-details>summary{border-bottom:1px solid #e0e6ee}
.report-shop-list{background:#eef2f6;border-top-color:#d5dde7}
.report-shop-details{box-shadow:0 2px 8px rgba(24,39,63,.05)}
.report-shop-details>.report-summary-grid{background:#fff}
.logs-pagination{margin-top:-1px;border-color:var(--line-clear);box-shadow:0 4px 12px rgba(22,39,65,.035)}

/* Header separation */
.topbar{
  border-bottom-color:#d5dde8;
  box-shadow:0 2px 10px rgba(18,33,55,.065)
}
.topbar nav button.active{
  font-weight:680;
  background:#eef2ff!important;
  box-shadow:inset 0 -3px var(--primary)!important
}

/* Responsive hierarchy */
@media(max-width:1440px){
  .metrics{grid-template-columns:repeat(4,1fr)}
  .metrics .metric:nth-child(5){border-left:0;border-top:1px solid #e8edf3}
  .metrics .metric:nth-child(n+6){border-top:1px solid #e8edf3}
  .sheet-wrap,.inventory-table-wrap,.hot-table-wrap,.report-table-wrap,.logs-table-wrap{max-height:calc(100vh - 380px)}
}
@media(max-width:900px){
  main{padding:16px 12px 76px}
  .page-heading h1,.stock-toolbar h1,.hot-toolbar h1,.report-toolbar h1,.logs-toolbar h1{font-size:20px}
  .metrics{grid-template-columns:repeat(2,1fr)}
  .metrics .metric:nth-child(n){border-left:0;border-top:1px solid #e8edf3}
  .metrics .metric:nth-child(1),.metrics .metric:nth-child(2){border-top:0}
  .metrics .metric:nth-child(even){border-left:1px solid #e8edf3}
}
@media(max-width:560px){
  .metrics{grid-template-columns:1fr 1fr}
  .metrics .metric{min-height:70px;padding:10px 12px}
  .metrics .metric b,.metrics .metric.profit b{font-size:17px}
}
/* Standalone module tools need their own separation from data tables */
.inventory-filters,.hot-filters,.logs-filters{
  margin-bottom:14px;
  border-radius:11px
}
.inventory-table-wrap,.hot-table-wrap,.logs-table-wrap{margin-top:0}
/* Pearl canvas + luminous interaction rails
   The light stays on boundaries, so dense data remains calm and readable. */
:root{
  --canvas:#e9eff6;
  --canvas-deep:#e5ebf3;
  --surface-tint:#f4f7fb;
  --hover-blue:74,99,238;
  --hover-cyan:56,189,248;
  --hover-border:rgba(74,99,238,.46);
  --hover-glow:rgba(74,99,238,.13);
  --ease-ui:cubic-bezier(.22,1,.36,1)
}
html{background:#e7edf4}
body{
  min-height:100vh;
  background:
    radial-gradient(1100px 470px at -4% -5%,rgba(74,99,238,.105),transparent 70%),
    radial-gradient(900px 390px at 104% 0,rgba(56,189,248,.08),transparent 69%),
    linear-gradient(180deg,#f0f4f9 0,#eaf0f6 46%,#e6ecf3 100%);
  background-color:#e9eff6
}
.app{min-height:100vh;background:transparent}
main{background:linear-gradient(180deg,rgba(255,255,255,.13),transparent 270px)}
.topbar{
  background:rgba(255,255,255,.91);
  border-bottom-color:#cfd9e6;
  box-shadow:0 2px 14px rgba(27,45,74,.085)
}
.login-view{
  background:
    radial-gradient(820px 520px at 14% 18%,rgba(74,99,238,.13),transparent 67%),
    radial-gradient(680px 420px at 88% 8%,rgba(56,189,248,.09),transparent 70%),
    linear-gradient(135deg,#e8eef7 0,#f2f5f9 48%,#e5ecf4 100%)
}
.login-card{
  border-color:#cbd6e4;
  box-shadow:0 24px 70px rgba(28,46,75,.145),0 1px 2px rgba(15,23,42,.05)
}
.quick-filters,.report-quick{background-color:#f2f6fa}
.orders-sheet th,.inventory-table th,.hot-table th,.report-table th,.logs-table th{background:#e9eff6}
.after-sales-row>td{background:#f0f4f8!important}
.after-sales-details,.after-sales-details summary{background:#f3f6fa}
.after-sales-grid{background:#f8fafd}
.report-shop-list{background:#eaf0f6}
.metrics .metric span,.inventory-metrics span,.report-metric span,.log-metric span{color:#66758a}
.filters input::placeholder,.inventory-filters input::placeholder,.hot-filters input::placeholder,
.report-filters input::placeholder,.logs-filters input::placeholder,
.form-grid input::placeholder,.form-grid textarea::placeholder{color:#7e8da1}

/* Stable transition targets. Scroll containers are never transformed, so sticky headers remain intact. */
.filters,.quick-filters,.inventory-filters,.hot-filters,.report-filters,.report-quick,.logs-filters,
.sheet-wrap,.inventory-table-wrap,.hot-table-wrap,.report-table-wrap,.logs-table-wrap,
.logs-pagination,.empty,.placeholder-card,.login-card,
.metrics .metric,.inventory-metrics>div,.report-metric,.log-metric,
.after-sales-details,.report-summary-grid,.refund-paste-zone,.image-paste-zone,
.product-img,.inventory-image,.hot-product-image{
  transition:
    border-color .2s var(--ease-ui),
    box-shadow .2s var(--ease-ui),
    background-color .18s var(--ease-ui),
    background-size .22s var(--ease-ui),
    transform .18s var(--ease-ui)
}

@media (hover:hover) and (pointer:fine){
  /* Section rail: a single 1px blue-to-cyan line expands from the centre. */
  .filters,.quick-filters,.inventory-filters,.hot-filters,.report-filters,.report-quick,.logs-filters,
  .logs-pagination,.empty,.placeholder-card,.login-card{
    background-image:linear-gradient(
      90deg,
      transparent,
      rgba(var(--hover-blue),.9) 28%,
      rgba(var(--hover-cyan),.82) 50%,
      rgba(var(--hover-blue),.9) 72%,
      transparent
    );
    background-repeat:no-repeat;
    background-position:center top;
    background-size:0 1px
  }
  .filters:hover,.filters:focus-within,
  .quick-filters:hover,
  .inventory-filters:hover,.inventory-filters:focus-within,
  .hot-filters:hover,.hot-filters:focus-within,
  .report-filters:hover,.report-filters:focus-within,.report-quick:hover,
  .logs-filters:hover,.logs-filters:focus-within,
  .logs-pagination:hover,.empty:hover,.placeholder-card:hover,
  .login-card:hover,.login-card:focus-within{
    border-color:var(--hover-border);
    background-size:calc(100% - 32px) 1px;
    box-shadow:0 10px 28px rgba(15,23,42,.07),0 0 0 1px rgba(var(--hover-blue),.08),0 0 15px var(--hover-glow)
  }

  /* Scrollable data regions use their own border as the light rail. */
  .sheet-wrap:hover,.inventory-table-wrap:hover,.hot-table-wrap:hover,
  .report-table-wrap:hover,.logs-table-wrap:hover{
    border-color:rgba(var(--hover-blue),.5);
    box-shadow:
      inset 0 1px rgba(var(--hover-cyan),.72),
      0 10px 28px rgba(15,23,42,.065),
      0 0 0 1px rgba(var(--hover-blue),.075),
      0 0 13px rgba(var(--hover-blue),.11)
  }

  /* KPI cards receive a clipped inner rail; the profit rail keeps its meaning. */
  .metrics .metric:hover,.inventory-metrics>div:hover,.report-metric:hover,.log-metric:hover{
    position:relative;
    z-index:1;
    background-color:#fbfcff;
    box-shadow:
      inset 0 2px rgba(var(--hover-blue),.9),
      inset 0 9px 17px -16px rgba(var(--hover-blue),.95),
      0 8px 20px rgba(35,55,120,.075)
  }
  .metrics .metric.profit:hover,.report-metric.profit:hover{
    background-color:#f2fbf7;
    box-shadow:
      inset 0 2px rgba(22,131,111,.9),
      inset 0 9px 17px -16px rgba(22,131,111,.92),
      0 8px 20px rgba(22,131,111,.07)
  }

  /* One continuous row outline, rather than a glow around every cell. */
  .orders-sheet tbody tr:not(.after-sales-row):hover td:not(.pin),
  .inventory-table tbody tr:hover td,.hot-table tbody tr:hover td,
  .report-orders-table tbody tr:hover td,.logs-table tbody tr:hover td{
    background-color:#f5f8ff;
    box-shadow:inset 0 1px rgba(var(--hover-blue),.2),inset 0 -1px rgba(var(--hover-blue),.14)
  }
  .orders-sheet tbody tr:not(.after-sales-row):hover td.pin{
    background-color:#f5f8ff;
    box-shadow:
      inset 0 1px rgba(var(--hover-blue),.2),
      inset 0 -1px rgba(var(--hover-blue),.14),
      8px 0 13px -13px rgba(22,35,54,.75)
  }
  .orders-sheet tbody tr:not(.after-sales-row):hover td.pin-action{
    box-shadow:
      inset 2px 0 rgb(var(--hover-blue)),
      inset 0 1px rgba(var(--hover-blue),.2),
      inset 0 -1px rgba(var(--hover-blue),.14),
      8px 0 13px -13px rgba(22,35,54,.75)
  }
  .inventory-table tbody tr:hover td:first-child,.hot-table tbody tr:hover td:first-child,
  .report-orders-table tbody tr:hover td:first-child,.logs-table tbody tr:hover td:first-child{
    box-shadow:
      inset 2px 0 rgb(var(--hover-blue)),
      inset 0 1px rgba(var(--hover-blue),.2),
      inset 0 -1px rgba(var(--hover-blue),.14)
  }
  .orders-sheet tbody tr:not(.after-sales-row):hover .order-no{background:#eaf1ff!important}

  /* Inputs stay quieter than focus; focus remains the strongest state. */
  .filters input:hover,.filters select:hover,.inventory-filters input:hover,.hot-filters input:hover,
  .report-filters input:hover,.report-filters select:hover,.logs-filters input:hover,.logs-filters select:hover,
  .form-grid input:hover,.form-grid select:hover,.form-grid textarea:hover,
  .inline-input:hover,.inline-select:hover{
    border-color:#9baaf0;
    background-color:#fff;
    box-shadow:0 0 0 2px rgba(var(--hover-blue),.055)
  }
  .filters input:focus,.filters select:focus,.inventory-filters input:focus,.hot-filters input:focus,
  .report-filters input:focus,.report-filters select:focus,.logs-filters input:focus,.logs-filters select:focus,
  .form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus,
  .inline-input:focus,.inline-select:focus{
    border-color:rgb(var(--hover-blue));
    box-shadow:0 0 0 3px rgba(var(--hover-blue),.13),0 0 11px rgba(var(--hover-blue),.085)
  }

  /* Nested areas brighten their existing rails instead of adding another card glow. */
  .after-sales-details:hover{
    border-left-color:rgb(var(--hover-blue));
    box-shadow:inset 1px 0 rgba(var(--hover-cyan),.42),0 0 12px rgba(var(--hover-blue),.08)
  }
  .after-sales-details summary:hover{background-color:#edf3fc;color:#304bc2}
  .report-user-details>summary.report-summary-grid:hover,
  .report-shop-details>summary.report-summary-grid:hover{
    background-color:#f4f7ff;
    box-shadow:inset 2px 0 rgb(var(--hover-blue))
  }
  .report-user-details[open]>summary.report-summary-grid:hover,
  .report-shop-details[open]>summary.report-summary-grid:hover{
    box-shadow:inset 3px 0 rgb(var(--hover-blue))
  }
  .refund-paste-zone:hover,.image-paste-zone:hover{
    border-color:rgb(var(--hover-blue));
    box-shadow:0 0 0 2px rgba(var(--hover-blue),.1),0 0 12px rgba(var(--hover-blue),.1)
  }

  /* Navigation and headings use a fine local rail. */
  .topbar nav button:not(.active)::after{
    content:"";
    position:absolute;
    left:14px;
    right:14px;
    bottom:0;
    height:1px;
    pointer-events:none;
    opacity:0;
    transform:scaleX(.28);
    transform-origin:center;
    background:linear-gradient(90deg,transparent,rgba(var(--hover-blue),.95),rgba(var(--hover-cyan),.82),transparent);
    box-shadow:0 0 7px rgba(var(--hover-blue),.58);
    transition:opacity .16s var(--ease-ui),transform .2s var(--ease-ui)
  }
  .topbar nav button:not(.active):hover::after{opacity:1;transform:scaleX(1)}
  .topbar .user-menu:hover{
    border-color:rgba(var(--hover-blue),.36);
    box-shadow:inset 0 -1px rgba(var(--hover-cyan),.6),0 0 10px rgba(var(--hover-blue),.08)!important
  }
  .page-heading:hover h1:before,.stock-toolbar:hover h1:before,.hot-toolbar:hover h1:before,
  .report-toolbar:hover h1:before,.logs-toolbar:hover h1:before{
    box-shadow:0 0 8px rgba(var(--hover-blue),.5)
  }
  button:not(.topbar nav button):not(.user-menu):not(.log-page-button):hover{
    box-shadow:0 5px 14px rgba(28,52,105,.105)
  }
  .primary:hover,.add-order-btn:hover{
    box-shadow:0 6px 18px rgba(var(--hover-blue),.22),0 0 0 1px rgba(var(--hover-cyan),.14)!important
  }
  .product-img:hover,.inventory-image:hover,.hot-product-image:hover{
    border-color:rgba(var(--hover-blue),.62);
    transform:translateY(-1px);
    box-shadow:0 0 0 1px rgba(var(--hover-blue),.1),0 7px 18px rgba(35,55,120,.15),0 0 11px rgba(var(--hover-blue),.1)
  }
}

@media(max-width:900px){
  body{
    background:
      radial-gradient(700px 330px at 50% -5%,rgba(74,99,238,.095),transparent 70%),
      linear-gradient(180deg,#eef3f8 0,#e7edf4 100%)
  }
  .login-view{
    background:
      radial-gradient(680px 420px at 50% 0,rgba(74,99,238,.11),transparent 68%),
      linear-gradient(180deg,#eef3f9,#e6edf5)
  }
}

@media(prefers-reduced-motion:reduce){
  .filters,.quick-filters,.inventory-filters,.hot-filters,.report-filters,.report-quick,.logs-filters,
  .sheet-wrap,.inventory-table-wrap,.hot-table-wrap,.report-table-wrap,.logs-table-wrap,
  .logs-pagination,.empty,.placeholder-card,.login-card,
  .metrics .metric,.inventory-metrics>div,.report-metric,.log-metric,
  .after-sales-details,.report-summary-grid,.refund-paste-zone,.image-paste-zone,
  .product-img,.inventory-image,.hot-product-image,.topbar nav button::after{
    transition:none!important;
    animation:none!important
  }
  .product-img:hover,.inventory-image:hover,.hot-product-image:hover{transform:none!important}
}
/* Surface Balance
   Pearl blue-grey belongs to the canvas; real work happens on clear white surfaces. */
:root{
  --work-surface:#fff;
  --section-band:#f2f6fa;
  --section-band-strong:#e9eff6;
  --nested-canvas:#eaf0f6
}

/* Primary work surfaces */
.topbar,
.metrics,.metrics .metric,
.inventory-metrics>div,.report-metric,.log-metric,
.filters,.inventory-filters,.hot-filters,.report-filters,.logs-filters,
.sheet-wrap,.inventory-table-wrap,.hot-table-wrap,.report-table-wrap,.logs-table-wrap,
.empty,.placeholder-card,.logs-pagination,
dialog,dialog form,#orderForm>header,.inventory-dialog form>header,
.form-grid,.inventory-form-grid{
  background-color:var(--work-surface)
}
.metrics .metric.profit,.report-metric.profit{background-color:#f1faf6}

/* Dense data stays white; the header band carries hierarchy. */
.orders-sheet tbody td,
.inventory-table tbody td,.hot-table tbody td,.logs-table tbody td,
.report-table>tbody>tr>td,
.report-user-details,.report-shop-details,
.report-summary-grid,.report-orders-table,.report-orders-table td{
  background-color:#fff
}
.orders-sheet tbody tr.has-after td{background-color:#fffdfa}
.orders-sheet th,.inventory-table th,.hot-table th,.report-table th,.logs-table th{
  background-color:var(--section-band-strong)
}
.report-orders-table th{background-color:#f3f6fa}
.quick-filters,.report-quick{background-color:#f4f7fb}
.report-shop-list{background-color:var(--nested-canvas)}
.report-shop-details{
  border-color:#d7e0eb;
  background-color:#fff
}
.report-shop-details>.report-summary-grid,
.report-orders-table,.report-orders-table table{background-color:#fff}

/* After-sales: a pale title rail over a clean white editing surface. */
.after-sales-row>td{background:#fff!important}
.after-sales-details{
  background:#fff;
  border-left-color:#86a6eb;
  box-shadow:inset 0 1px #e5ebf3
}
.after-sales-details>summary,
.after-sales-details[open]>summary{
  background:#f2f6fa;
  border-bottom-color:#dbe4ee;
  color:#41516a
}
.after-sales-details[open]>summary{border-bottom:1px solid #dbe4ee}
.after-sales-grid{
  background:#fff;
  box-shadow:inset 0 1px #fff
}
.after-sales-fields .inline-input,
.after-sales-fields .inline-select,
.after-sales-fields .inline-textarea{
  background-color:#fff;
  border-color:#cbd6e3
}
.refund-paste-zone,.image-paste-zone{
  background-color:#fff;
  border-color:#bac8d9
}
.refund-paste-zone>span,.paste-empty{background-color:transparent}

/* Dialog content is a white task surface; only its footer is a subtle boundary band. */
#orderForm>footer,.inventory-dialog form>footer{background-color:#f8fafc}
dialog input,dialog select,dialog textarea{background-color:#fff}

/* White surfaces need a precise edge against the pearl canvas. */
.metrics,
.filters,.inventory-filters,.hot-filters,.report-filters,.logs-filters,
.sheet-wrap,.inventory-table-wrap,.hot-table-wrap,.report-table-wrap,.logs-table-wrap,
.empty,.placeholder-card,.logs-pagination{
  border-color:#cfd9e6
}
.placeholder-card{
  border:1px solid #cfd9e6;
  border-radius:11px;
  box-shadow:var(--shadow-card)
}

/* Preserve the new hover language after surface balancing. */
@media (hover:hover) and (pointer:fine){
  .after-sales-details>summary:hover,
  .after-sales-details[open]>summary:hover{
    background-color:#eaf1fc;
    color:#304bc2
  }
  .orders-sheet tbody tr:not(.after-sales-row):hover td,
  .inventory-table tbody tr:hover td,.hot-table tbody tr:hover td,
  .logs-table tbody tr:hover td,.report-orders-table tbody tr:hover td{
    background-color:#f5f8ff
  }
}
/* Reported-state visibility + full-bleed order thumbnails */
.orders-sheet .select-small{
  width:76px;
  min-width:76px;
  text-align:center
}
.orders-sheet .select-small .reported-control{
  width:68px;
  margin-inline:auto
}
.orders-sheet .select-small .inline-select[data-field="reported"]{
  width:68px;
  min-width:68px;
  height:36px;
  padding:7px 25px 7px 10px;
  border-color:#c5d0de;
  background:#fff;
  color:#314057;
  font-size:12px;
  font-weight:700;
  line-height:1.2;
  text-align:left;
  text-align-last:left
}
.orders-sheet .select-small .inline-select[data-field="reported"].reported-yes{
  border-color:#9fd3c3;
  background:#eaf7f3;
  color:#116f5d
}
.orders-sheet .select-small .inline-select[data-field="reported"].reported-no{
  border-color:#cbd5e1;
  background:#f5f7fa;
  color:#56657a
}
.orders-sheet .select-small .reported-control small{
  max-width:68px;
  color:#607087;
  font-size:9.5px;
  line-height:1.25
}

.orders-sheet .product-image-frame{
  width:64px;
  height:64px;
  display:inline-grid;
  place-items:center;
  overflow:hidden;
  vertical-align:middle;
  border:1px solid #cfd9e6;
  border-radius:7px;
  background:#f4f6f9;
  box-shadow:0 2px 8px rgba(28,46,75,.08);
  cursor:zoom-in;
  transition:border-color .18s var(--ease-ui),box-shadow .18s var(--ease-ui),transform .18s var(--ease-ui)
}
.orders-sheet .product-image-frame .product-img{
  width:100%;
  height:100%;
  display:block;
  border:0;
  border-radius:0;
  background:#f4f6f9;
  object-fit:cover;
  object-position:center;
  transform:scale(1.18);
  transform-origin:center;
  box-shadow:none;
  transition:transform .2s var(--ease-ui)
}
.orders-sheet .product-image-empty{cursor:default}
.orders-sheet .product-image-empty .product-img{transform:none}

@media (hover:hover) and (pointer:fine){
  .orders-sheet .product-image-frame:not(.product-image-empty):hover{
    border-color:rgba(var(--hover-blue),.62);
    transform:translateY(-1px);
    box-shadow:0 0 0 1px rgba(var(--hover-blue),.1),0 7px 18px rgba(35,55,120,.15),0 0 11px rgba(var(--hover-blue),.1)
  }
  .orders-sheet .product-image-frame:not(.product-image-empty):hover .product-img{
    border-color:transparent;
    transform:scale(1.22);
    box-shadow:none
  }
}
@media(prefers-reduced-motion:reduce){
  .orders-sheet .product-image-frame,.orders-sheet .product-image-frame .product-img{transition:none!important}
  .orders-sheet .product-image-frame:hover{transform:none!important}
}
/* Duplicate order groups */
.order-group-tone-0{--order-group-rgb:37,99,235}
.order-group-tone-1{--order-group-rgb:124,58,237}
.order-group-tone-2{--order-group-rgb:8,145,178}
.order-group-tone-3{--order-group-rgb:217,119,6}
.order-group-tone-4{--order-group-rgb:225,29,72}
.order-group-tone-5{--order-group-rgb:5,150,105}
.order-group-tone-6{--order-group-rgb:79,70,229}
.order-group-tone-7{--order-group-rgb:234,88,12}
.orders-sheet tbody tr.order-group:not(.after-sales-row)>td{
  background-color:rgba(var(--order-group-rgb),.055)!important;
  border-top-color:rgba(var(--order-group-rgb),.2)!important
}
.orders-sheet tbody tr.order-group:not(.after-sales-row)>.pin-action{
  box-shadow:inset 3px 0 0 rgb(var(--order-group-rgb)),8px 0 14px -13px rgba(15,23,42,.5)
}
.orders-sheet tbody tr.order-group:not(.after-sales-row)>.order-no{
  background:rgba(var(--order-group-rgb),.12)!important;
  color:rgb(var(--order-group-rgb));
  box-shadow:inset 0 0 0 1px rgba(var(--order-group-rgb),.22)
}
.order-number-value{display:block;font-weight:700}
.order-group-badge{
  display:inline-flex;
  align-items:center;
  min-height:19px;
  margin-top:6px;
  padding:1px 6px;
  border:1px solid rgba(var(--order-group-rgb),.3);
  border-radius:999px;
  background:rgba(var(--order-group-rgb),.09);
  color:rgb(var(--order-group-rgb));
  font-size:10px;
  font-weight:700;
  line-height:15px;
  white-space:nowrap
}
.orders-sheet .after-sales-row.order-group .after-sales-details{
  border-left-color:rgb(var(--order-group-rgb))!important;
  box-shadow:inset 3px 0 10px -9px rgba(var(--order-group-rgb),.8)
}
@media(hover:hover) and (pointer:fine){
  .orders-sheet tbody tr.order-group:not(.after-sales-row):hover>td{
    background-color:rgba(var(--order-group-rgb),.105)!important
  }
  .orders-sheet tbody tr.order-group:not(.after-sales-row):hover>.order-no{
    background:rgba(var(--order-group-rgb),.17)!important
  }
}
/* Color Icon System */
.icon-sprite{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}
.ui-icon{width:16px;height:16px;display:inline-block;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.18em}
button:has(>.ui-icon){display:inline-flex;align-items:center;justify-content:center;gap:6px}
.topbar nav button{--icon-color:#315be8;--icon-bg:#eef2ff}
.topbar nav button[data-page="ads"]{--icon-color:#7c3aed;--icon-bg:#f3edff}
.topbar nav button[data-page="reports"]{--icon-color:#0b7f9c;--icon-bg:#eaf8fb}
.topbar nav button[data-page="hot"]{--icon-color:#db5a17;--icon-bg:#fff1e8}
.topbar nav button[data-page="stock"]{--icon-color:#078468;--icon-bg:#e9f8f3}
.topbar nav button[data-page="users"]{--icon-color:#6d4cc2;--icon-bg:#f2eeff}
.topbar nav button[data-page="settings"]{--icon-color:#b06b00;--icon-bg:#fff5df}
.topbar nav button[data-page="logs"]{--icon-color:#586b83;--icon-bg:#edf1f6}
.topbar nav button i,.topbar nav button.active i{
  width:25px;height:25px;
  display:grid;place-items:center;
  border:1px solid color-mix(in srgb,var(--icon-color) 18%,transparent);
  border-radius:7px;
  background:var(--icon-bg)!important;
  color:var(--icon-color)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.85),0 2px 5px color-mix(in srgb,var(--icon-color) 13%,transparent)
}
.topbar nav button i .ui-icon{width:15px;height:15px}
.topbar nav button:hover i{border-color:color-mix(in srgb,var(--icon-color) 35%,transparent);box-shadow:0 0 0 2px color-mix(in srgb,var(--icon-color) 9%,transparent),0 0 9px color-mix(in srgb,var(--icon-color) 19%,transparent)}
.topbar nav button.active{color:var(--icon-color)}
.page-heading h1,.stock-toolbar h1,.hot-toolbar h1,.report-toolbar h1,.logs-toolbar h1{display:flex;align-items:center;gap:9px}
.page-heading h1>.ui-icon,.stock-toolbar h1>.ui-icon,.hot-toolbar h1>.ui-icon,.report-toolbar h1>.ui-icon,.logs-toolbar h1>.ui-icon{
  width:28px;height:28px;padding:6px;box-sizing:border-box;border-radius:8px;background:#eef2ff;color:#315be8;box-shadow:inset 0 0 0 1px #dbe4ff
}
.hot-toolbar h1>.ui-icon{background:#fff1e8;color:#db5a17;box-shadow:inset 0 0 0 1px #ffdaca}
.stock-toolbar h1>.ui-icon{background:#e9f8f3;color:#078468;box-shadow:inset 0 0 0 1px #cceee2}
.report-toolbar h1>.ui-icon{background:#eaf8fb;color:#0b7f9c;box-shadow:inset 0 0 0 1px #cdebf1}
.logs-toolbar h1>.ui-icon{background:#edf1f6;color:#586b83;box-shadow:inset 0 0 0 1px #dbe3ec}
.primary>.ui-icon,.add-order-btn>.ui-icon{color:#fff;filter:drop-shadow(0 1px 2px rgba(0,0,0,.16))}
.module-filter-actions button>.ui-icon,.filter-actions button>.ui-icon{width:14px;height:14px}
.module-filter-actions button:not(.primary)>.ui-icon,.filter-actions button:not(.primary):not(.add-order-btn)>.ui-icon{color:#64748b}
.quick-filters button,.report-quick button{display:inline-flex;align-items:center;gap:5px}
.quick-filters button>.ui-icon,.report-quick button>.ui-icon{width:13px;height:13px;color:#637493}
.quick-filters button[data-status]>.ui-icon{color:#a56a0a}
.quick-filters button[data-special]>.ui-icon{color:#c53f52}
.metrics .metric,.inventory-metrics>div,.report-metric,.log-metric{display:flex;align-items:center;justify-content:flex-start;gap:11px}
.metric-copy{min-width:0;display:grid;gap:2px}
.metric-copy>span{display:block;color:#718096;font-size:11.5px;line-height:18px}
.metric-copy>b{display:block;color:#1c2940;font-size:18px;line-height:26px;font-weight:720;font-variant-numeric:tabular-nums}
.metric-icon{
  width:34px;height:34px;display:grid!important;place-items:center;flex:0 0 34px;margin:0!important;border-radius:9px;background:#eef3ff;color:#315be8;box-shadow:inset 0 0 0 1px rgba(49,91,232,.12)
}
.metric-icon>.ui-icon{width:17px;height:17px}
.metrics .metric:nth-child(2) .metric-icon,.inventory-metrics>div:nth-child(2) .metric-icon,.hot-metrics>div:nth-child(2) .metric-icon{background:#eaf8fb;color:#0b819d;box-shadow:inset 0 0 0 1px rgba(11,129,157,.13)}
.metrics .metric:nth-child(3) .metric-icon,.hot-metrics>div:nth-child(3) .metric-icon{background:#eef2ff;color:#315be8}
.metrics .metric:nth-child(4) .metric-icon,.metrics .metric:nth-child(6) .metric-icon{background:#f2eeff;color:#694bb6;box-shadow:inset 0 0 0 1px rgba(105,75,182,.13)}
.metrics .metric:nth-child(5) .metric-icon{background:#fff5df;color:#a96500;box-shadow:inset 0 0 0 1px rgba(169,101,0,.15)}
.metrics .metric.profit .metric-icon,.report-metric.profit .metric-icon,.inventory-metrics>div:last-child .metric-icon{background:#e8f8f2;color:#078468;box-shadow:inset 0 0 0 1px rgba(7,132,104,.13)}
.log-metric.created .metric-icon{background:#e8f8f2;color:#078468}.log-metric.updated .metric-icon{background:#eef2ff;color:#315be8}.log-metric.deleted .metric-icon{background:#fff0f2;color:#c64555}
.orders-sheet .actions button,.inventory-actions button{display:inline-flex;align-items:center;justify-content:center;gap:4px}
.orders-sheet .actions button>.ui-icon,.inventory-actions button>.ui-icon{width:12px;height:12px}
.orders-sheet .actions .edit>.ui-icon,.inventory-actions .edit>.ui-icon{color:#315be8}
.orders-sheet .actions .delete>.ui-icon,.inventory-actions .delete>.ui-icon{color:#c64555}
.orders-sheet .actions .copy>.ui-icon{color:#a96500}
.after-sales-details summary>span{display:inline-flex;align-items:center;gap:6px}.after-sales-details summary>span>.ui-icon{width:14px;height:14px;color:#c64555}
.empty-icon{width:42px;height:42px;display:grid!important;place-items:center;margin:0 auto 12px;border-radius:12px;background:#eef3ff!important;color:#315be8!important;box-shadow:inset 0 0 0 1px #d9e4ff,0 6px 18px rgba(49,91,232,.1)}
.empty-icon>.ui-icon{width:21px;height:21px}.placeholder-card>.empty-icon{margin-bottom:14px}
.paste-icon{width:32px;height:32px;display:grid;place-items:center;margin:0 auto 5px;border-radius:9px;background:#eef3ff;color:#315be8}.paste-icon>.ui-icon{width:17px;height:17px}
.remove-image>.ui-icon,.refund-remove>.ui-icon{width:12px;height:12px;color:#c64555}
dialog footer button>.ui-icon{width:14px;height:14px}
#closeDialog,#closeInventoryDialog,#closeImageDialog{display:grid!important;place-items:center!important;padding:0!important}#closeDialog>.ui-icon,#closeInventoryDialog>.ui-icon,#closeImageDialog>.ui-icon{width:18px;height:18px}
.user-menu .avatar{color:#315be8;background:#eef2ff;border:1px solid #d8e2fb}.user-menu .avatar>.ui-icon{width:16px;height:16px}
@media(max-width:900px){.metric-icon{width:30px;height:30px;flex-basis:30px}.topbar nav button i{width:24px;height:24px}}
@media(prefers-reduced-motion:reduce){.topbar nav button i{transition:none!important}}
.metrics .metric>.metric-icon{color:#315be8}
.refund-paste-zone .paste-icon{margin-bottom:4px}
.refund-remove{display:inline-flex!important;align-items:center;gap:4px}
/* Login Technology Motion */
.login-view{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(135deg,#e8eef8 0%,#f5f8fc 47%,#e5edf6 100%)}
.login-tech-scene{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.login-tech-scene::before,.login-tech-scene::after{content:"";position:absolute;width:48vw;height:48vw;border-radius:50%;filter:blur(3px);opacity:.7;will-change:transform}
.login-tech-scene::before{left:-16vw;top:-20vw;background:radial-gradient(circle,rgba(72,92,230,.19) 0,rgba(72,92,230,.07) 36%,transparent 68%);animation:techAuraA 18s ease-in-out infinite alternate}
.login-tech-scene::after{right:-17vw;bottom:-22vw;background:radial-gradient(circle,rgba(22,172,211,.17) 0,rgba(22,172,211,.06) 38%,transparent 69%);animation:techAuraB 22s ease-in-out infinite alternate}
.tech-grid{position:absolute;inset:-35%;background-image:linear-gradient(rgba(71,96,160,.075) 1px,transparent 1px),linear-gradient(90deg,rgba(71,96,160,.075) 1px,transparent 1px);background-size:52px 52px;transform:perspective(800px) rotateX(62deg) translateY(23%);transform-origin:center bottom;mask-image:linear-gradient(to bottom,transparent 4%,rgba(0,0,0,.82) 38%,transparent 88%);animation:techGridFlow 24s linear infinite}
.tech-orbit{position:absolute;border:1px solid rgba(53,89,220,.14);border-radius:50%;box-shadow:inset 0 0 24px rgba(49,91,232,.035),0 0 18px rgba(49,91,232,.025)}
.tech-orbit::before{content:"";position:absolute;left:50%;top:-3px;width:6px;height:6px;border-radius:50%;background:#4f6ff0;box-shadow:0 0 0 4px rgba(79,111,240,.1),0 0 14px rgba(79,111,240,.75)}
.orbit-a{width:440px;height:440px;left:7vw;top:16vh;animation:techOrbit 32s linear infinite}
.orbit-b{width:310px;height:310px;right:10vw;top:12vh;border-color:rgba(13,155,192,.13);animation:techOrbit 26s linear infinite reverse}
.orbit-b::before{background:#13a8c9;box-shadow:0 0 0 4px rgba(19,168,201,.1),0 0 14px rgba(19,168,201,.7)}
.tech-node{position:absolute;width:8px;height:8px;border:1px solid rgba(255,255,255,.85);border-radius:50%;background:#5875ed;box-shadow:0 0 0 5px rgba(88,117,237,.09),0 0 18px rgba(88,117,237,.72);animation:techNodePulse 3.2s ease-in-out infinite}
.node-a{left:17%;top:25%}.node-b{left:29%;bottom:22%;animation-delay:-1.1s}.node-c{right:21%;top:28%;background:#13a8c9;animation-delay:-2.2s}.node-d{right:31%;bottom:18%;background:#7c5ce2;animation-delay:-.5s}
.tech-scan{position:absolute;left:8%;right:8%;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(59,91,224,.08) 18%,rgba(59,91,224,.48) 50%,rgba(23,167,203,.12) 82%,transparent);filter:drop-shadow(0 0 5px rgba(59,91,224,.36));animation:techScan 8s ease-in-out infinite}
.login-card{position:relative;z-index:1;overflow:hidden;border-color:rgba(172,188,220,.78);background:rgba(255,255,255,.86);box-shadow:0 26px 75px rgba(35,53,88,.16),0 0 0 1px rgba(255,255,255,.7),0 0 34px rgba(69,92,218,.07);backdrop-filter:blur(18px) saturate(125%);animation:loginCardEnter .72s cubic-bezier(.22,1,.36,1) both}
.login-card::before{content:"";position:absolute;left:18px;right:18px;top:0;height:1px;background:linear-gradient(90deg,transparent,#526fee 32%,#1eb1d0 52%,#526fee 72%,transparent);filter:drop-shadow(0 0 5px rgba(67,99,232,.55));transform-origin:center;animation:loginRail 4.5s ease-in-out infinite}
.login-card::after{content:"";position:absolute;inset:-45% -80%;z-index:-1;background:linear-gradient(105deg,transparent 42%,rgba(89,113,236,.055) 49%,rgba(23,174,207,.075) 51%,transparent 58%);transform:translateX(-36%);animation:loginSheen 9s ease-in-out infinite}
.login-brand .login-logo{animation:loginLogoPulse 4s ease-in-out infinite;will-change:transform,filter}
.login-brand small{position:relative}.login-brand small::after{content:"";display:inline-block;width:5px;height:5px;margin-left:7px;border-radius:50%;background:#17a9c8;box-shadow:0 0 8px rgba(23,169,200,.75);vertical-align:1px;animation:techNodePulse 2.4s ease-in-out infinite}
.login-card input{transition:border-color .18s ease,box-shadow .18s ease,background .18s ease,transform .18s ease}
.login-card input:hover{border-color:#aebce0;background:#fff}.login-card input:focus{transform:translateY(-1px);box-shadow:0 0 0 3px rgba(61,91,217,.11),0 7px 18px rgba(61,91,217,.08)}
.login-card .primary{position:relative;overflow:hidden}.login-card .primary::after{content:"";position:absolute;top:0;bottom:0;width:38%;left:-48%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);transform:skewX(-18deg);animation:loginButtonSweep 4.6s ease-in-out infinite}
@keyframes loginCardEnter{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}
@keyframes techAuraA{from{transform:translate3d(-2%,-1%,0) scale(.96)}to{transform:translate3d(10%,8%,0) scale(1.08)}}
@keyframes techAuraB{from{transform:translate3d(2%,2%,0) scale(1.02)}to{transform:translate3d(-11%,-8%,0) scale(.94)}}
@keyframes techGridFlow{from{background-position:0 0,0 0}to{background-position:0 104px,104px 0}}
@keyframes techOrbit{to{transform:rotate(360deg)}}
@keyframes techNodePulse{0%,100%{opacity:.42;transform:scale(.78)}50%{opacity:1;transform:scale(1.12)}}
@keyframes techScan{0%,10%{transform:translateY(5vh);opacity:0}25%{opacity:.55}72%{opacity:.32}90%,100%{transform:translateY(88vh);opacity:0}}
@keyframes loginRail{0%,100%{opacity:.4;transform:scaleX(.42)}50%{opacity:1;transform:scaleX(1)}}
@keyframes loginSheen{0%,52%{transform:translateX(-38%)}72%,100%{transform:translateX(38%)}}
@keyframes loginLogoPulse{0%,100%{transform:translateY(0);filter:drop-shadow(0 4px 7px rgba(24,105,232,.18))}50%{transform:translateY(-2px);filter:drop-shadow(0 7px 12px rgba(24,105,232,.33))}}
@keyframes loginButtonSweep{0%,58%{left:-48%}80%,100%{left:118%}}
@media(max-width:900px){.orbit-a{left:-210px;top:10vh}.orbit-b{right:-160px;top:auto;bottom:8vh}.tech-grid{background-size:44px 44px;opacity:.72}.login-card{backdrop-filter:blur(14px) saturate(118%)}}
@media(prefers-reduced-motion:reduce){.login-tech-scene::before,.login-tech-scene::after,.tech-grid,.tech-orbit,.tech-node,.tech-scan,.login-card,.login-card::before,.login-card::after,.login-brand .login-logo,.login-brand small::after,.login-card .primary::after{animation:none!important}.login-card{transform:none!important}.tech-scan{display:none}.login-card input:focus{transform:none}}
/* Compact Image Preview — centered at 50% of the viewport */
.image-dialog{
  inset:auto!important;
  width:min(50vw,920px)!important;
  max-width:calc(100vw - 40px)!important;
  height:min(50vh,720px)!important;
  max-height:calc(100vh - 40px)!important;
  margin:auto!important;
  padding:14px!important;
  border:1px solid rgba(164,185,218,.34)!important;
  border-radius:14px!important;
  background:#0d1522!important;
  box-shadow:0 26px 80px rgba(2,8,18,.5),0 0 0 1px rgba(80,122,198,.08),0 0 28px rgba(52,95,183,.11)!important;
  overflow:hidden!important
}
.image-dialog img{
  width:100%!important;
  max-width:100%!important;
  height:calc(100% - 30px)!important;
  max-height:none!important;
  display:block!important;
  object-fit:contain!important;
  object-position:center!important;
  border-radius:8px!important;
  background:#111b2a
}
.image-dialog p{
  position:static!important;
  left:auto!important;
  bottom:auto!important;
  transform:none!important;
  height:22px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  margin:6px 0 0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  color:#aab8cc!important;
  line-height:16px
}
.image-dialog #closeImageDialog{
  position:absolute!important;
  right:9px!important;
  top:9px!important;
  z-index:3!important;
  width:32px!important;
  height:32px!important;
  border:1px solid rgba(255,255,255,.3)!important;
  border-radius:9px!important;
  background:rgba(7,16,29,.78)!important;
  color:#fff!important;
  box-shadow:0 5px 16px rgba(0,0,0,.24)!important;
  backdrop-filter:blur(8px)
}
.image-dialog #closeImageDialog:hover{border-color:rgba(106,158,255,.74)!important;background:rgba(25,52,91,.92)!important;box-shadow:0 0 13px rgba(65,121,225,.3)!important}
.image-dialog::backdrop{background:rgba(7,13,23,.66)!important;backdrop-filter:blur(3px)}
@media(max-width:900px){.image-dialog{width:min(76vw,620px)!important;height:min(56vh,620px)!important;max-width:calc(100vw - 24px)!important;max-height:calc(100vh - 24px)!important;padding:10px!important}.image-dialog img{height:calc(100% - 27px)!important}.image-dialog p{font-size:10px}}
/* Compact Audit Field Table — one changed field per row */
.logs-table-wrap{height:calc(100vh - 302px);min-height:400px;border-radius:0;background:#fff}
.logs-table{min-width:1120px;table-layout:fixed;font-size:12px}
.logs-table th,.logs-table td{height:38px!important;min-height:38px;padding:6px 10px!important;vertical-align:middle!important;border-right:1px solid #e8edf3;border-bottom:1px solid #e3e9f0}
.logs-table th{height:38px!important;background:#e9eff6!important;color:#3f5067;font-size:11.5px;font-weight:750}
.logs-table th:nth-child(1),.logs-table td:nth-child(1){width:92px;text-align:center}
.logs-table th:nth-child(2),.logs-table td:nth-child(2){width:132px}
.logs-table th:nth-child(3),.logs-table td:nth-child(3){width:150px}
.logs-table th:nth-child(4),.logs-table td:nth-child(4){width:275px}
.logs-table th:nth-child(5),.logs-table td:nth-child(5){width:auto;min-width:360px;white-space:nowrap}
.logs-table th:nth-child(6),.logs-table td:nth-child(6){width:175px;white-space:nowrap}
.logs-table th:nth-child(7),.logs-table td:nth-child(7){width:115px;white-space:nowrap}
.logs-table tbody tr:nth-child(even) td{background:#fbfcfe}
.logs-table tbody tr:hover td{background:#edf5ff!important}
.log-number{color:#55677f;font:650 11px/1.3 ui-monospace,SFMono-Regular,Consolas,monospace;white-space:nowrap}
.log-table-name{display:inline-flex;align-items:center;min-width:60px;height:22px;padding:0 7px;border:1px solid #cad8e9;border-radius:5px;background:#f2f6fb;color:#425671;font-size:10.5px;font-weight:700}
.log-table-name.order{border-color:#c9d4f3;background:#f0f3ff;color:#4057aa}.log-table-name.inventory{border-color:#b9ddcf;background:#ecf8f4;color:#14715d}
.logs-table td:nth-child(2)>small{margin-left:6px;color:#8a96a6;font-size:10px}
.logs-table .log-action-badge{min-width:0;height:23px;padding:0 7px;border-radius:5px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:10.5px}
.logs-table .log-action-badge::before{width:4px;height:4px}
.log-record-id{display:block;overflow:hidden;color:#55667d;font:500 10.5px/1.4 ui-monospace,SFMono-Regular,Consolas,monospace;text-overflow:ellipsis;white-space:nowrap}
.log-value-cell{display:flex;align-items:center;flex-wrap:nowrap;gap:7px;width:100%;min-width:0;max-width:100%;height:26px;overflow:hidden;line-height:1.45}
.log-value{display:block;min-width:0;max-width:min(760px,100%);max-height:26px;overflow:hidden;color:#27384e;text-overflow:ellipsis;white-space:nowrap}
.log-value.old,.log-value.new,.log-value.is-empty{padding:3px 7px;border-radius:4px}
.log-value.old{background:#fff0f2;color:#aa3b49;text-decoration:line-through;text-decoration-color:rgba(170,59,73,.35)}
.log-value.new{background:#e8f8f2;color:#08745a}.log-value.is-empty{flex:none;min-height:0;background:#f2f4f7;color:#7a8697}
.log-arrow{flex:none;color:#8794a6;font-size:12px}
.logs-table .log-time{color:#4b5e75;font-variant-numeric:tabular-nums}
.logs-table td:last-child{display:table-cell}.logs-table td:last-child .log-actor{display:inline-grid;width:22px;height:22px;margin-right:6px;place-items:center;border-radius:6px;background:#eef2ff;color:#4058b8;font-size:10px}.logs-table td:last-child b{font-size:11px}
.logs-pagination{min-height:48px}
@media(max-width:900px){.logs-table-wrap{height:58vh}.logs-table{min-width:1050px}.logs-table th:nth-child(4),.logs-table td:nth-child(4){width:230px}.logs-table th:nth-child(6),.logs-table td:nth-child(6){width:160px}}
/* Minimal Horizontal Login Motion */
.login-view{background:linear-gradient(135deg,#edf2f8 0%,#f7f9fc 52%,#eaf1f8 100%)}
.login-tech-scene::before,.login-tech-scene::after{width:56vw;height:56vw;opacity:.48;filter:blur(9px)}
.login-tech-scene::before{left:-24vw;top:-30vw;background:radial-gradient(circle,rgba(76,98,224,.15),rgba(76,98,224,.045) 38%,transparent 67%);animation:minimalAuraLeft 24s ease-in-out infinite alternate}
.login-tech-scene::after{right:-25vw;bottom:-34vw;background:radial-gradient(circle,rgba(28,167,202,.13),rgba(28,167,202,.035) 40%,transparent 68%);animation:minimalAuraRight 28s ease-in-out infinite alternate}
.tech-orbit,.tech-node{display:none!important}
.tech-grid{inset:0;background-image:linear-gradient(rgba(72,92,145,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(72,92,145,.045) 1px,transparent 1px);background-size:64px 64px;transform:none;mask-image:radial-gradient(ellipse at center,rgba(0,0,0,.68),transparent 77%);opacity:.55;animation:minimalGridX 42s linear infinite}
.tech-scan{left:0;right:auto;top:34%;width:34vw;height:1px;background:linear-gradient(90deg,transparent,rgba(65,91,216,.12) 18%,rgba(65,91,216,.66) 58%,rgba(25,165,196,.2) 82%,transparent);filter:drop-shadow(0 0 5px rgba(65,91,216,.3));animation:minimalScanX 9s ease-in-out infinite}
.login-card{background:rgba(255,255,255,.91);border-color:#ccd7e5;box-shadow:0 22px 64px rgba(31,48,78,.13),0 1px 2px rgba(15,23,42,.04);backdrop-filter:blur(14px) saturate(112%);animation:loginCardEnter .55s cubic-bezier(.22,1,.36,1) both}
.login-card::before{left:24px;right:24px;background:linear-gradient(90deg,transparent,rgba(70,96,221,.75),rgba(22,163,195,.48),transparent);filter:drop-shadow(0 0 3px rgba(70,96,221,.3));opacity:.72;transform:none;animation:none}
.login-card::after{display:none}
.login-brand .login-logo{animation:none;filter:drop-shadow(0 5px 9px rgba(24,105,232,.23))}
.login-brand small::after{width:4px;height:4px;opacity:.8;animation:minimalStatusPulse 3.2s ease-in-out infinite}
.login-card .primary::after{width:28%;left:-38%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);animation:minimalButtonSweep 7s ease-in-out infinite}
@keyframes minimalAuraLeft{from{transform:translate3d(-2%,0,0) scale(.98)}to{transform:translate3d(8%,4%,0) scale(1.05)}}
@keyframes minimalAuraRight{from{transform:translate3d(2%,0,0) scale(1.03)}to{transform:translate3d(-7%,-3%,0) scale(.97)}}
@keyframes minimalGridX{from{background-position:0 0,0 0}to{background-position:128px 0,128px 0}}
@keyframes minimalScanX{0%,12%{transform:translateX(-38vw);opacity:0}26%{opacity:.5}70%{opacity:.28}88%,100%{transform:translateX(106vw);opacity:0}}
@keyframes minimalStatusPulse{0%,100%{opacity:.38;box-shadow:0 0 4px rgba(23,169,200,.3)}50%{opacity:.95;box-shadow:0 0 8px rgba(23,169,200,.65)}}
@keyframes minimalButtonSweep{0%,70%{left:-38%;opacity:0}76%{opacity:.75}91%,100%{left:115%;opacity:0}}
@media(max-width:900px){.tech-grid{background-size:54px 54px;opacity:.46}.tech-scan{width:48vw;top:28%}.login-card{backdrop-filter:blur(11px) saturate(108%)}}
@media(prefers-reduced-motion:reduce){.login-tech-scene::before,.login-tech-scene::after,.tech-grid,.tech-scan,.login-brand small::after,.login-card .primary::after{animation:none!important}.tech-scan{display:none}}
/* Inline order draft and locked-row workflow */
.orders-sheet .row-locked .row-display{display:block;color:#304158;line-height:1.45;white-space:normal;word-break:break-word}
.orders-sheet .row-locked .row-display.is-empty{color:#a2afbf}
.orders-sheet .row-locked .reported-display,.orders-sheet .row-status{display:inline-flex;min-height:28px;align-items:center;border:1px solid #d4dfeb;border-radius:6px;padding:0 9px;font-size:11px;font-weight:700;white-space:nowrap}
.orders-sheet .row-locked .reported-display.yes{border-color:#a9dacb;background:#ebf8f3;color:#08725a}
.orders-sheet .row-locked .reported-display.no{background:#f4f6f9;color:#65758a}
.orders-sheet .row-editing>td{background:#f8fbff!important;border-top:1px solid #9bb8f3;border-bottom:1px solid #9bb8f3}
.orders-sheet .row-editing>td:first-child{box-shadow:inset 3px 0 #4167dd}
.orders-sheet .row-draft>td{background:#f4f8ff!important}
.orders-sheet .row-editing .inline-input,.orders-sheet .row-editing .inline-select{min-height:34px;border-color:#afc5e3;background:#fff;box-shadow:0 1px 2px rgba(28,48,78,.04)}
.orders-sheet .row-editing .inline-textarea{height:62px;resize:vertical}
.orders-sheet .row-editing .row-stack{display:grid;gap:5px}
.orders-sheet .row-editing .actions{gap:5px}
.orders-sheet .actions .confirm{border-color:#8fd4c0!important;background:#eaf8f3!important;color:#08715a!important}
.orders-sheet .actions .confirm:hover{border-color:#55b99b!important;background:#dff5ed!important}
.orders-sheet .actions .cancel{border-color:#cdd7e3!important;background:#fff!important;color:#58687d!important}
.orders-sheet .actions .cancel:hover{border-color:#9dafc4!important;background:#f3f6fa!important}
.orders-sheet .product-cell{position:relative}
.row-image-paste-zone{display:grid;width:64px;height:64px;place-items:center;overflow:hidden;border:1px dashed #8eafe0;border-radius:8px;background:#f8fbff;color:#45617f;cursor:pointer}
.row-image-paste-zone>span{display:grid;place-items:center;gap:1px;text-align:center}
.row-image-paste-zone .ui-icon{width:15px;height:15px;color:#4167dd}
.row-image-paste-zone b{font-size:9px}.row-image-paste-zone small{font-size:8px;color:#8796aa}
.row-image-paste-zone img{width:100%;height:100%;object-fit:cover}
.row-image-paste-zone:hover,.row-image-paste-zone:focus,.row-image-paste-zone.is-active{border-style:solid;border-color:#4167dd;outline:0;box-shadow:0 0 0 3px rgba(65,103,221,.12)}
.row-image-remove{position:absolute;right:4px;top:4px;z-index:2;width:22px!important;height:22px!important;min-width:0!important;padding:0!important;border-color:#efb7bf!important;background:#fff5f6!important;color:#bd3547!important;box-shadow:none!important}
.row-image-remove .ui-icon{width:12px;height:12px}
.after-sales-row.row-editing>td{background:#fff!important}
.after-sales-row.row-editing .after-sales-details{border-left-color:#4167dd}
.after-sales-row.row-locked .after-sales-grid{background:#fff}
.after-sales-row.row-locked .refund-paste-zone.locked{cursor:default;border-style:solid}
.after-sales-fields label>span:first-child,.refund-image-field>span:first-child{display:block;margin-bottom:5px;color:#66768b;font-size:10px;font-weight:650}
@media(max-width:900px){.orders-sheet .row-editing .inline-input,.orders-sheet .row-editing .inline-select{min-width:110px}.row-image-paste-zone{width:58px;height:58px}}
/* Keep image preview centered in the visible browser viewport */
.image-dialog,
.image-dialog[open]{
  position:fixed!important;
  inset:50% auto auto 50%!important;
  margin:0!important;
  transform:translate(-50%,-50%)!important;
}
/* Shop identity logos */
.orders-sheet .pin-customer{width:132px;min-width:132px}
.shop-identity,.shop-cell-editor{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:100%;min-width:0}
.shop-logo{display:block;width:58px;height:58px;object-fit:cover;object-position:center;border:1px solid #d7dfeb;border-radius:10px;background:#fff;box-shadow:0 3px 10px rgba(31,48,78,.1)}
.shop-name{display:block;max-width:116px;overflow:hidden;color:#22314a;font-size:11.5px;font-weight:750;line-height:1.25;text-align:center;text-overflow:ellipsis;white-space:nowrap}
.shop-cell-editor .inline-select{width:116px;min-width:116px;font-size:10.5px;text-align:center}
.orders-sheet .row-editing .pin-customer{padding-top:8px;padding-bottom:8px}
@media(max-width:900px){.orders-sheet .pin-customer{width:124px;min-width:124px}.shop-logo{width:52px;height:52px}.shop-cell-editor .inline-select{width:108px;min-width:108px}}
/* User-facing source links are plain, copyable single-line text */
.orders-sheet .link-cell .readonly-text-value{
  display:block;width:100%;max-width:180px;overflow:hidden;
  color:#34465d;font:inherit;line-height:1.35;text-overflow:ellipsis;white-space:nowrap;
  cursor:text;user-select:text;-webkit-user-select:text
}
.orders-sheet .link-cell .readonly-text-value::selection{background:#cfe0ff;color:#182a43}/* Permission-scoped direct editing and auto-save */
.orders-sheet .row-direct-editable .inline-input,
.orders-sheet .row-direct-editable .inline-select{min-height:34px;border-color:#d4deea;background:#fff;box-shadow:0 1px 2px rgba(28,48,78,.035)}
.orders-sheet .row-direct-editable .inline-input:hover,
.orders-sheet .row-direct-editable .inline-select:hover{border-color:#9fb5d2;background:#fff}
.orders-sheet .row-direct-editable .inline-input:focus,
.orders-sheet .row-direct-editable .inline-select:focus{border-color:#4167dd;box-shadow:0 0 0 3px rgba(65,103,221,.12)}
.orders-sheet .row-direct-editable .inline-textarea{height:62px;resize:vertical}
.orders-sheet .row-direct-editable .actions{gap:4px}
.auto-save-status{display:inline-flex;min-width:48px;height:23px;align-items:center;justify-content:center;border:1px solid #cfe0da;border-radius:5px;background:#f1f8f5;color:#397564;font-size:9.5px;font-weight:700;white-space:nowrap}
.auto-save-status.dirty{border-color:#ebd6a4;background:#fff8e9;color:#946715}
.auto-save-status.saving{border-color:#bfd1f2;background:#eff5ff;color:#4166aa}
.auto-save-status.failed{border-color:#edc3ca;background:#fff1f3;color:#b23f50}
.row-direct-editable .row-image-paste-zone,.row-direct-editable .refund-paste-zone{cursor:copy}
.after-sales-row.row-direct-editable>td{background:#fff!important}
.after-sales-row.row-direct-editable .after-sales-details{border-left-color:#7f9fe9}
.editing-paused{display:inline-flex;min-height:28px;align-items:center;justify-content:center;color:#7c899b;font-size:9.5px;line-height:1.35;text-align:center}
/* Fixed-height order rows and self-wrapping shipping address */
.orders-sheet tbody tr:not(.after-sales-row){
  height:104px!important
}
.orders-sheet tbody tr:not(.after-sales-row)>td{
  height:104px!important;
  min-height:104px!important;
  max-height:104px!important
}
.orders-sheet tbody tr:not(.after-sales-row) .address-cell .inline-textarea{
  display:block;
  width:100%;
  height:72px!important;
  min-height:72px!important;
  max-height:72px!important;
  padding:8px 10px;
  resize:none!important;
  overflow-x:hidden;
  overflow-y:auto;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  word-break:break-word;
  line-height:1.45;
  scrollbar-width:thin
}
.orders-sheet tbody tr:not(.after-sales-row) .address-cell .row-display{
  display:block;
  max-height:76px;
  overflow-x:hidden;
  overflow-y:auto;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  word-break:break-word;
  line-height:1.45;
  scrollbar-width:thin
}
.orders-sheet tbody tr:not(.after-sales-row) .address-cell .inline-textarea::-webkit-scrollbar,
.orders-sheet tbody tr:not(.after-sales-row) .address-cell .row-display::-webkit-scrollbar{
  width:5px
}
.orders-sheet tbody tr:not(.after-sales-row) .address-cell .inline-textarea::-webkit-scrollbar-thumb,
.orders-sheet tbody tr:not(.after-sales-row) .address-cell .row-display::-webkit-scrollbar-thumb{
  border-radius:999px;
  background:#b9c6d8
}

/* Permission-safe after-sales row: equal field bottoms and fixed height */
.after-sales-row .after-sales-grid{
  align-items:start
}
.after-sales-row .after-sales-fields .inline-select,
.after-sales-row .after-sales-fields .inline-input,
.after-sales-row .after-sales-fields .inline-textarea,
.after-sales-row .after-sales-fields .row-display{
  box-sizing:border-box;
  width:100%;
  height:72px!important;
  min-height:72px!important;
  max-height:72px!important;
  margin:0;
  padding:10px!important
}
.after-sales-row .after-sales-fields .inline-textarea{
  resize:none!important;
  overflow:auto;
  line-height:1.45;
  white-space:pre-wrap
}
.after-sales-row .after-sales-fields .row-display{
  display:flex;
  align-items:center;
  overflow:auto;
  border:1px solid #d8e1ec;
  border-radius:6px;
  background:#f7f9fc;
  color:#536176;
  line-height:1.45;
  white-space:pre-wrap;
  overflow-wrap:anywhere
}
.after-sales-row .refund-paste-zone,
.after-sales-row .refund-paste-zone img{
  height:72px!important;
  min-height:72px!important;
  max-height:72px!important;
  aspect-ratio:4/3
}
/* Admin Users & System Settings */
.admin-module-toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;padding:2px 2px 0}
.admin-module-toolbar h1{display:flex;align-items:center;gap:9px;margin:0;color:#152238;font-size:20px}.admin-module-toolbar h1 .ui-icon{width:20px;height:20px;color:#4167dd}.admin-module-toolbar p{margin:4px 0 0;color:#728095;font-size:12px}
.admin-metrics{display:grid;grid-template-columns:repeat(4,minmax(160px,1fr));overflow:hidden;margin-bottom:14px;border:1px solid #d8e1ec;border-radius:11px;background:#fff;box-shadow:0 5px 18px rgba(27,48,78,.06)}
.admin-metrics>div{display:grid;grid-template-columns:34px 1fr auto;grid-template-rows:auto auto;align-items:center;min-height:72px;padding:12px 16px;border-right:1px solid #e7ecf2}.admin-metrics>div:last-child{border-right:0}.admin-metrics>div>span{grid-row:1/3;display:grid;width:30px;height:30px;place-items:center;border-radius:8px;background:#eef3ff;color:#4167dd}.admin-metrics .ui-icon{width:15px;height:15px}.admin-metrics small{color:#758399;font-size:10.5px}.admin-metrics b{font-size:18px;font-variant-numeric:tabular-nums}
.admin-table-wrap{overflow:auto;border:1px solid #d7e0eb;border-radius:11px;background:#fff;box-shadow:0 8px 26px rgba(28,48,78,.07)}.admin-table{width:100%;min-width:1100px;border-collapse:collapse;font-size:12px}.admin-table th{height:42px;padding:0 14px;background:#eaf0f7;color:#43546b;text-align:left}.admin-table td{height:70px;padding:10px 14px;border-top:1px solid #e6ebf2;color:#314056}.admin-table tbody tr:hover td{background:#f6f9ff}
.user-account{display:flex;align-items:center;gap:10px}.user-account .avatar{display:grid;width:34px;height:34px;place-items:center;border-radius:9px;background:#edf2ff;color:#3d5bd9;font-weight:800}.user-account span:last-child{display:grid;gap:2px}.user-account small{color:#8a96a8;font-size:10px}.account-status{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:6px;font-weight:700}.account-status::before{content:'';width:6px;height:6px;border-radius:50%}.account-status.enabled{background:#eaf8f3;color:#08745a}.account-status.enabled::before{background:#14a47d}.account-status.disabled{background:#f2f4f7;color:#6c7787}.account-status.disabled::before{background:#98a2b1}
.tag-list{display:flex;flex-wrap:wrap;gap:5px}.tag-list span{padding:4px 7px;border:1px solid #d6e0ed;border-radius:5px;background:#f5f8fc;color:#52647c;font-size:10px}.permission-tags span{border-color:#cbd8f4;background:#eff3ff;color:#405bb2}
.admin-row-actions{display:flex;flex-wrap:wrap;gap:6px}.admin-row-actions button{height:30px!important;padding:0 9px!important}.admin-row-actions .danger{border-color:#edc1c7!important;background:#fff6f7!important;color:#bd3f4f!important}
.user-dialog{width:min(620px,calc(100vw - 32px));padding:0}.user-dialog form>header,.user-dialog form>footer{display:flex;align-items:center;justify-content:space-between;padding:17px 20px;border-bottom:1px solid #e4eaf1;background:#fff}.user-dialog form>footer{justify-content:flex-end;gap:8px;border-top:1px solid #e4eaf1;border-bottom:0;background:#f8fafc}.user-dialog h2{margin:0;font-size:18px}.user-dialog header p{margin:3px 0 0;color:#7b889b;font-size:11px}.user-dialog header button{width:32px!important;height:32px!important;padding:0!important}.user-form-body{display:grid;gap:14px;padding:18px 20px}.user-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.user-form-body label{display:grid;gap:6px;color:#4e5f76;font-size:11px;font-weight:650}.user-form-body input[type=text],.user-form-body input[type=password]{height:38px}.switch-row{display:flex!important;align-items:center;justify-content:space-between;padding:12px 14px;border:1px solid #dae3ed;border-radius:8px;background:#f8fafc}.switch-row span{display:grid;gap:3px}.switch-row small,fieldset>small{color:#8995a5;font-size:10px;font-weight:400}.switch-row input{width:18px;height:18px}.user-form-body fieldset{margin:0;padding:13px 14px 14px;border:1px solid #dae3ed;border-radius:9px}.user-form-body legend{padding:0 6px;color:#34465e;font-size:11px;font-weight:750}.permission-options{display:flex;flex-wrap:wrap;gap:8px}.permission-options label{display:flex!important;align-items:center;gap:7px;padding:8px 11px;border:1px solid #d8e1ec;border-radius:7px;background:#fff}.permission-options input{width:15px;height:15px}.permission-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.settings-layout{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.settings-card{padding:18px;border:1px solid #d7e1ec;border-radius:11px;background:#fff;box-shadow:0 6px 20px rgba(27,48,78,.055)}.settings-card header{display:flex;align-items:center;gap:11px;margin-bottom:15px;padding-bottom:13px;border-bottom:1px solid #ebeff4}.settings-icon{display:grid;width:34px;height:34px;place-items:center;border-radius:9px;background:#eef3ff;color:#4167dd}.settings-icon .ui-icon{width:17px;height:17px}.settings-card h2{margin:0;color:#25354c;font-size:14px}.settings-card header p{margin:3px 0 0;color:#8592a4;font-size:10.5px}.settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.settings-card label{display:grid;gap:6px;color:#53647b;font-size:11px;font-weight:650}.settings-card textarea{min-height:148px;resize:vertical;line-height:1.65}.settings-card select,.settings-card input{height:38px}.settings-card.compact{align-self:start}.settings-card.compact label{max-width:220px}.settings-actions{grid-column:1/-1;display:flex;justify-content:flex-end;gap:9px;padding:14px 16px;border:1px solid #d7e1ec;border-radius:11px;background:#fff;box-shadow:0 6px 20px rgba(27,48,78,.055)}
@media(max-width:1000px){.admin-metrics{grid-template-columns:repeat(2,1fr)}.settings-layout{grid-template-columns:1fr}.permission-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:600px){.admin-module-toolbar{align-items:flex-start}.admin-metrics{grid-template-columns:1fr 1fr}.user-form-grid,.settings-grid{grid-template-columns:1fr}.permission-grid{grid-template-columns:1fr 1fr}}
/* Quick-filter product counters */
.quick-filters .quick-count{
  display:inline-grid;
  place-items:center;
  min-width:18px;
  height:18px;
  padding:0 5px;
  margin-left:2px;
  border:1px solid #cbd8ee;
  border-radius:999px;
  background:#fff;
  color:#375171;
  font-size:11px;
  font-weight:700;
  line-height:1;
  font-variant-numeric:tabular-nums;
  box-shadow:0 1px 2px rgba(31,65,114,.08);
}
.quick-filters button:hover .quick-count,
.quick-filters button.active .quick-count{
  border-color:#9fb9f5;
  background:#eef4ff;
  color:#315be8;
}
.quick-filters button[data-special] .quick-count{
  border-color:#efcbd2;
  background:#fff7f8;
  color:#bc3f52;
}
/* Compact single-line reported timestamp */
.orders-sheet .select-small .reported-control small{
  display:block;
  width:max-content;
  max-width:none;
  margin-inline:auto;
  white-space:nowrap;
  line-height:1.2;
}
/* Focused shop and personalization settings */
.settings-layout.settings-focused{grid-template-columns:minmax(0,1.2fr) minmax(390px,.8fr);align-items:start}
.settings-focused .settings-shops-card{grid-row:span 2}
.settings-focused .settings-card header{position:relative}
.settings-focused .settings-card header>button{margin-left:auto}
.settings-shop-list{display:grid;gap:10px}
.settings-shop-row{display:grid;grid-template-columns:76px minmax(180px,1fr) auto;align-items:center;gap:12px;padding:10px;border:1px solid #e0e7f0;border-radius:10px;background:#f9fbfd}
.settings-shop-logo{position:relative;display:grid;width:72px;height:58px;place-items:center;overflow:hidden;border:1px dashed #9fb4d4;border-radius:9px;background:#fff;color:#627694;cursor:text;outline:0}
.settings-shop-logo:focus{border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 15%,transparent)}
.settings-shop-logo img{width:100%;height:100%;object-fit:cover}
.settings-shop-logo>span{position:absolute;right:2px;bottom:2px;left:2px;padding:3px;border-radius:4px;background:rgba(12,25,45,.72);color:#fff;font-size:8px;text-align:center;opacity:0;transition:.15s}
.settings-shop-logo:hover>span,.settings-shop-logo:focus>span{opacity:1}
.settings-shop-row>label{display:grid;gap:6px}
.settings-shop-delete{color:#ba3b4d!important}
.settings-default-shop{max-width:360px;margin-top:14px}
.settings-assignment-list{display:grid;gap:9px}
.settings-user-assignment{display:grid;grid-template-columns:34px 110px minmax(0,1fr);align-items:center;gap:10px;padding:11px;border:1px solid #e0e7f0;border-radius:10px;background:#fafbfd}
.settings-user-assignment>.avatar{display:grid;width:32px;height:32px;place-items:center;border-radius:8px;background:#edf2ff;color:var(--brand);font-weight:750}
.settings-user-assignment>div:nth-child(2){display:grid;gap:2px}.settings-user-assignment small{color:#8592a4;font-size:10px}
.settings-shop-checks{display:flex;flex-wrap:wrap;gap:7px}
.settings-shop-checks label{display:block}
.settings-shop-checks input{position:absolute;opacity:0;pointer-events:none}
.settings-shop-checks span{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 10px;border:1px solid #d5deea;border-radius:8px;background:#fff;color:#5b6b81;font-size:11px;cursor:pointer}
.settings-shop-checks input:checked+span{border-color:color-mix(in srgb,var(--brand) 45%,#d5deea);background:color-mix(in srgb,var(--brand) 8%,#fff);color:var(--brand);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--brand) 10%,transparent)}
.settings-shop-checks img{width:22px;height:22px;border-radius:5px;object-fit:cover}
.settings-personal-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.settings-color-field{display:flex;align-items:center;height:38px;padding:4px 8px;border:1px solid #d4deea;border-radius:7px;background:#fff}
.settings-color-field input{width:42px;height:28px;padding:0;border:0}.settings-color-field output{margin-left:10px;color:#52637a;font-family:monospace}
.settings-empty{padding:28px;border:1px dashed #cbd6e4;border-radius:10px;color:#7b899d;text-align:center}
@media(max-width:1050px){.settings-layout.settings-focused{grid-template-columns:1fr}.settings-focused .settings-shops-card{grid-row:auto}}
@media(max-width:650px){.settings-shop-row{grid-template-columns:68px 1fr}.settings-shop-delete{grid-column:2}.settings-user-assignment{grid-template-columns:34px 1fr}.settings-shop-checks{grid-column:1/-1}.settings-personal-grid{grid-template-columns:1fr}}
/* Procurement-cost metric */
.metrics .metric:nth-child(6) .metric-icon{
  background:#fff3e2;
  color:#a66608;
  box-shadow:inset 0 0 0 1px rgba(166,102,8,.13);
}
/* Daily personalized greeting */
.page-heading .daily-greeting{
  display:flex;
  align-items:center;
  gap:10px;
  max-width:440px;
  margin-left:auto;
  padding:9px 13px;
  border:1px solid color-mix(in srgb,var(--brand) 18%,#d9e2ef);
  border-radius:10px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--brand) 5%,#fff),#fff);
  box-shadow:0 4px 16px rgba(31,55,92,.055);
}
.daily-greeting>span{display:grid;width:30px;height:30px;flex:0 0 30px;place-items:center;border-radius:8px;background:color-mix(in srgb,var(--brand) 10%,#fff);color:var(--brand)}
.daily-greeting .ui-icon{width:15px;height:15px}.daily-greeting div{display:grid;gap:2px}.daily-greeting b{color:#22334b;font-size:13px}.daily-greeting small{overflow:hidden;color:#718097;font-size:10.5px;text-overflow:ellipsis;white-space:nowrap}
.settings-greetings-field{grid-column:1/-1}.settings-greetings-field textarea{min-height:112px;resize:vertical}.settings-greetings-field small{color:#8391a4;font-size:10px;font-weight:400}
@media(max-width:900px){.page-heading .daily-greeting{max-width:360px}}
@media(max-width:650px){.page-heading .daily-greeting{width:100%;max-width:none;margin:10px 0 0}.page-heading{flex-wrap:wrap}}
/* Topbar personal greeting and profile dialog */
.topbar .daily-greeting{
  display:flex;align-items:center;gap:8px;width:clamp(190px,17vw,300px);min-width:190px;height:40px;
  margin:0 8px;padding:5px 10px;border:1px solid color-mix(in srgb,var(--brand) 18%,#d9e2ef);
  border-radius:9px;background:linear-gradient(135deg,color-mix(in srgb,var(--brand) 5%,#fff),#fff);
  box-shadow:0 3px 12px rgba(31,55,92,.05)
}
.topbar .daily-greeting>span{display:grid;width:27px;height:27px;flex:0 0 27px;place-items:center;border-radius:7px;background:color-mix(in srgb,var(--brand) 10%,#fff);color:var(--brand)}
.topbar .daily-greeting .ui-icon{width:14px;height:14px}
.topbar .daily-greeting div{display:grid;min-width:0;gap:1px}
.topbar .daily-greeting b,.topbar .daily-greeting small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topbar .daily-greeting b{color:#22334b;font-size:11.5px}
.topbar .daily-greeting small{color:#718097;font-size:9.5px}
.profile-dialog{width:min(470px,calc(100vw - 32px));padding:0;border:0;border-radius:13px;background:#fff;box-shadow:0 22px 65px rgba(20,36,61,.22)}
.profile-dialog::backdrop{background:rgba(22,34,52,.42);backdrop-filter:blur(3px)}
.profile-dialog form>header,.profile-dialog form>footer{display:flex;align-items:center;gap:9px;padding:16px 18px;background:#fff}
.profile-dialog form>header{justify-content:space-between;border-bottom:1px solid #e6ebf2}
.profile-dialog form>footer{border-top:1px solid #e6ebf2;background:#f8fafc}
.profile-dialog form>footer>span{flex:1}
.profile-dialog h2{margin:0;color:#1d2c42;font-size:17px}
.profile-dialog header p{margin:3px 0 0;color:#7a8799;font-size:10.5px}
.profile-dialog header button{display:grid;width:32px!important;height:32px!important;padding:0!important;place-items:center;box-shadow:none!important}
.profile-form-body{display:grid;gap:9px;padding:20px 18px}
.profile-form-body label{display:grid;gap:7px;color:#4d5e75;font-size:11px;font-weight:700}
.profile-form-body input{height:40px;background:#fff}
.profile-form-body p{margin:0;color:#7d8b9e;font-size:10.5px}
.profile-dialog footer button{height:36px!important}
.profile-logout{border-color:#edc5cb!important;background:#fff!important;color:#bb4050!important;box-shadow:none!important}
@media(max-width:1500px){.topbar .daily-greeting{width:auto;min-width:145px}.topbar .daily-greeting small{display:none}}
@media(max-width:1150px){.topbar .daily-greeting{display:none}}
/* Spacious greeting and live date-time band below navigation */
.greeting-band{display:flex;align-items:center;min-height:96px;padding:11px 20px 9px;background:transparent}
.greeting-band .daily-greeting{
  position:relative;display:flex;align-items:center;justify-content:space-between;gap:24px;
  width:100%;min-width:0;min-height:74px;margin:0;padding:12px 18px;
  overflow:hidden;border:1px solid color-mix(in srgb,var(--brand) 18%,#d5dfeb);border-radius:12px;
  background:linear-gradient(105deg,rgba(255,255,255,.98),rgba(248,251,255,.96));
  box-shadow:0 7px 22px rgba(30,52,84,.07)
}
.greeting-band .daily-greeting::after{content:"";position:absolute;right:-30px;bottom:-55px;width:180px;height:110px;border-radius:50%;background:color-mix(in srgb,var(--brand) 5%,transparent);pointer-events:none}
.greeting-band .greeting-main{display:flex!important;flex-direction:row!important;align-items:center!important;min-width:0;gap:15px}
.greeting-band .greeting-copy{display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:center!important;min-width:0;gap:3px}
.greeting-smile{
  position:relative;display:block;width:48px;height:48px;flex:0 0 48px;
  border:1px solid #efbf3d;border-radius:50%;
  background:linear-gradient(145deg,#fff8a7 0%,#ffd84e 48%,#ffb829 100%);
  color:#8c5900;
  box-shadow:0 7px 16px rgba(226,158,18,.22),inset 0 2px 2px rgba(255,255,255,.75),inset 0 -2px 4px rgba(194,111,0,.16);
  transform-origin:50% 75%
}
.greeting-smile::before{content:"";position:absolute;left:13px;top:15px;width:4px;height:5px;border-radius:50%;background:#704600;box-shadow:17px 0 0 #704600;transform-origin:center;animation:greetingSmileBlink 4.6s ease-in-out infinite}
.greeting-smile::after{content:"";position:absolute;left:13px;top:25px;width:18px;height:9px;border:2px solid #704600;border-top:0;border-radius:0 0 15px 15px}
.greeting-smile.motion-0{animation:greetingFloat 3.6s cubic-bezier(.22,1,.36,1) infinite}
.greeting-smile.motion-1{animation:greetingWave 3.8s ease-in-out infinite}
.greeting-smile.motion-2{animation:greetingBounce 3.4s cubic-bezier(.22,1,.36,1) infinite}
.greeting-smile.motion-3{animation:greetingSway 4s ease-in-out infinite}
@keyframes greetingFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes greetingWave{0%,70%,100%{transform:rotate(0)}78%{transform:rotate(-7deg)}86%{transform:rotate(7deg)}94%{transform:rotate(-3deg)}}
@keyframes greetingBounce{0%,72%,100%{transform:translateY(0) scale(1)}80%{transform:translateY(-5px) scale(1.03,.97)}88%{transform:translateY(0) scale(.98,1.02)}}
@keyframes greetingSway{0%,100%{transform:translateX(0) rotate(0)}40%{transform:translateX(-3px) rotate(-3deg)}70%{transform:translateX(3px) rotate(3deg)}}
@keyframes greetingSmileBlink{0%,44%,48%,100%{transform:scaleY(1)}46%{transform:scaleY(.15)}}
.greeting-copy b{overflow:hidden;color:#14263f;font-size:18px;font-weight:750;line-height:1.3;letter-spacing:.1px;text-overflow:ellipsis;white-space:nowrap}
.greeting-copy small{overflow:hidden;color:#61738b;font-size:13px;line-height:1.45;text-overflow:ellipsis;white-space:nowrap}
.greeting-datetime{position:relative;z-index:1;display:grid;min-width:205px;gap:2px;padding-left:18px;border-left:1px solid #e2e8f0;text-align:right;font-style:normal}
.greeting-datetime strong{color:#1d3150;font-size:23px;line-height:1.1;font-variant-numeric:tabular-nums;letter-spacing:.6px}
.greeting-datetime span{color:#74849a;font-size:11px;white-space:nowrap}
@media(max-width:900px){.greeting-band{min-height:88px;padding-inline:16px}.greeting-band .daily-greeting{min-height:68px}.greeting-datetime{min-width:180px}.greeting-datetime strong{font-size:20px}}
@media(max-width:650px){
  .greeting-band{padding:8px 10px}.greeting-band .daily-greeting{align-items:center;gap:9px;padding:11px 13px}
  .greeting-band .greeting-main{gap:10px}.greeting-smile{width:42px;height:42px;flex-basis:42px}
  .greeting-smile::before{left:11px;top:13px;box-shadow:15px 0 0 #704600}.greeting-smile::after{left:11px;top:22px;width:17px}
  .greeting-copy b{font-size:16px}.greeting-copy small{max-width:180px;font-size:11.5px}
  .greeting-datetime{min-width:auto;padding-left:10px}.greeting-datetime strong{font-size:17px}.greeting-datetime span{font-size:9.5px}
}
@media(prefers-reduced-motion:reduce){.greeting-smile,.greeting-smile::before{animation:none!important}}/* System settings balanced workspace layout */
#settingsPage{width:min(100%,1560px);margin-inline:auto}
#settingsPage .admin-module-toolbar{min-height:62px;margin-bottom:12px;padding:0 3px}
#settingsPage .settings-header-actions{display:flex;align-items:center;gap:8px;margin-left:auto}
#settingsPage .settings-header-actions button{height:36px;min-width:104px;padding-inline:13px}
#settingsPage .settings-layout.settings-focused{
  display:grid;grid-template-columns:minmax(0,1.08fr) minmax(430px,.92fr);
  grid-template-areas:"shops shops" "assignment personal";
  align-items:stretch;gap:12px
}
#settingsPage .settings-shops-card{grid-area:shops;grid-row:auto}
#settingsPage .settings-assignment-card{grid-area:assignment;height:100%}
#settingsPage .settings-personal-card{grid-area:personal;height:100%}
#settingsPage .settings-card{padding:16px;border:1px solid #d6e0eb;border-radius:12px;background:#fff;box-shadow:0 5px 18px rgba(27,48,78,.055)}
#settingsPage .settings-card header{min-height:42px;margin-bottom:13px;padding-bottom:12px}
#settingsPage .settings-card header>div:not(.settings-icon){min-width:0}
#settingsPage .settings-card header p{overflow:hidden;max-width:720px;text-overflow:ellipsis;white-space:nowrap}
#settingsPage .settings-card header>button{margin-left:auto}
#settingsPage .settings-shop-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch;gap:10px}
#settingsPage .settings-shop-row{
  position:relative;display:grid;grid-template-columns:62px minmax(0,1fr);
  grid-template-areas:"logo name" "logo remove";align-items:center;gap:7px 11px;
  min-height:84px;padding:10px;border:1px solid #dde5ef;border-radius:10px;background:#f8fafc;
  transition:border-color .16s ease,box-shadow .16s ease,background .16s ease
}
#settingsPage .settings-shop-logo{grid-area:logo;width:62px;height:62px;border-radius:9px}
#settingsPage .settings-shop-row>label{grid-area:name;min-width:0;gap:4px}
#settingsPage .settings-shop-row>label input{width:100%;min-width:0;height:34px;padding-inline:10px;background:#fff}
#settingsPage .settings-shop-delete{
  grid-area:remove;justify-self:start;width:auto!important;min-width:0!important;height:27px!important;
  padding:0 8px!important;border-color:transparent!important;background:transparent!important;
  box-shadow:none!important;font-size:10.5px
}
#settingsPage .settings-default-shop{display:flex;align-items:center;gap:10px;max-width:none;margin-top:13px;padding-top:13px;border-top:1px solid #e8edf3}
#settingsPage .settings-default-shop select{width:240px}
#settingsPage .settings-assignment-list{display:grid;align-content:start;gap:9px}
#settingsPage .settings-user-assignment{grid-template-columns:34px 120px minmax(0,1fr);min-height:60px;padding:10px}
#settingsPage .settings-personal-grid{display:grid;grid-template-columns:minmax(160px,1fr) minmax(160px,1fr);align-items:start;gap:12px}
#settingsPage .settings-greetings-field{grid-column:1/-1}
#settingsPage .settings-greetings-field textarea{min-height:112px;max-height:150px;resize:none}
@media(hover:hover) and (pointer:fine){
  #settingsPage .settings-shop-row:hover{border-color:color-mix(in srgb,var(--brand) 42%,#d6e0eb);background:#fff;box-shadow:inset 0 2px color-mix(in srgb,var(--brand) 72%,#fff),0 6px 16px rgba(45,78,128,.08)}
}
@media(max-width:1180px){
  #settingsPage .settings-layout.settings-focused{grid-template-columns:1fr;grid-template-areas:"shops" "assignment" "personal"}
  #settingsPage .settings-shop-list{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
}
@media(max-width:760px){
  #settingsPage .admin-module-toolbar{align-items:flex-start;gap:10px}
  #settingsPage .settings-header-actions{width:100%;margin-left:0}
  #settingsPage .settings-header-actions button{flex:1;min-width:0}
  #settingsPage .settings-shop-list{grid-template-columns:1fr}
  #settingsPage .settings-shop-row{grid-template-columns:58px minmax(0,1fr)}
  #settingsPage .settings-shop-logo{width:58px;height:58px}
  #settingsPage .settings-default-shop{display:grid;grid-template-columns:1fr}
  #settingsPage .settings-default-shop select{width:100%}
  #settingsPage .settings-user-assignment{grid-template-columns:34px 1fr}
  #settingsPage .settings-shop-checks{grid-column:1/-1}
  #settingsPage .settings-personal-grid{grid-template-columns:1fr}
}
/* Account-anchored personal settings panel */
.profile-dialog[open]{
  position:fixed;
  inset:62px 14px auto auto;
  z-index:120;
  width:min(390px,calc(100vw - 28px));
  max-width:390px;
  max-height:calc(100vh - 76px);
  margin:0;
  overflow:auto;
  border:1px solid #d4deea;
  border-radius:12px;
  background:#fff;
  box-shadow:0 18px 48px rgba(20,36,61,.18),0 3px 10px rgba(20,36,61,.08);
}
.profile-dialog::backdrop{display:none!important;background:transparent!important;backdrop-filter:none!important}
.profile-dialog[open]::before{
  content:"";position:fixed;top:55px;right:38px;width:12px;height:12px;
  border-top:1px solid #d4deea;border-left:1px solid #d4deea;background:#fff;
  transform:rotate(45deg);pointer-events:none
}
@media(max-width:900px){
  .profile-dialog[open]{inset:10px 10px auto auto;width:calc(100vw - 20px);max-width:390px}
  .profile-dialog[open]::before{display:none}
}
/* Member-owned settings page */
.member-settings-panel{display:grid;grid-template-columns:minmax(260px,.7fr) minmax(440px,1.3fr);align-items:start;gap:14px}
.member-settings-hero,.member-settings-card{border:1px solid #d6e0eb;border-radius:12px;background:#fff;box-shadow:0 6px 20px rgba(27,48,78,.06)}
.member-settings-hero{display:flex;align-items:center;gap:15px;min-height:130px;padding:22px}
.member-settings-avatar{display:grid;width:54px;height:54px;flex:0 0 54px;place-items:center;border-radius:15px;background:color-mix(in srgb,var(--brand) 10%,#fff);color:var(--brand);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--brand) 13%,transparent)}
.member-settings-avatar .ui-icon{width:23px;height:23px}.member-settings-hero div{display:grid;gap:3px}.member-settings-hero small{color:#7a899d;font-size:11px}.member-settings-hero b{color:#192b44;font-size:19px}.member-settings-hero p{margin:3px 0 0;color:#718096;font-size:11px;line-height:1.6}
.member-settings-card{padding:18px}.member-settings-card>header{display:flex;align-items:center;gap:11px;margin-bottom:17px;padding-bottom:14px;border-bottom:1px solid #e8edf3}.member-settings-card h2{margin:0;color:#22344d;font-size:15px}.member-settings-card header p{margin:3px 0 0;color:#7a899d;font-size:10.5px}.member-settings-card>label{display:grid;gap:7px;color:#4d6078;font-size:11px;font-weight:650}.member-settings-card>label input{height:40px}.member-settings-card>label small{color:#8491a3;font-size:10px;font-weight:400}
.member-settings-shops{display:grid;gap:9px;margin-top:18px;padding-top:16px;border-top:1px solid #e8edf3}.member-settings-shops>span{color:#4d6078;font-size:11px;font-weight:650}.member-settings-shops>div{display:flex;flex-wrap:wrap;gap:8px}.member-settings-shops>div>span{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 11px;border:1px solid #d9e2ed;border-radius:9px;background:#f8fafc;color:#354860;font-size:11px;font-weight:650}.member-settings-shops img{width:24px;height:24px;border-radius:6px;object-fit:cover}.member-settings-shops em{color:#8491a3;font-size:11px;font-style:normal}
.member-settings-card>footer{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:20px;padding-top:15px;border-top:1px solid #e8edf3}.member-settings-card>footer button{height:37px}.member-settings-card .form-error{margin-top:8px}
@media(max-width:900px){.member-settings-panel{grid-template-columns:1fr}.member-settings-hero{min-height:108px}}
@media(max-width:560px){.member-settings-hero,.member-settings-card{padding:15px}.member-settings-card>footer{align-items:stretch;flex-direction:column-reverse}.member-settings-card>footer button{width:100%}}
/* Member shipping address expands to reveal the complete value */
.orders-sheet tbody tr.member-order-row{height:auto!important}
.orders-sheet tbody tr.member-order-row>td{
  height:auto!important;
  min-height:104px!important;
  max-height:none!important
}
.orders-sheet tbody tr.member-order-row .address-cell .inline-textarea{
  height:auto!important;
  min-height:72px!important;
  max-height:none!important;
  overflow:hidden!important;
  resize:none!important;
  scrollbar-width:none
}
.orders-sheet tbody tr.member-order-row .address-cell .inline-textarea::-webkit-scrollbar{display:none}

/* Compact split greeting cards */
.greeting-band{min-height:94px;padding:10px 20px;background:transparent}
.greeting-band .daily-greeting{
  display:grid;grid-template-columns:minmax(380px,540px) 210px;align-items:stretch;justify-content:start;gap:12px;
  width:min(100%,762px);min-height:72px;margin:0;padding:0;overflow:visible;
  border:0;border-radius:0;background:transparent;box-shadow:none
}
.greeting-band .daily-greeting::after{display:none}
.greeting-band .greeting-main{
  position:relative;height:72px;box-sizing:border-box;padding:11px 18px;
  overflow:hidden;border:1px solid color-mix(in srgb,var(--brand) 18%,#d5dfeb);border-radius:12px;
  background:linear-gradient(110deg,#fff 0%,#fff 72%,color-mix(in srgb,var(--brand) 4%,#fff) 100%);
  box-shadow:0 7px 22px rgba(30,52,84,.07)
}
.greeting-band .greeting-main::after{
  content:"";position:absolute;right:-24px;bottom:-38px;width:130px;height:80px;border-radius:50%;
  background:color-mix(in srgb,var(--brand) 5%,transparent);pointer-events:none
}
.greeting-band .greeting-copy,.greeting-band .greeting-smile{position:relative;z-index:1}
.greeting-band .greeting-datetime{
  box-sizing:border-box;height:72px;min-width:0;padding:11px 16px;align-content:center;gap:3px;
  border:1px solid color-mix(in srgb,var(--brand) 17%,#d6e0ec);border-radius:12px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--brand) 5%,#fff),color-mix(in srgb,var(--brand) 10%,#f8fbff));
  box-shadow:0 7px 22px rgba(30,52,84,.07);text-align:left
}
.greeting-band .greeting-datetime strong{font-size:22px}
.greeting-band .greeting-datetime span{font-size:10.5px}
@media(max-width:900px){
  .greeting-band .daily-greeting{grid-template-columns:minmax(300px,1fr) 180px;width:100%}
  .greeting-band .greeting-datetime{min-width:0}
}
@media(max-width:650px){
  .greeting-band .daily-greeting{grid-template-columns:minmax(0,1fr) 142px;gap:8px}
  .greeting-band .greeting-main{height:68px;padding:10px 12px}
  .greeting-band .greeting-datetime{height:68px;padding:9px 10px}
  .greeting-band .greeting-datetime strong{font-size:17px}
}
@media(max-width:470px){
  .greeting-band .daily-greeting{grid-template-columns:1fr}
  .greeting-band .greeting-datetime{display:none}
}
/* Sticky greeting rail below navigation */
.greeting-band{
  position:sticky;top:54px;z-index:24;
  background:linear-gradient(180deg,rgba(240,245,251,.96),rgba(234,240,247,.91));
  border-bottom:1px solid rgba(188,202,220,.62);
  box-shadow:0 7px 18px -16px rgba(24,43,72,.55);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)
}
@media(max-width:900px){.greeting-band{top:54px}}
@media(prefers-reduced-motion:reduce){.greeting-band{backdrop-filter:none;-webkit-backdrop-filter:none}}
/* Subtle canvas texture */
html{background:#e7edf4}
body{
  background-color:#e9eff6;
  background-image:
    radial-gradient(1100px 470px at -4% -5%,rgba(74,99,238,.105),transparent 70%),
    radial-gradient(900px 390px at 104% 0,rgba(56,189,248,.08),transparent 69%),
    radial-gradient(circle at 1px 1px,rgba(56,75,103,.032) .65px,transparent .8px),
    linear-gradient(180deg,#f0f4f9 0,#eaf0f6 46%,#e6ecf3 100%);
  background-size:auto,auto,18px 18px,auto;
  background-position:center,center,0 0,center
}
.login-view{background-image:linear-gradient(112deg,#f2f5fb 0%,#edf3f9 52%,#e8f2f8 100%)}
/* ========================================================================== */
/* Mobile workspace — final responsive contract for the complete system       */
/* ========================================================================== */
@media (max-width:900px){
  html,body{width:100%;max-width:100%;overflow-x:hidden}
  body{min-width:0;background-size:auto,auto,16px 16px,auto}
  .app,.page,main{min-width:0;max-width:100%}
  button,a,input,select,textarea{touch-action:manipulation;-webkit-tap-highlight-color:transparent}

  /* Keep all modules reachable in a horizontally swipeable top navigation. */
  .topbar{
    position:sticky!important;top:0!important;bottom:auto!important;z-index:60!important;
    display:grid!important;grid-template-columns:44px minmax(0,1fr) 42px!important;
    align-items:center!important;height:56px!important;min-height:56px!important;
    padding:0 max(8px,env(safe-area-inset-right)) 0 max(8px,env(safe-area-inset-left))!important;
    overflow:visible!important;background:rgba(255,255,255,.97)!important
  }
  .topbar .logo{display:flex!important;width:44px!important;min-width:44px!important;height:56px!important;padding:0!important;border:0!important;justify-content:flex-start!important}
  .topbar .logo img{width:32px!important;height:32px!important;margin:0!important}
  .topbar .logo>span{display:none!important}
  .topbar nav{
    display:flex!important;min-width:0!important;width:100%!important;height:56px!important;
    overflow-x:auto!important;overflow-y:hidden!important;overscroll-behavior-x:contain;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity
  }
  .topbar nav::-webkit-scrollbar{display:none}
  .topbar nav button,.topbar nav button:nth-child(n){
    display:inline-flex!important;flex:0 0 auto!important;width:auto!important;min-width:64px!important;
    height:56px!important;padding:0 9px!important;gap:5px!important;border-radius:0!important;
    scroll-snap-align:start;font-size:11px!important;white-space:nowrap!important
  }
  .topbar nav button i{display:grid!important;width:25px!important;height:25px!important;flex:0 0 25px!important}
  .topbar nav button span{display:inline!important;font-size:11px!important}
  .topbar .user-menu{
    display:flex!important;width:40px!important;min-width:40px!important;height:40px!important;
    padding:4px!important;justify-content:center!important;border-radius:9px!important
  }
  .topbar .user-menu>span:not(.avatar),.topbar .user-menu>em{display:none!important}
  .topbar .user-menu .avatar{width:30px!important;height:30px!important;margin:0!important}
  .account-menu-popover{position:fixed!important;top:58px!important;right:8px!important;left:auto!important;width:min(260px,calc(100vw - 16px))!important}

  /* Greeting and time remain readable and sticky below the navigation. */
  .greeting-band{top:56px!important;z-index:45!important;padding:7px 10px!important;min-height:76px!important}
  .greeting-band .daily-greeting{
    display:grid!important;grid-template-columns:minmax(0,1fr) 108px!important;gap:7px!important;
    width:100%!important;min-height:62px!important;margin:0!important
  }
  .greeting-main{min-width:0!important;padding:8px 10px!important;gap:9px!important}
  .greeting-face{width:38px!important;height:38px!important;font-size:26px!important;flex:0 0 38px!important}
  .greeting-copy{min-width:0!important}
  .greeting-copy b{font-size:14px!important;line-height:1.3!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  .greeting-copy small{display:block!important;max-width:100%!important;font-size:10px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  .greeting-datetime{display:grid!important;min-width:0!important;padding:7px 8px!important;align-content:center!important}
  .greeting-datetime strong{font-size:16px!important;line-height:1.2!important}
  .greeting-datetime span{font-size:8.5px!important;white-space:nowrap!important}

  main{margin:0!important;width:100%!important;padding:14px 10px calc(24px + env(safe-area-inset-bottom))!important}
  .page{width:100%!important;margin:0!important;padding:0!important}
  .page-heading,.stock-toolbar,.hot-toolbar,.report-toolbar,.logs-toolbar,.admin-module-toolbar{
    display:flex!important;align-items:flex-start!important;flex-wrap:wrap!important;gap:8px!important;
    min-height:0!important;margin:0 0 10px!important;padding:0 2px!important
  }
  .page-heading h1,.stock-toolbar h1,.hot-toolbar h1,.report-toolbar h1,.logs-toolbar h1,.admin-module-toolbar h1{font-size:18px!important;line-height:1.35!important}
  .page-heading p,.stock-toolbar p,.hot-toolbar p,.report-toolbar p,.logs-toolbar p,.admin-module-toolbar p{font-size:10.5px!important;line-height:1.45!important}
  .stock-toolbar>button,.admin-module-toolbar>.primary{margin-left:auto!important;min-height:40px!important}

  /* Summary metrics scroll horizontally instead of becoming many tall rows. */
  .metrics,.inventory-metrics,.report-metrics,.logs-metrics{
    display:flex!important;grid-template-columns:none!important;width:100%!important;max-width:100%!important;
    overflow-x:auto!important;overflow-y:hidden!important;gap:8px!important;padding:1px 1px 8px!important;
    scroll-snap-type:x mandatory;scrollbar-width:thin;-webkit-overflow-scrolling:touch
  }
  .metrics .metric,.inventory-metrics>div,.report-metric,.log-metric{
    flex:0 0 148px!important;min-width:148px!important;min-height:70px!important;
    padding:10px 11px!important;scroll-snap-align:start;border-radius:9px!important
  }
  .metrics .metric span,.inventory-metrics span,.report-metric span,.log-metric span{font-size:10.5px!important}
  .metrics .metric b,.inventory-metrics b,.report-metric b,.log-metric b{font-size:17px!important}
  .admin-metrics{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  .admin-metrics>div{min-width:0!important;padding:10px!important}

  /* Unified two-column phone filters with full-width action controls. */
  .filters,.inventory-filters,.hot-filters,.report-filters,.logs-filters{
    display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;width:100%!important;padding:10px!important;align-items:center!important
  }
  .filters>input:first-child,.inventory-filters>input:first-child,.hot-filters>input:first-child,.report-filters>input:first-child,.logs-filters>input:first-child{grid-column:1/-1!important}
  .filters input,.filters select,.inventory-filters input,.inventory-filters select,.hot-filters input,.hot-filters select,.report-filters input,.report-filters select,.logs-filters input,.logs-filters select{
    width:100%!important;min-width:0!important;height:42px!important;min-height:42px!important;font-size:12px!important
  }
  .filter-actions,.module-filter-actions{
    grid-column:1/-1!important;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:7px!important;width:100%!important;margin:0!important;justify-self:stretch!important
  }
  .module-filter-actions{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .filter-actions button,.module-filter-actions button{width:100%!important;min-width:0!important;height:42px!important;margin:0!important;padding:0 8px!important;font-size:12px!important}
  .quick-filters,.report-quick{
    display:flex!important;flex-wrap:nowrap!important;width:100%!important;max-width:100%!important;
    overflow-x:auto!important;overflow-y:hidden!important;gap:5px!important;padding:8px 10px!important;
    scrollbar-width:none;-webkit-overflow-scrolling:touch
  }
  .quick-filters::-webkit-scrollbar,.report-quick::-webkit-scrollbar{display:none}
  .quick-filters>*,.report-quick>*{flex:0 0 auto!important;white-space:nowrap!important}

  /* Preserve every column and use native touch scrolling for wide data sheets. */
  .sheet-wrap,.inventory-table-wrap,.hot-table-wrap,.report-table-wrap,.logs-table-wrap,.admin-table-wrap{
    width:100%!important;max-width:100%!important;height:auto!important;min-height:220px!important;
    max-height:58dvh!important;overflow:auto!important;overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;scrollbar-gutter:auto!important;border-radius:9px!important
  }
  .orders-sheet{width:max-content!important;min-width:1900px!important;table-layout:fixed!important}
  .inventory-table{width:max-content!important;min-width:1240px!important;table-layout:fixed!important}
  .hot-table{width:max-content!important;min-width:900px!important;table-layout:fixed!important}
  .report-table{width:max-content!important;min-width:1280px!important;table-layout:fixed!important}
  .logs-table{width:max-content!important;min-width:1120px!important;table-layout:fixed!important}
  .admin-table{width:max-content!important;min-width:1080px!important;table-layout:fixed!important}
  .orders-sheet th,.orders-sheet td,.inventory-table th,.inventory-table td,.hot-table th,.hot-table td,.report-table th,.report-table td,.logs-table th,.logs-table td,.admin-table th,.admin-table td{font-size:10.5px!important;line-height:1.4!important}
  .orders-sheet th,.inventory-table th,.hot-table th,.report-table th,.logs-table th,.admin-table th{height:38px!important;padding:6px!important;white-space:nowrap!important}
  .orders-sheet td{padding:6px!important}
  .orders-sheet .pin{position:sticky!important}
  .orders-sheet .pin-action{left:0!important;width:54px!important;min-width:54px!important;max-width:54px!important;z-index:12!important}
  .orders-sheet .pin-customer{left:54px!important;width:96px!important;min-width:96px!important;max-width:96px!important;z-index:11!important}
  .orders-sheet thead .pin{z-index:18!important}
  .orders-sheet .shop-logo{width:44px!important;height:44px!important}
  .orders-sheet .product-img{width:52px!important;height:52px!important}
  .orders-sheet .actions{gap:4px!important;padding:5px 3px!important}
  .orders-sheet .actions button{min-height:28px!important;padding:0 5px!important;font-size:10px!important}

  /* Fixed-height after-sales editor stays stable and can be swiped sideways. */
  .after-sales-details{max-width:100%!important;overflow-x:auto!important;overscroll-behavior-x:contain}
  .after-sales-grid{
    display:grid!important;grid-template-columns:150px 150px 160px 320px 260px 96px!important;
    min-width:1156px!important;gap:8px!important;padding:10px 12px!important
  }
  .after-sales-fields{display:contents!important}
  .after-sales-fields label{min-width:0!important}
  .after-sales-fields .inline-input,.after-sales-fields .inline-select,.after-sales-fields .inline-textarea{height:72px!important;min-height:72px!important;max-height:72px!important;resize:none!important}
  .refund-image-field{width:96px!important;min-width:96px!important;max-width:96px!important}

  /* Settings, users, shops and personalization collapse into one clean column. */
  .settings-layout,.settings-layout.settings-focused,.member-settings-panel,.user-page-grid{
    display:grid!important;grid-template-columns:minmax(0,1fr)!important;grid-template-areas:none!important;
    width:100%!important;gap:10px!important
  }
  .settings-layout>*{grid-area:auto!important;min-width:0!important;width:100%!important}
  .settings-card,.member-settings-card,.admin-card{padding:12px!important;border-radius:10px!important}
  .settings-card>header,.member-settings-card>header{display:flex!important;align-items:flex-start!important;flex-wrap:wrap!important;gap:8px!important}
  .settings-shops-grid,.shop-config-list{grid-template-columns:1fr!important;gap:8px!important}
  .shop-config-row{grid-template-columns:54px minmax(0,1fr)!important;gap:9px!important;padding:9px!important}
  .shop-config-row .shop-config-actions{grid-column:2!important;justify-content:flex-start!important;flex-wrap:wrap!important}
  .settings-header-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;width:100%!important;gap:8px!important;margin:0!important}
  .settings-header-actions button{width:100%!important;min-height:42px!important}
  .user-form-grid,.inventory-form-grid{grid-template-columns:1fr!important}
  .user-form-grid .wide,.inventory-form-grid .wide{grid-column:auto!important}

  .logs-pagination{display:flex!important;flex-wrap:wrap!important;gap:8px!important;padding:9px!important}
  #logsPages{display:flex!important;max-width:100%!important;overflow-x:auto!important;gap:4px!important;scrollbar-width:none}
  #logsPages::-webkit-scrollbar{display:none}

  /* Dialogs fit the dynamic phone viewport and keep actions visible. */
  #orderDialog,#inventoryDialog,#userDialog{
    width:calc(100vw - 16px)!important;max-width:none!important;max-height:calc(100dvh - 16px)!important;
    margin:auto!important;border-radius:12px!important
  }
  #orderForm,.inventory-dialog form,.user-dialog form{width:100%!important;max-height:calc(100dvh - 16px)!important;display:flex!important;flex-direction:column!important}
  #orderForm>header,.inventory-dialog form>header,.user-dialog form>header{flex:0 0 auto!important;padding:14px!important}
  #orderForm>.form-grid,.inventory-dialog .inventory-form-grid,.user-dialog .user-form-grid{
    flex:1 1 auto!important;min-height:0!important;overflow-y:auto!important;padding:12px!important;
    display:grid!important;grid-template-columns:1fr!important;gap:10px!important
  }
  #orderForm>footer,.inventory-dialog form>footer,.user-dialog form>footer{
    flex:0 0 auto!important;position:sticky!important;bottom:0!important;z-index:4!important;
    display:grid!important;grid-template-columns:1fr 1.35fr!important;gap:8px!important;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom))!important
  }
  #orderForm>footer button,.inventory-dialog form>footer button,.user-dialog form>footer button{width:100%!important;min-height:44px!important}
  .profile-dialog{position:fixed!important;top:58px!important;right:8px!important;left:auto!important;width:min(280px,calc(100vw - 16px))!important;margin:0!important}
  .image-dialog{width:min(88vw,560px)!important;max-width:88vw!important;max-height:76dvh!important;margin:auto!important;inset:0!important}
  .image-dialog img{max-width:100%!important;max-height:68dvh!important;object-fit:contain!important}

  /* Login stays centered and usable when the mobile keyboard is open. */
  .login-view{min-height:100dvh!important;padding:max(18px,env(safe-area-inset-top)) 12px max(18px,env(safe-area-inset-bottom))!important;overflow-y:auto!important}
  .login-card{width:min(100%,390px)!important;max-width:100%!important;padding:24px 18px!important;margin:auto!important;border-radius:14px!important}
  .login-card input,.login-card button{min-height:46px!important;font-size:14px!important}
}

@media (max-width:520px){
  .topbar{grid-template-columns:40px minmax(0,1fr) 38px!important;padding-left:6px!important;padding-right:6px!important}
  .topbar .logo{width:40px!important;min-width:40px!important}
  .topbar .logo img{width:30px!important;height:30px!important}
  .topbar nav button,.topbar nav button:nth-child(n){min-width:52px!important;padding:0 7px!important}
  .topbar nav button span{display:none!important}
  .greeting-band{padding:6px 8px!important}
  .greeting-band .daily-greeting{grid-template-columns:minmax(0,1fr) 102px!important;gap:6px!important}
  .greeting-main{padding:7px 8px!important}
  .greeting-face{width:34px!important;height:34px!important;font-size:24px!important;flex-basis:34px!important}
  .greeting-copy b{font-size:13px!important}
  .greeting-copy small{font-size:9px!important}
  .greeting-datetime{padding:6px!important}
  .greeting-datetime strong{font-size:14px!important}
  main{padding-left:8px!important;padding-right:8px!important}
  .metrics .metric,.inventory-metrics>div,.report-metric,.log-metric{flex-basis:138px!important;min-width:138px!important}
  .admin-metrics{grid-template-columns:1fr!important}
  .filters,.inventory-filters,.hot-filters,.report-filters,.logs-filters{padding:8px!important;gap:7px!important}
  .filter-actions button,.module-filter-actions button{font-size:11px!important;padding:0 5px!important}
  .stock-toolbar>button,.admin-module-toolbar>.primary{width:100%!important;margin:0!important}
  .settings-header-actions{grid-template-columns:1fr!important}
  .shop-config-row{grid-template-columns:48px minmax(0,1fr)!important}
  .shop-config-row img{width:48px!important;height:48px!important}
}

@media (max-width:370px){
  .greeting-band .daily-greeting{grid-template-columns:minmax(0,1fr) 90px!important}
  .greeting-copy small{display:none!important}
  .greeting-datetime span{display:none!important}
  .filter-actions{grid-template-columns:1fr 1fr!important}
  .filter-actions .add-order-btn{grid-column:1/-1!important}
  .module-filter-actions{grid-template-columns:1fr 1fr!important}
}

@media (max-width:900px) and (orientation:landscape) and (max-height:560px){
  .greeting-band{position:relative!important;top:auto!important}
  .sheet-wrap,.inventory-table-wrap,.hot-table-wrap,.report-table-wrap,.logs-table-wrap,.admin-table-wrap{max-height:64dvh!important}
  #orderDialog,#inventoryDialog,#userDialog{max-height:calc(100dvh - 8px)!important}
}

@media (max-width:900px) and (prefers-reduced-motion:reduce){
  .topbar nav,.metrics,.inventory-metrics,.report-metrics,.logs-metrics,.quick-filters,.report-quick{scroll-behavior:auto!important;scroll-snap-type:none!important}
}
/* Unified spec textarea and compact quantity column */
.orders-sheet th:nth-child(7),
.orders-sheet td.spec-cell{
  width:190px;
  min-width:190px;
  max-width:190px
}
.orders-sheet th:nth-child(8),
.orders-sheet td.qty{
  width:64px;
  min-width:64px;
  max-width:64px;
  padding-left:5px;
  padding-right:5px;
  text-align:center
}
.orders-sheet td.qty .inline-input{
  display:block;
  width:52px;
  min-width:0;
  margin:0 auto;
  padding-left:6px;
  padding-right:6px;
  text-align:center
}
.orders-sheet tbody tr:not(.after-sales-row) .spec-cell .inline-textarea{
  display:block;
  box-sizing:border-box;
  width:100%;
  height:72px!important;
  min-height:72px!important;
  max-height:72px!important;
  padding:8px 10px;
  resize:none!important;
  overflow-x:hidden;
  overflow-y:auto;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  word-break:break-word;
  line-height:1.45;
  scrollbar-width:thin
}
.orders-sheet tbody tr:not(.after-sales-row) .spec-cell .row-display{
  display:block;
  max-height:76px;
  overflow-x:hidden;
  overflow-y:auto;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  word-break:break-word;
  line-height:1.45;
  scrollbar-width:thin
}
.orders-sheet tbody tr:not(.after-sales-row) .spec-cell .inline-textarea::-webkit-scrollbar,
.orders-sheet tbody tr:not(.after-sales-row) .spec-cell .row-display::-webkit-scrollbar{
  width:5px
}
.orders-sheet tbody tr:not(.after-sales-row) .spec-cell .inline-textarea::-webkit-scrollbar-thumb,
.orders-sheet tbody tr:not(.after-sales-row) .spec-cell .row-display::-webkit-scrollbar-thumb{
  border-radius:999px;
  background:#b9c6d8
}
@media(max-width:900px){
  .orders-sheet th:nth-child(7),.orders-sheet td.spec-cell{width:176px;min-width:176px;max-width:176px}
  .orders-sheet th:nth-child(8),.orders-sheet td.qty{width:60px;min-width:60px;max-width:60px}
  .orders-sheet td.qty .inline-input{width:48px}
}