/* ==========================================================================
   Modern Notion-Inspired Theme for Telerik Blazor
   Clean, minimal, professional - neutral colors with subtle accents
   ========================================================================== */

/* --------------------------------------------------------------------------
   CSS Variables - Easy to customize
   -------------------------------------------------------------------------- */
:root {
    /* Base colors */
    --modern-bg: #ffffff;
    --modern-bg-secondary: #f7f7f7;
    --modern-bg-hover: #f1f1f1;
    --modern-bg-active: #e8e8e8;

    /* Text colors */
    --modern-text: #37352f;
    --modern-text-secondary: #6b6b6b;
    --modern-text-tertiary: #9b9b9b;
    --modern-text-placeholder: #b4b4b4;

    /* Border colors */
    --modern-border: #c0c0c0;
    --modern-border-hover: #acacac;
    --modern-border-focus: #909090;

    /* Accent colors - very subtle */
    --modern-accent: #2383e2;
    --modern-accent-light: #e8f4fd;
    --modern-accent-hover: #1a6fc4;

    /* Status colors - muted */
    --modern-success: #0f7b6c;
    --modern-success-light: #e6f4f1;
    --modern-warning: #c77d1a;
    --modern-warning-light: #fdf6e3;
    --modern-error: #e03e3e;
    --modern-error-light: #fce8e8;

    /* Shadows - soft and subtle */
    --modern-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
    --modern-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    --modern-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.04);
    --modern-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.05), 0 4px 6px rgba(0, 0, 0, 0.03);
    --modern-shadow-popup: 0 4px 24px rgba(0, 0, 0, 0.12);

    /* Typography */
    --modern-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', sans-serif;
    --modern-font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;

    /* Spacing */
    --modern-radius-sm: 4px;
    --modern-radius-md: 6px;
    --modern-radius-lg: 8px;

    /* Transitions */
    --modern-transition: 150ms ease;

    /* Override Telerik Kendo primary color to dark/black for checkboxes */
    --kendo-color-primary: #37352f;
    --kendo-color-primary-hover: #1a1a1a;
    --kendo-checkbox-checked-bg: #37352f;
    --kendo-checkbox-checked-border: #37352f;
    --kendo-checkbox-hover-checked-bg: #1a1a1a;
    --kendo-checkbox-hover-checked-border: #1a1a1a;

    /* Override grid selected row background to consistent gray (no alternating) */
    --kendo-grid-selected-bg: #d4d4d4;
    --kendo-grid-selected-hover-bg: #c8c8c8;
    --kendo-grid-sticky-selected-bg: #d4d4d4;
    --kendo-grid-sticky-selected-hover-bg: #c8c8c8;
    --kendo-grid-sticky-selected-alt-bg: #d4d4d4;
    --kendo-grid-selected-alt-bg: #d4d4d4;
    --kendo-table-selected-bg: #d4d4d4;
    --kendo-table-selected-alt-bg: #d4d4d4;
    --kendo-selected-bg: #d4d4d4;

    /* Menu/popup text colors - ensure visibility in all browsers */
    --kendo-color-on-app-surface: #37352f;
    --kendo-color-app-surface: #ffffff;
    --kendo-color-base-hover: #f1f1f1;
    --kendo-color-base-active: #e8e8e8;
    --kendo-menu-popup-item-text: #37352f;
    --kendo-menu-popup-item-bg: #ffffff;
    --kendo-menu-popup-item-hover-text: #37352f;
    --kendo-menu-popup-item-hover-bg: #f1f1f1;
}

/* --------------------------------------------------------------------------
   Base Styles
   -------------------------------------------------------------------------- */
html, body {
    font-family: var(--modern-font);
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--modern-text);
    background-color: var(--modern-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    height: 100vh;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

/* --------------------------------------------------------------------------
   Telerik Grid - Modern Styling
   -------------------------------------------------------------------------- */

/* Grid container */
.k-grid {
    border: 1px solid var(--modern-border) !important;
    border-radius: var(--modern-radius-lg) !important;
    overflow: hidden;
    box-shadow: var(--modern-shadow-sm) !important;
    background: var(--modern-bg) !important;
}

/* Grid header */
.k-grid-header {
    background: var(--modern-bg-secondary) !important;
    border-bottom: 1px solid var(--modern-border) !important;
}

.k-grid-header th,
.k-grid .k-grid-header .k-header {
    background: var(--modern-bg-secondary) !important;
    border: none !important;
    border-right: 1px solid var(--modern-border) !important;
    font-weight: 500 !important;
    color: var(--modern-text-secondary) !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    padding: 6px 12px !important;
}

.k-grid-header th:last-child {
    border-right: none !important;
}

/* Centered header text for checkbox columns */
.header-center {
    text-align: center !important;
}

.header-center .k-cell-inner,
.header-center .k-link {
    justify-content: center !important;
}

/* Grid rows */
.k-grid tbody tr {
    border-bottom: 1px solid #e0e0e0 !important;
    transition: background-color var(--modern-transition) !important;
    height: 28px !important;
    max-height: 28px !important;
}

.k-grid tbody tr td {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}

.k-grid tbody tr:hover,
.k-grid tbody tr.k-hover {
    background-color: var(--modern-bg-hover) !important;
}

/* Ensure hover applies to all cells in the row */
.k-grid tbody tr:hover td,
.k-grid tbody tr.k-hover td,
.k-grid tbody tr:hover .k-table-td,
.k-grid tbody tr.k-hover .k-table-td {
    background-color: var(--modern-bg-hover) !important;
}

/* Selected rows - uniform background color (no alternating) */
/* Override for all selected rows including alternating rows (.k-table-alt-row) */
.k-grid tbody tr.k-selected,
.k-grid tbody tr.k-state-selected,
.k-grid tbody tr.k-table-row.k-selected,
.k-grid tbody tr.k-table-alt-row.k-selected,
.k-grid tbody tr.k-master-row.k-selected,
.k-grid tbody tr.k-master-row.k-table-alt-row.k-selected {
    background-color: #d4d4d4 !important;
}

.k-grid tbody tr.k-selected td,
.k-grid tbody tr.k-selected > td,
.k-grid tbody tr.k-selected .k-table-td,
.k-grid tbody tr.k-state-selected td,
.k-grid tbody tr.k-state-selected > td,
.k-grid tbody tr.k-state-selected .k-table-td,
.k-grid tbody tr.k-table-row.k-selected td,
.k-grid tbody tr.k-table-row.k-selected > td,
.k-grid tbody tr.k-table-row.k-selected > .k-table-td,
.k-grid tbody tr.k-table-alt-row.k-selected td,
.k-grid tbody tr.k-table-alt-row.k-selected > td,
.k-grid tbody tr.k-table-alt-row.k-selected > .k-table-td,
.k-grid tbody tr.k-master-row.k-selected td,
.k-grid tbody tr.k-master-row.k-selected > td,
.k-grid tbody tr.k-master-row.k-selected > .k-table-td,
.k-grid tbody tr.k-master-row.k-table-alt-row.k-selected td,
.k-grid tbody tr.k-master-row.k-table-alt-row.k-selected > td,
.k-grid tbody tr.k-master-row.k-table-alt-row.k-selected > .k-table-td,
.k-grid td.k-selected,
.k-grid .k-table-row.k-selected > td,
.k-grid .k-table-td.k-selected,
.k-grid .k-table-row.k-selected > .k-table-td,
.k-grid .k-table-alt-row.k-selected > td,
.k-grid .k-table-alt-row.k-selected > .k-table-td {
    background-color: #d4d4d4 !important;
}

/* Selected rows hover - uniform background color */
.k-grid tbody tr.k-selected:hover,
.k-grid tbody tr.k-state-selected:hover,
.k-grid tbody tr.k-table-row.k-selected:hover,
.k-grid tbody tr.k-table-alt-row.k-selected:hover,
.k-grid tbody tr.k-master-row.k-selected:hover,
.k-grid tbody tr.k-master-row.k-table-alt-row.k-selected:hover {
    background-color: #c8c8c8 !important;
}

.k-grid tbody tr.k-selected:hover td,
.k-grid tbody tr.k-selected:hover > td,
.k-grid tbody tr.k-selected:hover .k-table-td,
.k-grid tbody tr.k-state-selected:hover td,
.k-grid tbody tr.k-state-selected:hover > td,
.k-grid tbody tr.k-state-selected:hover .k-table-td,
.k-grid tbody tr.k-table-row.k-selected:hover td,
.k-grid tbody tr.k-table-row.k-selected:hover > td,
.k-grid tbody tr.k-table-row.k-selected:hover > .k-table-td,
.k-grid tbody tr.k-table-alt-row.k-selected:hover td,
.k-grid tbody tr.k-table-alt-row.k-selected:hover > td,
.k-grid tbody tr.k-table-alt-row.k-selected:hover > .k-table-td,
.k-grid tbody tr.k-master-row.k-selected:hover td,
.k-grid tbody tr.k-master-row.k-selected:hover > td,
.k-grid tbody tr.k-master-row.k-selected:hover > .k-table-td,
.k-grid tbody tr.k-master-row.k-table-alt-row.k-selected:hover td,
.k-grid tbody tr.k-master-row.k-table-alt-row.k-selected:hover > td,
.k-grid tbody tr.k-master-row.k-table-alt-row.k-selected:hover > .k-table-td {
    background-color: #c8c8c8 !important;
}

/* Grid cells */
.k-grid td,
.k-grid .k-table-td {
    border: none !important;
    border-right: 1px solid var(--modern-border) !important;
    border-bottom: 1px solid #eeeeee !important;
    padding: 4px 12px !important;
    color: var(--modern-text) !important;
    font-size: 13.5px !important;
    line-height: 1.3 !important;
}

.k-grid td:last-child {
    border-right: none !important;
}

/* Right align numeric columns */
.k-grid td.k-numeric,
.k-grid .k-table-td.k-numeric,
.k-grid td[data-type="number"],
.k-grid col.k-sorted + td,
.k-grid .k-grid-content td:has(.k-numerictextbox),
.k-grid td.text-right,
.k-grid td.text-end {
    text-align: right !important;
}

.k-grid th.k-numeric,
.k-grid .k-header.k-numeric,
.k-grid th[data-type="number"] {
    text-align: right !important;
}

/* Grid alternating rows - subtle */
.k-grid tbody tr.k-alt,
.k-grid tbody tr:nth-child(even) {
    background-color: var(--modern-bg) !important;
}

/* Custom row styles - must override alternating rows */
.k-grid tbody tr.out-of-sales-row,
.k-grid tbody tr.out-of-sales-row.k-alt,
.k-grid tbody tr.out-of-sales-row:nth-child(even),
.k-grid tbody tr.out-of-sales-row:nth-child(odd) {
    background-color: #FF9E99 !important;
}

/* Grid pager */
.k-grid .k-pager,
.k-pager-wrap,
.k-pager {
    background: var(--modern-bg-secondary) !important;
    border-top: 1px solid var(--modern-border) !important;
    padding: 4px 12px !important;
}

.k-pager .k-pager-numbers .k-link,
.k-pager .k-link,
.k-pager .k-button,
.k-pager-wrap .k-button,
.k-pager-wrap .k-link,
.k-pager-nav {
    border-radius: var(--modern-radius-sm) !important;
    color: var(--modern-text-secondary) !important;
    min-width: 26px !important;
    height: 26px !important;
    font-size: 12px !important;
    padding: 2px 6px !important;
}

.k-pager .k-pager-numbers .k-link:hover,
.k-pager .k-link:hover,
.k-pager .k-button:hover,
.k-pager-wrap .k-button:hover {
    background-color: var(--modern-bg-hover) !important;
    color: var(--modern-text) !important;
}

.k-pager .k-pager-numbers .k-link.k-selected,
.k-pager .k-link.k-selected,
.k-pager .k-pager-numbers .k-state-selected,
.k-pager .k-pager-numbers .k-selected {
    background-color: #000000 !important;
    color: #ffffff !important;
}

.k-pager-info {
    font-size: 11px !important;
}

.k-pager-sizes .k-dropdown,
.k-pager-sizes .k-dropdownlist {
    height: 22px !important;
    font-size: 11px !important;
}

/* Grid toolbar */
.k-grid-toolbar,
.k-grid .k-toolbar {
    background: #f0f2f5 !important;
    border-bottom: 1px solid var(--modern-border) !important;
    padding: 12px 16px !important;
    gap: 8px !important;
}

.k-grid-toolbar .k-button,
.k-grid .k-toolbar .k-button {
    padding: 8px 16px !important;
    font-size: 13px !important;
    min-height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
}

/* Icon-only toolbar buttons - ensure icon is centered */
.k-grid-toolbar .k-button .k-svg-icon,
.k-grid .k-toolbar .k-button .k-svg-icon,
.k-grid-toolbar .k-button .k-icon,
.k-grid .k-toolbar .k-button .k-icon {
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* When button has only icon (no text), adjust padding */
.k-grid-toolbar .k-button:not(:has(.k-button-text)),
.k-grid .k-toolbar .k-button:not(:has(.k-button-text)) {
    padding: 8px 10px !important;
}

/* Grid sorted/filtered column indicators - subtle */
.k-grid th.k-sorted {
    border-bottom: 2px solid var(--modern-accent) !important;
    background-color: transparent !important;
}

/* Sorted column cells - remove alternating background */
.k-grid {
    --kendo-grid-sorted-bg: transparent;
}

.k-grid th.k-filtered {
    border-bottom: 2px solid var(--modern-warning) !important;
    background-color: transparent !important;
}

/* Grid checkbox column */
.k-grid .k-checkbox {
    border-radius: var(--modern-radius-sm) !important;
    border: 1.5px solid var(--modern-border-hover) !important;
    width: 16px !important;
    height: 16px !important;
}

/* All checkboxes - black when selected - force override Telerik styles */
.k-checkbox:checked,
.k-checkbox.k-checked,
.k-grid .k-checkbox:checked,
.k-grid .k-checkbox.k-checked,
.k-grid-header .k-checkbox:checked,
.k-grid-header .k-checkbox.k-checked,
.k-table .k-checkbox:checked,
.k-table .k-checkbox.k-checked,
input.k-checkbox:checked,
input.k-checkbox.k-checked,
input[type="checkbox"].k-checkbox:checked,
input[type="checkbox"].k-checkbox.k-checked,
.k-grid input.k-checkbox:checked,
.k-grid input.k-checkbox.k-checked,
.k-grid td .k-checkbox:checked,
.k-grid td .k-checkbox.k-checked,
.k-grid th .k-checkbox:checked,
.k-grid th .k-checkbox.k-checked,
.k-grid-header-wrap .k-checkbox:checked,
.k-grid-header-wrap .k-checkbox.k-checked,
.k-master-row .k-checkbox:checked,
.k-master-row .k-checkbox.k-checked {
    background-color: #37352f !important;
    border-color: #37352f !important;
}

/* Override Telerik kendo variables for checkboxes - hover state */
.k-checkbox:checked:hover,
.k-checkbox.k-checked:hover,
.k-checkbox.k-checked.k-hover,
.k-grid .k-checkbox:checked:hover,
.k-grid .k-checkbox.k-checked.k-hover,
input.k-checkbox:checked:hover,
input.k-checkbox.k-checked:hover {
    background-color: #1a1a1a !important;
    border-color: #1a1a1a !important;
}

/* Override focus state */
.k-checkbox:checked:focus,
.k-checkbox.k-checked.k-focus,
.k-grid .k-checkbox:checked:focus,
.k-grid .k-checkbox.k-checked.k-focus,
input.k-checkbox:checked:focus,
input.k-checkbox.k-checked:focus {
    background-color: #37352f !important;
    border-color: #37352f !important;
}

/* TelerikCheckBox component override */
.k-checkbox-wrap .k-checkbox:checked,
.k-checkbox-wrap .k-checkbox.k-checked {
    background-color: #37352f !important;
    border-color: #37352f !important;
}

/* Native HTML checkboxes in grid - black when checked */
.k-grid input[type="checkbox"]:checked,
.k-grid td input[type="checkbox"]:checked,
.k-table input[type="checkbox"]:checked {
    accent-color: #37352f !important;
}

/* Style native checkboxes to match modern theme */
.k-grid input[type="checkbox"],
.k-grid td input[type="checkbox"],
.k-table input[type="checkbox"] {
    accent-color: #37352f;
    width: 15px;
    height: 15px;
    cursor: pointer;
}

/* Global grid checkbox class - use this instead of inline styles */
.grid-checkbox {
    accent-color: #37352f;
    width: 15px;
    height: 15px;
    cursor: default;
}

.grid-checkbox:checked {
    accent-color: #37352f !important;
}

/* Toolbar checkbox styling */
.toolbar-checkbox {
    accent-color: #37352f;
    width: 18px;
    height: 18px;
    margin-right: 5px;
    cursor: pointer;
}

/* --------------------------------------------------------------------------
   Form Field Captions - Bold labels
   -------------------------------------------------------------------------- */
.entro-textbox-label,
.entro-textarea-label,
.entro-numeric-label,
.entro-datepicker-label,
.entro-combobox-label,
.entro-checkbox-label,
.entro-button-label {
    font-weight: 600 !important;
    font-size: 13.5px !important;
    color: var(--modern-text) !important;
}

/* Align checkbox height with input fields */
.entro-checkbox-label {
    min-height: 54px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.entro-checkbox-label .k-checkbox {
    margin-top: 4px;
}

/* --------------------------------------------------------------------------
   Telerik Buttons - Clean with good presence
   -------------------------------------------------------------------------- */
.k-button {
    border-radius: var(--modern-radius-md) !important;
    font-weight: 500 !important;
    font-size: 13.5px !important;
    padding: 6px 14px !important;
    border: 1px solid var(--modern-border-hover) !important;
    background: var(--modern-bg) !important;
    color: var(--modern-text) !important;
    transition: all var(--modern-transition) !important;
    box-shadow: var(--modern-shadow-sm) !important;
    min-height: 36px !important;
}

/* NumericTextBox spinner buttons - ensure both are visible */
.k-numerictextbox .k-spinner-increase,
.k-numerictextbox .k-spinner-decrease {
    height: 50% !important;
    min-height: 18px !important;
}

.k-button:hover {
    background: var(--modern-bg-hover) !important;
    border-color: var(--modern-text-tertiary) !important;
    box-shadow: var(--modern-shadow-md) !important;
}

.k-button:active {
    background: var(--modern-bg-active) !important;
    box-shadow: none !important;
}

.k-button:focus {
    box-shadow: 0 0 0 3px var(--modern-accent-light) !important;
    outline: none !important;
}

/* Primary button - accent color for main actions */
.k-button.k-primary,
.k-button-solid-primary {
    background: var(--modern-accent) !important;
    border-color: var(--modern-accent) !important;
    color: white !important;
}

.k-button.k-primary:hover,
.k-button-solid-primary:hover {
    background: var(--modern-accent-hover) !important;
    border-color: var(--modern-accent-hover) !important;
}

/* Split button */
.k-split-button {
    border-radius: var(--modern-radius-md) !important;
}

.k-split-button .k-button {
    border-radius: var(--modern-radius-md) 0 0 var(--modern-radius-md) !important;
    border-right: none !important;
}

.k-split-button .k-split-button-arrow {
    border-radius: 0 var(--modern-radius-md) var(--modern-radius-md) 0 !important;
    border-left: none !important;
    padding: 0 6px !important;
    min-width: auto !important;
}

/* Remove vertical separator line in split button */
.k-split-button .k-button::after,
.k-split-button .k-button::before,
.k-split-button .k-split-button-arrow::after,
.k-split-button .k-split-button-arrow::before {
    display: none !important;
    border: none !important;
    content: none !important;
}

.k-split-button > .k-button + .k-split-button-arrow {
    border-left: none !important;
    margin-left: 0 !important;
}

.k-button-group .k-button + .k-button,
.k-split-button .k-button + .k-button {
    border-left: none !important;
}

/* Ensure button group has right border on last button */
.k-button-group .k-button:last-child {
    border-right: 1.5px solid var(--modern-border-hover) !important;
}

.k-split-button,
.k-split-button .k-button,
.k-split-button .k-split-button-arrow {
    box-shadow: none !important;
    outline: none !important;
}

.k-split-button .k-button:first-child {
    border-right-width: 0 !important;
}

.k-split-button .k-split-button-arrow {
    border-left-width: 0 !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
}

/* --------------------------------------------------------------------------
   Grid Command Buttons - Colored icon-only buttons (ONLY in grid rows)
   -------------------------------------------------------------------------- */
.k-grid .k-command-cell .k-button {
    border: none !important;
    box-shadow: none !important;
    padding: 2px 4px !important;
    min-width: auto !important;
    min-height: auto !important;
    height: 22px !important;
    line-height: 1 !important;
}

.k-grid .k-command-cell {
    padding: 2px 4px !important;
}

/* Keep edit row compact */
.k-grid .k-grid-edit-row,
.k-grid tr.k-grid-edit-row {
    height: 34px !important;
    max-height: 34px !important;
}

.k-grid .k-grid-edit-row td,
.k-grid tr.k-grid-edit-row td {
    padding-top: 1px !important;
    padding-bottom: 1px !important;
}

.k-grid .k-grid-edit-row .k-command-cell {
    padding: 2px 4px !important;
}

/* Inline edit inputs - keep compact */
.k-grid .k-grid-edit-row .k-input,
.k-grid .k-grid-edit-row .k-textbox,
.k-grid .k-grid-edit-row .k-picker,
.k-grid .k-grid-edit-row .k-dropdown,
.k-grid .k-grid-edit-row .k-combobox,
.k-grid .k-grid-edit-row .k-numerictextbox,
.k-grid .k-grid-edit-row .k-datepicker,
.k-grid .k-grid-edit-row .k-dropdownlist {
    min-height: 30px !important;
    height: 30px !important;
    padding: 0 4px !important;
}

.k-grid .k-grid-edit-row .k-input-inner {
    padding: 0 4px !important;
    height: 28px !important;
    min-height: 28px !important;
}

/* Numeric field spinner buttons in edit row */
.k-grid .k-grid-edit-row .k-spinner-increase,
.k-grid .k-grid-edit-row .k-spinner-decrease {
    height: 15px !important;
    min-height: 15px !important;
    padding: 0 !important;
}

.k-grid .k-grid-edit-row .k-spinner-increase .k-icon,
.k-grid .k-grid-edit-row .k-spinner-decrease .k-icon,
.k-grid .k-grid-edit-row .k-spinner-increase .k-svg-icon,
.k-grid .k-grid-edit-row .k-spinner-decrease .k-svg-icon {
    width: 14px !important;
    height: 14px !important;
}

/* Dropdown/Combobox/Datepicker buttons in edit row */
.k-grid .k-grid-edit-row .k-input-button,
.k-grid .k-grid-edit-row .k-select {
    height: 28px !important;
    min-height: 28px !important;
    width: 28px !important;
    padding: 0 !important;
}

/* Command buttons in edit row */
.k-grid .k-grid-edit-row .k-command-cell .k-button {
    height: 26px !important;
    min-height: 26px !important;
}

/* Checkbox in edit row - center aligned */
.k-grid .k-grid-edit-row td .k-checkbox,
.k-grid .k-grid-edit-row td .k-checkbox-wrap {
    display: flex !important;
    justify-content: center !important;
    margin: 0 auto !important;
}

.k-grid .k-grid-edit-row td:has(.k-checkbox) {
    text-align: center !important;
}

/* Edit/Delete buttons - neutral with border */
.k-grid .k-command-cell .k-button {
    background: transparent !important;
    color: var(--modern-text-secondary) !important;
    border: 1px solid var(--modern-border) !important;
    border-radius: var(--modern-radius-sm) !important;
}

/* Save button in edit mode - green (override neutral) */
.k-grid .k-command-cell .k-button.k-button-solid.k-button-solid-success.k-grid-save-command,
.k-grid .k-command-cell .k-button.k-grid-save-command,
.k-grid td.k-command-cell .k-grid-save-command {
    background: #a5d6a7 !important;
    background-color: #a5d6a7 !important;
    color: #2e7d32 !important;
    border: 1px solid #a5d6a7 !important;
}

.k-grid .k-command-cell .k-button.k-button-solid.k-button-solid-success.k-grid-save-command:hover,
.k-grid .k-command-cell .k-button.k-grid-save-command:hover,
.k-grid td.k-command-cell .k-grid-save-command:hover {
    background: #81c784 !important;
    background-color: #81c784 !important;
    color: #1b5e20 !important;
    border: 1px solid #81c784 !important;
}

/* Cancel button in edit mode - red (override neutral) */
.k-grid .k-command-cell .k-button.k-button-solid.k-button-solid-error.k-grid-cancel-command,
.k-grid .k-command-cell .k-button.k-grid-cancel-command,
.k-grid td.k-command-cell .k-grid-cancel-command {
    background: #ef9a9a !important;
    background-color: #ef9a9a !important;
    color: #c62828 !important;
    border: 1px solid #ef9a9a !important;
}

.k-grid .k-command-cell .k-button.k-button-solid.k-button-solid-error.k-grid-cancel-command:hover,
.k-grid .k-command-cell .k-button.k-grid-cancel-command:hover,
.k-grid td.k-command-cell .k-grid-cancel-command:hover {
    background: #e57373 !important;
    background-color: #e57373 !important;
    color: #b71c1c !important;
    border: 1px solid #e57373 !important;
}

/* --------------------------------------------------------------------------
   Telerik Inputs - Clean with subtle focus
   -------------------------------------------------------------------------- */
.k-textbox,
.k-input,
.k-picker,
.k-dropdown,
.k-combobox,
.k-numerictextbox,
.k-datepicker {
    border-radius: var(--modern-radius-md) !important;
    border: 1.5px solid var(--modern-border-hover) !important;
    background: var(--modern-bg) !important;
    font-size: 13.5px !important;
    transition: all var(--modern-transition) !important;
    min-height: 36px !important;
}

.k-textarea {
    border-radius: var(--modern-radius-md) !important;
    border: 1.5px solid var(--modern-border-hover) !important;
    background: var(--modern-bg) !important;
    font-size: 13.5px !important;
    transition: all var(--modern-transition) !important;
}

.k-textbox:hover,
.k-input:hover,
.k-picker:hover,
.k-dropdown:hover,
.k-combobox:hover {
    border-color: var(--modern-border-hover) !important;
}

.k-textbox:focus,
.k-textbox.k-focus,
.k-input:focus,
.k-input.k-focus,
.k-picker:focus,
.k-picker.k-focus,
.k-dropdown.k-focus,
.k-combobox.k-focus,
.k-combobox:focus-within,
.k-dropdown:focus-within,
.k-picker:focus-within {
    border: 1.2px solid var(--modern-text) !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Checkbox focus - thicker border like textfields */
.k-checkbox:focus,
.k-checkbox.k-focus,
.k-checkbox:focus-visible {
    border: 2px solid var(--modern-text) !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Remove inner focus borders on combobox/dropdown */
.k-combobox .k-input-inner:focus,
.k-dropdown .k-input-inner:focus,
.k-picker .k-input-inner:focus,
.k-combobox .k-input-button:focus,
.k-dropdown .k-input-button:focus,
.k-picker .k-input-button:focus,
.k-select:focus,
.k-input-button:focus {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

.k-input-inner {
    border: none !important;
    box-shadow: none !important;
}

/* Placeholder */
.k-textbox::placeholder,
.k-input::placeholder,
.k-input-inner::placeholder {
    color: var(--modern-text-placeholder) !important;
}

/* --------------------------------------------------------------------------
   Telerik Column Menu / Filter Menu - Ensure labels visible in all browsers
   -------------------------------------------------------------------------- */
.k-column-menu,
.k-column-menu-popup,
.k-menu,
.k-menu-group {
    background: var(--modern-bg) !important;
    color: #37352f !important;
}

.k-menu-item,
.k-menu-link {
    color: #37352f !important;
}

/* Force menu link text to be visible - fix for Firefox */
.k-menu-link-text,
.k-menu .k-menu-link-text,
.k-column-menu .k-menu-link-text,
.k-menu-group .k-menu-link-text,
span.k-menu-link-text {
    color: #37352f !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    -webkit-text-fill-color: #37352f !important;
    font-size: 14px !important;
}

.k-menu-item:hover,
.k-menu-link:hover {
    background-color: var(--modern-bg-hover) !important;
}

/* Filter menu buttons - black style */
.k-column-menu .k-button,
.k-column-menu-popup .k-button,
.k-filter-menu .k-button,
.k-columnmenu-actions .k-button,
.k-actions .k-button,
.k-columnmenu-item-wrapper .k-button,
.k-filter-menu-container .k-button {
    background: #37352f !important;
    border-color: #37352f !important;
    color: white !important;
}

/* Override Telerik solid-primary buttons in menus and popups */
.k-column-menu .k-button-solid-primary,
.k-column-menu-popup .k-button-solid-primary,
.k-filter-menu .k-button-solid-primary,
.k-columnmenu-actions .k-button-solid-primary,
.k-actions .k-button-solid-primary,
.k-animation-container .k-button-solid-primary,
.k-popup .k-button-solid-primary,
.k-child-animation-container .k-button-solid-primary,
.k-columnmenu-item-content .k-button-solid-primary,
button.k-button-solid-primary {
    background: #37352f !important;
    background-color: #37352f !important;
    border-color: #37352f !important;
    color: white !important;
}

/* Global override for ALL primary buttons to be black - except grid command buttons */
.k-button.k-button-solid.k-button-solid-primary:not(.k-grid-edit-command):not(.k-grid-save-command),
.k-button-solid-primary.k-button-md:not(.k-grid-edit-command):not(.k-grid-save-command),
.k-button-solid-primary.k-rounded-md:not(.k-grid-edit-command):not(.k-grid-save-command) {
    background: #37352f !important;
    background-color: #37352f !important;
    border-color: #37352f !important;
    color: white !important;
}

/* Grid command buttons in rows - neutral with border */
.k-grid .k-command-cell .k-button.k-button-solid-primary,
.k-grid .k-command-cell .k-button-solid-primary,
.k-grid td.k-command-cell .k-button.k-button-solid.k-button-solid-primary {
    background: transparent !important;
    background-color: transparent !important;
    border: 1px solid var(--modern-border) !important;
    box-shadow: none !important;
    color: var(--modern-text-secondary) !important;
    border-radius: var(--modern-radius-sm) !important;
}

.k-grid .k-command-cell .k-button.k-button-solid-primary:hover {
    background: var(--modern-bg-hover) !important;
    color: var(--modern-text) !important;
}

.k-column-menu .k-button:hover,
.k-column-menu-popup .k-button:hover,
.k-filter-menu .k-button:hover,
.k-columnmenu-actions .k-button:hover,
.k-actions .k-button:hover,
.k-columnmenu-item-wrapper .k-button:hover,
.k-filter-menu-container .k-button:hover {
    background: #1a1a1a !important;
    border-color: #1a1a1a !important;
}

.k-column-menu .k-button-solid-primary:hover,
.k-column-menu-popup .k-button-solid-primary:hover,
.k-filter-menu .k-button-solid-primary:hover,
.k-animation-container .k-button-solid-primary:hover,
.k-popup .k-button-solid-primary:hover,
.k-child-animation-container .k-button-solid-primary:hover,
button.k-button-solid-primary:hover,
.k-button.k-button-solid.k-button-solid-primary:hover,
.k-button-solid-primary.k-button-md:hover,
.k-button-solid-primary.k-rounded-md:hover {
    background: #1a1a1a !important;
    background-color: #1a1a1a !important;
    border-color: #1a1a1a !important;
}

/* Clear/Reset button - lighter style */
.k-column-menu .k-button.k-flat,
.k-column-menu-popup .k-button.k-flat,
.k-filter-menu .k-button.k-flat,
.k-actions .k-button.k-flat,
.k-column-menu .k-button-solid-base,
.k-column-menu-popup .k-button-solid-base,
.k-filter-menu .k-button-solid-base,
.k-animation-container .k-button-solid-base,
.k-popup .k-button-solid-base {
    background: transparent !important;
    background-color: transparent !important;
    border-color: #37352f !important;
    color: #37352f !important;
}

.k-column-menu .k-button.k-flat:hover,
.k-column-menu-popup .k-button.k-flat:hover,
.k-filter-menu .k-button.k-flat:hover,
.k-actions .k-button.k-flat:hover,
.k-column-menu .k-button-solid-base:hover,
.k-column-menu-popup .k-button-solid-base:hover,
.k-filter-menu .k-button-solid-base:hover,
.k-animation-container .k-button-solid-base:hover,
.k-popup .k-button-solid-base:hover {
    background: var(--modern-bg-hover) !important;
    background-color: var(--modern-bg-hover) !important;
}

/* Grid popup edit form - center buttons horizontally */
.k-popup-edit-form .k-actions,
.k-popup-edit-form .k-form-buttons,
.k-popup-edit-form .k-edit-buttons {
    justify-content: center !important;
}

/* Grid popup edit form - center button content vertically */
.k-popup-edit-form .k-actions .k-button,
.k-popup-edit-form .k-form-buttons .k-button,
.k-popup-edit-form .k-edit-buttons .k-button {
    display: inline-flex !important;
    align-items: center !important;
}

/* --------------------------------------------------------------------------
   Telerik ComboBox / Dropdown
   -------------------------------------------------------------------------- */
.k-popup,
.k-list-container,
.k-animation-container {
    border-radius: var(--modern-radius-lg) !important;
    border: 1px solid var(--modern-border) !important;
    box-shadow: var(--modern-shadow-popup) !important;
    overflow: hidden;
    background: var(--modern-bg) !important;
}

.k-list .k-item,
.k-list-item {
    padding: 8px 12px !important;
    font-size: 13.5px !important;
    color: var(--modern-text) !important;
    transition: background-color var(--modern-transition) !important;
}

.k-list .k-item:hover,
.k-list-item:hover,
.k-list .k-item.k-hover {
    background-color: var(--modern-bg-hover) !important;
}

.k-list .k-item.k-selected,
.k-list-item.k-selected,
.k-list .k-item.k-state-selected {
    background-color: var(--modern-bg-hover) !important;
    color: var(--modern-text) !important;
    font-weight: 600 !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.k-list .k-item:focus,
.k-list-item:focus,
.k-list .k-item.k-focus,
.k-list-item.k-focus {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* --------------------------------------------------------------------------
   Telerik Window / Modal - Clean with nice shadow
   -------------------------------------------------------------------------- */
.k-window {
    border-radius: var(--modern-radius-lg) !important;
    border: none !important;
    box-shadow: var(--modern-shadow-popup) !important;
    overflow: hidden;
}

.k-window-titlebar {
    background: #37352f !important;
    border-bottom: none !important;
    padding: 8px 14px !important;
    min-height: auto !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

.k-window-actions {
    margin-left: auto !important;
    margin-right: -8px !important;
    padding-right: 0 !important;
}

.k-window-title {
    font-weight: 600 !important;
    font-size: 13px !important;
    color: #ffffff !important;
}

.k-window-actions .k-button {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    color: rgba(255, 255, 255, 0.7) !important;
}

.k-window-actions .k-button:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}

.k-window-actions .k-button .k-svg-icon,
.k-window-actions .k-button .k-icon {
    color: rgba(255, 255, 255, 0.7) !important;
}

.k-window-actions .k-button:hover .k-svg-icon,
.k-window-actions .k-button:hover .k-icon {
    color: #ffffff !important;
}

.k-window-content {
    padding: 20px !important;
    background: var(--modern-bg) !important;
}

/* Message boxes / Dialogs (Alert, Confirm, Prompt) - dark header */
.k-dialog .k-dialog-titlebar {
    background: #37352f !important;
    border-bottom: none !important;
    padding: 8px 14px !important;
    min-height: auto !important;
}

.k-dialog .k-dialog-title {
    font-weight: 600 !important;
    font-size: 13px !important;
    color: #ffffff !important;
}

.k-dialog .k-dialog-content {
    padding: 20px !important;
}

.k-dialog .k-dialog-titlebar .k-button {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    color: rgba(255, 255, 255, 0.7) !important;
}

.k-dialog .k-dialog-titlebar .k-button:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}

.k-dialog .k-dialog-titlebar .k-button .k-svg-icon,
.k-dialog .k-dialog-titlebar .k-button .k-icon {
    color: rgba(255, 255, 255, 0.7) !important;
}

.k-dialog .k-dialog-titlebar .k-button:hover .k-svg-icon,
.k-dialog .k-dialog-titlebar .k-button:hover .k-icon {
    color: #ffffff !important;
}

/* Dialog actions container - ensure it's fully visible */
.k-dialog .k-dialog-actions,
.k-dialog-actions,
.k-dialog-buttongroup {
    padding: 12px 20px !important;
    overflow: visible !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 8px !important;
}

/* Dialog action buttons (OK, Cancel, Yes, No, etc.) */
.k-dialog .k-dialog-actions .k-button,
.k-dialog-buttongroup .k-button,
.k-dialog-actions .k-button {
    background-color: #37352f !important;
    color: #ffffff !important;
    border: none !important;
    padding: 8px 16px !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    min-width: 70px !important;
    min-height: 36px !important;
    border-radius: var(--modern-radius-md) !important;
}

.k-dialog .k-dialog-actions .k-button:hover,
.k-dialog-buttongroup .k-button:hover,
.k-dialog-actions .k-button:hover {
    background-color: #1a1a1a !important;
    color: #ffffff !important;
}

/* Modal overlay */
.k-overlay {
    background-color: rgba(0, 0, 0, 0.4) !important;
    backdrop-filter: blur(2px);
}

/* --------------------------------------------------------------------------
   Telerik TabStrip - Minimal height
   -------------------------------------------------------------------------- */
.k-tabstrip {
    border: none !important;
}

.k-tabstrip-items {
    border-bottom: 1px solid var(--modern-border) !important;
    background: transparent !important;
    gap: 4px !important;
    min-height: auto !important;
}

.k-tabstrip-items .k-item,
.k-tabstrip .k-tabstrip-items .k-link {
    background: transparent !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    padding: 5px 11px !important;
    font-weight: 400 !important;
    font-size: 11px !important;
    color: #555555 !important;
    transition: all var(--modern-transition) !important;
    margin-bottom: -1px !important;
    min-height: auto !important;
    line-height: 1.35 !important;
}

.k-tabstrip-items .k-item:hover,
.k-tabstrip .k-tabstrip-items .k-link:hover {
    color: #444444 !important;
    background: transparent !important;
}

.k-tabstrip-items .k-item.k-active,
.k-tabstrip-items .k-item.k-state-active {
    background-color: #000000 !important;
}

.k-tabstrip-items .k-item.k-active .k-link,
.k-tabstrip-items .k-item.k-state-active .k-link,
.k-tabstrip .k-tabstrip-items .k-item.k-active .k-link {
    color: #ffffff !important;
    font-weight: 600 !important;
    border-bottom: none !important;
    background-color: #000000 !important;
}

.k-tabstrip-content,
.k-tabstrip > .k-content {
    border: none !important;
    padding: 12px 0 !important;
    background: transparent !important;
}

/* Override the blue tab styling with subtle gray gradient */
.tab-blue-1 .k-tabstrip-items .k-item:nth-child(1) {
    background-color: #c9c9c9 !important; /* gray - darkest */
    border-color: transparent !important;
}

.tab-blue-1 .k-tabstrip-items .k-item:nth-child(2) {
    background-color: #cecece !important;
    border-color: transparent !important;
}

.tab-blue-1 .k-tabstrip-items .k-item:nth-child(3) {
    background-color: #d3d3d3 !important;
    border-color: transparent !important;
}

.tab-blue-1 .k-tabstrip-items .k-item:nth-child(4) {
    background-color: #d8d8d8 !important;
    border-color: transparent !important;
}

.tab-blue-1 .k-tabstrip-items .k-item:nth-child(5) {
    background-color: #dddddd !important;
    border-color: transparent !important;
}

.tab-blue-1 .k-tabstrip-items .k-item:nth-child(6) {
    background-color: #e2e2e2 !important; /* gray - lightest */
    border-color: transparent !important;
}

.tab-blue-1 .k-tabstrip-items .k-item {
    border: none !important;
    border-radius: var(--modern-radius-sm) var(--modern-radius-sm) 0 0 !important;
}

.tab-blue-1 .k-tabstrip-items .k-item::after {
    display: none !important;
}

.tab-blue-1 .k-tabstrip-items .k-item.k-active,
.tab-blue-1 .k-tabstrip-items .k-item.k-selected {
    border: none !important;
    background-color: #000000 !important;
    color: #ffffff !important;
    font-weight: 600 !important;
}

.tab-blue-1 .k-tabstrip-items .k-item.k-active::after,
.tab-blue-1 .k-tabstrip-items .k-item.k-selected::after {
    display: none !important;
}

.tab-blue-1 .k-tabstrip-items .k-item .k-link {
    border: none !important;
    text-decoration: none !important;
}

.tab-blue-1 .k-tabstrip-items .k-item.k-active .k-link,
.tab-blue-1 .k-tabstrip-items .k-item.k-selected .k-link {
    border: none !important;
    text-decoration: none !important;
    background-color: #000000 !important;
    color: #ffffff !important;
}

/* Fix orderno-display alignment with tabs */
.orderno-display {
    top: -8px !important;
}

/* --------------------------------------------------------------------------
   Telerik Notification - Subtle toasts
   -------------------------------------------------------------------------- */
.k-notification {
    border-radius: var(--modern-radius-lg) !important;
    box-shadow: var(--modern-shadow-lg) !important;
    border: none !important;
    padding: 12px 16px !important;
    font-size: 13px !important;
}

.k-notification-info {
    background: var(--modern-bg) !important;
    color: var(--modern-text) !important;
    border-left: 3px solid var(--modern-accent) !important;
}

.k-notification-success {
    background: var(--modern-success-light) !important;
    color: var(--modern-success) !important;
    border-left: 3px solid var(--modern-success) !important;
}

.k-notification-warning {
    background: var(--modern-warning-light) !important;
    color: var(--modern-warning) !important;
    border-left: 3px solid var(--modern-warning) !important;
}

.k-notification-error {
    background: var(--modern-error-light) !important;
    color: var(--modern-error) !important;
    border-left: 3px solid var(--modern-error) !important;
}

/* --------------------------------------------------------------------------
   Telerik Drawer / Sidebar - Clean navigation
   -------------------------------------------------------------------------- */
.k-drawer {
    background: var(--modern-bg-secondary) !important;
    border-right: 1px solid var(--modern-border) !important;
}

.k-drawer-items .k-drawer-item {
    padding: 10px 16px !important;
    font-size: 13px !important;
    color: var(--modern-text-secondary) !important;
    transition: all var(--modern-transition) !important;
    border-radius: var(--modern-radius-md) !important;
    margin: 2px 8px !important;
}

.k-drawer-items .k-drawer-item:hover {
    background: var(--modern-bg-hover) !important;
    color: var(--modern-text) !important;
}

.k-drawer-items .k-drawer-item.k-selected,
.k-drawer-items .k-drawer-item.k-state-selected {
    background: var(--modern-bg-active) !important;
    color: var(--modern-text) !important;
    font-weight: 500 !important;
}

/* --------------------------------------------------------------------------
   Telerik Loader - Subtle spinner
   -------------------------------------------------------------------------- */
.k-loader {
    color: #37352f !important;
}

.k-loader-segment,
.k-loader-segment::after {
    background-color: #37352f !important;
}

.k-loader-container {
    background: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(2px);
}

.k-loader-container .k-loader-container-label,
.k-loader-container-label,
.k-loader-container .k-loader-container-inner,
.k-loader-container span {
    color: #37352f !important;
}

/* --------------------------------------------------------------------------
   Telerik FileSelect
   -------------------------------------------------------------------------- */
.k-upload {
    border: 2px dashed var(--modern-border) !important;
    border-radius: var(--modern-radius-lg) !important;
    background: var(--modern-bg-secondary) !important;
    transition: all var(--modern-transition) !important;
}

.k-upload:hover,
.k-upload.k-hover {
    border-color: var(--modern-accent) !important;
    background: var(--modern-accent-light) !important;
}

.k-upload .k-dropzone {
    background: transparent !important;
    padding: 32px !important;
}

/* --------------------------------------------------------------------------
   Telerik Chart - Clean styling
   -------------------------------------------------------------------------- */
.k-chart {
    font-family: var(--modern-font) !important;
}

/* --------------------------------------------------------------------------
   Scrollbar - Modern thin scrollbar
   -------------------------------------------------------------------------- */
/* Firefox scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--modern-border-hover) transparent;
}

/* Chrome/Edge/Safari scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--modern-border-hover);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--modern-text-tertiary);
}

/* Modal window scrollbar - brighter and wider */
/* Firefox */
.k-window-content {
    scrollbar-width: auto;
    scrollbar-color: #c8c8c8 #f5f5f5;
}

/* Chrome/Edge/Safari */
.k-window-content::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

.k-window-content::-webkit-scrollbar-track {
    background: #f5f5f5;
}

.k-window-content::-webkit-scrollbar-thumb {
    background: #c8c8c8;
    border-radius: 6px;
}

.k-window-content::-webkit-scrollbar-thumb:hover {
    background: #b0b0b0;
}

/* --------------------------------------------------------------------------
   Page Headers - Clean typography
   -------------------------------------------------------------------------- */
h1 {
    font-size: 20px !important;
    font-weight: 600 !important;
    color: var(--modern-text) !important;
    margin-top: 4px !important;
    margin-bottom: 4px !important;
}

h2 {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: var(--modern-text) !important;
}

h3 {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--modern-text) !important;
}

hr:not(.edit-page-hr) {
    border: none !important;
    border-top: 1px solid var(--modern-border) !important;
    margin: 4px 0 8px 0 !important;
}

/* --------------------------------------------------------------------------
   Validation - Subtle error states
   -------------------------------------------------------------------------- */
.invalid,
.k-invalid {
    border-color: var(--modern-error) !important;
}

.validation-message {
    color: var(--modern-error) !important;
    font-size: 12px !important;
    margin-top: 4px !important;
}

.valid.modified:not([type=checkbox]) {
    outline: none !important;
    border-color: var(--modern-success) !important;
}

/* --------------------------------------------------------------------------
   Links - Subtle styling
   -------------------------------------------------------------------------- */
a {
    color: var(--modern-accent) !important;
    text-decoration: none !important;
}

a:hover {
    text-decoration: underline !important;
}

/* --------------------------------------------------------------------------
   Focus States - Accessible but subtle
   -------------------------------------------------------------------------- */
*:focus-visible {
    outline: none !important;
}

/* --------------------------------------------------------------------------
   Out of sales row - subtle red
   -------------------------------------------------------------------------- */
.out-of-sales-row {
    background-color: var(--modern-error-light) !important;
}

/* --------------------------------------------------------------------------
   Grid cell full-background - for template cells with conditional colors
   -------------------------------------------------------------------------- */
.grid-cell-full-bg {
    margin: -4px -12px !important;
    padding: 4px 12px !important;
    display: block !important;
    min-height: 100% !important;
    text-align: right !important;
}

/* Ensure the parent td allows the full background to extend */
.k-grid td:has(.grid-cell-full-bg) {
    padding: 0 !important;
}

.k-grid td:has(.grid-cell-full-bg) .grid-cell-full-bg {
    margin: 0 !important;
    padding: 4px 12px !important;
}

/* --------------------------------------------------------------------------
   Edit page toolbar - button area styling
   -------------------------------------------------------------------------- */
.edit-toolbar {
    padding: 8px 16px;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    background-color: #f0f2f5;
    min-height: 52px;
    box-sizing: border-box;
}

.edit-toolbar .k-button {
    min-width: auto;
}

/* --------------------------------------------------------------------------
   Edit page layout - reduce spacing between toolbar and content
   -------------------------------------------------------------------------- */
h1.edit-page-title,
.edit-page-title {
    margin: 8px 0 2px 0 !important;
    padding: 0 !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    color: var(--modern-text) !important;
    line-height: 1.2 !important;
}

hr.edit-page-hr,
.edit-page-hr {
    margin: 2px 0 8px 0 !important;
    border: none !important;
    height: 5px !important;
    background-color: #000000 !important;
}

/* Also target any h1 directly after toolbar buttons */
.p-2 + h1 {
    margin-top: 4px !important;
    margin-bottom: 2px !important;
}

.p-2 + h1 + hr {
    margin-top: 2px !important;
    margin-bottom: 8px !important;
}

/* --------------------------------------------------------------------------
   Toolbar Utilities - Replaces Kendo k-* classes
   -------------------------------------------------------------------------- */
.toolbar-spacer {
    flex: 1 1 auto;
}

.toolbar-search,
input.toolbar-search,
.k-grid-toolbar .toolbar-search,
.k-grid-toolbar input.toolbar-search,
.k-toolbar .toolbar-search,
.k-toolbar input.toolbar-search {
    width: 300px !important;
    border-radius: var(--modern-radius-md) !important;
    border-width: 1.5px !important;
    border-style: solid !important;
    border-color: var(--modern-border-hover) !important;
    padding: 6px 12px !important;
    font-size: 13.5px !important;
    background: var(--modern-bg) !important;
    transition: all var(--modern-transition) !important;
    outline: none !important;
    box-shadow: none !important;
}

.toolbar-search:hover,
input.toolbar-search:hover,
.k-grid-toolbar .toolbar-search:hover,
.k-toolbar .toolbar-search:hover {
    border-color: var(--modern-border-hover) !important;
}

.toolbar-search:focus,
.toolbar-search:focus-visible,
input.toolbar-search:focus,
input.toolbar-search:focus-visible,
.k-grid-toolbar .toolbar-search:focus,
.k-grid-toolbar .toolbar-search:focus-visible,
.k-toolbar .toolbar-search:focus,
.k-toolbar .toolbar-search:focus-visible {
    border: 1.5px solid var(--modern-text) !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Grid search box - remove blue focus */
.k-grid-search-wrap,
.k-grid-search-wrap .k-searchbox,
.k-searchbox {
    border: 1.5px solid var(--modern-border-hover) !important;
    border-radius: var(--modern-radius-md) !important;
    box-shadow: none !important;
    outline: none !important;
}

.k-grid-search-wrap:focus-within,
.k-searchbox:focus,
.k-searchbox.k-focus,
.k-searchbox:focus-within,
.k-grid-toolbar .k-searchbox:focus-within,
.k-toolbar .k-searchbox:focus-within {
    border: 1.2px solid var(--modern-text) !important;
    box-shadow: none !important;
    outline: none !important;
}

.k-searchbox .k-input-inner:focus,
.k-searchbox .k-input:focus,
.k-searchbox .k-input-inner:focus-visible,
.k-searchbox:focus-visible,
.k-grid-search-wrap *:focus-visible {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Override Telerik focus ring variables */
.k-searchbox,
.k-searchbox *,
.k-grid-search-wrap,
.k-grid-search-wrap * {
    --kendo-input-focus-shadow: none !important;
    --kendo-input-focus-border: var(--modern-text) !important;
}

.toolbar-checkbox-label {
    margin-right: 10px;
    display: flex;
    align-items: center;
}

/* Custom label font for split button items */
.custom-label-font {
    font-family: Segoe UI, Arial, sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #333333;
}

/* --------------------------------------------------------------------------
   Shell Container - New layout without top header
   -------------------------------------------------------------------------- */
.shell-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.shell-container .k-drawer-container {
    height: 100vh !important;
}

.shell-container .k-drawer {
    height: 100vh !important;
}

/* Drawer header with toggle button */
.drawer-header {
    padding: 8px;
    border-bottom: 1px solid var(--modern-border);
    background-color: #e0e2e5;
    flex-shrink: 0;
    min-height: 52px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}


.drawer-header .k-button {
    padding: 4px !important;
    min-width: 36px !important;
    width: 36px !important;
    height: 36px !important;
}

.drawer-header .k-button .k-svg-icon {
    width: 20px !important;
    height: 20px !important;
}

.drawer-logo {
    height: 36px;
    width: auto;
    object-fit: contain;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.drawer-header {
    position: relative;
}

/* --------------------------------------------------------------------------
   Drawer / Shell Styling
   -------------------------------------------------------------------------- */
.drawer-container {
    height: 100%;
}

.k-drawer-content {
    padding-top: 0 !important;
    padding-left: 0.5rem !important;
    height: 100vh !important;
    overflow-y: auto !important;
}

.content {
    padding-top: 0 !important;
    height: 100vh !important;
    overflow: hidden !important;
}

.drawer-menu {
    background-color: var(--drawer-bg-color, white) !important;
}

/* Drawer wrapper - flex layout for scrollable menu and fixed footer */
.drawer-wrapper {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

/* Scrollable menu area */
.drawer-menu-scrollable {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

/* User/Actions footer at bottom */
.drawer-footer {
    border-top: 1px solid var(--modern-border);
    padding: 12px 16px;
    background-color: #e0e2e5;
    flex-shrink: 0;
}

.drawer-user-info {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.drawer-user-info .k-svg-icon {
    color: var(--modern-text) !important;
}

.drawer-username {
    font-size: 13px;
    font-weight: 500;
    color: var(--modern-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.drawer-actions {
    display: flex;
    gap: 8px;
}

/* Collapsed state - vertical layout */
.drawer-footer.drawer-collapsed .drawer-actions {
    flex-direction: column;
    align-items: center;
}

.drawer-footer.drawer-collapsed .drawer-user-info {
    justify-content: center;
    margin-bottom: 8px;
}

.drawer-footer.drawer-collapsed {
    padding: 8px;
}

.drawer-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--modern-border);
    border-radius: var(--modern-radius-md);
    background-color: white;
    color: var(--modern-text);
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.2s, border-color 0.2s;
}

.drawer-action-btn:hover {
    background-color: var(--modern-bg-hover);
    border-color: var(--modern-border-hover);
}

.drawer-action-btn .k-svg-icon {
    color: var(--modern-text) !important;
}

.drawer-menu .k-drawer-item,
.drawer-menu .k-item-text {
    color: var(--drawer-text-color, black) !important;
}

.drawer-menu .k-icon {
    color: var(--drawer-icon-color, black) !important;
}

.drawer-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Root-level (level 1) items - bold, larger font */
.drawer-menu li.k-level-1 {
    background-color: #f0f2f5 !important;
}

.drawer-menu li.k-level-1 .k-item-text {
    color: black !important;
    font-weight: bold !important;
    font-size: 16px !important;
}

/* Child-level (level 2 and deeper) items - normal weight */
.drawer-menu li.k-level-2 .k-item-text,
.drawer-menu li.k-level-3 .k-item-text,
.drawer-menu li.k-level-4 .k-item-text,
.drawer-menu li.k-level-5 .k-item-text {
    color: black !important;
    font-weight: normal !important;
}

/* Indentation for submenu levels */
.drawer-menu li.k-level-1 {
    padding-left: 12px !important;
}

.drawer-menu li.k-level-2 {
    padding-left: 28px !important;
}

.drawer-menu li.k-level-3 {
    padding-left: 44px !important;
}

.drawer-menu li.k-level-4 {
    padding-left: 60px !important;
}

.drawer-menu li.k-level-5 {
    padding-left: 76px !important;
}

/* Main content remains default */
.k-drawer-content {
    background-color: transparent;
    color: inherit;
}

/* Drawer chevron icon */
.drawer-chevron {
    position: absolute;
    right: 0;
    line-height: inherit;
    margin: 0 8px;
}

/* --------------------------------------------------------------------------
   Top App Bar / Navbar Styling
   -------------------------------------------------------------------------- */
.navbar-custom {
    background-color: whitesmoke !important;
}

.navbar-custom .navbar-text {
    color: gray !important;
}

.navbar-custom button,
.navbar-custom .k-button,
.navbar-custom a {
    color: gray !important;
    border-color: gray !important;
}

.navbar-custom button.btn-outline-secondary:hover,
.navbar-custom button.btn-outline-primary:hover,
.navbar-custom .k-button:hover {
    background-color: rgba(255,255,255,0.1) !important;
}

/* Wider help button */
.help-button-large {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
}

/* --------------------------------------------------------------------------
   Override Tailwind border reset for toolbar search
   -------------------------------------------------------------------------- */
input[class*="toolbar-search"] {
    border-width: 1.5px !important;
    border-style: solid !important;
    border-color: #d4d4d4 !important;
}

input[class*="toolbar-search"]:focus {
    border-width: 1.5px !important;
    border-style: solid !important;
    border-color: #37352f !important;
}

/* --------------------------------------------------------------------------
   Grid Command Buttons - FINAL OVERRIDE (must be at end of file)
   -------------------------------------------------------------------------- */
/* Save button - green (using ThemeColor Success class) */
.k-grid .k-command-cell .k-button-solid-success,
.k-grid .k-command-cell button.k-button-solid-success,
.k-grid td .k-button-solid-success,
.k-button-solid-success.k-grid-save-command {
    background: #a5d6a7 !important;
    background-color: #a5d6a7 !important;
    color: #2e7d32 !important;
    border: 1px solid #a5d6a7 !important;
}

.k-grid .k-command-cell .k-button-solid-success:hover,
.k-grid .k-command-cell button.k-button-solid-success:hover,
.k-grid td .k-button-solid-success:hover,
.k-button-solid-success.k-grid-save-command:hover {
    background: #81c784 !important;
    background-color: #81c784 !important;
    color: #1b5e20 !important;
    border: 1px solid #81c784 !important;
}

/* Cancel button - red (using ThemeColor Error class, but only for cancel) */
.k-grid .k-command-cell .k-button-solid-error.k-grid-cancel-command,
.k-grid .k-command-cell button.k-button-solid-error.k-grid-cancel-command,
.k-grid td .k-button-solid-error.k-grid-cancel-command,
.k-grid .k-grid-edit-row .k-command-cell .k-button-solid-error {
    background: #ef9a9a !important;
    background-color: #ef9a9a !important;
    color: #c62828 !important;
    border: 1px solid #ef9a9a !important;
}

.k-grid .k-command-cell .k-button-solid-error.k-grid-cancel-command:hover,
.k-grid .k-command-cell button.k-button-solid-error.k-grid-cancel-command:hover,
.k-grid td .k-button-solid-error.k-grid-cancel-command:hover,
.k-grid .k-grid-edit-row .k-command-cell .k-button-solid-error:hover {
    background: #e57373 !important;
    background-color: #e57373 !important;
    color: #b71c1c !important;
    border: 1px solid #e57373 !important;
}