/* ==========================================================================
   InventoryGo — shared design tokens & base components
   Flat, quiet, business-tool aesthetic. No gradients, no glass, no shadows
   beyond a hairline. Light and dark themes only.
   ========================================================================== */

:root{
  --bg: #F5F6F5;
  --surface: #FFFFFF;
  --surface-alt: #ECEEED;
  --border: #DDE1DE;
  --border-strong: #C7CCC8;
  --text: #1B211D;
  --text-muted: #666F69;
  --text-faint: #93998F;

  --accent: #1F4B43;
  --accent-strong: #163832;
  --accent-contrast: #FFFFFF;
  --accent-soft: #E4ECE9;

  --good: #2E8B4F;
  --good-bg: #E7F3EA;
  --warn: #C58A1E;
  --warn-bg: #FBF1DD;
  --bad: #C4453E;
  --bad-bg: #FBE9E7;
  --info-bg: #EDEFEE;

  --radius-sm: 5px;
  --radius: 8px;
  --radius-lg: 12px;

  --shadow: 0 1px 2px rgba(20, 25, 22, 0.06);
  --shadow-pop: 0 6px 20px rgba(15, 20, 17, 0.14);

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  color-scheme: light;
}

[data-theme="dark"]{
  --bg: #14181A;
  --surface: #1C2124;
  --surface-alt: #23282B;
  --border: #2C3235;
  --border-strong: #3A4145;
  --text: #ECEEED;
  --text-muted: #A2ACA8;
  --text-faint: #6C7671;

  --accent: #4CAF82;
  --accent-strong: #6FC49A;
  --accent-contrast: #0E1512;
  --accent-soft: #1E2E29;

  --good: #4CAF82;
  --good-bg: #1B2C21;
  --warn: #E2AC4E;
  --warn-bg: #302A18;
  --bad: #E17067;
  --bad-bg: #322020;
  --info-bg: #23282B;

  --shadow: 0 1px 2px rgba(0,0,0,0.35);
  --shadow-pop: 0 10px 30px rgba(0,0,0,0.45);

  color-scheme: dark;
}

@media (prefers-color-scheme: dark){
  :root[data-theme="system"]{
    --bg: #14181A;
    --surface: #1C2124;
    --surface-alt: #23282B;
    --border: #2C3235;
    --border-strong: #3A4145;
    --text: #ECEEED;
    --text-muted: #A2ACA8;
    --text-faint: #6C7671;

    --accent: #4CAF82;
    --accent-strong: #6FC49A;
    --accent-contrast: #0E1512;
    --accent-soft: #1E2E29;

    --good: #4CAF82;
    --good-bg: #1B2C21;
    --warn: #E2AC4E;
    --warn-bg: #302A18;
    --bad: #E17067;
    --bad-bg: #322020;
    --info-bg: #23282B;

    color-scheme: dark;
  }
}

/* ---------- accent colour presets (Settings → Branding) ---------- */
[data-accent="indigo"]{ --accent: #3E4B8C; --accent-strong: #2E3A70; --accent-soft: #E7E9F5; }
[data-accent="terracotta"]{ --accent: #B5533C; --accent-strong: #953F2C; --accent-soft: #F6E7E2; }
[data-accent="slate"]{ --accent: #3B6E82; --accent-strong: #2C5566; --accent-soft: #E3EDF0; }
[data-accent="plum"]{ --accent: #6B3E6E; --accent-strong: #522F54; --accent-soft: #EEE4EF; }
[data-accent="amber"]{ --accent: #A6741A; --accent-strong: #815A13; --accent-soft: #F5EBD8; }

[data-theme="dark"][data-accent="indigo"], :root[data-theme="system"][data-accent="indigo"]{ --accent: #7C8AE0; --accent-strong: #97A3EA; --accent-soft: #232748; }
[data-theme="dark"][data-accent="terracotta"], :root[data-theme="system"][data-accent="terracotta"]{ --accent: #E08265; --accent-strong: #E89A82; --accent-soft: #34211B; }
[data-theme="dark"][data-accent="slate"], :root[data-theme="system"][data-accent="slate"]{ --accent: #6FAEC4; --accent-strong: #8CC0D3; --accent-soft: #1D2E33; }
[data-theme="dark"][data-accent="plum"], :root[data-theme="system"][data-accent="plum"]{ --accent: #C084C5; --accent-strong: #CE9BD0; --accent-soft: #2C2130; }
[data-theme="dark"][data-accent="amber"], :root[data-theme="system"][data-accent="amber"]{ --accent: #E0AC55; --accent-strong: #E8BD75; --accent-soft: #33290F; }

*, *::before, *::after{ box-sizing: border-box; }
html, body{ height: 100%; }
html{ scrollbar-gutter: stable; overflow-y: scroll; }
body{
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1,h2,h3,h4{ margin: 0; font-weight: 650; letter-spacing: -0.01em; }
p{ margin: 0; }
ul{ margin: 0; padding: 0; list-style: none; }
a{ color: inherit; }
button{ font-family: inherit; }
img{ max-width: 100%; display: block; }

:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.hidden{ display: none !important; }
.sr-only{
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---------- layout shell ---------- */
.app-shell{ min-height: 100%; display: flex; flex-direction: column; }
.container{ max-width: 1180px; margin: 0 auto; padding: 0 20px; width: 100%; }

.topbar{
  position: sticky; top: 0; z-index: 30;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.topbar-inner{
  display: flex; align-items: center; gap: 14px;
  padding: 14px 20px;
  max-width: 1180px; margin: 0 auto; width: 100%;
}
.brand{
  display: flex; align-items: center; gap: 9px;
  font-weight: 700; font-size: 17px; white-space: nowrap;
  text-decoration: none;
}
.brand-mark{
  width: 26px; height: 26px; border-radius: 7px;
  background: var(--accent); color: var(--accent-contrast);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; flex: none; overflow: hidden;
}
.topbar-spacer{ flex: 1; }
.topbar-actions{ display: flex; align-items: center; gap: 8px; }

.icon{ width: 18px; height: 18px; display: block; }
.icon-sm{ width: 15px; height: 15px; }

/* ---------- buttons ---------- */
.btn{
  appearance: none; border: 1px solid var(--border-strong);
  background: var(--surface); color: var(--text);
  padding: 9px 14px; border-radius: var(--radius);
  font-size: 14px; font-weight: 560; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  line-height: 1.2; white-space: nowrap;
  transition: background 0.12s ease, border-color 0.12s ease, transform 0.05s ease;
}
.btn:hover{ background: var(--surface-alt); }
.btn:active{ transform: translateY(1px); }
.btn-primary{
  background: var(--accent); border-color: var(--accent); color: var(--accent-contrast);
}
.btn-primary:hover{ background: var(--accent-strong); border-color: var(--accent-strong); }
.btn-ghost{ background: transparent; border-color: transparent; }
.btn-ghost:hover{ background: var(--surface-alt); }
.btn-danger{ color: var(--bad); border-color: var(--border-strong); }
.btn-danger:hover{ background: var(--bad-bg); border-color: var(--bad); }
.btn-sm{ padding: 6px 10px; font-size: 13px; border-radius: var(--radius-sm); }
.btn-icon{
  width: 34px; height: 34px; padding: 0; border-radius: var(--radius);
  flex: none;
}
.btn-block{ width: 100%; }
.btn[disabled]{ opacity: 0.45; cursor: not-allowed; }

/* ---------- tooltip-on-hover buttons (desktop) / labelled buttons (touch) ----------
   Use data-tip="Label" + class="tip-btn". The label text itself lives in a
   <span class="tip-label"> inside the button — hidden by default and shown by
   each page's own responsive rules on small/touch screens instead of the tooltip. */
.tip-btn{ position: relative; }
.tip-btn::after{
  content: attr(data-tip); position: absolute; bottom: calc(100% + 7px); left: 50%;
  transform: translateX(-50%); background: var(--text); color: var(--bg);
  font-size: 11.5px; font-weight: 600; padding: 5px 9px; border-radius: 6px;
  white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.12s ease;
  z-index: 15;
}
.tip-btn:hover::after, .tip-btn:focus-visible::after{ opacity: 1; }
@media (hover: none){ .tip-btn::after{ display: none; } }
.tip-label{ display: none; }

/* ---------- form controls ---------- */
label{ font-size: 13px; font-weight: 620; color: var(--text-muted); display: block; margin-bottom: 6px; }
.field{ margin-bottom: 16px; }
.field-row{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.field-row3{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.field-hint{ font-size: 12px; color: var(--text-faint); margin-top: 5px; }

input[type="text"], input[type="number"], input[type="email"], input[type="tel"],
input[type="search"], input[type="url"], select, textarea{
  width: 100%; background: var(--surface); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  padding: 9px 11px; font-size: 14px; font-family: inherit;
}
textarea{ resize: vertical; min-height: 76px; }
select{ cursor: pointer; }
input::placeholder, textarea::placeholder{ color: var(--text-faint); }
input:focus, select:focus, textarea:focus{ border-color: var(--accent); }

.input-suffix-group{ display: flex; align-items: stretch; }
.input-suffix-group input{ border-radius: var(--radius) 0 0 var(--radius); border-right: none; }
.input-suffix{
  display: flex; align-items: center; padding: 0 10px;
  border: 1px solid var(--border-strong); border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--surface-alt); color: var(--text-muted); font-size: 13px; white-space: nowrap;
}

.checkline{ display: flex; align-items: center; gap: 9px; margin-bottom: 0; cursor: pointer; }
.checkline input[type="checkbox"]{ width: 17px; height: 17px; accent-color: var(--accent); cursor: pointer; }
.checkline span{ font-size: 14px; font-weight: 500; color: var(--text); }

.toggle-switch{ position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.toggle-switch input{ position: absolute; opacity: 0; width: 40px; height: 22px; margin: 0; cursor: pointer; }
.toggle-track{
  width: 40px; height: 22px; border-radius: 999px; background: var(--border-strong);
  position: relative; transition: background 0.15s ease; flex: none;
}
.toggle-track::after{
  content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
  border-radius: 50%; background: var(--surface); transition: transform 0.15s ease;
  box-shadow: var(--shadow);
}
.toggle-switch input:checked + .toggle-track{ background: var(--accent); }
.toggle-switch input:checked + .toggle-track::after{ transform: translateX(18px); }
.toggle-switch input:focus-visible + .toggle-track{ outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- pills / badges ---------- */
.pill{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 640;
  white-space: nowrap;
}
.pill-dot{ width: 7px; height: 7px; border-radius: 50%; flex: none; }
.pill-good{ background: var(--good-bg); color: var(--good); }
.pill-warn{ background: var(--warn-bg); color: var(--warn); }
.pill-bad{ background: var(--bad-bg); color: var(--bad); }
.pill-neutral{ background: var(--info-bg); color: var(--text-muted); }

.tag{
  display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 6px;
  font-size: 12px; font-weight: 560; background: var(--surface-alt); color: var(--text-muted);
  border: 1px solid var(--border);
}

/* ---------- section / card ---------- */
.card{
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 18px;
}
.section-title{
  font-size: 15px; font-weight: 680; margin-bottom: 4px;
}
.section-sub{ font-size: 13px; color: var(--text-muted); margin-bottom: 16px; }

/* ---------- modal ---------- */
.modal-overlay{
  position: fixed; inset: 0; background: rgba(10, 14, 12, 0.42);
  display: flex; align-items: flex-end; justify-content: center;
  z-index: 100; padding: 0;
  animation: fadeIn 0.14s ease;
}
@media (min-width: 640px){
  .modal-overlay{ align-items: center; padding: 20px; }
}
.modal{
  background: var(--surface); width: 100%; max-width: 480px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  border: 1px solid var(--border); border-bottom: none;
  max-height: 90vh; overflow-y: auto;
  box-shadow: var(--shadow-pop);
  animation: slideUp 0.16s ease;
}
@media (min-width: 640px){
  .modal{ border-radius: var(--radius-lg); border-bottom: 1px solid var(--border); }
}
.modal-lg{ max-width: 640px; }
@keyframes fadeIn{ from{ opacity: 0; } to{ opacity: 1; } }
@keyframes slideUp{ from{ transform: translateY(16px); opacity: 0.6; } to{ transform: translateY(0); opacity: 1; } }

.modal-head{
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; border-bottom: 1px solid var(--border);
  position: sticky; top: 0; background: var(--surface); z-index: 2;
}
.modal-head h2{ font-size: 16px; }
.modal-body{ padding: 18px; }
.modal-foot{
  display: flex; gap: 10px; justify-content: flex-end;
  padding: 14px 18px; border-top: 1px solid var(--border);
  position: sticky; bottom: 0; background: var(--surface);
}

/* ---------- toast ---------- */
.toast-stack{
  position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%);
  z-index: 200; display: flex; flex-direction: column; gap: 8px; align-items: center;
  width: 100%; padding: 0 16px;
}
.toast{
  background: var(--text); color: var(--bg);
  padding: 10px 16px; border-radius: var(--radius);
  font-size: 13.5px; font-weight: 560; box-shadow: var(--shadow-pop);
  animation: toastIn 0.18s ease; max-width: 92vw;
}
[data-theme="dark"] .toast{ background: var(--surface-alt); color: var(--text); border: 1px solid var(--border-strong); }
@keyframes toastIn{ from{ opacity: 0; transform: translateY(6px); } to{ opacity: 1; transform: translateY(0); } }

/* ---------- empty state ---------- */
.empty-state{
  padding: 60px 20px; text-align: center; color: var(--text-muted);
}
.empty-state h3{ color: var(--text); font-size: 16px; margin-bottom: 6px; }
.empty-state p{ font-size: 13.5px; margin-bottom: 16px; }

/* ---------- theme toggle button ---------- */
.theme-toggle .icon-moon{ display: none; }
[data-theme="dark"] .theme-toggle .icon-sun{ display: none; }
[data-theme="dark"] .theme-toggle .icon-moon{ display: block; }

/* ---------- misc utility ---------- */
.flex{ display: flex; }
.flex-col{ display: flex; flex-direction: column; }
.items-center{ align-items: center; }
.justify-between{ justify-content: space-between; }
.gap-6{ gap: 6px; } .gap-8{ gap: 8px; } .gap-10{ gap: 10px; } .gap-14{ gap: 14px; }
.muted{ color: var(--text-muted); }
.faint{ color: var(--text-faint); }
.mono{ font-family: var(--font-mono); }
.text-right{ text-align: right; }
.divider{ height: 1px; background: var(--border); border: none; margin: 16px 0; }

::-webkit-scrollbar{ width: 10px; height: 10px; }
::-webkit-scrollbar-thumb{ background: var(--border-strong); border-radius: 8px; }
::-webkit-scrollbar-track{ background: transparent; }