/* ######################################################################## */
/* ### OZK PORTO-PORT — selectieve overname D7 porto_sub/custom_sub.css     */
/* ### Fase 6b (2026-07-12): boxheaders, knoppen, statuskleuren, headings,  */
/* ### rapporttabellen. Waarden 1:1 uit D7 (regels 181-2071).               */
/* ######################################################################## */

/* ======================================================================== */
/* 1. BOXHEADER-FAMILIE (formulier-intro's, paneelkoppen)                   */
/* ======================================================================== */
.parentdiv {
    background   : whitesmoke;
    display      : block;
    width        : 100%;
    margin       : 5px 0 15px 0;
}
.boxheader {
    width        : 100%;
    padding      : 5px 10px 5px 10px;
    border-style : solid;
    border-width : 0;
    border-color : darkgrey;
}
.boxheaderright {
    margin       : 0 5px 0 0;
    float        : right;
}
.boxheaderhelptext {
    font-family  : Rambla, Arial, Helvetica, sans-serif;
    font-size    : x-small !important;
    color        : darkgrey !important;
    margin       : 10px 5px 0 0 !important;
}
.boxheadercaption {
    font-family  : Rambla, Arial, Helvetica, sans-serif;
    font-size    : large !important;
    margin       : 10px 5px 0 0 !important;
}
.boxheadericon {
    color        : #C8C8C8 !important;
    margin       : 10px 0 0 0;
    font-size    : 18px;
}
.h2heading {
    font-family  : Rambla, Arial, Helvetica, sans-serif;
    font-size    : 1.5em;
    text-transform: uppercase;
}
.h3heading {
    font-family  : Rambla, Arial, Helvetica, sans-serif;
    font-size    : 1.3em;
    text-transform: uppercase;
}
.h4heading {
    font-family  : Rambla, Arial, Helvetica, sans-serif;
    font-size    : 1.1em;
}

/* ======================================================================== */
/* 2. KNOPPEN (a.button-familie, stappenplan/dashboards)                    */
/* ======================================================================== */
a.button {
    width        : 100%;
    padding      : 10px 5px 10px 5px;
    font-family  : Rambla, Arial, Helvetica, sans-serif;
    font-size    : 14px;
    text-decoration: none;
    outline      : none;
    border       : 1px solid;
    border-color : darkgray;
    border-radius: 0;
    display      : block;
}
a.button.margin { width: 100%; margin: 0 0 10px 0; }
a.button:hover  { opacity: 0.8; }
.buttonicon {
    margin       : 3px 3px 3px 3px !important;
    font-size    : 14px;
    float        : left !important;
    text-align   : left !important;
}
.kadericon {
    margin       : 5px 3px 3px 0 !important;
    padding      : 0 !important;
    font-size    : 18px;
    line-height  : 18px;
}
.material-symbols-outlined.md-48 { font-size: 48px !important; }
.material-symbols-outlined.md-60 { font-size: 60px !important; }
.material-symbols-outlined.md-72 { font-size: 72px !important; }

/* ======================================================================== */
/* 3. HUISSTIJL-STATUSKLEUREN (knoppen + badges, exact D7)                  */
/* ======================================================================== */
.success {
    background-color: #28881e !important;
    border          : 1px solid;
    border-color    : darkgray !important;
    color           : #F7F7F7 !important;
}
.info {
    background-color: #006E83 !important;
    border          : 1px solid;
    border-color    : darkgray !important;
    color           : #F7F7F7 !important;
}
.warning {
    background-color: #cc4d00 !important;
    border          : 1px solid;
    border-color    : darkgray !important;
    color           : #F7F7F7 !important;
}
.danger {
    background-color: #c13c61 !important;
    border          : 1px solid;
    border-color    : darkgray !important;
    color           : #F7F7F7 !important;
}
a.button.ongecheckt {
    background-color: #cc4d00 !important;
    border          : 1px solid;
    border-color    : darkgray !important;
    color           : #F7F7F7 !important;
}
a.button.bijgewerkt {
    background-color: #28881e !important;
    border          : 1px solid;
    border-color    : darkgray !important;
    color           : #F7F7F7 !important;
}
.grijs {
    background-color: whitesmoke !important;
    border          : 1px solid;
    border-color    : lightgray !important;
    color           : black;
}
a.button.grijs:hover {
    color           : black !important;
    background-color: lightgray !important;
    border-color    : darkgray !important;
}
.skyblue { background: skyblue !important; color: black !important; }

/* ======================================================================== */
/* 4. RAPPORTTABELLEN (views): leesbare koppen, D7-look                     */
/* ======================================================================== */
.view table { width: 100%; }
.geenwrap table td { white-space: nowrap; }
.view table > thead > tr > th,
.view table > thead > tr > td {
    background-color: whitesmoke;
    color           : #444444;
    font-family     : Rambla, Arial, Helvetica, sans-serif;
    text-transform  : uppercase;
    border-bottom   : 2px solid #cccccc;
}
.view .table-hover tbody tr:hover { background-color: #f5f5f5; }

/* ======================================================================== */
/* 5. INTRANET-MENUBAND (superfish in highlighted-regio)                    */
/*    Tabs-look zoals D7: witte knoppen, OZK-blauwe band binnen container   */
/* ======================================================================== */
.highlighted .block-superfish {
    background   : #21597d;
    padding      : 6px 10px 2px 10px;
    margin-bottom: 0;
}
.highlighted .block-superfish ul.sf-menu {
    display      : flex;
    flex-wrap    : wrap;
    margin       : 0;
    padding      : 0;
    list-style   : none;
}
.highlighted .block-superfish ul.sf-menu > li {
    background-color: #ffffff;
    border          : 1px solid #e2e2e2;
    border-bottom   : 2px solid #cccccc;
    margin          : 0 5px 4px 0;
    position        : relative;
}
.highlighted .block-superfish ul.sf-menu > li > a {
    color           : #444444;
    padding         : 8px 16px;
    font-family     : Rambla, Arial, Helvetica, sans-serif;
    font-weight     : 500;
    text-transform  : uppercase;
    text-decoration : none;
    display         : block;
}
.highlighted .block-superfish ul.sf-menu > li:hover,
.highlighted .block-superfish ul.sf-menu > li.sfHover,
.highlighted .block-superfish ul.sf-menu > li.active-trail {
    background-color: #c13c61;
    border-color    : #9c2345;
}
.highlighted .block-superfish ul.sf-menu > li:hover > a,
.highlighted .block-superfish ul.sf-menu > li.sfHover > a,
.highlighted .block-superfish ul.sf-menu > li.active-trail > a {
    color           : #ffffff;
}
.highlighted .block-superfish ul.sf-menu ul {
    background-color: #f9f9f9;
    border          : 1px solid #e2e2e2;
    min-width       : 220px;
    z-index         : 500;
}
.highlighted .block-superfish ul.sf-menu ul li {
    background-color: #f9f9f9;
    border          : 0;
    margin          : 0;
}
.highlighted .block-superfish ul.sf-menu ul li a {
    color           : #444444;
    padding         : 7px 14px;
    text-transform  : none;
    display         : block;
    text-decoration : none;
}
.highlighted .block-superfish ul.sf-menu ul li:hover > a {
    background-color: #eeeeee;
    color           : #c13c61;
}

/* ======================================================================== */
/* 6. TITEL-VELDBLOK IN LAYOUTS (layout_library kolom 1) — h1-look als D7   */
/* ======================================================================== */
.block-field-blocknodepagetitle .field--name-title {
    font-family    : Rambla, Arial, Helvetica, sans-serif;
    font-size      : xx-large;
    margin         : 7px 0;
    text-transform : uppercase;
    font-weight    : 700;
    line-height    : 1.2;
}

/* ======================================================================== */
/* 7. Betalingen overzicht (view contributions, display                     */
/* betalingen_overzicht) — tabel-layout, uitlijning & status-pills          */
/* (Voldaan groen / Openstaand oranje).                                     */
/* ======================================================================== */
.view-display-id-betalingen_overzicht table.table {
    width: 100%;
    margin-bottom: 0.5rem;
    font-size: 0.85rem;
    background-color: transparent;
}

.view-display-id-betalingen_overzicht table.table > :not(caption) > * > * {
    background-color: transparent;
    box-shadow: none;
    color: inherit;
    padding: 6px 5px;
    vertical-align: middle;
    border-bottom: 1px solid #f0f0f0;
}

/* Header: compact, strak en subtiel */
.view-display-id-betalingen_overzicht table.table > thead > tr > th {
    border-top: 0;
    border-bottom: 2px solid #ddd;
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #495057;
    white-space: nowrap;
}

/* Eerste en laatste kolom vullen de breedte van het blokje maximaal */
.view-display-id-betalingen_overzicht table.table th:first-child,
.view-display-id-betalingen_overzicht table.table td:first-child {
    padding-left: 0;
    white-space: nowrap;
}

.view-display-id-betalingen_overzicht table.table th:last-child,
.view-display-id-betalingen_overzicht table.table td:last-child {
    padding-right: 0;
    text-align: right;
    white-space: nowrap;
}

/* Kolomuitlijning en nowrap */
.view-display-id-betalingen_overzicht .views-field-financial-type {
    white-space: nowrap;
}

.view-display-id-betalingen_overzicht .views-field-net-amount {
    text-align: right;
    white-space: nowrap;
}

.view-display-id-betalingen_overzicht .views-field-saldo-1576 {
    text-align: right;
    white-space: nowrap;
}

/* Status-pills voor Restant: compacte badge (Voldaan groen / Openstaand oranje) */
.ozk-voldaan,
.ozk-openstaand {
    display        : inline-block;
    font-size      : 0.80em;
    font-weight    : 600;
    line-height    : 1.35;
    padding        : 4px 6px;
    min-width      : 76px;
    text-align     : center;
    border         : 1px solid transparent;
    border-radius  : 4px;
    white-space    : nowrap;
    box-sizing     : border-box;
    text-decoration: none;
    color          : #fff !important;
}

.ozk-voldaan {
    background     : #4e8a3a;
}

.ozk-openstaand {
    background     : #cc4d00;
}

.ozk-openstaand:hover,
.ozk-openstaand:focus {
    background     : #b34300;
    color          : #fff !important;
    text-decoration: none;
}