/* ═══════════════════════════════════════════════════════════════
   EMPLOYEE ALLOCATION MODULE
   Triangulated view: Plan (Google Sheet) · Assigned (Monday.com) · Actual (NetSuite)

   Prefix: ea-
   Depends on: CSS variables from styles.css (--bg, --surface, --border, --red,
   --muted, --green, --amber, etc.) and the global .page wrapper
   ═══════════════════════════════════════════════════════════════ */

.ea-body {
  flex: 1; overflow-y: auto; padding: 28px 36px;
  display: flex; flex-direction: column; gap: 22px;
}
.ea-body::-webkit-scrollbar { width: 3px; }
.ea-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

/* Shared dot for source-color legends */
.ea-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.ea-dot-plan { background: var(--muted); }
.ea-dot-assigned { background: #2196f3; }
.ea-dot-actual { background: var(--green); }

/* ─── HEADER ─── */
.ea-header { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ea-title-row { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.ea-title { font-family: 'Geist', sans-serif; font-size: 28px; color: var(--text); }
.ea-sub { font-size: 13px; color: var(--muted); }

/* ─── SEARCH ─── */
.ea-search-wrap { position: relative; max-width: 560px; }
.ea-search-input {
  width: 100%; padding: 13px 16px 13px 44px;
  background: var(--surface); border: 1px solid var(--border);
  color: var(--text); border-radius: 8px;
  font-family: 'Geist', sans-serif; font-size: 14px;
  outline: none; transition: border-color .15s;
}
.ea-search-input:focus { border-color: var(--red); }
.ea-search-input::placeholder { color: var(--muted); }
.ea-search-icon {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  font-size: 16px; pointer-events: none; opacity: .5;
}
.ea-search-clear {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: var(--muted); cursor: pointer;
  font-size: 16px; padding: 4px; transition: color .15s; display: none;
}
.ea-search-clear.visible { display: block; }
.ea-search-clear:hover { color: var(--text); }

.ea-dropdown {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; overflow: hidden;
  max-height: 280px; overflow-y: auto;
  box-shadow: 0 16px 40px rgba(0,0,0,.35);
  z-index: 50; display: none;
}
.ea-dropdown.open { display: block; }
.ea-dropdown::-webkit-scrollbar { width: 3px; }
.ea-dropdown::-webkit-scrollbar-thumb { background: var(--border); }
.ea-dd-item {
  padding: 10px 16px; cursor: pointer; border-bottom: 1px solid var(--border);
  transition: background .1s; display: flex; align-items: center; gap: 12px;
}
.ea-dd-item:last-child { border-bottom: none; }
.ea-dd-item:hover, .ea-dd-item.highlighted { background: var(--surface2); }
.ea-dd-name { font-weight: 600; font-size: 13px; color: var(--text); }
.ea-dd-meta { font-size: 11px; color: var(--muted); }
.ea-dd-gap { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--red); }

/* ─── PERIOD CONTROL ─── */
.ea-period-bar {
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  padding: 12px 16px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.ea-period-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; color: var(--muted); }
.ea-period-toggle {
  display: flex; background: var(--bg); border: 1px solid var(--border); border-radius: 7px; overflow: hidden;
}
.ea-period-btn {
  padding: 8px 14px; font-family: 'Geist', sans-serif; font-size: 11px; font-weight: 700;
  background: transparent; border: none; color: var(--muted); cursor: pointer;
  text-transform: uppercase; letter-spacing: .5px;
  border-right: 1px solid var(--border);
  transition: all .15s;
}
.ea-period-btn:last-child { border-right: none; }
.ea-period-btn:hover:not(.active) { color: var(--text); }
.ea-period-btn.active { background: var(--red); color: #ffffff; }
.ea-period-window { margin-left: auto; font-size: 11px; color: var(--muted); }
.ea-period-window strong { color: var(--text); font-weight: 700; }

/* ─── IDENTITY CARD ─── */
.ea-identity-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  padding: 18px 22px; display: flex; align-items: center; gap: 18px; position: relative; overflow: hidden;
}
.ea-identity-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--red);
}
.ea-avatar {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--red); display: flex; align-items: center; justify-content: center;
  font-family: 'Geist', sans-serif; font-weight: 700; font-size: 20px; color: #ffffff;
  letter-spacing: 1px; flex-shrink: 0;
}
.ea-identity-info { flex: 1; min-width: 0; }
.ea-identity-name { font-family: 'Geist', sans-serif; font-size: 22px; color: var(--text); line-height: 1.1; }
.ea-identity-title { font-size: 12px; color: #aaa; margin-top: 3px; }
.ea-identity-tags { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.ea-tag {
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px;
  padding: 3px 8px; border-radius: 3px;
  background: var(--surface2); border: 1px solid var(--border); color: var(--muted);
}
.ea-tag.dept { background: rgba(255,255,255,.04); color: #aaa; }
.ea-tag.office { background: rgba(232,17,45,.08); color: var(--red); border-color: rgba(232,17,45,.2); }

/* ─── SUMMARY STRIP ─── */
.ea-summary {
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px; overflow: hidden;
}
.ea-summary-cell { padding: 16px 20px; border-right: 1px solid var(--border); }
.ea-summary-cell:last-child { border-right: none; }
.ea-summary-cell.alert { background: rgba(232,17,45,.04); }
.ea-summary-lbl {
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px;
  color: var(--muted); margin-bottom: 6px; display: flex; align-items: center; gap: 6px;
}
.ea-summary-val {
  font-family: 'Bebas Neue', sans-serif; font-size: 32px; line-height: 1; color: var(--text);
  letter-spacing: .5px;
}
.ea-summary-val.red { color: var(--red); }
.ea-summary-val.green { color: var(--green); }
.ea-summary-val.amber { color: var(--amber); }
.ea-summary-sub { font-size: 10px; color: var(--muted2); margin-top: 4px; }

/* "No timesheets" warning pill next to the Actual label */
.ea-no-ts-flag {
  display: inline-flex; align-items: center; gap: 4px;
  margin-left: auto;
  font-size: 9px; font-weight: 700; letter-spacing: .5px;
  color: var(--amber); background: rgba(212,146,10,.1);
  border: 1px solid rgba(212,146,10,.3); border-radius: 3px;
  padding: 2px 6px; text-transform: none;
}
.ea-currency {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 9px; color: var(--muted); margin-top: 6px;
  padding: 2px 6px; background: var(--bg); border: 1px solid var(--border); border-radius: 3px;
}
.ea-currency-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--green); flex-shrink: 0; }
.ea-currency-dot.partial { background: var(--amber); }
.ea-currency-dot.derived { background: var(--muted); }

/* ─── SECTION ─── */
.ea-section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 10px; flex-wrap: wrap; gap: 10px;
}
.ea-section-title { font-family: 'Geist', sans-serif; font-size: 16px; color: var(--text); }
.ea-section-meta { font-size: 11px; color: var(--muted2); margin-top: 3px; }
.ea-legend { display: flex; gap: 12px; font-size: 10px; color: var(--muted); }
.ea-legend-item { display: flex; align-items: center; gap: 5px; }
.ea-legend-dot { width: 9px; height: 9px; border-radius: 2px; flex-shrink: 0; }

/* ─── CLIENT ALLOCATION TABLE ─── */
.ea-table {
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px; overflow: hidden;
}
.ea-row {
  display: grid; grid-template-columns: 130px 1fr 120px;
  gap: 16px; padding: 14px 18px; align-items: center;
  border-bottom: 1px solid var(--border); position: relative;
}
.ea-row:last-child { border-bottom: none; }
.ea-row.flag-red { background: linear-gradient(90deg, rgba(232,17,45,.06) 0%, transparent 60%); }
.ea-row::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; }
.ea-row.flag-red::before { background: var(--red); }
.ea-row.flag-amber::before { background: var(--amber); }
.ea-row.flag-green::before { background: var(--green); }

.ea-client-code {
  font-family: 'Bebas Neue', sans-serif; font-size: 18px; color: var(--text);
  letter-spacing: 1px; line-height: 1;
}
.ea-client-name { font-size: 10px; color: var(--muted); margin-top: 3px; line-height: 1.3; }

.ea-bars { display: flex; flex-direction: column; gap: 5px; }
.ea-bar-row { display: grid; grid-template-columns: 70px 1fr 50px; gap: 10px; align-items: center; }
.ea-bar-lbl {
  color: var(--muted); text-transform: uppercase; letter-spacing: .5px;
  font-weight: 700; font-size: 9px;
}
.ea-bar-track {
  background: var(--bg); height: 14px; border-radius: 3px;
  position: relative; border: 1px solid var(--border); overflow: hidden;
}
.ea-bar-fill { height: 100%; border-radius: 2px; transition: width .5s cubic-bezier(.4,0,.2,1); }
.ea-bar-fill.plan { background: #666; }
.ea-bar-fill.assigned { background: #2196f3; }
.ea-bar-fill.actual { background: var(--green); }
.ea-bar-fill.zero {
  background: repeating-linear-gradient(45deg, var(--surface2), var(--surface2) 3px, var(--border) 3px, var(--border) 6px);
  width: 100% !important; opacity: .5;
}
.ea-bar-num {
  font-family: 'Bebas Neue', sans-serif; font-size: 14px; color: var(--text);
  text-align: right; letter-spacing: .3px;
}
.ea-bar-num.zero { color: var(--muted2); }

.ea-verdict { text-align: right; }
.ea-verdict-tag {
  display: inline-block; font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .6px;
  padding: 3px 8px; border-radius: 3px;
}
.ea-verdict-tag.red { background: rgba(232,17,45,.12); color: #ff5a6f; border: 1px solid rgba(232,17,45,.3); }
.ea-verdict-tag.amber { background: rgba(212,146,10,.12); color: var(--amber); border: 1px solid rgba(212,146,10,.3); }
.ea-verdict-tag.green { background: rgba(76,175,125,.1); color: var(--green); border: 1px solid rgba(76,175,125,.3); }
.ea-verdict-detail { font-size: 10px; color: var(--muted); margin-top: 4px; }

/* ─── TREND CHART ─── */
.ea-trend-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: 18px 22px;
}
.ea-trend-svg { width: 100%; height: auto; max-height: 280px; display: block; margin-top: 10px; }
.ea-trend-x { font-size: 11px; fill: var(--muted); font-family: 'Geist', sans-serif; }
.ea-trend-y { font-size: 11px; fill: var(--muted); font-family: 'Geist', sans-serif; }
.ea-trend-grid { stroke: var(--border); stroke-width: 1; }
.ea-trend-future { stroke: var(--muted2); stroke-width: 1; stroke-dasharray: 3,3; }

/* ─── ANOMALY FLAGS ─── */
.ea-flags { display: flex; flex-direction: column; gap: 8px; }
.ea-flag {
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  padding: 12px 16px; display: flex; align-items: flex-start; gap: 12px;
  border-left: 3px solid var(--border);
}
.ea-flag.red { border-left-color: var(--red); }
.ea-flag.amber { border-left-color: var(--amber); }
.ea-flag-icon { font-size: 14px; flex-shrink: 0; margin-top: 1px; }
.ea-flag.red .ea-flag-icon { color: var(--red); }
.ea-flag.amber .ea-flag-icon { color: var(--amber); }
.ea-flag-body { font-size: 12px; color: #ccc; line-height: 1.5; }
.ea-flag-body strong { color: var(--text); font-weight: 700; }
.ea-flag-meta { font-size: 10px; color: var(--muted2); margin-top: 3px; }

/* ─── EMPTY STATE (no employee selected) ─── */
.ea-empty {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: 28px;
}
.ea-empty-title { font-family: 'Geist', sans-serif; font-size: 18px; color: var(--text); margin-bottom: 4px; }
.ea-empty-sub { font-size: 12px; color: var(--muted); margin-bottom: 18px; }
.ea-leaderboard { display: flex; flex-direction: column; gap: 6px; }
.ea-lb-item {
  display: grid; grid-template-columns: 24px 1fr 90px 80px;
  gap: 12px; align-items: center;
  padding: 10px 14px; background: var(--surface2); border: 1px solid var(--border);
  border-radius: 6px; cursor: pointer; transition: all .15s;
}
.ea-lb-item:hover { border-color: var(--muted2); background: var(--surface2); }
.ea-lb-rank { font-family: 'Bebas Neue', sans-serif; font-size: 16px; color: var(--muted); letter-spacing: 1px; }
.ea-lb-name { font-size: 13px; color: var(--text); font-weight: 600; }
.ea-lb-meta { font-size: 10px; color: var(--muted); margin-top: 1px; }
.ea-lb-reason { font-size: 10px; color: var(--muted); text-align: right; text-transform: uppercase; letter-spacing: .5px; font-weight: 700; }
.ea-lb-gap { font-family: 'Bebas Neue', sans-serif; font-size: 18px; color: var(--red); text-align: right; letter-spacing: .5px; }