<?php $this->start('body'); ?>

<style>
  /* Variant B — centered ultra-minimal. Scoped to .auth-shell so it can't
     bleed into any other view that happens to reuse the auth layout. */
  .auth-shell {
    min-height: 100vh;
    background: #F5F7FB;
    padding: 24px 16px;
  }
  .auth-card {
    width: 100%;
    max-width: 400px;
    background: #FFFFFF;
    border: 1px solid #E2E7EF;
    border-radius: 6px;
    padding: 40px 30px 32px;
    text-align: center;
    box-shadow: 0 1px 3px rgba(15,18,32,.05), 0 12px 28px -14px rgba(38,38,245,.14);
  }
  .auth-card .brand { margin-bottom: 12px; }
  .auth-card .brand img { height: 56px; width: auto; }
  .auth-card .tagline {
    font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
    color: #6B7484; font-weight: 500; margin-bottom: 26px;
  }
  /* Field = icon chip on the left + input on the right, sharing one
     rounded rectangle. Focus state lights up the whole wrapper. */
  .auth-card .field {
    display: flex;
    align-items: stretch;
    background: #F5F7FB;
    border: 1px solid transparent;
    border-radius: 4px;
    margin-bottom: 14px;
    text-align: left;
    overflow: hidden;
    transition: background-color .15s, border-color .15s, box-shadow .15s;
  }
  .auth-card .field:focus-within {
    background: #FFFFFF;
    border-color: <?= BRAND_COLOR; ?>;
    box-shadow: 0 0 0 3px rgba(38,38,245,.12);
  }
  .auth-card .field .field-ico {
    flex: 0 0 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6B7484;
    font-size: 16px;
    border-right: 1px solid #E2E7EF;
    background: transparent;
    transition: color .15s;
  }
  .auth-card .field:focus-within .field-ico { color: <?= BRAND_COLOR; ?>; }

  .auth-card .field .form-control {
    flex: 1 1 auto;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 18px 18px;
    font-size: 24px;
    line-height: 24px;
    font-weight: 500;
    color: #0F1220;
    box-shadow: none;
    outline: none;
    min-width: 0;   /* let it shrink inside the flex row on tiny screens */
  }
  .auth-card .field .form-control::placeholder {
    font-weight: 400;
    color: #94A0B0;
  }
  .auth-card .field .form-control:focus {
    background: transparent;
    border: none;
    box-shadow: none;
    outline: none;
  }
  .auth-card .row-actions {
    display: flex; align-items: center; justify-content: space-between;
    margin: 16px 0 20px; font-size: 12.5px;
  }
  .auth-card .remember {
    display: inline-flex; align-items: center; gap: 6px;
    color: <?= BRAND_COLOR; ?>; font-weight: 600; cursor: pointer;
    user-select: none;
  }
  .auth-card .remember input {
    accent-color: <?= BRAND_COLOR; ?>;
    width: 15px; height: 15px; margin: 0;
  }
  .auth-card .forgot {
    color: #6B7484; text-decoration: none; font-weight: 500;
  }
  .auth-card .forgot:hover { color: <?= BRAND_COLOR; ?>; }
  .auth-card .btn-sign {
    display: block; width: 100%; text-align: center;
    background: <?= BRAND_COLOR; ?>;
    color: #FFFFFF;
    border: none;
    padding: 15px;
    border-radius: 4px;
    font-weight: 700; font-size: 15px;
    letter-spacing: .05em; text-transform: uppercase;
    cursor: pointer;
    transition: background-color .15s, box-shadow .15s, transform .05s;
    box-shadow: 0 8px 18px -8px rgba(38,38,245,.55);
  }
  .auth-card .btn-sign:hover { background: #1414D6; }
  .auth-card .btn-sign:active { transform: translateY(1px); }
  .auth-footer {
    text-align: center; margin-top: 18px;
    font-size: 11px; color: #94A0B0; letter-spacing: .02em;
  }
  .auth-footer strong { color: #6B7484; font-weight: 600; }
</style>

<div class="auth-shell d-flex align-items-center justify-content-center">
  <div style="width:380px; max-width:100%;">

    <div class="auth-card">
      <div class="brand">
        <img src="<?= PROOT; ?>images/logo.png" alt="Pacific Group">
      </div>
      <div class="tagline"><?= COMPANY_TAGLINE; ?></div>

      <?= $this->raw('fb_msg'); ?>

      <form method="post" action="<?= PROOT; ?>Login" autocomplete="off">
        <div class="field">
          <span class="field-ico" aria-hidden="true"><i class="fas fa-user"></i></span>
          <input type="text" name="username" class="form-control"
                 placeholder="Username" autofocus
                 value="<?= $this->v('username'); ?>">
        </div>
        <div class="field">
          <span class="field-ico" aria-hidden="true"><i class="fas fa-lock"></i></span>
          <input type="password" name="password" class="form-control"
                 placeholder="Password">
        </div>

        <div class="row-actions">
          <label class="remember">
            <input type="checkbox" name="remember" value="1">
            Remember me
          </label>
          <a href="mailto:<?= defined('COMPANY_SUPPORT_EMAIL') ? COMPANY_SUPPORT_EMAIL : 'hr@pacificgroup.co.tz'; ?>?subject=Password%20reset" class="forgot">Forgot?</a>
        </div>

        <button type="submit" class="btn-sign">Sign in</button>
      </form>
    </div>

    <div class="auth-footer">
      <strong><?= COMPANY_NAME; ?></strong>
    </div>
  </div>
</div>

<?php $this->end(); ?>
