/*
 * Kwalee BI — Accessibility & Keyboard Navigation Styles
 *
 * Story 7.1: Keyboard Navigation for All Primary Functions
 *
 * Provides:
 * - Global focus ring (2px yellow-500 outline) for all interactive elements
 * - Skip-to-content link for screen readers / keyboard users
 * - Focus-visible-only styles (no focus ring on mouse click)
 * - Component-specific keyboard focus overrides
 */

/* ================================================================== */
/* SKIP-TO-CONTENT LINK                                               */
/* ================================================================== */

.skip-to-content {
  position: absolute;
  top: -100%;
  left: var(--spacing-md);
  z-index: 10000;
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--accent);
  color: var(--accent-text);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.875rem;
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: top 0.15s ease;
}

.skip-to-content:focus {
  top: var(--spacing-sm);
}

/* ================================================================== */
/* GLOBAL FOCUS RING — :focus-visible only                            */
/* Applied to ALL interactive elements via universal selector.        */
/* Uses yellow-500 (#eab308) per spec: 2px outline.                  */
/* ================================================================== */

*:focus-visible {
  outline: 2px solid var(--color-yellow-500);
  outline-offset: 2px;
}

/* Remove default outline for mouse/touch — only show on keyboard */
*:focus:not(:focus-visible) {
  outline: none;
}

/* ================================================================== */
/* NAVIGATION                                                         */
/* ================================================================== */

.shell-nav-item:focus-visible,
.shell-nav-logo:focus-visible {
  outline: 2px solid var(--color-yellow-500);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.shell-sub-tab:focus-visible {
  outline: 2px solid var(--color-yellow-500);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Admin nav tabs */
.admin-nav-tab:focus-visible {
  outline: 2px solid var(--color-yellow-500);
  outline-offset: 2px;
}

/* ================================================================== */
/* BUTTONS & LINKS                                                    */
/* ================================================================== */

button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid var(--color-yellow-500);
  outline-offset: 2px;
}

/* ================================================================== */
/* FILTER BAR                                                         */
/* ================================================================== */

.filter-chip:focus-visible {
  outline: 2px solid var(--color-yellow-500);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Dropdown filter panel — focus-within glow */
.dropdown-filter__panel:focus-within {
  box-shadow: 0 0 0 2px var(--color-yellow-500);
}

/* Dropdown search input */
.dropdown-filter__search-input:focus-visible {
  outline: 2px solid var(--color-yellow-500);
  outline-offset: -2px;
}

/* Dropdown checkbox items — focusable via keyboard */
.dropdown-filter__option:focus-visible {
  outline: 2px solid var(--color-yellow-500);
  outline-offset: -2px;
  background: var(--bg-hover);
}

/* Number range inputs */
.number-range__input:focus-visible {
  outline: 2px solid var(--color-yellow-500);
  outline-offset: -2px;
}

/* Granularity toggle segments */
.granularity-segment:focus-visible {
  outline: 2px solid var(--color-yellow-500);
  outline-offset: 2px;
}

/* ================================================================== */
/* DATA TABLES                                                        */
/* ================================================================== */

/* Dash DataTable cells — keyboard-navigable */
.dash-spreadsheet-container .dash-cell:focus-visible,
.dash-spreadsheet-container td:focus-visible {
  outline: 2px solid var(--color-yellow-500);
  outline-offset: -2px;
}

/* Sortable column headers */
.dash-spreadsheet-container th:focus-visible,
.dash-header:focus-visible {
  outline: 2px solid var(--color-yellow-500);
  outline-offset: -2px;
  background: var(--bg-hover);
}

/* Table navigation hint (shown when table is focused) */
.table-kb-hint {
  display: none;
  font-size: 0.75rem;
  color: var(--text-muted);
  padding: var(--spacing-xs) var(--spacing-sm);
  text-align: right;
}

.table-tile:focus-within .table-kb-hint {
  display: block;
}

/* ================================================================== */
/* MODALS & PANELS — Focus trap indicator                             */
/* ================================================================== */

.ds-modal-backdrop:focus-visible,
.fp-modal-backdrop:focus-visible,
.sql-debug-backdrop:focus-visible {
  outline: none; /* Backdrop shouldn't show ring */
}

.ds-modal__content:focus-visible,
.fp-modal__content:focus-visible,
.sql-debug-modal:focus-visible {
  outline: 2px solid var(--color-yellow-500);
  outline-offset: -2px;
  border-radius: var(--radius-lg);
}

/* ================================================================== */
/* DRILL-DOWN                                                         */
/* ================================================================== */

/* Breadcrumb items */
.drill-breadcrumb-item--clickable:focus-visible {
  outline: 2px solid var(--color-yellow-500);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Sub-view tabs */
.drill-sub-tab:focus-visible {
  outline: 2px solid var(--color-yellow-500);
  outline-offset: 2px;
}

/* Drillable table rows */
tr.drill-row--clickable:focus-visible {
  outline: 2px solid var(--color-yellow-500);
  outline-offset: -2px;
}

/* ================================================================== */
/* USER MENU                                                          */
/* ================================================================== */

.shell-user-avatar:focus-visible {
  outline: 2px solid var(--color-yellow-500);
  outline-offset: 2px;
  border-radius: 50%;
}

.shell-dropdown-item:focus-visible {
  outline: 2px solid var(--color-yellow-500);
  outline-offset: -2px;
  background: var(--bg-hover);
}

/* ================================================================== */
/* TILE CONTEXT MENUS                                                 */
/* ================================================================== */

.tile-ctx-menu-item:focus-visible {
  outline: 2px solid var(--color-yellow-500);
  outline-offset: -2px;
  background: var(--bg-hover);
}

/* ================================================================== */
/* EXPLORE PAGE                                                       */
/* ================================================================== */

.explore-view-toggle:focus-visible {
  outline: 2px solid var(--color-yellow-500);
  outline-offset: 2px;
}

/* App gallery tiles */
.app-gallery-tile:focus-visible {
  outline: 2px solid var(--color-yellow-500);
  outline-offset: 2px;
}

/* ================================================================== */
/* MOBILE MENU                                                        */
/* ================================================================== */

.shell-hamburger:focus-visible {
  outline: 2px solid var(--color-yellow-500);
  outline-offset: 2px;
}

.shell-mobile-nav-item:focus-visible {
  outline: 2px solid var(--color-yellow-500);
  outline-offset: -2px;
  background: var(--bg-hover);
}

/* ================================================================== */
/* THEME TOGGLE                                                       */
/* ================================================================== */

.shell-theme-segment:focus-visible {
  outline: 2px solid var(--color-yellow-500);
  outline-offset: 2px;
}

/* ================================================================== */
/* DATA SOURCE CARDS                                                  */
/* ================================================================== */

.ds-card:focus-visible {
  outline: 2px solid var(--color-yellow-500);
  outline-offset: 2px;
}

/* ================================================================== */
/* ADMIN COMPONENTS                                                   */
/* ================================================================== */

.admin-cache-action-btn:focus-visible,
.admin-role-action-btn:focus-visible,
.admin-conn-action-btn:focus-visible {
  outline: 2px solid var(--color-yellow-500);
  outline-offset: 2px;
}

/* ================================================================== */
/* SCREEN-READER ONLY (visually hidden, accessible to AT)             */
/* ================================================================== */

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

/* ================================================================== */
/* ARIA LIVE REGIONS                                                   */
/* ================================================================== */

.sr-live-region {
  /* Visually minimal — content is for screen readers */
}

.sr-live-region:empty {
  /* No visual footprint when empty */
  display: none;
}

/* ================================================================== */
/* REDUCED MOTION — respect prefers-reduced-motion                    */
/* ================================================================== */

@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;
  }
}

/* ================================================================== */
/* MINIMUM TEXT SIZE — enforce WCAG 1.4.4 (200% zoom safe)            */
/* ================================================================== */

html {
  font-size: 100%; /* 16px base — never below */
}

/* ================================================================== */
/* HIGH CONTRAST — forced-colors support                              */
/* ================================================================== */

@media (forced-colors: active) {
  *:focus-visible {
    outline: 2px solid CanvasText;
  }

  .admin-status-badge,
  .kpi-tile--green,
  .kpi-tile--yellow,
  .kpi-tile--red {
    border-color: CanvasText;
  }

  /* Story 7.3: ensure dual-encoding elements visible in high contrast */
  .kpi-status-badge,
  .freshness-status-icon,
  .freshness-status-label {
    forced-color-adjust: auto;
  }

  .freshness-dot {
    border: 1px solid CanvasText;
  }
}