/* @moonlight/ui v0.3.2 — tokens/tokens.css */
:root {
  --bg: #0f1117;
  --surface: #1a1d27;
  --border: #2a2d3a;
  --text: #e1e4ed;
  --text-muted: #8b8fa3;
  --primary: #6366f1;
  --primary-hover: #818cf8;
  --active: #22c55e;
  --pending: #f59e0b;
  --inactive: #ef4444;
  --font-mono: "SF Mono", "Fira Code", monospace;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* @moonlight/ui v0.3.2 — base-styles/base-styles.css */
/* Base reset + body */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
}

h2 {
  margin: 1rem 0 0.5rem;
}

h3 {
  margin: 1.5rem 0 0.5rem;
  color: var(--text-muted);
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Layout */
.container {
  max-width: 1200px;
  margin: 2rem auto;
  padding: 0 1.5rem;
}

/* Stat cards */
.stats-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 1rem 0 2rem;
}

.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem 1.5rem;
  min-width: 120px;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.stat-card.active {
  border-color: var(--active);
}

.stat-card.pending {
  border-color: var(--pending);
}

.stat-card.inactive {
  border-color: var(--inactive);
}

.stat-value {
  font-size: 1.5rem;
  font-weight: 700;
}

.stat-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Utilities */
.mono {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  word-break: break-all;
}

.error-text {
  color: var(--inactive);
  font-size: 0.875rem;
}

.hint-text {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 1rem;
}

.empty-state {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 2rem;
  margin-top: 1rem;
}

.empty-state p {
  margin-bottom: 0.75rem;
}

/* Badges */
.badge {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
}

.badge-active {
  background: rgba(34, 197, 94, 0.15);
  color: var(--active);
}

.badge-pending {
  background: rgba(245, 158, 11, 0.15);
  color: var(--pending);
}

.badge-inactive {
  background: rgba(239, 68, 68, 0.15);
  color: var(--inactive);
}

/* Forms */
.form-group {
  margin-bottom: 1rem;
  position: relative;
}

.form-group label {
  display: block;
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-bottom: 0.25rem;
}

.form-group input,
.form-group select {
  width: 100%;
  padding: 0.6rem 0.75rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 0.875rem;
  font-family: var(--font-mono);
}

.form-group input:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--primary);
}

.form-row {
  display: flex;
  gap: 1rem;
  align-items: flex-end;
  flex-wrap: wrap;
}

.form-row .form-group {
  flex: 1;
  min-width: 150px;
}

/* Buttons */
.btn-primary {
  background: var(--primary);
  color: white;
  border: none;
  padding: 0.6rem 1.5rem;
  border-radius: 6px;
  font-size: 0.875rem;
  cursor: pointer;
  transition: background 0.15s;
}

.btn-primary:hover {
  background: var(--primary-hover);
}

.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-wide {
  width: 100%;
  padding: 0.75rem;
  font-size: 1rem;
}

.btn-link {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 0.875rem;
  cursor: pointer;
  padding: 0;
}

.btn-link:hover {
  color: var(--text);
}

/* Cards (login / generic card layout) */
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.login-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 2.5rem;
  width: 100%;
  max-width: 420px;
}

.login-card h1 {
  margin-bottom: 0.5rem;
  color: var(--primary);
}

.login-card p {
  color: var(--text-muted);
  font-size: 0.875rem;
  margin-bottom: 1.5rem;
}

/* Misc banner */
.version-mismatch-banner {
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid var(--border);
  padding: 0.4rem 1.5rem;
  font-size: 0.75rem;
  text-align: center;
}

/* @moonlight/ui v0.3.2 — nav/nav.css */
nav {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 0.75rem 1.5rem;
}

.nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-brand {
  font-weight: 700;
  font-size: 1rem;
  color: var(--primary);
  text-decoration: none;
}

.nav-links {
  display: flex;
  gap: 1.25rem;
  align-items: center;
}

.nav-links a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.875rem;
  transition: color 0.15s;
}

.nav-links a:hover {
  color: var(--text);
}

.nav-address {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-muted);
  background: var(--bg);
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  border: 1px solid var(--border);
}

.version-badge {
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--text-muted);
  background: var(--border);
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  vertical-align: middle;
  margin-left: 0.5rem;
}

.icon-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  padding: 0.35rem;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}

.icon-btn:hover {
  color: var(--text);
  background: var(--surface);
}

/* @moonlight/ui v0.3.2 — stepper/stepper.css */
.onboarding-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 2.5rem;
  padding: 1.5rem 0 0;
}

.onboarding-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  min-width: 80px;
}

.step-dot {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
  background: var(--surface);
  border: 2px solid var(--border);
  color: var(--text-muted);
}

.onboarding-step.active .step-dot {
  border-color: var(--primary);
  background: var(--primary);
  color: white;
}

.onboarding-step.done .step-dot {
  border-color: var(--active);
  background: var(--active);
  color: white;
}

.step-label {
  font-size: 0.7rem;
  color: var(--text-muted);
  text-align: center;
  white-space: nowrap;
}

.onboarding-step.active .step-label {
  color: var(--text);
  font-weight: 600;
}

.onboarding-step.done .step-label {
  color: var(--active);
}

.step-line {
  flex: 1;
  height: 2px;
  background: var(--border);
  min-width: 40px;
  margin: 0 0.25rem;
  margin-bottom: 1.4rem;
}

.step-line.done {
  background: var(--active);
}

.onboarding-content {
  max-width: 600px;
  margin: 0 auto;
}

/* @moonlight/ui v0.3.2 — world-map/world-map.css */
/*
 * Styles for the @moonlight/ui world-map component.
 *
 * Consumers should fetch this file at build time alongside tokens.css /
 * base-styles.css. The component itself ships unstyled — every visual
 * rule lives here so dark / light themes can be swapped by overriding
 * the tokens upstream.
 */

.world-map-host {
  width: 100%;
  height: 100%;
  position: relative;
  background: transparent;
}

.world-map-svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Baseline land fill for every country / region path in the SVG —
   simple-world-map.svg ships paths with no fill attribute (default
   black), and not every ISO code is in our COUNTRIES table, so any
   untagged path would render as black against the dark page bg. */
.world-map-svg path,
.world-map-svg g[id] {
  fill: var(--border);
  stroke: var(--bg);
  stroke-width: 0.4;
}

.world-map-country {
  fill: var(--border);
  stroke: var(--bg);
  stroke-width: 0.4;
  cursor: pointer;
  transition: fill 120ms ease-out;
}

.world-map-country path {
  /* Inner paths inside a tagged <g> should inherit the same fill so the
     whole country lights up on selection. */
  fill: inherit;
  stroke: inherit;
  stroke-width: inherit;
}

.world-map-country:hover {
  fill: var(--primary-hover);
}

.world-map-country:hover path {
  fill: var(--primary-hover);
}

.world-map-country.selected {
  fill: var(--primary);
}

.world-map-country.selected path {
  fill: var(--primary);
}

.world-map-error {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 0.875rem;
  font-style: italic;
}

/* council-console app-styles */
/*
 * App-specific styles for council-console.
 *
 * Tokens + base-styles + nav + stepper now come from @moonlight/ui at the
 * pinned tag — fetched and concatenated into public/styles.css by src/build.ts.
 * This file contains ONLY selectors the lib does not ship.
 */

/* Tables */
table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
}

th, td {
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

th.text-right, td.text-right {
  text-align: right !important;
}
th.text-center, td.text-center {
  text-align: center !important;
}
th.text-left, td.text-left {
  text-align: left !important;
}

th {
  color: var(--text-muted);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* File-input override (lib's .form-group input rule sets font-mono) */
.form-group input[type="file"] {
  font-family: var(--font-sans);
  padding: 0.5rem;
}

/* Deploy steps */
.deploy-step {
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  color: var(--text-muted);
  border-left: 3px solid var(--border);
  margin-bottom: 0.25rem;
}

.deploy-step-active {
  color: var(--text);
  border-left-color: var(--primary);
}

.deploy-step-done {
  color: var(--active);
  border-left-color: var(--active);
}

.deploy-step-done::before {
  content: "\2713 ";
}

.deploy-step-error {
  color: var(--inactive);
  border-left-color: var(--inactive);
}

.deploy-step-error::before {
  content: "\2717 ";
}

/* Jurisdiction picker */
.jurisdiction-picker {
  position: relative;
}
.jurisdiction-picker .jurisdiction-dropdown {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 10;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  max-height: 200px;
  overflow-y: auto;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  display: none;
}
.jurisdiction-picker.open .jurisdiction-dropdown {
  display: block;
}

.jurisdiction-list {
  padding: 0.25rem 0;
}

.jurisdiction-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.75rem;
  font-size: 0.8rem;
  cursor: pointer;
  color: var(--text);
}

.jurisdiction-option:hover {
  background: var(--surface);
}
.jurisdiction-option.selected {
  background: var(--surface);
  color: var(--active);
}

.jurisdiction-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.5rem;
}

.jurisdiction-tag {
  display: inline-flex;
  align-items: center;
  background: var(--border);
  color: var(--text);
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-family: var(--font-mono);
}

/* Asset badges */
.asset-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.5rem 0.3rem 0.75rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text);
}

.asset-remove {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 0 0.15rem;
  border-radius: 50%;
}

.asset-remove:hover {
  color: var(--inactive);
}

/* Inline edit */
.inline-edit {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  border-radius: 4px;
  position: relative;
}

.inline-edit[data-field="description"] {
  display: flex;
  width: 100%;
}

.inline-edit .edit-icon {
  color: var(--text-muted);
  opacity: 0;
  transition: opacity 0.15s;
  flex-shrink: 0;
}

.inline-edit:hover .edit-icon {
  opacity: 1;
}

.inline-edit-input {
  background: var(--bg);
  border: 1px solid var(--primary);
  border-radius: 4px;
  color: var(--text);
  font-family: var(--font-sans);
  padding: 0.2rem 0.4rem;
  outline: none;
}

.inline-edit-input.edit-title {
  font-size: 1.5rem;
  font-weight: 700;
}

.inline-edit-input.edit-email {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.inline-edit-input.edit-description {
  font-size: 0.85rem;
  color: var(--text-muted);
  width: 100%;
}

/* List items */
.list-item {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.85rem;
}

.list-item:last-child {
  border-bottom: none;
}

/* Modal */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.modal-overlay[hidden] {
  display: none;
}

.modal-header {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  margin-bottom: 1rem;
}

.modal {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.5rem;
  width: 90%;
  max-width: 460px;
  max-height: 80vh;
  overflow-y: auto;
}

/* Jurisdiction map */
.jurisdiction-map {
  margin: 1rem 0;
  border-radius: 8px;
  height: 400px;
  overflow: hidden;
}

.jurisdiction-map svg {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Page header */
.page-header {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
}

/* Council detail header */
.council-header {
  display: grid;
  grid-template-columns: auto auto auto 1fr auto;
  align-items: baseline;
  gap: 0.75rem;
}

.council-header h2 {
  margin: 0;
  white-space: nowrap;
}

.council-header .header-icons {
  display: flex;
  gap: 0.25rem;
  justify-self: end;
}

/* Council-specific override for the remove-from-console icon */
.icon-btn[title="Remove from console"]:hover {
  color: var(--inactive);
}

/* Balance warning */
.balance-warning {
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid var(--pending);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  font-size: 0.85rem;
  color: var(--text);
  margin-bottom: 1.5rem;
}