/* components/apps/overview/css/overview.css — the fleet Overview area.
 *
 * Lives inside the apps shell (shares the apps sidebar). Deliberately leans on
 * already-global stylesheets: .tabbed-interface/.main-tab-button/.tab-pane from
 * apps.css, and .updater-stat/.updater-row/.updater-badge/.sev-* from updater.css.
 * Only the Overview-specific bits live here. */

/* Hidden until AppsManager.showView('overview') reveals it. */
#overview-view { display: none; }
#overview-view.content-view { padding: 0; }

/* Pane show/hide is self-contained so it never depends on where the base
   .tab-pane rule is scoped. */
#overview-view .tab-pane { display: none; }
#overview-view .tab-pane.active { display: block; }

/* ---- sidebar "Overview" entry (pinned above the search box) -------------
   Matches the app-category rows below it (sidebar.css .category): full-width,
   square corners, same padding + separator + hover, so the highlight spans the
   whole sidebar rather than a rounded inset pill. Keeps font-weight 600 + the
   page-updater active tint as its only distinguishing marks. */
.sidebar-overview-entry {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 20px;
  cursor: pointer;
  font-weight: 600;
  color: var(--sidebar-text, #cdd6e4);
  border-bottom: 1px solid var(--sidebar-border);
  transition: background .15s ease, color .15s ease;
}
.sidebar-overview-entry:hover { background: var(--surface-hover); color: var(--text-primary); }
.sidebar-overview-entry.active {
  background: rgba(var(--page-updater-rgb), .16);
  color: #fff;
}
.sidebar-overview-entry .ov-entry-icon { width: 18px; height: 18px; flex: 0 0 auto; }

/* ---- layout ------------------------------------------------------------- */
/* No floating header — each tab renders its own in-content .config-title header
   under the tab strip (OverviewManager.renderHeader). The tabbed interface owns
   the area padding the old header used to provide at the top. */
.overview-tabbed { margin-top: 0; padding: 22px 24px 24px; }

/* Tab header: title + blurb left, action buttons right, divider underneath —
   the same shape as the per-app .backup-title / .updater-title rows (the
   .config-title base supplies the 20px padding + bottom border). */
#overview-view .ov-tab-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
#overview-view .ov-tab-header-main { flex: 1; min-width: 0; }
#overview-view .ov-tab-header-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-shrink: 0;
}

/* Recessed dark panel holding each tab's body — same recipe as the per-app
   .tasks-container / .backup-snapshots-container / .updater-detail-container,
   so the fleet tabs read exactly like the app-detail tabs. */
#overview-view .ov-tab-body {
  margin: 16px;
  padding: 16px;
  background: rgba(var(--bg-rgb), 0.2);
  border-radius: 8px;
}

/* ---- Overview: health hero + action board -------------------------------- */
/* The hero is the tab's "status circle": one glance answers "anything to do?".
   Status colours match the admin dashboard's .admin-status-dot palette
   (ok/warn/none) so the two boards speak the same language. */
.ov-health {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 18px 20px;
  margin-bottom: 14px;
  border-radius: 12px;
  border: 1px solid rgba(var(--text-rgb), .12);
  background: rgba(var(--text-rgb), .04);
}
.ov-health.ok   { background: rgba(54, 211, 153, .07); border-color: rgba(54, 211, 153, .25); }
.ov-health.warn { background: rgba(251, 189, 35, .07); border-color: rgba(251, 189, 35, .3); }
.ov-health-dot { width: 18px; height: 18px; border-radius: 50%; flex: 0 0 auto; }
.ov-health-dot.ok   { background: #36d399; box-shadow: 0 0 12px rgba(54, 211, 153, .55); }
.ov-health-dot.warn { background: #fbbd23; box-shadow: 0 0 12px rgba(251, 189, 35, .55); }
.ov-health-dot.none { background: rgba(var(--text-rgb), .25); }
.ov-health-main { flex: 1; min-width: 220px; }
.ov-health-title { font-weight: 600; font-size: 1.02rem; color: var(--text-primary, #fff); }
.ov-health-sub { margin-top: 3px; font-size: .82rem; color: rgba(var(--text-rgb), .55); }
.ov-health .ov-chips { flex-shrink: 0; }

/* Board rows: actionable ones are tinted with their area's identity hue and
   carry buttons; ok/none rows stay neutral and quiet so they don't compete. */
.ov-board { display: flex; flex-direction: column; gap: 10px; }
.ov-board-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 13px 16px;
  border-radius: 11px;
  background: rgba(var(--page-rgb, var(--accent-rgb)), .06);
  border: 1px solid rgba(var(--page-rgb, var(--accent-rgb)), .16);
}
.ov-board-row.ok,
.ov-board-row.none {
  background: rgba(var(--text-rgb), .03);
  border-color: rgba(var(--text-rgb), .08);
}
.ov-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.ov-dot.ok   { background: #36d399; }
.ov-dot.warn { background: #fbbd23; }
.ov-dot.none { background: rgba(var(--text-rgb), .25); }
.ov-board-icon { flex: 0 0 auto; font-size: 1.05rem; }
.ov-board-main { flex: 1; min-width: 220px; }
.ov-board-title {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-weight: 600;
  font-size: .92rem;
  color: var(--text-primary, #fff);
}
.ov-board-row.ok .ov-board-title,
.ov-board-row.none .ov-board-title { font-weight: 500; color: rgba(var(--text-rgb), .7); }
.ov-board-sub { margin-top: 3px; font-size: .8rem; color: rgba(var(--text-rgb), .5); }
.ov-board-actions { display: flex; gap: 8px; flex-shrink: 0; align-items: center; }

/* "Needs action" view with nothing to do — keep it calm, the hero already
   carries the good news. */
.ov-allclear { padding: 28px 20px; text-align: center; font-size: .9rem; color: rgba(var(--text-rgb), .55); }

/* ---- Updates: filter chips + toolbar ------------------------------------ */
.ov-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.ov-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.ov-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--border-color, rgba(255, 255, 255, .14));
  background: transparent;
  color: var(--text-color, #e8edf4);
  font-size: .82rem;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.ov-chip:hover { background: rgba(255, 255, 255, .06); }
.ov-chip.active {
  background: rgba(var(--page-updater-rgb), .18);
  border-color: rgba(var(--page-updater-rgb), .5);
  color: #fff;
}
.ov-chip-n {
  font-variant-numeric: tabular-nums;
  font-size: .72rem;
  opacity: .8;
  background: rgba(255, 255, 255, .08);
  border-radius: 999px;
  padding: 0 6px;
}
.ov-toolbar-actions { display: flex; gap: 8px; }

/* ---- Updates: expandable rows ------------------------------------------- */
.ov-row { padding: 0; }
.ov-row-head {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  cursor: pointer;
  padding: 12px 14px;
}
.ov-row-head .updater-row-ver { margin-left: auto; }
.ov-row-head .ov-row-actions { margin-left: 12px; }
.ov-chevron {
  flex: 0 0 auto;
  display: inline-block;
  font-size: .8rem;
  opacity: .7;
  transition: transform .18s ease;
}
.ov-row-head[aria-expanded="true"] .ov-chevron { transform: rotate(90deg); }
.ov-row-head:focus-visible { outline: 2px solid rgba(var(--page-updater-rgb), .7); outline-offset: -2px; }

.ov-row-details { display: none; padding: 4px 16px 16px; border-top: 1px solid var(--border-color, rgba(255, 255, 255, .1)); }
.ov-row-details.ov-open { display: block; }

.updater-detail { display: flex; flex-direction: column; gap: 14px; padding-top: 12px; }
.updater-detail-section h4 {
  margin: 0 0 8px;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted, rgba(255, 255, 255, .6));
}
.updater-detail-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
  flex-wrap: wrap;
}
.updater-detail-row .updater-btn { margin-left: auto; }
.updater-detail-meta { color: var(--text-muted, rgba(255, 255, 255, .6)); font-size: .85rem; }
.updater-detail-empty { color: var(--text-secondary); margin: 0; }

/* ---- Backups tab: embedded backup center -------------------------------- */
/* The Backups tab mounts the real BackupPage, which supplies its own header, and
   its left sidebar is restyled into a horizontal nested tab strip so the whole
   thing reads as tabs-within-tabs. */
#overview-view #ov-pane-backups .backup-layout { display: block; }
#overview-view #ov-pane-backups .backup-layout > .sidebar {
  width: auto;
  max-width: none;
  height: auto;
  min-height: 0;
  margin: 0;          /* no gap — the strip joins the content card below */
  padding: 0;
  background: transparent;
  border: none;
}
/* Match the per-app Config .tabs-list/.tab-button segmented look (full-width
   bar, evenly-flexed items, 2px accent underline on the active one). */
#overview-view #ov-pane-backups .backup-layout > .sidebar #backup-sidebar-list,
#overview-view #ov-pane-backups .backup-layout > .sidebar .sidebar-section {
  display: flex;
  width: 100%;
  background: var(--hover-bg);
  border-bottom: 1px solid var(--border-color);
  overflow-x: auto;
}
#overview-view #ov-pane-backups .backup-layout > .sidebar .category {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0;
  padding: 12px 14px;
  white-space: nowrap;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  /* Type matches .main-tab-button so the nested strip reads like the outer
     overview tab strip, not like the backup page's vertical sidebar. */
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary, #ccc);
}
#overview-view #ov-pane-backups .backup-layout > .sidebar .category:hover {
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.1);
}
#overview-view #ov-pane-backups .backup-layout > .sidebar .category.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  background: rgba(var(--accent-rgb), 0.1);
}
#overview-view #ov-pane-backups .backup-layout > .sidebar .category .category-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}
/* Round only the outer top corners to follow the strip's chrome (the global
   .tab-button rule does this for app/Migrate sub-tabs; .category needs its own). */
#overview-view #ov-pane-backups .backup-layout > .sidebar .category:first-child { border-top-left-radius: 12px; }
#overview-view #ov-pane-backups .backup-layout > .sidebar .category:last-child { border-top-right-radius: 12px; }
/* .main is just the layout column now — the visible card surface lives on the
   body below (so it stops above the footer buttons), exactly like the app
   Config tab where .tabs-content is the card and .config-actions sits outside. */
#overview-view #ov-pane-backups .backup-layout > .main {
  width: 100%;
  min-width: 0;
  background: transparent;
}
/* The body is the connected .tabs-content card: card surface + rounded bottom
   corners, joining the tab strip above so the strip + body read as one unit. */
#overview-view #ov-pane-backups .backup-page-body {
  background: var(--card-bg);
  border-radius: 0 0 12px 12px;
}
/* Embedded, the nested strip already names the section — BackupPage's big
   page header (icon + h1 + subtitle) is redundant chrome. Hide the title
   block and flip the header below the body via flex order, so its action
   buttons (Refresh + the per-section primary) become a bottom-LEFT footer
   row — the same place the app-detail tabs put theirs (.config-actions). */
#overview-view #ov-pane-backups .backup-page-section {
  display: flex;
  flex-direction: column;
}
#overview-view #ov-pane-backups .backup-page-section > .page-header {
  order: 2;
  border-bottom: none;
  border-top: none;
  background: transparent;
  margin-bottom: 0;
  /* Flush-left under the card, matching .config-actions (left padding 0). */
  padding: 16px 22px 8px 0;
}
#overview-view #ov-pane-backups .backup-page-section > .page-header .page-header-icon-slot,
#overview-view #ov-pane-backups .backup-page-section > .page-header .page-header-title {
  display: none;
}
#overview-view #ov-pane-backups .backup-page-body { order: 1; }
/* The footer row sits low on the page, so the export dropdown opens upward
   (and leftward) to stay on-screen rather than clipping past the viewport. */
#overview-view #ov-pane-backups .backup-page-section > .page-header .backup-export-menu {
  top: auto;
  bottom: calc(100% + 6px);
  right: auto;
  left: 0;
}

/* ---- Migrate tab: segmented sub-tabs (per-app Config-tab design) -------- */
/* .tabs-wrapper/.tabs-list/.tabs-content/.tab-button come from base.css; the
   list + content share one .tabs-wrapper (markup) so they join with no gap,
   exactly like the app Config tab. Only the panel show/hide is scoped here. */
#overview-view .ov-subtabs-content .tab-panel { display: none; }
#overview-view .ov-subtabs-content .tab-panel.active { display: block; }

/* Peers sub-tab: actions footer at the bottom left, mirroring the app-detail
   tabs' .config-actions row. Left padding lines the buttons up with the
   .ov-tab-body container's 16px inset above. */
#overview-view .peers-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  padding: 0 16px 16px;
}

/* ---- per-app Updates tab (app-detail) ----------------------------------- */
/* Same idiom as the Config / Backups / Tasks tabs: a title block (icon + h3 +
   description, with a bottom-border divider) followed by a recessed dark
   container holding the body. Mirrors .backup-section / .backup-title /
   .backup-snapshots-container. */
.app-updater-section {
  display: flex;
  flex-direction: column;
  padding: 0;
}
.updater-title {
  padding: 20px;
  background: transparent;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.updater-title-main { flex: 1; min-width: 0; }
.updater-title h3 {
  margin: 0 0 8px 0;
  color: var(--text-primary, #fff);
  font-size: 18px;
  font-weight: 600;
}
.updater-title p {
  margin: 0;
  color: var(--text-secondary, #ccc);
  font-size: 13px;
}
.updater-title-actions { display: flex; gap: 10px; align-items: center; flex-shrink: 0; }

/* Recessed dark panel wrapping the body — same recipe as .backup-snapshots-
   container / .tasks-container. */
.updater-detail-container {
  padding: 4px 16px;
  margin: 16px;
  background: rgba(var(--bg-rgb), 0.2);
  border-radius: 8px;
}
/* Inside the container the Version / Security / Recovery / History sections are
   separated by divider lines (the fleet row-details, not in this container, keep
   their gap-only spacing). */
.updater-detail-container .updater-detail { gap: 0; padding-top: 0; }
.updater-detail-container .updater-detail-section { padding: 16px 0; }
.updater-detail-container .updater-detail-section:first-child { padding-top: 0; }
.updater-detail-container .updater-detail-section + .updater-detail-section {
  border-top: 1px solid var(--border-color);
}
