:root {
  color-scheme: dark;
  --bg: #09090b;
  --panel: rgba(255, 255, 255, 0.05);
  --panel-strong: rgba(255, 255, 255, 0.08);
  --border: rgba(255, 255, 255, 0.1);
  --text: #e6ebf2;
  --muted: #a6afc3;
  --accent: #60a5fa;
  --accent-soft: rgba(96, 165, 250, 0.14);
  --shadow: 0 18px 60px rgba(0, 0, 0, 0.35);
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text);
}

body.light-mode {
  color-scheme: light;
  --bg: #edf2f8;
  --panel: #ffffff;
  --panel-strong: #ffffff;
  --border: rgba(15, 23, 42, 0.14);
  --text: #0f172a;
  --muted: #334155;
  --accent: #1d4ed8;
  --accent-soft: rgba(29, 78, 216, 0.12);
  --shadow: 0 14px 38px rgba(15, 23, 42, 0.1);
}

body.light-mode .command-card,
body.light-mode aside > div,
body.light-mode main > section,
body.light-mode #emptyState {
  box-shadow: var(--shadow);
  background: var(--panel) !important;
  border-color: var(--border) !important;
}

body.light-mode header {
  background: rgba(248, 250, 252, 0.92) !important;
  border-color: rgba(15, 23, 42, 0.12) !important;
}

body.light-mode .text-white,
body.light-mode h1,
body.light-mode h2,
body.light-mode h3,
body.light-mode h4 {
  color: #0f172a !important;
}

body.light-mode .text-base-400,
body.light-mode .text-base-500,
body.light-mode .text-base-300 {
  color: #334155 !important;
}

body.light-mode .bg-black\/20,
body.light-mode .bg-black\/30,
body.light-mode .bg-white\/5,
body.light-mode .bg-white\/\[0\.045\],
body.light-mode .bg-white\/\[0\.03\] {
  background: #f8fafc !important;
}

body.light-mode .command-card pre,
body.light-mode .command-card code,
body.light-mode [data-role="exampleWrapper"] {
  color: #0f172a;
}

body.light-mode .command-card mark {
  background: linear-gradient(90deg, rgba(29, 78, 216, 0.2), rgba(37, 99, 235, 0.24));
}

pre,
code,
kbd {
  font-family: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
}

.command-card,
aside > div,
main > section,
#emptyState {
  transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease,
    transform 180ms ease;
}

/* Sidebar spacing: tighten vertical rhythm */
#sidebarCategories {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Panel labels and summaries */
.panel-label {
  font-size: 0.825rem;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.12em;
}

/* Stats cards in header: tighten typography so numbers fit the box */
.stats-grid > div {
  padding-top: 0.55rem; /* slightly reduce vertical padding */
  padding-bottom: 0.55rem;
}

.stats-grid .text-xs {
  font-size: 0.675rem; /* reduce label size */
}

.stats-grid .text-xl {
  font-size: 1.05rem; /* reduce large number size so it fits */
  line-height: 1.05;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (min-width: 640px) {
  .stats-grid .text-xl {
    font-size: 1.15rem;
  }
}
.filters-summary {
  color: var(--muted);
  font-weight: 600;
}
.special-title {
  font-weight: 700;
}
.special-sub {
  color: var(--muted);
  font-weight: 600;
}

.command-card.active {
  border-color: rgba(96, 165, 250, 0.65);
  box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.2), 0 22px 60px rgba(0, 0, 0, 0.25);
}

.command-card.expanded {
  grid-column: 1 / -1;
  border-color: rgba(96, 165, 250, 0.65) !important;
  box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.25), 0 26px 68px rgba(0, 0, 0, 0.32);
  transform: translateY(-2px);
}

body.light-mode .command-card.expanded {
  border-color: rgba(29, 78, 216, 0.42) !important;
  box-shadow: 0 0 0 1px rgba(29, 78, 216, 0.14), 0 20px 48px rgba(15, 23, 42, 0.12);
}

/* Command card internals: reduce empty space under CLI pre block */
.command-card pre {
  margin: 0;
  padding: 0.45rem 0.5rem;
  background: transparent;
  min-height: 0;
  line-height: 1.45;
}

.command-card [data-role="commands"] {
  display: block;
  white-space: pre-wrap;
}

.command-card .copy-line {
  display: block;
  cursor: copy;
  border-radius: 0.35rem;
  padding: 0;
  margin: 0;
  line-height: inherit;
}

.command-card .copy-line:hover {
  background: rgba(96, 165, 250, 0.09);
}

/* Allow direct selection inside code blocks */
.command-card pre, .command-card code, .command-card [data-role="commands"], .command-card [data-role="example"] {
  user-select: text;
  -webkit-user-select: text;
  -moz-user-select: text;
}

/* Tags: stronger visual hierarchy */
.command-card [data-role="tags"] .inline-flex {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  color: var(--muted);
  font-weight: 600;
  padding: 0.35rem 0.6rem;
  margin-right: 0.4rem;
}

/* Make the 'Why and when to use this' action feel integrated */
.command-card [data-action="expand"] {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.6rem 0.5rem;
  border-radius: 0.75rem;
  background: transparent;
}
.command-card [data-action="expand"]:hover {
  background: linear-gradient(90deg, rgba(96,165,250,0.04), rgba(139,92,246,0.03));
}

/* Badges in header: consistent style */
[data-role="category"],
[data-role="type"],
[data-role="difficulty"] {
  display: inline-block;
  padding: 0.32rem 0.6rem;
  border-radius: 999px;
  font-weight: 700;
  margin-right: 0.35rem;
  color: var(--accent);
  background: rgba(96,165,250,0.06);
  border: 1px solid rgba(96,165,250,0.06);
}

/* Make favorite and copy buttons consistent */
.command-card [data-action="favorite"],
.command-card [data-action="copy"] {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  color: var(--muted);
}
.command-card [data-action="favorite"].text-amber-300,
.command-card [data-action="favorite"].text-amber-300:hover {
  color: #f59e0b;
}

/* JSON status dot: muted */
.json-status-dot {
  background: var(--muted);
  width: 0.5rem;
  height: 0.5rem;
}

/* Theme icon reduced emphasis */
#themeToggleIcon {
  opacity: 0.9;
  filter: grayscale(20%);
}

mark {
  background: linear-gradient(90deg, rgba(96, 165, 250, 0.4), rgba(139, 92, 246, 0.35));
  color: inherit;
  border-radius: 0.375rem;
  padding: 0 0.15rem;
}

.filter-chip,
.sidebar-link {
  transition: all 180ms ease;
}

.filter-chip.active,
.sidebar-link.active {
  border-color: rgba(96, 165, 250, 0.55);
  background: var(--accent-soft);
  color: white;
}

.sidebar-link.active {
  transform: translateX(4px);
}

.details-panel {
  transition: max-height 250ms ease, margin-top 200ms ease;
}

.details-panel.open {
  margin-top: 0.5rem;
}

.favorite-item {
  animation: fadeSlideIn 220ms ease;
}

.copy-success {
  animation: popIn 240ms ease;
}

/* visual feedback for copy on the code block */
.command-card [data-role="commands"].copy-success,
.command-card .copy-line.copy-success {
  outline: 2px solid rgba(96,165,250,0.22);
  transition: outline 160ms ease;
}


@keyframes fadeSlideIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes popIn {
  0% {
    transform: scale(0.96);
  }
  70% {
    transform: scale(1.02);
  }
  100% {
    transform: scale(1);
  }
}

@media (max-width: 1023px) {
  aside {
    order: 2;
  }

  main {
    order: 1;
  }
}

/* Ensure grid items size to their content instead of stretching to match neighbors */
#commandGrid,
#specialGrid {
  align-items: start;
}

.grid > .command-card {
  align-self: start;
}

/* Masonry-like column layout at very large screens to avoid row gaps */
@media (min-width: 1536px) {
  #commandGrid,
  #specialGrid {
    display: block; /* switch off grid behavior */
    column-count: 2;
    column-gap: 1rem;
  }

  .command-card {
    display: inline-block;
    width: 100%;
    margin: 0 0 1rem;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    vertical-align: top; /* prevent baseline alignment gaps in multi-column layout */
  }
}

/* Modal overlay and dialog improvements for readability */
#modalOverlay {
  background: rgba(2, 6, 23, 0.65) !important; /* darker, less transparent backdrop */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  display: none; /* stay hidden by default independent of Tailwind */
  align-items: center;
  justify-content: center;
}

/* When not hidden, force the overlay to show even if Tailwind hasn't initialized */
#modalOverlay:not(.hidden) {
  display: flex !important;
}

#modalDialog {
  background: linear-gradient(180deg, rgba(10,12,16,0.96), rgba(8,10,14,0.92));
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 30px 80px rgba(2,6,23,0.6);
  color: var(--text);
  padding: 1.25rem;
  transition: transform 220ms ease, opacity 160ms ease;
}

/* Make command blocks inside modal clearly readable */
#modalCommands,
#modalExample {
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.04);
  padding: 0.6rem;
  border-radius: 0.5rem;
  color: var(--text);
  overflow:auto;
}

/* Buttons inside modal: stronger contrast */
#modalCopy,
#modalFavorite,#modalClose {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  color: var(--muted);
}

/* Small animation when modal opens */
#modalOverlay:not(.hidden) #modalDialog {
  transform: translateY(0);
  opacity: 1;
}

/* Ensure modal text scales on small screens */
@media (max-width: 640px) {
  #modalDialog { padding: 1rem; width: 100%; height: 92vh; }
  #modalTitle { font-size: 1.125rem; }
}