/* ================================================
   Eikado — Custom UI Overrides per Cal.com
   Caricato via volume mount + nginx injection
   ================================================ */

/* --- Nascondi "Powered by Cal.com" nel footer ---
   Cal.com renderizza un link diretto a https://cal.com
   Il testo "Powered by" è spesso dentro lo stesso <a> tag.
   I loghi SVG sono già sostituiti con Eikado via volume mount.
   ----------------------------------------------- */

/* Nascondi SOLO il link di attribuzione "Powered by Cal.com"
   Usa target="_blank" per distinguerlo dal logo header (che non apre in nuova tab) */
a[href="https://cal.com"][target="_blank"],
a[href="https://cal.com/"][target="_blank"] {
    display: none !important;
}

/* Nascondi il container padre se usa data-testid noti */
[data-testid="powered-by-cal"],
[data-testid*="powered-by"],
[data-testid="calLink"] {
    display: none !important;
}

/* Nascondi il wrapper padre del link Cal.com (fallback robusto) */
/* :has() supportato da Chrome 105+, Firefox 121+, Safari 15.4+ */
div:has(> a[href="https://cal.com"]),
div:has(> a[href="https://cal.com/"]),
footer:has(a[href="https://cal.com"]) {
    display: none !important;
}

/* --- Logo Eikado: aumenta dimensione ---
   Default Cal.com: h-4 = 16px (troppo piccolo per "eikado")
   Override: 3rem (header/generale), 2.1rem (footer booking = 30% ridotto)
   ----------------------------------------------- */
img[src*="api/logo"],
img[src="/api/logo"] {
    height: 3rem !important;
    width: auto !important;
}
/* Footer booking page: logo più piccolo (-30%) */
a[href*="go.cal.com"] img[src*="api/logo"],
a[data-eikado-logo] img[src*="api/logo"] {
    height: 2.1rem !important;
}

/* --- Logo icon mobile: adatta colore allo sfondo ---
   L'icona Eikado è BIANCA di default (diversamente dall'icona Cal.com originale nera).
   Tailwind dark:invert la inverte in dark mode → diventa nera (sbagliato!).
   Fix:
     - light mode: invertiamo a nero (bianco → nero, visibile su sfondo chiaro)
     - dark mode: blocchiamo dark:invert, l'icona rimane bianca su sfondo scuro
   ----------------------------------------------- */
img[src*="api/logo?type=icon"] {
    filter: invert(1) !important; /* light mode: bianco → nero */
}
html.dark img[src*="api/logo?type=icon"],
html[class*="dark"] img[src*="api/logo?type=icon"],
.dark img[src*="api/logo?type=icon"] {
    filter: none !important; /* dark mode: non invertire, già bianca */
}
@media (prefers-color-scheme: dark) {
    img[src*="api/logo?type=icon"] {
        filter: none !important; /* OS dark mode: non invertire */
    }
}

/* --- Cal Video login overlay: nasconde img originale ---
   Sostituita via eikado-menu.js con span "eikado" in Libre Baskerville bianco.
   ----------------------------------------------- */
img[src*="cal-logo-word-dark"] {
    display: none !important;
}

/* --- Sidebar footer: mostra solo "© 2026 Eikado" ---
   Struttura originale: "© 2026 " + <a>Eikado, Inc.</a> + <a>v.x.x.x-sh</a>
   Tecnica: nasconde i due <a> (Inc. e versione) + ::after inietta "Eikado".
   React-proof: i pseudo-elementi CSS non vengono toccati dal reconciler.
   ----------------------------------------------- */
aside:has(> nav) small a[href*="go.cal.com/credits"],
aside:has(> nav) small a[href*="go.cal.com/releases"] {
    display: none !important;
}
aside:has(> nav) small::after {
    content: "Eikado";
}

/* ================================================
   MENU SIDEBAR — Visibilità e ordine voci
   ================================================ */

/* La nav viene nascosta da React via inline style display:none !important.
   Il MutationObserver nel JS ripristina immediatamente display:flex.
   Il CSS non batte inline !important, ma serve come fallback e per l'ordine. */
@media (min-width: 1024px) {
    aside {
        display: flex !important;
    }
    /* Nav: flex-column per permettere ordinamento con order: */
    aside nav {
        display: flex !important;
        flex-direction: column !important;
    }
}

/* === ORDINE VOCI SIDEBAR ===
   Link semplici */
aside nav > a[href="/bookings/upcoming"]              { order: 1 !important; }
aside nav > a[href="/event-types"]                    { order: 2 !important; }
aside nav > a[href="/availability"]                   { order: 3 !important; }
/* order:4 riservato a "Pazienti AI" (iniettato via JS con inline style) */
aside nav > a[href="/teams"]                          { order: 5 !important; }

/* Prenotazioni collassabile: sub-link nascosti per default.
   Evita FOUC prima che eikado-menu.js intervenga.
   Il JS mostra questi link con inline !important quando Prenotazioni è aperto. */
aside nav > a[href="/bookings/upcoming"]:not([data-eikado-prenotazioni]),
aside nav > a[href="/event-types"],
aside nav > a[href="/availability"] {
    display: none !important;
}

/* Nascondi sezione App dalla sidebar (spostata nel profilo dropdown) */
aside nav > button:has(~ div a[href*="/apps"]),
aside nav > div:has(a[href*="/apps"]) {
    display: none !important;
}

/* Desktop chevron nei button sidebar: sempre visibile.
   Per la sezione INATTIVA (ha l'SVG): forza display:block. */
aside nav > button > svg:last-of-type {
    display: block !important;
}

/* === CHEVRON sezione ATTIVA ===
   Cal.com RIMUOVE il nodo SVG dal button della sezione corrente (non lo nasconde:
   lo toglie proprio dal DOM). Soluzione CSS-safe: ::after con border trick = ↓.
   :not(:has(> svg)) = button senza SVG figlio diretto = sezione attiva.
   Nessuna manipolazione del DOM React → zero rischio riconciliazione. */
aside nav > button:not(:has(> svg)) {
    display: flex !important;
    align-items: center !important;
}
aside nav > button:not(:has(> svg))::after {
    content: '';
    display: block;
    flex-shrink: 0;
    margin-left: auto;
    margin-bottom: 0.15rem;
    width: 0.4rem;
    height: 0.4rem;
    border-right: 1.5px solid;
    border-bottom: 1.5px solid;
    transform: rotate(45deg);
    opacity: 0.5;
}

/* === VOCI DA NASCONDERE ===
   Top-level: Instradamento, Flussi di lavoro */
aside nav > a[href="/routing"],
aside nav > a[href="/routing-forms"],
aside nav > a[href="/workflows"] {
    display: none !important;
}

/* Nascondi "Impostazioni" dalla sidebar (accessibile dal menu profilo → Le mie impostazioni)
   id="settings", href="/settings/my-account/profile" */
aside #settings,
aside a[href^="/settings"],
aside button[data-testid="settings"],
aside button[data-test-id="settings"] {
    display: none !important;
}

/* === NASCONDI INTERA SEZIONE APPROFONDIMENTI (Insights) ===
   Button trigger + submenu div nascosti completamente.
   :not(:has(~ div a[href*="/apps"])) esclude il button App che matcha
   anche il selettore insights a causa della cascade CSS. */
aside nav > button:has(~ div a[href*="/insights"]):not(:has(~ div a[href*="/apps"])),
aside nav > div:has(a[href*="/insights"]):not(:has(a[href*="/apps"])) {
    display: none !important;
}

/* --- Menu profilo: nasconde Roadmap e Scarica app ---
   Roadmap: <a href="https://cal.com/roadmap">
   Scarica app: <div data-slot="menu-sub-trigger"> con icona #download
   ----------------------------------------------- */
a[href="https://cal.com/roadmap"],
[data-slot="menu-sub-trigger"]:has(use[href="#download"]) {
    display: none !important;
}

/* --- App Store: nasconde "Segnala app" ---
   Link mailto:help@cal.com con icona #flag — non pertinente per Eikado
   ----------------------------------------------- */
a[href="mailto:help@cal.com"] {
    display: none !important;
}

/* --- Note di debug ---
   Se il footer "Powered by" è ancora visibile dopo il deploy:
   1. Apri DevTools (F12) sulla booking page
   2. Ispeziona il footer → copia il selettore CSS
   3. Aggiorna questo file con il selettore corretto
   4. Riavvia il container: docker compose restart calcom
   ------------------------------------------ */