/**
 * AAI Modern Kendo UI Brand Theme (.NET 10 / Kendo UI 2026+)
 * Accommodates AAI brand styling (#363940 charcoal & #3c4ba8 primary)
 * using modern Kendo 2026 CSS architecture and CSS variables.
 */

:root {
    --kendo-color-primary: #3c4ba8;
    --kendo-color-primary-hover: #2e3a84;
    --kendo-color-primary-active: #242e6a;
    --kendo-color-primary-on-surface: #3c4ba8;
    --kendo-color-on-primary: #ffffff;
    --kendo-font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    --kendo-font-size: 13px;
}

/* --- Support legacy .k-icon elements without .k-font-icon class --- */
.k-icon:not(.k-svg-icon) {
    font-family: "WebComponentsIcons" !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    display: inline-block;
}

/* --- 1. Grid Structure & Borders --- */
.k-grid {
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 0;
    font-family: var(--kendo-font-family);
    background-color: #ffffff;
    color: #4c5356;
}

.k-grid .k-table {
    border-collapse: separate;
}

/* --- 2. Grid Header (#363940 Dark Charcoal Brand Color) --- */
.k-grid .k-grid-header,
.k-grid .k-grid-header-wrap,
.k-grid .k-grid-header-table,
.k-grid .k-table-thead,
.k-grid th.k-header,
.k-grid .k-table-th {
    background-color: #363940;
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.15);
}

.k-grid th.k-header,
.k-grid .k-table-th {
    font-weight: 500;
    text-align: center;
    padding: 8px 10px;
    font-size: 13px;
    line-height: 1.4;
    vertical-align: middle;
    border-width: 0 0 1px 1px;
    border-style: solid;
    border-color: rgba(255, 255, 255, 0.15);
}

.k-grid th.k-header:first-child,
.k-grid .k-table-th:first-child {
    border-inline-start-width: 0;
}

.k-grid-header .k-link,
.k-grid-header .k-cell-inner > .k-link,
.k-grid-header th a {
    color: #ffffff;
    font-weight: 500;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.k-grid-header .k-sort-icon,
.k-grid-header .k-i-sort-asc-sm,
.k-grid-header .k-i-sort-desc-sm,
.k-grid-header .k-svg-icon {
    color: #ffffff;
    fill: #ffffff;
}

/* --- 3. Filter Row (#363940 Background with Clean Controls) --- */
.k-filter-row,
.k-filter-row td,
.k-filter-row th,
.k-grid .k-filter-row .k-table-th,
.k-grid .k-filter-row .k-table-td {
    background-color: #363940;
    border-color: rgba(255, 255, 255, 0.12);
    padding: 4px 6px;
    vertical-align: middle;
}

.k-filtercell {
    display: flex;
    align-items: center;
    width: 100%;
}

.k-filtercell .k-filtercell-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    gap: 2px;
}

.k-filtercell .k-filtercell-wrapper > .k-autocomplete,
.k-filtercell .k-filtercell-wrapper > .k-input,
.k-filtercell .k-filtercell-wrapper > .k-textbox {
    flex: 1 1 auto;
    width: 100%;
    min-width: 50px;
    background-color: #ffffff;
    border: 1px solid #ccc;
    border-radius: 2px;
    height: 28px;
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    padding: 0 4px;
    box-shadow: none;
}

.k-filtercell .k-filtercell-wrapper input.k-input-inner {
    width: 100%;
    border: none;
    background: transparent;
    padding: 0 4px;
    height: 100%;
    font-size: 12px;
    color: #4c5356;
    outline: none;
    box-shadow: none;
}

/* Operator Dropdown Button - shows clean funnel icon */
.k-filtercell .k-filtercell-operator {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    margin-left: 2px;
}

.k-filtercell span.k-dropdown-operator {
    width: 28px;
    min-width: 28px;
    max-width: 28px;
    height: 28px;
    min-height: 28px;
    border: 1px solid #ccc;
    border-radius: 2px;
    background-color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    overflow: hidden;
}

.k-filtercell input.k-dropdown-operator,
.k-filtercell .k-dropdown-operator .k-input-inner,
.k-filtercell .k-dropdown-operator .k-input-value-text {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    visibility: hidden !important;
}

.k-filtercell .k-dropdown-operator .k-input-button {
    border: 0;
    background: transparent;
    color: #4c5356;
    width: 100%;
    height: 100%;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.k-filtercell .k-dropdown-operator .k-input-button .k-svg-icon,
.k-filtercell .k-dropdown-operator .k-input-button .k-icon {
    width: 14px;
    height: 14px;
    fill: #4c5356;
    color: #4c5356;
}

.k-filtercell .k-dropdown-operator:hover {
    background-color: #e6e6e6;
}

/* Clear filter button */
.k-filtercell .k-button[title="Clear"] {
    background-color: #ffffff;
    color: #4c5356;
    border: 1px solid #ccc;
    border-radius: 2px;
    height: 28px;
    width: 28px;
    padding: 0;
    margin-left: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.k-filtercell .k-button[title="Clear"] .k-svg-icon {
    width: 14px;
    height: 14px;
    fill: #4c5356;
}

/* Boolean Radio Filter ("is true / is false") */
.k-filtercell label {
    color: #ffffff;
    font-size: 12px;
    font-weight: normal;
    margin-right: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
}

.k-filtercell input[type="radio"] {
    margin-right: 3px;
    vertical-align: middle;
}

/* --- 4. Grid Pager (#363940 Bottom Bar with #3c4ba8 Selected State) --- */
.k-pager,
.k-grid-pager {
    background-color: #363940;
    color: #ffffff;
    border-top: 1px solid rgba(0, 0, 0, 0.12);
    border-bottom: 0;
    border-left: 0;
    border-right: 0;
    padding: 4px 10px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    min-height: 40px;
    font-size: 12px;
    line-height: 1.5;
}

.k-pager .k-pager-numbers-wrap {
    display: inline-flex;
    align-items: center;
}

.k-pager .k-pager-nav,
.k-pager .k-button,
.k-pager .k-pager-first,
.k-pager .k-pager-last,
.k-pager .k-pager-numbers .k-button {
    color: #ffffff;
    background: transparent;
    border: 0;
    border-radius: 2px;
    min-width: 28px;
    height: 28px;
    padding: 0 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: none;
}

.k-pager .k-pager-nav .k-svg-icon,
.k-pager .k-button .k-svg-icon,
.k-pager .k-pager-numbers .k-button .k-svg-icon,
.k-pager .k-icon {
    fill: #ffffff;
    color: #ffffff;
    width: 14px;
    height: 14px;
}

.k-pager .k-pager-nav:hover:not(.k-disabled),
.k-pager .k-button:hover:not(.k-disabled):not(.k-selected),
.k-pager .k-pager-numbers .k-button:hover:not(.k-disabled):not(.k-selected) {
    background-color: #3c4ba8;
    color: #ffffff;
}

.k-pager .k-pager-numbers .k-selected,
.k-pager .k-pager-numbers .k-button.k-selected {
    background-color: #3c4ba8;
    color: #ffffff;
    font-weight: bold;
}

.k-pager .k-pager-nav.k-disabled,
.k-pager .k-button.k-disabled {
    opacity: 0.35;
    cursor: default;
}

.k-pager .k-pager-info {
    color: #ffffff;
    margin-left: auto;
    padding: 0 8px;
    font-size: 12px;
}

.k-pager .k-pager-input {
    display: inline-flex;
    align-items: center;
    color: #ffffff;
    margin: 0 6px;
    font-size: 12px;
    gap: 4px;
}

.k-pager .k-pager-input input,
.k-pager .k-numerictextbox .k-input-inner {
    background-color: #ffffff;
    color: #4c5356;
    border: 1px solid #ccc;
    border-radius: 2px;
    height: 26px;
    width: 44px;
    text-align: center;
    padding: 2px 4px;
    box-shadow: none;
}

.k-pager .k-pager-sizes {
    display: inline-flex;
    align-items: center;
    color: #ffffff;
    margin: 0 8px;
    font-size: 12px;
    gap: 6px;
}

.k-pager .k-pager-sizes .k-dropdownlist,
.k-pager .k-pager-sizes .k-picker {
    background-color: #ffffff;
    color: #4c5356;
    border: 1px solid #ccc;
    border-radius: 2px;
    height: 26px;
    padding: 0 4px;
    min-width: 60px;
}

.k-pager .k-pager-sizes .k-input-inner {
    color: #4c5356;
    font-size: 12px;
    padding: 2px 4px;
}

.k-pager .k-pager-refresh {
    color: #ffffff;
    background: transparent;
    border: 0;
}

/* --- 5. Data Rows & Cells --- */
.k-grid td,
.k-grid .k-table-td {
    padding: 8px 10px;
    border-width: 0 0 1px 1px;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0.08);
    font-size: 13px;
    color: #4c5356;
    line-height: 1.4;
    vertical-align: middle;
}

.k-grid td:first-child,
.k-grid .k-table-td:first-child {
    border-inline-start-width: 0;
}

.k-grid tr.k-alt,
.k-grid .k-table-alt-row {
    background-color: #fcfcfc;
}

.k-grid tr:hover,
.k-grid .k-table-row:hover {
    background-color: #f5f5f5;
}

.k-grid tr.k-selected,
.k-grid .k-table-row.k-selected {
    background-color: #e8ecf8;
    color: #333333;
}

.k-grid td a {
    color: #337ab7;
    text-decoration: underline;
}

.k-grid td a:hover {
    color: #23527c;
}

/* --- 6. Export & Action Buttons --- */
.k-primary,
.k-button.k-primary,
.k-button.k-button-solid-primary,
a.k-primary {
    color: #ffffff;
    background-color: #3c4ba8;
    border-color: #3c4ba8;
    border-radius: 3px;
    font-weight: 500;
}

.k-primary:hover,
.k-button.k-primary:hover,
.k-button.k-button-solid-primary:hover,
a.k-primary:hover {
    background-color: #2e3a84;
    border-color: #2e3a84;
    color: #ffffff;
}

.k-grid-excel,
.k-grid-pdf,
button.k-grid-excel,
button.k-grid-pdf,
.k-button.k-button-icontext:has(.k-i-excel),
.k-button.k-button-icontext:has(.k-i-pdf),
.k-button:has(.k-i-excel),
.k-button:has(.k-i-pdf) {
    color: #ffffff;
    background-color: #363940;
    background-image: linear-gradient(#363940, #31343a);
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 3px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.k-grid-excel:hover,
.k-grid-pdf:hover,
button.k-grid-excel:hover,
button.k-grid-pdf:hover,
.k-button.k-button-icontext:has(.k-i-excel):hover,
.k-button.k-button-icontext:has(.k-i-pdf):hover,
.k-button:has(.k-i-excel):hover,
.k-button:has(.k-i-pdf):hover {
    background-color: #3c4ba8;
    background-image: none;
    border-color: #3c4ba8;
    color: #ffffff;
}

.k-grid-excel .k-icon,
.k-grid-pdf .k-icon {
    color: #ffffff;
}

/* --- 7. Modals, Pickers & Inputs --- */
.k-window-titlebar {
    background-color: #363940;
    color: #ffffff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    padding: 8px 12px;
}

.k-window-title {
    color: #ffffff;
    font-weight: 500;
    font-size: 14px;
}

.k-window-titlebar .k-window-actions .k-button,
.k-window-titlebar .k-window-action {
    color: #ffffff;
    background: transparent;
    border: 0;
}

.k-dropdownlist,
.k-picker,
.k-combobox,
.k-datepicker,
.k-timepicker,
.k-datetimepicker,
.k-numerictextbox,
.k-textbox,
.k-input.k-textbox {
    height: 34px;
    min-height: 34px;
    border-radius: 3px;
    border: 1px solid #ccc;
    background-color: #ffffff;
    font-size: 13px;
    line-height: 1.42857143;
    box-sizing: border-box;
}

.k-dropdownlist .k-input-inner,
.k-picker .k-input-inner,
.k-combobox .k-input-inner,
.k-datepicker .k-input-inner,
.k-timepicker .k-input-inner,
.k-numerictextbox .k-input-inner,
.k-textbox .k-input-inner {
    padding: 6px 12px;
    font-size: 13px;
    color: #555555;
    line-height: 1.42857143;
}

.k-dropdownlist:focus-within,
.k-picker:focus-within,
.k-combobox:focus-within,
.k-datepicker:focus-within,
.k-timepicker:focus-within,
.k-numerictextbox:focus-within,
.k-textbox:focus-within {
    border-color: #3c4ba8;
    box-shadow: 0 0 0 1px #3c4ba8;
}

.k-calendar .k-calendar-header,
.k-calendar .k-header {
    background-color: #363940;
    color: #ffffff;
}

.k-calendar .k-calendar-header .k-button {
    color: #ffffff;
}

.k-calendar td.k-selected,
.k-calendar .k-calendar-td.k-selected {
    background-color: #3c4ba8;
    color: #ffffff;
}