/* =====================================================================
   BREVIARIO // tema cyberpunk
   neon ciano + magenta + giallo su nero bluastro, scanline e angoli tagliati
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;900&family=Rajdhani:wght@400;500;600;700&family=Share+Tech+Mono&display=swap');

html {
    --cp-bg: #07070d;
    --cp-bg-2: #0d0d1a;
    --cp-panel: rgba(16, 16, 34, 0.86);
    --cp-cyan: #00f0ff;
    --cp-magenta: #ff2a6d;
    --cp-yellow: #f9f002;
    --cp-violet: #b026ff;
    --cp-green: #39ff14;
    --cp-text: #d6f7ff;
    --cp-dim: #7b8fb0;
    --cp-font-display: 'Orbitron', 'Rajdhani', sans-serif;
    --cp-font-mono: 'Share Tech Mono', ui-monospace, monospace;
    --cp-cut: 14px;

    --lumo-font-family: 'Rajdhani', 'Segoe UI', sans-serif;
    --lumo-font-size-m: 1.05rem;
    --lumo-base-color: var(--cp-bg);
    --lumo-body-text-color: var(--cp-text);
    --lumo-header-text-color: #ffffff;
    --lumo-secondary-text-color: var(--cp-dim);
    --lumo-tertiary-text-color: #56607a;
    --lumo-primary-color: var(--cp-cyan);
    --lumo-primary-color-50pct: rgba(0, 240, 255, 0.5);
    --lumo-primary-color-10pct: rgba(0, 240, 255, 0.12);
    --lumo-primary-text-color: var(--cp-cyan);
    --lumo-primary-contrast-color: #000;
    --lumo-error-color: var(--cp-magenta);
    --lumo-error-text-color: var(--cp-magenta);
    --lumo-success-color: var(--cp-green);
    --lumo-success-text-color: var(--cp-green);
    --lumo-contrast-5pct: rgba(0, 240, 255, 0.05);
    --lumo-contrast-10pct: rgba(0, 240, 255, 0.10);
    --lumo-contrast-20pct: rgba(0, 240, 255, 0.20);
    --lumo-border-radius-s: 0;
    --lumo-border-radius-m: 0;
    --lumo-border-radius-l: 0;
    color-scheme: dark;
}

body {
    background-color: var(--cp-bg);
    background-image:
        radial-gradient(ellipse at 15% -10%, rgba(176, 38, 255, 0.22), transparent 55%),
        radial-gradient(ellipse at 110% 110%, rgba(0, 240, 255, 0.16), transparent 50%),
        linear-gradient(rgba(0, 240, 255, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 240, 255, 0.045) 1px, transparent 1px);
    background-size: auto, auto, 42px 42px, 42px 42px;
    background-attachment: fixed;
}

/* scanline su tutto lo schermo */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 10000;
    background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.18) 0, rgba(0, 0, 0, 0.18) 1px, transparent 1px, transparent 3px);
    mix-blend-mode: multiply;
}

h1, h2, h3, h4 {
    font-family: var(--cp-font-display);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

::selection { background: var(--cp-magenta); color: #000; }

a { color: var(--cp-yellow); }

/* ---------------- layout ---------------- */
vaadin-app-layout::part(navbar) {
    background: linear-gradient(90deg, rgba(7, 7, 13, 0.96), rgba(30, 6, 40, 0.96));
    border-bottom: 1px solid var(--cp-magenta);
    box-shadow: 0 0 18px rgba(255, 42, 109, 0.45);
}

vaadin-app-layout::part(drawer) {
    background: rgba(7, 7, 13, 0.97);
    border-right: 1px solid rgba(0, 240, 255, 0.35);
}

.cp-logo {
    font-family: var(--cp-font-display);
    font-weight: 900;
    font-size: 1.35rem;
    letter-spacing: 0.22em;
    margin: 0 0.6em;
    color: var(--cp-cyan);
    text-shadow: 0 0 6px var(--cp-cyan), 0 0 18px rgba(0, 240, 255, 0.6);
    white-space: nowrap;
}

.cp-logo .cp-logo-slash { color: var(--cp-magenta); text-shadow: 0 0 8px var(--cp-magenta); }

.cp-utente {
    margin-left: auto;
    font-family: var(--cp-font-mono);
    color: var(--cp-yellow);
    white-space: nowrap;
    padding-right: 0.5em;
}

vaadin-side-nav-item::part(content) { font-family: var(--cp-font-display); font-size: 0.82rem; letter-spacing: 0.12em; }
vaadin-side-nav-item[current]::part(content) { color: var(--cp-yellow); text-shadow: 0 0 8px rgba(249, 240, 2, 0.6); }
vaadin-side-nav-item[current] { background: linear-gradient(90deg, rgba(249, 240, 2, 0.12), transparent); border-left: 3px solid var(--cp-yellow); }

.cp-pagina {
    padding: var(--lumo-space-l);
    max-width: 1500px;
    margin: 0 auto;
    box-sizing: border-box;
    width: 100%;
}

@media (max-width: 640px) {
    .cp-pagina { padding: var(--lumo-space-s); }
}

/* ---------------- titoli glitch ---------------- */
.cp-titolo {
    position: relative;
    font-family: var(--cp-font-display);
    font-weight: 900;
    font-size: clamp(1.6rem, 4vw, 2.8rem);
    color: #fff;
    margin: 0 0 0.2em;
    text-shadow: 2px 0 var(--cp-magenta), -2px 0 var(--cp-cyan);
}

.cp-titolo::before, .cp-titolo::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    overflow: hidden;
    pointer-events: none;
}

.cp-titolo::before { color: var(--cp-cyan); animation: cp-glitch-1 3.2s infinite steps(1); clip-path: inset(0 0 60% 0); }
.cp-titolo::after { color: var(--cp-magenta); animation: cp-glitch-2 2.7s infinite steps(1); clip-path: inset(55% 0 0 0); }

@keyframes cp-glitch-1 {
    0%, 92%, 100% { transform: none; opacity: 0; }
    93% { transform: translate(-4px, -1px); opacity: 0.9; }
    96% { transform: translate(3px, 1px); opacity: 0.9; }
}

@keyframes cp-glitch-2 {
    0%, 88%, 100% { transform: none; opacity: 0; }
    89% { transform: translate(4px, 1px); opacity: 0.9; }
    94% { transform: translate(-3px, 0); opacity: 0.9; }
}

@media (prefers-reduced-motion: reduce) {
    .cp-titolo::before, .cp-titolo::after { animation: none; }
}

.cp-sottotitolo {
    font-family: var(--cp-font-mono);
    color: var(--cp-dim);
    margin: 0 0 var(--lumo-space-l);
    letter-spacing: 0.05em;
}

.cp-sottotitolo b { color: var(--cp-yellow); font-weight: normal; }

/* ---------------- pannelli con angoli tagliati ---------------- */
.cp-panel {
    position: relative;
    background: var(--cp-panel);
    border: 1px solid rgba(0, 240, 255, 0.45);
    padding: var(--lumo-space-m) var(--lumo-space-l);
    clip-path: polygon(0 0, calc(100% - var(--cp-cut)) 0, 100% var(--cp-cut), 100% 100%, var(--cp-cut) 100%, 0 calc(100% - var(--cp-cut)));
    box-shadow: inset 0 0 24px rgba(0, 240, 255, 0.07);
    box-sizing: border-box;
}

.cp-panel.magenta { border-color: rgba(255, 42, 109, 0.6); box-shadow: inset 0 0 24px rgba(255, 42, 109, 0.09); }
.cp-panel.giallo { border-color: rgba(249, 240, 2, 0.55); box-shadow: inset 0 0 24px rgba(249, 240, 2, 0.07); }
.cp-panel.viola { border-color: rgba(176, 38, 255, 0.6); box-shadow: inset 0 0 24px rgba(176, 38, 255, 0.1); }

.cp-panel-titolo {
    font-family: var(--cp-font-display);
    font-size: 0.78rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--cp-cyan);
    margin: 0 0 var(--lumo-space-s);
    display: flex;
    align-items: center;
    gap: 0.5em;
}

.cp-panel-titolo::before { content: '//'; color: var(--cp-magenta); }
.cp-panel.magenta .cp-panel-titolo { color: var(--cp-magenta); }
.cp-panel.magenta .cp-panel-titolo::before { color: var(--cp-cyan); }
.cp-panel.giallo .cp-panel-titolo { color: var(--cp-yellow); }
.cp-panel.viola .cp-panel-titolo { color: #d68bff; }

.cp-griglia {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--lumo-space-m);
    width: 100%;
}

@media (max-width: 400px) {
    .cp-griglia { grid-template-columns: 1fr; }
}

/* coppia etichetta / valore */
.cp-campo { display: flex; flex-direction: column; margin-bottom: var(--lumo-space-s); min-width: 0; }
.cp-campo-label { font-family: var(--cp-font-mono); font-size: 0.75rem; color: var(--cp-dim); text-transform: uppercase; letter-spacing: 0.12em; }
.cp-campo-valore { font-size: 1.08rem; color: var(--cp-text); white-space: pre-line; overflow-wrap: anywhere; }
.cp-campo-valore.mono { font-family: var(--cp-font-mono); color: var(--cp-yellow); }
.cp-campo-valore a { color: var(--cp-cyan); text-decoration: none; border-bottom: 1px dashed rgba(0, 240, 255, 0.5); }
.cp-vuoto { color: #4b5570; font-style: italic; }

.cp-riga-azioni { display: flex; align-items: center; gap: 0.3em; flex-wrap: wrap; }

/* ---------------- cose da sapere ---------------- */
.cp-sapere { list-style: none; margin: 0; padding: 0; }
.cp-sapere li {
    position: relative;
    padding: 0.55em 0.4em 0.55em 1.8em;
    border-bottom: 1px solid rgba(0, 240, 255, 0.12);
    line-height: 1.45;
    overflow-wrap: anywhere;
}
.cp-sapere li::before {
    content: '▸';
    position: absolute;
    left: 0.4em;
    color: var(--cp-magenta);
    text-shadow: 0 0 6px var(--cp-magenta);
}
.cp-sapere li:last-child { border-bottom: none; }
.cp-sapere strong { color: var(--cp-yellow); font-weight: 600; }
.cp-sapere a { color: var(--cp-cyan); }

/* ---------------- card comuni ---------------- */
.cp-card {
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
    display: flex;
    flex-direction: column;
    gap: 0.35em;
}
.cp-card:hover, .cp-card:focus-visible {
    transform: translateY(-2px);
    border-color: var(--cp-magenta);
    box-shadow: inset 0 0 28px rgba(255, 42, 109, 0.18), 0 0 14px rgba(255, 42, 109, 0.35);
    outline: none;
}
.cp-card-nome { font-family: var(--cp-font-display); font-size: 1.1rem; font-weight: 700; color: #fff; letter-spacing: 0.06em; text-transform: uppercase; }
.cp-card-meta { font-family: var(--cp-font-mono); font-size: 0.85rem; color: var(--cp-dim); }

.cp-chip {
    display: inline-block;
    font-family: var(--cp-font-mono);
    font-size: 0.78rem;
    padding: 0.1em 0.55em;
    margin: 0 0.3em 0.3em 0;
    border: 1px solid var(--cp-cyan);
    color: var(--cp-cyan);
    background: rgba(0, 240, 255, 0.07);
    white-space: nowrap;
}
.cp-chip.oggi { border-color: var(--cp-yellow); color: #000; background: var(--cp-yellow); box-shadow: 0 0 10px rgba(249, 240, 2, 0.6); }
.cp-chip.magenta { border-color: var(--cp-magenta); color: var(--cp-magenta); background: rgba(255, 42, 109, 0.08); }

/* ---------------- agenda settimanale ---------------- */
.cp-settimana {
    display: grid;
    grid-template-columns: repeat(6, minmax(180px, 1fr));
    gap: var(--lumo-space-s);
    width: 100%;
    overflow-x: auto;
}
@media (max-width: 1100px) {
    .cp-settimana { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
}
.cp-giorno { padding: var(--lumo-space-s); min-height: 120px; }
.cp-giorno.oggi { border-color: var(--cp-yellow); box-shadow: inset 0 0 30px rgba(249, 240, 2, 0.12), 0 0 18px rgba(249, 240, 2, 0.25); }
.cp-giorno-nome { font-family: var(--cp-font-display); font-weight: 700; letter-spacing: 0.2em; color: var(--cp-cyan); margin-bottom: var(--lumo-space-s); display: flex; justify-content: space-between; }
.cp-giorno.oggi .cp-giorno-nome { color: var(--cp-yellow); }

.cp-slot {
    display: block;
    padding: 0.45em 0.55em;
    margin-bottom: 0.45em;
    border-left: 3px solid var(--cp-magenta);
    background: rgba(255, 42, 109, 0.06);
    cursor: pointer;
    transition: background 0.1s;
}
.cp-slot:hover, .cp-slot:focus-visible { background: rgba(255, 42, 109, 0.18); outline: none; }
.cp-slot-ora { font-family: var(--cp-font-mono); color: var(--cp-yellow); font-size: 0.9rem; }
.cp-slot-comune { font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.cp-slot-meta { font-family: var(--cp-font-mono); color: var(--cp-dim); font-size: 0.78rem; }

/* ---------------- login ---------------- */
.cp-login-box {
    width: min(420px, 92vw);
    margin: 8vh auto 0;
}
.cp-login-box vaadin-login-form { --lumo-base-color: transparent; }
vaadin-login-form-wrapper { background: transparent; }

/* ---------------- componenti ---------------- */
vaadin-button {
    font-family: var(--cp-font-display);
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
vaadin-button[theme~='primary'] {
    background: var(--cp-cyan);
    color: #000;
    box-shadow: 0 0 12px rgba(0, 240, 255, 0.6);
}
vaadin-button[theme~='error'][theme~='primary'] { background: var(--cp-magenta); box-shadow: 0 0 12px rgba(255, 42, 109, 0.6); color: #000; }

vaadin-text-field, vaadin-text-area, vaadin-password-field, vaadin-select, vaadin-combo-box, vaadin-email-field {
    --vaadin-input-field-background: rgba(0, 240, 255, 0.06);
}
vaadin-text-field::part(input-field), vaadin-text-area::part(input-field), vaadin-password-field::part(input-field),
vaadin-select::part(input-field), vaadin-combo-box::part(input-field) {
    border-bottom: 1px solid rgba(0, 240, 255, 0.5);
    font-family: var(--cp-font-mono);
}

vaadin-grid {
    --vaadin-grid-cell-background: transparent;
    background: var(--cp-panel);
    border: 1px solid rgba(0, 240, 255, 0.35);
    font-family: var(--cp-font-mono);
}
vaadin-grid::part(header-cell) { background: rgba(255, 42, 109, 0.12); color: var(--cp-magenta); font-family: var(--cp-font-display); font-size: 0.75rem; letter-spacing: 0.12em; }
vaadin-grid::part(cell) { background: transparent; border-top-color: rgba(0, 240, 255, 0.12); }

vaadin-dialog-overlay::part(overlay) { background: #0b0b17; border: 1px solid var(--cp-magenta); box-shadow: 0 0 30px rgba(255, 42, 109, 0.4); }
vaadin-notification-card::part(overlay) { background: #0b0b17; border: 1px solid var(--cp-cyan); font-family: var(--cp-font-mono); }
vaadin-notification-card[theme~='error']::part(overlay) { border-color: var(--cp-magenta); color: var(--cp-magenta); }
vaadin-notification-card[theme~='success']::part(overlay) { border-color: var(--cp-green); color: var(--cp-green); }

vaadin-upload { border: 1px dashed var(--cp-cyan); background: rgba(0, 240, 255, 0.04); padding: var(--lumo-space-m); }

.cp-editor-turno { display: flex; gap: var(--lumo-space-s); align-items: baseline; flex-wrap: wrap; border-left: 2px solid var(--cp-magenta); padding-left: var(--lumo-space-s); margin-bottom: var(--lumo-space-xs); }

.cp-terminale {
    font-family: var(--cp-font-mono);
    color: var(--cp-green);
    white-space: pre-wrap;
    margin: 0;
}

/* ---------------- scheda ecosportello ---------------- */
.cp-scheda {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(300px, 2fr);
    gap: var(--lumo-space-m);
    margin-top: var(--lumo-space-m);
    align-items: start;
}
.cp-scheda-colonna { display: flex; flex-direction: column; gap: var(--lumo-space-m); min-width: 0; }
@media (max-width: 900px) {
    .cp-scheda { grid-template-columns: 1fr; }
}

@media print {
    body { background: #fff; }
    body::after, vaadin-button, .cp-titolo::before, .cp-titolo::after { display: none !important; }
    .cp-panel { clip-path: none; background: #fff; border: 1px solid #000; box-shadow: none; }
    .cp-titolo, .cp-panel-titolo, .cp-campo-valore, .cp-sapere li, .cp-sapere strong, .cp-campo-valore.mono { color: #000 !important; text-shadow: none !important; }
}