/* ================================================================
   WORLD TERMINAL — main.css
   ================================================================
   Theme variables live at the top of :root.
   To customise programmatically:
     document.documentElement.style.setProperty('--accent', '#hex')

   DARK theme is default. [data-theme="light"] overrides.
   ================================================================ */

/* ── Reset ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Theme variables ─────────────────────────────────────────────── */
:root {
  /* Backgrounds */
  --bg-primary:      #08080f;
  --bg-secondary:    #0d0d1a;
  --bg-card:         #10101e;
  --bg-card-header:  #151528;

  /* Borders */
  --border:          #1c1c32;
  --border-bright:   #28284a;

  /* Text */
  --text-primary:    #b0b0d0;
  --text-secondary:  #55557a;
  --text-dim:        #2a2a48;

  /* Accent — user-configurable via Settings panel */
  --accent:          #4f9cf9;
  --accent-dim:      rgba(79, 156, 249, 0.12);

  /* Status indicator colors */
  --status-ok:       #5ad75a;
  --status-warn:     #f0c040;
  --status-error:    #f05050;

  /* Map attribution bar */
  --map-attribution-bg: rgba(0, 0, 0, 0.55);

  /* Typography */
  --font: 'JetBrains Mono', 'Fira Code', 'SF Mono', 'Consolas', 'Liberation Mono', monospace;
  --font-size: 13px;

  /* Chrome */
  --header-h:      44px;
  --settings-w:    300px;
  --radius:        3px;
  --transition:    0.15s ease;
}

[data-theme="light"] {
  --bg-primary:     #ededf8;
  --bg-secondary:   #e2e2f0;
  --bg-card:        #ffffff;
  --bg-card-header: #ebebfa;
  --border:         #c0c0d8;
  --border-bright:  #9898c0;
  --text-primary:   #1a1a2e;
  --text-secondary: #505075;
  --text-dim:       #9898b8;
  --accent-dim:     rgba(79, 156, 249, 0.1);

  /* Darkened status colors that pass WCAG 4.5:1 on white */
  --status-ok:      #1a8c1a;
  --status-warn:    #8a6d00;
  --status-error:   #c43030;

  --map-attribution-bg: rgba(255, 255, 255, 0.8);
}

/* ── Base ────────────────────────────────────────────────────────── */
html, body {
  height: 100%;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font);
  font-size: var(--font-size);
  line-height: 1.6;
  -webkit-font-smoothing:  antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering:          optimizeLegibility;
}

/* ── Focus styles ────────────────────────────────────────────────── */
/* Keyboard focus ring — uses accent color so it's always visible */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius);
}
/* Suppress focus ring for pointer (mouse/touch) interactions */
:focus:not(:focus-visible) { outline: none; }

/* Textarea: use inset shadow instead of outline to avoid clipping */
.notes-textarea:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 1px var(--accent);
}

/* ── Site header ─────────────────────────────────────────────────── */
.site-header {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-left { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.site-logo   { color: var(--accent); font-size: 18px; }

.site-title  {
  color: var(--text-primary);
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.site-title:hover { color: var(--accent); }

.site-subtitle { color: var(--text-secondary); font-size: 11px; white-space: nowrap; }

.header-nav { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

.nav-link {
  color: var(--text-secondary);
  text-decoration: none;
  padding: 3px 8px;
  border-radius: var(--radius);
  font-size: 12px;
  transition: var(--transition);
  white-space: nowrap;
}
.nav-link:hover,
.nav-link.active { color: var(--accent); background: var(--accent-dim); }

/* ── Icon button ─────────────────────────────────────────────────── */
.icon-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  cursor: pointer;
  padding: 3px 8px;
  border-radius: var(--radius);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1;
  transition: var(--transition);
}
.icon-btn:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-dim); }

/* ── Main content ────────────────────────────────────────────────── */
#main-content {
  padding: 10px;
  min-height: calc(100vh - var(--header-h));
}

/* ── Gridstack overrides ─────────────────────────────────────────── */
.grid-stack { background: transparent; }

.grid-stack-item-content {
  background: transparent !important;
  border: none !important;
  border-radius: var(--radius) !important;
  overflow: hidden !important;
}

/* Resize handles — always faintly visible, brighten on hover */
.grid-stack-item > .ui-resizable-handle {
  opacity: 0.2;
  transition: opacity var(--transition);
}
.grid-stack-item:hover > .ui-resizable-handle { opacity: 0.8; }

.grid-stack-item > .ui-resizable-se {
  width: 18px;
  height: 18px;
  right: 0;
  bottom: 0;
  cursor: se-resize;
  background: none;
}
/* L-shaped grip drawn with pure CSS */
.grid-stack-item > .ui-resizable-se::after {
  content: '';
  display: block;
  width: 9px;
  height: 9px;
  margin: 4px 0 0 4px;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  border-radius: 1px;
}
.grid-stack-item > .ui-resizable-s { cursor: s-resize; height: 6px; bottom: 0; left: 10%; right: 10%; }
.grid-stack-item > .ui-resizable-e { cursor: e-resize; width: 6px;  right: 0; top: 10%; bottom: 10%; }

/* Drag placeholder */
.grid-stack-placeholder > .placeholder-content {
  background: var(--accent-dim) !important;
  border: 1px dashed var(--accent) !important;
  border-radius: var(--radius) !important;
}

/* Moving item highlight — Gridstack v10 class */
.ui-draggable-dragging .widget-card { border-top-color: var(--accent); opacity: 0.9; }

/* ── Widget loading skeleton ─────────────────────────────────────── */
.widget-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.widget-loading-pulse {
  width: 40%;
  height: 3px;
  border-radius: 2px;
  background: var(--border);
  position: relative;
  overflow: hidden;
}
.widget-loading-pulse::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, var(--accent-dim), transparent);
  animation: wt-pulse 1.4s ease-in-out infinite;
}
@keyframes wt-pulse {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(300%); }
}

/* ── Widget card ─────────────────────────────────────────────────── */
.widget-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-top: 2px solid var(--accent);   /* accent top stripe */
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  transition: border-color var(--transition), box-shadow var(--transition);
  /* Contain Leaflet's internal z-indices (200–700) so they cannot
     leak above fixed-position overlays in the root stacking context */
  isolation: isolate;
}
.widget-card:hover {
  border-color: var(--border-bright);
  border-top-color: var(--accent);       /* keep accent on hover */
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.widget-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 10px;
  background: var(--bg-card-header);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  user-select: none;
}

.widget-drag-handle { cursor: grab; }
.widget-drag-handle:active { cursor: grabbing; }

.widget-title {
  font-size: 10px;
  color: var(--text-secondary);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.widget-controls { display: flex; gap: 3px; }

.widget-btn {
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  padding: 0 4px;
  font-size: 14px;
  line-height: 1;
  border-radius: var(--radius);
  transition: var(--transition);
  font-family: var(--font);
}
.widget-btn:hover { color: var(--text-secondary); background: var(--accent-dim); }

.widget-body {
  flex: 1;
  overflow: hidden;
  position: relative;
  min-height: 0;
}

/* ── Status widget ───────────────────────────────────────────────── */
.status-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 8px;
  align-content: start;
  height: 100%;
  overflow-y: auto;
}

.status-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.status-label {
  font-size: 9px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.status-value {
  font-size: 13px;
  color: var(--text-primary);
  transition: color 0.4s ease;  /* smooth color change between ok/warn/error */
}
.status-ok    { color: var(--status-ok); }
.status-warn  { color: var(--status-warn); }
.status-error { color: var(--status-error); }

/* ── Status widget — Live Health row ─────────────────────────────── */
.status-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.status-wrap .status-grid {
  height: auto;
  flex: 1 1 auto;
  overflow-y: auto;
}

.status-health-row {
  flex: 0 0 auto;
  display: flex;
  gap: 6px;
  padding: 6px 8px 8px;
  border-top: 1px solid var(--border);
}

.status-health-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 5px 7px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  min-width: 0;
}

.status-health-header {
  display: flex;
  align-items: center;
  gap: 5px;
}

.health-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.health-dot--healthy  { background: var(--status-ok); }
.health-dot--degraded { background: var(--status-warn); }
.health-dot--down     { background: var(--status-error); }
.health-dot--loading  { background: var(--text-dim); }

.health-label {
  font-size: 9px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.health-meta {
  font-size: 10px;
  color: var(--text-secondary);
}

.health-error {
  font-size: 9px;
  color: var(--status-error);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Notes widget ────────────────────────────────────────────────── */
.notes-textarea {
  display: block;
  width: 100%;
  height: calc(100% - 22px);
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 12px;
  line-height: 1.75;
  padding: 10px 12px;
  resize: none;
  outline: none;
}
.notes-textarea::placeholder { color: var(--text-dim); }

.notes-footer {
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 10px;
  border-top: 1px solid var(--border);
  background: var(--bg-card-header);
}

.notes-saved-indicator { font-size: 9px; color: var(--text-secondary); letter-spacing: 0.05em; }

/* ── Quick actions widget ────────────────────────────────────────── */
.quick-actions-list {
  list-style: none;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: 100%;
  overflow-y: auto;
}

.qa-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: var(--transition);
}
.qa-item:hover { border-color: var(--accent); background: var(--accent-dim); }

.qa-icon { font-size: 15px; color: var(--accent); min-width: 20px; text-align: center; }

.qa-text { display: flex; flex-direction: column; gap: 1px; }
.qa-label { font-size: 12px; color: var(--text-primary); }
.qa-desc  { font-size: 10px; color: var(--text-secondary); }

/* ── Map widget ──────────────────────────────────────────────────── */
/* Legacy selector kept for backwards-compat; new markup uses .map-root + .map-tile */
.map-container { width: 100%; height: 100%; }

/* ── Map root layout ─────────────────────────────────────────────── */
.map-root {
  display:        flex;
  flex-direction: column;
  height:         100%;
  overflow:       hidden;
}

.map-tile {
  flex:        1;
  min-height:  0;    /* critical for Leaflet in a flex container */
  position:    relative;
}

/* ── Map control bar ─────────────────────────────────────────────── */
.map-ctrl {
  display:     flex;
  align-items: center;
  gap:         4px;
  padding:     4px 6px;
  background:  var(--bg-card);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  flex-wrap:   wrap;
  z-index:     900;
}

.mc-group {
  display:     flex;
  align-items: center;
  gap:         2px;
}

.mc-div {
  width:      1px;
  height:     14px;
  background: var(--border-bright);
  margin:     0 2px;
  flex-shrink: 0;
}

.mc-btn {
  padding:        2px 7px;
  font-family:    var(--font);
  font-size:      10px;
  font-weight:    600;
  color:          var(--text-secondary);
  background:     transparent;
  border:         1px solid var(--border-bright);
  border-radius:  3px;
  cursor:         pointer;
  white-space:    nowrap;
  transition:     color .12s, background .12s, border-color .12s;
}
.mc-btn:hover   { color: var(--text-primary); border-color: var(--accent); }
.mc-btn.active  { color: var(--bg-primary); background: var(--accent); border-color: var(--accent); }

.mc-sel {
  padding:     2px 4px;
  font-family: var(--font);
  font-size:   10px;
  color:       var(--text-secondary);
  background:  var(--bg-primary);
  border:      1px solid var(--border-bright);
  border-radius: 3px;
  cursor:      pointer;
  max-width:   90px;
}
.mc-sel:focus  { outline: none; border-color: var(--accent); }

.mc-bbox-wrap {
  display:     flex;
  align-items: center;
  gap:         4px;
  font-family: var(--font);
  font-size:   10px;
  color:       var(--text-secondary);
  cursor:      pointer;
  white-space: nowrap;
}
.mc-bbox-wrap input { cursor: pointer; accent-color: var(--accent); }

/* ── Map legend ──────────────────────────────────────────────────── */
.map-legend {
  position:   absolute;
  bottom:     30px;    /* above Leaflet attribution bar */
  right:      8px;
  z-index:    800;
  background: rgba(16, 16, 30, 0.88);
  border:     1px solid var(--border-bright);
  border-radius: var(--radius);
  padding:    6px 8px;
  font-family: var(--font);
  font-size:  9px;
  color:      var(--text-secondary);
  min-width:  72px;
  pointer-events: none;
}

.ml-title {
  font-weight:    700;
  font-size:      8px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:          var(--text-dim);
  margin-bottom:  4px;
}

.ml-row { display: flex; align-items: center; gap: 5px; margin-top: 3px; }

.ml-dot {
  display:       inline-block;
  width:         9px;
  height:        9px;
  border-radius: 50%;
  flex-shrink:   0;
}
.ml-high { background: var(--accent); }
.ml-med  { background: #f59e0b; }
.ml-low  { background: #6b7280; }
.ml-new  { background: var(--status-error); }

/* Heatmap gradient legend */
.ml-heat-bar {
  width:         100%;
  height:        8px;
  border-radius: 3px;
  background:    linear-gradient(to right, #0ea5e9, #6366f1, #f59e0b, #ef4444, #fff);
  margin:        4px 0;
}
.ml-heat-labels {
  display:         flex;
  justify-content: space-between;
  font-size:       8px;
  color:           var(--text-dim);
}

/* ── Hotspot popup extras ─────────────────────────────────────────── */
.nmp-count {
  float:       right;
  font-size:   9px;
  font-weight: 400;
  color:       var(--text-secondary);
  margin-left: 8px;
}

.nmp-hs-foot {
  font-size:  8px;
  color:      var(--text-dim);
  text-align: right;
  margin-top: 4px;
  padding-top: 3px;
  border-top: 1px solid var(--border);
}

/* Leaflet dark-theme overrides — use CSS variables for theme-aware colors */
.leaflet-control-zoom a {
  background: var(--bg-card-header) !important;
  color: var(--text-primary) !important;
  border-color: var(--border) !important;
}
.leaflet-control-zoom a:hover { color: var(--accent) !important; }

.leaflet-control-attribution {
  background: var(--map-attribution-bg) !important;
  color: var(--text-secondary) !important;
  font-family: var(--font) !important;
  font-size: 9px !important;
}
.leaflet-control-attribution a { color: var(--accent) !important; }

/* ── Settings panel ──────────────────────────────────────────────── */
.settings-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 9998;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.settings-overlay.open { opacity: 1; pointer-events: all; }

.settings-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: var(--settings-w);
  max-width: 100vw;          /* never overflow viewport on small screens */
  height: 100dvh;            /* dvh: accounts for mobile browser chrome */
  background: var(--bg-secondary);
  border-left: 1px solid var(--border);
  z-index: 9999;
  transform: translateX(100%);
  transition: transform 0.2s ease;
  display: flex;
  flex-direction: column;
}
.settings-panel.open { transform: translateX(0); }

.settings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.settings-header span {
  font-size: 10px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.settings-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.settings-section { display: flex; flex-direction: column; gap: 10px; }

.settings-section h3 {
  font-size: 9px;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}

.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.setting-row label { font-size: 12px; color: var(--text-secondary); }

/* Toggle button */
.toggle-btn {
  background: var(--accent-dim);
  border: 1px solid var(--accent);
  color: var(--accent);
  padding: 3px 10px;
  border-radius: var(--radius);
  cursor: pointer;
  font-family: var(--font);
  font-size: 11px;
  transition: var(--transition);
}
.toggle-btn:hover { background: var(--accent); color: var(--bg-primary); }

/* Color picker */
#accent-color {
  width: 34px;
  height: 22px;
  padding: 1px 2px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  cursor: pointer;
}

/* Widget manager */
.widget-manager-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}

.wm-info { display: flex; flex-direction: column; gap: 2px; }
.wm-name { font-size: 12px; color: var(--text-primary); }
.wm-desc { font-size: 10px; color: var(--text-secondary); }

/* Toggle switch */
.toggle-switch { position: relative; width: 34px; height: 18px; flex-shrink: 0; }
.toggle-switch input { opacity: 0; width: 0; height: 0; position: absolute; }

.toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--border-bright);
  border-radius: 18px;
  cursor: pointer;
  transition: var(--transition);
}
.toggle-slider::before {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  background: var(--text-secondary);
  border-radius: 50%;
  left: 3px;
  top: 3px;
  transition: var(--transition);
}
.toggle-switch input:checked + .toggle-slider            { background: var(--accent); }
.toggle-switch input:checked + .toggle-slider::before   { background: #fff; transform: translateX(16px); }

/* Danger button */
.btn-danger {
  width: 100%;
  padding: 8px;
  background: rgba(240, 80, 80, 0.08);
  border: 1px solid rgba(240, 80, 80, 0.35);
  color: #f05858;
  border-radius: var(--radius);
  cursor: pointer;
  font-family: var(--font);
  font-size: 12px;
  transition: var(--transition);
}
.btn-danger:hover { background: rgba(240, 80, 80, 0.18); border-color: #f05858; }

/* Light-theme danger button — stronger contrast on white */
[data-theme="light"] .btn-danger {
  background: rgba(180, 30, 30, 0.08);
  border-color: rgba(180, 30, 30, 0.4);
  color: #b02020;
}
[data-theme="light"] .btn-danger:hover {
  background: rgba(180, 30, 30, 0.16);
  border-color: #b02020;
}

/* ── Single / about page ─────────────────────────────────────────── */
.page-content {
  max-width: 660px;
  margin: 40px auto;
  padding: 0 16px;
}
.page-content h1 { font-size: 18px; color: var(--text-primary); margin-bottom: 16px; }
.page-content p  { color: var(--text-secondary); margin-bottom: 10px; }
.page-content a  { color: var(--accent); }
.page-content hr { border: none; border-top: 1px solid var(--border); margin: 16px 0; }

/* ── Scrollbar ───────────────────────────────────────────────────── */
::-webkit-scrollbar              { width: 4px; height: 4px; }
::-webkit-scrollbar-track        { background: transparent; }
::-webkit-scrollbar-thumb        { background: var(--border-bright); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover  { background: var(--text-dim); }

/* ── Add / Manage Widgets modal ──────────────────────────────────── */
.aw-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  z-index: 10001; /* above Gridstack drag (10000) and settings panel */
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}
.aw-overlay.open { opacity: 1; pointer-events: all; }

.aw-modal {
  background: var(--bg-secondary);
  border: 1px solid var(--border-bright);
  border-radius: 6px;
  width: min(640px, 92vw);
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  transform: translateY(12px) scale(0.98);
  transition: transform 0.18s ease;
  overflow: hidden;
}
.aw-overlay.open .aw-modal { transform: translateY(0) scale(1); }

.aw-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.aw-modal-title {
  font-size: 13px;
  color: var(--text-primary);
  font-weight: 600;
  display: block;
}
.aw-modal-hint {
  font-size: 10px;
  color: var(--text-secondary);
  display: block;
  margin-top: 2px;
}

.aw-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
  padding: 16px;
  overflow-y: auto;
}

/* Widget card in the modal */
.aw-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
  position: relative;
}
.aw-card:hover { border-color: var(--border-bright); background: var(--bg-card); }

/* Active (on the dashboard) */
.aw-card.aw-active { border-color: var(--accent); background: var(--accent-dim); }
.aw-card.aw-active:hover { filter: brightness(1.1); }

/* Avatar letter */
.aw-avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--radius);
  background: var(--border-bright);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--text-primary);
  font-weight: 700;
  flex-shrink: 0;
}
.aw-card.aw-active .aw-avatar { background: var(--accent); color: var(--bg-primary); }

.aw-card-name { font-size: 12px; color: var(--text-primary); display: block; font-weight: 600; }
.aw-card-desc { font-size: 10px; color: var(--text-secondary); display: block; margin-top: 2px; }

/* Status badge */
.aw-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  padding: 2px 7px;
  border-radius: 20px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid;
  align-self: flex-start;
}
.aw-badge-active   { color: var(--accent); border-color: var(--accent); }
.aw-badge-inactive { color: var(--text-secondary); border-color: var(--border-bright); }
.aw-badge-active::before   { content: '●'; font-size: 7px; }
.aw-badge-inactive::before { content: '○'; font-size: 7px; }

/* ── News Widget ─────────────────────────────────────────────────── */
.news-wrap {
  display:        flex;
  flex-direction: column;
  height:         100%;
}

.news-cats {
  display:         flex;
  gap:             4px;
  padding:         6px 10px;
  border-bottom:   1px solid var(--border);
  flex-shrink:     0;
  flex-wrap:       wrap;
}

.news-cat-btn {
  font-size:       10px;
  font-weight:     700;
  letter-spacing:  0.07em;
  text-transform:  uppercase;
  padding:         3px 8px;
  border-radius:   3px;
  border:          1px solid var(--border);
  background:      transparent;
  color:           var(--text-secondary);
  cursor:          pointer;
  transition:      background 0.12s, color 0.12s, border-color 0.12s;
}
.news-cat-btn:hover {
  background: var(--accent-dim);
  color:      var(--text-primary);
}
.news-cat-btn.active {
  background:    var(--accent);
  color:         var(--bg-primary);
  border-color:  var(--accent);
}

.news-list {
  list-style:    none;
  margin:        0;
  padding:       4px 0;
  overflow-y:    auto;
  flex:          1;
  min-height:    0;
  display:       flex;
  flex-direction: column;
  gap:           1px;
}

.news-status {
  padding:       12px 14px;
  color:         var(--text-secondary);
  font-size:     11px;
}

.news-error { color: var(--status-error); }

.news-item {
  padding:       8px 14px;
  border-bottom: 1px solid var(--border);
  display:       flex;
  flex-direction: column;
  gap:           4px;
}
.news-item:last-child { border-bottom: none; }
.news-item:hover { background: var(--accent-dim); }

.news-item-top {
  display:    flex;
  align-items: flex-start;
  gap:         6px;
}

.news-badge {
  flex-shrink:     0;
  font-size:       9px;
  font-weight:     700;
  letter-spacing:  0.08em;
  color:           var(--bg-primary);
  background:      var(--accent);
  padding:         1px 5px;
  border-radius:   2px;
  margin-top:      2px;
  line-height:     1.4;
}

.news-title {
  color:           var(--text-primary);
  text-decoration: none;
  font-size:       12px;
  line-height:     1.45;
  display:         -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:        hidden;
}
.news-title:hover {
  color:           var(--accent);
  text-decoration: underline;
}

.news-meta {
  display:         flex;
  align-items:     center;
  gap:             8px;
  font-size:       10px;
  color:           var(--text-secondary);
}

.news-source { font-weight: 600; }
.news-time   { color: var(--text-dim); margin-left: auto; }
.news-loc         { font-size: 9px; text-transform: uppercase; letter-spacing: .04em; }
.news-loc-high    { color: var(--accent);   }
.news-loc-medium  { color: #f59e0b;         }
.news-loc-low     { color: var(--text-dim); }

/* ── Map news markers ────────────────────────────────────────────── */
/*
  .nmk-wrap      outer div used as the L.divIcon html
  .nmk-dot       the visible circle
  .nmk-dot-new   red pulsing variant for articles flagged is_new
  .nmk-count     small badge showing "N" when multiple articles share a pin
*/
.nmk-wrap {
  position: relative;
  width:  14px;
  height: 14px;
  cursor: pointer;
}

.nmk-dot {
  position:      absolute;
  top:           2px;
  left:          2px;
  width:         10px;
  height:        10px;
  border-radius: 50%;
  background:    var(--accent);
  border:        1.5px solid rgba(0, 0, 0, 0.45);
  box-shadow:    0 0 4px rgba(79, 156, 249, 0.6);
  transition:    transform 0.15s ease;
}
.nmk-wrap:hover .nmk-dot { transform: scale(1.35); }

/* Confidence buckets */
.nmk-dot-high   { background: var(--accent);   box-shadow: 0 0 4px rgba(79,156,249,0.6); }
.nmk-dot-medium { background: #f59e0b;          box-shadow: 0 0 4px rgba(245,158,11,0.6); border-color: rgba(0,0,0,0.4); }
.nmk-dot-low    { background: #6b7280;          box-shadow: none; }
.nmk-dot-new {
  background: var(--status-error);
  border-color: rgba(0, 0, 0, 0.5);
  box-shadow:   0 0 6px rgba(240, 80, 80, 0.7);
  animation:    nmk-pulse 1.8s ease-out infinite;
}

@keyframes nmk-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(240, 80, 80, 0.75); }
  60%  { box-shadow: 0 0 0 7px rgba(240, 80, 80, 0);    }
  100% { box-shadow: 0 0 0 0   rgba(240, 80, 80, 0);    }
}

.nmk-count {
  position:    absolute;
  top:         -7px;
  left:        9px;
  font-family: var(--font);
  font-size:   9px;
  font-weight: 700;
  color:       var(--text-primary);
  white-space: nowrap;
  pointer-events: none;
  text-shadow: 0 0 4px var(--bg-primary), 0 0 4px var(--bg-primary);
}

/* ── Map news popup ──────────────────────────────────────────────── */
/* Override Leaflet's popup chrome to match the terminal theme */
.nmk-popup-pane .leaflet-popup-content-wrapper {
  background:    var(--bg-card);
  border:        1px solid var(--border-bright);
  border-radius: var(--radius);
  box-shadow:    0 6px 24px rgba(0, 0, 0, 0.55);
  color:         var(--text-primary);
  padding:       0;
}
.nmk-popup-pane .leaflet-popup-content {
  margin: 0;
  width:  auto !important;
}
.nmk-popup-pane .leaflet-popup-tip-container { display: none; }
.nmk-popup-pane .leaflet-popup-close-button {
  color:    var(--text-secondary);
  top:      4px;
  right:    4px;
  font-size: 16px;
  line-height: 1;
}
.nmk-popup-pane .leaflet-popup-close-button:hover { color: var(--text-primary); }

/* Popup content layout */
.nmp-wrap {
  font-family: var(--font);
  font-size:   12px;
  min-width:   220px;
  max-width:   290px;
  padding:     10px 12px 8px;
}

.nmp-loc {
  font-size:      10px;
  font-weight:    700;
  letter-spacing: 0.1em;
  color:          var(--accent);
  margin-bottom:  6px;
  padding-bottom: 5px;
  border-bottom:  1px solid var(--border);
}

.nmp-list {
  list-style: none;
  margin:     0;
  padding:    0;
  display:    flex;
  flex-direction: column;
  gap:        7px;
  max-height: 260px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border-bright) transparent;
}

.nmp-item {
  display:        flex;
  flex-direction: column;
  gap:            3px;
  padding-bottom: 6px;
  border-bottom:  1px solid var(--border);
}
.nmp-item:last-child { border-bottom: none; padding-bottom: 0; }

.nmp-new {
  display:        inline-block;
  font-size:      8px;
  font-weight:    700;
  letter-spacing: 0.08em;
  color:          var(--bg-primary);
  background:     var(--status-error);
  padding:        1px 4px;
  border-radius:  2px;
  margin-right:   4px;
  vertical-align: middle;
}

.nmp-title {
  color:           var(--text-primary);
  text-decoration: none;
  font-size:       12px;
  line-height:     1.4;
}
.nmp-title:hover {
  color:           var(--accent);
  text-decoration: underline;
}

.nmp-meta {
  display:     flex;
  gap:         8px;
  font-size:   10px;
  color:       var(--text-secondary);
}
.nmp-source { font-weight: 600; }
.nmp-time   { color: var(--text-dim); }

/* ── Stock Widget ────────────────────────────────────────────────── */

.stock-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 6px;
  gap: 5px;
  overflow: hidden;
}

/* Search bar */
.stock-search {
  display: flex;
  gap: 5px;
  flex-shrink: 0;
}

/* Wrapper gives us a positioning root for the dropdown */
.stock-input-wrap {
  flex: 1;
  min-width: 0;
  position: relative;
}

.stock-search-input {
  width: 100%;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 12px;
  padding: 4px 8px;
  outline: none;
  transition: border-color var(--transition);
  text-transform: uppercase;
}
.stock-search-input::placeholder { color: var(--text-dim); text-transform: none; }
.stock-search-input:focus { border-color: var(--accent); }

.stock-search-btn {
  background: var(--accent-dim);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  color: var(--accent);
  font-family: var(--font);
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  cursor: pointer;
  transition: var(--transition);
  flex-shrink: 0;
  letter-spacing: 0.05em;
}
.stock-search-btn:hover { background: var(--accent); color: var(--bg-primary); }

/* Tab bar */
.stock-tabs {
  display: flex;
  gap: 0;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border);
}

.stock-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-secondary);
  font-family: var(--font);
  font-size: 11px;
  letter-spacing: 0.05em;
  padding: 3px 10px 5px;
  cursor: pointer;
  margin-bottom: -1px;
  transition: color var(--transition), border-color var(--transition);
}
.stock-tab:hover  { color: var(--text-primary); }
.stock-tab.active { color: var(--accent); border-bottom-color: var(--accent); }

/* Content area — flex column, fills remaining height */
.stock-content {
  flex: 1;
  min-height: 0;
  position: relative;
  display: flex;
  flex-direction: column;
}

/* Loading / error overlays */
.stock-loading,
.stock-error {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-card);
  z-index: 2;
  font-size: 12px;
  text-align: center;
  padding: 8px;
}
.stock-loading { color: var(--text-secondary); }
.stock-error   { color: var(--status-error); }

/* Panes */
.stock-pane {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Chart controls */
.stock-chart-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  flex-wrap: wrap;
  padding-bottom: 4px;
}

.stock-tf-group { display: flex; gap: 2px; }

.stock-tf-btn,
.stock-toggle-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-secondary);
  font-family: var(--font);
  font-size: 10px;
  padding: 2px 6px;
  cursor: pointer;
  transition: var(--transition);
}
.stock-tf-btn:hover,
.stock-toggle-btn:hover { color: var(--text-primary); border-color: var(--border-bright); }
.stock-tf-btn.active    { background: var(--accent-dim); color: var(--accent); border-color: var(--accent); }
.stock-toggle-btn       { margin-left: auto; }

/* Chart canvas container */
.stock-chart-wrap {
  flex: 1;
  min-height: 0;
  position: relative;
  overflow: hidden;
}
/* Force LightweightCharts canvas to fill container */
.stock-chart-wrap > * { width: 100% !important; height: 100% !important; }

/* Info pane */
.stock-info-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 2px 2px 8px;
  scrollbar-width: thin;
  scrollbar-color: var(--border-bright) transparent;
}

.stock-info-section { margin-bottom: 10px; }

.stock-info-title {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 5px;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--border);
}

.stock-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px 8px;
}

.stock-info-row {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.stock-info-label { font-size: 9px; color: var(--text-secondary); }
.stock-info-value { font-size: 11px; color: var(--text-primary); word-break: break-word; }
.stock-info-link  { font-size: 11px; color: var(--accent); text-decoration: none; word-break: break-all; }
.stock-info-link:hover { text-decoration: underline; }

/* Price header in info tab */
.stock-price-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.stock-current-price { font-size: 18px; font-weight: 600; color: var(--text-primary); }
.stock-change        { font-size: 12px; }

/* Color helpers */
.stock-price-up   { color: var(--status-ok); }
.stock-price-down { color: var(--status-error); }

/* Trading tools */
.stock-tools-form  { display: flex; flex-direction: column; gap: 5px; }
.stock-tools-row   { display: flex; align-items: center; gap: 8px; }
.stock-tools-label { font-size: 10px; color: var(--text-secondary); width: 52px; flex-shrink: 0; }

.stock-tools-input {
  flex: 1;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 11px;
  padding: 3px 6px;
  outline: none;
  transition: border-color var(--transition);
  min-width: 0;
}
.stock-tools-input:focus { border-color: var(--accent); }

.stock-pl-display { margin-top: 4px; display: flex; flex-direction: column; gap: 3px; }
.stock-pl-row     { display: flex; justify-content: space-between; align-items: center; }
.stock-pl-label   { font-size: 9px; color: var(--text-secondary); }
.stock-pl-value   { font-size: 11px; font-weight: 600; color: var(--text-primary); }

/* Empty state */
.stock-empty { color: var(--text-dim); font-size: 11px; text-align: center; padding: 20px 8px; }

/* ── Autocomplete dropdown ───────────────────────────────────────── */
.stock-autocomplete {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--bg-secondary);
  border: 1px solid var(--border-bright);
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  z-index: 200;
  max-height: 220px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border-bright) transparent;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

.stock-ac-item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 5px 8px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background var(--transition);
}
.stock-ac-item:last-child { border-bottom: none; }
.stock-ac-item:hover,
.stock-ac-item.ac-active  { background: var(--accent-dim); }

.stock-ac-ticker {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  white-space: nowrap;
  min-width: 56px;
  flex-shrink: 0;
}

.stock-ac-name {
  font-size: 10px;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Marker cluster icon ─────────────────────────────────────────── */
.nmc-cluster {
  width:           32px;
  height:          32px;
  border-radius:   50%;
  background:      rgba(79, 156, 249, 0.80);
  border:          2px solid var(--accent);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-family:     var(--font);
  font-size:       11px;
  font-weight:     700;
  color:           #fff;
  box-shadow:      0 0 8px rgba(79, 156, 249, 0.45);
  cursor:          pointer;
  transition:      transform 0.12s ease;
}
.nmc-cluster:hover    { transform: scale(1.15); }
.nmc-cluster-new {
  background: rgba(240, 80, 80, 0.80);
  border-color: var(--status-error);
  box-shadow:   0 0 8px rgba(240, 80, 80, 0.45);
}

/* ── Popup: richer layout additions ─────────────────────────────── */
.nmp-title {
  margin: 0 0 4px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-primary);
}
.nmp-title a {
  color: var(--text-primary);
  text-decoration: none;
}
.nmp-title a:hover { color: var(--accent); text-decoration: underline; }

.nmp-cat {
  display:        inline-block;
  font-size:      9px;
  font-weight:    700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color:          var(--accent);
  border:         1px solid var(--accent);
  border-radius:  3px;
  padding:        0 4px;
  line-height:    1.6;
}

.nmp-conf {
  display:        inline-block;
  font-size:      8px;
  font-weight:    700;
  letter-spacing: 0.05em;
  border-radius:  3px;
  padding:        1px 4px;
  margin-left:    6px;
  vertical-align: middle;
}
.nmp-conf-high   { color: var(--accent);   background: rgba(79,156,249,0.12); }
.nmp-conf-medium { color: #f59e0b;          background: rgba(245,158,11,0.12); }
.nmp-conf-low    { color: var(--text-dim);  background: rgba(107,114,128,0.12); }

.nmp-open-link {
  display:         block;
  margin-top:      8px;
  padding-top:     6px;
  border-top:      1px solid var(--border);
  font-size:       11px;
  font-weight:     600;
  color:           var(--accent);
  text-decoration: none;
  text-align:      right;
}
.nmp-open-link:hover { text-decoration: underline; }

/* ── Geocoding status bar ────────────────────────────────────────── */
.geo-status {
  flex-shrink:    0;
  display:        flex;
  align-items:    center;
  gap:            6px;
  padding:        5px 8px;
  border-top:     1px solid var(--border);
  font-family:    var(--font);
  font-size:      9px;
  color:          var(--text-secondary);
  background:     var(--bg-card);
  border-radius:  0 0 var(--radius) var(--radius);
  white-space:    nowrap;
  overflow:       hidden;
}

.gs-label {
  font-weight:    700;
  letter-spacing: 0.08em;
  color:          var(--accent);
  flex-shrink:    0;
}
.gs-sep { color: var(--border-bright); }
.gs-geocoded { color: var(--text-primary); font-weight: 600; }
.gs-hitrate  { color: var(--accent); }

/* ================================================================
   WATCHLIST WIDGET
   ================================================================ */

/* Outer container — fills widget body, flex column */
.wl-wrap {
  display:         flex;
  flex-direction:  column;
  height:          100%;
  overflow:        hidden;
}

/* ── Header bar (timestamp + timeframe selector) ──────────────── */
.wl-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             8px;
  padding:         4px 8px 4px 6px;
  flex-shrink:     0;
  border-bottom:   1px solid var(--border);
}

.wl-updated {
  font-size:      9px;
  color:          var(--text-secondary);
  letter-spacing: 0.04em;
  white-space:    nowrap;
}

.wl-tf-group { display: flex; gap: 2px; }

.wl-tf-btn {
  background:     none;
  border:         1px solid var(--border);
  border-radius:  var(--radius);
  color:          var(--text-secondary);
  font-family:    var(--font);
  font-size:      10px;
  padding:        2px 7px;
  cursor:         pointer;
  transition:     color var(--transition), border-color var(--transition),
                  background var(--transition);
}
.wl-tf-btn:hover { border-color: var(--border-bright); color: var(--text-primary); }
.wl-tf-btn.active {
  background:     var(--accent-dim);
  border-color:   var(--accent);
  color:          var(--accent);
}

/* ── Scrollable ticker list ───────────────────────────────────── */
.wl-list {
  flex:              1;
  overflow-y:        auto;
  scrollbar-width:   thin;
  scrollbar-color:   var(--border-bright) transparent;
  min-height:        0;
}

/* ── Single ticker row ────────────────────────────────────────── */
.wl-row {
  display:     flex;
  align-items: center;
  gap:         6px;
  padding:     5px 8px 5px 6px;
  border-bottom: 1px solid var(--border);
  cursor:      pointer;
  transition:  background var(--transition);
  user-select: none;
}
.wl-row:last-child    { border-bottom: none; }
.wl-row:hover         { background: var(--bg-secondary); }
.wl-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* Left side: ticker + name */
.wl-row-main {
  flex:      1;
  min-width: 0;
}
.wl-row-ticker {
  font-size:   11px;
  font-weight: 700;
  color:       var(--accent);
  line-height: 1.3;
}
.wl-row-name {
  font-size:     10px;
  color:         var(--text-secondary);
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
  line-height:   1.3;
}

/* Right side: price + change% + sparkline, stacked */
.wl-row-data {
  display:        flex;
  flex-direction: column;
  align-items:    flex-end;
  gap:            2px;
  flex-shrink:    0;
}
.wl-row-price {
  font-size:   11px;
  font-weight: 600;
  color:       var(--text-primary);
  white-space: nowrap;
  line-height: 1.2;
}
.wl-row-change {
  font-size:   10px;
  white-space: nowrap;
  line-height: 1.2;
}
.wl-up  { color: var(--status-ok); }
.wl-dn  { color: var(--status-error); }
.wl-err { color: var(--status-warn); font-size: 9px; cursor: help; }

.wl-sparkline {
  display:    block;
  flex-shrink: 0;
  margin-top:  1px;
}

/* Remove button */
.wl-row-remove {
  background:  none;
  border:      none;
  color:       var(--text-dim);
  cursor:      pointer;
  font-size:   15px;
  line-height: 1;
  padding:     0 2px;
  flex-shrink: 0;
  transition:  color var(--transition);
}
.wl-row-remove:hover { color: var(--status-error); }

/* ── Empty state ──────────────────────────────────────────────── */
.wl-empty {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  flex:            1;
  padding:         24px 16px;
  gap:             6px;
  text-align:      center;
}
.wl-empty-icon  { font-size: 28px; color: var(--text-dim); line-height: 1; }
.wl-empty-text  { font-size: 12px; color: var(--text-secondary); }
.wl-empty-hint  { font-size: 10px; color: var(--text-dim); }

/* ── Watchlist toggle in the Stock widget tab bar ─────────────── */
.stock-wl-btn {
  margin-left:  auto;      /* push to right of flex tab bar */
  background:   none;
  border:       none;
  color:        var(--text-dim);
  cursor:       pointer;
  font-size:    16px;
  line-height:  1;
  padding:      0 6px 2px;
  flex-shrink:  0;
  transition:   color var(--transition);
}
.stock-wl-btn:hover      { color: var(--accent); }
.stock-wl-btn.stock-wl-active { color: #f0c040; }   /* gold star = in watchlist */

/* ── Watchlist star in autocomplete dropdown items ────────────── */
.stock-ac-wl-btn {
  margin-left:  auto;
  background:   none;
  border:       none;
  color:        var(--text-dim);
  cursor:       pointer;
  font-size:    12px;
  line-height:  1;
  padding:      0 3px;
  flex-shrink:  0;
  transition:   color var(--transition);
}
.stock-ac-wl-btn:hover { color: var(--accent); }
.stock-ac-wl-btn.in-wl { color: #f0c040; }
.gs-api      { color: var(--text-dim); }


/* ================================================================
   SHIPS SOURCE — map widget additions
   ================================================================ */

/* ── Ships control bar elements ─────────────────────────────────── */
.mc-news-controls,
.mc-ships-controls {
  display:     flex;
  align-items: center;
  gap:         4px;
  flex-wrap:   wrap;
}

.mc-zoom-gate {
  font-family: var(--font);
  font-size:   10px;
  color:       var(--status-warn);
  white-space: nowrap;
}

.mc-live-label {
  display:     flex;
  align-items: center;
  gap:         4px;
  font-family: var(--font);
  font-size:   10px;
  color:       var(--text-secondary);
  cursor:      pointer;
  white-space: nowrap;
  transition:  opacity var(--transition);
}
.mc-live-label input { cursor: pointer; accent-color: var(--accent); }

.mc-mmsi-wrap {
  display:     flex;
  align-items: center;
  gap:         3px;
}

.mc-mmsi-input,
.mc-apikey-input {
  padding:      2px 5px;
  font-family:  var(--font);
  font-size:    10px;
  color:        var(--text-primary);
  background:   var(--bg-primary);
  border:       1px solid var(--border-bright);
  border-radius: var(--radius);
  outline:      none;
}
.mc-mmsi-input  { width: 88px; }
.mc-apikey-input { width: 110px; }
.mc-mmsi-input:focus,
.mc-apikey-input:focus { border-color: var(--accent); }

.mc-apikey-label {
  display:     flex;
  align-items: center;
}

/* ── Ship Detail Drawer ─────────────────────────────────────────── */
.map-root {
  position: relative;   /* already flex column — just need position context */
}

.ship-drawer {
  position:   absolute;
  top:        0;
  right:      0;
  width:      220px;
  height:     100%;
  background: var(--bg-card);
  border-left: 1px solid var(--border-bright);
  z-index:    1100;
  display:    flex;
  flex-direction: column;
  overflow:   hidden;
  transform:  translateX(100%);
  transition: transform 0.2s ease;
  pointer-events: none;
}
.ship-drawer.open {
  transform:     translateX(0);
  pointer-events: auto;
}

.sd-header {
  display:       flex;
  align-items:   center;
  justify-content: space-between;
  padding:       6px 10px;
  border-bottom: 1px solid var(--border);
  flex-shrink:   0;
}
.sd-title {
  font-family: var(--font);
  font-size:   11px;
  font-weight: 700;
  color:       var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.sd-close {
  background:  transparent;
  border:      none;
  color:       var(--text-secondary);
  font-size:   16px;
  cursor:      pointer;
  line-height: 1;
  padding:     0 2px;
}
.sd-close:hover { color: var(--text-primary); }

.sd-body {
  flex:       1;
  overflow-y: auto;
  padding:    8px 10px;
}

.sd-field {
  display:       flex;
  flex-direction: column;
  margin-bottom: 6px;
}
.sd-label {
  font-family: var(--font);
  font-size:   9px;
  color:       var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 1px;
}
.sd-value {
  font-family: var(--font);
  font-size:   11px;
  color:       var(--text-primary);
  word-break:  break-all;
}

/* Trail section inside drawer */
.sd-trail-section {
  margin-top:   10px;
  padding-top:  8px;
  border-top:   1px solid var(--border);
}
.sd-trail-hdr {
  font-family:  var(--font);
  font-size:    9px;
  font-weight:  700;
  color:        var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}
.sd-trail-note {
  font-family: var(--font);
  font-size:   9px;
  color:       var(--text-dim);
  margin-bottom: 6px;
  line-height: 1.4;
}
.sd-trail-btns {
  display: flex;
  gap:     3px;
  margin-bottom: 4px;
}
.sd-trail-btn {
  padding:    2px 6px;
  font-family: var(--font);
  font-size:  10px;
  color:      var(--text-secondary);
  background: transparent;
  border:     1px solid var(--border-bright);
  border-radius: var(--radius);
  cursor:     pointer;
}
.sd-trail-btn:hover  { color: var(--text-primary); border-color: var(--accent); }
.sd-trail-btn.active { color: var(--bg-primary); background: var(--accent); border-color: var(--accent); }
.sd-trail-count {
  font-family: var(--font);
  font-size:   9px;
  color:       var(--text-dim);
  margin-top:  2px;
}

.sd-clear-btn {
  display:    block;
  width:      100%;
  margin-top: 10px;
  padding:    4px 0;
  font-family: var(--font);
  font-size:  10px;
  color:      var(--status-error);
  background: transparent;
  border:     1px solid var(--status-error);
  border-radius: var(--radius);
  cursor:     pointer;
  transition: background var(--transition), color var(--transition);
}
.sd-clear-btn:hover {
  background: var(--status-error);
  color:      #fff;
}

/* ── Ship / Port marker dots ────────────────────────────────────── */
/* Port — teal */
.nmk-dot-port {
  background: #14b8a6;
  box-shadow: 0 0 4px rgba(20, 184, 166, 0.65);
}

/* Live ship — amber */
.nmk-dot-ship {
  background: #f59e0b;
  box-shadow: 0 0 4px rgba(245, 158, 11, 0.65);
}

/* Tracked ship — bright accent + pulse */
.nmk-dot-ship-tracked {
  background:  var(--accent);
  box-shadow:  0 0 6px rgba(79, 156, 249, 0.9);
  animation:   nmk-pulse-tracked 1.4s ease-out infinite;
}
@keyframes nmk-pulse-tracked {
  0%   { box-shadow: 0 0 0 0   rgba(79, 156, 249, 0.8); }
  60%  { box-shadow: 0 0 0 8px rgba(79, 156, 249, 0);   }
  100% { box-shadow: 0 0 0 0   rgba(79, 156, 249, 0);   }
}

/* ── Legend additions for ships ─────────────────────────────────── */
.ml-port    { background: #14b8a6; }
.ml-ship    { background: #f59e0b; }
.ml-tracked { background: var(--accent); box-shadow: 0 0 4px rgba(79,156,249,0.7); }

/* ── Ship popup hint line ────────────────────────────────────────── */
.nmp-ship-hint {
  font-size:   9px;
  color:       var(--text-dim);
  margin-top:  4px;
  font-style:  italic;
}

/* ════════════════════════════════════════════════════════════════════
   Flights source — marker dots, legend, controls
   ═══════════════════════════════════════════════════════════════════ */

/* ── Airport / air base marker dots ─────────────────────────────── */
/* Major civil airport — red */
.nmk-dot-airport {
  background: #ef4444;
  box-shadow: 0 0 4px rgba(239, 68, 68, 0.65);
}

/* Minor civil airport (no IATA) — lighter red, smaller */
.nmk-dot-airport-minor {
  background: #fca5a5;
  box-shadow: 0 0 3px rgba(252, 165, 165, 0.55);
  width:         7px;
  height:        7px;
  top:           3.5px;
  left:          3.5px;
}

/* Military air base — dark crimson */
.nmk-dot-airbase {
  background: #991b1b;
  box-shadow: 0 0 4px rgba(153, 27, 27, 0.7);
}

/* Military aircraft — purple */
.nmk-dot-aircraft-military {
  background: #7c3aed;
  box-shadow: 0 0 4px rgba(124, 58, 237, 0.65);
}

/* Tracked aircraft — accent + pulse */
.nmk-dot-aircraft-tracked {
  background:  var(--accent);
  box-shadow:  0 0 6px rgba(79, 156, 249, 0.9);
  animation:   nmk-pulse-tracked 1.4s ease-out infinite;
}

/* ── Legend dots for flights ─────────────────────────────────────── */
.ml-airport      { background: #ef4444; }
.ml-airbase      { background: #991b1b; }
.ml-aircraft-mil { background: #7c3aed; }
.ml-fl-tracked   { background: var(--accent); box-shadow: 0 0 4px rgba(79,156,249,0.7); }

/* ── Flights-specific control bar elements ───────────────────────── */
.mc-restrict-note {
  font-size:   9px;
  color:       var(--text-dim);
  margin-left: 3px;
  cursor:      help;
}