/* Global Empty State Shared Styles */
.empty-state, .empty-state-cell {
    text-align: center;
    padding: var(--sp-5) var(--sp-5);
    color: var(--text-muted);
}
.empty-state-icon-bg {
    background: var(--surface-sunken);
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--sp-4);
    transition: var(--transition);
}
.empty-state-icon {
    width: var(--sp-5);
    height: var(--sp-5);
}
.empty-state-title {
    font-weight: var(--fw-600);
    color: var(--text);
    margin-bottom: var(--sp-2);
}
.empty-state-desc {
    margin: 0;
}
.empty-state {
    border-top: 1px solid var(--border);
}
.empty-state.condensed {
    border-top: 1px solid var(--border);
    padding: var(--sp-5) var(--sp-4);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.empty-state.condensed.js-hidden {
    display: none;
}
/* Empty / no-results states live INSIDE the table as a full-width row, placed
   ABOVE the inline "+" create row (in an empty table the only other row IS the
   plus row). The separator sits BELOW the message — between it and the "+" — so
   the message reads as distinct from the plus button. A top border is omitted
   because the header/last-row hairline already sits directly above (a top border
   would double it). */
.empty-state-row > td {
    padding: 0;
    border: none;
}
.empty-state-row .empty-state.condensed {
    border-top: none;
    border-bottom: 1px solid var(--border);
}
/* The "+" row supplies no separator of its own here; the state message's
   bottom border is the single divider above the plus button. */
.empty-state-row + .create-shortcut-row > .create-shortcut-cell {
    border-top: none;
}
.empty-state-row.js-hidden {
    display: none;
}
.empty-state-header-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    margin-bottom: var(--sp-4);
}
.empty-state-icon-inline {
    width: var(--sp-4);
    height: var(--sp-4);
    color: var(--text-muted);
    flex-shrink: 0;
}
.empty-state-title.condensed {
    margin: 0;
    font-size: var(--fs-3);
    font-weight: var(--fw-600);
    color: var(--text);
}
.condensed-clear-btn {
    padding: var(--sp-1) var(--sp-3);
    font-size: var(--fs-2);
    height: var(--field-h);
}