/* ==========================================================================
   Dashboard: Home stats, quota rings, suggested actions, leaderboard,
   charts, duty, quick actions
   ========================================================================== */

.app-page__toolbar {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap;
}
.section-title { font-size: var(--fs-lg); margin: var(--sp-6) 0 var(--sp-4); }

/* --- Home stats --- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--sp-4);
}
.stat--home { display: flex; align-items: center; gap: var(--sp-4); }
.stat__icon {
  width: 48px; height: 48px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: var(--radius);
  background: var(--primary-soft); color: var(--primary-hover);
}

/* --- Home quota card --- */
.quota-card {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap;
  margin-top: var(--sp-5);
  padding: var(--sp-5);
  border: 1px solid var(--border);
  border-left: 3px solid var(--text-muted);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.quota-card--ok { border-left-color: var(--success); }
.quota-card--bad { border-left-color: var(--primary); }
.quota-card--exempt { border-left-color: var(--info); }
.quota-badge { display: inline-flex; align-items: center; gap: var(--sp-2); font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 800; }
.quota-badge--ok { color: var(--success); }
.quota-badge--bad { color: var(--primary-hover); }
.quota-badge--exempt { color: var(--info); }
.quota-card__sub { color: var(--text-muted); font-size: var(--fs-sm); margin-top: 4px; }
.quota-card__details { display: inline-flex; align-items: center; gap: 4px; color: var(--gold); font-weight: 600; font-size: var(--fs-sm); }
.quota-card__details:hover { color: var(--text); }

/* --- Activity quota panel --- */
.quota-panel {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-6); flex-wrap: wrap;
  padding: var(--sp-6);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, var(--surface), var(--bg-alt));
}
.quota-panel--ok { box-shadow: inset 3px 0 0 var(--success); }
.quota-panel--bad { box-shadow: inset 3px 0 0 var(--primary); }
.quota-panel--exempt { box-shadow: inset 3px 0 0 var(--info); }
.quota-panel__eyebrow { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--text-muted); }
.quota-panel__headline { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-2); font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 800; color: var(--text); }
.quota-check { display: inline-grid; place-items: center; }
.quota-check--ok { color: var(--success); }
.quota-check--bad { color: var(--primary); }
.quota-check--exempt { color: var(--info); }
.quota-panel__reason { margin-top: var(--sp-3); color: var(--text-secondary); font-size: var(--fs-sm); }
.quota-rings { display: flex; gap: var(--sp-6); flex-wrap: wrap; justify-content: center; }

/* --- Rings (charts.js) --- */
.ring-wrap { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); }
.ring-holder { position: relative; display: grid; place-items: center; }
.ring { display: block; }
.ring__center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ring__center strong { font-family: var(--font-display); font-size: var(--fs-md); color: var(--text); line-height: 1; }
.ring__center small { font-size: 9px; text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--text-muted); margin-top: 2px; }
.ring__immunity { color: var(--info); font-size: 34px; }
.ring-label { font-size: var(--fs-xs); color: var(--text-secondary); text-align: center; max-width: 120px; }

/* --- Suggested actions --- */
.action-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.action-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-4);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--surface);
  transition: border-color var(--transition);
}
.action-row:hover { border-color: var(--border-strong); }
.action-row--mandatory { border-color: rgba(229, 72, 77, 0.35); background: var(--danger-soft); }
.action-row__text { display: flex; flex-direction: column; gap: 6px; }
.action-row__text p { color: var(--text-secondary); }
.action-row__text strong { color: var(--text); }
.action-row .btn { flex-shrink: 0; }
.suggest-note {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--radius-lg);
  font-size: var(--fs-sm);
}
.suggest-note--ok { background: var(--success-soft); color: var(--success); }
.suggest-note--exempt { background: var(--info-soft); color: var(--info); }
.suggest-note span { color: var(--text); }

/* --- Segmented control --- */
.seg { display: inline-flex; align-items: center; gap: 2px; padding: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-pill); }
.seg__label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--text-muted); padding: 0 var(--sp-2); }
.seg__btn { padding: 6px 14px; border-radius: var(--radius-pill); font-size: var(--fs-sm); font-weight: 500; color: var(--text-secondary); transition: background var(--transition-fast), color var(--transition-fast); }
.seg__btn:hover:not(.is-active) { color: var(--text); }
.seg__btn.is-active { background: var(--primary); color: #fff; }

/* --- Leaderboard --- */
.lb-toolbar { margin: var(--sp-4) 0; }
.lb-grid { display: grid; grid-template-columns: 360px 1fr; gap: var(--sp-5); align-items: start; }
.lb-list { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; }
.lb-row { display: flex; align-items: center; gap: var(--sp-3); padding: 12px var(--sp-4); border-bottom: 1px solid var(--border); }
.lb-row:last-child { border-bottom: none; }
.lb-row--you { background: var(--primary-soft); }
.lb-rank { width: 36px; font-family: var(--font-display); font-weight: 700; color: var(--text-muted); }
.lb-rank--gold { color: var(--gold); }
.lb-rank--silver { color: #cfd8e3; }
.lb-rank--bronze { color: #cd9b6a; }
.lb-name { flex: 1; color: var(--text); font-weight: 500; }
.lb-time { color: var(--text-secondary); font-size: var(--fs-sm); }
.lb-sep { text-align: center; color: var(--text-muted); padding: 4px; }

/* --- Charts --- */
.chart-card { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); padding: var(--sp-5); }
.chart-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); flex-wrap: wrap; }
.chart-card__head h3 { font-size: var(--fs-md); }
.chart-card__head small { color: var(--text-muted); font-size: var(--fs-xs); }
.chart-plot { position: relative; }
svg.chart { width: 100%; height: auto; display: block; overflow: visible; }
.chart__axis { fill: var(--text-muted); font-size: 11px; font-family: var(--font-sans); }
.chart-legend { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-3); }
.chart-legend__item { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--text-secondary); }
.chart-legend__item i, .chart-tooltip__row i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; flex-shrink: 0; }
.chart-tooltip {
  position: absolute; top: 6px; transform: translateX(-50%);
  background: var(--surface-2); border: 1px solid var(--border-strong);
  border-radius: var(--radius); padding: 8px 10px; pointer-events: none;
  transition: opacity var(--transition-fast); box-shadow: var(--shadow-lg);
  min-width: 140px; z-index: 5;
}
.chart-tooltip--right { transform: translateX(-100%); }
.chart-tooltip__title { font-size: var(--fs-xs); color: var(--text-muted); margin-bottom: 5px; }
.chart-tooltip__row { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--text-secondary); padding: 1px 0; }
.chart-tooltip__row strong { margin-left: auto; color: var(--text); padding-left: 10px; }
.insight-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--radius-pill); background: var(--gold-soft); font-size: var(--fs-xs); max-width: 460px; }
.insight-pill > .msym { color: var(--gold); flex-shrink: 0; }
.insight-pill span { color: var(--text-secondary); }
.graph-stack { display: flex; flex-direction: column; gap: var(--sp-5); }

/* --- Duty --- */
.duty-count { display: inline-flex; align-items: center; gap: 8px; margin-bottom: var(--sp-5); color: var(--text-secondary); font-weight: 600; }
.duty-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: var(--sp-4); }
.duty-card { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); padding: var(--sp-4); transition: border-color var(--transition); }
.duty-card:hover { border-color: var(--border-strong); }
.duty-card__top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.duty-card__id { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.duty-avatar { width: 42px; height: 42px; font-size: var(--fs-sm); }
.duty-card__id strong { display: block; color: var(--text); }
.duty-status { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); margin-top: 2px; }
.duty-status .badge__dot { width: 7px; height: 7px; }
.duty-status--ok { color: var(--success); }
.duty-status--info { color: var(--info); }
.duty-status--gold { color: var(--gold); }
.duty-status--muted { color: var(--text-muted); }
.duty-card__meta { display: flex; gap: var(--sp-3); justify-content: space-between; border-top: 1px solid var(--border); padding-top: var(--sp-3); }
.duty-meta { display: flex; align-items: center; gap: 8px; color: var(--text-muted); min-width: 0; }
.duty-meta__label { display: block; font-size: 9px; text-transform: uppercase; letter-spacing: var(--ls-wide); }
.duty-meta__val { display: block; color: var(--text-secondary); font-size: var(--fs-sm); }

/* --- Quick actions --- */
.qa { margin-top: var(--sp-7); }
.qa__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-4); }
.qa__head h2 { font-size: var(--fs-lg); }
.qa__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sp-3); }
.qa__item { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); padding: var(--sp-5) var(--sp-3); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); color: var(--text-secondary); font-weight: 600; font-size: var(--fs-sm); transition: transform var(--transition), border-color var(--transition), color var(--transition); }
.qa__item:hover { transform: translateY(-2px); border-color: var(--border-gold); color: var(--text); }
.qa__item .msym { color: var(--primary-hover); }
.qa__remove { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--danger-soft); color: var(--danger); }
.qa__remove:hover { background: var(--danger); color: #fff; }
.qa__add { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-2); padding: var(--sp-5) var(--sp-3); border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); color: var(--text-muted); cursor: pointer; font-size: var(--fs-sm); font-weight: 600; }
.qa__add:hover { border-color: var(--border-gold); color: var(--text-secondary); }
.qa__menu { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 6px; background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: var(--radius); padding: 6px; display: none; flex-direction: column; gap: 2px; z-index: 10; min-width: 190px; box-shadow: var(--shadow-lg); }
.qa__add.is-open { border-style: solid; border-color: var(--border-gold); color: var(--text-secondary); }
.qa__add.is-open .qa__menu { display: flex; }
.qa__menu-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--radius-sm); color: var(--text-secondary); font-size: var(--fs-sm); text-align: left; }
.qa__menu-item:hover { background: var(--surface-hover); color: var(--text); }

/* --- Small button + sidebar WIP marker --- */
.btn--sm { padding: 6px 12px; font-size: var(--fs-xs); border-radius: var(--radius-sm); }
.side-link__soon { margin-left: auto; font-size: 9px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); background: var(--surface); padding: 2px 6px; border-radius: var(--radius-pill); }
.side-link--wip .msym { opacity: 0.72; }
.side-link__lock { margin-left: auto; display: inline-grid; place-items: center; color: var(--gold); opacity: 0.7; }
.app-shell[data-collapsed="true"] .side-link__soon,
.app-shell[data-collapsed="true"] .side-link__lock { display: none; }

/* --- Responsive --- */
@media (max-width: 920px) {
  .lb-grid { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .quota-panel { flex-direction: column; align-items: flex-start; }
  .quota-rings { width: 100%; }
  .action-row { flex-direction: column; align-items: stretch; }
  .action-row .btn { width: 100%; }
}