/* SAM PWA — app.css
   Palette: blu istituzionale #1a3a5c, bianco, grigio carta
   Mobile-first, accessibile, senza framework
*/

:root {
    --blu:          #1a3a5c;
    --blu-scuro:    #0f2340;
    --blu-chiaro:   #2a5a8c;
    --accento:      #e8a020;    /* oro SAM */
    --bg:           #f4f6f9;
    --bg-card:      #ffffff;
    --testo:        #1a1a2e;
    --testo-sec:    #4a5568;
    --bordo:        #d1d9e0;
    --successo:     #2d7a4f;
    --errore:       #c53030;
    --avviso:       #b7791f;
    --radius:       10px;
    --radius-sm:    6px;
    --shadow:       0 2px 8px rgba(0,0,0,.08);
    --font:         -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --transition:   .18s ease;
}

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

/* L'attributo `hidden` deve vincere sulle regole d'autore. Senza questa riga
   un `display` dichiarato qui (per esempio `.btn { display: inline-flex }`)
   batte sempre il `[hidden] { display: none }` del browser, che appartiene al
   foglio di stile utente-agente: il JavaScript imposta `element.hidden = true`
   e l'elemento resta visibile. E' cosi' che il pannello notifiche offriva
   "Collega notifiche esistenti" anche quando non serviva. */
[hidden] { display: none !important; }

html { font-size: 16px; -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--font);
    background:  var(--bg);
    color:       var(--testo);
    line-height: 1.6;
    min-height:  100dvh;
}

/* ── Tipografia ── */
h1 { font-size: 1.6rem; font-weight: 700; color: var(--blu); }
h2 { font-size: 1.25rem; font-weight: 600; color: var(--blu); }
h3 { font-size: 1.05rem; font-weight: 600; }
p  { color: var(--testo-sec); }

a { color: var(--blu-chiaro); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Layout ── */
.container {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    padding: 0 1rem;
}

.container--wide {
    max-width: 900px;
}

/* ── Navbar ── */
/* Con viewport-fit=cover + status bar translucida la webview arriva sotto la
   Dynamic Island: senza questi inset iOS intercetta i tap sulla prima fascia. */
.navbar {
    background:    var(--blu);
    color:         #fff;
    padding:       .75rem 1rem;
    padding-top:   calc(.75rem + env(safe-area-inset-top, 0px));
    padding-left:  calc(1rem + env(safe-area-inset-left, 0px));
    padding-right: calc(1rem + env(safe-area-inset-right, 0px));
    display:       flex;
    align-items:   center;
    justify-content: space-between;
    position:      sticky;
    top:           0;
    z-index:       100;
    box-shadow:    var(--shadow);
}

.navbar__brand {
    font-weight: 700;
    font-size:   1rem;
    color:       #fff;
    display:     flex;
    align-items: center;
    gap:         .5rem;
}

.navbar__brand span.dot {
    display:         inline-block;
    width:           8px;
    height:          8px;
    background:      var(--accento);
    border-radius:   50%;
}

.navbar__link {
    color:       rgba(255,255,255,.85);
    font-size:   .875rem;
    transition:  color var(--transition);
    display:     inline-flex;
    align-items: center;
    min-height:  44px;
}
.navbar__link:hover { color: #fff; text-decoration: none; }

/* ── Campanella notifiche: movimento + onde colorate in base all'importanza ── */
.bell {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.bell__icon {
    position: relative;
    display: inline-block;
    font-size: 1.15rem;
}

.bell__badge {
    position: absolute;
    top: -6px;
    right: -10px;
    background: #e11d48;
    color: #fff;
    border-radius: 999px;
    font-size: .68rem;
    line-height: 1;
    padding: 2px 5px;
    font-weight: 700;
    z-index: 2;
}

.bell--unread .bell__icon {
    animation: sam-bell-swing 2.6s ease-in-out infinite;
}

@keyframes sam-bell-swing {
    0%, 76%, 100% { transform: rotate(0deg); }
    80%  { transform: rotate(-13deg); }
    84%  { transform: rotate(10deg); }
    88%  { transform: rotate(-7deg); }
    92%  { transform: rotate(4deg); }
    96%  { transform: rotate(0deg); }
}

/* Onde che si propagano dal centro della campanella */
.bell--unread .bell__icon::before,
.bell--unread .bell__icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border-radius: 50%;
    border: 2px solid currentColor;
    color: rgba(255,255,255,.65);
    opacity: 0;
    pointer-events: none;
    animation: sam-bell-wave 2.6s ease-out infinite;
}

.bell--unread .bell__icon::after { animation-delay: .8s; }

@keyframes sam-bell-wave {
    0%   { transform: scale(.4); opacity: .6; }
    100% { transform: scale(2.2); opacity: 0; }
}

/* Priorità media → onde arancioni, più marcate */
.bell--media .bell__icon::before,
.bell--media .bell__icon::after { color: #ff9a3d; }

/* Priorità alta → onde rosse, movimento più rapido e urgente */
.bell--alta .bell__icon::before,
.bell--alta .bell__icon::after { color: #ff4d4d; }
.bell--alta .bell__icon,
.bell--alta .bell__icon::before,
.bell--alta .bell__icon::after { animation-duration: 1.4s; }

/* ── Auth pages ── */
.auth-page {
    min-height: 100dvh;
    display:    flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding:    1.5rem 1rem;
    padding-top:    calc(1.5rem + env(safe-area-inset-top, 0px));
    padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
}

.auth-logo {
    text-align:    center;
    margin-bottom: 1.5rem;
}

.auth-logo__sigla {
    display:       inline-block;
    background:    var(--blu);
    color:         #fff;
    font-size:     2rem;
    font-weight:   800;
    padding:       .5rem 1.25rem;
    border-radius: var(--radius);
    letter-spacing: .1em;
    border-bottom: 3px solid var(--accento);
}

.auth-logo__sub {
    display:    block;
    font-size:  .8rem;
    color:      var(--testo-sec);
    margin-top: .4rem;
}

.auth-card {
    background:    var(--bg-card);
    border-radius: var(--radius);
    box-shadow:    var(--shadow);
    padding:       2rem 1.5rem;
    width:         100%;
    max-width:     440px;
}

.auth-card h1 {
    font-size:     1.3rem;
    margin-bottom: 1.25rem;
    text-align:    center;
}

/* ── Form ── */
.form-group {
    margin-bottom: 1rem;
}

.form-group label {
    display:       block;
    font-size:     .875rem;
    font-weight:   500;
    color:         var(--testo);
    margin-bottom: .35rem;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group input[type="password"],
.form-group input[type="file"],
.form-group select,
.form-group textarea,
textarea {
    width:         100%;
    padding:       .625rem .875rem;
    border:        1.5px solid var(--bordo);
    border-radius: var(--radius-sm);
    font-size:     1rem;
    font-family:   var(--font);
    background:    #fff;
    color:         var(--testo);
    transition:    border-color var(--transition), box-shadow var(--transition);
}

.form-group input:not([type="file"]) {
    -webkit-appearance: none;
}

.form-group textarea,
textarea {
    min-height: 7rem;
    resize: vertical;
    line-height: 1.45;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
textarea:focus {
    outline:      none;
    border-color: var(--blu-chiaro);
    box-shadow:   0 0 0 3px rgba(42,90,140,.15);
}

.form-group input.error {
    border-color: var(--errore);
}

.form-hint {
    font-size:  .78rem;
    color:      var(--testo-sec);
    margin-top: .25rem;
}

/* ── Checkbox ── */
.form-check {
    display:     flex;
    align-items: flex-start;
    gap:         .6rem;
    margin:      .75rem 0;
}

.form-check input[type="checkbox"] {
    width:         18px;
    height:        18px;
    flex-shrink:   0;
    margin-top:    .1rem;
    accent-color:  var(--blu);
    cursor:        pointer;
}

.form-check label {
    font-size: .875rem;
    color:     var(--testo-sec);
    cursor:    pointer;
}

/* ── Pulsanti ── */
.btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             .5rem;
    padding:         .7rem 1.5rem;
    border:          none;
    border-radius:   var(--radius-sm);
    font-size:       1rem;
    font-family:     var(--font);
    font-weight:     600;
    cursor:          pointer;
    transition:      background var(--transition), transform var(--transition);
    text-decoration: none;
    white-space:     nowrap;
}

.btn--primary {
    background: var(--blu);
    color:      #fff;
    width:      100%;
}
.btn--primary:hover  { background: var(--blu-scuro); text-decoration: none; color: #fff; }
.btn--primary:active { transform: scale(.98); }

.btn--secondary {
    background: transparent;
    color:      var(--blu);
    border:     1.5px solid var(--blu);
}
.btn--secondary:hover { background: var(--bg); text-decoration: none; }

.btn--small {
    padding:   .4rem .9rem;
    font-size: .875rem;
}

/* ── Alert ── */
.alert {
    padding:       .875rem 1rem;
    border-radius: var(--radius-sm);
    margin-bottom: 1rem;
    font-size:     .9rem;
    border-left:   4px solid;
}

.alert--error {
    background:  #fff5f5;
    border-color: var(--errore);
    color:        var(--errore);
}

.alert--success {
    background:  #f0fff4;
    border-color: var(--successo);
    color:        var(--successo);
}

.alert--info {
    background:   #ebf4ff;
    border-color: var(--blu-chiaro);
    color:        var(--blu-scuro);
}

/* ── Card dashboard ── */
.card {
    background:    var(--bg-card);
    border-radius: var(--radius);
    box-shadow:    var(--shadow);
    padding:       1.25rem;
    margin-bottom: 1rem;
}

.card__header {
    display:        flex;
    align-items:    center;
    justify-content: space-between;
    margin-bottom:  .875rem;
    padding-bottom: .625rem;
    border-bottom:  1px solid var(--bordo);
}

.card__title {
    font-size:   1rem;
    font-weight: 600;
    color:       var(--blu);
    display:     flex;
    align-items: center;
    gap:         .5rem;
}

.push-status__message {
    margin: 0 0 .85rem;
    color: var(--testo-sec);
    font-size: .9rem;
    line-height: 1.45;
}

.push-status[data-state="active"] .push-status__message { color: var(--successo); }
.push-status[data-state="denied"] .push-status__message,
.push-status[data-state="temporary_error"] .push-status__message { color: var(--errore); }

/* ── Servizi / toggle list ── */
.service-list {
    display:        flex;
    flex-direction: column;
    gap:            .625rem;
}

.service-item {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         .75rem 1rem;
    background:      var(--bg);
    border-radius:   var(--radius-sm);
    border:          1px solid var(--bordo);
    transition:      border-color var(--transition);
}

.service-item:has(input:checked) {
    border-color: var(--blu-chiaro);
    background:   #f0f5ff;
}

.service-item__info { flex: 1; }

.service-item__name {
    font-weight: 500;
    font-size:   .9rem;
}

.service-item__desc {
    font-size:  .78rem;
    color:      var(--testo-sec);
    margin-top: .1rem;
}

.service-item__badge {
    font-size:     .7rem;
    padding:       .15rem .5rem;
    border-radius: 99px;
    font-weight:   600;
    margin-left:   .5rem;
}

.badge--sempre  { background: #e0f0e8; color: #1a5c36; }
.badge--opt     { background: #e8f0fb; color: #1a3a5c; }
.badge--presto  { background: #fef3cd; color: #7d5200; }

/* Toggle switch */
.toggle {
    position: relative;
    width:    44px;
    height:   24px;
    flex-shrink: 0;
}

.toggle input {
    opacity: 0;
    width:   0;
    height:  0;
    position: absolute;
}

.toggle__track {
    position:      absolute;
    inset:         0;
    background:    var(--bordo);
    border-radius: 99px;
    cursor:        pointer;
    transition:    background var(--transition);
}

.toggle input:checked + .toggle__track { background: var(--blu-chiaro); }

.toggle__track::after {
    content:       '';
    position:      absolute;
    left:          3px;
    top:           3px;
    width:         18px;
    height:        18px;
    background:    #fff;
    border-radius: 50%;
    transition:    transform var(--transition);
    box-shadow:    0 1px 3px rgba(0,0,0,.2);
}

.toggle input:checked + .toggle__track::after { transform: translateX(20px); }
.toggle input:disabled + .toggle__track { opacity: .5; cursor: not-allowed; }

/* ── User header in dashboard ── */
.user-header {
    background:    linear-gradient(135deg, var(--blu-scuro), var(--blu));
    color:         #fff;
    padding:       1.5rem;
    border-radius: var(--radius);
    margin-bottom: 1rem;
    position:      relative;
    overflow:      hidden;
}

.user-header::after {
    content:       '';
    position:      absolute;
    right:         -20px;
    top:           -20px;
    width:         120px;
    height:        120px;
    background:    rgba(255,255,255,.04);
    border-radius: 50%;
}

.user-header__name {
    font-size:   1.3rem;
    font-weight: 700;
    margin-bottom: .25rem;
}

.user-header__meta {
    font-size:  .8rem;
    opacity:    .75;
}

.status-badge {
    display:       inline-flex;
    align-items:   center;
    gap:           .3rem;
    font-size:     .75rem;
    font-weight:   600;
    padding:       .2rem .65rem;
    border-radius: 99px;
    margin-top:    .5rem;
}

.status-badge--active   { background: rgba(45,122,79,.3);  color: #a8f0c0; }
.status-badge--pending  { background: rgba(183,121,31,.3); color: #fcd980; }

.user-header__edit {
    position:    relative;
    z-index:     1;
    display:     inline-block;
    margin-top:  .85rem;
    color:       #fff;
    font-size:   .82rem;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.user-header__edit:hover { color: #fff; opacity: .85; }

/* ── Installazione app ── */
.install-panel {
    margin-bottom: 1rem;
}

.install-panel__button {
    width: 100%;
    min-height: 78px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: .9rem;
    padding: 1rem 1.1rem;
    border: 0;
    border-radius: var(--radius);
    background: var(--accento);
    color: var(--blu-scuro);
    box-shadow: 0 3px 10px rgba(0,0,0,.14);
    font-family: var(--font);
    text-align: left;
    cursor: pointer;
}

.install-panel__button:active {
    transform: scale(.99);
}

.install-panel__icon {
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(255,255,255,.5);
    font-size: 1.5rem;
}

.install-panel__button strong {
    display: block;
    font-size: 1.1rem;
    line-height: 1.15;
}

.install-panel__button small {
    display: block;
    margin-top: .15rem;
    color: rgba(15,35,64,.82);
    font-size: .82rem;
    font-weight: 600;
}

.install-panel__status {
    min-height: 1.2rem;
    margin-top: .45rem;
    font-size: .82rem;
    color: var(--testo-sec);
}

.install-panel__dismiss {
    display: block;
    margin: .5rem auto 0;
    padding: .3rem .5rem;
    background: none;
    border: 0;
    color: var(--testo-sec);
    font-family: var(--font);
    font-size: .78rem;
    text-decoration: underline;
    cursor: pointer;
}
.install-panel__dismiss:hover { color: var(--blu); }

.install-guide {
    background:    linear-gradient(135deg, #e8f4fd, #d1e8fa);
    border:        1px solid #a0c8f0;
    border-radius: var(--radius);
    padding:       1rem 1.25rem;
    margin-bottom: 1rem;
    display:       none;  /* visibile solo su iOS via JS */
}

.install-guide__steps {
    display:        flex;
    flex-direction: column;
    gap:            .4rem;
    margin-top:     .5rem;
}

.install-guide__step {
    display:     flex;
    align-items: center;
    gap:         .5rem;
    font-size:   .875rem;
    color:       var(--blu-scuro);
}

.install-guide__step .step-icon {
    font-size:  1.1rem;
    flex-shrink: 0;
}

/* ── Footer minimo ── */
.footer {
    text-align:  center;
    padding:     1.5rem 1rem;
    padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
    font-size:   .78rem;
    color:       var(--testo-sec);
    border-top:  1px solid var(--bordo);
    margin-top:  2rem;
}

/* ── Utility ── */
.mt-1 { margin-top: .5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mb-1 { margin-bottom: .5rem; }
.text-center { text-align: center; }
.text-sm     { font-size: .875rem; }
.text-muted  { color: var(--testo-sec); }
.divider     { height: 1px; background: var(--bordo); margin: 1rem 0; }

/* Focus visibile per accessibilità */
:focus-visible {
    outline:        2px solid var(--blu-chiaro);
    outline-offset: 2px;
}

/* Riduce animazioni se preferito */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
}
.logout-form {
    display: inline;
    margin: 0;
}

.logout-form__button {
    appearance: none;
    border: 0;
    background: transparent;
    cursor: pointer;
    font: inherit;
}