/* [BLOCK_CSS_GLOBAL] - Body, Html e Layout base */
body, html {
overflow: hidden !important;
height: 100% !important;
margin: 0;
padding: 0;
background-color: #ffffff !important;
font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
.main-container {
display: flex;
flex-direction: column;
margin-top: 55px;
height: calc(100vh - 65px);
padding: 12px;
box-sizing: border-box;
background-color: #ffffff;
}
/* [BLOCK_CSS_COMPONENTS] - Bottoni e stili specifici */
.btn-header-fix {
height: 31px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 10px !important;
}
/* [BLOCK_CSS_GRID_STYLE] - Stile tabelle e colori testate */
.gv-style {
width: 100%;
border-collapse: collapse;
font-size: 0.75rem;
background-color: #ffffff !important;
color: #333333 !important;
}
.gv-style th {
background-color: #e9ecef !important;
color: #002d5a !important;
font-weight: 700;
padding: 4px 8px;
border: 1px solid #dee2e6;
position: sticky;
top: 0;
z-index: 10;
}
.gv-style td {
padding: 3px 8px;
border: 1px solid #dee2e6;
vertical-align: middle;
white-space: nowrap;
}
.selected-row, .gv-style tr.selected-row td {
background-color: #fff9c4 !important;
border-left: 4px solid #002d5a;
}
/* [BLOCK_CSS_GRID_CONTAINERS] - Titoli e colori delle sezioni */
.grid-title {
padding: 4px 12px;
font-weight: bold;
font-size: 0.75rem;
color: #ffffff !important;
background-color: #002d5a;
}
.header-info .grid-title {
background-color: #002d5a;
}
.header-patient .grid-title {
background-color: #28a745;
}
.header-narrative .grid-title {
background-color: #6c757d;
}
.header-reactions .grid-title {
background-color: #dc3545;
}
.header-drugs .grid-title {
background-color: #fd7e14;
}
/* [BLOCK_CSS_SPLIT_LAYOUT] - Definizione 45/55 */
.split-wrapper {
display: flex;
gap: 15px;
flex-grow: 1;
overflow: hidden;
}
.column-left {
width: 80%;
display: flex;
flex-direction: column;
}
.column-right {
width: 20%;
overflow-y: auto !important;
display: flex;
flex-direction: column;
gap: 8px;
padding-right: 5px;
}
.scrollable-grid {
overflow: auto;
max-height: 200px;
width: 100%;
}
.filter-bar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 6px 15px;
background: #ffffff;
border: 1px solid #dee2e6;
border-radius: 6px;
margin-bottom: 8px;
}
/* Stile Tab personalizzato */
.custom-eudamed-tabs {
border-bottom: 2px solid #dee2e6;
background: #f8f9fa;
}
.custom-eudamed-tabs .nav-link {
border: none;
color: #495057;
font-weight: 600;
padding: 12px 20px;
transition: all 0.2s;
}
.custom-eudamed-tabs .nav-link:hover {
background-color: #e9ecef;
border: none;
}
.custom-eudamed-tabs .nav-link.active {
background-color: #fff !important;
border-bottom: 3px solid #0d6efd !important;
color: #0d6efd !important;
}
.section-title {
font-size: 0.9rem;
font-weight: bold;
color: #495057;
margin-bottom: 10px;
padding-bottom: 5px;
border-bottom: 1px dashed #dee2e6;
text-transform: uppercase;
}
.scrollable-grid {
max-height: 350px;
overflow-y: auto;
border: 1px solid #eee;
border-radius: 4px;
}
/* Impedisce ai checkbox ASP.NET di rompere il layout Bootstrap */
.chk-export input {
margin-left: 0;
position: relative;
cursor: pointer;
}
.chk-export label {
display: none;
}
/* Nasconde etichette vuote generate da ASP */
/* Rimuove gli spazi extra generati da ASP.NET attorno ai checkbox */
.chk-export {
display: inline-block;
width: 20px;
height: 20px;
}
.chk-export input {
margin: 0 !important;
padding: 0 !important;
cursor: pointer;
width: 1.2rem;
height: 1.2rem;
}
/* Nasconde le label vuote che ASP.NET crea automaticamente */
.chk-export label {
display: none !important;
}
/* Centra il contenuto nella cella della GridView */
.align-middle td {
vertical-align: middle !important;
}
.form-check-input:checked {
background-color: #198754; /* Verde successo quando attivo */
border-color: #198754;
}
/* Rimuove il quadratino di default di ASP.NET dagli switch */
/* Stile base dello Switch (Spento) */
.form-switch .form-check-input,
.form-switch input[type="checkbox"] {
appearance: none !important;
-webkit-appearance: none !important;
width: 2.5em !important;
height: 1.25em !important;
background-color: #fff; /* Sfondo bianco */
/* Pallino Grigio quando è spento */
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23adb5bd'/%3e%3c/svg%3e") !important;
background-position: left center;
background-repeat: no-repeat;
border-radius: 2em;
border: 1px solid #ced4da;
transition: background-position .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
cursor: pointer;
}
/* Stato Acceso (Checked) */
.form-switch input[type="checkbox"]:checked {
background-color: #0d6efd !important; /* Blu Bootstrap classico */
border-color: #0d6efd !important;
background-position: right center !important;
/* Pallino Bianco quando è acceso */
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e") !important;
}
/* Rimuove l'alone blu (focus) se non ti serve, o lo rende più leggero */
.form-switch .form-check-input:focus {
box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
border-color: #86b7fe;
}
/* Compattazione per non uscire dallo schermo */
.compact-wizard-row {
font-size: 0.9rem;
}
/* Centra il checkbox nella cella */
.gvExportItems td:first-child {
text-align: center !important;
}
/* Rende il checkbox perfettamente centrato */
.chk-export {
display: flex !important;
align-items: center !important;
justify-content: center !important;
height: 100% !important;
width: 100% !important;
padding: 0 !important;
margin: 0 !important;
}
/* Dimensione coerente con Bootstrap */
.chk-export input[type="checkbox"] {
width: 18px !important;
height: 18px !important;
margin: 0 !important;
cursor: pointer;
}
/* Wrapper scrollabile TAB 1–2–3 */
.table-scroll-s {
max-height: 600px;
overflow-y: auto;
overflow-x: auto;
border: 1px solid #ddd;
}
/* Wrapper scrollabile TAB 4–5 (solo grid in basso) */
.table-scroll-d {
max-height: 500px;
overflow-y: auto;
overflow-x: auto;
border: 1px solid #ddd;
}
/* Evita margini tra le due grid nei tab 4–5 */
.table-scroll-s .table-scroll-d .gv-style {
margin-bottom: 0;
}
/* Tabella base */
.table-scroll-s .gv-style table,
.table-scroll-d .gv-style table {
border-collapse: separate;
border-spacing: 0;
width: max-content;
}
/* Celle */
.table-scroll-s .gv-style th,
.table-scroll-s .gv-style td,
.table-scroll-d .gv-style th,
.table-scroll-d .gv-style td {
padding: 4px 8px;
white-space: normal; /* Permette il wrap */
word-break: break-word; /* Evita sovrapposizioni */
line-height: 1.2; /* Densità compatta */
}
/* Sticky header */
.table-scroll-s .gv-style th,
.table-scroll-d .gv-style th {
position: sticky;
top: 0;
background: #f8f9fa;
z-index: 2;
}
/* Larghezze compatte per tutte le colonne visibili */
.table-scroll-s .gv-style th:nth-child(n+1),
.table-scroll-s .gv-style td:nth-child(n+1),
.table-scroll-d .gv-style th:nth-child(n+1),
.table-scroll-d .gv-style td:nth-child(n+1) {
min-width: 100px;
max-width: 300px;
}
/* === LARGHEZZE SPECIALIZZATE PER TIPO DI COLONNA === */
/* Colonne booleane (True/False) */
.table-scroll-s .gv-style th.boolean-col,
.table-scroll-s .gv-style td.boolean-col,
.table-scroll-d .gv-style th.boolean-col,
.table-scroll-d .gv-style td.boolean-col {
min-width: 40px;
max-width: 60px;
text-align: center;
}
/* Colonne codice/ID */
.table-scroll-s .gv-style th.code-col,
.table-scroll-s .gv-style td.code-col,
.table-scroll-d .gv-style th.code-col,
.table-scroll-d .gv-style td.code-col {
min-width: 80px;
max-width: 120px;
}
/* Colonne testuali */
.table-scroll-s .gv-style th.text-col,
.table-scroll-s .gv-style td.text-col,
.table-scroll-d .gv-style th.text-col,
.table-scroll-d .gv-style td.text-col {
min-width: 180px;
max-width: 350px;
}
/* Colonne mid */
.table-scroll-s .gv-style th.mid-col,
.table-scroll-s .gv-style td.mid-col,
.table-scroll-d .gv-style th.mid-col,
.table-scroll-d .gv-style td.mid-col {
min-width: 150px;
max-width: 200px;
}
/* Sfondo differente per i metadati del log */
.log-meta-col {
background-color: #f8f9fa !important; /* Grigio chiarissimo Bootstrap */
border-right: 1px solid #dee2e6 !important;
font-weight: 500;
}
/* Opzionale: un colore di testo diverso per l'operazione (es. Blu) */
.log-op-text {
color: #0d6efd;
font-weight: bold;
background-color: #f8f9fa !important;
}
/* Evidenzia i filtri attivi per aiutare l'utente */
.column-right .form-control:focus, .column-right .form-select:focus {
border-color: #0d6efd;
box-shadow: 0 0 0 0.25 mil rem rgba(13, 110, 253, 0.25);
}
/* Stile per il tasto reset */
.btn-outline-secondary:hover {
background-color: #6c757d;
color: white;
}
/* Permette al mouse di interagire con le icone anche se il link è disabled */
.nav-link.disabled i {
pointer-events: auto !important;
cursor: help; /* Cambia il cursore in un punto interrogativo per far capire che c'è un info */
}
/* [BLOCK_CSS_MAIL_GRID] - Gestione specifica Griglia Email (In entrata e Inviate) */
.mail-grid {
width: 100% !important;
table-layout: fixed !important;
border-collapse: collapse !important;
font-size: 0.85rem !important;
background-color: #ffffff !important;
}
.mail-grid th {
background-color: #e9ecef !important;
color: #002d5a !important;
font-weight: 700 !important;
padding: 6px 8px !important;
border-bottom: 2px solid #dee2e6 !important;
/* --- NUOVE PROPRIETÀ PER HEADER BLOCCATO --- */
position: sticky !important;
top: 0 !important; /* Blocca l'header all'inizio del contenitore scrollabile */
z-index: 10 !important; /* Assicura che l'header stia sopra le righe che scorrono */
box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1) !important; /* Opzionale: aggiunge un'ombra per separare meglio l'header */
}
.mail-grid td {
padding: 6px 8px !important;
vertical-align: middle !important;
border-bottom: 1px solid #f0f0f0 !important;
white-space: nowrap !important;
overflow: hidden !important;
}
/* --- COLONNE TECNICHE (Occhio, Allegato, ID) --- */
.col-icon, .col-button {
width: 40px !important;
text-align: center !important;
}
.col-attach {
width: 30px !important;
text-align: center !important;
}
.col-id {
width: 45px !important;
text-align: center !important;
}
/* --- COLONNE UTENTE / EMAIL --- */
.col-user {
width: 180px !important;
}
.col-user2 {
width: 240px !important;
}
.col-email {
width: 180px !important;
}
.col-email2 {
width: 240px !important;
}
/* --- DATA (Allineata a destra) --- */
.col-date {
width: 100px !important;
text-align: right !important;
padding-right: 12px !important;
}
/* --- OGGETTO (Flessibile) --- */
.col-oggetto {
width: auto !important;
}
/* --- STATO LETTURA (Griglia Sinistra) --- */
.mail-unseen {
font-weight: bold !important;
color: #0078d4 !important; /* Blu Outlook */
}
.mail-seen {
font-weight: normal !important;
color: #323130 !important;
}
/* --- SPINNER A TUTTA PAGINA --- */
.loading-overlay {
position: fixed !important; /* Forza la posizione rispetto alla finestra */
top: 0 !important;
left: 0 !important;
width: 100vw !important;
height: 100vh !important;
background-color: rgba(255, 255, 255, 0.85) !important;
z-index: 9999 !important; /* Sopra a tutto */
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
}
/* Utility per troncare il testo */
.text-truncate-mail {
display: block !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
.d-none {
display: none !important;
}
.badge.border {
border-width: 2px !important; /* Rende il bordo più visibile */
font-weight: 500; /* Rende il testo leggermente più corposo */
}
.btn-refresh-header {
/* Colore dell'icona bianco brillante */
color: #ffffff !important;
/* Sfondo con gradiente leggero per dare profondità */
background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.1) 100%);
/* Bordo bianco semitrasparente che risalta sul blu */
border: 1.5px solid rgba(255, 255, 255, 0.4) !important;
/* Ombra per sollevare il pulsante dallo sfondo */
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
width: 34px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
text-decoration: none !important;
}
.btn-refresh-header:hover {
/* Colore più intenso al passaggio */
background: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.2) 100%);
border-color: rgba(255, 255, 255, 0.8) !important;
/* Effetto bagliore (Glow) */
box-shadow: 0 0 12px rgba(255, 255, 255, 0.4);
/* Rotazione e leggero ingrandimento */
transform: rotate(180deg) scale(1.1);
}
.btn-refresh-header:active {
transform: scale(0.9) rotate(180deg);
}
/* Stile base per entrambi (già esistente) */
.btn-refresh-header {
color: #ffffff !important;
width: 34px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: all 0.3s ease;
text-decoration: none !important;
border: 1.5px solid rgba(255, 255, 255, 0.4) !important;
}
/* Stile specifico per il tasto RESET (Rosso sfumato) */
.btn-reset-red {
/* Sfondo rosso molto tenue di base */
background: rgba(220, 53, 69, 0.2) !important;
border-color: rgba(220, 53, 69, 0.5) !important;
}
.btn-reset-red:hover {
/* Sfumatura rossa accesa all'hover */
background: linear-gradient(135deg, #dc3545 0%, #a71d2a 100%) !important;
border-color: #ffffff !important;
box-shadow: 0 0 10px rgba(220, 53, 69, 0.5);
transform: scale(1.1);
}
/* Stile specifico per il tasto APPLICA (Blu/Bianco standard) */
.btn-refresh-header:not(.btn-reset-red) {
background: rgba(255, 255, 255, 0.15);
}
.btn-refresh-header:not(.btn-reset-red):hover {
background: rgba(255, 255, 255, 0.35);
transform: rotate(180deg) scale(1.1);
}