/*
Path: C:/Users/Owner/Desktop/vscode/BodyPlus_XPro/admin_web/static/css/debug_page.css
Description: Styles for the Flask debug dashboard page; input: HTML classes; output: debug dashboard layout and visual components.
Last-Updated: 2026-03-10
*/

  :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}

  .container{max-width:1200px;margin:0 auto}
  .mono{font-family:ui-monospace,Menlo,Consolas,monospace}

  .card{background:var(--bg);border:1px solid var(--border);border-radius:1rem}
  .card-h{padding:.9rem 1.1rem;border-bottom:1px solid #eef2f7}
  .card-b{padding:1rem 1.1rem}

  .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}

  .status-dot.ok{background:var(--ok);}
  .status-dot.bad{background:var(--bad);}
  .status-dot.off{background:#e5e7eb;}

  .pill{
    display:inline-flex;align-items:center;gap:.35rem;
    padding:.15rem .55rem;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}

  /* Section styles */
  .chip{
    display:inline-flex;align-items:center;gap:.35rem;
    padding:.2rem .6rem;border-radius:9999px;
    border:1px solid #e5e7eb;background:#f8fafc;
    font-size:.75rem;color:#334155;
  }
  .chip-sm{font-size:.7rem;padding:.15rem .5rem;}
  .chip-muted{background:#f9fafb;border-color:#e5e7eb;color:#6b7280;}
  .chip-video{white-space:nowrap;}
  .chip-ok{background:#ecfdf5;border-color:#a7f3d0;color:#166534;}
  .chip-warn{background:#fffbeb;border-color:#fde68a;color:#92400e;}
  .chip-error{background:#fef2f2;border-color:#fecaca;color:#991b1b;}

  .video-problem-hint{
    font-size:11px;
    color:#6b7280;
    margin-top:0.15rem;
  }
  .video-problem-error{color:#b91c1c;}
  .video-problem-warn{color:#b45309;}
  .video-problem-info{color:#0f766e;}

  .video-json-copy-btn{
    font-size:.7rem;
    padding:.15rem .45rem;
    border-radius:.4rem;
    border:1px solid #e5e7eb;
    background:#f9fafb;
    cursor:pointer;
    margin-bottom:.25rem;
    margin-inline-end:.25rem;
  }
  .video-json-copy-btn:hover{
    background:#e5e7eb;
  }

  .hint{font-size:12px;color:#475569}
  .explain{font-size:12px;color:#475569;margin-top:.35rem}
  .tiny{font-size:11px}
  .mono-ellipsis{direction:ltr;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .wrap-anywhere{word-break:break-word;overflow-wrap:anywhere;white-space:normal}

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

  .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:.8rem;
    white-space:nowrap;
    text-overflow:ellipsis;
    overflow:hidden;
  }
  table.slim thead{background:#f9fafb}
  table.slim tbody tr:nth-child(odd){background:#fafafa}

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

  /* Section styles */
  .dbg-chip{
    display:inline-flex;align-items:center;gap:.35rem;
    padding:.2rem .7rem;border-radius:9999px;
    border:1px solid var(--chip-border);
    background:var(--chip);
    font-size:.75rem;
    color:#111827;
    white-space:nowrap;
  }
  .dbg-chip.ok{border-color:#4ade80;background:#ecfdf5;color:#166534}
  .dbg-chip.warn{border-color:#facc15;background:#fffbeb;color:#92400e}
  .dbg-chip.bad{border-color:#fca5a5;background:#fef2f2;color:#991b1b}
  .dbg-chip.off{border-color:#e5e7eb;background:#f9fafb;color:#6b7280}

  .badge-dot{
    width:8px;height:8px;border-radius:9999px;
    display:inline-block;
  }
  .badge-dot.ok{background:var(--ok);}
  .badge-dot.warn{background:var(--warn);}
  .badge-dot.bad{background:var(--bad);}
  .badge-dot.off{background:#9ca3af;}

  .flow-step{
    display:flex;align-items:flex-start;gap:.5rem;
    font-size:.8rem;
  }
  .flow-step .status-dot{
    margin-top:.2rem;
  }
  .flow-step-text{
    color:#475569;
  }

  #toastWrap{
    position:fixed;
    bottom:1rem;
    left:1rem;
    z-index:50;
    display:flex;
    flex-direction:column;
    gap:.25rem;
  }
  .toast{
    background:#111827;
    color:#f9fafb;
    padding:.4rem .7rem;
    border-radius:.5rem;
    font-size:.75rem;
    box-shadow:0 4px 12px rgba(15,23,42,.25);
    transition:opacity .3s ease;
  }

  /* ===== System / Deps panel ===== */
  #system-deps-root{
    font-size:0.8rem;
  }
  .system-deps-summary{
    margin-bottom:0.75rem;
  }
  .system-deps-header-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:.5rem;
    margin-bottom:.35rem;
  }
  .system-deps-title{font-size:0.95rem;font-weight:600;}
  .system-deps-pill{
    display:inline-flex;align-items:center;gap:.35rem;
    padding:.15rem .55rem;border-radius:8px;
    border:1px solid #e5e7eb;background:#f8fafc;
    font-size:.72rem;color:#334155;
  }
  .system-deps-pill-ok{background:#ecfdf5;border-color:#a7f3d0;color:#065f46}
  .system-deps-pill-bad{background:#fef2f2;border-color:#fecaca;color:#991b1b}
  .system-deps-summary-list{
    margin:0;padding-left:1.2rem;
  }
  .system-deps-summary-list li{
    margin-bottom:0.1rem;
  }
  .system-deps-table{
    width:100%;border-collapse:collapse;
    font-size:.75rem;
  }
  .system-deps-table th,
  .system-deps-table td{
    border-bottom:1px solid #e5e7eb;
    padding:.3rem .35rem;
    white-space:nowrap;
    text-overflow:ellipsis;
    overflow:hidden;
  }
  .system-deps-table thead{background:#f9fafb}
  .system-deps-row-ok{background:#ecfdf5;}
  .system-deps-row-bad{background:#fef2f2;}
  .system-deps-env-meta{
    margin:0;padding-left:1.2rem;font-size:.75rem;
  }
  .system-deps-env-meta li{
    margin-bottom:0.1rem;
  }
  .system-deps-env-details{
    margin-top:.3rem;
    font-size:.72rem;
  }
  .system-deps-env-json{
    max-height:180px;
    overflow:auto;
  }
  .system-deps-copy-box{
    margin-bottom:.5rem;
  }
  .system-deps-col-error{
    white-space:normal;
    max-width:260px;
    word-break:break-word;
  }

  /* Section styles */
  .vdbg-cams-empty{
    font-size:.75rem;
    color:#6b7280;
  }
  .vdbg-cam-card{
    border:1px solid #e5e7eb;
    border-radius:.6rem;
    padding:.5rem .6rem;
    display:flex;
    flex-direction:column;
    gap:.35rem;
    background:#ffffff;
  }
  .vdbg-cam-title{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:.5rem;
    font-size:.75rem;
  }
  .vdbg-cam-dot{
    width:9px;
    height:9px;
    border-radius:9999px;
    background:#9ca3af;
    flex-shrink:0;
  }
  .vdbg-cam-label{
    font-weight:500;
    color:#111827;
  }
  .vdbg-cam-main{
    display:flex;
    align-items:flex-start;
    gap:.5rem;
  }
  .vdbg-cam-stream-wrap{
    flex:0 0 160px;
    max-width:50%;
  }
  .vdbg-cam-stream{
    width:100%;
    border-radius:.45rem;
    border:1px solid #e5e7eb;
    background:#020617;
  }
  .vdbg-cam-meta{
    flex:1;
    font-size:.7rem;
    color:#4b5563;
    display:flex;
    flex-direction:column;
    gap:.15rem;
  }
  .vdbg-cam-meta div{
    white-space:nowrap;
    text-overflow:ellipsis;
    overflow:hidden;
    direction:ltr;
  }
  .vdbg-cam-card.cam-ok{
    border-color:rgba(34,197,94,.35);
    background:#ecfdf5;
  }
  .vdbg-cam-card.cam-warn{
    border-color:rgba(245,158,11,.35);
    background:#fffbeb;
  }
  .vdbg-cam-card.cam-bad{
    border-color:rgba(239,68,68,.35);
    background:#fef2f2;
  }
  .vdbg-cam-dot.cam-dot-ok{background:#16a34a;}
  .vdbg-cam-dot.cam-dot-warn{background:#f59e0b;}
  .vdbg-cam-dot.cam-dot-bad{background:#ef4444;}

  @media (max-width:768px){
    .vdbg-cam-main{flex-direction:column;}
    .vdbg-cam-stream-wrap{max-width:100%;flex:0 0 auto;}
  }