:root{--brand:#198754;--brand-dark:#0f6b40;--page:#f4f8f5}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:Sarabun,sans-serif;background:var(--page);color:#24332a;overflow-x:hidden}
img{max-width:100%;height:auto}
a,button,input,select,textarea{touch-action:manipulation}
.hero{background:linear-gradient(135deg,#198754,#52b788);color:#fff;border-radius:22px}
.card{border:0;border-radius:16px;overflow:hidden}
.card-header{border-bottom:0}
.stat{font-size:2rem;font-weight:700}
.table thead th{white-space:nowrap}
.table-responsive{border-radius:12px;-webkit-overflow-scrolling:touch}
.form-control,.form-select{min-height:44px;border-radius:10px}
.btn{border-radius:10px;min-height:40px}
.navbar{box-shadow:0 3px 14px rgba(0,0,0,.12)}
.navbar-brand{max-width:72vw;white-space:normal;line-height:1.15}
.navbar-toggler{border-color:rgba(255,255,255,.55);padding:.45rem .6rem}
.navbar-toggler:focus{box-shadow:0 0 0 .2rem rgba(255,255,255,.22)}
.badge{white-space:normal}
.modal-content{border:0;border-radius:16px}

@media (max-width:991.98px){
  main.container{max-width:100%;padding-left:14px;padding-right:14px}
  .navbar>.container{max-width:100%;padding-left:14px;padding-right:14px}
  .navbar-collapse{margin-top:.75rem;background:rgba(0,0,0,.10);padding:.45rem .65rem .7rem;border-radius:12px}
  .navbar-nav .nav-link{padding:.72rem .8rem;border-bottom:1px solid rgba(255,255,255,.12)}
  .navbar-nav .nav-item:last-child .nav-link{border-bottom:0}
  .card-body{padding:1rem}
  .display-4,.display-5,.display-6{font-size:clamp(1.65rem,7vw,2.5rem)}
}

@media (max-width:767.98px){
  body{font-size:15px}
  main.container{padding-top:14px!important;padding-bottom:24px!important}
  h1{font-size:1.75rem} h2{font-size:1.45rem} h3{font-size:1.25rem} h4{font-size:1.1rem}
  .row.g-4{--bs-gutter-y:1rem}
  .card{border-radius:14px}
  .card-header{padding:.85rem 1rem!important}
  .card-body{padding:.9rem}
  .btn:not(.btn-sm){min-height:46px;padding:.65rem .9rem}
  .mobile-full,.d-grid-mobile>.btn{width:100%}
  .table{font-size:.9rem;margin-bottom:0}
  .table th,.table td{padding:.65rem .55rem;vertical-align:middle}
  .table-responsive{box-shadow:inset -10px 0 10px -14px rgba(0,0,0,.55)}
  .input-group>.btn{min-height:44px}
  .modal-dialog{margin:.75rem}
  .modal-footer{gap:.4rem}
  .modal-footer .btn{flex:1}
  .pagination{flex-wrap:wrap;gap:.2rem}
  .pagination .page-link{border-radius:8px!important}
  .text-end.mobile-start{text-align:left!important}
  .action-buttons,.btn-toolbar{display:flex;flex-wrap:wrap;gap:.45rem}
  .action-buttons .btn,.action-buttons form{flex:1 1 auto}
  .action-buttons form .btn{width:100%}
}

@media (max-width:420px){
  .navbar-brand{font-size:1rem}
  .container{padding-left:10px;padding-right:10px}
  .card-body{padding:.8rem}
  .table{font-size:.84rem}
  .btn-sm{padding:.42rem .55rem}
}

/* V15.4: mobile refinements for summary cards */
.dashboard-summary .card{height:100%}
.dashboard-summary .display-6{word-break:break-word}
@media (max-width:575.98px){
  .dashboard-summary .col-md-4,.dashboard-summary .col-md-3,.dashboard-summary .col-lg-3{width:100%}
  .dashboard-summary .card-body{display:flex;flex-direction:column;justify-content:center;min-height:132px;text-align:center}
  .dashboard-summary .display-6{font-size:1.75rem}
  .hero{border-radius:16px}
  .hero .btn{width:100%;margin-top:.4rem}
  .navbar-brand img{width:38px!important;height:38px!important}
}