/* Every style of the calendar page (index.html). Colors are CSS variables: :root holds the Teal defaults and the saved theme
   overrides them at runtime (see the Style engine in index.html). Bump ?v= in index.html whenever this file changes: the server
   sends no cache headers. */
/* THEME COLORS: the Teal theme (the default for new copies), overridden at runtime by the saved theme (THEMES in the script) */
:root {
    --page-bg: #eff7f6; --soft-bg: #eff7f6; --surface: #ffffff; --disabled-bg: #f6f7f8;
    --primary: #0e6f6e; --primary-hover: #0c5e5e; --on-primary: #ffffff; --outline-bg: #cfece9;
    --accent: #9fd8d3; --border: #d4edeb; --danger: #d93b3b;
    --text: #2b2f36; --text-muted: #5f6671; --text-faint: #8e959f;
    --cal-title: #2b2f36; --cal-header-bg: #9fd8d3; --cal-header-text: #1b1b1b; --cal-slot-border: #8fc2be;
    --cal-grid: #d4edeb; --cal-today: #9fd8d3; --cal-closed-bg: #0e6f6e; --cal-closed-text: #ffffff;
    --tile-text: #ffffff; --tile-default: #d9480f; --tile-block: #0e6f6e;
    --tile-busy: #d3d6db; --tile-busy-border: #bcc1c8; --tile-guest: #0e6f6e;
    /* Fonts: section headers ("Afternoons", window titles), the week title, and all other text. Set from Style. */
    --font-headers: 'Dancing Script', cursive; --font-week: 'Dancing Script', cursive; --font-text: 'Inter', sans-serif; --font-site-name: 'Dancing Script', cursive; --font-subtitle: 'Inter', sans-serif;
}
body { font-family: var(--font-text); margin: 20px; background-color: var(--page-bg); }
/* Elements hidden with the hidden attribute stay hidden even when a class gives them display: flex/grid. */
[hidden] { display: none !important; }
/* Keyboard focus is always visible (WCAG 2.4.7), including on elements that set outline: none. */
:focus-visible { outline: 3px solid var(--primary) !important; outline-offset: 2px; }
/* Touch screens: every control at least ~44x44px (WCAG 2.5.8), so fingers don't miss. */
@media (pointer: coarse), (max-width: 768px) {
    .cal-toolbar .cal-btn, .cal-toolbar .cal-clock { min-height: 44px; min-width: 44px; }
    .header-btn, #teacher-selector { min-height: 44px; }
    .status-box { min-height: 44px; }
    .fa-trash[role="button"] { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
    .card .st-btn, .card .st-adv-row button, .card .site-close, .card .st-warning button, .st-saved button { min-height: 44px; }
    .card .site-reset { min-height: 44px; padding: 0 6px; }
    .card .site-nav button { min-height: 44px; }
    .day-toggles label { min-height: 44px; box-sizing: border-box; } /* the small checkbox is inside: tapping the label toggles it */
    .card button, .card select, .card input[type="text"], .card input[type="email"], .card input[type="password"], .card input[type="number"], .card input[type="date"], .card input[type="month"], .card input[type="datetime-local"], .card input[type="time"], .card input[type="url"], .card input[type="tel"] { min-height: 44px; }
    .card input[type="color"] { min-height: 44px; }
    .card .site-reset { min-width: 44px; }
    .st-advanced summary { min-height: 44px; display: flex; align-items: center; }
}
/* Phones zoom in on text fields under 16px when tapped; 16px keeps pinch-zoom free without that jump. */
@media (max-width: 768px) { input, select, textarea { font-size: 16px !important; } }
/* Logo and header buttons centered on each other (a tall image logo used to leave the buttons low). */
.calendar-header { max-width: 1200px; margin: 0 auto 10px auto; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.logo-container { flex: 0 1 auto; min-width: 0; } /* a wide logo shrinks before the header buttons wrap */
.logo-container img { max-height: 120px; max-width: 100%; width: auto; display: block; }

#calendar-container { max-width: 1200px; margin: 0 auto; }

.calendar-instance { 
    background: var(--surface); 
    padding: 20px; 
    border-radius: 12px; 
    box-shadow: 0 4px 15px color-mix(in srgb, var(--accent) 30%, transparent); 
    border: 1px solid var(--accent); 
    touch-action: pan-y; 
    margin-bottom: 30px;
}

.calendar-separator-ui { text-align: center; margin: 40px 0 20px 0; position: relative; }
.calendar-separator-ui span {
    background: var(--page-bg);
    padding: 0 20px;
    font-family: var(--font-headers);
    font-size: 2.8em;
    color: var(--primary);
    font-weight: 700;
    z-index: 1;
    position: relative;
}
.calendar-separator-ui::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--accent);
    z-index: 0;
}

/* THE WEEK BAR (above the calendars): week arrows and Today, the week's dates, and the school's clock */
/* "View as student" banner (read-only preview of one student's calendar) */
.preview-banner { max-width: 1200px; margin: 20px auto 0; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 10px 14px; border-radius: 10px; background: var(--outline-bg); border: 1px solid var(--primary); color: var(--primary); font-weight: 700; }
/* Class actions (a teacher clicks a class): the student's links and "Cancel the class" */
/* Class window: the student's shortcuts as icon buttons under the name, then the day and time, centered. */
.class-links { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-start; margin: 2px 0 14px; }
.card .class-when { text-align: center; font-weight: 800; font-size: 1.05em; color: var(--text); margin: 0 0 16px; white-space: pre-line; } /* date, then the time on its own line */
.class-links a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; font-size: 1.1em; border-radius: 8px; background: var(--outline-bg); color: var(--primary); border: 1px solid var(--primary); font-weight: 700; text-decoration: none; }
.class-links a:hover { background: var(--border); }
.card button.btn-danger { background: var(--danger); color: #fff; }
#class-overlay, #block-overlay, #tools-overlay { display: none; }
/* Users form: shortcut rows (symbol, link, remove) and the symbol grid. */
.sm-shortcuts { display: grid; gap: 8px; margin: 6px 0; }
.sm-shortcut { display: flex; gap: 6px; align-items: center; }
.card .sm-shortcut input[type="url"] { flex: 1; min-width: 0; margin: 0; }
.card .sm-shortcut button { width: 44px; height: 44px; margin: 0; padding: 0; flex: none; display: inline-flex; align-items: center; justify-content: center; }
.card .sm-icon-pick { background: var(--primary); color: var(--on-primary); font-size: 1.05em; }
.card .sm-shortcut-remove { background: none; color: var(--danger); border: 1px solid var(--border); }
.card .sm-add-shortcut { width: auto; margin: 4px 0 0; }
.icon-picker { position: fixed; z-index: 1300; display: grid; grid-template-columns: repeat(5, 44px); gap: 6px; padding: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 24px color-mix(in srgb, var(--text) 18%, transparent); }
.icon-picker button { width: 44px; height: 44px; margin: 0; padding: 0; border-radius: 8px; border: 1px solid var(--border); background: var(--outline-bg); color: var(--primary); font-size: 1.05em; cursor: pointer; }
.icon-picker button[aria-pressed="true"] { background: var(--primary); color: var(--on-primary); }
/* Contact links on the login screen (WhatsApp + social media), and the Contact section of Site settings */
.login-contact { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 18px; }
.login-contact a { width: 44px; height: 44px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: var(--primary); color: var(--on-primary); font-size: 1.25em; text-decoration: none; transition: transform 0.2s; }
.login-contact a:hover { background: var(--primary-hover); transform: translateY(-2px); }
/* Site settings: each setting (or set of related switches) sits in its own box with a heading. */
.contact-block, .site-group { border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; margin: 0; text-align: left; display: grid; gap: 12px; }
.site-group .form-grid, .contact-block .form-grid { row-gap: 14px; }
.form-grid label.site-check { font-size: 0.95em; color: var(--text); font-weight: 400; text-transform: none; }
/* The consent tick sits right under the WhatsApp number, smaller, as part of that field. */
.card .form-grid label.sm-whatsapp-ok { margin-top: 6px; font-size: 0.82em; color: var(--text-muted); gap: 6px; }
.card label.sm-whatsapp-ok input { width: 15px; height: 15px; }
/* Site settings → WhatsApp: the connection line and each message template's approval, per language. */
/* The connection line starts with a dot: primary when connected, muted when not set up, danger when failing. */
.wa-connection { margin: 0; font-size: 0.95em; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 8px; }
.wa-connection::before { content: ""; width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--text-muted); }
.wa-connection[data-state="ok"]::before { background: var(--primary); }
.wa-connection[data-state="error"]::before { background: var(--danger); }
/* A sub-option of the message above it ("Also for changes students make themselves"). */
.wa-sub { background: var(--soft-bg); border-radius: 8px; padding: 10px 12px; display: grid; gap: 4px; }
.wa-label { margin: 6px 0 0; font-size: 0.8em; color: var(--primary); font-weight: 700; text-transform: uppercase; } /* like the field labels */
.wa-templates { display: grid; gap: 6px; margin: 6px 0; }
.wa-tmpl-row { display: grid; grid-template-columns: minmax(120px, auto) 1fr; gap: 10px; font-size: 0.85em; padding: 6px 0; border-top: 1px solid var(--soft-bg); }
.wa-tmpl-kind { font-weight: 700; color: var(--text); }
.wa-tmpl-langs { color: var(--text-muted); }
.contact-block h5, .site-group h5 { margin: 0; color: var(--primary); font-size: 0.85em; font-weight: 900; letter-spacing: 0.04em; text-transform: uppercase; }
.contact-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.contact-head h5 { margin: 0; }
.ct-social-row { display: grid; grid-template-columns: auto 28px 110px 1fr; align-items: center; gap: 8px; margin-top: 8px; }
.ct-social-row i { color: var(--primary); font-size: 1.2em; text-align: center; }
.card .ct-social-row input[type="url"] { margin: 0; }
@media (max-width: 560px) { .ct-social-row { grid-template-columns: auto 28px 1fr; } .card .ct-social-row input[type="url"] { grid-column: 1 / -1; } }
/* Sits nearer the first section header than the header buttons above it. */
/* Three columns (buttons, dates, clock): the dates stay centered whatever the widths on either side. */
.cal-toolbar { max-width: 1200px; margin: 36px auto 0 auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.cal-toolbar .cal-clock { justify-self: end; }
.cal-toolbar:not([hidden]) + #calendar-container > .calendar-separator-ui:first-child { margin-top: 14px; }
/* "Go to a date": the button opens the browser's own date picker (a hidden date input under it). */
.cal-date-pick { position: relative; display: inline-flex; }
.cal-date-pick input { position: absolute; inset: 0; opacity: 0; pointer-events: none; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; }
.cal-nav { display: flex; gap: 6px; }
.cal-toolbar .cal-btn { width: auto; margin: 0; min-height: 40px; min-width: 40px; padding: 8px 14px; border: none; border-radius: 8px; background: var(--cal-header-bg); color: var(--cal-header-text); font-family: var(--font-text); font-weight: 900; text-transform: uppercase; cursor: pointer; }
.cal-toolbar .cal-btn:hover { filter: brightness(0.95); }
.cal-week { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 6px 18px; font-family: var(--font-week); font-size: 1.5em; font-weight: 700; color: var(--cal-title); text-align: center; }
.cal-toolbar .cal-clock { width: auto; margin: 0; min-height: 40px; padding: 8px 15px; border: none; border-radius: 8px; background: var(--primary); color: var(--on-primary); font-family: var(--font-text); font-weight: 900; display: flex; align-items: center; gap: 8px; white-space: nowrap; cursor: help; }
/* The school's zone appears on hover (or keyboard focus), and tapping keeps it shown (touch screens have no hover). */
.cal-clock .clock-zone { display: none; font-weight: 700; opacity: 0.85; text-transform: uppercase; }
.cal-clock.show-zone .clock-zone, .cal-clock:hover .clock-zone, .cal-clock:focus-visible .clock-zone { display: inline; }
@media (max-width: 768px) {
    .cal-toolbar { grid-template-columns: 1fr auto; }
    .cal-week { order: 3; grid-column: 1 / -1; font-size: 1.3em; }
    /* Phones: smaller day headers and tile text, so seven days fit side by side. */
    .fc-col-header-cell-cushion { font-size: 0.72em; padding: 3px 0 !important; white-space: normal; }
    .fc-v-event .fc-event-main { font-size: 0.72em; padding: 3px !important; }
    /* Phones: logo on top, header buttons below it, the teacher dropdown on its own full-width line. */
    .calendar-header { flex-direction: column; align-items: stretch; gap: 12px; }
    .logo-container { align-self: center; }
    .logo-container img { max-height: 90px; }
    .calendar-header .header-btns { justify-content: center; }
    .calendar-header #teacher-selector { flex-basis: 100%; max-width: 100%; margin-right: 0; }
}

.overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: color-mix(in srgb, var(--page-bg) 95%, transparent); display: flex; align-items: center; justify-content: center; z-index: 1000; overflow-y: auto; padding: 20px; box-sizing: border-box; }
.card { background: var(--surface); padding: 40px; border-radius: 20px; box-shadow: 0 10px 25px color-mix(in srgb, var(--accent) 50%, transparent); width: 100%; max-width: 400px; text-align: center; border: 1px solid var(--accent); box-sizing: border-box; margin: auto; }
.card.wide { max-width: 600px; }
.card.extra-wide { max-width: 800px; }
#student-overview-overlay .card.extra-wide { max-width: 960px; } /* room for six stat boxes without wrapping their labels */

.login-logo { max-width: 200px; height: auto; margin-bottom: 5px; display: inline-block; }
.login-subtitle { font-family: var(--font-subtitle); font-size: 0.9em; color: var(--primary); font-weight: 400; letter-spacing: 1px; margin-bottom: 20px; text-transform: uppercase; opacity: 0.8; }

.card input[type="text"], .card input[type="email"], .card input[type="password"], .card input[type="number"], .card input[type="date"], .card input[type="month"], .card textarea, .card input[type="datetime-local"], .card input[type="time"], .card input[type="url"], .card input[type="tel"], .card select { width: 100%; padding: 12px; margin: 8px 0; border: 1px solid var(--border); border-radius: 8px; box-sizing: border-box; font-family: var(--font-text); }
.card input:disabled { background-color: var(--disabled-bg); color: var(--text-faint); cursor: not-allowed; }
/* A Save with nothing (left) to save: greyed out until something really changes. */
button:disabled, .card button:disabled, .card button:disabled:hover { opacity: 0.45; cursor: not-allowed; }
.card button { width: 100%; padding: 12px; background: var(--primary); color: var(--on-primary); border: none; border-radius: 8px; font-weight: 900; cursor: pointer; transition: 0.3s; margin-top: 10px; text-transform: uppercase; }
.card button.secondary { background: var(--accent); color: var(--primary); }
.card button.danger { background: var(--danger); color: var(--on-primary); width: auto; padding: 6px 12px; font-size: 0.8em; margin-top: 0; }
.card button.edit { background: var(--primary); color: var(--on-primary); width: auto; padding: 6px 12px; font-size: 0.8em; margin-top: 0; }
.card button.block { background: var(--surface); color: var(--danger); border: 1px solid var(--danger); width: auto; padding: 6px 12px; font-size: 0.8em; margin-top: 0; } /* Block: outlined, so it doesn't look like Delete */

.sm-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.sm-header h3 { color: var(--primary); margin: 0; font-family: var(--font-text); font-weight: 900; font-size: 1.3em; letter-spacing: 0.5px; text-transform: uppercase; } /* every window title: capitals in the text font, like labels and buttons */
.sm-list-container { overflow-y: auto; text-align: left; margin-bottom: 20px; border: 1px solid var(--border); border-radius: 8px; padding: 10px; }

.sm-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--soft-bg); }
.sm-row:last-child { border-bottom: none; }
.sm-row-info { display: flex; flex-direction: column; }
.sm-row-name { font-weight: 700; color: var(--text); }
.sm-row-email { font-size: 0.8em; color: var(--text-muted); }
.sm-row-actions { display: flex; gap: 6px; align-items: center; flex: none; }
/* Row actions (Edit, Block, Delete): compact, lighter type, ~32px tall with a mouse; 44px only on touch screens. */
.card .sm-row-actions button { min-height: 32px; padding: 0 12px; font-size: 0.72em; font-weight: 700; letter-spacing: 0.04em; border-radius: 6px; }
@media (pointer: coarse) { .card .sm-row-actions button { min-height: 44px; min-width: 44px; } }

.so-row { display: flex; flex-direction: column; padding: 15px 0; border-bottom: 1px solid var(--border); text-align: left; }
.so-row:last-child { border-bottom: none; }
.card input.sm-search { margin: 0 0 12px; }
.class-row { cursor: pointer; }
.so-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.card .so-toolbar input[type="text"] { flex: 1 1 180px; width: auto; margin: 0; }
.card .so-toolbar select { width: auto; margin: 0; }
.so-sort { display: flex; align-items: center; gap: 6px; margin: 0; }
.card .so-toolbar .so-reverse { width: auto; margin: 0; padding: 0 14px; min-height: 44px; }
.so-hide-ended { flex-basis: 100%; }
.so-reverse.desc i { transform: scaleY(-1); }
.so-name { font-weight: 900; color: var(--primary); font-size: 1.1em; margin-bottom: 8px; text-transform: uppercase; }
.so-name:has(+ .so-teachers) { margin-bottom: 2px; }
.so-teachers { font-size: 0.85em; font-weight: 700; color: var(--text-muted); margin-bottom: 8px; }
.so-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 10px; }
.so-stat-box { background: var(--soft-bg); padding: 10px; border-radius: 6px; font-size: 0.9em; font-weight: 700; color: var(--text); text-align: center; border: 1px solid var(--border); }
.so-stat-label { display: block; font-weight: 900; color: var(--primary); margin-bottom: 4px; font-size: 0.75em; text-transform: uppercase; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; text-align: left; }
.form-grid label { font-size: 0.8em; color: var(--primary); font-weight: 700; text-transform: uppercase; }
.form-grid .full-width { grid-column: span 2; }

.day-toggles { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 5px; }
.day-toggles label { font-size: 0.85em; display: flex; align-items: center; gap: 5px; background: var(--soft-bg); padding: 5px 10px; border-radius: 6px; border: 1px solid var(--border); cursor: pointer; color: var(--text);}
.day-toggles input { width: 16px !important; height: 16px; margin: 0; cursor: pointer; accent-color: var(--primary); }

input[type="datetime-local"], input[type="time"] { display: block; appearance: none; -moz-appearance: textfield; -webkit-appearance: none; }
input[type="datetime-local"]::-webkit-calendar-picker-indicator, input[type="time"]::-webkit-calendar-picker-indicator { cursor: pointer; }

#login-overlay { display: flex; }
/* Konami code easter egg on the login screen (see KONAMI_ON): the logo does a barrel roll and the page rains confetti. */
@keyframes konami-roll { to { transform: rotate(720deg) scale(1.15); } }
@keyframes konami-fall { to { transform: translateY(110vh) rotate(var(--spin)); opacity: 0.9; } }
.login-logo.konami-roll { animation: konami-roll 1.4s ease-in-out; }
.konami-bit { position: fixed; top: -30px; z-index: 9999; pointer-events: none; animation: konami-fall var(--dur) linear forwards; }
#konami-video-overlay { z-index: 10000; background: rgba(0, 0, 0, 0.85); }
.konami-video-box { position: relative; width: min(960px, 92vw, 160vh); height: min(540px, 51.75vw, 90vh); flex: none; } /* 16:9, fits any screen */
#konami-video { width: 100%; height: 100%; }
.konami-video-box iframe { display: block; width: 100%; height: 100%; border: 0; border-radius: 12px; }
.konami-video-close { position: absolute; top: -14px; right: -14px; width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--accent); background: var(--surface); color: var(--primary); font-size: 1.2em; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; margin: 0; }
@media (prefers-reduced-motion: reduce) { .login-logo.konami-roll { animation: none; } .konami-bit { display: none; } }
#student-manager-overlay { display: none; }
#student-overview-overlay { display: none; }
#calendar-settings-overlay { display: none; }
.cs-tabs { display: flex; gap: 6px; margin: 4px 0 16px; border-bottom: 1px solid var(--border); }
.card .cs-tabs button { width: auto; margin: 0 0 -1px; padding: 10px 14px; min-height: 44px; background: none; color: var(--text-muted); border: none; border-bottom: 3px solid transparent; border-radius: 0; display: flex; align-items: center; gap: 8px; }
.card .cs-tabs button[aria-selected="true"] { color: var(--primary); border-bottom-color: var(--primary); }
.cs-subtitle { text-align: left; margin: 0 0 6px; color: var(--primary); font-size: 1em; text-transform: uppercase; }
#profile-overlay { display: none; }
#calendar-section { display: none; }
#student-classes-overlay { display: none; }
#pick-student-overlay { display: none; }
#history-overlay { display: none; }
/* The filters look like the boxed buttons: capitals, bold, in the theme color. */
#history-overlay .so-toolbar select { text-transform: uppercase; font-weight: 900; font-size: 0.85em; color: var(--primary); }
/* Both filters share one line at any width: each takes half and shortens its text if needed. */
#history-overlay .so-toolbar { flex-wrap: nowrap; }
#history-overlay .so-toolbar select { flex: 1 1 0; min-width: 0; width: auto; text-overflow: ellipsis; }
#hist-list { max-height: 55vh; text-align: left; }
.hist-row .sm-row-info { gap: 2px; }
.hist-icon { color: var(--primary); margin-right: 4px; }
.hist-icon.cancel { color: var(--danger); }
/* Payments: the student's list and the staff's Invoices window. */
#payments-overlay, #invoices-overlay, #invoice-form-overlay, #package-form-overlay, #payer-dialog-overlay { display: none; }
#pix-overlay, #asaas-pick-overlay { display: none; }
#asaas-pick-list { max-height: 50vh; text-align: left; }
/* Users → Packages: one row per package, newest first. */
.sm-packages { display: grid; gap: 8px; margin: 8px 0; }
.pkg-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; }
.pkg-row.pkg-current { border-color: var(--primary); }
.pkg-row.pkg-past { opacity: 0.7; }
.pkg-dates { font-weight: 700; }
.pkg-sub { font-size: 0.85em; color: var(--text-muted); }
.card .pkg-row .st-btn { width: auto; margin: 0; flex: none; }
.card .sm-add-package { width: auto; margin: 4px 0 0; }
/* A package's payers: one row each, with edit and delete; added in their own little window. */
.payer-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; }
.payer-info { flex: 1; min-width: 0; }
.payer-name { font-weight: 700; overflow-wrap: anywhere; }
.payer-detail { font-size: 0.85em; color: var(--text-muted); overflow-wrap: anywhere; }
.card .payer-icon { width: 44px; min-height: 44px; margin: 0; padding: 0; flex: none; background: none; color: var(--primary); border: 1px solid var(--border); }
.card .payer-icon.payer-del { color: var(--danger); }
.pd-sub { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pd-sub span { flex: 1 1 160px; min-width: 0; overflow-wrap: anywhere; }
/* Users → Who pays: one row per payer. */
.sm-payers { display: grid; gap: 8px; margin: 8px 0; }
.payer-head, .payer-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 0.8fr) 44px; gap: 8px; align-items: center; }
.payer-head { font-size: 0.7em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
.card .payer-row input[type="text"], .card .payer-row input[type="number"] { margin: 0; width: 100%; min-width: 0; }
.payer-row.asaas { display: flex; flex-wrap: wrap; align-items: center; }
.payer-field { display: block; min-width: 0; margin: 0; }
.payer-cap { display: none; font-size: 0.7em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
.payer-row.asaas .payer-label-box { flex: 1 1 160px; min-width: 0; }
.payer-row.asaas .payer-sub { flex: 1 1 100%; order: 3; font-size: 0.85em; color: var(--text-muted); overflow-wrap: anywhere; }
.card .payer-row .st-btn { width: auto; margin: 0; flex: none; }
.card .payer-remove { width: 44px; min-height: 44px; margin: 0; padding: 0; background: none; color: var(--danger); border: 1px solid var(--border); }
.card .sm-add-payer.st-btn { width: auto; margin: 4px 0 0; }
@media (max-width: 520px) { .payer-head { display: none; } .payer-cap { display: block; } .payer-row:not(.asaas) .payer-label-box { grid-column: 1 / -1; } .payer-row:not(.asaas) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px; align-items: end; } }
.asaas-pick-row.is-linked { opacity: 0.55; cursor: not-allowed; }
.asaas-pick-row:not(.is-linked) { cursor: pointer; }
.card button.pix-open { background: var(--outline-bg); color: var(--primary); box-shadow: inset 0 0 0 2px var(--primary); } /* a destination, so full width like Close; outlined to tell it apart */
.pix-amount { font-size: 1.6em; font-weight: 700; margin: 0 0 8px; text-align: center; color: var(--text); }
.pix-qr { display: block; width: 220px; max-width: 70%; height: auto; margin: 0 auto 12px; background: #fff; padding: 8px; border-radius: 8px; image-rendering: pixelated; }
.card input.pix-code { width: 100%; margin: 0 0 8px; padding: 12px; border: 1px solid var(--border); border-radius: 8px; box-sizing: border-box; font-family: monospace; font-size: 0.8em; }
.pay-tag { font-size: 0.7em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); border: 1px solid var(--border); border-radius: 6px; padding: 1px 6px; margin-left: 6px; vertical-align: middle; }
#pay-list, #inv-list { max-height: 50vh; text-align: left; }
.pay-how { white-space: pre-line; text-align: left; color: var(--text); }
.pay-summary { text-align: left; }
.pay-row .sm-row-info { gap: 2px; }
.pay-row.pay-click { cursor: pointer; }
.pay-chip { font-size: 0.75em; font-weight: 900; text-transform: uppercase; padding: 3px 8px; border-radius: 10px; border: 1px solid var(--primary); color: var(--primary); white-space: nowrap; }
.pay-chip[data-state="paid"] { background: var(--primary); color: var(--on-primary); }
.pay-chip[data-state="overdue"] { border-color: var(--danger); color: var(--danger); }
.pay-chip[data-state="cancelled"] { border-color: var(--border); color: var(--text-faint); text-decoration: line-through; }
.pay-chip[data-state="chargeback"] { background: var(--danger); border-color: var(--danger); color: var(--on-primary); }
.pay-chip[data-state="review"] { background: var(--accent); border-color: var(--accent); color: var(--text); }
/* Buttons in the payment rows and forms (view proof, send proof, PIX, confirm, deny, contract): compact, one line, ~32px with a mouse, 44px on touch. */
.pay-denied { color: var(--danger); font-size: 0.85em; }
.pay-side { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px 14px; }
.pay-figures { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.pay-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.pay-amount { font-weight: 700; color: var(--text); }
/* The student's own invoices: month and amount on one line, due date and state on the next, the buttons under a divider (stacked on phones, PIX first). Staff rows stay compact. */
.pay-row.pay-student { padding: 8px 0; }
.sm-row.pay-student.pay-island { padding: 12px 14px; margin: 0 0 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--card-bg, var(--bg)); } /* an invoice still to pay is its own island; paid ones stay a plain list below */
.pay-group { padding: 2px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--card-bg, var(--bg)); } /* the paid months together in one island */
.pay-student { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 0 12px; align-items: center; }
.pay-student .sm-row-info, .pay-student .pay-side, .pay-student .pay-figures { display: contents; }
.pay-student .sm-row-name { grid-column: 1; grid-row: 1; }
.pay-student .pay-amount { grid-column: 3; grid-row: 1; justify-self: end; font-size: 1.2em; }
.pay-student .pay-when { grid-column: 1 / -1; grid-row: 2; margin-top: -3px; }
.pay-student .pay-chip { grid-column: 2; grid-row: 1; justify-self: start; }
.pay-student .pay-extra { grid-column: 1 / -1; }
.pay-student .pay-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--soft-bg); }
@media (pointer: fine) { .card .pay-student .pay-actions .st-btn { min-height: 28px; padding: 0 10px; } }
.card .pay-actions .st-btn.pay-primary { background: var(--primary); color: var(--on-primary); }
@media (max-width: 520px) { .pay-student .pay-actions { flex-direction: column; } .card .pay-student .pay-actions .st-btn { width: 100%; min-height: 44px; } .pay-student .pay-actions .pay-primary { order: -1; } }
#invoices-overlay .so-toolbar select { text-transform: uppercase; font-weight: 900; font-size: 0.85em; color: var(--primary); flex: 1 1 140px; min-width: 0; }
#invoices-overlay .so-toolbar .month-step { flex: 1 1 140px; margin: 0; }
.month-step { display: flex; align-items: center; gap: 4px; margin: 8px 0; border: 1px solid var(--border); border-radius: 8px; background: var(--card-bg, var(--bg)); box-sizing: border-box; min-height: 44px; }
.month-step .ms-label { flex: 1; text-align: center; font-family: var(--font-text); }
.month-step button { width: 44px; min-height: 44px; margin: 0; padding: 0; border: 0; background: transparent; color: var(--primary); cursor: pointer; }
.month-step[aria-disabled="true"] .ms-label, .month-step[aria-disabled="true"] .ms-nav { opacity: 0.5; pointer-events: none; }
.month-step .ms-all { width: auto; min-height: 32px; margin: 0 6px 0 2px; padding: 0 10px; border: 1px solid var(--primary); border-radius: 6px; font-family: var(--font-text); font-weight: 900; font-size: 0.75em; text-transform: uppercase; }
.month-step .ms-all[aria-pressed="true"] { background: var(--primary); color: var(--on-primary); }
.card #hist-more { margin-top: 8px; }
#forgot-overlay, #reset-overlay { display: none; z-index: 1100; } /* above the login screen */
/* A quiet link right under the password field, above Log in. */
.card .login-forgot { display: block; margin: -2px 0 8px auto; width: auto; min-height: 0; padding: 4px 2px; background: none; border: none; color: var(--primary); font-size: 0.85em; font-weight: 600; text-transform: none; letter-spacing: 0; text-decoration: none; cursor: pointer; }
.card .login-forgot:hover, .card .login-forgot:focus-visible { text-decoration: underline; background: none; }
.forgot-text { margin: 0 0 6px; }
#conflicts-overlay { display: none; z-index: 1200; } /* above Time blocks, which opens it */
.conflict-list { text-align: left; display: flex; flex-direction: column; gap: 6px; max-height: 45vh; overflow-y: auto; margin: 10px 0 15px; padding: 10px; background: var(--soft-bg); border: 1px solid var(--border); border-radius: 8px; }
.conflict-list .site-check { align-items: flex-start; }
.conflict-list .site-check input { margin-top: 2px; flex: none; }
.conflict-when { font-weight: 700; }
.conflict-who { color: var(--text-muted); }
.conflict-group + .conflict-group { border-top: 1px solid var(--border); padding-top: 8px; }
.conflict-classes { list-style: none; margin: 4px 0 0 26px; padding: 0; font-size: 0.9em; display: grid; gap: 2px; }
.conflict-free { margin: 4px 0 0; font-size: 0.9em; color: var(--text-muted); }
.blk-tag { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; padding: 1px 7px; border-radius: 99px; background: var(--outline-bg); color: var(--primary); border: 1px solid var(--primary); font-size: 0.75em; font-weight: 900; text-transform: uppercase; vertical-align: middle; }
#site-overlay { display: none; }
#region-setup-overlay { display: none; z-index: 1500; }
#contract-overlay { display: none; z-index: 1500; }
#contract-warning-overlay { display: none; }
.contract-text { font-size: 1.05em; line-height: 1.5; color: var(--primary); font-weight: 700; margin: 0 0 18px; }
.contract-whatsapp { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px; border-radius: 8px; background: var(--primary); color: var(--on-primary); font-weight: 900; text-transform: uppercase; text-decoration: none; box-sizing: border-box; }
.contract-whatsapp:hover { background: var(--primary-hover); }
/* Own dialog (alert/confirm/prompt replacement): above every other pop-up. */
#ui-dialog { display: none; z-index: 2000; }
.card.ui-dialog-card { max-width: 440px; display: grid; gap: 14px; text-align: left; padding: 28px; }
#ui-dialog-text { margin: 0; white-space: pre-line; color: var(--text); font-size: 1em; line-height: 1.5; }
.ui-dialog-actions { display: flex; flex-wrap: wrap-reverse; justify-content: flex-end; gap: 8px; }
.card .ui-dialog-actions button { width: auto; margin: 0; padding: 10px 18px; }
.card .ui-dialog-actions button.ui-danger { background: var(--danger); color: #fff; }
.card #ui-dialog-input { margin: 0; }
/* --- Style panel --- */
/* --- Site settings panel (admin-only; Appearance holds the Style controls below) --- */
.card.site-card { max-width: 1120px; text-align: left; }
.site-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; }
.site-head .sm-header { margin: 0; }
.card .site-close { width: auto; margin: 0; padding: 8px 14px; background: var(--outline-bg); color: var(--primary); border: 1px solid var(--primary); }
.site-body { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; align-items: start; }
.site-body > * { min-width: 0; }
.site-nav { display: grid; gap: 4px; position: sticky; top: 0; }
.card .site-nav button { display: flex; align-items: center; gap: 10px; width: 100%; margin: 0; padding: 10px 12px; border-radius: 9px; background: none; color: var(--text); text-align: left; text-transform: uppercase; letter-spacing: 0.03em; font-weight: 900; font-size: 0.8em; }
.card .site-nav button i { width: 18px; text-align: center; color: var(--primary); }
.card .site-nav button[aria-selected="true"] { background: var(--outline-bg); color: var(--primary); }
.site-nav .site-dot { margin-left: auto; width: 9px; height: 9px; border-radius: 50%; background: var(--danger); flex-shrink: 0; }
.site-soon { font-size: 0.7em; font-weight: 700; color: var(--text-muted); border: 1px solid var(--border); border-radius: 4px; padding: 0 5px; }
.site-nav .site-soon { margin-left: auto; }
@media (max-width: 760px) {
    .site-body { grid-template-columns: 1fr; }
    .site-nav { display: flex; overflow-x: auto; position: static; padding-bottom: 4px; }
    .card .site-nav button { width: auto; flex: 0 0 auto; }
}
.site-sec { display: grid; gap: 16px; }
.site-sec-title { margin: 0; font-size: 1.1em; font-weight: 900; letter-spacing: 0.04em; color: var(--primary); text-transform: uppercase; }
.card .site-reset { float: right; width: auto; margin: 0; padding: 0; background: none; color: var(--primary); text-decoration: underline; text-transform: none; font-weight: 600; font-size: 1em; letter-spacing: 0; }
.site-note { margin: 0; background: var(--outline-bg); color: var(--primary); border: 1px solid var(--primary); border-radius: 8px; padding: 9px 12px; font-size: 0.88em; }
.site-plan-big { margin: 0; font-size: 1.15em; font-weight: 700; }
.site-meter { height: 12px; max-width: 420px; border-radius: 99px; background: var(--outline-bg); overflow: hidden; }
.site-meter span { display: block; height: 100%; width: 0; background: var(--primary); }
.st-dirty { background: var(--outline-bg); color: var(--primary); border: 1px solid var(--primary); border-radius: 8px; padding: 8px 12px; font-size: 0.85em; font-weight: 700; margin-bottom: 14px; }
.st-layout { display: grid; gap: 16px; }
.st-controls { display: grid; gap: 16px; min-width: 0; }
.st-sect { display: grid; gap: 10px; border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; }
.st-sect h4 { margin: 0; font-size: 0.85em; font-weight: 900; letter-spacing: 0.04em; text-transform: uppercase; color: var(--primary); }
.st-hint { margin: 0; font-size: 0.8em; color: var(--text-muted); }
.form-grid .st-hint { display: block; margin-top: 3px; }
/* Language dropdown (login screen and calendar header, when the school lets people choose): the current flag
   opens a list of flags. The chosen one is outlined; the school's own language has a colored background. */
.lang-dd { position: relative; display: inline-block; }
.lang-dd-login { display: flex; justify-content: flex-end; margin: 0 0 6px; }
.lang-dd-btn { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.card .lang-dd .lang-dd-btn { width: auto; margin: 0; padding: 4px 8px; min-height: 36px; background: var(--surface); color: var(--primary); border: 1px solid var(--border); border-radius: 8px; }
.lang-dd-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 60; display: flex; flex-direction: column; gap: 4px; padding: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 6px 18px color-mix(in srgb, var(--text) 18%, transparent); }
.lang-dd .lang-dd-opt { width: auto; margin: 0; padding: 5px; min-height: 0; line-height: 0; background: transparent; border: 2px solid transparent; border-radius: 6px; cursor: pointer; }
.lang-dd .lang-dd-opt:hover { background: var(--soft-bg); }
.lang-dd .lang-dd-opt.school { background: color-mix(in srgb, var(--accent) 55%, transparent); }
.lang-dd .lang-dd-opt[aria-selected="true"] { border-color: var(--primary); }
.lang-flag-img { width: 30px; height: 22px; display: block; border-radius: 3px; box-shadow: 0 0 0 1px var(--border); }
/* With no logo, the site name stands in for it (see applyLogo) */
.site-logo-text { font-family: var(--font-site-name); color: var(--primary); font-weight: 700; font-size: 2.2em; line-height: 1.1; }
a.header-btn { text-decoration: none; gap: 6px; }
/* Student color (Users form): picker, hex field and a random-color button */
.color-field { display: flex; gap: 8px; align-items: center; margin: 8px 0; }
.card .color-field input[type="color"] { width: 52px; height: 44px; padding: 2px; margin: 0; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); cursor: pointer; flex-shrink: 0; }
.card .color-field input[type="text"] { flex: 1; margin: 0; }
.card .color-field .color-random { width: auto; margin: 0; padding: 0 16px; min-height: 44px; }
.site-check { display: flex; align-items: center; gap: 8px; cursor: pointer; text-transform: none; font-size: 0.95em; }
.site-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--primary); }
.texts-toolbar { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 12px 0; }
.texts-toolbar label { display: flex; align-items: center; gap: 6px; margin: 0; }
.card .texts-toolbar select { width: auto; margin: 0; }
.card .texts-toolbar input { flex: 1; width: auto; min-width: 160px; margin: 0; }
.texts-group { border: 1px solid var(--border); border-radius: 8px; margin-bottom: 8px; background: var(--surface); }
.texts-group > summary { cursor: pointer; padding: 10px 12px; font-weight: 900; font-size: 0.85em; letter-spacing: 0.04em; color: var(--primary); text-transform: uppercase; }
.texts-row { padding: 6px 12px 10px; border-top: 1px solid var(--soft-bg); }
.texts-row label { display: flex; justify-content: space-between; gap: 8px; font-weight: 400; color: var(--text-muted); font-size: 0.85em; margin-bottom: 4px; text-transform: none; }
.texts-row.changed label { color: var(--primary); font-weight: 700; }
.card .texts-row input { margin: 0; }
.st-warn-text { color: #9a4a00; }
.st-logo-previews { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.st-logo-box { border: 1px solid var(--border); border-radius: 10px; padding: 10px; display: grid; gap: 6px; justify-items: center; }
.st-logo-box img { max-height: 56px; max-width: 100%; }
.st-logo-box span { font-size: 0.7em; color: var(--text-muted); }
.st-row-buttons { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
/* The slim button: every button that is not a main action (confirm, delete or close the window) looks like this. */
.card .st-btn { width: auto; margin: 0; min-height: 32px; padding: 0 12px; font-size: 0.72em; font-weight: 700; letter-spacing: 0.04em; border-radius: 6px; white-space: nowrap; background: var(--outline-bg); color: var(--primary); border: 1px solid var(--primary); }
@media (pointer: coarse) { .card .st-btn { min-height: 44px; } }
.card .st-actions .st-btn { padding: 0 12px; }
/* A slim button on a line of its own, centered in the window. */
.card .st-btn.st-stack { display: block; margin: 10px auto 0; }
.card .st-btn.st-danger { background: var(--danger); color: #fff; border-color: var(--danger); }
/* A contract PDF (General → Contracts, Users form): its name, then View / Add / Remove. */
.contract-file { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; }
.contract-file-name { font-size: 0.9em; color: var(--text); overflow-wrap: anywhere; margin-right: 4px; }
.card .contract-warning-hide { justify-content: center; margin: -6px 0 22px; } /* under the message, apart from the buttons */
.st-themes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 480px) { .st-themes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.card .st-theme { position: relative; width: 100%; margin: 0; padding: 6px; background: var(--surface); color: var(--text); border: 2px solid var(--border); border-radius: 10px; display: grid; gap: 5px; text-align: left; font-weight: 700; font-size: 0.75em; text-transform: none; }
.card .st-theme[aria-checked="true"] { border-color: var(--primary); box-shadow: 0 0 0 2px var(--outline-bg); }
.st-theme .st-check { position: absolute; top: -8px; right: -8px; width: 20px; height: 20px; border-radius: 50%; background: var(--primary); color: var(--on-primary); display: none; align-items: center; justify-content: center; font-size: 12px; }
.st-theme[aria-checked="true"] .st-check { display: flex; }
.st-swatch { height: 30px; border-radius: 6px; display: grid; grid-template-columns: 2fr 1fr 1fr; overflow: hidden; border: 1px solid rgba(0,0,0,0.08); }
.st-fonts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.st-fonts .st-wide { grid-column: 1 / -1; }
@media (max-width: 480px) { .st-fonts { grid-template-columns: 1fr; } }
.st-fonts label { display: grid; gap: 4px; font-size: 0.75em; font-weight: 700; color: var(--primary); text-transform: uppercase; }
.card .st-fonts select { margin: 0; text-transform: none; font-size: 1.2em; }
.st-warnings { display: grid; gap: 6px; }
.st-warning { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: #fff4e5; color: #8a4b00; border: 1px solid #f3cf9a; border-radius: 8px; padding: 7px 10px; font-size: 0.85em; }
.card .st-warning button { width: auto; margin: 0; padding: 5px 10px; font-size: 0.8em; background: #8a4b00; color: #fff; }
/* "Advanced: individual colors" opens like a button, styled like Upload logo / Remove logo. */
.st-advanced { border: none; padding: 0; }
.st-advanced summary { cursor: pointer; display: inline-flex; align-items: center; gap: 8px; list-style: none; padding: 8px 12px; font-size: 0.8em; font-weight: 900; text-transform: uppercase; color: var(--primary); background: var(--outline-bg); border: 1px solid var(--primary); border-radius: 8px; }
.st-advanced summary::-webkit-details-marker { display: none; }
.st-advanced summary::before { content: "\25B8"; transition: transform 0.2s; }
.st-advanced[open] summary::before { transform: rotate(90deg); }
.st-advanced[open] summary { margin-bottom: 10px; }
.st-adv-group { display: grid; gap: 6px; margin-bottom: 12px; }
.st-adv-group h5 { margin: 4px 0 0; font-size: 0.72em; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); }
.st-adv-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px; font-size: 0.85em; }
.st-adv-row .st-changed { color: var(--primary); font-weight: 700; }
.card .st-adv-row button { width: auto; margin: 0; padding: 3px 8px; font-size: 0.75em; background: var(--outline-bg); color: var(--primary); text-transform: none; }
.st-adv-row input[type="color"] { width: 44px; height: 30px; padding: 0; border: 1px solid var(--border); border-radius: 6px; background: none; cursor: pointer; }
/* The preview sits above the controls and stays in view while they scroll (wide screens): header on the left, calendar on the right. */
.st-preview { border: 1px solid var(--border); border-radius: 12px; background: var(--page-bg); padding: 12px; display: grid; gap: 10px 16px; min-width: 0; position: sticky; top: 0; z-index: 3; box-shadow: 0 6px 14px color-mix(in srgb, var(--text) 12%, transparent);
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); grid-template-areas: "head cal" "sep cal" "boxes cal"; align-items: center; }
.st-pv-head { grid-area: head; } .st-pv-sep { grid-area: sep; } .st-pv-cal { grid-area: cal; } .st-pv-boxes { grid-area: boxes; }
@media (max-width: 860px) { .st-preview { position: static; box-shadow: none; grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "sep" "cal" "boxes"; } }
.st-pv-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.st-pv-head img { max-height: 44px; max-width: 45%; }
.st-pv-head .header-btn { height: 30px; font-size: 0.7em; padding: 0 10px; }
.st-pv-sep { margin: 4px 0; }
.st-pv-sep span { font-size: 1.8em; }
.st-pv-cal { background: var(--surface); border: 1px solid var(--accent); border-radius: 10px; padding: 8px; display: grid; gap: 8px; }
.st-pv-bar { display: flex; justify-content: space-between; align-items: center; gap: 6px; flex-wrap: wrap; }
.st-pv-nav { background: var(--cal-header-bg); color: var(--cal-header-text); border-radius: 6px; padding: 3px 8px; font-size: 0.7em; font-weight: 900; }
.st-pv-week { font-family: var(--font-week); font-size: 1.1em; font-weight: 700; color: var(--cal-title); background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 2px 10px; }
.st-pv-clock { background: var(--primary); color: var(--on-primary); border-radius: 6px; padding: 3px 8px; font-size: 0.7em; font-weight: 900; }
.st-pv-grid { display: grid; grid-template-columns: 56px repeat(4, minmax(0, 1fr)); font-size: 0.68em; }
.st-pv-grid > span { border: 1px solid var(--cal-grid); min-height: 38px; display: flex; align-items: center; justify-content: center; padding: 2px; }
.st-pv-h { background: var(--cal-header-bg); color: var(--cal-header-text); font-weight: 900; text-transform: uppercase; min-height: 24px !important; }
.st-pv-h.blocked-day { color: var(--cal-closed-text); }
.st-pv-slot { background: var(--cal-header-bg); color: var(--cal-header-text); font-weight: 900; border-bottom-color: var(--cal-slot-border) !important; }
.st-pv-closed { background: var(--cal-closed-bg); }
.st-pv-today { background: color-mix(in srgb, var(--cal-today) 30%, var(--surface)); }
/* A student's own classes, when Appearance turns the highlight on: a ring in the accent color. */
.highlight-own .fc-event.own-class, .highlight-own .st-pv-tile.pv-own { box-shadow: inset 0 0 0 3px var(--accent); }
.st-pv-tile { display: block; width: 100%; font-style: normal; border-radius: 7px; color: var(--tile-text); font-weight: 900; text-transform: uppercase; text-align: center; padding: 6px 2px; }
.st-preview .status-box { padding: 7px 10px; font-size: 0.65em; }
.st-discard { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--outline-bg); border: 1px solid var(--primary); color: var(--primary); border-radius: 8px; padding: 10px 12px; margin-top: 14px; font-weight: 700; font-size: 0.9em; }
.st-saved { margin: 14px 0 0; color: var(--primary); font-weight: 700; font-size: 0.9em; }
.st-saved button { background: none; border: none; color: var(--primary); text-decoration: underline; font: inherit; cursor: pointer; padding: 0 4px; }
.st-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.card .st-actions button { width: auto; margin: 0; padding: 10px 16px; }

.header-btns { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
@media (min-width: 1100px) { .header-btns { flex-wrap: nowrap; flex: 0 0 auto; } } /* wide screens: one line */

.header-btn {
    display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 15px;
    border-radius: 8px; font-family: var(--font-text); font-weight: 900; font-size: 0.85em;
    text-transform: uppercase; box-sizing: border-box; margin: 0; cursor: pointer; white-space: nowrap;
    transition: background-color 0.3s, border-color 0.3s, color 0.3s; border: 2px solid transparent; 
}

.header-btn.solid { background-color: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.header-btn.solid:hover { background-color: var(--primary-hover); border-color: var(--primary-hover); }

.header-btn.outline { background-color: var(--outline-bg); color: var(--primary); border-color: var(--primary); }
.header-btn.outline:hover { background-color: var(--border); }
.header-btn.outline.active { background-color: var(--primary); color: var(--on-primary); }

#rpc-code-display { cursor: pointer; box-shadow: 0 2px 5px color-mix(in srgb, var(--primary) 10%, transparent); display: none; transition: all 0.3s ease; }
#teacher-toggle { display: none; }

#teacher-selector {
    display: none; height: 40px; padding: 0 15px; border-radius: 8px; 
    font-family: var(--font-text); font-weight: 900; font-size: 0.85em; 
    text-transform: uppercase; border: 2px solid var(--primary); color: var(--primary); 
    background: var(--soft-bg); cursor: pointer; outline: none; margin-right: auto; max-width: 260px;
}

.footer-container { max-width: 1200px; margin: 20px auto 0; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px; } /* same edges as the calendar */
.status-container { display: flex; gap: 10px; flex-wrap: wrap; }
#admin-teacher-footer .status-box { flex: 1 1 auto; } /* a wrapped row of staff buttons fills its width */

.status-box { 
    background-color: var(--primary); color: var(--on-primary); padding: 10px 20px; border-radius: 8px; 
    font-weight: 900; text-transform: uppercase; font-size: 0.8em; display: flex; 
    align-items: center; justify-content: center; white-space: nowrap; cursor: pointer;
    transition: transform 0.2s;
}
.status-box:hover { transform: translateY(-2px); }

.icon-footer { display: flex; gap: 15px; justify-content: flex-end;}
div.icon-footer a.icon-btn { width: 50px; height: 50px; background-color: var(--primary); color: var(--on-primary); display: flex; align-items: center; justify-content: center; border-radius: 10px; text-decoration: none; transition: 0.3s; font-size: 1.4em; border: none !important; }
div.icon-footer a.icon-btn:hover { background-color: var(--primary-hover); transform: translateY(-3px); }

/* CALENDAR THEME */

/* OVERRIDE YELLOW TODAY HIGHLIGHT WITH SOFT PINK */
.fc-day-today { background-color: color-mix(in srgb, var(--cal-today) 30%, transparent) !important; }

@media (max-width: 768px) {
    body { margin: 10px; }
    .calendar-instance { padding: 10px; }
    .form-grid { grid-template-columns: 1fr; }
    .form-grid .full-width { grid-column: span 1; }
}

.fc-button-primary { background-color: var(--cal-header-bg) !important; border-color: var(--cal-header-bg) !important; color: var(--cal-header-text) !important; font-weight: 900 !important; border-radius: 8px !important; text-transform: uppercase;}
.fc-col-header-cell { background-color: var(--cal-header-bg) !important; }
.fc-col-header-cell-cushion { color: var(--cal-header-text) !important; font-weight: 900 !important; text-transform: uppercase; text-decoration: none !important; }

.fc-timegrid-slot-label { background-color: var(--cal-header-bg) !important; border-bottom: 1px solid var(--cal-slot-border) !important; }
.fc-timegrid-slot-label-cushion { color: var(--cal-header-text) !important; font-weight: 900 !important; text-transform: uppercase; font-size: 0.85em; pointer-events: none; }

.fc-theme-standard .fc-scrollgrid { border: none !important; }
.fc-theme-standard td, .fc-theme-standard th { border: 1px solid var(--cal-grid) !important; }

.fc-v-event { border: none !important; border-radius: 12px !important; cursor: pointer; margin: 5px 2px !important; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.fc-event-main { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; height: 100% !important; color: var(--tile-text) !important; text-align: center !important; padding: 5px !important; box-sizing: border-box !important; }
.fc-timegrid-slot { height: 80px !important; }

.blocked-day { background-color: var(--cal-closed-bg) !important; }
.blocked-day .fc-col-header-cell-cushion { color: var(--cal-closed-text) !important; }