/* 「設定指標」modal —— dashboard 與 watchlist 共用(markup + JS 在
   studio/templates/charts/common/modal_set_indicators*.html)。 */

/* 350 曾經是沒有範圍的 `.modal-content`,同頁的 modal_symbol 也吃到;那些 modal
   現在各自有自己的寬度規則(modal_symbol.css / chart_setting.css / ad_modal.css …),
   這裡只留設定指標自己的。Bootstrap 的 .modal-dialog 在 ≥576 是 max-width:500,
   不跟著放寬的話 560 的面板會擠出對話框、看起來偏右。 */
#modal_set_indicators .modal-dialog {
  max-width: 560px;
}

#modal_set_indicators .modal-content {
  width: 560px;
  max-width: 100%;
}

#modal_set_indicators .modal-header {
  border: 0px;
  padding: 0px;
  margin-bottom: 24px;
}

#modal_set_indicators .modal-body {
  padding: 0px;
}

/* 名額、說明、套用是三行,不是 Bootstrap 預設的靠右排列;
   分隔線明寫 --border-hairline,不留 Bootstrap 預設的那條灰線 */
#modal_set_indicators .modal-footer {
  display: block;
  padding: var(--space-12) 0 0;
  margin-top: var(--space-12);
  border: 0px;
  border-top: 1px solid var(--border-hairline);
}

#modal_set_indicators .modal-footer > * {
  margin: 0;
}

#modal_set_indicators .btn_submit {
  width: 100%;
  height: 46px;
  font-size: 14px;
  color: var(--control-fill-text);
  border: 0px;
  border-radius: var(--radius-md);
  background-color: var(--control-fill);
  margin-top: 16px;
}

#modal_set_indicators .btn_submit:hover {
  opacity: 0.85;
}

#modal_set_indicators .btn_submit:disabled {
  background-color: var(--control-disabled-fill);
  color: var(--control-disabled-fill-text);
  opacity: 1;
}

/* watchlist 才有的說明句與 Basic 升級連結(dashboard 不傳就不渲染) */
#modal_set_indicators .ind_desc {
  margin: 0;
  font-size: 14px;
  color: var(--ink-2);
}

#modal_set_indicators .ind_more {
  margin-top: var(--space-8);
  font-size: 13px;
}

#modal_set_indicators .ind_more a {
  color: var(--ink-2);
  text-decoration: underline;
}

#modal_set_indicators .ind_more a:hover {
  color: var(--link-quiet);
}

/* 分頁列:靠左、不平均分配、字不截斷,放不下就自己橫捲。四邊各留 4 給 focus ring,
   再用等量負 margin 抵銷。**不畫底下那條 hairline**(Wei 09-23):選中與否靠字色、
   字重 600 與 2px --active-line 底線三個訊號,那條橫跨整個 modal 的灰線沒有工作。 */
#modal_set_indicators .ind_tabs {
  display: flex;
  gap: var(--space-24);
  margin: var(--space-16) -4px 0;
  padding: 4px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

#modal_set_indicators .ind_tabs::-webkit-scrollbar {
  display: none;
}

#modal_set_indicators .ind_tab {
  flex: none;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-height: 44px;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--ink-2);
  border-bottom: 2px solid transparent;
  transition: color var(--motion-fast) var(--ease-standard);
}

#modal_set_indicators .ind_tab:hover {
  color: var(--ink);
}

#modal_set_indicators .ind_tab[aria-selected="true"] {
  color: var(--ink);
  font-weight: 600;
  border-bottom-color: var(--active-line);
}

/* 加粗的寬度先占好,切分頁時旁邊的分頁不位移 */
#modal_set_indicators .ind_tab::after {
  content: attr(data-label);
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  font-weight: 600;
}

#modal_set_indicators .ind_tab .tl {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-4);
}

#modal_set_indicators .ind_tab .tnum {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  color: inherit;
}

/* 高度隨內容:對話框是頂部對齊,所以只有底部會動,標題與分頁列不跳 */
#modal_set_indicators #ind_panel {
  min-height: 132px;
  max-height: min(46vh, 330px);
  overflow-y: auto;
  overscroll-behavior: contain;
  /* 左右各往外擴 12,列的 hover 色塊才有地方長出去而文字不動;面板會裁切,
     所以擴的是面板本身,列給負 margin 會被切掉 */
  margin: var(--space-8) calc(-1 * var(--space-12)) 0;
  /* Firefox 只吃這兩條;thumb 用 --ink-2(greyDark 的 dark 重上值在暗面 modal 上
     只有 2.50:1,非文字控件的 3:1 都不到) */
  scrollbar-width: thin;
  scrollbar-color: var(--ink-2) transparent;
}

#modal_set_indicators #ind_panel::-webkit-scrollbar {
  width: 6px;
}

#modal_set_indicators #ind_panel::-webkit-scrollbar-thumb {
  background: var(--ink-2);
  border-radius: var(--radius-pill);
}

#modal_set_indicators .modal-body .box_indicator {
  display: flex;
  align-items: flex-start;
  gap: var(--space-12);
  min-height: 44px;
  padding: var(--space-8) var(--space-12);
  border-radius: var(--radius-sm);
  transition: background-color var(--motion-fast) var(--ease-standard);
}

/* 不用 --surface-control-on(暗面上與 Delayed 標籤、下拉同色,hover 時兩者消失),
   也不用 --surface-muted(= 標籤底) */
#modal_set_indicators .modal-body .box_indicator:hover {
  background-color: var(--surface-row-hover);
}

#modal_set_indicators .modal-body .box_indicator .box_name {
  flex: 1;
  min-width: 0;
}

#modal_set_indicators .modal-body .box_indicator .nm {
  cursor: pointer;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-6);
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 24px;
  color: var(--ink);
  overflow-wrap: anywhere;
  margin: 0;
}

#modal_set_indicators .modal-body .box_indicator:lang(zh) .nm,
#modal_set_indicators .modal-body .box_indicator:lang(cn) .nm,
#modal_set_indicators .modal-body .box_indicator:lang(ja) .nm {
  font-family: "Noto Sans TC", sans-serif;
  font-weight: 500;
}

/* 「已選」分頁才標它原本屬於哪一類;在自己的分類裡再講一次是噪音 */
#modal_set_indicators .modal-body .box_indicator .from {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-2);
}

/* 名額滿與 Pro 鎖都是 aria-disabled(點了要說得出原因),不是真 disabled */
#modal_set_indicators .modal-body .box_indicator[aria-disabled="true"] {
  cursor: not-allowed;
}

#modal_set_indicators .modal-body .box_indicator[aria-disabled="true"]:hover {
  background-color: transparent;
}

#modal_set_indicators .modal-body .box_indicator[aria-disabled="true"] .nm {
  cursor: not-allowed;
  color: var(--ink-2);
}

#modal_set_indicators
  .modal-body
  .box_indicator[aria-disabled="true"]
  input[type="checkbox"] {
  background-color: var(--color-greyLight);
  border-color: var(--color-greyLight);
  cursor: not-allowed;
}

/* 參數下拉只在該列被勾選時出現;取消勾選只是藏起來,值留著 */
#modal_set_indicators .modal-body .box_indicator .box_param {
  display: none;
  gap: var(--space-8);
  margin-top: var(--space-8);
  flex-wrap: wrap;
}

#modal_set_indicators .modal-body .box_indicator.on .box_param {
  display: flex;
}

#modal_set_indicators .modal-body .box_indicator .box_param select {
  height: 28px;
  padding: 0px var(--space-8);
  border: 1px var(--color-greyLight) solid;
  border-radius: var(--radius-micro);
  font-size: 12px;
  line-height: 24px;
  cursor: pointer;
  -webkit-appearance: none; /* Remove default arrow for webkit browsers */
  -moz-appearance: none; /* Remove default arrow for Firefox */
  appearance: none; /* Remove default arrow for other browsers */
  background-image: url("/static/img/lucide/chevron-down.black.svg");
  background-repeat: no-repeat;
  background-position: calc(100% - 3px) center;
  background-size: 20px auto;
  padding-right: var(--space-24);
  background-color: var(--color-surface);
  color: var(--color-black);
}

#modal_set_indicators .modal-body .box_indicator input {
  flex: none;
  width: 24px;
  height: 24px;
  margin: 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border-radius: var(--radius-micro);
  border: 1px var(--color-greyLightMedium) solid;
  outline: none;
  /* 勾勾是 check.black.svg,所以底色兩個模式都留白(見 web/CLAUDE.md › Icons) */
  background-color: var(--color-white);
}

#modal_set_indicators .modal-body .box_indicator input:checked {
  background-image: url("/static/img/lucide/check.black.svg");
  background-size: 16px;
  background-repeat: no-repeat;
  background-position: center;
}

/* 空狀態:扁平一行,無插圖 */
#modal_set_indicators .ind_empty {
  padding: var(--space-24) var(--space-12);
  font-size: 14px;
  color: var(--ink-2);
}

#modal_set_indicators .ind_count {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-12);
  font-size: 13px;
  color: var(--ink-2);
}

#modal_set_indicators .ind_count b {
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* min-height 讓訊息出現 / 消失時版面不跳 */
#modal_set_indicators .ind_note {
  margin-top: var(--space-6);
  min-height: 19px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-2);
}

#modal_set_indicators .ind_note a {
  color: var(--ink-2);
  text-decoration: underline;
}

#modal_set_indicators .ind_note a:hover {
  color: var(--link-quiet);
}

@media (max-width: 768px) {
  /* 350 是全站慣例(modal_symbol / ad_modal / modal_warning_upgrade 的手機寬),
     也是 ≤768 時 .container 的寬度;用 max-width 而不是寫死 350,是因為寫死的那幾支
     在 320 寬會撐出視窗(modal_symbol 實測右緣 358 > 320),不要複製那個 bug。 */
  #modal_set_indicators .modal-content {
    width: 100%;
    max-width: 350px;
    margin-left: auto;
    margin-right: auto;
  }

  #modal_set_indicators #ind_panel {
    max-height: min(42vh, 300px);
  }
}

/* Dark Mode — set indicators modal
   這個 modal 在 dark 下是暗面(darkCard),所以角色變數照常用、不要在這裡重綁:
   --ink / --ink-2 / --active-line / --tag-neutral-* 的 dark 值本來就是為暗面調的。
   會留在這裡的只有「自己寫死亮面色、角色變數管不到」的那幾個控件。 */
body.dark-mode #modal_set_indicators .modal-content {
  background-color: var(--color-darkCard);
  color: var(--color-darkText);
}

/* 暗面上沒有它就是黑叉配暗底 */
body.dark-mode #modal_set_indicators .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

body.dark-mode #modal_set_indicators .modal-body .box_indicator .box_param select {
  border-color: var(--color-darkBorder);
  background-color: var(--color-darkBorder);
  color: var(--color-darkText);
  background-image: url("/static/img/lucide/chevron-down.darkText.svg");
}

/* 失效的勾選框在暗面要跟著暗:--check-disabled-bg 的 dark 值是 darkCard,
   跟 modal 面 1.00:1 等於看不見,所以這裡自己給 darkBorder + 亮一階的邊 */
body.dark-mode
  #modal_set_indicators
  .modal-body
  .box_indicator[aria-disabled="true"]
  input[type="checkbox"] {
  background-color: var(--color-darkBorder);
  border-color: var(--color-greyLightMedium);
}