/* Login page styles */
.login-container { 
  display: flex; 
    justify-content: center; 
    align-items: center; 
 min-height: 100vh; 
    padding: 20px; 
    overflow: hidden;
    background-color: rgb(250, 250, 250);
}

.login-card { 
    background: white; 
    padding: 40px; 
    border-radius: 12px; 
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); 
    text-align: center; 
    max-width: 400px; 
    width: 100%; 
}

.logo { 
    max-width: 200px; 
    width: 100%; 
    height: auto; 
    margin-bottom: 30px; 
}

.login-text { 
    margin-bottom: 30px; 
}

.login-title { 
    font-size: 32px; 
    font-weight: 600; 
    color: #333; 
    margin: 0 0 8px 0;
    font-family: var(--font-family, "Quicksand", sans-serif);
}

.login-subtitle { 
    font-size: 16px; 
    color: #666; 
    margin: 0; 
 line-height: 1.4; 
}

.microsoft-login-btn { 
    background: #0078d4; 
    color: white; 
  border: none; 
    padding: 14px 24px; 
    border-radius: 6px; 
    font-size: 16px; 
    font-weight: 500; 
    cursor: pointer; 
  display: inline-flex; 
    align-items: center; 
    gap: 10px; 
    transition: all 0.3s ease; 
    min-width: 240px; 
    justify-content: center; 
    position: relative;
    font-family: var(--font-family, "Quicksand", sans-serif);
}

.microsoft-login-btn:hover:not(:disabled) { 
    background: #106ebe; 
    transform: translateY(-2px); 
    box-shadow: 0 4px 12px rgba(0, 120, 212, 0.3); 
}

.microsoft-login-btn:disabled { 
    background: #a0a0a0; 
    cursor: not-allowed; 
    transform: none; 
  box-shadow: none; 
}

.microsoft-login-btn.loading { 
    background: #106ebe; 
}

/* Spinner styles */
.spinner { 
    display: inline-block; 
}

.spinner-border { 
    display: inline-block; 
    width: 1rem; 
  height: 1rem; 
    vertical-align: text-bottom; 
    border: 0.15em solid currentColor; 
    border-right-color: transparent; 
    border-radius: 50%; 
    animation: spinner-border 0.75s linear infinite; 
}

@keyframes spinner-border {
    to { transform: rotate(360deg); }
}

.visually-hidden { 
    position: absolute !important; 
    width: 1px !important; 
    height: 1px !important; 
    padding: 0 !important; 
    margin: -1px !important; 
    overflow: hidden !important; 
    clip: rect(0, 0, 0, 0) !important; 
    white-space: nowrap !important; 
  border: 0 !important; 
}

/* Responsive design */
@media (max-width: 480px) {
    .login-card { 
  padding: 30px 20px; 
        margin: 10px; 
    }

    .logo { 
    max-width: 150px; 
    margin-bottom: 20px; 
    }

    .microsoft-login-btn { 
      width: 100%; 
        min-width: auto; 
}
    
  .login-title {
        font-size: 28px;
    }
}