/* Khung ung dung: thanh tren dinh, bang gon, modal.
   base.css giu nguyen token mau va style cua the chi tiet do Python sinh - dung
   chung mot bang mau nen SVG chen vao modal hien dung mau o ca hai che do. */

body { margin: 0; }
/* display:flex/grid o duoi de len [hidden]; khong co dong nay thi dai NAV van
   hien khi chua dang nhap. */
[hidden] { display: none !important; }
.app { display: flex; flex-direction: column; min-height: 100vh; }

/* ---- thanh tren ---- */
.topbar {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.topbar-in {
  max-width: 1180px; margin: 0 auto; padding: 8px 20px;
  display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap;
}
.brand { font-family: Archivo, "Segoe UI", system-ui, sans-serif; font-weight: 700; font-size: 17px; letter-spacing: -.01em; }
.brand { line-height: 1.25; }
/* Cham trang thai di kem dong phu, khong con la mot hang rieng */
.brand small { display: flex; align-items: center; gap: 6px; font-family: "Source Sans 3", sans-serif; font-weight: 400; font-size: 11.5px; color: var(--ink-3); letter-spacing: 0; }

.navstrip { display: flex; gap: 16px; flex-wrap: wrap; margin-left: auto; }
.navstrip .cell { line-height: 1.25; }
.navstrip .k { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
.navstrip .v { font-family: "IBM Plex Mono", monospace; font-variant-numeric: tabular-nums; font-size: 15.5px; font-weight: 600; }
.navstrip .v.up { color: var(--up); } .navstrip .v.dn { color: var(--down); }

.tools { display: flex; align-items: center; gap: 8px; }

/* ---- nut ---- */
.btn {
  font: inherit; font-size: 13.5px; font-weight: 600;
  padding: 7px 13px; border-radius: 9px; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
}
.btn:hover { border-color: var(--ink-3); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover { filter: brightness(1.08); border-color: var(--accent); }
.btn-ghost { background: transparent; }
.btn-danger { color: var(--down); border-color: color-mix(in srgb, var(--down) 40%, var(--line)); }
.btn-icon { padding: 7px 9px; line-height: 1; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
/* Nhan ngan cho man hep. Dat bang hai the that chu khong bang ::after +
   font-size:0 - kieu do lam ten cua nut rong trong cay tro nang. */
.btn .sm { display: none; }

/* Cham trang thai realtime */
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); display: inline-block; }
.dot.live { background: var(--up); box-shadow: 0 0 0 0 color-mix(in srgb, var(--up) 60%, transparent); }
@media (prefers-reduced-motion: no-preference) {
  .dot.live { animation: pulse 2s infinite; }
  @keyframes pulse {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--up) 55%, transparent); }
    70% { box-shadow: 0 0 0 7px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
  }
}
/* Chi trinh doc man hinh thay: mau cham khong truyen duoc y nghia gi cho ho */
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
      overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.livelabel { font-size: 12px; color: var(--ink-3); display: flex; align-items: center; gap: 6px; }

/* ---- than trang ---- */
main { flex: 1; max-width: 1180px; width: 100%; margin: 0 auto; padding: 10px 20px 56px; }

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 13px; flex-wrap: wrap; }
.tab {
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  background: none; border: none; border-bottom: 2px solid transparent;
  color: var(--ink-3); padding: 7px 12px; margin-bottom: -1px;
}
.tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.tab .count { font-size: 11.5px; color: var(--ink-3); font-weight: 500; }

.toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.toolbar input[type="search"], .toolbar select, .field input, .field select {
  font: inherit; font-size: 13.5px; padding: 7px 10px; border-radius: 9px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
}
.toolbar input[type="search"] { min-width: 160px; }

/* ---- bang ---- */
.tablewrap { border: 1px solid var(--line); border-radius: 12px; overflow-x: auto; background: var(--surface); box-shadow: var(--shadow); }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
thead th {
  position: sticky; top: 0; background: var(--surface-2); z-index: 1;
  text-align: right; font-size: 11px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 650; padding: 9px 12px; white-space: nowrap;
  border-bottom: 1px solid var(--line);
}
thead th:first-child, tbody td:first-child { text-align: left; }
thead th.sortable { cursor: pointer; user-select: none; }
thead th.sortable:hover { color: var(--ink); }
tbody td { padding: 9px 12px; text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap; }
tbody tr:last-child td { border-bottom: none; }
tbody tr { cursor: pointer; }
tbody tr:hover td { background: var(--surface-2); }
tbody tr.alert td { background: color-mix(in srgb, var(--down) 9%, transparent); }
tbody tr.win td { background: color-mix(in srgb, var(--up) 8%, transparent); }
td.sym { font-family: Archivo, sans-serif; font-weight: 700; font-size: 15px; }
td.num, th.num { font-family: "IBM Plex Mono", monospace; font-variant-numeric: tabular-nums; }
.up { color: var(--up); } .dn { color: var(--down); }
tfoot td { padding: 10px 12px; text-align: right; font-weight: 700; border-top: 2px solid var(--line); font-family: "IBM Plex Mono", monospace; font-variant-numeric: tabular-nums; }
tfoot td:first-child { text-align: left; font-family: inherit; }

.flash { animation: flash .9s ease-out; }
@media (prefers-reduced-motion: reduce) { .flash { animation: none; } }
@keyframes flash { from { background: color-mix(in srgb, var(--accent) 22%, transparent); } to { background: transparent; } }

/* ---- trang thai rong / khoa ---- */
.notice {
  border: 1px dashed var(--line); border-radius: 12px; padding: 26px 20px;
  text-align: center; color: var(--ink-2); background: var(--surface);
}
.notice h3 { margin: 0 0 6px; font-size: 16px; color: var(--ink); }
.notice p { margin: 0 auto 14px; max-width: 460px; font-size: 14px; }

/* ---- modal ---- */
dialog {
  border: 1px solid var(--line); border-radius: 16px; padding: 0;
  background: var(--surface); color: var(--ink);
  max-width: min(940px, calc(100vw - 32px)); width: 100%;
  max-height: calc(100vh - 48px); box-shadow: 0 24px 64px -20px rgba(0,0,0,.5);
}
dialog::backdrop { background: rgba(6, 10, 14, .58); backdrop-filter: blur(2px); }
dialog.narrow { max-width: min(460px, calc(100vw - 32px)); }
/* Ruot modal la flex doc: than co gian, dau va chan giu nguyen. Doan chieu cao
   bang calc() se sai moi khi doi padding hay co chu. */
/* PHAI ghim vao [open]: trinh duyet an <dialog> dong bang display:none, dat
   display:flex tran lan se lam moi modal hien thuong truc tren trang. */
dialog[open] { display: flex; flex-direction: column; }
dialog[open] > form { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.modal-head { display: flex; align-items: center; gap: 12px; padding: 15px 18px; border-bottom: 1px solid var(--line); background: var(--surface); z-index: 2; flex: none; }
.modal-head h2 { flex: 1; }
.modal-body { padding: 18px; overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.modal-foot { display: flex; gap: 8px; justify-content: flex-end; padding: 13px 18px; border-top: 1px solid var(--line); background: var(--surface); flex: none; }
.modal-body .card { border: none; box-shadow: none; border-radius: 0; }

.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 13px; }
.field label { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.field .hint { font-size: 12px; color: var(--ink-3); }
.err { color: var(--down); font-size: 13px; margin: 0 0 12px; min-height: 1px; }
.ok { color: var(--up); font-size: 13px; }

/* Bang sua danh muc */
.editrows { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.editrows th { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3); text-align: left; padding: 0 6px 6px; font-weight: 650; }
.editrows td { padding: 3px 6px 3px 0; }
.editrows input { font: inherit; font-size: 13.5px; width: 100%; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--ground); color: var(--ink); }
.editrows input.num { font-family: "IBM Plex Mono", monospace; text-align: right; }

/* ---- man vua (<=900px) ----
   Tieu de + 4 o NAV + 3 nut khong con vua mot hang, va khi cum nut bi day xuong
   thi thanh tren cao 120px. Chu dong cho dai NAV xuong hang rieng dang luoi:
   con 78px va bo cuc du doan duoc. */
@media (max-width: 900px) {
  /* Chi thu nho de van du mot hang. Ep dai NAV xuong hang rieng o day lam thanh
     tren cao 109px - te hon 71px cua mot hang. */
  .navstrip { gap: 10px; }
  .navstrip .k { font-size: 9.5px; letter-spacing: .05em; }
  .navstrip .v { font-size: 13px; margin-top: 1px; }
  .brand { font-size: 15px; }
  .btn { padding: 6px 10px; font-size: 13px; }
  .topbar-in { gap: 8px 10px; }
  /* Cum nut la thu lam tran o dai nay: nhan ngan cat ~75px */
  #logoutBtn .who { display: none; }
  .btn .lg { display: none; }
  .btn .sm { display: inline; }
}

/* ---- vien tron cho tin hieu / hanh dong ----
   Doc mot bang 90 dong thi chu thuong troi lan vao nhau. Bo vien va nen nhat
   theo mau y nghia giup quet mat nhanh hon nhieu, giong the chi tiet. */
td .pill { display: inline-block; font-size: 11px; padding: 3px 9px; }
.tablewrap .pill-buy   { background: color-mix(in srgb, var(--up) 13%, transparent);   color: var(--up);   border-color: color-mix(in srgb, var(--up) 32%, transparent); }
.tablewrap .pill-watch { background: color-mix(in srgb, var(--hold) 15%, transparent); color: var(--hold); border-color: color-mix(in srgb, var(--hold) 34%, transparent); }
.tablewrap .pill-avoid { background: color-mix(in srgb, var(--down) 12%, transparent); color: var(--down); border-color: color-mix(in srgb, var(--down) 30%, transparent); }

/* ---- dien thoai: bang thanh the hai cot ----
   PHAI ghim vao .tablewrap. Neu de `table, tr, td` tran lan thi bang nhap trong
   modal cung bien thanh block va toan bo o nhap bien mat. */
@media (max-width: 720px) {
  .topbar-in { padding: 8px 13px; gap: 8px 10px; }
  main { padding: 8px 13px 48px; }
  .brand { font-size: 15px; }
  /* Cum nut nam cung dong voi tieu de, ep ve phai. `order` la thu quyet dinh:
     de mac dinh thi chinh cum nut bi day xuong duoi dai NAV. */
  .tools { margin-left: auto; gap: 6px; order: 2; }
  .btn { padding: 6px 10px; font-size: 13px; }
  .navstrip { order: 3; width: 100%; margin-left: 0; gap: 0;
              display: grid; grid-template-columns: repeat(4, 1fr); }
  .navstrip .v { font-size: 13px; }

  /* The chi tiet va bang sua danh muc thi can ca man hinh */
  dialog { max-width: 100vw; max-height: 100vh; height: 100vh; border-radius: 0; border: none; }
  /* Nhung hop dang nhap chi co hai o: keo full man hinh se ho ra mot mang
     trang lon phia duoi. Cho no co lai theo noi dung va nam giua. */
  /* `height: auto` KHONG co lai theo noi dung o day: trinh duyet dat
     `position:absolute; inset:0` cho <dialog>, nen auto nghia la gian kin tu
     tren xuong duoi. `fit-content` moi la thu can. */
  dialog.narrow {
    height: fit-content; max-height: calc(100vh - 32px); width: calc(100vw - 24px);
    margin: auto; border-radius: 16px; border: 1px solid var(--line);
  }
  /* Va phai tat luon flex-grow: de `flex: 1` thi than hop no ra lap day chieu
     cao toi da, hop cao 780px trong khi noi dung chi 140px. */
  dialog.narrow[open] > form { flex: 0 0 auto; }
  dialog.narrow .modal-body { flex: 0 1 auto; }


  .tablewrap { border-radius: 12px; }
  .tablewrap table, .tablewrap thead, .tablewrap tbody,
  .tablewrap tr, .tablewrap td { display: block; }
  .tablewrap thead { display: none; }

  .tablewrap tbody tr {
    display: grid; grid-template-columns: 1fr 1fr; gap: 9px 12px;
    padding: 13px; border-bottom: 1px solid var(--line);
  }
  .tablewrap tbody td { padding: 0; border: none; text-align: left; white-space: normal; }

  /* Dong dau: ma ben trai, gia hoac lenh ben phai */
  .tablewrap td[data-head]  { grid-column: 1; font-size: 16px; align-self: center; }
  .tablewrap td[data-head2] { grid-column: 2; text-align: right; font-size: 15px; align-self: center; }

  /* Cac o so co nhan chu nho phia tren - nho vay dong khong con trong huenh */
  .tablewrap td[data-l]::before {
    content: attr(data-l); display: block;
    font-family: "Source Sans 3", sans-serif;
    font-size: 9.5px; letter-spacing: .07em; text-transform: uppercase;
    color: var(--ink-3); font-weight: 600; margin-bottom: 1px;
  }
  .tablewrap td[data-l] { font-size: 13.5px; }
  .tablewrap td[data-l]:nth-of-type(even) { text-align: right; }

  .tablewrap td[data-foot]  { grid-column: 1; }
  .tablewrap td[data-foot2] { grid-column: 2; text-align: right; font-size: 12.5px; color: var(--ink-3); align-self: center; }

  /* To mau o CA hang lan tung o thi hai lop mau trong chong len nhau, o thanh
     dam hon khe -> nhin nhu ke soc. Chi to hang, o de trong suot. */
  .tablewrap tbody tr.alert td, .tablewrap tbody tr.win td,
  .tablewrap tbody tr:hover td { background: transparent; }
  .tablewrap tbody tr.alert { background: color-mix(in srgb, var(--down) 9%, transparent); }
  .tablewrap tbody tr.win { background: color-mix(in srgb, var(--up) 8%, transparent); }

  /* colspan khong con nghia khi o thanh block: gop chan bang lai mot dong */
  .tablewrap tfoot tr { display: flex; flex-wrap: wrap; justify-content: space-between;
                        gap: 4px 10px; padding: 11px 13px; border-top: 2px solid var(--line); }
  .tablewrap tfoot td { display: block; border: none; padding: 0; }
  .tablewrap tfoot td:empty { display: none; }

  /* Bang nhap trong modal: moi ma thanh mot the co nhan, khong ep 5 cot vao 375px */
  .editrows, .editrows tbody, .editrows tr, .editrows td { display: block; }
  .editrows thead { display: none; }
  .editrows tbody tr {
    display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px;
    padding: 11px 0; border-bottom: 1px solid var(--line);
  }
  .editrows td { padding: 0; }
  .editrows td:nth-child(1) { grid-column: 1 / 3; }
  .editrows td:nth-child(4) { grid-column: 1 / 3; }
  .editrows td:nth-child(5) { grid-area: 1 / 3; align-self: center; }
  .editrows td::before {
    content: attr(data-l); display: block;
    font-size: 9.5px; letter-spacing: .07em; text-transform: uppercase;
    color: var(--ink-3); font-weight: 600; margin-bottom: 2px;
  }
  .editrows td:nth-child(5)::before { content: none; }
}

/* ---- thanh cuon ----
   Mac dinh cua Windows day va bao, lai to nhat o dung cho hay lo ra: khung
   bang va ruot modal. Firefox chi hieu scrollbar-width/color; WebKit dung
   ::-webkit-scrollbar. Khai ca hai. */
* { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--line); border-radius: 999px;
  /* Vien trong suot lam thanh keo mong lai ma van de trung chuot */
  border: 3px solid transparent; background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--ink-3); background-clip: content-box; }
::-webkit-scrollbar-corner { background: transparent; }

/* Cuon ngang trong khung bang: bo them chut khoang de thanh keo khong de len
   dong cuoi, va bat cuon muot khi bam sang tab khac */
.tablewrap { scrollbar-gutter: stable; }
.modal-body { scrollbar-gutter: stable; overscroll-behavior: contain; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }