/*
  Login page styling - hand-written CSS reproducing the rendered result of
  production-app's Tailwind v4 utility classes on src/app/login/page.tsx.
  Token values copied verbatim from production-app/src/app/globals.css so
  colors match exactly (see ProductionDB/Auth/Technical.md "UI parity notes").

  Light-only, deliberately: this page has Layout = null (no _Layout.cshtml,
  no #app-theme-toggle, no pre-hydration html.dark script), so there is no
  in-app dark-mode toggle available here. A previous @media
  (prefers-color-scheme: dark) block used to flip these vars off the OS
  setting instead - the same "auto-dark" bug fixed in site.css - which
  meant an OS-dark machine saw a half-dark login card with no way to turn
  it off. Removed rather than wired to a toggle: adding toggle
  infrastructure to an unauthenticated page isn't worth it for one card.
*/
:root {
    --pc-card: #FFFFFF;
    --pc-tile: #F5F5F5;
    --pc-input: #FFFFFF;
    --pc-line: #E0E0E0;
    --pc-fg: #2B2B2B;
    --pc-fg-sec: #666666;
    --pc-fg-muted: #888888;
    --pc-brand: #E84040;
    --pc-brand-strong: #C83030;
}

.pc-login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to bottom right, #2B2B2B, #1a1a1a);
    /* Matches the global font stack in site.css exactly (production-app's
       actual body { font-family } - see that file's header comment) - this
       page has Layout = null and never loads site.css, so it needs its own
       copy rather than inheriting one. Previously used Tailwind's generic
       default sans stack, which is NOT what production-app actually
       declares - a real mismatch, not a deliberate deviation. */
    font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    padding: 1rem;
}

.pc-login-card {
    width: 100%;
    max-width: 28rem;
    background: var(--pc-card);
    border-radius: 1rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

.pc-login-card__accent {
    height: 0.375rem;
    background: var(--pc-brand);
}

.pc-login-card__body {
    padding: 2.5rem;
}

.pc-login-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 2rem;
}

.pc-login-logo img {
    height: 4rem;
    width: auto;
    object-fit: contain;
    margin-bottom: 0.75rem;
}

.pc-login-logo p {
    color: var(--pc-fg-sec);
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin: 0;
}

.pc-login-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--pc-fg);
    text-align: center;
    margin-bottom: 1.5rem;
}

.pc-field {
    margin-bottom: 1.25rem;
}

.pc-field label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--pc-fg);
    margin-bottom: 0.5rem;
}

.pc-field input[type="text"],
.pc-field input[type="password"] {
    width: 100%;
    padding: 1rem 1rem;
    border-radius: 0.75rem;
    border: 2px solid var(--pc-line);
    color: var(--pc-fg);
    background: var(--pc-input);
    font-size: 1rem;
    box-sizing: border-box;
}

.pc-field input:focus {
    outline: none;
    border-color: var(--pc-brand);
}

.pc-field-password-wrap {
    position: relative;
}

.pc-field-password-wrap input {
    padding-right: 3rem;
}

.pc-reveal-btn {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0.5rem;
    margin: auto 0;
    height: 2.25rem;
    width: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--pc-fg-muted);
    background: transparent;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    touch-action: manipulation;
}

.pc-reveal-btn:hover {
    color: var(--pc-brand);
}

.pc-save-login {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    user-select: none;
    cursor: pointer;
    margin-bottom: 1.25rem;
}

.pc-save-login input {
    width: 1rem;
    height: 1rem;
    accent-color: var(--pc-brand);
}

/* Forgot-password link beside "Save login details", and the link-style
   buttons on the ForgotPassword / ResetPassword pages. */
.pc-login-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    margin-bottom: 1.25rem;
}

.pc-login-options .pc-save-login {
    margin-bottom: 0;
}

.pc-link-btn {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--pc-brand);
    text-decoration: none;
    cursor: pointer;
}

.pc-link-btn:hover:not(:disabled) {
    color: var(--pc-brand-strong);
    text-decoration: underline;
}

.pc-link-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.pc-link-row {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    margin-top: 1rem;
}

.pc-link-row--center {
    justify-content: center;
    margin-top: 1.5rem;
}

.pc-help-text {
    font-size: 0.875rem;
    color: var(--pc-fg-sec);
    margin: 0 0 1.25rem;
}

.pc-success {
    display: flex;
    align-items: center;
    padding: 0.75rem;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 0.5rem;
    margin-bottom: 1.25rem;
}

.pc-success p {
    font-size: 0.875rem;
    color: #166534;
    margin: 0;
    overflow-wrap: anywhere;
}

.pc-error {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 0.5rem;
    margin-bottom: 1.25rem;
}

.pc-error svg {
    width: 1rem;
    height: 1rem;
    color: var(--pc-brand);
    flex-shrink: 0;
}

.pc-error p {
    font-size: 0.875rem;
    color: #b91c1c;
    margin: 0;
}

.pc-submit-btn {
    width: 100%;
    padding: 1rem;
    border-radius: 0.75rem;
    background: var(--pc-brand);
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 56px;
    transition: background 0.15s ease;
}

.pc-submit-btn:hover:not(:disabled) {
    background: var(--pc-brand-strong);
}

.pc-submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.pc-login-footer {
    padding: 1rem 2.5rem;
    background: var(--pc-tile);
    border-top: 1px solid var(--pc-line);
}

.pc-login-footer p {
    font-size: 0.75rem;
    color: var(--pc-fg-muted);
    text-align: center;
    margin: 0;
}

.pc-spin {
    animation: pc-spin 1s linear infinite;
    width: 1rem;
    height: 1rem;
}

@keyframes pc-spin {
    to { transform: rotate(360deg); }
}

/* Location picker modal */
.pc-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    padding: 1rem;
}

.pc-modal-overlay.pc-modal-open {
    display: flex;
}

.pc-modal {
    width: 100%;
    max-width: 32rem;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    background: var(--pc-card);
    border-radius: 1rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

.pc-modal-header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--pc-line);
    flex-shrink: 0;
}

.pc-modal-header h2 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--pc-fg);
    margin: 0;
}

.pc-modal-header p {
    font-size: 0.875rem;
    color: var(--pc-fg-muted);
    margin: 0.125rem 0 0;
}

.pc-modal-body {
    flex: 1;
    min-height: 0;
    padding: 1rem 1.5rem;
    overflow-y: auto;
}

.pc-modal-search {
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    border: 2px solid var(--pc-line);
    background: var(--pc-input);
    color: var(--pc-fg);
    font-size: 1rem;
    box-sizing: border-box;
    margin-bottom: 0.75rem;
}

.pc-company-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.pc-company-option {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    border: 2px solid var(--pc-line);
    background: var(--pc-input);
    color: var(--pc-fg);
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 600;
}

.pc-company-option .pc-company-desc {
    /* Inline (CompShort — CompanyName on one line), matching source's
       SearchSelect `inline` variant used for this exact picker. */
    font-weight: 400;
    font-size: 0.85rem;
    color: var(--pc-fg-muted);
}

.pc-company-option.pc-selected {
    border-color: var(--pc-brand);
    background: color-mix(in srgb, var(--pc-brand) 8%, var(--pc-input));
}

.pc-company-empty {
    color: var(--pc-fg-muted);
    font-size: 0.875rem;
    padding: 1rem 0;
}

.pc-modal-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--pc-line);
    flex-shrink: 0;
}