/* =================================================================
   Van Invoicing – Design System v2
   Consistent look: header/nav, cards, tables, forms, buttons, badges
   Light/Dark themes via html[data-theme].
   ================================================================= */

/* ---------- Color tokens: DARK (default) ---------- */
:root,
html[data-theme="dark"]{
  --bg:#0b0f1a;
  --panel:#121826;
  --panel-2:#0f1422;
  --card:#0f1524;

  --text:#e5eefc;
  --muted:#9aa6bd;

  --link:#89b4ff;
  --link-hover:#b2ccff;

  --accent:#6ea8fe;
  --ok:#34d399;
  --warn:#fbbf24;
  --danger:#ff6b6b;

  --border:#22324b;
  --shadow: 0 10px 24px rgba(0,0,0,.28);
  --table-hover:#0d1320;

  --btn-fg:#e5eefc;
  --btn-bg:#1a2337;
  --btn-border:#2b3f60;

  --btn-primary-fg:#eaf2ff;
  --btn-primary-bg:#1e293b;
  --btn-primary-border:#2a4672;

  --btn-ghost-fg:#e5eefc;
  --btn-ghost-bg:transparent;
  --btn-ghost-border:#334760;

  --badge-bg:#172036;
}

/* ---------- Color tokens: LIGHT ---------- */
html[data-theme="light"]{
  --bg:#f6f8fb;
  --panel:#ffffff;
  --panel-2:#eef2f7;
  --card:#ffffff;

  --text:#0d1626;
  --muted:#5b6b81;

  --link:#1d4ed8;
  --link-hover:#113ea9;

  --accent:#1e88ff;
  --ok:#16a34a;
  --warn:#d97706;
  --danger:#dc2626;

  --border:#d8e0ea;
  --shadow: 0 10px 22px rgba(10, 38, 71, .08);
  --table-hover:#f5f7fb;

  --btn-fg:#0d1626;
  --btn-bg:#eef2f7;
  --btn-border:#ccd7e7;

  --btn-primary-fg:#ffffff;
  --btn-primary-bg:#2563eb;
  --btn-primary-border:#1e4ed1;

  --btn-ghost-fg:#0d1626;
  --btn-ghost-bg:transparent;
  --btn-ghost-border:#d8e0ea;

  --badge-bg:#eef2f7;
}

/* ---------- Base reset & typography ---------- */
*{ box-sizing:border-box }
html,body{ height:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font: 14px/1.55 system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
}

/* Links */
a, a:visited{ color:var(--link); text-decoration:none; }
a:hover, a:focus{ color:var(--link-hover); text-decoration:underline; }

/* Layout */
.container{ max-width:1120px; margin:0 auto; padding:20px; }
.card{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:16px;
  padding:16px;
  margin:16px 0;
  box-shadow: var(--shadow);
}
.card h3{ margin:0 0 10px 0; }

.grid{ display:grid; gap:16px; }
.grid-2{ grid-template-columns:1fr 1fr; }
.grid-3{ grid-template-columns:repeat(3,1fr); }
@media (max-width:1000px){ .grid-3{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .grid-2,.grid-3{ grid-template-columns:1fr; } }

/* Header / Topbar */
.topbar{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 16px;
  background:var(--panel-2);
  border-bottom:1px solid var(--border);
  backdrop-filter:saturate(140%) blur(6px);
}
.topbar .brand{ display:flex; align-items:center; gap:10px; color:var(--text); font-weight:600; }
.topbar .brand img{ width:auto; height:32px; border-radius:8px; }
.topbar nav{ display:flex; gap:6px; flex-wrap:wrap; }
.topbar nav a{
  color:var(--text);
  opacity:.9;
  padding:8px 10px;
  border-radius:10px;
}
.topbar nav a:hover{
  background:var(--panel);
  text-decoration:none;
  opacity:1;
}

/* Theme toggle (pill) */
.theme-switch{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius:999px;
  border:1px solid var(--btn-border);
  background:var(--btn-bg); color:var(--btn-fg);
  font-size:12px;
}
.theme-switch .dot{ width:8px; height:8px; border-radius:50%; background:var(--warn); }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px;
  padding:10px 14px;
  border-radius:12px;
  border:1px solid var(--btn-border);
  background:var(--btn-bg);
  color:var(--btn-fg);
  cursor:pointer;
  transition:transform .02s ease, filter .15s ease;
  text-decoration:none;
}
.btn:hover{ text-decoration:none; filter:brightness(1.03); }
.btn:active{ transform: translateY(1px); }
.btn.small{ padding:6px 10px; font-size:12px; }
.btn.xs{ padding:4px 8px; font-size:12px; height:28px; }
.btn.primary{ background:var(--btn-primary-bg); color:var(--btn-primary-fg); border-color:var(--btn-primary-border); }
.btn.ok{ background:rgba(22,163,74,.12); color:var(--ok); border-color:rgba(22,163,74,.35); }
.btn.danger{ background:rgba(220,38,38,.1); color:var(--danger); border-color:rgba(220,38,38,.35); }
.btn.ghost{ background:var(--btn-ghost-bg); color:var(--btn-ghost-fg); border-color:var(--btn-ghost-border); }
.actions{ display:flex; gap:8px; flex-wrap:wrap; }

/* Focus ring (keyboard accessibility) */
.btn:focus-visible, a:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline: 2px solid color-mix(in oklab, var(--accent) 60%, transparent);
  outline-offset: 2px;
}

/* Forms */
input,select,textarea{
  width:100%;
  max-width:100%;
  background:var(--panel);
  border:1px solid var(--border);
  color:var(--text);
  padding:10px 12px;
  border-radius:10px;
}
input[type=number]{ text-align:right; }
input:focus, select:focus, textarea:focus{
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 2px color-mix(in oklab, var(--accent) 30%, transparent);
}

/* Tables */
.table-scroll{ width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.table-scroll > table{ min-width: 940px; }
table{ width:100%; border-collapse:collapse; background:var(--panel); border-radius:12px; overflow:hidden; }
th, td{ padding:10px 12px; border-bottom:1px solid var(--border); text-align:left; font-size:14px; }
th{ background:var(--panel-2); font-weight:600; }
tbody tr:hover{ background:var(--table-hover); }

/* Action button bar inside table cells */
.table-actions, .btnbar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
}
.table-actions form{ display:inline-flex; margin:0; }
.table-actions .btn, .btnbar .btn{
  height:34px;
  padding:6px 12px;
  border-radius:12px;
  line-height:1;
}
@media (max-width:720px){
  .table-actions, .btnbar{ gap:6px; }
  .table-actions .btn, .btnbar .btn{ height:32px; padding:6px 10px; }
}

/* Helper text / key-value rows */
.small{ font-size:12px; color:var(--muted); }
.muted{ color:var(--muted); }
.kv{ display:grid; grid-template-columns:160px 1fr; gap:10px; margin:6px 0; }
@media (max-width:600px){ .kv{ grid-template-columns:1fr; } }
hr.sep{ border:0; height:1px; background:var(--border); margin:14px 0; }

/* Badges / Status */
.badge{
  display:inline-block; padding:4px 8px; font-size:12px;
  border-radius:999px; background:var(--badge-bg); border:1px solid var(--border);
}
.badge.Pending{ color:var(--warn); }
.badge.Partial{ color:var(--accent); }
.badge.Complete{ color:var(--ok); }
.badge.ToPOS{ color:#38bdf8; }

/* Alerts */
.alert{ padding:12px 14px; border-radius:10px; margin:10px 0; background:var(--panel); border:1px solid var(--border); }
.alert.error{
  background: color-mix(in oklab, var(--danger) 8%, var(--panel));
  border-color: color-mix(in oklab, var(--danger) 38%, var(--border));
}

/* Footer */
.footer{
  margin-top:40px; padding:20px;
  border-top:1px solid var(--border);
  text-align:center; color:var(--muted);
  background:var(--panel-2);
}

/* Inputs – remove number spinners */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
input[type=number]{ -moz-appearance:textfield; appearance:textfield; }

/* Print clean-up (minimal – page-level may add more) */
@media print {
  .topbar, .print-hide, .actions .btn, a[href]:after { display:none !important; }
  body { background:#fff; color:#000; }
  .card { box-shadow:none; border:0; }
  table { background:#fff; }
}

/* ============================================================
   Button color fix (override old app.css dark buttons)
   Keep this block at the very end of theme.css
   ============================================================ */

/* Force tokens for all buttons (wins over app.css) */
body .btn{
  background: var(--btn-bg) !important;
  color: var(--btn-fg) !important;
  border-color: var(--btn-border) !important;
  box-shadow: none;
}
body .btn:hover{ filter: brightness(1.04); text-decoration: none; }
body .btn:active{ transform: translateY(1px); }

/* Variants */
body .btn.primary{
  background: var(--btn-primary-bg) !important;
  color: var(--btn-primary-fg) !important;
  border-color: var(--btn-primary-border) !important;
}
body .btn.ghost{
  background: var(--btn-ghost-bg) !important;
  color: var(--btn-ghost-fg) !important;
  border-color: var(--btn-ghost-border) !important;
}
body .btn.ok{
  background: color-mix(in oklab, var(--ok) 12%, transparent) !important;
  color: var(--ok) !important;
  border-color: color-mix(in oklab, var(--ok) 35%, transparent) !important;
}
body .btn.danger{
  background: color-mix(in oklab, var(--danger) 12%, transparent) !important;
  color: var(--danger) !important;
  border-color: color-mix(in oklab, var(--danger) 35%, transparent) !important;
}

/* Table action pills – match theme better */
html[data-theme="light"] body td .btn:not(.primary):not(.danger):not(.ok){
  background: #eef2f7 !important;
  border-color: #ccd7e7 !important;
  color: #0d1626 !important;
}
html[data-theme="dark"] body td .btn:not(.primary):not(.danger):not(.ok){
  background: #1a2337 !important;
  border-color: #2b3f60 !important;
  color: #e5eefc !important;
}