/*
 * Area Riservata Local Radar.
 *
 * Usa i token del sito (`assets/css/style.css`): stesse variabili, stessi
 * caratteri, stessi pulsanti. Qui ci sono solo i pezzi che il sito pubblico non
 * ha — le schermate di accesso e di lavoro — non un secondo tema.
 */

/*
 * `hidden` deve vincere sul display delle classi.
 *
 * L'attributo HTML `hidden` nasconde solo grazie alla regola `[hidden]
 * { display: none }` del foglio di stile del browser, che appartiene
 * all'origine USER AGENT: qualunque regola d'autore che imposti `display`
 * le passa davanti, a prescindere dalla specificità.
 *
 * Qui succedeva proprio questo. `.lr-login`, `.lr-stack`, `.lr-selector` e
 * `.lr-quota-grid` dichiarano display, e sono esattamente i contenitori che il
 * JavaScript accende e spegne. Il risultato: la pagina mostrava tutti gli stati
 * insieme fin dal primo disegno — il modulo di accesso restava davanti anche a
 * sessione avviata, e il selettore delle attività compariva pure con una sola
 * attività, dove resta vuoto perché non viene popolato.
 *
 * Il JavaScript era ed è corretto: imposta `el.hidden`. Mancava questa riga.
 * Va tenuta prima delle altre regole e con `!important`, perché deve battere
 * anche le classi che arriveranno dopo.
 */
[hidden] {
    display: none !important;
}

body.lr-merchant {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background:
        radial-gradient(circle at 12% -10%, rgba(21, 197, 232, 0.14), transparent 55%),
        var(--bg-deep);
}

/* ── Intestazione ─────────────────────────────────────────────────────── */

.lr-topbar {
    border-bottom: 1px solid var(--border-soft);
    background: rgba(8, 20, 33, 0.85);
    backdrop-filter: blur(10px);
    position: sticky;
    top: 0;
    z-index: 10;
}

.lr-topbar-inner {
    width: min(1100px, 100%);
    margin: 0 auto;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.lr-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.lr-brand img { width: 30px; height: 30px; border-radius: 8px; }

.lr-brand-tag {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--accent);
    border: 1px solid rgba(21, 197, 232, 0.35);
    border-radius: 999px;
    padding: 2px 9px;
}

.lr-account {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.88rem;
    color: var(--text-muted);
    flex-wrap: wrap;
}

/* ── Impaginazione ────────────────────────────────────────────────────── */

.lr-main {
    flex: 1;
    width: min(1100px, 100%);
    margin: 0 auto;
    padding: 32px 20px 64px;
}

.lr-panel {
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: 16px;
    padding: 24px;
}

.lr-stack { display: flex; flex-direction: column; gap: 20px; }

.lr-section-label {
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.13em;
    color: var(--text-muted);
    margin-bottom: 10px;
}

/* ── Accesso ──────────────────────────────────────────────────────────── */

.lr-login {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 20px;
}

.lr-login-card {
    width: min(420px, 100%);
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: 18px;
    padding: 32px;
}

.lr-login-card h1 { font-size: 1.5rem; letter-spacing: -0.02em; margin-bottom: 6px; }
.lr-login-card p.lr-sub { color: var(--text-muted); font-size: 0.94rem; margin-bottom: 24px; }

.lr-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }

.lr-field label { font-size: 0.86rem; color: var(--text-muted); }

.lr-field input {
    background: rgba(8, 20, 33, 0.8);
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    padding: 11px 13px;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.96rem;
    width: 100%;
}

.lr-field input:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
    border-color: transparent;
}

.lr-login-card button[type="submit"] { width: 100%; margin-top: 4px; }

.lr-login-foot {
    margin-top: 18px;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 0.86rem;
}

/* ── Messaggi ─────────────────────────────────────────────────────────── */

.lr-message {
    border-radius: 10px;
    padding: 10px 13px;
    font-size: 0.88rem;
    margin-bottom: 16px;
    border: 1px solid transparent;
}

.lr-message[data-tone="error"] {
    background: rgba(220, 78, 78, 0.12);
    border-color: rgba(220, 78, 78, 0.35);
    color: #ffb4b4;
}

.lr-message[data-tone="ok"] {
    background: rgba(21, 197, 232, 0.12);
    border-color: rgba(21, 197, 232, 0.35);
    color: #9fe9f7;
}

/* ── Attività selezionata ─────────────────────────────────────────────── */

.lr-business-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

#business-name { font-size: 1.45rem; letter-spacing: -0.02em; }
#business-place { color: var(--text-muted); font-size: 0.92rem; margin-top: 4px; }

.lr-selector { display: flex; flex-direction: column; gap: 6px; min-width: 240px; }
.lr-selector label { font-size: 0.78rem; color: var(--text-muted); }

.lr-selector select {
    background: rgba(8, 20, 33, 0.8);
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    padding: 10px 12px;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.94rem;
}

.lr-selector select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ── Piano e disponibilità ────────────────────────────────────────────── */

.lr-quota-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1px;
    background: var(--border-soft);
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    overflow: hidden;
}

.lr-quota-cell {
    background: var(--bg-contrast);
    padding: 15px 17px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.lr-quota-cell dt {
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
}

.lr-quota-cell dd {
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.lr-quota-cell dd.lr-text { font-size: 1.05rem; font-weight: 500; letter-spacing: 0; }

/* Riga che lega un dato al suo significato commerciale. Discreta: serve a
   chiarire, non a vendere. */
.lr-note {
    margin-top: 14px;
    font-size: 0.86rem;
    line-height: 1.5;
    color: var(--text-muted);
    max-width: 62ch;
}

.lr-note a { color: var(--accent); text-decoration: underline; }

/* ── Stati ────────────────────────────────────────────────────────────── */

.lr-state {
    text-align: center;
    padding: 40px 24px;
    color: var(--text-muted);
}

.lr-state h2 { color: var(--text-primary); font-size: 1.15rem; margin-bottom: 8px; }
.lr-state p { max-width: 46ch; margin: 0 auto 18px; font-size: 0.94rem; }

.lr-spinner {
    width: 26px;
    height: 26px;
    border: 2px solid var(--border-soft);
    border-top-color: var(--accent);
    border-radius: 50%;
    margin: 0 auto 14px;
    animation: lr-spin 0.8s linear infinite;
}

@keyframes lr-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .lr-spinner { animation: none; }
}

/* ── Stato della pubblicazione ────────────────────────────────────────── */

.lr-publishing-state {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Più grande dei chip di riga: è il primo dato che un operatore cerca quando
   apre il pannello, e regge da solo la risposta a "posso pubblicare?". */
#publishing-badge {
    font-size: 0.82rem;
    padding: 5px 13px;
}

#publishing-contact { margin-top: 16px; }

/* ── Elenco contenuti ─────────────────────────────────────────────────── */

.lr-content-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: var(--border-soft);
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    overflow: hidden;
}

.lr-content-item {
    background: var(--bg-contrast);
    padding: 14px 16px;
}

.lr-content-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.lr-content-title {
    font-weight: 600;
    letter-spacing: -0.01em;
    margin-bottom: 7px;
    /* Un titolo lungo manda a capo: non si taglia e non allarga la riga. */
    overflow-wrap: anywhere;
}

.lr-content-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.lr-chip {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--border-soft);
    color: var(--text-muted);
    white-space: nowrap;
}

/* Lo stato si legge dal colore prima che dal testo: è il dato che l'operatore
   cerca per primo scorrendo l'elenco. */
.lr-chip-status[data-tone="live"] {
    background: rgba(21, 197, 232, 0.14);
    border-color: rgba(21, 197, 232, 0.4);
    color: #9fe9f7;
}

.lr-chip-status[data-tone="wait"] {
    background: rgba(230, 170, 60, 0.14);
    border-color: rgba(230, 170, 60, 0.4);
    color: #f0cf94;
}

.lr-chip-status[data-tone="draft"],
.lr-chip-status[data-tone="off"] {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-muted);
}

.lr-content-period {
    font-size: 0.84rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.lr-content-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.lr-content-action {
    font-size: 0.84rem;
    padding: 7px 13px;
    /* Bersaglio tattile decente anche da telefono. */
    min-height: 38px;
}

.lr-content-action[disabled] {
    opacity: 0.55;
    cursor: default;
}

.lr-danger { color: #ffb4b4; }

.lr-content-message { margin: 12px 0 0; }

@media (max-width: 640px) {
    .lr-content-head { flex-direction: column; }
    .lr-content-actions { width: 100%; }
    .lr-content-action { flex: 1; text-align: center; }
}

/* ── Gestione contenuti (segnaposto) ──────────────────────────────────── */

.lr-soon {
    border: 1px dashed var(--border-soft);
    border-radius: 12px;
    padding: 26px;
    text-align: center;
    color: var(--text-muted);
}

.lr-soon strong { color: var(--text-primary); display: block; margin-bottom: 6px; }
.lr-soon p { max-width: 52ch; margin: 0 auto; font-size: 0.92rem; }

.lr-soon-note {
    margin-top: 14px;
    font-size: 0.86rem;
}

.lr-soon-note a { color: var(--accent); text-decoration: underline; }

/* ── Piè di pagina ────────────────────────────────────────────────────── */

.lr-foot {
    border-top: 1px solid var(--border-soft);
    padding: 20px;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.84rem;
}

.lr-foot a { color: var(--text-muted); text-decoration: underline; }

/* ── Schermo stretto ──────────────────────────────────────────────────── */

@media (max-width: 640px) {
    .lr-main { padding: 22px 16px 48px; }
    .lr-panel { padding: 18px; }
    .lr-login-card { padding: 24px; }
    .lr-business-head { flex-direction: column; }
    .lr-selector { min-width: 0; width: 100%; }
    #business-name { font-size: 1.25rem; }
}