/*
 * Cornice di Canova (layouts/canova.html.erb, MD/CANOVA_HOST.md §3).
 *
 * Canova e' «un altro programma della stessa casa», fratello di Tela: le
 * misure, i raggi, le ombre e la tipografia della cornice sono quelli di
 * Tela (app/frontend/studio/ui/workspace.css, application.css di Tela),
 * riportati qui come variabili --canova-*; i colori sono quelli del marchio
 * RIC. Nessun file di Tela viene importato.
 *
 * Solo classi .canova-* (e i pochi id dei partial di RIC riusati: campanella,
 * tema): fuori dal guscio questo file non viene caricato. Il contenuto delle
 * pagine resta Metronic/RIC; qui si adatta la cornice, non le pagine.
 *
 * Tema scuro: stesse variabili ridefinite sotto [data-bs-theme="dark"]
 * (contrasti misurati: testo almeno 4,5:1, icone e bordi dei controlli 3:1).
 */

:root,
[data-bs-theme="light"] {
    /* Marchio */
    --canova-brand: #7f1f29;
    --canova-deep: #5e1f29;
    --canova-end: #2b1c24;
    --canova-gradient: linear-gradient(135deg, var(--canova-brand), var(--canova-deep) 58%, var(--canova-end));

    /* Superfici e testo (Tela: #f6f4f3, #fff, #2b1c24, #78666d, #e9e2e4) */
    --canova-page: #f6f4f3;
    --canova-surface: #ffffff;
    --canova-ink: #2b1c24;
    --canova-muted: #6f5f66;
    --canova-line: #e9e2e4;
    --canova-line-strong: #a58f98;
    --canova-hover: #f5edef;
    --canova-focus: #7f1f29;

    /* Intestazione */
    --canova-header-h: 100px;
    --canova-header-bg: #ffffff;
    --canova-header-ink: #5e1f29;
    --canova-logo-w: 152px;
    --canova-logo-h: 72px;

    /* Barra laterale */
    --canova-aside-w: 248px;
    --canova-aside-bg: #5e1f29;
    --canova-aside-ink: #ffffff;
    --canova-aside-group: #f1dfe3;
    --canova-aside-hover: rgba(255, 255, 255, .08);
    --canova-aside-active: rgba(255, 255, 255, .16);
    --canova-aside-bar: #ffffff;

    /* Misure (Tela) */
    --canova-radius-item: 7px;
    --canova-radius-control: 10px;
    --canova-radius-menu: 12px;
    --canova-radius-card: 11px;
    --canova-shadow-menu: 0 8px 32px rgba(43, 28, 36, .15);
    --canova-shadow-drawer: 0 0 40px rgba(43, 28, 36, .25);
    --canova-content-pad: 30px 32px 36px;
    --canova-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    /* Piè di pagina */
    --canova-footer-bg: linear-gradient(110deg, #2b1c24, #5e1f29);
    --canova-footer-line: #7f1f29;
    --canova-footer-ink: #f3e9ec;

    /* Avatar */
    --canova-avatar-bg: #5e1f29;
    --canova-avatar-ink: #ffffff;
    --canova-avatar-ring: transparent;

    --canova-backdrop: rgba(43, 28, 36, .4);
}

[data-bs-theme="dark"] {
    --canova-page: #161418;
    --canova-surface: #1f1c21;
    --canova-ink: #f2eaee;
    --canova-muted: #b9aab2;
    --canova-line: #3b3439;
    --canova-line-strong: #8c7b84;
    --canova-hover: #332e35;
    --canova-focus: #efbdc9;

    --canova-header-bg: #1f1c21;
    --canova-header-ink: #f2eaee;

    --canova-aside-bg: #3a1c26;
    --canova-aside-group: #e8cfd6;
    --canova-aside-hover: rgba(255, 255, 255, .07);
    --canova-aside-active: rgba(255, 255, 255, .14);

    --canova-shadow-menu: 0 8px 32px rgba(0, 0, 0, .45);
    --canova-shadow-drawer: 0 0 40px rgba(0, 0, 0, .6);

    --canova-footer-bg: linear-gradient(110deg, #1d1318, #3a1c26);
    --canova-footer-line: #7f1f29;

    --canova-avatar-bg: #7f1f29;
    --canova-avatar-ring: #c08896;

    --canova-backdrop: rgba(0, 0, 0, .55);
}

/* ── Pagina ─────────────────────────────────────────────────────────── */
/* Metronic da' a html e body altezza 100% e body flessibile: la cornice
   crescerebbe oltre il body e sotto si vedrebbe il fondo di html. */
html:has(> body.canova-body) { background: var(--canova-page); }
body.canova-body {
    display: block;
    height: auto;
    min-height: 100%;
    margin: 0;
    background: var(--canova-page);
    color: var(--canova-ink);
    font-family: var(--canova-font);
    -webkit-font-smoothing: antialiased;
}

.canova-skip {
    position: absolute;
    left: 12px;
    top: -60px;
    z-index: 1100;
    padding: 10px 14px;
    border-radius: var(--canova-radius-item);
    background: var(--canova-surface);
    color: var(--canova-brand);
    font-weight: 600;
    box-shadow: var(--canova-shadow-menu);
}
.canova-skip:focus { top: 12px; outline: 3px solid var(--canova-focus); outline-offset: 2px; }

.canova-app {
    display: grid;
    grid-template-columns: var(--canova-aside-w) minmax(0, 1fr);
    grid-template-rows: var(--canova-header-h) 1fr auto;
    min-height: 100vh;
    min-height: 100dvh;
}

/* ── Intestazione ───────────────────────────────────────────────────── */
.canova-header {
    grid-column: 1 / -1;
    grid-row: 1;
    position: sticky;
    top: 0;
    z-index: 95;
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: var(--canova-header-h);
    padding: 10px 24px;
    background: var(--canova-header-bg);
    border-bottom: 1px solid var(--canova-line);
    color: var(--canova-header-ink);
}
.canova-logo { display: block; flex-shrink: 0; line-height: 0; margin-left: 34px; border-radius: 8px; }
.canova-logo img { display: block; width: var(--canova-logo-w); height: var(--canova-logo-h); object-fit: contain; object-position: left center; }
.canova-logo:focus-visible { outline: 3px solid var(--canova-focus); outline-offset: 4px; }

.canova-header-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; min-width: 0; }

/* Pulsanti a icona dell'intestazione: «?», campanella, tema, menu. I partial
   di RIC portano le classi Metronic (btn-color-white, bg-hover-white): qui
   tornano del colore dell'intestazione chiara di Canova. */
.canova-icon-button,
.canova-header .header-actions-reset,
.canova-header #kt_header_help > .btn-icon,
.canova-header #kt_header_notifications > .btn-icon,
.canova-header #kt_header_theme > .btn-icon {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 44px !important;
    height: 44px !important;
    padding: 0;
    border: 0;
    border-radius: var(--canova-radius-control) !important;
    background: transparent !important;
    color: var(--canova-header-ink) !important;
    cursor: pointer;
    transition: background-color .15s ease;
}
.canova-icon-button > i,
.canova-header #kt_header_help > .btn-icon > i,
.canova-header #kt_header_notifications > .btn-icon > i,
.canova-header #kt_header_theme > .btn-icon > i {
    color: var(--canova-header-ink) !important;
    font-size: 22px !important;
}
.canova-icon-button:hover,
.canova-header #kt_header_help > .btn-icon:hover,
.canova-header #kt_header_notifications > .btn-icon:hover,
.canova-header #kt_header_theme > .btn-icon:hover,
.canova-header [data-kt-menu-trigger].show,
.canova-header .btn-icon[aria-expanded="true"] {
    background: var(--canova-hover) !important;
}
.canova-icon-button:focus-visible,
.canova-header .btn-icon:focus-visible,
.canova-avatar-button:focus-visible {
    outline: 3px solid var(--canova-focus) !important;
    outline-offset: 2px;
}
.canova-menu-trigger { display: none !important; }

/* Campanella: l'anello del contatore prende il colore dell'intestazione. */
.canova-header #kt_header_notifications { --rn-new-ring: var(--canova-header-bg); }

/* Selettore del tema (_theme_switch): l'icona del pulsante segue la
   preferenza scritta dal server su <html> (stesse regole di RIC, che le
   tiene nello <style> del suo header). */
.canova-header #ric_theme_toggle .ric-theme-icon { display: none; }
html:not([data-bs-theme-mode="dark"]):not([data-bs-theme-mode="system"]) .canova-header #ric_theme_toggle [data-ric-theme-icon="light"],
html[data-bs-theme-mode="dark"] .canova-header #ric_theme_toggle [data-ric-theme-icon="dark"],
html[data-bs-theme-mode="system"] .canova-header #ric_theme_toggle [data-ric-theme-icon="system"] { display: inline-block; }
.canova-header .ric-theme-menu__title { color: var(--canova-muted); font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.canova-header .ric-theme-option { gap: 2px; }
.canova-header .ric-theme-option__hint { color: var(--canova-muted); font-size: .75rem; font-weight: 500; }
.canova-header .ric-theme-option__check { margin-left: auto; visibility: hidden; color: var(--canova-brand) !important; }
.canova-header .ric-theme-option[aria-checked="true"],
.canova-header .ric-theme-option[aria-checked="true"] .menu-icon i { color: var(--canova-brand) !important; }
.canova-header .ric-theme-option[aria-checked="true"] .ric-theme-option__check { visibility: visible; }
.canova-header .ric-theme-option:focus-visible { outline: 2px solid var(--canova-focus); outline-offset: -2px; }
[data-bs-theme="dark"] .canova-header .ric-theme-option[aria-checked="true"],
[data-bs-theme="dark"] .canova-header .ric-theme-option[aria-checked="true"] .menu-icon i,
[data-bs-theme="dark"] .canova-header .ric-theme-option__check { color: var(--canova-focus) !important; }

/* Impersonazione: avviso evidente, come in RIC, ma nel tono di Canova. */
.canova-impersonation {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 6px 12px;
    border-radius: var(--canova-radius-control);
    background: #b42335;
    color: #fff !important;
    font-size: 12px;
    text-decoration: none;
}
.canova-impersonation i { color: #fff; font-size: 18px; }

/* ── Cerchio dell'utente e suo menu (Tela: studio-account) ──────────── */
.canova-account { display: flex; align-items: center; margin-left: 6px; }
.canova-avatar-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
}
.canova-avatar {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    overflow: hidden;
    border-radius: 50%;
    background: var(--canova-avatar-bg);
    box-shadow: 0 0 0 1px var(--canova-avatar-ring);
    color: var(--canova-avatar-ink);
    font: 700 12px/1 var(--canova-font);
    letter-spacing: .02em;
}
.canova-avatar.has-image { background: #fff; box-shadow: 0 0 0 1px var(--canova-line-strong); }
.canova-avatar img { width: 100%; height: 100%; object-fit: cover; }

.canova-header .menu-sub-dropdown.canova-account-menu {
    width: 280px;
    max-width: calc(100vw - 24px);
    padding: 12px;
    border: 1px solid var(--canova-line);
    border-radius: var(--canova-radius-menu);
    background: var(--canova-surface);
    box-shadow: var(--canova-shadow-menu);
    font-family: var(--canova-font);
}
.canova-account-identity { display: flex; flex-direction: column; gap: 2px; padding: 3px 8px 10px; margin-bottom: 5px; border-bottom: 1px solid var(--canova-line); }
.canova-account-identity strong { color: var(--canova-ink); font-size: 13px; font-weight: 650; }
.canova-account-identity small { color: var(--canova-muted); font-size: 12px; overflow-wrap: anywhere; }
.canova-account-menu .menu-item { padding: 0; }
.canova-account-menu .menu-link {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 44px;
    padding: 10px !important;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--canova-header-ink) !important;
    font-size: 13px;
    font-weight: 500;
    text-align: left;
    text-decoration: none;
}
.canova-account-menu .menu-link i { color: inherit; font-size: 18px; }
.canova-account-menu .menu-link .menu-title { flex: 1; color: inherit !important; }
.canova-account-menu .menu-link:hover,
.canova-account-menu .menu-link:focus-visible { background: var(--canova-hover) !important; }
.canova-account-menu .menu-link:focus-visible { outline: 2px solid var(--canova-focus); outline-offset: -2px; }
.canova-account-separator { height: 1px; margin: 6px 0; background: var(--canova-line); }
.canova-count {
    min-width: 20px;
    padding: 1px 6px;
    border-radius: 10px;
    background: var(--canova-hover);
    color: var(--canova-brand);
    font-size: 11px;
    font-weight: 700;
    text-align: center;
}
[data-bs-theme="dark"] .canova-count { color: var(--canova-focus); }

/* Menu a tendina della campanella e del tema dentro la cornice: stesso
   raggio e stessa ombra del menu dell'utente. */
.canova-header #notifications_dropdown,
.canova-header #ric_theme_menu {
    border: 1px solid var(--canova-line);
    border-radius: var(--canova-radius-menu);
    box-shadow: var(--canova-shadow-menu);
}

/* ── Barra laterale (Tela: workspace-sidebar) ───────────────────────── */
.canova-sidebar {
    grid-column: 1;
    grid-row: 2 / span 2;
    position: sticky;
    top: var(--canova-header-h);
    height: calc(100vh - var(--canova-header-h));
    height: calc(100dvh - var(--canova-header-h));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 20px 16px;
    background: var(--canova-aside-bg);
    color: var(--canova-aside-ink);
    font-family: var(--canova-font);
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .25) transparent;
}
.canova-drawer-head { display: none; }

.canova-nav { display: flex; flex-direction: column; }
.canova-nav-section + .canova-nav-section { margin-top: 4px; }
.canova-nav-group {
    display: block;
    padding: 17px 14px 9px;
    color: var(--canova-aside-group);
    font-size: 10px;
    font-weight: 650;
    line-height: 1.5;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.canova-nav-section:first-child .canova-nav-group { padding-top: 4px; }
.canova-nav-list { display: flex; flex-direction: column; gap: 5px; margin: 0; padding: 0; list-style: none; }
.canova-nav-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    min-height: 46px;
    padding: 11px 13px;
    border-radius: var(--canova-radius-item);
    color: var(--canova-aside-ink) !important;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
    text-decoration: none;
}
.canova-nav-link i { flex-shrink: 0; color: var(--canova-aside-ink); font-size: 21px; }
.canova-nav-link span { flex: 1; min-width: 0; }
.canova-nav-link:hover { background: var(--canova-aside-hover); color: #fff !important; }
.canova-nav-link[aria-current="page"] { background: var(--canova-aside-active); font-weight: 650; }
.canova-nav-link[aria-current="page"]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 11px;
    bottom: 11px;
    width: 3px;
    border-radius: 2px;
    background: var(--canova-aside-bar);
}
.canova-nav-link:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ── Contenuto ──────────────────────────────────────────────────────── */
.canova-main {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
    padding: var(--canova-content-pad);
}
.canova-main > #kt_content { padding: 0; outline: 0; }

.canova-breadcrumbs { margin: -8px 0 16px; }
.canova-breadcrumbs .breadcrumb-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0; margin: 0; padding: 0; list-style: none; }
.canova-breadcrumbs .breadcrumb-nav-item { display: inline-flex; align-items: center; min-width: 0; }
.canova-breadcrumbs .breadcrumb-nav-item i { margin: 0 6px; color: var(--canova-muted); font-size: 10px; }
.canova-breadcrumbs .breadcrumb-link { color: var(--canova-muted); font-size: 12px; font-weight: 500; text-decoration: none; }
.canova-breadcrumbs .breadcrumb-link:hover { color: var(--canova-brand); text-decoration: underline; text-underline-offset: 3px; }
.canova-breadcrumbs .breadcrumb-link:focus-visible { outline: 2px solid var(--canova-focus); outline-offset: 2px; border-radius: 3px; }
.canova-breadcrumbs .breadcrumb-plain { color: var(--canova-muted); font-size: 12px; }
.canova-breadcrumbs .breadcrumb-current { color: var(--canova-ink); font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-bs-theme="dark"] .canova-breadcrumbs .breadcrumb-link:hover { color: var(--canova-focus); }

/* ── Piè di pagina (Tela: tela-footer) ──────────────────────────────── */
.canova-footer {
    grid-column: 2;
    grid-row: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 4px 24px;
    padding: 6px 24px max(6px, env(safe-area-inset-bottom));
    border-top: 2px solid var(--canova-footer-line);
    background: var(--canova-footer-bg);
    color: var(--canova-footer-ink);
    font-family: var(--canova-font);
    font-size: 12px;
    line-height: 1.4;
}
.canova-footer-copy { display: inline-flex; align-items: center; min-height: 32px; white-space: nowrap; }
.canova-footer-links { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 4px 20px; }
.canova-footer-links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 2px;
    border-radius: 4px;
    color: var(--canova-footer-ink) !important;
    font-weight: 500;
    text-decoration: none;
}
.canova-footer-links a:hover { color: #fff !important; text-decoration: underline; text-underline-offset: 4px; }
.canova-footer-links a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.canova-backdrop { display: none; }

/* ── Larghezze (stesse soglie di Tela) ──────────────────────────────── */
@media (max-width: 1050px) {
    .canova-app { --canova-aside-w: 224px; }
    .canova-sidebar { padding-left: 10px; padding-right: 10px; }
    .canova-main { padding: 25px 22px 32px; }
    .canova-header { padding-left: 22px; padding-right: 22px; }
}

/* Telefono e tablet stretti: barra laterale come cassetto da sinistra. */
@media (max-width: 899.98px) {
    .canova-app { display: flex; flex-direction: column; --canova-header-h: 86px; --canova-logo-w: 138px; --canova-logo-h: 68px; }
    .canova-header { gap: 12px; padding: 6px 20px; }
    .canova-menu-trigger { display: inline-flex !important; margin-left: -8px; }
    .canova-logo { margin-left: 0; }
    .canova-main { flex: 1 0 auto; padding: 24px 20px 30px; }

    .canova-sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 1001;
        width: min(280px, calc(100vw - 56px));
        height: 100vh;
        height: 100dvh;
        padding: 0 0 env(safe-area-inset-bottom) env(safe-area-inset-left);
        box-shadow: var(--canova-shadow-drawer);
        transform: translateX(-100%);
        visibility: hidden;
        transition: transform .22s ease-out, visibility 0s linear .22s;
    }
    .canova-menu-open .canova-sidebar { transform: none; visibility: visible; transition: transform .22s ease-out, visibility 0s; }
    .canova-drawer-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 14px 20px;
        border-bottom: 1px solid rgba(255, 255, 255, .17);
    }
    .canova-drawer-title { display: inline-flex; align-items: center; gap: 10px; color: #fff; font-size: 18px; font-weight: 650; }
    .canova-drawer-title i { color: #fff; font-size: 20px; }
    .canova-drawer-close {
        display: inline-grid;
        place-items: center;
        width: 44px;
        height: 44px;
        border: 1px solid rgba(255, 255, 255, .3);
        border-radius: var(--canova-radius-control);
        background: rgba(255, 255, 255, .08);
        color: #fff;
        cursor: pointer;
    }
    .canova-drawer-close i { color: #fff; font-size: 18px; }
    .canova-drawer-close:hover { background: rgba(255, 255, 255, .16); }
    .canova-drawer-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
    .canova-nav { padding: 12px 12px 20px; }

    .canova-backdrop { display: block; position: fixed; inset: 0; z-index: 1000; background: var(--canova-backdrop); }
    .canova-backdrop[hidden] { display: none; }
    body.canova-menu-open { overflow: hidden; }

    .canova-footer { padding: 6px 18px max(6px, env(safe-area-inset-bottom)); gap: 0 16px; }
    .canova-footer-links { justify-content: flex-start; gap: 0 14px; }
}

@media (max-width: 600px) {
    .canova-app { --canova-header-h: 76px; --canova-logo-w: 100px; --canova-logo-h: 60px; }
    .canova-header { gap: 8px; padding: 6px 14px; }
    .canova-header-actions { gap: 2px; }
    .canova-main { padding: 20px 14px 26px; }
    .canova-hide-sm { display: none; }
}

@media (max-width: 380px) {
    .canova-header #kt_header_help { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
    .canova-sidebar,
    .canova-menu-open .canova-sidebar { transition: none; }
}
@media (prefers-reduced-motion: no-preference) {
    .canova-menu-open .canova-backdrop { animation: canova-backdrop-in .22s ease-out; }
}
@keyframes canova-backdrop-in { from { opacity: 0; } to { opacity: 1; } }

/* ── Stampa: la cornice non va sulla carta (Riepilogo a 360°, schede) ── */
@media print {
    .canova-skip,
    .canova-header,
    .canova-sidebar,
    .canova-footer,
    .canova-backdrop,
    .canova-breadcrumbs { display: none !important; }
    body.canova-body { background: #fff !important; }
    .canova-app { display: block; min-height: 0; }
    .canova-main { padding: 0 !important; }
}