/**
 * ROOM 36 — Shared UI foundation (V1-PRIVATE).
 * One source of truth for patterns used across operator-web and consumer-web.
 * Each surface's styles.css shrinks to surface-specific overrides only.
 * Uses framework-agnostic CSS custom properties — works with Bootstrap OR Tabler.
 */

:root {
  --room36-bg-surface: #f5f7fb;
  --room36-bg-surface-secondary: #f0f2f5;
  --room36-bg-success-light: #d3f9d8;
  --room36-border-color: #e6e7e9;
  --room36-border-radius: 8px;
  --room36-border-radius-sm: 0.25rem;
  --room36-primary: #206bc4;
  --room36-secondary: #626976;
  --room36-danger: #d63939;
  --room36-warning: #f59f00;
  --room36-success: #51cf66;
  --room36-success-dark: #2b8a3e;
}

/* ===================================================================
   JSON BLOCK — pretty-printed config/raw panels (operator + consumer)
   Explicit color so the text is never gray-on-gray on the light surface.
   =================================================================== */
.json-block {
  margin: 0;
  max-height: 220px;
  overflow: auto;
  font-size: 0.8rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: #1e293b;
  background: var(--room36-bg-surface, #f5f7fb);
  border: 1px solid var(--room36-border-color, #e6e7e9);
  padding: 0.6rem 0.75rem;
  border-radius: var(--room36-border-radius-sm, 0.25rem);
  white-space: pre-wrap;
  word-break: break-word;
}
.json-block--tall { max-height: 320px; }

/* ===================================================================
   KEY GATE — fullscreen auth overlay
   =================================================================== */
.gate-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--room36-bg-surface, #f5f7fb);
  z-index: 9999;
}

.gate-card {
  width: 100%;
  max-width: 420px;
  background: #fff;
  border-radius: var(--room36-border-radius, 8px);
  box-shadow: 0 0 40px rgba(0,0,0,0.08);
  padding: 2rem;
}

.gate-header {
  text-align: center;
  margin-bottom: 1.5rem;
}

.gate-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
  color: var(--room36-primary, #206bc4);
}

.gate-title i { margin-right: 0.5rem; }

.gate-subtitle {
  color: var(--room36-secondary, #626976);
  margin: 0;
  font-size: 0.9rem;
}

.gate-body .invalid-feedback {
  display: none;
  margin-top: 0.25rem;
}
.gate-body .invalid-feedback.show { display: block; }

/* ===================================================================
   LOADING SKELETON — unified shimmer
   =================================================================== */
.skeleton-row,
.skeleton-line {
  height: 1rem;
  background: linear-gradient(90deg, #e9ecef 25%, #f8f9fa 50%, #e9ecef 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
  border-radius: 0.25rem;
  margin-bottom: 0.75rem;
}

.skeleton-row:last-child,
.skeleton-line:last-child { margin-bottom: 0; }

.skeleton-row { height: 48px; margin-bottom: 8px; }

.skeleton-line.w-75 { width: 75%; }
.skeleton-line.w-50 { width: 50%; }
.skeleton-line.w-33 { width: 33%; }

@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ===================================================================
   EMPTY STATE — "no data yet" placeholder
   =================================================================== */
.empty-state {
  text-align: center;
  padding: 3rem 1rem;
}

.empty-state .empty-icon,
.empty-state-icon {
  font-size: 3rem;
  color: var(--room36-secondary, #626976);
  margin-bottom: 1rem;
}

.empty-state h3 {
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.empty-state p {
  color: var(--room36-secondary, #626976);
  max-width: 400px;
  margin: 0 auto 1.5rem;
}

/* ===================================================================
   ERROR STATE — "something went wrong" with retry
   =================================================================== */
.error-state {
  text-align: center;
  padding: 2rem 1rem;
}

.error-state .error-icon {
  font-size: 2.5rem;
  color: var(--room36-danger, #d63939);
  margin-bottom: 0.75rem;
}

.error-state h4 {
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.error-state p {
  color: var(--room36-secondary, #626976);
  margin-bottom: 1rem;
}

/* ===================================================================
   401 / UNAUTHORIZED STATE
   =================================================================== */
.unauthorized-state {
  text-align: center;
  padding: 2rem 1rem;
}

.unauthorized-state .auth-icon {
  font-size: 2.5rem;
  color: var(--room36-warning, #f59f00);
  margin-bottom: 0.75rem;
}

/* ===================================================================
   DETAIL / CONFIG DISPLAY — label + value pairs
   =================================================================== */
.detail-label,
.config-label {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--room36-secondary, #626976);
  margin-bottom: 0.15rem;
}

.detail-value,
.config-value {
  font-size: 0.95rem;
  margin-bottom: 1rem;
  word-break: break-word;
}

/* ===================================================================
   API KEY DISPLAY — monospace, copyable credential block
   =================================================================== */
.api-key-display {
  background: var(--room36-bg-surface-secondary, #f0f2f5);
  border-radius: 6px;
  padding: 1rem;
  font-family: 'SF Mono', 'Cascadia Code', 'Consolas', monospace;
  font-size: 0.85rem;
  word-break: break-all;
  overflow-wrap: break-word;
  position: relative;
}

.api-key-display .copy-btn {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
}

/* ===================================================================
   FORM SECTIONS — grouped fields with section header
   =================================================================== */
.form-section {
  margin-bottom: 1.5rem;
}

.form-section-title {
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--room36-secondary, #626976);
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--room36-border-color, #e6e7e9);
}

.edit-field {
  margin-bottom: 1.25rem;
}

.edit-field label {
  font-weight: 500;
  margin-bottom: 0.35rem;
}

/* ===================================================================
   PROVIDER CARDS — selectable provider mode tiles
   =================================================================== */
.provider-card {
  border: 2px solid var(--room36-border-color, #e6e7e9);
  border-radius: 8px;
  padding: 1rem;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.provider-card:hover {
  border-color: var(--room36-primary, #206bc4);
}

.provider-card.selected {
  border-color: var(--room36-primary, #206bc4);
  box-shadow: 0 0 0 1px var(--room36-primary, #206bc4);
}

.provider-card .provider-name {
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.provider-card .provider-desc {
  font-size: 0.85rem;
  color: var(--room36-secondary, #626976);
}

/* ===================================================================
   SUCCESS CARD — green confirmation after create/update
   =================================================================== */
.success-card {
  background: var(--room36-bg-success-light, #d3f9d8);
  border: 1px solid var(--room36-success, #51cf66);
  border-radius: 8px;
  padding: 1.5rem;
  margin-bottom: 1rem;
}

.success-card h4 {
  color: var(--room36-success-dark, #2b8a3e);
  margin-bottom: 0.75rem;
}

/* ===================================================================
   SCREEN TOGGLE — consumer-dashboard view switching
   =================================================================== */
.screen { display: none; }
.screen.active { display: block; }

/* ===================================================================
   METRICS PLACEHOLDER — honest "coming soon"
   =================================================================== */
.metrics-coming-soon {
  border: 2px dashed var(--room36-border-color, #dadcde);
  border-radius: var(--room36-border-radius, 0.5rem);
  padding: 3rem 2rem;
  text-align: center;
}

/* ===================================================================
   PRE BLOCKS — shared pre-formatted text baseline
   =================================================================== */
pre {
  color: #1e293b;
  background: var(--room36-bg-surface-secondary, #f0f2f5);
  padding: 1rem;
  border-radius: var(--room36-border-radius-sm, 0.25rem);
  font-size: 0.85rem;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: break-all;
  max-width: 100%;
  overflow-x: auto;
}

/* ===================================================================
   RESPONSIVE — 3-tier breakpoint system (768 / 480 / 380)
   =================================================================== */
@media (max-width: 768px) {
  .gate-card {
    margin: 1rem;
    padding: 1.5rem;
  }

  .empty-state {
    padding: 2rem 0.5rem;
  }

  .error-state,
  .unauthorized-state {
    padding: 1.5rem 0.5rem;
  }

  .detail-value,
  .config-value {
    font-size: 0.9rem;
  }

  .api-key-display {
    padding: 0.75rem;
    font-size: 0.8rem;
  }

  .form-section {
    margin-bottom: 1rem;
  }

  .form-section-title {
    font-size: 0.8rem;
    padding-bottom: 0.25rem;
  }

  .provider-card {
    padding: 0.75rem;
  }

  .success-card {
    padding: 1rem;
  }

  .metrics-coming-soon {
    padding: 2rem 1rem;
  }

  pre {
    font-size: 0.75rem;
    padding: 0.75rem;
  }
}

@media (max-width: 480px) {
  .gate-card {
    margin: 1rem;
    padding: 1rem;
  }

  .gate-title {
    font-size: 1.3rem;
  }

  .gate-subtitle {
    font-size: 0.8rem;
  }

  .empty-state {
    padding: 1.5rem 0.5rem;
  }

  .empty-state .empty-icon,
  .empty-state-icon {
    font-size: 2.5rem;
  }

  .error-state h4,
  .unauthorized-state h4 {
    font-size: 1rem;
  }

  .metrics-coming-soon {
    padding: 1.5rem 0.5rem;
    font-size: 0.9rem;
  }

  pre {
    font-size: 0.7rem;
    padding: 0.5rem;
  }
}

@media (max-width: 380px) {
  .gate-card {
    margin: 0.5rem;
    padding: 0.75rem;
  }
}