/* TradingClaw 전역 스타일 — base.html이 마지막에 로드해 Bootstrap을 덮어쓴다. */

:root {
  /* 종목명/메모처럼 길어질 수 있는 셀 너비 상한.
     필요 시 페이지별 인라인 style로 오버라이드. */
  --cell-name-max: 14rem;
  --cell-memo-max: 18rem;

  /* Stage 11 — 미래 모바일 카드 전환 준비 자리. 지금은 default만.
     향후 카드 레이아웃 전환 시 미디어 쿼리에서 토글:
       --table-row-display: block;
       --cell-stack-label-display: inline-block;
     템플릿은 default 'table-row' / 'none'으로 그대로 동작 (기능 변화 없음).
     실제 카드 전환 마크업과 JS는 Stage 12 이후. */
  --table-row-display: table-row;
  --cell-stack-label-display: none;
}

html, body {
  font-family: "Noto Sans KR", -apple-system, BlinkMacSystemFont,
    "Apple SD Gothic Neo", "Malgun Gothic", system-ui, "Helvetica Neue",
    Arial, sans-serif;
  /* Noto Sans KR은 굵기 차이가 크므로 가독성 안정화 */
  font-feature-settings: "tnum" 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 모노스페이스는 따로 — 숫자 정렬은 시스템 모노 유지 */
.font-monospace,
code,
kbd,
pre,
samp {
  font-family: "JetBrains Mono", "SFMono-Regular", Consolas,
    "Liberation Mono", Menlo, monospace;
}

/* 사용자 요청 — 표 글자 한 단계 작게.
   Bootstrap 기본 1rem(16px) → 0.875rem(14px). table-sm과 함께 쓸 때 더 컴팩트. */
.table {
  font-size: 0.875rem;
}

.table thead th {
  /* 헤더는 한 줄로 — 정렬 화살표와 함께 폭 흔들림 방지 */
  white-space: nowrap;
}

/* 셀 자체에 적용해 td 폭 안에서 ellipsis. table 안에서는 max-width가
   동작하려면 td/th에 직접 적용해야 한다. */
.cell-truncate {
  max-width: var(--cell-name-max);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cell-truncate-memo {
  max-width: var(--cell-memo-max);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 작은 화면에서는 max-width를 더 줄여 가로 스크롤 우선 */
@media (max-width: 576px) {
  :root {
    --cell-name-max: 10rem;
    --cell-memo-max: 12rem;
  }
}

/* Stage 15 — 숫자 셀은 TradingView 스타일의 시스템 sans 스택 사용.
   Bootstrap의 .font-monospace는 var(--bs-font-monospace)!important라서
   변수만 override하면 자동으로 우선순위 적용된다.
   tabular-nums로 표 자릿수 정렬 유지. */
:root {
  --bs-font-monospace: -apple-system, BlinkMacSystemFont, "Trebuchet MS",
                       Roboto, Ubuntu, sans-serif;

  /* 음수 손익에 쓰는 text-primary를 더 진한 파랑으로.
     Bootstrap 기본 #0d6efd → #0033cc. 한국식 차트의 강한 파란 인상. */
  --bs-primary: #0033cc;
  --bs-primary-rgb: 0, 51, 204;
  --bs-link-color: #0033cc;
  --bs-link-color-rgb: 0, 51, 204;
  --bs-link-hover-color: #0028a3;
  --bs-link-hover-color-rgb: 0, 40, 163;
}

.font-monospace {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-weight: 300;  /* Light. fw-bold 등 utility class는 !important로 이김. */
}

.font-monospace.nowrap,
.table .font-monospace {
  white-space: nowrap;
}

/* Stage 17 — SL/TP 셀 클릭 가능 강조 */
.js-stops-edit {
  cursor: pointer;
}
.js-stops-edit:hover {
  background: rgba(13, 110, 253, 0.08);
}

/* 신호 셀 — 배지 + reasons를 한 줄로 통일.
   reasons-line은 inline-block + max-width로 ellipsis 적용,
   td 자체는 col_resize의 사용자 폭을 존중 (max-width: 100%로 부모 따름). */
.cell-signal {
  white-space: nowrap;
}

.cell-signal .reasons-line {
  /* 셀 폭이 좁으면 자연스럽게 잘림. 너무 크면 8rem 상한 — 한 화면 fit 우선. */
  max-width: 8rem;
  vertical-align: middle;
}

/* signals 전용 — 처음 로딩 시 화면 폭에 자동 fit. 컬럼들을 균등 분배.
   글자가 좁아지면 ellipsis 처리. 사용자가 col_resize로 개별 폭 조절 가능. */
.table.signals-compact {
  font-size: 0.875rem;
  table-layout: fixed;
  width: 100%;
}

.table.signals-compact > :not(caption) > * > * {
  padding: 0.3rem 0.4rem;
}

/* 1줄 강제 + 셀 폭 넘으면 자동 ellipsis */
.table.signals-compact thead th,
.table.signals-compact tbody td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.table.signals-compact thead th {
  font-weight: 600;
  white-space: nowrap;
}

.table.signals-compact .cell-truncate {
  /* 종목명만 ellipsis. 너무 긴 이름은 잘림(title로 풀 텍스트) */
  max-width: 14rem;
}

/* 마지막 신호 셀 — reasons가 길어도 한 줄 유지, td 폭 넘치면 셀 안에서 가로 스크롤.
   td 자체는 signals-compact 공통 규칙(overflow:hidden + text-overflow:ellipsis)이라
   inner div(.cell-signal-scroll)에 overflow-x를 둬서 셀 내부 스크롤바를 만든다. */
.table.signals-compact .cell-signal {
  min-width: 18rem;
}

.table.signals-compact .cell-signal .cell-signal-scroll {
  display: block;
  max-width: 100%;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
}

.table.signals-compact .cell-signal .reasons-line {
  /* badges.html 매크로의 d-inline-block + text-truncate 효과 해제 — wrap 금지·잘림 없음. */
  display: inline !important;
  white-space: nowrap !important;
  max-width: none !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

/* signals-compact 안의 모노스페이스 숫자는 동일 폭으로 정렬되도록 tabular */
.table.signals-compact .font-monospace {
  font-variant-numeric: tabular-nums;
}

/* 모든 데이터 셀에 기본적으로 한 줄 강제 — 표 높이 균일화.
   사용자가 col_resize로 폭을 늘리면 그에 맞춰 ellipsis 위치만 이동. */
.table tbody td {
  white-space: nowrap;
}

/* 단, cell-truncate-memo처럼 메모 컬럼은 이미 max-width + ellipsis로 처리 중 */

/* ── 컬럼 드래그 리사이저 ──
   js-resizable-cols 테이블의 thead th 우측 가장자리에 col_resize.js가 grabber div를 삽입한다. */
.table.js-resizable-cols {
  /* 사용자가 폭을 명시한 컬럼이 우선 유지되도록. 기존 자동 폭과 혼용. */
  table-layout: auto;
}

.col-resizer {
  position: absolute;
  top: 0;
  right: 0;
  width: 6px;
  height: 100%;
  cursor: col-resize;
  user-select: none;
  /* 시각적으로는 거의 invisible. 호버 시 강조. */
  background: transparent;
  z-index: 2;
}

.col-resizer:hover,
body.col-resizing .col-resizer {
  background: linear-gradient(
    to right,
    transparent 0,
    transparent 2px,
    rgba(13, 110, 253, 0.5) 2px,
    rgba(13, 110, 253, 0.5) 4px,
    transparent 4px
  );
}

body.col-resizing {
  cursor: col-resize !important;
  user-select: none;
}

body.col-resizing * {
  cursor: col-resize !important;
}