/**
 * Bootstrap Compatibility CSS
 * This file provides compatibility between the old Elephant framework classes
 * and the new Bootstrap 5 implementation to minimize changes in existing views
 */

/* Layout Structure */
.layout {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.layout-header-fixed .layout-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
}

.layout-sidebar-fixed .layout-main {
    display: flex;
    min-height: calc(100vh - 60px);
    margin-top: 60px;
}

.layout-sidebar {
    position: fixed;
    top: 60px;
    left: 0;
    bottom: 0;
    width: 250px;
    z-index: 1020;
    overflow-y: auto;
    background: #fff;
    border-right: 1px solid #dee2e6;
    transition: all 0.3s ease-in-out;
}

.layout-sidebar.collapsed {
    width: 60px;
}

.layout-sidebar.collapsed .sidenav-label,
.layout-sidebar.collapsed .sidenav-arrow {
    display: none;
}

.layout-sidebar-body {
    height: 100%;
    overflow-y: auto;
}

.layout-content {
    flex: 1;
    margin-left: 250px;
    padding: 20px;
    min-height: calc(100vh - 60px);
    transition: margin-left 0.3s ease-in-out;
}

.layout-content.sidebar-collapsed {
    margin-left: 60px;
}

/* Override margin for layout-site elements (full-width pages without sidebar) */
.layout-content.layout-site {
    margin-left: 0 !important;
}

.layout-content-body {
    max-width: 100%;
}

/* Responsive adjustments */
@media (max-width: 991.98px) {
    .layout-sidebar {
        transform: translateX(-100%);
    }

    .layout-sidebar.show {
        transform: translateX(0);
    }

    .layout-content {
        margin-left: 0 !important;
    }
}

/* Navigation - Sidenav */
.sidenav {
    padding: 0;
    margin: 0;
}

.sidenav-item {
    list-style: none;
    position: relative;
}

.sidenav .nav-link {
    padding: 12px 20px;
    color: #333;
    text-decoration: none;
    display: flex;
    align-items: center;
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
}

.sidenav .nav-link:hover {
    background-color: #f8f9fa;
    border-left-color: #0d6efd;
}

.sidenav .nav-link.active,
.sidenav-item.active > .nav-link {
    background-color: #e7f1ff;
    border-left-color: #0d6efd;
    color: #0d6efd;
}

.sidenav-icon {
    width: 20px;
    text-align: center;
    font-size: 16px;
}

.sidenav-label {
    flex: 1;
}

.sidenav-arrow {
    font-size: 12px;
    transition: transform 0.2s ease;
}

.nav-link[aria-expanded="true"] .sidenav-arrow {
    transform: rotate(180deg);
}

.sidenav-subnav {
    background-color: #f8f9fa;
}

.sidenav-subnav .nav-link {
    padding: 10px 20px 10px 50px;
    font-size: 14px;
}

/* Has subnav styling */
.has-subnav > .nav-link::after {
    /* Optional: Add arrow indicator */
}

/* Title Bar */
.title-bar {
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #dee2e6;
}

.title-bar-title {
    font-size: 24px;
    font-weight: 500;
    margin: 0;
    color: #333;
}

/* Card compatibility */
.card {
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    border: 1px solid #dee2e6;
}

.card-body {
    padding: 1.25rem;
}

/* Media object compatibility (for stats cards) */
.media {
    display: flex;
    align-items: flex-start;
}

.media-body {
    flex: 1;
}

.media-left {
    margin-right: 1rem;
}

.media-middle {
    align-self: center;
}

.media-heading {
    margin-top: 0;
    margin-bottom: 0.25rem;
}

/* Badge positioning */
.icon-with-child {
    position: relative;
    display: inline-block;
}

.badge-above {
    position: absolute;
    top: -8px;
}

.badge-above.left {
    left: -10px;
}

.badge-above.right {
    right: -10px;
}

/* Circle helper */
.circle {
    border-radius: 50%;
}

/* Square sizes */
.sq-48 {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Background colors */
.bg-primary {
    background-color: #0d6efd !important;
}

.bg-danger {
    background-color: #dc3545 !important;
}

.bg-success {
    background-color: #198754 !important;
}

.bg-warning {
    background-color: var(--color-warning-500) !important;
}

.bg-info {
    background-color: #0dcaf0 !important;
}

/* Font weight utilities */
.fw-l {
    font-weight: 300;
}

/* Dropdown customizations */
.dropdown-menu-lg {
    min-width: 320px;
}

.dropdown-header {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #dee2e6;
}

.dropdown-header h5 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
}

.dropdown-link {
    font-size: 13px;
    color: #0d6efd;
    text-decoration: none;
    cursor: pointer;
}

.dropdown-link:hover {
    text-decoration: underline;
}

.dropdown-body {
    max-height: 300px;
    overflow-y: auto;
    padding: 0;
}

.dropdown-footer {
    border-top: 1px solid #dee2e6;
    padding: 0;
}

.dropdown-btn {
    display: block;
    padding: 8px 15px;
    text-align: center;
    color: #0d6efd;
    text-decoration: none;
    font-size: 13px;
    width: 100%;
}

.dropdown-btn:hover {
    background-color: #f8f9fa;
    color: #0d6efd;
}

.dropdown-bottom-btn {
    border-top: 1px solid #dee2e6;
}

/* Navbar customizations */
.navbar-brand-center {
    display: flex;
    align-items: center;
}

.navbar-brand-logo {
    max-height: 40px;
    width: auto;
}

.navbar-account-btn {
    background: transparent;
    border: none;
    padding: 5px 15px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #333;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.navbar-account-btn:hover {
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: 0.25rem;
}

.navbar-account-btn img {
    border-radius: 50%;
}

/* List group customizations */
.list-group-divided .list-group-item:not(:last-child) {
    border-bottom: 1px solid #dee2e6;
}

/* Custom scrollbar */
.custom-scrollbar {
    overflow-y: auto;
}

.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Notification item */
.notification-item:hover {
    background-color: #f8f9fa;
}

.notification-item[data-read="false"] {
    background-color: #e7f1ff;
}

/* Gutter utilities (for row spacing) */
.gutter-xs {
    margin-left: -0.25rem;
    margin-right: -0.25rem;
}

.gutter-xs > [class*="col-"] {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}

/* Display utilities compatibility */
.d-ib {
    display: inline-block;
}

/* Pull utilities (deprecated in BS5, but for compatibility) */
.pull-right {
    float: right;
}

.pull-left {
    float: left;
}

/* Text utilities */
.fw-semibold {
    font-weight: 600;
}

/* Select2 compatibility */
.select2-search,
.navSearch-header-input,
.navSearch-input {
    width: 100%;
}

/* Mobile offcanvas adjustments */
.offcanvas-body .sidenav {
    padding: 0;
}

.offcanvas-body .sidenav .nav-link {
    border-left: none;
    border-radius: 0;
}

/* Ensure proper spacing in alerts */
.alert {
    margin-bottom: 1rem;
}

/* Layout site */
.layout-site {
    /* Additional layout customizations if needed */
}

/* Responsive utilities */
@media (max-width: 575.98px) {
    .title-bar-title {
        font-size: 20px;
    }

    .card-body {
        padding: 1rem;
    }
}

@media (min-width: 992px) {
    .visible-xs-block {
        display: none !important;
    }

    .hidden-xs {
        display: block !important;
    }
}

@media (max-width: 991.98px) {
    .visible-xs-block {
        display: block !important;
    }

    .hidden-xs {
        display: none !important;
    }
}

/* Additional utility classes for compatibility */
.hidden-md,
.hidden-lg,
.hidden-sm {
    display: none;
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .hidden-sm {
        display: none !important;
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .hidden-md {
        display: none !important;
    }
}

@media (min-width: 1200px) {
    .hidden-lg {
        display: none !important;
    }
}

/* Form control sizing */
.form-control-sm,
.form-select-sm {
    height: calc(1.5em + 0.5rem + 2px);
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}

/* Input group addon compatibility */
.input-group-addon {
    display: flex;
    align-items: center;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: center;
    white-space: nowrap;
    background-color: #e9ecef;
    border: 1px solid #ced4da;
}

/* Button compatibility */
.btn-ghost {
    background-color: transparent;
    border: 1px solid transparent;
}

.btn-ghost:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.btn-icon {
    padding: 0.375rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Sidebar toggler */
.sidenav-toggler {
    padding: 0.5rem;
    font-size: 1.25rem;
    line-height: 1;
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: 0.25rem;
}

.sidenav-toggler:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

/* Badge pill compatibility */
.badge-pill {
    border-radius: 10rem;
}

/* Progress bar heights */
.progress {
    height: 1rem;
    font-size: 0.75rem;
}

/* Table responsiveness */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Load view page container */
.load-view-page {
    /* Container for dynamically loaded content */
}

/* Fix for Bootstrap 5 dropdown-item with icons */
.dropdown-item i {
    width: 1.25rem;
    text-align: center;
}

/* Ensure icons in navigation align properly */
.nav-link i {
    width: 1.25rem;
    text-align: center;
}

/* Additional spacing utilities */
.mb-0 { margin-bottom: 0 !important; }
.mt-3 { margin-top: 1rem !important; }
.mb-1 { margin-bottom: 0.25rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.me-2 { margin-right: 0.5rem !important; }
.me-3 { margin-right: 1rem !important; }
.ms-3 { margin-left: 1rem !important; }
.ms-auto { margin-left: auto !important; }

/* Gap utilities */
.g-3 {
    --bs-gutter-x: 1rem;
    --bs-gutter-y: 1rem;
}

/* Flex utilities */
.flex-shrink-0 { flex-shrink: 0 !important; }
.flex-grow-1 { flex: 1 1 auto !important; }

/* Border utilities */
.border-bottom { border-bottom: 1px solid #dee2e6 !important; }

/* Text color utilities */
.text-muted { color: #6c757d !important; }
.text-white { color: #fff !important; }
.text-primary { color: #0d6efd !important; }

/* Z-index utilities */
.position-relative { position: relative !important; }
.position-absolute { position: absolute !important; }
.position-fixed { position: fixed !important; }

.top-0 { top: 0 !important; }
.start-100 { left: 100% !important; }
.translate-middle {
    transform: translate(-50%, -50%) !important;
}

/* ========================================
   BUTTON FIXES - MUST BE LAST
   ======================================== */
/* Override all button styles to fix height and icon issues */
button.btn,
a.btn,
input[type="button"].btn,
input[type="submit"].btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 38px !important;
  padding: 0.5rem 1rem !important;
  line-height: 1.5 !important;
  gap: 0.5rem;
  vertical-align: middle !important;
}

/* Icon-only buttons need less padding */
button.btn:has(> span:only-child),
button.btn:has(> i:only-child),
a.btn:has(> span:only-child),
a.btn:has(> i:only-child) {
  padding: 0.5rem 0.75rem !important;
  min-width: 38px !important;
}

/* Force white icons in colored buttons */
.btn-primary span,
.btn-primary i,
.btn-secondary span,
.btn-secondary i,
.btn-success span,
.btn-success i,
.btn-info span,
.btn-info i,
.btn-danger span,
.btn-danger i,
.btn-dark span,
.btn-dark i {
  color: #fff !important;
}

/* Keep icons white on hover for colored buttons */
.btn-primary:hover span,
.btn-primary:hover i,
.btn-success:hover span,
.btn-success:hover i,
.btn-info:hover span,
.btn-info:hover i,
.btn-danger:hover span,
.btn-danger:hover i,
.btn-dark:hover span,
.btn-dark:hover i {
  color: #fff !important;
}

/* btn-secondary should maintain text color on hover (not white) */
.btn-secondary:hover,
.btn-secondary:hover span,
.btn-secondary:hover i,
.btn-secondary:focus,
.btn-secondary:focus span,
.btn-secondary:focus i {
  color: var(--bs-body-color, #212529) !important;
}

/* Ensure icons are properly aligned */
.btn span,
.btn i {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

/* ========================================
   CHOICES.JS MODAL Z-INDEX FIX
   ======================================== */
/* Fix dropdown z-index layering issues in modals */
.modal .choices {z-index: 1 !important;}
.modal .choices.is-open {z-index: 1070 !important;}
.modal .choices__list--dropdown {z-index: 1070 !important;}
.modal .choices[data-type*=select-one] .choices__inner {z-index: 1 !important;}
.modal .choices[data-type*=select-one].is-open .choices__inner {z-index: 1070 !important;}