/* ============================================================
   Aztax Design Tokens — design-tokens.css
   Layout, spacing, opacity, and semantic color utility classes.
   Raw color values (hex + RGB) live in application.css (@theme + :root).
   Use named utilities here for repeated or semantic patterns.
   Prefer `bg-primary-tint` over `bg-primary/10`,
   `bg-danger-muted` over `bg-red/10`,
   and `bg-surface-table` over repeated neutral opacity in HTML.
   ============================================================ */

:root {
  /* ----------------------------------------------------------
     TYPOGRAPHY
     ---------------------------------------------------------- */

  /* Card title: the only permitted non-standard font size. */
  --font-size-card-title: 15px;

  /* ----------------------------------------------------------
     LAYOUT
     ---------------------------------------------------------- */

  /* Sidebar: fixed navigation width */
  --sidebar-width: 248px;

  /* Slideovers: standard panel width */
  --slideover-width: 420px;

  /* Mockup canvas: standard artifact/content width */
  --mockup-canvas-width: 1200px;

  /* ----------------------------------------------------------
     OPACITY SCALE
     Used for semantic color and surface alpha values.
     Do not introduce new opacity values.
     ---------------------------------------------------------- */

  --opacity-2: 2%; /* Subtle          — interactive item hover base     */
  --opacity-3: 3%; /* Faint           — selected card background        */
  --opacity-4: 4%; /* Light           — button hover, error row hover   */
  --opacity-5: 5%; /* Soft            — selected option background      */
  --opacity-6: 6%; /* Gentle          — soft CTA area, warning banner   */
  --opacity-7: 7%; /* Mild            — compliance notice background    */
  --opacity-8: 8%; /* Active state    — nav item, filter tab, badge bg  */
  --opacity-10: 10%; /* Muted           — status badge backgrounds        */
  --opacity-15: 15%; /* Subtle border   — warning/error banner borders    */
  --opacity-20: 20%; /* Dim border      — nav group indent, focus ring    */
  --opacity-25: 25%; /* Mid border      — warning card border             */
  --opacity-30: 30%; /* Dim             — danger button border            */
  --opacity-40: 40%; /* Light border    — error/compliance notice borders */
  --opacity-50: 50%; /* Mid             — hover border on active items    */
  --opacity-60: 60%; /* Strong text     — muted label, count badge text   */
  --opacity-70: 70%; /* Dim text        — icon hover color                */
  --opacity-80: 80%; /* Soft text       — secondary label text            */

  /* ----------------------------------------------------------
     TABLE COLUMN SCALE
     Percentage-based column width tokens. Reusable across any
     table — not tied to a specific page or data model.
     ---------------------------------------------------------- */

  --col-icon: 4%; /* Icon-only column (action button, checkbox) */
  --col-narrow: 10%; /* Short data (counts, status flags)          */
  --col-base: 20%; /* Default data column                        */
  --col-md: 22%; /* Medium-wide (primary text identifier)      */
  --col-lg: 24%; /* Large (secondary text identifier)          */
  --col-xl: 35%; /* Extended content — compact                 */
  --col-2xl: 38%; /* Extended content — standard                */
  --col-3xl: 40%; /* Extended content — spacious                */

  /* ----------------------------------------------------------
     TABLE LAYOUT
     ---------------------------------------------------------- */

  /* Minimum table width before horizontal scroll activates */
  --table-min-width: 560px;
}

/* ============================================================
   SEMANTIC UTILITY CLASSES
   Built on the tokens above.
   Example families: interaction (`bg-primary-tint`),
   confirmation (`bg-accent-muted`),
   warning (`bg-warning-muted`),
   error (`bg-danger-muted`),
   structure (`bg-surface-table`).
   ============================================================ */

/* --- Typography ------------------------------------------- */

.text-card-title {
  font-size: var(--font-size-card-title);
}

/* Slashed zero + stylistic alternates on monospace text. Disambiguates
   0/O and I/l/1 in tax IDs (TIN), invoice IDs, and other code-adjacent
   strings where misreading a digit has compliance consequences. */
.font-mono {
  font-feature-settings: "zero" 1, "ss02" 1;
}

/* --- Layout ----------------------------------------------- */

.w-sidebar {
  width: var(--sidebar-width);
}

.w-slideover {
  width: min(100vw, var(--slideover-width));
}

.max-w-mockup-canvas {
  max-width: var(--mockup-canvas-width);
}

.min-w-table {
  min-width: var(--table-min-width);
}

/* --- Table column widths ---------------------------------- */

.col-icon {
  width: var(--col-icon);
}
.col-narrow {
  width: var(--col-narrow);
}
.col-base {
  width: var(--col-base);
}
.col-md {
  width: var(--col-md);
}
.col-lg {
  width: var(--col-lg);
}
.col-xl {
  width: var(--col-xl);
}
.col-2xl {
  width: var(--col-2xl);
}
.col-3xl {
  width: var(--col-3xl);
}

/* ===========================================================
   COLOR TINT CLASSES
   All color+opacity combinations used in the UI.
   Named by semantic purpose, not by the underlying value.
   =========================================================== */

/* --- Primary background tints ----------------------------- */

/* --- Neutral surface backgrounds ------------------------- */

/* /60 — table headers and structured list heads */
.bg-surface-table {
  background-color: rgb(var(--rgb-slate-50) / var(--opacity-60));
}

/* /50 — secondary surface sections and compact status rows */
.bg-surface-section {
  background-color: rgb(var(--rgb-slate-50) / var(--opacity-50));
}

/* /40 — totals footers and low-emphasis summaries */
.bg-surface-footer {
  background-color: rgb(var(--rgb-slate-50) / var(--opacity-40));
}

/* /80 — disabled overlays above white cards */
.bg-overlay-soft {
  background-color: rgb(var(--rgb-white) / var(--opacity-80));
}

/* /30 — modal and drawer scrim */
.bg-scrim {
  background-color: rgb(var(--rgb-slate-900) / var(--opacity-30));
}

/* /2  — hover background for selectable items (radio, checkbox options) */
.bg-primary-subtle {
  background-color: rgb(var(--rgb-primary) / var(--opacity-2));
}

/* /3  — selected state background for category/option cards */
.bg-primary-faint {
  background-color: rgb(var(--rgb-primary) / var(--opacity-3));
}

/* /4  — hover background for outline buttons and info blocks */
.bg-primary-wash {
  background-color: rgb(var(--rgb-primary) / var(--opacity-4));
}

/* /5  — selected option background; group-hover icon fill */
.bg-primary-light {
  background-color: rgb(var(--rgb-primary) / var(--opacity-5));
}

/* /6  — soft CTA background */
.bg-primary-soft {
  background-color: rgb(var(--rgb-primary) / var(--opacity-6));
}

/* /8  — active nav item, filter tab, tax code badge */
.bg-primary-tint {
  background-color: rgb(var(--rgb-primary) / var(--opacity-8));
}

/* /10 — icon background inside selected cards */
.bg-primary-muted {
  background-color: rgb(var(--rgb-primary) / var(--opacity-10));
}

/* --- Accent (teal) background tints ---------------------- */

/* /7  — compliance notice background */
.bg-accent-soft {
  background-color: rgb(var(--rgb-accent) / var(--opacity-7));
}

/* /8  — verified/complete confirmation background */
.bg-accent-tint {
  background-color: rgb(var(--rgb-accent) / var(--opacity-8));
}

/* /10 — positive status badge background */
.bg-accent-muted {
  background-color: rgb(var(--rgb-accent) / var(--opacity-10));
}

/* --- Danger (red) background tints ----------------------- */

/* /2 base + /4 hover — overdue/error table rows */
.bg-danger-row {
  background-color: rgb(var(--rgb-red) / var(--opacity-2));
}
.bg-danger-row:hover {
  background-color: rgb(var(--rgb-red) / var(--opacity-4));
}

/* /4  — error banner and notice backgrounds */
.bg-danger-wash {
  background-color: rgb(var(--rgb-red) / var(--opacity-4));
}

/* /5  — danger button hover background */
.bg-danger-light {
  background-color: rgb(var(--rgb-red) / var(--opacity-5));
}

/* /6  — error notice block background */
.bg-danger-soft {
  background-color: rgb(var(--rgb-red) / var(--opacity-6));
}

/* /8  — rejected state background */
.bg-danger-tint {
  background-color: rgb(var(--rgb-red) / var(--opacity-8));
}

/* /10 — error status badge background */
.bg-danger-muted {
  background-color: rgb(var(--rgb-red) / var(--opacity-10));
}

/* --- Warning (amber) background tints -------------------- */

/* /5  — warning notice (compact, inline) */
.bg-warning-notice {
  background-color: rgb(var(--rgb-amber) / var(--opacity-5));
}

/* /6  — warning banner (prominent, between header and card) */
.bg-warning-banner {
  background-color: rgb(var(--rgb-amber) / var(--opacity-6));
}

/* /10 — warning status badge background */
.bg-warning-muted {
  background-color: rgb(var(--rgb-amber) / var(--opacity-10));
}

/* /2 base + /4 hover — amber warning table rows */
.bg-warning-row {
  background-color: rgb(var(--rgb-amber) / var(--opacity-2));
}
.bg-warning-row:hover {
  background-color: rgb(var(--rgb-amber) / var(--opacity-4));
}

/* --- Info (sky) background tints ------------------------- */

/* /6  — global banner background */
.bg-info-banner {
  background-color: rgb(var(--rgb-info) / var(--opacity-6));
}

/* /10 — processing/informational badge background */
.bg-info-muted {
  background-color: rgb(var(--rgb-info) / var(--opacity-10));
}

/* --- Primary border tints --------------------------------- */

.border-primary-faint {
  border-color: rgb(var(--rgb-primary) / var(--opacity-10));
}
.border-primary-dim {
  border-color: rgb(var(--rgb-primary) / var(--opacity-20));
}
.border-primary-soft {
  border-color: rgb(var(--rgb-primary) / var(--opacity-30));
}
.border-primary-light {
  border-color: rgb(var(--rgb-primary) / var(--opacity-40));
}
.border-primary-mid {
  border-color: rgb(var(--rgb-primary) / var(--opacity-50));
}
.border-primary-strong {
  border-color: rgb(var(--rgb-primary) / var(--opacity-60));
}

/* --- Danger (red) border tints ---------------------------- */

.border-danger-subtle {
  border-color: rgb(var(--rgb-red) / var(--opacity-15));
}
.border-danger-dim {
  border-color: rgb(var(--rgb-red) / var(--opacity-20));
}
.border-danger-soft {
  border-color: rgb(var(--rgb-red) / var(--opacity-30));
}
.border-danger-light {
  border-color: rgb(var(--rgb-red) / var(--opacity-40));
}
.border-danger-strong {
  border-color: rgb(var(--rgb-red) / var(--opacity-60));
}

/* --- Warning (amber) border tints ------------------------- */

.border-warning-subtle {
  border-color: rgb(var(--rgb-amber) / var(--opacity-15));
}
.border-warning-mid {
  border-color: rgb(var(--rgb-amber) / var(--opacity-25));
}

/* --- Info (sky) border tints ----------------------------- */

.border-info-subtle {
  border-color: rgb(var(--rgb-info) / var(--opacity-15));
}

/* --- Accent (teal) border tints -------------------------- */

.border-accent-light {
  border-color: rgb(var(--rgb-accent) / var(--opacity-40));
}

/* --- Primary ring tints (focus rings on inputs) ----------- */

.ring-primary-dim {
  --tw-ring-color: rgb(var(--rgb-primary) / var(--opacity-20));
}
.ring-primary-soft {
  --tw-ring-color: rgb(var(--rgb-primary) / var(--opacity-30));
}

/* --- Danger ring tints ------------------------------------ */

.ring-danger-faint {
  --tw-ring-color: rgb(var(--rgb-red) / var(--opacity-10));
}
.ring-danger-dim {
  --tw-ring-color: rgb(var(--rgb-red) / var(--opacity-20));
}

/* --- Accent ring tints ------------------------------------ */

.ring-accent-faint {
  --tw-ring-color: rgb(var(--rgb-accent) / var(--opacity-10));
}

/* --- Warning ring tints ----------------------------------- */

.ring-warning-faint {
  --tw-ring-color: rgb(var(--rgb-amber) / var(--opacity-10));
}

/* --- Primary text tints ----------------------------------- */

.text-primary-muted {
  color: rgb(var(--rgb-primary) / var(--opacity-60));
}
.text-primary-dim {
  color: rgb(var(--rgb-primary) / var(--opacity-70));
}

/* --- Danger (red) text tints ------------------------------ */

.text-danger-muted {
  color: rgb(var(--rgb-red) / var(--opacity-60));
}
.text-danger-dim {
  color: rgb(var(--rgb-red) / var(--opacity-70));
}
.text-danger-soft {
  color: rgb(var(--rgb-red) / var(--opacity-80));
}

/* --- Accent (teal) text tints ---------------------------- */

.text-accent-dim {
  color: rgb(var(--rgb-accent) / var(--opacity-50));
}
.text-accent-soft {
  color: rgb(var(--rgb-accent) / var(--opacity-80));
}

/* ===========================================================
   COMPONENT PATTERNS
   Reusable multi-property patterns for buttons, tables, etc.
   =========================================================== */

/* --- Gradient primary button --------------------------------
   Use for the main call-to-action in a page header or form
   footer. Pair with .btn-secondary for adjacent secondary
   actions.

   Usage:
     <button class="btn-primary px-4 py-2 text-sm font-semibold
       rounded-lg inline-flex items-center gap-2">
       Save
     </button>
   ------------------------------------------------------------ */

.btn-primary {
  color: white;
  background-image: linear-gradient(to bottom, #3b82f6, #1d4ed8);
  box-shadow:
    0 1px 2px 0 rgb(29 78 216 / 0.30),
    0 1px 3px 0 rgb(0 0 0 / 0.05);
  cursor: pointer;
}
.btn-primary:hover {
  background-image: linear-gradient(to bottom, #3b82f6, #1e40af);
}
.btn-primary:active {
  transform: scale(0.97);
}
.btn-primary:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

/* --- Secondary button ---------------------------------------
   Use alongside .btn-primary for lower-emphasis actions
   (Edit, Cancel, Filter, etc.).

   Usage:
     <button class="btn-secondary px-3 py-1.5 text-sm font-semibold
       rounded-lg inline-flex items-center gap-1.5">
       Edit
     </button>
   ------------------------------------------------------------ */

.btn-secondary {
  color: var(--color-slate-700, #334155);
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  outline: 1px solid rgb(var(--rgb-slate-900) / 0.10);
  outline-offset: -1px;
  cursor: pointer;
}
.btn-secondary:hover {
  background-color: rgb(var(--rgb-slate-50));
}
.btn-secondary:active {
  transform: scale(0.97);
}
.btn-secondary:focus-visible {
  outline: 2px solid #94a3b8;
  outline-offset: 2px;
}

/* --- Flat table ---------------------------------------------
   Use for tables that sit directly on the page background
   (no card wrapper). Apply to the <table> element.

   Header cells use .flat-table-th, body cells use
   .flat-table-td. First column in each row should add
   .flat-table-cell-first for flush-left alignment.

   Usage:
     <table class="flat-table">
       <thead>
         <tr class="flat-table-header">
           <th class="flat-table-th flat-table-cell-first">Invoice</th>
           <th class="flat-table-th">Date</th>
         </tr>
       </thead>
       <tbody>
         <tr class="flat-table-row group">
           <td class="flat-table-td flat-table-cell-first">INV-001</td>
           <td class="flat-table-td">Jan 1, 2026</td>
         </tr>
       </tbody>
     </table>
   ------------------------------------------------------------ */

.flat-table {
  width: 100%;
}
.flat-table-header {
  border-bottom: 1px solid rgb(var(--rgb-slate-900) / 0.10);
}
.flat-table-th {
  text-align: left;
  font-size: 0.875rem;
  font-weight: 600;
  color: rgb(var(--rgb-slate-900) / 0.40);
  padding: 0.75rem 1rem;
  white-space: nowrap;
}
.flat-table-row {
  border-bottom: 1px solid rgb(var(--rgb-slate-900) / 0.05);
  cursor: pointer;
  transition: background-color 150ms ease;
}
.flat-table-row:last-child {
  border-bottom: none;
}
.flat-table-row:hover {
  background-color: rgb(255 255 255 / 0.60);
}
.flat-table-row:active {
  background-color: rgb(var(--rgb-slate-900) / 0.04);
}
.flat-table-td {
  padding: 0.875rem 1rem;
  font-size: 0.875rem;
}
.flat-table-cell-first {
  padding-left: 0;
}

/* --- Filter dropdown ----------------------------------------
   Inline filter dropdowns used in index page filter bars.
   Button follows the btn-secondary outline pattern.
   Menu panel uses a spread-shadow border (ring-1 equivalent) with drop shadows per /ui shadow rules.

   Usage:
     <div data-controller="filter-dropdown" class="relative">
       <button class="filter-dropdown-btn">
         Payment <svg …chevron… />
       </button>
       <div class="filter-dropdown-menu hidden" data-filter-dropdown-target="menu">
         <button class="filter-dropdown-option">All</button>
         <div class="filter-dropdown-divider"></div>
         <button class="filter-dropdown-option filter-dropdown-option-danger">Overdue</button>
       </div>
     </div>
   ------------------------------------------------------------ */

.filter-dropdown-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.625rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-slate-700);
  outline: 1px solid rgb(var(--rgb-slate-900) / 0.10);
  outline-offset: -1px;
  border-radius: 0.375rem;
  background: white;
  cursor: pointer;
  min-height: 2rem; /* 32px Fitts minimum */
  transition: background-color 150ms ease, outline-color 150ms ease;
}
.filter-dropdown-btn:hover {
  background-color: var(--color-slate-50);
  outline-color: rgb(var(--rgb-slate-900) / 0.15);
}
.filter-dropdown-btn:active {
  background-color: var(--color-slate-100);
}
.filter-dropdown-btn-active {
  outline-color: var(--color-primary);
  box-shadow: 0 0 0 1px var(--color-primary);
}

.filter-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 0.25rem;
  min-width: 10rem;
  background: white;
  border-radius: 0.5rem;
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.1), 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  padding: 0.25rem;
  z-index: 50;
}

.filter-dropdown-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.375rem 0.5rem;
  font-size: 0.8125rem;
  color: var(--color-slate-700);
  border-radius: 0.25rem;
  cursor: pointer;
}
.filter-dropdown-option:hover {
  background-color: var(--color-slate-50);
}
.filter-dropdown-option-active {
  color: var(--color-primary);
  font-weight: 500;
}
.filter-dropdown-option-danger {
  color: var(--color-red);
}
.filter-dropdown-option-danger:hover {
  background-color: rgb(var(--rgb-red) / var(--opacity-4));
}

.filter-dropdown-check {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

.filter-dropdown-count {
  margin-left: auto;
  font-size: 0.75rem;
  color: var(--color-slate-400);
  font-variant-numeric: tabular-nums;
}

.filter-dropdown-divider {
  height: 1px;
  background-color: rgb(var(--rgb-slate-900) / 0.05);
  margin: 0.25rem 0.5rem;
}

/* ===========================================================
   STATE VARIANT CLASSES
   Hover, focus, and group-hover equivalents for the utilities above.
   =========================================================== */

/* --- Hover: background ------------------------------------ */

.hover\:bg-primary-subtle:hover {
  background-color: rgb(var(--rgb-primary) / var(--opacity-2));
}
.hover\:bg-primary-wash:hover {
  background-color: rgb(var(--rgb-primary) / var(--opacity-4));
}
.hover\:bg-primary-muted:hover {
  background-color: rgb(var(--rgb-primary) / var(--opacity-10));
}
.hover\:bg-danger-wash:hover {
  background-color: rgb(var(--rgb-red) / var(--opacity-4));
}
.hover\:bg-danger-light:hover {
  background-color: rgb(var(--rgb-red) / var(--opacity-5));
}

/* --- Hover: border ---------------------------------------- */

.hover\:border-primary-light:hover {
  border-color: rgb(var(--rgb-primary) / var(--opacity-40));
}
.hover\:border-primary-mid:hover {
  border-color: rgb(var(--rgb-primary) / var(--opacity-50));
}

/* --- Hover: text ------------------------------------------ */

.hover\:text-danger-soft:hover {
  color: rgb(var(--rgb-red) / var(--opacity-80));
}

/* --- Focus: ring ------------------------------------------ */

.focus\:ring-primary-dim:focus {
  --tw-ring-color: rgb(var(--rgb-primary) / var(--opacity-20));
}
.focus\:ring-primary-soft:focus {
  --tw-ring-color: rgb(var(--rgb-primary) / var(--opacity-30));
}
.focus\:ring-danger-dim:focus {
  --tw-ring-color: rgb(var(--rgb-red) / var(--opacity-20));
}

/* --- Focus-within: ring ----------------------------------- */

.focus-within\:ring-primary-dim:focus-within {
  --tw-ring-color: rgb(var(--rgb-primary) / var(--opacity-20));
}

/* --- Structural state ------------------------------------- */

.active-menu-path {
  background-color: rgb(var(--rgb-slate-100)) !important;
}

/* --- Group-hover: background ------------------------------ */

.group:hover .group-hover\:bg-primary-light {
  background-color: rgb(var(--rgb-primary) / var(--opacity-5));
}
.group:hover .group-hover\:bg-primary-wash {
  background-color: rgb(var(--rgb-primary) / var(--opacity-4));
}

/* --- Group-hover: border ---------------------------------- */

.group:hover .group-hover\:border-primary-mid {
  border-color: rgb(var(--rgb-primary) / var(--opacity-50));
}

/* --- Group-hover: text ------------------------------------ */

.group:hover .group-hover\:text-primary-dim {
  color: rgb(var(--rgb-primary) / var(--opacity-70));
}

/* ===========================================================
   VIEW TRANSITIONS — sidebar active-pill morph
   The sidebar's active nav item carries `view-transition-name:
   active-nav-pill`. When the user navigates to a new page, the
   browser auto-pairs the outgoing and incoming pills (same name,
   different positions) and animates the transition.
   Browsers without support degrade gracefully — the pill simply
   appears at the new position with no animation.
   =========================================================== */

@supports (view-transition-name: a) {
  ::view-transition-group(active-nav-pill) {
    animation-duration: 200ms;
    animation-timing-function: ease-in-out;
  }
}