/* ============================================================
   AMS — shared.css
   Loaded on every app page (login / register / dashboard / …).
   Holds only the things that are genuinely reused: reset, design
   tokens, the brand lockup, buttons, form fields and message
   boxes, and the footer bar.

   Anything specific to a single page's own layout or look (the
   ambient background, page structure, unique components) lives
   in that page's own css/<page>.css instead — see login.css,
   register.css, dashboard.css.
   ============================================================ */

:root {
    --ams-violet:        #8b5cf6;
    --ams-violet-dark:   #7c3aed;
    --ams-violet-darker: #6d28d9;
    --ams-cyan:          #22d3ee;
    --ams-cyan-dark:     #0891b2;
    --ams-ink:           #111827;
    --ams-muted:         #6b7280;
    --ams-border:        #eef0f4;
    --ams-bg:            #f7f7fb;
}

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

body {
    font-family: 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
    font-size: 14px;
    color: var(--ams-ink);
}

a { color: inherit; }

/* ── Brand lockup ──────────────────────────────────────────────
   Used by the login/register header (56px) and, scaled down via
   .app-topbar overrides in dashboard.css, the app topbar (34px). */
.login-brand-icon, .brand-icon {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, var(--ams-violet), var(--ams-cyan));
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #fff;
    margin-bottom: 14px;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.6), 0 14px 32px -10px rgba(139,92,246,0.5);
    animation: iconPulse 3.5s ease-in-out infinite;
}

@keyframes iconPulse {
    0%, 100% { box-shadow: 0 0 0 1px rgba(255,255,255,0.6), 0 14px 32px -10px rgba(139,92,246,0.5); }
    50%      { box-shadow: 0 0 0 1px rgba(255,255,255,0.8), 0 14px 38px -8px rgba(34,211,238,0.55); }
}

.login-brand-name, .brand-name {
    font-size: 1.7rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    background: linear-gradient(90deg, var(--ams-violet-dark), var(--ams-cyan-dark));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ── Buttons ── */
.lbtn-signin, .btn-primary {
    padding: 12px;
    background: linear-gradient(135deg, var(--ams-violet), var(--ams-cyan));
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: transform 0.15s, box-shadow 0.15s, filter 0.15s;
    box-shadow: 0 10px 26px -10px rgba(139,92,246,0.55);
}
.lbtn-signin { width: 100%; }
.lbtn-signin:hover, .btn-primary:hover { transform: translateY(-1px); filter: brightness(1.04); box-shadow: 0 14px 30px -8px rgba(34,211,238,0.45); }
.lbtn-signin:active, .btn-primary:active { transform: translateY(0); }
.lbtn-signin:disabled, .btn-primary:disabled { background: #d1d5db; color: #9ca3af; cursor: not-allowed; box-shadow: none; transform: none; }

.btn-ghost {
    padding: 8px 14px;
    background: transparent;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    color: #374151;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.btn-ghost:hover { background: var(--ams-bg); border-color: #d1d5db; }

/* ── Form fields (login, register, and the dashboard's "new
   campaign" modal all use these) ── */
.lform-group { margin-bottom: 16px; }

.lform-group label {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 6px;
    letter-spacing: 0.01em;
}

.lform-optional { font-weight: 400; color: #9ca3af; font-size: 0.72rem; }

.lform-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}
.lform-label-row label { margin-bottom: 0; }

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

.lform-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    font-size: 0.85rem;
    pointer-events: none;
}

.lform-input {
    width: 100%;
    padding: 11px 14px 11px 38px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    font-size: 0.9rem;
    color: var(--ams-ink);
    background: #fff;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.lform-input::placeholder { color: #9ca3af; }

.lform-input:focus {
    border-color: var(--ams-violet);
    box-shadow: 0 0 0 3px rgba(139,92,246,0.15);
}

.lform-input-wrap .lform-input { padding-right: 42px; }

.ltoggle-pw {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: #9ca3af;
}
.ltoggle-pw:hover { color: #374151; }

/* ── Message boxes ── */
.error-msg {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 10px;
    color: #dc2626;
    padding: 10px 14px;
    font-size: 0.82rem;
    margin-top: 14px;
    display: none;
}

.success-msg {
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    border-radius: 10px;
    color: #047857;
    padding: 10px 14px;
    font-size: 0.82rem;
    margin-top: 14px;
    display: none;
}

/* ── User chip (dashboard + campaign topbars) ── */
.app-user {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.82rem;
}

.app-user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--ams-violet), var(--ams-cyan));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.8rem;
}

.app-user-name { font-weight: 600; color: var(--ams-ink); }

/* ── Footer bar (login + register) ── */
.login-footer {
    position: relative;
    z-index: 1;
    background: transparent;
    border-top: 1px solid var(--ams-border);
    color: var(--ams-muted);
    padding: 14px 32px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 0.76rem;
}
.lf-brand { font-weight: 700; color: var(--ams-ink); }
.lf-links { display: flex; gap: 14px; margin-left: auto; }
.lf-links a { color: var(--ams-muted); text-decoration: none; }
.lf-links a:hover { color: var(--ams-ink); text-decoration: underline; }

@media (max-width: 560px) {
    .login-footer { flex-direction: column; gap: 8px; }
}

/* ── Modal (dashboard's "new campaign", the Schedule page's post
   picker...) — the base shell is shared, each modal's own page CSS can
   add a width variant like .modal-card-wide if it needs more room. ── */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(17,24,39,0.45);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10;
    padding: 16px;
}
.modal-overlay.open { display: flex; }

.modal-card {
    background: #fff;
    border-radius: 16px;
    padding: 28px;
    width: 100%;
    max-width: 380px;
    box-shadow: 0 30px 60px -20px rgba(0,0,0,0.3);
}

.modal-title { font-weight: 600; font-size: 1.1rem; margin-bottom: 6px; color: var(--ams-ink); }
.modal-desc { font-size: 0.8rem; color: var(--ams-muted); margin-bottom: 18px; }

.modal-actions { display: flex; gap: 10px; margin-top: 20px; }
.modal-actions .btn-primary { flex: 1; width: auto; }
.modal-actions .btn-ghost { flex: 1; justify-content: center; }