/* 12-integrations.css: Beheer > Integraties (HEA-395): the overview's cards and one
   integration's settings page. Loaded by base.html, one <link> per file in number order; a
   later file wins on source order. */

/* The connected integrations: two cards to a row, in a grid of their own inside the page's.
   A card's five parts (head, description, banners, rows, buttons) are five rows of that grid,
   shared with the card beside it (subgrid): a part starts on one line in both cards, whether a
   description takes one line or two, and whether one card has a banner and the other none. The
   grid has no gap between its rows, so the parts stand as far apart as in any other card, and
   a row of banners that is empty in both cards takes no height. A third card starts the next
   five rows. */
.integration-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 1.25rem;
  row-gap: 0;
}

/* A card keeps the top margin every card has (05's .form-section), so the first row starts
   where a card on any other page does. A later row adds the page grid's gap to it, as a second
   row of cards on another page stands. */
.integration-card {
  display: grid;
  grid-row: span 5;
  grid-template-rows: subgrid;
}

.integration-card:nth-child(n + 3) {
  margin-top: 2.5rem;
}

/* Below tablet width the cards stand under each other, like every grid (04's collapse of
   .section-grid does not reach inside this one). Each card then has its own five rows, and
   every card after the first stands a row of cards below the one above it. */
@media (max-width: 60rem) {
  .integration-cards {
    grid-template-columns: minmax(0, 1fr);
  }

  .integration-card:nth-child(n + 2) {
    margin-top: 2.5rem;
  }
}

.integration-card > .section-note {
  margin: -0.25rem 0 0.9rem;
}

/* A card that lists fewer rows than the one beside it keeps its rows at the top of the part
   they share, each on the line of its neighbour's, instead of spreading them over it. */
.integration-card > .info-rows {
  align-content: start;
}

.integration-card > .card-actions {
  margin-top: 1rem;
}

/* A form among a card's buttons is a button like its neighbours, not a block of its own. */
.card-actions > .inline-form {
  display: flex;
}

/* An integration that is not connected yet: its name, and the pill under it (08's .card-head
   stacks them, so a long name never pushes the pill to another place than on its neighbours).
   The head reserves no more than its two lines. */
.form-section > .card-head h2 {
  margin: 0;
}

/* One setting on the settings page: its label, and under it the name it has in the server's
   environment, so whoever has to set it knows what to look for. Every row holds both lines, so
   every row is one height. A setting that is missing reads in the error tone; the word
   carries it too. */
.info-rows dt.connection-fact {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 0.15rem;
}

.connection-fact__setting {
  color: var(--color-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.6875rem;
  font-weight: 400;
}

.info-rows dd.connection-fact--missing {
  color: var(--color-error);
  font-weight: 600;
}

/* The settings and the tenant's own facts are two lists in one card. Both take one label
   column, so their values start on one vertical line. */
.info-rows--connection {
  grid-template-columns: 13.5rem 1fr;
}

/* The line that opens the tenant's own facts, under the installation's settings, and the
   notes that close the card: each starts a block, a row's height below the last rule. */
.integration-own-facts,
.integration-note {
  margin-top: 1.25rem;
}

.integration-note + .integration-note {
  margin-top: 0.5rem;
}

/* A job's schedule form under the table of an integration's jobs: one block per job, ruled off
   from the table and from the block before it. The submit sits at the row's right end. */
.job-schedule-block {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-border);
}

.job-schedule-block h3 {
  margin: 0 0 0.75rem;
  font-size: 1rem;
}

.job-schedule-block .job-schedule {
  margin-top: 0;
}

/* "Switched off" sits between the heading and the fields, a line apart from both. */
.job-schedule-block .job-schedule-note {
  margin: -0.25rem 0 0.75rem;
}

.schedule-submit {
  align-items: flex-start;
  gap: 0.75rem;
}

/* The buttons stand on the controls' line: below the height a field's label takes, and they stay
   there when an error under a control makes the row higher. */
.schedule-submit > button {
  margin-top: 1.3rem;
}

/* The settings form's own save, at the right end of the row under its fields; beside the last
   field when that field leaves half a row free. */
.integration-detail #settings-form .field-grid__end:not(.schedule-submit) {
  margin-top: 0.25rem;
}

/* A card that has nothing to list says so in the size of the rows it would have held. */
.form-section > .empty-state {
  margin: 0;
  font-size: 0.875rem;
}

/* The first setting has no rule above it, so the room a row leaves above its text is only white
   there: without it the card's first line of text stands level with the first line of the card
   beside it. A reader who is not a Global admin may get no setting at all (HEA-501): the line
   that opens the tenant's own facts then starts the card, on that same first line. */
.integration-detail .form-section__head + .info-rows--connection > dt:first-of-type,
.integration-detail .form-section__head + .info-rows--connection > dd:first-of-type {
  padding-top: 0;
}

.integration-detail .form-section__head + .integration-own-facts {
  margin-top: 1rem;
}

/* A fault's banner holds up to three lines: for the tenant, for the operator, where to report
   it. The operator's line is set apart as his by its size alone, in the banner's own colour at
   full strength, so a tenant's Management reads the first line and knows the second is not
   theirs to do. */
.fault-banner p {
  margin: 0;
}

.fault-banner p + p {
  margin-top: 0.35rem;
}

.fault-banner__repair {
  font-size: 0.8125rem;
}

/* The mail link takes the banner's colour in a warning too, as 05 gives it in an error. */
.fault-banner a {
  color: inherit;
  font-weight: 600;
}