/* ============================================================
   SmartSales Intelligence  |  Light & Vibrant Design System
   ============================================================ */
:root {
    --bg-page:      #F0F2FF;
    --bg-card:      #FFFFFF;
    --bg-input:     #FAFBFF;

    /* Violet — brand intelligence */
    --violet:       #6D28D9;
    --violet-mid:   #7C3AED;
    --violet-soft:  #8B5CF6;
    --violet-light: #EDE9FE;
    --violet-dim:   rgba(109,40,217,0.07);

    /* Orange — sales energy */
    --orange:       #EA580C;
    --orange-mid:   #F97316;
    --orange-light: #FFF3EA;
    --orange-dim:   rgba(234,88,12,0.07);

    /* Status */
    --emerald:      #059669;
    --emerald-light:#ECFDF5;
    --sky:          #0284C7;
    --sky-light:    #E0F2FE;
    --rose:         #E11D48;
    --rose-light:   #FFF1F2;

    /* Text */
    --ink-0: #1E1B4B;
    --ink-1: #374151;
    /* The muted end of this scale was set by eye and does not survive being measured.
       #9CA3AF on white is 2.5:1, where readable body text needs 4.5:1, and it was carrying
       every table heading, every field label and the sign-out link. The whole scale shifts
       down one step so the hierarchy is kept and the bottom of it is still readable:
       ink-2 is now 7.5:1 and ink-3 is 4.8:1. ink-4 stays as it is because it is only ever
       used for rules and separators, never for text. */
    --ink-2: #4B5563;
    --ink-3: #6B7280;
    --ink-4: #D1D5DB;

    /* Borders */
    --line-0: #E5E7EB;
    --line-v: #EDE9FE;

    /* Shadows */
    --shadow-xs: 0 1px 2px rgba(0,0,0,.05);
    --shadow-sm: 0 1px 4px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.04);
    --shadow-md: 0 4px 20px rgba(30,27,75,.07), 0 1px 4px rgba(30,27,75,.04);
    --shadow-lg: 0 12px 40px rgba(30,27,75,.10), 0 2px 8px rgba(30,27,75,.04);
    --shadow-v:  0 4px 20px rgba(109,40,217,.22);
    --shadow-o:  0 4px 20px rgba(234,88,12,.22);

    /* Radius */
    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 16px;
    --r-xl: 24px;
}

/* ── Reset ────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body {
    font-family: "Inter", "IBM Plex Sans Arabic", system-ui, sans-serif;
    font-size: 15px;
    line-height: 1.65;
    color: var(--ink-0);
    background-color: var(--bg-page);
    min-height: 100%;
    -webkit-font-smoothing: antialiased;
}

/* ── Scrollbar ────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: #F0F2FF; }
::-webkit-scrollbar-thumb { background: rgba(109,40,217,0.18); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: rgba(109,40,217,0.36); }

/* ── Typography ───────────────────────────────────── */
h1, h2, h3, h4 { font-weight: 700; letter-spacing: -0.025em; color: var(--ink-0); margin-bottom: 0; }
h1 { font-size: 1.5rem; }
h2 { font-size: 0.72rem; }
a, .btn-link { color: var(--violet); text-decoration: none; transition: color 130ms; }
a:hover { color: var(--violet-mid); }
h1:focus { outline: none; }

/* ── Welcome Banner ───────────────────────────────── */
.welcome-banner {
    background: linear-gradient(135deg, #6D28D9 0%, #7C3AED 50%, #9F67FA 100%);
    border-radius: var(--r-xl);
    padding: 1.75rem 2rem;
    margin-bottom: 1.5rem;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-v);
}
.welcome-banner::before {
    content: '';
    position: absolute;
    top: -40px; right: -40px;
    width: 200px; height: 200px;
    background: rgba(255,255,255,0.06);
    border-radius: 50%;
}
.welcome-banner::after {
    content: '';
    position: absolute;
    bottom: -60px; right: 60px;
    width: 140px; height: 140px;
    background: rgba(255,255,255,0.04);
    border-radius: 50%;
}
.welcome-banner h1 {
    color: #fff;
    font-size: 1.45rem;
    margin-bottom: 0.25rem;
    position: relative;
}
.welcome-banner p {
    color: rgba(255,255,255,0.72);
    margin: 0;
    font-size: 0.875rem;
    position: relative;
}

/* ── Page Header ──────────────────────────────────── */
.page-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.6rem;
}
.page-header h1 { margin: 0; }
.page-header-icon {
    width: 40px; height: 40px;
    border-radius: var(--r-md);
    background: var(--violet-light);
    border: 1px solid rgba(109,40,217,0.15);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}

/* ── Buttons ──────────────────────────────────────── */
.btn {
    font-weight: 600;
    font-size: 0.875rem;
    border-radius: var(--r-sm);
    padding: 0.5rem 1.2rem;
    transition: all 140ms ease;
    box-shadow: var(--shadow-xs);
}
.btn-primary {
    background: var(--violet);
    border-color: var(--violet);
    color: #fff;
    box-shadow: var(--shadow-v);
}
.btn-primary:hover {
    background: var(--violet-mid);
    border-color: var(--violet-mid);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 6px 24px rgba(109,40,217,.32);
}
.btn-success {
    background: linear-gradient(135deg, #9A3412, #C2410C);
    border-color: #9A3412;
    color: #fff;
    font-weight: 700;
    box-shadow: var(--shadow-o);
}
.btn-success:hover {
    background: linear-gradient(135deg, #7C2D12, #9A3412);
    border-color: #7C2D12;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 6px 24px rgba(234,88,12,.32);
}
.btn-outline-primary {
    color: var(--violet);
    border: 1.5px solid rgba(109,40,217,0.4);
    background: var(--violet-dim);
}
.btn-outline-primary:hover {
    background: var(--violet-light);
    border-color: var(--violet);
    color: var(--violet);
    transform: translateY(-1px);
}
.btn:focus, .btn:active:focus {
    box-shadow: 0 0 0 3px rgba(109,40,217,.22) !important;
    outline: none;
}

.btn-app {
    border-radius: 999px;
    font-weight: 700;
    letter-spacing: 0.01em;
    padding: 0.5rem 1rem;
}

.btn-app-primary {
    background: linear-gradient(135deg, #6D28D9 0%, #7C3AED 65%, #8B5CF6 100%);
    color: #fff;
    border: 1px solid #6D28D9;
    box-shadow: 0 4px 16px rgba(109,40,217,0.25);
}

.btn-app-primary:hover {
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(109,40,217,0.32);
}

.btn-app-soft {
    background: #F6F5FF;
    color: #5B21B6;
    border: 1px solid #DDD6FE;
}

.btn-app-soft:hover {
    background: #EDE9FE;
    color: #4C1D95;
}

.btn-app-warn {
    background: #FFF4EE;
    color: #C2410C;
    border: 1px solid #FDBA74;
}

.btn-app-warn:hover {
    background: #FFEDD5;
    color: #9A3412;
}

/* ── Forms ────────────────────────────────────────── */
.form-control, .form-select {
    background: var(--bg-input);
    border: 1.5px solid var(--line-0);
    border-radius: var(--r-sm);
    color: var(--ink-0);
    font-size: 0.9rem;
    transition: border-color 140ms, box-shadow 140ms;
}
.form-control:focus, .form-select:focus {
    background: #fff;
    border-color: var(--violet-soft);
    box-shadow: 0 0 0 3px rgba(109,40,217,.12);
    color: var(--ink-0);
    outline: none;
}
.form-control::placeholder { color: var(--ink-3); }
.form-select option { background: #fff; color: var(--ink-0); }
.form-label {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--ink-2);
    margin-bottom: 0.35rem;
}

/* ── Surface Card ─────────────────────────────────── */
.surface-card {
    background: var(--bg-card);
    border: 1px solid var(--line-0);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-md);
    padding: 1.5rem 1.75rem;
    position: relative;
}
.surface-card h2 {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 1.1rem;
}
.surface-card h2::before {
    content: '';
    display: inline-block;
    width: 14px; height: 3px;
    background: linear-gradient(90deg, var(--violet), var(--orange-mid));
    border-radius: 99px;
    flex-shrink: 0;
}
.surface-card > p { color: var(--ink-1); margin-bottom: 0; }
.surface-card > ul { color: var(--ink-1); }

/* ── Metric Strip ─────────────────────────────────── */
.metric-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 1rem;
    margin-bottom: 1.3rem;
}
.metric-pill {
    border-radius: var(--r-lg);
    padding: 1.4rem 1.6rem;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-md);
}
/* Cycled rather than fixed at four. A page with a fifth pill used to leave it with no
   gradient at all, and white text on no background is not a colour choice. */
.metric-pill:nth-child(4n+1) {
    background: linear-gradient(135deg, #6D28D9 0%, #7C3AED 55%, #A78BFA 100%);
}
.metric-pill:nth-child(4n+2) {
    background: linear-gradient(135deg, #EA580C 0%, #F97316 55%, #FB923C 100%);
}
.metric-pill:nth-child(4n+3) {
    background: linear-gradient(135deg, #0891B2 0%, #06B6D4 55%, #22D3EE 100%);
}
.metric-pill:nth-child(4n) {
    background: linear-gradient(135deg, #059669 0%, #10B981 55%, #34D399 100%);
}
.metric-pill::after {
    content: '';
    position: absolute;
    top: -24px; right: -24px;
    width: 110px; height: 110px;
    background: rgba(255,255,255,0.08);
    border-radius: 50%;
    pointer-events: none;
}
.metric-pill .label {
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.72);
    margin-bottom: 0.5rem;
}
.metric-pill .value {
    font-size: 2.2rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: #FFFFFF;
    line-height: 1.05;
    letter-spacing: -0.04em;
}

/* ── Tables ───────────────────────────────────────── */
.table {
    --bs-table-bg: transparent;
    --bs-table-striped-bg: #FAFBFF;
    --bs-table-hover-bg: #F5F3FF;
    --bs-table-border-color: var(--line-0);
    color: var(--ink-1);
    margin-bottom: 0;
    font-size: 0.9rem;
}
.table thead th {
    background: #F9FAFB;
    color: var(--ink-3);
    font-size: 0.69rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--line-0);
    padding: 0.8rem 1rem;
    white-space: nowrap;
}
.table td {
    vertical-align: middle;
    padding: 0.8rem 1rem;
    border-bottom-color: #F3F4F6;
}
.table tbody tr:last-child td { border-bottom: none; }
.table td:first-child { color: var(--ink-0); font-weight: 600; }

/* ── Utility ──────────────────────────────────────── */
.content { padding-top: 1rem; padding-bottom: 2.5rem; }

.valid.modified:not([type=checkbox]) { outline: 1px solid var(--emerald); }
.invalid { outline: 1px solid var(--rose); }
.validation-message { color: var(--rose); font-size: 0.82rem; }

/* The summary sits above the submit button and lists every failed field at once, so a
   long form does not have to be scanned for whichever control turned red. */
.validation-summary,
ul.validation-errors {
    margin: 0 0 0.75rem;
    padding: 0.6rem 1rem;
    list-style: none;
    background: var(--rose-light);
    border: 1px solid rgba(225, 29, 72, 0.25);
    border-radius: 8px;
    color: var(--rose);
    font-size: 0.85rem;
}

.validation-summary:empty,
ul.validation-errors:empty { display: none; }

.validation-summary li::before,
ul.validation-errors li::before { content: "•"; margin-inline-end: 0.5rem; }

.blazor-error-boundary {
    background: var(--rose-light);
    border: 1px solid rgba(225,29,72,0.2);
    border-radius: var(--r-md);
    padding: 1rem 1rem 1rem 3.5rem;
    color: var(--rose);
}
.blazor-error-boundary::after { content: "An error has occurred." }

#blazor-error-ui {
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--line-0);
    box-shadow: 0 -4px 20px rgba(0,0,0,.07);
    bottom: 0; left: 0; right: 0;
    padding: 0.7rem 1.25rem;
    color: var(--rose);
    display: none;
    position: fixed;
    z-index: 1000;
}
#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* ── Red Flag Strip ───────────────────────────────── */
.redflag-strip {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.redflag-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1.1rem;
    border-radius: var(--r-md);
    font-size: 0.875rem;
    font-weight: 500;
    box-shadow: var(--shadow-sm);
}
.redflag-high {
    background: #FFF1F2;
    border: 1px solid rgba(225,29,72,0.2);
    color: #9F1239;
}
.redflag-medium {
    background: #FFFBEB;
    border: 1px solid rgba(245,158,11,0.22);
    color: #92400E;
}
.redflag-low {
    background: var(--sky-light);
    border: 1px solid rgba(2,132,199,0.18);
    color: #075985;
}
.redflag-icon {
    font-size: 1.05rem;
    flex-shrink: 0;
}

/* ── Badge territory ──────────────────────────────── */
.badge-territory {
    display: inline-block;
    font-size: 0.69rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.18rem 0.55rem;
    border-radius: 99px;
    background: var(--violet-light);
    color: var(--violet);
    border: 1px solid rgba(109,40,217,0.18);
}

/* ── Commitment Archive Sidebar ───────────────────── */
.commitment-archive-sidebar {
    background: #fff;
    border-radius: var(--r-lg);
    border: 1.5px solid #EDE9FE;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.archive-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1rem;
    background: linear-gradient(135deg, #6D28D9 0%, #7C3AED 100%);
    background: linear-gradient(135deg, #4C1D95 0%, #5B21B6 100%);
}
.archive-month-label {
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.03em;
}
.archive-nav-btn {
    background: rgba(255,255,255,0.24);
    border: none;
    color: #fff;
    width: 28px;
    height: 28px;
    border-radius: 7px;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}
.archive-nav-btn:hover:not([disabled]) { background: rgba(255,255,255,0.4); }
.archive-nav-btn[disabled] { opacity: 0.35; cursor: default; }
.archive-empty {
    padding: 1.25rem 1rem;
    font-size: 0.85rem;
    color: #9CA3AF;
    text-align: center;
    margin: 0;
}
.archive-list {
    list-style: none;
    margin: 0;
    padding: 0.5rem 0;
    max-height: 520px;
    overflow-y: auto;
}
.archive-item {
    display: flex;
    gap: 0.6rem;
    padding: 0.65rem 1rem;
    border-bottom: 1px solid #F3F4F6;
}
.archive-item:last-child { border-bottom: none; }
.archive-check {
    color: #16A34A;
    font-size: 1rem;
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 2px;
}
.archive-item-body { flex: 1; min-width: 0; }
.archive-item-customer {
    font-size: 0.82rem;
    font-weight: 700;
    color: #374151;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.archive-item-promise {
    font-size: 0.8rem;
    color: #6B7280;
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.archive-item-date {
    font-size: 0.72rem;
    color: #9CA3AF;
    margin-top: 3px;
}

/* ── Notifications + Charts + Details ────────────── */
.notification-strip {
    display: grid;
    gap: 0.75rem;
}

.notification-item {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.9rem 1rem;
    border-radius: var(--r-md);
    border: 1px solid var(--line-0);
    background: #fff;
    box-shadow: var(--shadow-sm);
}

.notification-item strong {
    font-size: 0.82rem;
    letter-spacing: 0.02em;
}

.notification-item span {
    color: var(--ink-2);
    font-size: 0.82rem;
}

.notification-medium {
    border-color: rgba(245, 158, 11, 0.22);
    background: #FFFBEB;
}

.notification-low {
    border-color: rgba(2, 132, 199, 0.16);
    background: #F0F9FF;
}

.mini-chart {
    display: flex;
    align-items: end;
    gap: 0.85rem;
    min-height: 150px;
}

.mini-chart-bar-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
    flex: 1;
}

.mini-chart-bar {
    width: 100%;
    max-width: 36px;
    border-radius: 12px 12px 4px 4px;
    background: linear-gradient(180deg, #8B5CF6 0%, #6D28D9 100%);
    box-shadow: var(--shadow-v);
}

.mini-chart-bar-wrap span {
    font-size: 0.72rem;
    color: var(--ink-2);
}

.customer-subtitle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--ink-2);
    margin-top: 0.25rem;
}

.detail-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.75rem;
}

.detail-list li {
    display: grid;
    gap: 0.2rem;
    padding: 0.85rem 0.95rem;
    border-radius: var(--r-md);
    background: #FAFBFF;
    border: 1px solid #EEF2FF;
}

.detail-list li span {
    color: var(--ink-1);
    font-size: 0.84rem;
}

.detail-list li small {
    color: var(--ink-3);
    font-size: 0.74rem;
}

.stage-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 700;
}

.stage-qualified {
    color: #1D4ED8;
    background: #DBEAFE;
}

.stage-proposal {
    color: #7C2D12;
    background: #FFEDD5;
}

.stage-negotiation {
    color: #6D28D9;
    background: #EDE9FE;
}

.stage-won {
    color: #166534;
    background: #DCFCE7;
}

.stage-lost {
    color: #9F1239;
    background: #FFE4E6;
}

.stage-positive {
    color: #166534;
    background: #DCFCE7;
}

.stage-neutral {
    color: #92400E;
    background: #FEF3C7;
}

.stage-negative {
    color: #9F1239;
    background: #FFE4E6;
}

/* The application ships in a single light theme. The dark palette and its toggle
   were removed — no [data-theme] attribute is set, so nothing selects on it. */

[dir="rtl"] .page-header,
[dir="rtl"] .customer-subtitle,
[dir="rtl"] .top-breadcrumb,
[dir="rtl"] .top-right {
    direction: rtl;
}

/* Shown when a signed-in user reaches a page their role does not allow. */
.not-authorized-card {
    max-width: 32rem;
    margin: 3rem auto;
    text-align: center;
}

.not-authorized-card h1 {
    font-size: 1.35rem;
    font-weight: 800;
    color: #4C1D95;
    margin-bottom: 0.75rem;
}

.not-authorized-card p {
    color: #6B7280;
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

/* The standalone page uses the blank layout, so it centres itself rather than sitting
   inside the application shell. */
.not-authorized-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80vh;
    padding: 1rem;
}

.not-authorized-page .not-authorized-card { margin: 0; width: 100%; }

.not-authorized-actions {
    display: flex;
    gap: 0.6rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* Secondary links under the sign-in form (demo, plans). */
.login-secondary-links {
    margin-top: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.86rem;
}

.login-secondary-links a {
    color: #6D28D9;
    font-weight: 700;
    text-decoration: none;
}

.login-secondary-links a:hover { text-decoration: underline; }

.login-link-sep { color: #D1D5DB; }

/* Bootstrap paints an outline-warning button in #FFC107, which is 1.63:1 on white and
   cannot be read by anyone. The darker amber keeps the warning colour and clears 4.5:1.
   Set on the properties directly, not through --bs-btn-*: this is Bootstrap 5.1, which
   predates the custom-property button API, so overriding the variables changes nothing. */
.btn-outline-warning {
    color: #92400E;
    border-color: #B45309;
}

.btn-outline-warning:hover,
.btn-outline-warning:focus,
.btn-outline-warning:active {
    color: #FFFFFF;
    background-color: #B45309;
    border-color: #92400E;
}

/* The same amber wherever it carries a warning as plain text. #D97706 reads 3.1:1 on a
   white card, which is under the bar for anything that is not large text. */
.text-warn {
    color: #B45309;
}

/* ── Tables on a phone ────────────────────────────────────────────────────────
   A rep is the one user who is never at a desk. Their tables were built for one:
   the customer list measures 1252px, and on a 320px screen that is two columns
   at a time with the row's identity scrolled off to the left — the name gone by
   the time you reach the phone number.

   Below the breakpoint each row becomes its own card and each cell carries its
   own heading, taken from the data-label attribute on the cell. The header row
   is hidden because every cell now states what it is. Add `table-stack` to a
   table and `data-label` to its cells to opt in; a cell with no label (an
   actions column, say) simply renders without one. */
@media (max-width: 640.98px) {
    .table-stack thead { display: none; }

    .table-stack tbody tr {
        display: block;
        border: 1px solid #EDE9FE;
        border-radius: 12px;
        margin-bottom: 0.6rem;
        padding: 0.35rem 0.85rem;
        background: #FFFFFF;
    }

    /* Striping reads as noise once the rows are cards rather than lines. */
    .table-stack.table-striped tbody tr:nth-of-type(odd) > * { background: transparent; }

    .table-stack tbody td {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 1rem;
        width: auto;
        border: 0;
        border-bottom: 1px solid #F5F3FF;
        padding: 0.4rem 0;
        white-space: normal;
    }

    .table-stack tbody tr td:last-child { border-bottom: 0; }

    .table-stack tbody td::before {
        content: attr(data-label);
        font-size: 0.75rem;
        font-weight: 700;
        letter-spacing: 0.02em;
        text-transform: uppercase;
        color: #9CA3AF;
        flex: 0 0 auto;
        max-width: 45%;
    }

    /* The value side, so a long note wraps under its own heading rather than
       shoving it off the card. */
    .table-stack tbody td > * { min-width: 0; }

    /* Nothing to say and nothing to label — an empty cell would otherwise leave
       a stray divider line in the middle of the card. */
    .table-stack tbody td:not([data-label]):empty { display: none; }
}