/* Dashboard */
.dash-panel { max-width: 100%; overflow: hidden; padding-bottom: 80px }
.dash-header { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 18px }
.dash-header h2 { font-size: 22px; font-weight: 700 }
.dash-header select { padding: 6px 10px; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; color: var(--text); font-size: 13px }
.dash-header-left { display: flex; align-items: center; gap: 16px; flex-wrap: wrap }
.dash-header-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap }

/* Results quick-access buttons (replaces the single "View Results" button) */
.dash-results-links { display: flex; gap: 8px; flex-wrap: wrap }
.dash-rlink { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); color: var(--text); font-size: 14px; font-weight: 700; cursor: pointer }
.dash-rlink:hover { border-color: var(--accent); color: var(--accent); background: rgba(91,163,245,.08) }
.dash-rlink.active { border-color: var(--accent); background: rgba(91,163,245,.14); color: var(--accent) }
#dash-results-host { max-width: 900px; margin-top: 4px }
/* Data-in actions (Sync from Meta + Load Demo) live at the top of the Log Results tab */
.log-results-toolbar { display: flex; gap: 10px; justify-content: flex-end; align-items: center; flex-wrap: wrap; margin-bottom: 14px }
.meta-autosync { color: var(--green); font-weight: 700; font-size: 14px }

/* Custom date range — an always-visible, labeled box so it's easy to spot */
.dash-custom-range { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px 6px 12px; background: var(--panel) }
.dash-custom-label { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-right: 2px }
.dash-date { padding: 6px 10px; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; color: var(--text); font-size: 13px; color-scheme: dark }
.dash-range-sep { color: var(--muted); font-size: 13px }
.dash-apply { padding: 7px 16px; font-size: 13px; font-weight: 700 }
.kpi-primary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 12px }
.kpi-secondary { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin-bottom: 18px }
.kpi-big { padding: 20px }
.kpi-value-big { font-size: 28px }
.kpi-secondary .kpi-card { padding: 12px }
.kpi-secondary .kpi-value { font-size: 18px }
.status-badge { font-size: 13px; font-weight: 600; padding: 3px 10px; border-radius: 999px; text-transform: uppercase; letter-spacing: .04em }
.status-active { background: rgba(52,200,138,.12); color: var(--green) }
.status-paused { background: rgba(224,168,50,.12); color: var(--amber) }
.status-completed { background: rgba(91,163,245,.12); color: var(--accent) }
.kpi-card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 16px; text-align: center }
.kpi-label { font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px }
.kpi-value { font-size: 22px; font-weight: 800 }
.chart-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin-bottom: 18px }
.chart-card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 16px }
.chart-card h3 { font-size: 14px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 10px }
.chart-card canvas { width: 100% }
.dash-table-card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 16px; margin-bottom: 18px; overflow-x: auto }
.dash-table-card h3 { font-size: 14px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 10px }
.dash-table { width: 100%; border-collapse: collapse; font-size: 13px; white-space: nowrap }
.dash-table th { text-align: left; color: var(--muted); font-size: 13px; text-transform: uppercase; letter-spacing: .06em; padding: 8px; border-bottom: 1px solid var(--line) }
.dash-table td { padding: 8px; border-bottom: 1px solid var(--line) }
.dash-table .status-active { color: var(--green) }
.dash-table .status-paused { color: var(--amber) }
.dash-recs { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 16px }
.recs-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px }
.recs-header h3 { font-size: 14px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 0 }
.auto-fix-toggle { display: flex; align-items: center; gap: 8px }
.auto-fix-label { font-size: 14px; font-weight: 700; color: var(--muted) }
.auto-fix-status { font-size: 13px; font-weight: 700; min-width: 24px }
.auto-fix-status.on { color: var(--green) }
.auto-fix-status.off { color: var(--muted) }

/* Toggle switch */
.toggle-switch { position: relative; display: inline-block; width: 48px; height: 26px; cursor: pointer }
.toggle-switch input { opacity: 0; width: 0; height: 0 }
.toggle-slider {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background: var(--line2); border-radius: 26px; transition: .25s;
}
.toggle-slider::before {
  content: ''; position: absolute; width: 20px; height: 20px;
  left: 3px; bottom: 3px; background: #fff; border-radius: 50%;
  transition: .25s;
}
.toggle-switch input:checked + .toggle-slider { background: var(--green) }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(22px) }

/* Auto Fix Countdown */
.auto-fix-countdown {
  text-align: center; padding: 24px; margin-bottom: 16px;
  background: rgba(224,88,88,.08); border: 2px solid var(--red); border-radius: 16px;
  animation: countdown-pulse 1s ease infinite;
}
@keyframes countdown-pulse {
  0%, 100% { border-color: var(--red) }
  50% { border-color: rgba(224,88,88,.4) }
}
.afc-warning {
  font-size: 14px; font-weight: 800; color: var(--red);
  text-transform: uppercase; letter-spacing: .12em; margin-bottom: 8px;
}
.afc-timer {
  font-size: 56px; font-weight: 900; color: var(--red); line-height: 1;
  font-family: monospace; margin-bottom: 8px;
}
.afc-sub { font-size: 14px; color: var(--muted); margin-bottom: 16px }
.afc-cancel {
  padding: 12px 36px; background: var(--panel); border: 2px solid var(--red);
  color: var(--red); border-radius: 12px; font-size: 16px; font-weight: 700;
  cursor: pointer; letter-spacing: .02em;
}
.afc-cancel:hover { background: rgba(224,88,88,.1) }
/* Section labels */
.recs-section-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--line) }

/* Recommendation items */
.rec-item {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
  padding: 14px; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 8px;
}
.rec-item-left { display: flex; align-items: flex-start; gap: 10px; flex: 1; min-width: 0 }
.rec-urgency { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; margin-top: 4px }
.rec-urgency-red { background: var(--red) }
.rec-urgency-amber { background: var(--amber) }
.rec-urgency-green { background: var(--green) }
.rec-item-body { min-width: 0 }
.rec-ad-name { font-size: 13px; font-weight: 700; color: var(--accent); margin-bottom: 4px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap }
.rec-action-label { font-size: 11px; padding: 2px 8px; border-radius: 4px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em }
.rec-action-pause { background: rgba(224,88,88,.15); color: var(--red) }
.rec-action-increase_budget { background: rgba(52,200,138,.15); color: var(--green) }
.rec-action-decrease_budget { background: rgba(224,168,50,.15); color: var(--amber) }
.rec-action-relaunch { background: rgba(91,163,245,.15); color: var(--accent) }
.rec-reason { font-size: 14px; line-height: 1.5; color: var(--muted) }
.rec-text { font-size: 14px; line-height: 1.4 }
.rec-item-btns { display: flex; gap: 6px; flex-shrink: 0; margin-top: 2px }

/* Next Moves */
.next-move-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 8px;
  background: var(--bg2);
}
.next-move-icon { font-size: 20px; flex-shrink: 0; line-height: 1.4 }
.next-move-body { flex: 1; min-width: 0 }
.next-move-ad { font-size: 13px; font-weight: 700; color: var(--accent); margin-bottom: 4px; display: flex; align-items: center; gap: 8px }
.next-move-cat { font-size: 11px; padding: 2px 8px; border-radius: 4px; background: rgba(91,163,245,.1); color: var(--accent); font-weight: 600; text-transform: uppercase }
.next-move-text { font-size: 14px; line-height: 1.5; color: var(--muted) }
.btn-next-move-action {
  padding: 8px 16px; border-radius: 8px; border: 1px solid var(--accent);
  background: rgba(91,163,245,.1); color: var(--accent); font-size: 13px; font-weight: 700;
  cursor: pointer; flex-shrink: 0; align-self: center; white-space: nowrap;
}
.btn-next-move-action:hover { background: rgba(91,163,245,.2) }
.btn-next-move-action:disabled { opacity: .5; cursor: default }
.btn-rec-yes {
  width: 44px; height: 36px; border-radius: 8px; border: none; cursor: pointer;
  background: var(--green); color: #fff; font-size: 13px; font-weight: 700;
}
.btn-rec-yes:hover { opacity: .9 }
.btn-rec-yes:disabled { opacity: .4; cursor: default }
.btn-rec-no {
  width: 44px; height: 36px; border-radius: 8px; border: none; cursor: pointer;
  background: var(--red); color: #fff; font-size: 13px; font-weight: 700;
}
.btn-rec-no:hover { opacity: .9 }
.rec-applied {
  display: flex; align-items: center; gap: 8px; padding: 8px 0;
  font-size: 13px; color: var(--green);
}
.rec-applied-check { font-size: 18px; font-weight: 700 }

/* Fixed + Rejected logs */
.dash-logs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px }
@media (max-width: 700px) { .dash-logs { grid-template-columns: 1fr } }
.dash-log-col details { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px }
.dash-log-col summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 6px }
.dash-log-col summary::-webkit-details-marker { display: none }
.dash-log-col summary::before { content: '▸'; font-size: 14px; color: var(--muted); transition: transform .2s }
.dash-log-col details[open] summary::before { transform: rotate(90deg) }
.dash-log-col summary h3 { margin: 0; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); display: inline }
.fixed-badge { font-size: 13px; background: var(--green); color: #fff; padding: 1px 7px; border-radius: 10px; margin-left: 6px }
.fixed-badge:empty { display: none }
.fixed-item {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 10px 12px; border: 1px solid rgba(52,200,138,.15); border-radius: 10px;
  margin-top: 8px; background: rgba(52,200,138,.04);
}
.fixed-item-left { flex: 1; min-width: 0 }
.fixed-item-result { font-size: 13px; color: var(--green); margin-top: 2px }
.fixed-item-time { font-size: 13px; color: var(--muted); white-space: nowrap }
.rejected-badge { font-size: 13px; background: var(--red); color: #fff; padding: 1px 7px; border-radius: 10px; margin-left: 6px }
.rejected-badge:empty { display: none }
.rejected-item {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 10px 12px; border: 1px solid rgba(224,88,88,.15); border-radius: 10px;
  margin-top: 8px; background: rgba(224,88,88,.04);
}
.rejected-item-left { flex: 1; min-width: 0 }
.rejected-item-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0 }
.rejected-timer { font-size: 14px; color: var(--amber); white-space: nowrap }
.btn-rec-restore {
  padding: 4px 12px; border-radius: 6px; font-size: 13px; font-weight: 600;
  cursor: pointer; border: 1px solid var(--line); background: transparent; color: var(--muted);
}
.btn-rec-restore:hover { color: var(--text); border-color: var(--accent) }
.rec-card { padding: 12px; background: rgba(91,163,245,.06); border: 1px solid rgba(91,163,245,.12); border-radius: 10px; margin-bottom: 8px; font-size: 13px; line-height: 1.5 }

@media (max-width: 600px) { .kpi-primary { grid-template-columns: repeat(2, 1fr) } }