/**
 * Bootstrap 5 Migration Compatibility CSS
 * This file provides compatibility styles for Bootstrap 3 to 5 migration
 */

/* ============================================
   FORM HORIZONTAL COMPATIBILITY
   Bootstrap 5 removed form-horizontal class
   ============================================ */

/*
 * ISSUE: Bootstrap 3 form-horizontal used direct column placement without .row
 * Bootstrap 5 requires .row wrapper for grid columns to function
 * This shim enables BS3 form markup to work in BS5
 */

.form-horizontal .mb-3 {
    /* Enable flex layout to simulate row behavior */
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

.form-horizontal .mb-3 > label,
.form-horizontal .mb-3 > div,
.form-horizontal .mb-3 > .col-sm-1,
.form-horizontal .mb-3 > .col-sm-2,
.form-horizontal .mb-3 > .col-sm-3,
.form-horizontal .mb-3 > .col-sm-4,
.form-horizontal .mb-3 > .col-sm-5,
.form-horizontal .mb-3 > .col-sm-6,
.form-horizontal .mb-3 > .col-sm-7,
.form-horizontal .mb-3 > .col-sm-8,
.form-horizontal .mb-3 > .col-sm-9,
.form-horizontal .mb-3 > .col-sm-10,
.form-horizontal .mb-3 > .col-sm-11,
.form-horizontal .mb-3 > .col-sm-12,
.form-horizontal .mb-3 > .col-md-1,
.form-horizontal .mb-3 > .col-md-2,
.form-horizontal .mb-3 > .col-md-3,
.form-horizontal .mb-3 > .col-md-4,
.form-horizontal .mb-3 > .col-md-5,
.form-horizontal .mb-3 > .col-md-6,
.form-horizontal .mb-3 > .col-md-7,
.form-horizontal .mb-3 > .col-md-8,
.form-horizontal .mb-3 > .col-md-9,
.form-horizontal .mb-3 > .col-md-10,
.form-horizontal .mb-3 > .col-md-11,
.form-horizontal .mb-3 > .col-md-12 {
    /* Add column padding */
    padding-right: 15px;
    padding-left: 15px;
}

.form-horizontal label,
.form-horizontal .control-label {
    text-align: right;
    padding-top: 7px;
    margin-bottom: 0;
}

/* Bootstrap 3 control-label class removed in BS5 */
.control-label {
    display: block;
    margin-bottom: 0.5rem;
}

/* Clearfix for legacy markup */
.form-horizontal .clearfix {
    width: 100%;
}

/* Card styling to match old panel appearance */
.card {
    border: 1px solid #ddd;
    border-radius: 4px;
}

.card-header {
    background-color: #f5f5f5;
    border-bottom: 1px solid #ddd;
    padding: 10px 15px;
}

.card-body {
    padding: 15px;
}

/* Ensure btn-close works properly in modals */
.modal-header .btn-close {
    margin: -0.5rem -0.5rem -0.5rem auto;
}

/* Fix for datatables with Bootstrap 5 */
.dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 0;
}

.dt-search input {
    min-width: 300px;
}

/* Override DataTables auto-detected numeric/date right-alignment */
table.dataTable th.dt-type-numeric,
table.dataTable td.dt-type-numeric {
    text-align: left;
}

/* ============================================
   DATATABLES SORTING INDICATORS
   Hides DataTables 2.x native span indicator
   and uses Font Awesome 6 pseudo-elements.
   ============================================ */

/* Hide DataTables 2.x native span-based sort indicator */
table.dataTable thead th span.dt-column-order {
    display: none;
}

/* Default unsorted state — faded up/down arrows */
table.dataTable thead th.dt-orderable-asc:not(.dt-ordering-asc):not(.dt-ordering-desc)::after,
table.dataTable thead th.dt-orderable-desc:not(.dt-ordering-asc):not(.dt-ordering-desc)::after {
    content: "↕";
    opacity: 0.3;
    display: inline-block;
    margin-left: 5px;
    font-size: 0.85em;
    vertical-align: middle;
}

/* Ascending sort — up arrow */
table.dataTable thead th.dt-ordering-asc::after {
    content: "▲";
    opacity: 1;
    color: #555;
    display: inline-block;
    margin-left: 5px;
    font-size: 0.65em;
    vertical-align: middle;
}

/* Descending sort — down arrow */
table.dataTable thead th.dt-ordering-desc::after {
    content: "▼";
    opacity: 1;
    color: #555;
    display: inline-block;
    margin-left: 5px;
    font-size: 0.65em;
    vertical-align: middle;
}

/* ============================================
   SELECT ELEMENTS WITH form-control CLASS
   BS3 used form-control on <select>; BS5 uses
   form-select. This shim gives select.form-control
   the native dropdown arrow and proper styling.
   ============================================ */
select.form-control {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 2.25rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
}

/* Bootstrap select compatibility */
.bootstrap-select .dropdown-toggle {
    border-color: #ced4da;
}

.bootstrap-select .dropdown-toggle:focus {
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* Form validation - Bootstrap 5 style */
.was-validated .form-control:valid,
.form-control.is-valid {
    border-color: #198754;
    padding-right: calc(1.5em + 0.75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.was-validated .form-control:invalid,
.form-control.is-invalid {
    border-color: #dc3545;
    padding-right: calc(1.5em + 0.75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

/* Tooltip compatibility */
.tooltip {
    font-size: 0.875rem;
}

/* Modal backdrop fix for multiple modals */
.modal-backdrop {
    z-index: 1040;
}

.modal {
    z-index: 1050;
}

/* Dropdown menu compatibility */
.dropdown-menu {
    font-size: 1rem;
}

/* Button compatibility */
.btn-secondary {
    color: #fff;
    background-color: #6c757d;
    border-color: #6c757d;
}

/* Ensure collapse transitions work */
.collapsing {
    transition: height 0.35s ease;
}

/* Fix for any remaining panel references in custom code */
.panel {
    /* Fallback if any panel classes remain */
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-bottom: 20px;
}

/* ============================================
   TEMPUS DOMINUS DATEPICKER STYLING
   Bootstrap 5 native datepicker
   ============================================ */

/*
 * Tempus Dominus v6 is Bootstrap 5 native but needs some
 * theme adjustments to match the portal design
 */

/* Make datepicker widget match Bootstrap 5 style */
.tempus-dominus-widget {
    font-size: 0.875rem;
}

/* Ensure today button is styled correctly */
.tempus-dominus-widget .td-today-btn {
    background-color: #ffc107;
    color: #000;
    border-color: #ffc107;
}

.tempus-dominus-widget .td-today-btn:hover {
    background-color: #ffca2c;
    border-color: #ffc720;
    color: #000;
}

/* Selected date styling */
.tempus-dominus-widget .selected {
    background-color: #0d6efd;
    color: #fff;
}

/* Current date (today) styling */
.tempus-dominus-widget .today {
    background-color: #fff3cd;
}

/* Hover effect on dates */
.tempus-dominus-widget .day:hover {
    background-color: #e9ecef;
    cursor: pointer;
}

/* Disabled dates */
.tempus-dominus-widget .disabled,
.tempus-dominus-widget .disabled:hover {
    color: #6c757d;
    background-color: transparent;
    cursor: not-allowed;
}

/* Input with datepicker icon */
.input-group.date input {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/*
 * Tempus Dominus icon replacements using Unicode symbols
 * This avoids requiring Font Awesome on the portal
 */

/* Hide the actual Font Awesome icon classes */
.tempus-dominus-widget i[class*="fa-"] {
    font-style: normal;
    font-family: inherit;
}

/* Clear any FA font styling */
.tempus-dominus-widget i[class*="fa-"]::before {
    content: none !important;
}

/* Previous arrow (left chevron) */
.tempus-dominus-widget .previous i,
.tempus-dominus-widget [data-action="previous"] i {
    font-size: 0;
}
.tempus-dominus-widget .previous i::after,
.tempus-dominus-widget [data-action="previous"] i::after {
    content: "‹";
    font-size: 1.25rem;
    font-weight: bold;
    line-height: 1;
}

/* Next arrow (right chevron) */
.tempus-dominus-widget .next i,
.tempus-dominus-widget [data-action="next"] i {
    font-size: 0;
}
.tempus-dominus-widget .next i::after,
.tempus-dominus-widget [data-action="next"] i::after {
    content: "›";
    font-size: 1.25rem;
    font-weight: bold;
    line-height: 1;
}

/* Up arrow (increment) */
.tempus-dominus-widget [data-action="incrementHours"] i,
.tempus-dominus-widget [data-action="incrementMinutes"] i,
.tempus-dominus-widget [data-action="incrementSeconds"] i {
    font-size: 0;
}
.tempus-dominus-widget [data-action="incrementHours"] i::after,
.tempus-dominus-widget [data-action="incrementMinutes"] i::after,
.tempus-dominus-widget [data-action="incrementSeconds"] i::after {
    content: "▲";
    font-size: 0.75rem;
    line-height: 1;
}

/* Down arrow (decrement) */
.tempus-dominus-widget [data-action="decrementHours"] i,
.tempus-dominus-widget [data-action="decrementMinutes"] i,
.tempus-dominus-widget [data-action="decrementSeconds"] i {
    font-size: 0;
}
.tempus-dominus-widget [data-action="decrementHours"] i::after,
.tempus-dominus-widget [data-action="decrementMinutes"] i::after,
.tempus-dominus-widget [data-action="decrementSeconds"] i::after {
    content: "▼";
    font-size: 0.75rem;
    line-height: 1;
}

/* Today button icon (calendar with check) - using simple calendar symbol */
.tempus-dominus-widget [data-action="today"] i {
    font-size: 0;
}
.tempus-dominus-widget [data-action="today"] i::after {
    content: "📅";
    font-size: 1rem;
    line-height: 1;
}

/* Clear button icon (trash) */
.tempus-dominus-widget [data-action="clear"] i {
    font-size: 0;
}
.tempus-dominus-widget [data-action="clear"] i::after {
    content: "✕";
    font-size: 1rem;
    line-height: 1;
}

/* Close button icon */
.tempus-dominus-widget [data-action="close"] i {
    font-size: 0;
}
.tempus-dominus-widget [data-action="close"] i::after {
    content: "✕";
    font-size: 1rem;
    line-height: 1;
}

/* Toggle picker (date/time switch) - calendar icon */
.tempus-dominus-widget [data-action="togglePicker"] i.fa-calendar,
.tempus-dominus-widget [data-action="togglePicker"] i.fa-solid.fa-calendar,
.tempus-dominus-widget [data-action="togglePicker"] i[class*="fa-calendar"] {
    font-size: 0;
}
.tempus-dominus-widget [data-action="togglePicker"] i.fa-calendar::after,
.tempus-dominus-widget [data-action="togglePicker"] i.fa-solid.fa-calendar::after,
.tempus-dominus-widget [data-action="togglePicker"] i[class*="fa-calendar"]::after {
    content: "📅";
    font-size: 1rem;
    line-height: 1;
}

/* Toggle picker - clock icon */
.tempus-dominus-widget [data-action="togglePicker"] i.fa-clock,
.tempus-dominus-widget [data-action="togglePicker"] i.fa-solid.fa-clock,
.tempus-dominus-widget [data-action="togglePicker"] i[class*="fa-clock"] {
    font-size: 0;
}
.tempus-dominus-widget [data-action="togglePicker"] i.fa-clock::after,
.tempus-dominus-widget [data-action="togglePicker"] i.fa-solid.fa-clock::after,
.tempus-dominus-widget [data-action="togglePicker"] i[class*="fa-clock"]::after {
    content: "🕐";
    font-size: 1rem;
    line-height: 1;
}


/* ============================================
   BASE FONT SIZE (Bootstrap 3 parity: 14px)
   Bootstrap 5 defaults to 1rem = 16px; this
   restores 1rem = 14px so all rem-based
   components scale back to pre-migration size.
   ============================================ */
html {
    font-size: 14px;
}

/* ============================================
   TASK 1: Global table row border color
   ============================================ */
.table > :not(caption) > * > * {
    border-color: rgba(0, 1, 0, 0.05);
}

/* ============================================
   TASK 2: btn-sm sizing (replaces btn-xs)
   ============================================ */
.btn-sm {
    font-size: 14px;
    padding: 2px 5px;
}

/* btn-xs does not exist in Bootstrap 5.
   Alias it to btn-sm so legacy markup renders correctly. */
.btn-xs {
    font-size: 14px;
    padding: 2px 5px;
}

/* ============================================
   PROFILE DROPDOWN FIXES
   1. min-width so labels never wrap
   2. display:block so footer links stack vertically
   ============================================ */
.profile .dropdown-menu {
    min-width: 224px;
    right: 0;
    left: auto;
}

.dropdown li.liFooter a {
    display: block;
}

hr {
    opacity: .1;
}

a {
    text-decoration: none !important;
}

/* Disabled state for anchor elements used as buttons.
   The HTML `disabled` attribute is non-standard on <a> tags, so :disabled
   pseudo-class never fires. Target it via attribute selector instead. */
a.btn[disabled],
a.btn.disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

a.btn[disabled]:hover,
a.btn[disabled]:focus,
a.btn.disabled:hover,
a.btn.disabled:focus {
    opacity: 0.45;
    transform: none;
}