/* PlotTARSA modern app shell - light theme (Flatly base) */
:root {
  --pt-accent: #2386d1;
  --pt-accent-2: #00a884;
  --pt-bg: #f5f7fa;
  --pt-panel: #ffffff;
  --pt-panel-2: #eef2f7;
  --pt-border: #d8dee6;
  --pt-text: #1f2d3d;
  --pt-text-muted: #5a6b7e;
}

html, body {
  height: 100%;
  background: var(--pt-bg);
  color: var(--pt-text);
}

.app-shell {
  padding: 0 8px 16px;
  min-height: 100vh;
  background: var(--pt-bg);
}

/* Navbar */
.app-navbar {
  background: linear-gradient(90deg, #ffffff 0%, #edf4fb 100%) !important;
  border-bottom: 1px solid var(--pt-border);
  box-shadow: 0 2px 14px rgba(31, 45, 61, 0.1);
  margin-bottom: 8px;
}
.app-navbar .navbar-brand {
  color: var(--pt-text);
  font-weight: 700;
  letter-spacing: 0.5px;
  font-size: 1.25rem;
}
.brand-accent {
  color: var(--pt-accent);
}
.panel-toggle-btn {
  white-space: nowrap;
}

/* Sidebar */
.sidebar-card,
.profiles-card,
.map-card {
  background: var(--pt-panel) !important;
  border: 1px solid var(--pt-border) !important;
  border-radius: 10px;
}
.sidebar-header,
.profiles-header {
  background: var(--pt-panel-2);
  border-bottom: 1px solid var(--pt-border);
  font-weight: 600;
}
.sidebar-tabs .nav-link {
  color: var(--pt-text-muted) !important;
  border-radius: 8px 8px 0 0;
  font-weight: 500;
}
.sidebar-tabs .nav-link.active {
  color: var(--pt-accent) !important;
  background: transparent;
  border-bottom: 2px solid var(--pt-accent);
}
.sidebar-tabs .nav-link:hover {
  color: var(--pt-text) !important;
}

/* Map */
.map-col { display: flex; flex-direction: column; }
.map-card { flex: 1 1 auto; }
.map-card-body { padding: 0 !important; border-radius: 10px; overflow: hidden; }
.map-stage { position: relative; }
.deck-map-container {
  width: 100%;
  border-radius: 10px;
}
.level-slider-overlay {
  position: absolute;
  top: 50%;
  right: 14px;
  z-index: 5;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 92px;
  padding: 12px 10px;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(216, 222, 230, 0.95);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(31, 45, 61, 0.16);
  backdrop-filter: blur(6px);
}
.level-slider-label {
  margin-bottom: 8px;
  color: var(--pt-text);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: center;
  text-transform: uppercase;
}
.level-slider-overlay .rc-slider-vertical {
  margin: 0 auto;
}
.level-slider-overlay .rc-slider-mark-text {
  color: var(--pt-text-muted);
  font-size: 0.7rem;
  white-space: nowrap;
}
.level-slider-overlay .rc-slider-track {
  background-color: var(--pt-accent);
}
.level-slider-overlay .rc-slider-handle {
  border-color: var(--pt-accent);
  box-shadow: 0 0 0 4px rgba(35, 134, 209, 0.16);
}
.time-slider-overlay {
  position: absolute;
  right: 118px;
  bottom: 14px;
  left: 118px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 18px 14px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(216, 222, 230, 0.95);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(31, 45, 61, 0.16);
  backdrop-filter: blur(6px);
}
.time-slider-body {
  flex: 1 1 auto;
  min-width: 0;
}
.time-play-toggle {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  box-shadow: 0 8px 18px rgba(35, 134, 209, 0.22);
}
.time-slider-overlay .rc-slider {
  margin: 4px 8px 0;
}
.time-slider-overlay .rc-slider-mark-text {
  color: var(--pt-text-muted);
  font-size: 0.7rem;
}
.time-slider-overlay .rc-slider-track {
  background-color: var(--pt-accent);
}
.time-slider-overlay .rc-slider-handle {
  border-color: var(--pt-accent);
  box-shadow: 0 0 0 4px rgba(35, 134, 209, 0.16);
}
.colorbar-img {
  width: 86%;
  display: block;
  margin: 6px auto 0;
  border-radius: 4px;
}
.time-label {
  text-align: center;
  font-weight: 600;
  color: var(--pt-accent-2);
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.time-current {
  text-align: center;
  font-weight: 500;
  margin-top: 4px;
  color: var(--pt-text-muted);
  font-variant-numeric: tabular-nums;
}
.map-time-current {
  margin: 0 0 2px;
  color: var(--pt-text);
  font-size: 0.82rem;
  font-weight: 700;
}

/* Profiles */
.profile-list { max-height: 160px; overflow-y: auto; }
.profile-graph { height: 360px; }

/* Inputs */
.form-control, .form-select {
  background-color: #ffffff !important;
  color: var(--pt-text) !important;
  border-color: var(--pt-border) !important;
}
.form-control:focus,
.form-select:focus {
  background-color: #ffffff !important;
  color: var(--pt-text) !important;
  border-color: var(--pt-accent) !important;
  box-shadow: 0 0 0 0.2rem rgba(35, 134, 209, 0.18);
}

/* Toasts */
.toast-container-fixed {
  position: fixed;
  top: 70px;
  right: 16px;
  z-index: 1080;
  width: 360px;
}

kbd {
  background: var(--pt-panel-2);
  border: 1px solid var(--pt-border);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 0.85em;
  color: var(--pt-accent);
}

/* Responsive: stack columns on small screens */
@media (max-width: 991px) {
  .map-card-body .deck-map-container { height: 60vh !important; }
  .profile-graph { height: 300px; }
  .level-slider-overlay {
    right: 10px;
    min-width: 82px;
    padding: 10px 8px;
  }
  .time-slider-overlay {
    right: 96px;
    bottom: 10px;
    left: 12px;
    gap: 10px;
    padding: 9px 14px 13px;
  }
  .time-play-toggle {
    width: 34px;
    height: 34px;
  }
}

/* maplibre attribution tidy-up (kept visible per OSM policy) */
.maplibregl-ctrl-attrib {
  background: rgba(255, 255, 255, 0.78) !important;
  border-radius: 4px 0 0 0;
}
.maplibregl-ctrl-attrib a { color: var(--pt-accent) !important; }