:root{
  --bg: #F5F6F5;
  --panel: #FFFFFF;
  --ink: #181B30;
  --ink-soft: #5B6178;
  --green: #1F6F82;       /* teal จากตัวรถในโลโก้ — สีหลักของปุ่ม/ลิงก์ */
  --green-deep: #123F4C;  /* teal เข้ม — hover ของปุ่ม */
  --green-tint: #E3F0F1;  /* teal อ่อน — พื้นหลังแท็ก/กล่องไฮไลต์ */
  --navy: #14152B;        /* กรมท่าเข้มจากโลโก้ — พื้นหลัง sidebar */
  --amber: #D9932E;       /* ทองจากโลโก้ — จุดเน้น/แท็บที่เลือก */
  --red: #C2432A;
  --line: #E2E1EA;
  --radius: 10px;
}
*{box-sizing:border-box;}
body{
  margin:0;
  font-family:'Noto Sans Thai', sans-serif;
  background:var(--bg);
  color:var(--ink);
}
.mono{ font-family:'IBM Plex Mono', monospace; }

#app{ min-height:100vh; display:flex; }

/* ===== Sidebar ===== */
.sidebar{
  width:220px;
  background-color:var(--navy);
  background-image:url('assets/watermark-wordmark.png');
  background-repeat:no-repeat;
  background-position:bottom 22px center;
  background-size:150px auto;
  color:#EFEAE0;
  flex-shrink:0;
  display:flex;
  flex-direction:column;
  padding:24px 0;
}
.sidebar-logo{
  display:flex; flex-direction:column; align-items:center;
  padding:0 20px 18px;
  border-bottom:1px solid rgba(255,255,255,0.12);
  margin:0 0 12px;
}
.sidebar-logo img{ width:96px; height:auto; display:block; }
.sidebar-logo .shop-name{
  margin-top:8px; font-size:12.5px; font-weight:600; color:#B9C4D6;
  text-align:center; letter-spacing:.02em;
}
.nav-group-items{
  max-height:0;
  overflow:hidden;
}
.nav-group.open .nav-group-items{
  max-height:400px;
}
.nav-section-header{
  padding:14px 20px;
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.02em;
  color:#AEB8CC;
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  align-items:center;
  transition:.15s;
}
.nav-section-header:hover{ color:#fff; background:rgba(255,255,255,0.05); }
.nav-chevron{
  font-size:10px;
  color:#7A8499;
  transition:transform .18s;
}
.nav-group.open .nav-chevron{ transform:rotate(90deg); }
.nav-item{
  padding:10px 20px 10px 28px;
  cursor:pointer;
  font-size:14px;
  font-weight:500;
  color:#CBD6C9;
  border-left:3px solid transparent;
  transition:.15s;
}
.nav-item-action{
  background:linear-gradient(135deg, rgba(217,147,46,0.18), rgba(217,147,46,0.06));
  border-left:3px solid var(--amber);
  color:#FFE3B0;
  font-weight:700;
  margin:0 12px 10px;
  border-radius:8px;
  padding:11px 16px;
}
.nav-item-action:hover{ background:rgba(217,147,46,0.28); color:#fff; }
.nav-item[data-page="dashboard"]{
  padding-left:20px;
  font-size:14.5px;
  margin-bottom:4px;
}
.nav-item:hover{ background:rgba(255,255,255,0.06); color:#fff; }
.nav-item.active{
  background:rgba(255,255,255,0.08);
  border-left-color:var(--amber);
  color:#fff;
}

/* ===== Main ===== */
.main{
  flex:1; padding:28px 36px; overflow-y:auto; max-height:100vh;
  background-color:var(--bg);
}
.page-title{ font-size:22px; font-weight:700; margin:0 0 4px; }
.page-sub{ color:var(--ink-soft); font-size:13.5px; margin:0 0 22px; }

.toolbar{ display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; gap:12px; flex-wrap:wrap;}
.btn{
  background:var(--green); color:#fff; border:none; border-radius:8px;
  padding:9px 16px; font-size:13.5px; font-weight:600; cursor:pointer;
  font-family:inherit;
}
.btn:hover{ background:var(--green-deep); }
.btn.secondary{ background:transparent; color:var(--green); border:1px solid var(--green); }
.btn.danger{ background:transparent; color:var(--red); border:1px solid var(--red); }
.btn.small{ padding:5px 10px; font-size:12.5px; }

.cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:24px; }
.card{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px 18px;
}
.card .label{ font-size:12.5px; color:var(--ink-soft); margin-bottom:6px;}
.card .value{ font-size:24px; font-weight:700; font-family:'IBM Plex Mono', monospace; }
.card.alert .value{ color:var(--red); }
.card.good .value{ color:var(--green); }

table{ width:100%; border-collapse:collapse; background:var(--panel); }
thead th{
  text-align:left; font-size:14.5px; font-weight:700; letter-spacing:.01em;
  color:var(--ink); padding:12px 12px; border-bottom:2px solid var(--line); background:#FBFAF7;
}
tbody td{ padding:10px 12px; border-bottom:1px solid var(--line); font-size:13.5px; }
tbody tr:hover{ background:#FAFAF6; }
.num{ font-family:'IBM Plex Mono', monospace; text-align:right; }
.tag{
  display:inline-block; padding:2px 9px; border-radius:99px; font-size:11.5px; font-weight:600;
}
.tag.in_stock{ background:var(--green-tint); color:var(--green); }
.tag.sold{ background:#FBF0DD; color:var(--amber); }
.tag.repossessed{ background:#F7E4DD; color:var(--red); }
.tag.active{ background:var(--green-tint); color:var(--green); }
.tag.closed{ background:#EAEAE5; color:var(--ink-soft); }
.tag.pending{ background:#FBF0DD; color:var(--amber); }
.tag.partial{ background:#FDEBD3; color:#A8631C; }
.tag.watching{ background:#FDEBD3; color:#A8631C; }
.tag.legal{ background:#F7E4DD; color:var(--red); }
.tag.gps_alert{ background:#F7E4DD; color:var(--red); font-weight:700; }
.tag.resolved{ background:var(--green-tint); color:var(--green); }
.tag.paid{ background:var(--green-tint); color:var(--green); }
.tag.late{ background:#F7E4DD; color:var(--red); }

/* Modal */
.overlay{
  position:fixed; inset:0; background:rgba(20,24,20,0.45);
  display:flex; align-items:center; justify-content:center; z-index:50;
}
.modal{
  background:#fff; border-radius:12px; padding:24px 28px; width:520px; max-width:90vw;
  max-height:88vh; overflow-y:auto;
}
.modal h2{ margin:0 0 18px; font-size:18px; }
.form-row{ margin-bottom:13px; display:flex; flex-direction:column; gap:5px; }
.form-row label{ font-size:12.5px; color:var(--ink-soft); font-weight:600; }
.form-row input, .form-row select, .form-row textarea{
  border:1px solid var(--line); border-radius:7px; padding:9px 11px; font-size:14px;
  font-family:inherit; background:#FCFBF8;
}
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0 14px; }
.modal-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:18px; }

.empty{ text-align:center; padding:60px 20px; color:var(--ink-soft); }
.section-title{ font-weight:700; margin:26px 0 10px; font-size:15px; }
.badge-count{
  background:var(--red); color:#fff; font-size:11px; padding:1px 7px; border-radius:99px; margin-left:6px;
}


/* ===== ระบบล็อกอิน (เพิ่มโดย install-auth-ui.js) ===== */

/* ซ่อนปุ่มลบทั้งหมดจากพนักงาน — ทำที่ CSS ทีเดียว ไม่ต้องไล่แก้ทุกปุ่ม
   ปุ่มใหม่ที่เพิ่มทีหลังก็ถูกซ่อนอัตโนมัติ
   ⚠️ นี่เป็นแค่การซ่อนตา — ของจริงกันที่ server.js (middleware) อีกชั้น */
body.role-staff .btn.danger{ display:none !important; }

/* ยกเว้น: ปุ่มพวกนี้ใช้สี danger แต่ไม่ใช่ปุ่มลบ พนักงานยังต้องใช้ได้ */
body.role-staff .btn.danger#closeBtn,
body.role-staff .btn.danger#confirmBtn,
body.role-staff .btn.danger#gpsAlertBtn,
body.role-staff .btn.danger#unlinkBtn{ display:inline-block !important; }

/* ---- หน้าล็อกอิน ---- */
.login-wrap{
  min-height:100vh; width:100%;
  display:flex; align-items:center; justify-content:center;
  background:var(--navy);
}
.login-box{
  background:var(--panel); border-radius:14px; padding:36px 34px;
  width:360px; max-width:92vw;
  box-shadow:0 10px 40px rgba(0,0,0,.3);
}
.login-box .login-logo{ text-align:center; margin-bottom:6px; }
.login-box .login-logo img{ width:88px; height:auto; }
.login-box h1{
  font-size:17px; margin:0 0 4px; text-align:center; font-weight:700;
}
.login-box .login-sub{
  font-size:12.5px; color:var(--ink-soft); text-align:center; margin:0 0 22px;
}
.login-box .form-row{ margin-bottom:14px; }
.login-box input{ width:100%; }
.login-box .btn{ width:100%; padding:11px; font-size:14.5px; }
.login-error{
  background:#F7E4DD; color:var(--red); border-radius:7px;
  padding:9px 12px; font-size:12.5px; margin-bottom:14px;
}

/* ---- แถบผู้ใช้ในเมนูซ้าย ---- */
.user-bar{
  margin-top:auto; padding:14px 18px 4px;
  border-top:1px solid rgba(255,255,255,0.12);
  font-size:12.5px; color:#B9C4D6;
}
.user-bar .user-name{ font-weight:700; color:#EFEAE0; font-size:13px; }
.user-bar .user-role{ font-size:11.5px; color:#8E9AB0; margin-bottom:8px; }
.user-bar .user-actions{ display:flex; gap:6px; flex-wrap:wrap; }
.user-bar .user-actions button{
  background:rgba(255,255,255,0.08); color:#CBD6C9; border:none;
  border-radius:6px; padding:5px 9px; font-size:11.5px; cursor:pointer;
  font-family:inherit;
}
.user-bar .user-actions button:hover{ background:rgba(255,255,255,0.18); color:#fff; }


/* ===== มือถือ + ความสวยงาม (เพิ่มโดย install-mobile-polish.js) ===== */

:root{
  /* เงา 3 ระดับ — ใช้ซ้ำทั้งระบบ ให้ความลึกสม่ำเสมอ */
  --shadow-sm: 0 1px 2px rgba(20,21,43,.06);
  --shadow-md: 0 2px 8px rgba(20,21,43,.07), 0 1px 2px rgba(20,21,43,.04);
  --shadow-lg: 0 12px 34px rgba(20,21,43,.16);
  --row-alt: #FBFBF9;   /* แถวสลับสีในตาราง */
}

/* ---------- การ์ดตัวเลข ---------- */
.card{
  box-shadow:var(--shadow-sm);
  transition:box-shadow .18s ease, transform .18s ease;
}
.card:hover{ box-shadow:var(--shadow-md); transform:translateY(-1px); }
.card .label{
  text-transform:none; letter-spacing:.01em; font-weight:600;
}
.card .value{ letter-spacing:-.01em; line-height:1.15; }
/* แถบสีบางด้านซ้ายของการ์ดที่ต้องสังเกต */
.card.alert{ border-left:3px solid var(--red); }
.card.good{ border-left:3px solid var(--green); }

/* ---------- ตาราง ---------- */
table{ box-shadow:var(--shadow-sm); }
/* หัวตารางตรึงไว้ตอนเลื่อน — ข้อมูลเยอะจะไม่ลืมว่าคอลัมน์ไหนคืออะไร */
thead th{
  position:sticky; top:0; z-index:2;
  background:#FBFAF7;
  box-shadow:inset 0 -2px 0 var(--line);
  border-bottom:none;
}
tbody tr:nth-child(even){ background:var(--row-alt); }
tbody tr{ transition:background .12s ease; }
tbody tr:hover{ background:var(--green-tint); }
tbody tr:last-child td{ border-bottom:none; }

/* ---------- แท็กสถานะ: เพิ่มจุดสีนำหน้า อ่านเร็วขึ้น ---------- */
.tag{
  display:inline-flex; align-items:center; gap:5px;
  line-height:1.6;
}
.tag::before{
  content:''; width:6px; height:6px; border-radius:99px;
  background:currentColor; flex-shrink:0; opacity:.75;
}

/* ---------- ปุ่ม ---------- */
.btn{
  transition:background .15s ease, box-shadow .15s ease, transform .1s ease;
  box-shadow:var(--shadow-sm);
}
.btn:hover{ box-shadow:var(--shadow-md); }
.btn:active{ transform:translateY(1px); }
.btn.secondary, .btn.danger{ box-shadow:none; }
.btn.secondary:hover{ background:var(--green-tint); box-shadow:none; }
.btn.danger:hover{ background:#F7E4DD; box-shadow:none; }
/* โฟกัสด้วยคีย์บอร์ดต้องเห็นชัด (เข้าถึงได้) */
.btn:focus-visible,
.form-row input:focus-visible,
.form-row select:focus-visible,
.form-row textarea:focus-visible{
  outline:2px solid var(--amber); outline-offset:2px;
}

/* ---------- ช่องกรอก ---------- */
.form-row input, .form-row select, .form-row textarea{
  transition:border-color .15s ease, box-shadow .15s ease;
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus{
  border-color:var(--green);
  box-shadow:0 0 0 3px rgba(31,111,130,.12);
  outline:none; background:#fff;
}

/* ---------- Modal ---------- */
.modal{ box-shadow:var(--shadow-lg); }
.overlay{ backdrop-filter:blur(2px); }

/* ---------- หน้าว่าง ---------- */
.empty{ font-size:14px; line-height:1.7; }
.empty::before{
  content:'📭'; display:block; font-size:34px; margin-bottom:10px; opacity:.55;
}

/* ---------- แถบเลื่อน ---------- */
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-track{ background:transparent; }
*::-webkit-scrollbar-thumb{
  background:#CFCFD8; border-radius:99px; border:2px solid var(--bg);
}
*::-webkit-scrollbar-thumb:hover{ background:#A9A9B8; }

/* ---------- เคารพการตั้งค่า "ลดการเคลื่อนไหว" ของเครื่อง ---------- */
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important; }
}


/* =========================================================
   มือถือ / แท็บเล็ตแนวตั้ง (≤ 820px)
   ========================================================= */

/* ปุ่ม ☰ — ซ่อนบนคอม แสดงบนมือถือ
   สร้างด้วย CSS ล้วน ไม่ต้องแก้ app.js */
.menu-toggle{ display:none; }

@media (max-width: 820px){

  #app{ display:block; }

  /* ---------- Sidebar เลื่อนออกมาจากซ้าย ---------- */
  .sidebar{
    position:fixed; top:0; left:0; bottom:0; z-index:48;
    width:250px; max-width:82vw;
    transform:translateX(-100%);
    transition:transform .26s cubic-bezier(.4,0,.2,1);
    overflow-y:auto;
    box-shadow:4px 0 24px rgba(0,0,0,.28);
    padding-top:64px;
  }
  body.nav-open .sidebar{ transform:translateX(0); }

  /* ฉากหลังมืดตอนเปิดเมนู — กดเพื่อปิด */
  body.nav-open::after{
    content:''; position:fixed; inset:0; z-index:47;
    background:rgba(20,21,43,.5);
  }

  /* ---------- แถบบนสำหรับมือถือ ---------- */
  .menu-toggle{
    display:flex; align-items:center; justify-content:center;
    position:fixed; top:10px; left:12px;
    /* ต่ำกว่า .overlay (50) เพื่อไม่ให้ปุ่มลอยทับ modal ที่เปิดอยู่
       แต่สูงกว่าเนื้อหาปกติ */
    z-index:45;
    width:44px; height:44px;
    background:var(--navy); color:#EFEAE0;
    border:none; border-radius:10px;
    font-size:20px; cursor:pointer;
    box-shadow:var(--shadow-md);
  }

  /* ซ่อนปุ่ม ☰ ตอนเมนูเปิดอยู่ (มีปุ่มปิดในตัวเมนูแล้ว) */
  body.nav-open .menu-toggle{ opacity:0; pointer-events:none; }

  /* ---------- เนื้อหาหลัก ---------- */
  .main{
    max-height:none; padding:64px 14px 28px;
  }
  .page-title{ font-size:19px; }
  .page-sub{ font-size:13px; margin-bottom:16px; }

  /* ---------- การ์ด: เหลือ 2 ช่องต่อแถว ----------
     ต้องใช้ !important เพราะ app.js เขียน grid-template-columns
     ไว้ในบรรทัด (inline style) ซึ่งชนะ CSS ปกติเสมอ */
  .cards{
    grid-template-columns:repeat(2,1fr) !important;
    gap:10px !important;
  }
  .card{ padding:13px 14px; }
  .card .value{ font-size:19px; }
  .card .label{ font-size:11.5px; }

  /* ตารางฟอร์ม 2 ช่อง → 1 ช่อง */
  .form-grid{ grid-template-columns:1fr !important; }

  /* ---------- ตาราง: เลื่อนแนวนอนได้ + ตรึงคอลัมน์แรก ---------- */
  table{
    display:block; overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    white-space:nowrap;
    border-radius:var(--radius);
  }
  thead th, tbody td{ padding:11px 10px; font-size:13px; }
  /* คอลัมน์แรกตรึงไว้ จะได้รู้ว่ากำลังดูแถวไหนตอนเลื่อนขวา */
  thead th:first-child, tbody td:first-child{
    position:sticky; left:0; z-index:1;
    background:var(--panel);
    box-shadow:1px 0 0 var(--line);
  }
  thead th:first-child{ z-index:3; background:#FBFAF7; }
  tbody tr:nth-child(even) td:first-child{ background:var(--row-alt); }

  /* ---------- Modal เต็มจอ ---------- */
  .overlay{ align-items:flex-end; }
  .modal{
    width:100% !important; max-width:100% !important;
    max-height:92vh; border-radius:16px 16px 0 0;
    padding:22px 18px 26px;
  }
  .modal h2{ font-size:16.5px; }
  .modal-actions{
    position:sticky; bottom:-26px;
    background:#fff; padding:12px 0 0;
    margin:18px -18px -26px; padding:12px 18px 18px;
    border-top:1px solid var(--line);
  }
  .modal-actions .btn{ flex:1; padding:12px; }

  /* ---------- ปุ่ม/ช่องกรอก: ขนาดที่นิ้วกดถูก ---------- */
  .btn{ padding:11px 16px; font-size:14px; }
  .btn.small{ padding:8px 12px; font-size:13px; }
  /* 16px กัน iPhone ซูมหน้าจอเองตอนแตะช่องกรอก */
  .form-row input, .form-row select, .form-row textarea{
    font-size:16px; padding:11px 12px;
  }

  .toolbar{ gap:8px; }
  .toolbar .btn{ flex:1 1 auto; }
  .section-title{ margin:20px 0 8px; }

  /* แถบผู้ใช้ (ระบบล็อกอิน) */
  .user-bar{ padding-bottom:20px; }

  /* หน้าล็อกอิน */
  .login-box{ padding:30px 24px; }
}

/* ---------- จอเล็กมาก (≤ 420px) ---------- */
@media (max-width: 420px){
  .cards{ grid-template-columns:1fr !important; }
  .main{ padding:60px 11px 24px; }
  .page-title{ font-size:17.5px; }
  .card .value{ font-size:21px; }
}

/* ---------- แนวนอนบนมือถือ: sidebar กลับมาเป็นแบบเดิม ---------- */
@media (min-width: 821px){
  body.nav-open::after{ display:none; }
  .sidebar{ transform:none; }
}


/* ===== โหมดการ์ด + แท็บ (เพิ่มโดย install-mobile-cards.js) ===== */

@media (max-width: 820px){

  /* ---------- แท็บ: ไม่ตัดคำ เลื่อนแนวนอนแทน ----------
     เดิม "สต๊อกคงเหลือ (57)" ถูกบีบจนขึ้นบรรทัดใหม่กลางคำ */
  .tabbar{
    overflow-x:auto; flex-wrap:nowrap !important;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .tabbar::-webkit-scrollbar{ display:none; }
  .tabbar > div{
    white-space:nowrap; flex:0 0 auto;
  }

  /* ---------- โหมดการ์ด ----------
     แถวตาราง → การ์ด 1 ใบต่อ 1 รายการ ไม่ต้องเลื่อนซ้ายขวา */
  table.as-cards{
    display:block; background:transparent; box-shadow:none;
    white-space:normal; overflow:visible;
  }
  table.as-cards thead{ display:none; }         /* หัวตารางไม่ต้องใช้ ชื่อไปอยู่ในแต่ละบรรทัดแทน */
  table.as-cards tbody{ display:block; }

  table.as-cards tbody tr{
    display:block;
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:var(--radius);
    box-shadow:var(--shadow-sm);
    padding:12px 14px;
    margin-bottom:10px;
  }
  table.as-cards tbody tr:nth-child(even){ background:var(--panel); }
  table.as-cards tbody tr:hover{ background:var(--panel); }

  table.as-cards tbody td{
    display:flex; justify-content:space-between; align-items:baseline; gap:14px;
    padding:5px 0; border:none;
    white-space:normal; text-align:right;
    position:static !important;   /* ยกเลิกการตรึงคอลัมน์แรก ไม่ต้องใช้ในโหมดการ์ด */
    box-shadow:none !important;
    background:transparent !important;
  }
  /* ชื่อคอลัมน์ทางซ้าย (ใส่ผ่าน data-label) */
  table.as-cards tbody td::before{
    content:attr(data-label);
    font-size:12px; color:var(--ink-soft); font-weight:600;
    text-align:left; flex-shrink:0;
  }
  /* ช่องที่ไม่มีชื่อคอลัมน์ (เช่นช่องปุ่ม) ให้เต็มความกว้าง */
  table.as-cards tbody td[data-label=""]::before{ content:none; }
  table.as-cards tbody td[data-label=""]{
    justify-content:flex-start; gap:8px; flex-wrap:wrap;
    padding-top:10px; margin-top:6px; border-top:1px solid var(--line);
  }

  /* บรรทัดแรกของการ์ด = ลำดับ ทำให้เล็กลง ไม่เด่นเกิน */
  table.as-cards tbody td:first-child{
    color:var(--ink-soft); font-size:12px; padding-bottom:2px;
  }
  /* บรรทัดที่ 2 = ชื่อรุ่น ทำให้เป็นหัวการ์ด */
  table.as-cards tbody td:nth-child(2){
    font-size:15px; font-weight:700;
    padding-bottom:8px; margin-bottom:4px;
    border-bottom:1px solid var(--line);
  }
  table.as-cards tbody td:nth-child(2)::before{
    font-size:12px; font-weight:600;
  }

  /* แถวรวมท้ายตาราง */
  table.as-cards tfoot{ display:block; }
  table.as-cards tfoot tr{
    display:block; background:var(--green-tint);
    border:1px solid var(--green); border-radius:var(--radius);
    padding:12px 14px; margin-top:4px;
  }
  table.as-cards tfoot td{
    display:flex; justify-content:space-between; gap:14px;
    padding:4px 0; border:none; text-align:right;
  }
  table.as-cards tfoot td::before{
    content:attr(data-label);
    font-size:12px; color:var(--ink-soft); font-weight:600; text-align:left;
  }
  table.as-cards tfoot td[colspan]{ display:block; text-align:left; font-size:13.5px; }
  table.as-cards tfoot td[colspan]::before{ content:none; }

  /* ปุ่มในการ์ดให้กดง่าย */
  table.as-cards tbody td .btn.small{ padding:8px 14px; font-size:13px; }
}


/* ===== หน้ารับชำระด่วน (เพิ่มโดย install-quickpay.js) ===== */
.qp-head{
  background:var(--green-tint); border-radius:10px;
  padding:13px 15px; margin-bottom:14px;
}
.qp-head .qp-name{ font-size:16px; font-weight:700; line-height:1.35; }
.qp-head .qp-sub{ font-size:12.5px; color:var(--ink-soft); margin-top:2px; }

.qp-warn{
  background:#FDEBD3; border:1px solid #E8C27A; border-radius:9px;
  padding:10px 13px; margin-bottom:13px; font-size:13px;
}
.qp-ok{
  background:var(--green-tint); border:1px solid var(--green);
  border-radius:9px; padding:12px 14px; margin-bottom:13px;
  font-size:13.5px; text-align:center;
}

/* การ์ดงวด */
.qp-inst{
  border:1px solid var(--line); border-radius:10px;
  padding:12px 14px; margin-bottom:9px;
  background:var(--panel); box-shadow:var(--shadow-sm);
}
.qp-inst.is-next{ border:2px solid var(--green); background:#fff; }
.qp-inst-top{
  display:flex; justify-content:space-between; align-items:baseline; gap:10px;
  margin-bottom:8px;
}
.qp-inst-no{ font-size:14.5px; font-weight:700; }
.qp-inst-due{ font-size:12px; color:var(--ink-soft); }
.qp-inst-amt{
  font-family:'IBM Plex Mono', monospace; font-size:20px; font-weight:700;
  line-height:1.2;
}
.qp-inst-paid{ font-size:12px; color:var(--amber); margin-top:3px; }
.qp-inst .btn{ width:100%; margin-top:10px; padding:12px; font-size:14.5px; }

.qp-badge{
  display:inline-block; font-size:11px; font-weight:700;
  padding:2px 8px; border-radius:99px; margin-left:6px;
  background:var(--red); color:#fff;
}
.qp-more{
  text-align:center; font-size:13px; color:var(--green);
  padding:11px; cursor:pointer; border-top:1px solid var(--line); margin-top:6px;
}
.qp-more:hover{ text-decoration:underline; }
.qp-links{
  display:flex; flex-direction:column; gap:9px; margin-top:14px;
  padding-top:13px; border-top:1px solid var(--line);
}
.qp-links .btn{ width:100%; padding:11px; }


/* ===== แก้แถบผู้ใช้ทับเมนู เลื่อนเมนูไม่สุด (install-fix-sidebar.js) ===== */

.sidebar{
  /* เมนูยาวเกินจอต้องเลื่อนได้ — เดิมไม่มี overflow เลยถูกตัด */
  overflow-y: auto;
  overflow-x: hidden;
  /* ย้ายลายน้ำขึ้นให้พ้นแถบผู้ใช้ด้านล่าง */
  background-position: bottom 130px center;
}

/* แถบเลื่อนของเมนู ให้กลืนกับพื้นหลังกรมท่า */
.sidebar::-webkit-scrollbar{ width:6px; }
.sidebar::-webkit-scrollbar-track{ background:transparent; }
.sidebar::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,0.18); border-radius:99px; border:none;
}
.sidebar::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,0.3); }

/* แถบผู้ใช้: ติดขอบล่างเสมอ มีพื้นหลังทึบ ไม่ให้เมนูลอดมาทับ */
.user-bar{
  position: sticky;
  bottom: 0;
  margin-top: auto;
  padding: 12px 18px calc(14px + env(safe-area-inset-bottom, 0px)) !important;
  background: var(--navy);
  box-shadow: 0 -8px 16px -6px rgba(0,0,0,.45);
  z-index: 2;
}

@media (max-width: 820px){
  .sidebar{
    /* มือถือ: ลายน้ำอยู่ต่ำได้ เพราะเมนูเลื่อนเต็มจอ */
    background-position: bottom 140px center;
  }
}




/* ===== ระยะท้ายหน้า (v3) — แทนที่ของเดิมที่ตีกันเอง =====
   ปัญหา: .main เป็นกล่องเลื่อน (overflow-y:auto)
     - Chrome/Safari ไม่นับ padding-bottom ตอนคำนวณ scrollHeight
     - ถ้ามี ::after มันจะกลายเป็น "ลูกตัวสุดท้าย" ทำให้กฎ :last-child ไปลงผิดที่
   แก้: ไม่ใช้ ::after · ใส่ margin-bottom ให้ลูกจริงตัวสุดท้าย
        margin ของ element จริงถูกนับใน scrollHeight เสมอ */

/* กันไม่ให้ ::after เก่าโผล่มาแย่งตำแหน่งลูกตัวสุดท้าย */
.main::after{ content: none !important; }

/* ลูกจริงตัวสุดท้ายได้ระยะหายใจท้ายหน้า */
.main > *:last-child{
  margin-bottom: 80px !important;
}

/* ตารางที่อยู่ท้ายสุดมักโดนตัดบ่อยสุด — เผื่อไว้เป็นพิเศษ */
.main > table:last-child,
.main > div:last-child > table:last-child{
  margin-bottom: 80px !important;
}

@media (max-width: 820px){
  .main > *:last-child{
    margin-bottom: calc(120px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .main > table:last-child,
  .main > div:last-child > table:last-child{
    margin-bottom: calc(120px + env(safe-area-inset-bottom, 0px)) !important;
  }
}


/* ===== ระยะท้ายหน้า (v4) — ครอบคลุมทุกหน้า =====
   v3 ใส่ margin ที่ "ลูกตัวสุดท้าย" ซึ่งได้ผลบางหน้า
   แต่หน้าที่จบด้วย <p> หรือมีตารางซ้อนในกล่อง ยังถูกตัด
   -> เปลี่ยนมาใช้ ::after เป็นตัวกันระยะแทน (block สูงจริง เบราว์เซอร์นับใน scrollHeight แน่นอน)
      และปิด margin ของลูกตัวสุดท้าย เพื่อไม่ให้ระยะซ้อนกันจนห่างเกินไป */

.main::after{
  content: '' !important;
  display: block !important;
  width: 100%;
  height: 90px;
  flex-shrink: 0;
  pointer-events: none;
}

/* ปิด margin ของ v3 — ใช้ ::after อย่างเดียวพอ ไม่ให้ซ้อนกัน */
.main > *:last-child{ margin-bottom: 0 !important; }
.main > table:last-child,
.main > div:last-child > table:last-child{ margin-bottom: 0 !important; }

@media (max-width: 820px){
  .main::after{
    height: calc(130px + env(safe-area-inset-bottom, 0px));
  }
  .main > *:last-child{ margin-bottom: 0 !important; }
  .main > table:last-child,
  .main > div:last-child > table:last-child{ margin-bottom: 0 !important; }
}


/* ===== FIX-TABLE-CLIP (23 ก.ค. 69) START ===== */
/* ต้นเหตุที่แท้จริงของบั๊ก "เนื้อหาท้ายหน้าถูกตัด" ที่แก้มา 4 รอบไม่หาย
   -------------------------------------------------------------------
   table{ overflow:hidden }  ใช้คู่กับ  thead th{ position:sticky }  ไม่ได้
   เพราะ overflow:hidden ที่ element แม่ จะตัด element ลูกที่ sticky ทิ้ง
   ทันทีที่มันเลื่อนออกจากตำแหน่งเดิม -> หัวตารางถูกตัดครึ่ง

   รอบ 1-4 แก้ที่ .main (padding / margin / ::after) ซึ่งเป็นคนละที่
   กับปัญหา จึงไม่มีทางได้ผล

   แก้: เอา overflow:hidden ออก แล้วทำมุมโค้งที่เซลล์มุมแทน */

table{
  overflow: visible !important;
  border-radius: 0 !important;   /* ย้ายมุมโค้งไปไว้ที่เซลล์ */
}

/* มุมโค้งสวยเหมือนเดิม — ทำที่เซลล์มุมทั้ง 4 แทนที่จะ clip ทั้งตาราง */
table thead tr:first-child th:first-child{
  border-top-left-radius: var(--radius);
}
table thead tr:first-child th:last-child{
  border-top-right-radius: var(--radius);
}
table tbody tr:last-child td:first-child{
  border-bottom-left-radius: var(--radius);
}
table tbody tr:last-child td:last-child{
  border-bottom-right-radius: var(--radius);
}
/* ตารางที่ไม่มี tbody (บางหน้าเขียน tr ตรงๆ) เผื่อไว้ */
table > tr:last-child td:first-child{ border-bottom-left-radius: var(--radius); }
table > tr:last-child td:last-child{ border-bottom-right-radius: var(--radius); }

/* หัวตาราง sticky ทำงานได้เต็มที่แล้ว — ยกระดับให้ทับแถวข้อมูลชัดเจน */
table thead th{
  position: sticky !important;
  top: 0;
  z-index: 3;
}

/* ---- ถอนกฎ v3 / v4 ที่ตกค้าง ----
   ทั้งสองรอบพยายามเติมระยะท้าย .main เพื่อแก้ปัญหาที่ไม่ได้อยู่ตรงนั้น
   ตอนนี้ไม่จำเป็นแล้ว แต่ยังเหลือระยะหายใจท้ายหน้าไว้พอสมควร */
.main::after{
  content: '' !important;
  display: block !important;
  width: 100%;
  height: 40px;          /* ลดจาก 90px — ไม่ต้องเผื่อเยอะแล้ว */
  flex-shrink: 0;
  pointer-events: none;
}
.main > *:last-child{ margin-bottom: 0 !important; }

@media (max-width: 820px){
  .main::after{
    height: calc(70px + env(safe-area-inset-bottom, 0px));
  }
  /* มือถือใช้โหมดการ์ด/เลื่อนแนวนอน — sticky header ปิดไว้กันซ้อนกับ ☰ */
  table thead th{
    position: static !important;
  }
}
/* ===== FIX-TABLE-CLIP END ===== */