/* ============================================================
 * assets/mydash.css — "My Dashboard" personal control center.
 * Token-driven so it adapts to light/blueprint(dark) automatically:
 * every color comes from an app CSS variable, never a hardcoded hue.
 * Card grid that collapses to a single column on narrow screens.
 * ============================================================ */

.md-load,
.md-empty { padding: 48px 20px; text-align: center; color: var(--ink-soft); font-size: 14px; }
.md-empty i { font-size: 30px; color: var(--ink-faint); display: block; margin-bottom: 10px; }
.md-empty h3 { margin: 0 0 4px; color: var(--ink); font-size: 16px; }
.md-empty p { margin: 0; font-size: 13px; }

/* ── Header ─────────────────────────────────────────────── */
.md-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 20px;
}
.md-hi { margin: 0; font-size: 22px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }
.md-sub { margin: 4px 0 0; font-size: 13px; color: var(--ink-soft); }
.md-head-r { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.md-role {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--accent-bg); color: var(--accent);
  border-radius: 999px; padding: 5px 12px; font-size: 12px; font-weight: 600;
}
.md-role i { font-size: 14px; }

/* ── Card grid ──────────────────────────────────────────── */
.md-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--stack); align-items: start;
}
.md-card {
  background: var(--white); border: 1px solid var(--bd); border-radius: 12px;
  padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--gap-min);
  /* Without this a grid item refuses to shrink below its content's intrinsic
     width, so one long unbreakable string (a project name, an email) pushes the
     card past its track and into the one beside it. */
  min-width: 0;
}
.md-card-h { display: flex; align-items: center; gap: 8px; min-width: 0; }
.md-card-h > i { font-size: 18px; color: var(--accent); }
.md-card-t { font-size: 14px; font-weight: 700; color: var(--ink); flex: 1; letter-spacing: -0.01em; min-width: 0; overflow-wrap: anywhere; }

.md-count {
  min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; background: var(--bg2); color: var(--ink-soft);
}
.md-count.md-warn   { background: #FEF3C7; color: #92400E; }
.md-count.md-bad    { background: #FEE2E2; color: #991B1B; }
.md-count.md-accent { background: var(--accent-bg); color: var(--accent); }

/* ── Notifications rail: action cards on the left, notifications as a tall
      collapsible bar on the right (keeps the grid cards equalized) ── */
.md-layout { display: flex; align-items: flex-start; gap: 16px; }
.md-main { flex: 1 1 auto; min-width: 0; }
.md-notifs-rail { flex: 0 0 300px; position: sticky; top: 12px; }
.md-notifs-rail-card { padding: 0; gap: 0; overflow: hidden; }
.md-notifs-rail-card .md-card-h { padding: 14px 16px; border-bottom: 1px solid var(--bd); }
.md-notifs-rail-card .md-list { max-height: 62vh; overflow-y: auto; padding: 8px 10px 16px; }
.md-notifs-rail-card .md-empty-mini { padding: 18px 16px; }
/* Grid-card notifications (few action cards): cap so a long list scrolls
   internally instead of stretching the card and touching its neighbours. */
.md-notifs:not(.md-notifs-rail-card) .md-list { max-height: 300px; overflow-y: auto; padding-bottom: 4px; }
.md-notifs-x { border: 0; background: none; color: var(--ink-soft); cursor: pointer; padding: 2px; font-size: 17px; display: flex; align-items: center; }
.md-notifs-x:hover { color: var(--accent); }
.md-layout.md-collapsed .md-notifs-rail { flex-basis: 46px; }
.md-notifs-collapsed { width: 46px; min-height: 130px; display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 13px 0; background: var(--white); border: 1px solid var(--bd); border-radius: 12px; cursor: pointer; color: var(--ink-soft); }
.md-notifs-collapsed:hover { color: var(--accent); border-color: var(--accent); }
.md-notifs-collapsed i { font-size: 18px; }
.md-notifs-collapsed .md-count { min-width: 20px; height: 20px; font-size: 11px; padding: 0 6px; }
@media (max-width: 860px) {
  .md-layout { flex-direction: column; }
  .md-notifs-rail, .md-layout.md-collapsed .md-notifs-rail { flex-basis: auto; width: 100%; position: static; max-height: none; }
  .md-notifs-rail-card { max-height: 420px; }
  .md-notifs-collapsed { width: 100%; min-height: 44px; flex-direction: row; }
}

/* ── Lists ──────────────────────────────────────────────── */
.md-list { display: flex; flex-direction: column; gap: 2px; margin: 0 -6px; }
.md-li {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 6px; border-radius: 8px; text-decoration: none; color: inherit;
  border-bottom: 1px solid var(--bd);
}
.md-list .md-li:last-child { border-bottom: 0; }
.md-li-link { cursor: pointer; transition: background .12s ease; }
.md-li-link:hover { background: var(--bg2); }
.md-li-ic { font-size: 16px; color: var(--ink-soft); flex: none; }
.md-li-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.md-li-title { font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.md-li-title.md-unread { font-weight: 700; }
.md-li-sub { font-size: 12px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.md-li-meta { font-size: 11.5px; color: var(--ink-faint); white-space: nowrap; flex: none; display: inline-flex; align-items: center; gap: 3px; }
.md-li-meta i { font-size: 12px; }
.md-li-meta.md-bad { color: #B91C1C; font-weight: 600; }

/* Priority dot */
.md-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--ink-faint); }
.md-dot.md-ok    { background: var(--accent); }
.md-dot.md-warn  { background: #D97706; }
.md-dot.md-bad   { background: #DC2626; }
.md-dot.md-faint { background: var(--ink-faint); }

/* ── Big single-stat card (ball-in-court) ───────────────── */
.md-big { font-size: 40px; font-weight: 800; color: var(--ink); line-height: 1; letter-spacing: -0.02em; }
.md-big-sub { font-size: 12.5px; color: var(--ink-soft); margin-top: -4px; }
.md-big-sub.md-bad { color: #B91C1C; font-weight: 600; }
.md-big-sub i { font-size: 13px; }

/* ── Stat row (activity) ────────────────────────────────── */
.md-stat-row { display: flex; gap: 10px; }
.md-stat {
  flex: 1; background: var(--bg2); border-radius: 9px; padding: 12px; text-align: center;
}
.md-stat-v { font-size: 24px; font-weight: 800; color: var(--ink); line-height: 1.1; }
.md-stat-l { font-size: 11.5px; color: var(--ink-soft); margin-top: 3px; }

/* ── Crew chips ─────────────────────────────────────────── */
.md-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.md-chip {
  font-size: 12px; font-weight: 500; color: var(--ink-soft);
  background: var(--bg2); border: 1px solid var(--bd); border-radius: 999px; padding: 4px 10px;
}
.md-chip-more { color: var(--accent); background: var(--accent-bg); border-color: transparent; font-weight: 600; }

/* ── Card footer action ─────────────────────────────────── */
.md-card-f { margin-top: auto; }
.md-act {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 600; color: var(--accent); text-decoration: none;
  padding: 6px 2px;
}
.md-act:hover { text-decoration: underline; }
.md-act i { font-size: 14px; }

.md-empty-mini { font-size: 12.5px; color: var(--ink-soft); padding: 6px 2px; display: flex; align-items: center; gap: 6px; }
.md-empty-mini i { font-size: 15px; color: var(--ink-faint); }

/* ── All-caught-up (pared-down worker) ──────────────────── */
.md-caughtup {
  text-align: center; padding: 44px 24px; background: var(--white);
  border: 1px solid var(--bd); border-radius: 12px;
}
.md-caughtup > i { font-size: 34px; color: var(--accent); }
.md-caughtup h3 { margin: 12px 0 4px; font-size: 17px; color: var(--ink); }
.md-caughtup p { margin: 0 auto 16px; font-size: 13px; color: var(--ink-soft); max-width: 380px; }

/* ── Mobile: one column ─────────────────────────────────── */
@media (max-width: 640px) {
  .md-grid { grid-template-columns: 1fr; }
  .md-head { flex-direction: column; align-items: stretch; }
  .md-hi { font-size: 19px; }
}