/* =========================================================
   Phoenix-Kendo.css (cleaned & merged)
   ========================================================= */

/* ---- Input controls (Dropdown, Picker, Multiselect) ---- */
.k-input,
.k-picker,
.k-dropdown,
.k-multiselect,
.k-datepicker,
.k-timepicker,
.k-datetimepicker {
    font-size: 0.813rem !important; /* Phoenix form-control size */
    line-height: 1.5 !important;
}

.k-widget.k-datepicker,
.k-widget.k-datetimepicker,
.k-widget.k-dropdown,
.k-widget.k-combobox,
.k-widget.k-multiselect,
.k-widget.k-timepicker {
    width: 100% !important;
    display: block !important;
}

/* Inputs height (match Phoenix ~32px) */
.k-widget .k-input {
    height: calc(1.875rem + 2px) !important;
    padding: 0.4375rem 0.75rem !important;
    box-sizing: border-box;
}

/* Remove rounded corner between input & icon */
.k-picker .k-input {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* Calendar/clock buttons */
.k-picker .k-input-button {
    border: 1px solid #d1d5db;
    border-left: none;
    border-radius: 0 0.375rem 0.375rem 0 !important;
    background-color: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Focused input */
.k-picker.k-focus .k-input,
.k-picker.k-focus .k-input-button {
    border-color: #2c7be5 !important;
    box-shadow: 0 0 0 0.25rem rgba(44, 123, 229, 0.25) !important;
}

/* Multiselect chips */
.k-multiselect .k-multiselect-wrap .k-chip {
    font-size: 0.813rem !important;
    line-height: 1.2 !important;
    border-radius: 0.25rem !important;
    background: #f1f3f5 !important;
    color: #495057 !important;
    margin: 0.25rem 0.25rem !important;
    padding: 0.125rem 0.5rem !important;
}

/*.k-multiselect .k-chip .k-icon {
    font-size: 0.75rem !important;
    margin-left: 0.25rem !important;
    color: #6c757d !important;
}

    .k-multiselect .k-chip .k-icon:hover {
        color: #dc3545 !important;
    }*/

/* MultiSelect chip fix: align text + close icon */
.k-multiselect .k-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.25rem !important; /* space between text and x */
    padding: 0.125rem 0.5rem !important;
    line-height: 1.3 !important;
}

    .k-multiselect .k-chip .k-icon {
        margin: 0 !important; /* remove old margin */
        font-size: 0.75rem !important;
    }

/* ---- Kendo Grid ---- */
.k-grid {
    font-size: 0.813rem !important;
}

.k-grid-header th {
    background-color: #f9fafb !important;
    font-weight: 600 !important;
    color: #374151 !important;
    padding: 0.5rem 0.75rem !important;
    border-color: #d1d5db !important;
}

.k-grid td {
    padding: 0.5rem 0.75rem !important;
    border-color: #d1d5db !important;
    vertical-align: middle !important;
    line-height: 1.3 !important;
}
/* Hover + Stripes */
.k-grid tr:hover {
    background-color: #f1f5f9 !important;
}

.k-grid tbody tr:nth-child(even) {
    background-color: #f9fafb !important;
}

/* Ellipsis for cell text */
.k-grid td > .k-link,
.k-grid td > a,
.k-grid td > span,
.k-grid td > div {
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}
/* Exclude inputs/buttons */
.k-grid td :is(input, select, textarea, button, .k-button, .k-checkbox, .k-icon) {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
}

/* ---- Grid Pager ---- */
.k-grid .k-pager-wrap .k-link,
.k-grid .k-pager-numbers .k-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    margin: 0 4px !important;
    font-size: 14px !important;
    color: #495057 !important;
    border: 1px solid #dee2e6 !important;
    background: #fff !important;
}

.k-grid .k-pager-numbers .k-state-selected {
    background-color: #3874ff !important;
    border-color: #2f5fd9 !important;
    color: #fff !important;
}

.k-grid .k-pager-wrap .k-link:hover {
    background-color: #e8f0ff !important;
    color: #3874ff !important;
}

.k-grid .k-pager-wrap .k-link .k-icon {
    font-size: 16px !important;
    color: inherit !important;
}
/* Pager sizes dropdown */
.k-grid .k-pager-sizes .k-dropdown {
    height: 34px !important;
    font-size: 0.813rem !important;
    border-radius: 0.375rem !important;
}

    .k-grid .k-pager-sizes .k-dropdown .k-input {
        height: 100% !important;
        padding: 0 0.5rem !important;
    }

/* Mobile pager */
@media (max-width: 576px) {
    .k-grid .k-pager-wrap {
        flex-wrap: wrap !important;
        justify-content: center !important;
    }

    .k-grid .k-pager-numbers {
        margin-top: 0.5rem !important;
    }
}



/* ---- Fix: Kendo Grid Pager Dropdown width ---- */
.k-grid .k-pager-sizes .k-dropdown {
    min-width: 90px !important; /* ensures readable width */
    width: auto !important;
    border: none !important;
    box-shadow: none !important;
}

    .k-grid .k-pager-sizes .k-dropdown .k-input {
        padding: 0 0.5rem !important;
        text-align: center !important; /* center numbers */
    }

/* Dropdown popup width fix */
.k-animation-container .k-list-container {
    min-width: 90px !important; /* match the dropdown box */
}



/* ---- Improved Pager Dropdown: height + rounded match nav buttons ---- */
.k-grid .k-pager-sizes .k-dropdown {
    height: 34px !important; /* match nav button height */
    min-width: 90px !important;
    border-radius: 1.5rem !important; /* soft pill-like corners */
    font-size: 0.813rem !important; /* match small text size */
    border: 1px solid #dee2e6 !important;
    background-color: #fff !important;
    display: flex !important;
    align-items: center !important;
}

    .k-grid .k-pager-sizes .k-dropdown .k-input {
        height: 100% !important;
        padding: 0 0.75rem !important;
        line-height: 1.4 !important;
        text-align: center !important;
        border-radius: inherit !important;
        
    }

/* Dropdown popup (list items) */
.k-animation-container .k-list-container {
    min-width: 90px !important;
    border-radius: 0.5rem !important;
    font-size: 0.813rem !important;
}





/* ---- Compact Kendo Grid Titlebar Buttons (Phoenix style) ---- */
.k-grid-toolbar .k-button {
    font-size: 0.813rem !important; /* match Phoenix small text */
    line-height: 1.2 !important;
    height: 32px !important; /* same as Phoenix buttons */
    padding: 0.25rem 0.75rem !important; /* compact spacing */
    border-radius: 0.375rem !important; /* Bootstrap rounded */
    border: 1px solid #dee2e6 !important;
    background-color: #fff !important;
    color: #212529 !important;
    font-weight: 500 !important;
    box-shadow: none !important;
}

    .k-grid-toolbar .k-button:hover {
        background-color: #f8f9fa !important;
        border-color: #ced4da !important;
        color: #0d6efd !important;
    }


    .k-grid-toolbar .k-button .k-icon {
        font-size: 0.875rem !important;
        margin-right: 0.25rem !important;
    }




/* ---- Kendo Scheduler ---- */
.k-scheduler {
    font-size: 0.813rem !important;
    border: 1px solid #d1d5db !important;
    border-radius: 0.375rem !important;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,.05) !important;
}

.k-scheduler-toolbar {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 0.5rem !important;
    background: #f9fafb !important;
    border-bottom: 1px solid #d1d5db !important;
    padding: 0.5rem !important;
}
    /* Toolbar buttons */
    .k-scheduler-toolbar .k-link {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 32px !important;
        padding: 0 0.75rem !important;
        font-size: 0.813rem !important;
        line-height: 1.2 !important;
        border: 1px solid #dee2e6 !important;
        border-radius: 0.375rem !important;
        background-color: #fff !important;
        color: #212529 !important;
        font-weight: 500 !important;
    }

        .k-scheduler-toolbar .k-link:hover {
            background-color: #e9ecef !important;
            text-decoration: none !important;
        }

    .k-scheduler-toolbar .k-state-selected .k-link {
        background-color: #3874ff !important;
        border-color: #2f5fd9 !important;
        color: #fff !important;
    }
    /* Arrows */
    .k-scheduler-toolbar .k-nav-prev .k-link,
    .k-scheduler-toolbar .k-nav-next .k-link {
        width: 32px !important;
        padding: 0 !important;
    }

    .k-scheduler-toolbar li.k-header {
        border: none !important;
        background: transparent !important;
        padding: 0 !important;
        margin: 0 2px !important;
    }





/* ==========================================
   PATCH FIXES: MultiSelect Chips + Date/Time Popup
   ========================================== */

/* MultiSelect chips: align text + x icon, shrink height */
.k-multiselect .k-chip {
    display: inline-flex !important;
    align-items: center !important;
    font-size: 0.813rem !important; /* match input text */
    line-height: 1.3 !important;
    padding: 0.125rem 0.4rem !important;
    margin: 0.125rem !important;
    background: #f1f3f5 !important;
    color: #495057 !important;
    border-radius: 0.25rem !important;
    height: auto !important;
    box-shadow: none !important;
}

    .k-multiselect .k-chip .k-icon {
        font-size: 0.75rem !important;
        margin-left: 0.25rem !important;
        position: relative !important;
        top: 0 !important;
        color: #6c757d !important;
        flex-shrink: 0;
    }

        .k-multiselect .k-chip .k-icon:hover {
            color: #dc3545 !important;
        }

/* Restore compact font in calendar/time popups */
.k-calendar,
.k-time-list,
.k-datetimepicker .k-popup,
.k-datepicker .k-popup,
.k-timepicker .k-popup {
    font-size: 0.75rem !important; /* revert to Kendo default */
    line-height: 1.4 !important;
}



@media (max-width: 576px) {
    .k-grid .k-pager-numbers {
        display: inline-flex !important;
        margin-top: 0.5rem !important;
    }
    /* Hide the mobile dropdown selector */
    .k-grid .k-pager-input {
        display: none !important;
    }
}


/* Kendo Grid: restore hyperlink look inside templates */
/*.k-grid td a {
    color: #0d6efd !important;*/ /* Bootstrap 5 link color */
    /*text-decoration: underline !important;*/
    /*cursor: pointer !important;
}

    .k-grid td a:hover {
        color: #0a58ca !important;*/ /* Bootstrap 5 link hover */
        /*text-decoration: underline !important;*/
    /*}*/


/* Kendo Grid: hyperlink look inside templates (no underline, bold on hover) */
.k-grid td a {
    color: #0d6efd !important; /* Bootstrap 5 link blue */
    text-decoration: none !important;
    cursor: pointer !important;
    font-weight: 400 !important; /* normal weight */
}

    .k-grid td a:hover {
        color: #0a58ca !important; /* darker hover blue */
        text-decoration: none !important;
        font-weight: 600 !important; /* bold on hover */
    }



/* === Comprehensive fix: remove inner square, keep rounded pill === */
.k-grid .k-pager-sizes .k-dropdown,
.k-grid .k-pager-sizes .k-dropdown-wrap,
.k-grid .k-pager-sizes .k-dropdown .k-dropdown-wrap {
    height: 34px !important;
    min-width: 90px !important;
    border-radius: 1.5rem !important;
    overflow: hidden !important; /* clip inner box to rounded corners */
    background: #fff !important;
    border: 1px solid #dee2e6 !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 0 !important;
    box-shadow: none !important;
    -webkit-background-clip: padding-box !important;
    background-clip: padding-box !important;
}

    /* Remove inner box/border from possible inner elements */
    .k-grid .k-pager-sizes .k-dropdown .k-input,
    .k-grid .k-pager-sizes .k-dropdown .k-input-inner,
    .k-grid .k-pager-sizes .k-dropdown .k-dropdown-wrap,
    .k-grid .k-pager-sizes .k-dropdown .k-input:focus,
    .k-grid .k-pager-sizes .k-dropdown .k-input:active {
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;
        outline: none !important;
        margin: 0 0.5rem !important;
        padding: 0 !important;
        height: auto !important;
        width: 100% !important;
    }

    /* Icon area / select chevron */
    .k-grid .k-pager-sizes .k-dropdown .k-select {
        border-left: none !important;
        height: 100% !important;
        display: inline-flex !important;
        align-items: center !important;
        padding: 0 0.5rem !important;
        margin-left: auto !important;
        background: transparent !important;
    }

/* Ensure popup list has soft corners and matches width */
.k-animation-container .k-list-container {
    border-radius: 0.5rem !important;
    min-width: 90px !important;
    overflow: hidden !important;
}

/* Safety net: remove stray borders/shadows from any nested nodes */
.k-grid .k-pager-sizes .k-dropdown * {
    box-shadow: none !important;
    border: none !important;
    border-radius: inherit !important;
}

/* =====================================================
   Phoenix + Old Kendo DropDownList Alignment Fix
   ===================================================== */

/* Base dropdown wrapper */
.k-widget.k-dropdown {
    width: 100% !important;
    display: block !important;
}

/* Dropdown outer shell */
.k-dropdown-wrap {
    display: flex !important;
    align-items: center !important;
    min-height: 32px !important; /* Phoenix input height */
    padding-right: 2rem !important; /* reserve space for arrow */
    box-sizing: border-box !important;
}

/* Text value */
.k-dropdown .k-input {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
    line-height: 1.4 !important;
    padding: 0 0.75rem !important;
    margin: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Arrow / select icon */
.k-dropdown .k-select {
    position: absolute !important;
    right: 0.5rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    height: auto !important;
    min-width: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important;
    background: transparent !important;
    pointer-events: none !important; /* click still goes to dropdown */
}

    /* Arrow icon itself */
    .k-dropdown .k-select .k-icon {
        font-size: 12px !important;
        margin: 0 !important;
    }

/* Focus state (Phoenix style) */
.k-dropdown.k-state-focused .k-dropdown-wrap {
    border-color: #2c7be5 !important;
    box-shadow: 0 0 0 0.25rem rgba(44, 123, 229, 0.25) !important;
}



/* =====================================================
   OLD KENDO MultiSelect (li.k-button) – fix pill & x
   ===================================================== */

/* Selected item pill */
.k-multiselect .k-button {
    position: relative !important;
    padding: 0.125rem 1.75rem 0.125rem 0.5rem !important;
    line-height: 1.2 !important;
    font-size: 0.813rem !important;
    min-height: 22px !important;
}

    /* Text inside pill */
    .k-multiselect .k-button > span:first-child {
        white-space: nowrap !important;
    }

    /* Remove (x) button */
    .k-multiselect .k-button .k-select {
        position: absolute !important;
        right: 0.4rem !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        margin: 0 !important;
    }

    /* X icon size */
    .k-multiselect .k-button .k-icon {
        font-size: 12px !important;
    }





/* =====================================================
   FINAL OVERRIDE – Kendo Filter Input (force compact)
   Works with OLD Kendo (v2020+)
   ===================================================== */

/* Filter container */
.k-popup .k-list-filter {
    padding: 0.25rem 0.5rem !important;
    margin-bottom: 0.25rem !important;
}

    /* Textbox wrapper (Kendo adds height here) */
    .k-popup .k-list-filter .k-textbox,
    .k-popup .k-list-filter .k-textbox-container {
        height: 32px !important; /* Phoenix small input */
        min-height: 32px !important;
        padding: 0 !important;
        border-radius: 0.5rem !important;
    }

    /* Actual input (this is the real culprit) */
    .k-popup .k-list-filter .k-input-inner {
        height: 32px !important;
        min-height: 32px !important;
        padding: 0.25rem 0.75rem !important;
        font-size: 0.813rem !important;
        line-height: 1.4 !important;
        box-sizing: border-box !important;
    }

        /* Focus – Phoenix style */
        .k-popup .k-list-filter .k-input-inner:focus {
            border-color: #2c7be5 !important;
            box-shadow: 0 0 0 0.2rem rgba(44, 123, 229, 0.25) !important;
            outline: none !important;
        }



/* Ensure ComboBox has relative positioning */
.k-combobox {
    position: relative;
}

    /* Fix input height consistency */
    .k-combobox .k-input-inner {
        line-height: 1.5;
        padding-right: 3rem; /* space for X + arrow */
    }

    /* Center the clear (X) icon */
    .k-combobox .k-clear-value {
        top: 50% !important;
        transform: translateY(-50%);
        right: 2.2rem; /* keep distance from arrow */
    }

    /* Center the dropdown arrow */
    .k-combobox .k-select {
        top: 50%;
        transform: translateY(-50%);
    }