/* ══════════════════════════════════════════════════════════════════
   Everything in this stylesheet is scoped under .jmuco-app so it can
   never leak onto the rest of the JMU site (nav bar, other widgets,
   other tables, etc). The HTML wraps the whole dashboard — header,
   main, footer — in a single <div class="jmuco-app">. Do not add any
   bare element selectors (body, table, *, td, a, ...) outside that
   scope below; every rule should start with .jmuco-app.
   ══════════════════════════════════════════════════════════════════ */

.jmuco-app, .jmuco-app *, .jmuco-app *::before, .jmuco-app *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.jmuco-app {
  --jmu-purple: #450084;
  --jmu-purple-dark: #2d0057;
  --jmu-purple-light: #f3eefa;
  --jmu-purple-mid: #7a3db5;
  --jmu-gold: #CBB677;
  --jmu-gold-light: #f5edcf;
  --jmu-grey-light:#D6D6D6;
  --text-primary: #1a1a1a;
  --text-secondary: #555;
  --text-muted: #888;
  --border: #e0e0e0;
  --bg-page: #ffffff;
  --bg-white: #ffffff;
  --bg-light: #faf9fc;
  --working-bg: #ede8f7;
  --working-text: #3b0080;
  --edu-bg: #e1f5ee;
  --edu-text: #085041;
  --seek-bg: #fef3dc;
  --seek-text: #7a4500;
  /* Map choropleth tiers — rank 1 (Virginia, always the outlier by a
     wide margin) gets full jmu-purple; ranks 2-3, 4-6, and 7-10 step
     down in intensity so the tiers stay visually distinct even though
     the underlying counts drop off sharply after Virginia. */
  --map-tier1: #450084;
  --map-tier2: #7a3db5;
  --map-tier3: #a97fd0;
  --map-tier4: #dcc9f2;
  --map-nodata: #e6e6e6;
  --radius: 0px;
  --radius-lg: 5px;
max-width:100%;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  background: var(--bg-page);
  color: var(--text-primary);
  font-size: 16px;
  line-height: 1.6;
  overflow:hidden;
}

/* NOTE on the JMU CMS's #maincontentarea max-width: 519px constraint —
   this dashboard intentionally does NOT try to override that element
   directly from here. Reaching up and restyling an ancestor element by
   ID from inside a nested widget is exactly the kind of cross-widget
   leakage that caused the nav bar issue in the first place (duplicate
   IDs, unscoped rules). If that constraint still clips the dashboard
   once it's placed in the real page, it needs to be addressed at the
   CMS/template level (or via a CSS rule scoped specifically to the
   page this widget lives on), not from within this stylesheet. */

/* ── Header ── */
.jmuco-app .site-header {
  background: var(--jmu-purple);
  border-bottom: 4px solid var(--jmu-gold);
}
.jmuco-app .header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.jmuco-app .logo-box {
  background: var(--jmu-gold);
  color: var(--jmu-purple);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.5px;
  padding: 6px 12px;
  border-radius: 4px;
  line-height: 1;
  font-style: italic;
  text-decoration: none;
  flex-shrink: 0;
}
.jmuco-app .logo-text { color: #fff; font-size: 14px; font-weight: 400; line-height: 1.3; opacity: 0.9; }
.jmuco-app .logo-text strong { display: block; font-size: 16px; font-weight: 600; color: #fff; opacity: 1; }

/* ── Main / outer container ──
   No fixed px max-width fight with a parent YUI unit — this widget is
   meant to be dropped inside an existing yui3-u-* unit on the live site. */
.jmuco-app .main {
  width: 100%;
  margin: 0 auto;
  /*padding: 24px clamp(12px, 3vw, 24px) 60px;*/
  min-width: 0;
}

/* ── Page title ── */
.jmuco-app .page-title { margin-bottom: 18px; }
.jmuco-app .page-title h1 { font-size: clamp(20px, 3vw, 28px); font-weight: 700; color: var(--jmu-purple); letter-spacing: -0.3px; }
.jmuco-app .page-title p { font-size: 14px; color: var(--text-secondary); margin-top: 2px; }

/* ══════════════════════════════════════════════════════════════════
   YUI3 GRID FALLBACK — PREVIEW ONLY
   ════════════════════════════════════════════════════════════════
   The live JMU site already loads YUI3's Grids CSS, which provides
   .yui3-g / .yui3-u-1-4 / .yui3-u-1-3 / .yui3-u-2-3 / .yui3-u-1 etc.
   This block re-implements just enough of that spec (standard YUI3
   percentage widths, floated units, clearfix) so the dashboard
   previews correctly here, where those assets aren't loaded. It is
   scoped under .jmuco-app, so even if you forget to delete it, it
   will only affect yui3-g/yui3-u-* elements INSIDE this widget — not
   the real .yui3-g grids used elsewhere on the page.

   ⚠ DELETE THIS BLOCK when pasting into the CMS — the site's own
   YUI3 grid CSS already defines these classes; this is only a
   stand-in for offline preview and would be redundant (harmless
   now that it's scoped, but still redundant) once dropped into a
   real yui3-g page region.
   ══════════════════════════════════════════════════════════════════ */
.jmuco-app .yui3-g { display: block; }
.jmuco-app .yui3-g:after { content: ""; display: table; clear: both; }
.jmuco-app .yui3-g > [class*="yui3-u-"] { float: left; box-sizing: border-box; }
.jmuco-app .yui3-u-1-4 { width: 25%; }
.jmuco-app .yui3-u-1-3 { width: 33.3333%; }
.jmuco-app .yui3-u-1-2 { width: 50%; }
.jmuco-app .yui3-u-2-3 { width: 66.6667%; }
.jmuco-app .yui3-u-1   { width: 100%; }
@media (max-width: 700px) {
  .jmuco-app .yui3-g > [class*="yui3-u-"] { float: none; width: 100%; }
}
/* ══════════════════════════════════════════════════════════════════
   END YUI3 GRID FALLBACK
   ══════════════════════════════════════════════════════════════════ */

/* Visual gutter between grid units — applied to an inner wrapper
   rather than the yui3-u-* unit itself, so it never throws off the
   grid's percentage math (consistent with how gutters are handled
   elsewhere on the JMU CMS grid). */
.jmuco-app .grid-cell { padding: 0 10px 16px; min-width: 0; }
.jmuco-app .filter-row .grid-cell { padding: 0 10px; }
@media (max-width: 700px) {
  .jmuco-app .grid-cell { padding: 0 0 16px; }
  .jmuco-app .filter-row .grid-cell { padding: 0 0 12px; }
}

/* ── Filter bar: year / degree / college / major, one yui3-g row ── */
.jmuco-app .filter-row {
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 4px;
  margin-bottom: 20px;
}
.jmuco-app .filter-field {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.jmuco-app .filter-field .filter-label {
  font-size: 11px;
  font-weight: 700;
  width:100%!important;
  color: var(--jmu-purple);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  text-align: left!important;
  margin-left:15px;
}
.jmuco-app .filter-field select {
  width: 100%;
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  padding: 9px 12px;
  border-radius: var(--radius);
  border: 2px solid var(--border);
  background: var(--bg-white);
  color: var(--text-primary);
  cursor: pointer;
  text-overflow: ellipsis;
}
/* Year & degree get the purple emphasis treatment; college & major are secondary */
.jmuco-app #sel-year, .jmuco-app #sel-degree {
  border-color: var(--border);
color: var(--text-primary);
}
.jmuco-app .filter-field select:focus { outline: 2px solid var(--jmu-gold); outline-offset: 2px; }

/* ── Dashboard: yui3-g row, ring unit (1-3) + detail unit (2-3) ── */
.jmuco-app .dash-col {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

/* ── Cards ── */
.jmuco-app .card {
  background: var(--bg-white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  overflow: hidden;
  min-width: 0;
}
.jmuco-app .card-header {
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--bg-white);
  background: var(--jmu-purple);
}
.jmuco-app .card-body { padding: 20px; min-width: 0; }

/* ── Hero outcome ring ── */
.jmuco-app .outcome-card { text-align: center; }
.jmuco-app .outcome-card .card-body { padding: 28px 20px 24px; }

/* Fluid ring: scales with its column instead of a fixed 220px box,
   so it behaves inside narrow YUI units / sidebars. */
.jmuco-app .ring-wrap {
  position: relative;
  width: min(220px, 60vw, 100%);
  aspect-ratio: 1 / 1;
  margin: 0 auto 20px;
}
.jmuco-app .ring-wrap svg { width: 100%; height: 100%; transform: rotate(-90deg); display: block; }
.jmuco-app .ring-bg { fill: none; stroke: #ede8f7; stroke-width: 15; }
.jmuco-app .ring-fill {
  fill: none;
  stroke: var(--jmu-purple);
  stroke-width: 20;
  stroke-linecap: butt;
  stroke-dasharray: 565.49; /* 2π × 90 */
  stroke-dashoffset: 565.49;
  transition: stroke-dashoffset 0.7s cubic-bezier(0.4,0,0.2,1);
}
.jmuco-app .ring-center {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
  width: 100%;
}
.jmuco-app .ring-pct {
  font-size: clamp(28px, 9cqw, 48px);
  font-weight: 800;
  color: var(--jmu-purple);
  line-height: 1;
  display: block;
  letter-spacing: -2px;
}
.jmuco-app .ring-label { font-size: 12px; color: var(--text-muted); display: block; margin-top: 4px; }

.jmuco-app .outcome-headline {
  font-size: 15px;
  color: var(--text-primary);
  line-height: 1.5;
  margin: 0 auto 16px!important;
  max-width:310px;
  
}
.jmuco-app .outcome-headline strong { color: var(--jmu-purple); }

/* ── Stats grid (small inner component — grid here is fine, it's not
     fighting the outer YUI layout) ── */
.jmuco-app .stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}
.jmuco-app .stat-card {
  background: var(--jmu-purple-light);
  border-radius: var(--radius);
  padding: 14px 12px;
  text-align: center;
  min-width: 0;
}
.jmuco-app .stat-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--jmu-purple-mid); font-weight: 700; margin-bottom: 5px; }
.jmuco-app .stat-value { font-size: 22px; font-weight: 700; color: var(--jmu-purple); line-height: 1; }
.jmuco-app .stat-sub { font-size: 10px; color: var(--text-muted); margin-top: 3px; }

/* ── Individual metric bars (working / continuing ed / still seeking),
     each shown as its own percentage of 100%, not stacked together ── */
.jmuco-app .bar-heading { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-secondary); margin-bottom: 10px; }
.jmuco-app .metric-bars { display: flex; flex-direction: column; gap: 12px; }
.jmuco-app .metric-bar-item { min-width: 0; }
.jmuco-app .metric-bar-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 5px;
}
.jmuco-app .metric-bar-top .metric-pct { font-weight: 700; color: var(--jmu-purple); }
.jmuco-app .metric-bar-track { height: 16px; border-radius: var(--radius); overflow: hidden; background: #eee; }
.jmuco-app .metric-bar-fill {
  height: 100%;
  border-radius: var(--radius);
  transition: width 0.45s cubic-bezier(0.4,0,0.2,1);
}

/* ── Table card ── */
.jmuco-app .table-wrap { overflow-x: auto; min-width: 0; }
.jmuco-app table { width: 100%; border-collapse: collapse; font-size: 13px; }
.jmuco-app th {
  text-align: left; padding: 10px 12px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px;
  color: var(--jmu-purple);
  border-bottom: 2px solid var(--jmu-gold);
  white-space: nowrap; background: var(--bg-white);
}

.jmuco-app td { padding: 9px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.jmuco-app tr:last-child td { border-bottom: none; }
.jmuco-app tr.alt td { background: var(--bg-light); }
.jmuco-app tr:hover td { background: var(--jmu-purple-light); }
.jmuco-app .row-name { font-weight: 600; }

/* Per-row outcome bar: working / continuing education / still seeking
   shown as one stacked bar, each segment's width equal to its own
   percentage of 100 (not re-normalized against each other), with the
   percentage printed inside the segment when there's room for it. */
.jmuco-app .row-outcome-bar {
  display: flex;
  height: 24px;
  width: 100%;
  min-width: 150px;
  max-width: 260px;
  overflow: hidden;
  background: #eee;
}
.jmuco-app .row-outcome-seg {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  overflow: hidden;
  white-space: nowrap;
  padding: 0 3px;
}
.jmuco-app .row-outcome-seg.seg-working { background: #450084; color: #fff; }
.jmuco-app .row-outcome-seg.seg-edu { background: #1D9E75; color: #fff; }
.jmuco-app .row-outcome-seg.seg-seek { background: #CBB677; color: #4a3214; }

/* Legend beneath the table, explaining the row outcome bar colors */
.jmuco-app .legend { display: flex; gap: 16px; flex-wrap: wrap; justify-content: flex-end; padding: 12px 10px; border-top: 1px solid var(--border); }
.jmuco-app .legend-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-secondary); }
.jmuco-app .legend-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; display: inline-block; }

/* Suppressed salary values (fewer than 5 data points, withheld by JMU
   to protect privacy) — styled distinctly from a real dollar figure so
   it doesn't read as "$0" or a formatting error. The stat-value
   variant is sized down since "suppressed" is much wider than a
   dollar figure and would otherwise overflow a narrow stat-card. */
.jmuco-app .cell-suppressed { color: var(--text-muted); font-style: italic; }
.jmuco-app .stat-value .cell-suppressed { font-size: 15px; font-weight: 600; }
.jmuco-app .stat-span-2 { grid-column: span 2; }

/* ── Location of Working Graduates map ──
   Internal flex layout only (map + ranked list side by side); doesn't
   fight the outer yui3-g grid, same rationale as .stats-grid above. */
.jmuco-app .map-subtitle { font-size: 13px; color: var(--text-secondary); margin-bottom: 16px; }
.jmuco-app .map-layout { display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; }
.jmuco-app .map-wrap { flex: 1 1 480px; min-width: 280px; }
.jmuco-app .map-wrap svg { width: 100%; height: auto; display: block; }
.jmuco-app .state {
  fill: var(--map-nodata);
  stroke: #fff;
  stroke-width: 1;
  transition: fill 0.3s;
}
.jmuco-app .state:hover { stroke: var(--jmu-purple); stroke-width: 1.5; }
.jmuco-app .state-dc { stroke: var(--map-nodata); }

/* Per-state number labels + Northeast-cluster callouts. JMU gold,
   bold, with a white halo (via paint-order) so it stays legible
   across all four tier colors, from the lightest tint to full
   jmu-purple, without needing a separate variant per tier.
   Sized much larger than normal body text on purpose: this SVG's
   viewBox (1030x593) is roughly double the width the map actually
   renders at in the card (~480-600px), so the browser scales every
   length inside it — including font-size — down by about half. A
   "26px" value here typically renders around 13-15 actual screen
   pixels, not 26. */
.jmuco-app .map-label {
  font-size: 18px;
  font-weight: 700;
  fill: var(--jmu-purple-dark);
  stroke: #fff;
  stroke-width: 6px;
  paint-order: stroke fill;
  stroke-linejoin: round;
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
}
.jmuco-app .map-label-callout { text-anchor: start; font-size: 14px; stroke-width: 4.5px; }
.jmuco-app .map-leader { stroke: #999; stroke-width: 0.6; fill: none; }
.jmuco-app .map-leader-dot { fill: var(--jmu-purple); stroke: #fff; stroke-width: 0.5; }

/* Below ~480px the whole map shrinks enough that in-map numbers would
   render unreadably small — drop them and lean on the tier coloring
   plus the ranked list (which already has the exact figures) instead
   of shipping text nobody can read. */
@media (max-width: 480px) {
  .jmuco-app .map-label, .jmuco-app .map-label-callout,
  .jmuco-app .map-leader, .jmuco-app .map-leader-dot { display: none; }
}

.jmuco-app .map-rank-list { flex: 0 0 260px; min-width: 220px; }
.jmuco-app .rank-list { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.jmuco-app .rank-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  padding: 7px 10px;
  border-radius: var(--radius);
  background: var(--bg-light);
}
.jmuco-app .rank-name { display: flex; align-items: center; gap: 8px; font-weight: 600; min-width: 0; }
.jmuco-app .rank-swatch { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
.jmuco-app .rank-count { font-weight: 700; color: var(--jmu-purple); }
.jmuco-app .rank-pct { font-size: 11px; color: var(--text-muted); margin-left: 4px; }

@media (max-width: 700px) {
  .jmuco-app .map-layout { flex-direction: column; }
  .jmuco-app .map-wrap { width: 100%; flex: 0 0 auto; }
  .jmuco-app .map-rank-list { flex: 1 1 auto; width: 100%; }
}

/* ── Footer ── */
.jmuco-app .footnote { font-size: 11px; color: var(--text-muted); padding: 14px 20px; border-top: 1px solid var(--border); line-height: 1.5; }
.jmuco-app .site-footer { background: var(--jmu-purple-dark); color: rgba(255,255,255,0.6); text-align: center; padding: 20px 24px; font-size: 13px; margin-top: 40px; }
.jmuco-app .site-footer a { color: var(--jmu-gold); text-decoration: none; }
.jmuco-app .site-footer a:hover { text-decoration: underline; }

/* ── Breakpoints ──
   Grid-unit stacking (yui3-u-* → 100%) is handled above in the YUI3
   fallback block / by the site's real YUI grid CSS. This just tunes
   the smaller inner components for narrow widths. */
@media (max-width: 600px) {
  .row-name {
    max-width: 90px;
    white-space: normal;
    word-break: break-word;
  }
  .col-total {display: none;}
  .seg-label-narrow {display: none;}
}

@media (max-width: 480px) {
  .jmuco-app .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .jmuco-app .main { padding: 16px 12px 40px; }
  .jmuco-app .card-body { padding: 16px; }
  .jmuco-app .row-outcome-bar {max-width:90px;min-width: 80px;}
  .jmuco-app td {padding: 3px 8px;}
  .seg-label-xs-narrow {display: none;}
}
@media (prefers-reduced-motion: reduce) {
  .jmuco-app .metric-bar-fill, .jmuco-app .ring-fill { transition: none; }
}