@import url("/assets/brand/19546e43b4/brand.css");

/* Command center: Maestro's settings on the shared Elkwood components
   (products/shared/assets/brand/19546e43b4/components.css). Every value is an --elk-*
   token; this file only lays the components out for this page — the sticky
   header, the dense settings tables, phone stacking, sign-in and the chat thread. */

* { box-sizing: border-box; }
html, body { margin: 0; }
html { background: var(--elk-surface-canvas); }
body { min-height: 100vh; }
[hidden] { display: none !important; }

/* Header: wordmark and identity on one line, the tabs under it, both sticky. */
.cc-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--elk-surface);
  border-bottom: 1px solid var(--elk-border);
}
.cc-header .elk-tabs { border-bottom: 0; }
.cc-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--elk-space-4);
  padding-block: var(--elk-space-3);
}
.cc-identity { display: flex; align-items: baseline; gap: var(--elk-space-3); }
.cc-identity strong { font-weight: var(--elk-weight-semibold); }

.cc-main { padding-block: var(--elk-space-4) var(--elk-space-6); }
.cc-warning { margin: 0; padding: var(--elk-space-2) 0; color: var(--elk-status-danger); }
.cc-note { margin: 0; padding: var(--elk-space-1) 0; color: var(--elk-ink-muted); }
.cc-muted { color: var(--elk-ink-muted); }

/* A detail is one breadcrumb line (Tab / Name), then the object's own text. */
.elk-view-head h1 { display: flex; align-items: baseline; gap: var(--elk-space-2); }
.cc-crumb-sep { color: var(--elk-ink-muted); font-weight: var(--elk-weight-regular); }
.cc-lead { margin: 0 0 var(--elk-space-2); overflow: hidden; color: var(--elk-ink-secondary); text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.cc-lead.is-open { white-space: normal; }

/* Settings tables: aligned columns, every row one line; long text truncates
   (full text in the detail). A row of text the operator acts on (cc-col-text)
   opens in place to its full text. */
.cc-table { table-layout: auto; font-variant-numeric: lining-nums tabular-nums; }
.cc-table td { max-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-table .cc-col-name { width: 22%; }
.cc-table td.cc-col-name { font-weight: var(--elk-weight-semibold); }
.cc-table td.cc-col-desc { color: var(--elk-ink-secondary); }
.cc-table td.cc-col-desc strong { color: var(--elk-ink); font-weight: var(--elk-weight-semibold); }
.cc-table .cc-col-cadence, .cc-table .cc-col-meta { width: 22%; }
.cc-table .cc-col-status { width: 20%; }
.cc-table .cc-col-num { width: var(--elk-space-16); font-variant-numeric: lining-nums tabular-nums; }
.cc-table .cc-col-switch { width: var(--elk-space-12); text-align: right; }
.cc-table .cc-col-action { width: 1%; text-align: right; }
.cc-table td:is(.cc-col-switch, .cc-col-action) { max-width: none; overflow: visible; }
.cc-table tbody tr.is-expandable { cursor: pointer; }
.cc-table tbody tr.is-open td.cc-col-text { white-space: normal; overflow-wrap: anywhere; }
:is(.cc-lead, .cc-table tr.is-expandable):focus-visible { outline: 2px solid var(--elk-accent); outline-offset: 2px; }
.cc-table tbody tr.is-link { cursor: pointer; }
.cc-table tbody tr.is-link:is(:hover, :focus-visible) { background: var(--elk-surface-subtle); outline: none; }
.cc-group-row th {
  padding-top: var(--elk-space-3);
  color: var(--elk-ink-muted);
  font-size: var(--elk-label-size);
  font-weight: var(--elk-label-weight);
  letter-spacing: var(--elk-label-tracking);
  text-transform: uppercase;
}
.cc-empty-row td { max-width: none; color: var(--elk-ink-muted); white-space: normal; }
.cc-status-detail { font-size: var(--elk-text-xs); }
.cc-status-detail.is-warn { color: var(--elk-status-warning); }
.cc-status-detail.is-error { color: var(--elk-status-danger); }
.cc-status-detail.is-off { color: var(--elk-ink-muted); }

.cc-check-label { display: inline-flex; align-items: center; gap: var(--elk-space-1); margin-right: var(--elk-space-3); }
.cc-check-label input { accent-color: var(--elk-accent); }


/* Chat: one vertical thread; Maestro's text, your messages set off in the subtle surface. */
.cc-thread { display: flex; flex-direction: column; gap: var(--elk-space-4); padding-top: var(--elk-space-2); }
.cc-card { display: flex; flex-direction: column; gap: var(--elk-space-1); }
.cc-card-user { align-self: flex-end; max-width: 80%; }
.cc-card-user-bubble {
  padding: var(--elk-space-2) var(--elk-space-3);
  border-radius: var(--elk-radius);
  background: var(--elk-surface-subtle);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.cc-card-header { display: flex; align-items: baseline; gap: var(--elk-space-2); }
.cc-card-agent {
  color: var(--elk-ink-muted);
  font-size: var(--elk-label-size);
  font-weight: var(--elk-label-weight);
  letter-spacing: var(--elk-label-tracking);
  text-transform: uppercase;
}
.cc-card-meta { color: var(--elk-ink-muted); font-size: var(--elk-text-xs); }
.cc-card-meta.is-error, .cc-card-error { color: var(--elk-status-danger); }
.cc-card-proactive { color: var(--elk-status-success); font-size: var(--elk-text-xs); }
.cc-card-text { min-width: 0; max-width: 68ch; overflow-wrap: anywhere; }
.cc-card-text p { margin: 0 0 var(--elk-space-2); }
.cc-card-text p:last-child { margin-bottom: 0; }
.cc-card-text code { padding: 1px var(--elk-space-1); border-radius: var(--elk-radius-sm); background: var(--elk-surface-subtle); font-family: var(--elk-font-mono); font-size: var(--elk-text-xs); }
.cc-card-text pre { overflow-x: auto; padding: var(--elk-space-2); border-radius: var(--elk-radius); background: var(--elk-surface-subtle); }
.cc-card-text table { display: block; overflow-x: auto; border-collapse: collapse; }
.cc-card-text :is(th, td) { padding: var(--elk-cell-padding-block) var(--elk-space-3) var(--elk-cell-padding-block) 0; border-bottom: 1px solid var(--elk-border); text-align: left; }
.cc-card-reply { align-self: flex-start; }
.cc-thinking { padding-top: var(--elk-space-2); color: var(--elk-ink-muted); }
.cc-composer {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: flex-end;
  gap: var(--elk-space-2);
  margin-top: var(--elk-space-4);
  padding-block: var(--elk-space-2) calc(var(--elk-space-2) + env(safe-area-inset-bottom, 0px));
  background: var(--elk-surface-canvas);
}
.cc-composer textarea { flex: 1; max-height: 140px; resize: none; }
.cc-composer .elk-link { align-self: center; }
.cc-reply-target { align-self: center; }

/* Phones: each row wraps — the name with its switch or action on the first line,
   cadence/status/counts next, the description last. Counts carry their column label. */
@media (max-width: 640px) {
  .cc-table thead { display: none; }
  .cc-table, .cc-table tbody { display: block; }
  .cc-table tbody tr {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px var(--elk-space-3);
    padding: var(--elk-space-2) 0;
    border-bottom: 1px solid var(--elk-border);
  }
  .cc-table tbody :is(td, th) {
    display: block;
    order: 2;
    width: auto;
    max-width: none;
    padding: 0;
    overflow: visible;
    border: 0;
    text-align: left;
    white-space: normal;
  }
  .cc-table tbody td[class] { width: auto; }
  .cc-table tbody td.cc-col-name { flex: 1 1 0; min-width: 55%; order: 0; }
  .cc-table tbody td:is(.cc-col-switch, .cc-col-action, .cc-col-num) { order: 1; }
  .cc-table tbody td.cc-col-desc { flex-basis: 100%; order: 3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cc-table tbody tr.is-open td.cc-col-desc { white-space: normal; }
  .cc-table td.cc-col-num { white-space: nowrap; }
  .cc-table td.cc-col-num::before { content: attr(data-label) " "; color: var(--elk-ink-muted); }
  .cc-table tbody tr.cc-group-row { border-bottom-color: var(--elk-border-medium); }
  .cc-empty-row td { flex-basis: 100%; }
}