/*!
 * OpenSID Lamongan Digital — Halaman login admin (siteman) v0.1
 * Lapisan override di atas login-style.css bawaan. Aktif bila <html class="lds">.
 * Gambar latar pilihan desa ($latar_login) tetap dipakai, diberi lapisan navy.
 * Berlisensi GPL v3, mengikuti OpenSID.
 */
html.lds {
    --lds-navy: var(--ina-primary-700, #083575);
    --lds-blue: var(--ina-primary-400, #196BCD);
    --lds-blue-600: var(--ina-primary-500, #0956C3);
    --lds-text: var(--ina-neutral-800, #1F1F1F);
    --lds-text-2: var(--ina-neutral-600, #525252);
    --lds-text-3: var(--ina-neutral-500, #737373);
    --lds-border-strong: var(--ina-neutral-300, #D4D4D4);
    --lds-ring: 0 0 0 3px rgba(25, 107, 205, .22);
    --lds-font: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

html.lds body.login {
    font-family: var(--lds-font);
    color: var(--lds-text);
    min-height: 100vh;
    background-color: var(--lds-navy);
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    position: relative;
}
/* Lapisan navy di atas foto latar desa */
html.lds body.login::before {
    content: "";
    position: fixed;
    inset: 0;
    background:
        url("../img/ikon-lamongan-putih.webp?v=6") right -70px bottom -50px / 460px auto no-repeat,
        radial-gradient(1200px 600px at 15% 10%, rgba(25, 107, 205, .35), transparent 60%),
        linear-gradient(160deg, rgba(8, 53, 117, .92) 0%, rgba(8, 53, 117, .78) 55%, rgba(10, 72, 159, .88) 100%);
    z-index: 0;
}
html.lds body.login .top-content { position: relative; z-index: 1; }
html.lds body.login .inner-bg { padding: 48px 0 32px; min-height: 100vh; display: flex; align-items: center; }
html.lds body.login .inner-bg > .container { width: 100%; }

html.lds body.login .form-box {
    float: none;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    padding: 0 16px;
}

html.lds body.login .form-top,
html.lds body.login .form-bottom {
    background: #fff;
    border: 0;
    box-shadow: none;
}
html.lds body.login .form-top {
    border-radius: 18px 18px 0 0;
    padding: 28px 28px 8px;
    text-align: center;
}
html.lds body.login .form-bottom {
    border-radius: 0 0 18px 18px;
    padding: 12px 28px 22px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
}
html.lds body.login .form-box > .form-top { box-shadow: 0 -10px 60px rgba(0, 0, 0, .15); }

html.lds body.login .form-top img.img-responsive {
    display: inline-block;
    width: 72px !important;
    height: auto;
    margin: 0 auto 8px;
}
html.lds body.login .login-footer-top h1 {
    font-size: 20px;
    font-weight: 800;
    color: var(--lds-text);
    letter-spacing: -0.01em;
    margin: 6px 0 2px;
    text-transform: none;
    /* login-style.css: text-shadow 4px hitam + -webkit-text-stroke putih */
    text-shadow: none;
    -webkit-text-stroke: 0;
}
html.lds body.login .login-footer-top h3 {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--lds-text-3);
    line-height: 1.55;
    margin: 0 0 6px;
    text-transform: none;
    text-shadow: none;
    -webkit-text-stroke: 0;
}
html.lds body.login .login-footer-top h3 > br:first-child { display: none; }

/* Isian */
html.lds body.login .form-bottom .form-group { margin-bottom: 12px; }
html.lds body.login .form-bottom form .form-control,
html.lds body.login .form-bottom form input[type="text"],
html.lds body.login .form-bottom form input[type="password"] {
    height: 46px;
    border: 1px solid var(--lds-border-strong);
    border-radius: 12px;
    background: #fff;
    color: var(--lds-text);
    font-size: 14.5px;
    font-family: var(--lds-font);
    padding: 0 14px;
    box-shadow: none;
    line-height: 46px;
    text-align: left;
}
html.lds body.login .form-bottom form .form-control:focus {
    border-color: var(--lds-blue);
    box-shadow: var(--lds-ring);
    outline: 0;
}
html.lds body.login .form-bottom form .form-control::placeholder { color: var(--ina-neutral-400, #A3A3A3); }
html.lds body.login #captcha {
    border-radius: 10px;
    border: 1px solid var(--lds-border-strong);
    max-width: 100%;
}
html.lds body.login .form-checkbox { accent-color: var(--lds-blue); margin-right: 4px; }
html.lds body.login label { color: var(--lds-text-2); font-size: 13px; }

/* Tombol: utama = "Masuk"; tautan sekunder (lupa sandi, OTP) = tombol teks */
html.lds body.login .form-bottom form button.btn,
html.lds body.login .form-bottom form button[type="submit"] {
    width: 100%;
    height: 48px;
    border-radius: 12px;
    background: var(--lds-blue);
    border: 0;
    color: #fff;
    font-family: var(--lds-font);
    font-size: 15px;
    font-weight: 700;
    line-height: 48px;
    letter-spacing: .01em;
    box-shadow: 0 10px 24px rgba(25, 107, 205, .35);
    transition: background .15s ease, transform .1s ease;
}
html.lds body.login .form-bottom form button.btn:hover { background: var(--lds-blue-600); opacity: 1; }
html.lds body.login .form-bottom form button.btn:active { transform: translateY(1px); }
html.lds body.login .form-bottom form button.btn:focus-visible { outline: 2px solid #fff; box-shadow: var(--lds-ring); }

html.lds body.login .form-bottom form a.btn {
    background: transparent;
    border: 0;
    box-shadow: none;
    color: var(--lds-blue);
    font-weight: 600;
    font-size: 13px;
    height: auto;
    line-height: 1.4;
    padding: 4px 0;
    width: auto;
}
html.lds body.login .form-bottom form a.btn:hover { color: var(--lds-blue-600); text-decoration: underline; opacity: 1; }
/* "Lupa kata sandi?" ke kanan, sejajar centang "Tampilkan kata sandi" */
html.lds body.login .form-bottom form .form-group:has(> #checkbox) {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 6px;
}
html.lds body.login .form-bottom form .form-group:has(> #checkbox) > label { margin: 0; }
html.lds body.login .form-bottom form .form-group:has(> #checkbox) > a.btn { margin-left: auto; }
/* "Masuk dengan OTP" sebagai tombol garis */
html.lds body.login .form-bottom form .form-group.text-center > a.btn {
    display: block;
    width: 100%;
    height: 44px;
    line-height: 42px;
    border: 1px solid var(--lds-border-strong);
    border-radius: 12px;
    color: var(--lds-text);
    padding: 0;
}
html.lds body.login .form-bottom form .form-group.text-center > a.btn:hover {
    border-color: var(--lds-blue);
    color: var(--lds-blue);
    text-decoration: none;
}

html.lds body.login .form-bottom hr { border-color: var(--ina-neutral-100, #F2F2F2); margin: 14px 0 10px !important; }
html.lds body.login .login-footer-bottom { color: var(--lds-text-3); font-size: 12px; text-align: center; }
html.lds body.login .login-footer-bottom a { color: var(--lds-text-2); font-weight: 600; }

/* Pesan galat */
html.lds body.login .alert {
    border-radius: 12px;
    border: 1px solid var(--ina-red-300, #FFA0A0);
    background: var(--ina-red-100, #FDEDED);
    color: var(--ina-red-800, #570303);
    font-size: 13px;
    text-align: left;
    padding: 10px 14px;
    margin: 10px 0 0;
}
html.lds body.login .alert p { margin: 0; }

/* Penanda layanan Pemkab di bawah kartu */
html.lds body.login .form-box::after {
    content: "Pemerintah Kabupaten Lamongan · Layanan Desa Digital";
    display: block;
    text-align: center;
    color: rgba(255, 255, 255, .62);
    font-size: 12px;
    margin-top: 18px;
    letter-spacing: .02em;
}

@media (max-width: 480px) {
    html.lds body.login .inner-bg { padding: 20px 0; align-items: flex-start; }
    html.lds body.login .form-top { padding: 22px 20px 6px; }
    html.lds body.login .form-bottom { padding: 10px 20px 18px; }
}

/* Ikon Lamongan (siluet putih) di pojok kanan bawah layar login — lebih kecil di HP */
@media (max-width: 767px) {
    html.lds body.login::before { background-size: 260px auto, auto, auto; background-position: right -50px bottom -30px, 0 0, 0 0; }
}

/* ==========================================================================
   LOGIN v2 (admin-login-v2) — panel merek Desa Digital Kabupaten Lamongan, kartu login ringkas,
   isian berikon. Markup tambahan disisipkan oleh resources/views/lamongan/login_head.blade.php.
   ========================================================================== */
html.lds body.login::before {
    background:
        url("../img/ikon-lamongan-putih.webp?v=6") right -90px bottom -70px / 520px auto no-repeat,
        radial-gradient(900px 520px at 12% 8%, rgba(77, 147, 252, .38), transparent 62%),
        linear-gradient(155deg, rgba(8, 53, 117, .95) 0%, rgba(9, 70, 160, .86) 55%, rgba(9, 86, 195, .9) 100%);
}

/* Baris merek di atas kartu (HP & tablet) */
html.lds body.login .lds-login-merek {
    display: flex; align-items: center; justify-content: center; gap: 12px;
    margin: 0 0 18px; color: #fff;
}
html.lds body.login .lds-login-merek img { width: 46px; height: auto; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .25)); }
html.lds body.login .lds-login-merek > div { text-align: left; }
html.lds body.login .lds-login-merek strong { display: block; font-size: 17px; font-weight: 800; letter-spacing: -.01em; line-height: 1.15; }
html.lds body.login .lds-login-merek span { display: block; font-size: 12.5px; color: var(--ina-primary-100, #C0D7F9); letter-spacing: .02em; }

/* Panel merek kiri (layar lebar) */
html.lds body.login .lds-login-hero { display: none; color: #fff; text-align: left; }
html.lds body.login .lds-login-hero__ikon { display: block; width: 112px; height: auto; filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .3)); margin-bottom: 18px; }
html.lds body.login .lds-login-hero__label {
    display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--ina-primary-100, #C0D7F9); background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18);
    padding: 5px 12px; border-radius: 999px;
}
html.lds body.login .lds-login-hero h2 {
    color: #fff; font-family: var(--lds-font); font-size: 40px; font-weight: 800; letter-spacing: -.02em; line-height: 1.12;
    margin: 16px 0 12px; text-shadow: none;
}
html.lds body.login .lds-login-hero p { font-size: 16px; line-height: 1.6; color: var(--ina-primary-100, #C0D7F9); max-width: 460px; margin: 0 0 22px; }
html.lds body.login .lds-login-hero ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
html.lds body.login .lds-login-hero li {
    font-size: 14.5px; color: #fff; padding-left: 30px; position: relative; line-height: 1.5;
}
html.lds body.login .lds-login-hero li::before {
    content: ""; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 6px;
    background: rgba(60, 193, 78, .18) url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%237CE08A%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2012l5%205l10%20-10%22/%3E%3C/svg%3E") center / 14px no-repeat;
}
@media (min-width: 992px) {
    html.lds body.login.lds-login-v2 .inner-bg > .container {
        display: flex; align-items: center; justify-content: space-between; gap: 64px; max-width: 1120px;
    }
    html.lds body.login.lds-login-v2 .inner-bg > .container::before,
    html.lds body.login.lds-login-v2 .inner-bg > .container::after { content: none; }
    html.lds body.login.lds-login-v2 .lds-login-hero { display: block; flex: 1 1 auto; max-width: 520px; }
    html.lds body.login.lds-login-v2 .inner-bg > .container > .row { flex: 0 0 420px; margin: 0; }
    html.lds body.login.lds-login-v2 .form-box { margin: 0; padding: 0; max-width: none; width: 100%; }
    html.lds body.login.lds-login-v2 .lds-login-merek { display: none; }
    html.lds body.login::before { background-size: 640px auto, auto, auto; background-position: right -120px bottom -90px, 0 0, 0 0; }
}

/* Kartu login */
html.lds body.login .form-top { padding: 26px 26px 6px; }
html.lds body.login .form-top > a { display: inline-flex; align-items: center; justify-content: center; gap: 14px; }
html.lds body.login .form-top img.img-responsive { margin: 0 0 6px; }
html.lds body.login .form-top img.img-responsive:first-child {
    width: 64px !important; height: 64px; object-fit: contain; padding: 6px; border-radius: 18px;
    background: #fff; box-shadow: 0 4px 14px rgba(8, 53, 117, .14);
}
html.lds body.login .form-top img.img-responsive + img.img-responsive { width: auto !important; height: 38px; }
html.lds body.login .login-footer-top h1 { font-size: 21px; margin-top: 10px; }
html.lds body.login .login-footer-top h3 { font-size: 13px; margin-bottom: 4px; }
html.lds body.login .form-bottom { padding: 14px 26px 20px; }

/* Isian berikon */
html.lds body.login .form-bottom form input[name="username"],
html.lds body.login .form-bottom form input[name="password"],
html.lds body.login .form-bottom form input[name="captcha_code"] {
    padding-left: 44px; background-repeat: no-repeat; background-position: 14px center; background-size: 19px;
}
html.lds body.login .form-bottom form input[name="username"] { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23737373%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8%207a4%204%200%201%200%208%200a4%204%200%200%200%20-8%200%22/%3E%3Cpath%20d%3D%22M6%2021v-2a4%204%200%200%201%204%20-4h4a4%204%200%200%201%204%204v2%22/%3E%3C/svg%3E"); }
html.lds body.login .form-bottom form input[name="password"] { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23737373%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2013a2%202%200%200%201%202%20-2h10a2%202%200%200%201%202%202v6a2%202%200%200%201%20-2%202h-10a2%202%200%200%201%20-2%20-2v-6z%22/%3E%3Cpath%20d%3D%22M11%2016a1%201%200%201%200%202%200a1%201%200%200%200%20-2%200%22/%3E%3Cpath%20d%3D%22M8%2011v-4a4%204%200%201%201%208%200v4%22/%3E%3C/svg%3E"); }
html.lds body.login .form-bottom form input[name="captcha_code"] { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23737373%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M11.46%2020.846a12%2012%200%200%201%20-7.96%20-14.846a12%2012%200%200%200%208.5%20-3a12%2012%200%200%200%208.5%203a12%2012%200%200%201%20-.09%207.06%22/%3E%3Cpath%20d%3D%22M15%2019l2%202l4%20-4%22/%3E%3C/svg%3E"); }
html.lds body.login .form-bottom form .form-group:has(> #b-captcha) { text-align: center; }
html.lds body.login #captcha { height: 48px; width: auto; }

/* Kaki kartu */
html.lds body.login .login-footer-bottom::before { content: "Desa Digital Kabupaten Lamongan · "; }
html.lds body.login .form-box::after { content: "Pemerintah Kabupaten Lamongan"; }
@media (max-width: 991px) {
    html.lds body.login .inner-bg { align-items: flex-start; padding-top: 28px; }
}