/*
   The admin console.

   Deliberately does not look like the customer product. Somebody who administers the platform
   and also uses it needs to know at a glance which one they are looking at, because the two
   screens show the same kinds of number about very different scopes - and a cost figure read as
   "my workspace" when it is "every workspace" is a mistake worth a whole design decision.

   So the console is dark-headed, denser, and full width. It reuses the product's cards, tables
   and buttons underneath: the shell says where you are, the components stay familiar.
*/

.admin-shell {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--surface-sunken, #F6F7F9);
}

.admin-topbar {
    background: #0B1220;
    color: #E5E7EB;
    padding: var(--space-3) var(--space-4);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.admin-topbar__brand {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: #FFF;
    font-weight: var(--weight-semibold);
    text-decoration: none;
    white-space: nowrap;
}

.admin-topbar__badge {
    background: #DC2626;
    color: #FFF;
    border-radius: var(--radius-sm, 6px);
    padding: 2px 6px;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.admin-topbar__spacer { flex: 1 1 auto; }

.admin-topbar__who {
    color: #9CA3AF;
    font-size: var(--text-sm);
    white-space: nowrap;
}

.admin-nav {
    display: flex;
    gap: var(--space-1, 4px);
    overflow-x: auto;
    background: #111A2E;
    padding: 0 var(--space-4);
}

.admin-nav__item {
    color: #9CA3AF;
    text-decoration: none;
    padding: var(--space-3) var(--space-3);
    font-size: var(--text-sm);
    white-space: nowrap;
    border-bottom: 2px solid transparent;
}

.admin-nav__item:hover { color: #E5E7EB; }

.admin-nav__item.is-active {
    color: #FFF;
    border-bottom-color: #6366F1;
}

.admin-content {
    flex: 1 1 auto;
    padding: var(--space-5, 20px) var(--space-4);
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
}

/* The one thing on this screen that must never be missed: you are looking at, or acting on,
   a real customer's data. */
.admin-banner {
    background: #7C2D12;
    color: #FFEDD5;
    padding: var(--space-3) var(--space-4);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    font-size: var(--text-sm);
}

.admin-banner a { color: #FFF; font-weight: var(--weight-semibold); }

/* Shown inside the customer product while an administrator is viewing a tenant, so it is
   impossible to mistake a support session for the customer's own. */
.viewas-bar {
    position: sticky;
    top: 0;
    z-index: 40;
    background: #7C2D12;
    color: #FFEDD5;
    padding: var(--space-2) var(--space-3);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    flex-wrap: wrap;
}

.viewas-bar form { margin: 0; }

.viewas-bar__name { font-weight: var(--weight-semibold); color: #FFF; }

/* A status pill for a workspace row. */
.admin-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-radius: 999px;
    padding: 2px 10px;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    background: var(--surface-sunken, #F3F4F6);
    color: var(--text-muted);
}

.admin-pill--active { background: #DCFCE7; color: #166534; }
.admin-pill--suspended { background: #FEE2E2; color: #991B1B; }
.admin-pill--admin { background: #E0E7FF; color: #3730A3; }
.admin-pill--warn { background: #FEF3C7; color: #92400E; }

/* Right-aligned numeric columns. A column of money that is not aligned cannot be scanned. */
.sync-table td.is-num,
.sync-table th.is-num { text-align: right; font-variant-numeric: tabular-nums; }

.admin-filters {
    display: flex;
    gap: var(--space-2);
    align-items: flex-end;
    flex-wrap: wrap;
}

.admin-filters .field { margin: 0; }

.admin-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding-top: var(--space-3);
    flex-wrap: wrap;
}