/* ========================================================================= AlphaLif — Agenda de la classe 2-A Visual idea: a squared-paper school planner. Blue ruled grid, ink text, subject tabs in coloured pen, and today circled in red like a corrected copybook. The red ring on today's date is the one loud thing on the page. ========================================================================= */ :root { --paper: #f6f6f2; --paper-card: #fbfbf8; --grid: #d9e0ec; --grid-bold: #c3cdde; --ink: #17233b; --ink-soft: #5b6a83; --red-pen: #d33f2f; --blue-pen: #2f5bd3; --green-pen: #1f9d6b; --radius: 4px; --shadow-card: 0 1px 2px rgba(23,35,59,0.08), 0 8px 24px rgba(23,35,59,0.10); --shadow-hard: 5px 5px 0 rgba(23,35,59,0.14); --c-francais: #e0a800; --c-mathematiques: #1f9d6b; --c-anglais: #2f6fd3; --c-allemand: #c94f8a; --c-physique: #d9701f; --c-histoire: #7c5cd6; --c-geographie: #148f83; --c-default: #5b6a83; --font-display: "Space Grotesk", system-ui, sans-serif; --font-body: "Inter", system-ui, sans-serif; --font-mono: "Space Mono", ui-monospace, monospace; } /* System default, unless the reader has picked a theme explicitly (data-theme on , set by the toggle button and remembered). */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --paper: #141821; --paper-card: #1b202b; --grid: #262d3b; --grid-bold: #333c4e; --ink: #e7e9ee; --ink-soft: #97a2b6; --red-pen: #f2664f; --blue-pen: #7d9bff; --green-pen: #3fb587; --shadow-card: 0 1px 2px rgba(0,0,0,0.4), 0 10px 30px rgba(0,0,0,0.45); --shadow-hard: 5px 5px 0 rgba(0,0,0,0.35); } } :root[data-theme="dark"] { --paper: #141821; --paper-card: #1b202b; --grid: #262d3b; --grid-bold: #333c4e; --ink: #e7e9ee; --ink-soft: #97a2b6; --red-pen: #f2664f; --blue-pen: #7d9bff; --green-pen: #3fb587; --shadow-card: 0 1px 2px rgba(0,0,0,0.4), 0 10px 30px rgba(0,0,0,0.45); --shadow-hard: 5px 5px 0 rgba(0,0,0,0.35); } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; -webkit-text-size-adjust: 100%; } /* squared paper: a fine dot grid plus a wider, bolder cross every few squares — like real quadrille paper, not a flat page. */ body { font-family: var(--font-body); color: var(--ink); line-height: 1.55; min-height: 100vh; background-color: var(--paper); background-image: linear-gradient(var(--grid-bold) 1px, transparent 1px), linear-gradient(90deg, var(--grid-bold) 1px, transparent 1px), radial-gradient(var(--grid) 1px, transparent 1px); background-size: 140px 140px, 140px 140px, 28px 28px; background-position: -1px -1px, -1px -1px, 0 0; transition: background-color 0.2s ease; } #app { max-width: 1160px; margin: 0 auto; padding: 0 20px; display: flex; flex-direction: column; min-height: 100vh; } @media (prefers-reduced-motion: no-preference) { /* opacity only, on purpose: a lingering `transform` here (even the identity from animation-fill-mode) makes #app a containing block for position:fixed, which threw every modal off-centre. */ #app:not(.hidden) { animation: appIn 0.35s ease both; } @keyframes appIn { from { opacity: 0; } to { opacity: 1; } } /* login screen fades up out of the way while the app fades in under it (only on an actual sign-in — see enterApp) */ .login-screen.is-leaving { animation: loginOut 0.3s ease forwards; } @keyframes loginOut { to { opacity: 0; transform: translateY(-10px); } } } /* ---------- Header : the ruled top of the page ---------- */ .app-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; padding: 22px 0 14px; border-bottom: 2px solid var(--ink); } .header-left { display: flex; flex-direction: column; gap: 2px; } .header-left h1 { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); } /* Subtitle / visit counter / offline badge share one row and separate themselves with a generated dot — instead of a literal dot span between each, so whichever ones are actually visible (the last two toggle via .hidden) never leave an orphaned separator behind. */ .header-meta { display: flex; align-items: center; flex-wrap: wrap; row-gap: 2px; } .header-subtitle, #visit-counter-wrap { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); } .header-meta > *:not(:first-child)::before { content: "·"; opacity: 0.5; margin: 0 6px; } .header-right { display: flex; align-items: center; gap: 8px; padding-bottom: 3px; } /* Search field, styled to sit next to the round icon buttons: same border treatment, just a pill instead of a circle. */ .header-search { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border: 1px solid var(--ink-soft); border-radius: 15px; color: var(--ink-soft); transition: border-color 0.14s ease, color 0.14s ease; } .header-search:focus-within { border-color: var(--ink); color: var(--ink); } .header-search svg { flex: none; } .header-search-input { width: 128px; border: 0; padding: 0; -webkit-appearance: none; appearance: none; background: transparent; color: var(--ink); font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; } .header-search-input:focus { outline: none; } .header-search-input::placeholder { color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.66rem; } /* Kill the native clear button on the type=search so the field keeps the printed-form look in every browser. */ .header-search-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; } .search-empty { margin-top: 14px; padding: 26px 14px; border: 1px dashed var(--grid-bold); border-radius: var(--radius); color: var(--ink-soft); font-family: var(--font-mono); font-size: 0.75rem; text-align: center; } /* ---------- Buttons : little printed labels ---------- */ .btn { cursor: pointer; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; border-radius: var(--radius); border: 1px solid var(--ink); background: transparent; color: var(--ink); transition: background 0.14s ease, color 0.14s ease, transform 0.14s ease; } .btn-sm { padding: 7px 13px; } .btn-outline { border-color: var(--ink-soft); color: var(--ink-soft); } .btn-outline:hover { background: var(--ink); color: var(--paper-card); border-color: var(--ink); } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--ink); color: var(--paper-card); border-color: var(--ink); } .btn-primary:hover { background: var(--blue-pen); border-color: var(--blue-pen); color: #fff; } :focus-visible { outline: 2px solid var(--blue-pen); outline-offset: 2px; } /* ---------- Loading / error ---------- */ .loader { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 72px 20px; } /* Three dots taking turns hopping — cheap (three CSS transforms, no layout thrash) and fits the "pen on paper" theme better than a spinner. */ .pen-loader { display: flex; align-items: flex-end; gap: 7px; height: 20px; } .pen-loader span { width: 8px; height: 8px; border-radius: 50%; background: var(--red-pen); } @media (prefers-reduced-motion: no-preference) { .pen-loader span { animation: penHop 0.9s ease-in-out infinite; } .pen-loader span:nth-child(1) { animation-delay: -0.3s; } .pen-loader span:nth-child(2) { animation-delay: -0.15s; } .pen-loader span:nth-child(3) { animation-delay: 0s; } } @keyframes penHop { 0%, 80%, 100% { transform: translateY(0); opacity: 0.55; } 40% { transform: translateY(-10px); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .pen-loader span { opacity: 0.85; } .pen-loader span:nth-child(2) { opacity: 1; } } .loader p { color: var(--ink-soft); font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.06em; } .offline-badge { display: inline-flex; align-items: center; gap: 6px; color: var(--red-pen); font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; } .offline-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--red-pen); flex-shrink: 0; } @media (prefers-reduced-motion: no-preference) { /* sync just dropped — the badge slips down out of the header row so the state change actually registers */ .offline-badge:not(.hidden) { animation: badgeDrop 0.32s cubic-bezier(0.2, 0.9, 0.3, 1) both; } .offline-badge::before { animation: softPulse 1.6s ease-in-out infinite; } #visit-counter-wrap:not(.hidden) { animation: fadeIn 0.2s ease both; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes badgeDrop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } @keyframes softPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } } .error-banner { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; margin: 20px 0; padding: 14px 18px; background: var(--paper-card); border: 1px solid var(--red-pen); border-left-width: 4px; border-radius: var(--radius); color: var(--red-pen); font-size: 0.88rem; } .error-icon { flex-shrink: 0; } #error-text { flex: 1; text-align: left; min-width: 160px; } @media (prefers-reduced-motion: no-preference) { .error-banner:not(.hidden) { animation: riseIn 0.25s ease both; } } .hidden { display: none !important; } /* ---------- Calendar : the squared page ---------- */ #calendar { flex: 1; padding: 20px 0 8px; min-height: 400px; } @media (prefers-reduced-motion: no-preference) { #calendar:not(.hidden) { animation: riseIn 0.4s ease both; } @keyframes riseIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } } .fc { --fc-event-text-color: var(--ink); background-color: var(--paper-card) !important; background-image: radial-gradient(var(--grid) 1px, transparent 1px) !important; background-size: 28px 28px !important; border: 1px solid var(--grid-bold); border-radius: var(--radius); padding: 14px 14px 4px; font-family: var(--font-body); font-size: 0.82rem; } .fc .fc-toolbar { gap: 10px; flex-wrap: wrap; } .fc .fc-toolbar.fc-header-toolbar { margin-bottom: 14px; } .fc .fc-toolbar-title { font-family: var(--font-display) !important; font-size: 1.2rem !important; font-weight: 600 !important; text-transform: capitalize; color: var(--ink) !important; } .fc .fc-button { display: inline-flex !important; align-items: center !important; justify-content: center !important; font-family: var(--font-mono) !important; font-size: 0.68rem !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; background: transparent !important; border: 1px solid var(--ink-soft) !important; color: var(--ink-soft) !important; padding: 5px 11px !important; border-radius: var(--radius) !important; box-shadow: none !important; line-height: 1 !important; transition: background 0.14s ease, color 0.14s ease; } .fc .fc-button:hover { background: var(--ink) !important; color: var(--paper-card) !important; border-color: var(--ink) !important; } .fc .fc-today-button:hover:not(:disabled) { background: var(--red-pen) !important; border-color: var(--red-pen) !important; color: #fff !important; } /* prev/next: real (centred) Iconsax chevrons, injected as SVG in script.js instead of FullCalendar's own icon font — that's what was off-centre. */ .fc .fc-prevCustom-button, .fc .fc-nextCustom-button { width: 30px; height: 30px; padding: 0 !important; border-radius: 50% !important; } .fc .fc-prevCustom-button svg, .fc .fc-nextCustom-button svg { display: block; } .fc .fc-button-primary:not(:disabled).fc-button-active, .fc .fc-button-primary:not(:disabled):active { background: var(--ink) !important; color: var(--paper-card) !important; border-color: var(--ink) !important; } .fc .fc-button-primary:disabled { opacity: 0.35 !important; } .fc .fc-button:focus-visible { outline: 2px solid var(--blue-pen) !important; outline-offset: 2px; } /* Mois / Semaine — a proper segmented control in the site's ink-on-paper style, replacing FullCalendar's default joined grey pill. One ink box, the two halves split by a hairline, the active half filled solid ink (same treatment as the header wordmark). */ .fc .fc-button-group { border: 1px solid var(--ink); border-radius: var(--radius); overflow: hidden; box-shadow: 2px 2px 0 rgba(23, 35, 59, 0.12); } :root[data-theme="dark"] .fc .fc-button-group { box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.35); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .fc .fc-button-group { box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.35); } } .fc .fc-button-group .fc-button { border: 0 !important; border-radius: 0 !important; padding: 6px 15px !important; background: var(--paper-card) !important; color: var(--ink-soft) !important; } .fc .fc-button-group .fc-button + .fc-button { border-left: 1px solid var(--ink) !important; } .fc .fc-button-group .fc-button:hover:not(.fc-button-active) { background: var(--grid) !important; color: var(--ink) !important; } .fc .fc-button-group .fc-button-primary:not(:disabled).fc-button-active { background: var(--ink) !important; color: var(--paper-card) !important; } .fc .fc-button-group .fc-button:focus-visible { outline-offset: -2px; } .fc .fc-scrollgrid, .fc .fc-scrollgrid-section > * , .fc .fc-daygrid-day, .fc td, .fc th { border-color: var(--grid-bold) !important; } .fc .fc-scrollgrid { border-width: 1px 0 0 1px !important; } .fc .fc-col-header-cell { background: transparent !important; } /* On narrow screens FullCalendar makes the day-name row sticky and paints it with its page colour — white by default, which glared in dark mode. */ .fc { --fc-page-bg-color: var(--paper-card); } .fc .fc-col-header-cell-cushion { color: var(--ink-soft) !important; font-family: var(--font-mono) !important; font-size: 0.66rem !important; font-weight: 400 !important; letter-spacing: 0.14em; text-transform: uppercase; padding: 8px 0 !important; } /* Weekend column: Saturday's column stands in for the whole weekend (Sunday is hidden in JS and its rare homework folded onto Saturday). Kept narrow so Mon–Fri stretch into the freed space — the daygrid tables are table-layout:fixed, so a width on the .fc-day-sat cells sizes the column and the rest share what's left. */ .fc .fc-col-header-cell.fc-day-sat, .fc .fc-daygrid-day.fc-day-sat { width: 7% !important; } .fc .fc-day-sat .fc-col-header-cell-cushion { font-size: 0.6rem !important; letter-spacing: 0.02em; text-transform: none; padding-left: 3px !important; padding-right: 3px !important; white-space: nowrap; } .fc .fc-daygrid-day.fc-day-sat .fc-daygrid-day-number { font-size: 0.68rem; opacity: 0.55; } .fc .fc-daygrid-day-frame { min-height: 92px !important; padding: 2px; position: relative; } /* Subjects hidden via the legend collapse into this instead of a grayed-out card taking up space — a quiet corner note, not competing with the real devoirs. Title attribute carries which subject(s) and how many. */ .day-hidden-badge { position: absolute; top: 4px; left: 6px; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.02em; color: var(--ink-soft); opacity: 0.55; cursor: default; } @media (prefers-reduced-motion: no-preference) { .day-hidden-badge { animation: dayBadgeIn 0.2s ease both; } @keyframes dayBadgeIn { from { opacity: 0; } to { opacity: 0.55; } } } .fc .fc-daygrid-day-number { color: var(--ink-soft) !important; font-family: var(--font-mono) !important; font-size: 0.74rem !important; padding: 4px 6px !important; } .fc .fc-day-other .fc-daygrid-day-top { opacity: 0.3; } .fc .fc-daygrid-day.fc-day-today { background: transparent !important; } /* today, circled in red pen */ .fc .fc-day-today .fc-daygrid-day-number { color: var(--red-pen) !important; font-family: var(--font-display) !important; font-weight: 700 !important; position: relative; } .fc .fc-day-today .fc-daygrid-day-number::after { content: ""; position: absolute; inset: -3px -7px; border: 2px solid var(--red-pen); border-radius: 62% 38% 56% 44% / 52% 56% 44% 48%; transform: rotate(-4deg); pointer-events: none; } @media (prefers-reduced-motion: no-preference) { /* The ring is drawn in with a pen-flourish only the first time today's cell appears in a session (script.js adds .ring-draw once) — not on every silent refresh, which used to re-pop it every minute. */ .fc .fc-day-today .fc-daygrid-day-number.ring-draw::after { animation: ringDraw 0.62s cubic-bezier(0.32, 1.45, 0.5, 1) both; } @keyframes ringDraw { 0% { opacity: 0; transform: rotate(-26deg) scale(0.35); } 55% { opacity: 1; transform: rotate(3deg) scale(1.1); } 78% { transform: rotate(-7deg) scale(0.97); } 100% { opacity: 1; transform: rotate(-4deg) scale(1); } } /* clicking "today" while it's already showing: nudge the ring so it's clear the click landed, instead of doing nothing visible */ .fc .fc-day-today .fc-daygrid-day-number.shake { animation: todayShake 0.4s ease; } @keyframes todayShake { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 20% { transform: translate(-3px, 0) rotate(-7deg); } 40% { transform: translate(3px, 0) rotate(7deg); } 60% { transform: translate(-2px, 0) rotate(-4deg); } 80% { transform: translate(2px, 0) rotate(4deg); } } } @media (prefers-reduced-motion: reduce) { /* no transform, but still a clear pulse of the ring colour */ .fc .fc-day-today .fc-daygrid-day-number.shake::after { animation: todayFlash 0.4s ease; } @keyframes todayFlash { 0%, 100% { border-color: var(--red-pen); } 50% { border-color: var(--ink); } } } /* events : subject tabs in coloured pen */ .fc .fc-daygrid-event { border: none !important; border-left: 3px solid var(--evt, var(--ink)) !important; border-radius: 0 !important; background: color-mix(in srgb, var(--evt, var(--ink)) 15%, transparent) !important; color: var(--ink) !important; padding: 2px 5px !important; margin: 1px 2px 2px !important; font-size: 0.7rem !important; position: relative; transition: background 0.12s ease; } .fc .fc-daygrid-event:hover { background: color-mix(in srgb, var(--evt, var(--ink)) 28%, transparent) !important; } /* Shared "this card is interactive" motion — same language as the announcement pop-up. Month view only; week-view cards are big and sometimes height-clamped, a lift there just fights the layout. */ @media (prefers-reduced-motion: no-preference) { #calendar:not(.is-week-view) .fc .fc-daygrid-event { transition: background 0.12s ease, transform 0.12s ease, filter 0.12s ease; } #calendar:not(.is-week-view) .fc .fc-daygrid-event:hover { transform: translateY(-1px); filter: drop-shadow(2px 2px 0 rgba(23, 35, 59, 0.18)); z-index: 3; } :root[data-theme="dark"] #calendar:not(.is-week-view) .fc .fc-daygrid-event:hover { filter: drop-shadow(2px 2px 0 rgba(0, 0, 0, 0.45)); } } @media (prefers-reduced-motion: no-preference) and (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #calendar:not(.is-week-view) .fc .fc-daygrid-event:hover { filter: drop-shadow(2px 2px 0 rgba(0, 0, 0, 0.45)); } } /* Just ticked off in the detail modal: one green wash that fades out. Uses an overlay pseudo because the card's own background is !important and can't be touched from a keyframe. */ @media (prefers-reduced-motion: no-preference) { #calendar:not(.is-week-view) .fc .fc-daygrid-event.fc-event-just-done::after { content: ""; position: absolute; inset: 0; background: var(--green-pen); pointer-events: none; animation: eventDoneFlash 0.8s ease-out forwards; } @keyframes eventDoneFlash { from { opacity: 0.4; } to { opacity: 0; } } } .fc .fc-daygrid-event .fc-event-title { color: var(--ink) !important; font-weight: 500 !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fc .fc-daygrid-event .fc-event-time { color: var(--ink) !important; font-family: var(--font-mono) !important; } /* passé : still shown, but marked done-and-gone like a missed deadline — grayed out rather than alarmed red, since a past due date isn't an error */ .fc .fc-daygrid-event.fc-event-overdue { border-left-color: var(--ink-soft) !important; background: color-mix(in srgb, var(--ink-soft) 14%, transparent) !important; } .fc .fc-daygrid-event.fc-event-overdue:hover { background: color-mix(in srgb, var(--ink-soft) 24%, transparent) !important; } .fc .fc-daygrid-event.fc-event-overdue .fc-event-title { color: var(--ink-soft) !important; text-decoration: line-through; text-decoration-color: var(--ink-soft); text-decoration-thickness: 1.5px; } /* test / matu blanche : a subtle red hairline around the card, so a graded item reads differently from ordinary homework without shouting. Dropped once the item is past due (see .fc-event-overdue) — then it's just gray like everything else. */ .fc .fc-daygrid-event.fc-event-exam { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--red-pen) 50%, transparent); } /* fait : the reader ticked this off themselves (stored per-browser). Only a green hairline around the card — the subject's colour (left rule + wash) is kept. Dropped once the item is past due, which then grays. */ .fc .fc-daygrid-event.fc-event-done { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--green-pen) 65%, transparent); } /* ---------- Week view: stretch the day cells into the space the other month-view rows would have taken, and show every devoir's real text. Each card sizes to its own text by default (short homework = short card — it isn't stretched to fill the leftover room); only when a day's cards genuinely don't all fit does JS (updateEventClamping) cap the tall ones to a fair share and fade their overflow, so the whole day is always visible without scrolling. ---------- */ #calendar.is-week-view .fc-daygrid-day-frame { display: flex; flex-direction: column; min-height: min(64vh, 640px) !important; } #calendar.is-week-view .fc-daygrid-day-events { flex: 1; display: flex; flex-direction: column; gap: 6px; min-height: 0; overflow: hidden; /* fair-share capping (JS) keeps this from ever needing to scroll */ margin-top: 4px !important; } #calendar.is-week-view .fc-daygrid-day-bottom { display: none; } /* no "+more" — dayMaxEvents: false */ #calendar.is-week-view .fc-daygrid-event-harness { flex: 0 0 auto; min-height: 0; } #calendar.is-week-view .fc-daygrid-event-harness .fc-daygrid-event { width: 100%; min-height: 0; position: relative; overflow: hidden; padding: 8px 10px !important; font-size: 0.78rem !important; } #calendar.is-week-view .fc-daygrid-event .fc-event-title { display: block; white-space: normal !important; overflow: hidden; text-overflow: clip; line-height: 1.4; } /* only added by JS once the text is measured to actually overflow its card — so a short devoir's card stays plain, nothing fades for no reason */ #calendar.is-week-view .fc-daygrid-event.is-clamped::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 20px; background: linear-gradient( to bottom, transparent, color-mix(in srgb, var(--evt, var(--ink)) 15%, var(--paper-card)) 75% ); pointer-events: none; } #calendar.is-week-view .fc-daygrid-event.fc-event-overdue.is-clamped::after { background: linear-gradient( to bottom, transparent, color-mix(in srgb, var(--ink-soft) 14%, var(--paper-card)) 75% ); } /* On a narrow screen, 7 columns squeezed into the viewport left maybe 50px per day — homework text was wrapping one letter per line and completely unreadable. Below the width where a day can hold a readable column (~150px), let the week scroll horizontally at a real column width instead of continuing to compress it into illegibility. */ @media (max-width: 1040px) { #calendar.is-week-view { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; } #calendar.is-week-view .fc-scrollgrid, #calendar.is-week-view table { min-width: 1050px; } } .fc .fc-daygrid-more-link { color: var(--blue-pen) !important; font-family: var(--font-mono) !important; font-size: 0.66rem !important; } .fc .fc-popover { background: var(--paper-card) !important; border: 1px solid var(--ink) !important; border-radius: var(--radius) !important; box-shadow: var(--shadow-card) !important; } .fc .fc-popover-header { background: transparent !important; } .fc .fc-popover-title { color: var(--ink) !important; font-family: var(--font-display) !important; font-size: 0.82rem !important; } .fc .fc-popover-close { color: var(--ink-soft) !important; opacity: 1 !important; } /* ---------- Modals ---------- */ .modal-overlay { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(23, 35, 59, 0.45); backdrop-filter: blur(3px); } .modal { width: 100%; max-width: 520px; max-height: 85vh; overflow-y: auto; background: var(--paper-card); border: 1px solid var(--ink); border-radius: var(--radius); box-shadow: var(--shadow-card); } @media (prefers-reduced-motion: no-preference) { .modal { animation: modalIn 0.22s ease-out; } @keyframes modalIn { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: none; } } /* matching exit — script.js holds .is-closing for 150ms before hiding */ .modal-overlay.is-closing { animation: overlayOut 0.15s ease forwards; } .modal-overlay.is-closing .modal { animation: modalOut 0.15s ease-in forwards; } @keyframes overlayOut { to { opacity: 0; } } @keyframes modalOut { to { opacity: 0; transform: translateY(8px) scale(0.985); } } } .modal-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px 12px; border-bottom: 1px solid var(--grid-bold); } .modal-header h2 { font-family: var(--font-display); font-size: 1.02rem; font-weight: 600; } .modal-close { display: flex; align-items: center; justify-content: center; background: none; border: none; color: var(--ink-soft); cursor: pointer; padding: 4px; transition: color 0.14s ease, transform 0.14s ease; } .modal-close:hover { color: var(--red-pen); } @media (prefers-reduced-motion: no-preference) { .modal-close:hover { transform: rotate(90deg) scale(1.08); } } .modal-body { padding: 16px 20px 22px; } .help-body { font-size: 0.88rem; line-height: 1.6; color: var(--ink); } .help-body > p { margin-bottom: 12px; } .help-body > p:last-child { margin-bottom: 0; } .help-body h3 { font-family: var(--font-display); font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-soft); margin: 18px 0 6px; } .help-body ul { margin: 0; padding-left: 18px; } .help-body li { margin-bottom: 5px; } .help-body li:last-child { margin-bottom: 0; } .help-body b { font-weight: 600; } .help-body a { color: var(--blue-pen); text-decoration: underline; text-underline-offset: 2px; word-break: break-word; } .help-body a:hover { color: var(--red-pen); } .detail-event { display: flex; flex-direction: column; gap: 12px; } .detail-row { display: flex; gap: 10px; font-size: 0.9rem; } .detail-label { flex-shrink: 0; min-width: 84px; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); padding-top: 2px; } .detail-value { color: var(--ink); word-break: break-word; } .detail-matiere { font-family: var(--font-display); font-weight: 600; } .detail-devoir { line-height: 1.65; white-space: pre-wrap; } .badge-overdue { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: color-mix(in srgb, var(--ink-soft) 18%, transparent); color: var(--ink-soft); font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.06em; text-transform: uppercase; vertical-align: middle; } .badge-done { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: color-mix(in srgb, var(--green-pen) 20%, transparent); color: color-mix(in srgb, var(--green-pen) 60%, var(--ink)); font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.06em; text-transform: uppercase; vertical-align: middle; } /* "Marquer comme fait" toggle in the devoir detail modal */ .detail-done-btn { margin-top: 16px; width: 100%; padding: 10px 14px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-color: var(--green-pen); color: var(--green-pen); } .detail-done-btn svg { width: 17px; height: 17px; flex: none; } .detail-done-btn:hover { background: var(--green-pen); border-color: var(--green-pen); color: #fff; } .detail-done-btn.is-done { background: color-mix(in srgb, var(--green-pen) 14%, transparent); } .detail-done-btn.is-done:hover { background: color-mix(in srgb, var(--ink-soft) 16%, transparent); border-color: var(--ink-soft); color: var(--ink-soft); } /* the moment it's ticked: the "Fait" badge springs in and the button gives one small nod (script.js re-renders with .pop / .nudge for that frame). The green card flash lives on .fc-event-just-done. */ @media (prefers-reduced-motion: no-preference) { .badge-done.pop { animation: badgePop 0.34s cubic-bezier(0.34, 1.56, 0.64, 1) both; } @keyframes badgePop { 0% { opacity: 0; transform: scale(0.4); } 60% { opacity: 1; transform: scale(1.12); } 100% { opacity: 1; transform: scale(1); } } .detail-done-btn.nudge { animation: btnNudge 0.3s ease; } @keyframes btnNudge { 0%, 100% { transform: none; } 45% { transform: scale(1.025); } } } .legend-hint { color: var(--ink-soft); font-size: 0.76rem; margin: 0 0 12px; } .legend-list { display: flex; flex-direction: column; gap: 6px; } /* Each row is styled like a miniature version of its own event chips on the calendar (same left-border-plus-tint language) instead of a plain settings-list row, so the key visibly explains what's on the grid. */ .legend-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 9px 12px; border: none; border-left: 3px solid var(--m, var(--ink)); border-radius: 0 var(--radius) var(--radius) 0; background: color-mix(in srgb, var(--m, var(--ink)) 12%, transparent); color: var(--ink); font: inherit; font-size: 0.88rem; text-align: left; cursor: pointer; transition: background-color 0.15s ease, opacity 0.15s ease, filter 0.15s ease, transform 0.15s ease; } @media (prefers-reduced-motion: no-preference) { .legend-item:hover { transform: translateX(2px); } .legend-item:active { transform: translateX(2px) scale(0.98); } } .legend-item:hover { background: color-mix(in srgb, var(--m, var(--ink)) 20%, transparent); } .legend-item.is-disabled { opacity: 0.5; filter: grayscale(0.7); background: color-mix(in srgb, var(--ink) 6%, transparent); } .legend-item.is-disabled .legend-name { text-decoration: line-through; text-decoration-color: var(--ink-soft); } .legend-count { flex-shrink: 0; font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-soft); } /* Tests / matu blanche toggle a whole *kind* of event rather than a subject — set them apart from the subject list with the same red hairline they wear on the grid, plus a divider. */ .legend-kinds { margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--grid-bold); } .legend-kind { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--red-pen) 45%, transparent); } .legend-kind.is-disabled { box-shadow: none; } /* ---------- Footer : ruled-off note ---------- */ .app-footer { margin-top: auto; padding: 14px 0 22px; border-top: 1px dashed var(--grid-bold); text-align: center; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em; color: var(--ink-soft); } .footer-dot { opacity: 0.5; margin: 0 2px; } #refresh-countdown { font-variant-numeric: tabular-nums; } .footer-link { border: none; background: none; padding: 0; color: var(--ink-soft); font: inherit; letter-spacing: inherit; text-decoration: underline; text-decoration-color: transparent; cursor: pointer; transition: color 0.15s ease, text-decoration-color 0.15s ease; } .footer-link:hover { color: var(--red-pen); text-decoration-color: var(--red-pen); } /* ---------- Icon buttons : icons over words, per the brief ---------- */ .icon-btn { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; cursor: pointer; background: transparent; border: 1px solid var(--ink-soft); border-radius: 50%; color: var(--ink-soft); transition: background 0.14s ease, transform 0.14s ease, border-color 0.14s ease, color 0.14s ease; } .icon-btn:hover { background: var(--ink); border-color: var(--ink); color: var(--paper-card); } .icon-btn:active { transform: scale(0.94); } /* today's ring gets circled by clicking; icon buttons get their own small hover flourish instead — cheap CSS transforms only, skipped entirely under reduced motion */ @media (prefers-reduced-motion: no-preference) { .theme-toggle:hover { transform: rotate(-14deg); } #btn-settings:hover svg { transform: rotate(60deg); } .icon-btn-refresh:hover svg { transform: rotate(300deg); } #btn-settings svg, .icon-btn-refresh svg { transition: transform 0.35s cubic-bezier(0.3, 1.4, 0.4, 1); } } /* one copy floats in the login card's corner (no fixed positioning, so it never fights with modal close buttons once the app is showing) */ .login-box { position: relative; } .login-box .theme-toggle { position: absolute; top: 14px; right: 14px; } .theme-icon { display: none; } /* system default: sun in light, moon in dark */ .theme-icon-sun { display: block; } .theme-icon-moon { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-icon-sun { display: none; } :root:not([data-theme="light"]) .theme-icon-moon { display: block; } } :root[data-theme="dark"] .theme-icon-sun { display: none; } :root[data-theme="dark"] .theme-icon-moon { display: block; } :root[data-theme="light"] .theme-icon-sun { display: block; } :root[data-theme="light"] .theme-icon-moon { display: none; } /* ---------- Login ---------- */ .login-screen { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 20px; background-color: var(--paper); background-image: linear-gradient(var(--grid-bold) 1px, transparent 1px), linear-gradient(90deg, var(--grid-bold) 1px, transparent 1px), radial-gradient(var(--grid) 1px, transparent 1px); background-size: 140px 140px, 140px 140px, 28px 28px; background-position: -1px -1px, -1px -1px, 0 0; } .login-screen.hidden { display: none; } .login-box { width: 100%; max-width: 360px; display: flex; flex-direction: column; align-items: stretch; gap: 14px; padding: 34px 30px 32px; background: var(--paper-card); border: 1px solid var(--ink); border-radius: var(--radius); box-shadow: var(--shadow-hard); text-align: center; } @media (prefers-reduced-motion: no-preference) { .login-box { animation: modalIn 0.28s ease-out; } } .login-icon { color: var(--ink); align-self: center; line-height: 0; } .login-title { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; } .login-subtitle { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 6px; } .login-label { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); text-align: left; } .login-input { width: 100%; padding: 11px 14px; background: var(--paper); border: 1px solid var(--grid-bold); border-radius: var(--radius); color: var(--ink); font-family: var(--font-mono); font-size: 1rem; letter-spacing: 0.2em; outline: none; transition: border-color 0.14s ease; } .login-input:focus { border-color: var(--blue-pen); } .login-input::placeholder { color: var(--ink-soft); opacity: 0.5; } .login-error { font-size: 0.82rem; color: var(--red-pen); text-align: left; } .login-btn { width: 100%; padding: 12px; font-size: 0.78rem; } /* ====================================================================== Admin mode — agenda management console. Deliberately plainer than the class view: no legend / search / help, and motion cut right back. ====================================================================== */ #btn-admin, #admin-badge { display: none; } .admin-mode #btn-admin { display: flex; } .admin-mode #admin-badge { display: inline; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--red-pen); border: 1px solid var(--red-pen); border-radius: 999px; padding: 1px 7px; } .admin-mode #btn-settings, .admin-mode #new-pill, .admin-mode #btn-help, .admin-mode .header-search, .admin-mode #visit-counter-wrap { display: none; } /* "Without all the animations and stuff" — a management screen, not a showpiece. Kill transitions/animation everywhere inside the app shell. */ .admin-mode, .admin-mode *, .admin-mode *::before, .admin-mode *::after { animation-duration: 0.001s !important; animation-delay: 0s !important; transition-duration: 0.001s !important; } /* Hidden / moved devoirs stay on the calendar for the admin (so they can be undone), but read as clearly not-normal. */ .fc-event-admin-hidden .fc-event-title, .fc-event-admin-hidden .fc-event-time { text-decoration: line-through; } .fc-event-admin-hidden { opacity: 0.5; outline: 1px dashed var(--ink-soft); outline-offset: -1px; } .fc-event-admin-moved { outline: 1px dashed var(--blue-pen); outline-offset: -1px; } .admin-section { margin-bottom: 22px; } .admin-section:last-child { margin-bottom: 0; } .admin-section h3 { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 8px; } .admin-hint { font-size: 0.8rem; color: var(--ink-soft); margin-bottom: 10px; } .admin-input { width: 100%; padding: 9px 11px; margin-bottom: 8px; background: var(--paper); border: 1px solid var(--grid-bold); border-radius: var(--radius); color: var(--ink); font-family: var(--font-body); font-size: 0.9rem; outline: none; } .admin-input:focus { border-color: var(--blue-pen); } .admin-textarea { resize: vertical; min-height: 72px; } .admin-error { font-size: 0.8rem; color: var(--red-pen); margin-top: 6px; } .admin-empty { font-size: 0.85rem; color: var(--ink-soft); } .admin-list { display: flex; flex-direction: column; gap: 8px; } .admin-list-item { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--grid-bold); border-radius: var(--radius); background: var(--paper); } .admin-list-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .admin-list-title { font-size: 0.88rem; color: var(--ink); font-weight: 600; } .admin-list-sub { font-size: 0.74rem; color: var(--ink-soft); font-family: var(--font-mono); } .admin-list-body { font-size: 0.82rem; color: var(--ink-soft); white-space: pre-wrap; } .admin-link { flex: none; background: none; border: 0; padding: 0; cursor: pointer; font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.04em; color: var(--blue-pen); text-decoration: underline; text-underline-offset: 2px; } .admin-link:hover { color: var(--red-pen); } .admin-link:disabled { opacity: 0.5; cursor: default; } .admin-actions { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; } .admin-date-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .admin-date-row label { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); } .admin-date-row .admin-input { width: auto; margin-bottom: 0; flex: 1 1 150px; } .admin-date-row .btn { flex: none; } .admin-tag { display: inline-block; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.06em; padding: 1px 6px; border-radius: 999px; border: 1px solid var(--blue-pen); color: var(--blue-pen); vertical-align: middle; } .admin-tag-off { border-color: var(--ink-soft); color: var(--ink-soft); } /* ---------- Site announcement pop-ups (all visitors) ---------- */ .announcements { position: fixed; right: 16px; bottom: 16px; z-index: 1200; display: flex; flex-direction: column; gap: 10px; max-width: min(360px, calc(100vw - 32px)); } /* The whole card is the dismiss target — click (or Enter/Space) anywhere on it to close. A hover lift + "Fermer" hint makes that discoverable. */ .announcement { position: relative; padding: 14px 16px 12px; background: var(--paper-card); border: 1px solid var(--ink); border-left: 3px solid var(--blue-pen); border-radius: var(--radius); box-shadow: var(--shadow-card); cursor: pointer; opacity: 0; transform: translateY(12px); transition: opacity 0.2s ease, transform 0.16s ease, box-shadow 0.16s ease, border-left-color 0.16s ease; } .announcement.is-in { opacity: 1; transform: none; } .announcement.is-leaving { opacity: 0; transform: translateY(12px) scale(0.98); } .announcement:hover, .announcement:focus-visible { transform: translateY(-3px); box-shadow: 5px 5px 0 rgba(23, 35, 59, 0.16); border-left-color: var(--red-pen); outline: none; } :root[data-theme="dark"] .announcement:hover, :root[data-theme="dark"] .announcement:focus-visible { box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.4); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .announcement:hover, :root:not([data-theme="light"]) .announcement:focus-visible { box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.4); } } .announcement-title { font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; color: var(--ink); margin-bottom: 4px; padding-right: 58px; /* clear of the hint */ } .announcement-body { font-size: 0.85rem; line-height: 1.5; color: var(--ink); white-space: pre-wrap; margin-bottom: 6px; } .announcement-date { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.04em; color: var(--ink-soft); } .announcement-hint { position: absolute; top: 10px; right: 12px; display: flex; align-items: center; gap: 4px; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); opacity: 0; transform: translateX(4px); transition: opacity 0.16s ease, transform 0.16s ease, color 0.16s ease; pointer-events: none; } .announcement:hover .announcement-hint, .announcement:focus-visible .announcement-hint { opacity: 1; transform: none; color: var(--red-pen); } @media (prefers-reduced-motion: reduce) { .announcement, .announcement-hint { transition: opacity 0.2s ease; } .announcement:hover, .announcement:focus-visible { transform: none; } .announcement-hint { opacity: 0.7; transform: none; } } /* ---------- Réglages : gear with the other round buttons ---------- */ #btn-settings { position: relative; } /* Red-pen dot: something is being kept off the calendar right now. */ .settings-dot { position: absolute; top: -2px; right: -2px; width: 8px; height: 8px; border-radius: 50%; background: var(--red-pen); box-shadow: 0 0 0 2px var(--paper); pointer-events: none; } .settings-dot.hidden { display: none; } /* "3 nouveaux" — sits in the meta row like the subtitle, in red pen. */ .new-pill { border: none; background: none; padding: 0; cursor: pointer; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--red-pen); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: text-decoration-color 0.15s ease; } .new-pill:hover { text-decoration-color: currentColor; } .new-pill::before { color: var(--ink-soft); } .new-pill.hidden { display: none; } /* nouveau : a red-pen dot before the title, like a margin mark */ .fc .fc-daygrid-event.fc-event-new .fc-event-title::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: var(--red-pen); vertical-align: 1px; } @media (prefers-reduced-motion: no-preference) { .fc .fc-daygrid-event.fc-event-ping { animation: newPing 0.9s ease-out 2; } @keyframes newPing { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--red-pen) 55%, transparent); } 100% { box-shadow: 0 0 0 7px transparent; } } } .settings-body { padding-top: 6px; } .settings-section + .settings-section { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--grid-bold); } .settings-section h3 { font-family: var(--font-display); font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-soft); margin: 0 0 8px; } .setting-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 9px 0; cursor: pointer; } .setting-row + .setting-row { border-top: 1px solid color-mix(in srgb, var(--grid-bold) 60%, transparent); } .setting-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .setting-name { font-size: 0.88rem; font-weight: 500; color: var(--ink); } .setting-desc { font-size: 0.76rem; line-height: 1.4; color: var(--ink-soft); } /* Switch: an inked pill with a knob — outline when off, filled when on. */ .switch { appearance: none; -webkit-appearance: none; flex-shrink: 0; position: relative; width: 36px; height: 20px; margin: 0; border: 1.5px solid var(--ink-soft); border-radius: 999px; background: transparent; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease; } .switch::before { content: ""; position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 50%; background: var(--ink-soft); transition: transform 0.2s cubic-bezier(0.3, 1.4, 0.4, 1), background 0.15s ease; } .switch:checked { background: var(--ink); border-color: var(--ink); } .switch:checked::before { transform: translateX(16px); background: var(--paper-card); } @media (prefers-reduced-motion: reduce) { .switch::before { transition: none; } } .legend-hint-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .legend-hint-row .legend-hint { margin: 0; } .install-text { font-size: 0.84rem; line-height: 1.55; color: var(--ink); } .install-ok { display: flex; align-items: center; gap: 8px; color: var(--green-pen); } .install-ok svg { width: 18px; height: 18px; flex-shrink: 0; } .install-btn { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding: 10px 16px; } .install-btn svg { width: 16px; height: 16px; } .install-steps { margin: 10px 0 0; padding-left: 20px; font-size: 0.84rem; line-height: 1.6; } .install-steps li { margin-bottom: 4px; } .install-steps b, .install-note b { font-weight: 600; } .inline-icon { display: inline-block; vertical-align: -3px; color: var(--blue-pen); } .install-note { margin-top: 10px; font-size: 0.76rem; line-height: 1.5; color: var(--ink-soft); } .settings-foot { margin-top: 20px; font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.08em; text-align: center; color: var(--ink-soft); } /* detail modal dates: "jeudi 1 octobre · demain" */ .date-rel { font-family: var(--font-mono); font-size: 0.74rem; color: var(--ink-soft); white-space: nowrap; } .date-rel.is-soon { color: var(--red-pen); } /* ---------- Responsive ---------- */ @media (max-width: 600px) { #app { padding: 0 12px; } .header-left h1, .login-title { font-size: 1.25rem; letter-spacing: 0.1em; } .header-meta { font-size: 0.9em; } .header-subtitle, #visit-counter-wrap, .offline-badge { font-size: 0.64rem; letter-spacing: 0.12em; } /* Tap targets grow slightly on touch-sized screens instead of staying desktop-mouse-sized. */ .icon-btn { width: 36px; height: 36px; } .new-pill { font-size: 0.64rem; letter-spacing: 0.12em; } /* Not enough width for the search field beside three 36px buttons — let it drop onto its own row under them and span the full width. */ /* Icons share the title's row, the search gets its own row under both — one row less than stacking icons and search separately. */ .app-header { column-gap: 8px; align-items: center; } .header-left { flex: 1 1 auto; min-width: 0; } .header-right { display: contents; } .header-search { order: 1; flex: 1 1 100%; height: 36px; } .header-search-input { width: 100%; } .fc .fc-button { min-width: 36px; min-height: 36px; } .fc .fc-toolbar { gap: 8px; } .fc .fc-toolbar.fc-header-toolbar { gap: 8px 10px; } .fc { font-size: 0.72rem; } .fc .fc-toolbar-title { font-size: 1.02rem !important; } .fc .fc-daygrid-day-frame { min-height: 64px !important; } .fc .fc-daygrid-event { font-size: 0.62rem !important; } .legend-item { padding: 10px 12px; font-size: 0.84rem; } .legend-count { font-size: 0.68rem; } .detail-row { flex-direction: column; gap: 3px; } .detail-label { min-width: 0; } } @media (max-width: 400px) { #app { padding: 0 8px; } .fc .fc-daygrid-day-frame { min-height: 52px !important; } /* Below ~400px there's no room for the visit counter next to the subtitle without wrapping mid-word — hide it here, it's a nice-to-know not a need-to-know, and it's still visible on anything wider. */ #visit-counter-wrap { display: none; } } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--grid-bold); border-radius: 4px; }