/* ============================================================================
 * index.css — หน้าเข้าสู่ระบบ (index.php) แบบ Crimson Horizon (design.md)
 * ----------------------------------------------------------------------------
 * ใช้ token จาก css/layout_c360.css (โหลดก่อนไฟล์นี้) — prefix ของหน้า lgn-
 * โครง: แถบแบรนด์สีแดงด้านบน (กราฟิก dashboard จาง ๆ) + การ์ดเข้าสู่ระบบกลางจอทับขอบแถบ + ชิปส่วนงาน
 * 2026-10-15 Claude สร้างใหม่ (แทน css/index_login.css)
 * 2026-10-15 Claude เลิกแบบแบ่งจอซ้าย/ขวา → การ์ดกลางจอทับแถบแบรนด์
 * 2026-10-15 Claude ตัวบอกกำลังโหลด (.lgn-spinner) ไม่ปิดตาม prefers-reduced-motion — เครื่อง Windows ที่ปิด Animation effects เห็นหยุดนิ่งเหมือนค้าง
 * 2026-10-19 Claude โลโก้ Horizon: .lgn-logo เป็น crm_endorsed.svg (กว้างสุด 260px), เพิ่ม .lgn-mark-logo ในป้าย CRM แถบบน
 * 2026-10-20 Claude โลโก้เปลี่ยนเป็น concept C (Cornerstone) สีน้ำเงินตาม design.md (ไฟล์ใน images/logo/ ชื่อเดิม crm_endorsed.svg, ป้ายใช้ crm_mark.svg)
 * 2026-10-21 Claude .lgn-footer Copyright ซ้าย / เลขเวอร์ชัน (.lgn-version) ชิดขวา
 * ========================================================================== */

/* ---------------------------------------------------------------------------
 * หมวด: token เฉพาะหน้า (ต่อยอดจาก --c360-*)
 * ------------------------------------------------------------------------- */
:root {
    --lgn-brand-deep: #12234a;
    --lgn-band-h: 46vh;
    --lgn-on-brand: #ffffff;
    --lgn-on-brand-muted: rgba(255, 255, 255, 0.78);
    --lgn-on-brand-line: rgba(255, 255, 255, 0.22);
    --lgn-deco-fill: rgba(255, 255, 255, 0.08);
    --lgn-deco-ink: rgba(255, 255, 255, 0.28);
    --lgn-deco-ink-strong: rgba(255, 255, 255, 0.5);
}

/* ---------------------------------------------------------------------------
 * หมวด: พื้นฐานของหน้า
 * ------------------------------------------------------------------------- */
html,
body.lgn-body {
    height: 100%;
}

body.lgn-body {
    margin: 0;
    font-family: var(--c360-font);
    font-size: 14px;
    color: var(--c360-text);
    background: var(--c360-surface);
    -webkit-font-smoothing: antialiased;
}

body.lgn-body *,
body.lgn-body *::before,
body.lgn-body *::after {
    box-sizing: border-box;
}

.is-hidden {
    display: none !important;
}

.lgn-stage {
    position: relative;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

/* ---------------------------------------------------------------------------
 * หมวด: แถบแบรนด์ด้านบน
 * ------------------------------------------------------------------------- */
.lgn-band {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--lgn-band-h);
    min-height: 300px;
    overflow: hidden;
    border-bottom-left-radius: 50% 56px;
    border-bottom-right-radius: 50% 56px;
    background:
        radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.1) 1px, transparent 0) 0 0 / 22px 22px,
        radial-gradient(ellipse at 50% 120%, rgba(220, 230, 247, 0.28) 0%, transparent 60%),
        linear-gradient(160deg, var(--c360-primary) 0%, var(--c360-primary-hover) 55%, var(--lgn-brand-deep) 100%);
}

.lgn-top {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 20px 24px;
    color: var(--lgn-on-brand);
}

.lgn-top-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.lgn-mark {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    padding: 0 12px;
    border-radius: var(--c360-radius-sm);
    background: var(--lgn-on-brand);
    color: var(--c360-primary);
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 0.08em;
    gap: 6px;
}

/* สัญลักษณ์ Cornerstone สี primary หน้าคำว่า CRM บนป้ายขาว — images/logo/crm_mark.svg */
.lgn-mark-logo {
    display: block;
    width: 18px;
    height: 18px;
}

.lgn-top-company {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 14px;
    font-weight: 500;
    color: var(--lgn-on-brand-muted);
}

.lgn-top-pill {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border: 1px solid var(--lgn-on-brand-line);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--lgn-on-brand);
}

.lgn-top-pill .fa {
    color: var(--c360-peach);
}

/* ---------------------------------------------------------------------------
 * หมวด: กราฟิกตกแต่ง (dashboard จาง ๆ ในแถบแบรนด์ — aria-hidden)
 * ------------------------------------------------------------------------- */
.lgn-deco {
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    border: 1px solid var(--lgn-on-brand-line);
    border-radius: var(--c360-radius);
    background: var(--lgn-deco-fill);
    animation: lgn-float 9s ease-in-out infinite;
}

.lgn-deco-head {
    display: block;
    width: 56%;
    height: 8px;
    border-radius: 999px;
    background: var(--lgn-deco-ink-strong);
}

/* กราฟแท่ง */
.lgn-deco-chart {
    top: 96px;
    left: 6%;
    width: 230px;
    transform: rotate(-4deg);
}

.lgn-deco-bars {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    height: 92px;
}

.lgn-deco-bars i {
    flex: 1 1 0;
    border-radius: 4px 4px 2px 2px;
    background: var(--lgn-deco-ink);
}

.lgn-deco-bars i:nth-child(1) {
    height: 38%;
}

.lgn-deco-bars i:nth-child(2) {
    height: 62%;
}

.lgn-deco-bars i:nth-child(3) {
    height: 48%;
}

.lgn-deco-bars i:nth-child(4) {
    height: 84%;
    background: var(--lgn-deco-ink-strong);
}

.lgn-deco-bars i:nth-child(5) {
    height: 56%;
}

.lgn-deco-bars i:nth-child(6) {
    height: 72%;
}

.lgn-deco-bars i:nth-child(7) {
    height: 44%;
}

/* รายการลูกค้า */
.lgn-deco-list {
    top: 240px;
    left: 15%;
    width: 210px;
    transform: rotate(3deg);
    animation-delay: -3s;
}

.lgn-deco-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.lgn-deco-row b {
    flex: 0 0 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--lgn-deco-ink);
}

.lgn-deco-row em {
    flex: 1 1 auto;
    height: 7px;
    border-radius: 999px;
    background: var(--lgn-deco-ink);
}

/* วงแหวนสัดส่วน */
.lgn-deco-ring {
    top: 104px;
    right: 7%;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    width: 210px;
    transform: rotate(4deg);
    animation-delay: -5s;
}

.lgn-deco-donut {
    flex: 0 0 74px;
    height: 74px;
    border-radius: 50%;
    background: conic-gradient(var(--lgn-deco-ink-strong) 0 62%, var(--lgn-deco-ink) 62% 84%, transparent 84% 100%);
    -webkit-mask: radial-gradient(circle, transparent 52%, #000 53%);
    mask: radial-gradient(circle, transparent 52%, #000 53%);
}

.lgn-deco-legend {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.lgn-deco-legend em {
    display: block;
    height: 7px;
    border-radius: 999px;
    background: var(--lgn-deco-ink);
}

.lgn-deco-legend em:last-child {
    width: 64%;
}

/* ตัวเลขสรุป */
.lgn-deco-kpi {
    top: 236px;
    right: 15%;
    width: 170px;
    transform: rotate(-3deg);
    animation-delay: -7s;
}

.lgn-deco-dot {
    display: block;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: var(--lgn-deco-ink-strong);
}

.lgn-deco-big {
    display: block;
    width: 78%;
    height: 16px;
    border-radius: 6px;
    background: var(--lgn-deco-ink-strong);
}

/* ---------------------------------------------------------------------------
 * หมวด: ส่วนการ์ด (กลางจอ)
 * ------------------------------------------------------------------------- */
.lgn-main {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 16px 24px;
}

.lgn-card {
    width: 100%;
    max-width: 432px;
    margin-top: 4vh;
    padding: 36px 34px 28px;
    background: var(--c360-card);
    border: 1px solid var(--c360-border);
    border-top: 3px solid var(--c360-primary);
    border-radius: var(--c360-radius);
    box-shadow: 0 2px 4px rgba(20, 26, 45, 0.06), 0 24px 60px rgba(10, 22, 48, 0.22);
    animation: lgn-rise 0.45s var(--c360-ease) both;
}

.lgn-logo {
    display: block;
    width: 100%;
    max-width: 260px;
    height: auto;
    margin: 0 auto 24px;
}

.lgn-env-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 0 20px;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--c360-warning-bg);
    color: var(--c360-warning);
    font-size: 12px;
    font-weight: 600;
}

.lgn-title {
    margin: 0 0 6px;
    font-size: 24px;
    font-weight: 700;
    color: var(--c360-text);
}

.lgn-subtitle {
    margin: 0 0 24px;
    font-size: 13.5px;
    color: var(--c360-muted);
}

/* ---------------------------------------------------------------------------
 * หมวด: แจ้งเตือน (login ไม่ผ่าน / กรอกไม่ครบ)
 * ------------------------------------------------------------------------- */
.lgn-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 20px;
    padding: 12px 14px;
    border-radius: var(--c360-radius-sm);
    border: 1px solid rgba(176, 32, 26, 0.22);
    background: var(--c360-danger-bg);
    color: var(--c360-danger);
    font-size: 13.5px;
    line-height: 1.5;
    animation: lgn-shake 0.4s var(--c360-ease);
}

.lgn-alert .fa {
    margin-top: 2px;
    font-size: 16px;
}

/* ---------------------------------------------------------------------------
 * หมวด: ช่องกรอก
 * ------------------------------------------------------------------------- */
.lgn-form {
    margin: 0;
}

.lgn-field {
    margin-bottom: 18px;
}

.lgn-label {
    display: block;
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--c360-text);
}

.lgn-input-wrap {
    position: relative;
}

.lgn-input-icon {
    position: absolute;
    top: 50%;
    left: 14px;
    transform: translateY(-50%);
    font-size: 15px;
    color: var(--c360-faint);
    pointer-events: none;
    transition: color 0.15s var(--c360-ease);
}

.lgn-input {
    display: block;
    width: 100%;
    height: 46px;
    padding: 0 14px 0 42px;
    border: 1px solid var(--c360-border-strong);
    border-radius: var(--c360-radius-sm);
    background: var(--c360-card);
    color: var(--c360-text);
    font-family: inherit;
    font-size: 15px;
    transition: border-color 0.15s var(--c360-ease), box-shadow 0.15s var(--c360-ease);
}

.lgn-input::placeholder {
    color: var(--c360-faint);
}

.lgn-input:hover {
    border-color: var(--c360-muted);
}

.lgn-input:focus {
    outline: none;
    border-color: var(--c360-primary);
    box-shadow: 0 0 0 3px var(--c360-primary-ring);
}

/* autofill ของ Chrome — คงพื้นขาวแทนพื้นฟ้าของเบราว์เซอร์ */
.lgn-input:-webkit-autofill,
.lgn-input:-webkit-autofill:hover,
.lgn-input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--c360-text);
    -webkit-box-shadow: 0 0 0 1000px var(--c360-card) inset;
    caret-color: var(--c360-text);
}

.lgn-input-wrap:focus-within .lgn-input-icon {
    color: var(--c360-primary);
}

.lgn-input.is-invalid {
    border-color: var(--c360-danger);
    box-shadow: 0 0 0 3px rgba(176, 32, 26, 0.16);
}

.lgn-input-pass {
    padding-right: 48px;
}

.lgn-eye {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--c360-muted);
    font-size: 16px;
    cursor: pointer;
    transition: background 0.15s var(--c360-ease), color 0.15s var(--c360-ease);
}

.lgn-eye:hover {
    background: var(--c360-neutral-bg);
    color: var(--c360-primary);
}

.lgn-caps {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 8px 0 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--c360-warning);
}

.lgn-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 22px;
}

.lgn-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 13px;
    font-weight: 400;
    color: var(--c360-muted);
    cursor: pointer;
    user-select: none;
}

.lgn-check input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--c360-primary);
    cursor: pointer;
}

/* ---------------------------------------------------------------------------
 * หมวด: ปุ่มเข้าสู่ระบบ
 * ------------------------------------------------------------------------- */
.lgn-submit {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 48px;
    border: 0;
    border-radius: var(--c360-radius-sm);
    background: var(--c360-primary);
    color: #ffffff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(70, 111, 187, 0.28);
    transition: background 0.15s var(--c360-ease), transform 0.15s var(--c360-ease), box-shadow 0.15s var(--c360-ease);
}

.lgn-submit:hover {
    background: var(--c360-primary-hover);
    box-shadow: 0 8px 20px rgba(70, 111, 187, 0.34);
}

.lgn-submit:active {
    transform: translateY(1px);
}

.lgn-submit-icon {
    transition: transform 0.15s var(--c360-ease);
}

.lgn-submit:hover .lgn-submit-icon {
    transform: translateX(3px);
}

.lgn-spinner {
    display: none;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: lgn-spin 0.7s linear infinite;
}

.lgn-submit.is-busy {
    cursor: progress;
    opacity: 0.9;
}

.lgn-submit.is-busy .lgn-submit-icon {
    display: none;
}

.lgn-submit.is-busy .lgn-spinner {
    display: inline-block;
}

body.lgn-body a:focus-visible,
body.lgn-body button:focus-visible,
body.lgn-body input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--c360-primary);
    outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
 * หมวด: ข้อความช่วยเหลือ / ชิปส่วนงาน / footer
 * ------------------------------------------------------------------------- */
.lgn-help {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 22px 0 0;
    padding-top: 18px;
    border-top: 1px solid var(--c360-border);
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--c360-muted);
}

.lgn-help .fa {
    margin-top: 3px;
    color: var(--c360-faint);
}

.lgn-modules {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    max-width: 560px;
    margin: 24px 0 0;
    padding: 0;
}

.lgn-module {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    border: 1px solid var(--c360-border);
    border-radius: 999px;
    background: var(--c360-card);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--c360-muted);
}

.lgn-module .fa {
    color: var(--c360-primary);
}

.lgn-footer {
    margin-top: auto;
    padding-top: 24px;
    font-size: 12px;
    color: var(--c360-faint);
    text-align: center;
}

/* footer มีเลขเวอร์ชัน: Copyright ซ้าย / เวอร์ชันชิดขวา (inc/app_version.php) */
.lgn-footer:has(.lgn-version) {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 4px 16px;
    width: 100%;
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
}

.lgn-version {
    margin-left: auto;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ---------------------------------------------------------------------------
 * หมวด: Animation
 * ------------------------------------------------------------------------- */
@keyframes lgn-rise {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes lgn-float {
    0%, 100% {
        translate: 0 0;
    }
    50% {
        translate: 0 -8px;
    }
}

@keyframes lgn-shake {
    0%, 100% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(-5px);
    }
    75% {
        transform: translateX(5px);
    }
}

@keyframes lgn-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .lgn-card,
    .lgn-deco,
    .lgn-alert {
        animation: none;
    }

    /* ตัวบอกกำลังโหลดไม่ปิด animation — เป็นการเคลื่อนไหวที่จำเป็น (Windows ที่ปิด Animation effects จะเห็นหยุดนิ่งเหมือนค้าง) */
}

/* ---------------------------------------------------------------------------
 * หมวด: Responsive
 * ------------------------------------------------------------------------- */
@media (max-width: 1199px) {
    .lgn-deco-list,
    .lgn-deco-kpi {
        display: none;
    }
}

@media (max-width: 991px) {
    .lgn-deco {
        display: none;
    }

    .lgn-band {
        height: 260px;
        min-height: 0;
        border-bottom-left-radius: 50% 32px;
        border-bottom-right-radius: 50% 32px;
    }

    .lgn-card {
        margin-top: 8px;
    }
}

@media (max-width: 575px) {
    .lgn-top {
        padding: 16px;
    }

    .lgn-top-company {
        display: none;
    }

    .lgn-card {
        padding: 28px 20px 22px;
    }

    .lgn-title {
        font-size: 22px;
    }
}