/*********************************************************** START Kendo General CSS ***********************************************************/

/* Prevents the form-control box-shadow from appearing when there are nested Kendo controls
   For example, DatePickers with Masked inputs
*/
.form-control .form-control,
.form-control .form-control:focus,
.form-control .form-control:focus-visible,
.form-control .form-control:focus-within {
    box-shadow: none !important;
}


.k-input.k-invalid, 
.k-widget.k-input.k-invalid,
.k-picker.k-invalid,
.k-widget.k-picker.k-invalid {
    border-color: #ccc !important;
}

.k-callout-n {
     display: none !important; 
}

/*********************************************************** END Kendo General CSS ***********************************************************/

/*********************************************************** START Kendo MultiSelect CSS ***********************************************************/

/* Wraps each MultiSelect to hold the caret */
.k-multiselect-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
}

    /* Ensure proper width alignment */
    .k-multiselect-wrapper .k-multiselect {
        width: 100%;
    }

    /* Ensure proper width alignment */
    .k-multiselect-wrapper .k-icon.k-i-x {
        display: none;
    }

/* Kendo caret icon styling */
.k-multiselect-caret {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    font-size: 16px;
    pointer-events: auto;
    z-index: 2; /* make sure caret receives the click */
    user-select: none;
}

    /* Kendo caret icon styling */
    .k-multiselect-caret:before {
        content: " " !important;
        background-image: url('/assets/icons/down_arrow_icon.svg');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }

/*********************************************************** END Kendo MultiSelect CSS ***********************************************************/

/*********************************************************** START Kendo Dropdown CSS ***********************************************************/

.k-dropdownlist .k-button {
    margin-right: 5px;
}

    .k-dropdownlist .k-button > .k-icon.k-i-arrow-s:before {
        content: " " !important;
        background-image: url('/assets/icons/down_arrow_icon.svg');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }

.k-dropdown-disabled {
    background-color: #eeeeee;
}

    .k-dropdown-disabled .k-input-inner.k-state-disabled {
        color: #000;
    }

/*********************************************************** END Kendo Dropdown CSS ***********************************************************/

/*********************************************************** START Kendo ComboBox CSS ***********************************************************/

.k-combobox .k-input-button,
.k-dropdowngrid .k-input-button {
    margin-right: 5px;
}

    .k-combobox .k-input-button > .k-icon.k-i-arrow-s:before,
    .k-dropdowngrid .k-input-button > .k-icon.k-i-arrow-s:before {
        content: " " !important;
        background-image: url('/assets/icons/down_arrow_icon.svg');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }

/*********************************************************** END Kendo ComboBox CSS ***********************************************************/

/*********************************************************** START Kendo Datepicker CSS ***********************************************************/

.k-datepicker .k-button > .k-icon.k-i-calendar:before {
    content: " " !important;
    background-image: url('/assets/icons/calendar_icon.svg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.k-datepicker .k-maskedtextbox {
    padding: 0 !important;
}

    .k-datepicker .k-maskedtextbox .form-control {
        border: none !important;
    }

    .k-datepicker .k-maskedtextbox .k-input-inner.form-control:focus,
    .k-datepicker .k-maskedtextbox .k-input-inner.form-control:focus-visible {
        box-shadow: none !important;
    }

.k-datepicker-disabled {
    color: #000;
}

/*********************************************************** END Kendo Datepicker CSS ***********************************************************/

/*********************************************************** START Kendo MaskedTextBox CSS ***********************************************************/

/*.k-maskedtextbox {
    border: none !important;
}

    .k-maskedtextbox .form-control {
        border: 1px solid #ccc !important;
    }
*/

/*
.k-maskedtextbox.form-control .k-input-inner.form-control:focus,
.k-maskedtextbox.form-control .k-input-inner.form-control:focus-visible {
    box-shadow: none !important;
}*/

/*********************************************************** END Kendo MaskedTextBox CSS ***********************************************************/

/*********************************************************** START Kendo Grid CSS ***********************************************************/

.k-grid .k-grid-pager .k-pager-numbers span[role=button].k-link.k-selected {
    background-color: var(--bs-link-color);
    border-color: var(--bs-link-color);
}

.k-grid .k-grid-pager a.k-pager-nav {
    color: var(--bs-link-color);
}

.k-grid .k-grid-pager .k-pager-info.k-label {
    color: var(--arise-blue);
}

.k-grid-add .k-icon {
    display: none;
}

/*
    Keep Kendo command buttons visually equivalent to:
    btn btn-arise-default d-block w-100 text-nowrap
    and use BS5-like gap-2 spacing on the command cell.
*/
.k-grid {
    --arise-kendo-command-btn-padding-y: 0.375rem;
    --arise-kendo-command-btn-padding-x: 0.75rem;
    --arise-kendo-command-btn-font-size: 1rem;
    --arise-kendo-command-btn-line-height: 1.5;
    --arise-kendo-command-btn-radius: 0.375rem;
    --arise-kendo-command-btn-gap: 0.5rem;
    --arise-kendo-command-btn-icon-gap: 0.375rem;
    --arise-kendo-command-btn-min-height: calc(1.5em + 0.75rem + 2px);
    --arise-kendo-command-cell-width: 10rem;

    --arise-kendo-command-default-color: var(--bs-body-color);
    --arise-kendo-command-default-bg: #fff;
    --arise-kendo-command-default-border: #ced4da;
    --arise-kendo-command-default-hover-bg: #e6e6e6;
    --arise-kendo-command-default-hover-border: #afb4b9;
    --arise-kendo-command-default-focus-shadow: 0 0 0 .25rem rgba(108, 117, 125, .25);

    --arise-kendo-command-primary-color: #fff;
    --arise-kendo-command-primary-bg: var(--bs-primary);
    --arise-kendo-command-primary-border: var(--bs-primary);
    --arise-kendo-command-primary-hover-bg: color-mix(in srgb, var(--bs-primary) 85%, #000 15%);
    --arise-kendo-command-primary-hover-border: color-mix(in srgb, var(--bs-primary) 80%, #000 20%);
    --arise-kendo-command-primary-focus-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .25);
}

.k-grid .k-command-cell:has(> button.k-grid-edit, > button.k-grid-delete, > button.k-grid-update, > button.k-grid-cancel) {
    /* Keep table-cell behavior so column sizing comes from table layout */
    display: table-cell;
    padding: var(--arise-kendo-command-btn-gap) !important;
    width: var(--arise-kendo-command-cell-width);
    min-width: var(--arise-kendo-command-cell-width);
    max-width: var(--arise-kendo-command-cell-width);
}

/*
    Fallback support for Notes-style edit-row layout where header rows/colspan are dynamically rebuilt.
    This avoids relying only on :has(...) + last-child/header matching.
*/
.k-grid .k-grid-edit-row > td.k-command-cell {
    padding: var(--arise-kendo-command-btn-gap) !important;
    width: var(--arise-kendo-command-cell-width) !important;
    min-width: var(--arise-kendo-command-cell-width) !important;
    max-width: var(--arise-kendo-command-cell-width) !important;
    vertical-align: top;
}

/* Notes grid specific command-cell hook */
.k-grid td.k-command-cell.arise-notes-command-cell {
    padding: var(--arise-kendo-command-btn-gap) !important;
    width: var(--arise-kendo-command-cell-width) !important;
    min-width: var(--arise-kendo-command-cell-width) !important;
    max-width: var(--arise-kendo-command-cell-width) !important;
    vertical-align: top !important;
}

.k-grid td.k-command-cell.arise-notes-command-cell > .k-button + .k-button,
.k-grid td.k-command-cell.arise-notes-command-cell > button + button {
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-inline-start: 0 !important;
    margin-inline-end: 0 !important;
    margin-top: var(--arise-kendo-command-btn-gap) !important;
}

/* Notes edit-row override: keep second command button right-aligned */
.k-grid .k-grid-edit-row > td.k-command-cell.arise-notes-command-cell > .k-button + .k-button,
.k-grid .k-grid-edit-row > td.k-command-cell.arise-notes-command-cell > button + button {
    margin-inline-start: auto !important;
}

.k-grid td.k-command-cell.arise-notes-command-cell > button.k-grid-edit,
.k-grid td.k-command-cell.arise-notes-command-cell > button.k-grid-delete,
.k-grid td.k-command-cell.arise-notes-command-cell > button.k-grid-update,
.k-grid td.k-command-cell.arise-notes-command-cell > button.k-grid-cancel {
    width: min(100%, var(--arise-kendo-command-cell-width));
    max-width: var(--arise-kendo-command-cell-width);
    margin-inline-start: auto !important;
    margin-inline-end: 0 !important;
}

.k-grid .k-grid-edit-row > td.k-command-cell > .k-button + .k-button,
.k-grid .k-grid-edit-row > td.k-command-cell > button + button {
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-inline-start: 0 !important;
    margin-inline-end: 0 !important;
    margin-top: var(--arise-kendo-command-btn-gap) !important;
}

.k-grid .k-grid-edit-row > td.k-command-cell > button.k-grid-update,
.k-grid .k-grid-edit-row > td.k-command-cell > button.k-grid-cancel,
.k-grid .k-grid-edit-row > td.k-command-cell > button.k-grid-edit,
.k-grid .k-grid-edit-row > td.k-command-cell > button.k-grid-delete {
    width: min(100%, var(--arise-kendo-command-cell-width));
    max-width: var(--arise-kendo-command-cell-width);
    margin-inline-start: auto;
    margin-inline-end: 0;
}

/* Enforce command column width at table layout level (colgroup/header/body) */
.k-grid table:has(tbody td.k-command-cell:last-child:has(> button.k-grid-edit, > button.k-grid-delete, > button.k-grid-update, > button.k-grid-cancel)) colgroup col:last-child {
    width: var(--arise-kendo-command-cell-width) !important;
}

.k-grid table:has(tbody td.k-command-cell:last-child:has(> button.k-grid-edit, > button.k-grid-delete, > button.k-grid-update, > button.k-grid-cancel)) thead th[aria-label="Actions"]:last-child,
.k-grid tbody td.k-command-cell:has(> button.k-grid-edit, > button.k-grid-delete, > button.k-grid-update, > button.k-grid-cancel) {
    width: var(--arise-kendo-command-cell-width) !important;
    min-width: var(--arise-kendo-command-cell-width) !important;
    max-width: var(--arise-kendo-command-cell-width) !important;
}

.k-grid thead th[aria-label="Actions"] {
    width: var(--arise-kendo-command-cell-width) !important;
    min-width: var(--arise-kendo-command-cell-width) !important;
    max-width: var(--arise-kendo-command-cell-width) !important;
}

/* Override Kendo's default horizontal button spacing in command cells */
.k-grid .k-command-cell:has(> button.k-grid-edit, > button.k-grid-delete, > button.k-grid-update, > button.k-grid-cancel) > .k-button + .k-button,
.k-grid .k-command-cell:has(> button.k-grid-edit, > button.k-grid-delete, > button.k-grid-update, > button.k-grid-cancel) > button + button {
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-inline-start: 0 !important;
    margin-inline-end: 0 !important;
}

.k-grid .k-command-cell > button.k-grid-edit,
.k-grid .k-command-cell > button.k-grid-delete,
.k-grid .k-command-cell > button.k-grid-update,
.k-grid .k-command-cell > button.k-grid-cancel {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--arise-kendo-command-btn-icon-gap);
    width: min(100%, var(--arise-kendo-command-cell-width));
    max-width: var(--arise-kendo-command-cell-width);
    margin-inline-start: auto;
    margin-inline-end: 0;
    min-height: var(--arise-kendo-command-btn-min-height);
    min-width: 0;
    white-space: nowrap;
    text-align: center;
    vertical-align: middle;
    user-select: none;
    text-decoration: none;

    font-weight: 400;
    font-size: var(--arise-kendo-command-btn-font-size);
    line-height: var(--arise-kendo-command-btn-line-height);

    padding: var(--arise-kendo-command-btn-padding-y) var(--arise-kendo-command-btn-padding-x);
    border: 1px solid var(--arise-kendo-command-default-border);
    border-radius: var(--arise-kendo-command-btn-radius);

    color: var(--arise-kendo-command-default-color);
    background-color: var(--arise-kendo-command-default-bg);
    background-image: none;

    cursor: pointer;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.k-grid .k-command-cell:has(> button.k-grid-edit, > button.k-grid-delete, > button.k-grid-update, > button.k-grid-cancel) > button + button {
    margin-top: var(--arise-kendo-command-btn-gap) !important;
}

.k-grid .k-command-cell > button.k-grid-edit > .k-icon,
.k-grid .k-command-cell > button.k-grid-delete > .k-icon,
.k-grid .k-command-cell > button.k-grid-update > .k-icon,
.k-grid .k-command-cell > button.k-grid-cancel > .k-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    font-size: 1rem;
    line-height: 1;
    flex: 0 0 auto;
    margin-inline-end: 0;
    vertical-align: middle;
}


/*Alternative icon style (hidden):*/
/*.k-grid .k-command-cell > button.k-grid-edit > .k-icon,
.k-grid .k-command-cell > button.k-grid-delete > .k-icon,
.k-grid .k-command-cell > button.k-grid-update > .k-icon,
.k-grid .k-command-cell > button.k-grid-cancel > .k-icon {
    display: none !important;
}*/


.k-grid .k-command-cell > button.k-grid-edit,
.k-grid .k-command-cell > button.k-grid-update {
    color: var(--arise-kendo-command-primary-color);
    background-color: var(--arise-kendo-command-primary-bg);
    border-color: var(--arise-kendo-command-primary-border);
}

.k-grid .k-command-cell > button.k-grid-edit:hover,
.k-grid .k-command-cell > button.k-grid-delete:hover,
.k-grid .k-command-cell > button.k-grid-update:hover,
.k-grid .k-command-cell > button.k-grid-cancel:hover {
    color: var(--arise-kendo-command-default-color);
    background-color: var(--arise-kendo-command-default-hover-bg);
    border-color: var(--arise-kendo-command-default-hover-border);
}

.k-grid .k-command-cell > button.k-grid-edit:hover,
.k-grid .k-command-cell > button.k-grid-update:hover {
    color: var(--arise-kendo-command-primary-color);
    background-color: var(--arise-kendo-command-primary-hover-bg);
    border-color: var(--arise-kendo-command-primary-hover-border);
}

.k-grid .k-command-cell > button.k-grid-edit:focus-visible,
.k-grid .k-command-cell > button.k-grid-delete:focus-visible,
.k-grid .k-command-cell > button.k-grid-update:focus-visible,
.k-grid .k-command-cell > button.k-grid-cancel:focus-visible {
    outline: 0;
    box-shadow: var(--arise-kendo-command-default-focus-shadow);
}

.k-grid .k-command-cell > button.k-grid-edit:focus-visible,
.k-grid .k-command-cell > button.k-grid-update:focus-visible {
    box-shadow: var(--arise-kendo-command-primary-focus-shadow);
}

.k-grid .k-command-cell > button.k-grid-edit:active,
.k-grid .k-command-cell > button.k-grid-delete:active,
.k-grid .k-command-cell > button.k-grid-update:active,
.k-grid .k-command-cell > button.k-grid-cancel:active {
    color: var(--arise-kendo-command-default-color);
    background-color: var(--arise-kendo-command-default-hover-bg);
    border-color: var(--arise-kendo-command-default-hover-border);
}

.k-grid .k-command-cell > button.k-grid-edit:active,
.k-grid .k-command-cell > button.k-grid-update:active {
    color: var(--arise-kendo-command-primary-color);
    background-color: var(--arise-kendo-command-primary-hover-bg);
    border-color: var(--arise-kendo-command-primary-hover-border);
}

.k-grid .k-command-cell > button.k-grid-edit:disabled,
.k-grid .k-command-cell > button.k-grid-delete:disabled,
.k-grid .k-command-cell > button.k-grid-update:disabled,
.k-grid .k-command-cell > button.k-grid-cancel:disabled {
    opacity: .65;
    pointer-events: none;
}


/*.k-grid .k-grid-pager ul.k-pager-numbers a {
    color: #265A87;
}

.k-grid .k-grid-pager .k-pager-sizes.k-label {
    color: #525252;
}*/

/*********************************************************** END Kendo Grid CSS ***********************************************************/

/*********************************************************** START Kendo Upload CSS ***********************************************************/

/* Removes the cropped corners of the dropzone */
.k-widget.k-upload {
    padding: 1px;
    background-color: #f5f5f5;
}

/*********************************************************** END Kendo Upload CSS ***********************************************************/