@charset "UTF-8";
/**
 * SolidInvoice Main Application Stylesheet
 *
 * This is the main entry point for all application styles.
 * It imports Bootstrap, the design system, components, and layouts.
 */
/**
 * SolidInvoice Design System - Main Index
 *
 * Imports all design system foundation files.
 * This file should be imported early in app.scss,
 * after Bootstrap functions/variables but before components.
 */
/**
 * SolidInvoice Design System - Design Tokens
 *
 * Core design tokens defining colors, spacing, shadows, border radius,
 * and transitions. All values are exposed as CSS custom properties.
 *
 * These are Tabler's own tokens, not a parallel namespace. Tabler 1.5 removed the `$prefix`
 * Sass variable, so there is no way to compile it under a name of ours; a token declared here
 * with a name Tabler also uses — `--tblr-primary`, the grey ramp, the shadows — overwrites
 * Tabler's and carries the brand through every component built on it. Tokens with no Tabler
 * counterpart sit in the same namespace rather than a private one, so there is a single answer
 * to "where does this value come from".
 */
:root {
  --tblr-primary: #2e963a;
  --tblr-primary-rgb: 46, 150, 58;
  --tblr-primary-hover: #268032;
  --tblr-primary-dark: #1f6c29;
  --tblr-primary-light: #e8f5e9;
  --tblr-primary-lighter: #f1f9f2;
  --tblr-accent: #f0a015;
  --tblr-accent-rgb: 240, 160, 21;
  --tblr-accent-hover: #d89012;
  --tblr-accent-dark: #c8820e;
  --tblr-accent-light: #fff8e1;
  --tblr-accent-lighter: #fffcf0;
  --tblr-gray-50: #f8fafc;
  --tblr-gray-100: #f1f5f9;
  --tblr-gray-200: #e2e8f0;
  --tblr-gray-300: #cbd5e1;
  --tblr-gray-400: #94a3b8;
  --tblr-gray-500: #64748b;
  --tblr-gray-600: #475569;
  --tblr-gray-700: #334155;
  --tblr-gray-800: #1e293b;
  --tblr-gray-900: #0f172a;
  --tblr-success: #10b981;
  --tblr-success-rgb: 16, 185, 129;
  --tblr-success-hover: #059669;
  --tblr-success-dark: #047857;
  --tblr-success-light: #d1fae5;
  --tblr-success-lighter: #ecfdf5;
  --tblr-danger: #ef4444;
  --tblr-danger-rgb: 239, 68, 68;
  --tblr-danger-hover: #dc2626;
  --tblr-danger-dark: #b91c1c;
  --tblr-danger-light: #fee2e2;
  --tblr-danger-lighter: #fef2f2;
  --tblr-warning: #f59e0b;
  --tblr-warning-rgb: 245, 158, 11;
  --tblr-warning-hover: #d97706;
  --tblr-warning-dark: #92400e;
  --tblr-warning-light: #fef3c7;
  --tblr-warning-lighter: #fffbeb;
  --tblr-info: #3b82f6;
  --tblr-info-rgb: 59, 130, 246;
  --tblr-info-hover: #2563eb;
  --tblr-info-dark: #1d4ed8;
  --tblr-info-light: #dbeafe;
  --tblr-info-lighter: #eff6ff;
  --tblr-body-bg: #f4f6f8;
  --tblr-surface: #ffffff;
  --tblr-surface-hover: #f8fafc;
  --tblr-surface-elevated: #ffffff;
  --tblr-surface-overlay: rgb(15 23 42 / 50%);
  --tblr-body-color: var(--tblr-text-primary);
  --tblr-text-primary: #1e293b;
  --tblr-text-secondary: #475569;
  --tblr-text-muted: #64748b;
  --tblr-text-light: #94a3b8;
  --tblr-text-inverse: #ffffff;
  --tblr-border: #e2e8f0;
  --tblr-border-light: #f1f5f9;
  --tblr-border-dark: #cbd5e1;
  --tblr-link-color: var(--tblr-primary);
  --tblr-link-hover-color: var(--tblr-primary-dark);
}

:root {
  --tblr-space-0: 0;
  --tblr-space-px: 1px;
  --tblr-space-0-5: 0.125rem;
  --tblr-space-1: 0.25rem;
  --tblr-space-1-5: 0.375rem;
  --tblr-space-2: 0.5rem;
  --tblr-space-2-5: 0.625rem;
  --tblr-space-3: 0.75rem;
  --tblr-space-3-5: 0.875rem;
  --tblr-space-4: 1rem;
  --tblr-space-5: 1.25rem;
  --tblr-space-6: 1.5rem;
  --tblr-space-7: 1.75rem;
  --tblr-space-8: 2rem;
  --tblr-space-9: 2.25rem;
  --tblr-space-10: 2.5rem;
  --tblr-space-11: 2.75rem;
  --tblr-space-12: 3rem;
  --tblr-space-14: 3.5rem;
  --tblr-space-16: 4rem;
  --tblr-space-20: 5rem;
  --tblr-space-24: 6rem;
}

:root {
  --tblr-radius-none: 0;
  --tblr-radius-sm: 0.375rem;
  --tblr-radius-md: 0.5rem;
  --tblr-radius-lg: 0.75rem;
  --tblr-radius-xl: 1rem;
  --tblr-radius-2xl: 1.5rem;
  --tblr-radius-full: 9999px;
}

:root {
  --tblr-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 5%);
  --tblr-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 10%), 0 1px 2px -1px rgb(0 0 0 / 10%);
  --tblr-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 10%), 0 2px 4px -2px rgb(0 0 0 / 10%);
  --tblr-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 10%), 0 4px 6px -4px rgb(0 0 0 / 10%);
  --tblr-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 10%), 0 8px 10px -6px rgb(0 0 0 / 10%);
  --tblr-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 25%);
  --tblr-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 5%);
  --tblr-shadow-primary: 0 4px 14px 0 rgb(46 150 58 / 25%);
  --tblr-shadow-primary-lg: 0 8px 20px 0 rgb(46 150 58 / 30%);
  --tblr-shadow-danger: 0 4px 14px 0 rgb(239 68 68 / 25%);
  --tblr-shadow-danger-lg: 0 8px 20px 0 rgb(239 68 68 / 30%);
  --tblr-ring-primary: 0 0 0 3px rgb(46 150 58 / 15%);
  --tblr-ring-danger: 0 0 0 3px rgb(239 68 68 / 15%);
  --tblr-ring-offset: 0 0 0 2px var(--tblr-surface);
}

:root {
  --tblr-duration-fast: 150ms;
  --tblr-duration-base: 200ms;
  --tblr-duration-slow: 300ms;
  --tblr-duration-slower: 400ms;
  --tblr-ease-linear: linear;
  --tblr-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --tblr-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --tblr-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --tblr-transition-fast: var(--tblr-duration-fast) var(--tblr-ease-in-out);
  --tblr-transition-base: var(--tblr-duration-base) var(--tblr-ease-in-out);
  --tblr-transition-slow: var(--tblr-duration-slow) var(--tblr-ease-in-out);
  --tblr-transition-colors: color var(--tblr-transition-fast),
                           background-color var(--tblr-transition-fast),
                           border-color var(--tblr-transition-fast);
  --tblr-transition-shadow: box-shadow var(--tblr-transition-base);
  --tblr-transition-transform: transform var(--tblr-transition-base);
  --tblr-transition-all: all var(--tblr-transition-base);
}

:root {
  --tblr-z-dropdown: 1000;
  --tblr-z-sticky: 1020;
  --tblr-z-fixed: 1030;
  --tblr-z-modal-backdrop: 1040;
  --tblr-z-modal: 1050;
  --tblr-z-popover: 1060;
  --tblr-z-tooltip: 1070;
  --tblr-z-toast: 1080;
}

:root {
  --tblr-card-bg: var(--tblr-surface);
  --tblr-card-border: var(--tblr-border-light);
  --tblr-card-radius: var(--tblr-radius-lg);
  --tblr-card-shadow: var(--tblr-shadow-sm);
  --tblr-card-padding: var(--tblr-space-6);
  --tblr-card-header-padding: var(--tblr-space-4) var(--tblr-space-6);
  --tblr-card-footer-padding: var(--tblr-space-4) var(--tblr-space-6);
  --tblr-input-bg: var(--tblr-surface);
  --tblr-input-border: var(--tblr-border);
  --tblr-input-radius: var(--tblr-radius-md);
  --tblr-input-padding-y: var(--tblr-space-2-5);
  --tblr-input-padding-x: var(--tblr-space-4);
  --tblr-input-focus-border: var(--tblr-primary);
  --tblr-input-focus-ring: var(--tblr-ring-primary);
  --tblr-btn-radius: var(--tblr-radius-md);
  --tblr-btn-padding-y: var(--tblr-space-2-5);
  --tblr-btn-padding-x: var(--tblr-space-4);
  --tblr-btn-font-weight: 500;
  --tblr-modal-bg: var(--tblr-surface);
  --tblr-modal-radius: var(--tblr-radius-xl);
  --tblr-modal-shadow: var(--tblr-shadow-xl);
  --tblr-modal-padding: var(--tblr-space-6);
  --tblr-table-bg: var(--tblr-surface);
  --tblr-table-border: var(--tblr-border-light);
  --tblr-table-header-bg: var(--tblr-gray-50);
  --tblr-table-row-hover-bg: var(--tblr-gray-50);
  --tblr-table-cell-padding: var(--tblr-space-4) var(--tblr-space-6);
  --tblr-alert-radius: var(--tblr-radius-md);
  --tblr-alert-padding: var(--tblr-space-4);
  --tblr-money-currency: var(--tblr-text-secondary);
  --tblr-money-neutral: var(--tblr-text-primary);
  --tblr-money-paid: var(--tblr-success-dark);
  --tblr-money-overdue: var(--tblr-danger-dark);
  --tblr-money-total-scale: 1.125;
  --tblr-money-currency-scale: 0.75em;
}

/**
 * SolidInvoice Design System - Typography
 *
 * Typography scale, font families, weights, and line heights.
 * Uses system fonts for optimal performance and native feel.
 */
:root {
  --tblr-font-sans: -apple-system, blinkmacsystemfont, 'Segoe UI', roboto,
                   'Helvetica Neue', arial, 'Noto Sans', sans-serif,
                   'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
                   'Noto Color Emoji';
  --tblr-font-mono: ui-monospace, sfmono-regular, 'SF Mono', menlo, monaco,
                   consolas, 'Liberation Mono', 'Courier New', monospace;
  --tblr-font-family: var(--tblr-font-sans);
}

:root {
  --tblr-text-xs: 0.75rem;
  --tblr-text-sm: 0.8125rem;
  --tblr-text-base: 0.9375rem;
  --tblr-text-md: 1rem;
  --tblr-text-lg: 1.125rem;
  --tblr-text-xl: 1.25rem;
  --tblr-text-2xl: 1.5rem;
  --tblr-text-3xl: 1.875rem;
  --tblr-text-4xl: 2.25rem;
  --tblr-text-5xl: 3rem;
}

:root {
  --tblr-leading-none: 1;
  --tblr-leading-tight: 1.25;
  --tblr-leading-snug: 1.375;
  --tblr-leading-normal: 1.5;
  --tblr-leading-relaxed: 1.625;
  --tblr-leading-loose: 2;
}

:root {
  --tblr-font-thin: 100;
  --tblr-font-extralight: 200;
  --tblr-font-light: 300;
  --tblr-font-normal: 400;
  --tblr-font-medium: 500;
  --tblr-font-semibold: 600;
  --tblr-font-bold: 700;
  --tblr-font-extrabold: 800;
  --tblr-font-black: 900;
}

:root {
  --tblr-tracking-tighter: -0.05em;
  --tblr-tracking-tight: -0.025em;
  --tblr-tracking-normal: 0;
  --tblr-tracking-wide: 0.025em;
  --tblr-tracking-wider: 0.05em;
  --tblr-tracking-widest: 0.1em;
}

.text-page-title {
  font-size: var(--tblr-text-2xl);
  font-weight: var(--tblr-font-semibold);
  line-height: var(--tblr-leading-tight);
  color: var(--tblr-text-primary);
  letter-spacing: var(--tblr-tracking-tight);
}

.text-page-subtitle {
  font-size: var(--tblr-text-base);
  font-weight: var(--tblr-font-normal);
  line-height: var(--tblr-leading-normal);
  color: var(--tblr-text-muted);
}

.text-card-title {
  font-size: var(--tblr-text-lg);
  font-weight: var(--tblr-font-semibold);
  line-height: var(--tblr-leading-snug);
  color: var(--tblr-text-primary);
}

.text-card-subtitle {
  font-size: var(--tblr-text-sm);
  font-weight: var(--tblr-font-normal);
  line-height: var(--tblr-leading-normal);
  color: var(--tblr-text-muted);
}

.text-section-title {
  font-size: var(--tblr-text-md);
  font-weight: var(--tblr-font-semibold);
  line-height: var(--tblr-leading-snug);
  color: var(--tblr-text-primary);
  display: flex;
  align-items: center;
  gap: var(--tblr-space-2);
}
.text-section-title svg,
.text-section-title i {
  color: var(--tblr-primary);
  opacity: 0.9;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.text-label {
  font-size: var(--tblr-text-sm);
  font-weight: var(--tblr-font-medium);
  line-height: var(--tblr-leading-normal);
  color: var(--tblr-text-secondary);
}

.text-body {
  font-size: var(--tblr-text-base);
  font-weight: var(--tblr-font-normal);
  line-height: var(--tblr-leading-relaxed);
  color: var(--tblr-body-color);
}

.text-help {
  font-size: var(--tblr-text-sm);
  font-weight: var(--tblr-font-normal);
  line-height: var(--tblr-leading-normal);
  color: var(--tblr-text-muted);
}

.text-mono {
  font-family: var(--tblr-font-mono);
  font-size: var(--tblr-text-sm);
}

.text-table-header {
  font-size: var(--tblr-text-xs);
  font-weight: var(--tblr-font-semibold);
  line-height: var(--tblr-leading-normal);
  color: var(--tblr-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tblr-tracking-wider);
}

.text-emphasis {
  font-weight: var(--tblr-font-semibold);
  color: var(--tblr-text-primary);
}

.text-subtle {
  color: var(--tblr-text-muted);
}

.text-link {
  color: var(--tblr-link-color);
  text-decoration: none;
  transition: color var(--tblr-transition-fast);
}
.text-link:hover {
  color: var(--tblr-link-hover-color);
  text-decoration: underline;
}

.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text-line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.text-line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/**
 * SolidInvoice Design System - Component Index
 *
 * Custom component styles that extend Bootstrap/Tabler.
 * Only add styles here that provide functionality beyond what Bootstrap/Tabler offer.
 *
 * Note: Most component styling comes from Bootstrap 5 and Tabler.
 * This file imports only custom extensions, not replacements.
 */
/**
 * SolidInvoice - Shared Form Page Styles
 *
 * Consolidated form-page layout pattern used across TaxBundle, ClientBundle,
 * UserBundle (Profile, Invite, ChangePassword) and similar form pages.
 *
 * Template structure:
 *   .form-page > .form-page-container[--narrow|--medium|--wide] >
 *     .form-page-header > .form-page-header-content >
 *       .form-page-icon[--security] + div(.form-page-title + .form-page-subtitle)
 *     .form-page-sections > .form-page-section >
 *       .section-header > .section-icon[--security] + .section-header-text
 *         (.section-title + .section-description)
 *       .section-content > .form-grid > .form-field[.form-field-wide]
 *     .form-page-actions > .form-page-actions-inner[--medium]
 */
.form-page {
  min-height: 100%;
}

.form-page-container {
  margin: 0 auto;
  padding-bottom: var(--tblr-space-24);
}
.form-page-container--narrow {
  max-width: 800px;
}
.form-page-container--medium {
  max-width: 900px;
}
.form-page-container--wide {
  max-width: 1100px;
}

.form-page-header {
  margin-bottom: var(--tblr-space-8);
  padding: var(--tblr-space-6) 0;
}

.form-page-header-content {
  display: flex;
  align-items: center;
  gap: var(--tblr-space-4);
}

.form-page-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, var(--tblr-primary-light) 0%, rgba(var(--tblr-primary-rgb), 0.15) 100%);
  border-radius: var(--tblr-radius-lg);
  color: var(--tblr-primary);
  flex-shrink: 0;
}
.form-page-icon--security {
  background: linear-gradient(135deg, rgba(var(--tblr-success-rgb), 0.2) 0%, rgba(var(--tblr-success-rgb), 0.1) 100%);
  color: var(--tblr-success);
}

.form-page-title {
  font-size: 1.75rem;
  font-weight: var(--tblr-font-bold);
  color: var(--tblr-text-primary);
  margin: 0;
  letter-spacing: -0.025em;
}

.form-page-subtitle {
  font-size: var(--tblr-text-base);
  color: var(--tblr-text-muted);
  margin: var(--tblr-space-1) 0 0 0;
}

.form-page-sections {
  display: flex;
  flex-direction: column;
  gap: var(--tblr-space-6);
}

.form-page-section {
  background: var(--tblr-surface);
  border: 1px solid var(--tblr-border);
  border-radius: var(--tblr-radius-lg);
  overflow: hidden;
  transition: box-shadow var(--tblr-transition-base), border-color var(--tblr-transition-base);
}
.form-page-section:hover {
  border-color: var(--tblr-border-dark);
}
.form-page-section:focus-within {
  border-color: var(--tblr-primary);
  box-shadow: var(--tblr-ring-primary);
}

.section-header {
  display: flex;
  align-items: flex-start;
  gap: var(--tblr-space-3);
  padding: var(--tblr-space-5) var(--tblr-space-6) var(--tblr-space-4);
  background: var(--tblr-gray-50);
  border-bottom: 1px solid var(--tblr-border);
}

.section-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, var(--tblr-primary-light) 0%, rgba(var(--tblr-primary-rgb), 0.1) 100%);
  border-radius: var(--tblr-radius-md);
  color: var(--tblr-primary);
  flex-shrink: 0;
}
.section-icon--security {
  background: linear-gradient(135deg, rgba(var(--tblr-success-rgb), 0.15) 0%, rgba(var(--tblr-success-rgb), 0.05) 100%);
  color: var(--tblr-success);
}

.section-header-text {
  flex: 1;
  padding-top: var(--tblr-space-1);
}

.section-title {
  font-size: var(--tblr-text-lg);
  font-weight: var(--tblr-font-semibold);
  color: var(--tblr-text-primary);
  margin: 0 0 var(--tblr-space-1);
  line-height: 1.4;
  display: flex;
  align-items: center;
  gap: var(--tblr-space-2);
  flex-wrap: wrap;
}

.section-description {
  font-size: var(--tblr-text-sm);
  color: var(--tblr-text-muted);
  margin: 0;
  line-height: 1.5;
}

.section-content {
  padding: var(--tblr-space-6);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--tblr-space-4);
}
@media (width <= 768px) {
  .form-grid {
    grid-template-columns: 1fr;
    gap: var(--tblr-space-3);
  }
}

.form-field {
  display: flex;
  flex-direction: column;
}

.form-field-wide {
  grid-column: 1/-1;
}

.form-page-actions {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--tblr-surface);
  border-top: 1px solid var(--tblr-border);
  padding: var(--tblr-space-4) 0;
  margin-top: var(--tblr-space-8);
  z-index: 10;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.05);
}

.form-page-actions-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 800px;
  margin: 0 auto;
  padding: 0 var(--tblr-space-4);
}
.form-page-actions-inner--medium {
  max-width: 900px;
}

.btn-save,
.btn-save-primary {
  display: inline-flex;
  align-items: center;
  gap: var(--tblr-space-2);
  padding: var(--tblr-space-3) var(--tblr-space-6);
  font-weight: var(--tblr-font-semibold);
  box-shadow: var(--tblr-shadow-primary);
}
.btn-save:hover,
.btn-save-primary:hover {
  box-shadow: var(--tblr-shadow-primary-lg);
  transform: translateY(-1px);
}
.btn-save:active,
.btn-save-primary:active {
  transform: translateY(0);
}

@media (width <= 767.98px) {
  .form-page {
    padding: var(--tblr-space-4);
  }
  .form-page-header {
    padding: var(--tblr-space-4) 0;
    margin-bottom: var(--tblr-space-6);
  }
  .form-page-header-content {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--tblr-space-3);
  }
  .form-page-icon {
    width: 48px;
    height: 48px;
  }
  .form-page-title {
    font-size: 1.5rem;
  }
  .section-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--tblr-space-4) var(--tblr-space-4) var(--tblr-space-3);
  }
  .section-icon {
    width: 36px;
    height: 36px;
  }
  .section-content {
    padding: var(--tblr-space-4);
  }
  .form-page-actions-inner {
    gap: var(--tblr-space-3);
  }
  .form-page-actions-inner .btn {
    flex: 1;
  }
}
@media print {
  .form-page-actions {
    display: none !important;
  }
  .form-page {
    padding: 0;
  }
  .form-page-container {
    max-width: none;
  }
}
/**
 * SolidInvoice - Document View Shared Styles
 *
 * Shared layout and component styles for Invoice and Quote view pages.
 * Uses generic `doc-view-*` / `doc-*` class names to avoid duplication.
 * Both invoice-view.scss and quote-view.scss use these classes directly.
 */
.doc-view-page {
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--tblr-space-6);
}

.doc-view-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tblr-space-4);
  padding: var(--tblr-space-4) var(--tblr-space-6);
  background: var(--tblr-surface);
  border-radius: var(--tblr-radius-lg);
  box-shadow: var(--tblr-shadow-sm);
  margin-bottom: var(--tblr-space-6);
}
@media (width <= 768px) {
  .doc-view-header {
    flex-direction: column;
    align-items: flex-start;
  }
}

.doc-view-header-left {
  display: flex;
  align-items: center;
  gap: var(--tblr-space-4);
}

.doc-view-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, var(--tblr-primary-light) 0%, var(--tblr-primary-lighter) 100%);
  border-radius: var(--tblr-radius-lg);
  color: var(--tblr-primary);
}

.doc-view-title-group {
  display: flex;
  flex-direction: column;
  gap: var(--tblr-space-1);
}

.doc-view-title {
  font-size: var(--tblr-text-xl, 1.25rem);
  font-weight: var(--tblr-font-semibold, 600);
  color: var(--tblr-text-primary);
  margin: 0;
  line-height: 1.3;
}

.doc-view-meta {
  display: flex;
  align-items: center;
  gap: var(--tblr-space-3);
  flex-wrap: wrap;
}

.doc-view-meta-item {
  display: inline-flex;
  align-items: center;
  gap: var(--tblr-space-1);
  font-size: var(--tblr-text-sm, 0.875rem);
  color: var(--tblr-text-muted);
}
.doc-view-meta-item svg {
  opacity: 0.7;
}

.doc-view-header-actions {
  display: flex;
  align-items: center;
  gap: var(--tblr-space-3);
}
@media (width <= 768px) {
  .doc-view-header-actions {
    width: 100%;
    justify-content: flex-end;
  }
}

.doc-view-utility-actions {
  display: flex;
  align-items: center;
  gap: var(--tblr-space-1);
}

.doc-view-header .dropdown-menu {
  min-width: 200px;
  padding: var(--tblr-space-2);
  border: 1px solid var(--tblr-border-light);
  box-shadow: var(--tblr-shadow-lg);
  border-radius: var(--tblr-radius-lg);
}
.doc-view-header .dropdown-menu .dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--tblr-space-2);
  padding: var(--tblr-space-2) var(--tblr-space-3);
  border-radius: var(--tblr-radius-sm);
  font-size: var(--tblr-text-sm, 0.875rem);
}
.doc-view-header .dropdown-menu .dropdown-item:hover {
  background: var(--tblr-gray-50);
}
.doc-view-header .dropdown-menu .dropdown-item.text-danger:hover {
  background: var(--tblr-danger-lighter);
}
.doc-view-header .dropdown-menu .dropdown-item svg {
  opacity: 0.7;
}
.doc-view-header .dropdown-menu .dropdown-divider {
  margin: var(--tblr-space-2) 0;
  border-color: var(--tblr-border-light);
}

.btn-hero {
  display: inline-flex;
  align-items: center;
  gap: var(--tblr-space-2);
  padding: var(--tblr-space-3) var(--tblr-space-5);
  font-weight: var(--tblr-font-semibold, 600);
  font-size: var(--tblr-text-base, 1rem);
  box-shadow: var(--tblr-shadow-primary);
  transition: all var(--tblr-transition-base);
}
.btn-hero:hover {
  transform: translateY(-1px);
  box-shadow: var(--tblr-shadow-primary-lg);
}
.btn-hero:active {
  transform: translateY(0);
}

.btn-hero-urgent {
  background: linear-gradient(135deg, var(--tblr-danger) 0%, var(--tblr-danger-hover) 100%);
  border-color: var(--tblr-danger);
  box-shadow: var(--tblr-shadow-danger);
}
.btn-hero-urgent:hover {
  background: linear-gradient(135deg, var(--tblr-danger-hover) 0%, var(--tblr-danger) 100%);
  box-shadow: var(--tblr-shadow-danger-lg);
}

.doc-view-content {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: var(--tblr-space-6);
}
@media (width <= 1024px) {
  .doc-view-content {
    grid-template-columns: 1fr;
  }
}

.doc-view-document {
  min-width: 0;
}

.doc-card {
  background: var(--tblr-surface);
  border-radius: var(--tblr-radius-lg);
  box-shadow: var(--tblr-shadow-sm);
  overflow: hidden;
}

.doc-card .badge,
.doc-page-header .badge,
.doc-view-header .badge,
.doc-view-sidebar .badge {
  border-radius: var(--tblr-radius-full);
  padding: 2px 10px;
  font-weight: var(--tblr-font-medium, 500);
  letter-spacing: 0;
}
.doc-card .badge.bg-gray.text-gray-fg,
.doc-page-header .badge.bg-gray.text-gray-fg,
.doc-view-header .badge.bg-gray.text-gray-fg,
.doc-view-sidebar .badge.bg-gray.text-gray-fg {
  background-color: var(--tblr-gray-100);
  color: var(--tblr-text-secondary);
}

.doc-header-from-to {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--tblr-space-8);
  padding: var(--tblr-space-6);
  background: linear-gradient(180deg, var(--tblr-gray-50) 0%, var(--tblr-surface) 100%);
  border-bottom: 1px solid var(--tblr-border-light);
}
@media (width <= 640px) {
  .doc-header-from-to {
    grid-template-columns: 1fr;
    gap: var(--tblr-space-6);
  }
}

.doc-party {
  display: flex;
  flex-direction: column;
  gap: var(--tblr-space-2);
}

.doc-party-label {
  font-size: var(--tblr-text-xs, 0.75rem);
  font-weight: var(--tblr-font-semibold, 600);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--tblr-text-muted);
}

.doc-party-name {
  font-size: var(--tblr-text-lg, 1.125rem);
  font-weight: var(--tblr-font-semibold, 600);
  color: var(--tblr-text-primary);
  margin: 0 0 var(--tblr-space-2) 0;
}

.doc-party-detail {
  display: flex;
  align-items: flex-start;
  gap: var(--tblr-space-2);
  font-size: var(--tblr-text-sm, 0.875rem);
  color: var(--tblr-text-secondary);
  line-height: 1.5;
}
.doc-party-detail svg {
  flex-shrink: 0;
  margin-top: 2px;
  opacity: 0.6;
}
.doc-party-detail .detail-label {
  font-weight: var(--tblr-font-medium, 500);
  color: var(--tblr-text-muted);
}
.doc-party-detail .detail-label::after {
  content: ":";
  margin-right: var(--tblr-space-1);
}
.doc-party-detail .detail-value {
  color: var(--tblr-text-secondary);
}
.doc-party-detail a.detail-value {
  color: var(--tblr-primary);
}
.doc-party-detail a.detail-value:hover {
  color: var(--tblr-primary-dark);
  text-decoration: underline;
}

.doc-items {
  padding: var(--tblr-space-6);
}
@media (width <= 640px) {
  .doc-items {
    padding: var(--tblr-space-4);
  }
}

.doc-items-table {
  width: 100%;
  border-collapse: collapse;
}
.doc-items-table thead th {
  padding: var(--tblr-space-3) var(--tblr-space-4);
  font-size: var(--tblr-text-xs, 0.75rem);
  font-weight: var(--tblr-font-semibold, 600);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--tblr-text-muted);
  background: var(--tblr-gray-50);
  border-bottom: 2px solid var(--tblr-border);
  text-align: left;
}
.doc-items-table thead th.column-price, .doc-items-table thead th.column-qty, .doc-items-table thead th.column-tax, .doc-items-table thead th.column-total {
  text-align: right;
}
@media (width <= 640px) {
  .doc-items-table thead {
    display: none;
  }
}
.doc-items-table tbody tr {
  transition: background-color var(--tblr-transition-fast);
}
.doc-items-table tbody tr:hover {
  background: var(--tblr-gray-50);
}
@media (width <= 640px) {
  .doc-items-table tbody tr {
    display: block;
    padding: var(--tblr-space-4);
    margin-bottom: var(--tblr-space-3);
    background: var(--tblr-gray-50);
    border-radius: var(--tblr-radius-md);
    border: 1px solid var(--tblr-border-light);
  }
  .doc-items-table tbody tr:hover {
    background: var(--tblr-gray-100);
  }
  .doc-items-table tbody tr:last-child {
    margin-bottom: 0;
  }
}
.doc-items-table tbody td {
  padding: var(--tblr-space-4);
  font-size: var(--tblr-text-sm, 0.875rem);
  color: var(--tblr-text-secondary);
  border-bottom: 1px solid var(--tblr-border-light);
  vertical-align: top;
}
.doc-items-table tbody td.column-description {
  color: var(--tblr-text-primary);
  font-weight: var(--tblr-font-medium, 500);
}
.doc-items-table tbody td.column-price, .doc-items-table tbody td.column-qty, .doc-items-table tbody td.column-tax, .doc-items-table tbody td.column-total {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.doc-items-table tbody td.column-total {
  font-weight: var(--tblr-font-semibold, 600);
  color: var(--tblr-text-primary);
}
@media (width <= 640px) {
  .doc-items-table tbody td {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: var(--tblr-space-2) 0;
    border-bottom: 1px solid var(--tblr-border-light);
    text-align: right;
  }
  .doc-items-table tbody td::before {
    content: attr(data-label);
    font-size: var(--tblr-text-xs, 0.75rem);
    font-weight: var(--tblr-font-semibold, 600);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--tblr-text-muted);
    text-align: left;
    flex-shrink: 0;
    margin-right: var(--tblr-space-3);
  }
  .doc-items-table tbody td.column-description {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    padding-bottom: var(--tblr-space-3);
    margin-bottom: var(--tblr-space-2);
    border-bottom: 2px solid var(--tblr-border);
  }
  .doc-items-table tbody td.column-description::before {
    margin-bottom: var(--tblr-space-1);
  }
  .doc-items-table tbody td.column-total {
    border-bottom: none;
    padding-bottom: 0;
  }
}
@media (width >= 641px) {
  .doc-items-table .column-description {
    width: auto;
  }
  .doc-items-table .column-price {
    width: 120px;
  }
  .doc-items-table .column-qty {
    width: 80px;
  }
  .doc-items-table .column-tax {
    width: 100px;
  }
  .doc-items-table .column-total {
    width: 120px;
  }
}

.doc-totals {
  display: flex;
  justify-content: flex-end;
  padding: var(--tblr-space-6);
  padding-top: 0;
}

.doc-totals-grid {
  display: flex;
  flex-direction: column;
  gap: var(--tblr-space-2);
  min-width: 280px;
  padding: var(--tblr-space-4);
  background: var(--tblr-gray-50);
  border-radius: var(--tblr-radius-md);
}

.totals-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--tblr-space-4);
  padding: var(--tblr-space-2) 0;
}
.totals-row .totals-label {
  font-size: var(--tblr-text-sm, 0.875rem);
  color: var(--tblr-text-secondary);
}
.totals-row .totals-value {
  font-size: var(--tblr-text-sm, 0.875rem);
  font-weight: var(--tblr-font-medium, 500);
  color: var(--tblr-text-primary);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.totals-row-payment .totals-value {
  color: var(--tblr-success);
}

.totals-row-discount .totals-value {
  color: var(--tblr-text-muted);
}

.totals-row-final {
  margin-top: var(--tblr-space-2);
  padding-top: var(--tblr-space-3);
  border-top: 1px solid var(--tblr-border-dark);
}
.totals-row-final .totals-label {
  font-size: var(--tblr-text-base, 1rem);
  font-weight: var(--tblr-font-semibold, 600);
  color: var(--tblr-text-primary);
}
.totals-row-final .totals-value {
  font-size: var(--tblr-text-lg, 1.125rem);
  font-weight: var(--tblr-font-bold, 700);
  color: var(--tblr-text-primary);
  letter-spacing: -0.01em;
}

.doc-footer {
  padding: var(--tblr-space-6);
  border-top: 1px solid var(--tblr-border-light);
  background: var(--tblr-gray-50);
}

.doc-footer-section + .doc-footer-section {
  margin-top: var(--tblr-space-4);
  padding-top: var(--tblr-space-4);
  border-top: 1px solid var(--tblr-border-light);
}

.doc-footer-title {
  font-size: var(--tblr-text-sm, 0.875rem);
  font-weight: var(--tblr-font-semibold, 600);
  color: var(--tblr-text-primary);
  margin: 0 0 var(--tblr-space-2) 0;
}

.doc-footer-text {
  font-size: var(--tblr-text-sm, 0.875rem);
  color: var(--tblr-text-secondary);
  margin: 0;
  line-height: 1.6;
  white-space: pre-wrap;
}

.doc-view-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--tblr-space-4);
}
@media (width <= 1024px) {
  .doc-view-sidebar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
}

.doc-sidebar-card {
  background: var(--tblr-surface);
  border-radius: var(--tblr-radius-lg);
  box-shadow: var(--tblr-shadow-sm);
  overflow: hidden;
}

.doc-sidebar-card-muted {
  background: var(--tblr-gray-50);
}

.doc-sidebar-card-success {
  border-left: 4px solid var(--tblr-success);
}

.doc-sidebar-card-highlight {
  border-left: 4px solid var(--tblr-primary);
}

.doc-sidebar-card-header {
  display: flex;
  align-items: center;
  gap: var(--tblr-space-3);
  padding: var(--tblr-space-4);
  border-bottom: 1px solid var(--tblr-border-light);
}

.doc-sidebar-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--tblr-primary-light);
  border-radius: var(--tblr-radius-sm);
  color: var(--tblr-primary);
}

.doc-sidebar-card-success .doc-sidebar-card-icon {
  background: var(--tblr-success-lighter);
  color: var(--tblr-success);
}

.doc-sidebar-card-title {
  font-size: var(--tblr-text-sm, 0.875rem);
  font-weight: var(--tblr-font-semibold, 600);
  color: var(--tblr-text-primary);
  margin: 0;
}

.doc-sidebar-card-body {
  padding: var(--tblr-space-4);
}

.doc-summary-grid {
  display: flex;
  flex-direction: column;
  gap: var(--tblr-space-3);
}

.summary-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--tblr-space-3);
}
.summary-item .summary-label {
  font-size: var(--tblr-text-sm, 0.875rem);
  color: var(--tblr-text-muted);
}
.summary-item .summary-value {
  font-size: var(--tblr-text-sm, 0.875rem);
  font-weight: var(--tblr-font-medium, 500);
  color: var(--tblr-text-primary);
  font-variant-numeric: tabular-nums;
}
.summary-item .summary-value-amount {
  font-size: var(--tblr-text-base, 1rem);
  font-weight: var(--tblr-font-bold, 700);
  color: var(--tblr-text-primary);
  letter-spacing: -0.01em;
}
.summary-item .summary-value-balance {
  font-weight: var(--tblr-font-bold, 700);
  color: var(--tblr-warning);
}

.summary-item-overdue {
  padding: var(--tblr-space-2);
  margin: calc(-1 * var(--tblr-space-2));
  background: var(--tblr-danger-lighter);
  border-radius: var(--tblr-radius-sm);
}
.summary-item-overdue .summary-value {
  color: var(--tblr-danger);
}

.summary-item-paid .summary-value {
  color: var(--tblr-success);
}

.client-info {
  display: flex;
  flex-direction: column;
  gap: var(--tblr-space-3);
}

.client-name {
  font-size: var(--tblr-text-base, 1rem);
  font-weight: var(--tblr-font-semibold, 600);
  color: var(--tblr-primary);
  text-decoration: none;
}
.client-name:hover {
  color: var(--tblr-primary-dark);
  text-decoration: underline;
}

.client-contacts {
  display: flex;
  flex-direction: column;
  gap: var(--tblr-space-3);
}

.client-contact {
  padding: var(--tblr-space-3);
  background: var(--tblr-gray-50);
  border-radius: var(--tblr-radius-sm);
}

.contact-name {
  font-size: var(--tblr-text-sm, 0.875rem);
  font-weight: var(--tblr-font-medium, 500);
  color: var(--tblr-text-primary);
  margin-bottom: var(--tblr-space-1);
}

.contact-email,
.contact-detail {
  display: flex;
  align-items: center;
  gap: var(--tblr-space-1);
  font-size: var(--tblr-text-xs, 0.75rem);
  color: var(--tblr-text-muted);
}
.contact-email svg,
.contact-detail svg {
  opacity: 0.6;
}

.payments-list {
  display: flex;
  flex-direction: column;
  gap: var(--tblr-space-3);
}

.payment-card {
  padding: var(--tblr-space-3);
  background: var(--tblr-gray-50);
  border-radius: var(--tblr-radius-md);
  border-left: 3px solid var(--tblr-gray-300);
  transition: all var(--tblr-transition-fast);
}

.payment-card-captured {
  border-left-color: var(--tblr-success);
  background: var(--tblr-success-lighter);
}

.payment-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--tblr-space-2);
}

.payment-amount {
  font-size: var(--tblr-text-base, 1rem);
  font-weight: var(--tblr-font-bold, 700);
  color: var(--tblr-text-primary);
}

.payment-card-body {
  display: flex;
  flex-direction: column;
  gap: var(--tblr-space-1);
}

.payment-method,
.payment-date {
  display: flex;
  align-items: center;
  gap: var(--tblr-space-1);
  font-size: var(--tblr-text-xs, 0.75rem);
  color: var(--tblr-text-muted);
}
.payment-method svg,
.payment-date svg {
  opacity: 0.6;
}

.payment-message {
  font-size: var(--tblr-text-xs, 0.75rem);
  color: var(--tblr-text-secondary);
  font-style: italic;
  margin-top: var(--tblr-space-1);
}

.related-quote-link,
.related-invoice-link {
  display: inline-flex;
  align-items: center;
  gap: var(--tblr-space-2);
  font-size: var(--tblr-text-sm, 0.875rem);
  font-weight: var(--tblr-font-medium, 500);
  color: var(--tblr-primary);
  text-decoration: none;
}
.related-quote-link:hover,
.related-invoice-link:hover {
  color: var(--tblr-primary-dark);
  text-decoration: underline;
}

.related-invoice-status {
  margin-top: var(--tblr-space-2);
}

@media print {
  .doc-view-page {
    max-width: 100%;
    padding: 0;
    margin: 0;
  }
  .doc-view-content {
    display: block;
  }
  .doc-view-document {
    width: 100%;
  }
  .doc-card {
    box-shadow: none;
    border: none;
  }
  .doc-header-from-to {
    background: none;
    padding: 20px 0;
  }
  .doc-items-table thead th {
    background: var(--tblr-gray-50) !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .doc-totals-grid {
    background: var(--tblr-gray-50) !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .doc-footer {
    background: var(--tblr-gray-50) !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .no-print {
    display: none !important;
  }
}
/**
 * External Document View - Shared Styles
 *
 * Shared styles for public-facing invoice and quote views.
 * Invoice-specific: external-invoice-view.scss
 * Quote-specific: external-quote-view.scss
 */
.ext-doc-page {
  min-height: 100vh;
  background: var(--tblr-gray-50, #f8fafc);
}

.app-branding-header {
  padding: 1.5rem 0;
  border-bottom: 2px solid var(--tblr-border-color-light, #e2e8f0);
}
.app-branding-header .app-logo img {
  max-height: 40px;
  width: auto;
  display: block;
}
.app-branding-header .app-brand-name {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--tblr-primary, #2e963a);
  line-height: 1.2;
}
.app-branding-header .app-brand-tagline {
  font-size: 0.875rem;
  color: var(--tblr-secondary, #64748b);
  opacity: 0.8;
  line-height: 1.3;
}

.ext-doc-action-bar {
  background: var(--tblr-bg-surface, #ffffff);
  border: 1px solid var(--tblr-border-color-light, #e2e8f0);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.ext-doc-action-bar .card-body {
  padding: 0.75rem 1.5rem;
}
.ext-doc-action-bar .btn {
  font-weight: 500;
}

.ext-doc-company-name {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--tblr-body-color, #1e293b);
  line-height: 1.3;
}

.ext-doc-number {
  font-size: 2rem;
  font-weight: 700;
  color: var(--tblr-body-color, #1e293b);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.ext-doc-number-label {
  font-weight: 600;
  letter-spacing: 0.05em;
  opacity: 0.6;
}

.ext-doc-vat-number {
  font-size: 0.9375rem;
  opacity: 0.75;
}

.ext-doc-logo img {
  max-width: 100%;
  height: auto;
  display: block;
}

.ext-doc-metadata-card {
  border: 1px solid var(--tblr-border-color-light, #e2e8f0);
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  transition: box-shadow 0.2s ease;
}
.ext-doc-metadata-card:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.ext-doc-metadata-card .card-body {
  padding: 1.5rem;
}

.ext-doc-metadata-label {
  font-weight: 600;
  letter-spacing: 0.05em;
  margin-bottom: 0.375rem;
  opacity: 0.6;
}

.ext-doc-metadata-value {
  font-size: 1rem;
  color: var(--tblr-body-color, #1e293b);
}

.ext-doc-metadata-total {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--tblr-money-neutral, #1e293b);
  line-height: 1.2;
}

.ext-doc-parties-section {
  margin-bottom: 2rem;
}

.ext-doc-party-label {
  font-weight: 600;
  letter-spacing: 0.05em;
  opacity: 0.6;
}

.ext-doc-party-name {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--tblr-body-color, #1e293b);
  line-height: 1.4;
}

.ext-doc-party-detail {
  color: var(--tblr-body-color, #1e293b);
  line-height: 1.6;
  margin-bottom: 0.375rem;
  font-size: 0.9375rem;
}

.ext-doc-items-table {
  margin-bottom: 2rem;
}
.ext-doc-items-table thead th {
  border-bottom: 2px solid var(--tblr-border-color, #cbd5e1);
  padding: 0.875rem 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  font-size: 0.75rem;
  opacity: 0.6;
}
.ext-doc-items-table tbody tr {
  border-bottom: 1px solid var(--tblr-border-color-light, #e2e8f0);
  transition: background-color 0.15s ease;
}
.ext-doc-items-table tbody tr:last-child {
  border-bottom: none;
}
.ext-doc-items-table tbody tr:hover {
  background-color: var(--tblr-gray-50, #f8fafc);
}
.ext-doc-items-table tbody td {
  padding: 1rem 0.75rem;
  color: var(--tblr-body-color, #1e293b);
  vertical-align: top;
}
.ext-doc-items-table .item-description {
  font-weight: 500;
  line-height: 1.5;
  color: var(--tblr-body-color, #1e293b);
}
.ext-doc-items-table .item-amount {
  font-weight: 600;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ext-doc-totals-card {
  border: 1px solid var(--tblr-border-color-light, #e2e8f0);
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.ext-doc-totals-card .card-body {
  padding: 1.5rem;
}

.ext-doc-totals-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.625rem 0;
}
.ext-doc-totals-row:not(:last-child) {
  margin-bottom: 0.375rem;
}

.ext-doc-totals-label {
  font-size: 0.9375rem;
  color: var(--tblr-body-color, #1e293b);
  font-weight: 500;
}

.ext-doc-totals-value {
  font-weight: 600;
  color: var(--tblr-body-color, #1e293b);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ext-doc-totals-final {
  border-top: 2px solid var(--tblr-border-color-dark, #94a3b8);
  padding-top: 1rem;
  margin-top: 0.75rem;
}
.ext-doc-totals-final .ext-doc-totals-row {
  padding: 0.5rem 0 0;
  margin-bottom: 0;
}
.ext-doc-totals-final .ext-doc-totals-label {
  font-size: 1.25rem;
  font-weight: 600;
}
.ext-doc-totals-final .ext-doc-totals-value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--tblr-money-neutral, #1e293b);
  line-height: 1;
}

.ext-doc-footer .card {
  background: var(--tblr-bg-surface, #ffffff);
  border: 1px solid var(--tblr-border-color-light, #e2e8f0);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.ext-doc-footer .btn-sm {
  font-weight: 500;
  padding: 0.5rem 1rem;
}
.ext-doc-footer .app-logo img {
  max-height: 24px;
  width: auto;
  display: block;
}

.badge {
  font-weight: 600;
  letter-spacing: 0.025em;
}

hr {
  border-color: var(--tblr-border-color-light, #e2e8f0);
  opacity: 1;
}

.btn:focus-visible {
  outline: 2px solid var(--tblr-primary, #2e963a);
  outline-offset: 2px;
}

.card-lg {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  border: 1px solid var(--tblr-border-color-light, #e2e8f0);
}
.card-lg .card-body {
  padding: 2.5rem;
}

@media (width <= 991px) {
  .ext-doc-metadata-card .card-body,
  .ext-doc-totals-card .card-body {
    padding: 1.25rem;
  }
  .card-lg .card-body {
    padding: 2rem;
  }
}
@media (width <= 767px) {
  .ext-doc-number {
    font-size: 1.75rem;
  }
  .ext-doc-metadata-total {
    font-size: 1.5rem;
  }
  .ext-doc-totals-final .ext-doc-totals-value {
    font-size: 1.75rem;
  }
  .ext-doc-parties-section .col-sm-6:first-child {
    margin-bottom: 1.5rem;
  }
}
@media (width <= 576px) {
  .container-xl {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .card-lg .card-body {
    padding: 1.5rem;
  }
  .ext-doc-metadata-card .card-body,
  .ext-doc-totals-card .card-body {
    padding: 1rem;
  }
  .app-branding-header {
    padding: 1rem 0;
  }
  .app-branding-header .d-flex {
    flex-direction: column;
    text-align: center;
  }
  .app-branding-header .app-brand-name {
    font-size: 1.25rem;
  }
  .app-branding-header .app-brand-tagline {
    font-size: 0.8125rem;
  }
  .ext-doc-footer .btn-sm {
    width: 100%;
    margin-bottom: 0.5rem;
  }
  .ext-doc-footer .btn-sm:last-child {
    margin-bottom: 0;
  }
  .ext-doc-metadata-card .col-sm-4,
  .ext-doc-metadata-card .col-sm-6 {
    margin-bottom: 1rem;
  }
  .ext-doc-metadata-card .col-sm-4:last-child,
  .ext-doc-metadata-card .col-sm-6:last-child {
    margin-bottom: 0;
  }
  .ext-doc-action-bar .d-flex.justify-content-between {
    flex-direction: column;
    gap: 0.75rem;
  }
  .ext-doc-action-bar .d-flex.justify-content-between .d-flex.gap-2 {
    flex-direction: column;
    width: 100%;
    gap: 0.5rem;
  }
  .ext-doc-action-bar .d-flex.justify-content-between .d-flex.gap-2 .btn {
    width: 100%;
    justify-content: center;
  }
  .ext-doc-action-bar .d-flex.justify-content-between .btn-primary,
  .ext-doc-action-bar .d-flex.justify-content-between .btn-danger {
    width: 100%;
    justify-content: center;
  }
  .ext-doc-items-table {
    font-size: 0.875rem;
  }
  .ext-doc-items-table thead th {
    padding: 0.75rem 0.5rem;
  }
  .ext-doc-items-table tbody td {
    padding: 0.875rem 0.5rem;
  }
}
@media print {
  .no-print,
  .d-print-none {
    display: none !important;
    visibility: hidden !important;
  }
  @page {
    margin: 1cm;
  }
  html,
  body {
    background: #ffffff !important;
    height: auto !important;
    overflow: visible !important;
  }
  .ext-doc-page,
  .page-wrapper,
  .page-body {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    overflow: visible !important;
    width: 100% !important;
    background: #ffffff !important;
  }
  .container-xl {
    max-width: 100% !important;
    padding: 0.5cm !important;
    margin: 0 !important;
  }
  .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .card,
  .ext-doc-metadata-card,
  .ext-doc-totals-card {
    box-shadow: none !important;
    border: 1px solid #dee2e6;
    break-inside: avoid;
    display: block !important;
    visibility: visible !important;
  }
  .card-body {
    display: block !important;
    visibility: visible !important;
    break-inside: avoid;
  }
  .card-lg .card-body {
    padding: 1.5rem;
  }
  table {
    break-inside: auto;
  }
  tr {
    break-inside: avoid;
    break-after: auto;
  }
  thead {
    display: table-header-group;
  }
  .bg-light,
  .ext-doc-metadata-card,
  .ext-doc-totals-card {
    background-color: #f8f9fa !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .bg-danger {
    background-color: #dc3545 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .ext-doc-metadata-total,
  .ext-doc-totals-final .ext-doc-totals-value {
    color: #1e293b !important; /* money is neutral in print too */
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .text-primary {
    color: #1f6c29 !important; /* 6.49:1 on paper - brand text only */
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .text-danger {
    color: #b91c1c !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .text-success {
    color: #047857 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .ext-doc-items-table tbody tr:hover {
    background-color: transparent !important;
  }
  .ext-doc-metadata-card:hover {
    box-shadow: none !important;
  }
  hr {
    border-color: #cbd5e1 !important;
    opacity: 1 !important;
  }
}
/**
 * SolidInvoice - Shared Marketplace Styles
 *
 * Common styles shared between PaymentBundle and NotificationBundle marketplace pages.
 * Page-specific styles remain in payment-marketplace.scss and notification-marketplace.scss.
 */
.marketplace-panel {
  position: sticky;
  top: var(--tblr-space-4);
  max-height: calc(100vh - var(--tblr-space-16));
  overflow-y: auto;
  padding: var(--tblr-space-6);
  background: var(--tblr-surface);
  border-radius: var(--tblr-radius-lg);
  border: 1px solid var(--tblr-border-light);
  box-shadow: var(--tblr-shadow-sm);
}
.marketplace-panel::-webkit-scrollbar {
  width: 6px;
}
.marketplace-panel::-webkit-scrollbar-track {
  background: var(--tblr-gray-100);
  border-radius: var(--tblr-radius-full);
}
.marketplace-panel::-webkit-scrollbar-thumb {
  background: var(--tblr-gray-300);
  border-radius: var(--tblr-radius-full);
  transition: var(--tblr-transition-colors);
}
.marketplace-panel::-webkit-scrollbar-thumb:hover {
  background: var(--tblr-gray-400);
}

.marketplace-header h5 {
  font-size: var(--tblr-text-lg);
  font-weight: 600;
  color: var(--tblr-text-primary);
  letter-spacing: -0.01em;
}
.marketplace-header p {
  line-height: 1.5;
}
.marketplace-header .input-group {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  border-radius: var(--tblr-radius-md);
  overflow: hidden;
}
.marketplace-header .input-group .input-group-text {
  border-right: 0;
  color: var(--tblr-text-muted);
  background: var(--tblr-surface);
}
.marketplace-header .input-group .form-control {
  border-left: 0;
  padding-left: 0;
  background: var(--tblr-surface);
}
.marketplace-header .input-group .form-control:focus {
  box-shadow: 0 0 0 3px rgba(var(--tblr-primary-rgb), 0.1);
  border-color: var(--tblr-primary);
}
.marketplace-header .input-group .form-control::placeholder {
  color: var(--tblr-text-muted);
  opacity: 0.6;
}
.marketplace-header .input-group:has(.form-control:focus) .input-group-text {
  border-color: var(--tblr-primary);
}

.delete-confirmation-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 1060;
  animation: marketplace-fade-in 0.15s ease;
  backdrop-filter: blur(4px);
}

.delete-confirmation-modal {
  position: fixed;
  inset: 0;
  z-index: 1070;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--tblr-space-4);
  animation: marketplace-fade-in 0.15s ease;
}

.delete-confirmation-container {
  background: var(--tblr-surface);
  border-radius: var(--tblr-radius-lg);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  width: 100%;
  max-width: 480px;
  animation: marketplace-scale-in 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.delete-confirmation-header {
  padding: var(--tblr-space-6);
  border-bottom: 1px solid var(--tblr-border);
}
.delete-confirmation-header h4 {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--tblr-text-primary);
}
.delete-confirmation-header .delete-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--tblr-radius-md);
  background: var(--tblr-danger-light);
  flex-shrink: 0;
}

.delete-confirmation-body {
  padding: var(--tblr-space-6);
  color: var(--tblr-text-secondary);
  line-height: 1.6;
}

.delete-confirmation-footer {
  padding: var(--tblr-space-4) var(--tblr-space-6);
  border-top: 1px solid var(--tblr-border);
  display: flex;
  justify-content: flex-end;
  gap: var(--tblr-space-3);
  background: var(--tblr-gray-50);
  border-bottom-left-radius: var(--tblr-radius-lg);
  border-bottom-right-radius: var(--tblr-radius-lg);
}

@keyframes marketplace-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes marketplace-slide-up {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes marketplace-scale-in {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.badge-sm {
  font-size: 0.625rem;
  padding: 0.125rem 0.5rem;
  font-weight: 500;
  border-radius: var(--tblr-radius-sm);
}

.marketplace-search-clear {
  z-index: 10;
  right: 8px !important;
}

/**
 * Global Search - Top navigation search bar with live results dropdown
 */
.global-search {
  position: relative;
  max-width: 600px;
}
.global-search-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.global-search-icon {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--tblr-text-muted);
  pointer-events: none;
  display: flex;
  align-items: center;
  line-height: 1;
  z-index: 1;
}
.global-search-input {
  box-sizing: border-box;
  width: 100%;
  padding: 0 6.5rem 0 2.5rem;
  height: 38px;
  line-height: 38px;
  background-color: var(--tblr-surface);
  border: 1px solid var(--tblr-input-border);
  border-radius: var(--tblr-radius-sm);
  font-size: 0.875rem;
  color: var(--tblr-text-primary);
  appearance: none;
  transition: border-color var(--tblr-duration-fast) ease-in-out, box-shadow var(--tblr-duration-fast) ease-in-out;
}
.global-search-input::-webkit-search-cancel-button, .global-search-input::-webkit-search-decoration {
  appearance: none;
}
.global-search-input:focus {
  border-color: var(--tblr-primary);
  box-shadow: var(--tblr-ring-primary);
  background-color: var(--tblr-surface);
  outline: none;
}
.global-search-input::placeholder {
  color: var(--tblr-text-muted);
}
.global-search-actions {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
}
.global-search-shortcut {
  display: flex;
  gap: 3px;
  pointer-events: none;
}
.global-search-shortcut kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.1rem 0.35rem;
  font-size: 0.7rem;
  font-family: var(--tblr-font-monospace);
  color: var(--tblr-text-muted);
  background-color: var(--tblr-gray-50);
  border: 1px solid var(--tblr-border);
  border-radius: 3px;
  line-height: 1.4;
}

.search-help-trigger {
  background: none;
  border: 1px solid var(--tblr-border);
  padding: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--tblr-text-muted);
  transition: color var(--tblr-duration-fast) ease, border-color var(--tblr-duration-fast) ease;
  flex-shrink: 0;
  line-height: 1;
}
.search-help-trigger:hover {
  color: var(--tblr-text-primary);
  border-color: var(--tblr-text-muted);
}

.search-help-section-title {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--tblr-text-muted);
  margin-bottom: 0.75rem;
}

.search-help-op {
  font-size: 0.8rem;
  font-family: var(--tblr-font-monospace);
  background: var(--tblr-gray-50);
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  color: var(--tblr-text-primary);
}

.search-help-example {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px 12px;
  background: var(--tblr-gray-50);
  border-radius: var(--tblr-radius-sm);
  border-left: 3px solid var(--tblr-primary);
}
.search-help-example code {
  font-size: 0.8rem;
  color: var(--tblr-info-dark);
  background: none;
  padding: 0;
  word-break: break-all;
}
.search-help-example span {
  font-size: 0.775rem;
  color: var(--tblr-text-muted);
}

#searchHelpModal .modal-body {
  padding: 0;
}

.search-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  min-width: 520px;
  margin-left: -60px;
  margin-right: -60px;
  background-color: var(--tblr-surface);
  border: 1px solid var(--tblr-border);
  border-radius: var(--tblr-radius-md);
  box-shadow: var(--tblr-shadow-lg);
  isolation: isolate;
  z-index: 9999;
}
.search-dropdown.is-open {
  display: block;
  animation: search-dropdown-in 0.12s ease-out;
}

@keyframes search-dropdown-in {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(0.99);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.search-spinner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1.25rem;
  color: var(--tblr-text-muted);
  font-size: 0.875rem;
}

.search-results {
  max-height: 440px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background-color: var(--tblr-surface);
  border-radius: var(--tblr-radius-md);
}
.search-results::-webkit-scrollbar {
  width: 4px;
}
.search-results::-webkit-scrollbar-track {
  background: transparent;
}
.search-results::-webkit-scrollbar-thumb {
  background-color: var(--tblr-border);
  border-radius: 2px;
}

.search-group + .search-group {
  border-top: 1px solid var(--tblr-border-light);
}
.search-group:last-child {
  padding-bottom: 0.25rem;
}
.search-group-label {
  padding: 0.625rem 0.875rem 0.25rem;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--tblr-text-muted);
}

.search-result-item.is-active .search-result-link {
  background-color: var(--tblr-surface-hover);
}
.search-result-item:hover .search-result-link {
  background-color: var(--tblr-surface-hover);
  text-decoration: none;
}

.search-result-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.875rem;
  color: var(--tblr-text-primary);
  text-decoration: none;
  transition: background-color 0.08s ease;
}

.search-result-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  padding: 6px;
  border-radius: var(--tblr-radius-md);
}
.search-result-icon svg {
  display: block;
}

.search-result-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.search-result-title {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--tblr-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-result-subtitle {
  font-size: 0.775rem;
  color: var(--tblr-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}

.search-result-aside {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.2rem;
  flex-shrink: 0;
  margin-left: auto;
  padding-left: 0.5rem;
}

.search-result-badge {
  font-size: 0.65rem;
  font-weight: 600;
  padding: 0.15rem 0.45rem;
}

.search-result-meta {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--tblr-text-primary);
  white-space: nowrap;
}

.search-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1rem;
  color: var(--tblr-text-muted);
  background-color: var(--tblr-surface);
}
.search-empty-icon {
  margin-bottom: 0.625rem;
  opacity: 0.4;
  display: flex;
}
.search-empty-text {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 500;
}

.search-error {
  padding: 1.25rem;
  font-size: 0.875rem;
  color: var(--tblr-danger-dark);
  text-align: center;
  background-color: var(--tblr-surface);
}

.search-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0.15rem 0.5rem;
  background-color: var(--tblr-info-light);
  color: var(--tblr-info-dark);
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
}
.search-chip-remove {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: inherit;
  opacity: 0.6;
  font-size: 0.9rem;
  line-height: 1;
}
.search-chip-remove:hover {
  opacity: 1;
}

.search-chips-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 0.25rem 0.5rem;
  border-bottom: 1px solid var(--tblr-border-light);
  min-height: 0;
}
.search-chips-bar:empty {
  display: none;
}

.search-suggestions {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 220px;
  background: var(--tblr-surface);
  border: 1px solid var(--tblr-border);
  border-radius: var(--tblr-radius-sm);
  box-shadow: var(--tblr-shadow-md);
  z-index: 10000;
  padding: 0.25rem 0;
  display: none;
}
.search-suggestions.is-open {
  display: block;
}
.search-suggestions-header {
  padding: 0.25rem 0.75rem 0.1rem;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--tblr-text-muted);
}
.search-suggestions-item {
  padding: 0.4rem 0.75rem;
  font-size: 0.85rem;
  cursor: pointer;
  color: var(--tblr-text-primary);
}
.search-suggestions-item:hover, .search-suggestions-item.is-active {
  background-color: var(--tblr-surface-hover);
}
.search-suggestions-item code {
  font-size: 0.75rem;
  color: var(--tblr-text-muted);
  margin-left: 0.5rem;
}

/**
 * SolidInvoice DataGrid Component Styles
 *
 * Modern, clean data grid styling following the SolidInvoice design system.
 * Uses design tokens from _tokens.scss for consistency.
 */
.datagrid-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tblr-space-4);
  padding: var(--tblr-space-4) var(--tblr-space-6);
  background: var(--tblr-surface);
  border-bottom: 1px solid var(--tblr-border-light);
}
@media (width <= 768px) {
  .datagrid-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
}

.datagrid-toolbar-start {
  display: flex;
  align-items: center;
  gap: var(--tblr-space-3);
  flex: 1;
  min-width: 0;
}

.datagrid-toolbar-end {
  display: flex;
  align-items: center;
  gap: var(--tblr-space-2);
  flex-shrink: 0;
}

.datagrid-search {
  position: relative;
  flex: 1;
  max-width: 320px;
}
.datagrid-search .datagrid-search-icon {
  position: absolute;
  left: var(--tblr-space-3);
  top: 50%;
  transform: translateY(-50%);
  color: var(--tblr-text-muted);
  pointer-events: none;
  width: 18px;
  height: 18px;
}
.datagrid-search .datagrid-search-input {
  width: 100%;
  padding: var(--tblr-space-2) var(--tblr-space-4) var(--tblr-space-2) var(--tblr-space-10);
  font-size: var(--tblr-text-sm);
  color: var(--tblr-text-primary);
  background: var(--tblr-gray-50);
  border: 1px solid transparent;
  border-radius: var(--tblr-radius-md);
  transition: background-color var(--tblr-transition-fast), border-color var(--tblr-transition-fast), box-shadow var(--tblr-transition-fast);
}
.datagrid-search .datagrid-search-input::placeholder {
  color: var(--tblr-text-muted);
}
.datagrid-search .datagrid-search-input:hover {
  background: var(--tblr-gray-100);
}
.datagrid-search .datagrid-search-input:focus {
  background: var(--tblr-surface);
  border-color: var(--tblr-primary);
  box-shadow: var(--tblr-ring-primary);
  outline: none;
}

.datagrid-active-filters {
  display: flex;
  align-items: center;
  gap: var(--tblr-space-2);
  flex-wrap: wrap;
}

.datagrid-active-filter {
  display: inline-flex;
  align-items: center;
  gap: var(--tblr-space-1);
  padding: var(--tblr-space-1) var(--tblr-space-2);
  font-size: var(--tblr-text-xs);
  color: var(--tblr-text-primary);
  background: var(--tblr-gray-100);
  border: 1px solid var(--tblr-border);
  border-radius: var(--tblr-radius-md);
  cursor: pointer;
  transition: all var(--tblr-transition-fast);
}
.datagrid-active-filter:hover {
  background: var(--tblr-danger-lighter);
  border-color: var(--tblr-danger-light);
}
.datagrid-active-filter:hover .datagrid-active-filter-remove {
  color: var(--tblr-danger);
}
.datagrid-active-filter .datagrid-active-filter-key {
  font-weight: var(--tblr-font-medium);
  color: var(--tblr-text-muted);
}
.datagrid-active-filter .datagrid-active-filter-key::after {
  content: ":";
  margin-right: var(--tblr-space-1);
}
.datagrid-active-filter .datagrid-active-filter-value {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.datagrid-active-filter .datagrid-active-filter-remove {
  width: 14px;
  height: 14px;
  margin-left: var(--tblr-space-1);
  color: var(--tblr-text-muted);
  transition: color var(--tblr-transition-fast);
}

.datagrid-filter-dropdown {
  position: relative;
}

.datagrid-filter-panel {
  width: 320px;
  max-height: calc(100vh - 200px);
  padding: 0 !important;
  border: 1px solid var(--tblr-border);
  border-radius: var(--tblr-radius-lg);
  box-shadow: var(--tblr-shadow-lg);
  overflow: hidden;
}
.datagrid-filter-panel .dropdown-menu,
.datagrid-filter-panel .select2-container--open {
  z-index: 1060 !important;
}

.datagrid-filter-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--tblr-space-3) var(--tblr-space-4);
  background: var(--tblr-gray-50);
  border-bottom: 1px solid var(--tblr-border-light);
}

.datagrid-filter-panel-title {
  display: flex;
  align-items: center;
  gap: var(--tblr-space-2);
  margin: 0;
  font-size: var(--tblr-text-sm);
  font-weight: var(--tblr-font-semibold);
  color: var(--tblr-text-primary);
}
.datagrid-filter-panel-title svg {
  width: 16px;
  height: 16px;
  color: var(--tblr-text-muted);
}

.datagrid-filter-panel-body {
  padding: var(--tblr-space-4);
  max-height: calc(100vh - 350px);
  overflow-y: auto;
}

.datagrid-filter-form {
  display: flex;
  flex-direction: column;
  gap: var(--tblr-space-4);
}

.datagrid-filter-field {
  display: flex;
  flex-direction: column;
  gap: var(--tblr-space-2);
}
.datagrid-filter-field .form-select,
.datagrid-filter-field select {
  position: relative;
  z-index: 1;
}
.datagrid-filter-field .row {
  --bs-gutter-x: 0.5rem;
}

.datagrid-filter-label {
  font-size: var(--tblr-text-xs);
  font-weight: var(--tblr-font-semibold);
  color: var(--tblr-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.datagrid-filter-widget > div:has(> div > input[type=date]) {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--tblr-space-2);
}
.datagrid-filter-widget > div:has(> div > input[type=date]) > div .form-label {
  display: block;
  font-size: var(--tblr-text-xs);
  font-weight: var(--tblr-font-medium);
  color: var(--tblr-text-muted);
  margin-bottom: var(--tblr-space-1);
}
.datagrid-filter-widget > div:has(> div > input[type=date]) > div input[type=date] {
  width: 100%;
}
.datagrid-filter-widget .form-check {
  display: flex !important;
  align-items: center;
  gap: var(--tblr-space-2);
  padding: var(--tblr-space-2) var(--tblr-space-3);
  margin: 0;
  border-radius: var(--tblr-radius-sm);
  transition: background-color var(--tblr-transition-fast);
}
.datagrid-filter-widget .form-check:hover {
  background: var(--tblr-gray-50);
}
.datagrid-filter-widget .form-check.form-switch {
  padding-left: var(--tblr-space-3);
}
.datagrid-filter-widget .form-check .form-check-input {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px;
  margin: 0 !important;
  flex-shrink: 0;
  border-radius: 3px !important;
  border: 1px solid var(--tblr-border-dark);
  background-color: var(--tblr-surface);
  cursor: pointer;
}
.datagrid-filter-widget .form-check .form-check-input:checked {
  background-color: var(--tblr-primary);
  border-color: var(--tblr-primary);
}
.datagrid-filter-widget .form-check .form-check-input:focus {
  box-shadow: var(--tblr-ring-primary);
}
.datagrid-filter-widget .form-check .form-check-input[type=checkbox] {
  border-radius: 3px !important;
  background-image: none;
}
.datagrid-filter-widget .form-check .form-check-input[type=checkbox]:checked {
  background-image: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 20 20%27%3e%3cpath fill=%27none%27 stroke=%27%23fff%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 stroke-width=%273%27 d=%27M6 10l3 3l6-6%27/%3e%3c/svg%3e");
}
.datagrid-filter-widget .form-check .form-check-label {
  display: inline-block !important;
  font-size: var(--tblr-text-sm);
  font-weight: var(--tblr-font-normal);
  color: var(--tblr-text-primary);
  cursor: pointer;
  margin-left: var(--tblr-space-2);
  user-select: none;
}
.datagrid-filter-widget .form-check + .form-check {
  margin-top: var(--tblr-space-1);
}

.datagrid-filter-panel-footer {
  padding-top: var(--tblr-space-4);
  margin-top: var(--tblr-space-2);
  border-top: 1px solid var(--tblr-border-light);
}

.datagrid-filter-panel .form-control,
.datagrid-filter-panel .form-select {
  font-size: var(--tblr-text-sm);
  padding: var(--tblr-space-2) var(--tblr-space-3);
  border-radius: var(--tblr-radius-md);
  border-color: var(--tblr-border);
}
.datagrid-filter-panel .form-control:focus,
.datagrid-filter-panel .form-select:focus {
  border-color: var(--tblr-primary);
  box-shadow: var(--tblr-ring-primary);
}
.datagrid-filter-panel .datagrid-filter-field > .form-label {
  display: none;
}
.datagrid-filter-panel .datagrid-filter-field .row .form-label {
  display: block;
  font-size: var(--tblr-text-xs);
  font-weight: var(--tblr-font-normal);
  color: var(--tblr-text-muted);
  margin-bottom: var(--tblr-space-1);
}
.datagrid-filter-panel .datagrid-filter-field .row > div {
  padding-left: var(--tblr-space-1);
  padding-right: var(--tblr-space-1);
}
.datagrid-filter-panel .datagrid-filter-field .row > div:first-child {
  padding-left: 0;
}
.datagrid-filter-panel .datagrid-filter-field .row > div:last-child {
  padding-right: 0;
}
.datagrid-filter-panel .form-check {
  display: flex;
  align-items: center;
  gap: var(--tblr-space-2);
  padding: var(--tblr-space-1-5) var(--tblr-space-2);
  margin: 0;
  border-radius: var(--tblr-radius-sm);
  transition: background-color var(--tblr-transition-fast);
}
.datagrid-filter-panel .form-check:hover {
  background: var(--tblr-gray-50);
}
.datagrid-filter-panel .form-check .form-check-input {
  width: 16px;
  height: 16px;
  margin: 0;
  flex-shrink: 0;
}
.datagrid-filter-panel .form-check .form-check-label {
  font-size: var(--tblr-text-sm);
  color: var(--tblr-text-primary);
  cursor: pointer;
}
.datagrid-filter-panel .form-check + .form-check {
  margin-top: var(--tblr-space-1);
}
.datagrid-filter-panel select[multiple] {
  min-height: 120px;
  padding: var(--tblr-space-1);
}
.datagrid-filter-panel select[multiple] option {
  padding: var(--tblr-space-2);
  border-radius: var(--tblr-radius-sm);
}
.datagrid-filter-panel select[multiple] option:checked {
  background: var(--tblr-primary-lighter);
  color: var(--tblr-primary-dark);
}

.datagrid-export-dropdown {
  position: relative;
}

.datagrid-export-menu {
  width: 280px;
  padding: 0 !important;
  border: 1px solid var(--tblr-border);
  border-radius: var(--tblr-radius-lg);
  box-shadow: var(--tblr-shadow-lg);
  overflow: hidden;
}

.datagrid-export-menu-header {
  padding: var(--tblr-space-3) var(--tblr-space-4);
  background: var(--tblr-gray-50);
  border-bottom: 1px solid var(--tblr-border-light);
}

.datagrid-export-menu-title {
  display: flex;
  align-items: center;
  gap: var(--tblr-space-2);
  margin: 0;
  font-size: var(--tblr-text-sm);
  font-weight: var(--tblr-font-semibold);
  color: var(--tblr-text-primary);
}
.datagrid-export-menu-title svg {
  width: 16px;
  height: 16px;
  color: var(--tblr-text-muted);
}

.datagrid-export-menu-subtitle {
  margin: var(--tblr-space-1) 0 0;
  font-size: var(--tblr-text-xs);
  color: var(--tblr-text-muted);
}

.datagrid-export-menu-body {
  display: flex;
  flex-direction: column;
  padding: var(--tblr-space-2);
  gap: var(--tblr-space-1);
}

.datagrid-export-option {
  display: flex;
  align-items: center;
  gap: var(--tblr-space-3);
  padding: var(--tblr-space-2) var(--tblr-space-3);
  border-radius: var(--tblr-radius-md);
  color: var(--tblr-text-primary);
  text-decoration: none;
  transition: background-color var(--tblr-transition-fast), color var(--tblr-transition-fast);
  cursor: pointer;
}
.datagrid-export-option:hover, .datagrid-export-option:focus-visible {
  background: var(--tblr-gray-50);
  color: var(--tblr-text-primary);
  outline: none;
}

.datagrid-export-option-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  color: var(--tblr-text-secondary);
  background: var(--tblr-surface);
  border: 1px solid var(--tblr-border-light);
  border-radius: var(--tblr-radius-md);
}
.datagrid-export-option:hover .datagrid-export-option-icon, .datagrid-export-option:focus-visible .datagrid-export-option-icon {
  color: var(--tblr-primary);
  border-color: var(--tblr-primary-light);
  background: var(--tblr-primary-lighter);
}

.datagrid-export-option-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.datagrid-export-option-label {
  font-size: var(--tblr-text-sm);
  font-weight: var(--tblr-font-semibold);
  color: var(--tblr-text-primary);
  letter-spacing: 0.02em;
}

.datagrid-export-option-hint {
  font-size: var(--tblr-text-xs);
  color: var(--tblr-text-muted);
}

.datagrid-column-picker .dropdown-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  color: var(--tblr-text-secondary);
  background: transparent;
  border: 1px solid var(--tblr-border);
  border-radius: var(--tblr-radius-md);
  cursor: pointer;
  transition: color var(--tblr-transition-fast), background-color var(--tblr-transition-fast), border-color var(--tblr-transition-fast);
}
.datagrid-column-picker .dropdown-toggle:hover {
  color: var(--tblr-text-primary);
  background: var(--tblr-gray-50);
  border-color: var(--tblr-border-dark);
}
.datagrid-column-picker .dropdown-toggle::after {
  display: none;
}
.datagrid-column-picker .dropdown-menu {
  min-width: 200px;
  max-height: 320px;
  overflow-y: auto;
  padding: var(--tblr-space-2);
}
.datagrid-column-picker .dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--tblr-space-2);
  padding: var(--tblr-space-2) var(--tblr-space-3);
  font-size: var(--tblr-text-sm);
  color: var(--tblr-text-primary);
  border-radius: var(--tblr-radius-sm);
  cursor: pointer;
}
.datagrid-column-picker .dropdown-item:hover {
  background: var(--tblr-gray-50);
}
.datagrid-column-picker .dropdown-item input[type=checkbox] {
  width: 16px;
  height: 16px;
  accent-color: var(--tblr-primary);
}

.datagrid-table-wrapper {
  overflow-x: auto;
}

.datagrid-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--tblr-text-sm);
}
.datagrid-table th,
.datagrid-table td {
  padding: var(--tblr-space-3) var(--tblr-space-4);
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--tblr-border-light);
}
.datagrid-table th {
  font-size: var(--tblr-text-xs);
  font-weight: var(--tblr-font-semibold);
  color: var(--tblr-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--tblr-gray-50);
  white-space: nowrap;
  user-select: none;
}
.datagrid-table tbody {
  font-variant-numeric: tabular-nums;
}
.datagrid-table tbody tr {
  transition: background-color var(--tblr-transition-fast);
}
.datagrid-table tbody tr:hover {
  background: var(--tblr-surface-hover);
}
.datagrid-table tbody tr.selected {
  background: var(--tblr-primary-lighter);
}
.datagrid-table tbody tr.selected:hover {
  background: var(--tblr-primary-light);
}
.datagrid-table .col-checkbox {
  width: 40px;
  text-align: center;
}
.datagrid-table th.col-checkbox {
  text-align: center;
}
.datagrid-table .col-id {
  font-family: var(--tblr-font-mono);
  font-size: var(--tblr-text-xs);
  color: var(--tblr-text-muted);
}
.datagrid-table .col-date {
  white-space: nowrap;
}
.datagrid-table .col-amount,
.datagrid-table .col-money {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: var(--tblr-font-medium);
}
.datagrid-table th.col-amount,
.datagrid-table th.col-money {
  text-align: right;
}
.datagrid-table th.col-amount .datagrid-sort-link,
.datagrid-table th.col-money .datagrid-sort-link {
  justify-content: flex-end;
}
.datagrid-table .col-status {
  white-space: nowrap;
}
.datagrid-table .col-actions {
  width: 1%;
  white-space: nowrap;
  text-align: right;
}
.datagrid-table tbody .badge {
  border-radius: var(--tblr-radius-full);
  padding: 2px 10px;
  font-weight: var(--tblr-font-medium);
  letter-spacing: 0;
}
.datagrid-table tbody .badge.bg-gray.text-gray-fg {
  background-color: var(--tblr-gray-100);
  color: var(--tblr-text-secondary);
}

.datagrid-sort-link {
  display: inline-flex;
  align-items: center;
  gap: var(--tblr-space-1);
  color: var(--tblr-text-muted);
  text-decoration: none;
  transition: color var(--tblr-transition-fast);
}
.datagrid-sort-link:hover {
  color: var(--tblr-text-primary);
}
.datagrid-sort-link.sorted {
  color: var(--tblr-primary);
}
.datagrid-sort-link .datagrid-sort-icon {
  display: inline-flex;
  width: 14px;
  height: 14px;
  opacity: 0.35;
  transition: opacity var(--tblr-transition-fast);
}
.datagrid-sort-link .datagrid-sort-icon.is-active {
  opacity: 1;
}
.datagrid-sort-link:hover .datagrid-sort-icon {
  opacity: 1;
}

.datagrid-row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--tblr-space-1);
}

.datagrid-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  color: var(--tblr-text-muted);
  background: transparent;
  border: none;
  border-radius: var(--tblr-radius-md);
  text-decoration: none;
  cursor: pointer;
  transition: color var(--tblr-transition-fast), background-color var(--tblr-transition-fast);
}
.datagrid-action-btn svg {
  width: 18px;
  height: 18px;
}
.datagrid-action-btn:hover {
  color: var(--tblr-primary);
  background: var(--tblr-primary-lighter);
}
.datagrid-action-btn.action-view:hover {
  color: var(--tblr-info);
  background: var(--tblr-info-lighter);
}
.datagrid-action-btn.action-edit:hover {
  color: var(--tblr-primary);
  background: var(--tblr-primary-lighter);
}
.datagrid-action-btn.action-delete:hover {
  color: var(--tblr-danger);
  background: var(--tblr-danger-lighter);
}

.datagrid-more-btn {
  opacity: 0.6;
  transition: opacity var(--tblr-transition-fast), color var(--tblr-transition-fast), background-color var(--tblr-transition-fast);
}
.datagrid-more-btn:hover, .datagrid-more-btn[aria-expanded=true] {
  opacity: 1;
  color: var(--tblr-text-primary);
  background: var(--tblr-gray-100);
}

.datagrid-more-menu .dropdown-menu {
  min-width: 160px;
  padding: var(--tblr-space-1);
  border-radius: var(--tblr-radius-md);
  box-shadow: var(--tblr-shadow-md);
}
.datagrid-more-menu .dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--tblr-space-2);
  padding: var(--tblr-space-2) var(--tblr-space-3);
  font-size: var(--tblr-text-sm);
  color: var(--tblr-text-primary);
  border-radius: var(--tblr-radius-sm);
  cursor: pointer;
}
.datagrid-more-menu .dropdown-item svg {
  width: 16px;
  height: 16px;
  color: var(--tblr-text-muted);
}
.datagrid-more-menu .dropdown-item:hover {
  background: var(--tblr-gray-50);
}
.datagrid-more-menu .dropdown-item.text-danger {
  color: var(--tblr-danger);
}
.datagrid-more-menu .dropdown-item.text-danger svg {
  color: var(--tblr-danger);
}
.datagrid-more-menu .dropdown-item.text-danger:hover {
  background: var(--tblr-danger-lighter);
}
.datagrid-more-menu .dropdown-divider {
  margin: var(--tblr-space-1) 0;
}

tbody tr:not(:hover) .datagrid-more-btn {
  opacity: 0;
}

tbody tr:hover .datagrid-more-btn,
.datagrid-more-menu.show .datagrid-more-btn {
  opacity: 0.6;
}

.datagrid-checkbox {
  display: flex;
  align-items: center;
  justify-content: center;
}
.datagrid-checkbox input[type=checkbox] {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--tblr-primary);
  cursor: pointer;
}

.datagrid-empty {
  padding: var(--tblr-space-16) var(--tblr-space-6);
  text-align: center;
}

.datagrid-empty-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  margin: 0 auto var(--tblr-space-6);
  color: var(--tblr-gray-300);
  background: var(--tblr-gray-50);
  border-radius: var(--tblr-radius-full);
}
.datagrid-empty-icon svg {
  width: 40px;
  height: 40px;
}

.datagrid-empty-title {
  margin: 0 0 var(--tblr-space-2);
  font-size: var(--tblr-text-lg);
  font-weight: var(--tblr-font-semibold);
  color: var(--tblr-text-primary);
}

.datagrid-empty-message {
  margin: 0 0 var(--tblr-space-6);
  font-size: var(--tblr-text-sm);
  color: var(--tblr-text-muted);
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

.datagrid-empty-action {
  display: inline-flex;
  align-items: center;
  gap: var(--tblr-space-2);
}

.datagrid-bulk-bar {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: transform 300ms cubic-bezier(0, 0, 0.2, 1), opacity 300ms cubic-bezier(0, 0, 0.2, 1), visibility 0s 300ms;
}
.datagrid-bulk-bar.visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: transform 300ms cubic-bezier(0, 0, 0.2, 1), opacity 300ms cubic-bezier(0, 0, 0.2, 1), visibility 0s;
}

.datagrid-bulk-bar-inner {
  display: flex;
  align-items: center;
  gap: var(--tblr-space-4);
  padding: var(--tblr-space-3) var(--tblr-space-4) var(--tblr-space-3) var(--tblr-space-6);
  background: var(--tblr-gray-900);
  border-radius: var(--tblr-radius-xl);
  box-shadow: var(--tblr-shadow-xl);
}

.datagrid-bulk-count {
  font-size: var(--tblr-text-sm);
  font-weight: var(--tblr-font-semibold);
  color: var(--tblr-text-inverse);
  white-space: nowrap;
}
.datagrid-bulk-count .count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 var(--tblr-space-2);
  margin-right: var(--tblr-space-1);
  font-size: var(--tblr-text-xs);
  color: var(--tblr-gray-900);
  background: var(--tblr-gray-100);
  border-radius: var(--tblr-radius-full);
}

.datagrid-bulk-actions {
  display: flex;
  align-items: center;
  gap: var(--tblr-space-2);
}

.datagrid-bulk-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--tblr-space-2);
  padding: var(--tblr-space-2) var(--tblr-space-4);
  font-size: var(--tblr-text-sm);
  font-weight: var(--tblr-font-medium);
  color: var(--tblr-text-inverse);
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: var(--tblr-radius-md);
  cursor: pointer;
  transition: background-color var(--tblr-transition-fast);
}
.datagrid-bulk-btn svg {
  width: 16px;
  height: 16px;
}
.datagrid-bulk-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}
.datagrid-bulk-btn.btn-danger {
  color: var(--tblr-danger-light);
}
.datagrid-bulk-btn.btn-danger:hover {
  background: rgba(239, 68, 68, 0.2);
}

.datagrid-bulk-divider {
  width: 1px;
  height: 24px;
  background: rgba(255, 255, 255, 0.2);
}

.datagrid-bulk-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  color: var(--tblr-gray-400);
  background: transparent;
  border: none;
  border-radius: var(--tblr-radius-md);
  cursor: pointer;
  transition: color var(--tblr-transition-fast), background-color var(--tblr-transition-fast);
}
.datagrid-bulk-close svg {
  width: 18px;
  height: 18px;
}
.datagrid-bulk-close:hover {
  color: var(--tblr-text-inverse);
  background: rgba(255, 255, 255, 0.1);
}

.datagrid-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tblr-space-4);
  padding: var(--tblr-space-4) var(--tblr-space-6);
  border-top: 1px solid var(--tblr-border-light);
  background: var(--tblr-surface);
}
@media (width <= 768px) {
  .datagrid-footer {
    flex-direction: column;
    gap: var(--tblr-space-3);
  }
}

.datagrid-footer-info {
  font-size: var(--tblr-text-sm);
  color: var(--tblr-text-muted);
}

.datagrid-per-page {
  display: flex;
  align-items: center;
  gap: var(--tblr-space-2);
  font-size: var(--tblr-text-sm);
  color: var(--tblr-text-muted);
}
.datagrid-per-page select {
  padding: var(--tblr-space-1-5) var(--tblr-space-3);
  font-size: var(--tblr-text-sm);
  color: var(--tblr-text-primary);
  background: var(--tblr-surface);
  border: 1px solid var(--tblr-border);
  border-radius: var(--tblr-radius-md);
  cursor: pointer;
}
.datagrid-per-page select:focus {
  border-color: var(--tblr-primary);
  box-shadow: var(--tblr-ring-primary);
  outline: none;
}

.datagrid-pagination .pagination {
  display: flex;
  align-items: center;
  gap: var(--tblr-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}
.datagrid-pagination .page-item .page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 var(--tblr-space-2);
  font-size: var(--tblr-text-sm);
  color: var(--tblr-text-secondary);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--tblr-radius-md);
  text-decoration: none;
  transition: color var(--tblr-transition-fast), background-color var(--tblr-transition-fast), border-color var(--tblr-transition-fast);
}
.datagrid-pagination .page-item .page-link:hover {
  color: var(--tblr-text-primary);
  background: var(--tblr-gray-50);
  border-color: var(--tblr-border);
}
.datagrid-pagination .page-item.active .page-link {
  color: var(--tblr-primary);
  background: var(--tblr-primary-lighter);
  border-color: var(--tblr-primary-light);
  font-weight: var(--tblr-font-medium);
}
.datagrid-pagination .page-item.disabled .page-link {
  color: var(--tblr-text-light);
  cursor: not-allowed;
  pointer-events: none;
}

.datagrid-status {
  display: inline-flex;
  align-items: center;
  gap: var(--tblr-space-1);
  padding: var(--tblr-space-0-5) var(--tblr-space-2);
  font-size: var(--tblr-text-xs);
  font-weight: var(--tblr-font-medium);
  text-transform: uppercase;
  letter-spacing: 0.025em;
  border-radius: var(--tblr-radius-sm);
}
.datagrid-status.status-success {
  color: #065f46;
  background: var(--tblr-success-lighter);
}
.datagrid-status.status-danger {
  color: #991b1b;
  background: var(--tblr-danger-lighter);
}
.datagrid-status.status-warning {
  color: #92400e;
  background: var(--tblr-warning-lighter);
}
.datagrid-status.status-info {
  color: #1e40af;
  background: var(--tblr-info-lighter);
}
.datagrid-status.status-primary {
  color: var(--tblr-primary-dark);
  background: var(--tblr-primary-lighter);
}
.datagrid-status.status-secondary {
  color: var(--tblr-gray-700);
  background: var(--tblr-gray-100);
}

.datagrid-relative-date {
  cursor: help;
  text-decoration: underline dotted var(--tblr-border-dark);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.datagrid-loading {
  position: relative;
}
.datagrid-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.7);
  z-index: 10;
}

.datagrid-loading-indicator {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 11;
}

@media (width <= 768px) {
  .datagrid-header {
    flex-direction: column;
    align-items: stretch;
  }
  .datagrid-search {
    max-width: none;
  }
  .datagrid-table th,
  .datagrid-table td {
    padding: var(--tblr-space-2) var(--tblr-space-3);
  }
  .datagrid-bulk-bar-inner {
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--tblr-space-3);
    padding: var(--tblr-space-4);
  }
  .datagrid-bulk-divider {
    display: none;
  }
}
.datagrid-table .col-expand {
  width: 40px;
  text-align: center;
  padding-right: var(--tblr-space-2);
}

.datagrid-expand-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  color: var(--tblr-text-muted);
  background: transparent;
  border: none;
  border-radius: var(--tblr-radius-sm);
  cursor: pointer;
  transition: color var(--tblr-transition-fast), background-color var(--tblr-transition-fast);
}
.datagrid-expand-btn span {
  display: inline-flex;
  transition: transform 200ms ease;
}
.datagrid-expand-btn:hover {
  color: var(--tblr-text-primary);
  background: var(--tblr-gray-100);
}

.datagrid-detail-row {
  display: none;
  background: var(--tblr-gray-50);
}
.datagrid-detail-row.visible {
  display: table-row;
}
.datagrid-detail-row td {
  padding: 0;
  border-bottom: none;
}

.datagrid-detail-content {
  padding: var(--tblr-space-4) var(--tblr-space-6);
  animation: datagrid-slide-down 200ms ease;
}
.datagrid-detail-content .card {
  box-shadow: none;
  border: 1px solid var(--tblr-border-light);
}

@keyframes datagrid-slide-down {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.api-token-history h4 {
  font-size: 1rem;
  font-weight: var(--tblr-font-semibold);
  color: var(--tblr-text-primary);
}
.api-token-history .table {
  margin-bottom: 0;
  background: var(--tblr-surface);
  border: 1px solid var(--tblr-border-light);
  border-radius: var(--tblr-radius-md);
  overflow: hidden;
}
.api-token-history .table thead th {
  font-size: 0.75rem;
  font-weight: var(--tblr-font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--tblr-text-muted);
  background: var(--tblr-gray-50);
  border-bottom: 2px solid var(--tblr-border-light);
  padding: var(--tblr-space-2) var(--tblr-space-3);
}
.api-token-history .table tbody tr {
  transition: background-color var(--tblr-transition-fast);
}
.api-token-history .table tbody tr:hover {
  background-color: var(--tblr-surface-hover);
}
.api-token-history .table tbody tr td {
  padding: var(--tblr-space-2) var(--tblr-space-3);
  vertical-align: middle;
  font-size: 0.875rem;
  border-bottom: 1px solid var(--tblr-border-light);
}
.api-token-history .table tbody tr:last-child td {
  border-bottom: none;
}
.api-token-history .badge {
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  font-weight: var(--tblr-font-medium);
}

/**
 * SolidInvoice - Client Form Styles
 *
 * Client-specific styles for the client creation/edit form.
 * Outer form-page layout uses shared classes from _form-page.scss.
 */
.client-form-section-optional {
  background: var(--tblr-gray-50);
  border-style: dashed;
}
.client-form-section-optional .section-header {
  background: transparent;
}

.section-icon-required {
  background: linear-gradient(135deg, var(--tblr-primary-light) 0%, rgba(var(--tblr-primary-rgb), 0.2) 100%);
}

.contacts-list {
  display: flex;
  flex-direction: column;
  gap: var(--tblr-space-4);
}

.contact-card {
  background: var(--tblr-gray-50);
  border: 1px solid var(--tblr-border);
  border-radius: var(--tblr-radius-md);
  transition: border-color var(--tblr-transition-fast), box-shadow var(--tblr-transition-fast);
}
.contact-card:focus-within {
  border-color: rgba(var(--tblr-primary-rgb), 0.4);
  box-shadow: 0 0 0 3px rgba(var(--tblr-primary-rgb), 0.08);
}

.contact-card-header {
  display: flex;
  align-items: center;
  gap: var(--tblr-space-3);
  padding: var(--tblr-space-3) var(--tblr-space-4);
  background: var(--tblr-surface);
  border-bottom: 1px solid var(--tblr-border-light);
}

.contact-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--tblr-primary-light);
  border-radius: var(--tblr-radius-full);
  color: var(--tblr-primary);
}

.contact-card-title {
  flex: 1;
}

.contact-label {
  font-size: var(--tblr-text-sm);
  font-weight: var(--tblr-font-semibold);
  color: var(--tblr-text-primary);
}

.contact-card-actions {
  display: flex;
  gap: var(--tblr-space-2);
}

.contact-card-body {
  padding: var(--tblr-space-4);
}

.contact-form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--tblr-space-3);
}
@media (width <= 576px) {
  .contact-form-grid {
    grid-template-columns: 1fr;
  }
}

.contact-field-email {
  grid-column: 1/-1;
}

.additional-details-section {
  margin-top: var(--tblr-space-4);
  padding-top: var(--tblr-space-4);
  border-top: 1px dashed var(--tblr-border);
}

.additional-details-header {
  margin-bottom: var(--tblr-space-3);
}

.additional-details-label {
  display: inline-flex;
  align-items: center;
  gap: var(--tblr-space-2);
  font-size: var(--tblr-text-sm);
  font-weight: var(--tblr-font-medium);
  color: var(--tblr-text-secondary);
}

.additional-details-list {
  display: flex;
  flex-direction: column;
  gap: var(--tblr-space-2);
}

.additional-detail-row {
  display: grid;
  grid-template-columns: 140px 1fr auto;
  gap: var(--tblr-space-2);
  align-items: start;
}
@media (width <= 576px) {
  .additional-detail-row {
    grid-template-columns: 1fr;
    gap: var(--tblr-space-2);
  }
  .additional-detail-row .additional-detail-action {
    justify-self: end;
  }
}

.additional-detail-action {
  display: flex;
  align-items: center;
  padding-top: var(--tblr-space-1);
}

.additional-details-add {
  margin-top: var(--tblr-space-3);
}

.add-detail-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--tblr-space-1);
  font-size: var(--tblr-text-sm);
}

.addresses-list {
  display: flex;
  flex-direction: column;
  gap: var(--tblr-space-4);
}

.address-card {
  background: var(--tblr-surface);
  border: 1px solid var(--tblr-border);
  border-radius: var(--tblr-radius-md);
  overflow: hidden;
  transition: border-color var(--tblr-transition-fast), box-shadow var(--tblr-transition-fast);
}
.address-card:focus-within {
  border-color: rgba(var(--tblr-primary-rgb), 0.4);
  box-shadow: 0 0 0 3px rgba(var(--tblr-primary-rgb), 0.08);
}

.address-card-header {
  display: flex;
  align-items: center;
  gap: var(--tblr-space-3);
  padding: var(--tblr-space-3) var(--tblr-space-4);
  background: var(--tblr-gray-50);
  border-bottom: 1px solid var(--tblr-border-light);
}

.address-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--tblr-info-light);
  border-radius: var(--tblr-radius-full);
  color: var(--tblr-info);
}

.address-card-title {
  flex: 1;
}

.address-label {
  font-size: var(--tblr-text-sm);
  font-weight: var(--tblr-font-semibold);
  color: var(--tblr-text-primary);
}

.address-card-actions {
  display: flex;
  gap: var(--tblr-space-2);
}

.address-card-body {
  padding: var(--tblr-space-4);
}

.address-form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--tblr-space-3);
}
@media (width <= 576px) {
  .address-form-grid {
    grid-template-columns: 1fr;
  }
}

.add-item-action {
  margin-top: var(--tblr-space-4);
  padding-top: var(--tblr-space-4);
  border-top: 1px dashed var(--tblr-border);
}

.add-item-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--tblr-space-2);
  padding: var(--tblr-space-2-5) var(--tblr-space-4);
  font-weight: var(--tblr-font-medium);
  border-style: dashed;
  transition: all var(--tblr-transition-fast);
}
.add-item-btn:hover {
  background: var(--tblr-primary-lighter);
  border-style: solid;
}
.add-item-btn::before {
  content: "+";
  font-size: 1.25em;
  font-weight: 300;
}

@keyframes client-slide-in {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.contact-card,
.address-card {
  animation: client-slide-in 0.2s ease-out;
}

.contacts-list:empty::before,
.addresses-list:empty::before {
  content: "";
  display: none;
}

.empty-contacts-hint,
.empty-addresses-hint {
  padding: var(--tblr-space-6);
  text-align: center;
  background: var(--tblr-surface);
  border: 2px dashed var(--tblr-border);
  border-radius: var(--tblr-radius-md);
}
.empty-contacts-hint p,
.empty-addresses-hint p {
  font-size: var(--tblr-text-sm);
}

/**
 * SolidInvoice - Billing Form Styles
 *
 * Modern, clean invoice creation form with 2-column layout,
 * sticky totals sidebar, and collapsible sections.
 * Uses design system tokens for consistent styling.
 */
.billing-form-page {
  min-height: 100%;
}

.billing-form-container {
  max-width: 1100px;
  margin: 0 auto;
  padding-bottom: var(--tblr-space-24);
}

.billing-form-header {
  margin-bottom: var(--tblr-space-6);
  padding: var(--tblr-space-6) 0;
}

.billing-form-header-content {
  display: flex;
  align-items: center;
  gap: var(--tblr-space-4);
}

.billing-form-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, var(--tblr-primary-light) 0%, rgba(var(--tblr-primary-rgb), 0.15) 100%);
  border-radius: var(--tblr-radius-lg);
  color: var(--tblr-primary);
}

.billing-form-title {
  font-size: 1.75rem;
  font-weight: var(--tblr-font-bold);
  color: var(--tblr-text-primary);
  margin: 0;
  letter-spacing: -0.025em;
}

.billing-form-subtitle {
  font-size: var(--tblr-text-base);
  color: var(--tblr-text-muted);
  margin: var(--tblr-space-1) 0 0 0;
}

.billing-details-section {
  background: var(--tblr-surface);
  border: 1px solid var(--tblr-border);
  border-radius: var(--tblr-radius-lg);
  padding: var(--tblr-space-6);
  margin-bottom: var(--tblr-space-6);
  transition: box-shadow var(--tblr-transition-base);
}
.billing-details-section:focus-within {
  border-color: rgba(var(--tblr-primary-rgb), 0.3);
  box-shadow: 0 0 0 3px rgba(var(--tblr-primary-rgb), 0.08);
}

.billing-details-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--tblr-space-6);
}
@media (width <= 768px) {
  .billing-details-grid {
    grid-template-columns: 1fr;
  }
}
.billing-details-grid--no-dates .billing-details-right {
  justify-content: flex-start;
  padding-top: var(--tblr-space-2);
}

.billing-details-left {
  display: flex;
  flex-direction: column;
  gap: var(--tblr-space-4);
}

.billing-details-right {
  display: flex;
  flex-direction: column;
  gap: var(--tblr-space-4);
}

.billing-id-display {
  display: flex;
  align-items: center;
  gap: var(--tblr-space-2);
  margin-bottom: var(--tblr-space-2);
}
.billing-id-display .billing-id-label {
  font-size: var(--tblr-text-2xl);
  font-weight: var(--tblr-font-semibold);
  color: var(--tblr-text-primary);
}
.billing-id-display .billing-id-value {
  font-size: var(--tblr-text-2xl);
  font-weight: var(--tblr-font-bold);
  color: var(--tblr-text-primary);
  font-family: var(--tblr-font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.billing-id-display .billing-id-edit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--tblr-radius-sm);
  color: var(--tblr-text-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all var(--tblr-transition-fast);
}
.billing-id-display .billing-id-edit:hover {
  color: var(--tblr-primary);
  background: var(--tblr-primary-light);
}

.billing-id-form {
  display: flex;
  align-items: center;
  gap: var(--tblr-space-2);
}
.billing-id-form .form-control {
  max-width: 200px;
}
.billing-id-form .btn {
  padding: var(--tblr-space-2);
}

.invoice-dates-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--tblr-space-4);
}
@media (width <= 576px) {
  .invoice-dates-row {
    grid-template-columns: 1fr;
  }
}

.client-selection {
  margin-bottom: var(--tblr-space-4);
}

.selected-client-card {
  background: var(--tblr-gray-50);
  border: 1px solid var(--tblr-border);
  border-radius: var(--tblr-radius-md);
  padding: var(--tblr-space-4);
  animation: billing-slide-in 0.2s ease-out;
}

.selected-client-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--tblr-space-3);
}

.selected-client-name {
  font-size: var(--tblr-text-lg);
  font-weight: var(--tblr-font-semibold);
  color: var(--tblr-text-primary);
  display: flex;
  align-items: center;
  gap: var(--tblr-space-2);
}

.selected-client-change {
  font-size: var(--tblr-text-sm);
  color: var(--tblr-primary);
  text-decoration: none;
}
.selected-client-change:hover {
  text-decoration: underline;
}

.selected-client-contacts {
  border-top: 1px dashed var(--tblr-border);
  padding-top: var(--tblr-space-3);
  margin-top: var(--tblr-space-3);
}

.contacts-label {
  font-size: var(--tblr-text-sm);
  font-weight: var(--tblr-font-medium);
  color: var(--tblr-text-secondary);
  margin-bottom: var(--tblr-space-2);
  display: flex;
  align-items: center;
  gap: var(--tblr-space-2);
}

.contacts-list {
  display: flex;
  flex-direction: column;
  gap: var(--tblr-space-2);
}

.contact-checkbox {
  display: flex;
  align-items: center;
  gap: var(--tblr-space-2);
  padding: var(--tblr-space-2) var(--tblr-space-3);
  background: var(--tblr-surface);
  border-radius: var(--tblr-radius-sm);
  transition: background var(--tblr-transition-fast);
}
.contact-checkbox:hover {
  background: var(--tblr-gray-100);
}
.contact-checkbox .form-check-input {
  margin: 0;
}
.contact-checkbox .contact-name {
  font-weight: var(--tblr-font-medium);
}
.contact-checkbox .contact-email {
  font-size: var(--tblr-text-sm);
  color: var(--tblr-text-muted);
}

.billing-form-main {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--tblr-space-6);
  align-items: start;
}
@media (width <= 1100px) {
  .billing-form-main {
    grid-template-columns: 1fr 280px;
  }
}
@media (width <= 900px) {
  .billing-form-main {
    grid-template-columns: 1fr;
  }
}

.billing-items-section {
  background: var(--tblr-surface);
  border: 1px solid var(--tblr-border);
  border-radius: var(--tblr-radius-lg);
  overflow: hidden;
}

.billing-items-header {
  display: flex;
  align-items: center;
  gap: var(--tblr-space-3);
  padding: var(--tblr-space-4) var(--tblr-space-6);
  background: var(--tblr-gray-50);
  border-bottom: 1px solid var(--tblr-border-light);
}

.billing-items-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, var(--tblr-primary-light) 0%, rgba(var(--tblr-primary-rgb), 0.2) 100%);
  border-radius: var(--tblr-radius-md);
  color: var(--tblr-primary);
}

.billing-items-title {
  font-size: var(--tblr-text-lg);
  font-weight: var(--tblr-font-semibold);
  color: var(--tblr-text-primary);
  margin: 0;
}

.billing-items-body {
  padding: var(--tblr-space-4);
}

.billing-items-list {
  margin-bottom: var(--tblr-space-4);
}

.billing-items-header-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 2.6fr) minmax(130px, 1.1fr) 56px minmax(140px, 0.9fr) minmax(60px, 0.4fr) 24px;
  gap: var(--tblr-space-2);
  padding: var(--tblr-space-3);
  border-bottom: 1px solid var(--tblr-border);
}
.billing-items-header-row > div {
  font-size: var(--tblr-text-xs);
  font-weight: var(--tblr-font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--tblr-text-muted);
  white-space: nowrap;
}
.billing-items-header-row .column-total {
  text-align: right;
}
.billing-items-header-row .column-actions {
  text-align: center;
}
@media (width <= 900px) {
  .billing-items-header-row {
    display: none;
  }
}

.billing-items-list:not(:has(.column-tax)) .billing-items-header-row {
  grid-template-columns: 28px minmax(0, 3.8fr) minmax(100px, 0.9fr) 56px minmax(60px, 0.4fr) 24px;
}
.billing-items-list:not(:has(.column-tax)) .billing-item-row {
  grid-template-columns: 28px minmax(0, 3.8fr) minmax(100px, 0.9fr) 56px minmax(60px, 0.4fr) 24px;
}
@media (width <= 900px) {
  .billing-items-list:not(:has(.column-tax)) .billing-item-row {
    grid-template-columns: 1fr 1fr;
  }
}

.billing-items-list:has(.column-tax):not(:has(.line-tax-row)) .billing-items-header-row,
.billing-items-list:has(.column-tax):not(:has(.line-tax-row)) .billing-item-row {
  grid-template-columns: 28px minmax(0, 3.2fr) minmax(130px, 1.1fr) 56px minmax(80px, 0.5fr) minmax(60px, 0.4fr) 24px;
}
@media (width <= 900px) {
  .billing-items-list:has(.column-tax):not(:has(.line-tax-row)) .billing-item-row {
    grid-template-columns: 1fr 1fr;
  }
}

.billing-item-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 2.6fr) minmax(130px, 1.1fr) 56px minmax(140px, 0.9fr) minmax(60px, 0.4fr) 24px;
  gap: var(--tblr-space-2);
  padding: var(--tblr-space-3);
  border-bottom: 1px solid var(--tblr-border-light);
  align-items: start;
  transition: background var(--tblr-transition-fast);
}
.billing-item-row > div {
  min-width: 0;
}
.billing-item-row:hover {
  background: var(--tblr-gray-50);
}
.billing-item-row:last-child {
  border-bottom: none;
}
.billing-item-row .column-description {
  min-width: 0;
  overflow: hidden;
}
.billing-item-row .column-description textarea {
  min-height: 60px;
  resize: vertical;
  width: 100%;
  max-width: 100%;
}
.billing-item-row .line-description {
  margin-top: 0.25rem;
}
.billing-item-row .line-description > summary {
  color: var(--tblr-secondary);
  cursor: pointer;
  font-size: 0.75rem;
  list-style: none;
  width: fit-content;
}
.billing-item-row .line-description > summary::-webkit-details-marker {
  display: none;
}
.billing-item-row .line-description > summary::before {
  content: "+";
  margin-right: 0.25rem;
}
.billing-item-row .line-description > summary:hover {
  color: var(--tblr-primary);
}
.billing-item-row .line-description[open] > summary {
  margin-bottom: 0.25rem;
}
.billing-item-row .line-description[open] > summary::before {
  content: "−";
}
.billing-item-row .column-price input,
.billing-item-row .column-price select,
.billing-item-row .column-qty input,
.billing-item-row .column-qty select,
.billing-item-row .column-tax input,
.billing-item-row .column-tax select {
  width: 100%;
}
.billing-item-row .column-price .input-group-text {
  padding: 0.25rem 0.4rem;
  font-size: var(--tblr-text-xs);
  font-weight: var(--tblr-font-medium);
  color: var(--tblr-text-muted);
  background: var(--tblr-gray-50);
  border-color: var(--tblr-border-light);
}
.billing-item-row .column-price input {
  min-width: 0;
}
.billing-item-row .column-qty input {
  text-align: center;
}
.billing-item-row .column-total {
  text-align: right;
  padding-top: var(--tblr-space-1);
}
.billing-item-row .column-total .item-total-value {
  font-size: var(--tblr-text-sm);
  font-weight: var(--tblr-font-semibold);
  color: var(--tblr-text-primary);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.billing-item-row .column-actions {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 0;
}
.billing-item-row .column-drag {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: var(--tblr-space-2);
}
.billing-item-row .line-drag-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: var(--tblr-radius-sm);
  background: none;
  color: var(--tblr-text-muted);
  cursor: grab;
  opacity: 0;
  transition: opacity var(--tblr-transition-fast), background var(--tblr-transition-fast), color var(--tblr-transition-fast);
}
.billing-item-row .line-drag-handle:hover {
  background: var(--tblr-gray-100);
  color: var(--tblr-text-primary);
}
.billing-item-row .line-drag-handle:active {
  cursor: grabbing;
}
.billing-item-row .line-drag-handle:focus-visible {
  opacity: 1;
  outline: 2px solid var(--tblr-primary);
  outline-offset: 1px;
}
.billing-item-row:hover .line-drag-handle {
  opacity: 1;
}
.billing-item-row .mobile-label {
  display: none;
}
@media (width <= 900px) {
  .billing-item-row {
    display: grid;
    position: relative;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "desc desc" "price qty" "tax tax" "actions total";
    gap: var(--tblr-space-3);
    padding: var(--tblr-space-4);
    margin-bottom: var(--tblr-space-3);
    background: var(--tblr-gray-50);
    border: 1px solid var(--tblr-border);
    border-radius: var(--tblr-radius-md);
  }
  .billing-item-row:hover {
    background: var(--tblr-gray-50);
  }
  .billing-item-row:last-child {
    border-bottom: 1px solid var(--tblr-border);
  }
  .billing-item-row .mobile-label {
    display: block;
    font-size: var(--tblr-text-xs);
    font-weight: var(--tblr-font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--tblr-text-muted);
    margin-bottom: var(--tblr-space-1);
  }
  .billing-item-row .column-description {
    grid-area: desc;
  }
  .billing-item-row .column-description textarea {
    width: 100%;
    min-height: 80px;
  }
  .billing-item-row .column-price {
    grid-area: price;
  }
  .billing-item-row .column-price input {
    width: 100%;
  }
  .billing-item-row .column-qty {
    grid-area: qty;
  }
  .billing-item-row .column-qty input {
    width: 100%;
  }
  .billing-item-row .column-tax {
    grid-area: tax;
  }
  .billing-item-row .column-tax select {
    width: 100%;
  }
  .billing-item-row .column-actions {
    grid-area: actions;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-top: var(--tblr-space-3);
    border-top: 1px dashed var(--tblr-border);
  }
  .billing-item-row .column-drag {
    position: absolute;
    top: var(--tblr-space-2);
    right: var(--tblr-space-2);
    padding-top: 0;
  }
  .billing-item-row .line-drag-handle {
    opacity: 1;
  }
  .billing-item-row .column-total {
    grid-area: total;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--tblr-space-2);
    padding-top: var(--tblr-space-3);
    border-top: 1px dashed var(--tblr-border);
  }
  .billing-item-row .column-total .mobile-label {
    display: inline;
    margin-bottom: 0;
  }
  .billing-item-row .column-total .item-total-value {
    font-size: var(--tblr-text-lg);
    font-weight: var(--tblr-font-semibold);
    color: var(--tblr-primary);
  }
}

.remove-item-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 4px;
  line-height: 1;
  border: 1px solid var(--tblr-border);
  background: var(--tblr-surface);
  color: var(--tblr-text-muted);
  border-radius: var(--tblr-radius-sm);
  cursor: pointer;
  transition: all var(--tblr-transition-fast);
}
.remove-item-btn svg {
  width: 12px;
  height: 12px;
}
.remove-item-btn:hover {
  color: var(--tblr-danger);
  background: var(--tblr-danger-lighter);
  border-color: var(--tblr-danger);
}
.remove-item-btn:focus {
  outline: 2px solid var(--tblr-primary);
  outline-offset: 2px;
}

.add-item-action {
  padding-top: var(--tblr-space-4);
  border-top: 1px dashed var(--tblr-border);
}

.add-item-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: var(--tblr-space-2);
  font-weight: var(--tblr-font-medium);
  color: var(--tblr-primary);
  background: transparent;
  border: 2px dashed var(--tblr-border);
  border-radius: var(--tblr-radius-md);
  cursor: pointer;
  transition: all var(--tblr-transition-fast);
}
.add-item-btn:hover {
  background: var(--tblr-primary-lighter);
  border-color: var(--tblr-primary);
  border-style: solid;
}

.line-tax-collection {
  display: flex;
  flex-direction: column;
  gap: var(--tblr-space-1);
  min-width: 0;
}

.line-tax-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.line-tax-row {
  display: flex;
  align-items: center;
  gap: var(--tblr-space-1);
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.line-tax-field-tax {
  flex: 1 1 auto;
  min-width: 0;
}
.line-tax-field-tax select,
.line-tax-field-tax .form-select {
  width: 100%;
  min-width: 0;
  padding: 4px 22px 4px 8px;
  font-size: var(--tblr-text-xs);
  line-height: 1.2;
  background-position: right 6px center;
  background-size: 12px;
}

.line-tax-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}

.line-tax-remove-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 4px;
  line-height: 1;
  color: var(--tblr-text-muted);
  background: transparent;
  border: 0;
  border-radius: var(--tblr-radius-sm);
  cursor: pointer;
  transition: color var(--tblr-transition-fast), background var(--tblr-transition-fast);
}
.line-tax-remove-btn svg {
  width: 12px;
  height: 12px;
}
.line-tax-remove-btn:hover {
  color: var(--tblr-danger);
  background: rgba(var(--tblr-danger-rgb), 0.08);
}

.line-tax-add-btn {
  align-self: flex-start;
  padding: 2px 8px;
  font-size: var(--tblr-text-xs);
  font-weight: var(--tblr-font-medium);
  line-height: 1.4;
  color: var(--tblr-primary);
  background: transparent;
  border: 1px dashed var(--tblr-border);
  border-radius: var(--tblr-radius-sm);
  cursor: pointer;
  transition: all var(--tblr-transition-fast);
}
.line-tax-add-btn:hover {
  color: var(--tblr-primary-dark);
  border-color: var(--tblr-primary);
  background: var(--tblr-primary-lighter);
}

.billing-invoice-taxes {
  margin-top: var(--tblr-space-4);
  padding: var(--tblr-space-4) var(--tblr-space-6) var(--tblr-space-6);
  border-top: 1px solid var(--tblr-border-light);
  background: var(--tblr-gray-50);
}

.billing-invoice-taxes-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tblr-space-3);
  margin-bottom: var(--tblr-space-3);
}

.billing-invoice-taxes-title {
  font-size: var(--tblr-text-md);
  font-weight: var(--tblr-font-semibold);
  color: var(--tblr-text-primary);
  margin: 0;
}

.billing-invoice-taxes-subtitle {
  flex-basis: 100%;
  margin: 0;
  font-size: var(--tblr-text-sm);
}

.billing-invoice-taxes-list {
  display: flex;
  flex-direction: column;
  gap: var(--tblr-space-3);
  margin-bottom: var(--tblr-space-3);
}

.billing-invoice-tax-row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(10rem, 1fr) minmax(0, 3fr) auto;
  gap: var(--tblr-space-3);
  align-items: start;
  padding: var(--tblr-space-3);
  background: var(--tblr-surface);
  border: 1px solid var(--tblr-border);
  border-radius: var(--tblr-radius-md);
}
@media (width <= 768px) {
  .billing-invoice-tax-row {
    grid-template-columns: 1fr;
  }
}

.invoice-tax-field {
  display: flex;
  flex-direction: column;
  gap: var(--tblr-space-1);
}
.invoice-tax-field .mobile-label {
  display: none;
  font-size: var(--tblr-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--tblr-text-muted);
}
@media (width <= 768px) {
  .invoice-tax-field .mobile-label {
    display: block;
  }
}

.invoice-tax-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.billing-totals-sidebar {
  position: sticky;
  top: var(--tblr-space-6);
}
@media (width <= 992px) {
  .billing-totals-sidebar {
    position: static;
  }
}

.billing-totals-card {
  background: var(--tblr-surface);
  border: 1px solid var(--tblr-border);
  border-radius: var(--tblr-radius-lg);
  overflow: hidden;
}

.billing-totals-header {
  display: flex;
  align-items: center;
  gap: var(--tblr-space-3);
  padding: var(--tblr-space-4) var(--tblr-space-5);
  background: var(--tblr-gray-50);
  border-bottom: 1px solid var(--tblr-border-light);
}

.billing-totals-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, var(--tblr-success-light) 0%, rgba(var(--tblr-success-rgb), 0.2) 100%);
  border-radius: var(--tblr-radius-md);
  color: var(--tblr-success);
}

.billing-totals-title {
  font-size: var(--tblr-text-lg);
  font-weight: var(--tblr-font-semibold);
  color: var(--tblr-text-primary);
  margin: 0;
}

.billing-totals-body {
  padding: var(--tblr-space-5);
}

.totals-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--tblr-space-3) 0;
}
.totals-row:not(:last-child) {
  border-bottom: 1px solid var(--tblr-border-light);
}

.totals-label {
  font-size: var(--tblr-text-sm);
  color: var(--tblr-text-secondary);
}

.totals-value {
  font-size: var(--tblr-text-base);
  font-weight: var(--tblr-font-medium);
  color: var(--tblr-text-primary);
  font-variant-numeric: tabular-nums;
}

.totals-row-discount .totals-value {
  color: var(--tblr-text-muted);
}

.totals-row-total {
  padding-top: var(--tblr-space-4);
  margin-top: var(--tblr-space-2);
  border-top: 1px solid var(--tblr-border-dark);
}
.totals-row-total .totals-label {
  font-size: var(--tblr-text-lg);
  font-weight: var(--tblr-font-semibold);
  color: var(--tblr-text-primary);
}
.totals-row-total .totals-value {
  font-size: var(--tblr-text-2xl);
  font-weight: var(--tblr-font-bold);
  color: var(--tblr-text-primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.discount-field {
  margin-top: var(--tblr-space-4);
  padding-top: var(--tblr-space-4);
  border-top: 1px dashed var(--tblr-border);
}
.discount-field .form-label {
  font-size: var(--tblr-text-sm);
  font-weight: var(--tblr-font-medium);
  color: var(--tblr-text-secondary);
}

.billing-terms-section {
  margin-top: var(--tblr-space-6);
  background: var(--tblr-gray-50);
  border: 1px dashed var(--tblr-border);
  border-radius: var(--tblr-radius-lg);
  overflow: hidden;
}
.billing-terms-section[open] {
  background: var(--tblr-surface);
  border-style: solid;
}
.billing-terms-section[open] .terms-summary {
  border-bottom: 1px solid var(--tblr-border-light);
}
.billing-terms-section[open] .terms-summary-icon {
  transform: rotate(90deg);
}

.terms-summary {
  display: flex;
  align-items: center;
  gap: var(--tblr-space-3);
  padding: var(--tblr-space-4) var(--tblr-space-5);
  cursor: pointer;
  list-style: none;
  transition: background var(--tblr-transition-fast);
}
.terms-summary::-webkit-details-marker {
  display: none;
}
.terms-summary:hover {
  background: var(--tblr-gray-100);
}

.terms-summary-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--tblr-text-muted);
  transition: transform var(--tblr-transition-fast);
}

.terms-summary-text {
  flex: 1;
}

.terms-summary-title {
  font-size: var(--tblr-text-base);
  font-weight: var(--tblr-font-medium);
  color: var(--tblr-text-primary);
}

.terms-content {
  padding: var(--tblr-space-6);
}

.terms-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--tblr-space-4);
}
@media (width <= 768px) {
  .terms-grid {
    grid-template-columns: 1fr;
  }
}

.billing-form-actions {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--tblr-surface);
  border-top: 1px solid var(--tblr-border);
  padding: var(--tblr-space-4) 0;
  margin-top: var(--tblr-space-8);
  z-index: 10;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.05);
}

.billing-form-actions-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--tblr-space-4);
}

.save-button-group {
  box-shadow: var(--tblr-shadow-primary);
  border-radius: var(--tblr-radius-md);
}
.save-button-group .btn-save-primary {
  box-shadow: none;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.save-button-group .btn-save-primary:hover {
  box-shadow: none;
  transform: none;
}
.save-button-group .dropdown-toggle-split {
  padding: var(--tblr-space-3) var(--tblr-space-3);
  border-left: 1px solid rgba(255, 255, 255, 0.2);
}
.save-button-group .dropdown-toggle-split::after {
  vertical-align: middle;
}
.save-button-group .dropdown-menu {
  min-width: 180px;
  padding: var(--tblr-space-2);
  border-radius: var(--tblr-radius-md);
  box-shadow: var(--tblr-shadow-lg);
  border: 1px solid var(--tblr-border);
}
.save-button-group .dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--tblr-space-2);
  padding: var(--tblr-space-2-5) var(--tblr-space-3);
  border-radius: var(--tblr-radius-sm);
  font-weight: var(--tblr-font-medium);
  color: var(--tblr-text-primary);
  transition: all var(--tblr-transition-fast);
}
.save-button-group .dropdown-item svg {
  color: var(--tblr-text-muted);
  transition: color var(--tblr-transition-fast);
}
.save-button-group .dropdown-item:hover {
  background: var(--tblr-primary-lighter);
  color: var(--tblr-primary);
}
.save-button-group .dropdown-item:hover svg {
  color: var(--tblr-primary);
}
.save-button-group:hover {
  box-shadow: var(--tblr-shadow-primary-lg);
}

@media (width <= 768px) {
  .billing-items-table {
    display: none;
  }
  .billing-items-cards {
    display: flex;
    flex-direction: column;
    gap: var(--tblr-space-4);
  }
}
@media (width >= 769px) {
  .billing-items-cards {
    display: none;
  }
}
.billing-item-card {
  background: var(--tblr-gray-50);
  border: 1px solid var(--tblr-border);
  border-radius: var(--tblr-radius-md);
  padding: var(--tblr-space-4);
  animation: billing-slide-in 0.2s ease-out;
}
.billing-item-card:focus-within {
  border-color: rgba(var(--tblr-primary-rgb), 0.4);
  box-shadow: 0 0 0 3px rgba(var(--tblr-primary-rgb), 0.08);
}

.billing-item-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--tblr-space-3);
}

.billing-item-card-number {
  font-size: var(--tblr-text-sm);
  font-weight: var(--tblr-font-semibold);
  color: var(--tblr-text-muted);
}

.billing-item-card-body {
  display: flex;
  flex-direction: column;
  gap: var(--tblr-space-3);
}

.billing-item-card-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--tblr-space-3);
}

.billing-item-card-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--tblr-space-3);
  margin-top: var(--tblr-space-3);
  border-top: 1px dashed var(--tblr-border);
}
.billing-item-card-total .item-total-label {
  font-size: var(--tblr-text-sm);
  color: var(--tblr-text-muted);
}
.billing-item-card-total .item-total-value {
  font-size: var(--tblr-text-lg);
  font-weight: var(--tblr-font-semibold);
  color: var(--tblr-primary);
}

@keyframes billing-slide-in {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (width <= 768px) {
  .billing-form-container {
    padding: 0 var(--tblr-space-4);
    padding-bottom: var(--tblr-space-20);
  }
  .billing-form-header {
    margin-bottom: var(--tblr-space-4);
    padding: var(--tblr-space-4) 0;
  }
  .billing-form-icon {
    width: 48px;
    height: 48px;
  }
  .billing-form-title {
    font-size: 1.5rem;
  }
  .billing-details-section,
  .billing-items-section,
  .billing-totals-card {
    border-radius: var(--tblr-radius-md);
  }
  .billing-form-actions-inner {
    gap: var(--tblr-space-3);
  }
  .billing-form-actions-inner .btn {
    flex: 1;
  }
  .billing-id-display {
    flex-wrap: wrap;
  }
  .billing-id-display .billing-id-label,
  .billing-id-display .billing-id-value {
    font-size: var(--tblr-text-xl);
  }
}
.recurring-schedule-section {
  margin-block: var(--tblr-space-6);
  padding: var(--tblr-space-5);
  background: var(--tblr-surface);
  border: 1px solid var(--tblr-border);
  border-radius: var(--tblr-radius-lg);
}
.recurring-schedule-section .section-header {
  display: flex;
  align-items: flex-start;
  gap: var(--tblr-space-3);
  margin-block-end: var(--tblr-space-5);
  padding-block-end: var(--tblr-space-4);
  border-block-end: 1px solid var(--tblr-border-light);
}
.recurring-schedule-section .section-header .section-header-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--tblr-radius-md);
  background: linear-gradient(135deg, var(--tblr-primary) 0%, var(--tblr-primary-dark) 100%);
  color: #ffffff;
  flex-shrink: 0;
}
.recurring-schedule-section .section-header .section-header-content {
  flex: 1;
}
.recurring-schedule-section .section-header .section-header-content .section-title {
  font-size: var(--tblr-text-lg);
  font-weight: var(--tblr-font-semibold);
  color: var(--tblr-text-primary);
  margin: 0 0 var(--tblr-space-1) 0;
}
.recurring-schedule-section .section-header .section-header-content .section-description {
  font-size: var(--tblr-text-sm);
  color: var(--tblr-text-secondary);
  margin: 0;
}
.recurring-schedule-section .recurring-schedule-content {
  display: flex;
  flex-direction: column;
  gap: var(--tblr-space-4);
}

.recurring-options-wrapper [id$=_type], .recurring-options-wrapper [id$=_endType] {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--tblr-space-3);
  margin-block-start: var(--tblr-space-2);
}
@media (width <= 768px) {
  .recurring-options-wrapper [id$=_type], .recurring-options-wrapper [id$=_endType] {
    grid-template-columns: repeat(2, 1fr);
  }
}
.recurring-options-wrapper [id$=_type] .form-check-label.required::after, .recurring-options-wrapper [id$=_endType] .form-check-label.required::after {
  display: none;
}
.recurring-options-wrapper [id$=_type] > .form-check, .recurring-options-wrapper [id$=_endType] > .form-check {
  position: relative;
  margin: 0;
  padding: 0;
}
.recurring-options-wrapper [id$=_type] > .form-check input[type=radio], .recurring-options-wrapper [id$=_endType] > .form-check input[type=radio] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.recurring-options-wrapper [id$=_type] > .form-check label, .recurring-options-wrapper [id$=_endType] > .form-check label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--tblr-space-1);
  padding: var(--tblr-space-3);
  border: 2px solid var(--tblr-border);
  border-radius: var(--tblr-radius-md);
  background: var(--tblr-surface);
  transition: all 0.2s ease;
  min-height: 70px;
  cursor: pointer;
  margin: 0;
  font-size: var(--tblr-text-sm);
  font-weight: var(--tblr-font-medium);
  color: var(--tblr-text-primary);
  text-align: center;
}
.recurring-options-wrapper [id$=_type] > .form-check:hover label, .recurring-options-wrapper [id$=_endType] > .form-check:hover label {
  border-color: var(--tblr-primary);
  background: var(--tblr-primary-lighter);
}
.recurring-options-wrapper [id$=_type] > .form-check input[type=radio]:checked + label, .recurring-options-wrapper [id$=_endType] > .form-check input[type=radio]:checked + label {
  border-color: var(--tblr-primary);
  background: var(--tblr-primary);
  color: #ffffff;
}
.recurring-options-wrapper [id$=_endType] {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
}
.recurring-options-wrapper [id$=_days] {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  gap: var(--tblr-space-2);
  margin-block-start: var(--tblr-space-2);
}
@media (width <= 768px) {
  .recurring-options-wrapper [id$=_days] {
    grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
  }
}
.recurring-options-wrapper [id$=_days] > .form-check {
  position: relative;
  margin: 0;
  padding: 0;
}
.recurring-options-wrapper [id$=_days] > .form-check input[type=checkbox] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.recurring-options-wrapper [id$=_days] > .form-check label {
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: var(--tblr-space-3) var(--tblr-space-2);
  border: 2px solid var(--tblr-border);
  border-radius: var(--tblr-radius-md);
  background: var(--tblr-surface);
  font-size: var(--tblr-text-sm);
  font-weight: var(--tblr-font-medium);
  color: var(--tblr-text-primary) !important;
  transition: all 0.2s ease;
  min-height: 44px;
  text-align: center;
  cursor: pointer;
  margin: 0;
  opacity: 1 !important;
  visibility: visible !important;
}
.recurring-options-wrapper [id$=_days] > .form-check label::before, .recurring-options-wrapper [id$=_days] > .form-check label::after {
  content: none !important;
}
.recurring-options-wrapper [id$=_days] > .form-check:hover label {
  border-color: var(--tblr-primary);
  background: var(--tblr-primary-lighter);
}
.recurring-options-wrapper [id$=_days] > .form-check input[type=checkbox]:checked + label {
  border-color: var(--tblr-primary);
  background: var(--tblr-primary);
  color: #ffffff !important;
}

.recurring-frequency-display {
  display: flex;
  align-items: center;
  gap: var(--tblr-space-3);
  padding: var(--tblr-space-4);
  background: linear-gradient(135deg, var(--tblr-primary-lighter) 0%, rgba(var(--tblr-primary-rgb), 0.05) 100%);
  border: 1px solid rgba(var(--tblr-primary-rgb), 0.2);
  border-radius: var(--tblr-radius-md);
}
.recurring-frequency-display .recurring-frequency-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--tblr-primary-light);
  border-radius: var(--tblr-radius-md);
  color: var(--tblr-primary);
  flex-shrink: 0;
}
.recurring-frequency-display .recurring-frequency-text {
  flex: 1;
  font-size: var(--tblr-text-base);
  color: var(--tblr-text-primary);
}
.recurring-frequency-display .recurring-frequency-text strong {
  font-weight: var(--tblr-font-semibold);
  color: var(--tblr-primary);
}

.recurring-variables-help {
  margin-block-start: var(--tblr-space-3);
  padding: var(--tblr-space-3);
  border: 1px solid var(--tblr-info-light);
  border-radius: var(--tblr-radius-md);
  background: var(--tblr-info-lighter);
}
.recurring-variables-help .variables-summary {
  display: flex;
  align-items: center;
  gap: var(--tblr-space-2);
  font-size: var(--tblr-text-sm);
  font-weight: var(--tblr-font-medium);
  color: var(--tblr-info);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.recurring-variables-help .variables-summary::-webkit-details-marker {
  display: none;
}
.recurring-variables-help .variables-summary svg {
  flex-shrink: 0;
}
.recurring-variables-help .variables-summary:hover {
  color: var(--tblr-info-dark);
}
.recurring-variables-help .variables-content {
  margin-block-start: var(--tblr-space-3);
  padding-block-start: var(--tblr-space-3);
  border-block-start: 1px solid var(--tblr-info-light);
}
.recurring-variables-help .variables-content .variables-description {
  font-size: var(--tblr-text-sm);
  color: var(--tblr-text-secondary);
  margin-block-end: var(--tblr-space-3);
}
.recurring-variables-help .variables-content .variables-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--tblr-space-3) 0;
}
.recurring-variables-help .variables-content .variables-list li {
  display: flex;
  align-items: baseline;
  gap: var(--tblr-space-2);
  padding: var(--tblr-space-2) 0;
  font-size: var(--tblr-text-sm);
  line-height: 1.6;
}
.recurring-variables-help .variables-content .variables-list li code {
  padding: 2px 8px;
  background: var(--tblr-surface);
  border: 1px solid var(--tblr-border);
  border-radius: var(--tblr-radius-sm);
  font-family: var(--tblr-font-mono);
  font-size: var(--tblr-text-xs);
  color: var(--tblr-primary);
  font-weight: var(--tblr-font-medium);
  white-space: nowrap;
}
.recurring-variables-help .variables-content .variables-list li .variable-description {
  color: var(--tblr-text-muted);
}
.recurring-variables-help .variables-content .variable-example {
  padding: var(--tblr-space-3);
  background: var(--tblr-surface);
  border-inline-start: 3px solid var(--tblr-info);
  border-radius: var(--tblr-radius-sm);
  font-size: var(--tblr-text-sm);
}
.recurring-variables-help .variables-content .variable-example strong {
  color: var(--tblr-text-primary);
  font-weight: var(--tblr-font-semibold);
}
.recurring-variables-help .variables-content .variable-example .example-text {
  display: block;
  margin-block-start: var(--tblr-space-2);
  color: var(--tblr-text-secondary);
  font-family: var(--tblr-font-mono);
  font-size: var(--tblr-text-xs);
}
.recurring-variables-help[open] .variables-summary {
  margin-block-end: 0;
}

.invoice-sidebar-card-highlight {
  border-left: 3px solid var(--tblr-primary);
  background: linear-gradient(to right, rgba(var(--tblr-primary-rgb), 0.03), transparent);
}

.recurring-schedule-grid {
  display: flex;
  flex-direction: column;
  gap: var(--tblr-space-3);
}

.recurring-schedule-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: var(--tblr-space-2) 0;
}
.recurring-schedule-item:not(:last-child) {
  border-bottom: 1px solid var(--tblr-border-light);
}

.recurring-schedule-label {
  font-size: var(--tblr-text-sm);
  font-weight: var(--tblr-font-bold);
  color: var(--tblr-text-secondary);
}

.recurring-schedule-value {
  font-size: var(--tblr-text-sm);
  font-weight: var(--tblr-font-medium);
  color: var(--tblr-text-primary);
  text-align: right;
}

.occurrences-list {
  display: flex;
  flex-direction: column;
  gap: var(--tblr-space-2);
  padding: 0;
  margin: 0;
  list-style: none;
}

.occurrence-item {
  display: flex;
  align-items: center;
  gap: var(--tblr-space-3);
  padding: var(--tblr-space-3);
  background: var(--tblr-gray-50);
  border: 1px solid var(--tblr-border-light);
  border-radius: var(--tblr-radius-md);
  transition: all var(--tblr-transition-fast);
}
.occurrence-item:hover {
  background: var(--tblr-surface);
  border-color: rgba(var(--tblr-primary-rgb), 0.3);
  transform: translateX(2px);
}

.occurrence-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--tblr-primary-lighter);
  border-radius: var(--tblr-radius-md);
  color: var(--tblr-primary);
  flex-shrink: 0;
}

.occurrence-date {
  font-size: var(--tblr-text-sm);
  font-weight: var(--tblr-font-medium);
  color: var(--tblr-text-primary);
}

.generated-invoices-list {
  display: flex;
  flex-direction: column;
  gap: var(--tblr-space-2);
  padding: 0;
  margin: 0;
  list-style: none;
}

.generated-invoice-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tblr-space-3);
  padding: var(--tblr-space-3);
  background: var(--tblr-gray-50);
  border: 1px solid var(--tblr-border-light);
  border-radius: var(--tblr-radius-md);
  transition: all var(--tblr-transition-fast);
}
.generated-invoice-item:hover {
  background: var(--tblr-surface);
  border-color: rgba(var(--tblr-primary-rgb), 0.3);
}

.generated-invoice-link {
  display: flex;
  align-items: center;
  gap: var(--tblr-space-2);
  flex: 1;
  min-width: 0;
  text-decoration: none;
  color: var(--tblr-text-primary);
  transition: color var(--tblr-transition-fast);
}
.generated-invoice-link:hover {
  color: var(--tblr-primary);
}
.generated-invoice-link:hover .generated-invoice-number {
  color: var(--tblr-primary);
}

.generated-invoice-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: var(--tblr-success-lighter);
  border-radius: var(--tblr-radius-sm);
  color: var(--tblr-success);
  flex-shrink: 0;
}

.generated-invoice-number {
  font-size: var(--tblr-text-sm);
  font-weight: var(--tblr-font-semibold);
  color: var(--tblr-text-primary);
  transition: color var(--tblr-transition-fast);
}

.generated-invoice-meta {
  display: flex;
  align-items: center;
  gap: var(--tblr-space-2);
  flex-shrink: 0;
}

.generated-invoice-total {
  font-size: var(--tblr-text-sm);
  font-weight: var(--tblr-font-medium);
  color: var(--tblr-text-secondary);
  white-space: nowrap;
}

.view-all-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--tblr-space-2);
  padding: var(--tblr-space-3);
  margin-top: var(--tblr-space-2);
  font-size: var(--tblr-text-sm);
  font-weight: var(--tblr-font-medium);
  color: var(--tblr-primary);
  text-decoration: none;
  background: var(--tblr-primary-lighter);
  border: 1px solid rgba(var(--tblr-primary-rgb), 0.2);
  border-radius: var(--tblr-radius-md);
  transition: all var(--tblr-transition-fast);
}
.view-all-link:hover {
  background: rgba(var(--tblr-primary-rgb), 0.15);
  border-color: var(--tblr-primary);
  transform: translateY(-1px);
}

/**
 * SolidInvoice - Payment Page Styles
 *
 * Modern, clean payment page with two-column layout,
 * card-based payment method selection, and invoice summary.
 * Uses design system tokens for consistent styling.
 */
.payment-page {
  min-height: 100%;
}

.payment-container {
  max-width: 1200px;
  margin: 0 auto;
  padding-bottom: var(--tblr-space-12);
}

.payment-header {
  margin-bottom: var(--tblr-space-6);
  padding: var(--tblr-space-6) 0;
}

.payment-header-content {
  display: flex;
  align-items: center;
  gap: var(--tblr-space-4);
}

.payment-header-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, var(--tblr-primary-light) 0%, rgba(var(--tblr-primary-rgb), 0.15) 100%);
  border-radius: var(--tblr-radius-lg);
  color: var(--tblr-primary);
}

.payment-header-title {
  font-size: 1.75rem;
  font-weight: var(--tblr-font-bold);
  color: var(--tblr-text-primary);
  margin: 0;
  letter-spacing: -0.025em;
}

.payment-header-subtitle {
  font-size: var(--tblr-text-base);
  color: var(--tblr-text-muted);
  margin: var(--tblr-space-1) 0 0 0;
}

.payment-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--tblr-space-6);
  align-items: start;
}
@media (width <= 992px) {
  .payment-layout {
    grid-template-columns: 1fr;
  }
}

.payment-invoice-summary {
  position: sticky;
  top: var(--tblr-space-6);
}
@media (width <= 992px) {
  .payment-invoice-summary {
    position: static;
    order: 2;
  }
}

.invoice-summary-card {
  background: var(--tblr-surface);
  border: 1px solid var(--tblr-border);
  border-radius: var(--tblr-radius-lg);
  overflow: hidden;
}

.invoice-summary-header {
  display: flex;
  align-items: center;
  gap: var(--tblr-space-3);
  padding: var(--tblr-space-4) var(--tblr-space-5);
  background: var(--tblr-gray-50);
  border-bottom: 1px solid var(--tblr-border-light);
}

.invoice-summary-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, var(--tblr-info-light) 0%, rgba(var(--tblr-info-rgb), 0.2) 100%);
  border-radius: var(--tblr-radius-md);
  color: var(--tblr-info);
}

.invoice-summary-title {
  font-size: var(--tblr-text-lg);
  font-weight: var(--tblr-font-semibold);
  color: var(--tblr-text-primary);
  margin: 0;
}

.invoice-summary-body {
  padding: var(--tblr-space-5);
}

.summary-section {
  padding: var(--tblr-space-4) 0;
  border-bottom: 1px solid var(--tblr-border-light);
}
.summary-section:first-child {
  padding-top: 0;
}
.summary-section:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.summary-section-label {
  display: flex;
  align-items: center;
  gap: var(--tblr-space-2);
  font-size: var(--tblr-text-xs);
  font-weight: var(--tblr-font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--tblr-text-muted);
  margin-bottom: var(--tblr-space-3);
}

.summary-client-info {
  display: flex;
  align-items: center;
  gap: var(--tblr-space-2);
  flex-wrap: wrap;
}
.summary-client-info .client-name {
  font-size: var(--tblr-text-lg);
  font-weight: var(--tblr-font-semibold);
  color: var(--tblr-text-primary);
}

.client-credit-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--tblr-space-1);
  padding: var(--tblr-space-1-5) var(--tblr-space-3);
  margin-top: var(--tblr-space-2);
  font-size: var(--tblr-text-sm);
  color: var(--tblr-success);
  background: var(--tblr-success-lighter);
  border-radius: var(--tblr-radius-full);
}

.invoice-details-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--tblr-space-3);
}

.detail-item {
  display: flex;
  flex-direction: column;
  gap: var(--tblr-space-1);
}

.detail-label {
  font-size: var(--tblr-text-xs);
  color: var(--tblr-text-muted);
}

.detail-value {
  font-size: var(--tblr-text-sm);
  font-weight: var(--tblr-font-medium);
  color: var(--tblr-text-primary);
}

.line-items-preview {
  display: flex;
  flex-direction: column;
  gap: var(--tblr-space-2);
}

.line-item-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--tblr-space-2) var(--tblr-space-3);
  background: var(--tblr-gray-50);
  border-radius: var(--tblr-radius-sm);
}

.line-item-desc {
  font-size: var(--tblr-text-sm);
  color: var(--tblr-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60%;
}

.line-item-amount {
  font-size: var(--tblr-text-sm);
  font-weight: var(--tblr-font-medium);
  color: var(--tblr-text-primary);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.summary-totals {
  margin-top: var(--tblr-space-4);
  padding-top: var(--tblr-space-4);
  border-top: 1px solid var(--tblr-border);
}

.summary-totals .totals-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--tblr-space-2) 0;
}

.summary-totals .totals-label {
  font-size: var(--tblr-text-sm);
  color: var(--tblr-text-secondary);
}

.summary-totals .totals-value {
  font-size: var(--tblr-text-sm);
  font-weight: var(--tblr-font-medium);
  color: var(--tblr-text-primary);
  font-variant-numeric: tabular-nums;
}

.summary-totals .totals-row-discount .totals-value {
  color: var(--tblr-text-muted);
}

.summary-totals .totals-row-payment .totals-value {
  color: var(--tblr-success);
}

.summary-totals .totals-row-balance {
  margin-top: var(--tblr-space-2);
  padding-top: var(--tblr-space-3);
  border-top: 1px solid var(--tblr-border-dark);
}
.summary-totals .totals-row-balance .totals-label {
  font-size: var(--tblr-text-base);
  font-weight: var(--tblr-font-semibold);
  color: var(--tblr-text-primary);
}
.summary-totals .totals-row-balance .totals-value {
  font-size: var(--tblr-text-xl);
  font-weight: var(--tblr-font-bold);
  color: var(--tblr-text-primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

@media (width <= 992px) {
  .payment-form-section {
    order: 1;
  }
}

.payment-form-card {
  background: var(--tblr-surface);
  border: 1px solid var(--tblr-border);
  border-radius: var(--tblr-radius-lg);
  overflow: hidden;
}

.payment-form-header {
  display: flex;
  align-items: center;
  gap: var(--tblr-space-3);
  padding: var(--tblr-space-4) var(--tblr-space-5);
  background: var(--tblr-gray-50);
  border-bottom: 1px solid var(--tblr-border-light);
}

.payment-form-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, var(--tblr-success-light) 0%, rgba(var(--tblr-success-rgb), 0.2) 100%);
  border-radius: var(--tblr-radius-md);
  color: var(--tblr-success);
}

.payment-form-title {
  font-size: var(--tblr-text-lg);
  font-weight: var(--tblr-font-semibold);
  color: var(--tblr-text-primary);
  margin: 0;
}

.payment-form-body {
  padding: var(--tblr-space-5);
}

.payment-form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--tblr-space-4) var(--tblr-space-5);
  background: var(--tblr-gray-50);
  border-top: 1px solid var(--tblr-border-light);
}

.payment-form-body .form-label {
  display: block;
  font-size: var(--tblr-text-sm);
  font-weight: var(--tblr-font-medium);
  color: var(--tblr-text-secondary);
  margin-bottom: var(--tblr-space-2);
}
.payment-form-body .form-label.required::after {
  content: " *";
  color: var(--tblr-danger);
}
.payment-form-body .form-text {
  display: block;
  margin-top: var(--tblr-space-2);
}
.payment-form-body .input-group {
  flex-wrap: nowrap;
}
.payment-form-body textarea.form-control {
  min-height: 80px;
  resize: vertical;
}
.payment-form-body .mb-4:last-child {
  margin-bottom: 0 !important;
}

.payment-methods-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--tblr-space-3);
}

.payment-method-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--tblr-space-3);
  padding: var(--tblr-space-4);
  background: var(--tblr-surface);
  border: 2px solid var(--tblr-border);
  border-radius: var(--tblr-radius-md);
  cursor: pointer;
  transition: all var(--tblr-transition-fast);
}
.payment-method-card:hover {
  border-color: var(--tblr-primary);
  background: var(--tblr-primary-lighter);
}
.payment-method-card:has(.payment-method-input:checked) {
  border-color: var(--tblr-primary);
  background: var(--tblr-primary-lighter);
  box-shadow: var(--tblr-ring-primary);
}
.payment-method-card:has(.payment-method-input:checked) .payment-method-check {
  opacity: 1;
  transform: scale(1);
}
.payment-method-card:has(.payment-method-input:checked) .payment-method-icon {
  background: var(--tblr-primary);
  color: #ffffff;
}
.payment-method-card:has(.payment-method-input:focus-visible) {
  outline: 2px solid var(--tblr-primary);
  outline-offset: 2px;
}

.payment-method-preferred {
  order: -1;
}

.payment-method-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.payment-method-content {
  display: flex;
  flex-direction: column;
  gap: var(--tblr-space-1);
  flex: 1;
}

.payment-method-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--tblr-gray-100);
  border-radius: var(--tblr-radius-md);
  color: var(--tblr-text-secondary);
  transition: all var(--tblr-transition-fast);
}

.payment-method-name {
  font-size: var(--tblr-text-base);
  font-weight: var(--tblr-font-medium);
  color: var(--tblr-text-primary);
}

.payment-method-badge {
  display: inline-flex;
  align-self: flex-start;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: var(--tblr-font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--tblr-text-muted);
  background: var(--tblr-gray-200);
  border-radius: var(--tblr-radius-full);
}

.payment-method-badge-online {
  color: var(--tblr-info);
  background: var(--tblr-info-light);
}

.payment-method-badge-credit {
  color: var(--tblr-success);
  background: var(--tblr-success-light);
}

.payment-method-check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: var(--tblr-primary);
  color: #ffffff;
  border-radius: var(--tblr-radius-full);
  opacity: 0;
  transform: scale(0.8);
  transition: all var(--tblr-transition-fast);
}

.amount-field-wrapper {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--tblr-space-2);
  margin-bottom: var(--tblr-space-2);
  flex-wrap: wrap;
}
.amount-field-wrapper .form-label,
.amount-field-wrapper .form-section-label {
  margin-bottom: 0;
}

.amount-balance-hint {
  font-size: var(--tblr-text-sm);
  color: var(--tblr-text-muted);
  white-space: nowrap;
  padding: var(--tblr-space-1) var(--tblr-space-2);
  background: var(--tblr-primary-lighter);
  border-radius: var(--tblr-radius-sm);
}
.amount-balance-hint strong {
  color: var(--tblr-primary);
  font-weight: var(--tblr-font-semibold);
}

.capture-online-field {
  padding: var(--tblr-space-4);
  background: var(--tblr-gray-50);
  border: 1px solid var(--tblr-border);
  border-radius: var(--tblr-radius-md);
}
.capture-online-field .form-check {
  display: flex;
  align-items: center;
  gap: var(--tblr-space-2);
  margin-bottom: var(--tblr-space-2);
  padding-left: 0;
}
.capture-online-field .form-check-input {
  float: none;
  margin-left: 0;
  margin-top: 0;
  width: 2.5rem;
  height: 1.25rem;
  flex-shrink: 0;
}
.capture-online-field .form-check-label {
  font-weight: var(--tblr-font-medium);
  color: var(--tblr-text-primary);
  margin-bottom: 0;
}
.capture-online-field .form-help {
  margin-left: 0;
  padding-left: calc(2.5rem + var(--tblr-space-2));
}

[data-payment-method-select-target=captureOnline].d-none {
  display: none !important;
}

.client-name-link,
.invoice-id-link {
  display: inline-flex;
  align-items: center;
  gap: var(--tblr-space-1);
  color: var(--tblr-primary);
  text-decoration: none;
  font-weight: var(--tblr-font-semibold);
  transition: color var(--tblr-transition-fast);
}
.client-name-link svg,
.invoice-id-link svg {
  opacity: 0.5;
  transition: opacity var(--tblr-transition-fast);
}
.client-name-link:hover,
.invoice-id-link:hover {
  color: var(--tblr-primary-dark);
  text-decoration: underline;
}
.client-name-link:hover svg,
.invoice-id-link:hover svg {
  opacity: 1;
}

.client-name-link {
  font-size: var(--tblr-text-lg);
}

.invoice-id-link {
  font-size: var(--tblr-text-sm);
  font-family: var(--tblr-font-mono, monospace);
}

.payment-history-card {
  margin-top: var(--tblr-space-4);
  background: var(--tblr-surface);
  border: 1px solid var(--tblr-border);
  border-radius: var(--tblr-radius-lg);
  overflow: hidden;
}

.payment-history-header {
  display: flex;
  align-items: center;
  gap: var(--tblr-space-3);
  padding: var(--tblr-space-4) var(--tblr-space-5);
  background: var(--tblr-gray-50);
  border-bottom: 1px solid var(--tblr-border-light);
}

.payment-history-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, var(--tblr-warning-light, #fef3c7) 0%, rgba(245, 158, 11, 0.2) 100%);
  border-radius: var(--tblr-radius-md);
  color: var(--tblr-warning, #f59e0b);
}

.payment-history-title {
  flex: 1;
  font-size: var(--tblr-text-base);
  font-weight: var(--tblr-font-semibold);
  color: var(--tblr-text-primary);
  margin: 0;
}

.payment-history-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 var(--tblr-space-2);
  font-size: var(--tblr-text-xs);
  font-weight: var(--tblr-font-bold);
  color: var(--tblr-text-muted);
  background: var(--tblr-gray-200);
  border-radius: var(--tblr-radius-full);
}

.payment-history-body {
  padding: var(--tblr-space-4) var(--tblr-space-5);
}

.payments-list {
  display: flex;
  flex-direction: column;
  gap: var(--tblr-space-3);
}

.payment-card {
  padding: var(--tblr-space-3);
  background: var(--tblr-gray-50);
  border-radius: var(--tblr-radius-md);
  border-left: 3px solid var(--tblr-gray-300);
  transition: all var(--tblr-transition-fast);
}

.payment-card-captured {
  border-left-color: var(--tblr-success);
  background: var(--tblr-success-lighter, rgba(16, 185, 129, 0.05));
}

.payment-card-failed {
  border-left-color: var(--tblr-danger);
  background: var(--tblr-danger-lighter, rgba(239, 68, 68, 0.05));
}

.payment-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--tblr-space-2);
}

.payment-amount {
  font-size: var(--tblr-text-base);
  font-weight: var(--tblr-font-bold);
  color: var(--tblr-text-primary);
}

.payment-card-body {
  display: flex;
  flex-direction: column;
  gap: var(--tblr-space-1);
}

.payment-detail {
  display: flex;
  align-items: center;
  gap: var(--tblr-space-2);
  font-size: var(--tblr-text-xs);
  color: var(--tblr-text-muted);
}
.payment-detail svg {
  flex-shrink: 0;
  opacity: 0.7;
}

.payment-message {
  margin-top: var(--tblr-space-2);
  padding-top: var(--tblr-space-2);
  border-top: 1px solid var(--tblr-border-light);
  font-size: var(--tblr-text-xs);
  font-style: italic;
  color: var(--tblr-text-secondary);
}

.btn-pay {
  padding: var(--tblr-space-3) var(--tblr-space-6);
  font-weight: var(--tblr-font-semibold);
  box-shadow: var(--tblr-shadow-primary);
}
.btn-pay:hover {
  box-shadow: var(--tblr-shadow-primary-lg);
  transform: translateY(-1px);
}
.btn-pay:active {
  transform: translateY(0);
}

@media (width <= 768px) {
  .payment-container {
    padding: 0 var(--tblr-space-4);
    padding-bottom: var(--tblr-space-16);
  }
  .payment-header {
    margin-bottom: var(--tblr-space-4);
    padding: var(--tblr-space-4) 0;
  }
  .payment-header-icon {
    width: 48px;
    height: 48px;
  }
  .payment-header-title {
    font-size: 1.5rem;
  }
  .payment-methods-grid {
    grid-template-columns: 1fr;
  }
  .invoice-details-grid {
    grid-template-columns: 1fr;
  }
  .payment-form-footer {
    flex-direction: column-reverse;
    gap: var(--tblr-space-3);
  }
  .payment-form-footer .btn {
    width: 100%;
    justify-content: center;
  }
  .amount-field-wrapper {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--tblr-space-1);
  }
}
/**
 * Payments List Page Styles
 *
 * Minimal styling for the payments list page with KPI cards.
 * Most styles come from Tabler/Bootstrap - this file only adds specific customizations.
 */
.row-deck .card-sm {
  transition: all 0.2s ease-in-out;
}
.row-deck .card-sm:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/**
 * SolidInvoice - Users Page Styles
 *
 * Modern users list page with KPI cards and tabbed interface.
 * Uses design system tokens for consistent styling.
 */
.users-page {
  min-height: 100%;
}

/**
 * SolidInvoice - Profile Page Styles
 *
 * Styles for the user profile view and sidebar navigation.
 * Form pages (edit, change-password) use shared classes from _form-page.scss.
 * Includes: sidebar navigation, profile view, security status.
 */
.profile-sidebar {
  position: sticky;
  top: var(--tblr-space-6);
}
@media (width <= 991.98px) {
  .profile-sidebar {
    position: static;
    margin-bottom: var(--tblr-space-4);
  }
}

.profile-nav-card {
  background: var(--tblr-surface);
  border: 1px solid var(--tblr-border);
  border-radius: var(--tblr-radius-lg);
  overflow: hidden;
  box-shadow: var(--tblr-shadow-sm);
}

.profile-nav {
  display: flex;
  flex-direction: column;
}

.profile-nav-item {
  display: flex;
  align-items: center;
  gap: var(--tblr-space-3);
  padding: var(--tblr-space-3) var(--tblr-space-4);
  color: var(--tblr-text-secondary);
  text-decoration: none;
  transition: all var(--tblr-transition-base);
  border-left: 3px solid transparent;
  font-size: var(--tblr-text-base);
}
.profile-nav-item:hover {
  background: var(--tblr-gray-50);
  color: var(--tblr-text-primary);
  text-decoration: none;
}
.profile-nav-item.active {
  background: var(--tblr-primary-lighter);
  color: var(--tblr-primary);
  border-left-color: var(--tblr-primary);
  font-weight: var(--tblr-font-semibold);
}

.profile-nav-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: currentcolor;
}

.profile-nav-text {
  flex: 1;
}

.profile-header {
  display: flex;
  align-items: center;
  gap: var(--tblr-space-4);
  padding: var(--tblr-space-6);
  background: var(--tblr-surface);
  border: 1px solid var(--tblr-border);
  border-radius: var(--tblr-radius-lg);
  margin-bottom: var(--tblr-space-6);
  box-shadow: var(--tblr-shadow-sm);
}
@media (width <= 767.98px) {
  .profile-header {
    flex-direction: column;
    text-align: center;
    padding: var(--tblr-space-5);
  }
}

.profile-avatar {
  width: 64px;
  height: 64px;
  border-radius: var(--tblr-radius-full);
  background: linear-gradient(135deg, var(--tblr-primary-light) 0%, rgba(var(--tblr-primary-rgb), 0.2) 100%);
  color: var(--tblr-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: var(--tblr-font-bold);
  flex-shrink: 0;
  letter-spacing: -0.02em;
}

.profile-header-info {
  flex: 1;
}

.profile-name {
  font-size: 1.5rem;
  font-weight: var(--tblr-font-bold);
  color: var(--tblr-text-primary);
  margin: 0;
  line-height: 1.3;
  letter-spacing: -0.025em;
}

.profile-email {
  font-size: var(--tblr-text-base);
  color: var(--tblr-text-muted);
  margin: var(--tblr-space-1) 0 0;
}

.profile-section {
  background: var(--tblr-surface);
  border: 1px solid var(--tblr-border);
  border-radius: var(--tblr-radius-lg);
  overflow: hidden;
  margin-bottom: var(--tblr-space-6);
  box-shadow: var(--tblr-shadow-sm);
  transition: box-shadow var(--tblr-transition-base), border-color var(--tblr-transition-base);
}
.profile-section:hover {
  border-color: var(--tblr-border-dark);
}

.profile-section-header {
  display: flex;
  align-items: flex-start;
  gap: var(--tblr-space-3);
  padding: var(--tblr-space-5) var(--tblr-space-6);
  background: var(--tblr-gray-50);
  border-bottom: 1px solid var(--tblr-border);
}

.profile-section-title {
  flex: 1;
  padding-top: var(--tblr-space-1);
}

.profile-section-body {
  padding: var(--tblr-space-6);
}

.profile-section-footer {
  padding: var(--tblr-space-4) var(--tblr-space-6);
  background: var(--tblr-gray-50);
  border-top: 1px solid var(--tblr-border);
  display: flex;
  justify-content: flex-end;
  gap: var(--tblr-space-3);
}

.profile-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--tblr-space-5);
}
@media (width <= 767.98px) {
  .profile-detail-grid {
    grid-template-columns: 1fr;
    gap: var(--tblr-space-4);
  }
}

.detail-item {
  display: flex;
  flex-direction: column;
  gap: var(--tblr-space-1);
}

.detail-item-wide {
  grid-column: 1/-1;
}

.detail-label {
  font-size: var(--tblr-text-sm);
  color: var(--tblr-text-muted);
  font-weight: var(--tblr-font-medium);
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.detail-value {
  font-size: var(--tblr-text-base);
  color: var(--tblr-text-primary);
  font-weight: var(--tblr-font-medium);
}

.security-status {
  display: flex;
  flex-direction: column;
  gap: var(--tblr-space-4);
}

.security-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--tblr-space-4);
  background: var(--tblr-gray-50);
  border: 1px solid var(--tblr-border);
  border-radius: var(--tblr-radius-md);
  transition: border-color var(--tblr-transition-base);
}
.security-item:hover {
  border-color: var(--tblr-border-dark);
}

.security-item-info {
  display: flex;
  align-items: center;
  gap: var(--tblr-space-3);
  flex: 1;
}

.security-item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--tblr-radius-md);
  flex-shrink: 0;
}

.security-item-icon-success {
  background: rgba(var(--tblr-success-rgb), 0.1);
  color: var(--tblr-success);
}

.security-item-icon-warning {
  background: rgba(var(--tblr-warning-rgb), 0.1);
  color: var(--tblr-warning);
}

.security-item-content {
  flex: 1;
}

.security-item-title {
  font-size: var(--tblr-text-base);
  font-weight: var(--tblr-font-medium);
  color: var(--tblr-text-primary);
  margin: 0 0 var(--tblr-space-0-5);
}

.security-item-description {
  font-size: var(--tblr-text-sm);
  color: var(--tblr-text-muted);
  margin: 0;
}

.security-item-action {
  flex-shrink: 0;
  margin-left: var(--tblr-space-3);
}

.google-signin-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--tblr-space-2);
  background: var(--tblr-surface);
  border-color: var(--tblr-border);
  color: var(--tblr-text-primary);
  transition: all var(--tblr-transition-base);
}
.google-signin-btn:hover {
  background: var(--tblr-gray-50);
  border-color: var(--tblr-border-dark);
  color: var(--tblr-text-primary);
  box-shadow: var(--tblr-shadow-sm);
}
.google-signin-btn:active {
  transform: translateY(1px);
}
.google-signin-btn svg {
  flex-shrink: 0;
}

.password-requirements {
  background: rgba(var(--tblr-info-rgb), 0.05);
  border: 1px solid rgba(var(--tblr-info-rgb), 0.2);
  border-radius: var(--tblr-radius-md);
  padding: var(--tblr-space-4);
  margin-bottom: var(--tblr-space-6);
}

.password-requirements-header {
  display: flex;
  align-items: center;
  gap: var(--tblr-space-2);
  margin-bottom: var(--tblr-space-3);
}
.password-requirements-header .section-icon {
  width: 32px;
  height: 32px;
  background: rgba(var(--tblr-info-rgb), 0.15);
  color: var(--tblr-info);
}
.password-requirements-header h3 {
  font-size: var(--tblr-text-base);
  font-weight: var(--tblr-font-semibold);
  color: var(--tblr-text-primary);
  margin: 0;
}

.password-requirements-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.password-requirements-list li {
  font-size: var(--tblr-text-sm);
  color: var(--tblr-text-secondary);
  padding: var(--tblr-space-1) 0 var(--tblr-space-1) var(--tblr-space-6);
  position: relative;
}
.password-requirements-list li::before {
  content: "✓";
  position: absolute;
  left: var(--tblr-space-2);
  color: var(--tblr-info);
  font-weight: var(--tblr-font-bold);
}

@media (width >= 768px) and (width <= 991.98px) {
  .profile-sidebar {
    margin-bottom: var(--tblr-space-6);
  }
}
@media (width <= 767.98px) {
  .profile-section-footer {
    flex-direction: column;
  }
  .profile-section-footer .btn {
    width: 100%;
    justify-content: center;
  }
}
@media print {
  .profile-section-footer,
  .profile-sidebar {
    display: none !important;
  }
}
.swp-profile .card-header {
  background: var(--tblr-gray-50);
}

/**
 * SolidInvoice - Two-Factor Authentication Styles
 *
 * Modern 2FA configuration and login pages with elegant design.
 * Matches the profile page patterns and Tabler design system.
 */
.two-factor-settings .form-page-sections {
  gap: var(--tblr-space-5);
}

.two-factor-section-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tblr-space-4);
  padding: var(--tblr-space-5);
}
@media (width <= 767.98px) {
  .two-factor-section-content {
    flex-direction: column;
    align-items: flex-start;
    padding: var(--tblr-space-4);
  }
}

.two-factor-section-info {
  flex: 1;
}

.two-factor-section-actions {
  display: flex;
  align-items: center;
  gap: var(--tblr-space-3);
  flex-shrink: 0;
}
@media (width <= 767.98px) {
  .two-factor-section-actions {
    width: 100%;
    flex-direction: column;
  }
  .two-factor-section-actions .btn {
    width: 100%;
    justify-content: center;
  }
}

.totp-setup-container {
  padding: var(--tblr-space-4) 0;
}

.setup-steps {
  display: flex;
  justify-content: center;
  gap: var(--tblr-space-3);
  margin-bottom: var(--tblr-space-6);
}
@media (width <= 575.98px) {
  .setup-steps {
    flex-direction: column;
    gap: var(--tblr-space-2);
  }
}

.setup-steps .step {
  display: flex;
  align-items: center;
  gap: var(--tblr-space-2);
  padding: var(--tblr-space-2) var(--tblr-space-4);
  background: var(--tblr-gray-100);
  border-radius: var(--tblr-radius-md);
  font-size: var(--tblr-text-sm);
  font-weight: var(--tblr-font-medium);
  color: var(--tblr-text-muted);
  transition: all var(--tblr-transition-base);
}
.setup-steps .step.active {
  background: var(--tblr-primary-light);
  color: var(--tblr-primary);
  box-shadow: var(--tblr-shadow-sm);
}
.setup-steps .step .step-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: currentcolor;
  color: #ffffff;
  border-radius: var(--tblr-radius-full);
  font-size: var(--tblr-text-xs);
  font-weight: var(--tblr-font-bold);
  opacity: 0.8;
}
.setup-steps .step.active .step-number {
  opacity: 1;
}

.qr-code-container {
  padding: var(--tblr-space-6);
  background: var(--tblr-gray-50);
  border-radius: var(--tblr-radius-lg);
  margin-bottom: var(--tblr-space-5);
}
@media (width <= 575.98px) {
  .qr-code-container {
    padding: var(--tblr-space-4);
  }
}

.qr-code-image {
  max-width: 300px;
  width: 100%;
  height: auto;
  border: 2px solid var(--tblr-border);
  border-radius: var(--tblr-radius-md);
  background: #ffffff;
  padding: var(--tblr-space-3);
  box-shadow: var(--tblr-shadow-sm);
}

.manual-entry-details {
  text-align: center;
}
.manual-entry-details summary {
  cursor: pointer;
  color: var(--tblr-primary);
  font-size: var(--tblr-text-sm);
  font-weight: var(--tblr-font-medium);
  user-select: none;
  list-style: none;
  padding: var(--tblr-space-2);
  border-radius: var(--tblr-radius-md);
  transition: background-color var(--tblr-transition-base);
}
.manual-entry-details summary:hover {
  background: rgba(var(--tblr-primary-rgb), 0.05);
}
.manual-entry-details summary::-webkit-details-marker {
  display: none;
}
.manual-entry-details .manual-entry-content {
  margin-top: var(--tblr-space-3);
  padding: var(--tblr-space-4);
  background: #ffffff;
  border: 1px solid var(--tblr-border);
  border-radius: var(--tblr-radius-md);
}
.manual-entry-details .manual-entry-code {
  display: block;
  padding: var(--tblr-space-3);
  background: var(--tblr-gray-50);
  border: 1px solid var(--tblr-border);
  border-radius: var(--tblr-radius-md);
  font-size: var(--tblr-text-lg);
  font-family: var(--tblr-font-mono);
  letter-spacing: 0.1em;
  word-break: break-all;
  color: var(--tblr-text-primary);
}

.verification-form-container {
  padding: var(--tblr-space-4) 0;
}

.verification-code-input {
  font-family: var(--tblr-font-mono);
  letter-spacing: 0.5em !important;
  text-align: center;
  font-size: 1.5rem !important;
  padding: var(--tblr-space-4) !important;
}
.verification-code-input::placeholder {
  letter-spacing: 0.3em;
  opacity: 0.5;
}
.verification-code-input:focus {
  letter-spacing: 0.5em !important;
}

.backup-codes-modal-content {
  padding: var(--tblr-space-2) 0;
}

.backup-codes-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--tblr-space-3);
  padding: var(--tblr-space-4);
  background: var(--tblr-gray-50);
  border-radius: var(--tblr-radius-lg);
}
@media (width <= 575.98px) {
  .backup-codes-grid {
    grid-template-columns: 1fr;
    gap: var(--tblr-space-2);
  }
}

.backup-code-item code {
  display: block;
  padding: var(--tblr-space-3);
  background: #ffffff;
  border: 1px solid var(--tblr-border);
  border-radius: var(--tblr-radius-md);
  text-align: center;
  font-size: var(--tblr-text-base);
  font-weight: var(--tblr-font-medium);
  font-family: var(--tblr-font-mono);
  letter-spacing: 0.05em;
  transition: all var(--tblr-transition-base);
  color: var(--tblr-text-primary);
}
.backup-code-item code:hover {
  border-color: var(--tblr-primary);
  box-shadow: var(--tblr-ring-primary);
  transform: translateY(-2px);
}

.two-factor-login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--tblr-gray-50);
  padding: var(--tblr-space-4);
}

.two-factor-login-card .card {
  border: none;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}
.two-factor-login-card .card-status-top {
  height: 4px;
  background: var(--tblr-primary);
}
.two-factor-login-card .card-body {
  padding: var(--tblr-space-8) var(--tblr-space-6);
}
@media (width <= 575.98px) {
  .two-factor-login-card .card-body {
    padding: var(--tblr-space-6) var(--tblr-space-4);
  }
}

.two-factor-avatar {
  width: 72px;
  height: 72px;
  margin: 0 auto var(--tblr-space-4);
  background: linear-gradient(135deg, var(--tblr-primary-light) 0%, rgba(var(--tblr-primary-rgb), 0.15) 100%);
  border-radius: var(--tblr-radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tblr-primary);
  box-shadow: 0 4px 12px rgba(var(--tblr-primary-rgb), 0.2);
}
.two-factor-avatar.two-factor-avatar-success {
  background: linear-gradient(135deg, rgba(var(--tblr-success-rgb), 0.2) 0%, rgba(var(--tblr-success-rgb), 0.1) 100%);
  color: var(--tblr-success);
  box-shadow: 0 4px 12px rgba(var(--tblr-success-rgb), 0.2);
}

.two-factor-login-title {
  font-size: 1.5rem;
  font-weight: var(--tblr-font-bold);
  color: var(--tblr-text-primary);
  margin-bottom: var(--tblr-space-2);
  text-align: center;
}

.two-factor-login-description {
  font-size: var(--tblr-text-base);
  color: var(--tblr-text-muted);
  margin-bottom: var(--tblr-space-6);
  text-align: center;
}

.two-factor-code-input {
  font-family: var(--tblr-font-mono);
  letter-spacing: 0.5em;
  text-align: center;
  font-size: 1.75rem !important;
  padding: var(--tblr-space-4) var(--tblr-space-3) !important;
  border: 2px solid var(--tblr-border);
  border-radius: var(--tblr-radius-lg);
  transition: all var(--tblr-transition-base);
}
.two-factor-code-input::placeholder {
  letter-spacing: 0.3em;
  opacity: 0.4;
}
.two-factor-code-input:focus {
  border-color: var(--tblr-primary);
  box-shadow: 0 0 0 4px rgba(var(--tblr-primary-rgb), 0.1);
  letter-spacing: 0.5em !important;
}
@media (width <= 575.98px) {
  .two-factor-code-input {
    font-size: 1.5rem !important;
    padding: var(--tblr-space-3) !important;
  }
}

.two-factor-form-hint {
  text-align: center;
  font-size: var(--tblr-text-sm);
  color: var(--tblr-text-muted);
  margin-top: var(--tblr-space-2);
}
.two-factor-form-hint a {
  color: var(--tblr-primary);
  text-decoration: none;
  font-weight: var(--tblr-font-medium);
}
.two-factor-form-hint a:hover {
  text-decoration: underline;
}

.trust-device-option {
  padding: var(--tblr-space-3);
  background: rgba(var(--tblr-info-rgb), 0.05);
  border: 1px solid rgba(var(--tblr-info-rgb), 0.2);
  border-radius: var(--tblr-radius-md);
  margin: var(--tblr-space-4) 0;
}
.trust-device-option .form-check {
  margin: 0;
}
.trust-device-option .form-check-input {
  margin-top: 0.15em;
}
.trust-device-option .form-check-label {
  font-size: var(--tblr-text-sm);
  color: var(--tblr-text-primary);
  font-weight: var(--tblr-font-medium);
  cursor: pointer;
}

.alternative-methods {
  padding-top: var(--tblr-space-4);
  margin-top: var(--tblr-space-4);
  border-top: 1px solid var(--tblr-border);
  text-align: center;
}
.alternative-methods .alternative-methods-title {
  font-size: var(--tblr-text-sm);
  color: var(--tblr-text-muted);
  margin-bottom: var(--tblr-space-3);
}
.alternative-methods .alternative-methods-list {
  display: flex;
  flex-direction: column;
  gap: var(--tblr-space-2);
}
.alternative-methods .btn {
  width: 100%;
  justify-content: center;
}

.two-factor-security-notice {
  text-align: center;
  margin-top: var(--tblr-space-4);
  font-size: var(--tblr-text-sm);
  color: var(--tblr-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--tblr-space-2);
}

.email-resend-section {
  text-align: center;
  margin-top: var(--tblr-space-4);
  padding: var(--tblr-space-3);
  background: rgba(var(--tblr-info-rgb), 0.05);
  border-radius: var(--tblr-radius-md);
  border: 1px solid rgba(var(--tblr-info-rgb), 0.2);
}
.email-resend-section .resend-text {
  font-size: var(--tblr-text-sm);
  color: var(--tblr-text-secondary);
  margin-bottom: var(--tblr-space-2);
}
.email-resend-section .resend-link {
  color: var(--tblr-primary);
  text-decoration: none;
  font-weight: var(--tblr-font-medium);
}
.email-resend-section .resend-link:hover {
  text-decoration: underline;
}
.email-resend-section .expiry-warning {
  font-size: var(--tblr-text-xs);
  color: var(--tblr-warning);
  margin-top: var(--tblr-space-2);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--tblr-space-1);
}

@media (width <= 767.98px) {
  .totp-setup-container {
    padding: var(--tblr-space-2) 0;
  }
  .setup-steps {
    margin-bottom: var(--tblr-space-4);
  }
  .qr-code-container {
    padding: var(--tblr-space-4);
    margin-bottom: var(--tblr-space-4);
  }
  .qr-code-image {
    max-width: 250px;
  }
  .verification-form-container {
    padding: var(--tblr-space-3) 0;
  }
  .backup-codes-grid {
    padding: var(--tblr-space-3);
  }
}
@media (width <= 575.98px) {
  .qr-code-image {
    max-width: 200px;
  }
  .two-factor-login-card .card-body {
    padding: var(--tblr-space-6) var(--tblr-space-4);
  }
  .two-factor-avatar {
    width: 64px;
    height: 64px;
  }
  .two-factor-login-title {
    font-size: 1.25rem;
  }
  .two-factor-login-description {
    font-size: var(--tblr-text-sm);
  }
}
.backup-code-item code:focus-visible,
.manual-entry-details summary:focus-visible {
  outline: 2px solid var(--tblr-primary);
  outline-offset: 2px;
}

@media (prefers-contrast: high) {
  .qr-code-image {
    border-width: 3px;
  }
  .backup-code-item code {
    border-width: 2px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .backup-code-item code,
  .setup-steps .step,
  .manual-entry-details summary,
  .two-factor-code-input {
    transition: none;
  }
}
/**
 * SolidInvoice - Notifications Page Styles
 *
 * Notification preferences page with card-based layout and category grouping.
 * Page container/header/footer use shared form-page-* classes from _form-page.scss.
 * This file contains only notification-specific styles.
 */
.integration-management-card {
  background: var(--tblr-surface);
  border: 1px solid var(--tblr-border);
  border-radius: var(--tblr-radius-lg);
  margin-bottom: var(--tblr-space-6);
  box-shadow: var(--tblr-shadow-sm);
}

.integration-management-header {
  display: flex;
  align-items: center;
  gap: var(--tblr-space-4);
  padding: var(--tblr-space-5);
}

.integration-management-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, rgba(var(--tblr-primary-rgb), 0.15) 0%, rgba(var(--tblr-primary-rgb), 0.05) 100%);
  border-radius: var(--tblr-radius-md);
  color: var(--tblr-primary);
  flex-shrink: 0;
}

.integration-management-info {
  flex: 1;
}

.integration-management-title {
  font-size: var(--tblr-text-lg);
  font-weight: var(--tblr-font-semibold);
  color: var(--tblr-text-primary);
  margin: 0 0 var(--tblr-space-1);
  line-height: 1.4;
}

.integration-management-description {
  font-size: var(--tblr-text-sm);
  color: var(--tblr-text-muted);
  margin: 0;
  line-height: 1.5;
}

.integration-management-list {
  display: flex;
  align-items: center;
  gap: var(--tblr-space-2);
  flex-wrap: wrap;
  padding: 0 var(--tblr-space-5) var(--tblr-space-5);
  border-top: 1px solid var(--tblr-border);
  padding-top: var(--tblr-space-4);
}

.integration-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--tblr-space-1-5);
  padding: var(--tblr-space-2) var(--tblr-space-3);
  background: var(--tblr-gray-50);
  border: 1px solid var(--tblr-border);
  border-radius: var(--tblr-radius-md);
  font-size: var(--tblr-text-sm);
  font-weight: var(--tblr-font-medium);
  color: var(--tblr-text-secondary);
  white-space: nowrap;
}
.integration-badge svg {
  flex-shrink: 0;
  color: var(--tblr-primary);
}

.notification-groups {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tblr-space-6);
  margin-bottom: var(--tblr-space-6);
}

.notification-group {
  display: flex;
  flex-direction: column;
  gap: var(--tblr-space-3);
}

.group-title {
  display: flex;
  align-items: center;
  gap: var(--tblr-space-2);
  font-size: var(--tblr-text-sm);
  font-weight: var(--tblr-font-bold);
  color: var(--tblr-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 var(--tblr-space-2);
}
.group-title svg {
  color: var(--tblr-primary);
  flex-shrink: 0;
}

.notification-cards {
  display: grid;
  gap: var(--tblr-space-3);
}

.notification-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tblr-space-4);
  background: var(--tblr-surface);
  border: 1px solid var(--tblr-border);
  border-radius: var(--tblr-radius-md);
  padding: var(--tblr-space-4) var(--tblr-space-4);
  transition: all var(--tblr-transition-base);
}
.notification-card:hover {
  border-color: var(--tblr-border-dark);
  box-shadow: var(--tblr-shadow-sm);
}
.notification-card:focus-within {
  border-color: var(--tblr-primary);
  box-shadow: var(--tblr-ring-primary);
}

.notification-card-content {
  display: flex;
  align-items: center;
  gap: var(--tblr-space-3);
  flex: 1;
  min-width: 0;
}

.notification-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, var(--tblr-primary-light) 0%, rgba(var(--tblr-primary-rgb), 0.08) 100%);
  border-radius: var(--tblr-radius-md);
  color: var(--tblr-primary);
  flex-shrink: 0;
}

.notification-card-info {
  flex: 1;
  min-width: 0;
}

.notification-title {
  font-size: var(--tblr-text-base);
  font-weight: var(--tblr-font-semibold);
  color: var(--tblr-text-primary);
  margin: 0 0 var(--tblr-space-0-5);
  line-height: 1.4;
}

.notification-description {
  font-size: var(--tblr-text-xs);
  color: var(--tblr-text-muted);
  margin: 0;
  line-height: 1.4;
}

.notification-card-channels {
  flex-shrink: 0;
}

.notification-card-channels .form-check {
  margin: 0;
  padding: 0;
  min-height: auto;
  position: relative;
}
.notification-card-channels .form-check .form-check-input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.notification-card-channels .form-check .form-check-input:focus + .form-check-label {
  border-color: var(--tblr-primary);
  box-shadow: var(--tblr-ring-primary);
}
.notification-card-channels .form-check .form-check-label {
  display: inline-flex;
  align-items: center;
  padding: var(--tblr-space-1-5) var(--tblr-space-3);
  background: var(--tblr-gray-50);
  border: 1px solid var(--tblr-border);
  border-radius: var(--tblr-radius-sm);
  font-size: var(--tblr-text-xs);
  font-weight: var(--tblr-font-medium);
  color: var(--tblr-text-secondary);
  cursor: pointer;
  transition: all var(--tblr-transition-base);
  margin: 0;
  white-space: nowrap;
  user-select: none;
}
.notification-card-channels .form-check .form-check-label:hover {
  background: var(--tblr-surface);
  border-color: var(--tblr-primary);
  color: var(--tblr-text-primary);
}
.notification-card-channels .form-check .form-check-input:checked + .form-check-label {
  background: var(--tblr-primary-lighter);
  border-color: var(--tblr-primary);
  color: var(--tblr-primary);
  font-weight: var(--tblr-font-semibold);
}

@media (width <= 767.98px) {
  .integration-management-header {
    flex-direction: column;
    align-items: stretch;
    gap: var(--tblr-space-3);
  }
  .integration-management-header .btn {
    width: 100%;
    justify-content: center;
  }
  .integration-management-list {
    padding: var(--tblr-space-3) var(--tblr-space-4) var(--tblr-space-4);
  }
  .notification-groups {
    gap: var(--tblr-space-5);
  }
  .group-title {
    font-size: var(--tblr-text-xs);
  }
  .group-title svg {
    width: 16px;
    height: 16px;
  }
  .notification-card {
    flex-direction: column;
    align-items: stretch;
    gap: var(--tblr-space-3);
    padding: var(--tblr-space-3);
  }
  .notification-card-content {
    gap: var(--tblr-space-2-5);
  }
  .notification-card-icon {
    width: 32px;
    height: 32px;
  }
  .notification-card-icon svg {
    width: 16px;
    height: 16px;
  }
  .notification-title {
    font-size: var(--tblr-text-sm);
  }
  .notification-description {
    font-size: var(--tblr-text-xs);
  }
  .notification-card-channels .notification-channels-list {
    flex-direction: column;
    gap: var(--tblr-space-1-5);
  }
  .notification-card-channels .form-check .form-check-label {
    width: 100%;
    padding: var(--tblr-space-2-5) var(--tblr-space-3);
    font-size: var(--tblr-text-sm);
    min-height: 44px;
  }
  .notifications-empty-state {
    padding: var(--tblr-space-8) var(--tblr-space-4);
  }
  .notifications-empty-state .empty-state-icon {
    width: 64px;
    height: 64px;
  }
  .notifications-empty-state .empty-state-icon svg {
    width: 48px;
    height: 48px;
  }
  .notifications-empty-state h3 {
    font-size: var(--tblr-text-lg);
  }
  .notifications-empty-state p {
    font-size: var(--tblr-text-sm);
  }
  .notifications-empty-state .btn {
    width: 100%;
  }
}
@media (width >= 768px) {
  .notification-groups {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media print {
  .notification-card {
    break-inside: avoid;
  }
}
/**
 * SolidInvoice - Subscription Pages Styles
 *
 * Billing, plan-picker, and subscription-state pages (pricing, overview,
 * change, cancelled, paused, pending, trial expired).
 *
 * All values are `--tblr-*` design tokens. State is carried by a soft icon
 * medallion + heading, never by a decorative accent stripe, a colored glow, or
 * a looping animation. Colour stays on the brand: Trust Green is the only
 * accent; there is no Tabler blue and no amber-by-accident here.
 */
.subscription-page {
  min-height: calc(100vh - var(--tblr-space-24));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--tblr-space-12) var(--tblr-space-4);
}

.subscription-container {
  max-width: 640px;
  width: 100%;
  text-align: center;
  padding: var(--tblr-space-10);
  background: var(--tblr-surface);
  border: none;
  border-radius: var(--tblr-radius-xl);
  box-shadow: var(--tblr-shadow-xl);
  animation: subscription-fade-in 0.3s ease-out;
}

@keyframes subscription-fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.subscription-page-header {
  background: var(--tblr-surface);
  border-bottom: 1px solid var(--tblr-border);
  box-shadow: var(--tblr-shadow-sm);
}
.subscription-page-header .h4 {
  font-weight: 600;
  color: var(--tblr-text-primary);
}

.subscription-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--tblr-radius-xl);
  margin: 0 auto var(--tblr-space-8);
}
.subscription-icon svg {
  width: 32px;
  height: 32px;
}

.subscription-icon-warning {
  background: var(--tblr-warning-light);
  color: var(--tblr-warning);
}

.subscription-icon-danger {
  background: var(--tblr-danger-light);
  color: var(--tblr-danger);
}

.subscription-icon-info {
  background: var(--tblr-info-light);
  color: var(--tblr-info);
}

.subscription-icon-paused {
  background: var(--tblr-gray-100);
  color: var(--tblr-text-secondary);
}

.subscription-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--tblr-text-primary);
  margin: 0 0 var(--tblr-space-3);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.subscription-subtitle {
  font-size: var(--tblr-text-lg);
  color: var(--tblr-text-secondary);
  margin: 0 0 var(--tblr-space-10);
  line-height: 1.7;
}

.subscription-benefits {
  background: var(--tblr-surface);
  border: 1px solid var(--tblr-border);
  border-radius: var(--tblr-radius-lg);
  padding: var(--tblr-space-6);
  margin-bottom: var(--tblr-space-8);
  text-align: left;
  box-shadow: var(--tblr-shadow-xs);
}
.subscription-benefits h3 {
  font-size: var(--tblr-text-md);
  font-weight: 600;
  color: var(--tblr-text-primary);
  margin: 0 0 var(--tblr-space-4);
}
.subscription-benefits ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.subscription-benefits li {
  display: flex;
  align-items: center;
  gap: var(--tblr-space-3);
  padding: var(--tblr-space-2-5) 0;
  color: var(--tblr-text-secondary);
  font-size: var(--tblr-text-base);
}
.subscription-benefits li svg {
  width: 20px;
  height: 20px;
  color: var(--tblr-success);
  flex-shrink: 0;
}

.subscription-cancelled-page .subscription-benefits li svg {
  color: var(--tblr-text-muted);
}

.subscription-actions {
  display: flex;
  flex-direction: column;
  gap: var(--tblr-space-3);
  margin-bottom: var(--tblr-space-4);
}
.subscription-actions .btn-lg {
  padding: var(--tblr-space-3-5) var(--tblr-space-6);
  font-size: var(--tblr-text-md);
  font-weight: 600;
  box-shadow: var(--tblr-shadow-sm);
  transition: box-shadow var(--tblr-transition-base);
}
.subscription-actions .btn-lg svg {
  width: 20px;
  height: 20px;
}
.subscription-actions .btn-lg:hover {
  box-shadow: var(--tblr-shadow-md);
}
.subscription-actions .btn-lg:focus-visible {
  outline: none;
  box-shadow: var(--tblr-shadow-md), var(--tblr-ring-primary);
}
.subscription-actions .btn-ghost svg {
  width: 18px;
  height: 18px;
}
.subscription-actions .btn-ghost:hover {
  background: var(--tblr-gray-50);
}
.subscription-actions .btn-ghost:focus-visible {
  outline: none;
  box-shadow: var(--tblr-ring-primary);
}

.subscription-paused-page .subscription-benefits li svg {
  color: var(--tblr-text-secondary);
}

.alert-banner {
  border-radius: 0;
  border-left: 0;
  border-right: 0;
  border-top: 0;
  margin-bottom: 0;
  padding: var(--tblr-space-3) var(--tblr-space-4);
}
.alert-banner .d-flex {
  align-items: center;
}
.alert-banner .alert-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.alert-banner .btn-sm {
  white-space: nowrap;
  flex-shrink: 0;
}
.alert-banner.alert-warning {
  background: var(--tblr-warning-lighter);
  border-bottom-color: var(--tblr-warning-light);
  color: var(--tblr-text-primary);
}
.alert-banner.alert-warning .btn-warning {
  background: var(--tblr-warning);
  color: var(--tblr-text-inverse);
  border: none;
}
.alert-banner.alert-warning .btn-warning:hover {
  background: var(--tblr-warning-hover);
}
.alert-banner.alert-danger {
  background: var(--tblr-danger-lighter);
  border-bottom-color: var(--tblr-danger-light);
  color: var(--tblr-text-primary);
}
.alert-banner.alert-danger .btn-danger {
  background: var(--tblr-danger);
  color: var(--tblr-text-inverse);
  border: none;
}
.alert-banner.alert-danger .btn-danger:hover {
  background: var(--tblr-danger-hover);
}

.subscription-pricing-page .subscription-container {
  max-width: 1100px;
  text-align: center;
}

.plan-card {
  position: relative;
  overflow: hidden;
  transition: box-shadow var(--tblr-transition-base), border-color var(--tblr-transition-base);
}
.plan-card:hover {
  box-shadow: var(--tblr-shadow-md);
}
.plan-card > .card-body {
  padding-top: var(--tblr-space-9);
}

.plan-card-recommended {
  border-width: 2px;
  box-shadow: var(--tblr-shadow-md);
}
.plan-card-recommended:hover {
  box-shadow: var(--tblr-shadow-xl);
}

.plan-card-banner {
  position: absolute;
  top: 0;
  inset-inline: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--tblr-space-1);
  padding: var(--tblr-space-2) var(--tblr-space-3);
  font-size: var(--tblr-text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--tblr-text-inverse);
  background: var(--tblr-primary-dark);
}
.plan-card-banner svg {
  flex-shrink: 0;
}

.plan-card-current .plan-card-banner {
  background: var(--tblr-success-dark);
}

.plan-card-free {
  background: var(--tblr-gray-50);
  border: 1px dashed var(--tblr-border);
  box-shadow: none;
  transition: border-color var(--tblr-transition-base), background var(--tblr-transition-base);
}
.plan-card-free:hover {
  border-color: var(--tblr-primary);
  background: var(--tblr-surface);
}
.plan-card-free .card-body {
  padding: var(--tblr-space-4) var(--tblr-space-6);
}
.plan-card-free .plan-card-features {
  font-size: var(--tblr-text-sm);
}
.plan-card-free .plan-card-features li {
  margin-bottom: var(--tblr-space-1);
}

.plan-card-free-header {
  flex-shrink: 0;
  min-width: 0;
}

.plan-card-free-cta {
  flex-shrink: 0;
}

.plan-card-features-inline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tblr-space-2) var(--tblr-space-4);
  font-size: var(--tblr-text-sm);
}
.plan-card-features-inline li {
  display: inline-flex;
  align-items: center;
  gap: var(--tblr-space-1);
  white-space: nowrap;
}

.plan-card-price {
  font-size: var(--tblr-text-4xl);
  line-height: 1.1;
}

.plan-card-interval {
  font-size: var(--tblr-text-base);
  font-weight: var(--tblr-font-normal);
}

.plan-card-features {
  text-align: start;
}

.subscription-coupon {
  background: var(--tblr-primary-lighter);
  border: 1px solid var(--tblr-primary-light);
  border-radius: var(--tblr-radius-lg);
}
.subscription-coupon .badge {
  background: var(--tblr-primary);
  color: var(--tblr-text-inverse);
}

.subscription-welcome-page .subscription-container {
  max-width: 720px;
}

.welcome-plan {
  border: 1px solid var(--tblr-border);
  border-radius: var(--tblr-radius-lg);
  box-shadow: var(--tblr-shadow-xs);
}
.welcome-plan .card-body {
  padding: var(--tblr-space-6);
}
.welcome-plan .plan-card-features {
  margin-bottom: 0;
}

.welcome-plan-pricing {
  white-space: nowrap;
}

.welcome-plan-price {
  font-size: var(--tblr-text-2xl);
  font-weight: 700;
  line-height: 1.1;
}

.welcome-reassure-item {
  display: flex;
  align-items: flex-start;
  gap: var(--tblr-space-2-5);
  height: 100%;
  padding: var(--tblr-space-4);
  background: var(--tblr-gray-50);
  border: 1px solid var(--tblr-border);
  border-radius: var(--tblr-radius-lg);
}
.welcome-reassure-item svg {
  flex-shrink: 0;
  margin-top: var(--tblr-space-0-5);
  color: var(--tblr-success);
}

@media (width <= 767.98px) {
  .subscription-page {
    padding: var(--tblr-space-6) var(--tblr-space-3);
  }
  .subscription-page-header .d-flex {
    flex-direction: column;
    align-items: flex-start !important;
    gap: var(--tblr-space-3);
  }
  .subscription-page-header .btn-group {
    width: 100%;
  }
  .subscription-page-header .btn-group .btn {
    width: 100%;
  }
  .subscription-container {
    padding: var(--tblr-space-6);
  }
  .subscription-icon {
    width: 48px;
    height: 48px;
  }
  .subscription-icon svg {
    width: 28px;
    height: 28px;
  }
  .subscription-title {
    font-size: 1.375rem;
  }
  .subscription-subtitle {
    font-size: var(--tblr-text-md);
  }
  .subscription-benefits {
    padding: var(--tblr-space-4);
  }
  .subscription-actions .btn {
    width: 100%;
  }
  .alert-banner .d-flex {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--tblr-space-3);
  }
  .alert-banner .btn-sm {
    width: 100%;
  }
}
@media (width >= 768px) and (width <= 991.98px) {
  .subscription-container {
    max-width: 600px;
    padding: var(--tblr-space-8);
  }
}
@media (prefers-reduced-motion: reduce) {
  .subscription-container {
    animation: none;
  }
  .plan-card,
  .plan-card-free,
  .subscription-actions .btn-lg {
    transition: none;
  }
}
@media print {
  .subscription-page {
    padding: 0;
  }
  .subscription-container {
    box-shadow: none;
    border: 1px solid var(--tblr-border);
  }
  .subscription-actions {
    display: none;
  }
  .alert-banner {
    display: none;
  }
}
/**
 * Onboarding Checklist - Dashboard widget
 *
 * The first component a new user meets. Priorities, in order:
 *   1. Convey state (todo / done / hovered / focused). Never decoration.
 *   2. Stay on the SolidInvoice design system - `--tblr-*` tokens only.
 *   3. Read correctly whether a row is an <a> (actionable) or a <span> (done).
 *
 * Structure comes from Tabler (`card`, `card-stamp`, `card-link-pop`,
 * `offcanvas`, `visually-hidden`). This file only adds what Tabler does not
 * already provide - it does not restate or fight it.
 */
.card.card-active {
  border-color: var(--tblr-success);
  background: var(--tblr-success-lighter);
}

.card-stamp-icon {
  opacity: 0.15;
}

.checklist-items-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--tblr-space-2-5);
}

.checklist-item {
  display: flex;
  align-items: flex-start;
  gap: var(--tblr-space-3);
  padding: var(--tblr-space-4);
  background: var(--tblr-surface);
  border: 1px solid var(--tblr-border);
  border-radius: var(--tblr-radius-md);
  text-decoration: none;
  color: inherit;
  transition: color var(--tblr-duration-fast) var(--tblr-ease-out), background-color var(--tblr-duration-fast) var(--tblr-ease-out), border-color var(--tblr-duration-fast) var(--tblr-ease-out), box-shadow var(--tblr-duration-fast) var(--tblr-ease-out);
}
.checklist-item:not(.completed):is(:hover, :focus-visible) {
  background: var(--tblr-primary-lighter);
  border-color: var(--tblr-primary);
}
.checklist-item:not(.completed):is(:hover, :focus-visible) .checklist-item-action {
  color: var(--tblr-primary);
}
.checklist-item:not(.completed):focus-visible {
  outline: none;
  box-shadow: var(--tblr-ring-primary);
}
.checklist-item.completed {
  background: var(--tblr-success-lighter);
  border-color: var(--tblr-success-light);
  cursor: default;
}
.checklist-item.completed .item-name {
  color: var(--tblr-text-muted);
  font-weight: var(--tblr-font-normal);
  text-decoration: line-through;
}
.checklist-item.completed .item-icon {
  color: var(--tblr-text-light);
}
.checklist-item.completed .checklist-item-action {
  display: none;
}

.checklist-item-icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: var(--tblr-space-0-5);
  color: var(--tblr-success);
}

.checklist-item:not(.completed) .checklist-item-icon {
  color: var(--tblr-gray-400);
}

.checklist-item-content {
  flex: 1;
  min-width: 0;
}

.checklist-item-header {
  display: flex;
  align-items: center;
  gap: var(--tblr-space-2);
  margin-bottom: var(--tblr-space-1);
}

.checklist-item .item-icon {
  display: flex;
  align-items: center;
  color: var(--tblr-primary);
}

.checklist-item .item-name {
  font-size: var(--tblr-text-base);
  font-weight: var(--tblr-font-semibold);
  color: var(--tblr-text-primary);
}

.checklist-item-description {
  font-size: var(--tblr-text-sm);
  color: var(--tblr-text-muted);
  margin: 0;
  line-height: var(--tblr-leading-normal);
}

.checklist-item-action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: var(--tblr-space-0-5);
  color: var(--tblr-text-light);
}

.onboarding-offcanvas {
  width: 420px;
  max-width: 100%;
}

.onboarding-offcanvas .offcanvas-body .card {
  border: 1px solid var(--tblr-border-light);
  background: var(--tblr-primary-lighter);
  box-shadow: var(--tblr-shadow-sm);
}

.onboarding-progress-label {
  min-width: 3rem;
}

@media (prefers-reduced-motion: reduce) {
  .checklist-item {
    transition: none;
  }
}
/**
 * Onboarding Wizard - the first-run flow (/onboarding)
 *
 * This is the first screen every new user meets: post-install and post-signup,
 * a user with no company is redirected here to create their company, an
 * optional first client, and a first invoice.
 *
 * It used to be styled with inline \3c style> blocks that contradicted the design
 * system wholesale - Bootstrap blue (#066fd1) instead of Trust Green, gradients
 * on the canvas / step icon / badge, a 3px `border-left` side-stripe on the
 * benefits box (a hard ban), and a bounce/elastic celebration with an infinite
 * pulse and no reduced-motion fallback. This file replaces all of it with
 * `--tblr-*` tokens, flat surfaces, and ease-out motion.
 *
 * Everything is scoped under `.onboarding-container` because the class names
 * (`step-icon`, `step-benefits`, `welcome-badge`, ...) are generic and used
 * nowhere else - scoping keeps them from leaking into the rest of the app.
 *
 * Structure (Bootstrap grid, `card`, `btn`, `form-control`, `progress`) comes
 * from Tabler; this file only styles the custom wizard chrome.
 */
.onboarding-container {
  background: var(--tblr-body-bg);
}
.onboarding-container .onboarding-progress {
  box-shadow: var(--tblr-shadow-xs);
}
.onboarding-container .step-indicator {
  display: flex;
  align-items: center;
  gap: var(--tblr-space-2);
}
.onboarding-container .step-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--tblr-radius-full);
  background: var(--tblr-gray-100);
  color: var(--tblr-text-muted);
  transition: background-color var(--tblr-duration-slow) var(--tblr-ease-out), color var(--tblr-duration-slow) var(--tblr-ease-out), box-shadow var(--tblr-duration-slow) var(--tblr-ease-out);
}
.onboarding-container .step-indicator.active .step-number {
  background: var(--tblr-primary-light);
  color: var(--tblr-primary-dark);
}
.onboarding-container .step-indicator.current .step-number {
  background: var(--tblr-primary);
  color: var(--tblr-text-inverse);
  box-shadow: var(--tblr-ring-primary);
}
.onboarding-container .step-label {
  font-size: var(--tblr-text-sm);
  font-weight: var(--tblr-font-medium);
  color: var(--tblr-text-muted);
  transition: color var(--tblr-duration-slow) var(--tblr-ease-out);
}
.onboarding-container .step-indicator.active .step-label,
.onboarding-container .step-indicator.current .step-label {
  color: var(--tblr-primary-dark);
}
.onboarding-container .step-indicator.current .step-label {
  font-weight: var(--tblr-font-semibold);
}
.onboarding-container .step-connector {
  flex: 1;
  height: 2px;
  margin: 0 var(--tblr-space-4);
  background: var(--tblr-border);
  transition: background-color var(--tblr-duration-slow) var(--tblr-ease-out);
}
.onboarding-container .step-connector.completed {
  background: var(--tblr-primary);
}
.onboarding-container .onboarding-step-card {
  padding: var(--tblr-space-12);
  background: var(--tblr-surface);
  border: 1px solid var(--tblr-border-light);
  border-radius: var(--tblr-radius-xl);
  box-shadow: var(--tblr-shadow-sm);
}
.onboarding-container .step-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  margin: 0 auto var(--tblr-space-6);
  border-radius: var(--tblr-radius-full);
  background: var(--tblr-primary-light);
  color: var(--tblr-primary);
}
.onboarding-container .welcome-section {
  margin-bottom: var(--tblr-space-8);
  text-align: center;
}
.onboarding-container .welcome-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--tblr-space-2);
  margin-bottom: var(--tblr-space-4);
  padding: var(--tblr-space-2) var(--tblr-space-4);
  border-radius: var(--tblr-radius-full);
  background: var(--tblr-primary-light);
  color: var(--tblr-primary-dark);
  font-size: var(--tblr-text-sm);
  font-weight: var(--tblr-font-semibold);
}
.onboarding-container .step-benefits {
  margin-bottom: var(--tblr-space-6);
  padding: var(--tblr-space-5);
  background: var(--tblr-primary-lighter);
  border: 1px solid var(--tblr-border-light);
  border-radius: var(--tblr-radius-lg);
}
.onboarding-container .step-benefits ul {
  margin: 0;
  padding-left: var(--tblr-space-5);
  color: var(--tblr-text-secondary);
}
.onboarding-container .step-benefits li + li {
  margin-top: var(--tblr-space-2);
}
.onboarding-container .celebration-icon {
  display: flex;
  justify-content: center;
}
.onboarding-container .success-checkmark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 6rem;
  height: 6rem;
  border-radius: var(--tblr-radius-full);
  background: var(--tblr-success-light);
  color: var(--tblr-success-dark);
  animation: onboarding-celebrate var(--tblr-duration-slow) var(--tblr-ease-out) both;
}
.onboarding-container .onboarding-tip {
  display: flex;
  align-items: flex-start;
  gap: var(--tblr-space-3);
  padding: var(--tblr-space-4);
  background: var(--tblr-gray-50);
  border: 1px solid var(--tblr-border-light);
  border-radius: var(--tblr-radius-lg);
  text-align: left;
  color: var(--tblr-text-secondary);
}
.onboarding-container .onboarding-tip svg {
  flex-shrink: 0;
  margin-top: var(--tblr-space-0-5);
  color: var(--tblr-accent-dark);
}
@media (width <= 768px) {
  .onboarding-container .onboarding-step-card {
    padding: var(--tblr-space-8) var(--tblr-space-6);
  }
  .onboarding-container .step-connector {
    margin: 0 var(--tblr-space-2);
  }
}

@keyframes onboarding-celebrate {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .onboarding-container .step-number,
  .onboarding-container .step-label,
  .onboarding-container .step-connector {
    transition: none;
  }
  .onboarding-container .success-checkmark {
    animation: none;
  }
}
/**
 * SolidInvoice Design System - Money Display
 *
 * The signature component (DESIGN.md section 5). Every currency value in the
 * application renders through `.money`; it is the single source of truth for
 * money display, and raw `{{ amount }}` rendering is prohibited.
 *
 * Contract:
 *   <span class="money">
 *     <span class="money-currency">USD</span>
 *     <strong class="money-amount">1,234.56</strong>
 *   </span>
 *
 * Modifiers (on the `.money` root, combinable):
 *   .money--paid      Amount in AA-safe success. ONLY valid alongside an
 *                     explicit "Paid" label (the Money-Color Rule).
 *   .money--overdue   Amount in AA-safe danger. Same labelling rule.
 *   .money--total     Weight 600, amount one size step up.
 *   (none)            Neutral - the default and the common case.
 *
 * The component never sets its own font-size. It inherits from context, so the
 * same markup is correct inline in a table cell, in a heading, and at
 * `.stat-value` scale in the dashboard hero tiles. Only `.money--total` steps
 * the amount, and it steps relatively so the result is right at every base.
 */
.money {
  display: inline-flex;
  align-items: baseline;
  gap: var(--tblr-space-1);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.money-currency {
  color: var(--tblr-money-currency);
}

.money-amount {
  color: var(--tblr-money-neutral);
  font-weight: var(--tblr-font-medium);
}

.money--paid .money-amount {
  color: var(--tblr-money-paid);
}

.money--overdue .money-amount {
  color: var(--tblr-money-overdue);
}

.money--total .money-amount {
  font-size: calc(1em * var(--tblr-money-total-scale));
  font-weight: var(--tblr-font-semibold);
}

.money--total .money-currency {
  font-size: var(--tblr-money-currency-scale);
}

/**
 * SolidInvoice Design System - Status Chip
 *
 * The one status chip (DESIGN.md section 5). Every status word in the
 * application renders through `.status-chip`, on a five-value semantic set:
 * neutral, info, success, warning, danger.
 *
 * Contract:
 *   <span class="status-chip status-chip--success">Paid</span>
 *
 * Every variant is an AA-safe text colour on its own tint:
 *   neutral   gray-100      / text-secondary   6.92:1
 *   info      info-light    / info-dark        5.49:1
 *   success   success-light / success-dark     4.84:1
 *   warning   warning-light / warning-dark     6.37:1
 *   danger    danger-light  / danger-dark      5.30:1
 *
 * The tint itself measures 1.05-1.22:1 against the page. That is deliberate.
 * The chip's meaning is carried by its text label, so the pill is decoration
 * around legible text, not a control whose boundary must be perceivable.
 *
 * A chip is never interactive: no shadow, no border, no hover, no transition,
 * and it is never a focus target. A chip is also never truncated - a
 * half-shown status is worse than a wider column.
 */
.status-chip {
  display: inline-flex;
  align-items: center;
  padding: var(--tblr-space-0-5) var(--tblr-space-2-5);
  border-radius: var(--tblr-radius-full);
  font-size: var(--tblr-text-xs);
  font-weight: var(--tblr-font-medium);
  line-height: 1.25;
  letter-spacing: 0;
  white-space: nowrap;
  background-color: var(--tblr-gray-100);
  color: var(--tblr-text-secondary);
}
.status-chip--neutral {
  background-color: var(--tblr-gray-100);
  color: var(--tblr-text-secondary);
}
.status-chip--info {
  background-color: var(--tblr-info-light);
  color: var(--tblr-info-dark);
}
.status-chip--success {
  background-color: var(--tblr-success-light);
  color: var(--tblr-success-dark);
}
.status-chip--warning {
  background-color: var(--tblr-warning-light);
  color: var(--tblr-warning-dark);
}
.status-chip--danger {
  background-color: var(--tblr-danger-light);
  color: var(--tblr-danger-dark);
}

/**
 * SolidInvoice Design System - Layout Index
 *
 * Layout pattern styles that extend Tabler/Bootstrap.
 * Only add layout files for patterns not covered by the frameworks.
 *
 * Note: Most layout styling comes from Tabler (page-wrapper, page-header, etc.)
 * This file imports only custom extensions when needed.
 */
/**
 * SolidInvoice — Vertical Navbar (Sidebar)
 *
 * Tabler ships `.navbar-vertical.navbar-dark` as a heavy slate panel (gray-800)
 * that PRODUCT.md names as the AdminLTE anti-reference the rewrite is escaping.
 * This file recolors the sidebar one shade lighter (gray-700) so it still
 * carries presence, but uses tinted neutrals and a green-tinted active state
 * to differentiate it from generic Tabler admin output.
 *
 * Selector specificity targets `.navbar-vertical` so Tabler's mobile-collapse,
 * drawer, and dropdown rules continue to apply.
 */
.navbar.navbar-vertical,
.navbar.navbar-vertical.navbar-dark {
  background-color: var(--tblr-gray-700);
  color: var(--tblr-gray-300);
  border-right: 1px solid var(--tblr-gray-800);
  box-shadow: none;
}
.navbar.navbar-vertical .navbar-brand,
.navbar.navbar-vertical.navbar-dark .navbar-brand {
  color: var(--tblr-gray-50);
  font-weight: var(--tblr-font-semibold);
}
.navbar.navbar-vertical .navbar-brand-autodark,
.navbar.navbar-vertical.navbar-dark .navbar-brand-autodark {
  filter: none;
}
.navbar.navbar-vertical .nav-link,
.navbar.navbar-vertical.navbar-dark .nav-link {
  color: var(--tblr-gray-300);
  border-radius: var(--tblr-radius-md);
  transition: background-color var(--tblr-transition-fast), color var(--tblr-transition-fast);
}
.navbar.navbar-vertical .nav-link .nav-link-icon,
.navbar.navbar-vertical .nav-link .nav-link-title,
.navbar.navbar-vertical.navbar-dark .nav-link .nav-link-icon,
.navbar.navbar-vertical.navbar-dark .nav-link .nav-link-title {
  color: inherit;
}
.navbar.navbar-vertical .nav-link:hover,
.navbar.navbar-vertical.navbar-dark .nav-link:hover {
  background-color: var(--tblr-gray-600);
  color: var(--tblr-gray-50);
}
.navbar.navbar-vertical .nav-link:focus-visible,
.navbar.navbar-vertical.navbar-dark .nav-link:focus-visible {
  outline: none;
  box-shadow: var(--tblr-ring-primary);
  color: var(--tblr-gray-50);
}
.navbar.navbar-vertical .nav-link.active,
.navbar.navbar-vertical .navbar-nav .nav-item.active > .nav-link.active,
.navbar.navbar-vertical.navbar-dark .nav-link.active,
.navbar.navbar-vertical.navbar-dark .navbar-nav .nav-item.active > .nav-link.active {
  background-color: var(--tblr-primary-light);
  color: var(--tblr-primary-dark);
  font-weight: var(--tblr-font-semibold);
}
.navbar.navbar-vertical .nav-link.active .nav-link-icon,
.navbar.navbar-vertical .nav-link.active .nav-link-title,
.navbar.navbar-vertical .navbar-nav .nav-item.active > .nav-link.active .nav-link-icon,
.navbar.navbar-vertical .navbar-nav .nav-item.active > .nav-link.active .nav-link-title,
.navbar.navbar-vertical.navbar-dark .nav-link.active .nav-link-icon,
.navbar.navbar-vertical.navbar-dark .nav-link.active .nav-link-title,
.navbar.navbar-vertical.navbar-dark .navbar-nav .nav-item.active > .nav-link.active .nav-link-icon,
.navbar.navbar-vertical.navbar-dark .navbar-nav .nav-item.active > .nav-link.active .nav-link-title {
  color: var(--tblr-primary-dark);
}
.navbar.navbar-vertical .nav-link.active:hover,
.navbar.navbar-vertical .navbar-nav .nav-item.active > .nav-link.active:hover,
.navbar.navbar-vertical.navbar-dark .nav-link.active:hover,
.navbar.navbar-vertical.navbar-dark .navbar-nav .nav-item.active > .nav-link.active:hover {
  background-color: var(--tblr-primary-light);
  color: var(--tblr-primary-dark);
}
.navbar.navbar-vertical .nav-subtitle,
.navbar.navbar-vertical .nav-header,
.navbar.navbar-vertical.navbar-dark .nav-subtitle,
.navbar.navbar-vertical.navbar-dark .nav-header {
  color: var(--tblr-gray-400);
  text-transform: uppercase;
  letter-spacing: var(--tblr-tracking-wider);
  font-weight: var(--tblr-font-semibold);
  font-size: var(--tblr-text-xs);
}
.navbar.navbar-vertical .nav-link-toggle,
.navbar.navbar-vertical .dropdown-toggle::after,
.navbar.navbar-vertical.navbar-dark .nav-link-toggle,
.navbar.navbar-vertical.navbar-dark .dropdown-toggle::after {
  color: var(--tblr-gray-400);
}
.navbar.navbar-vertical .navbar-nav .dropdown-menu,
.navbar.navbar-vertical.navbar-dark .navbar-nav .dropdown-menu {
  background-color: var(--tblr-surface);
  border: 1px solid var(--tblr-border-light);
  box-shadow: var(--tblr-shadow-md);
}
.navbar.navbar-vertical .navbar-nav .dropdown-menu .dropdown-item,
.navbar.navbar-vertical.navbar-dark .navbar-nav .dropdown-menu .dropdown-item {
  color: var(--tblr-text-secondary);
  border-radius: var(--tblr-radius-sm);
  --tblr-nav-link-icon-color: currentcolor;
}
.navbar.navbar-vertical .navbar-nav .dropdown-menu .dropdown-item:hover, .navbar.navbar-vertical .navbar-nav .dropdown-menu .dropdown-item:focus,
.navbar.navbar-vertical.navbar-dark .navbar-nav .dropdown-menu .dropdown-item:hover,
.navbar.navbar-vertical.navbar-dark .navbar-nav .dropdown-menu .dropdown-item:focus {
  background-color: var(--tblr-surface-hover);
  color: var(--tblr-text-primary);
}
.navbar.navbar-vertical .navbar-nav .dropdown-menu .dropdown-item.active,
.navbar.navbar-vertical.navbar-dark .navbar-nav .dropdown-menu .dropdown-item.active {
  background-color: var(--tblr-primary-light);
  color: var(--tblr-primary-dark);
}
.navbar.navbar-vertical .navbar-toggler,
.navbar.navbar-vertical.navbar-dark .navbar-toggler {
  color: var(--tblr-gray-200);
  border-color: var(--tblr-gray-600);
}
.navbar.navbar-vertical .navbar-toggler:focus-visible,
.navbar.navbar-vertical.navbar-dark .navbar-toggler:focus-visible {
  outline: none;
  box-shadow: var(--tblr-ring-primary);
}

@media (width < 992px) {
  .navbar.navbar-vertical.navbar-expand-lg .navbar-collapse {
    background-color: var(--tblr-gray-700);
  }
}

/**
 * SolidInvoice Design System - Form Styles
 *
 * Generic form component styles for the entire application.
 * Uses design system tokens for consistent styling.
 */
.form-control,
.form-select {
  border-radius: var(--tblr-input-radius);
  border-color: var(--tblr-input-border);
  padding: var(--tblr-input-padding-y) var(--tblr-input-padding-x);
  font-size: var(--tblr-text-base);
  transition: border-color var(--tblr-transition-fast), box-shadow var(--tblr-transition-fast);
}
.form-control:focus,
.form-select:focus {
  border-color: var(--tblr-input-focus-border);
  box-shadow: var(--tblr-input-focus-ring);
}
.form-control::placeholder,
.form-select::placeholder {
  color: var(--tblr-text-light);
}

.ts-wrapper.full .ts-control {
  background-color: var(--tblr-surface);
}

:is(.form-page-section, .address-card, .billing-items-section, .billing-terms-section):has(.ts-wrapper.dropdown-active) {
  overflow: visible;
}

.form-label {
  font-size: var(--tblr-text-sm);
  font-weight: var(--tblr-font-medium);
  color: var(--tblr-text-secondary);
  margin-bottom: var(--tblr-space-2);
}
.form-label.required::after {
  content: " *";
  color: var(--tblr-danger);
}

.form-field .form-label {
  font-weight: var(--tblr-font-medium);
  color: var(--tblr-body-color);
  margin-bottom: var(--tblr-space-2);
}
.form-field .form-control,
.form-field .form-select {
  border-color: var(--tblr-border);
  transition: border-color var(--tblr-transition-fast), box-shadow var(--tblr-transition-fast);
}
.form-field .form-control:focus,
.form-field .form-select:focus {
  border-color: var(--tblr-primary);
  box-shadow: var(--tblr-ring-primary);
}
.form-field .input-group-text {
  background-color: var(--tblr-gray-50);
  border-color: var(--tblr-border);
  color: var(--tblr-text-muted);
}

.form-help,
.form-text,
.form-help-text {
  color: var(--tblr-text-muted);
  font-size: var(--tblr-text-sm);
  line-height: var(--tblr-leading-normal);
  margin-top: var(--tblr-space-1);
}
.form-help small,
.form-text small,
.form-help-text small {
  font-size: inherit;
}

.form-switch-field {
  padding: var(--tblr-space-3-5) var(--tblr-space-4);
  background-color: var(--tblr-gray-50);
  border-radius: var(--tblr-radius-md);
  border: 1px solid var(--tblr-border);
  transition: border-color var(--tblr-transition-fast), background-color var(--tblr-transition-fast);
}
.form-switch-field:hover {
  border-color: rgba(var(--tblr-primary-rgb), 0.3);
  background-color: var(--tblr-primary-lighter);
}

.form-switch-wrapper {
  display: flex;
  align-items: center;
  gap: var(--tblr-space-3);
  margin-bottom: 0;
}
.form-switch-wrapper .form-check-input {
  width: 2.5rem;
  height: 1.25rem;
  margin-top: 0;
  cursor: pointer;
  background-color: var(--tblr-gray-300);
  border: none;
  transition: background-color var(--tblr-transition-fast);
}
.form-switch-wrapper .form-check-input:checked {
  background-color: var(--tblr-primary);
}
.form-switch-wrapper .form-check-input:focus {
  box-shadow: var(--tblr-ring-primary);
}
.form-switch-wrapper .form-check-label {
  font-weight: var(--tblr-font-medium);
  cursor: pointer;
  margin-bottom: 0;
  margin-left: 0.5rem;
  flex: 1;
}

.input-icon-group .input-group-text {
  background-color: var(--tblr-gray-50);
  border-color: var(--tblr-border);
  color: var(--tblr-text-muted);
}
.input-icon-group .input-group-text svg {
  width: 18px;
  height: 18px;
}
.input-icon-group .form-control {
  border-left: none;
}
.input-icon-group .form-control:focus {
  border-color: var(--tblr-primary);
  box-shadow: var(--tblr-ring-primary);
}
.input-icon-group .form-control:focus ~ .input-group-text,
.input-icon-group .form-control:focus + .input-group-text {
  border-color: var(--tblr-primary);
}
.input-icon-group .input-group-text:first-child {
  border-right: none;
}
.input-icon-group .input-group-text:first-child + .form-control {
  border-left: none;
}

.input-validate-group .btn-validate {
  display: flex;
  align-items: center;
  gap: var(--tblr-space-1-5);
  font-size: var(--tblr-text-sm);
}
.input-validate-group .btn-validate svg {
  width: 16px;
  height: 16px;
}

.form-group-card {
  padding: var(--tblr-space-5);
  background-color: var(--tblr-gray-50);
  border-radius: var(--tblr-radius-lg);
  border: 1px solid var(--tblr-border);
}
.form-group-card .form-group-header {
  margin-bottom: var(--tblr-space-4);
}
.form-group-card .form-group-title {
  font-size: var(--tblr-text-base);
  font-weight: var(--tblr-font-semibold);
  color: var(--tblr-body-color);
  margin: 0;
}
.form-group-card .form-group-content .mb-3:last-child,
.form-group-card .form-group-content .mb-4:last-child {
  margin-bottom: 0 !important;
}

.address-widget .card-body {
  padding: var(--tblr-space-4);
}
.address-widget .form-label {
  font-size: var(--tblr-text-sm);
  font-weight: var(--tblr-font-medium);
}
.address-widget .form-control,
.address-widget .form-select {
  font-size: var(--tblr-text-base);
}

.form-control.is-invalid,
.form-select.is-invalid {
  border-color: var(--tblr-danger);
  padding-right: calc(1.5em + 0.75rem);
  background-image: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 12 12%27 width=%2712%27 height=%2712%27 fill=%27none%27 stroke=%27%23ef4444%27%3e%3ccircle cx=%276%27 cy=%276%27 r=%274.5%27/%3e%3cpath stroke-linejoin=%27round%27 d=%27M5.8 3.6h.4L6 6.5z%27/%3e%3ccircle cx=%276%27 cy=%278.2%27 r=%27.6%27 fill=%27%23ef4444%27 stroke=%27none%27/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right calc(0.375em + 0.1875rem) center;
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}
.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
  border-color: var(--tblr-danger);
  box-shadow: var(--tblr-ring-danger);
}

.form-control.is-valid,
.form-select.is-valid {
  border-color: var(--tblr-success);
}
.form-control.is-valid:focus,
.form-select.is-valid:focus {
  border-color: var(--tblr-success);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}

.invalid-feedback {
  color: var(--tblr-danger);
  font-size: var(--tblr-text-sm);
  margin-top: var(--tblr-space-1-5);
}

.valid-feedback {
  color: var(--tblr-success);
  font-size: var(--tblr-text-sm);
  margin-top: var(--tblr-space-1-5);
}

.file-upload-area {
  border: 2px dashed var(--tblr-gray-300);
  border-radius: var(--tblr-radius-md);
  padding: var(--tblr-space-6);
  text-align: center;
  background: var(--tblr-surface);
  transition: border-color var(--tblr-transition-fast), background-color var(--tblr-transition-fast);
  cursor: pointer;
}
.file-upload-area:hover, .file-upload-area.dragover {
  border-color: var(--tblr-primary);
  background-color: var(--tblr-primary-lighter);
}
.file-upload-area .upload-icon {
  color: var(--tblr-text-light);
  margin-bottom: var(--tblr-space-2);
}
.file-upload-area .upload-icon svg {
  width: 32px;
  height: 32px;
}
.file-upload-area .upload-text {
  color: var(--tblr-text-muted);
  font-size: var(--tblr-text-sm);
}
.file-upload-area .upload-hint {
  color: var(--tblr-text-light);
  font-size: var(--tblr-text-xs);
  margin-top: var(--tblr-space-1);
}

.dropzone {
  border: 2px dashed var(--tblr-gray-300);
  border-radius: var(--tblr-radius-md);
  padding: var(--tblr-space-4);
  text-align: center;
  background: var(--tblr-surface);
  transition: border-color var(--tblr-transition-fast), background-color var(--tblr-transition-fast);
  min-height: auto;
}
.dropzone:hover, .dropzone.dropzone-dragover {
  border-color: var(--tblr-primary);
  background-color: var(--tblr-primary-lighter);
}

.form-section-title {
  font-size: var(--tblr-text-md);
  font-weight: var(--tblr-font-semibold);
  color: var(--tblr-body-color);
  display: flex;
  align-items: center;
  gap: var(--tblr-space-2);
  margin-bottom: var(--tblr-space-4);
}
.form-section-title svg,
.form-section-title i {
  color: var(--tblr-primary);
  opacity: 0.9;
  width: 20px;
  height: 20px;
}

/**
 * Standard Form Actions Pattern:
 *
 * ┌─────────────────────────────────────────────────────────────┐
 * │ [Cancel (ghost)]                      [Save (primary + icon)]│
 * └─────────────────────────────────────────────────────────────┘
 *
 * - Cancel: Left side OR ghost style
 * - Save: Right side, primary style, with save icon
 */
.form-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--tblr-space-3);
  padding: var(--tblr-space-4) var(--tblr-space-6);
  background: var(--tblr-gray-50);
  border-top: 1px solid var(--tblr-border-light);
}
.card-footer .form-actions {
  padding: 0;
  background: transparent;
  border-top: none;
}
.form-actions.form-actions-spread {
  justify-content: space-between;
}

.form-inline {
  display: flex;
  align-items: center;
  gap: var(--tblr-space-3);
  flex-wrap: wrap;
}
.form-inline .form-control,
.form-inline .form-select {
  width: auto;
}

.form-horizontal .form-group,
.form-horizontal .mb-3,
.form-horizontal .mb-4 {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--tblr-space-4);
  align-items: start;
}
@media (width <= 768px) {
  .form-horizontal .form-group,
  .form-horizontal .mb-3,
  .form-horizontal .mb-4 {
    grid-template-columns: 1fr;
  }
}
.form-horizontal .form-label {
  padding-top: var(--tblr-space-2-5);
  margin-bottom: 0;
  text-align: right;
}
@media (width <= 768px) {
  .form-horizontal .form-label {
    text-align: left;
    padding-top: 0;
  }
}

.form-compact .mb-3,
.form-compact .mb-4 {
  margin-bottom: var(--tblr-space-3) !important;
}
.form-compact .form-control,
.form-compact .form-select {
  padding: var(--tblr-space-2) var(--tblr-space-3);
  font-size: var(--tblr-text-sm);
}
.form-compact .form-label {
  font-size: var(--tblr-text-xs);
  margin-bottom: var(--tblr-space-1);
}

.btn {
  gap: var(--tblr-space-2);
}

.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: var(--tblr-radius-md);
}
.btn-icon svg {
  width: 18px;
  height: 18px;
}

.btn-ghost-danger {
  color: var(--tblr-text-muted);
  background: transparent;
  border: none;
}
.btn-ghost-danger:hover {
  color: var(--tblr-danger);
  background: var(--tblr-danger-lighter);
}
.btn-ghost-danger:focus {
  box-shadow: var(--tblr-ring-danger);
}

.card-header-tabs .nav-link {
  font-size: 0.875rem;
}

.fw-medium {
  font-weight: 500 !important;
}

@media (width <= 576px) {
  .form-switch-field {
    padding: var(--tblr-space-3);
  }
  .form-switch-wrapper .form-check-input {
    width: 2.25rem;
    height: 1.125rem;
  }
  .form-group-card {
    padding: var(--tblr-space-4);
  }
  .form-actions {
    padding: var(--tblr-space-3) var(--tblr-space-4);
    flex-wrap: wrap;
  }
  .form-actions .btn {
    flex: 1;
    min-width: 100px;
  }
}
/**
 * Company Pages Styles
 *
 * Styles for company selection and creation pages
 * All styles are scoped to .company-select-page and .company-create-page
 * to avoid conflicts with other pages.
 */
.company-select-page,
.company-create-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.company-select-page .company-page-header,
.company-create-page .company-page-header {
  background: var(--tblr-surface);
  border-bottom: 1px solid var(--tblr-border);
  box-shadow: var(--tblr-shadow-xs);
}
.company-select-page .company-page-logo,
.company-create-page .company-page-logo {
  display: flex;
  align-items: center;
  justify-content: center;
}
.company-select-page .company-page-logo img,
.company-create-page .company-page-logo img {
  height: 48px;
  width: auto;
}
.company-select-page .company-page-brand h1,
.company-create-page .company-page-brand h1 {
  font-weight: 700;
  color: var(--tblr-text-primary);
}
.company-select-page .company-page-intro h2,
.company-create-page .company-page-intro h2 {
  font-weight: 600;
  color: var(--tblr-text-primary);
  font-size: 1.75rem;
}
.company-select-page .company-page-intro p,
.company-create-page .company-page-intro p {
  font-size: 1.125rem;
}
.company-select-page .avatar-md,
.company-create-page .avatar-md {
  width: 2.5rem;
  height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.company-select-page .avatar-lg,
.company-create-page .avatar-lg {
  width: 3.5rem;
  height: 3.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.company-select-page .avatar-2xl,
.company-create-page .avatar-2xl {
  width: 4rem;
  height: 4rem;
  font-size: 1.25rem;
  font-weight: 600;
}
.company-select-page .avatar-xl,
.company-create-page .avatar-xl {
  width: 5rem;
  height: 5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.company-select-page .avatar-initials,
.company-create-page .avatar-initials {
  font-weight: 600;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
}
.company-select-page .form-hint,
.company-create-page .form-hint {
  font-size: 0.875rem;
  color: var(--tblr-text-secondary);
  display: flex;
  align-items: center;
}
@media (width <= 767.98px) {
  .company-select-page .avatar-lg,
  .company-create-page .avatar-lg {
    width: 3rem;
    height: 3rem;
  }
  .company-select-page .avatar-lg svg,
  .company-create-page .avatar-lg svg {
    width: 24px;
    height: 24px;
  }
  .company-select-page .avatar-2xl,
  .company-create-page .avatar-2xl {
    width: 3rem;
    height: 3rem;
    font-size: 1rem;
  }
  .company-select-page .h2, .company-select-page h2,
  .company-create-page .h2,
  .company-create-page h2 {
    font-size: 1.5rem;
  }
}

.company-select-page .card.shadow-sm {
  box-shadow: var(--tblr-shadow-lg) !important;
  border: none;
  background: var(--tblr-surface);
}
.company-select-page .card-company {
  transition: var(--tblr-transition-all);
  border: 2px solid var(--tblr-border);
  background: var(--tblr-surface);
  box-shadow: var(--tblr-shadow-md);
  border-radius: var(--tblr-radius-lg);
}
.company-select-page .card-company:hover {
  transform: translateY(-4px);
  box-shadow: var(--tblr-shadow-xl);
  border-color: var(--tblr-primary);
}
.company-select-page .card-company:hover .company-arrow {
  transform: translateX(4px);
}
.company-select-page .card-company:hover h3 {
  color: var(--tblr-primary);
}
.company-select-page .card-company:active {
  transform: translateY(-2px);
}
.company-select-page .company-avatar {
  flex-shrink: 0;
}
.company-select-page .company-avatar .avatar {
  box-shadow: var(--tblr-shadow-sm);
}
.company-select-page .company-avatar .avatar img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--tblr-space-2);
}
.company-select-page .company-avatar .avatar.bg-primary {
  background-color: var(--tblr-primary-dark) !important;
  background-image: none !important;
}
.company-select-page .company-avatar .avatar-initials,
.company-select-page .company-avatar .avatar.bg-primary span {
  color: var(--tblr-text-inverse) !important;
  display: flex;
  align-items: center;
  justify-content: center;
}
.company-select-page .company-arrow {
  flex-shrink: 0;
  transition: transform var(--tblr-duration-base) var(--tblr-ease-in-out);
  display: flex;
  align-items: center;
  justify-content: center;
}
.company-select-page .min-w-0 {
  min-width: 0;
}
.company-select-page .card-create-company {
  background: linear-gradient(135deg, rgba(var(--tblr-success-rgb), 0.05) 0%, rgba(var(--tblr-success-rgb), 0.02) 100%);
  border: 2px dashed var(--tblr-border);
  transition: var(--tblr-transition-all);
}
.company-select-page .card-create-company:hover {
  border-color: var(--tblr-success);
  background: linear-gradient(135deg, rgba(var(--tblr-success-rgb), 0.08) 0%, rgba(var(--tblr-success-rgb), 0.04) 100%);
}
.company-select-page .w-md-auto {
  width: auto !important;
}
@media (width >= 768px) {
  .company-select-page .w-md-auto {
    width: auto !important;
  }
}

.company-create-page .form-smooth .form-control:focus,
.company-create-page .form-smooth .form-select:focus {
  border-color: var(--tblr-primary);
  box-shadow: 0 0 0 0.25rem rgba(var(--tblr-primary-rgb), 0.1);
}
.company-create-page .card {
  box-shadow: var(--tblr-shadow-lg);
  border: none;
}
.company-create-page .alert {
  border-radius: var(--tblr-radius-lg);
  border: 1px solid transparent;
}
.company-create-page .alert.alert-info {
  background-color: rgba(var(--tblr-info-rgb), 0.08);
  border-color: rgba(var(--tblr-info-rgb), 0.2);
}
.company-create-page .alert.alert-warning {
  background-color: rgba(var(--tblr-warning-rgb), 0.08);
  border-color: rgba(var(--tblr-warning-rgb), 0.2);
}
.company-create-page .alert.alert-success {
  background-color: rgba(var(--tblr-success-rgb), 0.08);
  border-color: rgba(var(--tblr-success-rgb), 0.2);
}
.company-create-page .btn-primary {
  font-weight: 600;
  letter-spacing: 0.01em;
}

/**
 * Settings Page Styles
 * Only custom styles that can't be achieved with Bootstrap/Tabler utilities
 */
.settings-page {
  max-width: 900px;
  margin: 0 auto;
  padding-bottom: 2rem;
}

@media (max-width: 767.98px) {
  .settings-page > .nav-underline {
    margin-left: -1rem;
    margin-right: -1rem;
    padding-left: 1rem;
    padding-right: 1rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
  }
  .settings-page > .nav-underline::-webkit-scrollbar {
    display: none;
  }
  .settings-page > .nav-underline .nav-item {
    flex-shrink: 0;
  }
}
.settings-content-card {
  border-radius: var(--tblr-radius-lg);
}
.settings-content-card:hover {
  transform: none;
}
.settings-content-card > .card-body {
  padding: var(--tblr-space-6);
}
@media (min-width: 768px) {
  .settings-content-card > .card-body {
    padding: var(--tblr-space-8) var(--tblr-space-8) var(--tblr-space-6);
  }
}
.settings-content-card > .card-footer {
  padding: var(--tblr-space-4) var(--tblr-space-6);
  border-top-color: var(--tblr-border-light);
}
@media (min-width: 768px) {
  .settings-content-card > .card-footer {
    padding: var(--tblr-space-4) var(--tblr-space-8);
  }
}
.settings-content-card .card-body > .border-bottom {
  border-bottom-color: var(--tblr-border-light) !important;
}
.settings-content-card .card-body h3 {
  font-size: var(--tblr-text-lg);
  font-weight: var(--tblr-font-semibold);
  color: var(--tblr-text-primary);
  letter-spacing: -0.01em;
}
.settings-content-card .card-body h3 > svg {
  color: var(--tblr-text-muted);
}
.settings-content-card .card-body h3 + p.text-muted {
  max-width: 65ch;
}

.logo-upload-card .logo-preview-frame {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border-radius: 0.5rem;
  border: 1px solid #e2e8f0;
  overflow: hidden;
}
.logo-upload-card .logo-preview-frame img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.logo-upload-card .dropzone {
  border: 2px dashed #cbd5e1;
  border-radius: 0.5rem;
  min-height: auto;
}
.logo-upload-card .dropzone:hover, .logo-upload-card .dropzone.dropzone-dragover {
  border-color: var(--tblr-primary);
  background-color: rgba(var(--tblr-primary-rgb), 0.02);
}

.settings-danger-zone .card {
  border-radius: var(--tblr-radius-lg);
  border-color: var(--tblr-danger-light);
}
.settings-danger-zone .card:hover {
  transform: none;
}
.settings-danger-zone .card .card-header {
  background: var(--tblr-danger-lighter) !important;
  border-bottom-color: var(--tblr-danger-light) !important;
  padding: var(--tblr-space-3) var(--tblr-space-6);
}
.settings-danger-zone .card .card-header .card-title {
  font-size: var(--tblr-text-sm);
  font-weight: var(--tblr-font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--tblr-danger);
}
.settings-danger-zone .card .card-body {
  padding: var(--tblr-space-5) var(--tblr-space-6);
}
.settings-danger-zone .card .card-body h3 {
  font-size: var(--tblr-text-base);
  font-weight: var(--tblr-font-semibold);
  color: var(--tblr-text-primary);
}

#deleteCompanyModal .modal-content {
  border-radius: 1rem;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}
#deleteCompanyModal .font-monospace {
  background-color: #fef2f2;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
}

.custom-field-list .custom-field-row {
  transition: background-color 120ms ease;
}
.custom-field-list .custom-field-row:hover .custom-field-handle {
  color: var(--tblr-body-color, #1e293b);
}
.custom-field-list .custom-field-row.sortable-ghost {
  opacity: 0.4;
  background-color: rgba(var(--tblr-primary-rgb, 99 102 241), 0.06);
}
.custom-field-list .custom-field-row.sortable-chosen {
  background-color: rgba(var(--tblr-primary-rgb, 99 102 241), 0.04);
}
.custom-field-list .custom-field-handle {
  cursor: grab;
  padding: 0.25rem;
  color: var(--tblr-muted, #94a3b8);
  line-height: 1;
  border-radius: 0.25rem;
}
.custom-field-list .custom-field-handle:active {
  cursor: grabbing;
}

@media print {
  .settings-page .nav-underline,
  .settings-page .settings-danger-zone,
  .settings-page .card-footer {
    display: none !important;
  }
}
.template-picker .template-picker-card {
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.template-picker .template-picker-card:has(.template-picker-input:checked) {
  border-color: var(--tblr-primary, #206bc4);
  box-shadow: 0 0 0 2px rgba(var(--tblr-primary-rgb, 32, 107, 196), 0.25);
}
.template-picker .template-picker-card:has(.template-picker-input:focus-visible) {
  box-shadow: 0 0 0 3px rgba(var(--tblr-primary-rgb, 32, 107, 196), 0.5);
}
.template-picker .template-picker-option {
  display: block;
  position: relative;
  margin: 0;
  cursor: pointer;
}
.template-picker .template-picker-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}
.template-picker .template-picker-thumb {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--tblr-bg-surface-secondary, #f1f5f9);
}
.template-picker .template-picker-thumb iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 400%;
  height: 400%;
  border: 0;
  transform: scale(0.25);
  transform-origin: 0 0;
  pointer-events: none;
}
.template-picker .template-picker-check {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  display: none;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--tblr-primary, #206bc4);
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.25);
}
.template-picker .template-picker-option:has(.template-picker-input:checked) .template-picker-check {
  display: flex;
}
.template-picker.template-picker-disabled .template-picker-option {
  cursor: not-allowed;
}
.template-picker.template-picker-disabled .template-picker-thumb {
  opacity: 0.6;
}

/**
 * SolidInvoice Dashboard Styles
 *
 * Styles for the redesigned dashboard including hero stats,
 * charts, attention required section, quick actions, and activity feed.
 */
.dashboard-hero-stats {
  display: grid;
  gap: var(--tblr-space-4);
  grid-template-columns: 1fr;
}
@media (width >= 577px) {
  .dashboard-hero-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (width >= 1201px) {
  .dashboard-hero-stats {
    grid-template-columns: repeat(9, 1fr);
  }
}

.stat-card {
  background: var(--tblr-surface);
  border: 1px solid var(--tblr-border-light);
  border-radius: var(--tblr-radius-lg);
  box-shadow: var(--tblr-shadow-sm);
  padding: var(--tblr-space-6);
}
@media (width >= 1201px) {
  .stat-card {
    grid-column: span 2;
  }
}
.stat-card--danger {
  background: var(--tblr-danger-lighter);
  border-color: var(--tblr-danger-light);
}
@media (width >= 1201px) {
  .stat-card--urgent {
    grid-column: span 3;
  }
}
.stat-card--urgent .stat-value {
  font-size: var(--tblr-text-3xl);
}

.stat-card-content {
  display: flex;
  align-items: flex-start;
  gap: var(--tblr-space-4);
}

.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--tblr-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.stat-icon--primary {
  background: var(--tblr-primary-light);
  color: var(--tblr-primary);
}
.stat-icon--success {
  background: var(--tblr-success-light);
  color: var(--tblr-success);
}
.stat-icon--danger {
  background: var(--tblr-danger-light);
  color: var(--tblr-danger);
}
.stat-icon--warning {
  background: var(--tblr-warning-light);
  color: var(--tblr-warning);
}
.stat-icon--info {
  background: var(--tblr-info-light);
  color: var(--tblr-info);
}

.stat-info {
  display: flex;
  flex-direction: column;
  gap: var(--tblr-space-1);
  min-width: 0;
}

.stat-label {
  font-size: var(--tblr-text-xs);
  color: var(--tblr-text-muted);
  font-weight: var(--tblr-font-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tblr-tracking-wider);
}

.stat-value {
  font-size: var(--tblr-text-2xl);
  font-weight: var(--tblr-font-semibold);
  color: var(--tblr-text-primary);
  line-height: 1.2;
  letter-spacing: var(--tblr-tracking-tight);
  font-variant-numeric: tabular-nums;
}
.stat-value--danger {
  color: var(--tblr-danger-hover);
}
.stat-value .money--total .money-amount {
  font-size: 1em;
}

.stat-subvalue {
  font-size: var(--tblr-text-sm);
  color: var(--tblr-text-muted);
  font-variant-numeric: tabular-nums;
}

.dashboard-chart-container {
  min-height: 280px;
  position: relative;
}

.dashboard-revenue-chart {
  height: 280px !important;
}

.dashboard-donut-container {
  min-height: 280px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dashboard-donut-chart {
  height: 280px !important;
}

.dashboard-donut-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, calc(-50% - var(--tblr-space-1-5)));
  text-align: center;
  pointer-events: none;
  z-index: 1;
}

.dashboard-donut-total {
  display: block;
  font-size: var(--tblr-text-2xl);
  font-weight: var(--tblr-font-semibold);
  color: var(--tblr-text-primary);
  line-height: 1;
  letter-spacing: var(--tblr-tracking-tight);
  font-variant-numeric: tabular-nums;
}

.dashboard-donut-label {
  display: block;
  font-size: var(--tblr-text-xs);
  color: var(--tblr-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tblr-tracking-wider);
  font-weight: var(--tblr-font-semibold);
  margin-top: var(--tblr-space-1);
}

.dashboard-chart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--tblr-space-8);
  text-align: center;
}

.dashboard-chart-empty-icon {
  color: var(--tblr-text-muted);
  margin-bottom: var(--tblr-space-3);
}

.dashboard-chart-empty-text {
  color: var(--tblr-text-secondary);
  margin-bottom: var(--tblr-space-2);
}

.dashboard-chart-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--tblr-space-8);
  text-align: center;
}

.dashboard-chart-error-icon {
  width: 64px;
  height: 64px;
  border-radius: var(--tblr-radius-full);
  background: var(--tblr-danger-light);
  color: var(--tblr-danger);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--tblr-space-3);
}
.dashboard-chart-error-icon svg {
  width: 32px;
  height: 32px;
}

.dashboard-chart-error-title {
  font-size: var(--tblr-text-base);
  font-weight: var(--tblr-font-semibold);
  color: var(--tblr-text-primary);
  margin: 0 0 var(--tblr-space-1);
}

.dashboard-chart-error-text {
  font-size: var(--tblr-text-sm);
  color: var(--tblr-text-muted);
  margin: 0 0 var(--tblr-space-4);
  max-width: 42ch;
}

.attention-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--tblr-space-8);
  text-align: center;
}

.attention-empty-icon {
  width: 64px;
  height: 64px;
  border-radius: var(--tblr-radius-full);
  background: var(--tblr-success-lighter);
  color: var(--tblr-success);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--tblr-space-3);
}

.attention-empty-text {
  color: var(--tblr-text-secondary);
  margin: 0;
}

.attention-sections {
  display: flex;
  flex-direction: column;
  gap: var(--tblr-space-4);
}

.attention-section:not(:last-child) {
  padding-bottom: var(--tblr-space-4);
  border-bottom: 1px solid var(--tblr-border-light);
}

.attention-section-header {
  display: flex;
  align-items: center;
  gap: var(--tblr-space-2);
  font-size: var(--tblr-text-xs);
  font-weight: var(--tblr-font-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tblr-tracking-wider);
  margin-bottom: var(--tblr-space-3);
}
.attention-section-header--danger {
  color: var(--tblr-danger);
}
.attention-section-header--warning {
  color: var(--tblr-warning-hover);
}
.attention-section-header--info {
  color: var(--tblr-info);
}
.attention-section-header--primary {
  color: var(--tblr-primary);
}

.attention-badge {
  font-size: var(--tblr-text-xs);
  padding: 2px 6px;
  border-radius: var(--tblr-radius-full);
  font-weight: var(--tblr-font-semibold);
}
.attention-badge--danger {
  background: var(--tblr-danger-light);
  color: var(--tblr-danger);
}
.attention-badge--warning {
  background: var(--tblr-warning-light);
  color: var(--tblr-warning-hover);
}
.attention-badge--info {
  background: var(--tblr-info-light);
  color: var(--tblr-info);
}
.attention-badge--primary {
  background: var(--tblr-primary-light);
  color: var(--tblr-primary);
}

.attention-items {
  display: flex;
  flex-direction: column;
  gap: var(--tblr-space-2);
}

.attention-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tblr-space-3);
  padding: var(--tblr-space-3);
  border-radius: var(--tblr-radius-md);
  text-decoration: none;
  color: inherit;
  transition: background-color var(--tblr-transition-fast), box-shadow var(--tblr-transition-fast);
}
.attention-item:hover {
  background: var(--tblr-surface-hover);
}
.attention-item:focus-visible {
  outline: none;
  box-shadow: var(--tblr-ring-primary);
}
.attention-item--danger {
  background: var(--tblr-danger-lighter);
}
.attention-item--danger:hover {
  background: var(--tblr-danger-light);
}
.attention-item--danger:focus-visible {
  box-shadow: var(--tblr-ring-danger);
}

.attention-item-main {
  display: flex;
  align-items: center;
  gap: var(--tblr-space-2);
  min-width: 0;
  flex: 1;
}

.attention-item-id {
  font-weight: var(--tblr-font-semibold);
  color: var(--tblr-text-primary);
  font-family: var(--tblr-font-mono);
  font-size: var(--tblr-text-sm);
}

.attention-item-client {
  color: var(--tblr-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.attention-item-meta {
  display: flex;
  align-items: center;
  gap: var(--tblr-space-3);
  flex-shrink: 0;
}

.attention-item-amount {
  font-weight: var(--tblr-font-semibold);
  color: var(--tblr-text-primary);
  font-variant-numeric: tabular-nums;
}

.attention-item-date {
  font-size: var(--tblr-text-sm);
  color: var(--tblr-text-muted);
  font-variant-numeric: tabular-nums;
}

.quick-actions-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--tblr-space-3);
}

.quick-action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--tblr-space-2);
  padding: var(--tblr-space-4);
  border-radius: var(--tblr-radius-md);
  text-decoration: none;
  transition: transform var(--tblr-transition-fast), background-color var(--tblr-transition-fast), box-shadow var(--tblr-transition-fast);
}
.quick-action-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--tblr-shadow-md);
}
.quick-action-btn:focus-visible {
  outline: none;
  box-shadow: var(--tblr-ring-primary);
}
.quick-action-btn--primary {
  background: var(--tblr-primary-lighter);
  color: var(--tblr-primary-dark);
}
.quick-action-btn--primary:hover {
  background: var(--tblr-primary-light);
}
.quick-action-btn--secondary {
  background: var(--tblr-accent-lighter);
  color: var(--tblr-accent-dark);
}
.quick-action-btn--secondary:hover {
  background: var(--tblr-accent-light);
}
.quick-action-btn--info {
  background: var(--tblr-info-lighter);
  color: var(--tblr-info-hover);
}
.quick-action-btn--info:hover {
  background: var(--tblr-info-light);
}
.quick-action-btn--success {
  background: var(--tblr-success-lighter);
  color: var(--tblr-success-hover);
}
.quick-action-btn--success:hover {
  background: var(--tblr-success-light);
}
@media (prefers-reduced-motion: reduce) {
  .quick-action-btn, .quick-action-btn:hover {
    transition: none;
    transform: none;
  }
}

.quick-action-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.quick-action-label {
  font-size: var(--tblr-text-sm);
  font-weight: var(--tblr-font-semibold);
  text-align: center;
}

.activity-timeline {
  display: flex;
  flex-direction: column;
}

.activity-item {
  display: flex;
  align-items: flex-start;
  gap: var(--tblr-space-3);
  padding: var(--tblr-space-4) 0;
  border-bottom: 1px solid var(--tblr-border-light);
}
.activity-item:last-child {
  border-bottom: none;
}

.activity-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--tblr-radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}
.activity-icon--payment {
  background: var(--tblr-success-light);
  color: var(--tblr-success);
}
.activity-icon--invoice, .activity-icon--invoice_sent {
  background: var(--tblr-primary-light);
  color: var(--tblr-primary);
}
.activity-icon--quote_accepted {
  background: var(--tblr-success-light);
  color: var(--tblr-success);
}
.activity-icon--quote_declined {
  background: var(--tblr-danger-light);
  color: var(--tblr-danger);
}
.activity-icon--recurring_generated {
  background: var(--tblr-info-light);
  color: var(--tblr-info);
}

.activity-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--tblr-space-2);
}

.activity-description {
  display: flex;
  align-items: center;
  gap: var(--tblr-space-2);
  flex-wrap: wrap;
  line-height: 1.4;
}

.activity-text {
  color: var(--tblr-text-secondary);
  font-size: var(--tblr-text-base);
}

.activity-doc-link {
  font-weight: var(--tblr-font-semibold);
  color: var(--tblr-primary);
  text-decoration: none;
  font-family: var(--tblr-font-mono);
  font-size: var(--tblr-text-sm);
  border-radius: var(--tblr-radius-sm);
}
.activity-doc-link:hover {
  text-decoration: underline;
  color: var(--tblr-primary-dark);
}
.activity-doc-link:focus-visible {
  outline: none;
  box-shadow: var(--tblr-ring-primary);
}

.activity-details {
  display: flex;
  align-items: center;
  gap: var(--tblr-space-2);
  flex-wrap: wrap;
  font-size: var(--tblr-text-sm);
}

.activity-client-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--tblr-text-secondary);
  text-decoration: none;
  border-radius: var(--tblr-radius-sm);
  transition: color var(--tblr-transition-fast);
}
.activity-client-link:hover {
  color: var(--tblr-primary);
}
.activity-client-link:focus-visible {
  outline: none;
  box-shadow: var(--tblr-ring-primary);
  color: var(--tblr-primary);
}
.activity-client-link svg {
  opacity: 0.6;
}

.activity-separator {
  color: var(--tblr-text-muted);
}

.activity-amount {
  font-weight: var(--tblr-font-semibold);
  color: var(--tblr-text-primary);
  font-variant-numeric: tabular-nums;
}

.activity-time {
  color: var(--tblr-text-muted);
}

/**
 * Client Page Styles
 *
 * Custom styles for the Client view page.
 * Follows the design system tokens and modern SaaS aesthetic.
 */
.client-hero {
  padding: var(--tblr-space-6);
  background: var(--tblr-surface);
  border-radius: var(--tblr-radius-lg);
  border: 1px solid var(--tblr-border-light);
  box-shadow: var(--tblr-shadow-sm);
  margin-bottom: var(--tblr-space-6);
}

.client-hero-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--tblr-text-primary);
  margin-bottom: 0;
  line-height: 1.2;
}

.client-hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tblr-space-4);
  color: var(--tblr-text-muted);
  font-size: 0.875rem;
}
.client-hero-meta a {
  color: var(--tblr-text-muted);
  text-decoration: none;
  transition: color var(--tblr-transition-fast);
}
.client-hero-meta a:hover {
  color: var(--tblr-primary);
}

.client-hero-meta-item {
  display: flex;
  align-items: center;
  gap: var(--tblr-space-1-5);
}

.client-stat-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--tblr-text-muted);
  margin-bottom: var(--tblr-space-2);
}

.client-stat-value {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--tblr-text-primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.client-stat-value--success {
  color: var(--tblr-success);
}

.client-stat-value--warning,
.client-stat-value--danger {
  color: var(--tblr-warning);
}

.client-stat-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tblr-space-2);
  margin-top: var(--tblr-space-2);
}

.client-credit-card {
  margin-bottom: var(--tblr-space-6);
}
.client-credit-card .card-body {
  padding: var(--tblr-space-5);
}

.client-credit-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--tblr-radius-lg);
  background: var(--tblr-info-lighter);
  color: var(--tblr-info);
}

.client-credit-amount {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--tblr-text-primary);
  margin-bottom: 0;
}

.client-credit-label {
  font-size: 0.75rem;
  color: var(--tblr-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.client-tabs-card .card-header {
  padding-bottom: 0;
  border-bottom: none;
}
.client-tabs-card {
  /* .nav-tabs {
      border-bottom: 1px solid var(--tblr-border);
      margin: 0 calc(-1 * var(--tblr-space-6));
      padding: 0 var(--tblr-space-6);
  } */
}
.client-tabs-card .nav-link {
  padding: var(--tblr-space-3) var(--tblr-space-4);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--tblr-text-secondary);
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: transparent;
  transition: color var(--tblr-transition-fast), border-color var(--tblr-transition-fast);
  display: flex;
  align-items: center;
  gap: var(--tblr-space-2);
}
.client-tabs-card .nav-link:hover {
  color: var(--tblr-primary);
  border-bottom-color: rgba(46, 150, 58, 0.3);
}
.client-tabs-card .nav-link.active {
  color: var(--tblr-primary);
  border-bottom-color: var(--tblr-primary);
}
.client-tabs-card .nav-link .badge {
  font-size: 0.65rem;
  font-weight: 600;
  padding: 0.2em 0.5em;
}
.client-tabs-card .tab-content {
  padding-top: var(--tblr-space-4);
}

.client-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--tblr-space-4);
}

.client-section-title {
  display: flex;
  align-items: center;
  gap: var(--tblr-space-2);
  font-size: 1rem;
  font-weight: 600;
  color: var(--tblr-text-primary);
  margin-bottom: 0;
}
.client-section-title .badge {
  font-size: 0.7rem;
  font-weight: 600;
}

.client-contact-card,
.client-address-card {
  height: 100%;
  transition: box-shadow var(--tblr-transition-base);
}
.client-contact-card:hover,
.client-address-card:hover {
  box-shadow: var(--tblr-shadow-md);
}
.client-contact-card .card-header,
.client-address-card .card-header {
  padding: var(--tblr-space-3) var(--tblr-space-4);
  background: transparent;
  border-bottom: 1px solid var(--tblr-border-light);
}
.client-contact-card .card-body,
.client-address-card .card-body {
  padding: var(--tblr-space-4);
}

.client-contact-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--tblr-radius-md);
  background: var(--tblr-primary-lighter);
  color: var(--tblr-primary);
  font-size: 0.875rem;
}

.client-contact-name {
  font-weight: 500;
  color: var(--tblr-text-primary);
}

.client-contact-detail {
  display: flex;
  align-items: flex-start;
  gap: var(--tblr-space-2);
  margin-bottom: var(--tblr-space-2);
}
.client-contact-detail:last-child {
  margin-bottom: 0;
}

.client-contact-detail-icon {
  color: var(--tblr-text-muted);
  flex-shrink: 0;
  margin-top: 2px;
}

.client-contact-detail-label {
  font-size: 0.75rem;
  color: var(--tblr-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.client-contact-detail-value {
  color: var(--tblr-text-primary);
}
.client-contact-detail-value a {
  color: var(--tblr-primary);
  text-decoration: none;
}
.client-contact-detail-value a:hover {
  text-decoration: underline;
}

.btn-icon-sm {
  width: 28px;
  height: 28px;
  padding: var(--tblr-space-1);
}

.btn-ghost-secondary {
  color: var(--tblr-text-secondary);
  background: transparent;
  border: none;
}
.btn-ghost-secondary:hover {
  color: var(--tblr-text-primary);
  background: var(--tblr-gray-100);
}
.btn-ghost-secondary:focus {
  box-shadow: var(--tblr-ring-primary);
}

.client-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--tblr-space-2);
  margin-top: var(--tblr-space-4);
  padding-top: var(--tblr-space-4);
  border-top: 1px solid var(--tblr-border-light);
}

.client-address-text {
  white-space: pre-line;
  color: var(--tblr-text-primary);
  line-height: 1.5;
  margin-bottom: var(--tblr-space-3);
}

.client-address-map-link {
  display: inline-flex;
  align-items: center;
  gap: var(--tblr-space-1-5);
  font-size: 0.875rem;
}

.client-contact-extra {
  margin-top: var(--tblr-space-3);
  padding-top: var(--tblr-space-3);
  border-top: 1px solid var(--tblr-border-light);
}

.client-contact-extra-title {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--tblr-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: var(--tblr-space-2);
}

.client-contact-extra-item {
  display: flex;
  align-items: center;
  gap: var(--tblr-space-2);
  font-size: 0.875rem;
  margin-bottom: var(--tblr-space-1);
}
.client-contact-extra-item:last-child {
  margin-bottom: 0;
}

.client-contact-extra-label {
  color: var(--tblr-text-muted);
  min-width: 80px;
}

.client-contact-extra-value {
  color: var(--tblr-text-primary);
}

.custom-fields-card .card-header {
  padding: var(--tblr-space-3) var(--tblr-space-4);
  background: transparent;
  border-bottom: 1px solid var(--tblr-border-light);
}
.custom-fields-card .card-body {
  padding: var(--tblr-space-2) var(--tblr-space-4);
}

.custom-fields-list {
  display: flex;
  flex-direction: column;
  gap: var(--tblr-space-1);
}

.custom-fields-item {
  display: grid;
  grid-template-columns: minmax(140px, 30%) 1fr;
  gap: var(--tblr-space-3);
  align-items: baseline;
  padding: var(--tblr-space-2) 0;
  border-bottom: 1px solid var(--tblr-border-light);
}
.custom-fields-item:last-child {
  border-bottom: none;
}

.custom-fields-label {
  display: inline-flex;
  align-items: center;
  gap: var(--tblr-space-1-5);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--tblr-text-muted);
  margin: 0;
  text-transform: none;
  letter-spacing: 0;
}

.custom-fields-value {
  font-size: 0.875rem;
  color: var(--tblr-text-primary);
  word-break: break-all;
}
.custom-fields-value a {
  color: var(--tblr-primary);
  text-decoration: none;
}
.custom-fields-value a:hover {
  text-decoration: underline;
}
.custom-fields-value .badge {
  margin-right: var(--tblr-space-1);
  font-weight: 500;
}

@media (width <= 575.98px) {
  .custom-fields-item {
    grid-template-columns: 1fr;
    gap: var(--tblr-space-1);
  }
}
@media (width <= 991.98px) {
  .client-hero {
    padding: var(--tblr-space-4);
  }
  .client-hero-title {
    font-size: 1.5rem;
  }
  .client-stat-value {
    font-size: 1.5rem;
  }
}
@media (width <= 767.98px) {
  .client-hero {
    text-align: center;
  }
  .client-hero-meta {
    justify-content: center;
  }
  .client-tabs-card .nav-tabs {
    margin: 0 calc(-1 * var(--tblr-space-4));
    padding: 0 var(--tblr-space-4);
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  .client-tabs-card .nav-tabs::-webkit-scrollbar {
    display: none;
  }
  .client-tabs-card .nav-item {
    flex-shrink: 0;
  }
  .client-section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--tblr-space-2);
  }
}
@media print {
  .client-hero .dropdown,
  .client-hero .btn,
  .client-section-header .btn,
  .btn-ghost-secondary,
  .btn-ghost-danger,
  .client-form-actions {
    display: none !important;
  }
  .client-hero {
    box-shadow: none;
    border: 1px solid #DDDDDD;
  }
}
/**
 * Invoice View Page
 *
 * All shared document view styles are in components/_document-view.scss.
 * Invoice-specific recurring invoice styles are also in that shared component.
 */
.recurring-schedule-grid {
  display: flex;
  flex-direction: column;
  gap: var(--tblr-space-3);
}

.schedule-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--tblr-space-2);
}

.recurring-schedule-label {
  font-size: var(--tblr-text-sm, 0.875rem);
  color: var(--tblr-text-muted);
  flex-shrink: 0;
}

.schedule-value {
  font-size: var(--tblr-text-sm, 0.875rem);
  font-weight: var(--tblr-font-medium, 500);
  color: var(--tblr-text-primary);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.occurrences-list {
  display: flex;
  flex-direction: column;
  gap: var(--tblr-space-2);
}

.occurrence-item {
  display: flex;
  align-items: center;
  gap: var(--tblr-space-2);
  font-size: var(--tblr-text-sm, 0.875rem);
  color: var(--tblr-text-secondary);
}
.occurrence-item svg {
  opacity: 0.6;
  flex-shrink: 0;
}

.occurrence-date {
  color: var(--tblr-text-primary);
}

.generated-invoices-list {
  display: flex;
  flex-direction: column;
  gap: var(--tblr-space-2);
}

.generated-invoice-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--tblr-space-2);
  padding: var(--tblr-space-2) var(--tblr-space-3);
  background: var(--tblr-gray-50);
  border-radius: var(--tblr-radius-sm);
}

.generated-invoice-link {
  display: inline-flex;
  align-items: center;
  gap: var(--tblr-space-1);
  font-size: var(--tblr-text-sm, 0.875rem);
  font-weight: var(--tblr-font-medium, 500);
  color: var(--tblr-primary);
  text-decoration: none;
}
.generated-invoice-link:hover {
  color: var(--tblr-primary-dark);
  text-decoration: underline;
}

.generated-invoice-id {
  font-weight: var(--tblr-font-semibold, 600);
}

.generated-invoice-meta {
  display: flex;
  align-items: center;
  gap: var(--tblr-space-2);
}

.generated-invoice-amount {
  font-size: var(--tblr-text-sm, 0.875rem);
  font-weight: var(--tblr-font-medium, 500);
  color: var(--tblr-text-primary);
  font-variant-numeric: tabular-nums;
}

/**
 * External Invoice View
 *
 * Invoice-specific styles for the public-facing invoice page.
 * All shared external document styles are in components/_external-doc-view.scss.
 */
.btn-invoice-action {
  padding: 0.75rem 1.25rem;
  font-weight: 500;
  border-radius: 0.375rem;
  transition: all 0.2s ease;
}
.btn-invoice-action:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.btn-invoice-action:active {
  transform: translateY(0);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border-width: 0;
}

@media print {
  .btn-invoice-action:hover {
    box-shadow: none !important;
    transform: none !important;
  }
}
/**
 * External Quote View
 *
 * All shared external document styles (including quote styles) are in
 * components/_external-doc-view.scss.
 *
 * There are currently no quote-specific styles beyond what is shared.
 */
/**
 * Quote View Page - Quote-Specific Styles
 *
 * Shared document layout is in components/_document-view.scss.
 * This file is intentionally minimal - all shared doc view styles are in the component.
 */
/**
 * Payment Marketplace Styles
 * Only payment-specific styles. Shared marketplace styles are in components/_marketplace.scss.
 */
.payment-marketplace {
  padding-bottom: var(--tblr-space-8);
}

.payment-marketplace > .nav-tabs {
  border-bottom: 1px solid var(--tblr-border);
}
.payment-marketplace > .nav-tabs .nav-link {
  padding: var(--tblr-space-3) var(--tblr-space-4);
  font-size: var(--tblr-text-sm);
  font-weight: 500;
  color: var(--tblr-text-secondary);
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: transparent;
  display: flex;
  align-items: center;
  gap: var(--tblr-space-2);
  transition: var(--tblr-transition-colors);
}
.payment-marketplace > .nav-tabs .nav-link:hover {
  color: var(--tblr-primary);
  border-bottom-color: rgba(var(--tblr-primary-rgb), 0.3);
}
.payment-marketplace > .nav-tabs .nav-link.active {
  color: var(--tblr-primary);
  border-bottom-color: var(--tblr-primary);
  background: transparent;
}
.payment-marketplace > .nav-tabs .nav-link .badge-sm {
  font-size: 0.625rem;
  padding: 0.125rem 0.375rem;
  font-weight: 600;
}

.gateway-grid {
  display: grid;
  gap: var(--tblr-space-3);
}

.gateway-card {
  background: var(--tblr-surface);
  border: 1px solid var(--tblr-border-light);
  border-radius: var(--tblr-radius-lg);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  position: relative;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
}
.gateway-card:hover {
  border-color: var(--tblr-primary);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 0 0 1px var(--tblr-primary);
  transform: translateY(-2px);
}
.gateway-card:hover .gateway-icon {
  background: linear-gradient(135deg, var(--tblr-primary-light) 0%, var(--tblr-primary) 100%);
  color: var(--tblr-primary);
  box-shadow: 0 4px 8px rgba(var(--tblr-primary-rgb), 0.2);
}
.gateway-card.is-configured {
  background: linear-gradient(135deg, rgba(var(--tblr-success-rgb), 0.05) 0%, rgba(var(--tblr-success-rgb), 0.02) 100%);
  border-color: rgba(var(--tblr-success-rgb), 0.3);
}
.gateway-card.is-configured .gateway-icon {
  background: linear-gradient(135deg, var(--tblr-success-light) 0%, var(--tblr-success) 100%);
  color: #ffffff;
}
.gateway-card.is-configured:hover {
  background: linear-gradient(135deg, rgba(var(--tblr-success-rgb), 0.08) 0%, rgba(var(--tblr-success-rgb), 0.04) 100%);
  border-color: var(--tblr-success);
}
.gateway-card.is-custom-gateway {
  background: linear-gradient(135deg, rgba(var(--tblr-primary-rgb), 0.04) 0%, rgba(var(--tblr-primary-rgb), 0.01) 100%);
  border: 2px dashed rgba(var(--tblr-primary-rgb), 0.3);
  position: relative;
  margin-bottom: var(--tblr-space-6);
}
.gateway-card.is-custom-gateway::after {
  content: "";
  position: absolute;
  bottom: calc(-1 * var(--tblr-space-6) / 2);
  left: var(--tblr-space-4);
  right: var(--tblr-space-4);
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--tblr-border) 15%, var(--tblr-border) 85%, transparent 100%);
}
.gateway-card.is-custom-gateway::before {
  content: "";
  position: absolute;
  inset: -2px;
  background: linear-gradient(135deg, var(--tblr-primary), var(--tblr-primary-dark));
  border-radius: var(--tblr-radius-lg);
  opacity: 0;
  z-index: -1;
  transition: opacity 0.2s ease;
}
.gateway-card.is-custom-gateway .gateway-icon {
  background: linear-gradient(135deg, var(--tblr-primary-light) 0%, rgba(var(--tblr-primary-rgb), 0.2) 100%);
  color: var(--tblr-primary);
  border: 2px solid rgba(var(--tblr-primary-rgb), 0.2);
}
.gateway-card.is-custom-gateway:hover {
  background: linear-gradient(135deg, rgba(var(--tblr-primary-rgb), 0.08) 0%, rgba(var(--tblr-primary-rgb), 0.02) 100%);
  border-color: var(--tblr-primary);
  border-style: solid;
}
.gateway-card.is-custom-gateway:hover::before {
  opacity: 0.08;
}
.gateway-card.is-custom-gateway:hover .gateway-icon {
  background: linear-gradient(135deg, var(--tblr-primary) 0%, var(--tblr-primary-dark) 100%);
  color: #ffffff;
  border-color: var(--tblr-primary);
}
.gateway-card .gateway-card-body {
  padding: var(--tblr-space-4);
}
.gateway-card .gateway-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  background: linear-gradient(135deg, var(--tblr-gray-100) 0%, var(--tblr-gray-200) 100%);
  border-radius: var(--tblr-radius-lg);
  color: var(--tblr-text-secondary);
  flex-shrink: 0;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}
.gateway-card h6 {
  font-size: var(--tblr-text-base);
  font-weight: 600;
  color: var(--tblr-text-primary);
  margin-bottom: 0;
  letter-spacing: -0.01em;
}
.gateway-card .text-muted {
  font-size: var(--tblr-text-sm);
  line-height: 1.5;
  color: var(--tblr-text-muted);
}
.gateway-card .btn {
  font-size: var(--tblr-text-sm);
  padding: var(--tblr-space-2) var(--tblr-space-3);
  display: inline-flex;
  align-items: center;
  gap: var(--tblr-space-1);
  font-weight: 500;
  transition: all 0.2s ease;
}
.gateway-card .btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(var(--tblr-primary-rgb), 0.2);
}
.gateway-card .badge-sm {
  font-size: 0.625rem;
  padding: 0.2rem 0.5rem;
  font-weight: 600;
  border-radius: var(--tblr-radius-full);
  letter-spacing: 0.02em;
}

.active-methods-panel h5 {
  font-size: var(--tblr-text-lg);
  font-weight: 600;
  color: var(--tblr-text-primary);
  letter-spacing: -0.01em;
}
.active-methods-panel > .d-flex > .badge {
  font-size: 0.75rem;
  padding: 0.35rem 0.75rem;
  font-weight: 600;
  border-radius: var(--tblr-radius-full);
  background: linear-gradient(135deg, var(--tblr-gray-100) 0%, var(--tblr-gray-200) 100%);
  color: var(--tblr-text-primary);
  border: 1px solid var(--tblr-border-light);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.active-methods-list {
  display: grid;
  gap: var(--tblr-space-3);
}

.active-method-card {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid var(--tblr-border-light);
  border-radius: var(--tblr-radius-lg);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
  background: var(--tblr-surface);
}
.active-method-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(var(--tblr-primary-rgb), 0.1);
  transform: translateY(-2px);
  border-color: rgba(var(--tblr-primary-rgb), 0.2);
}
.active-method-card:hover .payment-method-icon {
  background: linear-gradient(135deg, var(--tblr-primary-light) 0%, rgba(var(--tblr-primary-rgb), 0.15) 100%);
  box-shadow: 0 4px 8px rgba(var(--tblr-primary-rgb), 0.15);
  color: var(--tblr-primary);
}
.active-method-card:hover .btn-outline-secondary {
  border-color: var(--tblr-primary);
  color: var(--tblr-primary);
  background: rgba(var(--tblr-primary-rgb), 0.04);
}
.active-method-card .card-body {
  padding: var(--tblr-space-5);
}
.active-method-card h6 {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--tblr-text-primary);
  margin-bottom: 0;
  letter-spacing: -0.01em;
}
.active-method-card .payment-method-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, var(--tblr-gray-100) 0%, var(--tblr-gray-200) 100%);
  border-radius: var(--tblr-radius-lg);
  color: var(--tblr-text-secondary);
  flex-shrink: 0;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}
.active-method-card .payment-method-icon svg {
  width: 28px;
  height: 28px;
}
.active-method-card .badge {
  font-size: 0.6875rem;
  padding: 0.3rem 0.75rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: var(--tblr-space-1);
  border-radius: var(--tblr-radius-full);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.active-method-card .badge.bg-success {
  background: linear-gradient(135deg, var(--tblr-success) 0%, var(--tblr-success-hover) 100%) !important;
  color: #ffffff;
  box-shadow: 0 2px 4px rgba(var(--tblr-success-rgb), 0.2);
}
.active-method-card .badge.bg-secondary {
  background: linear-gradient(135deg, var(--tblr-gray-400) 0%, var(--tblr-gray-500) 100%) !important;
  color: #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.active-method-card .btn {
  padding: var(--tblr-space-2) var(--tblr-space-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  border-radius: var(--tblr-radius-md);
  min-width: 40px;
  min-height: 40px;
}
.active-method-card .btn:hover {
  transform: translateY(-1px);
}
.active-method-card .btn.btn-outline-secondary {
  border-width: 1.5px;
  font-weight: 500;
}
.active-method-card .btn.btn-outline-secondary svg {
  width: 18px;
  height: 18px;
}

.payment-marketplace .card-header .d-flex {
  width: 100%;
}
.payment-marketplace .card-header .d-flex > div:first-child {
  flex: 1;
}
.payment-marketplace .card-header .d-flex .btn-icon {
  flex-shrink: 0;
}
.payment-marketplace form .form-switch-field + .form-switch-field {
  margin-top: var(--tblr-space-4);
}
.payment-marketplace form .mb-3 + .mb-3 {
  margin-top: var(--tblr-space-3);
}

.payment-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1040;
  animation: marketplace-fade-in 0.2s ease;
  backdrop-filter: blur(2px);
}

.payment-modal {
  position: fixed;
  inset: 0;
  z-index: 1050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--tblr-space-4);
  animation: marketplace-fade-in 0.2s ease;
  overflow-y: auto;
}

.payment-modal-container {
  background: var(--tblr-surface);
  border-radius: var(--tblr-radius-xl);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  width: 100%;
  max-width: 920px;
  max-height: calc(100vh - var(--tblr-space-8));
  display: flex;
  flex-direction: column;
  animation: marketplace-slide-up 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.payment-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--tblr-space-6);
  border-bottom: 1px solid var(--tblr-border);
  flex-shrink: 0;
}

.payment-modal-title {
  font-size: var(--tblr-text-xl);
  font-weight: 600;
  color: var(--tblr-text-primary);
  margin: 0;
}

.payment-modal-close {
  flex-shrink: 0;
  margin-left: var(--tblr-space-4);
}

.payment-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--tblr-space-6);
}
.payment-modal-body > div > .card {
  border: none;
  box-shadow: none;
  background: transparent;
}
.payment-modal-body > div > .card .card-header {
  display: none;
}
.payment-modal-body > div > .card .card-body {
  padding: 0;
}
.payment-modal-body > div > .card .card-footer {
  padding: var(--tblr-space-6) 0 0 0;
  border-top: 1px solid var(--tblr-border);
  margin-top: var(--tblr-space-6);
  background: transparent;
}

@media (max-width: 767.98px) {
  .payment-modal {
    padding: 0;
    align-items: flex-end;
  }
  .payment-modal-container {
    max-width: 100%;
    max-height: 90vh;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    animation: marketplace-slide-up-mobile 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  }
  @keyframes marketplace-slide-up-mobile {
    from {
      transform: translateY(100%);
    }
    to {
      transform: translateY(0);
    }
  }
}
body:has(.payment-modal) {
  overflow: hidden;
}

@media (max-width: 767.98px) {
  .marketplace-panel {
    position: static;
    max-height: none;
    margin-bottom: var(--tblr-space-4);
  }
  .gateway-grid {
    grid-template-columns: 1fr;
  }
  .active-method-card .d-flex {
    flex-direction: column;
    align-items: flex-start !important;
    gap: var(--tblr-space-3);
  }
  .active-method-card .d-flex .btn-group,
  .active-method-card .d-flex .d-flex.gap-2 {
    width: 100%;
  }
  .active-method-card .d-flex .btn-group .btn,
  .active-method-card .d-flex .d-flex.gap-2 .btn {
    flex: 1;
  }
  .payment-marketplace > .nav-tabs {
    margin-left: calc(var(--tblr-space-4) * -1);
    margin-right: calc(var(--tblr-space-4) * -1);
    padding-left: var(--tblr-space-4);
    padding-right: var(--tblr-space-4);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    scrollbar-width: none;
  }
  .payment-marketplace > .nav-tabs::-webkit-scrollbar {
    display: none;
  }
  .payment-marketplace > .nav-tabs .nav-item {
    flex-shrink: 0;
  }
}
@media print {
  .payment-marketplace .nav-tabs,
  .payment-marketplace .marketplace-panel,
  .payment-marketplace .btn {
    display: none !important;
  }
  .payment-marketplace .active-method-card {
    break-inside: avoid;
  }
}
.gateway-group {
  margin-bottom: var(--tblr-space-4);
}
.gateway-group .gateway-group-header h6 {
  letter-spacing: 0.04em;
}
.gateway-group .is-custom-gateway {
  margin-bottom: var(--tblr-space-3);
}
.gateway-group .is-custom-gateway::after {
  display: none;
}

.gateway-group--more {
  border-top: 1px solid var(--tblr-border-light);
  padding-top: var(--tblr-space-3);
}
.gateway-group--more > summary {
  cursor: pointer;
  list-style: none;
}
.gateway-group--more > summary::-webkit-details-marker {
  display: none;
}
.gateway-group--more > summary:hover h6 {
  color: var(--tblr-primary);
}

.payment-gateway-about .alert-title {
  margin-bottom: var(--tblr-space-1);
}
.payment-gateway-about .payment-gateway-compare summary {
  cursor: pointer;
  list-style: none;
}
.payment-gateway-about .payment-gateway-compare summary::-webkit-details-marker {
  display: none;
}

/**
 * Notification Marketplace Styles
 * Notification-specific styles. Shared marketplace styles are in components/_marketplace.scss.
 */
.notification-marketplace {
  padding-bottom: var(--tblr-space-8);
}

.notification-marketplace > .nav-tabs {
  border-bottom: 1px solid var(--tblr-border);
}
.notification-marketplace > .nav-tabs .nav-link {
  padding: var(--tblr-space-3) var(--tblr-space-4);
  font-size: var(--tblr-text-sm);
  font-weight: 500;
  color: var(--tblr-text-secondary);
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: transparent;
  display: flex;
  align-items: center;
  gap: var(--tblr-space-2);
  transition: var(--tblr-transition-colors);
}
.notification-marketplace > .nav-tabs .nav-link:hover {
  color: var(--tblr-primary);
  border-bottom-color: rgba(var(--tblr-primary-rgb), 0.3);
}
.notification-marketplace > .nav-tabs .nav-link.active {
  color: var(--tblr-primary);
  border-bottom-color: var(--tblr-primary);
  background: transparent;
}
.notification-marketplace > .nav-tabs .nav-link .badge-sm {
  font-size: 0.625rem;
  padding: 0.125rem 0.375rem;
  font-weight: 600;
}

.marketplace-tabs {
  border-bottom: 2px solid var(--tblr-border);
  margin-bottom: 0;
}
.marketplace-tabs .nav-item {
  flex: 1;
}
.marketplace-tabs .nav-link {
  border: none;
  border-bottom: 3px solid transparent;
  color: var(--tblr-text-secondary);
  font-weight: 600;
  padding: var(--tblr-space-3) var(--tblr-space-4);
  background: transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--tblr-space-2);
  font-size: var(--tblr-text-sm);
}
.marketplace-tabs .nav-link .nav-link-icon {
  display: flex;
  align-items: center;
}
.marketplace-tabs .nav-link:hover:not(.active) {
  color: var(--tblr-primary-hover);
  background: rgba(var(--tblr-primary-rgb), 0.05);
}
.marketplace-tabs .nav-link.active {
  color: var(--tblr-primary);
  border-bottom-color: var(--tblr-primary);
  background: transparent;
}

.integration-section-header {
  display: flex;
  align-items: center;
  gap: var(--tblr-space-2);
  font-size: var(--tblr-text-sm);
  font-weight: 600;
  color: var(--tblr-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--tblr-space-3);
  padding-bottom: var(--tblr-space-2);
  border-bottom: 1px solid var(--tblr-border-light);
}

.integration-section {
  margin-bottom: var(--tblr-space-6);
}
.integration-section:last-child {
  margin-bottom: 0;
}

.integration-cards-grid {
  display: grid;
  gap: var(--tblr-space-4);
  grid-template-columns: 1fr;
}
@media (min-width: 992px) {
  .integration-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.integration-card {
  background: var(--tblr-surface);
  border: 1.5px solid var(--tblr-border-light);
  border-radius: var(--tblr-radius-lg);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  height: 100%;
  display: flex;
  flex-direction: column;
}
.integration-card:hover {
  border-color: var(--tblr-primary);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
  transform: translateY(-4px);
}
.integration-card:hover .integration-card-icon {
  background: linear-gradient(135deg, var(--tblr-primary-light), rgba(var(--tblr-primary-rgb), 0.2));
  color: var(--tblr-primary);
  transform: scale(1.05);
}
.integration-card:hover .btn {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(var(--tblr-primary-rgb), 0.25);
}
.integration-card.is-configured {
  background: linear-gradient(135deg, rgba(var(--tblr-success-rgb), 0.03), rgba(var(--tblr-success-rgb), 0.01));
  border-color: rgba(var(--tblr-success-rgb), 0.25);
}
.integration-card.is-configured .integration-card-icon {
  background: linear-gradient(135deg, var(--tblr-success-light), var(--tblr-success));
  color: #ffffff;
}
.integration-card.is-configured:hover {
  background: linear-gradient(135deg, rgba(var(--tblr-success-rgb), 0.05), rgba(var(--tblr-success-rgb), 0.02));
  border-color: var(--tblr-success);
}
.integration-card .integration-card-body {
  padding: var(--tblr-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--tblr-space-3);
  height: 100%;
}
.integration-card .integration-card-icon {
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, var(--tblr-gray-100), var(--tblr-gray-200));
  border-radius: var(--tblr-radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  transition: all 0.25s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}
.integration-card .integration-card-icon svg {
  width: 32px;
  height: 32px;
}
.integration-card .integration-card-content {
  flex: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--tblr-space-2);
}
.integration-card .integration-card-title {
  font-size: var(--tblr-text-base);
  font-weight: 600;
  color: var(--tblr-text-primary);
  margin-bottom: 0;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--tblr-space-2);
}
.integration-card .integration-card-description {
  font-size: var(--tblr-text-sm);
  color: var(--tblr-text-muted);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.integration-card .integration-card-action {
  margin-top: auto;
}
.integration-card .integration-card-action .btn {
  font-size: var(--tblr-text-sm);
  padding: var(--tblr-space-2) var(--tblr-space-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--tblr-space-1);
  font-weight: 500;
  transition: all 0.2s ease;
  width: 100%;
}

.configured-integrations-panel h5 {
  font-size: var(--tblr-text-lg);
  font-weight: 600;
  color: var(--tblr-text-primary);
  letter-spacing: -0.01em;
}
.configured-integrations-panel > .d-flex > .badge {
  font-size: 0.75rem;
  padding: 0.35rem 0.75rem;
  font-weight: 600;
  border-radius: var(--tblr-radius-full);
  background: linear-gradient(135deg, var(--tblr-gray-100) 0%, var(--tblr-gray-200) 100%);
  color: var(--tblr-text-primary);
  border: 1px solid var(--tblr-border-light);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.configured-integrations-list {
  display: grid;
  gap: var(--tblr-space-3);
}

.configured-integration-card {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid var(--tblr-border-light);
  border-radius: var(--tblr-radius-lg);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
  background: var(--tblr-surface);
}
.configured-integration-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(var(--tblr-primary-rgb), 0.1);
  transform: translateY(-2px);
  border-color: rgba(var(--tblr-primary-rgb), 0.2);
}
.configured-integration-card:hover .integration-method-icon {
  background: linear-gradient(135deg, var(--tblr-primary-light) 0%, rgba(var(--tblr-primary-rgb), 0.15) 100%);
  box-shadow: 0 4px 8px rgba(var(--tblr-primary-rgb), 0.15);
  color: var(--tblr-primary);
}
.configured-integration-card:hover .btn-outline-secondary {
  border-color: var(--tblr-primary);
  color: var(--tblr-primary);
  background: rgba(var(--tblr-primary-rgb), 0.04);
}
.configured-integration-card .card-body {
  padding: var(--tblr-space-5);
}
.configured-integration-card h6 {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--tblr-text-primary);
  margin-bottom: 0;
  letter-spacing: -0.01em;
}
.configured-integration-card .integration-method-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, var(--tblr-gray-100) 0%, var(--tblr-gray-200) 100%);
  border-radius: var(--tblr-radius-lg);
  color: var(--tblr-text-secondary);
  flex-shrink: 0;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}
.configured-integration-card .integration-method-icon svg {
  width: 28px;
  height: 28px;
}
.configured-integration-card .badge {
  font-size: 0.6875rem;
  padding: 0.3rem 0.75rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: var(--tblr-space-1);
  border-radius: var(--tblr-radius-full);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.configured-integration-card .btn {
  padding: var(--tblr-space-2) var(--tblr-space-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  border-radius: var(--tblr-radius-md);
  min-width: 40px;
  min-height: 40px;
}
.configured-integration-card .btn:hover {
  transform: translateY(-1px);
}
.configured-integration-card .btn.btn-outline-secondary {
  border-width: 1.5px;
  font-weight: 500;
}
.configured-integration-card .btn.btn-outline-secondary svg {
  width: 18px;
  height: 18px;
}

.notification-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1040;
  animation: marketplace-fade-in 0.2s ease;
  backdrop-filter: blur(2px);
}

.notification-modal {
  position: fixed;
  inset: 0;
  z-index: 1050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--tblr-space-4);
  animation: marketplace-fade-in 0.2s ease;
  overflow-y: auto;
}

.notification-modal-container {
  background: var(--tblr-surface);
  border-radius: var(--tblr-radius-xl);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  width: 100%;
  max-width: 800px;
  max-height: calc(100vh - var(--tblr-space-8));
  display: flex;
  flex-direction: column;
  animation: marketplace-slide-up 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.notification-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--tblr-space-6);
  border-bottom: 1px solid var(--tblr-border);
  flex-shrink: 0;
}

.notification-modal-title {
  font-size: var(--tblr-text-xl);
  font-weight: 600;
  color: var(--tblr-text-primary);
  margin: 0;
}

.notification-modal-close {
  flex-shrink: 0;
  margin-left: var(--tblr-space-4);
}

.notification-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--tblr-space-6);
}
.notification-modal-body > div > .card {
  border: none;
  box-shadow: none;
  background: transparent;
}
.notification-modal-body > div > .card .card-header {
  display: none;
}
.notification-modal-body > div > .card .card-body {
  padding: 0;
}
.notification-modal-body > div > .card .card-footer {
  padding: var(--tblr-space-6) 0 0 0;
  border-top: 1px solid var(--tblr-border);
  margin-top: var(--tblr-space-6);
  background: transparent;
}

@media (max-width: 767.98px) {
  .marketplace-panel {
    position: static;
    max-height: none;
    margin-bottom: var(--tblr-space-4);
  }
  .configured-integration-card .d-flex {
    flex-direction: column;
    align-items: flex-start !important;
    gap: var(--tblr-space-3);
  }
  .configured-integration-card .d-flex .btn-group,
  .configured-integration-card .d-flex .d-flex.gap-2 {
    width: 100%;
  }
  .configured-integration-card .d-flex .btn-group .btn,
  .configured-integration-card .d-flex .d-flex.gap-2 .btn {
    flex: 1;
  }
  .notification-marketplace > .nav-tabs {
    margin-left: calc(var(--tblr-space-4) * -1);
    margin-right: calc(var(--tblr-space-4) * -1);
    padding-left: var(--tblr-space-4);
    padding-right: var(--tblr-space-4);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    scrollbar-width: none;
  }
  .notification-marketplace > .nav-tabs::-webkit-scrollbar {
    display: none;
  }
  .notification-marketplace > .nav-tabs .nav-item {
    flex-shrink: 0;
  }
  .notification-modal {
    padding: 0;
    align-items: flex-end;
  }
  .notification-modal-container {
    max-width: 100%;
    max-height: 90vh;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    animation: notification-slide-up-mobile 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  }
  @keyframes notification-slide-up-mobile {
    from {
      transform: translateY(100%);
    }
    to {
      transform: translateY(0);
    }
  }
}
body:has(.notification-modal) {
  overflow: hidden;
}

@media print {
  .notification-marketplace .nav-tabs,
  .notification-marketplace .marketplace-panel,
  .notification-marketplace .btn {
    display: none !important;
  }
  .notification-marketplace .configured-integration-card {
    break-inside: avoid;
  }
}
/* .nav-link.active {
    background-color: #eef2ff;
    color: #4f46e5;
    border-radius: 8px;
    font-weight: 600;
} */