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

/* ==========================================================================
   Komorka profilu naukowego pracownika
   Przeniesione z bloku <style> w EmployeeScientificProfileGridCell.razor.
   Blok <style> w komponencie nie jest scope'owany - trafia do dokumentu globalnie
   i ladujac pozniej w DOM nadpisuje wspolny arkusz.

   UWAGA: kolory zostaly przeniesione doslownie (#rrggbb). Nie podmienialem ich na
   tokeny --wise-*, zeby przenosiny nie zmienily wygladu. Do ujednolicenia osobno.
   ========================================================================== */

.scientific-profile-cell {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    min-width: 360px;
    padding: .7rem .8rem;
    line-height: 1.25;
}

.scientific-profile-cell--clickable {
    cursor: pointer;
    border-radius: 8px;
    transition: background-color .15s ease;
}

.scientific-profile-cell--clickable:hover {
    background: #f8fafc;
}

.scientific-profile-cell__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

.scientific-profile-cell__employee {
    min-width: 0;
    overflow: hidden;
    font-size: .95rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.scientific-profile-cell__metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(64px, 1fr));
    gap: .35rem;
}

.scientific-profile-cell__metric {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: .35rem .45rem;
    background: #f8fafc;
    border-radius: 6px;
}

.scientific-profile-cell__value {
    font-size: .95rem;
    font-weight: 700;
    color: #111827;
}

.scientific-profile-cell__label {
    overflow: hidden;
    font-size: .68rem;
    color: #6b7280;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.scientific-profile-cell__criteria {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1.5rem;
    font-size: .72rem;
    color: #6b7280;
}

.scientific-profile-cell__criteria strong {
    font-weight: 600;
}

.scientific-profile-cell__level--good {
    color: #15803d;
}

.scientific-profile-cell__level--info {
    color: #0369a1;
}

.scientific-profile-cell__level--neutral {
    color: #4b5563;
}

.scientific-profile-cell__level--warning {
    color: #b45309;
}

.scientific-profile-cell__level--danger {
    color: #b91c1c;
}

.scientific-profile-cell__over-slot {
    font-size: .7rem;
    font-weight: 600;
    color: #15803d;
}

@media (max-width: 900px) {
    .scientific-profile-cell {
        min-width: 280px;
    }

    .scientific-profile-cell__metrics {
        grid-template-columns: repeat(2, minmax(80px, 1fr));
    }
}