/*
Path: C:/Users/Owner/Desktop/vscode/BodyPlus_XPro/admin_web/static/css/exercise_debug_page.css
Description: Exercise Debug page-specific styles; input: debug template markup; output: layout and diagnostic panel styling.
Last-Updated: 2026-06-05
*/
  :root{
    --border:#e5e7eb; --muted:#6b7280; --ink:#111827; --bg:#fff;
    --subtle:#f8fafc; --chip:#f1f5f9; --chip-border:#e5e7eb;
    --ok:#16a34a; --warn:#f59e0b; --bad:#ef4444; --info:#2563eb;
  }

  html[dir="rtl"] .ltr{direction:ltr}
  body{background:#f3f4f6;font-size:15px;line-height:1.55;}

  .mono{font-family:ui-monospace,Menlo,Consolas,monospace}
  html[dir="rtl"] .mono,
  html[dir="rtl"] .mono-ellipsis{
    direction:ltr;
    unicode-bidi:plaintext;
  }

  .container{max-width:1100px;margin:0 auto;padding:1.5rem 1rem}

  .card{background:var(--bg);border:1px solid var(--border);border-radius:1rem}
  .card-h{padding:.9rem 1.1rem;border-bottom:1px solid #eef2f7;font-size:.98rem}
  .card-b{padding:1rem 1.1rem;font-size:.92rem;line-height:1.5}

  .badge{
    display:inline-flex;align-items:center;gap:.35rem;
    padding:.2rem .55rem;border-radius:9999px;font-size:.75rem;
    background:#f1f5f9;border:1px solid #e5e7eb;
    max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis
  }

  .status-dot{
    width:10px;height:10px;border-radius:9999px;background:#ef4444;
    display:inline-block;flex:0 0 10px
  }
  .status-dot.connected{background:#16a34a}
  .status-dot.warn{background:#f59e0b}

  .wrap-anywhere{word-break:break-word;overflow-wrap:anywhere;white-space:normal}
  .mono-ellipsis{direction:ltr;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .clip-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .clip-3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .tiny{font-size:11px}

  .pill{
    display:inline-flex;align-items:center;gap:.35rem;
    padding:.15rem .5rem;border-radius:8px;border:1px solid #e5e7eb;
    background:#f8fafc;font-size:.75rem;color:#334155
  }
  .pill-ok{background:#ecfdf5;border-color:#a7f3d0;color:#065f46}
  .pill-warn{background:#fffbeb;border-color:#fde68a;color:#92400e}
  .pill-bad{background:#fef2f2;border-color:#fecaca;color:#991b1b}

  .hint{font-size:13px;color:#475569;line-height:1.45}
  .explain{font-size:13px;color:#475569;margin-top:.35rem;line-height:1.45}

  .verified-flag{
    font-size:11px;padding:.1rem .35rem;border-radius:6px;
    border:1px solid #d1fae5;background:#ecfdf5;color:#065f46
  }
  .warn-flag{
    font-size:11px;padding:.1rem .35rem;border-radius:6px;
    border:1px solid #fde68a;background:#fffbeb;color:#92400e
  }
  .bad-flag{
    font-size:11px;padding:.1rem .35rem;border-radius:6px;
    border:1px solid #fecaca;background:#fef2f2;color:#991b1b
  }

  .table-wrap{overflow-x:auto}
  table.slim{width:100%;border-collapse:collapse}
  table.slim th, table.slim td{
    border-bottom:1px solid #e5e7eb;
    padding:.45rem .5rem;
    font-size:.85rem;
    white-space:nowrap;
    text-overflow:ellipsis;
    overflow:hidden;
  }
  table.slim tbody tr:nth-child(odd){background:#fafafa}

  table.slim td.wrap-anywhere,
  table.slim th.wrap-anywhere{
    white-space:normal;
  }

  .ok{color:#16a34a}
  .warn{color:#d97706}
  .bad{color:#dc2626}

  .dbg-copy-btn,
  .inline-copy-btn{
    font-size:12px;
    line-height:1.1;
    padding:.3rem .55rem;
    border-radius:.6rem;
    border:1px solid #e5e7eb;
    background:#f8fafc;
    color:#334155;
    cursor:pointer;
    white-space:nowrap;
  }
  .dbg-copy-btn:hover,
  .inline-copy-btn:hover{
    background:#e5e7eb;
  }

  .progress-wrap{
    width:100%;
    height:6px;
    border-radius:9999px;
    background:#e5e7eb;
    overflow:hidden;
  }
  .progress-fill{
    height:100%;
    width:0%;
    background:#38b6ff;
    transition:width .2s ease;
  }

  .liveq-toolbar{
    display:flex;
    flex-wrap:wrap;
    gap:.5rem;
    align-items:center;
  }
  .liveq-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
    gap:.75rem;
  }
  .liveq-metric{
    border:1px solid #e5e7eb;
    border-radius:.8rem;
    padding:.7rem .8rem;
    background:#fff;
  }
  .liveq-graph{
    border:1px solid #e5e7eb;
    border-radius:.8rem;
    background:#fff;
    overflow:hidden;
  }
  .liveq-graph svg{
    width:100%;
    height:auto;
    display:block;
  }
  .liveq-legend{
    display:flex;
    flex-wrap:wrap;
    gap:.8rem;
    align-items:center;
  }
  .liveq-legend-item{
    display:inline-flex;
    align-items:center;
    gap:.35rem;
    font-size:12px;
    color:#475569;
  }
  .liveq-legend-item i{
    width:10px;
    height:10px;
    border-radius:9999px;
    display:inline-block;
  }