@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;

    --brand: 212 100% 60%;

    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;

    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;

    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;

    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;

    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;

    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;

    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 222.2 84% 4.9%;

    --radius: 0.5rem;

    --success: 193 100% 27%;
    --danger: 287 69% 57%;

    --chart-1: 221.2 83.2% 53.3%;
    --chart-2: 212 95% 68%;
    --chart-3: 216 92% 60%;
    --chart-4: 210 98% 78%;
    --chart-5: 212 97% 87%;

    --terminal-bg: #f8fafc;
    --terminal-fg: #1e293b;
    --terminal-red: #dc2626;
    --terminal-green: #16a34a;
    --terminal-yellow: #ca8a04;
    --terminal-blue: #2563eb;
    --terminal-magenta: #c026d3;
    --terminal-cyan: #0891b2;
  }

  .dark {
    --background: 226 82% 6%;
    --foreground: 210 40% 98%;

    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;

    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;

    --primary: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 11.2%;

    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;

    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;

    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;

    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;

    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 212.7 26.8% 83.9%;

    --chart-1: 221.2 83.2% 53.3%;
    --chart-2: 212 95% 68%;
    --chart-3: 216 92% 60%;
    --chart-4: 210 98% 78%;
    --chart-5: 212 97% 87%;

    --terminal-bg: #1e293b;
    --terminal-fg: #e2e8f0;
    --terminal-red: #f87171;
    --terminal-green: #4ade80;
    --terminal-yellow: #facc15;
    --terminal-blue: #60a5fa;
    --terminal-magenta: #e879f9;
    --terminal-cyan: #22d3ee;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

body {
  min-height: 100dvh;
}

html,
body,
#root {
  height: 100%;
}

.step-run-card {
  --transition: 0.25s;
  --spark: 3s;
  position: relative;
  overflow: hidden;
}

.step-run-card.active .step-run-backdrop {
  background: 222.2 84% 4.9%;
}

.step-run-card.active {
  transform: scale(1.05);
}

.spark {
  position: absolute;
  inset: 0;
  border-radius: 2px;
  rotate: 0deg;
  overflow: hidden;
  mask: linear-gradient(white, transparent 50%);
  animation: flip calc(var(--spark) * 2) infinite steps(2, end);
}

@keyframes flip {
  to {
    rotate: 360deg;
  }
}

.spark:before {
  content: '';
  position: absolute;
  width: 200%;
  aspect-ratio: 1;
  inset: 0 auto auto 50%;
  z-index: -1;
  translate: -50% -15%;
  rotate: 0;
  transform: rotate(-90deg);
  opacity: 1;
  background: conic-gradient(from 0deg, transparent 0 340deg, white 360deg);
  transition: opacity var(--transition);
  animation: rotate var(--spark) linear infinite both;
}

.step-run-backdrop {
  position: absolute;
  inset: 1px;
  background: 222.2 84% 4.9%;
  border-radius: 2px;
  transition: background var(--transition) opacity var(--transition);
}

@keyframes rotate {
  to {
    transform: rotate(90deg);
  }
}

@property --sNav {
  syntax: '<integer>';
  inherits: false;
  initial-value: 1;
}

@keyframes heroPulse {
  80% {
    opacity: 1;
  }
  100% {
    transform: scale(calc(var(--sNav) * 2));
    opacity: 0;
  }
}

.text {
  z-index: 1;
  color: rgb(203 213 225);
}

/* rjsf JSON Schema Form style hack */
.rjsf {
  /* Left side is not needed due to fieldset left margin */
  @apply mr-2;
}
/* Aka sections */
.rjsf fieldset > legend {
  /* Display block doesn't work for some reason. Does not fill parent width which is still a div, not sure why */
  @apply mb-3 w-full border-b pb-1 pt-4 text-xl font-semibold;
}
.rjsf fieldset > div {
  /* Offset to indicate hierarchy */
  @apply ml-3;
}
/* Label + component = group */
.rjsf .form-group {
  @apply mb-2;
}
.rjsf label.control-label {
  @apply mb-1 block font-bold;
}
.rjsf p.field-description {
  @apply mb-1;
}
/* Select component, and maybe other .form-control too */
.rjsf .form-control {
  @apply block w-full rounded-md border border-input p-2;
}
/* Input component */
.rjsf input {
  @apply flex h-10 w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50;
}

/* Array elements */
.rjsf .array-item {
  /* @apply grid grid-cols-12; */
  @apply flex flex-row items-end gap-4;
}
.rjsf .array-item .col-xs-9 {
  /* @apply col-span-9; */
  @apply grow;
}
.rjsf .array-item .col-xs-3 {
  /* @apply col-span-3; */
  @apply shrink-0;
}
.rjsf .array-item .array-item-toolbox {
  /* mb-4 to match .form-group */
  @apply mb-4 flex items-center justify-end;
}
/* Icons */
.rjsf .glyphicon {
  @apply font-normal not-italic;
}
.rjsf .glyphicon-remove::before {
  content: 'Remove';
}
.rjsf .glyphicon-arrow-up::before {
  content: 'Up';
}
.rjsf .glyphicon-arrow-down::before {
  content: 'Down';
}
.rjsf .glyphicon-plus::before {
  content: 'Add';
}
/* Buttons (tends to be icon buttons */
.rjsf .btn {
  @apply mx-1 rounded-md border p-2;
}
.rjsf .btn-danger {
  @apply border-red-200;
}
.rjsf .btn-add {
  @apply border-blue-200;
}
.rjsf button[type='submit'] {
  @apply bg-primary text-primary-foreground hover:bg-primary/90;
}

.rjsf textarea {
  @apply flex h-20 w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50;
}
/* END rjsf JSON Schema Form style hack */

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}

.shiki {
  padding: 15px !important;
  border-radius: 10px !important;
  background-color: #ccc;
  font-size: 0.8rem;
}

html.dark .nextra-code-block pre,
.dark .shiki {
  background-color: transparent !important;
}

pre.shiki {
  margin: 0;
  counter-reset: line;
}

pre.shiki > code {
  display: block;
}

pre.shiki > code > span {
  counter-increment: line;
  padding-left: 1rem;
  position: relative;
  min-height: 1.25em;
  line-height: 1.25;
}

pre.shiki > code > span::before {
  content: counter(line);
  position: absolute;
  left: -2rem;
  width: 2rem;
  text-align: right;
  color: var(--muted-foreground);
  opacity: 0.5;
  user-select: none;
}

/* Hide line numbers when hide-line-numbers class is applied */
.hide-line-numbers pre.shiki > code > span::before {
  display: none;
}

.hide-line-numbers pre.shiki > code > span {
  padding-left: 0 !important;
}

/* High contrast mode */
.contrast-more .shiki {
  filter: contrast(1.5);
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: hsl(var(--border));
  border-radius: 4px;
}

.dark ::-webkit-scrollbar-thumb {
  background: hsl(var(--muted));
}

::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--muted));
}

.dark ::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--border));
}

/* Code block line numbers */
.counter-reset-line {
  counter-reset: line;
}

.counter-reset-line code {
  display: block;
}

.counter-reset-line code span {
  display: block;
  position: relative;
  padding-left: 2.5rem;
}

.counter-reset-line code span::before {
  counter-increment: line;
  content: counter(line);
  position: absolute;
  left: 0;
  width: 2rem;
  text-align: right;
  color: var(--muted-foreground);
  user-select: none;
  padding-right: 0.5rem;
}

/* Code block line highlighting */
.highlighted-line {
  background-color: rgba(255, 255, 0, 0.1);
  display: block;
  margin: 0 -1rem;
  padding: 0 1rem;
  border-left: 3px solid #fbbf24;
}

.dark .highlighted-line {
  background-color: rgba(255, 255, 0, 0.05);
  border-left-color: #fbbf24;
}

/* Code block string highlighting */
.highlighted-string {
  background-color: #fbbf24;
  color: #000;
  padding: 0.1em 0.2em;
  border-radius: 0.2em;
  font-weight: bold;
}

.dark .highlighted-string {
  background-color: #fbbf24;
  color: #000;
}

@container (min-width: 768px) {
  .cq-lg\:block {
    display: block;
  }

  .cq-lg\:flex {
    display: flex;
  }

  .cq-lg\:inline {
    display: inline;
  }

  .cq-lg\:hidden {
    display: none;
  }
}

@container (min-width: 1024px) {
  .cq-lg\:block {
    display: block;
  }

  .cq-lg\:flex {
    display: flex;
  }

  .cq-lg\:inline {
    display: inline;
  }

  .cq-lg\:hidden {
    display: none;
  }

  .cq-xl\:block {
    display: block;
  }

  .cq-xl\:inline {
    display: inline;
  }

  .cq-xl\:hidden {
    display: none;
  }
}

/* Side panel container query breakpoints */
.side-panel-content {
  container-type: inline-size;
}

@container (min-width: 600px) {
  .side-responsive-layout {
    flex-direction: row;
    align-items: center;
  }

  .side-responsive-inner {
    flex-direction: row;
    align-items: center;
    width: auto;
  }

  .side-sm\:hidden {
    display: none;
  }

  .side-sm\:block {
    display: block;
  }
}

/* Subtle border pulse animation for unsaved changes */
@keyframes pulse-border {
  0%,
  100% {
    border-color: rgba(239, 68, 68, 0.5);
  }
  50% {
    border-color: rgba(239, 68, 68, 0.7);
  }
}

.animate-pulse-border {
  animation: pulse-border 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Terminal styling */
.terminal-root {
  background-color: var(--terminal-bg) !important;
  color: var(--terminal-fg) !important;
}

.terminal-root .react-lazylog {
  background-color: var(--terminal-bg) !important;
  color: var(--terminal-fg) !important;
}

/* Log line styling - truncate with ellipsis */
.terminal-root .log-line {
  background-color: var(--terminal-bg) !important;
  color: var(--terminal-fg) !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.terminal-root .log-line:hover {
  background-color: hsl(var(--muted) / 0.3) !important;
}

/* Expanded log line */
.terminal-root .log-line.expanded {
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: normal;
  overflow: visible;
  text-overflow: unset;
  background-color: hsl(var(--muted) / 0.4) !important;
  padding: 8px 12px;
  border-radius: 4px;
  margin: 4px 0;
  display: block;
  line-height: 1.6;
}

/* Fix virtualization row wrapper background */
.terminal-root div[style*="position: absolute"] {
  background-color: var(--terminal-bg) !important;
}

/* Terminal scrollbar styling */
.terminal-root ::-webkit-scrollbar-track {
  background-color: var(--terminal-bg);
}

.terminal-root ::-webkit-scrollbar-thumb {
  background-color: hsl(var(--muted));
  border-radius: 4px;
}

.terminal-root ::-webkit-scrollbar-corner {
  background-color: var(--terminal-bg);
}
