/* ═══════════════════════════════════════════════════════════════
   earnings.css — Earnings Calendar page styles
   Requires: theme.css
═══════════════════════════════════════════════════════════════ */

/* ── Page layout ─────────────────────────────────────────────── */
.ec-page { max-width: 1280px; margin: 0 auto; padding: 28px 20px 80px; }

/* ── Header ──────────────────────────────────────────────────── */
.ec-header { display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: 28px; gap: 16px; flex-wrap: wrap; }
.ec-header-left h1 { font-size: 24px; font-weight: 700; color: var(--text);
  letter-spacing: -.5px; margin: 0 0 4px; }
.ec-header-left p { font-size: 13px; color: var(--text2); margin: 0; }

/* ── Week navigation ─────────────────────────────────────────── */
.ec-week-nav { display: flex; align-items: center; gap: 10px; }
.ec-week-label { font-size: 14px; font-weight: 600; color: var(--text);
  min-width: 210px; text-align: center; }
.ec-nav-btn { background: var(--surface2); border: 1px solid var(--border);
  color: var(--text2); border-radius: 7px; padding: 7px 13px; font-size: 15px;
  cursor: pointer; font-family: var(--body); line-height: 1;
  transition: border-color .15s, color .15s; }
.ec-nav-btn:hover { border-color: var(--accent); color: var(--text); }

/* ── Week grid (5 columns) ───────────────────────────────────── */
.ec-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; align-items: start; }
@media (max-width: 960px)  { .ec-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px)  { .ec-grid { grid-template-columns: 1fr; } }

/* ── Day column ──────────────────────────────────────────────── */
.ec-day-col { display: flex; flex-direction: column; gap: 7px; min-width: 0; }

.ec-day-head { background: var(--surface2); border: 1px solid var(--border);
  border-radius: 9px; padding: 9px 12px; text-align: center;
  margin-bottom: 2px; }
.ec-day-head.ec-today { border-color: var(--accent); }
.ec-day-head.ec-today .ec-day-name { color: var(--accent); }

.ec-day-name { font-size: 10px; font-weight: 700; color: var(--text2);
  text-transform: uppercase; letter-spacing: .07em; }
.ec-day-date { font-size: 17px; font-weight: 700; color: var(--text);
  line-height: 1.3; margin-top: 1px; }
.ec-day-count { font-size: 10px; color: var(--text3); margin-top: 2px; }

/* ── Earnings card ───────────────────────────────────────────── */
.ec-card { background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: 11px 13px; display: block; text-decoration: none;
  color: inherit; transition: border-color .15s; }
.ec-card:hover { border-color: var(--accent-border); }

.ec-card-top { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 9px; }
.ec-logo { width: 28px; height: 28px; border-radius: 6px; object-fit: contain;
  background: var(--surface2); flex-shrink: 0; }
.ec-logo-ph { width: 28px; height: 28px; border-radius: 6px; background: var(--surface2);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: var(--text2); flex-shrink: 0; }
.ec-card-meta { flex: 1; min-width: 0; }
.ec-card-ticker { font-size: 13px; font-weight: 700; color: var(--text); line-height: 1.2; }
.ec-card-name   { font-size: 10px; color: var(--text2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.ec-card-sector { font-size: 9px; color: var(--text3); margin-top: 1px; }

/* ── Time badge ──────────────────────────────────────────────── */
.ec-time { display: inline-flex; align-items: center;
  font-size: 9px; font-weight: 700; padding: 2px 5px; border-radius: 4px;
  letter-spacing: .04em; vertical-align: middle; }
.ec-time-bmo { background: var(--blue-dim);  color: var(--blue);  }
.ec-time-amc { background: var(--amber-dim); color: var(--amber); }
.ec-time-dmh { background: var(--surface2);  color: var(--text3); }

/* ── Card stats row ──────────────────────────────────────────── */
.ec-card-row { display: flex; align-items: center; justify-content: space-between;
  gap: 6px; }
.ec-eps     { font-size: 11px; color: var(--text2); }
.ec-eps-val { font-size: 12px; font-weight: 600; color: var(--text); }
.ec-mktcap  { font-size: 10px; color: var(--text3); margin-top: 4px; }

/* ── TCF Score circle ────────────────────────────────────────── */
.ec-score { display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%; font-size: 11px; font-weight: 700;
  flex-shrink: 0; }
.ec-score-high { background: var(--accent-dim); color: var(--accent); border: 1px solid var(--accent-border); }
.ec-score-mid  { background: var(--amber-dim);  color: var(--amber);  border: 1px solid var(--amber-border);  }
.ec-score-low  { background: var(--red-dim);    color: var(--red);    border: 1px solid var(--red-border);    }
.ec-score-none { background: var(--surface2);   color: var(--text3);  border: 1px solid var(--border); font-size: 9px; }

/* ── Empty / loading / error ─────────────────────────────────── */
.ec-empty { background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  padding: 18px 12px; text-align: center; font-size: 11px; color: var(--text3); }
.ec-loading { text-align: center; padding: 60px 20px; color: var(--text2); font-size: 14px; grid-column: 1/-1; }
.ec-error   { background: var(--red-dim); border: 1px solid var(--red-border); border-radius: 10px;
  padding: 14px 18px; color: var(--red); font-size: 13px; text-align: center; grid-column: 1/-1; }

/* ── CTA banner ──────────────────────────────────────────────── */
.ec-cta { background: var(--surface2); border: 1px solid var(--border);
  border-radius: 12px; padding: 20px 24px; margin-top: 36px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; }
.ec-cta-text h3 { font-size: 15px; font-weight: 700; color: var(--text); margin: 0 0 4px; }
.ec-cta-text p  { font-size: 13px; color: var(--text2); margin: 0; }
.ec-cta-btn { background: var(--accent); color: #fff; padding: 9px 20px;
  border-radius: 8px; font-size: 13px; font-weight: 600; text-decoration: none;
  white-space: nowrap; transition: opacity .15s; }
.ec-cta-btn:hover { opacity: .85; }

/* ── Spinner ─────────────────────────────────────────────────── */
@keyframes ec-spin { to { transform: rotate(360deg); } }
.ec-spinner { display: inline-block; width: 18px; height: 18px;
  border: 2px solid var(--border2); border-top-color: var(--accent);
  border-radius: 50%; animation: ec-spin .7s linear infinite;
  vertical-align: middle; margin-right: 8px; }