/*
 * AtlasFeed Coverage — scoped styles.
 * Every selector is prefixed with #otl-atlasfeed-coverage so OceanWP/legacy
 * sheet rules (.btn, table, thead...) can never win on specificity.
 * Deliberately NOT wrapped in @layer: theme CSS is unlayered, and layered
 * rules LOSE to unlayered ones — @layer here would invert the isolation.
 */
#otl-atlasfeed-coverage {
  --afc-primary: #2A2C53;
  --afc-secondary: #37B25E;
  --afc-light: #FFFFFF;
  --afc-dark: #10173F;
  --afc-grey: #6B7186;
  --afc-light-grey: #F1F2F3;
  --afc-border: #d8dee9;
  --afc-hover: #eef0f5;

  color: #10173F; /* var(--afc-dark) fallback */
  color: var(--afc-dark);
  font-size: 13px;
}
#otl-atlasfeed-coverage *,
#otl-atlasfeed-coverage *::before,
#otl-atlasfeed-coverage *::after { box-sizing: border-box; }
#otl-atlasfeed-coverage .app { padding: 16px; }

#otl-atlasfeed-coverage .topbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 20px;
  margin-bottom: 14px;
}
#otl-atlasfeed-coverage .topbar h1 { font-size: 18px; margin: 0; font-weight: 600; }
#otl-atlasfeed-coverage .stats { color: #6B7186; color: var(--afc-grey); font-size: 12px; }
#otl-atlasfeed-coverage .controls { margin-left: auto; display: flex; align-items: center; gap: 14px; }

#otl-atlasfeed-coverage .view-toggle { display: inline-flex; border: 1px solid var(--afc-border); border-radius: 6px; overflow: hidden; background: var(--afc-light); }
#otl-atlasfeed-coverage .view-btn { border: none; background: transparent; padding: 6px 12px; cursor: pointer; font-size: 12px; color: var(--afc-dark); }
#otl-atlasfeed-coverage .view-btn + .view-btn { border-left: 1px solid var(--afc-border); }
#otl-atlasfeed-coverage .view-btn:hover:not(.active) { background: var(--afc-hover); }
#otl-atlasfeed-coverage .view-btn.active { background: var(--afc-primary); color: var(--afc-light); font-weight: 600; }

#otl-atlasfeed-coverage .btn {
  border: 1px solid var(--afc-border);
  background: var(--afc-light);
  border-radius: 6px;
  padding: 6px 10px;
  cursor: pointer;
  font-size: 12px;
  color: var(--afc-dark);
}
#otl-atlasfeed-coverage .btn:hover { background: var(--afc-hover); }

#otl-atlasfeed-coverage .table-wrap {
  border: 1px solid var(--afc-border);
  border-radius: 8px;
  overflow: auto;
  max-height: calc(100vh - 220px); /* site chrome consumes ~100px more than the standalone file */
  background: var(--afc-light);
}
#otl-atlasfeed-coverage table { border-collapse: collapse; width: 100%; table-layout: auto; }

#otl-atlasfeed-coverage thead { position: sticky; top: 0; z-index: 2; }
#otl-atlasfeed-coverage thead th {
  background: var(--afc-primary);
  color: var(--afc-light);
  text-align: left;
  border-bottom: 1px solid var(--afc-dark);
  padding: 0;
  vertical-align: top;
}
#otl-atlasfeed-coverage .th-head {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 10px;
}
#otl-atlasfeed-coverage .th-label {
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
  user-select: none;
}
#otl-atlasfeed-coverage .th-label:hover { color: #a9c4ff; }
#otl-atlasfeed-coverage .sort-arrow { font-size: 10px; opacity: .9; min-width: 10px; }
#otl-atlasfeed-coverage .filter-trigger {
  border: none;
  border-radius: 4px;
  padding: 3px 5px;
  font-size: 11px;
  background: transparent;
  color: #d7e3f1;
  box-sizing: border-box;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex: none;
}
#otl-atlasfeed-coverage .filter-trigger:hover { background: #1a275a; color: var(--afc-light); }
#otl-atlasfeed-coverage .filter-trigger.active { background: var(--afc-secondary); color: var(--afc-light); }
#otl-atlasfeed-coverage .filter-trigger svg { width: 11px; height: 11px; flex: none; }
#otl-atlasfeed-coverage .filter-trigger .fc { font-size: 10px; background: rgba(255,255,255,.22); border-radius: 8px; padding: 0 5px; min-width: 14px; text-align: center; }
#otl-atlasfeed-coverage .filter-trigger.active .fc { background: rgba(255,255,255,.3); }
#otl-atlasfeed-coverage .filter-trigger .fc:empty { display: none; }

/* Filter dropdown is appended to <body> (fixed positioning) — it sits OUTSIDE
   #otl-atlasfeed-coverage, so it carries its own .fdrop isolation class and is
   prefixed by that instead. Generated only by our JS. */
.fdrop.otl-afc-fdrop {
  position: fixed;
  z-index: 50;
  width: 240px;
  max-height: 360px;
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  background: var(--afc-light, #FFFFFF);
  border: 1px solid #d8dee9;
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0,0,0,.18);
  font-size: 12px;
  color: #10173F;
  color: var(--afc-dark, #10173F);
}
.fdrop.otl-afc-fdrop .fdrop-search { padding: 8px; border-bottom: 1px solid #d8dee9; }
.fdrop.otl-afc-fdrop .fdrop-search input {
  width: 100%; border: 1px solid #d8dee9; border-radius: 4px;
  padding: 5px 8px; font-size: 12px; box-sizing: border-box;
}
.fdrop.otl-afc-fdrop .fdrop-search input:focus { outline: 2px solid #2A2C53; outline: 2px solid var(--afc-primary, #2A2C53); }
.fdrop.otl-afc-fdrop .fdrop-actions { display: flex; gap: 6px; padding: 6px 8px; border-bottom: 1px solid #d8dee9; }
.fdrop.otl-afc-fdrop .fdrop-actions button {
  border: 1px solid #d8dee9; background: #fff; border-radius: 4px;
  padding: 3px 8px; font-size: 11px; cursor: pointer; color: #10173F;
}
.fdrop.otl-afc-fdrop .fdrop-actions button:hover { background: #eef0f5; }
.fdrop.otl-afc-fdrop .fdrop-list { overflow: auto; padding: 4px 0; max-height: 220px; }
.fdrop.otl-afc-fdrop .fdrop-item {
  display: flex; align-items: center; gap: 7px; padding: 4px 10px;
  cursor: pointer; user-select: none;
}
.fdrop.otl-afc-fdrop .fdrop-item:hover { background: #eef0f5; }
.fdrop.otl-afc-fdrop .fdrop-item input { margin: 0; cursor: pointer; }
.fdrop.otl-afc-fdrop .fdrop-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fdrop.otl-afc-fdrop .fdrop-item.hidden { display: none; }
.fdrop.otl-afc-fdrop .fdrop-hint { padding: 5px 10px; color: #6B7186; font-size: 11px; border-top: 1px solid #d8dee9; }

#otl-atlasfeed-coverage tbody td { padding: 6px 10px; border-bottom: 1px solid var(--afc-border); white-space: nowrap; }
#otl-atlasfeed-coverage tbody td.wrap { white-space: normal; }
#otl-atlasfeed-coverage tbody tr:nth-child(even) { background: var(--afc-light-grey); }
#otl-atlasfeed-coverage tbody tr:hover { background: var(--afc-hover); }
#otl-atlasfeed-coverage td.num { text-align: right; font-variant-numeric: tabular-nums; }

#otl-atlasfeed-coverage .badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
}
#otl-atlasfeed-coverage .badge-rt { background: #e3f7e8; color: #37B25E; color: var(--afc-secondary); }
#otl-atlasfeed-coverage .badge-no { background: #fdecec; color: #b02a2a; }
#otl-atlasfeed-coverage .badge-d { background: #e3f7e8; color: #37B25E; color: var(--afc-secondary); }
#otl-atlasfeed-coverage .depth-mbp { background: #fef3c7; color: #7a5a07; }
#otl-atlasfeed-coverage .depth-mbo { background: #ede7ff; color: #2A2C53; color: var(--afc-primary); }
#otl-atlasfeed-coverage .depth-l1 { background: #e3f7e8; color: #37B25E; color: var(--afc-secondary); }

#otl-atlasfeed-coverage .empty { padding: 30px; text-align: center; color: #6B7186; color: var(--afc-grey); }