/* ============================================================
   แอปบันทึกการใช้คอนกรีต — ส่วนเสริมจาก design system กลาง 2.4
   ใช้คู่กับ /app/common/style.css (โหลดก่อนไฟล์นี้)
   ============================================================ */

/* กัน Tailwind (ที่หน้าเก่ายังใช้) รีเซ็ตทับสไตล์กลาง */
#root .btn { background-color: #fff; }
#root .btn.primary { background-color: var(--hivis); }
#root .btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
#root .app-main h1 { font-size: 1.6rem; font-weight: 700; line-height: 1.25; margin: 0 0 .25rem; }
#root .app-main h2 { font-size: 1.15rem; font-weight: 700; margin: 0; }
#root .app-main ol { list-style: none; margin: 0; padding: 0; }
@media (max-width: 600px) { #root .app-main h1 { font-size: 1.35rem; } }

/* แถบบน */
.bar .who .cl-link { display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0;
  border: 0; border-radius: 6px; background: transparent; color: #fff; opacity: .85; cursor: pointer; }
.bar .who .cl-link:hover { opacity: 1; background: #2c3a45; }
.bar .who .cl-link svg { width: 20px; height: 20px; display: block; }
.cl-spin.on svg { animation: cl-spin 1s linear infinite; }
@keyframes cl-spin { to { transform: rotate(360deg); } }
@media (max-width: 600px) { .bar .who .cl-name { display: none; } }

/* ป้ายชื่อช่อง (ใช้กับช่องเลือกแบบพิมพ์ได้ที่ไม่ได้อยู่ใน <label>) */
.cl-lb { display: block; font-size: .88rem; color: var(--steel); }
.cl-lbn { display: inline-flex; align-items: center; gap: .4rem; }

/* กรอบวิธีลงรูปบิล */
.cl-steps { margin: .35rem 0 0; }
.cl-step { display: flex; gap: .6rem; align-items: flex-start; padding: .3rem 0; }
.cl-step b { display: block; line-height: 1.4; }
.cl-step small { display: block; }
.cl-step.done b { color: var(--ok); }
.cl-dot { display: inline-grid; place-items: center; width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%;
  background: var(--ink); color: #fff; font-size: .8rem; font-weight: 700; line-height: 1; }
.cl-dot.done { background: var(--ok); }
.cl-dot svg { width: 15px !important; height: 15px !important; }
.cl-lbn .cl-dot { width: 20px; height: 20px; font-size: .7rem; }
.cl-lbn .cl-dot svg { width: 12px !important; height: 12px !important; }
.btn .cl-dot { width: 22px; height: 22px; background: var(--ink); }
.btn .cl-dot.done { background: var(--ok); }

/* หัวข้อย่อยในหน้า + ปุ่มด้านขวา */
.cl-sec { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem .75rem; margin: 1.25rem 0 .5rem; }
.cl-sec small { display: block; }

/* ตาราง */
td { vertical-align: middle; }
.cl-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 600; }
.cl-cell { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.cl-note td { padding-top: 0; background: #F7F9FA; font-size: .78rem; color: var(--steel); white-space: normal; }
tr.cl-on td { background: #FFF6D6; }
.cl-num { width: 140px !important; margin-top: 0 !important; }
.tag.ok   { background: #E8F3EC; color: var(--ok); }
.tag.wait { background: #FFF1C2; color: #6b5200; }

/* รูปย่อ (กดแล้วเปิดหน้าดูรูปกลาง) */
.cl-thumb { display: inline-block; line-height: 0; border-radius: 4px; }
.cl-thumb img { display: block; object-fit: cover; border-radius: 4px; border: 1px solid var(--line); background: #E7ECEF; }

/* รายการรอลงบันทึกในกล่องแจ้งเตือน */
.cl-pend { display: flex; align-items: center; gap: .6rem; width: 100%; min-height: var(--tap); margin-top: .5rem;
  padding: .5rem .75rem; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink);
  font: inherit; text-align: left; cursor: pointer; }
.cl-pend:hover { border-color: var(--steel); }
.cl-pend .grow { flex: 1; min-width: 0; }
.cl-pend b, .cl-pend small { display: block; }
.cl-pend svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--steel); }

/* มือถือ: ซ่อนคอลัมน์ลำดับ (เลขที่รูปมีลำดับอยู่แล้ว) ให้ตารางกว้างพอ */
@media (max-width: 600px) { .cl-hide-sm { display: none; } }

/* รายการรอลงบันทึกเยอะ: เลื่อนในกรอบ */
.cl-pend-list { max-height: 60vh; overflow-y: auto; padding-right: 2px; }

/* หน้าสรุป: แถบรายการที่เลือก */
.cl-pickbar { position: sticky; top: 0; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }

/* หน้าต่างรายละเอียด (ปุ่มตา) */
.cl-dlg { max-width: 900px; margin: 1.5rem auto; background: #fff; border-radius: 8px; padding: 0 1rem 1rem; }
.cl-dlg-top { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: .75rem; padding: .75rem 0; margin-bottom: .5rem;
  background: #fff; border-bottom: 1px solid var(--line); }
.cl-dlg .ov-seg { display: flex; border: 1px solid var(--field); border-radius: 6px; overflow: hidden; margin-bottom: .75rem; }
.cl-dlg .ov-seg button { flex: 1; min-height: 44px; border: 0; border-right: 1px solid var(--field); background: #fff; color: var(--ink); font: inherit; font-size: .95rem; cursor: pointer; }
.cl-dlg .ov-seg button:last-child { border-right: 0; }
.cl-dlg .ov-seg button.on { background: var(--ink); color: #fff; font-weight: 600; }
.cl-dgrp { margin-bottom: 1rem; }
.cl-dgrp-h { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem .75rem; padding: .4rem .6rem; margin-bottom: .35rem;
  background: #E7ECEF; border-radius: 6px; font-size: .9rem; }
tr.cl-total td { background: #F3F5F6; font-weight: 700; border-top: 2px solid var(--line); }
.cl-overlay { position: fixed; inset: 0; z-index: 900; overflow-y: auto; padding: .75rem; background: rgba(28,39,48,.6); }