/* Light mode theme overrides.
   Keep this block in sync with base/_variables.css — every --theme-* token
   defined there needs a light-mode value here (both hex AND -rgb variant)
   so `rgba(var(--theme-foo-rgb), …)` expressions stay correct when the
   user toggles themes. Adding a token to _variables.css without adding
   it here will silently use the dark-mode default in light mode. */
body.light-mode {
  /* Light palette — warm paper + deep taupe.
     Cream-tinted (not pure #fff) so the taupe accent sits in a
     consistent warm tonal family. Near-black text (#0c0c0c from the
     dark palette) for editorial-grade contrast. */
  --theme-background: #f8f7f4;            /* warm paper, not #fff */
  --theme-background-rgb: 248, 247, 244;
  --theme-current-line: #ffffff;
  --theme-current-line-rgb: 255, 255, 255;
  --theme-foreground: #0c0c0c;             /* palette-2 black */
  --theme-foreground-rgb: 12, 12, 12;
  --theme-comment: #6b655a;                /* warm gray */
  --theme-comment-rgb: 107, 101, 90;
  --theme-cyan: #1b72ae;                   /* vivid azure, info */
  --theme-cyan-rgb: 27, 114, 174;
  --theme-green: #17864a;                  /* vivid emerald, success */
  --theme-green-rgb: 23, 134, 74;
  --theme-orange: #8f6410;                 /* vivid amber, warning */
  --theme-orange-rgb: 143, 100, 16;
  --theme-pink: #8a5e59;
  --theme-pink-rgb: 138, 94, 89;
  --theme-purple: #8a7357;                 /* taupe alias — deeper on cream */
  --theme-purple-rgb: 138, 115, 87;
  --theme-red: #c0431f;                    /* vermilion, error — kept clear of the garnet accent */
  --theme-red-rgb: 192, 67, 31;
  --theme-yellow: #8f6410;                 /* amber alias */
  --theme-yellow-rgb: 143, 100, 16;

  /* Semantic mappings — must be re-declared here: var() inside a custom
     property resolves where it is declared, so the :root mappings in
     base/_variables.css bake in the DARK palette values. */
  --theme-primary: var(--theme-accent);
  --theme-primary-rgb: var(--theme-accent-rgb);
  --theme-secondary: var(--theme-pink);
  --theme-secondary-rgb: var(--theme-pink-rgb);
  --theme-success: var(--theme-green);
  --theme-success-rgb: var(--theme-green-rgb);
  --theme-warning: var(--theme-orange);
  --theme-warning-rgb: var(--theme-orange-rgb);
  --theme-error: var(--theme-red);
  --theme-error-rgb: var(--theme-red-rgb);
  --theme-info: var(--theme-cyan);
  --theme-info-rgb: var(--theme-cyan-rgb);

  --theme-surface: #ffffff;
  --theme-surface-rgb: 255, 255, 255;
  --theme-surface-light: #f8f7f4;
  --theme-surface-light-rgb: 248, 247, 244;
  --theme-surface-dark: #efece5;           /* warm neutral */
  --theme-surface-dark-rgb: 239, 236, 229;
  --theme-text: #0c0c0c;
  --theme-text-rgb: 12, 12, 12;
  --theme-text-muted: #6b655a;
  --theme-text-muted-rgb: 107, 101, 90;
  --theme-accent: #a81d3a;                 /* garnet — deep wine-red hero accent */
  --theme-accent-rgb: 168, 29, 58;
  --theme-selection: rgba(168, 29, 58, 0.12);

  /* Derived tokens — same declaration-scope rule as the semantics above:
     the :root definitions resolved against the dark palette. */
  --theme-on-accent: #f8f7f4;              /* paper text on the deep garnet accent */
  --theme-purple-dark: #6e5b42;            /* darker taupe for hover (legacy name retained) */
  --theme-accent-dark: #8f1731;
  --focus-ring-color: rgba(var(--theme-accent-rgb), 0.35);
  --scrollbar-thumb: rgba(var(--theme-comment-rgb), 0.4);        /* warm neutral gray */
  --scrollbar-thumb-hover: rgba(var(--theme-comment-rgb), 0.6);
  --modal-text-secondary: var(--theme-text-muted);
  --modal-accent: var(--theme-accent);
  --hairline: rgba(12, 12, 12, 0.08);
  --hairline-strong: rgba(12, 12, 12, 0.16);

  /* Primary button — inverted monochrome for light mode:
     near-black button sits on warm cream = Vercel/Mercury pattern. */
  --theme-primary-bg:       #0c0c0c;
  --theme-primary-bg-rgb:   12, 12, 12;
  --theme-primary-bg-hover: #2c2c2c;
  --theme-primary-fg:       #f8f7f4;

  /* Card and container shadows */
  --theme-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);

  /* Elevation scale — softer on white backgrounds. */
  --elevation-1: 0 1px 2px rgba(15, 23, 42, 0.05), 0 1px 1px rgba(15, 23, 42, 0.03);
  --elevation-2: 0 2px 4px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --elevation-3: 0 4px 10px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.05);
  --elevation-4: 0 10px 20px rgba(15, 23, 42, 0.1),  0 4px 8px rgba(15, 23, 42, 0.06);
  --elevation-5: 0 20px 40px rgba(15, 23, 42, 0.12), 0 8px 16px rgba(15, 23, 42, 0.08);
}

/* Dropdown menu rules moved to components/_dropdown.css (2026-04-25).
   The translateX(4px)-on-hover and color-shift-to-accent effects were
   the "amateur" look we're moving away from. New styles are flat,
   token-driven, and apply identically in dark + light. */

/* Light mode specific component overrides — channel-name in light
   mode previously rendered as a saturated green pill, which fought
   the warm-paper editorial palette. Now it inherits the same quiet
   text-with-dot-separator pattern as dark mode. */
body.light-mode .video-meta .channel-name {
  color: var(--theme-text);
  background: transparent;
  padding: 0;
  border-radius: 0;
}

body.light-mode .video-meta .channel-name:hover {
  background: transparent;
  color: var(--theme-text);
}

/* Pre-flip: chrome on the parent. Once .video-card-inner exists,
   the chrome moves to the inner so the border tilts in 3D with the
   flip (mirrors the dark-mode pattern in _video-card.css). */
body.light-mode .video-card:not(:has(.video-card-inner)) {
  background: #ffffff;
  box-shadow: var(--theme-shadow);
  border: 1px solid #ece9e1;
}

body.light-mode .video-card:not(:has(.video-card-inner)):hover {
  border-color: rgba(var(--theme-accent-rgb), 0.4);
  box-shadow: var(--elevation-3),
              0 0 0 1px rgba(var(--theme-accent-rgb), 0.18);
}

/* Post-flip: chrome on the rotating inner. */
body.light-mode .video-card .video-card-inner {
  background: #ffffff;
  box-shadow: var(--theme-shadow);
  border: 1px solid #ece9e1;
}

body.light-mode .video-card:hover .video-card-inner {
  border-color: rgba(var(--theme-accent-rgb), 0.4);
  box-shadow: var(--elevation-3),
              0 0 0 1px rgba(var(--theme-accent-rgb), 0.18);
}

/* NOTE: Sidebar base styles are in layout/_sidebar.css
   Only override specific elements here, not the entire .sidebar */

body.light-mode .sidebar h2 {
  color: var(--theme-accent);
}

body.light-mode .sidebar h3,
body.light-mode .sidebar .section-title {
  color: var(--theme-text);
}

body.light-mode .sidebar input,
body.light-mode .sidebar select,
body.light-mode .sidebar .form-select,
body.light-mode .sidebar .form-control,
body.light-mode .sidebar .search-input,
body.light-mode .sidebar .filter-input,
body.light-mode .sidebar .channel-search {
  background-color: #ffffff;
  border: 0;
  color: var(--theme-text) !important;
}

body.light-mode .sidebar input::placeholder,
body.light-mode .sidebar select::placeholder,
body.light-mode .sidebar .form-control::placeholder {
  color: #6c757d !important;
}

body.light-mode .sidebar select option {
  background-color: #ffffff;
  color: var(--theme-text);
}

body.light-mode .sidebar input:focus,
body.light-mode .sidebar select:focus,
body.light-mode .sidebar .form-select:focus,
body.light-mode .sidebar .form-control:focus,
body.light-mode .sidebar .search-input:focus,
body.light-mode .sidebar .filter-input:focus,
body.light-mode .sidebar .channel-search:focus-within {
  /* Quiet focus ring (no border to colour now that the rule above is
     borderless). The 2px accent halo is the only focus indicator. */
  border: 0;
  box-shadow: 0 0 0 2px rgba(var(--theme-accent-rgb), 0.2);
  background-color: #ffffff;
}

/* Suppress the hover border-color shift from _sidebar.css too — the
   wrapper rules try to lift the border to #0f172a14 / #0f172a24 on
   hover, which re-introduces the line we just removed. */
body.light-mode .sidebar .filter-input:hover,
body.light-mode .sidebar .channel-search:hover {
  border: 0;
}

body.light-mode .apply-filters {
  background-color: var(--theme-accent);
  color: #ffffff;
}

body.light-mode .apply-filters:hover {
  background-color: var(--theme-accent-dark);
}

body.light-mode .reset-filters {
  color: var(--theme-text);
  border-color: #e9ecef !important;
}

body.light-mode .reset-filters:hover {
  background-color: rgba(var(--theme-accent-rgb), 0.1);
}

/* Pagination moved to components/_pagination.css (2026-04-25) */

/* Scrollbar light theme */
body.light-mode .sidebar::-webkit-scrollbar-thumb {
  background-color: #cbd5e0;
}

body.light-mode .sidebar::-webkit-scrollbar-thumb:hover {
  background-color: #a0aec0;
}

/* Other light theme adjustments */
body.light-mode .form-control {
  background-color: #ffffff;
  border: 1px solid #e9ecef;
  color: var(--theme-text);
}

body.light-mode .form-control:focus {
  border-color: var(--theme-accent);
  box-shadow: 0 0 0 2px rgba(var(--theme-accent-rgb), 0.2);
}

body.light-mode .main-header {
  background-color: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

body.light-mode .search-bar {
  background-color: #f8f9fa;
  border: 1px solid #e9ecef;
}

body.light-mode .plan-card,
body.light-mode .highlight-card,
body.light-mode .stats-grid .card,
body.light-mode .organization-table-card,
body.light-mode .organization-card,
body.light-mode .member-card {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.96), rgba(245, 246, 250, 0.92));
  border-color: rgba(0, 0, 0, 0.05);
  box-shadow: var(--theme-shadow);
}

body.light-mode .team-section .card {
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.98), rgba(248, 249, 252, 0.94));
  border-color: rgba(0, 0, 0, 0.06);
  box-shadow: var(--theme-shadow);
}

body.light-mode .plan-card::after {
  background: radial-gradient(circle at top right, rgba(var(--theme-accent-rgb), 0.16), transparent 60%);
}

body.light-mode .legend-chip,
body.light-mode .metric-chip,
body.light-mode .status-chip {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.065);
  color: var(--theme-text);
}

body.light-mode .role-chip {
  color: #ffffff;
  box-shadow: none;
}

body.light-mode .member-avatar {
  background: rgba(var(--theme-accent-rgb), 0.18);
  color: var(--theme-purple);
  box-shadow: inset 0 0 0 1px rgba(var(--theme-accent-rgb), 0.2);
}

body.light-mode .status-active {
  color: var(--theme-green);
  border-color: rgba(var(--theme-green-rgb), 0.35);
  background: rgba(var(--theme-green-rgb), 0.12);
}

body.light-mode .status-inactive {
  color: var(--theme-red);
  border-color: rgba(var(--theme-red-rgb), 0.35);
  background: rgba(var(--theme-red-rgb), 0.12);
}

body.light-mode .organization-table-card__table {
  background: rgba(255, 255, 255, 0.94);
  border-color: rgba(0, 0, 0, 0.05);
}

body.light-mode .quick-links-row .list-group-item {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(0, 0, 0, 0.06);
  color: var(--theme-text);
}

body.light-mode .quick-links-row .list-group-item:hover {
  border-color: rgba(var(--theme-accent-rgb), 0.35);
  background: rgba(255, 255, 255, 0.98);
}

body.light-mode .search-bar:focus-within {
  border-color: var(--theme-accent);
  box-shadow: 0 0 0 2px rgba(var(--theme-accent-rgb), 0.1);
}

/* btn-primary / btn-secondary light overrides retired 2026-04-26.
   Base rules in components/_buttons.css use --theme-primary-bg /
   --theme-primary-bg-hover, which the light palette maps to the
   inverted-monochrome (near-black on cream) pattern. No override
   needed. */

/* Light mode scrollbar styles */
body.light-mode ::-webkit-scrollbar {
  width: 8px;
}

body.light-mode ::-webkit-scrollbar-track {
  background: #f8f9fa;
}

body.light-mode ::-webkit-scrollbar-thumb {
  background-color: #cbd5e0;
  border-radius: 4px;
}

body.light-mode ::-webkit-scrollbar-thumb:hover {
  background-color: #a0aec0;
}

/* Light mode modal — hairline border + soft shadow to match dark mode */
body.light-mode .modal {
  --modal-border-color: rgba(0, 0, 0, 0.08);
  --modal-border-subtle: rgba(0, 0, 0, 0.06);
  --modal-body-gradient: #ffffff;
  --modal-header-gradient: #ffffff;
  --modal-footer-gradient: #fafafa;
  --modal-shadow-primary: 0 24px 48px -12px rgba(15, 15, 15, 0.18), 0 8px 16px -8px rgba(15, 15, 15, 0.1);
  --modal-shadow-secondary: 0 0 0 1px rgba(0, 0, 0, 0.04);
}

body.light-mode .modal-content {
  background: #ffffff;
  color: #111827;
}

body.light-mode .modal-title {
  color: #111827;
  font-weight: 600;
}

/* Title icon and close button inherit from modals/_base.css — light
   mode now matches dark for visual consistency. */

/* The previous bulk override here painted a 2px solid #9ca3af border
   on every input inside every modal in light mode. That was the loudest
   "border on click" complaint — every modal input was already wearing
   chunky chrome, and the focus shift made it look angry.
   Removed 2026-05-04. components/_forms.css renders these inputs with
   a 1px subtle border in both themes via tokens — kept the
   background-color + text-color overrides because Bootstrap form-control
   defaults don't pick those up cleanly under light mode.  */
body.light-mode .modal :where(.form-control, .form-select, input[type="text"], input[type="number"], input[type="email"], input[type="password"], input[type="search"], input[type="url"], input[type="time"], input[type="date"], input[type="datetime-local"], select, textarea) {
  background-color: #ffffff;
  color: #111827;
}

/* Form / button / tab / list / alert overrides retired 2026-04-26.
   They were stacking 2px purple borders + chunky shadows on top of
   components that already render correctly via their token-driven
   base rules. Light-mode now inherits the same chrome as dark-mode
   from components/_buttons.css, components/_forms.css, and
   modals/_base.css — only the token values flip. */

/* Settings channel-item / stat-pill light overrides retired 2026-04-26.
   The base rules in modals/settings/ use rgba(var(--theme-accent-rgb), …)
   which resolves to the right taupe in light mode automatically. */

/* Alert light-mode rules removed 2026-04-25 — components/_alerts.css
   handles both themes via token-driven rgb mixes. */

body.light-mode .modal .progress {
  background: rgba(226, 232, 240, 0.82);
}

body.light-mode .modal .progress-bar {
  background: linear-gradient(90deg, var(--theme-accent), var(--theme-accent));
}

body.light-mode .modal .stat-pill {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(148, 163, 184, 0.45);
  color: #1f2937;
}

body.light-mode .modal .empty-state,
body.light-mode .modal .empty-state-small {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(148, 163, 184, 0.4);
  color: rgba(71, 85, 105, 0.7);
}

body.light-mode .modal .empty-state i,
body.light-mode .modal .empty-state-small i {
  color: var(--theme-accent);
}

/* form-check-input overrides retired — Bootstrap defaults plus the
   accent-color: var(--theme-accent) we set globally are sufficient. */

body.light-mode .modal .form-check-input:checked::after {
  color: #ffffff !important;
}

/* Synced Badge - Light Theme */
body.light-mode .synced-badge {
  background: var(--theme-accent);
  border-color: rgba(var(--theme-accent-rgb), 0.5);
  color: var(--theme-on-accent);
  box-shadow: var(--elevation-2);
}

body.light-mode .synced-badge:hover {
  box-shadow: var(--elevation-3);
}

/* Fix Download and Add Video Modal Headers */

body.light-mode .modal .btn-maximize {
  border: 2px solid #9ca3af;
  color: #374151;
  background: #f9fafb;
  width: 36px;
  height: 36px;
}

body.light-mode .modal .btn-maximize:hover {
  border: 2px solid var(--theme-accent);
  color: var(--theme-accent);
  background: rgba(var(--theme-accent-rgb), 0.15);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(var(--theme-accent-rgb), 0.3);
}

/* Fix Settings Modal Channel Selection Section */
body.light-mode #settingsModal .channel-selection-container {
  background: #ffffff;
  border-color: #e5e7eb;
}

body.light-mode #settingsModal .channel-selection-header {
  background: #f9fafb;
  border-bottom-color: #e5e7eb;
}

body.light-mode #settingsModal .settings-channel-search {
  background: #ffffff;
  border-bottom-color: #e5e7eb;
}

body.light-mode #settingsModal .search-input-wrapper input {
  background: #ffffff;
  border-color: #d1d5db;
  color: #1f2937;
}

body.light-mode #settingsModal .search-input-wrapper input::placeholder {
  color: #9ca3af;
}

body.light-mode #settingsModal .search-input-wrapper i {
  color: var(--theme-accent);
}

body.light-mode #settingsModal .select-all-option {
  background: #f9fafb;
  border-bottom-color: #e5e7eb;
}

body.light-mode #settingsModal .select-all-row {
  background: rgba(var(--theme-accent-rgb), 0.08);
  border-color: rgba(var(--theme-accent-rgb), 0.25);
}

body.light-mode #settingsModal .select-all-row:hover {
  background: rgba(var(--theme-accent-rgb), 0.12);
  border-color: rgba(var(--theme-accent-rgb), 0.35);
}

body.light-mode #settingsModal .settings-channel-list {
  background: #f8f9fa;
}

body.light-mode #settingsModal .settings-channel-name {
  color: #1f2937;
}

/* Fix all channel selection backgrounds */
body.light-mode #settingsModal #immediateChannelSelection,
body.light-mode #settingsModal #scheduledChannelSelection,
body.light-mode #settingsModal #recurringChannelSelection,
body.light-mode #settingsModal #updateChannelSelection {
  background: #f8f9fa;
}

/* Light mode animations */
@keyframes pulse-light {
  0% {
    box-shadow: 0 0 0 0 rgba(var(--theme-accent-rgb), 0.4);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(var(--theme-accent-rgb), 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(var(--theme-accent-rgb), 0);
  }
}

/* Icon buttons in light mode */
body.light-mode .btn-icon {
  color: var(--theme-text-muted);
  background-color: transparent;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), opacity var(--duration-fast) var(--ease-standard);
  border: 1px solid transparent;
}

body.light-mode .btn-icon i {
  color: inherit;
}

body.light-mode .btn-icon:hover {
  color: var(--theme-text);
  background-color: rgba(var(--theme-accent-rgb), 0.08);
  border-color: rgba(var(--theme-accent-rgb), 0.15);
}

body.light-mode .btn-icon:hover i {
  color: inherit;
}

/* Specific icon button states */
body.light-mode .btn-edit:hover {
  color: var(--theme-info);
  background-color: rgba(var(--theme-info-rgb), 0.08);
  border-color: rgba(var(--theme-info-rgb), 0.15);
}

body.light-mode .btn-process:hover {
  color: var(--theme-success);
  background-color: rgba(var(--theme-success-rgb), 0.08);
  border-color: rgba(var(--theme-success-rgb), 0.15);
}

body.light-mode .review-video:hover,
body.light-mode .view-review-result:hover {
  color: var(--theme-on-accent) !important;
  background-color: var(--theme-accent) !important;
  border-color: rgba(var(--theme-accent-rgb), 0.15);
}

body.light-mode .video-actions .review-video i,
body.light-mode .video-actions .view-review-result i {
  color: var(--theme-text-muted) !important;
}

body.light-mode .video-actions .review-video:hover,
body.light-mode .video-actions .view-review-result:hover {
  color: var(--theme-on-accent) !important;
  background: var(--theme-accent) !important;
}

body.light-mode .video-actions .review-video:hover i,
body.light-mode .video-actions .view-review-result:hover i {
  color: var(--theme-on-accent) !important;
}

body.light-mode .cut-video:hover {
  color: var(--theme-warning);
  background-color: rgba(var(--theme-warning-rgb), 0.08);
  border-color: rgba(var(--theme-warning-rgb), 0.15);
}

body.light-mode .btn-restore:hover {
  color: var(--theme-yellow);
  background-color: rgba(var(--theme-yellow-rgb), 0.08);
  border-color: rgba(var(--theme-yellow-rgb), 0.15);
}

body.light-mode .btn-submit:hover {
  color: var(--theme-success);
  background-color: rgba(var(--theme-success-rgb), 0.08);
  border-color: rgba(var(--theme-success-rgb), 0.15);
}

body.light-mode .btn-remove:hover {
  color: var(--theme-error);
  background-color: rgba(var(--theme-red-rgb), 0.08);
  border-color: rgba(var(--theme-red-rgb), 0.15);
}

/* Video stats icons in light mode */
body.light-mode .video-stats span i {
  color: var(--theme-text-muted);
}

/* Video action buttons in light mode — match dark mode shape/size (squary, not oval) */
body.light-mode .video-actions .btn-icon {
  width: auto;
  height: 34px;
  min-height: 34px;
  border-radius: 10px;
}

body.light-mode .video-actions button {
  color: var(--theme-text-muted) !important;
}

body.light-mode .video-actions button i {
  color: var(--theme-text-muted) !important;
}

body.light-mode .video-actions button:hover {
  color: var(--theme-text) !important;
}

body.light-mode .video-actions button:hover i {
  color: var(--theme-text) !important;
}

/* Active states for icon buttons */
body.light-mode .btn-icon.active {
  color: #ffffff;
  background-color: var(--theme-accent);
}

/* Processing state */
body.light-mode .btn-process.processing {
  animation: spin 1s linear infinite;
  color: var(--theme-success);
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Header icon buttons */
body.light-mode .header-icon {
  color: var(--theme-text-muted);
  background-color: transparent;
  transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), opacity var(--duration-fast) var(--ease-standard);
}

body.light-mode .header-icon:hover {
  color: var(--theme-text);
  background-color: rgba(var(--theme-accent-rgb), 0.08);
}

/* Notification badge */
body.light-mode .notification-badge {
  background-color: var(--theme-red);
  color: #ffffff;
}

/* Pagination rules moved to components/_pagination.css (2026-04-25) —
   token-driven, same look in dark + light. */