/* ============================================================
   MetroTrak Layout Editor styles — 2026-07-16
   .mtle-ui = editor chrome (never selectable/editable itself)
   ============================================================ */

/* floating edit button (admin only) */
#mtle-edit-btn {
  position: fixed; bottom: 14px; right: 14px; z-index: 999990;
  width: 42px; height: 42px; border-radius: 50%;
  border: 2px solid #60a5fa; background: #16213e; color: #60a5fa;
  font-size: 17px; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.45);
}
#mtle-edit-btn:hover { transform: scale(1.08); }

/* toolbar */
#mtle-toolbar {
  position: fixed; top: 8px; left: 50%; transform: translateX(-50%);
  z-index: 999992; display: flex; gap: 6px; align-items: center;
  background: #0f172a; border: 1px solid #60a5fa; border-radius: 10px;
  padding: 6px 10px; box-shadow: 0 6px 24px rgba(0,0,0,.5);
  font-size: 12px; color: #e5e7eb; flex-wrap: wrap; max-width: 96vw;
}
#mtle-toolbar .mtle-tb-title { font-weight: 800; margin-right: 4px; white-space: nowrap; }
#mtle-toolbar .mtle-tb-title i { color: #f59e0b; font-style: normal; font-size: 11px; }
#mtle-toolbar button {
  background: #1e293b; color: #e5e7eb; border: 1px solid #334155;
  border-radius: 7px; padding: 5px 9px; font-size: 12px; cursor: pointer; white-space: nowrap;
}
#mtle-toolbar button:hover { background: #334155; border-color: #60a5fa; }
#mtle-tb-save { background: #065f46 !important; border-color: #10b981 !important; }
#mtle-tb-exit { background: #7f1d1d !important; border-color: #ef4444 !important; }

/* hover + selection visuals */
body.mtle-editing .mtle-hover:not(.mtle-ui) { outline: 1.5px dashed #60a5fa !important; outline-offset: -1px; cursor: crosshair !important; }
body.mtle-placing, body.mtle-placing * { cursor: copy !important; }

#mtle-overlay {
  position: absolute; z-index: 999991; pointer-events: none;
  outline: 2px solid #f59e0b; outline-offset: 1px;
}
#mtle-overlay .mtle-grip {
  position: absolute; top: -22px; left: -2px; pointer-events: auto;
  background: #f59e0b; color: #111; font-size: 12px; font-weight: 900;
  border-radius: 6px 6px 0 0; padding: 2px 7px; cursor: grab; user-select: none;
}
#mtle-overlay .mtle-grip:active { cursor: grabbing; }
#mtle-overlay .mtle-handle {
  position: absolute; width: 12px; height: 12px; background: #f59e0b;
  border: 2px solid #111; border-radius: 3px; pointer-events: auto;
}
#mtle-overlay .mtle-se { right: -7px; bottom: -7px; cursor: nwse-resize; }

/* property panel */
#mtle-panel {
  position: fixed; top: 64px; right: 10px; z-index: 999992;
  width: 292px; max-height: calc(100vh - 90px); overflow: auto;
  background: #0f172a; border: 1px solid #60a5fa; border-radius: 12px;
  padding: 10px 12px; color: #e5e7eb; font-size: 12px;
  box-shadow: 0 8px 30px rgba(0,0,0,.55);
}
#mtle-panel .mtle-p-head { font-weight: 800; font-size: 13px; margin-bottom: 8px; color: #60a5fa; }
#mtle-panel .mtle-p-sel {
  display: inline-block; max-width: 200px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; vertical-align: bottom; color: #94a3b8; font-weight: 500; font-size: 10.5px;
}
#mtle-panel .mtle-p-empty { color: #94a3b8; line-height: 1.6; }
#mtle-panel .mtle-row { display: flex; align-items: center; gap: 6px; margin-bottom: 7px; }
#mtle-panel .mtle-row label { width: 78px; flex-shrink: 0; color: #94a3b8; font-size: 11px; }
#mtle-panel input, #mtle-panel select {
  background: #1e293b; color: #e5e7eb; border: 1px solid #334155;
  border-radius: 6px; padding: 4px 6px; font-size: 12px; min-width: 0;
}
#mtle-panel input[type=number] { width: 70px; }
#mtle-panel input[type=color] { width: 40px; height: 26px; padding: 1px; cursor: pointer; }
#mtle-panel select { flex: 1; }
#mtle-panel .mtle-clear, #mtle-bg-none {
  background: #1e293b; border: 1px solid #334155; color: #94a3b8;
  border-radius: 6px; padding: 3px 7px; cursor: pointer; font-size: 11px;
}
#mtle-panel .mtle-clear:hover { color: #ef4444; border-color: #ef4444; }
#mtle-panel .mtle-btns { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
#mtle-panel .mtle-btns button {
  background: #1e293b; color: #e5e7eb; border: 1px solid #334155;
  border-radius: 7px; padding: 6px 9px; cursor: pointer; font-size: 12px;
}
#mtle-panel .mtle-btns button:hover { border-color: #60a5fa; }
#mtle-panel .mtle-theme-cols { display: flex; gap: 6px; margin-bottom: 4px; }
#mtle-panel .mtle-theme-cols span:first-child { width: 78px; flex-shrink: 0; }
#mtle-panel .mtle-theme-cols b { width: 40px; text-align: center; }
#mtle-panel .mtle-theme-row input[type=color] { width: 40px; }

/* toast */
#mtle-toast {
  position: fixed; bottom: 66px; right: 14px; z-index: 999993;
  padding: 8px 14px; border-radius: 8px; font-size: 12px; font-weight: 700;
  opacity: 0; transition: opacity .25s; pointer-events: none;
  box-shadow: 0 4px 14px rgba(0,0,0,.4);
}
#mtle-toast.show { opacity: 1; }

/* table column mode */
body.mtle-editing .mtle-table-hint thead th { cursor: grab; position: relative; }
body.mtle-editing .mtle-table-hint thead th::after {
  content: ''; position: absolute; top: 0; right: 0; width: 7px; height: 100%;
  cursor: col-resize; background: linear-gradient(90deg, transparent, rgba(96,165,250,.35));
}
th.mtle-col-drag { outline: 2px solid #f59e0b !important; opacity: .85; }

/* ── user-added widgets (search / pills) — theme-aware defaults ── */
.mtle-widget { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 6px 8px; position: relative; }
.mtle-search-input {
  background: var(--card-bg, #1a1a2e); color: var(--text-dark, #e8e8f0);
  border: 1px solid var(--border, #3b4261); border-radius: 8px;
  padding: 7px 12px; font-size: 13px; min-width: 210px; outline: none;
}
.mtle-search-input:focus { border-color: var(--primary, #2563eb); }
.mtle-pill {
  background: var(--bg-light, #151528); color: var(--text-muted, #9aa0ae);
  border: 1px solid var(--border, #3b4261); border-radius: 999px;
  padding: 5px 13px; font-size: 12px; font-weight: 700; cursor: pointer; user-select: none;
}
.mtle-pill:hover { border-color: var(--primary, #2563eb); }
.mtle-pill.active {
  background: var(--primary, #2563eb); color: #fff; border-color: var(--primary, #2563eb);
}
.mtle-w-tools { position: absolute; top: -14px; right: -6px; display: flex; gap: 3px; z-index: 5; }
.mtle-w-tools button {
  background: #0f172a; border: 1px solid #60a5fa; color: #e5e7eb;
  border-radius: 5px; font-size: 10px; padding: 1px 5px; cursor: pointer;
}

/* column-resize helper row in the panel */
#mtle-panel .mtle-colrow { background: rgba(96,165,250,.10); border:1px solid #334155; border-radius:7px; padding:6px; }
#mtle-panel .mtle-colrow #mtle-colfit { background:#1e293b; border:1px solid #60a5fa; color:#bfdbfe; border-radius:6px; padding:3px 8px; cursor:pointer; font-size:11px; }
#mtle-panel .mtle-colrow #mtle-colfit:hover { background:#334155; }
#mtle-panel .mtle-colnote { color:#94a3b8; font-size:10.5px; line-height:1.5; margin:-2px 0 8px; }