:root {
  /* ==============================
     GOODSTREAM GLOBAL PALETTE
     ============================== */
  --gs-coral: #ff6642;
  --gs-charcoal: #1c2329;
  --gs-navy: #1e3044;
  --gs-white: #ffffff;
  --gs-mist: #e1e9f0;

    /* ==============================
     GLOBAL THEME TOKENS
     ============================== */
  --gs-page-bg: var(--gs-mist);
  --gs-header-bg: var(--gs-navy);
  --gs-card-bg: var(--gs-white);
  --gs-panel-bg: var(--gs-white);

  --gs-text: var(--gs-charcoal);
  --gs-text-light: var(--gs-mist);
  --gs-text-white: var(--gs-white);
  --gs-muted: rgba(28, 35, 41, 0.68);

  --gs-primary: var(--gs-navy);
  --gs-primary-hover: #263c55;
  --gs-accent: var(--gs-coral);

  --gs-border: rgba(28, 35, 41, 0.14);
  --gs-border-light: rgba(255, 255, 255, 0.18);

  --gs-shadow: 0 12px 30px rgba(28, 35, 41, 0.12);

  --gs-green: #46c274;
  --gs-green-shadow: rgba(22,163,74,.18);
}

/* Workflow Tab */
.gs-workflow-phasebar{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

/* Global font color for workflow tab */
.gs-workflow {
  color: #1e293b; /* CHANGE THIS to whatever color you want */
}

/* ─────────────────────────────────────────────
   Workflow Visual Timeline + Accordion
───────────────────────────────────────────── */
.gs-wf-layout{
  display:grid;
  grid-template-columns: 380px 1fr;
  gap:16px;
  margin-top:14px;
}

.gs-wf-timeline{
  border:1px solid rgba(0,0,0,.12);
  border-radius:16px;
  padding:14px;
  background:#e9e9e9;
}

.gs-wf-track{
  display:flex;
  align-items:center;
  gap:10px;
  overflow:auto;
  padding-bottom:6px;
}

.gs-wf-connector{
  flex:1;
  height:3px;
  min-width:40px;
  background:rgba(0,0,0,.10);
  border-radius:999px;
}

.gs-wf-node{
  border:0;
  background:transparent;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  min-width:120px;
  padding:6px 8px;
  border-radius:12px;
  color: #222;
}

.gs-wf-node:hover{
  background:rgba(11,111,255,.06);
}

.gs-wf-dot{
  width:14px;
  height:14px;
  border-radius:999px;
  background:#fff;
  border:3px solid rgba(0,0,0,.25);
}

.gs-wf-node.active .gs-wf-dot{
  border-color: var(--gs-coral);
  color: #222;
  box-shadow:0 0 0 4px var(--gs-);
}

.gs-wf-node.complete .gs-wf-dot{
  border-color:var(--gs-green);
  box-shadow:0 0 0 4px var(--gs-green-shadow);
}

.gs-wf-ms-label{
  font-size: 14px;
  font-weight: 700;
  color: var(--gs-charcoal);
  letter-spacing: 0.2px;
}

.gs-wf-node-sub{
  font-size:12px;
  opacity:.7;
}

/* Accordion */
.gs-wf-accordion{
  display:grid;
  gap:12px;
}

.gs-wf-phase{
  border:1px solid rgba(0,0,0,.12);
  border-radius:14px;
  background:#fff;
  overflow:hidden;
}

.gs-wf-phase-summary{
  list-style:none;
  padding:12px 12px 10px;
  cursor:pointer;
}

.gs-wf-phase-summary::-webkit-details-marker{ display:none; }

.gs-wf-phase-title{
  display:flex;
  justify-content:space-between;
  gap:10px;
  font-weight:900;
  margin-bottom:8px;
}

.gs-wf-phase-pct{
  opacity:.75;
  font-weight:800;
}

.gs-wf-phase-bar{
  height:8px;
  background:rgba(0,0,0,.08);
  border-radius:999px;
  overflow:hidden;
}

.gs-wf-phase-bar-fill{
  height:100%;
  background:var(--gs-green);
}

/* Milestones inside phase */
.gs-wf-ms-list{
  padding:10px 10px 12px;
  display:grid;
  gap:8px;
}

.gs-wf-ms{
  width:100%;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 10px;
  border-radius:12px;
  border:1px solid transparent;
  background:transparent;
  cursor:pointer;
  text-align:left;
}

.gs-wf-ms:hover{
  background:rgba(11,111,255,.08);
}

.gs-wf-ms.active{
  border-color:rgba(11,111,255,.35);
  background:rgba(11,111,255,.10);
  color: var(--gs-charcoal);
}

.gs-wf-ms-badge{
  width:24px;
  display:inline-flex;
  justify-content:center;
}

.gs-wf-ms.done .gs-wf-ms-label{
  text-decoration:line-through;
  opacity:.8;
}

.gs-wf-ms.blocked{
  background:rgba(255,59,48,.10);
}

/* Right panel tweaks */
.gs-wf-panel-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
}

.gs-wf-panel-title{
  font-weight:900;
  margin-bottom:6px;
}

.gs-wf-panel-desc{
  opacity:.8;
}

.gs-wf-panel-status{
  text-align:right;
  min-width:150px;
}

.gs-wf-status-label{
  font-weight:900;
  opacity:.85;
}

.gs-wf-status-value{
  opacity:.8;
}

.gs-wf-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:12px;
}

/* Mobile */
@media (max-width: 980px){
  .gs-wf-layout{
    grid-template-columns: 1fr;
  }
  .gs-wf-node{ min-width:100px; }
}