/* VanioReseller — portale operatore/agenzia
   Riallineato alla palette del sito pubblico (vanioweb/Assets/css/vanio.css):
   stessi colori, raggi e ombre del brand kit, così i due siti sembrano la
   stessa piattaforma invece di due prodotti diversi. */

:root {
    --teal:        #00A8A8;
    --teal-dark:   #007B7F;
    --teal-light:  #BDEEEE;
    --navy:        #0A1B2F;
    --navy-mid:    #15314F;
    --bg:          #F4F6F8;
    --white:       #FFFFFF;
    --border:      #E2E8F0;
    --text-dark:   #0A1B2F;
    --text-mid:    #475569;
    --text-light:  #64748B;
    --success:     #22C55E;
    --warning:     #F59E0B;
    --error:       #EF4444;

    --grad-teal:   linear-gradient(135deg, #00A8A8, #007B7F);
    --grad-navy:   linear-gradient(135deg, #0A1B2F, #15314F);

    --shadow-sm:   0 4px 12px rgba(10,27,47,.06);
    --shadow-md:   0 8px 24px rgba(10,27,47,.08);
    --shadow-lg:   0 12px 30px rgba(10,27,47,.10);

    --radius-sm:   8px;
    --radius-md:   14px;
    --radius-lg:   20px;
    --radius-card: 22px;
    --radius-pill: 999px;

    --font: 'Poppins', 'Inter', Arial, sans-serif;

    /* Alias retrocompatibili con il resto di questo file */
    --brand:      var(--teal-dark);
    --brand-dk:   var(--navy);
}

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--font);
    font-size: .9rem;
    background: var(--bg);
    color: var(--text-dark);
}

h1, h2, h3, h4, h5, h6 { font-weight: 700; color: var(--navy); letter-spacing: -.01em; }

a { color: var(--teal-dark); }
a:hover { color: var(--teal); }

/* ── Topbar (mirror del .header di vanioweb, in versione app-shell: qui non
   c'è la navigazione marketing del sito pubblico, solo brand + utente) ── */
.reseller-topbar {
    display: flex; align-items: center; justify-content: space-between;
    height: 64px; padding: 0 28px;
    background: var(--white); border-bottom: 1px solid var(--border);
    position: sticky; top: 0; z-index: 100;
}
.reseller-logo    { font-size: 1.25rem; font-weight: 800; color: var(--navy); letter-spacing: -.01em; text-decoration: none; }
.reseller-logo span { color: var(--teal); font-weight: 600; }
.reseller-topbar-user { display: flex; align-items: center; gap: 14px; }
.reseller-user-name   { font-weight: 600; font-size: .875rem; color: var(--navy); }
.reseller-user-badge  { background: var(--teal-light); color: var(--teal-dark); font-size: .68rem; font-weight: 700;
                        padding: .2rem .65rem; border-radius: var(--radius-pill); text-transform: uppercase; letter-spacing: .04em; }

/* ── Shell — stesso pattern a due colonne dell'area personale di vanioweb
   (.account-sidebar + .account-nav): sidebar chiara sticky, contenuto in cards
   ariose su sfondo --bg, non un pannello scuro da "amministrazione". ── */
.reseller-shell   { display: flex; align-items: flex-start; gap: 32px;
                    max-width: 1400px; margin: 0 auto; padding: 28px 28px 56px; }
.account-sidebar  { width: 260px; flex-shrink: 0; position: sticky; top: 92px; }
.account-nav      { background: var(--white); border-radius: var(--radius-lg); border: 1px solid var(--border);
                    overflow: hidden; box-shadow: var(--shadow-sm); }
.reseller-main    { flex: 1; min-width: 0; }

/* ── Nav list (stessa struttura di .account-nav-item su vanioweb) ── */
.nav-list         { list-style: none; margin: 0; padding: .5rem; }
.nav-list li      { margin: 0; }
.nav-section      { padding: 1rem 1rem .4rem; font-size: .68rem; text-transform: uppercase;
                    letter-spacing: .09em; color: var(--text-light); font-weight: 700; }
.nav-link, .account-nav-item {
    display: flex; align-items: center; gap: 12px; padding: 13px 16px;
    color: var(--text-mid); text-decoration: none; font-size: .9rem; font-weight: 500;
    border-left: 3px solid transparent; border-radius: 0;
    transition: background .18s, color .18s, border-color .18s;
}
.nav-link:hover, .account-nav-item:hover { background: var(--bg); color: var(--teal-dark); }
.nav-link.active, .account-nav-item.attivo {
    background: var(--teal-light); color: var(--teal-dark); font-weight: 600; border-left-color: var(--teal);
}
.nav-icon         { width: 1.1rem; text-align: center; flex-shrink: 0; font-size: .95rem; color: var(--text-light); }
.nav-link:hover .nav-icon, .nav-link.active .nav-icon { color: var(--teal-dark); }

.btn-logout { padding: .5rem 1rem; background: var(--white); border: 1.5px solid var(--border);
              color: var(--text-mid); border-radius: var(--radius-pill); cursor: pointer; font-family: var(--font);
              font-weight: 600; font-size: .82rem; transition: border-color .2s, color .2s; }
.btn-logout:hover { border-color: var(--error); color: var(--error); }

/* ── Pages ── */
.page-header      { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.page-title       { font-size: 1.5rem; font-weight: 700; margin: 0 0 .25rem; color: var(--navy); }
.page-subtitle     { color: var(--text-mid); margin: 0 0 1.5rem; }

/* ── KPI ── */
.kpi-grid         { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
                    gap: 1rem; margin-bottom: 1.5rem; }
.kpi-card         { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-card);
                    padding: 1.25rem; box-shadow: var(--shadow-sm); }
.kpi-card.kpi-warning { border-top: 3px solid var(--warning); }
.kpi-card.kpi-success { border-top: 3px solid var(--success); }
.kpi-label        { display: block; font-size: .72rem; color: var(--text-light); text-transform: uppercase;
                    letter-spacing: .06em; font-weight: 600; }
.kpi-value        { display: block; font-size: 2rem; font-weight: 800; margin-top: .25rem; color: var(--navy); }

/* ── Login ── */
.login-body       { display: flex; align-items: center; justify-content: center;
                    min-height: 100vh; background: var(--grad-navy); font-family: var(--font); }
.login-card       { background: var(--white); border-radius: var(--radius-card); padding: 2.5rem; width: 100%; max-width: 380px;
                    box-shadow: var(--shadow-lg); }
.login-logo       { text-align: center; margin-bottom: 2rem; }
.login-logo-text  { display: block; font-size: 2rem; font-weight: 800; background: var(--grad-teal);
                    -webkit-background-clip: text; background-clip: text; color: transparent; }
.login-logo-sub   { display: block; font-size: .75rem; color: var(--text-light); text-transform: uppercase; letter-spacing: .06em; margin-top: .25rem; }
.field            { margin-bottom: 1rem; }
.field label      { display: block; font-size: .8rem; margin-bottom: .35rem; color: var(--text-dark); font-weight: 600; }
.field input      { width: 100%; padding: .6rem .85rem; border: 1.5px solid var(--border);
                    border-radius: var(--radius-md); font-size: .9rem; font-family: var(--font);
                    transition: border-color .2s, box-shadow .2s; outline: none; }
.field input:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(0,168,168,.15); }
.btn-login        { width: 100%; padding: .7rem; background: var(--grad-teal); color: #fff;
                    border: none; border-radius: var(--radius-pill); font-size: .95rem; font-weight: 700;
                    font-family: var(--font); cursor: pointer; box-shadow: 0 6px 18px rgba(0,168,168,.28);
                    transition: filter .2s, transform .15s; }
.btn-login:hover  { filter: brightness(1.06); }
.btn-login:active { transform: scale(.98); }
.alert-error      { background: #FEE2E2; color: #991B1B; border: 1px solid #FCA5A5;
                    border-radius: var(--radius-md); padding: .6rem .85rem; margin-bottom: 1rem; font-size: .85rem; }

/* ── Thread messaggi ── */
.messaggi-thread  { display: flex; flex-direction: column; gap: .75rem; }
.messaggio        { border-radius: var(--radius-md); padding: .75rem 1rem; max-width: 80%; }
.messaggio-operatore  { background: var(--teal-light); align-self: flex-end; }
.messaggio-backoffice { background: var(--bg); align-self: flex-start; border: 1px solid var(--border); }
.messaggio-header     { font-size: .75rem; color: var(--text-light); margin-bottom: .25rem; }
.messaggio-testo      { font-size: .9rem; color: var(--text-dark); }

/* ── Filtri ── */
.filtri-bar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }

/* ── Tabella dati densa (stile gestionale, per elenchi lunghi dove le card
   a tutta larghezza sprecherebbero spazio — es. "Le mie opzioni") ── */
.vanio-table {
    width: 100%; border-collapse: collapse; background: var(--white);
    border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.vanio-table th {
    background: var(--bg); color: var(--text-light); text-align: left;
    font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 700;
    padding: .7rem 1rem; border-bottom: 1px solid var(--border);
}
.vanio-table td { padding: .65rem 1rem; border-bottom: 1px solid var(--border); font-size: .875rem; vertical-align: middle; }
.vanio-table tr:last-child td { border-bottom: none; }
.vanio-table tbody tr:hover td { background: var(--bg); }
.vanio-table tr.text-muted td { color: var(--text-light); }

/* ── Blazor error ── */
#blazor-error-ui  { background: #FEF3C7; color: #92400E; padding: .6rem 1rem; font-size: .85rem;
                    border-top: 1px solid var(--warning); position: fixed; bottom: 0; left: 0; right: 0;
                    display: none; font-family: var(--font); }
#blazor-error-ui.blazor-error-show { display: block; }
#blazor-error-ui .reload { color: var(--teal-dark); font-weight: 600; margin-left: .5rem; }
#blazor-error-ui .dismiss { cursor: pointer; float: right; }

@media (max-width: 860px) {
    .reseller-shell   { flex-direction: column; padding: 20px 16px 40px; gap: 20px; }
    .account-sidebar  { width: 100%; position: static; }
    .account-nav      { display: flex; flex-wrap: wrap; }
    .nav-section      { display: none; }
    .nav-link, .account-nav-item { flex: 1 1 auto; justify-content: center; border-left: none; border-bottom: 3px solid transparent; padding: 10px 12px; font-size: .8rem; }
    .nav-link.active, .account-nav-item.attivo { border-left-color: transparent; border-bottom-color: var(--teal); }
    .reseller-topbar-user .reseller-user-name { display: none; }
}