/* ============================
   Eritora Atlas — atlas.css
   D&D / parchment + brass + ink UI theme
   Drop-in replacement (UPDATED with add-ons)
   ============================ */

/* Optional font imports (safe to remove if you prefer local fonts) */
@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&family=IM+Fell+English:ital@0;1&family=Crimson+Text:ital,wght@0,400;0,600;1,400&display=swap");

:root{
  /* Core palette */
  --ink: #231a12;
  --ink-soft: rgba(35,26,18,0.72);
  --parchment: #f2e3bf;
  --parchment-2: #e7d2a2;
  --parchment-3: #d6bb84;

  --wax: #7f1d1d;
  --brass: #c7a65a;
  --brass-2: #9b7b33;

  --shadow: rgba(0,0,0,0.45);

  /* Existing variables kept for compatibility */
  --bg: #0b0a08;
  --panel: rgba(242,227,191,0.96);
  --text: var(--ink);
  --muted: rgba(35,26,18,0.70);
  --border: rgba(35,26,18,0.20);

  /* Desk background image (you already use this) */
  --desk-img: url("media/ui/desk.jpeg");

  /* Typography */
  --font-ui: "Crimson Text", Georgia, "Times New Roman", serif;
  --font-head: "Cinzel", Georgia, serif;
  --font-flavor: "IM Fell English", Georgia, serif;

  /* Radius */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;

  /* Focus ring */
  --focus: rgba(199,166,90,0.55);
}

*{ box-sizing:border-box; }

html, body { height: 100%; }

body{
  margin:0;
  font-family: var(--font-ui);
  color: var(--text);
  background-image: var(--desk-img);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

/* Darken the desk slightly for legibility + vignette */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(1200px 700px at 50% 30%, rgba(0,0,0,0.18), rgba(0,0,0,0.55)),
    rgba(0,0,0,0.22);
  pointer-events:none;
  z-index:0;
}

/* Keep UI above overlay */
.topbar,
.layout{
  position: relative;
  z-index: 1;
}

/* ---------- Topbar ---------- */
.topbar{
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 10px 12px;

  border-bottom: 1px solid rgba(199,166,90,0.35);
  background:
    linear-gradient(180deg, rgba(20,16,11,0.92), rgba(12,10,8,0.86));
  backdrop-filter: blur(6px);

  position: relative;
  z-index: 5000;
}

.brand{
  font-family: var(--font-head);
  font-weight: 700;
  letter-spacing: 0.6px;
  color: #f6e7c6;
  text-shadow: 0 1px 0 rgba(0,0,0,0.6);
}

.maplabel,
.hint{
  color: rgba(246,231,198,0.70);
  font-size: 13px;
}

.hint{ margin-left:auto; }

#mapSelect{
  padding: 6px 10px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(199,166,90,0.45);
  background: rgba(246,231,198,0.10);
  color: #f6e7c6;
  outline: none;
}
#mapSelect:focus{
  box-shadow: 0 0 0 3px var(--focus);
}

/* ---------- Layout ---------- */
.layout{
  position: relative;
  display:flex;
  height: calc(100vh - 49px);
  padding: 18px;
  gap: 14px;
}

/* ---------- Map container ---------- */
#map{
  position: relative;
  flex: 1;
  height: 100%;

  border-radius: var(--r-md);
  border: 1px solid rgba(199,166,90,0.25);
  background:
    radial-gradient(1200px 700px at 35% 25%, rgba(255,255,255,0.05), rgba(0,0,0,0.28)),
    rgba(0,0,0,0.20);
  box-shadow:
    0 18px 60px rgba(0,0,0,0.60),
    0 2px 0 rgba(255,255,255,0.05) inset;
  overflow:hidden;

  /* Add-on: mounted frame feel */
  outline: 1px solid rgba(0,0,0,0.18);
  outline-offset: -10px;
}

#map::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius: var(--r-md);
  box-shadow:
    0 0 0 1px rgba(199,166,90,0.18) inset,
    0 0 0 2px rgba(0,0,0,0.25) inset;
}

/* Add-on: brass corner tacks */
#map::before{
  content:"";
  position:absolute;
  inset: 14px;
  pointer-events:none;
  background:
    radial-gradient(circle at 0% 0%, rgba(199,166,90,0.95) 0 6px, rgba(0,0,0,0) 7px),
    radial-gradient(circle at 100% 0%, rgba(199,166,90,0.95) 0 6px, rgba(0,0,0,0) 7px),
    radial-gradient(circle at 0% 100%, rgba(199,166,90,0.95) 0 6px, rgba(0,0,0,0) 7px),
    radial-gradient(circle at 100% 100%, rgba(199,166,90,0.95) 0 6px, rgba(0,0,0,0) 7px);
  opacity: 0.65;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.35));
  border-radius: calc(var(--r-md) - 6px);
}

/* Leaflet controls: parchment buttons */
.leaflet-control-zoom a{
  background: linear-gradient(180deg, var(--parchment), var(--parchment-2));
  color: var(--ink);
  border: 1px solid rgba(35,26,18,0.25);
  box-shadow: 0 8px 18px rgba(0,0,0,0.30);
}
.leaflet-control-zoom a:hover{
  background: linear-gradient(180deg, var(--parchment-2), var(--parchment-3));
}
.leaflet-bar{
  border: 1px solid rgba(35,26,18,0.25);
  border-radius: 10px;
  overflow:hidden;
}

/* ---------- Sidebar (parchment folio) ---------- */
.sidebar{
  width: 380px;
  max-width: 85vw;
  display:none;
  flex-direction: column;

  border-radius: var(--r-md);
  overflow:hidden;

  background:
    radial-gradient(700px 500px at 20% 10%, rgba(255,255,255,0.60), rgba(255,255,255,0.05)),
    linear-gradient(180deg, rgba(242,227,191,0.98), rgba(231,210,162,0.96));
  border: 1px solid rgba(35,26,18,0.18);

  box-shadow:
    0 18px 60px rgba(0,0,0,0.50),
    0 0 0 1px rgba(199,166,90,0.18) inset;
}

.sidebar.open{ display:flex; }

.sidebar-header{
  display:flex;
  gap: 10px;
  align-items:center;
  padding: 14px 14px 10px;
  border-bottom: 1px solid rgba(35,26,18,0.15);

  background:
    linear-gradient(180deg, rgba(199,166,90,0.22), rgba(199,166,90,0.06));
}

.sidebar-header h2{
  font-family: var(--font-head);
  font-size: 18px;
  margin:0;
  line-height:1.2;
  letter-spacing: 0.4px;
}

.closebtn{
  margin-left:auto;
  background: linear-gradient(180deg, rgba(127,29,29,0.95), rgba(88,15,15,0.95));
  border: 1px solid rgba(0,0,0,0.35);
  color: #f6e7c6;
  border-radius: 10px;
  width: 34px;
  height: 34px;
  cursor:pointer;
  box-shadow: 0 10px 18px rgba(0,0,0,0.35);
}
.closebtn:hover{ filter: brightness(1.05); }
.closebtn:active{ transform: translateY(1px); }

.meta{
  padding: 10px 14px 0;
  color: var(--muted);
  font-size: 13px;
  font-family: var(--font-flavor);
}

.metaChip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding: 5px 8px;
  margin: 0 6px 6px 0;
  border-radius: 999px;
  background: rgba(199,166,90,0.14);
  border: 1px solid rgba(35,26,18,0.14);
  color: rgba(35,26,18,0.82);
}

/* Add-on: sidebar readability + paragraph rhythm */
.body{
  padding: 14px;
  overflow:auto;
  font-size: 16px;
  line-height: 1.35;

  max-width: 58ch;
}
.body p{
  margin: 0 0 10px;
}

/* Add-on: parchment scrollbars */
.body{
  scrollbar-width: thin;
  scrollbar-color: rgba(35,26,18,0.35) rgba(35,26,18,0.10);
}
.body::-webkit-scrollbar{ width: 10px; }
.body::-webkit-scrollbar-track{
  background: rgba(35,26,18,0.08);
  border-radius: 999px;
}
.body::-webkit-scrollbar-thumb{
  background: rgba(35,26,18,0.28);
  border-radius: 999px;
  border: 2px solid rgba(35,26,18,0.08);
}
.body::-webkit-scrollbar-thumb:hover{
  background: rgba(35,26,18,0.36);
}

.body a{
  color: #1a4f7a;
  text-decoration: none;
  border-bottom: 1px solid rgba(26,79,122,0.25);
}
.body a:hover{ border-bottom-color: rgba(26,79,122,0.65); }

.body code{
  background: rgba(35,26,18,0.08);
  padding: 2px 6px;
  border-radius: 8px;
  border: 1px solid rgba(35,26,18,0.12);
}

.body pre{
  background: rgba(35,26,18,0.07);
  padding: 12px;
  border-radius: 12px;
  overflow:auto;
  border: 1px solid rgba(35,26,18,0.12);
}

.publishFrame{
  width: 100%;
  height: 70vh;
  border: 1px solid rgba(35,26,18,0.20);
  border-radius: 12px;
  box-shadow: 0 14px 40px rgba(0,0,0,0.35);
  background: rgba(0,0,0,0.04);
}

/* ---------- Buttons (your HTML uses .btn/.btn-primary) ---------- */
.actionsRow{
  display: flex;
  gap: 12px;       /* adjust this to control spacing between buttons */
  flex-wrap: wrap; /* optional: allows wrap on small screens */
  align-items: center;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 12px;
  border: 1px solid rgba(35,26,18,0.20);
  background: linear-gradient(180deg, rgba(242,227,191,0.90), rgba(231,210,162,0.85));
  color: var(--ink);
  cursor:pointer;
  font-family: var(--font-head);
  font-weight: 600;
  letter-spacing: 0.3px;
  box-shadow: 0 10px 22px rgba(0,0,0,0.22);
}
.btn:hover{ filter: brightness(1.02); }
.btn:active{ transform: translateY(1px); }

.btn-primary{
  background: linear-gradient(180deg, rgba(199,166,90,0.95), rgba(155,123,51,0.92));
  border-color: rgba(0,0,0,0.25);
  color: #1a120a;
  text-shadow: 0 1px 0 rgba(255,255,255,0.25);
}

/* ---------- Search (topbar) - supports your atlas.js classes ---------- */
.atlasSearch{
  height: 32px;
  padding: 6px 10px;
  border-radius: 12px;
  border: 1px solid rgba(199,166,90,0.55); /* add-on: slightly stronger brass edge */
  background:
    linear-gradient(180deg, rgba(246,231,198,0.14), rgba(246,231,198,0.08));
  color: #f6e7c6;
  width: min(320px, 34vw);
  outline: none;
  box-shadow: 0 10px 22px rgba(0,0,0,0.28); /* add-on: heavier presence */
}

.atlasSearch::placeholder{ color: rgba(246,231,198,0.55); }

.atlasSearch:focus{
  box-shadow:
    0 0 0 3px var(--focus),
    0 10px 22px rgba(0,0,0,0.25);
}

.atlasSearchList{
  background:
    radial-gradient(520px 260px at 25% 10%, rgba(255,255,255,0.25), rgba(255,255,255,0.02)),
    linear-gradient(180deg, rgba(242,227,191,0.98), rgba(231,210,162,0.96));
  border: 1px solid rgba(35,26,18,0.22);
  border-radius: 14px;
  overflow: hidden;
  margin-top: 8px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.45);
}

.atlasSearchRow{
  padding: 10px 12px;
  background: transparent;
  color: var(--ink);
  border: 0;
  border-bottom: 1px solid rgba(35,26,18,0.10);
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 15px;
}
.atlasSearchRow:hover{
  background: rgba(199,166,90,0.18);
}
.atlasSearchRow:last-child{ border-bottom: 0; }

/* ---------- Toast (if you use .toast) ---------- */
.toast{
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(20,16,11,0.92);
  color: #f6e7c6;
  border: 1px solid rgba(199,166,90,0.35);
  box-shadow: 0 18px 40px rgba(0,0,0,0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms ease, transform 140ms ease;
  z-index: 9000;
}
.toast.show{
  opacity: 1;
  transform: translateX(-50%) translateY(-4px);
}

/* ---------- Minor quality-of-life ---------- */
::selection{
  background: rgba(199,166,90,0.35);
}

/* Keep dropdown above Leaflet map */
.topbar{ z-index: 5000; }
.atlasSearchList{ z-index: 6000; pointer-events: auto; }
.atlasSearchRow{ pointer-events: auto; }