:root{
  --sky:#e9f5ff;       /* ฟ้าจาง */
  --sky2:#ebebeb;      /* ฟ้าเข้มขึ้นนิด */
  --brand:#3366FF;     /* ฟ้าคราม */
  --ink:#0f172a;       /* สีตัวอักษรหลัก */
  --muted:#64748b;     /* อธิบาย/ข้อความรอง */
  --card:#ffffff;      /* พื้นหลังการ์ด */
  --line:#e6eef7;      /* เส้นขอบบางๆ */
  --shadow: 0 8px 30px rgba(2,132,199,.08);
}

*{ box-sizing: border-box; }
html, body{ height:100%; }
html, body, button, input, select, textarea {
  margin:0;
  /* font-family:'Sarabun', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial; */
  font-family: 'Prompt', sans-serif !important;
  color:var(--ink);
  background: linear-gradient(180deg, var(--sky), #fff 60%);
}

/* Layout */
.app{ min-height:100vh; display:flex; }
.sidebar{
  width:260px;
  padding:20px;
  border-right:1px solid var(--line);
  background: linear-gradient(180deg, #f8fbff, var(--sky2));
  position: sticky; top:0; height:100vh;
  display:flex; flex-direction:column; gap:16px;
}
.content{
  flex:1; padding:28px; max-width:100%; width:100%;
}

/* Sidebar bits */
.brand{
  font-weight:700; font-size:22px; color:#0369a1; letter-spacing:.2px;
}
.userbox{}
.userbox-label{ color:var(--muted); font-size:.9rem; }
.userbox-name{ font-weight:600; margin-top:2px; }
.userbox-id{ color:var(--muted); font-size:.85rem; }

.menu{ display:flex; flex-direction:column; gap:8px; margin-top:6px; }
.menu a{
  text-decoration:none; color:var(--ink);
  padding:10px 12px; border-radius:12px;
  display:flex; align-items:center; gap:10px;
  transition:.2s ease;
}
.menu a:hover, .menu a.active{ background:#e6f2ff; color:#0369a1; }

.menu a i{
  font-size: 1.2rem;
  color: #0369a1;
}


.footer-note{ margin-top:auto; color:var(--muted); font-size:.9rem; }

/* Poster */
.poster{
  background: linear-gradient(135deg, #e0f2ff, #f8fdff 60%);
  border:1px solid #dbeafe;
  border-radius:18px; padding:28px;
  box-shadow: 0 6px 28px rgba(14,165,233,.12);
  margin-bottom:22px;
}
.poster h1{ margin:0 0 8px; font-weight:700; color:var(--brand); }
.poster .lead{ margin:0 0 14px; color:var(--muted); font-size:1.05rem; }
.actions{ display:flex; gap:10px; flex-wrap:wrap; }

/* Cards */
.card{ background:var(--card); border:1px solid var(--line); border-radius:16px; }
.card-flat{ box-shadow: var(--shadow); }
.card .block-head{ padding:18px 18px 0; }
.card .muted{ color:var(--muted); font-size:.95rem; margin-top:6px; }
.card .btns{ padding:14px 18px 18px; display:flex; gap:10px; flex-wrap:wrap; }

/* Chips & Buttons */
.chip{
  display:inline-flex; align-items:center; gap:6px;
  background:#eef6ff; border:1px solid #cfd9fb;
  border-radius:999px; padding:6px 10px; color:#0369a1; font-size:.95rem;
}
.btn{
  appearance:none; -webkit-appearance:none;
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 18px; border-radius:14px; font-weight:600;
  text-decoration:none; cursor:pointer; transition:.2s ease; border:1px solid transparent;
}
.btn-brand{ background:var(--brand); color:#fff; }
.btn-brand:hover{ transform:translateY(-1px); filter:brightness(1.05); }
.btn-ghost{ background:#fff; border:1px solid #cfd9fb; color:#0369a1; }
.btn-ghost:hover{ background:#f5fbff; }
.btn-outline{ background:#fff; border:1px solid #cfd9fb; color:#0369a1; }
.btn-outline:hover{ background:#f2f9ff; }
.btn-outline.alt{ border-style:dashed; }

/* Animation */
.animate-in{ animation:fadeInUp .5s ease both; }
@keyframes fadeInUp{
  from{ opacity:0; transform:translate3d(0, 10px, 0); }
  to{ opacity:1; transform:translate3d(0, 0, 0); }
}

/* Responsive */
@media (max-width: 992px){
  .sidebar{
    position: fixed; height:auto; width:100%; top:0; left:0; right:0; z-index:10;
  }
  .content{ padding: 100px 16px 24px; }
}
@media (max-width: 480px){
  .brand{ font-size:20px; }
  .btn{ padding:11px 16px; border-radius:12px; }
}

/* ปุ่มเมนูมือถือ */
.menu-toggle {
  display:none;
  position:fixed; 
  top:12px; left:12px;
  z-index:1001;

  /* พื้นหลังเบลอ + ขุ่น */
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(6px);

  /* สไตล์ปุ่ม */
  color:#386197;
  border:none;
  border-radius:10px;
  padding:8px 12px;
  font-size:1.4rem;
  font-weight:bold;
  line-height:1;
  cursor:pointer;
  box-shadow:0 4px 12px rgba(0,0,0,0.1);
}

/* Mobile behavior */
@media (max-width: 768px){
  .menu-toggle{ display:block; }
  .sidebar{
    position:fixed;
    top:0; left:-270px;   /* ซ่อนออกนอกจอ */
    height:100%; width:260px;
    z-index:1000;
    transition:left .3s ease;
  }
  .sidebar.open{ left:0; } /* เมื่อกดปุ่มให้เลื่อนเข้ามา */
  .content{ padding:70px 16px 24px; }
}

.userbox {
  display: flex;
  align-items: center;
  gap: 10px; /* ระยะห่างระหว่างรูปกับชื่อ */
  margin: 10px 0;
}

.user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%; /* วงกลม */
  object-fit: cover;
  border: 2px solid #e0f2ff; /* ขอบบางๆ ฟ้าอ่อน */
}

.userbox-name {
  font-weight: 600;
  color: #0f172a;
  font-size: 0.9rem; 
}

/* spacing block */
.p-block{ padding:18px; }

.table-title{ margin:0; font-size:1.15rem; color:#0f172a; font-weight:600; }

/* table */
.table-wrap{ overflow:auto; }
.sj-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
}
.sj-table thead th{
  text-align:left;
  background:#f2f8ff;
  color:#0369a1;
  padding:12px 14px;
  border-top-left-radius:8px;
  border-top-right-radius:8px;
  border-bottom:1px solid #e6eef7;
  font-weight:600;
}
.sj-table tbody td{
  padding:12px 14px;
  border-bottom:1px solid #eef3f9;
  vertical-align:top;
}

/* upload line */
.hidden-file{ display:none; }
.upload-line{ display:flex; align-items:center; gap:10px; margin-top:8px; flex-wrap:wrap; }
.file-name{ font-size:.9rem; color:#64748b; }

/* small button */
.btn-sm{ padding:8px 12px; border-radius:10px; font-size:.9rem; }

/* badges */
.badge{
  display:inline-flex; align-items:center; padding:6px 10px; border-radius:999px;
  font-size:.85rem; font-weight:600;
}
.badge.waiting{ background:#fff7e6; color:#a16207; border:1px solid #fde68a; }
.badge.draft{ background:#eef6ff; color:#0369a1; border:1px solid #cfe8fb; }
.badge.approved{ background:#ecfdf5; color:#047857; border:1px solid #bbf7d0; }

/* mobile */
@media (max-width: 768px){
  .sj-table thead{ display:none; }
  .sj-table tbody tr{ display:block; border:1px solid #eaf3fb; border-radius:12px; margin-bottom:12px; box-shadow:var(--shadow); }
  .sj-table tbody td{ display:flex; padding:10px 12px; }
  .sj-table tbody td::before{
    content: attr(data-label);
    min-width:110px; color:#64748b; font-weight:600;
  }
}

.upload-line {
  display: flex;
  align-items: center;
  gap: 12px;
}

.file-box {
  display: flex;
  align-items: center;
  border: 1px solid #d0e5ff;
  background: #f9fcff;
  border-radius: 8px;
  padding: 6px 10px;
  gap: 10px;
  min-width: 280px; /* กำหนดความกว้างกล่อง */
}

.file-box .file-name {
  font-size: 0.9rem;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px; /* จำกัดชื่อไฟล์ไม่ให้ยาวเกิน */
}

:root{
  --sky:#e9f5ff; --brand:#0ea5e9; --ink:#0f172a; --muted:#64748b; --line:#e6eef7;
  --shadow:0 10px 30px rgba(2,132,199,.08);
  --font:'Prompt', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
*{ box-sizing:border-box; }
html, body{ height:100%; }
body{ margin:0; font-family:var(--font); background:linear-gradient(180deg,var(--sky),#fff); color:var(--ink); }

.login-wrap{ min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:24px; }
.login-card{ width:100%; max-width:420px; background:#fff; border:1px solid var(--line); border-radius:16px; padding:24px; box-shadow:var(--shadow); }
.brand{ font-weight:700; color:#0369a1; font-size:22px; margin-bottom:6px; }
.muted{ color:var(--muted); margin-bottom:12px; }

.form{ display:flex; flex-direction:column; gap:10px; }
label{ font-weight:600; color:var(--ink); }
.form-control{
  width:100%; padding:12px 14px; border:1px solid #dbeafe; border-radius:12px; outline:none; font-family:var(--font);
}
.form-control:focus{ border-color:#b6e0fe; box-shadow:0 0 0 3px rgba(14,165,233,.15); }

.btn{ display:inline-flex; align-items:center; justify-content:center; padding:12px 16px; border-radius:12px; border:0; cursor:pointer; font-weight:600; transition:.15s ease; }
.btn-brand{ background:var(--brand); color:#fff; margin-top:6px; }
.btn-brand:hover{ filter:brightness(1.05); transform:translateY(-1px); }

.alert{ padding:10px 12px; border-radius:10px; margin-bottom:8px; font-size:.95rem; }
.error{ background:#fff1f2; border:1px solid #fecdd3; color:#991b1b; }

.footer{ margin-top:16px; color:var(--muted); font-size:.9rem; text-align:center; }

/* ====== Animations & Effects for Login ====== */

.login-wrap{
  position: relative;
  overflow: hidden;
}
.login-wrap::before,
.login-wrap::after{
  content:"";
  position:absolute;
  width:420px; height:420px;
  border-radius:50%;
  filter: blur(48px);
  opacity:.5;
  z-index:-1;
  animation: float1 14s ease-in-out infinite;
  background: radial-gradient(closest-side, #ebebeb, rgba(191,230,255,0) 70%);
}
.login-wrap::before{
  top:-120px; left:-120px;
}
.login-wrap::after{
  right:-160px; bottom:-160px;
  animation-name: float2;
}

.animate-in{
  animation: fadeUp .55s cubic-bezier(.2,.7,.3,1) both;
}

.form-control{
  transition: border-color .15s ease, box-shadow .2s ease, transform .08s ease;
}
.form-control:focus{
  border-color:#93d5ff;
  box-shadow:0 0 0 6px rgba(14,165,233,.12);
  transform: translateY(-1px);
}

.btn-brand{
  box-shadow: 0 8px 22px rgba(14,165,233,.18);
  transition: transform .12s ease, filter .15s ease, box-shadow .2s ease;
}
.btn-brand:hover{
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow: 0 12px 28px rgba(14,165,233,.24);
}
.btn-brand:active{
  transform: translateY(0);
  box-shadow: 0 6px 16px rgba(14,165,233,.18);
}

.alert.error{
  animation: shake .38s ease both, pop .28s ease both;
}

.brand{
  position: relative;
}
.brand::after{
  content:"";
  position:absolute; left:0; bottom:-6px;
  width:56px; height:6px; border-radius:6px;
  background: linear-gradient(90deg, #7dd3fc, #38bdf8, #7dd3fc);
  opacity:.65;
  animation: shimmer 2.6s linear infinite;
}

@keyframes fadeUp{
  from{ opacity:0; transform: translate3d(0,12px,0) scale(.98); }
  to  { opacity:1; transform: translate3d(0,0,0)  scale(1); }
}
@keyframes shake{
  0%,100%{ transform:translateX(0); }
  20%{ transform:translateX(-6px); }
  40%{ transform:translateX(6px); }
  60%{ transform:translateX(-4px); }
  80%{ transform:translateX(4px); }
}
@keyframes pop{
  from{ transform: scale(.98); }
  to  { transform: scale(1); }
}
@keyframes shimmer{
  0%  { transform: translateX(0); }
  100%{ transform: translateX(120px); }
}
@keyframes float1{
  0%,100%{ transform: translate(0,0); }
  50%{ transform: translate(18px, 12px); }
}
@keyframes float2{
  0%,100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(-16px, -10px) scale(1.06); }
}

@media (prefers-reduced-motion: reduce){
  .animate-in,
  .alert.error,
  .btn-brand,
  .login-wrap::before,
  .login-wrap::after,
  .brand::after{ animation: none !important; transition: none !important; }
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;             
  font-weight: 700;
  color: #0369a1;
  font-size: 22px;
  margin-bottom: 6px;
}

.brand-logo {
  width: 180px;          
  height: 180px;
  object-fit: contain;
}

/* === เฉพาะปุ่มดาวน์โหลดในการ์ดเท่านั้น === */
.card .btns a.btn { 
  text-decoration: none;
  display: inline-flex; 
  align-items: center; 
  justify-content: center;
  padding: 12px 18px; 
  border-radius: 14px; 
  font-weight: 600;
  transition: .2s ease;
}

/* ปุ่มกรอบ */
.card .btns a.btn-outline { 
  background: #fff; 
  border: 1px solid #cfd9fb; 
  color: #0369a1; 
}
.card .btns a.btn-outline:hover { background:#f2f9ff; }

/* ปุ่มกรอบเส้นประ (DOCX) */
.card .btns a.btn-outline.alt { border-style: dashed; }

/* ใช้เฉพาะตารางปกติเท่านั้น ไม่ยุ่งกับ DataTables */
@media (max-width: 768px){
  .sj-table:not(.dataTable) thead{ display:none; }
  .sj-table:not(.dataTable) tbody tr{ display:block; border:1px solid #eaf3fb; border-radius:12px; margin-bottom:12px; box-shadow:var(--shadow); }
  .sj-table:not(.dataTable) tbody td{ display:flex; padding:10px 12px; }
  .sj-table:not(.dataTable) tbody td::before{
    content: attr(data-label);
    min-width:110px; color:#64748b; font-weight:600;
  }
}


/* Uploader – capsule สะอาดตา + responsive */
.uploader{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.uploader__box{
  display:flex; align-items:center; gap:12px;
  padding:10px 12px; border-radius:12px;
  background:#f9fcff; border:1px dashed #cfe8fb;
  min-width:280px; flex:1 1 300px; cursor:pointer;
  transition:.2s ease; box-shadow:0 2px 10px rgba(2,132,199,.06);
}
.uploader__box:hover{ background:#f2f9ff; box-shadow:var(--shadow); }
.u-icon{
  padding:8px; border-radius:10px;
  background:#eaf4ff; color:#0369a1; font-size:1.1rem;
}
.u-title{ color:#0369a1; display:block; line-height:1.2; }
.u-sub{
  display:block; color:#64748b; line-height:1.3;
  max-width:360px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.u-actions{ display:flex; align-items:center; gap:10px; }
.btn[disabled]{ opacity:.55; cursor:not-allowed; }

/* มือถือ: กว้างเต็ม, ปุ่มลงบรรทัดใหม่ */
@media (max-width: 640px){
  .uploader__box{ width:100%; }
  .u-actions{ width:100%; justify-content:flex-start; }
}


.hidden { display: none; }
.center-btn { display:flex; justify-content:center; padding:8px 0 4px; }


  .form-inline {
    display: flex;
    flex-wrap: wrap;         /* ถ้าหน้าจอเล็กจะแตกบรรทัดเอง */
    gap: 16px;               /* ระยะห่างระหว่างช่อง */
    align-items: flex-end;   /* ให้ label/ปุ่มตรง baseline เดียวกัน */
  }
  .form-inline .form-group {
    flex: 1;                 /* กินพื้นที่เท่ากัน */
    min-width: 200px;        /* กันไม่ให้เล็กเกินไป */
  }
  .form-inline button {
    height: 42px;            /* สูงเท่าช่อง input */
    align-self: center;      /* จัดปุ่มให้อยู่กลางแถว */
  }
  .form-inline label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
  }