/* 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
         */


/* 1. CSS Variables (Color Palette - Cloud ERP Inspired) */
:root {
    /* Light Theme (Default) */
    --md-sys-color-primary-light: #00658e; /* Trustworthy Blue */
    --md-sys-color-on-primary-light: #ffffff;
    --md-sys-color-primary-container-light: #c7e7ff;
    --md-sys-color-on-primary-container-light: #001e2e;
    --md-sys-color-secondary-light: #50606e;
    --md-sys-color-on-secondary-light: #ffffff;
    --md-sys-color-secondary-container-light: #d3e5f5;
    --md-sys-color-on-secondary-container-light: #0c1d29;
    --md-sys-color-tertiary-light: #65587b;
    --md-sys-color-on-tertiary-light: #ffffff;
    --md-sys-color-tertiary-container-light: #ebddff;
    --md-sys-color-on-tertiary-container-light: #201634;
    --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: #f8f9ff; /* Off-white */
    --md-sys-color-on-background-light: #191c20;
    --md-sys-color-surface-light: #fdfcff; /* Login card background */
    --md-sys-color-on-surface-light: #1a1c1e;
    --md-sys-color-surface-variant-light: #dde3ea;
    --md-sys-color-on-surface-variant-light: #41484d;
    --md-sys-color-outline-light: #71787e;
    --md-sys-color-shadow-light: #000000;
    /* Dark Theme */
    --md-sys-color-primary-dark: #86cfff;
    --md-sys-color-on-primary-dark: #00344c;
    --md-sys-color-primary-container-dark: #004c6c;
    --md-sys-color-on-primary-container-dark: #c7e7ff;
    --md-sys-color-secondary-dark: #b7c9d8;
    --md-sys-color-on-secondary-dark: #22323e;
    --md-sys-color-secondary-container-dark: #384956;
    --md-sys-color-on-secondary-container-dark: #d3e5f5;
    --md-sys-color-tertiary-dark: #cfc0e8;
    --md-sys-color-on-tertiary-dark: #362b4a;
    --md-sys-color-tertiary-container-dark: #4d4262;
    --md-sys-color-on-tertiary-container-dark: #ebddff;
    --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: #1a1c1e; /* Dark Gray */
    --md-sys-color-on-background-dark: #e2e2e6;
    --md-sys-color-surface-dark: #111315; /* Login card background - slightly lighter dark */
    --md-sys-color-on-surface-dark: #c6c6ca;
    --md-sys-color-surface-variant-dark: #41484d;
    --md-sys-color-on-surface-variant-dark: #c1c7ce;
    --md-sys-color-outline-dark: #8b9298;
    --md-sys-color-shadow-dark: #000000;
    /* Font & Sizing */
    --font-family-sans-serif: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", 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.25) calc(var(--spacing-unit) * 1.5); /* 10px 12px */
    margin-bottom: calc(var(--spacing-unit) * 1.5); /* 12px */
    border: 1px solid var(--md-sys-color-outline-light);
    border-radius: var(--border-radius-medium);
    background-color: var(--md-sys-color-surface-light);
    color: var(--md-sys-color-on-surface-light);
    font-size: 1.6rem;
    transition: border-color 0.2s ease, box-shadow 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);
        box-shadow: 0 0 0 2px var(--md-sys-color-primary-container-light);
    }

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: var(--md-sys-color-outline-dark);
    background-color: var(--md-sys-color-surface-dark);
    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);
        box-shadow: 0 0 0 2px var(--md-sys-color-primary-container-dark);
    }

input::placeholder {
    color: var(--md-sys-color-on-surface-variant-light);
    opacity: 0.7;
}

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

button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
    display: inline-block;
    padding: calc(var(--spacing-unit) * 1.25) calc(var(--spacing-unit) * 2.5); /* 10px 20px */
    font-size: 1.6rem;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    border: none;
    border-radius: var(--border-radius-full); /* Pill shape for buttons */
    background-color: var(--md-sys-color-primary-light);
    color: var(--md-sys-color-on-primary-light);
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 1px 3px rgba(var(--md-sys-color-shadow-light), 0.1), 0 1px 2px rgba(var(--md-sys-color-shadow-light), 0.06);
}

    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-color: color-mix(in srgb, var(--md-sys-color-primary-light) 90%, black);
        box-shadow: 0 4px 6px rgba(var(--md-sys-color-shadow-light), 0.1), 0 2px 4px rgba(var(--md-sys-color-shadow-light), 0.06);
    }

    button:active,
    input[type="submit"]:active,
    input[type="button"]:active,
    input[type="reset"]:active {
        background-color: color-mix(in srgb, var(--md-sys-color-primary-light) 80%, black);
        box-shadow: 0 1px 2px rgba(var(--md-sys-color-shadow-light), 0.05);
    }

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-color: var(--md-sys-color-primary-dark);
    color: var(--md-sys-color-on-primary-dark);
    box-shadow: 0 1px 3px rgba(var(--md-sys-color-shadow-dark), 0.3), 0 1px 2px rgba(var(--md-sys-color-shadow-dark), 0.2);
}

    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 {
        background-color: color-mix(in srgb, var(--md-sys-color-primary-dark) 90%, white);
        box-shadow: 0 4px 6px rgba(var(--md-sys-color-shadow-dark), 0.3), 0 2px 4px rgba(var(--md-sys-color-shadow-dark), 0.2);
    }

    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 {
        background-color: color-mix(in srgb, var(--md-sys-color-primary-dark) 80%, white);
    }

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 */
}

    /* 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: var(--md-sys-color-surface-light);
    color: var(--md-sys-color-on-surface-light);
    padding: calc(var(--spacing-unit) * 4); /* 32px */
    border-radius: var(--border-radius-large); /* 16px */
    box-shadow: 0 8px 16px rgba(var(--md-sys-color-shadow-light), 0.1), 0 4px 8px rgba(var(--md-sys-color-shadow-light), 0.08); /* MD3 Elevation */
    width: 100%;
    max-width: 450px; /* Max width for the login box */
    text-align: center;
    transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
    position: relative; /* To ensure it's above the ::before pseudo-element */
    z-index: 1;
}

body[data-theme="dark"] .mainlogin-section {
    background-color: var(--md-sys-color-surface-dark);
    color: var(--md-sys-color-on-surface-dark);
    box-shadow: 0 8px 16px rgba(var(--md-sys-color-shadow-dark), 0.2), 0 4px 8px rgba(var(--md-sys-color-shadow-dark), 0.15);
}

.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.4rem; /* Adjust as needed */
    margin-bottom: calc(var(--spacing-unit) * 2.5); /* 20px */
    color: var(--md-sys-color-on-surface-light);
}

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) * 2); /* 16px */
    margin-bottom: calc(var(--spacing-unit) * 2.5); /* 20px */
    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: normal; /* Un-bold it */
        color: var(--md-sys-color-on-surface-variant-light);
    }

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; /* Override inline style if needed, or let ASP.NET control it */
}

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