/**
 * PRIME PRACTICE — app-auth-institutional.css
 * ═══════════════════════════════════════════════════════════════════
 * 2026-08-01 — Re-skins ONLY the tenant workspace landing (the page a
 * firm sees at primepractice.in/<firm> before login) and its login
 * modal, to match the Institutional Trust theme now used on the public
 * landing page: deep indigo #16225a + saffron #b57118 on ivory #faf8f3,
 * Source Serif 4 headings over Inter body.
 *
 * PURELY ADDITIVE. app.css is untouched — every rule here is scoped to
 * .auth-fullpage / .auth-fp-* / .workspace-* / .ws-badge, so nothing
 * inside the logged-in app is affected.
 *
 * TO ROLL BACK: delete the <link> to this file in app.html. The old
 * navy/gold auth screen returns exactly as it was.
 * ═══════════════════════════════════════════════════════════════════
 */

.auth-fullpage {
    --ai-ink: #16225a;
    --ai-ink-soft: #3a4470;
    --ai-muted: #5d6480;
    --ai-muted-2: #636a86;
    --ai-saffron: #b57118;
    --ai-gold: #e0b064;
    --ai-ivory: #faf8f3;
    --ai-alt: #f3efe6;
    --ai-surface: #fffdf9;
    --ai-line: #e2dbcd;
    --ai-line-strong: #cfc6b4;

    background: var(--ai-ivory);
    color: var(--ai-ink-soft);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ────── HEADER ────── */
.auth-fullpage .auth-fp-header {
    background: rgba(250, 248, 243, 0.86);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--ai-line-strong);
    box-shadow: 0 1px 0 rgba(22, 34, 90, 0.06);
}
.auth-fullpage .auth-fp-brand { color: var(--ai-ink); }
.auth-fullpage .auth-fp-logo-mark {
    background: var(--ai-ink);
    color: var(--ai-gold);
    border-radius: 4px;
    font-family: 'Source Serif 4', Georgia, serif;
    box-shadow: none;
}
.auth-fullpage .auth-fp-brand:hover .auth-fp-logo-mark { background: #1f2d75; }
.auth-fullpage .auth-fp-brand-text { font-family: 'Source Serif 4', Georgia, serif; font-weight: 600; }

.auth-fullpage .auth-fp-btn { border-radius: 4px; letter-spacing: 0.015em; }
.auth-fullpage .auth-fp-btn-ghost {
    background: transparent;
    border: 1px solid var(--ai-line-strong);
    color: var(--ai-ink-soft);
}
.auth-fullpage .auth-fp-btn-ghost:hover {
    background: rgba(22, 34, 90, 0.05);
    border-color: var(--ai-ink);
    color: var(--ai-ink);
}
.auth-fullpage .auth-fp-btn-primary {
    background: var(--ai-ink);
    color: #fff;
    border: none;
    box-shadow: 0 2px 6px rgba(22, 34, 90, 0.18);
}
.auth-fullpage .auth-fp-btn-primary:hover {
    background: #1f2d75;
    box-shadow: 0 8px 20px rgba(22, 34, 90, 0.26);
    color: #fff;
}

/* ────── HERO ────── */
.auth-fullpage .auth-fp-hero::before {
    background-image:
        linear-gradient(rgba(22, 34, 90, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(22, 34, 90, 0.05) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 78%);
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 78%);
}
.auth-fullpage .auth-blob { opacity: 0.7; filter: blur(90px); }
.auth-fullpage .auth-blob-1 { background: #e8e2d2; }
.auth-fullpage .auth-blob-2 { background: #e2e4ee; }
.auth-fullpage .auth-blob-3 { background: #f0e4cf; opacity: 0.5; }

.auth-fullpage .workspace-eyebrow {
    background: transparent;
    border: 1px solid var(--ai-line-strong);
    border-radius: 3px;
    color: #4a5273;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.68rem;
    font-weight: 700;
}
.auth-fullpage .workspace-eyebrow .pulse-dot { background: var(--ai-saffron); }

.auth-fullpage .workspace-greeting {
    color: var(--ai-muted);
    font-size: 0.98rem;
    font-weight: 500;
}
.auth-fullpage .workspace-hero {
    font-family: 'Source Serif 4', Georgia, serif;
    font-weight: 600;
    letter-spacing: -0.018em;
    line-height: 1.12;
    color: var(--ai-ink);
}
/* The old rule paints the firm name with a gold gradient and transparent
   fill — reset both, then set solid indigo. */
.auth-fullpage .workspace-hero .firm-name-text {
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    -webkit-text-fill-color: currentColor;
    color: var(--ai-ink);
    animation: none;
}
/* A saffron rule under the firm name — the theme's signature ornament. */
.auth-fullpage .workspace-hero::after {
    content: '';
    display: block;
    width: 56px;
    height: 2px;
    background: var(--ai-saffron);
    margin: 22px auto 0;
}

.auth-fullpage .workspace-sub { color: var(--ai-muted); font-size: 1rem; }
.auth-fullpage .workspace-sub strong { color: var(--ai-ink); font-weight: 700; }

.auth-fullpage .workspace-time {
    background: var(--ai-surface);
    border: 1px solid var(--ai-line);
    border-radius: 5px;
    box-shadow: 0 1px 0 var(--ai-line);
}
.auth-fullpage .workspace-time .time-row { color: var(--ai-ink); }
.auth-fullpage .workspace-time .time-row-muted { color: var(--ai-muted); }

.auth-fullpage .ws-badge {
    background: var(--ai-surface);
    border: 1px solid var(--ai-line-strong);
    border-radius: 3px;
    color: var(--ai-ink-soft);
    font-weight: 500;
}
.auth-fullpage .ws-badge:hover { border-color: var(--ai-saffron); color: var(--ai-ink); }

.auth-fullpage .auth-fp-cta {
    background: var(--ai-ink);
    color: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(22, 34, 90, 0.22);
}
.auth-fullpage .auth-fp-cta:hover {
    background: #1f2d75;
    box-shadow: 0 10px 26px rgba(22, 34, 90, 0.3);
}

/* ────── FEATURES ────── */
.auth-fullpage .auth-fp-features {
    background: var(--ai-alt);
    border-top: 1px solid var(--ai-line);
}
.auth-fullpage .auth-fp-section-eyebrow { color: var(--ai-saffron); }
.auth-fullpage .auth-fp-section-title {
    font-family: 'Source Serif 4', Georgia, serif;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--ai-ink);
}
.auth-fullpage .auth-fp-section-head::after {
    content: '';
    display: block;
    width: 56px;
    height: 2px;
    background: var(--ai-saffron);
    margin: 20px auto 0;
}
.auth-fullpage .auth-fp-feat {
    background: var(--ai-surface);
    border: 1px solid var(--ai-line);
    border-radius: 5px;
}
.auth-fullpage .auth-fp-feat:hover {
    background: var(--ai-surface);
    border-color: var(--ai-line-strong);
    box-shadow: 0 12px 28px rgba(22, 34, 90, 0.1);
}
.auth-fullpage .auth-fp-feat-icon {
    background: #f6f2ea;
    border: 1px solid var(--ai-line-strong);
    border-radius: 4px;
    color: var(--ai-saffron);
}
.auth-fullpage .auth-fp-feat-title { color: var(--ai-ink); }
.auth-fullpage .auth-fp-feat-desc { color: var(--ai-muted); }

/* ────── FOOTER ────── */
.auth-fullpage .auth-fp-footer {
    background: var(--ai-ink);
    border-top: 0;
    padding: 34px 28px 38px;
}
.auth-fullpage .workspace-footer::before {
    background: linear-gradient(90deg, transparent, rgba(224, 176, 100, 0.75), transparent);
}
.auth-fullpage .workspace-footer span {
    color: #c3c9de;
    font-style: normal;
    font-size: 0.82rem;
}
.auth-fullpage .workspace-footer a { color: var(--ai-gold); font-weight: 600; }
.auth-fullpage .workspace-footer a:hover { text-decoration: underline; }

/* ══════════════════════════════════════════════════════════════════
   LOGIN MODAL — flipped from the dark panel to ivory paper
   ══════════════════════════════════════════════════════════════════ */
.auth-fp-modal-overlay { background: rgba(22, 34, 90, 0.5); }
.auth-fp-modal {
    background: var(--ai-surface, #fffdf9);
    border: 1px solid #e2dbcd;
    border-radius: 7px;
    box-shadow: 0 34px 80px rgba(22, 34, 90, 0.3);
}
.auth-fp-modal-close {
    background: #f6f2ea;
    border: 1px solid #e2dbcd;
    color: #5d6480;
    border-radius: 4px;
}
.auth-fp-modal-close:hover { background: #ece6da; color: #16225a; }

.auth-fp-modal h3,
.auth-fp-modal h4 {
    color: #16225a;
    font-family: 'Source Serif 4', Georgia, serif;
    font-weight: 600;
}
.auth-fp-modal .form-label { color: #5d6480; letter-spacing: 0.05em; }
.auth-fp-modal .text-muted { color: #5d6480; }
.auth-fp-modal hr { border-color: #e2dbcd; }

.auth-fp-modal .input-group-text.bg-light {
    background: #f6f2ea !important;
    border: 1px solid #d9d2c2 !important;
    border-right: none !important;
    color: #b57118 !important;
}
.auth-fp-modal .input-group-text.bg-light i { color: #b57118 !important; }
.auth-fp-modal .form-control.bg-light,
.auth-fp-modal .form-select.bg-light {
    background: #ffffff !important;
    border: 1px solid #d9d2c2 !important;
    color: #16225a !important;
}
.auth-fp-modal .input-group .form-control.bg-light { border-left: none !important; }
.auth-fp-modal .form-control.bg-light::placeholder { color: #9aa0b3; }
.auth-fp-modal .form-control.bg-light:focus,
.auth-fp-modal .form-select.bg-light:focus {
    background: #ffffff !important;
    border-color: #16225a !important;
    box-shadow: 0 0 0 3px rgba(22, 34, 90, 0.12) !important;
    outline: none !important;
}
.auth-fp-modal .input-group:focus-within .input-group-text.bg-light { border-color: #16225a !important; }
.auth-fp-modal small,
.auth-fp-modal .form-text { color: #5d6480 !important; }

.auth-fp-modal .btn-primary {
    background: #16225a !important;
    border: none !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    border-radius: 4px !important;
    box-shadow: 0 2px 8px rgba(22, 34, 90, 0.22) !important;
}
.auth-fp-modal .btn-primary:hover {
    background: #1f2d75 !important;
    box-shadow: 0 8px 22px rgba(22, 34, 90, 0.3) !important;
    color: #ffffff !important;
}
.auth-fp-modal .btn-success {
    background: #2c6238 !important;
    border: none !important;
    color: #ffffff !important;
    font-weight: 700 !important;
}
.auth-fp-modal .btn-outline-danger {
    background: #fbeceb !important;
    border: 1px solid #eec7c3 !important;
    color: #9d2f26 !important;
}
.auth-fp-modal .btn-outline-danger:hover {
    background: #f6dedb !important;
    border-color: #d98d84 !important;
    color: #7f251d !important;
}
.auth-fp-modal .btn-outline-success {
    background: #eaf3ec !important;
    border: 1px solid #c8ddcd !important;
    color: #2c6238 !important;
}
.auth-fp-modal .btn-outline-success:hover {
    background: #dcebe0 !important;
    border-color: #97bda1 !important;
    color: #234f2d !important;
}
.auth-fp-modal .btn-link { color: #5d6480 !important; }
.auth-fp-modal .btn-link:hover { color: #16225a !important; }
.auth-fp-modal #authErrorMsg { background: #fbeceb; border-radius: 4px; }
.auth-fp-modal .text-success { color: #2c6238 !important; }
.auth-fp-modal .text-danger { color: #9d2f26 !important; }

.auth-fp-forgot-link { color: #5d6480; }
.auth-fp-forgot-link:hover { color: #16225a; text-decoration-color: #16225a; }

/* Role toggle (CA / Staff / Client) — inline-styled in app.html */
.auth-fp-modal .pp-role-toggle { background: #f0ebe0; border-radius: 5px; }
.auth-fp-modal .pp-role-btn { color: #5d6480; border-radius: 3px; }
.auth-fp-modal .pp-role-btn:hover { color: #16225a; background: rgba(255, 255, 255, 0.7); }
.auth-fp-modal .pp-role-btn.active {
    background: #fffdf9;
    color: #16225a;
    box-shadow: 0 1px 3px rgba(22, 34, 90, 0.12), 0 0 0 1px #cfc6b4;
}
.auth-fp-modal .pp-role-btn.active i { color: #b57118; }

/* The loading overlay sits on ivory too, and its spinner used --ca-gold. */
#loadingOverlay { background: rgba(250, 248, 243, 0.96) !important; }