/* ═══════════════════════════════════════
   SADS – Kapitänsbrücke (SL-Tool) CSS
   Desktop-like Window Manager
   ═══════════════════════════════════════ */

/* ── Toolbar ── */
.sl-toolbar {
  position: sticky; top: var(--header-h); z-index: 40;
  background: rgba(17,14,10,.95); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  padding: 8px 16px;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 8px;
}

/* ── Desktop Area ── */
.sl-desktop {
  position: relative;
  min-height: calc(100vh - var(--header-h) - 52px);
  background:
    radial-gradient(ellipse at 30% 20%, rgba(201,168,76,.04) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 80%, rgba(139,32,32,.04) 0%, transparent 50%);
  overflow: hidden;
}

/* ── Window ── */
.sl-win {
  position: absolute;
  background: var(--bg2);
  border: 1px solid var(--border-h);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column;
  overflow: hidden;
  z-index: 10;
  transition: box-shadow .2s;
}
.sl-win:hover { box-shadow: 0 8px 40px rgba(0,0,0,.5), 0 0 0 1px var(--gold-dim); }

.sl-win-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px;
  background: rgba(201,168,76,.08);
  border-bottom: 1px solid var(--border);
  cursor: grab; user-select: none; -webkit-user-select: none;
  touch-action: none;
  min-height: 36px;
}
.sl-win-bar:active { cursor: grabbing; }
.sl-win-title {
  font-family: var(--font-head); font-size: .85rem; color: var(--gold);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sl-win-btns { display: flex; gap: 4px; }
.sl-win-btns button {
  background: none; border: none; color: var(--muted);
  font-size: .9rem; cursor: pointer; padding: 2px 6px;
  border-radius: 4px; transition: all var(--transition);
}
.sl-win-btns button:hover { color: var(--text); background: rgba(255,255,255,.08); }

.sl-win-body {
  flex: 1; overflow-y: auto; overflow-x: hidden;
}

.sl-win-minimized .sl-win-body { display: none; }
.sl-win-minimized .sl-win-resize { display: none; }
.sl-win-minimized { height: auto !important; }

.sl-win-resize {
  position: absolute; bottom: 0; right: 0;
  width: 20px; height: 20px; cursor: nwse-resize;
  touch-action: none;
}
.sl-win-resize::after {
  content: ''; position: absolute; bottom: 4px; right: 4px;
  width: 8px; height: 8px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  opacity: .5;
}

/* ── Number inputs: hide native spinner, bigger touch target ── */
.sl-win input[type="number"] {
  -moz-appearance: textfield;
  text-align: center; font-family: var(--font-head);
  color: var(--gold); font-size: .85rem;
  padding: 4px 4px;
}
.sl-win input[type="number"]::-webkit-inner-spin-button,
.sl-win input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none; margin: 0;
}

/* ── Player / NPC Cards ── */
.sl-player-card {
  background: rgba(0,0,0,.2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px; margin-bottom: 6px;
}

/* ── HP Buttons (Combat) ── */
.sl-hp-btn {
  padding: 4px 8px !important; font-size: .8rem !important;
  min-width: 32px !important; min-height: 28px;
  font-family: var(--font-head);
}

/* ── Combat Tracker ── */
.sl-combat-row {
  background: rgba(0,0,0,.15);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px 8px; margin-bottom: 4px;
  transition: all .15s;
}
.sl-combat-row.active {
  border-color: var(--gold);
  background: rgba(201,168,76,.08);
  box-shadow: 0 0 8px var(--gold-glow);
}
.sl-combat-row.dead { opacity: .35; }
.sl-init {
  font-family: var(--font-head);
  font-size: .9rem; color: var(--gold);
  min-width: 28px; text-align: center;
  background: rgba(0,0,0,.3); border-radius: 4px;
  padding: 2px 6px;
}

/* ── Mobile: Stack windows ── */
@media (max-width: 768px) {
  .sl-desktop { overflow: visible; min-height: auto; padding: 8px; }
  .sl-win {
    position: relative !important;
    left: 0 !important; top: 0 !important;
    width: 100% !important; height: auto !important;
    margin-bottom: 12px;
  }
  .sl-win-resize { display: none; }
  .sl-win-body { max-height: 400px; }
}