/**
 * Maestro Web Interface Styles
 *
 * Base styles and CSS custom properties for the web interface.
 * Theme colors are injected via JavaScript from ThemeProvider.
 */

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

/* CSS Custom Properties - Default values (overridden by theme) */
:root {
  /* Colors */
  --color-background: #1a1a2e;
  --color-surface: #16213e;
  --color-surface-elevated: #1f2e54;
  --color-border: #2d3a5a;
  --color-text-main: #eaeaea;
  --color-text-muted: #8892b0;
  --color-accent: #4a9eff;
  --color-accent-hover: #3a8eef;
  --color-success: #22c55e;
  --color-warning: #f59e0b;
  --color-error: #ef4444;

  /* Typography */
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-normal: 200ms ease;
  --transition-slow: 300ms ease;

  /* Z-Index layers */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-modal-backdrop: 300;
  --z-modal: 400;
  --z-toast: 500;
}

/* Base styles */
html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-mono);
  background-color: var(--color-background);
  color: var(--color-text-main);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Selection styling */
::selection {
  background-color: var(--color-accent);
  color: white;
}

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

::-webkit-scrollbar-track {
  background: var(--color-surface);
}

::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: var(--radius-full);
}

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

/* Focus styles */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Remove default focus outline (we use focus-visible) */
:focus:not(:focus-visible) {
  outline: none;
}

/* Link styles */
a {
  color: var(--color-accent);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-accent-hover);
}

/* Button reset */
button {
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

/* Input reset */
input,
textarea,
select {
  font-family: inherit;
  font-size: inherit;
  background: none;
  border: none;
}

/* Placeholder text styling - ensure clear distinction from actual input values */
/* Uses lower opacity and italic to clearly indicate placeholder state */
input::placeholder,
textarea::placeholder {
  opacity: 0.35;
  font-style: italic;
}

/* Mobile-specific styles */
@media (max-width: 767px) {
  /* Prevent text size adjustment */
  html {
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
  }

  /* Larger tap targets for accessibility (44px minimum per Apple HIG) */
  button,
  a,
  input,
  select,
  textarea {
    min-height: 44px;
  }

  /* Disable pull-to-refresh on body (we'll handle it ourselves) */
  body {
    overscroll-behavior-y: contain;
  }

  /* Prevent zoom on input focus (iOS Safari) */
  input,
  textarea,
  select {
    font-size: 16px !important;
  }
}

/* Dynamic viewport height support for mobile browsers */
/* dvh accounts for mobile browser chrome (address bar) */
html, body, #root {
  min-height: 100dvh;
  min-height: -webkit-fill-available;
}

/* Fallback for browsers that don't support dvh */
@supports not (min-height: 100dvh) {
  html, body, #root {
    min-height: 100vh;
  }
}

/* iOS-specific fixes */
@supports (-webkit-touch-callout: none) {
  /* Fix for iOS rubber-banding */
  body {
    position: fixed;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  #root {
    height: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Prevent iOS zoom on double tap */
  * {
    touch-action: manipulation;
  }
}

/* Prevent touch callout (long-press menu) on interactive elements */
button,
a,
input,
select,
textarea {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Allow text selection in content areas */
p, span, div, article, section {
  -webkit-user-select: text;
  user-select: text;
}

/* Smooth momentum scrolling */
.scrollable {
  -webkit-overflow-scrolling: touch;
  overflow-y: auto;
}

/* Safe area insets for iOS */
@supports (padding-top: env(safe-area-inset-top)) {
  .safe-area-top {
    padding-top: env(safe-area-inset-top);
  }

  .safe-area-bottom {
    padding-bottom: env(safe-area-inset-bottom);
  }

  .safe-area-left {
    padding-left: env(safe-area-inset-left);
  }

  .safe-area-right {
    padding-right: env(safe-area-inset-right);
  }
}

/* Animation keyframes */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slideDown {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Utility classes */
.animate-spin {
  animation: spin 1s linear infinite;
}

.animate-pulse {
  animation: pulse 2s ease-in-out infinite;
}

.animate-fadeIn {
  animation: fadeIn var(--transition-normal);
}

.animate-slideUp {
  animation: slideUp var(--transition-normal);
}

.animate-slideDown {
  animation: slideDown var(--transition-normal);
}

/* Hide scrollbar but keep functionality */
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* Truncate text */
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Line clamp */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Restore list styling for markdown preview prose containers */
.prose ul {
  list-style-type: disc !important;
  list-style-position: outside !important;
}

.prose ol {
  list-style-type: decimal !important;
  list-style-position: outside !important;
}

.prose li {
  display: list-item !important;
}

/* Fix bullet alignment when first element is bold/styled */
.prose li > strong:first-child,
.prose li > b:first-child,
.prose li > em:first-child,
.prose li > code:first-child,
.prose li > a:first-child {
  vertical-align: baseline;
  line-height: inherit;
}

.prose li::marker {
  font-weight: normal;
}

/* Nested lists */
.prose ul ul {
  list-style-type: circle !important;
}

.prose ul ul ul {
  list-style-type: square !important;
}

.prose ol ol {
  list-style-type: lower-alpha !important;
}

.prose ol ol ol {
  list-style-type: lower-roman !important;
}
