/*
 File: asset/css/style.css
 Purpose: Global styles for the MySQL learning site (layout, theming, components).
 Notes: Theme variables in :root and [data-theme] drive light/dark/CVD modes. Sidebar and section classes map to index.html structure.
*/
.practice-body {
  overflow-y: auto;
  padding-bottom: 12px;
}
.practice-resize {
  position: absolute;
  top: 0;
  left: 0;
  width: 8px;
  height: 100%;
  cursor: ew-resize;
  background: transparent;
  z-index: 5;
}
/* CSS for MySQL Learning Site
   Sections:
   1) Theme variables and overrides
   2) Base reset, typography, links
   3) Header (fixed) and theme switcher styles
   4) Sidebar layout and navigation
   5) Sections, components (code, quiz), diagrams
   6) Utilities and responsive rules
*/

/* 1) Theme variables */
:root {
  --bg: #0f172a;
  --surface: #111827;
  --alt: #0b1220;
  --text: #e5e7eb;
  --muted: #94a3b8;
  --primary: #3b82f6;
  --primary-600: #2563eb;
  --accent: #22d3ee;
  --border: #1f2937;
  --code-bg: #0b1020;
  --sidebar-bg: rgba(15, 23, 42, 0.85);
  --header-h: 56px;
  --primary-tint: rgba(59, 130, 246, 0.18);
}

/* Inform the browser about light/dark for native UI controls */
html[data-theme="light"],
body[data-theme="light"] {
  color-scheme: light;
}
html[data-theme="cvd"],
body[data-theme="cvd"] {
  color-scheme: light;
}
html[data-theme="dark"],
body[data-theme="dark"] {
  color-scheme: dark;
}

/* Lock background scroll when a modal is open */
html.modal-open,
body.modal-open {
  overflow: hidden;
}

/* Light theme overrides */
body[data-theme="light"],
html[data-theme="light"],
:root[data-theme="light"] {
  --bg: #f8fafc;
  --surface: #ffffff;
  --alt: #f1f5f9;
  --text: #0f172a;
  --muted: #475569;
  --primary: #2563eb;
  --primary-600: #1d4ed8;
  --accent: #0ea5e9;
  --border: #e5e7eb;
  --code-bg: #f3f4f6;
  --sidebar-bg: rgba(255, 255, 255, 0.92);
  --primary-tint: rgba(37, 99, 235, 0.15);
}

/* Color-vision-friendly (high contrast, colorblind‑safe palette) */
body[data-theme="cvd"],
html[data-theme="cvd"],
:root[data-theme="cvd"] {
  /* Light base for stronger legibility */
  --bg: #f7fafc; /* slate-50 */
  --surface: #ffffff; /* white */
  --alt: #f1f5f9; /* slate-100 */
  --text: #0f172a; /* slate-900 */
  --muted: #334155; /* slate-700 for readable secondary text */
  /* Colorblind‑safe accents (ColorBrewer-inspired) */
  --primary: #2b8cbe; /* blue */
  --primary-600: #1f78b4; /* darker blue */
  --accent: #e66101; /* orange for links/accents */
  --border: #d1d5db; /* light border */
  --code-bg: #f3f4f6; /* light code bg */
  --sidebar-bg: rgba(255, 255, 255, 0.92);
  --primary-tint: rgba(43, 140, 190, 0.16);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family:
    ui-sans-serif,
    system-ui,
    -apple-system,
    Segoe UI,
    Roboto,
    Helvetica,
    Arial,
    "Apple Color Emoji",
    "Segoe UI Emoji";
  color: var(--text);
  background: linear-gradient(180deg, var(--bg), var(--alt) 40%, var(--bg));
  line-height: 1.6;
  transition:
    background-color 200ms ease,
    color 200ms ease;
}

.container {
  width: min(1100px, 92%);
  margin: 0 auto;
}

a {
  color: var(--accent);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

/* 3) Header: fixed top bar that contains theme switcher */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  background: var(--sidebar-bg);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--border);
}

/* Pin theme switcher to the top-right corner of the header */
/* Flex-based: keep theme switcher at the far right (no absolute positioning) */
.site-header .theme-switcher {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  gap: 6px;
  z-index: 50;
}

/* No extra padding required when using flex layout */
.site-header .header-inner { padding-right: 124px; }

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--header-h);
}

/* Push theme switcher to the right edge inside header */
.header-inner .theme-switcher { margin-left: 0; }

.nav {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 22px;
  padding: 14px 0;
}

.brand {
  font-weight: 700;
  letter-spacing: 0.2px;
}

header nav {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

header nav a {
  color: var(--text);
  padding: 6px 10px;
  border-radius: 8px;
}

header nav a:hover {
  background: rgba(255, 255, 255, 0.06);
  text-decoration: none;
}

/* Sidebar layout */
.layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  min-height: 100vh;
  margin-top: var(--header-h);
}

.sidebar {
  position: sticky;
  top: var(--header-h);
  align-self: start;
  height: calc(100vh - var(--header-h));
  padding: 18px 16px;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--border);
  backdrop-filter: saturate(160%) blur(10px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sidebar .brand {
  font-weight: 800;
  font-size: 18px;
}

.sidebar nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sidebar nav a {
  display: block;
  color: var(--text);
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid transparent;
  position: relative;
  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    color 180ms ease;
}

.sidebar nav a:hover {
  background: rgba(255, 255, 255, 0.06);
  text-decoration: none;
}

.sidebar nav a::before {
  content: "";
  position: absolute;
  left: -16px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  background: linear-gradient(180deg, var(--primary), var(--primary-600));
  border-radius: 2px;
  opacity: 0;
  transition: opacity 160ms ease;
}

.sidebar nav a.active {
  background: var(--primary-tint);
  border-color: var(--primary);
  color: var(--text);
}

.sidebar nav a.active::before {
  opacity: 1;
}

.hero {
  padding: 40px 0 40px;
}

.hero-inner {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 28px;
}

.hero-copy h1 {
  margin: 0 0 10px;
  font-size: clamp(28px, 4vw, 44px);
}

.hero-copy p {
  color: var(--muted);
  margin: 0 0 18px;
}

.cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.hero-card {
  background: linear-gradient(
    180deg,
    rgba(59, 130, 246, 0.12),
    rgba(34, 211, 238, 0.1)
  );
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 14px;
  padding: 18px;
}

.hero-card h3 {
  margin-top: 0;
}
.facts {
  margin: 0;
  padding-left: 18px;
}

/* 5) Section spacing */
.section {
  padding: 48px 0;
}

/* Ensure anchor links aren't hidden under the fixed header */
section[id],
[id].section {
  scroll-margin-top: calc(var(--header-h) + 12px);
}

.section.alt {
  background: linear-gradient(180deg, var(--alt), var(--bg));
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.grid.two {
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(2, 1fr);
}

.grid.three {
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(3, 1fr);
}

.card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
}

.diagram {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  overflow: auto;
}

pre.mermaid {
  margin: 0;
}

.code {
  border: 1px solid var(--border);
  background: var(--code-bg);
  border-radius: 12px;
  overflow: hidden;
}

.code-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.03);
}

.code pre {
  margin: 0;
  padding: 14px;
  overflow: auto;
}

/* Frontend demo form */
.demo-form {
  display: grid;
  gap: 12px;
  margin: 12px 0 8px;
}
.demo-form label { display: grid; gap: 6px; }
.demo-form span { color: var(--muted); font-size: 0.9rem; }
.demo-form input[type="text"],
.demo-form input[type="email"] {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
}
.actions { margin-top: 6px; }
.preview {
  background: var(--code-bg);
  border: 1px dashed var(--border);
  border-radius: 10px;
  padding: 12px;
  overflow: auto;
}

code,
pre {
  font-family:
    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
    "Courier New", monospace;
  font-size: 13.5px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: end;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  cursor: pointer;
}

/* Recycle Bin panel */
.recycle-panel {
  margin: 8px 12px 0;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
}
.recycle-list {
  display: grid;
  gap: 8px;
}
.recycle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}
.recycle-name {
  font-weight: 600;
}
.recycle-actions {
  display: flex;
  gap: 6px;
}

/* Recycle overlay layer */
.recycle-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: none;
}
.recycle-overlay.show {
  display: block;
}
.recycle-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
}
.recycle-dialog {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(740px, 94vw);
  max-height: 80vh;
  overflow: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}
.recycle-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.04);
}
.recycle-body {
  padding: 10px 12px;
}

.btn:hover {
  filter: brightness(1.1);
}

.btn.primary {
  background: linear-gradient(180deg, var(--primary), var(--primary-600));
  border: none;
}

.btn.ghost {
  background: transparent;
}

.copy-btn {
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(59, 130, 246, 0.15);
  color: var(--text);
  border: 1px solid rgba(59, 130, 246, 0.4);
}

.quiz {
  display: grid;
  gap: 18px;
}

.quiz-q label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  margin: 6px 0;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
}

.quiz-q label.correct {
  outline: 2px solid #34d399;
}

.quiz-q label.wrong {
  outline: 2px solid #f87171;
}

.quiz-result {
  margin-top: 8px;
  color: var(--muted);
}

.site-footer {
  padding: 30px 0;
  border-top: 1px solid var(--border);
  background: var(--sidebar-bg);
  text-align: center;
}

/* 6) Responsive layout adjustments */
@media (max-width: 900px) {
  .layout {
    grid-template-columns: 1fr;
  }
  .sidebar {
    height: auto;
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: 12px;
    background: var(--sidebar-bg);
  }
  .sidebar nav {
    flex-direction: row;
    overflow-x: auto;
  }
  .sidebar nav a {
    white-space: nowrap;
  }
  .hero-inner {
    grid-template-columns: 1fr;
  }
  .grid.two {
    grid-template-columns: 1fr;
  }
  .grid.three {
    grid-template-columns: 1fr;
  }
}

/* Theme switcher (inside header, aligned right) */
.theme-switcher {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.theme-btn {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition:
    background-color 160ms ease,
    color 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease;
}

.theme-btn:hover {
  background: rgba(255, 255, 255, 0.06);
}
body[data-theme="light"] .theme-btn:hover {
  background: rgba(0, 0, 0, 0.06);
}
body[data-theme="cvd"] .theme-btn:hover {
  background: rgba(0, 0, 0, 0.06);
}

.theme-btn.active {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-tint);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.02);
}

.theme-btn:focus {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Strong fallback to make theme changes visually obvious */
html[data-theme="light"],
body[data-theme="light"] {
  background: #f8fafc !important;
}

html[data-theme="light"] .site-header,
body[data-theme="light"] .site-header {
  background: rgba(255, 255, 255, 0.92) !important;
}

html[data-theme="light"] .sidebar,
body[data-theme="light"] .sidebar {
  background: rgba(255, 255, 255, 0.95) !important;
}

/* Strong fallback for Color‑Vision mode to ensure visible change */
html[data-theme="cvd"],
body[data-theme="cvd"] {
  background: #f7fafc !important;
}
html[data-theme="cvd"] .site-header,
body[data-theme="cvd"] .site-header {
  background: rgba(255, 255, 255, 0.92) !important;
}
html[data-theme="cvd"] .sidebar,
body[data-theme="cvd"] .sidebar {
  background: rgba(255, 255, 255, 0.95) !important;
}

/* Practice SQL modal (right-side drawer) */
.practice-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  pointer-events: none;
}
.practice-modal[aria-hidden="true"] {
  display: none;
}
.practice-modal.show {
  pointer-events: auto;
}

.practice-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  transition: opacity 180ms ease;
}

.practice-panel {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: min(560px, 92vw);
  min-width: 360px;
  max-width: 92vw;
  background: var(--surface);
  border-left: 1px solid var(--border);
  box-shadow: -10px 0 30px rgba(0, 0, 0, 0.35);
  transform: translateX(8px);
  opacity: 0.98;
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 10px;
  transition:
    transform 220ms ease,
    opacity 180ms ease,
    width 120ms ease;
}

.practice-modal.show .practice-backdrop {
  opacity: 1;
}
.practice-modal.show .practice-panel {
  transform: translateX(0);
  opacity: 1;
}

.practice-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  position: sticky;
  top: 0;
  z-index: 10;
  cursor: default;
  -webkit-user-select: none;
  user-select: none;
}

.practice-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  position: sticky;
  top: 48px;
  z-index: 9;
}

.practice-status {
  color: var(--muted);
  margin-left: auto;
  font-size: 13px;
}

.practice-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
}
.practice-form input {
  flex: 1 1 140px;
  min-width: 120px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
}

.practice-editor {
  padding: 10px 12px;
}
.practice-editor textarea {
  width: 100%;
  height: 180px;
  resize: vertical;
  background: var(--code-bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  font-family:
    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
    "Courier New", monospace;
  font-size: 13.5px;
}

.practice-output {
  padding: 0 12px 12px;
  overflow: auto;
}

.practice-output .result-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}

.practice-output .result-table thead th {
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid var(--border);
  text-align: left;
  padding: 8px 10px;
}
.practice-output .result-table tbody td {
  border-top: 1px solid var(--border);
  padding: 8px 10px;
}
.practice-output .result {
  margin: 10px 0 16px;
}
.practice-output .error {
  color: #f87171;
  font-weight: 600;
}

/* Dynamic form (drag + delete) */
#practice-form-dyn {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
}
#practice-form-dyn .dyn-controls {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}
#practice-form-dyn .dyn-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
#practice-form-dyn .dyn-field {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
}
#practice-form-dyn .dyn-field.dragging {
  opacity: 0.6;
}
#practice-form-dyn .dyn-field .field-drag {
  cursor: grab;
  user-select: none;
  color: var(--muted);
}
#practice-form-dyn .dyn-field input {
  flex: 1 1 180px;
  min-width: 160px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
}
#practice-form-dyn .dyn-field .field-del {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  cursor: pointer;
}