html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

/* Customized CSS for login and register */

:root {
    --bg-url: url('../images/DocumentManagement.jpg'); /* ← change to your image path */
    --glass-bg: rgba(255,255,255,1);
    --glass-border: rgba(255,255,255,0.25);
    --card-bg: rgba(255,255,255,1);
    --blur-amt: 4px;
    --card-glass: rgba(255,255,255,.10); /* overall tint */
    --card-stroke: rgba(255,255,255,.28); /* border */
    --card-shadow: 0 12px 40px rgba(0,0,0,.30);
    --card-blur: 14px; /* glass blur amount */
    --card-sat: 140%; /* glass saturation */
    --brand: #0b5ed7; /* accent color */
}

/* Fullscreen background with blur */
.auth-bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    background: var(--bg-url) center no-repeat;
    filter: blur(var(--blur-amt));
    transform: scale(1.05); /* prevents edges showing after blur */
}

/* subtle dark overlay to increase contrast */
.auth-overlay {
    position: fixed;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,0));
    z-index: -1;
}

/* Wrapper to center the card */
.auth-wrap {
    min-height: calc(100vh - 0px);
    display: grid;
    place-items: center;
    padding: 24px;
}

/* The login “modal” card */
.auth-card {
    width: 100%;
    max-width: 420px;
    /* glass core */
    background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.08));
    /* background: var(--card-bg); 
    backdrop-filter: saturate(140%) blur(0px); */
    backdrop-filter: saturate(var(--card-sat)) blur(var(--card-blur));
    -webkit-backdrop-filter: saturate(var(--card-sat)) blur(var(--card-blur));
    /* -webkit-backdrop-filter: saturate(140%) blur(0px); */
    border: 1px solid var(--card-stroke);
    border-radius: 16px;
    box-shadow: var(--card-shadow);
    overflow: hidden;
    position: relative;
    /* background-color: rgba(255, 255, 255, 0.60) */
}

    /* soft inner border/frost edge */
    .auth-card::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 18px;
        background: radial-gradient(120% 120% at 0% 0%, rgba(255,255,255,.25), transparent 60%);
        pointer-events: none;
        mix-blend-mode: screen;
    }

.auth-card__header {
    padding: 18px 22px 10px;
    border-bottom: 1px solid rgba(255,255,255,.22);
}

.auth-card__body {
    padding: 22px;
}

.auth-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--brand);
    font-weight: 700;
    letter-spacing: .3px;
}

    .auth-brand .mark {
        width: 36px;
        height: 36px;
        border-radius: 10px;
        background: var(--brand);
        display: grid;
        place-items: center;
        color: #fff;
        box-shadow: 0 10px 26px rgba(11,94,215,.35);
        font-size: 18px;
        font-weight: 800;
    }

/* Inputs */
.auth-card .form-control {
    background: rgba(255,255,255,.65);
    border-radius: 10px;
    border: 1px solid rgba(0,0,0,.12); 
    transition: box-shadow .2s, border-color .2s, background-color .2s;
}

    .auth-card .form-control:focus {
        border-color: var(--brand);
        box-shadow: 0 0 0 .2rem rgba(13,110,253,.15);
        background: rgba(255,255,255,.85);
    }

/* Buttons */
#login-submit {
    border-radius: 12px;
    font-weight: 600;
    box-shadow: 0 12px 28px rgba(25,135,84,.28);
    transition: transform .06s ease, box-shadow .2s ease;
}
    #login-submit:hover {
        transform: translateY(-1px);
    }

    #login-submit:active {
        transform: translateY(0);
    }

/* links on glass */
.auth-links a {
    color: var(--brand);
    text-decoration: none;
}

    .auth-links a:hover {
        text-decoration: underline;
    }

/* Small helper text color */
.text-muted-lean {
    color: rgba(0,0,0,.6);
}

/* Make validation messages readable on glass */
.text-danger {
    text-shadow: 0 1px 0 rgba(255,255,255,.35);
}

/* optional: subtle glow behind the card */
.auth-glow {
    position: fixed;
    inset: 0;
    z-index: -1;
    background: radial-gradient(40% 25% at 50% 35%, rgba(11,94,215,.20), transparent 60%), radial-gradient(25% 20% at 70% 70%, rgba(25,135,84,.15), transparent 60%);
    filter: blur(40px);
}
.logo-img {
    max-height: 60px;
    width: auto;
}
/* Optional: shrink on very small screens */
@media (max-width: 380px) {
    .auth-card {
        max-width: 94vw;
    }
}