:root { --blue: #4285f4; --border: #dadce0; --text: #202124; --muted: #5f6368; --bg: #ffffff; --sidebar-bg: #f8f9fa; --card-bg: #ffffff; --danger: #d93025; } /* Dark mode: theme.js sets data-theme on , resolving system preference at load so there's no separate prefers-color-scheme block to keep in sync — see public/js/theme.js. */ :root[data-theme="dark"] { --border: #3c4043; --text: #e8eaed; --muted: #9aa0a6; --bg: #202124; --sidebar-bg: #28292c; --card-bg: #2d2e31; /* FullCalendar's own theming hooks (see https://fullcalendar.io CSS custom properties) — without these it stays hardcoded to a light appearance regardless of our own variables above. */ --fc-border-color: var(--border); --fc-page-bg-color: var(--bg); --fc-neutral-bg-color: var(--sidebar-bg); --fc-list-event-hover-bg-color: var(--sidebar-bg); --fc-button-bg-color: var(--card-bg); --fc-button-border-color: var(--border); --fc-button-text-color: var(--text); --fc-button-hover-bg-color: var(--sidebar-bg); --fc-button-hover-border-color: var(--border); --fc-button-active-bg-color: var(--muted); --fc-button-active-border-color: var(--muted); --fc-more-link-bg-color: var(--sidebar-bg); --fc-more-link-text-color: var(--text); } * { box-sizing: border-box; } body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; color: var(--text); background: var(--bg); } /* !important because #login-view/#app-view below set `display` via an ID selector, which otherwise outranks this class+attribute rule regardless of source order. */ .view[hidden] { display: none !important; } /* Login */ #login-view { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--sidebar-bg); padding: 16px; } .login-card { background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 32px; width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 8px; } .login-card h1 { margin: 0 0 16px; font-size: 1.4rem; } .login-card input { padding: 10px; border: 1px solid var(--border); border-radius: 6px; font-size: 1rem; background: var(--card-bg); color: var(--text); } .login-card button { margin-top: 12px; padding: 10px; border: none; border-radius: 6px; background: var(--blue); color: white; font-size: 1rem; cursor: pointer; } .error { color: var(--danger); font-size: 0.9rem; } /* Shared round icon-button look (theme toggle, push toggle). Kept separate from .theme-toggle-button — that class is also theme.js's query selector for which buttons it wires up and rewrites text on, so anything sharing just the look but not the behavior (like the push toggle) must NOT have it, or clicking it would also silently toggle the theme. */ .icon-toggle-button { background: var(--card-bg); border: 1px solid var(--border); color: var(--text); border-radius: 999px; width: 36px; height: 36px; font-size: 1.05rem; line-height: 1; cursor: pointer; } #theme-toggle-login { position: absolute; top: 16px; right: 16px; } /* App shell */ #app-view { display: flex; flex-direction: column; height: 100vh; } .topbar { display: flex; align-items: center; gap: 12px; padding: 8px 16px; border-bottom: 1px solid var(--border); } .topbar h1 { font-size: 1.1rem; margin: 0; flex: 1; } .icon-button { background: none; border: none; font-size: 1.2rem; cursor: pointer; padding: 6px 10px; } #new-event-button { background: var(--blue); color: white; border: none; border-radius: 6px; padding: 8px 14px; cursor: pointer; font-size: 0.95rem; } .layout { display: flex; flex: 1; min-height: 0; } #sidebar { width: 240px; background: var(--sidebar-bg); border-right: 1px solid var(--border); padding: 16px; overflow-y: auto; } #sidebar h2 { font-size: 0.9rem; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; } #course-list { list-style: none; margin: 0 0 16px; padding: 0; } #course-list li { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 0.9rem; } .course-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } #course-form { display: flex; flex-direction: column; gap: 8px; } #course-form input[type="text"] { padding: 6px; border: 1px solid var(--border); border-radius: 4px; background: var(--card-bg); color: var(--text); } #course-form button { padding: 6px; border: 1px solid var(--border); border-radius: 4px; background: var(--card-bg); color: var(--text); cursor: pointer; } #main-content { flex: 1; display: flex; flex-direction: column; min-width: 0; } #calendar { flex: 1; padding: 12px; overflow: auto; } /* !important: FullCalendar sets its own display style directly on the element it's given, which otherwise beats the plain [hidden] UA rule — same class of bug as the earlier login/app-view [hidden] fix. */ #calendar[hidden], #today-view[hidden], #todo-view[hidden], #goals-view[hidden] { display: none !important; } /* Custom event rendering (see calendar.js's renderEventContent) — shows the end time on the right of the title, not just the start time on the left. */ .fc-event-custom { display: flex; align-items: baseline; gap: 4px; width: 100%; min-width: 0; padding: 1px 2px; } .fc-event-custom-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .fc-event-custom-time { flex-shrink: 0; font-variant-numeric: tabular-nums; } .fc-event-custom-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fc-event-custom-end { flex-shrink: 0; margin-left: auto; font-variant-numeric: tabular-nums; opacity: 0.8; font-size: 0.85em; } .fc-event-custom-stacked { flex-direction: column; align-items: flex-start; gap: 0; } .fc-event-custom-stacked .fc-event-custom-title { white-space: normal; } .fc-event-custom-stacked .fc-event-custom-end { margin-left: 0; opacity: 0.85; } /* A session "Plan my week" placed itself, as opposed to anything created by hand — dashed so it's obvious it'll be regenerated (moved/replaced) the next time the planner runs. */ .fc-event-auto-placed { border-style: dashed !important; } .view-tabs { display: flex; gap: 4px; padding: 10px 12px 0; } .view-tab { padding: 8px 14px; border: 1px solid var(--border); border-bottom: none; border-radius: 6px 6px 0 0; background: var(--sidebar-bg); color: var(--muted); cursor: pointer; font-size: 0.9rem; } .view-tab.active { background: var(--bg); color: var(--text); font-weight: 600; } #today-view { flex: 1; padding: 16px 20px; overflow: auto; } #today-date-heading { margin: 0 0 12px; font-size: 1.2rem; } #today-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } #today-list li { display: flex; align-items: center; gap: 12px; background: var(--sidebar-bg); border-radius: 8px; padding: 10px 14px; cursor: pointer; } .today-item-time { font-variant-numeric: tabular-nums; color: var(--muted); width: 3.2em; flex-shrink: 0; } .today-item-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } .today-item-dot-todo { width: 16px; height: 16px; background: var(--muted); color: var(--bg); display: flex; align-items: center; justify-content: center; font-size: 0.65rem; line-height: 1; } .today-item-body { display: flex; flex-direction: column; min-width: 0; flex: 1; } .today-item-title-row { display: flex; align-items: baseline; gap: 8px; } .today-item-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .today-item-end-time { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 0.85rem; flex-shrink: 0; margin-left: auto; } .today-item-location { font-size: 0.82rem; color: var(--muted); } /* To-do view */ #todo-view { flex: 1; padding: 16px 20px; overflow: auto; max-width: 640px; } .todo-group { background: var(--sidebar-bg); border-radius: 8px; padding: 12px 14px; margin-bottom: 16px; } .todo-group-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .todo-group-header h3 { margin: 0; flex: 1; font-size: 1rem; } .todo-group-header button { padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--card-bg); color: var(--danger); cursor: pointer; font-size: 0.82rem; white-space: nowrap; } #todo-ungrouped h3 { font-size: 0.9rem; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; } .todo-item-list { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 4px; } .todo-item { display: flex; align-items: center; gap: 8px; background: var(--card-bg); border-radius: 6px; padding: 6px 10px; } .todo-item.done .todo-item-title { text-decoration: line-through; color: var(--muted); } .todo-item-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .todo-item-delete { background: none; border: none; color: var(--danger); cursor: pointer; font-size: 0.9rem; } .todo-group-remind-at, .todo-item-remind-at { padding: 4px 6px; border: 1px solid var(--border); border-radius: 4px; background: var(--card-bg); color: var(--text); font-size: 0.8rem; } .todo-add-form { display: flex; gap: 8px; margin-top: 4px; } .todo-add-form input[type="text"] { flex: 1; min-width: 0; padding: 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--card-bg); color: var(--text); } .todo-add-form input[type="datetime-local"] { padding: 6px; border: 1px solid var(--border); border-radius: 6px; background: var(--card-bg); color: var(--text); font-size: 0.85rem; } .todo-add-form button { padding: 8px 14px; border: none; border-radius: 6px; background: var(--blue); color: white; cursor: pointer; white-space: nowrap; } #todo-group-form { margin-top: 8px; } /* Goals view */ #goals-view { flex: 1; padding: 16px 20px; overflow: auto; max-width: 640px; } #free-hours-summary { background: var(--sidebar-bg); border-radius: 8px; padding: 14px 16px; margin-bottom: 8px; font-size: 1.1rem; font-weight: 600; display: flex; align-items: center; gap: 12px; } #free-hours-summary span { flex: 1; } #plan-week-button { padding: 8px 14px; border: none; border-radius: 6px; background: var(--blue); color: white; font-size: 0.9rem; font-weight: 500; cursor: pointer; white-space: nowrap; } #plan-week-button:disabled { opacity: 0.6; cursor: default; } #plan-week-result { margin: 0 0 16px; } .goal-card { background: var(--sidebar-bg); border-left: 4px solid var(--goal-color, var(--blue)); border-radius: 8px; padding: 12px 14px; margin-bottom: 12px; } .goal-card-header { display: flex; align-items: center; gap: 8px; } .goal-card-header h3 { margin: 0; flex: 1; font-size: 1rem; } .goal-card-header button { padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--card-bg); color: var(--muted); cursor: pointer; font-size: 0.8rem; white-space: nowrap; } .goal-progress-text { margin: 8px 0 6px; font-size: 0.88rem; color: var(--muted); } .goal-progress-bar { height: 8px; border-radius: 999px; background: var(--card-bg); border: 1px solid var(--border); overflow: hidden; } .goal-progress-fill { height: 100%; background: var(--goal-color, var(--blue)); border-radius: 999px; } #goal-form { background: var(--card-bg); border: 1px solid var(--border); border-radius: 8px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; } #goal-form h3 { margin: 0 0 4px; font-size: 0.95rem; } #goal-form label { font-size: 0.85rem; color: var(--muted); margin-top: 4px; } #goal-form input, #goal-form select { padding: 8px; border: 1px solid var(--border); border-radius: 6px; font-size: 0.95rem; width: 100%; background: var(--sidebar-bg); color: var(--text); } #goal-form .field-row { display: flex; gap: 12px; } #goal-form .field-row > div { flex: 1; } #goal-form input[type="radio"] { width: auto; flex: 0 0 auto; } #goal-form button[type="submit"] { margin-top: 4px; padding: 8px 14px; border: none; border-radius: 6px; background: var(--blue); color: white; cursor: pointer; } /* Event modal */ dialog { border: none; border-radius: 12px; padding: 0; width: min(480px, 92vw); max-height: 90vh; background: var(--bg); color: var(--text); } dialog::backdrop { background: rgba(0, 0, 0, 0.4); } #event-form { display: flex; flex-direction: column; gap: 6px; padding: 20px; overflow-y: auto; max-height: 90vh; } #event-form h2 { margin: 0 0 8px; } #event-form label { font-size: 0.85rem; color: var(--muted); margin-top: 6px; } #event-form input, #event-form select, #event-form textarea { padding: 8px; border: 1px solid var(--border); border-radius: 6px; font-size: 0.95rem; width: 100%; background: var(--card-bg); color: var(--text); } .field-row { display: flex; gap: 12px; } .field-row > div { flex: 1; } .checkbox-label { display: flex; align-items: center; gap: 6px; font-size: 0.9rem; color: var(--text); } /* #event-form input[type=...] beats #event-form input (both ID-rooted, but the type attribute adds specificity) so this reliably wins regardless of source order — same class-vs-ID trap as the view[hidden] rule above. */ #event-form input[type="checkbox"], #event-form input[type="radio"] { width: auto; flex: 0 0 auto; } #settings-form { display: flex; flex-direction: column; gap: 6px; padding: 20px; overflow-y: auto; max-height: 90vh; } #settings-form h2 { margin: 0 0 4px; } #settings-form label { font-size: 0.85rem; color: var(--muted); margin-top: 6px; } #settings-form input { padding: 8px; border: 1px solid var(--border); border-radius: 6px; font-size: 0.95rem; width: 100%; background: var(--card-bg); color: var(--text); } #apply-to-row { background: var(--sidebar-bg); border-radius: 6px; padding: 8px 10px; margin: 4px 0; } #apply-to-row .checkbox-label { margin: 2px 0; } .help-text { font-size: 0.78rem; color: var(--muted); margin: 2px 0 6px; } #event-documents-section { margin-top: 8px; border-top: 1px solid var(--border); padding-top: 10px; } #event-documents-section h3 { font-size: 0.85rem; color: var(--muted); margin: 0 0 6px; } #event-document-list { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 4px; } #event-document-list li { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; background: var(--sidebar-bg); border-radius: 6px; padding: 6px 8px; } #event-document-list a { flex: 1; color: var(--blue); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #event-document-list button { background: none; border: none; color: var(--danger); cursor: pointer; font-size: 0.85rem; } #event-documents-section .field-row { align-items: center; } #add-document-button { white-space: nowrap; border: 1px solid var(--border); background: var(--card-bg); color: var(--text); border-radius: 6px; cursor: pointer; padding: 8px 10px; } .study-helper-button { background: none; border: none; cursor: pointer; font-size: 0.95rem; padding: 0 2px; } /* AI study helper modal */ .summary-modal-body { display: flex; flex-direction: column; gap: 8px; padding: 20px; overflow-y: auto; max-height: 90vh; } .summary-modal-body h2 { margin: 0 0 4px; } .summary-modal-body h3 { font-size: 0.9rem; color: var(--muted); margin: 12px 0 4px; } .summary-modal-body p { margin: 0; line-height: 1.5; } .summary-modal-body textarea { width: 100%; padding: 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--card-bg); color: var(--text); font-size: 0.9rem; margin: 8px 0; } .summary-modal-body > div > button { padding: 8px 14px; border-radius: 6px; border: 1px solid var(--border); background: var(--card-bg); color: var(--text); cursor: pointer; margin-top: 8px; } #summarize-button, #summarize-pasted-button { background: var(--blue); color: white; border: none; } .summary-modal-body .field-row { align-items: center; margin-top: 8px; } .summary-modal-body .field-row button { padding: 8px 14px; border-radius: 6px; border: 1px solid var(--border); background: var(--card-bg); color: var(--text); cursor: pointer; white-space: nowrap; } #summary-topics { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .topic-row { background: var(--sidebar-bg); border-radius: 6px; padding: 8px 10px; } .topic-row .topic-label { display: block; font-weight: 600; margin-bottom: 4px; } .topic-row button { background: none; border: none; color: var(--blue); cursor: pointer; font-size: 0.85rem; padding: 0; } .topic-row button:disabled { opacity: 0.6; cursor: default; } .topic-guidance { margin-top: 6px; white-space: pre-line; } .modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; } .modal-actions button { padding: 8px 14px; border-radius: 6px; border: 1px solid var(--border); background: var(--card-bg); color: var(--text); cursor: pointer; } .modal-actions button[type="submit"] { background: var(--blue); color: white; border: none; } .modal-actions .danger { color: var(--danger); border-color: var(--danger); margin-right: auto; } /* Mobile */ @media (max-width: 720px) { #sidebar { position: fixed; inset: 56px 0 0 0; z-index: 5; width: auto; transform: translateX(-100%); transition: transform 0.2s ease; } #sidebar.open { transform: translateX(0); } .topbar h1 { font-size: 1rem; } #new-event-button { padding: 8px 10px; font-size: 0.85rem; } }