ด้วย ใน HTML
========================================================================== */
.table-scroll {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
/* บอกผู้ใช้ด้วยเงาบาง ๆ ว่ายังมีเนื้อหาเลยขอบไปทางขวา
--scroll-bg คือสีพื้นหลังที่ตารางวางอยู่ ค่าปกติคือขาว
กล่องที่พื้นหลังไม่ใช่สีขาวให้ตั้งค่าตัวแปรนี้ทับ (ดู .legacy-box ด้านล่าง) */
.table-scroll {
--scroll-bg: #fff;
background:
linear-gradient(to right, var(--scroll-bg) 30%, rgba(255,255,255,0)) left center,
linear-gradient(to left, var(--scroll-bg) 30%, rgba(255,255,255,0)) right center,
radial-gradient(farthest-side at 0% 50%, rgba(0,0,0,.12), rgba(0,0,0,0)) left center,
radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.12), rgba(0,0,0,0)) right center;
background-repeat: no-repeat;
background-size: 36px 100%, 36px 100%, 14px 100%, 14px 100%;
background-attachment: local, local, scroll, scroll;
}
/* กล่องเตือนยอดยกมาใช้พื้นเหลือง ถ้าไม่ตั้งค่าจะเห็นแถบขาวซีดที่ขอบตาราง */
.legacy-box .table-scroll { --scroll-bg: #fff3cd; }
/* ⚠️ min-width ต้องอยู่ "นอก" media query
ไม่งั้นช่วง 769–1024px (แท็บเล็ตแนวนอน / โน้ตบุ๊กจอเล็ก) ตารางจะไม่มีทั้ง
min-width และ overflow ที่ทำงาน ส่วนที่ล้นจะถูก html{overflow-x:hidden} ตัดทิ้ง
แล้วเลื่อนไปดูไม่ได้เลย
ตารางคอลัมน์น้อยไม่ต้องใส่ class ปล่อยให้ยืดตามจอ
ตารางคอลัมน์เยอะใส่ class="wide" หรือกำหนดเป็นรายตัว */
.table-scroll > table.wide { min-width: 720px; }
.table-scroll > table#detailedTable { min-width: 1000px; }
@media (max-width: 768px) {
table { font-size: 13px; }
th, td { padding: 8px 6px; }
}
@media (max-width: 480px) {
table { font-size: 12px; }
th, td { padding: 6px 5px; }
}
/* ==========================================================================
4. ฟอร์ม — แถว flex ต้องยุบลงมาเรียงบน-ล่างได้
========================================================================== */
@media (max-width: 768px) {
/* แถวฟอร์มในหน้าบันทึกข้อมูล (manage.php) ใช้ inline style display:flex */
form > div[style*="display: flex"],
form > div[style*="display:flex"] {
flex-wrap: wrap;
gap: 0 !important;
}
form > div[style*="display: flex"] > .form-group,
form > div[style*="display:flex"] > .form-group {
flex: 1 1 100% !important;
margin-bottom: 14px;
}
/* กล่องตัวกรอง (manage.php) เดิมเป็น flex แนวนอน */
.filter-box form {
flex-direction: column;
align-items: stretch;
gap: 12px;
}
.filter-box .form-group { width: 100%; }
.filter-box button { width: 100%; }
/* กล่องตั้งค่าในหน้าประมาณการรายรับ
ต้องใช้ !important เพราะฟอร์มเหล่านี้เขียน display ไว้ใน inline style
ใช้ > เพื่อไม่ให้ไปโดนฟอร์ม "ล้างค่า" ที่ซ้อนอยู่ในข้อความด้านล่าง */
.setting-box > form { display: block !important; margin-left: 0 !important; width: 100%; }
.setting-box .field-row { flex-direction: column; align-items: stretch; gap: 12px; }
.setting-box .field-row input,
.setting-box .field-row select { width: 100% !important; }
.setting-box .field-row button { width: 100%; }
/* แถบเลื่อนปีในหน้าประมาณการรายรับ */
.year-nav { flex-direction: column; align-items: stretch; text-align: center; }
.year-nav form { display: flex !important; gap: 8px; align-items: center; justify-content: center; }
.year-nav select { flex: 1; }
.year-nav .nav-btn { text-align: center; }
/* ฟอร์มกรองของหน้ารายงานที่วางช่องเรียงกันด้วยข้อความล้วน */
.filter-box { text-align: left; }
.filter-box label { display: block; margin-top: 8px; font-size: 13px; }
.filter-box input[type="number"],
.filter-box select { width: 100% !important; margin-bottom: 4px; }
.filter-box button { width: 100%; margin: 6px 0 0 0 !important; }
}
/* ==========================================================================
5. หน้า Dashboard (index.php)
========================================================================== */
@media (max-width: 1024px) {
.bottom-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
.header {
padding: 26px 16px 46px;
border-radius: 0 0 24px 24px;
margin-bottom: -32px;
}
.header h1 { font-size: 20px; line-height: 1.45; }
.header p { font-size: 13px; }
/* เฉพาะ Dashboard เท่านั้น — การ์ดมีขอบของตัวเองอยู่แล้ว ไม่ต้องมี padding ซ้อน
ถ้าไม่ scope ด้วย .page-dashboard หน้าอื่นที่ใช้ .container จะเหลือ padding ซ้าย-ขวา 0
แล้วตัวหนังสือจะชนขอบกล่อง */
.page-dashboard .container { padding-left: 0; padding-right: 0; }
.cards-grid { grid-template-columns: 1fr; gap: 14px; }
.card { padding: 20px; border-radius: 18px; }
.card-value { font-size: 28px; }
/* หัวการ์ดที่มี dropdown อยู่ด้วย ต้องยอมให้ตกบรรทัด */
.card-title { flex-wrap: wrap !important; gap: 8px !important; }
.card-title form { width: 100%; }
.card-title select { width: 100%; }
.chart-container, .table-container { padding: 18px; border-radius: 18px; }
/* กล่องกราฟ: เตี้ยลงบนมือถือ ไม่งั้นกินพื้นที่เกินครึ่งจอ */
.chart-container > div[style*="height: 400px"] { height: 280px !important; min-height: 280px !important; }
/* แถวหัวข้อกราฟเดิมเป็น grid 3 คอลัมน์ (ว่าง / หัวข้อ / ตัวเลือก) */
.chart-container > div[style*="grid-template-columns"] {
grid-template-columns: 1fr !important;
text-align: center;
}
.chart-container > div[style*="grid-template-columns"] > div:first-child { display: none; }
.agency-item { padding: 12px 0; }
.agency-name { white-space: normal; }
.nrru-footer { padding: 26px 16px; }
.footer-secondary-text { font-size: 14px; }
}
@media (max-width: 480px) {
.header h1 { font-size: 17px; }
.card-value { font-size: 24px; }
.agency-avatar { width: 38px; height: 38px; font-size: 16px; }
.agency-amount { font-size: 14px; }
}
/* ==========================================================================
6. หน้ารายงานสรุป PDF (report_trend.php)
========================================================================== */
@media (max-width: 1024px) {
.grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
/* scope ด้วย .page-trend เพราะหน้านี้ใช้ padding ที่ body โดยตรง
ถ้าไม่ scope หน้าอื่นจะมีขอบเทาโผล่รอบ header และ footer ที่ออกแบบให้เต็มจอ */
.page-trend { padding: 10px; }
.grid-3 { grid-template-columns: 1fr; }
.split-layout { grid-template-columns: 1fr; }
.controls-bar { flex-direction: column; align-items: stretch; gap: 10px; }
.controls-bar form { flex-wrap: wrap; justify-content: center; }
.bill-header h1 { font-size: 18px; }
.page-trend .card-value { font-size: 22px; }
}
/* ==========================================================================
7. หน้าเข้าสู่ระบบ / เปลี่ยนรหัสผ่าน
========================================================================== */
@media (max-width: 480px) {
.login-box, .box {
padding: 26px 20px;
margin: 0 14px;
border-radius: 14px;
}
.login-box h2, .box h2 { font-size: 20px; }
}
/* จอเตี้ย (มือถือแนวนอน) — หน้า login ตั้ง height:100vh + flex center ไว้
ถ้ากล่องสูงกว่าจอ เนื้อหาด้านบนจะถูกตัดและเลื่อนขึ้นไปดูไม่ได้ */
@media (max-height: 560px) {
.page-auth { height: auto !important; min-height: 100vh; padding: 20px 0; }
.login-box, .box { margin-top: 20px; margin-bottom: 20px; }
}
/* ==========================================================================
8. การพิมพ์ — ซ่อนส่วนที่ไม่ควรติดไปในกระดาษ
========================================================================== */
@media print {
.navbar, .nav-toggle, .filter-box, .year-nav, .setting-box { display: none !important; }
.container { box-shadow: none !important; margin: 0 !important; padding: 0 !important; max-width: 100% !important; }
.table-scroll { overflow: visible !important; background: none !important; }
.table-scroll > table { min-width: 0 !important; }
}
/* ==========================================================================
9. เคารพการตั้งค่าของผู้ใช้ที่ขอให้ลดการเคลื่อนไหว
========================================================================== */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
}