/*
  MeshFlows Dashboard custom style overrides.
  This file is loaded after style.css, so any selectors or CSS variables
  declared here will override the defaults.

  Examples:

  :root {
    --accent: #22c55e;
    --surface: #10161f;
  }

  [data-theme="light"] {
    --accent: #0f766e;
  }

  .topbar {
    border-bottom-width: 2px;
  }
  */

  /* Trace timeline styles */
  .trace-layout {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr);
    gap: 16px;
    align-items: start;
  }

  .trace-layout.side-hidden {
    grid-template-columns: 1fr;
  }

  .trace-layout-main {
    min-width: 0;
  }

  .trace-layout-side {
    border: 1px solid var(--border);
    background: var(--surface-raised);
    border-radius: var(--radius);
    padding: 12px;
    max-height: 680px;
    overflow: auto;
  }

  .span-detail-summary {
    color: var(--text-muted);
    font-size: 12px;
    margin-bottom: 10px;
  }

  /* Span detail tabs */
  .span-tabs {
    display: flex;
    border-bottom: 1px solid var(--border);
    margin-bottom: 10px;
    gap: 2px;
  }

  .span-tab {
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 12px;
    font-family: var(--font);
    padding: 6px 10px;
    margin-bottom: -1px;
  }

  .span-tab:hover {
    color: var(--text);
  }

  .span-tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
    font-weight: 600;
  }

  .span-tab.has-badge::after {
    content: "\25CF";
    font-size: 8px;
    margin-left: 4px;
    vertical-align: super;
  }

  .span-tab[data-tab="exception"].has-badge::after {
    color: var(--red);
  }

  .span-tab[data-tab="request"].has-badge::after {
    color: var(--green);
  }

  .span-tab-pane {
    min-height: 60px;
    overflow: auto;
  }

  .auth-info-list {
    list-style: disc;
    padding-left: 18px;
    margin: 6px 0 14px;
    color: var(--text-muted);
    font-size: 13px;
  }

  .auth-provider-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 6px;
  }

  .auth-provider-meta {
    margin-bottom: 12px;
  }

  .auth-local {
    margin-top: 8px;
  }

  .profile-totp-qr {
    display: inline-block;
    padding: 12px;
    background: #fff;
    border: 1px solid var(--border, #d1d5db);
    border-radius: 8px;
    margin: 12px 0;
  }

  .profile-totp-qr svg {
    display: block;
    width: 220px;
    height: 220px;
  }

  .profile-totp-manual {
    margin: 8px 0 12px;
    font-size: 13px;
    color: var(--text-muted);
  }

  .profile-totp-manual summary {
    cursor: pointer;
    color: var(--accent);
    margin-bottom: 8px;
  }

  #profileStatus:empty {
    display: none;
  }

  .auth-local summary {
    cursor: pointer;
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 8px;
  }

  .dev-api-explorer.locked {
    padding: 12px 0;
  }

  .dev-api-actions {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 8px;
  }

  .dev-api-frame {
    width: 100%;
    min-height: 520px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
  }

  .span-detail-code {
    max-height: 360px;
  }

  .span-kv-list {
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
  }

  .span-kv-row {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 10px;
    font-size: 12px;
    padding: 6px 8px;
    border-bottom: 1px solid var(--border);
  }

  .span-kv-row:last-child {
    border-bottom: none;
  }

  .span-kv-key {
    color: var(--text-muted);
    word-break: break-word;
  }

  .span-kv-value {
    color: var(--text);
    word-break: break-word;
    font-family: var(--mono);
  }

  .trace-timeline {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 12px;
    font-family: var(--mono);
  }

  .timeline-grid-header {
    display: grid;
    grid-template-columns: 160px 86px 220px minmax(280px, 1fr) 94px;
    gap: 10px;
    color: var(--text-muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0 8px;
  }

  .timeline-row {
    display: grid;
    grid-template-columns: 160px 86px 220px minmax(280px, 1fr) 94px;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border-bottom: 1px solid var(--border);
    border-radius: 6px;
    border-left: 3px solid transparent;
    background: transparent;
    color: var(--text);
    cursor: pointer;
    text-align: left;
    width: 100%;
  }

  .timeline-row:hover {
    background: var(--surface-hover);
  }

  .timeline-row.selected {
    background: var(--surface-raised);
    border-left-color: var(--accent);
  }

  .timeline-inline-detail {
    margin: -2px 0 8px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface-raised);
  }

  .step-io-block {
    margin-top: 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
  }

  .step-io-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    padding: 4px 8px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
  }

  .step-io-pre {
    max-height: 220px;
    margin: 0;
    border-radius: 0;
    border: none;
    white-space: pre-wrap;
    word-break: break-all;
    font-size: 11px;
    padding: 8px;
    overflow: auto;
  }

  .step-io-load-btn {
    display: block;
    width: 100%;
    border-radius: 0;
    border-top: 1px solid var(--border);
    background: var(--surface-raised);
    color: var(--accent);
    font-size: 11px;
    text-align: center;
    padding: 4px 8px;
  }

  .step-io-load-btn:hover {
    background: var(--surface-hover);
  }

  .timeline-inline-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
    color: var(--text-muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  /* Tone-coloured selection border */
  .timeline-row[data-tone="timeline-bar-error"].selected  { border-left-color: var(--red); }
  .timeline-row[data-tone="timeline-bar-warn"].selected   { border-left-color: var(--orange); }
  .timeline-row[data-tone="timeline-bar-step"].selected   { border-left-color: var(--purple); }
  .timeline-row[data-tone="timeline-bar-http"].selected   { border-left-color: #1976d2; }
  .timeline-row[data-tone="timeline-bar-total"].selected  { border-left-color: var(--accent); }

  .timeline-row-summary {
    border-bottom: 1px solid var(--border);
  }

  .timeline-service,
  .timeline-request,
  .timeline-step {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .timeline-service {
    color: var(--text-muted);
  }

  .timeline-request {
    font-weight: 600;
  }

  /* HTTP method badge chips */
  .method-badge {
    display: inline-block;
    border-radius: 3px;
    padding: 1px 5px;
    font-size: 10px;
    font-weight: 700;
    font-family: var(--mono);
    line-height: 1.4;
  }
  .method-get     { background: #1a7f3c; color: #fff; }
  .method-post    { background: #0550ae; color: #fff; }
  .method-put     { background: #9a6700; color: #fff; }
  .method-patch   { background: #0d6a56; color: #fff; }
  .method-delete  { background: #cf222e; color: #fff; }
  .method-head    { background: #6639ba; color: #fff; }
  .method-options { background: #57606a; color: #fff; }
  .method-otel    { background: linear-gradient(90deg, var(--accent), var(--purple)); color: #fff; }
  .method-trigger { background: #0d6efd; color: #fff; }
  .method-total   { background: var(--surface-raised, #21262d); color: var(--text-muted); border: 1px solid var(--border); }

  [data-theme="light"] .method-get     { background: #1a7f3c; }
  [data-theme="light"] .method-post    { background: #0550ae; }
  [data-theme="light"] .method-put     { background: #953d00; }
  [data-theme="light"] .method-patch   { background: #0d6a56; }
  [data-theme="light"] .method-delete  { background: #a40e26; }
  [data-theme="light"] .method-head    { background: #5b2cbf; }
  [data-theme="light"] .method-options { background: #444d56; }
  [data-theme="light"] .method-otel    { background: linear-gradient(90deg, #1f6feb, #8957e5); }
  [data-theme="light"] .method-trigger { background: #0550ae; }

  .timeline-step {
    color: var(--text);
  }

  .timeline-bar-lane {
    position: relative;
    height: 26px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 5px;
    overflow: hidden;
  }

  .timeline-origin {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--text-muted);
    opacity: 0.35;
  }

  .timeline-lead-line {
    position: absolute;
    left: 0;
    top: 50%;
    height: 0;
    border-top: 1px dashed var(--text-muted);
    opacity: 0.5;
  }

  .timeline-bar {
    position: absolute;
    top: 4px;
    bottom: 4px;
    border-radius: 4px;
    min-width: 2px;
    background: linear-gradient(90deg, var(--accent), var(--blue));
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
  }

  .timeline-bar-total {
    background: linear-gradient(90deg, var(--accent), var(--blue));
  }

  .timeline-bar-http {
    background: linear-gradient(90deg, #1976d2, #26a69a);
  }

  .timeline-bar-step {
    background: linear-gradient(90deg, var(--accent), var(--purple));
  }

  .timeline-bar-loop {
    background: linear-gradient(90deg, #5c6bc0, #7e57c2);
  }

  .timeline-bar-step-internal {
    background: linear-gradient(90deg, #00695c, #26a69a);
  }

  .timeline-bar-skip {
    background: var(--text-muted);
    opacity: 0.6;
  }

  .timeline-bar-warn {
    background: linear-gradient(90deg, var(--orange), #f4b942);
  }

  .timeline-bar-error {
    background: linear-gradient(90deg, var(--red), #ff7b72);
  }

  .timeline-section-divider {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted);
    padding: 8px 8px 4px;
    border-top: 1px solid var(--border);
    margin-top: 4px;
  }

  .timeline-iter-label {
    font-size: 11px;
    font-family: var(--mono);
    color: var(--text-muted);
    font-weight: 600;
  }

  .timeline-duration {
    text-align: right;
    color: var(--text);
    font-weight: 500;
  }

  .timeline-duration-small {
    color: var(--text-muted);
    font-size: 10px;
  }

  /* Timeline legend strip */
  .timeline-legend {
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
    font-size: 11px;
    color: var(--text-muted);
    padding: 6px 8px 6px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--border);
  }

  .timeline-fallback-note {
    margin: 0 8px 8px;
    padding: 6px 10px;
    border: 1px solid #d99a2b;
    background: #fff4db;
    color: #8a5100;
    border-radius: 6px;
    font-size: 11px;
    font-family: var(--mono);
  }

  [data-theme="light"] .timeline-fallback-note {
    border-color: #c27a00;
    background: #fff6e2;
    color: #7a4400;
  }

  .tl-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
  }

  .tl-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 3px;
    flex-shrink: 0;
  }
  .tl-dot-total { background: linear-gradient(90deg, var(--accent), var(--blue)); }
  .tl-dot-trigger { background: linear-gradient(90deg, #0d6efd, #26a69a); }
  .tl-dot-http  { background: linear-gradient(90deg, #1976d2, #26a69a); }
  .tl-dot-step  { background: linear-gradient(90deg, var(--accent), var(--purple)); }
  .tl-dot-loop  { background: linear-gradient(90deg, #5c6bc0, #7e57c2); }
  .tl-dot-step-internal { background: linear-gradient(90deg, #00695c, #26a69a); }
  .tl-dot-warn  { background: linear-gradient(90deg, var(--orange), #f4b942); }
  .tl-dot-error { background: linear-gradient(90deg, var(--red), #ff7b72); }

  .trace-results-layout {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr);
    gap: 16px;
    align-items: start;
  }

  .trace-results-list-card,
  .trace-results-detail-card {
    border: 1px solid var(--border);
    background: var(--surface-raised);
    border-radius: var(--radius);
    padding: 10px;
  }

  .trace-results-list-card .run-table-wrap {
    margin: 0;
  }

  .trace-results-detail-card {
    max-height: 520px;
    overflow: auto;
  }

  .trace-results-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
  }

  .trace-results-detail-header h4 {
    margin: 0;
    font-size: 14px;
  }

  .trace-sort-btn {
    border: none;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
    text-align: left;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
  }

  .trace-sort-btn:hover {
    color: var(--accent);
  }

  .trace-sort-indicator {
    color: var(--text-muted);
    font-size: 10px;
    min-width: 10px;
  }

  .trace-sort-indicator.active {
    color: var(--accent);
  }

  .trace-results-table tbody tr {
    cursor: pointer;
  }

  .trace-results-table tbody tr.selected {
    background: var(--surface-hover);
    box-shadow: inset 3px 0 0 var(--accent);
  }

  @media (max-width: 1360px) {
    .trace-results-layout,
    .trace-layout {
      grid-template-columns: 1fr;
    }

    .trace-results-detail-card,
    .trace-layout-side {
      max-height: none;
    }
  }

  @media (max-width: 960px) {
    .timeline-grid-header,
    .timeline-row {
      grid-template-columns: 130px 72px 160px minmax(180px, 1fr) 84px;
      gap: 8px;
      font-size: 11px;
    }
  }

  /* Export YAML Modal Styles */
  .design-export-errors {
    margin-bottom: 12px;
  }

  .design-export-errors.hidden {
    display: none;
  }

  .design-export-errors strong {
    font-weight: 600;
  }