/* Global UI utilities for ระบบบริหารคะแนนนักเรียน */
:root{
  --app-primary:#4f46e5;
  --app-primary-2:#0ea5e9;
  --app-text:#0f172a;
  --app-muted:#64748b;
  --app-card:rgba(255,255,255,.94);
}
html,body{font-family:'Sarabun',system-ui,-apple-system,'Segoe UI',sans-serif;}
.font-kanit{font-family:'Kanit',system-ui,-apple-system,'Segoe UI',sans-serif;}
.glass-nav{background:rgba(255,255,255,.86);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid rgba(226,232,240,.9);box-shadow:0 8px 30px rgba(15,23,42,.04);}
.bento-card,.app-card{background:var(--app-card);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.85);border-radius:24px;box-shadow:0 10px 30px rgba(15,23,42,.05);}
.app-card-hover{transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;}
.app-card-hover:hover{transform:translateY(-3px);box-shadow:0 20px 42px rgba(79,70,229,.12);border-color:rgba(99,102,241,.25);}
.app-table-wrap{width:100%;overflow:auto;border-radius:18px;border:1px solid #e2e8f0;background:#fff;}
.app-table{width:100%;border-collapse:separate;border-spacing:0;font-size:.92rem;}
.app-table th{position:sticky;top:0;background:#f8fafc;color:#334155;font-weight:700;z-index:5;}
.app-table th,.app-table td{padding:.75rem .85rem;border-bottom:1px solid #e2e8f0;vertical-align:middle;}
.app-btn{display:inline-flex;align-items:center;gap:.45rem;border-radius:14px;padding:.6rem .9rem;font-weight:600;transition:all .18s ease;}
.app-btn:active{transform:scale(.98);}
.app-input{width:100%;border:1px solid #cbd5e1;border-radius:14px;padding:.65rem .85rem;background:#fff;outline:none;transition:border-color .18s ease,box-shadow .18s ease;}
.app-input:focus{border-color:#818cf8;box-shadow:0 0 0 4px rgba(99,102,241,.14);}
.app-badge{display:inline-flex;align-items:center;border-radius:999px;padding:.25rem .6rem;font-size:.78rem;font-weight:700;}
.custom-scrollbar::-webkit-scrollbar{width:8px;height:8px;}
.custom-scrollbar::-webkit-scrollbar-track{background:transparent;}
.custom-scrollbar::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:999px;}
.custom-scrollbar::-webkit-scrollbar-thumb:hover{background:#94a3b8;}
@media print{.no-print{display:none!important}body{background:#fff!important}.app-card,.bento-card{box-shadow:none!important;border:0!important}.glass-nav{display:none!important}}

/* Responsive hardening: ให้หน้าเว็บพอดีกับอุปกรณ์ ไม่ต้องซูมเข้า/ออก */
*,*::before,*::after{box-sizing:border-box;}
html{width:100%;max-width:100%;overflow-x:hidden;-webkit-text-size-adjust:100%;}
body{width:100%;max-width:100%;overflow-x:hidden;}
img,svg,video,canvas{max-width:100%;height:auto;}
input,select,textarea,button{max-width:100%;font:inherit;}
table{max-width:100%;}
.app-table-wrap,.custom-scrollbar{max-width:100%;-webkit-overflow-scrolling:touch;}
.app-responsive-scroll{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;}

@media (max-width: 768px){
  body{font-size:15px;}
  .app-card,.bento-card{border-radius:20px!important;}
  .app-table th,.app-table td{padding:.65rem .7rem;font-size:.86rem;}
  .app-btn{width:100%;justify-content:center;}
  .max-w-\[98\%\]{max-width:100%!important;}
  .rounded-\[24px\]{border-radius:20px!important;}
  .rounded-\[28px\]{border-radius:22px!important;}
  .p-8{padding:1.25rem!important;}
  .px-8{padding-left:1.25rem!important;padding-right:1.25rem!important;}
  .py-8{padding-top:1.25rem!important;padding-bottom:1.25rem!important;}
}

@media (max-width: 480px){
  body{font-size:14px;}
  h1,.text-4xl{font-size:1.75rem!important;line-height:1.18!important;}
  h2,.text-3xl{font-size:1.45rem!important;line-height:1.2!important;}
  .text-2xl{font-size:1.25rem!important;line-height:1.25!important;}
  .px-4{padding-left:.85rem!important;padding-right:.85rem!important;}
  .py-6{padding-top:1rem!important;padding-bottom:1rem!important;}
  .gap-6{gap:1rem!important;}
  .w-10.h-10{width:2.25rem!important;height:2.25rem!important;}
}