/* components.toolbar.css (revamped legacy-style) */
:root {
  --toolbar-bg: linear-gradient(180deg,#5d3a13,#3b230a);
  --toolbar-btn-gradient: linear-gradient(180deg,#f7b449,#d47924 60%, #b45d12);
  --toolbar-btn-gradient-hover: linear-gradient(180deg,#ffc768,#e58a2d 60%, #c66818);
  /* Avoid pure black outlines when buttons render black text */
  /* Updated to remove unintended gray rim: use pure black border & cleaner shadow */
  --toolbar-btn-border: #000;
  /* Shadow layers: proper drop shadow offset to bottom-right, plus ambient shadow */
  --toolbar-btn-shadow: 4px 4px 0 #000, 0 6px 14px -6px rgba(0,0,0,.65);
  --toolbar-btn-size: 46px;
  --toolbar-gap: 10px;
  --toolbar-radius: 10px;
  --toolbar-z: 5000;
  --toolbar-accent: #ffe066;
  --toolbar-font: 'Bangers', cursive;
}

.cmp-toolbar { position:relative; display:flex; gap:var(--toolbar-gap); align-items:center; background:var(--toolbar-bg); padding:12px 18px; border:4px solid #000; border-radius:18px; box-shadow:6px 6px 0 #000, 0 0 0 2px #222 inset, 0 10px 24px -10px rgba(0,0,0,.75); z-index:var(--toolbar-z); transition:opacity .18s ease, transform .22s ease; }
.cmp-toolbar button.toolbar-btn { pointer-events:auto; }
body:not(.game-active) .cmp-toolbar { filter:grayscale(.35) brightness(.85) saturate(.75); }
body:not(.game-active) .cmp-toolbar .toolbar-btn { opacity:.9; }
.cmp-toolbar.is-hidden { opacity:0; pointer-events:none; transform:translateY(-4px); }

.cmp-toolbar .toolbar-btn { position:relative; width:var(--toolbar-btn-size); height:var(--toolbar-btn-size); font-family:var(--toolbar-font); letter-spacing:1px; font-size:0; color:#000; background:var(--toolbar-btn-gradient); border:3px solid var(--toolbar-btn-border); border-radius:var(--toolbar-radius); display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:var(--toolbar-btn-shadow); transition:transform .15s ease, background .2s ease, box-shadow .2s ease; }

/* Ensure toolbar buttons maintain their styling even in dark mode */
body.dark-mode .cmp-toolbar .toolbar-btn, 
body.dark-mode .cmp-toolbar button.toolbar-btn,
body.dark-mode button[class*="toolbar-btn"] { 
  background:var(--toolbar-btn-gradient) !important; 
  border:3px solid var(--toolbar-btn-border) !important; 
  border-color: var(--toolbar-btn-border) !important;
  color:#000 !important; 
  box-shadow:var(--toolbar-btn-shadow) !important;
}
body.dark-mode .cmp-toolbar .toolbar-btn:hover,
body.dark-mode .cmp-toolbar button.toolbar-btn:hover,
body.dark-mode button[class*="toolbar-btn"]:hover { 
  background:var(--toolbar-btn-gradient-hover) !important; 
  border:3px solid var(--toolbar-btn-border) !important; 
  border-color: var(--toolbar-btn-border) !important;
}
/* ------------------------------------------------------------------
   High-specificity overrides to isolate modern toolbar styling.
   Legacy CSS (e.g. legacy/modals.css) defines a global .toolbar-btn selector
   which bleeds into the modern toolbar and introduces unintended border/shadow.
   We reassert the intended appearance here with minimal !important usage
   only on properties known to be overridden by legacy/global rules.
------------------------------------------------------------------- */
.cmp-toolbar > .toolbar-btn,
.cmp-toolbar .toolbar-btn.toolbar-btn { /* doubled class for extra specificity */
  background: var(--toolbar-btn-gradient) !important;
  border: 3px solid var(--toolbar-btn-border) !important;
  box-shadow: var(--toolbar-btn-shadow) !important;
  color:#000 !important;
  padding:0 !important;
  line-height:1 !important;
  position:relative;
  isolation:isolate; /* prevent blending with parent backdrop */
}
/* Hover & active reasserted */
.cmp-toolbar > .toolbar-btn:hover,
.cmp-toolbar .toolbar-btn.toolbar-btn:hover { background:var(--toolbar-btn-gradient-hover) !important; }
.cmp-toolbar > .toolbar-btn:active,
.cmp-toolbar .toolbar-btn.toolbar-btn:active { box-shadow:2px 2px 0 #000, 0 4px 10px -6px rgba(0,0,0,.6) !important; }

/* Dark mode: keep identical look (do NOT flatten borders) */
body.dark-mode .cmp-toolbar > .toolbar-btn,
body.dark-mode .cmp-toolbar .toolbar-btn.toolbar-btn { background:var(--toolbar-btn-gradient) !important; }
body.dark-mode .cmp-toolbar > .toolbar-btn:hover,
body.dark-mode .cmp-toolbar .toolbar-btn.toolbar-btn:hover { background:var(--toolbar-btn-gradient-hover) !important; }

.cmp-toolbar .toolbar-btn .ico { width:28px; height:28px; pointer-events:none; }
.cmp-toolbar .toolbar-btn .vh { position:absolute; width:1px; height:1px; margin:-1px; border:0; padding:0; clip:rect(0 0 0 0); overflow:hidden; white-space:nowrap; }
.cmp-toolbar .toolbar-btn:hover { background:var(--toolbar-btn-gradient-hover); transform:translateY(-2px); }
.cmp-toolbar .toolbar-btn:active { transform:translateY(1px); box-shadow:2px 2px 0 #000, 0 4px 10px -6px rgba(0,0,0,.6); }

/* Debug helpers: add body class 'toolbar-debug' in console to isolate visual layers */
body.toolbar-debug .cmp-toolbar { background:#111 !important; box-shadow:none !important; }
body.toolbar-debug .cmp-toolbar .toolbar-btn { background:#ffeb3b !important; filter:none !important; }
body.toolbar-debug .cmp-toolbar .toolbar-btn:hover { outline:2px solid #f00 !important; }
body.toolbar-debug .cmp-toolbar .toolbar-btn::after { content:''; position:absolute; inset:0; border:1px dashed magenta; pointer-events:none; }
.cmp-toolbar .toolbar-btn:focus-visible { outline:2px solid #fff; outline-offset:2px; }
.cmp-toolbar .toolbar-btn.is-muted { background:linear-gradient(180deg,#777,#444); color:#eee; }
.cmp-toolbar .toolbar-btn.is-muted:hover { background:linear-gradient(180deg,#888,#555); }
.cmp-toolbar .toolbar-btn.is-paused { background:linear-gradient(180deg,#ff6b49,#d42924 60%, #b41912); color:#fff; animation:pulse-pause 2s infinite; }
.cmp-toolbar .toolbar-btn.is-paused:hover { background:linear-gradient(180deg,#ff8a68,#e53a2d 60%, #c61818); }

/* Ensure pause button is always accessible */
.cmp-toolbar .toolbar-btn[data-action="pause"] {
  z-index: 10000;
  position: relative;
}

@keyframes pulse-pause {
  0%, 100% { box-shadow:var(--toolbar-btn-shadow), 0 0 0 0 rgba(212, 41, 36, 0.3); }
  50% { box-shadow:var(--toolbar-btn-shadow), 0 0 0 8px rgba(212, 41, 36, 0); }
}

/* Footer centering support */
.gl-footer { justify-content:center; }

/* Ensure panel headers have priority over toolbar (in case of overlap on small view heights) */
.cmp-monsters-panel .mp-header { z-index:4300; position:relative; }

@media (max-width: 800px) { .cmp-toolbar { padding:10px 12px; --toolbar-btn-size:40px; } }

/* Mobile toolbar behavior */
@media (max-width: 1024px) {
  /* Hide the desktop toolbar entirely on mobile */
  .cmp-toolbar { display: none; }
  /* Mobile buttons are now handled by their respective components:
     - Action menu: circular button in action-menu.component.js
     - Dice toggle: circular button in dice-tray.component.js */
}

/* Lightweight modal overlays triggered by toolbar (help/about) */
.light-modal { position:fixed; inset:0; z-index:8100; display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .2s ease; }
.light-modal.in { opacity:1; }
.light-modal-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.55); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); }
.light-modal-dialog { position:relative; background:#1e1e1e; color:#fff; border:3px solid #000; padding:14px 18px 18px; width:min(520px,90%); font-family:system-ui,sans-serif; border-radius:10px; box-shadow:6px 6px 0 #000,0 0 0 2px #222 inset; }
.light-modal .lm-head { display:flex; align-items:center; justify-content:space-between; margin:0 0 8px; font-family:'Bangers',cursive; letter-spacing:1px; }
.light-modal h2 { font-size:28px; margin:0; color:#ffd400; text-shadow:-2px -2px 0 #000,2px -2px 0 #000,-2px 2px 0 #000,2px 2px 0 #000; }
.light-modal .lm-body { font-size:14px; line-height:1.5; }
.light-modal .lm-body ul { padding-left:18px; margin:6px 0 10px; }
.light-modal button[data-close] { background:var(--toolbar-btn-gradient,#444); border:2px solid #333; color:#000; font-family:'Bangers',cursive; font-size:18px; width:38px; height:38px; border-radius:8px; cursor:pointer; box-shadow:3px 3px 0 #333; }
.light-modal button[data-close]:hover { background:var(--toolbar-btn-gradient-hover,#666); }