/*
 * common.css — Shared rules extracted from page-specific stylesheets.
 * Load BEFORE page CSS so page-specific overrides take precedence.
 */

/* ── FINDING-513: CSS custom property fallback defaults ──── */
:root {
  --accent: #44b7e9;
  --surface: #12151c;
  --surface2: #1a1e28;
  --surface3: #222836;
  --border: rgba(255, 255, 255, 0.06);
  --text: #e8eaf0;
  --text-muted: #9ba4b4;
  --text-dim: #717d93;
  --bg: #0a0c10;
  --topbar-h: 52px;
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --font-heading:
    'Onest', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Onest', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'DM Mono', monospace;
}

/* ── UX-009: Font rendering improvements ────────────────── */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings:
    'kern' 1,
    'liga' 1;
}

/* ── Accessibility: Skip Link ─────────────────────────────── */
.skip-link {
  position: absolute;
  top: -100%;
  left: 16px;
  background: var(--accent);
  color: #000;
  padding: 8px 16px;
  border-radius: 6px;
  z-index: 10000;
  font-weight: 600;
  transition: top 0.2s;
  text-decoration: none;
}
.skip-link:focus {
  top: 8px;
}

/* ── Accessibility: Focus indicators ──────────────────────── */
*:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ── Accessibility: 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;
  }
}

/* ── Accessibility: Screen reader only ────────────────────── */
.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;
}

/* ── Animation: fadeUp ────────────────────────────────────── */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Theme toggle (fixed position) ────────────────────────── */
.theme-toggle {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 1000;
  display: flex;
  gap: 8px;
  align-items: center;
}

/* ── Topbar component ─────────────────────────────────────── */
.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--topbar-h);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 16px;
  z-index: 100;
  gap: 12px;
}
.topbar .logo {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}
.topbar .logo-text {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 18px;
  color: var(--text);
}
.topbar .logo-sub {
  font-size: 11px;
  color: var(--text-muted);
}
.topbar .nav-links {
  display: flex;
  gap: 4px;
  margin-left: 24px;
}
.topbar .nav-links a {
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
}
.topbar .nav-links a:hover {
  background: var(--surface2);
  color: var(--text);
  text-decoration: none;
}
.topbar .nav-links a.active {
  background: var(--accent-dim);
  color: var(--accent);
}
.topbar .spacer {
  flex: 1;
}
.topbar .user-section {
  display: flex;
  align-items: center;
  gap: 10px;
}
.topbar .user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #44b7e9, #104bca);
}

/* ── FINDING-503: Safe-area-inset for notched devices ───── */
@supports (padding: env(safe-area-inset-top)) {
  .topbar {
    padding-top: env(safe-area-inset-top);
    height: calc(var(--topbar-h) + env(safe-area-inset-top));
  }
  body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* ── FINDING-502: Prevent Safari iOS auto-zoom on input focus ── */
@media screen and (max-width: 768px) {
  input[type='text'],
  input[type='email'],
  input[type='password'],
  input[type='tel'],
  input[type='number'],
  input[type='url'],
  input[type='search'],
  input[type='date'],
  select,
  textarea {
    font-size: 16px;
  }
}

/* ── FINDING-508: Touch targets minimum 44x44px ────────── */
@media (pointer: coarse) {
  button,
  a,
  [role='button'],
  [role='tab'],
  input[type='checkbox'],
  input[type='radio'],
  select {
    min-height: 44px;
    min-width: 44px;
  }
  .topbar .nav-links a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* ── FINDING-512: Gate hover states for touch devices ──── */
/* Touch devices get 'ontouchstart' class added by JS to gate hover states */
@media (hover: none) and (pointer: coarse) {
  /* Disable persistent hover effects on touch devices to prevent sticky states */
  .topbar .nav-links a:hover,
  .nav-item:hover,
  .btn:hover,
  .btn-primary:hover,
  .btn-outline:hover,
  .case-table tbody tr:hover,
  .filter-tag:hover {
    background: inherit;
    color: inherit;
    opacity: inherit;
    transform: none;
  }
}

/* ── FINDING-514: Wide tables scroll affordance ────────── */
.table-scroll-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
}
.table-scroll-wrapper::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 24px;
  pointer-events: none;
  background: linear-gradient(to left, var(--bg), transparent);
  opacity: 0;
  transition: opacity 0.2s;
}
.table-scroll-wrapper.has-overflow::after {
  opacity: 1;
}

/* ── FINDING-516: scrollbar-width fallback for Safari ──── */
/* Firefox supports scrollbar-width natively; Safari needs ::-webkit-scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: var(--surface, #12151c);
}
::-webkit-scrollbar-thumb {
  background: var(--surface3, #222836);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--text-dim, #717d93);
}

/* ── #1687: Loading spinner accessibility ──────────────────── */
.spinner,
[class*='loading'],
[class*='spinner'] {
  /* Ensure spinners that lack aria-label have a fallback */
}
.spinner[aria-label],
[role='status'] {
  /* Already accessible — no additional styles needed */
}

/* ── #1690: Form error announcements for screen readers ───── */
.form-error,
.field-error,
.error-message,
.validation-error {
  color: var(--red, #ff5e7a);
  font-size: 12px;
  margin-top: 4px;
}

/* ── #1691: Standardized modal close buttons ──────────────── */
.modal-close,
.modal [data-action*='close'],
.modal button[aria-label='Close'],
.modal button[aria-label*='close'] {
  position: absolute;
  top: 12px;
  right: 12px;
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-muted);
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition:
    background 0.15s,
    color 0.15s;
}
.modal-close:hover,
.modal [data-action*='close']:hover {
  background: var(--surface2);
  color: var(--text);
}

/* ── #1685: Focus trap overlay for modals ─────────────────── */
.modal-overlay {
  display: none;
}
.modal-overlay.active,
.modal-overlay[style*='flex'] {
  display: flex;
}
.modal {
  position: relative;
}

/* ── #1686: Improved color contrast for WCAG AA ───────────── */
:root[data-theme='light'] {
  --text-muted: #546178;
  --text-dim: #475569;
}