/* ───────────────────────────────────────────────────────────────
   Supplement to app.css.

   app.css is the original stylesheet, copied across unchanged so the
   visual design is identical. This file only adds what React used to
   express as inline style objects, plus the chart wrappers that took
   the place of recharts' ResponsiveContainer.
   ─────────────────────────────────────────────────────────────── */

/* ─── Sidebar footer ─────────────────────────────── */
.sidebar-user {
  margin-bottom: 12px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
}
.sidebar-user-label {
  font-size: 11px;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.sidebar-user-name { font-size: 13px; font-weight: 600; color: #f8fafc; margin-top: 2px; }
.sidebar-user-role { font-size: 11px; color: #38bdf8; margin-top: 2px; }

.sidebar-signout {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  color: #ef4444;
  font-size: 13px;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  padding: 8px 4px;
  text-align: left;
}
.sidebar-signout:hover { color: #f87171; }

/* ─── Charts (replaces recharts ResponsiveContainer) ─ */
.chart-wrap { position: relative; width: 100%; }
.chart-wrap canvas { max-width: 100%; }
.chart-280 { height: 280px; }
.chart-300 { height: 300px; }
.chart-350 { height: 350px; }
.chart-400 { height: 400px; }
.chart-140 { height: 140px; }

.chart-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--text-secondary);
  font-size: 13px;
}

/* ─── Flash messages ─────────────────────────────── */
.flash {
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid transparent;
}
.flash-success { background: var(--success-bg); color: var(--success); border-color: #bbf7d0; }
.flash-error   { background: var(--danger-bg);  color: var(--danger);  border-color: #fca5a5; }

/* ─── Links that behave like table rows ──────────── */
.row-link { color: inherit; text-decoration: none; display: contents; }
tr.clickable { cursor: pointer; }
tr.clickable:hover { background: #f8f9fc; }

.link-plain { color: inherit; text-decoration: none; }
.link-accent { color: var(--accent-primary); font-weight: 600; text-decoration: none; }
.link-accent:hover { text-decoration: underline; }

/* ─── Leaderboard rows ───────────────────────────── */
.lb-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  border-bottom: 1px solid #f3f4f6;
  text-decoration: none;
  color: inherit;
}
.lb-row:last-child { border-bottom: none; }
.lb-row:hover { background: #f8f9fc; }
.lb-rank { width: 28px; text-align: center; font-weight: 700; flex-shrink: 0; color: var(--text-muted); }
.lb-rank.top { font-size: 18px; }
.lb-body { flex: 1; min-width: 0; }
.lb-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lb-meta { font-size: 11px; color: var(--text-secondary); }
.lb-side { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

.scroll-340 { max-height: 340px; overflow-y: auto; }
.scroll-350 { max-height: 350px; overflow-y: auto; }
.scroll-300 { max-height: 300px; overflow-y: auto; }

/* ─── Excellence board ───────────────────────────── */
.excellence-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--border);
}
.excellence-cell { background: #fff; padding: 14px 16px; text-decoration: none; display: block; }
.excellence-cell:hover { background: #f8f9fc; }
.excellence-metric {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}
.excellence-name { font-size: 13px; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; }
.mini-track { flex: 1; height: 4px; background: #e5e7eb; border-radius: 99px; overflow: hidden; }
.mini-fill { height: 100%; border-radius: 99px; }

@media (max-width: 1100px) {
  .excellence-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ─── Delivery pattern legend pills ──────────────── */
.pill {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 99px;
  border: 1px solid transparent;
}
.pill-early    { color: var(--success);        background: #f0fdf4; border-color: #bbf7d0; }
.pill-ontime   { color: #2563eb;               background: #eff6ff; border-color: #bfdbfe; }
.pill-extended { color: var(--danger);         background: #fef2f2; border-color: #fca5a5; }

/* ─── Project page ───────────────────────────────── */
.project-split { display: flex; gap: 24px; align-items: flex-start; }
.project-list { flex: 1 1 65%; min-width: 0; }
.project-aside { flex: 0 0 350px; position: sticky; top: 24px; }
.project-card.selected { border: 2px solid #3b82f6; box-shadow: 0 10px 15px -3px rgba(59, 130, 246, 0.1); }

@media (max-width: 1200px) {
  .project-split { flex-direction: column; }
  .project-aside { flex: 1 1 auto; position: static; width: 100%; }
}

.complexity-cell { border-radius: 6px; padding: 8px 10px; text-align: center; }
.complexity-value { font-weight: 700; font-size: 16px; }
.complexity-label { color: var(--text-secondary); font-size: 11px; margin-top: 2px; }

/* ─── Stacked complexity bar (replaces the mini chart) ─ */
.stack-bar { display: flex; height: 22px; border-radius: 6px; overflow: hidden; background: #f1f5f9; }
.stack-seg { display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: #fff; }

/* ─── Award cards ────────────────────────────────── */
.award-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; padding-bottom: 40px; }
.award-empty { padding: 30px; text-align: center; opacity: 0.7; border: 2px dashed #e5e7eb; }
.award-head { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.award-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.award-winner {
  background: #f8fafc;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.award-split { display: flex; gap: 8px; margin-bottom: 24px; }
.award-metric { flex: 1; padding: 8px 12px; border-radius: 8px; }

/* ─── Appraisal + executive panels ───────────────── */
.callout { padding: 16px; border-radius: 8px; border-left: 4px solid transparent; }
.callout-title { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.callout-body { font-size: 13px; line-height: 1.5; }
.callout-green  { background: #f0fdf4; border-left-color: #16a34a; }
.callout-green  .callout-title { color: #166534; } .callout-green  .callout-body { color: #14532d; }
.callout-pink   { background: #fce7f3; border-left-color: #db2777; }
.callout-pink   .callout-title { color: #9d174d; } .callout-pink   .callout-body { color: #831843; }
.callout-red    { background: #fef2f2; border-left-color: #dc2626; }
.callout-red    .callout-title { color: #991b1b; } .callout-red    .callout-body { color: #7f1d1d; }
.callout-amber  { background: #fffbeb; border-left-color: #d97706; }
.callout-amber  .callout-title { color: #92400e; } .callout-amber  .callout-body { color: #78350f; }
.callout-blue   { background: #eff6ff; border-left-color: #2563eb; }
.callout-blue   .callout-title { color: #1e40af; } .callout-blue   .callout-body { color: #1e3a8a; }

.memo {
  padding: 20px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.6;
  color: #334155;
  white-space: pre-line;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
  font-family: 'Inter', sans-serif;
}

.tier-badge { display: inline-block; padding: 4px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; }
.tier-1 { background: #dcfce7; color: #166534; }
.tier-2 { background: #dbeafe; color: #1e40af; }
.tier-3 { background: #f3f4f6; color: #4b5563; }
.tier-4 { background: #fee2e2; color: #991b1b; }

tr.row-pip     { background: #fef2f2; }
tr.row-penalty { background: #fffbeb; }
tr.row-extreme { background: #fef2f2; }

.stat-tile { padding: 20px; border-top: 4px solid transparent; }
.stat-tile-label { font-size: 12px; text-transform: uppercase; color: var(--text-secondary); font-weight: 600; margin-bottom: 8px; }
.stat-tile-value { font-size: 32px; font-weight: 800; display: flex; align-items: center; gap: 8px; }

/* ─── Delegation cards ───────────────────────────── */
.delegation-grid { padding: 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
.delegation-card { padding: 16px; border: 1px solid #f3f4f6; border-radius: 12px; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02); }
.delegation-note { font-size: 12px; padding: 8px 12px; border-radius: 6px; }

/* ─── Burnout rows ───────────────────────────────── */
.burnout-row { display: flex; align-items: center; gap: 12px; padding: 15px 20px; border-bottom: 1px solid #f3f4f6; }
.burnout-icon { width: 36px; height: 36px; border-radius: 18px; background: #fee2e2; color: #dc2626; display: flex; align-items: center; justify-content: center; }

/* ─── Profile page ───────────────────────────────── */
.profile-header { display: flex; align-items: center; gap: 12px; }
.profile-avatar {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--accent-light);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.profile-split { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.profile-split > div:first-child { border-right: 1px solid var(--border); }
@media (max-width: 900px) {
  .profile-split { grid-template-columns: 1fr; }
  .profile-split > div:first-child { border-right: none; border-bottom: 1px solid var(--border); }
}
.month-chip {
  background: var(--bg-page);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 16px;
  text-align: center;
  min-width: 80px;
}
.metric-row { display: flex; align-items: center; justify-content: space-between; padding: 4px 0; border-bottom: 1px solid #f3f4f6; }
.metric-row:last-child { border-bottom: none; }

.project-chip { background: var(--bg-page); border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; }

/* ─── Search dropdown ────────────────────────────── */
.search-drop {
  position: absolute;
  top: calc(100% + 6px);
  left: 0; right: 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  z-index: 300;
  overflow: hidden;
  max-height: 320px;
  overflow-y: auto;
}
.search-drop a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid #f3f4f6;
  text-decoration: none;
  color: inherit;
}
.search-drop a:last-child { border-bottom: none; }
.search-drop a:hover { background: #f8f9fc; }
.search-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--accent-light);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}

/* ─── Modal-as-page back link ────────────────────── */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-primary);
  text-decoration: none;
  margin-bottom: 16px;
}
.back-link:hover { text-decoration: underline; }

/* ─── Misc ───────────────────────────────────────── */
.grid-1 { grid-template-columns: 1fr; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 16px; }
.gap-1 { gap: 4px; }
.text-secondary { color: var(--text-secondary); }
.text-muted { color: var(--text-muted); }
.text-right { text-align: right; }
.text-center { text-align: center; }
.w-100 { width: 100%; }
.empty-state { padding: 40px; text-align: center; color: var(--text-muted); font-size: 13px; }

form.inline { display: inline; }

/* ─── Evalyze logo ───────────────────────────────────
   The brand file is used exactly as drawn, so there is nothing here but size.
   The artwork is 388.8 x 113.1 (about 3.44:1), so the widths below give ~52px
   and ~70px of height respectively.
   ─────────────────────────────────────────────────── */
.evalyze-logo {
  display: block;
  width: 100%;
  height: auto;
}

.sidebar-logo .evalyze-logo { max-width: 180px; }
.login-logo   .evalyze-logo { max-width: 240px; margin: 0 auto 4px; }

/* The sidebar logo doubles as a link home, so it must not pick up the default
   anchor colour or underline. */
.sidebar-logo {
  display: block;
  text-decoration: none;
  color: inherit;
}
.sidebar-logo:hover { opacity: 0.85; }