/* The transactional console as an application of its own: the switch beside
   the search box, the rail that belongs to it, and the overview's cards and
   charts. The mailbox keeps the folder rail it always had; only one of the
   two rails is on screen at a time. */

/* ---------- the two rails ---------- */

.rail-app { display: flex; flex-direction: column; flex: 1; min-height: 0; }
#rail-console { display: none; }
body.console-app #rail-mailbox { display: none; }
body.console-app #rail-console { display: flex; }

/* The console rail opens with a chip rather than a compose button: it says
   which application the rail belongs to, and it stands where the eye already
   looks for the primary control. */
.rail-kicker {
  display: flex; align-items: center; gap: 9px; flex: none;
  /* The compose button's box exactly: same height, same margins. The two
     rails swap in place, and anything else made every folder under it jump
     ten pixels when the switch was used. */
  height: 48px; margin: 4px 0 16px; padding: 0 18px;
  border-radius: var(--r); width: fit-content;
  background: var(--accent-soft); color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
}
.rail-kicker svg { width: 16px; height: 16px; }

/* ---------- the application switch ---------- */

.app-switch {
  display: flex; align-items: center; gap: 2px; flex: none;
  height: 44px; padding: 4px; border-radius: 16px;
  background: var(--glass-bg); border: 1px solid var(--glass-border);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-inset);
}
.app-tab {
  display: flex; align-items: center; gap: 7px;
  height: 100%; padding: 0 13px; border-radius: 12px;
  color: var(--text-3); font-size: 13.5px; font-weight: 600; white-space: nowrap;
  transition: background .14s ease, color .14s ease;
}
.app-tab svg { width: 16px; height: 16px; }
.app-tab:hover { color: var(--text); }
.app-tab.is-on {
  color: var(--text);
  background: linear-gradient(135deg, rgba(255, 255, 255, .13) 0%, rgba(255, 255, 255, .06) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 1px 3px rgba(0, 0, 0, .14);
}
.app-tab.is-on svg { color: var(--accent); }
:root[data-theme='light'] .app-tab.is-on { background: var(--accent-soft); box-shadow: none; }
/* Unread mail in the inbox, on the mailbox half while the console is open. */
.app-tab-count { margin-left: -3px; color: var(--accent); font-weight: 700; font-variant-numeric: tabular-nums; }
.app-tab-count[hidden] { display: none; }

/* ---------- the console page header ---------- */

.console-title-t { min-width: 0; display: grid; }
.console-title-t span {
  font-size: 12px; color: var(--text-4); line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.console-title-t b { line-height: 1.2; }

/* ---------- the overview ---------- */

.tx-page { padding: 16px 16px 24px; display: grid; gap: 14px; }

.tx-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.tx-tile {
  display: grid; gap: 4px; align-content: start;
  padding: 14px 16px 15px; border-radius: 14px;
  border: 1px solid var(--line-soft); background: var(--hover);
}
.tx-tile-label { font-size: 12px; font-weight: 600; color: var(--text-3); }
.tx-tile-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; min-height: 34px; }
/* A headline number wears the font's own figures: tabular ones look loose
   at this size, and nothing here has to line up with the row below it. */
.tx-tile-value { font-size: 28px; font-weight: 700; letter-spacing: -.02em; line-height: 1.05; }
.tx-tile-note { font-size: 11.5px; color: var(--text-4); }
.tx-tile.is-ok .tx-tile-value { color: var(--chart-1); }
.tx-tile.is-bad .tx-tile-value { color: var(--chart-3); }

.tx-card {
  display: grid; gap: 12px; align-content: start;
  padding: 16px 16px 18px; border-radius: 16px;
  border: 1px solid var(--line-soft); background: var(--hover);
}
.tx-card-head { display: grid; gap: 2px; }
.tx-card-head h3 { font-size: 14.5px; font-weight: 600; }
.tx-card-head p { margin: 0; font-size: 12.5px; color: var(--text-4); }
/* A card is as tall as what is in it: a short domain list beside a long
   activity list should not be stretched to match it. */
.tx-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }

.tx-more {
  display: flex; align-items: center; gap: 4px; justify-self: start;
  font-size: 12.5px; font-weight: 600; color: var(--accent);
  padding: 4px 8px; margin: -4px -8px; border-radius: 8px;
}
.tx-more:hover { background: var(--hover-2); }
.tx-more svg { width: 14px; height: 14px; }

/* A row list: a name, what it is, and a number or a time on the right. */
.tx-rows { display: grid; gap: 1px; }
.tx-rows li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line-soft); font-size: 13px;
}
.tx-rows li:last-child { border-bottom: 0; }
.tx-row-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tx-row-note { font-size: 12px; color: var(--text-4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tx-row-time { font-size: 12px; color: var(--text-4); white-space: nowrap; }
/* The latest sends carry three cells: the subject over the address, and the
   time on the right of both. */
.tx-rows li:has(.tx-row-time) { grid-template-columns: minmax(0, 1fr) auto; }
.tx-rows li:has(.tx-row-time) .tx-row-note { grid-column: 1; grid-row: 2; }
.tx-rows li:has(.tx-row-time) .tx-row-time { grid-row: 1 / span 2; }

/* ---------- the charts ---------- */

/* The strip above the plot is kept free for the reading line, so a tooltip
   never covers the mark it is describing. */
.chart { position: relative; padding-top: 26px; }
.chart-plot { position: relative; }
.chart-svg { display: block; }
.chart-grid { stroke: var(--chart-grid); stroke-width: 1; }
.chart-tick { fill: var(--text-4); font-size: 10.5px; font-family: var(--font); }
.chart-col { opacity: .86; transition: opacity .12s ease; }
.chart-hit { fill: transparent; }
.chart-band:hover .chart-col { opacity: 1; }

/* The line sits over its own wash; the dot under the pointer wears a ring in
   the surface colour so it stays legible where two series cross. */
.chart-line { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.chart-wash { pointer-events: none; }
.chart-rule { stroke: var(--chart-rule); stroke-width: 1; stroke-dasharray: 3 3; pointer-events: none; }
.chart-dot { stroke: var(--pane); stroke-width: 2; pointer-events: none; }

.chart-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; padding-top: 4px; }
.chart-legend li { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-3); }
.chart-key { width: 12px; height: 3px; border-radius: 2px; }

.chart-tip {
  position: absolute; top: 0; transform: translateX(-50%);
  padding: 5px 10px 6px; border-radius: 10px; white-space: nowrap; z-index: 2;
  background: var(--glass-bg-strong); border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-2);
  font-size: 12px; color: var(--text-2); pointer-events: none;
}
.chart-tip > b { display: block; color: var(--text); font-size: 11.5px; }
.chart-tip-rows { display: grid; gap: 1px; padding-top: 3px; }
.chart-tip-rows > span { display: grid; grid-template-columns: 8px auto auto; align-items: center; gap: 7px; }
.chart-tip-rows i { width: 8px; height: 8px; border-radius: 2px; }
.chart-tip-rows em { font-style: normal; color: var(--text-3); }
.chart-tip-rows b { color: var(--text); font-variant-numeric: tabular-nums; justify-self: end; }

/* A ratio against its whole: the track is a step of the fill's own scale, so
   the state reads across the bar and not only where it is filled. */
.meters { display: grid; gap: 14px; }
.meter { display: grid; gap: 5px; }
.meter-head { display: flex; align-items: baseline; justify-content: space-between; font-size: 13px; }
.meter-head b { font-variant-numeric: tabular-nums; }
.meter-track { height: 8px; border-radius: 4px; background: var(--chart-track); overflow: hidden; }
.meter-track i { display: block; height: 100%; border-radius: 4px; transition: width .2s ease; }
.meter-note { font-size: 11.5px; color: var(--text-4); }
.chart-empty { margin: 0; display: grid; place-items: center; height: 100%; font-size: 13px; color: var(--text-4); }
.chart-empty.is-inline { height: auto; place-items: start; padding: 6px 0 2px; }

.spark { display: flex; align-items: flex-end; gap: 2px; height: 30px; width: 84px; flex: none; }
.spark i { flex: 1; border-radius: 2px 2px 0 0; min-height: 2px; }

.chart-split { display: grid; gap: 12px; }
.split-track { display: flex; gap: 2px; border-radius: 7px; overflow: hidden; }
.split-part { display: block; min-width: 3px; }
.split-empty { flex: 1; background: var(--chart-track); }
.split-legend { display: grid; gap: 7px; }
.split-legend li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto auto; align-items: center; gap: 9px; font-size: 13px; }
.split-dot { width: 10px; height: 10px; border-radius: 3px; }
.split-name { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.split-legend b { font-variant-numeric: tabular-nums; }
.split-share { font-size: 12px; color: var(--text-4); font-variant-numeric: tabular-nums; min-width: 44px; text-align: right; }

.rank { display: grid; gap: 9px; }
.rank li { display: grid; grid-template-columns: minmax(0, 132px) minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: 13px; }
.rank-name { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-track { height: 8px; border-radius: 4px; background: var(--chart-track); overflow: hidden; }
.rank-track i { display: block; height: 100%; border-radius: 4px; }
.rank b { font-variant-numeric: tabular-nums; font-size: 12.5px; }

/* A page of the console as a card on the overview: what it answers, and the
   one number that says whether you want to open it. */
.tx-jump {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  padding: 14px 16px; border-radius: 16px;
  border: 1px solid var(--line-soft); background: var(--hover); color: var(--text);
  transition: border-color .14s ease, background .14s ease;
}
.tx-jump:hover { border-color: var(--line); background: var(--hover-2); }
.tx-jump > svg { width: 16px; height: 16px; color: var(--text-4); flex: none; }
.tx-jump-ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; flex: none; }
.tx-jump-ico svg { width: 17px; height: 17px; }
.tx-jump-ico.is-ok { background: var(--accent-soft); color: var(--chart-1); }
.tx-jump-ico.is-bad { background: var(--danger-soft); color: var(--chart-3); }
.tx-jump-t { flex: 1; min-width: 0; display: grid; gap: 1px; }
.tx-jump-t b { font-size: 14px; font-weight: 600; }
.tx-jump-t span { font-size: 12.5px; color: var(--text-4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tx-jump-n { font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.tx-jump-n.is-bad { color: var(--chart-3); }

/* What the page could not compute, said once at the top instead of drawn as
   a row of empty charts. */
.tx-banner {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 14px; border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent);
  background: color-mix(in srgb, var(--warn) 10%, transparent);
}
.tx-banner > svg { width: 17px; height: 17px; color: var(--warn); flex: none; margin-top: 1px; }
.tx-banner b { display: block; font-size: 13.5px; }
.tx-banner span { display: block; font-size: 12.5px; color: var(--text-3); line-height: 1.5; }

/* The sentence behind a ranked reason code, under the bars it ranks. */
.tx-notes { display: grid; gap: 5px; padding-top: 2px; border-top: 1px solid var(--line-soft); margin-top: 2px; }
.tx-notes li { display: flex; gap: 8px; font-size: 12px; color: var(--text-4); line-height: 1.45; }
.tx-notes code { color: var(--text-3); flex: none; }

.auth-pills { display: flex; gap: 4px; }
.auth-pills .pill { font-size: 10.5px; padding: 1px 6px; }

/* A console page that is a page rather than a table keeps the table style
   for the list at the foot of it. */
.tx-page .console-table-wrap { border-radius: 12px; border: 1px solid var(--line-soft); }
.tx-page .console-table th { position: static; background: var(--hover); padding: 9px 12px; }
.tx-page .console-table th::after { display: none; }
.tx-page .console-table td { height: 40px; padding: 0 12px; }

/* ---------- responsive ---------- */

@media (max-width: 1100px) {
  .tx-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tx-grid { grid-template-columns: minmax(0, 1fr); }
  /* The page's action beside the search box is its plus alone. With the
     words, "Webhook toevoegen" ran the bar 70px past the account button at
     1024px and made it 718px wide on a 390px phone. */
  .topbar-action { margin-left: 0; }
  .topbar-action .btn { width: 38px; padding: 0; }
  .topbar-action .btn span { display: none; }
}

@media (max-width: 899px) {
  /* The rail is a drawer on a tablet, so both applications are in it; the
     switch in the top bar still says which one you are in. */
  .app-tab span { display: none; }
  .app-tab { padding: 0 11px; }
}

@media (max-width: 719px) {
  /* A phone toolbar holds a title and one control. The sub goes, and the
     title keeps the room it needs instead of being cut to three letters. */
  .console-bar { height: 52px; padding: 0 8px 0 10px; gap: 8px; }
  .console-title-ico { display: none; }
  .console-title-t span { display: none; }
  .console-title b { font-size: 15px; }
  .app-switch { height: 40px; padding: 3px; border-radius: 14px; }
  .app-tab { border-radius: 11px; }
  .tx-page { padding: 12px 12px 20px; }
  .tx-kpis { gap: 10px; }
  .tx-tile { padding: 12px 13px 13px; }
  .tx-tile-value { font-size: 24px; }
  .spark { display: none; }
  .tx-jump { padding: 12px 13px; gap: 11px; }
  .tx-jump-t span { display: none; }
  /* The phone bar carries the application you are in. */
  #bb-console { display: none; }
  body.console-app #bb-mailbox { display: none; }
  body.console-app #bb-console { display: flex; }
}

.bb-set { display: flex; align-items: stretch; flex: 1; }