/*
 * Portal-specific rules that sit on top of the legacy theme files (css/legacy/*) and the bifa.org theme.
 * The legacy NAJ custom.css makes some Bootstrap column classes "width:auto"; the new pages rely on the
 * normal grid, so it is restored inside the main content area.
 */
body { min-height: 100vh; }

.portal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.portal-header-actions { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; justify-content: flex-end; }
.portal-header .btn { text-transform: uppercase; font-weight: 500; }
.portal-header .navbar-brand { flex: 0 0 auto; }
.portal-header .navbar-brand img { width: 150px; height: auto; max-width: none; }

.portal-rule { height: 0; margin: 0; }

.portal-loader {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(255, 255, 255, 0.6);
    align-items: center;
    justify-content: center;
}
.portal-loader.is-visible { display: flex; }

#wrapper-footer { margin-top: 2rem; background: #f4f4f1; color: #343a40; }
#wrapper-footer .site-info { font-size: 0.8rem; }

/*
 * The legacy NAJ theme makes some Bootstrap columns "width:auto" and gives every .row a bottom margin. The booking form
 * (.grid_24) was designed with that, so it is left exactly as it was. The dashboard's own forms use the normal grid.
 */
.fv-content-block .row { margin-bottom: 0; }
@media (min-width: 768px) {
    .fv-content-block .row > .col-md-2 { width: 16.66666667%; padding-left: calc(var(--bs-gutter-x, 1.5rem) * .5); padding-right: calc(var(--bs-gutter-x, 1.5rem) * .5); }
    .fv-content-block .row > .col-md-3 { width: 25%; }
    .fv-content-block .row > .col-md-9 { width: 75%; padding-left: calc(var(--bs-gutter-x, 1.5rem) * .5); padding-right: calc(var(--bs-gutter-x, 1.5rem) * .5); }
}
@media (min-width: 992px) {
    .fv-content-block .row > .col-lg-10 { width: 83.33333333%; padding-left: calc(var(--bs-gutter-x, 1.5rem) * .5); padding-right: calc(var(--bs-gutter-x, 1.5rem) * .5); }
}
/* Dashboard side menu in the portal's navy/blue palette. */
aside .list-group-item.active { background-color: #002d61; border-color: #002d61; color: #fff; }
aside .list-group-item-action:hover { background-color: #eef3f9; }
.card { border-color: #dee2e6; }

/* The legacy theme styles bare inputs/selects; keep Bootstrap's form controls full width in forms. */
main .form-control, main .form-select { width: 100%; }
.invalid-feedback.d-block, .is-invalid { color: #E64010; }
/* The legacy theme asks for Open Sans, which this site does not load; use the portal font. */
main label, main .form-label { font-family: var(--bs-body-font-family); font-weight: 500; }
main .form-check-input { width: 1em; height: 1em; }

/* select2 dropdowns (organisation picker, multi-selects) look like the plain form selects */
.main_content .select2-container,
.main_content .select2-container--default {
    width: 100% !important;
}
.main_content .select2-container--default .select2-selection--single {
    height: 40px;
    border: thin solid #525252;
    border-radius: 0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.17);
    background: #fff;
    display: flex;
    align-items: center;
}
.main_content .select2-container--default .select2-selection--single .select2-selection__rendered {
    width: 100%;
    padding: 0 30px 0 12px;
    line-height: 38px;
    font-size: 17px;
    color: inherit;
}
.main_content .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: inherit;
}
.main_content .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 38px;
    right: 6px;
}
.main_content .select2-container--default .select2-selection--single .select2-selection__clear {
    margin-right: 6px;
    line-height: 38px;
}
.main_content .select2-container--default.select2-container--focus .select2-selection--single,
.main_content .select2-container--default.select2-container--open .select2-selection--single {
    border-color: #525252;
}
.select2-dropdown {
    border-radius: 0;
    border: thin solid #525252;
    font-size: 17px;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
    height: 36px;
    border: thin solid #525252 !important;
}
.select2-container--default .select2-results > .select2-results__options {
    max-height: 300px;
    overflow-y: auto;
}

.buttonAddGrid.is-full { opacity: .6; }

/* Ticked check boxes show a tick on a white box (as the legacy site did), not a solid blue square. The legacy
   stylesheet pointed at ../images/tick.png, which resolves to a folder that does not exist on this site. */
.form-check-input[type="checkbox"]:checked,
main .form-check-input[type="checkbox"]:checked {
    background-color: #fff;
    background-image: url('/images/tick.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 90% 90%;
    border-color: #525252;
}
.form-check-input[type="checkbox"]:focus {
    box-shadow: 0 0 0 .2rem rgba(0, 45, 97, .25);
}

/* Every check box sits vertically centred on the same line as its label, with one consistent gap. The legacy
   styles floated the box and aligned it to the text baseline, which left it riding above the label. */
.form-check {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding-left: 0 !important;
    min-height: 1.5rem;
}
.form-check.form-check-inline { display: inline-flex; margin-right: 1rem; }
.form-check .form-check-input,
.form-check-inline .form-check-input {
    float: none;
    flex: 0 0 auto;
    width: 1.125rem;
    height: 1.125rem;
    margin: 0 !important;
}
.form-check .form-check-label { margin: 0; line-height: 1.3; }

/* Session / table pickers and the dietary requirement list use plain inputs; line them up the same way. */
.pickListStyle td { vertical-align: middle !important; padding-top: 0 !important; padding-bottom: .35rem; }
.pickListStyle input[type="checkbox"] { margin: 0; vertical-align: middle; }
.MultiCheckBox .check-line { display: flex; align-items: center; gap: .5rem; margin: 0 0 .35rem; font-weight: 500; }
.MultiCheckBox .check-line input[type="checkbox"] { margin: 0 !important; flex: 0 0 auto; }
/* My Events action column: icon buttons. The hover/focus tooltip is the button's title attribute (the browser's own
   tooltip is not clipped by the scrolling table wrapper). */
.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}
.icon-btn svg { display: block; }
.icon-btn:focus-visible { outline: 2px solid #002d61; outline-offset: 2px; }
.icon-btn-amend { color: #002d61; }
.icon-btn-amend:hover { background: #e6edf5; color: #002d61; }
.icon-btn-cancel { color: #d93025; }
.icon-btn-cancel:hover { background: #fde8e8; color: #d93025; }
.icon-btn-attendee { color: #0b3d73; }
.icon-btn-attendee:hover { background: #e6edf5; color: #0b3d73; }
.action-buttons .inline-form, .action-buttons .inline-form-attendee { display: inline-flex; margin: 0; }
/* A disabled action keeps its tooltip: the wrapper takes the hover, the button underneath ignores the mouse. */
.icon-btn-disabled-wrap { display: inline-flex; cursor: not-allowed; }
.icon-btn:disabled { color: #9aa3ad; opacity: .6; pointer-events: none; background: transparent; }

/* Required fields, everywhere: a red * after the label (added by required-fields.js) and a red border. The legacy
   stylesheet already puts the red border on required inputs, selects and text areas; select2 hides the real select
   and draws its own box, so that box is given the same border here. */
.required-star,
.fv-validation-label {
    color: #DC3952 !important;
    margin-left: 2px;
    font-weight: 700;
}
/* The booking form's attendee rows are required once a row is added: they carry groupreq instead of required. */
input[groupreq], select[groupreq], textarea[groupreq] {
    border: thin solid #DC3952 !important;
}
select[required] + .select2-container .select2-selection,
.select2-container.select2-required .select2-selection,
.select2-container--default.select2-required .select2-selection--single,
.select2-container--default.select2-required .select2-selection--multiple {
    border: 1px solid #DC3952 !important;
}
.select2-container--default.select2-required.select2-container--focus .select2-selection,
.select2-container--default.select2-required.select2-container--open .select2-selection {
    border-color: #DC3952 !important;
}

/* Attendee details form: half the width of its container on desktop (full width on small screens), and every control
   the same height, including the company picker (select2). */
#frmAttendeeDetails { max-width: 50%; }
@media (max-width: 991.98px) { #frmAttendeeDetails { max-width: 100%; } }
#frmAttendeeDetails input.fv-input-field,
#frmAttendeeDetails select.fv-input-field {
    height: 46px !important;
    padding: 0 .8rem !important;
    font-size: 16px;
    box-sizing: border-box;
    border-width: 1px !important;
    border-radius: 0;
}
#frmAttendeeDetails .select2-container { width: 100% !important; }
#frmAttendeeDetails .select2-container--default .select2-selection--single {
    height: 46px;
    border-radius: 0;
    display: flex;
    align-items: center;
}
#frmAttendeeDetails .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding-left: .8rem;
    font-size: 16px;
    line-height: 44px;
    flex: 1 1 auto;
}
#frmAttendeeDetails .select2-container--default .select2-selection--single .select2-selection__arrow { height: 44px; }

/* My Events: the event / status filter above the table. */
.events-filter { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; margin: .5rem 0 1rem; }
.events-filter-field { display: flex; flex-direction: column; gap: .25rem; min-width: 220px; flex: 1 1 220px; max-width: 420px; }
.events-filter-field label { margin: 0; font-weight: 500; }
.events-filter-field .form-select { height: 44px; }
.events-filter-actions { display: flex; align-items: center; gap: .75rem; }
.events-filter-clear { white-space: nowrap; }

/* My Events: the small help line under the table and its paging. */
.events-help { margin: 1rem 0 0; font-size: .875rem; color: #525252; }
.events-note { margin: 0 0 .75rem; font-size: .875rem; color: #525252; }