/* Modern UX/UI Enhancement */
:root{
  --cpe-primary:#4f46e5;
  --cpe-secondary:#7c3aed;
  --cpe-bg:#f5f7fb;
  --cpe-card:#ffffff;
  --cpe-text:#1f2937;
}
body{
  background:linear-gradient(180deg,#f8fafc 0%,#eef2ff 100%) !important;
  color:var(--cpe-text);
}
.card,.dash-card,.modal-content,.table{
  border:none !important;
  border-radius:20px !important;
  box-shadow:0 10px 30px rgba(15,23,42,.08) !important;
}
.btn{
  border-radius:14px !important;
  font-weight:600 !important;
  transition:all .2s ease;
}
.btn:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 20px rgba(79,70,229,.18);
}
.btn-primary{
  background:linear-gradient(135deg,var(--cpe-primary),var(--cpe-secondary)) !important;
  border:none !important;
}
.table{
  overflow:hidden;
}
.table thead th{
  background:#eef2ff !important;
  color:#312e81 !important;
  border:none !important;
  font-weight:700;
}
.table tbody tr:hover{
  background:#f8fafc !important;
}
.form-control,.form-select{
  border-radius:14px !important;
  border:1px solid #dbe4ff !important;
  padding:12px 14px !important;
  box-shadow:none !important;
}
.form-control:focus,.form-select:focus{
  border-color:#6366f1 !important;
  box-shadow:0 0 0 4px rgba(99,102,241,.15) !important;
}
.sidebar,.navbar,.header{
  backdrop-filter:blur(12px);
}
.badge,.label{
  border-radius:999px !important;
  padding:8px 12px !important;
}
.modal-content{
  overflow:hidden;
}

/* ==========================================================
   LOGIN MODAL INPUT OVERLAP FIX - 2026-05-27
   แก้ปัญหา Username/Password ซ้อนกับตัวอักษรที่พิมพ์
   และแก้สี/ตำแหน่งตอน Chrome autofill
========================================================== */
#loginmodal .modal-body,
.modal-content#loginmodal .modal-body{
    overflow-y:auto !important;
    max-height:75vh !important;
}

#loginmodal .modal-login-form,
.modal-content#loginmodal .modal-login-form{
    width:100% !important;
}

#loginmodal .form-floating,
.modal-content#loginmodal .form-floating{
    position:relative !important;
    margin-bottom:22px !important;
}

#loginmodal .form-floating > .form-control,
.modal-content#loginmodal .form-floating > .form-control{
    height:72px !important;
    min-height:72px !important;
    padding:30px 16px 11px 16px !important;
    font-size:17px !important;
    font-weight:700 !important;
    line-height:1.35 !important;
    color:#111827 !important;
    background:#fff !important;
    border-radius:18px !important;
    box-shadow:none !important;
}

#loginmodal .form-floating > .form-control::placeholder,
.modal-content#loginmodal .form-floating > .form-control::placeholder{
    color:transparent !important;
}

#loginmodal .form-floating > label,
.modal-content#loginmodal .form-floating > label{
    position:absolute !important;
    top:0 !important;
    left:0 !important;
    height:auto !important;
    padding:13px 16px 0 16px !important;
    margin:0 !important;
    font-size:15px !important;
    font-weight:600 !important;
    line-height:1.1 !important;
    color:#6b7280 !important;
    background:transparent !important;
    transform:none !important;
    opacity:1 !important;
    pointer-events:none !important;
    z-index:2 !important;
}

#loginmodal .form-floating > .form-control:focus ~ label,
#loginmodal .form-floating > .form-control:not(:placeholder-shown) ~ label,
#loginmodal .form-floating > .form-control:-webkit-autofill ~ label,
.modal-content#loginmodal .form-floating > .form-control:focus ~ label,
.modal-content#loginmodal .form-floating > .form-control:not(:placeholder-shown) ~ label,
.modal-content#loginmodal .form-floating > .form-control:-webkit-autofill ~ label{
    transform:none !important;
    color:#6b7280 !important;
    opacity:1 !important;
}

#loginmodal .form-floating > .form-control:focus,
.modal-content#loginmodal .form-floating > .form-control:focus{
    border-color:#6c4cff !important;
    box-shadow:0 0 0 4px rgba(108,76,255,.14) !important;
}

#loginmodal input:-webkit-autofill,
#loginmodal input:-webkit-autofill:hover,
#loginmodal input:-webkit-autofill:focus,
.modal-content#loginmodal input:-webkit-autofill,
.modal-content#loginmodal input:-webkit-autofill:hover,
.modal-content#loginmodal input:-webkit-autofill:focus{
    -webkit-box-shadow:0 0 0 1000px #fff inset !important;
    box-shadow:0 0 0 1000px #fff inset !important;
    -webkit-text-fill-color:#111827 !important;
    caret-color:#111827 !important;
    transition:background-color 9999s ease-out 0s !important;
}

#loginmodal .btn,
.modal-content#loginmodal .btn{
    min-height:58px !important;
    border-radius:16px !important;
}

.modal-dialog-scrollable .modal-body{
    overflow-y:auto !important;
}