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

/* ===== Theme tokens ===== */
:root{
  --brand-1:#667eea;  /* indigo */
  --brand-2:#00c4cc;  /* teal   */

  /* default hero gradient */
  --hero-a: var(--brand-1);
  --hero-b: var(--brand-2);

  --text:#1b1f2a;
  --muted:#63718a;
  --card-shadow:0 14px 36px rgba(0,0,0,.12);
  --glass-bg: rgba(255,255,255,.92);
  --glass-border: rgba(255,255,255,.15);
  --field-border:#d7dde9;
  --focus-ring: rgba(102,126,234,.18);
}

/* ===== Body background ===== */
html,body{height:100%}
body{
  font-family:'Noto Sans Thai',system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial,sans-serif;
  color:var(--text);
  background:linear-gradient(135deg,var(--brand-1) 0%, var(--brand-2) 100%);
  min-height:100vh; display:flex; flex-direction:column;
}

/* ===== Navbar (glass) ===== */
.navbar{
  background:rgba(15,23,42,.35)!important;
  backdrop-filter:saturate(140%) blur(10px);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--glass-border);
  box-shadow:0 8px 24px rgba(0,0,0,.18);
}
.navbar-brand img{filter:drop-shadow(2px 2px 2px rgba(0,0,0,.25))}
.navbar-brand span{font-weight:800; letter-spacing:.02em; color:#fff}
.navbar-dark .navbar-nav .nav-link{
  color:rgba(255,255,255,.85);
  padding:.55rem 1rem;
  font-weight:600; transition:all .18s ease; border-radius:.6rem;
}
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link.active{
  color:#fff; background:rgba(255,255,255,.12);
}

/* ===== Hero (ใช้กับ .hero หรือ auto .hero-autofix) ===== */
.hero, .hero-autofix{
  position:relative; overflow:hidden; border-radius:24px;
  background:var(--glass-bg);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid var(--glass-border);
  box-shadow:0 18px 48px rgba(0,0,0,.14);
  padding:clamp(1.25rem,2.8vw,2rem);
  margin-bottom:1.25rem;
}
.hero::after, .hero-autofix::after{
  content:""; position:absolute; inset:auto -32% -32% -32%; height:60%;
  background:linear-gradient(135deg,var(--hero-a) 0%, var(--hero-b) 100%);
  filter:blur(46px); opacity:.2; pointer-events:none;
}
.hero .title, .hero-autofix h1{
  font-weight:800; line-height:1.2; margin:0 0 .25rem 0;
  background:linear-gradient(135deg,var(--hero-a) 0%, var(--hero-b) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero p, .hero-autofix p{ color:var(--muted); margin:0 }

/* ===== Page theme colors (ควบคุมด้วย body class) ===== */
.theme-home       { --hero-a:#667eea; --hero-b:#00c4cc; }
.theme-participant{ --hero-a:#667eea; --hero-b:#00c4cc; }
.theme-team       { --hero-a:#ff7eb3; --hero-b:#65d6ff; }
.theme-teams      { --hero-a:#42e695; --hero-b:#3bb2b8; }
.theme-dashboard  { --hero-a:#f7971e; --hero-b:#ffd200; }
.theme-admin      { --hero-a:#8e9eab; --hero-b:#eef2f3; }

/* ===== Cards / Forms ===== */
.card{
  border:none; border-radius:16px; background:var(--glass-bg);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border:1px solid var(--glass-border); box-shadow:var(--card-shadow);
}
.form-control, .form-select{
  border-radius:.8rem; padding:.8rem 1rem; border:1px solid var(--field-border);
  box-shadow:none; background:#fff;
}
.form-control:focus, .form-select:focus{
  border-color:var(--brand-1);
  box-shadow:0 0 0 .25rem var(--focus-ring);
}

/* ===== Buttons ===== */
.btn-primary{
  background:linear-gradient(135deg,var(--brand-1) 0%, var(--brand-2) 100%);
  border:none; font-weight:700; border-radius:.9rem; padding:.8rem 1rem;
  box-shadow:0 10px 22px rgba(0,0,0,.18);
  transition:transform .12s ease, box-shadow .12s ease;
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 16px 34px rgba(0,0,0,.20) }
.btn-outline-primary{ border-color:var(--brand-1); color:var(--brand-1); font-weight:700; border-radius:.9rem }
.btn-outline-primary:hover{ background:var(--brand-1); color:#fff }

/* ===== Alerts ===== */
.alert{ border:none; border-radius:14px; box-shadow:0 8px 20px rgba(0,0,0,.08) }
.alert-info{
  background:linear-gradient(135deg,rgba(16,185,129,.18),rgba(0,196,204,.16));
  color:#0b6b4b; border:1px solid rgba(16,185,129,.25);
}
.alert-danger{ background:rgba(220,53,69,.12); color:#7d2230; border:1px solid rgba(220,53,69,.25) }
.alert-warning{ background:rgba(255,193,7,.12); color:#7a5b00; border:1px solid rgba(255,193,7,.25) }

/* ===== Utilities ===== */
.narrow{max-width:880px; margin-inline:auto}
.wide{max-width:1100px; margin-inline:auto}
.footer{
  background:rgba(0,0,0,.12); color:#fff;
  border-top:1px solid rgba(255,255,255,.12); margin-top:auto;
}
input::placeholder{ color:#a3acbd }