/* style.css — CSS thuan, khong font ngoai, khong CDN (luat L7).
   Tong mau: xanh la nhat (light green) + trang.
   Bo cuc lay theo giao dien Pipedata-Pro 14.0. */

:root {
  --bg: #ffffff;
  --panel: #ffffff;
  --sheet: #ffffff;
  --ink: #14372a;
  --ink-soft: #5c7a68;
  --line: #cfe6d5;
  --line-soft: #eaf6ee;
  --accent: #2f9e56;          /* xanh la nhat chu dao */
  --accent-dark: #1f7a41;
  --accent-soft: #e7f6ec;
  --bar: #23864c;             /* thanh cong cu, chu trang doc ro */
  --bar-ink: #ffffff;
  --warn-bg: #fff6e0;
  --warn-ink: #8a5a00;
  --dwg-ink: #003;            /* net ve: xanh navy, giu nguyen mau but cua ban goc */
  --dwg-thin: #bcccc2;
  --shadow: 0 1px 2px rgba(31, 122, 65, .10), 0 6px 18px rgba(31, 122, 65, .07);
  --mono: ui-monospace, "Cascadia Mono", "Consolas", "DejaVu Sans Mono", monospace;
  --sans: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

:root[data-theme="dark"] {
  --bg: #0f1a14;
  --panel: #16261d;
  --sheet: #182b20;
  --ink: #dcefe2;
  --ink-soft: #90ab9b;
  --line: #27452f;
  --line-soft: #1d3324;
  --accent: #5cc47f;
  --accent-dark: #3ea662;
  --accent-soft: #1a3524;
  --bar: #1d6b3f;
  --bar-ink: #eaf7ee;
  --warn-bg: #3a2c0e;
  --warn-ink: #f4d68d;
  --dwg-ink: #d3ecdb;
  --dwg-thin: #4d6656;
  --shadow: 0 1px 2px rgba(0, 0, 0, .45);
}

* { box-sizing: border-box; }

html, body { margin: 0; height: 100%; }

body {
  background: var(--bg);
  color: var(--ink);
  font: 14px/1.45 var(--sans);
  display: flex;
  flex-direction: column;
}

/* ------------------------------------------------------------------ thanh tren */
.top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 7px 12px;
  background: var(--bar);
  color: var(--bar-ink);
  border-bottom: 1px solid var(--accent-dark);
  position: sticky;
  top: 0;
  z-index: 20;
}
.brand b { font-size: 16px; letter-spacing: .3px; }
.grow { flex: 1; }

.btn, .icon {
  font: inherit;
  color: var(--bar-ink);
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 7px;
  padding: 5px 10px;
  cursor: pointer;
}
.btn:hover, .icon:hover { background: rgba(255, 255, 255, .26); }
.icon { display: inline-flex; padding: 6px; }
.icon.sm {
  border: 0;
  background: none;
  padding: 2px;
  color: var(--ink-soft);
}
.icon.sm:hover { background: none; color: var(--accent); }

/* --------------------------------------------------------------------- bo cuc */
.shell { flex: 1; display: flex; min-height: 0; position: relative; }

.side {
  width: 288px;
  flex: none;
  border-right: 1px solid var(--line);
  background: var(--panel);
  overflow: auto;
  padding: 10px;
}

.main { flex: 1; overflow: auto; padding: 14px 16px 40px; min-width: 0; }

/* ------------------------------------------------------------------- tim kiem */
.searchbox {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 5px 8px;
  color: var(--ink-soft);
  background: var(--line-soft);
}
.searchbox:focus-within { border-color: var(--accent); background: var(--panel); }
.searchbox input {
  flex: 1;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  outline: none;
  min-width: 0;
}

.results { margin-top: 8px; }
.results a {
  display: block;
  padding: 5px 8px;
  border-radius: 6px;
  text-decoration: none;
  color: var(--ink);
}
.results a b { display: block; font-weight: 600; font-size: 13px; }
.results a u { font-size: 11px; color: var(--accent); text-decoration: none; }
.results a:hover { background: var(--accent-soft); }

/* ---------------------------------------------------------------- cay hai cap */
.tree { margin-top: 8px; }
.tree details { border-bottom: 1px solid var(--line-soft); }
.tree summary {
  cursor: pointer;
  padding: 8px 4px;
  font-weight: 600;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  list-style: none;
  color: var(--ink);
}
.tree summary::-webkit-details-marker { display: none; }
.tree summary::before {
  content: "›";
  color: var(--accent);
  font-size: 15px;
  transition: transform .12s;
  display: inline-block;
  margin-right: 6px;
}
.tree details[open] > summary::before { transform: rotate(90deg); }
.tree details[open] > summary { color: var(--accent-dark); }
.sec-label { flex: 1; }
.chip {
  font-size: 11px;
  font-weight: 500;
  color: var(--accent-dark);
  background: var(--accent-soft);
  border-radius: 9px;
  padding: 0 7px;
  height: 17px;
  line-height: 17px;
}
.tree ul { list-style: none; margin: 0 0 8px; padding: 0 0 0 16px; }

a.grouplink {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 6px;
  text-decoration: none;
  color: var(--ink);
  font-size: 12.5px;
}
a.grouplink span { flex: 1; }
a.grouplink i {
  font-style: normal;
  font-size: 11px;
  color: var(--ink-soft);
}
a.grouplink:hover { background: var(--accent-soft); }
a.grouplink.on { background: var(--accent); color: #fff; font-weight: 600; }
a.grouplink.on i { color: #d9f0e1; }

/* ------------------------------------------------------------------ dau trang */
.mhead {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 8px;
}
.mhead h1 { font-size: 19px; margin: 0; font-weight: 650; }
.code {
  font: 600 12px var(--mono);
  color: #fff;
  background: var(--accent);
  border-radius: 5px;
  padding: 2px 7px;
}

/* ------------------------------------------------------------------ tham so */
.params { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.pick {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 3px 8px;
  box-shadow: var(--shadow);
}
.pick > span { font-size: 11.5px; color: var(--ink-soft); }
.pick select {
  font: 600 13px var(--sans);
  color: var(--ink);
  background: none;
  border: 0;
  outline: none;
  padding: 3px 2px;
  max-width: 210px;
}
.pick select option:disabled { color: #a9bdb0; }
.fixedval { font-size: 13px; padding: 3px 2px; }

.tabpick {
  background: var(--accent-soft);
  border-color: var(--accent);
  padding: 3px 4px;
}
.tabpick select { font-weight: 700; color: var(--accent-dark); max-width: 260px; }
.step {
  font: 11px/1 var(--sans);
  color: var(--accent-dark);
  background: none;
  border: 0;
  border-radius: 5px;
  padding: 5px 6px;
  cursor: pointer;
}
.step:hover:not(:disabled) { background: #fff; }
.step:disabled { color: #a9bdb0; cursor: default; }

.warn {
  background: var(--warn-bg);
  color: var(--warn-ink);
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 10px;
}
.warn p { margin: 2px 0; }

/* ---------------------------------------------------------------- to ban ve */
.sheet {
  background: var(--sheet);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 16px 14px;
  box-shadow: var(--shadow);
}
.drawing { margin: 4px 0; }
.dwg { width: 100%; height: auto; max-height: 62vh; display: block; }
.dwg-geom { stroke: var(--dwg-ink); }
.dwg-thin { stroke: var(--dwg-thin); }
.dwg-mask { fill: var(--sheet); }
.dwg-text { fill: var(--dwg-ink); font-family: var(--sans); font-weight: 600; }
.dwg-text.hot { fill: #c0392b; }
:root[data-theme="dark"] .dwg-text.hot { fill: #ff9c8a; }

.foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}
.dlines { min-width: 0; }
.dlines.head { margin-bottom: 2px; }
.dline { margin: 2px 0; font-size: 14px; font-weight: 600; color: var(--dwg-ink); }
.dline.title { font-size: 19px; font-weight: 700; margin-bottom: 4px; }
.spec {
  flex: none;
  font: 700 19px var(--sans);
  letter-spacing: .3px;
  color: var(--dwg-ink);
  white-space: nowrap;
}
:root[data-theme="dark"] .dline,
:root[data-theme="dark"] .spec { color: var(--ink); }

.muted { color: var(--ink-soft); font-weight: 400; }
.err { color: #b3261e; padding: 16px; }

.empty { max-width: 560px; margin: 40px auto; text-align: center; color: var(--ink-soft); }
.empty h1 { color: var(--ink); }

.flash {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  background: var(--accent-dark);
  color: #fff;
  padding: 8px 16px;
  border-radius: 20px;
  z-index: 50;
}

/* --------------------------------------------------------------- man hinh hep */
@media (max-width: 900px) {
  .side {
    /* dat trong .shell chu khong theo cua so: thanh tren co the xuong hai hang */
    position: absolute;
    inset: 0 auto 0 0;
    z-index: 15;
    transform: translateX(-100%);
    transition: transform .16s;
    box-shadow: var(--shadow);
  }
  body.navopen .side { transform: none; }
  .dwg { max-height: 46vh; }
  .foot { flex-direction: column; align-items: flex-start; gap: 6px; }
  .dline.title { font-size: 16px; }
  .spec { font-size: 15px; }
}
@media (min-width: 901px) { #menu { display: none; } }

@media (max-width: 560px) {
  .btn { padding: 5px 7px; font-size: 12px; }
  .top { gap: 6px; padding: 8px; }
  .main { padding: 12px 10px 32px; }
  .sheet { padding: 10px; }
}


/* -------------------------------------------------------- hai tab cua ung dung
   PipeCal chay trong <iframe>, KHONG gop chung trang. Ly do: hai ung dung dung
   trung 8 bien CSS (--bg, --ink, --line, --accent, --panel, --shadow, --line-soft,
   --warn-bg) va 6 ten lop (brand, btn, chip, err, on, sm). Gop thang vao mot trang
   thi ban nao nap sau se de len ban kia va CA HAI hien sai mau.
   Xem site/_acceptance.md muc C.21. */
.apptabs { display: flex; gap: 2px; margin-left: 10px; }
.apptabs a {
  display: inline-block; padding: 6px 14px; border-radius: 7px;
  color: var(--bar-ink); text-decoration: none; font-size: 13.5px; font-weight: 600;
  opacity: .72; white-space: nowrap;
}
.apptabs a:hover { opacity: 1; background: rgba(255, 255, 255, .12); }
.apptabs a.on { opacity: 1; background: rgba(255, 255, 255, .2); }

.calcwrap { flex: 1; min-height: 0; background: var(--bg); }
.calcwrap[hidden] { display: none; }
.calcwrap iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Khi dang o tab Tinh toan: an cot danh muc va cac nut chi danh cho tra cuu
   (PipeCal co nut In rieng ben trong khung). */
body.calcon .shell,
body.calcon #print,
body.calcon #theme,
body.calcon #menu { display: none; }

@media (max-width: 560px) {
  .apptabs a { padding: 6px 9px; font-size: 12.5px; }
}

/* ---------------------------------------------------------------------- in an */
@media print {
  .top, .side, .warn, #flash, .apptabs { display: none !important; }
  .main { overflow: visible; padding: 0; }
  .sheet { border: 0; box-shadow: none; padding: 0; }
  .drawing { page-break-inside: avoid; }
  .dwg { max-height: 145mm; }
  .dline { font-size: 11pt; }
  .dline.title { font-size: 14pt; }
  .spec { font-size: 14pt; }
  @page { size: A4 portrait; margin: 12mm; }
}