/* Wise grid cell components */

.wise-grid {
    --wg-padding-y: 16px;
    --wg-padding-x: 20px;
    --wg-header-bg: #f9fafb;
    --wg-cell-border: #eaecf0;
    --wg-cell-text: #344054;
    --wg-header-text: #344054;
    /* Akcent marki - bierzemy z tokenu, zeby nie rozjechal sie z sekcja 1
       wise-components.css. Warianty *-cell-purple ponizej to co innego:
       nazwana pozycja palety, ktora ma zostac fioletowa. */
    --wg-hover-bg: var(--wise-primary-softer);
    --wg-zebra-bg: #fcfcfd;

    width: 100%;
    margin: 0;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}

.wise-badge-cell {
    display: inline-flex;
    align-items: center;
    gap: var(--wise-space-2);
    white-space: normal;
}

.wise-badge-cell-content {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    line-height: 1.2;
}

.wise-badge-cell-title,
.wise-badge-cell-subtitle {
    display: block;
}

.wise-badge-cell-title {
    font-size: var(--wise-font-size-sm);
}

.wise-badge-cell-subtitle {
    font-size: var(--wise-font-size-xs);
    opacity: .85;
}

.wise-badge-cell-title-bold .wise-badge-cell-title {
    font-weight: 750;
}

.wise-badge-cell-subtitle-bold .wise-badge-cell-subtitle {
    font-weight: 750;
}

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

.wise-grid .dxbl-grid-header-row,
.wise-grid .dxbl-grid-header-cell {
    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);
}

.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);
    vertical-align: middle;
}

.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);
}

.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;
}

/* BadgeCell */

.wise-badge-cell {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 750;
    white-space: nowrap;
}

.wise-badge-cell-neutral { background: #f2f4f7; color: #344054; }
.wise-badge-cell-info { background: #dbeafe; color: #2563eb; }
.wise-badge-cell-good { background: #dcfce7; color: #15803d; }
.wise-badge-cell-warning { background: #fef3c7; color: #b45309; }
.wise-badge-cell-danger { background: #fee2e2; color: #b91c1c; }
.wise-badge-cell-purple { background: #ede9fe; color: #6d28d9; }

/* ProgressCell */

.wise-progress-cell {
    /* Domyslny akcent, gdy komorka nie dostala wariantu - z tokenu marki. */
    --wpc-color: var(--wise-primary);
    min-width: 140px;
}

.wise-progress-cell-header {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
    color: #667085;
    font-size: 12px;
}

.wise-progress-cell-header strong {
    color: #101828;
}

.wise-progress-cell-track {
    position: relative;
    height: 7px;
    border-radius: 999px;
    background: #e5e7eb;
}

.wise-progress-cell-bar {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--wpc-color);
}

.wise-progress-cell-reference {
    position: absolute;
    top: -7px;
    width: 2px;
    height: 21px;
    background: #111827;
    z-index: 2;
}

.wise-progress-cell-hint {
    margin-top: 6px;
    color: #667085;
    font-size: 12px;
}

.wise-progress-cell-neutral { --wpc-color: #667085; }
.wise-progress-cell-info { --wpc-color: #2563eb; }
.wise-progress-cell-good { --wpc-color: #16a34a; }
.wise-progress-cell-warning { --wpc-color: #d97706; }
.wise-progress-cell-danger { --wpc-color: #dc2626; }
.wise-progress-cell-purple { --wpc-color: #7c3aed; }

/* MetricCell */

.wise-metric-cell {
    --wmc-color: #2563eb;
    min-width: 170px;
}

.wise-metric-cell-main {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.wise-metric-cell-label,
.wise-metric-cell-reference-label,
.wise-metric-cell-hint {
    color: #667085;
    font-size: 12px;
}

.wise-metric-cell-value {
    color: var(--wmc-color);
    font-size: 20px;
    font-weight: 800;
    line-height: 1.1;
}

.wise-metric-cell-scale {
    position: relative;
    height: 7px;
    border-radius: 999px;
    background:
        linear-gradient(to right,
            #fecaca 0%,
            #fecaca 33%,
            #e5e7eb 33%,
            #e5e7eb 66%,
            #bbf7d0 66%,
            #bbf7d0 100%);
}

.wise-metric-cell-marker {
    position: absolute;
    top: -6px;
    width: 18px;
    height: 18px;
    margin-left: -9px;
    border-radius: 999px;
    background: var(--wmc-color);
    border: 2px solid #ffffff;
    box-shadow: 0 1px 4px rgba(16, 24, 40, .22);
}

.wise-metric-cell-reference {
    position: absolute;
    top: -8px;
    width: 2px;
    height: 23px;
    background: #111827;
}

.wise-metric-cell-hint {
    margin-top: 6px;
}

.wise-metric-cell-neutral { --wmc-color: #667085; }
.wise-metric-cell-info { --wmc-color: #2563eb; }
.wise-metric-cell-good { --wmc-color: #16a34a; }
.wise-metric-cell-warning { --wmc-color: #d97706; }
.wise-metric-cell-danger { --wmc-color: #dc2626; }
.wise-metric-cell-purple { --wmc-color: #7c3aed; }

/* StatCell */

.wise-stat-cell {
    --wsc-color: #344054;
}

.wise-stat-cell-label {
    color: #667085;
    font-size: 12px;
}

.wise-stat-cell-value {
    margin-top: 2px;
    color: var(--wsc-color);
    font-size: 22px;
    font-weight: 800;
    line-height: 1.15;
}

.wise-stat-cell-hint {
    margin-top: 4px;
    color: #667085;
    font-size: 12px;
}

.wise-stat-cell-info { --wsc-color: #2563eb; }
.wise-stat-cell-good { --wsc-color: #16a34a; }
.wise-stat-cell-warning { --wsc-color: #d97706; }
.wise-stat-cell-danger { --wsc-color: #dc2626; }
.wise-stat-cell-purple { --wsc-color: #7c3aed; }

/* InsightCell */

.wise-insight-cell {
    --wic-bg: #dbeafe;
    --wic-color: #2563eb;

    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 220px;
}

.wise-insight-cell-icon {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: var(--wic-bg);
    color: var(--wic-color);
    font-weight: 800;
    flex: 0 0 auto;
}

.wise-insight-cell-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.wise-insight-cell-content strong {
    color: #101828;
    font-size: 13px;
}

.wise-insight-cell-content span {
    color: #667085;
    font-size: 12px;
}

.wise-insight-cell-neutral { --wic-bg: #f2f4f7; --wic-color: #344054; }
.wise-insight-cell-info { --wic-bg: #dbeafe; --wic-color: #2563eb; }
.wise-insight-cell-good { --wic-bg: #dcfce7; --wic-color: #15803d; }
.wise-insight-cell-warning { --wic-bg: #fef3c7; --wic-color: #b45309; }
.wise-insight-cell-danger { --wic-bg: #fee2e2; --wic-color: #b91c1c; }
.wise-insight-cell-purple { --wic-bg: #ede9fe; --wic-color: #6d28d9; }

/* StackCell */

.wise-stack-cell {
    min-width: 160px;
}

.wise-stack-cell-bar {
    display: flex;
    width: 100%;
    height: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: #e5e7eb;
}

.wise-stack-cell-segment {
    height: 100%;
}

.wise-stack-cell-neutral { background: #98a2b3; }
.wise-stack-cell-info { background: #2563eb; }
.wise-stack-cell-good { background: #16a34a; }
.wise-stack-cell-warning { background: #d97706; }
.wise-stack-cell-danger { background: #dc2626; }
.wise-stack-cell-purple { background: #7c3aed; }

.wise-stack-cell-labels {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
    color: #667085;
    font-size: 12px;
}

.wise-stack-cell-labels strong {
    color: #344054;
}

/* ActionCell */

.wise-action-cell {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

/* ==========================================================================
   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;
}

/* Wyśrodkowane kolumny liczbowe - komórki i nagłówek (CenteredColumns.cs; klasę dokłada
   CustomizeElement siatki). !important, bo DevExpress/XAF wyrównuje liczby do prawej
   własną regułą. Środkujemy też wszystko w środku, bez zakładania, jak DevExpress
   zagnieżdża podpis nagłówka i ikonę sortowania. */
.wise-grid-col-center,
.wise-grid-col-center * {
    text-align: center !important;
    justify-content: center !important;
}