/* ============================================================
    WinField United IT Helpdesk - Login Page Styles
    Brand colours: #4c721d (Dark Green) · #78a22f (Mid Green) · #7d8084 (Grey)
    Design rule: no gradients · white card layout · green used sparingly
    ============================================================ */
 
 :root {
     --wf-green:      #78a22f;   /* Mid green - buttons / CTAs / active states */
     --wf-green-dark: #4c721d;   /* Dark green - structural / hover / title */
     --wf-green-light: #f2f7ea;  /* Light green background tint */
     --wf-text:  #2c2c2c;
     --wf-muted: #7d8084;
     --wf-white: #ffffff;
     --wf-border: #d1d5db;
 }
 
 /* ── Page background ── */
 .login-body {
     min-height: 100vh;
     background: #f4f6f0;
     display: flex;
     align-items: center;
     justify-content: center;
     font-family: 'Segoe UI', system-ui, sans-serif;
     padding: 2rem 1rem;
 }
 
 /* ── Outer wrapper - wider than the card so the banner has room ── */
 .login-wrapper {
     width: 100%;
     max-width: 640px;
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 1.75rem;
 }
 
 /* ── Top logo ── */
 .login-logo-top {
     text-align: center;
 }
 
 .brand-logo {
     max-width: 220px;
     height: auto;
 }
 
 .brand-logo-fallback {
     font-size: 1.1rem;
     font-weight: 700;
     color: var(--wf-green);
     letter-spacing: 0.02em;
     /* Hidden when real logo loads via JS onerror logic */
 }
 
 /* ── Login card - narrower than the wrapper, centred ── */
 .login-card {
     width: 100%;
     max-width: 440px;
     background: var(--wf-white);
     border: 1px solid var(--wf-border);
     border-radius: 12px;
     padding: 2.5rem 2.25rem;
     box-shadow: 0 4px 20px rgba(0,0,0,.09);
 }
 
 .login-title {
     font-size: 1.6rem;
     font-weight: 700;
     color: var(--wf-green-dark);
     margin-bottom: 0.25rem;
     text-align: center;
 }
 
 .login-subtitle {
     text-align: center;
     color: var(--wf-muted);
     font-size: 0.95rem;
     margin-bottom: 1.75rem;
 }
 
 /* ── Form elements ── */
 .form-label {
     font-weight: 600;
     color: var(--wf-text);
     font-size: 0.9rem;
     margin-bottom: 0.4rem;
 }
 
 .form-select:focus,
 .form-control:focus {
     border-color: var(--wf-green);
     box-shadow: 0 0 0 0.2rem rgba(120, 162, 47, 0.20);
 }
 
 /* ── Sign in button ── */
 .btn-login {
     background-color: var(--wf-green);
     border-color: var(--wf-green);
     color: var(--wf-white);
     font-weight: 600;
     letter-spacing: 0.03em;
     border-radius: 8px;
     transition: background-color 0.2s ease, transform 0.1s ease;
 }
 
     .btn-login:hover,
     .btn-login:focus {
         background-color: var(--wf-green-dark);
         border-color: var(--wf-green-dark);
         color: var(--wf-white);
         transform: translateY(-1px);
     }
 
     .btn-login:active {
         transform: translateY(0);
     }
 
 /* ── Dev note ── */
 .login-note {
     text-align: center;
     font-size: 0.78rem;
     color: var(--wf-muted);
     margin-bottom: 0;
 }
 
 /* ── Company logos bar ── */
 .company-logos-bar {
     width: 100%;
     text-align: center;
 }
 
 .logos-label {
     font-size: 0.75rem;
     text-transform: uppercase;
     letter-spacing: 0.08em;
     color: var(--wf-muted);
     margin-bottom: 0.75rem;
 }
 
 .logos-row {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     align-items: center;
     gap: 1.25rem;
 }
 
 .company-logo {
     max-width: 100px;
     max-height: 40px;
     object-fit: contain;
     filter: grayscale(20%);
     opacity: 0.85;
     transition: opacity 0.2s, filter 0.2s;
 }
 
     .company-logo:hover {
         opacity: 1;
         filter: grayscale(0%);
     }
 
 /* ── Responsive ── */
 @media (max-width: 680px) {
     .login-wrapper { padding: 0 1rem; }
 }
 
 @media (max-width: 480px) {
     .login-card {
         padding: 1.75rem 1.25rem;
     }
 
     .brand-logo {
         max-width: 170px;
     }
 }
 