/* ============================================================================
 * EthoVision design tokens — ported verbatim from Viso global.css
 * (monorepo-aurora/aurora/apps/viso-app/frontend/src/styles/global.css)
 * Plain, framework-agnostic CSS. Custom properties pierce shadow DOM, so every
 * web component reads these tokens for free.
 * ==========================================================================*/

html,
body {
  margin: 0;
}

* {
  box-sizing: border-box;
}

:root {
  /* Static colors - don't change in dark mode */
  --static-white: #ffffff;
  --static-black: #1f1f1f;

  /* Grayscale */
  --white: #ffffff;
  --gray-50: #f7f7f8;
  --gray-100: #eeeef0;
  --gray-200: #dadadd;
  --gray-300: #b9b9c0;
  --gray-400: #93949d;
  --gray-500: #767781;
  --gray-600: #5f5f6a;
  --gray-700: #52525b;
  --gray-800: #434349;
  --gray-900: #3a3a40;
  --gray-950: #27272a;
  --black: #1f1f1f;

  /* Red */
  --pal-0-100: #fee2e2;
  --pal-0-200: #fecaca;
  --pal-0-600: #dc2626;

  /* Pink */
  --pal-1-100: #fce7f3;
  --pal-1-200: #fbcfe8;
  --pal-1-600: #db2777;

  /* Fuchsia */
  --pal-2-100: #fae8ff;
  --pal-2-200: #f5d0fe;
  --pal-2-600: #c026d3;

  /* Purple */
  --pal-3-100: #f3e8ff;
  --pal-3-200: #e9d5ff;
  --pal-3-600: #9333ea;

  /* Violet */
  --pal-4-100: #ede9fe;
  --pal-4-200: #ddd6fe;
  --pal-4-600: #7c3aed;

  /* Indigo */
  --pal-5-100: #e0e7ff;
  --pal-5-200: #c7d2fe;
  --pal-5-600: #4f46e5;

  /* Blue */
  --pal-6-100: #dbeafe;
  --pal-6-200: #bfdbfe;
  --pal-6-600: #2563eb;

  /* Sky */
  --pal-7-100: #e0f2fe;
  --pal-7-200: #bae6fd;
  --pal-7-600: #0284c7;

  /* Cyan */
  --pal-8-100: #cffafe;
  --pal-8-200: #a5f3fc;
  --pal-8-600: #0891b2;

  /* Teal */
  --pal-9-100: #ccfbf1;
  --pal-9-200: #99f6e4;
  --pal-9-600: #0d9488;

  /* Emerald */
  --pal-a-100: #d1fae5;
  --pal-a-200: #a7f3d0;
  --pal-a-600: #059669;

  /* Green */
  --pal-b-100: #dcfce7;
  --pal-b-200: #bbf7d0;
  --pal-b-600: #16a34a;

  /* Lime */
  --pal-c-100: #ecfccb;
  --pal-c-200: #d9f99d;
  --pal-c-600: #65a30d;

  /* Yellow */
  --pal-d-100: #fef9c3;
  --pal-d-200: #fef08a;
  --pal-d-600: #ca8a04;

  /* Amber */
  --pal-e-100: #fef3c7;
  --pal-e-200: #fde68a;
  --pal-e-600: #d97706;

  /* Orange */
  --pal-f-100: #ffedd5;
  --pal-f-200: #fed7aa;
  --pal-f-600: #ea580c;

  /* Primary */
  --primary: #216459;
  --on-primary: var(--white);
  --primary-hover: #257c6d;
  --on-primary-hover: var(--white);
  --primary-pressed: #1a5047;
  --on-primary-pressed: var(--white);

  /* Secondary */
  --secondary: #cce8e2;
  --on-secondary: var(--primary-pressed);
  --secondary-hover: #b3dcd4;
  --on-secondary-hover: var(--primary-pressed);
  --secondary-pressed: #85c3b9;
  --on-secondary-pressed: var(--primary-pressed);

  /* Primary Container */
  --primary-container: var(--secondary);
  --on-primary-container: var(--primary-pressed);
  --primary-container-hover: var(--secondary-hover);
  --on-primary-container-hover: var(--primary-pressed);
  --primary-container-pressed: var(--secondary-pressed);
  --on-primary-container-pressed: var(--primary-pressed);

  /* Secondary Container */
  --secondary-container: #b3f3eb;
  --on-secondary-container: #174a4a;
  --secondary-container-hover: #67e1d6;
  --on-secondary-container-hover: var(--on-secondary-container);
  --secondary-container-pressed: #38c9c1;
  --on-secondary-container-pressed: var(--on-secondary-container);

  /* Warning */
  --warning: #a38207;
  --on-warning: var(--white);
  --warning-container: #fef8df;
  --on-warning-container: var(--warning);

  /* Success */
  --success: var(--primary);
  --on-success: var(--white);
  --success-container: #B3F3EB;
  --on-success-container: #216459;

  /* Error */
  --error: #ba1a1a;
  --on-error: var(--white);
  --error-container: #FFDFDF;
  --on-error-container: var(--error);

  /* Info */
  --info: #2563eb;
  --on-info: var(--white);
  --info-container: #e7efff;
  --on-info-container: #1e40af;

  /* Connection quality */
  --color-quality-excellent: #22c55e;
  --color-quality-good: #22c55e;
  --color-quality-poor: #eab308;
  --color-quality-lost: #ef4444;

  /* Outlines */
  --outline-light: #dee9e6;
  --outline-dark: #bec9c5;
  --outline-dark-2: #85C3B9;

  /* Surfaces */
  --surface-lowest: var(--white);
  --surface-low: #fcfdfd;
  --surface: #f8faf9;
  --surface-high: #f5f7f7;
  --surface-highest: #f1f4f3;
  --surface-green: var(--outline-light);
  --on-surface: #161d1b;

  /* Dashed "add new" gradient */
  --gradient-new: linear-gradient(105.86deg, var(--surface) 3.37%, color-mix(in srgb, var(--primary-container) 30%, var(--surface)) 25.68%, var(--surface-high) 67.8%, color-mix(in srgb, var(--primary-container) 30%, var(--surface)) 97.09%);
  --gradient-new-hover: linear-gradient(105.86deg, var(--surface-high) 3.37%, color-mix(in srgb, var(--primary-container) 40%, var(--surface)) 25.68%, var(--surface-highest) 67.8%, color-mix(in srgb, var(--primary-container) 40%, var(--surface)) 97.09%);

  /* Destructive action — always high-contrast red for white text */
  --destructive: #ba1a1a;
  --destructive-hover: #dc2626;
  --destructive-pressed: #991b1b;

  /* Static overlay colors - don't change in dark mode */
  --video-overlay: rgba(0, 0, 0, 0.5);
  --video-overlay-dark: rgba(0, 0, 0, 0.7);
  --video-overlay-darker: rgba(0, 0, 0, 0.8);
  --video-overlay-gradient: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
  --video-border-light: rgba(255, 255, 255, 0.2);
  --video-text-muted: rgba(255, 255, 255, 0.6);

  /* Shadows */
  --shadow-color: rgba(0, 0, 0, 0.1);
  --shadow-color-md: rgba(0, 0, 0, 0.15);

  /* Layout */
  --header-height: 56px;
  --sidebar-width: 80px;
  --button-height: 40px;

  /* Radius */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 40px;

  /* Spacing */
  --space-sm: 4px;
  --space-md: 8px;
  --space-lg: 16px;
  --space-xl: 32px;

  /* Branding */
  --Schemes-Texts-Brand-Brand: #216459;

  /* Recording */
  --recording: #FF1717;
  --recording-container: #F0E0E0;
}

/* Dark mode: follow user OS preference by default */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;

    --white: #27272a;
    --gray-50: #3a3a40;
    --gray-100: #434349;
    --gray-200: #52525b;
    --gray-300: #5f5f6a;
    --gray-400: #767781;
    --gray-500: #93949d;
    --gray-600: #b9b9c0;
    --gray-700: #dadadd;
    --gray-800: #eeeef0;
    --gray-900: #f7f7f8;
    --gray-950: #ffffff;
    --black: var(--gray-950);

    --primary: #76d2bc;
    --on-primary: var(--static-black);
    --primary-hover: #91dbc9;
    --on-primary-hover: var(--static-black);
    --primary-pressed: #6abda9;
    --on-primary-pressed: var(--static-black);

    --secondary: #257c6d;
    --on-secondary: var(--black);
    --secondary-hover: #319b87;
    --on-secondary-hover: var(--black);
    --secondary-pressed: #216459;
    --on-secondary-pressed: var(--black);

    --primary-container: var(--secondary-pressed);
    --on-primary-container: #cce8e2;
    --primary-container-hover: #00776a;
    --on-primary-container-hover: var(--black);
    --primary-container-pressed: #009783;
    --on-primary-container-pressed: var(--black);

    --secondary-container: #61a094;
    --on-secondary-container: var(--black);
    --secondary-container-hover: #8abeb3;
    --on-secondary-container-hover: var(--black);
    --secondary-container-pressed: #b6d9d0;
    --on-secondary-container-pressed: var(--secondary-pressed);

    --warning: #fef8df;
    --on-warning: var(--static-black);
    --warning-container: #7f6502;
    --on-warning-container: var(--black);

    --success: var(--primary);
    --on-success: var(--static-black);
    --success-container: #61A094;
    --on-success-container: #FFFFFF;

    --error: #fee2e2;
    --on-error: #93000a;
    --error-container: #93000A;
    --on-error-container: var(--error);

    --outline-light: #3f4946;
    --outline-dark: #899390;
    --outline-dark-2: #216459;

    --surface-lowest: #161717;
    --surface-low: #212323;
    --surface: #2c2f2e;
    --surface-high: #383a3a;
    --surface-highest: #434645;
    --surface-green: #4d5d59;
    --on-surface: #dee9e6;

    --Schemes-Texts-Brand-Brand: #FFFFFF;

    --recording: #FF1717;
    --recording-container: #500000;
  }
}

/* Explicit dark theme override */
:root[data-theme="dark"] {
  color-scheme: dark;

  --white: #27272a;
  --gray-50: #3a3a40;
  --gray-100: #434349;
  --gray-200: #52525b;
  --gray-300: #5f5f6a;
  --gray-400: #767781;
  --gray-500: #93949d;
  --gray-600: #b9b9c0;
  --gray-700: #dadadd;
  --gray-800: #eeeef0;
  --gray-900: #f7f7f8;
  --gray-950: #ffffff;
  --black: var(--gray-950);

  --primary: #76d2bc;
  --on-primary: var(--static-black);
  --primary-hover: #91dbc9;
  --on-primary-hover: var(--static-black);
  --primary-pressed: #6abda9;
  --on-primary-pressed: var(--static-black);

  --secondary: #257c6d;
  --on-secondary: var(--black);
  --secondary-hover: #319b87;
  --on-secondary-hover: var(--black);
  --secondary-pressed: #216459;
  --on-secondary-pressed: var(--black);

  --primary-container: var(--secondary-pressed);
  --on-primary-container: #cce8e2;
  --primary-container-hover: #00776a;
  --on-primary-container-hover: var(--black);
  --primary-container-pressed: #009783;
  --on-primary-container-pressed: var(--black);

  --secondary-container: #61a094;
  --on-secondary-container: var(--black);
  --secondary-container-hover: #8abeb3;
  --on-secondary-container-hover: var(--black);
  --secondary-container-pressed: #b6d9d0;
  --on-secondary-container-pressed: var(--secondary-pressed);

  --warning: #fef8df;
  --on-warning: var(--static-black);
  --warning-container: #7f6502;
  --on-warning-container: var(--black);

  --success: var(--primary);
  --on-success: var(--static-black);
  --success-container: var(--secondary-pressed);
  --on-success-container: var(--black);

  --error: #fee2e2;
  --on-error: #93000a;
  --error-container: #93000A;
  --on-error-container: var(--error);

  --info: #93b4ff;
  --on-info: var(--static-black);
  --info-container: #1e3a5f;
  --on-info-container: #cfe0ff;

  --outline-light: #3f4946;
  --outline-dark: #899390;

  --surface-lowest: #161717;
  --surface-low: #212323;
  --surface: #2c2f2e;
  --surface-high: #383a3a;
  --surface-highest: #434645;
  --surface-green: #4d5d59;
  --on-surface: #dee9e6;

  --Schemes-Texts-Brand-Brand: #FFFFFF;
}

html {
  background: var(--surface-low);
  overflow-x: hidden;
}

body {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  color: var(--black);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ---- Form controls (light + dark) — styled to match button size/padding ---- */
input[type="text"],
input[type="search"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="color"],
input[type="date"],
input[type="time"],
select,
textarea,
.input-field {
  background-color: var(--white);
  color: var(--black);
  border: 1px solid var(--outline-light);
  border-radius: var(--radius-sm);
  padding: 0 calc(var(--button-height) / 2 - 4px);
  height: var(--button-height);
  font: inherit;
  font-size: 1rem;
  color-scheme: light dark;
}

textarea {
  height: auto;
  min-height: calc(var(--button-height) * 2);
  padding: calc(var(--button-height) / 4) calc(var(--button-height) / 2 - 4px);
}

input[type="search"] {
  border-radius: calc(var(--button-height) / 2);
}

input::placeholder,
textarea::placeholder,
.input-field-placeholder {
  color: color-mix(in srgb, var(--black), var(--white) 55%);
}

select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'%3E%3Cpath fill='%236b7280' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right calc(var(--button-height) / 2 - 10px) center;
  padding-right: calc(var(--button-height) / 2 + 16px);
  cursor: pointer;
}

input:focus,
select:focus,
textarea:focus,
.input-field:focus-within {
  outline: 2px solid var(--outline-dark-2);
  outline-offset: -1px;
  border-color: var(--outline-dark-2);
}

input[type="text"]:disabled,
input[type="search"]:disabled,
input[type="number"]:disabled,
input[type="email"]:disabled,
input[type="password"]:disabled,
input[type="url"]:disabled,
input[type="date"]:disabled,
input[type="time"]:disabled,
select:disabled,
textarea:disabled,
.input-field.disabled {
  border: 1px dashed var(--outline-light);
  cursor: not-allowed;
}

input[type="color"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: var(--button-height);
  height: var(--button-height);
  padding: 0;
  border-radius: 50%;
  background-color: var(--white) !important;
  overflow: hidden;
  cursor: pointer;
}

input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
input[type="color"]::-webkit-color-swatch { border: none; border-radius: 9999px; }
input[type="color"]::-moz-color-swatch { border: none; border-radius: 9999px; }

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.form-group > label {
  font-weight: 500;
  font-size: 14px;
  color: var(--black);
}

/* Checkbox + radio */
input[type="checkbox"],
input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 2px solid var(--primary);
  background-color: var(--white);
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
  flex-shrink: 0;
  position: relative;
}

input[type="checkbox"] { border-radius: var(--radius-xs); }
input[type="radio"] { border-radius: 50%; }

input[type="checkbox"]:focus,
input[type="radio"]:focus {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

input[type="checkbox"]:checked,
input[type="radio"]:checked {
  border-color: var(--primary);
  background-color: var(--primary);
}

input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5px;
  height: 9px;
  border: solid var(--static-white);
  border-width: 0 2px 2px 0;
  transform: translate(-50%, -60%) rotate(45deg);
}

input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--static-white);
}

input[type="checkbox"]:disabled,
input[type="radio"]:disabled {
  border-color: var(--outline-light);
  background-color: var(--surface);
  cursor: not-allowed;
  opacity: 0.6;
}

/* Spinner animation */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.spin { animation: spin 1s linear infinite; }

/* Visually hidden but accessible to screen readers */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

*:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* ============================================================================
 * App-shell base layout — ported from Viso Document.astro is:global block.
 * These target the host page (light DOM); component internals live in shadow DOM.
 * ==========================================================================*/
body {
  margin: 0;
  height: 100vh;
  overflow: hidden;
}

/* ============================================================================
 * Light-DOM component styles (etho-search-input renders into light DOM so the
 * global form-control styles above apply).
 * ==========================================================================*/
etho-search-input {
  display: block;
}
.etho-search__wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.etho-search__icon {
  position: absolute;
  left: calc(var(--button-height) / 2 - 10px);
  color: var(--primary);
  pointer-events: none;
  display: inline-flex;
}
.etho-search__input {
  width: 100%;
  padding-left: calc(var(--button-height) / 2 + 16px);
}