/*
 * gestionale.css
 * Stile condiviso del Sistema Gestionale
 * Incluso da: menu_tabelle, menu_comunica, menu_prelazioni,
 *             menu_attesa, tab_corsi_browse e pagine affini.
 *
 * Struttura attesa nell'HTML:
 *   <div class="mast"> … </div>
 *   <div class="page"> … </div>
 *
 * Varianti di colore del sigillo:
 *   nessuna classe aggiuntiva = oro (default)
 *   .mast-brand--green        = verde (es. Tabelle)
 *   .mast-brand--blue         = blu   (es. Prelazioni)
 */

/* ── Reset & Base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
/*    --ink:      #0a5b80;*/
    --ink:      #0a1f6e;
    --paper:    #f5f1eb;
    --warm:     #ede8df;
    --warm2:    #e4ddd2;
    --gold:     #c9a96e;
    --gold-dk:  #87693a;
    --gold-lt:  rgba(201,169,110,.12);
    --ash:      ##4F4F4F;
    --smoke:    #b0adb8;
    --white:    #fdfcfa;
    --red:      #b33a3a
        
    --red-lt:   rgba(179,58,58,.08);
    --border:   rgba(0,0,0,.08);
}

html { font-size: 15px; }

body {
    font-family: 'DM Sans', sans-serif;
    background: var(--paper);
    color: var(--ink);
    min-height: 100vh;
    overflow-x: hidden;
}

/* Noise texture */
body::before {
    content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
}

/* Bagliore dorato in alto a destra */
body::after {
    content: ''; position: fixed;
    top: -180px; right: -180px;
    width: 520px; height: 520px;
    background: radial-gradient(ellipse, rgba(201,169,110,.07) 0%, transparent 68%);
    pointer-events: none; z-index: 0;
}


/* ══════════════════════════════════════════════════════════
   MASTHEAD
   ══════════════════════════════════════════════════════════ */
.mast {
    position: relative; z-index: 20;
    background: var(--ink);
    padding: 0 52px;
    display: flex; align-items: center;
    border-bottom: 1px solid rgba(201,169,110,.15);
    min-height: 72px;
}

.mast-brand {
    display: flex; align-items: center; gap: 16px;
    padding: 20px 36px 20px 0;
    margin-right: 36px;
    border-right: 1px solid rgba(255,255,255,.07);
}

/* Sigillo circolare */
.sigil {
    width: 42px; height: 42px;
    border: 1.5px solid var(--gold); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: var(--gold); font-size: 15px;
    position: relative; flex-shrink: 0;
}
.sigil::after {
    content: ''; position: absolute; inset: 5px;
    border: 1px solid rgba(201,169,110,.3); border-radius: 50%;
}

.brand-sup {
    display: block;
    font-size: .58rem; letter-spacing: 3.5px; text-transform: uppercase;
    color: var(--gold); margin-bottom: 3px;
}
.brand-main {
    font-family: 'Playfair Display', serif;
    font-size: 1.1rem; color: #fff; font-weight: 400;
}

/* Breadcrumb */
.mast-crumb {
    display: flex; align-items: center; gap: 8px;
    font-size: .88rem; color: rgba(255,255,255,.55);
}
.mast-crumb a {
    color: rgba(255,255,255,.55);
    text-decoration: none;
    transition: color .2s;
}
.mast-crumb a:hover { color: var(--gold); }
.mast-crumb .sep { opacity: .3; }

/* Pulsante destra */
.mast-right { margin-left: auto; }

.mast-back-btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 18px;
    border: 1px solid rgba(201,169,110,.5); border-radius: 20px;
    font-size: .72rem; color: rgba(255,255,255,.7);
    cursor: pointer; background: none;
    font-family: 'DM Sans', sans-serif;
    transition: all .2s; letter-spacing: .4px;
    text-decoration: none;
}
.mast-back-btn:hover { border-color: var(--gold); color: var(--gold); }


/* ══════════════════════════════════════════════════════════
   PAGE — griglia principale (1 colonna + sidebar 280px)
   ══════════════════════════════════════════════════════════ */
.page {
    position: relative; z-index: 5;
    max-width: 900px;
    margin: 0 auto;
    padding: 48px 48px 80px;
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 32px;
    align-items: start;
}

/* Variante più stretta per pagine senza sidebar */
.page--narrow {
    max-width: 820px;
    grid-template-columns: 1fr;
}

/* ── Page header ──────────────────────────────────────────── */
.page-hd {
    grid-column: 1 / -1;
    padding-bottom: 28px;
    border-bottom: 1px solid rgba(0,0,0,.07);
}

.pg-eyebrow {
    font-size: .6rem; letter-spacing: 4px; text-transform: uppercase;
    color: var(--gold-dk); margin-bottom: 8px;
}
.pg-title {
    font-family: 'Playfair Display', serif;
    font-size: 2rem; font-weight: 400; line-height: 1.15;
}
.pg-title em { font-style: italic; color: var(--gold-dk); }

.pg-rule {
    display: flex; align-items: center; gap: 10px; margin-top: 12px;
}
.pg-rule::before {
    content: ''; width: 32px; height: 2px;
    background: var(--gold); flex-shrink: 0;
}
.pg-desc { font-size: .82rem; color: var(--ash); line-height: 1.6; }

/* Badge contatore record */
.record-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px;
    background: var(--gold-lt);
    border: 1px solid rgba(201,169,110,.25);
    border-radius: 20px;
    font-size: .75rem; font-weight: 600; color: var(--gold-dk);
    white-space: nowrap;
}


/* ══════════════════════════════════════════════════════════
   COLONNA PRINCIPALE
   ══════════════════════════════════════════════════════════ */
.main-col { display: flex; flex-direction: column; gap: 20px; }

/* ── Section group (card con intestazione) ────────────────── */
.section-group {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,.04), 0 4px 16px rgba(0,0,0,.04);
}

.section-hd {
    display: flex; align-items: center; gap: 10px;
    padding: 13px 20px;
    background: #02054f;
    border-bottom: 1px solid rgba(0,0,0,.06);
}
.section-hd-icon {
    width: 28px; height: 28px;
    background: rgba(201,169,110,.12);
    border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    font-size: .9rem; flex-shrink: 0;
}
.section-hd-label {
    font-size: .62rem; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase;
    color: #fff;
}

/* ── Menu list ────────────────────────────────────────────── */
.menu-list { list-style: none; }
.menu-list li { border-bottom: 1px solid rgba(0,0,0,.05); }
.menu-list li:last-child { border-bottom: none; }

.menu-list a {
    display: flex; align-items: center; gap: 14px;
    padding: 15px 20px;
    text-decoration: none; color: var(--ink);
    transition: background .13s;
}
.menu-list a:hover { background: #f7f4ef; }
.menu-list a:hover .link-arrow  { color: var(--gold-dk); transform: translateX(3px); }
.menu-list a:hover .link-stripe { background: var(--gold); }

/* Striscia colorata a sinistra di ogni voce */
.link-stripe {
    width: 3px; height: 28px;
    background: var(--warm2);
    border-radius: 2px; flex-shrink: 0;
    transition: background .13s;
}
/* Altezza maggiore quando c'è descrizione */
.link-stripe--tall { height: 36px; }

.link-body  { flex: 1; }
.link-label { font-size: .92rem; font-weight: 500; line-height: 1.3; color: var(--ink); }
.link-desc  { font-size: .76rem; color: var(--ash); margin-top: 2px; line-height: 1.4; }

.link-arrow {
    font-size: .8rem; color: var(--smoke);
    transition: color .13s, transform .13s; flex-shrink: 0;
}


/* ══════════════════════════════════════════════════════════
   TOOLBAR (pagine browse/tabelle)
   ══════════════════════════════════════════════════════════ */
.toolbar {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin-bottom: 20px;
}
.toolbar-sep { flex: 1; }

/* ── Pulsanti ─────────────────────────────────────────────── */
.btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 18px;
    border-radius: 8px;
    font-family: 'DM Sans', sans-serif;
    font-size: .84rem; font-weight: 500;
    cursor: pointer;
    transition: all .18s;
    border: 1.5px solid var(--gold);
    white-space: nowrap; letter-spacing: .01em;
}
.btn:active { transform: scale(.97) !important; }
.btn svg { flex-shrink: 0; }

.btn--outline {
    background: var(--white); color: var(--ink);
    border-color: rgba(0,0,0,.15);
}
.btn--outline:hover {
    border-color: var(--gold); color: var(--gold-dk);
    background: var(--gold-lt);
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(201,169,110,.15);
}
/* 3. Pulsante ELIMINA (Allerta Discreta) */
/*.btn-delete {
    color: #a52a2a;  Rosso mattone, non troppo aggressivo 
}
.btn-delete:hover {
    background-color: rgba(165, 42, 42, 0.08);
    color: #800000;
}*/




.btn--danger {
    color: #a52a2a;   
}
.btn--danger:hover {
    background-color: rgba(165, 42, 42, 0.08);
    color: #800000;
}

.btn--primary {
    background: var(--ink); color: rgba(255,255,255,.88);
    border-color: var(--ink);
}
.btn--primary:hover {
    background: #0d2580;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(10,31,110,.25);
}
.pill-uscita  { 
            display: inline-flex;
            align-items: center;
            gap: 7px;
            background: #f5c518;
            color: #1a1a1a;
            border:  #888c8e 1px solid;
            border-radius: 8px;
            padding: 9px 22px;
            font-size: .88rem;
            font-weight: 700;
            cursor: pointer;
            font-family: inherit;
            transition: filter .18s, transform .12s;
            margin-top: 4px;
            text-decoration: none;
            
   }
   .pic { padding: 7px 22px;}
 

/* ══════════════════════════════════════════════════════════
   TABLE CARD (pagine browse)
   ══════════════════════════════════════════════════════════ */
.table-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,.04), 0 6px 24px rgba(0,0,0,.06);
}
.table-wrap { overflow-x: auto; }

table { width: 100%; border-collapse: collapse; }

thead th {
    padding: 13px 22px;
    text-align: left;
    font-size: .62rem; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--ash); background: #f9f7f4;
    border-bottom: 1px solid rgba(0,0,0,.07);
    user-select: none;
}
th.col-num { width: 48px; text-align: center; padding-right: 10px; }

tbody tr {
    border-bottom: 1px solid rgba(0,0,0,.05);
    cursor: pointer; transition: background .12s;
}
tbody tr:last-child { border-bottom: none; }
tbody tr:hover { background: #f7f4ef; }

tbody tr.row-selected,
tbody tr.selected {
    background: #d4f0e0 !important;
    box-shadow: inset 4px 0 0 #3aaa64;
}
tbody tr.row-selected td,
tbody tr.selected td {
    color: #1a5c35;
    font-weight: 600;
}
tbody tr.row-selected:hover,
tbody tr.selected:hover {
    background: #c2ebd5 !important;
}

tbody td { padding: 14px 22px; font-size: .9rem; line-height: 1.4; }

td.col-num {
    text-align: center; font-size: .72rem; color: var(--smoke);
    font-variant-numeric: tabular-nums; padding-right: 10px;
}

/* Footer della table-card */
.card-footer {
    padding: 14px 22px;
    background: #f9f7f4;
    border-top: 1px solid rgba(0,0,0,.06);
    display: flex; justify-content: space-between; align-items: center;
}
.footer-info { font-size: .72rem; color: var(--smoke); }

/* Empty state */
.empty {
    padding: 64px 24px; text-align: center; color: var(--ash);
}
.empty-icon { font-size: 2.8rem; margin-bottom: 16px; opacity: .4; }
.empty h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.1rem; font-weight: 400; color: var(--ink); margin-bottom: 6px;
}
.empty p { font-size: .82rem; color: var(--ash); }


/* ══════════════════════════════════════════════════════════
   SIDEBAR
   ══════════════════════════════════════════════════════════ */
.sidebar { display: flex; flex-direction: column; gap: 18px; }

.scard {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 14px; overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,.04), 0 4px 16px rgba(0,0,0,.04);
}
.scard-hd {
    padding: 16px 20px 12px;
    border-bottom: 1px solid rgba(0,0,0,.06);
}
.scard-eyebrow {
    font-size: .58rem; letter-spacing: 3px; text-transform: uppercase;
    color: var(--gold-dk); font-weight: 600; margin-bottom: 4px;
}
.scard-title {
    font-family: 'Playfair Display', serif;
    font-size: .95rem; font-weight: 400; color: var(--ink);
}
.scard-body { padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; }

/* Step numerati */
.step { display: flex; align-items: flex-start; gap: 10px; }
.step-num {
    width: 20px; height: 20px; border-radius: 50%;
    background: var(--gold); color: #fff;
    font-size: .65rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; margin-top: 1px;
}
.step-txt { font-size: .78rem; color: var(--ash); line-height: 1.55; }
.step-txt strong { color: var(--ink); }

/* Box avviso / info */
.warn-box,
.info-box {
    display: flex; align-items: flex-start; gap: 10px;
    background: rgba(201,169,110,.08);
    border: 1px solid rgba(201,169,110,.22);
    border-radius: 10px; padding: 12px 14px;
}
.warn-ico,
.info-ico { font-size: 1rem; flex-shrink: 0; margin-top: 1px; }
.warn-txt,
.info-txt { font-size: .76rem; color: var(--ash); line-height: 1.55; }


/* ══════════════════════════════════════════════════════════
   BOTTOM — pulsante di ritorno a fondo pagina
   ══════════════════════════════════════════════════════════ */
.bottom {
    grid-column: 1 / -1;
    padding-top: 8px;
    border-top: 1px solid rgba(0,0,0,.07);
    display: flex;
}

.btn-ret {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 22px;
    border: 1.5px solid var(--gold); border-radius: 22px;
    background: transparent;
    font-family: 'DM Sans', sans-serif;
    font-size: .82rem; font-weight: 700; color: var(--gold-dk);
    cursor: pointer; transition: background .2s; text-decoration: none;
}
.btn-ret:hover { background: rgba(201,169,110,.1); }

.btn-back {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 22px;
    border: 1.5px solid var(--gold); border-radius: 22px;
    background: #f5c518; color: #1a1a1a;
    font-family: 'DM Sans', sans-serif;
    font-size: .82rem; font-weight: 700; 
    cursor: pointer; transition: background .2s; text-decoration: none;
     }


/* ══════════════════════════════════════════════════════════
   COMUNICAZIONI — select corso + action cards
   ══════════════════════════════════════════════════════════ */

/* Sezione selezione corso (full-width) */
.select-section {
    grid-column: 1 / -1;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 24px 28px;
    box-shadow: 0 1px 3px rgba(0,0,0,.04), 0 4px 16px rgba(0,0,0,.04);
}
.select-label {
    display: block;
    font-size: .6rem; letter-spacing: 3.5px; text-transform: uppercase;
    color: var(--gold-dk); font-weight: 600;
    margin-bottom: 10px;
}
.select-wrapper { position: relative; }
.select-wrapper::after {
    content: '▾'; position: absolute; right: 14px; top: 50%;
    transform: translateY(-50%); color: var(--ash);
    pointer-events: none; font-size: .9rem;
}
.field-control {
    width: 100%;
    padding: 12px 36px 12px 16px;
    border: 1.5px solid rgba(0,0,0,.1);
    border-radius: 9px;
    font-family: 'DM Sans', sans-serif;
    font-size: .9rem; color: var(--ink);
    background: var(--paper);
    appearance: none; -webkit-appearance: none;
    transition: border-color .2s, box-shadow .2s;
}
.field-control:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(201,169,110,.14);
    background: var(--white);
}

/* Lista azioni (colonna sinistra) */
.actions { display: flex; flex-direction: column; gap: 14px; }

/* Action card */
.acard {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 14px; overflow: hidden;
    cursor: pointer;
    display: flex; align-items: stretch;
    transition: transform .22s cubic-bezier(.16,1,.3,1), box-shadow .22s, border-color .2s;
    box-shadow: 0 1px 3px rgba(0,0,0,.04), 0 4px 16px rgba(0,0,0,.04);
    position: relative;
}
.acard:hover {
    transform: translateY(-3px);
    box-shadow: 0 2px 6px rgba(0,0,0,.06), 0 14px 34px rgba(0,0,0,.09);
    border-color: rgba(201,169,110,.4);
}
.acard:hover .acard-stripe  { background: var(--gold); }
.acard:hover .acard-arrow   { transform: translateX(4px); opacity: 1; }
.acard:hover .acard-ico     { background: rgba(201,169,110,.15); transform: scale(1.06); }
.acard:active { transform: translateY(-1px); }

.acard-stripe {
    width: 4px; flex-shrink: 0;
    background: var(--warm2);
    transition: background .2s;
}
.acard.featured .acard-stripe { background: var(--gold); }

.acard-body {
    flex: 1; padding: 20px 22px;
    display: flex; align-items: center; gap: 18px;
}
.acard-ico {
    width: 50px; height: 50px; flex-shrink: 0;
    background: var(--warm); border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px;
    transition: background .2s, transform .2s;
}
.acard.featured .acard-ico { background: rgba(201,169,110,.1); }

.acard-txt  { flex: 1; }
.acard-tag  {
    font-size: .58rem; letter-spacing: 3px; text-transform: uppercase;
    color: var(--smoke); margin-bottom: 4px;
}
.acard-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.02rem; font-weight: 400; color: var(--ink);
    margin-bottom: 5px; line-height: 1.2;
}
.acard-desc { font-size: .76rem; color: var(--ash); line-height: 1.5; }

.abadge {
    display: inline-block;
    padding: 2px 9px; border-radius: 20px;
    font-size: .6rem; letter-spacing: 1px;
    text-transform: uppercase; font-weight: 500;
    margin-top: 6px;
}
.abadge-gold {
    background: rgba(201,169,110,.12); color: var(--gold-dk);
    border: 1px solid rgba(201,169,110,.25);
}
.abadge-ok {
    background: rgba(45,122,85,.1); color: #2d7a55;
    border: 1px solid rgba(45,122,85,.2);
}

.acard-cta {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 0 22px 0 10px; gap: 8px; flex-shrink: 0;
}
.abtn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 20px; border-radius: 8px;
    background: var(--ink); color: #fff;
    border: none; cursor: pointer;
    font-family: 'DM Sans', sans-serif;
    font-size: .76rem; font-weight: 500;
    white-space: nowrap;
    transition: background .2s, box-shadow .2s;
}
.abtn:hover {
    background: #162d5a;
    box-shadow: 0 3px 12px rgba(10,31,110,.25);
}
.acard.featured .abtn { background: var(--gold-dk); }
.acard.featured .abtn:hover {
    background: var(--gold);
    box-shadow: 0 3px 12px rgba(160,124,69,.3);
}

.acard-arrow {
    font-size: 14px; color: var(--smoke);
    opacity: .4; transition: transform .2s, opacity .2s;
}


/* ══════════════════════════════════════════════════════════
   EDIT WRAP — pagine scheda / form (es. tab_*_edit.php)
   ══════════════════════════════════════════════════════════ */
.edit-wrap {
    position: relative; z-index: 5;
    max-width: 540px;
    margin: 0 auto;
    padding: 48px 24px 80px;
}

/* Card form */
.form-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,.04), 0 6px 28px rgba(0,0,0,.07);
}

/* Intestazione card */
.form-card-hd {
    background: var(--ink);
    border-bottom: 1px solid rgba(201,169,110,.18);
    padding: 20px 28px;
    display: flex; align-items: center; gap: 14px;
}
.form-card-hd .sigil {
    border-color: rgba(201,169,110,.6);
    font-size: 1rem;
}
.form-card-hd .hd-text { flex: 1; }
.form-card-hd .hd-eyebrow {
    font-size: .58rem; letter-spacing: 3.5px; text-transform: uppercase;
    color: var(--gold); margin-bottom: 3px;
}
.form-card-hd .hd-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.1rem; font-weight: 400; color: #fff;
}
.mode-pill {
    padding: 4px 12px;
    border: 1px solid rgba(201,169,110,.4);
    border-radius: 20px;
    font-size: .68rem; font-weight: 600;
    letter-spacing: .08em; text-transform: uppercase;
    color: var(--gold);
    white-space: nowrap;
}

/* Body del form */
.form-card-body { padding: 32px 28px 28px; }

/* Gruppo campo */
.field-group { margin-bottom: 24px; }

.field-label {
    display: flex; align-items: baseline; gap: 8px;
    margin-bottom: 8px;
}
.field-label-text {
    font-size: .7rem; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--ash);
}
.field-hint {
    font-size: .72rem; color: var(--smoke);
    font-weight: 400; letter-spacing: 0; text-transform: none;
}

input[type="text"],
input[type="email"],
input[type="number"],
input[type="date"],
textarea,
select {
    width: 100%;
    padding: 12px 16px;
    border: 1.5px solid rgba(0,0,0,.12);
    border-radius: 9px;
    font-family: 'DM Sans', sans-serif;
    font-size: .96rem;
    color: var(--ink);
    background: var(--paper);
    transition: border-color .18s, box-shadow .18s;
    outline: none;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
textarea:focus,
select:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(201,169,110,.14);
    background: var(--white);
}

.char-counter {
    text-align: right;
    font-size: .72rem; color: var(--smoke);
    margin-top: 5px; transition: color .15s;
    font-variant-numeric: tabular-nums;
}
.char-counter.warn  { color: #c9953a; }
.char-counter.limit { color: var(--red); }

.divider {
    border: none;
    border-top: 1px solid rgba(0,0,0,.07);
    margin: 0 0 24px;
}

/* Pulsanti azione del form */
.form-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.btn-save {
    flex: 1; justify-content: center;
    background: var(--ink);
    color: rgba(255,255,255,.9);
    border: 1.5px solid var(--ink);
}
.btn-save:hover {
    background: #0d2580;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(10,31,110,.25);
}

.btn-delete {
    background: var(--white);
    color: var(--red);
    border: 1.5px solid rgba(179,58,58,.3);
}
.btn-delete:hover {
    background: var(--red-lt); border-color: var(--red);
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(179,58,58,.15);
}

.btn-back {
    background: var(--white);
    color: var(--gold-dk);
    border: 1.5px solid rgba(201,169,110,.4);
}
.btn-back:hover {
    background: rgba(201,169,110,.08);
    border-color: var(--gold);
    transform: translateY(-1px);
}


/* ══════════════════════════════════════════════════════════
   MODAL — conferma / avviso
   ══════════════════════════════════════════════════════════ */
.modal-overlay {
    display: none;
    position: fixed; inset: 0;
    background: rgba(10,31,110,.55);
    z-index: 300;
    align-items: center; justify-content: center;
}
.modal-overlay.active { display: flex; }

.modal-box {
    background: var(--white);
    border-radius: 16px;
    padding: 36px 32px 28px;
    max-width: 360px;
    width: calc(100% - 32px);
    text-align: center;
    box-shadow: 0 24px 64px rgba(0,0,0,.18);
    border: 1px solid var(--border);
    animation: popIn .18s ease;
}
@keyframes popIn {
    from { transform: scale(.94); opacity: 0; }
    to   { transform: scale(1);  opacity: 1; }
}
.modal-icon { margin-bottom: 16px; }
.modal-box h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.1rem; font-weight: 400;
    color: var(--ink); margin-bottom: 8px;
}
.modal-box p {
    font-size: .82rem; color: var(--ash);
    line-height: 1.6; margin-bottom: 24px;
}
.modal-btns { display: flex; gap: 10px; }


/* ══════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
    .page {
        grid-template-columns: 1fr;
        padding: 24px 16px 60px;
    }
    .mast {
        padding: 0 16px;
        flex-wrap: wrap; gap: 10px;
        min-height: auto;
        padding-top: 14px; padding-bottom: 14px;
    }
    .mast-brand {
        border-right: none;
        padding-right: 0; margin-right: 0;
    }
    .mast-right { margin-left: 0; }
    .bottom { grid-column: 1; }
    .page-hd { grid-column: 1; }
    .edit-wrap { padding: 20px 12px 60px; }
    .form-card-body { padding: 24px 18px 20px; }
    .form-card-hd   { padding: 16px 18px; }
    .btn-save { flex: none; width: 100%; }
}