/* SourceHub - Impostazioni (Part 5.2 row 6), page-local styling only (file ownership: this
   sheet is linked as the first element of the page content, GUI/STAFF/SETTINGS/settings.jsp -
   nothing here touches app.css or any shared component's own class).

   #shSettingsBody lays out GUI/APP/components/record.js#mountTabs' own markup (mounted here
   with its shared `vertical: true` option, GUI/APP/app.css' `.sh-tabs-v`) as a left-hand list
   of sections next to the chosen section's content, on the right; only this page's own
   width/spacing lives here, the vertical direction itself is the shared component's. */

#shSettingsBody
{
    display: flex;
    align-items: flex-start;
    gap: 1.75rem;
}

#shSettingsBody > .sh-tabs-v
{
    flex: 0 0 232px;
    border-right: 1px solid var(--sh-line);
    padding-right: .875rem;
    margin-bottom: 0;
}

#shSettingsBody > .sh-tab-panel { flex: 1 1 auto; min-width: 0; }

@media (max-width: 720px)
{
    #shSettingsBody { flex-direction: column; }
    #shSettingsBody > .sh-tabs-v
    {
        flex-direction: row;
        flex: none;
        width: 100%;
        overflow-x: auto;
        border-right: none;
        border-bottom: 1px solid var(--sh-line);
        padding-right: 0;
        padding-bottom: .5rem;
    }
    #shSettingsBody > .sh-tabs-v button { width: auto; white-space: nowrap; }
}

/* -----------------------------------------------------------------------------------------
   Shared building blocks the three sections below all use, so each one does not restate its
   own copy: a settings block (a card with its own "Salva" button and last-saved line), the
   "predefinito" mark beside a control at its prudent starting value, and a dictionary row.
   ----------------------------------------------------------------------------------------- */

.sh-set-block { margin-bottom: 1.25rem; }
.sh-set-block .card-body > .form-label:first-child { margin-top: 0; }
.sh-set-block .form-label { margin-top: 1rem; }
.sh-set-block .form-label:first-child { margin-top: 0; }

.sh-set-default
{
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .72rem;
    color: var(--sh-ink-3);
    margin-left: .5rem;
    font-weight: 600;
}
.sh-set-default .fa-duotone { color: var(--sh-accent); }

.sh-set-saved { font-size: .75rem; color: var(--sh-ink-3); }
.sh-set-saved .fa-duotone { color: var(--sh-teal); margin-right: .3rem; }

.sh-dict-row
{
    display: flex;
    align-items: baseline;
    gap: .625rem;
    padding: .55rem 0;
    border-bottom: 1px solid var(--sh-line-2);
}
.sh-dict-row:last-child { border-bottom: none; }
.sh-dict-row .sh-dict-label { flex: 1 1 auto; font-size: .84375rem; }
.sh-dict-row.sh-retired .sh-dict-label { color: var(--sh-ink-4); text-decoration: line-through; }
.sh-dict-row .sh-dict-actions { flex: none; display: flex; align-items: center; gap: .5rem; }

/* A template row (sezione "Modelli di gara"): same typography as GUI/APP/app.css' own
   .sh-opt option card, on a plain non-interactive border - this row is never itself clicked,
   only its own buttons are, so it carries none of .sh-opt's pointer/hover/selected styling. */
.sh-tpl-row
{
    padding: .7rem .8rem;
    border: 1px solid var(--sh-line);
    border-radius: 8px;
    background: #fff;
}
.sh-tpl-row .sh-t { font-size: .84375rem; font-weight: 600; }
.sh-tpl-row .sh-d { font-size: .78rem; color: var(--sh-ink-3); margin-top: .1rem; line-height: 1.4; }