/*!
 * KyOps CopLogic Web App | Telerik Components Custom Styles
 * Documenation: Custom overrites for telerik component styles only!!
    -- Dark Classes are scoped with [data-bs-theme=dark] to target dark mode
 */
@import "../themes/themes.site.css";

/*=======================================================
  = Global Telerik Component Overwrites
========================================================= */
/* #region */

/* Context Menu */
.k-context-menu {
    font-size: 0.8em;
}

.k-menu-link-text {
    font-size: .875em !important;
}

/* RTE Editor */
.k-editor.bg-yellow .k-editor-content {
    background-color: var(--bs-yellow);
}

/* OTHER */
.k-i-bell {
    font-size: 1.25rem !important;
    cursor: pointer;
}

    .k-i-bell.disabled {
        font-size: 1.25rem !important;
        padding: .85rem !important;
        border-radius: 50%;
        border-color: var(--bs-white);
        background-color: var(--bs-white) !important;
        color: rgba(141, 147, 152, .75) !important;
        cursor: not-allowed !important;
    }

/*Remove Telerik File Manager "Delete & Rename" context menu option*/
.custom-context-menu .k-menu-group, .k-menu li:nth-of-type(3),
.custom-context-menu .k-menu-group, .k-menu li:nth-of-type(1) {
    display: none;
}

/* Remove animations from ComboBox, DropDownList, DateTimePicker and other selection component*/
.k-child-animation-container {
    transition: none !important;
}

/* Remove 'now' button from timepicker */
.k-timeselector .k-time-now{
    display: none;
}

/* = Buttons Global Overwrites
--------------------------------------------------------- */
/* #region */
.k-button-solid.k-button-primary {
    border-color: var(--bs-primary) !important;
    background-color: var(--bs-primary) !important;
}

    .k-button-solid.k-button-primary:hover, .k-button-solid.k-button-primary.k-hover {
        border-color: var(--bs-primary) !important;
        background-color: var(--bs-primary) !important;
        filter: brightness(85%);
    }

.k-button-solid.k-button-gray-light {
    color: var(--bs-white) !important;
    border-color: var(--bs-gray-300) !important;
    background-color: var(--bs-gray-300) !important;
}

    .k-button-solid.k-button-gray-light:hover, .k-button-solid.k-button-gray-light.k-hover {
        color: var(--bs-white) !important;
        border-color: var(--bs-gray-300!important);
        background-color: var(--bs-gray-300) !important;
        filter: brightness(85%);
    }

    .k-button-solid.k-button-gray-light:disabled, .k-button-solid.k-button-gray-light.k-disabled {
        color: var(--bs-white) !important;
        border-color: var(--bs-gray-700) !important;
        background-color: var(--bs-gray-700) !important;
    }

.k-button-solid.k-button-secondary {
    border-color: var(--bs-secondary) !important;
    background-color: var(--bs-secondary) !important;
    color: var(--bs-body-color) !important;
}

    .k-button-solid.k-button-secondary:hover, .k-button-solid.k-button-secondary.k-hover {
        border-color: var(--bs-secondary) !important;
        background-color: var(--bs-secondary) !important;
        filter: brightness(85%);
    }

/*Wizard Sidebar Menu Navigation Button*/
.k-button.nav-button {
    background-color: transparent;
    border: none !important;
    border-color: var(--ksp-primary-400) !important;
    border-radius: 0;
    font-size: 0.9rem;
    justify-content: start;
    box-shadow: none;
    width: 100%;
    color: var(--bs-white) !important;
    transition: background-color 0.3s ease;
    word-break: break-word;
    box-sizing: border-box;
    border-left: 5px solid transparent !important;
}

    .k-button.nav-button:hover, .k-button.nav-button.active {
        background-color: var(--ksp-primary-shade-900);
        color: var(--bs-white);
        transition: background-color 0.3s ease;
        word-break: break-word;
        box-sizing: border-box;
    }

    .k-button.nav-button.active {
        font-weight: bold;
    }

        .k-button.nav-button.active > .k-button-icon,
        .k-button.nav-button.active > .k-svg-icon,
        .k-button.nav-button > .k-svg-icon {
            align-items: normal !important;
        }

.sidebar.collapsed .k-button.nav-button > .k-svg-icon {
    padding-top: 0.25rem !important;
}

/* Telerik ToolTip Class for Collapsed Wizard Sidebar
   renders on the tooltip's container */
.nav-button-tooltip .k-tooltip {
    background: var(--ksp-primary-shade-900) !important;
    color: var(--bs-white) !important;
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.03), 0 0 2px rgba(255, 255, 255, 0.03);
    border: 2px solid var(--ksp-primary-400) !important;
    border-radius: 0.5rem;
}

    .nav-button-tooltip .k-tooltip .k-callout {
        /* same as tooltip background */
        color: var(--ksp-primary-shade-900) !important;
    }

.nav-button-tooltip .k-tooltip-content {
    font-size: 1.25rem !important;
}
/* #endregion */
/* = Tabstrip Control UI Global Overwrites
--------------------------------------------------------- */
/* #region */
.k-tabstrip {
    font-family: var(--font-family-body) !important;
}
.k-tabstrip-item.k-active {
    background-color: var(--ksp-primary-500) !important;
}

    .k-tabstrip .k-link {
        font-family: var(--font-family-headings) !important;
    }

.k-tabstrip-top > .k-tabstrip-items-wrapper {
    border-bottom-width: 0px !important;
}

.k-tabstrip-item {
    background-color: var(--bs-primary) !important;
    color: var(--bs-body-color) !important;
}

    .k-tabstrip-item:hover {
        background-color: var(--bs-primary-bg-subtle) !important;
        color: var(--bs-body-color) !important;
        border-color: var(--bs-primary-border-subtle) !important;
    }

    .k-tabstrip-item.k-active {
        background-color: var(--bs-primary-bg-subtle) !important;
        color: var(--bs-body-color) !important;
        border-color: var(--bs-primary-border-subtle) !important;
        font-weight: bold !important;
    }

.k-tabstrip-left .k-link {
    font-size: 0.9em;
    writing-mode: vertical-lr;
    transform: rotate(-180deg);
    padding-inline-start: 10px;
    padding-inline-end: 10px;
    padding-block-start: 4px;
    padding-block-end: 4px;
}

.k-tabstrip-content {
    min-height: 400px;
}

.property-tab-container .k-tabstrip-items,
.juvenile-guardian-tab-container .k-tabstrip-items {
    border-bottom: 1px solid var(--bs-primary-border-subtle) !important;
}

.property-tab-container .k-tabstrip-content,
.property-tab-container .k-tabstrip > .k-content,
.juvenile-guardian-tab-container .k-tabstrip-content,
.juvenile-guardian-tab-container .k-tabstrip > .k-content {
    background-color: var(--bs-primary-bg-subtle) !important;
    border-color: var(--bs-primary-border-subtle) !important;
}

.property-tab-container .k-tabstrip-content,
.property-tab-container .k-tabstrip > .k-content {
    overflow:unset!important;
    min-height: 400px;
}

    .property-tab-container .k-tabstrip-content .location-details,
    .consumer-tab-container .k-tabstrip-content {
        border-radius: .25rem !important;
        border: 1px solid var(--bs-primary-border-subtle) !important;
    }
/* #endregion */

/* = Grid / Table / ListView Control UI Global Overwrites
--------------------------------------------------------- */
/* #region */
.k-toolbar {
    background-color: var(--ksp-primary-500) !important;
    overflow: visible; /* To enable dropdown list to show */
}

.k-toolbar-items,
.k-grid-aria-root:has(.combo-div),
.k-grid-container:has(.combo-div),
.k-grid-content:has(.combo-div),
.k-table-td:has(.combo-div) {
    overflow: visible !important; /* To enable dropdown list to show */
}

.k-table-th {
    background-color: var(--bs-primary) !important;
    color: var(--bs-body-color) !important;
    font-weight: 600 !important;
}
/* GRIDS */
.k-grid th.text-wrap span {
    white-space: normal;
}

.k-grid-sm .k-table-thead,
.k-grid-sm .k-table-tbody {
    font-size: 0.9em;
}

.k-table-td.k-hierarchy-cell {
    cursor: pointer !important;
}

.k-detail-row.k-table-row {
    background-color: var(--ksp-primary-300) !important;
}

.selectable-items-table .k-grid-table .k-table-th:first-child,
.selectable-items-table .k-grid-table td:first-child,
.selectable-items-table .k-grid-table .k-table-td:first-child,
.selectable-items-table .k-grid-table table tr td:first-child {
    text-align: center !important;
}

.selectable-listview div.k-listview-header {
    border-bottom: 1px solid var(--bs-border-color) !important;
    background-color: var(--ksp-primary-500) !important;
}

.selectable-listview div.k-listview-footer {
    border-top: 1px solid var(--bs-border-color) !important;
    background-color: var(--ksp-primary-500) !important;
}

.k-listview-content {
    overflow: visible; /* To enable dropdown list to show */
}

.k-grid .k-table-th.k-selected,
.k-grid td.k-selected,
.k-grid .k-table-td.k-selected,
.k-grid .k-table-row.k-selected > td,
.k-grid .k-table-row.k-selected > .k-table-td {
    background-color: rgba(87,168,169,.2) !important;
}

.k-grid .k-table-th:focus,
.k-grid .k-table-th.k-focus,
.k-grid td:focus,
.k-grid td.k-focus,
.k-grid .k-table-td:focus,
.k-grid .k-table-td.k-focus,
.k-grid .k-master-row > td:focus,
.k-grid .k-master-row > td.k-focus,
.k-grid .k-grouping-row > td:focus,
.k-grid .k-grouping-row > td.k-focus,
.k-grid .k-detail-row > td:focus,
.k-grid .k-detail-row > td.k-focus,
.k-grid .k-group-footer > td:focus,
.k-grid .k-group-footer > td.k-focus,
.k-grid .k-master-row > .k-table-td:focus,
.k-grid .k-master-row > .k-table-td.k-focus,
.k-grid .k-grouping-row > .k-table-td:focus,
.k-grid .k-grouping-row > .k-table-td.k-focus,
.k-grid .k-detail-row > .k-table-td:focus,
.k-grid .k-detail-row > .k-table-td.k-focus,
.k-grid .k-group-footer > .k-table-td:focus,
.k-grid .k-group-footer > .k-table-td.k-focus,
.k-grid .k-grid-pager:focus,
.k-grid .k-grid-pager.k-focus {
    box-shadow: inset 0 0 0 3px rgba(87,168,169,.8) !important;
    background-color: rgba(87,168,169,.2) !important;
}

/* #endregion */
/* = Dialog & Window Controls UI Global Overwrites
--------------------------------------------------------- */
/* #region */

.k-dialog-wrapper, .k-dialog {
    z-index: 100000 !important;
}

.k-dialog-wrapper:has([role="alertdialog"]),
.k-dialog-wrapper [role="alertdialog"] {
    z-index: 150000 !important;
}

.k-animation-container,
.k-popup,
.k-list-container,
.k-calendar-container {
    z-index: 100001 !important;
}

.k-window.k-dialog.k-alert {
    max-width: 60vw;
}

.k-dialog .k-dialog-titlebar {
    background-color: var(--bs-primary) !important;
}

.k-dialog.secondary .k-dialog-titlebar,
.k-window-secondary .k-window-titlebar {
    background-color: var(--bs-secondary) !important;
}

.k-dialog.danger .k-dialog-titlebar {
    background-color: var(--bs-danger) !important;
    color: var(--bs-white) !important;
}

.k-window {
    box-shadow: 10px 10px 5px var(--bs-gray) !important;
}

.k-window-primary .k-window-titlebar {
    background-color: var(--bs-primary) !important;
}

.k-window-tertiary .k-window-titlebar {
    background-color: var(--ksp-primary-analogous-base) !important;
}

.k-window-tertiary.grid-entry-modal .k-actions {
    background-color: var(--ksp-primary-analogous-base-tint-800) !important;
}

.activity-shift-entry-modal .k-actions,
.activity-entry-modal .k-actions,
.grid-entry-modal .k-actions {
    background-color: var(--ksp-primary-500) !important;
}

.activity-shift-entry-modal .k-window-content {
    padding: 0 !important;
}

.activity-entry-modal .k-window-titlebar .k-window-titlebar-actions {
    display: none !important;
}

.activity-shift-entry-modal .k-actions,
.activity-entry-modal .k-actions {
    background-color: var(--ksp-primary-00) !important;
}

.grid-entry-modal .k-window-titlebar .k-window-titlebar-actions {
    display: none !important;
}

.grid-data .k-grid-content tbody tr,
.grid-data .k-grid-content tbody tr td {
    cursor: pointer;
}

/* #endregion */
/* = Form Controls UI Global Overwrites
--------------------------------------------------------- */
/* #region */
/* INPUTS */
.k-textbox.text-uppercase input {
    text-transform: uppercase;
}

.k-input.k-disabled, .k-combobox.k-disabled, .k-checkbox.k-disabled {
    background-color: var(--bs-gray-500);
}

.k-picker-solid {
    border-color: var(--bs-gray) !important;
    color: var(--bs-list-group-color) !important;
    background-color: var(--bs-list-group-bg) !important;
}

/* CHECKBOXES */
.k-checkbox {
    border-color: var(--bs-primary) !important;
}

.k-checkbox-md,
.k-checkbox-lg {
    width: 1.2rem !important;
    height: 1.2rem !important;
}

.k-checkbox:checked, .k-checkbox.k-checked {
    border-color: var(--ksp-primary-analogous-base);
    color: var(--bs-white);
    background-color: var(--ksp-primary-analogous-base);
}

/* SWITCHES */
.k-switch.k-switch-sm .k-switch-track {
    font-size: 0.75em; /*changed from 12px*/
}
.k-switch.k-switch-md .k-switch-track {
    width: 32px;
    height: 32px;
}

.k-switch-on .k-switch-track {
    border-color: var(--ksp-primary-analogous-base) !important;
    background-color: var(--ksp-primary-analogous-base) !important;
}

.k-switch.k-switch-md.k-switch-on .k-switch-thumb-wrap {
    left: calc(100% - 18px) !important;
}

.k-switch.k-switch-md .k-switch-thumb {
    width: 20px;
    height: 20px;
}

.k-switch-label-on,
.k-switch-label-off {
    display: inline;
}

.k-switch-label-on {
    left: 7px;
    text-transform: uppercase;
}

.k-switch-label-off {
    right: 15px;
    text-transform: uppercase;
}
.k-switch.k-switch-md.k-switch-off .k-switch-thumb-wrap {
    inset-inline-start: 15px;
}

/* Header theme toggle switch */
.header-theme-switch.k-switch-lg .k-switch-track {
    width: 70px;
    height: 40px;
    border-radius: 20px;
    border-color: var(--ksp-primary-tint-500) !important;
    background-color: var(--ksp-primary-shade-500) !important;
}

.header-theme-switch.k-switch-on .k-switch-track {
    border-color: var(--ksp-primary-analogous-base) !important;
    background-color: var(--ksp-primary-analogous-base) !important;
}

.header-theme-switch.k-switch-lg .k-switch-thumb {
    width: 28px;
    height: 28px;
}

.header-theme-switch.k-switch-lg.k-switch-on .k-switch-thumb-wrap {
    left: calc(100% - 16px) !important;
}

.header-theme-switch.k-switch-lg.k-switch-off .k-switch-thumb-wrap {
    inset-inline-start: 16px;
}

.header-theme-switch .k-switch-label-on,
.header-theme-switch .k-switch-label-off {
    font-size: 0;
}

/* Sun icon on the off-state (right side) */
.header-theme-switch .k-switch-label-off::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 1rem;
    content: "\f185";
    color: #000;
    transition: opacity 0.15s ease;
}

/* Moon icon on the on-state (left side) */
.header-theme-switch .k-switch-label-on::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 1rem;
    content: "\f186";
    color: #fff;
    transition: opacity 0.15s ease;
}

/* Hide the inactive icon based on switch state */
.header-theme-switch.k-switch-off .k-switch-label-on::before {
    opacity: 0;
}

.header-theme-switch.k-switch-on .k-switch-label-off::before {
    opacity: 0;
}


.k-radio {
    border-color: var(--bs-gray) !important;
}

    .k-radio[aria-invalid="true"] {
        border-color: var(--bs-danger) !important;
        border-width: 2px !important;
    }

    .k-radio:checked, .k-radio.k-checked {
        border-color: var(--ksp-primary-analogous-base);
        color: var(--bs-white);
        background-color: var(--ksp-primary-analogous-base);
    }

        .k-radio:checked[aria-invalid="true"], .k-radio.k-checked[aria-invalid="true"] {
            border-color: var(--bs-danger-border-subtle) !important;
            color: var(--bs-white);
            background-color: var(--bs-danger);
        }

.bg-primary .k-radio:checked, .bg-primary .k-radio.k-checked {
    border-color: var(--ksp-primary-900);
    color: var(--bs-white);
    background-color: var(--ksp-primary-900);
}

    .bg-primary .k-radio:checked[aria-invalid="true"], .bg-primary .k-radio.k-checked[aria-invalid="true"] {
        border-color: var(--bs-danger-border-subtle) !important;
        color: var(--bs-white);
        background-color: var(--bs-danger);
    }

.age-classification-radio-group .k-radio-label {
    text-transform: lowercase !important;
}

/* Combo Boxes & List Boxes */
li span.k-list-item-text {
    text-overflow: ellipsis !important;
    line-height: 1.2rem !important;
    line-clamp: 2 !important;
    -webkit-line-clamp: 2 !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
}

li.k-list-item {
    overflow: hidden !important;
}

li.k-list-item {
    overflow: hidden !important;
}

/* INVALID FORM FIELDS */
.k-input-solid.k-invalid, .k-input-solid.ng-invalid.ng-touched, .k-input-solid.ng-invalid.ng-dirty {
    border-color: var(--bs-danger);
    border-width: 2px;
}
/* FILESELECT INPUT CONTROL */
.attachments-upload-control .telerik-blazor.k-dropzone,
.attachments-upload-control .k-upload .k-dropzone,
.attachments-upload-control .k-upload .k-upload-dropzone {
    border: 2px dashed var(--bs-primary) !important;
}

.attachments-upload-control .k-upload-button-wrap .k-button-solid-base {
    border-color: var(--bs-secondary) !important;
    color: var(--bs-body-color) !important;
    background-color: var(--bs-secondary) !important;
}

.k-filemanager-details-toggle .k-switch-md{
    width: 75px;
}

/* DatePicker */
.no-weekend .k-calendar-monthview td.k-weekend span {
    display: none;
}

/* #endregion */
/* = Card Control UI Global Overwrites
--------------------------------------------------------- */
/* #region */
.k-card-primary .k-card-header {
    background-color: var(--bs-primary) !important;
    color: white;
}

.k-card.small .k-card-header {
    padding: 3px 6px;
}
/* #endregion */

/* #endregion */

/*=======================================================
  = LIGHT THEME COLORS | Telerik Component Overwrites
========================================================= */
/* #region */
.main-footer .action-commands .k-button-solid.k-button-primary:focus,
.main-footer .action-commands .k-button-solid.k-button-primary.k-focus,
.main-footer .wizard-navigation .k-button-solid.k-button-primary:focus,
.main-footer .wizard-navigation .k-button-solid.k-button-primary.k-focus {
    /*box-shadow: 0 0 0px 0.25rem rgba(13, 110, 253, .75) !important;
      box-shadow: 0 0 0px 0.25rem rgba(193, 203, 251, .8) !important;
    */
    box-shadow: 0 0 0px 0.25rem rgba(255, 255, 255, .8) !important;
}

.main-footer .action-commands .k-button-solid-success:focus,
.main-footer .action-commands .k-button-solid-success.k-focus,
.main-footer .wizard-navigation .k-button-solid-success:focus,
.main-footer .wizard-navigation .k-button-solid-success.k-focus {
    /*box-shadow: 0 0 0px 0.25rem rgba(25, 135, 84, .75) !important;
     box-shadow: 0 0 0px 0.25rem rgba(44, 206, 131, .8) !important;
    */
    box-shadow: 0 0 0px 0.25rem rgba(143, 245, 192, .8) !important;
}

.main-footer .action-commands .k-button-solid.k-button-error:focus,
.main-footer .action-commands .k-button-solid.k-button-error.k-focus,
.main-footer .wizard-navigation .k-button-solid.k-button-error:focus,
.main-footer .wizard-navigation .k-button-solid.k-button-error.k-focus {
    /*box-shadow: 0 0 0px 0.25rem rgba(220, 53, 69, .75) !important;
      box-shadow: 0 0 0px 0.25rem rgba(252, 133, 133, .8) !important;
    */
    box-shadow: 0 0 0px 0.25rem rgba(255, 158, 167, .8) !important;
}

/* #endregion */
/*=======================================================
  = DARK THEME COLORS | Telerik Component Overwrites
========================================================= */
/* #region */
/* #endregion */