/* =====================================================================
   TaxComm Pro — dark themed authentication shell
   Loaded globally and scoped via .auth-shell / .auth-card class names.
   ===================================================================== */

/* ---------- Page shell ---------- */
.auth-shell {
    position: relative;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    background: radial-gradient(ellipse 90% 65% at 50% 0%, #112a4d 0%, #060c1c 55%, #02030a 100%);
    color: #e2e8f0;
    overflow: hidden;
    font-family: 'Inter', 'Montserrat', system-ui, -apple-system, sans-serif;
}

.auth-shell-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    pointer-events: none;
    z-index: 0;
    will-change: transform;
}

.auth-shell-glow-1 {
    width: 540px; height: 540px;
    background: radial-gradient(circle, rgba(40, 113, 184, 0.55) 0%, transparent 70%);
    top: -180px; left: -140px;
}

.auth-shell-glow-2 {
    width: 680px; height: 680px;
    background: radial-gradient(circle, rgba(88, 168, 151, 0.65) 0%, transparent 70%);
    bottom: -240px; right: -180px;
}

.auth-shell-glow-3 {
    width: 560px; height: 560px;
    background: radial-gradient(circle, rgba(163, 198, 91, 0.45) 0%, transparent 65%);
    top: 30%; left: 50%; transform: translateX(-50%);
}

.auth-shell-glow-4 {
    width: 480px; height: 480px;
    background: radial-gradient(circle, rgba(168, 204, 82, 0.35) 0%, transparent 65%);
    bottom: -120px; left: 10%;
}

.auth-shell-glow-5 {
    width: 360px; height: 360px;
    background: radial-gradient(circle, rgba(74, 157, 138, 0.4) 0%, transparent 70%);
    top: 60%; right: 8%;
}

.auth-shell-grid {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(ellipse 60% 50% at 50% 50%, #000 30%, transparent 90%);
    mask-image: radial-gradient(ellipse 60% 50% at 50% 50%, #000 30%, transparent 90%);
}

.auth-shell-body {
    position: relative;
    z-index: 1;
    flex: 1 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 16px;
}

/* ---------- Floating particles (matches landing page) ---------- */
.auth-shell-particles {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

@keyframes auth-rise-a {
    0%   { transform: translate(0px,    0px); opacity: 0; }
    8%   { opacity: .9; }
    30%  { transform: translate(18px,  -110px); }
    55%  { transform: translate(-12px, -230px); }
    80%  { transform: translate(22px,  -340px); }
    92%  { opacity: .4; }
    100% { transform: translate(-6px,  -430px); opacity: 0; }
}

@keyframes auth-rise-b {
    0%   { transform: translate(0px,    0px); opacity: 0; }
    8%   { opacity: .8; }
    30%  { transform: translate(-22px,  -90px); }
    55%  { transform: translate(16px,  -200px); }
    80%  { transform: translate(-18px, -310px); }
    92%  { opacity: .3; }
    100% { transform: translate(10px,  -400px); opacity: 0; }
}

@keyframes auth-rise-c {
    0%   { transform: translate(0px,    0px); opacity: 0; }
    8%   { opacity: .7; }
    35%  { transform: translate(10px,  -130px); }
    60%  { transform: translate(-20px, -260px); }
    85%  { opacity: .35; }
    100% { transform: translate(14px,  -390px); opacity: 0; }
}

.auth-pt {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

/* Particles get a soft glow halo so the lime/teal ones read as 'green pixels' rising */
.auth-pt {
    box-shadow: 0 0 6px currentColor;
}

.auth-pt-1  { width: 4px; height: 4px; bottom:  2%; left: 12%; background: rgba(168, 204, 82, .95); color: rgba(168, 204, 82, .8);  animation: auth-rise-a 5s   ease-in-out infinite 0s;   }
.auth-pt-2  { width: 3px; height: 3px; bottom:  5%; left: 22%; background: rgba(255, 255, 255, .6); color: rgba(255, 255, 255, .4); animation: auth-rise-b 7s   ease-in-out infinite .8s;  }
.auth-pt-3  { width: 5px; height: 5px; bottom:  1%; left: 33%; background: rgba(74, 157, 138, .85); color: rgba(74, 157, 138, .7);  animation: auth-rise-c 6s   ease-in-out infinite 1.5s; }
.auth-pt-4  { width: 4px; height: 4px; bottom:  8%; left: 45%; background: rgba(168, 204, 82, .8);  color: rgba(168, 204, 82, .6);  animation: auth-rise-a 8s   ease-in-out infinite 2.2s; }
.auth-pt-5  { width: 6px; height: 6px; bottom:  3%; left: 55%; background: rgba(255, 255, 255, .5); color: rgba(255, 255, 255, .3); animation: auth-rise-b 5.5s ease-in-out infinite .4s;  }
.auth-pt-6  { width: 5px; height: 5px; bottom:  6%; left: 67%; background: rgba(74, 157, 138, .8);  color: rgba(74, 157, 138, .65); animation: auth-rise-c 7.5s ease-in-out infinite 3s;   }
.auth-pt-7  { width: 3px; height: 3px; bottom:  2%; left: 76%; background: rgba(168, 204, 82, .9);  color: rgba(168, 204, 82, .7);  animation: auth-rise-a 6.5s ease-in-out infinite 1s;   }
.auth-pt-8  { width: 5px; height: 5px; bottom:  9%; left: 85%; background: rgba(255, 255, 255, .45);color: rgba(255, 255, 255, .3); animation: auth-rise-b 9s   ease-in-out infinite 1.8s; }
.auth-pt-9  { width: 4px; height: 4px; bottom:  4%; left: 92%; background: rgba(168, 204, 82, .8);  color: rgba(168, 204, 82, .6);  animation: auth-rise-c 5s   ease-in-out infinite 2.6s; }
.auth-pt-10 { width: 3px; height: 3px; bottom:  7%; left:  8%; background: rgba(74, 157, 138, .7);  color: rgba(74, 157, 138, .55); animation: auth-rise-b 8s   ease-in-out infinite .2s;  }
.auth-pt-11 { width: 5px; height: 5px; bottom:  1%; left: 50%; background: rgba(168, 204, 82, .75); color: rgba(168, 204, 82, .55); animation: auth-rise-a 6s   ease-in-out infinite 3.5s; }
.auth-pt-12 { width: 4px; height: 4px; bottom:  5%; left: 40%; background: rgba(255, 255, 255, .55);color: rgba(255, 255, 255, .35);animation: auth-rise-c 7s   ease-in-out infinite 4.2s; }
/* extra greens to push the lime/teal accent further */
.auth-pt-13 { width: 4px; height: 4px; bottom:  3%; left: 17%; background: rgba(168, 204, 82, .85); color: rgba(168, 204, 82, .65); animation: auth-rise-c 6.8s ease-in-out infinite 1.2s; }
.auth-pt-14 { width: 3px; height: 3px; bottom:  6%; left: 28%; background: rgba(74, 157, 138, .85); color: rgba(74, 157, 138, .65); animation: auth-rise-a 7.4s ease-in-out infinite 2.8s; }
.auth-pt-15 { width: 5px; height: 5px; bottom:  2%; left: 60%; background: rgba(168, 204, 82, .9);  color: rgba(168, 204, 82, .75); animation: auth-rise-b 6.2s ease-in-out infinite .9s;  }
.auth-pt-16 { width: 6px; height: 6px; bottom:  8%; left: 72%; background: rgba(168, 204, 82, .7);  color: rgba(168, 204, 82, .55); animation: auth-rise-c 8.5s ease-in-out infinite 4.5s; }
.auth-pt-17 { width: 4px; height: 4px; bottom:  4%; left: 38%; background: rgba(74, 157, 138, .8);  color: rgba(74, 157, 138, .6);  animation: auth-rise-a 6.5s ease-in-out infinite 3.3s; }
.auth-pt-18 { width: 3px; height: 3px; bottom:  9%; left: 80%; background: rgba(168, 204, 82, .8);  color: rgba(168, 204, 82, .6);  animation: auth-rise-b 7.8s ease-in-out infinite 1.6s; }
.auth-pt-19 { width: 5px; height: 5px; bottom:  1%; left: 18%; background: rgba(74, 157, 138, .75); color: rgba(74, 157, 138, .55); animation: auth-rise-a 5.8s ease-in-out infinite 2.1s; }
.auth-pt-20 { width: 4px; height: 4px; bottom:  6%; left: 88%; background: rgba(168, 204, 82, .85); color: rgba(168, 204, 82, .65); animation: auth-rise-c 7.2s ease-in-out infinite .6s;  }
.auth-pt-21 { width: 3px; height: 3px; bottom:  3%; left: 65%; background: rgba(168, 204, 82, .9);  color: rgba(168, 204, 82, .7);  animation: auth-rise-b 6.6s ease-in-out infinite 3.8s; }
.auth-pt-22 { width: 5px; height: 5px; bottom:  7%; left: 95%; background: rgba(74, 157, 138, .8);  color: rgba(74, 157, 138, .6);  animation: auth-rise-c 8.2s ease-in-out infinite 2.4s; }

.auth-shell-footer {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(226, 232, 240, 0.55);
    background-color: rgba(8, 12, 24, 0.55);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.4px;
}

/* ---------- Glassmorphic dark card ---------- */
.auth-card {
    position: relative;
    background: linear-gradient(160deg, rgba(20, 38, 68, 0.62) 0%, rgba(8, 12, 28, 0.78) 100%);
    backdrop-filter: blur(28px) saturate(160%);
    -webkit-backdrop-filter: blur(28px) saturate(160%);
    border-radius: 20px;
    box-shadow:
        0 30px 60px -20px rgba(0, 0, 0, 0.7),
        0 18px 36px -18px rgba(40, 113, 184, 0.35),
        0 0 0 1px rgba(255, 255, 255, 0.05) inset;
    overflow: hidden;
    color: #e2e8f0;
}

@media (min-width: 640px) {
    .auth-card { border-radius: 24px; }
}

.auth-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, rgba(40, 113, 184, 0.55), rgba(255, 255, 255, 0.03) 35%, rgba(255, 255, 255, 0.03) 65%, rgba(88, 168, 151, 0.5));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 1;
}

.auth-card-glow {
    position: absolute;
    inset: -50%;
    background: radial-gradient(circle at 30% 0%, rgba(40, 113, 184, 0.28), transparent 55%);
    pointer-events: none;
    z-index: 0;
}

.auth-card-inner {
    position: relative;
    z-index: 2;
    padding: 32px 36px 36px;
    display: flex;
    flex-direction: column;
}

.auth-card-logo-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 8px;
}

.auth-card-logo {
    max-height: 64px;
    max-width: 240px;
    width: auto;
    height: auto;
    filter: drop-shadow(0 0 18px rgba(168, 204, 82, 0.45)) drop-shadow(0 8px 24px rgba(40, 113, 184, 0.5));
    transition: transform .3s ease;
}

.auth-card-logo:hover { transform: scale(1.02); }

.auth-card-title {
    text-align: center;
    font-family: 'Montserrat', 'Inter', system-ui, sans-serif;
    font-weight: 700;
    font-size: 22px;
    letter-spacing: 5px;
    margin: 4px 0 28px;
    background: linear-gradient(90deg, #f1f5f9 0%, #b6e0fb 50%, #f1f5f9 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.auth-card-error {
    display: block;
    text-align: center;
    margin: 6px 0;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 14px;
    color: #fca5a5 !important;
}

/* ---------- Form element overrides scoped inside the card ---------- */

.auth-card input[type="text"],
.auth-card input[type="email"],
.auth-card input[type="password"],
.auth-card input[type="tel"],
.auth-card input[type="number"],
.auth-card input[type="search"],
.auth-card select,
.auth-card textarea {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    color: #f1f5f9 !important;
    border-radius: 10px !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25) !important;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

/* Selects need an opaque background so the open dropdown panel and items
   render readably (browsers inherit the select's bg for the dropdown surface). */
.auth-card select {
    background-color: #11243f !important;
}

.auth-card select option {
    background-color: #11243f;
    color: #f1f5f9;
}

.auth-card select option:checked,
.auth-card select option:hover {
    background-color: #1c3a63;
    color: #ffffff;
}

.auth-card input::placeholder,
.auth-card textarea::placeholder {
    color: rgba(241, 245, 249, 0.35) !important;
}

.auth-card input:focus,
.auth-card select:focus,
.auth-card textarea:focus {
    border-color: rgba(126, 200, 255, 0.6) !important;
    box-shadow:
        0 0 0 3px rgba(40, 113, 184, 0.25),
        inset 0 1px 2px rgba(0, 0, 0, 0.25) !important;
    background: rgba(255, 255, 255, 0.06) !important;
    outline: none !important;
}

.auth-card input:-webkit-autofill,
.auth-card input:-webkit-autofill:hover,
.auth-card input:-webkit-autofill:focus {
    -webkit-text-fill-color: #f1f5f9 !important;
    -webkit-box-shadow: 0 0 0 1000px rgba(20, 38, 68, 0.92) inset !important;
    caret-color: #f1f5f9 !important;
    border-color: rgba(126, 200, 255, 0.4) !important;
}

/* Read-only / disabled inputs */
.auth-card input[readonly],
.auth-card input:disabled {
    background: rgba(255, 255, 255, 0.02) !important;
    color: rgba(241, 245, 249, 0.55) !important;
    cursor: not-allowed;
}

/* Field-level labels (rendered above the input) */
.auth-card [data-tc-fieldcontainer] > label {
    color: rgba(226, 232, 240, 0.78) !important;
    font-size: 11px !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase;
    font-weight: 600;
}

/* In-control labels (checkboxes) keep normal body styling */
.auth-card [data-tc-controlcontainer] label {
    color: rgba(226, 232, 240, 0.85);
    font-size: 13px;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
}

/* Checkbox */
.auth-card input[type="checkbox"] {
    background-color: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
    border-radius: 4px !important;
    color: #2871b8 !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

.auth-card input[type="checkbox"]:checked {
    background-color: #2871b8 !important;
    border-color: #2871b8 !important;
}

.auth-card input[type="checkbox"]:focus {
    box-shadow: 0 0 0 3px rgba(40, 113, 184, 0.35) !important;
    outline: none !important;
}

/* Primary button (TCButton / TCSubmitButton — bg-taxcomm-blue) */
.auth-card button[class*="bg-taxcomm-blue"] {
    background-color: transparent !important;
    background-image: linear-gradient(135deg, #2871b8 0%, #58a897 100%) !important;
    border: none !important;
    color: #ffffff !important;
    border-radius: 10px !important;
    box-shadow:
        0 12px 28px -10px rgba(40, 113, 184, 0.6),
        0 6px 14px -6px rgba(88, 168, 151, 0.4);
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase;
    padding: 12px 16px !important;
    transition: transform .15s ease, box-shadow .2s ease, filter .15s ease;
    position: relative;
    overflow: hidden;
}

.auth-card button[class*="bg-taxcomm-blue"]:not(:disabled):hover {
    transform: translateY(-1px);
    filter: brightness(1.08);
    box-shadow:
        0 18px 36px -10px rgba(88, 168, 151, 0.55),
        0 12px 28px -10px rgba(40, 113, 184, 0.6);
}

.auth-card button[class*="bg-taxcomm-blue"]:not(:disabled):active {
    transform: translateY(0);
}

.auth-card button[class*="bg-taxcomm-blue"]:disabled,
.auth-card button[class*="bg-taxcomm-blue"][class*="opacity-50"] {
    background-image: linear-gradient(135deg, rgba(40, 113, 184, 0.35) 0%, rgba(88, 168, 151, 0.35) 100%) !important;
    box-shadow: none !important;
    cursor: not-allowed;
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Anchor links */
.auth-card a {
    color: #7ec8ff !important;
    text-decoration: none;
    transition: color .15s ease;
}

.auth-card a:hover {
    color: #b6e0fb !important;
    text-decoration: underline;
}

/* Inline text buttons (sign in with email link, resend, etc) — kept as
   transparent / link-like; respect any caller-supplied uppercase/letter-spacing. */
.auth-card button[type="button"].underline,
.auth-card button[type="button"][class*="underline"] {
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    color: #7ec8ff !important;
    cursor: pointer;
}

.auth-card button[type="button"].underline:hover,
.auth-card button[type="button"][class*="underline"]:hover {
    color: #b6e0fb !important;
    transform: none !important;
}

/* ---------- Polished link/action row used under the email field ---------- */
.auth-card-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 14px;
    margin: 14px 0 6px;
}

.auth-card-links a,
.auth-card-links button {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px !important;
    border-radius: 999px;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 1.4px !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    color: rgba(126, 200, 255, 0.9) !important;
    background: rgba(126, 200, 255, 0.06) !important;
    border: 1px solid rgba(126, 200, 255, 0.18) !important;
    transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
    cursor: pointer;
}

.auth-card-links a:hover,
.auth-card-links button:hover {
    background: rgba(126, 200, 255, 0.14) !important;
    border-color: rgba(126, 200, 255, 0.38) !important;
    color: #d6ecff !important;
    text-decoration: none !important;
    box-shadow: 0 4px 14px -6px rgba(126, 200, 255, 0.4);
}

/* Hide the literal " | " separator spans inside the links row — gap handles spacing now */
.auth-card-links > span {
    display: none;
}

/* Body / helper text inside the card */
.auth-card p { color: rgba(226, 232, 240, 0.85); }
.auth-card strong { color: #f1f5f9; }

/* QR code: keep image readable on dark */
.auth-card img[alt="QR Code"] {
    background: #ffffff;
    border-radius: 10px;
    padding: 10px;
    box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.5);
}

/* TOTP secret key code block */
.auth-card code {
    background: rgba(255, 255, 255, 0.06);
    color: #b6e0fb;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    padding: 4px 10px;
    font-family: 'JetBrains Mono', 'Consolas', 'Monaco', monospace;
    font-size: 12px;
    letter-spacing: 1px;
}

/* Backup code chips & status messages */
.auth-card-code-chip {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: #b6e0fb;
    padding: 8px;
    border-radius: 8px;
    text-align: center;
    font-family: 'JetBrains Mono', 'Consolas', monospace;
}

.auth-card-status-success { color: #34d399 !important; }
.auth-card-status-error   { color: #fca5a5 !important; }

/* Tighter rhythm between FormRows inside the auth card, so the registration
   form feels cohesive instead of a stack of loose inputs */
.auth-card form > div + div,
.auth-card form .grid + .grid {
    margin-top: 10px;
}

.auth-card form .grid {
    column-gap: 12px;
}

/* Submit button gets a little extra breathing room above */
.auth-card form button[type="submit"] {
    margin-top: 8px;
}

/* Bootstrap-style alert boxes (registration PRENOTICE etc.) */
.auth-card [class*="bg-[#fff3cd]"] {
    background: rgba(251, 191, 36, 0.10) !important;
    border-color: rgba(251, 191, 36, 0.35) !important;
    color: #fde68a !important;
    border-radius: 10px;
}

.auth-card [class*="bg-[#d1ecf1]"] {
    background: rgba(94, 200, 255, 0.10) !important;
    border-color: rgba(94, 200, 255, 0.35) !important;
    color: #b6e0fb !important;
    border-radius: 10px;
}

.auth-card [class*="bg-[#d4edda]"] {
    background: rgba(74, 222, 128, 0.10) !important;
    border-color: rgba(74, 222, 128, 0.35) !important;
    color: #bbf7d0 !important;
    border-radius: 10px;
}

.auth-card [class*="bg-[#f8d7da]"] {
    background: rgba(248, 113, 113, 0.10) !important;
    border-color: rgba(248, 113, 113, 0.35) !important;
    color: #fecaca !important;
    border-radius: 10px;
}

.auth-card [class*="text-[#856404]"] { color: #fde68a !important; }
.auth-card [class*="text-[#0c5460]"] { color: #b6e0fb !important; }
.auth-card [class*="text-[#155724]"] { color: #bbf7d0 !important; }
.auth-card [class*="text-[#721c24]"] { color: #fecaca !important; }