/* ===================================================================
   TRMLA Platform — Enterprise Brand Base CSS
   TR Brand: #5C7D9C | Single source of truth for all apps

   PURPOSE: Defines universal TR brand standards for platform-wide consistency
   USAGE: Import this file in all app-specific CSS files
   TIER: Enterprise Brand Layer (sits between Foundation and App-Specific)

   DO NOT modify this file without stakeholder approval.
   Changes here affect ALL modules: landing page, admin forms, future apps.
   =================================================================== */

@import url('tailwind.css');

/* ===================================================================
   SECTION 1: BRAND TOKENS
   Primary color, gradients, shadows for TR brand identity
   =================================================================== */
:root {
  /* Primary Brand Colors */
  --brand-primary: #5C7D9C;
  --brand-primary-dark: #4a6580;
  --brand-primary-light: #6e8fb0;
  --brand-primary-rgb: 92, 125, 156;

  /* Gradient System */
  --brand-gradient-start: rgba(92, 125, 156, 0.12);
  --brand-gradient-end: rgba(92, 125, 156, 0.06);
  --brand-gradient-subtle-start: rgba(92, 125, 156, 0.08);
  --brand-gradient-subtle-end: rgba(92, 125, 156, 0.04);

  /* Shadow System (Professional depth) */
  --brand-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  --brand-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  --brand-shadow-lg: 0 6px 16px rgba(0, 0, 0, 0.15);
  --brand-shadow-brand: 0 4px 12px rgba(92, 125, 156, 0.25);
  --brand-shadow-brand-sm: 0 2px 8px rgba(92, 125, 156, 0.3);
  --brand-shadow-brand-lg: 0 6px 16px rgba(92, 125, 156, 0.35);

  /* Border System */
  --brand-border-light: 1px solid rgba(0, 0, 0, 0.08);
  --brand-border-medium: 1px solid rgba(0, 0, 0, 0.15);
  --brand-border-primary: 1px solid rgba(92, 125, 156, 0.25);

  /* State Colors (Semantic) */
  --brand-success: #22c55e;
  --brand-warning: #f59e0b;
  --brand-error: #ef4444;
  --brand-info: #3b82f6;

  /* Typography Scale (Compact Professional) */
  --font-size-xs: 0.75rem;      /* 12px - Labels, captions */
  --font-size-sm: 0.8125rem;    /* 13px - Form inputs, body small */
  --font-size-base: 0.875rem;   /* 14px - Default body */
  --font-size-md: 0.9375rem;    /* 15px - Card titles, buttons */
  --font-size-lg: 1rem;         /* 16px - Headers, descriptions */
  --font-size-xl: 1.125rem;     /* 18px - Section headers */
  --font-size-2xl: 1.25rem;     /* 20px - Page headers */

  /* Spacing Scale (Consistent rhythm) */
  --spacing-xs: 0.25rem;   /* 4px */
  --spacing-sm: 0.5rem;    /* 8px */
  --spacing-md: 0.75rem;   /* 12px */
  --spacing-lg: 1rem;      /* 16px */
  --spacing-xl: 1.5rem;    /* 24px */
  --spacing-2xl: 2rem;     /* 32px */
  --spacing-3xl: 3rem;     /* 48px */

  /* Border Radius Scale */
  --radius-sm: 0.375rem;   /* 6px - Inputs */
  --radius-md: 0.5rem;     /* 8px - Buttons, badges */
  --radius-lg: 0.75rem;    /* 12px - Cards */
  --radius-xl: 1rem;       /* 16px - Sections, hero */

  /* Transition Speeds */
  --transition-fast: 0.15s;
  --transition-base: 0.2s;
  --transition-slow: 0.3s;

  /* Admin shell stacking */
  --z-sticky: 1020;
  --z-messages: 1030;
  --z-navbar-actions: 1100;
  --z-navbar-panels: 1101;

  /* Admin shell geometry — DaisyUI .navbar default height (used to anchor
     the message strip below the navbar and bound the filter drawer height) */
  --trmla-admin-navbar-height: 4rem;
}

/* ===================================================================
   SECTION 2: TYPOGRAPHY SYSTEM
   Ubuntu font family with proper weights and fallbacks
   =================================================================== */

/* Ubuntu Light 300 */
@font-face {
  font-family: 'Ubuntu';
  src: url('../fonts/Ubuntu/Ubuntu-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* Ubuntu Regular 400 */
@font-face {
  font-family: 'Ubuntu';
  src: url('../fonts/Ubuntu/Ubuntu-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Ubuntu Medium 500 */
@font-face {
  font-family: 'Ubuntu';
  src: url('../fonts/Ubuntu/Ubuntu-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* Ubuntu Bold 700 */
@font-face {
  font-family: 'Ubuntu';
  src: url('../fonts/Ubuntu/Ubuntu-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Base Typography Styles */
.enterprise-page {
  font-family: 'Ubuntu', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: var(--font-size-base);
  line-height: 1.5;
  color: rgba(0, 0, 0, 0.87);
  background-color: #f8f9fa;
}

/* ===================================================================
   SECTION 3: BUTTON SYSTEM
   Reusable button styles for consistent interactions
   =================================================================== */

/* Primary Brand Button */
.btn-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  background-color: var(--brand-primary);
  color: #ffffff;
  font-size: var(--font-size-base);
  font-weight: 600;
  padding: 0.625rem 1.25rem;
  border-radius: var(--radius-md);
  border: none;
  text-decoration: none;
  box-shadow: var(--brand-shadow-brand);
  transition: all var(--transition-base) ease;
  cursor: pointer;
}

.btn-brand:hover {
  background-color: var(--brand-primary-dark);
  transform: translateY(-1px);
  box-shadow: var(--brand-shadow-brand-lg);
}

.btn-brand:active {
  transform: translateY(0);
  box-shadow: var(--brand-shadow-brand-sm);
}

.btn-brand:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}

/* Small Brand Button */
.btn-brand-sm {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  background-color: var(--brand-primary);
  color: #ffffff;
  font-size: var(--font-size-sm);
  font-weight: 600;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-md);
  border: none;
  text-decoration: none;
  box-shadow: var(--brand-shadow-brand-sm);
  transition: all var(--transition-base) ease;
  cursor: pointer;
}

.btn-brand-sm:hover {
  background-color: var(--brand-primary-dark);
  transform: translateY(-1px);
  box-shadow: var(--brand-shadow-brand);
}

/* Outline Button */
.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  background-color: transparent;
  color: var(--brand-primary);
  font-size: var(--font-size-base);
  font-weight: 600;
  padding: 0.625rem 1.25rem;
  border-radius: var(--radius-md);
  border: 2px solid var(--brand-primary);
  text-decoration: none;
  transition: all var(--transition-base) ease;
  cursor: pointer;
}

.btn-outline:hover {
  background-color: rgba(92, 125, 156, 0.08);
  transform: translateY(-1px);
}

/* Small Outline Button */
.btn-outline-sm {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  background-color: transparent;
  color: var(--brand-primary);
  font-size: var(--font-size-sm);
  font-weight: 600;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-md);
  border: 2px solid var(--brand-primary);
  text-decoration: none;
  transition: all var(--transition-base) ease;
  cursor: pointer;
}

.btn-outline-sm:hover {
  background-color: rgba(92, 125, 156, 0.08);
  transform: translateY(-1px);
}

/* Success Button */
.btn-success {
  background-color: var(--brand-success);
  color: #ffffff;
  font-size: var(--font-size-base);
  font-weight: 600;
  padding: 0.625rem 1.25rem;
  border-radius: var(--radius-md);
  border: none;
  box-shadow: 0 2px 8px rgba(34, 197, 94, 0.25);
  transition: all var(--transition-base) ease;
  cursor: pointer;
}

.btn-success:hover {
  background-color: #16a34a;
  transform: translateY(-1px);
}

/* ===================================================================
   SECTION 3B: BADGE SYSTEM
   Status badges and chips with brand colors
   =================================================================== */

/* Badge Chip (Small inline status) */
.badge-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  font-size: var(--font-size-xs);
  font-weight: 600;
  border-radius: 9999px;
  line-height: 1;
  white-space: nowrap;
}

/* Active/Approved Badge */
.badge-chip--active {
  background: #D1FAE5;
  color: #065F46;
}

/* Inactive Badge */
.badge-chip--inactive {
  background: #E5E7EB;
  color: #374151;
}

/* Expired Badge */
.badge-chip--expired {
  background: #FEE2E2;
  color: #991B1B;
}

/* Warning Badge */
.badge-chip--warning {
  background: #FEF3C7;
  color: #92400E;
}

/* Info Badge */
.badge-chip--info {
  background: #DBEAFE;
  color: #1E40AF;
}

/* ===================================================================
   SECTION 4: CARD SYSTEM
   Consistent card styling with brand accents
   =================================================================== */

/* Base Card */
.card-brand {
  background-color: #ffffff;
  border: var(--brand-border-light);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  box-shadow: var(--brand-shadow-sm);
  transition: all var(--transition-base) ease;
}

.card-brand:hover {
  box-shadow: var(--brand-shadow);
  border-color: rgba(92, 125, 156, 0.15);
}

/* Card with Brand Border */
.card-brand-accent {
  background-color: #ffffff;
  border: var(--brand-border-primary);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  box-shadow: var(--brand-shadow-sm);
  transition: all var(--transition-base) ease;
}

.card-brand-accent:hover {
  box-shadow: var(--brand-shadow-brand);
  transform: translateY(-2px);
}

/* Card Title */
.card-title-brand {
  color: var(--brand-primary);
  font-size: var(--font-size-md);
  font-weight: 600;
  margin: 0 0 var(--spacing-md) 0;
  line-height: 1.3;
}

/* Card Content */
.card-content-brand {
  font-size: var(--font-size-sm);
  color: rgba(0, 0, 0, 0.7);
  line-height: 1.6;
}

/* ===================================================================
   SECTION 5: FORM CONTROLS
   Consistent input, select, and label styling
   =================================================================== */

/* Form Labels */
.label-brand {
  display: block;
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: rgba(0, 0, 0, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.025em;
  margin-bottom: var(--spacing-xs);
}

/* Text Inputs & Selects */
.input-brand {
  width: 100%;
  font-size: var(--font-size-sm);
  font-family: inherit;
  padding: var(--spacing-sm) var(--spacing-md);
  height: 2.5rem;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: var(--radius-sm);
  background-color: #ffffff;
  color: rgba(0, 0, 0, 0.87);
  transition: all var(--transition-fast) ease;
}

.input-brand:focus {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px rgba(92, 125, 156, 0.1);
}

.input-brand:disabled {
  background-color: rgba(0, 0, 0, 0.05);
  color: rgba(0, 0, 0, 0.4);
  cursor: not-allowed;
}

/* Select Dropdown */
.select-brand {
  width: 100%;
  font-size: var(--font-size-sm);
  font-family: inherit;
  padding: var(--spacing-sm) var(--spacing-md);
  height: 2.5rem;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: var(--radius-sm);
  background-color: #ffffff;
  color: rgba(0, 0, 0, 0.87);
  cursor: pointer;
  transition: all var(--transition-fast) ease;
}

.select-brand:focus {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px rgba(92, 125, 156, 0.1);
}

/* Textarea */
.textarea-brand {
  width: 100%;
  font-size: var(--font-size-sm);
  font-family: inherit;
  padding: var(--spacing-sm) var(--spacing-md);
  min-height: 6rem;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: var(--radius-sm);
  background-color: #ffffff;
  color: rgba(0, 0, 0, 0.87);
  resize: vertical;
  transition: all var(--transition-fast) ease;
}

.textarea-brand:focus {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px rgba(92, 125, 156, 0.1);
}

/* Checkbox & Radio */
.checkbox-brand,
.radio-brand {
  width: 1.125rem;
  height: 1.125rem;
  border: 2px solid rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transition: all var(--transition-fast) ease;
}

.checkbox-brand:checked,
.radio-brand:checked {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
}

/* ===================================================================
   SECTION 6: BADGE SYSTEM
   Status badges, pills, and labels
   =================================================================== */

/* Base Badge */
.badge-brand {
  display: inline-flex;
  align-items: center;
  font-size: var(--font-size-xs);
  font-weight: 600;
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius-md);
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

/* Primary Badge */
.badge-brand-primary {
  background-color: var(--brand-primary);
  color: #ffffff;
}

/* Outline Badge */
.badge-brand-outline {
  background-color: transparent;
  border: 1px solid var(--brand-primary);
  color: var(--brand-primary);
}

/* Success Badge */
.badge-success {
  background-color: var(--brand-success);
  color: #ffffff;
}

/* Warning Badge */
.badge-warning {
  background-color: var(--brand-warning);
  color: #ffffff;
}

/* Error Badge */
.badge-error {
  background-color: var(--brand-error);
  color: #ffffff;
}

/* Info Badge */
.badge-info {
  background-color: var(--brand-info);
  color: #ffffff;
}

/* ===================================================================
   SECTION 7: LAYOUT HELPERS
   Container, section, and spacing utilities
   =================================================================== */

/* Max-width Container */
.container-brand {
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--spacing-2xl) var(--spacing-xl);
}

@media (max-width: 768px) {
  .container-brand {
    padding: var(--spacing-xl) var(--spacing-lg);
  }
}

/* Section Spacing */
.section-brand {
  margin-bottom: var(--spacing-3xl);
}

/* Glassmorphic Background (Navbar, Modals) */
.glass-brand {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: var(--brand-border-light);
}

/* ===================================================================
   SECTION 8: GRADIENT BACKGROUNDS
   Reusable gradient patterns with TR brand
   =================================================================== */

.gradient-brand-subtle {
  background: linear-gradient(135deg, var(--brand-gradient-subtle-start) 0%, var(--brand-gradient-subtle-end) 100%);
}

.gradient-brand {
  background: linear-gradient(135deg, var(--brand-gradient-start) 0%, var(--brand-gradient-end) 100%);
}

.gradient-brand-vertical {
  background: linear-gradient(180deg, var(--brand-gradient-start) 0%, var(--brand-gradient-end) 100%);
}

/* ===================================================================
   SECTION 9: UTILITY CLASSES
   Quick modifiers for common patterns
   =================================================================== */

/* Text Colors */
.text-brand-primary {
  color: var(--brand-primary);
}

.text-brand-dark {
  color: var(--brand-primary-dark);
}

.text-muted {
  color: rgba(0, 0, 0, 0.6);
}

/* Background Colors */
.bg-brand-primary {
  background-color: var(--brand-primary);
}

.bg-brand-light {
  background-color: var(--brand-primary-light);
}

/* Shadows */
.shadow-brand-sm {
  box-shadow: var(--brand-shadow-sm);
}

.shadow-brand {
  box-shadow: var(--brand-shadow);
}

.shadow-brand-lg {
  box-shadow: var(--brand-shadow-lg);
}

/* Border */
.border-brand {
  border: var(--brand-border-primary);
}

/* Hover Effects */
.hover-lift {
  transition: transform var(--transition-base) ease;
}

.hover-lift:hover {
  transform: translateY(-2px);
}

/* ===================================================================
   SECTION: GATE 10 DOSSIER STYLES
   Document viewing/downloading for Mobilization Readiness
   =================================================================== */

/* Dossier Section (Gate Group) - COMPACT DESIGN */
.dossier-section {
  margin-bottom: 1rem;
  background: oklch(var(--b1));
  border: 1px solid oklch(var(--b3));
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.dossier-section-header {
  display: flex;
  align-items: center;
  padding: 0.75rem 1rem;
  background: oklch(var(--b2));
  border-bottom: 1px solid oklch(var(--b3));
  font-size: 0.875rem;
  font-weight: 600;
  gap: 0.5rem;
}

.dossier-section-header i {
  color: var(--brand-primary);
  font-size: 1rem;
}

.dossier-section-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.dossier-section-badge {
  margin-left: auto;
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-md);
  background: oklch(var(--b3));
  font-size: 0.75rem;
  font-weight: 500;
}

.dossier-section--optional .dossier-section-header {
  background: oklch(var(--b2) / 0.5);
}

.dossier-section-body {
  padding: 0.75rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 0.75rem;
}

/* Responsive Grid */
@media (min-width: 1024px) {
  .dossier-section-body {
    grid-template-columns: repeat(3, 1fr); /* 3 columns on desktop */
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .dossier-section-body {
    grid-template-columns: repeat(2, 1fr); /* 2 columns on tablet */
  }
}

@media (max-width: 767px) {
  .dossier-section-body {
    grid-template-columns: 1fr; /* 1 column on mobile */
  }
}

/* Document Card - COMPACT DESIGN */
.dossier-card {
  display: flex;
  gap: 0.75rem;
  background: oklch(var(--b1));
  border: 1px solid oklch(var(--b3));
  border-radius: var(--radius-lg);
  padding: 0.75rem;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.dossier-card:hover {
  box-shadow: var(--brand-shadow);
  transform: translateY(-2px);
}

.dossier-card--warning {
  border-left: 4px solid var(--brand-warning);
}

.dossier-card--expired {
  border-left: 4px solid var(--brand-error);
  opacity: 0.7;
}

.dossier-card--missing {
  border-left: 4px solid var(--brand-error);
  background: oklch(var(--er) / 0.05);
  opacity: 0.8;
}

.dossier-thumbnail--missing {
  padding: 0.75rem;
  background: oklch(var(--er) / 0.1);
}

/* Preview Area (Left) - COMPACT */
.dossier-card-preview {
  flex: 0 0 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: oklch(var(--b2));
  border-radius: var(--radius-md);
  position: relative;
  overflow: hidden;
}

.dossier-thumbnail {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
}

.dossier-thumbnail--image {
  object-fit: cover;
}

.dossier-thumbnail--pdf,
.dossier-thumbnail--generic {
  padding: 0.75rem;
}

.dossier-thumbnail-label {
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  color: oklch(var(--bc) / 0.6);
}

/* Status Badge Overlay - COMPACT */
.dossier-status-badge {
  position: absolute;
  bottom: 0.25rem;
  right: 0.25rem;
  padding: 0.125rem 0.375rem;
  border-radius: var(--radius-sm);
  font-size: 0.625rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.125rem;
  backdrop-filter: blur(4px);
}

.dossier-status-badge--expired {
  background: rgba(239, 68, 68, 0.9);
  color: white;
}

.dossier-status-badge--warning {
  background: rgba(245, 158, 11, 0.9);
  color: white;
}

/* Details Area (Right) - COMPACT */
.dossier-card-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.dossier-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.375rem;
}

.dossier-card-title {
  font-size: 0.875rem;
  font-weight: 600;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  color: oklch(var(--bc));
}

/* Metadata Grid - COMPACT */
.dossier-card-metadata {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.375rem;
  font-size: 0.75rem;
}

.dossier-metadata-item {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.dossier-metadata-label {
  font-weight: 500;
  color: oklch(var(--bc) / 0.6);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.dossier-metadata-value {
  font-weight: 600;
  color: oklch(var(--bc));
}

/* Action Buttons - COMPACT */
.dossier-card-actions {
  display: flex;
  gap: 0.375rem;
  margin-top: auto;
}

/* Empty State - COMPACT */
.dossier-empty-state {
  grid-column: 1 / -1;
  padding: 1.5rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Bulk Actions Section - COMPACT */
.dossier-bulk-actions {
  margin-top: 1.5rem;
  padding: 1rem;
  background: oklch(var(--b1));
  border: 1px solid oklch(var(--b3));
  border-radius: var(--radius-lg);
}

/* Summary Statistics - COMPACT */
.dossier-summary {
  margin-bottom: 1rem;
}

.dossier-summary-stats {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.dossier-stat {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.dossier-stat i {
  font-size: 1.25rem;
}

.dossier-stat-value {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--brand-primary);
}

.dossier-stat-label {
  font-size: 0.75rem;
  color: oklch(var(--bc) / 0.7);
}

.dossier-stat--warning i {
  color: var(--brand-warning);
}

/* Download Section */
.dossier-download-section {
  margin-top: 1.5rem;
}

.dossier-download-card {
  background: oklch(var(--b2));
  border: 1px solid oklch(var(--b3));
  border-radius: var(--radius-lg);
  padding: 1.5rem;
}

.dossier-download-header {
  margin-bottom: 1rem;
}

.dossier-download-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: oklch(var(--bc));
}

.dossier-download-body {
  margin-bottom: 1.5rem;
}

.dossier-download-description {
  color: oklch(var(--bc) / 0.8);
  margin-bottom: 1rem;
  line-height: 1.6;
}

.dossier-download-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.dossier-download-features li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: oklch(var(--bc) / 0.8);
  font-size: 0.875rem;
}

.dossier-download-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.dossier-loading-indicator {
  display: none;
  align-items: center;
  color: var(--brand-primary);
  font-weight: 500;
}

.dossier-loading-indicator.htmx-request {
  display: flex;
}

.dossier-download-info {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  background: oklch(var(--b3) / 0.5);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.875rem;
  color: oklch(var(--bc) / 0.7);
}

.dossier-download-info i {
  color: var(--brand-info);
}

/* ===================================================================
   SECTION 16: HTMX UPLOAD PROGRESS INDICATOR
   Animated progress bar for file uploads with DPI/validation checks
   =================================================================== */

/* HTMX Indicator Integration */
.htmx-indicator {
  display: none;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  display: block !important;
}

/* Upload Progress Animations */
@keyframes upload-spin {
  to { transform: rotate(360deg); }
}

@keyframes upload-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Upload Progress Bar Component */
.upload-progress-indicator .upload-progress-bar {
  margin-top: 0.5rem;
  padding: 0.75rem;
  background: oklch(var(--b2));
  border-radius: 0.5rem;
  border: 1px solid oklch(var(--bc) / 0.1);
}

.upload-progress-indicator .upload-spinner {
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid oklch(var(--bc) / 0.2);
  border-top-color: var(--brand-primary);
  border-radius: 50%;
  animation: upload-spin 0.8s linear infinite;
}

.upload-progress-indicator .progress-shimmer {
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, var(--brand-primary) 0%, #4A6580 50%, var(--brand-primary) 100%);
  background-size: 200% 100%;
  animation: upload-shimmer 1.5s ease-in-out infinite;
}

/* ===================================================================
   SECTION 17: DELETE CONFIRMATION STYLING
   Enterprise-styled delete confirmation pages for Django admin
   =================================================================== */

/* Delete Confirmation Card */
.delete-confirmation-card {
  background: oklch(var(--b1));
  border: 1px solid oklch(var(--bc) / 0.2);
  border-radius: var(--radius-lg);
  padding: var(--spacing-2xl);
  box-shadow: var(--brand-shadow);
  max-width: 800px;
  margin: var(--spacing-2xl) auto;
}

.delete-confirmation-card h1,
.delete-confirmation-card h2 {
  color: #dc2626;
  font-size: var(--font-size-xl);
  font-weight: 600;
  margin: 0 0 var(--spacing-lg) 0;
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.delete-confirmation-card h1 i,
.delete-confirmation-card h2 i {
  font-size: 1.5rem;
}

.delete-confirmation-card p {
  margin: var(--spacing-sm) 0;
  color: oklch(var(--bc));
}

.delete-confirmation-card ul {
  margin: var(--spacing-lg) 0;
  padding-left: 1.5rem;
}

.delete-confirmation-card li {
  margin: var(--spacing-xs) 0;
}

/* Warning Box */
.delete-warning-box {
  background: linear-gradient(135deg, #fef2f2, #fee2e2);
  border-left: 4px solid #dc2626;
  padding: 1.25rem;
  border-radius: var(--radius-md);
  margin: var(--spacing-xl) 0;
}

.delete-warning-box p {
  margin: 0;
  color: #991b1b;
  font-weight: 500;
  font-size: var(--font-size-md);
}

.delete-warning-box--amber {
  background: linear-gradient(135deg, #fffbeb, #fef3c7);
  border-left-color: #f59e0b;
}

.delete-warning-box--amber p {
  color: #92400e;
}

/* Protected Objects List */
.protected-objects-list {
  background: oklch(var(--b2));
  border: 1px solid oklch(var(--bc) / 0.15);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg) var(--spacing-xl);
  margin: var(--spacing-lg) 0;
  max-height: 300px;
  overflow-y: auto;
}

.protected-objects-list ul {
  margin: 0;
  padding-left: 1.5rem;
  list-style-type: disc;
}

.protected-objects-list li {
  margin: var(--spacing-sm) 0;
  color: oklch(var(--bc));
  font-size: var(--font-size-md);
}

.protected-objects-list li strong {
  color: #dc2626;
  font-weight: 600;
}

.protected-objects-list li a {
  color: var(--brand-primary);
  text-decoration: none;
  font-weight: 500;
  transition: color var(--transition-fast);
}

.protected-objects-list li a:hover {
  color: var(--brand-primary-dark);
  text-decoration: underline;
}

/* Delete Confirmation Actions */
.delete-confirmation-actions {
  display: flex;
  gap: var(--spacing-lg);
  margin-top: var(--spacing-2xl);
  justify-content: center;
  padding-top: var(--spacing-xl);
  border-top: 1px solid oklch(var(--bc) / 0.1);
}

/* Confirm Delete Button (Red) */
.btn-confirm-delete {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  color: white;
  border: none;
  padding: var(--spacing-md) var(--spacing-xl);
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-base);
  box-shadow: 0 2px 4px rgba(220, 38, 38, 0.3);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.btn-confirm-delete:hover {
  background: linear-gradient(135deg, #b91c1c, #991b1b);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(220, 38, 38, 0.4);
  color: white;
}

/* Cancel/Back Button (Brand Blue) */
.btn-cancel-delete,
.btn-back-to-list {
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-dark));
  color: white;
  border: none;
  padding: var(--spacing-md) var(--spacing-xl);
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-base);
  box-shadow: var(--brand-shadow-brand-sm);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.btn-cancel-delete:hover,
.btn-back-to-list:hover {
  background: linear-gradient(135deg, var(--brand-primary-dark), #3A5060);
  transform: translateY(-1px);
  box-shadow: var(--brand-shadow-brand);
  color: white;
}

/* Info Text */
.delete-info-text {
  color: oklch(var(--bc) / 0.7);
  font-size: var(--font-size-base);
  margin: var(--spacing-lg) 0;
  line-height: 1.6;
}

/* Hide Django's default submit row */
.delete-confirmation .submit-row,
.delete-selected-confirmation .submit-row {
  display: none !important;
}

/* Scrollbar styling for protected list */
.protected-objects-list::-webkit-scrollbar {
  width: 8px;
}

.protected-objects-list::-webkit-scrollbar-track {
  background: oklch(var(--b3));
  border-radius: 4px;
}

.protected-objects-list::-webkit-scrollbar-thumb {
  background: oklch(var(--bc) / 0.3);
  border-radius: 4px;
}

.protected-objects-list::-webkit-scrollbar-thumb:hover {
  background: oklch(var(--bc) / 0.5);
}

/* ===================================================================
   SECTION 18: ENTERPRISE DASHBOARD COMPONENTS
   Shared patterns for capacity overviews, stat cards, grids
   =================================================================== */

/* --- 18.1 Enterprise Container --- */
.enterprise-container {
  background: oklch(var(--b1));
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
}

.enterprise-container-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
  border-bottom: 1px solid oklch(var(--b3));
}

.enterprise-container-title {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--brand-primary);
}

.enterprise-container-footer {
  display: flex;
  justify-content: flex-end;
  padding-top: var(--spacing-sm);
  margin-top: var(--spacing-sm);
  border-top: 1px solid oklch(var(--b3));
}

/* --- 18.2 Stat Cards Grid --- */
.enterprise-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

.enterprise-stat-card {
  background: linear-gradient(135deg, var(--brand-gradient-start), var(--brand-gradient-end));
  border: 1px solid rgba(92, 125, 156, 0.2);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  text-align: center;
  transition: all var(--transition-base);
}

.enterprise-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--brand-shadow-brand-sm);
}

.enterprise-stat-value {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--brand-primary);
  line-height: 1;
}

.enterprise-stat-label {
  font-size: var(--font-size-xs);
  color: oklch(var(--bc) / 0.6);
  text-transform: uppercase;
  margin-top: var(--spacing-xs);
  letter-spacing: 0.05em;
}

.enterprise-stat-icon {
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  border-radius: 50%;
  margin: 0 auto var(--spacing-sm);
  color: var(--brand-primary);
  font-size: var(--font-size-base);
  box-shadow: var(--brand-shadow-sm);
}

/* Stat Card Variants */
.enterprise-stat-card--success .enterprise-stat-value { color: #10b981; }
.enterprise-stat-card--success .enterprise-stat-icon { color: #10b981; }

.enterprise-stat-card--warning .enterprise-stat-value { color: #f59e0b; }
.enterprise-stat-card--warning .enterprise-stat-icon { color: #f59e0b; }

.enterprise-stat-card--danger .enterprise-stat-value { color: #ef4444; }
.enterprise-stat-card--danger .enterprise-stat-icon { color: #ef4444; }

.enterprise-stat-card--info .enterprise-stat-value { color: #3b82f6; }
.enterprise-stat-card--info .enterprise-stat-icon { color: #3b82f6; }

.enterprise-stat-card--highlight {
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-dark));
}

.enterprise-stat-card--highlight .enterprise-stat-value,
.enterprise-stat-card--highlight .enterprise-stat-label {
  color: white;
}

.enterprise-stat-card--highlight .enterprise-stat-icon {
  background: rgba(255, 255, 255, 0.2);
  color: white;
}

/* --- 18.3 Tier Cards (for capacity overviews) --- */
.enterprise-tier-card {
  background: oklch(var(--b1));
  border: 1px solid oklch(var(--b3));
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: all var(--transition-base);
  cursor: default;
}

.enterprise-tier-card:hover {
  border-color: var(--brand-primary);
  box-shadow: var(--brand-shadow-sm);
  transform: translateY(-2px);
}

.enterprise-tier-card:active {
  transform: translateY(0);
  box-shadow: var(--brand-shadow-inset);
}

.enterprise-tier-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  background: oklch(var(--b2));
  border-bottom: 1px solid oklch(var(--b3));
  transition: background var(--transition-fast);
}

.enterprise-tier-card:hover .enterprise-tier-header {
  background: linear-gradient(135deg, var(--brand-gradient-start), var(--brand-gradient-end));
}

.enterprise-tier-badge {
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
}

.enterprise-tier-badge--1 { background: rgba(59, 130, 246, 0.2); color: #3b82f6; }
.enterprise-tier-badge--2 { background: rgba(139, 92, 246, 0.2); color: #8b5cf6; }
.enterprise-tier-badge--3 { background: rgba(16, 185, 129, 0.2); color: #10b981; }

.enterprise-tier-title {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: oklch(var(--bc));
}

.enterprise-tier-body {
  padding: var(--spacing-md);
}

/* --- 18.4 Summary Stats Row --- */
.enterprise-summary-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  background: oklch(var(--b2));
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-lg);
}

.enterprise-summary-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 60px;
}

.enterprise-summary-value {
  font-size: var(--font-size-xl);
  font-weight: 700;
  line-height: 1;
}

.enterprise-summary-label {
  font-size: 0.65rem;
  color: oklch(var(--bc) / 0.6);
  text-transform: uppercase;
  margin-top: var(--spacing-xs);
}

/* --- 18.5 Progress Bar --- */
.enterprise-progress-container {
  background: oklch(var(--b3));
  border-radius: 9999px;
  height: 0.625rem;
  overflow: hidden;
  position: relative;
}

.enterprise-progress-bar {
  height: 100%;
  border-radius: 9999px;
  transition: width var(--transition-slow);
  background: linear-gradient(90deg, var(--brand-primary), var(--brand-primary-light));
}

.enterprise-progress-bar--success {
  background: linear-gradient(90deg, #10b981, #34d399);
}

.enterprise-progress-bar--warning {
  background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

.enterprise-progress-bar--danger {
  background: linear-gradient(90deg, #ef4444, #f87171);
}

/* --- 18.6 Hierarchy Groups (for grids) --- */
.enterprise-hierarchy-group {
  margin-bottom: var(--spacing-lg);
}

.enterprise-hierarchy-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--brand-primary);
  padding: var(--spacing-sm) var(--spacing-md);
  background: oklch(var(--b2));
  border-radius: var(--radius-sm);
  margin-bottom: var(--spacing-sm);
}

.enterprise-hierarchy-children {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  padding-left: var(--spacing-sm);
}

.enterprise-hierarchy-child {
  background: oklch(var(--b1));
  border: 1px solid oklch(var(--b3));
  border-radius: var(--radius-sm);
  padding: var(--spacing-sm);
}

.enterprise-hierarchy-child-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.7rem;
  color: oklch(var(--bc) / 0.7);
  margin-bottom: var(--spacing-sm);
  padding-bottom: var(--spacing-xs);
  border-bottom: 1px solid oklch(var(--b3));
}

/* --- 18.7 Grid Items (seats, slots) --- */
.enterprise-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
}

.enterprise-grid-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2rem;
  border-radius: var(--radius-xs);
  font-size: 0.65rem;
  font-weight: 600;
  cursor: default;
  transition: all var(--transition-fast);
}

.enterprise-grid-item:hover {
  transform: scale(1.05);
  box-shadow: var(--brand-shadow-sm);
}

/* Grid Item Status Variants */
.enterprise-grid-item--free { background: rgba(16, 185, 129, 0.2); color: #10b981; border: 1px solid rgba(16, 185, 129, 0.4); }
.enterprise-grid-item--available { background: rgba(16, 185, 129, 0.2); color: #10b981; border: 1px solid rgba(16, 185, 129, 0.4); }
.enterprise-grid-item--occupied { background: rgba(107, 114, 128, 0.2); color: #4b5563; border: 1px solid rgba(107, 114, 128, 0.4); }
.enterprise-grid-item--assigned { background: rgba(107, 114, 128, 0.2); color: #4b5563; border: 1px solid rgba(107, 114, 128, 0.4); }
.enterprise-grid-item--held { background: rgba(245, 158, 11, 0.2); color: #d97706; border: 1px solid rgba(245, 158, 11, 0.4); }
.enterprise-grid-item--locked { background: rgba(245, 158, 11, 0.2); color: #d97706; border: 1px solid rgba(245, 158, 11, 0.4); }
.enterprise-grid-item--planned { background: rgba(139, 92, 246, 0.2); color: #8b5cf6; border: 1px solid rgba(139, 92, 246, 0.4); }
.enterprise-grid-item--maintenance { background: rgba(107, 114, 128, 0.2); color: #6b7280; border: 1px solid rgba(107, 114, 128, 0.4); }

/* Gender Indicators - Strong visible colors */
.enterprise-grid-item--male {
  border-left: 3px solid #3b82f6;
  background: rgba(59, 130, 246, 0.08) !important;
}
.enterprise-grid-item--female {
  border-left: 3px solid #ec4899;
  background: rgba(236, 72, 153, 0.08) !important;
}

/* --- 18.8 Legend --- */
.enterprise-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-lg);
  padding: var(--spacing-md);
  background: oklch(var(--b2));
  border-radius: var(--radius-sm);
  margin-top: var(--spacing-md);
}

.enterprise-legend-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: 0.7rem;
  color: oklch(var(--bc) / 0.7);
}

.enterprise-legend-color {
  width: 1rem;
  height: 1rem;
  border-radius: var(--radius-xs);
}

.enterprise-legend-color--free,
.enterprise-legend-color--available { background: rgba(16, 185, 129, 0.4); border: 1px solid #10b981; }
.enterprise-legend-color--occupied,
.enterprise-legend-color--assigned { background: rgba(107, 114, 128, 0.4); border: 1px solid #6b7280; }
.enterprise-legend-color--held,
.enterprise-legend-color--locked { background: rgba(245, 158, 11, 0.4); border: 1px solid #f59e0b; }
.enterprise-legend-color--planned { background: rgba(139, 92, 246, 0.4); border: 1px solid #8b5cf6; }
.enterprise-legend-color--male { background: rgba(59, 130, 246, 0.4); border: 1px solid #3b82f6; }
.enterprise-legend-color--female { background: rgba(236, 72, 153, 0.4); border: 1px solid #ec4899; }

/* --- 18.9 Empty State --- */
.enterprise-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-3xl);
  color: oklch(var(--bc) / 0.5);
  font-style: italic;
}

.enterprise-empty-state i {
  font-size: 1.5rem;
}

/* --- 18.10 Error State --- */
.enterprise-error-state {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: var(--radius-md);
  color: #ef4444;
  font-size: var(--font-size-base);
  margin-bottom: var(--spacing-md);
}

/* --- 18.11 Enterprise Table --- */
.enterprise-table-wrap {
  overflow-x: auto;
}

.enterprise-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}

.enterprise-table thead {
  background: oklch(var(--b2));
}

.enterprise-table th {
  text-align: left;
  padding: var(--spacing-sm);
  font-weight: 600;
  color: var(--brand-primary);
  border-bottom: 2px solid oklch(var(--b3));
  white-space: nowrap;
}

.enterprise-table td {
  padding: var(--spacing-sm);
  border-bottom: 1px solid oklch(var(--b3));
  vertical-align: middle;
}

.enterprise-table tbody tr {
  transition: background var(--transition-fast);
}

.enterprise-table tbody tr:hover {
  background: oklch(var(--b2) / 0.5);
}

.enterprise-table-link {
  color: var(--brand-primary);
  font-weight: 600;
  text-decoration: none;
}

.enterprise-table-link:hover {
  text-decoration: underline;
}

/* ===================================================================
   SECTION 19: CHANGELIST FILTER DRAWER
   Enterprise filter drawer: sticky header + scrollable body + sticky
   footer so primary "Apply Filters" and secondary "Clear all filters"
   are ALWAYS visible regardless of how many filter groups render.
   Markup: server/templates/admin/change_list.html (#changelist-filter)
   =================================================================== */
.ep-filter-drawer {
  display: flex;
  flex-direction: column;
  /* Bound height to the viewport below the navbar so the body scrolls and
     the footer stays pinned even with long filter lists. */
  max-height: calc(100vh - var(--trmla-admin-navbar-height, 4rem) - 1.5rem);
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* In overlay mode (below the xl:drawer-open breakpoint) the DaisyUI
   drawer-side is fixed at the viewport top, behind the z-indexed navbar.
   Offset the panel below the navbar so the sticky "Filter" header is not
   hidden by the topbar. On xl screens the drawer is in-flow and needs no
   offset, so this is scoped to the overlay breakpoint only. */
@media (max-width: 1279px) {
  .ep-filter-drawer {
    margin-top: var(--trmla-admin-navbar-height, 4rem);
  }
}

/* Sticky header (title + close) */
.ep-filter-drawer__header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm);
  padding: 0.75rem 0.875rem;
  background: oklch(var(--b1));
  border-bottom: 1px solid oklch(var(--bc) / 0.1);
}

.ep-filter-drawer__title {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: oklch(var(--bc));
}

.ep-filter-drawer__title i {
  color: var(--brand-primary);
  font-size: 0.9rem;
}

.ep-filter-drawer__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  color: oklch(var(--bc) / 0.6);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.ep-filter-drawer__close:hover {
  background: oklch(var(--bc) / 0.08);
  color: oklch(var(--bc));
}

/* Scrollable body (filter groups + show-counts toggle) */
.ep-filter-drawer__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 0.75rem 0.875rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.ep-filter-drawer__facets {
  margin-bottom: 0.25rem;
}

/* Sticky footer (Clear all + Apply) — always visible */
.ep-filter-drawer__footer {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--spacing-sm);
  padding: 0.75rem 0.875rem;
  background: oklch(var(--b1));
  border-top: 1px solid oklch(var(--bc) / 0.1);
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
}

/* Push secondary action to the left, keep primary on the right */
.ep-filter-drawer__clear {
  margin-right: auto;
}

.ep-filter-drawer__apply {
  white-space: nowrap;
}

/* ===================================================================
   SECTION: GLOBAL FOCUS RING OVERRIDE
   Purpose: Restore focus indicators killed by customized_tailwind.css
            (:focus-visible{outline:none!important}) for accessibility.
   Pattern: Brand-colored box-shadow ring (outline cannot override !important
            from build artifact, so we use box-shadow as visual indicator).
   =================================================================== */

/* --- Global focus-visible restore for ALL interactive elements --- */
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible,
a:focus-visible,
[tabindex]:focus-visible {
  box-shadow: 0 0 0 2px rgba(92, 125, 156, 0.35) !important;
  border-color: var(--brand-primary) !important;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

/* --- DaisyUI component overrides (counter .input:focus, .select:focus etc.) --- */
.input:focus,
.input:focus-visible,
.select:focus,
.select:focus-visible,
.textarea:focus,
.textarea:focus-visible,
.file-input:focus,
.file-input:focus-visible {
  box-shadow: 0 0 0 2px rgba(92, 125, 156, 0.35) !important;
  border-color: var(--brand-primary) !important;
  outline-offset: 0;
}

/* --- DaisyUI checkbox & radio --- */
.checkbox:focus,
.checkbox:focus-visible,
.radio:focus,
.radio:focus-visible {
  box-shadow: 0 0 0 2px rgba(92, 125, 156, 0.25) !important;
}

/* --- Small-size variants (input-sm, select-sm, textarea-sm) --- */
.input-sm:focus,
.input-sm:focus-visible,
.select-sm:focus,
.select-sm:focus-visible,
.textarea-sm:focus,
.textarea-sm:focus-visible {
  box-shadow: 0 0 0 2px rgba(92, 125, 156, 0.35) !important;
  border-color: var(--brand-primary) !important;
}

/* --- Brand-specific inputs (already styled, ensure consistency) --- */
.input-brand:focus,
.input-brand:focus-visible,
.select-brand:focus,
.select-brand:focus-visible,
.textarea-brand:focus,
.textarea-brand:focus-visible {
  box-shadow: 0 0 0 3px rgba(92, 125, 156, 0.15) !important;
  border-color: var(--brand-primary) !important;
}

/* --- form-input-compact (used in pm_shared cards) --- */
.form-input-compact:focus,
.form-input-compact:focus-visible {
  box-shadow: 0 0 0 2px rgba(92, 125, 156, 0.35) !important;
  border-color: var(--brand-primary) !important;
}

/* --- Buttons: use outline instead of box-shadow for distinct style --- */
.btn:focus-visible,
.btn-brand:focus-visible,
.btn-brand-sm:focus-visible,
.btn-outline:focus-visible {
  outline: 2px solid var(--brand-primary) !important;
  outline-offset: 2px !important;
  box-shadow: none;
}

/* ===================================================================
   SECTION 21: ENTERPRISE ADMIN ACTION FOOTER (submit row)
   Single clean action footer for ALL admin change/add forms.

   Owns the layout for templates/admin/submit_line.html. django_daisy's
   default submit_line rendered three responsive layout variants (popup /
   desktop max-md:hidden / mobile max-md:grid) so the change form carried
   duplicate Save/Delete controls in the DOM. These rules render exactly one
   responsive-flex row and do not depend on any Tailwind responsive variant:
   Delete/Close stay on the left, the Save cluster is pushed to the right.
   =================================================================== */
.tr-submitline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  margin-top: 0.5rem;
  background: oklch(var(--b1));
  border-top: 1px solid oklch(var(--bc) / 0.12);
  border-radius: 0 0 var(--radius-lg, 0.5rem) var(--radius-lg, 0.5rem);
  position: sticky;
  bottom: 0;
  z-index: 30;
}

.tr-submitline--popup {
  justify-content: flex-end;
}

.tr-submitline__group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

/* Push the primary save cluster to the right edge; delete/close stay left. */
.tr-submitline__group--end {
  margin-left: auto;
}

.tr-submitline__btn {
  white-space: nowrap;
}

/* Keep the destructive action visually distinct from the save cluster. */
.tr-submitline__btn--delete {
  margin-inline-end: 0.25rem;
}

@media (max-width: 640px) {
  .tr-submitline {
    justify-content: stretch;
  }
  .tr-submitline__group {
    width: 100%;
  }
  .tr-submitline__group--end {
    justify-content: flex-end;
  }
}

/* ===================================================================
   SECTION 22: ENTERPRISE ADMIN TOGGLE (boolean switch)
   Clean green-ON / empty-OFF switch for ALL admin boolean fields.

   django_daisy renders boolean fields as DaisyUI-4 <input class="toggle">
   whose knob is a white inset box-shadow that already slides correctly, but
   whose track is a dark base-content colour for BOTH states — so an enabled
   toggle read as dark grey instead of an obvious "on". These rules re-colour
   ONLY the track (keeping DaisyUI's working knob): OFF = subtle neutral track,
   ON = brand-success green. Bulk-action checkboxes (.checkbox / _selected_action)
   are intentionally excluded and keep their native appearance.
   =================================================================== */
input.toggle:not(.checkbox):not([name="_selected_action"]) {
  border: 1px solid oklch(var(--bc) / 0.3) !important;
  background-color: oklch(var(--bc) / 0.18) !important;
  transition: background-color 0.18s ease, border-color 0.18s ease;
}

input.toggle:not(.checkbox):not([name="_selected_action"]):checked {
  background-color: oklch(var(--su, 0.648 0.15 160)) !important;
  border-color: oklch(var(--su, 0.648 0.15 160)) !important;
}

input.toggle:not(.checkbox):not([name="_selected_action"]):focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}

input.toggle:not(.checkbox):not([name="_selected_action"]):disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ===================================================================
   SECTION 23: ENTERPRISE CHANGE-FORM TAB PANELS
   Own the directional corner reset without relying on Tailwind tokens.
   =================================================================== */
.tr-admin-tab-panel {
  overflow: visible;
}

[dir="ltr"] .tr-admin-tab-panel {
  border-top-left-radius: 0 !important;
}

[dir="rtl"] .tr-admin-tab-panel {
  border-top-right-radius: 0 !important;
}

/* ===================================================================
   END OF ENTERPRISE BASE CSS
   Version: 1.5.0
   Last Updated: August 7, 2026
   Maintained by: TRMLA Platform Team
   =================================================================== */