/* ============================================================
   FICOFI Performance Management — Global Styles
   ============================================================ */

/* ── Scorecard Redesign Design Tokens ─────────────────────── */
:root {
  --sc-ink:        #0f1117;
  --sc-ink-2:      #3a3f4d;
  --sc-ink-3:      #6b7280;
  --sc-ink-4:      #9ca3af;
  --sc-surface:    #ffffff;
  --sc-surface-2:  #f7f8fb;
  --sc-surface-3:  #eef0f6;
  --sc-border:     #e4e7ef;
  --sc-primary:    #1a56db;
  --sc-primary-bg: #eff4ff;
  --sc-primary-2:  #1e40af;
  --sc-success:    #059669;
  --sc-success-bg: #ecfdf5;
  --sc-warning:    #d97706;
  --sc-warning-bg: #fffbeb;
  --sc-danger:     #dc2626;
  --sc-danger-bg:  #fef2f2;
  --sc-purple:     #7c3aed;
  --sc-purple-bg:  #f5f3ff;
  --sc-radius-sm:  6px;
  --sc-radius:     10px;
  --sc-radius-lg:  14px;
  --sc-shadow-sm:  0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.04);
  --sc-shadow:     0 4px 16px rgba(0,0,0,.08), 0 1px 4px rgba(0,0,0,.05);
}

/* ── Scorecard shell ──────────────────────────────────────── */
.sc-shell { display: flex; flex-direction: column; gap: 16px; }

/* ── Hero header ─────────────────────────────────────────── */
.sc-hero {
  background: linear-gradient(135deg, #1a3a6e 0%, #2d4a9b 45%, #4a1d96 100%);
  border-radius: var(--sc-radius-lg);
  padding: 28px 28px 0;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.sc-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E");
  pointer-events: none; opacity: .5;
}
.sc-hero::after {
  content: '';
  position: absolute; top: -60px; right: -60px;
  width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(139,92,246,.3) 0%, transparent 70%);
  pointer-events: none;
}
.sc-hero-top {
  display: flex; justify-content: space-between;
  align-items: flex-start; gap: 20px; position: relative;
}
.sc-hero-name  { font-size: 22px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 4px; }
.sc-hero-sub   { font-size: 14px; opacity: .75; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sc-hero-dot   { width: 3px; height: 3px; border-radius: 50%; background: rgba(255,255,255,.5); display: inline-block; }
.sc-hero-badges { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.sc-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; letter-spacing: .02em; }
.sc-badge-draft    { background: rgba(255,255,255,.18); color:#fff; border:1px solid rgba(255,255,255,.3); }
.sc-badge-hidden   { background: rgba(245,158,11,.2); color:#fde68a; border:1px solid rgba(245,158,11,.3); }
.sc-badge-visible  { background: rgba(16,185,129,.2); color:#6ee7b7; border:1px solid rgba(16,185,129,.3); }
.sc-badge-set      { background: rgba(99,102,241,.3); color:#c7d2fe; border:1px solid rgba(99,102,241,.4); }
.sc-badge-mid      { background: rgba(251,191,36,.3); color:#fef08a; border:1px solid rgba(251,191,36,.4); }
.sc-badge-final    { background: rgba(16,185,129,.3); color:#6ee7b7; border:1px solid rgba(16,185,129,.4); }
.sc-hero-actions   { display:flex; flex-direction:column; align-items:flex-end; gap:10px; flex-shrink:0; }
.sc-hero-manager   { font-size:12px; opacity:.7; }
.sc-hero-manager strong { opacity:1; font-weight:500; }
.sc-hero-btns      { display:flex; gap:8px; }

/* Hero action buttons */
.sc-btn { display:inline-flex; align-items:center; gap:6px; padding:7px 16px; border-radius:var(--sc-radius-sm); font-size:13px; font-weight:600; cursor:pointer; border:none; transition:background-color .15s; }
.sc-btn-release { background:#10b981; color:#fff; box-shadow:0 2px 8px rgba(16,185,129,.35); }
.sc-btn-release:hover { background:#059669; }
.sc-btn-release:disabled { background:#9ca3af; box-shadow:none; cursor:not-allowed; }
.sc-btn-hide    { background:#f59e0b; color:#fff; }
.sc-btn-hide:hover { background:#d97706; }
.sc-btn-pdf     { background:rgba(255,255,255,.95); color:var(--sc-primary-2); }
.sc-btn-pdf:hover { background:#fff; }

/* Score ribbon */
.sc-ribbon {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 1px; margin-top: 24px;
  background: rgba(255,255,255,.12);
  border-radius: var(--sc-radius-sm) var(--sc-radius-sm) 0 0;
  overflow: hidden;
}
.sc-ribbon-cell { padding: 12px 14px; background: rgba(255,255,255,.07); transition: background .12s; text-align:center; }
.sc-ribbon-cell:hover { background: rgba(255,255,255,.12); }
.sc-ribbon-label { font-size: 13.5px; font-weight:500; opacity:.65; letter-spacing:.03em; text-transform:uppercase; margin-bottom:4px; text-align:center; }
.sc-ribbon-value { font-size:18px; font-weight:700; text-align:center; }
.sc-ribbon-value.sc-rv-pending { font-size:15px; font-weight:400; opacity:.55; text-align:center; }
.sc-ribbon-value.sc-rv-done    { color:#6ee7b7; }
.sc-ribbon-value.sc-rv-score   { font-family: monospace; }
.sc-ribbon-value.sc-rv-warn    { color:#fca5a5; }

/* ── Scorecard cards ─────────────────────────────────────── */
.sc-card { background:var(--sc-surface); border-radius:var(--sc-radius-lg); border:1px solid var(--sc-border); box-shadow:var(--sc-shadow-sm); overflow:hidden; }
.sc-card-hd { display:flex; justify-content:space-between; align-items:center; padding:16px 20px; border-bottom:1px solid var(--sc-border); background:var(--sc-surface-2); }
.sc-card-title { font-size:14px; font-weight:700; color:var(--sc-ink); display:flex; align-items:center; gap:8px; }
.sc-card-title i { color:var(--sc-ink-3); font-size:13px; }
.sc-card-body { padding:18px 20px; }

/* ── Part weights ────────────────────────────────────────── */
.sc-pw-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; }
.sc-pw-cell { border:1px solid var(--sc-border); border-radius:var(--sc-radius); padding:14px 10px 10px; text-align:center; position:relative; transition:border-color .15s,box-shadow .15s; }
.sc-pw-cell.sc-pw-active { border-color:var(--sc-primary); background:var(--sc-primary-bg); }
.sc-pw-cell.sc-pw-zero   { opacity:.45; }
.sc-pw-cell::before { content:''; position:absolute; top:0; left:10%; right:10%; height:3px; border-radius:0 0 3px 3px; background:var(--sc-pw-color,var(--sc-primary)); opacity:0; transition:opacity .15s; }
.sc-pw-cell.sc-pw-active::before { opacity:1; }
.sc-pw-name { font-size:11px; color:var(--sc-ink-3); font-weight:500; line-height:1.3; margin-bottom:6px; }
.sc-pw-pct  { font-size:24px; font-weight:700; font-family:monospace; color:var(--sc-primary); line-height:1; margin-bottom:4px; }
.sc-pw-pct.sc-pw-zero-pct { color:var(--sc-ink-4); }
.sc-pw-objs { font-size:11px; color:var(--sc-ink-3); }
.sc-pw-bar  { height:3px; border-radius:2px; background:var(--sc-border); margin-top:8px; overflow:hidden; }
.sc-pw-bar-fill { height:100%; border-radius:2px; background:var(--sc-pw-color,var(--sc-primary)); width:0; transition:width .6s cubic-bezier(.4,0,.2,1); }
.sc-total-pill { display:inline-flex; align-items:center; gap:5px; background:var(--sc-success-bg); color:var(--sc-success); padding:4px 12px; border-radius:20px; font-size:12px; font-weight:600; border:1px solid #a7f3d0; }
.sc-total-pill.sc-warn { background:var(--sc-warning-bg); color:var(--sc-warning); border-color:#fcd34d; }
.sc-total-pill.sc-over { background:var(--sc-danger-bg); color:var(--sc-danger); border-color:#fca5a5; }

/* ── Part sections ───────────────────────────────────────── */
.sc-part { background:var(--sc-surface); border-radius:var(--sc-radius-lg); border:1px solid var(--sc-border); box-shadow:var(--sc-shadow-sm); overflow:hidden; }
.sc-part-hd { display:flex; justify-content:space-between; align-items:center; padding:14px 20px; background:var(--sc-surface-2); border-bottom:1px solid var(--sc-border); }
.sc-part-title-row { display:flex; align-items:center; gap:10px; }
.sc-part-num { width:28px; height:28px; border-radius:8px; background:var(--sc-primary-bg); color:var(--sc-primary); font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center; font-family:monospace; flex-shrink:0; }
.sc-part-name { font-size:21px; font-weight:700; color:var(--sc-ink); }
.sc-part-wbadge { font-size:11px; font-weight:600; color:var(--sc-primary); background:var(--sc-primary-bg); padding:2px 8px; border-radius:20px; font-family:monospace; }
.sc-add-obj-btn { display:inline-flex; align-items:center; gap:5px; color:var(--sc-success); font-size:12px; font-weight:600; background:var(--sc-success-bg); border:1px solid #a7f3d0; padding:5px 12px; border-radius:var(--sc-radius-sm); cursor:pointer; transition:background .15s; }
.sc-add-obj-btn:hover { background:#d1fae5; }

/* ── Objective cards ─────────────────────────────────────── */
.sc-obj-list { display:flex; flex-direction:column; }
.sc-obj-card { border-bottom:1px solid var(--sc-border); transition:background .1s; }
.sc-obj-card:last-child { border-bottom:none; }
.sc-obj-card:hover { background:var(--sc-surface-2); }
.sc-obj-card.sc-obj-cancelled { background:#fff7f7; }
.sc-obj-card.sc-obj-pending   { background:#fffbeb; }
.sc-obj-main { padding:16px 20px 0; display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.sc-obj-left { flex:1; min-width:0; }
.sc-obj-status-bar { display:flex; align-items:center; gap:6px; font-size:11px; font-weight:600; margin-bottom:4px; }
.sc-obj-status-bar.sc-locked   { color:var(--sc-ink-4); }
.sc-obj-status-bar.sc-new      { color:var(--sc-success); }
.sc-obj-status-bar.sc-pending  { color:var(--sc-warning); }
.sc-obj-status-bar.sc-cancelled { color:var(--sc-danger); }
.sc-obj-title { font-size:18px; font-weight:700; color:var(--sc-ink); margin-bottom:4px; }
.sc-obj-title.sc-strikethrough { text-decoration:line-through; color:var(--sc-ink-3); }
.sc-obj-desc { font-size:16px; color:var(--sc-ink-3); line-height:1.6; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.sc-obj-desc.sc-expanded { -webkit-line-clamp:unset; overflow:visible; }
.sc-expand-btn { background:none; border:none; color:var(--sc-primary); font-size:12.5px; font-weight:600; cursor:pointer; padding:2px 0 0; display:inline-flex; align-items:center; gap:3px; }
.sc-obj-kpi { font-size:15px; color:var(--sc-primary); margin-top:6px; display:flex; align-items:center; gap:5px; }
.sc-obj-right { display:flex; flex-direction:column; align-items:flex-end; gap:7px; flex-shrink:0; }
.sc-obj-wpill { font-size:13px; font-weight:700; color:var(--sc-primary-2); background:var(--sc-primary-bg); padding:3px 10px; border-radius:20px; font-family:monospace; border:1px solid #c7d2fe; white-space:nowrap; }
.sc-obj-wpill.sc-wpill-cancelled { color:var(--sc-danger); background:var(--sc-danger-bg); border-color:#fca5a5; }
.sc-obj-wpill.sc-wpill-pending   { color:var(--sc-warning); background:var(--sc-warning-bg); border-color:#fcd34d; }
.sc-obj-actions { display:flex; gap:4px; }
.sc-obj-act-btn { width:28px; height:28px; border-radius:var(--sc-radius-sm); border:1px solid var(--sc-border); background:var(--sc-surface); color:var(--sc-ink-3); cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:11px; transition:all .12s; }
.sc-obj-act-btn:hover { color:var(--sc-primary); border-color:var(--sc-primary); background:var(--sc-primary-bg); }
.sc-obj-act-btn.sc-danger:hover { color:var(--sc-danger); border-color:var(--sc-danger); background:var(--sc-danger-bg); }

/* ── Assessment panels ───────────────────────────────────── */
.sc-panels { display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:12px 20px 16px; }
.sc-panel { border:1px solid var(--sc-border); border-radius:var(--sc-radius); padding:12px 14px; background:var(--sc-surface); }
.sc-panel.sc-p-mid   { border-top:3px solid #f59e0b; }
.sc-panel.sc-p-final { border-top:3px solid #6366f1; }
.sc-panel-title { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--sc-ink-3); margin-bottom:8px; display:flex; align-items:center; gap:5px; }
.sc-comment-block { margin-bottom:6px; }
.sc-comment-who  { font-size:11px; font-weight:700; color:var(--sc-ink-4); text-transform:uppercase; letter-spacing:.04em; margin-bottom:2px; }
.sc-comment-text { font-size:16px; color:var(--sc-ink-2); }
.sc-comment-text.sc-empty { color:var(--sc-ink-4); font-style:italic; font-size:15px; }
.sc-score-row { display:flex; align-items:center; gap:8px; padding-top:8px; border-top:1px solid var(--sc-border); margin-top:6px; }
.sc-score-pair { display:flex; align-items:center; gap:5px; }
.sc-score-label { font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; font-weight:600; color:var(--sc-ink-4); }
.sc-score-val   { font-size:16px; font-weight:700; font-family:monospace; color:var(--sc-ink-2); }
.sc-score-val.sc-sv-filled { color:var(--sc-primary); }
.sc-score-val.sc-sv-high   { color:#059669; }
.sc-score-val.sc-sv-mid    { color:#2563eb; }
.sc-score-val.sc-sv-low    { color:#d97706; }
.sc-score-val.sc-sv-poor   { color:#dc2626; }
.sc-score-val.sc-sv-exc    { color:#7c3aed; font-weight:800; }
.sc-score-div  { width:1px; height:18px; background:var(--sc-border); }
.sc-panel-btns { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.sc-panel-btn  { display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:600; padding:4px 10px; border-radius:var(--sc-radius-sm); cursor:pointer; border:none; transition:background .12s; }
.sc-panel-btn.sc-pb-emp { background:#eff6ff; color:#2563eb; }
.sc-panel-btn.sc-pb-emp:hover { background:#dbeafe; }
.sc-panel-btn.sc-pb-mgr { background:#f0fdf4; color:#059669; }
.sc-panel-btn.sc-pb-mgr:hover { background:#dcfce7; }
.sc-obj-no-assess { padding:10px 20px 14px; font-size:12.5px; color:var(--sc-ink-4); font-style:italic; display:flex; align-items:center; gap:6px; }

/* ── Section cards (values, french, comments) ────────────── */
.sc-section { background:var(--sc-surface); border-radius:var(--sc-radius-lg); border:1px solid var(--sc-border); box-shadow:var(--sc-shadow-sm); overflow:hidden; }
.sc-section.sc-s-purple { border-top:3px solid var(--sc-purple); }
.sc-section.sc-s-blue   { border-top:3px solid var(--sc-primary); }
.sc-section.sc-s-amber  { border-top:3px solid #f59e0b; }
.sc-section-inner { padding:18px 20px; }
.sc-section-hd-row { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:14px; }
.sc-section-title  { font-size:14px; font-weight:700; display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin-bottom:2px; }
.sc-section-sub    { font-size:12px; color:var(--sc-ink-3); }
.sc-edit-btn { display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600; padding:5px 12px; border-radius:var(--sc-radius-sm); border:1px solid var(--sc-border); background:var(--sc-surface); color:var(--sc-ink-2); cursor:pointer; transition:all .15s; white-space:nowrap; }
.sc-edit-btn:hover { border-color:var(--sc-primary); color:var(--sc-primary); background:var(--sc-primary-bg); }
.sc-comment-area { background:var(--sc-surface-2); border:1px solid var(--sc-border); border-radius:var(--sc-radius); padding:12px 14px; font-size:15px; color:var(--sc-ink-2); }
.sc-comment-area.sc-ca-filled { background:#f0fdf4; border-color:#a7f3d0; }
.sc-comment-area.sc-ca-empty  { color:var(--sc-ink-4); font-style:italic; font-size:15px; }
.sc-org-grid  { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.sc-org-item  { background:var(--sc-surface-2); border:1px solid var(--sc-border); border-radius:var(--sc-radius); padding:12px 14px; }
.sc-org-item.sc-org-filled { background:#f0fdf4; border-color:#a7f3d0; }
.sc-org-item-title { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--sc-ink-3); margin-bottom:6px; }
.sc-phase-info { margin-top:12px; padding:10px 14px; background:var(--sc-warning-bg); border:1px solid #fcd34d; border-radius:var(--sc-radius-sm); font-size:12px; color:var(--sc-warning); display:flex; align-items:center; gap:6px; }
.sc-tag-french { display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:20px; font-size:10.5px; font-weight:600; background:#eff6ff; color:#1d4ed8; border:1px solid #bfdbfe; }

/* ── Comments grid ───────────────────────────────────────── */
.sc-comments-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.sc-comment-card { border:1px solid var(--sc-border); border-radius:var(--sc-radius); padding:14px 16px; }
.sc-comment-card.sc-cc-emp { border-top:3px solid #3b82f6; }
.sc-comment-card.sc-cc-mgr { border-top:3px solid #10b981; }
.sc-comment-card-hd { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.sc-comment-card-title { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; }
.sc-comment-card-title.sc-emp { color:#2563eb; }
.sc-comment-card-title.sc-mgr { color:#059669; }
.sc-comment-card-text { font-size:12.5px; color:var(--sc-ink-2); white-space:pre-wrap; }
.sc-comment-card-text.sc-empty { color:var(--sc-ink-4); font-style:italic; font-size:12px; }

/* ── Signatures ──────────────────────────────────────────── */
.sc-sig-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.sc-sig-phase { border:1px solid var(--sc-border); border-radius:var(--sc-radius); padding:14px 16px; }
.sc-sig-phase-title { font-size:12px; font-weight:700; color:var(--sc-ink); margin-bottom:10px; display:flex; align-items:center; gap:6px; }
.sc-sig-row { display:flex; justify-content:space-between; align-items:center; padding:5px 0; border-bottom:1px solid var(--sc-border); }
.sc-sig-row:last-of-type { border-bottom:none; }
.sc-sig-who  { font-size:12.5px; color:var(--sc-ink-2); }
.sc-sig-status { font-size:11.5px; font-weight:600; display:flex; align-items:center; gap:4px; }
.sc-sig-status.sc-signed  { color:var(--sc-success); }
.sc-sig-status.sc-pending { color:var(--sc-ink-4); }
.sc-sig-action { margin-top:10px; }
.sc-sign-btn { width:100%; padding:7px 12px; background:var(--sc-success); color:#fff; border:none; border-radius:var(--sc-radius-sm); font-size:12.5px; font-weight:600; cursor:pointer; transition:background .15s; display:flex; align-items:center; justify-content:center; gap:5px; }
.sc-sign-btn:hover { background:#047857; }
.sc-sign-waiting { width:100%; padding:7px 12px; background:#fffbeb; color:#d97706; border:1px solid #fcd34d; border-radius:var(--sc-radius-sm); font-size:12px; text-align:center; }
.sc-sign-blocked { width:100%; padding:7px 12px; background:var(--sc-danger-bg); color:var(--sc-danger); border:1px solid #fca5a5; border-radius:var(--sc-radius-sm); font-size:12px; text-align:center; }

/* ── Warn banner ─────────────────────────────────────────── */
.sc-warn-banner { background:var(--sc-danger-bg); border:1px solid #fca5a5; border-radius:var(--sc-radius); padding:10px 14px; font-size:13px; color:var(--sc-danger); display:flex; align-items:center; gap:8px; margin-bottom:12px; }

/* ── Empty state ─────────────────────────────────────────── */
.sc-empty { padding:20px; text-align:center; color:var(--sc-ink-4); font-size:13px; font-style:italic; }

/* ── Back button ─────────────────────────────────────────── */
.sc-back-btn { display:inline-flex; align-items:center; gap:6px; color:var(--sc-ink-3); background:none; border:none; cursor:pointer; font-size:13px; font-weight:500; padding:0; transition:color .15s; margin-bottom:4px; }
.sc-back-btn:hover { color:var(--sc-primary); }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width:720px) {
  .sc-pw-grid { grid-template-columns:repeat(3,1fr); }
  .sc-panels  { grid-template-columns:1fr; }
  .sc-ribbon  { grid-template-columns:repeat(3,1fr); }
  .sc-comments-grid { grid-template-columns:1fr; }
  .sc-org-grid { grid-template-columns:1fr; }
  .sc-sig-grid { grid-template-columns:1fr; }
}

/* Base typography */
h1, h2, h3, h4, h5, h6 {
  font-family: Arial, Helvetica, sans-serif;
  text-wrap: balance; /* prevent widowed single words on headings */
}

/* Screen-reader-only utility (used for skip links and aria-live regions) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.focus\:not-sr-only:focus {
  position: fixed;
  width: auto;
  height: auto;
  padding: 0.5rem 1rem;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* ── Touch & interaction ─────────────────────────────────────
   Eliminates the 300 ms double-tap-zoom delay on iOS Safari
   across all interactive elements. */
a, button, [role="button"], input, select, textarea, label {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* ── Modal / drawer scroll containment ──────────────────────
   Prevents background page scroll when a modal is open. */
.modal-open {
  overflow: hidden;
}

/* ── Tabular numbers for financial / numeric columns ─────────
   Digits are the same width so columns don't shift as values change. */
.tabular-nums,
td.numeric,
.salary-cell,
.bonus-cell,
.score-cell {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ── Reduced motion ──────────────────────────────────────────
   Users who prefer reduced motion get instant transitions instead
   of the spinner and colour fades. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .fa-spin {
    animation: none !important;
  }
}

/* ── Focus rings ─────────────────────────────────────────────
   Ensure all interactive elements have a visible focus ring
   that doesn't show on mouse click (uses :focus-visible). */
:focus-visible {
  outline: 2px solid #2563eb; /* blue-600 */
  outline-offset: 2px;
}
/* Remove default browser outline; our :focus-visible rule above replaces it */
:focus:not(:focus-visible) {
  outline: none;
}

/* ── Modals ──────────────────────────────────────────────────
   Prevent inner scroll from propagating to the page. */
.modal-body {
  overscroll-behavior: contain;
}

/* ── Truncation helpers ──────────────────────────────────────
   Applied to flex children that need to truncate long text. */
.text-ellipsis-cell {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════
   SCORECARD REDESIGN — v4.7.4 additional class aliases
   The new renderScorecardDetail / renderObjectiveCard use these.
   ═══════════════════════════════════════════════════════════════ */

/* Shell & back link */
.sc-back-link {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--sc-ink-3); background: none; border: none;
  cursor: pointer; font-size: 13px; font-weight: 500; padding: 0;
  transition: color .15s; text-decoration: none; margin-bottom: 4px;
}
.sc-back-link:hover { color: var(--sc-primary); }

/* Card header / body aliases */
.sc-card-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 20px; border-bottom: 1px solid var(--sc-border);
  background: var(--sc-surface-2);
}
.sc-card-body { padding: 18px 20px; }

/* Score ribbon alias */
.sc-score-ribbon {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 1px; margin-top: 24px;
  background: rgba(255,255,255,.12);
  border-radius: var(--sc-radius-sm) var(--sc-radius-sm) 0 0;
  overflow: hidden;
}
/* ribbon value states */
.sc-ribbon-value { font-size: 18px; font-weight: 700; text-align:center; }
.sc-rv-pending   { font-size: 15px !important; font-weight: 400 !important; opacity: .55; text-align:center; }
.sc-rv-done      { color: #6ee7b7; }
.sc-rv-score     { font-family: monospace; }
.sc-rv-miss      { color: #fca5a5; }

/* Part section / header aliases */
.sc-part-section {
  background: var(--sc-surface); border-radius: var(--sc-radius-lg);
  border: 1px solid var(--sc-border); box-shadow: var(--sc-shadow-sm); overflow: hidden;
}
.sc-part-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 20px; background: var(--sc-surface-2); border-bottom: 1px solid var(--sc-border);
}
.sc-part-weight-badge {
  font-size: 11px; font-weight: 600; padding: 2px 8px;
  border-radius: 20px; font-family: monospace; border: 1px solid;
}

/* Part weight grid — CSS custom property column count */
.sc-pw-grid { display: grid; gap: 10px; }
.sc-pw-grid { grid-template-columns: repeat(var(--pw-cols, 5), 1fr); }

/* Part weight cell theming via CSS variables */
.sc-pw-cell.sc-pw-active {
  border-color: var(--pw-border, var(--sc-primary));
  background: var(--pw-bg, var(--sc-primary-bg));
}
.sc-pw-pct       { color: var(--pw-text, var(--sc-primary)); }
.sc-pw-bar-fill  { background: var(--pw-color, var(--sc-primary)); }
.sc-pw-cell::before { background: var(--pw-color, var(--sc-primary)); }

/* Add-objective button alias */
.sc-btn-add-obj {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--sc-success); font-size: 12px; font-weight: 600;
  background: var(--sc-success-bg); border: 1px solid #a7f3d0;
  padding: 5px 12px; border-radius: var(--sc-radius-sm);
  cursor: pointer; transition: background .15s;
}
.sc-btn-add-obj:hover { background: #d1fae5; }

/* Objective card status banners */
.sc-obj-status-banner {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600; padding: 6px 20px;
}
.sc-osb-cancelled { background: #fff7f7; color: var(--sc-danger); border-bottom: 1px solid #fecaca; }
.sc-osb-pending   { background: #fffbeb; color: var(--sc-warning); border-bottom: 1px solid #fde68a; }
.sc-osb-locked    { background: var(--sc-surface-2); color: var(--sc-ink-4); border-bottom: 1px solid var(--sc-border); }
.sc-osb-new       { background: #f0fdf4; color: var(--sc-success); border-bottom: 1px solid #a7f3d0; }

/* Objective card variants */
.sc-oc-cancelled { opacity: .85; }
.sc-oc-pending   { background: #fffef7; }

/* Objective title strike-through */
.sc-ot-cancelled { text-decoration: line-through; color: var(--sc-ink-3); }

/* Objective description clamp + expand */
.sc-obj-desc {
  font-size: 16px; color: var(--sc-ink-3); line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sc-obj-desc.sc-od-expanded { -webkit-line-clamp: unset; overflow: visible; }
.sc-obj-expand-btn {
  background: none; border: none; color: var(--sc-primary);
  font-size: 11px; font-weight: 600; cursor: pointer; padding: 2px 0 0;
  display: inline-flex; align-items: center; gap: 3px;
}

/* Objective weight pill aliases */
.sc-obj-weight {
  font-size: 13px; font-weight: 700; color: var(--sc-primary-2);
  background: var(--sc-primary-bg); padding: 3px 10px;
  border-radius: 20px; font-family: monospace; border: 1px solid #c7d2fe; white-space: nowrap;
}
.sc-obj-weight.cancelled { color: var(--sc-danger); background: var(--sc-danger-bg); border-color: #fca5a5; }
.sc-obj-weight.pending   { color: var(--sc-warning); background: var(--sc-warning-bg); border-color: #fcd34d; }

/* Objective action buttons */
.sc-obj-actions { display: flex; gap: 4px; }
.sc-obj-action-btn {
  width: 28px; height: 28px; border-radius: var(--sc-radius-sm);
  border: 1px solid var(--sc-border); background: var(--sc-surface);
  color: var(--sc-ink-3); cursor: pointer; display: flex;
  align-items: center; justify-content: center; font-size: 11px; transition: all .12s;
}
.sc-obj-action-btn:hover { color: var(--sc-primary); border-color: var(--sc-primary); background: var(--sc-primary-bg); }
.sc-obj-action-btn.sc-oab-danger:hover { color: var(--sc-danger); border-color: var(--sc-danger); background: var(--sc-danger-bg); }

/* No-assessment state */
.sc-obj-noassess {
  padding: 10px 20px 14px; font-size: 12.5px;
  color: var(--sc-ink-4); font-style: italic; display: flex; align-items: center; gap: 6px;
}

/* Assessment panels aliases */
.sc-obj-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px 20px 16px; }
.sc-panel { border: 1px solid var(--sc-border); border-radius: var(--sc-radius); padding: 12px 14px; background: var(--sc-surface); }
.sc-panel-mid   { border-top: 3px solid #f59e0b; }
.sc-panel-final { border-top: 3px solid #6366f1; }
.sc-panel-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--sc-ink-3); margin-bottom: 8px; display: flex; align-items: center; gap: 5px; }
.sc-panel-row   { display: flex; flex-direction: column; gap: 6px; }
.sc-panel-btns  { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.sc-panel-btn   { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: var(--sc-radius-sm); cursor: pointer; border: none; transition: background .12s; }
.sc-pb-emp { background: #eff6ff; color: #2563eb; }
.sc-pb-emp:hover { background: #dbeafe; }
.sc-pb-mgr { background: #f0fdf4; color: #059669; }
.sc-pb-mgr:hover { background: #dcfce7; }

/* Score row in final panel */
.sc-score-row   { display: flex; align-items: center; gap: 8px; padding-top: 8px; border-top: 1px solid var(--sc-border); margin-top: 6px; }
.sc-score-pair  { display: flex; align-items: center; gap: 5px; }
.sc-score-label { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; color: var(--sc-ink-4); }
.sc-score-value { font-size: 16px; font-weight: 700; font-family: monospace; color: var(--sc-ink-2); }
.sc-sv-filled   { color: var(--sc-primary) !important; }
.sc-score-divider { width: 1px; height: 18px; background: var(--sc-border); }

/* Comment blocks */
.sc-comment-block { margin-bottom: 6px; }
.sc-comment-who  { font-size: 10px; font-weight: 700; color: var(--sc-ink-4); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 2px; }
.sc-comment-text { font-size: 16px; color: var(--sc-ink-2); }
.sc-ct-empty     { color: var(--sc-ink-4) !important; font-style: italic; font-size: 15px !important; }

/* Section card aliases */
.sc-section-card {
  background: var(--sc-surface); border-radius: var(--sc-radius-lg);
  border: 1px solid var(--sc-border); box-shadow: var(--sc-shadow-sm); overflow: hidden;
}
.sc-accent-purple { border-top: 3px solid var(--sc-purple); }
.sc-accent-blue   { border-top: 3px solid var(--sc-primary); }
.sc-section-inner { padding: 18px 20px; }
.sc-section-header-row { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; }
.sc-section-title { font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 2px; }
.sc-section-sub   { font-size: 12px; color: var(--sc-ink-3); }
.sc-btn-edit-sm   { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: var(--sc-radius-sm); border: 1px solid var(--sc-border); background: var(--sc-surface); color: var(--sc-ink-2); cursor: pointer; transition: all .15s; white-space: nowrap; }
.sc-btn-edit-sm:hover { border-color: var(--sc-primary); color: var(--sc-primary); background: var(--sc-primary-bg); }
.sc-comment-area  { background: var(--sc-surface-2); border: 1px solid var(--sc-border); border-radius: var(--sc-radius); padding: 12px 14px; font-size: 15px; color: var(--sc-ink-2); }
.sc-ca-filled     { background: #f0fdf4 !important; border-color: #a7f3d0 !important; }
.sc-org-grid      { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sc-org-item      { background: var(--sc-surface-2); border: 1px solid var(--sc-border); border-radius: var(--sc-radius); padding: 12px 14px; }
.sc-org-item-filled { background: #f0fdf4 !important; border-color: #a7f3d0 !important; }
.sc-org-item-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--sc-ink-3); margin-bottom: 6px; }

/* Info banners */
.sc-info-banner {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-radius: var(--sc-radius-sm); font-size: 12px; border: 1px solid;
}
.sc-ib-yellow { background: var(--sc-warning-bg); color: var(--sc-warning); border-color: #fcd34d; }
.sc-ib-blue   { background: #eff6ff; color: #2563eb; border-color: #bfdbfe; }
.sc-ib-red    { background: var(--sc-danger-bg); color: var(--sc-danger); border-color: #fca5a5; }

/* Overall comments grid */
.sc-comments-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sc-comment-card  { border: 1px solid var(--sc-border); border-radius: var(--sc-radius); padding: 14px 16px; }
.sc-cc-emp        { border-top: 3px solid #3b82f6; }
.sc-cc-mgr        { border-top: 3px solid #10b981; }
.sc-comment-card-title { display: flex; justify-content: space-between; align-items: center; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 10px; }
.sc-cct-emp       { color: #2563eb; }
.sc-cct-mgr       { color: #059669; }

/* Signature row / boxes */
.sc-sig-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.sc-sig-box { border: 1px solid var(--sc-border); border-radius: var(--sc-radius); padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.sc-sig-signed  { background: var(--sc-success-bg); border-color: #a7f3d0; }
.sc-sig-pending { background: var(--sc-surface-2); }
.sc-sig-phase   { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--sc-ink-4); }
.sc-sig-role    { font-size: 12.5px; font-weight: 600; color: var(--sc-ink); }
.sc-sig-date    { font-size: 11px; color: var(--sc-ink-3); }
.sc-sig-status  { font-size: 11px; font-weight: 600; }
.sc-ss-signed   { color: var(--sc-success); }
.sc-ss-pending  { color: var(--sc-ink-4); }
.sc-sig-waiting { padding: 6px 10px; background: #fffbeb; color: var(--sc-warning); border: 1px solid #fcd34d; border-radius: var(--sc-radius-sm); font-size: 12px; display: flex; align-items: center; gap: 5px; margin-top: 6px; }
.sc-sig-blocked { padding: 6px 10px; background: var(--sc-danger-bg); color: var(--sc-danger); border: 1px solid #fca5a5; border-radius: var(--sc-radius-sm); font-size: 12px; display: flex; align-items: center; gap: 5px; margin-top: 6px; }
.sc-btn-sign    { margin-top: 6px; padding: 6px 12px; background: var(--sc-success); color: #fff; border: none; border-radius: var(--sc-radius-sm); font-size: 12px; font-weight: 600; cursor: pointer; transition: background .15s; display: inline-flex; align-items: center; gap: 5px; }
.sc-btn-sign:hover { background: #047857; }

/* Warn button alias (hide) */
.sc-btn-warn { background: #f59e0b; color: #fff; }
.sc-btn-warn:hover { background: #d97706; }

/* Empty state */
.sc-empty-state { padding: 20px; text-align: center; color: var(--sc-ink-4); font-size: 13px; font-style: italic; display: flex; align-items: center; justify-content: center; gap: 8px; }

/* Mandatory training toggle (inside ribbon) */
.sc-toggle-label  { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.sc-toggle-input  { position: absolute; opacity: 0; width: 0; height: 0; }
.sc-toggle-track  {
  width: 36px; height: 20px; border-radius: 10px; background: #f87171;
  position: relative; transition: background .2s; flex-shrink: 0;
}
.sc-toggle-track::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%; background: #fff;
  transition: transform .2s;
}
.sc-toggle-input:checked + .sc-toggle-track { background: #34d399; }
.sc-toggle-input:checked + .sc-toggle-track::after { transform: translateX(16px); }
.sc-toggle-text    { font-size: 11px; font-weight: 600; }
.sc-tt-done  { color: #6ee7b7; }
.sc-tt-miss  { color: #fca5a5; }

/* Badge for obj status (non-hero) */
.sc-badge-obj { background: rgba(99,102,241,.2); color: #6366f1; border: 1px solid rgba(99,102,241,.3); }

/* Responsive overrides */
@media (max-width: 720px) {
  .sc-pw-grid       { grid-template-columns: repeat(3, 1fr) !important; }
  .sc-obj-panels    { grid-template-columns: 1fr; }
  .sc-score-ribbon  { grid-template-columns: repeat(3, 1fr); }
  .sc-comments-grid { grid-template-columns: 1fr; }
  .sc-org-grid      { grid-template-columns: 1fr; }
  .sc-sig-row       { grid-template-columns: 1fr 1fr; }
  .sc-hero-top      { flex-direction: column; }
  .sc-hero-actions  { align-items: flex-start; }
}

/* ── Objective code & deadline ─────────────────────────────── */
.sc-obj-code {
  font-size: 11px;
  font-family: monospace;
  color: var(--sc-ink-3);
  margin-bottom: 3px;
  font-weight: 500;
}

/* Deadline prominent amber pill */
.sc-obj-deadline {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 5px;
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 600;
  font-family: monospace;
  background: #fffbeb;
  color: #92400e;
  border: 1px solid #fcd34d;
  letter-spacing: .01em;
}
.sc-obj-deadline i { font-size: 10px; color: #d97706; }