/* PureOrganics B2B — interfață revânzători. Calm, eficient, verde botanic + marker de brand. */
:root {
  --green:#007A5E; --green-deep:#005C46; --green-soft:#E6F1EC; --green-line:#CADED4;
  --ink:#232926; --muted:#69736D; --paper:#F4F7F5; --surface:#fff; --line:#E3EAE5;
  --danger:#B02A1E; --danger-soft:#FBE7E4;
  --radius:14px; --radius-sm:9px;
  --shadow:0 1px 2px rgba(35,41,38,.04), 0 6px 20px rgba(35,41,38,.05);
  --shadow-hover:0 2px 6px rgba(35,41,38,.06), 0 14px 32px rgba(0,122,94,.10);
  --font:"Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body { margin:0; font-family:var(--font); font-size:15px; line-height:1.55; color:var(--ink);
  background:var(--paper); -webkit-font-smoothing:antialiased; }
a { color:var(--green-deep); text-decoration:none; }
a:hover { text-decoration:underline; }

/* ── Topbar ── */
.topbar { position:sticky; top:0; z-index:20; display:flex; justify-content:space-between; align-items:center;
  gap:16px; padding:0 clamp(16px,4vw,28px); height:60px; background:rgba(255,255,255,.86);
  -webkit-backdrop-filter:saturate(1.4) blur(10px); backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid var(--line); }
.brand { display:inline-flex; align-items:center; gap:9px; font-weight:800; font-size:18px;
  letter-spacing:-.02em; color:var(--ink); }
.brand:hover { text-decoration:none; }
.brand-leaf { display:inline-flex; color:var(--green); }
.brand-tag { margin-left:2px; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--green); background:var(--green-soft); padding:3px 7px; border-radius:6px; }
.topbar-right { display:flex; align-items:center; gap:14px; }
.topbar-role { color:var(--muted); font-size:13px; font-weight:600; }

/* ── Navigare pe casete ── */
.navcards { max-width:1120px; margin:20px auto 0; padding:0 16px;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:12px; }
.navcard { display:flex; align-items:center; gap:13px; padding:14px 16px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow);
  color:var(--ink); transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.navcard:hover { text-decoration:none; transform:translateY(-2px); box-shadow:var(--shadow-hover); border-color:var(--green-line); }
.navcard-ico { display:inline-flex; flex:0 0 auto; width:40px; height:40px; align-items:center; justify-content:center;
  border-radius:11px; background:var(--green-soft); color:var(--green-deep); }
.navcard-ico svg { width:21px; height:21px; }
.navcard-txt { display:flex; flex-direction:column; line-height:1.25; min-width:0; }
.navcard-label { font-weight:700; letter-spacing:-.01em; }
.navcard-sub { font-size:12.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.navcard.active { background:var(--green); border-color:var(--green); box-shadow:0 10px 26px rgba(0,122,94,.22); }
.navcard.active .navcard-label, .navcard.active .navcard-sub { color:#fff; }
.navcard.active .navcard-sub { opacity:.85; }
.navcard.active .navcard-ico { background:rgba(255,255,255,.16); color:#fff; }

/* ── Layout ── */
main { max-width:1120px; margin:26px auto; padding:0 16px; }
footer { text-align:center; color:var(--muted); font-size:12.5px; padding:30px 16px; }

/* ── Titluri + marker de brand ── */
h1 { font-size:clamp(21px,3vw,26px); font-weight:800; letter-spacing:-.02em; margin:0 0 18px; line-height:1.2; }
main > h1::after { content:""; display:block; width:46px; height:4px; margin-top:11px;
  background:var(--green); border-radius:3px; }
h2 { font-size:16px; font-weight:700; letter-spacing:-.01em; margin:22px 0 12px; }
hr { border:0; border-top:1px solid var(--line); margin:20px 0; }

/* ── Carduri ── */
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:22px; margin-bottom:18px; }
.card.slim { max-width:430px; margin:9vh auto; padding:30px 28px; }
.card.slim h1 { text-align:left; }
.card.slim h1::after { content:""; display:block; width:46px; height:4px; margin-top:11px; background:var(--green); border-radius:3px; }

/* ── Formulare ── */
label { display:block; margin:12px 0; font-size:13px; font-weight:600; color:var(--ink); }
input, select, textarea { width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:var(--radius-sm);
  font:inherit; font-size:14px; color:var(--ink); background:var(--surface); margin-top:5px;
  transition:border-color .15s ease, box-shadow .15s ease; }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--green);
  box-shadow:0 0 0 3px rgba(0,122,94,.14); }
textarea { min-height:70px; resize:vertical; }
::placeholder { color:#9aa39d; }

/* ── Butoane ── */
button, .btn { display:inline-flex; align-items:center; justify-content:center; gap:7px;
  background:var(--green); color:#fff; border:1px solid var(--green); border-radius:var(--radius-sm);
  padding:10px 18px; font:inherit; font-size:14px; font-weight:700; letter-spacing:-.01em; cursor:pointer;
  margin-top:12px; transition:filter .15s ease, transform .05s ease, box-shadow .15s ease; }
button:hover, .btn:hover { filter:brightness(1.07); text-decoration:none; box-shadow:0 6px 16px rgba(0,122,94,.20); }
button:active { transform:translateY(1px); }
button:focus-visible, a:focus-visible, input:focus-visible { outline:2px solid var(--green-deep); outline-offset:2px; }
.btn-ghost { background:transparent; color:var(--green-deep); border-color:var(--green-line); font-weight:700; box-shadow:none; }
.btn-ghost:hover { background:var(--green-soft); filter:none; box-shadow:none; }
.btn-ghost.sm { margin-top:0; padding:7px 14px; font-size:13px; }
/* butoanele din bara de unelte = secundare */
.tools button { background:transparent; color:var(--green-deep); border-color:var(--green-line); box-shadow:none; margin-top:0; }
.tools button:hover { background:var(--green-soft); filter:none; box-shadow:none; }

/* ── Alerte ── */
.alert { background:var(--danger-soft); border:1px solid #f2c8c2; color:#8a2318; padding:11px 14px;
  border-radius:var(--radius-sm); font-size:13.5px; font-weight:500; margin-bottom:12px; }
.alert.info { background:var(--green-soft); border-color:var(--green-line); color:var(--green-deep); }

/* ── Tabele ── */
table { width:100%; border-collapse:separate; border-spacing:0; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
th, td { padding:11px 14px; border-bottom:1px solid var(--line); text-align:left; font-size:14px; vertical-align:middle; }
th { background:#EEF3F0; font-weight:700; font-size:12px; letter-spacing:.02em; text-transform:uppercase; color:#586159; }
tr:last-child td { border-bottom:0; }
tbody tr:hover td { background:#FAFCFB; }
td.num, th.num { text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
td.num b { color:var(--green-deep); font-weight:800; }
.cat-row td { background:var(--green-soft); color:var(--green-deep); font-weight:700; font-size:12px;
  letter-spacing:.04em; text-transform:uppercase; }
.cat-row td:hover { background:var(--green-soft); }
img.thumb { width:38px; height:38px; object-fit:cover; border-radius:8px; vertical-align:middle; border:1px solid var(--line); display:inline-block; transition:transform .12s ease; }
a:hover img.thumb { transform:scale(1.06); }
.thumb-empty { display:inline-block; width:38px; height:38px; border-radius:8px; background:var(--green-soft); border:1px solid var(--line); vertical-align:middle; }
.prod-link { color:var(--ink); font-weight:600; }
.prod-link:hover { color:var(--green-deep); text-decoration:underline; }
.prod-sku { margin-top:2px; font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; letter-spacing:.01em; }
tr.disabled td { opacity:.5; }
.stoc0 { display:inline-block; margin-left:6px; color:var(--danger); font-size:11px; font-weight:700;
  background:var(--danger-soft); padding:1px 7px; border-radius:6px; text-transform:uppercase; letter-spacing:.03em; }

/* ── Badge-uri status ── */
.badge { display:inline-block; padding:3px 11px; border-radius:999px; font-size:12px; font-weight:700;
  letter-spacing:.01em; background:#EEF1F0; color:#4A5551; }
.badge.placed    { background:#FBF1D8; color:#8A6A11; }
.badge.invoiced  { background:#E1EDFB; color:#1B5A9B; }
.badge.paid      { background:var(--green-soft); color:var(--green-deep); }
.badge.shipped   { background:#ECE6F7; color:#5B3E97; }
.badge.completed { background:var(--green-soft); color:var(--green-deep); }
.badge.cancelled { background:var(--danger-soft); color:#A5271B; }

/* ── Bara de unelte (căutare / acțiuni) ── */
.tools { display:flex; gap:10px; margin-bottom:14px; flex-wrap:wrap; align-items:center; }
.tools input, .tools select { max-width:340px; width:auto; margin-top:0; }

/* ── Sumar comandă (sticky) ── */
.sumar { position:sticky; bottom:0; z-index:10; margin-top:16px; background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border:1px solid var(--line); border-top:3px solid var(--green);
  border-radius:var(--radius) var(--radius) 0 0; box-shadow:0 -8px 24px rgba(35,41,38,.07);
  padding:14px 20px; display:flex; gap:22px; justify-content:flex-end; align-items:center; flex-wrap:wrap; }
.sumar span { color:var(--muted); font-size:13px; font-weight:600; }
.sumar b { color:var(--ink); font-size:16px; font-weight:800; font-variant-numeric:tabular-nums; margin-left:6px; }
.sumar span:last-of-type b { color:var(--green-deep); }
.sumar button { margin-top:0; }

/* ── Utilitare ── */
ul { padding-left:18px; } li { margin:4px 0; }
small { color:var(--muted); }

/* ── Responsive ── */
@media (max-width:720px) {
  .navcards { grid-template-columns:1fr 1fr; }
  .navcard-sub { display:none; }
  th.hide-m, td.hide-m { display:none; }
  .topbar-role { display:none; }
  .card { padding:18px; }
  .sumar { justify-content:space-between; }
}
@media (max-width:440px) { .navcards { grid-template-columns:1fr; } .navcard-sub { display:block; } }

@media (prefers-reduced-motion:reduce) { * { transition:none !important; } }