/* ============================================================
   TOTA shared themes for R2R leaderboard + map
   ============================================================ */

html[data-theme="daylight"]{
  /* TOTA design: warm gold page, but cream surfaces instead of an orange wash. */
  --theme-bg-1:#e4bd68;
  --theme-bg-2:#d29e43;
  --theme-bg-3:#bf7f22;
  --theme-panel-1:#ead5a0;
  --theme-panel-2:#ddbd74;
  --theme-card-1:#f7ebcb;
  --theme-card-2:#efdbab;
  --theme-text:#091a35;
  --theme-muted:#342b1d;
  --theme-accent:#075fbf;
  --theme-accent-2:#084f9c;
  --theme-line:#aa6c16;
  --theme-line-soft:rgba(145,87,12,.36);
  --theme-shadow:rgba(76,45,7,.22);
  --theme-button:#075fbf;
  --theme-button-hover:#084f9c;
  --theme-button-text:#fff;
  --theme-table-head:#d7ae57;
  --theme-row-hover:rgba(255,250,232,.36);
  --theme-control:#f2dfad;
  --theme-control-2:#dfbd72;
}

html[data-theme="blue"]{
  --theme-bg-1:#06142c;
  --theme-bg-2:#123d70;
  --theme-bg-3:#071c3d;
  --theme-panel-1:#102d55;
  --theme-panel-2:#0b2245;
  --theme-card-1:#173966;
  --theme-card-2:#102a50;
  --theme-text:#eef7ff;
  --theme-muted:#afc9e7;
  --theme-accent:#64d8ff;
  --theme-accent-2:#27a7e8;
  --theme-line:#2d5f91;
  --theme-line-soft:rgba(83,141,198,.46);
  --theme-shadow:rgba(0,0,0,.28);
  --theme-button:#1769aa;
  --theme-button-hover:#2083cb;
  --theme-button-text:#fff;
  --theme-table-head:#0b2549;
  --theme-row-hover:rgba(111,203,255,.10);
  --theme-control:#173b69;
  --theme-control-2:#0f2c53;
}

html[data-theme="outdoor"]{
  --theme-bg-1:#142b22;
  --theme-bg-2:#41673d;
  --theme-bg-3:#202f22;
  --theme-panel-1:#2d5138;
  --theme-panel-2:#1c3929;
  --theme-card-1:#3b6444;
  --theme-card-2:#274a34;
  --theme-text:#f0f6e9;
  --theme-muted:#c6d3b8;
  --theme-accent:#d7e65f;
  --theme-accent-2:#99bd3f;
  --theme-line:#718557;
  --theme-line-soft:rgba(170,190,126,.35);
  --theme-shadow:rgba(7,20,11,.34);
  --theme-button:#587b37;
  --theme-button-hover:#6b9541;
  --theme-button-text:#fff;
  --theme-table-head:#213d2b;
  --theme-row-hover:rgba(218,235,145,.10);
  --theme-control:#395c40;
  --theme-control-2:#274631;
}

html[data-theme="night"]{
  --theme-bg-1:#090c1f;
  --theme-bg-2:#27264e;
  --theme-bg-3:#111127;
  --theme-panel-1:#242347;
  --theme-panel-2:#17172f;
  --theme-card-1:#302e58;
  --theme-card-2:#22213f;
  --theme-text:#f2f0ff;
  --theme-muted:#c2bedf;
  --theme-accent:#c08cff;
  --theme-accent-2:#8d5bd4;
  --theme-line:#514d7a;
  --theme-line-soft:rgba(148,139,201,.38);
  --theme-shadow:rgba(0,0,0,.42);
  --theme-button:#6946a2;
  --theme-button-hover:#8059bd;
  --theme-button-text:#fff;
  --theme-table-head:#18172f;
  --theme-row-hover:rgba(192,140,255,.10);
  --theme-control:#312f59;
  --theme-control-2:#232141;
}

html[data-theme="tactical"]{
  --theme-bg-1:#232a2c;
  --theme-bg-2:#4a5557;
  --theme-bg-3:#2e3433;
  --theme-panel-1:#414b4d;
  --theme-panel-2:#2f383a;
  --theme-card-1:#515c5e;
  --theme-card-2:#3b4648;
  --theme-text:#f3f3e8;
  --theme-muted:#d0d2c5;
  --theme-accent:#d9c96c;
  --theme-accent-2:#a9984f;
  --theme-line:#747c75;
  --theme-line-soft:rgba(189,194,174,.34);
  --theme-shadow:rgba(0,0,0,.34);
  --theme-button:#606a55;
  --theme-button-hover:#768164;
  --theme-button-text:#fff;
  --theme-table-head:#323a3c;
  --theme-row-hover:rgba(229,221,164,.09);
  --theme-control:#4a5557;
  --theme-control-2:#394345;
}

html[data-theme="classic"]{
  --theme-bg-1:#6d4b2c;
  --theme-bg-2:#b58b52;
  --theme-bg-3:#7e5934;
  --theme-panel-1:#e5c993;
  --theme-panel-2:#caa56b;
  --theme-card-1:#f0dcb4;
  --theme-card-2:#d9bb84;
  --theme-text:#2d251a;
  --theme-muted:#65513a;
  --theme-accent:#8d2f22;
  --theme-accent-2:#682017;
  --theme-line:#8f6c3e;
  --theme-line-soft:rgba(102,72,35,.35);
  --theme-shadow:rgba(72,43,15,.28);
  --theme-button:#7b3a2c;
  --theme-button-hover:#923f2f;
  --theme-button-text:#fff8e9;
  --theme-table-head:#b88a4f;
  --theme-row-hover:rgba(255,255,255,.22);
  --theme-control:#ead4aa;
  --theme-control-2:#caa670;
}

/* Base page surfaces. */
html[data-theme] body{
  color:var(--theme-text)!important;
  background:
    radial-gradient(circle at 12% 5%,rgba(255,255,255,.13),transparent 30%),
    linear-gradient(135deg,var(--theme-bg-1),var(--theme-bg-2) 52%,var(--theme-bg-3))!important;
  background-attachment:fixed!important;
}

html[data-theme="daylight"] body{
  background:
    radial-gradient(circle at 14% 0%,rgba(255,245,213,.50),transparent 29%),
    radial-gradient(circle at 88% 7%,rgba(255,220,119,.22),transparent 27%),
    linear-gradient(180deg,var(--theme-bg-1) 0%,var(--theme-bg-2) 42%,var(--theme-bg-3) 100%)!important;
  background-attachment:fixed!important;
}

html[data-theme] body > header,
html[data-theme] .topbar{
  color:var(--theme-text)!important;
}

html[data-theme] h1,
html[data-theme] h2,
html[data-theme] .topbar h1{
  color:var(--theme-text)!important;
  text-shadow:none!important;
}

html[data-theme] p,
html[data-theme] footer,
html[data-theme] .topbar p{
  color:var(--theme-muted)!important;
  opacity:1!important;
  font-weight:600!important;
}

html[data-theme] h1,
html[data-theme] h2,
html[data-theme] .topbar h1,
html[data-theme] .lang-switch a,
html[data-theme] .theme-menu button,
html[data-theme] .map-open-btn,
html[data-theme] #leaderboardLink{
  font-weight:800!important;
}

html[data-theme] .cards > div,
html[data-theme] .box,
html[data-theme] .panel{
  color:var(--theme-text)!important;
  background:linear-gradient(180deg,var(--theme-panel-1),var(--theme-panel-2))!important;
  border-color:var(--theme-line)!important;
  box-shadow:0 14px 34px var(--theme-shadow),inset 0 1px 0 rgba(255,255,255,.16)!important;
}

html[data-theme] .cards > div{
  background:linear-gradient(180deg,var(--theme-card-1),var(--theme-card-2))!important;
}

html[data-theme] .cards b,
html[data-theme] .mini-stat strong,
html[data-theme] .stat strong{
  color:var(--theme-accent)!important;
  text-shadow:none!important;
}

html[data-theme] .cards span,
html[data-theme] .mini-stat em,
html[data-theme] .stat span{
  color:var(--theme-muted)!important;
  font-weight:700!important;
}

html[data-theme] th{
  color:var(--theme-text)!important;
  background:var(--theme-table-head)!important;
  border-color:var(--theme-line-soft)!important;
}

html[data-theme] td{
  color:var(--theme-text)!important;
  border-color:var(--theme-line-soft)!important;
  font-weight:600!important;
}

html[data-theme] tr:hover td{
  background:var(--theme-row-hover)!important;
}

html[data-theme] .grid .box table tbody td:last-child{
  color:var(--theme-accent)!important;
  font-weight:800!important;
}

html[data-theme] .grid .box table tbody tr:nth-child(1){
  background:linear-gradient(90deg,rgba(255,199,52,.25),transparent 78%)!important;
}
html[data-theme] .grid .box table tbody tr:nth-child(2){
  background:linear-gradient(90deg,rgba(218,229,239,.20),transparent 78%)!important;
}
html[data-theme] .grid .box table tbody tr:nth-child(3){
  background:linear-gradient(90deg,rgba(205,126,66,.22),transparent 78%)!important;
}

/* Language, links and controls. */
html[data-theme] .lang-switch a,
html[data-theme] .topbar a,
html[data-theme] .toggle,
html[data-theme] .selectbox,
html[data-theme] .mini-stat,
html[data-theme] .stat,
html[data-theme] .bandbar{
  color:var(--theme-text)!important;
  background:linear-gradient(180deg,var(--theme-control),var(--theme-control-2))!important;
  border-color:var(--theme-line)!important;
}

html[data-theme] .lang-switch a:hover,
html[data-theme] .topbar a:hover{
  filter:brightness(1.08);
}

html[data-theme] .lang-switch a.active{
  color:var(--theme-button-text)!important;
  background:var(--theme-button)!important;
  border-color:var(--theme-accent)!important;
  box-shadow:0 0 0 2px color-mix(in srgb,var(--theme-accent) 28%,transparent)!important;
}

html[data-theme] .map-open-btn,
html[data-theme] #leaderboardLink{
  color:var(--theme-button-text)!important;
  background:linear-gradient(180deg,var(--theme-button),var(--theme-button-hover))!important;
  border-color:var(--theme-accent-2)!important;
  box-shadow:0 8px 20px var(--theme-shadow)!important;
}

html[data-theme] .map-open-btn:hover,
html[data-theme] #leaderboardLink:hover{
  background:var(--theme-button-hover)!important;
  filter:brightness(1.06);
}

html[data-theme] .selectbox select{
  color:var(--theme-text)!important;
  background:var(--theme-control-2)!important;
  border-color:var(--theme-line)!important;
}

html[data-theme="daylight"] .selectbox select,
html[data-theme="classic"] .selectbox select{
  color:var(--theme-text)!important;
}

html[data-theme] .toggle input{
  accent-color:var(--theme-accent)!important;
}

html[data-theme] .notice{
  color:var(--theme-text)!important;
  background:color-mix(in srgb,var(--theme-panel-1) 94%,transparent)!important;
  border:1px solid var(--theme-line)!important;
  box-shadow:0 12px 34px var(--theme-shadow)!important;
}

html[data-theme] #map{
  background:var(--theme-panel-2)!important;
}

html[data-theme] .r2r-line{
  filter:drop-shadow(0 0 3px color-mix(in srgb,var(--theme-accent) 48%,transparent))!important;
}

html[data-theme] .marker-cluster-small,
html[data-theme] .marker-cluster-medium,
html[data-theme] .marker-cluster-large{
  background-color:color-mix(in srgb,var(--theme-accent) 28%,transparent)!important;
}
html[data-theme] .marker-cluster-small div,
html[data-theme] .marker-cluster-medium div,
html[data-theme] .marker-cluster-large div{
  color:var(--theme-button-text)!important;
  background-color:var(--theme-button)!important;
}

/* Theme picker. */
.theme-wrap{
  position:relative;
  display:inline-flex;
  align-items:center;
  z-index:2500;
}

.theme-btn{
  width:42px;
  min-width:42px;
  height:36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border:1px solid var(--theme-line);
  border-radius:9px;
  color:var(--theme-text);
  background:linear-gradient(180deg,var(--theme-control),var(--theme-control-2));
  box-shadow:0 6px 16px var(--theme-shadow);
  cursor:pointer;
  font-size:18px;
  line-height:1;
}

.theme-btn:hover,
.theme-btn[aria-expanded="true"]{
  filter:brightness(1.08);
  transform:translateY(-1px);
}

.theme-menu{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  width:205px;
  display:none;
  overflow:hidden;
  border:1px solid var(--theme-line);
  border-radius:10px;
  background:var(--theme-panel-2);
  box-shadow:0 18px 40px rgba(0,0,0,.34);
  z-index:2600;
}

.theme-menu.open{display:block}

.theme-menu button{
  width:100%;
  min-height:44px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:9px 14px;
  border:0;
  border-bottom:1px solid var(--theme-line-soft);
  color:var(--theme-text);
  background:transparent;
  cursor:pointer;
  text-align:left;
  font:800 16px/1.1 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}

.theme-menu button:last-child{border-bottom:0}
.theme-menu button:hover{background:var(--theme-row-hover)}
.theme-menu button.active{
  color:var(--theme-button-text);
  background:linear-gradient(180deg,var(--theme-button),var(--theme-button-hover));
  box-shadow:inset 3px 0 0 var(--theme-accent);
}

html[data-theme="daylight"] .theme-menu{
  background:linear-gradient(180deg,#f2dda4,#d7ae57)!important;
  border-color:#9d6414!important;
}
html[data-theme="daylight"] .theme-menu button{
  color:#10213d!important;
  border-color:rgba(121,75,8,.38)!important;
}
html[data-theme="daylight"] .theme-menu button:hover{
  background:rgba(255,248,224,.42)!important;
}
html[data-theme="daylight"] .theme-menu button.active{
  color:#10213d!important;
  background:linear-gradient(180deg,#f8ebc9,#e6c77f)!important;
  box-shadow:inset 3px 0 0 #075fbf!important;
}

html[data-theme="daylight"] .cards span,
html[data-theme="daylight"] td,
html[data-theme="daylight"] th,
html[data-theme="daylight"] h2,
html[data-theme="daylight"] footer,
html[data-theme="daylight"] p{
  color:#0d1e39!important;
}

html[data-theme="daylight"] .grid .box table tbody td:last-child,
html[data-theme="daylight"] .cards b{
  color:#035bd1!important;
}

/* Light themes need darker Leaflet popup copy. */
.leaflet-popup-content-wrapper,
.leaflet-popup-tip{
  background:#fff!important;
}
.leaflet-popup-content,
.leaflet-popup-content .popup-grid,
.leaflet-popup-content .popup-muted,
.leaflet-popup-content .popup-desc{
  color:#334155!important;
}
.leaflet-popup-content .popup-title,
.leaflet-popup-content .popup-grid b{
  color:#17365d!important;
}

@media(max-width:700px){
  .theme-menu{right:auto;left:0;width:min(220px,calc(100vw - 28px))}
  .header-actions .theme-wrap{align-self:flex-start}
}

.top-control-row{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:7px;
  flex-wrap:wrap;
}

@media(max-width:700px){
  .top-control-row{justify-content:flex-start}
}