@charset "UTF-8";
/* Elementi propri del mockup ADEQUO, sopra i fogli CIVIQ (Bootstrap Italia + operatore + backoffice).
   Colori come token, ridefiniti per il tema scuro. */
:root {
  --mk-surface: #ffffff;
  --mk-surface-2: #f6f8fa;
  --mk-ink: #17212b;
  --mk-muted: #5b6770;
  --mk-line: #d5dde6;
  --mk-primary: #0066cc;
  --mk-primary-soft: #e6f0fa;
  --mk-ok: #e3f4ec; --mk-ok-ink: #006644;
  --mk-info: #e6f0fa; --mk-info-ink: #004f99;
  --mk-warn: #fff1c7; --mk-warn-ink: #7a5600;
  --mk-bad: #fbd9df; --mk-bad-ink: #a01d35;
  --mk-off: #eef1f4; --mk-off-ink: #5b6770;
  --mk-prop: #fff6db; --mk-prop-line: #e0b200;
  --mk-pagina: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="chiaro"]) {
    --mk-surface: #161f29; --mk-surface-2: #1b2633; --mk-ink: #e7edf4; --mk-muted: #9aa8b8; --mk-line: #2a3644;
    --mk-primary: #5aa6f0; --mk-primary-soft: #14293f;
    --mk-ok: #12291c; --mk-ok-ink: #5fc48a; --mk-info: #14293f; --mk-info-ink: #8cc4ff;
    --mk-warn: #2d2210; --mk-warn-ink: #f0b35a; --mk-bad: #35161c; --mk-bad-ink: #ff8a9c; --mk-off: #1b2633; --mk-off-ink: #9aa8b8;
    --mk-prop: #2d2210; --mk-prop-line: #a07a10; --mk-pagina: #1b2633;
  }
}
:root[data-tema="scuro"] {
  --mk-surface: #161f29; --mk-surface-2: #1b2633; --mk-ink: #e7edf4; --mk-muted: #9aa8b8; --mk-line: #2a3644;
  --mk-primary: #5aa6f0; --mk-primary-soft: #14293f;
  --mk-ok: #12291c; --mk-ok-ink: #5fc48a; --mk-info: #14293f; --mk-info-ink: #8cc4ff;
  --mk-warn: #2d2210; --mk-warn-ink: #f0b35a; --mk-bad: #35161c; --mk-bad-ink: #ff8a9c; --mk-off: #1b2633; --mk-off-ink: #9aa8b8;
  --mk-prop: #2d2210; --mk-prop-line: #a07a10; --mk-pagina: #1b2633;
}

body { background-color: var(--bo-content-bg, #f5f6f8); }
#app { min-height: 100vh; }

/* Avvisi e dialoghi */
#mk-toast { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 2000; width: min(26rem, calc(100vw - 32px)); }
dialog.bo-conferma { max-width: min(34rem, calc(100vw - 32px)); }
dialog.mk-dialogo-largo { max-width: min(52rem, calc(100vw - 32px)); width: 100%; }
dialog.bo-conferma .bo-opzione label { cursor: pointer; }

/* Schede */
.mk-schede > .nav-tabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.mk-schede > .nav-tabs .nav-link { white-space: nowrap; background: none; border-top: 0; border-left: 0; border-right: 0; }

/* Elenchi dt/dd */
.mk-dl { display: grid; grid-template-columns: minmax(9rem, 30%) 1fr; gap: .35rem 1rem; margin: 0; }
.mk-dl dt { font-weight: 600; color: var(--mk-muted); }
.mk-dl dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 575.98px) { .mk-dl { grid-template-columns: 1fr; } .mk-dl dd { margin-bottom: .4rem; } }
.mk-lista { margin: 0; padding-left: 1.1rem; }
.mk-lista li + li { margin-top: .15rem; }

/* Matrice di rischio */
.mk-matrice-wrap { overflow-x: auto; max-width: 100%; }
.mk-matrice { border-collapse: separate; border-spacing: 3px; width: 100%; font-size: .82rem; }
.mk-matrice th { font-weight: 600; color: var(--mk-muted); padding: .25rem .4rem; text-align: left; vertical-align: bottom; }
.mk-matrice .mk-asse { font-size: .72rem; }
.mk-cella { text-align: center; font-weight: 700; padding: .55rem .3rem; border-radius: 6px; min-width: 4.5rem; }
.mk-cella button { all: unset; display: block; width: 100%; cursor: pointer; }
.mk-cella button:focus-visible { outline: 2px solid var(--mk-primary); outline-offset: 3px; }
.mk-cella-on { outline: 3px solid var(--mk-ink); outline-offset: -3px; }
.mk-liv-ok { background: var(--mk-ok); color: var(--mk-ok-ink); }
.mk-liv-info { background: var(--mk-info); color: var(--mk-info-ink); }
.mk-liv-warn { background: var(--mk-warn); color: var(--mk-warn-ink); }
.mk-liv-bad { background: var(--mk-bad); color: var(--mk-bad-ink); }
.mk-liv-off { background: var(--mk-off); color: var(--mk-off-ink); }

/* Matrici a celle (interessati × dati, operazioni, ACL) */
.mk-tab-matrice, .mk-acl { border-collapse: collapse; font-size: .85rem; color: var(--mk-ink); }
.mk-tab-matrice th, .mk-tab-matrice td { border: 1px solid var(--mk-line); padding: .3rem .45rem; background: var(--mk-surface); }
.mk-tab-matrice tbody th { font-weight: 400; min-width: 14rem; }
.mk-ruotata { height: 9.5rem; vertical-align: bottom; white-space: nowrap; }
.mk-ruotata > span { display: inline-block; writing-mode: vertical-rl; transform: rotate(180deg); font-weight: 600; font-size: .78rem; max-height: 9rem; overflow: hidden; text-overflow: ellipsis; }
.mk-acl td { text-align: center; }
.mk-acl-cella { font-family: "Roboto Mono", monospace; font-size: .78rem; letter-spacing: .05em; }
.mk-acl-cella b { color: var(--mk-primary); }
.mk-acl-no { color: var(--mk-line); }

/* Procedura guidata */
.mk-passi { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.mk-passo { display: flex; gap: .9rem; align-items: center; background: var(--mk-surface); border: 1px solid var(--mk-line); border-radius: 8px; padding: .8rem 1rem; color: var(--mk-ink); }
.mk-passo-testo { flex: 1 1 auto; min-width: 0; }
.mk-passo-n { flex: 0 0 2.2rem; height: 2.2rem; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: var(--mk-off); color: var(--mk-off-ink); }
.mk-passo-fatto .mk-passo-n { background: var(--mk-ok); color: var(--mk-ok-ink); }
.mk-passo-fatto .mk-passo-n .icon { fill: currentColor; }
.mk-passo-ora { border-left: 4px solid var(--mk-primary); }
.mk-passo-ora .mk-passo-n { background: var(--mk-primary); color: #fff; }
@media (max-width: 575.98px) { .mk-passo { flex-wrap: wrap; } .mk-passo .btn { margin-left: 3.1rem; } }

/* Barre del cruscotto */
.mk-barre { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; }
.mk-barre li { display: grid; grid-template-columns: 6.5rem 1fr 2.5rem; align-items: center; gap: .6rem; }
.mk-barre-b { height: .7rem; background: var(--mk-surface-2); border-radius: 99px; overflow: hidden; }
.mk-barre-b > span { display: block; height: 100%; border-radius: 99px; }
.mk-barre b { text-align: right; }

/* Criteri WP248 */
.mk-criteri { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: .35rem; }
.mk-criteri li { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.mk-criteri label { cursor: pointer; }

/* Anomalie in testata */
.mk-adesso-anomalie { border-left-color: var(--mk-bad-ink) !important; }
.mk-adesso-anomalie li + li { margin-top: .3rem; }

/* Valori RID */
.mk-rid { display: inline-block; font-family: "Roboto Mono", monospace; font-size: .75rem; font-weight: 700; border-radius: 4px; padding: 0 .3rem; margin-right: .2rem; background: var(--mk-off); color: var(--mk-off-ink); }
.mk-rid-3 { background: var(--mk-warn); color: var(--mk-warn-ink); }
.mk-rid-4 { background: var(--mk-bad); color: var(--mk-bad-ink); }

/* Workflow */
.mk-wf { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; margin: 0 0 .75rem; counter-reset: wf; }
.mk-wf li { counter-increment: wf; background: var(--mk-primary-soft); color: var(--mk-ink); border-radius: 99px; padding: .2rem .8rem; font-size: .85rem; font-weight: 600; }
.mk-wf li::before { content: counter(wf) ". "; color: var(--mk-primary); }
.mk-wf li + li::after { content: none; }
.mk-wf-grande li { font-size: .95rem; padding: .35rem 1rem; background: var(--mk-off); }
.mk-wf-grande li.fatto { background: var(--mk-ok); color: var(--mk-ok-ink); }
.mk-wf-grande li.ora { background: var(--mk-primary); color: #fff; }
.mk-wf-grande li.ora::before { color: #fff; }

/* Fogli e documenti live */
.mk-foglio, .mk-editor-foglio { background: var(--mk-pagina); color: var(--mk-ink); border: 1px solid var(--mk-line); border-radius: 4px; box-shadow: 0 2px 10px rgba(0, 0, 0, .06); padding: 2rem clamp(1rem, 4vw, 3rem); max-width: 52rem; }
.mk-foglio-ente { font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--mk-muted); margin-bottom: .75rem; }
.mk-editor { display: grid; grid-template-columns: minmax(0, 1fr) 18rem; gap: 1rem; align-items: start; }
@media (max-width: 1199.98px) { .mk-editor { grid-template-columns: 1fr; } }
.mk-editor-foglio:focus { outline: 2px solid var(--mk-primary); outline-offset: 2px; }
.mk-editor-barra { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .5rem; }
.mk-editor-lato { background: var(--mk-surface); color: var(--mk-ink); border: 1px solid var(--mk-line); border-radius: 8px; padding: 1rem; }
.mk-prop { background: var(--mk-prop); border-bottom: 2px solid var(--mk-prop-line); border-radius: 2px; padding: 0 .15rem; }
.mk-blocco { border: 1px dashed var(--mk-prop-line); border-radius: 6px; padding: .6rem .8rem .1rem; margin: .8rem 0; position: relative; }
.mk-blocco-etichetta { display: inline-block; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--mk-warn-ink); margin-bottom: .3rem; }

/* Topbar operatore: stemma dell'ente */
.mk-stemma { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--mk-primary-soft); }
.mk-stemma .icon { fill: var(--mk-primary); }
.mk-ruolo-op { color: rgba(255, 255, 255, .75); margin-bottom: .2rem; }
.mk-callout { max-width: none; }

/* Pagina d'ingresso */
.mk-inizio { min-height: 100vh; background: linear-gradient(160deg, #0091e6 0%, #004f8c 100%); color: #fff; padding: max(24px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
.mk-inizio-dentro { max-width: 68rem; margin: 0 auto; }
.mk-inizio-loghi { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; margin: 1rem 0 2rem; }
.mk-inizio-loghi img { height: 2.6rem; width: auto; }
.mk-inizio h1 { font-weight: 700; font-size: clamp(1.7rem, 4vw, 2.6rem); color: #fff; }
.mk-inizio .lead { color: rgba(255, 255, 255, .9); max-width: 46rem; }
.mk-inizio-griglia { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: 1rem; margin: 2rem 0; }
.mk-inizio-card { background: var(--mk-surface); color: var(--mk-ink); border-radius: 12px; padding: 1.4rem; display: flex; flex-direction: column; gap: .6rem; box-shadow: 0 8px 28px rgba(0, 30, 70, .25); }
.mk-inizio-card h2 { font-size: 1.3rem; font-weight: 700; margin: 0; }
.mk-inizio-card p, .mk-inizio-card li { color: var(--mk-muted); }
.mk-inizio-card ul { padding-left: 1.1rem; margin: 0; font-size: .92rem; }
.mk-inizio-card .btn { align-self: flex-start; margin-top: auto; }
.mk-inizio-nota { font-size: .88rem; color: rgba(255, 255, 255, .85); max-width: 52rem; }
.mk-inizio-nota a { color: #fff; }
.mk-inizio .sidebar-tema button, .mk-inizio .bo-scelta-tema button { color: #fff; }