/* App-level design tokens — maps to Kijox palette/semantic layer */
:root {
  --app-page-bg: var(--semantic-surface, #fff);
  --app-page-bg-muted: rgba(var(--primary-rgb), 0.03);
  --app-page-max-width: 720px;
  /* Single source of truth for the "widen on desktop" convention (see
     CLAUDE.md's Design system section) — every full-bleed page's own
     @media (min-width: 992px) block should read max-width from THIS
     variable instead of hardcoding 70% again, so changing the desktop
     width later means editing this one line. The 992px breakpoint itself
     unfortunately can't live in a variable too — plain CSS doesn't support
     @media (min-width: var(...)) — so that literal still has to be repeated
     in each file's media query; only the width value is centralized here. */
  --app-desktop-content-width: 70%;
  --app-page-padding-x: 16px;
  --app-page-padding-y: 16px;
  --app-page-tab-offset: var(--dash-tab-bar-offset, calc(72px + env(safe-area-inset-bottom, 0)));

  --app-title-size: 24px;
  --app-title-weight: 800;
  --app-subtitle-size: 14px;

  --app-card-radius: var(--radius-3xl, 24px);
  --app-widget-radius: 20px;
  --app-control-radius: var(--radius-md, 12px);
  --app-chip-radius: 10px;

  --app-border: rgba(var(--primary-rgb), 0.08);
  --app-border-strong: rgba(var(--primary-rgb), 0.14);
  --app-shadow-card: 0 8px 20px rgba(var(--primary-rgb), 0.07);
  --app-shadow-widget: 0 10px 32px rgba(var(--primary-rgb), 0.1);

  /* Legacy rs-* aliases for dashboard sub-components */
  --rs-green: var(--primary);
  --rs-green-2: var(--primary-light);
  --rs-gold: var(--accent);
  --rs-gold-bright: var(--accent-light);
  --rs-cream: var(--background);
  --rs-text: var(--text);
  --rs-muted: var(--semantic-text-muted, rgba(26, 26, 26, 0.65));
  --rs-card: var(--surface);
  --rs-soft-green: rgba(var(--primary-rgb), 0.09);
  --rs-border: rgba(var(--primary-rgb), 0.12);
  --rs-shadow: 0 8px 24px rgba(var(--primary-rgb), 0.06);
  --rs-radius-lg: var(--app-card-radius);
}

/* Desktop content-width convention (see CLAUDE.md's Design system section):
   every page should widen past its mobile-width cap at >=992px, except the
   registration/onboarding wizard and the login/auth flow (neither of which
   uses .app-page__inner or this token at all, so they're unaffected here).
   .app-shell itself already widens to 960px at this same breakpoint
   (sections.component.css) — uncapping the token lets .app-page__inner
   actually use that space instead of staying artificially capped at 720px
   inside it. A percentage value (matching the other widened pages) doesn't
   make sense here since .app-page__inner's containing block is already
   .app-shell's OWN capped width, not the viewport — 70% of a 960px shell
   would be narrower than today's flat 720px, not wider. */
@media (min-width: 992px) {
  :root {
    --app-page-max-width: none;
  }
}

/* Bootstrap modals must sit above fixed dashboard chrome (bottom nav: 1200,
   header: 1100). Both rules share the SAME z-index deliberately, not a
   tiered pair — a tiered pair (.modal-backdrop lower, .modal higher) put
   EVERY modal strictly above EVERY backdrop, so a second modal opened from
   within a first (e.g. TicketFormModalComponent's "Add Image" opening
   GalleryModalComponent) got a backdrop that could never cover the first
   modal, no matter how many were stacked — the first modal's edges stayed
   visible around the second. Equal z-index falls back to DOM order instead,
   which ngx-bootstrap already gets right (each new modal+backdrop pair is
   appended after the previous ones), so nested modals stack correctly. */
.modal-backdrop,
.modal {
  z-index: 1290 !important;
}