/* ============================================================
   LOGIN PAGE — NEOSIM
   ============================================================ */

/* --- Base layout --- */
body {
    font-family: 'Trebuchet MS', sans-serif;
    color: #666;
    font-weight: 700;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(black 15%, transparent 16%) 0 0,
        radial-gradient(black 15%, transparent 16%) 8px 8px,
        radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
        radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
    background-color: #29343f;
    background-size: 16px 16px;
}

/* --- Card containers --- */
.card-container.card {
    max-width: 400px;
    padding: 40px 40px;
}

.card {
    background: repeating-linear-gradient(
        45deg,
        rgba(25,40,55,0.75) 35%, rgba(65,85,100,0.75) 40%,
        rgba(65,85,100,0.75) 42%, rgba(25,40,55,0.75) 50%,
        rgba(25,40,55,0.75) 55%, rgba(70,85,100,0.75) 60%,
        rgba(70,85,100,0.75) 75%, rgba(25,40,55,0.75) 90%
    );
    padding: 20px 25px 30px;
    margin: 0 auto 25px;
    border-radius: 2px;
    box-shadow: inset 0 0 0 1px rgba(34,96,140,1), 0 3px 9px rgba(136,101,101,1);
}

.card-container-top.card-top {
    max-width: 400px;
}

/* Shared: card-top & top-title */
.card-top,
.top-title {
    background: repeating-linear-gradient(
        45deg,
        rgba(0,0,0,0.75) 35%, rgba(0,0,0,0.75) 40%,
        rgba(0,0,0,0.75) 42%, rgba(0,0,0,0.75) 50%,
        rgba(0,0,0,0.75) 55%, rgba(0,0,0,0.75) 60%,
        rgba(0,0,0,0.75) 75%, rgba(0,0,0,0.75) 90%
    );
    background-attachment: fixed;
    font-size: 16px;
    font-weight: bold;
    line-height: 50px;
    text-align: center;
    color: #ffffff;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    box-shadow: inset 0 0 0 1px rgba(34,96,140,1), 0 3px 9px rgba(136,101,101,1);
}

.card-top {
    margin: 0 auto;
}

.top-title {
    display: inline-block;
    max-width: 400px;
    margin: 0 auto 25px;
}

/* --- Profile / logo --- */
.profile-img-card {
    width: 50%;
    margin: 0 auto 10px;
    display: block;
}

.profile-name-card {
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    margin: 10px 0 0;
    min-height: 1em;
}

/* --- Form --- */
.form-signin #inputEmail,
.form-signin #inputPassword {
    direction: ltr;
    height: 44px;
    font-size: 16px;
}

.form-signin > input[type=email],
.form-signin > input[type=password],
.form-signin > input[type=text],
.form-signin > button.btn-login {
    width: 100%;
    display: block;
    margin-bottom: 10px;
    z-index: 1;
    position: relative;
    box-sizing: border-box;
}

.form-signin .input-group {
    margin-bottom: 10px;
    z-index: 1;
    position: relative;
}

/* Biarkan input dan button di dalam input-group mengikuti alur flexbox Bootstrap alami */
.form-signin .input-group > input,
.form-signin .input-group button {
    margin-bottom: 0;
}

.form-signin .form-control:focus {
    border-color: rgb(104,145,162);
    outline: 0;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgb(104,145,162);
}

.form-control {
    height: 40px;
    font-family: 'Ropa Sans', sans-serif;
    font-weight: normal;
}

.form-control:focus:invalid { border-color: red; }
.form-control:focus:valid   { border-color: green; }
.error-input                { border-color: red; }

/* --- Buttons --- */
.btn-login {
    border: none;
    outline: none;
    background: #047895;
    border-bottom: solid 4px #174156;
    margin: 0 auto;
    padding: 0 10px;
    border-radius: 3px;
    height: 46px;
    font-size: 16px;
    color: #fff;
    cursor: pointer;
}

/* --- Messages --- */
.invalid {
    color: #ffffff;
    text-align: center;
    font-size: 15px;
    font-weight: bold;
}

.error-invalid {
    color: #FF344D;
    font-weight: bold;
}

/* ============================================================
   MODAL RESET PASSWORD
   ============================================================ */
.swal-reset-pwd {
    background-color: rgba(255, 255, 255, 0.97);
    border: 1px solid rgba(136, 136, 136, 0.4);
    box-shadow: 0 4px 24px rgba(0, 18, 243, 0.35);
    border-radius: 12px;
    padding: 20px;
    animation: swalFadeIn 0.3s ease-in-out;
    max-width: 410px;
    width: 410px;
}

.swal-reset-pwd .swal2-html-container form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 8px;
}

.swal-reset-pwd .form-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.swal-reset-pwd .form-row label {
    width: 130px;
    min-width: 130px;
    font-size: 13px;
    font-weight: 600;
    color: #444;
    text-align: left;
}

.swal-reset-pwd .form-row input {
    flex: 1;
    padding: 8px 10px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 6px;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.2s;
}

.swal-reset-pwd .form-row input:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.15);
}

.swal-reset-pwd #submitReset {
    margin-top: 8px;
    padding: 10px;
    font-size: 14px;
    font-weight: 600;
    border: none;
    border-radius: 6px;
    background-color: #007bff;
    color: #fff;
    cursor: pointer;
    width: 100%;
    transition: background 0.25s;
}

.swal-reset-pwd #submitReset:hover {
    background-color: #0069d9;
}

.swal-reset-pwd .reset-hint {
    font-size: 11px;
    color: #999;
    text-align: center;
    margin-top: 6px;
}

@media (max-width: 500px) {
    .swal-reset-pwd .form-row {
        flex-direction: column;
        align-items: flex-start;
    }
    .swal-reset-pwd .form-row label {
        width: 100%;
        margin-bottom: 2px;
    }
    .swal-reset-pwd .form-row input {
        width: 100%;
    }
}

@keyframes swalFadeIn {
    from { opacity: 0; transform: scale(0.96); }
    to   { opacity: 1; transform: scale(1); }
}