* {
  box-sizing: border-box;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

:root {
  --bg-page: #ffffff;
  --bg-panel: #f4f6f9;
  --border-panel: #ccd3dc;
  --bg-card: #ffffff;
  --border-card: #e0e4e9;
  --bg-card-soft: #f4f6f9;
  --heading-color: #1a2230;
  --heading-border: #eee;
  --text-primary: #1a2230;
  --text-secondary: #444;
  --text-tertiary: #555;
  --text-hint: #666;
  --dashed-border: #eee;
  --input-bg: #ffffff;
  --input-border: #ccd3dc;
  --input-text: #1a2230;
  --shadow-card: rgba(0, 0, 0, 0.08);
}

html[data-theme="dark"] {
  --bg-page: #11151c;
  --bg-panel: #161b24;
  --border-panel: #2a3140;
  --bg-card: #1b212c;
  --border-card: #2a3140;
  --bg-card-soft: #20262f;
  --heading-color: #e8ecf1;
  --heading-border: #2f3744;
  --text-primary: #e8ecf1;
  --text-secondary: #c3c9d4;
  --text-tertiary: #aab2bf;
  --text-hint: #8b93a1;
  --dashed-border: #333c4a;
  --input-bg: #20262f;
  --input-border: #39424f;
  --input-text: #e8ecf1;
  --shadow-card: rgba(0, 0, 0, 0.5);
}

html, body, #app {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

body {
  background: var(--bg-page);
  color: var(--text-primary);
}

#app {
  display: grid;
  grid-template-rows: auto 1fr;
  grid-template-columns: 1fr 320px;
  grid-template-areas:
    "topbar topbar"
    "map panel";
  height: 100vh;
}

#topbar {
  grid-area: topbar;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 8px 16px;
  background: #1a2230;
  color: #fff;
  flex-wrap: wrap;
}

#topbar h1 {
  margin: 0;
  font-size: 18px;
  white-space: nowrap;
}

.search-box {
  display: flex;
  gap: 4px;
}

.search-box input {
  padding: 6px 8px;
  border-radius: 4px;
  border: none;
  width: 220px;
}

.search-box button, .sim-controls button {
  padding: 6px 10px;
  border: none;
  border-radius: 4px;
  background: #3a4a63;
  color: #fff;
  cursor: pointer;
}

.search-box button:hover, .sim-controls button:hover {
  background: #4d617f;
}

.stats {
  display: flex;
  gap: 16px;
  margin-left: auto;
  flex-wrap: wrap;
}

.stat {
  display: flex;
  flex-direction: column;
  font-size: 12px;
  min-width: 90px;
}

.stat .label {
  color: #9aa7bd;
}

.stat .value {
  font-weight: bold;
  font-size: 14px;
}

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

#map {
  grid-area: map;
  height: 100%;
  width: 100%;
}

#panel {
  grid-area: panel;
  background: var(--bg-panel);
  border-left: 1px solid var(--border-panel);
  overflow-y: auto;
  padding: 12px;
}

.panel-section {
  margin-bottom: 16px;
  background: var(--bg-card);
  border-radius: 6px;
  padding: 10px;
  box-shadow: 0 1px 2px var(--shadow-card);
}

.panel-section h2 {
  margin: 0 0 8px 0;
  font-size: 14px;
  color: var(--heading-color);
  border-bottom: 1px solid var(--heading-border);
  padding-bottom: 4px;
}

.mode-buttons {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}

.mode-btn {
  flex: 1;
  padding: 6px;
  border: 1px solid var(--input-border);
  background: var(--bg-card);
  color: var(--text-primary);
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}

.mode-btn.active {
  background: #2980b9;
  color: #fff;
}

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

.build-actions button {
  flex: 1;
  margin: 4px 0;
  padding: 6px 10px;
  border: none;
  border-radius: 4px;
  background: #2980b9;
  color: #fff;
  cursor: pointer;
  font-size: 12px;
}

.build-actions button:disabled {
  background: #aab4c0;
  cursor: not-allowed;
}

.hint {
  font-size: 11px;
  color: var(--text-hint);
  margin: 6px 0;
}

.hidden {
  display: none !important;
}

.lines-list, .saves-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 260px;
  overflow-y: auto;
}

.line-card {
  border: 1px solid var(--border-card);
  border-radius: 4px;
  padding: 6px 8px;
  font-size: 12px;
}

.line-card .line-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: bold;
  margin-bottom: 4px;
}

.line-color-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
}

.line-card .line-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 8px;
  color: var(--text-secondary);
}

.line-card button {
  margin-top: 4px;
  margin-right: 4px;
  font-size: 11px;
  padding: 3px 6px;
  border: 1px solid var(--input-border);
  background: var(--bg-card);
  color: var(--text-primary);
  border-radius: 4px;
  cursor: pointer;
}

.line-card .line-name-input {
  font-weight: bold;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-primary);
  font-size: 12px;
  padding: 1px 2px;
  border-radius: 3px;
  flex: 1;
}

.line-card .line-name-input:hover, .line-card .line-name-input:focus {
  border-color: var(--input-border);
  background: var(--bg-card);
}

.route-list {
  margin-top: 4px;
  font-size: 11px;
  color: var(--text-tertiary);
}

.route-list div {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px dashed var(--dashed-border);
  padding: 2px 0;
}

.budget-edit {
  display: flex;
  gap: 6px;
}

.budget-edit input {
  flex: 1;
  padding: 5px 6px;
  border: 1px solid var(--input-border);
  border-radius: 4px;
  background: var(--input-bg);
  color: var(--input-text);
}

.budget-edit button {
  padding: 5px 10px;
  border: none;
  border-radius: 4px;
  background: #2980b9;
  color: #fff;
  cursor: pointer;
  font-size: 12px;
}

.save-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.save-controls input {
  flex: 1;
  min-width: 100px;
  padding: 5px 6px;
  border: 1px solid var(--input-border);
  border-radius: 4px;
  background: var(--input-bg);
  color: var(--input-text);
}

.save-controls button {
  padding: 5px 8px;
  border: none;
  border-radius: 4px;
  background: #27ae60;
  color: #fff;
  cursor: pointer;
  font-size: 12px;
}

.save-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid var(--border-card);
  border-radius: 4px;
  padding: 5px 8px;
  font-size: 12px;
}

.save-card .save-actions button {
  margin-left: 4px;
  padding: 3px 6px;
  font-size: 11px;
  border: 1px solid var(--input-border);
  background: var(--bg-card);
  color: var(--text-primary);
  border-radius: 4px;
  cursor: pointer;
}

.economy-info {
  font-size: 11px;
  color: var(--text-tertiary);
  line-height: 1.5;
}

.economy-info div {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px dashed var(--dashed-border);
  padding: 2px 0;
}

.economy-type-header {
  font-weight: bold;
  color: var(--heading-color);
  margin-top: 8px;
  border-bottom: none !important;
}

.economy-type-header:first-child {
  margin-top: 0;
}

/* Map markers */
.station-marker {
  border-radius: 50%;
  border: 2px solid #222;
  background: #fff;
}

.demand-marker {
  border-radius: 50%;
  opacity: 0.35;
  border: none;
}

.vehicle-marker {
  border-radius: 50%;
  border: 1px solid #fff;
}

.waypoint-marker {
  border-radius: 50%;
  cursor: move;
}

/* Editor de estação (popup) */
.station-popup {
  font-size: 12px;
  min-width: 180px;
  max-height: 290px;
  overflow-y: auto;
}

.station-popup label {
  display: block;
  margin-bottom: 6px;
}

.station-popup input[type=text] {
  width: 100%;
  padding: 4px 6px;
  margin-top: 2px;
  border: 1px solid var(--input-border);
  border-radius: 4px;
  background: var(--input-bg);
  color: var(--input-text);
}

.station-lines-info {
  margin-bottom: 6px;
  color: var(--text-secondary);
}

.station-line-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  padding: 3px 0;
}

.station-line-chip span:nth-child(2) {
  flex: 1;
}

.chip-remove {
  border: none;
  background: transparent;
  color: #c0392b;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
}

.add-line-toggle {
  display: block;
  width: 100%;
  margin: 6px 0;
  padding: 5px 8px;
  border: 1px dashed var(--input-border);
  background: var(--bg-card-soft);
  color: var(--text-primary);
  border-radius: 4px;
  cursor: pointer;
  font-size: 11px;
}

.add-line-form {
  border: 1px solid var(--border-card);
  border-radius: 4px;
  padding: 6px 8px;
  margin-bottom: 6px;
}

.add-line-form label {
  display: block;
  font-size: 11px;
  margin: 4px 0;
}

.add-line-form select,
.add-line-form input[type=text] {
  display: block;
  width: 100%;
  margin-top: 2px;
  padding: 4px 6px;
  border: 1px solid var(--input-border);
  border-radius: 4px;
  background: var(--input-bg);
  color: var(--input-text);
  font-size: 11px;
}

.add-line-form input[type=color] {
  margin-top: 2px;
}

.add-line-confirm {
  width: 100%;
  margin-top: 4px;
  padding: 5px 8px;
  border: none;
  border-radius: 4px;
  background: #27ae60;
  color: #fff;
  cursor: pointer;
  font-size: 11px;
}

.station-popup .station-remove-btn {
  background: #c0392b;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 5px 8px;
  cursor: pointer;
  font-size: 11px;
  width: 100%;
  margin-top: 6px;
}

.waypoint-popup {
  font-size: 12px;
  min-width: 160px;
}

.waypoint-popup .waypoint-remove-btn {
  background: #c0392b;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 5px 8px;
  cursor: pointer;
  font-size: 11px;
  width: 100%;
  margin-top: 4px;
}

/* Tema escuro - chrome do Leaflet (popups, controles de zoom, atribuição) */
html[data-theme="dark"] .leaflet-popup-content-wrapper,
html[data-theme="dark"] .leaflet-popup-tip {
  background: var(--bg-card);
  color: var(--text-primary);
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.6);
}

html[data-theme="dark"] .leaflet-bar a {
  background: var(--bg-card);
  color: var(--text-primary);
  border-bottom-color: var(--border-card);
}

html[data-theme="dark"] .leaflet-bar a:hover {
  background: var(--bg-card-soft);
}

html[data-theme="dark"] .leaflet-control-attribution {
  background: rgba(27, 33, 44, 0.8);
  color: var(--text-hint);
}

html[data-theme="dark"] .leaflet-control-attribution a {
  color: var(--text-secondary);
}