/* app.css — ของเฉพาะ bank-reconcile ที่ landing page ไม่มี
   ใช้ token จาก brand.css เท่านั้น ห้ามนิยามสีดิบที่นี่ถ้ามี token รองรับอยู่แล้ว */

/* --- โครงหน้า ------------------------------------------------------------ */
.app-main { padding-block: var(--s-1-5); }
/* margin-left: auto ดันกลุ่มปุ่ม + ออกจากระบบ ไปชิดขวาเป็นก้อนเดียว — ถ้าปล่อยให้
   justify-content: space-between ของ .site-header__inner จัดเอง ลูกสามตัว (โลโก้ /
   ปุ่ม / ออกจากระบบ) จะถูกกระจายเท่ากันแล้วกลุ่มปุ่มไปลอยอยู่กลางแถบ */
.app-actions { display: flex; align-items: center; gap: var(--s-1); flex: none; margin-left: auto; }

/* บนโทรศัพท์แถวหัว (โลโก้ + ปุ่ม 4 ตัว ~400px) กว้างกว่าจอ แล้วล้นออกขวาทั้งแถบ
   เพราะ .site-header__inner ของ brand.css เป็น flex แถวเดียวและ .app-actions
   เป็น flex: none — แก้ด้วย modifier .app-header (ไม่แตะ class ของ brand.css)
   จัดใหม่เป็น 2 บรรทัด: [โลโก้ … ออกจากระบบ] / [อัปโหลด | ยอดเงิน | เติมเงิน]
   · .logout-form อยู่นอก .app-actions ใน DOM ก็เพื่อบรรทัดนี้ — ให้ลิงก์เล็กอยู่บรรทัด
     โลโก้ ส่วน .app-actions (flex-basis 100%) ลงมาเป็นแถวของตัวเองเสมอ ปุ่มสามตัว
     แบ่งความกว้างเท่ากัน ถ้ายอดเงินยาวจนไม่พอ ตัวท้ายจะหักบรรทัดเองแทนที่จะล้น
   · ถ้าปล่อยเป็นแถวเดียวหักบรรทัดเฉย ๆ จะได้ 3 บรรทัด สูง ~160px บนแถบ sticky
     ที่กินจอโทรศัพท์ไปเกินครึ่ง
   breakpoint 760px = ค่าเดียวกับที่ billing/account/estimate ใช้อยู่ */
@media (max-width: 760px) {
  .app-header { flex-wrap: wrap; gap: var(--s-0-5); }
  .app-actions { order: 1; flex: 1 1 100%; flex-wrap: wrap; gap: var(--s-0-5); margin-left: 0; }
  /* nowrap: ไม่งั้น Chrome ตัดคำไทยกลางปุ่ม ("อัปโหลด/ใหม่") แทนที่จะหักทั้งปุ่มลงบรรทัดใหม่ */
  .app-actions .btn--sm { flex: 1 1 0; padding-inline: var(--s-0-5); white-space: nowrap; }
  .logout-form { margin-left: auto; }
}
/* จอแคบจริง (iPhone SE / Display Zoom = 320px, เนื้อใน 280px): ขนาดปกติทั้งสองแถว
   ล้นพอดี — แถวโลโก้ 194+85 = 279 และแถวปุ่ม 314+16 = 330 (วัดจริงบน Chrome ที่ 375
   เหลือ headroom แค่ 5px ฟอนต์ iOS กว้างกว่านิดเดียวก็ตกไป 3-4 บรรทัดแล้ว ตามที่เจอ
   บนไอโฟนของเจ้าของ 2026-09-21) — ย่อโลโก้ ย่อฟอนต์ และตัดคำ "ใหม่" ออกจากปุ่มอัปโหลด
   ให้เหลือ headroom ราว 30px ทั้งสองแถว */
@media (max-width: 400px) {
  .app-header .site-logo img { height: 40px; }
  .app-header .site-logo__text { font-size: .875rem; }
  .app-actions .btn--sm { font-size: .875rem; padding-inline: var(--s-0-5); }
  .app-actions__long { display: none; }
  .logout-form { font-size: .875rem; }
}

/* --- การ์ดที่ใช้เป็นแผงข้อมูล -------------------------------------------- */
/* .card ของ brand.css เป็นการ์ดคอนเทนต์: padding 0, overflow hidden, hover ยกตัว 3px
   แผงข้อมูลเต็มหน้าจอต้องการตรงข้ามทั้งสามข้อ — overflow: visible จำเป็นจริง
   ไม่ใช่แค่ความสวย เพราะ overflow: hidden จะตัดเงา/ขอบตารางที่ล้นออกมา */
.card--panel {
  padding: var(--s-1-25);
  overflow: visible;
  gap: var(--s-0-75);
  margin-bottom: var(--s-1-25);
}
.card--panel:hover { transform: none; box-shadow: var(--shadow); }

.card--login { max-width: 360px; margin: var(--s-4) auto; align-items: stretch; }
.card--login img { margin-inline: auto; margin-bottom: var(--s-1); }

.panel-head {
  display: flex; flex-direction: row;
  justify-content: space-between; align-items: center;
  gap: var(--s-1); flex-wrap: wrap;
}

/* --- แท็บ ---------------------------------------------------------------- */
.tabs { display: flex; gap: var(--s-0-25); }
.tab {
  padding: var(--s-0-5) var(--s-1);
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--neutral);
  color: var(--text-secondary);
  font-size: .9375rem;
  text-decoration: none;
}
.tab:hover { background: var(--neutral-lighter); color: var(--brand-navy); text-decoration: none; }
.tab.active { background: var(--brand-navy); color: var(--white); font-weight: 600; }

/* --- ตาราง --------------------------------------------------------------- */
/* ความหนาแน่นคงเดิมทุกค่าโดยตั้งใจ (.82rem / padding .35rem .5rem) — คนบัญชี
   ต้องเห็นรายการต่อหน้าจอเท่าเดิม ที่เพิ่มคือ zebra กับ tabular-nums เท่านั้น */
.table-scroll { overflow-x: auto; margin-top: var(--s-0-75); }

.data-table { border-collapse: collapse; width: 100%; font-size: .82rem; }
.data-table th,
.data-table td {
  border: 1px solid var(--border);
  padding: .35rem .5rem;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.data-table th { background: var(--bg-secondary); font-weight: 600; }
.data-table td.text,
.data-table th.text { text-align: left; font-variant-numeric: normal; }
.data-table td.sub { padding-left: var(--s-1-5); }

.data-table tbody tr:nth-child(even) { background: var(--neutral-lightest); }
/* ต้องชนะ zebra ให้ได้ ไม่งั้นแถวที่ recheck ไม่ผ่านซึ่งบังเอิญเป็นแถวคู่จะกลืนหายไป */
.data-table tbody tr.bad,
.data-table tbody tr.bad:nth-child(even) { background: #fdecec; }

/* --- ตารางราคา (.tbl) ------------------------------------------------------ */
/* brand.css ไม่นิยาม .tbl เลย (landing page ไม่มีตารางแบบนี้ใช้) ตารางเลยไม่มี
   เส้นขอบอะไรทั้งนั้นมาจาก browser default — แถว/คอลัมน์แยกกันไม่ออก คลาสนี้ใช้
   ร่วมกันทั้ง /estimate/ (ตัวเลขล้วนแทบทุกคอลัมน์) กับ /pricing/ (ข้อความล้วน
   ไม่มี thead/tfoot ที่ใช้ .num) จึงต้องจัดชิดขวาด้วยคลาส .num แยกต่างหาก
   ไม่ใช่ default alignment ของ .tbl เอง ไม่งั้นคอลัมน์บรรยายยาว ๆ ใน /pricing/
   จะถูกดันไปชิดขวาไปด้วย */
.tbl { border-collapse: collapse; width: 100%; margin-top: var(--s-0-75); }
.tbl th, .tbl td {
  border: 1px solid var(--border);
  padding: var(--s-0-5) var(--s-0-75);
  text-align: left;
}
.tbl thead th { background: var(--bg-secondary); font-weight: 600; }
.tbl td.num, .tbl th.num { text-align: right; font-variant-numeric: tabular-nums; }
/* แถวใน tfoot (รวม/หักโควต้า/ยอดที่ต้องจ่าย) ต้องอ่านออกว่าเป็นแถวสรุป ไม่ใช่แถว
   รายการเฉย ๆ — แถวยอดที่ต้องจ่าย (.tbl-grandtotal) เน้นแรงกว่าแถวย่อยที่เหลือ */
.tbl tfoot th, .tbl tfoot td {
  background: var(--bg-secondary);
  font-weight: 600;
  border-top: 2px solid var(--border);
}
.tbl tfoot tr.tbl-grandtotal th,
.tbl tfoot tr.tbl-grandtotal td {
  border-top: 2px solid var(--brand-navy);
  font-size: 1.0625rem;
}

/* --- ป้ายสถานะ ----------------------------------------------------------- */
.badge {
  display: inline-block;
  font-size: .78rem;
  font-weight: 500;
  padding: .15rem var(--s-0-5);
  border-radius: var(--radius-pill);
}
.badge.ok   { background: #e3f3e8; color: #1c6b38; }  /* 5.69:1 */
.badge.warn { background: #fbf1d8; color: #7d6400; }  /* 5.05:1 */
.badge.err  { background: #fdecec; color: #a12525; }  /* 6.55:1 */

/* --- ปุ่มที่ถูกปิดใช้งาน ------------------------------------------------------ */
/* brand.css ไม่มี :disabled เลย ปุ่ม disabled จึงหน้าตาเหมือนปุ่มกดได้ทุกอย่าง —
   ผู้ใช้กดแล้วไม่มีอะไรเกิดขึ้น (เบราว์เซอร์บล็อก submit ให้เงียบ ๆ) คิดว่าระบบพัง
   ต้องดูออกว่ากดไม่ได้ตั้งแต่มองแวบแรก ไม่ใช่รู้ตัวหลังลองกด */
.btn:disabled,
.btn[disabled] {
  background: var(--neutral);
  border-color: var(--neutral);
  color: var(--text-secondary);
  cursor: not-allowed;
  box-shadow: none;
  opacity: .7;
}
.btn:disabled:hover,
.btn[disabled]:hover {
  transform: none;
  box-shadow: none;
}

/* --- ฟอร์ม --------------------------------------------------------------- */
.field { display: block; margin-top: var(--s-1); }

input[type="file"],
input[type="password"] {
  font: inherit;
  padding: var(--s-0-5) var(--s-0-75);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--text-primary);
  max-width: 100%;
}
input[type="password"] { width: 100%; }

.err-msg { color: #a12525; }                          /* 7.48:1 บนพื้นขาว */

/* --- ข้อความประกอบ ------------------------------------------------------- */
.meta { color: var(--text-secondary); font-size: .82rem; }
.note { color: var(--text-secondary); font-size: .85rem; }
.nowrap { white-space: nowrap; }

/* ปุ่ม logout ต้องเป็น <button class="btn linklike"> ใน <form> (allauth บังคับ POST
   ลิงก์ GET ใช้ไม่ได้) แต่ห้ามหน้าตาเหมือนปุ่ม — คง class btn ไว้ให้เทสต์
   test_every_button_has_btn_class ผ่าน (กันปุ่มเปล่าที่ไม่มี CSS จับ) แล้วรีเซ็ตทุก
   property ที่ .btn ตั้งไว้ด้วย .btn.linklike (specificity สูงกว่า .btn เฉย ๆ
   จึงชนะแน่นอน ไม่ต้องพึ่งลำดับไฟล์ CSS) ให้เหลือแค่ข้อความขีดเส้นใต้ */
.logout-form { display: inline; }
.btn.linklike {
  display: inline;              /* .btn: inline-flex — ไม่ให้เป็นกล่องแยกจากบรรทัด */
  align-items: normal;          /* .btn: center — เผื่อไว้ถึงจะไม่มีผลตอน display: inline */
  justify-content: normal;      /* .btn: center — เช่นกัน */
  gap: 0;                       /* .btn: var(--s-0-5) — ไม่มีไอคอนคู่ ไม่ต้องเว้น */
  padding: 0;                   /* .btn: var(--s-0-75) var(--s-1-5) — ไม่ใช่กล่องปุ่ม */
  border: 0;                    /* .btn: 1px solid transparent */
  border-radius: 0;             /* .btn: var(--radius) */
  background: none;
  font: inherit;
  font-weight: normal;          /* .btn: 500 — ลิงก์ทั่วไปไม่หนา */
  line-height: inherit;         /* .btn: 1.4 — ให้เข้ากับข้อความรอบข้าง */
  text-align: left;             /* .btn: center */
  text-decoration: underline;   /* .btn: none — ต้องดูเป็นลิงก์ */
  color: inherit;
  cursor: pointer;
  transition: none;             /* .btn: var(--transition) — ตัด hover lift ทิ้ง */
  box-shadow: none;             /* กัน .btn--* ตัวใดตัวหนึ่งเผลอมาด้วยในอนาคต */
}
.btn.linklike:hover,
.btn.linklike:active {
  text-decoration: underline;
  transform: none;              /* .btn:hover/:active ตั้ง translateY ไว้ — ไม่ต้องการปุ่มกระเด้ง */
  box-shadow: none;
}

/* --- แถบเตือนอายุผลลัพธ์ --------------------------------------------------- */
/* ต้องเห็นชัดโดยไม่ต้องเลื่อนหน้า (บนสุดของ preview/reconcile) และความหมายต้อง
   ไม่ได้สื่อผ่านสีอย่างเดียว — ข้อความ "จะถูกลบ" / "เสียค่าบริการซ้ำ" ในตัว
   บอกครบอยู่แล้ว สีมีไว้เสริมความรู้สึกเร่งด่วนตอนใกล้หมดเวลาเท่านั้น */
.expiry-banner {
  border: 1px solid var(--border);
  border-left-width: 4px;
  border-radius: var(--radius);
  padding: var(--s-0-75) var(--s-1);
  margin-bottom: var(--s-1);
  background: #fbf1d8;   /* พื้นเดียวกับ .badge.warn */
  color: var(--text-primary);
}
.expiry-banner--urgent { background: #fdecec; border-left-color: #a12525; } /* พื้นเดียวกับ .badge.err */
.expiry-banner--gone { opacity: .6; }