@import url('https://fonts.googleapis.com/css2?family=Sarabun:wght@300;400;500;600;700&family=Noto+Sans+Thai:wght@400;600;700&display=swap');

:root{
  --sru-blue: #0B3D91;
  --sru-blue-dark: #072a66;
  --sru-blue-light: #1E6FD9;
  --sru-red: #C8102E;
  --sru-red-dark: #9c0c23;
  --sru-gold: #F5B301;
  --sru-bg: #f2f5fb;
}

*{ font-family: 'Sarabun', 'Noto Sans Thai', sans-serif; }

body{
  background: var(--sru-bg);
  min-height: 100vh;
}

/* ===== Navbar / Header ===== */
.sru-navbar{
  background: linear-gradient(90deg, var(--sru-blue) 0%, var(--sru-blue-light) 60%, var(--sru-red) 100%);
  box-shadow: 0 2px 12px rgba(0,0,0,.15);
}
.sru-navbar .navbar-brand{
  color:#fff !important;
  font-weight:700;
  font-size:1.15rem;
}
.sru-navbar .navbar-brand small{
  display:block;
  font-weight:400;
  font-size:.75rem;
  opacity:.9;
}

/* ===== Hero ===== */
.sru-hero{
  background: linear-gradient(135deg, var(--sru-blue) 0%, var(--sru-blue-light) 55%, var(--sru-red) 130%);
  color:#fff;
  padding: 48px 0 80px;
  position: relative;
  overflow:hidden;
}
.sru-hero::after{
  content:"";
  position:absolute;
  right:-60px; top:-60px;
  width:260px; height:260px;
  background: rgba(255,255,255,.08);
  border-radius:50%;
}
.sru-hero h1{
  font-weight:700;
  font-size:1.6rem;
}
.sru-hero p{
  opacity:.95;
}

/* ===== Search Card ===== */
.search-card{
  margin-top:-56px;
  border:none;
  border-radius:18px;
  box-shadow: 0 10px 35px rgba(11,61,145,.18);
}
.search-card .card-body{
  padding: 2rem;
}
.search-card .form-control{
  border-radius: 10px;
  padding: .65rem 1rem;
  border: 1.5px solid #d9e2f1;
}
.search-card .form-control:focus{
  border-color: var(--sru-blue-light);
  box-shadow: 0 0 0 .2rem rgba(30,111,217,.18);
}

.btn-sru{
  background: linear-gradient(90deg, var(--sru-blue), var(--sru-red));
  border:none;
  color:#fff;
  font-weight:600;
  border-radius:10px;
  padding:.65rem 1.6rem;
  transition:.2s;
}
.btn-sru:hover{
  filter:brightness(1.08);
  color:#fff;
  transform: translateY(-1px);
}

/* ===== Result Card ===== */
.result-card{
  border:none;
  border-radius:16px;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  overflow:hidden;
}
.result-card .result-header{
  padding: 1rem 1.5rem;
  color:#fff;
  font-weight:700;
}
.result-header.status-pass{ background: linear-gradient(90deg, var(--sru-blue), var(--sru-blue-light)); }
.result-header.status-fail{ background: linear-gradient(90deg, var(--sru-red-dark), var(--sru-red)); }
.result-header.status-waiting{ background: linear-gradient(90deg, #b5860a, var(--sru-gold)); }

.result-table th{
  width:42%;
  background:#f5f8ff;
  color: var(--sru-blue-dark);
  font-weight:600;
  white-space:nowrap;
}
.result-table td, .result-table th{
  padding:.7rem .9rem;
  vertical-align:middle;
}

.badge-sru-pass{ background: var(--sru-blue); }
.badge-sru-waiting{ background: var(--sru-gold); color:#3a2900; }
.badge-sru-fail{ background: var(--sru-red); }

footer.sru-footer{
  background: var(--sru-blue-dark);
  color:#e9eefc;
  padding: 24px 0;
  margin-top:60px;
}
footer.sru-footer a{ color: var(--sru-gold); }

/* ===== Admin ===== */
.admin-sidebar{
  background: linear-gradient(180deg, var(--sru-blue-dark), var(--sru-blue));
  min-height:100vh;
  color:#fff;
}
.admin-sidebar .nav-link{
  color: rgba(255,255,255,.85);
  border-radius:8px;
  margin-bottom:4px;
}
.admin-sidebar .nav-link.active,
.admin-sidebar .nav-link:hover{
  background: rgba(255,255,255,.15);
  color:#fff;
}
.stat-card{
  border:none;
  border-radius:14px;
  color:#fff;
  padding:1.2rem 1.4rem;
  box-shadow:0 6px 18px rgba(0,0,0,.1);
}
.stat-card.blue{ background: linear-gradient(135deg, var(--sru-blue), var(--sru-blue-light)); }
.stat-card.red{ background: linear-gradient(135deg, var(--sru-red-dark), var(--sru-red)); }
.stat-card.gold{ background: linear-gradient(135deg, #b5860a, var(--sru-gold)); color:#3a2900; }
.stat-card.gray{ background: linear-gradient(135deg,#4b5563,#6b7280); }

.login-box{
  max-width:400px;
  margin: 8vh auto;
  border-radius:18px;
  border:none;
  box-shadow:0 10px 35px rgba(11,61,145,.2);
  overflow:hidden;
}
.login-box .login-head{
  background: linear-gradient(90deg, var(--sru-blue), var(--sru-red));
  color:#fff;
  padding:1.6rem;
  text-align:center;
}

.table thead th{
  background: var(--sru-blue);
  color:#fff;
  border-color: var(--sru-blue);
  white-space:nowrap;
}