/* Scuola Musica: additions to /admin/assets/admin.css (same palette and components). */

/* progress x / quota */
.prog { height: .55rem; background: var(--paper-2); min-width: 5rem; margin-top: .25rem; }
.prog i { display: block; height: 100%; background: var(--brass); }
.prog.done i { background: var(--ok); }
.prog.over i { background: var(--ox); }
.progtxt { font-variant-numeric: tabular-nums; white-space: nowrap; }
.sub { display: block; font-size: .78rem; color: #6b6f5e; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: .25rem 1.2rem; margin: 0; }
.kv dt { color: #6b6f5e; } .kv dd { margin: 0; }
.preview { background: #fbf9f0; border-left: 4px solid var(--brass); padding: .6rem .9rem; margin: .8rem 0 0; font-size: .9rem; }

/* round profile photos */
.avatar { border-radius: 50%; object-fit: cover; background: #fff; border: 1px solid var(--line); display: block; flex: none; }
.avatar-xl { width: 120px; height: 120px; } .avatar-md { width: 64px; height: 64px; } .avatar-sm { width: 40px; height: 40px; }
.photo-row { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; }
.who-cell { display: flex; align-items: center; gap: .75rem; }
.cropper { position: relative; width: min(280px, 100%); aspect-ratio: 1; margin: .4rem auto; background: #ddd; border: 1px solid var(--line); cursor: grab; touch-action: none; }
.cropper canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.cropper:active { cursor: grabbing; }
.crop-mask { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle closest-side, transparent 97%, rgba(20, 35, 29, .6) 100%); }

/* one collapsible block per student */
details.student { padding: 0; }
details.student > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; }
details.student > summary::-webkit-details-marker { display: none; }
details.student > summary::before { content: "\25B8"; color: var(--brass); margin-right: .7rem; font-size: .9rem; transition: transform .15s; flex: none; }
details.student[open] > summary::before { transform: rotate(90deg); }
details.student > summary .st-name { flex: 1; min-width: 0; }
details.student > summary .st-prog { min-width: 7.5rem; text-align: right; }
details.student > summary .st-prog .prog { margin-left: auto; width: 100%; }
details.student[open] > summary { border-bottom: 1px solid var(--line); }
details.student > :not(summary) { margin-left: 1.25rem; margin-right: 1.25rem; }
details.student > :last-child { margin-bottom: 1.1rem; }
details.student > summary + * { margin-top: 1rem; }
.add-lesson { display: flex; gap: .8rem 1rem; align-items: flex-end; flex-wrap: wrap; margin-bottom: 1rem; }
.add-lesson .f { min-width: 12rem; }
.badge.wait { color: #8a6a1d; background: #f6ecd0; }
@media (max-width: 720px) { details.student > summary { padding: .9rem 1rem; } details.student > summary .st-prog { min-width: 5.5rem; } .add-lesson .f { flex: 1; } }

/* a text field inside an option row must stay clickable above the row's hidden radio/checkbox overlay */
.opt .amt { position: relative; z-index: 2; }
.opt input[type=radio]:checked ~ .opt-t { font-weight: 600; }

/* a status badge that is also a button (e.g. the school fee yes/no) */
.inline-form { display: inline; margin: 0; }
button.badge { cursor: pointer; font: inherit; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; padding: .1rem .45rem; }
button.badge.ok { background: transparent; }
button.badge:hover, button.badge:focus-visible { box-shadow: 0 0 0 2px var(--brass); outline: none; }

/* dashboard: charts, money bars */
.chart { width: 100%; max-width: 640px; height: auto; display: block; }
.stack { display: flex; height: .6rem; background: var(--paper-2); min-width: 8rem; margin-top: .25rem; overflow: hidden; }
.stack i { display: block; height: 100%; }
.s-paid { background: var(--ok); } .s-wait { background: var(--brass); } .s-open { background: #b9b59f; }
.swatch { display: inline-block; width: .8rem; height: .8rem; vertical-align: -.1rem; margin-right: .2rem; }

/* Nuovo anno: plain lists inside cards and the red zone */
ul.plain { margin: .4rem 0 .8rem; padding-left: 1.2rem; }
ul.plain li { margin: .25rem 0; }
.flash ul.plain { margin-bottom: 0; }
.card.danger-zone { border-color: var(--ox); border-left-width: 4px; }
.card.danger-zone h2 { color: var(--ox); }

/* status + temporary password of a teacher waiting for the first login, all on one line */
.st-line { display: flex; align-items: center; gap: .5rem; white-space: nowrap; }
.temp-pw { display: inline-flex; align-items: center; gap: .25rem; }
.temp-pw .pw-val { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9rem; letter-spacing: .03em; background: var(--paper, #fbf8ef); border: 1px dashed var(--brass, #c8a041); padding: .1rem .45rem; user-select: all; }
.temp-pw .ico { display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; padding: 0; background: transparent; border: 1px solid var(--line, #d8d2bf); color: var(--charcoal, #1f2a24); cursor: pointer; }
.temp-pw .ico svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.temp-pw .ico:hover, .temp-pw .ico.on { background: var(--brass, #c8a041); border-color: var(--brass, #c8a041); }
.temp-pw .ico.done { background: var(--ok, #2f6b3f); border-color: var(--ok, #2f6b3f); color: #fff; }
.temp-pw .ico.fail { background: var(--ox, #8a2f23); border-color: var(--ox, #8a2f23); color: #fff; }
@media (max-width: 640px) { .st-line { flex-wrap: wrap; white-space: normal; } }

/* codice fiscale field with its "Calcola" button */
.cf-row { display: flex; gap: .4rem; align-items: stretch; }
.cf-row input { flex: 1; min-width: 0; text-transform: uppercase; }
.cf-row .btn { white-space: nowrap; }
[data-cf-msg].bad { color: var(--ox, #8a2f23); }
[data-cf-msg].good { color: var(--ok, #2f6b3f); }