/* ===========================================================
   Fleet glue on top of Voyager.

   Voyager owns the chrome, forms, buttons, tables, tags, and
   notices. This file carries only Fleet's domain visuals (uptime
   bars, monitor cards, sparklines) and layout glue, written
   entirely in Voyager's semantic tokens so light and dark themes
   both come from the design system.
   =========================================================== */

:root{
  --fleet-up-tint-bg: var(--colour-tint-green-bg);
  --fleet-up-tint-fg: var(--colour-tint-green-fg);
}
:root[data-theme="dark"]{
  --fleet-up-tint-bg: var(--colour-dark-tint-green-bg);
  --fleet-up-tint-fg: var(--colour-dark-tint-green-fg);
}

/* ----- Layout ----- */

.fleet-main{
  max-width:1100px;
  margin:0 auto;
  padding:var(--s-5, 24px) var(--s-4, 16px) var(--s-7, 48px);
}

/* Breadcrumb trail aligns with the main content column while the
   strip itself runs full width. */
.breadcrumbs ol{max-width:1100px;margin:0 auto}

.inline-form{display:inline}

/* Log out sits in the app-header nav but must be a POST, so it's a
   button dressed as a nav link. */
.app-header-logout{
  background:none;border:none;cursor:pointer;
  font:inherit;color:inherit;
  padding:0;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:2px;
}
.app-header-logout:hover{text-decoration-thickness:2px}

/* Page header row with actions on the right. */
.page-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:var(--s-4, 16px);
  flex-wrap:wrap;
}
.page-row .btn-group{flex:none}

.fleet-section{margin-top:var(--s-6, 32px)}

/* A section-divider sharing a row with an action button keeps its line. */
.page-row > .section-divider{flex:1 1 auto;min-width:0}

.muted{color:var(--colour-fg-muted)}
.cert-warn{color:var(--colour-warning-fg, var(--colour-orange-fg));font-weight:700}
.mono{font-family:var(--font-mono, monospace)}

.form-actions{
  display:flex;gap:var(--s-2, 8px);align-items:center;
  margin-top:var(--s-4, 16px);
}

/* Equal-width stacked action groups (e.g. per-row actions on /manage/).
   Forms wrapping POST buttons must stretch with the group. */
.btn-group-vertical{min-width:110px}
.btn-group-vertical .inline-form{display:block}
.btn-block{width:100%;justify-content:flex-start}

/* ----- Public status banner ----- */

.banner{
  display:flex;align-items:center;gap:12px;
  padding:14px 18px;
  margin-bottom:var(--s-5, 24px);
  font-size:var(--fs-lg, 1.1rem);
  font-weight:700;
  border:1px solid var(--colour-border);
}
.banner-ok{
  background:var(--fleet-up-tint-bg);
  color:var(--fleet-up-tint-fg);
  border-color:var(--fleet-up-tint-fg);
}
.banner-down{
  background:var(--colour-critical-tint-bg, var(--colour-tint-red-bg));
  color:var(--colour-critical-tint-fg, var(--colour-tint-red-fg));
  border-color:var(--colour-critical-tint-border, var(--colour-tint-red-border));
}
.banner-unknown{
  background:var(--colour-canvas-muted);
  color:var(--colour-fg-muted);
}
.banner .dot{width:12px;height:12px;border-radius:50%;flex:none;background:currentColor}

/* ----- Monitor cards + uptime bars ----- */

.monitor-card{
  background:var(--colour-canvas);
  border:1px solid var(--colour-border);
  padding:14px 18px;
  margin-bottom:var(--s-3, 12px);
}
.monitor-head{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--s-4, 16px);flex-wrap:wrap;
}
.monitor-name{
  font-weight:700;
  color:var(--colour-fg);
  text-decoration:none;
}
.monitor-name:hover{color:var(--colour-link);text-decoration:underline}

.monitor-dot{
  display:inline-block;width:10px;height:10px;border-radius:50%;
  margin-right:6px;
  background:var(--colour-fg-subtle);
}
.monitor-dot-up{background:var(--colour-success)}
.monitor-dot-down{background:var(--colour-error)}

.group-chips{display:flex;gap:var(--s-2, 8px);flex-wrap:wrap;margin-bottom:var(--s-4, 16px)}

.incident-note{
  margin-top:var(--s-2, 8px);padding:8px 12px;
  font-size:var(--fs-sm, 0.85rem);
  background:var(--colour-critical-tint-bg, var(--colour-tint-red-bg));
  color:var(--colour-critical-tint-fg, var(--colour-tint-red-fg));
  border:1px solid var(--colour-critical-tint-border, var(--colour-tint-red-border));
}
.incident-note-time{opacity:.75;margin-left:var(--s-2, 8px);font-size:var(--fs-xs, 0.75rem)}
.incident-note-link{
  color:inherit;font-size:var(--fs-xs, 0.75rem);
  margin-left:var(--s-2, 8px);white-space:nowrap;
}

.section-divider-link{color:inherit;text-decoration:none}
.section-divider-link:hover{color:var(--colour-link);text-decoration:underline}

.uptime-bar{display:flex;gap:2px;margin:12px 0 6px}
.uptime-bar .day{flex:1 1 0;height:32px;min-width:2px}
.uptime-bar .day-up{background:var(--colour-success)}
.uptime-bar .day-degraded{background:var(--colour-orange-fg)}  /* 4.84:1 on white */
.uptime-bar .day-down{background:var(--colour-error)}
.uptime-bar .day-nodata{background:var(--colour-canvas-inset)}
:root[data-theme="dark"] .uptime-bar .day-degraded{background:var(--colour-dark-warning)}

.uptime-meta{
  display:flex;justify-content:space-between;
  color:var(--colour-fg-muted);font-size:var(--fs-sm, 0.85rem);
}
.uptime-stats{
  display:flex;gap:var(--s-5, 24px);flex-wrap:wrap;
  color:var(--colour-fg-muted);font-size:var(--fs-sm, 0.85rem);
  margin-top:6px;
}
.uptime-stats strong{color:var(--colour-fg);font-weight:700}

/* ----- Response-time chart (monitor detail) ----- */

.chart{display:flex;gap:var(--s-2, 8px)}
.chart-y-labels{
  display:flex;flex-direction:column;justify-content:space-between;
  text-align:right;color:var(--colour-fg-muted);
  font-size:var(--fs-xs, 0.75rem);
  padding-bottom:22px;min-width:56px;
}
.chart-body{flex:1 1 auto;min-width:0}
.chart-x-labels{
  display:flex;justify-content:space-between;
  color:var(--colour-fg-muted);font-size:var(--fs-xs, 0.75rem);margin-top:4px;
}
.sparkline{display:block;width:100%;height:120px}
.sparkline polyline{fill:none;stroke:var(--colour-link);stroke-width:2}
.sparkline .axis{stroke:var(--colour-border);stroke-width:1}

/* ----- Instance hub ----- */

.detail-grid{
  display:grid;
  grid-template-columns:max-content 1fr;
  gap:6px 20px;
  margin:0;
}
.detail-grid dt{color:var(--colour-fg-muted)}
.detail-grid dd{margin:0}

.note-card{
  border:1px solid var(--colour-border);
  padding:12px 16px;
  margin-bottom:var(--s-3, 12px);
}
.note-pinned{border-left:4px solid var(--colour-fg-strong)}
.note-body{overflow-x:auto}
.note-body pre{
  background:var(--colour-canvas-inset);
  padding:8px 12px;
  overflow-x:auto;
}

.update-row{
  border-top:1px solid var(--colour-border-muted);
  padding:10px 0;
}
.update-row:first-of-type{border-top:none}

/* ----- Server autocomplete ----- */

.autocomplete-field{position:relative}
.autocomplete-options{position:relative;display:block}
.autocomplete-list{
  position:absolute;z-index:20;display:block;min-width:260px;
  background:var(--colour-canvas);
  border:1px solid var(--colour-border-strong);
  box-shadow:0 2px 0 var(--colour-focus-fg);
}
.autocomplete-option{
  display:block;width:100%;text-align:left;
  background:none;border:none;cursor:pointer;
  padding:8px 12px;color:var(--colour-fg);font:inherit;
}
.autocomplete-option:hover{background:var(--colour-canvas-inset)}

/* ----- Rich-text pricing editor (Quill) ----- */

#pricing-editor{min-height:8rem;background:var(--colour-canvas);color:var(--colour-fg)}
.ql-toolbar.ql-snow,.ql-container.ql-snow{border-color:var(--colour-border-component)}
:root[data-theme="dark"] .ql-snow .ql-stroke{stroke:var(--colour-fg-muted)}
:root[data-theme="dark"] .ql-snow .ql-fill{fill:var(--colour-fg-muted)}
:root[data-theme="dark"] .ql-snow .ql-picker{color:var(--colour-fg-muted)}

/* ----- Instance list: equalised columns across per-server tables ----- */

.instance-table{
  table-layout:fixed;
  width:100%;
}
.instance-table th:nth-child(1){width:28%}
.instance-table th:nth-child(2){width:13%}
.instance-table th:nth-child(3){width:18%}
.instance-table th:nth-child(4){width:12%}
.instance-table th:nth-child(5){width:11%}
.instance-table th:nth-child(6){width:18%}
.instance-table td{overflow-wrap:break-word}

/* ----- CSV import preview notes ----- */

.import-note{margin:0 0 4px;font-size:var(--fs-sm, 0.85rem)}
.import-warning{color:var(--colour-warning-fg, var(--colour-orange-fg))}
.import-error{color:var(--colour-error)}

/* ----- Pagination (check list) ----- */

.pagination{
  display:flex;gap:var(--s-2, 8px);align-items:center;
  margin-top:var(--s-4, 16px);
  color:var(--colour-fg-muted);
}