/* ============================================================
   login.css — SCMTR_Web sign-in screen (standalone, no master)
   Self-contained: its own palette + reset so it never depends on
   scmtr-theme.css. Reuse for any future auth/standalone screens.
   ============================================================ */
:root{
    --brand:#0E9AA7; --brand-dark:#0A7A85; --brand-2:#2CB6C4;
    --ink:#1f2937; --muted:#6b7280; --soft2:#fafbfc; --bd:#dfe3e7;
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font-family:'Segoe UI',Arial,sans-serif;font-size:13px;background:#eef1f4;color:var(--ink)}
form{margin:0;min-height:100vh}

.login-page{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:32px 16px}
.login-brand{text-align:center;margin-bottom:20px}
.login-brand .mark{width:56px;height:56px;border-radius:14px;background:var(--brand);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:20px;margin-bottom:12px}
.login-brand .t{color:var(--ink);font-size:19px;font-weight:700;font-variant:small-caps}
.login-brand .s{color:var(--muted);font-size:12px}

.login-card{background:#fff;border-radius:16px;box-shadow:0 12px 48px rgba(12,91,100,.18);width:100%;max-width:400px;padding:28px 30px 30px}
.fld{margin-bottom:16px}
.fld label{display:block;font-size:11px;font-weight:700;color:#5b8f96;text-transform:uppercase;letter-spacing:.6px;margin-bottom:7px}
.fld input,.fld select{width:100%;height:42px;padding:0 14px;font-size:13.5px;font-family:inherit;color:var(--ink);background:var(--soft2);border:1.5px solid var(--bd);border-radius:9px;outline:none;transition:.15s}
.fld input:focus,.fld select:focus{background:#fff;border-color:var(--brand);box-shadow:0 0 0 3px rgba(14,154,167,.14)}

.btn{display:block;width:100%;height:44px;background:linear-gradient(135deg,var(--brand-dark),var(--brand-2));color:#fff;font-size:14.5px;font-weight:700;font-family:inherit;border:none;border-radius:10px;cursor:pointer;letter-spacing:.5px;margin-top:6px}
.btn:hover{filter:brightness(1.05)}

.msg{margin-bottom:14px;font-size:12.5px;color:#a92b1e;background:#fff2f0;border:1px solid #f5b8b2;border-radius:8px;padding:9px 12px}
.msg:empty{display:none}
.step-note{font-size:12px;color:var(--muted);margin-bottom:14px}
.footer{margin-top:22px;font-size:11.5px;color:var(--muted);text-align:center;letter-spacing:.3px}

/* Select2 (typeable Agent dropdown) — sized/colored to match the native .fld select.
   NOTE: do NOT set width:100% on .select2-container globally — that also stretches the
   open dropdown panel (appended to <body>) and pushes it off-screen. Width is set per
   control via the select2({width:'100%'}) init instead. */
.select2-container--default .select2-selection--single{height:42px;background:var(--soft2);border:1.5px solid var(--bd);border-radius:9px}
.select2-container--default .select2-selection--single .select2-selection__rendered{line-height:40px;padding-left:14px;color:var(--ink) !important;font-size:13.5px}
.select2-container--default .select2-selection--single .select2-selection__placeholder{color:var(--muted)}
.select2-container--default .select2-selection--single .select2-selection__arrow{height:40px;right:8px}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single{background:#fff;border-color:var(--brand);box-shadow:0 0 0 3px rgba(14,154,167,.14)}
.select2-dropdown{border-color:var(--bd);border-radius:9px;overflow:hidden}
.select2-results__option{color:var(--ink);font-size:13px;padding:8px 14px}
/* Dark highlight on hover/active + on the currently-selected option */
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted{background:var(--brand-dark);color:#fff}
.select2-container--default .select2-results__option[aria-selected=true]{background:var(--brand);color:#fff}
.select2-search--dropdown{padding:8px}
.select2-search--dropdown .select2-search__field{color:var(--ink);font-size:13px;padding:8px 10px;border:1.5px solid var(--bd);border-radius:8px;outline:none}
.select2-search--dropdown .select2-search__field:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(14,154,167,.14)}

/* ── Login tabs ──────────────────────────────────────────────────────────────
   Two ways in: Filing (agent + manifest type) and Accounts (reports only).

   A segmented control inside the card, matching the Air Export login: one tinted
   track, the active half lifted out in white. It reads as one choice rather than
   as navigation away from the card, which matters because both halves submit to
   the same place. Colours stay EFDI teal — only the proportions are borrowed. */
.login-tabs {
    display: flex;
    gap: 4px;
    margin: 0 0 20px;
    padding: 5px;
    background: #eef2f5;
    border-radius: 12px;
}
.login-tab {
    flex: 1;
    padding: 13px 10px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #5b6b76;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background .15s, color .15s, box-shadow .15s;
}
.login-tab:hover { color: #0A7A85; }
.login-tab.active {
    background: #fff;
    color: #0A7A85;
    font-weight: 700;
    box-shadow: 0 1px 4px rgba(20, 45, 55, .16);
}
/* Keyboard users get the same affordance as mouse users. */
.login-tab:focus-visible { outline: 2px solid #0E9AA7; outline-offset: 2px; }