/*
 * Bootstrap 5 Compatibility / Upgrade CSS
 * Provides aliases for Bootstrap 2/3 classes used by the Metronic theme
 * and fills gaps when upgrading from Bootstrap 2.3.2 to Bootstrap 5.3
 */

/* Hide empty validation summary (ASP.NET Core renders container even when valid) */
.validation-summary-valid { display: none; }
/* Errors class shows normally with alert styling */
.validation-summary-errors { display: block; }

/* ======================================================
   BS5 CONFLICT FIXES: Metronic uses 'collapse' as structural class
   Bootstrap 5 sets display:none on .collapse — override for Metronic elements
   ====================================================== */
.page-sidebar.collapse,
.page-sidebar.nav-collapse {
    display: block !important;
}

/* Bootstrap 2/3 .hide class = display:none; Bootstrap 5 removed it */
.hide {
    display: none !important;
}

/* ======================================================
   PAGINATION: DataTables Bootstrap 2 renderer generates:
   <div class="pagination"><ul><li>...</li></ul></div>
   Ensure the inner <ul> and <li> render inline (flex row)
   ====================================================== */
ul.pagination,
.pagination ul {
    display: flex !important;
    flex-wrap: wrap;
    padding-left: 0 !important;
    list-style: none !important;
    margin: 4px 0 !important;
    align-items: center;
    gap: 2px;
}
ul.pagination li,
ul.pagination > li,
.pagination ul > li,
ul.pagination .page-item,
ul.pagination .paginate_button {
    display: list-item !important;
    float: none !important;
    list-style: none !important;
}
ul.pagination .page-item .page-link,
ul.pagination li a,
ul.pagination li span,
.pagination ul li a,
.pagination ul li span {
    display: block;
    padding: 0.375rem 0.75rem;
    line-height: 1.25;
    color: #337ab7;
    background-color: #fff;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    text-decoration: none;
}
ul.pagination .page-item.active .page-link,
ul.pagination li.active a,
.pagination ul li.active a {
    background-color: #337ab7;
    border-color: #337ab7;
    color: #fff;
}
ul.pagination .page-item.disabled .page-link,
ul.pagination li.disabled a,
.pagination ul li.disabled a {
    color: #6c757d;
    pointer-events: none;
    background-color: #fff;
    border-color: #dee2e6;
}

/* ======================================================
   METRONIC PAGE LAYOUT: page-container uses Metronic's float-based layout.
   Bootstrap 5's .row flex breaks it — disable flex for .page-container.
   position: relative is required so that .page-sidebar { position: absolute }
   is correctly contained within page-container (not the viewport).
   ====================================================== */
body:not(.tdp-page) .page-container,
body:not(.tdp-page) .page-container.row {
    position: relative !important;
    display: block !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    overflow: visible !important;
}
body:not(.tdp-page) .page-container.row > *:not(.page-sidebar):not(.modal) {
    width: auto !important;
    max-width: none !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
}

/* Modals must always be full-viewport-width for centering to work */
.modal {
    width: 100% !important;
}

/* Re-assert the sidebar's fixed width after the > * override above strips it.
   Also explicitly enforce margin-left on page-content to match sidebar width. */
@media (min-width: 980px) {
    body:not(.tdp-page) .page-sidebar {
        width: 225px !important;
        max-width: 225px !important;
    }
    body:not(.tdp-page) .page-content {
        margin-left: 225px !important;
    }
}

/* ======================================================
   SIDEBAR SUB-MENU: Constrain text within the 225px sidebar.
   Bootstrap 5 reboot adds padding-left: 2rem to all <ul> elements —
   reset it on sidebar menus so Metronic's own indentation (padding-left
   on <a>) is the only offset. Text wraps rather than overflowing.
   ====================================================== */
body:not(.tdp-page) .page-sidebar {
    z-index: 1030 !important;
    overflow: hidden !important;
    border-right: 1px solid #e2e2e2 !important;
}
.tdp-page .page-sidebar {
    z-index: 1030;
    overflow-y: auto;
}
/* Reset Bootstrap 5 reboot ul padding on all sidebar menu lists */
ul.page-sidebar-menu,
ul.page-sidebar-menu .sub-menu {
    padding-left: 0 !important;
    list-style: none !important;
}
.page-sidebar-menu .sub-menu > li > a {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
}
.page-content {
    z-index: 1 !important;
}

/* ======================================================
   VER-INLINE-MENU TABS: Bootstrap 5's tab.js requires a .nav or
   .list-group ancestor to locate the tab container. We add .nav to
   ver-inline-menu ULs but must suppress the .nav flexbox display so
   the vertical sidebar layout is preserved.
   ====================================================== */
ul.ver-inline-menu.nav {
    display: block !important;
    flex-wrap: initial !important;
}

/* ======================================================
   SIDEBAR-NAV-FIXED: style.css uses position:fixed for this class at
   ≥760px which tears the inner event-page sidebar out of document flow
   and overlaps content. Switch to position:sticky so it stays in flow
   (no overlap) but still pins to the top when scrolling.
   ====================================================== */
@media screen and (min-width: 760px) {
    .sidebar-nav-fixed {
        position: sticky !important;
        top: 10px !important;
        width: auto !important;
    }
}

/* ======================================================
   GRID COMPATIBILITY: Bootstrap 2 span* → Bootstrap 5 col-*
   ====================================================== */
.row-fluid {
    display: flex;
    flex-wrap: wrap;
    margin-right: calc(-0.5 * var(--bs-gutter-x, 1.5rem));
    margin-left: calc(-0.5 * var(--bs-gutter-x, 1.5rem));
}
.row-fluid > * {
    padding-right: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
    padding-left: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
    box-sizing: border-box;
}
.row-fluid .span12 { flex: 0 0 100%; max-width: 100%; }
.row-fluid .span11 { flex: 0 0 91.6667%; max-width: 91.6667%; }
.row-fluid .span10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
.row-fluid .span9  { flex: 0 0 75%; max-width: 75%; }
.row-fluid .span8  { flex: 0 0 66.6667%; max-width: 66.6667%; }
.row-fluid .span7  { flex: 0 0 58.3333%; max-width: 58.3333%; }
.row-fluid .span6  { flex: 0 0 50%; max-width: 50%; }
.row-fluid .span5  { flex: 0 0 41.6667%; max-width: 41.6667%; }
.row-fluid .span4  { flex: 0 0 33.3333%; max-width: 33.3333%; }
.row-fluid .span3  { flex: 0 0 25%; max-width: 25%; }
.row-fluid .span2  { flex: 0 0 16.6667%; max-width: 16.6667%; }
.row-fluid .span1  { flex: 0 0 8.3333%; max-width: 8.3333%; }

/* Standalone span* (used inside regular containers) */
.span12 { width: 100%; }
.span11 { width: 91.6667%; }
.span10 { width: 83.3333%; }
.span9  { width: 75%; }
.span8  { width: 66.6667%; }
.span7  { width: 58.3333%; }
.span6  { width: 50%; }
.span5  { width: 41.6667%; }
.span4  { width: 33.3333%; }
.span3  { width: 25%; }
.span2  { width: 16.6667%; }
.span1  { width: 8.3333%; }

/* Offset columns */
.offset1  { margin-left: 8.3333%; }
.offset2  { margin-left: 16.6667%; }
.offset3  { margin-left: 25%; }
.offset4  { margin-left: 33.3333%; }
.offset5  { margin-left: 41.6667%; }
.offset6  { margin-left: 50%; }
.offset7  { margin-left: 58.3333%; }
.offset8  { margin-left: 66.6667%; }
.offset9  { margin-left: 75%; }
.offset10 { margin-left: 83.3333%; }
.offset11 { margin-left: 91.6667%; }

/* ======================================================
   RESPONSIVE VISIBILITY COMPAT
   ====================================================== */
@media (max-width: 767px) {
    .hidden-phone  { display: none !important; }
    .visible-phone { display: block !important; }
    .visible-desktop { display: none !important; }
}
@media (min-width: 768px) {
    .visible-phone  { display: none !important; }
    .hidden-phone   { display: block !important; }
    .visible-desktop { display: block !important; }
    .hidden-desktop  { display: none !important; }
}
@media (max-width: 979px) {
    .hidden-tablet  { display: none !important; }
    .visible-tablet { display: block !important; }
}

/* ======================================================
   BOOTSTRAP 2 COMPONENTS: .well, .hero-unit, etc.
   ====================================================== */
.well {
    min-height: 20px;
    padding: 19px;
    margin-bottom: 20px;
    background-color: #f5f5f5;
    border: 1px solid #e3e3e3;
    border-radius: 4px;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
}
.well-large  { padding: 24px; border-radius: 6px; }
.well-small  { padding: 9px; border-radius: 3px; }

/* ======================================================
   BOOTSTRAP 2 PULL HELPERS (mapped to BS5)
   ====================================================== */
.pull-right { float: right !important; }
.pull-left  { float: left !important; }

/* ======================================================
   BOOTSTRAP 2 FORM HELPERS
   ====================================================== */
.control-group { margin-bottom: 1rem; }
.controls { display: block; }
.control-label { font-weight: 500; margin-bottom: 0.25rem; display: inline-block; }

/* Input prepend/append → input-group compat */
.input-prepend,
.input-append {
    display: flex;
    align-items: stretch;
}
.input-prepend .add-on,
.input-append .add-on {
    display: flex;
    align-items: center;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    color: #495057;
    text-align: center;
    white-space: nowrap;
    background-color: #e9ecef;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
}
.input-prepend .add-on {
    border-right: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.input-append .add-on {
    border-left: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.input-prepend input,
.input-append input {
    flex: 1;
}
.input-prepend input { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.input-append input  { border-top-right-radius: 0; border-bottom-right-radius: 0; }

/* ======================================================
   ALERT COMPAT
   ====================================================== */
.alert-error { /* Bootstrap 2 name → Bootstrap 5 .alert-danger */
    color: #842029;
    background-color: #f8d7da;
    border-color: #f5c2c7;
}

/* ======================================================
   BUTTON COMPAT
   ====================================================== */
.btn-mini { padding: 0.1rem 0.4rem; font-size: 0.75rem; }
.btn-block {
    display: block;
    width: 100%;
}

/* ======================================================
   MUTED TEXT
   ====================================================== */
.muted { color: #6c757d; }

/* ======================================================
   BREADCRUMB DIVIDER COMPAT (Bootstrap 2 used <li> dividers)
   ====================================================== */
.breadcrumb li.active .divider { display: none; }

/* ======================================================
   NAVBAR COMPAT (Bootstrap 2 .navbar-inner → BS5 removed)
   ====================================================== */
.navbar-inner { width: 100%; }

/* ======================================================
   SPACER HELPERS (used throughout views)
   ====================================================== */
.spacer5  { height: 5px; clear: both; }
.spacer10 { height: 10px; clear: both; }
.spacer15 { height: 15px; clear: both; }
.spacer20 { height: 20px; clear: both; }
.spacer25 { height: 25px; clear: both; }
.spacer30 { height: 30px; clear: both; }
.space10  { height: 10px; clear: both; }

/* ======================================================
   METRONIC THEME HELPERS
   ====================================================== */
.page-container {
    display: flex;
    flex-wrap: nowrap;
    min-height: calc(100vh - 41px);
}
.page-content {
    flex: 1;
    min-width: 0;
    overflow-x: auto;
}

/* ======================================================
   MOBILE SIDEBAR: Hidden by default on small screens.
   A hamburger button (.sidebar-mobile-toggle) reveals it
   via slide-in with the .sidebar-open class on body.
   ====================================================== */
@media (max-width: 767px) {
    .page-container {
        flex-direction: row !important;
    }
    .page-sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        height: 100% !important;
        width: 225px !important;
        max-width: 225px !important;
        transform: translateX(-225px);
        transition: transform 0.3s ease;
        z-index: 1050 !important;
        overflow-y: auto !important;
    }
    body.sidebar-open .page-sidebar {
        transform: translateX(0);
    }
    /* Lock body scroll when sidebar is open */
    body.sidebar-open {
        overflow: hidden !important;
    }
    .page-content {
        margin-left: 0 !important;
        width: 100% !important;
        padding-top: 52px !important; /* clear the fixed hamburger button */
    }
    .sidebar-overlay {
        display: none;
        position: fixed;
        top: 0; left: 0;
        width: 100%; height: 100%;
        background: rgba(0,0,0,0.45);
        z-index: 1040;
        backdrop-filter: blur(1px);
    }
    body.sidebar-open .sidebar-overlay {
        display: block;
    }
    .sidebar-mobile-toggle {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }
}
@media (min-width: 768px) {
    .sidebar-mobile-toggle {
        display: none !important;
    }
}

/* ======================================================
   FORM INLINE FIX
   ====================================================== */
.form-inline .control-group { margin-bottom: 0; }

/* ======================================================
   ICON FIXES (Font Awesome 6 upgrade from FA 3.x)
   Mapping icon-* → fa-* aliases handled via FA6 compatibility
   ====================================================== */
[class^="icon-"]:before, [class*=" icon-"]:before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
}

/* ======================================================
   MISC BOOTSTRAP 2 COMPAT
   ====================================================== */
.hero-unit {
    padding: 60px;
    margin-bottom: 30px;
    font-size: 18px;
    font-weight: 200;
    line-height: 30px;
    color: inherit;
    background-color: #eee;
    border-radius: 6px;
}

/* label styling - BS5 changed form-label */
label.control-label {
    font-weight: 500;
}

/* dropdown-menu divider compat */
.dropdown-menu .divider {
    height: 0;
    margin: 0.5rem 0;
    overflow: hidden;
    border-top: 1px solid rgba(0,0,0,.15);
}

/* Inline block for icon helpers */
.m-btn-group {
    display: inline-flex;
    gap: 4px;
}

/* Metronic specific button styles that may be missing */
.btn.red       { background-color: #e02222; border-color: #c01b1b; color: #fff; }
.btn.red:hover { background-color: #c01b1b; }
.btn.blue      { background-color: #4d90fe; border-color: #2a7ae4; color: #fff; }
.btn.blue:hover { background-color: #2a7ae4; }
.btn.green     { background-color: #35aa47; border-color: #2a8439; color: #fff; }
.btn.green:hover { background-color: #2a8439; }
.btn.green-stripe {
    background: repeating-linear-gradient(45deg, #35aa47, #35aa47 10px, #2e9440 10px, #2e9440 20px);
    color: #fff;
    border: none;
}

/* ======================================================
   RESPONSIVE TABLE
   ====================================================== */
.table-responsive-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ======================================================
   RESPONSIVE span* overrides for small screens
   ====================================================== */
@media (max-width: 767px) {
    .row-fluid .span1,
    .row-fluid .span2,
    .row-fluid .span3,
    .row-fluid .span4,
    .row-fluid .span5,
    .row-fluid .span6,
    .row-fluid .span7,
    .row-fluid .span8,
    .row-fluid .span9,
    .row-fluid .span10,
    .row-fluid .span11,
    .row-fluid .span12 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* ======================================================
   MOBILE: Custom dropdowns and selects full-width on small screens
   ====================================================== */
@media (max-width: 767px) {
    .cd-dropdown,
    .cd-select {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ======================================================
   MOBILE: Nav tabs scrollable on small screens
   ====================================================== */
@media (max-width: 767px) {
    .nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }
    .nav-tabs .nav-item {
        flex-shrink: 0;
    }
}

/* ======================================================
   MOBILE: Sidebar search full-width on small screens
   ====================================================== */
@media (max-width: 767px) {
    .page-sidebar .sidebar-search .form-control,
    .page-sidebar .sidebar-search input {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ======================================================
   MOBILE: Button groups and action rows wrap on small screens
   ====================================================== */
@media (max-width: 575px) {
    .btn-group-sm-stack .btn,
    .actions .btn {
        display: block;
        width: 100%;
        margin-bottom: 4px;
    }
}

/* ======================================================
   MOBILE: Ensure images don't overflow
   ====================================================== */
img {
    max-width: 100%;
    height: auto;
}

/* ======================================================
   GLOBAL FORM CONSISTENCY
   Applies to all views: consistent labels, spacing,
   full-width input-groups, and section header styling.
   ====================================================== */

/* Bold, block labels with consistent bottom gap */
label.form-label {
    font-weight: 600;
    margin-bottom: 0.3rem;
    display: block;
}

/* input-group sometimes has col-md-* class applied directly
   (e.g. input-group col-md-10) which clips the field to 83%.
   Force full width so fields fill their parent column. */
.input-group[class*="col-md"],
.input-group[class*="col-lg"],
.input-group[class*="col-sm"],
.input-group[class*="col-xl"] {
    width: 100% !important;
}

/* Section headers (h4.form-section) — consistent spacing */
h4.form-section {
    margin-top: 1.25rem;
    margin-bottom: 0.5rem;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid #e5e5e5;
    font-size: 1rem;
    font-weight: 700;
    color: #444;
}

/* Consistent vertical spacing between form rows inside tab/accordion content */
.tab-content .row,
.accordion .row,
.editEventDetails .row {
    margin-bottom: 0.6rem;
}

/* ======================================================
   MODALS: Flex centering on the overlay
   .modal.show becomes a flex container; align-items/
   justify-content center the dialog in both axes.
   width uses BS5's CSS variable so sm/lg/xl sizes all work.
   ====================================================== */

.modal.show {
    display: flex !important;
    align-items: center;
    justify-content: center;
}

/* Explicit width prevents flex shrink-to-content sizing.
   var(--bs-modal-width) is set by BS5: 500px default,
   300px sm, 800px lg, 1140px xl. */
.modal-dialog {
    width: var(--bs-modal-width, 500px) !important;
    max-width: calc(100% - 1rem) !important;
    margin: 0 !important;
}

/* Ensure modal header title + close button lay out correctly.
   Use order:999 on btn-close so it always renders at the far right
   regardless of whether the close button comes before or after the
   heading in the DOM (inconsistent across views). */
.modal-header {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #dee2e6;
}
.modal-header h1,
.modal-header h2,
.modal-header h3,
.modal-header h4,
.modal-header h5,
.modal-header h6,
.modal-header .modal-title {
    flex: 1 1 auto;
    margin-bottom: 0;
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.4;
}
.modal-header .btn-close {
    order: 999;
    flex-shrink: 0;
    margin-left: 0.5rem;
    padding: 0.375rem;
    opacity: 0.6;
}
.modal-header .btn-close:hover {
    opacity: 1;
}

/* btn-default is a BS3 class; map to btn-secondary in BS5 */
.btn.btn-default {
    color: #333;
    background-color: #fff;
    border-color: #ccc;
}
.btn.btn-default:hover {
    background-color: #e6e6e6;
    border-color: #adadad;
}

/* Fix: .custom-modal-max-300 was constraining the modal overlay to 300px,
   causing the dialog to appear left-aligned instead of centered.
   The width constraint must be on .modal-dialog, not the overlay. */
.custom-modal-max-300 {
    max-width: none !important;
}
.custom-modal-max-300 .modal-dialog {
    max-width: 300px !important;
}

/* ======================================================
   BOOTSTRAP 3 FORM HELPER TEXT (.help-block)
   BS5 equivalent is .form-text, but markup still uses .help-block.
   ====================================================== */
.help-block {
    display: block;
    margin-top: 5px;
    margin-bottom: 10px;
    color: #737373;
    font-size: 0.875em;
}

/* ======================================================
   BOOTSTRAP 3 PANEL COMPONENT
   BS5 equivalent is .card, but markup still uses .panel.
   ====================================================== */
.panel {
    margin-bottom: 20px;
    background-color: #fff;
    border: 1px solid transparent;
    border-radius: 4px;
    box-shadow: 0 1px 1px rgba(0,0,0,.05);
}
.panel-default {
    border-color: #ddd;
}
.panel-default > .panel-heading {
    color: #333;
    background-color: #f5f5f5;
    border-color: #ddd;
}
.panel-heading {
    padding: 10px 15px;
    border-bottom: 1px solid transparent;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}
.panel-heading > .panel-title {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 16px;
    color: inherit;
}
.panel-body {
    padding: 15px;
}
.panel-footer {
    padding: 10px 15px;
    background-color: #f5f5f5;
    border-top: 1px solid #ddd;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
}

/* ======================================================
   FULLCALENDAR v1.6.1 GRID BORDERS
   The bundled fullcalendar.css sets border-width but not
   border-style or border-color, so cell borders disappear in BS5.
   ====================================================== */
.fc .fc-border-separate th,
.fc .fc-border-separate td {
    border-style: solid !important;
    border-color: #ced4da !important;
}
/* Ensure header has a visible bottom border so the line between
   weekdays row and first week of days is drawn. */
.fc .fc-border-separate thead th {
    border-bottom: 1px solid #ced4da !important;
}
/* FullCalendar v1 floats day numbers right by default. Center them
   so each cell's date sits at the top of the cell, not the corner. */
.fc-grid .fc-day-number {
    float: none !important;
    text-align: center;
    padding: 4px 2px;
}