/* ===========================================================
   Supermarket POS — design tokens
   Subject: the checkout counter — barcode stripes, thermal
   receipt tape, till buttons, conveyor-belt lists.
   =========================================================== */
:root{
  --ink:        #1C1F1A;   /* till housing / near-black */
  --ink-soft:   #4A4F45;
  --paper:      #FAF7F0;   /* receipt paper */
  --paper-dim:  #F0ECE1;
  --line:       #D8D2C4;   /* perforation / hairline */
  --signal:     #E8B923;   /* scanner-light amber */
  --signal-ink: #4A3900;
  --green:      #2F5233;   /* fresh produce green */
  --green-soft: #E7EEE3;
  --alert:      #C1443C;
  --alert-soft: #F7E4E2;
  --radius:     10px;
  --font-display: 'Barlow Condensed', sans-serif;
  --font-body:    'Inter', sans-serif;
  --font-mono:    'IBM Plex Mono', monospace;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background: var(--paper-dim);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height:1.45;
}
a{color:inherit;}
h1,h2,h3{font-family:var(--font-display); font-weight:600; letter-spacing:.2px; margin:0 0 .4em;}
h1{font-size:2.1rem;}
h2{font-size:1.5rem;}
h3{font-size:1.15rem;}

/* barcode-stripe divider — the recurring signature motif */
.stripe-divider{
  height:10px;
  margin: 18px 0;
  background: repeating-linear-gradient(90deg,
    var(--ink) 0 2px, transparent 2px 5px,
    var(--ink) 5px 6px, transparent 6px 11px,
    var(--ink) 11px 14px, transparent 14px 18px);
  opacity:.85;
  border-radius:2px;
}

/* ---------- top bar ---------- */
.topbar{
  display:flex; align-items:center; gap:24px;
  background: var(--ink); color: var(--paper);
  padding: 10px 22px;
  position: sticky; top:0; z-index: 50;
}
.topbar-brand{display:flex; align-items:center; gap:10px;}
.brand-mark{
  width:16px; height:16px; border-radius:3px;
  background: var(--signal);
  box-shadow: 0 0 0 3px rgba(232,185,35,.25);
}
.brand-name{font-family:var(--font-display); font-size:1.3rem; font-weight:600; letter-spacing:.3px;}
.topnav{display:flex; gap:4px; flex:1; flex-wrap:wrap;}
.topnav a{
  color: rgba(250,247,240,.75);
  text-decoration:none;
  padding:8px 12px; border-radius:6px; font-size:.92rem; font-weight:500;
}
.topnav a:hover{ color:var(--paper); background: rgba(250,247,240,.08); }
.topnav a.active{ color: var(--ink); background: var(--signal); font-weight:600; }
.topbar-user{display:flex; align-items:center; gap:12px; font-size:.85rem; color:rgba(250,247,240,.8);}
.topbar-user em{color:var(--signal); font-style:normal;}

.app-main{padding:26px 30px; max-width:1300px; margin:0 auto;}

/* ---------- cards / panels ---------- */
.panel{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:20px 22px; margin-bottom:20px;
}
.panel-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; gap:12px; flex-wrap:wrap;}

.grid{display:grid; gap:18px;}
.grid-2{grid-template-columns: 1fr 1fr;}
.grid-3{grid-template-columns: repeat(3,1fr);}
.grid-4{grid-template-columns: repeat(4,1fr);}
@media (max-width: 900px){ .grid-2,.grid-3,.grid-4{grid-template-columns:1fr;} }

/* ---------- stat tiles ---------- */
.stat{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:16px 18px;
}
.stat .label{font-size:.78rem; text-transform:uppercase; letter-spacing:.6px; color:var(--ink-soft);}
.stat .value{font-family:var(--font-mono); font-size:1.7rem; font-weight:600; margin-top:4px;}
.stat.accent{border-color: var(--signal); background: #FFFBEE;}
.stat.alert{border-color: var(--alert); background: var(--alert-soft);}

/* ---------- forms ---------- */
label{display:block; font-size:.82rem; font-weight:600; color:var(--ink-soft); margin-bottom:5px;}
input[type=text], input[type=number], input[type=password], input[type=search],
input[type=date], select, textarea{
  width:100%; padding:9px 11px; border:1px solid var(--line); border-radius:7px;
  font-family:var(--font-body); font-size:.95rem; background:#fff; color:var(--ink);
}
input:focus, select:focus, textarea:focus{ outline:2px solid var(--signal); outline-offset:1px; border-color:var(--signal); }
.field{margin-bottom:14px;}
.field-row{display:flex; gap:14px; flex-wrap:wrap;}
.field-row > .field{flex:1; min-width:160px;}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  background: var(--ink); color:#fff; border:none; border-radius:8px;
  padding:10px 18px; font-size:.92rem; font-weight:600; cursor:pointer;
  text-decoration:none; font-family:var(--font-body);
}
.btn:hover{ background:#000; }
.btn-signal{ background: var(--signal); color: var(--signal-ink); }
.btn-signal:hover{ background:#d8a915; }
.btn-alert{ background: var(--alert); color:#fff; }
.btn-alert:hover{ background:#a83831; }
.btn-ghost{ background:transparent; color:var(--ink); border:1px solid var(--line); }
.btn-ghost:hover{ background: var(--paper-dim); }
.btn.small{ padding:6px 11px; font-size:.8rem; }
.btn.block{ width:100%; }
.btn:disabled{opacity:.45; cursor:not-allowed;}

/* ---------- tables ---------- */
table{width:100%; border-collapse:collapse;}
th,td{ text-align:left; padding:9px 10px; border-bottom:1px solid var(--line); font-size:.9rem; }
th{ font-size:.75rem; text-transform:uppercase; letter-spacing:.5px; color:var(--ink-soft); font-weight:600;}
tbody tr:hover{ background: var(--paper-dim); }
.num{ font-family:var(--font-mono); text-align:right; }
.tag{ display:inline-block; padding:2px 8px; border-radius:20px; font-size:.72rem; font-weight:600; }
.tag-green{ background:var(--green-soft); color:var(--green); }
.tag-alert{ background:var(--alert-soft); color:var(--alert); }

/* ---------- login ---------- */
.login-wrap{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background: var(--ink);
}
.login-card{
  background: var(--paper); width:360px; border-radius:14px; padding:32px 30px;
  box-shadow: 0 20px 50px rgba(0,0,0,.35);
}
.login-card .brand-mark{ display:inline-block; margin-bottom:10px; }
.login-card h1{ font-size:1.6rem; margin-bottom:2px; }
.login-card p.sub{ color:var(--ink-soft); font-size:.85rem; margin:0 0 18px; }
.error-box{ background:var(--alert-soft); color:var(--alert); border-radius:8px; padding:9px 12px; font-size:.85rem; margin-bottom:14px; }
.ok-box{ background:var(--green-soft); color:var(--green); border-radius:8px; padding:9px 12px; font-size:.85rem; margin-bottom:14px; }

/* ===========================================================
   CHECKOUT SCREEN — two-pane: conveyor list + receipt tape
   =========================================================== */
.pos-layout{ display:grid; grid-template-columns: 1fr 380px; gap:22px; align-items:start; }
@media (max-width:1000px){ .pos-layout{ grid-template-columns:1fr; } }

.scan-bar{
  display:flex; gap:10px; background:var(--ink); padding:14px; border-radius:var(--radius) var(--radius) 0 0;
}
.scan-bar input{
  font-family:var(--font-mono); font-size:1.05rem; letter-spacing:1px;
  background:#fff;
}
.scan-hint{ color: rgba(250,247,240,.6); font-size:.72rem; margin-top:6px; }

.cart-panel{ background:#fff; border:1px solid var(--line); border-radius: 0 0 var(--radius) var(--radius); border-top:none; overflow:hidden;}
.cart-table th, .cart-table td{ padding:10px; }
.cart-table{ font-size: .92rem; }
.cart-empty{ padding:50px 20px; text-align:center; color:var(--ink-soft); }
.qty-input{ width:64px; text-align:center; padding:5px; }
.row-remove{ background:none; border:none; color:var(--alert); cursor:pointer; font-size:1rem; }

/* receipt-tape summary panel */
.tape{
  background:var(--ink); color:var(--paper); border-radius: var(--radius);
  padding: 22px 20px 16px;
  position: relative;
}
.tape::before{
  content:""; position:absolute; top:-8px; left:0; right:0; height:16px;
  background: radial-gradient(circle at 10px 8px, var(--paper-dim) 6px, transparent 7px) repeat-x;
  background-size: 20px 16px;
}
.tape h2{ color:var(--signal); font-size:1.2rem; }
.tape-row{ display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:.92rem; padding:4px 0; }
.tape-row.total{ font-size:1.5rem; font-weight:600; color:var(--signal); border-top:1px dashed rgba(250,247,240,.3); margin-top:8px; padding-top:12px; }
.tape select, .tape input{ margin-top:4px; }
.tape label{ color: rgba(250,247,240,.65); }
.pay-tabs{ display:flex; gap:6px; margin: 10px 0; }
.pay-tabs button{
  flex:1; padding:8px; border-radius:7px; border:1px solid rgba(250,247,240,.25);
  background:transparent; color:var(--paper); cursor:pointer; font-size:.82rem; font-weight:600;
}
.pay-tabs button.active{ background:var(--signal); color:var(--signal-ink); border-color:var(--signal); }

/* ---------- printed receipt ---------- */
.receipt{
  width: 300px; margin: 30px auto; background:#fff; padding:18px 16px;
  font-family: var(--font-mono); font-size:.82rem; color:#111;
  border:1px solid var(--line);
}
.receipt h2{ font-size:1rem; text-align:center; margin-bottom:2px; }
.receipt .center{ text-align:center; }
.receipt .rline{ display:flex; justify-content:space-between; }
.receipt .divider{ border-top:1px dashed #999; margin:8px 0; }
.receipt .items td{ padding:2px 0; font-size:.78rem; border:none; }
.no-print{ margin: 16px auto; text-align:center; }
@media print{
  .no-print, .topbar{ display:none !important; }
  body{ background:#fff; }
  .receipt{ border:none; margin:0; }
}

.footnote{ color:var(--ink-soft); font-size:.78rem; }
.msg{ margin-bottom:16px; }