/*
 * AXION ECONOMIC CALENDAR — Bloomberg-Grade Institutional Layout
 * JetBrains Mono for numbers, Inter for prose, dual-time WIB+GMT
 */

/* ── Wrapper ── */
.mc-cal-wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  font-family: var(--mono, 'JetBrains Mono', monospace);
  background: var(--bg, #0a0a0f);
  position: relative;
  height: calc(100vh - 180px);
}

/* ── Sticky Header ── */
.mc-cal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border, #1a1a2e);
  background: var(--bg, #0a0a0f);
  flex-shrink: 0;
  z-index: 20;
}
.mc-cal-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--t1, #e8e8f0);
  letter-spacing: 0.8px;
}
.mc-cal-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 9px;
  color: var(--t3, #555568);
}
.mc-meta-sep { opacity: 0.4; }
.mc-status-chip {
  padding: 2px 8px;
  border-radius: 2px;
  font-weight: 600;
  font-size: 9px;
  letter-spacing: 0.5px;
}
.mc-status-live { background: rgba(0,200,83,0.12); color: #00c853; border: 1px solid rgba(0,200,83,0.25); }
.mc-status-stale { background: rgba(255,183,0,0.12); color: #ffb700; border: 1px solid rgba(255,183,0,0.25); }
.mc-status-offline { background: rgba(255,42,85,0.12); color: #ff2a55; border: 1px solid rgba(255,42,85,0.25); }

/* ── Countdown Bar ── */
.mc-countdown-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border, #1a1a2e);
  background: linear-gradient(90deg, rgba(198,227,16,0.04) 0%, transparent 60%);
  flex-shrink: 0;
  min-height: 36px;
}
.mc-countdown-icon {
  font-size: 14px;
  opacity: 0.7;
}
.mc-countdown-label {
  font-size: 9px;
  color: var(--t3, #555568);
  letter-spacing: 0.6px;
  font-weight: 600;
  text-transform: uppercase;
}
.mc-countdown-digits {
  font-size: 16px;
  font-weight: 700;
  color: var(--accent, #c6e310);
  font-variant-numeric: tabular-nums;
  letter-spacing: 1px;
  min-width: 80px;
}
.mc-countdown-event {
  font-size: 11px;
  color: var(--t1, #e8e8f0);
  font-weight: 500;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mc-countdown-time {
  font-size: 9px;
  color: var(--t3, #555568);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.mc-countdown-pulse {
  animation: mc-bar-pulse 2s ease-in-out infinite;
}
@keyframes mc-bar-pulse {
  0%,100% { background: linear-gradient(90deg, rgba(255,42,85,0.06) 0%, transparent 60%); }
  50% { background: linear-gradient(90deg, rgba(255,42,85,0.14) 0%, transparent 60%); }
}

/* ── Filter Bar ── */
.mc-filter-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 6px 14px;
  border-bottom: 1px solid var(--border, #1a1a2e);
  background: rgba(255,255,255,0.012);
  flex-shrink: 0;
  overflow-x: auto;
}
.mc-fgroup {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.mc-flabel {
  font-size: 9px;
  color: var(--t3, #555568);
  letter-spacing: 0.7px;
  margin-right: 2px;
  font-weight: 600;
}
.mc-fbtn {
  background: transparent;
  border: 1px solid var(--border, #1a1a2e);
  color: var(--t3, #555568);
  padding: 3px 10px;
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 9px;
  cursor: pointer;
  border-radius: 2px;
  transition: all 0.15s;
  line-height: 1.4;
  font-weight: 500;
}
.mc-fbtn:hover { border-color: var(--accent, #c6e310); color: var(--t1, #e8e8f0); }
.mc-fbtn.active { background: var(--accent, #c6e310); color: #000; border-color: var(--accent, #c6e310); font-weight: 700; }
.mc-fbtn[data-f="high"].active { background: #ff2a55; border-color: #ff2a55; color: #fff; }
.mc-fbtn[data-f="medium"].active { background: #e8a317; border-color: #e8a317; color: #000; }
.mc-fbtn[data-f="low"].active { background: #555568; border-color: #555568; color: #fff; }

/* Currency dropdown */
.mc-cur-dropdown {
  position: relative;
}
.mc-cur-trigger {
  background: transparent;
  border: 1px solid var(--border, #1a1a2e);
  color: var(--t2, #999aaa);
  padding: 3px 10px;
  font-family: var(--mono);
  font-size: 9px;
  cursor: pointer;
  border-radius: 2px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.mc-cur-trigger:hover { border-color: var(--accent); }
.mc-cur-trigger.active { background: var(--accent); color: #000; border-color: var(--accent); font-weight: 700; }

/* ── Scroll Container ── */
.mc-scroll-container {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
}

/* ── Date Group Header ── */
.mc-cal-group {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(10,10,15,0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(198,227,16,0.12);
}
.mc-group-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--accent, #c6e310);
  letter-spacing: 0.8px;
}
.mc-group-date {
  font-family: var(--sans, 'Inter', sans-serif);
  font-size: 11px;
  font-weight: 500;
  color: var(--t1, #e8e8f0);
  opacity: 0.85;
}
.mc-group-count {
  margin-left: auto;
  font-size: 9px;
  color: var(--t3, #555568);
  font-variant-numeric: tabular-nums;
}

/* ── Column Header Row ── */
.mc-col-header {
  display: grid;
  grid-template-columns: 90px 20px 42px 38px minmax(160px, 1fr) 72px 72px 72px 70px;
  gap: 0;
  padding: 5px 14px;
  border-bottom: 1px solid var(--border, #1a1a2e);
  background: var(--bg, #0a0a0f);
  position: sticky;
  top: 0;
  z-index: 11;
}
.mc-col-header span {
  font-size: 8px;
  font-weight: 600;
  color: var(--t3, #555568);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 0 4px;
}
.mc-col-header .mc-col-right {
  text-align: right;
}

/* ── Event Row ── */
.mc-cal-row {
  display: grid;
  grid-template-columns: 90px 20px 42px 38px minmax(160px, 1fr) 72px 72px 72px 70px;
  gap: 0;
  padding: 0 14px;
  height: 36px;
  align-items: center;
  border-bottom: 1px solid rgba(255,255,255,0.03);
  transition: background 0.1s;
  cursor: pointer;
  position: relative;
  font-feature-settings: "tnum" 1, "ss01" 1;
}
.mc-cal-row:hover {
  background: rgba(255,255,255,0.035);
}
/* Impact left border */
.mc-cal-row.mc-imp-3 { border-left: 2px solid #ff2a55; }
.mc-cal-row.mc-imp-2 { border-left: 2px solid #e8a317; }
.mc-cal-row.mc-imp-1 { border-left: 2px solid transparent; }
.mc-cal-row.mc-imp-0 { border-left: 2px solid transparent; opacity: 0.55; }

/* Holiday row */
.mc-cal-row.mc-holiday {
  opacity: 0.45;
  font-style: italic;
}

/* ── Time Cell ── */
.mc-cal-time {
  display: flex;
  flex-direction: column;
  padding: 0 4px;
  overflow: hidden;
}
.mc-time-wib {
  font-size: 11px;
  font-weight: 600;
  color: var(--t1, #e8e8f0);
  opacity: 0.95;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.mc-time-gmt {
  font-size: 8px;
  color: var(--t3, #555568);
  opacity: 0.55;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ── Flag Cell ── */
.mc-cal-flag {
  font-size: 13px;
  text-align: center;
  line-height: 1;
}

/* ── Currency Cell ── */
.mc-cal-cur {
  font-size: 10px;
  font-weight: 700;
  color: var(--t1, #e8e8f0);
  opacity: 0.92;
  letter-spacing: 0.4px;
  padding: 0 2px;
}

/* ── Impact Dots ── */
.mc-cal-impact {
  display: flex;
  gap: 2px;
  padding: 0 4px;
  align-items: center;
}
.mc-imp-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  flex-shrink: 0;
}
.mc-imp-3 .mc-imp-dot { background: #ff2a55; box-shadow: 0 0 4px rgba(255,42,85,0.4); }
.mc-imp-2 .mc-imp-dot:nth-child(1),
.mc-imp-2 .mc-imp-dot:nth-child(2) { background: #e8a317; }
.mc-imp-2 .mc-imp-dot:nth-child(3) { background: rgba(255,255,255,0.08); }
.mc-imp-1 .mc-imp-dot:nth-child(1) { background: #555568; }
.mc-imp-1 .mc-imp-dot:nth-child(2),
.mc-imp-1 .mc-imp-dot:nth-child(3) { background: rgba(255,255,255,0.08); }

/* ── Event Name Cell ── */
.mc-cal-event {
  font-family: var(--sans, 'Inter', sans-serif);
  font-size: 12px;
  font-weight: 500;
  color: var(--t1, #e8e8f0);
  opacity: 0.92;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 8px 0 4px;
}

/* ── Numeric Value Cells ── */
.mc-cal-prev, .mc-cal-fcst, .mc-cal-act {
  font-size: 11px;
  font-weight: 600;
  color: var(--t2, #999aaa);
  text-align: right;
  font-variant-numeric: tabular-nums;
  padding: 0 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mc-cal-act { color: var(--t1, #e8e8f0); }

/* Surprise colors */
.mc-surprise-green { color: #00c853 !important; }
.mc-surprise-red { color: #ff2a55 !important; }
.mc-surprise-neutral { color: var(--t1, #e8e8f0) !important; }

/* ── Relative Time Label ── */
.mc-cal-rel {
  font-size: 9px;
  color: var(--t3, #555568);
  text-align: right;
  padding: 0 4px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mc-cal-rel.mc-rel-live {
  color: #00c853;
  font-weight: 700;
}
.mc-cal-rel.mc-rel-soon {
  color: #e8a317;
}

/* ── Flash animation on update ── */
@keyframes mc-flash-update {
  0% { background: rgba(198,227,16,0.15); }
  100% { background: transparent; }
}
.mc-flash-update {
  animation: mc-flash-update 0.5s ease-out;
}

/* ── Empty state ── */
.mc-cal-empty {
  padding: 60px 20px;
  text-align: center;
  color: var(--t3, #555568);
  font-size: 11px;
}
.mc-cal-empty code {
  display: inline-block;
  margin-top: 8px;
  color: var(--accent, #c6e310);
  background: rgba(198,227,16,0.08);
  padding: 2px 10px;
  border-radius: 2px;
}

/* ── Loading skeleton ── */
.mc-cal-loading {
  padding: 40px;
  text-align: center;
  color: var(--t3);
  font-size: 11px;
}

/* ── Animations ── */
@keyframes mc-pulse {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(0,200,83,0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(0,200,83,0); }
  100% { transform: scale(0.95); }
}
.mc-pulse-dot {
  width: 6px;
  height: 6px;
  background: #00c853;
  border-radius: 50%;
  display: inline-block;
  animation: mc-pulse 1.5s infinite;
  flex-shrink: 0;
}

/* ── Row Expansion Detail Strip ── */
.mc-detail-strip {
  grid-column: 1 / -1;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border, #1a1a2e);
  border-top: none;
  padding: 12px 14px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 24px;
  font-size: 10px;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.2s ease, opacity 0.15s ease, padding 0.2s ease;
}
.mc-detail-strip.mc-expanded {
  max-height: 200px;
  opacity: 1;
  padding: 12px 14px;
}
.mc-detail-label {
  font-size: 8px;
  color: var(--t3);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.mc-detail-value {
  font-size: 11px;
  color: var(--t1);
  font-variant-numeric: tabular-nums;
}
.mc-detail-link {
  color: var(--accent, #c6e310);
  text-decoration: none;
  font-size: 9px;
}
.mc-detail-link:hover { text-decoration: underline; }

/* ── Sparkline SVG ── */
.mc-sparkline {
  display: inline-block;
  vertical-align: middle;
}