/* =============================================================
   map.css  |  Dungeon Map  |  Blue VTT theme
   ============================================================= */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --tb-h:      44px;
  --floor-h:   30px;
  --hint-h:    28px;

  /* UI chrome — matches main VTT blue theme */
  --ui-bg:     #111;
  --ui-panel:  #1a2a33;
  --ui-border: #335566;
  --ui-accent: #aaddee;
  --ui-dim:    #557788;
  --ui-text:   #aaddee;

  --tool-active-bg:   #557788;
  --tool-active-text: #ffffff;
}

/* ---- Base ---- */
html, body {
  height: 100%;
  background: var(--ui-bg);
  color: var(--ui-text);
  font-family: sans-serif;
  overflow: hidden;
  user-select: none;
}

/* ===========================
   TOOLBAR
   =========================== */
#toolbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--tb-h);
  background: var(--ui-panel);
  border-bottom: 1px solid var(--ui-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  z-index: 200;
  box-shadow: 0 2px 14px rgba(0,0,0,.7);
  gap: 8px;
}

#toolbar-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

#toolbar-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

#toolbar-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--ui-accent);
  white-space: nowrap;
  flex-shrink: 0;
  padding-right: 6px;
  text-transform: uppercase;
}

.sep {
  width: 1px;
  height: 28px;
  background: var(--ui-border);
  flex-shrink: 0;
}

.mode-btn { border-style: dashed; }
.mode-btn.active { background: #4a2020; color: #ff9999; border-color: #cc4444; border-style: solid; }

/* ---- Tool buttons ---- */
.tool-group { display: flex; gap: 2px; }

.tool-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  width: 44px;
  height: 36px;
  background: var(--ui-bg);
  border: 1px solid var(--ui-border);
  border-radius: 3px;
  cursor: pointer;
  color: var(--ui-dim);
  transition: background 0.1s, color 0.1s, border-color 0.1s;
  font-family: inherit;
  padding: 3px 2px;
  flex-shrink: 0;
}
.tool-btn:hover { background: #223344; color: var(--ui-text); border-color: var(--ui-dim); }
.tool-btn.active { background: var(--tool-active-bg); color: var(--tool-active-text); border-color: var(--ui-accent); }
.tool-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.tool-btn svg text { stroke: none; fill: currentColor; }
.tool-btn span { font-size: 0.48rem; letter-spacing: 0.06em; line-height: 1; text-transform: uppercase; }

/* ---- Options ---- */
.opt-row { display: flex; align-items: center; gap: 5px; font-size: 0.72rem; color: var(--ui-dim); cursor: default; flex-shrink: 0; transition: opacity 0.15s; }
.opt-row.disabled { opacity: 0.3; pointer-events: none; }
.opt-icon { width: 14px; height: 14px; fill: currentColor; flex-shrink: 0; opacity: 0.7; }
#brush-size { width: 64px; accent-color: var(--ui-accent); cursor: pointer; }
#brush-val { min-width: 16px; color: var(--ui-text); font-size: 0.76rem; }
#draw-color { width: 26px; height: 22px; border: 1px solid var(--ui-border); border-radius: 2px; padding: 1px; background: var(--ui-bg); cursor: pointer; }

/* ---- Action buttons ---- */
.act-btn {
  background: var(--ui-bg);
  border: 1px solid var(--ui-border);
  color: var(--ui-dim);
  font-family: inherit;
  font-size: 0.72rem;
  padding: 4px 9px;
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
  white-space: nowrap;
}
.act-btn:hover { background: #223344; color: var(--ui-text); }
.act-btn.danger:hover { border-color: #7a2020; color: #e07070; }

#zoom-display { font-size: 0.65rem; color: var(--ui-dim); min-width: 38px; text-align: right; letter-spacing: 0.05em; }

/* ===========================
   HINT BAR
   =========================== */
#hint-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: var(--hint-h);
  background: var(--ui-panel);
  border-top: 1px solid var(--ui-border);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 200;
}
#hint-bar.visible { display: flex; }
#hint-text { font-size: 0.65rem; letter-spacing: 0.1em; color: var(--ui-accent); text-transform: uppercase; }

/* ===========================
   FLOOR BAR
   =========================== */
#floor-bar {
  position: fixed;
  top: var(--tb-h); left: 0; right: 0;
  height: var(--floor-h);
  background: #111e27;
  border-bottom: 1px solid var(--ui-border);
  display: flex;
  align-items: center;
  padding: 0 8px;
  gap: 3px;
  z-index: 190;
  overflow-x: auto;
  overflow-y: hidden;
}
#floor-bar::-webkit-scrollbar { height: 3px; }
#floor-bar::-webkit-scrollbar-thumb { background: var(--ui-border); border-radius: 2px; }

.floor-tab {
  display: flex; align-items: center; gap: 4px;
  padding: 2px 8px;
  background: var(--ui-bg);
  border: 1px solid var(--ui-border);
  border-radius: 3px 3px 0 0;
  border-bottom: none;
  cursor: pointer;
  color: var(--ui-dim);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.1s, color 0.1s;
  position: relative;
  bottom: -1px;
}
.floor-tab:hover { background: #1e3040; color: var(--ui-text); }
.floor-tab.active { background: var(--ui-panel); color: var(--ui-accent); border-color: var(--ui-accent); }
.floor-tab-name { cursor: pointer; }
.floor-tab-del {
  background: none; border: none; color: var(--ui-dim);
  font-size: 0.8rem; line-height: 1; cursor: pointer; padding: 0 1px;
  opacity: 0.5; transition: opacity 0.1s, color 0.1s;
}
.floor-tab-del:hover { opacity: 1; color: #e07070; }
.floor-tab-input {
  background: #0d1b24; border: 1px solid var(--ui-accent);
  color: var(--ui-text); font-size: 0.65rem; padding: 0 4px;
  width: 80px; font-family: inherit; outline: none; border-radius: 2px;
}
.floor-add-btn {
  background: none; border: 1px dashed var(--ui-border);
  color: var(--ui-dim); font-size: 0.62rem; padding: 2px 7px;
  border-radius: 3px; cursor: pointer; white-space: nowrap;
  transition: color 0.1s, border-color 0.1s; flex-shrink: 0;
  font-family: inherit; letter-spacing: 0.06em;
}
.floor-add-btn:hover { color: var(--ui-accent); border-color: var(--ui-accent); }
.floor-sep { width: 1px; height: 18px; background: var(--ui-border); flex-shrink: 0; margin: 0 4px; }
.floor-onion-label { font-size: 0.85rem; flex-shrink: 0; opacity: 0.7; cursor: default; }
.floor-onion-sel {
  background: var(--ui-bg); border: 1px solid var(--ui-border);
  color: var(--ui-dim); font-size: 0.62rem; padding: 1px 4px;
  border-radius: 3px; cursor: pointer; font-family: inherit;
  flex-shrink: 0;
}
.floor-onion-sel:focus { outline: none; border-color: var(--ui-accent); }

/* ===========================
   MAP AREA & CANVAS
   =========================== */
#map-area {
  position: fixed;
  top: calc(var(--tb-h) + var(--floor-h)); left: 0; right: 0; bottom: 0;
  overflow: hidden;
  background: var(--ui-bg);
}
#map-area.hint-open { bottom: var(--hint-h); }
#map-canvas { position: absolute; top: 0; left: 0; }

/* ===========================
   CURSORS
   =========================== */
body.tool-room    #map-area { cursor: crosshair; }
body.tool-polygon #map-area { cursor: cell; }
body.tool-draw    #map-area { cursor: none; }
body.tool-text    #map-area { cursor: text; }
body.tool-door    #map-area { cursor: crosshair; }
body.tool-cursor  #map-area { cursor: default; }
body.panning      #map-area { cursor: grabbing !important; }

/* ===========================
   TEXT INPUT OVERLAY
   =========================== */
#text-cursor { position: absolute; z-index: 50; pointer-events: none; }
#text-field {
  pointer-events: all;
  background: rgba(17,34,51,0.95);
  border: 1px solid var(--ui-accent);
  border-radius: 2px;
  color: var(--ui-text);
  font-family: inherit;
  font-size: 14px;
  padding: 3px 7px;
  outline: none;
  min-width: 130px;
  box-shadow: 0 3px 12px rgba(0,0,0,.8);
  caret-color: var(--ui-accent);
}
#text-field::placeholder { color: var(--ui-dim); }