:root {
    --app-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
    --app-header-color: #ffffff;
}

body {
    font-family: var(--app-font-family, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.body-content {
    padding: 1.5rem 3rem;
}

/* Home pages are designed as full-bleed sections (venue/event thumbnails). */
.controller-home .body-content {
    padding: 0;
}

.app-navbar-logo {
    width: 180px;
}

.navbar-brand {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.navbar-top {
    background-color: var(--app-header-color, var(--color-header-bg-fallback));
}

.app-client-brandname {
    color: var(--color-brandname-text);
    font-weight: 700;
    font-size: 2rem;
    line-height: 1.1;
}

.navbar-under-color {
    background-color: var(--color-brand);
}

.navbar-under {
    padding: 1.75rem 0;
    height: 90px;
    box-sizing: border-box;
}

.navbar-under .container-fluid > .d-flex {
    flex-wrap: nowrap;
    align-items: center;
    height: 100%;
}

.navbar-under .container-fluid > .d-flex > .readonlycalendarlink {
    flex: 0 0 auto;
}

.navbarsub {
    height: 100%;
    display: flex;
    align-items: center;
    width: 100%;
    flex: 1 1 auto;
    min-width: 0;
}

.navbar-under-color .navbarsub a:not(.btn) {
    color: var(--color-white);
    text-decoration: none;
}

.navbar-under-color .navbarsub a:not(.btn):hover,
.navbar-under-color .navbarsub a:not(.btn):focus {
    color: var(--color-white);
    text-decoration: underline;
}

.navbar-under .btn {
    white-space: nowrap;
    font-weight: 600;
}

.btn-primary {
    --bs-btn-bg: var(--color-brand);
    --bs-btn-border-color: var(--color-brand);
    --bs-btn-hover-bg: var(--color-brand-hover-bg);
    --bs-btn-hover-border-color: var(--color-brand-hover-bg);
    --bs-btn-active-bg: var(--color-brand-active-bg);
    --bs-btn-active-border-color: var(--color-brand-active-bg);
}

/* DataTables controls that should always use brand colors */
:is(
    div.dt-buttons .btn.btn-secondary,
    div.dt-buttons .btn.btn-secondary:focus,
    div.dt-buttons .btn.btn-secondary:hover,
    div.dt-buttons .btn.btn-secondary:active,
    div.dt-buttons .btn.btn-secondary.active,
    div.dt-container .pagination .page-item.active .page-link,
    div.dt-container .pagination .page-item.active .page-link:focus,
    div.dt-container .pagination .page-item.active .page-link:hover,
    div.dt-container .dt-paging .dt-paging-button.current,
    div.dt-container .dt-paging .dt-paging-button.current:hover
) {
    background: var(--color-brand) !important;
    border-color: var(--color-brand) !important;
    color: var(--color-text-on-brand) !important;
}

div.dt-container .pagination .page-link {
    color: var(--color-brand);
}

.venue-row {
    background-color: var(--color-thumbnail-bg);
}

.controller-bookings.action-index .booking-subheader-logo {
    border-radius: 0 !important;
}

.event-row {
    background-color: var(--color-event-thumbnail-bg);
}

.admin-subnav-items {
    flex: 1 1 auto;
    flex-wrap: nowrap;
    min-width: 0;
    overflow: hidden;
}

.admin-subnav-items > .btn {
    flex: 0 0 auto;
    white-space: nowrap;
}

.admin-subnav {
    flex-wrap: nowrap;
    height: 100%;
    flex: 1 1 auto;
    min-width: 0;
}

.admin-subnav-more {
    flex: 0 0 auto;
    align-self: center;
}

.admin-subnav-offcanvas .btn {
    white-space: nowrap;
}

.admin-subnav .btn-light,
.admin-subnav-offcanvas .btn-light {
    color: var(--color-brand)!important;
}

nav[aria-label="pagination"] {
    margin-top: .75rem;
}

.dropdown-menu .dropdown-item {
    color: var(--bs-secondary-color) !important;
}

.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
    color: var(--bs-secondary-color) !important;
}

.navbar-light .navbar-nav .nav-link.header-links,
.navbar-light .navbar-nav .nav-link.header-links:hover,
.navbar-light .navbar-nav .nav-link.header-links:focus {
    opacity: 1;
}

.navbar-light .navbar-nav .nav-link.header-links:is(.active, .active:hover, .active:focus) {
    color: var(--color-header-links-active) !important;
    text-decoration: underline;
}

.navbar-light .navbar-nav .nav-link.header-links:is(.inactive, .inactive:hover, .inactive:focus) {
    color: var(--color-header-links-inactive) !important;
}

.preview-nonadmin-badge {
    border: 0;
    border-radius: 999px;
    background: var(--color-preview-badge-bg);
    color: var(--color-preview-badge-text);
    font-size: .78rem;
    font-weight: 700;
    line-height: 1;
    padding: .45rem .75rem;
    white-space: nowrap;
}

.preview-nonadmin-badge:hover,
.preview-nonadmin-badge:focus {
    background: var(--color-preview-badge-bg-hover);
    color: var(--color-preview-badge-text);
}

#settingsTabsContent .tab-pane {
    display: none;
}

#settingsTabsContent .tab-pane.active {
    display: block;
}

.controller-bookings.action-index .navbar-under {
    padding: 0;
}

.controller-bookings.action-index .navbar-under > .w-100,
.controller-bookings.action-index .navbar-under > .w-100 > .d-flex,
.controller-bookings.action-index .navbar-under .navbarsub > .d-flex,
.controller-bookings.action-index .navbar-under .readonlycalendarlink,
.controller-bookings.action-index .booking-subheader-brand,
.controller-bookings.action-index .booking-subheader-brand h1,
.controller-bookings.action-index .booking-subheader-logo {
    height: 100%;
}

.controller-bookings.action-index .navbar-under > .w-100 > .d-flex {
    flex-wrap: nowrap;
}

.controller-bookings.action-index .navbar-under .navbarsub > .d-flex {
    align-items: center;
    gap: 0;
}

.controller-bookings.action-index .booking-subheader-brand {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-width: 0;
    flex: 1 1 auto;
}

.controller-bookings.action-index .booking-subheader-brand h1 {
    display: flex;
    align-items: center;
    line-height: 1.1;
    margin: 0;
}

.controller-bookings.action-index .navbar-under .readonlycalendarlink {
    display: flex;
    align-items: center;
    margin-left: auto;
    padding-right: 1.5rem;
}

.controller-bookings.action-index .booking-subheader-logo {
    width: auto;
    max-width: none;
    object-fit: contain;
    object-position: left center;
    display: block;
    flex: 0 0 auto;
}

.media-preview-image {
    max-width: 240px;
}

.media-preview-remove-btn {
    position: absolute;
    top: .25rem;
    right: .25rem;
    width: 1.65rem;
    height: 1.65rem;
    padding: 0;
    background-color: var(--color-white);
    border: 1px solid var(--color-image-remove-btn-border);
    color: var(--color-black);
}

/* Bootstrap-like validation styling across admin pages */
body.admin-validation-scope .input-validation-error {
    border-color: var(--bs-danger);
    box-shadow: 0 0 0 .2rem rgba(var(--bs-danger-rgb), .15);
}

body.admin-validation-scope .input-validation-error:focus {
    border-color: var(--bs-danger);
    box-shadow: 0 0 0 .25rem rgba(var(--bs-danger-rgb), .2);
}

body.admin-validation-scope .field-validation-error {
    display: block;
    width: 100%;
    margin-top: .35rem;
    font-size: .875rem;
    font-weight: 500;
    color: var(--bs-danger);
}

body.admin-validation-scope .field-validation-valid {
    display: none;
}

body.admin-validation-scope .validation-summary-errors {
    margin-bottom: 1rem;
    padding: .75rem 1rem;
    border-radius: .5rem;
    border: 1px solid var(--bs-danger-border-subtle);
    background-color: var(--bs-danger-bg-subtle);
    color: var(--bs-danger-text-emphasis);
}

body.admin-validation-scope .validation-summary-errors ul {
    margin: 0;
    padding-left: 1.15rem;
}

body.admin-validation-scope select.input-validation-error + .select2 .select2-selection {
    border-color: var(--bs-danger) !important;
    box-shadow: 0 0 0 .2rem rgba(var(--bs-danger-rgb), .15);
}