/**
 * Qudra Charge Connect — design system 14.3.307
 * Soft Glass: light cream sidebar, emerald active pill, white/peach/emerald cards.
 * Reference is visual only — no demo KPIs, no placeholder copy.
 * Loaded last. No API / totals / permissions / stored-qty changes.
 */

/* ── Tokens (light ERP). Dark / reverse themes keep their own sheets. ── */
html:not(.dark):not([data-theme="qudra-reverse"]) {
  --qcc-emerald: #007a60;
  --qcc-emerald-deep: #064e3b;
  --qcc-primary: #007a60;
  --qcc-primary-hover: #06624d;
  --qcc-mint: #e5f3ed;
  --qcc-peach: #f6d6b8;
  --qcc-orange: #e98725;
  --qcc-gold: #e98725;
  --qcc-gold-soft: #f6d6b8;
  --qcc-ink: #172320;
  --qcc-ink-2: #596660;
  --qcc-muted: #596660;
  --qcc-paper: #f3f0eb;
  --qcc-card: #ffffff;
  --qcc-surface-2: #f8f6f2;
  --qcc-frost: rgba(255, 255, 255, .92);
  --qcc-line: #dddcd5;
  --qcc-radius: 20px;
  --qcc-radius-sm: 12px;
  --qcc-shadow: 0 1px 2px rgba(23, 35, 32, .04), 0 12px 32px rgba(23, 35, 32, .06);
  --qcc-focus: 0 0 0 3px rgba(0, 122, 96, .28);

  --sidebar: #f8f6f2 !important;
  --sidebar-bg: #f8f6f2 !important;
  --sidebar-foreground: #172320 !important;
  --sidebar-accent: #007a60 !important;
  --sidebar-accent-foreground: #ffffff !important;
  --sidebar-border: #dddcd5 !important;
  --sidebar-primary: #007a60 !important;
  --sidebar-primary-foreground: #ffffff !important;
  --sidebar-ring: #007a60 !important;

  --background: var(--qcc-paper) !important;
  --app-bg: var(--qcc-paper) !important;
  --card: var(--qcc-card) !important;
  --card-foreground: var(--qcc-ink) !important;
  --foreground: var(--qcc-ink) !important;
  --muted-foreground: var(--qcc-ink-2) !important;
  --border: var(--qcc-line) !important;
  --primary: var(--qcc-primary) !important;
  --gold: var(--qcc-orange) !important;
  --shadow-card: var(--qcc-shadow) !important;
  --radius: var(--qcc-radius);
  --destructive: #c94d42 !important;
}

/* Boot splash must never cover the app after paint */
#boot.boot-exit,
#boot[data-qcc-boot-gone] {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

html { overflow-x: clip; max-width: 100%; }
body { overflow-x: visible; max-width: 100%; background: var(--background); color: var(--foreground); }
#root { max-width: 100%; min-width: 0; }

main {
  min-width: 0;
  max-width: 100%;
  container-type: inline-size;
  container-name: qcc-page;
}

/* Words wrap, not letters */
main h1, main h2, main h3,
main td, main th, main label, main button, main a {
  overflow-wrap: break-word;
  word-break: normal;
}

/* Titles: solid ink. Gradient + clip chopped cap-height. */
main h1 {
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: var(--foreground) !important;
  color: var(--foreground) !important;
  overflow: visible !important;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -0.02em;
}
main h1 + p,
main h1 ~ p:first-of-type {
  color: var(--muted-foreground);
}

/* ── Shell: light cream sidebar, emerald active pill (Soft Glass) ── */
/* Do not set display here — SPA uses hidden lg:flex. Forcing flex
   keeps the desktop rail on phones and crushes the page. */
aside.bg-sidebar {
  flex-direction: column;
  min-height: 0;
  background: var(--sidebar) !important;
  color: var(--sidebar-foreground) !important;
  border-inline-end: 1px solid var(--sidebar-border) !important;
}
@media (min-width: 1024px) {
  aside.bg-sidebar {
    display: flex;
  }
}
aside.bg-sidebar nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
aside.bg-sidebar > .border-t {
  flex: 0 0 auto;
  background: var(--sidebar);
  border-color: var(--sidebar-border) !important;
}
aside.bg-sidebar nav a,
[role="dialog"][class*="inset-y-0"] nav a {
  min-height: 44px;
  border-radius: 999px;
  color: var(--qcc-ink, #172320);
  font-weight: 600;
}
aside.bg-sidebar a[aria-current="page"],
[role="dialog"] nav a[aria-current="page"] {
  background: var(--qcc-primary, #007a60) !important;
  border-inline-start: none;
  border-radius: 999px;
  font-weight: 700;
  color: #fff !important;
}
aside.bg-sidebar a[aria-current="page"] svg,
[role="dialog"] nav a[aria-current="page"] svg {
  color: #fff;
  stroke: #fff;
}
aside.bg-sidebar .text-muted-foreground,
aside.bg-sidebar [class*="uppercase"] {
  color: var(--qcc-ink-2, #596660) !important;
  letter-spacing: .08em;
}
aside [data-erp-logo-frame] {
  height: 2.75rem;
  min-height: 2.75rem;
  width: calc(100% - 1.5rem);
  max-width: 14rem;
  margin-inline: auto;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background: transparent;
  border-radius: 0;
}
aside [data-erp-logo-frame] img {
  width: auto;
  max-width: 100%;
  height: 2.5rem;
  object-fit: contain !important;
  transform: none;
  pointer-events: none;
}

/* Frosted header — solid fallback when blur is unsupported */
#root .lg\:flex.border-b,
#root [class*="bg-card/60"],
#root header {
  background: var(--qcc-frost, rgba(255, 255, 255, .9));
  border: 1px solid var(--border);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .7);
}
@supports ((backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px))) {
  #root .lg\:flex.border-b,
  #root [class*="bg-card/60"] {
    background: rgba(255, 255, 255, .86);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
  }
}
@media (prefers-reduced-motion: reduce) {
  #root .lg\:flex.border-b,
  #root [class*="bg-card/60"] {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: #fff;
  }
}

#root .hidden.lg\:flex.shrink-0.items-center {
  min-width: 0;
  gap: 12px;
}
#root .hidden.lg\:flex.shrink-0.items-center [role="combobox"] {
  min-width: 14rem !important;
  max-width: min(24rem, 42vw) !important;
  flex: 1 1 14rem;
}

/* ── Cards ── */
main .rounded-xl,
main [class*="shadow-card"],
main .border.bg-card {
  box-shadow: var(--shadow-card);
}

/* Viewport 4-col KPIs do not fit beside the 18rem sidebar */
@container qcc-page (max-width: 90rem) {
  main .grid.grid-cols-2.md\:grid-cols-4,
  main .grid.md\:grid-cols-4.grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  main .grid.grid-cols-1.md\:grid-cols-2.xl\:grid-cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@container qcc-page (max-width: 28rem) {
  main .grid.grid-cols-2.md\:grid-cols-4,
  main .grid.grid-cols-1.md\:grid-cols-2.xl\:grid-cols-4 {
    grid-template-columns: 1fr !important;
  }
}

/* A: bind KPI fg/bg so theme rainbow cannot leave white text on cream */
main .grid.grid-cols-2.md\:grid-cols-4 > .rounded-xl,
main .qcc-kpi-row > .rounded-xl {
  background: var(--card) !important;
  color: var(--card-foreground) !important;
  -webkit-text-fill-color: var(--card-foreground);
  border: 1px solid var(--border);
}
main .grid.grid-cols-2.md\:grid-cols-4 > .rounded-xl .text-muted-foreground,
main .grid.grid-cols-2.md\:grid-cols-4 > .rounded-xl .uppercase,
main .grid.grid-cols-2.md\:grid-cols-4 > .rounded-xl [class*="text-muted"] {
  color: var(--foreground) !important;
  -webkit-text-fill-color: var(--foreground) !important;
  opacity: 1 !important;
}
/* Soft Glass KPI mix: white default, peach warehouse-style, emerald primary */
body.qcc-dash-page main .grid.grid-cols-2.md\:grid-cols-4 > .rounded-xl:nth-child(2) {
  background: linear-gradient(165deg, var(--qcc-peach, #f6d6b8) 0%, #fff6ee 78%) !important;
  color: var(--qcc-ink, #172320) !important;
  -webkit-text-fill-color: var(--qcc-ink, #172320) !important;
}
body.qcc-dash-page main .grid.grid-cols-2.md\:grid-cols-4 > .rounded-xl:nth-child(2) .uppercase,
body.qcc-dash-page main .grid.grid-cols-2.md\:grid-cols-4 > .rounded-xl:nth-child(2) .text-muted-foreground {
  color: #3d3428 !important;
  -webkit-text-fill-color: #3d3428 !important;
}

/* Intentional emerald KPI (dashboard Vehicles, or .bg-primary) keeps white ink */
main .rounded-xl.bg-primary,
main .rounded-xl[class*="from-[color:var(--primary)]"],
main .grid.grid-cols-2.md\:grid-cols-4 > .rounded-xl.bg-primary {
  background: var(--qcc-emerald-deep, #064e3b) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  border-color: transparent;
  border-radius: 22px;
}
main .rounded-xl.bg-primary .text-muted-foreground,
main .rounded-xl.bg-primary .uppercase,
main .rounded-xl[class*="from-[color:var(--primary)]"] .uppercase {
  color: rgba(255, 255, 255, .92) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, .92) !important;
}

/* Neutralize leftover modern rainbow if qc-erp-main is still tagged by an old overlay */
.qc-erp-main .grid.grid-cols-2.md\:grid-cols-4 > .rounded-xl:nth-child(4n+3) {
  background: var(--card) !important;
  color: var(--card-foreground) !important;
}
.qc-erp-main .grid.grid-cols-2.md\:grid-cols-4 > .rounded-xl:nth-child(4n+3) .text-muted-foreground,
.qc-erp-main .grid.grid-cols-2.md\:grid-cols-4 > .rounded-xl:nth-child(4n+3) [class*="text-muted"] {
  color: var(--foreground) !important;
  -webkit-text-fill-color: var(--foreground) !important;
}

/* ── Controls: fields 12px, primary actions pill ── */
main input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
main select,
main textarea,
main [role="combobox"] {
  min-height: 40px;
  border-radius: var(--qcc-radius-sm, 12px);
  background: #fff;
}
main button.bg-primary,
main a.bg-primary,
main button[class*="bg-primary"],
main a[class*="bg-primary"] {
  min-height: 40px;
  border-radius: 999px;
  padding-inline: 1.15rem;
  font-weight: 650;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 6px 14px rgba(0, 122, 96, .18);
}
main button.bg-destructive,
main button[class*="destructive"] {
  border-radius: 999px;
  background: var(--destructive, #c94d42);
  color: #fff;
}
main [class*="badge"],
main [class*="rounded-full"] {
  border-radius: 999px;
}
/* C: icon-only — target vs glyph */
main button:has(> svg:only-child),
[role="dialog"] button:has(> svg:only-child),
[role="dialog"] button.absolute {
  min-width: 40px;
  min-height: 40px;
}

/* G: invoice / delivery-note action chips wrap inside the card */
main [class*="shadow-card"] .inline-flex.flex-wrap,
main [class*="shadow-card"] [class*="flex-wrap"] {
  gap: .4rem;
}
main [class*="shadow-card"] button,
main [class*="shadow-card"] a[class*="inline-flex"] {
  white-space: nowrap;
}

/* ── Mobile drawer ── */
[role="dialog"][class*="inset-y-0"],
[data-radix-dialog-content][class*="inset-y-0"],
[data-radix-dialog-content][class*="w-[min(20rem"] {
  width: min(20rem, 88vw) !important;
  max-width: min(20rem, 88vw) !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  animation: none !important;
  transform: none !important;
  background: var(--sidebar, #f8f6f2) !important;
  color: var(--sidebar-foreground, #172320) !important;
}
[role="dialog"][class*="inset-y-0"] nav,
[data-radix-dialog-content][class*="inset-y-0"] nav,
[data-radix-dialog-content][class*="w-[min(20rem"] nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-anchor: none;
}
[role="dialog"][class*="inset-y-0"] button.absolute,
[role="dialog"][class*="inset-y-0"] button[aria-label*="Close"],
[data-radix-dialog-content] button.absolute,
[data-radix-dialog-content] button[aria-label*="Close"] {
  z-index: 80;
  min-width: 44px;
  min-height: 44px;
  width: 44px;
  height: 44px;
  inset-inline-end: .5rem;
  inset-block-start: max(.5rem, env(safe-area-inset-top, 0px));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: var(--qcc-ink, #172320);
  border: 1px solid var(--border);
  border-radius: 999px;
  pointer-events: auto;
}
[data-radix-dialog-content][class*="inset-y-0"] [data-erp-logo-frame],
[data-radix-dialog-content][class*="w-[min(20rem"] [data-erp-logo-frame] {
  pointer-events: none;
  height: 2.25rem;
  min-height: 2.25rem;
  background: transparent;
  border-radius: 0;
}
[data-radix-dialog-content][class*="inset-y-0"] [data-erp-logo-frame] img,
[data-radix-dialog-content][class*="w-[min(20rem"] [data-erp-logo-frame] img {
  transform: scale(1.2);
  pointer-events: none;
}
[role="dialog"][class*="inset-y-0"] > .border-t {
  flex: 0 0 auto;
  background: var(--sidebar, #f8f6f2);
  z-index: 4;
}

/* B: invoice/quote line editor stacks on phones */
@media (max-width: 639px) {
  [role="dialog"] .qcc-inv-line-head,
  [role="dialog"] .grid.grid-cols-12.qcc-inv-line-head {
    display: none !important;
  }
  [role="dialog"] .qcc-inv-line,
  [role="dialog"] .grid.grid-cols-12:not(.qcc-inv-line-head) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: .65rem .75rem !important;
  }
  [role="dialog"] .qcc-inv-line > *,
  [role="dialog"] .grid.grid-cols-12:not(.qcc-inv-line-head) > * {
    grid-column: auto !important;
    min-width: 0 !important;
  }
  [role="dialog"] .qcc-inv-line > :first-child,
  [role="dialog"] .qcc-inv-line [data-qcc-field="Product"],
  [role="dialog"] .qcc-inv-line [data-qcc-field="Description"] {
    grid-column: 1 / -1 !important;
  }
  [role="dialog"] .qcc-inv-line [data-qcc-field]::before {
    content: attr(data-qcc-field);
    display: block;
    font-size: .75rem;
    font-weight: 650;
    color: var(--foreground);
    margin-bottom: .28rem;
  }
  [role="dialog"] .qcc-inv-line [data-qcc-field="Remove"]::before {
    content: "Remove line";
  }
  [role="dialog"]:not([class*="inset-y-0"]) {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100dvh - 16px) !important;
  }
}

/* Tables stay in the card; never display:block the <table> (breaks mobile cards) */
main .overflow-x-auto:has(table),
main [class*="overflow-x-auto"]:has(table),
main [class*="shadow-card"]:has(table) {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 767px) {
  main .table-mobile-cards table {
    display: block !important;
    min-width: 0 !important;
    width: 100% !important;
  }
  main .table-mobile-cards thead {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
  }
  main .table-mobile-cards tbody,
  main .table-mobile-cards tbody tr { display: block !important; }
  main .table-mobile-cards tbody td { display: flex !important; }
}

/* Focus */
main a:focus-visible,
main button:focus-visible,
aside a:focus-visible,
button[aria-label="Open navigation menu"]:focus-visible,
[role="dialog"] button:focus-visible {
  outline: 2px solid var(--ring, var(--primary));
  outline-offset: 2px;
  box-shadow: var(--qcc-focus, 0 0 0 3px rgba(8, 125, 98, .28));
}

@media (prefers-reduced-motion: reduce) {
  #boot, [role="dialog"], aside a, main * {
    animation: none !important;
    transition: none !important;
  }
}

@media (max-height: 430px) and (orientation: landscape) {
  [role="dialog"][class*="inset-y-0"] > .border-t {
    display: none;
  }
}

/* F: grouped numbers read more easily; stored values are unchanged */
main .rounded-xl,
main [class*="shadow-card"] {
  font-variant-numeric: tabular-nums;
}

/* G: distinguish invoice vs delivery-note clusters without removing actions */
main [data-qcc-doc="invoice"] {
  border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--border));
}
main [data-qcc-doc="delivery-note"] {
  border: 1px solid var(--border);
}

/* Peach / orange only on surfaces that are already accented — never on every card */
main .rounded-xl.bg-accent,
main .rounded-xl[class*="gold"],
main [class*="from-[color:var(--gold)]"],
main [class*="bg-gold"] {
  background: linear-gradient(165deg, var(--qcc-peach, #f6d6b8) 0%, #fff8f2 78%) !important;
  color: var(--qcc-ink, #172320) !important;
  -webkit-text-fill-color: var(--qcc-ink, #172320) !important;
  border-color: color-mix(in srgb, var(--qcc-orange, #e98725) 28%, var(--border));
}
main .rounded-xl.bg-accent .uppercase,
main .rounded-xl[class*="gold"] .uppercase,
main .rounded-xl.bg-accent .text-muted-foreground {
  color: #3d3428 !important;
  -webkit-text-fill-color: #3d3428 !important;
}

/* Soft mint wash for selected dashboard summary chips — high-contrast ink */
body.qcc-dash-page main .grid.grid-cols-2.gap-2\.5 a,
body.qcc-dash-page main .grid.grid-cols-2.gap-2\.5 button {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--foreground);
  min-height: 44px;
}

/* Dense forms/tables stay solid white, not frosted */
main table,
[role="dialog"]:not([class*="inset-y-0"]) {
  background: #fff;
}

@supports not ((backdrop-filter: blur(1px))) {
  #root .lg\:flex.border-b,
  #root [class*="bg-card/60"] {
    background: #fff;
  }
}

/* 14.3.309 — hide 277 leftover-trip FAB; stale trips still auto-close */
.qcc-van-bar,
.qcc-van-bar button,
button[data-qcc-van-act="close"] {
  display: none !important;
}

/* 14.3.310 — visits belong to both companies; no company picker on the form */
.qcc-visit-form > .space-y-1:has([placeholder="Select company"]),
.qcc-visit-form > .space-y-1:has(button[role="combobox"]):first-child {
  display: none !important;
}

/* 14.3.313 — edit dialogs: saved values stay visible (not white-on-white) */
[role="dialog"] input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
[role="dialog"] textarea,
[role="dialog"] select,
[role="dialog"] [role="combobox"] {
  color: var(--qcc-ink, #172320) !important;
  -webkit-text-fill-color: var(--qcc-ink, #172320) !important;
}

/* 14.3.312 — phone: hide desktop rail, full-width page, no letter wrap */
@media (max-width: 1023px) {
  aside.bg-sidebar {
    display: none !important;
  }
  html, body, #root {
    max-width: 100%;
    overflow-x: clip;
  }
  main {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding-left: max(.75rem, env(safe-area-inset-left, 0px));
    padding-right: max(.75rem, env(safe-area-inset-right, 0px));
  }
  main h1, main h2, main p, main td, main th, main label, main button, main a, main li {
    overflow-wrap: anywhere;
    word-break: normal;
    hyphens: none;
  }
  #root header,
  #root .lg\:flex.border-b {
    gap: .5rem;
    min-width: 0;
    padding-inline: .65rem;
  }
  #root header [role="combobox"],
  #root [class*="border-b"] [role="combobox"] {
    min-width: 0 !important;
    max-width: min(11rem, 48vw) !important;
    flex: 1 1 auto;
  }
  #root header img,
  #root [class*="border-b"] img {
    height: 1.75rem;
    width: auto;
    max-width: 5.5rem;
    object-fit: contain;
  }
  .qcc-os-shell, #qcc-os-shell {
    max-width: 100%;
    min-width: 0;
  }
  .qcc-os-hub {
    grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)) !important;
  }
  .qcc-os-mark, img.qcc-os-mark {
    width: 4.75rem !important;
    height: 4.75rem !important;
  }
}