/* ==========================================================================
   Galaxy View — scoped under .galaxy-root so nothing leaks into admin chrome.
   ========================================================================== */

.galaxy-root {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #000;
  font-family: 'Segoe UI', Helvetica, Arial, sans-serif;
  color: #cfe6ff;
  user-select: none;
}
.galaxy-root canvas { display: block; }

/* Hover tooltip (follows cursor) */
.galaxy-root .g-tooltip {
  position: absolute; pointer-events: none; z-index: 10;
  padding: 6px 10px; background: rgba(8,14,24,0.85); border: 1px solid rgba(120,180,255,0.35);
  border-radius: 4px; font-size: 12px; letter-spacing: 0.5px; white-space: nowrap;
  box-shadow: 0 0 20px rgba(0,150,255,0.25); opacity: 0; transition: opacity 120ms;
  font-family: 'Consolas', monospace;
}
.galaxy-root .g-tooltip .t-name { color: #fff; font-weight: 600; }
.galaxy-root .g-tooltip .t-fac { color: #9ac7ff; font-size: 11px; margin-top: 2px; }

/* Legend (top-left) */
.galaxy-root .g-legend {
  position: absolute; top: 16px; left: 16px; z-index: 8;
  padding: 14px 16px; background: rgba(6,10,18,0.7); border: 1px solid rgba(90,150,220,0.25);
  border-radius: 3px; backdrop-filter: blur(6px); min-width: 220px;
  box-shadow: 0 0 30px rgba(0,100,200,0.15);
}
.galaxy-root .g-legend .title { font-size: 10px; letter-spacing: 3px; color: #7fb6ff; text-transform: uppercase; margin-bottom: 10px; border-bottom: 1px solid rgba(120,180,255,0.2); padding-bottom: 8px; }
.galaxy-root .g-legend .row { display: flex; align-items: center; gap: 10px; padding: 5px 4px; cursor: pointer; font-size: 12px; border-radius: 2px; transition: background 120ms; }
.galaxy-root .g-legend .row:hover { background: rgba(80,140,220,0.15); }
.galaxy-root .g-legend .dot { width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 8px currentColor; flex-shrink: 0; }
.galaxy-root .g-legend .tag { font-family: Consolas, monospace; color: #6d94c9; font-size: 11px; min-width: 36px; }
.galaxy-root .g-legend .name { color: #e0efff; }

/* Filters (top-left — where the legend used to be) */
.galaxy-root .g-filters {
  position: absolute; top: 16px; left: 16px; z-index: 8;
  padding: 8px 10px; background: rgba(6,10,18,0.7); border: 1px solid rgba(90,150,220,0.25);
  border-radius: 3px; backdrop-filter: blur(6px);
  display: flex; flex-direction: column; gap: 4px;
  min-width: 200px;
}
.galaxy-root .g-filter-row {
  display: flex; align-items: center; gap: 10px; padding: 4px 6px;
  font-family: Consolas, monospace; font-size: 11px; letter-spacing: 2px;
  color: #9ac7ff; cursor: pointer; user-select: none;
  border-radius: 2px; transition: background 120ms;
}
.galaxy-root .g-filter-row:hover { background: rgba(80,140,220,0.15); }
.galaxy-root .g-filter-row .chk {
  width: 12px; height: 12px; border: 1px solid rgba(120,180,255,0.55);
  border-radius: 2px; position: relative; flex-shrink: 0;
  transition: background 120ms, box-shadow 120ms;
}
.galaxy-root .g-filter-row.active .chk {
  background: rgba(120,180,255,0.85);
  box-shadow: 0 0 8px rgba(120,180,255,0.6);
}
.galaxy-root .g-filter-row.active .chk::after {
  content: '✓'; position: absolute; top: -3px; left: 1px; font-size: 11px; color: #04060c; font-weight: 700;
}
.galaxy-root .g-filter-row.active { color: #cfe6ff; }
.galaxy-root .g-filter-row .label { flex: 1; }
.galaxy-root .g-filter-row .count { color: #5d87bb; font-size: 10px; }

.galaxy-root .g-filter-legend {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 6px; font-family: Consolas, monospace; font-size: 9px; letter-spacing: 1.5px;
  color: #6d94c9; border-top: 1px dashed rgba(120,180,255,0.15); margin-top: 2px; padding-top: 6px;
}
.galaxy-root .g-filter-legend .dot-flagged {
  width: 10px; height: 10px; border-radius: 50%;
  background: transparent; border: 2px solid rgba(255, 60, 80, 0.9);
  box-shadow: 0 0 8px rgba(255, 60, 80, 0.8);
  animation: g-flag-pulse 1.4s ease-in-out infinite;
}
@keyframes g-flag-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.45; transform: scale(0.85); }
}

/* Reset button (top-right) */
.galaxy-root .g-reset-btn {
  position: absolute; top: 16px; right: 16px; z-index: 9;
  padding: 8px 14px; background: rgba(6,10,18,0.75); border: 1px solid rgba(120,180,255,0.35);
  border-radius: 3px; color: #9ac7ff; font-family: Consolas, monospace;
  font-size: 11px; letter-spacing: 2px; cursor: pointer; backdrop-filter: blur(6px);
  transition: background 120ms, color 120ms, border-color 120ms;
}
.galaxy-root .g-reset-btn:hover { background: rgba(30,60,100,0.8); color: #fff; border-color: rgba(180,220,255,0.6); }
.galaxy-root .g-reset-btn.hidden { display: none; }

/* Search (top-center) */
.galaxy-root .g-search {
  position: absolute; top: 16px; left: 50%; transform: translateX(-50%); z-index: 9;
  min-width: 260px; max-width: 340px;
  background: rgba(6,10,18,0.78); border: 1px solid rgba(120,180,255,0.3);
  border-radius: 3px; backdrop-filter: blur(6px);
  box-shadow: 0 0 30px rgba(0,100,200,0.15);
}
.galaxy-root .g-search input {
  width: 100%; box-sizing: border-box;
  background: transparent; border: none; outline: none;
  color: #e0efff; font-family: Consolas, monospace; font-size: 12px;
  letter-spacing: 2px; padding: 10px 14px;
}
.galaxy-root .g-search input::placeholder { color: #5d87bb; }
.galaxy-root .g-search-results {
  max-height: 260px; overflow-y: auto;
  border-top: 1px solid rgba(120,180,255,0.15);
}
.galaxy-root .g-search-results:empty { display: none; }
.galaxy-root .g-search-results .item {
  padding: 7px 14px; cursor: pointer; font-size: 12px;
  display: flex; align-items: center; gap: 10px;
  transition: background 120ms;
}
.galaxy-root .g-search-results .item:hover,
.galaxy-root .g-search-results .item.active { background: rgba(80,140,220,0.18); }
.galaxy-root .g-search-results .item .sdot { width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 6px currentColor; flex-shrink: 0; }
.galaxy-root .g-search-results .item .sname { color: #e0efff; font-family: Consolas, monospace; flex: 1; }
.galaxy-root .g-search-results .item .sfac { color: #6d94c9; font-family: Consolas, monospace; font-size: 10px; }
.galaxy-root .g-search-results .empty { padding: 10px 14px; font-size: 11px; color: #5d87bb; font-family: Consolas, monospace; }

/* Focus HUD (bottom-center) */
.galaxy-root .g-focus-hud {
  position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); z-index: 8;
  padding: 8px 14px; background: rgba(6,10,18,0.8); border: 1px solid rgba(120,180,255,0.35);
  border-radius: 3px; font-family: Consolas, monospace; font-size: 11px; letter-spacing: 2px;
  color: #cfe6ff; backdrop-filter: blur(6px);
  box-shadow: 0 0 20px rgba(0,120,220,0.2);
  display: flex; align-items: center;
}
.galaxy-root .g-focus-hud.hidden { display: none; }
.galaxy-root .g-focus-hud .label { color: #7fb6ff; margin-right: 8px; }
.galaxy-root .g-focus-hud .fac { margin-left: 10px; }

/* Invoice image modal */
.galaxy-root .g-modal { position: absolute; inset: 0; z-index: 100; pointer-events: none; }
.galaxy-root .g-modal .m-backdrop {
  position: absolute; inset: 0; background: transparent;
  opacity: 0; transition: opacity 200ms;
  pointer-events: auto;
}
.galaxy-root .g-modal.hidden .m-backdrop { opacity: 0; pointer-events: none; }
.galaxy-root .g-modal:not(.hidden) .m-backdrop { opacity: 1; }
.galaxy-root .g-modal .m-card {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -45%) scale(0.96);
  background: rgba(8,14,24,0.92); border: 1px solid rgba(120,180,255,0.35);
  border-radius: 6px; box-shadow: 0 0 60px rgba(0,150,255,0.35), 0 0 120px rgba(0,80,160,0.2);
  width: min(640px, 86%); max-height: 86%;
  display: flex; flex-direction: column;
  pointer-events: auto;
  opacity: 0; transition: opacity 200ms, transform 200ms;
  backdrop-filter: blur(8px);
  z-index: 2;   /* sit above .m-backdrop so button clicks reach the card */
}
.galaxy-root .g-modal.hidden .m-card { opacity: 0; transform: translate(-50%, -45%) scale(0.96); pointer-events: none; }
.galaxy-root .g-modal:not(.hidden) .m-card { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.galaxy-root .g-modal .m-close {
  position: absolute; top: 8px; right: 12px; z-index: 2;
  background: transparent; border: 0; color: #6d94c9; font-size: 22px; line-height: 1;
  cursor: pointer; padding: 4px 8px; transition: color 120ms;
}
.galaxy-root .g-modal .m-close:hover { color: #fff; }
.galaxy-root .g-modal .m-header { padding: 16px 20px 12px; border-bottom: 1px solid rgba(120,180,255,0.18); }
.galaxy-root .g-modal .m-tag { font-family: Consolas, monospace; font-size: 11px; letter-spacing: 3px; color: #7fb6ff; }
.galaxy-root .g-modal .m-title { font-size: 17px; font-weight: 600; color: #fff; margin: 4px 0; letter-spacing: 0.5px; }
.galaxy-root .g-modal .m-sub { font-family: Consolas, monospace; font-size: 11px; color: #9ac7ff; }
.galaxy-root .g-modal .m-imgwrap {
  position: relative; flex: 1; overflow: hidden;
  background: #04060c; min-height: 200px;
  display: flex; align-items: center; justify-content: center;
}
.galaxy-root .g-modal .m-imgwrap img { max-width: 100%; max-height: 56vh; display: block; object-fit: contain; }
.galaxy-root .g-modal .m-imgwrap iframe { width: 100%; height: 56vh; min-height: 320px; border: 0; background: #04060c; }
.galaxy-root .g-modal .m-noimg { color: #5d87bb; font-family: Consolas, monospace; font-size: 12px; letter-spacing: 2px; padding: 60px 20px; }
.galaxy-root .g-modal .m-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(8,14,24,0.65); border: 1px solid rgba(120,180,255,0.4);
  color: #cfe6ff; width: 36px; height: 56px; border-radius: 4px;
  cursor: pointer; font-size: 22px; line-height: 1;
  transition: background 120ms, color 120ms;
}
.galaxy-root .g-modal .m-arrow:hover { background: rgba(40,90,160,0.85); color: #fff; }
.galaxy-root .g-modal .m-prev { left: 10px; }
.galaxy-root .g-modal .m-next { right: 10px; }
.galaxy-root .g-modal .m-arrow.hidden { display: none; }
.galaxy-root .g-modal .m-pageind {
  position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);
  padding: 4px 10px; background: rgba(8,14,24,0.75); border: 1px solid rgba(120,180,255,0.3);
  border-radius: 999px; font-family: Consolas, monospace; font-size: 10px; letter-spacing: 2px;
  color: #cfe6ff;
}
.galaxy-root .g-modal .m-pageind.hidden { display: none; }
.galaxy-root .g-modal .m-footer {
  padding: 14px 20px; border-top: 1px solid rgba(120,180,255,0.18);
  display: flex; justify-content: flex-end; gap: 10px;
}
.galaxy-root .g-modal .m-cta {
  display: inline-block; padding: 8px 16px;
  background: rgba(40,90,160,0.55); color: #d6ecff;
  border: 1px solid rgba(120,180,255,0.55); border-radius: 3px;
  font-family: Consolas, monospace; font-size: 11px; letter-spacing: 2px;
  text-decoration: none; cursor: pointer; transition: background 120ms;
}
.galaxy-root .g-modal .m-cta:hover { background: rgba(80,140,220,0.85); color: #fff; }