/* ============================================================
   GesTask — Profilo
   Scheda dell'identità, preferenze di notifica e token API.
   ============================================================ */

/* ── Scheda dell'identità ───────────────────────────────────────── */

.gt-profile-avatar {
    align-items: center;
    background: color-mix(in srgb, var(--profile-accent, var(--p-primary-color)) 14%, transparent);
    border-radius: var(--p-border-radius-full);
    color: var(--profile-accent, var(--p-primary-color));
    display: flex;
    font-size: 2rem;
    font-weight: 800;
    height: 96px;
    justify-content: center;
    margin: 0 auto;
    overflow: hidden;
    width: 96px;
}

.gt-profile-avatar img {
    border-radius: 50%;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.gt-avatar-editor {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: .75rem;
    margin-bottom: 1rem;
}

.gt-avatar-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
    justify-content: center;
}

/* I moduli di caricamento e rimozione sono due invii indipendenti, quindi
   due elementi `<form>` distinti: `inline-flex` li rimette sulla stessa
   riga dei pulsanti accanto, che altrimenti andrebbero a capo. */
.gt-avatar-form { display: inline-flex; margin: 0; }

.gt-avatar-btn {
    align-items: center;
    background: var(--p-content-alt-background);
    border: 1px solid var(--p-content-border-color);
    border-radius: var(--p-border-radius-lg);
    color: var(--p-text-color);
    cursor: pointer;
    display: inline-flex;
    font-size: var(--p-font-size-sm);
    font-weight: 600;
    gap: .375rem;
    line-height: 1;
    margin: 0;
    padding: .5rem .75rem;
    transition:
        background-color var(--p-transition-fast),
        border-color var(--p-transition-fast),
        color var(--p-transition-fast);
}

.gt-avatar-btn:hover,
.gt-avatar-btn:focus-visible {
    border-color: var(--p-primary-color);
    color: var(--p-primary-emphasis-color);
}

.gt-avatar-btn-danger:hover,
.gt-avatar-btn-danger:focus-visible {
    border-color: var(--p-danger-color);
    color: var(--p-danger-emphasis-color);
}

.gt-avatar-hint {
    color: var(--p-text-muted-color);
    font-size: var(--p-font-size-xs);
    margin: 0;
}

/* Il messaggio di rifiuto di un file prende il posto del suggerimento sul
   formato: è lo stesso punto della pagina, quindi si legge dove si stava
   già guardando. */
.gt-avatar-hint.is-error {
    color: var(--p-danger-emphasis-color);
    font-weight: 600;
}

/* ── Sezioni ────────────────────────────────────────────────────── */

.gt-section-subtitle {
    color: var(--p-text-muted-color);
    font-size: var(--p-font-size-sm);
    margin: .1875rem 0 0;
}

/* La barra di salvataggio vale per i pannelli dentro al modulo: sulla
   sezione dei token si nasconde con l'attributo `hidden`, e per questo la
   riga non usa una classe `.d-flex` di Bootstrap, che lo sovrascriverebbe. */
.gt-profile-actions {
    align-items: center;
    display: flex;
    gap: .75rem;
    margin-top: 1rem;
}

.gt-profile-actions[hidden] { display: none; }

.gt-tip-list {
    display: flex;
    flex-direction: column;
    gap: .375rem;
    margin: 0;
    padding: 0 0 0 1.125rem;
}

.gt-tip-list li {
    color: var(--p-text-muted-color);
    font-size: var(--p-font-size-sm);
}

/* ── Notifiche ──────────────────────────────────────────────────── */

.notification-device-panel {
    align-items: center;
    background: var(--p-content-alt-background);
    border: 1px solid var(--p-content-border-color);
    border-radius: var(--p-border-radius-xl);
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding: 1rem;
}

.notification-preference-list {
    display: flex;
    flex-direction: column;
}

/* Ogni preferenza è una riga separata da una linea: un elenco di sette
   caselle senza separazione si legge come un blocco unico e diventa
   difficile capire dove finisce un'etichetta e comincia la successiva. */
.notification-preference-list .p-field {
    border-bottom: 1px solid var(--p-content-border-color);
    margin: 0;
    padding: .6875rem 0;
}

.notification-preference-list .p-field:last-child { border-bottom: 0; }

.notification-channel-panel {
    background: var(--p-content-alt-background);
    border: 1px solid var(--p-content-border-color);
    border-radius: var(--p-border-radius-xl);
    padding: 1rem;
}

.notification-channel-head {
    align-items: flex-start;
    display: flex;
    gap: .75rem;
}

.notification-channel-icon {
    align-items: center;
    background: var(--channel-bg, var(--p-primary-subtle-color));
    border-radius: var(--p-border-radius-md);
    color: var(--channel-color, var(--p-primary-color));
    display: inline-flex;
    flex-shrink: 0;
    font-size: 1rem;
    height: 2.125rem;
    justify-content: center;
    width: 2.125rem;
}

.notification-channel-body { padding-left: 2.875rem; padding-top: .5rem; }

/* Le categorie di un canale: sei caselle brevi, in due colonne dove c'è posto. */
.notification-event-list {
    display: grid;
    gap: .25rem 1.5rem;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    margin: .5rem 0 1rem;
}

.notification-event-list .p-field { margin: 0; }

/* Dentro il pannello push il riquadro del dispositivo è già incorniciato. */
.notification-channel-body .notification-device-panel {
    background: none;
    border: 0;
    padding: 0;
}

/* ── Permessi ───────────────────────────────────────────────────── */

.profile-permission-list {
    display: grid;
    gap: .625rem;
}

.profile-permission-row {
    align-items: center;
    background: var(--p-content-alt-background);
    border: 1px solid var(--p-content-border-color);
    border-radius: var(--p-border-radius-lg);
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding: .8125rem 1rem;
}

.profile-permission-row span { color: var(--p-text-muted-color); }

/* ── Token API ──────────────────────────────────────────────────── */

/* Il token è una stringa lunga e senza spazi: senza `overflow-wrap` esce
   dal riquadro invece di andare a capo. */
.gt-token-value {
    display: block;
    font-size: var(--p-font-size-sm);
    overflow-wrap: anywhere;
}

.gt-token-status {
    color: var(--p-text-muted-color);
    font-size: var(--p-font-size-sm);
}

.gt-token-help {
    font-size: var(--p-font-size-sm);
    margin-top: 1rem;
}

.gt-token-help summary {
    color: var(--p-text-muted-color);
    cursor: pointer;
}

.gt-token-example {
    background: var(--p-content-alt-background);
    border-radius: var(--p-border-radius-md);
    font-size: var(--p-font-size-xs);
    margin: .5rem 0;
    overflow-x: auto;
    padding: .625rem .8125rem;
}

/* ── Adattamento agli schermi piccoli ───────────────────────────── */

@media (max-width: 767.98px) {
    .notification-device-panel {
        align-items: stretch;
        flex-direction: column;
    }

    .notification-channel-body { padding-left: 0; }

    .gt-profile-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .profile-permission-row {
        align-items: flex-start;
        flex-direction: column;
        gap: .25rem;
    }
}