:root {
  --bg: #f4efe6;
  --surface: rgba(255, 252, 247, 0.9);
  --surface-strong: #fffdf9;
  --surface-soft: rgba(255, 248, 239, 0.94);
  --ink: #1e2432;
  --muted: #677085;
  --line: rgba(30, 36, 50, 0.1);
  --primary: #c66a3d;
  --primary-deep: #9e4f28;
  --blue: #356a92;
  --teal: #2b7c70;
  --shadow-soft: 0 18px 36px rgba(66, 44, 16, 0.12);
  --radius-lg: 28px;
  --radius-md: 20px;
  --radius-sm: 14px;
  --toolbar-height: 94px;
}

/* Direction artistique 2026 — bureau doux et contemporain */
:root {
  --bg: #f8f7f4;
  --surface: #ffffff;
  --surface-strong: #ffffff;
  --surface-soft: #efeee9;
  --ink: #29282d;
  --muted: #706e75;
  --line: #e4e2dd;
  --primary: #7567a8;
  --primary-deep: #61548f;
  --blue: #6686a0;
  --teal: #718f7a;
  --shadow-soft: 0 2px 10px rgba(41, 40, 45, 0.05);
  --radius-lg: 12px;
  --radius-md: 10px;
  --radius-sm: 8px;
  --toolbar-height: 0px;
}

body {
  padding: 0 0 48px 232px;
  color: var(--ink);
  font-family: "Inter", sans-serif;
  font-size: 14px;
  line-height: 1.55;
  background: var(--bg);
}

.page-shell {
  width: min(1180px, calc(100% - 48px));
  padding: 28px 0 48px;
}

.hero,
.panel {
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: none;
  backdrop-filter: none;
}

.hero {
  padding: 20px 22px;
  border-radius: var(--radius-lg);
}

.hero h1,
.panel h2,
.item-title,
.student-level-heading h3,
.student-card h4,
.programmation-heading h3,
.programmation-card-summary strong {
  font-family: "Inter", sans-serif;
  letter-spacing: -0.02em;
}

.hero h1 {
  font-size: 26px;
  font-weight: 600;
  line-height: 1.2;
}

.panel h2 {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.25;
}

.hero-text {
  margin-top: 8px;
  font-size: 14px;
}

.hero-meta {
  margin-top: 8px;
  color: var(--primary);
  font-weight: 500;
}

.eyebrow {
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
}

.panel {
  padding: 22px;
  border-radius: var(--radius-lg);
}

.panel-highlight {
  background: var(--surface);
}

.stat-card,
.group-card,
.list-item,
.day-column,
.slot-card,
.empty-state,
.student-card,
.programmation-card,
.student-form-section,
.settings-block,
.settings-card {
  border-color: var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: none;
}

.student-card:hover,
.programmation-card:hover {
  border-color: #c9c4d9;
  box-shadow: var(--shadow-soft);
  transform: none;
}

input,
select,
textarea {
  border-color: var(--line);
  border-radius: 8px;
  background: #fff;
}

input:focus,
select:focus,
textarea:focus {
  outline-color: rgba(117, 103, 168, 0.2);
  border-color: var(--primary);
}

.button {
  min-height: 42px;
  border-radius: 8px;
  box-shadow: none;
  font-weight: 600;
}

.primary {
  background: var(--primary);
  color: #fff;
}

.secondary {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
}

.bottom-toolbar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 20;
  display: flex;
  width: 232px;
  min-height: 100vh;
  padding: 24px 14px 110px;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
  border: 0;
  border-right: 1px solid var(--line);
  border-radius: 0;
  background: #efeee9;
  box-shadow: none;
  backdrop-filter: none;
}

.bottom-toolbar::before {
  content: "CartableKini";
  display: block;
  margin: 0 8px 22px;
  color: var(--ink);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.toolbar-tab {
  width: 100%;
  min-height: 42px;
  padding: 9px 11px;
  flex: 0 0 auto;
  flex-direction: row;
  justify-content: flex-start;
  gap: 11px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #5f5d64;
  text-align: left;
}

.toolbar-tab:hover {
  background: rgba(117, 103, 168, 0.08);
  color: var(--ink);
}

.toolbar-tab.active {
  border: 0;
  background: #eeeaf7;
  color: #61548f;
}

.toolbar-icon {
  width: 20px;
  color: currentColor;
  font-size: 19px;
  font-weight: 400;
  text-align: center;
}

.toolbar-label {
  font-size: 13px;
  font-weight: 500;
}

.nav-organisation {
  margin-top: 10px;
  border-top: 1px solid #dedcd6;
  padding-top: 10px;
}

.nav-organisation summary {
  display: flex;
  min-height: 40px;
  padding: 9px 11px;
  align-items: center;
  justify-content: space-between;
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  list-style: none;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.nav-organisation summary::-webkit-details-marker { display: none; }
.nav-organisation-items { display: grid; gap: 3px; }

.fab {
  width: 42px;
  height: 42px;
  bottom: 18px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--muted);
  box-shadow: var(--shadow-soft);
}

.settings-fab { left: 174px; right: auto; }
.drive-fab { left: 122px; }
.fab-badge { display: none; }

.icon-pill {
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  box-shadow: none;
}

.icon-pill-add { background: var(--primary); color: #fff; }
.icon-pill-close { background: #f3e8e8; color: #9d555d; }
.icon-pill-open,
.icon-pill-new,
.icon-pill-save { background: #eeeaf7; color: var(--primary-deep); }

.action-pill { box-shadow: none; }
.item-actions .action-pill-edit, .action-pill-edit { background: #6686a0; }
.item-actions .action-pill-delete, .action-pill-delete { background: #b77b82; }
.item-actions .action-pill-add, .action-pill-add { background: #718f7a; }

#view-agenda .eyebrow { color: #7567a8; }
#view-journal .eyebrow, #view-journal-entry-editor .eyebrow { color: #6686a0; }
#view-programmations .eyebrow { color: #718f7a; }
#view-students .eyebrow, #view-student-editor .eyebrow { color: #b78a59; }
#view-meetings .eyebrow { color: #b77b82; }
#view-apc .eyebrow { color: #b97963; }

.type-parent { background: #f3e8e9; color: #8f5960; }
.type-meeting { background: #eeeaf7; color: #61548f; }
.type-outing { background: #e5f0f0; color: #407779; }
.type-apc { background: #f4e9e5; color: #935d49; }
.type-school { background: #f2ede6; color: #866847; }

@media (max-width: 900px) {
  :root { --toolbar-height: 82px; }

  body {
    padding: 0 0 calc(var(--toolbar-height) + 30px + env(safe-area-inset-bottom, 0px));
  }

  .page-shell {
    width: min(100%, calc(100% - 20px));
    padding-top: 18px;
  }

  .bottom-toolbar {
    inset: auto 0 0;
    display: flex;
    width: 100vw;
    min-height: var(--toolbar-height);
    padding: 7px 8px calc(7px + env(safe-area-inset-bottom, 0px));
    flex-direction: row;
    gap: 4px;
    overflow-x: auto;
    overflow-y: hidden;
    border-top: 1px solid var(--line);
    border-right: 0;
    background: rgba(248, 247, 244, 0.97);
  }

  .bottom-toolbar::before { display: none; }

  .toolbar-tab {
    width: auto;
    min-width: 82px;
    min-height: 62px;
    padding: 7px 8px;
    flex: 0 0 82px;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    text-align: center;
  }

  .toolbar-label { font-size: 11px; }
  .toolbar-icon { font-size: 17px; }

  .nav-organisation { display: contents; }
  .nav-organisation summary { display: none; }
  .nav-organisation-items { display: contents; }

  .fab {
    bottom: calc(var(--toolbar-height) + 10px + env(safe-area-inset-bottom, 0px));
  }
  .drive-fab { left: 10px; }
  .settings-fab { left: auto; right: 10px; }

  .hero { padding: 17px; }
  .panel { padding: 17px; }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  padding-bottom: calc(var(--toolbar-height) + 96px + env(safe-area-inset-bottom, 0px));
  color: var(--ink);
  font-family: "Manrope", sans-serif;
  background:
    radial-gradient(circle at top left, rgba(208, 154, 49, 0.22), transparent 32%),
    radial-gradient(circle at top right, rgba(53, 106, 146, 0.2), transparent 24%),
    linear-gradient(180deg, #f8f4ea 0%, var(--bg) 100%);
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  appearance: none;
}

.page-shell {
  width: min(1200px, calc(100% - 32px));
  margin: 0 auto;
  padding: 32px 0 40px;
}

.hero,
.panel {
  backdrop-filter: blur(10px);
  background: var(--surface);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: var(--shadow-soft);
}

.hero {
  padding: 28px;
  border-radius: var(--radius-lg);
}

.hero h1,
.panel h2,
.item-title {
  margin: 0;
  font-family: "Fraunces", serif;
  letter-spacing: -0.03em;
}

.hero h1 {
  font-size: clamp(2.2rem, 4vw, 4rem);
  line-height: 0.95;
}

.eyebrow,
.hero-text,
.hero-meta,
.current-date,
.list-meta,
.list-notes,
label,
.empty-state,
.item-actions button {
  color: var(--muted);
}

.eyebrow {
  margin: 0 0 8px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.72rem;
  font-weight: 800;
}

.hero-meta {
  margin: 14px 0 0;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--blue);
}

.hero-text {
  max-width: 62ch;
  margin: 12px 0 0;
  font-size: 1.05rem;
}

.tab {
  padding: 0.72rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  background: rgba(62, 69, 79, 0.56);
  color: #d9dde3;
  box-shadow: none;
  font-weight: 700;
  cursor: pointer;
}

.tab.active {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(96, 107, 121, 0.72);
  color: #fff;
}

.view {
  display: none;
}

.view.active {
  display: block;
}

.bottom-toolbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  display: flex;
  gap: 0.28rem;
  width: 100vw;
  min-height: var(--toolbar-height);
  padding:
    0.4rem
    0.45rem
    calc(env(safe-area-inset-bottom, 0px) + 0.4rem)
    0.45rem;
  overflow-x: auto;
  scrollbar-width: none;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px 24px 0 0;
  background: linear-gradient(180deg, rgba(40, 45, 53, 0.96), rgba(24, 28, 35, 0.98));
  box-shadow:
    0 22px 42px rgba(6, 8, 12, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(20px);
}

.bottom-toolbar::-webkit-scrollbar {
  display: none;
}

.toolbar-tab {
  flex: 1 0 110px;
  min-height: 78px;
  padding: 0.42rem 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.28rem;
  text-align: center;
  white-space: normal;
}

.toolbar-icon {
  font-size: 1.22rem;
  line-height: 1;
}

.toolbar-label {
  font-size: 0.76rem;
  line-height: 1.05;
  display: block;
}

.stack,
.list-stack,
.grouped-list,
.group-items {
  display: grid;
  gap: 0.9rem;
}

.student-level-list {
  display: grid;
  gap: 1.5rem;
}

.journal-navigation {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
  padding: 0.85rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(255, 250, 243, 0.72);
}

.journal-arrow {
  width: 48px;
  height: 48px;
  color: var(--blue);
  background: #dbeeff;
}

.journal-current-day {
  display: grid;
  justify-items: center;
  gap: 0.4rem;
  text-align: center;
}

.journal-mode-control {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.journal-mode-control select {
  width: auto;
  min-width: 118px;
  padding: 0.48rem 2rem 0.48rem 0.7rem;
  border-radius: 999px;
  background-color: var(--surface-strong);
}

.journal-current-day .eyebrow {
  margin: 0;
}

.journal-current-day strong {
  font-family: "Fraunces", serif;
  font-size: 1.15rem;
}

.journal-current-day small {
  color: var(--muted);
}

.journal-swipe-area {
  touch-action: pan-y;
}

.journal-school-context {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.8rem;
  margin: 0.45rem 0 0;
}

.journal-school-context strong {
  color: var(--blue);
}

.journal-school-context span {
  color: var(--muted);
}

.journal-slot-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
}

.journal-slot-row {
  display: grid;
  grid-template-columns: repeat(var(--journal-slot-count), minmax(0, 1fr));
  gap: 0.8rem;
  width: 100%;
}

.journal-week-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0.9rem;
}

.journal-week-subject-card {
  min-height: 145px;
}

.journal-week-subject-card .journal-entry-details {
  grid-row: 3;
}

.journal-week-subject-card .journal-slot-open small {
  grid-row: 3;
}

.journal-week-add-card {
  display: grid;
  min-height: 145px;
  place-items: center;
  align-content: center;
  gap: 0.5rem;
  padding: 1rem;
  border: 2px dashed color-mix(in srgb, var(--blue) 42%, transparent);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--blue) 6%, var(--surface-strong));
  color: var(--blue);
  cursor: pointer;
}

.journal-week-add-card span {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 50%;
  background: var(--blue);
  color: white;
  font-size: 1.7rem;
  line-height: 1;
}

.journal-week-add-card:hover,
.journal-week-add-card:focus-visible {
  border-color: var(--blue);
  transform: translateY(-1px);
}

.journal-week-reminders {
  margin-bottom: 1rem;
  padding: 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(255, 250, 243, 0.65);
}

.journal-notes-block {
  display: grid;
  gap: 0.55rem;
  margin-bottom: 1rem;
  padding: 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(255, 250, 243, 0.65);
}

.journal-reminder-stack .journal-notes-block { margin-bottom: 0; }
.journal-notes-block .eyebrow { margin: 0; }

.journal-notes-editor {
  box-sizing: border-box;
  width: 100%;
  min-height: 8rem;
  resize: vertical;
  line-height: 1.55;
}

.journal-slot-card {
  position: relative;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-strong);
  color: var(--ink);
  text-align: left;
  box-shadow: 0 7px 16px rgba(66, 44, 16, 0.06);
}

.journal-slot-open {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.25rem 0.8rem;
  align-items: center;
  width: 100%;
  min-height: 6.5rem;
  padding: 1rem 3.7rem 1rem 1rem;
  border: 0;
  border-radius: inherit;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.journal-slot-open strong {
  grid-row: 1;
}

.journal-slot-open .journal-slot-time {
  grid-row: 2;
}

.journal-slot-open small {
  grid-row: 4;
}

.journal-entry-details {
  display: grid;
  grid-row: 4;
  gap: 0.55rem;
  margin-top: 0.45rem;
  padding-top: 0.7rem;
  border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent);
}

.journal-entry-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.15rem;
  align-items: start;
  font-size: 0.82rem;
  line-height: 1.45;
}

.journal-entry-detail b {
  color: var(--subject-title, var(--ink));
  font-size: 0.76rem;
}

.journal-entry-detail > span {
  min-width: 0;
  color: var(--subject-text, var(--muted));
  white-space: pre-wrap;
}

.journal-entry-procedure-summary {
  display: grid;
  gap: 0.4rem;
}

.journal-entry-procedure-summary > span {
  display: grid;
  grid-template-columns: 1.45rem minmax(0, 1fr);
  gap: 0.45rem;
  align-items: start;
}

.journal-entry-procedure-summary em {
  display: grid;
  width: 1.45rem;
  height: 1.45rem;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--subject-accent, var(--page-accent)) 15%, transparent);
  color: var(--subject-title, var(--ink));
  font-size: 0.7rem;
  font-style: normal;
  font-weight: 800;
}

.journal-subject-card {
  border-color: var(--subject-border);
  background: linear-gradient(180deg, var(--subject-bg-top), var(--subject-bg-bottom));
}

.journal-subject-card .journal-slot-time,
.journal-subject-card .school-summary-arrow {
  color: var(--subject-accent);
}

.journal-subject-card strong {
  color: var(--subject-title);
}

.journal-slot-card.journal-subject-card small {
  color: var(--subject-text, var(--subject-title));
  opacity: 0.82;
}

.journal-slot-card:hover {
  border-color: rgba(53, 106, 146, 0.3);
  transform: translateY(-1px);
}

.journal-slot-open > :not(.school-summary-arrow) {
  grid-column: 1;
}

.journal-slot-card .school-summary-arrow {
  grid-column: 2;
  grid-row: 1 / -1;
  align-self: center;
}

.journal-slot-delete {
  position: absolute;
  top: calc(50% + 1.2rem);
  right: 0.8rem;
  z-index: 2;
  transform: translateY(-50%);
  transition: transform 110ms ease, box-shadow 110ms ease, filter 110ms ease;
}

body #view-journal .journal-slot-delete:hover,
body #view-journal .journal-slot-delete:focus-visible {
  transform: translateY(-50%) scale(1.025);
}

body #view-journal .journal-slot-delete:active {
  transform: translateY(-50%) scale(0.97);
}

.journal-slot-time {
  color: var(--primary-deep);
  font-size: 0.8rem;
  font-weight: 800;
}

.journal-slot-card strong {
  font-family: "Fraunces", serif;
  font-size: 1.05rem;
}

.journal-slot-card small {
  color: var(--muted);
}

.journal-add-slot,
.journal-bottom-save {
  justify-content: flex-end;
  margin-top: 1rem;
}

.journal-entry-levels-field,
.journal-procedure-field {
  display: grid;
  gap: 0.75rem;
  min-width: 0;
  margin: 0;
  padding: 0.9rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 250, 243, 0.55);
}

#journal-entry-form label[hidden] {
  display: none !important;
}

#journal-entry-programmation-field[hidden],
#journal-entry-week-notions-field[hidden] {
  display: none !important;
}

.journal-programmation-picker {
  position: relative;
  display: grid;
  gap: 0.55rem;
}

.journal-programmation-trigger {
  width: 100%;
  justify-content: space-between;
  text-align: left;
}

.journal-programmation-option {
  display: grid;
  gap: 0.2rem;
  width: 100%;
  padding: 0.75rem 0.85rem;
  border: 1px solid transparent;
  border-radius: 12px;
  color: var(--ink);
  text-align: left;
  background: transparent;
  cursor: pointer;
}

.journal-programmation-option:hover,
.journal-programmation-option.is-selected {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, transparent);
}

.journal-programmation-option span {
  color: var(--muted);
  font-size: 0.78rem;
}

.journal-programmation-picker-dialog {
  width: min(920px, 100%);
  max-height: min(88vh, 900px);
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
}

#journal-programmation-picker-body {
  min-height: 0;
  padding-right: 0.25rem;
  overflow-y: auto;
}

.journal-programmation-picker-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0.65rem;
}

.journal-programmation-picker-list .journal-programmation-option {
  border-color: var(--line);
  background: var(--surface-strong);
}

.journal-picker-programmation-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.9rem;
}

.journal-picker-programmation-heading > div {
  display: grid;
  gap: 0.2rem;
}

.journal-picker-programmation-heading small {
  color: var(--muted);
}

.journal-selected-notions {
  display: grid;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.journal-selected-notions li {
  position: relative;
  padding: 0.65rem 0.75rem 0.65rem 1.7rem;
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--line));
  border-radius: 12px;
  background: color-mix(in srgb, var(--primary) 6%, var(--surface-strong));
}

.journal-selected-notions li::before {
  position: absolute;
  top: 0.72rem;
  left: 0.72rem;
  color: var(--primary);
  content: "✓";
  font-weight: 800;
}

.journal-notion-periods {
  display: grid;
  gap: 0.8rem;
}

.journal-notion-period {
  display: grid;
  gap: 0.6rem;
  padding: 0.75rem;
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--line));
  border-radius: 14px;
  background: color-mix(in srgb, var(--primary) 4%, var(--surface-strong));
}

.journal-notion-period-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  color: var(--primary);
}

.journal-notion-period-heading span {
  display: grid;
  min-width: 1.7rem;
  min-height: 1.7rem;
  place-items: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  font-size: 0.75rem;
  font-weight: 700;
}

@media (max-width: 680px) {
  .journal-picker-programmation-heading {
    flex-direction: column;
  }
}

.journal-entry-levels-field legend {
  padding: 0 0.35rem;
  font-weight: 700;
}

.journal-entry-level-options {
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
}

.journal-notion-period .journal-entry-level-options {
  grid-template-columns: repeat(auto-fit, minmax(min(185px, 100%), 1fr));
  align-items: stretch;
}

.journal-notion-choice {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 5rem;
  padding: 0.8rem 2rem 0.8rem 0.8rem;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-strong);
  color: var(--ink);
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 400;
  line-height: 1.4;
  text-align: left;
  white-space: normal;
}

.journal-notion-choice span {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: normal;
}

.journal-notion-choice:hover,
.journal-notion-choice:focus-visible {
  border-color: color-mix(in srgb, var(--primary) 60%, var(--line));
  background: color-mix(in srgb, var(--primary) 7%, var(--surface-strong));
}

.journal-notion-choice.is-selected {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 13%, var(--surface-strong));
  color: var(--primary);
}

.journal-notion-choice.is-selected::after {
  position: absolute;
  top: 0.6rem;
  right: 0.65rem;
  content: "✓";
  font-size: 0.9rem;
  font-weight: 700;
}

@media (max-width: 680px) {
  .journal-notion-period .journal-entry-level-options {
    grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  }
}

.journal-procedure-list {
  display: grid;
  gap: 0.65rem;
}

.journal-procedure-row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  gap: 0.65rem;
  align-items: start;
}

.journal-procedure-number {
  display: grid;
  width: 30px;
  height: 30px;
  margin-top: 6px;
  place-items: center;
  border-radius: 50%;
  background: var(--page-tint, #e9f0f4);
  color: var(--page-accent, #6686a0);
  font-weight: 800;
}

.journal-procedure-row textarea {
  width: 100%;
  min-height: 64px;
  resize: vertical;
}

.journal-procedure-add { justify-self: start; }

.student-level-group {
  display: grid;
  gap: 0.85rem;
}

.student-level-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid var(--line);
}

.student-level-heading h3,
.student-card h4 {
  margin: 0;
  font-family: "Fraunces", serif;
}

.student-level-heading > span {
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 800;
}

.student-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 0.9rem;
}

.student-card {
  position: relative;
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  align-items: center;
  gap: 0.85rem;
  padding: 1rem 3.25rem 1rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-strong);
  transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.student-card:hover {
  border-color: rgba(53, 106, 146, 0.35);
  box-shadow: var(--shadow-soft);
  transform: translateY(-1px);
}

.student-card-open {
  position: absolute;
  inset: 0;
  z-index: 1;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
  cursor: pointer;
}

.student-card-open:focus-visible {
  outline: 3px solid rgba(53, 106, 146, 0.42);
  outline-offset: 3px;
}

.student-card .student-portrait,
.student-card .student-card-body {
  position: relative;
  z-index: 2;
  pointer-events: none;
}

.student-card-delete {
  position: absolute;
  top: 0.65rem;
  right: 0.65rem;
  z-index: 3;
}

.student-portrait,
.student-portrait img {
  width: 70px;
  height: 70px;
  border-radius: 50%;
}

.student-portrait {
  display: grid;
  place-items: center;
  overflow: hidden;
  background: linear-gradient(145deg, #cfe8ff, #f6d493);
  color: var(--blue);
  font-weight: 900;
}

.student-portrait img {
  object-fit: cover;
}

.student-card-body p {
  margin: 0.25rem 0 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.student-status-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.55rem;
}

.student-status-badge {
  padding: 0.22rem 0.5rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 800;
  line-height: 1.2;
}

.student-badge-daycare { background: rgba(53, 106, 146, 0.13); color: var(--blue); }
.student-badge-cafeteria { background: rgba(43, 124, 112, 0.14); color: var(--teal); }
.student-badge-pai { background: rgba(198, 106, 61, 0.15); color: var(--primary-deep); }
.student-badge-mdph { background: rgba(102, 81, 145, 0.14); color: #665191; }

.student-form-section {
  display: grid;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(255, 250, 243, 0.78);
}

.student-form-section .settings-card-heading {
  margin-bottom: 0;
}

.student-contact-group {
  display: grid;
  gap: 0.7rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--line);
}

.student-contact-group h4 {
  margin: 0;
  color: var(--ink);
}

.student-form-section .form-grid {
  margin-bottom: 0;
}

.student-status-options {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.programmation-form {
  margin-bottom: 1rem;
}

body .programmation-dialog { width: min(680px, 100%); }
body .programmation-dialog .panel-heading { margin-bottom: 4px; }
body .programmation-dialog .programmation-form {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.programmations-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 1rem;
}

.programmation-filters {
  align-items: end;
  margin-bottom: 1rem;
}

.programmation-filters[hidden] { display: none !important; }

.programmation-search {
  flex: 1 1 260px;
}

.programmation-card {
  position: relative;
  display: grid;
  gap: 0.9rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-strong);
}

.programmation-card.is-expanded {
  grid-column: 1 / -1;
}

.programmation-card-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.8rem;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.programmation-card-summary > span:first-child {
  display: grid;
  gap: 0.2rem;
}

.programmation-card-summary strong {
  font-family: "Fraunces", serif;
  font-size: 1.08rem;
  overflow-wrap: anywhere;
  white-space: normal;
}

.programmation-card-summary small,
.programmation-progress {
  color: var(--muted);
  white-space: normal;
}

.programmation-card-summary .programmation-card-levels {
  color: var(--primary);
  font-weight: 700;
}

.programmation-progress {
  font-size: 0.78rem;
  font-weight: 800;
  white-space: nowrap;
}

.programmation-meta-editor {
  margin-bottom: 0;
}

.programmation-level-editor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px;
  gap: 0.45rem;
}

.programmation-level-editor button {
  min-height: 40px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: #7567a8;
  color: #fff;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 700;
}

.programmation-level-editor button:hover { background: #61548f; transform: translateY(-1px); }

.programmation-heading,
.notion-row,
.notion-add-row,
.notion-actions {
  display: flex;
  align-items: center;
}

.programmation-heading {
  justify-content: space-between;
  gap: 1rem;
}

.programmation-heading h3 {
  margin: 0;
  font-family: "Fraunces", serif;
}

@media (max-width: 640px) {
  .programmation-heading {
    align-items: flex-start;
    flex-direction: column;
  }
}

.notion-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0.25rem 0;
  list-style: none;
}

.notion-row {
  gap: 0.55rem;
  min-height: 46px;
  padding: 0.42rem 0.25rem;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}

.notion-row:last-child { border-bottom: 0; }

.notion-row::before {
  content: "";
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 50%;
  background: #7567a8;
}

.notion-check {
  display: flex;
  gap: 0.65rem;
  flex: 1;
  align-items: flex-start;
}

.notion-check input[type="checkbox"] {
  width: auto;
  height: 18px;
  margin: 0;
}

.notion-text-input {
  min-width: 0;
  min-height: 34px;
  padding: 0.35rem 0.45rem;
  border-color: transparent;
  background: transparent;
  line-height: 1.35;
  overflow: hidden;
  overflow-wrap: anywhere;
  resize: none;
  white-space: pre-wrap;
}

.notion-text-input:hover,
.notion-text-input:focus {
  border-color: var(--line);
  background: #fff;
}

.notion-row.is-completed .notion-text-input {
  color: var(--muted);
  text-decoration: line-through;
}

.notion-completed-date {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
}

.notion-actions {
  gap: 0.25rem;
}

.notion-actions button {
  width: 1.8rem;
  height: 1.8rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(53, 106, 146, 0.1);
  color: var(--blue);
  cursor: pointer;
}

.notion-actions button:last-child {
  background: rgba(201, 71, 71, 0.12);
  color: #b63838;
}

.notion-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.3;
}

.notion-add-row {
  gap: 0.6rem;
}

.new-notion-card,
.notion-edit-card {
  display: grid;
  gap: 0.8rem;
  padding: 1rem;
  border: 1px solid #d9d4e8;
  border-radius: 12px;
  background: #f8f6fc;
}

.new-notion-card h4 { margin: 0; color: #4d416f; }
.new-notion-card label,
.notion-edit-card label { display: grid; gap: 0.35rem; }
.new-notion-card textarea,
.notion-edit-card textarea { width: 100%; min-height: 72px; resize: vertical; }
.notion-choice-label { display: block; margin-bottom: 0.4rem; color: var(--muted); font-size: 0.78rem; font-weight: 700; }
.notion-choice-pills { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.notion-choice-pill {
  min-height: 30px;
  padding: 0.25rem 0.65rem;
  border: 1px solid #d8d2e8;
  border-radius: 999px;
  background: #fff;
  color: #66598d;
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 700;
}
.notion-choice-pill.is-selected { border-color: #7567a8; background: #7567a8; color: #fff; }
.notion-edit-validate {
  display: grid;
  width: 32px;
  height: 32px;
  padding: 0;
  place-items: center;
  justify-self: end;
  border: 0;
  border-radius: 50%;
  background: #718f7a;
  color: #fff;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 800;
}
.notion-readonly-label { display: grid; min-width: 0; gap: 0.35rem; overflow-wrap: anywhere; font-size: 0.68rem; font-weight: 400; }
.notion-line {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.5rem;
  font-weight: 400;
}
.notion-line input { margin-top: 0.12rem; }
.notion-line time { color: var(--muted); font-size: 0.7rem; font-weight: 600; white-space: nowrap; }
.notion-line.is-completed span { color: var(--muted); text-decoration: line-through; }
.notion-line-spacer { min-height: 0.65rem; }
.notion-static-levels { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.notion-static-levels span {
  padding: 0.16rem 0.45rem;
  border-radius: 999px;
  background: #eeeaf7;
  color: #61548f;
  font-size: 0.68rem;
  font-weight: 700;
}
.notion-row.is-editing { display: block; padding: 0.65rem 0; }
.notion-row.is-editing::before { display: none; }

body .programmation-editor-actions {
  width: 100%;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
}

body .programmation-editor-actions .programmation-save-icon { margin-left: auto; }

.programmation-header-save { flex: 0 0 52px; }

.notion-level-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.3rem;
}

.notion-level-pill {
  min-width: 34px;
  min-height: 24px;
  padding: 0.18rem 0.48rem;
  border: 1px solid #ddd8ed;
  border-radius: 999px;
  background: #fff;
  color: #7567a8;
  cursor: pointer;
  font-size: 0.68rem;
  font-weight: 700;
}

.notion-level-pill.is-selected {
  border-color: #7567a8;
  background: #eeeaf7;
  color: #61548f;
}

.programmation-period-groups {
  display: grid;
  gap: 0.7rem;
}

.programmation-period-card {
  padding: 0.55rem 0.8rem;
  border: 1px solid #e4e2dd;
  border-left: 4px solid #7567a8;
  border-radius: 10px;
  background: #fff;
}

.programmation-period-card.is-unassigned {
  border-style: dashed;
  border-left-width: 1px;
  background: #f8f7f4;
}

.programmation-period-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.15rem 0.2rem 0.35rem;
}

.programmation-period-heading h4 { margin: 0; color: #61548f; font-size: 0.86rem; }
.programmation-period-card.is-unassigned .programmation-period-heading h4 { color: var(--muted); }
.programmation-period-heading span {
  display: grid;
  min-width: 24px;
  height: 24px;
  padding: 0 0.35rem;
  place-items: center;
  border-radius: 999px;
  background: #eeeaf7;
  color: #61548f;
  font-size: 0.7rem;
  font-weight: 700;
}

.programmation-period-empty { margin: 0; padding: 0.35rem 0.2rem; color: var(--muted); font-size: 0.76rem; }

.notion-period-pills {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.2rem;
}

.notion-period-selector { display: flex; align-items: center; gap: 0.45rem; }
.notion-period-validate {
  display: grid;
  width: 28px;
  height: 28px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: #718f7a;
  color: #fff;
  cursor: pointer;
  font-weight: 800;
}

.notion-period-pill {
  min-width: 30px;
  min-height: 24px;
  padding: 0.15rem 0.35rem;
  border: 1px solid #ded9ec;
  border-radius: 999px;
  background: #fff;
  color: #7567a8;
  cursor: pointer;
  font-size: 0.66rem;
  font-weight: 700;
}

.notion-period-pill.is-selected { border-color: #7567a8; background: #7567a8; color: #fff; }

.programmation-save-icon {
  display: grid;
  width: 52px;
  height: 52px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(117, 103, 168, 0.24);
  border-radius: 50%;
  background: #eeeaf7;
  box-shadow: 0 0 0 0 rgba(117, 103, 168, 0.3);
  cursor: pointer;
  animation: programmation-save-pulse 2s ease-in-out infinite;
}

.programmation-save-icon img { width: 27px; height: 27px; object-fit: contain; }
.programmation-save-icon:hover { transform: translateY(-2px) scale(1.04); }

@keyframes programmation-save-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(117, 103, 168, 0.28); }
  50% { box-shadow: 0 0 0 9px rgba(117, 103, 168, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .programmation-save-icon { animation: none; }
}

.programmation-card-delete {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
}

.programmation-card:not(.is-expanded) .programmation-card-summary { padding-right: 40px; }

.student-photo-editor {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  text-align: center;
}

.student-photo-picker {
  position: relative;
  display: grid;
  width: 112px;
  height: 112px;
  padding: 0;
  place-items: center;
  overflow: hidden;
  border: 2px dashed rgba(53, 106, 146, 0.42);
  border-radius: 50%;
  background: rgba(53, 106, 146, 0.08);
  color: var(--blue);
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.student-photo-picker:hover {
  border-color: var(--blue);
  background: rgba(53, 106, 146, 0.14);
  transform: translateY(-1px);
}

.student-photo-picker:focus-within {
  outline: 3px solid rgba(198, 106, 61, 0.22);
  outline-offset: 3px;
}

.student-photo-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  opacity: 0;
}

.student-photo-placeholder {
  font-size: 2.6rem;
  font-weight: 500;
  line-height: 1;
}

.student-photo-preview {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.student-photo-preview:not([hidden]) + .student-photo-placeholder {
  display: none;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.panel {
  padding: 1.45rem;
  border-radius: var(--radius-lg);
}

.panel-highlight {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(255, 247, 237, 0.9)),
    var(--surface);
}

.panel-heading,
.toolbar,
.group-header,
.item-header,
.item-actions,
.form-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.panel-heading {
  margin-bottom: 1rem;
}

.stats-grid,
.form-grid,
.timetable-grid {
  display: grid;
  gap: 1rem;
}

.stats-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.stat-card,
.group-card,
.list-item,
.day-column,
.slot-card,
.empty-state {
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255, 250, 243, 0.98), rgba(248, 239, 228, 0.95));
}

.stat-card,
.group-card,
.list-item,
.day-column {
  padding: 1rem;
}

.stat-label,
.slot-meta {
  margin: 0;
}

.stat-value {
  margin: 0.4rem 0 0;
  font-size: 2rem;
  font-weight: 800;
}

.form-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 1rem;
}

.compact-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.settings-block {
  display: grid;
  gap: 0.9rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(255, 250, 243, 0.78);
}

.settings-card-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.2rem;
}

.settings-card {
  display: grid;
  gap: 1rem;
  padding: clamp(1rem, 2vw, 1.4rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: rgba(255, 250, 243, 0.82);
  box-shadow: 0 10px 24px rgba(66, 44, 16, 0.07);
}

.settings-card-heading {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
}

.settings-card-heading h3 {
  margin: 0;
  font-family: "Fraunces", serif;
  font-size: 1.25rem;
}

.settings-card-heading .list-meta {
  margin: 0.3rem 0 0;
}

.settings-card-icon {
  display: grid;
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  place-items: center;
  border-radius: 15px;
  background: var(--surface-strong);
  box-shadow: 0 6px 14px rgba(66, 44, 16, 0.09);
}

.settings-subcard {
  display: grid;
  gap: 0.9rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.52);
}

.school-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 0.8rem;
}

.school-card-main-heading {
  align-items: center;
}

.school-card-main-heading > div:nth-child(2) {
  flex: 1;
}

.school-summary-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-strong);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(66, 44, 16, 0.07);
  transition: transform 140ms ease, box-shadow 140ms ease;
}

.school-summary-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 13px 24px rgba(66, 44, 16, 0.12);
}

.school-summary-logo,
.school-summary-logo img {
  width: 68px;
  height: 68px;
  border-radius: 18px;
}

.school-summary-logo {
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #f7e4b5;
  font-size: 1.7rem;
}

.school-summary-logo img {
  object-fit: cover;
}

.school-summary-content {
  display: grid;
  gap: 0.35rem;
}

.school-summary-content strong {
  font-family: "Fraunces", serif;
  font-size: 1.08rem;
}

.school-summary-content small {
  color: var(--muted);
  line-height: 1.4;
}

.school-level-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.school-level-badges em {
  padding: 0.24rem 0.5rem;
  border-radius: 999px;
  background: rgba(53, 106, 146, 0.11);
  color: var(--blue);
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 800;
}

.school-summary-arrow {
  color: var(--muted);
  font-size: 2rem;
}

.school-logo-preview-wrap {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.school-logo-preview {
  width: 104px;
  height: 104px;
  border-radius: 22px;
  object-fit: cover;
  border: 4px solid #fff;
  box-shadow: var(--shadow-soft);
}

.school-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.8rem;
  padding: 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-strong);
}

.school-row-badge {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 14px;
  background: #f7e4b5;
}

.danger-zone {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid rgba(182, 56, 56, 0.2);
  border-radius: var(--radius-md);
  background: rgba(216, 91, 91, 0.06);
}

.danger-zone p {
  margin: 0.25rem 0 0;
}

.legal-settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
}

.legal-settings-grid details {
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-strong);
}

.legal-settings-grid summary {
  cursor: pointer;
  font-weight: 800;
}

.legal-settings-grid p {
  margin: 0.8rem 0 0;
  color: var(--muted);
  line-height: 1.6;
}

.settings-save-actions {
  justify-content: flex-end;
}

.timetable-break-service-field[hidden] {
  display: none !important;
}

.settings-block-heading {
  display: grid;
  gap: 0.2rem;
}

.settings-block-heading h3 {
  margin: 0;
  font-family: "Fraunces", serif;
  font-size: 1.05rem;
}

.inline-field {
  max-width: 220px;
}

.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 0.7rem;
}

.checkbox-chip {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 0.6rem;
  padding: 0.82rem 0.95rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-strong);
  cursor: pointer;
}

.class-days-block {
  display: grid;
  gap: 0.55rem;
}

.checkbox-chip input {
  width: 18px;
  height: 18px;
  margin: 0;
}

.checkbox-chip.is-unavailable {
  cursor: not-allowed;
  opacity: 0.48;
  background: rgba(103, 112, 133, 0.08);
}

.schedule-grid {
  display: grid;
  gap: 0.8rem;
}

.schedule-grid-default {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.schedule-row,
.holiday-row {
  display: grid;
  gap: 0.8rem;
  grid-template-columns: minmax(110px, 150px) repeat(8, minmax(0, 1fr));
  align-items: end;
}

.schedule-day {
  font-weight: 800;
  color: var(--ink);
}

.schedule-day-card {
  display: grid;
  gap: 0.8rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.schedule-row.is-inactive {
  opacity: 0.58;
}

.holiday-list {
  display: grid;
  gap: 0.8rem;
}

.class-list {
  display: grid;
  gap: 0.9rem;
}

.backup-layout,
.backup-list {
  display: grid;
  gap: 0.9rem;
}

.backup-card {
  display: grid;
  gap: 0.9rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-strong);
}

.backup-card-heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 1rem;
}

.backup-card-heading h4 {
  margin: 0;
  font-family: "Fraunces", serif;
  font-size: 1rem;
}

.backup-item {
  display: grid;
  gap: 0.7rem;
  padding: 0.9rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 248, 239, 0.78);
}

.backup-item-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 1rem;
}

.welcome-modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 1.2rem;
}

.welcome-modal[hidden] {
  display: none !important;
}

.welcome-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(14, 19, 26, 0.52);
  backdrop-filter: blur(8px);
}

.welcome-dialog,
.welcome-card {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.62);
  background: rgba(255, 252, 247, 0.96);
  box-shadow: var(--shadow-soft);
}

.welcome-dialog {
  z-index: 1;
  width: min(760px, 100%);
  display: grid;
  gap: 1rem;
  padding: 1.35rem;
  border-radius: 28px;
}

.cloud-backup-dialog {
  width: min(620px, 100%);
}

.cloud-backup-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 72px;
  gap: 1rem;
  align-items: center;
}

.cloud-backup-heading img {
  width: 72px;
  height: 72px;
  padding: 0.8rem;
  border-radius: 20px;
  background: var(--page-tint, #e5f0f0);
  object-fit: contain;
}

.cloud-backup-folder-card {
  display: grid;
  gap: 0.75rem;
}

.cloud-backup-folder-card .button {
  width: fit-content;
}

.cloud-backup-action-buttons {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.7rem;
}

.cloud-backup-action-buttons .button[hidden] { display: none !important; }

.cloud-backup-file-info {
  display: flex;
  padding: 0.8rem 0.9rem;
  align-items: center;
  gap: 0.75rem;
  border: 1px solid rgba(86, 143, 145, 0.24);
  border-radius: 14px;
  background: #f3f8f7;
}

.cloud-backup-file-info[hidden] {
  display: none;
}

.cloud-backup-file-info p {
  margin: 0.2rem 0 0;
}

.cloud-backup-file-icon {
  display: grid;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 12px;
  background: #e5f0f0;
  color: #407779;
}

.app-toast {
  position: fixed;
  right: 18px;
  bottom: calc(100px + env(safe-area-inset-bottom, 0px));
  z-index: 80;
  display: flex;
  width: min(420px, calc(100vw - 36px));
  padding: 0.9rem 1rem;
  align-items: center;
  gap: 0.75rem;
  border: 1px solid rgba(76, 126, 92, 0.3);
  border-radius: 14px;
  background: rgba(244, 250, 246, 0.98);
  color: #3f6f4d;
  box-shadow: 0 16px 38px rgba(41, 40, 45, 0.16);
  font-weight: 700;
}

.app-toast[hidden] {
  display: none;
}

.app-toast-icon {
  display: grid;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  background: #718f7a;
  color: #fff;
}

.welcome-heading,
.welcome-grid,
.welcome-check-list,
.welcome-day-summary {
  display: grid;
  gap: 0.9rem;
}

.welcome-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.welcome-heading h2,
.welcome-card h3 {
  margin: 0;
  font-family: "Fraunces", serif;
}

.welcome-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.welcome-card {
  gap: 0.7rem;
  padding: 1rem;
  border-radius: 22px;
}

.welcome-check-card {
  border-color: rgba(198, 106, 61, 0.24);
}

.welcome-check-item,
.welcome-day-item {
  display: grid;
  gap: 0.28rem;
  padding: 0.9rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 248, 239, 0.78);
}

.welcome-check-status {
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary-deep);
}

.welcome-check-status.is-complete {
  color: var(--teal);
}

.welcome-modal .button[disabled] {
  cursor: not-allowed;
  opacity: 0.48;
  box-shadow: none;
}

.class-row {
  display: grid;
  gap: 0.8rem;
  padding: 0.95rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-strong);
}

.class-levels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.7rem;
}

.subject-field-stack {
  display: grid;
  gap: 0.7rem;
  align-content: end;
}

.holiday-row {
  grid-template-columns: minmax(180px, 1.5fr) repeat(2, minmax(0, 1fr)) auto;
}

.holiday-actions {
  justify-content: flex-end;
}

label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 0.95rem;
  font-weight: 700;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 14px;
  background: var(--surface-strong);
  color: var(--ink);
}

input:focus,
select:focus,
textarea:focus {
  outline: 2px solid rgba(198, 106, 61, 0.22);
  border-color: rgba(198, 106, 61, 0.65);
}

textarea {
  resize: vertical;
  min-height: 90px;
}

.span-2 {
  grid-column: span 2;
}

.span-3 {
  grid-column: span 3;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0.8rem 1.1rem;
  border: 0;
  border-radius: 16px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--shadow-soft);
}

.primary {
  background: linear-gradient(180deg, #d56b45, var(--primary));
  color: #fff7ef;
}

.secondary {
  background: rgba(53, 106, 146, 0.1);
  color: var(--blue);
}

.ghost,
.file-label {
  background: rgba(255, 250, 244, 0.88);
  color: var(--ink);
}

.file-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.item-title,
.group-card h3,
.day-column h3 {
  margin: 0;
}

.list-meta,
.list-notes {
  margin: 0.4rem 0 0;
  font-size: 0.92rem;
}

.item-actions button {
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-weight: 800;
}

.type-pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;
}

.type-parent {
  background: rgba(198, 106, 61, 0.12);
  color: var(--primary-deep);
}

.type-meeting {
  background: rgba(53, 106, 146, 0.12);
  color: var(--blue);
}

.type-training {
  background: rgba(43, 124, 112, 0.12);
  color: var(--teal);
}

.type-vacation {
  background: rgba(198, 106, 61, 0.13);
  color: var(--primary-deep);
}

.type-public-holiday {
  background: rgba(102, 81, 145, 0.13);
  color: #665191;
}

.type-birthday {
  background: rgba(218, 144, 48, 0.16);
  color: #8a5a12;
}

.agenda-calendar-card.agenda-birthday {
  border-left-color: rgba(218, 144, 48, 0.7);
}

.agenda-calendar-card {
  border-left: 5px solid rgba(198, 106, 61, 0.5);
}

.agenda-public-holiday {
  border-left-color: rgba(102, 81, 145, 0.55);
}

.type-outing {
  background: rgba(102, 81, 145, 0.14);
  color: #5c458f;
}

.type-apc {
  background: rgba(220, 95, 54, 0.16);
  color: #8b3f22;
}

.type-school {
  background: rgba(208, 154, 49, 0.15);
  color: #8f6615;
}

.tag {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(53, 106, 146, 0.08);
  color: var(--blue);
  font-size: 0.82rem;
  font-weight: 700;
}

.filter {
  min-width: 220px;
}

.timetable-heading-actions,
.timetable-library-grid,
.timetable-current-bar,
.timetable-save-panel {
  display: grid;
  gap: 1rem;
}

.timetable-action-pills {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.7rem;
}

.timetable-current-bar,
.timetable-library,
.timetable-save-panel {
  margin-bottom: 1rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, rgba(255, 252, 247, 0.96), rgba(247, 239, 230, 0.92));
}

.timetable-current-bar {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.timetable-current-main {
  display: grid;
  gap: 0.25rem;
}

.timetable-current-bar h3,
.timetable-save-panel h3 {
  margin: 0;
  font-family: "Fraunces", serif;
}

.timetable-notice {
  margin-top: 0.35rem;
  color: var(--blue);
  font-weight: 700;
}

.timetable-library[hidden] {
  display: none;
}

.timetable-file-manager {
  display: grid;
  grid-template-columns: minmax(180px, 0.8fr) minmax(0, 2fr);
  gap: 1.25rem;
  align-items: end;
}

.timetable-file-controls {
  display: flex;
  gap: 0.65rem;
  align-items: end;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.timetable-file-select {
  display: grid;
  flex: 1 1 230px;
  gap: 0.35rem;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.timetable-file-select select {
  width: 100%;
}

.timetable-file-action {
  display: inline-flex;
  min-height: 44px;
  padding-inline: 0.85rem;
  align-items: center;
  gap: 0.45rem;
}

.timetable-file-action img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.timetable-table-action {
  display: flex;
  justify-content: flex-end;
}

.timetable-table-action-top {
  margin-bottom: 0.75rem;
}

.timetable-table-action-bottom {
  margin-top: 0.75rem;
}

.timetable-add-slot-button {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.timetable-library-grid {
  grid-template-columns: minmax(0, 2fr) auto;
  align-items: end;
}

.timetable-selection-meta {
  margin: 0;
  flex: 1 1 260px;
}

.timetable-save-grid {
  margin-top: 0.75rem;
}

.timetable-editor-actions {
  justify-content: flex-end;
}

.save-timetable-dialog {
  width: min(640px, 100%);
}

.checkbox-card {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 60px;
  padding: 0.95rem 1rem;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 250, 243, 0.82);
}

.checkbox-card input {
  width: 18px;
  height: 18px;
}

.timetable-grid {
  display: block;
}

.timetable-shell {
  overflow-x: auto;
}

.timetable-table {
  width: 100%;
  min-width: 780px;
  border-collapse: separate;
  border-spacing: 0.75rem;
}

.timetable-table th,
.timetable-table td {
  vertical-align: top;
}

.timetable-table tbody tr {
  height: 1px;
}

.timetable-table th {
  padding: 0 0.45rem 0.4rem;
  text-align: left;
  font-family: "Fraunces", serif;
  font-size: 1rem;
}

.timetable-time-head,
.timetable-time-cell {
  width: 118px;
}

.timetable-time-cell {
  padding: 0.85rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 250, 243, 0.82);
}

.timetable-slot-cell {
  min-width: 150px;
  height: 1px;
  padding: 0;
}

.timetable-slot-card,
.timetable-break-card,
.timetable-slot-empty {
  height: 100%;
  min-height: 126px;
  padding: 0.9rem;
  border-radius: 20px;
  box-sizing: border-box;
}

.timetable-slot-card {
  position: relative;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 0.55rem;
  border: 1px solid var(--line);
  border-color: var(--subject-border, var(--line));
  background:
    linear-gradient(180deg, var(--subject-bg-top, rgba(255, 250, 243, 0.98)), var(--subject-bg-bottom, rgba(248, 239, 228, 0.95)));
  cursor: pointer;
  transition:
    transform 140ms ease,
    box-shadow 140ms ease,
    border-color 140ms ease;
}

.timetable-slot-card > div:not(.timetable-slot-header),
.timetable-slot-subjects {
  width: 100%;
  text-align: center;
}

.timetable-slot-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 24px rgba(38, 28, 18, 0.1);
}

.timetable-slot-card.is-selected {
  border-color: var(--subject-accent, var(--primary));
  box-shadow:
    0 0 0 3px rgba(53, 106, 146, 0.18),
    0 16px 24px rgba(38, 28, 18, 0.12);
}

.timetable-slot-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
}

.timetable-slot-card .timetable-slot-header > .action-pills,
.timetable-break-card .timetable-slot-header > .action-pills {
  position: absolute;
  top: 0.7rem;
  right: 0.7rem;
}

.timetable-slot-days {
  color: var(--subject-accent, var(--blue));
  font-size: 0.82rem;
  font-weight: 800;
}

.timetable-slot-card .item-title {
  margin: 0;
  color: var(--subject-title, var(--ink));
  font-family: "Fraunces", serif;
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1.18;
  text-align: center;
}

.timetable-slot-card .list-meta,
.timetable-slot-card .list-notes {
  color: var(--subject-text, var(--muted));
  opacity: 0.84;
}

.timetable-slot-empty {
  width: 100%;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255, 250, 243, 0.98), rgba(248, 239, 228, 0.95));
  display: grid;
  place-items: center;
  color: var(--muted);
  text-align: center;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, color 140ms ease, transform 140ms ease;
}

.timetable-slot-empty:hover,
.timetable-slot-empty:focus-visible {
  border-color: rgba(198, 106, 61, 0.5);
  background: linear-gradient(180deg, #fff7ef, #f5dfcf);
  color: var(--primary-deep);
  transform: translateY(-1px);
}

.timetable-break-card {
  position: relative;
  border: 1px solid var(--subject-border, #454a50);
  background: linear-gradient(180deg, var(--subject-bg-top, #60666d), var(--subject-bg-bottom, #50565d));
  color: var(--subject-text, #ffffff);
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 0.45rem;
  cursor: pointer;
  transition:
    transform 140ms ease,
    box-shadow 140ms ease,
    border-color 140ms ease;
}

.timetable-break-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 24px rgba(38, 28, 18, 0.08);
}

.timetable-break-card.is-selected {
  border-color: #ffffff;
  box-shadow:
    0 0 0 3px rgba(53, 106, 146, 0.16),
    0 16px 24px rgba(38, 28, 18, 0.08);
}

.timetable-break-title {
  margin: 0;
  color: var(--subject-title, #ffffff);
  font-family: "Fraunces", serif;
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1.18;
  text-align: center;
}

.timetable-break-service {
  width: fit-content;
  margin: 0;
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  background: var(--primary);
  color: white;
  font-size: 0.78rem;
  font-weight: 800;
}

.timetable-break-service span { margin-right: 0.25rem; }

.break-service-toggle {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  cursor: pointer;
}

.break-service-toggle input { width: 1.25rem; height: 1.25rem; accent-color: var(--primary); }
.break-service-toggle span { display: grid; gap: 0.15rem; }
.break-service-toggle small { color: var(--muted); }

.empty-state {
  padding: 18px;
  text-align: center;
}

.settings-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 10px 0 18px;
}

.journal-day-card,
.journal-reminder-stack,
.journal-reminder-block,
.journal-reminder-list {
  display: grid;
  gap: 0.9rem;
}

.journal-holiday-card {
  border-color: #c8ccd2;
  background: #e8eaed;
  color: #5d636d;
  filter: grayscale(1);
}

.journal-holiday-content {
  display: grid;
  place-items: center;
  gap: 0.3rem;
  min-height: 150px;
  border: 2px dashed #aeb3bb;
  border-radius: 18px;
  font-size: 1.2rem;
}

.journal-holiday-content span { font-size: 0.9rem; }

.public-holidays-block { display: grid; gap: 0.7rem; margin-top: 0.5rem; }
.public-holidays-block h4 { margin: 0; }
.ascension-bridge-option span { display: grid; gap: 0.2rem; }
.ascension-bridge-option small { color: var(--muted); }
.public-holiday-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.55rem; }
.public-holiday-row {
  display: grid;
  gap: 0.2rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(232, 234, 237, 0.72);
}
.public-holiday-row span { color: var(--muted); font-size: 0.82rem; }

.journal-reminder-list {
  grid-template-columns: repeat(auto-fit, minmax(200px, max-content));
}

.journal-reminder-link {
  width: fit-content;
  border: 0;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.journal-reminder-link:hover {
  filter: brightness(0.96);
}

.journal-reminder-link:focus-visible {
  outline: 3px solid color-mix(in srgb, currentColor 38%, transparent);
  outline-offset: 2px;
}

.journal-entry-grid {
  margin-bottom: 0;
}

.subjects-dialog {
  width: min(760px, 100%);
  max-height: min(88vh, 860px);
  overflow-y: auto;
}

.subjects-modal-heading {
  align-items: flex-start;
}

.subjects-modal-actions-top {
  justify-content: flex-end;
}

.subjects-list-plain {
  display: grid;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(255, 248, 239, 0.7);
  overflow: hidden;
}

.subjects-modal-intro,
.subject-tree-note { margin: 0.25rem 0 0; color: var(--muted); }
.subject-tree-card + .subject-tree-card { border-top: 1px solid var(--line); }
.subject-tree-card { box-shadow: inset 4px 0 0 var(--subject-accent, var(--primary)); }
.subject-tree-header,
.chapter-tree-header,
.part-tree-row { display: flex; align-items: center; gap: 0.75rem; }
.subject-tree-header { padding: 0.85rem 1rem; }
.subject-tree-toggle,
.chapter-tree-toggle {
  min-width: 0;
  flex: 1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.7rem;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.subject-toggle-icon,
.chapter-toggle-icon {
  display: grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  background: var(--subject-bg-bottom, rgba(195, 101, 65, 0.12));
  color: var(--subject-accent, var(--primary));
  font-size: 1.15rem;
  font-weight: 900;
}
.subject-tree-count,
.chapter-tree-toggle small { color: var(--muted); font-weight: 700; }
.subject-tree-delete,
.subject-tree-rename,
.tree-remove-button {
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-weight: 700;
}

.subject-tree-rename { color: var(--subject-accent, var(--blue)); }

.subjects-page {
  display: grid;
  gap: 1rem;
}

.subjects-page-form { margin: 0; }

.field-optional { color: var(--muted); font-size: 0.82em; font-weight: 500; }

#journal-extra-day-action[hidden] { display: none !important; }
.timetable-slot-notes { white-space: pre-wrap; }
.subject-tree-body { display: grid; gap: 0.75rem; padding: 0 1rem 1rem 3.4rem; }
.subject-tree-body[hidden], .chapter-tree-body[hidden] { display: none; }
.chapter-tree-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.58);
}
.chapter-tree-header { padding: 0.7rem 0.8rem; }
.chapter-tree-body { display: grid; gap: 0.55rem; padding: 0 0.8rem 0.8rem 3rem; }
.part-tree-row { justify-content: space-between; padding: 0.45rem 0; border-bottom: 1px dashed var(--line); }
.subject-inline-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.6rem; }
.subject-inline-form input { min-width: 0; }

@media (max-width: 620px) {
  .subject-tree-count, .chapter-tree-toggle small { display: none; }
  .subject-tree-body { padding-left: 1rem; }
  .chapter-tree-body { padding-left: 0.8rem; }
  .subject-inline-form { grid-template-columns: 1fr; }
}

.subject-list-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  padding: 0.95rem 1rem;
  border-bottom: 1px solid var(--line);
}

.subject-list-row:last-child {
  border-bottom: 0;
}

.subject-list-row button {
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-weight: 800;
  color: var(--muted);
}

.subjects-modal-footer {
  justify-content: flex-end;
}

.timetable-activities-shell,
.timetable-activities-list {
  display: grid;
  gap: 0.9rem;
}

.timetable-activity-card .settings-block-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.timetable-activity-card .settings-block-heading h3 {
  margin: 0;
}

.timetable-activity-card .compact-form {
  margin-top: 0.85rem;
}

.drive-card {
  padding: 1.15rem;
}

.fab {
  position: fixed;
  z-index: 30;
  bottom: calc(var(--toolbar-height) + env(safe-area-inset-bottom, 0px) + 0.65rem);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  color: #fff8f2;
  box-shadow:
    0 16px 34px rgba(6, 8, 12, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  cursor: pointer;
}

.fab-icon {
  font-size: 1.34rem;
  line-height: 1;
}

.fab-badge {
  position: absolute;
  right: -2px;
  bottom: -1px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 19px;
  height: 19px;
  padding: 0 4px;
  border-radius: 999px;
  border: 2px solid rgba(24, 28, 35, 0.95);
  font-size: 0.72rem;
  font-weight: 800;
  color: #fff;
}

.fab-badge-drive {
  background: #ffb703;
  color: #1e2432;
}

.fab-badge-settings {
  background: #cf2f2f;
}

.settings-fab {
  right: 0.8rem;
  background: linear-gradient(180deg, rgba(45, 50, 58, 0.98), rgba(18, 22, 28, 1));
}

.drive-fab {
  left: 0.8rem;
  background: linear-gradient(180deg, rgba(45, 50, 58, 0.98), rgba(18, 22, 28, 1));
}

@media (max-width: 1024px) {
  .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-grid,
  .timetable-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .timetable-library-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {
  body {
    padding-bottom: calc(var(--toolbar-height) + 102px + env(safe-area-inset-bottom, 0px));
  }

  .page-shell {
    width: min(100%, calc(100% - 20px));
    padding-top: 20px;
  }

  .legal-settings-grid {
    grid-template-columns: 1fr;
  }

  .student-status-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .notion-row {
    align-items: stretch;
    flex-wrap: wrap;
  }

  .notion-check {
    min-width: calc(100% - 2.5rem);
  }

  .notion-add-row {
    align-items: stretch;
    flex-direction: column;
  }

  .danger-zone {
    align-items: stretch;
    flex-direction: column;
  }

  .journal-navigation {
    grid-template-columns: 2.5rem minmax(0, 1fr) 2.5rem;
    gap: 0.35rem;
    padding: 0.5rem;
  }

  .journal-arrow {
    display: inline-flex;
    width: 2.5rem;
    height: 2.5rem;
  }

  .journal-current-day { min-width: 0; }
  .journal-mode-control { flex-wrap: wrap; justify-content: center; }
  .journal-current-day strong { overflow-wrap: anywhere; }

  .dashboard-grid,
  .stats-grid,
  .form-grid,
  .compact-form,
  .welcome-grid,
  .schedule-grid-default,
  .schedule-day-card,
  .timetable-grid,
  .schedule-row,
  .holiday-row {
    grid-template-columns: 1fr;
  }

  .span-2,
  .span-3 {
    grid-column: span 1;
  }

  .panel-heading,
  .toolbar,
  .group-header,
  .item-header,
  .item-actions,
  .form-actions,
  .welcome-footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .timetable-action-pills {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .timetable-heading-actions {
    width: 100%;
  }

  .timetable-current-bar {
    grid-template-columns: 1fr;
  }

  .timetable-file-manager {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .timetable-file-controls {
    justify-content: flex-start;
  }

  .timetable-editor-actions {
    align-items: stretch;
  }

  .fab {
    bottom: calc(var(--toolbar-height) + env(safe-area-inset-bottom, 0px) + 0.55rem);
    width: 52px;
    height: 52px;
  }

  .bottom-toolbar {
    bottom: 0;
    width: 100vw;
    min-height: 92px;
    gap: 0.24rem;
    padding:
      0.32rem
      0.25rem
      calc(env(safe-area-inset-bottom, 0px) + 0.28rem)
      0.25rem;
    border-radius: 20px 20px 0 0;
  }

  .drive-fab {
    left: 0.35rem;
  }

  .settings-fab {
    right: 0.35rem;
  }

  .toolbar-tab {
    flex-basis: 96px;
    min-height: 68px;
    padding: 0.38rem 0.38rem;
  }

  .toolbar-label {
    font-size: 0.72rem;
  }
}

@media print {
  @page { size: A4 portrait; margin: 6mm; }

  html, body {
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: 0;
    background: white;
    color: #111;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .hero,
  .bottom-toolbar,
  .fab,
  .toolbar,
  .welcome-modal,
  .timetable-heading-actions,
  .timetable-add-pill,
  .timetable-library,
  .timetable-table-action,
  .timetable-notice,
  #timetable-current-meta,
  .action-pills,
  main > .view:not(#view-timetable) { display: none !important; }

  .page-shell,
  #view-timetable,
  #view-timetable > .panel,
  .timetable-grid,
  .timetable-shell {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  #view-timetable > .panel {
    display: flex !important;
    flex-direction: column;
    height: 285mm;
    box-sizing: border-box;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: white;
    backdrop-filter: none;
  }

  #view-timetable .timetable-heading { margin-bottom: 2mm; }
  #view-timetable .timetable-heading .eyebrow { display: none; }
  #view-timetable .timetable-heading h2 { margin: 0; font-size: 15pt; }

  .timetable-current-bar {
    min-height: 0;
    margin: 0 0 2mm;
    padding: 0;
    border: 0;
    background: transparent;
  }

  .timetable-current-bar .eyebrow { display: none; }
  .timetable-current-bar h3 { margin: 0; font-size: 10pt; }

  .timetable-grid,
  .timetable-shell {
    min-height: 0;
  }

  .timetable-grid {
    flex: 1 1 auto;
  }

  .timetable-shell {
    height: 100%;
  }

  .timetable-table {
    width: 100% !important;
    height: 100%;
    min-width: 0 !important;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 1.2mm;
    font-size: 7pt;
  }

  .timetable-table th {
    padding: 1.2mm;
    border: 0.3mm solid #d8d2c9;
    border-radius: 1.8mm;
    background: linear-gradient(180deg, #fffaf3, #f8efe4);
    color: #29282d;
    text-align: center;
    font-size: 8pt;
    font-weight: 800;
  }

  .timetable-time-head,
  .timetable-time-cell { width: 18mm; }

  .timetable-time-cell {
    min-width: 0;
    padding: 1.2mm;
    border: 0.3mm solid #d8d2c9;
    border-radius: 1.8mm;
    background: linear-gradient(180deg, #fffaf3, #f8efe4);
    height: 1px;
    text-align: center;
    vertical-align: middle;
  }

  .timetable-slot-cell {
    min-width: 0;
    height: 1px;
    padding: 0;
    border: 0;
    background: transparent;
  }

  .timetable-slot-card,
  .timetable-break-card,
  .timetable-slot-empty {
    min-height: 0;
    width: 100%;
    height: 100%;
    gap: 0.8mm;
    padding: 1mm;
    border-radius: 1.5mm;
    box-shadow: none !important;
    transform: none !important;
    break-inside: avoid;
    box-sizing: border-box;
  }

  .timetable-slot-empty {
    border: 0;
    background: transparent;
    color: #aaa;
    font-size: 6pt;
  }

  .timetable-slot-days { display: none; }

  .timetable-slot-card .item-title { font-size: 15pt; line-height: 1.1; }

  .timetable-break-title { font-size: 7.5pt; line-height: 1.1; }

  .slot-meta { margin: 0.4mm 0 0; font-size: 6pt; line-height: 1.15; }
  .timetable-break-service { padding: 0.5mm 1.2mm; font-size: 6pt; }
  .slot-time { margin: 0; font-size: 7pt; font-weight: 800; white-space: nowrap; }
}

/* Priorité finale du thème contemporain */
html body {
  padding: 0 0 48px 232px;
  color: #29282d;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  line-height: 1.55;
  background: #f8f7f4;
}

html body * { font-family: "Inter", sans-serif; }

body .page-shell { width: min(1180px, calc(100% - 48px)); padding: 28px 0 48px; }
body .hero, body .panel { border: 1px solid #e4e2dd; background: #fff; box-shadow: none; backdrop-filter: none; }
body .hero { padding: 20px 22px; border-radius: 12px; }
body .hero h1, body .panel h2, body .item-title,
body .student-level-heading h3, body .student-card h4,
body .programmation-heading h3, body .programmation-card-summary strong {
  font-family: "Inter", sans-serif;
  letter-spacing: -0.02em;
}
body .hero h1 { font-size: 26px; font-weight: 600; line-height: 1.2; }
body .panel h2 { font-size: 24px; font-weight: 600; line-height: 1.25; }
body .hero-text { margin-top: 8px; font-size: 14px; }
body .hero-meta { margin-top: 8px; color: #7567a8; font-weight: 500; }
body .panel { padding: 22px; border-radius: 12px; }
body .panel-highlight { background: #fff; }

body .stat-card, body .group-card, body .list-item, body .day-column,
body .slot-card, body .empty-state, body .student-card,
body .programmation-card, body .student-form-section,
body .settings-block, body .settings-card {
  border-color: #e4e2dd;
  border-radius: 10px;
  background: #fff;
  box-shadow: none;
}

body input, body select, body textarea { border-color: #e4e2dd; border-radius: 8px; background: #fff; }
body .button { min-height: 42px; border-radius: 8px; box-shadow: none; font-weight: 600; }
body .primary { background: #7567a8; color: #fff; }
body .secondary { border: 1px solid #e4e2dd; background: #fff; color: #29282d; }

body .bottom-toolbar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 20;
  display: flex;
  width: 232px;
  min-height: 100vh;
  padding: 24px 14px 110px;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
  border: 0;
  border-right: 1px solid #e4e2dd;
  border-radius: 0;
  background: #efeee9;
  box-shadow: none;
  backdrop-filter: none;
}
body .bottom-toolbar::before { content: "CartableKini"; display: block; margin: 0 8px 22px; color: #29282d; font-size: 16px; font-weight: 600; }
body .toolbar-tab { width: 100%; min-height: 42px; padding: 9px 11px; flex: 0 0 auto; flex-direction: row; justify-content: flex-start; gap: 11px; border: 0; border-radius: 8px; background: transparent; color: #5f5d64; text-align: left; }
body .toolbar-tab.active { border: 0; background: #eeeaf7; color: #61548f; }
body .toolbar-icon { width: 20px; color: currentColor; font-size: 19px; text-align: center; }
body .toolbar-label { font-size: 13px; font-weight: 500; }
body .nav-organisation { margin-top: 10px; padding-top: 10px; border-top: 1px solid #dedcd6; }
body .nav-organisation summary { display: flex; min-height: 40px; padding: 9px 11px; align-items: center; justify-content: space-between; color: #706e75; cursor: pointer; font-size: 12px; font-weight: 600; list-style: none; text-transform: uppercase; letter-spacing: .06em; }
body .nav-organisation-items { display: grid; gap: 3px; }

body .fab { width: 42px; height: 42px; bottom: 18px; border: 1px solid #e4e2dd; background: #fff; color: #706e75; box-shadow: 0 2px 10px rgba(41,40,45,.05); }
body .settings-fab { left: 174px; right: auto; }
body .drive-fab { left: 122px; }
body .fab-badge { display: none; }
body .icon-pill { width: 44px; height: 44px; border: 1px solid #e4e2dd; box-shadow: none; }
body .icon-pill-add { background: #7567a8; color: #fff; }
body .icon-pill-close { background: #f3e8e8; color: #9d555d; }

@media (max-width: 900px) {
  html body { padding: 0 0 calc(112px + env(safe-area-inset-bottom, 0px)); }
  body .page-shell { width: min(100%, calc(100% - 20px)); padding-top: 18px; }
  body .bottom-toolbar { inset: auto 0 0; width: 100vw; min-height: 82px; padding: 7px 8px calc(7px + env(safe-area-inset-bottom, 0px)); flex-direction: row; gap: 4px; overflow-x: auto; overflow-y: hidden; border-top: 1px solid #e4e2dd; border-right: 0; background: rgba(248,247,244,.97); }
  body .bottom-toolbar::before { display: none; }
  body .toolbar-tab { width: auto; min-width: 82px; min-height: 62px; padding: 7px 8px; flex: 0 0 82px; flex-direction: column; justify-content: center; gap: 3px; text-align: center; }
  body .toolbar-label { font-size: 11px; }
  body .toolbar-icon { font-size: 17px; }
  body .nav-organisation { display: contents; }
  body .nav-organisation summary { display: none; }
  body .nav-organisation-items { display: contents; }
  body .fab { bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }
  body .drive-fab { left: 10px; }
  body .settings-fab { left: auto; right: 10px; }
  body .hero, body .panel { padding: 17px; }
}

/* Navigation basse — préférence utilisateur */
html body {
  padding: 0 0 calc(112px + env(safe-area-inset-bottom, 0px));
}

body .bottom-toolbar {
  position: fixed;
  inset: auto 0 0;
  display: flex;
  width: 100vw;
  min-height: 82px;
  padding: 7px 8px calc(7px + env(safe-area-inset-bottom, 0px));
  flex-direction: row;
  gap: 4px;
  overflow-x: auto;
  overflow-y: hidden;
  border-top: 1px solid #e4e2dd;
  border-right: 0;
  background: rgba(248, 247, 244, 0.97);
  box-shadow: 0 -2px 10px rgba(41, 40, 45, 0.04);
}

body .bottom-toolbar::before { display: none; }

body .toolbar-tab {
  width: auto;
  min-width: 96px;
  min-height: 62px;
  padding: 7px 9px;
  flex: 1 0 96px;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  text-align: center;
}

body .toolbar-label { font-size: 11px; }
body .toolbar-icon { font-size: 17px; }
body .nav-organisation { display: contents; }
body .nav-organisation summary { display: none; }
body .nav-organisation-items { display: contents; }

body .fab {
  bottom: calc(92px + env(safe-area-inset-bottom, 0px));
}

body .drive-fab { left: 10px; }
body .settings-fab { left: auto; right: 10px; }

/* Accents fonctionnels et boutons flottants */
body .fab {
  display: inline-flex;
  width: 56px;
  height: 56px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  color: #fff;
  box-shadow: 0 10px 24px rgba(41, 40, 45, 0.16);
}

body .drive-fab {
  left: 14px;
  background: linear-gradient(145deg, #7d70ad, #62558f);
}

body .settings-fab {
  right: 14px;
  background: linear-gradient(145deg, #7a858e, #59636c);
}

body .fab:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(41, 40, 45, 0.2);
}

body .fab-icon { display: grid; place-items: center; }
body .fab-cloud-icon svg { width: 27px; height: 27px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

body .fab-badge {
  position: absolute;
  right: -3px;
  bottom: -2px;
  display: inline-flex;
  min-width: 21px;
  height: 21px;
  padding: 0 4px;
  align-items: center;
  justify-content: center;
  border: 2px solid #f8f7f4;
  border-radius: 999px;
  background: #d49a45;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
}

body .drive-fab.is-ready .fab-badge { background: #718f7a; }
body .drive-fab.needs-attention .fab-badge { background: #d49a45; }
body .settings-fab .fab-badge { background: #b77b82; }
body .fab-badge[hidden] { display: none; }

body .view { --page-accent: #7567a8; --page-tint: #eeeaf7; }
body #view-agenda, body #view-event-editor { --page-accent: #7567a8; --page-tint: #eeeaf7; }
body #view-journal, body #view-journal-entry-editor { --page-accent: #6686a0; --page-tint: #e9f0f4; }
body #view-programmations { --page-accent: #718f7a; --page-tint: #eaf0eb; }
body #view-students, body #view-student-editor { --page-accent: #b78a59; --page-tint: #f4ece3; }
body #view-meetings { --page-accent: #b77b82; --page-tint: #f3e8e9; }
body #view-apc { --page-accent: #b97963; --page-tint: #f4e9e5; }
body #view-timetable, body #view-timetable-editor { --page-accent: #568f91; --page-tint: #e5f0f0; }
body #view-trainings, body #view-training-editor { --page-accent: #7b769e; --page-tint: #edebf4; }

body .view.active > .panel,
body .view.active > .stack > .panel:first-child {
  border-top: 4px solid var(--page-accent);
}

body .view.active .panel-heading > div > .eyebrow { color: var(--page-accent); }
body .view.active .panel-heading h2 { color: var(--page-accent); }
body .view.active .icon-pill-add { background: var(--page-accent); }
body .view.active .button.primary { background: var(--page-accent); }
body .view.active .tag { background: var(--page-tint); color: var(--page-accent); }

body .toolbar-tab[data-view="agenda"].active { background: #eeeaf7; color: #61548f; }
body .toolbar-tab[data-view="journal"].active { background: #e9f0f4; color: #516f87; }
body .toolbar-tab[data-view="programmations"].active { background: #eaf0eb; color: #55715e; }
body .toolbar-tab[data-view="students"].active { background: #f4ece3; color: #8d673e; }
body .toolbar-tab[data-view="meetings"].active { background: #f3e8e9; color: #8f5960; }
body .toolbar-tab[data-view="apc"].active { background: #f4e9e5; color: #935d49; }
body .toolbar-tab[data-view="timetable"].active { background: #e5f0f0; color: #407779; }

/* Menu Plus de la barre de navigation */
body .toolbar-icon { font-size: 25px; line-height: 1; }
body .toolbar-icon img {
  display: block;
  width: 27px;
  height: 27px;
  object-fit: contain;
}
body .nav-more {
  position: relative;
  display: flex;
  min-width: 96px;
  flex: 1 0 96px;
}
body .nav-more summary::-webkit-details-marker { display: none; }
body .nav-more-toggle { cursor: pointer; list-style: none; }
body .nav-more.active > .nav-more-toggle,
body .nav-more[open] > .nav-more-toggle { background: #eeeaf7; color: #61548f; }
body .toolbar-icon-more { font-size: 30px; font-weight: 700; }
body .toolbar-icon-more img { width: 29px; height: 29px; }
body .nav-more-items {
  position: fixed;
  right: 10px;
  bottom: calc(90px + env(safe-area-inset-bottom, 0px));
  z-index: 40;
  display: grid;
  width: min(260px, calc(100vw - 20px));
  padding: 8px;
  gap: 3px;
  border: 1px solid #e4e2dd;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 16px 38px rgba(41, 40, 45, 0.18);
}
body .nav-more:not([open]) .nav-more-items { display: none; }
body .nav-more-items .toolbar-tab {
  width: 100%;
  min-width: 0;
  min-height: 52px;
  padding: 9px 12px;
  flex-direction: row;
  justify-content: flex-start;
  gap: 14px;
  text-align: left;
}
body .nav-more-items .toolbar-label { font-size: 14px; }
body .nav-more-items .toolbar-icon { width: 28px; font-size: 25px; }
body .icon-pill > img { width: 24px; height: 24px; object-fit: contain; }
body .icon-pill-add > img { filter: brightness(0) invert(1); }
body .settings-card-icon img { width: 29px; height: 29px; object-fit: contain; }

@media (max-width: 700px) {
  body .bottom-toolbar > .toolbar-tab,
  body .bottom-toolbar > .nav-more {
    width: 0;
    min-width: 0;
    flex: 1 1 0;
  }
  body .bottom-toolbar > .toolbar-tab,
  body .nav-more-toggle { padding-inline: 4px; }
  body .nav-more-toggle {
    width: 100%;
    min-width: 0;
    flex: none;
  }
  body .bottom-toolbar > .toolbar-tab .toolbar-label,
  body .nav-more-toggle .toolbar-label { font-size: 10px; }
}

/* Accueil */
body .page-shell { padding-top: 28px; }
body main { margin-top: 0; }
body .dashboard-home { display: grid; gap: 22px; }
body .dashboard-content-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
  align-items: start;
  gap: 22px;
}
body .dashboard-header-grid {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 150px minmax(280px, 1fr);
  gap: 16px;
  align-items: stretch;
}
body .dashboard-welcome-card {
  display: flex;
  align-items: center;
  padding: 24px 28px;
}
body .dashboard-logo-card { display: grid; min-height: 118px; padding: 16px; place-items: center; }
body .dashboard-logo-card img { display: block; width: 100%; max-width: 112px; max-height: 88px; object-fit: contain; }
body .dashboard-search-card { position: relative; display: grid; align-content: center; padding: 24px; }
body .dashboard-greeting h1 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: #29282d;
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 600;
  letter-spacing: -0.035em;
}
body .dashboard-greeting h1::after {
  content: "";
  display: inline-block;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  background: url("./images/coucou.png") center / contain no-repeat;
}
body .dashboard-greeting .current-date {
  margin: 5px 0 0;
  color: #706e75;
  font-size: 15px;
  text-transform: capitalize;
}
body .dashboard-search { position: relative; display: block; }
body .dashboard-search img {
  position: absolute;
  top: 50%;
  left: 15px;
  z-index: 1;
  width: 23px;
  height: 23px;
  object-fit: contain;
  pointer-events: none;
  transform: translateY(-50%);
}
body .dashboard-search input {
  width: 100%;
  min-height: 48px;
  padding: 0 18px 0 48px;
  border-radius: 12px;
  background: #f8f7f4;
  font-size: 14px;
}
body .dashboard-search-results {
  position: absolute;
  top: calc(50% + 28px);
  right: 24px;
  left: 24px;
  z-index: 20;
  overflow: hidden;
  border: 1px solid #e4e2dd;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 16px 34px rgba(41, 40, 45, 0.14);
}
body .dashboard-search-results[hidden] { display: none; }
body .dashboard-search-result { display: grid; width: 100%; gap: 3px; padding: 11px 14px; border: 0; border-bottom: 1px solid #efeee9; background: #fff; color: #29282d; font: inherit; text-align: left; cursor: pointer; }
body .dashboard-search-result:last-child { border-bottom: 0; }
body .dashboard-search-result:hover,
body .dashboard-search-result:focus-visible { background: #f5f2fb; }
body .dashboard-search-result span { color: #706e75; font-size: 12px; }
body .dashboard-search-empty { margin: 0; padding: 14px; color: #706e75; font-size: 13px; }
body .dashboard-today-card {
  width: 100%;
  padding: 26px 30px 30px;
}
body .dashboard-today-heading {
  padding-bottom: 18px;
  border-bottom: 1px solid #e4e2dd;
}
body .dashboard-today-heading h2 { margin: 0; color: #29282d; }
body .dashboard-timeline { padding-top: 18px; }
body .dashboard-timeline-row {
  display: grid;
  grid-template-columns: 70px 22px 34px minmax(0, 1fr);
  gap: 16px;
  min-height: 86px;
}
body .dashboard-timeline-icon { width: 30px; height: 30px; object-fit: contain; }
body .dashboard-timeline-time {
  padding-top: 2px;
  color: #29282d;
  font-size: 15px;
  font-weight: 600;
}
body .dashboard-timeline-marker { position: relative; display: flex; justify-content: center; }
body .dashboard-timeline-marker::after {
  content: "";
  position: absolute;
  top: 17px;
  bottom: -4px;
  width: 2px;
  background: #e4e2dd;
}
body .dashboard-timeline-row:last-child .dashboard-timeline-marker::after { display: none; }
body .dashboard-timeline-marker span {
  position: relative;
  z-index: 1;
  width: 12px;
  height: 12px;
  margin-top: 5px;
  border-radius: 50%;
  background: #7567a8;
  box-shadow: 0 0 0 4px #fff;
}
body .dashboard-timeline-content { padding-bottom: 22px; }
body .dashboard-timeline-content h3 {
  margin: 0;
  color: #29282d;
  font-size: 17px;
  font-weight: 600;
}
body .dashboard-timeline-content p {
  margin: 3px 0 0;
  color: #706e75;
  font-size: 14px;
}
body .dashboard-timeline .empty-state { margin-top: 2px; }
body .dashboard-side-cards { display: grid; gap: 16px; }
body .dashboard-side-card { padding: 20px; }
body .dashboard-side-card h2 {
  margin: 0;
  padding-bottom: 13px;
  border-bottom: 1px solid #e4e2dd;
  color: #29282d;
  font-size: 17px;
}
body .dashboard-mini-list { display: grid; }
body .dashboard-mini-item {
  display: grid;
  width: 100%;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 13px 0;
  border: 0;
  border-bottom: 1px solid #efeee9;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: 8px;
}
body .dashboard-mini-item:hover,
body .dashboard-mini-item:focus-visible { background: #f5f2fb; }
body .dashboard-mini-icon { width: 25px; height: 25px; object-fit: contain; margin-top: 2px; }
body .dashboard-mini-item:last-child { padding-bottom: 0; border-bottom: 0; }
body .dashboard-mini-date {
  margin: 0 0 3px;
  color: #7567a8;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}
body .dashboard-mini-item h3 { margin: 0; color: #29282d; font-size: 14px; font-weight: 600; }
body .dashboard-mini-meta,
body .dashboard-mini-empty { margin: 3px 0 0; color: #706e75; font-size: 12px; }
body .dashboard-mini-empty { padding-top: 13px; }
body .dashboard-vacation-state {
  display: grid;
  min-height: 210px;
  place-content: center;
  justify-items: center;
  gap: 10px;
  text-align: center;
}
body .dashboard-vacation-state p { margin: 0; color: #706e75; font-size: 16px; }
body .dashboard-vacation-state button {
  padding: 0;
  border: 0;
  border-bottom: 1px solid currentColor;
  background: transparent;
  color: #7567a8;
  font: inherit;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
}

/* Réunions */
body .meeting-editor-panel { width: 100%; }
body .meeting-items-field { display: grid; gap: 12px; }
body .meeting-items-field .settings-card-heading { align-items: center; }
body .meeting-items-list { display: grid; gap: 9px; }
body .meeting-item-row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto minmax(145px, auto) auto;
  gap: 9px;
  align-items: start;
  padding: 12px;
  border: 1px solid #e4e2dd;
  border-radius: 10px;
  background: #fff;
}
body .meeting-item-row > textarea,
body .meeting-item-row > input[type="date"] { width: 100%; }
body .meeting-item-row > textarea {
  min-height: 70px;
  padding: 11px 13px;
  resize: vertical;
  overflow: hidden;
  line-height: 1.45;
}
body .meeting-item-row.is-saved { grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding-block: 10px; }
body .meeting-item-row.is-saved > textarea,
body .meeting-item-row.is-saved > .meeting-agenda-toggle,
body .meeting-item-row.is-saved > input[type="date"] { display: none; }
body .meeting-item-saved-view {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: baseline;
  padding: 4px 6px;
  border: 0;
  background: transparent;
  color: #4f4d54;
  font: inherit;
  line-height: 1.45;
  text-align: left;
  cursor: pointer;
}
body .meeting-item-saved-view[hidden] { display: none; }
body .meeting-item-saved-view::before { content: "•"; color: #4f4d54; }
body .meeting-item-saved-text { min-width: 0; white-space: pre-wrap; }
body .meeting-item-saved-date { color: #8f5960; font-size: 12px; font-weight: 600; white-space: nowrap; }
body .meeting-item-saved-view:hover .meeting-item-saved-text { text-decoration: underline; text-underline-offset: 3px; }
body .meeting-item-saved-view:focus-visible { border-radius: 6px; outline: 3px solid rgba(113, 143, 122, .25); }
body .meeting-agenda-toggle {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  gap: 6px;
  color: #706e75;
  font-size: 13px;
}
body .meeting-card-items { display: grid; gap: 7px; margin: 13px 0 0; padding-left: 20px; color: #4f4d54; }
body .meeting-card-items li { white-space: pre-wrap; }
body .meeting-item-actions { display: flex; gap: 7px; }
body .meeting-item-validate { background: #718f7a; color: #fff; }
body .meeting-item-add { justify-self: start; margin-top: 2px; }
body .meeting-editor-header-actions { display: flex; align-items: center; gap: 9px; }
body .meeting-editor-footer { align-items: center; }
body .meeting-save-status { margin-left: auto; color: #718f7a; font-size: 13px; font-weight: 600; }
body .meeting-footer-save { flex: 0 0 auto; }
body .meeting-card-items span { margin-left: 5px; color: #8f5960; font-size: 12px; font-weight: 600; }
body .training-card-notes { white-space: pre-wrap; }
body .meeting-card {
  position: relative;
  padding-right: 64px;
  cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
body .meeting-card:hover,
body .meeting-card:focus-visible {
  border-color: #d2a9ae;
  box-shadow: 0 7px 22px rgba(83, 61, 64, .09);
  outline: none;
  transform: translateY(-1px);
}
body .meeting-card-delete {
  position: absolute;
  top: 13px;
  right: 13px;
  display: grid;
  width: 32px;
  height: 32px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: #c95761;
  color: #fff;
  box-shadow: 0 3px 9px rgba(142, 43, 52, .22);
  cursor: pointer;
  font: inherit;
  font-size: 22px;
  line-height: 1;
}
body .meeting-card-delete:hover,
body .meeting-card-delete:focus-visible { background: #a83f49; outline: 3px solid rgba(201, 87, 97, .22); }

/* Rendez-vous parents */
body .parent-appointment-card { position: relative; padding-right: 64px; cursor: pointer; }
body .parent-appointment-card:hover,
body .parent-appointment-card:focus-visible { border-color: #c7b4db; box-shadow: 0 7px 22px rgba(74, 57, 92, .09); outline: none; }
body .parent-appointment-summary { max-width: 75ch; white-space: pre-wrap; }
body .parent-appointment-editor-panel { width: 100%; }
body .parent-participants-field { display: grid; gap: 12px; padding: 16px; border: 1px solid #e4e2dd; border-radius: 12px; }
body .parent-participants-field legend { padding: 0 7px; color: #4f4d54; font-weight: 600; }
body .parent-appointment-actions { justify-content: flex-end; }
body .student-appointment-history { display: grid; gap: 9px; margin: 12px 0 18px; }
body .student-appointment-history-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 12px;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #ddd5ea;
  border-radius: 10px;
  background: #f8f5fc;
  color: #37343d;
  text-align: left;
  cursor: pointer;
}
body .student-appointment-history-card span { grid-row: 1 / 3; align-self: center; color: #7567a8; font-size: 12px; font-weight: 700; }
body .student-appointment-history-card strong { font-size: 14px; }
body .student-appointment-history-card small { overflow: hidden; color: #706e75; text-overflow: ellipsis; white-space: nowrap; }
body .student-appointment-history-card:hover { border-color: #b9abd0; background: #f2edf9; }

/* Fiche élève : lecture et édition */
body .student-form.is-read-mode .is-empty-field { display: none; }
body .student-form.is-read-mode input:not([type="checkbox"]):not([type="file"]),
body .student-form.is-read-mode select,
body .student-form.is-read-mode textarea {
  padding: 4px 0;
  border-color: transparent;
  background: transparent;
  color: #37343d;
  opacity: 1;
  -webkit-text-fill-color: #37343d;
}
body .student-form.is-read-mode textarea { min-height: auto; resize: none; }
body .student-form.is-read-mode > label,
body .student-form.is-read-mode .student-form-section,
body .student-form.is-read-mode .student-photo-picker { cursor: pointer; }
body .student-form.is-read-mode .student-photo-input,
body .student-form.is-read-mode .student-photo-placeholder,
body .student-form.is-read-mode #student-photo-help { display: none; }
body .student-parent-card {
  position: relative;
  padding: 14px;
  border: 1px solid #e2dce9;
  border-radius: 12px;
  background: #faf8fc;
}
body .student-form.is-read-mode .student-parent-card { cursor: pointer; }
body .student-form.is-read-mode .student-parent-card:hover,
body .student-form.is-read-mode .student-parent-card:focus-visible { border-color: #b9abd0; background: #f4f0f9; outline: none; }
body .student-form.is-read-mode .student-parent-card .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body .student-add-parent { margin-left: auto; }
body #view-student-editor .panel { position: relative; }
body #view-student-editor .panel > .panel-heading { padding-right: 92px; }
body .student-editor-header-actions { position: absolute; top: 1.1rem; right: 1.1rem; z-index: 5; display: flex; align-items: center; gap: 9px; }
body #student-header-save-button[hidden],
body #student-add-parent-button,
body #student-add-observation { display: none !important; }
body .student-editor-header-actions .icon-pill-close,
body .student-editor-footer-actions .icon-pill-close { border-color: #c95761; background: #c95761; color: #fff; }
body .student-observation-item { cursor: pointer; }
body .student-observation-item:focus-visible { border-color: #b9abd0; outline: 3px solid rgba(117, 103, 168, 0.18); }

@media (max-width: 680px) {
  body .meeting-item-row { grid-template-columns: minmax(0, 1fr) auto auto; }
  body .meeting-item-row > textarea { grid-column: 1 / -1; }
  body .meeting-item-row > input[type="date"] { grid-column: 1 / -1; grid-row: 3; }
}

/* Première utilisation */
body .onboarding-heading { position: relative; align-items: start; padding-right: 132px; }
body .onboarding-illustration {
  position: absolute;
  top: -8px;
  right: 2px;
  width: 112px;
  height: 108px;
  object-fit: contain;
  opacity: 0.78;
}
body .onboarding-steps { display: grid; gap: 14px; }
body .onboarding-step {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
body .onboarding-step-number {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  background: #eeeaf7;
  color: #61548f;
  font-weight: 600;
}
body .onboarding-step h3 { margin: 2px 0 0; }
body .onboarding-step label { display: grid; gap: 6px; margin-top: 12px; font-weight: 500; }
body .onboarding-step input { width: 100%; max-width: 430px; }
body .onboarding-step .button { margin-top: 12px; }

@media (max-width: 800px) {
  body .dashboard-header-grid { grid-template-columns: minmax(0, 1fr) 110px; }
  body .dashboard-search-card { grid-column: 1 / -1; }
  body .dashboard-welcome-card { padding: 20px; }
  body .dashboard-content-grid { grid-template-columns: 1fr; }
  body .dashboard-today-card { width: 100%; padding: 22px 20px 24px; }
  body .dashboard-timeline-row { grid-template-columns: 52px 16px 28px minmax(0, 1fr); gap: 9px; }
  body .dashboard-timeline-icon { width: 25px; height: 25px; }
  body .onboarding-heading { padding-right: 0; }
  body .onboarding-illustration { display: none; }
}

@media (max-width: 700px) {
  body .notion-row { align-items: flex-start; flex-wrap: wrap; }
  body .notion-check { grid-template-columns: auto auto minmax(0, 1fr); width: calc(100% - 2.5rem); }
  body .notion-level-pills { grid-column: 2; justify-content: flex-start; }
  body .notion-period-selector { width: 100%; padding-left: 26px; }
  body .notion-period-pills { flex-wrap: wrap; }
}

body .programmation-card { border-left: 4px solid #718f7a; }
body .programmation-period-card .notion-row:not(.is-editing) { align-items: center; flex-wrap: nowrap; }
body .programmation-period-card .notion-row:not(.is-editing) .notion-check { display: flex; width: auto; min-width: 0; }
body .student-card { border-left: 4px solid #b78a59; }
body .agenda-calendar-card { border-left-color: #7567a8; }
body .journal-day-card { border-left: 4px solid #6686a0; }

body .drive-connection-status {
  display: inline-flex;
  width: fit-content;
  margin: 0.65rem 0 0;
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

body .drive-connection-status.is-configured { background: #eaf0eb; color: #55715e; }
body .drive-connection-status.needs-configuration { background: #f5ecdd; color: #916727; }

/* Échelle typographique compacte */
html { font-size: 14px; }
html body { font-size: 12px; }
body .page-shell { font-size: 0.82rem; }
body .hero h1 { font-size: 22px; }
body .panel h2 { font-size: 20px; }
body .hero-text { font-size: 12px; }
body .eyebrow { font-size: 10px; }
body .bottom-toolbar::before { font-size: 14px; }
body .toolbar-label { font-size: 11px; }
body .nav-organisation summary { font-size: 10px; }
body .programmation-card-summary strong { font-size: 0.95rem; }
body .notion-readonly-label { font-size: 0.6rem; }
body .notion-line time { font-size: 0.6rem; }

/* Barre « Plus » — même organisation verticale sur ordinateur et mobile */
body .nav-more-items {
  right: 8px;
  bottom: calc(90px + env(safe-area-inset-bottom, 0px));
  width: 112px;
  padding: 5px;
  grid-template-columns: minmax(0, 1fr);
  gap: 3px;
  border-radius: 11px;
}

body .nav-more-items .toolbar-tab {
  width: 100%;
  min-width: 0;
  min-height: 50px;
  padding: 5px 3px;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  border-radius: 7px;
  text-align: center;
}

body .nav-more-items .toolbar-icon,
body .nav-more-items .toolbar-icon img {
  width: 19px;
  height: 19px;
}

body .nav-more-items .toolbar-label {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow: visible;
  overflow-wrap: break-word;
  hyphens: auto;
  font-size: 9px;
  line-height: 1.12;
  text-align: center;
  text-overflow: clip;
  white-space: normal;
}

/* Fenêtre de bienvenue — centrage et respiration */
body #welcome-modal {
  display: flex;
  padding: clamp(18px, 4vw, 48px);
  align-items: center;
  justify-content: center;
  overflow-y: auto;
}

body #welcome-modal[hidden] { display: none !important; }

body #welcome-modal .welcome-dialog {
  width: min(780px, 100%);
  margin: auto;
  padding: clamp(24px, 3vw, 36px);
  gap: 24px;
}

body #welcome-modal .onboarding-heading { gap: 10px; }
body #welcome-modal .onboarding-steps { gap: 18px; }
body #welcome-modal .onboarding-step { padding: 18px; gap: 16px; }
body #welcome-modal .onboarding-step label { margin-top: 16px; gap: 8px; }
body #welcome-modal .welcome-footer {
  padding-top: 4px;
  gap: 18px;
}

/* Version mobile — navigateurs de téléphone */
@media screen and (max-width: 600px) {
  html {
    font-size: 13px;
    overflow-x: hidden;
  }

  html body {
    padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
    overflow-x: hidden;
    font-size: 11px;
    -webkit-overflow-scrolling: touch;
  }

  body .page-shell {
    width: calc(100% - 12px);
    min-height: 100dvh;
    padding: 8px 0 20px;
    font-size: 0.78rem;
  }

  body main,
  body .view,
  body .panel,
  body .stack,
  body .settings-card-list {
    min-width: 0;
  }

  body .hero,
  body .panel {
    padding: 13px;
    border-radius: 10px;
  }

  body .panel-heading {
    margin-bottom: 12px;
    gap: 8px;
  }

  body .hero h1 { font-size: 18px; }
  body .panel h2 { font-size: 17px; line-height: 1.2; }
  body .panel h3,
  body .item-title { font-size: 13px; }
  body .hero-text,
  body .list-meta,
  body .list-notes { font-size: 10px; line-height: 1.45; }
  body .eyebrow { font-size: 8px; letter-spacing: 0.1em; }

  body .list-item,
  body .settings-card,
  body .settings-block,
  body .student-card,
  body .programmation-card,
  body .day-column,
  body .empty-state,
  body .welcome-card {
    padding: 11px;
    border-radius: 9px;
  }

  body .form-grid,
  body .compact-form,
  body .timetable-file-manager,
  body .dashboard-header-grid,
  body .student-form.is-read-mode .student-parent-card .form-grid {
    grid-template-columns: 1fr;
    gap: 9px;
  }

  body input,
  body select,
  body textarea {
    min-width: 0;
    max-width: 100%;
    font-size: 16px;
  }

  body textarea { min-height: 78px; }

  body .button {
    min-height: 40px;
    padding: 9px 12px;
    font-size: 11px;
  }

  body .icon-pill {
    width: 40px;
    height: 40px;
  }

  body .welcome-dialog,
  body .programmation-dialog,
  body .save-timetable-dialog,
  body .confirmation-dialog {
    width: calc(100vw - 12px);
    max-height: calc(100dvh - 12px);
    padding: 15px;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  body .cloud-backup-heading {
    grid-template-columns: minmax(0, 1fr) 52px;
  }

  body .cloud-backup-heading img {
    width: 52px;
    height: 52px;
    padding: 8px;
    border-radius: 14px;
  }

  body .cloud-backup-actions {
    align-items: stretch;
    flex-direction: column-reverse;
  }

  body .cloud-backup-action-buttons {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  body .cloud-backup-actions > .button,
  body .cloud-backup-action-buttons .button { width: 100%; }

  body #welcome-modal {
    padding: 10px 6px;
    align-items: flex-start;
  }

  body #welcome-modal .welcome-dialog {
    width: calc(100vw - 12px);
    margin: auto;
    padding: 20px 16px;
    gap: 18px;
    border-radius: 16px;
  }

  body #welcome-modal .onboarding-steps { gap: 13px; }
  body #welcome-modal .onboarding-step {
    grid-template-columns: 32px minmax(0, 1fr);
    padding: 14px;
    gap: 11px;
  }

  body #welcome-modal .onboarding-step-number {
    width: 30px;
    height: 30px;
  }

  body #welcome-modal .welcome-footer {
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
  }

  body #welcome-modal .welcome-footer .button { width: 100%; }

  body .timetable-shell {
    width: 100%;
    overflow-x: scroll;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }

  body .timetable-table {
    min-width: 680px;
    border-spacing: 7px;
  }

  body .timetable-slot-card,
  body .timetable-break-card,
  body .timetable-slot-empty { min-height: 104px; padding: 10px; }
  body .timetable-slot-card .item-title,
  body .timetable-break-title { font-size: 12px; }

  body .bottom-toolbar {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    min-height: 68px;
    padding: 4px 3px calc(4px + env(safe-area-inset-bottom, 0px));
    gap: 1px;
    overflow: visible;
  }

  body .bottom-toolbar > .toolbar-tab,
  body .bottom-toolbar > .nav-more {
    width: 100%;
    min-width: 0;
    max-width: none;
    margin: 0;
  }

  body .bottom-toolbar > .toolbar-tab,
  body .nav-more-toggle {
    width: 100%;
    min-width: 0;
    min-height: 52px;
    padding: 4px 1px;
    gap: 2px;
  }

  body .toolbar-icon,
  body .toolbar-icon img { width: 20px; height: 20px; }
  body .bottom-toolbar > .toolbar-tab .toolbar-label,
  body .nav-more-toggle .toolbar-label {
    display: block;
    width: 100%;
    overflow-wrap: anywhere;
    font-size: clamp(7px, 2.05vw, 9px);
    line-height: 1.08;
    text-align: center;
    white-space: normal;
  }

  body .nav-more-items {
    right: 6px;
    bottom: calc(70px + env(safe-area-inset-bottom, 0px));
    width: min(108px, calc(100vw - 12px));
    max-height: calc(100dvh - 82px - env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  body .nav-more-items .toolbar-tab {
    min-height: 47px;
    padding: 4px 2px;
  }

  body .nav-more-items .toolbar-icon,
  body .nav-more-items .toolbar-icon img {
    width: 18px;
    height: 18px;
  }

  body .nav-more-items .toolbar-label {
    font-size: 8px;
    line-height: 1.1;
  }

  body .programmations-list,
  body .backup-list,
  body .holiday-list,
  body .public-holiday-list {
    max-height: 68dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  body .timetable-shell,
  body .nav-more-items,
  body .programmations-list,
  body .backup-list,
  body .holiday-list,
  body .public-holiday-list,
  body .welcome-dialog {
    scrollbar-color: #9d94bc #eeeaf7;
    scrollbar-width: thin;
  }

  body .timetable-shell::-webkit-scrollbar,
  body .nav-more-items::-webkit-scrollbar,
  body .programmations-list::-webkit-scrollbar,
  body .backup-list::-webkit-scrollbar,
  body .holiday-list::-webkit-scrollbar,
  body .public-holiday-list::-webkit-scrollbar,
  body .welcome-dialog::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  body .timetable-shell::-webkit-scrollbar-thumb,
  body .nav-more-items::-webkit-scrollbar-thumb,
  body .programmations-list::-webkit-scrollbar-thumb,
  body .backup-list::-webkit-scrollbar-thumb,
  body .holiday-list::-webkit-scrollbar-thumb,
  body .public-holiday-list::-webkit-scrollbar-thumb,
  body .welcome-dialog::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: #9d94bc;
  }

  body .app-toast {
    right: 8px;
    bottom: calc(82px + env(safe-area-inset-bottom, 0px));
    width: calc(100vw - 16px);
    padding: 10px 11px;
    font-size: 10px;
  }
}

/* L'impression doit rester prioritaire sur les ajustements visuels déclarés plus haut. */
@media print {
  html body {
    padding: 0 !important;
  }

  body #view-timetable > .panel {
    border-top: 0 !important;
  }
}

/* Informations de la matière, regroupées au-dessus du séparateur. */
.journal-entry-heading {
  display: grid;
  grid-row: 3;
  gap: 0;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--subject-text, var(--muted));
  overflow-wrap: anywhere;
}

.journal-slot-copy {
  position: absolute;
  top: calc(50% - 1.2rem);
  right: 0.8rem;
  z-index: 2;
  transform: translateY(-50%);
}

body #view-journal .journal-slot-copy:hover,
body #view-journal .journal-slot-copy:focus-visible {
  transform: translateY(-50%) scale(1.025);
}

body #view-journal .journal-slot-copy:active {
  transform: translateY(-50%) scale(0.97);
}

.journal-week-subject-card .journal-entry-heading { grid-row: 2; }

/* Observations individuelles de la fiche élève. */
.student-observations-section .settings-card-heading > button { margin-left: auto; }
.student-observations-list { display: grid; gap: 0.65rem; margin: 0; padding: 0; list-style: none; }
.student-observation-item { display: flex; align-items: start; gap: 0.8rem; padding: 0.8rem; border: 1px solid var(--line); border-radius: 9px; }
.student-observation-item > span { flex: 1; min-width: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.student-observation-item .action-pills { flex-shrink: 0; }
#student-observation-editor[hidden] { display: none; }
body .student-form.is-read-mode #student-observation-text { padding: 10px; border: 1px solid var(--line); background: white; min-height: 90px; resize: vertical; }

.journal-notion-status { padding: 0 3.7rem 1rem 1rem; }
.journal-notion-status ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.journal-notion-status li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-size: 0.82rem; }
.journal-notion-status li > span { flex: 1; min-width: 100px; overflow-wrap: anywhere; }
.journal-notion-toggle { flex-shrink: 0; padding: 0.35rem 0.65rem; border: 1px solid #8b8792; border-radius: 999px; background: #fff; color: #514b5b; cursor: pointer; font-size: 0.75rem; }
.journal-notion-toggle.is-completed { background: #e0efdf; border-color: #718f7a; color: #31573a; }
.journal-notion-toggle:focus-visible { outline: 2px solid #6686a0; outline-offset: 2px; }
.journal-selected-notions .journal-notion-toggle { margin-left: 0.5rem; }

.journal-slot-card { cursor: pointer; }

.journal-notion-levels { display: inline-block; margin-left: 0.5rem; padding: 0.15rem 0.45rem; border-radius: 999px; background: #eeeaf7; color: #61548f; font-size: 0.75rem; font-weight: 600; vertical-align: middle; }

/* Actions de carte en haut à droite, sans recouvrir le contenu. */
body #view-journal .journal-slot-copy,
body #view-journal .journal-slot-delete { top: 0.65rem; transform: none; }
body #view-journal .journal-slot-delete { right: 0.65rem; }
body #view-journal .journal-slot-copy { right: 3.05rem; }
body #view-journal .journal-slot-copy:hover,
body #view-journal .journal-slot-copy:focus-visible,
body #view-journal .journal-slot-delete:hover,
body #view-journal .journal-slot-delete:focus-visible { transform: scale(1.025); }
body #view-journal .journal-slot-copy:active,
body #view-journal .journal-slot-delete:active { transform: scale(0.97); }
.journal-slot-open { padding-right: 6rem; }
body .journal-editor-actions { display: flex; flex-direction: row; align-items: center; }
.journal-editor-actions > [type="submit"] { margin-left: auto; }
body .icon-pill-save { flex: 0 0 auto; padding: 0; }
body .icon-pill-save > img { width: 27px; height: 27px; object-fit: contain; }

.install-app-dialog { width: min(440px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow-y: auto; padding: 24px; border: 1px solid var(--line); border-radius: 18px; background: #f8f7f4; color: var(--ink); box-shadow: 0 20px 60px #0003; }
.install-app-dialog::backdrop { background: #27213280; }
.install-app-logo { display: block; width: 64px; height: 64px; object-fit: contain; margin-bottom: 16px; }
.install-app-dialog h2 { font-size: 1.3rem; }
.install-app-dialog p { line-height: 1.6; }
.install-app-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin: 20px 0 10px; }
#install-app-confirm[hidden] { display: none !important; }

/* APC */
[data-view="apc"][hidden], #apc-form[hidden], #apc-until-label[hidden], #settings-apc-hours-label[hidden], #welcome-apc-hours-label[hidden] { display: none !important; }
.apc-summary { margin-bottom: 1.5rem; }
.apc-counters { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: .75rem; }
.apc-summary progress { width: 100%; height: 1rem; accent-color: var(--accent, #528777); }
#apc-form { margin-bottom: 1.5rem; padding: 1rem; border: 1px solid #dce4df; border-radius: 16px; }
#apc-form fieldset { margin: 1rem 0; border: 1px solid #dce4df; border-radius: 12px; }
.apc-text { white-space: pre-wrap; overflow-wrap: anywhere; }
#apc-error { color: #a32c35; }

/* Carte APC des paramètres : activation et volume annuel regroupés. */
.settings-apc-fields {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
}
.settings-apc-fields .settings-apc-toggle {
  flex-direction: row;
  align-items: center;
  gap: .65rem;
  cursor: pointer;
}
.settings-apc-toggle input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  margin: 0;
  padding: 0;
  accent-color: var(--primary);
}
.settings-apc-fields #settings-apc-hours-label {
  width: 240px;
  max-width: 100%;
}

.apc-student-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)); gap: .5rem; padding: .5rem 0; }
.apc-student-card { position: relative; cursor: pointer; min-width: 0; }
.apc-student-card > input { position: absolute; width: 1px; height: 1px; opacity: 0; padding: 0; }
.apc-student-card-content { display: flex; align-items: center; gap: .5rem; padding: .5rem; border: 1px solid var(--line); border-radius: 12px; min-height: 60px; background: var(--surface-strong); }
.apc-student-card input:checked + .apc-student-card-content { border-color: var(--primary); background: #eee9f8; box-shadow: inset 0 0 0 1px var(--primary); }
.apc-student-card input:focus-visible + .apc-student-card-content { outline: 2px solid var(--primary); outline-offset: 3px; }
.apc-student-portrait { display: grid; place-items: center; width: 36px; height: 36px; flex: 0 0 36px; border-radius: 50%; overflow: hidden; background: #e8e1f3; color: var(--primary); font-size: .8rem; }
.apc-student-portrait img { width: 100%; height: 100%; object-fit: cover; }
.apc-student-name { display: flex; flex-direction: column; min-width: 0; font-size: .8rem; line-height: 1.3; overflow-wrap: anywhere; }
.apc-student-name > span { font-weight: 400; }
.apc-student-check { margin-left: auto; color: var(--primary); visibility: hidden; }
.apc-student-card input:checked + .apc-student-card-content .apc-student-check { visibility: visible; }
.apc-new-student { margin-top: .75rem; }
.apc-new-student summary { cursor: pointer; font-weight: 700; }
.apc-new-student-fields { display: flex; flex-wrap: wrap; align-items: end; gap: .75rem; padding-top: .75rem; }
.apc-new-student-fields label { flex: 1 1 140px; min-width: 0; }
#apc-student-error { color: #a32c35; }

/* Mettre en avant le chargement quand Drive contient la version récente. */
#cloud-backup-load-button.drive-load-recommended {
  background: #7968ad;
  color: #fff;
  animation: drive-load-pulse 2s ease-in-out infinite;
}
@keyframes drive-load-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(121, 104, 173, .35); }
  50% { box-shadow: 0 0 0 6px rgba(121, 104, 173, 0); }
}
@media (prefers-reduced-motion: reduce) {
  #cloud-backup-load-button.drive-load-recommended { animation: none; }
}

#apc-add[hidden], #apc-save-top[hidden] { display: none !important; }
.apc-new-student summary.button { display: inline-flex; list-style: none; }
.apc-new-student summary.button::-webkit-details-marker { display: none; }
.apc-completed-switch { flex-direction: row; align-items: center; gap: 1rem; width: fit-content; cursor: pointer; }
.apc-completed-switch input[role="switch"] { appearance: none; width: 42px; height: 24px; flex: 0 0 42px; padding: 2px; margin: 0; border: 0; border-radius: 999px; background: #b8b4c4; cursor: pointer; transition: background .2s; }
.apc-completed-switch input::before { content: ""; display: block; width: 20px; height: 20px; background: #fff; border-radius: 50%; box-shadow: 0 1px 3px #0002; transition: transform .2s; }
.apc-completed-switch input:checked { background: #7968ad; }
.apc-completed-switch input:checked::before { transform: translateX(18px); }
.apc-completed-switch input:focus-visible { outline: 2px solid #7968ad; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .apc-completed-switch input, .apc-completed-switch input::before { transition: none; } }

#apc-form > .form-actions { justify-content: flex-end; }

#apc-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: .85rem; }
.apc-session-card { position: relative; isolation: isolate; min-width: 0; padding: 1rem; border: 1px solid #ddd4f1; border-left: 5px solid #9380c5; border-radius: 16px; background: #f3effb; box-shadow: 0 3px 10px #5140750a; }
.apc-session-card:nth-child(3n+2) { background: #eef5fc; border-color: #d1e2f2; border-left-color: #7caacb; }
.apc-session-card:nth-child(3n+3) { background: #fff6e9; border-color: #efdfc5; border-left-color: #d8ad65; }
.apc-session-card.is-completed { background: #eef7f0; border-color: #cee4d3; border-left-color: #79ad87; }
.apc-session-card:hover { box-shadow: 0 4px 14px #5140751a; }
.apc-session-open { position: absolute; inset: 0; z-index: 1; width: 100%; border: 0; border-radius: 16px; padding: 0; background: transparent; cursor: pointer; }
.apc-session-open:focus-visible { outline: 3px solid #7968ad; outline-offset: 3px; }
.apc-session-actions { position: absolute; top: .65rem; right: .65rem; display: flex; gap: .4rem; z-index: 2; }
.apc-session-pill { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; color: #fff; font-size: 1.15rem; font-weight: 800; line-height: 1; cursor: pointer; box-shadow: 0 2px 4px #0001; }
.apc-session-validate { background: #388250; }
.apc-session-delete { background: #c64d5d; }
.apc-session-pill:focus-visible { outline: 2px solid #44325f; outline-offset: 3px; }
.apc-session-date { margin: 0 65px .6rem 0; font-size: .95rem; line-height: 1.4; color: #443653; }
.apc-session-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .6rem; }
.apc-session-tags span { padding: .2rem .55rem; border-radius: 999px; background: #ffffffb3; color: #554666; font-size: .75rem; font-weight: 700; }
.apc-session-tags .apc-session-done { background: #d6ecdc; color: #28643b; }
.apc-session-excerpt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: .35rem 0; font-size: .82rem; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.apc-session-excerpt strong { color: #554666; }
.apc-session-students { margin: .65rem 0 0; font-size: .78rem; color: #635e70; overflow-wrap: anywhere; }

/* Grille hebdomadaire entière sur téléphone, y compris en paysage. */
.timetable-landscape-hint { display: none; }
@media screen and (max-width: 600px), screen and (max-width: 1000px) and (max-height: 600px) and (pointer: coarse) {
  body #view-timetable { min-width: 0; width: 100%; }
  body #view-timetable > .panel { padding: 8px; min-width: 0; }
  body #view-timetable .panel-heading { gap: 6px; margin-bottom: 8px; }
  body #view-timetable h2 { font-size: 16px; }
  body #view-timetable .eyebrow { font-size: 8px; margin-bottom: 3px; }
  body #view-timetable .timetable-file-manager { grid-template-columns: 1fr; padding: 8px; gap: 6px; margin-bottom: 8px; }
  body #view-timetable .timetable-current-main h3 { font-size: 12px; margin: 2px 0; }
  body #view-timetable .timetable-file-controls { gap: 4px; justify-content: flex-start; }
  body #view-timetable .timetable-file-select { flex: 1 1 120px; font-size: 9px; min-width: 0; }
  body #view-timetable .timetable-file-select select { padding: 5px; min-height: 30px; font-size: 11px; }
  body #view-timetable .button { padding: 5px 7px; min-height: 30px; font-size: 10px; }
  body #view-timetable .timetable-file-action img { width: 14px; height: 14px; }
  body #view-timetable .icon-pill { width: 30px; height: 30px; min-width: 30px; min-height: 30px; }
  body #view-timetable .icon-pill img { width: 20px; height: 20px; }
  body #view-timetable .timetable-table-action { margin: 6px 0; }
  body #view-timetable .timetable-shell { width: 100%; max-width: 100%; overflow: visible; }
  body #view-timetable .timetable-table { width: 100%; min-width: 0; table-layout: fixed; border-spacing: 3px; }
  body #view-timetable .timetable-table th { padding: 3px 0; font-size: 10px; overflow-wrap: anywhere; }
  body #view-timetable .timetable-time-head,
  body #view-timetable .timetable-time-cell { width: 39px; }
  body #view-timetable .timetable-time-cell { padding: 5px 2px; border-radius: 7px; }
  body #view-timetable .slot-time { font-size: 9px; line-height: 1.3; white-space: normal; margin: 0; }
  body #view-timetable .timetable-slot-cell { min-width: 0; }
  body #view-timetable .timetable-slot-card,
  body #view-timetable .timetable-break-card,
  body #view-timetable .timetable-slot-empty { min-width: 0; min-height: 54px; padding: 5px 3px; border-radius: 8px; gap: 3px; overflow-wrap: anywhere; }
  body #view-timetable .timetable-slot-card .item-title,
  body #view-timetable .timetable-break-title { font-size: 10px; line-height: 1.2; margin: 0; }
  body #view-timetable .list-meta,
  body #view-timetable .list-notes,
  body #view-timetable .timetable-slot-days,
  body #view-timetable .timetable-break-service,
  body #view-timetable .timetable-slot-empty { font-size: 9px; line-height: 1.25; margin: 2px 0; }
  body #view-timetable .timetable-slot-header { flex-wrap: wrap; gap: 3px; }
  body #view-timetable .timetable-slot-header > .action-pills { position: static; flex-wrap: wrap; justify-content: center; gap: 2px; }
  body #view-timetable .action-pill { width: 24px; height: 24px; min-width: 24px; min-height: 24px; padding: 4px; }
  body #view-timetable .action-pill svg { width: 14px; height: 14px; }
}
@media screen and (max-width: 600px) and (orientation: portrait) {
  body #view-timetable .timetable-landscape-hint { display: block; font-size: 10px; color: var(--muted); margin: 6px 0; }
}
@media screen and (max-width: 1000px) and (max-height: 600px) and (orientation: landscape) and (pointer: coarse) {
  body:has(#view-timetable.active) .page-shell { width: calc(100% - 12px); max-width: none; margin-inline: auto; }
  body #view-timetable .timetable-file-manager { grid-template-columns: minmax(110px, .6fr) minmax(0, 2fr); }
}

/* Édition des plages : formulaire dense sur téléphone, portrait et paysage. */
@media screen and (max-width: 600px), screen and (max-width: 1000px) and (max-height: 600px) and (pointer: coarse) {
  body #view-timetable-editor { width: 100%; min-width: 0; }
  body #view-timetable-editor > .panel { padding: 8px; border-radius: 10px; }
  body #view-timetable-editor .panel-heading { margin-bottom: 8px; gap: 5px; }
  body #view-timetable-editor h2 { font-size: 16px; line-height: 1.2; margin: 2px 0; }
  body #view-timetable-editor h3 { font-size: 12px; line-height: 1.2; margin: 0; }
  body #view-timetable-editor .eyebrow { font-size: 8px; margin: 0 0 3px; }
  body #view-timetable-editor .list-meta,
  body #view-timetable-editor small,
  body #view-timetable-editor .field-optional { font-size: 9px; line-height: 1.25; margin: 3px 0; }
  body #view-timetable-editor .form-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  body #view-timetable-editor .span-3 { grid-column: 1 / -1; }
  body #view-timetable-editor .settings-block { padding: 8px; border-radius: 9px; min-width: 0; }
  body #view-timetable-editor .settings-block-heading { gap: 5px; margin-bottom: 5px; }
  body #view-timetable-editor label { min-width: 0; gap: 3px; font-size: 10px; line-height: 1.25; }
  body #view-timetable-editor input:not([type="checkbox"]),
  body #view-timetable-editor select,
  body #view-timetable-editor textarea { box-sizing: border-box; width: 100%; min-width: 0; max-width: 100%; min-height: 30px; padding: 5px 6px; border-radius: 7px; font-size: 12px; line-height: 1.25; }
  body #view-timetable-editor textarea { min-height: 48px; }
  body #view-timetable-editor input[type="time"] { padding-inline: 2px; }
  body #view-timetable-editor .checkbox-grid { grid-template-columns: repeat(auto-fit, minmax(75px, 1fr)); gap: 4px; }
  body #view-timetable-editor .checkbox-chip { padding: 5px; gap: 4px; border-radius: 7px; min-height: 30px; }
  body #view-timetable-editor input[type="checkbox"] { width: 14px; height: 14px; flex: 0 0 14px; margin: 0; }
  body #view-timetable-editor .timetable-activities-list { gap: 6px; }
  body #view-timetable-editor .timetable-activity-card .compact-form { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 5px; }
  body #view-timetable-editor .button { min-height: 30px; padding: 5px 8px; font-size: 10px; border-radius: 8px; }
  body #view-timetable-editor .icon-pill { width: 30px; height: 30px; min-width: 30px; min-height: 30px; }
  body #view-timetable-editor .icon-pill img { width: 20px; height: 20px; }
  body #view-timetable-editor .timetable-editor-actions { display: flex; flex-direction: row; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
  body #view-timetable-editor .break-service-toggle { gap: 6px; }
}

#timetable-print-title { display: none; }
@media print {
  #view-timetable #close-timetable-view-button,
  #view-timetable .timetable-screen-title { display: none !important; }
  #view-timetable #timetable-print-title { display: block !important; }
}

/* Meeting form: aligned fields and an always available composer. */
body #meeting-form { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px 16px; }
body #meeting-form > .span-3 { grid-column: 1 / -1; }
body #meeting-form > label { min-width: 0; align-content: start; }
body #meeting-form > label > input { width: 100%; min-width: 0; box-sizing: border-box; }
body #meeting-form .meeting-items-field { margin-top: 8px; padding-top: 24px; border-top: 1px solid #e4e2dd; }
body #meeting-form .meeting-items-field h3 { margin: 0; }
body #meeting-form .meeting-items-field .list-meta { margin: 6px 0 0; line-height: 1.5; }
body #meeting-form .meeting-items-list { gap: 12px; }
body #meeting-form .meeting-item-row { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0; overflow: hidden; }
body #meeting-form .meeting-item-row.is-editing:focus-within { border-color: #718f7a; box-shadow: 0 0 0 3px rgba(113,143,122,.12); }
body #meeting-form .meeting-item-row > textarea { grid-column: auto; min-height: 112px; border: 0; border-radius: 0; box-shadow: none; padding: 16px; resize: vertical; background: transparent; }
body #meeting-form .meeting-item-row > textarea:focus { outline: none; }
body #meeting-form .meeting-item-toolbar { display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: 10px; padding: 10px 12px; background: #fafaf7; border-top: 1px solid #eeede8; }
body #meeting-form .meeting-agenda-toggle { display: inline-flex; flex-direction: row; margin: 0; min-height: 40px; cursor: pointer; }
body #meeting-form .meeting-agenda-toggle input { width: 18px; height: 18px; margin: 0; accent-color: #718f7a; }
body #meeting-form .meeting-item-toolbar > input[type="date"] { width: 155px; min-width: 0; min-height: 40px; }
body #meeting-form .meeting-item-toolbar > input[hidden] { display: none; }
body #meeting-form .meeting-item-validate { width: auto; min-height: 40px; padding: 0 18px; border-radius: 8px; font-size: 14px; font-weight: 600; }
body #meeting-form .meeting-item-row.is-saved { grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: 8px 12px; }
body #meeting-form .is-saved .meeting-item-toolbar { padding: 0; border: 0; background: transparent; }
body #meeting-form .is-saved .meeting-agenda-toggle,
body #meeting-form .is-saved .meeting-item-toolbar > input { display: none; }
body #meeting-form .meeting-item-saved-text { overflow-wrap: anywhere; }
body #meeting-modal > .panel-heading { align-items: center; gap: 16px; }
@media (max-width: 700px) {
  body #meeting-form { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
  body #meeting-form > label { grid-column: auto; }
  body #meeting-form > .span-3 { grid-column: 1 / -1; }
  body #meeting-modal { padding: 18px 14px; }
  body #meeting-modal > .panel-heading { flex-direction: row; align-items: flex-start; }
  body #meeting-modal h2 { font-size: 22px; }
  body #meeting-form .meeting-item-toolbar { gap: 8px; }
  body #meeting-form .meeting-item-toolbar > input[type="date"] { order: -1; width: 100%; }
  body #meeting-form .meeting-item-saved-view { grid-template-columns: auto minmax(0, 1fr); }
  body #meeting-form .meeting-item-saved-date { grid-column: 2; }
}

/* Agenda: clear field groups, shared layout for creation and editing. */
body #view-event-editor > .panel { width: 100%; }
body #view-event-editor .panel-heading { flex-direction: row; align-items: center; gap: 16px; }
body #view-event-editor .panel-heading > div { min-width: 0; }
body #close-event-editor-button { flex-shrink: 0; }
body #event-form { grid-template-columns: minmax(0, 1fr); gap: 24px; margin-bottom: 0; }
body #event-form .event-form-section { min-width: 0; margin: 0; padding: 16px 0 0; border: 0; border-top: 1px solid var(--line); }
body #event-form legend { padding: 0 12px 0 0; color: var(--ink); font-size: 16px; font-weight: 700; }
body #event-form .event-details-grid { display: grid; align-items: end; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 16px; }
body #event-form .event-schedule-grid { display: grid; align-items: end; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
body #event-form .event-all-day-option { grid-column: 1 / -1; width: fit-content; }
body #event-form .event-notes-grid { display: grid; gap: 16px; }
body #event-form label { min-width: 0; align-content: start; }
body #event-form label > input,
body #event-form label > select,
body #event-form label > textarea { width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; }
body #event-form label > input,
body #event-form label > select { min-height: 46px; }
body #event-form textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
body #event-form .event-editor-footer { flex-direction: row; justify-content: flex-end; align-items: center; padding-top: 16px; border-top: 1px solid var(--line); }
body #event-submit-button { width: 54px; height: 54px; }
@media (max-width: 900px) {
  body #event-form .event-schedule-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  body #view-event-editor > .panel { padding: 18px 14px; }
  body #view-event-editor .panel-heading { align-items: flex-start; }
  body #event-editor-title { font-size: 22px; }
  body #event-form { gap: 22px; }
  body #event-form .event-details-grid { grid-template-columns: minmax(0, 1fr); }
  body #event-form .event-schedule-grid { gap: 16px 12px; }
}
@media (max-width: 380px) {
  body #event-form .event-schedule-grid { grid-template-columns: minmax(0, 1fr); }
}