/*
Custom CSS - Bootstrap 5 Migration Fixes
*/

/* ========================================
   BASE FONT SIZE FIX
   Bootstrap 5 default: 16px | Bootstrap 4 default: 14px
   Override to maintain Bootstrap 4 sizing consistency
   ======================================== */

html {
  font-size: 14px !important;
}

body {
  font-size: 1rem !important;
}

/* ========================================
   BOOTSTRAP 5 BACKWARD COMPATIBILITY
   ======================================== */

/* Badge color classes: BS4 used badge-*, BS5 uses bg-* */
.badge-primary { background-color: var(--bs-primary) !important; color: #fff !important; }
.badge-secondary { background-color: var(--bs-secondary) !important; color: #fff !important; }
.badge-success { background-color: var(--bs-success) !important; color: #fff !important; }
.badge-danger { background-color: var(--bs-danger) !important; color: #fff !important; }
.badge-warning { background-color: var(--bs-warning) !important; color: #000 !important; }
.badge-info { background-color: var(--bs-info) !important; color: #fff !important; }
.badge-light { background-color: var(--bs-light) !important; color: #000 !important; }
.badge-dark { background-color: var(--bs-dark) !important; color: #fff !important; }

/* Form row: BS4 used form-row, BS5 uses row with gutters */
.form-row {
  display: flex !important;
  flex-wrap: wrap !important;
  margin-right: -5px !important;
  margin-left: -5px !important;
}

.form-row > .col,
.form-row > [class*="col-"] {
  padding-right: 5px !important;
  padding-left: 5px !important;
}

/* ========================================
   COMPONENT FIXES
   ======================================== */

/* Text colors */
.text-muted,
.page-footer .text-muted,
label:not(.btn):not(.form-check-label) {
  font-weight: 400 !important;
  color: #99A0AC !important;
}

.page-footer {
  font-weight: 300;
  color: #99A0AC;
}

/* Spacing */
.page-content {
  padding-left: 1rem;
  padding-right: 1rem;
}

.mb-3, .form-group {
  margin-bottom: 1rem !important;
}

/* DataTable styling */
.dataTables_info {
  font-weight: 300 !important;
}

.table > thead > tr > th,
.dataTable thead th {
    font-weight: 700 !important;
    font-size: 0.875rem !important;
    padding-left: 1rem !important;
    padding-right: 2.5rem !important;
    
}

.dataTable tbody td {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

/* DataTable pagination layout */
.dataTables_wrapper .row {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
  margin-bottom: 0.5rem !important;
}

@media (min-width: 768px) {
  .dataTables_wrapper .dataTables_length {
    float: left !important;
    text-align: left !important;
  }
  
  .dataTables_wrapper .dataTables_paginate {
    float: right !important;
    text-align: right !important;
  }
  
  .dataTables_wrapper .dataTables_info {
    clear: both !important;
    float: left !important;
    padding-top: 0.5rem !important;
  }
}

/* Status badges */
.badge {
  display: inline-block !important;
  padding: 0.25em 0.6em !important;
  font-size: 0.875em !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  text-align: center !important;
  white-space: nowrap !important;
  vertical-align: baseline !important;
  border-radius: 0.25rem !important;
}

/* Column widths */
@media (min-width: 768px) {
  .col-md-6 {
    flex: 0 0 auto !important;
    width: 50% !important;
  }
}

/* Ensure <small> comments are underneath the input
*/
.form-text.text-muted {
    display: inline-block;
    width: 100%;
    margin-top: 0.25rem;
}

/* ========================================
   FORM ROW LAYOUT FIX
   ======================================== */

.form-group.row:not(.d-none) {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    margin-bottom: 1rem !important;
}

.form-group.row > label {
  padding-top: calc(0.375rem + 1px) !important;
  padding-bottom: calc(0.375rem + 1px) !important;
  margin-bottom: 0 !important;
}

.form-group.row > .col-sm-3 {
  flex: 0 0 auto !important;
  width: 25% !important;
}

.form-group.row > .col-sm-9 {
    flex: 0 0 auto !important;
    width: 75% !important;
    padding-top: 0.25rem !important; /* Added top padding to push inputs down slightly */
}

.form-group.row .input-group {
  display: flex !important;
  flex-wrap: nowrap !important;
}

/* ========================================
   INTL TEL INPUT - VALIDATION ICON
   ======================================== */

.phone-valid-icon {
  min-width: 2.5rem !important;
  width: 2.5rem !important;
}

.phone-valid-icon:empty::before {
  content: '\00a0';
  visibility: hidden;
}

/* ========================================
   SUBMIT BUTTON (LOGIN)
   ======================================== */
.btn.btn-primary.btn-block {
    width: 100%;
    margin-bottom: 1rem;
}

/* ========================================
   READONLY INPUTS
   ======================================== */
input[readonly],
textarea[readonly],
select[readonly] {
    background-color: #e9ecef !important;
    cursor: not-allowed !important;
}

/* ========================================
   OFFCANVAS SIDEBAR - RESPONSIVE BEHAVIOR
   Mobile: offcanvas slide-in behavior
   Desktop (lg+): always visible, supports sticky setting from theme.js
   ======================================== */

/* Desktop (lg+): Override offcanvas to be always visible */
@media (min-width: 992px) {
    /* Non-sticky mode: use relative positioning */
    #aside.offcanvas:not(.sticky) {
        position: relative !important;
    }

    /* Sticky mode: preserve sticky positioning from theme.css */
    #aside.offcanvas.sticky {
        position: -webkit-sticky !important;
        position: sticky !important;
        top: 0 !important;
        height: 100vh !important;
    }

    /* When header is also sticky, offset sidebar below header */
    .page-header.sticky ~ * #aside.offcanvas.sticky,
    .page-header.sticky ~ #aside.offcanvas.sticky {
        top: 3.75rem !important;
        height: calc(100vh - 3.75rem) !important;
    }

    /* Common desktop offcanvas overrides */
    #aside.offcanvas {
        transform: none !important;
        visibility: visible !important;
        background-color: transparent !important;
        border: none !important;
        z-index: 1030 !important;
        width: auto !important;
        min-width: 13.5rem !important;
    }

    /* Remove backdrop on desktop */
    .offcanvas-backdrop {
        display: none !important;
    }
}

/* Mobile: Override theme.css page-sidenav styles to allow offcanvas to work */
@media (max-width: 991.98px) {
    /* Override theme.css display:none so offcanvas can control visibility */
    #aside.page-sidenav {
        display: block !important;
    }

    /* Override theme.css transform on child - let offcanvas handle transforms */
    #aside.page-sidenav > * {
        position: static !important;
        transform: none !important;
        width: 100% !important;
        height: 100% !important;
    }

    /* Offcanvas sizing */
    #aside.offcanvas {
        width: 17.5rem !important;
        max-width: 85vw !important;
    }

    #aside.offcanvas .sidenav {
        width: 100% !important;
        height: 100% !important;
    }
}