/* LeadBanque branded shell — the redesign's colored zones only.
   Colors come from MudBlazor's OWN theme variables, which MudThemeProvider
   emits from your TenantBranding.Theme. So the shell follows your existing
   per-tenant theming with zero extra plumbing — no custom brand object.

   Load AFTER MudBlazor's stylesheet in App.razor:
     <link href="css/leadbanque-brand.css" rel="stylesheet" />  */

/* White top bar — the redesign moves brand color off the bar.
   color flows to nav buttons via Color.Inherit. */
.lb-appbar {
    background: #ffffff !important;
    color: #2D2D2D !important;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
}

/* Colored page-title band — content area, uses your theme primary.
   Hidden until a page sets its title (best-effort). */
.lb-title-band {
    background: var(--mud-palette-secondary);
    color: var(--mud-palette-secondary-text);
    padding: 16px 28px;
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.lb-title-band:empty { display: none; }

/* Light canvas holding white cards */
.lb-canvas {
    background: var(--mud-palette-background);
    min-height: calc(100vh - 72px);
    padding: 24px 28px;
}

/* Accented card-header utility — the "ACCOUNT INFORMATION" treatment.
   Usage:
     <MudCard Elevation="1">
       <div class="lb-card-header">
         <MudIcon Icon="@Icons.Material.Filled.Badge" Size="Size.Small" />
         <span>Section title</span>
       </div>
       <MudCardContent> ... </MudCardContent>
     </MudCard>  */
.lb-card-header {
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text, #fff);
    padding: 12px 18px;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 4px 4px 0 0;
}

/* ── Data tables: ONE app-wide font size ───────────────────────────────────────────────────
   Every MudTable / MudSimpleTable / MudDataGrid reads this token. Rather than fight MudBlazor's cell selectors
   (its body cells are `.mud-table-root .mud-table-body .mud-table-cell`, 0,3,0), MudBlazor's OWN typography
   variables are re-scoped to tables: every cell, and every body2 / subtitle2 text inside a table, inherits the
   token. MudTheme Typography is NOT changed — outside tables Body2 keeps its theme size. Here, not in app.css:
   this file loads after MudBlazor.min.css. Deliberate exceptions follow (and the Leads phone cards below). */
:root { --lb-table-font-size: 0.75rem; }   /* 12px at the default root size; rem so it scales */

.mud-table-root,
.mud-simple-table {
    --mud-typography-body2-size: var(--lb-table-font-size);
    --mud-typography-subtitle2-size: var(--lb-table-font-size);
}

/* Exception, kept: Rep Performance headers are small caps (uppercase, letter-spaced) by design. Same weight as
   MudBlazor's header rule (0,3,0) and later in the cascade, so it wins. The rest of that style is in app.css. */
.lb-perf-table.mud-table .mud-table-head .mud-table-cell { font-size: 0.68rem; }

/* My Territory → Distributors (CBP). Nothing in a row wraps except "Shares with", a narrow bounded column whose
   chips stack onto new lines; a chip name too long for it truncates with an ellipsis (the full name is in the details
   card and the aria-label). A window too narrow for the nowrap columns scrolls the table (HorizontalScrollbar). */
.lb-dist-table .mud-table-body .mud-table-cell { white-space: nowrap; }
.lb-dist-table .mud-table-body .mud-table-cell.lb-dist-shares {
    white-space: normal;
    width: 220px; min-width: 220px; max-width: 220px;
}
.lb-dist-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.lb-dist-chip  { position: relative; display: inline-block; max-width: 100%; cursor: pointer; }
/* The hover tooltip wraps each chip in an inline-block that sizes to its content; bound it too, or the chip's
   max-width never bites. min-width: 0 lets the flex label shrink so the ellipsis can engage. */
.lb-dist-chip .mud-tooltip-root { max-width: 100%; }
/* At the 12px table token the small chip is a 22px pill. The label is a block (so the ellipsis works) with
   height:auto, so the chip's own align-items:center centres it — MudBlazor's height:100% would pin it to the top. */
.lb-dist-chip .mud-chip {
    max-width: 100%; margin: 0;
    height: 22px; padding: 0 8px; font-size: var(--lb-table-font-size); line-height: 1;
}
.lb-dist-chip .mud-chip > .mud-chip-content {
    display: block; height: auto; line-height: 16px;
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* The Shares-with details card (DistributorDetailsCard): hover and pinned. It draws its own solid surface, so the
   popover or tooltip around it only positions it. Both live in the popover layer, outside the table's scroll box. */
.lb-dist-card {
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    box-shadow: var(--mud-elevation-4);
    padding: 12px;
    min-width: 220px; max-width: 320px;
    text-align: left;
    font-size: var(--lb-table-font-size);
    font-weight: 400;
    line-height: 1.5;
}
.lb-dist-card-name { font-size: 0.8125rem; font-weight: 600; margin-bottom: 6px; }
.lb-dist-card-fields {
    display: grid; grid-template-columns: max-content 1fr; column-gap: 12px; row-gap: 2px; margin: 0;
}
.lb-dist-card-fields dt { color: var(--mud-palette-text-secondary); margin: 0; }
.lb-dist-card-fields dd { margin: 0; }
/* Strip the hover tooltip's own chrome (dark fill, centred bold 12px text, padding) so only the card shows, and lift
   both cards above the app bar and the table's sticky header. */
.mud-tooltip:has(.lb-dist-card) {
    background: transparent; color: inherit; padding: 0; text-align: left; font-weight: 400; box-shadow: none;
}
.mud-popover:has(.lb-dist-card) { z-index: var(--mud-zindex-tooltip); }

/* Leads table — denser, bordered, pinned action column */
.lb-leads-table td, .lb-leads-table th {
    /* font-size: the app-wide token above (was 0.68rem here) */
    line-height: 1.25;
    padding: 3px 8px;
    vertical-align: middle;
    border-bottom: 1px solid rgba(0,0,0,.08);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lb-leads-table th { font-weight: 600; border-bottom: 2px solid rgba(0,0,0,.12); }
.lb-leads-table td:nth-child(1) {  /* Company Name — 2-line clamp */
    max-width: 150px;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.lb-leads-table td:nth-child(3) { max-width: 130px; }  /* Assigned To */
.lb-leads-table td:nth-child(5) { max-width: 110px; }  /* Contact */
.lb-leads-table td:nth-child(6) { max-width: 150px; }  /* Location */
.lb-leads-table td:nth-child(4), .lb-leads-table td:nth-child(7), .lb-leads-table td:nth-child(8) { white-space: nowrap; }  /* Date, Phone, Source */
.lb-leads-table th:last-child, .lb-leads-table td:last-child {
    position: sticky; right: 0; width: 1%; white-space: nowrap;
    background: var(--mud-palette-surface);
    box-shadow: -4px 0 6px -4px rgba(0,0,0,.12);
}
/* The full-width "No leads found." / loading row is one <td colspan>. MudBlazor 9.11 made it a <td> (it was a <th>),
   so the per-column rules above caught it — the Company Name clamp turned it into a 150px box showing just "N".
   Same specificity as those rules and later in the file, so this wins. (.NET 10 upgrade, 2026-10-08.) */
.lb-leads-table td[colspan] {
    display: table-cell; max-width: none; width: auto;
    white-space: normal; overflow: visible; text-overflow: clip;
    position: static; box-shadow: none;
}

/* Phone (<600px): the leads table is already in MudTable's stacked mobile mode.
   Put each field's LABEL above its VALUE, and relax the dense desktop cell rules
   (nowrap / max-width / tiny font / sticky action column) so values read normally. */
@media (max-width: 599.98px) {
    /* Exception, kept: phone cards read at 0.9rem. Selector at 0,4,0 so it beats MudBlazor's body-cell rule
       (0,3,0), which now carries the table token. */
    .lb-leads-table .mud-table-root .mud-table-body .mud-table-cell {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        white-space: normal !important;
        max-width: none !important;
        overflow: visible !important;
        text-overflow: clip !important;
        font-size: 0.9rem;
        line-height: 1.35;
        text-align: left !important;
        padding: 6px 12px !important;
    }
    /* MudBlazor renders the DataLabel via ::before in stacked mode — sit it above the value.
       (If it's a real element instead, flex-direction:column above still stacks it.) */
    .lb-leads-table .mud-table-cell::before {
        padding: 0 0 2px 0 !important;
        margin: 0 !important;
        text-align: left !important;
        font-weight: 600;
        color: var(--mud-palette-text-secondary);
    }
    /* Un-pin the Actions column so its View icon isn't stuck/clipped when cells are stacked. */
    .lb-leads-table th:last-child, .lb-leads-table td:last-child {
        position: static !important;
        width: auto !important;
        box-shadow: none !important;
        background: transparent !important;
    }
}