/* =================================================================
   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;
}

/* ================= Compact grouped desktop navigation ================= */
nav#mainNav{display:none}
.desktop-main-nav{
  display:flex;
  flex:1 1 auto;
  align-items:center;
  justify-content:flex-end;
  gap:4px;
  flex-wrap:nowrap!important;
  min-width:0;
  margin-left:18px;
  white-space:nowrap;
}
.desktop-main-nav>details{position:relative}
.desktop-main-nav>details>summary,
.desktop-main-nav>.desktop-nav-link{
  display:flex;
  align-items:center;
  min-height:38px;
  padding:8px 10px;
  border:1px solid transparent;
  border-radius:10px;
  color:var(--text);
  font-size:13px;
  font-weight:650;
  line-height:1;
  opacity:.9;
  cursor:pointer;
  list-style:none;
  user-select:none;
  transition:background .15s ease,border-color .15s ease,color .15s ease,transform .15s ease;
}
.desktop-main-nav>details>summary::-webkit-details-marker{display:none}
.desktop-main-nav>details>summary:hover,
.desktop-main-nav>details>summary:focus-visible,
.desktop-main-nav>.desktop-nav-link:hover,
.desktop-main-nav>.desktop-nav-link:focus-visible,
.desktop-main-nav>details[open]>summary{
  background:var(--panel);
  border-color:var(--border);
  color:var(--text);
  text-decoration:none;
  opacity:1;
}
.desktop-main-nav>details.active>summary,
.desktop-main-nav>.desktop-nav-link.active{
  background:color-mix(in srgb,var(--accent) 14%,var(--panel));
  border-color:color-mix(in srgb,var(--accent) 38%,var(--border));
  color:var(--link);
  opacity:1;
}
.desktop-nav-caret{margin-left:6px;font-size:10px;transition:transform .16s ease}
.desktop-nav-group[open] .desktop-nav-caret{transform:rotate(180deg)}
.desktop-nav-menu{
  position:absolute;
  top:calc(100% + 7px);
  left:0;
  z-index:650;
  width:300px;
  max-width:min(350px,calc(100vw - 24px));
  padding:8px;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--panel);
  box-shadow:0 18px 52px rgba(3,12,28,.24);
  white-space:normal;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(-5px);
  transition:opacity .14s ease,transform .14s ease,visibility .14s ease;
}
.desktop-nav-menu::before{content:"";position:absolute;left:0;right:0;top:-8px;height:8px}
.desktop-nav-wide .desktop-nav-menu{width:330px}
.desktop-nav-end .desktop-nav-menu{left:auto;right:0}
.desktop-nav-group:hover>.desktop-nav-menu,
.desktop-nav-group:focus-within>.desktop-nav-menu,
.desktop-nav-group[open]>.desktop-nav-menu{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0);
}
.topbar .desktop-nav-menu a,
.desktop-nav-menu .desktop-theme-toggle{
  display:flex;
  align-items:center;
  width:100%;
  min-height:54px;
  gap:10px;
  margin:0;
  padding:9px 10px;
  border:1px solid transparent;
  border-radius:10px;
  background:transparent;
  color:var(--text);
  text-align:left;
  text-decoration:none;
  opacity:1;
  cursor:pointer;
}
.topbar .desktop-nav-menu a::before,
.desktop-nav-menu-icon{
  display:grid;
  place-items:center;
  flex:0 0 32px;
  width:32px;
  height:32px;
  border-radius:9px;
  background:var(--panel-2);
  color:var(--link);
  content:attr(data-icon);
  font-size:16px;
}
.topbar .desktop-nav-menu a>span,
.desktop-nav-menu .desktop-theme-toggle>span:last-child,
.desktop-nav-account-head>span:last-child{display:flex;min-width:0;flex-direction:column;gap:1px}
.topbar .desktop-nav-menu a strong,
.desktop-nav-menu .desktop-theme-toggle strong,
.desktop-nav-account-head strong{font-size:13px;font-weight:750;line-height:1.25;color:var(--text)}
.topbar .desktop-nav-menu a small,
.desktop-nav-menu .desktop-theme-toggle small,
.desktop-nav-account-head small{font-size:11px;line-height:1.3;color:var(--muted)}
.topbar .desktop-nav-menu a:hover,
.topbar .desktop-nav-menu a:focus-visible,
.desktop-nav-menu .desktop-theme-toggle:hover,
.desktop-nav-menu .desktop-theme-toggle:focus-visible{
  border-color:var(--border);
  background:var(--panel-2);
  color:var(--text);
  text-decoration:none;
}
.topbar .desktop-nav-menu a.active{border-color:color-mix(in srgb,var(--accent) 35%,var(--border));background:color-mix(in srgb,var(--accent) 12%,var(--panel));color:var(--text)}
.desktop-nav-menu-title{padding:6px 10px 5px;color:var(--muted);font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.desktop-nav-account-head{display:flex;align-items:center;gap:10px;margin:0 0 5px;padding:9px 10px 11px;border-bottom:1px solid var(--border)}
.desktop-nav-avatar{display:grid;place-items:center;flex:0 0 34px;width:34px;height:34px;border-radius:50%;background:color-mix(in srgb,var(--accent) 18%,var(--panel-2));color:var(--link);font-weight:800}
.desktop-nav-menu .desktop-theme-toggle{border-color:transparent!important;border-radius:10px!important;font:inherit!important;line-height:1!important}
.topbar .desktop-nav-menu .nav-logout{color:var(--danger)}
.topbar .desktop-nav-menu .nav-logout::before{color:var(--danger)}

@media(min-width:761px) and (max-width:1120px){
  .topbar{padding-left:10px;padding-right:10px}
  .topbar .brand{gap:6px}.topbar .brand .badge{display:none}
  .desktop-main-nav{gap:2px;margin-left:10px}
  .desktop-main-nav>details>summary,.desktop-main-nav>.desktop-nav-link{padding-left:7px;padding-right:7px;font-size:12px}
}

/* ================= Mobile app shell & PWA install UI ================= */
.mobile-menu-toggle,.mobile-nav-backdrop,.mobile-bottom-nav,.mobile-drawer-head{display:none}
.pwa-install-card{position:fixed;left:50%;bottom:22px;z-index:1000;transform:translateX(-50%);width:min(460px,calc(100% - 28px));padding:16px;background:var(--panel);border:1px solid var(--border);border-radius:20px;box-shadow:0 22px 70px rgba(0,0,0,.32)}
.pwa-install-head{display:flex;gap:12px;align-items:center}.pwa-install-icon{width:54px;height:54px;border-radius:15px;object-fit:contain;background:#fff;padding:5px}.pwa-install-title{font-size:17px;font-weight:750}.pwa-install-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:14px}.pwa-install-card[hidden]{display:none!important}

@media(max-width:760px){
  .desktop-main-nav{display:none!important}
  body{padding-bottom:82px;font-size:14px;background:linear-gradient(180deg,var(--bg),color-mix(in srgb,var(--bg) 88%,var(--accent)))}
  .container{padding:12px;max-width:100%}.card{border-radius:20px;margin:12px 0;padding:14px;box-shadow:0 8px 24px rgba(20,40,75,.08)}
  .topbar{min-height:64px;padding:8px 12px;gap:8px;z-index:300}.topbar .brand{min-width:0;gap:8px}.topbar .brand img{height:38px;max-width:105px;object-fit:contain}.topbar .brand>span:not(.badge){font-size:14px;white-space:nowrap}.topbar .brand .badge{display:none}
  .mobile-menu-toggle{display:inline-grid;place-items:center;flex:0 0 42px;width:42px;height:42px;border-radius:13px;border:1px solid var(--border);background:var(--panel);color:var(--text);font-size:21px;cursor:pointer;box-shadow:0 5px 16px rgba(20,40,75,.1);transition:transform .16s ease,background .16s ease}.mobile-menu-toggle:active{transform:scale(.94)}
  nav#mainNav{position:fixed!important;top:auto!important;left:10px!important;right:10px!important;bottom:78px!important;z-index:410!important;width:auto!important;height:auto!important;max-height:calc(100dvh - 98px)!important;display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;align-content:start!important;align-items:stretch;gap:8px;padding:14px 14px 18px;overflow-x:hidden!important;overflow-y:auto!important;overscroll-behavior:contain;background:#fff;border:1px solid #dce3ec;border-radius:24px 24px 18px 18px;box-shadow:0 -18px 65px rgba(4,12,28,.42);transform:translateY(34px) scale(.98);transform-origin:bottom center;visibility:hidden;pointer-events:none;opacity:0;transition:transform .24s ease,opacity .18s ease,visibility .18s ease}
  nav#mainNav.open{transform:translateY(0) scale(1);visibility:visible;pointer-events:auto;opacity:1}nav#mainNav a,nav#mainNav .theme-toggle{display:flex;width:100%;min-width:0;min-height:52px;align-items:center;justify-content:flex-start;padding:11px 12px;border:1px solid transparent;border-radius:14px;background:#f1f3f6;color:#071a36;font-size:14px;font-weight:750;line-height:1.2;text-align:left;transition:background .15s ease,border-color .15s ease,transform .15s ease}nav#mainNav a::before{content:attr(data-icon);display:grid;place-items:center;flex:0 0 28px;width:28px;height:28px;margin-right:7px;border-radius:9px;background:#fff;color:#126a72;font-size:17px}nav#mainNav a:hover,nav#mainNav a:focus-visible{background:#e7edf1;transform:translateY(-1px)}nav#mainNav a.active{background:#dceeee;border-color:#c5e2e2;color:#075760}nav#mainNav a.active::after{content:'';width:7px;height:7px;margin-left:auto;border-radius:50%;background:#0d7c82;box-shadow:0 0 0 4px rgba(13,124,130,.12)}nav#mainNav .theme-toggle{grid-column:1/-1;justify-content:center;background:#edf5f5;color:#075760}nav#mainNav .nav-logout{grid-column:1/-1;justify-content:center;color:#a51f2d;border-color:#f0cbd0;background:#fff0f2}nav#mainNav .nav-logout::before{color:#a51f2d;background:#fff}
  .mobile-drawer-head{display:flex;grid-column:1/-1;align-items:center;justify-content:space-between;min-height:50px;padding:0 2px 5px 2px;color:#071a36}.mobile-drawer-head div{display:flex;flex-direction:column;gap:2px}.mobile-drawer-head small{color:#56708b;font-size:10px;font-weight:850;letter-spacing:.18em}.mobile-drawer-head strong{font-size:15px;font-weight:850;letter-spacing:0}.mobile-drawer-head button{display:grid;place-items:center;min-width:58px;height:40px;padding:0 12px;border:0;border-radius:13px;background:#eef0f3;color:#071a36;font-size:13px;font-weight:800;line-height:1;cursor:pointer}
  .mobile-nav-backdrop{position:fixed;inset:0 0 72px;z-index:400;border:0;background:rgba(4,12,28,.56);backdrop-filter:blur(4px)}.mobile-nav-backdrop.open{display:block}
  .mobile-bottom-nav{position:fixed;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;left:10px;right:10px;bottom:max(8px,env(safe-area-inset-bottom));z-index:350;min-height:62px;padding:7px 5px;border:1px solid var(--border);border-radius:20px;background:color-mix(in srgb,var(--panel) 92%,transparent);box-shadow:0 12px 35px rgba(0,0,0,.22);backdrop-filter:blur(14px)}
  .mobile-bottom-nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;color:var(--muted);border-radius:14px;text-decoration:none;min-width:0}.mobile-bottom-nav a span{font-size:20px;line-height:1}.mobile-bottom-nav a small{font-size:10px;white-space:nowrap}.mobile-bottom-nav .mobile-main-action{color:#fff;background:var(--accent);transform:translateY(-13px);box-shadow:0 8px 18px color-mix(in srgb,var(--accent) 35%,transparent)}
  .mobile-bottom-menu{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-width:0;border:0;border-radius:14px;background:transparent;color:var(--muted);font:inherit;cursor:pointer}.mobile-bottom-menu span{font-size:20px;line-height:1}.mobile-bottom-menu small{font-size:10px;white-space:nowrap}.mobile-bottom-menu.active{background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent)}
  .grid-2,.grid-3{grid-template-columns:1fr}.table-scroll{border-radius:14px}.btn{min-height:42px}input,select,textarea{min-height:44px;font-size:16px}
  .grid.grid-3>a .card{min-height:112px;display:flex;flex-direction:column;justify-content:center;border:0}.grid.grid-3>a:nth-child(6n+1) .card{background:color-mix(in srgb,#8b6cf0 28%,var(--panel))}.grid.grid-3>a:nth-child(6n+2) .card{background:color-mix(in srgb,#ef8f91 26%,var(--panel))}.grid.grid-3>a:nth-child(6n+3) .card{background:color-mix(in srgb,#f2cc42 25%,var(--panel))}.grid.grid-3>a:nth-child(6n+4) .card{background:color-mix(in srgb,#72c4ef 28%,var(--panel))}.grid.grid-3>a:nth-child(6n+5) .card{background:color-mix(in srgb,#75d6b2 26%,var(--panel))}.grid.grid-3>a:nth-child(6n+6) .card{background:color-mix(in srgb,#93b7ff 26%,var(--panel))}
  .footer{margin-top:18px;padding:18px 12px 90px}.pwa-install-card{bottom:86px;border-radius:22px}
}

@media(display-mode:standalone){.pwa-install-card{display:none!important}}