/*-----------------------------------*\
  #wunderbaum-pms.css
  Override Wunderbaum styles to match QuickGrid pms-grid look & feel
\*-----------------------------------*/

/* ─── Grid container ─── */
.wb-grid {
    --wb-col-padding-x: 16px;
    --wb-active-column-color: transparent;
    --wb-active-cell-color: transparent;
    --wb-active-header-column-color: transparent;
    --wb-active-border-color: var(--kappel);
    width: 100% !important;
    border-collapse: separate;
    border-spacing: 0;
    border: none !important;
    border-radius: var(--radius-5);
    overflow: hidden;
    box-shadow: var(--shadow-1);
    background-color: var(--white);
    font-family: var(--ff-poppins);
}

/* ─── Header row ─── */
div.wb-grid div.wb-header {
    --wb-header-height: var(--wb-row-outer-height);
    background-color: var(--white);
    border-bottom: 1px solid var(--platinum);
}

div.wb-grid div.wb-header span.wb-col {
    background-color: hsla(var(--color), 0.35);
    font-family: var(--ff-league_spartan);
    font-size: var(--fs-5);
    font-weight: var(--fw-500);
    color: var(--eerie-black-1);
    text-align: center;
    white-space: nowrap;
    user-select: none;
    border-bottom: none;
}

div.wb-grid div.wb-header span.wb-col:hover {
    background-color: hsla(var(--color), 0.5);
}

/* ─── Body rows ─── */
div.wb-grid div.wb-row {
    border-bottom: 1px solid var(--platinum);
    transition: var(--transition-1);
}

.wb-grid .wb-row:hover {
    background-color: var(--kappel_15);
}

.wb-grid .wb-row:last-child {
    border-bottom: none;
}

/* ─── Body cells ─── */
.wb-grid .wb-row .wb-col {
    font-size: var(--fs-7);
    color: var(--eerie-black-1);
    vertical-align: middle;
}

.wb-grid .wb-row .wb-col[data-col-id="*"] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    line-height: normal;
}

.wb-grid .wb-row .wb-col.col-actions {
    white-space: nowrap;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ─── Main node column (title) ─── */
.wb-grid .wb-col[data-col-id="*"] {
    text-align: left;
}

/* ─── Node title text ─── */
.wb-grid .wb-node-title {
    font-family: var(--ff-poppins);
    font-size: var(--fs-7);
}

/* ─── Expander icon ─── */
.wb-grid .wb-expander {
    color: var(--quick-silver);
    transition: var(--transition-1);
}

.wb-grid .wb-row:hover .wb-expander {
    color: var(--kappel);
}

/* ─── Checkbox ─── */
.wb-grid .wb-checkbox {
    color: var(--quick-silver);
}

/* ─── Alternating rows ─── */
.wb-grid.wb-alternate .wb-row:nth-child(even) {
    background-color: hsla(var(--color), 0.05);
}

.wb-grid.wb-alternate .wb-row:nth-child(even):hover {
    background-color: var(--kappel_15);
}

/* ─── Focus / Active row ─── */
.wb-grid .wb-row.wb-active {
    background-color: hsla(var(--color), 0.12);
    outline: none;
}

/* ─── Loading skeleton ─── */
.wb-skeleton.wb-initializing {
    min-height: 120px;
    border-radius: var(--radius-5);
    background: var(--isabelline);
}

/* ─── List container ─── */
.wb-list-container {
    min-width: 100%;
}

/* ─── Filter match highlight ─── */
.wb-grid.wb-ext-filter-dim .wb-row.wb-match .wb-col {
    color: var(--eerie-black-1);
}

.wb-grid.wb-ext-filter-dim .wb-row.wb-submatch .wb-col {
    color: var(--quick-silver);
}

.wb-grid.wb-ext-filter-dim .wb-row:not(.wb-match):not(.wb-submatch) .wb-col {
    color: var(--light-gray);
}

/* ─── Dark theme ─── */
[data-bs-theme="pmsweb-dark"] .wb-grid {
    --wb-background-color: var(--eerie-black-2);
    --wb-node-text-color: var(--quick-silver);
    --wb-border-color: var(--black_30);
    --wb-grid-color: var(--black_30);
    --wb-alternate-row-color: hsla(0, 0%, 100%, 0.04);
    --wb-hover-color: hsla(170, 75%, 41%, 0.1);
    --wb-active-color: hsla(170, 75%, 41%, 0.2);
    --wb-active-hover-color: hsla(170, 75%, 41%, 0.25);
    --wb-active-border-color: var(--kappel);
    --wb-header-color: var(--eerie-black-2);
    --wb-filter-dim-color: hsla(0, 0%, 65%, 0.3);
    --wb-filter-submatch-color: var(--quick-silver);
    background-color: var(--eerie-black-2);
    box-shadow: none;
}

[data-bs-theme="pmsweb-dark"] .wb-grid .wb-row {
    border-bottom-color: var(--black_30);
}

[data-bs-theme="pmsweb-dark"] .wb-grid .wb-row .wb-col {
    color: var(--quick-silver);
}

[data-bs-theme="pmsweb-dark"] div.wb-grid div.wb-header {
    background-color: var(--eerie-black-2);
    border-bottom-color: var(--black_30);
}

[data-bs-theme="pmsweb-dark"] div.wb-grid div.wb-header span.wb-col {
    background-color: hsla(var(--color), 0.45);
    color: var(--white);
}

[data-bs-theme="pmsweb-dark"] div.wb-grid div.wb-header span.wb-col span.wb-col-title {
    color: #ffffff !important;
}

[data-bs-theme="pmsweb-dark"] .wb-grid .wb-row:hover {
    background-color: hsla(170, 75%, 41%, 0.1);
}

[data-bs-theme="pmsweb-dark"] .wb-grid.wb-alternate .wb-row:nth-child(even) {
    background-color: hsla(0, 0%, 100%, 0.03);
}

[data-bs-theme="pmsweb-dark"] .wb-grid.wb-alternate .wb-row:nth-child(even):hover {
    background-color: hsla(170, 75%, 41%, 0.1);
}

[data-bs-theme="pmsweb-dark"] .wb-grid .wb-row.wb-active {
    background-color: hsla(var(--color), 0.2);
}

[data-bs-theme="pmsweb-dark"] .wb-skeleton.wb-initializing {
    background: var(--eerie-black-2);
}

/* ─── Responsive ─── */
@media (max-width: 768px) {
    .wb-grid {
        overflow-x: auto;
    }
}