/* =============================================================
   Login Page — MF Time
   All colours are driven exclusively by CSS custom properties.
   ============================================================= */

:root {
    /* Brand palette */
    --primary-color:   #1a5c38;
    --primary-dark:    #154d2f;
    --primary-light:   #22784a;
    --secondary-color: #1e2329;
    --accent-color:    #6ee7b7;
    --danger-color:    #e74c3c;
    --warning-color:   #f39c12;
    --success-color:   #27ae60;

    /* Neutrals */
    --white:        #ffffff;
    --light-gray:   #f4f6f9;
    --medium-gray:  #6b7280;
    --dark-gray:    #1e2329;
    --border-color: #dee2e6;

    /* Derived */
    --primary-rgb:         26, 92, 56;
    --danger-rgb:          231, 76, 60;
    --overlay-bg:          rgba(0, 0, 0, .50);
    --input-placeholder:   #9ca3af;
    --input-icon-color:    #9ca3af;
    --focus-ring:          rgba(var(--primary-rgb), .15);
    --btn-focus-ring:      rgba(var(--primary-rgb), .28);
    --btn-hover-shadow:    rgba(var(--primary-rgb), .30);
    --pwd-toggle-hover-bg: rgba(var(--primary-rgb), .08);

    /* Panel backgrounds */
    --panel-bg:            #161a1e;
    --panel-gradient-end:  var(--secondary-color);
    --panel-accent-border: var(--primary-color);
    --video-fallback-start: #0d1a12;

    /* Social colours */
    --facebook-color:  #1877f2;
    --twitter-color:   #1da1f2;
    --youtube-color:   #ff0000;
    --mobile-app-color:#6f42c1;

    /* Alert tints */
    --alert-error-bg:     #fef2f2;
    --alert-error-border: #fecaca;
    --alert-error-text:   #dc2626;
    --alert-warn-bg:      #fffbeb;
    --alert-warn-border:  #fde68a;
    --alert-warn-text:    #92400e;
    --alert-info-bg:      #eff6ff;
    --alert-info-border:  #bfdbfe;
    --alert-info-text:    #1e40af;
    --alert-ok-bg:        #f0fdf4;
    --alert-ok-border:    #bbf7d0;
    --alert-ok-text:      #166534;

    /* ?? Typography — bumped up from the old 0.78 / 0.9 rem scale ?? */
    --font-family-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-size-base: 17px;   /* was 16px — 1 px nudge lifts everything */
    --font-size-sm:   15px;   /* was 14px */
    --font-size-xs:   13px;   /* was 12px */
    --font-size-lg:   20px;   /* was 18px */
    --font-size-xl:   26px;   /* was 22px */
    --fw-normal:   400;
    --fw-medium:   500;
    --fw-semibold: 600;
    --fw-bold:     700;

    /* Spacing — slightly more generous */
    --sp-xs:  .3rem;
    --sp-sm:  .6rem;
    --sp-md:  1.1rem;
    --sp-lg:  1.6rem;
    --sp-xl:  2.2rem;
    --sp-xxl: 3.2rem;

    /* Radii */
    --r-sm: 5px;
    --r-md: 10px;
    --r-lg: 14px;

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0,0,0,.08);
    --shadow-md: 0 4px 12px rgba(0,0,0,.12);
    --shadow-lg: 0 8px 24px rgba(0,0,0,.16);
    --shadow-xl: 0 24px 72px rgba(0,0,0,.30);

    /* Transitions */
    --t-fast:   150ms ease-in-out;
    --t-normal: 250ms ease-in-out;
    --t-slow:   350ms ease-in-out;

    /* Z-index */
    --z-bg:      -1;
    --z-base:     1;
    --z-raised:  10;
    --z-overlay: 100;
    --z-modal:  1000;
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
body, html { margin: 0; padding: 0; height: 100%; overflow-x: hidden; }

body {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-base);
    line-height: 1.6;
    color: var(--dark-gray);
    min-height: 100vh;
    display: flex;
    align-items: stretch;
    justify-content: center;
    position: relative;
}

/* Accessibility */
.skip-link {
    position: absolute;
    top: -40px; left: 6px;
    background: var(--primary-color);
    color: var(--white);
    padding: 8px;
    text-decoration: none;
    border-radius: var(--r-sm);
    z-index: var(--z-modal);
    transition: top var(--t-fast);
}
.skip-link:focus { top: 6px; }

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

/* Video background */
.video-background {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: var(--z-bg);
    overflow: hidden;
}

#bgVideo {
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.video-fallback {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: linear-gradient(135deg,
        var(--video-fallback-start) 0%,
        var(--primary-color) 60%,
        var(--secondary-color) 100%);
    z-index: var(--z-bg);
}

.background-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: var(--overlay-bg);
    z-index: var(--z-base);
    pointer-events: none;
}

/* ?? Layout ?????????????????????????????????????????????????
   Wider max-width so the card breathes; vertical centring.
   ??????????????????????????????????????????????????????????? */
.login-container {
    width: 100%;
    max-width: 1080px;   /* was 960px — gives ~12% more horizontal room */
    margin: auto;
    padding: var(--sp-xl);
    z-index: var(--z-raised);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-wrapper {
    width: 100%;
    display: flex;
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-xl);
    overflow: hidden;
    opacity: 0;
    transform: translateY(20px) scale(0.97);
    transition: all var(--t-slow);
    min-height: 560px;   /* prevents the card from being too squat */
}

.login-wrapper.animate-in {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* ?? Left brand panel ?????????????????????????????????????? */
.login-brand-panel {
    flex: 0 0 38%;
    background: linear-gradient(160deg, var(--panel-bg) 0%, var(--panel-gradient-end) 100%);
    border-right: 3px solid var(--panel-accent-border);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--sp-xxl) var(--sp-xl);
    text-align: center;
}

.logo-container { margin-bottom: var(--sp-lg); }

.logo {
    width: 110px; height: 110px;   /* was 90 × 90 */
    border-radius: var(--r-md);
    box-shadow: 0 4px 20px rgba(0,0,0,.5);
    border: 2px solid rgba(var(--primary-rgb), .35);
    transition: transform var(--t-normal);
    display: block;
}
.logo:hover { transform: scale(1.06); }

.brand-info { margin-top: var(--sp-md); }

.brand-name {
    font-size: var(--font-size-xl);   /* 26px */
    font-weight: var(--fw-bold);
    color: var(--white);
    margin: 0 0 var(--sp-xs) 0;
    letter-spacing: -.3px;
    line-height: 1.2;
}

.brand-subtitle {
    font-size: var(--font-size-sm);   /* 15px */
    color: var(--accent-color);
    margin: 0;
    font-weight: var(--fw-medium);
    letter-spacing: .04em;
}

.brand-tagline {
    margin-top: var(--sp-xl);
    padding-top: var(--sp-lg);
    border-top: 1px solid rgba(255,255,255,.1);
}

.brand-tagline p {
    font-size: var(--font-size-sm);   /* 15px — was 14px */
    color: rgba(255,255,255,.60);
    margin: 0;
    line-height: 1.7;
}

/* ?? Right form panel ?????????????????????????????????????? */
.login-card {
    flex: 1;
    background: var(--white);
    display: flex;
    flex-direction: column;
}

.login-header {
    padding: var(--sp-xl) var(--sp-xl) var(--sp-lg);   /* was sp-lg top — more breathing room */
    background: var(--light-gray);
    border-bottom: 1px solid var(--border-color);
}

/* "Welcome Back" heading — prominent, not a tiny uppercase badge */
.welcome-title {
    font-size: 1.65rem;              /* was 0.82rem — 2× bigger */
    font-weight: var(--fw-bold);     /* was semibold */
    color: var(--dark-gray);
    margin: 0 0 var(--sp-sm) 0;
    display: flex;
    align-items: center;
    gap: var(--sp-sm);
    text-transform: none;            /* remove uppercase */
    letter-spacing: -.2px;
    line-height: 1.25;
}
.welcome-title i {
    color: var(--primary-color);
    font-size: 1.4rem;
}

.welcome-subtitle {
    font-size: 1rem;                 /* was 15px / var(--font-size-sm) */
    color: var(--medium-gray);
    margin: 0;
    line-height: 1.55;
}

/* ?? Form section ?????????????????????????????????????????? */
.form-section {
    padding: var(--sp-xl) var(--sp-xl) var(--sp-lg);
    flex: 1;
}

.login-form { width: 100%; }

/* Form messages */
.form-messages {
    margin-bottom: var(--sp-lg);
    opacity: 0;
    transform: translateY(-8px);
    transition: all var(--t-normal);
    min-height: 0;
    overflow: hidden;
}
.form-messages.show {
    opacity: 1;
    transform: translateY(0);
    min-height: auto;
}

.alert {
    padding: var(--sp-md);
    border-radius: var(--r-md);
    display: flex;
    align-items: flex-start;
    gap: var(--sp-sm);
    font-size: var(--font-size-sm);
    line-height: 1.4;
    margin-bottom: var(--sp-sm);
    border: 1px solid transparent;
}
.alert i       { flex-shrink: 0; margin-top: 2px; }
.alert-content { flex: 1; font-weight: var(--fw-medium); }

.alert-error   { background: var(--alert-error-bg);  border-color: var(--alert-error-border); color: var(--alert-error-text); }
.alert-success { background: var(--alert-ok-bg);     border-color: var(--alert-ok-border);    color: var(--alert-ok-text); }
.alert-warning { background: var(--alert-warn-bg);   border-color: var(--alert-warn-border);  color: var(--alert-warn-text); }
.alert-info    { background: var(--alert-info-bg);   border-color: var(--alert-info-border);  color: var(--alert-info-text); }

.validation-list { margin: var(--sp-xs) 0 0; padding: 0; list-style: none; color: inherit; }
.validation-list li { margin-bottom: var(--sp-xs); padding-left: var(--sp-md); position: relative; }
.validation-list li::before { content: '›'; position: absolute; left: 0; font-weight: bold; }

/* Form groups */
.form-group { margin-bottom: var(--sp-lg); position: relative; }



/* Field labels — readable, not microscopic */
.form-label {
    display: flex;
    align-items: center;
    gap: var(--sp-xs);
    font-size: 0.95rem;              /* was 0.8rem */
    font-weight: var(--fw-semibold);
    color: var(--dark-gray);
    margin-bottom: var(--sp-sm);
    text-transform: none;            /* remove uppercase — it was shrinking perceived size */
    letter-spacing: 0;
}
.form-label i {
    color: var(--primary-color);
    width: 16px;
    text-align: center;
    font-size: 0.9rem;               /* was 0.8rem */
}

/* ?? Inputs — taller, larger text ????????????????????????? */
.input-wrapper { position: relative; display: flex; align-items: center; }

.form-control {
    width: 100%;
    padding: .85rem var(--sp-lg) .85rem 46px;   /* taller than old .65rem */
    font-size: 1rem;                              /* was 0.9rem */
    font-family: var(--font-family-primary);
    border: 1.5px solid var(--border-color);
    border-radius: var(--r-md);
    background: var(--white);
    color: var(--dark-gray);
    transition: all var(--t-fast);
    outline: none;
    appearance: none;
    height: 50px;                                /* was 42px */
}
.form-control::placeholder { color: var(--input-placeholder); opacity: 1; }
.form-control:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--focus-ring);
}
.form-control.error {
    border-color: var(--danger-color);
    background: var(--alert-error-bg);
    animation: shake .3s ease-in-out;
}

@keyframes shake {
    0%,100% { transform: translateX(0); }
    25%      { transform: translateX(-4px); }
    75%      { transform: translateX(4px); }
}

.input-icon {
    position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
    color: var(--input-icon-color);
    pointer-events: none; z-index: 2;
    font-size: 0.9rem;   /* was 0.8rem */
    transition: color var(--t-fast);
}
.form-control:focus ~ .input-icon { color: var(--primary-color); }

/* Password toggle */
.password-toggle {
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    background: none; border: none;
    color: var(--medium-gray);
    cursor: pointer; padding: 5px 7px;
    border-radius: var(--r-sm);
    transition: all var(--t-fast); z-index: 2;
    font-size: 0.88rem;   /* was 0.8rem */
}
.password-toggle:hover { color: var(--primary-color); background: var(--pwd-toggle-hover-bg); }

/* Field validation */
.field-validation { display: block; font-size: var(--font-size-xs); color: var(--danger-color); margin-top: 5px; min-height: 18px; }

/* ?? Submit button — taller, bolder ??????????????????????? */
.form-submit { margin-bottom: var(--sp-md); }

.btn-login {
    width: 100%;
    padding: .9rem var(--sp-lg);   /* was .7rem */
    font-size: 1rem;                /* was 0.9rem */
    font-weight: var(--fw-semibold);
    font-family: var(--font-family-primary);
    background: var(--primary-color);
    color: var(--white);
    border: 1px solid var(--primary-dark);
    border-radius: var(--r-md);
    cursor: pointer;
    transition: all var(--t-normal);
    position: relative; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    min-height: 50px;   /* was 42px */
    letter-spacing: .02em;
}
.btn-login:hover:not(:disabled) {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
    box-shadow: 0 4px 14px var(--btn-hover-shadow);
}
.btn-login:active  { transform: translateY(1px); }
.btn-login:focus   { outline: none; box-shadow: 0 0 0 3px var(--btn-focus-ring); }
.btn-login:disabled { cursor: not-allowed; opacity: .65; }
.btn-login.loading { background: var(--medium-gray); border-color: var(--medium-gray); cursor: not-allowed; }

.btn-content { display: flex; align-items: center; gap: var(--sp-sm); transition: opacity var(--t-fast); }
.btn-loading { position: absolute; display: flex; align-items: center; gap: var(--sp-sm); opacity: 0; transition: opacity var(--t-fast); }
.btn-login.loading .btn-content { opacity: 0; }
.btn-login.loading .btn-loading  { opacity: 1; }

/* ?? System info ??????????????????????????????????????????? */
.system-info {
    padding: var(--sp-sm) var(--sp-xl);
    background: var(--light-gray);
    border-top: 1px solid var(--border-color);
}
.system-details { display: flex; align-items: center; gap: var(--sp-sm); }
.system-details i { color: var(--primary-color); font-size: 1rem; flex-shrink: 0; }
.system-text p     { font-size: var(--font-size-sm); font-weight: var(--fw-medium); color: var(--dark-gray); margin: 0 0 2px; }
.system-text small { font-size: var(--font-size-xs); color: var(--medium-gray); }

/* ?? Footer ???????????????????????????????????????????????? */
.login-footer {
    padding: var(--sp-sm) var(--sp-xl);
    background: var(--light-gray);
    border-top: 1px solid var(--border-color);
    text-align: center;
}
.footer-content { display: flex; flex-direction: column; gap: var(--sp-sm); align-items: center; }
.copyright { font-size: var(--font-size-xs); color: var(--medium-gray); margin: 0; display: flex; align-items: center; gap: var(--sp-xs); }

/* Social links */
.social-links { display: flex; gap: 7px; justify-content: center; flex-wrap: wrap; }

.social-link {
    display: flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 50%;   /* was 28px */
    text-decoration: none;
    transition: all var(--t-normal);
    box-shadow: var(--shadow-sm);
    opacity: 0; transform: translateY(8px);
    animation: socialEnter .5s ease-out forwards;
    font-size: 0.75rem;   /* was 0.7rem */
}
.social-links .social-link:nth-child(1) { animation-delay: .10s; }
.social-links .social-link:nth-child(2) { animation-delay: .15s; }
.social-links .social-link:nth-child(3) { animation-delay: .20s; }
.social-links .social-link:nth-child(4) { animation-delay: .25s; }
.social-links .social-link:nth-child(5) { animation-delay: .30s; }
.social-links .social-link:nth-child(6) { animation-delay: .35s; }
@keyframes socialEnter { to { opacity: 1; transform: translateY(0); } }
.social-link:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.social-link i { z-index: 2; position: relative; }

.social-link.website    { background: var(--primary-color); color: var(--white); }
.social-link.website:hover { background: var(--primary-dark); }
.social-link.facebook   { background: var(--facebook-color); color: var(--white); }
.social-link.twitter    { background: var(--twitter-color);  color: var(--white); }
.social-link.youtube    { background: var(--youtube-color);  color: var(--white); }
.social-link.mobile-app { background: var(--mobile-app-color); color: var(--white); }
.social-link.instagram  {
    background: linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);
    color: var(--white);
}

/* SweetAlert2 */
.swal2-popup.error-popup   { border-left: 4px solid var(--danger-color); }
.swal2-popup.warning-popup { border-left: 4px solid var(--warning-color); }
.swal2-popup.success-popup { border-left: 4px solid var(--primary-color); }
.swal2-popup.info-popup    { border-left: 4px solid var(--alert-info-text); }
.swal2-popup .swal2-title  { font-family: var(--font-family-primary); font-weight: var(--fw-semibold); color: var(--dark-gray); }

/* ?? Responsive ???????????????????????????????????????????? */

/* Tablet */
@media (max-width: 860px) {
    .login-container { padding: var(--sp-md); }
    .login-brand-panel { flex: 0 0 34%; padding: var(--sp-xl) var(--sp-lg); }
    .brand-name { font-size: 1.25rem; }
    .brand-tagline { display: none; }
    .logo { width: 84px; height: 84px; }
}

/* Mobile — stack vertically */
@media (max-width: 600px) {
    .login-container { padding: var(--sp-sm); align-items: flex-start; }
    .login-wrapper { flex-direction: column; min-height: auto; }
    .login-brand-panel {
        flex: none;
        border-right: none;
        border-bottom: 3px solid var(--panel-accent-border);
        padding: var(--sp-lg) var(--sp-xl);
        flex-direction: row;
        gap: var(--sp-md);
        text-align: left;
    }
    .logo-container { margin-bottom: 0; }
    .logo { width: 56px; height: 56px; }
    .brand-info { margin-top: 0; }
    .brand-tagline { display: none; }
    .form-section { padding: var(--sp-lg); }
    .form-control { height: 48px; }
    .btn-login    { min-height: 48px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Print */
@media print {
    .video-background, .background-overlay, .system-info,
    .login-footer, .btn-loading, .password-toggle, .social-links { display: none; }
    .login-wrapper { box-shadow: none; border: 1px solid #000; }
    body { background: white; color: black; }
    .form-control { border: 1px solid #000 !important; background: white !important; }
}