/* 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 label { font-size: 0.6875rem; opacity: 0.7; margin-bottom: var(--space-1); }
.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-suspended { background: var(--error-soft-bg); color: var(--error); }
.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;
  word-break: break-word;
}

.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; word-break: break-word; }

/* 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);
  word-break: break-word;
}

/* 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;
}
.actions-cell { align-items: center; }

/* ── 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); }
/* ================================================================
   BANNERS (licence card) + PLAN PICKER
   ================================================================ */
.wf-banner {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
  font-size: 0.875rem;
  line-height: 1.5;
  border: 1px solid transparent;
}
.wf-banner--warning { background: var(--warning-bg); border-color: var(--warning); color: var(--warning); }
.wf-banner--error   { background: var(--error-soft-bg); border-color: var(--error); color: var(--error); }
.wf-banner--info    { background: var(--surface-container-low); border-color: var(--outline-variant); color: var(--on-surface); }
.wf-banner code { font-size: 0.8em; }

.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;
}

/* ================================================================
   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); word-break: break-word; }
.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); }