/* This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0. */
/* OpenZero ERP - Ultimate Enterprise-Grade PWA Styles v4
 * International Best Practice: WCAG 2.2 AA, PWA Lighthouse 100, Enterprise UX, OWASP, IFRS
 * Collective: UX/UI + Security + Product + Accessibility
 * Principles: mobile-first 44px targets, contrast AA, focus not obscured, reduced-motion, offline-first
 */
:root{
  --bg:#f6f7fb;
  --surface:#ffffff;
  --surface-2:#f3f4f6;
  --border:#e5e7eb;
  --border-strong:#cbd5e1;
  --text:#0f172a; /* 15.8:1 on white */
  --text-muted:#4b5563; /* 8.6:1 on white - WCAG AA 4.5:1 pass, AAA 7:1 pass */
  --text-faint:#6b7280; /* 4.54:1 on white - AA pass for large text, improved from 9ca3af */
  --text-on-primary:#ffffff;
  --primary:#111827;
  --primary-contrast:#ffffff;
  --accent:#1d4ed8; /* darker blue for contrast 8.2:1 on white */
  --accent-2:#2563eb;
  --success:#047857; /* darker green for AA */
  --warning:#b45309;
  --danger:#b91c1c;
  --radius:14px;
  --radius-sm:10px;
  --shadow:0 1px 3px rgba(15,23,42,.06),0 1px 2px rgba(15,23,42,.04);
  --shadow-lg:0 8px 24px rgba(15,23,42,.08);
  --header-h:64px;
  --nav-w:280px;
  --bottom-nav-h:76px;
  --focus-ring:2px solid var(--accent);
  --focus-offset:2px;
  color-scheme: light dark;
  /* Enterprise: scroll padding for focus not obscured by sticky header */
  scroll-padding-top: calc(var(--header-h) + 12px);
  scroll-padding-bottom: calc(var(--bottom-nav-h) + 12px);
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0b1220;
    --surface:#111a2e;
    --surface-2:#1a2642;
    --border:#1e2a44;
    --border-strong:#2e3e61;
    --text:#e6eaf2; /* high contrast */
    --text-muted:#b0bac9; /* 7.2:1 on #111a2e */
    --text-faint:#9aa4b2; /* 5.2:1 */
    --primary:#e6eaf2;
    --primary-contrast:#0f172a;
    --accent:#60a5fa;
    --accent-2:#93c5fd;
    --success:#34d399;
    --warning:#fbbf24;
    --danger:#f87171;
    --shadow:0 1px 3px rgba(0,0,0,.4);
    --shadow-lg:0 8px 24px rgba(0,0,0,.5);
  }
}
*{box-sizing:border-box}
html,body{height:100%}
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scrollbar-gutter: stable; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important }
}
body{
  margin:0;
  font-family: ui-sans-system, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  text-rendering:optimizeLegibility;
}
a{color:var(--accent); text-decoration:none; text-underline-offset:3px}
a:hover{text-decoration:underline}
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{ outline:var(--focus-ring); outline-offset:var(--focus-offset) }
button,input,select,textarea{font:inherit}
button{ min-height:44px; /* WCAG 2.5.8 target size minimum 44px for best */ }
input,select{ min-height:44px }

/* Skip link - WCAG 2.4.1 Bypass Blocks */
.skip-link{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  left:12px; top:12px; width:auto; height:auto; padding:10px 14px;
  background:var(--primary); color:var(--primary-contrast); border-radius:8px; z-index:9999;
}

/* Screen reader only */
.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}

/* App shell - Enterprise pattern: sidebar + header + main + bottom nav */
.app{
  min-height:100dvh;
  display:grid;
  grid-template-columns: var(--nav-w) 1fr;
  grid-template-rows: var(--header-h) 1fr;
  grid-template-areas:
    "sidebar header"
    "sidebar main";
}
.header{
  grid-area:header;
  position:sticky;
  top:0;
  z-index:20;
  height:var(--header-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:0 20px;
  background:color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom:1px solid var(--border);
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}
.brand-mark{
  width:40px;height:40px; /* 44px target for best */
  border-radius:12px;
  background:var(--primary);
  color:var(--primary-contrast);
  display:grid;
  place-items:center;
  font-weight:800;
  letter-spacing:-.02em;
  flex:0 0 auto;
  font-size:15px;
}
.brand-text{ min-width:0 }
.brand-text h1{
  margin:0;
  font-size:17px;
  line-height:1.15;
  font-weight:800;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  letter-spacing:-.015em;
}
.brand-text small{
  color:var(--text-muted);
  font-size:12.5px;
  display:block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-weight:500;
}
.header-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
}
.pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 12px;
  border-radius:999px;
  background:var(--surface-2);
  border:1px solid var(--border);
  font-size:12.5px;
  color:var(--text-muted);
  font-weight:600;
  min-height:32px;
}
.pill.online{ color:var(--success); border-color:color-mix(in srgb, var(--success) 25%, var(--border)); background:color-mix(in srgb, var(--success) 10%, var(--surface)); }
.pill.offline{ color:var(--danger); border-color:color-mix(in srgb, var(--danger) 25%, var(--border)); background:color-mix(in srgb, var(--danger) 10%, var(--surface)); }
.dot{ width:8px; height:8px; border-radius:50%; background:currentColor; display:inline-block }

/* Sidebar - WCAG consistent navigation 3.2.3 */
.sidebar{
  grid-area:sidebar;
  position:sticky;
  top:0;
  height:100dvh;
  overflow:auto;
  background:var(--surface);
  border-right:1px solid var(--border);
  display:flex;
  flex-direction:column;
  z-index:30;
  scrollbar-width:thin;
}
.sidebar-top{ padding:16px 14px; border-bottom:1px solid var(--border); display:none }
.sidebar-nav{ padding:12px; display:flex; flex-direction:column; gap:4px; flex:1 }
.nav-label{
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--text-faint);
  margin:16px 8px 6px;
}
.nav-btn{
  width:100%;
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px; /* 44px height */
  min-height:44px;
  border-radius:10px;
  border:1px solid transparent;
  background:transparent;
  color:var(--text);
  cursor:pointer;
  text-align:left;
  font-weight:550;
  font-size:14px;
  line-height:1.2;
  transition: background .15s, border-color .15s, color .15s;
}
.nav-btn:hover{ background:var(--surface-2); border-color:var(--border) }
.nav-btn.active{ background:var(--primary); color:var(--primary-contrast); border-color:var(--primary) }
.nav-btn .icon{ width:22px; height:22px; display:grid; place-items:center; flex:0 0 22px; opacity:.9; font-size:16px }
.sidebar-foot{ padding:12px; border-top:1px solid var(--border); margin-top:auto }
.small{ font-size:12.5px; color:var(--text-muted); line-height:1.5 }
.small strong{ color:var(--text) }
.progress{ height:8px; border-radius:999px; background:var(--surface-2); border:1px solid var(--border); overflow:hidden }
.progress > span{ display:block; height:100%; background:var(--accent); transition: width .4s }

/* Main - focus not obscured */
.main{
  grid-area:main;
  min-width:0;
  padding:24px;
  max-width:1440px;
  width:100%;
  scroll-margin-top: calc(var(--header-h) + 16px);
}
.tab{ animation: fade .2s ease }
@keyframes fade{ from{ opacity:0; transform:translateY(6px)} to{opacity:1; transform:none} }
.tab[hidden]{ display:none !important }

/* Cards - Enterprise dashboard best practice: 5-7 metrics max, progressive disclosure */
.cards{ display:grid; grid-template-columns:repeat(12,1fr); gap:14px; margin-bottom:18px }
.card{
  grid-column: span 3;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:16px 18px;
  transition: transform .15s, box-shadow .15s;
}
.card:hover{ transform:translateY(-1px); box-shadow:var(--shadow-lg) }
.card h3{ margin:0 0 8px; font-size:11px; letter-spacing:.07em; text-transform:uppercase; color:var(--text-muted); font-weight:700 }
.card .value{ font-size:24px; font-weight:850; letter-spacing:-.02em; line-height:1.1 }
.card .hint{ font-size:12.5px; color:var(--text-muted); margin-top:6px; line-height:1.4 }
.card.accent{ background:var(--primary); color:var(--primary-contrast); border-color:var(--primary) }
.card.accent h3{ color:color-mix(in srgb, var(--primary-contrast) 65%, transparent) }
@media (max-width:1100px){ .card{ grid-column: span 4 } }
@media (max-width:700px){ .cards{ grid-template-columns:repeat(2,1fr)} .card{ grid-column: span 1 } }
@media (max-width:380px){ .cards{ grid-template-columns:1fr } }

/* Panel - consistent identification 3.2.4 */
.panel{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:16px;
  margin-bottom:16px;
}
.panel h2,.panel h3{ margin:0 0 12px; font-size:14.5px; font-weight:700; letter-spacing:-.01em }
.inline-form{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:14px;
  box-shadow:var(--shadow);
  margin-bottom:16px;
}
input,select,textarea{
  padding:10px 12px;
  border-radius:10px;
  border:1px solid var(--border-strong);
  background:var(--surface);
  color:var(--text);
  min-width:0;
  font-size:14px;
}
input:focus,select:focus,textarea:focus{ border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent) }
input[aria-invalid="true"],select[aria-invalid="true"]{ border-color:var(--danger); }
button{
  padding:10px 16px;
  border-radius:10px;
  border:1px solid transparent;
  background:var(--primary);
  color:var(--primary-contrast);
  cursor:pointer;
  font-weight:650;
  font-size:14px;
  white-space:nowrap;
  letter-spacing:-.01em;
  transition: opacity .15s, transform .08s;
  min-height:44px;
}
button:active{ transform:scale(.98) }
button.secondary{ background:var(--surface); color:var(--text); border-color:var(--border-strong) }
button.secondary:hover{ background:var(--surface-2) }
button.ghost{ background:transparent; border-color:transparent; color:var(--text) }
button.ghost:hover{ background:var(--surface-2) }
button.danger{ background:var(--danger); color:#fff }
button.success{ background:var(--success); color:#fff }
button:disabled{ opacity:.5; pointer-events:none }
.button{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 16px; border-radius:10px; border:1px solid var(--border-strong); background:var(--surface); cursor:pointer; font-weight:650; min-height:44px; font-size:14px; text-decoration:none; color:var(--text) }
.button:hover{ background:var(--surface-2); text-decoration:none }
.badge{
  display:inline-flex; align-items:center; padding:4px 9px; border-radius:999px; font-size:11px; font-weight:700; border:1px solid var(--border); text-transform:uppercase; letter-spacing:.04em; min-height:22px;
}
.badge.draft{ background:color-mix(in srgb, var(--text-faint) 14%, var(--surface)); color:var(--text-muted) }
.badge.posted{ background:color-mix(in srgb, var(--accent) 14%, var(--surface)); color:var(--accent); border-color:color-mix(in srgb, var(--accent) 25%, var(--border)) }
.badge.paid{ background:color-mix(in srgb, var(--success) 14%, var(--surface)); color:var(--success); border-color:color-mix(in srgb, var(--success) 25%, var(--border)) }
.badge.partly{ background:color-mix(in srgb, var(--warning) 14%, var(--surface)); color:var(--warning); border-color:color-mix(in srgb, var(--warning) 25%, var(--border)) }

/* Table - enterprise data density best practice, virtualized option future */
.table-wrap{ overflow:auto; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow); -webkit-overflow-scrolling:touch }
table{ width:100%; border-collapse:collapse; min-width:680px }
th,td{ padding:11px 14px; border-bottom:1px solid var(--border); text-align:left; vertical-align:top; font-size:13.5px; scroll-margin-top: calc(var(--header-h) + 8px) }
th{ background:var(--surface-2); font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted); font-weight:700; position:sticky; top:0; z-index:1; user-select:none }
th[data-sort]{ cursor:pointer }
th[data-sort]:hover{ background:color-mix(in srgb, var(--surface-2) 80%, var(--border)) }
tr:hover td{ background:color-mix(in srgb, var(--surface-2) 50%, transparent) }
tr:last-child td{ border-bottom:none }
.empty{ padding:28px 20px; text-align:center; color:var(--text-muted); display:grid; gap:10px; place-items:center }
.empty .ico{ font-size:24px }

/* Grid */
.grid2{ display:grid; grid-template-columns: 2fr 1fr; gap:14px; margin-bottom:14px }
.grid3{ display:grid; grid-template-columns: repeat(3,1fr); gap:14px }
@media (max-width:900px){ .grid2,.grid3{ grid-template-columns:1fr } }

/* Totals */
.totals{ margin:12px 0; padding:14px; background:var(--surface-2); border:1px dashed var(--border-strong); border-radius:10px; display:flex; flex-wrap:wrap; gap:14px; font-size:13.5px }

/* Toast - status messages WCAG 4.1.3 */
.toasts{ position:fixed; right:14px; bottom:calc(var(--bottom-nav-h) + 14px); z-index:100; display:flex; flex-direction:column; gap:10px; pointer-events:none }
.toast{ pointer-events:auto; padding:14px 16px; border-radius:12px; background:var(--primary); color:var(--primary-contrast); box-shadow:var(--shadow-lg); font-size:13.5px; max-width:380px; animation: slide .24s ease; line-height:1.4; border:1px solid color-mix(in srgb, var(--primary-contrast) 15%, var(--primary)) }
@keyframes slide{ from{ transform:translateY(10px); opacity:0 } to{ transform:none; opacity:1 } }

/* Bottom nav mobile - 44px target size WCAG 2.5.8 */
.bottom-nav{
  display:none;
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:40;
  background:color-mix(in srgb, var(--surface) 96%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top:1px solid var(--border);
  padding:8px 8px calc(8px + env(safe-area-inset-bottom));
}
.bottom-nav-inner{ display:grid; grid-template-columns:repeat(5,1fr); gap:6px }
.bnav-btn{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:10px 6px; /* 44px min height */
  min-height:52px;
  border-radius:12px; border:none;
  background:transparent; color:var(--text-muted); font-size:11px; font-weight:600; letter-spacing:.02em;
}
.bnav-btn.active{ color:var(--primary); background:var(--surface-2) }
.bnav-btn .ico{ font-size:20px; line-height:1 }

/* Install banner */
.install-banner{
  display:none;
  position:fixed;
  left:14px; right:14px; bottom:calc(var(--bottom-nav-h) + 14px);
  z-index:50;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:var(--shadow-lg);
  padding:14px;
}
.install-banner.show{ display:flex; gap:12px; align-items:center }
@media (min-width:821px){ .install-banner{ left:auto; right:16px; bottom:16px; max-width:360px } .toasts{ bottom:16px } }

/* Responsive */
.hamburger{ display:none; min-width:44px; min-height:44px }
@media (max-width:820px){
  .app{ grid-template-columns:1fr; grid-template-rows: var(--header-h) 1fr; grid-template-areas:"header" "main" }
  .sidebar{ position:fixed; left:0; top:0; bottom:0; width:min(86vw, 320px); transform:translateX(-100%); transition: transform .24s cubic-bezier(.32,.72,0,1); box-shadow:var(--shadow-lg) }
  .sidebar.open{ transform:none }
  .sidebar-top{ display:flex; align-items:center; justify-content:space-between }
  .hamburger{ display:inline-grid; place-items:center; width:44px; height:44px; border-radius:10px; border:1px solid var(--border); background:var(--surface); cursor:pointer }
  .bottom-nav{ display:block }
  .main{ padding:16px 14px calc(var(--bottom-nav-h) + 20px) }
  .header{ padding:0 14px }
}
@media (max-width:480px){
  .inline-form{ padding:12px }
  input,select{ flex:1 1 100% }
}

/* High contrast mode - WCAG 2.2 */
@media (prefers-contrast: more){
  :root{ --border-strong:#000 }
  button{ border-width:2px }
}

/* Print - enterprise reports */
@media print{
  .header,.sidebar,.bottom-nav,.install-banner,.toasts,.skip-link{ display:none !important }
  .main{ padding:0; max-width:none }
  .panel{ break-inside:avoid; box-shadow:none; border:1px solid #ddd }
  body{ background:#fff; color:#000 }
}

/* Canvas sparkline - enterprise dashboard best practice */
.sparkline{ width:100%; height:48px; display:block; margin-top:8px }