/* ================================================================
   FILM Markets — Dashboard (Crisis Monitor)
   Depends on: tokens.css, base.css, components.css
   ================================================================ */

/* ── Page layout ── */
.dash-main {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--s-3) var(--s-3) calc(var(--statusbar-h) + var(--s-6));
  position: relative;
  z-index: var(--z-base);
}

/* ── Ambient top glow ── */
body::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 200px;
  background: linear-gradient(180deg, rgba(240, 185, 11, 0.025), transparent);
  pointer-events: none;
  z-index: 0;
}

/* ── Section ── */
.dash-sec {
  margin-bottom: var(--s-2);
}

/* ── Dense widget grid (override gap for dashboard) ── */
.dash-sec .grid-dense {
  gap: var(--grid-gap);
}

/* ── Keyboard shortcut hint on section num ── */
.sec-num .kbd {
  font-size: var(--fs-micro);
  opacity: 0.55;
  margin-left: var(--s-1);
  background: rgba(0,0,0,0.3);
  border-radius: var(--r-0);
  padding: 0 3px;
  font-weight: 400;
}

/* ── Dense mode toggle ── */
.dense-toggle {
  font-family: var(--ff-mono);
  font-size: var(--fs-micro);
  color: var(--t-3);
  background: var(--bg-2);
  border: 1px solid var(--bd-1);
  border-radius: var(--r-1);
  padding: 2px var(--s-2);
  cursor: pointer;
  letter-spacing: var(--ls-wide);
  transition: all var(--dur-fast);
}
.dense-toggle:hover { color: var(--t-1); border-color: var(--bd-2); }
.dense-toggle.on {
  background: var(--alert-bg);
  border-color: rgba(240,185,11,0.3);
  color: var(--alert);
}

/* ── Fullscreen overlay (F key) ── */
.fullscreen-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  background: var(--bg-0);
  display: none;
  flex-direction: column;
  padding: var(--s-2);
}
.fullscreen-overlay.visible { display: flex; }
.fullscreen-overlay .dcard {
  flex: 1;
  border-radius: var(--r-3);
}
.fullscreen-close {
  position: absolute;
  top: var(--s-3);
  right: var(--s-3);
  z-index: 1;
  background: var(--bg-3);
  border: 1px solid var(--bd-2);
  color: var(--t-1);
  width: 32px; height: 32px;
  border-radius: var(--r-2);
  font-size: var(--fs-md);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--dur-fast);
}
.fullscreen-close:hover { background: var(--down-bg); color: var(--down-text); }