/* ============================================================
   My Dashboard — friendly layer for non-technical users
   Loads AFTER app.css. Softer cards, bigger numbers, plain UI.
   ============================================================ */

.dash { max-width: 1280px; }

/* ---------- Greeting hero ---------- */
.dash-hero {
  background: linear-gradient(120deg, #f2f7ff 0%, #eef2fd 55%, #f7f4ff 100%);
  border: 1px solid #dfe8f8; border-radius: 16px; padding: 1.4rem 1.6rem;
  display: flex; flex-wrap: wrap; gap: 1rem 1.4rem; align-items: center; margin-bottom: 1.2rem;
}
.dash-hero .avatar-lg {
  width: 54px; height: 54px; border-radius: 50%; flex: 0 0 auto;
  background: linear-gradient(135deg, #2f6bff, #7c5cff); color: #fff;
  display: grid; place-items: center; font-weight: 700; font-size: 1.15rem;
}
.dash-hero .hi { font-size: 1.45rem; font-weight: 700; letter-spacing: -.3px; margin: 0; }
.dash-hero .hi-sub { color: var(--text-soft); font-size: .92rem; margin-top: .15rem; }
.dash-hero .grow { flex: 1; min-width: 240px; }

/* ---------- Role switcher (credentials demo) ---------- */
.role-switch {
  display: flex; flex-wrap: wrap; gap: .3rem; background: #ffffffb8; border: 1px solid #dfe8f8;
  padding: .3rem; border-radius: 12px;
}
.rs-btn {
  border: 0; background: transparent; font: inherit; font-size: .8rem; font-weight: 650;
  color: var(--text-soft); padding: .42rem .8rem; border-radius: 9px; cursor: pointer;
}
.rs-btn:hover { background: #eef3fc; color: var(--text); }
.rs-btn.active { background: var(--brand); color: #fff; box-shadow: 0 2px 8px rgba(26, 86, 219, .35); }
.rs-note { flex-basis: 100%; font-size: .74rem; color: var(--muted); }

/* ---------- Stat cards ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 1rem; margin-bottom: 1.2rem; }
.stat-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: 1.05rem 1.15rem; box-shadow: 0 1px 2px rgba(16,28,54,.05), 0 8px 22px rgba(16,28,54,.05);
  display: flex; gap: .9rem; align-items: flex-start;
}
.ic-chip {
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  font-size: 1.15rem; flex: 0 0 auto;
}
.ic-chip.blue   { background: #e8effc; color: #1a56db; }
.ic-chip.green  { background: #e5f6ee; color: #047857; }
.ic-chip.orange { background: #fdf1e2; color: #b45309; }
.ic-chip.purple { background: #f1ebfd; color: #6d28d9; }
.ic-chip.red    { background: #fdecec; color: #b91c1c; }
.ic-chip.teal   { background: #e2f5f5; color: #0f766e; }
.stat-card .s-label { font-size: .78rem; font-weight: 650; color: var(--text-soft); }
.stat-card .s-value { font-size: 1.62rem; font-weight: 750; letter-spacing: -.4px; margin-top: .05rem; }
.stat-card .s-foot { display: flex; align-items: center; gap: .45rem; margin-top: .25rem; font-size: .74rem; color: var(--muted); flex-wrap: wrap; }
.delta { font-size: .72rem; font-weight: 700; border-radius: 999px; padding: .08rem .5rem; }
.delta.up   { background: var(--ok-bg); color: var(--ok); }
.delta.down { background: var(--err-bg); color: var(--err); }
.delta.flat { background: var(--neutral-bg); color: var(--neutral); }

/* ---------- Friendly cards ---------- */
.dash .card { border-radius: 14px; }
.dash .card-head { border-block-end: 0; padding-block-end: .2rem; }
.dash .card-title { font-size: 1rem; }
.dash .card-sub { font-size: .78rem; color: var(--muted); font-weight: 400; display: block; margin-top: .1rem; }
.view-all { margin-inline-start: auto; font-size: .8rem; font-weight: 650; white-space: nowrap; }

/* ---------- Donut ---------- */
.donut-wrap { display: flex; gap: 1.4rem; align-items: center; flex-wrap: wrap; }
.donut { width: 150px; height: 150px; border-radius: 50%; position: relative; flex: 0 0 auto; }
.donut::after { content: ""; position: absolute; inset: 22px; background: var(--surface); border-radius: 50%; }
.donut .d-center { position: absolute; inset: 0; display: grid; place-items: center; z-index: 1; text-align: center; }
.donut .d-num { font-size: 1.35rem; font-weight: 750; letter-spacing: -.4px; }
.donut .d-cap { font-size: .68rem; color: var(--muted); margin-top: -.2rem; }
.legend { display: grid; gap: .45rem; min-width: 170px; flex: 1; }
.legend .lg-row { display: flex; align-items: center; gap: .55rem; font-size: .84rem; }
.legend .lg-dot { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }
.legend .lg-val { margin-inline-start: auto; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- Goals ---------- */
.goal-row { margin-bottom: .85rem; }
.goal-row .g-top { display: flex; align-items: baseline; gap: .6rem; font-size: .85rem; margin-bottom: .3rem; }
.goal-row .g-name { font-weight: 650; }
.goal-row .g-val { margin-inline-start: auto; font-size: .78rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.goal-row .g-pct { font-weight: 750; font-size: .8rem; }

/* ---------- Activity feed ---------- */
.feed { list-style: none; margin: 0; padding: 0; }
.feed li { display: flex; gap: .8rem; padding: .55rem 0; border-block-end: 1px solid #f0f3f9; }
.feed li:last-child { border-block-end: 0; }
.feed .f-ic {
  width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  font-size: .95rem; flex: 0 0 auto;
}
.feed .f-title { font-size: .85rem; font-weight: 650; }
.feed .f-sub { font-size: .78rem; color: var(--text-soft); }
.feed .ago { margin-inline-start: auto; font-size: .72rem; color: var(--muted); white-space: nowrap; padding-top: .15rem; }

/* ---------- Quick actions ---------- */
.qa-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .7rem; }
.qa-btn {
  display: flex; flex-direction: column; align-items: flex-start; gap: .5rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: .85rem .95rem; font: inherit; text-align: start; cursor: pointer; color: var(--text);
  text-decoration: none; transition: transform .12s ease, box-shadow .12s ease;
}
.qa-btn:hover { text-decoration: none; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(16,28,54,.10); border-color: #c9d9f7; }
.qa-btn .q-label { font-size: .84rem; font-weight: 650; }
.qa-btn .q-sub { font-size: .72rem; color: var(--muted); }

/* ---------- Simple list (tasks / approvals) ---------- */
.simple-list { list-style: none; margin: 0; padding: 0; }
.simple-list li { display: flex; align-items: center; gap: .7rem; padding: .55rem 0; border-block-end: 1px solid #f0f3f9; font-size: .86rem; }
.simple-list li:last-child { border-block-end: 0; }
.simple-list .sl-main { min-width: 0; }
.simple-list .sl-title { font-weight: 650; }
.simple-list .sl-sub { font-size: .76rem; color: var(--text-soft); }
.simple-list .end { margin-inline-start: auto; display: flex; align-items: center; gap: .5rem; flex: 0 0 auto; }

/* ---------- Role view visibility ---------- */
[data-role-view] { display: none; }
[data-role-view].active { display: block; }

/* ---------- Responsive ---------- */
@media (max-width: 760px) {
  .dash-hero { padding: 1.1rem; }
  .dash-hero .hi { font-size: 1.2rem; }
}