/* public/css/admin.css */
/* ============================================================
   WorkFlura Admin — Unified Styles
   Replaces: admin.css + admin-components.css + tenant-styles.css
   Uses design tokens from style.css (Ethereal Workspace)
   ============================================================ */

/* ── Admin-specific overrides ────────────────────────────────── */
body {
  background: var(--surface);
}

/* ================================================================
   ADMIN HEADER PATTERN
   ================================================================ */
.wf-admin-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-6);
  gap: var(--space-4);
}
.wf-admin-header .wf-headline {
  margin-bottom: var(--space-1);
}
.wf-admin-header .wf-body {
  margin: 0;
}

.wf-admin-header__actions {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  flex-shrink: 0;
}

/* ================================================================
   ADMIN CARD (tonal container)
   ================================================================ */
.wf-admin-card {
  background: var(--surface-container-lowest);
  border-radius: var(--radius-2xl);
  padding: var(--space-6);
}

/* Platform Debug view only: halve the cards' vertical padding to reclaim height;
   keep the horizontal padding. ID specificity beats the base .wf-admin-card. */
#view-central-support .wf-admin-card {
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
}

/* ================================================================
   DATA TABLE (new style)
   ================================================================ */
.wf-data-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.8125rem;
}

.wf-data-table th {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  background: var(--surface-container-low);
  color: var(--on-surface-variant);
  font-weight: 700;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.wf-data-table th:first-child {
  border-radius: var(--radius-lg) 0 0 0;
}
.wf-data-table th:last-child {
  border-radius: 0 var(--radius-lg) 0 0;
}

.wf-data-table td {
  padding: var(--space-3) var(--space-4);
  color: var(--on-surface);
  vertical-align: middle;
}

.wf-data-table tbody tr {
  transition: background 0.15s;
}
.wf-data-table tbody tr:hover {
  background: var(--surface-container-low);
}

/* Soft row separator (tonal, not border) */
.wf-data-table tbody tr + tr td {
  box-shadow: inset 0 1px 0 var(--surface-container);
}

/* ================================================================
   ITEM LIST (roles list, forms list)
   ================================================================ */
.wf-item-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.wf-item-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  transition: background 0.15s;
}
.wf-item-list li:hover {
  background: var(--surface-container-low);
}

/* ================================================================
   QUICK ADD (roles inline form)
   ================================================================ */
.wf-quick-add {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

/* ================================================================
   BUTTON ROW
   ================================================================ */
.wf-btn-row {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* ================================================================
   SEARCH INPUT
   ================================================================ */
.wf-search-input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1px solid rgba(173, 179, 181, 0.3);
  border-radius: var(--radius-lg);
  font-family: var(--font-body);
  font-size: 0.875rem;
  background: var(--surface-container-lowest);
  color: var(--on-surface);
  box-sizing: border-box;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}
.wf-search-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0, 96, 173, 0.1);
}

.wf-admin-search {
  position: relative;
  margin-bottom: var(--space-6);
}

.wf-search-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--surface-container-lowest);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  max-height: 300px;
  overflow-y: auto;
  z-index: 100;
}

/* ================================================================
   OU LAYOUT
   ================================================================ */
.wf-ou-layout {
  display: grid;
  grid-template-columns: 350px 1fr;
  gap: var(--space-6);
  min-height: 500px;
}

@media (max-width: 900px) {
  .wf-ou-layout {
    grid-template-columns: 1fr;
  }
}

.wf-ou-tree-panel,
.wf-ou-detail-panel {
  background: var(--surface-container-lowest);
  border-radius: var(--radius-2xl);
  overflow: hidden;
}

.wf-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-4) var(--space-5);
  background: var(--surface-container-low);
}

.wf-ou-tree-container {
  padding: var(--space-4);
  overflow-y: auto;
  max-height: calc(100vh - 300px);
}

/* OU tree reuses existing classes from ousFrontend.js */
.ou-tree {
  list-style: none;
  padding: 0;
  margin: 0;
}
.ou-tree ul {
  list-style: none;
  padding-left: 24px;
  margin: 0;
}
.ou-tree-item {
  margin: 2px 0;
}
.ou-tree-node {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background 0.15s;
  font-size: 0.875rem;
}
.ou-tree-node:hover {
  background: var(--surface-container-low);
}
.ou-tree-node.selected {
  background: var(--surface-container);
  font-weight: 600;
  color: var(--primary);
}
.ou-tree-toggle {
  cursor: pointer;
  font-size: 0.75rem;
  width: 16px;
}
.ou-tree-icon {
  font-size: 1rem;
}
.ou-tree-name {
  flex: 1;
}
.ou-tree-count {
  font-size: 0.75rem;
  color: var(--on-surface-variant);
  background: var(--surface-container-high);
  padding: 1px 6px;
  border-radius: var(--radius-full);
}

/* OU tree children & collapsed state */
.ou-tree-children {
  list-style: none;
  padding-left: 24px;
  margin: 0;
}
.ou-tree-children.collapsed {
  display: none;
}
.ou-tree-toggle.has-children {
  color: var(--primary);
}
.ou-tree-empty {
  padding: var(--space-8);
  text-align: center;
}

/* OU Detail Panel (rendered by ousFrontend.js) */
.ou-detail {
  padding: var(--space-5);
}
.ou-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-4);
}
.ou-detail-header h3 {
  font-family: var(--font-headline);
  font-size: 1.125rem;
  font-weight: 700;
  margin: 0;
  color: var(--on-surface);
}
.ou-detail-actions {
  display: flex;
  gap: var(--space-2);
}
.ou-detail-actions button {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  border: none;
  border-radius: var(--radius-full);
  padding: 0.4rem 0.875rem;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.ou-detail-actions .btn-secondary {
  background: var(--surface-container-high);
  color: var(--on-surface-variant);
  border: none;
  padding: 0.4rem 0.875rem;
  border-radius: var(--radius-full);
}
.ou-detail-actions .btn-secondary:hover {
  background: var(--surface-container-highest);
  color: var(--on-surface);
}
.ou-detail-actions .btn-danger {
  background: var(--error);
  color: var(--on-error);
  border: none;
  padding: 0.4rem 0.875rem;
  border-radius: var(--radius-full);
}
.ou-detail-actions .btn-danger:hover {
  background: var(--error-dim);
}
.ou-detail-info {
  margin-bottom: var(--space-6);
}
.ou-detail-row {
  display: flex;
  justify-content: space-between;
  padding: var(--space-3) 0;
  font-size: 0.875rem;
}
.ou-detail-row + .ou-detail-row {
  border-top: 1px solid var(--surface-container);
}
.ou-detail-row label {
  font-weight: 600;
  color: var(--on-surface-variant);
  margin: 0;
  font-size: 0.8125rem;
}
.ou-detail-row span {
  color: var(--on-surface);
}
.ou-detail-members h4 {
  font-family: var(--font-headline);
  font-size: 0.9375rem;
  font-weight: 700;
  margin: 0 0 var(--space-3) 0;
  color: var(--on-surface);
}
.ou-member {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  font-size: 0.8125rem;
  transition: background 0.15s;
}
.ou-member:hover {
  background: var(--surface-container-low);
}
.ou-member-email {
  color: var(--on-surface-variant);
  font-size: 0.75rem;
}
.no-members,
.ou-detail-placeholder {
  text-align: center;
  padding: var(--space-8);
  color: var(--on-surface-variant);
  font-size: 0.875rem;
}

/* OU search result items */
.ou-search-result {
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  font-size: 0.875rem;
  transition: background 0.15s;
}
.ou-search-result:hover {
  background: var(--surface-container-low);
}
.ou-search-no-results {
  padding: var(--space-4);
  text-align: center;
  color: var(--on-surface-variant);
  font-size: 0.8125rem;
}

/* ================================================================
   LICENSE CARD (gradient)
   ================================================================ */
.wf-license-card {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dim) 60%, var(--secondary-dim) 100%);
  color: var(--on-primary);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
}
.wf-license-card .plan-name {
  font-family: var(--font-headline);
  font-size: 2rem;
  font-weight: 800;
}
.wf-license-card .license-details {
  display: flex;
  gap: var(--space-8);
  margin-top: var(--space-4);
  flex-wrap: wrap;
}
.wf-license-card .license-detail {
  display: flex;
  flex-direction: column;
}
.wf-license-card .license-detail span {
  font-size: 0.9375rem;
  font-weight: 600;
}

/* ================================================================
   CONFIG GRID (support config cards)
   ================================================================ */
.wf-config-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-4);
}

.config-card {
  background: var(--surface-container-low);
  border-radius: var(--radius-xl);
  padding: var(--space-4);
}
.config-card h4 {
  margin: 0 0 var(--space-1) 0;
  font-size: 0.75rem;
  color: var(--on-surface-variant);
  font-weight: 600;
}
.config-card .value {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--on-surface);
  font-family: var(--font-headline);
}

/* ================================================================
   STATS CONTAINER (chat stats etc.)
   ================================================================ */
.wf-stats-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-4);
}

.stat-card {
  background: var(--surface-container-lowest);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  text-align: center;
}
.stat-card .stat-value {
  font-family: var(--font-headline);
  font-size: 2rem;
  font-weight: 800;
  color: var(--on-surface);
}
.stat-card .stat-label {
  font-size: 0.8125rem;
  color: var(--on-surface-variant);
  margin-top: var(--space-2);
}

/* ================================================================
   STATUS BADGES
   ================================================================ */
.status-badge,
.status {
  display: inline-block;
  padding: 3px 8px;
  border-radius: var(--radius-full);
  font-size: 0.6875rem;
  font-weight: 600;
}
.status-active,
.status-ok,
.status-pro {
  background: var(--success-bg);
  color: var(--success);
}
.status-inactive,
.status-expired,
.status-error {
  background: var(--error-soft-bg);
  color: var(--error);
}
.status-revoked {
  background: var(--error-soft-bg);
  color: var(--error);
}
.status-warning,
.status-pending_setup {
  background: var(--warning-bg);
  color: var(--warning);
}
.status-trial {
  background: rgba(0, 96, 173, 0.1);
  color: var(--primary);
}
.status-deleted {
  background: var(--surface-container-high);
  color: var(--on-surface-variant);
}

/* ================================================================
   MODE BADGE (top-right indicator)
   ================================================================ */
.wf-admin-mode-badge {
  font-family: var(--font-body);
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-full);
  background: var(--surface-container-high);
  color: var(--on-surface-variant);
}
.wf-admin-mode-badge--central {
  background: rgba(0, 96, 173, 0.1);
  color: var(--primary);
}
.wf-admin-mode-badge--tenant {
  background: var(--secondary-fixed);
  color: var(--on-secondary-container);
}

/* ================================================================
   SIDEBAR GROUP LABELS
   ================================================================ */
.wf-sidebar__group-label {
  font-family: var(--font-body);
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--outline);
  padding: var(--space-2) var(--space-4);
  margin-top: var(--space-2);
}

/* Tighten sidebar item spacing on the admin console only (admin.css is loaded
   only on admin.html). The gap between items is purely the links' vertical
   padding — reduce it 30%: var(--space-3) 0.75rem -> 0.525rem. Left/right padding
   and every other page's sidebar are untouched. */
.wf-sidebar__link {
  padding-top: 0.525rem;
  padding-bottom: 0.525rem;
}

/* ================================================================
   SETTINGS SECTIONS (tenant settings modal)
   ================================================================ */
.wf-settings-section {
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-6);
}
.wf-settings-section + .wf-settings-section {
  border-top: 1px solid var(--surface-container-high);
  padding-top: var(--space-6);
}
.wf-settings-section:last-of-type {
  border-bottom: none;
  padding-bottom: 0;
}
.wf-settings-section .wf-title {
  margin-bottom: var(--space-4);
}

/* ================================================================
   FORM NOTE (yellow callout)
   ================================================================ */
.wf-form-note {
  background: var(--warning-bg);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  margin: var(--space-4) 0;
  font-size: 0.8125rem;
  color: var(--warning);
}

/* ================================================================
   CHECKBOX GROUP
   ================================================================ */
.wf-checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-2);
}
.wf-checkbox-group label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 500;
  font-size: 0.875rem;
  cursor: pointer;
}
.wf-checkbox-group input[type='checkbox'] {
  width: auto;
}

/* ================================================================
   DIRECTORY RESULTS (user modal)
   ================================================================ */
.wf-directory-results {
  max-height: 250px;
  overflow-y: auto;
  border: 1px solid var(--surface-container-high);
  border-radius: var(--radius-lg);
  margin-top: var(--space-2);
}

/* ================================================================
   MULTI-SELECT DROPDOWN (Additional OUs)
   ================================================================ */
.multi-select-dropdown {
  position: relative;
  width: 100%;
}
.multi-select-display {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  border: 1px solid rgba(173, 179, 181, 0.3);
  border-radius: var(--radius-lg);
  background: var(--surface-container-lowest);
  cursor: pointer;
  min-height: 42px;
}
.multi-select-display:hover {
  border-color: var(--outline-variant);
}
.multi-select-placeholder {
  color: var(--outline-variant);
  font-size: 0.875rem;
}
.multi-select-selected {
  color: var(--on-surface);
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  flex: 1;
}
.multi-select-tag {
  background: rgba(0, 96, 173, 0.1);
  color: var(--primary);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: 0.8125rem;
}
.multi-select-options {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--surface-container-lowest);
  border: 1px solid var(--surface-container-high);
  border-radius: var(--radius-lg);
  margin-top: 4px;
  max-height: 250px;
  overflow-y: auto;
  z-index: 1000;
  box-shadow: var(--shadow-lg);
}
.multi-select-dropdown.open .multi-select-options {
  display: block;
}
.multi-select-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  transition: background 0.15s;
  font-size: 0.875rem;
}
.multi-select-option:hover {
  background: var(--surface-container-low);
}
.multi-select-option input[type='checkbox'] {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

/* ================================================================
   JSON DISPLAY (devtools result)
   ================================================================ */
.json-display {
  background: var(--inverse-surface);
  color: var(--surface-container-high);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
  font-size: 0.8125rem;
  line-height: 1.5;
  overflow-x: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--surface-container-high);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 40px auto;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ================================================================
   SCOPE TAGS
   ================================================================ */
.scope-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.scope-tag {
  background: var(--surface-container-high);
  color: var(--on-surface-variant);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-size: 0.6875rem;
  font-weight: 600;
}

/* ================================================================
   FIELD HINTS & STATUS
   ================================================================ */
.field-hint {
  display: block;
  color: var(--on-surface-variant);
  font-size: 0.75rem;
  margin-top: var(--space-1);
}
.field-status {
  margin-top: var(--space-2);
  font-size: 0.8125rem;
}
.field-status .checking {
  color: var(--on-surface-variant);
}
.field-status .available,
.field-status .status-ok {
  color: var(--success);
}
.field-status .unavailable,
.field-status .status-missing,
.field-status .status-error {
  color: var(--error);
}
.field-status .status-pending {
  color: var(--warning);
}

/* ================================================================
   TENANT TABLE EXTRAS
   ================================================================ */
.tenants-container {
  margin-top: var(--space-4);
}
.primary-tenant-row {
  background: rgba(0, 96, 173, 0.04) !important;
}
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: 0.6875rem;
  font-weight: 600;
  margin-left: 8px;
}
.badge-info {
  background: rgba(0, 96, 173, 0.1);
  color: var(--primary);
}
.config-indicator {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8125rem;
}
.config-complete {
  color: var(--success);
}
.config-partial {
  color: var(--warning);
}
.config-missing {
  color: var(--error);
}
.actions-cell {
  white-space: nowrap;
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  align-items: center;
}
.actions-cell .btn-small,
.actions-cell .btn-info {
  margin-right: 0;
}
.muted {
  color: var(--on-surface-variant);
  font-size: 0.8em;
}

/* ================================================================
   EXISTING BUTTON VARIANTS (for admin JS compatibility)
   ================================================================ */
.btn-info {
  background: var(--primary);
  color: var(--on-primary);
  border: none;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 600;
  margin-right: 4px;
}
.btn-info:hover {
  background: var(--primary-dim);
}
.btn-success {
  background: var(--secondary);
  color: var(--on-secondary);
  border: none;
  padding: 8px 16px;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-weight: 600;
}
.btn-success:hover {
  background: var(--secondary-dim);
}
.btn-warning {
  background: var(--warning);
  color: var(--surface-container-lowest);
  border: none;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-weight: 600;
}
.btn-warning:hover {
  filter: brightness(0.85);
}
.btn-small {
  padding: 4px 10px;
  font-size: 0.75rem;
  border-radius: var(--radius-sm);
  background: var(--surface-container-high);
  border: none;
  cursor: pointer;
  font-weight: 600;
  color: var(--on-surface-variant);
}
.btn-small:hover {
  background: var(--surface-container-highest);
}

.edit-btn {
  background: var(--surface-container-high);
  border: none;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--on-surface-variant);
}
.edit-btn:hover {
  background: var(--surface-container-highest);
}
.delete-btn {
  background: none;
  border: none;
  color: var(--error);
  font-size: 1.125rem;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
}
.delete-btn:hover {
  background: var(--error-soft-bg);
}

/* ================================================================
   SUPPORT CLOCK WIDGET (fixed position)
   ================================================================ */
.support-clock-widget {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--surface-container-lowest);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: 12px 16px;
  display: none;
  cursor: pointer;
  z-index: 1000;
  min-width: 180px;
  border: 2px solid var(--surface-container-high);
  transition: all 0.3s;
}
.support-clock-widget:hover {
  box-shadow: var(--shadow-xl);
  transform: translateY(-2px);
}
.support-clock-widget.status-healthy {
  border-color: var(--success);
}
.support-clock-widget.status-warning {
  border-color: var(--warning);
}
.support-clock-widget.status-critical {
  border-color: var(--error);
  animation: pulse-border 1.5s infinite;
}

@keyframes pulse-border {
  0%,
  100% {
    border-color: var(--error);
    box-shadow: 0 4px 20px rgba(168, 56, 54, 0.3);
  }
  50% {
    border-color: var(--error-dim);
    box-shadow: 0 4px 20px rgba(168, 56, 54, 0.5);
  }
}

.support-clock-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.support-clock-icon {
  font-size: 18px;
}
.support-clock-title {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--on-surface-variant);
  text-transform: uppercase;
}
.support-clock-time {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--on-surface);
  font-family: 'SF Mono', 'Consolas', monospace;
}
.support-clock-label {
  font-size: 0.6875rem;
  color: var(--outline);
  margin-top: 4px;
}
.support-clock-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  background: var(--error);
  color: var(--on-error);
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--radius-full);
}

/* Placeholder styling */
::placeholder {
  color: var(--outline-variant) !important;
  opacity: 1;
}

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 768px) {
  .wf-admin-header {
    flex-direction: column;
  }
  .wf-admin-header__actions {
    width: 100%;
  }
}

/* ================================================================
   DEVTOOLS RESULT MODAL — Tables & Status
   ================================================================ */
.wfd-result-summary {
  background: var(--surface-container-low);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-4);
  font-size: 0.875rem;
}
.wfd-result-summary p {
  margin: var(--space-1) 0;
  color: var(--on-surface);
}
.wfd-result-summary strong {
  color: var(--on-surface);
}

.wfd-result-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.8125rem;
  margin-top: var(--space-3);
}
.wfd-result-table th {
  text-align: left;
  padding: var(--space-3);
  background: var(--surface-container-low);
  color: var(--on-surface-variant);
  font-weight: 700;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.wfd-result-table td {
  padding: var(--space-3);
  color: var(--on-surface);
}
.wfd-result-table tbody tr + tr td {
  box-shadow: inset 0 1px 0 var(--surface-container);
}
.wfd-result-table tbody tr:hover {
  background: var(--surface-container-low);
}

/* Status badges inside result tables */
.wfd-status {
  font-size: 0.75rem;
  font-weight: 600;
}
.wfd-status--success {
  color: var(--success);
}
.wfd-status--error {
  color: var(--error);
}
.wfd-status--warning {
  color: var(--warning);
}

/* Devtools modal h4 titles */
#devtools-result-content h4 {
  font-family: var(--font-headline);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--on-surface);
  margin: var(--space-4) 0 var(--space-2) 0;
}

/* ================================================================
   DANGER BUTTON SEPARATION (Rollback etc.)
   ================================================================ */
.wf-btn-row .btn-danger {
  margin-left: auto;
}

/* Also handle old result-table/result-summary classes for backwards compat */
.result-summary {
  background: var(--surface-container-low);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-4);
}
.result-summary p {
  margin: var(--space-1) 0;
  font-size: 0.875rem;
}
.result-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
  margin-top: var(--space-3);
}
.result-table th {
  text-align: left;
  padding: var(--space-3);
  background: var(--surface-container-low);
  font-weight: 700;
  font-size: 0.6875rem;
  text-transform: uppercase;
  color: var(--on-surface-variant);
}
.result-table td {
  padding: var(--space-3);
  border-bottom: 1px solid var(--surface-container);
}
.result-table tbody tr:hover {
  background: var(--surface-container-low);
}
.status-success {
  color: var(--success);
  font-weight: 600;
}
.status-error {
  color: var(--error);
  font-weight: 600;
}
.status-warning {
  color: var(--warning);
  font-weight: 600;
}

/* ════════════════════════════════════════════════════════════
   Immersive mode
   When the body has `wf-mode--immersive`, the admin's primary
   left navigation is hidden so views like Metrics and Report
   Center can use the entire content width for their own filter
   rails. The topbar is preserved.
   ════════════════════════════════════════════════════════════ */
body.wf-mode--immersive .wf-sidebar {
  display: none;
}
body.wf-mode--immersive .wf-main {
  margin-left: 0;
  width: 100%;
}

/* ================================================================
   SUPPORT ACCESS — patch 01 additions
   ================================================================ */

/* Grant ID column: wide enough for the full id, with inline copy. */
#support-grants-table th:first-child,
#support-grants-table td:first-child {
  min-width: 248px;
}
.grant-id-cell {
  white-space: nowrap;
}
.grant-id-cell code {
  font-size: 0.8125rem;
}
.grant-id-cell .icon-btn {
  vertical-align: middle;
  margin-left: 4px;
}

/* Compact icon buttons (eye / copy / download). */
.icon-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--on-surface-variant);
  padding: 4px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.icon-btn:hover {
  background: var(--surface-container-high);
  color: var(--primary);
}
.icon-btn .material-symbols-outlined {
  font-size: 18px;
}

/* Read-only detail + export-ready label/value grid. */
.support-detail-grid {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: var(--space-2) var(--space-4);
  align-items: baseline;
}
.support-detail-grid .sd-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--on-surface-variant);
}
.support-detail-grid .sd-value {
  font-size: 0.875rem;
  overflow-wrap: anywhere;
}

/* Logs modal toolbar + table. */
.support-logs-toolbar {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}
.support-logs-toolbar input,
.support-logs-toolbar select {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--surface-container-highest);
  border-radius: var(--radius-md);
  background: var(--surface-container-low, var(--surface-container-high));
  color: inherit;
  font-size: 0.8125rem;
}
.support-logs-toolbar input {
  flex: 1 1 240px;
}
.support-logs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}
.support-logs-table th {
  text-align: left;
  padding: var(--space-2) var(--space-3);
  color: var(--on-surface-variant);
  font-weight: 600;
  border-bottom: 1px solid var(--surface-container-highest);
  position: sticky;
  top: 0;
  background: var(--surface-container-high);
}
.support-logs-table td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--surface-container-high);
  overflow-wrap: anywhere;
}

/* Patch 02 — grants row alignment */
#support-grants-table td {
  vertical-align: middle;
}
#support-grants-table td:nth-child(3),   /* Granted At */
#support-grants-table td:nth-child(4) {
  /* Expires At */
  white-space: nowrap;
}

/* ── Log viewer (Activity Logs + Platform Debug) ─────────── */
.wf-log-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

/* Platform Debug log controls: halve the gap above the results table, and align the
   Load/CSV/PDF buttons with the date fields. The button column stretches to the row
   height; its row fills the space under the invisible caption, so the buttons end up
   exactly as tall as the date fields — whatever height the browser renders them at.
   No fixed heights to guess. */
#view-central-support .wf-log-controls {
  align-items: stretch;
  margin-bottom: var(--space-2);
}
#view-central-support .wf-log-actions {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
#view-central-support .wf-log-actions__caption {
  font-size: 0.75rem;
  visibility: hidden;
}
#view-central-support .wf-log-actions__row {
  display: flex;
  gap: var(--space-3);
  flex: 1 1 auto;
  position: relative;
  bottom: 3px; /* tiny visual nudge up; 0 = revert */
}
#view-central-support .wf-log-actions .btn {
  align-self: stretch;
}
.wf-log-controls label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.75rem;
  color: var(--on-surface-variant);
}
.wf-log-controls input,
.wf-log-controls select {
  padding: var(--space-2);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-md, 6px);
  background: var(--surface-container-lowest, #fff);
  color: var(--on-surface);
  font-size: 0.8125rem;
}
.wf-log-status {
  font-size: 0.8125rem;
  color: var(--on-surface-variant);
  margin-left: auto;
}
.wf-log-tablewrap {
  max-height: 60vh;
  overflow: auto;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-md, 6px);
}
.wf-log-table {
  width: 100%;
  border-collapse: collapse;
}
.wf-log-table th,
.wf-log-table td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--outline-variant);
  text-align: left;
  vertical-align: top;
}
.wf-log-table th {
  position: sticky;
  top: 0;
  background: var(--surface-container-low);
  font-weight: 600;
  font-size: 0.75rem;
  z-index: 1;
}
.wf-log-table tbody tr:hover {
  background: var(--surface-container-low);
}
/* ================================================================
   PLAN PICKER   (.wf-banner* moved to style.css — shared with the app)
   ================================================================ */

.modal-content.wf-modal--wide {
  max-width: 1040px;
  width: 94vw;
}

.wf-tier-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: var(--space-4);
}
.wf-tier-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-2);
  background: var(--surface-container-low);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  min-height: 220px;
}
.wf-tier-card .btn {
  margin-top: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: auto;
  min-width: 65%;
  padding: 8px 20px;
  text-align: center;
}
.wf-tier-card--custom .wf-btn-row {
  width: 100%;
  justify-content: center;
}
.wf-license-card .license-detail .status-badge {
  white-space: nowrap;
  width: fit-content;
}
.wf-tier-card--current {
  border-color: var(--primary);
  box-shadow: inset 0 0 0 1px var(--primary);
}
.wf-tier-card--custom {
  background: var(--surface-container);
  border-style: dashed;
}
.wf-tier-name {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--on-surface);
}
.wf-tier-seats {
  font-size: 0.8125rem;
  color: var(--on-surface-variant);
}
.wf-tier-price {
  font-family: var(--font-headline);
  font-size: 1.625rem;
  font-weight: 800;
  color: var(--on-surface);
  margin-top: var(--space-2);
}
.wf-tier-price--muted {
  font-size: 1.125rem;
  color: var(--on-surface-variant);
  font-weight: 600;
}
.wf-tier-per {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--on-surface-variant);
  margin-left: 2px;
}
.wf-tier-strike {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--on-surface-variant);
  margin-right: var(--space-2);
}
.wf-tier-renewal {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--on-surface-variant);
  line-height: 1.4;
}
.wf-tier-note {
  font-size: 0.75rem;
  color: var(--warning);
}

.wf-tier-confirm {
  margin-top: var(--space-5);
  padding: var(--space-5);
  background: var(--surface-container-lowest);
  border: 1px solid var(--primary);
  border-radius: var(--radius-xl);
}
.wf-kv {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-3) 0;
  font-size: 0.875rem;
}
.wf-kv td {
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--outline-variant);
}
.wf-kv td:last-child {
  text-align: right;
  white-space: nowrap;
}
.wf-kv__total td {
  border-bottom: none;
  padding-top: var(--space-3);
  font-size: 1rem;
}

.status-grace_period,
.status-seat_overage {
  background: var(--warning-bg);
  color: var(--warning);
}
.status-suspended {
  background: var(--error-soft-bg);
  color: var(--error);
}

/* Licence-card column headers: explicit colour + weight so they never wash
   out against the gradient, whatever the theme's generic label rules say. */
.wf-license-card .license-detail label {
  color: var(--on-primary);
  opacity: 0.9;
  font-weight: 700;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--space-1);
}

/* ================================================================
   APPEND TO public/css/admin.css — Batch 2-5 components
   (result modal tabs, paged tables, tenant picker, licensing,
    quote estimator, system ops, bulk import)
   ================================================================ */

/* ── Tabs (result modal, reusable) ─────────────────────────────── */
.wf-tabs {
  display: flex;
  gap: var(--space-1);
  border-bottom: 1px solid var(--outline-variant);
  margin-bottom: var(--space-3);
}
.wf-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--on-surface-variant);
  cursor: pointer;
  margin-bottom: -1px;
}
.wf-tab:hover {
  color: var(--on-surface);
}
.wf-tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

.wf-result-body {
  max-height: 62vh;
  overflow-y: auto;
}

/* ── Diagnostic summary rows ───────────────────────────────────── */
.wf-summary {
  list-style: none;
  margin: 0;
  padding: 0;
}
.wf-summary__group {
  font-family: var(--font-headline);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--on-surface-variant);
  margin: var(--space-4) 0 var(--space-2);
}
.wf-summary__row {
  display: grid;
  grid-template-columns: 22px 200px 1fr;
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-2) var(--space-2);
  border-radius: var(--radius-md);
  font-size: 0.8125rem;
}
.wf-summary__row:hover {
  background: var(--surface-container-low);
}
.wf-summary__row--sub {
  grid-template-columns: 22px 176px 1fr;
  margin-left: var(--space-6);
}
.wf-summary__icon {
  font-size: 18px;
  line-height: 1.1;
}
.wf-summary__icon--ok {
  color: var(--success);
}
.wf-summary__icon--warning {
  color: var(--warning);
}
.wf-summary__icon--error {
  color: var(--error);
}
.wf-summary__icon--info {
  color: var(--on-surface-variant);
}
.wf-summary__label {
  font-weight: 600;
  color: var(--on-surface);
}
.wf-summary__detail {
  color: var(--on-surface-variant);
  overflow-wrap: anywhere;
}
.wf-summary__detail code {
  font-size: 0.75rem;
}
.wf-summary__kv {
  display: inline-block;
  margin-right: var(--space-3);
}
.wf-summary__kv b {
  font-weight: 600;
  color: var(--on-surface);
}

/* ── Paged / filterable table (wfTable.js) ─────────────────────── */
.wf-table-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}
.wf-table-toolbar input[type='search'] {
  flex: 1 1 240px;
  min-width: 0;
  padding: 6px 10px;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-md);
  font-size: 0.8125rem;
  background: var(--surface-container-lowest);
  color: var(--on-surface);
}
.wf-table-toolbar__count {
  font-size: 0.8125rem;
  color: var(--on-surface-variant);
  white-space: nowrap;
}
.wf-pager {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-3);
  font-size: 0.8125rem;
  color: var(--on-surface-variant);
}
.wf-pager select {
  font-size: 0.8125rem;
}
.wf-data-table th.wf-sortable {
  cursor: pointer;
  user-select: none;
}
.wf-data-table th.wf-sortable::after {
  content: '';
  margin-left: 4px;
  opacity: 0.5;
}
.wf-data-table th.wf-sort-asc::after {
  content: '▲';
  font-size: 0.6em;
}
.wf-data-table th.wf-sort-desc::after {
  content: '▼';
  font-size: 0.6em;
}
.wf-data-table td.wf-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.wf-data-table td.wf-actions {
  white-space: nowrap;
}
.wf-table-empty {
  text-align: center;
  color: var(--on-surface-variant);
  padding: var(--space-6);
  font-size: 0.875rem;
}

/* ── Tenant picker (System Ops) ────────────────────────────────── */
.wf-tenant-picker {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  max-width: 680px;
}
.wf-tenant-picker input[type='search'],
.wf-tenant-picker select {
  flex: 1 1 240px;
  min-width: 0;
  padding: 6px 10px;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-md);
  font-size: 0.8125rem;
  background: var(--surface-container-lowest);
  color: var(--on-surface);
}

/* ── Licensing summary strip ───────────────────────────────────── */
.wf-lic-summary {
  margin-bottom: var(--space-4);
}
.wf-lic-seats {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.wf-lic-seats small {
  color: var(--on-surface-variant);
}
.wf-lic-warn {
  color: var(--warning);
  font-weight: 600;
}
.wf-lic-locked {
  color: var(--error);
  font-weight: 600;
}

/* ── Quote estimator ───────────────────────────────────────────── */
.wf-quote-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-6);
}
@media (max-width: 760px) {
  .wf-quote-grid {
    grid-template-columns: 1fr;
  }
}
.wf-quote-result {
  background: var(--surface-container-low);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-xl);
  padding: var(--space-4) var(--space-5);
  font-size: 0.875rem;
  min-height: 200px;
}
.wf-quote-result .wf-kv {
  display: flex;
  justify-content: space-between;
  padding: var(--space-1) 0;
}
.wf-quote-result .wf-kv__total {
  border-top: 1px solid var(--outline-variant);
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  font-weight: 700;
  font-size: 1rem;
}
.wf-quote-result .wf-quote-note {
  color: var(--on-surface-variant);
  font-size: 0.75rem;
  margin-top: var(--space-3);
}

/* ── Global parameters page ────────────────────────────────────── */
.gp-category {
  margin-bottom: var(--space-5);
}
.gp-category__title {
  font-family: var(--font-headline);
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: capitalize;
  color: var(--on-surface);
  margin: 0 0 var(--space-2);
  padding-bottom: var(--space-1);
  border-bottom: 1px solid var(--outline-variant);
}
.gp-key {
  font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
  font-size: 0.75rem;
  font-weight: 600;
}
.gp-desc {
  font-size: 0.75rem;
  color: var(--on-surface-variant);
}
.gp-meta {
  font-size: 0.6875rem;
  color: var(--on-surface-variant);
  white-space: nowrap;
}
.gp-input {
  width: 100%;
  min-width: 120px;
  padding: 4px 8px;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-md);
  font-size: 0.8125rem;
  background: var(--surface-container-lowest);
  color: var(--on-surface);
}
.gp-input--json {
  font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
  font-size: 0.75rem;
  min-height: 60px;
  resize: vertical;
}
.gp-input--dirty {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-container);
}
.gp-tiers {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.75rem;
}
.gp-tiers th,
.gp-tiers td {
  padding: 2px 6px;
  text-align: left;
}
.gp-tiers input {
  width: 100%;
  padding: 2px 6px;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  background: var(--surface-container-lowest);
  color: var(--on-surface);
}
.gp-default {
  color: var(--on-surface-variant);
  font-size: 0.6875rem;
}

/* ── Bulk import wizard ────────────────────────────────────────── */
.wf-steps {
  display: flex;
  gap: var(--space-2);
  margin: var(--space-3) 0 var(--space-5);
}
.wf-step {
  flex: 1;
  text-align: center;
  padding: var(--space-2);
  border-radius: var(--radius-md);
  background: var(--surface-container-low);
  color: var(--on-surface-variant);
  font-size: 0.75rem;
  font-weight: 600;
}
.wf-step.active {
  background: var(--primary-container);
  color: var(--primary);
}
.wf-step.done {
  background: var(--success-bg);
  color: var(--success);
}
.wf-import-step .radio-group label {
  display: block;
  margin: var(--space-1) 0;
  font-size: 0.8125rem;
}
.wf-import-progress {
  margin-bottom: var(--space-4);
}
.wf-import-progress .wf-metric-bar {
  height: 8px;
}
.wf-issue-error {
  color: var(--error);
}
.wf-issue-warning {
  color: var(--warning);
}
.wf-issue-sheet {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--on-surface-variant);
}

/* ── Global parameters page (final v3) ────────────────────────── */
#gp-page .wf-data-table {
  table-layout: fixed;
  width: 100%;
}
#gp-page .wf-data-table th:nth-child(1),
#gp-page .wf-data-table td:nth-child(1) {
  width: 24%;
}
#gp-page .wf-data-table th:nth-child(2),
#gp-page .wf-data-table td:nth-child(2) {
  width: 54%;
}
#gp-page .wf-data-table th:nth-child(3),
#gp-page .wf-data-table td:nth-child(3) {
  width: 11%;
}
#gp-page .wf-data-table th:nth-child(4),
#gp-page .wf-data-table td:nth-child(4) {
  width: 11%;
}
#gp-page .wf-data-table td {
  vertical-align: top;
  padding-top: var(--space-4);
  padding-bottom: var(--space-4);
  overflow: hidden;
}
#gp-page .wf-data-table td.wf-actions {
  white-space: normal;
}
#gp-page .gp-meta {
  white-space: normal;
}
#gp-page .gp-input {
  width: 100%;
  min-width: 0;
  padding: 8px 10px;
  font-size: 0.875rem;
  box-sizing: border-box;
}
#gp-page .gp-input--json {
  min-height: 90px;
}
/* Tier table: number columns get a fixed, digit-sized width; the label takes the rest. */
#gp-page .gp-tiers {
  width: 100%;
  min-width: 0;
  table-layout: auto;
  border-collapse: separate;
  border-spacing: 5px 6px;
  margin: -5px -6px;
}
#gp-page .gp-tiers th {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--on-surface-variant);
  padding: 0 0 2px;
  white-space: nowrap;
}
#gp-page .gp-tiers td {
  padding: 0;
  white-space: nowrap;
}
#gp-page .gp-tiers input {
  box-sizing: border-box;
  padding: 6px 6px;
  font-size: 0.8125rem;
  min-width: 0;
}
#gp-page .gp-tiers td:nth-child(1) input {
  width: 6.5em;
}
#gp-page .gp-tiers td:nth-child(2) {
  width: 100%;
}
#gp-page .gp-tiers td:nth-child(2) input {
  width: 100%;
  min-width: 6em;
}
#gp-page .gp-tiers td:nth-child(3) input,
#gp-page .gp-tiers td:nth-child(4) input,
#gp-page .gp-tiers td:nth-child(5) input {
  width: 4.6em;
  text-align: right;
}

/* ── Quote estimator: internal cost/profit box ─────────────────── */
.wf-quote-internal {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px dashed var(--outline-variant);
  border-radius: var(--radius-xl);
  background: var(--surface-container-lowest);
}
.wf-quote-internal .form-group {
  max-width: 160px;
  margin-bottom: var(--space-2);
}
.wf-quote-internal .wf-kv {
  display: flex;
  justify-content: space-between;
  font-size: 0.875rem;
}
.wf-quote-internal .wf-kv__total {
  font-weight: 700;
  font-size: 1rem;
}
.wf-quote-internal .wf-quote-note {
  color: var(--on-surface-variant);
  font-size: 0.75rem;
  margin-top: var(--space-2);
}