/* ============================================================================
   theme.css — Avertec design system (2026 redesign, phase 1)

   Loaded LAST on every signed-in screen (all of them carry body.dashboard-page),
   so on equal specificity it wins over the older page stylesheets.

   Scope on purpose:
     - design tokens (colour, type, radius, elevation, motion)
     - the app shell: navigation (.app-nav*), mobile bar, main-content offset
     - global UI added by js/ui.js: toasts, confirm dialog, command palette
     - a few safe global primitives (font, focus ring, [hidden], selection)
   Page layouts are NOT restyled here. Dashboard and Quotation Hub have their
   own phase-1 files; the remaining screens keep their own CSS until phase 2.

   The navigation uses new class names (.app-nav…) that no older stylesheet
   targets, so there is nothing to out-specify. styles/sidebar.css no longer
   matches anything and can be removed in phase 2.
   ========================================================================== */

:root {
  /* Neutrals — zinc */
  --c-bg: #f7f7f8;
  --c-surface: #ffffff;
  --c-surface-2: #fafafa;
  --c-surface-3: #f4f4f5;
  --c-line: #e4e4e7;
  --c-line-strong: #d4d4d8;
  --c-ink: #18181b;
  --c-ink-2: #3f3f46;
  /* Text greys meet WCAG AA on white and on --c-surface-2 (raised after the
     live Playwright scan of 2026-11-04 measured 2.56:1 for the old subtle). */
  --c-muted: #52525b;
  --c-subtle: #71717a;
  --c-decor: #a1a1aa; /* non-text only: separators, disabled icons */

  /* One accent — cobalt */
  --c-accent: #2f5bea;
  --c-accent-hover: #2449c9;
  --c-accent-ink: #1e40af;
  --c-accent-soft: #eef2fe;
  --c-accent-ring: rgba(47, 91, 234, 0.28);

  /* Semantic */
  --c-success: #15803d;
  --c-success-soft: #ecfdf3;
  --c-warning: #b45309;
  --c-warning-soft: #fff8eb;
  --c-danger: #dc2626;
  --c-danger-soft: #fef2f2;
  --c-info: #0369a1;
  --c-info-soft: #f0f9ff;

  /* Type */
  --font-sans: "Inter", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fs-xs: 11.5px;
  --fs-sm: 13px;
  --fs-base: 14px;
  --fs-md: 15px;
  --fs-lg: 18px;
  --fs-xl: 22px;
  --fs-2xl: 28px;

  /* Shape & depth */
  --r-sm: 6px;
  --r: 8px;
  --r-lg: 12px;
  --r-pill: 999px;
  --shadow-xs: 0 1px 2px rgba(24, 24, 27, 0.05);
  --shadow-sm: 0 1px 3px rgba(24, 24, 27, 0.06), 0 1px 2px rgba(24, 24, 27, 0.04);
  --shadow-pop: 0 16px 40px -12px rgba(24, 24, 27, 0.22), 0 4px 10px -4px rgba(24, 24, 27, 0.08);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 120ms;
  --dur: 200ms;

  /* Layout */
  --nav-w: 248px;
  --nav-w-collapsed: 64px;
  --mobilebar-h: 56px;

  /* Layers (existing modals use 1000–2000) */
  --z-nav: 900;
  --z-scrim: 2400;
  --z-dialog: 2500;
  --z-cmdk: 2600;
  --z-toast: 2700;
}

/* ---------------------------------------------------------------- globals */

/* The [hidden] attribute only works through the UA rule, which any author
   `display` overrides. This project has been bitten by that three times. */
[hidden] {
  display: none !important;
}

/* dashboard.css sets `* { font-family: Segoe UI }`. :where() keeps this at
   zero specificity so icon fonts (.fas, .fa-solid …) still win. */
:where(body.dashboard-page) :where(*:not(i):not(.fa):not(.fas):not(.far):not(.fab):not(.fa-solid):not(.fa-regular):not(.fa-brands)) {
  font-family: var(--font-sans);
}

body.dashboard-page {
  background: var(--c-bg);
  color: var(--c-ink);
  font-size: var(--fs-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body.dashboard-page ::selection {
  background: var(--c-accent-soft);
  color: var(--c-accent-ink);
}

body.dashboard-page :focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}

.tabular {
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------- app shell */

/* ID + class beats every older `.main-content` margin rule. sidebar.js no
   longer writes an inline margin; this body class drives it instead. */
body.dashboard-page #main-content {
  margin-left: var(--nav-w);
  transition: margin-left var(--dur) var(--ease-out);
  min-width: 0;
}

body.dashboard-page.nav-collapsed #main-content {
  margin-left: var(--nav-w-collapsed);
}

.app-nav {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--nav-w);
  display: flex;
  flex-direction: column;
  background: var(--c-surface);
  border-right: 1px solid var(--c-line);
  z-index: var(--z-nav);
  transition: width var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
  overflow: hidden;
}

body.nav-collapsed .app-nav {
  width: var(--nav-w-collapsed);
}

.app-nav__head {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 60px;
  padding: 0 12px 0 16px;
  flex-shrink: 0;
}

.app-nav__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
  color: var(--c-ink);
  text-decoration: none;
}

.app-nav__mark {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: var(--r);
  background: var(--c-ink);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.02em;
}

.app-nav__brandtext {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.2;
}

.app-nav__brandtext strong {
  font-size: var(--fs-base);
  font-weight: 650;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.app-nav__brandtext span {
  font-size: var(--fs-xs);
  color: var(--c-muted);
  white-space: nowrap;
}

.app-nav__iconbtn {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--r);
  background: transparent;
  color: var(--c-muted);
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast);
}

.app-nav__iconbtn:hover {
  background: var(--c-surface-3);
  color: var(--c-ink);
}

.app-nav__search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 12px 8px;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--c-line);
  border-radius: var(--r);
  background: var(--c-surface-2);
  color: var(--c-muted);
  font-size: var(--fs-sm);
  cursor: pointer;
  text-align: left;
  flex-shrink: 0;
  transition: border-color var(--dur-fast), background var(--dur-fast);
}

.app-nav__search:hover {
  border-color: var(--c-line-strong);
  background: var(--c-surface);
}

.app-nav__search span {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
}

.kbd {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 6px;
  border: 1px solid var(--c-line);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: var(--c-surface);
  color: var(--c-muted);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}

.app-nav__scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 4px 12px 12px;
}

.app-nav__section {
  margin: 14px 0 4px;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-subtle);
  white-space: nowrap;
}

.app-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.app-nav__link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 36px;
  padding: 0 10px;
  border-radius: var(--r);
  color: var(--c-ink-2);
  font-size: var(--fs-sm);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--dur-fast), color var(--dur-fast);
}

.app-nav__link i {
  width: 18px;
  flex-shrink: 0;
  text-align: center;
  font-size: 15px;
  color: var(--c-muted);
  transition: color var(--dur-fast);
}

.app-nav__link:hover {
  background: var(--c-surface-3);
  color: var(--c-ink);
}

.app-nav__link:hover i {
  color: var(--c-ink-2);
}

.app-nav__link[aria-current="page"] {
  background: var(--c-accent-soft);
  color: var(--c-accent-ink);
  font-weight: 600;
}

.app-nav__link[aria-current="page"] i {
  color: var(--c-accent);
}

.app-nav__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 36px;
  margin: 0 12px 4px;
  border-radius: var(--r);
  background: var(--c-accent);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background var(--dur-fast);
}

.app-nav__cta:hover {
  background: var(--c-accent-hover);
  color: #fff;
}

.app-nav__foot {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 12px 12px 16px;
  border-top: 1px solid var(--c-line);
}

.app-nav__avatar {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--c-surface-3);
  color: var(--c-ink-2);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}

.app-nav__who {
  flex: 1;
  min-width: 0;
  line-height: 1.25;
}

.app-nav__who strong {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-nav__who span {
  font-size: var(--fs-xs);
  color: var(--c-muted);
  white-space: nowrap;
}

/* Collapsed rail: icons only. Labels stay in the DOM for screen readers and
   are exposed as a hover title (set in sidebar.js). */
body.nav-collapsed .app-nav__brandtext,
body.nav-collapsed .app-nav__section,
body.nav-collapsed .app-nav__link span,
body.nav-collapsed .app-nav__search span,
body.nav-collapsed .app-nav__search .kbd,
body.nav-collapsed .app-nav__cta span,
body.nav-collapsed .app-nav__who {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

body.nav-collapsed .app-nav__head {
  flex-direction: column;
  height: auto;
  padding: 14px 0 6px;
  gap: 8px;
}

body.nav-collapsed .app-nav__brand {
  flex: none;
}

body.nav-collapsed .app-nav__search,
body.nav-collapsed .app-nav__cta {
  justify-content: center;
  margin-left: 14px;
  margin-right: 14px;
  padding: 0;
}

body.nav-collapsed .app-nav__scroll {
  padding-left: 12px;
  padding-right: 12px;
}

body.nav-collapsed .app-nav__link {
  justify-content: center;
  padding: 0;
}

body.nav-collapsed .app-nav__foot {
  flex-direction: column;
  padding: 12px 0;
}

/* Mobile bar + drawer -------------------------------------------------- */

.app-mobilebar,
.app-scrim {
  display: none;
}

@media (max-width: 900px) {
  body.dashboard-page #main-content,
  body.dashboard-page.nav-collapsed #main-content {
    margin-left: 0;
    padding-top: calc(var(--mobilebar-h) + 16px);
  }

  .app-mobilebar {
    position: fixed;
    inset: 0 0 auto 0;
    height: var(--mobilebar-h);
    z-index: var(--z-nav);
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 8px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: saturate(1.4) blur(12px);
    -webkit-backdrop-filter: saturate(1.4) blur(12px);
    border-bottom: 1px solid var(--c-line);
  }

  .app-mobilebar__title {
    flex: 1;
    min-width: 0;
    font-size: var(--fs-md);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .app-mobilebar .app-nav__iconbtn {
    width: 44px;
    height: 44px;
    font-size: 17px;
    color: var(--c-ink-2);
  }

  /* The rail never applies on mobile; the drawer is always full width. */
  .app-nav,
  body.nav-collapsed .app-nav {
    width: min(300px, 86vw);
    transform: translateX(-102%);
    z-index: calc(var(--z-scrim) + 1);
    box-shadow: var(--shadow-pop);
  }

  body.nav-open .app-nav {
    transform: none;
  }

  body.nav-collapsed .app-nav__brandtext,
  body.nav-collapsed .app-nav__section,
  body.nav-collapsed .app-nav__link span,
  body.nav-collapsed .app-nav__search span,
  body.nav-collapsed .app-nav__search .kbd,
  body.nav-collapsed .app-nav__cta span,
  body.nav-collapsed .app-nav__who {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
  }

  body.nav-collapsed .app-nav__head,
  body.nav-collapsed .app-nav__foot {
    flex-direction: row;
  }

  body.nav-collapsed .app-nav__link {
    justify-content: flex-start;
    padding: 0 10px;
  }

  .app-nav__collapse {
    display: none;
  }

  .app-nav__link,
  .app-nav__search,
  .app-nav__cta {
    height: 44px;
  }

  .app-scrim {
    position: fixed;
    inset: 0;
    z-index: var(--z-scrim);
    background: rgba(24, 24, 27, 0.4);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur) var(--ease-out);
    display: block;
  }

  body.nav-open .app-scrim {
    opacity: 1;
    pointer-events: auto;
  }

  /* Wide tables scroll inside their card instead of stretching the page. */
  body.dashboard-page table {
    max-width: 100%;
  }
}

/* --------------------------------------------------------------- toasts */

.ui-toasts {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  width: min(380px, calc(100vw - 32px));
  pointer-events: none;
}

.ui-toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 12px 12px 12px 14px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  box-shadow: var(--shadow-pop);
  color: var(--c-ink);
  font-size: var(--fs-sm);
  line-height: 1.45;
  animation: ui-toast-in var(--dur) var(--ease-out);
}

.ui-toast.is-leaving {
  animation: ui-toast-out 160ms ease-in forwards;
}

.ui-toast__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 11px;
  margin-top: 1px;
  color: #fff;
  background: var(--c-ink-2);
}

.ui-toast--success .ui-toast__icon { background: var(--c-success); }
.ui-toast--danger .ui-toast__icon { background: var(--c-danger); }
.ui-toast--warning .ui-toast__icon { background: var(--c-warning); }
.ui-toast--info .ui-toast__icon { background: var(--c-accent); }

.ui-toast__msg {
  flex: 1;
  min-width: 0;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.ui-toast__close {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  margin: -2px -2px 0 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--c-subtle);
  cursor: pointer;
}

.ui-toast__close:hover {
  background: var(--c-surface-3);
  color: var(--c-ink);
}

@keyframes ui-toast-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

@keyframes ui-toast-out {
  to { opacity: 0; transform: translateY(4px) scale(0.98); }
}

@media (max-width: 600px) {
  .ui-toasts {
    right: 16px;
    left: 16px;
    bottom: 16px;
    width: auto;
    align-items: stretch;
  }
}

/* --------------------------------------------------------- confirm dialog */

.ui-dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-dialog);
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(24, 24, 27, 0.45);
  animation: ui-fade-in var(--dur) var(--ease-out);
}

.ui-dialog {
  width: min(420px, 100%);
  padding: 20px;
  border-radius: var(--r-lg);
  background: var(--c-surface);
  box-shadow: var(--shadow-pop);
  animation: ui-pop-in var(--dur) var(--ease-out);
}

.ui-dialog__title {
  margin: 0 0 6px;
  font-size: var(--fs-md);
  font-weight: 650;
  color: var(--c-ink);
}

.ui-dialog__msg {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--c-ink-2);
  white-space: pre-line;
}

.ui-dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 20px;
}

.ui-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px;
  border: 1px solid var(--c-line);
  border-radius: var(--r);
  background: var(--c-surface);
  color: var(--c-ink);
  font-size: var(--fs-sm);
  font-weight: 550;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}

.ui-btn:hover {
  background: var(--c-surface-3);
  border-color: var(--c-line-strong);
}

.ui-btn--primary {
  border-color: var(--c-accent);
  background: var(--c-accent);
  color: #fff;
}

.ui-btn--primary:hover {
  border-color: var(--c-accent-hover);
  background: var(--c-accent-hover);
  color: #fff;
}

.ui-btn--danger {
  border-color: var(--c-danger);
  background: var(--c-danger);
  color: #fff;
}

.ui-btn--danger:hover {
  border-color: #b91c1c;
  background: #b91c1c;
}

@keyframes ui-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes ui-pop-in {
  from { opacity: 0; transform: translateY(6px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

/* -------------------------------------------------------- command palette */

.ui-cmdk-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-cmdk);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 12vh 16px 16px;
  background: rgba(24, 24, 27, 0.4);
  animation: ui-fade-in 140ms var(--ease-out);
}

.ui-cmdk {
  width: min(620px, 100%);
  max-height: min(560px, 76vh);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  box-shadow: var(--shadow-pop);
  animation: ui-pop-in 160ms var(--ease-out);
}

.ui-cmdk__field {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  border-bottom: 1px solid var(--c-line);
  color: var(--c-muted);
}

.ui-cmdk__input {
  flex: 1;
  height: 52px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--c-ink);
  font-size: var(--fs-md);
}

.ui-cmdk__input::placeholder {
  color: var(--c-subtle);
}

.ui-cmdk__list {
  flex: 1;
  overflow-y: auto;
  padding: 6px;
  margin: 0;
  list-style: none;
}

.ui-cmdk__group {
  padding: 10px 10px 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-subtle);
}

.ui-cmdk__item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 40px;
  padding: 6px 10px;
  border-radius: var(--r);
  color: var(--c-ink-2);
  font-size: var(--fs-sm);
  cursor: pointer;
}

.ui-cmdk__item i {
  width: 18px;
  text-align: center;
  color: var(--c-muted);
}

.ui-cmdk__item[aria-selected="true"] {
  background: var(--c-accent-soft);
  color: var(--c-accent-ink);
}

.ui-cmdk__item[aria-selected="true"] i {
  color: var(--c-accent);
}

.ui-cmdk__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.ui-cmdk__text strong {
  font-weight: 550;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-cmdk__text span {
  font-size: var(--fs-xs);
  color: var(--c-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-cmdk__empty {
  padding: 28px 16px;
  text-align: center;
  color: var(--c-muted);
  font-size: var(--fs-sm);
}

.ui-cmdk__foot {
  display: flex;
  gap: 14px;
  padding: 8px 14px;
  border-top: 1px solid var(--c-line);
  background: var(--c-surface-2);
  color: var(--c-muted);
  font-size: var(--fs-xs);
}

.ui-cmdk__foot span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

@media (max-width: 600px) {
  .ui-cmdk-backdrop {
    padding-top: 8px;
  }

  .ui-cmdk__foot {
    display: none;
  }
}

/* Row highlight used by ?focus= deep links. */
.ui-flash {
  animation: ui-flash 2.4s var(--ease-out);
}

@keyframes ui-flash {
  0%, 30% { background-color: var(--c-accent-soft); box-shadow: inset 3px 0 0 var(--c-accent); }
  100% { background-color: transparent; box-shadow: inset 3px 0 0 transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .app-nav,
  body.dashboard-page #main-content,
  .ui-toast,
  .ui-dialog,
  .ui-cmdk,
  .ui-flash {
    transition: none !important;
    animation: none !important;
  }
}

/* ============================================================================
   Phase 2 — shared components on every signed-in screen

   Selector weight is deliberately `.dashboard-page .x` (0-2-0): it ties with
   the older `.products-page .x` page rules and wins on load order, but loses
   to the phase-1 Dashboard / Quotation Hub blocks (`body.… .x`, 0-2-1).
   Visual properties only — never display/position — so no screen's layout
   or show/hide logic can change because of this block.
   ========================================================================== */

/* Page header (the old floating "command bar" card becomes a plain header). */
.dashboard-page .dashboard-command-bar,
.dashboard-page .top-bar {
  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 0 0 4px;
  border-radius: 0;
}

.dashboard-page .page-kicker {
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--c-muted);
}

.dashboard-page .page-intro h1 {
  font-size: var(--fs-2xl);
  font-weight: 650;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--c-ink);
}

.dashboard-page .command-chip,
.dashboard-page .date-time {
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
  background: var(--c-surface);
  box-shadow: none;
  color: var(--c-muted);
  font-size: var(--fs-xs);
  font-weight: 500;
}

.dashboard-page .command-chip i,
.dashboard-page .date-time i {
  color: var(--c-subtle);
}

.dashboard-page .page-header h2,
.dashboard-page .builder-page-title {
  font-size: var(--fs-lg);
  font-weight: 650;
  letter-spacing: -0.015em;
  color: var(--c-ink);
}

/* Cards */
.dashboard-page .card {
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  box-shadow: var(--shadow-xs);
}

.dashboard-page .card-header {
  border-bottom-color: var(--c-line);
}

.dashboard-page .card-header h2,
.dashboard-page .card-header h3 {
  font-size: var(--fs-md);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--c-ink);
}

.dashboard-page .card-subtitle {
  color: var(--c-muted);
}

/* Buttons */
.dashboard-page .btn {
  border-radius: var(--r);
  font-size: var(--fs-sm);
  font-weight: 550;
  box-shadow: none;
  transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}

.dashboard-page .btn:hover {
  transform: none;
}

.dashboard-page .btn-primary,
.dashboard-page .btn.btn-primary {
  border: 1px solid var(--c-accent);
  background: var(--c-accent);
  color: #fff;
  box-shadow: none;
}

.dashboard-page .btn-primary:hover,
.dashboard-page .btn.btn-primary:hover {
  border-color: var(--c-accent-hover);
  background: var(--c-accent-hover);
  color: #fff;
  transform: none;
  box-shadow: none;
}

.dashboard-page .btn-secondary,
.dashboard-page .btn-outline {
  border: 1px solid var(--c-line);
  background: var(--c-surface);
  color: var(--c-ink);
  box-shadow: none;
}

.dashboard-page .btn-secondary:hover,
.dashboard-page .btn-outline:hover {
  border-color: var(--c-line-strong);
  background: var(--c-surface-3);
  color: var(--c-ink);
}

.dashboard-page .btn-danger {
  /* Soft red: destructive actions sit beside primary ones without competing
     with them (and the Configuration screen was built for this look). The
     confirm dialog's own button is the solid red one. */
  border: 1px solid #fecaca;
  background: var(--c-danger-soft);
  color: var(--c-danger);
  box-shadow: none;
}

.dashboard-page .btn-danger:hover {
  border-color: var(--c-danger);
  background: var(--c-danger);
  color: #fff;
}

.dashboard-page .btn:disabled,
.dashboard-page .btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Form controls */
.dashboard-page .form-control,
.dashboard-page .form-select,
.dashboard-page .search-input {
  border: 1px solid var(--c-line);
  border-radius: var(--r);
  background-color: var(--c-surface);
  color: var(--c-ink);
  font-size: var(--fs-sm);
  box-shadow: var(--shadow-xs);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}

.dashboard-page .form-control::placeholder,
.dashboard-page .search-input::placeholder {
  color: var(--c-subtle);
}

.dashboard-page .form-control:focus,
.dashboard-page .form-select:focus,
.dashboard-page .search-input:focus {
  outline: none;
  border-color: var(--c-accent);
  background-color: var(--c-surface);
  box-shadow: 0 0 0 3px var(--c-accent-ring);
}

.dashboard-page .form-control[readonly],
.dashboard-page .form-control:disabled {
  background-color: var(--c-surface-3);
  color: var(--c-muted);
}

.dashboard-page .form-group label,
.dashboard-page .form-label {
  font-size: var(--fs-sm);
  font-weight: 550;
  color: var(--c-ink);
}

/* Modals (backdrop, panel, header) */
.dashboard-page .modal {
  background-color: rgba(24, 24, 27, 0.45);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.dashboard-page .modal-content {
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  box-shadow: var(--shadow-pop);
}

.dashboard-page .modal-header {
  border-bottom: 1px solid var(--c-line);
  background: var(--c-surface);
}

.dashboard-page .modal-header h2,
.dashboard-page .modal-header h3 {
  font-size: var(--fs-md);
  font-weight: 650;
  color: var(--c-ink);
}

.dashboard-page .close-modal {
  border-radius: var(--r-sm);
  color: var(--c-muted);
}

.dashboard-page .close-modal:hover {
  background: var(--c-surface-3);
  color: var(--c-ink);
}

/* Tables */
.dashboard-page .data-table th {
  background: var(--c-surface-2);
  border-bottom: 1px solid var(--c-line);
  color: var(--c-muted);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.dashboard-page .data-table td {
  border-bottom: 1px solid var(--c-line);
  color: var(--c-ink-2);
  font-size: var(--fs-sm);
}

.dashboard-page .data-table tbody tr:hover {
  background: var(--c-surface-2);
}

/* Pagination */
.dashboard-page .pagination-btn {
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  background: var(--c-surface);
  color: var(--c-ink-2);
  font-size: var(--fs-sm);
  font-weight: 500;
  box-shadow: none;
}

.dashboard-page .pagination-btn:hover:not([disabled]) {
  border-color: var(--c-line-strong);
  background: var(--c-surface-3);
  color: var(--c-ink);
}

.dashboard-page .pagination-btn.active {
  border-color: var(--c-ink);
  background: var(--c-ink);
  color: #fff;
}

/* Status badge (Users) */
.dashboard-page .status-badge {
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 550;
}

/* Icon buttons in tables */
.dashboard-page .btn-icon {
  border-radius: var(--r-sm);
  box-shadow: none;
}

/* Page canvas: older screens painted their own gradient backgrounds. */
.dashboard-page .main-content {
  background: transparent;
}

@media (max-width: 900px) {
  .dashboard-page .main-content {
    padding-left: 16px;
    padding-right: 16px;
  }

  .dashboard-page .page-intro h1 {
    font-size: var(--fs-xl);
  }

  /* The page's own date/company chips duplicate the mobile bar. */
  .dashboard-page .top-bar-right .date-time,
  .dashboard-page .top-bar-right .command-chip {
    display: none;
  }
}

/* Phones: wide tables scroll inside their own container rather than
   stretching the page. (Row menus inside them may clip at this width; the
   Quotation Hub uses stacked cards instead.) */
@media (max-width: 900px) {
  .dashboard-page .table-responsive,
  .dashboard-page .table-container,
  .dashboard-page .table-wrap,
  .dashboard-page .table-shell {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}