/* ============================================================
   MONITOR — (tách từ style.css, dòng 2967-3091)
   ============================================================ */

/* ---------- Monitor (Đời sống) ---------- */
.mon-note { font-size: 11.5px; color: var(--text-faint); font-style: italic; padding: 10px 4px 0; line-height: 1.5; }
#mon-day-wrap, #mon-month-wrap { overflow-x: auto; }
#mon-day-wrap td, #mon-month-wrap td, #mon-day-wrap th, #mon-month-wrap th { white-space: nowrap; font-size: 12px; }

/* Form sửa inline trong card tiền gửi */
.dep-edit-form { display: flex; flex-direction: column; gap: 8px; padding: 10px 0 4px; }
.dep-edit-form input { width: 100%; box-sizing: border-box; background: rgba(255,255,255,0.07); color: var(--text-main); border: 1px solid var(--cyan); border-radius: 7px; padding: 9px 10px; font-size: 13.5px; font-family: var(--font); outline: none; box-shadow: none; }
.dep-edit-form input:focus { border-color: var(--violet, #a78bfa); }
html[data-theme="light"] .dep-edit-form input { background: #faf5e6; border-color: #8a5f24; color: #2c2414; }

/* Tiền gửi: input edit tại chỗ trong dòng */
.detail-card.dep-editing { grid-template-columns: 1fr; }
.detail-card.dep-editing .dc-item { flex-wrap: nowrap; align-items: center; }
.detail-card.dep-editing .dc-label { width: 110px; flex-shrink: 0; }
.detail-card.dep-editing .de-amount, .detail-card.dep-editing .de-start,
.detail-card.dep-editing .de-term, .detail-card.dep-editing .de-rate,
.detail-card.dep-editing .de-early {
  flex: 1 1 auto; min-width: 0; width: auto; max-width: none;
  background: rgba(255,255,255,0.07); color: var(--text-main);
  border: 1px solid var(--cyan); border-radius: 7px; padding: 4px 8px;
  font-size: 13px; font-family: var(--font); outline: none;
  text-align: right; box-shadow: none;
}
html[data-theme="light"] .detail-card.dep-editing input { background: #faf5e6; border-color: #8a5f24; color: #2c2414; }

.tab-btn.tab-icon { display: inline-flex; align-items: center; justify-content: center; padding: 8px 12px; }

/* Nút dev: trạng thái bị chiếm */
.ai-sess-btn.dev-busy { background: rgba(244,63,94,.15); border-color: rgba(244,63,94,.5); color: #fb7185; cursor: not-allowed; opacity: .75; }
.ai-sess-btn.checking { opacity: .5; }

/* Sub-tab Đời sống: thanh dọc màu nổi bên phải các nút, giống vạch phân cách bottom-nav */
.tabnav.lifetab-nav .tab-btn { position: relative; border-right: 1px solid rgba(113,112,255,0.30); }
.tabnav.lifetab-nav .tab-btn:last-child { border-right: none; }
html[data-theme="light"] .tabnav.lifetab-nav .tab-btn { border-right-color: rgba(8,145,178,0.22); }

.tabnav.lifetab-nav .tab-btn.tab-icon svg { pointer-events: none; }

/* Badge "Đã đăng ký" cho secrets */
.sec-badge { font-style: normal; font-size: 10.5px; font-weight: 700; color: #052e16; background: #34d399; border-radius: 999px; padding: 2px 8px; margin-left: 6px; vertical-align: middle; }
.dm-field > span { display: flex; align-items: center; gap: 4px; }

/* Radio chọn margin (cổ phiếu) */
/* Feature list (tick box) — lưới 2 cột, phân cách đường kẻ mảnh */
#feat-list { display: grid; grid-template-columns: 1fr 1fr; }
.feat-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--hairline); cursor: pointer; font-size: 13px; color: var(--text-main); }
.feat-row:nth-child(odd) { border-right: 1px solid var(--hairline); }
.feat-row input { accent-color: var(--cyan); width: 16px; height: 16px; margin: 0; }
.feat-row em { font-size: 11px; }
.margin-radios { display: flex; gap: 6px; flex-wrap: wrap; }
.margin-opt { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; background: rgba(255,255,255,0.05); border: 1px solid rgba(126,166,224,0.25); border-radius: 999px; padding: 5px 12px; font-size: 12.5px; color: var(--text-main); }
/* Edit cổ phiếu: 4 nút margin 1 hàng, Lưu/Cancel 1 hàng */
.ss-edit-actions.sub-edit-btns { flex-direction: column; align-items: stretch; gap: 8px; }
.margin-row { display: flex; gap: 8px; }
.margin-row .margin-opt { flex: 1; justify-content: center; }
.sn-actions-row { display: flex; gap: 8px; }
.sn-actions-row .ss-btn-save, .sn-actions-row .ss-btn-cancel { flex: 1; }
.margin-opt input { accent-color: var(--cyan); margin: 0; }
.margin-opt:has(input:checked) { background: rgba(113,112,255,.18); border-color: var(--cyan); color: var(--cyan); font-weight: 700; }
html[data-theme="light"] .margin-opt { border-color: rgba(15,23,42,0.2); color: #0f172a; }
html[data-theme="light"] .margin-opt:has(input:checked) { background: rgba(8,145,178,.12); color: #0369a1; }
/* Margin radios trong card chi tiết CP */
.ss-edit-actions .margin-opt { padding: 4px 9px; font-size: 11.5px; }


    /* Lifetab RAIL: thanh sáng dọc bên phải thay pill ngang */
    .lifetab-rail { display: flex !important; flex-direction: row; align-items: stretch; margin: 10px 22px 6px 0; width: calc(100% - 22px); min-width: 0; max-width: 100%; box-sizing: border-box; background: var(--bg-card); padding: 2px 3px; border: 1px solid var(--hairline); }
    .lifetab-rail-scroll { display: flex; min-width: 0; flex: 1 1 0; flex-direction: row; gap: 2px; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; scrollbar-color: var(--cyan) transparent; min-width: 0; }
    .rail-dot { display: flex !important; flex-direction: column; align-items: center; gap: 4px; background: transparent; border: none; cursor: pointer; padding: 8px 14px; border-radius: 12px; opacity: .6; transition: all .15s; white-space: nowrap; flex: 0 0 auto; }
    .rail-dot + .rail-dot { border-left: 1px solid rgba(126,166,224,0.18); border-radius: 0 12px 12px 0; }
    .rail-dot:last-child { border-radius: 0 12px 12px 0; }
    .rail-dot span { display: none; }
    .rail-dot em { display: block !important; font-style: normal; font-size: 13.5px; font-weight: 700; color: var(--text-dim,#8b96a8); letter-spacing: .2px; white-space: nowrap; }
    .rail-dot:hover { opacity: 1; background: rgba(255,255,255,0.08); }
    .rail-dot.active { opacity: 1; }
    .rail-dot[data-lifetab="sleep"].active      { background:rgba(167,139,250,.14) } .rail-dot[data-lifetab="sleep"].active em      { color:#a78bfa }
    .rail-dot[data-lifetab="sosach"].active     { background:rgba(52,211,153,.14) } .rail-dot[data-lifetab="sosach"].active em     { color:#34d399 }
    .rail-dot[data-lifetab="memos"].active      { background:rgba(74,222,128,.14) } .rail-dot[data-lifetab="memos"].active em      { color:#4ade80 }
    .rail-dot[data-lifetab="tai"].active        { background:rgba(251,191,36,.14) } .rail-dot[data-lifetab="tai"].active em        { color:#fbbf24 }
    .rail-dot[data-lifetab="monitor"].active    { background:rgba(113,112,255,.14) } .rail-dot[data-lifetab="monitor"].active em    { color:#7170ff }
    .rail-dot[data-lifetab="wireguard"].active  { background:rgba(96,165,250,.14) } .rail-dot[data-lifetab="wireguard"].active em  { color:#60a5fa }
    .rail-dot[data-lifetab="torrent"].active    { background:rgba(251,146,60,.14) } .rail-dot[data-lifetab="torrent"].active em    { color:#fb923c }
    .rail-dot[data-lifetab="datamanage"].active { background:rgba(244,114,182,.14) } .rail-dot[data-lifetab="datamanage"].active em { color:#f472b6 }
    .rail-dot.active { opacity: 1; }
    .rail-dot.active span { height: 26px; box-shadow: none; }
    .rail-dot[data-lifetab="sleep"]      span, .rail-dot[data-lifetab="sleep"].active      { color:#a78bfa } .rail-dot[data-lifetab="sleep"].active span { background:#a78bfa }
    .rail-dot[data-lifetab="sosach"]     { color:#94a3b8 } .rail-dot[data-lifetab="sosach"].active span     { background:#34d399 }
    .rail-dot[data-lifetab="memos"]      { color:#94a3b8 } .rail-dot[data-lifetab="memos"].active span      { background:#4ade80 }
    .rail-dot[data-lifetab="tai"]        { color:#94a3b8 } .rail-dot[data-lifetab="tai"].active span        { background:#fbbf24 }
    .rail-dot[data-lifetab="monitor"]    { color:#94a3b8 } .rail-dot[data-lifetab="monitor"].active span    { background:#7170ff }
    .rail-dot[data-lifetab="wireguard"]  { color:#94a3b8 } .rail-dot[data-lifetab="wireguard"].active span  { background:#60a5fa }
    .rail-dot[data-lifetab="torrent"]    { color:#94a3b8 } .rail-dot[data-lifetab="torrent"].active span    { background:#fb923c }
    .rail-dot[data-lifetab="datamanage"] { color:#94a3b8 } .rail-dot[data-lifetab="datamanage"].active span { background:#f472b6 }
    .rail-dot[hidden] { display: none !important; }

    /* Light theme: rail Đời sống — nền sáng + chữ đậm dễ đọc */
    html[data-theme="light"] .lifetab-rail {
      background: rgba(255,255,255,0.85);
      border-color: rgba(15,23,42,0.14);
      box-shadow: none;
    }
    html[data-theme="light"] .rail-dot { opacity: .7; }
    html[data-theme="light"] .rail-dot em { color: #334155; }
    html[data-theme="light"] .rail-dot:hover { background: rgba(15,23,42,0.07); }
    html[data-theme="light"] .rail-dot + .rail-dot { border-left-color: rgba(15,23,42,0.10); }
    html[data-theme="light"] .rail-dot[data-lifetab="sleep"].active      { background: rgba(109,40,217,.12) } html[data-theme="light"] .rail-dot[data-lifetab="sleep"].active em      { color:#6d28d9 }
    html[data-theme="light"] .rail-dot[data-lifetab="sosach"].active     { background: rgba(5,150,105,.12) } html[data-theme="light"] .rail-dot[data-lifetab="sosach"].active em     { color:#047857 }
    html[data-theme="light"] .rail-dot[data-lifetab="memos"].active      { background: rgba(22,163,74,.12) } html[data-theme="light"] .rail-dot[data-lifetab="memos"].active em      { color:#15803d }
    html[data-theme="light"] .rail-dot[data-lifetab="tai"].active        { background: rgba(180,83,9,.12) } html[data-theme="light"] .rail-dot[data-lifetab="tai"].active em        { color:#b45309 }
    html[data-theme="light"] .rail-dot[data-lifetab="monitor"].active    { background: rgba(8,145,178,.12) } html[data-theme="light"] .rail-dot[data-lifetab="monitor"].active em    { color:#0e7490 }
    html[data-theme="light"] .rail-dot[data-lifetab="wireguard"].active  { background: rgba(37,99,235,.12) } html[data-theme="light"] .rail-dot[data-lifetab="wireguard"].active em  { color:#1d4ed8 }
    html[data-theme="light"] .rail-dot[data-lifetab="torrent"].active    { background: rgba(234,88,12,.12) } html[data-theme="light"] .rail-dot[data-lifetab="torrent"].active em    { color:#c2410c }
    html[data-theme="light"] .rail-dot[data-lifetab="datamanage"].active { background: rgba(219,39,119,.12) } html[data-theme="light"] .rail-dot[data-lifetab="datamanage"].active em { color:#be185d }
    /* Panel đời sống chừa lề phải cho rail */
    #panel-life .tab-panel { padding-right: 22px; }

    .lifetab-rail-scroll::-webkit-scrollbar { height: 10px; }
    .lifetab-rail-scroll::-webkit-scrollbar-track { background: rgba(255,255,255,0.06); border-radius: 8px; }
    .lifetab-rail-scroll::-webkit-scrollbar-thumb { background: var(--text-faint); border-radius: 8px; border: none; }
    .lifetab-rail-scroll::-webkit-scrollbar-thumb:hover { background: var(--cyan); }

    /* Ép KPI không tràn khung 420 */
    .kpi-row { width: 100%; max-width: 100%; min-width: 0; }
    .kpi-row .kpi-card { min-width: 0; max-width: 100%; overflow-x: hidden; }
    .kpi-line { min-width: 0; }