/* ═══════════════════════════════════════
   VIEW-SPECIFIC STYLES
   Executive, Sprint (Command Center), Team
   ═══════════════════════════════════════ */

/* ─── Epic List (Expanded under Customer, Exec view) ─── */
.epic-list { background: var(--base); border-top: 1px solid var(--bdr-lt) }
.el-item {
  display: grid; grid-template-columns: 1fr 62px 80px 110px;
  align-items: center; padding: 7px 16px 7px 32px;
  border-bottom: 1px solid var(--bdr-lt); font-size: 12px;
}
.el-item:last-child { border-bottom: none }
.el-name { font-weight: 500; color: var(--tx2) }
.el-meta { font-size: 10px; color: var(--tx3); font-family: var(--fm) }
.el-override {
  font-size: 9px; color: var(--tx4); cursor: pointer;
  margin-left: 6px; padding: 1px 5px; border-radius: 3px;
  border: 1px solid transparent;
}
.el-override:hover { background: var(--card); border-color: var(--bdr); color: var(--tx2) }

/* ─── Vision Items (Exec right panel) ─── */
.vi {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px; background: var(--card);
  border: 1px solid var(--bdr-lt); border-radius: var(--rs);
  margin-bottom: 5px; box-shadow: var(--sh);
  transition: all .15s;
}
.vi:hover { box-shadow: var(--sh-md); transform: translateY(-1px) }
.vi-name { font-size: 12px; font-weight: 500; flex: 1; color: var(--tx) }
.vi-id   { font-size: 10px; font-family: var(--fm); color: var(--tx3) }
.vi-pct  { font-size: 10px; font-family: var(--fm); color: var(--tx3); min-width: 28px; text-align: right }


/* ═══════════════════════════════════════════════════
   SPRINT VIEW — KANBAN BOARD
   Timeline, columns, swimlanes, cards
   ═══════════════════════════════════════════════════ */

.sprint-view { height: 100%; display: flex; flex-direction: column; overflow: hidden }

/* ─── Toolbar Top: Project dropdown + Sprint toggle ─── */
.kb-toolbar-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 20px; background: var(--card);
  border-bottom: 1px solid var(--bdr-lt); flex-shrink: 0;
}
.kb-tt-left { display: flex; align-items: center; gap: 12px }
.kb-tt-right { display: flex; align-items: center; gap: 8px }

.kb-proj-sel {
  padding: 7px 28px 7px 12px; border: 1px solid var(--bdr);
  border-radius: var(--rs); background: var(--card); color: var(--tx);
  font-size: 13px; font-weight: 600; font-family: var(--fd);
  cursor: pointer; outline: none;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2394a3b8'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: calc(100% - 10px) center;
  min-width: 180px; transition: border-color .15s;
}
.kb-proj-sel:hover { border-color: var(--bdr-dk) }
.kb-proj-sel:focus { border-color: var(--sapphire); box-shadow: var(--focus-ring) }

.kb-slot-toggle {
  display: flex; border: 1px solid var(--bdr-lt);
  border-radius: var(--rs); overflow: hidden; box-shadow: var(--sh);
}
.kb-slot-btn {
  padding: 7px 14px; border: none; background: var(--card);
  font-size: 12px; font-weight: 500; font-family: var(--fd);
  color: var(--tx3); cursor: pointer; transition: all .12s;
  display: flex; align-items: center; gap: 5px;
}
.kb-slot-btn + .kb-slot-btn { border-left: 1px solid var(--bdr-lt) }
.kb-slot-btn:hover { background: var(--base2) }
.kb-slot-btn.active {
  background: var(--sapphire); color: white; font-weight: 600;
}
.kb-slot-btn.active:hover { background: var(--sapphire-dk) }
.kb-slot-name {
  font-size: 10px; font-weight: 400; opacity: .8;
  max-width: 140px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
}
.kb-slot-btn.active .kb-slot-name { opacity: .85 }

.kb-settings-btn {
  padding: 7px; border: 1px solid var(--bdr-lt); border-radius: var(--rs);
  background: var(--card); color: var(--tx3); cursor: pointer;
  display: flex; align-items: center; transition: all .12s;
}
.kb-settings-btn:hover { background: var(--base2); color: var(--tx2); border-color: var(--bdr-dk) }

/* ─── Timeline Progress Bar ─── */
.kb-timeline {
  padding: 12px 20px; background: var(--card);
  border-bottom: 1px solid var(--bdr-lt); flex-shrink: 0;
}
.kb-tl-bar {
  display: flex; align-items: center; gap: 12px;
}
.kb-tl-date {
  font-size: 10px; font-weight: 600; font-family: var(--fm);
  color: var(--tx3); white-space: nowrap;
}
.kb-tl-track {
  flex: 1; height: 10px; background: var(--bdr-lt);
  border-radius: 5px; position: relative; overflow: visible;
  display: flex;
}
.kb-tl-seg {
  height: 100%; transition: width .4s cubic-bezier(.16,1,.3,1);
}
.kb-tl-seg:first-child { border-radius: 5px 0 0 5px }
.kb-tl-seg:last-of-type { border-radius: 0 5px 5px 0 }
.kb-tl-done { background: var(--emerald) }
.kb-tl-prog { background: var(--sapphire) }
.kb-tl-todo { background: var(--bdr) }

.kb-tl-needle {
  position: absolute; top: -4px; z-index: 2;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center;
}
.kb-tl-needle-line {
  width: 2px; height: 18px; background: var(--ruby);
  border-radius: 1px;
}
.kb-tl-needle-label {
  font-size: 8px; font-weight: 700; color: var(--ruby);
  font-family: var(--fd); text-transform: uppercase;
  letter-spacing: .04em; margin-top: 1px;
}

.kb-days-ok {
  font-size: 10px; font-weight: 600; color: var(--emerald);
  font-family: var(--fm); white-space: nowrap;
}
.kb-days-urgent {
  font-size: 10px; font-weight: 600; color: var(--amber);
  font-family: var(--fm); white-space: nowrap;
}
.kb-days-over {
  font-size: 10px; font-weight: 600; color: var(--ruby);
  font-family: var(--fm); white-space: nowrap;
}

.kb-tl-legend {
  display: flex; gap: 14px; margin-top: 6px; padding-left: 2px;
}
.kb-tl-leg-item {
  display: flex; align-items: center; gap: 5px;
  font-size: 10px; color: var(--tx3); font-family: var(--fd);
}
.kb-tl-dot {
  width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0;
}
.kb-tl-dot.kb-tl-done { background: var(--emerald) }
.kb-tl-dot.kb-tl-prog { background: var(--sapphire) }
.kb-tl-dot.kb-tl-todo { background: var(--bdr) }

.kb-tl-empty {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 0; color: var(--tx4); font-size: 11px;
}

/* ─── Toolbar Bottom: Trackers + Swimlane + Capacity ─── */
.kb-toolbar-bottom {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 20px; background: var(--card);
  border-bottom: 1px solid var(--bdr-lt); flex-shrink: 0;
  flex-wrap: wrap; gap: 8px; position: relative;
}
.kb-tb-left { display: flex; align-items: center; gap: 6px; flex-wrap: wrap }
.kb-tb-right { display: flex; align-items: center; gap: 8px }

.kb-tb-sep {
  width: 1px; height: 20px; background: var(--bdr-lt);
  margin: 0 6px; flex-shrink: 0;
}
.kb-tb-label {
  font-size: 10px; font-weight: 600; color: var(--tx3);
  font-family: var(--fd); text-transform: uppercase;
  letter-spacing: .06em;
}
.kb-swim-sel {
  padding: 5px 24px 5px 10px; border: 1px solid var(--bdr);
  border-radius: var(--rs); background: var(--card); color: var(--tx2);
  font-size: 11px; font-weight: 500; font-family: var(--fd);
  cursor: pointer; outline: none;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2394a3b8'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: calc(100% - 8px) center;
}
.kb-swim-sel:focus { border-color: var(--sapphire) }

.kb-cap {
  font-size: 11px; font-weight: 500; font-family: var(--fm);
  color: var(--tx2); cursor: pointer; padding: 5px 10px;
  border: 1px solid var(--bdr-lt); border-radius: var(--rs);
  background: var(--card); transition: all .12s;
  display: flex; align-items: center; gap: 5px;
}
.kb-cap:hover { border-color: var(--sapphire); color: var(--sapphire) }

.kb-wip-btn {
  padding: 6px; border: 1px solid var(--bdr-lt); border-radius: var(--rs);
  background: var(--card); color: var(--tx3); cursor: pointer;
  display: flex; align-items: center; transition: all .12s;
}
.kb-wip-btn:hover { background: var(--base2); color: var(--tx2); border-color: var(--bdr-dk) }

/* Tracker pills (reused from old sprint) */
.sv-tracker-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 12px; border-radius: 99px;
  font-size: 11px; font-weight: 600; font-family: var(--fd);
  border: 1px solid var(--bdr); background: var(--card);
  color: var(--tx3); cursor: pointer;
  transition: all .15s; user-select: none;
}
.sv-tracker-pill:hover { border-color: var(--sapphire); color: var(--sapphire) }
.sv-tracker-pill.active {
  background: var(--sapphire); color: white;
  border-color: var(--sapphire); box-shadow: 0 1px 4px rgba(39,70,194,.25);
}
.sv-tracker-pill svg.lc { opacity: .6 }
.sv-tracker-pill.active svg.lc { opacity: .9 }
.sv-pill-count {
  font-size: 10px; font-family: var(--fm);
  background: rgba(0,0,0,.08); padding: 1px 6px;
  border-radius: 99px; font-weight: 700;
}
.sv-tracker-pill.active .sv-pill-count {
  background: rgba(255,255,255,.25); color: white;
}

/* ─── Kanban Board ─── */
.kb-board-scroll {
  flex: 1; overflow-y: auto; overflow-x: auto;
  padding: 0 0 40px;
}

.kb-empty {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 40px 20px; color: var(--tx4); font-size: 12px;
}

/* Column headers */
.kb-col-headers {
  display: grid; grid-template-columns: repeat(var(--kb-cols, 4), 1fr);
  position: sticky; top: 0; z-index: 3;
  background: var(--navy); min-width: 700px;
}
.kb-col-hd {
  padding: 10px 14px; display: flex; align-items: center;
  justify-content: space-between;
  border-right: 1px solid rgba(255,255,255,.08);
}
.kb-col-hd:last-child { border-right: none }
.kb-col-title {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: #fff; font-family: var(--fd);
}
.kb-col-count {
  font-size: 10px; font-weight: 700; font-family: var(--fm);
  color: rgba(255,255,255,.6); background: rgba(255,255,255,.1);
  padding: 2px 8px; border-radius: 99px;
}
.kb-wip-exceeded {
  background: var(--ruby) !important;
}
.kb-wip-exceeded .kb-col-count {
  background: rgba(255,255,255,.25); color: #fff;
}

/* Columns grid */
.kb-columns {
  display: grid; grid-template-columns: repeat(var(--kb-cols, 4), 1fr);
  min-width: 700px; border-bottom: 1px solid var(--bdr-lt);
}
.kb-column {
  padding: 8px; border-right: 1px solid var(--bdr-lt);
  min-height: 60px; background: var(--base);
}
.kb-column:last-child { border-right: none }
.kb-col-empty { min-height: 40px }

/* ─── Swimlane Headers ─── */
.kb-lane-hd {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px; cursor: pointer;
  background: var(--card); border-bottom: 1px solid var(--bdr-lt);
  border-left: 3px solid var(--bdr);
  transition: background .1s; user-select: none;
  min-width: 700px;
}
.kb-lane-hd:hover { background: var(--card-hover) }

/* Customer accent colors on swimlane headers */
.kb-lane-hd.accent-lenovo     { border-left-color: #e11d27 }
.kb-lane-hd.accent-dell       { border-left-color: #007db8 }
.kb-lane-hd.accent-hp         { border-left-color: #0096d6 }
.kb-lane-hd.accent-cxtec      { border-left-color: #ff6600 }
.kb-lane-hd.accent-reconext   { border-left-color: #00a651 }
.kb-lane-hd.accent-centricsit { border-left-color: #2746c2 }
.kb-lane-hd.accent-apto       { border-left-color: #6366f1 }
.kb-lane-hd.accent-gamespot   { border-left-color: #e11d48 }

.kb-lane-exp {
  color: var(--tx4); transition: transform .2s;
  display: flex; flex-shrink: 0;
}
.kb-lane-exp.open { transform: rotate(90deg); color: var(--sapphire) }

.kb-lane-label {
  font-size: 12px; font-weight: 700; color: var(--tx);
  font-family: var(--fd); flex: 1;
}
.kb-lane-summary {
  font-size: 10px; font-family: var(--fm); color: var(--tx3);
}
.kb-lane-count {
  font-size: 10px; font-weight: 700; font-family: var(--fm);
  color: var(--tx3); background: var(--base2);
  padding: 2px 8px; border-radius: 99px;
}

/* ─── Kanban Cards ─── */
.kb-card {
  background: var(--card); border: 1px solid var(--bdr-lt);
  border-radius: var(--rs); padding: 10px 12px;
  margin-bottom: 6px; cursor: pointer;
  transition: all .15s; position: relative;
  box-shadow: var(--sh);
  animation: rowReveal .25s cubic-bezier(.16,1,.3,1) both;
}
.kb-card:hover {
  box-shadow: var(--sh-md); transform: translateY(-1px);
  border-color: var(--bdr-dk);
}
.kb-card:last-child { margin-bottom: 0 }

/* BP left-accent bar on cards */
.kb-card::before {
  content: ''; position: absolute; left: 0; top: 8px; bottom: 8px;
  width: 3px; border-radius: 0 2px 2px 0;
}
.kb-card.bpa-0::before { background: var(--bp0) }
.kb-card.bpa-1::before { background: var(--bp1) }
.kb-card.bpa-2::before { background: var(--bp2) }
.kb-card.bpa-3::before { background: var(--bp3) }
.kb-card.bpa-4::before { background: var(--bp4) }
.kb-card.bpa-5::before { background: var(--bp5) }

.kb-card-top {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 4px;
}
.kb-card-id {
  font-size: 10px; font-family: var(--fm); color: var(--tx3);
}
.kb-card-trk {
  font-size: 9px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; display: flex; align-items: center; gap: 3px;
}
.kb-trk-story { color: var(--sapphire) }
.kb-trk-task { color: var(--emerald) }
.kb-trk-bug { color: var(--ruby) }
.kb-trk-epic { color: var(--violet) }

.kb-card-title {
  font-size: 12px; font-weight: 600; font-family: var(--fd);
  color: var(--tx); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
  letter-spacing: -.01em;
}
.kb-card-bottom {
  display: flex; align-items: center; gap: 6px;
  margin-top: 8px; flex-wrap: wrap;
}
.kb-card-spacer { flex: 1 }

.kb-card-avatar {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--sapphire-bg); color: var(--sapphire);
  font-size: 9px; font-weight: 700; font-family: var(--fd);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* ─── Popovers (Capacity / WIP) ─── */
.kb-popover {
  position: absolute; right: 20px; top: 100%;
  background: var(--card); border: 1px solid var(--bdr);
  border-radius: var(--r); padding: 16px;
  box-shadow: var(--sh-lg); z-index: 100;
  min-width: 220px;
}
.kb-pop-title {
  font-size: 12px; font-weight: 700; font-family: var(--fd);
  color: var(--tx); margin-bottom: 12px;
  text-transform: uppercase; letter-spacing: .06em;
}
.kb-pop-label {
  display: block; font-size: 11px; font-weight: 500;
  color: var(--tx2); font-family: var(--fd);
  margin-bottom: 8px;
}
.kb-pop-label input {
  display: block; width: 100%; margin-top: 4px;
  padding: 7px 10px; border: 1px solid var(--bdr);
  border-radius: var(--rs); font-size: 12px;
  font-family: var(--fm); color: var(--tx);
  background: var(--base); outline: none;
}
.kb-pop-label input:focus { border-color: var(--sapphire) }
.kb-pop-actions {
  display: flex; gap: 8px; margin-top: 12px;
}
.kb-pop-actions button {
  padding: 6px 14px; border-radius: var(--rs);
  font-size: 11px; font-weight: 600; font-family: var(--fd);
  cursor: pointer; border: none; transition: all .12s;
  background: var(--sapphire); color: white;
}
.kb-pop-actions button:hover { background: var(--sapphire-dk) }
.kb-pop-secondary {
  background: var(--base2) !important; color: var(--tx2) !important;
  border: 1px solid var(--bdr-lt) !important;
}
.kb-pop-secondary:hover { background: var(--bdr-lt) !important }


/* ═══════════════════════════════════════
   RESOURCES & HIGHLIGHTS
   ═══════════════════════════════════════ */

.rg { margin-bottom: 10px }
.rg-head {
  font-size: 11px; font-weight: 700; color: var(--tx2);
  margin-bottom: 5px; display: flex; align-items: center; gap: 5px;
  text-transform: uppercase; letter-spacing: .04em;
  font-family: var(--fd);
}
.rg-cnt { font-size: 10px; font-family: var(--fm); color: var(--tx3); font-weight: 400; text-transform: none; letter-spacing: 0 }
.rg-chips { display: flex; flex-wrap: wrap; gap: 4px }
.rc { font-size: 11px; padding: 4px 11px; border-radius: 99px; background: var(--card); border: 1px solid var(--bdr-lt); color: var(--tx2); font-weight: 400; box-shadow: var(--sh) }

/* Duration grid (Quarterly Highlights) */
.dur { border-top: 1px solid var(--bdr-lt); padding: 16px 20px; flex-shrink: 0 }
.dur-title { font-family: var(--fs); font-size: 16px; font-weight: 500; margin-bottom: 10px; color: var(--tx) }
.dur-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 8px; height: 180px }
.dur-cell { background: var(--card); border: 1px solid var(--bdr-lt); border-radius: var(--rs); padding: 0; display: flex; flex-direction: column; overflow: hidden; box-shadow: var(--sh) }
.dur-cell-top { padding: 5px 10px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; border-bottom: 1px solid var(--bdr-lt); font-family: var(--fd) }
.dur-cell-top.dc-green  { background: var(--emerald-bg); color: var(--emerald) }
.dur-cell-top.dc-blue   { background: var(--sapphire-bg); color: var(--sapphire) }
.dur-cell-top.dc-ruby   { background: var(--ruby-bg); color: var(--ruby) }
.dur-cell-top.dc-purple { background: #f5f3ff; color: #7c3aed }
.dur-cell textarea { flex: 1; border: none; resize: none; font-size: 11px; line-height: 1.5; color: var(--tx2); padding: 8px 10px; outline: none; font-family: var(--f); background: transparent }
.dur-cell textarea::placeholder { color: var(--tx4) }


/* ═══════════════════════════════════════
   TEAM RESOURCE REPORT
   ═══════════════════════════════════════ */

.tm-page { padding: 0; max-width: 1340px; margin: 0 auto }

/* ─── Toolbar ─── */
.tm-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 16px; flex-wrap: wrap;
}
.tm-toolbar-left { display: flex; align-items: center; gap: 12px; flex-wrap: wrap }

.tm-filter-sel {
  padding: 7px 28px 7px 12px;
  border: 1px solid var(--bdr-lt); border-radius: var(--rs);
  background: var(--card); color: var(--tx2);
  font-size: 12px; font-weight: 500; font-family: var(--fd);
  cursor: pointer; outline: none;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2394a3b8'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: calc(100% - 10px) center;
  box-shadow: var(--sh); transition: all .15s; min-width: 180px;
}
.tm-filter-sel:hover { border-color: var(--bdr-dk) }
.tm-filter-sel:focus { border-color: var(--sapphire); box-shadow: var(--focus-ring) }
.tm-filter-sel option { background: var(--card); color: var(--tx) }
.tm-filter-sel--active {
  border-color: var(--sapphire); color: var(--sapphire);
  background-color: var(--sapphire-bg); font-weight: 600;
}

/* Active / Inactive toggle */
.tm-toggle {
  display: flex; border: 1px solid var(--bdr-lt); border-radius: var(--rs);
  overflow: hidden; box-shadow: var(--sh);
}
.tm-toggle-btn {
  padding: 7px 14px; border: none; background: var(--card);
  font-size: 12px; font-weight: 500; font-family: var(--fd);
  color: var(--tx3); cursor: pointer; transition: all .12s;
  display: flex; align-items: center; gap: 5px;
}
.tm-toggle-btn + .tm-toggle-btn { border-left: 1px solid var(--bdr-lt) }
.tm-toggle-btn:hover { background: var(--base2) }
.tm-toggle-active {
  background: var(--sapphire); color: white; font-weight: 600;
}
.tm-toggle-active:hover { background: var(--sapphire-dk) }
.tm-toggle-count {
  font-size: 10px; font-weight: 700; font-family: var(--fm);
  background: rgba(255,255,255,.2); border-radius: 99px;
  padding: 1px 6px; min-width: 18px; text-align: center;
}
.tm-toggle-btn:not(.tm-toggle-active) .tm-toggle-count {
  background: var(--base2); color: var(--tx3);
}

/* Add Member button */
.tm-add-btn {
  padding: 7px 16px; border-radius: var(--rs);
  font-size: 12px; font-weight: 600; font-family: var(--fd);
  background: var(--sapphire); color: white;
  border: none; cursor: pointer; transition: all .12s;
  display: flex; align-items: center; gap: 5px;
}
.tm-add-btn:hover { background: var(--sapphire-dk) }

/* ─── Hero Cards ─── */
.tm-hero-row {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 12px; margin-bottom: 16px;
}
.tm-hero {
  position: relative; overflow: hidden;
  background: var(--card); border: 2px solid var(--bdr-lt);
  border-radius: var(--r); padding: 18px 20px 16px;
  box-shadow: var(--sh); transition: all .2s;
}
.tm-hero::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 3px; border-radius: var(--r) var(--r) 0 0;
}
.tm-hero-sapphire { border-color: rgba(39,70,194,.2) }
.tm-hero-sapphire::before { background: var(--sapphire) }
.tm-hero-sapphire .tm-hero-num { color: var(--sapphire) }
.tm-hero-amber { border-color: rgba(217,119,6,.2) }
.tm-hero-amber::before { background: var(--amber) }
.tm-hero-amber .tm-hero-num { color: var(--amber) }
.tm-hero-violet { border-color: rgba(124,58,237,.2) }
.tm-hero-violet::before { background: var(--violet) }
.tm-hero-violet .tm-hero-num { color: var(--violet) }

.tm-hero-bg {
  position: absolute; right: 12px; bottom: 10px;
  opacity: .07; pointer-events: none; line-height: 0;
}
.tm-hero-sapphire .tm-hero-bg { color: var(--sapphire) }
.tm-hero-amber .tm-hero-bg { color: var(--amber) }
.tm-hero-violet .tm-hero-bg { color: var(--violet) }

.tm-hero-label {
  display: flex; align-items: center; gap: 6px;
  font-size: 10.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .7px; color: var(--tx3); margin-bottom: 6px;
  font-family: var(--fd);
}
.tm-hero-dot {
  width: 7px; height: 7px; border-radius: 2px; flex-shrink: 0;
}
.tm-hero-dot.sapphire { background: var(--sapphire) }
.tm-hero-dot.amber { background: var(--amber) }
.tm-hero-dot.violet { background: var(--violet) }

.tm-hero-num {
  font-family: var(--fd); font-size: 42px; font-weight: 700;
  line-height: 1; letter-spacing: -.03em;
}
.tm-hero-sub { font-size: 11px; color: var(--tx3); margin-top: 4px }

/* ─── Grid ─── */
.tm-grid {
  border: 1px solid var(--bdr-lt); border-radius: var(--r);
  overflow: hidden; box-shadow: var(--sh);
}
.tm-grid-hd {
  display: grid;
  grid-template-columns: 70px 1fr 80px 130px 110px 80px 110px 90px;
  padding: 9px 16px; background: var(--navy);
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: #fff; font-family: var(--fd);
  border-radius: var(--rs) var(--rs) 0 0;
}
.tm-grid-hd > span {
  min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.tm-grid-row {
  display: grid;
  grid-template-columns: 70px 1fr 80px 130px 110px 80px 110px 90px;
  padding: 10px 16px; border-top: 1px solid var(--bdr-lt);
  align-items: center; background: var(--card); transition: background .1s;
}
.tm-row-expandable { cursor: pointer }
.tm-row-expandable:hover { background: var(--card-hover) }
.tm-row-expanded { background: var(--base) }
.tm-grid-row > div { min-width: 0; overflow: hidden }

.tm-name {
  font-size: 13px; font-weight: 600; color: var(--tx);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tm-projs {
  font-size: 11px; color: var(--tx3);
  white-space: nowrap; display: flex; align-items: center; gap: 4px;
}
.tm-chevron {
  display: inline-flex; transition: transform .2s; color: var(--tx4);
}
.tm-row-expanded .tm-chevron { transform: rotate(180deg) }
.tm-none { color: var(--tx4); font-size: 11px }

/* Role pill */
.tm-role-pill {
  display: inline-block; border-radius: 99px;
  padding: 2px 10px; font-size: 10px; font-weight: 600;
  font-family: var(--fd); border: 1px solid transparent;
}
.tm-role-dev  { background: var(--sapphire-bg); color: var(--sapphire); border-color: rgba(39,70,194,.2) }
.tm-role-qa   { background: var(--amber-bg);    color: var(--amber);    border-color: rgba(217,119,6,.2) }
.tm-role-pm   { background: var(--violet-bg);   color: var(--violet);   border-color: rgba(124,58,237,.2) }
.tm-role-mgr  { background: var(--emerald-bg);  color: var(--emerald);  border-color: rgba(5,150,105,.2) }
.tm-role-other { background: var(--base2); color: var(--tx3); border-color: var(--bdr-lt) }

/* Status pill */
.tm-status-pill {
  display: inline-block; border-radius: 99px;
  padding: 3px 10px; font-size: 10px; font-weight: 600;
  font-family: var(--fd); border: 1px solid transparent;
}
.tm-s-active     { background-color: var(--emerald-bg); color: var(--emerald);  border-color: rgba(5,150,105,.25) }
.tm-s-notice     { background-color: var(--ruby-bg);    color: var(--ruby);     border-color: rgba(225,29,72,.25) }
.tm-s-sabbatical { background-color: var(--sapphire-bg);color: var(--sapphire); border-color: rgba(39,70,194,.25) }
.tm-s-separated  { background-color: var(--base2);      color: var(--tx4);      border-color: var(--bdr-lt) }

/* Allocation */
.tm-alloc { font-size: 12px; font-weight: 600; font-family: var(--fm); color: var(--tx2) }
.tm-alloc-over { color: var(--ruby) }
.tm-alloc-under { color: var(--amber) }

/* Last Working Day */
.tm-lwd { font-size: 11px; font-family: var(--fm); color: var(--tx3) }

/* Available Days */
.tm-days-num {
  font-size: 13px; font-weight: 700; font-family: var(--fm);
  color: var(--tx);
}

/* Actions */
.tm-actions { display: flex; gap: 4px }
.tm-act-btn {
  background: none; border: 1px solid var(--bdr-lt); border-radius: 6px;
  padding: 4px; cursor: pointer; color: var(--tx3);
  display: flex; align-items: center; transition: all .1s;
}
.tm-act-btn:hover { background: var(--base2); color: var(--tx); border-color: var(--bdr-dk) }
.tm-act-del:hover { color: var(--ruby); border-color: rgba(225,29,72,.3); background: var(--ruby-bg) }

/* Expandable sub-rows */
.tm-sub-row {
  display: grid;
  grid-template-columns: 70px 1fr 80px 130px 110px 80px 110px 90px;
  padding: 6px 16px 6px 32px; border-top: 1px solid var(--bdr-lt);
  align-items: center; background: var(--base);
  font-size: 11px; color: var(--tx3);
}
.tm-sub-proj { font-weight: 500; color: var(--tx2) }
.tm-sub-alloc { font-family: var(--fm); font-weight: 500 }
.tm-sub-days { font-family: var(--fm); font-weight: 600; color: var(--tx2) }

/* Empty & Loading */
.tm-grid-empty {
  display: flex; align-items: center; gap: 8px;
  padding: 32px 16px; color: var(--tx4); font-size: 12px;
  background: var(--card);
}
.tm-loading {
  display: flex; align-items: center; gap: 10px;
  padding: 32px 24px; color: var(--tx3); font-size: 12px;
}

/* ─── Team Side Panel Form ─── */
.tp-form { display: flex; flex-direction: column; gap: 14px }
.tp-field label {
  display: block; font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--tx3); margin-bottom: 4px; font-family: var(--fd);
}
.tp-field input[type="text"],
.tp-field input[type="date"],
.tp-field select {
  width: 100%; padding: 8px 10px;
  border: 1px solid var(--bdr); border-radius: var(--rs);
  font-size: 12px; color: var(--tx); background: var(--card);
  font-family: var(--fd); outline: none; transition: border-color .15s;
}
.tp-field input:focus,
.tp-field select:focus {
  border-color: var(--sapphire);
  box-shadow: 0 0 0 3px rgba(39,70,194,.08);
}

.tp-section { border-top: 1px solid var(--bdr-lt); padding-top: 14px }
.tp-section-hd {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.tp-section-hd label {
  font-size: 9px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--tx3); font-family: var(--fd);
}
.tp-add-proj {
  display: flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: var(--rs);
  font-size: 11px; font-weight: 500; font-family: var(--fd);
  border: 1px solid var(--bdr-lt); background: transparent;
  color: var(--sapphire); cursor: pointer; transition: all .12s;
}
.tp-add-proj:hover { background: var(--sapphire-bg); border-color: var(--sapphire) }

.tp-proj-row {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 6px;
}
.tp-proj-sel {
  flex: 1; padding: 7px 10px;
  border: 1px solid var(--bdr); border-radius: var(--rs);
  font-size: 12px; color: var(--tx); background: var(--card);
  font-family: var(--fd); outline: none;
}
.tp-proj-sel:focus { border-color: var(--sapphire) }
.tp-alloc-wrap {
  display: flex; align-items: center; gap: 2px;
  position: relative; width: 70px;
}
.tp-alloc-inp {
  width: 100%; padding: 7px 22px 7px 10px;
  border: 1px solid var(--bdr); border-radius: var(--rs);
  font-size: 12px; color: var(--tx); background: var(--card);
  font-family: var(--fm); outline: none; text-align: right;
}
.tp-alloc-inp:focus { border-color: var(--sapphire) }
.tp-alloc-pct {
  position: absolute; right: 8px;
  font-size: 11px; color: var(--tx3); font-family: var(--fm);
  pointer-events: none;
}
.tp-rm-proj {
  background: none; border: 1px solid var(--bdr-lt); border-radius: 6px;
  padding: 5px; cursor: pointer; color: var(--tx4);
  display: flex; align-items: center; transition: all .1s;
}
.tp-rm-proj:hover { color: var(--ruby); border-color: rgba(225,29,72,.3); background: var(--ruby-bg) }

.tp-hint { font-size: 11px; color: var(--tx4); padding: 8px 0 }

.tp-footer {
  padding: 14px 18px; border-top: 1px solid var(--bdr-lt);
  display: flex; justify-content: flex-end; gap: 8px;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════
   GEO COVERAGE
   ═══════════════════════════════════════ */

.ge-page { max-width: 1340px; margin: 0 auto }

/* ─── Hero Strip ─── */
.ge-hero-strip { display: flex; gap: 12px; margin-bottom: 20px; flex-wrap: wrap }
.ge-hero {
  flex: 1; min-width: 160px; padding: 18px 20px;
  background: var(--card); border: 1px solid var(--bdr-lt);
  border-radius: var(--r); cursor: pointer;
  transition: all .15s; position: relative; overflow: hidden;
  box-shadow: var(--sh);
}
.ge-hero:hover { border-color: var(--bdr-dk); box-shadow: var(--sh-md) }
.ge-hero.active { border-width: 2px }
.ge-hero-icon { color: var(--tx3); margin-bottom: 8px }
.ge-hero-val { font-size: 28px; font-weight: 700; font-family: var(--fm); line-height: 1 }
.ge-hero-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--tx2); margin-top: 6px; font-family: var(--fd) }
.ge-hero-sub { font-size: 10px; color: var(--tx3); margin-top: 2px }

.ge-hero-sapphire .ge-hero-val { color: var(--sapphire) }
.ge-hero-sapphire .ge-hero-icon { color: var(--sapphire) }
.ge-hero-sapphire.active { border-color: var(--sapphire-bdr); background: var(--sapphire-bg) }

.ge-hero-emerald .ge-hero-val { color: var(--emerald) }
.ge-hero-emerald .ge-hero-icon { color: var(--emerald) }
.ge-hero-emerald.active { border-color: var(--emerald-bdr); background: var(--emerald-bg) }

.ge-hero-amber .ge-hero-val { color: var(--amber) }
.ge-hero-amber .ge-hero-icon { color: var(--amber) }
.ge-hero-amber.active { border-color: var(--amber-bdr); background: var(--amber-bg) }

.ge-hero-violet .ge-hero-val { color: var(--violet) }
.ge-hero-violet .ge-hero-icon { color: var(--violet) }
.ge-hero-violet.active { border-color: var(--violet-bdr); background: var(--violet-bg) }

/* ─── Map ─── */
.ge-map-wrap {
  position: relative; margin-bottom: 20px;
  background: var(--card); border: 1px solid var(--bdr-lt);
  border-radius: var(--r); padding: 20px 16px 12px;
  box-shadow: var(--sh); overflow: hidden;
}
.ge-map-inner { line-height: 0 }
.ge-map-inner svg { width: 100%; height: auto; max-height: 300px }
.ge-map-inner .ge-bg path { fill: var(--bdr-lt); stroke: var(--card); stroke-width: .5; pointer-events: none }
.ge-map-inner .ge-countries path,
.ge-map-inner .ge-countries circle { fill: var(--bdr-lt); stroke: var(--card); stroke-width: .5; transition: fill .2s }
.ge-map-inner [data-has-data]:hover { opacity: .75; stroke: var(--sapphire); stroke-width: 1.5 }

.ge-tooltip {
  position: absolute; pointer-events: none;
  background: var(--navy); color: #fff; padding: 8px 14px;
  border-radius: var(--rs); font-size: 11px; font-family: var(--fd);
  box-shadow: var(--sh-md); z-index: 10; opacity: 0;
  transition: opacity .15s; white-space: nowrap; line-height: 1.5;
}
.ge-tooltip.visible { opacity: 1 }

/* ─── Toolbar ─── */
.ge-toolbar {
  display: flex; align-items: center; gap: 14px;
  padding: 0 0 16px; flex-wrap: wrap;
}
.ge-toolbar-group { display: flex; align-items: center; gap: 6px }
.ge-toolbar-label {
  font-size: 9px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--tx3); font-family: var(--fd);
  margin-right: 2px;
}
.ge-search-wrap { position: relative; display: flex; align-items: center }
.ge-search-icon { position: absolute; left: 10px; color: var(--tx4); pointer-events: none }
.ge-search {
  padding: 7px 12px 7px 32px; border: 1px solid var(--bdr-lt);
  border-radius: var(--rs); font-size: 12px; color: var(--tx);
  background: var(--card); font-family: var(--f);
  outline: none; min-width: 220px; transition: border-color .15s;
}
.ge-search:focus { border-color: var(--sapphire); box-shadow: var(--focus-ring) }
.ge-search::placeholder { color: var(--tx4) }

.ge-pill {
  padding: 5px 12px; border-radius: 99px; border: 1px solid var(--bdr-lt);
  font-size: 11px; font-weight: 600; color: var(--tx2); cursor: pointer;
  background: var(--card); font-family: var(--fd); transition: all .12s;
}
.ge-pill:hover { border-color: var(--bdr-dk); background: var(--base2) }
.ge-pill.active { background: var(--navy); color: #fff; border-color: var(--navy) }

.ge-sort {
  padding: 5px 10px; border-radius: var(--rs); border: 1px solid var(--bdr-lt);
  font-size: 11px; color: var(--tx2); background: var(--card);
  font-family: var(--fd); cursor: pointer; outline: none;
}
.ge-sort:focus { border-color: var(--sapphire) }

/* ─── Column Header ─── */
.ge-col-hd {
  display: grid; grid-template-columns: 40px 1fr 72px 72px 72px 1.2fr 28px;
  padding: 9px 16px; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: #fff; font-family: var(--fd);
  background: var(--navy); border-radius: var(--rs) var(--rs) 0 0;
}
.ge-col-hd span:nth-child(n+3):nth-child(-n+5) { text-align: center }

/* ─── Region Headers ─── */
.ge-region-hd {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px; cursor: pointer;
  background: var(--base2); border-bottom: 1px solid var(--bdr-lt);
  transition: background .1s; user-select: none;
}
.ge-region-hd:hover { background: var(--card-hover) }
.ge-region-ttl {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--tx2); flex: 1; font-family: var(--fd);
}
.ge-region-cnt {
  font-size: 10px; font-family: var(--fm); color: var(--tx3);
  background: var(--base); padding: 2px 8px; border-radius: 99px;
}
.ge-region-chev { color: var(--tx4); display: flex; transition: transform .15s }

/* ─── Country Rows ─── */
.ge-country-row {
  display: grid; grid-template-columns: 40px 1fr 72px 72px 72px 1.2fr 28px;
  padding: 10px 16px; border-bottom: 1px solid var(--bdr-lt);
  align-items: center; background: var(--card);
  cursor: pointer; transition: background .1s; user-select: none;
}
.ge-country-row:hover { background: var(--card-hover) }
.ge-country-row.expanded { background: var(--base); font-weight: 600 }
.ge-flag { font-size: 18px; text-align: center }
.ge-cname { font-size: 13px; font-weight: 500; color: var(--tx); font-family: var(--fd) }
.ge-cnt { font-size: 12px; font-weight: 600; font-family: var(--fm); color: var(--tx2); text-align: center }
.ge-cnt-client { color: var(--emerald) }
.ge-cnt-enterprise { color: var(--amber) }
.ge-top-sites {
  font-size: 11px; color: var(--tx3); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; font-family: var(--f);
}
.ge-chev { color: var(--tx4); display: flex; justify-content: center; transition: transform .2s }
.ge-country-row.expanded .ge-chev { transform: rotate(180deg) }

/* ─── Nested Site Table ─── */
.ge-sites-wrap {
  border-bottom: 1px solid var(--bdr-lt); background: var(--base);
  border-left: 3px solid var(--sapphire-bg);
}
.ge-site-hd {
  display: grid; grid-template-columns: 1.5fr .7fr .8fr .7fr .8fr;
  padding: 7px 16px 7px 56px; font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: #fff; font-family: var(--fd);
  background: rgba(15,23,42,.85);
}
.ge-site-row {
  display: grid; grid-template-columns: 1.5fr .7fr .8fr .7fr .8fr;
  padding: 7px 16px 7px 56px; font-size: 12px;
  border-bottom: 1px solid var(--bdr-lt); color: var(--tx2);
}
.ge-site-row:last-child { border-bottom: none }
.ge-site-name { font-weight: 500; color: var(--tx) }
.ge-site-name mark { background: var(--amber-bg); color: var(--amber); border-radius: 2px; padding: 0 2px }

.ge-type-pill {
  display: inline-block; padding: 1px 8px; border-radius: 99px;
  font-size: 10px; font-weight: 600; font-family: var(--fd);
}
.ge-type-client { background: var(--emerald-bg); color: var(--emerald) }
.ge-type-enterprise { background: var(--amber-bg); color: var(--amber) }
.ge-method { font-size: 11px; color: var(--tx3) }
.ge-date { font-size: 11px; font-family: var(--fm); color: var(--tx3) }
.ge-divider { border-top: 1px dashed var(--bdr); margin: 0 }

/* ─── Dark Mode Adjustments ─── */
[data-theme="dark"] .ge-map-inner .ge-bg path { fill: var(--base2); stroke: var(--bdr) }
[data-theme="dark"] .ge-map-inner .ge-countries path,
[data-theme="dark"] .ge-map-inner .ge-countries circle { fill: var(--base2); stroke: var(--bdr) }
[data-theme="dark"] .ge-tooltip { background: var(--card); border: 1px solid var(--bdr); color: var(--tx) }

/* ─── Geo: Add Button & Row Actions ─── */
.ge-add-btn {
  margin-left: auto; display: flex; align-items: center; gap: 6px;
  padding: 7px 16px; border-radius: var(--rs);
  font-size: 11px; font-weight: 600; font-family: var(--fd);
  background: var(--sapphire); color: #fff;
  border: none; cursor: pointer; transition: background .12s;
  white-space: nowrap;
}
.ge-add-btn:hover { filter: brightness(1.1) }
.ge-row-actions { display: flex; gap: 2px; margin-left: auto; flex-shrink: 0 }
.ge-act-btn {
  background: none; border: none; cursor: pointer;
  color: var(--tx3); padding: 3px 5px; border-radius: 4px;
  display: flex; align-items: center; transition: all .1s;
}
.ge-act-btn:hover { background: var(--base2); color: var(--tx) }
.ge-act-del:hover { color: var(--ruby) }

/* ─── Geo: Side Panel Site Cards ─── */
.gp-site-card {
  border: 1px solid var(--bdr-lt); border-radius: var(--rs);
  padding: 10px 12px; margin-bottom: 8px; background: var(--base);
}
.gp-site-hd {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 8px;
}
.gp-site-num {
  font-size: 9px; font-weight: 700; color: var(--tx3);
  text-transform: uppercase; letter-spacing: .06em; font-family: var(--fd);
}
.gp-site-fields {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.gp-site-fields .tp-field:first-child { grid-column: 1 / -1 }