/* =====================================================
   MIDDLEWARE UI — GLOBAL DESIGN TOKENS & OVERRIDES
   ===================================================== */

/* --- Design tokens (light mode) --- */
:root {
    --mw-nav-active-bg:    rgba(29, 111, 181, 0.08);
    --mw-nav-hover-bg:     rgba(17, 24, 39, 0.05);
    --mw-chip-radius:      6px;
    --mw-transition-fast:  150ms ease;
    --mw-transition-std:   200ms ease;
    --mw-surface-raised:   #f7f8fc;   /* panel headers, table headers */
}

/* --- Design tokens (dark mode) --- */
html.mw-dark {
    --mw-nav-active-bg:    rgba(77, 163, 232, 0.12);
    --mw-nav-hover-bg:     rgba(232, 237, 245, 0.05);
    --mw-surface-raised:   #1f2742;
}

/* =====================================================
   APPBAR
   ===================================================== */
.mud-appbar {
    border-bottom: 1px solid var(--mud-palette-divider) !important;
}

.mud-appbar .mud-typography-h6 {
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* Beta badge — replaces MudChip */
.mw-beta-badge {
    display: inline-flex;
    align-items: center;
    height: 18px;
    padding: 0 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-contrast-text);
    margin-left: 6px;
    vertical-align: middle;
    position: relative;
    top: -1px;
    user-select: none;
}

/* =====================================================
   DRAWER / SIDEBAR
   ===================================================== */
.mud-drawer {
    border-right: 1px solid var(--mud-palette-divider) !important;
}


/* =====================================================
   DATA TABLES
   ===================================================== */
.mud-table-head .mud-table-cell {
    text-transform: none !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em !important;
    white-space: nowrap !important;
    color: var(--mud-palette-text-secondary) !important;
    background-color: var(--mw-surface-raised) !important;
    border-bottom: 2px solid var(--mud-palette-table-lines) !important;
}

.mud-table-cell {
    border-bottom-color: var(--mud-palette-table-lines) !important;
}

.mud-table-sort-label {
    font-weight: 600 !important;
    font-size: 0.75rem !important;
    text-transform: none !important;
    color: var(--mud-palette-text-secondary) !important;
}

/* =====================================================
   STATUS CHIPS — semantic colors
   ===================================================== */
.mud-chip {
    border-radius: var(--mw-chip-radius) !important;
}

/* Active / Aktiv */
.mw-chip-active {
    background-color: #e6f5ec !important;
    color: #1a7f4b !important;
}
html.mw-dark .mw-chip-active {
    background-color: #0d2b1e !important;
    color: #34d07a !important;
}

/* Error / Fehler / Gesperrt */
.mw-chip-error {
    background-color: #fce8e8 !important;
    color: #b91c1c !important;
}
html.mw-dark .mw-chip-error {
    background-color: #2d1010 !important;
    color: #f87171 !important;
}

/* Warning / Aborted */
.mw-chip-warning {
    background-color: #fef3cd !important;
    color: #b45309 !important;
}
html.mw-dark .mw-chip-warning {
    background-color: #2a1f08 !important;
    color: #f6b73c !important;
}

/* Paused / Pausiert */
.mw-chip-paused {
    background-color: #eef2ff !important;
    color: #4338ca !important;
}
html.mw-dark .mw-chip-paused {
    background-color: #151a38 !important;
    color: #a5b4fc !important;
}

/* Running / Läuft */
.mw-chip-running {
    background-color: #e0f2fe !important;
    color: #0369a1 !important;
}
html.mw-dark .mw-chip-running {
    background-color: #0b1f2e !important;
    color: #60b8f5 !important;
}

/* Finished / Abgeschlossen */
.mw-chip-finished {
    background-color: #f3f4f6 !important;
    color: #4b5563 !important;
}
html.mw-dark .mw-chip-finished {
    background-color: #1f2742 !important;
    color: #8899b0 !important;
}

/* Product type chips */
.mw-chip-type-p {
    background-color: #e8f3fb !important;
    color: #1d6fb5 !important;
}
html.mw-dark .mw-chip-type-p {
    background-color: #0d2540 !important;
    color: #4da3e8 !important;
}

.mw-chip-type-a {
    background-color: #fef0e8 !important;
    color: #c4511a !important;
}
html.mw-dark .mw-chip-type-a {
    background-color: #2a1608 !important;
    color: #f28444 !important;
}

.mw-chip-type-v {
    background-color: #f3f4f6 !important;
    color: #374151 !important;
}
html.mw-dark .mw-chip-type-v {
    background-color: #1f2742 !important;
    color: #9ca3b8 !important;
}

/* =====================================================
   FORMS & INPUTS
   ===================================================== */
.mud-input-outlined .mud-input-outlined-border {
    border-radius: 8px !important;
}

/* =====================================================
   DIALOGS
   ===================================================== */
.mud-dialog {
    border-radius: 12px !important;
    border: 1px solid var(--mud-palette-divider) !important;
}

.mud-dialog-title {
    padding: 20px 24px 16px !important;
    border-bottom: 1px solid var(--mud-palette-divider) !important;
}

.mud-dialog-content {
    padding: 24px !important;
}

.mud-dialog-actions {
    padding: 16px 24px !important;
    border-top: 1px solid var(--mud-palette-divider) !important;
    gap: 8px;
}

/* =====================================================
   ALERTS
   ===================================================== */
.mud-alert {
    border-radius: 8px !important;
    border-left: 3px solid currentColor !important;
}

/* =====================================================
   TABS
   ===================================================== */
.mud-tabs-tabbar {
    border-bottom: 1px solid var(--mud-palette-divider) !important;
}

.mud-tab {
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    min-height: 44px !important;
}

.mud-tab-active {
    font-weight: 600 !important;
}

/* =====================================================
   DASHBOARD — metric cards & panels
   ===================================================== */
.mw-stat-card {
    border-radius: 8px;
    padding: 20px 22px;
    border: 1px solid var(--mud-palette-divider);
    transition: border-color var(--mw-transition-std);
}

.mw-panel-header {
    padding: 12px 20px;
    border-bottom: 1px solid var(--mud-palette-divider);
    background-color: var(--mw-surface-raised);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* =====================================================
   SEARCH BAR
   ===================================================== */
.mw-search-bar {
    display: flex;
    gap: 10px;
    align-items: flex-end;
    padding: 20px 20px 0;
    margin-bottom: 16px;
}

.mw-search-bar .mud-input-control {
    max-width: 480px;
    flex: 1;
}

/* =====================================================
   SYSINFO KEY-VALUE ROWS
   ===================================================== */
.mw-sysinfo-section {
    border: 1px solid var(--mud-palette-divider);
    border-radius: 8px;
    overflow: hidden;
}

.mw-sysinfo-section-header {
    padding: 12px 24px;
    border-bottom: 1px solid var(--mud-palette-divider);
    background-color: var(--mw-surface-raised);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.mw-sysinfo-row {
    display: flex;
    align-items: baseline;
    padding: 10px 24px;
    border-bottom: 1px solid var(--mud-palette-divider);
    gap: 16px;
    background-color: var(--mud-palette-surface);
}

.mw-sysinfo-row:last-child {
    border-bottom: none;
}

.mw-sysinfo-key {
    min-width: var(--mw-sysinfo-key-width, 200px);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    flex-shrink: 0;
}

.mw-sysinfo-value {
    font-size: 0.8125rem;
    color: var(--mud-palette-text-primary);
    font-family: 'JetBrains Mono', 'Cascadia Code', monospace;
}

/* =====================================================
   SPLIT PANEL
   ===================================================== */
.mud-split-panel .divider {
    background-color: var(--mud-palette-divider);
}
.mud-split-panel .child-panel:first-child {
    padding-right: 0 !important;
}

/* =====================================================
   LOADING SCREEN COLORS (sync with new palette)
   ===================================================== */
#mw-loading-screen {
    background-color: #f0f2f7;
}

html.mw-dark #mw-loading-screen {
    background-color: #0e1520;
}

/* -----------------------------------------------------------------------
   Konfigurationsseite
   ----------------------------------------------------------------------- */

.mw-config-group-heading {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    padding: 0 2px;
}

.mw-config-row {
    padding: 16px 20px;
    transition: background-color var(--mw-transition-fast);
}

.mw-config-row--dirty {
    background-color: rgba(29, 111, 181, 0.04) !important;
    border-left: 3px solid var(--mud-palette-primary) !important;
}

html.mw-dark .mw-config-row--dirty {
    background-color: rgba(77, 163, 232, 0.06) !important;
}

/* Beschreibungstext unter Labels und in Eingabefeldern (HelperText) */
.mw-config-description {
    color: var(--mud-palette-text-disabled) !important;
}

.mw-config-row .mud-input-helper-text {
    color: var(--mud-palette-text-disabled) !important;
}

/* Wert kommt aus appsettings / Umgebungsvariablen (kein DB-Override) */
.mw-config-row--default {
    background-color: rgba(161, 120, 0, 0.03) !important;
    border-left: 3px solid rgba(161, 120, 0, 0.28) !important;
}

html.mw-dark .mw-config-row--default {
    background-color: rgba(220, 168, 30, 0.04) !important;
    border-left: 3px solid rgba(220, 168, 30, 0.25) !important;
}

/* Dictionary-Editor (Dictionary<string,string>) */
.mw-kvlist {
    display: flex;
    flex-direction: column;
    gap: 3px;
    width: 100%;
}

.mw-kvlist-item {
    display: grid;
    grid-template-columns: minmax(100px, 180px) 12px 1fr 28px;
    align-items: center;
    gap: 4px;
    padding: 0 6px 0 4px;
    border-radius: 4px;
    border: 1px solid var(--mud-palette-divider);
    background: var(--mud-palette-background);
    min-height: 30px;
}

.mw-kvlist-item--readonly {
    padding: 4px 8px;
    gap: 6px;
}

.mw-kvlist-sep {
    font-size: 0.75rem;
    color: var(--mud-palette-text-disabled);
    text-align: center;
}

.mw-kvlist-key {
    font-size: 0.8125rem;
    font-family: 'JetBrains Mono', 'Cascadia Code', monospace;
    color: var(--mud-palette-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mw-kvlist-value {
    font-size: 0.8125rem;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mw-kvlist-key-field .mud-input-root,
.mw-kvlist-value-field .mud-input-root {
    font-size: 0.8125rem !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

.mw-kvlist-key-field .mud-input-root {
    font-family: 'JetBrains Mono', 'Cascadia Code', monospace !important;
}

.mw-kvlist-delete {
    display: flex;
    align-items: center;
    cursor: pointer;
    opacity: 0.55;
    transition: opacity 0.1s;
    padding: 2px;
    border-radius: 3px;
    flex-shrink: 0;
}

.mw-kvlist-delete:hover {
    opacity: 1;
}

/* String-Listen-Editor (List<string> via MudDropContainer) */
.mw-strlist,
.mw-strlist-zone {
    display: flex;
    flex-direction: column;
    gap: 3px;
    width: 100%;
}

/* MudBlazor fügt .mud-drop-item um jedes Item — Abstände neutralisieren */
.mw-strlist .mud-drop-item {
    margin: 0 !important;
    padding: 0 !important;
}

.mw-strlist-item {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px 2px 2px;
    border-radius: 4px;
    border: 1px solid var(--mud-palette-divider);
    background: var(--mud-palette-background);
    min-height: 30px;
    user-select: none;
}

.mw-strlist-handle {
    display: flex;
    align-items: center;
    color: var(--mud-palette-text-disabled);
    cursor: grab;
    flex-shrink: 0;
    padding: 0 2px;
}

.mw-strlist-handle:active {
    cursor: grabbing;
}

.mw-strlist-value {
    flex: 1;
    font-size: 0.8125rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mw-strlist-delete {
    display: flex;
    align-items: center;
    cursor: pointer;
    opacity: 0.55;
    transition: opacity 0.1s;
    padding: 2px;
    border-radius: 3px;
    flex-shrink: 0;
}

.mw-strlist-delete:hover {
    opacity: 1;
}

.mw-code-editor .mud-input-slot {
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 0.8rem !important;
}