/* 기본적으로 라이트 모드만 보이게 */
.logo-dark { display: none !important; }
.logo-light { display: inline !important; }

body.dark-mode .logo-dark { display: inline !important; }
body.dark-mode .logo-light { display: none !important; }

body, html { height:100%; margin:0; }
#container { display:flex; flex:1; height: calc(100vh - 20px); padding:10px; gap:0; }

/* 카드 스타일 */
.card { display:flex; flex-direction:column; }
.card-header { display:flex; justify-content:space-between; align-items:center; cursor:pointer; }

/* 반응형 */
@media(max-width:768px){
  #container { flex-direction:column; }
  #profit_panel, #list_panel {
    flex-grow: 0;
    height: auto; /* 기존 height 제거 */
	flex-shrink: 0;     /* 다른 패널에 잠식되지 않음 */
    min-height: 0px; /* 필요시 최소 높이 지정 */
  }
  #profit_panel { order:1; }
  #tradingview_panel { order:2;}
  #list_panel { order:3; }

  #tradingview_panel {
      height: 300px; /* 800px의 절반 */
    }

}

/* Split.js gutter */
.gutter {
  background-color: transparent;
  cursor: col-resize;
  position: relative;
  width: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gutter::before {
  content: "";
  display: block;
  width: 2px;
  height: 40px;
  background-image: radial-gradient(circle, rgba(0,0,0,0.5) 1px, transparent 1px);
  background-size: 2px 8px;
  background-repeat: repeat-y;
  border-radius: 1px;
}
.gutter:hover::before {
  background-image: radial-gradient(circle, rgba(0,0,0,0.8) 1px, transparent 1px);
}

/* Profit Rows */
#profit_rows { display:flex; flex-direction: column; flex:1; height:100%; }
.profit-row { display:flex; flex-direction: column; border-bottom:1px solid #ddd; flex-shrink:0; transition: flex-basis 0.1s; }
.row-header { padding:6px 10px; background:#f8f9fa; font-weight:bold; cursor:pointer; }
.profit-body { padding:8px; overflow:auto; flex:1; }

/* Resizer */
.resizer { height:6px; background:transparent; cursor:row-resize; display:flex; align-items:center; justify-content:center; }
.resizer::before {
  content:"";
  display:block;
  width:40px; height:2px;
  background-image: radial-gradient(circle, rgba(0,0,0,0.5) 1px, transparent 1px);
  background-size: 8px 2px;
  background-repeat: repeat-x;
  border-radius:1px;
}
.resizer:hover::before { background-image: radial-gradient(circle, rgba(0,0,0,0.8) 1px, transparent 1px); }

.profit-row {
  border: 1px solid #ccc;
  border-radius: 6px;
  margin-bottom: 1px;
  padding: 1px;
}
#tradingview_panel {
  display: flex;
  flex-direction: column;
  height: 95%; /* 부모 컨테이너 꽉 채우기 */
}

#tradingview_widget {
  flex-grow: 1;   /* 남은 공간 자동 채움 */
  min-height: 300px; /* 최소 높이 */
}

#list_panel .card {
    height: auto !important;
    min-height: 100px;        /* 필요시 최소 높이 */
}

#list_panel .card-body {
    height: auto !important;
    overflow: visible !important;
}

#list_panel .table-responsive {
    display: block;           /* Bootstrap 기본 */
    overflow-x: auto;         /* 가로 스크롤만 허용 */
    overflow-y: visible !important;  /* 세로는 숨기지 말고 늘어나게 */
    height: auto !important;  /* 강제 높이 제거 */
}


/* 다크 모드용 */
body.dark-mode {
  background-color: #121212;
  color: #e0e0e0;
}

/* 네비게이션 */
body.dark-mode .navbar {
  background-color: #1f1f1f !important;
}
body.dark-mode .navbar .nav-link,
body.dark-mode .navbar-brand {
  color: #e0e0e0 !important;
}

/* Profit Row */
body.dark-mode .profit-row {
  background-color: #1e1e1e;
  border: 1px solid #444;
}
body.dark-mode .row-header {
  background-color: #2a2a2a;
  color: #e0e0e0;
}
body.dark-mode .profit-body {
  background-color: #1e1e1e;
  /*color: #e0e0e0;*/
}

/* Card */
body.dark-mode .card {
  background-color: #1e1e1e;
  /*color: #e0e0e0;*/
  border: 1px solid #444;
}
body.dark-mode .card-header {
  background-color: #2a2a2a;
  color: #e0e0e0;
  border-bottom: 1px solid #444;
}
body.dark-mode .card-body {
  background-color: #1e1e1e;
/*color: #e0e0e0;*/
}

/* 다크 모드에서 테이블 전체 */
body.dark-mode {
  --bs-table-bg: #2c2c2c;
  --bs-table-striped-bg: #383838;
  --bs-table-striped-color: #fff;
  --bs-table-hover-bg: #444;
  --bs-table-hover-color: #fff;
  --bs-table-border-color: #555;
}

body.dark-mode table {
  background-color: #2c2c2c !important;
  color: #ffffff !important;
  border-color: #444 !important;
}


/* tr, td 개별 적용 */
body.dark-mode table tr,
body.dark-mode table td,
body.dark-mode table th {
  background-color: #2c2c2c !important;
  /*color: #ffffff !important;*/
  border-color: #444 !important;
}

#positions_body td {
  vertical-align: middle;
  text-align:center;
}

#positions_head th {
  text-align: center;     /* 가로 중앙 */
  vertical-align: middle; /* 세로 중앙 */
}

/* 다크모드 탭 */
body.dark-mode .nav-tabs .nav-link {
    background-color: #1e1e1e;
    color: #e0e0e0;
    border-color: #444 #444 #2a2a2a;
}

body.dark-mode .nav-tabs .nav-link.active {
    background-color: #2a2a2a;
    color: #fff;
    border-color: #555 #555 #2a2a2a;
}

body.dark-mode .tab-content {
    background-color: #1e1e1e;
    color: #e0e0e0;
    border: 1px solid #444;
    border-top: none;
}

/* 또는 transform 사용 */
#container {
	font-size: 0.85rem;

}

#trading_toggle {
  position: relative;
  padding-right: 30px; /* 불빛 공간 확보 */
}

.power-light {
  position: absolute;
  top: 50%;
  right: 10px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  transform: translateY(-50%);
  box-shadow: 0 0 5px rgba(0,0,0,0.2);
}

/* 깜빡이는 초록색 불빛 */
.power-on {
  background-color: #0f0;
  box-shadow: 0 0 10px #0f0;
  animation: blink 1s infinite;
}

.power-off {
  background-color: #f00; /* 빨강색 */
  box-shadow: 0 0 10px #f00;
}