/* ─── Modern UI polish — applied to every renderPage()-served page ─────────
 *
 * Targets the common class names already in use across the app:
 *   .topbar / .brand / .nav-tab           — top navigation
 *   .it-subnav / .it-sub-tab              — IT sub-nav strip
 *   .card / .sum-card / .mini-card /      — KPI / summary cards
 *   .res-card / .eng-stat /
 *   .hd-chart-card                         — chart panels on dashboards
 *   .btn / .btn-ghost / .icon-btn /        — buttons
 *   .qa-btn / .preset / .preset-btn
 *   .status-badge / .status-pill /
 *   .alert-count / .it-sub-badge           — badges
 *   .modal-overlay / .modal                — modals
 *
 * Goals: subtle depth (gradients + soft shadows), refined hover/active
 * states, smoother transitions, animated badges. Accessibility kept (focus
 * outlines preserved, color contrast maintained).
 *
 * Light + dark themes both supported via the existing CSS variables. Uses
 * rgba() over color-mix() for broader browser compatibility.
 */

/* ── Topbar polish ───────────────────────────────────────────────────────── */
.topbar {
  background: linear-gradient(180deg, var(--surface) 0%, var(--bg) 130%);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04), 0 6px 14px -10px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.brand {
  letter-spacing: -0.3px;
  text-shadow: 0 0 14px rgba(88, 166, 255, 0.18);
  transition: filter 0.2s ease;
}
.brand:hover { filter: brightness(1.15); }

/* Nav icons — small visual anchors before each label */
.nav-icon {
  display: inline-block;
  margin-right: 6px;
  font-size: 0.95em;
  opacity: 0.7;
  transition: opacity 0.15s ease, transform 0.15s ease;
  vertical-align: middle;
}
.nav-tab:hover .nav-icon,
.nav-tab.active .nav-icon,
.it-sub-tab:hover .nav-icon,
.it-sub-tab.active .nav-icon {
  opacity: 1;
  transform: scale(1.05);
}

/* Nav tabs — animated underline + better hover */
.nav-tab {
  position: relative;
  transition: color 0.15s ease;
}
.nav-tab::after {
  content: '';
  position: absolute;
  bottom: 0; left: 50%; right: 50%;
  height: 2px;
  background: var(--accent);
  transition: left 0.2s ease, right 0.2s ease, opacity 0.2s ease;
  opacity: 0;
}
.nav-tab:hover::after,
.nav-tab.active::after { left: 8px; right: 8px; opacity: 1; }
.nav-tab:hover { color: var(--text); }

/* ── IT sub-nav ──────────────────────────────────────────────────────────── */
.it-subnav {
  background: linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 4px 10px -8px rgba(0, 0, 0, 0.18);
}
.it-subnav .it-sub-tab {
  position: relative;
  transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
.it-subnav .it-sub-tab:hover { transform: translateY(-1px); }

/* ── Badges — subtle pulse so the eye catches new alerts ─────────────────── */
.alert-count,
.it-sub-badge,
#helpdesk-badge {
  background: linear-gradient(135deg, #f85149 0%, #d73a3a 100%) !important;
  box-shadow: 0 0 0 0 rgba(248, 81, 73, 0.55);
  animation: badge-pulse 2.4s ease-in-out infinite;
  font-variant-numeric: tabular-nums;
}
@keyframes badge-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(248, 81, 73, 0.5); }
  50%      { box-shadow: 0 0 0 5px rgba(248, 81, 73, 0); }
}

/* ── Cards — depth + lift on hover ───────────────────────────────────────── */
.card,
.sum-card,
.mini-card,
.res-card,
.eng-stat,
.hd-chart-card {
  position: relative;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.018) 0%, transparent 60%);
}
[data-theme="light"] .card,
[data-theme="light"] .sum-card,
[data-theme="light"] .mini-card,
[data-theme="light"] .res-card,
[data-theme="light"] .eng-stat,
[data-theme="light"] .hd-chart-card {
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.012) 0%, transparent 60%);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

/* Hoverable cards: lift + glow */
.card:hover,
.sum-card-clickable:hover,
.mini-card:hover,
.res-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent) !important;
  box-shadow: 0 8px 18px -8px rgba(88, 166, 255, 0.28),
              0 2px 4px rgba(0, 0, 0, 0.08);
}

/* Cursor for any clickable summary/KPI card. Defined globally so per-page
   CSS doesn't have to repeat it; pages just add the .sum-card-clickable
   class (or use <a class="card">) to opt-in. */
.sum-card-clickable, a.card, a.res-card { cursor: pointer; }

/* Cards with semantic color — get a tinted top accent strip */
.card.green   { box-shadow: inset 3px 0 0 rgba(63, 185, 80, 0.65); }
.card.red     { box-shadow: inset 3px 0 0 rgba(248, 81, 73, 0.7); }
.card.orange  { box-shadow: inset 3px 0 0 rgba(227, 179, 65, 0.7); }
.card.muted   { box-shadow: inset 3px 0 0 rgba(139, 148, 158, 0.45); }
.mini-card.green   { box-shadow: inset 3px 0 0 rgba(63, 185, 80, 0.65); }
.mini-card.red     { box-shadow: inset 3px 0 0 rgba(248, 81, 73, 0.7); }
.mini-card.orange  { box-shadow: inset 3px 0 0 rgba(227, 179, 65, 0.7); }
.mini-card.muted   { box-shadow: inset 3px 0 0 rgba(139, 148, 158, 0.45); }
.eng-stat.green    { box-shadow: inset 3px 0 0 rgba(63, 185, 80, 0.65); }
.eng-stat.red      { box-shadow: inset 3px 0 0 rgba(248, 81, 73, 0.7); }
.eng-stat.orange   { box-shadow: inset 3px 0 0 rgba(227, 179, 65, 0.7); }

.card .num,
.sum-num,
.mini-card .num,
.res-total,
.eng-stat .num {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.5px;
  font-feature-settings: 'tnum' 1;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
  background: linear-gradient(135deg, var(--accent) 0%, #4690d8 100%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1),
              inset 0 1px 0 rgba(255, 255, 255, 0.15);
  transition: transform 0.1s ease, box-shadow 0.18s ease, opacity 0.15s ease;
  font-weight: 600;
}
.btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px -4px rgba(88, 166, 255, 0.4),
              inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }

.btn-ghost {
  background: transparent !important;
  box-shadow: none;
  font-weight: 500;
}
.btn-ghost:hover:not(:disabled) {
  background: rgba(88, 166, 255, 0.1) !important;
  border-color: var(--accent);
  color: var(--text);
  transform: none;
}

.btn-danger {
  background: linear-gradient(135deg, #f85149 0%, #c43b35 100%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.btn-danger:hover:not(:disabled) {
  box-shadow: 0 6px 14px -4px rgba(248, 81, 73, 0.45);
}
.btn-green {
  background: linear-gradient(135deg, #3fb950 0%, #2e8e3a 100%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.btn-green:hover:not(:disabled) {
  box-shadow: 0 6px 14px -4px rgba(63, 185, 80, 0.4);
}

.icon-btn {
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.icon-btn:hover:not(:disabled) {
  background: rgba(88, 166, 255, 0.07);
  border-color: var(--accent);
  color: var(--text);
}

/* ── Filter chips / preset buttons ───────────────────────────────────────── */
.qa-btn,
.preset,
.preset-btn {
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.qa-btn.active,
.preset.active,
.preset-btn.active {
  background: linear-gradient(135deg, var(--accent) 0%, #4690d8 100%) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
  box-shadow: 0 2px 6px -2px rgba(88, 166, 255, 0.45);
}

.filter-row label.on {
  background: linear-gradient(135deg, rgba(88, 166, 255, 0.18) 0%, rgba(88, 166, 255, 0.08) 100%) !important;
  border-color: var(--accent) !important;
  color: var(--text) !important;
  font-weight: 600;
}

/* ── Status / priority pills — subtle gradient ───────────────────────────── */
.status-badge,
.status-pill,
.sla-pill,
.spec-pill,
.role-pill,
.action-pill {
  font-feature-settings: 'tnum' 1;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, transparent 100%);
  letter-spacing: 0.5px;
}

/* ── Tables ──────────────────────────────────────────────────────────────── */
thead th {
  background-image: linear-gradient(180deg, var(--head) 0%, var(--bg) 110%) !important;
  font-weight: 700 !important;
}
tbody tr {
  transition: background 0.1s ease;
}

/* Sticky-thead bug guard — when a list page contains its table in a
   scrollable wrap (overflow:auto / overflow-y:auto), the sticky thead
   must pin to the wrap's top edge (top:0), NOT to the page topbar
   height. Pages that incorrectly set top:44px would overlap with the
   IT sub-nav. Forcing top:0 here is safe because: (a) thead sticky is
   relative to its scrolling ancestor, so 0 means "top of wrap"; (b)
   pages that DO scroll the page (no inner wrap) have non-sticky thead
   anyway. */
[class*="-wrap"] > table > thead > tr > th[style*="sticky"],
[class*="-wrap"] > table thead th {
  /* No-op; the actual top: enforcement lives on the per-page selectors
     where applicable. This block kept as a hook for future defense. */
}

/* ── Modals — backdrop blur ──────────────────────────────────────────────── */
.modal-overlay {
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  background: rgba(0, 0, 0, 0.6);
}
.modal {
  box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.5),
              0 0 0 1px rgba(255, 255, 255, 0.04) inset;
}

/* ── Inputs / selects — focus glow ───────────────────────────────────────── */
input:focus, select:focus, textarea:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.15);
}

/* ── Sub-nav badge animation ─────────────────────────────────────────────── */
.it-sub-badge {
  animation: badge-pulse 2.4s ease-in-out infinite;
}

/* Reduce motion preference — respect it */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    transition-duration: 0.001s !important;
  }
}