/* ── SmartConnect Broker page (extends portfolio-reporting.css) ─── */

.sc-broker-page {
    --b-primary: #2D1350;
    --b-primary-soft: #7040B0;
    --b-orange: #F26522;
    --b-text: #1A1A2E;
    --b-text-soft: #555570;
    --b-text-muted: #8888A0;
    --b-border: #E8E6EF;
    --b-bg: #FFFFFF;
    --b-bg-soft: #F8F6FB;

    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--b-text);
    max-width: 1100px;
    margin: 0 auto;
    /* Horizontal padding so content never touches the viewport edge.
       Without this, sites embedded at 1024–1100px wide had cards
       running into the browser chrome. */
    padding: 0 16px;
}

@media (max-width: 480px) {
    .sc-broker-page { padding: 0 12px; }
}

.sc-broker-page *,
.sc-broker-page *::before,
.sc-broker-page *::after { box-sizing: border-box; }

.sc-broker-page [hidden] { display: none !important; }

/* ── View switching ─── */

.sc-broker-page[data-broker-view="all"]  .sc-broker-reporting__view[data-view="mine"] { display: none; }
.sc-broker-page[data-broker-view="mine"] .sc-broker-reporting__view[data-view="all"]  { display: none; }

.sc-broker-page[data-broker-view="mine"] .sc-broker-children__card[data-user-assigned="0"] { display: none; }

/* ── Breadcrumbs ─── */

.sc-broker-crumbs {
    margin: 0 0 18px;
    font-size: 13px;
    color: var(--b-text-soft);
}

.sc-broker-crumbs ol {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.sc-broker-crumbs li {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sc-broker-crumbs a {
    color: var(--b-primary-soft);
    text-decoration: none;
    transition: color 0.15s;
}
.sc-broker-crumbs a:hover { color: var(--b-primary); text-decoration: underline; }

.sc-broker-crumbs .sep { color: var(--b-text-muted); }

.sc-broker-crumbs .is-current span { font-weight: 600; color: var(--b-text); }

/* ── View toggle ─── */

.sc-broker-toggle {
    display: inline-flex;
    background: var(--b-bg-soft);
    border: 1px solid var(--b-border);
    border-radius: 999px;
    padding: 4px;
    margin: 0 0 22px;
    gap: 4px;
}

.sc-broker-toggle__btn {
    appearance: none;
    border: none;
    background: transparent;
    color: var(--b-text-soft);
    padding: 8px 18px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.sc-broker-toggle__btn:hover { color: var(--b-text); }

.sc-broker-toggle__btn.is-active {
    background: #fff;
    color: var(--b-primary);
    box-shadow: 0 2px 6px rgba(45, 19, 80, 0.10);
}

.sc-broker-toggle__count {
    display: inline-block;
    min-width: 22px;
    padding: 1px 7px;
    background: rgba(112, 64, 176, 0.12);
    color: var(--b-primary-soft);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
}
.sc-broker-toggle__btn.is-active .sc-broker-toggle__count {
    background: var(--b-primary-soft);
    color: #fff;
}

/* ── Reporting wrapper ─── */

.sc-broker-reporting { margin-bottom: 32px; }

.sc-broker-reporting__controls {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0 0 12px;
}

.sc-broker-empty {
    padding: 28px;
    background: var(--b-bg-soft);
    border: 1px dashed var(--b-border);
    border-radius: 12px;
    text-align: center;
    color: var(--b-text-muted);
    font-size: 14px;
}

/* ── Children grid ─── */

.sc-broker-children {
    margin-top: 24px;
    background: var(--b-bg);
    border: 1px solid var(--b-border);
    border-radius: 16px;
    padding: 22px 24px;
    box-shadow: 0 4px 16px rgba(45, 19, 80, 0.06);
}

.sc-broker-children__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 14px;
    gap: 12px;
}

.sc-broker-children__header h3 {
    /* Size/weight/color from portal-typography.css */
    margin: 0;
}

.sc-broker-children__counts {
    color: var(--b-text-muted);
    font-size: 13px;
}

.sc-broker-children__limit-note {
    margin: 0 0 14px;
    padding: 10px 12px;
    background: #fff7ed;
    border: 1px solid #fdba74;
    border-radius: 8px;
    color: #7c2d12;
    font-size: 13px;
    line-height: 1.5;
}

.sc-broker-children__search {
    margin-bottom: 14px;
}

.sc-broker-children__search-input {
    width: 100%;
    padding: 10px 12px 10px 36px;
    border: 1px solid var(--b-border);
    border-radius: 8px;
    background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23646970' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><path d='m21 21-4.3-4.3'/></svg>") no-repeat 12px center;
    font-size: 14px;
    font-family: inherit;
    color: var(--b-text);
}
.sc-broker-children__search-input:focus {
    outline: none;
    border-color: var(--b-primary-soft);
    box-shadow: 0 0 0 3px rgba(112, 64, 176, 0.15);
}

/* AJAX search state — applied to the grid while a network request is in flight. */
.sc-broker-children__grid.is-searching {
    opacity: 0.55;
    pointer-events: none;
    transition: opacity 0.15s;
}

/* Result hint shown after a server-side search returns
   (e.g. "47 matches across all 320 accounts"). */
.sc-broker-children__server-hint {
    margin: -6px 0 12px;
    padding: 8px 12px;
    background: rgba(112, 64, 176, 0.06);
    border-left: 3px solid var(--b-primary-soft);
    border-radius: 4px;
    color: var(--b-text-soft);
    font-size: 12px;
    line-height: 1.4;
}

/* v2.11.0: two-section layout (Sub-brokers + Tenants).
   Sections are visually separated with a header strip + spacing.
   Sections auto-hide when their grid has zero visible cards (e.g.
   search query matches only one type). */
.sc-broker-children__section {
    margin-top: 18px;
}
.sc-broker-children__section:first-of-type {
    margin-top: 4px;
}
.sc-broker-children__section[hidden] {
    display: none;
}
.sc-broker-children__section-header {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 10px 0 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--b-line, #e6e7eb);
}
.sc-broker-children__section-title {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--b-text, #1f2328);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    display: flex;
    align-items: center;
    gap: 8px;
}
.sc-broker-children__section-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: 11px;
    background: var(--b-chip, #f0f2f5);
    color: var(--b-text-soft, #5b6470);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.sc-broker-children__section--brokers .sc-broker-children__section-count {
    background: rgba(56, 96, 184, 0.10);
    color: #2c4a8f;
}
.sc-broker-children__section--tenants .sc-broker-children__section-count {
    background: rgba(0, 105, 8, 0.08);
    color: #006908;
}

/* Fluid grid: cards have a 240px floor and otherwise fill the row.
   `data-columns` is treated as a MAX cap — at wide viewports we won't
   exceed N columns, but at narrow viewports cards reflow naturally
   instead of waiting for a hard breakpoint. This prevents both the
   "3-cols too cramped between 768–900px" bug and the abrupt jumps
   between breakpoints. */
.sc-broker-children__grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
}
.sc-broker-children__grid[data-columns="1"] {
    grid-template-columns: 1fr;
}
.sc-broker-children__grid[data-columns="2"] {
    grid-template-columns: repeat(auto-fill, minmax(max(240px, calc((100% - 12px) / 2)), 1fr));
}
.sc-broker-children__grid[data-columns="3"] {
    grid-template-columns: repeat(auto-fill, minmax(max(240px, calc((100% - 24px) / 3)), 1fr));
}
.sc-broker-children__grid[data-columns="4"] {
    grid-template-columns: repeat(auto-fill, minmax(max(240px, calc((100% - 36px) / 4)), 1fr));
}

@media (max-width: 480px) {
    /* On phones, force single-column regardless of data-columns. */
    .sc-broker-children__grid,
    .sc-broker-children__grid[data-columns] { grid-template-columns: 1fr; }
}

.sc-broker-children__card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: #fff;
    border: 1px solid var(--b-border);
    border-radius: 10px;
    text-decoration: none !important;
    color: var(--b-text) !important;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.sc-broker-children__card[hidden] { display: none; }

.sc-broker-children__card:hover {
    border-color: var(--b-primary-soft);
    box-shadow: 0 4px 12px rgba(112, 64, 176, 0.12);
    transform: translateY(-1px);
}

.sc-broker-children__logo {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background: var(--b-bg-soft);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sc-broker-children__logo img { width: 100%; height: 100%; object-fit: contain; }
.sc-broker-children__logo--placeholder {
    background: linear-gradient(135deg, #ede4f6, #d8c5ee);
    color: var(--b-primary-soft);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.04em;
}

.sc-broker-children__body {
    flex: 1;
    min-width: 0;
}

.sc-broker-children__name {
    font-weight: 600;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sc-broker-children__meta {
    margin-top: 3px;
    font-size: 11px;
    color: var(--b-text-muted);
    display: flex;
    align-items: center;
    gap: 8px;
}

.sc-broker-children__type {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.sc-broker-children__type--broker { background: rgba(45, 19, 80, 0.10); color: var(--b-primary); }
.sc-broker-children__type--tenant { background: rgba(242, 101, 34, 0.12); color: var(--b-orange); }

.sc-broker-children__arrow {
    color: var(--b-text-muted);
    font-size: 16px;
    transition: transform 0.15s, color 0.15s;
    flex: 0 0 auto;
}
.sc-broker-children__card:hover .sc-broker-children__arrow {
    color: var(--b-primary-soft);
    transform: translateX(2px);
}

.sc-broker-children__empty {
    margin-top: 18px;
    padding: 18px;
    background: var(--b-bg-soft);
    border-radius: 8px;
    text-align: center;
    color: var(--b-text-muted);
    font-style: italic;
    font-size: 13px;
}

/* ── Mobile-specific tweaks ─── */

@media (max-width: 768px) {
    .sc-broker-children {
        padding: 18px 16px;
        border-radius: 12px;
    }
    .sc-broker-children__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    .sc-broker-toggle {
        width: 100%;
        justify-content: center;
    }
    .sc-broker-toggle__btn {
        flex: 1;
        justify-content: center;
        padding: 10px 14px;
    }
}

@media (max-width: 480px) {
    .sc-broker-crumbs { font-size: 12px; }
    .sc-broker-children {
        padding: 16px 12px;
        border-radius: 10px;
    }
}