/* The Light / Dark / Auto switch that theme.js builds into <div data-theme-switch>.
 *
 * It carries its own colours so it looks the same wherever it is put (the
 * dashboard's settings, the map's cog, the haulier and admin pages); the text
 * takes the colour of the place it sits in. */

.theme-seg {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border-radius: 10px;
  background: rgba(118, 118, 128, 0.16);
  max-width: 100%;
}

.theme-seg .theme-seg__btn {
  flex: 1 1 0;
  min-width: 0;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 5px 14px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: inherit;
  font: 600 13px/1.2 inherit;
  letter-spacing: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s, box-shadow 0.15s;
}

.theme-seg .theme-seg__btn svg {
  flex: none;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.theme-seg .theme-seg__btn[aria-pressed="true"] {
  background: #fff;
  color: #1c1c1e;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18), 0 0 0 0.5px rgba(0, 0, 0, 0.04);
}

.theme-seg .theme-seg__btn:focus-visible {
  outline: 3px solid rgba(0, 122, 255, 0.55);
  outline-offset: 1px;
}

html[data-theme="dark"] .theme-seg { background: rgba(118, 118, 128, 0.32); }

html[data-theme="dark"] .theme-seg .theme-seg__btn[aria-pressed="true"] {
  background: #636366;
  color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* Icons only, for a header with little room (the label stays for screen readers). */
.theme-seg--compact .theme-seg__btn { padding: 5px 9px; min-width: 36px; }
.theme-seg--compact .theme-seg__btn span {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Inside a settings row it takes the width it is given and stays thumb-sized. */
.theme-seg--block { display: flex; width: 100%; }

@media (max-width: 480px) {
  .theme-seg .theme-seg__btn { min-height: 40px; padding: 6px 8px; }
}

/* The road and street base maps (their tile layers carry this class) are the same
   in both themes: the light map, a touch darker than Google's white so it rests the
   eye and the white roads and coloured overlays stand out. In dark theme only the
   page around the map goes dark (panels, cards, buttons, the zoom control, popups);
   an inverted map was dropped because the owner found it hard to read. Satellite
   imagery is left as it is. Pins, routes and popups sit above the tile pane and
   are not touched. (The same rule is repeated in review-skin.css; change both.) */
.aur-dark-tiles {
  filter: brightness(0.95) contrast(1.03);
}

/* Dark theme, every Leaflet map: what shows before tiles load, the zoom buttons,
   the attribution line and popups. Pages with their own treatment (the network
   map's cards, the review page's hover cards) set theirs on top of this. */
html[data-theme="dark"] .leaflet-container { background: #e6e3de; color: #f5f5f7; }   /* what shows before light tiles load */
html[data-theme="dark"] .leaflet-control-attribution { background: rgba(28, 28, 30, 0.75) !important; color: rgba(235, 235, 245, 0.66) !important; }
html[data-theme="dark"] .leaflet-control-attribution a { color: #64b5ff; }
html[data-theme="dark"] .leaflet-bar a,
html[data-theme="dark"] .leaflet-bar a:hover { background-color: #2c2c2e; color: #f5f5f7; border-bottom-color: rgba(255, 255, 255, 0.14); }
html[data-theme="dark"] .leaflet-bar a.leaflet-disabled { background-color: #232326; color: rgba(235, 235, 245, 0.3); }
html[data-theme="dark"] .leaflet-bar { box-shadow: 0 1px 5px rgba(0, 0, 0, 0.6); }
html[data-theme="dark"] .leaflet-popup-content-wrapper,
html[data-theme="dark"] .leaflet-popup-tip { background: #2c2c2e; color: #f5f5f7; }
html[data-theme="dark"] .leaflet-popup-close-button { color: rgba(235, 235, 245, 0.6); }
html[data-theme="dark"] .leaflet-tooltip { background: #2c2c2e; color: #f5f5f7; border-color: rgba(255, 255, 255, 0.14); }
html[data-theme="dark"] .leaflet-tooltip-top::before { border-top-color: #2c2c2e; }
html[data-theme="dark"] .leaflet-tooltip-bottom::before { border-bottom-color: #2c2c2e; }