/* ================================
   Schema JSON-LD Generator – Option B Theme
   ================================ */

:root {
  --primary: #2563eb;
  --teal: #0d9488;
  --indigo: #4f46e5;
  --slate-900: #020617;
  --slate-800: #0b1120;
  --slate-700: #1e293b;
  --slate-500: #64748b;
}

/* Global */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  font-family: "Manrope", system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  margin: 0;
}

/* Background */

.schema-bg {
  background:
    radial-gradient(circle at 0 0, rgba(37,99,235,0.4) 0, transparent 45%),
    radial-gradient(circle at 100% 100%, rgba(8,145,178,0.35) 0, transparent 45%),
    linear-gradient(135deg, #020617 0%, #020617 40%, #020617 100%);
}

.schema-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 0 40%, rgba(79,70,229,0.4), transparent 60%),
    radial-gradient(circle at 100% 0, rgba(56,189,248,0.35), transparent 55%);
  z-index: -1;
}

/* Header */

.schema-header {
  padding: 14px 0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.3);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  background: linear-gradient(
    to bottom,
    rgba(15, 23, 42, 0.92),
    rgba(15, 23, 42, 0.8)
  );
  color: #e5e7eb;
}

.schema-logo-circle {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: radial-gradient(circle at 0 0, #22c55e, #0f766e);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.9rem;
}

.schema-logo-title {
  font-weight: 700;
  letter-spacing: -0.03em;
  font-size: 0.98rem;
}

.schema-logo-subtitle {
  font-size: 0.78rem;
  color: rgba(226, 232, 240, 0.86);
}

/* Layout */

.schema-main {
  color: #e5e7eb;
}

/* Ensure headings and key labels inside cards are high contrast on dark backgrounds */
.card .card-body h1,
.card .card-body h2,
.card .card-body h3,
.card .card-body h4,
.card .card-body h5,
.card .card-body h6,
.card .h4,
.card .h6 {
  color: #e5e7eb; /* bright, readable */
}

/* Coverage label / metric numbers */
#coverageLabel,
.schema-card .fw-semibold,
.schema-card .metric-value {
  color: #f8fafc;
}

.schema-card {
  border-radius: 20px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: rgba(15, 23, 42, 0.95);
}

.shadow-soft {
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.7);
}

.card .form-label {
  color: #e5e7eb;
}

.card .form-control,
.card .form-select,
.card textarea {
  background: rgba(15, 23, 42, 0.96);
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.6);
  color: #e5e7eb;
}

.card .form-control:focus,
.card .form-select:focus,
.card textarea:focus {
  border-color: #38bdf8;
  box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.7);
  background-color: #020617;
}

/* Improve placeholder and muted text contrast for dark theme */
.card .form-control::placeholder,
.card .form-select::placeholder,
.card textarea::placeholder {
  color: rgba(226, 232, 240, 0.6);
}

/* Ensure Bootstrap .text-muted is visible on dark backgrounds */
.text-muted {
  color: rgba(203, 213, 225, 0.56) !important;
}

/* Make footer text a bit brighter on the dark background */
.schema-footer {
  border-top: 1px solid rgba(30, 64, 175, 0.7);
  background: rgba(15, 23, 42, 0.96);
  color: rgba(226, 232, 240, 0.48);
}

/* Code block */

.schema-code-block {
  background: #020617;
  border-radius: 14px;
  padding: 10px 12px;
  border: 1px solid rgba(30, 64, 175, 0.9);
  font-size: 0.8rem;
  color: #e5e7eb;
  line-height: 1.6;
  overflow-x: auto;
}

/* simple "highlight" */
.schema-code-block code {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco,
    Consolas, "Liberation Mono", "Courier New", monospace;
}

/* Coverage */

.schema-progress {
  height: 10px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.9);
}

.schema-progress .progress-bar {
  background: linear-gradient(90deg, #22c55e, #4ade80);
}

/* Lists */

.schema-list li {
  color: rgba(226, 232, 240, 0.96);
  margin-bottom: 3px;
}

/* Footer */

.schema-footer {
  border-top: 1px solid rgba(30, 64, 175, 0.7);
  background: rgba(15, 23, 42, 0.96);
  color: rgba(148, 163, 184, 0.96);
}

/* Responsive */

@media (max-width: 768px) {
  .schema-main {
    padding-inline: 16px;
  }

  .schema-header {
    padding-inline: 12px;
  }
}

/* Mobile & accessibility tweaks */

/* Make muted/helper text more legible on small screens */
.text-muted,
.card .form-text,
.schema-footer,
.schema-logo-subtitle,
.small.text-muted {
  color: rgba(226, 232, 240, 0.72) !important;
}

/* Ensure form helper and placeholders are readable */
.card .form-text {
  color: rgba(226, 232, 240, 0.64);
}

/* Slightly larger touch targets on very small screens */
@media (max-width: 480px) {
  .card .form-control,
  .card .form-select,
  .card textarea {
    padding: 10px 12px;
    font-size: 0.95rem;
  }

  .schema-code-block {
    font-size: 0.72rem;
    padding: 8px 10px;
  }

  .schema-header .btn {
    padding: 6px 10px;
    font-size: 0.85rem;
  }

  .schema-main {
    padding-inline: 12px;
  }
}

/* Ensure footer copy is readable */
.schema-footer {
  color: rgba(226, 232, 240, 0.78);
}