/* wharf_management custom login page styles
 *
 * Scope: scoped to .wm-* class names so we do not stomp on Frappe's
 *        default login / signup / forgot panels (which keep their own
 *        .page-card / .for-* classes).
 *
 * Loads on /login only, via <link> in our shadow www/login.html template.
 * The file lives in wharf_management/public/css/login.css and is served
 * directly from /assets/wharf_management/css/login.css (the bench symlinks
 * sites/assets/wharf_management -> apps/wharf_management/wharf_management/public).
 */

:root {
    --wm-navy: #0b2540;
    --wm-navy-2: #13315c;
    --wm-cyan: #2dd4bf;
    --wm-cyan-2: #14b8a6;
    --wm-gold: #d4af37;     /* metallic gold, used for the bold big letters */
    --wm-gold-2: #b8941f;   /* darker gold for hover / contrast on light bg */
    --wm-paper: #f8fafc;
    --wm-ink: #0f172a;
    --wm-muted: #64748b;
    --wm-line: #e2e8f0;
    --wm-error: #dc2626;
    --wm-error-bg: #fef2f2;
    --wm-radius: 0px; /* industrial square-corner language used across the React tally pages */
}

/* ─── full-viewport reset for our /login page ───
   Frappe's base template (templates/web.html) wraps page_content in a
   `<main class="container">` + `.page-content-wrapper` + empty `.page-breadcrumbs`
   and `.page-header-wrapper` blocks (with full_width=True, the `container` class
   drops off the <main> — see www/login.py). To make the split-screen reach edge to
   edge, neutralize the empty Frappe wrappers (breadcrumbs, page-header) and force
   the wrappers that remain to span the full viewport with no padding. */
body:has(.wm-login-shell) { background: var(--wm-paper); }

#page-login.wm-in-login-page,
#page-login:has(.wm-login-shell) {
    margin: 0;
    padding: 0;
}

#page-login:has(.wm-login-shell) > .page-content-wrapper {
    margin: 0;
    padding: 0;
    border: 0;
}

/* The empty breadcrumbs + page-header-wrapper would otherwise add vertical space. */
#page-login:has(.wm-login-shell) .page-breadcrumbs,
#page-login:has(.wm-login-shell) .page-header-wrapper {
    display: none !important;
}

/* full_width=True removes the `container` class on <main>; ensure if it's
   left for any reason (e.g. caching), our <main> still spans full width. */
#page-login:has(.wm-login-shell) main.container,
#page-login:has(.wm-login-shell) .page_content {
    width: 100%;
    max-width: 100% !important;
    margin: 0;
    padding: 0;
}

/* ─── layout shell: hero on the left, login pane on the right ─── */
.wm-login-shell {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    min-height: 100vh;
    margin: 0;
    background: var(--wm-paper);
}

/* ─── HERO ─── */
.wm-hero {
    position: relative;
    overflow: hidden;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 56px 48px 36px;
    background:
        radial-gradient(120% 80% at 0% 0%, rgba(45, 212, 191, 0.18), transparent 55%),
        radial-gradient(80% 60% at 100% 100%, rgba(19, 49, 92, 0.55), transparent 60%),
        linear-gradient(160deg, var(--wm-navy) 0%, var(--wm-navy-2) 70%);
}

/* faint blueprint-grid overlay, no image asset required */
.wm-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
    background-size: 44px 44px;
    pointer-events: none;
}
.wm-hero::after {
    content: "";
    position: absolute;
    top: -10%;
    right: -15%;
    width: 60%;
    height: 60%;
    background: radial-gradient(circle, rgba(45, 212, 191, 0.35), transparent 65%);
    filter: blur(40px);
    pointer-events: none;
}

.wm-hero-content { position: relative; z-index: 1; max-width: 30rem; }

.wm-hero-badge {
    display: inline-block;
    padding: 6px 12px;
    border: 1px solid var(--wm-gold);
    border-radius: var(--wm-radius);
    color: var(--wm-gold);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 28px;
}

.wm-hero-title {
    font-size: clamp(28px, 3vw, 42px);
    line-height: 1.15;
    font-weight: 700;
    margin: 0 0 18px;
    letter-spacing: -0.01em;
    color: var(--wm-gold);
}

.wm-hero-tagline {
    font-size: 15px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.82);
    margin: 0 0 32px;
}

.wm-feature-list { list-style: none; padding: 0; margin: 0; }
.wm-feature-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9);
}
.wm-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: var(--wm-gold);
    color: var(--wm-navy);
    border-radius: var(--wm-radius);
    font-size: 13px;
    font-weight: 700;
}

.wm-hero-footer {
    position: relative;
    z-index: 1;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0.04em;
}

/* ─── RIGHT PANE ─── */
.wm-pane {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
}
/* The other for-* panels (signup, forgot, email-link) inherit Frappe's
   default .page-card styling; only .wm-login-card is our restyled card. */

/* ─── LOGIN CARD ─── */
.wm-card-shell {
    width: 100%;
    max-width: 420px;
    animation: wm-fade-in 600ms ease-out both;
}
@keyframes wm-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .wm-card-shell { animation: none; }
}

.wm-card-inner {
    background: #fff;
    border: 1px solid var(--wm-line);
    border-radius: var(--wm-radius);
    padding: 36px 32px 28px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04),
                0 8px 24px -16px rgba(15, 23, 42, 0.18);
}

.wm-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }
.wm-logo { height: 28px; width: auto; max-width: 36px; object-fit: contain; }
.wm-brand-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--wm-gold);
    letter-spacing: -0.01em;
}

.wm-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--wm-gold);
    margin: 0 0 6px;
    letter-spacing: -0.01em;
}
.wm-subtitle {
    font-size: 13px;
    color: var(--wm-muted);
    margin: 0 0 22px;
    line-height: 1.5;
}

/* ─── error banner ─── */
.wm-login-error {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    margin-bottom: 18px;
    background: var(--wm-error-bg);
    border-left: 3px solid var(--wm-error);
    color: var(--wm-error);
    font-size: 13px;
    border-radius: var(--wm-radius);
}
.wm-login-error[hidden] { display: none; }
.wm-login-error-text { flex: 1; }

/* ─── fields ─── */
.wm-field { margin-bottom: 16px; }
.wm-label {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--wm-ink);
    letter-spacing: 0.01em;
}
.wm-input {
    width: 100%;
    padding: 10px 12px;
    font-size: 14px;
    color: var(--wm-ink);
    background: #fff;
    border: 1px solid var(--wm-line);
    border-radius: var(--wm-radius);
    outline: none;
    transition: border-color 160ms ease, box-shadow 160ms ease;
    box-sizing: border-box;
}
.wm-input::placeholder { color: #94a3b8; }
.wm-input:focus {
    border-color: var(--wm-cyan);
    box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.18);
}
.wm-field.wm-invalid .wm-input { border-color: var(--wm-error); }
.wm-field-error {
    margin: 6px 0 0;
    font-size: 12px;
    color: var(--wm-error);
    min-height: 14px;
}
.wm-field-error:empty { min-height: 0; }

/* password field with toggle */
.wm-password-wrap { position: relative; }
.wm-password-wrap .wm-input { padding-right: 42px; }
.wm-toggle-password {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--wm-muted);
    border-radius: var(--wm-radius);
}
.wm-toggle-password:hover { color: var(--wm-ink); }
.wm-toggle-password:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.25);
}

/* ─── primary & secondary buttons ─── */
.wm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 11px 16px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    border: 1px solid transparent;
    border-radius: var(--wm-radius);
    cursor: pointer;
    text-decoration: none;
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, opacity 160ms ease;
    box-sizing: border-box;
}
.wm-btn-primary {
    background: var(--wm-navy);
    color: #fff;
}
.wm-btn-primary:hover { background: var(--wm-navy-2); }
.wm-btn-primary:active { transform: translateY(0.5px); }
.wm-btn-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.wm-btn-secondary {
    background: #fff;
    color: var(--wm-ink);
    border-color: var(--wm-line);
}
.wm-btn-secondary:hover { background: var(--wm-paper); }
.wm-ldap-btn, .wm-email-link-btn { margin-top: 10px; }

/* spinner */
.wm-btn-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 50%;
    display: none;
    animation: wm-spin 700ms linear infinite;
}
@keyframes wm-spin { to { transform: rotate(360deg); } }
.wm-btn[data-loading="true"] .wm-btn-label { opacity: 0.7; }
.wm-btn[data-loading="true"] .wm-btn-spinner { display: inline-block; }
@media (prefers-reduced-motion: reduce) {
    .wm-btn-spinner { animation-duration: 1.5s; }
}

/* ─── forgot link ─── */
.wm-form-actions { margin: 18px 0 8px; }
.wm-forgot-link { text-align: right; margin-top: 10px; }
.wm-forgot-link a {
    font-size: 12px;
    color: var(--wm-cyan-2);
    text-decoration: none;
}
.wm-forgot-link a:hover { text-decoration: underline; }

/* ─── divider (above social row) ─── */
.wm-divider {
    position: relative;
    text-align: center;
    margin: 20px 0 14px;
    color: var(--wm-muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.wm-divider::before,
.wm-divider::after {
    content: "";
    position: absolute;
    top: 50%;
    width: calc(50% - 70px);
    height: 1px;
    background: var(--wm-line);
}
.wm-divider::before { left: 0; }
.wm-divider::after { right: 0; }
.wm-divider span { background: #fff; padding: 0 12px; }

/* ─── social row ─── */
.wm-social-row { display: flex; gap: 10px; }
.wm-social-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 1;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid var(--wm-line);
    border-radius: var(--wm-radius);
    font-size: 13px;
    color: var(--wm-ink);
    text-decoration: none;
    transition: background 160ms ease;
}
.wm-social-btn:hover { background: var(--wm-paper); }
.wm-social-btn img { width: 16px; height: 16px; }

/* ─── signup prompt ─── */
.wm-signup-prompt {
    text-align: center;
    margin-top: 22px;
    font-size: 13px;
    color: var(--wm-muted);
}
.wm-signup-prompt a {
    color: var(--wm-navy);
    font-weight: 600;
    text-decoration: none;
    margin-left: 4px;
}
.wm-signup-prompt a:hover { text-decoration: underline; }

/* Secondary help line under the card — points integrators at the public API
   docs, which are readable without an account (see BYPASS_PATHS in
   credit/security/auth.py). Deliberately quieter than the signup prompt. */
.wm-login-help {
    text-align: center;
    margin-top: 14px;
    font-size: 12px;
    color: var(--wm-muted);
}
.wm-login-help a {
    color: var(--wm-navy);
    font-weight: 500;
    text-decoration: none;
    margin-left: 4px;
}
.wm-login-help a:hover { text-decoration: underline; }

/* ─── responsive: collapse hero on small screens ─── */
@media (max-width: 1023px) {
    .wm-login-shell { grid-template-columns: 1fr; }
    .wm-hero { display: none; }
    .wm-pane { padding: 32px 20px; }
}
@media (max-width: 480px) {
    .wm-card-inner { padding: 28px 20px 22px; }
    .wm-title { font-size: 20px; }
}

/* When a non-login panel becomes visible (via Frappe's login.bundle.js
   toggling .for-signup/.for-forgot/.for-login-with-email-link), it shares
   the same .wm-pane container; center it nicely. */
.wm-pane .login-content.page-card {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
}