/* ─────────────────────────────────────────────────────────────────────────────
   Constant Contact tabs (System Hub → Constant Contact, Communications →
   Constant Contact). Same structural pattern as announcements.css:

     <div class="jbf-body">                ← flex:1, min-height:0, overflow:hidden
        <div class="cc-accounts-workspace"> ← flex:1, min-height:0, overflow:hidden
            <div class="cc-accounts-toolbar jbf-toolbar"> ← flex:0 0 auto
            <div class="cc-accounts-error">               ← flex:0 0 auto
            <PaginatedTable ScrollMode="FillAvailableHeight"> ← flex:1, scrolls
        </div>
     </div>

   Without the flex-column-fill chain on the workspace, FillAvailableHeight
   has no measurable height to size against, so the table stretches to its
   natural content height and the page can't scroll the body cleanly --
   that's the bug this file fixes.
   ──────────────────────────────────────────────────────────────────────── */

.cc-accounts-workspace,
.cc-lists-workspace {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Toolbar row: title + hint on the left, Refresh button on the right.
   Wraps to a stacked layout when the toolbar narrows below ~520px. */
.cc-accounts-toolbar,
.cc-lists-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-shrink: 0;
}

.cc-accounts-toolbar-info,
.cc-lists-toolbar-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.cc-accounts-title,
.cc-lists-title {
    font-size: 1.125rem;
    line-height: 1.3;
    margin: 0;
    color: var(--jbf-text-strong, #1f2937);
}

.cc-accounts-hint,
.cc-lists-hint {
    margin: 0;
    font-size: 0.875rem;
}

/* Error alert sits between toolbar and table; mirrors toolbar gutters. */
.cc-accounts-error,
.cc-lists-error {
    flex-shrink: 0;
    padding: 12px 32px 0;
}

/* xs/sm tier (max-width 767.98px mirrors --bp-md). Media queries cannot deref CSS vars. */
@media (max-width: 767.98px) {
    .cc-accounts-error,
    .cc-lists-error {
        padding: 8px 16px 0;
    }

    .cc-accounts-toolbar,
    .cc-lists-toolbar {
        gap: 8px;
    }

    /* Below the toolbar's wrap threshold, give the Refresh button full
       width so it aligns under the title rather than floating awkwardly. */
    .cc-accounts-toolbar > .rz-button,
    .cc-lists-toolbar > .rz-button {
        width: 100%;
    }
}

/* Empty / placeholder state inside the workspace shouldn't hold the height
   open if there's no table -- keep the placeholder centered in available
   space without expanding the column further. */
.cc-accounts-workspace .event-admin-tab-placeholder,
.cc-lists-workspace .event-admin-tab-placeholder {
    flex: 1;
    min-height: 0;
}

/* The host wrappers below sit between .cc-*-workspace (flex column,
   overflow:hidden) and PaginatedTable. Without flex:1 + min-height:0 +
   display:flex on these hosts, ScrollMode="FillAvailableHeight" cannot
   measure a constrained height and the pagination footer slips below the
   viewport (visible at 100% browser zoom on shorter screens). */
.cc-accounts-table-host,
.cc-lists-table-host {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* CC list + account grids: match Communications Email tab alignment -
   text timestamps left + nowrap (US format from IUserTimezoneService),
   counts right + tabular nums. Host wraps PaginatedTable (.generic-table). */
.cc-lists-table-host .generic-table th.com-email-col-nowrap,
.cc-lists-table-host .generic-table td.com-email-col-nowrap,
.cc-accounts-table-host .generic-table th.com-email-col-nowrap,
.cc-accounts-table-host .generic-table td.com-email-col-nowrap {
    white-space: nowrap;
}

.cc-lists-table-host .com-email-metric-num,
.cc-accounts-table-host .com-email-metric-num {
    display: block;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Allow long list / account names without the default 7rem td cap from
   PaginatedTable crushing the first column. */
.cc-lists-table-host .generic-table td.cc-col-list-name,
.cc-accounts-table-host .generic-table td.cc-col-account-name {
    max-width: none;
    word-break: break-word;
    overflow-wrap: break-word;
}

.cc-accounts-table-host .generic-table td .cc-accounts-id-cell {
    max-width: none;
}