/* SixersHoops themes: light (default) + dark-mode only */
:root {
  --sh-navy: #001a57;
  --sh-blue: #006BB6;
  --sh-red: #ED174C;
  --sh-bg: #f4f6f9;
  --sh-bg2: #ffffff;
  --sh-card: #ffffff;
  --sh-ink: #0d0f1a;
  --sh-mid: #64748b;
  --sh-border: #e2e8f0;
  --sh-muted: #94a3b8;
  --sh-shadow: 0 8px 24px rgba(15, 23, 42, 0.07);
  --sh-input-bg: #ffffff;
  --sh-hover: #f1f5f9;
  color-scheme: light;
}

html.dark-mode {
  /* True black dark mode (not navy) */
  --sh-bg: #000000;
  --sh-bg2: #0a0a0a;
  --sh-card: #111111;
  --sh-ink: #f5f5f5;
  --sh-mid: #c4c4c4;
  --sh-border: rgba(255, 255, 255, 0.14);
  --sh-muted: #a3a3a3;
  --sh-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
  --sh-input-bg: #141414;
  --sh-hover: rgba(255, 255, 255, 0.08);
  color-scheme: dark;

  /* Remap common page variables so dark works site-wide */
  --cream: #000000;
  --ink: #f5f5f5;
  --mid: #c4c4c4;
  --border-light: rgba(255, 255, 255, 0.14);
  --card-bg: #111111;
  --navy: #000000;
  --navy-deep: #000000;
  --sixers-blue: #4aa3ef;
  --bg: #000000;
  --bg2: #0a0a0a;
  --text: #f5f5f5;
  --muted: #c4c4c4;
  --border: rgba(255, 255, 255, 0.14);
  --surface: #111111;
  --surface-2: #1a1a1a;
  --surface-soft: #141414;
}

/* Legacy navy-mode → treat as dark (for cached HTML) */
html.navy-mode {
  /* Legacy class maps to black dark mode */
  --sh-bg: #000000;
  --sh-bg2: #0a0a0a;
  --sh-card: #111111;
  --sh-ink: #f5f5f5;
  --sh-mid: #c4c4c4;
  --sh-border: rgba(255, 255, 255, 0.14);
  --sh-muted: #a3a3a3;
  --sh-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
  --sh-input-bg: #141414;
  --sh-hover: rgba(255, 255, 255, 0.08);
  --cream: #000000;
  --ink: #f5f5f5;
  --mid: #c4c4c4;
  --border-light: rgba(255, 255, 255, 0.14);
  --card-bg: #111111;
  --navy: #000000;
  --bg: #000000;
  --text: #f5f5f5;
  color-scheme: dark;
}

html.dark-mode body,
html.navy-mode body {
  background: var(--sh-bg) !important;
  color: var(--sh-ink) !important;
}

/* Surfaces & cards used across pages */
html.dark-mode .card,
html.dark-mode .mbox,
html.dark-mode .compose-bar,
html.dark-mode .tabs,
html.dark-mode .btn-ghost,
html.dark-mode .editor-card,
html.dark-mode .news-feature,
html.dark-mode .news-stack,
html.dark-mode .news-row,
html.dark-mode .article-item,
html.dark-mode .auth-card,
html.dark-mode .list-filters,
html.dark-mode .empty-state,
html.dark-mode .grade-card,
html.dark-mode .bottom-line,
html.dark-mode .more-item,
html.dark-mode .preview-article-card,
html.dark-mode .admin-wrap .editor-card,
html.dark-mode .home-game-card,
html.dark-mode .feature-card,
html.dark-mode .tweet-card,
html.dark-mode .update-card {
  background: var(--sh-card) !important;
  border-color: var(--sh-border) !important;
  color: var(--sh-ink) !important;
}

html.dark-mode .ctitle,
html.dark-mode .hero-title,
html.dark-mode .news-title,
html.dark-mode .list-toolbar-title,
html.dark-mode .article-title,
html.dark-mode .article-item-title,
html.dark-mode .news-feature-title,
html.dark-mode .news-row-title,
html.dark-mode .grade-card-name,
html.dark-mode .more-item-title {
  color: var(--sh-ink) !important;
}

html.dark-mode .cmeta,
html.dark-mode .cexcerpt,
html.dark-mode .hero-kicker,
html.dark-mode .news-feature-excerpt,
html.dark-mode .article-excerpt,
html.dark-mode .article-meta,
html.dark-mode .list-toolbar-sub,
html.dark-mode .section-note,
html.dark-mode .form-hint,
html.dark-mode .news-row-meta,
html.dark-mode .grade-card-stats {
  color: var(--sh-mid) !important;
}

html.dark-mode input,
html.dark-mode select,
html.dark-mode textarea,
html.dark-mode .form-input,
html.dark-mode .form-select,
html.dark-mode .form-textarea {
  background: var(--sh-input-bg) !important;
  border-color: var(--sh-border) !important;
  color: var(--sh-ink) !important;
}

html.dark-mode .btn-secondary,
html.dark-mode .btn-ghost,
html.dark-mode .tb-btn {
  background: var(--sh-card) !important;
  border-color: var(--sh-border) !important;
  color: var(--sh-ink) !important;
}

html.dark-mode .admin-header,
html.dark-mode .admin-tabs,
html.dark-mode .news-section,
html.dark-mode .article-wrap {
  background: transparent !important;
}

html.dark-mode .admin-header-inner {
  border-bottom-color: var(--sh-border) !important;
}
html.dark-mode .admin-header h1,
html.dark-mode .admin-header p {
  color: var(--sh-ink) !important;
}
html.dark-mode .admin-header p { color: var(--sh-mid) !important; }

html.dark-mode .admin-tab {
  background: var(--sh-card) !important;
  border-color: var(--sh-border) !important;
  color: var(--sh-mid) !important;
}
html.dark-mode .admin-tab.active {
  background: var(--sh-blue) !important;
  border-color: var(--sh-blue) !important;
  color: #fff !important;
}

html.dark-mode .article-body p,
html.dark-mode .grade-card-analysis,
html.dark-mode .bottom-line p {
  color: var(--sh-ink) !important;
}

html.dark-mode .tweet-embed-wrap,
html.dark-mode .writer-guide,
html.dark-mode .insert-panel,
html.dark-mode .article-locked {
  background: var(--sh-bg2) !important;
  border-color: var(--sh-border) !important;
  color: var(--sh-ink) !important;
}

html.dark-mode .tv-wrap {
  background: var(--sh-bg2) !important;
  border-color: var(--sh-border) !important;
}
html.dark-mode .tv-side + .tv-side,
html.dark-mode .tv-foot {
  border-color: var(--sh-border) !important;
}
html.dark-mode .tv-foot {
  background: var(--sh-card) !important;
}

/* Tables / trade machine / pickem common */
html.dark-mode table,
html.dark-mode th,
html.dark-mode td {
  border-color: var(--sh-border) !important;
  color: var(--sh-ink) !important;
}
html.dark-mode th {
  background: var(--sh-bg2) !important;
}

html.dark-mode .modal,
html.dark-mode .modal-content,
html.dark-mode .auth-modal,
html.dark-mode .policy-popup {
  background: var(--sh-card) !important;
  color: var(--sh-ink) !important;
  border-color: var(--sh-border) !important;
}

/* Soften pure white hardcodes on major shells */
html.dark-mode [style*="background:#fff"],
html.dark-mode [style*="background: #fff"],
html.dark-mode [style*="background:#ffffff"],
html.dark-mode [style*="background: #ffffff"],
html.dark-mode [style*="background:white"] {
  background: var(--sh-card) !important;
}

/* —— Readable text in dark mode (hardcoded light-theme colors) —— */
html.dark-mode,
html.dark-mode body {
  color: #e8eaf0 !important;
}

html.dark-mode h1,
html.dark-mode h2,
html.dark-mode h3,
html.dark-mode h4,
html.dark-mode h5,
html.dark-mode h6,
html.dark-mode p,
html.dark-mode li,
html.dark-mode label,
html.dark-mode span,
html.dark-mode td,
html.dark-mode th,
html.dark-mode a {
  color: inherit;
}

/* Force near-black text → light */
html.dark-mode [style*="color:#0"],
html.dark-mode [style*="color: #0"],
html.dark-mode [style*="color:#1"],
html.dark-mode [style*="color: #1"],
html.dark-mode [style*="color:#2"],
html.dark-mode [style*="color: #2"],
html.dark-mode [style*="color:black"],
html.dark-mode [style*="color: black"] {
  color: #e8eaf0 !important;
}

/* Common slate / gray text used in page CSS */
html.dark-mode .article-title,
html.dark-mode .article-body p,
html.dark-mode .grade-card-name,
html.dark-mode .grade-card-analysis,
html.dark-mode .bottom-line p,
html.dark-mode .more-item-title,
html.dark-mode .news-feature-title,
html.dark-mode .news-row-title,
html.dark-mode .list-toolbar-title,
html.dark-mode .hero-title-top,
html.dark-mode .hero-title-bottom,
html.dark-mode .feature-card-title,
html.dark-mode .article-item-title,
html.dark-mode .admin-header h1,
html.dark-mode .auth-card h2,
html.dark-mode .empty-state h3,
html.dark-mode .grade-entry-name,
html.dark-mode .form-label {
  color: #f1f5f9 !important;
}

html.dark-mode .article-meta,
html.dark-mode .article-excerpt,
html.dark-mode .grade-card-stats,
html.dark-mode .more-item-excerpt,
html.dark-mode .more-item-meta,
html.dark-mode .news-feature-excerpt,
html.dark-mode .news-feature-meta,
html.dark-mode .news-row-meta,
html.dark-mode .list-toolbar-sub,
html.dark-mode .section-note,
html.dark-mode .form-hint,
html.dark-mode .pic-upload-hint,
html.dark-mode .char-count,
html.dark-mode .admin-header p,
html.dark-mode .auth-card p,
html.dark-mode .empty-state p,
html.dark-mode .tweet-embed-hint,
html.dark-mode .writer-guide,
html.dark-mode .article-photo-credit {
  color: #94a3b8 !important;
}

html.dark-mode .writer-guide strong,
html.dark-mode .writer-guide code {
  color: #e2e8f0 !important;
}

html.dark-mode a:not(.btn-primary):not(.admin-tab.active):not(.nav-link) {
  color: #7dd3fc;
}
html.dark-mode a:not(.btn-primary):not(.admin-tab.active):hover {
  color: #bae6fd;
}

/* Placeholders */
html.dark-mode input::placeholder,
html.dark-mode textarea::placeholder {
  color: #64748b !important;
  opacity: 1;
}

/* Keep brand blue text readable */
html.dark-mode .news-eyebrow,
html.dark-mode .bottom-line-label,
html.dark-mode .article-back,
html.dark-mode .preview-read-more {
  color: #5eb0f0 !important;
}

/* Buttons that stay high-contrast */
html.dark-mode .btn-primary,
html.dark-mode .admin-tab.active {
  color: #ffffff !important;
}

html.dark-mode .btn-draft {
  color: #fbbf24 !important;
  border-color: rgba(251, 191, 36, 0.35) !important;
  background: rgba(251, 191, 36, 0.1) !important;
}

html.dark-mode .btn-danger,
html.dark-mode .btn-delete {
  color: #fca5a5 !important;
}

/* Draft / visibility badges stay distinct */
html.dark-mode .vis-badge.public {
  background: #14532d !important;
  color: #bbf7d0 !important;
}
html.dark-mode .vis-badge.private {
  background: #7f1d1d !important;
  color: #fecaca !important;
}
html.dark-mode .draft-badge {
  background: #78350f !important;
  color: #fde68a !important;
}

/* Soft backgrounds that still need light text */
html.dark-mode .news-stack-label,
html.dark-mode .editor-card h3,
html.dark-mode .grades-heading,
html.dark-mode .more-title {
  color: #e2e8f0 !important;
}

/* Pickem / trade machine text safety nets */
html.dark-mode .tab-content,
html.dark-mode .admin-panel,
html.dark-mode .player-name,
html.dark-mode .team-name,
html.dark-mode .salary,
html.dark-mode .standings,
html.dark-mode .leaderboard {
  color: #e8eaf0;
}


/* Navbar: white in light mode, page bg in dark mode */
.navbar {
  background: #ffffff !important;
  border-bottom-color: #e5e7eb;
}
html.dark-mode .navbar,
html.navy-mode .navbar {
  background: var(--sh-bg, #0b0f1a) !important;
  border-bottom-color: var(--sh-border) !important;
  box-shadow: none !important;
}


/* Homepage CTAs readable in dark mode */
html.dark-mode .hero-cta-primary {
  background: #006BB6 !important;
  border-color: #006BB6 !important;
  color: #ffffff !important;
}
html.dark-mode .hero-cta-secondary {
  background: var(--sh-card) !important;
  border-color: var(--sh-border) !important;
  color: #e8eaf0 !important;
}
html.dark-mode .hero-cta-secondary:hover {
  border-color: #5eb0f0 !important;
  color: #7dd3fc !important;
}
html.dark-mode .feature-card {
  background: var(--sh-card) !important;
  border-color: var(--sh-border) !important;
}
html.dark-mode .feature-card-title { color: #f1f5f9 !important; }
html.dark-mode .feature-card-desc { color: #94a3b8 !important; }
html.dark-mode .feature-card-arrow { color: #5eb0f0 !important; }


/* ========== Modern black dark mode (professional) ========== */
html.dark-mode,
:root.dark-mode,
html.navy-mode {
  background-color: #000000 !important;
  color: #f4f4f5 !important;
}

html.dark-mode body,
:root.dark-mode body,
html.navy-mode body {
  background: #000000 !important;
  color: #f4f4f5 !important;
}

/* Elevated surfaces */
html.dark-mode .card,
html.dark-mode .mbox,
html.dark-mode .panel,
html.dark-mode .box,
html.dark-mode .table-card,
html.dark-mode .auth-card,
html.dark-mode .feature-card,
html.dark-mode .tweet-card,
html.dark-mode .update-card,
html.dark-mode .home-game-card,
html.dark-mode .news-feature,
html.dark-mode .news-stack,
html.dark-mode .news-row,
html.dark-mode .article-item,
html.dark-mode .editor-card,
html.dark-mode .grade-card,
html.dark-mode .empty-state,
html.dark-mode .compose-bar,
html.dark-mode .tabs,
html.dark-mode .list-filters,
html.dark-mode .modal,
html.dark-mode .modal-card,
html.dark-mode .dropdown,
html.dark-mode .menu,
html.dark-mode .stat-card,
html.dark-mode .leaderboard-card,
html.dark-mode .pick-card,
html.dark-mode .group-card,
html.dark-mode .player-card,
html.dark-mode .roster-card,
html.dark-mode .s-table-wrap,
:root.dark-mode .card,
:root.dark-mode .table-card,
:root.dark-mode .auth-card {
  background: #0f0f0f !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.45) !important;
  color: #f4f4f5 !important;
}

html.dark-mode h1, html.dark-mode h2, html.dark-mode h3,
html.dark-mode h4, html.dark-mode h5, html.dark-mode h6,
:root.dark-mode h1, :root.dark-mode h2, :root.dark-mode h3,
:root.dark-mode h4, :root.dark-mode h5, :root.dark-mode h6 {
  color: #ffffff !important;
}

html.dark-mode p,
:root.dark-mode p {
  color: #e8e8ea !important;
}

html.dark-mode .mid,
html.dark-mode .muted,
html.dark-mode .text-muted,
html.dark-mode .sub,
html.dark-mode .meta,
html.dark-mode .eyebrow,
html.dark-mode .kicker,
html.dark-mode .tagline,
html.dark-mode .footer-tagline,
html.dark-mode .text-muted-foreground,
html.dark-mode .updates-page-label,
:root.dark-mode .mid,
:root.dark-mode .muted,
:root.dark-mode .sub,
:root.dark-mode .meta,
:root.dark-mode .eyebrow {
  color: #b4b4b8 !important;
}

/* Buttons: always contrast */
html.dark-mode button,
html.dark-mode .btn,
html.dark-mode .button,
html.dark-mode [class*="page-btn"],
html.dark-mode .updates-page-btn,
html.dark-mode .pagination button,
html.dark-mode input[type="button"],
html.dark-mode input[type="submit"],
:root.dark-mode button,
:root.dark-mode .btn,
:root.dark-mode .updates-page-btn,
:root.dark-mode .pagination button {
  background: #1a1a1a !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
}

html.dark-mode button:hover:not(:disabled),
html.dark-mode .btn:hover:not(:disabled),
html.dark-mode .updates-page-btn:hover:not(:disabled),
:root.dark-mode button:hover:not(:disabled),
:root.dark-mode .updates-page-btn:hover:not(:disabled) {
  background: #262626 !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
  color: #ffffff !important;
}

html.dark-mode button:disabled,
html.dark-mode .updates-page-btn:disabled,
:root.dark-mode button:disabled {
  opacity: 0.45 !important;
  color: #d4d4d8 !important;
}

/* Primary / filled blue buttons keep brand color with white text */
html.dark-mode .btn-primary,
html.dark-mode button.primary,
html.dark-mode .btn-blue,
html.dark-mode [class*="btn-primary"],
:root.dark-mode .btn-primary {
  background: #006BB6 !important;
  border-color: #006BB6 !important;
  color: #ffffff !important;
}

html.dark-mode .btn-primary:hover:not(:disabled),
:root.dark-mode .btn-primary:hover:not(:disabled) {
  background: #0a7bcf !important;
  color: #ffffff !important;
}

html.dark-mode .btn-ghost,
:root.dark-mode .btn-ghost {
  background: transparent !important;
  color: #f4f4f5 !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
}

/* Links */
html.dark-mode a:not(.btn):not(.button):not([class*="btn-"]),
:root.dark-mode a:not(.btn):not(.button):not([class*="btn-"]) {
  color: #7cbcff;
}
html.dark-mode a:not(.btn):not(.button):hover,
:root.dark-mode a:not(.btn):not(.button):hover {
  color: #a8d4ff;
}

/* Forms */
html.dark-mode input,
html.dark-mode textarea,
html.dark-mode select,
:root.dark-mode input,
:root.dark-mode textarea,
:root.dark-mode select {
  background: #141414 !important;
  color: #f4f4f5 !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
}
html.dark-mode input::placeholder,
html.dark-mode textarea::placeholder {
  color: #8b8b90 !important;
  opacity: 1;
}

/* Tables */
html.dark-mode table,
html.dark-mode .s-table,
:root.dark-mode table {
  color: #ececef !important;
  background: transparent !important;
}
html.dark-mode th { color: #ffffff !important; }
html.dark-mode td { color: #e4e4e7 !important; }
html.dark-mode tr:hover td { background: rgba(255, 255, 255, 0.04) !important; }

/* Navbar + footer */
html.dark-mode nav,
html.dark-mode .navbar,
html.dark-mode header.site-header,
html.dark-mode .site-nav,
:root.dark-mode nav,
:root.dark-mode .navbar {
  background: #000000 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #f4f4f5 !important;
  backdrop-filter: blur(12px);
}
html.dark-mode .nav-link,
html.dark-mode .navbar a,
:root.dark-mode .nav-link {
  color: #e8e8ea !important;
}
html.dark-mode .footer,
:root.dark-mode .footer {
  background: #000000 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #b4b4b8 !important;
}
html.dark-mode .footer-brand-name,
html.dark-mode .footer-title { color: #ffffff !important; }
html.dark-mode .footer-links a { color: #b4b4b8 !important; }
html.dark-mode .footer-links a:hover { color: #ffffff !important; }
html.dark-mode .footer-bottom {
  color: #8b8b90 !important;
  border-top-color: rgba(255, 255, 255, 0.08) !important;
}

/* Tweet / X embeds */
html.dark-mode .update-embed,
html.dark-mode .tweet-embed-wrap,
html.dark-mode .tweet-card,
html.dark-mode blockquote.twitter-tweet,
:root.dark-mode .update-embed {
  background: #0f0f0f !important;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  min-height: 120px;
}
html.dark-mode .update-embed iframe,
html.dark-mode blockquote.twitter-tweet iframe {
  filter: none !important;
  background: transparent !important;
}

/* Trade machine surfaces */
html.dark-mode .tm-panel,
html.dark-mode .team-panel,
html.dark-mode .trade-slot,
html.dark-mode .player-chip,
html.dark-mode .roster-list,
html.dark-mode .analyze-panel,
html.dark-mode .result-card,
html.dark-mode .cap-summary,
html.dark-mode .exception-card,
html.dark-mode [class*="trade-"],
html.dark-mode [class*="roster-"],
html.dark-mode [class*="team-col"] {
  background: #0f0f0f !important;
  color: #f4f4f5 !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

html.dark-mode .player-row,
html.dark-mode .tm-player,
html.dark-mode .salary-line {
  color: #ececef !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Pagination / prev next explicitly */
html.dark-mode .updates-page-btn,
html.dark-mode .pagination button,
html.dark-mode [class*="prev"],
html.dark-mode [class*="next"] {
  background: #1a1a1a !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
}

/* Hardcoded light leftovers */
html.dark-mode [style*="background: #fff"],
html.dark-mode [style*="background:#fff"],
html.dark-mode [style*="background: white"],
html.dark-mode [style*="background:#ffffff"],
html.dark-mode [style*="background: #ffffff"] {
  background: #0f0f0f !important;
}
html.dark-mode [style*="color: #001a57"],
html.dark-mode [style*="color:#001a57"] {
  color: #f4f4f5 !important;
}