/*
 * SaaS Theme — Login Page (Split Layout)
 * Klaariti
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ===== Font family — Inter across the whole login page ===== */
body[data-path="login"],
body[data-path="login"] input,
body[data-path="login"] button,
body[data-path="login"] .btn {
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/* ===== Hide navbar, footer, breadcrumbs ===== */
body[data-path="login"] .web-header,
body[data-path="login"] .navbar,
body[data-path="login"] .web-footer,
body[data-path="login"] .page-breadcrumbs {
        display: none !important;
}

/* ===== Page background ===== */
body[data-path="login"] {
        background: #f4f6fb !important;
        height: 100vh;
        overflow: hidden;
}

body[data-path="login"] .page-content-wrapper {
        height: 100vh;
        box-sizing: border-box;
        display: flex !important;
        align-items: center;
        justify-content: center;
        padding: 40px 24px !important;
        margin: 0 !important;
        position: relative;
        overflow: hidden;
}

/* ===== Abstract shooting-star background decoration ===== */
body[data-path="login"] .page-content-wrapper::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        opacity: 0.2;
        background-repeat: no-repeat;
        background-size: cover;
        background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201200%20800%27%3E%3Cg%20stroke%3D%27%230052FF%27%20stroke-width%3D%271.2%27%3E%3Cline%20x1%3D%2760%27%20y1%3D%2760%27%20x2%3D%27150%27%20y2%3D%27110%27%2F%3E%3Cline%20x1%3D%27150%27%20y1%3D%27110%27%20x2%3D%27110%27%20y2%3D%2730%27%2F%3E%3Cline%20x1%3D%27380%27%20y1%3D%2750%27%20x2%3D%27460%27%20y2%3D%27100%27%2F%3E%3Cline%20x1%3D%27460%27%20y1%3D%27100%27%20x2%3D%27420%27%20y2%3D%2720%27%2F%3E%3Cline%20x1%3D%27750%27%20y1%3D%2760%27%20x2%3D%27830%27%20y2%3D%27110%27%2F%3E%3Cline%20x1%3D%27830%27%20y1%3D%27110%27%20x2%3D%27870%27%20y2%3D%2730%27%2F%3E%3Cline%20x1%3D%271080%27%20y1%3D%2790%27%20x2%3D%271150%27%20y2%3D%27140%27%2F%3E%3Cline%20x1%3D%271150%27%20y1%3D%27140%27%20x2%3D%271120%27%20y2%3D%2730%27%2F%3E%3Cline%20x1%3D%2770%27%20y1%3D%27700%27%20x2%3D%27160%27%20y2%3D%27750%27%2F%3E%3Cline%20x1%3D%27160%27%20y1%3D%27750%27%20x2%3D%27130%27%20y2%3D%27660%27%2F%3E%3Cline%20x1%3D%27380%27%20y1%3D%27720%27%20x2%3D%27460%27%20y2%3D%27760%27%2F%3E%3Cline%20x1%3D%27460%27%20y1%3D%27760%27%20x2%3D%27420%27%20y2%3D%27670%27%2F%3E%3Cline%20x1%3D%27760%27%20y1%3D%27700%27%20x2%3D%27840%27%20y2%3D%27750%27%2F%3E%3Cline%20x1%3D%27840%27%20y1%3D%27750%27%20x2%3D%27800%27%20y2%3D%27660%27%2F%3E%3Cline%20x1%3D%271080%27%20y1%3D%27710%27%20x2%3D%271150%27%20y2%3D%27760%27%2F%3E%3Cline%20x1%3D%271150%27%20y1%3D%27760%27%20x2%3D%271120%27%20y2%3D%27670%27%2F%3E%3Cline%20x1%3D%2780%27%20y1%3D%27320%27%20x2%3D%27160%27%20y2%3D%27380%27%2F%3E%3Cline%20x1%3D%27160%27%20y1%3D%27380%27%20x2%3D%27120%27%20y2%3D%27450%27%2F%3E%3Cline%20x1%3D%271100%27%20y1%3D%27300%27%20x2%3D%271150%27%20y2%3D%27380%27%2F%3E%3Cline%20x1%3D%271150%27%20y1%3D%27380%27%20x2%3D%271080%27%20y2%3D%27460%27%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%27%230099FF%27%3E%3Ccircle%20cx%3D%2760%27%20cy%3D%2760%27%20r%3D%274%27%2F%3E%3Ccircle%20cx%3D%27150%27%20cy%3D%27110%27%20r%3D%274%27%2F%3E%3Ccircle%20cx%3D%27110%27%20cy%3D%2730%27%20r%3D%274%27%2F%3E%3Ccircle%20cx%3D%27380%27%20cy%3D%2750%27%20r%3D%274%27%2F%3E%3Ccircle%20cx%3D%27460%27%20cy%3D%27100%27%20r%3D%274%27%2F%3E%3Ccircle%20cx%3D%27420%27%20cy%3D%2720%27%20r%3D%274%27%2F%3E%3Ccircle%20cx%3D%27750%27%20cy%3D%2760%27%20r%3D%274%27%2F%3E%3Ccircle%20cx%3D%27830%27%20cy%3D%27110%27%20r%3D%274%27%2F%3E%3Ccircle%20cx%3D%27870%27%20cy%3D%2730%27%20r%3D%274%27%2F%3E%3Ccircle%20cx%3D%271080%27%20cy%3D%2790%27%20r%3D%274%27%2F%3E%3Ccircle%20cx%3D%271150%27%20cy%3D%27140%27%20r%3D%274%27%2F%3E%3Ccircle%20cx%3D%271120%27%20cy%3D%2730%27%20r%3D%274%27%2F%3E%3Ccircle%20cx%3D%2770%27%20cy%3D%27700%27%20r%3D%274%27%2F%3E%3Ccircle%20cx%3D%27160%27%20cy%3D%27750%27%20r%3D%274%27%2F%3E%3Ccircle%20cx%3D%27130%27%20cy%3D%27660%27%20r%3D%274%27%2F%3E%3Ccircle%20cx%3D%27380%27%20cy%3D%27720%27%20r%3D%274%27%2F%3E%3Ccircle%20cx%3D%27460%27%20cy%3D%27760%27%20r%3D%274%27%2F%3E%3Ccircle%20cx%3D%27420%27%20cy%3D%27670%27%20r%3D%274%27%2F%3E%3Ccircle%20cx%3D%27760%27%20cy%3D%27700%27%20r%3D%274%27%2F%3E%3Ccircle%20cx%3D%27840%27%20cy%3D%27750%27%20r%3D%274%27%2F%3E%3Ccircle%20cx%3D%27800%27%20cy%3D%27660%27%20r%3D%274%27%2F%3E%3Ccircle%20cx%3D%271080%27%20cy%3D%27710%27%20r%3D%274%27%2F%3E%3Ccircle%20cx%3D%271150%27%20cy%3D%27760%27%20r%3D%274%27%2F%3E%3Ccircle%20cx%3D%271120%27%20cy%3D%27670%27%20r%3D%274%27%2F%3E%3Ccircle%20cx%3D%2780%27%20cy%3D%27320%27%20r%3D%274%27%2F%3E%3Ccircle%20cx%3D%27160%27%20cy%3D%27380%27%20r%3D%274%27%2F%3E%3Ccircle%20cx%3D%27120%27%20cy%3D%27450%27%20r%3D%274%27%2F%3E%3Ccircle%20cx%3D%271100%27%20cy%3D%27300%27%20r%3D%274%27%2F%3E%3Ccircle%20cx%3D%271150%27%20cy%3D%27380%27%20r%3D%274%27%2F%3E%3Ccircle%20cx%3D%271080%27%20cy%3D%27460%27%20r%3D%274%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}

/* ===== Two-column split wrapper — floating rounded card ===== */
.st-login-wrapper {
        display: flex !important;
        flex-direction: row !important;
        width: 100%;
        max-width: 1040px;
        height: min(620px, calc(100vh - 80px));
        margin: 0 auto;
        padding: 0;
        border-radius: 32px;
        overflow: hidden;
        background: #fff;
        box-shadow: 0 30px 70px rgba(10, 30, 70, 0.16);
        border: 1px solid rgba(10, 30, 70, 0.06);
        position: relative;
        z-index: 1;
}

/* ===== Form column — now on the right ===== */
.st-login-form-col {
        flex: 1 1 50%;
        order: 2;
        min-height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 48px 72px;
        background: #fff;
}

/* ===== Brand panel — now on the left, dark ===== */
.st-login-panel {
        flex: 1 1 50%;
        order: 1;
        min-height: auto;
        background: linear-gradient(160deg, #0d1f3c 0%, #0a2a50 60%, #0d2d5a 100%);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 60px 48px;
        position: relative;
        overflow: hidden;
}

/* Decorative floating bars */
.st-login-panel::before,
.st-login-panel::after {
        content: "";
        position: absolute;
        width: 6px;
        border-radius: 100px;
        background: rgba(255, 255, 255, 0.06);
}

.st-login-panel::before {
        height: 120px;
        top: 20%;
        right: 15%;
        transform: rotate(15deg);
}

.st-login-panel::after {
        height: 80px;
        bottom: 25%;
        right: 25%;
        transform: rotate(15deg);
}

.st-panel-content {
        position: relative;
        z-index: 1;
        text-align: center;
        max-width: 520px;
}

/* ===== Panel Logo ===== */
.st-panel-logo {
        display: flex;
        justify-content: center;
        margin-bottom: 40px;
}

.st-panel-logo svg {
        width: clamp(140px, 16vw, 190px); /* scales with screen width, capped between 140px and 190px */
        height: auto;
}

/* ===== Panel heading & text ===== */
.st-panel-content h2 {
        font-size: 26px;
        font-weight: 700;
        color: #e8f0fc;
        line-height: 1.3;
        margin-bottom: 12px;
}

.st-panel-content p {
        font-size: 14px;
        color: #8aa4c8;
        line-height: 1.7;
        margin-bottom: 0;
}

/* ===== Copyright — pinned to bottom of brand panel ===== */
.st-panel-copyright {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 24px;
        z-index: 1;
        text-align: center;
        font-size: 12px;
        color: #6b85ac;
}

/* Extra floating bar decoration */
.st-float-bar {
        position: absolute;
        width: 5px;
        border-radius: 100px;
        background: rgba(255, 255, 255, 0.06);
}

.st-float-bar:nth-child(2) {
        height: 60px;
        top: 35%;
        left: 12%;
        transform: rotate(15deg);
}

.st-float-bar:nth-child(3) {
        height: 100px;
        bottom: 15%;
        left: 20%;
        transform: rotate(15deg);
}

.st-float-bar:nth-child(4) {
        height: 40px;
        top: 55%;
        right: 10%;
        transform: rotate(15deg);
}

/* ===== Module grid ===== */
.st-module-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
        margin-top: 24px;
}

.st-module-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        padding: 18px 8px;
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 14px;
        transition: background 0.2s ease;
}

.st-module-card:hover {
        background: rgba(255, 255, 255, 0.1);
}

.st-module-icon {
        width: 48px;
        height: 48px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
}

.st-module-icon.erp {
        background: rgba(0, 82, 255, 0.2);
        color: #5b9aff;
}

.st-module-icon.crm {
        background: rgba(0, 180, 130, 0.2);
        color: #1dc99a;
}

.st-module-icon.hrms {
        background: rgba(230, 100, 50, 0.2);
        color: #f07040;
}

.st-module-icon.hd {
        background: rgba(160, 80, 220, 0.2);
        color: #c07aee;
}

.st-module-icon svg {
        width: 24px;
        height: 24px;
        stroke: currentColor;
}

.st-module-card span {
        font-size: 11px;
        font-weight: 500;
        color: #8aa4c8;
        letter-spacing: 0.05em;
}

/* ===== Logo ===== */
.st-login-form-col .page-card-head {
        padding: 0 0 8px;
        text-align: center;
        width: 100%;
        max-width: 520px !important;
}

.st-login-form-col .page-card-head img.app-logo {
        max-height: 42px;
}

.st-login-form-col .page-card-head h4 {
        font-size: 26px;
        font-weight: 700;
        color: #0A2540;
        letter-spacing: -0.02em;
        margin-top: 24px;
        margin-bottom: 4px;
}

/* ===== Card — flat, no border ===== */
.st-login-form-col .page-card {
        max-width: 100% !important;
        width: 100% !important;
        padding: 20px 0 0;
        border-radius: 0;
        border: none;
        background: transparent;
        box-shadow: none;
        margin: 0 auto;
}

.st-login-form-col .page-card form {
        max-width: 100% !important;
        width: 100% !important;
}

.st-login-form-col .page-card .page-card-body {
        max-width: 100% !important;
}

.st-login-form-col .form-control {
        width: 100% !important;
}

/* ===== Inputs ===== */
.st-login-form-col .page-card-body input[type="text"],
.st-login-form-col .page-card-body input[type="email"],
.st-login-form-col .page-card-body input[type="password"] {
        border: 1px solid #E3E8EE !important;
        border-radius: 10px !important;
        background: #fff !important;
        height: 48px !important;
        font-size: 14px !important;
        padding-left: 42px !important;
        transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
        margin-bottom: 14px !important;
}

.st-login-form-col .page-card-body input:focus {
        border-color: #0052FF !important;
        box-shadow: 0 0 0 3px rgba(0, 82, 255, 0.1) !important;
        outline: none !important;
}

/* ===== Invalid ===== */
.st-login-form-col .page-card-body.invalid input[type="text"],
.st-login-form-col .page-card-body.invalid input[type="email"],
.st-login-form-col .page-card-body.invalid input[type="password"] {
        border-color: #e03636 !important;
        box-shadow: 0 0 0 3px rgba(224, 54, 54, 0.1) !important;
}

/* ===== Verification / OTP code field — same look as ID & Password ===== */
.st-login-form-col .page-card-body input[type="number"],
.st-login-form-col .page-card-body input[type="tel"],
.st-login-form-col #twofactor_div input#login_token,
.st-login-form-col .page-card-body input#otp,
.st-login-form-col .page-card-body input#verification_code,
.st-login-form-col .page-card-body .otp-field input,
.st-login-form-col .page-card-body .verification-code-field input,
.st-login-form-col .page-card-body input.otp-input {
        border: 1px solid #E3E8EE !important;
        border-radius: 10px !important;
        background: #fff !important;
        height: 48px !important;
        width: 100% !important;
        font-size: 14px !important;
        padding: 0 16px !important;
        text-align: center;
        letter-spacing: 4px;
        transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
        margin-bottom: 14px !important;
}

.st-login-form-col .page-card-body input[type="number"]:focus,
.st-login-form-col .page-card-body input[type="tel"]:focus,
.st-login-form-col #twofactor_div input#login_token:focus,
.st-login-form-col .page-card-body input#otp:focus,
.st-login-form-col .page-card-body input#verification_code:focus,
.st-login-form-col .page-card-body .otp-field input:focus,
.st-login-form-col .page-card-body .verification-code-field input:focus,
.st-login-form-col .page-card-body input.otp-input:focus {
        border-color: #0052FF !important;
        box-shadow: 0 0 0 3px rgba(0, 82, 255, 0.1) !important;
        outline: none !important;
}

/* ===== Verification form container spacing ===== */
.st-login-form-col #twofactor_div .form-verify {
        width: 100%;
}

.st-login-form-col #twofactor_div .btn-verify,
.st-login-form-col #twofactor_div #verify_token {
        height: 48px !important;
        border-radius: 10px !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        background: #0052FF !important;
        border: none !important;
        color: #fff !important;
        box-shadow: none !important;
        transition: all 0.15s ease !important;
}

.st-login-form-col #twofactor_div #verify_token:hover {
        background: #0047DB !important;
        box-shadow: 0 4px 12px rgba(0, 82, 255, 0.25) !important;
        transform: translateY(-1px);
}

/* ===== Field icons ===== */
.st-login-form-col .field-icon {
        left: 14px !important;
        fill: #8792A2 !important;
}

.st-login-form-col .toggle-password {
        right: 14px !important;
        top: 14px !important;
        font-size: 12px !important;
        color: #8792A2 !important;
        font-weight: 500 !important;
}

.st-login-form-col .toggle-password:hover {
        color: #0052FF !important;
}

/* ===== Forgot password ===== */
.st-login-form-col .forgot-password-message {
        margin-top: -6px !important;
        margin-bottom: 6px !important;
}

.st-login-form-col .forgot-password-message a {
        color: #697386 !important;
        font-size: 13px !important;
        text-decoration: none !important;
}

.st-login-form-col .forgot-password-message a:hover {
        color: #0052FF !important;
}

/* ===== All primary buttons ===== */
.st-login-form-col .btn-primary,
.st-login-form-col .btn-login,
.st-login-form-col .btn-forgot,
.st-login-form-col .btn-login-with-email-link {
        height: 48px !important;
        border-radius: 10px !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        background: #0052FF !important;
        border: none !important;
        color: #fff !important;
        box-shadow: none !important;
        transition: all 0.15s ease !important;
}

.st-login-form-col .btn-primary:hover,
.st-login-form-col .btn-login:hover,
.st-login-form-col .btn-forgot:hover,
.st-login-form-col .btn-login-with-email-link:hover {
        background: #0047DB !important;
        box-shadow: 0 4px 12px rgba(0, 82, 255, 0.25) !important;
        transform: translateY(-1px);
}

.st-login-form-col .btn-primary:active,
.st-login-form-col .btn-login:active,
.st-login-form-col .btn-forgot:active,
.st-login-form-col .btn-login-with-email-link:active {
        transform: translateY(0);
}

/* ===== Secondary buttons ===== */
.st-login-form-col .btn-default:not(.btn-login-option) {
        height: 48px !important;
        border-radius: 10px !important;
        font-weight: 500 !important;
}

/* ===== Divider ===== */
.st-login-form-col .login-divider {
        color: #A3ACB9 !important;
        font-size: 13px !important;
        position: relative;
        margin: 22px 0 !important;
}

.st-login-form-col .login-divider::before,
.st-login-form-col .login-divider::after {
        content: "";
        position: absolute;
        top: 50%;
        width: 38%;
        height: 1px;
        background: #E3E8EE;
}

.st-login-form-col .login-divider::before { left: 0; }
.st-login-form-col .login-divider::after { right: 0; }

/* ===== Social buttons ===== */
.st-login-form-col .btn-login-option {
        height: 44px !important;
        border-radius: 10px !important;
        border: 1px solid #E3E8EE !important;
        background: #fff !important;
        font-size: 13px !important;
        font-weight: 500 !important;
        color: #425466 !important;
        transition: all 0.15s ease !important;
}

.st-login-form-col .btn-login-option:hover {
        background: #F6F9FC !important;
        border-color: #D3D9E0 !important;
}

/* ===== Sign up / back to login ===== */
.st-login-form-col .sign-up-message {
        font-size: 13px !important;
        color: #697386 !important;
        margin-top: 16px !important;
}

.st-login-form-col .sign-up-message a {
        color: #0052FF !important;
        font-weight: 500 !important;
        text-decoration: none !important;
}

.st-login-form-col .sign-up-message a:hover {
        text-decoration: underline !important;
}

/* ===== Mobile — hide brand panel, full width form, edge-to-edge card ===== */
@media (max-width: 768px) {
        body[data-path="login"] .page-content-wrapper {
                padding: 0 !important;
        }

        .st-login-wrapper {
                flex-direction: column !important;
                max-width: 100%;
                min-height: 100vh;
                border-radius: 0;
                box-shadow: none;
                border: none;
        }

        .st-login-panel {
                display: none !important;
        }

        .st-login-form-col {
                flex: 1 1 100%;
                width: 100%;
                min-height: 100vh;
                padding: 32px 24px;
                background: linear-gradient(180deg, #F0F4FA 0%, #fff 30%);
        }

        .st-login-form-col .page-card {
                max-width: 100%;
        }
}

/* ===== Dark mode ===== */
[data-theme="dark"] body[data-path="login"] {
        background: #0d1117 !important;
}

[data-theme="dark"] .st-login-wrapper {
        background: #0d1117;
        border: 1px solid rgba(255, 255, 255, 0.08);
        box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .st-login-form-col {
        background: #0d1117;
}

[data-theme="dark"] .st-login-form-col .page-card-head h4 {
        color: #e6edf3;
}

[data-theme="dark"] .st-login-form-col .page-card-body input[type="text"],
[data-theme="dark"] .st-login-form-col .page-card-body input[type="email"],
[data-theme="dark"] .st-login-form-col .page-card-body input[type="password"] {
        background: #161b22 !important;
        border-color: #30363d !important;
        color: #e6edf3 !important;
}

[data-theme="dark"] .st-login-form-col .page-card-body input:focus {
        border-color: #0052FF !important;
        box-shadow: 0 0 0 3px rgba(0, 82, 255, 0.2) !important;
}

[data-theme="dark"] .st-login-form-col .btn-login-option {
        background: #161b22 !important;
        border-color: #30363d !important;
        color: #e6edf3 !important;
}

[data-theme="dark"] .st-login-form-col .btn-login-option:hover {
        background: #1c2128 !important;
        border-color: #484f58 !important;
}

[data-theme="dark"] .st-login-panel {
        background: linear-gradient(160deg, #0a1628 0%, #071a38 60%, #091e40 100%);
}

@media (max-width: 768px) {
        [data-theme="dark"] .st-login-form-col {
                background: linear-gradient(180deg, #161b22 0%, #0d1117 30%);
        }
}