/* Common styles like .page-container, .page-header-bar, .breadcrumbs, .truncated-id,
   .btn-*, .badge, .overview-grid, .header-content, .header-actions, .action-buttons,
   .actions-description, .loading-container, .spinner, .error-container, .error-icon
   are in portal-common.css */

/* ==========================================
   User Overview Section
   ========================================== */

.user-overview {
    margin-bottom: 30px;
}

/* ==========================================
   Permissions Section
   ========================================== */

.permissions-section {
    margin-bottom: 30px;
}

/* ==========================================
   Permissions table
   ==========================================
   Was a grid of cards, one per permission. A card holds four labelled fields and repeats all
   four labels on every card, so twenty permissions were twenty boxes and eighty labels, and
   comparing two of them meant reading them rather than scanning a column. The table styling
   itself is the portal's — css/table.css, which this page now loads. Only what the cards had
   and a table does not is kept below. */

.permissions-table .permission-role-cell {
    font-weight: 600;
    color: var(--primary-color);
    white-space: nowrap;
}

/* Sized against the row rather than the old card heading: at 1.5rem it was taller than the
   line it sits in and pushed every row apart. */
.permission-icon {
    display: inline-flex;
    vertical-align: -0.15em;
    margin-right: 6px;
    color: var(--text-secondary);
}

.permission-icon .gd-icon {
    width: 1.05em;
    height: 1.05em;
}

/* The kind of thing a permission is pinned to, above the id itself. */
.permission-entity-type {
    display: block;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    margin-bottom: 2px;
}

.rights-badges,
.permissions-table .type-tag {
    margin: 2px 3px 2px 0;
}

/* The jump to the entity's own page. Muted until hovered: there is one per row, and twenty
   accent-coloured icons down a column read as the most important thing on the page. */
.permission-entity-link {
    display: inline-flex;
    margin-left: 6px;
    vertical-align: -0.15em;
    color: var(--text-muted);
    transition: var(--transition-smooth);
}

.permission-entity-link:hover {
    color: var(--primary-color);
}

.permission-entity-link .gd-icon {
    width: 0.95em;
    height: 0.95em;
}

.no-data-message {
    text-align: center;
    color: var(--text-muted);
    padding: 40px 20px;
    font-size: 1rem;
}

/* ==========================================
   User Actions Section
   ========================================== */

.user-actions {
    margin-bottom: 30px;
}

/* ==========================================
   Responsive Design
   ========================================== */

@media (max-width: 968px) {
    /* The table scrolls sideways inside .table-wrapper (css/table.css) rather than the page
       doing it, so there is nothing to restack here. */
    .permissions-table {
        font-size: 0.85rem;
    }
}