/* Gancio con i colori di instabi.li (main-site: css/main.css e, per il tema
   scuro, css/scuro.css). Impostazione custom_css del ruolo gancio: Gancio la
   serve da /custom_css, stessa origine (CSP). Il tema segue il sistema come
   sul sito: lo sceglie instabili.js (custom_js), qui solo i colori. */
:root {
  --i-bg: #fbfbf7; --i-panel: #f2f2ec; --i-panel2: #e9e9e2; --i-ink: #11110f;
  --i-muted: #66665e; --i-line: #ccccc3; --i-line-strong: #8e8e85;
  --i-accent: #8a1f1f; --i-text: #3d3d37;
  --i-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --i-sans: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
/* Solo dalla radice: i componenti già disegnati tengono la classe del tema
   di prima quando il sistema cambia a pagina aperta, le variabili no. */
.v-application.theme--dark {
  --i-bg: #11110f; --i-panel: #1b1b18; --i-panel2: #262622; --i-ink: #e9e9e1;
  --i-muted: #999991; --i-line: #383833; --i-line-strong: #67675f;
  --i-accent: #d46a6a; --i-text: #c6c6be;
}

/* Pagina */
.v-application, .v-application .title, .v-application [class*="text-"],
.v-application .subtitle-1, .v-application .body-1, .v-application .body-2 {
  font-family: var(--i-sans) !important;
}
.v-application.theme--light, .v-application.theme--dark { background: var(--i-bg) !important; color: var(--i-ink); }
::selection { background: var(--i-accent); color: var(--i-bg); }
.v-application a { text-underline-offset: .2em; }

/* Testata: niente immagine, filetto sotto come il sito */
nav { background: var(--i-bg) !important; border-bottom: 1px solid var(--i-line); }
#title { font-family: var(--i-mono) !important; font-weight: 400; letter-spacing: .035em; color: var(--i-ink) !important; }
#title::before { content: "[ "; color: var(--i-muted); }
#title::after { content: " ]"; color: var(--i-muted); }
h1 .text-body-1 { font-family: var(--i-mono) !important; font-size: .78rem !important; letter-spacing: .04em; color: var(--i-muted); }
#navbar .v-tab, .v-footer .v-btn, .v-application .v-btn {
  font-family: var(--i-mono) !important; text-transform: none; letter-spacing: .03em;
}

/* Riquadri squadrati, bordo sottile, niente ombre */
.v-application .v-card, .v-application .v-sheet, .vc-container, .v-menu__content,
.v-application .v-input__slot, .v-application fieldset, .v-dialog {
  border-radius: 0 !important; box-shadow: none !important;
}
.v-application .event.v-card, .v-application .v-card {
  background: var(--i-panel) !important; border: 1px solid var(--i-line) !important;
  color: var(--i-ink) !important;
}
.vc-container { background: var(--i-panel) !important; border: 1px solid var(--i-line) !important; color: var(--i-ink) !important; }
.vc-container .vc-title, .vc-container .vc-weekday { font-family: var(--i-mono) !important; color: var(--i-muted) !important; }
.v-application .v-input__slot { background: var(--i-panel) !important; }
.v-footer.v-sheet { background: var(--i-bg) !important; border-top: 1px solid var(--i-line) !important; }

/* Eventi: senza immagine propria niente segnaposto, conta il testo */
.event .img.thumb:has(img[src$="fallbackimage.png"]) { display: none; }
.event h2.title { color: var(--i-ink) !important; font-weight: 600; letter-spacing: -.01em; }
.event time, .event .p-location, .event .place { font-family: var(--i-mono) !important; font-size: .8rem !important; color: var(--i-muted) !important; }
.event .v-icon { color: var(--i-line-strong) !important; }

/* Tag come quelli del sito */
.v-application .v-chip {
  border-radius: 0 !important; background: transparent !important;
  border: 1px solid var(--i-line-strong) !important; color: var(--i-ink) !important;
  font-family: var(--i-mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .06em;
}
.v-application .v-chip:hover { border-color: var(--i-accent) !important; color: var(--i-accent) !important; }
.v-application .v-chip .v-chip__content { color: inherit !important; }
/* Senza immagine il riquadro non tiene l'altezza della miniatura */
.event:has(img[src$="fallbackimage.png"]) { min-height: 0 !important; }

/* Calendario: oggi e i giorni con eventi nell'accento, non nel verde di v-calendar */
.vc-container .vc-highlight { background: transparent !important; border-color: var(--i-accent) !important; border-radius: 0 !important; }
.vc-container .is-today .vc-day-content { color: var(--i-accent) !important; font-weight: 600; }
.vc-container .vc-dot { background-color: var(--i-accent) !important; }
.vc-container .vc-day-content:hover { background: var(--i-panel2) !important; border-radius: 0 !important; }

/* Tema automatico (instabili.js). Il server rende sempre il chiaro: con il
   sistema in scuro la pagina resta trasparente finché lo script non passa a
   theme--dark, al massimo 1,5 s (senza JS si vede comunque, in chiaro). */
@media (prefers-color-scheme: dark) {
  :root { color-scheme: dark; background: #11110f; }
  .v-application.theme--light { opacity: 0; animation: i-mostra 0s 1.5s forwards; }
}
@keyframes i-mostra { to { opacity: 1; } }
/* Nessun pulsante del tema, come sul sito: in testata e nella home */
nav > .d-flex.pa-4 > .d-flex > button.v-btn:first-of-type,
.p-0.m-0.d-flex.justify-end > .v-icon:first-child { display: none !important; }
/* Il logo è nero su bianco: nel tema scuro invertito, come sul sito */
.v-application.theme--dark nav img[src$="/logo.png"] { filter: invert(1) brightness(.91); mix-blend-mode: lighten; }
/* Il logo è un pulsante tondo verso la home: niente cerchio di Vuetify
   (stato attivo, hover, focus) dietro, resta lo sfondo della pagina. */
nav > .d-flex.pa-4 > a.v-btn:first-child::before { display: none !important; }