/* ===== ธีมน้ำตาล–มิ้นต์–ขาว · ระบบสวนยางอัจฉริยะ ===== */
:root{
  --bg:#F7F3ED; --surface:#FFFFFF; --surface2:#FBF7F1; --line:#E6DCCE;
  --ink:#2C231C; --muted:#7E6C5D;
  --brown:#6B4B34; --brown-deep:#43301F; --tan:#C9A57B;
  --mint:#2FA98A; --mint-deep:#1F7F68; --mint-soft:#E3F3ED; --mint-line:#B9E0D2;
  --warn:#C1741C; --danger:#AF4230;
  --shadow:0 1px 2px rgba(67,48,31,.06),0 8px 24px -12px rgba(67,48,31,.18);
  --r:14px;
}
[data-theme="dark"]{
  --bg:#17130F; --surface:#211A15; --surface2:#1B1511; --line:#382D24;
  --ink:#F2E9DE; --muted:#A3907F;
  --brown:#C9A57B; --brown-deep:#2A2019; --tan:#8C6A48;
  --mint:#4FC9A6; --mint-deep:#7FDCC0; --mint-soft:#16302A; --mint-line:#23473E;
  --warn:#DF9A46; --danger:#E0705C;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px -12px rgba(0,0,0,.6);
}
*{box-sizing:border-box}
html{font-size:16px}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:"Noto Sans Thai","Segoe UI",sans-serif;font-size:1rem;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-wrap:pretty}
a{color:var(--mint-deep);text-decoration:none}
a:hover{color:var(--mint);text-decoration:underline}
h1,h2,h3,h4{margin:0;font-weight:700;line-height:1.3}
img{max-width:100%}
input,select,textarea,button{font-family:inherit;font-size:1rem}

/* ===== โครงหน้า ===== */
.app{display:flex;min-height:100vh}
.sidebar{width:15.5rem;flex:none;background:var(--brown-deep);color:#F6E9D8;padding:1.125rem 1rem;
  display:flex;flex-direction:column;gap:1.25rem;position:sticky;top:0;height:100vh;overflow:auto}
[data-theme="dark"] .sidebar{border-right:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:.625rem}
.brand-logo{width:2.25rem;height:2.25rem;border-radius:10px;background:var(--mint);color:#08211B;
  display:grid;place-items:center;font-weight:700;font-size:.875rem;flex:none}
.brand-name{font-size:.9375rem;font-weight:700;line-height:1.2}
.brand-sub{font-size:.6875rem;opacity:.65}
.nav{display:flex;flex-direction:column;gap:.1875rem}
.nav-group{font-size:.625rem;letter-spacing:.08em;opacity:.5;margin:.75rem 0 .25rem .5rem;text-transform:uppercase}
.nav a{display:flex;align-items:center;gap:.625rem;padding:.5625rem .6875rem;border-radius:10px;
  color:rgba(246,233,216,.78);font-size:.875rem;font-weight:500;text-decoration:none}
.nav a:hover{background:rgba(246,233,216,.1);color:#fff;text-decoration:none}
.nav a.active{background:rgba(47,169,138,.24);color:#fff;font-weight:700}
.nav .ic{width:1.25rem;text-align:center;flex:none}
.side-user{margin-top:auto;display:flex;align-items:center;gap:.625rem;padding:.75rem;
  background:rgba(246,233,216,.08);border-radius:12px}
.avatar{width:2rem;height:2rem;border-radius:999px;background:var(--tan);color:#2C231C;
  display:grid;place-items:center;font-size:.8125rem;font-weight:700;flex:none;overflow:hidden}
.main{flex:1;min-width:0;display:flex;flex-direction:column}

.topbar{display:flex;align-items:center;gap:1rem;padding:.875rem 1.5rem;background:var(--surface);
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;flex-wrap:wrap}
.page-title{font-size:1.125rem;font-weight:700}
.page-sub{font-size:.75rem;color:var(--muted)}
.topbar-tools{margin-left:auto;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.content{padding:1.5rem;display:flex;flex-direction:column;gap:1.25rem;flex:1}

/* ===== ปุ่ม ===== */
.btn{display:inline-flex;align-items:center;gap:.4rem;padding:.5rem .875rem;border-radius:10px;
  border:1px solid var(--line);background:var(--surface2);color:var(--ink);font-size:.875rem;
  font-weight:600;cursor:pointer;text-decoration:none;line-height:1.4;min-height:2.5rem}
.btn:hover{border-color:var(--mint);color:var(--ink);text-decoration:none}
.btn-primary{background:var(--mint);border-color:var(--mint);color:#08211B}
.btn-primary:hover{background:var(--mint-deep);border-color:var(--mint-deep);color:#fff}
.btn-danger{color:var(--danger)}
.btn-sm{padding:.3rem .55rem;font-size:.8125rem;min-height:2rem}
.btn-icon{width:2.5rem;height:2.5rem;padding:0;justify-content:center}
.fontsize{display:flex;align-items:center;gap:.25rem;padding:.1875rem;border:1px solid var(--line);
  border-radius:999px;background:var(--surface2)}
.fontsize button{width:2.25rem;height:2.25rem;border:0;border-radius:999px;background:transparent;
  color:var(--ink);font-weight:700;cursor:pointer}
.fontsize button:last-child{background:var(--mint-soft);color:var(--mint-deep)}
.fontsize span{font-size:.75rem;color:var(--muted);min-width:2.75rem;text-align:center}

/* ===== การ์ด ===== */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.card-head{display:flex;align-items:center;gap:.625rem;padding:.875rem 1.25rem;border-bottom:1px solid var(--line);flex-wrap:wrap}
.card-title{font-size:.9375rem;font-weight:700}
.card-body{padding:1.125rem 1.25rem}
.grid{display:grid;gap:1rem}
.g5{grid-template-columns:repeat(5,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g21{grid-template-columns:2fr 1fr}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:1rem 1.125rem}
.kpi-label{font-size:.9375rem;font-weight:600;color:var(--ink)}
.kpi-value{font-size:1.75rem;font-weight:700;margin-top:.25rem;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.kpi-delta{font-size:.875rem;font-weight:600;margin-top:.25rem;color:var(--muted)}
.up{color:var(--mint-deep)}.down{color:var(--danger)}.mid{color:var(--warn)}
.chip{display:inline-block;padding:.1875rem .5rem;border-radius:999px;background:var(--mint-soft);
  color:var(--mint-deep);font-size:.6875rem;font-weight:700}
.chip-warn{background:rgba(193,116,28,.14);color:var(--warn)}
.chip-muted{background:var(--surface2);color:var(--muted)}

/* ===== ตาราง ===== */
.table-wrap{overflow-x:auto}
table.tbl{width:100%;border-collapse:collapse;font-size:.875rem}
table.tbl th{background:var(--surface2);color:var(--muted);font-weight:600;text-align:left;
  padding:.6875rem 1rem;white-space:nowrap}
table.tbl td{padding:.75rem 1rem;border-top:1px solid var(--line);vertical-align:middle}
table.tbl tr:hover td{background:var(--surface2)}
.num{text-align:right;font-variant-numeric:tabular-nums}
.strong{font-weight:700}
.thumb{width:2.5rem;height:2.5rem;border-radius:8px;object-fit:cover;border:1px solid var(--line)}

/* DataTables ให้เข้ากับธีมน้ำตาล-มิ้นต์ */
table.dataTable thead th{background:var(--surface2)!important;color:var(--muted)!important;
  border-bottom:1px solid var(--line)!important;cursor:pointer}
table.dataTable thead th.dt-orderable-asc:hover,table.dataTable thead th.dt-orderable-desc:hover{color:var(--ink)!important}
table.dataTable tbody tr{background:transparent!important}
div.dt-container{width:100%}
.dt-empty{color:var(--muted)}

/* ===== แบ่งหน้า ===== */
.pager{display:flex;gap:.375rem;flex-wrap:wrap}
.page-btn{padding:.5rem .75rem;border:1px solid var(--line);border-radius:10px;background:var(--surface);
  color:var(--ink);font-size:.875rem;font-weight:600;text-decoration:none;min-height:2.5rem;
  display:inline-flex;align-items:center}
.page-btn:hover{border-color:var(--mint);text-decoration:none;color:var(--ink)}
.page-btn.current{background:var(--mint-soft);border-color:var(--mint-line);color:var(--mint-deep)}
.page-btn.disabled{background:var(--surface2);color:var(--muted);cursor:not-allowed}
.table-foot{display:flex;align-items:center;gap:.75rem;padding:.875rem 1.25rem;border-top:1px solid var(--line);flex-wrap:wrap}
.table-foot .info{font-size:.875rem;color:var(--muted)}
.table-foot .pager{margin-left:auto}

/* ===== ฟอร์ม ===== */
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem 1.25rem}
.field{display:flex;flex-direction:column;gap:.375rem}
.field.wide{grid-column:1 / -1}
.label{font-size:.875rem;font-weight:600;color:var(--muted)}
.label .req{color:var(--danger)}
.input,select.input,textarea.input{padding:.75rem .875rem;border:1px solid var(--line);border-radius:10px;
  background:var(--surface);color:var(--ink);width:100%;min-height:2.75rem}
.input:focus{outline:2px solid var(--mint-line);border-color:var(--mint)}
.input[readonly]{background:var(--surface2);color:var(--muted)}
.hint{font-size:.75rem;color:var(--muted)}
.err{font-size:.75rem;color:var(--danger)}
.calc-box{grid-column:1 / -1;background:var(--mint-soft);border:1px solid var(--mint-line);border-radius:var(--r);padding:1.125rem}
.calc-row{display:flex;justify-content:space-between;font-size:.9375rem;color:var(--muted);margin-bottom:.375rem}
.calc-row b{color:var(--ink)}
.calc-total{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--mint-line);padding-top:.75rem;margin-top:.5rem}
.calc-total b{font-size:1.5rem;color:var(--mint-deep)}
.split{display:flex;gap:.5rem;margin:.5rem 0}
.split button{flex:1;padding:.6rem 0;border-radius:10px;border:1px solid var(--line);background:var(--surface);
  color:var(--ink);font-weight:700;cursor:pointer}
.split button.on{background:var(--mint-soft);border-color:var(--mint-line);color:var(--mint-deep)}
.form-actions{display:flex;gap:.625rem;padding:1rem 1.25rem;border-top:1px solid var(--line);flex-wrap:wrap}

/* ===== แจ้งเตือน / รายการงาน ===== */
.alert-item{display:flex;gap:.625rem;padding:.625rem .75rem;background:var(--surface2);border:1px solid var(--line);
  border-left:3px solid var(--mint);border-radius:10px}
.alert-item.warn{border-left-color:var(--warn)}
.alert-item.danger{border-left-color:var(--danger)}
.alert-item .t{font-size:.875rem;font-weight:600}
.alert-item .d{font-size:.75rem;color:var(--muted)}
.list{display:flex;flex-direction:column;gap:.625rem}
.flash{padding:.875rem 1.25rem;border-radius:12px;background:var(--mint-soft);border:1px solid var(--mint-line);
  color:var(--mint-deep);font-weight:600}
.flash.error{background:rgba(175,66,48,.1);border-color:var(--danger);color:var(--danger)}
.bar{height:.5rem;background:var(--surface2);border-radius:999px;overflow:hidden}
.bar>i{display:block;height:100%;border-radius:999px;background:var(--brown)}
.empty{padding:3rem 1rem;text-align:center;color:var(--muted)}

/* ===== bottom bar (มือถือ) ===== */
.bottombar{display:none}
.mobile-only{display:none}

@media (max-width:1024px){
  .g4,.g5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g3,.g21,.g2{grid-template-columns:1fr}
}
@media (max-width:768px){
  .sidebar{position:fixed;left:0;top:0;bottom:0;z-index:60;transform:translateX(-100%);
    transition:transform .22s ease;height:100vh}
  .sidebar.open{transform:none}
  .backdrop{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:50;display:none}
  .backdrop.open{display:block}
  .mobile-only{display:inline-flex}
  .content{padding:1rem 1rem 5.5rem}
  .topbar{padding:.75rem 1rem}
  .g4,.g5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .form-grid{grid-template-columns:1fr}
  .kpi-value{font-size:1.375rem}
  /* ตารางกลายเป็นการ์ดอ่านง่ายบนมือถือ */
  table.tbl thead{display:none}
  table.tbl,table.tbl tbody,table.tbl tr,table.tbl td{display:block;width:100%}
  table.tbl tr{border:1px solid var(--line);border-radius:12px;margin-bottom:.75rem;background:var(--surface);overflow:hidden}
  table.tbl td{border-top:0;display:flex;justify-content:space-between;gap:1rem;padding:.5rem 1rem;text-align:right}
  table.tbl td:first-child{background:var(--surface2);font-weight:700}
  table.tbl td::before{content:attr(data-label);color:var(--muted);font-weight:600;text-align:left}
  .bottombar{display:flex;position:fixed;bottom:0;left:0;right:0;background:var(--surface);
    border-top:1px solid var(--line);padding:.5rem .25rem .625rem;z-index:40}
  .bottombar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:.1875rem;
    color:var(--muted);font-size:.6875rem;font-weight:600;text-decoration:none;min-height:3rem;justify-content:center}
  .bottombar a.active{color:var(--mint-deep)}
  .bottombar .ic{font-size:1.125rem;line-height:1}
}

@media print{
  .sidebar,.topbar,.bottombar,.no-print{display:none!important}
  body{background:#fff}
  .card{box-shadow:none;border:1px solid #ddd}
}