/**
 * Custom CSS utilities and component styling
 *
 * This file extends Bootstrap 5 with custom utilities that aren't available
 * in Bootstrap by default, and applies dark/light theme overrides to third-party
 * libraries (Tom Select) so they respect the data-bs-theme attribute.
 *
 * Uses Bootstrap's CSS custom properties (variables) throughout, so these styles
 * automatically respond to theme switching:
 * - --bs-body-bg, --bs-body-color: text and background
 * - --bs-primary, --bs-danger, etc: semantic colors
 * - --bs-border-color: borders
 */

/* ──────────────────────────────────────────────────────────────────────────── */
/* Sizing & Layout Utilities */
/* ──────────────────────────────────────────────────────────────────────────── */

/* Compact button variant — Bootstrap has no btn-xs */
.btn-xs {
  --bs-btn-padding-y: 0.125rem;
  --bs-btn-padding-x: 0.375rem;
  --bs-btn-font-size: 0.75rem;
}

/* Dashed upload drop zone — Bootstrap border utilities only support solid */
.border-dashed { border-style: dashed !important; }

/* Extra-small badge text — Bootstrap badge sizing stops at .badge */
.badge-xs { font-size: 0.625rem; }

/* Auth page card widths — specific widths for login/signup card layouts */
.card-login { width: 380px; }
.card-auth  { width: 400px; }

/* Force hard word break for long tokens / reset links so they don't overflow */
.word-break-all { word-break: break-all; }

/* Narrow inline select (expiring report day picker) — constrain width */
.select-narrow { width: 80px; }

/* Bulk result table fixed column widths */
.col-row-num { width: 70px; }
.col-field   { width: 160px; }

/* Large icon (verification page) — Bootstrap fs-1 only goes to 2.5rem */
.icon-5x { font-size: 5rem; }

/* MFA / auth narrow-column pages — center and constrain width */
.mfa-narrow { width: 100%; max-width: 560px; }

/* Diagnostics label column — wider for readable labels */
.diag-th-label { width: 40%; }

/* ──────────────────────────────────────────────────────────────────────────── */
/* Barcode Scanner */
/* ──────────────────────────────────────────────────────────────────────────── */

/* Barcode scanner textarea — hides raw barcode data visually but keeps it editable
   The textarea receives keystrokes from barcode scanners. We make text invisible
   (color: transparent) but show a text shadow in secondary color so the caret is visible. */
.barcode-input {
  color: transparent;
  text-shadow: 0 0 0 var(--bs-secondary-color);
  resize: none;
  caret-color: var(--bs-secondary-color);
}

/* Barcode scan debug <pre> block — scrollable code display */
.pre-scan-debug {
  white-space: pre-wrap;
  max-height: 8rem;
  overflow: auto;
}

/* ──────────────────────────────────────────────────────────────────────────── */
/* DataTables Controls */
/* ──────────────────────────────────────────────────────────────────────────── */

/* DataTables width overrides so controls don't stretch full width
   By default, DataTables stretches the length select and filter input to fill
   the available space, which looks awkward. These force inline layout. */
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
  display: inline-block;
  width: auto;
}

/* ──────────────────────────────────────────────────────────────────────────── */
/* Cards & Accents */
/* ──────────────────────────────────────────────────────────────────────────── */

/* Card accent top borders — CSP-safe replacement for inline border-top styles
   Used on status/alert cards to show at a glance if content is critical (red),
   info (blue), or warning (yellow). */
.card-top-danger  { border-top: 4px solid var(--bs-danger)  !important; }
.card-top-primary { border-top: 4px solid var(--bs-primary) !important; }
.card-top-warning { border-top: 4px solid var(--bs-warning) !important; }

/* Hero logo on public landing page */
.logo-hero { max-height: 180px; width: auto; }

/* Slightly widened letter spacing for headings */
.ls-wide { letter-spacing: 0.05em; }

/* ──────────────────────────────────────────────────────────────────────────── */
/* MFA & Auth Components */
/* ──────────────────────────────────────────────────────────────────────────── */

/* MFA option buttons — theme-aware card-like buttons that work in light and dark mode
   These are clickable <div> or <button> elements that look like cards, used on the
   MFA method selection page (email vs TOTP). */
.mfa-option {
  display: flex;
  width: 100%;
  text-align: left;
  padding: 1rem;
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  cursor: pointer;
  transition: background-color .15s ease-in-out, border-color .15s ease-in-out;
}
.mfa-option:hover {
  background-color: var(--bs-secondary-bg);
  border-color: var(--bs-border-color-translucent);
}
.mfa-option:focus-visible {
  outline: none;
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), .25);
}

/* ──────────────────────────────────────────────────────────────────────────── */
/* Dashboard & Profiles */
/* ──────────────────────────────────────────────────────────────────────────── */

/* Dashboard quick action cards — lift on hover for visual feedback */
.quick-action { transition: box-shadow 0.15s, transform 0.15s; }
.quick-action:hover { box-shadow: 0 0.25rem 0.75rem rgba(0,0,0,.12) !important; transform: translateY(-2px); }

/* Icon container for quick action cards */
.qa-icon {
  width: 44px; height: 44px; flex-shrink: 0;
  border-radius: 0.5rem;
  display: flex; align-items: center; justify-content: center;
}

/* Profile expand panels — visually separate from the parent row
   When a profile row is expanded to show details, this styles the expanded content
   with a background color and left border accent. */
.profile-expand {
  background-color: var(--bs-tertiary-bg);
  border-left: 3px solid var(--bs-primary);
  border-radius: 0 0.375rem 0.375rem 0;
  padding: 1rem;
  margin: 0.25rem 0 0.625rem;
}

/* ──────────────────────────────────────────────────────────────────────────── */
/* Tom Select Theme Overrides */
/* ──────────────────────────────────────────────────────────────────────────── */

/* Tom Select (searchable dropdown library) needs dark/light theme fixes.
   The compiled tom-select.bootstrap5.min.css hardcodes color:#343a40 on several
   selectors, and none of them respond to Bootstrap's data-bs-theme attribute.
   We override the root color here so all children inherit correctly, then
   reinforce specific elements. This makes Tom Select dropdowns automatically
   switch colors when the theme changes. */
.ts-control,
.ts-control input,
.ts-dropdown {
  color: var(--bs-body-color) !important;
}
.ts-wrapper .ts-control {
  background-color: var(--bs-body-bg) !important;
  border-color: var(--bs-border-color) !important;
}
.ts-wrapper .ts-control .item {
  background-color: var(--bs-secondary-bg) !important;
  border-color: var(--bs-border-color) !important;
}
.ts-control input::placeholder {
  color: var(--bs-secondary-color) !important;
  opacity: 1;
}
.ts-dropdown {
  background-color: var(--bs-body-bg) !important;
  border-color: var(--bs-border-color) !important;
}
.ts-dropdown .option:hover,
.ts-dropdown .option.active {
  background-color: var(--bs-primary) !important;
  color: #fff !important;
}

/* ──────────────────────────────────────────────────────────────────────────── */
/* Print Styles */
/* ──────────────────────────────────────────────────────────────────────────── */

/* Hide navigation on print and reduce font size for better paper output */
@media print {
  nav, .navbar { display: none !important; }
  body { font-size: 12px; }
}