/* ==========================================================================
   Wise Components - Global Design System
   Namespace: WiseSci.Metrics.Blazor.Server.Editors.WiseComponents
   File: wwwroot/css/wise-components.css

   Purpose:
   - One global stylesheet for WiseSurface, WiseGrid, WiseBadge, WiseStat,
     WiseMetric, WiseProgress, WiseInsightList, WiseTimeline, WiseToolbar,
     WiseSection, WiseDashboard, WiseEmptyState and DevExpress wrappers.
   - Designed as a global file, not CSS isolation, so it can style DevExpress
     internal markup such as DxGrid cells, headers, pager and search box.

   Recommended registration:
   <link href="css/wise-components.css" rel="stylesheet" />

   Notes:
   - All component classes use the "wise-" prefix.
   - Variables are prefixed with "--wise-".
   - DevExpress grid selectors target current dxbl-* classes.
   ========================================================================== */


/* ==========================================================================
   1. Design tokens
   ========================================================================== */

:root {
    /* Brand
       Zielen przepobrana wprost z logo (wwwroot/images/logo_green_small.png).
       Nie mylic z zieleniami palety poziomow ewaluacji (--wise-success,
       --wise-success-strong) - tamte znacza "Lider ewaluacji" i "Zaawansowany",
       ta jest wylacznie akcentem interfejsu. */
    --wise-primary: #00a128;
    --wise-primary-strong: #00801f;
    --wise-primary-soft: rgba(0, 161, 40, .08);
    --wise-primary-softer: rgba(0, 161, 40, .05);
    /* Semantic colors */
    --wise-info: #2563eb;
    --wise-info-strong: #1d4ed8;
    --wise-info-soft: #dbeafe;
    --wise-info-softer: rgba(37, 99, 235, .08);
    --wise-success: #16a34a;
    --wise-success-strong: #15803d;
    --wise-success-soft: #dcfce7;
    --wise-success-softer: rgba(22, 163, 74, .10);
    --wise-warning: #d97706;
    --wise-warning-strong: #b45309;
    --wise-warning-soft: #fef3c7;
    --wise-warning-softer: rgba(245, 158, 11, .12);
    --wise-danger: #dc2626;
    --wise-danger-strong: #b91c1c;
    --wise-danger-soft: #fee2e2;
    --wise-danger-softer: rgba(239, 68, 68, .10);
    --wise-neutral: #344054;
    --wise-neutral-soft: #f2f4f7;
    --wise-neutral-softer: rgba(52, 64, 84, .08);
    /* Surface */
    --wise-page-bg: #f8fafc;
    --wise-surface-bg: #ffffff;
    --wise-surface-soft-bg: #f8fafc;
    --wise-surface-muted-bg: #f9fafb;
    /* Text */
    --wise-text: #101828;
    --wise-text-secondary: #344054;
    --wise-text-muted: #667085;
    --wise-text-placeholder: #98a2b3;
    --wise-text-inverse: #ffffff;
    /* Border */
    --wise-border: #e5e7eb;
    --wise-border-strong: #d0d5dd;
    --wise-border-soft: #eaecf0;
    /* Radius */
    --wise-radius-xs: 6px;
    --wise-radius-sm: 8px;
    --wise-radius-md: 12px;
    --wise-radius-lg: 16px;
    --wise-radius-xl: 20px;
    --wise-radius-2xl: 24px;
    --wise-radius-pill: 999px;
    /* Spacing */
    --wise-space-1: 4px;
    --wise-space-2: 8px;
    --wise-space-3: 12px;
    --wise-space-4: 16px;
    --wise-space-5: 20px;
    --wise-space-6: 24px;
    --wise-space-7: 28px;
    --wise-space-8: 32px;
    --wise-space-9: 36px;
    --wise-space-10: 40px;
    /* Shadows */
    --wise-shadow-xs: 0 1px 2px rgba(16, 24, 40, .04);
    --wise-shadow-sm: 0 2px 8px rgba(16, 24, 40, .05);
    --wise-shadow-md: 0 12px 32px rgba(16, 24, 40, .06);
    --wise-shadow-lg: 0 18px 50px rgba(16, 24, 40, .10);
    --wise-shadow-xl: 0 24px 70px rgba(16, 24, 40, .14);
    /* Typography */
    --wise-font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif;
    --wise-font-size-xs: 12px;
    --wise-font-size-sm: 13px;
    --wise-font-size-md: 14px;
    --wise-font-size-lg: 16px;
    --wise-font-size-xl: 20px;
    --wise-font-size-2xl: 24px;
    --wise-font-size-3xl: 28px;
    --wise-line-height-tight: 1.2;
    --wise-line-height-normal: 1.5;
    /* Motion */
    --wise-transition-fast: 120ms ease;
    --wise-transition: 180ms ease;
    --wise-transition-slow: 250ms ease;
    /* Component defaults */
    --wise-accent: var(--wise-primary);
    --wise-accent-strong: var(--wise-primary-strong);
    --wise-accent-soft: var(--wise-primary-soft);
    --wise-accent-softer: var(--wise-primary-softer);
}


/* ==========================================================================
   2. Base helpers
   ========================================================================== */

.wise-hidden {
    display: none !important;
}

.wise-flex {
    display: flex;
}

.wise-inline-flex {
    display: inline-flex;
}

.wise-flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.wise-flex-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.wise-gap-1 {
    gap: var(--wise-space-1);
}

.wise-gap-2 {
    gap: var(--wise-space-2);
}

.wise-gap-3 {
    gap: var(--wise-space-3);
}

.wise-gap-4 {
    gap: var(--wise-space-4);
}

.wise-gap-5 {
    gap: var(--wise-space-5);
}

.wise-gap-6 {
    gap: var(--wise-space-6);
}

.wise-text-muted {
    color: var(--wise-text-muted) !important;
}

.wise-text-secondary {
    color: var(--wise-text-secondary) !important;
}

.wise-text-primary {
    color: var(--wise-accent) !important;
}

.wise-m-0 {
    margin: 0 !important;
}

.wise-p-0 {
    padding: 0 !important;
}

.wise-rounded {
    border-radius: var(--wise-radius-lg) !important;
}

.wise-rounded-xl {
    border-radius: var(--wise-radius-xl) !important;
}

.wise-shadow {
    box-shadow: var(--wise-shadow-md) !important;
}

.wise-shadow-lg {
    box-shadow: var(--wise-shadow-lg) !important;
}


/* ==========================================================================
   3. WiseSurface
   ========================================================================== */

.wise-surface {
    --ws-bg: var(--wise-surface-bg);
    --ws-border: var(--wise-border);
    --ws-header-border: var(--wise-border-soft);
    --ws-text: var(--wise-text);
    --ws-muted: var(--wise-text-muted);
    --ws-radius: var(--wise-radius-xl);
    --ws-shadow: var(--wise-shadow-md);
    --ws-accent: var(--wise-accent);
    --ws-accent-soft: var(--wise-accent-soft);
    --ws-header-padding-y: var(--wise-space-6);
    --ws-header-padding-x: var(--wise-space-7);
    --ws-content-padding: var(--wise-space-6);
    --ws-body-padding: var(--ws-content-padding);
    background: var(--ws-bg);
    border: 1px solid var(--ws-border);
    overflow: hidden;
    transition: box-shadow var(--wise-transition), border-color var(--wise-transition), background-color var(--wise-transition);
}

.wise-surface-rounded {
    border-radius: var(--ws-radius);
}

.wise-surface-shadow {
    box-shadow: var(--ws-shadow);
}

.wise-surface-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--wise-space-6);
    padding: var(--ws-header-padding-y) var(--ws-header-padding-x);
    border-bottom: 1px solid var(--ws-header-border);
    background: var(--ws-bg);
}

.wise-surface-header-gradient .wise-surface-header {
    background: radial-gradient(circle at top right, var(--ws-accent-soft), transparent 38%), var(--ws-bg);
}

.wise-surface-header-text {
    min-width: 0;
}

.wise-surface-header h2,
.wise-surface-title {
    margin: 0;
    color: var(--ws-text);
    font-size: var(--wise-font-size-2xl);
    line-height: var(--wise-line-height-tight);
    font-weight: 750;
    letter-spacing: -0.02em;
}

.wise-surface-header p,
.wise-surface-subtitle {
    margin: 6px 0 0;
    color: var(--ws-muted);
    font-size: var(--wise-font-size-lg);
    line-height: var(--wise-line-height-normal);
}

.wise-surface-header-actions {
    display: flex;
    align-items: center;
    gap: var(--wise-space-3);
    flex: 0 0 auto;
}

.wise-surface-body {
    padding: var(--ws-body-padding);
}

.wise-surface-body-padding {
    --ws-body-padding: var(--ws-content-padding);
}

.wise-surface-body-no-padding {
    --ws-body-padding: 0;
}

.wise-surface-density-compact {
    --ws-header-padding-y: var(--wise-space-4);
    --ws-header-padding-x: var(--wise-space-5);
    --ws-content-padding: var(--wise-space-4);
}

.wise-surface-density-comfortable {
    --ws-header-padding-y: var(--wise-space-6);
    --ws-header-padding-x: var(--wise-space-7);
    --ws-content-padding: var(--wise-space-6);
}

.wise-surface-density-spacious {
    --ws-header-padding-y: var(--wise-space-8);
    --ws-header-padding-x: var(--wise-space-9);
    --ws-content-padding: var(--wise-space-8);
}

.wise-surface-accent-none {
    --wise-accent: var(--wise-neutral);
    --wise-accent-soft: var(--wise-neutral-softer);
    --wise-accent-softer: var(--wise-neutral-softer);
}

.wise-surface-accent-purple {
    --wise-accent: #7c3aed;
    --wise-accent-strong: #6d28d9;
    --wise-accent-soft: rgba(124, 58, 237, .08);
    --wise-accent-softer: rgba(124, 58, 237, .05);
}

.wise-surface-accent-blue {
    --wise-accent: var(--wise-info);
    --wise-accent-strong: var(--wise-info-strong);
    --wise-accent-soft: var(--wise-info-softer);
    --wise-accent-softer: var(--wise-info-softer);
}

.wise-surface-accent-green {
    --wise-accent: var(--wise-success);
    --wise-accent-strong: var(--wise-success-strong);
    --wise-accent-soft: var(--wise-success-softer);
    --wise-accent-softer: var(--wise-success-softer);
}

.wise-surface-accent-orange {
    --wise-accent: #ea580c;
    --wise-accent-strong: #c2410c;
    --wise-accent-soft: rgba(234, 88, 12, .08);
    --wise-accent-softer: rgba(234, 88, 12, .05);
}

.wise-surface-accent-red {
    --wise-accent: var(--wise-danger);
    --wise-accent-strong: var(--wise-danger-strong);
    --wise-accent-soft: var(--wise-danger-softer);
    --wise-accent-softer: var(--wise-danger-softer);
}

.wise-surface-variant-flat {
    border: none;
    box-shadow: none;
    border-radius: 0;
    background: transparent;
}

.wise-surface-variant-card {
    background: var(--wise-surface-bg);
}

.wise-surface-variant-elevated {
    --ws-shadow: var(--wise-shadow-lg);
}

.wise-surface-variant-soft {
    background: var(--wise-surface-soft-bg);
    padding: var(--wise-space-3);
}


/* ==========================================================================
   4. WiseGrid - DevExpress DxGrid wrapper
   ========================================================================== */

.wise-grid {
    --wg-padding-y: var(--wise-space-4);
    --wg-padding-x: var(--wise-space-5);
    --wg-header-bg: var(--wise-surface-muted-bg);
    --wg-cell-border: var(--wise-border-soft);
    --wg-cell-text: var(--wise-text-secondary);
    --wg-header-text: var(--wise-text-secondary);
    --wg-hover-bg: var(--wise-accent-softer);
    --wg-zebra-bg: #fcfcfd;
    width: 100%;
    margin: 0;
    border: 1px solid var(--wise-border);
    border-radius: var(--wise-radius-lg);
    overflow: hidden;
    background: var(--wise-surface-bg);
    font-family: var(--wise-font-family);
    box-shadow: var(--wise-shadow-xs);
}

    /* Main grid frame */
    .wise-grid .dxbl-grid {
        border: none;
        background: transparent;
    }

    /* Search area */
    .wise-grid .dxbl-grid-search-box,
    .wise-grid .dxbl-text-edit,
    .wise-grid .dxbl-edit {
        border-radius: var(--wise-radius-md);
    }

    .wise-grid .dxbl-grid-search-box {
        max-width: 360px;
    }

    /* Top panel / search area inside DxGrid */
    .wise-grid .dxbl-grid-search-panel,
    .wise-grid .dxbl-grid-toolbar-container,
    .wise-grid .dxbl-grid-top-panel {
        padding: var(--wise-space-4) var(--wise-space-5);
        background: var(--wise-surface-bg);
        border-bottom: 1px solid var(--wise-border-soft);
    }


    /* Headers */
    .wise-grid .dxbl-grid-header-row {
        background: var(--wg-header-bg);
    }

    .wise-grid .dxbl-grid-header-cell {
        padding: var(--wg-padding-y) var(--wg-padding-x);
        font-weight: 750;
        color: var(--wg-header-text);
        border-color: var(--wg-cell-border);
        background: var(--wg-header-bg);
        font-size: var(--wise-font-size-md);
    }

        .wise-grid .dxbl-grid-header-cell:hover {
            background: #f3f4f6;
        }

    /* Cells */
    .wise-grid .dxbl-grid-data-cell {
        padding: var(--wg-padding-y) var(--wg-padding-x);
        border-color: var(--wg-cell-border);
        color: var(--wg-cell-text);
        font-size: var(--wise-font-size-md);
        vertical-align: middle;
    }

    /* Rows */
    .wise-grid .dxbl-grid-data-row {
        transition: background-color var(--wise-transition-fast);
    }

.wise-grid-hover .dxbl-grid-data-row:hover {
    background: var(--wg-hover-bg);
}

.wise-grid-zebra .dxbl-grid-data-row:nth-child(even) {
    background: var(--wg-zebra-bg);
}

/* Pager */
.wise-grid .dxbl-pager {
    border-top: 1px solid var(--wg-cell-border);
    padding: var(--wise-space-4) var(--wise-space-5);
    background: var(--wise-surface-bg);
}

    .wise-grid .dxbl-pager .dxbl-btn {
        border-radius: var(--wise-radius-sm);
    }

/* Filter row */
.wise-grid .dxbl-grid-filter-row {
    background: #ffffff;
}

    .wise-grid .dxbl-grid-filter-row .dxbl-grid-data-cell {
        padding-top: var(--wise-space-3);
        padding-bottom: var(--wise-space-3);
    }

/* Selection / focus */
.wise-grid .dxbl-grid-focused-row,
.wise-grid .dxbl-grid-selected-row {
    background: var(--wise-accent-softer);
}

/* Density */
.wise-grid-density-compact {
    --wg-padding-y: 10px;
    --wg-padding-x: 14px;
}

.wise-grid-density-comfortable {
    --wg-padding-y: 16px;
    --wg-padding-x: 20px;
}

.wise-grid-density-spacious {
    --wg-padding-y: 22px;
    --wg-padding-x: 26px;
}


/* ==========================================================================
   5. WiseBadge
   ========================================================================== */

.wise-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: var(--wise-radius-pill);
    padding: 6px 10px;
    font-size: var(--wise-font-size-sm);
    line-height: 1;
    font-weight: 750;
    white-space: nowrap;
    vertical-align: middle;
}

.wise-badge-subtitle{
    padding-top:7px;
}

.wise-badge-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.wise-badge-size-small {
    padding: 4px 8px;
    font-size: var(--wise-font-size-xs);
}

.wise-badge-size-medium {
    padding: 6px 10px;
    font-size: var(--wise-font-size-sm);
}

.wise-badge-size-large {
    padding: 8px 12px;
    font-size: var(--wise-font-size-md);
}

.wise-badge-size-2xlarge {
    padding: 20px 26px;
    font-size: var(--wise-font-size-2xl);
}

.wise-badge-notslected {
    background: gray;
}

.wise-badge-status-neutral {
    background: var(--wise-neutral-soft);
    color: var(--wise-neutral);
}

.wise-badge-status-neutral-darker {
    background: #cfd7e2;
    color: var(--wise-neutral);
}



.wise-badge-status-info {
    background: var(--wise-info-soft);
    color: var(--wise-info);
}

.wise-badge-status-good {
    background: var(--wise-success-soft);
    color: var(--wise-success-strong);
}

.wise-badge-status-warning {
    background: var(--wise-warning-soft);
    color: var(--wise-warning-strong);
}

.wise-badge-status-danger {
    background: var(--wise-danger-soft);
    color: var(--wise-danger-strong);
}

/* Warianty "purple" to nazwana pozycja palety (WiseStatus.Purple), a nie akcent
   marki - stad literaly zamiast tokenow --wise-primary*. Kiedys byly podpiete pod
   token i po zmianie akcentu na zielen dawaly zielony tekst na fioletowym tle.
   Ta sama zasada co w wise-grid-cells.css. */
.wise-badge-status-purple {
    background: #ede9fe;
    color: #6d28d9;
}


/* Evaluation-level convenience badges */
.wise-level-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: var(--wise-radius-pill);
    font-size: var(--wise-font-size-sm);
    font-weight: 750;
    white-space: nowrap;
}

.wise-level-1,
.wise-level-unfilled {
    background: var(--wise-info-soft);
    color: var(--wise-info);
}

.wise-level-2,
.wise-level-low {
    background: var(--wise-warning-soft);
    color: var(--wise-warning-strong);
}

/* Trzeci stopien skali - fiolet celowo, nie akcent marki. Zielen zderzylaby sie
   z czwartym stopniem (--wise-success-soft). */
.wise-level-3,
.wise-level-high {
    background: #ede9fe;
    color: #6d28d9;
}

.wise-level-4,
.wise-level-surplus {
    background: var(--wise-success-soft);
    color: var(--wise-success-strong);
}


/* ==========================================================================
   6. WiseProgress
   ========================================================================== */

.wise-progress {
    --wp-color: var(--wise-primary);
    --wp-track: #e5e7eb;
    width: 100%;
}

.wise-progress-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--wise-space-3);
    margin-bottom: var(--wise-space-2);
    color: var(--wise-text-muted);
    font-size: var(--wise-font-size-sm);
}

    .wise-progress-label strong {
        color: var(--wise-text-secondary);
        font-weight: 750;
    }

.wise-progress-track {
    position: relative;
    height: 8px;
    border-radius: var(--wise-radius-pill);
    background: var(--wp-track);
    overflow: visible;
}

.wise-progress-bar {
    display: block;
    height: 100%;
    border-radius: var(--wise-radius-pill);
    background: var(--wp-color);
    transition: width var(--wise-transition-slow);
}

.wise-progress-reference {
    position: absolute;
    top: -8px;
    width: 2px;
    height: 24px;
    background: var(--wise-text);
    border-radius: var(--wise-radius-pill);
    z-index: 2;
}

.wise-progress-status-neutral {
    --wp-color: var(--wise-neutral);
}

.wise-progress-status-info {
    --wp-color: var(--wise-info);
}

.wise-progress-status-good {
    --wp-color: var(--wise-success);
}

.wise-progress-status-warning {
    --wp-color: var(--wise-warning);
}

.wise-progress-status-danger {
    --wp-color: var(--wise-danger);
}

.wise-progress-status-purple {
    --wp-color: #7c3aed;
}


/* Segmented comparison scale used in median grids */
.wise-scale {
    position: relative;
    width: 100%;
}

.wise-scale-labels {
    display: flex;
    justify-content: space-between;
    gap: var(--wise-space-3);
    margin-bottom: var(--wise-space-2);
    color: var(--wise-text-muted);
    font-size: var(--wise-font-size-sm);
}

.wise-scale-track {
    position: relative;
    display: flex;
    height: 8px;
    border-radius: var(--wise-radius-pill);
    overflow: visible;
    background: #e5e7eb;
}

.wise-scale-low,
.wise-scale-mid,
.wise-scale-high {
    height: 8px;
}

.wise-scale-low {
    width: 33%;
    background: #fecaca;
    border-radius: var(--wise-radius-pill) 0 0 var(--wise-radius-pill);
}

.wise-scale-mid {
    width: 34%;
    background: #e5e7eb;
}

.wise-scale-high {
    width: 33%;
    background: #bbf7d0;
    border-radius: 0 var(--wise-radius-pill) var(--wise-radius-pill) 0;
}

.wise-scale-marker {
    position: absolute;
    top: -6px;
    width: 20px;
    height: 20px;
    margin-left: -10px;
    border-radius: var(--wise-radius-pill);
    background: var(--wise-info);
    border: 2px solid var(--wise-info-strong);
    box-shadow: 0 2px 6px rgba(37, 99, 235, .24);
    z-index: 3;
}

.wise-scale-reference {
    position: absolute;
    top: -10px;
    width: 2px;
    height: 28px;
    background: var(--wise-text);
    border-radius: var(--wise-radius-pill);
    z-index: 2;
}


/* ==========================================================================
   7. WiseStat
   ========================================================================== */

/* WiseStat — wariant około 30% mniejszy */
.wise-stat-small {
    gap: 11px;
    padding: 13px;
    border-radius: 11px;
    border: 1px solid var(--wise-border-soft);
    background: var(--wise-surface-bg);
}

    .wise-stat-small .wise-stat-icon {
        width: 31px;
        height: 31px;
        border-radius: 10px;
        font-size: 15px;
    }

    .wise-stat-small .wise-stat-label {
        font-size: 12px;
    }

    .wise-stat-small .wise-stat-value {
        margin-top: 1px;
        font-size: 21px;
    }

    .wise-stat-small .wise-stat-hint {
        margin-top: 3px;
        font-size: 12px;
    }

.wise-stat {
    --wst-icon-bg: var(--wise-info-soft);
    --wst-icon-color: var(--wise-info);
    display: flex;
    gap: var(--wise-space-4);
    align-items: flex-start;
    padding: 18px;
    border: 1px solid var(--wise-border-soft);
    border-radius: var(--wise-radius-lg);
    background: var(--wise-surface-bg);
    transition: transform var(--wise-transition-fast), box-shadow var(--wise-transition-fast), border-color var(--wise-transition-fast);
}

    .wise-stat:hover {
        transform: translateY(-1px);
        box-shadow: var(--wise-shadow-sm);
        border-color: var(--wise-border-strong);
    }

.wise-stat-icon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: var(--wst-icon-bg);
    color: var(--wst-icon-color);
    font-size: 22px;
    flex: 0 0 auto;
}

.wise-stat-content {
    min-width: 0;
}

.wise-stat-label {
    color: var(--wise-text-muted);
    font-size: var(--wise-font-size-md);
}

.wise-stat-value {
    margin-top: 2px;
    color: var(--wise-text);
    font-size: var(--wise-font-size-3xl);
    line-height: var(--wise-line-height-tight);
    font-weight: 600;
    letter-spacing: -0.02em;
}

.wise-stat-hint {
    margin-top: 4px;
    color: var(--wise-text-muted);
    font-size: var(--wise-font-size-sm);
}

.wise-stat-status-neutral {
    --wst-icon-bg: var(--wise-neutral-soft);
    --wst-icon-color: var(--wise-neutral);
}

.wise-stat-status-info {
    --wst-icon-bg: var(--wise-info-soft);
    --wst-icon-color: var(--wise-info);
}

.wise-stat-status-good {
    --wst-icon-bg: var(--wise-success-soft);
    --wst-icon-color: var(--wise-success-strong);
}

.wise-stat-status-warning {
    --wst-icon-bg: var(--wise-warning-soft);
    --wst-icon-color: var(--wise-warning-strong);
}

.wise-stat-status-danger {
    --wst-icon-bg: var(--wise-danger-soft);
    --wst-icon-color: var(--wise-danger-strong);
}

.wise-stat-status-purple {
    --wst-icon-bg: #ede9fe;
    --wst-icon-color: #6d28d9;
}


/* ==========================================================================
   8. WiseMetric
   ========================================================================== */

.wise-metric {
    --wm-color: var(--wise-info);
    --wm-color-strong: var(--wise-info-strong);
    --wm-soft: var(--wise-info-soft);
    --wm-softer: var(--wise-info-softer);
    position: relative;
    padding: var(--wise-space-4);
    margin-bottom:10px;
    border: 1px solid var(--wise-border-soft);
    border-radius: var(--wise-radius-lg);
    background: var(--wise-surface-bg);
    overflow: hidden;
    transition: border-color var(--wise-transition-fast), box-shadow var(--wise-transition-fast), transform var(--wise-transition-fast), background-color var(--wise-transition-fast);
}

    .wise-metric::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, var(--wm-softer), transparent 36%);
        opacity: .55;
        pointer-events: none;
    }


.wise-metric-title {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    gap: var(--wise-space-4);
    margin-bottom: var(--wise-space-3);
}

    .wise-metric-title strong {
        color: var(--wise-text);
        font-weight: 750;
    }

    .wise-metric-title p {
        margin: 4px 0 0;
        color: var(--wise-text-muted);
        font-size: var(--wise-font-size-md);
    }

.wise-metric-value {
    text-align: right;
    white-space: nowrap;
}

    .wise-metric-value strong {
        display: block;
        color: var(--wm-color);
        font-size: var(--wise-font-size-2xl);
        line-height: var(--wise-line-height-tight);
        font-weight: 800;
        transition: color var(--wise-transition);
    }

    .wise-metric-value span {
        color: var(--wise-text-muted);
        font-size: var(--wise-font-size-sm);
    }

/* Wariant plaski: metryka bez karty, gdy wiersze maja lezec wprost na tle sekcji.
   Wlaczany przez ExtraCssClasses="wise-metric-flat". */
.wise-metric-flat {
    padding: 0;
    margin-bottom: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    overflow: visible;
}

    .wise-metric-flat::before {
        content: none;
    }

    /* Etykieta poziomu w skali tekstu, a nie wartosci liczbowej. */
    .wise-metric-flat .wise-metric-value strong {
        font-size: var(--wise-font-size-md);
        font-weight: 750;
    }

.wise-metric-status-neutral {
    --wm-color: var(--wise-neutral);
    --wm-color-strong: var(--wise-neutral);
    --wm-soft: var(--wise-neutral-soft);
    --wm-softer: var(--wise-neutral-softer);
}

.wise-metric-status-info {
    --wm-color: var(--wise-info);
    --wm-color-strong: var(--wise-info-strong);
    --wm-soft: var(--wise-info-soft);
    --wm-softer: var(--wise-info-softer);
}

.wise-metric-status-excellent {
    --wm-color: var(--wise-success-strong);
    --wm-color-strong: var(--wise-success-strong);
    --wm-soft: var(--wise-success-soft);
    --wm-softer: var(--wise-success-softer);
}

.wise-metric-status-good {
    --wm-color: var(--wise-success);
    --wm-color-strong: var(--wise-success-strong);
    --wm-soft: var(--wise-success-soft);
    --wm-softer: var(--wise-success-softer);
}

.wise-metric-status-warning {
    --wm-color: var(--wise-warning);
    --wm-color-strong: var(--wise-warning-strong);
    --wm-soft: var(--wise-warning-soft);
    --wm-softer: var(--wise-warning-softer);
}

.wise-metric-status-danger,
.wise-metric-status-bad {
    --wm-color: var(--wise-danger);
    --wm-color-strong: var(--wise-danger-strong);
    --wm-soft: var(--wise-danger-soft);
    --wm-softer: var(--wise-danger-softer);
}

.wise-metric-status-purple {
    --wm-color: #7c3aed;
    --wm-color-strong: #6d28d9;
    --wm-soft: #ede9fe;
    --wm-softer: rgba(124, 58, 237, .05);
}

    .wise-metric-status-excellent .wise-metric-value strong,
    .wise-metric-status-good .wise-metric-value strong,
    .wise-metric-status-warning .wise-metric-value strong,
    .wise-metric-status-danger .wise-metric-value strong,
    .wise-metric-status-bad .wise-metric-value strong,
    .wise-metric-status-info .wise-metric-value strong,
    .wise-metric-status-neutral .wise-metric-value strong,
    .wise-metric-status-purple .wise-metric-value strong {
        color: var(--wm-color);
    }

/* ==========================================================================
   9. WiseInsightList
   ========================================================================== */

.wise-insight-list {
    display: flex;
    flex-direction: column;
}

.wise-insight-item {
    --wi-icon-bg: var(--wise-info-soft);
    --wi-icon-color: var(--wise-info);
    display: flex;
    align-items: center;
    gap: var(--wise-space-4);
    padding: 18px 22px;
    border-bottom: 1px solid var(--wise-border-soft);
    background: var(--wise-surface-bg);
}

    .wise-insight-item:last-child {
        border-bottom: none;
    }

.wise-insight-icon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: var(--wi-icon-bg);
    color: var(--wi-icon-color);
    font-size: 22px;
    flex: 0 0 auto;
}

.wise-insight-content {
    flex: 1;
    min-width: 0;
}

.wise-insight-title {
    font-weight: 750;
    color: var(--wise-text);
}

.wise-insight-description {
    margin-top: 4px;
    color: var(--wise-text-muted);
    font-size: var(--wise-font-size-md);
}

.wise-insight-value {
    font-size: 18px;
    font-weight: 750;
    color: var(--wise-text-secondary);
    white-space: nowrap;
}

.wise-insight-status-neutral {
    --wi-icon-bg: var(--wise-neutral-soft);
    --wi-icon-color: var(--wise-neutral);
}

.wise-insight-status-info {
    --wi-icon-bg: var(--wise-info-soft);
    --wi-icon-color: var(--wise-info);
}

.wise-insight-status-good {
    --wi-icon-bg: var(--wise-success-soft);
    --wi-icon-color: var(--wise-success-strong);
}

.wise-insight-status-warning {
    --wi-icon-bg: var(--wise-warning-soft);
    --wi-icon-color: var(--wise-warning-strong);
}

.wise-insight-status-danger {
    --wi-icon-bg: var(--wise-danger-soft);
    --wi-icon-color: var(--wise-danger-strong);
}

.wise-insight-status-purple {
    --wi-icon-bg: #ede9fe;
    --wi-icon-color: #6d28d9;
}


/* ==========================================================================
   10. WiseTimeline
   ========================================================================== */

.wise-timeline {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px;
}

.wise-timeline-item {
    --wt-node-bg: var(--wise-neutral-soft);
    --wt-node-color: var(--wise-neutral);
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: var(--wise-space-3);
    position: relative;
}

    .wise-timeline-item:not(:last-child)::after {
        content: "";
        position: absolute;
        left: 20px;
        top: 42px;
        bottom: -14px;
        width: 2px;
        background: var(--wise-border-soft);
    }

.wise-timeline-node {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: var(--wise-radius-pill);
    background: var(--wt-node-bg);
    color: var(--wt-node-color);
    font-weight: 800;
    z-index: 1;
}

.wise-timeline-card {
    padding: 14px 16px;
    border: 1px solid var(--wise-border-soft);
    border-radius: var(--wise-radius-lg);
    background: var(--wise-surface-bg);
}

.wise-timeline-title {
    display: flex;
    justify-content: space-between;
    gap: var(--wise-space-3);
}

    .wise-timeline-title strong {
        color: var(--wise-text);
    }

    .wise-timeline-title span {
        color: var(--wise-text-muted);
        font-weight: 750;
    }

.wise-timeline-card p {
    margin: 6px 0 0;
    color: var(--wise-text-muted);
    font-size: var(--wise-font-size-md);
}

.wise-timeline-status-neutral {
    --wt-node-bg: var(--wise-neutral-soft);
    --wt-node-color: var(--wise-neutral);
}

.wise-timeline-status-info {
    --wt-node-bg: var(--wise-info-soft);
    --wt-node-color: var(--wise-info);
}

.wise-timeline-status-good {
    --wt-node-bg: var(--wise-success-soft);
    --wt-node-color: var(--wise-success-strong);
}

.wise-timeline-status-warning {
    --wt-node-bg: var(--wise-warning-soft);
    --wt-node-color: var(--wise-warning-strong);
}

.wise-timeline-status-danger {
    --wt-node-bg: var(--wise-danger-soft);
    --wt-node-color: var(--wise-danger-strong);
}

.wise-timeline-status-purple {
    --wt-node-bg: #ede9fe;
    --wt-node-color: #6d28d9;
}


/* ==========================================================================
   11. WiseToolbar
   ========================================================================== */

.wise-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--wise-space-4);
}

.wise-toolbar-left,
.wise-toolbar-right {
    display: flex;
    align-items: center;
    gap: var(--wise-space-3);
}

.wise-toolbar-wrap {
    flex-wrap: wrap;
}


/* ==========================================================================
   12. WiseSection
   ========================================================================== */

.wise-section {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-bottom: 20px;
}

.wise-section-header h3 {
    margin: 0;
    color: var(--wise-text);
    font-size: var(--wise-font-size-xl);
    font-weight: 750;
    letter-spacing: -0.01em;
}

.wise-section-header p {
    margin: 4px 0 0;
    color: var(--wise-text-muted);
}

.wise-section-body {
    min-width: 0;
}


/* ==========================================================================
   13. WiseDashboard
   ========================================================================== */

.wise-dashboard {
    display: grid;
    grid-template-columns: repeat(var(--wd-columns, 3), minmax(0, 1fr));
    gap: var(--wd-gap, 16px);
}

.wise-dashboard-1 {
    --wd-columns: 1;
}

.wise-dashboard-2 {
    --wd-columns: 2;
}

.wise-dashboard-3 {
    --wd-columns: 3;
}

.wise-dashboard-4 {
    --wd-columns: 4;
}

.wise-dashboard-gap-sm {
    --wd-gap: 12px;
}

.wise-dashboard-gap-md {
    --wd-gap: 16px;
}

.wise-dashboard-gap-lg {
    --wd-gap: 24px;
}


/* ==========================================================================
   14. WiseEmptyState
   ========================================================================== */

.wise-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--wise-space-3);
    min-height: 220px;
    padding: var(--wise-space-8);
    text-align: center;
    color: var(--wise-text-muted);
}

.wise-empty-icon {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    background: var(--wise-neutral-soft);
    color: var(--wise-text-secondary);
    font-size: 28px;
}

.wise-empty-state h3 {
    margin: 4px 0 0;
    color: var(--wise-text);
    font-size: var(--wise-font-size-xl);
}

.wise-empty-state p {
    margin: 0;
    max-width: 420px;
    line-height: var(--wise-line-height-normal);
}

.wise-empty-action {
    margin-top: var(--wise-space-2);
}


/* ==========================================================================
   15. Median comparison grid
   ========================================================================== */

.wise-median-grid {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    border: 1px solid var(--wise-border-soft);
    border-radius: var(--wise-radius-lg);
    background: var(--wise-surface-bg);
}

    .wise-median-grid th,
    .wise-median-grid td {
        padding: 18px;
        border-right: 1px solid var(--wise-border-soft);
        border-bottom: 1px solid var(--wise-border-soft);
        vertical-align: middle;
    }

        .wise-median-grid th:last-child,
        .wise-median-grid td:last-child {
            border-right: none;
        }

    .wise-median-grid tr:last-child td {
        border-bottom: none;
    }

    .wise-median-grid th {
        background: var(--wise-surface-muted-bg);
        text-align: left;
        color: var(--wise-text);
        font-weight: 750;
    }

.wise-metric-name {
    font-weight: 750;
    color: var(--wise-text);
}

.wise-metric-desc {
    margin-top: 4px;
    color: var(--wise-text-muted);
    font-size: var(--wise-font-size-md);
}

.wise-metric-display-value strong {
    display: block;
    color: var(--wise-info);
    font-size: var(--wise-font-size-2xl);
    line-height: var(--wise-line-height-tight);
}

.wise-metric-display-value span {
    color: var(--wise-text-muted);
    font-size: var(--wise-font-size-md);
}

.wise-status-inline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 750;
}

.wise-status-inline-good {
    color: var(--wise-success);
}

.wise-status-inline-danger {
    color: var(--wise-danger);
}

.wise-status-inline-warning {
    color: var(--wise-warning);
}

.wise-status-inline-info {
    color: var(--wise-info);
}


/* ==========================================================================
   16. Buttons and DevExpress harmonization
   ========================================================================== */

.wise-surface .dxbl-btn,
.wise-toolbar .dxbl-btn,
.wise-empty-state .dxbl-btn {
    border-radius: var(--wise-radius-md);
    font-weight: 650;
}

    .wise-surface .dxbl-btn.dxbl-btn-primary,
    .wise-toolbar .dxbl-btn.dxbl-btn-primary {
        box-shadow: var(--wise-shadow-xs);
    }

.wise-surface .dxbl-text-edit,
.wise-surface .dxbl-spin-edit,
.wise-surface .dxbl-combobox {
    border-radius: var(--wise-radius-md);
}


/* ==========================================================================
   17. Responsive behavior
   ========================================================================== */

@media (max-width: 1200px) {
    .wise-dashboard-4 {
        --wd-columns: 2;
    }
}

@media (max-width: 900px) {
    .wise-surface-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .wise-surface-header-actions {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .wise-dashboard,
    .wise-dashboard-2,
    .wise-dashboard-3,
    .wise-dashboard-4 {
        --wd-columns: 1;
    }

    .wise-metric-title,
    .wise-timeline-title {
        flex-direction: column;
    }

    .wise-metric-value {
        text-align: left;
    }

    .wise-insight-item {
        align-items: flex-start;
    }
}

@media (max-width: 640px) {
    .wise-surface-header {
        padding: 18px;
    }

    .wise-surface {
        --ws-content-padding: 16px;
    }

    .wise-surface-header h2,
    .wise-surface-title {
        font-size: 22px;
    }

    .wise-surface-header p,
    .wise-surface-subtitle {
        font-size: 14px;
    }

    .wise-insight-item {
        padding: 16px;
    }

    .wise-stat {
        padding: 16px;
    }

    .wise-grid {
        --wg-padding-y: 10px;
        --wg-padding-x: 12px;
    }
}


/* ==========================================================================
   18. Optional dark surface support
   Apply .wise-theme-dark to a parent container.
   ========================================================================== */

.wise-theme-dark {
    --wise-page-bg: #0b1220;
    --wise-surface-bg: #111827;
    --wise-surface-soft-bg: #0f172a;
    --wise-surface-muted-bg: #1f2937;
    --wise-text: #f9fafb;
    --wise-text-secondary: #e5e7eb;
    --wise-text-muted: #9ca3af;
    --wise-text-placeholder: #6b7280;
    --wise-border: #374151;
    --wise-border-strong: #4b5563;
    --wise-border-soft: #374151;
    --wise-neutral-soft: #1f2937;
    --wise-info-soft: rgba(37, 99, 235, .18);
    --wise-success-soft: rgba(22, 163, 74, .18);
    --wise-warning-soft: rgba(217, 119, 6, .18);
    --wise-danger-soft: rgba(220, 38, 38, .18);
}

    .wise-theme-dark .wise-grid .dxbl-grid-header-row,
    .wise-theme-dark .wise-grid .dxbl-grid-header-cell {
        background: var(--wise-surface-muted-bg);
    }

    .wise-theme-dark .wise-grid-zebra .dxbl-grid-data-row:nth-child(even) {
        background: rgba(255, 255, 255, .02);
    }


/* ==========================================================================
   19. Print tweaks
   ========================================================================== */

@media print {
    .wise-surface {
        box-shadow: none !important;
        border-color: #d0d5dd !important;
    }

    .wise-surface-header-actions,
    .wise-toolbar,
    .dxbl-pager,
    .dxbl-grid-search-box {
        display: none !important;
    }

    .wise-grid .dxbl-grid-data-row:hover {
        background: transparent !important;
    }
}

/* ==========================================================================
   WiseGrid - separated soft rows variant
   Add class `wise-grid-separated` to DxGrid CssClass or wrapper CssClass.
   Example:
   "wise-grid wise-grid-separated wise-grid-density-comfortable"
   ========================================================================== */

.wise-grid-separated {
    --wg-row-gap: 12px;
    --wg-row-bg: #f8fafc;
    --wg-row-border: #e5e7eb;
    --wg-row-radius: 16px;
    --wg-header-bg: #f8fafc;
    --wg-cell-border: transparent;
    border: none;
    box-shadow: none;
    background: transparent;
}

    .wise-grid-separated .dxbl-grid {
        border: none;
        background: transparent;
    }

    .wise-grid-separated .dxbl-grid-table {
        border-collapse: separate !important;
        border-spacing: 0 var(--wg-row-gap) !important;
        background: transparent;
    }

    .wise-grid-separated .dxbl-grid-header-row {
        background: transparent;
    }

    .wise-grid-separated .dxbl-grid-header-cell {
        background: transparent;
        border-top: none;
        border-bottom: none;
        color: #667085;
        font-weight: 750;
        padding-top: 0;
        padding-bottom: 8px;
    }

    .wise-grid-separated .dxbl-grid-data-row {
        background: var(--wg-row-bg);
        box-shadow: inset 0 0 0 1px var(--wg-row-border);
        transition: background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
    }

        .wise-grid-separated .dxbl-grid-data-row:hover {
            background: #ffffff;
            box-shadow: inset 0 0 0 1px #d0d5dd, 0 8px 22px rgba(16, 24, 40, .06);
            transform: translateY(-1px);
        }

    .wise-grid-separated .dxbl-grid-data-cell {
        background: transparent;
        border-top: none;
        border-bottom: none;
        border-color: #e5e7eb;
        padding-top: 18px;
        padding-bottom: 18px;
    }

        .wise-grid-separated .dxbl-grid-data-cell:first-child {
            border-left: none;
            border-top-left-radius: var(--wg-row-radius);
            border-bottom-left-radius: var(--wg-row-radius);
        }

        .wise-grid-separated .dxbl-grid-data-cell:last-child {
            border-right: none;
            border-top-right-radius: var(--wg-row-radius);
            border-bottom-right-radius: var(--wg-row-radius);
        }

    .wise-grid-separated .dxbl-grid-data-row .dxbl-grid-data-cell {
        border-right: 1px solid #e5e7eb;
    }

        .wise-grid-separated .dxbl-grid-data-row .dxbl-grid-data-cell:last-child {
            border-right: none;
        }

    .wise-grid-separated .dxbl-grid-search-panel,
    .wise-grid-separated .dxbl-grid-toolbar-container,
    .wise-grid-separated .dxbl-grid-top-panel {
        padding: 18px 0 10px;
        border-bottom: none;
        background: transparent;
    }

    .wise-grid-separated .dxbl-grid-search-box {
        background: #ffffff;
        border-radius: 14px;
    }

    .wise-grid-separated .dxbl-pager {
        margin-top: 8px;
        border: 1px solid #e5e7eb;
        border-radius: 16px;
        background: #ffffff;
    }

    .wise-grid-separated.wise-grid-density-compact {
        --wg-row-gap: 8px;
        --wg-row-radius: 14px;
    }

        .wise-grid-separated.wise-grid-density-compact .dxbl-grid-data-cell {
            padding-top: 12px;
            padding-bottom: 12px;
        }

    .wise-grid-separated.wise-grid-density-spacious {
        --wg-row-gap: 16px;
        --wg-row-radius: 20px;
    }

        .wise-grid-separated.wise-grid-density-spacious .dxbl-grid-data-cell {
            padding-top: 24px;
            padding-bottom: 24px;
        }

/* ==========================================================================
   WiseGrid - separated rows FIX
   Purpose:
   - card-like rows
   - visible gaps between rows
   - rounded row corners
   - soft gray row background
   - internal vertical dividers
   - padded search/header area

   Required class on DxGrid:
   CssClass="wise-grid wise-grid-separated wise-grid-density-comfortable"
   ========================================================================== */

.wise-grid.wise-grid-separated {
    --wg-row-gap: 12px;
    --wg-row-bg: #f8fafc;
    --wg-row-bg-hover: #ffffff;
    --wg-row-border: #e5e7eb;
    --wg-row-border-hover: #d0d5dd;
    --wg-row-radius: 16px;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    overflow: visible !important;
}

    /* DevExpress outer frame */
    .wise-grid.wise-grid-separated .dxbl-grid {
        border: none !important;
        background: transparent !important;
        overflow: visible !important;
    }

    /* Some DevExpress versions wrap the table differently, so target both the class and plain tables */
    .wise-grid.wise-grid-separated .dxbl-grid-table,
    .wise-grid.wise-grid-separated table {
        border-collapse: separate !important;
        border-spacing: 0 var(--wg-row-gap) !important;
        background: transparent !important;
    }

    /* Header */
    .wise-grid.wise-grid-separated .dxbl-grid-header-row,
    .wise-grid.wise-grid-separated thead tr {
        background: transparent !important;
    }

    .wise-grid.wise-grid-separated .dxbl-grid-header-cell,
    .wise-grid.wise-grid-separated thead th {
        background: transparent !important;
        border-top: none !important;
        border-bottom: none !important;
        color: #667085 !important;
        font-weight: 750 !important;
        padding: 0 var(--wg-padding-x) 8px var(--wg-padding-x) !important;
    }

    /* Row card illusion:
   background/border/radius must be applied to TDs, not only TR,
   because table rows do not paint border-radius reliably. */
    .wise-grid.wise-grid-separated .dxbl-grid-data-row,
    .wise-grid.wise-grid-separated tbody tr {
        background: transparent !important;
        transition: transform 160ms ease;
    }

    .wise-grid.wise-grid-separated .dxbl-grid-data-cell,
    .wise-grid.wise-grid-separated tbody td {
        background: var(--wg-row-bg) !important;
        border-top: 1px solid var(--wg-row-border) !important;
        border-bottom: 1px solid var(--wg-row-border) !important;
        border-right: 1px solid var(--wg-row-border) !important;
        border-left: none !important;
        padding-top: 18px !important;
        padding-bottom: 18px !important;
        vertical-align: middle !important;
    }

        /* First cell creates left rounded side */
        .wise-grid.wise-grid-separated .dxbl-grid-data-cell:first-child,
        .wise-grid.wise-grid-separated tbody td:first-child {
            border-left: 1px solid var(--wg-row-border) !important;
            border-top-left-radius: var(--wg-row-radius) !important;
            border-bottom-left-radius: var(--wg-row-radius) !important;
        }

        /* Last cell creates right rounded side */
        .wise-grid.wise-grid-separated .dxbl-grid-data-cell:last-child,
        .wise-grid.wise-grid-separated tbody td:last-child {
            border-right: 1px solid var(--wg-row-border) !important;
            border-top-right-radius: var(--wg-row-radius) !important;
            border-bottom-right-radius: var(--wg-row-radius) !important;
        }

    /* Hover must color cells, not TR */
    .wise-grid.wise-grid-separated .dxbl-grid-data-row:hover .dxbl-grid-data-cell,
    .wise-grid.wise-grid-separated tbody tr:hover td {
        background: var(--wg-row-bg-hover) !important;
        border-top-color: var(--wg-row-border-hover) !important;
        border-bottom-color: var(--wg-row-border-hover) !important;
        box-shadow: 0 8px 22px rgba(16, 24, 40, .05);
    }

    /* Keep a subtle lift */
    .wise-grid.wise-grid-separated .dxbl-grid-data-row:hover,
    .wise-grid.wise-grid-separated tbody tr:hover {
        transform: translateY(-1px);
    }

    /* Search/top panel */
    .wise-grid.wise-grid-separated .dxbl-grid-search-panel,
    .wise-grid.wise-grid-separated .dxbl-grid-toolbar-container,
    .wise-grid.wise-grid-separated .dxbl-grid-top-panel {
        padding: 18px 0 10px !important;
        border-bottom: none !important;
        background: transparent !important;
    }

    .wise-grid.wise-grid-separated .dxbl-grid-search-box,
    .wise-grid.wise-grid-separated .dxbl-text-edit,
    .wise-grid.wise-grid-separated .dxbl-edit {
        background: #ffffff !important;
        border-radius: 14px !important;
    }

    /* Pager */
    .wise-grid.wise-grid-separated .dxbl-pager {
        margin-top: 8px !important;
        border: 1px solid #e5e7eb !important;
        border-radius: 16px !important;
        background: #ffffff !important;
    }

    /* Density */
    .wise-grid.wise-grid-separated.wise-grid-density-compact {
        --wg-row-gap: 8px;
        --wg-row-radius: 14px;
    }

        .wise-grid.wise-grid-separated.wise-grid-density-compact .dxbl-grid-data-cell,
        .wise-grid.wise-grid-separated.wise-grid-density-compact tbody td {
            padding-top: 12px !important;
            padding-bottom: 12px !important;
        }

    .wise-grid.wise-grid-separated.wise-grid-density-spacious {
        --wg-row-gap: 16px;
        --wg-row-radius: 20px;
    }

        .wise-grid.wise-grid-separated.wise-grid-density-spacious .dxbl-grid-data-cell,
        .wise-grid.wise-grid-separated.wise-grid-density-spacious tbody td {
            padding-top: 24px !important;
            padding-bottom: 24px !important;
        }

    /* Disable zebra inside separated mode: each row is already a card */
    .wise-grid.wise-grid-separated.wise-grid-zebra .dxbl-grid-data-row:nth-child(even) .dxbl-grid-data-cell,
    .wise-grid.wise-grid-separated.wise-grid-zebra tbody tr:nth-child(even) td {
        background: var(--wg-row-bg) !important;
    }


/* ==========================================================================
   20. WiseBadge - segmented group
   Skala poziomów, na której podświetlony jest tylko poziom bieżący.
   Wrap WiseBadge elements in `.wise-badge-group` and pass
   `wise-badge-group-item` (plus `-selected`) via ExtraCssClasses.
   ========================================================================== */

.wise-badge-group {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border-radius: var(--wise-radius-pill);
    background: var(--wise-neutral-soft);
    max-width: 100%;
    flex-wrap: wrap;
}

/* Przezroczysta ramka na każdym elemencie, żeby zaznaczenie nie przesuwało sąsiadów. */
.wise-badge-group-item {
    background: transparent;
    color: var(--wise-text-muted);
    font-weight: 600;
    padding: 6px 13px;
    border: 1px solid transparent;
}

/* Biala pigulka na szarym torze. Kolor tekstu moze nadpisac warstwa domenowa,
   np. skala poziomow profilu - patrz .profile-rate-level-*. */
.wise-badge-group-item-selected {
    background: var(--wise-surface-bg);
    color: var(--wise-text);
    font-weight: 750;
    border-color: var(--wise-border-soft);
    box-shadow: var(--wise-shadow-sm);
}


/* ==========================================================================
   21. Employee scientific profile dashboard
   Layout klas używanych przez EmployeeScientificProfileDashboard.razor.
   ========================================================================== */

.profile-rate-scale {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--wise-space-3);
    min-width: 0;
}

.profile-rate-summary {
    margin: 0;
    max-width: 640px;
    color: var(--wise-text-muted);
    font-size: var(--wise-font-size-md);
    line-height: var(--wise-line-height-normal);
    text-align: left;
}

/* Kolor wybranego poziomu na skali. Idzie po sekcji 20, wiec nadpisuje neutralny
   kolor tekstu z .wise-badge-group-item-selected przy tej samej specyficznosci. */
.profile-rate-level-needssupport {
    color: var(--wise-danger);
}

.profile-rate-level-developing {
    color: var(--wise-warning);
}

.profile-rate-level-stable {
    color: var(--wise-info);
}

.profile-rate-level-strong {
    color: var(--wise-success-strong);
}

.profile-rate-level-leaders {
    color: var(--wise-success);
}

.profile-criteria {
    display: flex;
    flex-direction: column;
    gap: var(--wise-space-6);
    max-width: 720px;
}

.publication-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(340px, 1fr);
    gap: var(--wise-space-4);
    align-items: stretch;
}

/* Kolumna statystyk ma licowac sie z karta wykresu, wiec wiersze dziela jej wysokosc
   po rowno. 1fr to minmax(auto, 1fr), wiec gdy wykres jest nizszy niz naturalna
   wysokosc kafelkow, nic sie nie sciska. */
.publication-layout > .wise-dashboard {
    height: 100%;
    grid-auto-rows: 1fr;
}

    /* W wyzszym kafelku tresc wysrodkowana pionowo zamiast wisiec u gory. */
    .publication-layout .wise-stat {
        align-items: center;
    }

.publication-chart-card {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 320px;
    padding: var(--wise-space-4);
    border: 1px solid var(--wise-border-soft);
    border-radius: var(--wise-radius-lg);
    background: var(--wise-surface-bg);
}

@media (max-width: 1200px) {
    .publication-layout {
        grid-template-columns: 1fr;
    }

    .profile-criteria {
        max-width: none;
    }
}

@media (max-width: 768px) {
    .profile-rate-scale {
        align-items: stretch;
    }

    .wise-badge-group {
        justify-content: flex-start;
    }
}


/* ==========================================================================
   22. WiseDonut
   Kolor wycinka nadaje klasa przekazana w WiseDonutSegment.CssClass,
   ustawiajaca `stroke` - komponent sam nie zna zadnej palety.
   ========================================================================== */

.wise-donut {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    max-width: 240px;
    margin-inline: auto;
}

.wise-donut-svg {
    display: block;
    width: 100%;
    height: auto;
}

.wise-donut-track {
    stroke: var(--wise-neutral-soft);
}

.wise-donut-segment {
    stroke: var(--wise-border-strong);
}

.wise-donut-center {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    pointer-events: none;
}

.wise-donut-center-label {
    color: var(--wise-text-muted);
    font-size: var(--wise-font-size-sm);
    line-height: var(--wise-line-height-tight);
}

.wise-donut-center-value {
    margin-top: 2px;
    color: var(--wise-text);
    font-size: var(--wise-font-size-2xl);
    font-weight: 700;
    line-height: var(--wise-line-height-tight);
}


/* ==========================================================================
   23. Organizational scientific profile view
   Layout klas uzywanych przez OrglScientificProfileView.razor.
   ========================================================================== */

.team-structure-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 1fr);
    gap: var(--wise-space-4);
    align-items: stretch;
}

.group-distribution {
    display: flex;
    flex-direction: column;
    gap: var(--wise-space-5);
    min-width: 0;
}

.group-distribution-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--wise-space-4);
}

.group-distribution-name {
    display: flex;
    align-items: flex-start;
    gap: var(--wise-space-2);
    min-width: 0;
}

.group-distribution-name-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.group-distribution-title {
    color: var(--wise-text);
    font-size: var(--wise-font-size-md);
    font-weight: 700;
    line-height: var(--wise-line-height-tight);
}

.group-distribution-subtitle {
    margin-top: 3px;
    color: var(--wise-text-muted);
    font-size: var(--wise-font-size-sm);
    line-height: var(--wise-line-height-normal);
}

.group-distribution-value {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex: 0 0 auto;
    white-space: nowrap;
}

.group-distribution-count {
    display: flex;
    align-items: baseline;
    gap: 3px;
    color: var(--wise-text);
}

    .group-distribution-count b {
        font-size: var(--wise-font-size-lg);
        font-weight: 700;
    }

    .group-distribution-count span {
        color: var(--wise-text-muted);
        font-size: var(--wise-font-size-xs);
    }

.group-distribution-share {
    color: var(--wise-text-muted);
    font-size: var(--wise-font-size-xs);
}

.group-marker {
    width: 10px;
    height: 10px;
    flex: 0 0 10px;
    margin-top: 5px;
    border-radius: var(--wise-radius-pill);
    background: var(--wise-border-strong);
}

/* Paleta poziomow, ta sama co skala na profilu pracownika. `background` maluje
   kropke na liscie, `stroke` ten sam poziom na pierscieniu - jedno zrodlo prawdy. */
.group-level-needssupport {
    background: var(--wise-danger);
    stroke: var(--wise-danger);
}

.group-level-developing {
    background: var(--wise-warning);
    stroke: var(--wise-warning);
}

.group-level-stable {
    background: var(--wise-info);
    stroke: var(--wise-info);
}

.group-level-strong {
    background: var(--wise-success-strong);
    stroke: var(--wise-success-strong);
}

.group-level-leaders {
    background: var(--wise-success);
    stroke: var(--wise-success);
}

.team-chart-card {
    display: grid;
    place-items: center;
    min-height: 260px;
    padding: var(--wise-space-4);
    border: 1px solid var(--wise-border-soft);
    border-radius: var(--wise-radius-lg);
    background: var(--wise-surface-bg);
}

@media (max-width: 1200px) {
    .team-structure-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .group-distribution-row {
        flex-direction: column;
        gap: var(--wise-space-2);
    }

    .group-distribution-value {
        align-items: flex-start;
    }
}


/* ==========================================================================
   25. Siatka pracownikow w dashboardzie jednostki
   Przeniesione z bloku <style> w OrglScientificProfilePeopleView.razor - blok
   <style> w komponencie nie jest scope'owany i nadpisywal wspolny arkusz.
   ========================================================================== */

.employee-name-cell {
    display: flex;
    align-items: center;
    height: 100%;
    min-height: 72px;
}

.employee-name-cell strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ==========================================================================
   26. Katalog raportow w nawigacji
   Sidebar renderuje pozycje wprost z IScientificReportCatalog (WiseReportCatalogNav),
   nie z wezlow nawigacji XAF - stad wlasne klasy zamiast .wise-nav-*.
   ========================================================================== */

.wise-report-catalog {
    display: flex;
    flex-direction: column;
    gap: var(--wise-space-3);
    padding: var(--wise-space-4) var(--wise-space-3) var(--wise-space-3);
}

.wise-report-catalog-head {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.wise-report-catalog-title {
    font-size: var(--wise-font-size-lg);
    font-weight: 700;
    color: var(--wise-text);
}

.wise-report-catalog-lead {
    font-size: var(--wise-font-size-sm);
    color: var(--wise-text-muted);
}

.wise-report-catalog-filter input {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid var(--wise-border);
    border-radius: var(--wise-radius-sm);
    background: var(--wise-surface-bg);
    font-size: var(--wise-font-size-sm);
    color: var(--wise-text);
}

.wise-report-catalog-filter input::placeholder {
    color: var(--wise-text-placeholder);
}

.wise-report-catalog-list {
    display: flex;
    flex-direction: column;
    gap: var(--wise-space-2);
}

.wise-report-catalog-row {
    display: flex;
    align-items: flex-start;
    gap: var(--wise-space-3);
    width: 100%;
    padding: var(--wise-space-3);
    border: 1px solid var(--wise-border);
    border-radius: var(--wise-radius-md);
    background: var(--wise-surface-bg);
    text-align: left;
    cursor: pointer;
}

.wise-report-catalog-row:hover:not(:disabled) {
    border-color: var(--wise-border-strong);
    background: var(--wise-surface-soft-bg);
}

.wise-report-catalog-row-selected {
    border-color: var(--wise-primary);
    background: var(--wise-primary-soft);
}

/* Raport bez poziomu wybranego podmiotu - widoczny, zeby bylo wiadomo, ze istnieje. */
.wise-report-catalog-row-disabled {
    opacity: .45;
    cursor: not-allowed;
}

.wise-report-catalog-row-loading {
    border-color: var(--wise-primary);
}

/* Tlo neutralne, nie firmowe: zaznaczony wiersz katalogu jest juz fioletowy,
   wiec fioletowy kafelek rozplynalby sie w nim. */
.wise-report-catalog-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 40px;
    height: 40px;
    border-radius: var(--wise-radius-sm);
    background: var(--wise-surface-muted-bg);
}

.wise-report-catalog-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
}

.wise-report-catalog-caption {
    font-size: var(--wise-font-size-sm);
    font-weight: 600;
    color: var(--wise-text);
}

.wise-report-catalog-description {
    font-size: var(--wise-font-size-xs);
    color: var(--wise-text-muted);
}

.wise-report-catalog-chevron {
    flex: 0 0 auto;
    align-self: center;
    width: 6px;
    height: 6px;
    border-top: 1.5px solid var(--wise-text-muted);
    border-right: 1.5px solid var(--wise-text-muted);
    transform: rotate(45deg);
}

.wise-report-catalog-empty {
    margin: 0;
    padding: var(--wise-space-2);
    font-size: var(--wise-font-size-sm);
    color: var(--wise-text-muted);
}

/* --------------------------------------------------------------------------
   26a. Foldery katalogu
   Ramka obejmuje caly folder. Naglowek jest pelnoprawnym kafelkiem (ikona z GroupIcon,
   nazwa, opis, chevron obracajacy sie przy rozwinieciu), a raporty w srodku maja krotka
   forme: szare kafelki z biala ikona, bez opisu i bez wlasnej obwodki - ramka w ramce
   zjadalaby szerokosc sidebara.
   Reguly nizej nadpisuja .wise-report-catalog-row*, wiec musza zostac PO nich.
   -------------------------------------------------------------------------- */

.wise-report-catalog-folder {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--wise-border);
    border-radius: var(--wise-radius-md);
    background: var(--wise-surface-bg);
    overflow: hidden;
}

.wise-report-catalog-folder-head {
    display: flex;
    align-items: flex-start;
    gap: var(--wise-space-3);
    width: 100%;
    padding: var(--wise-space-3);
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.wise-report-catalog-folder-head:hover {
    background: var(--wise-surface-soft-bg);
}

/* Bez kreski pod naglowkiem rozwinietego folderu: wiersze maja wlasne szare tlo,
   wiec same sie od niego odcinaja - kreska dokladalaby druga granice w tym samym miejscu. */

/* Chevron wiersza pokazuje w prawo (wejscie w raport); chevron folderu obraca sie
   w dol po rozwinieciu. */
.wise-report-catalog-folder-open .wise-report-catalog-folder-head .wise-report-catalog-chevron {
    transform: rotate(135deg);
}

/* Wieksze wciecie z lewej niz z prawej: to ono pokazuje, ze wiersze naleza do folderu
   nad nimi. Symetryczny padding czytal sie jak osobna lista wewnatrz ramki. */
.wise-report-catalog-folder-body {
    display: flex;
    flex-direction: column;
    gap: var(--wise-space-2);
    padding: 0 var(--wise-space-2) var(--wise-space-2) var(--wise-space-7);
}

/* Krotka forma wiersza: raport w folderze to jedna linia - mniejsza ikona, sama nazwa.
   Granice wiersza niesie wypelnienie, nie obwodka: ramka w ramce folderu zjadalaby
   szerokosc sidebara. Opis schodzi do podpowiedzi (title), zeby rozwiniety folder nie
   byl sciana tekstu - renderuje go warunek w ReportRow, nie CSS. */
.wise-report-catalog-row-nested {
    align-items: center;
    gap: var(--wise-space-3);
    padding: var(--wise-space-2);
    /* Ramka zostaje przezroczysta zamiast zniknac - inaczej wiersze w folderze
       przesunelyby sie o piksel wzgledem tych luzem. */
    border-color: transparent;
    border-radius: var(--wise-radius-md);
    background: var(--wise-neutral-soft);
}

/* Kafelek ikony bialy na szarym wierszu - odwrotnie niz w kafelku luzem, gdzie szary
   kafelek odcina sie od bialego tla. */
.wise-report-catalog-row-nested .wise-report-catalog-icon {
    flex: 0 0 32px;
    height: 32px;
    background: var(--wise-surface-bg);
}

.wise-report-catalog-row-nested:hover:not(:disabled) {
    border-color: transparent;
    background: var(--wise-neutral-softer);
}

/* Wyroznienie aktywnego raportu w folderze niesie tlo, nie obwodka. */
.wise-report-catalog-row-nested.wise-report-catalog-row-selected {
    border-color: transparent;
    background: var(--wise-primary-soft);
}

.wise-report-catalog-row-nested.wise-report-catalog-row-loading {
    border-color: var(--wise-primary);
}

.wise-nav-section-separator {
    height: 1px;
    margin: var(--wise-space-2) var(--wise-space-3);
    background: var(--wise-border-soft);
}

/* ==========================================================================
   27. Naglowek raportu
   Rysuje go powloka (CustomMainFormTemplateComponent -> WiseReportHeader), a nie
   widok raportu - ten sam pasek stoi nad lista raportu i nad raportem podmiotu.
   ========================================================================== */

.wise-report-header {
    display: flex;
    /* Kafelek ikony jest wyzszy niz dwie linie tekstu - przy flex-start tekst
       wisialby przy jego gornej krawedzi zamiast stac naprzeciw srodka. */
    align-items: center;
    gap: var(--wise-space-4);
    flex-shrink: 0;
    padding: var(--wise-space-4);
    margin: var(--wise-space-4) var(--wise-space-4) 0;
    border: 1px solid var(--wise-border);
    border-radius: var(--wise-radius-md);
    background: var(--wise-surface-soft-bg);
}

/* Kafelek ikony jest celowo duzy - to on niesie rozpoznawalnosc raportu,
   nazwa i opis sa wtorne. Proporcja jak w makiecie: kafelek ~2x wysokosc
   bloku tekstu, ikona zajmuje nieco ponad polowe kafelka. */
.wise-report-header-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 72px;
    height: 72px;
    border-radius: var(--wise-radius-md);
    background: var(--wise-primary-soft);
}

.wise-report-header-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
}

.wise-report-header-title {
    margin: 0;
    font-size: var(--wise-font-size-xl);
    font-weight: 700;
    color: var(--wise-text);
}

.wise-report-header-description {
    margin: 0;
    font-size: var(--wise-font-size-sm);
    color: var(--wise-text-muted);
}

/* ==========================================================================
   28. Zakladki poziomow raportu
   Zakladka to przelaczenie na drugi widok listy (wlasny adres), nie druga siatka
   w tym samym widoku - stad zwykle przyciski nawigujace, a nie kontrolka zakladek.
   ========================================================================== */

.wise-report-tabs {
    display: flex;
    align-items: center;
    gap: var(--wise-space-4);
    flex-shrink: 0;
    padding: 0 var(--wise-space-4);
    margin-top: var(--wise-space-3);
    border-bottom: 1px solid var(--wise-border);
}

.wise-report-tab {
    padding: var(--wise-space-2) 2px var(--wise-space-3);
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    font-size: var(--wise-font-size-sm);
    font-weight: 600;
    color: var(--wise-text-muted);
    cursor: pointer;
}

.wise-report-tab:hover {
    color: var(--wise-text-secondary);
}

.wise-report-tab-selected {
    color: var(--wise-primary);
    border-bottom-color: var(--wise-primary);
}

/* ==========================================================================
   29. Breadcrumb i zamkniecie raportu
   Prawa strona naglowka raportu podmiotu. Na ekranie listy nie renderuje sie wcale.
   ========================================================================== */

.wise-report-header-side {
    display: flex;
    align-items: center;
    gap: var(--wise-space-4);
    flex: 0 0 auto;
    margin-left: auto;
}

.wise-report-breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--wise-space-2);
    flex-wrap: wrap;
    font-size: var(--wise-font-size-sm);
}

.wise-report-crumb {
    padding: 0;
    border: 0;
    background: none;
    font-size: inherit;
    font-weight: 600;
    color: var(--wise-primary);
    cursor: pointer;
    text-decoration: underline;
}

.wise-report-crumb-separator {
    color: var(--wise-text-placeholder);
}

.wise-report-crumb-current {
    font-weight: 600;
    color: var(--wise-text-secondary);
}

.wise-report-close {
    padding: 6px 14px;
    border: 1px solid var(--wise-border-strong);
    border-radius: var(--wise-radius-sm);
    background: var(--wise-surface-bg);
    font-size: var(--wise-font-size-sm);
    font-weight: 600;
    color: var(--wise-text-secondary);
    cursor: pointer;
}

.wise-report-close:hover {
    border-color: var(--wise-text-muted);
    color: var(--wise-text);
}

/* ==========================================================================
   30. Hover na siatce listy raportu
   Wiersz listy otwiera raport wybranego podmiotu, wiec musi wygladac na klikalny.

   Zakres wyznacza naglowek: WiseReportHeader doklada .wise-report-header-list,
   gdy adres wskazuje liste raportu (zakladki Jednostki/Osoby, lista Autorstw).
   Naglowek i .wise-main-content sa rodzenstwem w DOM, stad selektor "~".
   Nie da sie tego oprzec o stan szablonu powloki - ten zamarza na pierwszym
   renderze, bo powloka nie przerysowuje sie przy podmianie widoku.

   Dashboardy raportu podmiotu zostaja nietkniete: tam naglowek nie ma tej klasy,
   a ich siatki maja wlasny hover (.wise-grid-hover, wise-grid-cells.css).

   Tlo idzie na komorki, nie na TR - DevExpress maluje tlo na komorce, wiec kolor
   na wierszu jest niewidoczny. Dwa warianty selektora, bo nazwy klas dxbl-*
   zmieniaja sie miedzy wersjami; tak samo asekuruje sie .wise-grid-separated.
   ========================================================================== */

.wise-report-header-list ~ .wise-main-content .dxbl-grid-data-row:hover > .dxbl-grid-data-cell,
.wise-report-header-list ~ .wise-main-content tbody tr:hover > td {
    background: var(--wise-success-softer) !important;
    cursor: pointer;
}