/* Modulo corsi e staff del gestionale (viste/app/corsi*.php, sessione.php, staff.php): stili propri, sopra a
   tonus.css e app-base.css. Tutto con le variabili del tema, così un restyle globale vale anche qui. Prefisso cc-. */

/* ---------------------------------------------------------------- sub-sections of «Corsi» */
.cc-tabs { display: flex; gap: 6px; overflow-x: auto; margin: -4px 0 18px; padding: 2px; scrollbar-width: none }
.cc-tabs::-webkit-scrollbar { display: none }
.cc-tabs a { flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink-2) !important; font-weight: 600; font-size: 14.5px; text-decoration: none !important; white-space: nowrap }
.cc-tabs a:hover { border-color: color-mix(in srgb, var(--ink) 25%, var(--line)) }
.cc-tabs a.on { background: var(--brand-primary); border-color: var(--brand-primary); color: var(--brand-on-primary) !important }
.cc-weeknav { gap: 6px; flex-wrap: nowrap }
.cc-weeknav .btn { min-width: 44px }

/* ---------------------------------------------------------------- week of lessons and weekly timetable */
.cc-week, .cc-orario { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); align-items: start }
@media (min-width: 1200px) { .cc-week, .cc-orario { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px } }
.cc-day, .cc-oday { min-width: 0; display: flex; flex-direction: column; gap: 8px }
.cc-day h2, .cc-oday h2 { margin: 0 0 2px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3) }
.cc-day h2 span { color: var(--ink-2) }
.cc-day h2 small { margin-left: 4px; padding: 1px 7px; border-radius: 999px; background: var(--brand-primary); color: var(--brand-on-primary); font-size: 11px; letter-spacing: .03em }
.cc-day.today h2, .cc-oday.today h2 { color: var(--brand-primary) }
.cc-none { margin: 0; padding: 10px 12px; border: 1px dashed var(--line); border-radius: 10px; color: var(--ink-3); font-size: 13.5px }

.cc-slot { position: relative; display: flex; flex-direction: column; gap: 1px; padding: 10px 12px 10px 14px; border-radius: 10px; background: var(--surface);
  border: 1px solid var(--line); box-shadow: var(--shadow); color: var(--ink) !important; text-decoration: none !important; overflow: hidden;
  transition: border-color .15s, transform .15s }
.cc-slot::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--c, var(--brand-primary)) }
.cc-slot:hover { border-color: color-mix(in srgb, var(--c, var(--brand-primary)) 55%, var(--line)) }
.cc-slot b { font-size: 15px; line-height: 1.25; overflow-wrap: anywhere }
.cc-slot small { display: block; color: var(--ink-3); font-size: 13px; line-height: 1.35; overflow-wrap: anywhere }
.cc-slot .cc-seats { color: var(--ink-2) }
.cc-slot .cc-seats b { font-size: 13px }
.cc-slot .bar { height: 5px; margin-top: 6px }
.cc-slot .pill { align-self: flex-start; margin-top: 4px }
.cc-t { font: 700 19px/1.1 var(--font); font-variant-numeric: tabular-nums; letter-spacing: -.01em }
.cc-t small { display: inline !important; font: 500 13px var(--font); color: var(--ink-3) }
.cc-slot.off { background: #fafbfc; box-shadow: none }
.cc-slot.off::before { background: repeating-linear-gradient(180deg, var(--c) 0 6px, transparent 6px 10px) }
.cc-slot.off b, .cc-slot.off .cc-t { text-decoration: line-through; color: var(--ink-3) }
.cc-slot.past { opacity: .62 }
.cc-add { align-self: stretch; border-style: dashed !important; color: var(--ink-3) !important; font-weight: 600 }
.cc-add:hover { color: var(--brand-primary) !important; border-color: var(--brand-primary) !important }

@media (max-width: 899px) {
  /* phone: one day after the other; a day without lessons takes one line */
  .cc-week, .cc-orario { grid-template-columns: minmax(0, 1fr); gap: 18px }
  .cc-day.none { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 8px 12px }
  .cc-day.none h2 { margin: 0; min-width: 7.5em }
  .cc-day.none .cc-none { border: 0; padding: 0; flex: 1 }
  .cc-slot { display: grid; grid-template-columns: 72px minmax(0, 1fr); column-gap: 12px; padding: 12px 14px 12px 16px }
  .cc-slot > * { grid-column: 2 }
  .cc-slot > .cc-t { grid-column: 1; grid-row: 1 / span 4; align-self: start; font-size: 22px }
  .cc-slot > .cc-t small { display: block !important; margin-top: 2px }
  .cc-slot b { font-size: 16px }
}

/* ---------------------------------------------------------------- empty states and notes */
.cc-empty { text-align: center; padding: 32px 20px !important }
.cc-empty h2 { margin-bottom: 6px }
.cc-empty p { max-width: 46ch; margin: 0 auto 16px }
.cc-next { margin: 16px 0 0; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; color: var(--ink-3) }
.cc-note { margin: -6px 0 16px; color: var(--ink-3); font-size: 14px }
.cc-kept { border-color: color-mix(in srgb, var(--warn) 35%, var(--line)) !important; background: var(--warn-soft) !important; margin-bottom: 18px }
.cc-kept h2 { color: var(--warn) }
.cc-kept .list > li { border-top-color: color-mix(in srgb, var(--warn) 18%, transparent) }
.cc-kept .pill { background: #fff }
.cc-off { border-color: color-mix(in srgb, var(--ko) 30%, var(--line)) !important; background: var(--ko-soft) !important; margin-bottom: 16px }
.cc-off h2 { color: var(--ko) }
.cc-off p { margin: 0 0 12px }
.cc-off p:last-child { margin-bottom: 0 }
.cc-hint { margin: 14px 0 12px }

/* ---------------------------------------------------------------- lesson page */
.cc-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 10px; vertical-align: .12em; flex: none }
.cc-dot.big { width: 16px; height: 16px; margin: 0 }
.cc-lesson-head .row { gap: 8px }
.cc-actions { gap: 10px; margin: 0 0 16px }
.cc-people > li, .cc-rows > li { flex-wrap: wrap; gap: 8px 12px; min-height: 56px }
.cc-who { min-width: 0; display: flex; flex-direction: column; gap: 1px }
.cc-who b { overflow-wrap: anywhere }
.cc-who small { color: var(--ink-3); font-size: 13.5px; overflow-wrap: anywhere }
.cc-who .cc-desc { color: var(--ink-2) }
.cc-who .pill { margin-left: 6px; vertical-align: .1em }
.cc-att { display: inline-flex; gap: 0; margin: 0 }
.cc-att .btn { border-radius: 0; min-width: 92px }
.cc-att .btn:first-of-type { border-radius: 10px 0 0 10px }
.cc-att .btn:last-of-type { border-radius: 0 10px 10px 0; margin-left: -1px }
.cc-att .btn[aria-pressed=true][value=presente] { background: var(--ok-soft); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, var(--line)); position: relative }
.cc-att .btn[aria-pressed=true][value=assente] { background: var(--ko-soft); color: var(--ko); border-color: color-mix(in srgb, var(--ko) 40%, var(--line)); position: relative }
.cc-off-btn { color: var(--ink-3) !important }
.cc-off-btn:hover { color: var(--ko) !important; border-color: #f0c4bf !important }
.cc-pos { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; flex: none; background: var(--warn-soft); color: var(--warn); font-weight: 700; font-size: 14px }
.cc-search { flex-wrap: nowrap; gap: 8px; margin-bottom: 4px }
.cc-search input { flex: 1 1 auto; min-width: 0 }
.cc-btns { gap: 8px; flex-wrap: nowrap }
@media (max-width: 899px) {
  .cc-actions .btn { flex: 1 1 100% }
  .cc-people > li > .cc-who { flex: 1 1 0 }
  .cc-rows > li > .cc-who { flex: 1 1 calc(100% - 64px) }
  .cc-att { flex: 1 1 100% }
  .cc-att .btn { flex: 1; min-height: 44px }
  .cc-people > li > .btn, .cc-people > li > form:not(.cc-att) { margin-left: auto }
  .cc-rows .cc-btns { flex: 1 1 100%; justify-content: flex-end }
  .cc-rows .cc-btns .btn { min-height: 44px; flex: 1 }
  .cc-staff > li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center }
  .cc-staff > li > .cc-btns { grid-column: 1 / -1 }
  .cc-tabs a { padding: 0 12px; font-size: 14px }
  /* timetable on the phone: the day, then «+ Aggiungi» on the same line, its lessons below */
  .cc-oday { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px 12px }
  .cc-oday > h2 { grid-column: 1; grid-row: 1; margin: 0 }
  .cc-oday > .cc-none { grid-column: 2; grid-row: 1; border: 0; padding: 0 }
  .cc-oday > .cc-add { grid-column: 3; grid-row: 1; min-height: 40px; border-style: solid !important }
  .cc-oday > .cc-slot { grid-column: 1 / -1 }
  .cc-oday.none { display: grid }
}

/* ---------------------------------------------------------------- forms in popovers */
.cc-pop { max-height: min(90vh, 820px); overflow-y: auto; overscroll-behavior: contain }
.cc-pop h3 { padding-right: 8px }
.cc-pop form { margin: 0 }
.cc-pop label:first-of-type { margin-top: 6px }
.cc-pop .btn.block { margin-top: 14px }
.cc-pop .cc-no { margin-top: 8px }
.cc-pop form + form .btn.block { margin-top: 8px }
.cc-pop p { margin: 0 0 8px }
.cc-pop input[type=time], .cc-pop input[type=text], .cc-pop input[type=email], .cc-pop input[type=number], .cc-pop select,
.card input[type=time] { width: 100% }
.cc-pop label.check { margin: 14px 0 4px; font-weight: 500; display: flex; gap: 10px; align-items: center }
.cc-pop label.check input { width: 20px; height: 20px; margin: 0 }
.cc-yes { background: var(--ko) !important; color: #fff !important; border-color: var(--ko) !important }
.cc-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px }
.cc-two label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.cc-link { font-weight: 600; overflow-wrap: anywhere; padding: 8px 10px; border-radius: 8px; background: var(--bg) }

/* colour of a class type: twelve dots, one chosen */
.cc-colors { border: 0; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px }
.cc-colors legend { padding: 0; margin: 0 0 6px; font-weight: 600; font-size: 14px; color: var(--ink-2); width: 100% }
.cc-sw { position: relative; margin: 0 !important; width: 40px; height: 40px; border-radius: 50%; background: var(--c); cursor: pointer;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.0); transition: transform .12s }
.cc-sw input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer }
.cc-sw:has(input:checked) { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--c) }
.cc-sw:has(input:focus-visible) { outline: 3px solid var(--brand-primary); outline-offset: 4px }
.cc-sw:hover { transform: scale(1.08) }

/* role of a staff member: three cards, one chosen */
.cc-roles { border: 0; margin: 14px 0 0; padding: 0; display: grid; gap: 8px }
.cc-roles legend { padding: 0; margin: 0 0 6px; font-weight: 600; font-size: 14px; color: var(--ink-2) }
.cc-choice { display: flex !important; align-items: flex-start; gap: 12px; margin: 0 !important; padding: 12px 14px; min-height: 44px; border: 1px solid var(--line);
  border-radius: 12px; cursor: pointer; font-weight: 400 !important; color: var(--ink) !important }
.cc-choice input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; accent-color: var(--brand-primary) }
.cc-choice b { display: block; font-size: 15px }
.cc-choice small { display: block; color: var(--ink-3); font-size: 13.5px }
.cc-choice:has(input:checked) { border-color: var(--brand-primary); background: var(--brand-primary-soft) }

/* ---------------------------------------------------------------- lists of types, rooms, staff */
.cc-avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--brand-primary-soft);
  color: var(--brand-primary); font-weight: 700 }
.cc-role-owner { background: var(--brand-primary) !important; color: var(--brand-on-primary) !important }
.cc-role-trainer { background: var(--ok-soft) !important; color: var(--ok) !important }
.cc-archive { margin-top: 16px }
.cc-archive summary { cursor: pointer; font-weight: 600; color: var(--ink-2); min-height: 32px; display: flex; align-items: center }
.cc-archive[open] summary { margin-bottom: 8px }
.cc-archive .list > li { opacity: .75 }
/* in the timetable an empty day already shows its «+ Aggiungi» */
@media (min-width: 900px) { .cc-oday .cc-none { display: none } }

/* ---------------------------------------------------------------- members' app: a lesson the gym cancelled */
.ma-lesson.off { opacity: .72; border-style: dashed }
.ma-lesson.off .n { text-decoration: line-through }
.ma-lesson .ma-desc { color: #C9CBD6 }
.ma-off { display: grid; place-items: center; height: 40px; border-radius: 12px; background: rgba(255,107,107,.14); color: var(--ko); font: 700 13px 'Archivo', sans-serif }
.ma-annullata { margin-top: 12px; border-color: rgba(255,107,107,.45) }
.ma-annullata .ma-lab { color: var(--ko) }
.ma-annullata h3 { font-size: 24px }
.cc-was { margin: 0 0 12px }
.cc-was summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center }
.cc-was .list > li { border-top-color: color-mix(in srgb, var(--ko) 15%, transparent); min-height: 44px }
.cc-title { display: flex; align-items: center; gap: 2px }
.gx .page-head .cc-title .aiuto-pop p { margin: 0 0 .5rem; color: var(--ink) }
.gx .page-head .cc-title .aiuto-pop .cc-link { color: var(--brand-primary) }
/* the three actions an owner looks for on «Corsi» */
.gx .cc-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto }
@media (max-width: 899px) { .gx .cc-actions { width: 100%; } .gx .cc-actions .btn { flex: 1 1 auto } }
@media (max-width: 899px) { .gx .cc-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) } .gx .cc-actions .btn { padding: 0 8px } }

/* «+ Lezione» (Tony, 21/10/2026): once, every week, or on chosen dates; the way chosen shows only its fields (without
   :has every field shows, and the server reads the way chosen) */
.ln-modi, .ln-giorni { border: 0; margin: 16px 0 0; padding: 0; min-width: 0; display: grid; gap: 6px }
.ln-modi { grid-template-columns: repeat(3, minmax(0, 1fr)) }
.ln-giorni { grid-template-columns: repeat(7, minmax(0, 1fr)) }
.ln-modi legend, .ln-giorni legend { padding: 0; margin: 0 0 6px; font-weight: 600; font-size: 14px; color: var(--ink-2) }
.ln-modo, .ln-giorni label { position: relative; margin: 0 !important; min-width: 0 }
.ln-modo input, .ln-giorni input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer }
.ln-modo span, .ln-giorni span[aria-hidden] { display: grid; place-items: center; min-height: 44px; padding: 0 6px; border: 1.5px solid var(--line); border-radius: 10px;
  background: var(--surface); color: var(--ink); font-weight: 600; font-size: 15px; text-align: center; line-height: 1.2 }
.ln-modo input:checked + span { border-color: var(--brand-primary); background: var(--brand-primary-soft); color: var(--brand-primary) }
.ln-giorni input:checked + span { border-color: var(--brand-primary); background: var(--brand-primary); color: var(--brand-on-primary) }
.ln-modo input:focus-visible + span, .ln-giorni input:focus-visible + span { outline: 3px solid var(--brand-primary); outline-offset: 2px }
.ln:has(.ln-modo input[value="una"]:checked) :is(.ln-ogni, .ln-date),
.ln:has(.ln-modo input[value="ogni"]:checked) :is(.ln-una, .ln-date),
.ln:has(.ln-modo input[value="date"]:checked) :is(.ln-una, .ln-ogni) { display: none }
.ln-una, .ln-ogni, .ln-date { margin-top: 4px }
.ln-riga[hidden] { display: none }
.ln [data-ln-altra] { margin-top: 12px }
.ln [data-ln-altra][hidden] { display: none }
.cc-vuota { margin: 0 0 14px; padding: 12px 16px; border: 1px dashed var(--line); border-radius: 12px; background: var(--surface); color: var(--ink-2) }
.cc-vuota a { font-weight: 700 }
@media (max-width: 420px) { .ln-modo span { font-size: 14px } .ln-giorni { gap: 4px } .ln-giorni span[aria-hidden] { font-size: 13px; padding: 0 } }

/* «Duplica la settimana»: the target week, then the lessons day by day, each ticked or with its reason */
.sd { padding: 20px }
.sd-h { margin: 0 0 10px; font-size: 16px }
.sd-h + .sd-verso { margin-bottom: 22px }
.sd-verso { display: flex; flex-wrap: wrap; gap: 8px }
.sd-verso a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1.5px solid var(--line); border-radius: 999px; color: var(--ink) !important;
  font-weight: 600; text-decoration: none !important }
.sd-verso a[aria-current] { border-color: var(--brand-primary); background: var(--brand-primary); color: var(--brand-on-primary) !important }
.sd-giorno { border: 0; margin: 0 0 14px; padding: 0; min-width: 0 }
.sd-giorno legend { padding: 0; margin: 0 0 6px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3) }
.sd-lez { display: grid; grid-template-columns: auto 52px minmax(0, 1fr); align-items: center; gap: 4px 12px; margin: 0 0 6px !important; padding: 10px 12px;
  border: 1px solid var(--line); border-left: 4px solid var(--c); border-radius: 10px; background: var(--surface); font-weight: 500; cursor: pointer }
.sd-lez input { width: 22px; height: 22px; margin: 0; accent-color: var(--brand-primary) }
.sd-t { font-weight: 700; font-variant-numeric: tabular-nums }
.sd-n { display: flex; flex-direction: column; min-width: 0 }
.sd-n small { color: var(--ink-3) }
.sd-lez.no { cursor: default; background: var(--bg) }
.sd-lez.no .sd-t, .sd-lez.no .sd-n { opacity: .6 }
.sd-perche { grid-column: 3; color: var(--ink-2); font-style: italic }

/* «Corsi» (Tony, 21/10/2026): the list of courses, the form's days with their hour, the lessons of a course */
.pc-sez { margin: 0 0 22px }
.pc-h { margin: 0 0 10px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3) }
.pc-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px }
.pc-riga { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: center; gap: 6px 18px; padding: 14px 16px; border: 1px solid var(--line);
  border-left: 5px solid var(--c); border-radius: 12px; background: var(--surface); color: var(--ink) !important; text-decoration: none !important }
.pc-riga:hover { border-color: var(--brand-primary); border-left-color: var(--c) }
.pc-riga--spento { opacity: .7 }
.pc-nome, .pc-quando, .pc-posti { display: flex; flex-direction: column; min-width: 0 }
.pc-nome b { font-size: 16px }
.pc-nome small, .pc-quando small, .pc-posti small { color: var(--ink-3); font-size: 13px }
.pc-quando { text-align: right; font-weight: 600 }
.pc-posti { text-align: right; font-variant-numeric: tabular-nums }
.pc-posti b { font-size: 18px }
@media (max-width: 640px) { .pc-riga { grid-template-columns: minmax(0, 1fr) auto } .pc-quando { grid-column: 1; text-align: left } .pc-riga .pill { justify-self: end } }
.pn-giorni { border: 0; margin: 16px 0 0; padding: 0; min-width: 0; display: grid; gap: 6px }
.pn-giorni legend { padding: 0; margin: 0 0 6px; font-weight: 600; font-size: 14px; color: var(--ink-2) }
.pn-giorno { display: grid; grid-template-columns: minmax(0, 1fr) 140px; align-items: center; gap: 12px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface) }
.pn-giorno label.check { margin: 0 !important; min-height: 44px; display: flex; align-items: center; gap: 10px; font-weight: 600 }
.pn-giorno input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--brand-primary) }
.pn-giorno:has(input[type=checkbox]:not(:checked)) input[type=time] { opacity: .45 }
.pz-lezioni { list-style: none; margin: 0 0 10px; padding: 0 }
.pz-lez { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--line); color: var(--ink) !important; text-decoration: none !important }
.pz-lez.off { opacity: .55 }
.pz-lez small { display: block; color: var(--ink-3) }
.pz-n { min-width: 36px; font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums }
.pz-vai { color: var(--ink-3); font-size: 20px }
.cc-corso { font-weight: 600; color: var(--ink-2) }