{% extends 'base.html' %}
{% block title %}Sign In — Shiba Meals{% endblock %}
{% block login_content %}
<style>
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg);padding:1rem}
.login-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r2);padding:2rem;width:100%;max-width:380px;box-shadow:var(--shadow2)}
.login-logo{font-size:1.4rem;font-weight:700;letter-spacing:-.02em;margin-bottom:.25rem}
.login-sub{font-size:.82rem;color:var(--text3);margin-bottom:1.5rem;font-style:italic}
</style>
<div class="login-wrap">
  <div class="login-card">
    <div class="login-logo">🍴 Shiba Meals</div>
    <div class="login-sub">Field Sales Support System</div>
    {% with messages = get_flashed_messages() %}
    {% if messages %}{% for m in messages %}<div class="alert alert-danger" style="margin-bottom:.75rem">{{ m }}</div>{% endfor %}{% endif %}
    {% endwith %}
    <form method="post" autocomplete="off">
      <div class="form-row">
        <label class="form-label" for="username">Username</label>
        <input type="text" name="username" id="username" placeholder="Your name or employee ID"
               required autocomplete="username" autofocus maxlength="100">
      </div>
      <div class="form-row">
        <label class="form-label" for="password">Password</label>
        <input type="password" name="password" id="password" placeholder="••••••••"
               required autocomplete="current-password" maxlength="200">
      </div>
      <button type="submit" class="btn btn-primary btn-block" style="margin-top:.75rem;padding:10px">Sign In</button>
    </form>
  </div>
</div>
{% endblock %}