/* ============================================================
   Dashboard Controllo Accessi — pannelli area e lista lettori
   ============================================================ */

/* ─── Pannello singola area ─── */

.ac-area-card {
    --ac-accent:       var(--mud-palette-primary);
    --ac-accent-light: var(--mud-palette-primary-lighten);

    display:        flex;
    flex-direction: column;
    align-items:    center;      /* centra i figli orizzontalmente */
    text-align:     center;      /* centra il testo */
    gap:            4px;
    min-width:      120px;
    padding:        12px 16px 10px;
    border-radius:  10px;
    border:         1.5px solid var(--mud-palette-lines-default);
    background:     var(--mud-palette-surface);
    position:       relative;
    overflow:       hidden;
    transition:     border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Accento colorato sul bordo sinistro */
.ac-area-card::before {
    content:    "";
    position:   absolute;
    left:       0;
    top:        0;
    bottom:     0;
    width:      3px;
    background: var(--ac-accent);
    border-radius: 10px 0 0 10px;
}

.ac-area-card:hover {
    border-color: var(--ac-accent);
    box-shadow:   0 2px 8px rgba(0,0,0,0.08);
}

/* Variante avviso (riempimento ≥ 75%) */
.ac-area-card--warning {
    --ac-accent:       #f59e0b;
    --ac-accent-light: rgba(245,158,11,0.12);
}

/* Variante piena (riempimento ≥ 100%) */
.ac-area-card--full {
    --ac-accent:       var(--mud-palette-error);
    --ac-accent-light: var(--mud-palette-error-lighten);
    background: var(--ac-accent-light);
}

/* Nome dell'area */
.ac-area-card-name {
    font-size:      0.75rem;
    font-weight:    600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color:          var(--ct-secondary);
    white-space:    nowrap;
    overflow:       hidden;
    text-overflow:  ellipsis;
    max-width:      160px;
}

/* Riga contatore presenze */
.ac-area-card-count {
    display:     flex;
    align-items: baseline;
    gap:         4px;
    margin-top:  2px;
}

/* Numero grande di presenti */
.ac-area-card-number {
    font-size:   2rem;
    font-weight: 700;
    line-height: 1;
    color:       var(--ac-accent);
}

/* Testo "/ max" accanto al numero */
.ac-area-card-max {
    font-size:  0.85rem;
    color:      var(--ct-secondary);
    font-weight: 500;
}

/* Barra di riempimento */
.ac-area-card-bar-track {
    height:        4px;
    border-radius: 4px;
    background:    var(--mud-palette-lines-default);
    margin-top:    6px;
    overflow:      hidden;
    width:         100%;    /* necessario con align-items: center sul genitore */
}

.ac-area-card-bar-fill {
    height:        100%;
    border-radius: 4px;
    background:    var(--ac-accent);
    transition:    width 0.4s ease;
    min-width:     0%;
    max-width:     100%;
}

/* ─── Griglia adattiva lettori ─── */

.ac-readers-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap:                   6px 16px;
}

/* ─── Pallino stato lettore ─── */

.ac-reader-dot {
    flex-shrink:   0;
    display:       inline-block;
    width:         9px;
    height:        9px;
    border-radius: 50%;
    background:    var(--ct-secondary);
}

.ac-reader-dot--online {
    background:  #10b981;          /* verde */
    box-shadow:  0 0 0 2px rgba(16,185,129,0.20);
}

.ac-reader-dot--offline {
    background:  var(--mud-palette-error);   /* rosso */
    box-shadow:  0 0 0 2px rgba(var(--mud-palette-error-rgb), 0.20);
}

.ac-reader-dot--unknown {
    background:  var(--ct-secondary);        /* grigio */
}

/* ─── Bottone configurazione dashboard ─── */

.ac-config-btn {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           30px;
    height:          30px;
    border-radius:   8px;
    border:          1.5px solid var(--mud-palette-lines-default);
    background:      var(--mud-palette-surface);
    color:           var(--ct-secondary);
    cursor:          pointer;
    transition:      border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
    flex-shrink:     0;
}

.ac-config-btn:hover,
.ac-config-btn--active {
    border-color: var(--mud-palette-primary);
    color:        var(--mud-palette-primary);
    background:   var(--mud-palette-primary-lighten);
}

/* Contenitore che àncora il pannello in posizione assoluta */
.ac-config-anchor {
    position: relative;
}

/* Pannello a tendina */
.ac-config-panel {
    position:      absolute;
    top:           calc(100% + 6px);
    right:         0;
    z-index:       200;
    min-width:     240px;
    max-width:     320px;
    background:    var(--mud-palette-surface);
    border:        1.5px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    box-shadow:    0 4px 20px rgba(0,0,0,0.12);
    padding:       14px 16px;
}

/* Titolo sezione dentro il pannello (es. "ZONE", "LETTORI") */
.ac-config-section-title {
    font-size:      0.72rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color:          var(--ct-secondary);
    margin-bottom:  4px;
}

/* Riga toggle "Tutte le zone" / "Tutti i lettori" con link "Nessuno" */
.ac-config-toggle-row {
    display:       flex;
    align-items:   center;
    gap:           10px;
    margin-bottom: 6px;
}

/* Label cliccabile: checkbox + testo "Tutte le zone" */
.ac-config-all-toggle {
    display:     flex;
    align-items: center;
    gap:         7px;
    flex:        1;
    cursor:      pointer;
    font-size:   0.82rem;
    font-weight: 600;
    color:       var(--ct-body-color);
}

.ac-config-all-toggle input[type="checkbox"] {
    width:        15px;
    height:       15px;
    cursor:       pointer;
    accent-color: var(--mud-palette-primary);
    flex-shrink:  0;
}

/* Pulsante "Nessuno" accanto al toggle, stile link secondario */
.ac-config-none-link {
    font-size:             0.75rem;
    color:                 var(--ct-secondary);
    background:            none;
    border:                none;
    padding:               0;
    cursor:                pointer;
    text-decoration:       underline;
    text-underline-offset: 2px;
    white-space:           nowrap;
}

.ac-config-none-link:hover {
    opacity: 0.75;
}

/* Singola riga zona/lettore nel pannello */
.ac-config-item {
    display:     flex;
    align-items: center;
    gap:         8px;
    padding:     3px 0;
    cursor:      pointer;
    transition:  opacity 0.15s ease;
}

.ac-config-item input[type="checkbox"] {
    width:        15px;
    height:       15px;
    cursor:       pointer;
    accent-color: var(--mud-palette-primary);
    flex-shrink:  0;
}

.ac-config-item-label {
    font-size:     0.82rem;
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
    max-width:     220px;
    cursor:        pointer;
}

/* Modalità automatica: i singoli item sono disabilitati e leggermente opachi */
.ac-config-item--dimmed {
    opacity: 0.4;
    cursor:  default;
}

.ac-config-item--dimmed .ac-config-item-label {
    cursor: default;
}

.ac-config-item--dimmed input[type="checkbox"] {
    cursor: default;
}

/* Separatore tra le due sezioni */
.ac-config-divider {
    border:     none;
    border-top: 1px solid var(--mud-palette-lines-default);
    margin:     10px 0;
}