/* หน้า Login (SSO) — สไตล์เฉพาะหน้าที่ Ant Design Vue ไม่ได้ให้
   คอมโพเนนต์ทั้งหมด (ฟอร์ม · ปุ่ม · การ์ด · แถบประกาศ) เป็นของ antd
   ไฟล์นี้ดูแลแค่โครงสองคอลัมน์กับการย่อตามจอ */
[v-cloak] { display: none; }
html, body { height: 100%; }
body { margin: 0; background: #f5f7fb; }

.login-page {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-height: 100vh;
}

/* แผงโลโก้ซ้าย — รูป SVG 720x1024 แบบ cover จึงถูกครอปบน/ล่างเมื่อจอกว้าง */
.login-brand {
    position: relative;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 12px 16px;
    color: #fff;
}
.version_show { font-size: 13px; opacity: .85; word-break: break-all; }

/* คอลัมน์ฟอร์ม — จัดกลางทั้งสองแกน · แถบประกาศอยู่ในโฟลว์ ไม่ทับปุ่มอีก */
.login-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 24px 16px;
}
/* แถบประกาศ — หน้าตาเดิมของ production (เจ้าของงานขอไว้ 7 ก.ย. 2569): ไล่สีเต็มความกว้าง ตรึงขอบล่าง
   ข้อความขาวจัดกลาง ลิงก์เหลือง ปุ่ม × ขวา · ต่างจากเดิมตรงที่ทั้งสองคอลัมน์เว้นที่ด้านล่างเท่า --banner-h
   (วัดจริงด้วย ResizeObserver ใน view) แถบจึงไม่ทับปุ่ม Login ในจอเตี้ยอีก */
.login-brand, .login-panel { padding-bottom: calc(var(--banner-h, 0px) + 12px); }
.login-announcement {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 900; /* ต่ำกว่า Modal/message ของ antd (1000+) */
    background: linear-gradient(135deg, #07070791, #3b82f6);
    color: #fff;
    padding: 1.5rem;
    box-shadow: 0 -4px 6px rgba(0, 0, 0, .1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    animation: login-banner-up .5s ease-in-out;
}
.login-announcement-content { flex: 1; text-align: center; }
.login-announcement-content p { margin: .5rem 0; font-size: 1rem; line-height: 1.5; }
.login-announcement-content a { color: #fef08a; font-weight: bold; text-decoration: none; transition: color .3s; }
.login-announcement-content a:hover { color: #fff; text-decoration: underline; }
.login-announcement-close.ant-btn { color: #fff; font-size: 1.5rem; line-height: 1; height: auto; padding: .25rem .5rem; }
.login-announcement-close.ant-btn:hover { color: #fff; background: rgba(255, 255, 255, .15); }
@keyframes login-banner-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
.login-card { width: 100%; max-width: 440px; box-shadow: 0 8px 24px rgba(0, 76, 151, .08); }
.login-title { text-align: center; margin-bottom: 24px !important; }
.login-icon { width: 1em; height: 1em; fill: currentColor; color: rgba(0, 0, 0, .45); }
.login-links { width: 100%; align-items: center; }
.login-manual .login-icon { margin-right: 6px; vertical-align: -0.125em; color: inherit; }

/* หน้าลงทะเบียน (SSORegister) — ใช้โครงเดียวกับ Login เพิ่มแค่ส่วนที่ต่าง */
.register-card { max-width: 480px; }
.register-card .login-title { margin-bottom: 4px !important; }
.register-subtitle { text-align: center; margin-bottom: 16px !important; }
.register-hint { margin-bottom: 20px; }
.register-actions-space { width: 100%; }
.register-actions-space .ant-space-item { width: 100%; }
.register-back { display: block; text-align: center; }

/* จอแคบ — ซ้อนเป็นคอลัมน์เดียว โลโก้เหลือแถบบน */
@media (max-width: 900px) {
    .login-page { grid-template-columns: 1fr; }
    .login-brand, .login-panel { padding-bottom: 12px; }
    .login-brand { min-height: 140px; }
    .version_show { display: none; }
    /* จอซ้อน: แถบประกาศเลิกตรึง ไปต่อท้ายฟอร์มในโฟลว์ — วัดที่ 800×600 แล้วแบบตรึงจะทับปุ่ม Login ตอนเปิดหน้า
       (ต้องเลื่อนถึงจะเห็น) ส่วนแบบในโฟลว์ปุ่มอยู่ในจอทันที */
    .login-announcement { position: relative; flex-direction: column; text-align: center; padding: 1rem; animation: none; }
    .login-announcement-close.ant-btn { position: absolute; top: .25rem; right: .25rem; }
}
/* จอเตี้ย (≤ 700px เช่น 1024×576 · 1152×648) — บีบช่องว่างและเลิกจัดกลางแนวตั้ง
   ให้ปุ่ม Login อยู่ในจอโดยไม่ต้องเลื่อน ส่วนที่เหลือเลื่อนดูได้แทนที่จะโดนตัด */
@media (max-height: 700px) {
    /* ห้ามใช้ shorthand padding ตรงนี้ — จะทับ padding-bottom ที่เว้นให้แถบประกาศ แล้วแถบกลับมาทับปุ่มที่ 800×600 (วัดเจอจริง) */
    .login-panel { justify-content: flex-start; padding-top: 12px; padding-left: 16px; padding-right: 16px; gap: 8px; }
    .login-card .ant-card-body { padding: 16px 24px; }
    .login-title { margin-bottom: 12px !important; }
}