/* Admin-only layout and the state classes admin/script.js toggles (.section.active, .modal-overlay.open,
   .copy-notification.show). Everything that looks like the product (colours, buttons, cards, the console frame,
   dialogs, alerts) comes from the shared @darkedges/ui stylesheet linked in index.html; this file uses its tokens only,
   never colour literals. */

.header-stats {
    display: flex;
    gap: var(--de-space-4);
    font-size: var(--de-text-sm);
}

.tenant-selector {
    display: flex;
    align-items: center;
    gap: var(--de-space-2);
}

.tenant-selector .de-select {
    width: auto;
    min-width: 10rem;
}

.section {
    display: none;
}

.section.active {
    display: block;
}

.section.de-stack.active {
    display: flex;
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: var(--de-space-4);
}

.users-grid,
.devices-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
    gap: var(--de-space-4);
}

/* list cards built by script.js */
.card-small {
    padding: var(--de-space-4);
}

.card-small h4 {
    margin: 0 0 var(--de-space-2);
    font-size: var(--de-text-base);
    overflow-wrap: anywhere;
}

.card-small p {
    margin: var(--de-space-1) 0;
    font-size: var(--de-text-sm);
    color: var(--de-muted-foreground);
}

.card-clickable {
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.card-clickable:hover {
    border-color: var(--de-primary);
    box-shadow: var(--de-shadow-md);
}

.card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--de-space-2);
    margin-top: var(--de-space-3);
}

.api-list {
    margin: 0;
    padding-left: var(--de-space-4);
    font-size: var(--de-text-sm);
}

.transaction-row {
    display: flex;
    gap: var(--de-space-2);
    padding: var(--de-space-2) 0;
    border-bottom: 1px solid var(--de-border);
    font-size: var(--de-text-sm);
}

.transaction-row:last-child {
    border-bottom: 0;
}

.qr-block {
    align-items: center;
    text-align: center;
    margin-top: var(--de-space-4);
}

#qr-code-display img {
    width: 15.6rem;
    height: 15.6rem;
}

.selected-user-context {
    margin-bottom: var(--de-space-4);
}

/* dialogs: the shared overlay is always shown, so the page keeps its open/closed state class */
.modal-overlay:not(.open) {
    display: none;
}

.modal-wide {
    width: min(36rem, 100%);
}

.modal-actions {
    justify-content: flex-end;
    margin-top: var(--de-space-4);
}

/* toast */
.copy-notification {
    position: fixed;
    right: var(--de-space-4);
    bottom: var(--de-space-4);
    z-index: 60;
    max-width: 22rem;
    padding: var(--de-space-3) var(--de-space-4);
    border-radius: var(--de-radius);
    background: var(--de-popover);
    color: var(--de-popover-foreground);
    border: 1px solid var(--de-border);
    box-shadow: var(--de-shadow-md);
    font-size: var(--de-text-sm);
    opacity: 0;
    pointer-events: none;
    transform: translateY(0.5rem);
    transition: opacity 0.2s, transform 0.2s;
}

.copy-notification.show {
    opacity: 1;
    transform: none;
}

.copy-notification.show.success {
    border-color: var(--de-success);
}

.copy-notification.show.error {
    border-color: var(--de-destructive);
}