/* CSS Document */
/* PressPilot — lightweight UI (mobile-first) */
:root{
  --bg:#f6f7fb; --paper:#fff; --ink:#111; --muted:#667;
  --line:#e5e7eb; --brand:#2463eb; --brand-ink:#fff;
  --ok:#0a7a2f; --warn:#a15d00; --bad:#b00020;
  --radius:12px; --shadow:0 6px 18px rgba(17,24,39,.06);

  /* can still be used elsewhere, but the main shell is now full-width */
  --container:1600px;
  --topbar-h:56px;
}

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

/* Make the page shell full-width (no centered column).
   We keep a gentle left/right gutter for breathing room. */
.container{width:100%; max-width:none; margin:0; padding:16px 24px}

/* Top bar */
.topbar{
  position:sticky; top:0; z-index:50;
  height:var(--topbar-h); background:#fff; border-bottom:1px solid var(--line);
}
.topbar .wrap{
  width:100%; max-width:none;
  margin:0; height:100%;
  display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 24px;
}
.brand{display:flex; align-items:center; gap:10px; font-weight:800}
.brand a{color:var(--ink); text-decoration:none}
.navlinks{display:flex; gap:14px; align-items:center}
.navlinks a{color:#223; text-decoration:none; padding:6px 10px; border-radius:8px}
.navlinks a:hover{background:#f1f4f9}
.menu-btn{display:none; border:1px solid var(--line); background:#fff; border-radius:10px; padding:6px 10px}

/* Mobile nav */
@media (max-width: 820px){
  .menu-btn{display:block}
  .navlinks{display:none; position:absolute; top:var(--topbar-h); left:0; right:0; background:#fff; border-bottom:1px solid var(--line); padding:10px 16px; flex-direction:column; align-items:flex-start}
  .navlinks.open{display:flex}
}

/* Cards / panels */
.card,.panel{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow)}
.card{padding:12px}
.panel{padding:18px; margin:10px 0}

/* Headings & helpers */
h1,h2,h3{margin:.3rem 0 .6rem; letter-spacing:.2px}
.muted{color:var(--muted)}
.badge{display:inline-block; font-size:.75rem; padding:.15rem .5rem; border-radius:.5rem; background:#eef2ff; border:1px solid #e0e7ff}
.btn{display:inline-flex; align-items:center; gap:8px; border:1px solid var(--line); background:#fff; padding:8px 12px; border-radius:10px; text-decoration:none; color:inherit}
.btn.primary{
  display:block; width:100%; padding:12px 16px; font-weight:700;
  background:linear-gradient(180deg,#2f66ff 0%,#1e4fe0 100%); color:#fff; border:none;
  box-shadow:0 8px 18px rgba(47,102,255,.25); border-radius:10px
}
.btn.primary:hover{filter:brightness(1.02)}

/* Forms */
label{display:flex; flex-direction:column; gap:6px}
input,select,button{font:inherit}
input,select{
  padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:#fff;
  height:42px; width:100%;
}
button{cursor:pointer}
input:focus,select:focus{outline:2px solid var(--brand); outline-offset:1px; border-color:var(--brand)}
fieldset{border:1px solid #d8dde6; border-radius:14px; background:#fff; padding:12px; margin:10px 0; box-shadow:0 6px 14px rgba(16,24,40,.04)}
fieldset>legend{font-weight:700; color:#273043; padding:0 6px}

/* Remove number input spinners */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0 }
input[type="number"]{ -moz-appearance:textfield; appearance:textfield }

/* Tables (responsive) */
.table-scroll{overflow-x:auto; background:var(--paper); border:1px solid var(--line); border-radius:12px}
.table-scroll table{width:100%; border-collapse:collapse; min-width:720px}
table thead th{background:#f8fafc; text-align:left; font-weight:700}
table th,table td{padding:10px 12px; border-bottom:1px solid var(--line)}
tr:last-child td{border-bottom:none}

/* Kanban (responsive) */
.kanban{display:grid; gap:12px; align-items:start}
@media (min-width: 1024px){ .kanban{grid-template-columns:repeat(6,minmax(220px,1fr));} }
@media (max-width: 1023px){ .kanban{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));} }
@media (max-width: 640px){
  .kanban{grid-auto-flow:column; grid-auto-columns:85vw; overflow-x:auto; padding-bottom:10px}
  .kanban .col{scroll-snap-align:start}
}
.col{background:#fbfbfd; border:1px solid var(--line); border-radius:12px; padding:10px}
.col h4{margin:4px 6px 8px}

/* Two-column info grid (order header) */
.info-grid{display:grid; gap:12px}
@media (min-width: 960px){ .info-grid{grid-template-columns:2fr 1fr} }

/* Footer */
.footer{color:var(--muted); margin:24px 0}

/* ---------- New Order: MATRIX LAYOUT (no overlap, no full-bleed hacks) ---------- */
.matrix-wrap{
  overflow-x:auto; border:1px solid #e2e8f0; border-radius:12px; background:#fff;
  box-shadow:0 6px 14px rgba(16,24,40,.04);
  margin:10px 0;           /* sits naturally in flow */
  padding:0;               /* table handles its own padding */
}
.matrix{
  width:100%;
  min-width:1400px;        /* show lots of columns before scrolling */
  border-collapse:separate; border-spacing:0
}
.matrix thead th{background:#f1f5fb; color:#394150; font-weight:700; border-bottom:1px solid #e2e8f0}
.matrix th,.matrix td{padding:10px 12px; white-space:nowrap; vertical-align:middle}
.matrix td{border-bottom:1px solid #eef2f6}
.matrix tr:last-child td{border-bottom:none}
.matrix td input[type="text"],
.matrix td input[type="number"],
.matrix td select{
  width:100%; height:38px; padding:8px 10px; border:1px solid #d8dde6; border-radius:8px; background:#fff
}
.matrix td input[readonly]{background:#f8fafc; color:#64748b}

/* Tight numeric cells & totals */
.matrix .size{width:58px; text-align:center}
.matrix .qtycol{width:84px}
.matrix .pricecol{width:96px}
.matrix .totalcol{width:120px; font-weight:700; color:#111}

/* Row actions button */
.matrix .actions{width:54px; text-align:center}
.matrix .actions .btn{border:1px solid #e2e8f0; border-radius:8px; padding:6px 10px}

/* Mobile: sticky header + edge breathing room */
@media (max-width: 760px){
  .matrix-wrap{border-radius:0}
  .matrix thead th{position:sticky; top:0; z-index:1}
}

/* Line item “+ Add” button */
.add-line{margin-top:10px}
.add-line .btn{border:1px dashed #b8c2cf; background:#f8fafc}

/* Order total chip pinned to the right */
.total-chip{position:relative; display:flex; justify-content:flex-end; margin-top:8px}
.total-chip .pill{background:#fff; border:1px solid #e2e8f0; border-radius:10px; padding:8px 12px; 
  box-shadow:0 6px 14px rgba(16,24,40,.06); color:#273043; font-weight:700}

/* ---------- Legacy size-grid styles (kept for future screens) ---------- */
.li{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:12px; margin:.75rem 0}
.li-head{display:grid; gap:10px; grid-template-columns:1fr 1fr 2fr 1fr 1fr}
@media (max-width:980px){.li-head{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.li-head{grid-template-columns:1fr}}

.size-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(74px,1fr)); gap:8px}
.size-pill{display:grid; grid-template-rows:auto auto; gap:6px}
.size-pill span{font-size:.75rem; color:var(--muted); text-align:center}
.size-pill input{text-align:center; padding:8px 10px}