/* =====================================================================
   RIVM F5 APM - basisstylesheet (v3)
   Bestand : /RIVM/public/share/rivm-base.css
   Gebruik : altijd in combinatie met één themabestand (thema-<kleur>.css)
             dat ALLEEN --theme-* variabelen zet.

   Policy (Variable Assign "Set Pagina CSS"):
     session.customer_css_customization = /RIVM/public/share/rivm-base.css
     session.customer_css_style         = /RIVM/public/share/thema-<kleur>.css

   Gebaseerd op v2_style.css (cibrapportage), met fixes:
     - iconen inline (geen losse svg-bestanden nodig)
     - .error had de groene confirm-kleur
     - fonts via absoluut pad (werkt vanuit elke site/partitie)
     - lege footer-box verdwijnt, gevulde footer wordt een kaart
     - select/radio/checkbox, visited links, focus (WCAG) meegenomen
     - Uitlog-knop webtop volgt knopkleur (contrast)
   Doelbrowsers: Edge/Chrome/Firefox/Safari (evergreen). Geen IE11.
   ===================================================================== */

:root {
    /* Layout */
    --col-width: 660px;
    --default-spacing: 1.5rem;
    --radius-card: 14px;
    --radius-control: 8px;
    --card-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.12), 0 1px 5px 0 rgba(0,0,0,.2);
    --icon-size: 32px;

    /* Meldingen */
    --confirm-bg-color: #e1eddb;
    --error-bg-color:   #f9dfdd;
    --info-bg-color:    #d9ebf7;
    --warning-bg-color: #fff4dc;
    --confirm-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='16' fill='%2339870c'/%3E%3Cpath d='M9 16.5l4.5 4.5L23 11.5' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --error-icon:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='16' fill='%23d52b1e'/%3E%3Cpath d='M11 11l10 10M21 11L11 21' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
    --info-icon:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='16' fill='%2301689b'/%3E%3Ccircle cx='16' cy='9.5' r='2' fill='%23fff'/%3E%3Cpath d='M16 14v10' stroke='%23fff' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
    --warning-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 2L31 29H1z' fill='%23ffb612' stroke='%23ffb612' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M16 11v9' stroke='%23000' stroke-width='3' stroke-linecap='round'/%3E%3Ccircle cx='16' cy='24.5' r='1.8'/%3E%3C/svg%3E");

    /* Thema (overschrijfbaar via thema-<kleur>.css) */
    --bg-color:                        var(--theme-bg-color, #ffffff);
    --box-bg-color:                    var(--theme-box-bg-color, #f3f3f3);
    --text-color:                      var(--theme-text-color, #000000);
    --brand-color:                     var(--theme-brand-color, #e17000);
    --brand-color-text:                var(--theme-brand-color-text, #000000);
    --brand-color-light:               var(--theme-brand-color-light, #f6d4b2);
    --brand-color-light-text:          var(--theme-brand-color-light-text, #000000);
    --button-primary-color:            var(--theme-button-primary-color, #01689b);
    --button-primary-color-hover:      var(--theme-button-primary-color-hover, #004161);
    --button-primary-text-color:       var(--theme-button-primary-text-color, #ffffff);
    --button-primary-text-color-hover: var(--theme-button-primary-text-color-hover, #ffffff);
    --form-input-bg-color:             var(--theme-form-input-bg-color, #ffffff);
    --form-input-border-color:         var(--theme-form-input-border-color, #01689b);
    --link-color:                      var(--theme-link-color, #01689b);
    --link-color-hover:                var(--theme-link-color-hover, #004161);
    --nav-color:                       var(--theme-nav-color, #01689b);
    --nav-color-hover:                 var(--theme-nav-color-hover, #004161);
    --nav-text-color:                  var(--theme-nav-text-color, #ffffff);
    --nav-text-color-hover:            var(--theme-nav-text-color-hover, #ffffff);
}

/* ---------- Rijksoverheid font (absoluut pad) ---------- */
@font-face { font-family: "RO Sans"; font-style: normal; font-weight: normal; font-display: swap;
    src: url("/RIVM/public/share/fonts/ROsanswebtextregular.woff") format("woff"); }
@font-face { font-family: "RO Sans"; font-style: italic; font-weight: normal; font-display: swap;
    src: url("/RIVM/public/share/fonts/ROsanswebtextitalic.woff") format("woff"); }
@font-face { font-family: "RO Sans"; font-style: normal; font-weight: bold; font-display: swap;
    src: url("/RIVM/public/share/fonts/ROsanswebtextbold.woff") format("woff"); }

/* ---------- Basis ---------- */
html { -webkit-text-size-adjust: 100%; }
body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: "RO Sans", Calibri, Verdana, Arial, sans-serif;
    font-size: 1.125rem;
    line-height: 1.6;
    margin: 0;
    min-height: 100vh;
}
*, *::before, *::after { box-sizing: border-box; }
:focus-visible { outline: 3px solid #000; outline-offset: 2px; }
*:disabled, .disabled { cursor: not-allowed !important; opacity: .45; }

h1, h2, h3, h4, h5, h6 { margin: 0 0 .75em; line-height: 1.25; }
h1 { font-size: 1.75rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.3rem; }
h4, h5, h6 { font-size: 1.125rem; }

form  { margin: 0; }
img   { max-width: 100%; height: auto; border: 0; }
table { border-collapse: collapse; font-size: inherit; }

a, a:visited { color: var(--link-color); text-decoration: underline; }
a:hover, a:focus { color: var(--link-color-hover); text-decoration-thickness: 2px; }

/* ---------- Formulier ---------- */
input, select, textarea {
    background: var(--form-input-bg-color);
    border: 1px solid var(--form-input-border-color);
    border-radius: var(--radius-control);
    color: var(--text-color);
    flex-grow: 1;
    font-family: inherit;
    font-size: inherit;
    margin: 0;
    max-width: 100%;
    min-height: 44px;
    padding: 0 1rem;
    text-overflow: ellipsis;
}
input:focus, select:focus, textarea:focus {
    outline: 3px solid var(--form-input-border-color);
    outline-offset: 1px;
}
input[type=checkbox], input[type=radio] {
    flex-grow: 0; width: 1.25rem; height: 1.25rem; min-height: 0; padding: 0;
    accent-color: var(--button-primary-color); vertical-align: middle;
}
.radio-div { display: flex; align-items: center; gap: .5rem; margin: .25rem 0; }

button, a.button, a.button:visited,
input[type=button], input[type=submit], input[type=reset] {
    align-items: center;
    background-color: var(--button-primary-color);
    border: 2px solid var(--button-primary-color);
    border-radius: var(--radius-control);
    color: var(--button-primary-text-color);
    cursor: pointer;
    display: inline-flex;
    flex-grow: 0;
    font-family: inherit;
    font-size: 1rem;
    font-weight: bold;
    justify-content: center;
    line-height: 1.25;
    min-height: 44px;
    padding: .5rem 1.25rem;
    position: relative;
    text-decoration: none;
}
button:hover, a.button:hover,
input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover {
    background-color: var(--button-primary-color-hover);
    border-color: var(--button-primary-color-hover);
    color: var(--button-primary-text-color-hover);
}

/* ---------- Header / logo ---------- */
table#page_header, table.page_header_image { display: block; height: auto; width: 100%; }
table.page_header_image tbody, table.page_header_image tr { display: contents; }
table.page_header_image td {
    display: block; padding: 0 0 1rem !important; text-align: left; background-color: transparent !important;
}
table.page_header_image td img {
    display: block; margin-left: 50%; max-width: calc(100% - 3rem); transform: translateX(-50%); width: 300px;
}
/* Logo's met het lint: lint in het midden van de pagina (Rijkshuisstijl) */
table.page_header_image img[src$="/rivm_svg.svg"]                   { max-width: 50%;  transform: translateX(-8%); }
table.page_header_image img[src$="/rijksoverheid_logo_no-text.svg"] { max-width: 55px; transform: translateX(-50%); }
table.page_header_image img[src$="/rijksoverheid_logo.svg"]         { max-width: 200px; transform: translateX(-8%); }

/* ---------- Titelbalk + kleurband ---------- */
.titlebar {
    background-color: var(--brand-color-light);
    color: var(--brand-color-light-text);
    font-size: 1.3rem;
    font-weight: bold;
    line-height: 1.3;
    margin-bottom: var(--default-spacing);
    overflow: visible;
}
.titlebar > .wrapper {
    margin: 0 auto;
    max-width: calc(100% - 2 * var(--default-spacing));
    padding: .6rem 0;
    width: var(--col-width);
}
.titlebar > .wrapper:empty { min-height: calc(1.3em + 1.2rem); }
/* header.inc: #search staat NA de titelbar i.p.v. erin -> geen gat tussen balk en band */
.titlebar:has(+ #search) { margin-bottom: 0; }
.titlebar + #search { margin-bottom: var(--default-spacing); }
.titlebar em, .titlebar i, .titlebar small { font-size: .8em; font-weight: normal; }
.titlebar #search, #search {
    background-color: var(--brand-color);
    color: var(--brand-color-text);
    font-size: .875em;
    min-height: 44px;
}
#search nav ul { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
#search nav ul li { margin: 0; }
#search nav ul li a {
    background-color: var(--nav-color); color: var(--nav-text-color);
    display: block; font-weight: normal; line-height: 44px; padding: 0 .75em; text-decoration: none;
}
#search nav ul li a:hover { background-color: var(--nav-color-hover); color: var(--nav-text-color-hover); }

/* ---------- Content kolom ---------- */
#content {
    margin: 0 auto;
    max-width: calc(100% - 2 * var(--default-spacing));
    width: var(--col-width);
}
#content h1 { font-size: 1.5rem; margin: 0 0 .75em; }
#content:empty, #content h1:empty { display: none; }

/* ---------- Kaarten (logon, logout, keuze, message box) ---------- */
table#main_table:not(.footer_page), table.main_table, table.logon_page, table.logout_page,
table.decision_box, table.cust_main_table {
    background-color: var(--box-bg-color);
    border: 0;
    border-collapse: separate;
    border-radius: var(--radius-card);
    box-shadow: var(--card-shadow);
    display: table;
    margin: 0 auto var(--default-spacing);
    max-width: calc(100% - 2 * var(--default-spacing));
    width: var(--col-width);
}
#main_table:not(.footer_page) > tbody > tr > td,
.logout_page > tbody > tr > td, .cust_main_table > tbody > tr > td {
    padding: var(--default-spacing);
    background-color: transparent;
}
/* logout / message box / deny-pagina's (class="main_table"): de template nest
   <tr> in <td>, waardoor elke regel een eigen rij wordt -> compacte rijen */
table.main_table { padding: 1rem 0; border-spacing: 0; }
table.main_table > tbody > tr > td { padding: .4rem var(--default-spacing); background-color: transparent; }
table.main_table table { width: 100% !important; }          /* my.acl: width="500px" */
table.main_table table td { padding: .4rem 0 !important; }  /* my.acl: cellpadding="10" */
#sessionDIV { font-size: .875rem; color: #555; }
#sessionDIV:empty { display: none; }

/* Keuzescherm (bijv. RIVM Medewerker / Externe gebruiker) */
.decision_box, td#interaction_table_option_cell, .interaction_table_option_cell, #interaction_table_header { text-align: center; }
/* De keuze-cellen hergebruiken id="main_td_footer": expliciet als tabelcel houden */
table.decision_box { table-layout: fixed; }
table.decision_box > tbody > tr > td {
    display: table-cell; vertical-align: top; text-align: center;
    padding: var(--default-spacing) 1rem; border-radius: 0;
    transition: background-color .15s;
}
table.decision_box > tbody > tr > td:hover,
table.decision_box > tbody > tr > td:focus-visible { background-color: var(--brand-color-light) !important; }
table.decision_box > tbody > tr > td:first-child { border-radius: var(--radius-card) 0 0 var(--radius-card); }
table.decision_box > tbody > tr > td:last-child  { border-radius: 0 var(--radius-card) var(--radius-card) 0; }
table.decision_box > tbody > tr > td:only-child  { border-radius: var(--radius-card); }
table.decision_box td img { display: block; margin: 0 auto .75rem; }
table.decision_box td p { margin: 0; font-size: 1rem !important; }

/* "Start a new session" e.d. */
#IHoptions { display: inline-table; margin: 1rem auto; background: var(--box-bg-color); border-radius: var(--radius-control); }
#IHoptions td, td#interaction_table_option_cell { display: block; padding: .75rem 1.25rem; }
img[src$="images/sq-positive.gif"] { margin-right: .5rem; vertical-align: middle; }

/* ---------- Inlogformulier ---------- */
table#credentials_table { width: 100%; border-collapse: collapse; }
table#credentials_table td { display: flex; flex-direction: column; padding: 0; }
table#credentials_table .credentials_table_field_cell,
table#credentials_table .credentials_table_unified_cell { margin-bottom: 1rem; }
table#credentials_table #submit_row td { margin: .25rem 0 0; }
table#credentials_table label { flex-grow: 0; flex-shrink: 0; padding: .6rem 0 .3rem; margin-right: 1em; }
table#credentials_table .credentials_table_label_cell { display: block; float: left; }
#credentials_table_header { padding: 0 0 1rem; font-weight: bold; }
#credentials_table_header:empty { display: none; }
#credentials_table_postheader { padding: 0 0 1rem; }
#credentials_table_footer:empty { display: none; }
@media only screen and (min-width: 600px) {
    table#credentials_table td { flex-direction: row; align-items: center; }
    table#credentials_table label { width: 30%; padding: 0; }
    table#credentials_table #submit_row td { padding-left: calc(30% + 1em); }
}

/* ---------- Footer / supportteksten ---------- */
table.footer_page {
    background: none; border: 0; box-shadow: none; display: table;
    margin: 0 auto var(--default-spacing);
    max-width: calc(100% - 2 * var(--default-spacing));
    width: var(--col-width);
}
table.footer_page td, table.footer_page #main_td_footer {
    background: none !important; display: block;
    font-size: 1rem; line-height: 1.5; padding: 0; text-align: left;
}
/* Alleen een kaart als er daadwerkelijk inhoud in staat */
table.footer_page:has(#main_td_footer *) {
    background-color: var(--box-bg-color);
    border-radius: var(--radius-card);
    box-shadow: var(--card-shadow);
}
table.footer_page:has(#main_td_footer *) #main_td_footer { padding: var(--default-spacing); }
table.footer_page #main_td_footer p { margin: 0 0 .5rem; }
#main_td_footer ul { margin: 0; padding-left: 1.25rem; }
#main_td_footer li { margin: 0 0 .4rem; }
#main_td_footer > :last-child { margin-bottom: 0; }
/* Supportteksten bevatten soms losse <li> met <br> ertussen (zonder <ul>) */
#main_td_footer > br { display: none; }
#main_td_footer > li { margin: 0 0 .4rem 1.25rem; }
#main_td_footer > li:last-of-type { margin-bottom: 0; }

/* ---------- Meldingen / session expired ---------- */
#MessageDIV {
    margin: 0 auto;
    max-width: calc(100% - 2 * var(--default-spacing));
    text-align: center;
    width: var(--col-width);
}
#MessageDIV:empty { display: none; }
#MessageDIV > br { display: none; }
#MessageDIV > h3 { margin: 1.5rem 0 1rem; }
#MessageDIV h1, #MessageDIV h2, #MessageDIV h3 { font-size: 1.5rem; margin: 1rem 0 .75rem; }
#MessageDIV a.button, #MessageDIV table { margin-left: auto; margin-right: auto; }

.confirm, div[id^="noscript_confirm"],
.error,   div[id^="noscript_error"],
.info,    div[id^="noscript_info"],
.warning, div[id^="noscript_warning"] {
    border-radius: var(--radius-control);
    margin: 0 auto 1rem;
    max-width: calc(100% - 2 * var(--default-spacing));
    min-height: calc(var(--icon-size) + 2 * var(--default-spacing));
    padding: var(--default-spacing);
    padding-left: calc(var(--icon-size) + 2 * var(--default-spacing));
    position: relative;
    text-align: left;
    width: var(--col-width);
}
.confirm::before, div[id^="noscript_confirm"]::before,
.error::before,   div[id^="noscript_error"]::before,
.info::before,    div[id^="noscript_info"]::before,
.warning::before, div[id^="noscript_warning"]::before {
    display: block; height: var(--icon-size); width: var(--icon-size);
    left: var(--default-spacing); position: absolute; top: 50%; transform: translateY(-50%);
}
.confirm, div[id^="noscript_confirm"] { background-color: var(--confirm-bg-color); }
.error,   div[id^="noscript_error"]   { background-color: var(--error-bg-color); }
.info,    div[id^="noscript_info"]    { background-color: var(--info-bg-color); }
.warning, div[id^="noscript_warning"] { background-color: var(--warning-bg-color); }
.confirm::before, div[id^="noscript_confirm"]::before { content: var(--confirm-icon); }
.error::before,   div[id^="noscript_error"]::before   { content: var(--error-icon); }
.info::before,    div[id^="noscript_info"]::before    { content: var(--info-icon); }
.warning::before, div[id^="noscript_warning"]::before { content: var(--warning-icon); }

/* ---------- Webtop (webtop2) ---------- */
body.webtop2 .titlebar { margin-bottom: 0; }
body.webtop2 #search { position: relative; height: 0; min-height: 0; margin-bottom: 0; background: none; overflow: visible; }
body.webtop2 #search .wrapper { position: static; margin: 0; width: auto; max-width: none; }
body.webtop2 #search .wrapper > div {
    position: absolute !important; float: none !important; margin: 0 !important;
    top: -48px; right: 1rem; height: 48px;
    display: flex !important; align-items: center; gap: .5rem; overflow: visible !important;
}
body.webtop2 button#disconnect {
    display: inline-flex; align-items: center; gap: .4rem; float: none; margin: 0;
    min-height: 0; padding: .3rem .9rem; font-size: .9rem; line-height: 1.2; height: auto;
}
body.webtop2 button#disconnect img  { display: inline-block; width: 16px; height: 16px; filter: brightness(0) invert(1); }
body.webtop2 button#disconnect span { display: inline; padding: 0; color: inherit; }
body.webtop2 div#webtop_searchdiv { text-align: center; margin: 8px 0 12px; }
body.webtop2 div#webtop_favorites_outer_container2 {
    width: auto; max-width: 1240px; margin: 10px auto 40px; padding: 0 20px; text-align: left; float: none;
}
body.webtop2 #webtop_favorites_inner_container2 div.resourcetype div.title {
    font-size: 1.25rem; font-weight: bold; color: var(--text-color);
    border-bottom: 3px solid var(--brand-color); padding-bottom: 3px;
}
body.webtop2 #webtop_favorites_inner_container2 span.favorite {
    height: auto; min-height: 0; padding-bottom: 8px; overflow: hidden;
    border: 1px solid #e6e6e6; border-radius: var(--radius-control);
}
body.webtop2 #webtop_favorites_inner_container2 span.favorite:hover { border-color: var(--brand-color); }
body.webtop2 #webtop_favorites_inner_container2 span.favorite span.caption {
    font-size: 1rem; line-height: 1.3; overflow-wrap: anywhere; padding-right: 10px;
}
body.webtop2 #webtop_favorites_inner_container2 span.favorite span.caption span { width: auto; max-width: 161px; overflow-wrap: anywhere; }
body.webtop2 #webtop_favorites_inner_container2 span.favorite span.description {
    height: auto; max-height: 54px; overflow: hidden; font-size: 13px; line-height: 1.35; color: #555; margin: 2px 17px 0;
}

/* ---------- Hulpklassen ---------- */
.spacer { height: 60px; }
.center, .class_center { text-align: center; }
#payoff:empty, #payoff .wrapper:empty, #footer:empty { display: none; }

@media print {
    .titlebar #search, #search { display: none; }
    table#main_table, .main_table, .decision_box, .logout_page { box-shadow: none; border: 1px solid #ccc; }
}