/*
    This css file contains all of the DLG SPGE custom kendo style overrides.  
    If you are using a css selector that contains a class that begins with "k-", it should be included in this file.

    When overriding colors, try to use variable names from the Kendo Theme instead of hardcoding color names or Hex values.
    
    For example: 

        background-color: var(--kendo-color-primary); instead of hardcoding color names, or Hex values.

    For a complete list of the available variables and there current values, run the application, 
    login and use Chrome Developer Tools to view the Styles tab within the Elements panel.

*/

:root {
    --kendo-font-family: "Segoe UI", Roboto, Helvetica Neue, sans-serif;
    --kendo-font-family-sans-serif: "Segoe UI", Roboto, Helvetica Neue, sans-serif;
}

.k-link:not(:has(.k-column-title)) {
    color: var(--kendo-color-info); /* Make sure that k-link, except for grid column headings, are blue. */
}

.k-card-title .k-link {
    color: inherit; /*var(--kendo-color-info);*/ /* Make sure that k-link, except for grid column headings, are blue.  .k-link:not(.k-card-title .k-link) { */
}

.k-grid a {
    color: initial; /* The Kendo default is inherit, which causes <a> tags without the k-link class in colorized rows on the SPGE Dashboard be red or orange depeding on how the row is styled. initial fixes this.  */
}

p .k-button {
    margin: 0 15px 0 0;
}

.k-state-active .label {
    font-size: 1em;
}

#responsive-panel .k-menu {
    padding: .5rem;
}

.k-form {
    padding: 20px;
    line-height: 1.25;
    display: block !important;
}

.k-stepper .k-step-label .k-step-text {
    white-space: pre-wrap;
}

/* The kendo.confirm dialog doesn't have a title property.  By default it diplays the host.  The style below hides the default title */
.k-confirm .k-window-titlebar .k-dialog-title {
    visibility: collapse;
}

/* Provide our own title for ALL kendo.confirm dialogs */
.k-confirm .k-window-titlebar::before {
    content: 'Please Confirm';
}

/* The kendo.alert dialog doesn't have a title property.  By default it diplays the host.  The style below hides the default title */
.k-alert .k-window-titlebar .k-dialog-title {
    visibility: collapse;
}

/* Provide our own title for ALL kendo.alert dialogs */
.k-alert .k-window-titlebar::before {
    content: 'Alert';
}

.k-input-inner:not([readonly]) {
    background-color: var(--kendo-color-surface-alt);
}

.k-input-inner[readonly] {
    background-color: var(--kendo-color-surface-alt);
    filter: brightness(0.85);
    cursor: not-allowed;
    pointer-events: auto;
}

/* These elements should be full width*/
.k-textbox, .k-numerictextbox, .k-textarea, .k-multiselect, .k-dropdown, k-combobox, .k-datepicker, .k-autocomplete, .k-maskedtextbox {
    width: 100%;
}

.k-form-field-wrap {
    padding-bottom: 1rem;
}
    
/* 
    The Kendo k-card has a relative postion.
    The SPGE header uses the Bootstrap sticky-top class, which was being overridden.
    We fix that by making sure any k-card that also has the sticky-top uses sticky postion.
*/
.k-card.sticky-top {
    position: sticky;
}

.k-card:not(.k-card-error) > .k-card-header > .k-card-title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 0px;
    text-transform: uppercase;
}

.k-card-header,
.k-window-titlebar {
    background-color: var(--kendo-color-primary); /* Use the Primary color as the background color so the cards stand out more*/
    color: var(--kendo-color-on-primary); /* Ensures text is readable */
    border-color: var(--kendo-color-base);
}

.k-card-subtitle {
    color: var(--kendo-color-on-primary);
    filter: brightness(90%); /* Reduce the brightness so it doesn't stand out as much as the header*/
}

.k-form.k-card.k-card-info, .k-form.k-card.k-state-info {
    background-color: var(--kendo-color-primary-subtle);
}

/* Hide the red triangle that appears in the top left corner of cells that have changed values */
.k-grid .k-dirty {
    display: none;
}

.k-badge {
    text-transform: uppercase;
}

.k-badge .k-icon {
    font-size: 12px;
}
    
/* For badges inside anchors, or badges that also have the cursorPointer class, make their background color ligher when hovered over, just like a button */
a.k-badge:hover, .cursorPointer.k-badge:hover {
    filter: brightness(115%);
}

div.k-grid tr.closed-task-even-row:not(:hover) {
    background-color: #f5f5f5;
}

/* For kendo grids column header looks like previous version of CSS */
.k-grid .k-table-th,
.k-grid .k-table-td {
    border-right: 1px solid var(--kendo-color-border);
    border-bottom: none;
}

/* remove extra right border on last column */
.k-grid .k-table-th:last-child,
.k-grid .k-table-td:last-child {
    border-right: none;
}

/* The default headers are bold, which is a little distracting.  This changes them to normal weight. */
.k-grid-header th {
    font-weight: 400 !important;
}

/* For left align search control and reset button on grids */
.k-grid .k-toolbar .k-spacer {
    flex-grow: 0 !important;
}

/* The Material Theme renders command buttons within a grid as flat buttons, without a border. This override makes them look just like all of the other buttons */
.k-grid .k-command-cell .k-button {
    box-shadow: var(--kendo-elevation-2) !important;
}