:root {
    /* Light Mode (default) */
    --lo-bg-color:              #f6f7f8;
    --lo-mainmenu-bg-color:     #f3f4f6;
    --lo-bg-color-darker:       #eceef1;
    --lo-input-color:           #fdfdfd;
    --lo-bg-input-color:        var(--lo-input-color);
    --lo-input-border-color:    var(--lo-border-color-light);
    --lo-input-border-size:     1px;
    --lo-button-border-color:   var(--lo-border-color-light);
    --lo-button-border-size:    1px;
    --lo-bg-section-color:      #e7e9ec;
    --lo-grid-header-background-color: #fbfbfc;
    --lo-grid-row-zebra-1-color: #f8f8f9;
    --lo-grid-row-zebra-2-color: #ffffff;
    --lo-grid-border-color: #dde1e7;
    --lo-grid-border-size: 1px;
    --lo-grid-content-vertical-border-size: 1px;
    --lo-grid-content-horizontal-border-size: 1px;
    --lo-grid-header-vertical-border-size: 1px;
    --lo-grid-header-horizontal-border-size: 2px;
    --lo-grid-header-text-color: var(--lo-text-color-default);
    --lo-grid-content-text-color: var(--lo-text-color);
    --lo-text-color:            #3f454d;
    --lo-text-color-reversed:   #fafbfc;
    --lo-border-color:          #d7dce3;
    --lo-primary-color:         #1e8fcd;
    --lo-highlight-text-color:  #1e8fcd;

    /* Imported custom variables */
    --lo-selection-highlight-color: color-mix(in srgb, #32aae1 20%, transparent);
    --lo-selection-highlight-color-soft: color-mix(in srgb, #32aae1 8%, transparent);
    --lo-bg-gridselect-color:   var(--lo-selection-highlight-color);
    --lo-button-focus-color:    #2aa7df;
    --lo-input-focus-border-color: var(--lo-button-focus-color);
    --lo-alert-red:             #e64b14;
    --lo-alert-yellow:          #fab432;
    --lo-alert-green:           #96c319;
    --lo-alert-blue:            #32aae1;
    --lo-text-color-default:    #2f353c;

    --lo-border-color-light:    #e5e8ed;
    --lo-border-color-dark:     #c1c7cf;

    /* Header typography */
    --lo-header-font-family:    'Open Sans', Arial, sans-serif;
    --lo-header-font-weight:    800;
    --lo-header-font-style:     italic;
    --lo-header-transform:      uppercase;
    --lo-header-size-h6:        0.9rem;

    /* Spacing */
    --lo-spacing-tiny: 2px;
    --lo-spacing-sm: 5px;
    --lo-spacing-md: 8px;
    
    /*Shadow*/
    --lo-shadow-inset: inset 0 1px 0 rgba(255,255,255,0.9),
    inset 0 -1px 2px rgba(86,94,107,0.10);
    
    --lo-border-radius: 8px;

    --lo-scrollbar-color: var(--lo-input-color);
    --lo-scrollbar-track: var(--lo-bg-color);
    --lo-scrollbar-thumb: #9aa0a8;
    --lo-scrollbar-thumb-hover: #828a94;
    --kendo-body-text: var(--lo-text-color);
}

/* Dark Mode */
[data-theme="dark"] {
    --lo-bg-color: #1b1f24;
    --lo-mainmenu-bg-color: #151a20;
    --lo-bg-color-darker: #12171e;
    --lo-input-color: #232b35;
    --lo-bg-input-color: var(--lo-input-color);
    --lo-bg-section-color: #202730;
    --lo-input-border-color: var(--lo-border-color);
    --lo-input-border-size: 1px;
    --lo-input-focus-border-color: var(--lo-button-focus-color);
    --lo-button-border-color: var(--lo-border-color);
    --lo-button-border-size: 1px;
    --lo-grid-header-background-color: #1f2731;
    --lo-grid-row-zebra-1-color: #1a222c;
    --lo-grid-row-zebra-2-color: #151c25;
    --lo-grid-border-color: #344152;
    --lo-grid-border-size: 1px;
    --lo-grid-content-vertical-border-size: 1px;
    --lo-grid-content-horizontal-border-size: 1px;
    --lo-grid-header-vertical-border-size: 1px;
    --lo-grid-header-horizontal-border-size: 2px;
    --lo-grid-header-text-color: var(--lo-text-color-default);
    --lo-grid-content-text-color: var(--lo-text-color);
    --lo-text-color: #dce6f2;
    --lo-text-color-default: #f3f8ff;
    --lo-text-color-reversed: #0f141b;
    --lo-border-color: #4b5f77;
    --lo-border-color-light: #647d9a;
    --lo-border-color-dark: #33445a;
    --lo-primary-color: #168ccf;
    --lo-highlight-text-color: #6fbae2;

    --lo-selection-highlight-color: color-mix(in srgb, #32aae1 36%, transparent);
    --lo-selection-highlight-color-soft: color-mix(in srgb, #32aae1 18%, transparent);
    --lo-bg-gridselect-color: var(--lo-selection-highlight-color);
    --lo-button-focus-color: #32aae1;

    /* Use the same four accent colors as the light template. */
    --lo-alert-red: #e64b14;
    --lo-alert-yellow: #fab432;
    --lo-alert-green: #96c319;
    --lo-alert-blue: #32aae1;

    --lo-scrollbar-color: var(--lo-input-color);
    --lo-scrollbar-track: #171d25;
    --lo-scrollbar-thumb: #5d708a;
    --lo-scrollbar-thumb-hover: #748aa8;
    --kendo-body-text: var(--lo-text-color);

}

/* Gray Mode */
[data-theme="gray"] {
    --lo-bg-color:      #e3e3e3;
    --lo-mainmenu-bg-color: #e3e3e3;
    --lo-input-color: #f0f0f0;
    --lo-bg-input-color: var(--lo-input-color);
    --lo-input-border-color: var(--lo-border-color);
    --lo-input-border-size: 1px;
    --lo-input-focus-border-color: var(--lo-button-focus-color);
    --lo-button-border-color: var(--lo-border-color);
    --lo-button-border-size: 1px;
    --lo-grid-header-background-color: #e3e3e3;
    --lo-grid-row-zebra-1-color: #e3e3e3;
    --lo-grid-row-zebra-2-color: #d9d9d9;
    --lo-grid-border-color: #bbbbbb;
    --lo-grid-border-size: 1px;
    --lo-grid-content-vertical-border-size: 1px;
    --lo-grid-content-horizontal-border-size: 1px;
    --lo-grid-header-vertical-border-size: 1px;
    --lo-grid-header-horizontal-border-size: 2px;
    --lo-grid-header-text-color: var(--lo-text-color-default);
    --lo-grid-content-text-color: var(--lo-text-color);
    --lo-text-color:    #333333;
    --lo-border-color:  #bbbbbb;
    --lo-primary-color: #888888;
}

/* Global app text color. Grid text keeps dedicated grid variables/rules. */
body {
    color: var(--lo-text-color);
}

body a,
body .btn-link {
    color: var(--lo-text-color);
}

/* Theme Utilities */
.lo-bg-primary { background-color: var(--lo-primary-color) !important; }
.lo-bg         { background-color: var(--lo-bg-color) !important; }
.lo-bg-control { background-color: var(--lo-input-color) !important; }
.lo-text       { color: var(--lo-text-color) !important; }
.lo-border     { border: solid 1px var(--lo-border-color) !important; }

/* Imported variable utilities */
.lo-bg-gridselect { background-color: var(--lo-bg-gridselect-color) !important; }
.lo-button-focus  { outline-color: var(--lo-button-focus-color) !important; }
.lo-alert-red     { color: var(--lo-alert-red) !important; }
.lo-alert-yellow  { color: var(--lo-alert-yellow) !important; }
.lo-alert-green   { color: var(--lo-alert-green) !important; }
.lo-alert-blue    { color: var(--lo-alert-blue) !important; }
.lo-text-default  { color: var(--lo-text-color-default) !important; }

.lo-border-light  { border-color: var(--lo-border-color-light) !important; }
.lo-border-dark   { border-color: var(--lo-border-color-dark) !important; }

/* Header classes */
.lo-h2, .lo-h3, .lo-h4, .lo-h5, .lo-h6 {
    color: var(--lo-text-color-default);
    font-family: var(--lo-header-font-family);
    font-weight: var(--lo-header-font-weight);
    font-style: var(--lo-header-font-style);
    text-transform: var(--lo-header-transform);
    margin: 0;
    padding-left: var(--lo-spacing-sm);
}
.lo-h6 {
    font-size: var(--lo-header-size-h6);
}
.lo-h4 {
    font-size: 1.2rem;
}

/* Layout & Flex */
.lo-d-flex { display: flex !important; }
.lo-flex-row { flex-direction: row !important; }
.lo-flex-col { flex-direction: column !important; }
.lo-flex-1 { flex: 1 !important; }
.lo-items-end { align-items: flex-end !important; }
.lo-items-center { align-items: center !important; }
.lo-justify-center { justify-content: center !important; }
.lo-d-grid   { display: grid !important; }
.lo-gap-sm   { gap: var(--lo-spacing-sm) !important; }
.lo-flex-none    { flex: 0 0 auto !important; }
.lo-justify-between { justify-content: space-between !important; }


/* Spacing Utilities */
.lo-m-0     { margin: 0 !important; }
.lo-mb-1    { margin-bottom: var(--lo-spacing-sm) !important; }
.lo-mb-md   { margin-bottom: var(--lo-spacing-md) !important; }
.lo-mb-lg   { margin-bottom: var(--lo-spacing-md) !important; }
.lo-mb-tiny { margin-bottom: var(--lo-spacing-tiny) !important; }
.lo-m-sm    { margin: var(--lo-spacing-md) !important; }
.lo-m-tiny  { margin: var(--lo-spacing-tiny) !important; }
.lo-ml-sm   { margin-left: var(--lo-spacing-sm) !important; }
.lo-ml-md   { margin-left: var(--lo-spacing-md) !important; }
.lo-mr-sm   { margin-right: var(--lo-spacing-sm) !important; }
.lo-mr-md   { margin-right: var(--lo-spacing-md) !important; }
.lo-mt-sm   { margin-top: var(--lo-spacing-sm) !important; }
.lo-mt-md   { margin-top: var(--lo-spacing-md) !important; }
.lo-mt-lg   { margin-top: var(--lo-spacing-md) !important; }
.lo-ml-auto { margin-left: auto !important; }

/* Padding Utilities */
.lo-p-0        { padding: 0 !important; }
.lo-pr-sm      { padding-right: var(--lo-spacing-sm) !important; }
.lo-pl-sm      { padding-left:  var(--lo-spacing-sm) !important; }
.lo-pr-md      { padding-right: var(--lo-spacing-md) !important; }
.lo-pl-md      { padding-left:  var(--lo-spacing-md) !important; }
.lo-p-sm       { padding: var(--lo-spacing-sm) !important; }
.lo-pt-sm       { padding-top: var(--lo-spacing-sm) !important; }

/* Sizing */
.lo-max-w-full { max-width: 100% !important; }
.lo-w-fit       { width: fit-content !important; }
.lo-w-full      { width: 100% !important; }
.lo-min-h-30    { min-height: 30px !important; }
.lo-h-full      { height: 100% !important; }
/* When lo-h-full and lo-m-tiny are combined, reduce height to account for the 2×margin
   so the element fits its parent without overflowing the bottom by 2px. */
.lo-h-full.lo-m-tiny { height: calc(100% - 2 * var(--lo-spacing-tiny)) !important; }


/* Typography */
.lo-text-small          { font-size: 0.875rem !important; }
.lo-text-tiny          { font-size: 0.7rem !important; }
.lo-font-bold           { font-weight: bold !important; }
.lo-font-mono           { font-family: 'Courier New', Courier, monospace !important; }
.lo-nowrap              { white-space: nowrap !important; }
.lo-text-truncate       { white-space: nowrap !important; text-overflow: ellipsis !important; }
.lo-text-left           { text-align: left   !important; }
.lo-text-center         { text-align: center !important; }


/* Border Radius Utilities */
.lo-rounded-sm { border-radius: var(--lo-border-radius) !important; }

/* Overflow Utilities */
.lo-overflow-x-hidden { overflow-x: hidden !important; }
.lo-overflow-hidden   { overflow: hidden !important; }


/* ----------------------------------------------------
   Global Scrollbar Styling
   ---------------------------------------------------- */

* {
    scrollbar-width: thin !important;
    scrollbar-color:
            var(--lo-scrollbar-thumb)
            var(--lo-scrollbar-track) !important;
}

/* WebKit (Chrome, Edge, Safari) */
*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

*::-webkit-scrollbar-track {
    background-color: var(--lo-scrollbar-track) !important;
}

*::-webkit-scrollbar-thumb {
    background-color: var(--lo-scrollbar-thumb) !important;
    border-radius: 6px;

    /* subtiler Inset-Look */
    box-shadow:
            inset 0 1px 2px rgba(255, 255, 255, 0.15),
            inset 0 -1px 2px rgba(0, 0, 0, 0.35);
}

*::-webkit-scrollbar-thumb:hover {
    background-color: var(--lo-scrollbar-thumb-hover) !important;
}

/* Drag/drop target highlighting for grid rows */
.logo-dropzone.logo-dropzone-active > td {
    transition: box-shadow 140ms ease, transform 140ms ease;
}

.logo-dropzone.logo-dropzone-active:hover > td {
    box-shadow: none;
}

.logo-drop-item-hover-enabled .logo-dropzone.logo-dropzone-active.logo-dropzone-hover > td {
    background-color: color-mix(in srgb, var(--lo-bg-color-darker) 65%, var(--lo-border-color-dark) 35%) !important;
    transform: translateX(2px);
    box-shadow: 0 8px 14px -10px rgba(0, 0, 0, 0.55);
}

.logo-dropzone.logo-dropzone-active.logo-dropzone-insert-before > td {
    box-shadow:
        inset 0 2px 0 0 color-mix(in srgb, var(--lo-primary-color) 70%, transparent 30%);
}

.logo-dropzone.logo-dropzone-active.logo-dropzone-insert-after > td {
    box-shadow:
        inset 0 -2px 0 0 color-mix(in srgb, var(--lo-primary-color) 70%, transparent 30%);
}

.logo-dropzone.logo-drop-insert-flash > td {
    animation: logo-drop-insert-row-flash 620ms ease-out;
}

@keyframes logo-drop-insert-row-flash {
    0% {
        box-shadow: inset 0 0 0 999px color-mix(in srgb, var(--lo-primary-color) 30%, transparent 70%);
    }

    100% {
        box-shadow: inset 0 0 0 999px transparent;
    }
}

.logo-drop-body-hover-enabled.logo-dropzonebody.logo-dropzonebody-active .logo-native-grid-scroll {
    transition: background-color 140ms ease, box-shadow 140ms ease;
}

.logo-drop-body-hover-enabled.logo-dropzonebody.logo-dropzonebody-active.logo-dropzonebody-hover .logo-native-grid-scroll {
    background-color: color-mix(in srgb, var(--lo-bg-color-darker) 58%, var(--lo-border-color-dark) 42%);
}

/* Keep zebra rows unchanged while body area is darkened. */
.logo-drop-body-hover-enabled.logo-dropzonebody.logo-dropzonebody-active.logo-dropzonebody-hover .logo-native-grid-table tbody > tr:nth-child(odd):not(.logo-selected):not(.logo-native-detail-row) > td {
    background-color: var(--lo-grid-row-zebra-1-color) !important;
}

.logo-drop-body-hover-enabled.logo-dropzonebody.logo-dropzonebody-active.logo-dropzonebody-hover .logo-native-grid-table tbody > tr:nth-child(even):not(.logo-selected):not(.logo-native-detail-row) > td {
    background-color: var(--lo-grid-row-zebra-2-color) !important;
}

.logo-drop-body-hover-enabled.logo-dropzonebody.logo-dropzonebody-active.logo-dropzonebody-hover .logo-native-grid-table tbody > tr.logo-native-detail-row.logo-row-zebra-1 > td {
    background-color: var(--lo-grid-row-zebra-1-color) !important;
}

.logo-drop-body-hover-enabled.logo-dropzonebody.logo-dropzonebody-active.logo-dropzonebody-hover .logo-native-grid-table tbody > tr.logo-native-detail-row.logo-row-zebra-2 > td {
    background-color: var(--lo-grid-row-zebra-2-color) !important;
}

.logo-drop-body-hover-enabled.logo-dropzonebody.logo-dropzonebody-active.logo-dropzonebody-hover .logo-native-grid-scroll {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lo-border-color-dark) 70%, transparent 30%);
}

[data-theme="dark"] .logo-drop-item-hover-enabled .logo-dropzone.logo-dropzone-active.logo-dropzone-hover > td {
    background-color: color-mix(in srgb, var(--lo-bg-color-darker) 84%, var(--lo-text-color-reversed) 16%) !important;
}

[data-theme="dark"] .logo-dropzone.logo-dropzone-active.logo-dropzone-insert-before > td {
    box-shadow: inset 0 2px 0 0 color-mix(in srgb, var(--lo-primary-color) 76%, transparent 24%);
}

[data-theme="dark"] .logo-dropzone.logo-dropzone-active.logo-dropzone-insert-after > td {
    box-shadow: inset 0 -2px 0 0 color-mix(in srgb, var(--lo-primary-color) 76%, transparent 24%);
}

[data-theme="dark"] .logo-drop-body-hover-enabled.logo-dropzonebody.logo-dropzonebody-active.logo-dropzonebody-hover .logo-native-grid-scroll {
    background-color: color-mix(in srgb, var(--lo-bg-color-darker) 82%, var(--lo-text-color-reversed) 18%);
}

/* Zentrales Highlight fuer Form-Inputs und andere FormItem-Inhalte. */
.lo-input-highlight {
    position: relative;
    width: fit-content;
    max-width: 100%;
    border-radius: calc(var(--lo-border-radius) - 6px);
}

.lo-input-highlight::before {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    border-radius: inherit;
    background: color-mix(in srgb, var(--lo-primary-color) 14%, transparent);
    pointer-events: none;
}

/* ============================================================
   Native Inputs - gemeinsames Fokus-/Validierungs-Highlighting
   ============================================================
   Alle Native Inputs (NativeLogoInputs) tragen die Marker-Klasse
   .logo-native-input am Container und .logo-native-input__control
   am rahmentragenden Element (Feld bzw. Chrome). Die Regeln hier
   sind die einzige Quelle fuer Fokus- und Validierungsrahmen,
   damit sich das Verhalten der Inputs nicht auseinanderentwickelt.

   Prioritaet: Validierung (rot/gelb) gewinnt ueber Fokus (blau). */

/* Der Fokusrahmen wird ueber :focus-within am Container gezeichnet;
   eine Outline auf dem Feld selbst wuerde durch overflow:hidden abgeschnitten. */
.logo-native-input .logo-native-input__control:focus,
.logo-native-input .logo-native-input__control:focus-within {
    outline: none;
}

.logo-native-input .logo-native-input__control[readonly],
.logo-native-input .logo-native-input__control [readonly] {
    pointer-events: none;
}

.logo-native-input.input-invalid .logo-native-input__control {
    border-color: var(--lo-alert-red);
    box-shadow: none;
}

.logo-native-input.input-invalid {
    box-shadow: 0 0 1px var(--lo-alert-red);
    border-radius: calc(var(--lo-border-radius) - 6px);
}

.logo-native-input.input-warning .logo-native-input__control {
    border-color: var(--lo-alert-yellow);
    box-shadow: none;
}

.logo-native-input.input-warning {
    box-shadow: 0 0 1px var(--lo-alert-yellow);
    border-radius: calc(var(--lo-border-radius) - 6px);
}

/* Fokus-Highlight nur ohne Validierungszustand, damit Fehler/Warnung sichtbar bleiben. */
.logo-native-input:not(.input-invalid):not(.input-warning):focus-within .logo-native-input__control {
    border-color: var(--lo-input-focus-border-color);
}

.logo-native-input:not(.input-invalid):not(.input-warning):focus-within {
    box-shadow: 0 0 1px var(--lo-input-focus-border-color);
    border-radius: calc(var(--lo-border-radius) - 6px);
}

/* Blendet einen Native Input samt Label komplett aus, ohne seinen Platz im
   Formular-Layout freizugeben (visibility statt display, damit nichts verrutscht).
   Wird zentral ueber den Hidden-Parameter der NativeInputComponentBase gesetzt. */
.logo-native-input-hidden {
    visibility: hidden;
}

/* Der Grid-Wrapper ist ein regulaerer Tab-Stopp; der native Fokusring wird
    durch die einheitliche Grid-Umrandung darunter ersetzt. */
.logo-native-grid-wrapper:focus {
    outline: none;
}

/* Markiert das per Tab fokussierte Grid im gleichen Fokus-Stil wie die
    NativeInputs (blaue Umrandung). */
.logo-native-grid-wrapper.logo-shortcut-grid-focus {
    outline: 1px solid var(--lo-input-focus-border-color);
    outline-offset: -1px;
    box-shadow: 0 0 1px var(--lo-input-focus-border-color);
    border-radius: 2px;
}

/* Gemeinsamer Clear-Button (InputUtilityClearButton): nie tabbbar, einheitliche Optik.
   Overlay-Variante liegt absolut ueber dem Feld (Text/Numeric),
   Inline-Variante ist eine Grid-Zelle im Chrome (Date/Time/DateRange). */
.logo-native-input__clear {
    border: none;
    background: transparent;
    color: var(--lo-text-color);
    cursor: pointer;
    padding: 0;
}

.logo-native-input__clear:hover {
    color: var(--lo-text-color);
}

.logo-native-input__clear--overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    right: var(--lo-spacing-md);
    display: flex;
    align-items: center;
    font-size: 0.95rem;
    line-height: 1;
}

.logo-native-input__clear--inline {
    min-height: 100%;
    min-width: 18px;
}