/* _content/NetImpact.WorkflowEngine.AdminUI/Components/Layout/MainLayout.razor.rz.scp.css */
/* All layout styles are in wwwroot/app.css */
/* _content/NetImpact.WorkflowEngine.AdminUI/Components/Layout/NavMenu.razor.rz.scp.css */
/* All nav styles are in wwwroot/app.css */
/* _content/NetImpact.WorkflowEngine.AdminUI/Components/Pages/ActionInbox.razor.rz.scp.css */
/* ============================================================
   Action Inbox — Scoped Styles
   ============================================================ */

/* ── KPI skeleton ── */
.kpi-card--skel[b-xycm1rszcn] {
    pointer-events: none;
}

.kpi-skel-pulse[b-xycm1rszcn] {
    border-radius: 6px;
    background: linear-gradient(90deg, var(--c-border) 25%, var(--uswds-gray-2) 50%, var(--c-border) 75%);
    background-size: 200% 100%;
    animation: kpi-shimmer-b-xycm1rszcn 1.4s infinite;
}

@keyframes kpi-shimmer-b-xycm1rszcn {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.kpi-skel-icon[b-xycm1rszcn] {
    width: 42px;
    height: 42px;
    border-radius: 8px;
    flex-shrink: 0;
}

.kpi-skel-val[b-xycm1rszcn] {
    width: 56px;
    height: 22px;
    margin-bottom: 4px;
}

.kpi-skel-lbl[b-xycm1rszcn] {
    width: 72px;
    height: 10px;
}

/* ── Page Header ── */
.inbox-header[b-xycm1rszcn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.inbox-header__left[b-xycm1rszcn] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.inbox-header__right[b-xycm1rszcn] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.inbox-header__icon-wrap[b-xycm1rszcn] {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--c-info-bg);
    color: var(--c-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
    border: 1px solid var(--uswds-blue-10);
}

/* ── Search bar ── */
.inbox-search-wrap[b-xycm1rszcn] {
    position: relative;
    display: flex;
    align-items: center;
}

.inbox-search-icon[b-xycm1rszcn] {
    position: absolute;
    left: 0.75rem;
    color: var(--c-text-muted);
    font-size: 0.8rem;
    pointer-events: none;
}

.inbox-search[b-xycm1rszcn] {
    padding: 0.5rem 0.75rem 0.5rem 2.25rem;
    border: 1.5px solid var(--c-border);
    border-radius: 6px;
    background: var(--c-surface);
    font-size: 0.875rem;
    font-family: var(--font);
    color: var(--c-text);
    outline: none;
    width: 220px;
    transition: border-color 0.15s, box-shadow 0.15s, width 0.2s;
}

.inbox-search:focus[b-xycm1rszcn] {
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px rgba(0, 94, 162, 0.15);
    width: 280px;
}

/* ── Filter selects ── */
.inbox-filter-wrap[b-xycm1rszcn] {
    position: relative;
    display: flex;
    align-items: center;
}

.inbox-filter-icon[b-xycm1rszcn] {
    position: absolute;
    left: 0.75rem;
    color: var(--c-text-muted);
    font-size: 0.8rem;
    pointer-events: none;
}

.inbox-select[b-xycm1rszcn] {
    padding: 0.5rem 2.25rem 0.5rem 2.25rem;
    border: 1.5px solid var(--c-border);
    border-radius: 6px;
    background: var(--c-surface);
    font-size: 0.875rem;
    font-family: var(--font);
    color: var(--c-text);
    outline: none;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23757575' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.65rem center;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.inbox-select:focus[b-xycm1rszcn] {
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px rgba(0, 94, 162, 0.15);
}

/* ── Clear filters button ── */
.inbox-clear-btn[b-xycm1rszcn] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.875rem;
    border: 1.5px solid var(--c-border);
    border-radius: 6px;
    background: var(--c-surface);
    font-size: 0.8rem;
    font-family: var(--font);
    color: var(--c-text-muted);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    white-space: nowrap;
}

.inbox-clear-btn:hover[b-xycm1rszcn] {
    background: var(--c-danger-bg);
    color: var(--c-danger);
    border-color: var(--c-danger);
}

/* ── Loading State ── */
.inbox-loading[b-xycm1rszcn] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 3rem;
    justify-content: center;
    color: var(--c-text-muted);
    font-size: 0.875rem;
}

.inbox-loading__spinner[b-xycm1rszcn] {
    width: 20px;
    height: 20px;
    border: 2px solid var(--c-border);
    border-top-color: var(--c-primary);
    border-radius: 50%;
    animation: inbox-spin-b-xycm1rszcn 0.75s linear infinite;
    flex-shrink: 0;
}

@keyframes inbox-spin-b-xycm1rszcn {
    to { transform: rotate(360deg); }
}

/* ── KPI Strip ── */
.kpi-strip[b-xycm1rszcn] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    margin-top: 0;
}

@media (max-width: 768px) {
    .kpi-strip[b-xycm1rszcn] { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
    .kpi-strip[b-xycm1rszcn] { grid-template-columns: 1fr; }
}

.kpi-card[b-xycm1rszcn] {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 10px;
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.875rem;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
    transition: box-shadow 0.15s, transform 0.15s;
}

.kpi-card:hover[b-xycm1rszcn] {
    box-shadow: 0 4px 12px rgba(0,0,0,.10);
    transform: translateY(-1px);
}

.kpi-card__icon[b-xycm1rszcn] {
    width: 42px;
    height: 42px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.kpi-card__body[b-xycm1rszcn] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.kpi-card__value[b-xycm1rszcn] {
    font-size: 1.625rem;
    font-weight: 700;
    line-height: 1;
}

.kpi-card__label[b-xycm1rszcn] {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--c-text-muted);
}

/* KPI color variants */
.kpi-card--amber[b-xycm1rszcn] { border-top: 3px solid var(--c-warning); }
.kpi-card--amber .kpi-card__icon[b-xycm1rszcn] { background: var(--c-warning-bg); color: var(--c-warning); }
.kpi-card--amber .kpi-card__value[b-xycm1rszcn] { color: var(--c-warning); }

.kpi-card--blue[b-xycm1rszcn] { border-top: 3px solid var(--c-primary); }
.kpi-card--blue .kpi-card__icon[b-xycm1rszcn] { background: var(--c-info-bg); color: var(--c-primary); }
.kpi-card--blue .kpi-card__value[b-xycm1rszcn] { color: var(--c-primary); }

.kpi-card--red[b-xycm1rszcn] { border-top: 3px solid var(--c-danger); }
.kpi-card--red .kpi-card__icon[b-xycm1rszcn] { background: var(--c-danger-bg); color: var(--c-danger); }
.kpi-card--red .kpi-card__value[b-xycm1rszcn] { color: var(--c-danger); }

.kpi-card--gray[b-xycm1rszcn] { border-top: 3px solid var(--c-border); }
.kpi-card--gray .kpi-card__icon[b-xycm1rszcn] { background: var(--uswds-gray-2); color: var(--c-text-muted); }
.kpi-card--gray .kpi-card__value[b-xycm1rszcn] { color: var(--c-text); }

/* ── Two-Column Layout ── */
.inbox-layout[b-xycm1rszcn] {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 1rem;
    align-items: start;
}

@media (max-width: 1100px) {
    .inbox-layout[b-xycm1rszcn] { grid-template-columns: 1fr; }
}

/* ── List (left) ── */
.inbox-list[b-xycm1rszcn] {
    min-width: 0;
}

/* ── Table overrides ── */
.inbox-table tbody tr[b-xycm1rszcn] {
    cursor: pointer;
    transition: background 0.1s;
}

.inbox-row td[b-xycm1rszcn] {
    vertical-align: middle;
    padding: 0.75rem 1rem;
    white-space: nowrap;
}

.inbox-row:hover td[b-xycm1rszcn] { background: var(--uswds-blue-5) !important; }

.inbox-row--selected td[b-xycm1rszcn] {
    background: #e8f0f8 !important;
    border-left: 3px solid var(--c-primary);
}

.inbox-row--overdue td[b-xycm1rszcn] { background: #fff8f8 !important; }
.inbox-row--overdue.inbox-row--selected td[b-xycm1rszcn] { background: #fdf0f0 !important; }

/* Reference cell */
.inbox-ref[b-xycm1rszcn] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.inbox-ref__avatar[b-xycm1rszcn] {
    width: 30px;
    height: 30px;
    border-radius: 6px;
    background: var(--c-info-bg);
    color: var(--c-primary);
    font-size: 0.75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid var(--uswds-blue-10);
}

.inbox-ref__text[b-xycm1rszcn] {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--c-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
}

.inbox-step[b-xycm1rszcn] {
    color: var(--c-text-muted);
    font-size: 0.825rem;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Assignee cell */
.inbox-assignee[b-xycm1rszcn] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
}

.inbox-assignee__avatar[b-xycm1rszcn] {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--c-primary);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.inbox-unassigned[b-xycm1rszcn] {
    font-size: 0.825rem;
    color: var(--c-text-muted);
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

/* Due cell */
.inbox-due[b-xycm1rszcn] {
    font-size: 0.825rem;
    color: var(--c-text-muted);
}

.inbox-due--overdue[b-xycm1rszcn] {
    color: var(--c-danger);
    font-weight: 600;
}

/* Chevron cell */
.inbox-chevron[b-xycm1rszcn] {
    width: 28px;
    color: var(--c-border);
    font-size: 0.75rem;
    text-align: center;
    transition: color 0.15s;
}

.inbox-row:hover .inbox-chevron[b-xycm1rszcn],
.inbox-row--selected .inbox-chevron[b-xycm1rszcn] {
    color: var(--c-primary);
}

/* ── Empty state ── */
.inbox-empty[b-xycm1rszcn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 10px;
}

.inbox-empty__icon[b-xycm1rszcn] {
    font-size: 2.5rem;
    color: var(--c-border);
    margin-bottom: 1rem;
}

.inbox-empty__title[b-xycm1rszcn] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--c-text);
    margin: 0 0 0.25rem;
}

.inbox-empty__sub[b-xycm1rszcn] {
    font-size: 0.875rem;
    color: var(--c-text-muted);
    margin: 0;
}

/* ── Detail Panel (right) ── */
.inbox-detail[b-xycm1rszcn] {
    position: sticky;
    top: calc(var(--header-h) + 1rem);
}

.detail-placeholder[b-xycm1rszcn] {
    background: var(--c-surface);
    border: 1.5px dashed var(--c-border);
    border-radius: 12px;
    min-height: 340px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2.5rem;
    gap: 0.75rem;
}

.detail-placeholder__icon[b-xycm1rszcn] {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--uswds-gray-2);
    color: var(--c-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    margin-bottom: 0.25rem;
}

.detail-placeholder__title[b-xycm1rszcn] {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--c-text);
    margin: 0;
}

.detail-placeholder__sub[b-xycm1rszcn] {
    font-size: 0.8125rem;
    color: var(--c-text-muted);
    margin: 0;
}

/* Detail Panel Card */
.detail-panel[b-xycm1rszcn] {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0,0,0,.08);
    animation: detail-slide-in-b-xycm1rszcn 0.18s ease;
}

@keyframes detail-slide-in-b-xycm1rszcn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.detail-panel__header[b-xycm1rszcn] {
    background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-dark) 100%);
    padding: 0.875rem 1rem 1.125rem;
}

.detail-panel__header-top[b-xycm1rszcn] {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.5rem;
}

.detail-panel__close[b-xycm1rszcn] {
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.2);
    color: rgba(255,255,255,0.85);
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.8rem;
    transition: background 0.15s, color 0.15s;
}

.detail-panel__close:hover[b-xycm1rszcn] {
    background: rgba(255,255,255,0.25);
    color: #fff;
}

.detail-panel__hero[b-xycm1rszcn] {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
}

.detail-panel__ref-avatar[b-xycm1rszcn] {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: rgba(255,255,255,0.18);
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid rgba(255,255,255,0.2);
}

.detail-panel__title[b-xycm1rszcn] {
    font-size: 0.9375rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 0.125rem;
    line-height: 1.3;
    word-break: break-word;
}

.detail-panel__body[b-xycm1rszcn] {
    padding: 0;
}

/* Detail Sections */
.detail-section[b-xycm1rszcn] {
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--c-border);
}

.detail-section:last-child[b-xycm1rszcn] {
    border-bottom: none;
}

.detail-section__label[b-xycm1rszcn] {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--c-text-muted);
    margin: 0 0 0.625rem;
}

/* Detail rows */
.detail-rows[b-xycm1rszcn] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.detail-row[b-xycm1rszcn] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.3rem 0;
    border-bottom: 1px solid var(--uswds-gray-2);
    font-size: 0.825rem;
}

.detail-row:last-child[b-xycm1rszcn] { border-bottom: none; }

.detail-row--overdue .detail-row__val[b-xycm1rszcn] {
    color: var(--c-danger);
    font-weight: 600;
}

.detail-row--comment[b-xycm1rszcn] {
    align-items: flex-start;
}

.detail-row__key[b-xycm1rszcn] {
    color: var(--c-text-muted);
    font-size: 0.775rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
    min-width: 90px;
}

.detail-row__val[b-xycm1rszcn] {
    color: var(--c-text);
    font-weight: 500;
    text-align: right;
    word-break: break-word;
}

/* Assignee card inside detail */
.detail-assignee-card[b-xycm1rszcn] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--uswds-gray-2);
    border-radius: 8px;
    padding: 0.6rem 0.875rem;
}

.detail-assignee-card__avatar[b-xycm1rszcn] {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--c-primary);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.detail-assignee-card__name[b-xycm1rszcn] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--c-text);
    margin: 0 0 1px;
}

.detail-assignee-card__email[b-xycm1rszcn] {
    font-size: 0.775rem;
    color: var(--c-text-muted);
    margin: 0;
    word-break: break-all;
}

/* Detail Panel Footer */
.detail-panel__footer[b-xycm1rszcn] {
    padding: 0.875rem 1rem;
    background: var(--uswds-gray-2);
    border-top: 1px solid var(--c-border);
}

/* ── KPI active (clickable filter) ── */
.kpi-card--active[b-xycm1rszcn] {
    box-shadow: 0 0 0 2px var(--c-primary), 0 4px 12px rgba(0,0,0,.12) !important;
    transform: translateY(-1px);
}

/* ── Column-header filter controls ── */
.th-wrap[b-xycm1rszcn] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.th-search[b-xycm1rszcn] {
    padding: 0.3rem 0.5rem;
    border: 1.5px solid var(--c-border);
    border-radius: 4px;
    background: var(--c-surface);
    font-size: 0.7rem;
    font-family: var(--font);
    color: var(--c-text);
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    outline: none;
    width: 100%;
    min-width: 80px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.th-search:focus[b-xycm1rszcn] {
    border-color: var(--c-primary);
    box-shadow: 0 0 0 2px rgba(0,94,162,.15);
}

.th-select[b-xycm1rszcn] {
    padding: 0.3rem 1.5rem 0.3rem 0.4rem;
    border: 1.5px solid var(--c-border);
    border-radius: 4px;
    background: var(--c-surface);
    font-size: 0.7rem;
    font-family: var(--font);
    color: var(--c-text);
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    outline: none;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23757575' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.4rem center;
    width: 100%;
    min-width: 80px;
    transition: border-color 0.15s;
}

.th-select:focus[b-xycm1rszcn] {
    border-color: var(--c-primary);
    box-shadow: 0 0 0 2px rgba(0,94,162,.15);
}

/* ── Mail button in assignee card ── */
.detail-mail-btn[b-xycm1rszcn] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: var(--c-info-bg);
    color: var(--c-primary);
    border: 1.5px solid var(--uswds-blue-10);
    font-size: 0.875rem;
    text-decoration: none;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.detail-mail-btn:hover[b-xycm1rszcn] {
    background: var(--c-primary);
    color: #fff;
    border-color: var(--c-primary);
    text-decoration: none;
}

/* ── Assignee email cell ── */
.inbox-email[b-xycm1rszcn] {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.inbox-email-link[b-xycm1rszcn] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.8rem;
    color: var(--c-primary);
    text-decoration: none;
    transition: color 0.15s;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.inbox-email-link:hover[b-xycm1rszcn] {
    color: var(--c-primary-dark);
    text-decoration: underline;
}

.inbox-email-link i[b-xycm1rszcn] { flex-shrink: 0; }

/* ── Action (Approve / Reject) section ── */
.detail-section--action[b-xycm1rszcn] {
    background: var(--uswds-gray-2);
}

.action-feedback[b-xycm1rszcn] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    font-size: 0.8125rem;
    font-weight: 500;
    margin-bottom: 0.625rem;
}

.action-feedback--ok[b-xycm1rszcn] {
    background: var(--c-success-bg, #ecfdf5);
    color: var(--c-success, #198754);
    border: 1px solid var(--c-success, #198754);
}

.action-feedback--error[b-xycm1rszcn] {
    background: var(--c-danger-bg);
    color: var(--c-danger);
    border: 1px solid var(--c-danger);
}

.action-comment-wrap[b-xycm1rszcn] {
    margin-bottom: 0.625rem;
}

.action-comment[b-xycm1rszcn] {
    width: 100%;
    padding: 0.5rem 0.625rem;
    border: 1.5px solid var(--c-border);
    border-radius: 6px;
    background: var(--c-surface);
    font-size: 0.825rem;
    font-family: var(--font);
    color: var(--c-text);
    resize: vertical;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
}

.action-comment:focus[b-xycm1rszcn] {
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px rgba(0, 94, 162, 0.15);
}

.action-btn-row[b-xycm1rszcn] {
    display: flex;
    gap: 0.5rem;
}

.action-btn[b-xycm1rszcn] {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    padding: 0.5rem 0.875rem;
}

.action-btn:disabled[b-xycm1rszcn] {
    opacity: 0.6;
    cursor: not-allowed;
}
/* _content/NetImpact.WorkflowEngine.AdminUI/Components/Pages/Portal/ActionDetail.razor.rz.scp.css */
/* ============================================================
   Action Detail Page — Scoped UI/UX Refinements (REVISION_2)
   Applies only to the Action Detail page (portal/actions/{id}).
   No business logic, APIs, or functionality is changed.

   Changes in this revision:
   1. Request Details / Action Details grids no longer overlap —
      they now use an explicit CSS grid with a safe minimum
      column width, so long labels/values always get their own
      row when the container is too narrow for two columns.
   2. Typography switched to the Microsoft 365 / Fluent UI font
      stack (Segoe UI), with a small, disciplined type scale.
   3. A clear "what to highlight" hierarchy — see the comment
      block near the bottom for the reasoning.
   ============================================================ */

/* ── Typography base (Microsoft 365 / Fluent-style stack) ──
   Segoe UI is the real M365 face. We fall back gracefully on
   platforms that don't ship it, landing on the same "system UI"
   family Windows/Mac/Linux each use for their own chrome — this
   is exactly how Fluent apps degrade outside Windows. ─────── */
:root[b-0eaca14l2n] {
    --font-body: "Segoe UI", "Segoe UI Variable", -apple-system,
        BlinkMacSystemFont, "Helvetica Neue", Arial, system-ui,
        "Segoe UI Emoji", sans-serif;
    --font-heading: "Segoe UI Semibold", "Segoe UI", "Segoe UI Variable",
        -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

    /* Minimal type scale — five sizes, everything else derives from these */
    --fs-eyebrow: 0.6875rem;   /* 11px  field labels / overline text     */
    --fs-caption: 0.75rem;     /* 12px  meta text, badges                */
    --fs-body-sm: 0.8125rem;   /* 13px  secondary body text              */
    --fs-body: 0.875rem;       /* 14px  default body / values            */
    --fs-body-lg: 1rem;        /* 16px  emphasized values                */
    --fs-title: 1.375rem;      /* 22px  page title only                  */
}

body[b-0eaca14l2n],
.card[b-0eaca14l2n],
.form-control[b-0eaca14l2n],
.btn[b-0eaca14l2n],
.badge[b-0eaca14l2n] {
    font-family: var(--font-body);
}

.page-title[b-0eaca14l2n],
.card-header h3[b-0eaca14l2n],
h1[b-0eaca14l2n], h2[b-0eaca14l2n], h3[b-0eaca14l2n] {
    font-family: var(--font-heading);
}

/* ── Breadcrumb navigation ───────────────────────────────── */
.usa-breadcrumb[b-0eaca14l2n] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: var(--fs-body-sm);
    font-weight: 500;
    margin-bottom: 0.875rem;
    flex-wrap: wrap;
}

.usa-breadcrumb a[b-0eaca14l2n] {
    color: var(--c-primary);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.12s;
}

.usa-breadcrumb a:hover[b-0eaca14l2n] {
    color: var(--c-primary-dark);
    text-decoration: underline;
}

/* ── Page Header ─────────────────────────────────────────── */
.page-header[b-0eaca14l2n] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.page-header__body[b-0eaca14l2n] {
    flex: 1;
    min-width: 0;
}

.page-title[b-0eaca14l2n] {
    font-size: var(--fs-title);
    font-weight: 600;              /* Fluent leans semibold, not black */
    letter-spacing: 0;             /* Segoe UI doesn't want negative tracking */
    color: var(--c-text);
    margin: 0;
    line-height: 1.3;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.page-subtitle[b-0eaca14l2n] {
    font-size: var(--fs-body-sm);
    color: var(--c-text-muted);
    font-weight: 400;
    margin: 0.3rem 0 0;
    line-height: 1.5;
}

/* Status badge in the page header */
.page-header > .badge[b-0eaca14l2n],
.page-header .badge[b-0eaca14l2n] {
    height: 26px;
    min-height: 26px;
    padding: 0 12px;
    border-radius: 4px;
    font-size: var(--fs-caption);
    font-weight: 600;
    align-self: flex-start;
    margin-top: 4px;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

/* ── Cards ───────────────────────────────────────────────── */
.card[b-0eaca14l2n] {
    border-radius: 8px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.75rem;   /* generous gap between every section card */
}

.card-header[b-0eaca14l2n] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--c-border);
}

/* Section title inside card headers */
.card-header h3[b-0eaca14l2n] {
    font-size: var(--fs-body-sm);  /* 13px — same scale as body, Fluent style */
    font-weight: 600;
    margin: 0;
    color: var(--c-text);
    letter-spacing: 0;
    text-transform: none;
}

/* ── Workflow Lifecycle Stepper ───────────────────────────── */
.lifecycle-stepper[b-0eaca14l2n] {
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--c-border) transparent;
}

.lifecycle-stepper[b-0eaca14l2n]::-webkit-scrollbar {
    height: 4px;
}

.lifecycle-stepper[b-0eaca14l2n]::-webkit-scrollbar-thumb {
    background: var(--c-border);
    border-radius: 2px;
}

.lifecycle-step__node[b-0eaca14l2n] {
    width: 38px;
    height: 38px;
    font-size: var(--fs-body-sm);
    font-weight: 600;
}

.lifecycle-step__label[b-0eaca14l2n] {
    font-size: var(--fs-eyebrow);
    font-weight: 500;
    color: var(--c-text-muted);
    line-height: 1.3;
    max-width: 84px;
    text-align: center;
    margin-top: 0.4rem;
}

.lifecycle-step.step--active .lifecycle-step__label[b-0eaca14l2n] {
    color: var(--c-primary);
    font-weight: 600;
}

.lifecycle-step.step--completed .lifecycle-step__label[b-0eaca14l2n] {
    color: var(--c-success);
    font-weight: 600;
}

.lifecycle-step.step--rejected .lifecycle-step__label[b-0eaca14l2n] {
    color: var(--c-danger);
    font-weight: 600;
}

.lifecycle-step.step--reverted .lifecycle-step__label[b-0eaca14l2n] {
    color: #b45309;
    font-weight: 600;
}

/* ── Request Detail Grid (context payload) ───────────────────
   FIX: this is the block that was overlapping. It previously
   relied on `display:grid` + column-count defined elsewhere,
   which broke whenever a value was long or the card got narrow
   (two fixed columns forced onto content that needed one).

   Now it's a self-contained, explicit grid:
   - auto-fill + minmax means columns never get squeezed below
     a safe width; the grid drops to one column on its own
     rather than compressing text into an overlap.
   - align-items: start stops a tall field from vertically
     stretching its row-neighbor.
   - the bottom border/padding are the row separator, so
     wrapped, multi-line values still look intentional instead
     of colliding with the next field. ───────────────────── */
.request-detail-grid[b-0eaca14l2n] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    row-gap: 0.875rem;
    column-gap: 2rem;
    margin: 0;
}

.request-detail-field[b-0eaca14l2n] {
    min-width: 0;
    height: 100%;
    padding: 0 0 0.875rem;
    margin: 0;
    border-bottom: 1px solid var(--c-border);
    display: grid;
    grid-template-rows: auto 1fr;
    row-gap: 0.35rem;
}

.request-detail-field dt[b-0eaca14l2n] {
    font-size: var(--fs-eyebrow);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--c-text-muted);
    margin: 0;
    overflow-wrap: anywhere;
    word-break: normal;
    white-space: normal;
}

.request-detail-field dd[b-0eaca14l2n] {
    font-size: var(--fs-body);
    font-weight: 500;
    line-height: 1.5;
    color: var(--c-text);
    margin: 0;
    max-width: 28rem;
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: normal;
}

/* ── Action Details Grid (dl.detail-grid) ─────────────────────
   Same fix applied here for consistency — this grid had the
   identical structural issue. ─────────────────────────────── */
.detail-grid[b-0eaca14l2n] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    align-items: start;
    gap: 1.25rem 2rem;
    margin: 0;
}

.detail-field[b-0eaca14l2n] {
    min-width: 0;
}

.detail-field dt[b-0eaca14l2n] {
    font-size: var(--fs-eyebrow);    /* 11px — label recedes so value stands out */
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--c-text-muted);
    margin-bottom: 0.3rem;
}

.detail-field dd[b-0eaca14l2n] {
    font-size: var(--fs-body);       /* 14px — same scale as request-detail for consistency */
    font-weight: 500;
    color: var(--c-text);
    margin: 0;
    line-height: 1.5;
    overflow-wrap: break-word;
    word-break: break-word;
    white-space: normal;
}

/* Inline badge inside dd (e.g., Status, Outcome fields) */
.detail-field dd .badge[b-0eaca14l2n] {
    height: 22px;
    min-height: 22px;
    padding: 0 9px;
    border-radius: 4px;
    font-size: var(--fs-eyebrow);
    font-weight: 600;
}

/* ── Status / Outcome Badges ─────────────────────────────── */
.badge[b-0eaca14l2n] {
    height: 22px;
    min-height: 22px;
    padding: 0 9px;
    border-radius: 4px;
    font-size: var(--fs-caption);
    font-weight: 600;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
    vertical-align: middle;
}

/* ── Document List ───────────────────────────────────────── */
.doc-list[b-0eaca14l2n] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.doc-item[b-0eaca14l2n] {
    border-radius: 6px;
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.875rem;
    transition: background 0.12s;
}

.doc-item:hover[b-0eaca14l2n] {
    background: var(--uswds-blue-5);
    border-color: var(--uswds-blue-10);
}

.doc-item__name[b-0eaca14l2n] {
    font-size: var(--fs-body);
    font-weight: 600;
    color: var(--c-text);
    line-height: 1.3;
}

.doc-item__meta[b-0eaca14l2n] {
    font-size: var(--fs-caption);
    color: var(--c-text-muted);
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}

/* ── Submission Form ─────────────────────────────────────── */
.form-label[b-0eaca14l2n] {
    font-size: var(--fs-body-sm);
    font-weight: 600;
    color: var(--c-text);
    margin-bottom: 0.375rem;
    display: block;
}

.form-control[b-0eaca14l2n] {
    font-size: var(--fs-body);
    border-radius: 6px;
}

/* Decision buttons (Approve / Reject / Revert) — consistent sizing */
.btn-lg[b-0eaca14l2n] {
    height: 40px;
    padding: 0 1.375rem;
    font-size: var(--fs-body);
    font-weight: 600;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

/* ── Loading state ───────────────────────────────────────── */
.loading-spinner[b-0eaca14l2n] {
    padding: 3.5rem 2rem;
    font-size: var(--fs-body);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.875rem;
    color: var(--c-text-muted);
}

/* ── Alert messages (success / error) ────────────────────── */
.alert[b-0eaca14l2n] {
    border-radius: 6px;
    font-size: var(--fs-body);
    padding: 0.875rem 1rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 768px) {
    .page-header[b-0eaca14l2n] {
        flex-direction: column;
        align-items: flex-start;
    }

    .page-header > .badge[b-0eaca14l2n],
    .page-header .badge[b-0eaca14l2n] {
        margin-top: 0;
        align-self: auto;
    }

    .request-detail-grid[b-0eaca14l2n] {
        grid-template-columns: 1fr;
        column-gap: 1.5rem;
    }

    .detail-grid[b-0eaca14l2n] {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 769px) and (max-width: 1100px) {
    .request-detail-grid[b-0eaca14l2n] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .page-title[b-0eaca14l2n] {
        font-size: 1.125rem;
    }

    .card[b-0eaca14l2n] {
        padding: 1rem 1.125rem;
    }

    .lifecycle-stepper[b-0eaca14l2n] {
        gap: 0;
    }
}

/* ============================================================
   WHAT TO HIGHLIGHT — a minimal hierarchy for this page

   Enterprise/Fluent UI works best with very few "loud" elements.
   Everything below is ranked so you know what deserves weight
   and what should stay quiet:

   1. Status badge (page header)   — the ONE thing that should
      grab the eye first. Keep it the only saturated color block
      above the fold besides the primary action buttons.
   2. Primary action buttons        — Approve / Submit / Resubmit.
      Solid fill, everything else on the page is outline or plain.
   3. Field values (dd)             — semibold, var(--c-text).
      Never bold + colored together; pick one emphasis, not both.
   4. Field labels (dt)             — small, uppercase, muted gray.
      These should almost disappear; they're wayfinding, not content.
   5. Card headers                  — semibold, same size as body
      text (14px). Resist the urge to make these big — Fluent
      keeps section titles close in scale to body copy and lets
      spacing/borders do the separating instead of font size.
   6. Meta text (timestamps, file size, counts) — smallest size,
      muted, never bold.

   Rule of thumb: only ONE font-weight jump and ONE color jump per
   element. If something is both bold AND colored AND bigger, it's
   competing with the status badge for attention — pick one signal.
   ============================================================ */
/* _content/NetImpact.WorkflowEngine.AdminUI/Components/Pages/Portal/MyActions.razor.rz.scp.css */
/* ============================================================
   My Actions Portal — Scoped UI/UX Refinements (REVISION_1)
   Applies only to the My Actions list page.
   No business logic, APIs, or functionality is changed.
   ============================================================ */

/* ── Enterprise font stack (Segoe UI / Fluent UI) ────────── */
:root[b-z3ewtlq0gx] {
    --font-enterprise: "Segoe UI", "Segoe UI Variable", -apple-system,
        BlinkMacSystemFont, "Helvetica Neue", Arial, system-ui, sans-serif;
}

/* ── Page Header ─────────────────────────────────────────── */
.inbox-header[b-z3ewtlq0gx] {
    margin-bottom: 1.75rem;
}

.inbox-header__icon-wrap[b-z3ewtlq0gx] {
    width: 46px;
    height: 46px;
    border-radius: 10px;
    background: var(--c-info-bg);
    color: var(--c-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
    border: 1px solid rgba(0, 94, 162, 0.18);
}

.page-title[b-z3ewtlq0gx] {
    font-family: var(--font-enterprise);
    font-size: 1.375rem;     /* 22px — readable without dominating */
    font-weight: 600;
    letter-spacing: 0;
    color: var(--c-text);
    margin: 0;
}

.page-subtitle[b-z3ewtlq0gx] {
    font-family: var(--font-enterprise);
    font-size: 0.8125rem;    /* 13px */
    color: var(--c-text-muted);
    font-weight: 400;
    margin: 2px 0 0;
    line-height: 1.5;
}

/* ── KPI Strip ───────────────────────────────────────────── */
.kpi-strip[b-z3ewtlq0gx] {
    margin-bottom: 1.5rem;
}

.kpi-card[b-z3ewtlq0gx] {
    border-radius: 10px;
    padding: 1rem 1.25rem;
    transition: box-shadow 0.15s, transform 0.15s;
}

.kpi-card:hover[b-z3ewtlq0gx] {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.10);
    transform: translateY(-2px);
}

.kpi-card__value[b-z3ewtlq0gx] {
    font-family: var(--font-enterprise);
    font-size: 1.5rem;       /* 24px — impactful but not oversized */
    font-weight: 600;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.kpi-card__label[b-z3ewtlq0gx] {
    font-family: var(--font-enterprise);
    font-size: 0.6875rem;    /* 11px */
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--c-text-muted);
    margin-top: 3px;
}

/* Active filter state ring */
.kpi-card--active[b-z3ewtlq0gx] {
    box-shadow: 0 0 0 2.5px var(--c-primary), 0 4px 12px rgba(0, 0, 0, 0.10) !important;
    transform: translateY(-2px);
}

/* ── Table container ─────────────────────────────────────── */
.table-container[b-z3ewtlq0gx] {
    border-radius: 10px;
    overflow: hidden;
}

/* ── Table Headers ───────────────────────────────────────── */
.data-table th[b-z3ewtlq0gx] {
    font-family: var(--font-enterprise);
    font-size: 0.6875rem;    /* 11px — eyebrow scale, keeps columns compact */
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--c-text-muted);
    padding: 0.75rem 1rem;
    background: var(--c-bg);
    border-bottom: 2px solid var(--c-border);
    white-space: nowrap;
}

/* Sortable header hover */
.sort-th:hover[b-z3ewtlq0gx] {
    background: var(--c-info-bg);
    color: var(--c-primary);
}

.sort-icon[b-z3ewtlq0gx] {
    margin-left: 5px;
    font-size: 0.65em;
    opacity: 0.3;
    vertical-align: middle;
    transition: opacity 0.12s;
}

.sort-icon--active[b-z3ewtlq0gx] {
    opacity: 1;
    color: var(--c-primary);
}

/* ── Table Rows ──────────────────────────────────────────── */
.data-table td[b-z3ewtlq0gx] {
    font-family: var(--font-enterprise);
    font-size: 0.8125rem;    /* 13px — standard enterprise body text */
    font-weight: 400;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--c-border);
    vertical-align: middle;
    color: var(--c-text);
}

.data-table tr:last-child td[b-z3ewtlq0gx] {
    border-bottom: none;
}

.data-table tr:hover td[b-z3ewtlq0gx] {
    background: var(--uswds-blue-5);
}

/* Primary reference cell */
.td-primary[b-z3ewtlq0gx] {
    font-family: var(--font-enterprise);
    font-weight: 600;
    font-size: 0.8125rem;    /* same as td — weight alone distinguishes it */
    color: var(--c-text);
}

/* ── Status Badges: standardized dimensions ──────────────── */
.badge[b-z3ewtlq0gx] {
    font-family: var(--font-enterprise);
    height: 20px;
    min-height: 20px;
    padding: 0 8px;
    border-radius: 3px;
    font-size: 0.6875rem;    /* 11px — badge text should be smaller than row text */
    font-weight: 600;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
    vertical-align: middle;
}

/* ── Action Buttons: consistent sizing ───────────────────── */
.btn-sm[b-z3ewtlq0gx] {
    font-family: var(--font-enterprise);
    height: 28px;
    padding: 0 0.8rem;
    font-size: 0.75rem;      /* 12px */
    font-weight: 600;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
}

/* ── Pagination bar ──────────────────────────────────────── */
.pagination-bar[b-z3ewtlq0gx] {
    padding: 0.75rem 1.25rem;
    border-top: 1px solid var(--c-border);
}

.pagination-btn[b-z3ewtlq0gx] {
    min-width: 32px;
    height: 32px;
    font-size: 0.8rem;
    font-weight: 500;
    border-radius: 5px;
}

.pagination-btn--active[b-z3ewtlq0gx] {
    font-weight: 700;
}

/* Rows-per-page selector */
.page-size-wrap[b-z3ewtlq0gx] {
    font-size: 0.8rem;
    color: var(--c-text-muted);
    font-weight: 500;
}

/* Result count text */
.table-toolbar__info[b-z3ewtlq0gx] {
    font-family: var(--font-enterprise);
    font-size: 0.75rem;      /* 12px */
    color: var(--c-text-muted);
    font-variant-numeric: tabular-nums;
}

.table-toolbar__info strong[b-z3ewtlq0gx] {
    color: var(--c-text);
    font-weight: 700;
}

/* ── Overdue row highlight ───────────────────────────────── */
.tr-overdue td:first-child[b-z3ewtlq0gx] {
    border-left: 3px solid var(--c-danger);
}

/* ── Linked row highlight ────────────────────────────────── */
.tr-linked td[b-z3ewtlq0gx] {
    background: #f0f6ff !important;
}

/* Linked action badge in type cell */
.action-card__linked-badge[b-z3ewtlq0gx] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--c-primary);
    background: var(--c-info-bg);
    border: 1px solid rgba(0, 94, 162, 0.2);
    border-radius: 4px;
    padding: 0.1rem 0.4rem;
    margin-left: 0.4rem;
    vertical-align: middle;
}

/* ── Linked-only banner ──────────────────────────────────── */
.linked-only-banner[b-z3ewtlq0gx] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    background: #eef4ff;
    border: 1px solid rgba(0, 94, 162, 0.25);
    border-radius: 8px;
    padding: 0.65rem 1rem;
    margin-bottom: 1.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--c-primary);
}

.linked-only-banner__dismiss[b-z3ewtlq0gx] {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--c-primary);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 0.3rem 0.8rem;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

.linked-only-banner__dismiss:hover[b-z3ewtlq0gx] {
    background: #003d73;
}

/* ── Empty / Loading states ──────────────────────────────── */
.inbox-loading[b-z3ewtlq0gx] {
    padding: 3.5rem 2rem;
    font-size: 0.9rem;
}

.inbox-empty[b-z3ewtlq0gx] {
    padding: 4rem 2rem;
    border-radius: 10px;
}

.inbox-empty__title[b-z3ewtlq0gx] {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--c-text);
}

.inbox-empty__sub[b-z3ewtlq0gx] {
    font-size: 0.875rem;
    color: var(--c-text-muted);
    margin-top: 0.25rem;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 900px) {
    .data-table th[b-z3ewtlq0gx],
    .data-table td[b-z3ewtlq0gx] {
        padding: 0.625rem 0.75rem;
    }
}

@media (max-width: 640px) {
    .inbox-header[b-z3ewtlq0gx] {
        flex-direction: column;
        align-items: flex-start;
    }
    .inbox-header__right[b-z3ewtlq0gx] {
        width: 100%;
    }
    .inbox-search[b-z3ewtlq0gx] {
        width: 100%;
    }
}