/**
 * =============================================================================
 * PROJECT WINDOW STYLES
 * =============================================================================
 * 
 * Unified CSS for dockable/floating project windows (Journal, Goals, Gains).
 * Uses KNOMAD CSS variables for theme consistency.
 * 
 * CLASSES:
 *   .project-window       - Base window container
 *   .pw--floating         - Floating mode (draggable, resizable)
 *   .pw--docked           - Docked mode (inside folder bento)
 *   .pw--minimized        - Collapsed to header only
 *   .pw--dragging         - During drag operation
 *   .pw--resizing         - During resize operation
 */

/* =============================================================================
   BASE WINDOW
   ============================================================================= */
.project-window {
  display: flex;
  flex-direction: column;
  background: var(--dark-bg-1-solid, rgba(15, 25, 35, 0.98));
  border: 1px solid var(--cyan-30, rgba(0, 200, 255, 0.3));
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  overflow: hidden;
  z-index: 10000;
}

/* =============================================================================
   HEADER
   ============================================================================= */
.pw-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--dark-bg-2, rgba(25, 35, 45, 0.95));
  border-bottom: 1px solid var(--cyan-20, rgba(0, 200, 255, 0.2));
  user-select: none;
}

.pw-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary, #fff);
  letter-spacing: 0.3px;
}

.pw-controls {
  display: flex;
  gap: 6px;
}

.pw-btn {
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--cyan-25, rgba(0, 200, 255, 0.25));
  border-radius: 4px;
  background: var(--cyan-10, rgba(0, 200, 255, 0.1));
  color: var(--text-secondary, rgba(255, 255, 255, 0.85));
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.pw-btn:hover {
  background: var(--cyan-20, rgba(0, 200, 255, 0.2));
  border-color: var(--cyan-40, rgba(0, 200, 255, 0.4));
  color: var(--text-primary, #fff);
}

.pw-btn--close:hover {
  background: rgba(255, 68, 68, 0.2);
  border-color: rgba(255, 68, 68, 0.4);
  color: #ff6666;
}

/* =============================================================================
   CONTENT
   ============================================================================= */
.pw-content {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  font-size: 12px;
  color: var(--text-secondary, rgba(255, 255, 255, 0.85));
}

/* =============================================================================
   RESIZE HANDLE
   ============================================================================= */
.pw-resize-handle {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 16px;
  height: 16px;
  cursor: se-resize;
  background: linear-gradient(135deg, transparent 50%, var(--cyan-30, rgba(0, 200, 255, 0.3)) 50%);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.project-window:hover .pw-resize-handle {
  opacity: 1;
}

/* =============================================================================
   FLOATING STATE
   ============================================================================= */
.pw--floating {
  position: fixed;
  min-width: 280px;
  min-height: 200px;
}

.pw--floating .pw-header {
  cursor: move;
}

.pw--floating.pw--dragging {
  opacity: 0.9;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);
}

.pw--floating.pw--resizing {
  opacity: 0.95;
}

/* =============================================================================
   DOCKED STATE
   ============================================================================= */
.pw--docked {
  position: relative;
  width: 100%;
  max-height: 350px;
  border-radius: 0;
  box-shadow: none;
  border: none;
  border-top: 1px solid var(--cyan-20, rgba(0, 200, 255, 0.2));
}

.pw--docked .pw-header {
  cursor: default;
}

.pw--docked .pw-resize-handle {
  display: none;
}

.pw--docked .pw-btn--dock {
  display: none;
}

/* =============================================================================
   MINIMIZED STATE
   ============================================================================= */
.pw--minimized .pw-content,
.pw--minimized .pw-resize-handle {
  display: none;
}

.pw--minimized {
  height: auto !important;
}

/* Focus flash animation */
.pw--focus {
  animation: pwFocusFlash 0.2s ease;
}

@keyframes pwFocusFlash {
  0%,
  100% {
    border-color: var(--cyan-30, rgba(0, 200, 255, 0.3));
  }
  50% {
    border-color: var(--cyan, rgb(0, 200, 255));
  }
}

/* =============================================================================
   ORACLE EDIT SESSION STYLES
   ============================================================================= */
.oes-empty {
  text-align: center;
  color: var(--text-muted, rgba(255, 255, 255, 0.5));
  padding: 24px;
  font-style: italic;
}

.oes-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.oes-section-header {
  font-size: 11px;
  font-weight: 700;
  color: var(--cyan, rgb(0, 200, 255));
  padding: 4px 8px;
  background: var(--cyan-10, rgba(0, 200, 255, 0.1));
  border-radius: 4px;
  margin-bottom: 6px;
}

.oes-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px;
  background: var(--dark-bg-2, rgba(25, 35, 45, 0.9));
  border: 1px solid var(--cyan-20, rgba(0, 200, 255, 0.2));
  border-radius: 6px;
}

.oes-item--accepted {
  border-left: 3px solid #4caf50;
  opacity: 0.7;
}

.oes-item--rejected {
  border-left: 3px solid #f44336;
  opacity: 0.5;
}

.oes-checkbox input {
  margin: 0;
  cursor: pointer;
}

.oes-diff {
  flex: 1;
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: 11px;
}

.oes-field {
  color: var(--text-secondary, rgba(255, 255, 255, 0.85));
  margin-bottom: 4px;
}

.oes-old {
  color: #ff6b6b;
  background: rgba(255, 107, 107, 0.1);
  padding: 2px 6px;
  border-radius: 3px;
}

.oes-new {
  color: #69db7c;
  background: rgba(105, 219, 124, 0.1);
  padding: 2px 6px;
  border-radius: 3px;
  margin-top: 2px;
}

.oes-reason {
  font-family: var(--font-family, sans-serif);
  font-size: 10px;
  color: var(--text-muted, rgba(255, 255, 255, 0.5));
  margin-top: 6px;
  font-style: italic;
}

.oes-actions {
  display: flex;
  gap: 4px;
}

.oes-btn {
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid var(--cyan-30, rgba(0, 200, 255, 0.3));
  border-radius: 4px;
  background: var(--cyan-15, rgba(0, 200, 255, 0.15));
  color: var(--text-primary, #fff);
  cursor: pointer;
  transition: all 0.15s ease;
}

.oes-btn:hover {
  background: var(--cyan-25, rgba(0, 200, 255, 0.25));
}

.oes-btn--accept {
  background: rgba(76, 175, 80, 0.15);
  border-color: rgba(76, 175, 80, 0.3);
}

.oes-btn--accept:hover {
  background: rgba(76, 175, 80, 0.3);
}

.oes-btn--reject,
.oes-btn--danger {
  background: rgba(244, 67, 54, 0.15);
  border-color: rgba(244, 67, 54, 0.3);
}

.oes-btn--reject:hover,
.oes-btn--danger:hover {
  background: rgba(244, 67, 54, 0.3);
}

.oes-batch {
  display: flex;
  gap: 8px;
  padding-top: 12px;
  margin-top: 12px;
  border-top: 1px solid var(--cyan-15, rgba(0, 200, 255, 0.15));
}

.oes-btn--batch {
  flex: 1;
  padding: 8px;
}

.oes-status {
  font-size: 10px;
  text-transform: uppercase;
  color: var(--text-muted, rgba(255, 255, 255, 0.5));
}

/* =============================================================================
   FOLDER MENU (THREE-DOT) STYLES
   ============================================================================= */
/* =============================================================================
   TOOL HEADER BUTTON SYSTEM (Reusable Pattern)
   Unified sizing for all tool header action buttons (menu, close, new, etc.)
   Based on 8-point grid: 24px touch target, 6px padding, 12px icon

   USE THIS CLASS: .tool-header-btn for any header button across KNOMAD tools
   ============================================================================= */

/* Universal tool header button DNA - reusable across all modals/panels */
.tool-header-btn {
  /* Box model: 24x24 touch target */
  width: 24px;
  height: 24px;
  padding: 0;

  /* Typography: 12px icon, centered */
  font-size: 12px;
  font-weight: 600;
  line-height: 24px;
  text-align: center;

  /* Appearance */
  background: var(--dark-bg-2, rgba(25, 35, 45, 0.6));
  border: 1px solid var(--cyan-20, rgba(0, 200, 255, 0.2));
  border-radius: 4px;
  color: var(--text-secondary, rgba(255, 255, 255, 0.7));
  cursor: pointer;

  /* Transitions */
  transition: all 0.15s ease;

  /* Flexbox centering for multi-char icons */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Default hover: cyan glow */
.tool-header-btn:hover {
  background: var(--cyan-15, rgba(0, 200, 255, 0.15));
  border-color: var(--cyan-40, rgba(0, 200, 255, 0.4));
  color: var(--cyan, rgb(0, 200, 255));
}

/* Danger variant: red glow for close/destructive actions */
.tool-header-btn--danger:hover {
  background: rgba(255, 68, 68, 0.15);
  border-color: rgba(255, 68, 68, 0.4);
  color: var(--gt-danger, #ff6666);
}

/* Success variant: green glow for positive actions */
.tool-header-btn--success:hover {
  background: rgba(50, 205, 50, 0.15);
  border-color: rgba(50, 205, 50, 0.4);
  color: #5f5;
}

/* Focus states for keyboard navigation (WCAG AAA) */
.tool-header-btn:focus-visible {
  outline: 2px solid var(--cyan, rgb(0, 200, 255));
  outline-offset: 2px;
}

.tool-header-btn--danger:focus-visible {
  outline-color: var(--gt-danger, #ff6666);
}

.tool-header-btn--success:focus-visible {
  outline-color: #5f5;
}

/* Disabled state */
.tool-header-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* =============================================================================
   FOLDER HEADER BUTTON SYSTEM (extends .tool-header-btn)
   Specific positioning for folder action buttons (menu, close)
   ============================================================================= */

.profile-folder {
  position: relative;
}

/* Folder buttons extend the universal DNA with positioning */
.folder-menu-btn,
.on-deck-close {
  /* Inherit universal button DNA */
  width: 24px;
  height: 24px;
  padding: 0;
  font-size: 12px;
  font-weight: 600;
  line-height: 24px;
  text-align: center;
  background: var(--dark-bg-2, rgba(25, 35, 45, 0.6));
  border: 1px solid var(--cyan-20, rgba(0, 200, 255, 0.2));
  border-radius: 4px;
  color: var(--text-secondary, rgba(255, 255, 255, 0.7));
  cursor: pointer;
  transition: all 0.15s ease;
  z-index: 20;
}

/* Desktop: absolute positioning (excluded in mobile-app) */
:not(.mobile-app) .folder-menu-btn,
:not(.mobile-app) .on-deck-close {
  position: absolute;
  top: 6px;
}

/* Menu button (⋮) - positioned left of close button in on-deck, or alone in Tesseract */
.folder-menu-btn {
  right: 6px;
}

/* On-deck: menu button shifts left to make room for close button */
.on-deck-folder-container .folder-menu-btn {
  right: 34px; /* 6px + 24px button + 4px gap */
}

/* Close button (×) - on-deck only, rightmost */
.on-deck-folder-container .on-deck-close {
  right: 6px;
  z-index: 21;
}

/* Hover states - unified glow effect */
.folder-menu-btn:hover,
.on-deck-close:hover {
  background: var(--cyan-15, rgba(0, 200, 255, 0.15));
  border-color: var(--cyan-40, rgba(0, 200, 255, 0.4));
  color: var(--cyan, rgb(0, 200, 255));
}

/* Close button danger hover */
.on-deck-close:hover {
  background: rgba(255, 68, 68, 0.15);
  border-color: rgba(255, 68, 68, 0.4);
  color: var(--gt-danger, #ff6666);
}

.folder-context-menu {
  background: var(--dark-bg-1, rgba(15, 25, 35, 0.98));
  border: 1px solid var(--cyan-30, rgba(0, 200, 255, 0.3));
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  min-width: 180px;
  padding: 6px 0;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.folder-menu-section {
  font-size: 10px;
  font-weight: 700;
  color: var(--cyan, rgb(0, 200, 255));
  padding: 6px 12px 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Reset all inherited btn styles for clean menu appearance */
.folder-menu-item {
  /* Reset box model to override button-row and btn--toggle inheritance */
  all: unset;
  box-sizing: border-box;

  /* Layout */
  display: block;
  width: 100%;

  /* Typography */
  text-align: left;
  font-family: var(--font-primary);
  font-size: 12px;
  color: var(--text-primary, #fff);

  /* Spacing */
  padding: 8px 12px;

  /* Visual */
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;

  /* Interaction */
  cursor: pointer;
  transition: background 0.1s ease;
}

.folder-menu-item:hover {
  background: var(--cyan-15, rgba(0, 200, 255, 0.15));
}

/* Danger variant for destructive actions (delete) */
.folder-menu-item--danger {
  color: var(--gt-danger, #ff6666);
}

.folder-menu-item--danger:hover {
  background: rgba(255, 68, 68, 0.15);
  color: #ff4444;
}

.folder-menu-divider {
  height: 1px;
  background: var(--cyan-15, rgba(0, 200, 255, 0.15));
  margin: 6px 0;
}

/* =============================================================================
   SCENE SELECTOR DROPDOWN (Forensic Pattern)
   Extends folder-context-menu DNA for view mode switching

   USAGE: Any dropdown menu that appears on button click should use this pattern.
   This is the CANONICAL dropdown pattern for KNOMAD - do not deviate.

   HTML Structure:
   <div class="scene-selector">
     <button class="scene-selector__trigger">LABEL ▼</button>
     <div class="scene-selector__menu">
       <div class="scene-selector__section">SECTION TITLE</div>
       <button class="scene-selector__item" data-scene="value">Label</button>
       <div class="scene-selector__divider"></div>
     </div>
   </div>
   ============================================================================= */

.scene-selector {
  position: relative;
  display: inline-block;
}

/* Trigger button - inherits btn btn--toggle DNA */
.scene-selector__trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.scene-selector__trigger::after {
  content: '▾';
  font-size: 10px;
  opacity: 0.7;
  transition: transform 0.15s ease;
}

.scene-selector__trigger[aria-expanded='true']::after {
  transform: rotate(180deg);
}

/* Menu container - EXACT match to .folder-context-menu */
/* Uses position:fixed set by JS to escape overflow:hidden containers */
.scene-selector__menu {
  display: none;
  z-index: 99999; /* Above canvas and all overlays */

  /* Visual DNA from folder-context-menu */
  background: var(--dark-bg-1, rgba(15, 25, 35, 0.98));
  border: 1px solid var(--cyan-30, rgba(0, 200, 255, 0.3));
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  min-width: 160px;
  padding: 6px 0;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.scene-selector__menu.visible {
  display: block;
}

/* Section header - EXACT match to .folder-menu-section */
.scene-selector__section {
  font-size: 10px;
  font-weight: 700;
  color: var(--cyan, rgb(0, 200, 255));
  padding: 6px 12px 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Menu items - EXACT match to .folder-menu-item */
/* Reset all inherited btn/btn--toggle styles for clean menu appearance */
.scene-selector__item {
  /* Reset box model */
  all: unset;
  box-sizing: border-box;

  /* Layout */
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;

  /* Typography */
  text-align: left;
  font-family: var(--font-primary);
  font-size: 12px;
  color: var(--text-primary, #fff);

  /* Spacing */
  padding: 8px 12px;

  /* Visual */
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;

  /* Interaction */
  cursor: pointer;
  transition: background 0.1s ease;
}

.scene-selector__item:hover {
  background: var(--cyan-15, rgba(0, 200, 255, 0.15));
}

/* Active/selected state */
.scene-selector__item[data-active='true'] {
  color: var(--cyan, rgb(0, 200, 255));
}

.scene-selector__item[data-active='true']::before {
  content: '✓';
  margin-right: 4px;
  font-weight: 700;
}

/* Divider - EXACT match to .folder-menu-divider */
.scene-selector__divider {
  height: 1px;
  background: var(--cyan-15, rgba(0, 200, 255, 0.15));
  margin: 6px 0;
}

/* Scene icons removed - just text labels now */

/* Disabled/coming soon items */
.scene-selector__item[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.scene-selector__item[disabled]::after {
  content: '(coming soon)';
  margin-left: auto;
  font-size: 10px;
  opacity: 0.6;
}

/* =============================================================================
   JOURNAL WINDOW STYLES
   ============================================================================= */
.journal-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
}

/* Add Entry Section */
.jnl-add-section {
  flex-shrink: 0;
}

.jnl-add-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.jnl-type-select {
  flex: 1;
  padding: 6px 10px;
  font-size: 12px;
  background: var(--dark-bg-2, rgba(25, 35, 45, 0.95));
  border: 1px solid var(--cyan-25, rgba(0, 200, 255, 0.25));
  border-radius: 6px;
  color: var(--text-primary, #fff);
  cursor: pointer;
}

.jnl-type-select:focus {
  outline: none;
  border-color: var(--cyan, rgb(0, 200, 255));
}

.jnl-btn {
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid var(--cyan-30, rgba(0, 200, 255, 0.3));
  border-radius: 6px;
  background: var(--cyan-15, rgba(0, 200, 255, 0.15));
  color: var(--text-primary, #fff);
  cursor: pointer;
  transition: all 0.15s ease;
}

.jnl-btn:hover {
  background: var(--cyan-25, rgba(0, 200, 255, 0.25));
  border-color: var(--cyan-50, rgba(0, 200, 255, 0.5));
}

.jnl-btn--add {
  white-space: nowrap;
}

.jnl-btn--save-entry {
  background: rgba(76, 175, 80, 0.2);
  border-color: rgba(76, 175, 80, 0.4);
}

.jnl-btn--save-entry:hover {
  background: rgba(76, 175, 80, 0.35);
}

.jnl-btn--cancel {
  background: transparent;
  border-color: var(--cyan-20, rgba(0, 200, 255, 0.2));
}

.jnl-btn--delete {
  width: 20px;
  height: 20px;
  padding: 0;
  font-size: 14px;
  line-height: 1;
  background: transparent;
  border-color: rgba(244, 67, 54, 0.3);
  color: rgba(244, 67, 54, 0.7);
  margin-left: auto;
}

.jnl-btn--delete:hover {
  background: rgba(244, 67, 54, 0.2);
  color: #ff6666;
}

/* Entry Form */
.jnl-entry-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  background: var(--dark-bg-2, rgba(25, 35, 45, 0.95));
  border: 1px solid var(--cyan-25, rgba(0, 200, 255, 0.25));
  border-radius: 8px;
}

.jnl-form-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.jnl-form-row label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary, rgba(255, 255, 255, 0.85));
  min-width: 80px;
}

.jnl-form-row--half {
  flex: 0 0 48%;
}

.jnl-conditions-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.jnl-form-section {
  font-size: 10px;
  font-weight: 700;
  color: var(--cyan, rgb(0, 200, 255));
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 4px;
}

.jnl-input,
.jnl-date-input,
.jnl-tags-input {
  flex: 1;
  padding: 6px 10px;
  font-size: 12px;
  background: var(--dark-bg-1, rgba(15, 25, 35, 0.98));
  border: 1px solid var(--cyan-20, rgba(0, 200, 255, 0.2));
  border-radius: 6px;
  color: var(--text-primary, #fff);
}

.jnl-input:focus,
.jnl-date-input:focus,
.jnl-tags-input:focus,
.jnl-notes-input:focus {
  outline: none;
  border-color: var(--cyan, rgb(0, 200, 255));
}

.jnl-notes-input {
  width: 100%;
  padding: 8px 10px;
  font-size: 12px;
  font-family: inherit;
  background: var(--dark-bg-1, rgba(15, 25, 35, 0.98));
  border: 1px solid var(--cyan-20, rgba(0, 200, 255, 0.2));
  border-radius: 6px;
  color: var(--text-primary, #fff);
  resize: vertical;
  min-height: 60px;
}

.jnl-form-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding-top: 8px;
  border-top: 1px solid var(--cyan-15, rgba(0, 200, 255, 0.15));
}

/* Entries List */
.jnl-entries-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.jnl-empty {
  text-align: center;
  padding: 24px;
  color: var(--text-muted, rgba(255, 255, 255, 0.5));
  font-style: italic;
  font-size: 12px;
}

/* Entry Card */
.jnl-entry {
  padding: 10px 12px;
  background: var(--dark-bg-2, rgba(25, 35, 45, 0.95));
  border: 1px solid var(--cyan-20, rgba(0, 200, 255, 0.2));
  border-radius: 8px;
  transition: border-color 0.15s ease;
}

.jnl-entry:hover {
  border-color: var(--cyan-35, rgba(0, 200, 255, 0.35));
}

.jnl-entry-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.jnl-type-badge {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  border-radius: 4px;
  background: var(--cyan-20, rgba(0, 200, 255, 0.2));
  color: var(--cyan, rgb(0, 200, 255));
}

.jnl-type-badge[data-type='hunt'] {
  background: rgba(255, 152, 0, 0.2);
  color: #ffa726;
}

.jnl-type-badge[data-type='competition'] {
  background: rgba(156, 39, 176, 0.2);
  color: #ba68c8;
}

.jnl-type-badge[data-type='maintenance'] {
  background: rgba(158, 158, 158, 0.2);
  color: #bdbdbd;
}

.jnl-type-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary, rgba(255, 255, 255, 0.85));
}

.jnl-date {
  font-size: 10px;
  color: var(--text-muted, rgba(255, 255, 255, 0.5));
}

.jnl-conditions {
  font-size: 10px;
  color: var(--text-muted, rgba(255, 255, 255, 0.5));
  margin-bottom: 6px;
  padding: 4px 8px;
  background: var(--dark-bg-1, rgba(15, 25, 35, 0.5));
  border-radius: 4px;
}

.jnl-notes {
  font-size: 12px;
  color: var(--text-primary, #fff);
  line-height: 1.5;
  white-space: pre-wrap;
}

.jnl-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 8px;
}

.jnl-tag {
  font-size: 10px;
  padding: 2px 6px;
  background: var(--cyan-15, rgba(0, 200, 255, 0.15));
  border-radius: 10px;
  color: var(--cyan, rgb(0, 200, 255));
}

/* =============================================================================
   GOALS WINDOW STYLES
   ============================================================================= */
.goals-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
}

.goals-template-section {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}

.goals-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary, rgba(255, 255, 255, 0.85));
}

.goals-template-select {
  flex: 1;
  padding: 6px 10px;
  font-size: 12px;
  background: var(--dark-bg-2, rgba(25, 35, 45, 0.95));
  border: 1px solid var(--cyan-25, rgba(0, 200, 255, 0.25));
  border-radius: 6px;
  color: var(--text-primary, #fff);
  cursor: pointer;
}

.goals-template-select:focus {
  outline: none;
  border-color: var(--cyan, rgb(0, 200, 255));
}

.goals-btn {
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid var(--cyan-30, rgba(0, 200, 255, 0.3));
  border-radius: 6px;
  background: var(--cyan-15, rgba(0, 200, 255, 0.15));
  color: var(--text-primary, #fff);
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.goals-btn:hover {
  background: var(--cyan-25, rgba(0, 200, 255, 0.25));
  border-color: var(--cyan-50, rgba(0, 200, 255, 0.5));
}

/* Milestones List */
.goals-milestones-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.goals-empty,
.goals-loading {
  text-align: center;
  padding: 24px;
  color: var(--text-muted, rgba(255, 255, 255, 0.5));
  font-style: italic;
  font-size: 12px;
}

/* Milestone Card */
.goals-milestone {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: var(--dark-bg-2, rgba(25, 35, 45, 0.95));
  border: 1px solid var(--cyan-20, rgba(0, 200, 255, 0.2));
  border-radius: 8px;
  transition: all 0.15s ease;
}

.goals-milestone:hover {
  border-color: var(--cyan-35, rgba(0, 200, 255, 0.35));
}

.goals-milestone--complete {
  border-left: 3px solid #4caf50;
  opacity: 0.75;
}

.goals-milestone--complete .goals-milestone-name {
  text-decoration: line-through;
  color: var(--text-muted, rgba(255, 255, 255, 0.5));
}

.goals-milestone-check {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  border: 2px solid var(--cyan-40, rgba(0, 200, 255, 0.4));
  border-radius: 4px;
  background: transparent;
  color: #4caf50;
  cursor: pointer;
  transition: all 0.15s ease;
}

.goals-milestone-check:hover {
  background: var(--cyan-15, rgba(0, 200, 255, 0.15));
  border-color: var(--cyan, rgb(0, 200, 255));
}

.goals-milestone-content {
  flex: 1;
  min-width: 0;
}

.goals-milestone-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary, #fff);
  margin-bottom: 2px;
}

.goals-milestone-desc {
  font-size: 11px;
  color: var(--text-muted, rgba(255, 255, 255, 0.5));
  line-height: 1.4;
}

.goals-milestone-date {
  font-size: 10px;
  color: #4caf50;
  margin-top: 4px;
}

.goals-milestone-delete {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  padding: 0;
  font-size: 14px;
  line-height: 1;
  background: transparent;
  border: 1px solid rgba(244, 67, 54, 0.3);
  border-radius: 4px;
  color: rgba(244, 67, 54, 0.7);
  cursor: pointer;
  transition: all 0.15s ease;
}

.goals-milestone-delete:hover {
  background: rgba(244, 67, 54, 0.2);
  color: #ff6666;
}

/* Progress Summary */
.goals-summary {
  flex-shrink: 0;
  padding-top: 10px;
  border-top: 1px solid var(--cyan-15, rgba(0, 200, 255, 0.15));
}

.goals-progress {
  height: 6px;
  background: var(--dark-bg-1, rgba(15, 25, 35, 0.98));
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 6px;
}

.goals-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #4caf50, #66bb6a);
  border-radius: 3px;
  transition: width 0.3s ease;
}

.goals-progress-text {
  font-size: 10px;
  color: var(--text-muted, rgba(255, 255, 255, 0.5));
  text-align: center;
}