/******************************************************************************
 * Cascading-Style-Sheets file for Admidio
 *
 * @copyright The Admidio Team
 * @see https://www.admidio.org/
 * @license https://www.gnu.org/licenses/gpl-2.0.html GNU General Public License v2.0 only
 *
 * Customized for oudleiding.den2.be (Scouts Den 2 oud-leiders).
 * Ported from v4.3.14 to v5.0.9 (Bootstrap 4 → Bootstrap 5) in Phase 3.4.
 *
 *****************************************************************************/

:root {
    --adm-navbar-height: 120px;                  /* brand-padding 5×2 + img-margin 10×2 + logo 90px */

    /* ── Den 2 brand palette (carried over from v4) ─────────────────────── */
    --hoofdkleur: #1d20b4;
    --hoverkleursecondary: #17186c;
    --hovercolortertiary: #dbe5fe;
    --hoverkleurvibrant: #F6D634;
    --alert: #C42729;
    --disabled: #5b5b77;
    --white: #ffffff;
    --lightgrey: #EEE;
    --darkgrey: #444444;

    /* ── Admidio v5 variables, retargeted to brand ─────────────────────── */
    --admidio-header-font-color: var(--white);
    --admidio-header-link-color: var(--lightgrey);
    --admidio-header-link-color-hover: var(--hoverkleurvibrant);
    --admidio-menu-bg-color-hover: var(--hoverkleursecondary);
    --admidio-menu-font-color-hover: var(--lightgrey);
    --admidio-clamp-text-lines: 0;

    /* ── Bootstrap 5 variables, retargeted to brand ────────────────────── */
    /*     
    --bs-primary: #1d20b4;
    --bs-primary-rgb: 29, 32, 180;
    --bs-secondary: #263340;
    --bs-secondary-rgb: 38, 51, 64;
    --bs-primary and --bs-secondary are injected at runtime from the
   `color_primary` system preference (see PagePresenter::addStyles).
   Set via Admin UI → Preferences → Design, or `adm_preferences` table. */
    --bs-tertiary: #e9ecef;
    --bs-tertiary-rgb: 233, 236, 239;          /* fixed: v5 vanilla had 269 (invalid) */
    --bs-success: #00b100;
    --bs-body-color: #263340;
    --bs-body-bg: #ffffff;
    --bs-link-color: var(--bs-primary);
    --bs-link-color-rgb: var(--bs-primary-rgb);
    --bs-link-hover-color: var(--hoverkleursecondary);
    --bs-link-hover-color-rgb: 23, 24, 108;
    --bs-focus-ring-color: var(--hovercolortertiary);
}

/***********************************/
/* Header                          */
/***********************************/
#adm_main_navbar {
    color: var(--admidio-header-font-color);
    background-color: var(--bs-primary);
    min-height: var(--adm-navbar-height);
    position: sticky;
    padding-bottom: 0;
    padding-top: 0;
    font-weight: bold;
    font-size: 1.7rem;
}

#adm_main_navbar .navbar-brand img {
    margin: 10px;
    max-height: 90px;
}

#adm_navbar_nav a, #adm_main_navbar .dropdown-toggle {
    color: var(--admidio-header-link-color);
    font-size: 1rem;
    padding: 0.3rem 0.6rem;
}

#adm_navbar_nav a:hover, #adm_main_navbar .dropdown-toggle:hover {
    color: var(--admidio-header-link-color-hover);
}

@media (max-width: 767px) {
    /* navbar should not be fixed at top in mobile view */
    #adm_main_navbar.fixed-top {
        position: relative;
        top: auto;
    }

    /* mobile: title on its own centered row, links below */
    #adm_main_navbar {
        flex-wrap: wrap !important;
        justify-content: center;
    }
    #adm_headline_organization {
        flex: 0 0 100% !important;
        text-align: center;
        font-size: 2.2rem;
        padding: 0.4rem 0;
    }
    #adm_navbar_nav {
        flex: 0 0 100% !important;
        justify-content: center;
    }
    #adm_navbar_nav .navbar-nav {
        margin-left: auto !important;
        margin-right: auto !important;
        justify-content: center;
        flex-wrap: wrap;
    }
}

#adm_dropdown_user_photo .dropdown-menu {
    padding: 1rem;
    width: 250px;
}

.admidio-content-col {
    padding: 0;
}

.admidio-content, .admidio-reduced {
    order: 1;
    padding-left: 1rem;
    padding-right: 1rem;
    max-width: 1000px;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    word-break: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.admidio-max-content {
    max-width: none;
}

/***********************************/
/* Sidebar Navigation              */
/***********************************/
/* Den 2 inverts v5's dark sidebar back to light grey with dark text */
.admidio-sidebar {
    padding: 0;
    background-color: var(--lightgrey);
    overflow-y: auto;
}

.admidio-module-headline {
    margin-top: 1rem;
}

.admidio-headline-mobile-menu {
    width: 100%;
    font-size: 1.1rem;
    color: var(--darkgrey);
    letter-spacing: 2px;
}

.admidio-headline-mobile-menu .btn {
    padding: 0;
    color: var(--darkgrey);
}

.admidio-menu-list {
    overflow-y: auto;
}

.admidio-menu-list a,
.admidio-menu-list .dropdown-item {
    color: var(--darkgrey);
}

.admidio-menu-list a:hover {
    color: var(--admidio-menu-font-color-hover);
    background-color: var(--admidio-menu-bg-color-hover);
}

/* placeholder menu entries (href="#") are non-interactive */
.admidio-menu-list a[href$="#"] {
    cursor: default;
    color: transparent;
    background: transparent;
    pointer-events: none;
}

.admidio-menu-list a[href$="#"]:hover {
    color: transparent !important;
    background-color: transparent !important;
}

@media (min-width: 768px) {
    /* sidebar should only be there in non-mobile view */
    .admidio-sidebar {
        position: sticky !important;
        top: var(--adm-navbar-height) !important;
        z-index: 1000;
        height: calc(100vh - var(--adm-navbar-height));
    }

    .admidio-menu-list {
        display: block !important;
    }
}

.admidio-menu-header {
    font-weight: bold;
    text-transform: uppercase;
    padding: 0.5rem 1rem;
    margin: 0;
    color: var(--darkgrey);                    /* v5 vanilla used light grey for dark sidebar */
}

@media (max-width: 767px) {
    .admidio-menu-header {
        display: none;
    }
}

/***********************************/
/* Page function menu              */
/***********************************/

.admidio-menu-function-node {
    margin-top: 25px;
}

.admidio-menu-function-node .nav-link {
    margin-right: 1.5rem;
    margin-top: 1rem;
    background-color: var(--bs-link-color);
}

@media (max-width: 767px) {
    .admidio-menu-function-node .nav-link {
        width: 150px;
        margin-right: 1rem;
    }
}

/***********************************/
/* Default tags                    */
/***********************************/

body {
    color: var(--bs-body-color);
}

a {
    text-decoration: none;
}

.btn, .btn:hover {
    color: var(--bs-body-bg);
    overflow-wrap: normal;
    word-wrap: normal;
    word-break: normal;
    hyphens: none;
}

.btn-primary {
    background-color: var(--bs-link-color);
    border-color: var(--bs-link-color);
}

.dropdown-toggle {
    white-space: normal;
}

/* Den 2: primary-button hover is yellow, distinct from link hover */
.btn-primary:hover {
    background-color: var(--hoverkleurvibrant);
    border-color: var(--hoverkleurvibrant);
}

.btn-primary.disabled, .btn-primary:disabled {
    background-color: var(--disabled);
    border-color: var(--disabled);
}

.btn-outline-primary, .btn-outline-primary:hover {
    color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
}

.btn-check:checked + .btn {
    color: var(--bs-body-bg) !important;
    background-color: var(--bs-secondary);
    border-color: var(--bs-secondary) !important;
}

.bg-info {
    background-color: var(--bs-secondary) !important;
}

/* default distance between elements */
.admidio-blog, .admidio-field-group, .pagination,
.admidio-info-created-edited, .admidio-img-presenter,
.navbar-filter, .table-responsive, .admidio-menu-function-node,
.dt-container, .admidio-margin-bottom, .admidio-content-header,
.admidio-content-subheader, .tab-content {
    margin-bottom: 2rem;
}

.admidio-tabbed-field-group, .admidio-accordion-field-group {
    margin-bottom: 1rem;
}

.admidio-tabbed-field-group:has( > .list-group), .admidio-accordion-field-group:has( > .list-group),
.admidio-tabbed-field-group .table-responsive, .admidio-accordion-field-group .table-responsive,
.admidio-tabbed-field-group .table-responsive .dt-container, .admidio-accordion-field-group .table-responsive .dt-container {
    margin-bottom: 0;
}

/* icon-text spacing — keep both .bi (v5 default) and .fas (FontAwesome) selectors
   until Phase 3.5 confirms which icon library the ported templates emit */
.admidio-icon-chain,
.nav-link .bi, .nav-link .fas,
.btn .bi, .btn .fas,
.alert .bi, .alert .fas,
.admidio-profile-user-right .bi, .admidio-profile-user-right .fas,
.checkbox .bi, .checkbox .fas,
input[type="radio"],
.accordion .bi, .accordion .fas,
.form-control-static > .bi, .form-control-static > .fas,
label img, .form-control-static img,
.admidio-icon-link .bi, .admidio-icon-link .fas,
a .bi, a .fas {
    margin-right: 0.5rem;
}

.admidio-icon {
    padding: 3px;
}

.icon-link .bi {
    height: initial;
}

.admidio-icon-link {
    padding: 3px;
    cursor: pointer;
}

.admidio-icon-link:hover {
    padding: 3px;
    border-radius: 50%;
    background-color: var(--bs-tertiary);
    filter: brightness(92%);
}

/* Den 2 prefers flat light-grey info alerts rather than v5's tinted primary */
.alert-info {
    background-color: var(--lightgrey);
    color: var(--bs-body-color);
    line-height: 100%;
}

.alert-info-registration {
    background-color: var(--lightgrey);
    color: var(--bs-body-color);
}

/* show vertical btn group in mobile view */
@media (max-width: 500px) {
    .btn-group {
        display: block;
    }

    .btn-group .btn {
        display: block;
        float: none;
        width: 100%;
    }
}

/***********************************/
/* Mark mandatory fields           */
/***********************************/
/* v5 uses bootstrap-icons; if Phase 3.5 keeps FA emit, the .control-label
   selector below covers the legacy template output as a fallback. */
.admidio-form-group-required .col-form-label:after,
.admidio-form-group-required .form-label:after,
.admidio-form-group-required > .form-check-label:after,
.admidio-form-group-required .control-label:after,
.admidio-form-group-required .checkbox label:after,
.admidio-form-required-notice span:after {
    font-family: "bootstrap-icons", "Font Awesome 5 Free", serif;
    font-size: 6pt;
    content: "\F287";
    color: var(--alert);
    white-space: nowrap;
    vertical-align: super;
    margin-left: 3px;
}

.admidio-form-required-notice {
    font-size: 9pt;
    margin: 0.5rem 0;
    text-align: right;
    width: 100%;
    display: inline-block;
    max-width: 1000px;
}

/***********************************/
/* Forms                           */
/***********************************/

.form-control:focus, .form-select:focus, button:focus,
.select2-container--bootstrap-5.select2-container--focus .select2-selection,
input[type=checkbox]:focus {
    border-color: var(--hoverkleursecondary);
    background-color: var(--hovercolortertiary);
    box-shadow: none !important;
}

.form-switch .form-check-input, .form-check-inline input:checked {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

input[type=date], input[type=number] {
    max-width: 200px;
}

input[type=time] {
    max-width: 110px;
}

input[type=checkbox] {
    margin-right: 10px;
}

.form-switch .form-check-input:not(:checked) {
    background-color: white !important;
    border-color: #999999 !important;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba(125,125,125,1.0)'/></svg>");
}

.btn-primary:focus {
    background-color: var(--bs-link-color) !important;
    border-color: var(--bs-link-color) !important;
}

label {
    font-weight: bold;
}

.form-separator-line {
    border-top: 2px solid;
    margin-bottom: 0;
}

.form-separator-line + label {
    font-size: 1.25em;
}

@media (min-width: 768px) {
    .form-control-small {
        width: 50%;
    }

    .offset-sm-3.btn {
        margin-left: 25.5%;
    }
}

.form-control-static {
    margin-bottom: 0;
}

.ck-editor__editable_inline {
    min-height: 300px;
}

@media (min-width: 768px) {
    .admidio-form-membership-period .admidio-form-group {
        word-wrap: normal !important;
        word-break: normal !important;
        padding: 0 !important;
        margin: 0 !important;
    }
}

.admidio-form-custom-content > div {
    padding-top: calc(0.375rem + 1px);
    padding-bottom: calc(0.375rem + 1px);
}

.datetime-date-control {
    display: inline-block;
}

.datetime-time-control {
    display: inline-block;
    width: 110px !important;
    margin-left: 20px;
}

.dropdown-menu .btn {
    text-align: left;
}

/***********************************/
/* Cards                           */
/***********************************/

.admidio-blog, .admidio-field-group, .admidio-tabbed-field-group, .admidio-accordion-field-group,
.admidio-blog .card-header, .admidio-blog .card-body, .admidio-blog .card-footer,
.admidio-field-group .card-header, .admidio-field-group .card-body, .admidio-field-group .card-footer,
.admidio-tabbed-field-group .card-header, .admidio-tabbed-field-group .card-body, .admidio-tabbed-field-group .card-footer,
.admidio-accordion-field-group .card-header, .admidio-accordion-field-group .card-body, .admidio-accordion-field-group .card-footer {
    border: none;
    background-color: var(--bs-tertiary);
}

.admidio-blog, .admidio-field-group {
    max-width: 1000px;
}

.card-header {
    font-weight: bold;
    font-size: 150%;
}

.card-header .bi, .card-header .fas, .card-header .fab {
    margin-right: 0.5rem;
}

.card-header .float-end .bi, .card-header .float-end .fas {
    margin-right: 0;
}

.card-header .dropdown .bi, .card-header .dropdown .fas, .card-header .dropdown .fab {
    margin-right: 0;
}

.admidio-blog .card-footer {
    font-size: 80%;
}

.admidio-field-group .list-group-item {
    border: none;
    background-color: var(--bs-tertiary);
    padding: 0 0 1rem 0;
}

.admidio-field-group .list-group-item .list-group-item {
    padding: 0;
}

.admidio-tabs {
    flex-wrap: nowrap;
    width: 100%;
}

.admidio-tabs .nav-item, .admidio-tabs .nav-link {
    display: flex;
}

.admidio-tabs .nav-link {
    flex-direction: column;
    justify-content: center;
    text-align: center;
    max-width: 250px;
}

.admidio-tabs .dropdown-toggle {
    white-space: normal;
    text-align: center;
    align-content: center;
}

.admidio-tabbed-field-group .card-body, .admidio-accordion-field-group .card-body {
    border-radius: var(--bs-card-inner-border-radius);
}

.admidio-tabbed-field-group .card-body .list-group-item,
.admidio-accordion-field-group .card-body .list-group-item {
    background-color: var(--bs-tertiary);
}

.admidio-tabbed-field-group .list-group-item, .admidio-accordion-field-group .list-group-item {
    border: none;
    padding: 0 0 1rem 0;
}

.admidio-tabbed-field-group .button, .admidio-accordion-field-group .button {
    padding: 0.5rem;
}

.admidio-tabbed-field-group .list-group-item .list-group-item,
.admidio-accordion-field-group .list-group-item .list-group-item {
    padding: 0;
}

.card .admidio-info-created-edited {
    margin-bottom: 0;
    margin-top: 0;
}

.card-footer .admidio-info-created-edited {
    font-size: 100% !important;
}

.card-body .list-group-item {
    padding-left: 0;
    background-color: var(--bs-tertiary);
}

/* Den 2 darkens comment cards slightly so they distinguish from posts */
.admidio-blog-comment .card-header,
.admidio-blog-comment .card-body,
.admidio-blog-comment .card-footer {
    background-color: #dddddd;
}

.admidio-blog-comment .card-header {
    font-size: 120%;
    padding-bottom: 0;
}

.admidio-blog-comment {
    margin-bottom: 1rem;
}

.admidio-blog .card-body > .btn {
    margin-top: 1rem;
    display: block;
    text-align: left;
}

.admidio-card {
    border: none;
    background-color: var(--bs-tertiary);
    margin: 1rem 0;
}

.admidio-blog img, .admidio-card img {
    max-width: 100% !important;
    height: auto !important;
}

.admidio-card li {
    padding-left: 0;
    padding-right: 0;
    background-color: var(--bs-tertiary);
}

/* Den 2 login card variant (template-driven) */
.admidio-card-login {
    border: none;
    background-color: var(--bs-tertiary);
    margin: 1rem 0;
    height: 95%;
}

.admidio-card-login li {
    padding-left: 0;
    padding-right: 0;
    background-color: var(--bs-tertiary);
}

/***********************************/
/* Tabs                            */
/***********************************/

.tab-content {
    padding: 1rem 1rem 0 1rem;
}

.tab-content:has( > .tab-pane > .accordion) {
    padding: unset;
}

/***********************************/
/* Accordion                       */
/***********************************/
/* Bootstrap 5 rewrites the accordion (BS4 used .card-header).
   v5 vanilla provides good defaults via --bs-accordion-* variables.
   Den 2 adds a hover state on the button. */

.accordion {
    --bs-accordion-bg: var(--bs-body-bg);
    --bs-accordion-btn-color: var(--bs-link-color);
    --bs-accordion-active-color: var(--bs-tertiary);
    --bs-accordion-active-bg: var(--bs-secondary);
}

.accordion-button {
    font-size: 1.3rem;
}

.accordion-button::after {
    background-image: none !important;
    background-color: var(--bs-accordion-btn-color);
    mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") no-repeat center;
}

.accordion-button:not(.collapsed)::after {
    background-color: var(--bs-accordion-active-color);
}

.accordion-button:hover {
    color: var(--lightgrey);
    background-color: var(--disabled);
    cursor: pointer;
}

.accordion-button:focus {
    box-shadow: none;
}

.accordion-body {
    padding: 1rem 1rem 0 1rem;
}

.tab-content .accordion .accordion-item:first-child {
    border-top: unset;
}

.tab-content .accordion .accordion-item:last-child {
    border-bottom: unset;
}

.tab-content .accordion .accordion-item {
    border-left: unset;
    border-right: unset;
}

.tab-content .accordion .accordion-item:first-of-type > .accordion-header .accordion-button {
    border-radius: unset;
}

/***********************************/
/* Navbar                          */
/***********************************/

.navbar {
    --bs-navbar-padding-x: 1rem;
}

.navbar button {
    margin-bottom: 0;
}

.navbar label {
    margin-right: 10px;
}

.navbar-filter {
    background-color: var(--bs-tertiary);
}

/* legacy .form-group safety — BS5 removed the class but templates may still emit it */
.navbar-filter .form-group, .navbar-filter .admidio-form-group {
    margin-top: 5px;
    margin-bottom: 5px;
}

.navbar .admidio-form-group {
    margin-right: 0.5rem;
}

.nav-tabs {
    margin-bottom: 0;
}

.nav-tabs .nav-link {
    background-color: var(--bs-tertiary);
    border-color: var(--bs-nav-tabs-border-color);
    font-weight: bold;
}

/***********************************/
/* Tables                          */
/***********************************/

.table td, .table th {
    color: var(--bs-body-color);
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.table-hover tbody tr td .admidio-functions {
    visibility: hidden;
}

.table-hover tbody tr:hover td .admidio-functions {
    visibility: visible;
}

/***********************************/
/* Various settings                */
/***********************************/

.admidio-opacity-reduced {
    opacity: 0.4;
}

.list-unstyled li {
    padding-top: 0.5rem;
}

.admidio-info-created {
    display: block;
}

.admidio-info-created-edited {
    font-size: 80%;
}

.dropdown-item {
    color: var(--bs-secondary);
    background: var(--bs-body-bg);
}

/* Den 2 popover: dark header, light body */
.popover {
    --bs-popover-bg: var(--lightgrey);
    --bs-popover-header-bg: var(--bs-secondary);
    --bs-popover-header-color: var(--white);
}

.tooltip {
    --bs-tooltip-bg: var(--bs-secondary);
}

.breadcrumb {
    --bs-breadcrumb-bg: var(--bs-tertiary);
    --bs-breadcrumb-padding-y: 0.75rem;
    --bs-breadcrumb-padding-x: 1rem;
}

.breadcrumb-item {
    display: block;
    -webkit-text-fill-color: var(--darkgrey);
}

.badge {
    --bs-badge-padding-y: .25em;
    --bs-badge-padding-x: .5em;
    margin-left: 0.5rem;
}

.page-item.active .page-link {
    background-color: var(--hoverkleursecondary);
    border-color: var(--hoverkleursecondary);
}

#adm_imprint {
    margin-bottom: 2rem;
    font-size: 80%;
    overflow-wrap: normal;
    word-wrap: normal;
    word-break: normal;
    hyphens: none;
}

.admidio-info-icon {
    color: var(--hoverkleurvibrant);
    cursor: pointer;
    margin-left: 0.5rem;
}

#adm_profile_photo, #adm_inventory_item_picture {
    max-width: 300px;
    width: 100% !important;
    object-fit: cover !important;
}

#adm_profile_photo.adm-default-photo {
    max-width: 120px;
}

.admidio-profile-user-right {
    cursor: help;
}

/* Den 2 prefers neutral grey highlight for events; v5 vanilla used dark blue */
.admidio-event-highlight .card-header,
tr.admidio-event-highlight {
    background-color: #cccccc !important;
}

tr.admidio-event-highlight {
    font-weight: bold;
}

/* event approval states — colour both the row and any icon span (.fas/.bi/base) */
.admidio-event-approval-state-attend,
.admidio-event-approval-state-attend .bi,
.admidio-event-approval-state-attend .fas {
    color: #00b100 !important;
}

.admidio-event-approval-state-tentative,
.admidio-event-approval-state-tentative .bi,
.admidio-event-approval-state-tentative .fas {
    color: #9b009b !important;
}

.admidio-event-approval-state-cancel,
.admidio-event-approval-state-cancel .bi,
.admidio-event-approval-state-cancel .fas {
    color: #df2424 !important;
}

.card-img, .card-img-top {
    height: 200px !important;
    object-fit: cover !important;
}

/* v5 renamed admidio-album-thumbnail → admidio-photos-thumbnail; keep both */
.admidio-photos-thumbnail, .admidio-album-thumbnail {
    margin-bottom: 2rem;
}

.admidio-photos-thumbnail .rounded,
.admidio-album-thumbnail .rounded {
    width: 100% !important;
    object-fit: cover !important;
}

.admidio-img-presenter img {
    max-width: 100%;
    height: auto;
}

.admidio-forum-entry-info {
    font-size: 80%;
}

.admidio-forum-topic p {
    margin: 0 !important;
}

#adm_password_strength {
    margin-top: 0.5rem;
}

#adm_password_strength_minimum {
    position: absolute;
    border: 9px solid transparent;
    border-left-color: var(--hoverkleursecondary);
    border-right-width: 0;
    margin-top: 3px;
}

.progress {
    height: 1.5rem !important;
    background-color: var(--bs-tertiary);
    filter: brightness(92%);
}

/***********************************/
/* Welcome page (Den 2)            */
/***********************************/

.welcome-text {
    padding-left: 20px;
    padding-right: 20px;
}

.welcome-title {
    font-size: large;
    font-weight: 400;
    color: var(--hoofdkleur);
}

@media (min-width: 768px) {
    .welcome-text-block {
        padding-right: 80px;
    }
}

/***********************************/
/* Search member box (Den 2)       */
/***********************************/

.search-member-box {
    max-width: 400px;
    font-size: 14px;
    padding: 6px 10px;
    margin-top: -40px;
}

.plugin-search-member {
    padding-top: 20px;
}

.search-description {
    /* reserved hook — empty in v4, kept for template parity */
}

/***********************************/
/* Password tooltip (Den 2)        */
/***********************************/
/* inline text only on mobile, tooltip only on desktop */

.mobile-pw {
    display: none;
    font-style: italic;
}

@media (max-width: 767px) {
    .password-tooltip {
        display: none !important;             /* no hover tooltip on mobile */
    }
    .mobile-pw {
        display: inline;                       /* show inline text on mobile */
    }
}

.password-tooltip {
    position: fixed;
    background: var(--hoofdkleur);
    color: var(--white);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 1rem;
    pointer-events: none;
    z-index: 10001;
    white-space: nowrap;
}

/***********************************/
/* Overleden (Den 2)               */
/***********************************/

.deceased {
    filter: grayscale(1);
    opacity: 0.6;
}

.deceased .profile-name,
.deceased .card-header,
.deceased .nav-link {
    color: grey !important;
}

/***********************************/
/* Overview page / Announcement plugin */
/***********************************/

/* Clamp only the description content, leaving room for the "more" link below */
#admidio-plugin-announcement-list .announcement-description {
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Style the "see full message" link */
#admidio-plugin-announcement-list .announcement-more-link a {
    font-weight: bold;
    color: var(--hoofdkleur);
    text-decoration: none;
}

#admidio-plugin-announcement-list .announcement-more-link a:hover {
    text-decoration: underline;
}

#admidio-plugin-announcement-list .list-group{
    --bs-list-group-border-color: #8f8fba;
    --bs-list-group-border-width: 2px;
}

/***********************************/
/* Overview page / Calendar plugin */
/***********************************/

.admidio-plugin-content .list-group-item {
    padding-left: 0;
}

#plgCalendarTable {
    width: 100%;
}

#plgCalendarTable td {
    text-align: center;
}

/* Den 2: today = vibrant yellow (v5 vanilla used --bs-body-color = dark) */
#plgCalendarTable td.plgCalendarToday {
    background-color: var(--hoverkleurvibrant);
    border-radius: 5px;
    color: var(--white);
}

#plgCalendarTable a.admidio-calendar-link.date {
    font-weight: 800;
    color: var(--alert);
}

#plgCalendarTable a.admidio-calendar-link.geb {
    font-weight: 600;
    color: var(--hoofdkleur);
}

#plugin-login-form .btn {
    margin-bottom: 1rem;
}

/***********************************/
/* Profile page (Den 2)            */
/***********************************/
/* Boerde-leiding cards: two columns on tablet+ */

@media (min-width: 768px) {
    #content.admidio-content .boerde-leiding-card {
        float: left;
        width: calc(50% - 1rem);
        margin-right: 1rem;
        margin-bottom: 1rem;
        box-sizing: border-box;
    }
    /* other cards clear below the floats */
    #content.admidio-content .admidio-field-group:not(.boerde-leiding-card) {
        clear: both;
    }
}

/* Flex container variant for boerde-leiding cards */
@media (min-width: 768px) {
    .boerde-leiding-row {
        display: flex;
        gap: 1rem;
        margin-bottom: 2rem;
        clear: both;
    }
    .boerde-leiding-row .boerde-leiding-card {
        flex: 1 1 0;
        box-sizing: border-box;
        margin: 0;
        float: none !important;
    }
}

/* Inline layout for the first two form rows inside boerde-leiding cards */
@media (min-width: 768px) {
    /* 1) target the first two form-groups under .card-body form */
    .boerde-leiding-card .card-body form .form-group.row:nth-of-type(2),
    .boerde-leiding-card .card-body form .form-group.row:nth-of-type(3) {
        display: inline-flex !important;
        align-items: center;
        margin: 0 1rem 1rem 0;
        padding: 0;
    }

    /* 2) label and value side by side */
    .boerde-leiding-card .card-body form .form-group.row:nth-of-type(2) .control-label,
    .boerde-leiding-card .card-body form .form-group.row:nth-of-type(3) .control-label,
    .boerde-leiding-card .card-body form .form-group.row:nth-of-type(2) .col-form-label,
    .boerde-leiding-card .card-body form .form-group.row:nth-of-type(3) .col-form-label {
        margin: 0 0.5rem 0 0;
        white-space: nowrap;
    }

    .boerde-leiding-card .card-body form .form-group.row:nth-of-type(n+1) p.form-control-static,
    .boerde-leiding-card .card-body form .form-group.row:nth-of-type(n+1) .form-control-plaintext {
        margin: 0;
    }

    /* 3) hyphen between the first and second group */
    .boerde-leiding-card .card-body form .form-group.row:nth-of-type(2)::after {
        content: "\2013";                      /* en-dash */
        margin: 0 0.5rem;
        color: var(--darkgrey);
    }
}

/***********************************/
/* Preferences page (v5)           */
/***********************************/

.admidio-preferences-group {
    width: 100%;
}

.admidio-preferences-group .list-group-item.nav-item {
    border-right: none;
    border-bottom: none;
    padding: 0;
}

.admidio-preferences-group .list-group-item.group-heading {
    width: 100%;
    border-bottom: none;
    border-top: var(--bs-list-group-border-width) solid var(--bs-list-group-border-color);
    border-top-left-radius: var(--bs-list-group-border-radius);
    border-top-right-radius: unset;
}

.admidio-preferences-group .list-group-item.group-last {
    margin-bottom: 1rem;
    border-bottom-left-radius: var(--bs-list-group-border-radius);
}

/***********************************/
/* Changelog configuration (v5)    */
/***********************************/

ul.changelog-tableselect-list {
    list-style-type: none;
}

/************************************/
/* Subinfo form controls (v5)        */
/************************************/

.subinfo-row .subinfo-sub-row label, .col-form-sublabel {
    padding-left: 2.5em;
    font-weight: normal;
}

.subinfo-sub-row, .subinfo-row {
    margin-bottom: 0 !important;
}

.subinfo_head {
    margin-bottom: 1.5rem;
}

.col-form-label.col-form-sublabel {
    padding-top: 2pt;
    padding-bottom: 2pt;
}

.subinfo-row .form-control-plaintext {
    width: 75%;
}

.subinfo-sub-row .form-control-plaintext {
    width: 75%;
    padding-bottom: 0;
    padding-top: 0;
}

/***********************************/
/* Clamp text (v5)                 */
/***********************************/

.clamp-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--admidio-clamp-text-lines);
    line-clamp: var(--admidio-clamp-text-lines);
    overflow: hidden;
}

.clamp-text.expanded {
    -webkit-line-clamp: unset;
    line-clamp: unset;
    overflow: visible;
}