:root{ /* ===== LIGHT (default) ===== */ --app-bg: #f5f7fb; --app-card: #ffffff; --app-text: #0f172a; --app-muted: #64748b; --app-border: rgba(15, 23, 42, .12); --app-shadow: 0 10px 30px rgba(15, 23, 42, .08); --app-primary: #2563eb; --app-ok: #16a34a; --app-topbar-h: 56px; --app-sidebar-w: 300px; } /* (opzionale) tema scuro: */ body.theme-dark{ --app-bg: #0b1220; --app-card: #121a2b; --app-text: #e8eefc; --app-muted: #9fb0d0; --app-border: rgba(255,255,255,.10); --app-shadow: 0 10px 30px rgba(0,0,0,.25); --app-primary: #60a5fa; --app-ok: #46d39a; } html, body { height: 100%; } body{ background: var(--app-bg); color: var(--app-text); } a{ color: var(--app-primary); } a:hover{ opacity: .95; } /* Label dei form: blu + corsivo */ label, .form-label{ color: var(--app-primary); font-style: italic; } .card{ background-color: var(--app-card); border-color: var(--app-border); box-shadow: var(--app-shadow); } /* ========================= SHELL LAYOUT ========================= */ .app-shell{ min-height: 100vh; display: flex; flex-direction: column; background: var(--app-bg); } .app-topbar{ width: 100%; position: sticky; top: 0; z-index: 1030; min-height: var(--app-topbar-h); background: rgba(255,255,255,.88); backdrop-filter: blur(6px); border-bottom: 1px solid var(--app-border); } .app-topbar > div{ padding-left: 2.5rem !important; padding-right: 2.5rem !important; } body.theme-dark .app-topbar{ background: rgba(0,0,0,.25); } /* Chronos in rosso a sinistra */ .app-topbar-brand{ font-size: 1.35rem; font-weight: 700; letter-spacing: .08em; color: #c00; transition: opacity .15s ease; } .app-topbar-brand:hover{ color: #a00; opacity: .9; } body.theme-dark .app-topbar-brand{ color: #e55; } body.theme-dark .app-topbar-brand:hover{ color: #f66; } /* Blocco sezione (sopra) + pagina (sotto) a fianco di Chronos */ .app-topbar-titles{ border-left: 1px solid var(--app-border); padding-left: .75rem; } .app-topbar-title{ font-weight: 600; font-size: 1rem; letter-spacing: .02em; color: var(--app-text); } .app-topbar-sub{ font-size: .875rem; color: var(--app-muted); font-style: italic; } /* Nome utente a destra (grassetto + corsivo) */ .app-topbar-user{ font-weight: 700; font-style: italic; color: var(--app-text); font-size: .95rem; } body.theme-dark .app-topbar-user{ color: var(--app-text); } .app-body{ flex: 1; min-height: 0; display: flex; } .app-main{ flex: 1; min-width: 0; overflow: auto; padding: 16px; } /* ========================= SIDEBAR ========================= */ .app-sidebar{ --bs-offcanvas-width: var(--app-sidebar-w); width: var(--app-sidebar-w); flex: 0 0 var(--app-sidebar-w); background: var(--app-card); color: var(--app-text); border-right: 1px solid var(--app-border); max-height: calc(100vh - var(--app-topbar-h)); overflow: auto; } .app-sidebar .border-bottom{ border-color: var(--app-border) !important; } .app-sublist{ border-color: var(--app-border) !important; } /* Nasconde l'header "Menu" della sidebar su desktop (hai già la topbar) */ @media (min-width: 768px){ .app-sidebar .offcanvas-header{ display: none; } } /* Responsive: su mobile il body non deve forzare side-by-side */ @media (max-width: 767.98px){ .app-sidebar{ max-height: 100vh; } } /* Desktop: lascia crescere il menu, niente scroll interno */ @media (min-width: 768px){ .app-sidebar{ max-height: none; overflow: visible; } .app-main{ overflow: visible; } } /* FIX layout desktop: menu a sinistra, contenuto a destra */ @media (min-width: 768px){ .app-body{ display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: stretch; } .app-sidebar{ flex: 0 0 var(--app-sidebar-w) !important; width: var(--app-sidebar-w) !important; } /* Su desktop: sidebar sempre visibile (Bootstrap .offcanvas lascia visibility:hidden) */ .app-sidebar.offcanvas-md{ position: static !important; visibility: visible !important; transform: none !important; flex-grow: 0 !important; background-color: var(--app-card) !important; } .app-main{ flex: 1 1 auto !important; min-width: 0; } } /* ========================= MENU (generale) ========================= */ .app-muted{ color: var(--app-muted) !important; } /* Sezioni con barra colorata (se le usi nelle altre aree del menu) */ .app-sec{ position: relative; } .app-sec::before{ content:""; position:absolute; left: 10px; top: 10px; bottom: 10px; width: 4px; border-radius: 999px; background: var(--sec-color, rgba(0,0,0,.25)); opacity: .95; } .app-sec-turno{ --sec-color: #2563eb; } .app-sec-utility{ --sec-color: #16a34a; } .app-sec-universita{ --sec-color: #0ea5e9; } .app-sec-impostazioni{ --sec-color: #64748b; } .app-sec-tutor{ --sec-color: #9333ea; } .app-sec-studente{ --sec-color: #ea580c; } /* Bottoni sezione (base) */ .app-section-btn{ color: var(--app-text); font-weight: 650; align-items: flex-start; background: transparent; border: 0; box-shadow: none; } .app-section-btn:hover{ background: rgba(15,23,42,.06); } /* Sezione menu aperta: resta visibilmente aperta ed evidenziata */ .app-section-btn-open{ background: rgba(15,23,42,.10); color: var(--app-text) !important; font-weight: 600; } /* Chevron allineato in basso e con rotazione */ .app-chevron{ align-self: flex-end; margin-left: 12px; transition: transform .14s ease, opacity .14s ease; } .app-section-btn[aria-expanded="true"] .app-chevron{ transform: rotate(180deg) translateY(1px); } /* Sottomenu più pulito */ .app-submenu{ border: 0 !important; padding: 4px 0 10px; background: transparent !important; gap: 2px; box-shadow: none !important; } .app-submenu .nav-item{ margin-bottom: 2px; } .app-submenu .nav-link{ border-radius: 10px; padding: 6px 10px; transition: background .12s ease, transform .12s ease, box-shadow .12s ease; background: transparent !important; box-shadow: none; color: var(--app-muted); } .app-submenu .nav-link:hover{ transform: translateX(2px); background: rgba(15,23,42,.05) !important; color: var(--app-text); } .app-submenu .nav-link.app-navlink-active{ color: var(--app-primary); background: rgba(37,99,235,.12) !important; } /* === Overrides forti per sidebar === */ .app-sidebar .app-section-btn{ display: flex; align-items: flex-start; background: transparent !important; border: 0 !important; box-shadow: none !important; } .app-sidebar .app-chevron{ margin-top: auto; align-self: flex-end; } .app-sidebar .app-submenu{ border: 0 !important; background: transparent !important; box-shadow: none !important; padding-left: 0; } .app-sidebar .app-submenu .nav-link{ background: transparent !important; border: 0 !important; color: var(--app-muted); } .app-sidebar .app-submenu .nav-link:hover{ background: rgba(15,23,42,.06) !important; color: var(--app-text); } .app-sidebar .app-submenu .nav-link.app-navlink-active{ color: var(--app-primary); background: rgba(37,99,235,.12) !important; } /* Voci generiche (altri menu) */ .app-navlink{ color: var(--app-muted); opacity: 1; } .app-navlink:hover{ color: var(--app-text); background: rgba(15,23,42,.06); } .app-navlink-active{ color: var(--app-primary); opacity: 1; font-weight: 650; background: rgba(37,99,235,.12); } /* Evidenza elegante voce attiva (UNA SOLA VOLTA, no duplicati) */ /* Voce attiva: sempre ben evidenziata (menu aperto e collegamento corrente) */ .app-leaf-active, .app-navlink-active{ box-shadow: inset 3px 0 0 var(--app-primary); background: rgba(37,99,235,.14) !important; color: var(--app-primary) !important; font-weight: 600 !important; } /* Font “elegante” per sotto-voci */ .app-elegant{ font-family: ui-serif, Georgia, "Times New Roman", Times, serif; letter-spacing: .2px; } /* Leaf base (usato dal menu Università) */ .app-leaf{ color: #334155; font-weight: 520; font-size: .92rem; } .app-leaf:hover{ color: #0f172a; background: rgba(15,23,42,.06); } .app-leaf-active{ color: var(--app-primary); font-weight: 650; background: rgba(37,99,235,.12); } /* ========================= UNIVERSITÀ — look moderno (NUOVO) Classi usate dal menu: univ-* ========================= */ /* contenitore interno scuole */ .univ-school-inner{ border-left: 1px solid var(--app-border); padding-left: .75rem !important; } /* bottoni scuola/sezione “card-like” */ .univ-section-btn, .univ-school-btn{ border: 1px solid var(--app-border); box-shadow: 0 1px 0 rgba(0,0,0,.04); transition: transform .12s ease, background .12s ease, border-color .12s ease; background: rgba(255,255,255,.75); } body.theme-dark .univ-section-btn, body.theme-dark .univ-school-btn{ background: rgba(0,0,0,.15); } .univ-section-btn:hover, .univ-school-btn:hover{ transform: translateY(-1px); background: rgba(15,23,42,.06); } body.theme-dark .univ-section-btn:hover, body.theme-dark .univ-school-btn:hover{ background: rgba(255,255,255,.06); } .univ-section-title{ display: inline-flex; align-items: center; gap: .55rem; } .univ-section-dot, .univ-school-dot{ width: 8px; height: 8px; border-radius: 999px; background: rgba(15,23,42,.22); } body.theme-dark .univ-section-dot, body.theme-dark .univ-school-dot{ background: rgba(255,255,255,.25); } /* chevron disegnato in CSS (non icona) */ .univ-chevron{ width: 10px; height: 10px; border-right: 2px solid rgba(15,23,42,.45); border-bottom: 2px solid rgba(15,23,42,.45); transform: rotate(45deg); transition: transform .18s ease; margin-left: .5rem; } body.theme-dark .univ-chevron{ border-right-color: rgba(255,255,255,.50); border-bottom-color: rgba(255,255,255,.50); } .univ-section-btn[aria-expanded="true"] .univ-chevron, .univ-school-btn[aria-expanded="true"] .univ-chevron{ transform: rotate(-135deg); } .univ-sublist{ padding-top: .25rem; padding-bottom: .25rem; } /* leaf migliorato */ .univ-leaf{ position: relative; display: flex; align-items: center; gap: .55rem; border: 1px solid transparent; transition: background .12s ease, border-color .12s ease, transform .12s ease; } .univ-leaf:hover{ background: rgba(15,23,42,.06); border-color: rgba(15,23,42,.10); transform: translateX(2px); } body.theme-dark .univ-leaf:hover{ background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); } .univ-leaf-dot{ width: 6px; height: 6px; border-radius: 999px; background: rgba(15,23,42,.18); flex: 0 0 auto; } body.theme-dark .univ-leaf-dot{ background: rgba(255,255,255,.22); } .univ-leaf-active{ color: var(--app-primary) !important; background: rgba(37,99,235,.12) !important; border-color: rgba(37,99,235,.2) !important; /* evita doppio “accent” (perché sopra c’è app-leaf-active box-shadow) */ box-shadow: none !important; } body.theme-dark .univ-leaf-active{ color: var(--app-primary) !important; background: rgba(59,130,246,.18) !important; border-color: rgba(59,130,246,.25) !important; } /* barretta accent a sinistra (più “premium”) */ .univ-leaf-active::before{ content: ""; position: absolute; left: -2px; top: 8px; bottom: 8px; width: 3px; border-radius: 999px; background: var(--app-primary); } /* item “nessun ciclo” */ .univ-muted-item{ border: 1px dashed rgba(15,23,42,.18); background: rgba(255,255,255,.65); color: var(--app-muted); } body.theme-dark .univ-muted-item{ border-color: rgba(255,255,255,.18); background: rgba(0,0,0,.12); } /* rimuovi i puntini nel sottomenu Università */ #menu_universita .univ-leaf-dot{ display: none !important; } /* ========================================================= MENU STYLE (look tipo screenshot: grigi + attivo blu) ========================================================= */ :root{ --menu-section-bg: #f6f7fb; --menu-active-bg: #dbeafe; --menu-active-border: #bfdbfe; --menu-hover-bg: #e9f1ff; --menu-accent: #1d4ed8; --menu-text: #111827; --menu-muted: #9ca3af; } /* stesso font, niente grassetto nel menu */ .app-sidebar .fw-semibold{ font-weight: 400 !important; } .app-elegant{ font-family: inherit !important; letter-spacing: 0 !important; } /* rimuove frecce e puntini nel menu a sinistra */ .app-sidebar .app-chevron, .app-sidebar .univ-chevron{ display: none !important; } .app-sidebar .bi-dot{ display: none !important; } .app-sidebar .univ-leaf-dot, .app-sidebar .univ-school-dot, .app-sidebar .univ-section-dot{ display: none !important; } .app-sidebar .univ-section-icon{ font-size: 1rem; width: 1.1rem; text-align: center; } .app-section-btn, .univ-section-btn, .univ-school-btn{ background: var(--menu-section-bg) !important; border: 0 !important; border-radius: 12px !important; box-shadow: none !important; color: var(--menu-text) !important; font-weight: 400 !important; } .app-section-btn:hover, .univ-section-btn:hover, .univ-school-btn:hover{ background: var(--menu-hover-bg) !important; } .app-section-btn i, .app-section-btn .bi{ color: var(--menu-accent); } .app-chevron{ color: var(--menu-accent); opacity: 1; } .univ-chevron{ border-right-color: var(--menu-accent); border-bottom-color: var(--menu-accent); } .app-submenu .nav-link, .app-navlink, .app-leaf, .univ-leaf{ color: var(--menu-text) !important; background: transparent !important; border: 1px solid transparent !important; border-radius: 12px !important; font-weight: 400 !important; padding: 10px 12px !important; } .app-submenu .nav-link:hover, .app-navlink:hover, .app-leaf:hover, .univ-leaf:hover{ color: var(--menu-text) !important; background: var(--menu-hover-bg) !important; transform: none !important; } .app-submenu .nav-link.app-navlink-active, .app-navlink-active, .app-leaf-active, .univ-leaf-active{ color: var(--menu-accent) !important; background: var(--menu-active-bg) !important; border-color: var(--menu-active-border) !important; box-shadow: none !important; font-weight: 400 !important; } /* forza evidenza attivo nel menu sinistro */ .app-sidebar .app-navlink-active, .app-sidebar .app-submenu .nav-link.app-navlink-active, .app-sidebar .app-leaf-active, .app-sidebar .univ-leaf-active{ color: var(--menu-accent) !important; background: var(--menu-active-bg) !important; border-color: var(--menu-active-border) !important; } .app-sidebar .app-submenu .nav-link.app-leaf-active, .app-sidebar .app-submenu .nav-link.univ-leaf-active{ color: var(--menu-accent) !important; background: var(--menu-active-bg) !important; border-color: var(--menu-active-border) !important; } /* niente barretta a sinistra sull'attivo */ .app-leaf-active::before{ content: none !important; } /* rimuove il pallino delle voci Universita (scuole + leaf) */ .univ-leaf-dot, .univ-school-dot, .univ-section-dot{ display: none !important; } /* tono testo sezioni scuola */ .univ-section-title span{ color: var(--menu-text) !important; font-weight: 400 !important; } /* ========================= AUTH / PAGINE STANDALONE ========================= */ .auth-page{ min-height: 100vh; margin: 0; padding: 1.5rem; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #0f172a 0%, #1e293b 35%, #334155 70%, #475569 100%); color: var(--app-text); overflow-x: hidden; overflow-y: auto; } .auth-page::before{ content: ""; position: fixed; inset: -50%; background: radial-gradient(ellipse at 20% 30%, rgba(37, 99, 235, 0.15) 0%, transparent 50%), radial-gradient(ellipse at 80% 70%, rgba(139, 92, 246, 0.12) 0%, transparent 45%), radial-gradient(ellipse at 50% 50%, rgba(6, 182, 212, 0.08) 0%, transparent 60%); pointer-events: none; z-index: 0; } .auth-card, .login-card, .reset-card{ position: relative; z-index: 1; width: 100%; max-width: 440px; background: rgba(255, 255, 255, .98); border: 1px solid rgba(255, 255, 255, .12); border-radius: 24px; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .35); padding: 2.25rem; } .auth-logo, .logo-wrap{ text-align: center; margin-bottom: 1.25rem; } .auth-logo img, .logo-wrap img{ max-width: 180px; max-height: 58px; height: auto; } .auth-card h1, .login-card h1, .reset-card h1{ margin: 0 0 .5rem; color: #1e293b; font-size: 1.35rem; font-weight: 700; text-align: center; } .auth-sub, .login-card .sub, .reset-card .sub{ color: var(--app-muted); font-size: .92rem; line-height: 1.45; text-align: center; margin-bottom: 1.5rem; } .auth-card .form-control, .login-card .form-control, .login-card input[type="email"], .reset-card .form-control{ width: 100%; padding: .8rem 1rem; border: 1.5px solid #e2e8f0; border-radius: 12px; font-size: 1rem; } .auth-card .form-control:focus, .login-card .form-control:focus, .login-card input[type="email"]:focus, .reset-card .form-control:focus{ border-color: var(--app-primary); box-shadow: 0 0 0 4px rgba(37, 99, 235, .15); } .auth-submit, .login-card button[type="submit"], .reset-card .btn-primary{ width: 100%; padding: .9rem 1rem; border: none; border-radius: 12px; background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%); color: #fff; font-weight: 700; } .auth-back, .login-card a.back, .reset-card a.back{ display: block; margin-top: 1.25rem; color: var(--app-primary); text-align: center; text-decoration: none; font-size: .92rem; } .auth-back:hover, .login-card a.back:hover, .reset-card a.back:hover{ text-decoration: underline; } /* === Chronos: mese corrente nel menu Turni === */ .app-sidebar .turni-month-current .univ-section-title span, .app-sidebar .turni-month-current i{ color: #0d6efd !important; } /* === Chronos: mesi menu Turni senza icone/pallini === */ .app-sidebar .turni-month-no-icon .univ-section-dot, .app-sidebar .turni-month-no-icon .univ-section-icon{ display: none !important; } .app-sidebar .turni-month-no-icon .univ-section-title{ gap: 0 !important; }