/* ============================================================
   Admin / Control Panel — ธีมรวม
   ใช้ Bootstrap 5 เป็นโครง + ปรับแต่งเพิ่มให้เข้าธีม esports
============================================================ */
@font-face {
    font-family: 'bebas neue';
    src: url('../../Assets/Font/BebasNeue-Regular.woff2') format('woff2'),
         url('../../Assets/Font/BebasNeue-Regular.woff') format('woff'),
         url('../../Assets/Font/BebasNeue-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

:root {
    /* พื้นที่เนื้อหาหลัก (การ์ด/ฟอร์ม/ตาราง) — โทนฟ้าขาว-ม่วง ปรับได้จากเมนู "ธีมระบบ Admin" */
    --ap-bg: #eef4fb;
    --ap-card: #ffffff;
    --ap-border: #c7d5ec;
    --ap-text: #141b2e;
    --ap-text-muted: #5a6690;
    --ap-blue: #1565e0;
    --ap-red: #ff3b4e;
    --ap-purple: #7b3fe4;
    --ap-accent: #7b3fe4;
    --ap-success: #2ecc71;
    --ap-danger: #ff3b4e;
    --ap-radius: 12px;

    /* แถบเมนูซ้าย — ตั้งใจให้เป็นสีเข้มคงที่เสมอ (ไม่ผูกกับธีมเนื้อหาหลัก)
       เพื่อความคมชัดของตัวอักษร/เอฟเฟกต์ hover ที่ออกแบบมาสำหรับพื้นเข้มโดยเฉพาะ ไม่ต้องกังวลเรื่องกลืนกับพื้นหลัง */
    --ap-sidebar-bg: #0b1220;
    --ap-sidebar-border: #263353;
    --ap-sidebar-text: #eef2f9;
    --ap-sidebar-text-muted: #a9b6d6;
}

* { box-sizing: border-box; }

body {
    font-family: 'Prompt', 'Segoe UI', sans-serif;
    background: var(--ap-bg);
    color: var(--ap-text);
    min-height: 100vh;
    /* บอก browser ว่าเพจนี้เป็นธีมสว่าง เพื่อให้ widget ของระบบ (dropdown popup, date picker, scrollbar ฯลฯ)
       เรนเดอร์ให้เข้ากับพื้นหลังฟ้า-ขาวของระบบ Admin */
    color-scheme: light;
}

h1, h2, h3, h4, .brand-title, .headline {
    font-family: 'bebas neue', 'Prompt', sans-serif;
    letter-spacing: 0.5px;
}

/* -------------------- Login Page -------------------- */
.login-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    /* โทนฟ้า-ขาวของแผนกไอที แต้มม่วงอ่อนของวิทยาลัย เป็นพื้นฐาน (จุดไล่สีแบบลอยตัวอยู่ใน ::before/::after ด้านล่าง) */
    background: var(--ap-bg);
    padding: 16px;
}

/* วงแสงลอยตัวสีฟ้า (เคลื่อนที่ช้าๆ ให้พื้นหลังหน้า login ดูมีชีวิตชีวาขึ้น ไม่ใช่ภาพนิ่ง) */
.login-wrapper::before,
.login-wrapper::after {
    content: "";
    position: absolute;
    width: 60vmax;
    height: 60vmax;
    border-radius: 50%;
    filter: blur(70px);
    z-index: 0;
    pointer-events: none;
}

.login-wrapper::before {
    background: rgba(46, 123, 255, 0.35);
    top: -20vmax;
    left: -15vmax;
    animation: login-orb-float-1 16s ease-in-out infinite;
}

.login-wrapper::after {
    background: rgba(123, 63, 228, 0.32);
    bottom: -22vmax;
    right: -15vmax;
    animation: login-orb-float-2 18s ease-in-out infinite;
}

@keyframes login-orb-float-1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(8vmax, 6vmax) scale(1.15); }
}

@keyframes login-orb-float-2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-7vmax, -5vmax) scale(1.12); }
}

.login-card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 400px;
    background: linear-gradient(180deg, #f4f8ff 0%, #eef2fb 100%);
    border: 1px solid rgba(123,63,228,0.25);
    border-radius: var(--ap-radius);
    padding: 36px 32px;
    box-shadow: 0 20px 60px rgba(21,42,110,0.35);
}

.login-card .form-label { color: #4a5578; }
.login-card .form-control {
    background: #ffffff;
    color: #141b2e;
    border: 1px solid #c7d5ec;
}
.login-card .form-control:focus {
    background: #ffffff;
    color: #141b2e;
    border-color: #7b3fe4;
    box-shadow: 0 0 0 0.2rem rgba(123,63,228,0.2);
}
.login-card .form-control::placeholder { color: #8b96b8; opacity: 1; }

.login-card .logo-mark {
    font-family: 'bebas neue', sans-serif;
    font-size: 2.4rem;
    text-align: center;
    background: linear-gradient(90deg, #1565e0, #7b3fe4);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: 4px;
}

/* บังคับสเกล/จัดกลางโลโก้ในหน้า login ให้แน่นอนเสมอ ไม่ว่าไฟล์ต้นฉบับจะขนาดเท่าไหร่หรือใส่ width มาแบบไหนใน HTML
   (ค่า CSS นี้จะทับ attribute width ใน <img> โดยอัตโนมัติ) */
.login-card .logo-mark img {
    display: block;
    width: auto;
    max-width: 150px;
    max-height: 150px;
    height: auto;
    margin: 0 auto;
    object-fit: contain;
}

.login-card .subtitle {
    text-align: center;
    color: #4a5578;
    font-size: 0.9rem;
    margin-bottom: 24px;
}

.login-card .btn-ap-primary {
    background: linear-gradient(90deg, #1565e0, #7b3fe4);
}
.login-card .btn-ap-primary:hover {
    background: linear-gradient(90deg, #1152b8, #6530c2);
}

.login-copyright {
    text-align: center;
    color: #6b7699;
    font-size: 0.75rem;
    margin-top: 20px;
    padding-top: 14px;
    border-top: 1px solid rgba(123,63,228,0.15);
}

/* -------------------- Dashboard shell -------------------- */
.ap-shell { display: flex; min-height: 100vh; }

.ap-sidebar {
    width: 250px;
    flex-shrink: 0;
    background: var(--ap-sidebar-bg);
    border-right: 1px solid var(--ap-sidebar-border);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
}

.ap-sidebar .brand {
    padding: 14px 18px 8px;
    font-family: 'bebas neue', sans-serif;
    font-size: 1.5rem;
    color: var(--ap-sidebar-text);
    border-bottom: 1px solid var(--ap-sidebar-border);
    background: linear-gradient(90deg, rgba(46,123,255,0.18), rgba(123,63,228,0.18));
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

/* บังคับสเกล/จัดกลางโลโก้ในแถบเมนูซ้ายให้แน่นอนเสมอ ไม่ว่าไฟล์ต้นฉบับจะขนาดเท่าไหร่หรือใส่ width มาแบบไหนใน HTML */
.ap-sidebar .brand img {
    display: block;
    width: auto;
    max-width: 72px;
    max-height: 72px;
    height: auto;
    margin: 0 auto;
    object-fit: contain;
}

.ap-sidebar .brand h6 {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.3;
}

.ap-sidebar .nav-link {
    color: var(--ap-sidebar-text-muted);
    padding: 11px 18px;
    border-radius: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.94rem;
    border-left: 3px solid transparent;
}

.ap-sidebar .nav-link:hover { background: rgba(255,255,255,0.06); color: var(--ap-sidebar-text); }

.ap-sidebar .nav-link.active {
    background: linear-gradient(90deg, rgba(46,123,255,0.22), rgba(123,63,228,0.18));
    color: #fff;
    border-left-color: #a682f0;
}

.ap-sidebar .nav-section-label {
    padding: 14px 18px 6px;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--ap-sidebar-text-muted);
}

.ap-sidebar .user-box {
    margin-top: auto;
    border-top: 1px solid var(--ap-sidebar-border);
    padding: 14px 18px;
    font-size: 0.85rem;
    color: var(--ap-sidebar-text);
}

.ap-sidebar .sidebar-copyright {
    padding: 10px 18px 16px;
    font-size: 0.68rem;
    line-height: 1.4;
    text-align: center;
    color: var(--ap-sidebar-text-muted);
}

.ap-sidebar .role-badge {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 600;
}
.role-badge.super_admin { background: #b8860a; color: #fff; }
.role-badge.admin { background: #1565e0; color: #fff; }
.role-badge.operator { background: #1a9e5c; color: #fff; }

.ap-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.ap-topbar {
    padding: 16px 28px;
    border-bottom: 1px solid var(--ap-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--ap-card);
}

.ap-content { padding: 26px 28px; flex: 1; }

.ap-card {
    background: var(--ap-card);
    border: 1px solid var(--ap-border);
    border-radius: var(--ap-radius);
    padding: 20px;
    margin-bottom: 20px;
}

.ap-card h5 { margin-bottom: 16px; }

.form-label { color: var(--ap-text-muted); font-size: 0.86rem; }

.form-control, .form-select {
    background: #ffffff;
    border: 1px solid var(--ap-border);
    color: var(--ap-text);
}
.form-control:focus, .form-select:focus {
    background: #ffffff;
    color: var(--ap-text);
    border-color: var(--ap-blue);
    box-shadow: 0 0 0 0.2rem rgba(21,101,224,0.2);
}
/* บาง browser ใช้สีเทาที่จางเกินไปเป็นค่า default ของ placeholder ระบุสีให้ชัดเจนตรงนี้เพื่อให้อ่านง่ายเสมอ */
.form-control::placeholder { color: var(--ap-text-muted); opacity: 1; }
.form-control::-ms-input-placeholder { color: var(--ap-text-muted); }

.btn-ap-primary {
    background: var(--ap-blue);
    border: none;
    color: #fff;
    font-weight: 600;
}
.btn-ap-primary:hover { background: #1c63e6; color: #fff; }

.btn-ap-danger { background: var(--ap-danger); border: none; color: #fff; }
.btn-ap-danger:hover { background: #e02c3e; color: #fff; }

.badge-side-blue { background: var(--ap-blue); }
.badge-side-red { background: var(--ap-red); }

.table { color: var(--ap-text); }
.table > :not(caption) > * > * { background: transparent; border-color: var(--ap-border); }

.media-thumb {
    width: 84px; height: 84px; object-fit: contain;
    background: repeating-conic-gradient(#dbe4f0 0% 25%, #eef4fb 0% 50%) 50%/16px 16px;
    border: 1px solid var(--ap-border);
    border-radius: 8px;
    cursor: pointer;
}
.media-thumb.selected { outline: 2px solid var(--ap-blue); }

.color-swatch {
    width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--ap-border);
    padding: 0; cursor: pointer;
}

.timer-box {
    font-family: 'bebas neue', sans-serif;
    font-size: 2.4rem;
    text-align: center;
}

.toast-container { z-index: 2000; }

@media (max-width: 900px) {
    .ap-sidebar { position: fixed; left: -260px; z-index: 1050; transition: left 0.2s; box-shadow: 10px 0 30px rgba(0,0,0,0.4); }
    .ap-sidebar.open { left: 0; }
    .ap-content { padding: 16px; }
}