/* ==========================================================================
   Garage Manager — unified design system
   One theme, shared across every page.
   ========================================================================== */
:root {
  --indigo:#4f46e5; --indigo-dark:#4338ca; --indigo-soft:#eef2ff;
  --green:#059669; --green-soft:#ecfdf5;
  --red:#dc2626;   --red-soft:#fef2f2;
  --amber:#d97706; --amber-soft:#fffbeb;
  --cyan:#0891b2;  --cyan-soft:#ecfeff;
  --slate-900:#0f172a; --slate-700:#334155; --slate-500:#64748b;
  --slate-300:#cbd5e1; --slate-200:#e2e8f0; --slate-100:#f1f5f9; --slate-50:#f8fafc;
  --bg:#f1f5f9; --card:#ffffff; --text:#0f172a; --muted:#64748b;
  --radius:14px; --radius-sm:10px;
  --shadow:0 1px 3px rgba(15,23,42,.08), 0 1px 2px rgba(15,23,42,.04);
  --shadow-lg:0 10px 30px rgba(15,23,42,.10);
  --font:'Segoe UI', system-ui, -apple-system, Roboto, sans-serif;
}
* { box-sizing:border-box; margin:0; padding:0; }
html,body { height:100%; }
body { font-family:var(--font); background:var(--bg); color:var(--text); line-height:1.55; }
a { text-decoration:none; color:inherit; }

/* ---------- Top navigation ---------- */
.nav { background:var(--card); border-bottom:1px solid var(--slate-200); position:sticky; top:0; z-index:50; box-shadow:var(--shadow); }
.nav-inner { max-width:1400px; margin:0 auto; padding:0 1.5rem; display:flex; align-items:center; gap:1.25rem; height:64px; }
.nav-brand { display:flex; align-items:center; gap:.6rem; font-weight:800; font-size:1.15rem; color:var(--indigo); white-space:nowrap; }
.nav-brand i { font-size:1.35rem; }
.nav-links { display:flex; align-items:center; gap:.2rem; flex:1; }
.nav-link { padding:.55rem .8rem; border-radius:var(--radius-sm); font-weight:600; font-size:.9rem; color:var(--slate-700); display:inline-flex; align-items:center; gap:.42rem; transition:.15s; }
.nav-link:hover { background:var(--slate-100); color:var(--indigo); }
.nav-link.active { background:var(--indigo-soft); color:var(--indigo); }
.nav-user { display:flex; align-items:center; gap:.75rem; white-space:nowrap; }
.nav-user .who { text-align:right; line-height:1.2; }
.nav-user .who strong { font-size:.9rem; }
.nav-user .who small { color:var(--muted); font-size:.75rem; text-transform:uppercase; letter-spacing:.5px; }
.nav-toggle { display:none; background:none; border:none; font-size:1.5rem; color:var(--slate-700); cursor:pointer; }

/* ---------- Page shell ---------- */
.wrap { max-width:1400px; margin:0 auto; padding:2rem 1.5rem 3rem; }
.page-head { display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1.75rem; }
.page-head h1 { font-size:1.8rem; font-weight:800; display:flex; align-items:center; gap:.6rem; }
.page-head .sub { color:var(--muted); font-size:.95rem; margin-top:.2rem; }
.head-actions { display:flex; gap:.6rem; flex-wrap:wrap; }

/* ---------- Buttons ---------- */
.btn { padding:.7rem 1.2rem; border:none; border-radius:var(--radius-sm); font-weight:700; font-size:.9rem; cursor:pointer;
  display:inline-flex; align-items:center; gap:.5rem; transition:.15s; font-family:inherit; line-height:1; white-space:nowrap; }
.btn:hover { transform:translateY(-1px); box-shadow:var(--shadow-lg); }
.btn:active { transform:translateY(0); }
.btn-primary { background:var(--indigo); color:#fff; }
.btn-primary:hover { background:var(--indigo-dark); }
.btn-success { background:var(--green); color:#fff; }
.btn-danger  { background:var(--red); color:#fff; }
.btn-amber   { background:var(--amber); color:#fff; }
.btn-ghost   { background:var(--slate-100); color:var(--slate-700); }
.btn-ghost:hover { background:var(--slate-200); }
.btn-sm { padding:.45rem .8rem; font-size:.8rem; }
.btn-block { width:100%; justify-content:center; }

/* ---------- Cards & stats ---------- */
.card { background:var(--card); border:1px solid var(--slate-200); border-radius:var(--radius); box-shadow:var(--shadow); }
.card-pad { padding:1.5rem; }
.card h2 { font-size:1.05rem; font-weight:800; margin-bottom:1rem; display:flex; align-items:center; gap:.5rem; }
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; align-items:start; }
.stat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1.25rem; margin-bottom:1.75rem; }
.stat { background:var(--card); border:1px solid var(--slate-200); border-radius:var(--radius); padding:1.4rem 1.5rem; box-shadow:var(--shadow);
  position:relative; overflow:hidden; }
.stat::before { content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--indigo); }
.stat.green::before { background:var(--green); } .stat.red::before { background:var(--red); }
.stat.amber::before { background:var(--amber); } .stat.cyan::before { background:var(--cyan); }
.stat .label { color:var(--muted); font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.6px; display:flex; align-items:center; gap:.4rem; }
.stat .value { font-size:1.8rem; font-weight:800; margin-top:.35rem; }
.stat.green .value { color:var(--green); } .stat.red .value { color:var(--red); }
.stat.amber .value { color:var(--amber); } .stat.indigo .value { color:var(--indigo); } .stat.cyan .value { color:var(--cyan); }
.stat .value small { font-size:.9rem; color:var(--muted); font-weight:600; }

/* ---------- Alerts ---------- */
.alert { padding:1rem 1.25rem; border-radius:var(--radius-sm); margin-bottom:1.5rem; display:flex; align-items:center; gap:.7rem; font-weight:600; }
.alert-success { background:var(--green-soft); color:#065f46; border-left:4px solid var(--green); }
.alert-danger  { background:var(--red-soft);  color:#991b1b; border-left:4px solid var(--red); }
.alert-warning { background:var(--amber-soft); color:#92400e; border-left:4px solid var(--amber); }

/* ---------- Tables ---------- */
.table-card { background:var(--card); border:1px solid var(--slate-200); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; margin-bottom:1.75rem; }
.table-card .table-head { padding:1.1rem 1.25rem; border-bottom:1px solid var(--slate-200); display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.table-card .table-head h2 { font-size:1.05rem; font-weight:800; display:flex; align-items:center; gap:.5rem; }
.table-scroll { overflow-x:auto; }
table.data { width:100%; border-collapse:collapse; }
table.data th { background:var(--slate-50); padding:.9rem 1.1rem; text-align:left; font-size:.74rem; font-weight:700;
  color:var(--slate-500); text-transform:uppercase; letter-spacing:.6px; white-space:nowrap; border-bottom:1px solid var(--slate-200); }
table.data td { padding:.95rem 1.1rem; border-bottom:1px solid var(--slate-100); vertical-align:middle; }
table.data tr:last-child td { border-bottom:none; }
table.data tbody tr:hover { background:var(--slate-50); }
table.data .empty { text-align:center; color:var(--muted); padding:2.5rem 1rem; }
.t-name { font-weight:700; }
.t-sub { color:var(--muted); font-size:.8rem; }
.t-num { font-variant-numeric:tabular-nums; }
.t-money { font-variant-numeric:tabular-nums; font-weight:700; }
.t-green { color:var(--green); } .t-red { color:var(--red); } .t-amber { color:var(--amber); }
.t-actions { display:flex; gap:.4rem; justify-content:flex-end; }
.plate { font-family:Consolas, monospace; font-weight:800; background:var(--slate-100); border:1px solid var(--slate-300);
  padding:.2rem .55rem; border-radius:6px; font-size:.85rem; white-space:nowrap; display:inline-block; }

/* ---------- Badges ---------- */
.badge { padding:.32rem .75rem; border-radius:50px; font-size:.76rem; font-weight:700; display:inline-flex; align-items:center; gap:.4rem; white-space:nowrap; }
.badge-open      { background:var(--indigo-soft); color:var(--indigo); }
.badge-progress  { background:var(--cyan-soft); color:var(--cyan); }
.badge-waiting   { background:var(--amber-soft); color:var(--amber); }
.badge-done      { background:var(--green-soft); color:var(--green); }
.badge-delivered { background:var(--slate-100); color:var(--slate-700); }
.badge-cancelled { background:var(--red-soft); color:var(--red); }
.badge-paid      { background:var(--green-soft); color:var(--green); }
.badge-unpaid    { background:var(--red-soft); color:var(--red); }
.badge-neutral   { background:var(--slate-100); color:var(--slate-500); }
.badge-lowstock  { background:var(--red-soft); color:var(--red); }

/* ---------- Forms ---------- */
.form-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1rem 1.25rem; }
.form-grid .full { grid-column:1 / -1; }
.field label { display:block; font-weight:700; font-size:.82rem; margin-bottom:.35rem; color:var(--slate-700); }
.field input, .field select, .field textarea {
  width:100%; padding:.65rem .85rem; border:1.5px solid var(--slate-300); border-radius:var(--radius-sm);
  font-family:inherit; font-size:.92rem; background:#fff; transition:.15s; }
.field input:focus, .field select:focus, .field textarea:focus { outline:none; border-color:var(--indigo); box-shadow:0 0 0 3px var(--indigo-soft); }
.field textarea { resize:vertical; min-height:70px; }
.form-actions { margin-top:1.25rem; display:flex; gap:.6rem; }
.filters { display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; }
.filters input, .filters select { padding:.55rem .8rem; border:1.5px solid var(--slate-300); border-radius:var(--radius-sm); font-family:inherit; font-size:.88rem; }
.inline-form { display:inline; }

/* ---------- Customer search dropdown ---------- */
.search-results { position:absolute; top:100%; left:0; right:0; margin-top:4px; background:#fff; border:1.5px solid var(--slate-300);
  border-radius:var(--radius-sm); box-shadow:var(--shadow-lg); z-index:30; max-height:280px; overflow-y:auto; display:none; }
.search-results.open { display:block; }
.search-results .sr-item { padding:.65rem .9rem; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:.75rem;
  border-bottom:1px solid var(--slate-100); }
.search-results .sr-item:last-child { border-bottom:none; }
.search-results .sr-item:hover { background:var(--indigo-soft); }
.search-results .sr-empty { padding:.65rem .9rem; color:var(--muted); }
.search-results .sr-empty a { color:var(--indigo); font-weight:700; }

/* ---------- Login ---------- */
.login-shell { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:1.5rem;
  background:linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #4338ca 100%); }
.login-card { background:#fff; border-radius:20px; box-shadow:0 25px 60px rgba(0,0,0,.35); width:100%; max-width:420px; padding:2.5rem 2.25rem; }
.login-card .logo { text-align:center; margin-bottom:1.75rem; }
.login-card .logo i { font-size:2.6rem; color:var(--indigo); }
.login-card .logo h1 { font-size:1.5rem; font-weight:800; margin-top:.6rem; }
.login-card .logo p { color:var(--muted); font-size:.9rem; }

/* ---------- Detail / definition lists ---------- */
.detail-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:1rem; }
.detail-grid .item .k { font-size:.74rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; }
.detail-grid .item .v { font-weight:700; margin-top:.15rem; }

/* ---------- Invoice / print ---------- */
.invoice-doc { background:#fff; border:1px solid var(--slate-200); border-radius:var(--radius); box-shadow:var(--shadow); padding:2.5rem; max-width:900px; margin:0 auto 1.75rem; }
.invoice-top { display:flex; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; margin-bottom:2rem; }
.invoice-top .biz h2 { font-size:1.4rem; font-weight:800; color:var(--indigo); }
.invoice-top .meta { text-align:right; }
.invoice-top .meta .no { font-size:1.25rem; font-weight:800; }
.totals-box { margin-left:auto; width:280px; margin-top:1rem; }
.totals-box .row { display:flex; justify-content:space-between; padding:.4rem 0; font-variant-numeric:tabular-nums; }
.totals-box .row.grand { border-top:2px solid var(--slate-900); font-weight:800; font-size:1.1rem; padding-top:.6rem; margin-top:.3rem; }
@media print {
  .no-print { display:none !important; }
  body { background:#fff; }
  .wrap { padding:0; max-width:none; }
  .invoice-doc { border:none; box-shadow:none; padding:0; max-width:none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .nav-toggle { display:block; margin-left:auto; }
  .nav-links { display:none; position:absolute; top:64px; left:0; right:0; background:var(--card);
    flex-direction:column; align-items:stretch; padding:.75rem 1rem; border-bottom:1px solid var(--slate-200); box-shadow:var(--shadow-lg); }
  .nav-links.open { display:flex; }
  .nav-user .who { display:none; }
  .grid-2 { grid-template-columns:1fr; }
}