/* Layout dua tren GreenhouseFarmPro (Views/Auth/Login.cshtml + wwwroot/css/login.css), doi
   sang tong mau teal cua SmartIrrigation thay vi xanh la. */
:root {
    --si-teal-950: #0a2f38;
    --si-teal-900: #0f4c5c;
    --si-teal-850: #12586b;
    --si-teal-800: #17677d;
    --si-teal-700: #1f7d94;
    --si-teal-100: #e6f4f7;
    --si-teal-050: #f5fafb;
    --si-text-900: #1f2933;
    --si-text-700: #4d6b73;
    --si-line: #d0d7de;
    --si-shadow: 0 30px 70px rgba(10, 47, 56, .22);
}

html, body { min-height: 100%; }

.si-login-body {
    min-height: 100vh;
    margin: 0;
    font-family: "Segoe UI", Tahoma, Arial, sans-serif;
    color: var(--si-text-900);
    background: linear-gradient(135deg, #0a3540 0%, #14586a 44%, #2d7d8f 100%);
    position: relative;
    overflow-x: hidden;
}

.si-login-body::before {
    content: "";
    position: fixed;
    inset: 0;
    background:
        radial-gradient(circle at 15% 20%, rgba(255,255,255,.08), transparent 24%),
        radial-gradient(circle at 80% 12%, rgba(255,255,255,.08), transparent 20%),
        radial-gradient(circle at 70% 78%, rgba(255,255,255,.06), transparent 24%),
        radial-gradient(circle at 28% 88%, rgba(255,255,255,.05), transparent 18%);
    pointer-events: none;
}

.si-bg-decor {
    position: fixed;
    z-index: 0;
    opacity: .08;
    user-select: none;
    pointer-events: none;
}

.si-decor.left-top { left: 5.5vw; top: 15vh; font-size: 72px; }
.si-decor.right-mid { right: 8vw; top: 27vh; font-size: 84px; }
.si-decor.left-bottom { left: 4vw; bottom: 17vh; font-size: 78px; }
.si-decor.right-bottom { right: 10vw; bottom: 14vh; font-size: 64px; }

.si-login-page {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px 16px;
}

.si-auth-shell { width: min(600px, 96vw); }

.si-auth-card {
    background: #fff;
    border-radius: 30px;
    overflow: hidden;
    box-shadow: var(--si-shadow);
    border: 1px solid rgba(255,255,255,.55);
}

.si-auth-top {
    background: linear-gradient(180deg, rgba(15,76,92,.98) 0%, rgba(23,103,125,.96) 100%);
    color: #fff;
    text-align: center;
    padding: 38px 30px 34px;
}

.si-auth-logo {
    width: 82px;
    height: 82px;
    object-fit: contain;
    margin: 0 auto 18px;
    display: block;
    filter: drop-shadow(0 8px 18px rgba(0,0,0,.18));
}

.si-auth-brand-name {
    max-width: 380px;
    margin: 0 auto 10px;
    font-size: clamp(1.55rem, 2.4vw, 1.95rem);
    line-height: 1.08;
    font-weight: 900;
    letter-spacing: -.02em;
    word-break: break-word;
}

.si-auth-brand-subtitle {
    font-size: 1rem;
    color: rgba(255,255,255,.80);
    font-weight: 600;
}

.si-auth-form { background: #fff; padding: 34px 42px 26px; }

.si-login-alert {
    border-radius: 14px;
    font-weight: 700;
    margin-bottom: 16px;
    padding: 12px 16px;
    background: #fdeceb;
    color: #c81d25;
    border: 1px solid #f6c9c6;
}

.si-auth-label {
    display: block;
    margin-bottom: 10px;
    color: #5f6d72;
    font-size: 1.05rem;
    font-weight: 800;
}

.si-auth-input-group {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--si-line);
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    margin-bottom: 22px;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.si-auth-input-group:focus-within {
    border-color: #4fa8bd;
    box-shadow: 0 0 0 .2rem rgba(31,125,148,.12);
}

.si-auth-input-icon {
    width: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--si-teal-050);
    color: var(--si-teal-800);
    border-right: 1px solid #e6eef0;
    font-size: 1.05rem;
}

.si-auth-input {
    border: 0;
    outline: 0;
    box-shadow: none;
    flex: 1;
    min-height: 60px;
    padding: 14px 16px;
    font-size: 1.05rem;
    color: var(--si-text-900);
    background: #fff;
}

.si-auth-input::placeholder { color: #9faeae; }

.si-auth-toggle {
    width: 56px;
    border: 0;
    background: #f6f7f7;
    color: #8a9797;
    border-left: 1px solid #e6eef0;
    font-size: 1rem;
    cursor: pointer;
}

.si-login-btn {
    width: 100%;
    min-height: 60px;
    border: 0;
    border-radius: 14px;
    background: linear-gradient(90deg, #0f4c5c 0%, #1f7d94 100%);
    color: #fff;
    font-size: 1.15rem;
    font-weight: 900;
    letter-spacing: .01em;
    box-shadow: 0 8px 18px rgba(15,76,92,.22);
    cursor: pointer;
}

.si-login-btn:hover, .si-login-btn:focus { color: #fff; filter: brightness(1.05); }

.si-auth-remember { font-size: .98rem; color: #5f6d72; margin-bottom: 22px; }

.si-auth-remember label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.si-auth-remember input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--si-teal-800);
}

.si-auth-note {
    margin-top: 22px;
    border: 1px solid #b8dbe2;
    background: var(--si-teal-050);
    color: var(--si-text-700);
    border-radius: 14px;
    padding: 14px 16px;
    font-size: 1rem;
    line-height: 1.5;
}

.si-auth-note strong { color: var(--si-teal-800); }

.si-auth-bottom {
    text-align: center;
    color: #a0aaaa;
    font-size: .95rem;
    padding: 22px 16px 26px;
    border-top: 1px solid #eef2f2;
    background: #fff;
}

.si-auth-bottom strong { font-weight: 800; color: inherit; }

@media (max-width: 768px) {
    .si-auth-shell { width: min(580px, 96vw); }
    .si-auth-top { padding: 30px 24px 26px; }
    .si-auth-logo { width: 76px; height: 76px; }
    .si-auth-brand-name { max-width: 300px; font-size: clamp(1.35rem, 5.2vw, 1.65rem); margin-bottom: 8px; }
    .si-auth-brand-subtitle { font-size: .94rem; }
    .si-auth-form { padding: 28px 24px 22px; }
    .si-auth-label { font-size: 1rem; }
    .si-auth-input { min-height: 56px; font-size: 1rem; }
    .si-auth-input-icon, .si-auth-toggle { width: 50px; }
    .si-login-btn { min-height: 56px; font-size: 1.08rem; }
    .si-auth-bottom { font-size: .87rem; padding: 18px 12px 22px; }
}

@media (max-width: 480px) {
    .si-login-page { padding: 14px 10px; }
    .si-auth-card { border-radius: 24px; }
    .si-auth-top { padding: 24px 18px 22px; }
    .si-auth-logo { width: 68px; height: 68px; margin-bottom: 14px; }
    .si-auth-brand-name { max-width: 260px; font-size: 1.25rem; line-height: 1.12; }
    .si-auth-brand-subtitle { font-size: .9rem; }
    .si-auth-form { padding: 24px 18px 20px; }
    .si-auth-label { margin-bottom: 8px; font-size: .98rem; }
    .si-auth-input { min-height: 54px; font-size: .98rem; }
    .si-auth-note { font-size: .95rem; padding: 13px 14px; }
}