/**
 * TAC Editor - CSS Styles
 * Default theme: IntelliJ IDEA (Light/Darcula)
 * Uses CSS light-dark() for automatic theme switching based on color-scheme
 *
 * To customize colors, set CSS custom properties on :root or parent element:
 *   --tac-editor-bg, --tac-editor-text, --tac-editor-keyword, etc.
 *
 * Or load a theme file:
 *   <link rel="stylesheet" href="themes/vscode.css">
 *   <link rel="stylesheet" href="themes/monokai.css">
 */

/* Base reset - protect against inherited styles */
:host *, :host *::before, :host *::after {
  box-sizing: border-box;
  font: normal normal 14px/1.5 'Courier New', Consolas, Monaco, monospace;
  font-variant: normal;
  letter-spacing: 0;
  word-spacing: 0;
  text-transform: none;
  text-decoration: none;
  text-indent: 0;
}

:host {
  /* Color scheme - inherits from parent, falls back to system preference if not set */
  color-scheme: inherit;

  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
  height: 150px;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--tac-editor-border, light-dark(#c4c4c4, #515151));
}

/* Readonly mode */
:host([readonly]) .editor-wrapper::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(-45deg, rgba(128,128,128,0.08), rgba(128,128,128,0.08) 3px, transparent 3px, transparent 12px);
  z-index: 1;
}

:host([readonly]) .hidden-textarea { cursor: text; }

/* Waiting state - when editor is waiting for external provider */
.editor-content.waiting {
  pointer-events: none;
  opacity: 0.7;
}

.editor-content.waiting::after {
  content: '';
  position: absolute;
  inset: 0;
  background: light-dark(rgba(255,255,255,0.3), rgba(0,0,0,0.3));
  z-index: 10;
  cursor: wait;
}

/* User interaction waiting state - shows overlay with message */
.editor-content.waiting-user-interaction {
  pointer-events: none;
}

.editor-content.waiting-user-interaction::before {
  content: '';
  position: absolute;
  inset: 0;
  background: light-dark(rgba(128,128,128,0.3), rgba(128,128,128,0.4));
  z-index: 10;
}

.editor-content.waiting-user-interaction::after {
  content: attr(data-waiting-label) '\A Waiting for user input...';
  white-space: pre-wrap;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 11;
  text-align: center;
  font-size: 0.9rem;
  color: var(--tac-editor-text, light-dark(#333, #ccc));
  padding: 1rem;
}

.editor-content.waiting-user-interaction[data-waiting-label]::after {
  content: attr(data-waiting-label) '\A Waiting for user input...';
}

.editor-content.waiting-user-interaction:not([data-waiting-label])::after {
  content: 'Waiting for user input...';
}

.editor-content.waiting-user-interaction .cursor {
  display: none;
}

/* ========== Editor Wrapper ========== */
.editor-wrapper {
  position: relative;
  width: 100%;
  flex: 1;
  background: var(--tac-editor-bg, light-dark(#ffffff, #2b2b2b));
  display: flex;
  overflow: hidden;
}

/* ========== Editor Content ========== */
.editor-content {
  position: relative;
  flex: 1;
  overflow: hidden;
}

/* Hidden textarea for input capture (Monaco-style) */
.hidden-textarea {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  padding: 0;
  margin: 0;
  border: none;
  outline: none;
  resize: none;
  overflow: hidden;
  z-index: -1;
  pointer-events: none;
}

/* Viewport container with scroll */
.viewport {
  position: absolute;
  inset: 0;
  overflow: auto;
  padding: 8px 12px;
  overscroll-behavior: contain;
}

/* Scroll content - defines total scrollable height */
.scroll-content {
  position: relative;
  width: 100%;
}

/* Lines container - positioned via transform */
.lines-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  will-change: transform;
}

/* Single line */
.line {
  height: 21px; /* line-height * font-size = 1.5 * 14px */
  white-space: pre;
  display: block;
  position: relative;
  color: var(--tac-editor-text, light-dark(#000000, #a9b7c6));
}

/* Word wrap enabled - line height becomes dynamic */
.wrap-enabled .line {
  height: auto;
  min-height: 21px;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: break-word;
}

/* Current line highlight disabled - not useful for single-line TAC messages */
/* .line.current-line {
  background: var(--tac-editor-current-line, light-dark(rgba(0, 0, 0, 0.04), rgba(255, 255, 255, 0.04)));
} */

/* ========== Cursor ========== */
.cursor {
  position: absolute;
  width: 2px;
  height: 21px;
  background: var(--tac-editor-caret, light-dark(#333333, #d4d4d4));
  pointer-events: none;
  animation: blink 1s step-end infinite;
  z-index: 10;
}

@keyframes blink {
  50% { opacity: 0; }
}

/* ========== Selection ========== */
.selection {
  position: absolute;
  background: var(--tac-editor-selection, light-dark(rgba(173, 214, 255, 0.5), rgba(51, 153, 255, 0.4)));
  pointer-events: none;
  height: 21px;
}

/* ========== Editable Region Hint ========== */
.editable-hint {
  position: absolute;
  font-size: 0.65em;
  color: var(--tac-editor-hint, light-dark(rgba(0, 0, 0, 0.35), rgba(255, 255, 255, 0.35)));
  pointer-events: none;
  white-space: nowrap;
  z-index: 5;
  margin-top: 2px;
}

/* ========== Token Styling - 10 Generic Styles ========== */
/* Default theme: IntelliJ IDEA (Light/Darcula) */
.token {
  display: inline;
}

/* 1. keyword - Message identifiers, structural keywords */
.token-keyword { color: var(--tac-editor-keyword, light-dark(#0033b3, #cc7832)); font-weight: bold; }

/* 2. location - Geographic identifiers (ICAO, FIR, volcanoes, cyclones) */
.token-location { color: var(--tac-editor-location, light-dark(#00627a, #6897bb)); }

/* 3. datetime - Dates, times, validity periods */
.token-datetime { color: var(--tac-editor-datetime, light-dark(#1750eb, #6897bb)); }

/* 4. phenomenon - Weather phenomena, hazards */
.token-phenomenon { color: var(--tac-editor-phenomenon, light-dark(#871094, #9876aa)); }

/* 5. value - Numeric values (legacy, use measurement instead) */
.token-value { color: var(--tac-editor-value, light-dark(#067d17, #6a8759)); }

/* 5b. measurement - Observed/forecast weather measurements (wind, visibility, pressure, etc.) */
.token-measurement { color: var(--tac-editor-measurement, light-dark(#008080, #4ec9b0)); }

/* 5c. identifier - Reference numbers, sequence numbers */
.token-identifier { color: var(--tac-editor-identifier, light-dark(#6c6c6c, #9cdcfe)); }

/* 5d. unavailable - Missing data markers (/////, Q////, etc.) */
.token-unavailable { color: var(--tac-editor-unavailable, light-dark(#999999, #6a6a6a)); font-style: italic; }

/* 6. geometry - Coordinates, directions, zones */
.token-geometry { color: var(--tac-editor-geometry, light-dark(#94660c, #ffc66d)); }

/* 7. status - State, movement, evolution (OBS, FCST, MOV, STNR, NC, WKN, INTSF) */
.token-status { color: var(--tac-editor-status, light-dark(#0033b3, #cc7832)); }

/* 8. label - Template labels (VAA/TCA) */
.token-label { color: var(--tac-editor-label, light-dark(#8c8c8c, #808080)); }

/* 9. free-text - Free text content (VAA/TCA remarks) */
.token-free-text { color: var(--tac-editor-free-text, light-dark(#067d17, #6a8759)); font-style: italic; }

/* 10. trend - Change groups (BECMG, TEMPO, FM, PROB) */
.token-trend { color: var(--tac-editor-trend, light-dark(#0033b3, #cc7832)); font-weight: bold; }

/* ========== Special Token States ========== */

/* Semantic validation error - preserve original style, add wavy underline */
.token-error:not(.token-incomplete) {
  text-decoration: underline wavy;
  text-decoration-color: var(--tac-editor-error, light-dark(#d32f2f, #f48771));
  cursor: help;
}

/* Incomplete/missing token - error color with wavy underline */
.token-incomplete {
  color: var(--tac-editor-error, light-dark(#d32f2f, #f48771));
  text-decoration: underline wavy;
  text-decoration-color: var(--tac-editor-error, light-dark(#d32f2f, #f48771));
  cursor: help;
}

/* Warning state */
.token-warning {
  color: var(--tac-editor-warning, light-dark(#ff8c00, #ffd700));
  text-decoration: underline dotted;
}

/* Unknown token (fallback) */
.token-unknown {
  color: var(--tac-editor-text, light-dark(#000000, #a9b7c6));
}

/* Whitespace (preserve) */
.token-whitespace { /* preserve */ }

/* ========== Special Validity States ========== */

/* VALID period - green when future/ongoing */
.token-valid-future {
  color: var(--tac-editor-valid-future, light-dark(#28a745, #4ec9b0));
  font-weight: bold;
}

/* VALID period - orange when past/expired */
.token-valid-past {
  color: var(--tac-editor-valid-past, light-dark(#e67700, #ffa500));
  font-weight: bold;
}

/* CNL - strikethrough for cancelled messages */
.token-cnl {
  color: var(--tac-editor-keyword, light-dark(#0000ff, #569cd6));
  font-weight: bold;
}

/* Line containing CNL - strikethrough the entire message */
.line.line-cancelled {
  text-decoration: line-through;
  text-decoration-color: var(--tac-editor-error, light-dark(#d32f2f, #f48771));
}

/* ========== Suggestions Dropdown ========== */
.suggestions-container {
  position: fixed;
  z-index: 10000;
  background: var(--tac-editor-suggestion-bg, light-dark(#ffffff, #3c3f41));
  border: 1px solid var(--tac-editor-suggestion-border, light-dark(#c8c8c8, #454545));
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  max-height: 280px;
  max-width: 340px;
  min-width: 180px;
  overflow-y: auto;
  display: none;
}

.suggestions-container.visible {
  display: block;
}

.suggestion-item {
  padding: 6px 12px;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.suggestion-content {
  flex: 1;
  min-width: 0; /* Allow content to shrink for ellipsis */
  display: flex;
  flex-direction: column;
  gap: 1px;
}

/* Keyboard selection - darker blue */
.suggestion-item.selected {
  background: var(--tac-editor-suggestion-selected, light-dark(#0052cc, #4b6eaf));
}

.suggestion-item.selected * {
  color: #ffffff;
}

/* Mouse hover - lighter blue (only when not also keyboard selected) */
.suggestion-item:hover:not(.selected) {
  background: var(--tac-editor-suggestion-hover, light-dark(#e8e8e8, #2a2d2e));
}

/* When both hover and selected, show selected (darker) style */
.suggestion-item.selected:hover {
  background: var(--tac-editor-suggestion-selected, light-dark(#0052cc, #4b6eaf));
}

.suggestion-item.selected:hover * {
  color: #ffffff;
}

.suggestion-text {
  color: var(--tac-editor-suggestion-text, light-dark(#000000, #a9b7c6));
  font-family: inherit;
  /* Truncate long labels with ellipsis on single line */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.suggestion-desc {
  color: var(--tac-editor-suggestion-desc, light-dark(#717171, #858585));
  font-size: 0.85em;
  /* Allow description to wrap to multiple lines */
  white-space: normal;
  word-wrap: break-word;
}

.suggestion-arrow {
  font-size: 0.8em;
  opacity: 0.7;
  flex-shrink: 0;
  align-self: center;
}

.suggestion-item.category .suggestion-text {
  font-weight: bold;
}

/* Disabled/non-selectable suggestions (e.g., messages like "Loading timeout...") */
.suggestion-item.disabled {
  cursor: default;
  opacity: 0.6;
  font-style: italic;
}

.suggestion-item.disabled:hover {
  background: transparent;
}

.suggestion-item.back-nav {
  padding: 3px 12px;
  font-style: italic;
  font-size: 0.85em;
  border-bottom: 1px solid var(--tac-editor-suggestion-border, light-dark(#c8c8c8, #454545));
}

.suggestion-item.back-nav .suggestion-text {
  color: var(--tac-editor-suggestion-desc, light-dark(#717171, #858585));
}

.suggestion-item.back-nav .suggestion-text::before {
  content: '←';
  display: inline-block;
  margin-right: 0.4em;
  transform: translateY(-2px);
}

.suggestion-item.back-nav .suggestion-desc {
  display: none;
}

.suggestion-filter {
  padding: 4px 12px;
  font-size: 0.8em;
  color: var(--tac-editor-keyword, light-dark(#0000ff, #569cd6));
  font-weight: bold;
  border-bottom: 1px solid var(--tac-editor-suggestion-border, light-dark(#c8c8c8, #454545));
  background: var(--tac-editor-suggestion-bg, light-dark(#ffffff, #3c3f41));
}

/* ========== Suggestions Loading State ========== */
.suggestion-item.loading .spinner {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid var(--tac-editor-suggestion-border, light-dark(#c8c8c8, #454545));
  border-top-color: var(--tac-editor-keyword, light-dark(#0000ff, #569cd6));
  border-radius: 50%;
  animation: tac-spinner 0.6s linear infinite;
  vertical-align: middle;
  margin-right: 0.3rem;
}

@keyframes tac-spinner {
  to { transform: rotate(360deg); }
}

/* ========== Header Bar ========== */
.header-bar {
  display: flex;
  flex-shrink: 0;
  background: var(--tac-editor-header-bg, light-dark(#f5f5f5, #252526));
  border-bottom: 1px solid var(--tac-editor-border, light-dark(#e0e0e0, #3c3c3c));
  position: relative;
}

.header-type {
  flex: 0 1 auto;
  padding: 4px 12px;
  color: var(--tac-editor-text, light-dark(#000000, #a9b7c6));
  background: transparent;
  user-select: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0.6;
}

.header-spacer {
  flex: 1;
}

/* ========== Template Mode Exit Button ========== */
.template-exit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--tac-editor-border, light-dark(#c4c4c4, #515151));
  color: var(--tac-editor-text, light-dark(#000000, #a9b7c6));
  cursor: pointer;
  font-size: 10px;
  width: 16px;
  height: 16px;
  padding: 0;
  margin-left: 8px;
  border-radius: 3px;
  opacity: 0.5;
  transition: opacity 0.2s, background 0.2s, border-color 0.2s;
  vertical-align: middle;
  line-height: 1;
}

.template-exit-btn:hover {
  opacity: 1;
  background: var(--tac-editor-error-bg, light-dark(#ffebee, #3c1f1f));
  border-color: var(--tac-editor-error, light-dark(#d32f2f, #f48771));
  color: var(--tac-editor-error, light-dark(#d32f2f, #f48771));
}

/* Template mode: label column styling (read-only visual) */
.template-label {
  color: var(--tac-editor-label, light-dark(#6e6e6e, #808080));
  user-select: none;
}

.info-btn {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: var(--tac-editor-text, light-dark(#000000, #a9b7c6));
  opacity: 0.15;
  cursor: pointer;
  font-size: 0.7rem;
  width: 1rem;
  height: 1rem;
  padding: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s;
  font-family: sans-serif;
}

.info-btn:hover {
  opacity: 0.5;
}

/* ========== Footer Bar ========== */
.footer-bar {
  display: flex;
  flex-shrink: 0;
  background: var(--tac-editor-footer-bg, light-dark(#f5f5f5, #252526));
  border-top: 1px solid var(--tac-editor-border, light-dark(#e0e0e0, #3c3c3c));
  position: relative;
}

.footer-info {
  flex: 1;
  padding: 4px 12px;
  color: var(--tac-editor-text, light-dark(#000000, #a9b7c6));
  background: transparent;
  user-select: none;
  white-space: pre-wrap;
  opacity: 0.6;
}

.footer-info.valid {
  color: var(--tac-editor-valid, light-dark(#28a745, #4ec9b0));
  opacity: 0.8;
}

.footer-info.invalid {
  color: var(--tac-editor-invalid, light-dark(#dc3545, #f48771));
  opacity: 0.8;
}

.footer-clear {
  background: transparent;
  border: none;
  color: var(--tac-editor-text, light-dark(#000000, #a9b7c6));
  cursor: pointer;
  padding: 4px 8px;
  font-size: 0.85rem;
  opacity: 0.4;
  transition: opacity 0.2s;
}

.footer-clear:hover {
  opacity: 1;
}

/* ========== Info Popup ========== */
.info-popup {
  display: none;
  position: absolute;
  top: 2rem;
  right: 0.5rem;
  z-index: 1000;
  background: var(--tac-editor-bg, light-dark(#ffffff, #2b2b2b));
  border: 1px solid var(--tac-editor-border, light-dark(#c4c4c4, #515151));
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  padding: 12px 16px;
  min-width: 200px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.info-popup.visible {
  display: block;
}

.info-popup-content {
  text-align: center;
}

.info-popup-title {
  font-weight: bold;
  font-size: 13px;
  color: var(--tac-editor-text, light-dark(#000000, #a9b7c6));
  margin-bottom: 4px;
}

.info-popup-version {
  display: block;
  font-size: 11px;
  color: var(--tac-editor-text, light-dark(#000000, #a9b7c6));
  opacity: 0.6;
  margin-bottom: 8px;
  text-decoration: none;
}
.info-popup-version:hover {
  opacity: 1;
  text-decoration: underline !important;
}

.info-popup-copyright {
  font-size: 10px;
  color: var(--tac-editor-text, light-dark(#000000, #a9b7c6));
  opacity: 0.5;
}

/* ========== Scrollbar ========== */
.viewport::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

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

.viewport::-webkit-scrollbar-thumb {
  background: var(--tac-editor-scrollbar, light-dark(rgba(0,0,0,0.2), rgba(255,255,255,0.2)));
  border-radius: 4px;
}

.viewport::-webkit-scrollbar-thumb:hover {
  background: var(--tac-editor-scrollbar-hover, light-dark(rgba(0,0,0,0.4), rgba(255,255,255,0.4)));
}

/* ========== Inline Controls (for future use) ========== */
.inline-control {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin: 0 2px;
  padding: 1px 4px;
  background: rgba(128, 128, 128, 0.2);
  border: 1px solid var(--tac-editor-border, light-dark(#c4c4c4, #515151));
  border-radius: 3px;
  cursor: pointer;
  font-size: 0.9em;
}

.inline-control:hover {
  background: var(--tac-editor-suggestion-selected, light-dark(#0052cc, #4b6eaf));
  color: #ffffff;
}

.inline-control.map-control {
  color: var(--tac-editor-geometry, light-dark(#795e26, #dcdcaa));
}