/* หน้า login (admin/login.php) — แยกไฟล์ต่างหาก ไม่แก้ assets/css/admin.css
   เพราะ login.php ไม่ได้โหลดผ่าน admin/includes/header.php (มี <html>/<head> ของตัวเอง)
   ใช้ prefix .kc-login- กันชนกับคลาสอื่น — โทนสีน้ำเงิน+โลโก้ K เดิมของระบบ (ไม่ใช่เขียว/ครีมจาก mockup อ้างอิง) */

:root {
    --kc-text: #111827;
    --kc-text-muted: #6b7280;
    --kc-border: #e5e7eb;
    --kc-blue: #2563eb;
    --kc-blue-dark: #1d4ed8;
    --kc-blue-bg: #dbeafe;
    --kc-orange-text: #9a4a00;
    --kc-orange-bg: #fff1e0;
    --kc-navy-1: #0b1330;
    --kc-navy-2: #17265a;
    --kc-accent-light: #60a5fa;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    height: 100%;
}

body {
    font-family: 'Noto Sans Thai', -apple-system, "Segoe UI", sans-serif;
    color: var(--kc-text);
    background: #fff;
}

.kc-login-page {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
}

/* ===== แผงซ้าย: แนะนำแบรนด์ (เฉพาะจอกว้าง) ===== */

.kc-login-showcase {
    flex: 1 1 45%;
    max-width: 620px;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 500'%3E%3Cg fill='none' stroke='%2360a5fa' stroke-opacity='0.35' stroke-width='1'%3E%3Cline x1='50' y1='70' x2='160' y2='45'/%3E%3Cline x1='160' y1='45' x2='280' y2='85'/%3E%3Cline x1='280' y1='85' x2='350' y2='60'/%3E%3Cline x1='160' y1='45' x2='90' y2='190'/%3E%3Cline x1='280' y1='85' x2='220' y2='165'/%3E%3Cline x1='350' y1='60' x2='330' y2='210'/%3E%3Cline x1='90' y1='190' x2='220' y2='165'/%3E%3Cline x1='220' y1='165' x2='330' y2='210'/%3E%3Cline x1='90' y1='190' x2='70' y2='320'/%3E%3Cline x1='220' y1='165' x2='210' y2='300'/%3E%3Cline x1='330' y1='210' x2='300' y2='350'/%3E%3Cline x1='70' y1='320' x2='210' y2='300'/%3E%3Cline x1='210' y1='300' x2='300' y2='350'/%3E%3C/g%3E%3Cg fill='%2360a5fa' fill-opacity='0.6'%3E%3Ccircle cx='50' cy='70' r='3'/%3E%3Ccircle cx='160' cy='45' r='3'/%3E%3Ccircle cx='280' cy='85' r='3'/%3E%3Ccircle cx='350' cy='60' r='3'/%3E%3Ccircle cx='90' cy='190' r='3'/%3E%3Ccircle cx='220' cy='165' r='3'/%3E%3Ccircle cx='330' cy='210' r='3'/%3E%3Ccircle cx='70' cy='320' r='3'/%3E%3Ccircle cx='210' cy='300' r='3'/%3E%3Ccircle cx='300' cy='350' r='3'/%3E%3C/g%3E%3C/svg%3E"),
        linear-gradient(160deg, var(--kc-navy-1), var(--kc-navy-2));
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover, cover;
    color: #fff;
    position: relative;
    overflow: hidden;
    padding: 3rem;
    display: flex;
    align-items: center;
}
.kc-login-showcase::before,
.kc-login-showcase::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.12);
    pointer-events: none;
}
.kc-login-showcase::before { width: 420px; height: 420px; top: -140px; right: -160px; }
.kc-login-showcase::after { width: 260px; height: 260px; top: 30px; right: 20px; border-color: rgba(255, 255, 255, 0.08); }

/* กล่อง/สามเหลี่ยมลอย — ให้ความรู้สึกทันสมัย/เทคโนโลยี/AI แทนพื้นเรียบๆ เฉยๆ */
.kc-login-shapes { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.kc-login-shape {
    position: absolute;
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.22), rgba(37, 99, 235, 0.04));
    border: 1px solid rgba(255, 255, 255, 0.14);
}
.kc-login-shape--box1 { width: 150px; height: 150px; top: 12%; left: -50px; border-radius: 28px; transform: rotate(18deg); }
.kc-login-shape--box2 { width: 90px; height: 90px; bottom: 16%; right: 8%; border-radius: 22px; transform: rotate(-14deg); }
.kc-login-shape--box3 { width: 54px; height: 54px; top: 58%; left: 62%; border-radius: 14px; transform: rotate(30deg); background: linear-gradient(135deg, rgba(96, 165, 250, 0.16), transparent); }
.kc-login-shape--triangle {
    width: 80px;
    height: 80px;
    top: 6%;
    right: 22%;
    border: none;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    background: linear-gradient(160deg, rgba(96, 165, 250, 0.3), rgba(37, 99, 235, 0.05));
}

.kc-login-showcase-inner { position: relative; z-index: 1; max-width: 420px; }

.kc-login-brand { display: flex; align-items: center; gap: 0.65rem; margin-bottom: 3rem; }
.kc-login-logo { width: auto; height: 76px; object-fit: contain; display: block; flex-shrink: 0; }
.kc-login-brand-name--light { color: #fff; font-weight: 700; font-size: 1.3rem; }

.kc-login-headline {
    font-size: 2.1rem;
    line-height: 1.28;
    font-weight: 700;
    margin: 0 0 2.5rem;
}
.kc-login-headline-accent { color: var(--kc-accent-light); }

.kc-login-channels { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; }
.kc-login-channels-label { font-size: 0.8rem; color: rgba(255, 255, 255, 0.55); margin-right: 0.15rem; }
.kc-login-channel-chip {
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 999px;
    padding: 0.3rem 0.8rem;
    font-size: 0.8rem;
}

/* ===== แผงขวา: ฟอร์ม login ===== */

.kc-login-form-panel {
    flex: 1 1 55%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: #fff;
}

.kc-login-card { width: 100%; max-width: 380px; }

.kc-login-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--kc-blue-bg);
    color: var(--kc-blue-dark);
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    margin-bottom: 1rem;
}

.kc-login-title { font-size: 1.6rem; font-weight: 700; margin: 0 0 0.4rem; }
.kc-login-subtitle { color: var(--kc-text-muted); font-size: 0.9rem; margin: 0 0 1.75rem; }

.kc-login-error {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    background: var(--kc-orange-bg);
    color: var(--kc-orange-text);
    border-radius: 10px;
    padding: 0.65rem 0.85rem;
    font-size: 0.85rem;
    margin-bottom: 1.25rem;
}
.kc-login-error i { flex-shrink: 0; }

.kc-login-form { display: flex; flex-direction: column; gap: 1.1rem; }
.kc-login-field { display: flex; flex-direction: column; gap: 0.4rem; }
.kc-login-field-label { font-size: 0.85rem; font-weight: 600; color: var(--kc-text); }

.kc-login-input-wrap {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    border: 1px solid var(--kc-border);
    border-radius: 14px;
    padding: 0 0.95rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.kc-login-input-wrap:focus-within {
    border-color: var(--kc-blue);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.kc-login-input-wrap i.kc-login-field-icon { color: var(--kc-text-muted); font-size: 0.9rem; width: 1rem; text-align: center; flex-shrink: 0; }
.kc-login-input-wrap input {
    border: none;
    outline: none;
    flex: 1;
    min-width: 0;
    padding: 0.8rem 0;
    font: inherit;
    font-size: 1rem;
    min-height: 44px;
    background: transparent;
    color: var(--kc-text);
}

.kc-login-toggle-password {
    background: none;
    border: none;
    color: var(--kc-text-muted);
    cursor: pointer;
    padding: 0.5rem;
    margin: 0 -0.4rem 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    flex-shrink: 0;
}
.kc-login-toggle-password:hover { color: var(--kc-blue); }

.kc-login-submit {
    margin-top: 0.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    background: var(--kc-blue);
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 0.85rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
    min-height: 46px;
}
.kc-login-submit:hover { background: var(--kc-blue-dark); }
.kc-login-submit:active { transform: translateY(1px); }
.kc-login-submit-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    flex-shrink: 0;
}

.kc-login-footnote {
    text-align: center;
    font-size: 0.78rem;
    color: var(--kc-text-muted);
    margin: 1.5rem 0 0;
}

@media (max-width: 768px) {
    .kc-login-page { flex-direction: column; }

    .kc-login-showcase {
        flex: none;
        max-width: none;
        padding: 2.5rem 1.75rem 3rem;
    }
    .kc-login-headline { font-size: 1.6rem; margin-bottom: 1.5rem; }
    .kc-login-shape--box1 { width: 100px; height: 100px; }
    .kc-login-shape--triangle { display: none; }

    .kc-login-form-panel {
        flex: none;
        position: relative;
        z-index: 2;
        margin-top: -20px;
        background: #fff;
        border-radius: 24px 24px 0 0;
        padding: 2rem 1.5rem 2.5rem;
    }
}