/* Stili dell'app, costruiti sui token Magma (colors_and_type.css + magma-components.css).
   Le classi sono prefissate con "s-" per non scontrarsi con quelle di Quasar/Tailwind. */

html, body { background: rgb(var(--tone-neutral-10)); }
body { font-family: var(--font-info); color: rgb(var(--tone-neutral-02)); -webkit-font-smoothing: antialiased; }
.nicegui-content { padding: 0 !important; gap: 0 !important; min-height: 100vh; align-items: stretch !important; }
a { color: rgb(var(--variant-primary-04)); text-decoration: none; }
a:hover { color: rgb(var(--variant-primary-03)); }

.s-ic { display: inline-flex; width: 20px; height: 20px; flex-shrink: 0; }
.s-ic svg { width: 100%; height: 100%; fill: currentColor; display: block; }
.s-ic16 { width: 16px; height: 16px; }
.s-ic24 { width: 24px; height: 24px; }
.s-ic32 { width: 32px; height: 32px; }

/* bottoni (estende .mds-button). Niente classi xs/sm/md/lg/xl: in Quasar nascondono l'elemento fuori breakpoint */
.mds-button { color: rgb(var(--tone-neutral)); white-space: nowrap; }
.mds-button.small { min-height: 30px; min-width: 30px; padding: 0 12px; border-radius: var(--radius-md); font-size: 13px; }
.mds-button.big { min-height: 48px; padding: 0 22px; font-size: 15px; font-weight: 600; }
.mds-button.weak, .mds-button.neutral.weak { font-weight: 500; }
.mds-button.danger { background: rgb(var(--status-error-09)); color: rgb(var(--status-error-02)); }
.mds-button.danger:hover { background: rgb(var(--status-error-08)); }
.mds-button.full { width: 100%; }
a.mds-button:hover { color: inherit; }
a.mds-button:not(.weak):not(.neutral):not(.text):hover { color: rgb(var(--tone-neutral)); }

/* struttura */
.s-topbar { position: sticky; top: 0; z-index: 10; height: 64px; flex-shrink: 0; background: rgb(var(--tone-neutral)); border-bottom: 1px solid rgb(var(--tone-neutral-09)); display: flex; align-items: center; gap: 16px; padding: 0 24px; }
.s-logo { height: 30px; width: auto; display: block; }
.s-vdiv { width: 1px; height: 28px; background: rgb(var(--tone-neutral-09)); }
.s-apptitle { font: 700 16px/24px var(--font-title); letter-spacing: -0.4px; color: rgb(var(--tone-neutral-01)); white-space: nowrap; }
.s-nav { display: flex; gap: 4px; margin-left: 16px; }
.s-nav a { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--radius-lg); corner-shape: squircle; font-size: 15px; font-weight: 500; color: rgb(var(--tone-neutral-03)); }
.s-nav a:hover { background: rgb(var(--tone-neutral-10)); }
.s-nav a.on { background: rgb(var(--variant-primary-09)); color: rgb(var(--variant-primary-03)); font-weight: 700; }
.s-grow { flex: 1; min-width: 0; }
.s-main { width: 100%; max-width: 1400px; margin: 0 auto; padding: 28px 32px 48px; display: flex; flex-direction: column; gap: 20px; }
.s-headrow { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.s-crumb { font-size: 14px; color: rgb(var(--tone-neutral-05)); display: flex; align-items: center; gap: 6px; }
.s-muted { color: rgb(var(--tone-neutral-05)); }
.s-ink { color: rgb(var(--tone-neutral-01)); }
.s-row { display: flex; align-items: center; gap: 10px; }
.s-col { display: flex; flex-direction: column; }
.s-card { background: rgb(var(--tone-neutral)); border-radius: var(--radius-xl); corner-shape: squircle; box-shadow: var(--shadow-box-md); }
.s-cardhead { padding: 18px 22px; border-bottom: 1px solid rgb(var(--tone-neutral-09)); display: flex; align-items: center; gap: 10px; }
.s-cardbody { padding: 20px 22px; }
.s-hint { font-size: 13px; line-height: 18px; color: rgb(var(--tone-neutral-05)); }
.s-mono { font-family: var(--font-code); font-size: 13px; }
.s-fname { font-weight: 700; color: rgb(var(--tone-neutral-01)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s-bar { height: 6px; border-radius: 6px; background: rgb(var(--tone-neutral-09)); overflow: hidden; }
.s-bar > div { height: 100%; border-radius: 6px; background: rgb(var(--variant-primary-04)); transition: width .4s; }
.s-grid2 { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px; align-items: start; }
@media (max-width: 960px) { .s-grid2 { grid-template-columns: minmax(0, 1fr); } .s-main { padding: 20px 16px 40px; } .s-nav span.s-navlbl { display: none; } }

/* elenco video */
.s-jl { display: grid; grid-template-columns: minmax(0, 2.2fr) 0.8fr 1.2fr 1.8fr 1.1fr auto; }
.s-jl > div { padding: 14px 16px; border-bottom: 1px solid rgb(var(--tone-neutral-10)); display: flex; align-items: center; font-size: 15px; min-width: 0; }
.s-jl > .s-th { padding: 12px 16px; font: 700 11px/16px var(--font-info); text-transform: uppercase; letter-spacing: .04em; color: rgb(var(--tone-neutral-05)); border-bottom: 1px solid rgb(var(--tone-neutral-09)); }
.s-jl .s-click { cursor: pointer; }
@media (max-width: 960px) { .s-jl { grid-template-columns: minmax(0, 1fr) auto; } .s-jl .s-opt { display: none; } }
.mds-badge .s-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

/* login */
.s-login { display: flex; min-height: 100vh; }
.s-loginL { flex: 1.25; background: rgb(var(--variant-primary-04)); color: #fff; padding: 56px; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; }
.s-caps { display: flex; flex-direction: column; gap: 22px; }
.s-capl { font: 700 12px/16px var(--font-info); letter-spacing: .08em; text-transform: uppercase; color: rgb(var(--variant-primary-08)); }
.s-capt { align-self: flex-start; font: 500 30px/40px var(--font-title); padding: 4px 14px; background: rgb(0 0 0 / .55); border-radius: 8px; text-wrap: pretty; max-width: 560px; }
.s-loginR { flex: 1; background: rgb(var(--tone-neutral)); display: flex; flex-direction: column; justify-content: center; padding: 48px 88px; gap: 28px; }
@media (max-width: 960px) { .s-loginL { display: none; } .s-loginR { padding: 32px 24px; } }

/* campi Quasar con l'aspetto di mds-input */
.s-field { display: flex; flex-direction: column; gap: 6px; }
.s-field > label { font-family: var(--font-info); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: rgb(var(--tone-neutral-03)); }
.s-input { display: flex; align-items: center; gap: 8px; padding: 2px 16px; min-height: 48px; background: rgb(var(--tone-neutral)); border-radius: var(--radius-xl); corner-shape: squircle; box-shadow: 0 0 0 1px rgb(var(--variant-primary-03) / .12), var(--shadow-sm); transition: box-shadow .25s; }
.s-input:focus-within { box-shadow: 0 0 0 3px rgb(var(--variant-primary-04)), 0 4px 6px 3px rgb(var(--variant-primary-04) / .1); }
.s-input .q-field { flex: 1; }
.s-input .q-field__native, .s-input .q-field__input { font-family: var(--font-info); font-size: 16px; color: rgb(var(--tone-neutral-02)); }
.s-input.s-area { align-items: flex-start; padding: 8px 16px; }
.s-input.s-area .q-field__control, .s-input.s-area .q-field__native { padding-top: 0 !important; }
.s-input.s-area textarea { font-family: var(--font-code) !important; font-size: 14px !important; line-height: 22px !important; }
.s-error { color: rgb(var(--status-error-03)); font-size: 14px; font-weight: 500; }

/* nuovo video */
.s-drop { border-radius: var(--radius-xl); corner-shape: squircle; background: rgb(var(--variant-primary-10)); box-shadow: inset 0 0 0 2px rgb(var(--variant-primary-07) / .7); padding: 28px; display: flex; align-items: center; gap: 22px; cursor: pointer; transition: background .2s, box-shadow .2s; }
.s-drop:hover, .s-drop.over { background: rgb(var(--variant-primary-09)); box-shadow: inset 0 0 0 3px rgb(var(--variant-primary-05)); }
.s-dropic { width: 64px; height: 64px; border-radius: 50%; background: rgb(var(--variant-primary-09)); color: rgb(var(--variant-primary-04)); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.s-filecard { display: flex; align-items: center; gap: 16px; padding: 16px 18px; border-radius: var(--radius-lg); corner-shape: squircle; background: rgb(var(--tone-neutral)); box-shadow: 0 0 0 1px rgb(var(--tone-neutral-09)); }
.s-seg { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px; border-radius: var(--radius-2xl); background: rgb(var(--tone-neutral-10)); box-shadow: inset 0 0 0 1px rgb(var(--tone-neutral-09)); align-self: flex-start; }
.s-seg span { padding: 8px 14px; border-radius: var(--radius-xl); corner-shape: squircle; font-size: 14px; font-weight: 500; color: rgb(var(--tone-neutral-03)); cursor: pointer; user-select: none; }
.s-seg span:hover { color: rgb(var(--variant-primary-03)); }
.s-seg span.on { background: rgb(var(--tone-neutral)); color: rgb(var(--variant-primary-03)); font-weight: 700; box-shadow: var(--shadow-sm); }
.s-opt { display: flex; align-items: flex-start; gap: 14px; padding: 14px 0 4px; border-top: 1px solid rgb(var(--tone-neutral-10)); }
.s-langchip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: var(--radius-full); background: rgb(var(--tone-neutral)); box-shadow: inset 0 0 0 1px rgb(var(--tone-neutral-09)); font-size: 14px; font-weight: 500; }
.s-langchip b { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font: 700 10px var(--font-title); background: rgb(var(--variant-primary-09)); color: rgb(var(--variant-primary-03)); }
.s-langchip.plain { box-shadow: none; padding: 0; background: transparent; }

/* avanzamento */
.s-step { display: grid; grid-template-columns: 36px 1fr auto; gap: 14px; align-items: start; padding: 12px 0; }
.s-dotc { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.s-dotc.done { background: rgb(var(--status-success-09)); color: rgb(var(--status-success-02)); }
.s-dotc.run { background: rgb(var(--variant-primary-04)); color: #fff; box-shadow: 0 0 0 5px rgb(var(--variant-primary-09)); }
.s-dotc.todo { background: rgb(var(--tone-neutral-10)); color: rgb(var(--tone-neutral-06)); box-shadow: inset 0 0 0 1px rgb(var(--tone-neutral-08)); }
.s-dotc.err { background: rgb(var(--status-error-09)); color: rgb(var(--status-error-02)); }
.s-spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgb(255 255 255 / .35); border-top-color: #fff; animation: s-rot .8s linear infinite; }
@keyframes s-rot { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .s-spin { animation: none; } }
.s-sttl { font: 700 16px/24px var(--font-title); letter-spacing: -0.2px; color: rgb(var(--tone-neutral-01)); }
.s-step.pending .s-sttl { color: rgb(var(--tone-neutral-05)); font-weight: 500; }
.s-log { background: rgb(var(--tone-neutral-01)); color: rgb(var(--tone-neutral-08)); border-radius: var(--radius-lg); padding: 16px 18px; font: 400 12.5px/21px var(--font-code); max-height: 320px; overflow: auto; white-space: pre-wrap; }
.s-kv { display: flex; gap: 28px; flex-wrap: wrap; }
.s-kv > div { display: flex; flex-direction: column; gap: 2px; }
.s-k { font: 700 11px/16px var(--font-info); text-transform: uppercase; letter-spacing: .04em; color: rgb(var(--tone-neutral-05)); }
.s-v { font-size: 15px; color: rgb(var(--tone-neutral-01)); font-weight: 500; }

/* revisione */
.s-review { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: 20px; align-items: start; }
@media (max-width: 1100px) { .s-review { grid-template-columns: minmax(0, 1fr); } }
.s-sticky { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 16px; }
.s-player { width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); background: #111; display: block; }
.s-player::cue { font-family: var(--font-info); font-size: 18px; background: rgb(0 0 0 / .72); }
.s-pills { display: flex; gap: 6px; align-items: center; }
.s-pill { padding: 4px 10px; border-radius: 8px; font: 700 12px var(--font-info); background: rgb(var(--tone-neutral-09)); color: rgb(var(--tone-neutral-03)); cursor: pointer; user-select: none; }
.s-pill.on { background: rgb(var(--tone-neutral-01)); color: #fff; }
.s-check { display: flex; align-items: center; gap: 12px; padding: 11px 6px; margin: 0 -6px; border-top: 1px solid rgb(var(--tone-neutral-10)); font-size: 15px; cursor: pointer; border-radius: 8px; }
.s-check:hover { background: rgb(var(--variant-primary-10)); }
.s-count { min-width: 28px; text-align: center; padding: 2px 8px; border-radius: 20px; font: 700 13px var(--font-info); }
.s-filters { display: flex; align-items: center; gap: 8px; padding: 14px 18px; border-bottom: 1px solid rgb(var(--tone-neutral-09)); flex-wrap: wrap; }
.s-fchip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--radius-full); font-size: 14px; font-weight: 500; white-space: nowrap; color: rgb(var(--tone-neutral-03)); box-shadow: inset 0 0 0 1px rgb(var(--tone-neutral-09)); cursor: pointer; user-select: none; }
.s-fchip:hover { box-shadow: inset 0 0 0 1px rgb(var(--variant-primary-07)); }
.s-fchip.on { background: rgb(var(--variant-primary-04)); color: #fff; box-shadow: none; font-weight: 700; }
.s-search { margin-left: auto; min-width: 160px; flex: 1; max-width: 240px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border-radius: var(--radius-lg); background: rgb(var(--tone-neutral-10)); color: rgb(var(--tone-neutral-06)); }
.s-search .q-field__native { font-size: 14px; font-family: var(--font-info); }
.s-cue { display: grid; grid-template-columns: 104px 1fr; gap: 16px; padding: 14px 18px; border-bottom: 1px solid rgb(var(--tone-neutral-10)); }
.s-cue:focus-within { background: rgb(var(--variant-primary-10)); box-shadow: inset 3px 0 0 rgb(var(--variant-primary-04)); }
.s-tc { font: 500 12px/18px var(--font-code); color: rgb(var(--variant-primary-03)); display: flex; flex-direction: column; gap: 6px; cursor: pointer; align-self: start; }
.s-tc:hover { text-decoration: underline; }
.s-tc .s-muted { font-size: 11px; }
.s-lines { display: grid; grid-template-columns: 26px 1fr; gap: 2px 10px; align-items: start; }
.s-lg { font: 700 10px/16px var(--font-title); letter-spacing: .04em; color: rgb(var(--tone-neutral-05)); padding-top: 6px; }
.s-tx { margin-left: -8px; border-radius: 8px; transition: box-shadow .2s; }
.s-tx .q-field__control { min-height: 0 !important; padding: 0 8px; }
.s-tx .q-field__native { font-family: var(--font-info); font-size: 15px !important; line-height: 22px !important; padding: 2px 0 !important; color: rgb(var(--tone-neutral-02)); resize: none; min-height: 26px !important; }
.s-tx.orig .q-field__native { font-weight: 700; color: rgb(var(--tone-neutral-01)); }
.s-tx:focus-within { background: #fff; box-shadow: 0 0 0 3px rgb(var(--variant-primary-04)); }
.s-flags { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.s-reviewfoot { padding: 12px 18px; display: flex; align-items: center; gap: 12px; font-size: 14px; }
.s-empty { padding: 40px 22px; text-align: center; color: rgb(var(--tone-neutral-05)); }

/* video pronto */
.s-hero { display: flex; align-items: center; gap: 20px; padding: 24px; flex-wrap: wrap; }
.s-heroic { width: 64px; height: 64px; border-radius: 20px; corner-shape: squircle; background: rgb(var(--status-success-09)); color: rgb(var(--status-success-02)); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.s-heroic.err { background: rgb(var(--status-error-09)); color: rgb(var(--status-error-02)); }
.s-table { width: 100%; border-collapse: collapse; }
.s-table th { text-align: left; padding: 12px 16px; font: 700 11px/16px var(--font-info); text-transform: uppercase; letter-spacing: .04em; color: rgb(var(--tone-neutral-05)); border-bottom: 1px solid rgb(var(--tone-neutral-09)); }
.s-table td { padding: 14px 16px; font-size: 15px; border-bottom: 1px solid rgb(var(--tone-neutral-10)); vertical-align: middle; }
.s-table tr:last-child td { border-bottom: 0; }
.mds-banner .body { margin: 0; }