/* =========================================================
   Accent layer — Lemon + Sun, matching the VYPA mobile app.
   Signage portal (app.vypa.co). Loaded LAST on every view,
   after the page's own sheets, its inline <style> and Bootstrap.

   Rules this file keeps (from the accent brief):
   - Lemon = "do this / this benefits you". Sun = "notice this".
   - Text on lemon, sun or white is always --ink.
   - Lemon/sun as TEXT only on dark surfaces. On the light theme
     lemon is a fill: buttons, chips, the active nav item. In the dark
     theme (section 0 and 14) links and key numbers may be lemon.
   - Semantic colour stays: success green, error/delete red.
   - No new glass. Nothing here adds backdrop-filter.

   Specificity notes:
   - dashboard.css redefines --brand as the SOFT blue (#44AAFF) and
     loads after layout.css, so anything that reads --brand on white
     is ~2.6:1. Rules below name --vypa-blue directly instead.
   - `.uniform-btn` is defined three times (dashboard.css,
     welcome_dashboard.css, screenstable.css) plus inline on
     screen_edit_assign; `body .uniform-btn` beats them all.
   ========================================================= */


/* ---------- 0. Dark theme: base surfaces -------------------------- */
/* Signed-in pages had no dark theme; darkmode.js (loaded right after
   <body> on every page with the sidebar) sets body.dark-mode from the
   choice saved on the sign-in page or the sidebar's Dark Mode button.

   This section sits FIRST on purpose. Its selectors are
   `body.dark-mode X`, which ties with accent's own `body X.active` for
   the lemon states; on a tie the later rule wins, so the lemon active
   tab / pill / nav item below still wins in dark. Dark-only fixes to
   accent's light-theme choices are in section 14 at the end.

   The selector lists were collected from every rule in the signed-in
   pages' stylesheets and <style> blocks that paints a light surface or
   dark text. Left alone on purpose: semantic tints (alerts, status
   chips, plan tags, notification icons) - a light chip on a dark page
   still reads - and anything lemon, sun or primary.

   Neutrals (new, dark-only, so defined here rather than in tokens.css):
     --dm-surface #141B2D  cards, panels, modals, sidebar
     --dm-raised  #1C2540  inputs, table heads, hover
     --dm-border  #2B3656
     --dm-text    #E8ECF5  ~14:1 on surface
     --dm-muted   #AAB4CE  ~7:1 on raised
   Page background is --ink. */
body.dark-mode {
  --dm-surface: #141B2D;
  --dm-raised: #1C2540;
  --dm-border: #2B3656;
  --dm-text: #E8ECF5;
  --dm-muted: #AAB4CE;

  /* The pages' own variables, so anything reading them follows. */
  --bg: var(--ink);
  --card: var(--dm-surface);
  --text: var(--dm-text);
  --muted: var(--dm-raised);
  --brand: var(--vypa-blue-soft);          /* blue text on dark */
  --shadow: 0 4px 16px rgb(0 0 0 / .45);

  /* Bootstrap 5.3 reads these for body, cards, modals, tables, forms. */
  --bs-body-bg: var(--dm-surface);
  --bs-body-color: var(--dm-text);
  --bs-emphasis-color: #fff;
  --bs-secondary-color: var(--dm-muted);
  --bs-secondary-bg: var(--dm-raised);
  --bs-tertiary-bg: var(--dm-raised);
  --bs-border-color: var(--dm-border);
  --bs-heading-color: var(--dm-text);
  --bs-link-color: var(--lemon);
  --bs-link-hover-color: var(--lemon);
  --bs-link-color-rgb: 182, 242, 58;
  --bs-link-hover-color-rgb: 182, 242, 58;

  color-scheme: dark;
  background: var(--ink);
  color: var(--dm-text);
}

/* Layout shells that paint the page grey. */
body.dark-mode .dashboard-container,
body.dark-mode .main,
body.dark-mode .main > .container {
  background: transparent;
  color: var(--dm-text);
}

/* Surfaces: cards, panels, modals, menus, secondary buttons. */
body.dark-mode #playlistItems,
body.dark-mode .action-btn,
body.dark-mode .actions,
body.dark-mode .actions-list button,
body.dark-mode .add-media-btn,
body.dark-mode .app-card,
body.dark-mode .apps-back,
body.dark-mode .apps-table tbody tr:nth-child(even),
body.dark-mode .as-btn-secondary,
body.dark-mode .as-modal-box,
body.dark-mode .as-table code,
body.dark-mode .audio-wrapper,
body.dark-mode .billing-card,
body.dark-mode .billing-card .actions .secondary,
body.dark-mode .billing-card .actions button[id="openReduceLicenses"],
body.dark-mode .billing-card .secondary,
body.dark-mode .btn-cancel,
body.dark-mode .btn-light,
body.dark-mode .btn-notif-outline,
body.dark-mode .btn-open-editor,
body.dark-mode .btn-secondary,
body.dark-mode .bulk-dialog,
body.dark-mode .bulk-dialog-cancel,
body.dark-mode .bulk-menu,
body.dark-mode .bulk-select-bar .bulk-clear,
body.dark-mode .calculation-summary,
body.dark-mode .calendar-day.empty,
body.dark-mode .calendar-header,
body.dark-mode .calendar-modal-content,
body.dark-mode .calendar-modal-header,
body.dark-mode .cancel-btn,
body.dark-mode .card,
body.dark-mode .card-btn,
body.dark-mode .card-dropdown,
body.dark-mode .card-dur-select,
body.dark-mode .card.border-0.shadow-lg .form-control,
body.dark-mode .card.border-0.shadow-lg .form-select,
body.dark-mode .card.large-card,
body.dark-mode .create-card,
body.dark-mode .current-plan-card,
body.dark-mode .current-subscription-banner,
body.dark-mode .detail-item,
body.dark-mode .device-card:not(.selected),
body.dark-mode .edit-screen-container,
body.dark-mode .empty-screens-content,
body.dark-mode .event,
body.dark-mode .event-modal-content,
body.dark-mode .event-modal-footer,
body.dark-mode .event-modal-header,
body.dark-mode .event.schedule-content,
body.dark-mode .events-list-btn,
body.dark-mode .events-sidebar,
body.dark-mode .events-sidebar-header,
body.dark-mode .field-input,
body.dark-mode .field-select,
body.dark-mode .font-chip,
body.dark-mode .font-fmt,
body.dark-mode .hw-cancel,
body.dark-mode .hw-sheet,
body.dark-mode .hw-totals,
body.dark-mode .icon-btn,
body.dark-mode .info-card,
body.dark-mode .invoices-table th,
body.dark-mode .invoices-table tr,
body.dark-mode .layout-card,
body.dark-mode .layout-card-new,
body.dark-mode .layouts-search,
body.dark-mode .layouts-sort-wrap select,
body.dark-mode .lbtn-cancel,
body.dark-mode .lform-group input,
body.dark-mode .lform-group textarea,
body.dark-mode .license-calculator,
body.dark-mode .lightbox-close,
body.dark-mode .link-card a,
body.dark-mode .lmodal-box,
body.dark-mode .lmodal-close,
body.dark-mode .media-item,
body.dark-mode .media-library-panel,
body.dark-mode .media-library-panel .tabs button:not(.active),
body.dark-mode .media-search,
body.dark-mode .media-table,
body.dark-mode .modal-cancel-btn,
body.dark-mode .modal-close-btn,
body.dark-mode .modal-container,
body.dark-mode .modal-content,
body.dark-mode .modal-footer-info,
body.dark-mode .nav-btn,
body.dark-mode .notif-btn,
body.dark-mode .notif-card,
body.dark-mode .notif-tab:not(.active),
body.dark-mode .order-item,
body.dark-mode .pagination,
body.dark-mode .plan-card,
body.dark-mode .playlist-card:not(.selected),
body.dark-mode .playlist-item,
body.dark-mode .profile-dropdown .dropdown-menu,
body.dark-mode .quantity-btn,
body.dark-mode .quick-actions-card,
body.dark-mode .quick-links,
body.dark-mode .review-card,
body.dark-mode .sched-cancel,
body.dark-mode .sched-card,
body.dark-mode .sched-card-btns button,
body.dark-mode .sched-day span,
body.dark-mode .sched-event,
body.dark-mode .sched-modal-box,
body.dark-mode .sched-screen span,
body.dark-mode .schedule-input,
body.dark-mode .schedules-header,
body.dark-mode .screen-details-modal .form-control,
body.dark-mode .screen-details-modal .form-select,
body.dark-mode .screen-edit-column,
body.dark-mode .screen-info-card,
body.dark-mode .screen-preview-card,
body.dark-mode .screen-welcome-wrapper,
body.dark-mode .screens-table-wrapper,
body.dark-mode .settings-group,
body.dark-mode .sidebar,
body.dark-mode .sidebar.open,
body.dark-mode .size-preset:not(.active),
body.dark-mode .survey-content,
body.dark-mode .table-action,
body.dark-mode .tabs button:not(.active),
body.dark-mode .tag-btn,
body.dark-mode .today-btn,
body.dark-mode .token-copy-row input,
body.dark-mode .users-page,
body.dark-mode .users-table th,
body.dark-mode .users-table tr,
body.dark-mode .users-table-wrapper,
body.dark-mode .view-selector,
body.dark-mode .topbar .icon-btn,
body.dark-mode .modal-body,
body.dark-mode .modal-header,
body.dark-mode .modal-footer,
body.dark-mode .dropdown-menu,
body.dark-mode .list-group-item,
body.dark-mode .offcanvas {
  background-color: var(--dm-surface);
  background-image: none;
  color: var(--dm-text);
  border-color: var(--dm-border);
}

/* The unread notification keeps a hint of brand so it stands out. */
body.dark-mode .notif-card.unread {
  background-color: rgb(var(--vypa-blue-rgb) / .16);
  border-color: rgb(var(--vypa-blue-rgb) / .5);
}

/* Hover / pressed on those surfaces. */
body.dark-mode .action-btn:hover,
body.dark-mode .actions-list button:hover,
body.dark-mode .apps-table tbody tr:hover,
body.dark-mode .billing-card .actions .secondary:hover,
body.dark-mode .billing-card .actions button[id="openReduceLicenses"]:hover,
body.dark-mode .btn-cancel:hover,
body.dark-mode .btn-notif-outline:hover,
body.dark-mode .btn-open-editor:hover,
body.dark-mode .bulk-menu-item:hover,
body.dark-mode .bulk-select-bar .bulk-clear:hover,
body.dark-mode .calendar-day:hover,
body.dark-mode .calendar-modal-close:hover,
body.dark-mode .cancel-btn:hover,
body.dark-mode .card-btn:hover,
body.dark-mode .card-dropdown a:hover,
body.dark-mode .card-dropdown button:hover,
body.dark-mode .detail-item:hover,
body.dark-mode .device-card:not(.selected):hover,
body.dark-mode .events-list-btn:hover,
body.dark-mode .file-drop-zone.drag-over,
body.dark-mode .file-drop-zone:hover,
body.dark-mode .layout-card-new:hover,
body.dark-mode .lightbox-close:hover,
body.dark-mode .lmodal-close:hover,
body.dark-mode .modal-close-btn:hover,
body.dark-mode .nav-btn:active,
body.dark-mode .nav-btn:hover,
body.dark-mode .nav-links a:not(.active):hover,
body.dark-mode .notif-btn.read-btn:hover,
body.dark-mode .notif-pagination a:hover,
body.dark-mode .notif-tab:not(.active):hover,
body.dark-mode .page-link:hover,
body.dark-mode .playlist-card:not(.selected):hover,
body.dark-mode .profile-dropdown .dropdown-menu a:hover,
body.dark-mode .sched-card-btns button:hover,
body.dark-mode .screens-table tbody tr:hover,
body.dark-mode .settings-link:hover,
body.dark-mode .sidebar-submenu a:not(.active):hover,
body.dark-mode .size-preset:not(.active):hover,
body.dark-mode .tag-btn:hover,
body.dark-mode .today-btn:hover {
  background-color: var(--dm-raised);
  color: var(--dm-text);
}

/* Headings and body text that were hard-coded near-black. */
body.dark-mode #dateRange,
body.dark-mode .account-settings,
body.dark-mode .account-settings h2,
body.dark-mode .action-btn,
body.dark-mode .add-media-btn,
body.dark-mode .app-card h3,
body.dark-mode .apps-back,
body.dark-mode .as-btn-secondary,
body.dark-mode .as-modal-close:hover,
body.dark-mode .as-modal-header h3,
body.dark-mode .as-table td,
body.dark-mode .benefit-item,
body.dark-mode .billing-card h3,
body.dark-mode .btn-cancel:hover,
body.dark-mode .btn-notif-outline,
body.dark-mode .btn-open-editor,
body.dark-mode .btn-outline-dark,
body.dark-mode .btn-secondary,
body.dark-mode .bulk-dialog h3,
body.dark-mode .bulk-dialog-cancel,
body.dark-mode .bulk-menu-item,
body.dark-mode .calendar-day-header,
body.dark-mode .calendar-modal-close:hover,
body.dark-mode .calendar-modal-header h2,
body.dark-mode .cancel-btn,
body.dark-mode .card h2,
body.dark-mode .card-dropdown a,
body.dark-mode .card-dropdown button,
body.dark-mode .card-dur-select,
body.dark-mode .card-info-new h4,
body.dark-mode .card-name,
body.dark-mode .card-text h3,
body.dark-mode .card-text p,
body.dark-mode .card.border-0.shadow-lg .form-control,
body.dark-mode .card.border-0.shadow-lg .form-label,
body.dark-mode .card.border-0.shadow-lg .form-select,
body.dark-mode .detail-value,
body.dark-mode .device-card i,
body.dark-mode .device-card span,
body.dark-mode .empty-audio-content,
body.dark-mode .empty-audio-content h2,
body.dark-mode .empty-state h3,
body.dark-mode .field-input,
body.dark-mode .field-label,
body.dark-mode .field-select,
body.dark-mode .filter-section h4,
body.dark-mode .font-chip span,
body.dark-mode .form-group label,
body.dark-mode .form-label,
body.dark-mode .form-section h3,
body.dark-mode .form-section h4,
body.dark-mode .hw-field label,
body.dark-mode .info-row strong,
body.dark-mode .info-value,
body.dark-mode .invoices-table th,
body.dark-mode .layouts-empty h3,
body.dark-mode .layouts-search input,
body.dark-mode .layouts-sort-wrap select,
body.dark-mode .lbtn-cancel:hover,
body.dark-mode .lform-group input,
body.dark-mode .lform-group label,
body.dark-mode .lform-group textarea,
body.dark-mode .lightbox-close,
body.dark-mode .lmodal-close:hover,
body.dark-mode .lmodal-title,
body.dark-mode .manage-btn:hover,
body.dark-mode .media-header,
body.dark-mode .media-library-header h3,
body.dark-mode .media-library-panel .tabs button:not(.active),
body.dark-mode .modal-cancel-btn,
body.dark-mode .modal-content .close:hover,
body.dark-mode .modal-content h3,
body.dark-mode .nav-links a,
body.dark-mode .notif-page-header h2,
body.dark-mode .notif-pagination a,
body.dark-mode .notif-title,
body.dark-mode .page-link,
body.dark-mode .plan-features li,
body.dark-mode .plan-name,
body.dark-mode .plan-price,
body.dark-mode .playlist-builder,
body.dark-mode .playlist-card span,
body.dark-mode .playlist-tour-link,
body.dark-mode .profile-dropdown .dropdown-menu a,
body.dark-mode .quick-actions-card h3,
body.dark-mode .quick-links h3,
body.dark-mode .sched-cancel,
body.dark-mode .sched-card-btns button,
body.dark-mode .sched-card-head h4,
body.dark-mode .sched-events li,
body.dark-mode .sched-modal-head h3,
body.dark-mode .sched-screen span,
body.dark-mode .sched-section > h4,
body.dark-mode .sched-section-head h4,
body.dark-mode .sched-time,
body.dark-mode .sched-toolbar h3,
body.dark-mode .scheduled-events-section h4,
body.dark-mode .screen-desc,
body.dark-mode .screen-details-modal .form-control,
body.dark-mode .screen-details-modal .form-select,
body.dark-mode .screen-edit-header h2,
body.dark-mode .screen-name,
body.dark-mode .screen-name:active,
body.dark-mode .screen-subtitle,
body.dark-mode .settings-item h4,
body.dark-mode .settings-link h4,
body.dark-mode .settings-link strong,
body.dark-mode .sidebar-submenu a,
body.dark-mode .size-preset span,
body.dark-mode .skip-link,
body.dark-mode .stat-number,
body.dark-mode .summary-value,
body.dark-mode .survey-content h2,
body.dark-mode .survey-content p,
body.dark-mode .topbar-left,
body.dark-mode .topbar-left h2,
body.dark-mode .topbar-left p,
body.dark-mode .users-table th {
  color: var(--dm-text);
}

/* Secondary text: the mid greys (#666, #6b7280 ...) fall under 4.5:1 on dark. */
body.dark-mode .action-btn,
body.dark-mode .app-card p,
body.dark-mode .app-tabs a,
body.dark-mode .as-modal-close,
body.dark-mode .as-table th,
body.dark-mode .billing-card .actions .secondary,
body.dark-mode .billing-card .actions .secondary:hover,
body.dark-mode .billing-card .actions button[id="openReduceLicenses"],
body.dark-mode .billing-card .actions button[id="openReduceLicenses"]:hover,
body.dark-mode .btn-cancel,
body.dark-mode .bulk-dialog .bulk-note,
body.dark-mode .bulk-dialog label,
body.dark-mode .bulk-menu-item i,
body.dark-mode .calendar-modal-close,
body.dark-mode .card h6,
body.dark-mode .card-duration label,
body.dark-mode .card-meta,
body.dark-mode .close,
body.dark-mode .content-placeholder,
body.dark-mode .detail-label,
body.dark-mode .detail-value.balance,
body.dark-mode .detail-value.limit,
body.dark-mode .empty-audio-content p,
body.dark-mode .empty-screens-content h2,
body.dark-mode .empty-screens-content p,
body.dark-mode .empty-state,
body.dark-mode .field-hint,
body.dark-mode .file-drop-zone,
body.dark-mode .filter-info,
body.dark-mode .font-fmt,
body.dark-mode .form-group small,
body.dark-mode .form-section label,
body.dark-mode .hw-group h2,
body.dark-mode .hw-head p,
body.dark-mode .hw-sheet .sub,
body.dark-mode .info-label,
body.dark-mode .info-row,
body.dark-mode .info-row i,
body.dark-mode .info-row span,
body.dark-mode .last-seen,
body.dark-mode .last-seen.never,
body.dark-mode .layouts-empty p,
body.dark-mode .layouts-sort-wrap,
body.dark-mode .lbtn-cancel,
body.dark-mode .link-card i,
body.dark-mode .link-card p,
body.dark-mode .lmodal-close,
body.dark-mode .media-item .doc-icon,
body.dark-mode .media-item .web-icon,
body.dark-mode .media-title,
body.dark-mode .modal-content .close,
body.dark-mode .modal-footer-info p,
body.dark-mode .notif-btn,
body.dark-mode .notif-btn.read-btn:hover,
body.dark-mode .notif-tab:not(.active),
body.dark-mode .notif-text,
body.dark-mode .order-item-name,
body.dark-mode .order-summary h3,
body.dark-mode .plan-description,
body.dark-mode .plan-price span,
body.dark-mode .player-specs,
body.dark-mode .playlist-assigned,
body.dark-mode .playlist-card i,
body.dark-mode .playlist-none,
body.dark-mode .preview-offline,
body.dark-mode .product-info p,
body.dark-mode .quantity-btn,
body.dark-mode .review-card p,
body.dark-mode .sched-daterange summary,
body.dark-mode .sched-dates,
body.dark-mode .sched-day span,
body.dark-mode .sched-days,
body.dark-mode .sched-hint,
body.dark-mode .sched-legend,
body.dark-mode .sched-meta,
body.dark-mode .sched-modal-body label,
body.dark-mode .sched-preview-day,
body.dark-mode .settings-group > h3,
body.dark-mode .settings-item p,
body.dark-mode .settings-link p,
body.dark-mode .size-preset i,
body.dark-mode .stat-label,
body.dark-mode .stat-row.offline .stat-number,
body.dark-mode .subtext,
body.dark-mode .summary-label,
body.dark-mode .tab-nav .tab,
body.dark-mode .table-action,
body.dark-mode .tag-btn,
body.dark-mode .thumb-placeholder,
body.dark-mode .timezone-note,
body.dark-mode .token-copy-row input,
body.dark-mode .total-label,
body.dark-mode .user-email,
body.dark-mode .users-search i {
  color: var(--dm-muted);
}

/* Hairlines. */
body.dark-mode .action-btn,
body.dark-mode .action-btn:hover,
body.dark-mode .action-buttons,
body.dark-mode .actions-list button,
body.dark-mode .app-card,
body.dark-mode .app-tabs,
body.dark-mode .apps-back,
body.dark-mode .as-btn-secondary,
body.dark-mode .as-modal-footer,
body.dark-mode .as-modal-header,
body.dark-mode .as-table td,
body.dark-mode .as-table th,
body.dark-mode .billing-card,
body.dark-mode .billing-card .actions,
body.dark-mode .billing-card .actions .secondary,
body.dark-mode .billing-card .actions .secondary:hover,
body.dark-mode .billing-card .actions button[id="openReduceLicenses"],
body.dark-mode .billing-card .actions button[id="openReduceLicenses"]:hover,
body.dark-mode .billing-form-section h4,
body.dark-mode .boot-logo-thumb,
body.dark-mode .btn-light,
body.dark-mode .btn-notif-outline,
body.dark-mode .btn-notif-outline:hover,
body.dark-mode .bulk-dialog input[type="number"],
body.dark-mode .bulk-dialog input[type="text"],
body.dark-mode .bulk-dialog select,
body.dark-mode .bulk-dialog-cancel,
body.dark-mode .bulk-menu,
body.dark-mode .calendar-container,
body.dark-mode .calendar-day,
body.dark-mode .calendar-day-header,
body.dark-mode .calendar-header,
body.dark-mode .calendar-modal-header,
body.dark-mode .cancel-btn,
body.dark-mode .card-btn,
body.dark-mode .card-dropdown,
body.dark-mode .card-dropdown hr,
body.dark-mode .card-dur-select,
body.dark-mode .card-dur-select:hover,
body.dark-mode .card-duration,
body.dark-mode .card-info,
body.dark-mode .card-info-new,
body.dark-mode .card-subscription,
body.dark-mode .card.border-0.shadow-lg .form-control,
body.dark-mode .card.border-0.shadow-lg .form-select,
body.dark-mode .confirmation-input,
body.dark-mode .current-plan-card,
body.dark-mode .detail-row,
body.dark-mode .device-card:not(.selected),
body.dark-mode .duration-input,
body.dark-mode .event-modal-footer,
body.dark-mode .event-modal-header,
body.dark-mode .events-list-btn,
body.dark-mode .events-sidebar-header,
body.dark-mode .field-input,
body.dark-mode .field-select,
body.dark-mode .file-drop-zone,
body.dark-mode .font-chip,
body.dark-mode .form-control,
body.dark-mode .form-group input,
body.dark-mode .form-group input[type="color"],
body.dark-mode .form-group input[type="datetime-local"],
body.dark-mode .form-group input[type="number"],
body.dark-mode .form-group input[type="text"],
body.dark-mode .form-group input[type="url"],
body.dark-mode .form-group select,
body.dark-mode .form-group textarea,
body.dark-mode .form-select,
body.dark-mode .hw-field input,
body.dark-mode .hw-group h2,
body.dark-mode .hw-item,
body.dark-mode .hw-totals .grand,
body.dark-mode .info-card,
body.dark-mode .info-row,
body.dark-mode .invoice-item,
body.dark-mode .invoices-table td,
body.dark-mode .invoices-table th,
body.dark-mode .invoices-table tr,
body.dark-mode .layout-card-new,
body.dark-mode .layouts-search,
body.dark-mode .layouts-sort-wrap select,
body.dark-mode .lbtn-cancel,
body.dark-mode .lform-group input,
body.dark-mode .lform-group textarea,
body.dark-mode .license-calculator,
body.dark-mode .link-card,
body.dark-mode .media-item,
body.dark-mode .media-library-header,
body.dark-mode .media-library-panel,
body.dark-mode .media-library-panel .tabs button:not(.active),
body.dark-mode .media-page .media-table-header,
body.dark-mode .media-page .media-table-row,
body.dark-mode .media-search,
body.dark-mode .media-table-header,
body.dark-mode .media-table-row:not(.selected-row):not(.row-selected),
body.dark-mode .modal-cancel-btn,
body.dark-mode .modal-content input,
body.dark-mode .modal-content select,
body.dark-mode .modal-footer,
body.dark-mode .modal-footer-info,
body.dark-mode .nav-btn,
body.dark-mode .notif-btn,
body.dark-mode .notif-btn.read-btn:hover,
body.dark-mode .notif-card,
body.dark-mode .notif-card:hover,
body.dark-mode .notif-pagination a,
body.dark-mode .notif-tab:not(.active),
body.dark-mode .notif-tab:not(.active):hover,
body.dark-mode .order-item,
body.dark-mode .order-summary,
body.dark-mode .order-total,
body.dark-mode .page-link,
body.dark-mode .payment-option,
body.dark-mode .plan-card,
body.dark-mode .player-type-card,
body.dark-mode .playlist-card:not(.selected),
body.dark-mode .playlist-form input,
body.dark-mode .playlist-form textarea,
body.dark-mode .playlist-item,
body.dark-mode .product-card,
body.dark-mode .profile-dropdown .dropdown-menu,
body.dark-mode .quantity-btn,
body.dark-mode .quantity-input,
body.dark-mode .sched-cancel,
body.dark-mode .sched-card,
body.dark-mode .sched-card-btns button,
body.dark-mode .sched-day span,
body.dark-mode .sched-event,
body.dark-mode .sched-event-grid input,
body.dark-mode .sched-event-grid select,
body.dark-mode .sched-events li,
body.dark-mode .sched-modal-body > input[type=text],
body.dark-mode .sched-modal-body > select,
body.dark-mode .sched-modal-foot,
body.dark-mode .sched-modal-head,
body.dark-mode .sched-screen span,
body.dark-mode .schedule-input,
body.dark-mode .schedules-header,
body.dark-mode .screen-details-modal .form-control,
body.dark-mode .screen-details-modal .form-select,
body.dark-mode .screens-table tbody tr,
body.dark-mode .screens-table td,
body.dark-mode .screens-table-wrapper,
body.dark-mode .settings-form input[type="email"],
body.dark-mode .settings-form input[type="password"],
body.dark-mode .settings-form input[type="text"],
body.dark-mode .settings-form select,
body.dark-mode .settings-group,
body.dark-mode .settings-group > h3,
body.dark-mode .settings-item,
body.dark-mode .settings-link,
body.dark-mode .sidebar,
body.dark-mode .size-preset:not(.active),
body.dark-mode .stat-row,
body.dark-mode .summary-row,
body.dark-mode .tab-nav,
body.dark-mode .tag-btn,
body.dark-mode .today-btn,
body.dark-mode .token-copy-row input,
body.dark-mode .users-search input,
body.dark-mode .users-table td,
body.dark-mode .users-table td:last-child,
body.dark-mode .users-table td:nth-child(2),
body.dark-mode .users-table th,
body.dark-mode .users-table tr,
body.dark-mode .view-selector {
  border-color: var(--dm-border);
}


/* ---------- 1. Primary buttons -------------------------------------- */
/* The page's "do this": Add Screen / Playlist / Schedule / Media,
   Upload, Save, Pair Device, Create app, Continue to payment, the
   recommended plan's Subscribe, Next / Place Order in the player
   wizard (Place Order was Bootstrap-ish green; it is a Pay, not an
   approval, so it takes the primary colour).
   Excluded on purpose (they keep their current style as secondaries):
   - #dashboard-btn2 "Manage Subscription" (its card is not a "do this")
   - .action-btn.uniform-btn on screen edit (View full screen, Find /
     Clear location) - three of them sit beside the one real Save. */
body .uniform-btn:not(#dashboard-btn2):not(.action-btn),
body .add-screen-btn,
body .btn-submit,
body .btn-save,
body .btn.btn-primary,
body .btn-primary,
body .as-btn-primary,
body .save-btn,
body .sched-primary,
body .btn-blue,
body .hw-pay,
body .hw-item__btn,
body .btn-create-app,
body #openManagePlan,
body .plan-card.recommended .plan-cta:not(.current),
body .vypa-hw-promo__cta,
body .dashboard-footer .subscribe-btn,
body .fp-card button[type="submit"],
body .rp-card button[type="submit"],
body #pairNewSubmitBtn,
body .pair-submit-btn,
body #placeOrderBtn,
body .checkout-btn,
body .btn-resend,
body .rp-card a[href$="/Forgotpassword"] {
  background: var(--lemon);
  background-image: none;
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: var(--radius-pill);
  font-weight: 600;
  box-shadow: none;
  text-decoration: none;
  transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

/* The "Pair Device" button in the pair-new modal is styled inline
   (style="background:var(--vypa-blue); color:#fff; border:none;
   border-radius:8px"); only !important outranks an inline style. */
body #pairNewSubmitBtn {
  background: var(--lemon) !important;
  color: var(--ink) !important;
  border: 2px solid var(--ink) !important;
  border-radius: var(--radius-pill) !important;
}

/* Icons inside inherit ink. */
body .uniform-btn:not(#dashboard-btn2):not(.action-btn) i,
body .add-screen-btn i,
body .btn-submit i,
body .btn-save i,
body .btn-primary i,
body .vypa-hw-promo__cta i,
body #pairNewSubmitBtn i,
body .pair-submit-btn i {
  color: inherit;
}

/* Several of these drew a white "shine" sweep with ::before; on
   lemon it reads as a glitch, so it goes (as on the site). */
body .btn-submit::before,
body .btn-save::before {
  display: none;
}

body .uniform-btn:not(#dashboard-btn2):not(.action-btn):hover,
body .add-screen-btn:hover,
body .btn-submit:hover,
body .btn-save:hover,
body .btn.btn-primary:hover,
body .btn-primary:hover,
body .as-btn-primary:hover,
body .save-btn:hover,
body .sched-primary:hover,
body .btn-blue:hover,
body .hw-pay:hover,
body .hw-item__btn:hover,
body .btn-create-app:hover,
body #openManagePlan:hover,
body .plan-card.recommended .plan-cta:not(.current):hover,
body .vypa-hw-promo__cta:hover,
body .dashboard-footer .subscribe-btn:hover,
body .fp-card button[type="submit"]:hover,
body .rp-card button[type="submit"]:hover,
body .pair-submit-btn:hover,
body #placeOrderBtn:hover,
body .checkout-btn:hover:not(:disabled),
body .btn-resend:hover:not(:disabled),
body .rp-card a[href$="/Forgotpassword"]:hover {
  background: var(--lemon-hover);
  background-image: none;
  color: var(--ink);
  border-color: var(--ink);
  box-shadow: none;
  filter: none;
  opacity: 1;
  transform: translateY(-1px);
}

body #pairNewSubmitBtn:hover {
  background: var(--lemon-hover) !important;
  transform: translateY(-1px);
}

/* Bootstrap paints :active / .active / :focus with its own blue. */
body .btn.btn-primary:active,
body .btn.btn-primary.active,
body .btn.btn-primary:focus,
body .pair-submit-btn:active,
body .pair-submit-btn:focus {
  background: var(--lemon-hover);
  color: var(--ink);
  border-color: var(--ink);
}

/* Disabled keeps the lemon but reads as unavailable. screenstable.css
   greys a disabled Add Screen with !important; that is left alone. */
body .btn-primary:disabled,
body .checkout-btn:disabled,
body .btn-resend:disabled,
body .sched-primary:disabled,
body .hw-pay[disabled],
body .btn-submit:disabled {
  opacity: .55;
  transform: none;
  cursor: not-allowed;
}

/* The ink border is for light surfaces. On the dark hardware cards
   and the navy promo it would read as a hole, so it drops into the fill. */
body .hw-item__btn,
body .vypa-hw-promo__cta,
body .dashboard-footer .subscribe-btn {
  border-color: var(--lemon);
}
body .hw-item__btn:hover,
body .vypa-hw-promo__cta:hover,
body .dashboard-footer .subscribe-btn:hover {
  border-color: var(--lemon-hover);
}

/* Focus: blue ring on the light theme (a white ring would vanish),
   white ring on the dark cards. */
body .uniform-btn:focus-visible,
body .add-screen-btn:focus-visible,
body .btn-submit:focus-visible,
body .btn-save:focus-visible,
body .btn-primary:focus-visible,
body .as-btn-primary:focus-visible,
body .save-btn:focus-visible,
body .sched-primary:focus-visible,
body .btn-blue:focus-visible,
body .hw-pay:focus-visible,
body .btn-create-app:focus-visible,
body #openManagePlan:focus-visible,
body .plan-cta:focus-visible,
body .fp-card button[type="submit"]:focus-visible,
body .rp-card button[type="submit"]:focus-visible,
body #pairNewSubmitBtn:focus-visible,
body .pair-submit-btn:focus-visible,
body #placeOrderBtn:focus-visible,
body .checkout-btn:focus-visible,
body .btn-resend:focus-visible,
body .rp-card a[href$="/Forgotpassword"]:focus-visible,
body .btn-cancel:focus-visible,
body .displayAds_btn:focus-within {
  outline: none;
  box-shadow: var(--focus-ring-light);
}

body .hw-item__btn:focus-visible,
body .vypa-hw-promo__cta:focus-visible,
body .dashboard-footer .subscribe-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}


/* ---------- 2. Monetize (sidebar) ----------------------------------- */
/* "Monetize your screen(s)" is the Host product's call, in the Host
   green (as "Advertise"/"Host" are on vypa.co). It stays green, not
   lemon: it sits right under the lemon active-nav pill, and two equal
   lemon blocks side by side is what the brief rules out. Only its
   contrast is fixed: white on #069d27 was 3.8:1; #15803d is ~5:1. */
/* view_audio and view_webpage draw the same button with an older class,
   .advertise_btn, that no stylesheet ever defined: white text on the
   browser's grey button (1.1:1). Same green, colour only. */
body .displayAds_btn,
body .advertise_btn {
  background-color: #15803d;
  transition: background-color .2s ease;
}
body .displayAds_btn:hover,
body .advertise_btn:hover {
  background-color: #166534;              /* ~7:1 with white */
}
body .displayAds_btn a,
body .displayAds_btn #host_text,
body .displayAds_btn #dollar,
body .advertise_btn a,
body .advertise_btn #host_text,
body .advertise_btn #dollar {
  color: #fff;
}


/* ---------- 3. Active sidebar item ---------------------------------- */
/* Lemon fill behind ink text and icon. Same padding and radius box as
   the hover state, so nothing moves. Hover on the others goes to full
   brand blue (it read --brand, i.e. the soft blue: ~2.3:1 on #f0f3f8). */
body .nav-links a.active,
body .nav-links a.active:hover,
body .sidebar-submenu a.active,
body .sidebar-submenu a.active:hover {
  background: var(--lemon);
  color: var(--ink);
  font-weight: 600;
  border-radius: var(--radius-pill);
}
body .nav-links a.active i,
body .sidebar-submenu a.active i {
  color: var(--ink);
}

body .nav-links a:not(.active):hover,
body .sidebar-group-toggle:hover,
body .sidebar-submenu a:not(.active):hover {
  color: var(--vypa-blue);
}

body .nav-links a:focus-visible,
body .sidebar-submenu a:focus-visible,
body .sidebar-group-toggle:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-light);
}


/* ---------- 3b. Dark Mode button (sidebar) -------------------------- */
/* The last item in the sidebar nav, drawn like a nav link so it sits in
   the list rather than looking like a new call to action. darkmode.js
   swaps its icon and label and keeps aria-pressed in step. */
body .sidebar-theme-toggle {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 44px;
  margin-top: 6px;
  padding: 12px 16px;
  background: transparent;
  border: 0;
  border-radius: var(--radius-pill);
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: color .2s ease, background-color .2s ease;
}
body .sidebar-theme-toggle:hover {
  color: var(--vypa-blue);
}
body .sidebar-theme-toggle:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-light);
}
body.dark-mode .sidebar-theme-toggle {
  color: var(--dm-text);
}
body.dark-mode .sidebar-theme-toggle:hover {
  color: var(--lemon);
}
body.dark-mode .sidebar-theme-toggle:focus-visible {
  box-shadow: var(--focus-ring);
}


/* ---------- 4. Status chips ----------------------------------------- */
/* Live / Online / Active / Paid / Playing  -> lemon-tint + lemon-ink.
   Pending / Trialing / Processing / Unpaired -> sun + ink.
   Offline / Failed / Past due / Screen off  -> existing red or grey.
   All chips: pill radius. */
body .status-badge-display.online,
body .status-badge.active,
body .invoice-status.paid,
body .status-paid,
body .status-delivered,
body .sched-pill.on {
  background: var(--lemon-tint);
  color: var(--lemon-ink);
  border-radius: var(--radius-pill);
}

body .status-badge.trialing,
body .status-badge.trial,
body .invoice-status.pending,
body .status-pending,
body .status-processing {
  background: var(--sun);
  color: var(--ink);
  border-radius: var(--radius-pill);
}

body .status-badge.past_due,
body .status-badge.cancelled,
body .status-badge-display.offline,
body .invoice-status,
body .status-overdue,
body .status-shipped,
body .sched-pill.off {
  border-radius: var(--radius-pill);
}

/* Video conversion badges had no CSS at all (plain text). */
body .transcode-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: var(--radius-pill);
  font-size: .72rem;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}
body .transcode-pending {
  background: var(--sun);
  color: var(--ink);
}
body .transcode-failed {
  background: #fee2e2;
  color: #991b1b;
}

/* Screens table: the state label is a bare span with an inline colour
   set in PHP (#198754 Paired, #6c757d Unpaired, #dc3545 Disabled /
   Trial Expired). The attribute selectors key off those values and
   turn Paired and Unpaired into chips; the red ones stay red text.
   !important because the colour is inline. */
body .status-cell > span[style*="#198754"],
body .status-cell > span[style*="#6c757d"] {
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  line-height: 1.5;
}
body .status-cell > span[style*="#198754"] {
  background: var(--lemon-tint);
  color: var(--lemon-ink) !important;
}
body .status-cell > span[style*="#6c757d"] {
  background: var(--sun);
  color: var(--ink) !important;
}

/* The online dot next to it: a lemon dot on white is ~1.3:1 and would
   stop being visible, so the dot keeps its green; the chip carries it. */


/* ---------- 5. Badges that mean "benefit" --------------------------- */
body .plan-card.recommended .plan-badge,
body .recommended-badge,
body .savings-badge,
body .trial-badge {
  background: var(--lemon);
  color: var(--ink);
  border-radius: var(--radius-pill);
}

/* "Now in Nigeria" on the dark hardware promo is a "notice this". */
body .vypa-hw-promo__badge {
  background: var(--sun);
  color: var(--ink);
}


/* ---------- 6. Recommended plan ------------------------------------- */
body .plan-card.recommended {
  border-color: var(--lemon);
  box-shadow: 0 0 0 3px rgb(182 242 58 / .35);
}


/* ---------- 7. Key money numbers ------------------------------------ */
/* Player prices sit on the navy hardware cards: lemon number on dark. */
body .vypa-hw-card__price,
body .hw-item__price {
  color: var(--lemon);
}

/* "Free Basic Plan" / "1 License" read --brand, which dashboard.css
   sets to the soft blue: 2.6:1 on white. Full brand blue passes. */
body .card-subscription strong {
  color: var(--vypa-blue);
}


/* ---------- 8. Selected tabs ---------------------------------------- */
/* Active = lemon fill, ink text. Hover on the others keeps its blue. */
body .tabs button.active,
body .media-library-panel .tabs button.active,
body .notif-tab.active,
body .tab-nav .tab.active,
body .nav-tabs .nav-link.active,
body .nav-pills .nav-link.active {
  background: var(--lemon);
  color: var(--ink);
  border-color: var(--lemon);
}

/* Profile tabs were an underline; a lemon underline on white is
   invisible (1.3:1), so the selected one becomes a pill. The 3px
   transparent bottom border stays, so the row does not move. */
body .tab-nav .tab.active {
  border-radius: var(--radius-pill);
  border-bottom-color: transparent;
}

body .notif-tab.active {
  border-radius: var(--radius-pill);
}

/* Schedule editor: the Playlist / Screen-off toggle and the day and
   screen pickers are multi-select pills, not tabs. Full lemon on every
   selected pill drowned out "Save Schedule", so they take the soft
   treatment: lemon-tint fill, lemon-ink text (~12:1) and a lemon-ink
   edge (clear against white). The existing 1px border width is kept
   and thickened with an inset shadow, so nothing moves. */
body .toggle-btn.active,
body .sched-day input:checked + span,
body .sched-screen input:checked + span {
  background: var(--lemon-tint);
  border-color: var(--lemon-ink);
  box-shadow: inset 0 0 0 .5px var(--lemon-ink);
  color: var(--lemon-ink);
}

body .tabs button:focus-visible,
body .notif-tab:focus-visible,
body .tab-nav .tab:focus-visible,
body .nav-tabs .nav-link:focus-visible,
body .toggle-btn:focus-visible,
body .sched-day input:focus-visible + span,
body .sched-screen input:focus-visible + span {
  outline: none;
  box-shadow: var(--focus-ring-light);
}


/* ---------- 9. Stepper (Buy players) -------------------------------- */
/* Active and completed steps are lemon. The ink ring keeps the circle
   visible against white; labels are ink / lemon-ink, not lemon. */
body .step.active .step-circle,
body .step.completed .step-circle {
  background: var(--lemon);
  border-color: var(--ink);
  color: var(--ink);
}
body .step.active .step-label {
  color: var(--ink);
}
body .step.completed .step-label {
  color: var(--lemon-ink);
}


/* ---------- 10. Toggles & checkboxes -------------------------------- */
/* On = lemon track. The knob turns ink so "on" is still obvious
   against a white page (a white knob on lemon is ~1.3:1). */
body .toggle-switch input:checked + .toggle-slider,
body input:checked + .slider,
body .toggle-switch.active {
  background: var(--lemon);
}
body .toggle-switch input:checked + .toggle-slider:before,
body input:checked + .slider:before,
body .toggle-switch.active::after {
  background: var(--ink);
}

body .toggle-switch input:focus-visible + .toggle-slider,
body .toggle-switch input:focus-visible + .slider {
  box-shadow: var(--focus-ring-light);
}

/* Native checkboxes: lemon fill, Chrome picks a dark tick for it.
   "Keep me signed in" sets accent-color inline, hence !important. */
body input[type="checkbox"],
body input[type="radio"] {
  accent-color: var(--lemon);
}
body .vypa-stay input[type="checkbox"] {
  accent-color: var(--lemon) !important;
}

/* The Terms link beside the order checkbox read --brand (soft blue):
   2.3:1 on its #f1f5fa panel. */
body .terms-checkbox a {
  color: var(--vypa-blue);
}


/* ---------- 11. Callouts -------------------------------------------- */
/* Email-not-verified banner: sun, ink text, 16px radius. Every
   property is inline on the element, so !important is the only way. */
body #emailVerificationBanner {
  background: var(--sun) !important;
  color: var(--ink) !important;
  border-radius: var(--radius-callout) !important;
  border-color: rgb(11 15 26 / .12) !important;
  box-shadow: 0 8px 24px rgb(11 15 26 / .18) !important;
}
body #emailVerificationBanner i,
body #emailVerificationBanner button[onclick="closeVerificationBanner()"] {
  color: var(--ink) !important;
}
/* Its "Resend" button was #f59e0b on white: 2.2:1. */
body #emailVerificationBanner #resendBtn {
  color: var(--ink) !important;
  background: #fff !important;
}


/* ---------- 12. Auth pages (log in / sign up / forgot / reset) ------ */
body #loginBtn,
body #signupBtn,
body #verifyBtn,
body.dark-mode #loginBtn,
body.dark-mode #signupBtn,
body.dark-mode #verifyBtn {
  background: var(--lemon);
  color: var(--ink);
  border: 2px solid var(--ink);
  font-weight: 600;
  border-radius: var(--radius-pill);
  min-height: 48px;
  transition: background-color .2s ease, transform .2s ease;
}

body.dark-mode #loginBtn,
body.dark-mode #signupBtn,
body.dark-mode #verifyBtn,
body.dark-mode .fp-card button[type="submit"],
body.dark-mode .rp-card button[type="submit"] {
  border-color: var(--lemon);
}

body #loginBtn:hover,
body #signupBtn:hover,
body #verifyBtn:hover,
body.dark-mode #loginBtn:hover,
body.dark-mode #signupBtn:hover,
body.dark-mode #verifyBtn:hover {
  background: var(--lemon-hover);
  color: var(--ink);
  transform: translateY(-1px);
}

body #loginBtn:focus-visible,
body #signupBtn:focus-visible,
body #verifyBtn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-light);
}

body.dark-mode #loginBtn:focus-visible,
body.dark-mode #signupBtn:focus-visible,
body.dark-mode #verifyBtn:focus-visible,
body.dark-mode .fp-card button[type="submit"]:focus-visible,
body.dark-mode .rp-card button[type="submit"]:focus-visible {
  box-shadow: var(--focus-ring);
}

body #loginBtn:disabled,
body #signupBtn:disabled {
  opacity: .6;
  cursor: progress;
  transform: none;
}

/* Links on dark: lemon, underline on hover. Light keeps brand blue. */
body.dark-mode .login-note a,
body.dark-mode .login-note a.forgot-link,
body.dark-mode .signup-note a,
body.dark-mode .fp-back,
body.dark-mode .rp-back {
  color: var(--lemon);
}
body.dark-mode .login-note a:hover,
body.dark-mode .signup-note a:hover,
body.dark-mode .fp-back:hover,
body.dark-mode .rp-back:hover {
  color: var(--lemon);
  text-decoration: underline;
}

body.dark-mode .toggle-switch input:focus-visible + .slider {
  box-shadow: var(--focus-ring);
}

/* "Request a new link" on an expired reset link is a link styled
   inline, so its hover needs !important to beat the inline fill. */
body .rp-card a[href$="/Forgotpassword"]:hover {
  background: var(--lemon-hover) !important;
}


/* ---------- 13. Tap targets ----------------------------------------- */
/* 44px minimum on mobile for the buttons restyled above. Table-row
   actions (.btn-action) are left alone so rows keep their height. */
@media (max-width: 768px) {
  body .uniform-btn:not(#dashboard-btn2):not(.action-btn),
  body .btn-submit,
  body .btn-cancel,
  body .btn-save,
  body .btn-primary,
  body .as-btn-primary,
  body .save-btn,
  body .sched-primary,
  body .hw-pay,
  body .hw-item__btn,
  body .btn-create-app,
  body #openManagePlan,
  body .plan-cta,
  body .vypa-hw-promo__cta,
  body .dashboard-footer .subscribe-btn,
  body .notif-tab,
  body .tabs button,
  body .tab-nav .tab {
    min-height: 44px;
  }
}


@media (prefers-reduced-motion: reduce) {
  body .uniform-btn, body .add-screen-btn, body .btn-submit, body .btn-save,
  body .btn-primary, body .as-btn-primary, body .save-btn, body .sched-primary,
  body .btn-blue, body .hw-pay, body .hw-item__btn, body .btn-create-app,
  body .plan-cta, body .vypa-hw-promo__cta, body .displayAds_btn,
  body #loginBtn, body #signupBtn, body #verifyBtn, body #pairNewSubmitBtn,
  body .pair-submit-btn {
    transition: none;
  }
  body .uniform-btn:hover, body .add-screen-btn:hover, body .btn-submit:hover,
  body .btn-save:hover, body .btn-primary:hover, body .as-btn-primary:hover,
  body .save-btn:hover, body .sched-primary:hover, body .btn-blue:hover,
  body .hw-pay:hover, body .hw-item__btn:hover, body .btn-create-app:hover,
  body .plan-cta:hover, body .vypa-hw-promo__cta:hover, body .displayAds_btn:hover,
  body #loginBtn:hover, body #signupBtn:hover, body #verifyBtn:hover,
  body #pairNewSubmitBtn:hover, body .pair-submit-btn:hover {
    transform: none;
  }
}


/* ---------- 13b. Contrast fixes (both themes) ----------------------- */
/* Found by a contrast audit of every signed-in page. Colours keep their
   meaning (red stays red, the Owner chip stays red on pink); each only
   darkens enough to reach 4.5:1. */

/* Destructive buttons: white on #e74c3c / #ef4444 was ~3.8:1. #dc2626
   is the same red family at ~4.8:1 (rule 5: destructive stays red). */
body .btn-danger,
body .btn-action.btn-delete {
  background-color: #dc2626;
  border-color: #dc2626;
  color: #fff;
}
body .btn-danger:hover,
body .btn-action.btn-delete:hover {
  background-color: #b91c1c;
  border-color: #b91c1c;
  color: #fff;
}

/* "Delete My Account": #dc2626 on its pale red fill was 4.4:1. */
body .delete-account-btn {
  color: #b91c1c;
}

/* The Owner chip (red on pink) was 4.1:1. */
body .badge-admin {
  color: #b42318;
}

/* "N unread" pill: #6b7280 on #f3f4f6 was 4.4:1. */
body .notif-unread-pill {
  color: #4b5563;
}

/* Device type chip on the screens table: #1976d2 on #e3f2fd was 4.0:1. */
body .screen-type {
  color: var(--vypa-blue);
}


/* ---------- 14. Dark theme: controls, links and accent adjustments -- */
/* Everything here is `body.dark-mode ...` and comes last, so it beats
   both the page CSS and the light-theme choices above. */

/* Bootstrap colour utilities are !important, so these must be too.
   screen_edit_assign puts .bg-light on <body> itself. */
body.dark-mode.bg-light,
body.dark-mode.bg-white {
  background-color: var(--ink) !important;
}
body.dark-mode .bg-light,
body.dark-mode .bg-white,
body.dark-mode .bg-body,
body.dark-mode .bg-body-tertiary {
  background-color: var(--dm-surface) !important;
}
body.dark-mode .text-dark,
body.dark-mode .text-black,
body.dark-mode .text-body {
  color: var(--dm-text) !important;
}
body.dark-mode .text-muted,
body.dark-mode .text-secondary,
body.dark-mode .text-black-50 {
  color: var(--dm-muted) !important;
}

/* Form controls. */
body.dark-mode input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]),
body.dark-mode select,
body.dark-mode textarea,
body.dark-mode .form-control,
body.dark-mode .form-select {
  background-color: var(--dm-raised);
  color: var(--dm-text);
  border-color: var(--dm-border);
}
body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
  color: var(--dm-muted);
  opacity: 1;
}
body.dark-mode input:focus,
body.dark-mode select:focus,
body.dark-mode textarea:focus,
body.dark-mode .form-control:focus,
body.dark-mode .form-select:focus {
  background-color: var(--dm-raised);
  color: var(--dm-text);
  border-color: var(--vypa-blue-soft);
  box-shadow: var(--focus-ring);
  outline: none;
}

/* Tables, including Bootstrap's (which paint cells from their own vars). */
body.dark-mode table,
body.dark-mode .table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--dm-text);
  --bs-table-border-color: var(--dm-border);
  --bs-table-striped-bg: rgb(255 255 255 / .03);
  --bs-table-striped-color: var(--dm-text);
  --bs-table-hover-bg: var(--dm-raised);
  --bs-table-hover-color: var(--dm-text);
  color: var(--dm-text);
  border-color: var(--dm-border);
}
body.dark-mode th {
  background-color: var(--dm-raised);
  color: var(--dm-text);
  border-color: var(--dm-border);
}
body.dark-mode td {
  color: var(--dm-text);
  border-color: var(--dm-border);
}
body.dark-mode hr {
  border-color: var(--dm-border);
  opacity: 1;
}
body.dark-mode .btn-close {
  filter: invert(1) grayscale(1) brightness(2);
}

/* Links: lemon on dark, underline on hover (brief rule 10). */
body.dark-mode .main a:not([class]),
body.dark-mode .modal a:not([class]),
body.dark-mode .back-link,
body.dark-mode .link-card a,
body.dark-mode .detail-value a,
body.dark-mode .player-link,
body.dark-mode .terms-checkbox a,
body.dark-mode .playlist-tour-link {
  color: var(--lemon);
}
body.dark-mode .main a:not([class]):hover,
body.dark-mode .modal a:not([class]):hover,
body.dark-mode .back-link:hover,
body.dark-mode .link-card a:hover,
body.dark-mode .detail-value a:hover,
body.dark-mode .player-link:hover,
body.dark-mode .terms-checkbox a:hover,
body.dark-mode .playlist-tour-link:hover {
  color: var(--lemon);
  text-decoration: underline;
}

/* Blue TEXT that is not a link: full brand blue is ~2.3:1 on the dark
   surface, so it lifts to the soft blue (~6.9:1), which is what that
   token is for. Selectors from every rule that set blue text on the
   signed-in pages, minus chips on light tints and accent's own states. */
body.dark-mode .action,
body.dark-mode .action-btn:hover,
body.dark-mode .app-card--blank .app-card-icon,
body.dark-mode .app-card--blank h3,
body.dark-mode .apps-back:hover,
body.dark-mode .btn-open-editor:hover,
body.dark-mode .card-btn,
body.dark-mode .card-subscription strong,
body.dark-mode .description-toggle,
body.dark-mode .description-toggle:hover,
body.dark-mode .detail-value.plan-type,
body.dark-mode .device-card input:checked + .icon,
body.dark-mode .device-card input:checked ~ .icon,
body.dark-mode .device-card input:checked ~ .text,
body.dark-mode .event,
body.dark-mode .field-label i,
body.dark-mode .headline,
body.dark-mode .info-row i,
body.dark-mode .manage-btn,
body.dark-mode .media-library-header h3,
body.dark-mode .modal-footer-info i,
body.dark-mode .order-item-price,
body.dark-mode .order-summary h3,
body.dark-mode .payment-option i,
body.dark-mode .player-price,
body.dark-mode .player-type-card i,
body.dark-mode .playlist-card .check-icon,
body.dark-mode .product-icon,
body.dark-mode .quantity-btn:hover,
body.dark-mode .screen-edit-header h2,
body.dark-mode .screen-title,
body.dark-mode .select-arrow,
body.dark-mode .stat-row.registered .stat-number,
body.dark-mode .tag-btn:hover,
body.dark-mode .total-amount {
  color: var(--vypa-blue-soft);
}

/* Sidebar: accent's light-theme hover is full blue; on dark it is lemon.
   The Media group toggle and submenu links follow. */
body.dark-mode .nav-links a:not(.active):hover,
body.dark-mode .sidebar-group-toggle:hover,
body.dark-mode .sidebar-submenu a:not(.active):hover {
  color: var(--lemon);
  background-color: var(--dm-raised);
}
body.dark-mode .nav-links a:not(.active),
body.dark-mode .nav-links a:not(.active) i,
body.dark-mode .sidebar-group-toggle,
body.dark-mode .sidebar-group-toggle i,
body.dark-mode .sidebar-submenu a:not(.active),
body.dark-mode .sidebar-submenu a:not(.active) i {
  color: var(--dm-text);
}
body.dark-mode .sidebar {
  border-right: 1px solid var(--dm-border);
}
/* The logo is brand blue on transparent: ~2.3:1 on the dark sidebar.
   Lifted, not recoloured, so it stays the logo. */
body.dark-mode .sidebar .logo img {
  filter: brightness(1.9) saturate(.9);
}

/* Top bar: the page title and the black Logout pill. */
body.dark-mode .topbar,
body.dark-mode .topbar-left h2 {
  color: var(--dm-text);
}
body.dark-mode .logout-btn {
  background: var(--dm-raised);
  color: var(--dm-text);
  border: 1px solid var(--dm-border);
}
body.dark-mode .topbar-right .push-status {
  background: transparent;
  color: var(--dm-text);
  border-color: var(--dm-muted);
}

/* Primary buttons: the ink edge is for light surfaces; on dark it would
   read as a hole, so it drops into the lemon (as on the dark cards). */
body.dark-mode .uniform-btn:not(#dashboard-btn2):not(.action-btn),
body.dark-mode .add-screen-btn,
body.dark-mode .btn-submit,
body.dark-mode .btn-save,
body.dark-mode .btn-primary,
body.dark-mode .as-btn-primary,
body.dark-mode .save-btn,
body.dark-mode .sched-primary,
body.dark-mode .btn-blue,
body.dark-mode .hw-pay,
body.dark-mode .btn-create-app,
body.dark-mode #openManagePlan,
body.dark-mode .plan-card.recommended .plan-cta:not(.current),
body.dark-mode .pair-submit-btn,
body.dark-mode #placeOrderBtn,
body.dark-mode .checkout-btn {
  border-color: var(--lemon);
}
body.dark-mode #pairNewSubmitBtn {
  border-color: var(--lemon) !important;
}
/* Secondary buttons that were an ink outline on white. */
body.dark-mode #dashboard-btn2,
body.dark-mode .action-btn {
  background: transparent;
  color: var(--dm-text);
  border: 2px solid var(--dm-muted);
}

/* Focus: the blue ring vanishes on dark; white ring instead (rule 14). */
body.dark-mode button:focus-visible,
body.dark-mode a:focus-visible,
body.dark-mode .btn:focus-visible,
body.dark-mode .uniform-btn:focus-visible,
body.dark-mode .nav-links a:focus-visible,
body.dark-mode .sidebar-submenu a:focus-visible,
body.dark-mode .tabs button:focus-visible,
body.dark-mode .notif-tab:focus-visible,
body.dark-mode .tab-nav .tab:focus-visible,
body.dark-mode .toggle-btn:focus-visible,
body.dark-mode .sched-day input:focus-visible + span,
body.dark-mode .sched-screen input:focus-visible + span,
body.dark-mode .toggle-switch input:focus-visible + .toggle-slider,
body.dark-mode .toggle-switch input:focus-visible + .slider {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Toggles when off: the light grey track is fine; the white knob on a
   dark page needs no change. On = lemon track, ink knob (section 10). */

/* Cards whose class contains "status" were kept out of the generated
   lists with the status chips; their text is ordinary card text. */
body.dark-mode .card-status h4 {
  color: var(--dm-text);
}
body.dark-mode .card-status p,
body.dark-mode .status,
body.dark-mode .last-seen {
  color: var(--dm-muted);
}
/* The Offline count keeps its red, lightened for dark (~6:1). */
body.dark-mode .stat-row.offline .stat-number {
  color: #f87171;
}

/* Screens table: the red state labels (Disabled / Trial Expired) are
   inline #dc3545: ~4.1:1 on dark. Lighter red, same meaning. */
body.dark-mode .status-cell > span[style*="#dc3545"] {
  color: #f87171 !important;
}

/* ---- Inline style="" colours ----
   Many views paint white panels and grey text inline; only !important
   outranks an inline style. Matched on the exact spellings used, each
   ending in ; or " so #fff never catches #fff5f5 and friends. */
body.dark-mode [style*="background:#fff;"],
body.dark-mode [style*="background: white;"],
body.dark-mode [style*="background:#fafbfc;"],
body.dark-mode [style*="background:#f9fafb;"],
body.dark-mode [style*="background: #f9fafb;"],
body.dark-mode [style*="background:#f3f4f6;"],
body.dark-mode [style*="background: #f3f4f6;"] {
  background: var(--dm-surface) !important;
  color: var(--dm-text);
}
body.dark-mode [style^="color:#444"],
body.dark-mode [style*=";color:#444"],
body.dark-mode [style*=" color:#444"],
body.dark-mode [style^="color:#555"],
body.dark-mode [style*=";color:#555"],
body.dark-mode [style*=" color:black"],
body.dark-mode [style*=" color:#374151"],
body.dark-mode [style*=" color: #374151"],
body.dark-mode [style*=";color:#374151"],
body.dark-mode [style*=";color:#111827"],
body.dark-mode [style*=" color:#1f2937"] {
  color: var(--dm-text) !important;
}
body.dark-mode [style^="color:#6b7280"],
body.dark-mode [style^="color: #6b7280"],
body.dark-mode [style*=" color: #6b7280"],
body.dark-mode [style*=" color:#6b7280"],
body.dark-mode [style*=";color:#6b7280"],
body.dark-mode [style^="color:#64748b"],
body.dark-mode [style*=";color:#4b5563"],
body.dark-mode [style*=" color: grey"],
body.dark-mode [style^="color: grey"] {
  color: var(--dm-muted) !important;
}
/* Inline blue text: lemon when it is a link, soft blue otherwise. The
   attribute tests start at "color" (start, ";" or " "), so a
   background-color never matches. */
body.dark-mode [style^="color:var(--vypa-blue)"],
body.dark-mode [style^="color: var(--vypa-blue)"],
body.dark-mode [style*=";color:var(--vypa-blue)"],
body.dark-mode [style*="; color: var(--vypa-blue)"],
body.dark-mode [style*=" color:var(--vypa-blue)"],
body.dark-mode [style*=" color: var(--vypa-blue)"] {
  color: var(--vypa-blue-soft) !important;
}
body.dark-mode a[style^="color:var(--vypa-blue)"],
body.dark-mode a[style^="color: var(--vypa-blue)"],
body.dark-mode a[style*=";color:var(--vypa-blue)"],
body.dark-mode a[style*=" color:var(--vypa-blue)"],
body.dark-mode a[style*=" color: var(--vypa-blue)"] {
  color: var(--lemon) !important;
}
body.dark-mode [style*="solid #eee"],
body.dark-mode [style*="solid #ccc"],
body.dark-mode [style*="solid #e5e7eb"],
body.dark-mode [style*="solid #d1d5db"] {
  border-color: var(--dm-border) !important;
}
/* Semantic reds, greens, ambers and the Layouts purple set inline for
   light pages: each falls to 2.4-3.8:1 on dark, so each gets the lighter
   shade of the same colour. */
body.dark-mode [style^="color:#dc3545"],
body.dark-mode [style^="color: #dc3545"],
body.dark-mode [style*=";color:#dc3545"],
body.dark-mode [style*=" color:#dc3545"],
body.dark-mode [style*=" color: #dc3545"],
body.dark-mode [style^="color:#ef4444"],
body.dark-mode [style*=";color:#ef4444"],
body.dark-mode [style*=" color:#ef4444"],
body.dark-mode [style*=" color: #ef4444"] {
  color: #f87171 !important;
}
body.dark-mode [style^="color:#b45309"],
body.dark-mode [style*=";color:#b45309"],
body.dark-mode [style*=" color:#b45309"],
body.dark-mode [style*=" color: #b45309"] {
  color: #fbbf24 !important;
}
body.dark-mode [style^="color:#6d28d9"],
body.dark-mode [style*=";color:#6d28d9"],
body.dark-mode [style*=" color:#6d28d9"] {
  color: #c4b5fd !important;
}
/* Pale-blue chips painted inline (Pair New Device, the pairing type
   picker): the fill becomes a blue tint so the soft-blue text reads. */
body.dark-mode [style*="background:#eff2ff"],
body.dark-mode [style*="background: #eff2ff"] {
  background: rgb(var(--vypa-blue-rgb) / .2) !important;
}

/* Light semantic boxes keep their fill in dark, so their text must stay
   ink - it inherited the page's light text and vanished. Links inside
   them go dark blue rather than lemon (lemon on cream is ~1.2:1). */
body.dark-mode .warning-notice,
body.dark-mode .proration-notice,
body.dark-mode .info-box,
body.dark-mode .tip-box,
body.dark-mode .warning,
body.dark-mode .error-notice,
body.dark-mode .new-token-box,
body.dark-mode .current-subscription-banner.trial {
  color: var(--ink);
}
body.dark-mode .warning-notice :is(p, strong, li, small, b, span),
body.dark-mode .proration-notice :is(p, strong, li, small, b, span),
body.dark-mode .info-box :is(p, strong, li, small, b, span),
body.dark-mode .tip-box :is(p, strong, li, small, b, span),
body.dark-mode .warning :is(p, strong, li, small, b, span),
body.dark-mode .error-notice :is(p, strong, li, small, b, span) {
  color: inherit;
}
body.dark-mode :is(.alert, .warning, .warning-notice, .warning-text, .proration-notice, .info-box, .tip-box, .error-notice) a:not([class]) {
  color: var(--vypa-blue-700);
}

/* Buy players stepper labels: accent's active label is ink (for white);
   on dark it is light, done steps lemon (text on dark), the rest muted. */
body.dark-mode .step-label {
  color: var(--dm-muted);
}
body.dark-mode .step.active .step-label {
  color: var(--dm-text);
}
body.dark-mode .step.completed .step-label {
  color: var(--lemon);
}

/* Screens table demand-and-rate column. */
body.dark-mode .vd-host-rate {
  color: var(--dm-text);
}
body.dark-mode .vd-host-per {
  color: var(--dm-muted);
}
body.dark-mode .vd-host-uplift {
  color: #4ade80;
}

/* Grey helper text written inline inside the cream notices: #6b7280 on
   #fef3c7 is 4.2:1 (in light too). Placed last so it wins in both themes
   over the dark muted rule above. */
body :is(.warning-notice, .proration-notice, .info-box, .tip-box) [style*="#6b7280"] {
  color: #4b5563 !important;
}