html, body { height: 100%; background:#fafafa; }
    #bucketList { height: 560px; border: 1px solid #e8e8e8; border-radius:10px; box-shadow:0 1px 3px rgba(0,0,0,.06); }
    .leaflet-container { background: #fff; border-radius:10px; }
    .legend { background: #fff; padding: 8px 12px; border-radius: 8px; border: 1px solid #eee; line-height: 1.3; box-shadow:0 1px 3px rgba(0,0,0,.05); }
    .legend .swatch { display: inline-block; width: 12px; height: 12px; margin-right: 6px; border: 1px solid rgba(0,0,0,.15); border-radius:3px; }

    .panel { border-radius:10px; box-shadow:0 1px 3px rgba(0,0,0,.06); }
    .panel-heading h4, .panel-heading h5 { margin: 0; }

    /* Strong, readable side headers */
    /*#visitedHead { background:#b71c1c !important; color:#fff !important; border-top-left-radius:10px; border-top-right-radius:10px; }
    //#wishHead { background:#ffd54f !important; color:#111 !important; border-top-left-radius:10px; border-top-right-radius:10px; }*/
    #visitedHead { border-top-left-radius:10px; border-top-right-radius:10px; }
    //#wishHead {  border-top-left-radius:10px; border-top-right-radius:10px; }

    .btn { font-size: 16px; border-radius:8px; }
    .btn-default { background:#fff; border-color:#e2e2e2; color:#111; }

    /* Button colors that MATCH map colors */
    .btn-visited { background:#e53935; border-color:#e53935; color:#fff; }   /* Bucket List main action or "Show Saved" */
    .btn-wish    { background:#f6c000; border-color:#f6c000; color:#111; }   /* optional use if you want a wish action */
    .btn-nato    { background:#2b5abf; border-color:#2b5abf; color:#fff; }   /* NATO blue */
    .btn-whs     { background:#2fa66a; color:#fff; }

    /* Active outline so current mode is obvious */
    .mode-active { box-shadow: 0 0 0 3px rgba(0,0,0,.08) inset; }

    /* Inline key next to buttons */
    .key { display:inline-block; margin-left:8px; font-size:13px; }
    .key .dot { display:inline-block; width:12px; height:12px; border-radius:3px; border: 1px solid rgba(0,0,0,.2); margin:0 4px -2px 8px; }
    .dot-visited { background:#e53935; }
    .dot-wish    { background:#f6c000; }
    .dot-nato    { background:#2b5abf; }
    .dot-whs1 { background:#fff3b0; } .dot-whs2 { background:#f7b267; } .dot-whs3 { background:#f4845f; } .dot-whs4 { background:#f25c54; }

    /* Message ribbon */
    #messages { background:#fff; border:1px solid #eee; border-radius:10px; padding:10px 12px; box-shadow:0 1px 3px rgba(0,0,0,.05); }
    /*#control-panel { background:#fff; border:1px; border-color: #ddd; margin:12px 12px; box-shadow:0 1px 3px rgba(0,0,0,.05); }*/
    #btnCreate, #btnClear {border: 1px solid #e53935; border-radius: 10px}
    #focusName { display:inline-block; padding:4px 8px; border-radius:6px; background:#f6f9ff; border:1px solid #e5efff; margin-left:8px; }

    /* Modal list layout */
    #countrySearch { margin-bottom: 12px; border-radius:8px; }
    .continent-card { border:1px solid #eee; background:#fff; border-radius:10px; padding:12px; margin-bottom:16px; box-shadow:0 1px 3px rgba(0,0,0,.05); }
    .continent-title { margin:0 0 8px 0; font-weight:600; }
    .country-row { padding:6px 0; border-bottom:1px dashed #f0f0f0; }
    .country-row:last-child { border-bottom:none; }
    .country-row .name { display:inline-block; max-width: 58%; }
    .country-row .controls { float:right; }

    /* Tiny color dots next to radio labels (inputs stay visible) */
    .dot-inline { display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:6px; border:1px solid rgba(0,0,0,.2); vertical-align:middle; }
    .dot-inline.visited { background:#e53935; border-color:#b71c1c; }
    .dot-inline.wish    { background:#f6c000; border-color:#efb400; }
    .dot-inline.none    { background:#e6e6e6; border-color:#bbb; }

    /* side list highlight on hover/click */
    .list-item { padding:2px 0; transition:background .15s; border-radius:4px; }
    .list-item.highlight { background:#fff8cc; }

    /* === Mode-aware header colors (override the red/yellow when modes change) === */
    body.mode-custom #visitedHead { background:#e53935 !important; color:#fff !important; }   /* BL visited (red)  */
    body.mode-custom #wishHead    { background:#f6c000 !important; color:#111 !important; }   /* BL wish (yellow)  */

    body.mode-nato   #visitedHead { background:#2b5abf !important; color:#fff !important; }   /* NATO (blue)       */
    body.mode-nato   #wishHead    { background:#f5f5f5 !important; color:#333 !important; }   /* neutral right     */

    body.mode-wh     #visitedHead { background:#41ab5d !important; color:#fff !important; }   /* WHS (green)       */
    body.mode-wh     #wishHead    { background:#f5f5f5 !important; color:#333 !important; }   /* neutral right     */

    /* Force all header badges to use neutral gray background */
    .panel-heading .badge {
      background-color: #777 !important; /* gray */
      color: #fff !important;           /* white text */
    }
    /* Hide empty badges in headers */
    #wishHead .badge:empty,
    #visitedHead .badge:empty { display: none; }

    /* Semi-transparent tooltip background */
    .tooltip-inner {
      background-color: rgba(57, 47, 133, 1) !important;  /* black @ 70% */
      color: #fff; /* keep text white */
      font-size: 14px; /* optional: make it a touch more readable */
    }

    /* Optional: make the arrow match */
    .tooltip.top .tooltip-arrow {
      border-top-color: rgba(0, 0, 0, 0.7) !important;
    }
    .tooltip.bottom .tooltip-arrow {
      border-bottom-color: rgba(0, 0, 0, 0.7) !important;
    }
    .tooltip.left .tooltip-arrow {
      border-left-color: rgba(0, 0, 0, 0.7) !important;
    }
    .tooltip.right .tooltip-arrow {
      border-right-color: rgba(0, 0, 0, 0.7) !important;
    }


/* Add space between stacked buttons on small screens */
/* space stacked buttons on phones */
@media (max-width: 767px) {
  .top-buttons .btn {
    display: block;        /* ensures each sits on its own line */
    width: 100%;           /* optional: make them full-width for easier taps */
    margin-bottom: 10px;   /* vertical breathing room */
  }
  .top-buttons .btn:last-child { margin-bottom: 0; }
}

/* Header layout & rhythm */
.header-row { margin: 15px 0 20px; }      /* space around header */
.logo-img { max-height: 175px; }          /* keep logo size consistent */
.header-actions .btn + .btn { margin-left: 6px; }  /* small gap between buttons */

/* Desktop/tablet */
@media (min-width: 768px) {
  .header-actions { text-align: right; margin-top: 20px; }
}

/* Phones */
@media (max-width: 767px) {
  .header-actions { text-align: center; margin-top: 10px; }
  .logo-img { display: block; margin: 0 auto; }    /* center logo on small screens */
}

/* Default: let Bootstrap size it (auto) */

/* Desktop/tablet: restore your wide modal */
@media (min-width: 992px) {
  #updateList .modal-dialog {
    width: 860px;              /* your original width */
    margin: 30px auto;         /* center it nicely */
  }
}

/* Phones and small tablets: fluid, padded, scrollable content */
@media (max-width: 991px) {
  #updateList .modal-dialog {
    width: auto;               /* shrink to fit viewport */
    margin: 10px;              /* breathing room from edges */
  }
  #updateList .modal-content {
    max-height: calc(100vh - 20px); /* keep inside viewport height */
    overflow: hidden;               /* contain internal scrolls */
  }
  #updateList .modal-body {
    overflow-y: auto;               /* scroll inner content */
    max-height: calc(100vh - 140px);/* header+footer space */
  }
  /* Make radio groups wrap nicely */
  #updateList .radio,
  #updateList .radio-inline,
  #updateList .checkbox-inline,
  #updateList .checkbox {
    white-space: normal;
  }
}

/* Optional: keep footer actions visible by pinning it */
#updateList .modal-footer {
  position: sticky;
  bottom: 0;
  background: #fff;
  z-index: 2;
}

/* Modal layout on small screens - stack radio buttons instead of horizontal */
.country-row {
  display: flex;
  justify-content: space-between; /* name left, controls right */
  align-items: center;            /* vertical centering */
  padding: 6px 0;
  border-bottom: 1px dashed #f0f0f0;
}

.country-row:last-child {
  border-bottom: none;
}

.country-row .name {
  flex: 1;            /* take up remaining space */
  text-align: left;   /* force left alignment */
}

.country-row .controls {
  flex-shrink: 0;     /* don’t shrink radio buttons */
  text-align: right;  /* force right alignment */
}
 /* or alternatively:
@media (max-width: 767px) {
  .country-row .name { display:block; max-width: 100%; margin-bottom:6px; }
  .country-row .controls { float:none; }
}*/
/* Force white text on NATO + WHS buttons when hovered or clicked */
.btn-nato:hover,
.btn-nato:focus,
.btn-nato:active,
.btn-nato.active,
.open > .dropdown-toggle.btn-nato {
  color: yellow !important;
  background-color: #114081;
}

.btn-whs:hover,
.btn-whs:focus,
.btn-whs:active,
.btn-whs.active,
.open > .dropdown-toggle.btn-whs {
  color: yellow !important;
  background-color: #017a01;
}

/* Compact chip-style link for the WHS search */
.whs-chip{
  display:inline-block;
  padding:.15rem .55rem;
  border:1px solid var(--whs-accent, #0ea5a4);
  border-radius:999px;
  background:var(--whs-filter-active-bg, rgba(14,165,164,.08));
  color:var(--whs-accent, #0ea5a4);
  text-decoration:none;
  font-weight:700;
  line-height:1.2;
  vertical-align:baseline; /* keeps it aligned within the sentence */
}
.whs-chip:hover{
  box-shadow:0 0 0 3px rgba(14,165,164,.15);
}
.whs-chip:focus{
  outline:0;
  box-shadow:0 0 0 3px rgba(14,165,164,.25);
}