/* N5 Kendo UI Color Overrides - Forces N5 brand colors */
/* This file ensures N5 blue (#3e515b) is used instead of Kendo's default red (#ff6358) */

/* Override CSS custom properties */
:root {
    --kendo-color-primary: #3e515b !important;
    --kendo-color-primary-hover: #2d3e47 !important;
    --kendo-color-primary-active: #1e2a31 !important;
    --kendo-color-primary-subtle: #e8ebed !important;
    --kendo-color-primary-subtle-hover: #d8dde0 !important;
    --kendo-color-primary-subtle-active: #c8cfd4 !important;
    --kendo-color-primary-emphasis: #7a8a94 !important;
    --kendo-color-primary-on-surface: #2d3e47 !important;
    --kendo-font-size: 13px !important;
    --kendo-body-text: #7a878e !important;
    
    /* PRO-2235: Fix checkbox and radio button sizes */
    --kendo-checkbox-size: 18px !important;
    --kendo-radio-size: 18px !important;

    --magic-active: #5a6d77;
    --magic-active-rgba: 90,109,119;
    --magic-border: rgba(0,0,0,0.15);
    --magic-size: 17px;
    --magic-inner: 9px;
}

/* Force primary color on specific components that might use hard-coded values */

/* Grid Pagination - Use neutral gray colors (NOT primary blue) */
.k-pager .k-selected,
.k-pager .k-state-selected,
.k-pager-numbers .k-selected,
.k-pager-numbers .k-state-selected,
.k-pager-numbers-wrap .k-selected,
.k-pager-numbers-wrap .k-state-selected {
    background-color: #e0e0e0 !important;
    border-color: #e0e0e0 !important;
    color: #3d3d3d !important;
}

.k-pager .k-selected:hover,
.k-pager .k-state-selected:hover,
.k-pager-numbers .k-selected:hover,
.k-pager-numbers .k-state-selected:hover,
.k-pager-numbers-wrap .k-selected:hover,
.k-pager-numbers-wrap .k-state-selected:hover {
    background-color: #d6d6d6 !important;
    border-color: #d6d6d6 !important;
    color: #3d3d3d !important;
}

/* Pagination buttons (non-selected) */
.k-pager-numbers .k-button,
.k-pager-numbers-wrap .k-button {
    background-color: transparent !important;
    border-color: transparent !important;
    color: #3d3d3d !important;
}

.k-pager-numbers .k-button:hover,
.k-pager-numbers-wrap .k-button:hover {
    background-color: #f5f5f5 !important;
    border-color: #f5f5f5 !important;
}

/* Grid Selection */
.k-grid tr.k-state-selected,
.k-grid tr.k-selected,
.k-grid td.k-state-selected,
.k-grid td.k-selected {
    background-color: rgba(62, 81, 91, 0.1) !important;
}

.k-grid tr.k-state-selected:hover,
.k-grid tr.k-selected:hover,
.k-grid tr:hover.k-state-selected,
.k-grid tr:hover.k-selected {
    background-color: rgba(62, 81, 91, 0.15) !important;
}

/* Edit Button - Use neutral gray (NOT primary color) */
/* Support both old (k-grid-edit) and new (k-grid-edit-command) Kendo versions */
.k-grid-edit,
.k-grid-edit-command,
.k-grid .k-grid-edit,
.k-grid .k-grid-edit-command {
    background-color: #f5f5f5 !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    color: #3d3d3d !important;
}

.k-grid-edit:hover,
.k-grid-edit-command:hover,
.k-grid .k-grid-edit:hover,
.k-grid .k-grid-edit-command:hover {
    background-color: #ebebeb !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    color: #3d3d3d !important;
}

.k-grid-edit:active,
.k-grid-edit-command:active,
.k-grid .k-grid-edit:active,
.k-grid .k-grid-edit-command:active {
    background-color: #e0e0e0 !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}

/* Delete Button - Use neutral gray */
.k-grid-delete,
.k-grid-delete-command,
.k-grid .k-grid-delete,
.k-grid .k-grid-delete-command {
    background-color: #f5f5f5 !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    color: #3d3d3d !important;
}

.k-grid-delete:hover,
.k-grid-delete-command:hover,
.k-grid .k-grid-delete:hover,
.k-grid .k-grid-delete-command:hover {
    background-color: #ebebeb !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    color: #3d3d3d !important;
}

/* Cancel Button - Use neutral gray */
.k-grid-cancel,
.k-grid-cancel-command,
.k-grid .k-grid-cancel,
.k-grid .k-grid-cancel-command {
    background-color: #f5f5f5 !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    color: #3d3d3d !important;
}

.k-grid-cancel:hover,
.k-grid-cancel-command:hover,
.k-grid .k-grid-cancel:hover,
.k-grid .k-grid-cancel-command:hover {
    background-color: #ebebeb !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    color: #3d3d3d !important;
}

/* Primary Buttons (Save, Update, etc.) - Keep N5 blue */
/* Support both old and new Kendo versions */
.k-button-solid-primary,
.k-button.k-primary,
.k-button-primary,
.k-grid-update,
.k-grid-update-command,
.k-grid-save,
.k-grid-save-command,
.k-grid .k-grid-update,
.k-grid .k-grid-update-command,
.k-grid .k-grid-save,
.k-grid .k-grid-save-command {
    background-color: #3e515b !important;
    border-color: #3e515b !important;
    color: #ffffff !important;
}

.k-button-solid-primary:hover,
.k-button.k-primary:hover,
.k-button-primary:hover,
.k-grid-update:hover,
.k-grid-update-command:hover,
.k-grid-save:hover,
.k-grid-save-command:hover,
.k-grid .k-grid-update:hover,
.k-grid .k-grid-update-command:hover,
.k-grid .k-grid-save:hover,
.k-grid .k-grid-save-command:hover {
    background-color: #2d3e47 !important;
    border-color: #2d3e47 !important;
}

.k-button-solid-primary:active,
.k-button.k-primary:active,
.k-button-primary:active,
.k-grid-update:active,
.k-grid-update-command:active,
.k-grid-save:active,
.k-grid-save-command:active,
.k-grid .k-grid-update:active,
.k-grid .k-grid-update-command:active,
.k-grid .k-grid-save:active,
.k-grid .k-grid-save-command:active {
    background-color: #1e2a31 !important;
    border-color: #1e2a31 !important;
}

/* List Items */
.k-list-item.k-selected,
.k-list .k-selected,
.k-list-optionlabel.k-selected {
    background-color: #3e515b !important;
    color: #ffffff !important;
}

.k-list-item.k-selected:hover,
.k-list .k-selected:hover,
.k-list-optionlabel.k-selected:hover {
    background-color: #2d3e47 !important;
}

/* Dropdown Selection */
.k-dropdown .k-selected,
.k-dropdowntree .k-selected {
    background-color: #3e515b !important;
    color: #ffffff !important;
}

/* Input Focus */
.k-textbox:focus,
.k-input:focus,
.k-textarea:focus,
.k-picker:focus {
    border-color: #3e515b !important;
    box-shadow: 0 0 0 0.25rem rgba(62, 81, 91, 0.25) !important;
}

/* Checkbox and Radio (when checked) */
.k-checkbox:checked,
.k-radio:checked {
    background-color: #3e515b !important;
    border-color: #3e515b !important;
}

/* Switch */
.k-switch-on .k-switch-thumb-wrap,
.k-switch-on .k-switch-track {
    background-color: #3e515b !important;
}

/* TabStrip */
.k-tabstrip-items .k-item.k-state-active,
.k-tabstrip-items .k-item.k-selected {
    border-bottom-color: #3e515b !important;
}

/* Progress Bar */
.k-progressbar-value {
    background-color: #3e515b !important;
}

/* Slider */
.k-slider-selection {
    background-color: #3e515b !important;
}

.k-draghandle {
    background-color: #3e515b !important;
    border-color: #3e515b !important;
}

/* Links and Anchors with primary color */
.k-link.k-state-selected,
a.k-link.k-state-selected {
    color: #3e515b !important;
}

/* TreeView and Panel body text color */
.k-treeview,
.panel,
.panel-body {
    color: #7a878e !important;
}

.k-window-title,
.k-dialog-title,
.k-window-titlebar .k-window-title,
.k-dialog-titlebar .k-dialog-title {
    font-size: 16px !important;
    line-height: 1.25 !important;
    color: #7a878e !important;
}

.k-window-titlebar {
    padding: 12px 10px;
}

.k-window-content,
.k-dialog-content,
.k-grid,
.k-grid .k-table-td,
.k-grid .k-table-th  {
    font-size: 13px !important;
    color: #7a878e !important;
    font-weight: 400 !important;
}

/* TreeView Selection */
.k-treeview .k-state-selected,
.k-treeview .k-selected {
    background-color: rgba(62, 81, 91, 0.1) !important;
    color: #3e515b !important;
}

.k-treeview-item{
    &>div{
        width: 100%;
        max-width: 100%;

        & > span.k-treeview-leaf{
            width: 100%;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        & > span.k-treeview-toggle{
            margin-right: 3px;
        }
    }

    & .n5-template-treeview-action-wrapper{
        min-width: fit-content;
    }
}

/* Menu Selection */
.k-menu .k-state-active,
.k-menu .k-selected {
    background-color: #3e515b !important;
    color: #ffffff !important;
}

/* Upload */
.k-upload-selected {
    background-color: rgba(62, 81, 91, 0.1) !important;
}


  .k-checkbox {
    width: 16px;
    height: 16px;
  }


  .k-radio-wrap {
    display: inline-block;
    vertical-align: middle;
    position: relative;
  }
  
  .k-radio-wrap input.magic-radio {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    border: 0;
    overflow: hidden;
    white-space: nowrap;
  }
  
  /* Label is the visible control — reserve space for the pseudo control */
  .k-radio-label {
    display: inline-block;
    position: relative;
    padding-left: calc(var(--magic-size) + 5px);
    cursor: pointer;
    user-select: none;
    line-height: 1;
    color: inherit;
  }
  
  .k-radio-label::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    box-sizing: border-box;
    width: var(--magic-size);
    height: var(--magic-size);
    border-radius: 50%;
    border: 2px solid var(--magic-border);
    background: #fff;
    pointer-events: none;
  }
  
  .k-radio-label::after {
    content: "";
    position: absolute;
    left: calc((var(--magic-size) - var(--magic-inner)) / 2);
    top: 50%;
    transform: translateY(-50%);
    width: var(--magic-inner);
    height: var(--magic-inner);
    border-radius: 50%; /* radio inner dot default */
    background: transparent;
    pointer-events: none;
    opacity: 0;
  }
  
  
  
  /* Radio: checked */
  .k-radio-wrap:has(input.magic-radio:checked) + .k-radio-label::before {
    border-color: var(--magic-active);
  }
  .k-radio-wrap:has(input.magic-radio:checked) + .k-radio-label::after {
    background: var(--magic-active);
    opacity: 1;
  }
  


/* ============================================================================ */
/* PRO-2235: Hide "Start and End" labels in Date Range Pickers */
/* ============================================================================ */
/* Issue: User-defined date entry shows unwanted "Start:" and "End:" labels */
/* Solution: Hide the label elements in both CustomDateRangePicker and DateRangePicker */

/* Hide CustomDateRangePicker labels (old widget) */
.k-form-field[data-role="CustomDateRangePicker"] span[id$="_spanFrom"],
.k-form-field[data-role="CustomDateRangePicker"] span[id$="_spanTo"] {
    display: none !important;
}

div[data-role="CustomDateRangePicker"] > span:not(.k-widget):not(.k-icon) {
    display: none !important;
}

/* CRITICAL FIX: Hide Kendo DateRangePicker floating labels (new widget) */
.k-daterangepicker .k-floating-label-container .k-floating-label,
.k-daterangepicker .k-floating-label,
input[data-input="start"] ~ .k-floating-label,
input[data-input="end"] ~ .k-floating-label,
span.k-floating-label-container > label.k-floating-label {
    display: none !important;
    visibility: hidden !important;
}

/* Also hide floating labels in any dateinput within daterangepicker context */
.k-daterangepicker .k-dateinput .k-floating-label {
    display: none !important;
}

/* ============================================================================ */
/* Kendo Notification: readable body-sized text (default theme uses font-size-sm) */
/* ============================================================================ */

.k-notification {
    font-size: var(--kendo-font-size, 13px) !important;
    line-height: 1.4;
    padding: 10px;
}