/* หน้าผู้ดูแลระบบ (web admin) — พื้นมืด ม่วงเข้ม + ป้ายแดง ใช้สีแบรนด์ MIdS */
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Thai:wght@400;500;600;700&display=swap");

:root {
  --mids-purple: #6a68aa;
  --admin-ink: #1c1b33;
  --admin-red: #e0465e;
}

/* แถบลายทแยงแดง-ม่วงด้านบนทุกหน้า: บอกว่าอยู่ฝั่ง admin */
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto 0;
  height: 5px;
  background: repeating-linear-gradient(135deg, var(--admin-red) 0 12px, var(--admin-ink) 12px 24px);
  z-index: 9999;
}

/* ---------- หน้า login ---------- */
body.app-blank,
body.app-blank input,
body.app-blank button {
  font-family: "IBM Plex Sans Thai", Inter, system-ui, sans-serif !important;
}
body.app-blank {
  min-height: 100vh;
  background:
    radial-gradient(40rem 40rem at 15% -10%, rgba(106, 104, 170, .55), transparent 60%),
    radial-gradient(30rem 30rem at 100% 110%, rgba(224, 70, 94, .25), transparent 60%),
    linear-gradient(180deg, #1c1b33 0%, #12111f 100%) !important;
}

/* การ์ด */
body.app-blank #app_root > div > div > div.bg-body {
  position: relative;
  border-radius: 1.25rem !important;
  overflow: hidden;
  box-shadow: 0 30px 80px -10px rgba(0, 0, 0, .6) !important;
  padding: 3.5rem 2.5rem 2rem !important;
}
/* ริบบิ้น "ผู้ดูแลระบบ" ที่หัวการ์ด */
body.app-blank #app_root > div > div > div.bg-body::before {
  content: "🔒  ADMINISTRATOR · ผู้ดูแลระบบเท่านั้น";
  position: absolute;
  inset: 0 0 auto 0;
  padding: .55rem 1rem;
  background: var(--admin-ink);
  color: #fff;
  font: 600 .8rem/1.4 "IBM Plex Sans Thai", system-ui, sans-serif;
  letter-spacing: .06em;
  text-align: center;
  border-bottom: 3px solid var(--admin-red);
}

/* หัว: โลโก้ + ชื่อ */
body.app-blank #sign_in_form > .container { padding: 0; margin-bottom: 2rem !important; }
body.app-blank #sign_in_form > .container > .row { flex-direction: column; text-align: center; margin: 0; }
body.app-blank #sign_in_form > .container .col-5,
body.app-blank #sign_in_form > .container .col-7 { width: 100%; padding: 0; }
body.app-blank #sign_in_form > .container img[alt="Logo"] {
  content: url("/static/branding/mids.png");
  height: auto !important;
  width: 100%;
  max-width: 190px;
  margin: .75rem auto 0;
  display: block;
}
[data-bs-theme="dark"] body.app-blank #sign_in_form > .container img[alt="Logo"] {
  background: #fff;
  border-radius: .75rem;
  padding: .6rem .9rem;
}
body.app-blank #sign_in_form h1 {
  margin: 1.5rem 0 0 !important;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--admin-ink) !important;
}
[data-bs-theme="dark"] body.app-blank #sign_in_form h1 { color: #fff !important; }
body.app-blank #sign_in_form h1::after {
  content: "ระบบรับไฟล์สแกน · จัดการผู้ใช้และไฟล์ทั้งหมด";
  display: block;
  margin-top: .4rem;
  font-size: .95rem;
  font-weight: 400;
  color: #85849b;
}

/* ช่องกรอก */
body.app-blank #sign_in_form .fv-row { margin-bottom: 1.1rem !important; }
body.app-blank #sign_in_form .form-control {
  border-radius: .75rem;
  border: 1px solid #e2e1ea !important;
  background: #f7f7fa !important;
  padding: .9rem 1.1rem;
  font-size: 1rem;
}
body.app-blank #sign_in_form .form-control:focus {
  border-color: var(--admin-ink) !important;
  background: #fff !important;
  box-shadow: 0 0 0 4px rgba(224, 70, 94, .15);
}
[data-bs-theme="dark"] body.app-blank #sign_in_form .form-control {
  background: #1f1e2c !important;
  border-color: #33324a !important;
}

/* ปุ่ม */
body.app-blank #sign_in_submit {
  margin-top: .75rem;
  border-radius: .75rem;
  padding: .9rem;
  font-size: 1.05rem;
  font-weight: 600;
  background: var(--admin-ink) !important;
  border: 0 !important;
  box-shadow: 0 8px 20px -6px rgba(28, 27, 51, .6);
  transition: background .15s, transform .15s;
}
body.app-blank #sign_in_submit:hover {
  background: var(--admin-red) !important;
  transform: translateY(-1px);
}

/* ท้ายการ์ด */
body.app-blank #app_root hr { opacity: .08; margin: 1.5rem 0 0; }
body.app-blank #app_root .text-primary a { color: #9a99ad !important; font-size: .9rem; }
body.app-blank #app_root .text-primary a:hover { color: var(--admin-red) !important; }

/* ---------- ปุ่ม "เข้าสู่ระบบด้วย CMU Account" (Microsoft) — แบบเดียวกับหน้าผู้ใช้ ---------- */
body.app-blank a[href*="oidclogin"] {
  display: flex !important; align-items: center; justify-content: center; gap: .75rem;
  margin: .5rem 0 0 !important; padding: 1rem !important;
  border-radius: .75rem !important; border: 0 !important;
  background: var(--mids-purple) !important; color: #fff !important;
  font-size: 1.05rem; font-weight: 600;
  box-shadow: 0 8px 20px -6px rgba(106, 104, 170, .6);
  transition: background .15s, transform .15s;
}
body.app-blank a[href*="oidclogin"]:hover { background: #55538f !important; transform: translateY(-1px); }
body.app-blank a[href*="oidclogin"] img {
  content: url("/static/branding/microsoft.svg");
  height: 22px !important; width: 22px; margin: 0 !important; padding: 2px; background: #fff; border-radius: 4px;
}
body.app-blank a[href*="oidclogin"] span { display: none; }
body.app-blank a[href*="oidclogin"]::after { content: "เข้าสู่ระบบด้วย CMU Account"; }
body.app-blank #sign_in_form .mids-oidc::after {
  content: "เฉพาะผู้ดูแลระบบที่ได้รับสิทธิ์ · ใช้อีเมล @cmu.ac.th";
  display: block; margin-top: 1rem; font-size: .85rem; color: #85849b;
}

/* ปุ่มไปหน้าผู้ใช้ในเมนู admin */
body:not(.app-blank) .mids-nav-switch { margin-top: 1rem; padding-top: 1rem; border-top: 1px dashed rgba(255,255,255,.15); }
body:not(.app-blank) .mids-nav-switch .menu-link { border: 1px solid rgba(106, 104, 170, .6); border-radius: .75rem; }