/* ─── TiDi Auth — Login / Profile / Password ───────────────────────────────
 * CSS compartilhado entre todos os plugins que usam o tidi-auth.
 * Para customizar cores, sobrescreva as variáveis :root no seu plugin.
 * ─────────────────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

:root {
    --auth-bg:           #f1f5f9;
    --auth-card-bg:      #ffffff;
    --auth-border:       #e2e8f0;
    --auth-primary:      #0f172a;
    --auth-primary-fg:   #ffffff;
    --auth-accent:       #6366f1;
    --auth-accent-hover: #4f46e5;
    --auth-accent-fg:    #ffffff;
    --auth-muted:        #64748b;
    --auth-fg:           #0f172a;
    --auth-input-bg:     #f8fafc;
    --auth-input-focus:  #6366f1;
    --auth-error-bg:     #fef2f2;
    --auth-error-fg:     #dc2626;
    --auth-error-border: #fca5a5;
    --auth-success-bg:   #f0fdf4;
    --auth-success-fg:   #16a34a;
    --auth-radius:       .75rem;
    --auth-shadow:       0 4px 6px -1px rgba(0,0,0,.07), 0 10px 40px -4px rgba(0,0,0,.1);
}

/* ── Page layout ── */
body.tp-auth-page {
    margin: 0; padding: 0;
    background: var(--auth-bg);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
}

.tp-auth-wrap {
    min-height: 100vh;
    display: flex;
    align-items: stretch;
}

/* ── Left panel (decorative) — hidden on small screens ── */
.tp-auth-panel { display: none; }

@media (min-width: 900px) {
    .tp-auth-panel {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        flex: 0 0 420px;
        background: linear-gradient(145deg, #0f172a 0%, #1e1b4b 60%, #312e81 100%);
        padding: 3rem;
        position: relative;
        overflow: hidden;
    }
    .tp-auth-panel::before {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse at 30% 70%, rgba(99,102,241,.35) 0%, transparent 60%),
                    radial-gradient(ellipse at 80% 20%, rgba(139,92,246,.2) 0%, transparent 50%);
    }
}

.tp-auth-panel__brand { position: relative; z-index: 1; }

.tp-auth-panel__logo {
    height: 40px; width: auto; object-fit: contain;
}

.tp-auth-panel__initial {
    width: 44px; height: 44px; border-radius: .625rem;
    background: rgba(255,255,255,.15);
    border: 1px solid rgba(255,255,255,.2);
    color: #fff; font-size: 1.25rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    backdrop-filter: blur(4px);
}

.tp-auth-panel__name {
    color: rgba(255,255,255,.9);
    font-size: .875rem; font-weight: 600;
    margin-top: .625rem; display: block;
}

.tp-auth-panel__quote { position: relative; z-index: 1; }

.tp-auth-panel__quote-text {
    color: rgba(255,255,255,.75);
    font-size: .9375rem; line-height: 1.6;
    font-style: italic; margin: 0 0 .75rem;
}

.tp-auth-panel__quote-author {
    color: rgba(255,255,255,.45); font-size: .8125rem;
}

/* ── Right side (form area) ── */
.tp-auth-side {
    flex: 1; display: flex;
    align-items: center; justify-content: center;
    padding: 2rem 1.5rem;
    background: var(--auth-bg);
}

/* ── Card ── */
.tp-auth-card {
    background: var(--auth-card-bg);
    border: 1px solid var(--auth-border);
    border-radius: var(--auth-radius);
    box-shadow: var(--auth-shadow);
    width: 100%; max-width: 420px;
    padding: 2.5rem 2.25rem;
}

.tp-auth-card--wide { max-width: 520px; }

/* ── Brand / logo (inside card, mobile) ── */
.tp-auth-brand {
    display: flex; flex-direction: column;
    align-items: center; gap: .5rem;
    margin-bottom: 2rem; text-align: center;
}

@media (min-width: 900px) { .tp-auth-brand { display: none; } }

.tp-auth-brand__logo { height: 44px; width: auto; object-fit: contain; }

.tp-auth-brand__initial {
    width: 44px; height: 44px; border-radius: .625rem;
    background: var(--auth-primary); color: var(--auth-primary-fg);
    font-size: 1.25rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}

.tp-auth-brand__name {
    font-size: .9375rem; font-weight: 600;
    color: var(--auth-fg); line-height: 1.25;
}

/* ── Avatar (profile) ── */
.tp-auth-avatar {
    width: 64px; height: 64px; border-radius: 50%;
    background: linear-gradient(135deg, var(--auth-accent), #8b5cf6);
    color: #fff; font-size: 1.5rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 1rem; letter-spacing: -.01em;
}

/* ── Headings ── */
.tp-auth-title {
    font-size: 1.375rem; font-weight: 800; color: var(--auth-fg);
    margin: 0 0 .375rem; text-align: center; letter-spacing: -.02em;
}

.tp-auth-desc {
    font-size: .875rem; color: var(--auth-muted);
    text-align: center; margin: 0 0 1.75rem; line-height: 1.5;
}

/* ── Form ── */
.tp-auth-form { display: flex; flex-direction: column; gap: 1.125rem; }

.tp-auth-field { display: flex; flex-direction: column; gap: .375rem; }

.tp-auth-label {
    font-size: .8125rem; font-weight: 600;
    color: var(--auth-fg); letter-spacing: .01em;
}

.tp-auth-input {
    width: 100%; height: 2.75rem; padding: 0 .875rem;
    background: var(--auth-input-bg);
    border: 1.5px solid var(--auth-border);
    border-radius: .5rem; font-size: .9375rem;
    color: var(--auth-fg); outline: none;
    transition: border-color .15s, box-shadow .15s, background .15s;
    font-family: inherit;
}

.tp-auth-input:focus {
    border-color: var(--auth-input-focus);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(99,102,241,.12);
}

.tp-auth-input.error {
    border-color: var(--auth-error-fg);
    box-shadow: 0 0 0 3px rgba(220,38,38,.1);
}

.tp-auth-input:disabled {
    background: #f1f5f9; color: var(--auth-muted); cursor: not-allowed;
}

/* Password toggle wrapper */
.tp-auth-pw-wrap { position: relative; }
.tp-auth-pw-wrap .tp-auth-input { padding-right: 2.75rem; }

.tp-auth-pw-toggle {
    position: absolute; right: .75rem; top: 50%;
    transform: translateY(-50%);
    background: none; border: none; cursor: pointer;
    color: var(--auth-muted); padding: 0; line-height: 1;
    display: flex; align-items: center; transition: color .15s;
}
.tp-auth-pw-toggle:hover { color: var(--auth-fg); }

/* ── Remember / forgot row ── */
.tp-auth-row {
    display: flex; align-items: center;
    justify-content: space-between; gap: .5rem;
}

.tp-auth-check-label {
    display: flex; align-items: center; gap: .4rem;
    font-size: .8125rem; color: var(--auth-muted);
    cursor: pointer; user-select: none;
}

.tp-auth-check-label input[type=checkbox] {
    accent-color: var(--auth-accent); width: 15px; height: 15px; cursor: pointer;
}

.tp-auth-link {
    font-size: .8125rem; color: var(--auth-accent);
    text-decoration: none; font-weight: 500;
}
.tp-auth-link:hover { text-decoration: underline; }

/* ── Submit button ── */
.tp-auth-btn {
    width: 100%; height: 2.875rem;
    background: var(--auth-primary); color: var(--auth-primary-fg);
    border: none; border-radius: .5rem;
    font-size: .9375rem; font-weight: 600; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: .5rem;
    transition: background .15s, transform .1s, box-shadow .15s;
    font-family: inherit; margin-top: .375rem; letter-spacing: .01em;
}

.tp-auth-btn:hover:not(:disabled) {
    background: #1e293b;
    box-shadow: 0 4px 12px rgba(15,23,42,.25);
}
.tp-auth-btn:active:not(:disabled) { transform: scale(.99); }
.tp-auth-btn:disabled { opacity: .6; cursor: not-allowed; }

.tp-auth-btn.accent { background: var(--auth-accent); }
.tp-auth-btn.accent:hover:not(:disabled) {
    background: var(--auth-accent-hover);
    box-shadow: 0 4px 12px rgba(99,102,241,.35);
}

.tp-auth-btn .tp-spin {
    width: 17px; height: 17px;
    border: 2px solid rgba(255,255,255,.35);
    border-top-color: #fff; border-radius: 50%;
    animation: tp-spin .65s linear infinite;
    display: none; flex-shrink: 0;
}
.tp-auth-btn.loading .tp-spin   { display: block; }
.tp-auth-btn.loading .btn-label { display: none; }

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

/* ── Alert messages ── */
.tp-auth-alert {
    border-radius: .5rem; padding: .75rem 1rem;
    font-size: .875rem; display: none;
    align-items: flex-start; gap: .5rem;
    line-height: 1.45; margin-bottom: .25rem;
}
.tp-auth-alert.show { display: flex; }
.tp-auth-alert--error {
    background: var(--auth-error-bg); color: var(--auth-error-fg);
    border: 1px solid var(--auth-error-border);
}
.tp-auth-alert--success {
    background: var(--auth-success-bg); color: var(--auth-success-fg);
    border: 1px solid #bbf7d0;
}

/* ── Divider ── */
.tp-auth-divider { border: none; border-top: 1px solid var(--auth-border); margin: 1.5rem 0; }

/* ── Footer links ── */
.tp-auth-footer { text-align: center; font-size: .8125rem; color: var(--auth-muted); }
.tp-auth-footer a { color: var(--auth-accent); text-decoration: none; font-weight: 500; }
.tp-auth-footer a:hover { text-decoration: underline; }

/* ── Profile: two-column grid ── */
.tp-auth-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

/* ── Role badge ── */
.tp-auth-badge {
    display: inline-flex; align-items: center;
    height: 1.5rem; padding: 0 .75rem; border-radius: 999px;
    font-size: .6875rem; font-weight: 700; letter-spacing: .04em;
    background: rgba(99,102,241,.08); color: var(--auth-accent);
    border: 1px solid rgba(99,102,241,.2); text-transform: uppercase;
}

/* ── Section label (profile) ── */
.tp-auth-section-label {
    font-size: .6875rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .08em; color: var(--auth-muted);
    margin-bottom: .75rem; padding-bottom: .5rem;
    border-bottom: 1px solid var(--auth-border);
}

/* ── Password strength bar ── */
.tp-pw-strength {
    margin-top: .375rem; height: 3px; border-radius: 2px;
    background: var(--auth-border); overflow: hidden;
}
.tp-pw-strength__bar {
    height: 100%; border-radius: 2px;
    transition: width .3s, background .3s;
    width: 0%; background: var(--auth-error-fg);
}
.tp-pw-strength__label { font-size: .75rem; color: var(--auth-muted); margin-top: .25rem; }

/* ── Responsive ── */
@media (max-width: 480px) {
    .tp-auth-card { padding: 2rem 1.25rem; }
    .tp-auth-grid-2 { grid-template-columns: 1fr; }
    .tp-auth-side { padding: 1.5rem 1rem; }
}