/*
 * MTA Custom Styles for XLC DataRoom
 * These styles are separate from theme to survive theme updates
 * Last updated: 2025-12-23
 */

/* ==========================================================================
   Accordion Chevron Rotation
   Theme's Tailwind arbitrary variants not compiled, so we add manually
   ========================================================================== */

.ac.is-active .ac-chevron {
  transform: rotate(90deg);
}

/* ==========================================================================
   Font Utilities (not in pre-compiled theme)
   ========================================================================== */

.font-mono {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

/* ==========================================================================
   Additional Tailwind Utilities (not in LineOne's pre-compiled theme)
   Width fractions - add more as needed
   ========================================================================== */

/* Halves */
.w-1\/2 { width: 50%; }

/* Thirds */
.w-1\/3 { width: 33.333333%; }
.w-2\/3 { width: 66.666667%; }

/* Quarters */
.w-1\/4 { width: 25%; }
.w-3\/4 { width: 75%; }

/* Fifths */
.w-1\/5 { width: 20%; }
.w-2\/5 { width: 40%; }
.w-3\/5 { width: 60%; }
.w-4\/5 { width: 80%; }

/* Max-width utilities */
.max-w-xl { max-width: 36rem; /* 576px */ }
.max-w-2xl { max-width: 42rem; /* 672px */ }
.max-w-3xl { max-width: 48rem; /* 768px */ }

/* Background colors not in theme */
.bg-slate-400 { background-color: rgb(148 163 184); }
.bg-secondary { background-color: rgb(139 92 246); } /* violet-500 */

/* ==========================================================================
   XLC Brand Colors
   ========================================================================== */

/* Light Mode */
:root {
  --color-primary: #71CCB9;        /* XLC signature teal/turquoise */
  --color-primary-focus: #5fb3a3;  /* Darker shade for hover/focus states */
  --color-badge-opacity: 0.35;     /* 35% opacity for color badges in light mode */
  --color-error: #ef4444;          /* Red-500 for error/danger states */
  --color-error-focus: #dc2626;    /* Red-600 for hover/focus states */
}

/* Dark Mode */
:where(.dark, .dark *) {
  --color-accent-light: #8ED9CA;   /* Lighter teal for dark mode */
  --color-accent: #71CCB9;         /* XLC teal for dark mode */
  --color-accent-focus: #5fb3a3;   /* Darker shade for hover/focus states */
  --color-primary: #71CCB9;
  --color-primary-focus: #5fb3a3;
  --color-badge-opacity: 0.15;     /* 15% opacity for color badges in dark mode */
  --color-error: #ef4444;          /* Red-500 for error/danger states */
  --color-error-focus: #dc2626;    /* Red-600 for hover/focus states */
}

/* ==========================================================================
   Error/Danger Button Colors (override theme's orange error)
   ========================================================================== */

.bg-error {
  background-color: #ef4444 !important; /* Red-500 */
}

.hover\:bg-error-focus:hover,
.focus\:bg-error-focus:focus,
.active\:bg-error-focus\/90:active {
  background-color: #dc2626 !important; /* Red-600 */
}

/* ==========================================================================
   Dark Mode Switchers (Logo & Icons)
   ========================================================================== */

.logo-light { display: block; }
.logo-dark { display: none; }
:where(.dark, .dark *) .logo-light { display: none; }
:where(.dark, .dark *) .logo-dark { display: block; }

.icon-light { display: block; }
.icon-dark { display: none; }
:where(.dark, .dark *) .icon-light { display: none; }
:where(.dark, .dark *) .icon-dark { display: block; }

/* ==========================================================================
   Section Header Color Options (for testing)
   ========================================================================== */

/* Option 1: Neutral Slate */
.section-header-slate {
  color: var(--color-slate-500);
}
:where(.dark, .dark *) .section-header-slate {
  color: var(--color-slate-300);
}

/* Section header - Blue (fits XLC palette) - APPROVED */
.section-header,
.section-header-indigo-light {
  color: #2d5a87; /* Medium navy - visible as blue */
}
:where(.dark, .dark *) .section-header,
:where(.dark, .dark *) .section-header-indigo-light {
  color: #7db4d8; /* Muted for dark mode */
}

/* Option 2b: Indigo (medium) */
.section-header-indigo {
  color: var(--color-indigo-500);
}
:where(.dark, .dark *) .section-header-indigo {
  color: var(--color-indigo-400);
}

/* Option 3: Purple/Violet */
.section-header-purple {
  color: var(--color-purple-600);
}
:where(.dark, .dark *) .section-header-purple {
  color: var(--color-purple-300);
}

/* Option 4: Rose/Pink */
.section-header-rose {
  color: var(--color-rose-500);
}
:where(.dark, .dark *) .section-header-rose {
  color: var(--color-pink-300);
}

/* Option 5: Secondary (Magenta) */
.section-header-secondary {
  color: var(--color-secondary);
}
:where(.dark, .dark *) .section-header-secondary {
  color: var(--color-secondary-light);
}

/* ==========================================================================
   GridJS Table Styling
   ========================================================================== */

.gridjs-table {
  text-align: left;
}

.gridjs-th {
  font-size: 0.75rem;
  font-weight: 600;
}

.gridjs-th-content {
  font-size: 0.75rem;
}

/* GridJS Column Alignment - applied via data-column-id */
/* Right-aligned columns (counts, numbers) */
th.gridjs-th[data-column-id$="_count"],
td.gridjs-td[data-column-id$="_count"] {
  text-align: right;
}

th.gridjs-th[data-column-id$="_count"] .gridjs-th-content {
  justify-content: flex-end;
}

/* Center-aligned columns (booleans like is_*) */
th.gridjs-th[data-column-id^="is_"],
td.gridjs-td[data-column-id^="is_"] {
  text-align: center;
}

th.gridjs-th[data-column-id^="is_"] .gridjs-th-content {
  justify-content: center;
}

/* Center-aligned columns (status badges, position) */
th.gridjs-th[data-column-id="status"],
td.gridjs-td[data-column-id="status"],
th.gridjs-th[data-column-id="position"],
td.gridjs-td[data-column-id="position"] {
  text-align: center !important;
}

th.gridjs-th[data-column-id="status"] .gridjs-th-content,
th.gridjs-th[data-column-id="position"] .gridjs-th-content {
  justify-content: center !important;
}

/* Center-aligned actions column */
.gridjs-table th.gridjs-th[data-column-id="actions"],
.gridjs-table td.gridjs-td[data-column-id="actions"],
th[data-column-id="actions"],
td[data-column-id="actions"] {
  text-align: center !important;
}

.gridjs-table th.gridjs-th[data-column-id="actions"] .gridjs-th-content,
th[data-column-id="actions"] .gridjs-th-content,
[data-column-id="actions"] .gridjs-th-content {
  justify-content: center !important;
  width: 100%;
}

/* Last column in grid is typically actions - center aligned */
.gridjs-thead th.gridjs-th:last-child .gridjs-th-content {
  justify-content: center !important;
}

.gridjs-tbody td.gridjs-td:last-child {
  text-align: center !important;
}

/* GridJS Footer / Page Size Selector */
.gridjs-footer {
  padding: 0;
  border-top: 1px solid #e2e8f0;
  background-color: #f8fafc;
}

:where(.dark, .dark *) .gridjs-footer {
  border-top-color: #384766;
  background-color: #1e293b;
}

.gridjs-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}

.gridjs-page-size-selector {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
}

.gridjs-page-size-selector select {
  padding: 0.25rem 1.75rem 0.25rem 0.5rem;
  font-size: 0.875rem;
  border-radius: 0.375rem;
  border: 1px solid #cbd5e1;
  background-color: transparent;
  color: inherit;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
  background-position: right 0.25rem center;
  background-repeat: no-repeat;
  background-size: 1.25rem 1.25rem;
}

.gridjs-page-size-selector select:hover {
  border-color: #94a3b8;
}

.gridjs-page-size-selector select:focus {
  outline: none;
  border-color: var(--color-primary, #71CCB9);
  box-shadow: 0 0 0 1px var(--color-primary, #71CCB9);
}

:where(.dark, .dark *) .gridjs-page-size-selector select {
  border-color: #475569;
}

:where(.dark, .dark *) .gridjs-page-size-selector select:hover {
  border-color: #64748b;
}

/* GridJS Action Tooltips (CSS-only) */
.gridjs-td [data-tooltip] {
  position: relative;
}

.gridjs-td [data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  padding: 0.375rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  color: #fff;
  background-color: #26334d;
  border-radius: 0.375rem;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.35s ease-out, transform 0.35s ease-out, visibility 0.35s;
  z-index: 10004;
}

.gridjs-td [data-tooltip]::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #26334d;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.35s ease-out, transform 0.35s ease-out, visibility 0.35s;
  z-index: 10005;
}

.gridjs-td [data-tooltip]:hover::before,
.gridjs-td [data-tooltip]:hover::after {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

:where(.dark, .dark *) .gridjs-td [data-tooltip]::after {
  background-color: #384766;
}

:where(.dark, .dark *) .gridjs-td [data-tooltip]::before {
  border-top-color: #384766;
}

/* ==========================================================================
   Stacked List (for hierarchical items in grid cells)
   ========================================================================== */

.stacked-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.125rem 0;
}

.stacked-list-item {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  line-height: 1.25;
  color: #475569;
  transition: color 0.15s ease;
}

.stacked-list-item:hover {
  color: #1e293b;
}

.stacked-list-caret {
  width: 0.375rem;
  height: 0.625rem;
  flex-shrink: 0;
  color: var(--color-primary);
  opacity: 0.6;
}

:where(.dark, .dark *) .stacked-list-item {
  color: #94a3b8;
}

:where(.dark, .dark *) .stacked-list-item:hover {
  color: #e2e8f0;
}

:where(.dark, .dark *) .stacked-list-caret {
  color: var(--color-accent);
  opacity: 0.7;
}

/* ==========================================================================
   Dynamic Color Badges (for category colors)
   Uses CSS variables to apply theme-aware opacity and text color
   ========================================================================== */

/* Light mode: use darkened text for better contrast with 35% bg */
.color-badge-dynamic {
  background-color: rgba(var(--badge-r), var(--badge-g), var(--badge-b), var(--color-badge-opacity)) !important;
  color: var(--badge-color-dark) !important;
}

/* Dark mode: use original color (good contrast with 15% bg) */
:where(.dark, .dark *) .color-badge-dynamic {
  color: var(--badge-color) !important;
}

/* ==========================================================================
   Tom Select Grid Filters (multiple select in table headers)
   ========================================================================== */

/* Container styling */
.card .ts-wrapper.multi {
  min-width: 200px;
}

.card .ts-wrapper.multi .ts-control {
  min-height: 38px;
  padding: 0.5rem 0.625rem;
  font-size: 0.875rem;
  border-radius: 0.5rem;
  cursor: pointer;
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  align-items: center;
}

/* Selected items as compact pills - use darker color for better text contrast */
.card .ts-wrapper.multi .ts-control > .item {
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  border-radius: 0.375rem;
  background-color: rgba(95, 179, 163, 0.8); /* primary-focus #5fb3a3 at 80% opacity */
  color: white;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin: 0;
  font-weight: 500;
}

:where(.dark, .dark *) .card .ts-wrapper.multi .ts-control > .item {
  background-color: var(--color-accent-focus); /* full opacity in dark mode */
}

/* Remove button styling */
.card .ts-wrapper.multi .ts-control > .item .remove {
  font-size: 0.875rem;
  line-height: 1;
  margin-left: 0.125rem;
  opacity: 0.7;
}

.card .ts-wrapper.multi .ts-control > .item .remove:hover {
  opacity: 1;
}

/* Placeholder text */
.card .ts-wrapper.multi .ts-control > input::placeholder {
  color: #94a3b8;
  font-size: 0.875rem;
}

:where(.dark, .dark *) .card .ts-wrapper.multi .ts-control > input::placeholder {
  color: #64748b;
}

/* Hide cursor in multi-select filter (non-searchable) */
.card .ts-wrapper.multi:not(.plugin-dropdown_input) .ts-control > input {
  caret-color: transparent;
}

/* ==========================================================================
   Tom Select Validation States
   ========================================================================== */

.ts-wrapper.has-error .ts-control,
select.has-error + .ts-wrapper .ts-control,
select.is-invalid + .ts-wrapper .ts-control {
  border-color: rgb(255, 85, 85) !important;
}

select.is-valid + .ts-wrapper .ts-control {
  border-color: rgb(16, 185, 129) !important;
}

/* ==========================================================================
   Just-validate Tooltip Styling
   ========================================================================== */

/* Tooltip-style error message - positioned above the input field */
.just-validate-error-label {
  position: absolute !important;
  top: 1.75rem !important;
  right: 6px !important;
  transform: translateY(-100%) !important;
  margin-top: -12px !important;
  padding: 0.375rem 0.625rem !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  color: #fff !important;
  background-color: rgba(239, 68, 68, 0.9) !important;
  border-radius: 0.375rem !important;
  white-space: nowrap !important;
  z-index: 50 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
}

/* Arrow pointing down */
.just-validate-error-label::after {
  content: '' !important;
  position: absolute !important;
  bottom: -6px !important;
  right: 12px !important;
  border-left: 6px solid transparent !important;
  border-right: 6px solid transparent !important;
  border-top: 6px solid rgba(239, 68, 68, 0.9) !important;
}

/* ==========================================================================
   Form Validation States
   ========================================================================== */

/* Frontend validation (Just-validate) */
.is-invalid input,
.is-invalid select,
.is-invalid textarea,
input.is-invalid,
select.is-invalid,
textarea.is-invalid {
  border-color: rgb(255, 85, 85) !important;
}

.is-valid input,
.is-valid select,
.is-valid textarea,
input.is-valid,
select.is-valid,
textarea.is-valid {
  border-color: rgb(16, 185, 129) !important;
}

/* Backend validation (SimpleForm) */
.field_with_errors input,
.field_with_errors select,
.field_with_errors textarea,
input.border-error,
select.border-error,
textarea.border-error,
.form-input.border-error,
.form-select.border-error {
  border-color: rgb(255, 85, 85) !important;
}

/* Tom Select with backend errors */
.field_with_errors .ts-wrapper .ts-control,
.field_with_errors + .ts-wrapper .ts-control {
  border-color: rgb(255, 85, 85) !important;
}

/* Field error messages styling */
.field-error-message {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

.field-error-message::before {
  content: "* ";
}

/* ==========================================================================
   Tom Select Optgroup Headers (grouped selects)
   ========================================================================== */

.ts-dropdown .optgroup-header {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
  background-color: #f1f5f9;
  padding: 0.375rem 0.75rem;
  margin-top: 0.25rem;
  border-top: 1px solid #e2e8f0;
}

.ts-dropdown .optgroup:first-child .optgroup-header {
  margin-top: 0;
  border-top: none;
}

.ts-dropdown .optgroup .option {
  padding-left: 1rem;
}

:where(.dark, .dark *) .ts-dropdown .optgroup-header {
  color: #94a3b8;
  background-color: #1e293b;
  border-top-color: #334155;
}

/* ==========================================================================
   Additional Tailwind Utilities (not in pre-built theme)
   Uses theme CSS variables: --spacing: .25rem
   ========================================================================== */

/* Margin utilities */
.ml-2 { margin-left: calc(var(--spacing) * 2); }
.ml-3 { margin-left: calc(var(--spacing) * 3); }
.mb-4 { margin-bottom: calc(var(--spacing) * 4); }
.mb-5 { margin-bottom: calc(var(--spacing) * 5); }
.mb-6 { margin-bottom: calc(var(--spacing) * 6); }
.mt-4 { margin-top: calc(var(--spacing) * 4); }
.mt-6 { margin-top: calc(var(--spacing) * 6); }
.mt-8 { margin-top: calc(var(--spacing) * 8); }
.my-4 { margin-block: calc(var(--spacing) * 4); }
.my-6 { margin-block: calc(var(--spacing) * 6); }
.mx-3 { margin-inline: calc(var(--spacing) * 3); }
.mx-4 { margin-inline: calc(var(--spacing) * 4); }

/* Gap utilities */
.gap-0\.5 { gap: calc(var(--spacing) * 0.5); }
.gap-1 { gap: calc(var(--spacing) * 1); }
.gap-1\.5 { gap: calc(var(--spacing) * 1.5); }
.gap-2 { gap: calc(var(--spacing) * 2); }
.gap-3 { gap: calc(var(--spacing) * 3); }

/* Responsive margin variants */
@media (min-width: 40rem) {
  .sm\:mb-4 { margin-bottom: calc(var(--spacing) * 4); }
  .sm\:mt-4 { margin-top: calc(var(--spacing) * 4); }
}

@media (min-width: 64rem) {
  .lg\:mb-4 { margin-bottom: calc(var(--spacing) * 4); }
  .lg\:mt-4 { margin-top: calc(var(--spacing) * 4); }
}

/* ==========================================================================
   Customer Header Switcher (Tom Select in header bar)
   Refined label + value pattern for customer context switching
   ========================================================================== */

/* Container - header customer switcher (hidden on mobile via HTML) */
.customer-switcher {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.375rem 0.875rem;
  border-radius: 0.5rem;
  background: linear-gradient(135deg, rgba(241, 245, 249, 0.8) 0%, rgba(226, 232, 240, 0.6) 100%);
  border: 1px solid rgba(203, 213, 225, 0.5);
  transition: all 0.2s ease;
  position: relative;
}

.customer-switcher:hover {
  background: linear-gradient(135deg, rgba(241, 245, 249, 1) 0%, rgba(226, 232, 240, 0.8) 100%);
  border-color: rgba(148, 163, 184, 0.5);
}

:where(.dark, .dark *) .customer-switcher {
  background: linear-gradient(135deg, rgba(56, 71, 102, 0.6) 0%, rgba(38, 51, 77, 0.8) 100%);
  border-color: rgba(105, 122, 155, 0.3);
}

:where(.dark, .dark *) .customer-switcher:hover {
  background: linear-gradient(135deg, rgba(56, 71, 102, 0.8) 0%, rgba(38, 51, 77, 1) 100%);
  border-color: rgba(105, 122, 155, 0.5);
}

/* Label */
.customer-switcher-label {
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #64748b;
  white-space: nowrap;
  line-height: 1;
  padding: 0.125rem 0;
}

:where(.dark, .dark *) .customer-switcher-label {
  color: #94a3b8;
}

/* Static value (single customer) */
.customer-switcher-value {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

:where(.dark, .dark *) .customer-switcher-value {
  color: #f1f5f9;
}

/* Tom Select wrapper */
.customer-header-select + .ts-wrapper {
  min-width: 200px;
  max-width: 320px;
  position: relative;
}

/* Control (trigger) - clean, borderless */
.customer-header-select + .ts-wrapper .ts-control {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  min-height: auto !important;
  cursor: pointer;
  display: flex;
  align-items: center;
}

/* Selected item */
.customer-header-select + .ts-wrapper .ts-control > .item {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 240px;
}

:where(.dark, .dark *) .customer-header-select + .ts-wrapper .ts-control > .item {
  color: #f1f5f9;
}

/* Hide input */
.customer-header-select + .ts-wrapper .ts-control > input {
  display: none !important;
}

/* Dropdown caret */
.customer-header-select + .ts-wrapper .ts-control::after {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 0.5rem;
  flex-shrink: 0;
  border-left: 3.5px solid transparent;
  border-right: 3.5px solid transparent;
  border-top: 4px solid currentColor;
  opacity: 0.4;
  transition: opacity 0.15s ease, transform 0.2s ease;
}

.customer-header-select + .ts-wrapper.dropdown-active .ts-control::after {
  transform: rotate(180deg);
  opacity: 0.6;
}

/* Dropdown menu */
.customer-switcher .ts-dropdown {
  border-radius: 0.625rem;
  border: 1px solid #e2e8f0;
  box-shadow:
    0 10px 25px -5px rgb(0 0 0 / 0.1),
    0 8px 10px -6px rgb(0 0 0 / 0.08);
  margin-top: 0.5rem;
  overflow: hidden;
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  right: 0 !important;
  width: auto !important;
  min-width: 100% !important;
}

:where(.dark, .dark *) .customer-switcher .ts-dropdown {
  background-color: #26334d;
  border-color: #475569;
  box-shadow:
    0 10px 25px -5px rgb(0 0 0 / 0.3),
    0 8px 10px -6px rgb(0 0 0 / 0.2);
}

/* Dropdown content area */
.customer-switcher .ts-dropdown-content {
  padding: 0.375rem;
}

/* Dropdown options */
.customer-switcher .ts-dropdown .option {
  padding: 0.625rem 0.75rem;
  border-radius: 0.375rem;
  margin-bottom: 0.125rem;
  transition: background-color 0.15s ease;
}

.customer-switcher .ts-dropdown .option:last-child {
  margin-bottom: 0;
}

.customer-switcher .ts-dropdown .option:hover,
.customer-switcher .ts-dropdown .option.active {
  background-color: #f1f5f9;
}

:where(.dark, .dark *) .customer-switcher .ts-dropdown .option:hover,
:where(.dark, .dark *) .customer-switcher .ts-dropdown .option.active {
  background-color: #384766;
}

/* Selected option indicator */
.customer-switcher .ts-dropdown .option[data-selectable].selected {
  background-color: rgba(113, 204, 185, 0.1);
  position: relative;
}

.customer-switcher .ts-dropdown .option[data-selectable].selected::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 60%;
  background-color: var(--color-primary, #71CCB9);
  border-radius: 0 2px 2px 0;
}

/* Custom option layout */
.customer-option {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.customer-option-name {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #1e293b;
}

:where(.dark, .dark *) .customer-option-name {
  color: #f1f5f9;
}

/* Badges container */
.customer-option-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: 0.25rem;
}

/* Badge style */
.customer-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.375rem;
  font-size: 0.5625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #475569;
  background-color: rgba(148, 163, 184, 0.15);
  border-radius: 0.25rem;
}

:where(.dark, .dark *) .customer-badge {
  color: #cbd5e1;
  background-color: rgba(148, 163, 184, 0.2);
}

/* Selected item name */
.customer-item-name {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #1e293b;
}

:where(.dark, .dark *) .customer-item-name {
  color: #f1f5f9;
}

/* ==========================================================================
   Mono Badge (for RUT, emails, codes)
   Smaller font with monospace and subtle color
   ========================================================================== */

.badge-mono {
  display: inline-block;
  padding: 0.125rem 0.375rem;
  font-size: 0.6875rem; /* 11px */
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-weight: 500;
  line-height: 1.4;
  color: #475569;
  background-color: rgba(113, 204, 185, 0.15); /* primary with opacity */
  border-radius: 0.25rem;
}

:where(.dark, .dark *) .badge-mono {
  color: #94a3b8;
  background-color: rgba(113, 204, 185, 0.2);
}

/* ==========================================================================
   Primary/Accent Background Opacity Variants (not in pre-compiled theme)
   ========================================================================== */

.bg-primary\/20 {
  background-color: rgba(113, 204, 185, 0.2);
}

:where(.dark, .dark *) .dark\:bg-accent\/20 {
  background-color: rgba(113, 204, 185, 0.2);
}

/* ==========================================================================
   Timeline Status Colors (with opacity)
   Used in communication workflow timeline for visual distinction
   ========================================================================== */

/* Warning (testing status) */
.bg-warning\/5 { background-color: rgba(251, 191, 36, 0.05); }
.bg-warning\/20 { background-color: rgba(251, 191, 36, 0.2); }
.border-warning\/20 { border-color: rgba(251, 191, 36, 0.2); }
.border-warning\/30 { border-color: rgba(251, 191, 36, 0.3); }

/* Info (approved status) */
.bg-info\/5 { background-color: rgba(14, 165, 233, 0.05); }
.border-info\/20 { border-color: rgba(14, 165, 233, 0.2); }

/* Primary (batch created status) */
.bg-primary\/5 { background-color: rgba(113, 204, 185, 0.05); }
.border-primary\/20 { border-color: rgba(113, 204, 185, 0.2); }

/* Success (sent status) */
.bg-success\/5 { background-color: rgba(16, 185, 129, 0.05); }
.border-success\/20 { border-color: rgba(16, 185, 129, 0.2); }

/* Dark mode accent variants */
:where(.dark, .dark *) .dark\:bg-accent\/10 {
  background-color: rgba(113, 204, 185, 0.1);
}
:where(.dark, .dark *) .dark\:border-accent\/20 {
  border-color: rgba(113, 204, 185, 0.2);
}

/* Ring utilities for timeline dots */
.ring-4 { box-shadow: 0 0 0 4px var(--tw-ring-color, rgba(255, 255, 255, 1)); }
.ring-white { --tw-ring-color: rgb(255 255 255); }
:where(.dark, .dark *) .dark\:ring-navy-700 { --tw-ring-color: rgb(38 51 77); }

/* ==========================================================================
   Turbo Frame Loading Overlay
   Shows a loading spinner when turbo-frame has aria-busy="true"
   ========================================================================== */

.turbo-frame-loading-overlay {
  display: none;
  position: absolute;
  inset: 0;
  background-color: rgba(255, 255, 255, 0.8);
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  z-index: 10;
}

:where(.dark, .dark *) .turbo-frame-loading-overlay {
  background-color: rgba(30, 41, 59, 0.8);
}

/* Show overlay when sibling turbo-frame is loading */
turbo-frame[aria-busy="true"] + .turbo-frame-loading-overlay {
  display: flex;
}

/* ==========================================================================
   Event Card (for notification batch grid)
   Colored left border based on event type
   ========================================================================== */

.event-card {
  display: flex;
  align-items: stretch;
}

.event-card-border {
  width: 4px;
  flex-shrink: 0;
  border-radius: 9999px;
  align-self: stretch;
}

.event-card-content {
  display: flex;
  flex-direction: column;
  padding-left: 0.75rem;
}

.event-card-label {
  font-weight: 500;
  color: #334155;
}

:where(.dark, .dark *) .event-card-label {
  color: #e2e8f0;
}

.event-card-resource {
  font-size: 0.75rem;
  color: #94a3b8;
}

:where(.dark, .dark *) .event-card-resource {
  color: #64748b;
}

/* ==========================================================================
   Users Stacked (for notification batch grid)
   Shows Created by / Triggered by in stacked format
   ========================================================================== */

.users-stacked {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.users-stacked-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.users-stacked-label {
  font-size: 0.75rem;
  color: #94a3b8;
  width: 4rem;
  flex-shrink: 0;
}

:where(.dark, .dark *) .users-stacked-label {
  color: #64748b;
}

.users-stacked-avatar {
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
}

.users-stacked-name {
  font-size: 0.875rem;
  color: #475569;
}

:where(.dark, .dark *) .users-stacked-name {
  color: #cbd5e1;
}

.users-stacked-empty {
  font-size: 0.75rem;
  color: #94a3b8;
}

/* ==========================================================================
   Grid Columns (not in pre-compiled theme)
   ========================================================================== */

@media (min-width: 64rem) {
  .lg\:grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* ==========================================================================
   Underline Utilities (not in pre-compiled theme)
   ========================================================================== */

.underline-offset-2 {
  text-underline-offset: 2px;
}

.underline-offset-4 {
  text-underline-offset: 4px;
}

.decoration-dotted {
  text-decoration-style: dotted;
}

/* Padding utilities (not in pre-compiled theme) */
.px-1\.5 {
  padding-left: 0.375rem;
  padding-right: 0.375rem;
}

.py-0\.5 {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}

/* ==========================================================================
   Background Colors (not in pre-compiled theme)
   ========================================================================== */

.bg-slate-600 {
  background-color: rgb(71 85 105);
}

.bg-slate-700 {
  background-color: rgb(51 65 85);
}

.bg-slate-800 {
  background-color: rgb(30 41 59);
}

:where(.dark, .dark *) .dark\:bg-navy-600 {
  background-color: rgb(38 51 77);
}

/* ==========================================================================
   Text Colors (not in pre-compiled theme)
   ========================================================================== */

.text-slate-300 {
  color: rgb(203 213 225);
}

:where(.dark, .dark *) .dark\:text-navy-200 {
  color: rgb(174 187 219);
}

/* ==========================================================================
   File Extension Brand Colors (not in pre-compiled theme)
   Brand colors stay consistent in both light and dark modes.
   White text provides good contrast on all these colors.
   ========================================================================== */

/* PDF - Adobe Red */
.bg-red-500 {
  background-color: rgb(239 68 68);
}

/* Word - Microsoft Blue */
.bg-blue-600 {
  background-color: rgb(37 99 235);
}

/* Excel - Microsoft Green */
.bg-green-600 {
  background-color: rgb(22 163 74);
}

/* PowerPoint - Microsoft Orange */
.bg-orange-500 {
  background-color: rgb(249 115 22);
}

/* Images - Purple */
.bg-purple-500 {
  background-color: rgb(168 85 247);
}

/* Archives - Yellow/Gold */
.bg-yellow-600 {
  background-color: rgb(202 138 4);
}

/* Text files - Slate */
.bg-slate-500 {
  background-color: rgb(100 116 139);
}

/* White text for file badges (if not in pre-compiled theme) */
.text-white {
  color: rgb(255 255 255);
}

/* Extra small text (smaller than text-xs) */
.text-2xs {
  font-size: 0.70rem;
  line-height: 1rem;
}

/* Tooltip background - softer color */
.bg-tooltip {
  background-color: rgb(71, 85, 105);
}

:where(.dark, .dark *) .bg-tooltip {
  background-color: rgb(51, 65, 85);
}

/* ==========================================================================
   Line Clamp Utilities (not in pre-compiled theme)
   ========================================================================== */

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

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

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

/* ==========================================================================
   Communication Card Hover Effects
   ========================================================================== */

.card.hover\:shadow-lg:hover {
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

.hover\:-translate-y-0\.5:hover {
  transform: translateY(-0.125rem);
}

/* Pulse animation for unread indicator */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* ==========================================================================
   Ring Utilities (for communication card states)
   ========================================================================== */

.ring-1 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.ring-2 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.ring-primary\/20 {
  --tw-ring-color: rgba(113, 204, 185, 0.2);
}

:where(.dark, .dark *) .dark\:ring-accent\/20 {
  --tw-ring-color: rgba(113, 204, 185, 0.2);
}

/* ==========================================================================
   Additional Background Opacity Variants
   ========================================================================== */

.bg-primary\/10 {
  background-color: rgba(113, 204, 185, 0.1);
}

/* Status badge backgrounds (success, error, warning, info) */
.bg-success\/10 {
  background-color: rgba(16, 185, 129, 0.1);
}

.bg-error\/10 {
  background-color: rgba(239, 68, 68, 0.1);
}

.bg-warning\/10 {
  background-color: rgba(251, 191, 36, 0.1);
}

:where(.dark, .dark *) .dark\:bg-warning\/15 {
  background-color: rgba(251, 191, 36, 0.15);
}

.active\:bg-warning-focus\/90:active {
  background-color: rgba(217, 164, 6, 0.9);
}

.bg-info\/10 {
  background-color: rgba(14, 165, 233, 0.1);
}

/* Border with opacity */
.border-primary\/10 {
  border-color: rgba(113, 204, 185, 0.1);
}

/* Overlay backgrounds (for loading states) */
.bg-slate-900\/20 {
  background-color: rgba(15, 23, 42, 0.2);
}

:where(.dark, .dark *) .dark\:bg-navy-900\/40 {
  background-color: rgba(17, 24, 39, 0.4);
}

:where(.dark, .dark *) .dark\:bg-accent\/15 {
  background-color: rgba(113, 204, 185, 0.15);
}

/* Gradient opacity variants for unread bar */
.from-primary {
  --tw-gradient-from: rgb(113 204 185) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(113 204 185 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.to-primary\/70 {
  --tw-gradient-to: rgba(113, 204, 185, 0.7) var(--tw-gradient-to-position);
}

:where(.dark, .dark *) .dark\:from-accent {
  --tw-gradient-from: rgb(113 204 185) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(113 204 185 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

:where(.dark, .dark *) .dark\:to-accent\/70 {
  --tw-gradient-to: rgba(113, 204, 185, 0.7) var(--tw-gradient-to-position);
}

/* ==========================================================================
   Group Hover Transform
   ========================================================================== */

.group:hover .group-hover\:translate-x-0\.5 {
  transform: translateX(0.125rem);
}

/* ==========================================================================
   Low Opacity Utility (for subtle backgrounds)
   ========================================================================== */

.opacity-3 {
  opacity: 0.03;
}

/* ==========================================================================
   FilePond Styling (matches LineOne theme)
   ========================================================================== */

/* Root container */
.filepond--root {
  font-family: inherit;
  margin-bottom: 0;
}

/* Main panel/drop zone */
.filepond--panel-root {
  background-color: #f8fafc;
  border: 2px dashed #cbd5e1;
  border-radius: 0.5rem;
}

/* Drop label area */
.filepond--drop-label {
  color: #64748b;
  font-size: 0.875rem;
  min-height: 4.5rem;
}

.filepond--drop-label label {
  cursor: pointer;
  padding: 0.5rem;
}

/* "Browse" link styling */
.filepond--label-action {
  color: #71CCB9;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 500;
}

.filepond--label-action:hover {
  color: #5fb3a3;
}

/* File item container */
.filepond--item {
  margin: 0.25rem;
}

/* File item panel */
.filepond--item-panel {
  background-color: #f1f5f9;
  border-radius: 0.5rem;
}

/* File info text */
.filepond--file-info {
  padding-left: 0.5rem;
}

.filepond--file-info-main {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #334155;
}

.filepond--file-info-sub {
  font-size: 0.6875rem;
  color: #64748b;
}

/* Action buttons */
.filepond--file-action-button {
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
}

.filepond--file-action-button:hover {
  background-color: rgba(0, 0, 0, 0.7);
}

/* Progress indicator */
.filepond--progress-indicator {
  color: #71CCB9;
}

.filepond--load-indicator {
  color: #71CCB9;
}

/* Processing complete indicator */
.filepond--processing-complete-indicator {
  color: #71CCB9;
}

/* Remove item button */
[data-filepond-item-state="processing-complete"] .filepond--item-panel {
  background-color: #ecfdf5;
}

/* Error state */
[data-filepond-item-state*="error"] .filepond--item-panel {
  background-color: #fef2f2;
}

/* Idle state border highlight on hover */
.filepond--root:hover .filepond--panel-root {
  border-color: #94a3b8;
}

/* Credits removal (already set but ensure) */
.filepond--credits {
  display: none !important;
}

/* ==========================================================================
   FilePond Dark Mode
   ========================================================================== */

:where(.dark, .dark *) .filepond--panel-root {
  background-color: #26334d;
  border-color: #475569;
}

:where(.dark, .dark *) .filepond--root:hover .filepond--panel-root {
  border-color: #64748b;
}

:where(.dark, .dark *) .filepond--drop-label {
  color: #94a3b8;
}

:where(.dark, .dark *) .filepond--item-panel {
  background-color: #384766;
}

:where(.dark, .dark *) .filepond--file-info-main {
  color: #e2e8f0;
}

:where(.dark, .dark *) .filepond--file-info-sub {
  color: #94a3b8;
}

:where(.dark, .dark *) [data-filepond-item-state="processing-complete"] .filepond--item-panel {
  background-color: #1e3a2f;
}

:where(.dark, .dark *) [data-filepond-item-state*="error"] .filepond--item-panel {
  background-color: #3b1c1c;
}

/* ==========================================================================
   Toast Notifications - Slightly transparent
   ========================================================================== */

.toastify {
  opacity: 0.75;
}

/* ==========================================================================
   Preloader Fade Out Animation
   ========================================================================== */

@keyframes preloader-fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.preloader-fade-out {
  animation: preloader-fade-out 500ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* ==========================================================================
   Resend History Popover
   CSS-only hover popover with timeline layout
   ========================================================================== */

/* Wrapper - establishes hover group */
.resend-popover-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Badge trigger */
.resend-popover-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(14, 165, 233, 0.9);
  background-color: rgba(14, 165, 233, 0.1);
  border-radius: 9999px;
  cursor: default;
  transition: background-color 0.15s ease;
  letter-spacing: 0.01em;
}

.resend-popover-wrap:hover .resend-popover-badge {
  background-color: rgba(14, 165, 233, 0.18);
}

/* Popover panel */
.resend-popover {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  width: 22rem;
  padding: 0;
  background-color: #1e293b;
  border: 1px solid rgba(71, 85, 105, 0.6);
  border-radius: 0.625rem;
  box-shadow:
    0 20px 40px -8px rgba(0, 0, 0, 0.35),
    0 8px 16px -4px rgba(0, 0, 0, 0.2),
    0 0 0 1px rgba(0, 0, 0, 0.05);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  z-index: 50;
  overflow: hidden;
}

.resend-popover-wrap:hover .resend-popover {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* Arrow */
.resend-popover-arrow {
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 10px;
  height: 10px;
  background-color: #1e293b;
  border-right: 1px solid rgba(71, 85, 105, 0.6);
  border-bottom: 1px solid rgba(71, 85, 105, 0.6);
  z-index: 1;
}

/* Header */
.resend-popover-header {
  display: block;
  padding: 0.5rem 0.75rem;
  background-color: rgba(14, 165, 233, 0.08);
  border-bottom: 1px solid rgba(71, 85, 105, 0.4);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: rgba(14, 165, 233, 0.85);
}

/* Header variant — success/green for tracking events */
.resend-popover-header--success {
  background-color: rgba(16, 185, 129, 0.08);
  color: rgba(16, 185, 129, 0.85);
}

/* Timeline container */
.resend-popover-timeline {
  display: flex;
  flex-direction: column;
  padding: 0.5rem 0.75rem;
  gap: 0;
  max-height: 14rem;
  overflow-y: auto;
}

/* Timeline entry */
.resend-popover-entry {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  position: relative;
  padding-bottom: 0.375rem;
}

.resend-popover-entry:last-child {
  padding-bottom: 0;
}

/* Timeline vertical line */
.resend-popover-entry:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 13px;
  bottom: 0;
  width: 1px;
  background-color: rgba(71, 85, 105, 0.5);
}

/* Timeline dot */
.resend-popover-dot {
  width: 7px;
  height: 7px;
  min-width: 7px;
  border-radius: 50%;
  position: relative;
  z-index: 2;
  box-shadow: 0 0 0 2px #1e293b;
}

/* Send dot — green/success */
.resend-popover-dot--send {
  background-color: rgba(16, 185, 129, 0.9);
}

/* Resend dot — info/blue */
.resend-popover-dot--resend {
  background-color: rgba(14, 165, 233, 0.7);
}

/* Entry label (Envío, Reenvío #1, etc.) */
.resend-popover-label {
  font-size: 0.6875rem;
  font-weight: 600;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  color: #cbd5e1;
  line-height: 1;
  white-space: nowrap;
}

/* Single-line row layout */
.resend-popover-row {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  min-width: 0;
  white-space: nowrap;
}

/* Date */
.resend-popover-date {
  font-size: 0.6875rem;
  font-weight: 500;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  color: #e2e8f0;
  line-height: 1;
}

/* Separator dot */
.resend-popover-sep {
  color: #475569;
  font-size: 0.6875rem;
  line-height: 1;
}

/* User name */
.resend-popover-user {
  font-size: 0.6875rem;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  color: #94a3b8;
  line-height: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ==========================================================================
   Resend History Popover - Dark Mode (LineOne navy)
   ========================================================================== */

:where(.dark, .dark *) .resend-popover {
  background-color: #26334d;
  border-color: rgba(105, 122, 155, 0.4);
  box-shadow:
    0 20px 40px -8px rgba(0, 0, 0, 0.5),
    0 8px 16px -4px rgba(0, 0, 0, 0.3);
}

:where(.dark, .dark *) .resend-popover-arrow {
  background-color: #26334d;
  border-right-color: rgba(105, 122, 155, 0.4);
  border-bottom-color: rgba(105, 122, 155, 0.4);
}

:where(.dark, .dark *) .resend-popover-header {
  border-bottom-color: rgba(105, 122, 155, 0.3);
}

:where(.dark, .dark *) .resend-popover-dot {
  box-shadow: 0 0 0 2px #26334d;
}

:where(.dark, .dark *) .resend-popover-entry:not(:last-child)::after {
  background-color: rgba(105, 122, 155, 0.3);
}

/* ==========================================================================
   Document Access Filters
   Polished filter bar with grouped sections and visual hierarchy
   ========================================================================== */

/* Main layout — horizontal on desktop, stacked on mobile */
.da-filters {
  display: flex;
  flex-direction: column;
  gap: 0;
}

@media (min-width: 64rem) {
  .da-filters {
    flex-direction: row;
    align-items: center;
  }
}

/* Period section (left) */
.da-filters-period {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1.25rem;
  border-bottom: 1px solid #e2e8f0;
}

@media (min-width: 64rem) {
  .da-filters-period {
    border-bottom: none;
    border-right: 1px solid #e2e8f0;
    flex-shrink: 0;
  }
}

:where(.dark, .dark *) .da-filters-period {
  border-color: rgba(105, 122, 155, 0.25);
}

.da-filters-period-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  border-radius: 0.5rem;
  background-color: rgba(113, 204, 185, 0.1);
  color: #71CCB9;
}

:where(.dark, .dark *) .da-filters-period-icon {
  background-color: rgba(113, 204, 185, 0.15);
  color: #8ED9CA;
}

/* Pills container */
.da-filters-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

/* Individual pill */
.da-filter-pill {
  cursor: pointer;
}

.da-filter-pill-label {
  display: inline-block;
  padding: 0.375rem 0.875rem;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.25;
  border-radius: 9999px;
  background-color: #f1f5f9;
  color: #64748b;
  transition: all 0.15s ease;
  border: 1px solid transparent;
}

.da-filter-pill-label:hover {
  background-color: #e2e8f0;
  color: #475569;
}

.da-filter-pill input:checked + .da-filter-pill-label {
  background-color: #71CCB9;
  color: #fff;
  border-color: #5fb3a3;
  box-shadow: 0 1px 3px rgba(113, 204, 185, 0.3);
}

:where(.dark, .dark *) .da-filter-pill-label {
  background-color: rgba(56, 71, 102, 0.6);
  color: #94a3b8;
}

:where(.dark, .dark *) .da-filter-pill-label:hover {
  background-color: rgba(56, 71, 102, 0.9);
  color: #cbd5e1;
}

:where(.dark, .dark *) .da-filter-pill input:checked + .da-filter-pill-label {
  background-color: #71CCB9;
  color: #fff;
  border-color: #5fb3a3;
}

/* Dropdowns section (center) */
.da-filters-dropdowns {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1.25rem;
  border-bottom: 1px solid #e2e8f0;
}

@media (min-width: 64rem) {
  .da-filters-dropdowns {
    border-bottom: none;
    border-right: 1px solid #e2e8f0;
    flex-shrink: 0;
  }
}

:where(.dark, .dark *) .da-filters-dropdowns {
  border-color: rgba(105, 122, 155, 0.25);
}

/* Dropdown group — icon + select */
.da-filter-dropdown-group {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  position: relative;
}

.da-filter-dropdown-icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  color: #94a3b8;
}

:where(.dark, .dark *) .da-filter-dropdown-icon {
  color: #64748b;
}

/* Select element */
.da-filter-select {
  padding: 0.375rem 1.75rem 0.375rem 0.5rem;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.25;
  border-radius: 0.5rem;
  border: 1px solid #e2e8f0;
  background-color: #fff;
  color: #334155;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
  background-position: right 0.25rem center;
  background-repeat: no-repeat;
  background-size: 1.25rem 1.25rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.da-filter-select:hover {
  border-color: #cbd5e1;
}

.da-filter-select:focus {
  outline: none;
  border-color: #71CCB9;
  box-shadow: 0 0 0 2px rgba(113, 204, 185, 0.15);
}

:where(.dark, .dark *) .da-filter-select {
  background-color: rgba(38, 51, 77, 0.8);
  border-color: rgba(105, 122, 155, 0.3);
  color: #e2e8f0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%2364748b' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
}

:where(.dark, .dark *) .da-filter-select:hover {
  border-color: rgba(105, 122, 155, 0.5);
}

:where(.dark, .dark *) .da-filter-select:focus {
  border-color: #71CCB9;
  box-shadow: 0 0 0 2px rgba(113, 204, 185, 0.1);
}

/* Date range section (right) */
.da-filters-dates {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1.25rem;
}

@media (min-width: 64rem) {
  .da-filters-dates {
    margin-left: auto;
  }
}

.da-filters-dates-icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  color: #94a3b8;
}

:where(.dark, .dark *) .da-filters-dates-icon {
  color: #64748b;
}

.da-filters-date-inputs {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.da-filter-date-input {
  padding: 0.375rem 0.5rem;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.25;
  border-radius: 0.5rem;
  border: 1px solid #e2e8f0;
  background-color: #fff;
  color: #334155;
  width: 8.5rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.da-filter-date-input:hover {
  border-color: #cbd5e1;
}

.da-filter-date-input:focus {
  outline: none;
  border-color: #71CCB9;
  box-shadow: 0 0 0 2px rgba(113, 204, 185, 0.15);
}

:where(.dark, .dark *) .da-filter-date-input {
  background-color: rgba(38, 51, 77, 0.8);
  border-color: rgba(105, 122, 155, 0.3);
  color: #e2e8f0;
}

:where(.dark, .dark *) .da-filter-date-input:hover {
  border-color: rgba(105, 122, 155, 0.5);
}

:where(.dark, .dark *) .da-filter-date-input:focus {
  border-color: #71CCB9;
  box-shadow: 0 0 0 2px rgba(113, 204, 185, 0.1);
}

/* Date separator dash */
.da-filters-date-sep {
  color: #cbd5e1;
  font-weight: 300;
  font-size: 0.875rem;
  user-select: none;
}

:where(.dark, .dark *) .da-filters-date-sep {
  color: #475569;
}

/* Webkit date input calendar icon color */
.da-filter-date-input::-webkit-calendar-picker-indicator {
  opacity: 0.5;
  cursor: pointer;
}

:where(.dark, .dark *) .da-filter-date-input::-webkit-calendar-picker-indicator {
  filter: invert(0.7);
}

/* Value updated flash animation (stat cards) */
@keyframes da-value-flash {
  0% { opacity: 1; }
  30% { opacity: 0.4; }
  100% { opacity: 1; }
}

.da-value-updated {
  animation: da-value-flash 0.4s ease-out;
}

/* ==========================================================================
   Pending Approvals — Empty State
   ========================================================================== */

.da-empty-approvals {
  padding: 4rem 2rem;
  text-align: center;
}

.da-empty-approvals-inner {
  max-width: 24rem;
  margin: 0 auto;
}

/* Animated check circle */
.da-empty-check {
  position: relative;
  width: 5rem;
  height: 5rem;
  margin: 0 auto 1.5rem;
}

.da-empty-check-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2.5px solid rgba(16, 185, 129, 0.2);
  animation: da-check-ring-draw 0.8s ease-out forwards;
}

.da-empty-check-ring::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: rgba(16, 185, 129, 0.04);
  animation: da-check-bg-fade 0.6s 0.3s ease-out forwards;
  opacity: 0;
}

:where(.dark, .dark *) .da-empty-check-ring {
  border-color: rgba(16, 185, 129, 0.3);
}

:where(.dark, .dark *) .da-empty-check-ring::after {
  background: rgba(16, 185, 129, 0.12);
}

.da-empty-check-icon {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: #10b981;
  opacity: 0;
  transform: scale(0.5);
  animation: da-check-pop 0.4s 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes da-check-ring-draw {
  from { transform: scale(0.8); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

@keyframes da-check-bg-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes da-check-pop {
  from { opacity: 0; transform: scale(0.5); }
  to { opacity: 1; transform: scale(1); }
}

/* Title */
.da-empty-title {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #334155;
  margin-bottom: 0.5rem;
}

:where(.dark, .dark *) .da-empty-title {
  color: #e2e8f0;
}

/* Subtitle */
.da-empty-subtitle {
  font-size: 0.875rem;
  line-height: 1.5;
  color: #94a3b8;
  margin-bottom: 2rem;
}

:where(.dark, .dark *) .da-empty-subtitle {
  color: #64748b;
}

/* Actions */
.da-empty-actions {
  display: flex;
  justify-content: center;
}

.da-empty-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1.25rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #475569;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  transition: all 0.15s ease;
}

.da-empty-btn:hover {
  background: #e2e8f0;
  color: #334155;
  border-color: #cbd5e1;
}

:where(.dark, .dark *) .da-empty-btn {
  color: #cbd5e1;
  background: rgba(30, 41, 59, 0.5);
  border-color: rgba(51, 65, 85, 0.5);
}

:where(.dark, .dark *) .da-empty-btn:hover {
  background: rgba(30, 41, 59, 0.8);
  color: #e2e8f0;
  border-color: rgba(71, 85, 105, 0.6);
}