/*
 * Turnio Control in tema "Quaderno": stessa carta, stesso inchiostro, stessi font e stesse animazioni di Turnio Web.
 * Palette, font, cursore a aeroplanino, pagina che si volta e riquadri a inchiostro arrivano da quaderno-theme.css (copia
 * di quello di Turnio Web: se si cambia la', va aggiornata anche questa copia). Qui vive solo cio' che e' specifico di
 * Control: barra laterale, tabelle, badge, avvisi, pallini di stato, accesso.
 */

:root {
  --error-bg: #fdecea; --error-ink: #9c2b1f; --error-border: #f0b9b1;
  --notice-bg: #eaf7ee; --notice-ink: #1f7a3d; --notice-border: #b9e2c8;
  --warn-bg: #fff3d9; --warn-ink: #8a5a00; --warn-border: #ecd18f;
  --dot-ok: #2f9e5b; --dot-bad: #c8544a; --dot-warn: #e0a41f; --dot-info: #4f7fd1;
}
:root[data-theme="dark"] {
  --error-bg: #3a1f1c; --error-ink: #ff9d90; --error-border: #6b3430;
  --notice-bg: #1b2e20; --notice-ink: #7fdc9d; --notice-border: #2f5239;
  --warn-bg: #3a2d12; --warn-ink: #f2c36b; --warn-border: #6a5226;
  --dot-ok: #4cc47a; --dot-bad: #ee7b6f; --dot-warn: #f0b94a; --dot-info: #7aa5ee;
}

* { box-sizing: border-box; }
html { background: var(--zinc-50); }
body { margin: 0; min-height: 100vh; color: var(--zinc-900); font-size: 15px; }
code, pre, .mono { font-family: 'Space Mono', 'SFMono-Regular', Consolas, Menlo, monospace; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; }
p { margin: 0; }

.shell { display: flex; min-height: 100vh; }

/* ---- barra laterale: il margine del quaderno ---- */
aside.sidebar {
  width: 240px; flex: none; position: sticky; top: 0; height: 100vh; overflow-y: auto;
  background: var(--panel); border-right: 2.5px solid var(--zinc-900);
  display: flex; flex-direction: column;
}
aside.sidebar::before { /* il filo rosso del margine */
  content: ''; position: absolute; top: 0; bottom: 0; left: 14px; width: 0; border-left: 1.5px solid var(--brand-300); opacity: .55; pointer-events: none;
}
.brand-box { padding: 1.1rem 1rem .9rem 1.6rem; border-bottom: 2px dashed var(--zinc-300); }
.brand-logo { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.brand-logo .wordmark {
  font-family: 'Permanent Marker', cursive; font-size: 1.7rem; line-height: 1; color: var(--zinc-900);
  clip-path: inset(0 100% 0 0); animation: qb-write 1s cubic-bezier(.65,.05,.36,1) .15s forwards;
}
.brand-logo .control-tag {
  font-family: 'Space Mono', monospace; font-size: .6rem; font-weight: 700; letter-spacing: .08em; color: var(--brand-700);
  border: 2px solid var(--brand-600); border-radius: 3px 8px 3px 8px; padding: .05rem .35rem; transform: rotate(-3deg);
  opacity: 0; animation: qb-fade-up .5s ease 1s forwards;
}
.brand-box .email { margin-top: .45rem; font-size: .7rem; color: var(--zinc-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
aside.sidebar nav { padding: .6rem .6rem .6rem 1.1rem; flex: 1; }
aside.sidebar nav a {
  display: flex; align-items: center; gap: .6rem; padding: .48rem .7rem; margin: .1rem 0; font-size: .86rem; font-weight: 700;
  color: var(--zinc-600); border: 2px solid transparent; border-radius: 4px 10px 4px 10px;
  transition: transform .18s var(--spring, ease), background .15s ease, color .15s ease;
}
aside.sidebar nav a svg { width: 1.1rem; height: 1.1rem; margin: 0; flex: none; }
aside.sidebar nav a:hover { color: var(--zinc-900); background: var(--zinc-100); transform: translateX(3px) rotate(-.4deg); }
aside.sidebar nav a.active { color: var(--zinc-900); background: var(--zinc-100); border-color: var(--zinc-900); transform: rotate(-.5deg); }
.nav-badge {
  display: inline-flex; align-items: center; justify-content: center; min-width: 1.15rem; height: 1.15rem; margin-left: auto;
  border-radius: 50%; background: var(--brand-600); color: #fff; font-size: .66rem; font-weight: 700; padding: 0 .28rem;
  animation: qb-badge-pop .5s var(--spring, ease) both;
}
@keyframes qb-badge-pop { from { transform: scale(0) rotate(-30deg); } to { transform: scale(1) rotate(0); } }
.logout-box { border-top: 2px dashed var(--zinc-300); padding: .8rem 1rem .9rem 1.6rem; display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.logout-box button, .logout-box button[type=submit], .mobile-topbar button, .mobile-topbar button[type=submit], .theme-toggle {
  background: none !important; border: none !important; padding: 0; font-size: .78rem; font-weight: 700; color: var(--zinc-500);
  cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; gap: .3rem; border-radius: 0 !important;
}
.logout-box button:hover, .mobile-topbar button:hover, .theme-toggle:hover { color: var(--zinc-900); text-decoration: underline wavy; text-underline-offset: 3px; }
.theme-toggle svg { width: 1rem; height: 1rem; }
.theme-toggle .sun { display: none; }
:root[data-theme="dark"] .theme-toggle .sun { display: inline; }
:root[data-theme="dark"] .theme-toggle .moon { display: none; }

.mobile-topbar, .mobile-nav { display: none; }

main.content { flex: 1; min-width: 0; padding: 1.6rem 1.8rem 3rem; max-width: 1080px; }
main.content h1 { font-size: clamp(1.5rem, 1.2vw + 1.2rem, 2rem); color: var(--zinc-900); margin-bottom: .2rem; }
main.content h2 { font-size: 1.15rem; }
.page-sub, .sub { font-size: .88rem; color: var(--zinc-500); margin-top: .15rem; margin-bottom: 1.2rem; line-height: 1.45; }

/* ---- tabelle: righe di carta ---- */
table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .86rem; border: 2px solid var(--zinc-900); border-radius: 4px 12px 4px 12px; overflow: hidden; background: var(--panel); }
thead { background: var(--zinc-100); }
th { text-align: left; padding: .55rem .75rem; font-size: .72rem; color: var(--zinc-600); font-weight: 700; border-bottom: 2px solid var(--zinc-900); }
td { padding: .55rem .75rem; border-top: 1px dashed var(--zinc-300); color: var(--zinc-800); vertical-align: top; }
tbody tr:first-child td { border-top: none; }
tbody tr { transition: background .12s ease; }
tbody tr:hover td { background: var(--zinc-100); }

label { display: block; font-size: .8rem; font-weight: 700; color: var(--zinc-600); margin-bottom: .25rem; }
input, select, textarea { width: 100%; padding: .5rem .75rem; margin-bottom: .5rem; font-family: inherit; font-size: .88rem; color: var(--zinc-900); }
input[type="checkbox"], input[type="radio"] { width: auto; margin: 0 .35rem 0 0; accent-color: var(--brand-600); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand-600) !important; }
input::placeholder, textarea::placeholder { color: var(--zinc-400); }

button, .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .35rem; padding: .5rem 1rem; font-size: .86rem; font-weight: 700;
  cursor: pointer; font-family: inherit; color: var(--zinc-900); border-radius: 4px 10px 4px 10px;
  transition: transform .15s var(--spring, ease), background .15s ease;
}
button:not(:disabled):hover, .btn:hover { transform: translateY(-1px) rotate(-.4deg); }
button:not(:disabled):active, .btn:active { transform: translateY(1px); }
button:disabled { opacity: .55; cursor: not-allowed; }
.btn { border: 2px solid var(--zinc-900); background: var(--panel); }
.btn-primary, button[type=submit] { background: var(--brand-50) !important; border: 2.5px solid var(--zinc-900) !important; color: var(--zinc-900); }
.btn-primary:hover, button[type=submit]:not(:disabled):hover { background: var(--brand-100) !important; }
button.secondary, .btn.secondary { border: 2px solid var(--zinc-900); background: var(--panel); }
button.secondary:hover, .btn.secondary:hover { background: var(--zinc-100); }
button svg, .btn svg { width: 1rem; height: 1rem; margin: 0; }

.card { padding: 1rem; }
.badge { border-radius: 3px 8px 3px 8px; background: var(--brand-50); border: 1.5px solid var(--brand-600); padding: .05rem .45rem; font-size: .66rem; font-weight: 700; color: var(--brand-700); }
.error { border: 2px solid var(--error-border); border-radius: 4px 10px 4px 10px; background: var(--error-bg); color: var(--error-ink); padding: .6rem .8rem; margin-bottom: 1rem; font-size: .88rem; font-weight: 600; animation: qb-fade-up .35s ease both; }
.notice { border: 2px solid var(--notice-border); border-radius: 4px 10px 4px 10px; background: var(--notice-bg); color: var(--notice-ink); padding: .6rem .8rem; margin-bottom: 1rem; font-size: .88rem; font-weight: 600; animation: qb-fade-up .35s ease both; }
form.inline { display: inline-flex; align-items: center; gap: .35rem; }
@keyframes qb-fade-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* pallini di stato (al posto di 🟢🔴🟡) */
.qb-dot { display: inline-block; width: .72em; height: .72em; border-radius: 50%; border: 2px solid var(--zinc-900); vertical-align: -.04em; margin-right: .25rem; flex: none; }
.qb-dot-ok { background: var(--dot-ok); } .qb-dot-bad { background: var(--dot-bad); } .qb-dot-warn { background: var(--dot-warn); }
.qb-dot-info { background: var(--dot-info); } .qb-dot-off { background: var(--panel); }
.qb-dot-bad { animation: qb-dot-pulse 1.8s ease-in-out infinite; }
@keyframes qb-dot-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(200,84,74,.45); } 50% { box-shadow: 0 0 0 5px rgba(200,84,74,0); } }

/* ---- Apparizione dei riquadri: le card entrano una dopo l'altra ---- */
main.content > .card, main.content > .req-card, main.content > table, main.content > form.card { animation: qb-fade-up .4s ease both; }
main.content > *:nth-child(2) { animation-delay: .04s; } main.content > *:nth-child(3) { animation-delay: .08s; }
main.content > *:nth-child(4) { animation-delay: .12s; } main.content > *:nth-child(5) { animation-delay: .16s; }
main.content > *:nth-child(n+6) { animation-delay: .2s; }

/* ---- Accesso (login, 2FA, password dimenticata): il marchio si scrive a mano ---- */
.login-box { width: 100%; max-width: 26rem; padding: 1.6rem 1.5rem; background: var(--panel); border: 2.5px solid var(--zinc-900); border-radius: 4px 18px 4px 18px; position: relative; }
.login-box::before { content: ''; position: absolute; top: -2px; right: -2px; width: 14px; height: 14px; background: linear-gradient(135deg, transparent 50%, color-mix(in srgb, black 16%, var(--panel)) 50%); border-left: 2px solid var(--zinc-900); border-bottom: 2px solid var(--zinc-900); border-radius: 0 4px 0 5px; }
.login-box .brand-head { margin-bottom: 1.4rem; text-align: center; }
.login-box .brand-head .wordmark { display: inline-block; font-family: 'Permanent Marker', cursive; font-weight: 400; font-size: 2.8rem; line-height: 1; color: var(--zinc-900); letter-spacing: 0; clip-path: inset(0 100% 0 0); animation: qb-write 1.2s cubic-bezier(.65,.05,.36,1) .2s forwards; }
.login-box .brand-head .control-tag { display: inline-block; margin-top: .55rem; font-family: 'Space Mono', monospace; font-size: .64rem; font-weight: 700; letter-spacing: .08em; color: var(--brand-700); border: 2px solid var(--brand-600); border-radius: 3px 8px 3px 8px; padding: .1rem .4rem; transform: rotate(-2deg); opacity: 0; animation: qb-fade-up .5s ease 1.2s forwards; }
.login-box .brand-head .tag { font-size: .8rem; color: var(--zinc-500); margin-top: .5rem; opacity: 0; animation: qb-fade-up .5s ease 1.4s forwards; }
.login-box label { font-size: .78rem; }
.login-box .footnote { margin-top: 1.1rem; text-align: center; font-size: .72rem; color: var(--zinc-500); }
.login-box .footnote a { text-decoration: underline wavy; text-underline-offset: 3px; }
@keyframes qb-write { to { clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) {
  .brand-logo .wordmark, .login-box .brand-head .wordmark { animation: none; clip-path: none; }
  .brand-logo .control-tag, .login-box .brand-head .control-tag, .login-box .brand-head .tag { animation: none; opacity: 1; }
  main.content > *, .error, .notice, .nav-badge, .qb-dot-bad { animation: none !important; }
}

/* ---- Benvenuto dopo l'accesso ---- */
#welcome-splash { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; pointer-events: none;
  background-color: var(--zinc-50); background-image: repeating-linear-gradient(var(--zinc-50) 0 34px, var(--zinc-200) 34px 35px); overflow: hidden; animation: welcome-bg-fade-out 380ms ease 1700ms forwards; }
#welcome-splash .wordmark { font-family: 'Permanent Marker', cursive; font-size: min(14vw, 4.4rem); color: var(--zinc-900); clip-path: inset(0 100% 0 0); animation: qb-write 1s cubic-bezier(.65,.05,.36,1) .1s forwards, welcome-swipe-out 420ms ease 1500ms forwards; }
#welcome-splash .control-tag { font-family: 'Space Mono', monospace; font-size: .7rem; font-weight: 700; letter-spacing: .1em; color: var(--brand-700); border: 2px solid var(--brand-600); border-radius: 3px 8px 3px 8px; padding: .1rem .45rem; opacity: 0; animation: qb-fade-up .4s ease .9s forwards; }
@keyframes welcome-swipe-out { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(140%); } }
@keyframes welcome-bg-fade-out { from { opacity: 1; pointer-events: auto; } to { opacity: 0; pointer-events: none; } }

/* ---- Andamento (barre di carta) ---- */
.qb-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .7rem; margin: .4rem 0 1.2rem; }
.qb-stat { padding: .8rem .9rem; }
.qb-stat .n { font-family: 'Permanent Marker', cursive; font-size: 1.9rem; line-height: 1.05; color: var(--zinc-900); }
.qb-stat .l { font-size: .74rem; font-weight: 700; color: var(--zinc-500); margin-top: .15rem; }
.qb-stat.bad .n { color: var(--error-ink); } .qb-stat.ok .n { color: var(--notice-ink); }
.qb-bars { display: flex; align-items: flex-end; gap: 4px; height: 90px; margin-top: .6rem; }
.qb-bars .col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; min-width: 0; position: relative; }
.qb-bars .seg-ok { background: var(--zinc-900); border-radius: 2px 2px 0 0; min-height: 0; animation: qb-bar-grow .7s cubic-bezier(.22,1,.36,1) both; transform-origin: bottom; }
.qb-bars .seg-bad { background: var(--dot-bad); min-height: 0; animation: qb-bar-grow .7s cubic-bezier(.22,1,.36,1) both; transform-origin: bottom; }
.qb-bars .d { font-size: .58rem; color: var(--zinc-500); text-align: center; margin-top: .25rem; font-family: 'Space Mono', monospace; }
@keyframes qb-bar-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.qb-legend { display: flex; gap: 1rem; font-size: .74rem; color: var(--zinc-500); margin-top: .5rem; flex-wrap: wrap; }
.qb-legend i { display: inline-block; width: .8rem; height: .8rem; border: 2px solid var(--zinc-900); border-radius: 2px; margin-right: .3rem; vertical-align: -.1em; }

@media (max-width: 640px) {
  aside.sidebar { display: none; }
  .shell { flex-direction: column; }
  .mobile-topbar { display: flex; align-items: center; justify-content: space-between; border-bottom: 2.5px solid var(--zinc-900); background: var(--panel); padding: .7rem 1rem; padding-top: calc(.7rem + env(safe-area-inset-top, 0px)); }
  .mobile-topbar .brand-logo .wordmark { font-size: 1.3rem; }
  .mobile-topbar button { padding: 0; font-size: .78rem; background: none !important; border: none !important; color: var(--zinc-500); }
  .mobile-nav { display: flex; gap: .3rem; overflow-x: auto; border-bottom: 2px dashed var(--zinc-300); background: var(--panel); padding: .5rem; }
  .mobile-nav a { flex: none; display: flex; align-items: center; gap: .3rem; border-radius: 4px 10px 4px 10px; padding: .3rem .6rem; font-size: .76rem; font-weight: 700; color: var(--zinc-600); border: 2px solid transparent; }
  .mobile-nav a.active { border-color: var(--zinc-900); background: var(--zinc-100); color: var(--zinc-900); }
  .mobile-nav a svg { width: 1rem; height: 1rem; margin: 0; }
  main.content { padding: 1rem 1rem 2.5rem; max-width: 100%; }
}
.req-card, .home-tile { border-radius: 4px 12px 4px 12px; }
main.app-main { animation-duration: .18s !important; }

/* Compilazione automatica del browser (nome utente/password salvati): Chrome la dipinge di azzurro con testo scuro, fuori dal tema.
   Si forza lo stesso sfondo "carta" e lo stesso colore del testo degli altri campi. */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, textarea:-webkit-autofill, select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--panel) inset !important;
  box-shadow: 0 0 0 1000px var(--panel) inset !important;
  -webkit-text-fill-color: var(--zinc-900) !important;
  caret-color: var(--zinc-900);
  transition: background-color 9999s ease-out 0s;
}
input:autofill { background-color: var(--panel) !important; color: var(--zinc-900) !important; }