/* The week timetable component (templates/timetable.html, drawn by static/js/timetable.js), on every page that includes it. */

  .szc { --row: #ffffff; --row-alt: #f6f6f6; --line: #e6e6e6; --teal: #45b29d; --ink: #333; --muted: #888;
         font-family: Poppins, Helvetica, Arial, sans-serif; color: var(--ink); margin: 10px 0 40px; }
  .szc-head, .szc-body { display: grid; grid-template-columns: 64px repeat(7, 1fr); }
  .szc-head { position: sticky; top: 0; z-index: 3; background: #fff; border-bottom: 2px solid var(--teal); }
  .szc-head div { padding: 10px 6px; text-align: center; font-weight: 600; font-size: 14px; line-height: 1.3; }
  .szc-head div span { display: block; font-weight: 400; color: var(--muted); font-size: 13px; }
  .szc-head div.today { color: var(--teal); }
  .szc-body { position: relative; }
  .szc-times { position: relative; }
  .szc-time { position: absolute; left: 0; right: 8px; text-align: right; font-size: 12px; color: var(--muted); transform: translateY(-8px); }
  .szc-day { position: relative; border-left: 1px solid var(--line); }
  .szc-band { position: absolute; left: 0; right: 0; border-bottom: 1px solid var(--line); }
  .szc-band.alt { background: var(--row-alt); }
  .szc-band.idle { background-image: repeating-linear-gradient(135deg, transparent 0 6px, rgba(0,0,0,.025) 6px 7px); }
  .szc-class { position: absolute; left: 5px; right: 5px; border-radius: 6px; border-left: 4px solid var(--c);
               background: var(--tint); padding: 7px 9px 8px; overflow: hidden; box-sizing: border-box;
               display: flex; flex-direction: column; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
  .szc-class h4 { flex-shrink: 0; margin: 0; font-family: Poppins, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.3; color: var(--ink); letter-spacing: 0;
                  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .szc-class .when { margin-top: 3px; font-size: 14px; font-weight: 700; color: var(--dark); }
  /* The price under the time: the amount, „Ingyenes" in teal, „Adomány" in purple. */
  .szc-class .price, .szn-row .price { font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; margin-top: 2px; }
  .szc-class .price.free, .szn-row .price.free { color: #1a8f78; }
  .szc-class .price.donation, .szn-row .price.donation { color: #915291; }
  .szc-class .act { margin-top: auto; padding-top: 6px; display: flex; align-items: center; gap: 6px; }
  .szc-book { border: 0; background: var(--teal); color: #fff; font: 600 13px Poppins, sans-serif; white-space: nowrap;
              padding: 5px 11px; border-radius: 4px; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; line-height: 1.3; }
  .szc-book svg { width: 15px; height: 15px; flex: none; display: none; }
  /* A box too narrow for the label: the button keeps only its icon (the label stays as the tooltip). */
  .szc-class { container-type: inline-size; }
  .szc-class .when { white-space: nowrap; }
  @container (max-width: 104px) {
    .szc-book { padding: 6px 8px; } .szc-book span { display: none; } .szc-book svg { display: block; }
    .szc-class h4 { font-size: 13px; } .szc-class .when { font-size: 12px; letter-spacing: -.2px; }
  }
  .szc-book:hover { filter: brightness(.93); }
  .szc-book.change { background: #fff; color: var(--teal); box-shadow: inset 0 0 0 1.5px var(--teal); text-decoration: none; display: inline-block; }
  .szc-book.wait { background: #915291; }
  .szc-class h4 .mine { display: inline-flex; vertical-align: -3px; margin-right: 4px; color: var(--teal); }
  .szc-class h4 .mine svg { width: 16px; height: 16px; }
  .szc-state { font-size: 12px; font-weight: 600; color: var(--muted); display: inline-flex; align-items: center; gap: 5px; }
  .szc-state svg { width: 18px; height: 18px; }
  /* the booking panel: anchored to the class, the page stays visible around it */
  .szc-veil { position: fixed; inset: 0; background: rgba(255,255,255,.35); z-index: 20; display: none; }
  .szc-pop { --teal: #45b29d; --muted: #888; position: absolute; z-index: 21; width: 300px; background: rgba(255,255,255,.97); border-radius: 10px;
             box-shadow: 0 10px 30px rgba(0,0,0,.18); border-top: 4px solid var(--c, var(--teal)); padding: 16px 18px 18px; display: none; }
  .szc-pop .x { position: absolute; top: 10px; right: 12px; border: 0; background: none; font-size: 20px; color: var(--muted); cursor: pointer; }


  .szc-class { cursor: pointer; }
  .szc-class.past, .szc-class.full { cursor: default; }
  .szc-class.past { opacity: .45; }
  .szc-class.highlight { outline: 3px solid var(--c); outline-offset: 1px; }
  .szc-loading, .szc-error { grid-column: 1 / -1; padding: 30px; text-align: center; color: var(--muted); }
  .szc-error:empty { display: none; }
  /* the week between its two arrows; the title opens a date picker */
  .szc-section { margin: 10px 0 0; }
  .szc-nav { display: flex; align-items: center; gap: 14px; margin: 6px 0 18px; position: relative; flex-wrap: nowrap; }
  .szc-arrow { flex: none; width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid #ddd; background: #fff; color: #555;
               display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
  .szc-arrow:hover { border-color: #45b29d; color: #45b29d; }
  .szc-arrow svg { width: 20px; height: 20px; }
  .szc-week-title { cursor: pointer; font-size: 32px !important; line-height: 1.2 !important; margin: 0 !important; white-space: nowrap; }
  .szc-week-title:hover { color: #45b29d; }
  @media (max-width: 480px) { .szc-week-title { font-size: 24px !important; } }
  #szc-week-pick { position: absolute; left: 50px; bottom: 0; opacity: 0; pointer-events: none; width: 1px; height: 1px; }

/* The narrow layout: one list of the week's classes, the booking folding out inside a class's card. */
  .szn { display: none; --teal: #45b29d; --ink: #333; --muted: #888; --line: #e9e9e9; font-family: Poppins, Helvetica, Arial, sans-serif; color: var(--ink); margin: 6px 0 40px; }
  .szc.narrow .szc-head, .szc.narrow .szc-body { display: none; }
  .szc.narrow .szn { display: block; }
  .szn-day { margin: 18px 0 8px; display: flex; align-items: baseline; gap: 8px; border-bottom: 1px solid var(--line); padding-bottom: 6px; }
  .szn-day b { font-size: 15px; font-weight: 600; }
  .szn-day span { font-size: 13px; color: var(--muted); }
  .szn-day.today b { color: var(--teal); }
  .szn-card { position: relative; background: var(--tint); border-left: 4px solid var(--c); border-radius: 8px; margin: 8px 0; overflow: hidden;
              box-shadow: 0 1px 2px rgba(0,0,0,.05); }
  .szn-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer; }
  .szn-row .szn-info { flex: 1; min-width: 0; }
  .szn-row h4 { margin: 0; font-family: Poppins, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.3; letter-spacing: 0; color: var(--ink); }
  .szn-row h4 .mine { display: inline-flex; vertical-align: -3px; margin-right: 4px; color: var(--teal); }
  .szn-row h4 .mine svg { width: 16px; height: 16px; }
  .szn-row .when { font-size: 14px; font-weight: 700; color: var(--dark); margin-top: 2px; }
  .szn-row .who { font-size: 12px; color: var(--muted); margin-top: 1px; }
  .szn-btn { flex: none; border: 0; background: var(--teal); color: #fff; font: 600 13px Poppins, sans-serif; padding: 7px 13px; border-radius: 4px; cursor: pointer;
             white-space: nowrap; text-decoration: none; display: inline-flex; align-items: center; gap: 5px; }
  .szn-btn.change { background: #fff; color: var(--teal); box-shadow: inset 0 0 0 1.5px var(--teal); }
  .szn-btn.wait { background: #915291; }
  .szn-btn.open { background: #fff; color: var(--muted); box-shadow: inset 0 0 0 1.5px #ccc; }
  .szn-state { flex: none; font-size: 12px; font-weight: 600; color: var(--muted); display: inline-flex; align-items: center; gap: 5px; }
  .szn-state svg { width: 18px; height: 18px; }
  .szn-card.past { opacity: .45; } .szn-card.past .szn-row, .szn-card.full .szn-row { cursor: default; }
  /* the form, folded out under the class */
  .szn-form { display: none; padding: 4px 12px 14px; border-top: 1px dashed rgba(0,0,0,.08); background: rgba(255,255,255,.55); }
  .szn-card.unfolded .szn-form { display: block; }

/* The form of a class — booking it, or changing one's own booking — in the panel and in a card alike. */
  .szf { --teal: #45b29d; --muted: #888; font-family: Poppins, Helvetica, Arial, sans-serif; color: #333; }
  .szf-title { margin: 0 24px 2px 0; font-family: Poppins, Helvetica, Arial, sans-serif; font-size: 17px; font-weight: 600; line-height: 1.3; }
  .szf-meta { font-size: 13px; color: var(--muted); margin-bottom: 4px; line-height: 1.5; }
  .szf-lbl { font-size: 13px; margin: 10px 0 6px; }
  .szf-price { font-size: 14px; margin: 6px 0 2px; line-height: 1.45; }
  .szf-price b { white-space: nowrap; }
  .szf-price-note { font-size: 12px; color: var(--muted); }
  .szf-seats { display: flex; gap: 8px; }
  .szf-seats button { flex: 1; border: 1.5px solid #ccc; background: #fff; border-radius: 6px; padding: 8px 0; font: 600 14px Poppins, sans-serif; color: #555; cursor: pointer; }
  .szf-seats button.on { border-color: var(--teal); color: var(--teal); background: #eef8f5; }
  .szf[data-late="1"] .szf-seats button.below { opacity: .35; cursor: default; }
  .szf-phone { width: 100%; box-sizing: border-box; font: 15px Poppins, sans-serif; padding: 8px 10px; border: 1px solid #ccc; border-radius: 6px; }
  .szf-terms { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; line-height: 1.45; margin: 12px 0; }
  /* the site's stylesheet hides plain checkboxes for its own widget; this one is shown as it is */
  .szf-terms input[type=checkbox] { -webkit-appearance: checkbox; appearance: auto; display: inline-block; position: static; opacity: 1; visibility: visible;
                                     width: 18px; height: 18px; margin: 1px 0 0; flex: none; accent-color: var(--teal); }
  .szf-terms a { color: var(--teal); }
  .szf-note { font-size: 12px; color: #a0522d; line-height: 1.45; margin: 10px 0 0; }
  .szf-go { width: 100%; border: 0; border-radius: 6px; padding: 11px; margin-top: 12px; background: var(--teal); color: #fff; font: 600 15px Poppins, sans-serif; cursor: pointer; }
  .szf-go[disabled] { background: #b9d9d2; cursor: default; }
  .szf-go.wait { background: #915291; } .szf-go.wait[disabled] { background: #cdb3cd; }
  .szf-cancel { width: 100%; border: 0; border-radius: 6px; padding: 9px; margin-top: 8px; background: none; color: #c62828; font: 500 14px Poppins, sans-serif;
                cursor: pointer; box-shadow: inset 0 0 0 1.5px #e7b4b4; }
  .szf-cancel.sure { background: #c62828; color: #fff; box-shadow: none; }
  .szf-cancel[disabled] { opacity: .6; cursor: default; }
  .szf-msg { font-size: 13px; margin-top: 8px; min-height: 4px; }
  .szf-msg.ok { color: var(--teal); font-weight: 600; text-align: center; }
  .szf-msg.err { color: #c62828; }
  .szf-more { display: inline-block; font-size: 13px; color: var(--teal); margin-top: 8px; }

/* Foglalások (staff mode): a class's head count, and its booking list in the panel or the card. */
  .szc-count, .szn-count { font-size: 13px; font-weight: 700; color: var(--dark); white-space: nowrap; }
  .szn-count { flex: none; }
  .szc-closed { font-size: 11px; color: var(--muted, #888); white-space: nowrap; }
  /* Overbooked: a red frame and a red count, whatever the class's colour. */
  .szc-class.over, .szn-card.over { box-shadow: inset 0 0 0 2px #c62828; }
  .szc-class.over .szc-count, .szn-card.over .szn-count { color: #fff; background: #c62828; border-radius: 4px; padding: 1px 6px; }
  .szc-over { font-size: 11px; font-weight: 600; color: #c62828; white-space: nowrap; }
  .szc-class.staff .act { flex-wrap: wrap; gap: 2px 8px; }
  .szn-card.staff .szn-side { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
  .szc-class.done, .szn-card.done .szn-row { filter: saturate(.55); }
  .szs { --teal: #45b29d; --muted: #888; font-family: Poppins, Helvetica, Arial, sans-serif; color: #333; }
  .szs-sum { font-size: 14px; margin: 8px 0 6px; }
  .szs-over { color: #c62828; font-size: 12px; }
  .szs-rows { border-top: 1px solid #eee; }
  .szs-row, .szs-pick { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid #eee; }
  .szs-row.closed { color: var(--muted); }
  .szs-who { flex: 1; min-width: 0; font-size: 14px; line-height: 1.3; }
  .szs-who b { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .szs-who small { display: block; font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* A contact the API masked (not yet the teacher's guest): shown as it came, in a typewriter face. */
  .szs-who small.szs-masked, .szs-results small.szs-masked { font-family: ui-monospace, Menlo, monospace; }
  .szs-closed { font-size: 12px; white-space: nowrap; }
  .szs-step { display: inline-flex; align-items: center; border: 1.5px solid #ccc; border-radius: 6px; overflow: hidden; flex: none; }
  .szs-step button { border: 0; background: #fff; width: 28px; height: 30px; font: 600 16px Poppins, sans-serif; color: #555; cursor: pointer; padding: 0; }
  .szs-step button:hover { background: #eef8f5; color: var(--teal); }
  .szs-step span { min-width: 26px; text-align: center; font: 600 14px Poppins, sans-serif; }
  .szs-save { flex: none; border: 0; border-radius: 4px; padding: 6px 10px; background: var(--teal); color: #fff; font: 600 12px Poppins, sans-serif; cursor: pointer; }
  .szs-save[hidden] { display: none; }
  .szs-save[disabled] { opacity: .6; cursor: default; }
  .szs-del { flex: none; border: 0; border-radius: 4px; padding: 6px 8px; background: none; color: #c62828; font: 500 12px Poppins, sans-serif;
             cursor: pointer; box-shadow: inset 0 0 0 1.5px #e7b4b4; }
  .szs-del.sure { background: #c62828; color: #fff; box-shadow: none; }
  .szs-empty { font-size: 13px; color: var(--muted); padding: 10px 0; }
  .szs-add { margin-top: 12px; }
  .szs-q { width: 100%; box-sizing: border-box; font: 14px Poppins, sans-serif; padding: 8px 10px; border: 1px solid #ccc; border-radius: 6px; }
  .szs-results { max-height: 220px; overflow-y: auto; }
  .szs-results button { display: block; width: 100%; text-align: left; border: 0; border-bottom: 1px solid #f0f0f0; background: #fff; padding: 7px 4px;
                        cursor: pointer; font: 14px Poppins, sans-serif; color: #333; }
  .szs-results button:hover:not([disabled]) { background: #eef8f5; }
  .szs-results button[disabled] { color: var(--muted); cursor: default; }
  .szs-results small { display: block; font-size: 11px; color: var(--muted); }
  .szs-pick[hidden] { display: none; }
  .szs-new-open { margin-top: 8px; border: 0; background: none; color: var(--teal); font: 600 13px Poppins, sans-serif; cursor: pointer; padding: 4px 0; }
  .szs-new[hidden] { display: none; }
  .szs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 4px; }
  .szs-grid input { min-width: 0; box-sizing: border-box; font: 14px Poppins, sans-serif; padding: 7px 9px; border: 1px solid #ccc; border-radius: 6px; }
  .szs-new-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }

/* Always the list (the main page): a column of its own width, with the way to the full week. */
  .szc-section.list-only { max-width: 680px; margin-left: auto; margin-right: auto; }
  .szc-full { display: inline-block; margin: 4px 0 30px; font: 600 14px Poppins, sans-serif; color: #45b29d; }

/* Naptár › Órarend (admin mode): empty spots open „Új óra", cancelled dates struck through, „H" / „M" marks, the
   new class's form in the panel or in a card under its day. */
  .szc[data-mode="admin"] .szc-day { cursor: copy; }
  .szc-hover { position: absolute; left: 5px; right: 5px; height: 26px; border: 2px dashed var(--teal); border-radius: 6px; color: var(--teal);
               font: 600 12px Poppins, sans-serif; display: flex; align-items: center; justify-content: center; background: rgba(69,178,157,.07);
               pointer-events: none; z-index: 2; }
  .szc-hover[hidden] { display: none; }
  .szc-class.preview { border: 2px dashed var(--c); border-left-width: 4px; cursor: default; z-index: 3;
                       background: repeating-linear-gradient(135deg, var(--tint) 0 6px, #fff 6px 12px); }
  .szc-class.cancelled, .szn-card.cancelled, .szc-class.staff.cancelled { background: repeating-linear-gradient(135deg, #f6f6f6 0 6px, #fff 6px 12px); border-left-color: #bbb; color: #999; }
  .szc-class.cancelled h4, .szc-class.cancelled .when, .szn-card.cancelled h4, .szn-card.cancelled .when { text-decoration: line-through; color: #999; }
  .szo-tags { margin-left: auto; display: inline-flex; gap: 3px; }
  .szo-tag { font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 8px; background: #fff; color: #666; white-space: nowrap; }
  .szo-tag.sub { color: #915291; } .szo-tag.mod { color: #e65100; }
  .szn-card.admin .szn-side { display: flex; align-items: center; gap: 6px; }
  .szn-day .szo-add { margin-left: auto; }
  .szo-add { border: 0; background: #fff; color: var(--teal, #45b29d); box-shadow: inset 0 0 0 1.5px #45b29d; border-radius: 4px; padding: 6px 12px;
             font: 600 12px Poppins, sans-serif; cursor: pointer; min-height: 32px; }
  .szn-empty { color: #bbb; font-size: 12px; padding: 2px 0 6px; }
  .szn-card.szn-new .szn-form { display: block; border-top: 0; padding-top: 12px; }
  .szo-card-title { margin-top: 0; }
  .szo-new, .szo-info { --teal: #45b29d; --muted: #888; font-family: Poppins, Helvetica, Arial, sans-serif; color: #333; font-size: 14px; }
  .szo-field { margin-bottom: 9px; min-width: 0; }
  .szo-field > label { display: block; font-size: 12px; color: var(--muted); margin: 0 0 3px; font-weight: 400; }
  .szo-new input[type=text], .szo-new input[type=date], .szo-new input[type=time], .szo-new input[type=number] {
    width: 100%; box-sizing: border-box; font: 14px Poppins, sans-serif; padding: 8px 10px; border: 1px solid #ccc; border-radius: 6px; height: 40px; background: #fff; }
  .szo-new input[disabled] { background: #f4f4f4; color: #777; }
  .szo-new input[hidden] { display: none; }
  .szo-two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .szo-help { font-size: 11px; color: var(--muted); margin-top: 3px; line-height: 1.4; }
  .szo-muted { color: var(--muted); font-size: 12px; }
  .szo-combo { position: relative; }
  .szo-combo input[type=text] { border: 1.5px solid var(--teal); }
  .szo-combo ul { list-style: none; margin: 2px 0 0; padding: 4px 0; border: 1px solid #e8e8e8; border-radius: 6px; background: #fff;
                  box-shadow: 0 6px 18px rgba(0,0,0,.1); max-height: 240px; overflow: auto; }
  .szo-combo ul[hidden] { display: none; }
  .szo-combo li { padding: 7px 10px; display: flex; gap: 8px; align-items: center; font-size: 13px; cursor: pointer; line-height: 1.3; }
  .szo-combo li:hover, .szo-combo li.act { background: #f4faf8; }
  .szo-combo li small { color: var(--muted); display: block; font-size: 11px; }
  .szo-combo li.off { color: #aaa; cursor: not-allowed; } .szo-combo li.off:hover { background: none; }
  .szo-pick-name { flex: 1; min-width: 0; }
  .szo-why { margin-left: auto; font-size: 11px; color: #c62828; white-space: nowrap; }
  .szo-combo mark { background: #fff3b0; padding: 0; }
  .szo-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; flex: none; }
  .szo-fromsvc { background: #f4faf8; border-radius: 6px; padding: 8px 10px; font-size: 12px; color: #555; margin: 0 0 10px; line-height: 1.5; }
  .szo-fromsvc[hidden] { display: none; }
  .szo-seg { display: flex; flex-wrap: wrap; gap: 4px; }
  .szo-seg button { border: 1.5px solid #e8e8e8; background: #fff; border-radius: 16px; padding: 6px 11px; font: 600 12px Poppins, sans-serif; color: #666; cursor: pointer; min-height: 32px; }
  .szo-seg button.on { border-color: var(--teal); color: var(--teal); background: #f4faf8; }
  .szo-seg button:disabled { opacity: .4; cursor: default; }
  .szo-dates { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 4px; }
  .szo-dates span { border: 1px solid #e8e8e8; border-radius: 12px; padding: 3px 4px 3px 9px; font-size: 12px; white-space: nowrap; }
  .szo-dates button { border: 0; background: none; color: #999; cursor: pointer; padding: 0 4px; }
  .szo-plain { border: 0; background: none; color: var(--teal); font: 600 13px Poppins, sans-serif; cursor: pointer; padding: 4px 0; }
  .szo-summary { border-top: 1px solid #e8e8e8; margin-top: 6px; padding-top: 9px; font-size: 13px; line-height: 1.5; }
  .szo-warn { background: #fff3e0; border-left: 3px solid #e65100; padding: 7px 10px; font-size: 12px; color: #8d3c00; margin: 8px 0; line-height: 1.5; }
  .szo-warn[hidden] { display: none; }
  .szo-warn label { display: flex; gap: 6px; align-items: center; margin-top: 5px; font-weight: 600; font-size: 13px; cursor: pointer; }
  /* the site's stylesheet hides plain checkboxes for its own widget; this one is shown as it is */
  .szo-warn input[type=checkbox] { -webkit-appearance: checkbox; appearance: auto; display: inline-block; position: static; opacity: 1; visibility: visible;
                                   width: 18px; height: 18px; margin: 0; flex: none; accent-color: #e65100; }
  .szo-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; }
  .szo-btn { border: 0; border-radius: 4px; padding: 8px 14px; font: 600 13px Poppins, sans-serif; cursor: pointer; background: var(--teal); color: #fff; min-height: 40px; }
  .szo-btn.big { padding: 10px 16px; font-size: 14px; }
  .szo-btn.ghost { background: #fff; color: var(--teal); box-shadow: inset 0 0 0 1.5px var(--teal); }
  .szo-btn[disabled] { opacity: .5; cursor: default; }
  .szo-row { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; padding: 4px 0; }
  .szo-row > span:first-child { color: var(--muted); }
  .szo-link { color: var(--teal); font-weight: 600; margin-left: 6px; }
  /* The page around it: the hint, the „+ Új óra" button, the legend, the message after a creation. */
  .szo-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 0 0 10px; }
  .szo-note { flex: 1; min-width: 220px; background: #fff8e1; border-left: 3px solid #f9a825; padding: 8px 12px; font-size: 12px; color: #6d4c41; }
  .szo-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: #888; margin: -26px 0 30px; }
  .szo-flash { font-size: 13px; min-height: 0; margin: 0 0 8px; }
  .szo-flash.ok { color: #1a8f78; font-weight: 600; }
.szo-help[hidden] { display: none; }

/* A class the studio cancelled, on the booking pages and in Foglalások: struck through, „Elmarad", not clickable. */
  .szc-class.cancelled, .szn-card.cancelled .szn-row { cursor: default; }
  .szc-state.gone, .szn-state.gone { color: #c62828; }
  .szc-class.admin.cancelled { cursor: pointer; }
  .szo-tabs { display: flex; gap: 4px; border-bottom: 1px solid #e8e8e8; margin: 10px 0 10px; }
  .szo-tabs button { border: 0; background: none; padding: 8px 10px; font: 600 13px Poppins, sans-serif; color: #888; cursor: pointer;
                     border-bottom: 2px solid transparent; min-height: 40px; }
  .szo-tabs button.on { color: #45b29d; border-bottom-color: #45b29d; }
  .szo-tabs button.danger.on { color: #c62828; border-bottom-color: #c62828; }
  .szo-scope { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
  .szo-scope button { text-align: left; border: 1px solid #e8e8e8; border-radius: 8px; padding: 7px 10px; background: #fff; cursor: pointer;
                      font: 13px Poppins, sans-serif; color: #333; min-height: 40px; }
  .szo-scope button b { font-weight: 600; }
  .szo-scope button small { display: block; color: #888; font-size: 11px; }
  .szo-scope button.on { border-color: #45b29d; background: #f4faf8; }
  .szo-info select { width: 100%; box-sizing: border-box; font: 14px Poppins, sans-serif; padding: 8px 10px; border: 1px solid #ccc; border-radius: 6px;
                     height: 40px; background: #fff; display: block; }
  .szo-info input[type=text], .szo-info input[type=date], .szo-info input[type=time], .szo-info input[type=number] {
    width: 100%; box-sizing: border-box; font: 14px Poppins, sans-serif; padding: 8px 10px; border: 1px solid #ccc; border-radius: 6px; height: 40px; background: #fff; }
  .szo-info input[disabled] { background: #f4f4f4; color: #777; }
  .szo-summary ul { margin: 6px 0 0; padding-left: 18px; color: #555; }
  .szo-btn.danger { background: #c62828; }
  .szo-gone { color: #c62828; font-weight: 600; margin: 8px 0; }
  .szo-warn[data-below] { margin-top: 6px; }

/* Naptár › Órarend, a class's „Elszámolás" tab: what share applies now and after the save. Four tabs wrap on a phone. */
  .szo-tabs { flex-wrap: wrap; }
  .szo-tabs button { padding: 8px 8px; }
  .szo-chain { font-size: 12px; color: #888; margin: 2px 0 8px; line-height: 1.45; }
  .szo-chain b { color: #333; font-weight: 600; }