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

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary: 221.2 83.2% 53.3%;
    --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%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 221.2 83.2% 53.3%;
  }

  .dark {
    --background: 222.2 84% 4.9%;
    --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: 217.2 91.2% 59.8%;
    --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%;
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 224.3 76.3% 48%;
  }
}

@layer base {
  html {
    @apply min-h-full bg-slate-50 dark:bg-gray-900;
  }

  * {
    @apply border-border;
  }

  #root {
    min-height: 100vh;
    min-height: 100dvh;
  }

  body {
    min-height: 100vh;
    min-height: 100dvh;
    @apply bg-background text-foreground transition-colors duration-300;
  }
  input[type="number"]::-webkit-inner-spin-button,
  input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  input[type="number"] {
    -moz-appearance: textfield;
  }
}

/* Formula container styles */
.formula-container {
  @apply w-full py-4;
  overflow: visible !important;
}

/* KaTeX container styles */
.katex-display {
  overflow: visible !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  justify-content: center !important;
}

.katex {
  @apply text-current;
  font-size: 1.1em !important;
  max-width: 100%;
  display: flex !important;
  justify-content: center !important;
}

.katex-html {
  max-width: 100%;
  overflow: visible !important;
}

/* Scale formulas on mobile */
@media (max-width: 640px) {
  .katex {
    font-size: 0.9em !important;
  }
  
  .katex-display > .katex {
    white-space: normal !important;
  }
  
  .katex .mfrac .frac-line {
    min-width: 0;
  }
  
  .katex .mspace {
    margin-right: 0 !important;
  }
  
  .katex .mord + .mrel {
    margin-left: 0.2em;
    margin-right: 0.2em;
  }
}

/* Dark mode formula styles */
.dark .katex {
  @apply text-gray-100;
}

.dark .katex .mord,
.dark .katex .mbin,
.dark .katex .mrel,
.dark .katex .mopen,
.dark .katex .mclose,
.dark .katex .mpunct,
.dark .katex .minner {
  @apply text-current;
}

/* Calculation section styles */
.calculation-section {
  @apply space-y-4 p-4 rounded-xl bg-white dark:bg-gray-800;
}

.calculation-title {
  @apply text-lg font-semibold text-gray-900 dark:text-white;
}

.calculation-content {
  @apply space-y-2;
}

/* Formula block styles */
.formula-block {
  @apply p-4 rounded-lg bg-gray-50 dark:bg-gray-900;
  overflow: visible;
}

@keyframes rotate {
  0% {
    --gradient-angle: 0deg;
  }
  100% {
    --gradient-angle: 360deg;
  }
}

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

@property --gradient-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.input-gradient-border {
  position: relative;
  border-radius: 0.75rem;
}

.input-gradient-border::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 0.75rem;
  padding: 2px;
  background: rgb(226, 232, 240);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  transition: background 0.3s ease;
}

.input-gradient-border input,
.input-gradient-border select {
  position: relative;
  z-index: 2;
  width: 100%;
  border: 2px solid transparent;
  background-clip: padding-box;
}

.calculator-focus-field,
.calculator-focus-group {
  border: 2px solid transparent;
  border-radius: 0.75rem;
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(rgb(226, 232, 240), rgb(226, 232, 240)) border-box;
  transition: background 0.3s ease;
}

.calculator-focus-field {
  background-clip: padding-box, border-box;
}

.calculator-focus-group input,
.calculator-focus-group select {
  width: 100%;
  border: 0;
  background: transparent;
  outline: none;
  box-shadow: none;
}

.calculator-focus-group input:focus,
.calculator-focus-group select:focus,
.calculator-focus-field:focus {
  outline: none;
  box-shadow: none;
}

.calculator-focus-field:focus,
.calculator-focus-group:focus-within {
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(rgb(199, 210, 254), rgb(199, 210, 254)) border-box;
}

select.calculator-focus-field,
.calculator-focus-group select,
.input-gradient-border select {
  color-scheme: light;
}

select.calculator-focus-field option,
.calculator-focus-group select option,
.input-gradient-border select option {
  background-color: rgb(255, 255, 255);
  color: rgb(31, 41, 55);
}

.date-field-input {
  position: relative;
  color-scheme: light;
  cursor: pointer;
}

.date-field-input::-webkit-calendar-picker-indicator {
  position: absolute;
  right: 0.5rem;
  width: 2rem;
  height: 2rem;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

/* Light theme styles */
.input-gradient-border:has(input:focus):has(.indigo-input)::before {
  background: rgb(199, 210, 254);
}

.input-gradient-border:has(select:focus):has(.indigo-input)::before {
  background: rgb(199, 210, 254);
}

.input-gradient-border:has(input:focus):has(.purple-input)::before {
  background: rgb(233, 213, 255);
}

.input-gradient-border:has(select:focus):has(.purple-input)::before {
  background: rgb(233, 213, 255);
}

.input-gradient-border:has(input:focus):has(.pink-input)::before {
  background: rgb(251, 207, 232);
}

.input-gradient-border:has(select:focus):has(.pink-input)::before {
  background: rgb(251, 207, 232);
}

.input-gradient-border:has(input:focus):has(.blue-input)::before {
  background: rgb(191, 219, 254);
}

.input-gradient-border:has(select:focus):has(.blue-input)::before {
  background: rgb(191, 219, 254);
}

/* Dark theme styles */
.dark .input-gradient-border::before {
  background: rgba(99, 102, 241, 0.15);
}

.dark .calculator-focus-field,
.dark .calculator-focus-group {
  background:
    linear-gradient(rgb(17, 24, 39), rgb(17, 24, 39)) padding-box,
    linear-gradient(rgba(99, 102, 241, 0.15), rgba(99, 102, 241, 0.15)) border-box;
}

.dark select.calculator-focus-field,
.dark .calculator-focus-group select,
.dark .input-gradient-border select {
  color-scheme: dark;
}

.dark select.calculator-focus-field option,
.dark .calculator-focus-group select option,
.dark .input-gradient-border select option {
  background-color: rgb(17, 24, 39);
  color: rgb(229, 231, 235);
}

.dark .date-field-input {
  color-scheme: dark;
}

.dark .input-gradient-border:has(input:focus)::before {
  background: conic-gradient(
    from var(--gradient-angle),
    rgba(99, 102, 241, 0.15) 0%,
    rgba(99, 102, 241, 0.15) 10%,
    rgba(129, 140, 248, 1) 20%,
    rgba(165, 180, 252, 1) 40%,
    rgba(99, 102, 241, 0.15) 50%,
    rgba(99, 102, 241, 0.15) 100%
  );
  animation: rotate 4s linear infinite;
}

.dark .input-gradient-border:has(select:focus)::before {
  background: conic-gradient(
    from var(--gradient-angle),
    rgba(99, 102, 241, 0.15) 0%,
    rgba(99, 102, 241, 0.15) 10%,
    rgba(129, 140, 248, 1) 20%,
    rgba(165, 180, 252, 1) 40%,
    rgba(99, 102, 241, 0.15) 50%,
    rgba(99, 102, 241, 0.15) 100%
  );
  animation: rotate 4s linear infinite;
}

.dark .calculator-focus-field:focus,
.dark .calculator-focus-group:focus-within {
  background:
    linear-gradient(rgb(17, 24, 39), rgb(17, 24, 39)) padding-box,
    conic-gradient(
      from var(--gradient-angle),
      rgba(99, 102, 241, 0.15) 0%,
      rgba(99, 102, 241, 0.15) 10%,
      rgba(129, 140, 248, 1) 20%,
      rgba(165, 180, 252, 1) 40%,
      rgba(99, 102, 241, 0.15) 50%,
      rgba(99, 102, 241, 0.15) 100%
    ) border-box;
  animation: rotate 4s linear infinite;
}

input[type="number"] {
  @apply transition-colors duration-200 ease-in-out bg-white dark:bg-gray-900;
}

input[type="number"]:focus {
  @apply outline-none;
}

.gradient-bg {
  @apply bg-gradient-to-br from-indigo-500 via-purple-500 to-pink-500 dark:from-indigo-800 dark:via-purple-800 dark:to-pink-800;
}

@layer utilities {
  .ease-spring {
    transition-timing-function: cubic-bezier(0.87, 0, 0.13, 1);
  }
}

.cap-table-print-report {
  display: none;
}

.safe-print-report {
  display: none;
}

@media print {
  @page {
    margin: 0.6in;
    size: auto;
  }

  body.print-cap-table-report {
    background: #ffffff !important;
    color: #111827 !important;
  }

  body.print-cap-table-report .cap-table-screen {
    display: none !important;
  }

  body.print-cap-table-report .cap-table-print-report {
    display: block !important;
  }

  body.print-safe-report {
    background: #ffffff !important;
    color: #111827 !important;
  }

  body.print-safe-report .safe-screen {
    display: none !important;
  }

  body.print-safe-report .safe-print-report {
    display: block !important;
  }

  .cap-table-print-shell {
    color: #111827;
    font-size: 12px;
    line-height: 1.5;
  }

  .safe-print-shell {
    color: #111827;
    font-size: 12px;
    line-height: 1.5;
  }

  .cap-table-print-header {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    border-bottom: 2px solid #cbd5e1;
    padding-bottom: 16px;
    margin-bottom: 20px;
  }

  .safe-print-header {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    border-bottom: 2px solid #cbd5e1;
    padding-bottom: 16px;
    margin-bottom: 20px;
  }

  .cap-table-print-eyebrow {
    margin: 0 0 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #4f46e5;
  }

  .safe-print-eyebrow {
    margin: 0 0 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #4f46e5;
  }

  .cap-table-print-header h1 {
    margin: 0;
    font-size: 28px;
    line-height: 1.1;
  }

  .safe-print-header h1 {
    margin: 0;
    font-size: 28px;
    line-height: 1.1;
  }

  .cap-table-print-subtitle {
    margin: 6px 0 0;
    font-size: 15px;
    color: #475569;
  }

  .safe-print-subtitle {
    margin: 6px 0 0;
    font-size: 15px;
    color: #475569;
  }

  .cap-table-print-meta p {
    margin: 0 0 4px;
  }

  .safe-print-meta p {
    margin: 0 0 4px;
  }

  .cap-table-print-section {
    margin-top: 20px;
    break-inside: avoid;
  }

  .safe-print-section {
    margin-top: 20px;
    break-inside: avoid;
  }

  .cap-table-print-section h2 {
    margin: 0 0 12px;
    font-size: 16px;
  }

  .safe-print-section h2 {
    margin: 0 0 12px;
    font-size: 16px;
  }

  .cap-table-print-section h3 {
    margin: 0 0 8px;
    font-size: 13px;
  }

  .safe-print-section h3 {
    margin: 0 0 8px;
    font-size: 13px;
  }

  .cap-table-print-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  .safe-print-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  .cap-table-print-grid ul,
  .cap-table-print-issues {
    margin: 0;
    padding-left: 18px;
  }

  .safe-print-grid ul,
  .safe-print-issues {
    margin: 0;
    padding-left: 18px;
  }

  .cap-table-print-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }

  .safe-print-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }

  .cap-table-print-metrics > div {
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    padding: 10px 12px;
    background: #f8fafc;
  }

  .safe-print-metrics > div {
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    padding: 10px 12px;
    background: #f8fafc;
  }

  .cap-table-print-metrics span {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
  }

  .safe-print-metrics span {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
  }

  .cap-table-print-metrics strong {
    display: block;
    margin-top: 4px;
    font-size: 15px;
    color: #111827;
  }

  .safe-print-metrics strong {
    display: block;
    margin-top: 4px;
    font-size: 15px;
    color: #111827;
  }

  .cap-table-print-report table {
    width: 100%;
    border-collapse: collapse;
  }

  .safe-print-report table {
    width: 100%;
    border-collapse: collapse;
  }

  .cap-table-print-report th,
  .cap-table-print-report td {
    border: 1px solid #cbd5e1;
    padding: 8px 10px;
    text-align: left;
    vertical-align: top;
  }

  .safe-print-report th,
  .safe-print-report td {
    border: 1px solid #cbd5e1;
    padding: 8px 10px;
    text-align: left;
    vertical-align: top;
  }

  .cap-table-print-report th {
    background: #eef2ff;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #3730a3;
  }

  .safe-print-report th {
    background: #eef2ff;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #3730a3;
  }
}