/* stylelint-disable at-rule-no-unknown */
@tailwind base;
@tailwind components;
@tailwind utilities;
/* stylelint-enable at-rule-no-unknown */

/* globals.css - Basic global styles */

html,
body,
#root {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: var(--codex-font-family);
  background: var(--codex-bg-secondary);
  color: var(--codex-text-primary);
}

.app-layout {
  display: flex;
  min-height: 100vh;
}

.global-sidebar {
  width: 220px;
  background: var(--codex-bg-primary);
  border-right: 1px solid var(--codex-border-light);
  padding: var(--codex-spacing-md) 0;
}

.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.topbar {
  background: var(--codex-bg-primary);
  border-bottom: 1px solid var(--codex-border-light);
  padding: var(--codex-spacing-md);
}

/* Dark mode overrides */
[data-theme="dark"] html,
[data-theme="dark"] body,
[data-theme="dark"] #root {
  background: var(--codex-bg-secondary);
  color: var(--codex-text-primary);
}

[data-theme="dark"] .global-sidebar {
  background: var(--codex-bg-secondary);
  border-right: 1px solid var(--codex-border-medium);
}

[data-theme="dark"] .topbar {
  background: var(--codex-bg-secondary);
  border-bottom: 1px solid var(--codex-border-medium);
}

/* Mobile Zoom Prevention */
/* Prevent automatic zooming on input focus for mobile devices */
input,
textarea,
select {
  font-size: 16px !important; /* iOS requires 16px+ to prevent zoom */
  transform: scale(1) !important; /* Prevent any scaling */
  transform-origin: top left !important; /* Anchor scaling to top-left */
}

/* Additional mobile zoom prevention for MUI components */
.MuiInputBase-input,
.MuiTextField-root input,
.MuiTextField-root textarea {
  font-size: 16px !important;
  transform: scale(1) !important;
  transform-origin: top left !important;
}

/* Disable browser autofill background globally */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
  -webkit-text-fill-color: inherit !important;
  transition: background-color 5000s ease-in-out 0s !important;
  background-color: transparent !important;
}

/* Disable autofill background for MUI TextField components */
.MuiTextField-root input:-webkit-autofill,
.MuiTextField-root input:-webkit-autofill:hover,
.MuiTextField-root input:-webkit-autofill:focus,
.MuiTextField-root input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
  -webkit-text-fill-color: inherit !important;
  transition: background-color 5000s ease-in-out 0s !important;
  background-color: transparent !important;
}

/* Disable autofill background for MUI OutlinedInput components */
.MuiOutlinedInput-root input:-webkit-autofill,
.MuiOutlinedInput-root input:-webkit-autofill:hover,
.MuiOutlinedInput-root input:-webkit-autofill:focus,
.MuiOutlinedInput-root input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
  -webkit-text-fill-color: inherit !important;
  transition: background-color 5000s ease-in-out 0s !important;
  background-color: transparent !important;
}

/* Desktop exception: keep epoch table edit inputs at 12px to match display */
@media screen and (min-width: 769px) {
  .codex-epoch-table .MuiInputBase-input,
  .codex-epoch-table .MuiTextField-root input,
  .codex-epoch-table .MuiTextField-root textarea {
    font-size: 12px !important;
    line-height: 1.2 !important;
  }
}

/* Prevent touch zoom on mobile devices */
* {
  touch-action: manipulation; /* Prevents double-tap zoom */
}

/* Ensure proper scaling for mobile inputs */
@media screen and (max-width: 768px) {
  input,
  textarea,
  select {
    font-size: 16px !important;
    -webkit-text-size-adjust: 100% !important;
    -moz-text-size-adjust: 100% !important;
    -ms-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
  }
}

/* Prevent drag-and-drop and text selection from avatars */
.MuiAvatar-root,
.MuiAvatar-root img {
  user-select: none !important;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
}

.MuiAvatar-root {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  /* user-drag is non-standard, using only vendor prefixes */
}

/* Additional rules for avatar text content */
.MuiAvatar-root span,
.MuiAvatar-root div {
  user-select: none !important;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
}

/* Prevent any drag operations on avatar content */
.MuiAvatar-root * {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  /* user-drag is non-standard, using only vendor prefixes */
}

/* Keyboard Height Adjustment */
/* Target ONLY the outermost viewport layer when keyboard opens */
@media screen and (max-height: 600px) {
  body[data-page="messages"],
  body[data-page="documentation"],
  body[data-page="timeline"] {
    height: calc(100vh - 216px) !important;
  }
}

/* Mobile Browser Scrolling Prevention for Pages with Internal Scrolling */
/* Prevent browser's global vertical scrolling on pages that handle their own scrolling */
@media screen and (max-width: 1024px) {
  /* Apply safe area rules to the main page container */
  body[data-page="messages"],
  body[data-page="documentation"],
  body[data-page="timeline"] {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
    height: 100% !important;
    -webkit-overflow-scrolling: touch;
    /* SAFE AREA RULES APPLIED ONCE HERE */
    viewport-fit: cover;
  }

  /* Basic layout adjustments without safe area rules */
  body[data-page="messages"] .app-layout,
  body[data-page="documentation"] .app-layout,
  body[data-page="timeline"] .app-layout {
    height: 100dvh !important;
    min-height: 100dvh !important;
    position: relative !important;
  }

  body[data-page="messages"] .main-content,
  body[data-page="documentation"] .main-content,
  body[data-page="timeline"] .main-content {
    height: calc(100dvh - 64px) !important;
    min-height: calc(100dvh - 64px) !important;
  }

  body[data-page="messages"] .topbar,
  body[data-page="documentation"] .topbar,
  body[data-page="timeline"] .topbar {
    z-index: 1200 !important;
  }

  body[data-page="messages"] [data-mobile-header="true"],
  body[data-page="documentation"] [data-mobile-header="true"],
  body[data-page="timeline"] [data-mobile-header="true"] {
    top: 64px !important;
    z-index: 1100 !important;
  }

  body[data-page="messages"] .internal-scroll-container,
  body[data-page="documentation"] .internal-scroll-container,
  body[data-page="timeline"] .internal-scroll-container {
    max-height: calc(100dvh - 64px) !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
}
/* Mobile-specific optimisations */
@media screen and (max-width: 1024px) {
  /* Prevent viewport zooming and bouncing on iOS */
  html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
  }

  /* Prevent pull-to-refresh on mobile browsers */
  body {
    overscroll-behavior: none;
    -webkit-overflow-scrolling: touch;
  }

  /* Ensure proper touch handling for internal scrollable containers */
  .internal-scroll-container {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scroll-behavior: smooth;
  }

  /* Viewport handling for modern mobile browsers */
  /* Support for dynamic viewport units */
  html {
    /* Enable viewport adjustment for browser UI elements */
    viewport-fit: cover;
    /* Allow browser to manage viewport naturally */
    overscroll-behavior: auto;
    /* Enable smooth viewport transitions */
    scroll-behavior: smooth;
  }

  /* Enable browser viewport adjustment for specific pages */
  body[data-page="messages"] html,
  body[data-page="documentation"] html,
  body[data-page="timeline"] html,
  body[data-page="settings"] html,
  body[data-page="profile"] html,
  body[data-page="landing"] html,
  body[data-page="subscription-manage"] html,
  body[data-page="subscription-plans"] html,
  body[data-page="contact"] html,
  body[data-page="terms"] html,
  body[data-page="privacy"] html,
  body[data-page="help"] html {
    /* Enable viewport adjustment for browser UI elements */
    viewport-fit: cover;
    /* Enable smooth viewport transitions */
    scroll-behavior: smooth;
    /* Allow browser to manage viewport naturally */
    -webkit-overflow-scrolling: touch;
  }

  /* Fallback for browsers that don't support dvh */
  @supports not (height: 100dvh) {
    body[data-page="messages"] .app-layout,
    body[data-page="documentation"] .app-layout,
    body[data-page="timeline"] .app-layout,
    body[data-page="settings"] .app-layout,
    body[data-page="profile"] .app-layout,
    body[data-page="landing"] .app-layout,
    body[data-page="subscription-manage"] .app-layout,
    body[data-page="subscription-plans"] .app-layout,
    body[data-page="contact"] .app-layout,
    body[data-page="terms"] .app-layout,
    body[data-page="privacy"] .app-layout,
    body[data-page="help"] .app-layout {
      height: 100vh !important;
      min-height: 100vh !important;
    }

    body[data-page="messages"] .main-content,
    body[data-page="documentation"] .main-content,
    body[data-page="timeline"] .main-content,
    body[data-page="settings"] .main-content,
    body[data-page="profile"] .main-content,
    body[data-page="landing"] .main-content,
    body[data-page="subscription-manage"] .main-content,
    body[data-page="subscription-plans"] .main-content,
    body[data-page="contact"] .main-content,
    body[data-page="terms"] .main-content,
    body[data-page="privacy"] .main-content,
    body[data-page="help"] .main-content {
      height: calc(100vh - 64px) !important;
      min-height: calc(100vh - 64px) !important;
    }
  }

  /* Touch handling for iOS Safari */
  body[data-page="messages"] *,
  body[data-page="documentation"] *,
  body[data-page="timeline"] *,
  body[data-page="settings"] *,
  body[data-page="profile"] *,
  body[data-page="landing"] *,
  body[data-page="subscription-manage"] *,
  body[data-page="subscription-plans"] *,
  body[data-page="contact"] *,
  body[data-page="terms"] *,
  body[data-page="privacy"] *,
  body[data-page="help"] * {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

  /* Allow text selection in input fields and content areas */
  body[data-page="messages"] input,
  body[data-page="messages"] textarea,
  body[data-page="documentation"] input,
  body[data-page="documentation"] textarea,
  body[data-page="timeline"] input,
  body[data-page="timeline"] textarea,
  body[data-page="settings"] input,
  body[data-page="settings"] textarea,
  body[data-page="profile"] input,
  body[data-page="profile"] textarea,
  body[data-page="landing"] input,
  body[data-page="landing"] textarea,
  body[data-page="subscription-manage"] input,
  body[data-page="subscription-manage"] textarea,
  body[data-page="subscription-plans"] input,
  body[data-page="subscription-plans"] textarea,
  body[data-page="contact"] input,
  body[data-page="contact"] textarea,
  body[data-page="terms"] input,
  body[data-page="terms"] textarea,
  body[data-page="privacy"] input,
  body[data-page="privacy"] textarea,
  body[data-page="help"] input,
  body[data-page="help"] textarea,
  body[data-page="messages"] .content-area *,
  body[data-page="documentation"] .content-area *,
  body[data-page="timeline"] .content-area *,
  body[data-page="settings"] .content-area *,
  body[data-page="profile"] .content-area *,
  body[data-page="landing"] .content-area *,
  body[data-page="subscription-manage"] .content-area *,
  body[data-page="subscription-plans"] .content-area *,
  body[data-page="contact"] .content-area *,
  body[data-page="terms"] .content-area *,
  body[data-page="privacy"] .content-area *,
  body[data-page="help"] .content-area * {
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
  }
}

/**
 * Codex Design System - Theme CSS Variables
 * 
 * This file defines CSS variables for light and dark mode themes.
 * Variables are accessible via var(--codex-variable-name) in component styles.
 */

:root {
  /* Light mode (default) */
  --codex-bg-primary: #ffffff;
  --codex-bg-secondary: #f8f9fa;
  --codex-bg-tertiary: #e9ecef;

  --codex-text-primary: #000000;
  --codex-text-secondary: #343a40;
  --codex-text-tertiary: #6c757d;

  --codex-border-light: #dee2e6;
  --codex-border-medium: #adb5bd;
  --codex-border-dark: #495057;

  --codex-accent: #f7931a; /* Bitcoin orange */
  --codex-accent-light: #ffbf69;
  --codex-accent-dark: #e67e22;

  --codex-success: #28a745;
  --codex-warning: #ffc107;
  --codex-error: #dc3545;
  --codex-info: #17a2b8;

  /* Icon colors */
  --codex-icon-primary: #000000;
  --codex-icon-secondary: #495057;
  --codex-icon-tertiary: #6c757d;
  --codex-icon-accent: #f7931a;

  /* Chart colors */
  --codex-chart-primary: #000000;
  --codex-chart-support: #006600;
  --codex-chart-declining: #990000;
  --codex-chart-recovering: #ff6600;
  --codex-chart-codex: #0066cc;
  --codex-chart-gdr: #339999;
  --codex-chart-price-trend: #ff6600;
  --codex-chart-rsi: #ff9900;
  --codex-chart-macd-line: #3366cc;
  --codex-chart-signal-line: #cc0000;
  --codex-chart-macd-positive: #33cc33;
  --codex-chart-macd-negative: #ff3333;
  --codex-chart-histogram: rgba(153, 153, 153, 0.25);

  /* Shadows */
  --codex-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --codex-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --codex-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);

  /* Typography */
  --codex-font-family:
    "Helvetica Neue", -apple-system, "Segoe UI", Roboto, Ubuntu, Avenir Next,
    system-ui, Courier New, monospace, sans-serif;

  /* Spacing */
  --codex-spacing-xs: 0.25rem;
  --codex-spacing-sm: 0.5rem;
  --codex-spacing-md: 1rem;
  --codex-spacing-lg: 1.5rem;
  --codex-spacing-xl: 2rem;

  /* Transitions */
  --codex-transition-fast: 150ms ease;
  --codex-transition-normal: 250ms ease;
  --codex-transition-slow: 350ms ease;
}

/* Dark mode */
[data-theme="dark"] {
  --codex-bg-primary: #121212;
  --codex-bg-secondary: #1e1e1e;
  --codex-bg-tertiary: #2d2d2d;

  --codex-text-primary: #ffffff;
  --codex-text-secondary: #e0e0e0;
  --codex-text-tertiary: #bdbdbd;

  --codex-border-light: #424242;
  --codex-border-medium: #616161;
  --codex-border-dark: #9e9e9e;

  --codex-accent: #f7931a; /* Bitcoin orange - unchanged */
  --codex-accent-light: #ffbb33;
  --codex-accent-dark: #cc7a14;

  --codex-success: #4caf50;
  --codex-warning: #ffc107;
  --codex-error: #f44336;
  --codex-info: #29b6f6;

  /* Icon colors */
  --codex-icon-primary: #ffffff;
  --codex-icon-secondary: #e0e0e0;
  --codex-icon-tertiary: #bdbdbd;
  --codex-icon-accent: #f7931a;

  /* Chart colors */
  --codex-chart-primary: #ffffff;
  --codex-chart-support: #4caf50;
  --codex-chart-declining: #f44336;
  --codex-chart-recovering: #ff9800;
  --codex-chart-codex: #42a5f5;
  --codex-chart-gdr: #26a69a;
  --codex-chart-price-trend: #ff9800;
  --codex-chart-rsi: #ffc107;
  --codex-chart-macd-line: #5c6bc0;
  --codex-chart-signal-line: #ef5350;
  --codex-chart-macd-positive: #66bb6a;
  --codex-chart-macd-negative: #ef5350;
  --codex-chart-histogram: rgba(153, 153, 153, 0.35);

  /* Shadows - darker and more intense */
  --codex-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
  --codex-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3);
  --codex-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4);
}

/* For proper theme flashing prevention, add this to your global CSS */
.theme-transition {
  transition:
    background-color var(--codex-transition-normal),
    color var(--codex-transition-normal),
    border-color var(--codex-transition-normal),
    box-shadow var(--codex-transition-normal);
}

/* Conditional drop shadow for icons and charts */
.icon-drop-shadow,
.chart-line {
  filter: drop-shadow(0px 0px 1px #ffffff);
}

[data-theme="dark"] .icon-drop-shadow,
[data-theme="dark"] .chart-line {
  filter: drop-shadow(0px 0px 1px #000000);
}

img[src*="logo-light.svg"],
img[src*="logo-dark.svg"] {
  width: 45px;
  height: 45px;
  cursor: pointer;
  transition:
    transform 0.1s ease-out,
    filter 0.2s ease-out;
}

/* Logo-light hover effect (white glow) */
img[src*="logo-light.svg"]:hover {
  transform: scale(1.02);
  filter: drop-shadow(0px 0px 1px #ffffff) drop-shadow(0px 0px 1px #fff);
}

/* Logo-dark hover effect (black depth shadow in dark theme) */
img[src*="logo-dark.svg"]:hover {
  transform: scale(1.02);
}

[data-theme="dark"] img[src*="logo-dark.svg"]:hover {
  filter: drop-shadow(0px 0px 1px #424242) drop-shadow(0px 0px 1px #424242);
}

/* Add click handler for logo */
img[src*="logo-light.svg"],
img[src*="logo-dark.svg"] {
  cursor: pointer;
}

img[src*="logo-light.svg"]:active,
img[src*="logo-dark.svg"]:active {
  transform: scale(0.98);
}