/* --- TEMA E LAYOUT GLOBALE --- */
:root {
    --scp-red: #CC0000;
    --scp-red-light: #FF4444;
    --scp-red-dark: #990000;
    --text-dark: #333333;
    --text-medium: #555555;
    --bg-light-gray: #ececec;
    --bg-off-white: #F8F8F8;
    --border-gray: #CCCCCC;
    --color-success: #2f855a;
    --color-danger: #c53030;
    --color-warning: #FFBF00;
}
* { box-sizing: border-box; }
::selection { background-color: var(--scp-red); color: #FFFFFF; }
body { font-family: 'Inter', sans-serif; background-color: #f7f7f7; color: var(--text-dark); line-height: 1.6; margin: 0; padding: 0; }
#page-content-wrapper { padding-top: 80px; }

/* --- BARRA SUPERIORE --- */
.search-header { position: fixed; top: 0; left: 0; width: 100%; background-color: #1a1a1a; color: white; padding: 10px 25px; z-index: 1000; border-bottom: 3px solid var(--scp-red); box-shadow: 0 4px 10px rgba(0,0,0,0.3); }
.search-header-content { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.header-logo-link { display: flex; align-items: center; gap: 15px; text-decoration: none; color: white; flex-shrink: 0; }
.header-logo-img { height: 40px; width: auto; }
.header-title-text { font-family: 'Montserrat', sans-serif; font-weight: 600; letter-spacing: 0.5px; font-size: 1rem; white-space: nowrap; }

.header-right-group { display: flex; align-items: center; gap: 15px; flex-grow: 1; justify-content: flex-end; }
.header-search-form { display: flex; align-items: center; background-color: #333; border: 1px solid #555; border-radius: 6px; overflow: hidden; flex-grow: 1; max-width: 400px; }
#header-search-input { border: none; background: transparent; color: white; padding: 8px 12px; font-family: 'Inter', sans-serif; font-size: 16px; outline: none; width: 100%; }
#header-search-input::placeholder { color: #999; }
.search-button { background-color: var(--scp-red-dark); color: white; border: none; border-left: 1px solid #555; padding: 8px 12px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background-color 0.3s ease; }
.search-button:hover { background-color: var(--scp-red); }
.lang-switcher { display: flex; gap: 8px; align-items: center; }
.lang-flag { width: 24px; height: auto; cursor: pointer; border: 2px solid transparent; border-radius: 4px; transition: all 0.2s ease; object-fit: cover; aspect-ratio: 4/3; }
.lang-flag:hover { opacity: 0.8; }


/* --- MODALE DI RICERCA --- */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.85); z-index: 2000; display: flex; justify-content: center; align-items: center; padding: 20px; }
.modal-content { background-color: var(--bg-light-gray); padding: 20px; border-radius: 12px; border: 2px solid var(--scp-red-dark); width: 100%; max-width: 900px; height: 90vh; display: flex; flex-direction: column; position: relative; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
.modal-close {
    background: none;
    border: none;
    font-size: 2.5rem;
    line-height: 1;
    color: var(--text-dark);
    cursor: pointer;
    position: absolute;
    top: 10px; right: 15px;
    transition: color 0.3s ease, transform 0.2s ease;
    padding: 0; /* Add this for better alignment */
}.modal-close:hover { color: var(--scp-red); transform: scale(1.1); }
.modal-results-counter {
    position: absolute;
    top: 22px;
    left: 20px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-medium);
}
.modal-search-box {
    display: flex; /* This is the key change */
    align-items: center;
    gap: 15px; /* Adds space between the input and the button */
    padding-bottom: 15px;
    border-bottom: 2px solid var(--border-gray);
    margin-bottom: 15px;
    margin-top: 40px; /* Add this line */
}#modal-search-input { width: 100%; padding: 12px 15px; font-size: 1.2rem; border: 1px solid var(--border-gray); border-radius: 6px; outline-color: var(--scp-red); }
#modal-results-container { overflow-y: auto; flex-grow: 1; padding-right: 10px; }
.search-result-item { background-color: var(--bg-off-white); border-left: 4px solid var(--scp-red-dark); border-radius: 8px; padding: 1rem; margin-bottom: 1rem; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.search-result-item:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
.search-result-item .division, .search-result-item .department { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 0.8rem; text-transform: uppercase; }
.search-result-item .division { color: var(--scp-red-light); }
.search-result-item .department { color: var(--scp-red-dark); }
.search-result-item .code { font-size: 0.8rem; color: var(--scp-red-dark); }
.search-result-item .name { font-size: 1.2rem; font-weight: 700; margin: 0.5rem 0; }
.search-result-item p { font-size: 0.9rem; margin-bottom: 0; }
.search-result-item p b { color: var(--scp-red); }
.no-results { text-align: center; color: var(--text-medium); padding: 3rem 1rem; font-size: 1.1rem; }

/* --- STILI GENERALI --- */
.container { max-width: 1200px; width: 100%; margin: 20px auto; background-color: var(--bg-light-gray); padding: 40px; border-radius: 12px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); border: 1px solid var(--border-gray); }
hr { border: none; border-top: 2px solid var(--scp-red); margin: 3rem 0; }
h1, h2, h3, h4, h5 { font-family: 'Montserrat', sans-serif; font-weight: 700; }
h1 { color: var(--scp-red); font-size: 2.8rem; margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 2px; text-align: center;}
h2 { color: var(--scp-red-light); font-size: 2.2rem; margin-top: 2.5rem; margin-bottom: 1.25rem; padding-bottom: 0.6rem; border-bottom: 2px solid var(--scp-red-light); display: inline-block; }
h3 { color: var(--text-dark); font-size: 1.6rem; margin-top: 1.8rem; margin-bottom: 1rem; }
h4 { color: var(--scp-red-dark); font-size: 1.2rem; margin-bottom: 0.6rem; }
p { margin-bottom: 1rem; color: var(--text-medium); }
ul { list-style-position: outside; text-align: left; padding-left: 1.5rem; }
ul li { margin-bottom: 0.5rem; }
ul li b { display: inline-block; }
.page-header { margin-bottom: 2rem; text-align: center; }
.header-logo { width: 8rem; height: auto; margin: 0 auto 1rem auto; }
.subtitle { font-size: 1.25rem; color: var(--scp-red); }
.security-clearance-box { background-color: #333; color: var(--color-warning); border: 1px solid #555; border-radius: 6px; padding: 8px 15px; margin: 2rem auto 0 auto; font-family: 'Montserrat', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; display: inline-flex; align-items: center; gap: 10px; }
.section-card { background-color: var(--bg-off-white); padding: 25px; border-radius: 10px; border: 1px solid #E0E0E0; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); text-align: left; margin-bottom: 1.5rem; }
.info-box-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 1rem; }
.info-box { padding: 1rem; border-radius: 8px; border: 1px solid; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
.info-box.success { background-color: #f0fff4; border-color: #9ae6b4; color: var(--color-success); }
.info-box.danger { background-color: #fff5f5; border-color: #fecaca; color: var(--color-danger); }
.info-box strong { display: block; margin-bottom: 1rem; }
.rules-list { display: flex; flex-direction: column; gap: 0.75rem; }
.rule-item { display: flex; align-items: flex-start; gap: 0.75rem; text-align: left; }
.rule-icon { font-weight: bold; font-size: 1.2rem; line-height: 1.5; flex-shrink: 0; }
.rule-icon.increase { color: var(--color-success); }
.rule-icon.decrease { color: var(--color-danger); }
.rule-text { font-size: 0.9rem; line-height: 1.5; }
.footer-credits { font-size: 0.75rem; color: #666; margin-top: 3rem; border-top: 1px solid var(--border-gray); padding-top: 1rem; text-align: left; }
.footer-credits a { color: var(--scp-red); text-decoration: none; }
.footer-credits a:hover { text-decoration: underline; }
.game-intro-visual { display: flex; flex-direction: column; align-items: center; gap: 15px; margin-top: 20px; }
.game-intro-box { background-color: #EFEFEF; border: 1px solid #DDDDDD; border-radius: 8px; padding: 15px 20px; font-weight: 600; color: var(--text-dark); text-align: center; box-shadow: 0 2px 5px rgba(0,0,0,0.1); width: 90%; max-width: 800px; }
.game-intro-box.central { background-color: var(--scp-red); color: #FFFFFF; font-size: 1.2rem; padding: 20px 25px; border-color: var(--scp-red-dark); }
.game-intro-arrow { color: var(--scp-red); font-size: 2rem; font-weight: bold; }
.game-intro-horizontal-group { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 15px; width: 100%; }
.game-intro-horizontal-item { flex: 1; min-width: 200px; background-color: #F0F0F0; border: 1px solid #E0E0E0; border-radius: 8px; padding: 15px; font-size: 0.95rem; color: #444444; text-align: center; display: flex; flex-direction: column; justify-content: center; }
.game-intro-horizontal-item strong { color: var(--scp-red); display: block; margin-bottom: 5px; }
.dice-progression-container { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 20px; padding: 10px; background-color: #E0E0E0; border-radius: 8px; }
.dice-progression-container .die-box { background-color: var(--bg-off-white); border-radius: 6px; padding: 8px 12px; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 1.5rem; color: var(--scp-red); min-width: 60px; text-align: center; }
.dice-progression-container .arrow-separator { color: var(--scp-red); font-size: 1.8rem; font-weight: bold; }
.divisions-grid { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 20px; align-items: stretch; }
.division-column { background-color: #EFEFEF; border: 1px solid #DDDDDD; border-radius: 10px; padding: 20px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.division-column h4 {
    color: var(--scp-red);
    font-size: 1.4rem;
    margin-bottom: 15px;
    border-bottom: 2px solid var(--scp-red-light);
    padding-bottom: 10px; /* Aumentato lo spazio sotto il testo */
    width: 100%;
    height: 6.5rem; /* Aumentata leggermente l'altezza totale per compensare */
    display: flex;
    align-items: center;
    justify-content: center;
}
.department-list { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.department-item { display: flex; justify-content: space-between; align-items: center; width: 100%; background-color: #F8F8F8; border-left: 3px solid var(--scp-red-dark); border-radius: 4px; padding: 10px 15px; text-decoration: none; color: inherit; text-align: left; transition: all 0.2s ease-in-out; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
.department-item:hover { background-color: #FFFFFF; border-left-color: var(--scp-red-light); transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.1); }
.department-item-text { flex: 1; }
.department-item-text strong { font-family: 'Montserrat', sans-serif; color: var(--scp-red-dark); display: block; font-size: 0.95rem; }
.department-item-text .description { font-size: 0.8rem; color: #616161; }
.department-item-chevron { font-size: 1.5rem; color: var(--scp-red); font-weight: bold; margin-left: 10px; }
.escalation-protocols-box { background-color: #333333; border: 1px solid #555555; border-radius: 10px; padding: 20px; margin-top: 20px; }
.escalation-protocols-box h4 { color: var(--scp-red); font-size: 1.4rem; margin-bottom: 15px; border-bottom: 2px solid var(--scp-red-light); padding-bottom: 5px; width: 100%; text-align: center; min-height: 0; }
.escalation-grid { display: grid; grid-template-columns: 1fr; gap: 10px; width: 100%; }
.escalation-link { display: flex; align-items: center; gap: 15px; background-color: #444; border: 1px solid #666; border-radius: 6px; padding: 12px; text-decoration: none; color: #eee; transition: all 0.2s ease-in-out; }
.escalation-link:hover { background-color: #555; border-color: #888; }
.escalation-icon { font-size: 1.5rem; }
.escalation-text strong { color: var(--color-warning); display: block; font-size: 0.95rem; }
.escalation-text .description { font-size: 0.8rem; color: #ccc; }
.escalation-chevron { font-size: 1.5rem; color: var(--color-warning); font-weight: bold; margin-left: 10px; }
.level-bar { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; background-color: #EFEFEF; border-radius: 8px; padding: 10px; margin-top: 20px; }
.level-point { flex: 1 1 120px; padding: 10px; text-align: center; font-weight: 600; border-radius: 5px; color: #FFFFFF; }
.level-point.nominal { background-color: #616161; }
.level-point.allerta { background-color: var(--color-warning); color: var(--text-dark); }
.level-point.critica { background-color: #FF4500; }
.level-point.compromessa { background-color: var(--scp-red); }
.level-point .lc, .level-point .la { font-size: 1.3rem; font-weight: 800; }
.level-point .desc { font-size: 0.8rem; }
.dice-formula { background-color: #EFEFEF; padding: 15px; border-radius: 8px; margin-top: 15px; font-size: 1.1rem; font-weight: 600; border: 1px solid #DDDDDD; text-align: center; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 5px; }
.dice-formula .plus { color: var(--scp-red); font-size: 1.3em; margin: 0 5px; }
.dice-formula .die { color: var(--scp-red-dark); }
.protocols-grid { display: flex; flex-direction: column; gap: 1.5rem; margin-top: 2rem; }
.protocol-card { background-color: var(--bg-off-white); padding: 20px; border-radius: 8px; border: 1px solid #E0E0E0; text-align: left; }
.protocol-card h4 { margin-top: 0; font-size: 1.6rem; color: var(--text-dark); }
.protocol-card h4 > span { font-size: 0.8em; color: #666; }
.protocol-card .protocol-note { font-size: 0.9em; font-style: italic; color: var(--text-medium); margin-bottom: 1.5rem; padding-left: 1rem; border-left: 2px solid var(--border-gray); }
.protocol-card .effect, .protocol-card .consequences { font-weight: 600; }
.protocol-card.alpha { border-top: 4px solid var(--color-warning); }
.protocol-card.omega { background-color: #333333; color: #f0f0f0; border-color: #555; border-top: 4px solid var(--scp-red); }
.protocol-card.omega h4 { color: var(--scp-red-light); }
.protocol-card.omega h4 > span { color: #ccc; }
.protocol-card.omega .protocol-note { color: #ddd; border-left-color: #777; }
.protocol-card.omega p { color: #f0f0f0; }
.protocol-card.omega b:first-child, .protocol-card.omega strong:first-child { color: var(--scp-red-light); }
.process-flow { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.5rem; }
.process-step { display: flex; gap: 1rem; background: #F8F8F8; border: 1px solid var(--border-gray); border-radius: 8px; padding: 1rem; text-align: left; }
.process-step.phase-secure, .process-step.phase-contain, .process-step.phase-protect { border-left: 4px solid var(--scp-red); }
.process-number { font-family: 'Montserrat', sans-serif; font-size: 2rem; font-weight: 800; color: var(--scp-red); line-height: 1; }
.process-content { flex: 1; }
.process-content h4 { margin: 0 0 0.5rem 0; font-size: 1.1rem; color: var(--text-dark); }
.process-content p { margin: 0; font-size: 0.9rem; color: var(--text-medium); }
.process-content p:not(:last-child) { margin-bottom: 1rem; }
.player-actions-container { display: flex; flex-direction: column; align-items: stretch; gap: 10px; width: 100%; max-width: 100%; }
.player-action-box { background-color: #F0F0F0; color: var(--text-dark); padding: 10px 15px; border-radius: 6px; font-weight: 600; border: 1px solid #DDDDDD; display: flex; align-items: center; gap: 15px; }
.player-action-box .action-icon { font-size: 1.8rem; line-height: 1; width: 2em; text-align: center; flex-shrink: 0; }
.player-action-box .action-text { text-align: left; }
.player-action-box .action-text > b { display: block; }
.player-action-box .action-text p { font-size: 0.8rem; color: var(--text-medium); margin: 0; margin-top: 4px; }
.resource-page-header h1 { font-size: 2.2rem; }
.resource-intro { text-align: left; margin-top: 1.5rem; }
.cv-link-container { text-align: center; margin: -1rem 0 2rem 0; }
.container a.cv-link-button {
    display: inline-block;
    background-color: var(--scp-red-dark);
    color: #ffffff !important; /* The !important flag ensures this rule always wins */
    padding: 10px 20px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-family: 'Montserrat', sans-serif;
    transition: background-color 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
}
.cv-link-button:hover { background-color: var(--scp-red); }
.resource-category h3 { font-size: 1.8rem; color: var(--scp-red-dark); border-bottom: 2px solid var(--border-gray); padding-bottom: 0.5rem; margin: 3rem 0 1.5rem 0; text-align: center; }
.resource-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.resource-item { background-color: var(--bg-off-white); border: 1px solid var(--border-gray); border-left: 4px solid var(--scp-red-dark); border-radius: 8px; padding: 1.25rem; text-align: left; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
.resource-item .code { font-family: 'Montserrat', sans-serif; font-weight: 700; color: var(--scp-red-dark); font-size: 0.8rem; margin-bottom: 0.25rem; text-transform: uppercase; }
.resource-item .name { font-family: 'Montserrat', sans-serif; font-weight: 700; color: var(--text-dark); font-size: 1.2rem; margin-bottom: 1rem; }
.resource-item p { font-size: 0.9rem; margin-bottom: 0.5rem; }
.resource-item p b { color: var(--scp-red); }

/* --- RESOURCE TAXONOMY BOX (BLUEPRINT THEME) --- */
.resource-taxonomy-box {
    background-color: #1A2C42; /* Blu scuro da cianografia */
    border: 1px solid #2C3F58;
    border-radius: 8px;
    padding: 20px 25px;
    margin-top: 20px;
    color: #E2E8F0; /* Testo chiaro per leggibilità */
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.taxonomy-header {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #63B3ED; /* Blu brillante per accento */
    text-align: center;
    margin-bottom: 1.5rem;
    text-shadow: 0 0 5px rgba(99, 179, 237, 0.4); /* Leggero effetto "glow" */
}

.taxonomy-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 10px 20px;
}

.taxonomy-list li {
    font-family: 'Roboto Mono', monospace;
    font-size: 0.9rem;
    color: #A0AEC0; /* Grigio-blu per il testo descrittivo */
    position: relative;
    padding-left: 20px;
    margin-bottom: 0;
}

.taxonomy-list li::before {
    content: '>';
    position: absolute;
    left: 0;
    top: 0;
    color: #63B3ED; /* Blu brillante per accento */
    font-weight: bold;
}

.taxonomy-list li b {
    color: #E2E8F0; /* Testo più brillante per il tipo di risorsa */
}

/* Stile per i link nella sezione 7 */
section[aria-labelledby="section-title-7"] a {
    color: var(--scp-red);
    text-decoration: none;
}

section[aria-labelledby="section-title-7"] a:hover {
    text-decoration: underline;
}

/* --- STILI NOTA STAMPABILE --- */
.printable-note-container {
    width: 210mm;
    margin: 10mm auto;
    padding: 0;
    margin-bottom: 10mm; /* Aggiunge spazio sotto la nota */
}
.printable-note {
    background-color: var(--bg-off-white);
    border: 1px solid var(--border-gray);
    border-left: 4px solid var(--scp-red-dark);
    padding: 12px 18px;
    border-radius: 6px;
    font-size: 0.9rem;
    text-align: left;
    color: var(--text-medium);
    margin: 0; /* Rimuove tutti i margini */
}
.printable-note strong {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--scp-red-dark);
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
}

/* --- STILI CV.HTML --- */
.cv-page { width: 210mm; min-height: 297mm; margin: 10mm auto; background: #fff; padding: 15mm; box-shadow: 0 4px 15px rgba(0,0,0,.1); position: relative; display: flex; flex-direction: column; }
.cv-page .scp-logo { position: absolute; top: 8mm; left: 15mm; width: 25mm; opacity: .8; }
.cv-page .scp-motto { position: absolute; top: 15mm; right: 15mm; text-align: right; font-size: 1rem; font-weight: 700; color: var(--scp-red); line-height: 1.1; }
.cv-page .main-title { font-size: 2rem; color: var(--text-dark); margin-top: 0rem; }
.cv-page .main-title small { font-size: 1rem; color: var(--text-medium); }
.cv-director-name { text-align: center; position: relative; margin-bottom: 2.5rem; }
.cv-section { margin-bottom: 1.25rem; }
.cv-page .section-title { font-size: 1.3rem; color: var(--text-dark); border-bottom: 2px solid var(--scp-red); text-align: left; display: block; padding-bottom: 0.25rem; margin-bottom: 0.5rem; }
.cv-section-subtitle { font-size: 0.75rem; font-style: italic; margin-bottom: 0.5rem; color: var(--text-medium); }
.header-info-container { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-top: 0.5rem; }
.header-info-details { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.9rem; color: var(--text-medium); flex-grow: 1; }
.header-info-item { display: flex; align-items: baseline; }
.header-info-item strong { min-width: 110px; text-align: right; margin-right: 0.5rem; }
.header-info-item .font-semibold { font-weight: 600; color: var(--text-dark); }
.header-info-clearance { background-color: #f8f8f8; border: 1px solid #e0e0e0; padding: 0.5rem; border-radius: 4px; text-align: center; font-size: 0.8rem; font-weight: 600; color: var(--text-medium); flex-shrink: 0; }
.header-info-clearance .clearance-level { margin-top: 0.25rem; }
.competence-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem 2rem; }
.competence-item { display: flex; justify-content: space-between; align-items: center; padding: 0.25rem 0; border-bottom: 1px dashed var(--border-gray); }
/* --- Correctly removes bottom border from the last row of the competence grid --- */
.competence-grid .competence-item:nth-last-child(-n+2) {
    border-bottom: none;
}
.competence-label { font-weight: 500; font-size: 0.9rem; }
.strategic-capital-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; text-align: center; }
.strategic-capital-item { display: flex; flex-direction: column; align-items: center; }
.strategic-capital-label { font-weight: 600; margin-bottom: 0.25rem; }
.cv-footer-rules { margin-top: auto; padding-top: 1rem; }
.rules-summary { font-size: 0.7rem; color: var(--text-medium); background-color: #f8f8f8; padding: 0.75rem; border: 1px dashed var(--border-gray); border-radius: 4px; }
.rules-summary p { margin-bottom: 0.5rem; }
.rules-summary p:last-child { margin-bottom: 0; }
.cv-resource-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin-top: 0.5rem; }
.resource-entry { min-height: 120px; background: #f8f8f8; border: 1px solid #e0e0e0; padding: .4rem .8rem; border-radius: 4px; display: flex; flex-direction: column; }
.resource-code-container { margin-bottom: 0.25rem; }
.resource-code-box { font-family: 'Roboto Mono', monospace; font-size: .65rem; color: var(--text-dark); border-bottom: 1px dashed #999; display: inline; }
.resource-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.25rem; }
.resource-name-input { font-weight: 600; font-size: .7rem; color: var(--text-dark); flex-grow: 1; }
.resource-details { display: flex; flex-direction: column; flex-grow: 1; }
.resource-description { font-size: .6rem; line-height: 1.3; color: #444; }

/* --- STILI CAMPI INPUT CV --- */
.cv-input { background-color: rgba(223, 223, 223, 0.5); border: 1px solid var(--border-gray); border-radius: 4px; text-align: center; font-family: 'Montserrat', sans-serif; font-weight: 700; color: var(--text-dark); padding: 2px 4px; }
.cv-input::placeholder { color: #aaa; font-weight: 400; font-style: italic; font-size: 0.9em; }
.cv-input:focus { outline: 2px solid var(--scp-red); }
.cv-director-name-input { width: 100%; max-width: 450px; font-size: 1.5rem; border: none; border-bottom: 2px dashed var(--border-gray); background-color: transparent; border-radius: 0; }
.cv-line-input { flex-grow: 1; min-height: 1.3rem; border: none; border-bottom: 1px dashed #999; background-color: transparent; border-radius: 0; text-align: left; font-size: 0.9rem; font-weight: 600; }
.cv-die-input { width: 60px; height: 60px; font-size: 1.2rem; }
.cv-die-input.circle { width: 70px; height: 70px; border-radius: 50%; font-size: 1.4rem; }
.cv-die-input-small { width: 40px; height: 40px; font-size: 1rem; }
.cv-director-name-label { position: absolute; bottom: -22px; left: 50%; transform: translateX(-50%); font-size: 0.75rem; color: var(--text-medium); white-space: nowrap; }

/* Stili per le sole card risorse editabili */
.resource-entry.editable .resource-details { gap: 4px; }

/* Contenitore per input con etichetta sottostante */
.labeled-input {
    position: relative;
    padding-bottom: 16px; /* Spazio per l'etichetta */
}
/* FIX 1: Accorcia l'input del nome e aggiunge spazio dal box GP */
.labeled-input.name-wrapper {
    flex-grow: 1;
    margin-right: 0.5rem;
}

/* Etichetta per i campi input */
.cv-input-label {
    position: absolute;
    bottom: 0;
    left: 2px;
    font-size: 0.6rem;
    font-style: italic;
    color: var(--text-medium);
}

/* Input a riga nelle card editabili (Nome e Codice) */
.resource-entry.editable .cv-line-input {
    width: 100%;
    border: none;
    border-bottom: 1px dashed #999;
    background: transparent;
    border-radius: 0;
    padding: 1px;
    font-weight: 600;
    font-size: .7rem;
    text-align: left;
}

/* Stile per l'input Codice Risorsa (largo metà) */
.resource-entry.editable .code-input {
    font-family: 'Roboto Mono', monospace;
    font-size: .65rem;
}

/* FIX 2: Imposta la dimensione corretta del font per le etichette */
.resource-description-wrapper {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    font-size: .6rem;
    line-height: 1.3;
    color: #444;
}

/* Campo Textarea per Funzione/Specifiche */
.cv-textarea-small {
    flex-grow: 1;
    width: 100%;
    font-size: 0.6rem;
    background: transparent;
    resize: none; 
    padding: 2px;
    text-align: left;
    margin-top: 2px;
    min-height: 32px; /* Altezza per circa 2 righe */
    border: none; /* Rimuove tutti i bordi */
    border-bottom: 1px dashed #999; /* Aggiunge solo la linea inferiore */
    border-radius: 0; /* Assicura angoli squadrati */
}

/* --- CHAIN OF COMMAND VISUAL --- */
.coc-item {
    background-color: #E0E0E0;
    border: 1px solid #CCCCCC;
    border-radius: 8px;
    padding: 10px 15px;
    font-weight: 600;
    color: var(--text-dark);
    text-align: center;
    width: 90%;
    max-width: 500px;
    font-size: 1rem;
}

.coc-item.player {
    background-color: var(--scp-red);
    color: #FFFFFF;
    font-size: 1.2rem;
    border-color: var(--scp-red-dark);
    font-family: 'Montserrat', sans-serif;
}

.coc-desc {
    font-weight: 400;
    font-size: 0.8em;
    color: #555;
    display: inline-block;
}

.coc-item.player .coc-desc {
    color: #f0f0f0;
}

/* --- ETHICS COMMITTEE BOX --- */
.ethics-committee-box {
    background-color: #333333;
    color: #f0f0f0;
    border-left: 5px solid var(--color-warning);
    border-radius: 8px;
    padding: 20px 25px;
    margin: 2.5rem 0;
    font-size: 0.95rem;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.ethics-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 1rem;
}

.ethics-icon {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 1.8rem;
    color: var(--color-warning);
    line-height: 1;
}

.ethics-committee-box h4 {
    color: #FFFFFF;
    font-size: 1.2rem;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.ethics-committee-box p {
    color: #cccccc;
    margin-bottom: 0.5rem;
}

.ethics-committee-box p:last-child {
    margin-bottom: 0;
}

/* --- VEIL DOCTRINE BOX --- */
.veil-doctrine-box {
    background-color: #FDFDF2; /* Colore carta invecchiata */
    color: var(--text-dark);
    border: 1px solid #D1CDBA;
    padding: 25px;
    margin: 2.5rem 0;
    position: relative;
    box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
    overflow: hidden; /* Per contenere lo stampo */
    font-family: 'Roboto Mono', monospace;
}

.veil-stamp {
    position: absolute;
    top: 25px; /* Aumentato il top per maggiore margine */
    right: 25px; /* Aumentato il right per maggiore margine */
    font-size: 1rem;
    font-weight: 700;
    color: var(--scp-red);
    border: 3px double var(--scp-red);
    padding: 5px 10px;
    transform: rotate(7deg);
    opacity: 0.8;
    text-transform: uppercase;
    user-select: none;
    z-index: 10; /* Assicura che sia sopra il testo */
    white-space: nowrap; /* Impedisce che il testo del timbro vada a capo */
}

.veil-header {
    display: flex;
    justify-content: center; /* Centra orizzontalmente il titolo */
    align-items: center;   /* Centra verticalmente (utile per coerenza) */
    margin-bottom: 1.5rem;
    position: relative;
}

.veil-doctrine-box h4 {
    color: var(--text-dark);
    font-family: 'Montserrat', sans-serif;
    font-size: 1.3rem;
    margin: 0;
    display: inline-block;
    border-bottom: 2px solid var(--text-dark);
    padding-bottom: 5px;
    max-width: calc(100% - 150px); /* Aggiungi questa riga */
}

.veil-doctrine-box p {
    color: var(--text-dark);
    margin-bottom: 1rem;
    line-height: 1.8;
    font-size: 0.9rem;
}

.veil-doctrine-box p:last-child {
    margin-bottom: 0;
}

/* --- GOI WARNING BOX --- */
.goi-warning-box {
    background-color: #fff5f5; /* Sfondo rosso chiaro */
    border: 1px solid #fecaca;
    border-left: 5px solid var(--scp-red);
    border-radius: 8px;
    padding: 20px 25px;
    margin: 2.5rem 0;
}

.goi-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 1rem;
}

.goi-icon {
    font-size: 1.8rem;
    line-height: 1;
}

.goi-warning-box h4 {
    color: var(--scp-red-dark);
    font-size: 1.3rem;
    margin: 0;
}

.goi-warning-box p {
    color: var(--text-medium);
}

.goi-category {
    margin-top: 1.5rem;
}

.goi-category strong {
    color: var(--text-dark);
    font-family: 'Montserrat', sans-serif;
    font-size: 1.1rem;
    display: block;
}

.goi-category p {
    font-size: 0.9rem;
    margin-top: 0.25rem;
    font-style: italic;
}

.goi-category ul {
    font-size: 0.9rem;
    margin-top: 0.75rem;
    padding-left: 20px;
}

.goi-category ul li {
    margin-bottom: 0.5rem;
}

.goi-category ul li b {
    color: var(--scp-red-dark);
}

/* --- Responsive Adjustments for Veil Doctrine Box --- */
@media (max-width: 768px) { /* Applica queste regole per schermi fino a 768px (tablet e mobile) */
    .veil-stamp {
        position: static; /* Rimuove il posizionamento assoluto */
        display: block; /* Lo rende un blocco separato */
        margin: 0 auto 15px auto; /* Centra il timbro sopra il titolo */
        transform: none; /* Rimuove la rotazione */
        font-size: 0.9rem; /* Rimpicciolisce leggermente il font */
        width: fit-content; /* Adatta la larghezza al contenuto */
        opacity: 1; /* Rende il timbro completamente visibile */
        border: 2px solid var(--scp-red); /* Bordo leggermente più sottile */
        padding: 3px 8px; /* Padding ridotto */
    }

    .veil-header {
        padding-right: 0; /* Rimuove il padding extra a destra */
        margin-bottom: 1rem; /* Ridotto il margine inferiore */
    }

    .veil-doctrine-box h4 {
        font-size: 1.1rem; /* Ridotto il font del titolo */
    }
}

/* --- ANOMALY CLASSIFICATION SECTION --- */
.classification-section-wrapper {
    background-color: #1a1a1a;
    border: 1px solid #444;
    border-radius: 10px;
    padding: 25px;
    margin: 2.5rem 0;
    box-shadow: 0 5px 20px rgba(0,0,0,0.4);
}

.classification-intro {
    text-align: center;
    color: #f0f0f0;
    margin-bottom: 1rem; /* Ridotto il margine */
}

.classification-intro h4 {
    color: var(--scp-red-light);
    font-size: 1.4rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.5rem;
}

.classification-intro p {
    color: #ccc;
    font-size: 0.95rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* NUOVA INTESTAZIONE PER GRUPPI DI CLASSI */
.class-group-header {
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--scp-red);
    margin: 2.5rem 0 1.5rem 0;
    border-bottom: 1px solid #555;
    padding-bottom: 0.5rem;
}

.anomaly-classification-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-top: 0; /* Rimosso margine che ora è gestito dall'header */
}

/* TEMA SCURO PER TUTTE LE SCHEDE */
.classification-card {
    border: 1px solid #555;
    border-radius: 8px;
    background-color: #2a2a2a; /* Tema scuro di base */
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    display: flex;
    flex-direction: column;
}

.class-header {
    padding: 10px 15px;
    border-bottom: 1px solid #555;
    text-align: center;
}

.class-name {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.class-content {
    padding: 20px;
    flex-grow: 1;
}

.class-analogy {
    font-family: 'Roboto Mono', monospace;
    font-style: italic;
    font-size: 0.9rem;
    color: #ddd; /* Testo chiaro per leggibilità */
    padding-left: 15px;
    margin-bottom: 1rem;
    position: relative;
}

.class-analogy::before {
    content: '“';
    position: absolute;
    left: 0;
    top: -5px;
    font-size: 2rem;
    line-height: 1;
    color: #444; /* Virgolette scure per contrasto sottile */
}

.class-description {
    font-size: 0.9rem;
    color: #bbb; /* Testo chiaro per leggibilità */
}

/* Specific colors for each class (ora tutti su sfondo scuro) */
.classification-card.safe .class-name { color: #4CAF50; }
.classification-card.safe .class-analogy { border-left: 3px solid #4CAF50; }

.classification-card.euclid .class-name { color: #FFC107; }
.classification-card.euclid .class-analogy { border-left: 3px solid #FFC107; }

.classification-card.keter .class-name { color: var(--scp-red); }
.classification-card.keter .class-analogy { border-left: 3px solid var(--scp-red); }

/* Stile leggermente diverso per le schede Esoteriche per mantenerle distinte */
.classification-card.esoteric {
    background-color: #222; /* Leggermente più scuro delle primarie */
    border-color: #666;
}

/* Specific colors for esoteric classes */
.classification-card.thaumiel .class-name { color: #00BCD4; }
.classification-card.thaumiel .class-analogy { border-left-color: #00BCD4; }

.classification-card.apollyon .class-name { color: #E91E63; }
.classification-card.apollyon .class-analogy { border-left-color: #E91E63; }

.classification-card.archon .class-name { color: #9C27B0; }
.classification-card.archon .class-analogy { border-left-color: #9C27B0; }

/* --- MANDATE & ETHICS OVERSIGHT LAYOUT --- */
.mandate-container {
    display: flex;
    flex-wrap: wrap; /* Permette di andare a capo su schermi piccoli */
    gap: 1.5rem;
    align-items: stretch; /* Allunga le colonne alla stessa altezza */
    margin-top: 2rem;
}

.mandate-container .game-intro-visual {
    flex: 2; /* La catena di comando occupa più spazio */
    min-width: 320px;
}

.ethics-oversight-box {
    flex: 1;
    min-width: 260px;
    max-width: 320px; /* Aggiungi questa riga */
    background-color: #2a2a2a;
    border: 1px solid #555;
    border-top: 5px solid var(--color-warning);
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center; /* Centra orizzontalmente gli item all'interno */
    justify-content: center;
}

.ethics-oversight-header {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 1.1rem;
    margin-bottom: 1rem;
}

.ethics-oversight-icon {
    margin-bottom: 1rem; /* Margine sotto l'icona */
}

.ethics-oversight-icon svg {
    color: var(--color-warning); /* Colore della bilancia */
    width: 48px; /* Dimensione fissa per coerenza */
    height: 48px;
}

.ethics-oversight-box p {
    color: #ccc;
    font-size: 0.9rem;
    font-style: italic;
    margin-bottom: 0;
}

/* Gestione responsive per impilare le colonne su mobile */
@media (max-width: 992px) {
    .mandate-container {
        flex-direction: column;
        align-items: stretch;
    }

    /* Aggiungi questa regola per il box del Comitato Etico */
    .ethics-oversight-box {
        max-width: none; /* Rimuove il limite di larghezza su mobile */
    }
}

/* Stile per allargare il box del giocatore */
.coc-item.player.large-player-box {
    width: 100%; /* Occupa tutta la larghezza disponibile nel suo contenitore */
    max-width: none; /* Rimuove il max-width precedente */
}

/* --- MISSION MEMO BOX --- */
.mission-memo-box {
    background-color: var(--bg-off-white);
    border: 1px solid var(--border-gray);
    border-left: 5px solid var(--text-dark);
    border-radius: 8px;
    padding: 20px 25px;
    margin-bottom: 2.5rem; /* Spazio prima del box successivo */
    text-align: left;
}

.mission-memo-box h4 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-dark);
    font-size: 1.2rem;
    margin: 0 0 1rem 0;
}

.mission-memo-box p {
    font-size: 0.95rem;
    color: var(--text-medium);
    margin: 0;
    line-height: 1.7;
}

/* Contenitore per l'header nei risultati della ricerca */
.search-result-item .result-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

/* Contenitore per l'header nelle schede risorsa */
.resource-item .resource-item-header {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 8px;
}

/* Rimuove il margine dal codice risorsa per evitare doppi spazi */
.resource-item .code {
    margin-bottom: 0;
}

/* Stile condiviso per l'etichetta della tipologia */
.resource-type {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-medium);
    text-transform: uppercase;
    white-space: normal;
    display: inline-block;
    text-align: right;
    line-height: 1.5;
}

/* 1. Mantiene la struttura a griglia per un allineamento robusto */
.card-top-header {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

/* 2. Nuovo contenitore che allinea il suo contenuto (l'etichetta) a destra */
.resource-type-wrapper {
    justify-self: end;
}

/* 3. L'etichetta ora si adatta al testo e permette di andare a capo */
.cv-page .resource-type {
    /* Stili visivi specifici per CV */
    font-size: 0.5rem;
}

/* 4. Il codice non necessita di regole speciali */
.resource-code-container {
    margin-bottom: 0;
}

/* 5. Le card editabili mantengono la divisione 50/50 */
.resource-entry.editable .card-top-header {
    grid-template-columns: 1fr 1fr;
}
.resource-entry.editable .resource-type-wrapper {
    justify-self: stretch;
}
.resource-entry.editable .resource-type-wrapper .cv-line-input {
    width: 100%;
}
.resource-entry.editable .card-top-header .labeled-input {
    min-width: 0;
}

/* --- MEDIA QUERIES --- */
@media (min-width: 640px) { .info-box-grid, .escalation-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 768px) { .container { padding: 40px; } .divisions-grid { grid-template-columns: repeat(2, 1fr); } .resource-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .divisions-grid { grid-template-columns: repeat(4, 1fr); } .resource-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 992px) { 
    .header-title-text { display: none; } 

    /* ADD these rules */
    .search-header-content {
        gap: 15px; /* Add spacing between elements */
    }
    .header-right-group {
        display: contents; /* Magically makes children part of the parent's flex layout */
    }
    #header-search-form {
        flex-grow: 1; /* Allows the search form to take up the available middle space */
        max-width: none; /* Override the desktop max-width */
    }
}
@media (max-width: 767px) {
    #page-content-wrapper {
        padding-top: 70px;
    }
    .container {
        padding: 0 15px;
        margin: 0;
        border: none;
        border-radius: 0;
        background-color: transparent;
        box-shadow: none;
    }
    h1 {
        font-size: 2rem;
    }
    h2 {
        font-size: 1.8rem;
    }
    h3 {
        font-size: 1.4rem;
    }
    .subtitle {
        font-size: 1.1rem;
    }
}
@media (max-width: 480px) {
    #page-content-wrapper { padding-top: 80px; }
    .search-header-content { flex-wrap: nowrap; }
    .header-logo-link { width: auto; margin-bottom: 0; }
    .header-right-group { flex-grow: unset; }
    .header-search-form { max-width: 150px; }
    .cv-page { width: 100%; min-height: auto; padding: 15px; margin: 0; box-shadow: none; border: none; }
    .cv-page .scp-logo { position: static; display: block; margin: 0 auto 1rem auto; width: 60px; }
    .cv-page .scp-motto { position: static; text-align: center; margin-bottom: 1rem; }
    .cv-page .main-title { font-size: 1.5rem; }
    .competence-grid, .strategic-capital-grid { grid-template-columns: 1fr; }
    .strategic-capital-grid { gap: 1rem; }
    .cv-resource-grid { grid-template-columns: 1fr; }
    .header-info-container { flex-direction: column-reverse; align-items: stretch; }
    .header-info-clearance { text-align: center; }
    .header-info-item strong { text-align: left; }
    .section-card,
    .division-column,
    .escalation-protocols-box,
    .protocol-card {
        padding-left: 15px;
        padding-right: 15px;
    }
    .department-item {
        padding-left: 10px;
        padding-right: 10px;
    }
    .dice-progression-container {
        flex-direction: column; /* Imposta la direzione verticale */
    }
    .dice-progression-container .arrow-separator {
        transform: rotate(90deg); /* Ruota le frecce di 90 gradi */
        margin: 5px 0; /* Aggiunge un po' di spazio verticale */
    }
    .printable-note-container {
    width: 100%;
    margin: 0 auto 1rem auto; /* Aggiunge spazio sotto */
    }
    .printable-note {
        margin: 0 15px 10px; /* Usa padding in pixel su mobile */
    }
}

/* Confirm Assignment – legacy link styling */
.department-links-list {
  padding: 0.5rem 0 0.5rem 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  font-size: 0.9em;
}

.department-links-list a,
.department-links-list a:visited {
  color: var(--scp-red);
  text-decoration: none;
}

.department-links-list a:hover {
  text-decoration: underline;
}

/*
 * Stile unificato per i link nel contenuto
 * ----------------------------------------
 */

/* Stile base per tutti i link all'interno del container principale */
.container a {
    color: var(--scp-red);
    text-decoration: none; /* Rimuove la sottolineatura di default */
    transition: text-decoration 0.2s ease-in-out;
}

/* Mantiene il colore rosso anche per i link già visitati */
.container a:visited {
    color: var(--scp-red);
}

/* Aggiunge la sottolineatura quando il mouse è sopra il link */
.container a:hover {
    text-decoration: underline;
}

/*
 * SCP Core Directives Style
 * ----------------------------------------
 */

.scp-directives-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem; /* Adds space below the main memo paragraph */
}

.directive-card {
    background-color: #FDFDF2; /* Aged paper color like the Veil Doctrine box */
    border: 1px solid #D1CDBA;
    border-top: 3px solid var(--text-dark);
    padding: 20px;
    font-family: 'Roboto Mono', monospace; /* Typewriter font */
    box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
}

.directive-card h4 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-dark);
    margin: 0 0 1rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--text-dark);
}

.directive-card p {
    font-size: 0.9rem;
    color: var(--text-medium);
    line-height: 1.8;
    margin-bottom: 0;
}

/* Stile per separatore leggero all'interno di una section-card */
hr.subsection-hr {
    border: none;
    border-top: 1px solid var(--border-gray);
    margin: 2rem 0;
}

/*
 * SCP Core Directives Style Improvements
 * ----------------------------------------
 */

.mission-memo-box {
    position: relative; /* Per posizionare l'icona */
    padding: 30px; /* Aumenta il padding per l'icona */
    /* Assicurati che abbia anche gli stili di base del box, es: background, border */
}

.scp-image-logo {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 80px; /* Dimensioni adeguate per l'immagine */
    height: auto; /* Mantieni le proporzioni */
    opacity: 0.25; /* Rendi leggermente opaca */
    filter: drop-shadow(2px 2px 3px rgba(0,0,0,0.1)); /* Aggiunge una leggera ombra */
    /* Non serve border o padding se l'immagine è già pulita */
}

.directive-card h4 {
    position: relative; /* Per posizionare l'underscore */
    display: inline-block; /* Per far sì che l'underscore si adatti al testo */
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-dark);
    margin: 0 0 1rem 0;
    padding-bottom: 0.5rem;
    /* Rimuovi border-bottom qui se vuoi solo l'underscore dinamico */
    border-bottom: none;
}

/* Sottolineatura dinamica sotto i titoli delle direttive */
.directive-card h4::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background-color: var(--text-dark); /* Linea scura */
}

/* Rimuove l'underscore per le versioni mobile se necessario, o lo rende più sottile */
@media (max-width: 768px) {
    .scp-image-logo {
        width: 60px;
        top: 15px;
        right: 15px;
        opacity: 0.2;
    }
    .directive-card h4 {
        font-size: 1rem;
    }
}

/* --- BUTTON-LIKE LINK STYLES --- */
a.cv-link-button,
a.janus-link-button {
    display: inline-block;
    padding: 12px 25px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

a.cv-link-button:hover,
a.janus-link-button:hover {
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

/* Red Button Theme (Default) */
a.cv-link-button {
    background-color: var(--scp-red-dark);
    color: #ffffff !important;
}

a.cv-link-button:hover {
    background-color: var(--scp-red);
}

/* Blue Button Theme (JANUS) */
a.janus-link-button {
    background-color: #2C3F58;
    border: 1px solid #63B3ED;
    color: #63B3ED !important;
}

a.janus-link-button:hover {
    background-color: #63B3ED;
    color: #1A2C42 !important;
    box-shadow: 0 4px 15px rgba(99, 179, 237, 0.3);
}


/* --- JANUS PROTOCOL BOX (BLUEPRINT THEME) --- */
.janus-protocol-box {
    background-color: #1A2C42;
    border: 1px solid #2C3F58;
    border-radius: 8px;
    padding: 25px 30px;
    margin: 2.5rem 0;
    color: #E2E8F0;
    box-shadow: 0 5px 20px rgba(0,0,0,0.4);
    text-align: left;
}

.janus-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 1.5rem;
}

.janus-header svg {
    color: #63B3ED;
    flex-shrink: 0;
}

.janus-protocol-box h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.4rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #63B3ED;
    margin: 0;
    padding: 0;
    border: none;
    text-shadow: 0 0 5px rgba(99, 179, 237, 0.4);
}

.janus-protocol-box p {
    font-family: 'Roboto Mono', monospace;
    color: #A0AEC0;
    font-size: 0.95rem;
    line-height: 1.7;
}

.janus-button-container {
    text-align: center;
    margin-top: 2rem;
}

/* --- JANUS GENERATOR PAGE THEME --- */
.janus-page-container {
    background-color: #0F172A; /* Dark blueprint blue */
    color: #E2E8F0;
    padding: 20px;
    border-radius: 12px;
    margin-top: 2rem;
    border: 1px solid #2C3F58;
}

.janus-page-container .page-header {
    margin-bottom: 2rem;
}

.janus-main-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 2.5rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-align: center;
    color: #63B3ED !important; /* Override generic h1 color */
    margin-bottom: 10px;
    text-shadow: 0 0 10px rgba(99, 179, 237, 0.6);
    border: none;
    display: block;
}

.janus-subtitle {
    font-family: 'Roboto Mono', monospace;
    font-size: 1.2rem;
    text-align: center;
    color: #A0AEC0;
    margin-top: 0;
}

hr.janus-hr {
    border-top: 2px solid #2C3F58;
    margin: 2rem 0;
}

.janus-intro-box {
    background-color: rgba(26, 44, 66, 0.7);
    border: 1px solid #2C3F58;
    border-left: 5px solid #63B3ED;
    border-radius: 8px;
    padding: 20px 25px;
    margin-bottom: 2.5rem;
}

.janus-intro-box h3 {
    color: #63B3ED;
    font-size: 1.25rem;
    margin-top: 0;
    margin-bottom: 15px;
}

.janus-intro-box p {
    font-family: 'Roboto Mono', monospace;
    font-size: 0.95rem;
    line-height: 1.7;
    color: #A0AEC0;
}

/* CHANGED: Switched to Flexbox for a fluid layout that fills space */
.janus-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.janus-step-card {
    background-color: #1A2C42;
    border: 1px solid #2C3F58;
    border-radius: 8px;
    padding: 25px;
    display: flex;
    flex-direction: column;
    /* CHANGED: Flex properties for sizing */
    flex: 1 1 48%; /* Allows two cards per row, growing and shrinking */
    min-width: 320px; /* Prevents cards from becoming too narrow */
    counter-reset: item-counter; /* <-- ADD THIS LINE */
}

.janus-step-card-full {
    flex-basis: 100%; /* Forces card to take the full width */
}

.janus-step-card h4 {
    color: #63B3ED;
    font-size: 1.2rem;
    margin-top: 0;
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px dashed #2C3F58;
}

.janus-step-card .janus-sub-heading {
    font-size: 1rem;
    color: #E2E8F0;
    margin-top: 1rem;
    margin-bottom: 0.75rem;
    font-weight: 600;
}

.janus-options-list {
    list-style-type: none;
    padding-left: 0;
    /* ADDED: Apply terminal font to options for consistency */
    font-family: 'Roboto Mono', monospace;
    font-size: 0.9rem;
    color: #A0AEC0;
}

.janus-options-list li {
    position: relative;
    padding-left: 2.5rem; /* Increased padding to make space for the number box */
    margin-bottom: 0.75rem;
    display: flex; /* Added for better alignment */
    align-items: center; /* Aligns number box with text */
    min-height: 32px; /* Ensures consistent line height */
}

/* CORRECTED RULE: Replace your existing li::before rule with this */
.janus-options-list li::before {
    counter-increment: item-counter;
    content: counter(item-counter);
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    background-color: #2C3F58; /* <-- CORRECTED COLOR */
    color: #63B3ED;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    border: 1px solid #63B3ED; /* Added border for better contrast */
}

/* --- Correction for Step 7 Description Text --- */
.janus-step-card-concept > p[data-i18n-key="gen_step7_desc"] {
    font-family: 'Roboto Mono', monospace;
    font-size: 1rem; /* Slightly larger for emphasis */
    color: #E2E8F0; /* Brighter text color for better readability */
    text-align: center; /* Center the instruction text */
    line-height: 1.8;
    margin: 0 auto 2rem auto; /* Center the block and add space below */
    max-width: 85%; /* Prevent the line from being too wide on large screens */
}

.janus-options-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 0.5rem 1.5rem;
}

.janus-options-grid-goi {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 0.5rem 1.5rem;
}

/* Step 6 Concept Development */
.janus-step-card-concept {
    border-color: #63B3ED;
}

.janus-concept-intro, .janus-concept-summary {
    font-family: 'Roboto Mono', monospace;
    font-size: 0.95rem;
    color: #A0AEC0;
}
.janus-concept-summary { font-style: italic; }

.janus-example-box {
    background-color: rgba(15, 23, 42, 0.8);
    border: 1px dashed #4FD1C5;
    border-radius: 6px;
    padding: 15px;
    margin: 1rem 0 2rem 0;
}
.janus-example-box .janus-sub-heading { margin: 0 0 0.75rem 0; }
.janus-example-rolls {
    font-family: 'Roboto Mono', monospace;
    font-size: 1rem;
    font-weight: 600;
    color: #4FD1C5;
    text-align: center;
}

.janus-guideline {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    background-color: rgba(26, 44, 66, 0.7);
    padding: 1rem;
    border-radius: 6px;
}
.janus-guideline .process-number { font-size: 2rem; color: #63B3ED; }
.janus-guideline h5 { margin: 0 0 0.5rem 0; font-size: 1.1rem; color: #E2E8F0; }
.janus-guideline p { font-size: 0.9rem; color: #A0AEC0; margin: 0; }

/* --- Dossier Template on Generator Page --- */
.dossier-template {
    background-color: #2a2a2a; /* Dark background */
    color: #f0f0f0;
    border: 1px solid #555;
    border-radius: 8px;
    padding: 1.5rem;
    margin-top: 1.5rem;
    font-family: 'Roboto Mono', monospace; /* Monospaced font for a document feel */
    font-size: 0.85rem;
}

.dossier-template h4 {
    color: #63B3ED; /* <-- Corrected blue color */
    margin-top: 0;
    text-align: center;
    margin-bottom: 1rem;
    font-family: 'Montserrat', sans-serif;
}

.dossier-template pre {
    margin: 0;
    white-space: pre-wrap;   /* Allows text to wrap */
    word-wrap: break-word;   /* Breaks long words if necessary */
}

/* --- JANUS GENERATOR MOBILE ADJUSTMENTS --- */
@media (max-width: 767px) {
    .janus-page-container {
        /* Makes the main blue container invisible on mobile */
        padding: 0;
        border: none;
        box-shadow: none;
    }

    .page-header .janus-main-title {
        font-size: 1.8rem; /* Reduces title size for better fit */
    }

    .page-header .janus-subtitle {
        font-size: 1rem; /* Reduces subtitle size */
    }

    .janus-intro-box {
        margin-bottom: 2rem;
    }

    .janus-grid {
        display: flex;
        flex-direction: column; /* Stacks all cards vertically */
        gap: 1rem; /* Reduces space between cards */
    }

    .janus-step-card {
        min-width: 0; /* Resets min-width for vertical stacking */
        padding: 20px;
    }
}

/* --- CV Strategic Capital Corner Input (NEW) --- */

/* 1. The new positioning container for the inputs */
.circle-input-wrapper {
    position: relative;
    /* Define the size of the container to match the main circle */
    width: 70px;
    height: 70px;
}

/* 2. The main circle input, ensuring it fills the wrapper */
.main-circle-input {
    width: 100%;
    height: 100%;
}

/* 3. The small, editable box in the top-left corner */
.small-corner-input {
    position: absolute;
    top: -5px;  /* Overlap the corner slightly */
    left: -5px; /* Overlap the corner slightly */
    width: 28px;
    height: 28px;
    font-size: 0.8rem;
    font-weight: 700;
    border: 1px solid var(--text-dark);
    background-color: var(--bg-off-white);
    border-radius: 6px; /* A slightly rounded box */
    z-index: 3; /* Ensure it's on top */
    
    /* Center the text inside the small box */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0;
}

/* --- CV Competence Resource Text --- */
.competence-item {
    align-items: center; /* Vertically aligns the text block and the input */
}

.competence-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.competence-resources {
    font-size: 0.7rem;
    font-style: italic;
    color: var(--text-medium);
    margin: 4px 0 0 0;
    padding: 0;
    line-height: 1.3;
}

.competence-resources i {
    font-style: normal; /* Removes italics from the 'Assets Impacted:' part */
    font-weight: 600;
}

/* --- IMPOSTAZIONI PAGINA DI STAMPA --- */
@page {
    size: A4; /* Definisce il formato della pagina */
    margin: 0; /* Imposta a zero i margini fisici della pagina stampata */
}

@media print {
  /* --- IMPOSTAZIONI GENERALI STAMPA --- */
  body { 
    background-color: #fff; 
    padding: 0; 
  }
  #page-content-wrapper { 
    padding-top: 0; 
  }
  .container { 
    box-shadow: none; 
    border: none; 
    padding: 0; 
    margin: 0; 
  }

    .small-corner-input {
    /* Force browsers to print background colors and images */
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;

    /* Explicitly set a solid white background for printing */
    background-color: #ffffff !important;
    }

  /* --- NASCONDI ELEMENTI NON NECESSARI --- */
  .search-header, 
  .modal-overlay, 
  .printable-note-container,
  .cv-link-container, 
  .page-header, 
  .footer-credits, 
  hr { 
    display: none !important; 
  }
/* --- REGOLA CHIAVE PER IL LAYOUT DELLA PAGINA (v3 - Flexbox Stabile) --- */
.cv-page {
  box-sizing: border-box;
  width: 210mm;
  height: 297mm; /* Manteniamo l'altezza A4 completa */
  padding: 10mm; /* Padding uniforme per tutte le pagine */
  
  /* Layout Flexbox per la gestione verticale */
  display: flex;
  flex-direction: column;

  page-break-after: always;
  /* Altri stili di reset */
  position: relative;
  margin: 0 auto;
  border: none;
  box-shadow: none;
  background-color: #fff !important;
}

/* Nuovo contenitore per il contenuto principale della pagina del profilo */
.cv-page-content {
  flex-grow: 1; /* <-- MODIFICA CRUCIALE: questo elemento si espande per riempire lo spazio */
}

/* --- CV STRATEGIC CAPITAL DIAGONAL BAR (CORRECTED) --- */

/* The main container for each capital item */
.strategic-capital-item {
    position: relative; /* This allows the label to be positioned correctly */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end; /* Aligns the circle to the bottom */
    padding-top: 1.5em; /* Creates space for the label above the circle */
}

/* The "SECURE", "CONTAIN", "PROTECT" label */
.strategic-capital-label {
    position: absolute;
    top: 0;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

/* The circular input field - THIS IS THE KEY ELEMENT */
.cv-input.circle {
    /* 1. Force a perfect circle shape */
    width: 70px !important;
    height: 70px !important;
    border-radius: 50%;

    /* 2. Positioning context for the line */
    position: relative; 
    
    /* 3. This is the magic: it clips anything inside that overflows its circular border */
    overflow: hidden;

    /* 4. Ensure input text appears on top */
    z-index: 2; 
    background-color: transparent;

    /* 5. Center the placeholder text like "D_" */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0;
}

/* The diagonal line, attached directly to the input field */
.cv-input.circle::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;

    /* Make the line long enough to cross the entire circle diagonally */
    width: 142%; /* The diagonal of a square is ~141.4% of its side */
    height: 1.5px; /* The thickness of the line */
    
    background-color: var(--border-gray);
    
    /* Center and rotate the line */
    transform: translate(-50%, -50%) rotate(-45deg);

    /* Place the line behind the input's text */
    z-index: 1; 
}

/* Il footer non si espande e rimane in fondo */
.cv-footer-rules {
  flex-shrink: 0; /* Impedisce al footer di rimpicciolirsi */
}

/* Le pagine delle risorse (che non hanno il footer) funzioneranno normalmente */
#cv-container > .cv-page:last-child {
  page-break-after: auto;
}

  #cv-container > .cv-page:last-child {
    page-break-after: auto; /* Evita una pagina bianca alla fine */
  }

  .resource-entry {
    break-inside: avoid; /* Evita che le card risorsa si spezzino tra le pagine */
  }

  /* --- FORZA LAYOUT DESKTOP (GRID E HEADER) --- */
  .cv-resource-grid { 
    grid-template-columns: repeat(3, 1fr); 
  }
  .competence-grid {
    grid-template-columns: 1fr 1fr;
  }
/* Ensure the strategic-capital-grid positions items correctly for this */
.strategic-capital-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px; /* Or whatever gap you prefer */
    width: 100%;
    justify-items: center; /* Center items within their grid cells */
}
  .header-info-container {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }
  .cv-page .scp-logo {
    position: absolute;
    top: 8mm;
    left: 15mm;
    width: 25mm;
  }
  .cv-page .scp-motto {
    position: absolute;
    top: 15mm;
    right: 15mm;
    text-align: right;
  }
  
  /* --- RESET STILI PER LEGGIBILITÀ --- */
  .resource-entry, 
  .header-info-clearance, 
  .rules-summary {
    background-color: #fff !important;
    border-color: #ccc !important;
  }
  h1, h2, h3, h4, .main-title, .section-title, .resource-code-box, 
  .resource-name-input, .resource-description, .cv-director-name-inner, 
  .competence-label {
    color: #000 !important;
  }
  .scp-motto, 
  .cv-page .section-title {
    border-color: #000 !important;
  }

/* --- RESET STILI INPUT PER STAMPA --- */
.cv-input:not(.cv-line-input):not(.cv-textarea-small):not(.cv-director-name-input) {
    -webkit-appearance: none;
    appearance: none;
    background-color: transparent !important;
    color: #000 !important;
    box-shadow: none;
    border: 1px solid #ccc;
}
  .cv-director-name-input, 
  .cv-line-input,
  .resource-entry.editable .cv-line-input,
  .resource-entry.editable .cv-textarea-small,
/* Stile per l'input Codice Risorsa (largo metà) */
.resource-entry.editable .code-input {
    width: 100%;
    font-family: 'Roboto Mono', monospace;
    font-size: .65rem;
}
.resource-entry.editable .card-top-header .cv-line-input {
    width: 100%;
}
  .cv-die-input.circle {
    border-radius: 50%;
  }
  .cv-director-name-label, 
  .cv-input-label {
    color: #000 !important;
  }
}

/* Stile per la "X" di cancellazione nei box di ricerca */
input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; height: 16px; width: 16px; cursor: pointer; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FFF'><path d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/></svg>"); background-size: 16px 16px; }
/* Colore specifico per la "X" nella modale (rosso) */
#modal-search-input::-webkit-search-cancel-button { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23CC0000'><path d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/></svg>"); }

/* --- Safari macOS print fixes (safe, minimal) --- */
@media print {
  /* 1) Stop margin-collapsing at the top of every printed page to avoid empty pages */
  .cv-page > *:first-child {
    padding-top: 0.1px !important;           /* prevents top-margin collapse */
    border-top: 0.1px solid transparent !important;
  }

  /* 2) WebKit-only tweaks (targets Safari on macOS without touching Chromium) */
  @supports (-webkit-touch-callout: none) {
    /* Reserve space for Safari’s own header/footer so your top content isn’t cut */
    @page { margin: 12mm; }                   /* was 0; keep your global rule intact */

    /* Your pages keep their intended height, but we remove "paper overflow" risk */
    .cv-page {
      height: auto !important;                /* avoid clipping/overflow on Safari macOS */
      min-height: calc(297mm - 24mm) !important; /* A4 minus page margins above */
      padding: 10mm !important;               /* keep your inner padding consistent */
    }
  }
}

/* --- Safari macOS: eliminate the extra blank page between printed pages --- */
@media print {
  /* 0) Keep the earlier first-child anti-collapsing fix (safe to repeat) */
  .cv-page > *:first-child {
    margin-top: 0 !important;
    padding-top: 0.1px !important;
    border-top: 0.1px solid transparent !important;
  }

  /* Also stop bottom-margin collapse which can push the next page and create blanks */
  .cv-page > *:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0.1px !important;
    border-bottom: 0.1px solid transparent !important;
  }

  /* 1) WebKit-specific adjustments (Safari macOS only) */
  @supports (-webkit-touch-callout: none) {
    /* A) Ensure each .cv-page is treated as a single unbreakable page and
          avoid a second, empty page “after” due to overflow rounding. */
    .cv-page {
      page-break-inside: avoid;   /* legacy */
      break-inside: avoid-page;   /* modern */
      page-break-after: always;   /* legacy */
      break-after: page;          /* modern */
      margin: 0 !important;       /* margins can trigger page-height rounding */
      /* keep padding you rely on, but prefer padding over margins on children */
    }
    .cv-page:last-of-type {
      page-break-after: auto;
      break-after: auto;
    }

    /* B) Prevent Safari from forcing a page break *before* the next page wrapper */
    .cv-page + .cv-page {
      page-break-before: avoid;   /* legacy */
      break-before: avoid-page;   /* modern */
    }

    /* C) Box decorations & transforms can make WebKit think content overflows a hair,
          which yields an extra blank page. Disable them for print only. */
    .cv-page {
      box-shadow: none !important;
      filter: none !important;
      transform: none !important;
      background-clip: padding-box !important; /* avoids fractional painting overflow */
    }

    /* D) If your first content block uses large top/bottom margins,
          convert them to padding during print to avoid boundary rounding issues. */
    .cv-page > .section,
    .cv-page > .block,
    .cv-page > header,
    .cv-page > main,
    .cv-page > footer {
      /* only applied when those elements exist; harmless otherwise */
      padding-top: clamp(0px,  var(--print-pt, 0px), 24px) !important;
      padding-bottom: clamp(0px, var(--print-pb, 0px), 24px) !important;
    }

    /* E) Avoid grid/flex pagination glitches without changing your screen layout:
          only for print and only in Safari, coerce the outer resource list to block.
          (If you have a specific class like .cv-resources, replace the generic selector.) */
    .cv-resources,
    .cv-resources-grid {
      display: block !important;
    }

    /* F) Extremely defensive: some Safari builds insert blanks when any ancestor
          has overflow not visible. Make everything visible during print. */
    .cv-page, .cv-page * {
      overflow: visible !important;
    }
  }
}

/* --- macOS Safari: fix empty page between pages without changing layout --- */
@media print {
  /* 1) Use a real printable area instead of full-page height */
  @page {
    size: A4;
    margin: 12mm; /* give Safari its header/footer room */
  }

  /* Your .cv-page currently has height:297mm + padding:10mm top/bottom.
     With @page margin 12mm, the printable height is 297 - 24 = 273mm.
     Subtract your 20mm vertical padding => 253mm of inner space. */
  .cv-page {
    height: auto !important;
    min-height: calc(297mm - 24mm - 20mm) !important; /* = 253mm */
    /* keep your existing padding:10mm and page-break-after:always */
    overflow: visible !important; /* avoid phantom overflow pages */
    box-shadow: none !important;  /* decoration can trigger overflow rounding */
    transform: none !important;
    filter: none !important;
    margin: 0 auto !important;    /* center without adding extra page height */
  }

  /* 2) Prevent margin-collapsing across page boundaries (classic WebKit bug) */
  .cv-page > *:first-child {
    margin-top: 0 !important;
    padding-top: 0.1px !important;
    border-top: 0.1px solid transparent !important;
  }
  .cv-page > *:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0.1px !important;
    border-bottom: 0.1px solid transparent !important;
  }

  /* 3) Make sure only the last page doesn't force an extra blank sheet */
  #cv-container > .cv-page:last-child {
    page-break-after: auto !important;
    break-after: auto !important;
  }

  /* 4) If your resource list is grid/flex, coerce to block only when printing
        to avoid WebKit pagination quirks (safe no-op elsewhere). */
  .cv-resource-grid {
    display: block !important;
  }
}

/* --- macOS Safari print: restore 3-column grid for resources --- */
@media print {
  /* 0) If you added a "display:block" override earlier, neutralize it now. */
  .cv-resource-grid {
    display: grid !important;                 /* restore grid */
    grid-template-columns: repeat(3, 1fr) !important;
    grid-auto-flow: row !important;
    gap: 6mm !important;                      /* use gap over item margins */
    box-sizing: border-box !important;
    width: 100% !important;
  }

  /* 1) Make sure cards don’t impose a width that forces the grid to 1 column. */
  .cv-resource-card,
  .cv-resource, 
  .resource-card {
    min-width: 0 !important;                  /* allow shrinking inside grid */
    width: 100% !important;                   /* fill the grid track */
    margin: 0 !important;                     /* spacing comes from grid gap */
    break-inside: avoid;                      /* avoid splitting a card */
    page-break-inside: avoid;                 /* legacy alias */
    box-sizing: border-box !important;
  }

  /* 2) If your card internals have large top/bottom margins, convert to padding
        in print to prevent WebKit rounding pushing items to the next track. */
  .cv-resource-card > *:first-child,
  .cv-resource > *:first-child,
  .resource-card > *:first-child {
    margin-top: 0 !important;
    padding-top: 2mm !important;
  }
  .cv-resource-card > *:last-child,
  .cv-resource > *:last-child,
  .resource-card > *:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 2mm !important;
  }

  /* 3) Optional: tighten columns on very content-heavy pages.
        If you need more room, comment the line above and uncomment one of these: */
  /* .cv-resource-grid { grid-template-columns: 32% 32% 32% !important; } */
  /* .cv-resource-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } */
}

/* --- WebKit-only guard (safe to include; keeps Chromium/Windows unchanged) --- */
@media print {
  @supports (-webkit-touch-callout: none) {
    /* Ensure Safari doesn’t invent overflow that collapses the grid to one track */
    .cv-resource-grid, .cv-resource-grid * {
      overflow: visible !important;
    }
    /* Backgrounds/shadows can cause tiny overflow -> avoid pagination quirks */
    .cv-resource-card, .cv-resource, .resource-card {
      box-shadow: none !important;
      filter: none !important;
      transform: none !important;
      background-clip: padding-box !important;
    }
  }
}

/* === FINAL, CROSS-BROWSER PRINT BASELINE (v4) === */
@media print {
  /* A) Consistent, tighter page margins across browsers */
  @page {
    size: A4;
    margin: 10mm; /* slimmer borders than 12mm */
  }

  /* B) Force 3-column resource grid everywhere (Chromium/Firefox/WebKit) */
  .cv-resource-grid {
    /* ensure grid, even if earlier blocks set display:block */
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    gap: 5mm !important;               /* spacing via gap, not card margins */
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* C) Cards must be allowed to shrink within a grid track */
  .resource-entry {
    min-width: 0 !important;
    width: 100% !important;
    margin: 0 !important;              /* avoid margin-based wrapping */
    break-inside: avoid;               /* keep a card on one page if possible */
    page-break-inside: avoid;
    box-sizing: border-box !important;
  }

  /* D) Defensive: inner elements shouldn’t force a wider track */
  .resource-entry * {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* E) Keep your existing desktop-like layout on print */
  .competence-grid { grid-template-columns: 1fr 1fr !important; }
  .strategic-capital-grid { grid-template-columns: repeat(3, 1fr) !important; }

  /* F) Keep page break behavior (last page doesn’t add a blank) */
  #cv-container > .cv-page:last-child {
    page-break-after: auto !important;
    break-after: auto !important;
  }
}

/* === SAFARI macOS ONLY: no blank interstitial pages, keep 3-col grid === */
@media print {
  @supports (-webkit-touch-callout: none) {
    /* Keep margins aligned with baseline (10mm) */
    @page { margin: 10mm; }

    /* Avoid Safari "phantom overflow" -> extra blank page */
    .cv-page {
      height: auto !important;
      /* Printable height: 297 - (2 * 10mm) = 277mm; minus padding 20mm => 257mm */
      min-height: calc(297mm - 20mm - 20mm) !important; /* 257mm */
      padding: 8mm !important;
      margin: 0 auto !important;
      overflow: visible !important;
      box-shadow: none !important;
      transform: none !important;
      filter: none !important;

      page-break-inside: avoid;  /* legacy */
      break-inside: avoid-page;  /* modern */
      page-break-after: always;  /* legacy */
      break-after: page;         /* modern */
    }

    .cv-page + .cv-page {
      page-break-before: avoid;
      break-before: avoid-page;
    }

    /* Stop margin-collapsing that can cause ghost pages */
    .cv-page > *:first-child {
      margin-top: 0 !important;
      padding-top: 0.1px !important;
      border-top: 0.1px solid transparent !important;
    }
    .cv-page > *:last-child {
      margin-bottom: 0 !important;
      padding-bottom: 0.1px !important;
      border-bottom: 0.1px solid transparent !important;
    }

    /* IMPORTANT: keep grid on Safari print as well */
    .cv-resource-grid {
      display: grid !important;
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
      grid-auto-flow: row !important;
      gap: 5mm !important;
    }

    /* Avoid tiny “overflow” sources on cards */
    .resource-entry,
    .resource-entry * {
      overflow: visible !important;
      box-shadow: none !important;
      transform: none !important;
      background-clip: padding-box !important;
    }
  }
}

/* --- PRINT FIX: Force background on small corner input (FINAL) --- */
@media print {
    .small-corner-input {
        /* 1. Force a solid white background color */
        background-color: #ffffff !important;
        
        /* 2. Force browsers to print the background color */
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;

        /* 3. HACK for stubborn browsers: Simulate a background with a shadow */
        box-shadow: inset 0 0 0 50px #ffffff !important;
    }
}

/* --- CV Strategic Capital Spacing Adjustment --- */

/* 1. Add space between the section's subtitle and the row of circles */
.strategic-capital-grid {
    margin-top: 1.25rem;
}

/* 2. Refine the layout of each item (label + circle) */
.strategic-capital-item {
    position: static; /* Reset positioning for simpler layout */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem; /* Control the space between the label and the circle */
    padding: 0; /* Remove any excess padding */
}

/* 3. Ensure the label is part of the normal document flow */
.strategic-capital-label {
    position: static;
    transform: none;
    padding: 0;
    margin: 0;
}

/* 4. Reduce the bottom margin of the entire Strategic Capital section */
/* This modern selector targets the section containing the grid */
.cv-section:has(.strategic-capital-grid) {
    margin-bottom: 0.5rem; /* Reduces the space below the circles */
}