/* Shared dark theme for all secondary pages (calendar, projects, team, notes, workflow, task details, auth). Home page keeps its own dark styles in home-updates.css. Activated by data-theme="dark" on . */ :root[data-theme="dark"] { color-scheme: dark; --ink: #eef6f4; --muted: #a7bab4; --paper: #182421; --surface: #101916; --line: #2c403a; --accent: #35c7b8; --accent-dark: #80efe2; --danger: #ff8a80; --shadow: 0 24px 70px rgba(0, 0, 0, .5); } :root[data-theme="dark"] body { background: radial-gradient(circle at 12% 8%, rgba(53, 199, 184, .16), transparent 30%), radial-gradient(circle at 88% 0, rgba(128, 105, 255, .14), transparent 26%), linear-gradient(135deg, #07110f, #0d1720 60%, #141021); color: var(--ink); } /* ---- Panel shell ---- */ :root[data-theme="dark"] .task-panel { background: rgba(16, 25, 22, .86); border-color: rgba(255, 255, 255, .08); box-shadow: 0 24px 70px rgba(0, 0, 0, .5); } /* ---- Navigation + toggles ---- */ :root[data-theme="dark"] .page-nav-link { color: var(--muted); background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .1); } :root[data-theme="dark"] .page-nav-link:hover, :root[data-theme="dark"] .page-nav-link.active { color: #07130f; background: var(--accent); border-color: var(--accent); } :root[data-theme="dark"] .page-nav.mobile-nav-ready { background: rgba(16, 25, 22, .9); border-color: rgba(255, 255, 255, .08); box-shadow: 0 12px 30px rgba(0, 0, 0, .4); } .theme-toggle { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; font-size: 1.05rem; line-height: 1; } /* ---- Form controls ---- */ :root[data-theme="dark"] input:not([type=color]):not([type=file]):not([type=checkbox]):not([type=radio]):not([type=range]), :root[data-theme="dark"] textarea, :root[data-theme="dark"] select, :root[data-theme="dark"] .add-project-row input, :root[data-theme="dark"] .auth-field input { color: var(--ink); background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .12); } :root[data-theme="dark"] input::placeholder, :root[data-theme="dark"] textarea::placeholder { color: color-mix(in srgb, var(--muted) 78%, transparent); } :root[data-theme="dark"] input:not([type=color]):not([type=file]):focus, :root[data-theme="dark"] textarea:focus, :root[data-theme="dark"] select:focus, :root[data-theme="dark"] .add-project-row input:focus-visible, :root[data-theme="dark"] .auth-field input:focus-visible { background: rgba(255, 255, 255, .09); border-color: var(--accent); box-shadow: 0 0 0 4px rgba(53, 199, 184, .18); } /* ---- Buttons ---- */ :root[data-theme="dark"] .ghost-button, :root[data-theme="dark"] .filter-button { color: var(--muted); background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); } :root[data-theme="dark"] .ghost-button:hover, :root[data-theme="dark"] .filter-button:hover, :root[data-theme="dark"] .filter-button.active { color: #07130f; background: var(--accent); border-color: var(--accent); } /* ---- Empty states ---- */ :root[data-theme="dark"] .empty-state, :root[data-theme="dark"] .empty-detail, :root[data-theme="dark"] .empty-workflow, :root[data-theme="dark"] .team-empty-card { color: var(--muted); background: rgba(255, 255, 255, .03); border-color: rgba(255, 255, 255, .1); } /* ---- Calendar ---- */ :root[data-theme="dark"] .calendar-day { color: var(--ink); background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .09); } :root[data-theme="dark"] .calendar-day.has-events { background: rgba(53, 199, 184, .14); border-color: rgba(53, 199, 184, .35); } :root[data-theme="dark"] .calendar-day.selected { color: #07130f; background: var(--accent); border-color: var(--accent); } :root[data-theme="dark"] .calendar-day.selected .calendar-event-marker { color: var(--accent-dark); background: #07130f; } :root[data-theme="dark"] .calendar-day.today { outline-color: rgba(53, 199, 184, .45); } /* ---- Projects ---- */ :root[data-theme="dark"] .projects-hero { border-color: rgba(255, 255, 255, .08); background: radial-gradient(circle at top right, rgba(53, 199, 184, .18), transparent 34%), linear-gradient(135deg, #142320 0%, #12211d 58%, #1a1a26 100%); } :root[data-theme="dark"] .pmp-process-list li, :root[data-theme="dark"] .workflow-smart-card { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .09); } :root[data-theme="dark"] .pmp-process-list strong { color: var(--ink); } :root[data-theme="dark"] .pmp-process-section { border-color: rgba(255, 255, 255, .08); background: linear-gradient(135deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .02)), repeating-linear-gradient(135deg, rgba(53, 199, 184, .08) 0 1px, transparent 1px 16px); } :root[data-theme="dark"] .launchpad-create-card { border-color: rgba(255, 255, 255, .09); background: radial-gradient(circle at 90% 10%, rgba(240, 166, 77, .16), transparent 30%), linear-gradient(145deg, rgba(53, 199, 184, .08), rgba(255, 255, 255, .02)); } :root[data-theme="dark"] .project-task-board { border-color: rgba(255, 255, 255, .08); background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .02)); } :root[data-theme="dark"] .project-summary-chip, :root[data-theme="dark"] .project-metrics span { color: var(--accent-dark); background: rgba(53, 199, 184, .14); } :root[data-theme="dark"] .project-progress-track { background: rgba(255, 255, 255, .08); } :root[data-theme="dark"] .project-next-action { color: #f3d9b6; background: rgba(240, 166, 77, .12); border-color: rgba(240, 166, 77, .28); } :root[data-theme="dark"] .project-team-box { border-color: rgba(255, 255, 255, .09); background: linear-gradient(135deg, rgba(53, 199, 184, .1), rgba(240, 166, 77, .08)); } :root[data-theme="dark"] .project-card h2 { color: var(--ink); } :root[data-theme="dark"] .project-card p { color: var(--muted); } /* ---- Task details ---- */ :root[data-theme="dark"] .details-card { border-color: rgba(255, 255, 255, .08); background: linear-gradient(145deg, #16231f, #101a17); box-shadow: 0 24px 44px rgba(0, 0, 0, .45), 0 7px 0 rgba(0, 0, 0, .2); } :root[data-theme="dark"] .detail-chip { background: rgba(255, 255, 255, .05); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); } /* ---- Workflow ---- */ :root[data-theme="dark"] .workflow-lane { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .09); } :root[data-theme="dark"] .workflow-card { border-color: rgba(255, 255, 255, .09); } :root[data-theme="dark"] .workflow-chip { color: var(--accent-dark); background: rgba(53, 199, 184, .14); } :root[data-theme="dark"] .workflow-chip.warn { color: #f3c489; background: rgba(240, 166, 77, .16); } :root[data-theme="dark"] .workflow-chip.done { color: var(--muted); background: rgba(255, 255, 255, .07); } /* ---- Team ---- */ :root[data-theme="dark"] .team-panel { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .09); } :root[data-theme="dark"] .team-card-drawer summary { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .09); } :root[data-theme="dark"] .team-card-drawer[open] .team-drawer-action, :root[data-theme="dark"] .team-item { color: var(--accent-dark); background: rgba(53, 199, 184, .16); } :root[data-theme="dark"] .team-delete-button { color: var(--danger); background: rgba(255, 138, 128, .14); } /* ---- Auth ---- */ :root[data-theme="dark"] .auth-user { color: var(--accent-dark); background: rgba(53, 199, 184, .16); } :root[data-theme="dark"] .auth-note { color: var(--muted); background: rgba(53, 199, 184, .1); }