/* ============================================================
   NuSystem Design System
   Adapted from polster-fischer.de brand aesthetic:
   Warm, clean, generous whitespace, upscale-approachable
   ============================================================ */

:root {
    /* Spacing - generous like polster-fischer.de */
    --nu-space-xs: 4px;
    --nu-space-sm: 8px;
    --nu-space-md: 16px;
    --nu-space-lg: 24px;
    --nu-space-xl: 40px;
    /* Radius - 5px buttons, 10px cards (matching polster-fischer.de) */
    --nu-radius-sm: 5px;
    --nu-radius-md: 10px;
    /* #6625: Unified readonly/disabled background */
    --nu-readonly-bg: #e9ecef;
    /* Shadows - subtle like polster-fischer.de */
    --nu-shadow-sm: 1px 1px 3px rgba(0,0,0,0.08);
    --nu-shadow-md: 2px 2px 5px rgba(0,0,0,0.12);
    --nu-shadow-lg: 2px 4px 12px rgba(0,0,0,0.15);
    /* Colors - warm palette from polster-fischer.de */
    --nu-bg-surface: #f5f5f3;
    --nu-bg-card: #ffffff;
    --nu-text-primary: #383838;
    --nu-text-secondary: #525252;
    --nu-text-muted: #888;
    --nu-border-color: #e3e3e3;
    --nu-bg-muted: #ececec;
    /* Layout */
    --nu-sidebar-width: 230px;
    --nu-sidebar-collapsed-width: 60px;
    --nu-topbar-height: 56px;
    /* Transitions */
    --nu-transition: 0.2s ease;
}

/* ---- Global ---- */
body {
    height: 100%;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    background: var(--nu-bg-surface);
    color: var(--nu-text-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 14px;
    line-height: 1.5;
}

/* ============================================================
   Topbar - clean white, warm border
   ============================================================ */
.nu-topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    background: var(--nu-bg-card);
    height: var(--nu-topbar-height);
    padding: 0 20px;
    border-bottom: 1px solid var(--nu-border-color);
    /* AB#7587: GPU-Layer erzwingen gegen Subpixel-Flicker beim Scrollen (Chrome/Windows) */
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}

.nu-menu-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: none;
    background: transparent;
    border-radius: var(--nu-radius-sm);
    cursor: pointer;
    margin-right: var(--nu-space-sm);
    transition: background var(--nu-transition);
    flex-shrink: 0;
}

.nu-menu-toggle:hover {
    background: var(--nu-bg-muted);
}

.nu-menu-toggle svg {
    width: 20px;
    height: 20px;
    stroke: var(--nu-text-primary);
}

.nu-logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.nu-logo img {
    height: 36px;
    width: auto;
}

.nu-topbar-spacer {
    flex: 1;
}

#nu-alert {
    width: 60%;
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
    top: 5px;
    margin: auto;
}

.nu-topbar-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    color: var(--nu-text-secondary);
}

.nu-topbar-actions a {
    color: var(--nu-text-primary);
    text-decoration: none;
    font-weight: 500;
    transition: color var(--nu-transition);
}

.nu-topbar-actions a:hover {
    color: var(--nu-bg-color);
}

.nu-topbar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    min-width: 0 !important;
    border: none !important;
    border-radius: var(--nu-radius-sm) !important;
    background: var(--nu-bg-color) !important;
    color: var(--nu-fg-color) !important;
    cursor: pointer;
    transition: opacity var(--nu-transition);
}

.nu-topbar-btn:hover {
    opacity: 0.85;
}

/* #6598: Hide button text so icon renders alone */
.nu-topbar-btn .k-button-text {
    display: none;
}

.nu-topbar-btn .k-icon,
.nu-topbar-btn .k-font-icon,
.nu-topbar-btn .k-svg-icon {
    font-size: 15px;
    color: inherit !important;
}

.nu-topbar-btn .k-svg-icon svg {
    width: 16px;
    height: 16px;
    fill: var(--nu-fg-color) !important;
}

/* ============================================================
   Sidebar - warm white, clean lines
   ============================================================ */
.nu-sidebar {
    position: fixed;
    top: var(--nu-topbar-height);
    bottom: 0;
    left: 0;
    z-index: 90;
    width: var(--nu-sidebar-width);
    background: var(--nu-bg-card);
    border-right: 1px solid var(--nu-border-color);
    overflow-x: hidden;
    transition: transform 0.25s ease, width 0.25s ease;
    display: flex;
    flex-direction: column;
}

.nu-sidebar-nav {
    list-style: none;
    padding: var(--nu-space-sm) 0;
    margin: 0;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

.nu-sidebar-item {
    margin: 1px 8px;
}

.nu-sidebar-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    min-height: 42px;
    border-radius: var(--nu-radius-sm);
    color: var(--nu-text-primary);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: background var(--nu-transition), color var(--nu-transition);
    cursor: pointer;
}

.nu-sidebar-link:hover {
    background: var(--nu-bg-muted);
    color: var(--nu-text-primary);
    text-decoration: none;
}

.nu-sidebar-link.active {
    background: color-mix(in srgb, var(--nu-bg-color) 10%, transparent);
    color: var(--nu-bg-color);
}

.nu-sidebar-icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    filter: brightness(0);
}

.nu-sidebar-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Submenu */
.nu-sidebar-submenu {
    list-style: none;
    padding: 0;
    margin: 0 0 0 22px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
}

.nu-sidebar-item.open > .nu-sidebar-submenu {
    max-height: 500px;
}

.nu-sidebar-submenu .nu-sidebar-link {
    font-size: 13px;
    min-height: 36px;
    padding: 4px 14px;
    color: var(--nu-text-secondary);
}

.nu-sidebar-submenu .nu-sidebar-link:hover {
    color: var(--nu-text-primary);
    background: var(--nu-bg-muted);
}

.nu-sidebar-toggle-icon {
    margin-left: auto;
    width: 14px;
    height: 14px;
    transition: transform 0.15s ease;
    flex-shrink: 0;
    opacity: 0.4;
}

.nu-sidebar-item.open > .nu-sidebar-link .nu-sidebar-toggle-icon {
    transform: rotate(90deg);
}

/* Backdrop */
.nu-sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 89;
    background: rgba(0,0,0,0.2);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.nu-sidebar-backdrop.open {
    display: block;
    opacity: 1;
}

/* Sidebar collapse toggle button */
.nu-sidebar-collapse-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 34px;
    border: none;
    border-top: 1px solid var(--nu-border-color);
    background: transparent;
    color: var(--nu-text-muted);
    cursor: pointer;
    transition: background var(--nu-transition);
    margin-top: auto;
    flex-shrink: 0;
}

.nu-sidebar-collapse-btn:hover {
    background: var(--nu-bg-muted);
}

.nu-sidebar-collapse-icon {
    width: 16px;
    height: 16px;
    transition: transform 0.25s ease;
}

/* Collapsed sidebar state */
body.nu-sidebar-collapsed .nu-sidebar {
    width: var(--nu-sidebar-collapsed-width);
}

body.nu-sidebar-collapsed .nu-sidebar-label,
body.nu-sidebar-collapsed .nu-sidebar-toggle-icon {
    display: none;
}

body.nu-sidebar-collapsed .nu-sidebar-link {
    justify-content: center;
    padding: 8px 0;
    gap: 0;
}

body.nu-sidebar-collapsed .nu-sidebar-submenu {
    display: none;
}

body.nu-sidebar-collapsed .nu-sidebar-collapse-icon {
    transform: rotate(180deg);
}

body.nu-sidebar-collapsed .nu-content {
    margin-left: var(--nu-sidebar-collapsed-width);
}

/* ============================================================
   Sidebar flyout panel (collapsed mode submenu popup)
   Appears to the right of the collapsed sidebar icon strip.
   ============================================================ */
.nu-sidebar-flyout {
    position: fixed;
    z-index: 200;
    left: var(--nu-sidebar-collapsed-width);
    min-width: 190px;
    max-width: 260px;
    background: var(--nu-bg-card);
    border: 1px solid var(--nu-border-color);
    border-radius: var(--nu-radius-md);
    box-shadow: var(--nu-shadow-lg);
    padding: 4px 0;
    list-style: none;
    /* Slide in from the left */
    animation: nu-flyout-in 0.15s ease;
}

@keyframes nu-flyout-in {
    from {
        opacity: 0;
        transform: translateX(-6px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.nu-sidebar-flyout-header {
    padding: 6px 14px 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--nu-text-muted);
    border-bottom: 1px solid var(--nu-border-color);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nu-sidebar-flyout .nu-sidebar-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 500;
    color: var(--nu-text-primary);
    text-decoration: none;
    white-space: nowrap;
    border-radius: 0;
    min-height: unset;
    transition: background var(--nu-transition), color var(--nu-transition);
}

.nu-sidebar-flyout .nu-sidebar-link:hover {
    background: var(--nu-bg-muted);
    color: var(--nu-text-primary);
    text-decoration: none;
}

/* Override collapsed-sidebar rules that hide text inside the flyout.
   The flyout is appended to <body> and inherits body.nu-sidebar-collapsed
   selectors, so we must explicitly restore visibility for labels and
   correct the link layout so items render as in the expanded state. */
body.nu-sidebar-collapsed .nu-sidebar-flyout .nu-sidebar-label,
body.nu-sidebar-collapsed .nu-sidebar-flyout .nu-sidebar-toggle-icon {
    display: inline !important;
}

body.nu-sidebar-collapsed .nu-sidebar-flyout .nu-sidebar-link {
    justify-content: flex-start !important;
    padding: 7px 14px !important;
    gap: 8px !important;
}

/* ============================================================
   Content area - flush layout, no padding (#6610 + #6600)
   Grid fills container edge-to-edge. Padding only on form areas.
   ============================================================ */
.nu-content {
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0 0 0 var(--nu-sidebar-width);
    min-height: calc(100vh - var(--nu-topbar-height));
    background: var(--nu-bg-card);
    border-radius: 0;
    box-shadow: none;
    transition: margin-left 0.25s ease;
    /* #8131 (reworked 2026-07-21 — Michael rejected the overflow-x: hidden
       variant in TEST: it stopped the sidebar/content shift but also clipped
       wide grids with no way to reach the cut-off columns, e.g. the
       Artikelstamm search with 200 results).
       A wide Kendo Grid (Address, Project, OrderPosition, MaterialItem,
       Artikelstamm, ...) can escape .nu-content's box and inflate the
       document's scrollWidth. Because .nu-sidebar is position:fixed (anchored
       to the viewport) while .nu-content sits in normal document flow, that
       document-level horizontal scroll visually shifts the whole content
       column (title/toolbar/breadcrumb included) away from the stationary
       sidebar. overflow-x: auto (instead of hidden) still contains the escape
       at this boundary — the document itself never grows, so the sidebar
       never shifts — but now surfaces .nu-content's own horizontal scrollbar
       instead of silently clipping, so the cut-off columns stay reachable. */
    overflow-x: auto;
}

/* Remove all Bootstrap container-fluid padding — grids + headers fill edge-to-edge */
.nu-content .container-fluid {
    flex: 1;
    padding-left: 0;
    padding-right: 0;
    /* #8131: flex items default to a content-based automatic min-width, which
       lets a wide grid force this flex item (and everything above it) wider
       than the viewport instead of shrinking to the available space. That
       growth is what .nu-content's overflow-x: auto above needs to contain
       — without min-width: 0 here, this container never sees its real
       (viewport-constrained) width, so .nu-content's overflow-x: auto has
       nothing to measure against and never surfaces its own scrollbar.
       (Confirmed 2026-07-21: this view's Kendo Grid is not itself in
       Scrollable()/fixed-Height() mode — no .k-grid-content wrapper — so the
       reachable scrollbar is .nu-content's, not an internal Kendo one.) */
    min-width: 0;
}

/* #6628: Reduce form/search row spacing from 16px (Bootstrap mb-3) to 13px */
.row.g-0.mb-3 {
    margin-bottom: 13px !important;
}

/* Grid wrapper row: remove Bootstrap .row negative margins + .col padding
   so the grid stretches the full width without gaps */
.nu-content > .container-fluid > .container-fluid > .row {
    margin-left: 0;
    margin-right: 0;
}

.nu-content > .container-fluid > .container-fluid > .row > [class*="col-"] {
    padding-left: 0;
    padding-right: 0;
}

/* Home page: TabStrip content fills width, no gaps */
.nu-content .k-tabstrip-content,
.nu-content .k-tabstrip > .k-content {
    padding: 0;
}

/* Add padding to form areas so fields aren't flush against edges */
.nu-content #nu-search,
.nu-content .nu-details-panelitem-content,
.nu-content .buttons-wrap,
.nu-content #nu-chatter-form,
.nu-content > .container-fluid > .container-fluid > h4 {
    padding-left: 16px;
    padding-right: 16px;
}

/* Search criteria summary bar (shown after search, form collapsed) */
#nu-search-summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    background: var(--nu-bg-surface);
    border-bottom: 1px solid var(--nu-border-color);
    font-size: 13px;
    color: var(--nu-text-primary);
}

#nu-search-summary-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nu-search-criterion {
    display: inline;
}

.nu-search-criterion-label {
    font-weight: 600;
}

.nu-search-criterion-separator {
    color: var(--nu-text-muted);
    margin: 0 6px;
}

.nu-search-summary-toggle {
    flex-shrink: 0;
    background: none;
    border: 1px solid var(--nu-border-color);
    border-radius: var(--nu-radius-sm);
    padding: 4px 12px;
    cursor: pointer;
    font-size: 13px;
    white-space: nowrap;
    color: var(--nu-text-secondary);
    transition: background var(--nu-transition);
}

.nu-search-summary-toggle:hover {
    background: var(--nu-bg-muted);
}

/* #6626: Search form - spacing, gray background, visual separation */
#nu-search {
    padding-top: var(--nu-space-md);
    padding-bottom: var(--nu-space-sm);
    background-color: var(--nu-bg-surface);
}

/* #6618: Welcome text left-aligned with proper spacing */
.nu-welcome-text {
    text-align: left;
    font-family: Arial, sans-serif;
    padding: 10px 16px;
}

.nu-window {
    background-color: var(--nu-bg-card);
    padding: 20px;
    height: 100%;
    width: 100%;
}

.nu-footer {
    height: 34px;
    margin-top: auto;
    padding-left: var(--nu-space-md);
    color: var(--nu-text-muted);
    font-size: 12px;
}

/* ============================================================
   Detail header - brand colored, top-rounded matching card
   ============================================================ */
.nu-detailheader {
    background-color: var(--nu-bg-color);
    padding: 10px 12px 10px 16px;
    margin: 0;
    font-weight: 600;
    font-size: 16px;
    color: var(--nu-fg-color);
}

.nu-detailheader-link,
.nu-detailheader-link:hover,
.nu-detailheader-link:visited,
.nu-detailheader-link:active {
    color: inherit;
    text-decoration: none;
    font-weight: inherit;
    font-size: inherit;
}

.nu-parent {
    background-color: #3e3d40;
    padding: 4px 4px 4px 12px;
    margin: 0;
    font-size: 15px;
    color: #fff;
}

.nu-parent > a {
    color: #fff;
    font-size: 15px;
}

.nu-toolbar {
    margin: 0;
}

.nu-modal-container .nu-toolbar {
    margin-top: 0px;
}

.nu-details-panelitem-content {
    margin: 0 15px 0 0;
}

/* ============================================================
   Inputs & form controls — #6606: consistent borders and background
   ============================================================ */
.k-input,
.k-picker,
.k-numerictextbox,
.k-multiselect,
.k-datepicker,
.k-dropdownlist,
.k-combobox {
    border: 1px solid var(--nu-border-color) !important;
    border-radius: var(--nu-radius-sm);
    transition: border-color var(--nu-transition);
    background-color: #fafaf9;
}

.k-input-inner {
    background-color: transparent;
}

/* #6625: Square picker/numeric icon buttons (not rounded) */
.k-datepicker .k-input-button,
.k-datetimepicker .k-input-button,
.k-timepicker .k-input-button,
.k-numerictextbox .k-button {
    border-radius: 0 !important;
}

/* #6625: Consistent control height in detail forms */
.nu-details-panelitem-content .k-input:not(.k-multiselect):not(.k-editor),
.nu-details-panelitem-content .k-picker,
.nu-details-panelitem-content input.form-control {
    height: 36px !important;
    min-height: 36px !important;
}

input:hover,
.k-input:hover,
.k-picker:hover,
.k-numerictextbox:hover,
.k-multiselect:hover,
.k-datepicker:hover {
    border-color: #ccc;
}

.form-control:focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--nu-bg-color) 15%, transparent) !important;
    border-color: var(--nu-bg-color) !important;
}

.k-picker-wrap > .k-select,
.k-numeric-wrap > .k-select {
    border-left: 1px solid var(--nu-border-color) !important;
}

.datepicker {
    border-radius: var(--nu-radius-sm);
}

.k-upload {
    border: 1px solid var(--nu-border-color) !important;
    border-radius: var(--nu-radius-sm);
}

input[type='file'] {
    color: transparent;
}

.nu-lookup-input {
    background-color: #f5f5f5 !important;
}

/* #7538 follow-up: Read-only Email/URL fields render as <a class="nu-data-link"> instead of
   <input disabled>. Bootstrap's .form-control[readonly]/:disabled rule does NOT match anchors,
   so the link kept Bootstrap's white default while sibling readonly inputs (e.g. Land lookup,
   disabled text fields) use the unified gray. Apply the same readonly background to align. */
a.nu-data-link.form-control {
    background-color: var(--nu-readonly-bg);
}

.nu-lookup-btn-search {
    height: 38px !important;
    width: 38px !important;
    border-bottom: 1px solid var(--nu-border-color) !important;
    border-top: 1px solid var(--nu-border-color) !important;
    border-left: 1px solid var(--nu-border-color) !important;
    border-bottom-left-radius: 0px !important;
    border-top-left-radius: 0px !important;
    transition: background var(--nu-transition);
}

.nu-lookup-btn-search:hover {
    background-color: var(--nu-bg-color);
    color: var(--nu-fg-color);
}

.nu-lookup-btn-clear {
    height: 38px !important;
    width: 38px !important;
    border: 1px solid var(--nu-border-color) !important;
    border-bottom-right-radius: var(--nu-radius-sm) !important;
    border-top-right-radius: var(--nu-radius-sm) !important;
    transition: background var(--nu-transition);
}

.nu-lookup-btn-clear:hover {
    background-color: var(--nu-bg-color);
    color: var(--nu-fg-color);
}

.nu-search-field {
    height: 36px !important;
    max-height: 36px !important;
    margin: 0;
    padding: 6px 12px;
}

/* #7478: Suchfelder konfigurieren — abgewaehlte Felder komplett ausblenden.
   Wir verwenden eine CSS-Klasse mit !important statt jQuery.hide() (inline style),
   damit weder Bootstrap-Grid-Regeln noch Kendo-Widget-CSS eine teilweise
   Darstellung (nur Label oder nur Input, "grau hinterlegt") erzeugen koennen.
   Das Entfernen aus dem Flow laesst Bootstrap/Flex die verbleibenden Felder
   nahtlos nach oben links zusammenruecken. */
.nu-search-field-wrap.nu-search-field-hidden,
.nu-search-field-wrap.nu-search-field-hidden * {
    display: none !important;
}

#nu-search .k-input,
#nu-search .k-picker,
#nu-search .k-dropdown,
#nu-search .k-datepicker,
#nu-search .k-numerictextbox {
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
}

/* #6634 / #7544: MultiSelect in der Suche -- exakt 36px Hoehe wie alle
   anderen Suchfelder, wenn nur eine Zeile (= 0 oder 1 Chip). Erlaubt
   Multi-Line-Expansion bei mehr Chips (height: auto, max-height: none).
   Wichtig: padding/margin = 0, damit der Wrap exakt 36px ergibt; das
   innere .k-chip-list bringt sein eigenes Padding mit. */
#nu-search .k-multiselect {
    min-height: 36px !important;
    height: auto !important;
    max-height: none !important;
    padding: 0 !important;
    margin-top: 0 !important;
    box-sizing: border-box !important;
}

#nu-search .k-multiselect .k-input-values,
#nu-search .k-multiselect .k-chip-list {
    min-height: 34px;
    padding: 2px 4px !important;
    align-items: center;
}

#nu-search .row {
    align-items: center;
}

input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: searchfield-cancel-button;
}

.col-form-label {
    text-align: right;
    padding-right: 20px;
    font-weight: 500;
    color: var(--nu-text-secondary);
    font-size: 14px;
}

/* ============================================================
   Buttons - 5px radius, #ececec default (polster-fischer.de)
   ============================================================ */
.k-button {
    align-self: center;
    align-content: center;
    align-items: center;
    border-radius: var(--nu-radius-sm);
    transition: background var(--nu-transition), color var(--nu-transition);
}

.k-button-icon {
    align-items: center;
}

.k-image {
    align-self: center;
}

.buttons-wrap {
    text-align: right;
    margin-bottom: var(--nu-space-sm);
}

/* #6676: Search field chooser button */
.nu-search-field-chooser {
    padding: 0 var(--nu-space-md) var(--nu-space-sm);
}

/* #6676: Field chooser dialog checkbox list */
.nu-field-chooser-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 0;
}

.nu-field-chooser-item {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
}

.nu-field-chooser-item:hover {
    background-color: var(--nu-bg-hover, #f0f0f0);
}

.nu-field-chooser-item input[type="checkbox"],
#nu-search input[type="checkbox"] {
    accent-color: var(--nu-bg-color);
}

/* #6626: Search form button area - visual separator */
#nu-search .buttons-wrap {
    padding-top: var(--nu-space-sm);
    margin-top: var(--nu-space-sm);
    border-top: 1px solid var(--nu-border-color);
}

/* #6626: Search button - primary appearance */
#nu-search .k-button.k-primary,
#nu-search .k-button-solid-primary {
    background-color: var(--nu-bg-color);
    color: var(--nu-fg-color);
    border-color: var(--nu-bg-color);
    font-weight: 600;
}

#nu-search .k-button.k-primary:hover,
#nu-search .k-button-solid-primary:hover {
    opacity: 0.85;
}

/* #6626: Search input clear button */
#nu-search .k-clear-value {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.nu-grid-button {
    height: 26px;
    width: 26px;
    margin: 0;
    padding: 0;
    border-radius: var(--nu-radius-sm) !important;
    min-width: 0px !important;
    background-color: var(--nu-bg-color) !important;
    color: var(--nu-fg-color) !important;
    border-color: var(--nu-bg-color) !important;
    transition: opacity var(--nu-transition);
}

.nu-grid-button:hover {
    color: var(--nu-fg-color) !important;
    background: var(--nu-bg-color) !important;
    opacity: 0.85;
}

.nu-grid-button .k-icon,
.nu-grid-button .k-font-icon,
.nu-grid-button .k-svg-icon,
.nu-grid-button .k-button-icon {
    font-size: 14px;
    opacity: 1;
    margin: 0;
    padding: 0;
    text-align: center;
    user-select: none;
    color: var(--nu-fg-color) !important;
}

.nu-grid-button .k-svg-icon svg,
.nu-grid-button .k-svg-icon svg * {
    fill: var(--nu-fg-color) !important;
}

.nu-grid-button .k-button-text {
    display: none;
}

/* Kendo 2025.3: .IconClass() on grid column commands does not apply
   icon classes to the icon span. Inject icons via CSS using title attr.
   All selectors scoped to .nu-grid-button so they never match built-in
   command buttons (Edit, Destroy) which carry their own native SVG. */

/* custom | glyph trash | _NuGrid ShowDeleteButton */
.nu-grid-button[title="Löschen"] .k-button-icon::before {
    content: "\e10c";
    font-family: "WebComponentsIcons";
}

/* custom | glyph plus | _NuGrid BatchEdit "Neue Zeile einfügen" */
.nu-grid-button[title="Neue Zeile einfügen"] .k-button-icon::before {
    content: "\e11e";
    font-family: "WebComponentsIcons";
}

/* custom | glyph open-newtab | _NuGrid "Im neuen Tab öffnen" */
.nu-grid-button[title="Im neuen Tab öffnen"] .k-button-icon::before {
    content: "\e134";
    font-family: "WebComponentsIcons";
}

/* built-in | command.Edit() | ACCEPT native pencil SVG — no injection needed.
   Kendo 2025.3 command.Edit() always renders a native <span class="k-button-icon
   k-svg-icon"><svg class="k-svg-i-pencil"></svg></span>. Injecting ::before here
   would produce a second pencil. The old :not(.k-svg-icon) guard has been removed
   entirely; we rely on the native SVG alone. */

/* Toolbar: "Spalten zurücksetzen" icon via CSS (k-i-reset-sm = \e105).
   .IconClass() on toolbar buttons is intercepted by Kendo 2025.3 JS
   which strips k-i-xxx and attempts broken SVG rendering.
   Selector scoped to .k-grid-toolbar: this button is always rendered via
   _NuGrid toolbar.Custom() inside a grid toolbar, never in a detail-form
   toolbar. It does NOT carry nu-toolbar-button (no class= in HtmlAttributes). */
/* custom | glyph reset | _NuGrid "Spalten zurücksetzen" */
.k-grid-toolbar button[title="Spalten zurücksetzen"] .k-button-icon::before {
    content: "\e105";
    font-family: "WebComponentsIcons";
}

/* Toolbar buttons from EntityDefinition.xml / UIButton.FromUIAction():
   .IconClass("k-font-icon k-i-xxx") is intercepted by Kendo 2025.3 JS
   which strips k-i-xxx and attempts broken SVG rendering.
   Inject icons via CSS using .nu-toolbar-button title attribute selectors.
   These buttons always carry class="nu-toolbar-button" via UIButton.FromUIAction(). */

/* custom | glyph file-pdf | EntityDefinition ToolbarButton "PDF erstellen" */
.nu-toolbar-button[title="PDF erstellen"] .k-button-icon::before {
    content: "\e90e";
    font-family: "WebComponentsIcons";
}
/* custom | glyph pencil | EntityDefinition ToolbarButton "neu/bearbeiten" */
.nu-toolbar-button[title="neu/bearbeiten"] .k-button-icon::before {
    content: "\e678";
    font-family: "WebComponentsIcons";
}
/* custom | glyph plus | ListValues/TypeEdit.cshtml toolbar.Custom "Neu" (carries nu-toolbar-button explicitly) */
.nu-toolbar-button[title="Neu"] .k-button-icon::before {
    content: "\e11e";
    font-family: "WebComponentsIcons";
}
/* custom | glyph plus | _NuGrid.cshtml toolbar.Custom "Neu" + BatchEdit.cshtml toolbar.Custom "Neu"
   These buttons sit in .k-grid-toolbar but do NOT carry nu-toolbar-button — scoped to the toolbar container. */
.k-grid-toolbar button[title="Neu"] .k-button-icon::before {
    content: "\e11e";
    font-family: "WebComponentsIcons";
}

/* built-in + custom | glyph trash | Settings/Index.cshtml command.Destroy()
   with title="Entfernen" (Settings grid is the sole consumer of this title).
   command.Destroy() is a built-in that renders a native SVG "x" icon; the
   svg-hide companion is mandatory so only the injected trash glyph shows.
   Scoped to .nu-grid-button so it cannot match any unrelated Destroy button
   that does not carry that class. */
.nu-grid-button[title="Entfernen"] .k-button-icon svg {
    display: none;
}
.nu-grid-button[title="Entfernen"] .k-button-icon::before {
    content: "\e10c";
    font-family: "WebComponentsIcons";
}

/* custom | glyph trash | #7723 DependentProjects grid "Zuordnung entfernen" */
.nu-grid-button[title="Zuordnung entfernen"] .k-button-icon::before {
    content: "\e10c";
    font-family: "WebComponentsIcons";
}

/* built-in: svg-hide + inject pair | glyph file-excel | #6835 toolbar.Excel()
   toolbar.Excel() is a built-in that renders a native SVG span (.k-button-icon.k-svg-icon).
   We hide the native <svg> child and inject the font glyph via ::before so only one
   icon shows. Scoped to .k-grid-excel which Kendo places on that specific toolbar cell. */
.k-grid-excel .k-svg-icon svg,
.k-grid-excel .k-button-icon svg {
    display: none;
}
.k-grid-excel .k-svg-icon::before,
.k-grid-excel .k-button-icon::before {
    content: "\e90a";
    font-family: "WebComponentsIcons";
    font-size: 16px;
    display: inline-block;
}

.nu-grid-button-secondary {
    background-color: #3e3d40 !important;
    border-color: #3e3d40 !important;
}

/* Ensure icons on the dark "secondary" grid button (e.g. "Im neuen Tab öffnen")
   are readable on the dark #3e3d40 background. Overrides the default
   .nu-grid-button .k-*-icon { color: var(--nu-fg-color) } above, which can be
   near-black depending on the consumer app's brand (e.g. NuLight: #19272c). */
.nu-grid-button-secondary .k-icon,
.nu-grid-button-secondary .k-font-icon,
.nu-grid-button-secondary .k-svg-icon,
.nu-grid-button-secondary .k-button-icon {
    color: #ffffff !important;
}

.nu-grid-button-secondary .k-svg-icon svg,
.nu-grid-button-secondary .k-svg-icon svg * {
    fill: #ffffff !important;
}

.nu-grid-delete {
    height: 24px;
    width: 24px;
    margin: 0;
    padding: 0;
}

.k-grid tbody .k-button {
    min-width: 24px;
}

/* #6603 + #6611 + #6625: toolbar buttons — icon + text, matching grid toolbar style */
.nu-toolbar-button {
    padding: 4px 10px;
    margin: 0;
    min-width: 0 !important;
    color: var(--nu-fg-color) !important;
    background-color: var(--nu-bg-color) !important;
    border: none !important;
    border-color: transparent !important;
    border-radius: var(--nu-radius-sm) !important;
    transition: opacity var(--nu-transition);
}

.nu-toolbar-button .k-button-text {
    color: inherit;
}

.nu-toolbar-button .k-icon,
.nu-toolbar-button .k-font-icon,
.nu-toolbar-button .k-svg-icon,
.nu-toolbar-button .k-button-icon {
    font-size: 16px;
    opacity: 1;
    color: var(--nu-fg-color) !important;
}

.nu-toolbar-button .k-svg-icon svg,
.nu-toolbar-button .k-svg-icon svg * {
    fill: var(--nu-fg-color) !important;
    width: 16px;
    height: 16px;
}

.nu-toolbar-button:hover {
    background-color: var(--nu-bg-color) !important;
    color: var(--nu-fg-color) !important;
    opacity: 0.85;
}

.k-toolbar .k-button.k-button-solid.nu-toolbar-button.nu-toolbar-expandbutton,
.k-toolbar .k-button.k-button-solid.nu-toolbar-button.nu-toolbar-expandbutton:hover,
.k-button.k-button-solid.k-button-solid-base.nu-toolbar-button.nu-toolbar-expandbutton,
.k-button.k-button-solid.k-button-solid-base.nu-toolbar-button.nu-toolbar-expandbutton:hover {
    background-color: #3e3d40 !important;
    background-image: none !important;
    border-color: #3e3d40 !important;
    color: #ffffff !important;
}

.nu-toolbar-expandbutton .k-button-text,
.nu-toolbar-expandbutton .k-icon,
.nu-toolbar-expandbutton .k-svg-icon,
.nu-toolbar-expandbutton .k-button-icon,
.nu-toolbar-expandbutton .k-svg-icon svg,
.nu-toolbar-expandbutton .k-svg-icon svg * {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* Process toolbar primary buttons — override Kendo 2025.3 k-button-solid-base defaults */
.k-toolbar .k-button.k-primary,
.k-toolbar .k-button.k-button-solid.k-primary,
.k-toolbar .k-button.k-button-solid-base.k-primary {
    background-color: var(--nu-bg-color) !important;
    border-color: var(--nu-bg-color) !important;
    color: var(--nu-fg-color) !important;
}

.k-toolbar .k-button.k-primary:hover,
.k-toolbar .k-button.k-button-solid.k-primary:hover,
.k-toolbar .k-button.k-button-solid-base.k-primary:hover {
    background-color: var(--nu-bg-color) !important;
    border-color: var(--nu-bg-color) !important;
    color: var(--nu-fg-color) !important;
    opacity: 0.85;
}

.k-toolbar .k-button.k-primary .k-button-text,
.k-toolbar .k-button.k-primary .k-icon,
.k-toolbar .k-button.k-primary .k-font-icon,
.k-toolbar .k-button.k-primary .k-svg-icon,
.k-toolbar .k-button.k-primary .k-button-icon {
    color: var(--nu-fg-color) !important;
}

.k-toolbar .k-button.k-primary .k-svg-icon svg,
.k-toolbar .k-button.k-primary .k-svg-icon svg * {
    fill: var(--nu-fg-color) !important;
}

.k-grouping-row {
    cursor: pointer;
    background-color: var(--nu-bg-muted) !important;
    border-top: 1px solid var(--nu-border-color) !important;
    border-bottom: 1px solid var(--nu-border-color) !important;
}

/* #7370 Layout: 5px weisser Rand rechts als Ende-Indikator am Content-Container */
.container-fluid {
    border-right: 5px solid #fff;
}

.nu-button {
    background-color: var(--nu-bg-muted);
    color: var(--nu-text-primary);
    border-radius: var(--nu-radius-sm);
    padding: 8px 16px;
    border: 1px solid var(--nu-border-color);
    transition: background var(--nu-transition);
}

.nu-button:hover {
    background-color: #ddd;
    color: var(--nu-text-primary);
}

.nu-login-btn {
    color: var(--nu-fg-color);
    border-color: var(--nu-bg-color);
    background-color: var(--nu-bg-color);
    border-radius: var(--nu-radius-sm);
    padding: 10px 24px;
    font-weight: 600;
    transition: opacity var(--nu-transition);
}

.nu-login-btn:hover {
    opacity: 0.9;
}

.nu-logout-btn {
    height: 24px;
    width: 24px;
    margin: 0;
    padding: 0;
    border-radius: 50% !important;
    min-width: 0 !important;
    background-color: var(--nu-bg-color) !important;
    color: var(--nu-fg-color) !important;
    border-color: var(--nu-bg-color) !important;
}

/* ============================================================
   PanelBar — #6602: gray headers, no spacing
   ============================================================ */
.k-panelbar .k-content,
.k-panelbar .k-panelbar-content {
    background-color: var(--nu-bg-surface);
    padding-top: var(--nu-space-md) !important;
    margin-bottom: 0;
}

/* Comprehensive selectors for Kendo 2025.3 PanelBar headers */
.k-panelbar > .k-panelbar-header,
.k-panelbar > .k-panelbar-item {
    border-radius: 0 !important;
}

.k-panelbar > li > .k-link,
.k-panelbar > .k-panelbar-item > .k-link,
.k-panelbar > .k-panelbar-header > .k-link,
.k-panelbar > li.k-selected > .k-link,
.k-panelbar > li.k-expanded > .k-link,
.k-panelbar > .k-panelbar-header.k-selected > .k-link,
.k-panelbar > .k-panelbar-header.k-expanded > .k-link {
    background-color: var(--nu-bg-muted) !important;
    color: var(--nu-text-primary) !important;
    font-weight: bold;
    border-radius: 0 !important;
}

.k-panelbar > li > .k-link:hover,
.k-panelbar > .k-panelbar-item > .k-link:hover,
.k-panelbar > .k-panelbar-header > .k-link:hover,
.k-panelbar > li.k-selected > .k-link:hover,
.k-panelbar > .k-panelbar-header.k-selected > .k-link:hover {
    background-color: #e0e0de !important;
}

.k-panelbar > .k-item > .k-link.k-focus,
.k-panelbar > .k-item > .k-link:focus,
.k-panelbar > .k-panelbar-header > .k-link.k-focus,
.k-panelbar > .k-panelbar-header > .k-link:focus {
    box-shadow: none;
}

/* #6621: PanelBar — subtle border, matching background */
.k-panelbar {
    background-color: var(--nu-bg-surface) !important;
    border: 1px solid var(--nu-border-color) !important;
    border-radius: 0 !important;
}

.k-panelbar > .k-panelbar-header + .k-panelbar-header {
    border-block-start-width: 0 !important;
}

.nu-details-panelitem > .k-link {
    border-bottom: 1px solid var(--nu-border-color);
    padding: 4px 16px !important;
}

.nu-details-panelitem-pinned > .k-link .k-panelbar-toggle {
    display: none;
}

.nu-details-panelitem-pinned > .k-link {
    cursor: default;
    pointer-events: none;
}

/* ============================================================
   Grid toolbar — matching detail toolbar style (#6600 + #6596)
   ============================================================ */
.k-grid-toolbar {
    background-color: var(--nu-bg-surface);
    padding: 8px 12px;
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    border-bottom: 1px solid var(--nu-border-color);
}

.k-grid-toolbar .k-grid-search {
    margin-left: auto;
}

.k-grid-toolbar .k-button {
    background-color: var(--nu-bg-color) !important;
    border: none !important;
    border-color: transparent !important;
    color: var(--nu-fg-color) !important;
    border-radius: var(--nu-radius-sm);
    padding: 4px 10px;
    transition: opacity var(--nu-transition);
}

.k-grid-toolbar .k-button:hover {
    opacity: 0.85;
}

.k-grid-toolbar .k-button .k-svg-icon svg {
    fill: currentColor;
    width: 16px;
    height: 16px;
}

.k-grid-toolbar .k-button .k-icon,
.k-grid-toolbar .k-button .k-svg-icon,
.k-grid-toolbar .k-button .k-font-icon {
    font-size: 16px;
    color: inherit !important;
}

.k-grid-toolbar .k-button .k-button-text {
    color: inherit;
}

.k-grid .k-grid-search {
    display: absolute;
    margin-left: auto;
    margin-right: auto;
    width: 200px;
}

.k-grid .k-command-cell > .k-button + .k-button {
    -webkit-margin-start: 0;
}

.nu-grid-header {
    display: inline-block;
    margin-left: -70px;
    color: var(--nu-text-primary);
    font-weight: 600;
}

.nu-related-grid {
    margin: 0 !important;
    border-radius: 0 !important;
}

.nu-related-grid > .k-grid-toolbar {
    border-radius: 0;
    padding: 5px 14px 5px 2.8px;
}

.nu-grid-norecords {
    padding: 12px 16px;
}

.nu-grid-title {
    font-weight: 500;
    font-size: 16px;
}

.k-grid-update {
    content: "\f044" !important;
    background-color: var(--nu-bg-color) !important;
    border-color: transparent !important;
}

.k-grid-update:hover {
    background-color: var(--nu-bg-color) !important;
    border-color: transparent !important;
}

.k-grid-cancel {
    content: "\f1f8" !important;
}

/* ============================================================
   Toolbar (detail form toolbar, NOT grid toolbar)
   ============================================================ */
.k-toolbar:not(.k-grid-toolbar) {
    padding: 4px 10px;
    background: var(--nu-bg-muted);
}

/* ============================================================
   Tabs — #6617: rectangular tabs, no border-radius
   ============================================================ */
.k-tabstrip-top {
    background-color: transparent !important;
}

.k-tabstrip-items .k-item,
.k-tabstrip-items-wrapper .k-item {
    background: var(--nu-bg-muted);
    border: 1px solid var(--nu-border-color);
    border-bottom: none;
    border-radius: 0 !important;
    border-start-start-radius: 0 !important;
    border-start-end-radius: 0 !important;
    margin-left: 1px;
    margin-right: 1px;
    transition: background var(--nu-transition);
}

.k-tabstrip-items .k-item:hover,
.k-tabstrip-items-wrapper .k-item:hover {
    background: #ddd;
}

.k-tabstrip-items .k-item .k-link,
.k-tabstrip-items-wrapper .k-item .k-link {
    color: var(--nu-text-primary);
    background: transparent;
    padding: 8px 16px;
    font-weight: 500;
}

.k-tabstrip-items .k-item.k-active,
.k-tabstrip-items-wrapper .k-item.k-active {
    background: var(--nu-bg-color);
    border-color: var(--nu-bg-color);
    border-radius: 0 !important;
}

.k-tabstrip-items .k-item.k-active .k-link,
.k-tabstrip-items-wrapper .k-item.k-active .k-link {
    background: var(--nu-bg-color);
    color: var(--nu-fg-color);
}

.k-numeric-wrap .k-disabled > input {
    border: 1px solid var(--nu-border-color);
}

/* ============================================================
   Window / Dialog - 10px radius
   ============================================================ */
.k-window {
    border-radius: var(--nu-radius-md);
    overflow: hidden;
    box-shadow: var(--nu-shadow-lg);
}

.k-window-titlebar {
    background-color: var(--nu-bg-color) !important;
}

.k-dialog .k-window-titlebar {
    color: var(--nu-fg-color) !important;
}

.k-window-title {
    color: var(--nu-fg-color) !important;
}

/* ============================================================
   Switch — #6605
   Kendo 2025.3 bootstrap switch-lg is 36x18px (iOS-style, no labels).
   We need 80x36px with Ja/Nein labels to match form control height.
   API sets: Size(Large), TrackRounded(Small), ThumbRounded(Small).
   Bootstrap theme sets transform:translate(50%,-50%) on thumb which
   breaks positioning at larger sizes — we fix it to translate(-50%,-50%).
   ============================================================ */

/* 1. Switch: reset form-control interference, size 100x36 */
.k-switch-lg {
    width: 100px !important;
    height: 36px !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    overflow: hidden;
}
.k-switch-lg .k-switch-track {
    width: 100% !important;
    height: 100% !important;
}

/* 2. Thumb: 28px, white with visible border */
.k-switch-lg .k-switch-thumb {
    width: 28px !important;
    height: 28px !important;
    background-color: #fff !important;
    border: 1px solid rgba(0, 0, 0, 0.3) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    transform: translate(-50%, -50%) !important;
}

/* 3. Thumb position — 4px visual gap from track edges */
.k-switch-lg.k-switch-off .k-switch-thumb-wrap {
    inset-inline-start: 18px !important;
}
.k-switch-lg.k-switch-on .k-switch-thumb-wrap {
    inset-inline-start: calc(100% - 18px) !important;
}

/* 4. Track colors */
.k-switch-lg.k-switch-on .k-switch-track {
    background-color: var(--nu-bg-color) !important;
    border-color: var(--nu-bg-color) !important;
}
.k-switch-lg.k-switch-off .k-switch-track {
    background-color: #ccc !important;
    border-color: #ccc !important;
}

/* 5. Labels — visible, vertically centered, opposite side of thumb */
.k-switch-lg .k-switch-label-on,
.k-switch-lg .k-switch-label-off {
    display: inline !important;
    font-size: 12px;
    font-weight: 600;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
}
.k-switch-lg.k-switch-on .k-switch-label-on {
    color: #fff !important;
    inset-inline-start: 10px !important;
    inset-inline-end: auto !important;
}
.k-switch-lg.k-switch-off .k-switch-label-off {
    color: #555 !important;
    inset-inline-start: auto !important;
    inset-inline-end: 10px !important;
}
.k-switch-lg.k-switch-on .k-switch-label-off,
.k-switch-lg.k-switch-off .k-switch-label-on {
    display: none !important;
}

/* 6. Focus ring */
.k-switch-lg:focus .k-switch-track,
.k-switch-lg.k-focus .k-switch-track {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--nu-bg-color) 25%, transparent);
}

/* ============================================================
   Disabled state — #6606: consistent disabled/readonly styling
   ============================================================ */
.k-disabled {
    background-color: transparent;
    border-radius: var(--nu-radius-sm);
    color: black !important;
    opacity: 1 !important;
}

.k-disabled > span,
.k-disabled > .k-input-inner,
.k-disabled > .k-input,
.k-disabled > .k-multiselect-wrap {
    background-color: var(--nu-readonly-bg) !important;
}

.k-disabled .k-switch-track {
    opacity: 0.6;
}

.k-input.k-disabled,
.k-input.k-disabled .k-input-inner,
.k-picker.k-disabled,
.k-picker.k-disabled .k-input-inner {
    background-color: var(--nu-readonly-bg) !important;
    color: black !important;
}

.k-radio:disabled + .k-radio-label {
    color: black;
}

.k-multiselect.k-disabled > .k-chip-list {
    background-color: var(--nu-readonly-bg) !important;
}

/* Readonly inputs should look consistent */
fieldset[disabled] .k-input,
fieldset[disabled] .k-picker,
fieldset[disabled] .k-input-inner {
    background-color: var(--nu-readonly-bg) !important;
    color: black !important;
    opacity: 1 !important;
}

fieldset[disabled] .k-switch-track {
    opacity: 0.6;
}

/* ============================================================
   Checkbox / Chip / Multiselect
   ============================================================ */
.k-checkbox {
    border-color: var(--nu-border-color);
    border-radius: 3px;
}

.k-checkbox:indeterminate {
    border-color: var(--nu-bg-color);
    background-color: #fff;
    color: var(--nu-bg-color);
}

.k-checkbox:checked {
    border-color: var(--nu-bg-color);
    background-color: var(--nu-bg-color);
    color: var(--nu-fg-color);
}

.k-chip {
    background-color: var(--nu-bg-color);
    color: var(--nu-fg-color);
    border-radius: var(--nu-radius-sm);
}

/* #7544: globaler -1px margin-top entfernt -- verursachte vertikalen Versatz
   gegenueber Nachbar-Inputs. Multiselect schliesst jetzt buendig mit
   anderen Inputs ab (Detail-Forms wie Such-Forms). */
.k-multiselect .k-button {
    background-color: var(--nu-bg-color) !important;
    border-color: var(--nu-bg-color) !important;
    color: var(--nu-fg-color) !important;
}

/* ============================================================
   Modal / Tab content
   ============================================================ */
.nu-modal {
    background-color: var(--nu-bg-surface);
    margin: 0;
    padding: 0;
}

.nu-tab {
    background-color: var(--nu-bg-surface);
    margin: 0;
    padding: 0;
}

.nu-modal-container .nu-toolbar {
    margin-top: 0px;
}

/* ============================================================
   Status / Record number / Misc
   ============================================================ */
.nu-recordnumber {
    margin-left: auto;
    user-select: none;
    padding: 6px 12px;
    color: #333333;
    font-size: 13px;
}

.nu-status-column {
    display: block;
    height: 20px;
    width: 20px;
    border: 1px solid var(--nu-border-color) !important;
    text-align: center;
    color: white;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    border-radius: 3px;
}

k-button-icontext {
    background-color: var(--nu-fg-color);
}

td {
    min-width: 10px;
}

.nu-highlighted {
    background: var(--nu-bg-color);
    color: var(--nu-fg-color);
}

/* ============================================================
   Vertical header grid
   ============================================================ */
.nu-grid-vheader {
    table-layout: fixed;
}

.nu-grid-vheader table {
    table-layout: fixed;
    width: auto !important;
}

.nu-grid-vheader .k-grid-header tr:first-child {
    height: 170px;
}

.nu-grid-vheader .k-grid-header .k-header .nu-vheader-name {
    display: inline-block;
    white-space: nowrap;
    transform: translate(0,100%) rotate(-90deg);
    transform-origin: 0 0;
    position: absolute;
}

.nu-vheader-name {
    padding-left: 20px;
}

.nu-grid-vheader .k-grid-header .k-header .k-i-sort-desc-sm {
    margin: 0;
}

.nu-grid-vheader .k-grid-header .k-header .k-i-sort-asc-sm {
    margin: 0;
}

/* #6623: Hide column menu on vertical header columns */
.nu-grid-vheader th:has(.nu-vheader-name) .k-grid-column-menu,
.nu-grid-vheader th:has(.nu-vheader-name) .k-grid-header-menu {
    display: none !important;
}


/* ============================================================
   Full-height grid (fills remaining viewport)
   Height is set dynamically by nu.system.adjustFullheightGrid()
   based on the grid's actual position in the viewport.
   Fallback CSS for initial render before JS runs.
   ============================================================ */
.k-grid.nu-grid-fullheight {
    height: calc(100vh - 200px);
}

/* ============================================================
   #6968: Sticky grid headers via jquery.stickytableheaders plugin
   ============================================================ */
.tableFloatingHeader {
    background: var(--nu-bg-card);
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12);
    /* AB#7587: z-index unter Topbar (100) damit Topbar beim Scrollen drueber liegt
       und der Grid-Header beim Kreuzen nicht sichtbar flimmert. GPU-Layer gegen
       1-Frame-Versatz des stickytableheaders-Plugin-Klons. */
    z-index: 90;
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* ============================================================
   Form lock overlay
   ============================================================ */
form.nu-lock::before {
    content: '';
    position: absolute;
    z-index: 999;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

/* ============================================================
   Menu (legacy - hidden, replaced by sidebar)
   ============================================================ */
.nu-menu {
    display: none;
}

.nu-menu-item .k-menu-expand-arrow {
    display: none;
}

.nu-sub-menu .k-menu-expand-arrow {
    display: block;
}

.k-menu.k-header {
    border: 0;
}

.nu-menu-item > .k-menu-link {
    background-color: var(--nu-bg-color);
    margin: 10px 10px 10px 5px;
    border-radius: 50px;
    height: 32px;
    width: 32px;
    padding: 10px !important;
}

.nu-menu-icon {
    height: 32px;
    width: 32px;
    margin: 0 !important;
}

#Menu {
    width: 60px;
    background-color: white;
}

#Menu.k-menu .k-hover > .k-link {
    background-color: var(--nu-bg-color);
}

#Menu.k-menu .k-focus > .k-link {
    background-color: var(--nu-bg-color);
}

/* ============================================================
   Grouping — #6600: readable text, #7369: Gruppenzeile Hintergrund + Border
   ============================================================ */
.k-grouping-header {
    color: var(--nu-text-secondary) !important;
    background-color: var(--nu-bg-surface) !important;
}

.k-group-indicator {
    color: var(--nu-text-primary) !important;
    background-color: var(--nu-bg-card) !important;
    border: 1px solid var(--nu-border-color) !important;
    border-radius: var(--nu-radius-sm);
}

.k-group-indicator .k-link {
    color: var(--nu-text-primary) !important;
}

/* ============================================================
   Loading - use Kendo 2025.3 built-in CSS spinner
   ============================================================ */
.k-loading-image {
    background-image: none !important;
    background-color: transparent !important;
}

.k-loading-color {
    opacity: 0.3;
}

/* Search progress dialog — hide scrollbar */
#nu-search-progress-dialog,
#nu-search-progress-dialog.k-window-content {
    overflow: hidden !important;
}

.nu-search-progress-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 10px 10px;
    gap: 16px;
}

.nu-search-progress-text {
    font-size: 14px;
    color: #555;
}

/* Modern CSS spinner */
.nu-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid #e0e0e0;
    border-top-color: #6c757d;
    border-radius: 50%;
    animation: nu-spin 0.8s linear infinite;
}

@keyframes nu-spin {
    to { transform: rotate(360deg); }
}

/* ============================================================
   ButtonGroup (entity link field search/clear buttons) — #6607
   ============================================================ */
.nu-lookup-btn-search,
.nu-lookup-btn-clear {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}

.nu-lookup-btn-search .k-icon,
.nu-lookup-btn-search .k-svg-icon,
.nu-lookup-btn-search .k-font-icon,
.nu-lookup-btn-clear .k-icon,
.nu-lookup-btn-clear .k-svg-icon,
.nu-lookup-btn-clear .k-font-icon {
    color: var(--nu-text-primary) !important;
}

.nu-lookup-btn-clear .k-svg-icon svg,
.nu-lookup-btn-search .k-svg-icon svg {
    fill: currentColor;
}

.nu-lookup-btn-search:hover .k-icon,
.nu-lookup-btn-search:hover .k-svg-icon,
.nu-lookup-btn-clear:hover .k-icon,
.nu-lookup-btn-clear:hover .k-svg-icon {
    color: var(--nu-fg-color) !important;
}

.nu-lookup-btn-search:hover .k-svg-icon svg,
.nu-lookup-btn-clear:hover .k-svg-icon svg {
    fill: currentColor;
}

/* Ensure ButtonGroup doesn't hide the clear button */
.input-group .k-button-group {
    display: inline-flex;
    flex-shrink: 0;
}

.input-group .k-button-group .k-button {
    display: inline-flex !important;
}

/* Prevent lookup search/clear buttons from turning primary-colored when selected (#6834) */
.nu-lookup-btn-search.k-selected,
.nu-lookup-btn-search.k-active,
.nu-lookup-btn-clear.k-selected,
.nu-lookup-btn-clear.k-active {
    background-color: var(--kendo-button-bg, transparent) !important;
    color: var(--nu-text-primary) !important;
    border-color: var(--nu-border-color) !important;
    box-shadow: none !important;
}

/* ============================================================
   Editor
   ============================================================ */
.nu-small-editor .k-editor iframe.k-content {
    height: 80px !important;
}

.k-editor .k-editable-area .k-content {
    background-color: white;
}

.k-editor-toolbar {
    margin: 0;
}

/* Normalize button backgrounds - all buttons should have transparent bg until hover */
.k-editor-toolbar .k-button,
.k-editor-toolbar .k-button-solid-base {
    background-color: transparent;
    border-color: transparent;
}

.k-editor-toolbar .k-button:hover,
.k-editor-toolbar .k-button-solid-base:hover {
    background-color: var(--nu-bg-muted);
}

.k-editor-toolbar .k-button.k-selected,
.k-editor-toolbar .k-button:active,
.k-editor-toolbar .k-button-solid-base.k-selected,
.k-editor-toolbar .k-button-solid-base:active {
    background-color: #d4d4d4;
}

.k-menu-link input[type="checkbox"] {
    margin-right: 5px !important;
}

/* ============================================================
   Split button
   ============================================================ */
.k-split-button-arrow {
    display: none !important;
}

/* #7630: Kendo 2025.3 SplitButton wrapper defaults to flex-direction:column,
   which stacks the main button and arrow vertically and makes the toolbar
   SplitButton (e.g. GroupPrint) twice as tall as a regular toolbar button.
   Force horizontal layout and reset wrapper styling so the inner main
   button matches the height of the surrounding .nu-toolbar-button buttons. */
.nu-toolbar .k-split-button,
.nu-toolbar-button.k-split-button {
    flex-direction: row !important;
    padding: 0 !important;
    margin: 0;
    background-color: var(--nu-bg-color) !important;
    color: var(--nu-fg-color) !important;
    border: none !important;
    border-radius: var(--nu-radius-sm) !important;
    overflow: hidden;
    align-items: stretch;
    transition: opacity var(--nu-transition);
}

/* Inner main button inherits the look of a regular nu-toolbar-button. */
.nu-toolbar .k-split-button > .k-button:not(.k-split-button-arrow),
.nu-toolbar-button.k-split-button > .k-button:not(.k-split-button-arrow) {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    color: var(--nu-fg-color) !important;
}

.nu-toolbar .k-split-button:hover,
.nu-toolbar-button.k-split-button:hover {
    background-color: var(--nu-bg-color) !important;
    color: var(--nu-fg-color) !important;
    opacity: 0.85;
}

/* ============================================================
   Inactive / fixed header
   ============================================================ */
.nu-inactive-row {
    font-style: italic;
    color: #999;
}

.k-grid td.nu-inactive-row a,
.k-grid .nu-inactive-row td a {
    color: #999;
}

.fixed-header {
    top: 0;
    position: fixed;
    width: auto;
    z-index: 1;
}

/* ============================================================
   Login (legacy)
   ============================================================ */
.nu-login {
    float: right;
    font-size: large;
    margin-right: 15px;
    margin-top: 10px;
}

.nu-header {
    padding: 10px;
}

/* ============================================================
   Chatter
   ============================================================ */
.nu-chatter-card {
    margin-top: 12px;
}

.nu-chatter-title {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
}

.nu-chatter-toggle-icon {
    display: inline-block;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 8px solid #fff;
    transition: transform 0.2s ease;
    flex-shrink: 0;
    margin-right: 4px;
}

.nu-chatter-toggle-icon.open {
    transform: rotate(90deg);
}

.nu-chatter-actions {
    padding: 4px 0 6px 0;
}

.nu-chatter-new-note-btn {
    padding: 4px 10px;
    font-size: 13px;
    cursor: pointer;
    color: var(--nu-fg-color) !important;
    background-color: var(--nu-bg-color) !important;
    border: none !important;
    border-radius: var(--nu-radius-sm);
    transition: opacity var(--nu-transition);
}

.nu-chatter-new-note-btn:hover {
    opacity: 0.85;
}

.nu-chatter-message {
    padding: 8px 12px;
    border-radius: var(--nu-radius-md);
    margin: 4px 16px;
    background-color: var(--nu-bg-muted);
}

.nu-chatter-message-info {
    font-weight: 400;
    margin-bottom: 2px;
    font-size: 12px;
}

.nu-chatter-message-content {
    margin: 0;
}

#nu-chatter-message-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

#nu-chatter-form {
    margin-left: 16px;
    margin-bottom: 12px;
}

/* ============================================================
   Card title
   ============================================================ */
.nu-card-title {
    background: #3e3d40;
    padding: 6px 6px 6px 10px;
    margin: 0;
    font-size: 16px;
    color: #fff;
    border-radius: 0;
    font-weight: bold;
}

/* ============================================================
   Copy button
   ============================================================ */
.nu-copy-btn {
    border: 1px solid var(--nu-border-color);
    border-radius: var(--nu-radius-sm);
    margin-left: 4px;
    flex: 0 0 auto;
}

/* Phone fields use a Kendo MaskedTextBox -- the inner k-maskedtextbox needs to flex
   to take the remaining width, otherwise it collapses next to the copy button. */
.nu-phone-group {
    display: flex;
    align-items: stretch;
}

.nu-phone-group .k-maskedtextbox,
.nu-phone-group .k-input {
    flex: 1 1 auto;
    width: auto !important;
}

/* Notification styling -- consistent with the rest of nu:system. */
.nu-notification {
    padding: 8px 14px;
    border-radius: var(--nu-radius-sm);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    color: #fff;
    font-size: 14px;
}

.nu-notification .k-icon {
    margin-right: 8px;
}

.nu-notification-info { background-color: #2563eb; }
.nu-notification-success { background-color: #16a34a; }
.nu-notification-warning { background-color: #d97706; }
.nu-notification-error { background-color: #dc2626; }

/* ============================================================
   Reporting Classes
   ============================================================ */
.nu-scroll-container {
    box-sizing: border-box;
    background-color: rgb(204,204,204);
    cursor: grab;
    display: block;
}

page {
    background: white;
    display: block;
    margin: 0 auto;
    margin-bottom: 0.5cm;
    box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);
}

page[size="A4"] {
    width: 21cm;
    height: 29.7cm;
}

/* ============================================================
   Login Page (Public layout)
   ============================================================ */
.nu-public-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: var(--nu-bg-surface);
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    padding: var(--nu-space-md);
}

.nu-login-card {
    background: var(--nu-bg-card);
    border-radius: var(--nu-radius-md);
    box-shadow: var(--nu-shadow-md);
    padding: 40px 36px;
    max-width: 380px;
    width: 100%;
    text-align: center;
}

.nu-login-logo {
    display: block;
    margin: 0 auto 14px;
    max-height: 56px;
    width: auto;
}

.nu-login-card h2 {
    font-size: 18px;
    font-weight: 600;
    color: var(--nu-text-primary);
    margin-bottom: 28px;
}

.nu-login-content {
    text-align: left;
}

/* Force form fields to stack inside the login card */
.nu-login-card .row > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
}

.nu-login-card .col-form-label {
    text-align: left;
    padding-right: 0;
    padding-bottom: 2px;
    font-weight: 500;
    font-size: 13px;
    color: var(--nu-text-secondary);
}

.nu-login-card .form-control {
    border-radius: var(--nu-radius-sm);
    border: 1px solid var(--nu-border-color);
    padding: 10px 12px;
}

.nu-login-card .form-control:focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--nu-bg-color) 15%, transparent) !important;
    border-color: var(--nu-bg-color) !important;
}

.nu-login-card .nu-login-btn {
    width: 100%;
    padding: 11px;
    font-size: 14px;
    margin-top: var(--nu-space-sm);
    border-radius: var(--nu-radius-sm);
}

.nu-login-footer {
    margin-top: var(--nu-space-lg);
    color: var(--nu-text-muted);
    font-size: 12px;
}

/* ============================================================
   DevBar — developer mode bar (admin-only, debug mode)
   ============================================================ */
.nu-devbar {
    --nu-devbar-height: 26px;
    background: #e0e0e0;
    color: #222;
    padding: 0 16px;
    height: var(--nu-devbar-height);
    font-size: 11px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid #ccc;
    position: sticky;
    top: 0;
    z-index: 101;
}
.nu-devbar span {
    font-weight: 600;
}
.nu-devbar a {
    color: #333;
    text-decoration: none;
}
.nu-devbar a:hover {
    text-decoration: underline;
}
.nu-devbar-close {
    margin-left: auto;
    color: #999;
    font-size: 14px;
    line-height: 1;
    padding: 0 4px;
    cursor: pointer;
}
.nu-devbar-close:hover {
    color: #c00;
    text-decoration: none;
}

/* ============================================================
   DevBar offset — #6609: when devbar visible, offset topbar + sidebar
   DevBar is sticky at top:0 (z-index 101), topbar sticks below it.
   ============================================================ */
.nu-devbar ~ .nu-topbar {
    top: 26px;
}

.nu-devbar ~ #nu-sidebar {
    top: calc(var(--nu-topbar-height) + 26px);
}

.nu-devbar ~ .nu-content {
    min-height: calc(100vh - var(--nu-topbar-height) - 26px);
}

/* ============================================================
   Responsive - Tablet (<=1024px)
   ============================================================ */
@media (max-width: 1024px) {
    .nu-sidebar {
        transform: translateX(-100%);
    }

    .nu-sidebar.open {
        transform: translateX(0);
        box-shadow: var(--nu-shadow-lg);
    }

    .nu-content {
        margin-left: 0;
    }

    .nu-menu-toggle {
        display: flex;
    }

    .nu-sidebar-collapse-btn {
        display: none;
    }

    /* #6620: Responsive form rows - labels left-aligned, better spacing */
    .col-form-label {
        text-align: left;
        padding-right: 0;
        padding-bottom: 4px;
    }

    /* #6620: Better spacing for form rows on tablet */
    .row.g-0.mb-3 {
        margin-bottom: var(--nu-space-md) !important;
    }

    /* #6620: PanelBar content reduced padding on tablet */
    .k-panelbar .k-content,
    .k-panelbar .k-panelbar-content {
        padding-top: var(--nu-space-sm) !important;
        padding-left: var(--nu-space-sm) !important;
        padding-right: var(--nu-space-sm) !important;
    }
}

/* ============================================================
   Responsive - Phone (<=768px)
   ============================================================ */
@media (max-width: 768px) {
    .nu-content {
        padding: 0;
        margin: 0;
        border-radius: 0;
    }

    .nu-topbar {
        padding: 0 var(--nu-space-sm);
    }

    /* #6620: Form rows stack properly on phone */
    .col-form-label {
        text-align: left;
        padding-right: 0;
        padding-bottom: 4px;
        font-size: 12px;
    }

    /* #6620: Form controls full width on phone */
    .row.g-0 {
        padding-left: var(--nu-space-sm);
        padding-right: var(--nu-space-sm);
    }

    /* #6620: Reduce gaps between form rows on phone */
    .row.g-0.mb-3 {
        margin-bottom: var(--nu-space-sm) !important;
    }

    /* #6620: PanelBar content minimal padding on phone */
    .k-panelbar .k-content,
    .k-panelbar .k-panelbar-content {
        padding: var(--nu-space-sm) !important;
    }

    /* #6620: Details panel item content reduced padding on phone */
    .nu-details-panelitem-content {
        margin: 0 var(--nu-space-xs) 0 0;
    }

    .nu-login-card {
        padding: 28px 24px;
    }
}

/* ============================================================
   Scheduler / PDF export
   ============================================================ */

/*
    Use the DejaVu Sans font for display and embedding in the PDF file.
    The standard PDF fonts have no support for Unicode characters.
*/
.k-scheduler {
    font-family: "DejaVu Sans", "Arial", sans-serif;
}

/* Hide toolbar, navigation and footer during export */
.k-pdf-export .k-scheduler-toolbar,
.k-pdf-export .k-scheduler-navigation .k-nav-today,
.k-pdf-export .k-scheduler-navigation .k-nav-prev,
.k-pdf-export .k-scheduler-navigation .k-nav-next,
.k-pdf-export .k-scheduler-footer {
    display: none;
}

.k-scheduler {
    width:770px!important;
}
/*.k-pdf-export .k-event {
    width: 105px !important;
}*/
.export-title {
    display: none;
}
.export-date {
    display: none;
}
.k-pdf-export .export-title {
    font-size: 16px;
    font-weight: bold;
    background-color: none !important;
    margin: 4px;
    display: block;
    color: black;
}
.k-pdf-export .export-date {
    font-size: 8px;
    background-color: none !important;
    margin: 4px;
    display: block;
    color: black;
}
.k-pdf-export .k-scheduler-header {
    border-top: 1px solid rgb(230, 230, 230);
}
.k-other-month {
    background-color: white !important;
    position: relative;
    z-index: 1;
}
.k-other-month .k-nav-day {
    color: white !important;
}

/* ============================================================
   Delete Confirmation Dialog (#6639)
   ============================================================ */
.nu-delete-dialog-content { padding: 8px 0; }
.nu-delete-question { font-size: 1rem; margin-bottom: 12px; }
.nu-delete-entity-info {
    font-size: 0.95rem;
    background-color: var(--bs-danger-bg-subtle, #f8d7da);
    border-left: 3px solid var(--bs-danger, #dc3545);
    color: var(--bs-danger-text-emphasis, #721c24);
    padding: 8px 12px;
    border-radius: 0 4px 4px 0;
    margin: 0;
}
.nu-delete-entity-info strong { color: inherit; }

/* #6837: Error page layout */
.nu-error-page {
    padding: 24px 16px 0;
}
.nu-error-page h4 {
    margin-top: 0;
    margin-bottom: 20px;
}
.nu-error-page #error-back-container {
    margin-top: 20px;
}

/* ============================================================
   #7845 — Formatted HTML notes in grid cells (renderEditorHtml)
   Applied to columns that use Encoded(false) + renderEditorHtml,
   e.g. "Letzte Notiz" in "Geänderte Projekte" and Projektsuche.
   ============================================================ */

/* Show the full editor content — no line-clamp.
   Long unbroken strings are kept from overflowing horizontally. */
.k-grid td .nu-editor-cell {
    word-break: break-word;
    overflow-wrap: break-word;
}

/* Strip default browser margins from block elements inside the
   editor cell.  Affects p, ul, ol, h1-h6 rendered by the editor. */
.k-grid td .nu-editor-cell p,
.k-grid td .nu-editor-cell ul,
.k-grid td .nu-editor-cell ol,
.k-grid td .nu-editor-cell h1,
.k-grid td .nu-editor-cell h2,
.k-grid td .nu-editor-cell h3,
.k-grid td .nu-editor-cell h4,
.k-grid td .nu-editor-cell h5,
.k-grid td .nu-editor-cell h6 {
    margin: 0;
    padding: 0;
}

/* Bullet/numbered lists: restore left indent but remove extra margin */
.k-grid td .nu-editor-cell ul,
.k-grid td .nu-editor-cell ol {
    padding-left: 1.2em;
}

/* ============================================================
   #7767/#7902 — ListValue detail grid container (used in _ValuesByType.cshtml)
   Wraps the per-type values subgrid and its toolbar inside TypeDetails.
   ============================================================ */
.nu-detail-grid-container {
    margin-top: var(--nu-space-md);
}

.nu-detail-grid-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    margin-bottom: 6px;
}

.nu-detail-grid-empty {
    color: var(--nu-text-muted);
    font-style: italic;
    padding: 8px 0;
    margin: 0;
}

/* #7767 — Color attribute swatch in ListValue attribute grid.
   Injected via dataBound DOM manipulation (no inline style in template). */
.nu-color-swatch {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 2px;
    border: 1px solid var(--nu-border-color);
    margin-right: 6px;
    vertical-align: middle;
    flex-shrink: 0;
}

/* custom | glyph plus | #7767 _ValuesByType.cshtml "Neuer Listenwert" */
.nu-toolbar-button[title="Neuer Listenwert"] .k-button-icon::before {
    content: "\e11e";
    font-family: "WebComponentsIcons";
}

/* custom | glyph plus | FB-3 _NuGrid ToolbarButton "Neuer Listenwerttyp"
   Rendered by _NuGrid toolbar.Custom() — sits inside .k-grid-toolbar, does NOT
   carry nu-toolbar-button class (no class= in HtmlAttributes at line 213-218). */
.k-grid-toolbar button[title="Neuer Listenwerttyp"] .k-button-icon::before {
    content: "\e11e";
    font-family: "WebComponentsIcons";
}

/* built-in: svg-hide + inject pair | glyph trash | FB-9 TypeDetails/TypeEdit command.Destroy()
   command.Destroy() renders a native SVG "x" span (.k-button-icon.k-svg-icon).
   Hide the native <svg> child so only the injected trash glyph shows.
   Scoped tightly to [title="Attribut entfernen"] — custom-command buttons
   (Löschen, Zuordnung entfernen) are command.Custom() and render no native SVG. */
.nu-grid-button[title="Attribut entfernen"] .k-button-icon svg {
    display: none;
}
.nu-grid-button[title="Attribut entfernen"] .k-button-icon::before {
    content: "\e10c";
    font-family: "WebComponentsIcons";
}

/* FB-11 — ExternalKey add row on Details */
.nu-ext-key-add {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.nu-ext-key-add__label {
    font-weight: 600;
    font-size: 12px;
    margin-right: -4px;
    white-space: nowrap;
}

.nu-ext-key-add__input {
    width: 180px;
}

/* FB-3/FB-8 — nu-toolbar-button used as <a> should have no underline */
a.nu-toolbar-button,
a.nu-toolbar-button:hover {
    text-decoration: none;
}

/* FB2-2 — Fix blue column-filter icon and master-detail expand caret.
   Kendo 2025.3 Bootstrap theme can resolve --kendo-color-primary to the
   Bootstrap default (#0d6efd) for these icons when the app brand color
   is not in scope. Force both to the standard dark surface text color so
   they match every other non-command icon in the grid. These selectors
   do NOT touch active/hover states (those keep the primary-color highlight). */

/* Column filter / column-menu button icon (the funnel icon in header cells) */
.k-grid-header .k-grid-filter:not(.k-active) .k-svg-icon,
.k-grid-header .k-grid-filter:not(.k-active) .k-svg-icon svg,
.k-grid-header .k-grid-filter:not(.k-active) .k-svg-icon svg *,
.k-grid-header .k-grid-header-menu:not(.k-active) .k-svg-icon,
.k-grid-header .k-grid-header-menu:not(.k-active) .k-svg-icon svg,
.k-grid-header .k-grid-header-menu:not(.k-active) .k-svg-icon svg * {
    color: var(--kendo-color-on-app-surface, #212529) !important;
    fill: var(--kendo-color-on-app-surface, #212529) !important;
}

/* Expand caret in master-detail hierarchy cells */
.k-grid .k-hierarchy-cell .k-svg-icon:not(.k-active),
.k-grid .k-hierarchy-cell .k-svg-icon:not(.k-active) svg,
.k-grid .k-hierarchy-cell .k-svg-icon:not(.k-active) svg * {
    color: var(--kendo-color-on-app-surface, #212529) !important;
    fill: var(--kendo-color-on-app-surface, #212529) !important;
}

/* Disabled read-only cell in the Attribut-Definitionen grid (Auswahl column when Typ != Listenwert) */
.k-grid td.nu-cell-disabled {
    color: var(--kendo-color-subtle, #6c757d);
    font-style: italic;
}