/* Screen rules for databases, volumes, storage and the two platform screens.
   =========================================================================

   app.css owns the Console design system: tokens, the shell, and every shared
   component (sections, cards, tables, the rail, controls, status, steppers,
   banners, overlays, the log). This file is for rules that belong to one
   screen and nowhere else — the attach control's one-line form, a volume's
   backup cell, the audit timeline's rule.

   Owned by the screens implementer for:
     databases.js  dbdetail.js  storage.js  settings.js

   (settings.js is here, not in screens-apps.css: Activity and the platform
   forms are the storage surface seen from the platform's side — the pools, the
   object store and the archives — and the audit timeline's rules have nowhere
   else to live.)

   Rules:
     - Every colour comes from a token in app.css. A literal hex here is a bug
       in one of the two themes.
     - Prefix a class with the screen it belongs to (.db-attach-row,
       .vol-schedule, .audit-event) so nothing here collides with the kit.
     - If two screens need the same shape, it is not a screen rule: add it to
       view.js and app.css instead.
     - Wide content scrolls in its own container. The body never scrolls
       sideways at 390px.

   Order: databases, volumes, the platform screens, the audit timeline.
*/

/* ---- databases -----------------------------------------------------------
   A database is not a deployment, so its state is a count and a phase rather
   than a pill: ready-over-desired and CloudNativePG's own sentence are one
   reading, and they share a cell. */

.db-state {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px var(--sp-2);
}

/* The apps a database is attached to: links, wrapped, in the body voice. */
.db-attached {
  display: flex;
  flex-wrap: wrap;
  gap: 2px var(--sp-3);
  font-size: 13px;
}
.db-attached a { color: var(--ink-2); }
.db-attached a:hover { color: var(--accent); }
.db-unattached { font-size: 13px; color: var(--ink-3); white-space: nowrap; }

/* Attaching is one decision, so it is one line: what to attach, the variable
   it arrives in, and the button — on one baseline, stacked on a phone. */
.db-attach {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.db-attach-row {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 300px) auto;
  justify-content: start;
  align-items: end;
  gap: var(--sp-3);
}
.db-attach-go .btn { width: 100%; }

/* The masthead's machine line: the health chip with its unit beside it. */
.db-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* When a backup runs on its own, said beside the button that runs one now. */
.db-schedule,
.vol-schedule {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: 13px;
  color: var(--ink-2);
}
.db-schedule .icon,
.vol-schedule .icon { color: var(--ink-3); }
.db-schedule.off,
.vol-schedule.off { color: var(--ink-3); }

/* ---- volumes -------------------------------------------------------------
   The policy and the last snapshot are one answer — is this data anywhere
   else, and when did it last get there — so they are one cell, the sentence
   over the stamped time. */

.vol-backup {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.vol-last { font-size: 12.5px; color: var(--ink-3); white-space: nowrap; }

/* The two irreversible things a volume can have done to it live at the foot of
   its own panel, under a rule: they are not part of the policy form above
   them, and a row of six buttons in the table was hiding which of them the
   click was going to mean. */
.vol-danger {
  border-top: 1px solid var(--line);
}

/* ---- the platform screens ------------------------------------------------ */

/* A pool's description is written by one operator for the next one, so it is
   a sentence in the sans, not a machine fact in the mono. */
.pool-note {
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--ink-2);
}

/* Seven ceilings in one column is a long thin list; on a wide screen they
   read as two pairs of columns. */
@media (min-width: 900px) {
  .limits-grid .facts {
    grid-template-columns: repeat(2, max-content minmax(0, 1fr));
    column-gap: var(--sp-6);
  }
}

/* ---- the audit table -----------------------------------------------------
   An audit log is who did what: the filters above it, the action's own mark
   beside its name, and the place it landed as links into the hierarchy. */

.audit-filter {
  display: flex;
  align-items: flex-end;
  gap: var(--sp-3);
  min-width: 220px;
}

.audit-count { font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }

.audit-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.audit-action .icon { color: var(--ink-3); flex: none; }

.audit-where {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 12.5px;
}
.audit-where a { color: var(--ink-2); }
.audit-where a:hover { color: var(--accent); }
.audit-sep { color: var(--ink-3); }

@media (max-width: 639px) {
  .db-attach-row {
    grid-template-columns: minmax(0, 1fr);
    justify-content: stretch;
    align-items: stretch;
  }
  .audit-filter { width: 100%; flex-direction: column; align-items: stretch; }
}


/* ---- databases / recovery / settings / activity (worker C) ---------------
   The create wizard, the database screen's recovery window, and the two rails
   the platform's backup pages carry. Every colour is a token from app.css. */

/* The engine mark: the cylinder that stands for a database, at card size, on
   the create form's radio card and beside a database's own name. */
.engine-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: var(--radius);
  background: var(--accent-soft);
  color: var(--accent);
}
.engine-mark .icon { width: 18px; height: 18px; }

/* ---- create a database ---------------------------------------------------
   Four numbered decisions down the page with the summary beside them. The
   engine is one card today, so the grid is a run of them rather than a row of
   four fixed columns. */

.engine-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--sp-3);
}
.db-new .step-section > .form-grid,
.db-new .step-section > .field { margin-top: var(--sp-1); }

/* The storage slider and the box beside it are two views of one number. */
.slider-row {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}
.slider {
  flex: 1 1 auto;
  min-width: 0;
  accent-color: var(--accent);
  height: 22px;
}
.slider-num {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  flex: none;
}
.slider-num .num { width: 96px; }
.slider-num .unit { font-size: 13px; color: var(--ink-2); }

/* The database's name and the one word for how it is doing are one line: the
   pill is inside the title, at the title's baseline. */
.db-title {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.db-title .pill { font-size: 12.5px; }

/* ---- one database --------------------------------------------------------
   The attached apps on the Overview read as name-and-key pairs rather than a
   table: there are rarely more than a handful, and the key is the fact. */

.db-attach-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 5px var(--sp-2) 5px var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-tag);
  background: var(--surface-2);
  font-size: 13px;
}

/* ---- the recovery window -------------------------------------------------
   The retention period drawn as a line with a dot per backup, placed by time,
   so a gap in the run is visible as a gap. The dots are absolutely positioned
   by a percentage the screen computes. */

.rec-window {
  position: relative;
  height: 44px;
  margin: var(--sp-2) 0;
}
.rec-track {
  position: absolute;
  top: 21px;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: 1px;
  background: var(--surface-3);
}
.rec-dot {
  position: absolute;
  top: 16px;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  border-radius: 50%;
  border: 2px solid var(--surface);
  background: var(--ink-3);
}
.rec-dot.bad { background: var(--bad); }
.rec-dot.on {
  top: 12px;
  width: 20px;
  height: 20px;
  margin-left: -10px;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
.rec-scale {
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

/* Available backups: a run of buttons, not a table — picking one repaints the
   restore rail, so each row is a control with a pressed state. */
.rec-list {
  display: flex;
  flex-direction: column;
}
.rec-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  border: none;
  border-top: 1px solid var(--line);
  border-left: 3px solid transparent;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.rec-item:first-child { border-top: none; }
.rec-item:hover { background: var(--surface-2); }
.rec-item.on {
  border-left-color: var(--accent);
  background: var(--accent-soft);
}
.rec-item > .icon { color: var(--ink-3); flex: none; margin-left: auto; }
.rec-item .pill { flex: none; }
.rec-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--ink-2);
}
.rec-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1 1 auto;
}
.rec-title { font-size: 13.5px; font-weight: 500; }
.rec-sub { font-size: 12.5px; color: var(--ink-2); }
.rec-item.on .rec-mark { background: var(--surface); color: var(--accent); }

/* The one sentence a restore has to carry: the source is not touched. */
.rec-safe { color: var(--ink); font-weight: 500; }
.rec-safe .icon { color: var(--accent); vertical-align: -2px; }

/* ---- the platform's backup pages -----------------------------------------
   What relies on the object store, named rather than counted alone. */

.impact-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
}
.impact-row { font-size: 13px; }
.impact-row a { font-weight: 500; }

@media (max-width: 639px) {
  .slider-row { flex-direction: column; align-items: stretch; }
  .slider-num { justify-content: space-between; }
  .rec-item { padding: var(--sp-3); }
}