/*
 * Komodo Work — solo il minimo indispensabile non coperto da K-Design.
 * Tutti i colori/raggi/spaziature usano i token K-Design: nessun valore inventato.
 */

/* ------------------------------------------------------------------ login */
.kw-login {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    background-color: var(--k-bg-page);
    overflow-y: auto;
}
.kw-login[hidden] { display: none; }

.kw-login-card {
    width: 100%;
    max-width: 22rem;
    padding: 1.75rem 1.5rem;
    background-color: var(--k-bg-elevated, var(--k-bg));
    border: 1px solid var(--k-border-subtle, var(--k-border));
    border-radius: var(--k-radius-2xl);
    box-shadow: var(--k-shadow-xl);
}
.kw-login-brand { text-align: center; margin-bottom: 1.25rem; }
.kw-login-brand .k-logo-text { font-size: 1.375rem; letter-spacing: -0.02em; }
.kw-pin { text-align: center; letter-spacing: .6em; font-size: 1.25rem; }
.kw-login-form .k-btn { margin-top: .875rem; }

/* PIN sbagliato: il riquadro fa no con la testa. Dura poco e non sposta niente
   attorno, cosi' si capisce che l'app ha risposto anche senza leggere. */
@keyframes kw-scossa {
    0%, 100% { transform: translateX(0); }
    15%, 45%, 75% { transform: translateX(-8px); }
    30%, 60%, 90% { transform: translateX(8px); }
}
.kw-scossa { animation: kw-scossa .4s ease-in-out; }
.kw-in-attesa { opacity: .6; }

/* Elimina a sinistra, lontano da Salva: e' l'unica azione senza ritorno. */
.kw-user-footer { display: flex; align-items: center; gap: .5rem; }
.kw-user-footer .kw-spazio { flex: 1; }

/* Per chi ha chiesto meno movimento resta il messaggio, che e' l'informazione. */
@media (prefers-reduced-motion: reduce) {
    .kw-scossa { animation: none; }
}
.kw-install-login { margin-top: .75rem; gap: .375rem; }

/*
 * Errori di campo.
 *
 * Nel design system .k-field-error nasce display:none e si accende solo dentro
 * un contenitore con .k-has-error. Qui gli errori si mostrano togliendo
 * l'attributo hidden, che da solo non bastava: il messaggio finiva nel DOM e
 * non si vedeva — "PIN non valido" compariva per nessuno. Stessa specificita'
 * della regola del design system, e app.css e' caricato dopo: vince questa,
 * senza impedire a .k-has-error di continuare a funzionare dove si usa.
 */
.k-field-error:not([hidden]) { display: block; }

/* -------------------------------------------------------------- lista lavori */
.kw-list { display: flex; flex-direction: column; gap: .5rem; }

.kw-job {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem .875rem;
    background-color: var(--k-bg-elevated, var(--k-bg));
    border: 1px solid var(--k-border-subtle, var(--k-border));
    border-radius: var(--k-radius-lg);
    cursor: pointer;
    user-select: none;
    touch-action: pan-y;
    transition: border-color var(--k-duration-fast) var(--k-ease),
                background-color var(--k-duration-fast) var(--k-ease),
                box-shadow var(--k-duration-fast) var(--k-ease);
}
.kw-job:hover { border-color: var(--k-border-strong); }
.kw-job:focus-visible { outline: var(--k-ring-width) solid var(--k-ring-color); outline-offset: 2px; }

.kw-job-handle {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 2rem;
    margin: -.25rem -.25rem -.25rem -.375rem;
    color: var(--k-text-placeholder);
    cursor: grab;
    opacity: .55;
    touch-action: none;
}
.kw-job-handle:hover { opacity: 1; color: var(--k-text-muted); }
.kw-job-handle:active { cursor: grabbing; }

/* Riga singola su desktop; su schermi stretti badge e note vanno a capo. */
.kw-job-main {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: .5rem .625rem;
    flex-wrap: wrap;
}
.kw-job-title {
    font-size: .9375rem;
    font-weight: 500;
    color: var(--k-text);
    line-height: 1.35;
    overflow-wrap: anywhere;
}
.kw-job-note {
    display: inline-flex;
    align-items: center;
    color: var(--k-text-placeholder);
}
.kw-job-due {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: .3125rem;
    font-size: .8125rem;
    color: var(--k-text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
/* Lo scaduto si legge dalla parola "Scaduto", non da un colore: la scadenza
   non e' una priorita' e non deve competere con lo stato del lavoro. */
.kw-job-due--over { color: var(--k-text); font-weight: 500; }

/* Switch "completato": chiude la riga a destra, lontano dal drag handle, cosi'
   non si preme per sbaglio ne' col mouse ne' durante un trascinamento. */
.kw-job-done { flex-shrink: 0; margin-left: .125rem; }
.kw-job-done .k-toggle-track { width: 2.25rem; height: 1.25rem; }
.kw-job-done .k-toggle-knob { width: 1rem; height: 1rem; }
.kw-job-done input:checked ~ .k-toggle-track .k-toggle-knob,
.kw-job-done input:checked + .k-toggle-track .k-toggle-knob { transform: translateX(1rem); }

/* stato drag & drop (mouse + touch) */
.kw-job--dragging { opacity: .4; }
.kw-job--ghost {
    position: fixed;
    z-index: 70;
    pointer-events: none;
    box-shadow: var(--k-shadow-2xl);
    border-color: var(--k-brand);
    opacity: .95;
    margin: 0;
}
.kw-list--sorting .kw-job { transition: transform var(--k-duration-fast) var(--k-ease); }

/* -------------------------------------------------------------------- varie */
.kw-banner {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: .625rem .875rem;
    margin-bottom: 1rem;
    font-size: .8125rem;
    line-height: 1.4;
    color: var(--k-warning-text);
    background-color: var(--k-warning-light);
    border: 1px solid transparent;
    border-radius: var(--k-radius-lg);
}
.kw-banner svg { flex-shrink: 0; }
.kw-banner .k-btn { margin-left: auto; }

.kw-hint { margin-top: 1rem; font-size: .75rem; color: var(--k-text-placeholder); text-align: center; }
.kw-spacer { flex: 1; }
.kw-modal-footer { justify-content: flex-start; }
.kw-danger-text { color: var(--k-danger-text, var(--k-danger)); }
.kw-check { display: flex; align-items: center; gap: .5rem; margin-top: .625rem; font-size: .875rem; color: var(--k-text-secondary); cursor: pointer; }
.kw-notif-unread { background-color: var(--k-brand-soft); }
:where(.dark, .dark *) .kw-notif-unread { background-color: rgba(99, 102, 241, .12); }
.kw-muted { color: var(--k-text-muted); font-size: .8125rem; }


/* Su desktop l'uscita e' gia' un'icona in barra: nel menu sarebbe un doppione.
   Sta qui e non fra le regole della sidebar perche' la deroga per lo schermo
   stretto e' subito sotto: se venisse dopo, a parita' di specificita' la
   annullerebbe. */
.kw-side-logout { display: none; }

@media (max-width: 639px) {
    .k-page-header { align-items: stretch; }
    .kw-job { padding: .875rem; gap: .5rem; }

    /* Su schermo stretto la barra non regge un'altra icona: l'uscita sta nel
       menu laterale, sotto il proprio nome, e in fondo a Impostazioni. */
    #logout-btn { display: none; }

    .kw-side-logout {
        display: flex;
        align-items: center;
        gap: .625rem;
        width: 100%;
        margin-top: .375rem;
        padding: .625rem;
        border: none;
        border-radius: var(--k-radius-lg);
        background: transparent;
        color: var(--k-danger, #f87171);
        font-size: .875rem;
        font-weight: 500;
        text-align: left;
        cursor: pointer;
    }
    .kw-side-logout:active { background-color: var(--k-bg-hover); }

    /* Con handle, switch ed etichetta scadenza la riga e' affollata: su schermo
       stretto a cedere e' la scadenza, non il titolo. Senza il tetto il flex
       ridurrebbe piu' il titolo, che parte da un contenuto piu' largo. */
    .kw-job-due {
        flex-shrink: 1;
        min-width: 0;
        max-width: 6.5rem;
        white-space: normal;
        text-align: right;
    }
}

/* ------------------------------------------------------- card utente sidebar */
.kw-sidebar-nav { display: flex; flex-direction: column; }
.kw-sidebar-nav .k-nav-list { flex: 1; }

.kw-side-user { position: relative; padding-top: .625rem; border-top: 1px solid var(--k-border-subtle, var(--k-border)); }
.kw-side-user-btn {
    display: flex;
    align-items: center;
    gap: .625rem;
    width: 100%;
    padding: .5rem .625rem;
    border: none;
    border-radius: var(--k-radius-lg);
    background: transparent;
    color: var(--k-text);
    text-align: left;
    cursor: pointer;
}
.kw-side-user-btn:hover:not(:disabled) { background-color: var(--k-bg-hover); }
.kw-side-user-btn:disabled { cursor: default; }

/* Il reset di K-Design (svg { display:block }) e' una regola d'autore e batte
   l'attributo hidden dello user-agent: il chevron va nascosto esplicitamente. */
#user-switch-chevron[hidden], #side-user-chevron[hidden] { display: none; }

/* Senza il permesso di operare sugli altri il selettore e' solo un'etichetta. */
.kw-static-user, .kw-static-user:disabled {
    opacity: 1;
    cursor: default;
    pointer-events: none;
}
.kw-side-user-text { flex: 1; min-width: 0; }
.kw-side-user-name { display: block; font-size: .8125rem; font-weight: 600; }
.kw-side-user-role { display: block; font-size: .6875rem; color: var(--k-text-muted); }
.kw-side-menu { position: absolute; bottom: calc(100% + .25rem); left: .25rem; right: .25rem; }
.kw-user-text { flex: 1; min-width: 0; }

.k-dropdown-item .k-avatar { margin-right: .5rem; }

/* --------------------------------------------------------------- notifiche */
.kw-notif-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    margin-top: .125rem;
    border-radius: 50%;
    color: var(--k-text-muted);
    background-color: var(--k-bg-hover);
}
.kw-notif-icon--assigned, .kw-notif-icon--completed { color: var(--k-brand-text); background-color: var(--k-brand-soft); }
:where(.dark, .dark *) .kw-notif-icon--assigned,
:where(.dark, .dark *) .kw-notif-icon--completed { color: var(--k-brand); background-color: rgba(99, 102, 241, .16); }
.kw-notif-text { flex: 1; min-width: 0; }
.kw-notif-clickable { cursor: pointer; }
#notif-list .k-list-item:not(.kw-notif-clickable) { cursor: default; }

.kw-notif-count {
    position: absolute;
    top: .125rem;
    right: .125rem;
    min-width: 1.05rem;
    height: 1.05rem;
    padding: 0 .25rem;
    font-size: .625rem;
    font-weight: 600;
    line-height: 1.05rem;
    text-align: center;
    color: #fff;
    background-color: var(--k-danger);
    border-radius: var(--k-radius-full);
}

/* --------------------------------------------- stato della sincronizzazione */

/* Compare solo quando ha qualcosa da dire: online e in pari resta invisibile. */
.kw-sync {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    height: 1.75rem;
    padding: 0 .6rem;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    color: var(--k-text-muted);
    background-color: var(--k-bg-hover);
    border: 1px solid transparent;
    border-radius: var(--k-radius-full);
    cursor: pointer;
}
.kw-sync:hover { border-color: var(--k-border); }
.kw-sync:focus-visible { outline: 2px solid var(--k-brand); outline-offset: 2px; }

.kw-sync-punto {
    width: .45rem;
    height: .45rem;
    border-radius: 50%;
    background-color: currentColor;
    flex-shrink: 0;
}
.kw-sync--attesa   { color: #b45309; background-color: rgba(217, 119, 6, .12); }
.kw-sync--offline  { color: var(--k-text-muted); background-color: var(--k-bg-hover); }
.kw-sync--corso    { color: var(--k-brand-text); background-color: var(--k-brand-soft); }
.kw-sync--fatto    { color: #15803d; background-color: rgba(22, 163, 74, .12); }
.kw-sync--conflitto{ color: var(--k-danger); background-color: rgba(220, 38, 38, .12); }

:where(.dark) .kw-sync--attesa    { color: #fbbf24; background-color: rgba(251, 191, 36, .16); }
:where(.dark) .kw-sync--fatto     { color: #4ade80; background-color: rgba(74, 222, 128, .16); }
:where(.dark) .kw-sync--conflitto { color: #f87171; background-color: rgba(248, 113, 113, .16); }

/* Il punto gira mentre si sincronizza: un movimento piccolo, non un caricamento. */
.kw-sync--corso .kw-sync-punto { animation: kw-pulsa 1s ease-in-out infinite; }
@keyframes kw-pulsa { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) {
    .kw-sync--corso .kw-sync-punto { animation: none; }
}

/* Su schermo stretto resta il pallino: il testo mangerebbe la barra. */
@media (max-width: 30rem) {
    .kw-sync { padding: 0 .45rem; }
    .kw-sync-testo { display: none; }
    .kw-sync--attesa .kw-sync-testo,
    .kw-sync--conflitto .kw-sync-testo { display: inline; }
}

/* Un lavoro con modifiche non ancora inviate: un segno discreto, non un allarme. */
.kw-job-attesa {
    width: .4rem;
    height: .4rem;
    border-radius: 50%;
    background-color: #d97706;
    flex-shrink: 0;
}
:where(.dark) .kw-job-attesa { background-color: #fbbf24; }