<?php
/**
 * login.php — My People Connect Workforce Platform
 * FIXED: 10 bugs corrected (see inline comments marked FIX-N)
 */

session_start();
include 'config.php';

if (isset($_SESSION['user_id'])) {
    $role = strtolower($_SESSION['role']);
    if ($role === 'md')                              { header("Location: dashboard_md.php");       exit(); }
    elseif ($role === 'superadmin' || $role === 'admin') { header("Location: dashboard_admin.php");    exit(); }
    elseif ($role === 'manager')                     { header("Location: dashboard_manager.php");  exit(); }
    elseif ($role === 'employee')                    { header("Location: dashboard_employee.php"); exit(); }
    else {
        session_unset();
        session_destroy();
        session_start();
        $_SESSION['flash_error'] = 'Your account has an unrecognised role. Please contact support.';
        header("Location: login.php");
        exit();
    }
}

if (empty($_SESSION['csrf_token'])) {
    $_SESSION['csrf_token'] = bin2hex(random_bytes(32));
}
$csrf_token = $_SESSION['csrf_token'];

if (!isset($_SESSION['login_attempts'])) $_SESSION['login_attempts'] = 0;
if (!isset($_SESSION['lockout_until']))  $_SESSION['lockout_until']  = 0;

if ($_SESSION['lockout_until'] > 0 && $_SESSION['lockout_until'] <= time()) {
    $_SESSION['login_attempts'] = 0;
    $_SESSION['lockout_until']  = 0;
}

$error = '';
$is_locked    = false;
$lockout_secs = 0;

if (!empty($_SESSION['flash_error'])) {
    $error = $_SESSION['flash_error'];
    unset($_SESSION['flash_error']);
}

if ($_SESSION['lockout_until'] > time()) {
    $is_locked    = true;
    $lockout_secs = $_SESSION['lockout_until'] - time();
    $error        = "Too many failed attempts. Try again in {$lockout_secs} seconds.";
}

if ($_SERVER['REQUEST_METHOD'] === 'POST' && !$is_locked) {
    $submitted_csrf = $_POST['csrf_token'] ?? '';
    if (!hash_equals($csrf_token, $submitted_csrf)) {
        $error = 'Invalid form submission. Please refresh and try again.';
    } else {
        $username = trim($_POST['username'] ?? '');
        $password = $_POST['password'] ?? '';

        if (empty($username) || empty($password)) {
            $error = 'Please enter both username and password.';
        } else {
            $stmt = $conn->prepare("SELECT id, username, role, password FROM users WHERE username = ?");
            $stmt->bind_param('s', $username);
            $stmt->execute();
            $result = $stmt->get_result();

            $authenticated = false;

            if ($result->num_rows > 0) {
                $row = $result->fetch_assoc();
                $is_bcrypt = (substr($row['password'], 0, 4) === '$2y$');
                if ($is_bcrypt) {
                    $authenticated = password_verify($password, $row['password']);
                } else {
                    $authenticated = (hash('sha256', $password) === $row['password']);
                    if ($authenticated) {
                        $new_hash = password_hash($password, PASSWORD_BCRYPT, ['cost' => 12]);
                        $upd = $conn->prepare("UPDATE users SET password = ? WHERE id = ?");
                        $upd->bind_param('si', $new_hash, $row['id']);
                        $upd->execute();
                        $upd->close();
                    }
                }
            }

            if ($authenticated) {
                session_regenerate_id(true);
                $_SESSION['login_attempts'] = 0;
                $_SESSION['lockout_until']  = 0;
                $_SESSION['csrf_token']     = bin2hex(random_bytes(32));
                $_SESSION['user_id']        = $row['id'];
                $_SESSION['username']       = $row['username'];
                $_SESSION['role']           = strtolower($row['role']);
                $_SESSION['last_login']     = date('d M Y, g:i A');

                if (!empty($_POST['remember'])) {
                    $params = session_get_cookie_params();
                    setcookie(
                        session_name(), session_id(),
                        time() + (86400 * 30),
                        $params['path'], $params['domain'],
                        $params['secure'], $params['httponly']
                    );
                    $_SESSION['remember_me'] = true;
                }

                $r = $_SESSION['role'];
                if ($r === 'md')                              { header("Location: dashboard_md.php");       exit(); }
                elseif ($r === 'superadmin' || $r === 'admin') { header("Location: dashboard_admin.php");    exit(); }
                elseif ($r === 'manager')                     { header("Location: dashboard_manager.php");  exit(); }
                elseif ($r === 'employee')                    { header("Location: dashboard_employee.php"); exit(); }
                else { $error = 'Your account has an unrecognised role. Please contact your administrator.'; }
            } else {
                $_SESSION['login_attempts']++;
                $rem = max(0, 5 - $_SESSION['login_attempts']);
                if ($_SESSION['login_attempts'] >= 5) {
                    $_SESSION['lockout_until'] = time() + 120;
                    $error = 'Account temporarily locked for 2 minutes.';
                } else {
                    $error = 'Invalid username or password.' . ($rem > 0 ? " {$rem} attempt(s) remaining." : '');
                }
            }
            $stmt->close();
        }
    }
}

if (isset($conn) && $conn instanceof mysqli) {
    $conn->close();
}

$savedUser = htmlspecialchars($_POST['username'] ?? '');
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="theme-color" content="#060913">
<title>My People Connect — Workforce Platform</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,600;0,9..144,700;1,9..144,300;1,9..144,400&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,300&display=swap" rel="stylesheet">
<style>
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --gold:#c9a84c;--gold-lt:#f7edd4;--gold-mid:#e8c96e;--gold-glow:rgba(201,168,76,.42);
  --ink:#080c18;--slate:#48526b;--muted:#8a96b0;--border:#e2e8f2;
  --dk:#060913;--dk2:#0d1220;--dk3:#111827;
  --dk-border:rgba(201,168,76,.14);--dk-b2:rgba(255,255,255,.06);
  --dk-text:#eaf0ff;--dk-sub:#7a8cac;--dk-muted:#3a4a62;
  --dk-input:#070c18;--dk-foc:rgba(201,168,76,.20);
  --green:#22c55e;--green-dim:rgba(34,197,94,.12);
  --red:#ff6b6b;--red-dim:rgba(255,107,107,.10);--amber:#f59e0b;
  --sh-xs:0 1px 5px rgba(8,12,24,.07);--sh-sm:0 2px 14px rgba(8,12,24,.10);
  --sh-md:0 8px 32px rgba(8,12,24,.16);--sh-au:0 10px 48px rgba(201,168,76,.36);
  --radius:14px;--radius-sm:10px;--R-logo:72px;
}
html,body{width:100%;height:100%;font-family:'DM Sans',sans-serif;font-size:15px;color:var(--ink);background:var(--dk);-webkit-font-smoothing:antialiased;overflow:hidden}
body.ready{overflow-y:auto}
img{display:block;max-width:100%}a{color:inherit}

/* CURTAIN */
#curtain{position:fixed;inset:0;z-index:9999;background:var(--dk);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;animation:curtainUp .9s 1.9s cubic-bezier(.77,0,.18,1) forwards}
#curtain::before{content:'';position:absolute;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(201,168,76,.12) 0%,transparent 68%);animation:halo 2.8s ease-in-out infinite alternate;pointer-events:none}
.cr{position:absolute;border-radius:50%;pointer-events:none;border:1px solid rgba(201,168,76,.09);animation:rIn 1.6s ease-out both}
.cr1{width:160px;height:160px;animation-delay:.05s}.cr2{width:290px;height:290px;animation-delay:.18s}.cr3{width:450px;height:450px;animation-delay:.32s}
@keyframes rIn{from{transform:scale(.18);opacity:0}to{transform:scale(1);opacity:1}}
.c-logo{width:130px;height:130px;border-radius:28px;border:2px solid rgba(201,168,76,.28);padding:10px;background:rgba(255,255,255,.03);object-fit:contain;z-index:2;opacity:0;animation:logoIn .7s .06s cubic-bezier(.34,1.56,.64,1) forwards,logoPop 1.4s .9s ease-in-out forwards}
@keyframes logoIn{from{opacity:0;transform:scale(.26) translateY(18px)}to{opacity:1;transform:none}}
@keyframes logoPop{0%{box-shadow:0 0 0 0 rgba(201,168,76,0)}50%{box-shadow:0 0 80px 26px rgba(201,168,76,.18)}100%{box-shadow:0 0 0 0 rgba(201,168,76,0)}}
.c-brand{display:flex;flex-direction:column;align-items:center;gap:7px;z-index:2;opacity:0;animation:txtIn .6s .54s cubic-bezier(.22,1,.36,1) forwards}
@keyframes txtIn{from{opacity:0;transform:translateY(13px)}to{opacity:1;transform:none}}
.c-name{font-family:'Fraunces',serif;font-size:2rem;font-weight:600;color:#fff;letter-spacing:-.03em}
.c-sub{font-size:.68rem;font-weight:700;color:var(--gold);letter-spacing:.19em;text-transform:uppercase}
.c-bar{position:absolute;bottom:0;left:0;right:0;height:2px;overflow:hidden}
.c-bar-fill{height:100%;width:0;background:linear-gradient(90deg,transparent,var(--gold),var(--gold-mid),var(--gold),transparent);animation:barFill 1.8s .04s ease forwards}
@keyframes barFill{to{width:100%}}
@keyframes curtainUp{to{transform:translateY(-100%)}}
@keyframes halo{from{transform:scale(.72);opacity:.36}to{transform:scale(1.22);opacity:1}}

/* PAGE */
.page{display:grid;grid-template-columns:1fr 1fr;height:100vh;overflow:hidden;opacity:0;animation:pgIn .5s 2.6s ease forwards}
@keyframes pgIn{to{opacity:1}}

/* LEFT PANEL */
.left{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;padding:48px 40px;background:linear-gradient(150deg,#fffdf5 0%,#fdf8e8 50%,#fef9ee 100%);border-right:1px solid rgba(201,168,76,.18)}
.l-mesh{position:absolute;inset:0;z-index:0;pointer-events:none;background-image:radial-gradient(circle,rgba(201,168,76,.18) 1px,transparent 1px);background-size:28px 28px;mask-image:radial-gradient(ellipse 85% 85% at 50% 50%,#000 30%,transparent 100%);opacity:.55}
.l-atm{position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse 70% 55% at 10% 14%,rgba(201,168,76,.22) 0%,transparent 62%),radial-gradient(ellipse 55% 48% at 88% 88%,rgba(201,168,76,.14) 0%,transparent 60%),radial-gradient(ellipse 50% 44% at 50% 50%,rgba(255,245,200,.60) 0%,transparent 70%);animation:atmBreath 10s ease-in-out infinite alternate}
@keyframes atmBreath{from{opacity:.75}to{opacity:1}}
.l-orb{position:absolute;border-radius:50%;filter:blur(72px);pointer-events:none;z-index:0}
.l-orb1{width:340px;height:340px;top:-100px;left:-100px;background:radial-gradient(circle,rgba(201,168,76,.28),transparent 66%);animation:orb1 14s ease-in-out infinite}
.l-orb2{width:280px;height:280px;bottom:-60px;right:-80px;background:radial-gradient(circle,rgba(201,168,76,.18),transparent 66%);animation:orb2 17s ease-in-out infinite}
.l-orb3{width:200px;height:200px;top:50%;left:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(255,230,120,.24),transparent 66%);animation:orb3 8s ease-in-out infinite}
@keyframes orb1{0%,100%{transform:translate(0,0)}50%{transform:translate(30px,22px)}}
@keyframes orb2{0%,100%{transform:translate(0,0)}50%{transform:translate(-22px,-28px)}}
@keyframes orb3{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.4)}}
.l-geo{position:absolute;top:0;right:0;z-index:1;pointer-events:none;opacity:.22}
.l-accent-line{position:absolute;left:0;top:10%;bottom:10%;width:3px;z-index:2;background:linear-gradient(180deg,transparent,var(--gold) 30%,var(--gold-mid) 70%,transparent);border-radius:0 3px 3px 0;transform:scaleY(0);transform-origin:top;animation:lineGrow .9s 2.7s ease forwards}
@keyframes lineGrow{to{transform:scaleY(1)}}
.l-brand-mark{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center;width:100%;max-width:460px}
.l-logo-ring{position:relative;flex-shrink:0;margin-bottom:4px}
.l-logo-ring::before,.l-logo-ring::after{content:'';position:absolute;border-radius:50%;animation:ringPulse 3s ease-in-out infinite}
.l-logo-ring::before{inset:-14px;border:1px solid rgba(201,168,76,.32);animation-delay:0s}
.l-logo-ring::after{inset:-26px;border:1px solid rgba(201,168,76,.16);animation-delay:.6s}
@keyframes ringPulse{0%,100%{transform:scale(1);opacity:.6}50%{transform:scale(1.06);opacity:1}}
.l-logo{width:88px;height:88px;border-radius:22px;border:1.5px solid rgba(201,168,76,.40);padding:8px;object-fit:contain;background:#fff;box-shadow:0 6px 28px rgba(201,168,76,.22),0 2px 8px rgba(0,0,0,.08);position:relative;z-index:1;display:block;transition:transform .4s cubic-bezier(.34,1.56,.64,1),box-shadow .3s}
.l-logo:hover{transform:scale(1.08) rotate(-4deg);box-shadow:var(--sh-au)}
.l-logo-live{position:absolute;bottom:-4px;right:-4px;z-index:2;width:18px;height:18px;border-radius:50%;background:var(--green);border:3px solid #fdf8e8;animation:livePulse 2s ease infinite}
@keyframes livePulse{0%,100%{box-shadow:0 0 0 0 rgba(34,197,94,.5)}50%{box-shadow:0 0 0 8px rgba(34,197,94,0)}}
.l-heading{display:flex;flex-direction:column;gap:8px;align-items:center}
.l-name{font-family:'Fraunces',serif;font-size:clamp(1.7rem,2.4vw,2.5rem);font-weight:700;color:#0d1220;letter-spacing:-.04em;line-height:1.08}
.l-name em{font-style:italic;font-weight:400;color:var(--gold)}

/* ── TAGLINE: always single line, no wrapping ── */
.l-tagline{
  font-size:.82rem;
  font-weight:500;
  color:#6b7a96;
  letter-spacing:.01em;
  line-height:1.64;
  white-space:nowrap;
}

.l-divider{width:100%;display:flex;align-items:center;gap:12px}
.l-divider::before,.l-divider::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(201,168,76,.35),transparent)}
.l-divider-ico{width:28px;height:28px;border-radius:50%;border:1px solid rgba(201,168,76,.35);background:rgba(201,168,76,.10);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.l-carousel{width:100%;position:relative;overflow:hidden;border-radius:18px;border:1.5px solid rgba(201,168,76,.20);box-shadow:0 8px 36px rgba(201,168,76,.14),0 2px 10px rgba(0,0,0,.08);height:200px;flex-shrink:0}
.l-car-track{display:flex;height:100%;transition:transform .75s cubic-bezier(.77,0,.18,1)}
.l-car-slide{min-width:100%;height:100%;position:relative;flex-shrink:0;overflow:hidden}
.l-car-slide img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:transform 7s ease;display:block}
.l-car-slide.active img{transform:scale(1.13)}
.l-car-slide::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(8,14,28,.82) 0%,rgba(8,14,28,.42) 45%,rgba(8,14,28,.08) 100%);z-index:1}
.l-car-caption{position:absolute;bottom:0;left:0;right:0;z-index:2;padding:14px 18px 16px;display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
.l-car-cap-tag{display:inline-flex;align-items:center;gap:5px;background:rgba(201,168,76,.22);border:1px solid rgba(201,168,76,.40);border-radius:100px;padding:2px 10px;margin-bottom:6px;font-size:.58rem;font-weight:800;color:var(--gold);letter-spacing:.09em;text-transform:uppercase}
.l-car-cap-tag::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--gold);flex-shrink:0}
.l-car-cap-title{font-family:'Fraunces',serif;font-size:1.05rem;font-weight:600;color:#fff;line-height:1.24;letter-spacing:-.01em}
.l-car-cap-num{font-family:'Fraunces',serif;font-size:1.56rem;font-weight:300;color:rgba(255,255,255,.18);letter-spacing:-.06em;line-height:1;flex-shrink:0}
.l-car-arr{position:absolute;top:50%;transform:translateY(-50%);z-index:10;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(6px);cursor:pointer;display:flex;align-items:center;justify-content:center;color:#fff;transition:background .2s}
.l-car-arr:hover{background:rgba(255,255,255,.28)}
.l-car-prev{left:10px}.l-car-next{right:10px}
.l-car-progress{position:absolute;top:0;left:0;right:0;height:2px;z-index:10;background:rgba(255,255,255,.10);overflow:hidden}
.l-car-fill{height:100%;background:linear-gradient(90deg,var(--gold),var(--gold-mid));width:0%;border-radius:0 1px 1px 0}
.l-car-dots{position:absolute;bottom:14px;right:16px;z-index:10;display:flex;align-items:center;gap:5px}
.l-car-dot{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.30);cursor:pointer;transition:background .28s,width .28s,border-radius .28s}
.l-car-dot.on{width:20px;border-radius:3px;background:var(--gold)}
.l-trust{width:100%;display:flex;align-items:center;justify-content:center;gap:0;border-radius:12px;overflow:hidden;border:1px solid rgba(201,168,76,.24);background:#fff;box-shadow:0 3px 14px rgba(201,168,76,.10)}
.l-trust-item{flex:1;text-align:center;padding:12px 6px;border-right:1px solid rgba(201,168,76,.16);position:relative;overflow:hidden;cursor:default;transition:background .22s}
.l-trust-item:last-child{border-right:none}
.l-trust-item:hover{background:rgba(201,168,76,.06)}
.l-trust-val{font-family:'Fraunces',serif;font-size:1.28rem;font-weight:700;color:#0d1220;letter-spacing:-.04em;line-height:1}
.l-trust-val .u{font-size:.80rem;color:var(--gold)}
.l-trust-lbl{font-size:.56rem;font-weight:700;color:#8a96b0;text-transform:uppercase;letter-spacing:.09em;margin-top:3px}

/* RIGHT PANEL */
.right{background:linear-gradient(160deg,#04060f 0%,#060913 45%,#070c1e 100%);display:flex;align-items:stretch;position:relative;overflow:hidden;height:100vh}
.r-bg{position:absolute;inset:0;pointer-events:none;z-index:0}
.r-bg::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 72% 58% at 8% 12%,rgba(30,58,138,.38) 0%,transparent 56%),radial-gradient(ellipse 65% 55% at 92% 92%,rgba(15,40,120,.46) 0%,transparent 58%),radial-gradient(ellipse 50% 45% at 50% 50%,rgba(10,18,50,.28) 0%,transparent 70%);animation:rAtm 12s ease-in-out infinite alternate}
@keyframes rAtm{from{opacity:.78}to{opacity:1}}
.r-bg::after{content:'';position:absolute;inset:0;background-image:radial-gradient(circle,rgba(59,130,246,.032) 1px,transparent 1px);background-size:28px 28px}
.r-geo-tr{position:absolute;top:0;right:0;z-index:1;pointer-events:none;width:260px;height:260px;overflow:hidden}
.r-geo-tr svg{position:absolute;top:-24px;right:-24px;opacity:.40}
.r-geo-bl{position:absolute;bottom:0;left:0;z-index:1;pointer-events:none;width:200px;height:200px;overflow:hidden}
.r-geo-bl svg{position:absolute;bottom:-14px;left:-14px;opacity:.32}
.card{width:100%;height:100%;display:flex;flex-direction:column;position:relative;z-index:2;opacity:0;animation:cIn .7s 2.42s cubic-bezier(.22,1,.36,1) forwards}
@keyframes cIn{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
.stripe{height:3px;flex-shrink:0;background:linear-gradient(90deg,transparent 0%,var(--gold) 20%,var(--gold-mid) 50%,var(--gold) 80%,transparent 100%);background-size:260% 100%;animation:shim 3.8s linear infinite}
@keyframes shim{0%{background-position:200% 0}100%{background-position:-200% 0}}
.r-topbar{display:flex;align-items:center;justify-content:space-between;padding:18px 36px 14px;flex-shrink:0;border-bottom:1px solid rgba(255,255,255,.05);opacity:0;animation:fUpD .5s 2.5s ease forwards}
@keyframes fUpD{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.r-topbar-brand{display:flex;align-items:center;gap:14px}
.r-topbar-logo{width:56px;height:56px;border-radius:14px;border:1.5px solid rgba(201,168,76,.32);padding:5px;object-fit:contain;background:rgba(255,255,255,.05);box-shadow:0 4px 18px rgba(201,168,76,.18),0 1px 4px rgba(0,0,0,.28);transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s}
.r-topbar-logo:hover{transform:scale(1.07) rotate(-3deg);box-shadow:0 8px 28px rgba(201,168,76,.32)}
.r-topbar-name{font-family:'Fraunces',serif;font-size:1.06rem;font-weight:600;color:var(--dk-text);letter-spacing:-.02em}
.r-topbar-sub{font-size:.58rem;font-weight:700;color:var(--gold);text-transform:uppercase;letter-spacing:.11em;margin-top:2px}
.r-topbar-right{display:flex;flex-direction:column;align-items:flex-end;gap:1px}
.r-topbar-clock{font-family:'Fraunces',serif;font-size:1.10rem;font-weight:300;color:var(--dk-text);letter-spacing:-.02em;line-height:1}
.r-topbar-date{font-size:.54rem;font-weight:600;color:var(--dk-muted);text-transform:uppercase;letter-spacing:.07em}
.cbody{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px 36px 16px;overflow-y:auto;min-height:0;gap:0;scrollbar-width:none}
.cbody::-webkit-scrollbar{display:none}
.login-card{width:100%;max-width:390px;background:rgba(255,255,255,.034);border:1px solid rgba(255,255,255,.08);border-radius:22px;padding:32px 30px 26px;box-shadow:0 24px 60px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.06);backdrop-filter:blur(14px);opacity:0;animation:fUpD .65s 2.64s cubic-bezier(.22,1,.36,1) forwards;position:relative;overflow:hidden}
.login-card::before{content:'';position:absolute;top:0;left:20%;right:20%;height:1px;background:linear-gradient(90deg,transparent,rgba(201,168,76,.55),transparent)}
.r-greeting{display:flex;align-items:center;gap:10px;margin-bottom:22px}
.r-greeting-icon{width:46px;height:46px;border-radius:14px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:1.28rem;background:linear-gradient(135deg,rgba(201,168,76,.14),rgba(201,168,76,.06));border:1px solid rgba(201,168,76,.20);box-shadow:0 4px 18px rgba(201,168,76,.12)}
.r-greeting-hi{font-family:'Fraunces',serif;font-size:1.32rem;font-weight:400;color:var(--dk-text);letter-spacing:-.03em;line-height:1.1}
.r-greeting-hi em{font-style:italic;color:var(--gold);font-weight:300}
.r-greeting-sub{font-size:.72rem;color:var(--dk-sub);margin-top:2px;line-height:1.4}
.field{margin-bottom:12px}
.flabel{display:flex;align-items:center;justify-content:space-between;font-size:.62rem;font-weight:700;color:var(--dk-sub);letter-spacing:.07em;text-transform:uppercase;margin-bottom:5px;transition:color .22s}
.field:focus-within .flabel{color:var(--gold)}
.forgot{font-size:.66rem;font-weight:600;color:var(--gold);text-decoration:none;text-transform:none;letter-spacing:0;transition:opacity .20s}
.forgot:hover{opacity:.7;text-decoration:underline}
.iw{position:relative;display:flex;align-items:center}
.finput{width:100%;padding:12px 12px 12px 46px;background:rgba(4,6,15,.70);border:1.5px solid rgba(255,255,255,.07);border-radius:var(--radius);font-family:inherit;font-size:.91rem;color:var(--dk-text);outline:none;transition:border-color .24s,box-shadow .24s,background .20s;box-shadow:inset 0 2px 8px rgba(0,0,0,.28)}
.finput::placeholder{color:rgba(122,140,172,.28)}
.finput:hover:not(:focus){border-color:rgba(255,255,255,.11);background:rgba(4,6,15,.80)}
.finput:focus{border-color:rgba(201,168,76,.65);background:rgba(4,6,15,.90);box-shadow:inset 0 2px 8px rgba(0,0,0,.28),0 0 0 3px rgba(201,168,76,.14)}
.finput.valid{border-color:rgba(34,197,94,.40)}
.finput.invalid{border-color:rgba(255,107,107,.40)}
.fi-icon{position:absolute;left:15px;color:rgba(122,140,172,.32);pointer-events:none;display:flex;transition:color .22s,transform .22s}
.iw:focus-within .fi-icon{color:var(--gold);transform:scale(1.10)}
.fi-btn{position:absolute;right:12px;cursor:pointer;color:rgba(122,140,172,.30);display:flex;padding:4px;border:none;background:none;transition:color .20s,transform .20s}
.fi-btn:hover{color:var(--gold);transform:scale(1.10)}
.fhint{display:flex;align-items:center;gap:5px;margin-top:3px;font-size:.60rem;font-weight:600;opacity:0;transition:opacity .18s}
.fhint.show{opacity:1}.fhint.warn{color:var(--amber)}
.pw-bar{height:2px;border-radius:3px;background:rgba(255,255,255,.06);margin-top:5px;overflow:hidden}
.pw-fill{height:100%;border-radius:3px;width:0;transition:width .34s,background .34s}
.form-foot{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.rem-wrap{display:flex;align-items:center;gap:7px;cursor:pointer}
.rem-check{width:15px;height:15px;border-radius:4px;border:1.5px solid rgba(255,255,255,.13);background:rgba(4,6,15,.7);cursor:pointer;accent-color:var(--gold)}
.rem-label{font-size:.70rem;color:var(--dk-sub);cursor:pointer;user-select:none}
.btn{width:100%;padding:14px 22px;background:linear-gradient(135deg,#b8882a 0%,#e8c96e 45%,#c9a84c 100%);background-size:200% 100%;color:#040608;border:none;border-radius:var(--radius);font-family:inherit;font-size:.95rem;font-weight:800;cursor:pointer;letter-spacing:.02em;display:flex;align-items:center;justify-content:center;gap:10px;box-shadow:0 6px 32px rgba(201,168,76,.30),inset 0 1px 0 rgba(255,255,255,.26);position:relative;overflow:hidden;transition:transform .20s,box-shadow .26s,background-position .38s}
.btn:hover{transform:translateY(-2px);background-position:100% 0;box-shadow:0 14px 44px rgba(201,168,76,.48),inset 0 1px 0 rgba(255,255,255,.30)}
.btn:active{transform:none}
.btn:disabled{opacity:.70;cursor:not-allowed;transform:none}
.btn>*{position:relative;z-index:1}
.btn-arrow{transition:transform .26s cubic-bezier(.34,1.56,.64,1)}
.btn:hover .btn-arrow{transform:translateX(6px)}
.spinner{width:16px;height:16px;border:2px solid rgba(4,6,8,.26);border-top-color:#040608;border-radius:50%;animation:spin .7s linear infinite;display:none}
.btn.loading .spinner{display:block}
.btn.loading .btn-icon,.btn.loading .btn-arrow{display:none}
@keyframes spin{to{transform:rotate(360deg)}}
.ripple{position:absolute;border-radius:50%;pointer-events:none;transform:scale(0);background:rgba(255,255,255,.26);animation:rpl .6s linear}
@keyframes rpl{to{transform:scale(4);opacity:0}}
.sec-badges{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:16px}
.sec-badge{display:flex;align-items:center;gap:4px;font-size:.58rem;font-weight:700;color:rgba(122,140,172,.44);letter-spacing:.04em}
.sec-badge svg{flex-shrink:0;color:rgba(201,168,76,.45)}
.sec-badge-sep{color:rgba(122,140,172,.18);font-size:.70rem}
.alert{display:flex;align-items:flex-start;gap:10px;border-radius:var(--radius-sm);padding:11px 13px;font-size:.78rem;line-height:1.54;flex-shrink:0;margin-bottom:12px}
.alert-err{background:rgba(255,107,107,.08);border:1px solid rgba(255,107,107,.20);color:#ff9090;animation:shake .48s cubic-bezier(.36,.07,.19,.97)}
@keyframes shake{0%,100%{transform:translateX(0)}15%{transform:translateX(-7px)}30%{transform:translateX(6px)}45%{transform:translateX(-4px)}60%{transform:translateX(3px)}75%{transform:translateX(-2px)}}
.alert-lock{background:rgba(245,158,11,.07);border:1px solid rgba(245,158,11,.20);color:var(--amber)}
.alert-icon{flex-shrink:0;margin-top:2px}
.alert-title{font-weight:700;margin-bottom:2px}
.alert-sub{font-size:.70rem;opacity:.86}
.attempt-meter{display:flex;align-items:center;gap:8px;margin-top:5px}
.meter-dots{display:flex;gap:4px}
.meter-dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.09);transition:background .28s}
.meter-dot.used{background:var(--red)}.meter-dot.warn{background:var(--amber)}
.meter-txt{font-size:.62rem;color:var(--dk-sub)}
.r-roles{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;margin-top:20px;opacity:0;animation:fUpD .55s 2.90s cubic-bezier(.22,1,.36,1) forwards}
.r-role-pill{display:inline-flex;align-items:center;gap:5px;padding:4px 12px;border-radius:100px;font-size:.60rem;font-weight:700;letter-spacing:.04em;border:1px solid;backdrop-filter:blur(4px);cursor:default;transition:transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .18s}
.r-role-pill:hover{transform:translateY(-2px)}
.r-role-pill-dot{width:5px;height:5px;border-radius:50%;flex-shrink:0}
.rp-md{color:#c4a8ff;border-color:rgba(180,140,255,.18);background:rgba(100,50,220,.08)}.rp-md .r-role-pill-dot{background:#a855f7}.rp-md:hover{box-shadow:0 4px 16px rgba(168,85,247,.18)}
.rp-adm{color:#7eb8ff;border-color:rgba(96,165,250,.18);background:rgba(30,64,175,.10)}.rp-adm .r-role-pill-dot{background:#3b82f6}.rp-adm:hover{box-shadow:0 4px 16px rgba(59,130,246,.18)}
.rp-mgr{color:#5ee8b2;border-color:rgba(52,211,153,.18);background:rgba(6,78,59,.13)}.rp-mgr .r-role-pill-dot{background:#10b981}.rp-mgr:hover{box-shadow:0 4px 16px rgba(16,185,129,.16)}
.rp-emp{color:#fcd47a;border-color:rgba(252,211,77,.18);background:rgba(110,70,0,.14)}.rp-emp .r-role-pill-dot{background:#f59e0b}.rp-emp:hover{box-shadow:0 4px 16px rgba(245,158,11,.16)}

#toast-area{position:fixed;top:18px;right:18px;z-index:99999;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.toast{display:flex;align-items:center;gap:10px;padding:11px 16px;border-radius:var(--radius);font-family:'DM Sans',sans-serif;font-size:.80rem;font-weight:600;backdrop-filter:blur(16px);pointer-events:all;animation:tIn .40s cubic-bezier(.34,1.56,.64,1) forwards;max-width:300px;box-shadow:0 5px 24px rgba(0,0,0,.36)}
@keyframes tIn{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
.toast.out{animation:tOut .32s ease forwards}
@keyframes tOut{to{opacity:0;transform:translateX(28px)}}
.toast-success{background:rgba(34,197,94,.13);border:1px solid rgba(34,197,94,.26);color:#4ade80}
.toast-error{background:rgba(255,107,107,.12);border:1px solid rgba(255,107,107,.26);color:#ff9090}
.toast-info{background:rgba(201,168,76,.12);border:1px solid rgba(201,168,76,.26);color:var(--gold-mid)}
.toast-dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex-shrink:0}
@keyframes fUp{from{opacity:0;transform:translateY(13px)}to{opacity:1;transform:none}}

/* RESPONSIVE */
@media(max-width:1440px){.left{padding:44px 38px}.r-topbar{padding:16px 32px 12px}.cbody{padding:18px 32px 14px}}
@media(max-width:1280px){.left{padding:38px 32px}.r-topbar{padding:14px 28px 12px}.cbody{padding:16px 28px 12px}.l-name{font-size:clamp(1.56rem,2.1vw,2.2rem)}}
@media(max-width:1100px){.page{grid-template-columns:1.1fr 1fr}.left{padding:32px 26px}.r-topbar{padding:13px 22px 11px}.cbody{padding:14px 22px 12px}.login-card{padding:26px 24px 22px}}
@media(max-width:960px){.page{grid-template-columns:1fr 1fr}.left{padding:28px 22px}.r-topbar{padding:12px 18px 10px}.cbody{padding:12px 18px 10px}.r-topbar-clock{font-size:.94rem}.login-card{padding:22px 20px 18px}.r-greeting-hi{font-size:1.18rem}}
@media(max-width:820px){.left{padding:24px 18px}.r-topbar{padding:11px 16px 9px}.cbody{padding:10px 16px 8px}.l-name{font-size:1.6rem}.login-card{padding:20px 18px 16px;border-radius:18px}}
@media(max-width:768px){html,body{overflow-y:auto;font-size:15px}body.ready{overflow-y:auto}.page{grid-template-columns:1fr;height:auto;overflow:visible;min-height:100vh}.left{height:auto;min-height:auto;padding:40px 24px 32px;border-bottom:1px solid rgba(255,255,255,.06)}.right{height:auto;overflow:visible}.card{height:auto}.cbody{flex:none;padding:20px 22px 16px;justify-content:flex-start}.r-geo-tr,.r-geo-bl{display:none}.r-topbar{padding:14px 22px 12px}.l-tagline{white-space:normal}}
@media(max-width:640px){.left{padding:32px 18px 28px}.r-topbar{padding:12px 18px 10px}.cbody{padding:16px 18px 12px}.login-card{padding:20px 18px 16px}.r-roles{gap:5px}.r-role-pill{font-size:.56rem;padding:3px 10px}}
@media(max-width:520px){.r-topbar-sub,.r-topbar-date{display:none}.login-card{padding:18px 16px 14px;border-radius:16px}.r-topbar-logo{width:44px;height:44px;border-radius:11px}.r-topbar-brand{gap:10px}}
@media(max-width:480px){html,body{font-size:14px}.left{padding:28px 16px 22px}.r-topbar{padding:11px 14px 9px}.cbody{padding:12px 14px 10px}.l-logo{width:64px;height:64px;border-radius:18px}.l-name{font-size:1.38rem}.r-greeting-hi{font-size:1.08rem}.finput{padding:11px 11px 11px 44px;font-size:.88rem}.btn{padding:13px;font-size:.92rem}.sec-badges{gap:8px}#curtain .c-logo{width:102px;height:102px;border-radius:22px}.c-name{font-size:1.46rem}.cr2,.cr3{display:none}}
@media(max-width:390px){.left{padding:22px 14px 18px}.l-logo{width:56px;height:56px}.l-name{font-size:1.24rem}.login-card{padding:16px 14px 12px}.sec-badges{flex-wrap:wrap;justify-content:center}}
</style>
</head>
<body>

<!-- CURTAIN -->
<div id="curtain" aria-hidden="true">
  <div class="cr cr1"></div><div class="cr cr2"></div><div class="cr cr3"></div>
  <img class="c-logo" src="assets/belief-logo.jpg" alt="">
  <div class="c-brand">
    <div class="c-name">My People Connect</div>
    <div class="c-sub">Enterprise HR Platform</div>
  </div>
  <div class="c-bar"><div class="c-bar-fill"></div></div>
</div>
<div id="toast-area" aria-live="polite"></div>

<!-- PAGE -->
<div class="page">

  <!-- LEFT PANEL -->
  <div class="left" role="complementary" aria-label="Platform showcase">
    <div class="l-mesh"  aria-hidden="true"></div>
    <div class="l-atm"   aria-hidden="true"></div>
    <div class="l-orb l-orb1" aria-hidden="true"></div>
    <div class="l-orb l-orb2" aria-hidden="true"></div>
    <div class="l-orb l-orb3" aria-hidden="true"></div>
    <div class="l-accent-line" aria-hidden="true"></div>
    <div class="l-geo" aria-hidden="true">
      <svg width="220" height="220" viewBox="0 0 220 220" fill="none">
        <circle cx="180" cy="40" r="120" stroke="rgba(201,168,76,.20)" stroke-width="1"/>
        <circle cx="180" cy="40" r="80"  stroke="rgba(201,168,76,.14)" stroke-width="1"/>
        <circle cx="180" cy="40" r="44"  stroke="rgba(201,168,76,.10)" stroke-width="1"/>
        <line x1="50" y1="0" x2="220" y2="170" stroke="rgba(201,168,76,.12)" stroke-width="1"/>
      </svg>
    </div>

    <div class="l-brand-mark">
      <div class="l-logo-ring">
        <img class="l-logo" src="assets/belief-icon.jpg" alt="My People Connect">
        <div class="l-logo-live" title="System Online"></div>
      </div>
      <div class="l-heading">
        <h1 class="l-name">My People <em>Connect</em></h1>
        <p class="l-tagline">An intelligent platform for your workforce from hire to retire.</p>
      </div>
      <div class="l-divider">
        <div class="l-divider-ico" aria-hidden="true">
          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="rgba(180,130,30,.8)" stroke-width="2.5" stroke-linecap="round"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01z"/></svg>
        </div>
      </div>

      <!-- Carousel -->
      <div class="l-carousel" role="region" aria-label="Feature highlights">
        <div class="l-car-progress"><div class="l-car-fill" id="carFill"></div></div>
        <div class="l-car-track" id="carTrack">
          <div class="l-car-slide active">
            <img src="https://images.unsplash.com/photo-1600880292203-757bb62b4baf?w=800&q=80&fit=crop&crop=faces,center" alt="Team attendance tracking" loading="eager">
            <div class="l-car-caption">
              <div class="l-car-cap-left">
                <div class="l-car-cap-tag">Attendance &amp; Leave</div>
                <div class="l-car-cap-title">Real-time workforce<br>presence tracking</div>
              </div>
              <div class="l-car-cap-num">01</div>
            </div>
          </div>
          <div class="l-car-slide">
            <img src="https://images.unsplash.com/photo-1554224155-6726b3ff858f?w=800&q=80&fit=crop&crop=center" alt="Payroll and compliance" loading="lazy">
            <div class="l-car-caption">
              <div class="l-car-cap-left">
                <div class="l-car-cap-tag">Payroll &amp; Compliance</div>
                <div class="l-car-cap-title">Automated, accurate<br>pay runs every cycle</div>
              </div>
              <div class="l-car-cap-num">02</div>
            </div>
          </div>
          <div class="l-car-slide">
            <img src="https://images.unsplash.com/photo-1552664730-d307ca884978?w=800&q=80&fit=crop&crop=center" alt="Performance KPIs" loading="lazy">
            <div class="l-car-caption">
              <div class="l-car-cap-left">
                <div class="l-car-cap-tag">Performance KPIs</div>
                <div class="l-car-cap-title">Track goals &amp; drive<br>team growth</div>
              </div>
              <div class="l-car-cap-num">03</div>
            </div>
          </div>
          <div class="l-car-slide">
            <img src="https://images.unsplash.com/photo-1521737604893-d14cc237f11d?w=800&q=80&fit=crop&crop=faces,center" alt="Multi-role access" loading="lazy">
            <div class="l-car-caption">
              <div class="l-car-cap-left">
                <div class="l-car-cap-tag">Multi-Role Access</div>
                <div class="l-car-cap-title">Right access for<br>every team level</div>
              </div>
              <div class="l-car-cap-num">04</div>
            </div>
          </div>
        </div>
        <button class="l-car-arr l-car-prev" id="carPrev" type="button" aria-label="Previous slide">
          <svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg>
        </button>
        <button class="l-car-arr l-car-next" id="carNext" type="button" aria-label="Next slide">
          <svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
        </button>
        <div class="l-car-dots" role="tablist" aria-label="Slide navigation">
          <span class="l-car-dot on" data-ci="0" role="tab" tabindex="0" aria-label="Slide 1"></span>
          <span class="l-car-dot"    data-ci="1" role="tab" tabindex="0" aria-label="Slide 2"></span>
          <span class="l-car-dot"    data-ci="2" role="tab" tabindex="0" aria-label="Slide 3"></span>
          <span class="l-car-dot"    data-ci="3" role="tab" tabindex="0" aria-label="Slide 4"></span>
        </div>
      </div>

      <!-- Trust strip -->
      <div class="l-trust" role="list" aria-label="Platform statistics">
        <div class="l-trust-item" role="listitem">
          <div class="l-trust-val"><span class="ctr" data-t="99">0</span><span class="u">%</span></div>
          <div class="l-trust-lbl">Uptime</div>
        </div>
        <div class="l-trust-item" role="listitem">
          <div class="l-trust-val"><span class="ctr" data-t="100">0</span><span class="u">%</span></div>
          <div class="l-trust-lbl">Paperless</div>
        </div>
        <div class="l-trust-item" role="listitem">
          <div class="l-trust-val">4<span class="u">+</span></div>
          <div class="l-trust-lbl">Role Levels</div>
        </div>
        <div class="l-trust-item" role="listitem">
          <div class="l-trust-val">24<span class="u">/7</span></div>
          <div class="l-trust-lbl">Live Access</div>
        </div>
      </div>
    </div>
  </div><!-- /.left -->

  <!-- RIGHT PANEL -->
  <div class="right">
    <div class="r-bg" aria-hidden="true"></div>
    <div class="r-geo-tr" aria-hidden="true">
      <svg width="250" height="250" viewBox="0 0 250 250" fill="none">
        <circle cx="195" cy="55" r="130" stroke="rgba(59,130,246,.14)" stroke-width="1"/>
        <circle cx="195" cy="55" r="90"  stroke="rgba(59,130,246,.09)" stroke-width="1"/>
        <circle cx="195" cy="55" r="52"  stroke="rgba(59,130,246,.07)" stroke-width="1"/>
        <line x1="52" y1="0" x2="250" y2="195" stroke="rgba(59,130,246,.08)" stroke-width="1"/>
      </svg>
    </div>
    <div class="r-geo-bl" aria-hidden="true">
      <svg width="200" height="200" viewBox="0 0 200 200" fill="none">
        <rect x="16" y="16" width="168" height="168" rx="4" stroke="rgba(59,130,246,.12)" stroke-width="1"/>
        <rect x="36" y="36" width="128" height="128" rx="3" stroke="rgba(59,130,246,.08)" stroke-width="1"/>
        <circle cx="100" cy="100" r="50" stroke="rgba(30,64,175,.14)" stroke-width="1"/>
      </svg>
    </div>

    <div class="card" role="main">
      <div class="stripe" aria-hidden="true"></div>

      <!-- TOP BAR -->
      <div class="r-topbar">
        <div class="r-topbar-brand">
          <img class="r-topbar-logo" src="assets/spica.png" alt="Logo">
          <div>
            <div class="r-topbar-name">My People Connect</div>
            <div class="r-topbar-sub">Workforce Platform</div>
          </div>
        </div>
        <div class="r-topbar-right">
          <div class="r-topbar-clock" id="liveClock">--:--</div>
          <div class="r-topbar-date" id="liveDate">--- --, ----</div>
        </div>
      </div>

      <!-- SCROLL BODY -->
      <div class="cbody">
        <div class="login-card">

          <!-- Greeting — rendered dynamically by JS -->
          <div class="r-greeting">
            <div class="r-greeting-icon" id="greetIcon">🌤️</div>
            <div class="r-greeting-text">
              <div class="r-greeting-hi" id="greetText">Good <em id="greetPeriod">day</em></div>
              <div class="r-greeting-sub" id="greetSub">Welcome back — your dashboard awaits.</div>
            </div>
          </div>

          <!-- Error / Lock alert -->
          <?php if (!empty($error)): ?>
          <div class="alert <?= $is_locked ? 'alert-lock' : 'alert-err' ?>" role="alert" aria-live="assertive">
            <svg class="alert-icon" xmlns="http://www.w3.org/2000/svg" width="15" height="15" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <?php if ($is_locked): ?>
              <path d="M18 8h-1V6c0-2.8-2.2-5-5-5S7 3.2 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2z"/>
              <?php else: ?>
              <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/>
              <?php endif; ?>
            </svg>
            <div>
              <div class="alert-title"><?= $is_locked ? 'Account Locked' : 'Login Failed' ?></div>
              <div class="alert-sub"><?= htmlspecialchars($error) ?></div>
              <?php if (!$is_locked && $_SESSION['login_attempts'] > 0): ?>
              <div class="attempt-meter">
                <div class="meter-dots">
                  <?php for ($i=1;$i<=5;$i++): $c=$i<=$_SESSION['login_attempts']?($i>=4?'used warn':'used'):''; ?>
                  <div class="meter-dot <?= $c ?>"></div>
                  <?php endfor; ?>
                </div>
                <span class="meter-txt"><?= max(0,5-$_SESSION['login_attempts']) ?> attempt(s) left</span>
              </div>
              <?php endif; ?>
            </div>
          </div>
          <?php endif; ?>

          <form method="POST" action="" id="loginForm" novalidate>
            <input type="hidden" name="csrf_token" value="<?= htmlspecialchars($csrf_token) ?>">

            <div class="field">
              <div class="flabel">
                <label for="uname">Username</label>
                <span id="uCheck" style="font-size:.58rem;color:var(--green);display:none;font-weight:700">✓ Good</span>
              </div>
              <div class="iw">
                <span class="fi-icon" aria-hidden="true">
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 24 24"><path d="M12 12c2.7 0 4.8-2.1 4.8-4.8S14.7 2.4 12 2.4 7.2 4.5 7.2 7.2 9.3 12 12 12zm0 2.4c-3.2 0-9.6 1.6-9.6 4.8v2.4h19.2v-2.4c0-3.2-6.4-4.8-9.6-4.8z"/></svg>
                </span>
                <input type="text" id="uname" name="username" class="finput"
                       placeholder="Your username" value="<?= $savedUser ?>"
                       autocomplete="username" required
                       spellcheck="false" autocorrect="off" autocapitalize="none"
                       <?= $is_locked ? 'disabled' : '' ?>>
                <button type="button" class="fi-btn" id="clearUser" style="display:none" aria-label="Clear">
                  <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" fill="currentColor" viewBox="0 0 24 24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>
                </button>
              </div>
            </div>

            <div class="field">
              <div class="flabel">
                <label for="pw">Password</label>
                <a href="forgot-password.php" class="forgot">Forgot?</a>
              </div>
              <div class="iw">
                <span class="fi-icon" aria-hidden="true">
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 24 24"><path d="M18 8h-1V6c0-2.8-2.2-5-5-5S7 3.2 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.7 1.4-3.1 3.1-3.1 1.7 0 3.1 1.4 3.1 3.1v2z"/></svg>
                </span>
                <input type="password" id="pw" name="password" class="finput"
                       placeholder="Your password"
                       autocomplete="current-password" required
                       <?= $is_locked ? 'disabled' : '' ?>>
                <button type="button" class="fi-btn" id="eyeBtn" aria-label="Toggle password">
                  <svg id="eyeSvg" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                    <path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/>
                  </svg>
                </button>
              </div>
              <div class="pw-bar"><div class="pw-fill" id="pwFill"></div></div>
              <div class="fhint warn" id="capsHint" aria-live="polite">
                <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2L1 21h22L12 2zm0 3.5L20.1 19H3.9L12 5.5zM11 10v4h2v-4h-2zm0 6v2h2v-2h-2z"/></svg>
                Caps Lock is on
              </div>
            </div>

            <div class="form-foot">
              <label class="rem-wrap">
                <input type="checkbox" class="rem-check" name="remember" id="remChk" value="1">
                <span class="rem-label">Keep me signed in</span>
              </label>
            </div>

            <button type="submit" class="btn" id="submitBtn" <?= $is_locked ? 'disabled' : '' ?>>
              <svg class="btn-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M11 7L9.6 8.4l2.6 2.6H2v2h10.2l-2.6 2.6L11 17l5-5-5-5zm9 12h-8v2h8c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-8v2h8v14z"/></svg>
              <div class="spinner" aria-hidden="true"></div>
              <span>Sign In to Dashboard</span>
              <svg class="btn-arrow" xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6z"/></svg>
            </button>

            <?php if ($is_locked && $lockout_secs > 0): ?>
            <div style="text-align:center;margin-top:10px;font-size:.68rem;color:var(--amber)">
              Unlocks in <span id="countdown"><?= $lockout_secs ?></span>s
            </div>
            <?php endif; ?>
          </form>

          <!-- Security micro-badges -->
          <div class="sec-badges">
            <div class="sec-badge">
              <svg width="11" height="11" viewBox="0 0 24 24" fill="currentColor"><path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4z"/></svg>
              SSL Encrypted
            </div>
            <span class="sec-badge-sep">·</span>
            <div class="sec-badge">
              <svg width="11" height="11" viewBox="0 0 24 24" fill="currentColor"><path d="M18 8h-1V6c0-2.8-2.2-5-5-5S7 3.2 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z"/></svg>
              Auto Timeout
            </div>
            <span class="sec-badge-sep">·</span>
            <div class="sec-badge">
              <svg width="11" height="11" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
              2-Min Lockout
            </div>
          </div>

        </div><!-- /.login-card -->

        <!-- Role pills -->
        <div class="r-roles" role="list" aria-label="Access levels">
          <div class="r-role-pill rp-md"  role="listitem"><span class="r-role-pill-dot"></span>Managing Director</div>
          <div class="r-role-pill rp-adm" role="listitem"><span class="r-role-pill-dot"></span>HR</div>
          <div class="r-role-pill rp-mgr" role="listitem"><span class="r-role-pill-dot"></span>Manager</div>
          <div class="r-role-pill rp-emp" role="listitem"><span class="r-role-pill-dot"></span>Employee</div>
        </div>

      </div><!-- /.cbody -->
    </div><!-- /.card -->
  </div><!-- /.right -->

</div><!-- /.page -->

<script>
/* ── ready state ── */
setTimeout(() => document.body.classList.add('ready'), 2700);

/* ── dynamic greeting ── */
(function setGreeting() {
  const h = new Date().getHours();
  const greetings = [
    { min: 0,  max: 4,  period: 'night',     icon: '🌙', sub: 'Burning the midnight oil? Your dashboard is ready.' },
    { min: 5,  max: 11, period: 'morning',   icon: '☀️', sub: 'Rise and shine — your dashboard awaits.' },
    { min: 12, max: 16, period: 'afternoon', icon: '🌤️', sub: 'Welcome back — your dashboard awaits.' },
    { min: 17, max: 20, period: 'evening',   icon: '🌇', sub: 'Wrapping up the day? Your dashboard is ready.' },
    { min: 21, max: 23, period: 'night',     icon: '🌙', sub: 'Working late? Your dashboard is here.' },
  ];
  const match = greetings.find(g => h >= g.min && h <= g.max) || greetings[1];

  const iconEl   = document.getElementById('greetIcon');
  const periodEl = document.getElementById('greetPeriod');
  const subEl    = document.getElementById('greetSub');

  if (iconEl)   iconEl.textContent   = match.icon;
  if (periodEl) periodEl.textContent = match.period;
  if (subEl)    subEl.textContent    = match.sub;
})();

/* ── live clock ── */
(function tick(){
  const n=new Date(), pad=v=>String(v).padStart(2,'0');
  const D=['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
  const M=['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
  const tc=document.getElementById('liveClock'), td=document.getElementById('liveDate');
  if(tc) tc.textContent=`${pad(n.getHours())}:${pad(n.getMinutes())}:${pad(n.getSeconds())}`;
  if(td) td.textContent=`${D[n.getDay()]}, ${M[n.getMonth()]} ${n.getDate()}, ${n.getFullYear()}`;
  setTimeout(tick,1000);
})();

/* ── lockout countdown ── */
const cdEl=document.getElementById('countdown');
if(cdEl){
  let v=parseInt(cdEl.textContent,10);
  const ci=setInterval(()=>{ v--; cdEl.textContent=v; if(v<=0){clearInterval(ci);location.reload();} },1000);
}

/* ── toast ── */
function showToast(msg,type='info',dur=3200){
  const area=document.getElementById('toast-area');
  const t=document.createElement('div');
  t.className=`toast toast-${type}`;
  t.innerHTML=`<span class="toast-dot"></span><span>${msg}</span>`;
  area.appendChild(t);
  setTimeout(()=>{ t.classList.add('out'); t.addEventListener('animationend',()=>t.remove()); },dur);
}

/* ── password eye toggle ── */
const eyeBtn=document.getElementById('eyeBtn');
const pwIn=document.getElementById('pw');
const eyeSvg=document.getElementById('eyeSvg');
const VP='<path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/>';
const HP='<g stroke="currentColor" stroke-width="2" stroke-linecap="round" fill="none"><line x1="2" y1="2" x2="22" y2="22"/><path d="M6.71 6.71A10 10 0 0 0 2 12c2 4 6 7 10 7a10 10 0 0 0 4.35-1"/><path d="M10.58 5.1A10 10 0 0 1 22 12a10 10 0 0 1-1.88 3.09"/><circle cx="12" cy="12" r="3"/></g>';
if(eyeBtn&&pwIn){
  eyeBtn.addEventListener('click',()=>{
    const show=pwIn.type==='password';
    pwIn.type=show?'text':'password';
    eyeSvg.innerHTML=show?HP:VP;
    eyeBtn.style.color=show?'var(--gold)':'';
    pwIn.focus();
    showToast(show?'Password visible':'Password hidden','info',1800);
  });
}

/* ── caps lock ── */
const capsHint=document.getElementById('capsHint');
if(pwIn&&capsHint){
  pwIn.addEventListener('keydown',e=>{
    const on=e.getModifierState&&e.getModifierState('CapsLock');
    capsHint.classList.toggle('show',on);
    if(on) showToast('Caps Lock is on','info',2000);
  });
  pwIn.addEventListener('blur',()=>capsHint.classList.remove('show'));
}

/* ── password strength ── */
const pwFill=document.getElementById('pwFill');
if(pwIn&&pwFill){
  pwIn.addEventListener('input',()=>{
    const v=pwIn.value; let s=0;
    if(v.length>=6)s++; if(v.length>=10)s++;
    if(/[A-Z]/.test(v)&&/[a-z]/.test(v))s++;
    if(/[0-9]/.test(v))s++;
    if(/[^A-Za-z0-9]/.test(v))s++;
    pwFill.style.width=[0,20,40,60,82,100][s]+'%';
    pwFill.style.background=['#ff4444','#ff8800','#f59e0b','#a3e635','#22c55e'][Math.max(0,s-1)]||'#ff4444';
  });
}

/* ── username clear + validate ── */
const uIn=document.getElementById('uname');
const clrB=document.getElementById('clearUser');
const uChk=document.getElementById('uCheck');
if(uIn&&clrB){
  const sync=()=>{
    clrB.style.display=uIn.value?'flex':'none';
    if(uChk) uChk.style.display=uIn.value.length>=3?'inline':'none';
    uIn.classList.toggle('valid',uIn.value.length>=3);
  };
  uIn.addEventListener('input',sync); sync();
  clrB.addEventListener('click',()=>{ uIn.value=''; uIn.focus(); sync(); });
}

/* ── ripple ── */
const subBtn=document.getElementById('submitBtn');
if(subBtn){
  subBtn.addEventListener('click',function(e){
    const r=this.getBoundingClientRect(),sz=Math.max(r.width,r.height)*2;
    const sp=document.createElement('span');
    sp.className='ripple';
    sp.style.cssText=`width:${sz}px;height:${sz}px;left:${e.clientX-r.left-sz/2}px;top:${e.clientY-r.top-sz/2}px`;
    this.appendChild(sp); sp.addEventListener('animationend',()=>sp.remove());
  });
}

/* ── form submit ── */
const form=document.getElementById('loginForm');
if(form&&subBtn){
  form.addEventListener('submit',e=>{
    const u=(uIn&&uIn.value||'').trim();
    const p=(pwIn&&pwIn.value||'');
    if(!u||!p){
      e.preventDefault(); showToast('Please fill in all fields','error');
      if(!u&&uIn){uIn.classList.add('invalid');uIn.focus();}
      if(!p&&pwIn) pwIn.classList.add('invalid');
      return;
    }
    subBtn.classList.add('loading'); subBtn.disabled=true;
    showToast('Signing you in…','info',4000);
  });
  [uIn,pwIn].forEach(el=>{ if(el) el.addEventListener('input',()=>el.classList.remove('invalid')); });
}

/* ── Carousel ── */
(function(){
  const track=document.getElementById('carTrack');
  if(!track) return;
  const slides=Array.from(track.querySelectorAll('.l-car-slide'));
  const dots=Array.from(document.querySelectorAll('.l-car-dot'));
  const fill=document.getElementById('carFill');
  const prev=document.getElementById('carPrev');
  const next=document.getElementById('carNext');
  const DURATION=5000;
  let cur=0, timer, fillRaf;
  const stopFill=()=>{ cancelAnimationFrame(fillRaf); if(fill){ fill.style.transition='none'; fill.style.width='0%'; } };
  const startFill=()=>{
    stopFill(); if(!fill) return;
    fillRaf=requestAnimationFrame(function step(now){
      if(!step.t0) step.t0=now;
      const pct=Math.min(((now-step.t0)/DURATION)*100,100);
      fill.style.transition='none'; fill.style.width=pct+'%';
      if(pct<100) fillRaf=requestAnimationFrame(step);
    });
  };
  const go=idx=>{
    slides[cur].classList.remove('active'); dots[cur].classList.remove('on');
    cur=((idx%slides.length)+slides.length)%slides.length;
    slides[cur].classList.add('active'); dots[cur].classList.add('on');
    track.style.transform=`translateX(-${cur*100}%)`; startFill();
  };
  const autoPlay=()=>{ clearInterval(timer); timer=setInterval(()=>go(cur+1),DURATION); };
  prev&&prev.addEventListener('click',()=>{ go(cur-1); autoPlay(); });
  next&&next.addEventListener('click',()=>{ go(cur+1); autoPlay(); });
  dots.forEach(d=>d.addEventListener('click',()=>{ go(+d.dataset.ci); autoPlay(); }));
  let tx=0;
  track.addEventListener('touchstart',e=>{tx=e.touches[0].clientX;},{passive:true});
  track.addEventListener('touchend',e=>{ const dx=e.changedTouches[0].clientX-tx; if(Math.abs(dx)>40){ go(cur+(dx<0?1:-1)); autoPlay(); } },{passive:true});
  const wrap=track.closest('.l-carousel');
  if(wrap){ wrap.addEventListener('mouseenter',()=>{ clearInterval(timer); stopFill(); }); wrap.addEventListener('mouseleave',()=>{ autoPlay(); startFill(); }); }
  setTimeout(()=>{ go(0); autoPlay(); },300);
})();

/* ── animated counters ── */
function runCounter(el,delay){
  const tgt=+el.dataset.t;
  setTimeout(()=>{
    const t0=performance.now();
    (function f(now){ const p=Math.min((now-t0)/1400,1); el.textContent=Math.round((1-Math.pow(1-p,3))*tgt); if(p<1) requestAnimationFrame(f); })(t0);
  },delay||0);
}
const trustEl=document.querySelector('.l-trust');
if(trustEl){
  'IntersectionObserver' in window
    ? new IntersectionObserver((es,o)=>{ if(!es[0].isIntersecting) return; document.querySelectorAll('.ctr').forEach(el=>runCounter(el)); o.disconnect(); },{threshold:.3}).observe(trustEl)
    : document.querySelectorAll('.ctr').forEach(el=>runCounter(el,2900));
}

/* ── auto-focus ── */
setTimeout(()=>{ const u=document.getElementById('uname'); if(u&&!u.disabled) u.focus(); },2800);
</script>
</body>
</html>