/* Generated by Md Akter Uddin using Gemini 2.5 Pro Preview. Dated: 24/05/2025
         * Minimal CSS Base (Material Design 3 Inspired)
         * Responsive, Dark/Light Theme, Native Fonts
         * Modernized: 2025 — Plus Jakarta Sans, glassmorphism card, refined animations
         */

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap');


/* 1. CSS Variables (Color Palette - Cloud ERP Inspired) */
:root {
    /* Light Theme (Default) */
    --md-sys-color-primary-light: #106337; /* Forest Green */
    --md-sys-color-on-primary-light: #ffffff;
    --md-sys-color-primary-container-light: #9df2b3;
    --md-sys-color-on-primary-container-light: #00210a;
    --md-sys-color-secondary-light: #516350;
    --md-sys-color-on-secondary-light: #ffffff;
    --md-sys-color-secondary-container-light: #d4e8cf;
    --md-sys-color-on-secondary-container-light: #0f1f10;
    --md-sys-color-tertiary-light: #39656b;
    --md-sys-color-on-tertiary-light: #ffffff;
    --md-sys-color-tertiary-container-light: #bcebf1;
    --md-sys-color-on-tertiary-container-light: #001f23;
    --md-sys-color-error-light: #ba1a1a;
    --md-sys-color-on-error-light: #ffffff;
    --md-sys-color-error-container-light: #ffdad6;
    --md-sys-color-on-error-container-light: #410002;
    --md-sys-color-background-light: #f7fbf2; /* Off-white with green tint */
    --md-sys-color-on-background-light: #191d18;
    --md-sys-color-surface-light: #f7fbf2;
    --md-sys-color-on-surface-light: #191d18;
    --md-sys-color-surface-variant-light: #dee5d9;
    --md-sys-color-on-surface-variant-light: #424940;
    --md-sys-color-outline-light: #72796f;
    --md-sys-color-shadow-light: #000000;
    /* Dark Theme */
    --md-sys-color-primary-dark: #82d599;
    --md-sys-color-on-primary-dark: #003918;
    --md-sys-color-primary-container-dark: #005225;
    --md-sys-color-on-primary-container-dark: #9df2b3;
    --md-sys-color-secondary-dark: #b8ccb4;
    --md-sys-color-on-secondary-dark: #243424;
    --md-sys-color-secondary-container-dark: #3a4b39;
    --md-sys-color-on-secondary-container-dark: #d4e8cf;
    --md-sys-color-tertiary-dark: #a1ced5;
    --md-sys-color-on-tertiary-dark: #00363c;
    --md-sys-color-tertiary-container-dark: #1f4d53;
    --md-sys-color-on-tertiary-container-dark: #bcebf1;
    --md-sys-color-error-dark: #ffb4ab;
    --md-sys-color-on-error-dark: #690005;
    --md-sys-color-error-container-dark: #93000a;
    --md-sys-color-on-error-container-dark: #ffdad6;
    --md-sys-color-background-dark: #191d18;
    --md-sys-color-on-background-dark: #e1e3dc;
    --md-sys-color-surface-dark: #111410;
    --md-sys-color-on-surface-dark: #c5c7c1;
    --md-sys-color-surface-variant-dark: #424940;
    --md-sys-color-on-surface-variant-dark: #c2c9bd;
    --md-sys-color-outline-dark: #8c9389;
    --md-sys-color-shadow-dark: #000000;
    /* Font & Sizing */
    --font-family-sans-serif: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --border-radius-small: 4px;
    --border-radius-medium: 8px;
    --border-radius-large: 16px;
    --border-radius-full: 9999px;
    --spacing-unit: 8px; /* Base spacing unit */
}

/* 2. Reset and Base Styles */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 62.5%; /* 1rem = 10px */
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-family-sans-serif);
    font-size: 1.6rem; /* Default 16px */
    line-height: 1.6;
    background-color: var(--md-sys-color-background-light);
    color: var(--md-sys-color-on-background-light);
    transition: background-color 0.3s ease, color 0.3s ease;
    display: flex; /* For centering main content */
    flex-direction: column;
    min-height: 100vh;
}

    body[data-theme="dark"] {
        background-color: var(--md-sys-color-background-dark);
        color: var(--md-sys-color-on-background-dark);
    }

/* 3. Basic HTML Elements */
h1, h2, h3, h4, h5, h6 {
    margin-bottom: calc(var(--spacing-unit) * 1.5);
    font-weight: 600;
    line-height: 1.2;
    color: var(--md-sys-color-on-surface-light);
}

body[data-theme="dark"] h1,
body[data-theme="dark"] h2,
body[data-theme="dark"] h3,
body[data-theme="dark"] h4,
body[data-theme="dark"] h5,
body[data-theme="dark"] h6 {
    color: var(--md-sys-color-on-surface-dark);
}

h1 {
    font-size: 3.2rem;
}

h2 {
    font-size: 2.8rem;
}

h3 {
    font-size: 2.4rem;
}

h4 {
    font-size: 2rem;
}

p {
    margin-bottom: calc(var(--spacing-unit) * 2);
}

a {
    color: var(--md-sys-color-primary-light);
    text-decoration: none;
    transition: color 0.2s ease;
}

    a:hover, a:focus {
        color: var(--md-sys-color-tertiary-light);
        text-decoration: underline;
    }

body[data-theme="dark"] a {
    color: var(--md-sys-color-primary-dark);
}

    body[data-theme="dark"] a:hover,
    body[data-theme="dark"] a:focus {
        color: var(--md-sys-color-tertiary-dark);
    }

img, svg, video, canvas, audio, iframe, embed, object {
    display: block;
    max-width: 100%;
    height: auto;
}

table {
    border-collapse: collapse;
    width: 100%;
    margin-bottom: calc(var(--spacing-unit) * 2);
}

th, td {
    padding: var(--spacing-unit);
    text-align: left;
    border-bottom: 1px solid var(--md-sys-color-outline-light);
}

body[data-theme="dark"] th,
body[data-theme="dark"] td {
    border-bottom: 1px solid var(--md-sys-color-outline-dark);
}

label {
    display: block;
    margin-bottom: calc(var(--spacing-unit) * 0.5);
    font-weight: 500;
    color: var(--md-sys-color-on-surface-variant-light);
}

body[data-theme="dark"] label {
    color: var(--md-sys-color-on-surface-variant-dark);
}


input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
select,
textarea {
    width: 100%;
    padding: calc(var(--spacing-unit) * 1.625) calc(var(--spacing-unit) * 2); /* 13px 16px */
    margin-bottom: calc(var(--spacing-unit) * 2); /* 16px */
    border: 1.5px solid var(--md-sys-color-surface-variant-light);
    border-radius: 12px;
    background-color: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--md-sys-color-on-surface-light);
    font-size: 1.55rem;
    font-family: var(--font-family-sans-serif);
    font-weight: 400;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease, transform 0.2s ease;
}

    input[type="text"]:focus,
    input[type="password"]:focus,
    input[type="email"]:focus,
    input[type="number"]:focus,
    input[type="search"]:focus,
    input[type="tel"]:focus,
    input[type="url"]:focus,
    select:focus,
    textarea:focus {
        outline: none;
        border-color: var(--md-sys-color-primary-light);
        background-color: rgba(255, 255, 255, 0.9);
        box-shadow: 0 0 0 3px rgba(16, 99, 55, 0.15), 0 2px 8px rgba(16, 99, 55, 0.1);
        transform: translateY(-1px);
    }

body[data-theme="dark"] input[type="text"],
body[data-theme="dark"] input[type="password"],
body[data-theme="dark"] input[type="email"],
body[data-theme="dark"] input[type="number"],
body[data-theme="dark"] input[type="search"],
body[data-theme="dark"] input[type="tel"],
body[data-theme="dark"] input[type="url"],
body[data-theme="dark"] select,
body[data-theme="dark"] textarea {
    border-color: rgba(130, 213, 153, 0.15);
    background-color: rgba(255, 255, 255, 0.04);
    color: var(--md-sys-color-on-surface-dark);
}

    body[data-theme="dark"] input[type="text"]:focus,
    body[data-theme="dark"] input[type="password"]:focus,
    body[data-theme="dark"] input[type="email"]:focus,
    body[data-theme="dark"] input[type="number"]:focus,
    body[data-theme="dark"] input[type="search"]:focus,
    body[data-theme="dark"] input[type="tel"]:focus,
    body[data-theme="dark"] input[type="url"]:focus,
    body[data-theme="dark"] select:focus,
    body[data-theme="dark"] textarea:focus {
        border-color: var(--md-sys-color-primary-dark);
        background-color: rgba(255, 255, 255, 0.07);
        box-shadow: 0 0 0 3px rgba(130, 213, 153, 0.18), 0 2px 8px rgba(130, 213, 153, 0.1);
    }

input::placeholder {
    color: var(--md-sys-color-on-surface-variant-light);
    opacity: 0.55;
    font-weight: 400;
}

body[data-theme="dark"] input::placeholder {
    color: var(--md-sys-color-on-surface-variant-dark);
    opacity: 0.5;
}

button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
    display: inline-block;
    padding: calc(var(--spacing-unit) * 1.75) calc(var(--spacing-unit) * 2.5);
    font-size: 1.5rem;
    font-weight: 600;
    font-family: var(--font-family-sans-serif);
    letter-spacing: 0.04em;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
    border: none;
    border-radius: var(--border-radius-full);
    background: linear-gradient(135deg, #106337 0%, #1a8a4e 50%, #106337 100%);
    background-size: 200% 200%;
    color: #ffffff;
    transition: background-position 0.4s ease, box-shadow 0.3s ease, transform 0.2s ease;
    box-shadow: 0 4px 16px rgba(16, 99, 55, 0.35), 0 2px 6px rgba(16, 99, 55, 0.2);
    position: relative;
    overflow: hidden;
}

    button::after,
    input[type="submit"]::after {
        content: '';
        position: absolute;
        inset: 0;
        background: rgba(255, 255, 255, 0);
        transition: background 0.2s ease;
        border-radius: inherit;
    }

    button:hover, button:focus,
    input[type="submit"]:hover, input[type="submit"]:focus,
    input[type="button"]:hover, input[type="button"]:focus,
    input[type="reset"]:hover, input[type="reset"]:focus {
        background-position: right center;
        box-shadow: 0 6px 24px rgba(16, 99, 55, 0.45), 0 3px 10px rgba(16, 99, 55, 0.25);
        transform: translateY(-2px);
        outline: none;
    }

    button:active,
    input[type="submit"]:active,
    input[type="button"]:active,
    input[type="reset"]:active {
        transform: translateY(0px);
        box-shadow: 0 2px 8px rgba(16, 99, 55, 0.3);
    }

body[data-theme="dark"] button,
body[data-theme="dark"] input[type="submit"],
body[data-theme="dark"] input[type="button"],
body[data-theme="dark"] input[type="reset"] {
    background: linear-gradient(135deg, #005225 0%, #006b30 50%, #005225 100%);
    background-size: 200% 200%;
    color: #82d599;
    box-shadow: 0 4px 20px rgba(0, 82, 37, 0.5), 0 0 12px rgba(130, 213, 153, 0.15);
}

    body[data-theme="dark"] button:hover, body[data-theme="dark"] button:focus,
    body[data-theme="dark"] input[type="submit"]:hover, body[data-theme="dark"] input[type="submit"]:focus,
    body[data-theme="dark"] input[type="button"]:hover, body[data-theme="dark"] input[type="button"]:focus,
    body[data-theme="dark"] input[type="reset"]:hover, body[data-theme="dark"] input[type="reset"]:focus {
        box-shadow: 0 6px 28px rgba(0, 82, 37, 0.6), 0 0 20px rgba(130, 213, 153, 0.25);
        transform: translateY(-2px);
    }

    body[data-theme="dark"] button:active,
    body[data-theme="dark"] input[type="submit"]:active,
    body[data-theme="dark"] input[type="button"]:active,
    body[data-theme="dark"] input[type="reset"]:active {
        transform: translateY(0px);
    }

input[type="checkbox"], input[type="radio"] {
    margin-right: calc(var(--spacing-unit) * 0.5);
    accent-color: var(--md-sys-color-primary-light); /* Modern way to color checkboxes/radios */
}

body[data-theme="dark"] input[type="checkbox"],
body[data-theme="dark"] input[type="radio"] {
    accent-color: var(--md-sys-color-primary-dark);
}


/* 4. Login Page Specific Styles */
.mainlogin-container { /* This is our #bgImg */
    flex-grow: 1; /* Takes remaining space */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(var(--spacing-unit) * 2);
    background-image: url(../../img/banner.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative; /* For theme switcher and ::before pseudo-element */
    overflow: hidden; /* Ensure ::before doesn't cause scrollbars if slightly off */
    height:100vh;
    width:100%;
}

    /* SVG Dot Gradient Overlay */
    .mainlogin-container::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIiBmaWxsPSJibGFjayIgZmlsbC1vcGFjaXR5PSIwLjIiLz4KPHBhdGggZD0iTTEwIDExQzEwLjU1MjMgMTEgMTEgMTAuNTUyMyAxMSAxMEMxMSA5LjQ0NzcyIDEwLjU1MjMgOSAxMCA5QzkuNDQ3NzIgOSA5IDkuNDQ3NzIgOSAxMEM5IDEwLjU1MjMgOS40NDc3MiAxMSAxMCAxMVoiIGZpbGw9IiM2MzYzNjMiLz4KPC9zdmc+Cg==");
        background-repeat: repeat;
        z-index: 0; /* Behind login form, on top of main BG image */
        pointer-events: none;
        opacity: 0.5; /* Adjust overall opacity of the dot layer */
        transition: background-image 0.3s ease; /* Smooth transition if dots change drastically */
    }

body[data-theme="dark"] .mainlogin-container::before {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIiBmaWxsPSJibGFjayIgZmlsbC1vcGFjaXR5PSIwLjIiLz4KPHBhdGggZD0iTTEwIDExQzEwLjU1MjMgMTEgMTEgMTAuNTUyMyAxMSAxMEMxMSA5LjQ0NzcyIDEwLjU1MjMgOSAxMCA5QzkuNDQ3NzIgOSA5IDkuNDQ3NzIgOSAxMEM5IDEwLjU1MjMgOS40NDc3MiAxMSAxMCAxMVoiIGZpbGw9IiMxNTM4MzgiLz4KPC9zdmc+Cg==");
    opacity: 0.6;
}


.mainlogin-section { /* This is the login card / box */
    background-color: rgba(247, 251, 242, 0.88);
    backdrop-filter: blur(24px) saturate(160%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    color: var(--md-sys-color-on-surface-light);
    padding: calc(var(--spacing-unit) * 5) calc(var(--spacing-unit) * 5); /* 40px */
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.12),
        0 8px 24px rgba(16, 99, 55, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    width: 100%;
    max-width: 440px;
    text-align: center;
    transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    z-index: 1;
    animation: cardSlideUp 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes cardSlideUp {
    from {
        opacity: 0;
        transform: translateY(28px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

body[data-theme="dark"] .mainlogin-section {
    background-color: rgba(17, 20, 16, 0.85);
    backdrop-filter: blur(24px) saturate(160%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    border: 1px solid rgba(130, 213, 153, 0.15);
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.5),
        0 0 40px rgba(130, 213, 153, 0.08),
        inset 0 1px 0 rgba(130, 213, 153, 0.1);
}

.login-logo {
    margin-bottom: calc(var(--spacing-unit) * 3); /* 24px */
}

    .login-logo img {
        max-height: 60px; /* Adjust as needed */
        margin: 0 auto; /* Center the logo */
    }

.error span, #lblMsg2, #lblMsg3 { /* For Label1, lblMsg2, lblMsg3 */
    display: block;
    color: var(--md-sys-color-error-light);
    background-color: var(--md-sys-color-error-container-light);
    padding: var(--spacing-unit);
    border-radius: var(--border-radius-small);
    margin-bottom: calc(var(--spacing-unit) * 1.5);
    font-size: 1.4rem;
    text-align: left;
}

    .error span:empty, #lblMsg2:empty, #lblMsg3:empty { /* Hide if empty */
        display: none;
    }

body[data-theme="dark"] .error span,
body[data-theme="dark"] #lblMsg2,
body[data-theme="dark"] #lblMsg3 {
    color: var(--md-sys-color-on-error-container-dark);
    background-color: var(--md-sys-color-error-container-dark);
}


.login-form {
    margin-top: calc(var(--spacing-unit) * 2);
}

.login-text h2 {
    font-size: 2.6rem;
    font-weight: 700;
    margin-bottom: calc(var(--spacing-unit) * 3);
    color: var(--md-sys-color-on-surface-light);
    letter-spacing: -0.03em;
}

body[data-theme="dark"] .login-text h2 {
    color: var(--md-sys-color-on-surface-dark);
}

/* Styling the ASP.NET table form */
#Login1 {
    border-collapse: separate; /* Important for border-radius on inputs inside table */
    border-spacing: 0;
    margin-bottom: calc(var(--spacing-unit) * 2);
}

    #Login1 td {
        padding: 0;
        border: none;
    }

    #Login1 label {
        text-align: left;
        font-size: 1.4rem;
        margin-bottom: calc(var(--spacing-unit) * 0.5); /* 4px */
    }

        #Login1 label b {
            font-weight: 500;
        }

    #Login1 input[type="text"],
    #Login1 input[type="password"] {
        margin-bottom: calc(var(--spacing-unit) * 2); /* 16px */
    }

    #Login1 input[type="submit"] {
        width: 100%;
        margin-top: calc(var(--spacing-unit) * 1); /* 8px */
        padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 2); /* 12px 16px */
        font-size: 1.6rem;
    }


/* "Remember me" and "Forgot password" row */
.login-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: calc(var(--spacing-unit) * 1); /* 8px */
    margin-bottom: calc(var(--spacing-unit) * 3); /* 24px */
    font-size: 1.4rem;
}

    .login-options label[for="chkRemember"] {
        display: inline-flex; /* Align checkbox and text */
        align-items: center;
        margin-bottom: 0; /* Override default label margin */
        font-weight: 500;
        color: var(--md-sys-color-on-surface-variant-light);
        cursor: pointer;
    }

body[data-theme="dark"] .login-options label[for="chkRemember"] {
    color: var(--md-sys-color-on-surface-variant-dark);
}

.login-options input[type="checkbox"] {
    margin-right: calc(var(--spacing-unit) * 0.75); /* 6px */
}

.login-options .psw a { /* For "Forgot password?" */
    font-size: 1.4rem;
}

/* Copyright */
.login-footer {
    text-align: center;
    margin-top: auto; /* Pushes footer to bottom if content is short */
    padding: calc(var(--spacing-unit) * 2);
    font-size: 1.3rem;
    color: var(--md-sys-color-on-surface-variant-light);
    background-color: var(--md-sys-color-surface-variant-light); /* Slight bg for footer */
}

body[data-theme="dark"] .login-footer {
    color: var(--md-sys-color-on-surface-variant-dark);
    background-color: var(--md-sys-color-surface-variant-dark);
}

/* Theme Switcher */
.theme-switcher {
    position: fixed; /* Fixed position relative to viewport */
    top: calc(var(--spacing-unit) * 2);
    right: calc(var(--spacing-unit) * 2);
    padding: var(--spacing-unit);
    background-color: var(--md-sys-color-surface-variant-light);
    color: var(--md-sys-color-on-surface-variant-light);
    border: none;
    border-radius: var(--border-radius-full);
    cursor: pointer;
    z-index: 1000;
    font-size: 1.8rem; /* Icon size */
    line-height: 1;
    transition: background-color 0.3s ease, color 0.3s ease;
    width: calc(var(--spacing-unit) * 5); /* Fixed width for icon */
    height: calc(var(--spacing-unit) * 5); /* Fixed height for icon */
    display: flex;
    align-items: center;
    justify-content: center;
}

    .theme-switcher:hover {
        background-color: var(--md-sys-color-secondary-container-light);
    }

body[data-theme="dark"] .theme-switcher {
    background-color: var(--md-sys-color-surface-variant-dark);
    color: var(--md-sys-color-on-surface-variant-dark);
}

    body[data-theme="dark"] .theme-switcher:hover {
        background-color: var(--md-sys-color-secondary-container-dark);
    }

/* Hide ASP.NET validation summary spans by default if they are hidden by style attribute */
span[style*="visibility:hidden"] {
    display: none !important;
}

.loginpage-vedio:empty {
    display: none;
}

/* ── Modern Login Enhancements ─────────────────────────────────────── */

/* Label refinement inside login form */
.login-form label,
#Login1 label {
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--md-sys-color-on-surface-variant-light);
    margin-bottom: 6px;
    text-align: left;
}

body[data-theme="dark"] .login-form label,
body[data-theme="dark"] #Login1 label {
    color: var(--md-sys-color-on-surface-variant-dark);
}

/* Input wrapper for show/hide password button */
.input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.input-wrapper input {
    margin-bottom: 0 !important;
    padding-right: 48px !important;
}

.btn-toggle-password {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 4px !important;
    color: var(--md-sys-color-on-surface-variant-light);
    cursor: pointer;
    font-size: 1.6rem;
    line-height: 1;
    opacity: 0.6;
    transition: opacity 0.2s ease;
    width: auto !important;
    height: auto !important;
}

.btn-toggle-password:hover {
    opacity: 1;
    transform: translateY(-50%) !important;
    background: none !important;
    box-shadow: none !important;
}

body[data-theme="dark"] .btn-toggle-password {
    color: var(--md-sys-color-on-surface-variant-dark);
}

/* Sign In button full-width in login form */
#Login1 input[type="submit"],
.login-form input[type="submit"],
.login-form button[type="submit"] {
    width: 100%;
    margin-top: calc(var(--spacing-unit) * 2.5);
    padding: calc(var(--spacing-unit) * 1.875) calc(var(--spacing-unit) * 2.5);
    font-size: 1.45rem;
    letter-spacing: 0.08em;
}

/* Logo area: subtle separator */
.login-logo {
    margin-bottom: calc(var(--spacing-unit) * 3.5);
    padding-bottom: calc(var(--spacing-unit) * 3);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

body[data-theme="dark"] .login-logo {
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

.login-logo img {
    max-height: 56px;
    margin: 0 auto;
    filter: drop-shadow(0 2px 6px rgba(16, 99, 55, 0.2));
}

/* Footer refinement */
.login-footer {
    text-align: center;
    padding: calc(var(--spacing-unit) * 2.5);
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--md-sys-color-on-surface-variant-light);
    background-color: transparent;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    letter-spacing: 0.01em;
}

body[data-theme="dark"] .login-footer {
    color: var(--md-sys-color-on-surface-variant-dark);
    background-color: transparent;
    border-top-color: rgba(255, 255, 255, 0.06);
}

/* Forgot password link */
.login-options .psw a {
    font-weight: 600;
    color: var(--md-sys-color-primary-light);
    font-size: 1.35rem;
}

body[data-theme="dark"] .login-options .psw a {
    color: var(--md-sys-color-primary-dark);
}

/* Theme switcher refinement */
.theme-switcher {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

body[data-theme="dark"] .theme-switcher {
    border-color: rgba(130, 213, 153, 0.15);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Responsive adjustments */
@media (max-width: 480px) {
    .mainlogin-section {
        padding: calc(var(--spacing-unit) * 3.5) calc(var(--spacing-unit) * 3);
        border-radius: 20px;
        margin: 16px;
    }
}