/* ==========================================================================
   Design-system layer — corporate-minimal dark: roomy rounded cards ("panels"
   in the markup API), soft borders, crisp per-object motion. Loaded LAST so
   it can restyle legacy chrome until each stylesheet is fully migrated
   during the Phase 1/2 rollout.
   ========================================================================== */

/* Ambient background: keep it calm — soft corner glows, no grid noise */
.bg-grid { opacity: 0.6; }

/* ==========================================================================
   Panel = card module (header row + optional toolbar + body + status)
   ========================================================================== */
/* No overflow:hidden — popover menus (e.g. Quick Actions "Add") must escape
   the card. Inner chrome rounds its own corners instead. */
.panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.panel:hover { border-color: var(--border-strong); }
.panel__titlebar { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.panel__status { border-radius: 0 0 var(--radius-lg) var(--radius-lg); }

.panel__titlebar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: var(--titlebar-h);
  padding: var(--sp-3) var(--sp-5);
  flex-shrink: 0;
  background: var(--panel-header-bg);
  user-select: none;
}
.panel__titlebar > .msym {
  font-size: 18px;
  color: var(--primary-hover);
  background: var(--primary-soft);
  border-radius: var(--radius-sm);
  padding: 6px;
  flex-shrink: 0;
}
.panel__title {
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--text);
  letter-spacing: var(--ls-tight);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.panel__title small { color: var(--text-muted); font-weight: 500; font-size: var(--fs-xs); margin-left: 8px; }
.panel__tb-actions { margin-left: auto; display: flex; align-items: center; gap: var(--sp-2); }
.panel__tool {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  color: var(--text-secondary);
  font-size: var(--fs-xs);
  font-weight: 600;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.panel__tool:hover { background: var(--surface-hover); color: var(--text); border-color: var(--border-gold); }
.panel__tool .msym { font-size: 15px; }

.panel__toolbar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  padding: var(--sp-2) var(--sp-5) var(--sp-3);
  background: var(--panel-header-bg);
}
.panel__body { padding: var(--sp-3) var(--sp-5) var(--sp-5); min-width: 0; }
.panel__body--flush { padding: 0 var(--sp-3) var(--sp-3); }
.panel__status {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: var(--sp-2) var(--sp-5);
  border-top: 1px solid var(--panel-border-inner);
  background: var(--panel-toolbar-bg);
  color: var(--text-muted);
  font-size: var(--fs-xs);
}

/* --- Dock layout: stacked modules with breathing room --- */
.dock { display: flex; flex-direction: column; gap: var(--dock-gap); }
.dock-row { display: grid; gap: var(--dock-gap); align-items: stretch; }

/* ==========================================================================
   App chrome
   ========================================================================== */
.app-content { padding: var(--sp-5) var(--sp-5) var(--sp-8); }
.app-content .container { max-width: 1160px; }

.app-page__head { margin-bottom: var(--sp-5); }
.app-page__head h1 { font-size: var(--fs-xl); }

.app-topbar {
  border-bottom: 1px solid var(--border);
}
.app-topbar__title {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--text);
  letter-spacing: var(--ls-tight);
}

/* Sidebar: flat, calm; active item is a soft red pill */
.side-link { border-radius: var(--radius-sm); }
.side-link.is-active { box-shadow: none; }

/* ==========================================================================
   Component refinements
   ========================================================================== */
.btn { border-radius: var(--radius-sm); }
.input, .set-select { border-radius: var(--radius-sm); }

/* Wells inside panels: quiet inset tiles */
.panel .stat,
.panel .qa__item,
.panel .qa__add {
  background: var(--surface-2);
  border: 1px solid var(--panel-border-inner);
  border-radius: var(--radius);
  box-shadow: none;
}
.panel .stat { padding: var(--sp-4) var(--sp-5); }
.panel .qa__item {
  padding: var(--sp-5) var(--sp-3);
  transition: transform var(--transition), background var(--transition), border-color var(--transition), color var(--transition);
}
.panel .qa__item:hover { transform: translateY(-3px); border-color: var(--border-gold); background: var(--surface-hover); color: var(--text); }
.panel .qa__add { padding: var(--sp-5) var(--sp-3); border-style: dashed; border-color: var(--border-strong); }
.panel.qa { margin-top: 0; } /* dock gap owns the rhythm, not the legacy .qa margin */

/* Home: quota strip flush inside its module */
.panel .quota-card {
  margin-top: 0;
  border: 1px solid var(--panel-border-inner);
  border-left: 3px solid var(--text-muted);
  border-radius: var(--radius);
  background: var(--surface-2);
  padding: var(--sp-4) var(--sp-5);
}
.panel .quota-card--ok { border-left-color: var(--success); }
.panel .quota-card--bad { border-left-color: var(--primary); }
.panel .quota-card--exempt { border-left-color: var(--info); }
.panel__body--flush .quota-card { margin: 0 var(--sp-2) var(--sp-2); }

/* Live count chip (panel header) */
.live-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  color: var(--text-secondary);
  font-size: var(--fs-xs);
  font-weight: 600;
  white-space: nowrap;
}
.live-chip .badge__dot { width: 7px; height: 7px; animation: pulse-dot 2.4s ease-in-out infinite; }

/* ==========================================================================
   Legacy blocks nested inside panels lose their own card chrome and become
   quiet inset content or wells — no double borders, no card-on-card.
   ========================================================================== */
.panel .set-card,
.panel .quota-panel,
.panel .sessions-top {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}
:root[data-theme="light"] .panel .set-card { background: transparent; box-shadow: none; }
.panel .set-section__head { display: none; } /* panel titlebar replaces it */
.panel.set-section { margin: 0; }
.panel .quota-panel { padding: var(--sp-4) var(--sp-5) var(--sp-5); }
.panel .sessions-top { padding: var(--sp-2) 0; }

.panel .chart-card,
.panel .lb-list,
.panel .duty-card,
.panel .imm-card,
.panel .action-row,
.panel .past-item,
.panel .module-card,
.panel .loa-hist {
  background: var(--surface-2);
  border: 1px solid var(--panel-border-inner);
  border-radius: var(--radius);
  box-shadow: none;
}
:root[data-theme="light"] .panel .chart-card,
:root[data-theme="light"] .panel .lb-list,
:root[data-theme="light"] .panel .duty-card,
:root[data-theme="light"] .panel .imm-card,
:root[data-theme="light"] .panel .action-row,
:root[data-theme="light"] .panel .past-item,
:root[data-theme="light"] .panel .module-card,
:root[data-theme="light"] .panel .loa-hist { background: var(--surface-2); box-shadow: none; }
.panel .module-card { padding: var(--sp-5); }
.panel .concept-note { margin-top: var(--sp-4); }

/* Mail two-pane inside its flush panel */
.panel .mail-layout { margin: 0; }
.panel .mail-toolbar { flex: 1; margin: 0; }
.panel__toolbar .mail-filters { width: 100%; }

/* ==========================================================================
   Management refinements
   ========================================================================== */
.mgmt-branch-layout { gap: var(--dock-gap); }
.mgmt-subnav {
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-lg);
  background: var(--panel-bg);
  box-shadow: var(--shadow-sm);
}
.mgmt-subnav__item { border-radius: var(--radius-sm); }

.panel .mgmt-players { padding: var(--sp-2); }
.panel .mgmt-player {
  background: var(--surface-2);
  border: 1px solid var(--panel-border-inner);
  border-radius: var(--radius);
  transition: transform var(--transition), background var(--transition), border-color var(--transition);
}
.panel .mgmt-player:hover { transform: translateY(-2px); border-color: var(--border-gold); background: var(--surface-hover); }
.panel .mgmt-rankfilter .set-select { min-width: 220px; }
.panel .empty-hint { padding: var(--sp-6); }

/* ==========================================================================
   Motion — per-object entrances. Everything respects reduced-motion.
   ========================================================================== */

/* Icon / badge pop (scale + fade, slight overshoot) */
@keyframes pop-in {
  0%   { opacity: 0; transform: scale(0.6); }
  70%  { opacity: 1; transform: scale(1.06); }
  100% { opacity: 1; transform: scale(1); }
}
.reveal.is-visible .stat__icon,
.reveal.is-visible .quota-badge .msym,
.reveal.is-visible .panel__titlebar > .msym {
  animation: pop-in 0.45s var(--ease-out) backwards;
}
.reveal.is-visible .stat__icon { animation-delay: 0.1s; }

/* Stat numbers rise in under their count-up (JS pairs with ui.animateCount) */
@keyframes value-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.reveal.is-visible .stat__value { animation: value-in 0.5s var(--ease-out) 0.05s backwards; }

/* Grid/list children stagger. Apply .stagger to any container (inside a
   .reveal ancestor, or itself a .reveal) and its children cascade in.
   Legacy grids (stat-grid, qa__grid, mgmt-players) get it implicitly. */
.reveal.is-visible .stat-grid > *,
.reveal.is-visible .qa__grid > *,
.reveal.is-visible .stagger > *,
.stagger.reveal.is-visible > *,
.panel .mgmt-players > * {
  animation: value-in 0.5s var(--ease-out) backwards;
}
.reveal.is-visible .stat-grid > *:nth-child(2),
.reveal.is-visible .qa__grid > *:nth-child(2),
.reveal.is-visible .stagger > *:nth-child(2),
.stagger.reveal.is-visible > *:nth-child(2),
.panel .mgmt-players > *:nth-child(2) { animation-delay: 0.06s; }
.reveal.is-visible .stat-grid > *:nth-child(3),
.reveal.is-visible .qa__grid > *:nth-child(3),
.reveal.is-visible .stagger > *:nth-child(3),
.stagger.reveal.is-visible > *:nth-child(3),
.panel .mgmt-players > *:nth-child(3) { animation-delay: 0.12s; }
.reveal.is-visible .stat-grid > *:nth-child(4),
.reveal.is-visible .qa__grid > *:nth-child(4),
.reveal.is-visible .stagger > *:nth-child(4),
.stagger.reveal.is-visible > *:nth-child(4),
.panel .mgmt-players > *:nth-child(4) { animation-delay: 0.18s; }
.reveal.is-visible .stat-grid > *:nth-child(n+5),
.reveal.is-visible .qa__grid > *:nth-child(n+5),
.reveal.is-visible .stagger > *:nth-child(n+5),
.stagger.reveal.is-visible > *:nth-child(n+5),
.panel .mgmt-players > *:nth-child(n+5) { animation-delay: 0.24s; }

/* Progress-bar fills grow from zero once visible (pairs with charts.js bars
   and .mgmt-bar__fill which already transition width on value set) */
@keyframes bar-grow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
.reveal.is-visible .mgmt-bar__fill { transform-origin: left; animation: bar-grow 0.9s var(--ease-out) 0.15s backwards; }

@media (prefers-reduced-motion: reduce) {
  .reveal.is-visible .stat__icon,
  .reveal.is-visible .quota-badge .msym,
  .reveal.is-visible .panel__titlebar > .msym,
  .reveal.is-visible .stat__value,
  .reveal.is-visible .stat-grid > *,
  .reveal.is-visible .qa__grid > *,
  .panel .mgmt-players > *,
  .reveal.is-visible .mgmt-bar__fill { animation: none; }
}