/*
 * Marc's Inventory – Lightweight Design System (under 16KB)
 * - Mobile-first, clean UI
 * - 8px spacing scale
 * - Minimal utilities, semantic classes for readability
 */

/* ===== Design Tokens ===== */
:root{
  /* Colors */
  --color-primary:#2563eb;       /* blue-600 */
  --color-primary-600:#1d4ed8;   /* hover */
  --color-bg:#f8fafc;            /* page background */
  --color-surface:#ffffff;       /* cards, panels */
  --color-text:#0f172a;          /* slate-900 */
  --color-muted:#475569;         /* slate-600 */
  --color-border:#e2e8f0;        /* slate-200 */
  --color-success:#10b981;
  --color-warning:#f59e0b;
  --color-danger:#ef4444;

  /* Radii & Shadows */
  --radius:8px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.06);
  --shadow-md:0 2px 8px rgba(15,23,42,.08);

  /* Spacing (8px scale) */
  --space-0:0;
  --space-1:8px;
  --space-2:16px;
  --space-3:24px;
  --space-4:32px;
  --space-5:48px;
}

/* ===== Base ===== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--color-bg);
  color:var(--color-text);
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI",
               Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  line-height:1.5;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--color-primary); text-decoration:none}
a:hover{text-decoration:underline}

/* ===== Layout Helpers ===== */
.container{max-width:1100px; margin:0 auto; padding:0 var(--space-2)}
.section{padding:var(--space-5) 0}
.mt-1{margin-top:var(--space-1)} .mt-2{margin-top:var(--space-2)}
.mt-3{margin-top:var(--space-3)} .mt-4{margin-top:var(--space-4)}
.mb-2{margin-bottom:var(--space-2)} .mb-3{margin-bottom:var(--space-3)}
.mb-4{margin-bottom:var(--space-4)}
.text-muted{color:var(--color-muted)}
.center{text-align:center}

/* ===== Navigation (responsive with hamburger) ===== */
.navbar{
  position:sticky; top:0; z-index:20;
  background:var(--color-surface);
  border-bottom:1px solid var(--color-border);
  box-shadow:var(--shadow-sm);
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  height:60px; gap:var(--space-2);
}
.brand{
  font-weight:700; font-size:18px; color:var(--color-primary);
  letter-spacing:.2px;
}
.nav-links{display:flex; gap:var(--space-2)}
.nav-links a{
  color:var(--color-text); padding:.5rem .75rem; border-radius:6px;
}
.nav-links a:hover{background:#f1f5f9}
.nav-burger{
  display:none; background:none; border:1px solid var(--color-border);
  padding:.4rem .55rem; border-radius:6px; font-size:18px; line-height:1;
}
@media (max-width: 768px){
  .nav-burger{display:inline-block}
  .nav-links{
    display:none; flex-direction:column; gap:0; margin-top:var(--space-2);
    border-top:1px solid var(--color-border); padding-top:var(--space-2);
  }
  .navbar.open .nav-links{display:flex}
}

/* ===== Hero ===== */
.hero{
  background:linear-gradient(135deg, #ebf2ff, #f8fafc);
  border-bottom:1px solid var(--color-border);
}
.hero-wrap{
  display:grid; gap:var(--space-3);
  grid-template-columns:1fr;
  align-items:center; min-height:48vh;
}
.hero h1{margin:0; font-size:clamp(28px, 5vw, 42px)}
.hero p{margin:0; color:var(--color-muted); font-size:clamp(16px, 2.8vw, 18px)}
.btn{
  display:inline-block; border:none; cursor:pointer;
  padding:.75rem 1.25rem; border-radius:8px; font-weight:600;
  text-decoration:none; line-height:1;
}
.btn-primary{background:var(--color-primary); color:#fff}
.btn-primary:hover{background:var(--color-primary-600)}
.btn-secondary{
  background:#e2e8f0; color:#0f172a;
}
.btn-secondary:hover{background:#cbd5e1}

/* ===== Features Grid ===== */
.grid-3{
  display:grid; gap:var(--space-2);
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
}
.card{
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius);
  padding:var(--space-2);
  box-shadow:var(--shadow-sm);
}
.card h3{margin:.25rem 0 var(--space-1)}
.card p{margin:0}

/* ===== Admin Page ===== */
.admin { max-width:900px; margin:0 auto; padding:var(--space-3) var(--space-2) }
.panel{
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius);
  padding:var(--space-2);
  box-shadow:var(--shadow-sm);
}
.panel+.panel{margin-top:var(--space-3)}

.forms label{display:block; margin:.25rem 0 .25rem}
.input, .select, .textarea{
  width:100%; padding:.6rem .7rem; font-size:14px;
  border:1px solid var(--color-border); border-radius:6px; background:#fff;
}
.input:focus, .select:focus, .textarea:focus{
  outline:none; border-color:var(--color-primary);
  box-shadow:0 0 0 3px rgba(37, 99, 235, .15);
}
.actions{display:flex; gap:var(--space-2); flex-wrap:wrap}
.helper{font-size:12px; color:var(--color-muted)}

/* Dashboard cards */
.cards{
  display:grid; gap:var(--space-2);
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
}
.metric{
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius);
  padding:var(--space-2);
  box-shadow:var(--shadow-sm);
}
.metric .label{color:var(--color-muted); font-size:13px}
.metric .value{font-size:24px; font-weight:700; margin-top:.25rem}

/* Tables */
.table-wrap{overflow:auto; border:1px solid var(--color-border); border-radius:var(--radius)}
.table{width:100%; border-collapse:collapse; min-width:560px}
.table th, .table td{padding:10px 12px; border-bottom:1px solid var(--color-border)}
.table thead th{
  position:sticky; top:0; background:var(--color-bg); z-index:1;
  font-weight:700;
}
.table tbody tr:nth-child(odd){background:#f8fafc}

/* Footer */
.footer{padding:var(--space-3) 0; color:var(--color-muted)}

/* Docs */
.docs{max-width:900px; margin:0 auto; padding:var(--space-3) var(--space-2)}
.docs .toc{border-left:3px solid var(--color-border); padding-left:var(--space-2); margin:var(--space-2) 0}

/* Small utilities */
.badge{display:inline-block; padding:.2rem .5rem; border-radius:999px; background:#eef2ff; color:#3730a3; font-size:12px}
.result{
  margin-top:.5rem; padding:.6rem .7rem; background:#eff6ff; border:1px solid #bfdbfe; border-radius:6px;
  display:none; white-space:pre-wrap
}