/* ============================================
   META SPEND MONITOR (/app/meta-monitor/)
   ============================================ */

/* ---- Page layout ---- */

.metamon-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
  /* Reserves space for the fixed bulk action bar (label system, see
     CLAUDE.md) so it never permanently covers the last table row or the
     disconnect link below it -- same reasoning as page-negative-
     keywords.css's #neg-kw-results padding-bottom. */
  padding-bottom: 120px;
}

/* ---- Compact section header (icon square + label), same pattern as /app/ ---- */

.app-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: 12px;
}

.app-section-header__left {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.app-section-header__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  flex-shrink: 0;
}

.app-section-header__icon--meta {
  background: #E7F0FF;
}

.app-section-header__label {
  font-size: 15px;
  font-weight: 600;
  color: #1A1A2E;
}

.app-section-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.app-meta-refresh-btn {
  background: transparent;
  color: var(--color-primary);
  border: 1.5px solid var(--color-primary);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  border-radius: var(--radius-md);
  transition: background-color var(--transition-fast);
}

.app-meta-refresh-btn:hover {
  background: var(--color-primary-light);
}

.app-meta-refresh-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.app-meta-refresh-btn:disabled:hover {
  background: transparent;
}

/* "Refresh Now" (triggers the real on-demand backend resync) and "Run
   Initial Sync" (never-synced empty state) are the primary/filled variant
   of the button, distinct from the plain "Refresh" (cache re-read). */
.app-meta-refresh-btn--primary {
  background: var(--color-primary);
  color: #FFFFFF;
  border-color: var(--color-primary);
}

.app-meta-refresh-btn--primary:hover {
  background: var(--color-primary-hover);
}

.app-meta-refresh-btn--primary:disabled:hover {
  background: var(--color-primary);
}

/* ---- On-demand refresh: inline progress chip that replaces its trigger
   button in place (header's "Refresh Now" or the never-synced state's "Run
   Initial Sync") for the duration of a sync -- never a separate block, and
   never touches the table/states below it (see startRefreshAll() in
   page-meta-monitor.js). ---- */

.metamon-refresh-chip {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-width: 160px;
  padding: 4px 2px;
}

/* Required alongside the `display: flex` above -- an author rule setting
   `display` on an element always beats the browser's built-in
   `[hidden] { display: none }` UA rule regardless of specificity, so every
   element JS toggles via .hidden needs its own override here (recurring
   gotcha in this theme, see CLAUDE.md Key Learnings). */
.metamon-refresh-chip[hidden] {
  display: none;
}

.metamon-refresh-chip__label {
  font-size: 12px;
  font-weight: var(--weight-semibold);
  color: var(--color-dark);
  white-space: nowrap;
}

.metamon-refresh-chip__bar {
  display: block;
  width: 100%;
  height: 4px;
  background: var(--color-border);
  border-radius: 9999px;
  overflow: hidden;
}

.metamon-refresh-chip__fill {
  display: block;
  height: 100%;
  width: 0;
  background: var(--color-primary);
  border-radius: 9999px;
  transition: width 0.4s ease;
}

/* Shown while the backend hasn't reported a real item total yet (still
   queued/listing_accounts) -- a sliding highlight instead of a literal 0%,
   so the bar never looks stuck/broken while genuinely still working. */
.metamon-refresh-chip__fill--indeterminate {
  width: 40% !important;
  transition: none;
  animation: metamon-refresh-indeterminate 1.2s ease-in-out infinite;
}

@keyframes metamon-refresh-indeterminate {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}

.metamon-refresh-error {
  font-size: var(--text-sm);
  color: #991B1B;
  background: #FEE2E2;
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
}

/* ---- Loading state ---- */

.app-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding-block: var(--space-12);
  text-align: center;
}

.app-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: var(--color-surface);
  border-radius: 50%;
  animation: app-spin 0.6s linear infinite;
}

@keyframes app-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ---- Error state ---- */

.app-error-alert {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.app-retry-btn {
  background: transparent;
  color: var(--color-danger);
  border: 1.5px solid var(--color-danger);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  border-radius: var(--radius-md);
  white-space: nowrap;
  transition: background-color var(--transition-fast);
}

.app-retry-btn:hover {
  background: #FEE2E2;
}

/* ---- Summary pills ---- */

.app-meta-summary {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-6);
}

.app-meta-pill {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  min-width: 120px;
}

.app-meta-pill__value {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  line-height: 1;
}

.app-meta-pill__label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.85;
}

.app-meta-pill--neutral {
  background: var(--color-bg);
  color: var(--color-dark);
}

.app-meta-pill--success {
  background: #16A34A;
  color: #FFFFFF;
}

.app-meta-pill--danger {
  background: #DC2626;
  color: #FFFFFF;
}

.app-meta-pill--warning {
  background: #F59E0B;
  color: #1A1A2E;
}

/* ---- Control bar: inactive toggle + Advanced Filters dropdown ---- */

.metamon-controlbar {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  font-size: 13px;
}

.metamon-inactive-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  cursor: pointer;
}

/* ============================================
   ADVANCED FILTERS (SEMrush-style condition builder -- same pattern as
   page-negative-keywords.css, duplicated here since each page's CSS is
   self-contained per this theme's convention; keep the two in sync if
   either changes)
   ============================================ */

.metamon-filter-dropdown {
  position: relative;
}

.metamon-filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-muted);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

.metamon-filter-toggle:hover,
.metamon-filter-toggle[aria-expanded="true"],
.metamon-filter-toggle--active {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.metamon-filter-toggle__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--color-primary);
  color: #FFFFFF;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 700;
}

.metamon-filter-toggle__count[hidden] {
  display: none;
}

.metamon-filter-toggle__chevron {
  flex-shrink: 0;
  color: currentColor;
}

.metamon-filter-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 30;
  width: min(680px, 92vw);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(10, 31, 68, 0.16);
  padding: 16px;
}

.metamon-filter-rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 12px;
}

.metamon-filter-row {
  display: grid;
  grid-template-columns: 100px 1fr 1fr 1fr 28px;
  gap: 8px;
  align-items: center;
}

.metamon-filter-select,
.metamon-filter-value {
  font-size: 13px;
  padding: 7px 10px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background-color: var(--color-surface);
  color: var(--color-text);
  min-width: 0;
  font-family: var(--font-body);
}

.metamon-filter-select {
  cursor: pointer;
  appearance: none;
  padding-right: 24px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%235A5A72' d='M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
}

.metamon-filter-select:focus,
.metamon-filter-value:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(26, 107, 255, 0.12);
}

.metamon-filter-row__remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  border-radius: 6px;
  transition: color var(--transition-fast), background-color var(--transition-fast);
}

.metamon-filter-row__remove:hover {
  color: var(--color-danger);
  background: #FEE2E2;
}

/* ---- Label field's value cell: a multi-select of colored pills instead
   of the plain text/number <input> every other field uses (see
   labelValueCellHTML() in page-meta-monitor.js). Carries the base
   .metamon-filter-value class too so it still participates in that class's
   grid sizing/mobile grid-area rules below without duplicating them.
   Duplicated from page-negative-keywords.css's identical block per this
   theme's self-contained-per-page CSS convention. ---- */

.metamon-filter-value--label {
  position: relative;
  padding: 0;
  display: flex;
  align-items: center;
}

.metamon-filter-labelvalue-btn {
  width: 100%;
  height: 100%;
  min-height: 28px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  padding: 5px 10px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
}

.metamon-filter-labelvalue-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 40;
  width: 220px;
  max-height: 220px;
  overflow-y: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(10, 31, 68, 0.16);
  padding: 6px;
}

.metamon-filter-labelvalue-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  font-size: 13px;
  color: var(--color-text);
  cursor: pointer;
  border-radius: 6px;
}

.metamon-filter-labelvalue-item:hover {
  background: var(--color-bg);
}

.metamon-filter-labelvalue-item input[type="checkbox"] {
  accent-color: var(--color-primary);
}

.metamon-filter-labelvalue-empty {
  padding: 10px;
  font-size: 12px;
  color: var(--color-text-muted);
  text-align: center;
}

.metamon-filter-add {
  background: transparent;
  border: none;
  color: var(--color-primary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 0;
  margin-bottom: 12px;
}

.metamon-filter-add:hover {
  text-decoration: underline;
}

.metamon-filter-panel__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
}

.metamon-filter-apply-btn {
  background: var(--color-dark);
  color: #FFFFFF;
  border: none;
  padding: 9px 20px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.metamon-filter-apply-btn:hover {
  background: #142c5c;
}

.metamon-filter-clear-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.metamon-filter-clear-btn:hover {
  color: var(--color-danger);
}

@media (max-width: 640px) {
  .metamon-filter-panel {
    width: 92vw;
  }

  .metamon-filter-row {
    grid-template-columns: 1fr 28px;
    grid-template-areas:
      "include remove"
      "field field"
      "operator operator"
      "value value";
    row-gap: 6px;
  }

  .metamon-filter-select--include { grid-area: include; }
  .metamon-filter-row__remove      { grid-area: remove; }
  .metamon-filter-select--field    { grid-area: field; }
  .metamon-filter-select--operator { grid-area: operator; }
  .metamon-filter-value            { grid-area: value; }
}

/* ============================================
   SELECT-ALL-ACROSS-PAGES BANNER
   ============================================
   Shown above the table when every row on the current page is selected,
   offering to extend the selection to every account matching the active
   filters (not just the visible page). Duplicated from
   page-negative-keywords.css's identical block per this theme's self-
   contained-per-page CSS convention. */

.metamon-selectall-banner {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  background: var(--color-primary-light);
  border: 1px solid var(--color-primary);
  border-radius: 8px;
  padding: 10px 16px;
  margin-bottom: var(--space-3);
  font-size: 13px;
  color: var(--color-dark);
}

.metamon-selectall-banner__link {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: underline;
  white-space: nowrap;
  cursor: pointer;
}

/* ---- Partial-failure warning banner ---- */

.app-meta-warning {
  font-size: var(--text-sm);
  color: #92400E;
  background: #FEF3C7;
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
}

/* ---- Table ----
   Base look (header color, striping, hover, sticky) now comes from the
   shared .sherpa-table class in style.css. Only the sortable-column
   affordance is page-specific. */

.app-meta-th-sortable {
  cursor: pointer;
  user-select: none;
}

.app-meta-sort-arrow {
  font-size: 0.7em;
  margin-left: var(--space-1);
}

.app-meta-cell--zero-spend {
  color: #DC2626;
  background: #FEE2E2;
  font-weight: var(--weight-semibold);
}

.app-meta-cpl--good {
  color: #16A34A;
  font-weight: var(--weight-semibold);
}

.app-meta-cpl--warn {
  color: #F59E0B;
  font-weight: var(--weight-semibold);
}

.app-meta-cpl--bad {
  color: #DC2626;
  font-weight: var(--weight-semibold);
}

/* Inactive accounts: whole row dimmed, Inactive badge shown instead of any
   other status badge (see statusFromRow() in page-meta-monitor.js). */
.metamon-row--inactive {
  opacity: 0.5;
}

/* ============================================
   FILTERED-TO-ZERO-ROWS EMPTY STATE
   ============================================
   Renders as a real table row (full-width message cell spanning every
   column, see emptyResultsRowHTML() in page-meta-monitor.js) instead of
   replacing the whole table with a floating message -- keeps the dark navy
   header visible even when Advanced Filters/Hide Inactive narrow the set to
   nothing. Duplicated from page-negative-keywords.css's identical block
   (.negkw-empty-row__*) per this theme's self-contained-per-page CSS
   convention. */
.metamon-empty-row__cell {
  padding: 0;
}

.metamon-empty-row__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  padding: var(--space-8) var(--space-6);
  text-align: center;
}

.metamon-empty-row__message {
  color: var(--color-text-muted);
  margin: 0 0 var(--space-3);
}

.metamon-empty-view-all-link {
  color: var(--color-primary);
  font-weight: var(--weight-semibold);
  text-decoration: none;
}

.metamon-empty-view-all-link:hover {
  text-decoration: underline;
}

/* ============================================
   CHECKBOXES + LABELS COLUMN (label system, see CLAUDE.md)
   ============================================ */

.metamon-checkbox {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  cursor: pointer;
  accent-color: var(--color-primary);
}

/* Pills themselves come from the shared .label-pill-group (style.css);
   this just caps the cell's width so a row with several labels doesn't
   blow out the table layout. */
.metamon-labels-cell {
  max-width: 180px;
}

/* ============================================
   BULK ACTION BAR (label system) -- position/layout/[hidden] come from
   the shared .bulk-action-bar class (style.css), same as page-negative-
   keywords.css's .negkw-bulkbar. Only the button-group wrapper and the
   Clear Selection link are page-specific here, mirroring .negkw-bulkbar__
   actions/.negkw-bulkbar__clear.
   ============================================ */

.metamon-bulkbar__actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.metamon-bulkbar__clear {
  font-size: 13px;
  color: var(--color-text-muted);
  text-decoration: underline;
}

/* ============================================
   PAGINATION (same global pattern as page-negative-keywords.css --
   duplicated here per this theme's self-contained-per-page CSS convention)
   ============================================ */

.metamon-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 4px;
  border-top: 1px solid var(--color-border);
}

.metamon-pagination__left {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.metamon-pagination__pagesize {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.metamon-pagesize-select {
  font-size: 13px;
  padding: 5px 26px 5px 10px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background-color: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%235A5A72' d='M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
}

.metamon-pagination__range {
  font-size: 13px;
  color: var(--color-text-muted);
}

.metamon-pagination__controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

.metamon-pagination__page {
  font-size: 13px;
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* Looks like plain text until focused -- no visible border/background at
   rest, subtle border on hover as an affordance, full focus treatment only
   once the user actually clicks in. Width is set inline per-render (see
   paginationHTML() in page-meta-monitor.js) to fit totalPages' digit count;
   the value here is just a sane fallback. Duplicated from page-negative-
   keywords.css's identical .negkw-pagination__page-input block. */
.metamon-pagination__page-input {
  width: 3ch;
  padding: 1px 3px;
  font: inherit;
  font-size: 13px;
  color: var(--color-text-muted);
  text-align: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  transition: border-color var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast);
}

.metamon-pagination__page-input:hover {
  border-color: var(--color-border);
}

.metamon-pagination__page-input:focus {
  outline: none;
  border-color: var(--color-primary);
  background: var(--color-surface);
  color: var(--color-text);
}

.metamon-pagination__btn {
  background: transparent;
  border: 1.5px solid var(--color-border);
  color: var(--color-text);
  padding: 5px 12px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.metamon-pagination__btn:hover:not(:disabled) {
  background: var(--color-primary-light);
  border-color: var(--color-primary);
}

.metamon-pagination__btn:disabled {
  opacity: 0.4;
  cursor: default;
}

/* ---- Status / CPL badges ---- */

.app-meta-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  border-radius: var(--radius-full);
  line-height: 1.4;
  white-space: nowrap;
}

.app-meta-badge--no-spend,
.app-meta-badge--critical {
  background: #DC2626;
  color: #FFFFFF;
}

.app-meta-badge--no-leads {
  background: #EA580C;
  color: #FFFFFF;
}

.app-meta-badge--warning {
  background: #F59E0B;
  color: #1A1A2E;
}

.app-meta-badge--ok {
  background: #16A34A;
  color: #FFFFFF;
}

.app-meta-badge--inactive {
  background: #F4F6FA;
  color: #5A5A72;
}

/* ---- Last updated / disconnect link ---- */

.app-meta-updated {
  font-size: var(--text-xs);
  margin-top: var(--space-4);
}

.app-meta-disconnect {
  margin-top: var(--space-6);
  text-align: center;
  font-size: var(--text-xs);
}

.app-meta-disconnect a {
  color: var(--color-text-muted);
  text-decoration: underline;
}

@media (max-width: 600px) {
  .app-section-header {
    flex-wrap: wrap;
  }

  .metamon-controlbar {
    flex-direction: column;
    align-items: stretch;
  }
}

@media (max-width: 480px) {
  .metamon-container {
    padding: 1rem;
    /* The shorthand above would otherwise reset padding-bottom too --
       re-declared here, larger than the base 120px, since the bulk bar
       wraps onto two rows at this width (see .bulk-action-bar's own
       max-width: 600px stacking rule in style.css). */
    padding-bottom: 220px;
  }
}