/* =============================================================================
   Management dashboard — shared presentation primitives
   -----------------------------------------------------------------------------
   Tenant-themed building blocks shared by the Management surfaces:
   /dashboard/management/clients (Clients.razor) and
   /dashboard/management/organization (OrganizationPage.razor). Extracted out of
   Clients.razor.css (which CSS-isolated them to one component) so both pages
   reference one source of truth. All colors flow through BrandingService CSS
   variables (--brand-* / --color-* / --tier-c-*) with neutral hex fallbacks;
   non-brand neutrals (#e5e7eb, #6b7280, ...) may appear literal.

   Page-specific bits stay page-scoped: Clients keeps its assignment panel
   (.cm-assign-*) and ::deep audit-log overrides in Clients.razor.css; the
   Organization page keeps its own ::deep audit-log overrides in
   OrganizationPage.razor.css.
   ========================================================================== */

/* ── Header action buttons ─────────────────────────────────────────────────── */
/* The brand color is reasserted with !important across base / hover / focus so
   the cascade can't knock the background out from under these buttons. app.css,
   nxus-components.css and Bootstrap all theme `.btn*` with !important, and a
   bare `.btn:hover` would otherwise win the background-color on hover (leaving
   white text on no fill). Mirrors how the other button variants defend
   themselves; hover just darkens the same brand fill via brightness. */
.cm-btn-primary {
    background-color: var(--brand-primary, #1f628d) !important;
    color: var(--brand-primary-contrast, #ffffff) !important;
    border: none !important;
}

.cm-btn-secondary {
    background-color: var(--brand-secondary, #01949f) !important;
    color: var(--brand-secondary-contrast, #ffffff) !important;
    border: none !important;
}

.cm-btn-primary:hover,
.cm-btn-primary:focus,
.cm-btn-primary:active {
    background-color: var(--brand-primary, #1f628d) !important;
    color: var(--brand-primary-contrast, #ffffff) !important;
    filter: brightness(0.94);
}

.cm-btn-secondary:hover,
.cm-btn-secondary:focus,
.cm-btn-secondary:active {
    background-color: var(--brand-secondary, #01949f) !important;
    color: var(--brand-secondary-contrast, #ffffff) !important;
    filter: brightness(0.94);
}

/* ── Even responsive metric grid ───────────────────────────────────────────── */
.cm-metric-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--space-3, 12px);
    margin-bottom: var(--space-5, 20px);
}

@media (max-width: 1200px) {
    .cm-metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
    .cm-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
    .cm-metric-grid { grid-template-columns: 1fr; }
}

/* ── Search box (matches Page 0 canonical search) ──────────────────────────── */
.cm-search-wrap { position: relative; }

.cm-search-icon {
    position: absolute;
    left: 0.9rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-muted-foreground, #6c757d);
    z-index: 2;
    pointer-events: none;
}

.cm-search-clear {
    position: absolute;
    right: 0.9rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-muted-foreground, #6c757d);
    cursor: pointer;
    z-index: 2;
    font-size: 1.1rem;
}

.cm-search-clear:hover { color: var(--brand-primary, #1f628d); }

.cm-search {
    height: 42px;
    padding-left: 2.5rem;
    padding-right: 2.25rem;
    border-radius: var(--radius-button, 8px);
    border: 1px solid var(--color-border, #d3d9e3);
}

.cm-search:focus {
    border-color: var(--brand-primary, #1f628d);
    box-shadow: 0 0 0 0.2rem var(--brand-primary-alpha-10, rgba(31, 98, 141, 0.10));
}

/* ── Filter chips (unified, token-driven) ──────────────────────────────────── */
.cm-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.8rem;
    border-radius: var(--radius-badge, 20px);
    font-size: 0.75rem;
    font-weight: 600;
    background-color: var(--brand-primary-alpha-10, rgba(31, 98, 141, 0.10));
    color: var(--brand-primary, #1f628d);
}

.cm-chip .bi-x { cursor: pointer; }
.cm-chip .bi-x:hover { opacity: 0.7; }

/* ── Data table ────────────────────────────────────────────────────────────── */
.cm-table-wrap {
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: var(--radius-card, 10px);
    overflow: hidden;
}

.cm-table { margin-bottom: 0; }

.cm-table thead th {
    background-color: var(--brand-primary, #1f628d);
    color: var(--brand-primary-contrast, #ffffff);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.85rem 0.9rem;
    border: none;
    white-space: nowrap;
    vertical-align: middle;
}

.cm-table thead th.cm-sortable { cursor: pointer; user-select: none; }
.cm-table thead th.cm-sortable:hover { background-color: var(--brand-secondary, #01949f); }

/* Header select-all checkbox sits on the navy band — give it a light border and
   bump it slightly larger than the row boxes so it's clearly visible/clickable. */
.cm-table thead .form-check-input.fig-check {
    width: 1.25rem;
    height: 1.25rem;
    border-color: rgba(255, 255, 255, 0.85);
    background-color: rgba(255, 255, 255, 0.12);
}

.cm-table thead .form-check-input.fig-check:checked {
    background-color: var(--brand-secondary, #01949f);
    border-color: #ffffff;
}

.cm-table thead .form-check-input.fig-check:focus {
    box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.30);
}

/* Row checkboxes — keep them comfortably tappable. */
.cm-table tbody .form-check-input.fig-check {
    width: 1.15rem;
    height: 1.15rem;
}

.cm-table tbody td {
    padding: 0.75rem 0.9rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--color-border, #eef1f4);
    color: var(--color-muted-foreground, #6c757d);
}

.cm-table tbody tr:last-child td { border-bottom: none; }

.cm-table tbody tr { transition: background-color var(--transition-fast, 120ms ease); }
.cm-table tbody tr:hover { background-color: var(--brand-primary-alpha-5, rgba(31, 98, 141, 0.05)); }

.cm-table tbody tr.cm-row-selected {
    background-color: var(--brand-primary-alpha-10, rgba(31, 98, 141, 0.10));
}

.cm-table tbody tr.cm-row-archived { opacity: 0.6; }

.cm-company-name {
    color: var(--color-foreground, #0f172a);
    font-weight: 600;
}

.cm-company-sub {
    font-size: 0.8rem;
    color: var(--color-muted-foreground, #6c757d);
}

.cm-table-empty-icon {
    font-size: 3rem;
    color: #cbd5e1;
    margin-bottom: 1rem;
}

/* ── Loading skeleton rows ─────────────────────────────────────────────────── */
.cm-skeleton-row td { padding: 0.75rem 0.9rem; }
.cm-skeleton-row:hover { background: transparent !important; }

.cm-skel-check { width: 1.15rem; height: 1.15rem; border-radius: 4px; }
.cm-skel-sub { width: 35%; height: 0.7rem; margin-top: 6px; }
.cm-skel-actions { display: inline-block; width: 96px; height: 1.6rem; border-radius: 999px; }

/* ── Pagination footer ─────────────────────────────────────────────────────── */
.cm-pager-info {
    color: var(--color-muted-foreground, #6c757d);
    font-size: 0.9rem;
}

/* ── Slide-out drawer shell ────────────────────────────────────────────────── */
.cm-drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    z-index: 1050;
}

.cm-drawer {
    position: fixed;
    right: 0;
    top: 0;
    bottom: 0;
    width: 460px;
    max-width: 92vw;
    background: #ffffff;
    z-index: 1055;
    display: flex;
    flex-direction: column;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
    animation: cm-drawer-in 220ms ease;
}

@keyframes cm-drawer-in {
    from { transform: translateX(24px); opacity: 0; }
    to   { transform: translateX(0); opacity: 1; }
}

.cm-drawer__accent {
    height: 4px;
    background: var(--gradient-g2, linear-gradient(to right,
        var(--brand-primary, #1f628d),
        var(--brand-secondary, #01949f),
        var(--brand-accent, #76b243)));
}

.cm-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 1.25rem;
    border-bottom: 1px solid var(--color-border, #e5e7eb);
}

.cm-drawer__title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--brand-primary, #1f628d);
}

.cm-drawer__body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 1rem 1.25rem;
}