/* ==== Data API (/dataapi, client section, Platform next release P8): API keys, usage, documentation (da-); V1.62: the change
   broker's Subscriptions and Events tabs ====
   Same look as the rest of OneStop (app.css: toolbar, subtab, panel, table, admin-state, notice). Loaded by
   Components\App.razor for every page, after app.css. Pages: TTech.Platform.Client\Apps\DataApi. Only the tokens of
   app.css: the dark theme needs nothing here. */
.da-company { margin-bottom: 12px; }
.da-company-select { max-width: 420px; }
.da-notice { margin-bottom: 10px; }
.da-foot { margin-top: 10px; }

/* The new key, shown once */
.da-created { border: 2px solid var(--accent); }
.da-secret { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.da-secret code {
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--code-bg);
  font-size: 0.95rem;
  overflow-wrap: anywhere;
  user-select: all;
}

.da-table .sub { display: block; color: var(--muted); font-size: 0.78rem; }
.da-table .num { text-align: right; white-space: nowrap; }
.da-inactive td { color: var(--muted); }
.da-dialog-heading { margin: 14px 0 6px; font-size: 0.95rem; }
.da-dialog-options { margin-top: 10px; }

/* Usage: the totals and the calls per day (stacked bars: answered, errors, over the limit) */
.da-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 12px 0; }
.da-tile { margin: 0; }
.da-tile-label { color: var(--muted); font-size: 0.82rem; font-weight: 700; }
.da-tile-value { font-size: 1.6rem; font-weight: 800; }
.da-bars { display: flex; align-items: flex-end; gap: 2px; height: 140px; padding: 4px 0; border-bottom: 1px solid var(--border); }
.da-bar { display: flex; flex: 1 1 0; flex-direction: column; justify-content: flex-end; min-width: 2px; height: 100%; }
.da-bar span { display: block; width: 100%; }
.da-bar-ok { background: var(--accent); }
.da-bar-errors { background: var(--bad); }
.da-bar-throttled { background: var(--warn); }
.da-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; color: var(--muted); font-size: 0.82rem; }
.da-legend i { display: inline-block; width: 10px; height: 10px; margin-right: 5px; border-radius: 2px; vertical-align: middle; }

/* Documentation */
.da-facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 10px 0; }
.da-facts dt { color: var(--muted); font-weight: 700; }
.da-facts dd { margin: 0; overflow-wrap: anywhere; }
.da-heading { margin: 14px 0 6px; font-size: 0.95rem; }
.da-code {
  margin: 6px 0;
  padding: 10px 12px;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--code-bg);
  font-size: 0.82rem;
  white-space: pre;
}
.da-answer { max-height: 360px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
.da-app-icon { vertical-align: middle; }
.da-op { padding: 10px 0; border-top: 1px solid var(--border); }
.da-op:first-of-type { border-top: 0; }
.da-op-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.da-method { padding: 2px 8px; border-radius: 6px; background: var(--os-accent); color: var(--os-on-accent); font-size: 0.75rem; font-weight: 800; }
.da-path { font-weight: 700; overflow-wrap: anywhere; }
.da-op-summary { color: var(--muted); }
.da-op-text { margin: 6px 0; }
.da-op-text .hint { margin-left: 6px; }
.da-params { margin: 4px 0; font-size: 0.85rem; }

/* V1.62: the scopes of a key (Filon's push tagged), the scope codes of the Documentation tab, a push's method */
.da-scopes .da-scope-name { margin-right: 6px; }
.da-scope-tag { font-size: 0.72rem; }
.da-scope-code { margin-left: 4px; }
.da-method-write { background: var(--warn); }

/* V1.62, the change broker: the Subscriptions tab (the list, its deliveries and their attempts) and the Events tab */
.da-lead { margin: 0 0 10px; }
.da-subs .da-url { overflow-wrap: anywhere; }
.da-selected td { background: var(--chip); }
.da-event-chip {
  display: inline-block;
  margin: 0 4px 4px 0;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--chip);
  font-size: 0.8rem;
}
.da-reason, .da-warn { color: var(--bad); }
.da-actions { display: flex; align-items: center; gap: 4px; }   /* inside its cell: the td stays a table cell */
.da-danger { color: var(--bad); }
.da-event-choices { display: grid; grid-template-columns: 1fr; gap: 2px; }
.da-event-choice { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.da-event-choice code { color: var(--muted); font-size: 0.78rem; }
.da-attempts td { background: var(--code-bg); }
.da-attempt-list { margin: 0; padding-left: 22px; }
.da-attempt-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 3px 0; }
.da-more { display: flex; justify-content: center; margin-top: 8px; }
.da-event .panel-head code { font-size: 0.85rem; }
.da-schema { margin-top: 6px; }
.da-schema summary { cursor: pointer; color: var(--muted); font-weight: 700; }

/* Phones: the facts one under the other */
@media (max-width: 700px) {
  .da-facts { grid-template-columns: 1fr; }
  .da-company-select { max-width: none; width: 100%; }
}