/*
 * visibility.com.ai — Premium Client Portal Design System
 * ──────────────────────────────────────────────────────────
 * Loaded LAST on all client pages. Transforms the dashboard
 * into a world-class agency experience.
 *
 * Design tokens: #c4a882 warm tan accent (Charlotte design), beige/white neutrals,
 * Instrument Serif headings, Inter body, subtle shadows, micro-animations.
 * CSS-variable driven for future dark-mode support.
 */

/* ═══ FONTS ═══════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

/* ═══ CSS CUSTOM PROPERTIES (DESIGN TOKENS) ═══════════════ */
:root {
  /* Brand — Green (companies.sh aesthetic) */
  --brand: #c4a882;
  --brand-hover: #a68b6b;
  --brand-light: rgba(196, 168, 130, 0.08);
  --brand-lighter: rgba(196, 168, 130, 0.04);
  --brand-border: rgba(196, 168, 130, 0.2);
  --brand-glow: rgba(196, 168, 130, 0.15);

  /* Surfaces — Warm neutrals */
  --bg: #ffffff;
  --white: #ffffff;
  --surface: #ffffff;
  --surface-hover: #f5f3f0;
  --surface-raised: #ffffff;
  --surface-sunken: #f5f3f0;

  /* Borders */
  --border: #e0dcd6;
  --border-light: #f0ece7;
  --border-focus: rgba(196, 168, 130, 0.5);

  /* Text */
  --text: #1a1a1a;
  --text-2: #4a4a4a;
  --text-3: #888880;
  --text-inverse: #ffffff;

  /* Semantic */
  --green: #8a9a82;
  --green-light: rgba(138, 154, 130, 0.10);
  --green-border: rgba(138, 154, 130, 0.25);
  --amber: #c4a050;
  --amber-light: rgba(196, 160, 80, 0.08);
  --amber-border: rgba(196, 160, 80, 0.2);
  --red: #b87070;
  --red-light: rgba(184, 112, 112, 0.06);
  --red-border: rgba(184, 112, 112, 0.2);
  --blue: #c4a882;
  --blue-light: rgba(196, 168, 130, 0.08);

  /* Shapes */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.03);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.03);
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.08);
  --shadow-brand: 0 4px 14px rgba(0, 0, 0, 0.10);

  /* Transitions */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --duration-fast: 150ms;
  --duration: 200ms;
  --duration-slow: 300ms;

  /* Sidebar */
  --sidebar-w: 260px;
}


/* ═══ GLOBAL RESETS & BASE ════════════════════════════════ */
*,
*::before,
*::after {
  box-sizing: border-box !important;
  margin: 0;
  padding: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 0;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  background: var(--bg) !important;
  color: var(--text) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

/* ═══ EDITORIAL TYPOGRAPHY ════════════════════════════════ */
.editorial-headline,
.page-header-left h1 {
  font-family: 'Instrument Serif', Georgia, serif !important;
  font-weight: 400 !important;
  letter-spacing: -0.02em !important;
}


/* Override global-override's !important border-radius: 0 */
.card, .metric-card, .plat-card, .hero-card, .chart-section,
.card-section, .schedule-card, .dd-card, .feed-card, .lb-card,
.query-table-section, .roadmap-section, .coverage-matrix-section,
.roi-banner, .auth-gate-card, .cm-modal, .progress-card,
[class*="-card"], [class*="card-"] {
  border-radius: var(--radius) !important;
}

/* ═══ TYPOGRAPHY ══════════════════════════════════════════ */
h1, h2, h3 {
  font-family: 'Instrument Serif', Georgia, serif !important;
  font-weight: 400 !important;
  color: var(--text) !important;
  letter-spacing: -0.02em !important;
  line-height: 1.2 !important;
}

h4, h5, h6 {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  letter-spacing: -0.01em !important;
}


/* ═══ SIDEBAR ═════════════════════════════════════════════ */
.sidebar {
  width: var(--sidebar-w) !important;
  background: var(--white) !important;
  border-right: 1px solid var(--border) !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

.sidebar-logo {
  padding: 22px 22px 20px !important;
  border-bottom: 1px solid var(--border) !important;
}

.sidebar-logo-mark {
  width: 32px !important;
  height: 32px !important;
  background: var(--brand) !important;
  border-radius: var(--radius-sm) !important;
}

.sidebar-logo-text {
  font-family: 'Instrument Serif', Georgia, serif !important;
  font-size: 17px !important;
  font-weight: 400 !important;
  color: var(--text) !important;
  letter-spacing: -0.01em !important;
}

.sidebar-logo-text span {
  color: var(--brand) !important;
}

.sidebar-section {
  padding: 0 14px !important;
}

.sidebar-section-title {
  font-family: 'Inter', sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--text-3) !important;
  padding: 18px 10px 6px !important;
}

.sidebar-item {
  font-family: 'Inter', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: var(--text-2) !important;
  padding: 8px 12px !important;
  border-radius: var(--radius-sm) !important;
  border-left: none !important;
  transition: all var(--duration) var(--ease) !important;
  gap: 10px !important;
}

.sidebar-item:hover {
  background: rgba(196, 168, 130, 0.10) !important;
  color: var(--text) !important;
}

.sidebar-item.active {
  background: rgba(196, 168, 130, 0.12) !important;
  color: var(--text) !important;
  font-weight: 600 !important;
  border-left: none !important;
  padding-left: 12px !important;
}

.sidebar-item svg {
  opacity: 0.7 !important;
  transition: opacity var(--duration) var(--ease) !important;
}

.sidebar-item:hover svg,
.sidebar-item.active svg {
  opacity: 1 !important;
  stroke: var(--brand) !important;
}

.sidebar-item .coming-soon {
  font-family: 'Inter', sans-serif !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  color: var(--text-3) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-full) !important;
  padding: 2px 8px !important;
}

.sidebar-footer {
  border-top: 1px solid var(--border) !important;
  padding: 16px 22px !important;
}

.sidebar-client {
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  color: var(--text-2) !important;
}

.sidebar-client strong {
  color: var(--text) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
}


/* ═══ CONTENT WRAPPER ═════════════════════════════════════ */
.content-wrapper {
  margin-left: var(--sidebar-w) !important;
  background: var(--bg) !important;
}

.main {
  max-width: 1120px !important;
  margin: 0 auto !important;
  padding: 36px 40px 80px !important;
}


/* ═══ MOBILE HEADER ═══════════════════════════════════════ */
.mobile-header {
  background: var(--white) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: var(--shadow-xs) !important;
}

.mobile-logo {
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  color: var(--text) !important;
}

.mobile-logo span {
  color: #c4a882 !important;
}


/* ═══ PAGE HEADER ═════════════════════════════════════════ */
.page-header {
  margin-bottom: 32px !important;
}

.page-header-left h1 {
  font-family: 'Inter', sans-serif !important;
  font-size: 28px !important;
  font-weight: 800 !important;
  color: var(--text) !important;
  letter-spacing: -0.03em !important;
}

.page-header-left p {
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  color: var(--text-2) !important;
}


/* ═══ HERO CARD ═══════════════════════════════════════════ */
.hero-card {
  background: var(--white) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  padding: 32px !important;
  margin-bottom: 24px !important;
  box-shadow: var(--shadow-sm) !important;
  position: relative !important;
  overflow: hidden !important;
  transition: box-shadow var(--duration) var(--ease) !important;
}

.hero-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: var(--brand) !important;
  display: block !important;
}

.hero-card:hover {
  box-shadow: var(--shadow-md) !important;
}

.hero-label {
  font-family: 'Inter', sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #a68b6b !important;
}

.hero-info h2 {
  font-family: 'Inter', sans-serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
}

.hero-info p {
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  color: var(--text-2) !important;
  line-height: 1.6 !important;
}

.hero-delta {
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 5px 12px !important;
  border-radius: var(--radius-full) !important;
  border: none !important;
}

.hero-delta.up {
  color: var(--green) !important;
  background: var(--green-light) !important;
  border: 1px solid var(--green-border) !important;
}

.hero-delta.down {
  color: var(--red) !important;
  background: var(--red-light) !important;
  border: 1px solid var(--red-border) !important;
}

.hero-delta.flat {
  color: var(--text-2) !important;
  background: var(--surface-sunken) !important;
}

.hero-meta {
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  color: var(--text-3) !important;
}


/* ═══ METRIC CARDS ════════════════════════════════════════ */
.metrics-grid {
  gap: 16px !important;
  margin-bottom: 28px !important;
}

.metric-card {
  background: var(--white) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  padding: 22px !important;
  box-shadow: var(--shadow-xs) !important;
  transition: all var(--duration) var(--ease) !important;
}

.metric-card:hover {
  box-shadow: var(--shadow) !important;
  border-color: var(--brand-border) !important;
  transform: translateY(-1px) !important;
}

.metric-card-label {
  font-family: 'Inter', sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--text-3) !important;
  margin-bottom: 10px !important;
}

.metric-card-value {
  font-family: 'Inter', sans-serif !important;
  font-size: 32px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  letter-spacing: -0.02em !important;
}

.metric-card-sub {
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  color: var(--text-2) !important;
}


/* ═══ PLATFORM CARDS ══════════════════════════════════════ */
.platforms-section {
  margin-bottom: 28px !important;
}

.section-heading {
  font-family: 'Inter', sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  margin-bottom: 16px !important;
  letter-spacing: -0.01em !important;
}

.section-heading svg {
  stroke: #c4a882 !important;
}

.plat-card {
  background: var(--white) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  padding: 20px !important;
  box-shadow: var(--shadow-xs) !important;
  transition: all var(--duration) var(--ease) !important;
}

.plat-card:hover {
  box-shadow: var(--shadow) !important;
  transform: translateY(-2px) !important;
  border-color: var(--brand-border) !important;
}

.plat-icon {
  width: 32px !important;
  height: 32px !important;
  border-radius: var(--radius-sm) !important;
  border: none !important;
  font-weight: 700 !important;
}

/* Platform-specific icon colors — muted warm tones */
.pi-chatgpt {
  background: rgba(138, 154, 130, 0.10) !important;
  color: #7d8c76 !important;
  border-color: transparent !important;
}

.pi-perplexity {
  background: rgba(160, 150, 135, 0.10) !important;
  color: #9a8e7d !important;
  border-color: transparent !important;
}

.pi-gemini {
  background: rgba(145, 140, 130, 0.10) !important;
  color: #8a8578 !important;
  border-color: transparent !important;
}

.pi-claude {
  background: rgba(196, 168, 130, 0.10) !important;
  color: #c4a882 !important;
  border-color: transparent !important;
}

.plat-name {
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--text) !important;
}

.plat-score {
  font-family: 'Inter', sans-serif !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
}

.plat-denom {
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  color: var(--text-3) !important;
}

.plat-bar {
  height: 4px !important;
  background: var(--surface-sunken) !important;
  border-radius: var(--radius-full) !important;
  overflow: hidden !important;
}

.plat-bar-fill {
  border-radius: var(--radius-full) !important;
  transition: width 1s var(--ease) !important;
}

.fill-green { background: var(--green) !important; }
.fill-amber { background: var(--amber) !important; }
.fill-red { background: var(--red) !important; }
.fill-purple { background: var(--brand) !important; }


/* ═══ CHART SECTION ═══════════════════════════════════════ */
.chart-section {
  background: var(--white) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  padding: 28px !important;
  margin-bottom: 28px !important;
  box-shadow: var(--shadow-xs) !important;
}

.chart-header h3 {
  font-family: 'Inter', sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
}

.chart-controls {
  background: var(--surface-sunken) !important;
  border-radius: var(--radius-sm) !important;
  padding: 3px !important;
}

.chart-btn {
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--text-2) !important;
  border-radius: var(--radius-xs) !important;
  padding: 6px 14px !important;
  transition: all var(--duration-fast) var(--ease) !important;
  border: none !important;
}

.chart-btn.active,
.chart-btn:hover {
  background: var(--white) !important;
  color: var(--text) !important;
  border: none !important;
  box-shadow: var(--shadow-xs) !important;
}

.legend-item {
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  color: var(--text-2) !important;
}

.legend-dot {
  border-radius: var(--radius-full) !important;
}


/* ═══ CARD SECTIONS ═══════════════════════════════════════ */
.card-section {
  background: var(--white) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  overflow: hidden !important;
  box-shadow: var(--shadow-xs) !important;
}

.card-section-header {
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  padding: 18px 22px 16px !important;
  border-bottom: 1px solid var(--border) !important;
}


/* ═══ SCANS TABLE ═════════════════════════════════════════ */
.scans-table {
  font-family: 'Inter', sans-serif !important;
}

.scans-table th {
  font-family: 'Inter', sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--text-3) !important;
  border-bottom: 1px solid var(--border) !important;
  background: var(--surface-sunken) !important;
}

.scans-table td {
  font-family: 'Inter', sans-serif !important;
  color: var(--text-2) !important;
  border-top: 1px solid var(--border-light) !important;
}

.scans-table tbody tr:hover td {
  background: var(--brand-lighter) !important;
}

.scans-table td.main-cell {
  color: var(--text) !important;
  font-weight: 500 !important;
}

.score-chip {
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  border-radius: var(--radius-xs) !important;
}

.score-high { color: var(--green) !important; }
.score-mid { color: var(--amber) !important; }
.score-low { color: var(--red) !important; }

.status-badge {
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
}

.status-badge.completed { color: var(--green) !important; }
.status-badge.processing { color: var(--amber) !important; }
.status-badge.failed { color: var(--red) !important; }


/* ═══ QUERY TABLE ═════════════════════════════════════════ */
.query-table-section {
  background: var(--white) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-xs) !important;
  overflow: hidden !important;
}

.query-table-header {
  border-bottom: 1px solid var(--border) !important;
}

.query-table-header h3 {
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
}

.query-table {
  font-family: 'Inter', sans-serif !important;
}

.query-table th {
  font-family: 'Inter', sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--text-3) !important;
  border-bottom: 1px solid var(--border) !important;
  background: var(--surface-sunken) !important;
}

.query-table td {
  border-top: 1px solid var(--border-light) !important;
  color: var(--text-2) !important;
}

.check { color: var(--green) !important; }
.cross { color: var(--red) !important; }


/* ═══ RECOMMENDATIONS ═════════════════════════════════════ */
.rec-item {
  padding: 16px 0 !important;
  border-bottom: 1px solid var(--border-light) !important;
}

.rec-num {
  border-radius: var(--radius-xs) !important;
  background: var(--brand-light) !important;
  border: 1px solid var(--brand-border) !important;
  color: var(--brand) !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
}

.rec-title {
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--text) !important;
}

.rec-desc {
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  color: var(--text-2) !important;
}

.priority-tag {
  font-family: 'Inter', sans-serif !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  border-radius: var(--radius-full) !important;
  padding: 2px 8px !important;
}

.priority-high { color: var(--red) !important; background: var(--red-light) !important; border-color: var(--red-border) !important; }
.priority-medium { color: var(--amber) !important; background: var(--amber-light) !important; border-color: var(--amber-border) !important; }
.priority-low { color: var(--green) !important; background: var(--green-light) !important; border-color: var(--green-border) !important; }


/* ═══ PROGRESS SECTION ════════════════════════════════════ */
.progress-card {
  background: var(--white) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  padding: 20px 18px !important;
  box-shadow: var(--shadow-xs) !important;
  transition: all var(--duration) var(--ease) !important;
}

.progress-card:hover {
  box-shadow: var(--shadow) !important;
  transform: translateY(-1px) !important;
}

.progress-card-label {
  font-family: 'Inter', sans-serif !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
  color: var(--text-3) !important;
}

.progress-card-value {
  font-family: 'Inter', sans-serif !important;
  font-size: 32px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  letter-spacing: -0.02em !important;
}

.progress-card-sub {
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  color: var(--text-2) !important;
}

.progress-bar-track {
  height: 4px !important;
  background: var(--surface-sunken) !important;
  border-radius: var(--radius-full) !important;
  overflow: hidden !important;
}

.progress-bar-fill {
  background: var(--brand) !important;
  border-radius: var(--radius-full) !important;
  transition: width 1s var(--ease) !important;
}


/* ═══ ROI BANNER ══════════════════════════════════════════ */
.roi-banner {
  background: var(--white) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  padding: 24px 28px !important;
  box-shadow: var(--shadow-xs) !important;
}

.roi-item-label {
  font-family: 'Inter', sans-serif !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
  color: var(--text-3) !important;
}

.roi-item-value {
  font-family: 'Inter', sans-serif !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  letter-spacing: -0.02em !important;
}

.roi-item-value.positive { color: var(--green) !important; }
.roi-item-value.neutral { color: var(--text-2) !important; }

.roi-divider {
  background: var(--border) !important;
}


/* ═══ SCHEDULE CARDS ══════════════════════════════════════ */
.schedule-card {
  background: var(--white) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  padding: 20px 18px 16px !important;
  box-shadow: var(--shadow-xs) !important;
  transition: all var(--duration) var(--ease) !important;
}

.schedule-card:hover {
  box-shadow: var(--shadow) !important;
  transform: translateY(-1px) !important;
}

.schedule-card.running {
  border-color: var(--brand) !important;
  background: var(--brand-lighter) !important;
  box-shadow: 0 0 0 3px var(--brand-glow) !important;
}

.schedule-card-label {
  font-family: 'Inter', sans-serif !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  color: var(--text-3) !important;
}

.schedule-card-when {
  font-family: 'Inter', sans-serif !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
}

.schedule-card-when.soon { color: #a68b6b !important; }
.schedule-card-when.today { color: var(--green) !important; }
.schedule-card-when.overdue { color: var(--red) !important; }
.schedule-card-when.running-text { color: #a68b6b !important; }

.schedule-card-desc {
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  color: var(--text-3) !important;
}

.schedule-card-bar {
  height: 3px !important;
  background: var(--surface-sunken) !important;
  border-radius: var(--radius-full) !important;
  overflow: hidden !important;
}

.schedule-card-bar-fill {
  background: var(--brand) !important;
  border-radius: var(--radius-full) !important;
}

.live-pulse {
  background: var(--brand) !important;
  box-shadow: 0 0 0 3px var(--brand-glow) !important;
}


/* ═══ ACTIVITY FEED ═══════════════════════════════════════ */
.feed-card {
  background: var(--white) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  overflow: hidden !important;
  box-shadow: var(--shadow-xs) !important;
}

.feed-card-header {
  border-bottom: 1px solid var(--border) !important;
}

.feed-card-title {
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
}

.feed-item {
  border-bottom: 1px solid var(--border-light) !important;
  transition: background var(--duration-fast) var(--ease) !important;
}

.feed-item:hover {
  background: var(--brand-lighter) !important;
}

.feed-item-title {
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--text) !important;
}

.feed-item-meta {
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  color: var(--text-3) !important;
}

.feed-item-link {
  font-family: 'Inter', sans-serif !important;
  color: #a68b6b !important;
  font-weight: 500 !important;
}

.feed-detail-cell {
  background: var(--surface-sunken) !important;
  border: 1px solid var(--border-light) !important;
  border-radius: var(--radius-xs) !important;
}

.feed-detail-cell-label {
  font-family: 'Inter', sans-serif !important;
  color: var(--text-3) !important;
}

.feed-detail-cell-value {
  font-family: 'Inter', sans-serif !important;
  color: var(--text) !important;
  font-weight: 700 !important;
}

.feed-live-bar {
  background: var(--brand-light) !important;
  border-radius: 0 !important;
}

.feed-live-bar-fill {
  background: var(--brand) !important;
}

.btn-load-more {
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--text-2) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  padding: 8px 24px !important;
  transition: all var(--duration) var(--ease) !important;
}

.btn-load-more:hover {
  background: rgba(196, 168, 130, 0.10) !important;
  color: var(--text) !important;
  border-color: rgba(196, 168, 130, 0.3) !important;
}

.action-type-badge {
  font-family: 'Inter', sans-serif !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  border-radius: var(--radius-full) !important;
  padding: 2px 7px !important;
}


/* ═══ ACTIVITY DOTS ═══════════════════════════════════════ */
.activity-dot { border-radius: 50% !important; }
.activity-dot-live { background: var(--green) !important; }
.activity-dot-pending { background: var(--amber) !important; }
.activity-dot-active { background: var(--blue) !important; }

.activity-title {
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  color: var(--text) !important;
}

.activity-meta {
  font-family: 'Inter', sans-serif !important;
  color: var(--text-3) !important;
}

.activity-link {
  font-family: 'Inter', sans-serif !important;
  color: #a68b6b !important;
}


/* ═══ ROADMAP ═════════════════════════════════════════════ */
.roadmap-section {
  background: var(--white) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  padding: 32px 36px 28px !important;
  box-shadow: var(--shadow-sm) !important;
}

.roadmap-section::before {
  border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
  background: var(--brand) !important;
  display: block !important;
  animation: none !important;
}

.roadmap-title {
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  color: var(--text) !important;
}

.roadmap-phase-badge {
  font-family: 'Inter', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  background: var(--brand) !important;
  color: white !important;
  border-radius: var(--radius-full) !important;
  padding: 4px 14px !important;
  box-shadow: var(--shadow-brand) !important;
}

.roadmap-phase-node {
  border-radius: 50% !important;
  box-shadow: var(--shadow-sm) !important;
}

.roadmap-phase-card.completed .roadmap-phase-node {
  background: var(--brand) !important;
  border-color: var(--brand) !important;
}

.roadmap-phase-card.active .roadmap-phase-node {
  border-color: var(--brand) !important;
}

.roadmap-connector.completed { background: var(--brand) !important; }

.roadmap-milestones-panel {
  border: 1px solid var(--border) !important;
  background: var(--surface-sunken) !important;
  border-radius: var(--radius) !important;
  padding: 20px 22px !important;
}

.roadmap-milestones-title {
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
}

.roadmap-phase-desc {
  font-family: 'Inter', sans-serif !important;
  color: var(--text-2) !important;
}

.roadmap-milestone-item {
  border: 1px solid var(--border-light) !important;
  background: var(--white) !important;
  border-radius: var(--radius-sm) !important;
  transition: all var(--duration) var(--ease) !important;
}

.roadmap-milestone-item:hover {
  background: var(--brand-lighter) !important;
}

.roadmap-milestone-item.milestone-completed { border-left: 3px solid var(--green) !important; }
.roadmap-milestone-item.milestone-in_progress { border-left: 3px solid var(--brand) !important; }
.roadmap-milestone-item.milestone-upcoming { border-left: 3px solid var(--border) !important; }

.roadmap-milestone-title {
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  color: var(--text) !important;
}

.roadmap-milestone-meta {
  font-family: 'Inter', sans-serif !important;
  color: var(--text-3) !important;
}

.roadmap-milestone-link {
  color: #a68b6b !important;
}

.roadmap-phase-tag {
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
}

.roadmap-phase-card.active .roadmap-phase-tag { color: #a68b6b !important; }
.roadmap-phase-card.completed .roadmap-phase-tag { color: #a68b6b !important; }

.roadmap-phase-name {
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  color: var(--text) !important;
}


/* ═══ DEEP DIVE CARDS ═════════════════════════════════════ */
.dd-card {
  background: var(--white) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-xs) !important;
  transition: all var(--duration) var(--ease) !important;
}

.dd-card:hover {
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-2px) !important;
}

.dd-card.border-green { border-color: var(--green-border) !important; }
.dd-card.border-amber { border-color: var(--amber-border) !important; }
.dd-card.border-red { border-color: var(--red-border) !important; }
.dd-card.border-grey { border-color: var(--border) !important; }

.dd-platform-icon {
  border-radius: var(--radius-sm) !important;
  border: none !important;
}

.dd-platform-name {
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  color: var(--text) !important;
}

.dd-score {
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
}

.dd-score-denom {
  font-family: 'Inter', sans-serif !important;
  color: var(--text-3) !important;
}

.dd-trend {
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
}

.dd-trend.up { color: var(--green) !important; }
.dd-trend.down { color: var(--red) !important; }
.dd-trend.flat { color: var(--text-3) !important; }

.dd-body {
  border-top: 1px solid var(--border-light) !important;
}

.dd-section-label {
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  color: var(--text-3) !important;
}

.dd-query-row {
  font-family: 'Inter', sans-serif !important;
  border-bottom: 1px solid var(--border-light) !important;
}

.dd-query-text {
  font-family: 'Inter', sans-serif !important;
  color: var(--text) !important;
}

.dd-query-snippet {
  color: var(--text-3) !important;
}

.dd-history-cell {
  font-family: 'Inter', sans-serif !important;
  background: var(--surface-sunken) !important;
  border: 1px solid var(--border-light) !important;
  border-radius: var(--radius-xs) !important;
}

.dd-history-score {
  font-family: 'Inter', sans-serif !important;
  color: var(--text) !important;
  font-weight: 700 !important;
}

.dd-rec-row {
  font-family: 'Inter', sans-serif !important;
  color: var(--text-2) !important;
  border-bottom: 1px solid var(--border-light) !important;
}

.dd-badge-soon {
  font-family: 'Inter', sans-serif !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-full) !important;
  color: var(--text-3) !important;
  font-weight: 600 !important;
}


/* ═══ LEADERBOARD ═════════════════════════════════════════ */
.leaderboard-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin-bottom: 16px !important;
}

.lb-card {
  background: var(--white) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-xs) !important;
  overflow: hidden !important;
}

.lb-card-header {
  padding: 16px 22px !important;
  border-bottom: 1px solid var(--border) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

.lb-card-title {
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
}

.lb-toggle {
  display: flex !important;
  gap: 2px !important;
  background: var(--surface-sunken) !important;
  border-radius: var(--radius-sm) !important;
  padding: 3px !important;
}

.lb-toggle-btn {
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--text-2) !important;
  border: none !important;
  background: transparent !important;
  border-radius: var(--radius-xs) !important;
  padding: 5px 12px !important;
  cursor: pointer !important;
  transition: all var(--duration-fast) var(--ease) !important;
}

.lb-toggle-btn.active,
.lb-toggle-btn:hover {
  background: var(--white) !important;
  color: var(--text) !important;
  box-shadow: var(--shadow-xs) !important;
}

.lb-rank-chip {
  font-family: 'Inter', sans-serif !important;
  background: rgba(196, 168, 130, 0.12) !important;
  color: #8a7560 !important;
  border-radius: var(--radius-full) !important;
  padding: 4px 14px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

.lb-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 16px !important;
}

@media (max-width: 768px) {
  .lb-grid { grid-template-columns: 1fr !important; }
}


/* ═══ COVERAGE MATRIX ═════════════════════════════════════ */
.coverage-matrix-section {
  background: var(--white) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-xs) !important;
  overflow: hidden !important;
  margin-bottom: 28px !important;
}

.coverage-matrix-header {
  padding: 20px 24px !important;
  border-bottom: 1px solid var(--border) !important;
}

.coverage-score-badge {
  font-family: 'Inter', sans-serif !important;
  background: var(--brand-light) !important;
  border-radius: var(--radius-full) !important;
  padding: 4px 14px !important;
  font-size: 12px !important;
  color: var(--text-2) !important;
}

.coverage-score-badge .score-pct {
  font-weight: 700 !important;
  color: #8a7560 !important;
}

.cm-btn {
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--text-2) !important;
  border: 1px solid var(--border) !important;
  background: var(--white) !important;
  border-radius: var(--radius-sm) !important;
  padding: 6px 14px !important;
  cursor: pointer !important;
  transition: all var(--duration-fast) var(--ease) !important;
}

.cm-btn.active,
.cm-btn:hover {
  background: rgba(196, 168, 130, 0.10) !important;
  color: var(--text) !important;
  border-color: rgba(196, 168, 130, 0.3) !important;
}

.cm-sort-select {
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  padding: 6px 12px !important;
  background: var(--white) !important;
  color: var(--text-2) !important;
}

.cm-legend {
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  padding: 12px 24px !important;
  border-bottom: 1px solid var(--border-light) !important;
  background: var(--surface-sunken) !important;
}


/* ═══ COVERAGE MATRIX MODAL ═══════════════════════════════ */
.cm-modal-overlay {
  backdrop-filter: blur(4px) !important;
}

.cm-modal {
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-lg) !important;
  border: 1px solid var(--border) !important;
}

.cm-modal-header {
  border-bottom: 1px solid var(--border) !important;
}

.cm-modal-platform {
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
}

.cm-modal-query {
  font-family: 'Inter', sans-serif !important;
  color: var(--text-2) !important;
}

.cm-modal-status-pill {
  font-family: 'Inter', sans-serif !important;
  border-radius: var(--radius-full) !important;
  font-weight: 600 !important;
}

.cm-modal-context-label {
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  color: var(--text-3) !important;
}


/* ═══ EMPTY & LOADING STATES ══════════════════════════════ */
.empty-state {
  padding: 48px 24px !important;
  text-align: center !important;
}

.empty-state .icon {
  font-size: 36px !important;
  margin-bottom: 14px !important;
}

.empty-state h3 {
  font-family: 'Inter', sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  margin-bottom: 6px !important;
}

.empty-state p {
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  color: var(--text-2) !important;
}

.loading-full {
  background: var(--bg) !important;
}

.loading-spinner {
  border: 2.5px solid var(--border) !important;
  border-top-color: var(--brand) !important;
  border-radius: 50% !important;
}

.loading-full p {
  font-family: 'Inter', sans-serif !important;
  color: var(--text-2) !important;
}

/* Skeleton loading animation */
@keyframes skeleton-pulse {
  0%   { background-position: -200px 0; }
  100% { background-position: calc(200px + 100%) 0; }
}

.skeleton {
  background: linear-gradient(90deg, var(--surface-sunken) 25%, #e8e8ec 37%, var(--surface-sunken) 63%) !important;
  background-size: 200px 100% !important;
  animation: skeleton-pulse 1.5s ease-in-out infinite !important;
  border-radius: var(--radius-xs) !important;
  color: transparent !important;
  user-select: none !important;
  pointer-events: none !important;
}

.skeleton-card {
  background: var(--white) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  padding: 22px !important;
  box-shadow: var(--shadow-xs) !important;
}

.skeleton-line {
  height: 12px !important;
  background: linear-gradient(90deg, var(--surface-sunken) 25%, #e8e8ec 37%, var(--surface-sunken) 63%) !important;
  background-size: 200px 100% !important;
  animation: skeleton-pulse 1.5s ease-in-out infinite !important;
  border-radius: var(--radius-xs) !important;
  margin-bottom: 10px !important;
}

.skeleton-line.w-60 { width: 60% !important; }
.skeleton-line.w-40 { width: 40% !important; }
.skeleton-line.w-80 { width: 80% !important; }
.skeleton-line.h-8 { height: 8px !important; }
.skeleton-line.h-24 { height: 24px !important; }
.skeleton-line.h-32 { height: 32px !important; margin-bottom: 6px !important; }


/* ═══ AUTH GATE ═══════════════════════════════════════════ */
.auth-gate {
  background: var(--bg) !important;
}

.auth-gate-card {
  background: var(--white) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-lg) !important;
  padding: 52px 44px !important;
}

.auth-gate .logo {
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  color: var(--text) !important;
}

.auth-gate .logo span { color: #c4a882 !important; }

.auth-gate h2 {
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  color: var(--text) !important;
}

.auth-gate p {
  font-family: 'Inter', sans-serif !important;
  color: var(--text-2) !important;
}

.auth-gate a {
  color: #a68b6b !important;
}


/* ═══ EXPAND / DETAIL ROWS ════════════════════════════════ */
.expand-btn {
  border-radius: var(--radius-xs) !important;
  transition: all var(--duration-fast) var(--ease) !important;
}

.expand-btn:hover {
  background: rgba(196, 168, 130, 0.10) !important;
  color: var(--text) !important;
}

.detail-cell {
  background: var(--surface-sunken) !important;
}

.detail-inner {
  border-top: 1px solid var(--border-light) !important;
}

.detail-plat-item {
  background: var(--white) !important;
  border: 1px solid var(--border-light) !important;
  border-radius: var(--radius-sm) !important;
}

.detail-plat-name {
  font-family: 'Inter', sans-serif !important;
  color: var(--text-3) !important;
}

.detail-plat-score {
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
}


/* ═══ BUTTONS ═════════════════════════════════════════════ */
button,
.btn,
[class*="btn-"],
input[type="submit"] {
  font-family: 'Inter', sans-serif !important;
  border-radius: var(--radius-sm) !important;
  transition: all var(--duration) var(--ease) !important;
  cursor: pointer !important;
}

.btn-primary,
button[type="submit"],
input[type="submit"] {
  background: #1a1a1a !important;
  color: white !important;
  border: none !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

.btn-primary:hover:not(:disabled),
button[type="submit"]:hover:not(:disabled) {
  background: #333333 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
  transform: translateY(-1px) !important;
  color: white !important;
}

.btn-primary:active:not(:disabled) {
  transform: translateY(0) !important;
}

.btn-primary:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
  transform: none !important;
}


/* ═══ FORM INPUTS ═════════════════════════════════════════ */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="search"],
input[type="tel"],
textarea,
select {
  font-family: 'Inter', sans-serif !important;
  border-radius: var(--radius-sm) !important;
  border: 1px solid var(--border) !important;
  background: var(--white) !important;
  color: var(--text) !important;
  font-size: 14px !important;
  padding: 10px 14px !important;
  transition: all var(--duration) var(--ease) !important;
  outline: none !important;
  box-shadow: var(--shadow-xs) !important;
}

input:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 3px var(--brand-glow) !important;
  outline: none !important;
}

input::placeholder {
  color: var(--text-3) !important;
}


/* ═══ BADGES ══════════════════════════════════════════════ */
.pill,
[class*="-pill"],
[class*="pill-"],
.status,
[class*="-badge"],
[class*="badge-"],
[class*="-tag"],
[class*="tag-"] {
  border-radius: var(--radius-full) !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
}


/* ═══ MICRO-ANIMATIONS ════════════════════════════════════ */

/* Fade in on load */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-card,
.metrics-grid,
.platforms-section,
.chart-section,
.roadmap-section,
.deep-dive-section,
.schedule-section,
.activity-feed-section,
.progress-section,
.roi-banner,
.two-col,
.query-table-section,
.leaderboard-section,
.coverage-matrix-section {
  animation: fadeInUp 0.5s var(--ease) both !important;
}

.metrics-grid { animation-delay: 0.05s !important; }
.platforms-section { animation-delay: 0.1s !important; }
.chart-section { animation-delay: 0.15s !important; }
.deep-dive-section { animation-delay: 0.2s !important; }

/* Hover lift for interactive cards */
.metric-card,
.plat-card,
.progress-card,
.schedule-card,
.dd-card {
  transition: all var(--duration) var(--ease) !important;
  will-change: transform, box-shadow !important;
}

/* Smooth expand/collapse */
.dd-body,
.feed-item-detail,
.roadmap-milestones-panel {
  transition: all var(--duration-slow) var(--ease) !important;
}

/* Pulse for live elements */
@keyframes premium-pulse {
  0%, 100% {
    opacity: 1;
    box-shadow: 0 0 0 0 var(--brand-glow);
  }
  50% {
    opacity: 0.8;
    box-shadow: 0 0 0 6px transparent;
  }
}

.live-pulse {
  animation: premium-pulse 2s ease-in-out infinite !important;
}

/* Spin animation */
@keyframes spin {
  to { transform: rotate(360deg); }
}

.spinner {
  border-radius: 50% !important;
}


/* ═══ SCROLLBAR ═══════════════════════════════════════════ */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-3);
}


/* ═══ RESPONSIVE ══════════════════════════════════════════ */
@media (max-width: 900px) {
  .sidebar {
    transform: translateX(-100%) !important;
  }

  .sidebar.open {
    transform: translateX(0) !important;
  }

  .sidebar-overlay.open {
    display: block !important;
  }

  .mobile-header {
    display: flex !important;
    border-radius: 0 !important;
  }

  .content-wrapper {
    margin-left: 0 !important;
  }

  .main {
    padding: 24px 20px 60px !important;
  }

  .lb-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 768px) {
  .metrics-grid {
    grid-template-columns: 1fr !important;
  }

  .two-col {
    grid-template-columns: 1fr !important;
  }

  .page-header-left h1 {
    font-size: 24px !important;
  }

  .hero-content {
    flex-direction: column !important;
    gap: 20px !important;
  }

  .hero-gauge-wrap {
    width: 100% !important;
    max-width: 240px !important;
    margin: 0 auto !important;
  }
}

@media (max-width: 700px) {
  .platforms-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  .progress-cards {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 640px) {
  .main {
    padding: 20px 16px 60px !important;
  }

  .page-header-left h1 {
    font-size: 22px !important;
  }

  .hero-card {
    padding: 24px 20px !important;
  }

  .metric-card-value {
    font-size: 26px !important;
  }

  .roi-banner {
    gap: 16px !important;
  }

  .roi-divider {
    display: none !important;
  }

  .roi-item-value {
    font-size: 22px !important;
  }

  /* Stack all form inputs full width */
  input[type="text"],
  input[type="email"],
  input[type="url"],
  select,
  textarea {
    width: 100% !important;
    font-size: 16px !important; /* Prevents iOS zoom */
  }

  button[type="submit"],
  input[type="submit"],
  .btn-primary {
    width: 100% !important;
  }
}

@media (max-width: 500px) {
  .deep-dive-grid {
    grid-template-columns: 1fr !important;
  }

  .schedule-cards {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 480px) {
  .page-header-left h1 {
    font-size: 20px !important;
  }
}

/* Table horizontal scroll fix */
@media (max-width: 768px) {
  table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-width: 100% !important;
  }
}


/* ═══ LOGIN PAGE OVERRIDES ════════════════════════════════ */
/* These apply when client-premium.css is loaded on the login page */
.login-wrapper .card {
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-lg) !important;
  border: 1px solid var(--border) !important;
}

.login-wrapper .logo-mark {
  background: var(--brand-light) !important;
  border: 1px solid var(--brand-border) !important;
  border-radius: var(--radius-sm) !important;
}

.login-wrapper .tabs {
  border-radius: var(--radius-sm) !important;
  background: var(--surface-sunken) !important;
  border: 1px solid var(--border) !important;
}

.login-wrapper .tab-btn {
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  border-radius: var(--radius-xs) !important;
}

.login-wrapper .tab-btn.active {
  background: var(--white) !important;
  box-shadow: var(--shadow-xs) !important;
}

.login-wrapper h1 {
  font-family: 'Instrument Serif', Georgia, serif !important;
  font-size: 28px !important;
  font-weight: 400 !important;
  letter-spacing: -0.02em !important;
}

.login-wrapper .subtitle {
  font-family: 'Inter', sans-serif !important;
  color: var(--text-2) !important;
}

.login-wrapper label {
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  color: var(--text-2) !important;
}

.login-wrapper input[type="email"],
.login-wrapper input[type="password"] {
  font-family: 'Inter', sans-serif !important;
  border-radius: var(--radius-sm) !important;
}

.login-wrapper .btn-primary {
  font-family: 'Inter', sans-serif !important;
  border-radius: var(--radius-sm) !important;
  background: #1a1a1a !important;
  color: white !important;
  box-shadow: none !important;
}

.login-wrapper .btn-primary:hover:not(:disabled) {
  background: #333333 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
  color: white !important;
}

.login-wrapper .alert {
  border-radius: var(--radius-sm) !important;
  font-family: 'Inter', sans-serif !important;
}

.login-wrapper .sent-icon {
  background: var(--brand-light) !important;
  border: 1px solid var(--brand-border) !important;
  border-radius: 50% !important;
}

.login-wrapper .btn-resend {
  font-family: 'Inter', sans-serif !important;
  border-radius: var(--radius-sm) !important;
}

.login-wrapper .btn-resend:hover {
  border-color: #c4a882 !important;
  color: #a68b6b !important;
}

.login-wrapper .footer-note {
  font-family: 'Inter', sans-serif !important;
}

.login-wrapper .footer-note a {
  color: #a68b6b !important;
}

.login-wrapper .divider {
  border-top: 1px solid var(--border) !important;
}

.login-wrapper .forgot-link {
  font-family: 'Inter', sans-serif !important;
}

.login-wrapper .forgot-link:hover {
  color: #a68b6b !important;
}

.brand-footer {
  font-family: 'Inter', sans-serif !important;
  color: var(--text-3) !important;
}

.brand-footer span {
  color: #c4a882 !important;
  font-weight: 700 !important;
}

/* Forgot password overlay */
#forgotOverlay > div {
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-lg) !important;
}


/* ═══ QUICK STATS BAR ═════════════════════════════════════ */
.quick-stats-bar {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 14px 24px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 24px;
  box-shadow: var(--shadow-xs);
  flex-wrap: wrap;
}

.quick-stat {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--text-2);
}

.quick-stat-value {
  font-weight: 700;
  color: var(--text);
  font-size: 15px;
}

.quick-stat-divider {
  width: 1px;
  height: 24px;
  background: var(--border);
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .quick-stats-bar {
    gap: 12px;
    padding: 12px 16px;
  }

  .quick-stat-divider {
    display: none;
  }
}


/* ═══ PRINT STYLES ════════════════════════════════════════ */
@media print {
  .sidebar, .mobile-header, .sidebar-overlay { display: none !important; }
  .content-wrapper { margin-left: 0 !important; }
  body { background: white !important; }
}