/* ===================================================================
   Claude + James — Collaboration Dashboard
   Design: Paradigm Shift / Mint accent / Raleway + Source Sans Pro
   Matching: jamescarty.co.uk + projects.jamescarty.co.uk
   =================================================================== */

:root {
  --mint: #49fcd4;
  --mint-dim: #43d9b8;
  --mint-hover: #2ee4bb;
  --mint-soft: rgba(73, 252, 212, 0.08);
  --mint-glow: rgba(73, 252, 212, 0.15);
  --bg: #ffffff;
  --bg-alt: #f7f8fa;
  --bg-card: rgba(255, 255, 255, 0.9);
  --text: #1a1a1a;
  --text-secondary: #6b7280;
  --text-muted: #9ca3af;
  --border: #e5e7eb;
  --border-light: #f0f0f0;
  --shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-lg: 0 10px 40px rgba(0,0,0,0.08);
  --radius: 0.325rem;
  --radius-lg: 0.5rem;
  --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="dark"] {
  --mint: #49fcd4;
  --mint-dim: #43d9b8;
  --mint-hover: #5ffedd;
  --mint-soft: rgba(73, 252, 212, 0.06);
  --mint-glow: rgba(73, 252, 212, 0.1);
  --bg: #0f0f1a;
  --bg-alt: #141425;
  --bg-card: #1a1a2e;
  --text: #e8e8ec;
  --text-secondary: #9ca3af;
  --text-muted: #6b7280;
  --border: #2a2a40;
  --border-light: #1f1f35;
  --shadow: 0 1px 3px rgba(0,0,0,0.3);
  --shadow-lg: 0 10px 40px rgba(0,0,0,0.4);
}

/* Reset */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 14pt;
  scroll-behavior: smooth;
}

body {
  background-color: var(--bg);
  color: var(--text);
  font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 300;
  line-height: 1.7;
  transition: background var(--transition), color var(--transition);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a {
  color: inherit;
  text-decoration: none;
}

/* ── Geometric background pattern ──
   Same SVG as jamescarty.co.uk #wrapper:before
   Portfolio: fill rgba(67,217,184,0.25) on solid #49fcd4 bg
   Dashboard: stroke + fill in mint-dim on white bg, container at 8% opacity
   Hidden in dark mode */
.bg-pattern {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 920 1750'%3E%3Cpath style='fill:%2343d9b8;stroke:%2343d9b8;stroke-width:1.5' d='M889.72,1137.55l-2.91-0.75l-364.39,282.94l-0.7-0.9l-0.51,0.11l-94.77-451.5l-32.51-15.75l-16.73-8.11l0,0.68 l-1.46,0l0-1.39l-1.89-0.92l-112.41-54.47l-0.29,1.03l-1.41-0.37l0.37-1.31l-34.14-16.54l-98.56-47.76l-0.59,0.81l-1.16-0.88 l0.42-0.57L11.43,766.33l-0.25,0.2l-0.9-1.15l102.87-79.98l0.08-0.1l0.02,0.02l116.68-90.72l-0.18-0.34l1.3-0.66l0.05,0.09 l100.5-78.14l-0.07-0.32l0.65-0.14l42.3-32.89l-0.15-54.54l-0.59,0.29l-0.64-1.31l1.23-0.6l-0.01-4.54l-0.33-122.47l-0.99,0.18 l-0.28-1.43l1.27-0.23l-0.4-147.49l-0.87-0.16l0.28-1.43l0.58,0.1l-0.35-127.48l-0.13-0.06l0.64-1.31L489.97,76.8l0.73,0.19 l-0.04,0.14l132.63,65.11l0.33-0.45l1.16,0.88l-0.16,0.22l114.21,56.07l0.45-0.35l0.72,0.93l47.89,23.51l2.76-1.36l0.56,4.61 l-3.32-1.63L571.52,330.88L375.95,482.93l0.66,239.95l51.12,243.57l222.53,107.83l236.23,60.93l2.27-1.77 M375.8,425.34l17.25-8.47 l36.13-127.75l-53.73,9.66L375.8,425.34z M551,241.05l38.19-52.2l-123.83-22.27l-34.13,120.68l98.99-17.81L551,241.05z M532.3,269.09l151.34-27.22l37.63-29.25l-130.48-23.47L532.3,269.09z M303.38,733.9l-2.36-4.48l-44.18-83.78L182.5,747.25 l40.78,36.46l52.69,47.11L303.38,733.9z M277.18,831.91l56.95,50.93L375.69,920l-0.13-49.23l-71.19-135L277.18,831.91z M303.96,731.86l41.93-148.25l-9.74-46.39L257.8,644.33L303.96,731.86z M304.94,733.73l9.55,18.12l61.05,115.78l-0.39-144.6 l-16.9-80.53l-11.71-55.81L304.94,733.73z M375.21,211.79l0.23,85.51l54.17-9.74l34.29-121.23l-88.87-15.98L375.21,211.79z M430.78,288.83l-17.88,63.21L394.81,416l44.01-21.6l90.15-123.23L430.78,288.83z M287.76,898.62l87.99,42.64l-0.05-19.29 l-91.37-81.71l-7.59-6.78l-14.88,52.59L287.76,898.62z M174.26,843.62l86.26,41.8l15-53.03l-93.89-83.95l-53.34,72.91L174.26,843.62 z M113.18,687.22L12.71,765.33l55.69,26.99l58.56,28.38l53.58-73.24l-34.83-31.14L113.18,687.22z M230.62,595.92l-116.27,90.4 l63.02,56.36l4.03,3.61l74.67-102.08l-7.47-14.17L230.62,595.92z M331.94,517.15l-100.15,77.86l25.25,47.88l78.71-107.59l-1.71-8.14 L331.94,517.15z M333.22,516.15l2.02,9.64l1.66,7.92l34.65-47.37L333.22,516.15z M337.31,535.63l9.43,44.95l26.67-94.3 L337.31,535.63z M347.39,583.66l27.74,132.16l-0.62-228.04L347.39,583.66z M374.7,21.83l0.35,127.02l89.27,16.06l24.61-87 L374.7,21.83z M490.25,78.56l-22.26,78.7l-2.24,7.91l124.39,22.37l10.23-13.99l22.04-30.12L490.25,78.56z M623.74,144.09 l-12.29,16.8l-19.71,26.95l131.07,23.58l14.73-11.45L623.74,144.09z M739,200.67l-13.3,10.34l-0.96,0.74l58.14,10.46L739,200.67z M723.19,212.96l-25.33,19.69l-11.14,8.66l97.03-17.45L723.19,212.96z M782.89,225.5l-98.64,17.74l-107.06,83.23L782.89,225.5z M631.68,282.26l49.48-38.47l-150.1,27l-89.41,122.22l129.1-63.37L631.68,282.26z M565.06,334.05l-125.28,61.5l-45.94,62.8 l-14.96,20.44L565.06,334.05z M425.31,412.87l11.65-15.93l-42.69,20.96l-13.66,48.3l-3.58,12.67L425.31,412.87z M392.51,418.76 l-16.71,8.2l0.01,4.72l0.12,45.68L392.51,418.76z M377.21,941.96l21.37,10.36l24.14,11.7l-45.56-40.74L377.21,941.96z M377.15,921.31l34.83,31.15l12.57,11.24l-47.53-90.14L377.15,921.31z M376.63,730.07l0.38,140.33l48.29,91.59L376.63,730.07z M806.29,1197.48l75.8-58.86l-28.56,11.47l-25.6,10.28l14.96,7.25l-0.64,1.31l-16.16-7.83l-124.76,50.1l40.56,36.27L806.29,1197.48z M522.43,1146.18l58.88,111.66l52.71-21.17l64.61-25.95l-75.11-67.17L522.43,1146.18z M621.92,1142.14l-115.78-103.53l-46.8-12.07 l62.33,118.2l7.06-0.18L621.92,1142.14z M700.14,1210.12l124.19-49.87l-42.89-20.78l-155.8,4.04L700.14,1210.12z M679.7,1295.77 l61.03-47.39l-40.9-36.57l-117.85,47.32l42.09,79.82L679.7,1295.77z M522.48,1417.85l1.83-1.42l98.6-76.56l-42.28-80.19 l-84.25,33.83L522.48,1417.85z M496.08,1292.06l83.87-33.68l-59.14-112.16l-55.04,1.43L496.08,1292.06z M465.46,1146.2l54.58-1.42 l-62.61-118.74l-18.03-4.65l0.36-1.41l16.74,4.32l-27.63-52.4L465.46,1146.2z M458.42,1024.79l45.35,11.7l-74.14-66.29 L458.42,1024.79z M431.46,969.87l75.38,67.41l136.26,35.15L431.46,969.87z M649.76,1075.65l-140.54-36.25l114.83,102.68l154.53-4.01 L649.76,1075.65z M656.92,1077.5l124.84,60.5l51.97-1.35l47.7-1.24L656.92,1077.5z M784.62,1139.38l41.54,20.13l56.45-22.67 L784.62,1139.38z'/%3E%3C/svg%3E");
  background-position: center 10%;
  background-repeat: repeat-y;
  background-size: 80% auto;
  opacity: 0.06;
  pointer-events: none;
  z-index: 0;
  transition: opacity var(--transition);
}

[data-theme="dark"] .bg-pattern {
  opacity: 0;
}

/* ── Dashboard container ── */
.dashboard {
  max-width: 920px;
  margin: 0 auto;
  padding: 3rem 2rem 0;
  flex: 1;
  position: relative;
  z-index: 1;
}

/* ── Hero header ── */
.dash-hero {
  padding: 2rem 0 2.5rem;
  margin-bottom: 2rem;
}

.dash-header {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.header-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--mint);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Raleway", sans-serif;
  font-size: 1.2rem;
  font-weight: 800;
  color: #0a1628;
  letter-spacing: -0.02em;
  flex-shrink: 0;
}

.dash-header h1 {
  font-family: "Raleway", sans-serif;
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.2;
  text-transform: none;
  margin: 0;
  color: var(--text);
}

.dash-header p {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-top: 0.2rem;
  line-height: 1.5;
}

/* ── Divider ── */
.divider {
  border: none;
  height: 1px;
  background: var(--border);
  margin: 0 0 2.5rem;
}

/* ── Section titles ── */
.section {
  margin-bottom: 2.5rem;
}

.section-title {
  font-family: "Raleway", sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.175em;
  text-transform: uppercase;
  line-height: 1.75;
  margin: 0 0 0.25rem;
  color: var(--text);
}

.section-sub {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 1.25rem;
}

/* ── Stats grid ── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
  margin-bottom: 2.5rem;
}

.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-top: 2px solid var(--mint);
  border-radius: var(--radius);
  padding: 1rem 1.15rem;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.stat-card:hover {
  box-shadow: var(--shadow);
}

.stat-label {
  font-family: "Raleway", sans-serif;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.175em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.25rem;
}

.stat-value {
  font-family: "Source Sans Pro", sans-serif;
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--text);
}

.stat-sub {
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-top: 0.15rem;
}

/* ── Legend ── */
.legend {
  display: flex;
  gap: 1.25rem;
  margin-bottom: 0.75rem;
  font-size: 0.7rem;
  color: var(--text-secondary);
}

.legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  display: inline-block;
  margin-right: 0.3rem;
  vertical-align: middle;
}

/* ── Timeline ──
   Bars are 68px wide so ~12 fill the viewport width.
   With 18 months of data the remaining overflow,
   creating a horizontal scrollbar to view history. */
   .timeline-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 2.5rem;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
  }
  
  .timeline-scroll::-webkit-scrollbar {
    height: 6px;
  }
  
  .timeline-scroll::-webkit-scrollbar-track {
    background: transparent;
  }
  
  .timeline-scroll::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 3px;
  }
  
  .timeline-inner {
    width: max-content;
    min-width: 100%;
  }
  
  .timeline {
    display: flex;
    gap: 4px;
    align-items: flex-end;
    height: 140px;
    margin-bottom: 0.35rem;
  }
  
  .tbar {
    width: 68px;
    flex: 0 0 68px;
    border-radius: 3px 3px 0 0;
  }

.tbar:hover {
  opacity: 0.8;
}

.tbar-tip {
  position: absolute;
  top: -1.4rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.6rem;
  color: var(--text-muted);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.15s;
  pointer-events: none;
}

.tbar:hover .tbar-tip {
  opacity: 1;
}

.tbar-stack {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  border-radius: 3px 3px 0 0;
  overflow: hidden;
}
 
.tbar-seg {
  width: 100%;
  flex-shrink: 0;
}

.timeline-labels {
  display: flex;
  gap: 4px;
}

.timeline-labels span {
  width: 68px;
  flex: 0 0 68px;
  text-align: center;
  font-size: 0.6rem;
  color: var(--text-muted);
}

/* ── Project cards ── */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}

.pcard {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.15rem;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.pcard:hover {
  border-color: var(--mint-dim);
  box-shadow: var(--shadow);
}

.pcard h3 {
  font-family: "Raleway", sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0.2rem;
  color: var(--text);
}

.pcard .desc {
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-bottom: 0.85rem;
}

.prog {
  height: 4px;
  background: var(--bg-alt);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 0.6rem;
}

.prog-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.6s ease;
}

.pmeta {
  display: flex;
  gap: 0.75rem;
  font-size: 0.65rem;
  color: var(--text-muted);
}

/* ── Shipped cards ── */
.shipped-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}

.scard {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1rem;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.scard:hover {
  border-color: var(--mint-dim);
  box-shadow: var(--shadow);
}

.scard-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 0.4rem;
  vertical-align: middle;
}

.scard h4 {
  font-family: "Raleway", sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  display: inline;
  vertical-align: middle;
  color: var(--text);
}

.scard p {
  font-size: 0.7rem;
  color: var(--text-secondary);
  margin-top: 0.5rem;
  line-height: 1.6;
}

.scard .link {
  font-size: 0.7rem;
  color: var(--mint-dim);
  margin-top: 0.5rem;
  display: block;
  transition: color var(--transition);
}

.scard .link:hover {
  color: var(--mint-hover);
}

/* ── Tech stack ── */
.tech-section {
  margin-bottom: 0;
}

.tech-category {
  margin-bottom: 1.25rem;
}

.tech-cat-label {
  font-family: "Raleway", sans-serif;
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}

.tech-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.tech-pill {
  font-size: 0.7rem;
  padding: 0.2rem 0.75rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  background: var(--bg-card);
  transition: border-color var(--transition);
}

.tech-pill.highlight {
  border-color: var(--mint);
  color: var(--text);
}

/* ── Collapsible sections ── */
.collapsible {
  margin-bottom: 1.5rem;
}

.collapse-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  padding: 0.75rem 1rem;
  background: var(--bg-alt);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  width: 100%;
  text-align: left;
  font-family: "Source Sans Pro", sans-serif;
  transition: border-radius var(--transition), border-color var(--transition);
  color: inherit;
}

.collapse-header.open {
  border-radius: var(--radius) var(--radius) 0 0;
  border-bottom-color: transparent;
}

.collapse-header:hover {
  border-color: var(--border);
}

.ch-left {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.ch-title {
  font-family: "Raleway", sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text);
}

.ch-count {
  font-size: 0.7rem;
  color: var(--text-muted);
}

.collapse-arrow {
  font-size: 0.7rem;
  color: var(--text-muted);
  transition: transform 0.2s;
}

.collapse-arrow.open {
  transform: rotate(180deg);
}

.collapse-body {
  display: none;
  padding: 1rem;
  border: 1px solid var(--border-light);
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  background: var(--bg-card);
}

.collapse-body.open {
  display: block;
}

/* ── Repo grid ── */
.repo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
}

.repo-item {
  font-size: 0.7rem;
  padding: 0.5rem 0.75rem;
  background: var(--bg-alt);
  border-radius: var(--radius);
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background var(--transition);
}

.repo-item:hover {
  background: var(--mint-soft);
}

.repo-item a {
  border-bottom: none;
}

.repo-name {
  font-weight: 600;
  color: var(--text);
}

.repo-lang {
  color: var(--text-muted);
}

/* ── Activity list ── */
.activity-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0;
}

.activity-item + .activity-item {
  border-top: 1px solid var(--border-light);
}

.activity-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.activity-text {
  font-size: 0.8rem;
  flex: 1;
  color: var(--text);
}

.activity-time {
  font-size: 0.65rem;
  color: var(--text-muted);
  flex-shrink: 0;
}

/* ── Footer (matching projects site) ── */
.site-footer {
  border-top: 1px solid var(--border);
  padding: 2rem;
  margin-top: 2rem;
  position: relative;
  z-index: 1;
}

.footer-inner {
  max-width: 920px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.footer-copy {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.footer-socials {
  display: flex;
  gap: 0.75rem;
}

.footer-socials a {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 0.8rem;
  transition: all var(--transition);
}

.footer-socials a:hover {
  border-color: var(--mint-dim);
  color: var(--mint-dim);
}

.footer-socials svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

/* ── Theme toggle ── */
#theme-toggle {
  position: fixed;
  top: 1.25rem;
  right: 1.25rem;
  z-index: 10000;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-card);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: var(--text-secondary);
  transition: all var(--transition);
  padding: 0;
  line-height: 1;
}

#theme-toggle:hover {
  border-color: var(--mint-dim);
  color: var(--mint-dim);
}

#theme-toggle .icon-moon {
  display: none;
}

[data-theme="dark"] #theme-toggle .icon-sun {
  display: none;
}

[data-theme="dark"] #theme-toggle .icon-moon {
  display: inline;
}

/* ── Responsive ── */
@media screen and (max-width: 768px) {
  html {
    font-size: 13pt;
  }

  .dashboard {
    padding: 2rem 1.5rem 0;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .projects-grid {
    grid-template-columns: 1fr;
  }

  .shipped-grid {
    grid-template-columns: 1fr 1fr;
  }

  .repo-grid {
    grid-template-columns: 1fr;
  }

  .ch-left {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
  }

  .footer-inner {
    flex-direction: column;
    gap: 1rem;
  }

  .tbar {
    width: 48px;
    flex: 0 0 48px;
  }

  .timeline-labels span {
    width: 48px;
    flex: 0 0 48px;
  }
}

@media screen and (max-width: 480px) {
  html {
    font-size: 12pt;
  }

  .dashboard {
    padding: 1.5rem 1.25rem 0;
  }

  .dash-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .stats-grid {
    grid-template-columns: 1fr 1fr;
  }

  .shipped-grid {
    grid-template-columns: 1fr;
  }

  .tbar {
    width: 36px;
    flex: 0 0 36px;
  }

  .timeline-labels span {
    width: 36px;
    flex: 0 0 36px;
  }
}