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

:root {
  --mids-purple: #6a68aa;
  --mids-purple-dark: #55538f;
  --mids-yellow: #f9c66b;
  --mids-blue: #518cc6;
  --mids-green: #4a6b30;
}

/* แถบสีแบรนด์ด้านบนทุกหน้า */
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--mids-yellow) 0 33%, var(--mids-blue) 33% 66%, var(--mids-green) 66%);
  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(38rem 38rem at -8% -10%, rgba(249, 198, 107, .35), transparent 60%),
    radial-gradient(34rem 34rem at 108% 15%, rgba(81, 140, 198, .28), transparent 60%),
    radial-gradient(40rem 40rem at 50% 115%, rgba(74, 107, 48, .18), transparent 60%),
    #f6f6fb !important;
}
[data-bs-theme="dark"] body.app-blank {
  background:
    radial-gradient(38rem 38rem at -8% -10%, rgba(249, 198, 107, .14), transparent 60%),
    radial-gradient(34rem 34rem at 108% 15%, rgba(81, 140, 198, .16), transparent 60%),
    #15141f !important;
}

/* การ์ด */
body.app-blank #app_root > div > div > div.bg-body {
  border-radius: 1.25rem !important;
  border: 1px solid rgba(106, 104, 170, .12);
  box-shadow: 0 1px 2px rgba(30, 27, 60, .06), 0 24px 60px -12px rgba(106, 104, 170, .30) !important;
  padding: 2.75rem 2.5rem 2rem !important;
}

/* หัว: โลโก้เต็มความกว้าง + ชื่อระบบใต้โลโก้ */
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-th.png");
  height: auto !important;
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
  display: block;
}
[data-bs-theme="dark"] body.app-blank #sign_in_form > .container img[alt="Logo"] {
  background: #fff;
  border-radius: .75rem;
  padding: .75rem 1rem;
}
body.app-blank #sign_in_form h1 {
  margin: 1.75rem 0 0 !important;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--mids-purple) !important;
}
body.app-blank #sign_in_form h1::after {
  content: "ดาวน์โหลดและจัดการไฟล์สแกนของคุณ";
  display: block;
  margin-top: .4rem;
  font-size: .95rem;
  font-weight: 400;
  color: #7e7c99;
}

/* ช่องกรอก */
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 #e3e2ef !important;
  background: #fafafe !important;
  padding: .9rem 1.1rem;
  font-size: 1rem;
}
body.app-blank #sign_in_form .form-control:focus {
  border-color: var(--mids-purple) !important;
  background: #fff !important;
  box-shadow: 0 0 0 4px rgba(106, 104, 170, .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(--mids-purple) !important;
  border: 0 !important;
  box-shadow: 0 8px 20px -6px rgba(106, 104, 170, .6);
  transition: background .15s, transform .15s;
}
body.app-blank #sign_in_submit:hover {
  background: var(--mids-purple-dark) !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: #9a98c4 !important; font-size: .9rem; }
body.app-blank #app_root .text-primary a:hover { color: var(--mids-purple) !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: var(--mids-purple-dark) !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: #9a98c4;
}

/* =========================================================
   หน้าหลังล็อกอิน: เมนูด้านซ้าย (sidebar) โทนสว่าง สีแบรนด์ MIdS
   ========================================================= */
body:not(.app-blank) {
  font-family: "IBM Plex Sans Thai", Inter, system-ui, sans-serif !important;
  --bs-app-sidebar-base-bg-color: #ffffff;
  --bs-app-sidebar-base-border-end: 1px solid #ecebf5;
}
[data-bs-theme="dark"] body:not(.app-blank) {
  --bs-app-sidebar-base-bg-color: #17161f;
  --bs-app-sidebar-base-border-end: 1px solid #26253a;
}
body:not(.app-blank) .app-sidebar {
  background:
    radial-gradient(18rem 14rem at 0% 100%, rgba(249, 198, 107, .16), transparent 70%),
    radial-gradient(16rem 12rem at 100% 85%, rgba(81, 140, 198, .12), transparent 70%),
    var(--bs-app-sidebar-base-bg-color) !important;
  box-shadow: 4px 0 24px -12px rgba(106, 104, 170, .25);
}

/* โลโก้ + ชื่อระบบ: ซ้อนกันตรงกลาง */
body:not(.app-blank) .app-sidebar-header { margin: 0 1.5rem !important; padding-top: 2rem !important; }
body:not(.app-blank) .app-sidebar-header > div { margin-bottom: 1.5rem !important; justify-content: center !important; }
body:not(.app-blank) .app-sidebar-logo {
  display: flex; flex-direction: column; align-items: center; gap: .6rem; width: 100%;
  padding-bottom: 1.5rem; border-bottom: 1px solid #ecebf5;
}
[data-bs-theme="dark"] body:not(.app-blank) .app-sidebar-logo { border-color: #26253a; }
body:not(.app-blank) .app-sidebar-logo img {
  content: url("/static/branding/mids-th.png");
  height: auto !important; width: 100%; max-width: 190px;
}
[data-bs-theme="dark"] body:not(.app-blank) .app-sidebar-logo img {
  background: #fff; border-radius: .6rem; padding: .5rem .7rem;
}
body:not(.app-blank) .app-sidebar-logo .text-sidebar {
  padding: .25rem .9rem !important;
  border-radius: 999px;
  background: rgba(106, 104, 170, .1);
  color: var(--mids-purple) !important;
  font-size: .85rem !important; font-weight: 600 !important;
}

/* หัวข้อกลุ่มเมนู */
body:not(.app-blank) .mids-nav-heading {
  padding: 0 1rem .5rem;
  font-size: .75rem; font-weight: 600; letter-spacing: .08em;
  color: #a3a1bd; text-transform: uppercase;
}

/* รายการเมนู */
body:not(.app-blank) .app-sidebar .menu-item { margin-bottom: .25rem; }
body:not(.app-blank) .app-sidebar .menu-link {
  padding: .8rem 1rem !important;
  border-radius: .75rem !important;
  transition: background .15s, color .15s;
}
body:not(.app-blank) .app-sidebar .menu-link .menu-title {
  color: #4b4a63 !important; font-size: 1rem; font-weight: 500;
}
body:not(.app-blank) .app-sidebar .menu-link .menu-icon i { color: #9a98c4 !important; }
body:not(.app-blank) .app-sidebar .menu-link:hover { background: rgba(106, 104, 170, .07) !important; }
body:not(.app-blank) .app-sidebar .menu-link:hover .menu-title,
body:not(.app-blank) .app-sidebar .menu-link:hover .menu-icon i { color: var(--mids-purple) !important; }
body:not(.app-blank) .app-sidebar .menu-link.active {
  background: var(--mids-purple) !important;
  box-shadow: 0 8px 18px -8px rgba(106, 104, 170, .8);
}
body:not(.app-blank) .app-sidebar .menu-link.active .menu-title,
body:not(.app-blank) .app-sidebar .menu-link.active .menu-icon i { color: #fff !important; font-weight: 600; }
[data-bs-theme="dark"] body:not(.app-blank) .app-sidebar .menu-link .menu-title { color: #d6d5e6 !important; }

/* การ์ดแจ้งเตือนท้ายเมนู */
body:not(.app-blank) .mids-nav-card {
  margin: 1.5rem .25rem 0;
  padding: 1rem 1.1rem;
  border-radius: .9rem;
  background: linear-gradient(135deg, rgba(249, 198, 107, .22), rgba(249, 198, 107, .08));
  border: 1px solid rgba(249, 198, 107, .45);
}
body:not(.app-blank) .mids-nav-card-title {
  display: flex; align-items: center;
  font-weight: 700; font-size: .95rem; color: #8a5a00;
}
body:not(.app-blank) .mids-nav-card-title i { color: #c98a12 !important; }
body:not(.app-blank) .mids-nav-card-text { margin-top: .35rem; font-size: .82rem; line-height: 1.5; color: #7a6a4a; }
[data-bs-theme="dark"] body:not(.app-blank) .mids-nav-card-title { color: #f9c66b; }
[data-bs-theme="dark"] body:not(.app-blank) .mids-nav-card-text { color: #cbbd9a; }

/* ชื่อผู้ใช้ท้ายเมนู */
body:not(.app-blank) .mids-nav-user {
  margin: 1rem .25rem 0; padding: .85rem 1.1rem;
  border-radius: .9rem; background: rgba(106, 104, 170, .06);
}
body:not(.app-blank) .mids-nav-user-label { font-size: .75rem; color: #a3a1bd; }
body:not(.app-blank) .mids-nav-user-name {
  margin-top: .15rem; font-size: .85rem; font-weight: 600; color: var(--mids-purple);
  overflow-wrap: anywhere;
}

/* พื้นหลังเนื้อหาหลักให้นุ่มขึ้น */
body:not(.app-blank) .app-main { background: #f7f7fb; }
[data-bs-theme="dark"] body:not(.app-blank) .app-main { background: transparent; }

/* ปุ่มสลับไปหน้า admin (แสดงเฉพาะผู้ดูแล) */
body:not(.app-blank) .mids-nav-switch { margin-top: 1rem; padding-top: 1rem; border-top: 1px dashed #dcdbea; }
body:not(.app-blank) .mids-nav-switch .menu-link { border: 1px solid rgba(224, 70, 94, .35); background: rgba(224, 70, 94, .05); }
body:not(.app-blank) .mids-nav-switch .menu-link .menu-title,
body:not(.app-blank) .mids-nav-switch .menu-link .menu-icon i { color: #c0354d !important; }
body:not(.app-blank) .mids-nav-switch .menu-link:hover { background: rgba(224, 70, 94, .12) !important; }