:root{
  /* Purple/Lavender Theme */
  --page-width: 1200px;
  --background: #cccae4; /*old #E8E7F3;*/
  --foreground: #2D3142;
  --card: #ffffff;
  --card-foreground: #2D3142;
  --primary: #6C5DD3;
  --primaryDark: #5B4EC0;
  --secondary: #F5F4FC;
  --secondary-foreground: #2D3142;
  --muted: #8B8D9E;
  --destructive: #EF4444;
  --destructive-foreground: #ffffff;
  --border: rgba(108, 93, 211, 0.15);
  --input-background: #F5F4FC;

  /* Back-compat with existing CSS variables */
  --bg: var(--background);
  --panel: var(--card);
  --ink: var(--foreground);
  --alert:#ef4444;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);
  color:var(--ink)
}

/* Topbar */
.topbar{border-bottom:0px solid var(--border);}
.topbar .container{
  display:flex; align-items:flex-end; justify-content:space-between;
  padding:28px 22px 10px
}
.topbar h1{margin:0; font-size:34px; letter-spacing:1px}
.title-wrap{display:flex; flex-direction:column; gap:6px}
.order-ref{color:var(--muted); font-weight:700}
.kpis{display:flex; gap:40px}
.kpi{display:flex; flex-direction:column; align-items:center}
.kpi span{font:900 32px/1 system-ui; color: var(--primary);}
.kpi small{color:var(--muted)}

/* Layout */
.container{width:min(var(--page-width),100%); margin:10px auto; display:grid; gap:12px}
.panel{
  background: var(--panel);
  border:1px solid var(--border);
  border-radius:16px;
  padding:18px;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.10), 0 1px 2px 1px rgba(0, 0, 0, 0.03);
}

/* Meta */
.meta-grid{display:grid; grid-template-columns:1fr 1fr 360px; gap:16px}
.stack{display:flex; flex-direction:column; gap:8px}
.stack .label{font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.4px}
.stack input,.stack textarea{
  background:var(--input-background);
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px 12px;
  font-size:14px;
  color:var(--ink)
}
.stack textarea{min-height:110px; resize:vertical}
.meta-right{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.meta-right .status-row{grid-column:1 / -1; display:flex; flex-direction:column; gap:8px}
.status-badge{
  display:inline-block; padding:6px 12px; border-radius:999px;
  background:var(--foreground); color:#fff; font-weight:700; font-size:12px; width:auto;     text-align: center
}

/* Buttons */
.btn{
  appearance:none; border:1px solid var(--border); border-radius:12px;
  padding:12px 20px; font-weight:800; letter-spacing:.2px; cursor:pointer;
  background:var(--secondary); color:var(--secondary-foreground);
  transition: background .15s ease, transform .02s ease;
}
.btn.primary{background:var(--primary); color:#fff; border-color:transparent}
.btn.primary:hover{background:var(--primaryDark)}
.btn.danger{background:#e11d48; color:#fff; border-color:transparent}
.btn:active{transform: translateY(1px)}

/* Search */
.search-panel{border-radius:16px; margin-top:6px}
.search-row{
  display:grid; grid-template-columns: 1fr auto auto auto; gap:12px; align-items:center; font-size:16px
}
.search-row input[type="text"]{
  background:var(--input-background);
  border:1px solid var(--border);
  border-radius:12px;
  padding:12px
}

/* Suggest dropdown */
.suggest{
  margin-top:8px; background:var(--panel); border:1px solid var(--border);
  border-radius:12px; max-height:240px; overflow:auto; box-shadow: 0 8px 24px rgba(0,0,0,.08);
}
.suggest .opt{display:flex; align-items:center; gap:12px; padding:10px 12px; cursor:pointer}
.suggest .opt:hover{background:var(--secondary)}
.suggest .thumb.sm{width:32px;height:32px;flex:0 0 32px;border-radius:8px;overflow:hidden;background:var(--input-background)}
.suggest .thumb.sm img{width:100%;height:100%;object-fit:cover;display:block}
.suggest .opt .badge{
  margin-left:auto;font-size:12px;padding:2px 8px;border-radius:8px;background:var(--secondary)
}

/* Fieldbox (single border) for QTY and PRICE in search row */
.fieldbox{
  display:inline-flex; align-items:center; height:44px;
  border:1px solid var(--border); border-radius:12px; background:var(--input-background); overflow:hidden
}
.fieldbox .btn-icon{
  width:44px; height:100%; border:0; background:transparent; font-weight:800; font-size:20px; line-height:1;
  display:flex; align-items:center; justify-content:center; cursor:pointer; user-select:none; color: var(--foreground);
}
.fieldbox input{
  height:100%; border:0; outline:none; background:transparent; padding:0 8px; min-width:60px; font-size:16px; color:var(--foreground);
}
.qty-box input{text-align:center; width:50px; font-size:16px}
.price-box input{text-align:right; width:125px; padding-right:15px}

/* Lines table */
.lines{width:100%; border-collapse:separate; border-spacing:0 16px}
.lines th{font-size:12px; color:var(--muted); text-align:center; padding:0px 8px}
.lines td{border:0px solid var(--border); padding:14px; vertical-align:middle; text-align:right; background: var(--panel)}
.lines tr{ box-shadow: 0 4px 14px rgba(108,93,211,0.06); }
.lines td:first-child{border-radius:12px 0 0 12px}
.lines td:last-child{border-radius:0 12px 12px 0; text-align:right}
.lines .name{font-weight:700; text-align:left}
.lines .sku{color:var(--muted); font-size:16px; text-align:center}
.rowflex{display:flex; align-items:center; gap:12px}
.thumb{width:40px; height:40px; flex:0 0 40px; border-radius:10px; overflow:hidden; background:var(--input-background)}
.thumb img{width:100%; height:100%; object-fit:cover; display:block}

/* QTY in table */
.qtyctrl{
  display:inline-flex; align-items:center; height:40px; border:1px solid var(--border);
  border-radius:12px; background:var(--input-background); overflow:hidden
}
.qtyctrl .minus,.qtyctrl .plus{
  width:38px; height:100%; border:0; background:transparent; cursor:pointer; font-weight:800; font-size:18px; line-height:1;
  display:flex; align-items:center; justify-content:center; color: var(--foreground);
}
.qtyctrl .qty{
  height:100%; border:0; background:transparent; outline:none; padding:0 10px; width:50px; text-align:center; font-size:16px; color: var(--foreground);
}

/* PRICE in table */
.price input{
  height:40px; width:120px; font-size:16px; text-align:right; padding:0 10px;
  background:var(--input-background); border:1px solid var(--border); border-radius:12px; color: var(--foreground);
}

/* ===== Price deviation alert (7%+) ===== */
@keyframes blink-underline {
  0%, 55% { box-shadow: inset 0 -3px 0 var(--alert); }
  55.1%, 100% { box-shadow: inset 0 -3px 0 transparent; }
}
.price input.needs-approval{
  border-color: var(--alert);
  animation: blink-underline 1.1s linear infinite;
}

/* Comments + totals */
.bottom-grid{display:grid; grid-template-columns: 1fr 380px; gap:16px}
.bottom-grid .totals{
  border:1px solid var(--border); border-radius:16px; padding:16px; padding-right:60px; display:grid; gap:12px;
  background: var(--panel); box-shadow: 0 6px 18px rgba(108,93,211,0.08);
}
.bottom-grid .row{display:flex; align-items:center; justify-content:space-between}
.bottom-grid .row input{
  width:160px; text-align:right; padding:10px; border:1px solid var(--border); border-radius:12px; font-size:16px; margin-right:-22px;
  background: var(--input-background); color: var(--foreground);
}
.total-row strong{font-size:22px; color: var(--primary);}

/* Actions */
.actions{display:flex; gap:12px; justify-content:flex-end; padding:8px 0 24px}

/* Disable native number spinners */
.qtyctrl .qty,
.fieldbox input[type="number"] { -moz-appearance:textfield; appearance:textfield; }
.qtyctrl .qty::-webkit-outer-spin-button,
.qtyctrl .qty::-webkit-inner-spin-button,
.fieldbox input[type="number"]::-webkit-outer-spin-button,
.fieldbox input[type="number"]::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }

/* Misc */
.toast{
  position:fixed; left:50%; transform:translateX(-50%); bottom:24px; background:var(--foreground);
  color:#fff; padding:10px 14px; border-radius:12px; font-size:14px; box-shadow:0 8px 20px rgba(0,0,0,.18)
}
[hidden]{display:none !important}

@media (max-width:1024px){
  .meta-grid{grid-template-columns:1fr}
  .meta-right{grid-template-columns:1fr 1fr}
  .bottom-grid{grid-template-columns:1fr}
}

/* ===== White top bar ===== */
.whitebar{background:#fff; border-bottom:1px solid var(--border)}
.whitebar .wb-inner{display:flex; align-items:center; justify-content:space-between; padding:10px 0; margin: 0px; max-width: var(--page-width);
  width: 100%; margin: 0 auto
    }
.whitebar .wb-title{font-weight:900; letter-spacing:1px; color:var(--foreground)}
.whitebar .wb-pin{display:flex; gap:10px; align-items:center}
.whitebar .wb-pin input{
  height:40px; border:1px solid var(--border); border-radius:12px; padding:0 12px; background:#fff; color:var(--foreground);
}

/* ===== Card padding increase (left/right) ===== */
.panel{ padding-left:24px; padding-right:24px; }

/* ===== Two-column vertical meta layout ===== */
.meta-grid.two-col-vert{grid-template-columns:1fr 1fr; gap:16px}
.meta-grid.two-col-vert .col{display:flex; flex-direction:column; gap:12px}


/* === Requested layout tweaks (only) === */
.whitebar{ margin-top:0; }
.whitebar .container{ padding-left:20px; padding-right:20px; }
.container{ padding-left:20px; padding-right:20px; }
.panel{ padding-left:24px; padding-right:24px; }



/* submit modal */
.modal{position:fixed;inset:0;display:grid;place-items:center;z-index:9999}
.modal[hidden]{display:none}
.modal__backdrop{position:absolute;inset:0;background:rgba(17,24,39,.55);backdrop-filter:saturate(120%) blur(2px)}
.modal__panel{position:relative;background:#fff;border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.15);padding:20px;max-width:420px;width:92%;text-align:center}
.modal__title{font-weight:700;font-size:18px;margin-bottom:6px}
.modal__text{font-size:14px;color:#4b5563;margin-bottom:12px}
.progress{height:10px;background:#eef2f7;border-radius:999px;overflow:hidden}
.progress__bar{height:100%;background:var(--primary)}
.progress__pct{font-size:12px;color:#6b7280;margin-top:8px}