html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--primary-color, #258cfb);
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
  color: #1e293b;
}

/* Global: Make all muted/secondary text darker for readability */
.text-muted { color: #4b5563 !important; }
small.text-muted, .form-text { color: #4b5563 !important; }

/* Global: Table headers - primary purple theme */
.table thead th, .table-dark-header thead th, .table thead.table-light th, .table thead.table-dark th {
  background: var(--primary-color, #6366f1) !important;
  color: #fff !important;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.4px;
  padding: 6px 8px;
  border: none;
}

/* Global: Compact table body rows */
.table.table-sm tbody td {
  padding: 4px 8px;
  font-size: 0.78rem;
  vertical-align: middle;
}
.table.table-sm thead th {
  padding: 6px 8px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   WCAG 2.1 AA - Accessibility (Sprint 78)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Skip-to-content link - visible only on focus (keyboard users) */
.skip-to-content {
  position: absolute;
  top: -100%;
  left: 16px;
  z-index: 10000;
  background: #1e293b;
  color: #fff;
  padding: 12px 24px;
  border-radius: 0 0 8px 8px;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  transition: top 0.2s ease;
}
.skip-to-content:focus {
  top: 0;
  outline: 3px solid #fbbf24;
  outline-offset: 2px;
}

/* Enhanced focus-visible - consistent 3px ring for keyboard navigation */
*:focus-visible {
  outline: 3px solid var(--primary-color, #6366f1);
  outline-offset: 2px;
}
[data-theme="dark"] *:focus-visible {
  outline-color: #a5b4fc;
}

/* Remove double outline on elements that already have box-shadow focus */
.btn:focus-visible, .form-control:focus-visible, .form-select:focus-visible,
.form-check-input:focus-visible {
  outline: 3px solid var(--primary-color, #6366f1);
  outline-offset: 2px;
}

/* Minimum 44x44px touch targets (WCAG 2.5.5 AAA / 2.5.8 AA) */
.sidebar .submenu a,
.sidebar .menu-title,
.sidebar .menu-subtitle {
  min-height: 44px;
  display: flex;
  align-items: center;
}

/* Ensure interactive elements in tables/cards meet touch target */
.btn-sm {
  min-height: 36px;
  min-width: 36px;
}

/* Prefers-reduced-motion - disable animations for users who request it */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* High contrast mode support */
@media (forced-colors: active) {
  .skip-to-content:focus {
    outline: 3px solid LinkText;
  }
  .btn, .form-control, .form-select {
    border: 1px solid ButtonText;
  }
}

/* Ensure text contrast ratio meets 4.5:1 minimum */
.text-muted { color: #4b5563 !important; }

/* Visible focus for sidebar menu toggles */
.sidebar .menu-title:focus-visible,
.sidebar .menu-subtitle:focus-visible {
  outline: 2px solid #fbbf24;
  outline-offset: -2px;
  background: rgba(255,255,255,0.15);
}

/* Accessible status badges - ensure sufficient contrast */
.badge.bg-warning { color: #1e293b !important; }
.badge.bg-info { color: #fff !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   Issues 12-13: Constrain search textboxes and filter dropdowns (global)
   ═══════════════════════════════════════════════════════════════════════════ */

/* All non-textarea text inputs and selects get a reasonable max-width */
input.form-control,
select.form-select,
.form-control:not(textarea) {
  max-width: 360px;
}

/* Restore full width where needed: tables, modals, input-groups, navbars */
.table input.form-control,
.table select.form-select,
.modal input.form-control,
.modal select.form-select,
.input-group input.form-control,
.input-group select.form-select,
.navbar input.form-control,
.navbar select.form-select {
  max-width: none;
}

/* Controls placed inside a Bootstrap grid column are already sized by that
   column (col-md-2, col-lg-auto, etc.), so the 360px cap must not apply there -
   otherwise on wide screens (24"/32") each control sits narrower than its
   column and leaves large gaps between fields. The cap still applies to lone
   controls that are NOT inside a grid column, so a single input never spans a
   whole ultra-wide screen. */
.row > [class*="col-"] input.form-control,
.row > [class*="col-"] select.form-select,
.row > [class*="col-"] .form-control:not(textarea) {
  max-width: none;
}

/* Hidden inputs should have no max-width constraint */
input[type="hidden"] {
  max-width: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Mobile & Tablet Responsiveness
   ═══════════════════════════════════════════════════════════════════════════ */

/* Form controls - full width on small screens (override 360px max-width) */
@media (max-width: 576px) {
  input.form-control,
  select.form-select,
  .form-control:not(textarea) {
    max-width: 100%;
  }
}

/* Hide non-essential table columns on mobile */
@media (max-width: 768px) {
  .d-mobile-none { display: none !important; }

  /* Horizontal scroll hint for wide tables */
  .table-responsive { position: relative; -webkit-overflow-scrolling: touch; }

  /* Sticky first column for key identifiers */
  .table-mobile-sticky td:first-child,
  .table-mobile-sticky th:first-child {
    position: sticky; left: 0; background: inherit; z-index: 1;
    box-shadow: 2px 0 4px rgba(0,0,0,0.05);
  }
}