/* ============================================================
   GAI-HCI 2027 — Workshop theme overrides (SELF-CONTAINED)
   Loads AFTER HAXD's stylesheets and only re-skins this page.
   Does NOT modify any HAXD file. Identity: Graph Blue / Indigo.
   ============================================================ */

:root,
html[data-theme="light"],
html[data-theme="dark"] {
  /* Re-map the brand accents used across HAXD components to indigo/cyan */
  --primary-color:  #4F46E5;   /* Indigo */
  --primary-light:  #6366F1;
  --primary-dark:   #3730A3;
  --primary-accent: #06B6D4;   /* Cyan highlight */
  --accent-color:   #06B6D4;
  --accent-light:   #22D3EE;
  --secondary-color:#7C3AED;   /* Violet secondary */
  --secondary-light:#8B5CF6;
  /* Buttons + surfaces: swap HAXD's warm gradient/cream for cool indigo tones */
  --gradient-primary: linear-gradient(135deg, #4F46E5 0%, #06B6D4 100%);
  --bg: #F5F6FF;               /* cool indigo-tinted page background */
  --light-surface: #EEF0FF;
}
/* Cool the page background. HAXD sets `[data-theme="light"] body { background:#FFF8F0 !important }`
   so we must match that specificity + !important to override it. */
html[data-theme="light"] body.gaihci-body,
html[data-theme="light"] body.gaihci-body { background-color: #F5F6FF !important; color:#241f3a !important; }
body.gaihci-body { background: #F5F6FF; }
.section-title { color: #1E1B4B; }
html[data-theme="dark"] body.gaihci-body { background-color: #0F0D1A !important; }
html[data-theme="dark"] .section-title { color: #C7D2FE; }

/* ---- Workshop hero: indigo→violet gradient with cyan graph glow ---- */
.gaihci-hero.page-hero {
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(79,70,229,.35), transparent 60%),
    radial-gradient(1000px 600px at 85% -20%, rgba(6,182,212,.28), transparent 60%),
    linear-gradient(135deg, #1E1B4B 0%, #312E81 55%, #4F46E5 100%);
}
/* Graph-node dot overlay (denser than HAXD's, cyan tint) */
.gaihci-hero.page-hero::after {
  background-image: radial-gradient(rgba(34,211,238,.16) 1.4px, transparent 1.4px);
  background-size: 22px 22px;
}
/* The animated node/edge canvas sits above the gradient, below the text */
.gaihci-hero .gaihci-graph-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none; opacity: .55;
}
.gaihci-hero .container { position: relative; z-index: 1; }
.gaihci-hero .section-title::after {
  background: linear-gradient(to right, #22D3EE, rgba(34,211,238,.6)) !important;
}

/* ---- Brand chip in the hero badge ---- */
.gaihci-badge {
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(34,211,238,.5);
  color: #E0F2FE;
}

/* ---- Topic cards → "network node" style: cyan dot + indigo left rail ---- */
.gaihci-topic {
  background: #ffffff;
  border: 1px solid rgba(79,70,229,.14);
  border-left: 3px solid var(--primary-color);
  border-radius: .6rem;
  min-height: 84px;                 /* equal height regardless of 1 or 2 lines */
  align-items: center !important;   /* center content vertically for a tidy grid */
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.gaihci-topic:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(79,70,229,.14);
  border-left-color: var(--primary-accent);
}
/* Icon in a soft indigo "node" chip for a consistent network feel */
.gaihci-topic i {
  color: var(--primary-color);
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem;
  background: rgba(79,70,229,.08);
  border-radius: 50%;
}
.gaihci-topic:hover i { background: rgba(6,182,212,.12); color: var(--primary-accent); }
.gaihci-topic span { font-weight: 500; line-height: 1.35; }
html[data-theme="dark"] .gaihci-topic {
  background: #1e1b32;
  border-color: rgba(99,102,241,.3);
  border-left-color: #6366F1;
}

/* ---- Date cards ---- */
/* ---- Submission types cards ---- */
.gaihci-subtype {
  background: #ffffff;
  border: 1px solid rgba(79,70,229,.14);
  border-top: 3px solid var(--primary-color);
  border-radius: .6rem;
  padding: 1.25rem 1rem;
  transition: transform .18s ease, box-shadow .18s ease;
}
.gaihci-subtype:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(79,70,229,.12); }
.gaihci-subtype-icon {
  width: 3rem; height: 3rem; margin: 0 auto .6rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; font-size: 1.35rem; color: #fff;
  background: linear-gradient(135deg, #4F46E5, #6366F1);
}
.gaihci-subtype-icon i { color: #fff !important; }
.gaihci-subtype-badge {
  display: inline-block; font-size: .75rem; font-weight: 700;
  color: var(--primary-dark); background: #EEF0FF;
  border-radius: 50rem; padding: .2rem .7rem;
}
html[data-theme="dark"] .gaihci-subtype { background:#1e1b32; border-color:rgba(99,102,241,.3); }
html[data-theme="dark"] .gaihci-subtype-badge { background:#201d38; color:#C7D2FE; }

/* ---- Format requirement items ---- */
.gaihci-fmt-item {
  background: #ffffff; border: 1px solid rgba(79,70,229,.14);
  border-left: 4px solid var(--primary-color); border-radius: 8px; padding: .85rem 1rem;
}
.gaihci-fmt-name { font-weight: 600; color: #1E1B4B; font-size: .95rem; }
.gaihci-fmt-name i { color: var(--primary-color); }
.gaihci-fmt-val { color: #6b7280; font-size: .85rem; margin-top: .15rem; }
html[data-theme="dark"] .gaihci-fmt-item { background:#1e1b32; border-color:rgba(99,102,241,.3); border-left-color:#6366F1; }
html[data-theme="dark"] .gaihci-fmt-name { color:#E0E7FF; }
html[data-theme="dark"] .gaihci-fmt-name i { color:#A5B4FC; }

/* ---- IEEE template link cards ---- */
.gaihci-tpl-card {
  background: #ffffff; border: 1px solid rgba(79,70,229,.14); border-radius: .6rem;
  padding: 1.5rem 1rem; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.gaihci-tpl-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(79,70,229,.14); border-color: rgba(6,182,212,.4); }
.gaihci-tpl-icon {
  width: 3.25rem; height: 3.25rem; margin: 0 auto .75rem;
  display: flex; align-items: center; justify-content: center; border-radius: 12px;
  font-size: 1.6rem; color: #fff; background: linear-gradient(135deg, #4F46E5, #06B6D4);
}
.gaihci-tpl-icon i { color: #fff !important; }
.gaihci-tpl-card h6 { color: #1E1B4B; }
html[data-theme="dark"] .gaihci-tpl-card { background:#1e1b32; border-color:rgba(99,102,241,.3); }
html[data-theme="dark"] .gaihci-tpl-card h6 { color:#E0E7FF; }

/* ---- Important Dates → horizontal timeline ---- */
.gaihci-timeline {
  list-style: none; margin: 0; padding: 1.5rem 0 .5rem;
  display: flex; justify-content: space-between; align-items: flex-start;
  position: relative; gap: 1rem;
}
/* The connecting line runs behind the nodes, aligned to node centers */
.gaihci-timeline::before {
  content: ""; position: absolute; top: calc(1.5rem + 27px); left: 8%; right: 8%; height: 3px;
  background: linear-gradient(90deg, #4F46E5, #06B6D4);
  border-radius: 2px; z-index: 0;
}
.gaihci-tl-step {
  position: relative; z-index: 1; flex: 1 1 0;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.gaihci-tl-node {
  width: 54px; height: 54px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.35rem; margin-bottom: .75rem;
  background: linear-gradient(135deg, #4F46E5, #6366F1);
  box-shadow: 0 4px 14px rgba(79,70,229,.28), 0 0 0 6px #F5F6FF;
  transition: transform .2s ease, box-shadow .2s ease;
}
.gaihci-tl-node i { color: #ffffff !important; }
.gaihci-tl-step:hover .gaihci-tl-node {
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 8px 22px rgba(6,182,212,.35), 0 0 0 6px #F5F6FF;
}
.gaihci-tl-final .gaihci-tl-node {
  background: linear-gradient(135deg, #06B6D4, #22D3EE);
}
.gaihci-tl-label { font-weight: 700; color: #1E1B4B; font-size: .95rem; }
.gaihci-tl-date  { color: #6b7280; font-size: .85rem; margin-top: .15rem; }

/* Stack vertically on small screens (line becomes vertical on the left) */
@media (max-width: 767.98px) {
  .gaihci-timeline { flex-direction: column; align-items: flex-start; gap: 1.5rem; padding-left: 1.25rem; }
  .gaihci-timeline::before { top: 1.5rem; bottom: 1.5rem; left: calc(1.25rem + 26px); right: auto; width: 3px; height: auto; background: linear-gradient(180deg, #4F46E5, #06B6D4); }
  .gaihci-tl-step { flex-direction: row; align-items: center; text-align: left; gap: 1rem; width: 100%; }
  .gaihci-tl-node { margin-bottom: 0; }
}

/* Dark mode */
html[data-theme="dark"] .gaihci-tl-node { box-shadow: 0 4px 14px rgba(79,70,229,.35), 0 0 0 6px #0F0D1A; }
html[data-theme="dark"] .gaihci-tl-step:hover .gaihci-tl-node { box-shadow: 0 8px 22px rgba(6,182,212,.4), 0 0 0 6px #0F0D1A; }
html[data-theme="dark"] .gaihci-tl-label { color: #E0E7FF; }
html[data-theme="dark"] .gaihci-tl-date  { color: #94a3b8; }

/* ---- Slim workshop navbar accent ---- */
.gaihci-navbar { background: rgba(255,255,255,.92); box-shadow: 0 2px 12px rgba(30,27,75,.08); }
.gaihci-navbar .navbar-brand { color: var(--primary-color) !important; }
html[data-theme="dark"] .gaihci-navbar { background: rgba(20,18,32,.92); }
.gaihci-nav-submit {
  color:#fff !important;
  background: linear-gradient(135deg, #4F46E5 0%, #06B6D4 100%) !important;
  border-color: transparent !important;
  box-shadow:0 3px 10px rgba(79,70,229,.28);
}
.gaihci-nav-submit:hover {
  color:#fff !important;
  background: linear-gradient(135deg, #4338CA 0%, #0891B2 100%) !important;
  transform:translateY(-1px);
}

/* ---- Workshop footer ---- */
.gaihci-footer { background: #1E1B4B; color: rgba(255,255,255,.72); }
.gaihci-footer .gaihci-footer-title { color: #22D3EE; }
.gaihci-footer a { color: rgba(255,255,255,.72); }
.gaihci-footer a:hover { color: #22D3EE; }

/* ============================================================
   Organizers — ACAI-style committee cards, tinted indigo/cyan
   ============================================================ */
.cm-section { margin-bottom: 2.5rem; }
.cm-section-header {
  display: flex; align-items: center; gap: .75rem;
  margin-bottom: 1.25rem; padding-bottom: .75rem;
  border-bottom: 2px solid rgba(79,70,229,.18);
}
.cm-section-icon {
  width: 2.25rem; height: 2.25rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px; flex-shrink: 0; font-size: 1rem;
  background: linear-gradient(135deg, rgba(79,70,229,.12), rgba(6,182,212,.10));
  color: #3730A3;
}
.cm-section-title { font-weight: 700; font-size: 1.35rem; color: #1E1B4B; margin: 0; letter-spacing: -.02em; }
.cm-compact-list { display: flex; flex-direction: column; gap: .5rem; }
.cm-compact-item {
  padding: .85rem 1rem; background: #ffffff;
  border: 1px solid rgba(79,70,229,.14); border-left: 4px solid #4F46E5;
  border-radius: 8px; transition: transform .2s ease, box-shadow .2s ease;
}
.cm-compact-item:hover { transform: translateX(4px); box-shadow: 0 4px 16px rgba(79,70,229,.10); }
.cm-compact-name { font-weight: 600; color: #1E1B4B; font-size: .95rem; }
.cm-compact-affil { color: #6b7280; font-size: .85rem; margin-top: .15rem; }
.cm-muted { color: #6b7280; font-style: italic; }

/* Member card with photo on the LEFT */
.cm-person { display: flex; align-items: center; gap: .9rem; }
.cm-person-photo {
  flex: 0 0 auto; width: 64px; height: 64px; border-radius: 50%;
  object-fit: cover; object-position: center 30%;
  border: 2px solid rgba(79,70,229,.30);
  box-shadow: 0 2px 8px rgba(79,70,229,.15);
  background: #EEF0FF;
}
.cm-person-body { min-width: 0; }
.cm-person-role { color: var(--primary-color); font-size: .78rem; font-weight: 600; margin-top: .1rem; }
.cm-chair-lead .cm-person-photo { width: 76px; height: 76px; border-color: rgba(79,70,229,.5); }
html[data-theme="dark"] .cm-person-photo { border-color: rgba(99,102,241,.5); background:#1e1b32; }
html[data-theme="dark"] .cm-person-role { color: #A5B4FC; }

/* Highlighted lead chair card with shimmer */
.cm-general-highlight { position: relative; }
.cm-chair-lead {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, rgba(79,70,229,.07), rgba(30,27,75,.10));
  border: 1px solid rgba(79,70,229,.24); border-left: 4px solid #4F46E5;
  border-radius: 8px; padding: 1rem 1.2rem;
  box-shadow: 0 2px 12px rgba(79,70,229,.08);
  transition: box-shadow .3s ease, transform .3s ease;
}
.cm-chair-lead::before {
  content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(34,211,238,.12), transparent);
  animation: gaihciShimmer 5s ease-in-out infinite; pointer-events: none;
}
@keyframes gaihciShimmer { 0%,100% { transform: translateX(-100%); } 50% { transform: translateX(200%); } }
.cm-chair-lead:hover { box-shadow: 0 4px 20px rgba(79,70,229,.18); transform: translateY(-2px); }
.cm-chair-lead .cm-compact-name { font-size: 1.1rem; font-weight: 700; }
.cm-chair-lead .cm-compact-affil { font-size: .9rem; font-weight: 600; }
.cm-icon-glow { animation: gaihciIconGlow 3s ease-in-out infinite; }
@keyframes gaihciIconGlow {
  0%,100% { filter: drop-shadow(0 0 2px rgba(34,211,238,.25)); }
  50%     { filter: drop-shadow(0 0 10px rgba(34,211,238,.55)); }
}

/* Dark mode */
html[data-theme="dark"] .cm-section-header { border-bottom-color: rgba(99,102,241,.3); }
html[data-theme="dark"] .cm-section-icon { background: linear-gradient(135deg, rgba(99,102,241,.22), rgba(34,211,238,.14)); color: #fff; }
html[data-theme="dark"] .cm-section-title { color: #C7D2FE; }
html[data-theme="dark"] .cm-compact-item { background: #1e1b32; border-color: rgba(99,102,241,.3); border-left-color: #6366F1; }
html[data-theme="dark"] .cm-compact-name { color: #E0E7FF; }
html[data-theme="dark"] .cm-compact-affil { color: #94a3b8; }
html[data-theme="dark"] .cm-chair-lead { background: linear-gradient(135deg, rgba(99,102,241,.14), rgba(15,13,26,.5)); border-color: rgba(99,102,241,.35); }

/* Disabled "TBA" button — keep it indigo-tinted, not warm, and clearly muted */
.gaihci-btn-tba,
.gaihci-btn-tba.disabled {
  background: #EEF0FF !important;
  color: var(--primary-dark) !important;
  border: 1px dashed rgba(79,70,229,.4) !important;
  box-shadow: none !important;
}
html[data-theme="dark"] .gaihci-btn-tba { background:#201d38 !important; color:#C7D2FE !important; }

/* Active submission button — workshop indigo gradient (not Bootstrap blue) */
.gaihci-btn-primary,
.gaihci-btn-primary:visited {
  background: linear-gradient(135deg, #4F46E5, #6366F1) !important;
  color: #fff !important;
  border: 0 !important;
  font-weight: 700;
  box-shadow: 0 8px 20px rgba(79,70,229,.28) !important;
}
.gaihci-btn-primary:hover,
.gaihci-btn-primary:focus {
  background: linear-gradient(135deg, #4338CA, #4F46E5) !important;
  color: #fff !important;
  transform: translateY(-2px);
}

/* ---- Hero fact pills (quick-scan info bar under the CTAs) ---- */
.gaihci-facts { display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; margin-top:1.5rem; }
.gaihci-fact {
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.4rem .85rem; border-radius:999px;
  font-size:.85rem; font-weight:600; color:#E0F2FE;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(34,211,238,.35);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.gaihci-fact i { color:#22D3EE; }