/* Custom Telerik Styling */
/* This file contains custom CSS overrides for Telerik components used throughout the application */

/* ===================================== */
/* Dropdown Styling */
/* ===================================== */

/* Uniform dropdown width - same width for all dropdowns */
.dropdown-uniform {
    width: 150px;
    min-width: 150px;
    max-width: 150px;
}

/* Remove focus border highlighting */
.dropdown-uniform:focus {
    outline: none;
    box-shadow: none;
}

/* Allow dropdown options menu to expand for large text */
/* Note: Browsers automatically handle option element sizing and text wrapping */

/* For mobile devices, make dropdowns full width by default */
@media (max-width: 768px) {
    .dropdown-uniform {
        width: 100%;
        min-width: 100%;
        max-width: 100%;
    }
}

/* ===================================== */
/* Telerik Grid Header Styling */
/* ===================================== */

/* Bold and center all grid column headers */
.k-grid th,
.k-grid .k-table-th,
.k-grid .k-header {
    font-weight: bold !important;
    text-align: center !important;
}

/* Ensure nested column headers are also bold and centered */
.k-grid .k-column-title {
    font-weight: bold !important;
}

/* Center the content within header cells */
.k-grid th > .k-cell-inner,
.k-grid .k-table-th > .k-cell-inner {
    justify-content: center !important;
}

/* Already centered headers maintain their styling */
.k-grid .center-content {
    text-align: center !important;
    font-weight: bold !important;
}

/* Left-aligned headers with red styling */
.k-grid .left-red-content {
    text-align: left !important;
    font-weight: bold !important;
    color: red !important;
}

/* Override specific text alignment when needed */
.k-grid th.k-text-left {
    text-align: center !important;
}

.k-grid th.k-text-right {
    text-align: center !important;
}

/* ===================================== */
/* Grid Cell Padding */
/* ===================================== */

/* Reduce padding for medium-sized grid cells to match Intranet styling */
.k-grid .k-grid-md td, 
.k-grid .k-grid-md .k-table-td, 
.k-grid-md td, 
.k-grid-md .k-table-td {
    padding-block: 0.25rem;
    padding-inline: 0.25rem;
}

/* ===================================== */
/* Grid Footer Styling */
/* ===================================== */

/* Ensure footer totals remain bold */
.k-grid .k-table-footer td,
.k-grid tfoot td {
    font-weight: bold;
}

/* ===================================== */
/* Responsive Grid Adjustments */
/* ===================================== */

/* On smaller screens, maintain readability */
@media (max-width: 768px) {
    .k-grid th,
    .k-grid .k-table-th {
        font-size: 0.875rem;
        padding: 0.5rem 0.25rem;
    }
}

/* ===================================== */
/* Responsive Grid Column Visibility */
/* ===================================== */

/* 
 * Bootstrap Responsive Breakpoints (align with Bootstrap 5):
 * - xs: <576px   (extra small - phones)
 * - sm: ≥576px   (small - landscape phones)
 * - md: ≥768px   (medium - tablets)
 * - lg: ≥992px   (large - desktops)
 * - xl: ≥1200px  (extra large - wide desktops)
 * - xxl: ≥1400px (extra extra large - wider desktops)
 *
 * Usage Examples:
 * - To hide on mobile only: add class "d-none d-md-table-cell" (hidden below 768px)
 * - To hide on small screens: add class "d-none d-lg-table-cell" (hidden below 992px)
 * - To show on mobile only: add class "d-table-cell d-md-none" (visible only below 768px)
 * - To show on desktop only: add class "d-none d-lg-table-cell" (visible 992px and up)
 *
 * Note: !important is required to override Telerik's inline and component-level styles
 */

/* Hide on extra small screens (mobile), show on medium and up (tablets/desktops) */
.k-grid th.d-none.d-md-table-cell,
.k-grid .k-table-th.d-none.d-md-table-cell {
    display: none !important;
}

.k-grid td.d-none.d-md-table-cell,
.k-grid .k-table-td.d-none.d-md-table-cell {
    display: none !important;
}

.k-grid tfoot td.d-none.d-md-table-cell,
.k-grid .k-table-tfoot .d-none.d-md-table-cell {
    display: none !important;
}

@media (min-width: 768px) {
    .k-grid th.d-none.d-md-table-cell,
    .k-grid .k-table-th.d-none.d-md-table-cell {
        display: table-cell !important;
    }
    
    .k-grid td.d-none.d-md-table-cell,
    .k-grid .k-table-td.d-none.d-md-table-cell {
        display: table-cell !important;
    }
    
    .k-grid tfoot td.d-none.d-md-table-cell,
    .k-grid .k-table-tfoot .d-none.d-md-table-cell {
        display: table-cell !important;
    }
}

/* Hide on small screens (mobile/small tablets), show on large and up (desktops) */
.k-grid th.d-none.d-lg-table-cell,
.k-grid .k-table-th.d-none.d-lg-table-cell {
    display: none !important;
}

.k-grid td.d-none.d-lg-table-cell,
.k-grid .k-table-td.d-none.d-lg-table-cell {
    display: none !important;
}

.k-grid tfoot td.d-none.d-lg-table-cell,
.k-grid .k-table-tfoot .d-none.d-lg-table-cell {
    display: none !important;
}

@media (min-width: 992px) {
    .k-grid th.d-none.d-lg-table-cell,
    .k-grid .k-table-th.d-none.d-lg-table-cell {
        display: table-cell !important;
    }
    
    .k-grid td.d-none.d-lg-table-cell,
    .k-grid .k-table-td.d-none.d-lg-table-cell {
        display: table-cell !important;
    }
    
    .k-grid tfoot td.d-none.d-lg-table-cell,
    .k-grid .k-table-tfoot .d-none.d-lg-table-cell {
        display: table-cell !important;
    }
}

/* Hide on medium screens and below, show on extra large and up */
.k-grid th.d-none.d-xl-table-cell,
.k-grid .k-table-th.d-none.d-xl-table-cell {
    display: none !important;
}

.k-grid td.d-none.d-xl-table-cell,
.k-grid .k-table-td.d-none.d-xl-table-cell {
    display: none !important;
}

.k-grid tfoot td.d-none.d-xl-table-cell,
.k-grid .k-table-tfoot .d-none.d-xl-table-cell {
    display: none !important;
}

@media (min-width: 1200px) {
    .k-grid th.d-none.d-xl-table-cell,
    .k-grid .k-table-th.d-none.d-xl-table-cell {
        display: table-cell !important;
    }
    
    .k-grid td.d-none.d-xl-table-cell,
    .k-grid .k-table-td.d-none.d-xl-table-cell {
        display: table-cell !important;
    }
    
    .k-grid tfoot td.d-none.d-xl-table-cell,
    .k-grid .k-table-tfoot .d-none.d-xl-table-cell {
        display: table-cell !important;
    }
}

/* Responsive font sizing and padding for mobile devices */
/* Using 767.98px to avoid overlap with 768px breakpoint */
@media (max-width: 767.98px) {
    /* Reduce padding and font size on mobile for better data density */
    .k-grid th,
    .k-grid .k-table-th,
    .k-grid td,
    .k-grid .k-table-td {
        padding: 0.25rem 0.125rem !important;
        font-size: 0.75rem !important;
    }
}

/* ===================================== */
/* Loading State Styling */
/* ===================================== */

/* Style for loading state in dropdowns */
.form-select option[value=""]:first-child {
    color: #6c757d;
    font-style: italic;
}