/* ==========================================================================
   ServiceKhata360 — Authentication Shell (Login / Register / Forgot Password)
   Shared by resources/views/layouts/auth.blade.php and resources/views/auth/*.

   Design tokens are deliberately namespaced (--auth-*) and lifted from the
   already-shipped "crm-index-page" design system (see public/css/
   index-pages.css) so this shell reads as the SAME product, not a bolted-on
   marketing template. Kept in its own file (not inline <style>) to match
   this app's existing convention of style.css / sidebar.css / index-pages.css.
   ========================================================================== */

:root {
    --auth-ink: #101828;
    --auth-ink-soft: #3A4256;
    --auth-muted: #6B7280;
    --auth-muted-soft: #98A2B3;
    --auth-surface: #FFFFFF;
    --auth-bg: #F6F7FB;
    --auth-border: #E7E9F1;
    --auth-border-soft: #EFF1F6;
    --auth-primary: #3457D5;
    --auth-primary-dark: #253E9E;
    --auth-primary-soft: #EDF1FD;
    --auth-danger: #DC2626;
    --auth-danger-soft: #FEF2F2;
    --auth-success: #1AAE7A;
    --auth-success-soft: #EAFBF4;
    --auth-warning: #92620A;
    --auth-warning-soft: #FFFBEB;
    --auth-radius-lg: 16px;
    --auth-radius-md: 12px;
    --auth-radius-sm: 10px;
    --auth-shadow-md: 0 4px 12px rgba(16, 24, 40, .06), 0 1px 2px rgba(16, 24, 40, .04);
    --auth-shadow-lg: 0 24px 60px rgba(16, 24, 40, .10), 0 2px 8px rgba(16, 24, 40, .05);
    --auth-card-width: 460px;
}

* { box-sizing: border-box; }

html, body.auth-body { height: 100%; }

body.auth-body {
    margin: 0;
    min-height: 100vh;
    font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    color: var(--auth-ink);
    -webkit-font-smoothing: antialiased;

    /* Subtle premium background: two soft brand-tinted glows + a faint dot
       grid over the app's own light neutral bg. Nothing animated, nothing
       loud — must never compete with the form. */
    background-color: var(--auth-bg);
    background-image:
        radial-gradient(640px 380px at 12% -8%, rgba(52, 87, 213, .07), transparent 60%),
        radial-gradient(640px 380px at 105% 8%, rgba(52, 87, 213, .05), transparent 55%),
        radial-gradient(rgba(16, 24, 40, .05) 1px, transparent 1px);
    background-size: auto, auto, 22px 22px;
    background-position: 0 0, 0 0, 0 0;
    background-repeat: no-repeat, no-repeat, repeat;
    background-attachment: fixed, fixed, fixed;
}

/* ---------------------------------------------------------------------- */
/* Page scaffold                                                          */
/* ---------------------------------------------------------------------- */

.auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.auth-container {
    width: 100%;
    max-width: var(--auth-card-width);
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

/* Register carries more fields than Login/Forgot Password. Wide enough to
   run Business/Your Information and Account Security side by side (see
   .auth-form-columns) instead of one long vertical stack — shorter page,
   fewer truncated placeholders. Collapses back to the standard single
   -column width below 700px (see media query at the bottom of this file). */
.auth-container--wide {
    max-width: 720px;
}

/* ---------------------------------------------------------------------- */
/* Brand header                                                           */
/* ---------------------------------------------------------------------- */

.auth-brand {
    text-align: center;
    margin-bottom: 14px;
}

.auth-brand__logo {
    width: 40px;
    height: 40px;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

.auth-brand__name {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--auth-ink);
    margin-top: 8px;
    letter-spacing: -.01em;
}

.auth-brand__tagline {
    font-size: .78rem;
    color: var(--auth-muted);
    margin-top: 2px;
}

/* ---------------------------------------------------------------------- */
/* Card                                                                   */
/* ---------------------------------------------------------------------- */

.auth-card {
    background: var(--auth-surface);
    border: 1px solid var(--auth-border);
    border-radius: var(--auth-radius-lg);
    box-shadow: var(--auth-shadow-lg);
    padding: 24px 32px;
}

.auth-card__head {
    margin-bottom: 14px;
}

.auth-card__title {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--auth-ink);
    margin: 0 0 6px;
    letter-spacing: -.01em;
}

.auth-card__subtitle {
    font-size: .88rem;
    color: var(--auth-muted);
    margin: 0;
    line-height: 1.5;
}

.auth-trust {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .76rem;
    font-weight: 600;
    color: var(--auth-primary-dark);
    background: var(--auth-primary-soft);
    padding: 5px 12px;
    border-radius: 999px;
    margin-top: 8px;
}

/* ---------------------------------------------------------------------- */
/* Sections (Register: Business Information / Your Information / ...)    */
/* ---------------------------------------------------------------------- */

.auth-section + .auth-section {
    border-top: 1px solid var(--auth-border-soft);
    margin-top: 10px;
    padding-top: 10px;
}

.auth-section__label {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--auth-muted-soft);
    margin-bottom: 8px;
}

.auth-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* Register (wide card only, >700px — see media query below): Business
   Information + Your Information run alongside Account Security instead
   of stacking underneath it, so the form reads wide instead of tall.
   Each side keeps its own .auth-section rule (border-top divider) for the
   sections stacked within it. */
.auth-form-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.auth-form-column + .auth-form-column {
    border-left: 1px solid var(--auth-border-soft);
    padding-left: 28px;
    margin-left: 28px;
}

.auth-form-columns > .auth-form-column > .auth-section:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

/* ---------------------------------------------------------------------- */
/* Fields                                                                 */
/* ---------------------------------------------------------------------- */

.auth-field {
    margin-bottom: 10px;
}

.auth-field:last-child {
    margin-bottom: 0;
}

.auth-field__label {
    display: block;
    font-size: .82rem;
    font-weight: 600;
    color: var(--auth-ink-soft);
    margin-bottom: 5px;
}

.auth-input-wrap {
    position: relative;
}

.auth-input {
    width: 100%;
    height: 44px;
    border: 1px solid var(--auth-border);
    border-radius: var(--auth-radius-sm);
    padding: 0 14px;
    font-size: .92rem;
    font-family: inherit;
    color: var(--auth-ink);
    background-color: #FBFCFE;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.auth-input-wrap .auth-input--icon-left {
    padding-left: 42px;
}

.auth-input-wrap .auth-input--icon-right {
    padding-right: 44px;
}

.auth-input-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--auth-muted-soft);
    font-size: .95rem;
    pointer-events: none;
}

.auth-input::placeholder {
    color: var(--auth-muted-soft);
}

.auth-input:focus {
    outline: none;
    border-color: var(--auth-primary);
    box-shadow: 0 0 0 3px var(--auth-primary-soft);
    background-color: #fff;
}

.auth-input:disabled {
    background-color: var(--auth-border-soft);
    color: var(--auth-muted);
    cursor: not-allowed;
}

.auth-input.is-invalid {
    border-color: var(--auth-danger);
    background-color: #FFFBFB;
}

.auth-input.is-invalid:focus {
    box-shadow: 0 0 0 3px var(--auth-danger-soft);
}

.auth-toggle-password {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--auth-muted);
    border-radius: 8px;
    cursor: pointer;
    transition: background-color .12s ease, color .12s ease;
}

.auth-toggle-password:hover {
    background-color: var(--auth-border-soft);
    color: var(--auth-ink-soft);
}

.auth-toggle-password:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--auth-primary-soft);
}

.auth-field__error {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 6px;
    font-size: .78rem;
    font-weight: 500;
    color: var(--auth-danger);
    line-height: 1.4;
}

.auth-field__error i {
    font-size: .85rem;
    margin-top: 1px;
    flex-shrink: 0;
}

/* `.auth-field__error{display:flex}` above is an author rule, which beats
   the browser's own `[hidden]{display:none}` UA rule in the cascade —
   without this, a field error marked `hidden` (confirm-password mismatch,
   terms checkbox) would render anyway wherever a class here sets display. */
.auth-field__error[hidden] {
    display: none;
}

.auth-field__hint {
    margin-top: 6px;
    font-size: .78rem;
    color: var(--auth-muted);
}

/* ---------------------------------------------------------------------- */
/* Checkbox                                                               */
/* ---------------------------------------------------------------------- */

.auth-checkbox-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 2px 0 14px;
    flex-wrap: wrap;
}

.auth-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .85rem;
    color: var(--auth-ink-soft);
    cursor: pointer;
    user-select: none;
}

.auth-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--auth-primary);
    cursor: pointer;
    margin: 0;
}

.auth-checkbox--terms {
    align-items: flex-start;
    line-height: 1.5;
}

.auth-checkbox--terms input[type="checkbox"] {
    margin-top: 3px;
    flex-shrink: 0;
}

.auth-link {
    color: var(--auth-primary);
    font-weight: 600;
    text-decoration: none;
}

.auth-link:hover {
    color: var(--auth-primary-dark);
    text-decoration: underline;
}

/* ---------------------------------------------------------------------- */
/* Buttons                                                                */
/* ---------------------------------------------------------------------- */

.auth-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 44px;
    border-radius: var(--auth-radius-sm);
    border: none;
    background: var(--auth-primary);
    color: #fff;
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-weight: 600;
    font-size: .94rem;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
    transition: background-color .15s ease, transform .08s ease, box-shadow .15s ease;
}

.auth-btn:hover:not(:disabled) {
    background: var(--auth-primary-dark);
    color: #fff;
}

.auth-btn:active:not(:disabled) {
    transform: translateY(1px);
}

.auth-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--auth-primary-soft), 0 0 0 1px var(--auth-primary);
}

.auth-btn:disabled {
    opacity: .65;
    cursor: not-allowed;
}

.auth-btn--secondary {
    background: #fff;
    color: var(--auth-ink-soft);
    border: 1px solid var(--auth-border);
    box-shadow: none;
}

.auth-btn--secondary:hover:not(:disabled) {
    background: var(--auth-border-soft);
    color: var(--auth-ink);
}

.auth-spinner {
    display: none;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .45);
    border-top-color: #fff;
    animation: auth-spin .6s linear infinite;
}

.auth-btn.is-loading .auth-spinner {
    display: inline-block;
}

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

/* ---------------------------------------------------------------------- */
/* Alerts                                                                 */
/* ---------------------------------------------------------------------- */

.auth-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: var(--auth-radius-sm);
    font-size: .85rem;
    font-weight: 500;
    line-height: 1.45;
    margin-bottom: 20px;
}

.auth-alert i {
    font-size: 1rem;
    margin-top: 1px;
    flex-shrink: 0;
}

.auth-alert--success {
    background: var(--auth-success-soft);
    color: #0F7A54;
    border: 1px solid rgba(26, 174, 122, .25);
}

.auth-alert--error {
    background: var(--auth-danger-soft);
    color: #B42318;
    border: 1px solid rgba(220, 38, 38, .2);
}

.auth-alert--warning {
    background: var(--auth-warning-soft);
    color: var(--auth-warning);
    border: 1px solid rgba(234, 179, 8, .25);
}

/* ---------------------------------------------------------------------- */
/* Footer switch line ("Don't have an account? Create Account")          */
/* ---------------------------------------------------------------------- */

.auth-switch {
    text-align: center;
    font-size: .85rem;
    color: var(--auth-muted);
    margin-top: 14px;
}

.auth-link-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    justify-content: center;
    width: 100%;
    margin-top: 22px;
    font-size: .85rem;
    font-weight: 600;
    color: var(--auth-muted);
    text-decoration: none;
}

.auth-link-back:hover {
    color: var(--auth-primary);
}

.auth-link-back i {
    font-size: .85rem;
}

/* ---------------------------------------------------------------------- */
/* Forgot-password success state                                         */
/* ---------------------------------------------------------------------- */

.auth-success {
    text-align: center;
    padding: 8px 0 4px;
}

.auth-success__icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--auth-success-soft);
    color: var(--auth-success);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin: 0 auto 18px;
}

.auth-success__title {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--auth-ink);
    margin: 0 0 8px;
}

.auth-success__text {
    font-size: .88rem;
    color: var(--auth-muted);
    line-height: 1.55;
    margin: 0 0 26px;
}

/* ---------------------------------------------------------------------- */
/* Footer                                                                 */
/* ---------------------------------------------------------------------- */

.auth-footer {
    text-align: center;
    margin-top: 14px;
}

.auth-footer p {
    margin: 0;
    font-size: .75rem;
    color: var(--auth-muted-soft);
    line-height: 1.6;
}

/* ---------------------------------------------------------------------- */
/* Responsive                                                             */
/* ---------------------------------------------------------------------- */

/* Register's two-column layout only has room on genuine desktop widths.
   Below that, fall back to the same single-column stacked design Login/
   Forgot Password use — proven at tablet/mobile sizes already. */
@media (max-width: 700px) {
    .auth-container--wide {
        max-width: var(--auth-card-width);
    }

    .auth-form-columns {
        display: block;
    }

    .auth-form-column + .auth-form-column {
        border-left: none;
        padding-left: 0;
        margin-left: 0;
    }

    .auth-form-columns > .auth-form-column > .auth-section:first-child {
        margin-top: 14px;
        padding-top: 14px;
        border-top: 1px solid var(--auth-border-soft);
    }

    .auth-form-columns > .auth-form-column:first-child > .auth-section:first-child {
        margin-top: 0;
        padding-top: 0;
        border-top: none;
    }
}

@media (max-width: 480px) {
    .auth-page {
        padding: 32px 16px;
        align-items: flex-start;
    }

    .auth-card {
        padding: 26px 20px;
    }

    .auth-card__title {
        font-size: 1.25rem;
    }

    .auth-brand__logo {
        width: 44px;
        height: 44px;
    }

    .auth-grid-2 {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .auth-checkbox-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}

@media (max-width: 360px) {
    .auth-card {
        padding: 22px 16px;
    }
}