/*
 * 공통 상단바.
 *
 * 파이썬 monitoring-stock 의 view/_topbar.html <style> 을 그대로 옮긴 것이다.
 * 두 앱이 같은 옷을 입어야 하므로 값을 임의로 바꾸지 않는다.
 * 클래스 이름 접두사 wc- 도 그대로 둔다(양쪽을 비교하며 고칠 때 필요하다).
 */
/* 이 상단바는 테마 토큰이 없는 레거시 화면(inference/trade/profit/inference-gpt) 위에도 얹힌다.
     그런 화면에선 var(--x, 라이트기본값) 이 라이트로 떨어져 다크모드에서 메뉴가 안 보였다.
     그래서 상단바가 쓰는 토큰을 여기서도 정의한다(_theme.html 과 값 동일).
     - 사용자가 라이트를 고르면(data-theme=light) OS 다크여도 라이트로 둔다. */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --panel:#171d26; --panel-soft:#1d2531; --text:#e8edf5; --muted:#8b95a7;
      --line:#262e3a; --border:#262e3a; --accent:#5b8cff; --accent-soft:#1b2740;
      --up:#ff6b6f; --shadow:0 7px 24px rgba(0,0,0,.35);
    }
  }
  :root[data-theme="dark"] {
    --panel:#171d26; --panel-soft:#1d2531; --text:#e8edf5; --muted:#8b95a7;
    --line:#262e3a; --border:#262e3a; --accent:#5b8cff; --accent-soft:#1b2740;
    --up:#ff6b6f; --shadow:0 7px 24px rgba(0,0,0,.35);
  }

  .wc-topbar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 14px;
    height: 46px;
    background: var(--panel, #ffffff);
    border-bottom: 1px solid var(--line, #e4e8ef);
    color: var(--text, #172033);
    font-family: Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI",
                 "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
    font-size: 13px;
    position: sticky;
    top: 0;
    z-index: 100;
    /* 기존 화면은 body 가 flex column + overflow hidden 이다. 줄어들지 않게 고정한다. */
    flex-shrink: 0;
  }
  .wc-brand {
    display: flex;
    align-items: center;
    gap: 7px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
  }
  .wc-brand:hover { text-decoration: none; }
  .wc-brand .wc-icon { font-size: 15px; }

  /* 브랜드(홈) 드롭다운. 홈버튼 자리를 눌러서 펼치는 메뉴로 바꾼다.
     맨 위 HOME, 그 아래로 현재 권한(nav_items 가 이미 역할별로 걸러져 온다)이 볼 수 있는 화면들. */
  .wc-brandmenu { position: relative; flex-shrink: 0; }
  .wc-brandmenu > summary {
    list-style: none;
    cursor: pointer;
    border-radius: 8px;
    padding: 4px 8px;
  }
  .wc-brandmenu > summary::-webkit-details-marker { display: none; }
  .wc-brandmenu > summary:hover { background: var(--panel-soft, #f1f4f8); }
  .wc-brandmenu .wc-caret { font-size: 10px; color: var(--muted, #687386); margin-left: 1px; }
  .wc-brandmenu[open] > summary { background: var(--panel-soft, #f1f4f8); }
  .wc-brandpanel {
    position: absolute;
    left: 0;
    top: calc(100% + 6px);
    min-width: 216px;
    max-height: 76vh;
    overflow-y: auto;
    background: var(--panel, #ffffff);
    border: 1px solid var(--line, #e4e8ef);
    border-radius: 10px;
    box-shadow: var(--shadow, 0 7px 24px rgba(20, 31, 52, 0.12));
    padding: 6px;
    z-index: 200;
  }
  .wc-brandpanel a {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    border-radius: 7px;
    color: var(--text, #172033);
    text-decoration: none;
    font-weight: 600;
    white-space: nowrap;
  }
  .wc-brandpanel a:hover { background: var(--panel-soft, #f1f4f8); text-decoration: none; }
  .wc-brandpanel a.active { background: var(--accent-soft, #eaf1fe); color: var(--accent, #2563eb); }
  .wc-brandpanel a.wc-brand-home { font-weight: 700; }
  .wc-brand-sep { height: 1px; background: var(--line, #e4e8ef); margin: 6px 4px; }

  .wc-nav {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .wc-nav::-webkit-scrollbar { display: none; }
  .wc-nav a {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 7px;
    color: var(--muted, #687386);
    text-decoration: none;
    white-space: nowrap;
    font-weight: 600;
  }
  .wc-nav a:hover {
    background: var(--panel-soft, #f1f4f8);
    color: var(--text, #172033);
    text-decoration: none;
  }
  .wc-nav a.active {
    background: var(--accent-soft, #eaf1fe);
    color: var(--accent, #2563eb);
  }

  .wc-right { display: flex; align-items: center; gap: 8px; margin-left: auto; }

  .wc-session {
    color: var(--muted, #687386);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .wc-session.low { color: var(--up, #e5484d); font-weight: 700; }

  .wc-theme {
    border: 1px solid var(--line, #e4e8ef);
    background: transparent;
    color: var(--muted, #687386);
    border-radius: 7px;
    width: 28px;
    height: 28px;
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
  }
  .wc-theme:hover { background: var(--panel-soft, #f1f4f8); }

  /* 자동 새로고침 주기 선택. 값(초) 0=안함/10/30/60. URL 파라미터 refresh 로 유지된다. */
  .wc-refresh {
    border: 1px solid var(--line, #e4e8ef);
    background: var(--panel, #ffffff);
    color: var(--text, #172033);
    border-radius: 7px;
    height: 28px;
    padding: 0 6px;
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    color-scheme: light dark;   /* 다크에서 옵션 목록도 어둡게 */
  }
  .wc-refresh:hover { background: var(--panel-soft, #f1f4f8); }
  .wc-refresh.on { border-color: var(--accent, #2563eb); color: var(--accent, #2563eb); }

  .wc-user { position: relative; }
  .wc-user > summary {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 4px 8px 4px 4px;
    border-radius: 999px;
    border: 1px solid var(--line, #e4e8ef);
    cursor: pointer;
    list-style: none;
    white-space: nowrap;
  }
  .wc-user > summary::-webkit-details-marker { display: none; }
  .wc-user > summary:hover { background: var(--panel-soft, #f1f4f8); }
  .wc-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--accent, #2563eb);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 11px;
    font-weight: 700;
  }
  .wc-uname { font-weight: 600; max-width: 110px; overflow: hidden; text-overflow: ellipsis; }

  .wc-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    min-width: 210px;
    background: var(--panel, #ffffff);
    border: 1px solid var(--line, #e4e8ef);
    border-radius: 10px;
    box-shadow: var(--shadow, 0 7px 24px rgba(20, 31, 52, 0.12));
    padding: 6px;
    z-index: 200;
  }
  .wc-menu .wc-who {
    padding: 8px 10px 10px;
    border-bottom: 1px solid var(--line, #e4e8ef);
    margin-bottom: 6px;
  }
  .wc-menu .wc-who .wc-n { font-weight: 700; }
  .wc-menu .wc-who .wc-i {
    color: var(--muted, #687386);
    font-size: 11px;
    margin-top: 2px;
    word-break: break-all;
  }
  .wc-menu a {
    display: block;
    padding: 7px 10px;
    border-radius: 7px;
    color: var(--text, #172033);
    text-decoration: none;
  }
  .wc-menu a:hover { background: var(--panel-soft, #f1f4f8); text-decoration: none; }
  .wc-menu a.wc-danger { color: var(--up, #e5484d); font-weight: 600; }

  /* 실행상태 칩(학습/추론/수집) */
  .wc-runstat { display: inline-flex; gap: 6px; align-items: center; margin-right: 4px; }
  .wc-stat {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 8px; border-radius: 999px; font-size: 11px; line-height: 1;
    background: var(--panel-soft, #f1f4f8); color: var(--text, #172033);
    border: 1px solid var(--border, #e2e7ee); white-space: nowrap;
  }
  .wc-stat .wc-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted, #98a2b3); }
  .wc-stat .wc-stat-name { color: var(--muted, #687386); }
  .wc-stat.running .wc-dot { background: #17b26a; box-shadow: 0 0 0 3px rgba(23,178,106,.18); animation: wc-pulse 1.6s ease-in-out infinite; }
  .wc-stat.running { color: #0f8a52; }
  .wc-stat.failed  .wc-dot { background: #e5484d; }
  .wc-stat.failed  { color: #c93b40; }
  .wc-stat.stopped .wc-dot { background: #98a2b3; }
  .wc-stat.unknown .wc-dot { background: #cbd2dc; }
  @keyframes wc-pulse { 0%,100%{opacity:1} 50%{opacity:.45} }

  /* 좁은 화면에서 메뉴 항목을 숨기던 규칙은 제거했다. 이제 상단바를 줄이지 않고(min-width:max-content)
     전체 메뉴를 항상 렌더하며, 화면이 좁으면 가로 스크롤로 처리한다(위 전역 규칙). */

  /* 페이지 이동(느린 화면 로딩) 중 원형 스피너로 화면 전체를 덮어 다른 조작을 막는다. */
  .wc-loading {
    position: fixed; inset: 0; z-index: 99999; display: none;
    align-items: center; justify-content: center;
    background: rgba(15, 23, 42, 0.35);
  }
  .wc-loading.on { display: flex; }
  .wc-spinner {
    width: 48px; height: 48px; border-radius: 50%;
    border: 4px solid rgba(255, 255, 255, 0.35);
    border-top-color: #ffffff;
    animation: wc-spin 0.8s linear infinite;
  }
  @keyframes wc-spin { to { transform: rotate(360deg); } }

  /* ── 전역 ── 모바일에서 '당겨서 새로고침(pull-to-refresh)' 방지 + 최소 폭 보장 ──
     최소 폭 = 상단바 메뉴가 전부 보이는 폭(max-content). 화면이 그보다 좁으면 가로 스크롤.
     (상단바를 줄이지 않으므로 항상 전체 메뉴가 렌더되고, 콘텐츠 폭도 그만큼 보존된다) */
  html, body { overscroll-behavior-y: contain; }
  body { overflow-x: auto; }
  .wc-topbar { min-width: max-content; }