/* Styling for the data management tab (offline map data packages). */

.dataPackageRow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  margin: 8px 0;
  background-color: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  /* the progress bar is positioned against this row, and clipped to its rounded corners */
  position: relative;
  overflow: hidden;


      background-color: rgba(0, 0, 0, 0.3);
      border-left: 5px solid rgb(228, 195, 47);
      border-top-left-radius: 0px;
      border-bottom-left-radius: 0px;
}

/* Download progress bar: sits flush along the bottom edge of the package block.
   Only the fill has a width, so it can be animated from 0% to 100%. */
.dataPackageProgressTrack {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background-color: rgba(255, 255, 255, 0.10);
  opacity: 0;                       /* hidden until a download starts */
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.dataPackageRowDownloading .dataPackageProgressTrack {
  opacity: 1;
}

.dataPackageProgressFill {
  width: 0%;
  height: 100%;
  background-color: rgb(228, 195, 47);
  transition: width 0.2s ease;
}

.dataPackageInfo {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.dataPackageName {
  font-weight: bold;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dataPackageMeta {
  font-size: 12px;
  opacity: 0.75;
}

.dataPackageProgress {
  min-width: 42px;
  text-align: right;
  font-size: 13px;
}

.dataPackageButton {
  flex-shrink: 0;
  margin: 0;
}

/* Basemap theme selector: a card per theme, each showing a small schematic preview of its
   palette so the choice can be made by eye rather than by name. */
.basemapThemeList {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
  margin: 10px 0 6px 0;
}

.themeCard {
  background-color: rgba(255, 255, 255, 0.06);
  border: 2px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  padding: 8px;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.themeCard:hover {
  background-color: rgba(255, 255, 255, 0.12);
}

.themeCardActive {
  border-color: #1ce03d;
  background-color: rgba(28, 224, 61, 0.10);
}

.themePreview {
  border-radius: 5px;
  overflow: hidden;
  line-height: 0; /* stops the inline svg adding descender space */
}

.themePreviewSvg {
  width: 100%;
  height: 90px;
  display: block;
}

.themeCardName {
  margin: 7px 0 2px 0;
  font-weight: bold;
  font-size: 14px;
}

.themeCardDescription {
  margin: 0;
  font-size: 12px;
  opacity: 0.78;
  line-height: 1.3;
}

/* Search bar for filtering the available package list */
.dataSearchBar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 6px 0;
}

.dataSearchInput {
  flex: 1;
  min-width: 0;
  padding: 9px 12px;
  font-size: 15px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background-color: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

.dataSearchInput::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.dataSearchInput:focus {
  outline: none;
  border-color: rgb(228, 195, 47);
}

.dataStorageInfo {
  text-align: center;
  font-size: 13px;
  opacity: 0.8;
  margin: 8px 0 14px 0;
}

/* ---------------------------------------------------------------
   Area picker: draw a box, download the tiles and countries it needs
   --------------------------------------------------------------- */

.areaPickerMapWrap {
  position: relative;
  margin: 8px 0;
}

.areaPickerMap {
  width: 100%;
  height: 320px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0.04);
}

.areaPickerMap.areaPickerDrawing canvas {
  cursor: crosshair;
}

/* top-left: the zoom controls own the top-right, and on a phone the bottom-left runs into
   the map attribution */
.areaPickerLegend {
  position: absolute;
  left: 8px;
  top: 8px;
  display: flex;
  gap: 10px;
  padding: 5px 8px;
  border-radius: 6px;
  background-color: rgba(20, 18, 40, 0.82);
  font-size: 11px;
  pointer-events: none;
}

.areaSwatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  margin-right: 4px;
  vertical-align: -1px;
}

.areaSwatchHave      { background-color: rgb(46, 204, 90); }
.areaSwatchAvailable { background-color: rgb(120, 170, 255); }
.areaSwatchSelected  { background-color: rgb(228, 195, 47); }

.areaPickerControls {
  display: flex;
  gap: 8px;
  align-items: center;
}

.areaPickerSummary {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  /* background-color: rgba(255, 255, 255, 0.04); */
    background-color: rgba(0, 0, 0, 0.3);
      border-left: 5px solid #ffffff;
      border-top-left-radius: 0px;
      border-bottom-left-radius: 0px;

  /* padding: 20px;
  padding-bottom: 20px;
  padding-bottom: 15px;
  max-width: 750px;

  margin-left: auto;
  margin-right: auto;
  margin-top: 0px;
  margin-bottom: 10px; */
}

.areaSummaryRow {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  padding: 2px 0;
}

.areaSummaryRow span:last-child {
  font-weight: bold;
  text-align: right;
}

.areaSummaryTotal {
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

/* Shown when the area is big enough to be worth a second thought before starting - a slow
   connection or a nearly full device turns a download this size into a long wait. */
.areaSizeWarning {
  margin-top: 8px;
  padding: 5px 10px;
  font-size: 12px;
  color: rgb(240, 160, 60);
  background-color: rgba(240, 160, 60, 0.12);
  border: 1px solid rgba(240, 160, 60, 0.55);
  border-radius: 8px;
  width: fit-content;
}

/* missing airspace is the one thing here that can matter in flight, so it is not styled
   like ordinary explanatory text */
.areaSummaryNotes {
  margin: 8px 0 0 0;
}

.areaSummaryNotes.areaSummaryWarning {
  color: rgb(228, 195, 47);
  opacity: 1;
}

.dataAreaRow .dataPackageMeta {
  white-space: normal;
}