:root{ --bg: #f4f6f9; --text:#222; --card:#fff; --muted:#6c757d; } html[data-theme="dark"]{ --bg: #0f1720; --text:#e6eef6; --card:#0b1220; --muted:#9aa4b2; } body{background:var(--bg); color:var(--text);} .card{background:var(--card);} .barcode-img{max-width:140px; background:#fff; padding:8px; border-radius:8px;} .barcode-popup{display:none; position:fixed; inset:0; background:rgba(0,0,0,0.7); justify-content:center; align-items:center; z-index:9999;} .barcode-popup img{max-width:80%; background:#fff; padding:12px; border-radius:8px;} .badge-alert{position:absolute; top:8px; right:8px; background:#dc3545; color:#fff; border-radius:999px; padding:4px 7px; font-size:0.75rem;} .small-muted{color:var(--muted); font-size:0.9rem;} .navbar .btn-outline-light{border-color:rgba(255,255,255,0.35); color:#fff;} .row-updated { animation: rowHighlight 2s ease-out; } @keyframes rowHighlight { from { background-color: rgba(25, 135, 84, 0.35); } to { background-color: inherit; } } /* ================================ TEMA SCURO COMPLETO Attivo quando: ================================ */ html[data-theme="dark"] body { background-color: #121212; color: #f5f5f5; } /* Navbar / header generali */ html[data-theme="dark"] .navbar, html[data-theme="dark"] header { background-color: #1e1e1e; color: #f5f5f5; border-bottom: 1px solid #333; } html[data-theme="dark"] .navbar .nav-link, html[data-theme="dark"] .navbar-brand { color: #f5f5f5 !important; } html[data-theme="dark"] .navbar .nav-link:hover { color: #ffffff !important; } /* Card generiche (dashboard, profili, malattie, vaccini, ecc.) */ html[data-theme="dark"] .card { background-color: #1e1e1e; border-color: #333; color: #f5f5f5; } html[data-theme="dark"] .card-header { background-color: #262626; border-bottom-color: #333; color: #f5f5f5; } html[data-theme="dark"] .card-body { color: #f5f5f5; } /* Titolo delle card: nomi degli animali, ecc. */ html[data-theme="dark"] .card-title, html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3, html[data-theme="dark"] h4 { color: #ffffff; } /* Dashboard: card evidenziate per malattie in corso, ecc. */ html[data-theme="dark"] .border-warning-subtle.bg-warning-subtle { /* sfondo meno “giallo sparato” in dark mode */ background-color: #3b2f00 !important; border-color: #f0ad4e !important; } /* Tabelle (vaccini, malattie, ecc.) */ html[data-theme="dark"] .table { color: #f5f5f5; background-color: #1e1e1e; } html[data-theme="dark"] .table tbody tr { border-color: #333; } html[data-theme="dark"] .table thead { background-color: #262626; color: #f5f5f5; } /* righe "pericolose" (es. vaccini scaduti) */ html[data-theme="dark"] .table-danger { background-color: #4a1111 !important; color: #f5c6cb !important; } /* righe in scadenza (arancione) */ html[data-theme="dark"] .table-warning { background-color: #4a3b11 !important; color: #ffe8a1 !important; } /* righe ok / aggiornate */ html[data-theme="dark"] .table-success { background-color: #114a22 !important; color: #c3e6cb !important; } /* Pulsanti: i colori di Bootstrap reggono bene anche in dark mode, ma rendiamo i contorni più leggibili su sfondo scuro */ html[data-theme="dark"] .btn-outline-secondary { border-color: #aaa; color: #ddd; } html[data-theme="dark"] .btn-outline-secondary:hover { border-color: #fff; color: #fff; } /* Badges (stati vaccini, notifiche, ecc.) */ html[data-theme="dark"] .badge.bg-warning { background-color: #f0ad4e !important; color: #000000 !important; } html[data-theme="dark"] .badge.bg-danger { background-color: #d9534f !important; color: #ffffff !important; } html[data-theme="dark"] .badge.bg-success { background-color: #28a745 !important; color: #ffffff !important; } html[data-theme="dark"] .badge.bg-secondary { background-color: #6c757d !important; color: #ffffff !important; } /* Alert (info, warning, danger) */ html[data-theme="dark"] .alert-info { background-color: #0c5460; color: #d1ecf1; border-color: #0c5460; } html[data-theme="dark"] .alert-warning { background-color: #856404; color: #fff3cd; border-color: #856404; } html[data-theme="dark"] .alert-danger { background-color: #721c24; color: #f8d7da; border-color: #721c24; } /* Input, select, textarea */ html[data-theme="dark"] .form-control, html[data-theme="dark"] .form-select, html[data-theme="dark"] textarea { background-color: #1e1e1e; color: #f5f5f5; border-color: #444; } html[data-theme="dark"] .form-control:focus, html[data-theme="dark"] .form-select:focus, html[data-theme="dark"] textarea:focus { background-color: #262626; color: #ffffff; border-color: #0d6efd; box-shadow: 0 0 0 0.15rem rgba(13,110,253,.25); } /* Testo di aiuto form */ html[data-theme="dark"] .form-text { color: #cccccc; } /* Link */ html[data-theme="dark"] a { color: #66b2ff; } html[data-theme="dark"] a:hover { color: #9bd1ff; } /* Popup immagine se lo usi anche altrove */ html[data-theme="dark"] #imageModal { background-color: #000000; } html[data-theme="dark"] #imageModalImg { box-shadow: 0 0 20px rgba(0,0,0,0.8); } /* Piccole icone/pittogrammi in card */ html[data-theme="dark"] .text-muted { color: #b3b3b3 !important; } /* ------------------------------------------- CARD ANIMALI - NEUMORFISMO (LIGHT MODE) ------------------------------------------- */ .dashboard-card { background: #f5f5f5; border-radius: 20px; padding: 20px; border: none; transition: all 0.25s ease; box-shadow: 8px 8px 18px rgba(0,0,0,0.18), -8px -8px 18px rgba(255,255,255,0.6); } .dashboard-card:hover { transform: translateY(-4px); box-shadow: 12px 12px 22px rgba(0,0,0,0.22), -12px -12px 22px rgba(255,255,255,0.55); } /* immagine avatar */ .dashboard-card img.avatar { border-radius: 50%; width: 120px; height: 120px; object-fit: cover; box-shadow: inset 4px 4px 8px rgba(0,0,0,0.3), inset -4px -4px 8px rgba(255,255,255,0.6); } /* ------------------------------------------- CARD ANIMALI - NEUMORFISMO (DARK MODE) ------------------------------------------- */ html[data-theme="dark"] .dashboard-card { background: #1c1c1c; border-radius: 20px; border: none; box-shadow: 6px 6px 14px rgba(0,0,0,0.7), -6px -6px 14px rgba(60,60,60,0.25); transition: all 0.25s ease; } html[data-theme="dark"] .dashboard-card:hover { transform: translateY(-4px); box-shadow: 10px 10px 20px rgba(0,0,0,0.75), -10px -10px 20px rgba(60,60,60,0.2); } html[data-theme="dark"] .dashboard-card img.avatar { box-shadow: inset 4px 4px 8px rgba(0,0,0,0.8), inset -4px -4px 8px rgba(60,60,60,0.3); } /* Forza sfondo bianco nel popup immagini anche in dark mode */ html[data-theme="dark"] #imageModal { background: #ffffff !important; } /* Fondo trasparente */ #imageModal { display: none; position: fixed; z-index: 5000; inset: 0; background: transparent !important; justify-content: center; align-items: center; } /* Contenitore del codice a barre */ #imageModalBox { background: #ffffff; /* sfondo bianco */ padding: 20px; /* spazio attorno al barcode */ border-radius: 12px; /* angoli arrotondati */ border: 3px solid #ffffff; /* cornice bianca */ display: flex; justify-content: center; align-items: center; } /* Immagine massimizzata */ #imageModalImg { max-width: 80vw; max-height: 60vh; display: block; } /* DARK MODE – sfondo sempre bianco dietro al codice a barre */ [data-bs-theme="dark"] .profile-barcode, [data-bs-theme="dark"] img.barcode { background: #ffffff !important; padding: 10px; border-radius: 10px; border: 2px solid #ffffff; } /* ========================================== DASHBOARD – CARD ANIMALI NEUMORFICHE ========================================== */ .dashboard-card { background: #f5f5f5; border-radius: 20px; padding: 20px; border: none; transition: all 0.25s ease; box-shadow: 8px 8px 18px rgba(0,0,0,0.18), -8px -8px 18px rgba(255,255,255,0.6); } .dashboard-card:hover { transform: translateY(-4px); box-shadow: 12px 12px 22px rgba(0,0,0,0.22), -12px -12px 22px rgba(255,255,255,0.55); } /* Avatar nelle card dashboard */ .dashboard-card img.avatar { border-radius: 50%; width: 120px; height: 120px; object-fit: cover; cursor: pointer; box-shadow: inset 4px 4px 8px rgba(0,0,0,0.25), inset -4px -4px 8px rgba(255,255,255,0.6); } /* Barcode nelle card dashboard */ .dashboard-card .barcode-img { max-width: 100%; height: auto; cursor: pointer; } /* Glow per malattie in corso */ .dashboard-card.malattia-in-corso { box-shadow: 0 0 15px rgba(255,193,7,0.85), 6px 6px 14px rgba(0,0,0,0.3), -6px -6px 14px rgba(255,255,255,0.4) !important; } /* Glow per vaccini da attenzionare */ .dashboard-card.vaccini-in-scadenza { box-shadow: 0 0 20px rgba(255,0,0,0.75), 6px 6px 14px rgba(0,0,0,0.3), -6px -6px 14px rgba(255,255,255,0.4) !important; } /* Cornice per specie (se riconosciuta) */ .dashboard-card.cane { border-left: 8px solid #0d6efd; } .dashboard-card.gatto { border-left: 8px solid #d63384; } .dashboard-card.coniglio { border-left: 8px solid #198754; } /* ========================================== PROFILO ANIMALE – LAYOUT ========================================== */ .profile-card { border-radius: 20px; } /* Avatar nel profilo */ .profile-avatar { width: 150px; height: 150px; object-fit: cover; border-radius: 50%; cursor: pointer; } /* Barcode nel profilo */ .profile-barcode { max-width: 220px; cursor: pointer; } /* ========================================== MODAL IMMAGINI (AVATAR + BARCODE) – COMUNE A DASHBOARD E PROFILO ========================================== */ #imageModal { display: none; position: fixed; z-index: 5000; inset: 0; background: transparent; /* overlay trasparente */ justify-content: center; align-items: center; } #imageModal.show { display: flex; } #imageModalBox { background: #ffffff; padding: 20px; border-radius: 12px; border: 3px solid #ffffff; display: flex; justify-content: center; align-items: center; } #imageModalImg { max-width: 80vw; max-height: 60vh; display: block; } /* ========================================== DARK MODE – CORREZIONI SPECIFICHE ========================================== */ /* Assicuriamoci che il modal resti trasparente anche in dark */ html[data-theme="dark"] #imageModal { background: transparent !important; } /* Il box dell'immagine resta bianco anche in dark */ html[data-theme="dark"] #imageModalBox { background: #ffffff !important; border-color: #ffffff !important; } /* Riquadro bianco attorno al barcode in dark mode (profilo) */ html[data-theme="dark"] .profile-barcode { background: #ffffff !important; padding: 10px; border-radius: 10px; border: 2px solid #ffffff; } /* Riquadro bianco attorno al barcode nelle card dashboard in dark mode */ html[data-theme="dark"] .barcode-img { background: #ffffff !important; padding: 10px; border-radius: 10px; border: 2px solid #ffffff; } /* (Se non l'avevi già) nomi animali ben leggibili in dark mode */ html[data-theme="dark"] .card-title { color: #ffffff !important; } /* ========== LAYOUT GENERALE PAGINE SEMPLICI (FORM / DETTAGLIO) ========== */ .page-wrapper { max-width: 900px; margin: 20px auto; padding: 0 15px; } /* Card semplice centrata (per form, pagine singole, ecc.) */ .form-card { max-width: 600px; margin: 20px auto; background: #ffffff; padding: 20px; border-radius: 12px; box-shadow: 0 2px 6px rgba(0,0,0,0.1); } /* Titolo pagina centrato */ .page-title { text-align: center; margin-top: 20px; margin-bottom: 10px; } /* Etichette e campi */ .form-card label { display: block; margin-top: 10px; font-weight: bold; } .form-card input, .form-card textarea, .form-card select { width: 100%; padding: 8px; margin-top: 5px; border: 1px solid #ccc; border-radius: 5px; } /* Pulsante principale form */ .form-card button[type="submit"], .form-card .btn-primary { margin-top: 15px; padding: 10px 15px; background: #007bff; border: none; border-radius: 5px; color: #fff; font-size: 16px; cursor: pointer; } .form-card button[type="submit"]:hover, .form-card .btn-primary:hover { background: #0056b3; } /* Pulsante di azione positivo */ .btn-success-custom { background: #28a745; color: #fff; border-radius: 5px; padding: 8px 14px; border: none; cursor: pointer; text-decoration: none; display: inline-block; } .btn-success-custom:hover { background: #218838; } /* Pulsante "indietro" / secondario */ .btn-back, .btn-secondary-custom { background: #6c757d; color: #fff; padding: 8px 14px; border-radius: 5px; text-decoration: none; display: inline-block; border: none; cursor: pointer; margin-top: 10px; } .btn-back:hover, .btn-secondary-custom:hover { background: #5a6268; } /* Messaggi di errore / info semplici */ .msg-error { color: #dc3545; text-align: center; } .msg-info { color: #17a2b8; text-align: center; } /* Tabelle (vaccini, malattie) */ .table-basic { width: 100%; border-collapse: collapse; margin-bottom: 20px; } .table-basic th, .table-basic td { padding: 8px; border: 1px solid #ccc; text-align: left; vertical-align: middle; } /* Evidenziazione vaccini in scadenza / scaduti */ .vaccino-scadenza { background: #f8d7da; /* rosso chiaro */ } .vaccino-scaduto { background: #f5c6cb; /* rosso più forte */ } /* In dark mode, sfondo più adatto */ html[data-theme="dark"] .form-card { background: #1e1e1e; box-shadow: 0 2px 8px rgba(0,0,0,0.6); } html[data-theme="dark"] .form-card label, html[data-theme="dark"] .form-card h2, html[data-theme="dark"] .form-card h1 { color: #ffffff; } html[data-theme="dark"] .form-card input, html[data-theme="dark"] .form-card textarea, html[data-theme="dark"] .form-card select { background-color: #1e1e1e; color: #f5f5f5; border-color: #444; } /* (Già aggiunte prima ma le ricapitoliamo per coerenza) */ /* Dashboard card, profilo, modal immagini, dark-mode fix barcode ecc. SONO GIÀ QUI */ .animal-vet { margin-top: -4px; margin-bottom: 8px; font-size: 0.9rem; opacity: 0.9; color: var(--text-secondary); } html[data-theme="dark"] .animal-vet { color: #ddd; } /* Ombreggiatura per sesso (Maschio/Femmina) */ .dashboard-card.sex-male { box-shadow: 0 0 20px 3px rgba(0, 123, 255, 0.5); /* azzurro */ } .dashboard-card.sex-female { box-shadow: 0 0 20px 3px rgba(255, 105, 180, 0.55); /* rosa tipo "hotpink" */ } /* In dark mode leggermente più intensa per staccare dallo sfondo */ html[data-theme="dark"] .dashboard-card.sex-male { box-shadow: 0 0 10px 3px rgba(0, 123, 255, 0.7); } html[data-theme="dark"] .dashboard-card.sex-female { box-shadow: 0 0 10px 3px rgba(255, 105, 180, 0.8); } /* ------------------------------------------------------- PROFILO ANIMALE – FIX SFONDO TAB IN DARK MODE ---------------------------------------------------------*/ html[data-theme="dark"] .tab-content { background: #1f1f1f !important; /* sfondo scuro, uniforme */ color: #ffffff !important; /* testo bianco */ border-radius: 10px; padding: 15px; } /* Singole card malattia / vaccino */ html[data-theme="dark"] .malattia, html[data-theme="dark"] .vaccino { background: #2a2a2a !important; /* scuro, ma distinguibile dal fondo */ border: 1px solid #444 !important; color: #fff !important; } /* Malattia in corso = variante gialla leggibile */ html[data-theme="dark"] .malattia.in-corso { background: #4a3c00 !important; /* giallo molto scuro */ border-left: 5px solid #e0b000 !important; } /* Vaccino in scadenza = variante rossa leggibile */ html[data-theme="dark"] .vaccino.in-scadenza { background: #5a1d1d !important; border-left: 5px solid #d9534f !important; } /* --------------------------------------- PROFILO ANIMALE – LAYOUT & HEALTH DASH ----------------------------------------*/ /* Wrapper generale profilo (usa la grid bootstrap ma rifiniamo) */ .profile-card { border-radius: 18px; box-shadow: 10px 10px 20px rgba(0,0,0,0.08), -8px -8px 18px rgba(255,255,255,0.9); background: #f7f7f7; } html[data-theme="dark"] .profile-card { background: #181818; box-shadow: 10px 10px 25px rgba(0,0,0,0.8), -8px -8px 20px rgba(255,255,255,0.03); } /* Avatar nel profilo */ .profile-avatar { width: 140px; height: 140px; border-radius: 50%; object-fit: cover; border: 3px solid rgba(0,0,0,0.05); } html[data-theme="dark"] .profile-avatar { border-color: rgba(255,255,255,0.12); } /* Barcode nel profilo */ .profile-barcode { max-width: 100%; height: auto; background: #ffffff; padding: 8px 10px; border-radius: 12px; } /* HEALTH SUMMARY (mini dashboard) */ .health-summary { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 1rem; } .health-stat { flex: 1 1 120px; padding: 10px 12px; border-radius: 14px; text-align: center; font-size: 0.9rem; background: #f7f7f7; box-shadow: 6px 6px 12px rgba(0,0,0,0.06), -4px -4px 10px rgba(255,255,255,0.9); } .health-stat strong { display: block; font-size: 1.6rem; margin-bottom: 2px; } .health-stat span.label { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.8; } /* Colori stato */ .health-stat--ok { border: 1px solid rgba(40,167,69,0.28); } .health-stat--warn { border: 1px solid rgba(255,193,7,0.6); } .health-stat--bad { border: 1px solid rgba(220,53,69,0.7); } /* Dark mode health summary */ html[data-theme="dark"] .health-stat { background: #202020; box-shadow: 6px 6px 16px rgba(0,0,0,0.9), -4px -4px 10px rgba(255,255,255,0.02); color: #f1f1f1; } /* TAB AREA */ html[data-theme="dark"] .card .nav-tabs .nav-link { color: #bbbbbb; } html[data-theme="dark"] .card .nav-tabs .nav-link.active { color: #ffffff; } /* Contenuto tab */ .tab-pane { margin-top: 0.75rem; } /* CARD MALATTIE / VACCINI */ .disease-card, .vaccine-card { border-radius: 14px; padding: 12px 14px; margin-bottom: 10px; background: #f9f9f9; border: 1px solid #e1e1e1; box-shadow: 4px 4px 10px rgba(0,0,0,0.04), -3px -3px 8px rgba(255,255,255,0.9); } .disease-card h5, .vaccine-card h5 { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 1rem; } .disease-card small, .vaccine-card small { font-size: 0.8rem; } /* Stati speciali */ .disease-card--active { border-left: 5px solid #ffc107; background: #fff8e1; } .vaccine-card--soon { border-left: 5px solid #fd7e14; background: #fff3e0; } html[data-theme="dark"] .disease-card, html[data-theme="dark"] .vaccine-card { background: #202020; border: 1px solid #3a3a3a; box-shadow: 4px 4px 14px rgba(0,0,0,0.9), -3px -3px 10px rgba(255,255,255,0.02); color: #f3f3f3; } html[data-theme="dark"] .disease-card--active { background: #3d3100; border-left-color: #e0b000; } html[data-theme="dark"] .vaccine-card--soon { background: #5a2c00; border-left-color: #fd7e14; } /* Badge piccoli */ .badge-soft { border-radius: 999px; padding: 3px 9px; font-size: 0.75rem; } /* TESTO MUTED IN DARK MODE */ html[data-theme="dark"] .text-muted { color: #b3b3b3 !important; }