/* ============================================================
   Relata for Suppliers — distinct teal, top-nav design
   ============================================================ */
:root {
  --bg:#EAF1F1; --surface:#F6FAFA; --card:#fff; --ink:#10242A;
  --teal:#0E5E63; --teal-700:#0A4A4E; --teal-600:#127B80; --teal-soft:#CFE6E6;
  --amber:#C68A2E; --muted:#566A6C; --line:rgba(16,36,42,.12); --line-soft:rgba(16,36,42,.07);
  --ok-bg:#DCEDE4; --ok-fg:#0A4A3A; --warn-bg:#FAEBCF; --warn-fg:#8A5A11; --bad-bg:#F6E0DC; --bad-fg:#9A3826;
  --radius:14px; --radius-sm:9px; --shadow:0 1px 2px rgba(16,36,42,.05),0 14px 34px -20px rgba(16,36,42,.25);
  --font-body:"Inter",system-ui,sans-serif; --font-head:"Fraunces",Georgia,serif;
}
* { box-sizing:border-box; }
body { margin:0; font-family:var(--font-body); background:var(--bg); color:var(--ink); -webkit-font-smoothing:antialiased; line-height:1.55; }
h1,h2,h3,h4 { font-family:var(--font-head); font-weight:500; margin:0; letter-spacing:-.01em; }
a { color:inherit; text-decoration:none; }
button { font-family:inherit; cursor:pointer; }
input,select,textarea { font-family:inherit; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }

.btn { display:inline-flex; align-items:center; gap:.4rem; justify-content:center; height:42px; padding:0 1.2rem; border-radius:999px; border:1.5px solid transparent; font-size:.93rem; font-weight:500; transition:.15s; }
.btn:active { transform:translateY(1px); }
.btn-solid { background:var(--teal); color:#fff; } .btn-solid:hover { background:var(--teal-700); }
.btn-line { background:transparent; border-color:var(--line); color:var(--ink); } .btn-line:hover { border-color:var(--teal); }
.btn-sm { height:34px; padding:0 .8rem; font-size:.84rem; }
.btn:disabled { opacity:.5; cursor:not-allowed; }

.field { margin-bottom:1rem; }
.field label { display:block; font-size:.82rem; font-weight:500; margin-bottom:.35rem; }
.field input, .field select, .field textarea { width:100%; height:42px; padding:0 .8rem; border:1.5px solid var(--line); border-radius:var(--radius-sm); background:var(--surface); font-size:.95rem; }
.field textarea { height:auto; min-height:80px; padding:.6rem .8rem; resize:vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline:none; border-color:var(--teal); }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:.8rem; }

/* auth */
.auth { min-height:100vh; display:grid; place-items:center; padding:1.5rem; }
.auth-card { background:var(--card); border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow); width:100%; max-width:460px; padding:2.4rem; }
.auth-brand { display:flex; align-items:center; gap:.5rem; color:var(--teal); margin-bottom:.4rem; font-weight:600; }
.auth-brand b { font-family:var(--font-head); font-size:1.45rem; color:var(--ink); font-weight:500; }
.auth-tag { font-size:.8rem; color:var(--teal-600); font-weight:600; letter-spacing:.08em; text-transform:uppercase; margin-bottom:1.2rem; }
.auth-card h1 { font-size:1.5rem; margin-bottom:.3rem; }
.auth-card p.sub { color:var(--muted); font-size:.92rem; margin:0 0 1.4rem; }
.auth-toggle { margin-top:1.1rem; text-align:center; font-size:.88rem; color:var(--muted); }
.auth-toggle a { color:var(--teal); font-weight:500; cursor:pointer; }
.demo-hint { margin-top:1.1rem; padding:.7rem .9rem; background:var(--ok-bg); border-radius:var(--radius-sm); font-size:.82rem; color:var(--ok-fg); }
.checkbox-row { display:flex; align-items:flex-start; gap:.5rem; font-size:.86rem; color:var(--muted); }
.checkbox-row input { width:auto; height:auto; margin-top:.2rem; }

/* top-nav shell */
.topnav { background:var(--teal); color:#CFE6E6; }
.topnav__inner { max-width:1080px; margin:0 auto; padding:0 1.5rem; height:64px; display:flex; align-items:center; gap:1rem; }
.topnav .brand { display:flex; align-items:center; gap:.5rem; color:#fff; font-weight:600; }
.topnav .brand b { font-family:var(--font-head); font-size:1.3rem; }
.topnav .brand .tag { font-size:.66rem; background:rgba(255,255,255,.15); padding:.15rem .5rem; border-radius:999px; letter-spacing:.06em; text-transform:uppercase; }
.topnav-tabs { display:flex; gap:.3rem; margin-left:1.2rem; }
.topnav-tabs .tab { padding:.4rem .9rem; border-radius:999px; font-size:.88rem; font-weight:500; color:#CFE6E6; cursor:pointer; }
.topnav-tabs .tab:hover { background:rgba(255,255,255,.1); color:#fff; }
.topnav-tabs .tab.active { background:rgba(255,255,255,.16); color:#fff; }
.topnav .who { margin-left:auto; font-size:.88rem; color:#CFE6E6; }
.topnav .who b { color:#fff; }
.topnav button { margin-left:1rem; background:transparent; border:1px solid rgba(255,255,255,.25); color:#fff; height:34px; padding:0 .9rem; border-radius:999px; font-size:.84rem; }
.topnav button:hover { background:rgba(255,255,255,.1); }

.wrap { max-width:1080px; margin:0 auto; padding:2rem 1.5rem 3rem; }
.page-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.6rem; flex-wrap:wrap; gap:1rem; }
.page-head h1 { font-size:1.7rem; }
.page-head p { color:var(--muted); font-size:.9rem; margin-top:.2rem; }

.grid { display:grid; gap:1rem; }
.cols-3 { grid-template-columns:repeat(3,1fr); }
.cols-4 { grid-template-columns:repeat(4,1fr); }
.metric { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:1.1rem 1.2rem; }
.metric .label { font-size:.8rem; color:var(--muted); }
.metric .value { font-family:var(--font-head); font-size:1.9rem; margin-top:.3rem; }

.card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:1.2rem; }
.prod { display:flex; flex-direction:column; }
.prod .thumb { height:130px; border-radius:var(--radius-sm); background:var(--teal-soft); position:relative; overflow:hidden; margin-bottom:.8rem; }
.thumb::before { content:attr(data-emoji); position:absolute; inset:0; display:grid; place-items:center; font-size:2.2rem; }
.thumb img { position:relative; z-index:1; width:100%; height:100%; object-fit:cover; display:block; }
.prod h4 { font-size:1.04rem; margin-bottom:.2rem; }
.prod .price { font-family:var(--font-head); font-size:1.25rem; margin:.5rem 0; }
.prod .meta { display:flex; gap:.4rem; flex-wrap:wrap; margin-bottom:.6rem; }

.badge { display:inline-flex; align-items:center; font-size:.74rem; font-weight:600; padding:.22rem .6rem; border-radius:999px; }
.b-ok { background:var(--ok-bg); color:var(--ok-fg); } .b-warn { background:var(--warn-bg); color:var(--warn-fg); }
.b-bad { background:var(--bad-bg); color:var(--bad-fg); } .b-teal { background:var(--teal-soft); color:var(--teal-700); }
.b-gray { background:#E6EBEB; color:var(--muted); }

.section-title { display:flex; align-items:center; justify-content:space-between; margin:2rem 0 1rem; }
.section-title h2 { font-size:1.25rem; }
.muted { color:var(--muted); } .t-sub { color:var(--muted); font-size:.82rem; }
.empty { text-align:center; padding:3rem 1rem; color:var(--muted); }
.empty .big { font-size:2.2rem; margin-bottom:.5rem; }
.inline-actions { display:flex; gap:.4rem; flex-wrap:wrap; }

/* modal */
.modal-bg { position:fixed; inset:0; background:rgba(16,36,42,.45); display:grid; place-items:center; padding:1.5rem; z-index:50; }
.modal { background:var(--card); border-radius:18px; width:100%; max-width:560px; max-height:90vh; overflow:auto; box-shadow:var(--shadow); }
.modal-head { display:flex; justify-content:space-between; align-items:center; padding:1.2rem 1.4rem; border-bottom:1px solid var(--line-soft); position:sticky; top:0; background:var(--card); }
.modal-head h3 { font-size:1.2rem; } .modal-head .x { background:none; border:0; font-size:1.4rem; color:var(--muted); }
.modal-body { padding:1.3rem 1.4rem; } .modal-foot { padding:1rem 1.4rem; border-top:1px solid var(--line-soft); display:flex; gap:.6rem; justify-content:flex-end; }

#toast { position:fixed; bottom:1.4rem; right:1.4rem; display:flex; flex-direction:column; gap:.5rem; z-index:100; }
.toast { background:var(--ink); color:#fff; padding:.7rem 1rem; border-radius:var(--radius-sm); font-size:.88rem; box-shadow:var(--shadow); max-width:340px; }
.toast.err { background:var(--bad-fg); } .toast.ok { background:var(--teal-700); }

.sales-table { width:100%; border-collapse:collapse; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; font-size:.92rem; }
.sales-table th { text-align:left; background:var(--surface); font-family:var(--font-body); font-size:.74rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); padding:.8rem 1rem; border-bottom:1px solid var(--line-soft); }
.sales-table td { padding:.7rem 1rem; border-bottom:1px solid var(--line-soft); vertical-align:middle; }
.sales-table tr:last-child td { border-bottom:0; }
.sales-table .right { text-align:right; }
.sales-prod { display:flex; align-items:center; gap:.7rem; }
.sales-prod .thumb { width:46px; height:46px; margin:0; flex:none; border-radius:8px; }
.sales-prod .thumb::before { font-size:1.2rem; }
.sp-name { font-weight:500; }
.stock-edit { display:flex; align-items:center; gap:.5rem; margin-top:.9rem; padding-top:.8rem; border-top:1px solid var(--line-soft); }
.stock-edit label { font-size:.8rem; color:var(--muted); font-weight:500; }
.stock-edit input { width:80px; height:34px; padding:0 .6rem; border:1.5px solid var(--line); border-radius:var(--radius-sm); background:var(--surface); font-size:.9rem; }
.stock-edit input:focus { outline:none; border-color:var(--teal); }
.stock-edit .btn { margin-left:auto; }
.callout { background:var(--teal-soft); border-radius:var(--radius); padding:1.1rem 1.3rem; margin-bottom:1.4rem; font-size:.9rem; color:var(--teal-700); }
.callout b { color:var(--teal-700); }

@media (max-width:860px){ .cols-3,.cols-4 { grid-template-columns:1fr; } .field-row { grid-template-columns:1fr; } }