/* Timetable grids */
.tt { table-layout: fixed; border-collapse: collapse; width: 100%; font-size: .85rem; }
.tt th, .tt td { border: 1px solid #adb5bd; text-align: center; vertical-align: middle; padding: .2rem; }
.tt thead th { background: #e9ecef; }
.tt th.row-head { width: 6.5rem; background: #f1f3f5; }
.tt td.break, .tt th.break { width: 1.6rem; background: #dee2e6; writing-mode: vertical-rl; font-size: .7rem; padding: 0; }
.tt td.empty { background: #f8f9fa; }
.tt .subj { font-weight: 600; display: block; line-height: 1.15; }
.tt .tchr { font-size: .72rem; color: #495057; display: block; line-height: 1.1; }
.tt td.fixed { background-image: repeating-linear-gradient(45deg, transparent 0 6px, rgba(0,0,0,.04) 6px 12px); }
.tt td.unavailable { background: #f1f3f5; color: #adb5bd; }
.tt td { position: relative; }
.tt tr.spacer td { height: .6rem; border: none; background: transparent; padding: 0; }

/* teacher colour: a triangle in the top-left corner, as in the aSc PDF */
.tt .tri { position: absolute; top: 0; left: 0; width: 13px; height: 13px; background: var(--tc);
           clip-path: polygon(0 0, 100% 0, 0 100%); filter: drop-shadow(0 0 .4px #555);
           -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.tt .tri.tri-2 { width: 7px; height: 7px; }
[dir="rtl"] .tt .tri { left: auto; right: 0; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.swatch { display: inline-block; width: .9em; height: .9em; border: 1px solid #888; vertical-align: -.1em; }

/* change highlights */
.tt td.k-moved { background: #fff3cd; }
.tt td.k-added { background: #d1e7dd; }
.tt td.k-cover { background: #cfe2ff; }
.tt td.k-home  { background: #e2e3e5; color: #41464b; }
.tt .icon-leave { vertical-align: -2px; }
[dir="rtl"] .tt .icon-leave { transform: scaleX(-1); }   /* the arrow points out of the door in Arabic too */
.tt td.k-hole  { background: #f8d7da; text-decoration: line-through; color: #842029; }
.tt td.exam    { outline: 3px solid #6f42c1; outline-offset: -3px; }
.tt td.k-trip  { background: #e2d9f3; color: #432874; }
.tt td.past    { color: #6c757d; }
.tt .from { font-size: .68rem; color: #664d03; display: block; }
/* 'side': class at the start of the cell, subject at the end (the aSc teachers sheet) */
.tt.side td { text-align: start; }
.tt.side .subj, .tt.side .tchr { display: inline; font-size: inherit; color: inherit; }
.tt.side .tchr { float: inline-end; }
.tt.side .from { clear: both; }
.legend span { display: inline-block; padding: 0 .5rem; margin-right: .4rem; border: 1px solid #adb5bd; font-size: .8rem; }
/* on a phone a grid keeps a readable width and scrolls sideways; the class column stays in view */
.tt-scroll { overflow-x: auto; }
@media (max-width: 767.98px) {
  .tt { min-width: 44rem; }
  .tt th.row-head { width: 5rem; position: sticky; inset-inline-start: -1px; z-index: 2; box-shadow: inset -1px 0 #adb5bd; }
  [dir="rtl"] .tt th.row-head { box-shadow: inset 1px 0 #adb5bd; }
}

.option-card.best { border-color: #198754; border-width: 2px; }

/* absence period picker: green = here, red = away */
.slot-picker { display: flex; flex-wrap: wrap; gap: 4px; }
.slot { position: relative; margin: 0; }
.slot input { position: absolute; opacity: 0; width: 0; height: 0; }
.slot span { display: inline-flex; align-items: center; justify-content: center; width: 2.3rem; height: 2.3rem;
             background: #d1e7dd; border: 1px solid #75b798; border-radius: .35rem; color: #0f5132;
             font-weight: 600; cursor: pointer; user-select: none; }
.slot input:checked + span { background: #f8d7da; border-color: #ea868f; color: #842029; }
.slot input:focus-visible + span { outline: 2px solid #0d6efd; outline-offset: 1px; }
.slot-break { width: .9rem; }
/* on a phone all the period squares share one row */
@media (max-width: 575.98px) {
  .slot-picker { flex-wrap: nowrap; }
  .slot { flex: 1 1 0; min-width: 0; max-width: 3.2rem; }
  .slot span { width: 100%; height: 2.8rem; }
  .slot-break { flex: none; width: .6rem; }
}

/* plan page: request type badges, tap-to-select buttons, icons */
.req-kind { font-weight: 600; }
.req-details { display: grid; grid-template-columns: auto 1fr; gap: 0 .75rem; }
.req-details dt { font-weight: 600; }
.req-details dd { margin: 0; }
.req-absence { background: #f8d7da; color: #842029; }
.req-trip    { background: #e2d9f3; color: #432874; }
.req-meeting { background: #ffe5d0; color: #984c0c; }
.req-exam    { background: #e0cffc; color: #3d0a91; }
.req-classes { background: #cff4fc; color: #055160; }
.toggles { display: flex; flex-wrap: wrap; gap: .35rem; }
.toggles-scroll { max-height: 12rem; overflow-y: auto; padding: .35rem; border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius); }
.bi { vertical-align: -.125em; }

/* teacher time-off grid: same green/red as the absence squares, amber = conditional */
.timeoff { border-collapse: separate; border-spacing: 4px; }
.timeoff th { text-align: center; font-weight: 600; padding: .2rem .4rem; cursor: pointer; user-select: none; }
.timeoff th[data-row] { text-align: start; min-width: 6.5rem; }
.timeoff .to-break { width: .8rem; cursor: default; }
.to-cell, .to-key { width: 4.6rem; height: 3.1rem; text-align: center; vertical-align: middle; cursor: pointer;
                    user-select: none; border: 1px solid; border-radius: .35rem; line-height: 1.05; }
.to-key { display: inline-block; width: 1.6rem; height: 1.6rem; line-height: 1.5rem; cursor: default; }
[data-state="ok"].to-cell, [data-state="ok"].to-key { background: #d1e7dd; border-color: #75b798; color: #0f5132; }
[data-state="off"].to-cell, [data-state="off"].to-key { background: #f8d7da; border-color: #ea868f; color: #842029; }
[data-state="cond"].to-cell, [data-state="cond"].to-key { background: #fff3cd; border-color: #ffc107; color: #664d03; }
.to-cell.has-lesson, .to-key.has-lesson { box-shadow: inset 0 0 0 3px #6c757d; }
.to-cell:focus-visible { outline: 2px solid #0d6efd; outline-offset: 1px; }
.to-mark { display: block; font-size: 1.2rem; font-weight: 700; }
.to-lesson { display: block; font-size: .68rem; color: #343a40; }

/* touch screens: small buttons, fields and tick boxes are made big enough for a finger.
   16px text in fields also stops iPhones zooming in when a field is tapped. */
@media (pointer: coarse) {
  .btn-sm { --bs-btn-padding-y: .45rem; --bs-btn-padding-x: .8rem; --bs-btn-font-size: .95rem; }
  .form-control-sm, .form-select-sm { min-height: 2.6rem; font-size: 1rem; }
  .form-check-input:not([role="switch"]) { width: 1.35em; height: 1.35em; }
  .form-switch { padding-inline-start: 3.2em; }
  .form-switch .form-check-input { width: 2.6em; height: 1.4em; margin-inline-start: -3.2em; }
  .nav-underline .nav-link { padding-top: .6rem; padding-bottom: .6rem; }
  .navbar-nav .nav-link, .dropdown-item { padding-top: .6rem; padding-bottom: .6rem; }
}

@media print {
  @page { size: A4 landscape; margin: 8mm; }
  body { font-size: 10pt; }
  main { padding: 0 !important; }
  .card { border: none !important; }
  .tt { font-size: 8.5pt; page-break-inside: avoid; }
  .tt td.k-moved, .tt td.k-added, .tt td.k-cover, .tt td.k-home, .tt td.k-trip { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .print-break { page-break-before: always; }
}

/* exported schedule image (planning/_export_sheet.html): the layout of the aSc "By Day" sheet */
.sheet { font-family: Arial, Helvetica, sans-serif; color: #000; background: #fff; }
.sheet-head { position: relative; text-align: center; margin-bottom: 4px; }
.sheet-top { font-size: 18px; }
.sheet-day { font-family: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif; font-weight: 700;
             font-size: 64px; line-height: 1; }
.sheet-school { position: absolute; inset-inline-start: 0; bottom: 2px; font-size: 16px; }
.sheet-table { width: 100%; table-layout: fixed; border-collapse: collapse; border: 3px solid #000; }
.sheet-table th, .sheet-table td { border: 1px solid #000; text-align: center; vertical-align: middle; padding: 0; }
.sheet-table thead th { height: 92px; border-bottom-width: 3px; font-weight: 400; }
.sheet-corner { width: 11%; }
.sheet-num { font-family: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif; font-weight: 700;
             font-size: 32px; line-height: 1.2; }
.sheet-time { font-size: 15px; }
.sheet-class { font-family: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif; font-size: 26px;
               border-inline-end-width: 2px !important; }
.sheet-break span { display: inline-block; writing-mode: vertical-rl; transform: rotate(180deg);
                    font-family: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif; font-size: 30px; }
.sheet-cell { position: relative; height: 70px; padding: 6px 2px 3px !important; }
.sheet-subj { font-family: "Times New Roman", Times, serif; font-size: 25px; line-height: 1.1; }
.sheet-tchr { font-size: 11.5px; margin-top: 2px; }
.sheet-note { font-size: 11.5px; font-style: italic; }
.sheet-tri { position: absolute; top: 0; inset-inline-start: 0; width: 26px; height: 26px; background: var(--tc);
             clip-path: polygon(0 0, 100% 0, 0 100%); }
[dir="rtl"] .sheet-tri { clip-path: polygon(0 0, 100% 0, 100% 100%); }
.sheet-tri.sheet-tri-2 { width: 13px; height: 13px; }
.sheet .icon-leave { width: 22px; height: 22px; }
/* changes stand out, the rest stays white like the original */
.sheet .k-moved { background: #fff3cd; }
.sheet .k-added { background: #d1e7dd; }
.sheet .k-cover { background: #cfe2ff; }
.sheet .k-home  { background: #e2e3e5; color: #41464b; }
.sheet .k-home .sheet-subj { font-size: 19px; }
.sheet .k-trip  { background: #e2d9f3; color: #432874; }
.sheet .sheet-cell.exam { outline: 3px solid #6f42c1; outline-offset: -3px; }
.sheet-foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 4px;
              font-size: 15px; }
.sheet-legend span { display: inline-block; padding: 0 8px; margin-inline-end: 6px; border: 1px solid #000; }

/* the Export window (planning/day.html) */
.export-preview { text-align: center; }
.export-preview img { max-width: 100%; cursor: zoom-in; }
.export-preview.zoomed { text-align: start; }
.export-preview.zoomed img { max-width: none; cursor: zoom-out; }   /* full size, scroll to look around */
.export-busy { display: flex; flex-direction: column; align-items: center; gap: .75rem; padding: 3rem 0; color: #6c757d; }
.export-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: .5rem; width: 100%; }
.export-options { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
                  gap: .5rem; width: 100%; margin-bottom: .25rem; }
@media (min-width: 768px) {
  .export-actions { display: flex; width: auto; }
  .export-options { width: auto; margin: 0; margin-inline-end: auto; gap: 1.5rem; }
  .export-preview:not(.zoomed) img { max-height: calc(100vh - 15rem); }   /* the whole sheet in view on a PC */
}