/* Theme CSS for TaskFlow Application */
/* MINIMAL theme switching - only affects specific elements to avoid breaking page designs */

/* Native date/time pickers (owner 2026-10-11): Chromium draws the calendar
   icon black, which vanishes on our dark inputs. color-scheme tells the
   browser to render the control for a dark page - white icon, dark popup
   calendar - and the light theme switches it back. navigation.js injects
   this file on every page, so this is the one rule for the whole app. */
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"] {
    color-scheme: dark;
}
[data-theme="light"] input[type="date"],
[data-theme="light"] input[type="time"],
[data-theme="light"] input[type="datetime-local"],
[data-theme="light"] input[type="month"],
[data-theme="light"] input[type="week"] {
    color-scheme: light;
}

/* Theme toggle button in navbar */
.theme-toggle-btn {
    background: transparent !important;
    border: 1px solid #ccc !important;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    margin: 0 10px;
    transition: all 0.3s ease;
}

.theme-toggle-btn:hover {
    background: #007bff !important;
    border-color: #007bff !important;
}

.theme-toggle-btn i {
    font-size: 18px;
    line-height: 1;
    color: #e8e8e8;
}

/* ============================================
   LIGHT THEME OVERRIDES
   Only override what's necessary for readability
   ============================================ */

/* Light theme - Main backgrounds */
[data-theme="light"] body {
    background-color: #d8d8d8 !important;
}

[data-theme="light"] .container {
    background-color: #d8d8d8 !important;
}

/* Light theme - Navigation */
[data-theme="light"] .nav-header {
    background-color: #e8e8e8 !important;
    border-bottom: 1px solid #ddd !important;
}

[data-theme="light"] .nav-brand,
[data-theme="light"] .nav-links a {
    color: #333 !important;
}

[data-theme="light"] .nav-links a:hover,
[data-theme="light"] .nav-links a.active {
    background-color: #007bff !important;
    color: #e8e8e8 !important;
}

[data-theme="light"] .nav-more-btn {
    color: #333 !important;
}
[data-theme="light"] .nav-more-btn:hover,
[data-theme="light"] .nav-more.open .nav-more-btn {
    background-color: #007bff !important;
    color: #e8e8e8 !important;
}
[data-theme="light"] .nav-more-menu {
    background: #e8e8e8 !important;
    border-color: #ccc !important;
}

/* Light theme - Page titles and text */
[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] .page-header h1 {
    color: #333 !important;
}

/* Light theme - Cards and tiles (touch-plan, index, learning-center) */
[data-theme="light"] .tile,
[data-theme="light"] .touch-point-tile,
[data-theme="light"] .category-tile,
[data-theme="light"] .dashboard-card,
[data-theme="light"] .course-card,
[data-theme="light"] .stat-card {
    background-color: #e8e8e8 !important;
    border: 1px solid #ddd !important;
    color: #333 !important;
}

[data-theme="light"] .tile h3,
[data-theme="light"] .tile p,
[data-theme="light"] .tile-title,
[data-theme="light"] .tile-description,
[data-theme="light"] .touch-point-tile h4,
[data-theme="light"] .touch-point-tile p,
[data-theme="light"] .category-header,
[data-theme="light"] .dashboard-card h3,
[data-theme="light"] .dashboard-card p {
    color: #333 !important;
}

/* Light theme - Task cards */
[data-theme="light"] .task-card {
    background-color: #e8e8e8 !important;
    border: 1px solid #ddd !important;
    color: #333 !important;
}

[data-theme="light"] .task-card .task-title,
[data-theme="light"] .task-card .task-description {
    color: #333 !important;
}

/* Light theme - Calendar - keep dark for contrast with yellow tasks */
[data-theme="light"] .calendar-day {
    background-color: #e9ecef !important;
    border: 1px solid #dee2e6 !important;
}

[data-theme="light"] .calendar-day.empty {
    background-color: #f8f9fa !important;
}

[data-theme="light"] .calendar-day .day-number {
    color: #333 !important;
}

[data-theme="light"] .calendar-day.header {
    background-color: #dee2e6 !important;
    color: #333 !important;
}

/* Light theme - Modals */
[data-theme="light"] .modal-content,
[data-theme="light"] .modal {
    background-color: #e8e8e8 !important;
    color: #333 !important;
}

[data-theme="light"] .modal-header,
[data-theme="light"] .modal-body,
[data-theme="light"] .modal-footer {
    background-color: #e8e8e8 !important;
    color: #333 !important;
    border-color: #ddd !important;
}

[data-theme="light"] .modal label,
[data-theme="light"] .modal h2,
[data-theme="light"] .modal h3,
[data-theme="light"] .modal p {
    color: #333 !important;
}

/* Light theme - Form inputs in modals */
[data-theme="light"] .modal input,
[data-theme="light"] .modal select,
[data-theme="light"] .modal textarea {
    background-color: #e8e8e8 !important;
    border: 1px solid #ccc !important;
    color: #333 !important;
}

/* Light theme - Tables */
[data-theme="light"] table {
    background-color: #e8e8e8 !important;
}

[data-theme="light"] th {
    background-color: #f8f9fa !important;
    color: #333 !important;
    border: 1px solid #dee2e6 !important;
}

[data-theme="light"] td {
    background-color: #e8e8e8 !important;
    color: #333 !important;
    border: 1px solid #dee2e6 !important;
}

[data-theme="light"] tr:hover td {
    background-color: #f2f2f2 !important;
}

[data-theme="light"] .user-group-box {
    background-color: #e8e8e8 !important;
    border-color: #ccc !important;
}
[data-theme="light"] .user-group-box-meta,
[data-theme="light"] .user-group-box-empty {
    color: #555 !important;
}

/* Light theme - Advocate cards */
[data-theme="light"] .advocate-card,
[data-theme="light"] .advocate-row {
    background-color: #e8e8e8 !important;
    border: 1px solid #ddd !important;
    color: #333 !important;
}

[data-theme="light"] .advocate-card h3,
[data-theme="light"] .advocate-card p,
[data-theme="light"] .advocate-card span {
    color: #333 !important;
}

/* Light theme - Learning center */
[data-theme="light"] .learning-card,
[data-theme="light"] .video-card {
    background-color: #e8e8e8 !important;
    border: 1px solid #ddd !important;
    color: #333 !important;
}

/* Light theme - Learning center course cards and images */
[data-theme="light"] .course-card {
    background-color: #e8e8e8 !important;
    border: 1px solid #ddd !important;
}

[data-theme="light"] .course-image {
    background-color: #c8c8c8 !important;
}

[data-theme="light"] .course-title,
[data-theme="light"] .course-description,
[data-theme="light"] .course-stats {
    color: #333 !important;
}

[data-theme="light"] .progress-bar {
    background-color: #bbb !important;
}

[data-theme="light"] .upload-tile {
    background-color: #e8e8e8 !important;
    border: 1px solid #ddd !important;
}

[data-theme="light"] .upload-tile h2,
[data-theme="light"] .upload-tile p {
    color: #333 !important;
}

/* Light theme - Learning center buttons */
[data-theme="light"] .continue-button {
    background-color: #999 !important;
    color: white !important;
}

[data-theme="light"] .continue-button:hover {
    background-color: #777 !important;
}

/* Light theme - Login/Auth form */
[data-theme="light"] .auth-form {
    background-color: #e8e8e8 !important;
    border: 1px solid #ccc !important;
}

[data-theme="light"] .auth-form h2,
[data-theme="light"] .auth-form label {
    color: #333 !important;
}

[data-theme="light"] .auth-form input {
    background-color: #fff !important;
    border: 1px solid #ccc !important;
    color: #333 !important;
}

[data-theme="light"] .auth-form input::placeholder {
    color: #888 !important;
}

/* Light theme - Index page dashboard tiles */
[data-theme="light"] .dashboard-tile,
[data-theme="light"] .feature-card {
    background-color: #e8e8e8 !important;
    border: 1px solid #ddd !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
}

[data-theme="light"] .dashboard-tile h3,
[data-theme="light"] .dashboard-tile p,
[data-theme="light"] .feature-card h3,
[data-theme="light"] .feature-card p {
    color: #333 !important;
}

/* Light theme - Index page tiles-card container (the black box around tiles) */
[data-theme="light"] .tiles-card {
    background-color: #c8c8c8 !important;
    border: 1px solid #bbb !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15) !important;
}

/* Light theme - Sidebar (advocates page) */
[data-theme="light"] .sidebar,
[data-theme="light"] .alphabet-nav {
    background-color: #f8f9fa !important;
    border-right: 1px solid #ddd !important;
}

[data-theme="light"] .sidebar a,
[data-theme="light"] .alphabet-nav a {
    color: #333 !important;
}

/* Light theme - General text */
[data-theme="light"] p,
[data-theme="light"] span,
[data-theme="light"] label,
[data-theme="light"] .description {
    color: #555 !important;
}

/* Light theme - User Management Modal */
[data-theme="light"] .user-modal {
    background-color: rgba(0, 0, 0, 0.5) !important;
}

[data-theme="light"] .user-container {
    background-color: #e8e8e8 !important;
}

[data-theme="light"] .user-header {
    background-color: #f8f9fa !important;
    border-bottom: 1px solid #ddd !important;
}

[data-theme="light"] .user-header h2 {
    color: #007bff !important;
}

[data-theme="light"] .user-form {
    background-color: #e8e8e8 !important;
}

[data-theme="light"] .user-form label {
    color: #333 !important;
}

[data-theme="light"] .user-form input,
[data-theme="light"] .user-form select {
    background-color: #e8e8e8 !important;
    border: 1px solid #ccc !important;
    color: #333 !important;
}

[data-theme="light"] .close-user {
    color: #666 !important;
}

[data-theme="light"] .close-user:hover {
    color: #333 !important;
}

/* Light theme - Touch Plan tiles */
[data-theme="light"] .touch-point-card,
[data-theme="light"] .category-card {
    background-color: #e8e8e8 !important;
    border: 1px solid #ddd !important;
}

[data-theme="light"] .touch-point-card h4,
[data-theme="light"] .touch-point-card p,
[data-theme="light"] .category-card h3,
[data-theme="light"] .category-card p {
    color: #333 !important;
}

/* Light theme - Form inputs globally */
[data-theme="light"] input,
[data-theme="light"] select,
[data-theme="light"] textarea {
    background-color: #e8e8e8 !important;
    border: 1px solid #ccc !important;
    color: #333 !important;
}

/* Light theme - Buttons (keep primary colors) */
[data-theme="light"] .btn-primary,
[data-theme="light"] button[type="submit"] {
    background-color: #007bff !important;
    color: #e8e8e8 !important;
}

/* Light theme - Loading overlay */
[data-theme="light"] .loading-overlay {
    background-color: rgba(232, 232, 232, 0.95) !important;
}

[data-theme="light"] .loading-content {
    background: #e0e0e0 !important;
    color: #333 !important;
}

[data-theme="light"] .loading-content h3,
[data-theme="light"] .loading-content p {
    color: #333 !important;
}

[data-theme="light"] .loading-spinner {
    border-color: #ccc !important;
    border-top-color: #007bff !important;
}

/* Light theme - Advocate page specific */
[data-theme="light"] .advocate-list,
[data-theme="light"] .advocate-item {
    background-color: #e8e8e8 !important;
    border: 1px solid #ddd !important;
}

[data-theme="light"] .advocate-name,
[data-theme="light"] .advocate-info {
    color: #333 !important;
}

/* Light theme - Learning Center cards */
[data-theme="light"] .resource-card,
[data-theme="light"] .manual-card {
    background-color: #e8e8e8 !important;
    border: 1px solid #ddd !important;
}

[data-theme="light"] .resource-card h3,
[data-theme="light"] .resource-card p,
[data-theme="light"] .manual-card h3,
[data-theme="light"] .manual-card p {
    color: #333 !important;
}

/* Light theme - Header sections */
[data-theme="light"] .header,
[data-theme="light"] .page-header {
    color: #333 !important;
}

/* Light theme - Stats and info boxes */
[data-theme="light"] .stats-container,
[data-theme="light"] .info-box {
    background-color: #e8e8e8 !important;
    border: 1px solid #ddd !important;
}

[data-theme="light"] .stat-value,
[data-theme="light"] .stat-label {
    color: #333 !important;
}

/* ============================================
   TOUCH PLAN PAGE - Light Theme
   ============================================ */
[data-theme="light"] .category-header {
    background: #e8e8e8 !important;
    border: 2px solid #ddd !important;
}

[data-theme="light"] .category-header:hover {
    background: #f8f9fa !important;
    border-color: #ccc !important;
}

[data-theme="light"] .category-header-title {
    color: #333 !important;
}

[data-theme="light"] .category-content {
    background-color: transparent !important;
}

[data-theme="light"] .series-badge {
    background-color: #e9ecef !important;
    color: #28a745 !important;
}

[data-theme="light"] tr.series-parent {
    background-color: #f8f9fa !important;
}

[data-theme="light"] tr.series-child {
    background-color: #e8e8e8 !important;
}

/* Touch Plan Tiles */
[data-theme="light"] .touch-plan-tile {
    background: #e8e8e8 !important;
    border: 2px solid #ddd !important;
}

[data-theme="light"] .touch-plan-tile.enabled {
    border-color: #4CAF50 !important;
    background: #f0fff0 !important;
}

[data-theme="light"] .touch-plan-tile-header {
    border-bottom: 1px solid #ddd !important;
}

[data-theme="light"] .touch-plan-tile-title h3 {
    color: #333 !important;
}

[data-theme="light"] .touch-plan-tile-title p {
    color: #666 !important;
}

[data-theme="light"] .touch-plan-tile-field label {
    color: #333 !important;
}

[data-theme="light"] .touch-plan-tile-field input,
[data-theme="light"] .touch-plan-tile-field select {
    background: #e8e8e8 !important;
    border: 1px solid #ccc !important;
    color: #333 !important;
}

/* Custom Touch Points section */
[data-theme="light"] .custom-touch-points-section {
    background: #e8e8e8 !important;
    border: 1px solid #ddd !important;
}

[data-theme="light"] .custom-touch-points-section h3,
[data-theme="light"] .custom-touch-points-section p {
    color: #333 !important;
}

/* ============================================
   LEARNING CENTER PAGE - Light Theme
   ============================================ */
[data-theme="light"] .upload-modal {
    background-color: rgba(0, 0, 0, 0.5) !important;
}

[data-theme="light"] .upload-container {
    background-color: #e8e8e8 !important;
}

[data-theme="light"] .upload-header {
    background-color: #f8f9fa !important;
    border-bottom: 1px solid #ddd !important;
}

[data-theme="light"] .upload-header h2 {
    color: #333 !important;
}

[data-theme="light"] .upload-form {
    background-color: #e8e8e8 !important;
}

[data-theme="light"] .upload-form label {
    color: #333 !important;
}

[data-theme="light"] .upload-form input,
[data-theme="light"] .upload-form textarea {
    background-color: #e8e8e8 !important;
    border: 1px solid #ccc !important;
    color: #333 !important;
}

[data-theme="light"] .close-upload {
    color: #666 !important;
}

[data-theme="light"] .close-upload:hover {
    color: #333 !important;
}

[data-theme="light"] .video-modal {
    background-color: rgba(0, 0, 0, 0.8) !important;
}

[data-theme="light"] .video-container {
    background-color: #e8e8e8 !important;
}

[data-theme="light"] .video-header {
    background-color: #f8f9fa !important;
}

[data-theme="light"] .video-title,
[data-theme="light"] .video-description {
    color: #333 !important;
}

[data-theme="light"] .upload-tabs {
    background-color: #f8f9fa !important;
}

[data-theme="light"] .upload-tab {
    color: #333 !important;
}

[data-theme="light"] .upload-tab.active {
    background-color: #007bff !important;
    color: #e8e8e8 !important;
}

[data-theme="light"] .section-header {
    color: #007bff !important;
    border-bottom: 1px solid #ddd !important;
}

/* Learning center cards */
[data-theme="light"] .video-card,
[data-theme="light"] .manual-section {
    background-color: #e8e8e8 !important;
    border: 1px solid #ddd !important;
}

[data-theme="light"] .video-card h4,
[data-theme="light"] .video-card p {
    color: #333 !important;
}

/* ============================================
   ADVOCATES PAGE - Light Theme
   ============================================ */
/* Rolodex Sidebar */
[data-theme="light"] .rolodex-sidebar {
    background-color: transparent !important;
}

[data-theme="light"] .rolodex-tab {
    background: #e8e8e8 !important;
    border: 2px solid #ddd !important;
    border-left: none !important;
    color: #555 !important;
}

[data-theme="light"] .rolodex-tab::before {
    background: #ddd !important;
}

[data-theme="light"] .rolodex-tab:hover {
    background: #f0f0f0 !important;
    color: #333 !important;
}

[data-theme="light"] .rolodex-tab.active {
    background: #4CAF50 !important;
    color: #e8e8e8 !important;
    border-color: #4CAF50 !important;
}

[data-theme="light"] .rolodex-tab.has-advocates {
    color: #333 !important;
    font-weight: bold !important;
    background-color: #c0c0c0 !important;
    border-color: #999 !important;
}

/* Advocate Cards */
[data-theme="light"] .advocate-card {
    background-color: #e8e8e8 !important;
    border: 1px solid #ddd !important;
}

[data-theme="light"] .advocate-card:hover {
    border-color: #4CAF50 !important;
}

[data-theme="light"] .advocate-card-name {
    color: #333 !important;
}

[data-theme="light"] .advocate-card p,
[data-theme="light"] .advocate-card span,
[data-theme="light"] .advocate-info {
    color: #555 !important;
}

[data-theme="light"] .advocate-dates {
    color: #b8860b !important; /* Dark goldenrod - readable on light background */
}

[data-theme="light"] .advocate-tile,
[data-theme="light"] .advocate-list-item {
    background-color: #e8e8e8 !important;
    border: 1px solid #ddd !important;
}

[data-theme="light"] .advocate-tile h3,
[data-theme="light"] .advocate-tile p,
[data-theme="light"] .advocate-tile span,
[data-theme="light"] .advocate-list-item h3,
[data-theme="light"] .advocate-list-item p,
[data-theme="light"] .advocate-list-item span {
    color: #333 !important;
}

/* Advocate modals */
[data-theme="light"] .advocate-modal,
[data-theme="light"] #addAdvocateModal,
[data-theme="light"] #editAdvocateModal {
    background-color: rgba(0, 0, 0, 0.5) !important;
}

[data-theme="light"] .advocate-modal-content,
[data-theme="light"] .modal-content {
    background-color: #e8e8e8 !important;
}

[data-theme="light"] .advocate-modal-header,
[data-theme="light"] .modal-header {
    background-color: #f8f9fa !important;
    border-bottom: 1px solid #ddd !important;
}

[data-theme="light"] .advocate-modal-header h2,
[data-theme="light"] .modal-header h2 {
    color: #333 !important;
}

[data-theme="light"] .advocate-form label {
    color: #333 !important;
}

[data-theme="light"] .advocate-form input,
[data-theme="light"] .advocate-form select,
[data-theme="light"] .advocate-form textarea {
    background-color: #e8e8e8 !important;
    border: 1px solid #ccc !important;
    color: #333 !important;
}

/* Loading overlay for advocates */
[data-theme="light"] #loadingOverlay {
    background: rgba(232, 232, 232, 0.95) !important;
}

[data-theme="light"] #loadingOverlay h3,
[data-theme="light"] #loadingOverlay p {
    color: #333 !important;
}

[data-theme="light"] #loadingOverlay .loading-content {
    background: #e0e0e0 !important;
}

[data-theme="light"] #loadingOverlay .loading-spinner {
    border-color: #ccc !important;
    border-top-color: #007bff !important;
}

/* ============================================
   LEARNING CENTER - Upload Tile Light Theme
   ============================================ */
[data-theme="light"] .upload-tile {
    background-color: #e8e8e8 !important;
    border: 1px solid #ddd !important;
}

[data-theme="light"] .upload-tile h2 {
    color: #007bff !important;
}

[data-theme="light"] .upload-tile p,
[data-theme="light"] .upload-tile .course-description {
    color: #555 !important;
}

/* ============================================
   ADVOCATES PAGE - View Toggle Buttons Light Theme
   ============================================ */
[data-theme="light"] .view-toggle {
    background-color: #e9ecef !important;
}

[data-theme="light"] .view-toggle-btn {
    background: transparent !important;
    color: #555 !important;
}

[data-theme="light"] .view-toggle-btn:hover {
    background: #dee2e6 !important;
    color: #333 !important;
}

[data-theme="light"] .view-toggle-btn.active {
    background: #4CAF50 !important;
    color: white !important;
}

/* ============================================
   LOGIN & RESET PASSWORD PAGES - Light Theme
   ============================================ */
[data-theme="light"] .login-container,
[data-theme="light"] .reset-container {
    background-color: #d8d8d8 !important;
}

[data-theme="light"] .login-form,
[data-theme="light"] .reset-form {
    background-color: #e8e8e8 !important;
    border: 1px solid #ddd !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] .login-form h2,
[data-theme="light"] .reset-form h2,
[data-theme="light"] .form-header h2 {
    color: #333 !important;
}

[data-theme="light"] .login-form label,
[data-theme="light"] .reset-form label {
    color: #333 !important;
}

[data-theme="light"] .login-form input,
[data-theme="light"] .reset-form input {
    background-color: #e8e8e8 !important;
    border: 1px solid #ccc !important;
    color: #333 !important;
}

[data-theme="light"] .password-requirements {
    color: #666 !important;
}

/* ============================================
   ADMIN LINKS PAGE - Light Theme
   ============================================ */
[data-theme="light"] .admin-links {
    background-color: transparent !important;
}

[data-theme="light"] .admin-link {
    background-color: #e8e8e8 !important;
    border: 1px solid #ddd !important;
    color: #333 !important;
}

[data-theme="light"] .admin-link:hover {
    background-color: #f8f9fa !important;
}

/* ============================================
   FILE UPLOAD PAGE - Light Theme
   ============================================ */
[data-theme="light"] .content-svg {
    background-color: #e8e8e8 !important;
    border: 1px solid #ddd !important;
}

/* ============================================
   TASKS PAGE - Light Theme
   ============================================ */
[data-theme="light"] .view-toggle button {
    background-color: #e8e8e8 !important;
    border: 1px solid #ddd !important;
    color: #333 !important;
}

[data-theme="light"] .view-toggle button.active,
[data-theme="light"] .view-toggle button:hover {
    background-color: #007bff !important;
    color: #e8e8e8 !important;
}

[data-theme="light"] .task-item,
[data-theme="light"] .upcoming-item {
    background-color: #e8e8e8 !important;
    border: 1px solid #ddd !important;
    color: #333 !important;
}

[data-theme="light"] .task-item h4,
[data-theme="light"] .task-item p,
[data-theme="light"] .upcoming-item h4,
[data-theme="light"] .upcoming-item p {
    color: #333 !important;
}

[data-theme="light"] .empty-state {
    background-color: #e8e8e8 !important;
    border: 1px solid #ddd !important;
    color: #333 !important;
}

[data-theme="light"] .empty-state h3,
[data-theme="light"] .empty-state p {
    color: #555 !important;
}

[data-theme="light"] .bucket-btn {
    background-color: #e8e8e8 !important;
    border: 1px solid #ddd !important;
    color: #333 !important;
}

[data-theme="light"] .bucket-btn.active {
    background-color: #007bff !important;
    color: #e8e8e8 !important;
}

/* ============================================
   SHARED ELEMENTS - Light Theme
   ============================================ */
/* Close buttons */
[data-theme="light"] .close,
[data-theme="light"] .close-btn {
    color: #666 !important;
}

[data-theme="light"] .close:hover,
[data-theme="light"] .close-btn:hover {
    color: #333 !important;
}

/* Filter dropdowns */
[data-theme="light"] .filter-select,
[data-theme="light"] select {
    background-color: #e8e8e8 !important;
    border: 1px solid #ccc !important;
    color: #333 !important;
}

/* ============================================
   LIGHT THEME SWEEP (owner 2026-09-15): pages built after the theme was
   introduced kept dark cards under light-theme text - register, account
   settings / billing cards, Dialog Mastery, and the two standalone pages
   (billing, coming-soon) which now load this file directly.
   ============================================ */

/* Dialog Mastery is written against these variables; they were never defined,
   so it always fell back to its dark defaults. */
[data-theme="light"] {
    --card-bg: #e8e8e8;
    --border-color: #cfcfcf;
    --text-primary: #222;
    --text-secondary: #555;
    --input-bg: #f7f7f7;
}

/* Register page card (mirrors .login-form) */
[data-theme="light"] .register-container {
    background-color: #d8d8d8 !important;
}
[data-theme="light"] .register-form {
    background-color: #e8e8e8 !important;
    border: 1px solid #ddd !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
}
[data-theme="light"] .register-form h2,
[data-theme="light"] .register-form label {
    color: #333 !important;
}
[data-theme="light"] .register-form input {
    background-color: #f7f7f7 !important;
    border: 1px solid #ccc !important;
    color: #333 !important;
}
[data-theme="light"] .register-form .password-hint,
[data-theme="light"] .register-form .plan-blurb,
[data-theme="light"] .register-form .secure-note,
[data-theme="light"] .register-form .signin-prompt {
    color: #666 !important;
}

/* Account Settings + admin Billing cards (user-management.html) */
[data-theme="light"] .password-change-form {
    background-color: #e8e8e8 !important;
    border: 1px solid #ddd !important;
}
[data-theme="light"] .password-change-form h2,
[data-theme="light"] .password-change-form label,
[data-theme="light"] .password-change-form p {
    color: #333 !important;
}
[data-theme="light"] .password-change-form small,
[data-theme="light"] .password-change-form .user-info {
    color: #666 !important;
}
[data-theme="light"] .password-change-form input,
[data-theme="light"] .password-change-form select {
    background-color: #f7f7f7 !important;
    border: 1px solid #ccc !important;
    color: #333 !important;
}
[data-theme="light"] .password-change-form a.btn-primary,
[data-theme="light"] .password-change-form .btn-primary {
    color: #fff !important;
}

/* Pricing card tables, badges and selects (user-management.html, 2026-10-12) */
[data-theme="light"] .users-table th {
    background-color: #ddd !important;
    color: #333 !important;
}
[data-theme="light"] .users-table th,
[data-theme="light"] .users-table td {
    border-bottom-color: #ccc !important;
    color: #333 !important;
}
[data-theme="light"] .users-table tr:hover {
    background-color: #e0e0e0 !important;
}
[data-theme="light"] .user-group,
[data-theme="light"] .billing-mode,
[data-theme="light"] .billing-until,
[data-theme="light"] .pricing-edit-row input,
[data-theme="light"] .pricing-edit-row select {
    background-color: #f7f7f7 !important;
    border: 1px solid #ccc !important;
    color: #333 !important;
}
[data-theme="light"] .plan-default-badge {
    background: #e0efe0 !important;
    border-color: #4CAF50 !important;
    color: #2e6b2e !important;
}

/* Standalone pages: billing.html and coming-soon.html */
[data-theme="light"] .billing-container,
[data-theme="light"] .soon-container {
    background-color: #d8d8d8 !important;
}
[data-theme="light"] .billing-card,
[data-theme="light"] .soon-card {
    background-color: #e8e8e8 !important;
    border: 1px solid #ddd !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
}
[data-theme="light"] .billing-card h2,
[data-theme="light"] .soon-card h2 {
    color: #333 !important;
}
[data-theme="light"] .billing-card .status-detail,
[data-theme="light"] .soon-card .soon-text {
    color: #444 !important;
}
[data-theme="light"] .billing-card .plan-blurb,
[data-theme="light"] .billing-card .secure-note,
[data-theme="light"] .soon-card .soon-help {
    color: #666 !important;
}
[data-theme="light"] .billing-card .footer-links,
[data-theme="light"] .soon-card .footer-links {
    border-top-color: #ccc !important;
}
[data-theme="light"] .badge-ok {
    background-color: #d4edda !important;
    color: #155724 !important;
}
[data-theme="light"] .plan-price {
    color: #1b5e20 !important;
}
[data-theme="light"] .badge-warn,
[data-theme="light"] .soon-badge {
    background-color: #fff3cd !important;
    color: #7a5a00 !important;
}
[data-theme="light"] .config-notice,
[data-theme="light"] .plan-notice {
    background-color: #fff3cd !important;
    border-color: #e0c060 !important;
    color: #6b4f00 !important;
}

/* Dialog Mastery: things that are not driven by the variables */
[data-theme="light"] .script-line {
    background: rgba(0, 0, 0, 0.04) !important;
}
[data-theme="light"] .category-col .pill,
[data-theme="light"] .file-format code {
    background: rgba(0, 0, 0, 0.08) !important;
}
[data-theme="light"] .source-tab.active {
    background: rgba(76, 175, 80, 0.18) !important;
}
[data-theme="light"] .copy-btn:hover,
[data-theme="light"] .col-add:hover {
    color: #222 !important;
}
[data-theme="light"] .badge-mine { background: rgba(33, 150, 243, 0.18) !important; color: #0d47a1 !important; }
[data-theme="light"] .badge-broker,
[data-theme="light"] .read-only-note,
[data-theme="light"] .owned { background: rgba(255, 193, 7, 0.25) !important; color: #7a5a00 !important; }
[data-theme="light"] .buy-card {
    background: rgba(255, 193, 7, 0.14) !important;
    border-color: rgba(200, 150, 0, 0.5) !important;
}
[data-theme="light"] .dm-modal-backdrop {
    background: rgba(0, 0, 0, 0.45) !important;
}

/* Search inputs */
[data-theme="light"] .search-input,
[data-theme="light"] input[type="search"],
[data-theme="light"] input[type="text"] {
    background-color: #e8e8e8 !important;
    border: 1px solid #ccc !important;
    color: #333 !important;
}

/* Action buttons - keep colored */
[data-theme="light"] .btn-danger {
    background-color: #dc3545 !important;
    color: #e8e8e8 !important;
}

[data-theme="light"] .btn-success {
    background-color: #28a745 !important;
    color: #e8e8e8 !important;
}

[data-theme="light"] .btn-warning {
    background-color: #ffc107 !important;
    color: #212529 !important;
}

/* Quill editor for advocates */
[data-theme="light"] .ql-toolbar {
    background-color: #f8f9fa !important;
    border-color: #ddd !important;
}

[data-theme="light"] .ql-container {
    background-color: #e8e8e8 !important;
    border-color: #ddd !important;
}

[data-theme="light"] .ql-editor {
    color: #333 !important;
}

[data-theme="light"] .ql-toolbar button,
[data-theme="light"] .ql-toolbar .ql-picker {
    color: #333 !important;
}

/* ============================================
   ADVOCATES PAGE - Detail Text Light Theme
   ============================================ */
[data-theme="light"] .advocate-card-name {
    color: #333 !important;
    border-bottom-color: #ccc !important;
}

[data-theme="light"] .advocate-address,
[data-theme="light"] .advocate-location,
[data-theme="light"] .advocate-phone,
[data-theme="light"] .advocate-phone .phone-label {
    color: #333 !important;
}

[data-theme="light"] .advocate-location .map-link {
    color: #0066cc !important;
}

[data-theme="light"] .advocate-dates {
    color: #b8860b !important;
}

[data-theme="light"] .advocate-emails .email-badge {
    color: #333 !important;
    background-color: #d0d0d0 !important;
}

[data-theme="light"] .inline-notes-section {
    background-color: #ddd !important;
    border-color: #ccc !important;
}

[data-theme="light"] .inline-notes-label {
    color: #333 !important;
}

[data-theme="light"] .inline-notes-content,
[data-theme="light"] .inline-notes-display {
    color: #333 !important;
}

[data-theme="light"] .advocate-actions button {
    color: #333 !important;
}

[data-theme="light"] .advocate-card .advocate-card-name,
[data-theme="light"] .advocate-card .advocate-address,
[data-theme="light"] .advocate-card .advocate-location,
[data-theme="light"] .advocate-card .advocate-phone,
[data-theme="light"] .advocate-card .advocate-dates,
[data-theme="light"] .advocate-card .advocate-emails,
[data-theme="light"] .advocate-card .inline-notes-display {
    color: #333 !important;
}

/* ============================================
   TOUCH PLAN PAGE - Light Theme
   ============================================ */
[data-theme="light"] .touch-plan-tile {
    background: #e8e8e8 !important;
    border-color: #ccc !important;
}

[data-theme="light"] .touch-plan-tile.enabled {
    background: #e0efe0 !important;
    border-color: #4CAF50 !important;
}

[data-theme="light"] .touch-plan-tile-title h3 {
    color: #333 !important;
}

[data-theme="light"] .touch-plan-tile-title p {
    color: #555 !important;
}

[data-theme="light"] .touch-plan-tile-field label {
    color: #333 !important;
}

[data-theme="light"] .touch-plan-tile-field input,
[data-theme="light"] .touch-plan-tile-field select {
    background: #ddd !important;
    border-color: #bbb !important;
    color: #333 !important;
}

[data-theme="light"] .touch-plan-tile-header {
    border-bottom-color: #ccc !important;
}

[data-theme="light"] .category-header {
    background: #e0e0e0 !important;
    border-color: #bbb !important;
}

[data-theme="light"] .category-header-title {
    color: #333 !important;
}

[data-theme="light"] .holiday-checkboxes label {
    color: #333 !important;
}

[data-theme="light"] .days-of-week-grid label,
[data-theme="light"] .day-checkbox {
    color: #333 !important;
}

[data-theme="light"] .week-day-selector select {
    background: #ddd !important;
    border-color: #bbb !important;
    color: #333 !important;
}

[data-theme="light"] .date-range-section {
    border-top-color: #ccc !important;
}

/* Scrollbars for light theme */
[data-theme="light"] ::-webkit-scrollbar-track {
    background: #f1f1f1 !important;
}

[data-theme="light"] ::-webkit-scrollbar-thumb {
    background: #c1c1c1 !important;
}

[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
    background: #a1a1a1 !important;
}

/* ── RE TaskFlow brand wordmark (owner logo, 2026-08-29) ──────────────
   "RE" in the logo blue, "TASK FLOW" in navy - flipped to light tones on
   the dark theme so the wordmark reads on the dark nav. The tagline
   carries the logo's "PLAN. FOCUS. FLOW." line where the brand shows
   large. Colors mutated from the logo (#2E6FB0 / #1E2A3F) per owner:
   "Mutate the colors to fit the color style if needed". */
.wordmark-re {
    color: #5B9BDD;
    font-weight: 800;
    letter-spacing: 1px;
}

.wordmark-taskflow {
    color: #E8EEF7;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.brand-tagline-flow {
    font-size: 11px;
    letter-spacing: 3px;
    color: #8FA8C4;
    text-transform: uppercase;
}

[data-theme="light"] .wordmark-re {
    color: #2E6FB0 !important;
}

[data-theme="light"] .wordmark-taskflow {
    color: #1E2A3F !important;
}

[data-theme="light"] .brand-tagline-flow {
    color: #4A6584 !important;
}

/* Brand mark theme swap. The favicon follows the OS scheme, which is right
   for the browser tab but WRONG in-app: dark OS + light app painted a white
   house outline on the light nav (owner report, 2026-08-29). In-app the
   mark is two fixed-palette files toggled by the APP theme. */
.brand-mark-light {
    display: none !important;
}

[data-theme="light"] .brand-mark-dark {
    display: none !important;
}

[data-theme="light"] .brand-mark-light {
    display: inline-block !important;
}