/* ============================================================
   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.
   ============================================================ */

/* ── Design tokens (2026-10-15, see DESIGN_PLAN.md). New code uses these; the old --ams-* names below stay
   so every existing page keeps working, and now point at the same palette. ── */
:root {
    /* brand + accent + backgrounds: the values live in the theme blocks below (Original = the default). */
    /* gray */
    --c-gray-0:   #ffffff;
    --c-gray-25:  #fcfcfd;
    --c-gray-50:  var(--c-bg);
    --c-gray-100: #f2f4f7;
    --c-gray-200: var(--c-line);
    --c-gray-300: #d0d5dd;
    --c-gray-400: #98a2b3;
    --c-gray-500: #667085;
    --c-gray-700: #344054;
    --c-gray-900: #101828;
    /* status: soft background + strong text */
    --c-ok-bg:   #ecfdf3;  --c-ok:   #067647;
    --c-warn-bg: #fffaeb;  --c-warn: #b54708;
    --c-err-bg:  #fef3f2;  --c-err:  #b42318;
    --c-info-bg: #eff8ff;  --c-info: #175cd3;
    /* platforms */
    --c-fb: #1877f2;  --c-ig: #e1306c;  --c-th: #000000;  --c-yt: #ff0000;  --c-tt: #000000;  --c-x: #000000;

    /* type scale */
    --fs-xs: 12px;  --fs-sm: 13px;  --fs-md: 14px;  --fs-lg: 16px;  --fs-xl: 20px;  --fs-2xl: 24px;  --fs-3xl: 30px;
    --fw-reg: 400;  --fw-med: 500;  --fw-semi: 600;  --fw-bold: 700;

    /* spacing (multiples of 4) */
    --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;  --sp-4: 16px;  --sp-5: 20px;  --sp-6: 24px;  --sp-8: 32px;  --sp-10: 40px;

    /* radius */
    --r-sm: 8px;  --r-md: 12px;  --r-lg: 16px;  --r-pill: 999px;

    /* shadow */
    --sh-xs: 0 1px 2px rgba(16,24,40,.05);
    --sh-sm: 0 1px 3px rgba(16,24,40,.08), 0 1px 2px rgba(16,24,40,.04);
    --sh-md: 0 8px 16px -4px rgba(16,24,40,.08), 0 2px 6px -2px rgba(16,24,40,.04);
    --sh-lg: 0 20px 32px -8px rgba(16,24,40,.12);
    --sh-focus: 0 0 0 4px rgba(var(--rgb-500), .18);

    --ease: 150ms ease;
    --font: 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;

    /* legacy names — now follow the active theme */
    --ams-violet:        var(--c-brand-500);
    --ams-violet-dark:   var(--c-brand-600);
    --ams-violet-darker: var(--c-brand-700);
    --ams-violet-soft:   var(--c-soft);
    --ams-cyan:          var(--c-accent);
    --ams-cyan-dark:     var(--c-accent-dark);
    --ams-ink:           #111827;
    --ams-muted:         #6b7280;
    --ams-border:        var(--c-line);
    --ams-bg:            var(--c-bg);
}

/* ── Themes (2026-10-15). The user picks one in My profile → Appearance; js/theme.js sets <html data-theme="…">.
   "original" is the :root default, so a page without theme.js (e.g. the public blog) always keeps the original look. ── */
:root {
    --c-brand-25: #faf5ff;
    --c-brand-50: #f5f3ff;
    --c-brand-100: #ede9fe;
    --c-brand-200: #ddd6fe;
    --c-brand-300: #c4b5fd;
    --c-brand-400: #a78bfa;
    --c-brand-500: #8b5cf6;
    --c-brand-600: #7c3aed;
    --c-brand-700: #6d28d9;
    --c-brand-800: #5b21b6;
    --c-brand-900: #4c1d95;
    --c-accent: #22d3ee;  --c-accent-dark: #0891b2;
    --rgb-500: 139,92,246;  --rgb-600: 124,58,237;  --rgb-700: 109,40,217;  --rgb-900: 76,29,149;  --rgb-accent: 34,211,238;
    --c-bg: #f7f7fb;  --c-line: #eef0f4;  --c-soft: #eef0fe;
}
html[data-theme="teal"] {
    --c-brand-25: #f7fefd;
    --c-brand-50: #f0fdfa;
    --c-brand-100: #ccfbf1;
    --c-brand-200: #99f6e4;
    --c-brand-300: #5eead4;
    --c-brand-400: #2dd4bf;
    --c-brand-500: #14b8a6;
    --c-brand-600: #0d9488;
    --c-brand-700: #0f766e;
    --c-brand-800: #115e59;
    --c-brand-900: #134e4a;
    --c-accent: #2dd4bf;  --c-accent-dark: #0f766e;
    --rgb-500: 20,184,166;  --rgb-600: 13,148,136;  --rgb-700: 15,118,110;  --rgb-900: 19,78,74;  --rgb-accent: 45,212,191;
    --c-bg: #f5f8f8;  --c-line: #e6eded;  --c-soft: #eaf7f5;
}
html[data-theme="ink"] {
    --c-brand-25: #fafafa;
    --c-brand-50: #f4f4f5;
    --c-brand-100: #e4e4e7;
    --c-brand-200: #d4d4d8;
    --c-brand-300: #a1a1aa;
    --c-brand-400: #71717a;
    --c-brand-500: #3f3f46;
    --c-brand-600: #18181b;
    --c-brand-700: #09090b;
    --c-brand-800: #000000;
    --c-brand-900: #000000;
    --c-accent: #71717a;  --c-accent-dark: #3f3f46;
    --rgb-500: 63,63,70;  --rgb-600: 24,24,27;  --rgb-700: 9,9,11;  --rgb-900: 0,0,0;  --rgb-accent: 113,113,122;
    --c-bg: #fafafa;  --c-line: #e7e7ea;  --c-soft: #f1f1f3;
}
html[data-theme="forest"] {
    --c-brand-25: #f6fef9;
    --c-brand-50: #f0fdf4;
    --c-brand-100: #dcfce7;
    --c-brand-200: #bbf7d0;
    --c-brand-300: #86efac;
    --c-brand-400: #4ade80;
    --c-brand-500: #16a34a;
    --c-brand-600: #15803d;
    --c-brand-700: #166534;
    --c-brand-800: #14532d;
    --c-brand-900: #052e16;
    --c-accent: #4ade80;  --c-accent-dark: #15803d;
    --rgb-500: 22,163,74;  --rgb-600: 21,128,61;  --rgb-700: 22,101,52;  --rgb-900: 5,46,22;  --rgb-accent: 74,222,128;
    --c-bg: #f6f9f6;  --c-line: #e4ece4;  --c-soft: #eaf6ec;
}
html[data-theme="navy"] {
    --c-brand-25: #f7fafd;
    --c-brand-50: #eef4fb;
    --c-brand-100: #dbe7f5;
    --c-brand-200: #c3d4ea;
    --c-brand-300: #9fb8d8;
    --c-brand-400: #6f93c2;
    --c-brand-500: #2c5282;
    --c-brand-600: #1e3a5f;
    --c-brand-700: #172e4c;
    --c-brand-800: #11243d;
    --c-brand-900: #0b1829;
    --c-accent: #38bdf8;  --c-accent-dark: #0369a1;
    --rgb-500: 44,82,130;  --rgb-600: 30,58,95;  --rgb-700: 23,46,76;  --rgb-900: 11,24,41;  --rgb-accent: 56,189,248;
    --c-bg: #f4f6f9;  --c-line: #e3e9f0;  --c-soft: #e8eff8;
}
html[data-theme="coral"] {
    --c-brand-25: #fffaf6;
    --c-brand-50: #fff4ec;
    --c-brand-100: #ffe8d6;
    --c-brand-200: #ffd2b0;
    --c-brand-300: #ffb680;
    --c-brand-400: #ff922b;
    --c-brand-500: #f76707;
    --c-brand-600: #e8590c;
    --c-brand-700: #c74a08;
    --c-brand-800: #a33a05;
    --c-brand-900: #7a2e06;
    --c-accent: #fbbf24;  --c-accent-dark: #d97706;
    --rgb-500: 247,103,7;  --rgb-600: 232,89,12;  --rgb-700: 199,74,8;  --rgb-900: 122,46,6;  --rgb-accent: 251,191,36;
    --c-bg: #faf7f3;  --c-line: #eee6dc;  --c-soft: #fff0e4;
}
html[data-theme="plum"] {
    --c-brand-25: #fdf7fc;
    --c-brand-50: #faf0f8;
    --c-brand-100: #f3dcee;
    --c-brand-200: #e6c9df;
    --c-brand-300: #cfa3c6;
    --c-brand-400: #a35a92;
    --c-brand-500: #7d3a6c;
    --c-brand-600: #6b2d5c;
    --c-brand-700: #561f49;
    --c-brand-800: #4a1a3e;
    --c-brand-900: #35112d;
    --c-accent: #e879a8;  --c-accent-dark: #be185d;
    --rgb-500: 125,58,108;  --rgb-600: 107,45,92;  --rgb-700: 86,31,73;  --rgb-900: 53,17,45;  --rgb-accent: 232,121,168;
    --c-bg: #f8f5f7;  --c-line: #ebe3e8;  --c-soft: #f6e9f3;
}

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

body {
    font-family: var(--font);
    font-size: 14px;
    color: var(--ams-ink);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Form controls do not inherit the page font by default; low specificity, so any class that sets its own font still wins. */
button, input, select, textarea { font-family: inherit; }

/* Visible keyboard focus everywhere (mouse clicks do not show it). */
:focus-visible { outline: 2px solid var(--c-brand-500); outline-offset: 2px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

a { color: inherit; }

/* ── Brand lockup ──────────────────────────────────────────────
   Real AMS logo (served from /Attachment/Image/AMS.png, same static
   route Threads' icon uses — see campaign-connections.css's comment)
   replaced the old placeholder here: a gradient badge with a generic
   FontAwesome wand icon in it, plus separate "AMS" gradient-text and
   an old "AI Media Studio" tagline next to it. The real logo already
   contains the wordmark and its own tagline, so there's nothing left to
   lay out beside it — just one sized <img> now. Two sizes: the big
   login/register/campaign-setup header (.login-brand-logo) and the
   small app topbar on dashboard.html/user-profile.html
   (.app-topbar-logo, sized directly here rather than via a
   dashboard.css override the way the old .brand-icon needed). */
.login-brand-logo {
    height: 48px;
    width: auto;
    margin-bottom: 14px;
}

.app-topbar-logo {
    height: 28px;
    width: auto;
}

/* ── 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(var(--rgb-500),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(var(--rgb-accent),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; }
/* The other themes use a flat main button (the violet→cyan gradient belongs to the Original theme only). */
html[data-theme] .lbtn-signin, html[data-theme] .btn-primary { background: var(--c-brand-600); box-shadow: 0 6px 16px -8px rgba(var(--rgb-600), 0.6); }
html[data-theme] .lbtn-signin:hover, html[data-theme] .btn-primary:hover { background: var(--c-brand-700); filter: none; box-shadow: 0 8px 18px -8px rgba(var(--rgb-600), 0.6); }
html[data-theme] .lbtn-signin:disabled, html[data-theme] .btn-primary:disabled { background: #d1d5db; box-shadow: 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(var(--rgb-500),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) — doubles as the link to
   My Profile, so it needs link resets + a hover state. ── */
.app-user {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.82rem;
    text-decoration: none;
    padding: 4px 8px 4px 4px;
    border-radius: 999px;
    transition: background 0.12s;
}
.app-user:hover { background: var(--ams-bg); }

.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;
        align-items: center;
        text-align: center;
        gap: 8px;
        padding: 18px 20px 22px;
        background: rgba(255,255,255,0.5);
    }
    .lf-links { margin-left: 0; }
}

/* ── 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; }

/* ── Wide variant — for modals with real content to work with (a prompt
   to write, a longer choice to read) instead of a quick yes/no, per the
   comment above this whole block anticipating exactly this. Bigger card,
   bigger type, more breathing room — add the class alongside .modal-card,
   don't replace it. ── */
.modal-card-wide {
    max-width: 560px;
    padding: 40px 44px 36px;
    border-radius: 20px;
}
.modal-card-wide .modal-title { font-size: 1.35rem; margin-bottom: 10px; }
.modal-card-wide .modal-desc { font-size: 0.92rem; margin-bottom: 22px; }
.modal-card-wide textarea.lform-input { min-height: 130px; font-size: 0.95rem; padding: 14px 16px; }

/* ── Mobile — every modal in the app shares this base (.modal-card,
   .bv-editor-card/.sc-view-card etc. just widen the max-width variant),
   so trimming the padding here is a one-line fix that reaches all of
   them instead of a per-modal patch. ── */
@media (max-width: 480px) {
    .modal-card { padding: 20px 18px; }
    .modal-card-wide { padding: 24px 20px; border-radius: 16px; }
    .modal-card-wide .modal-title { font-size: 1.15rem; }
}

/* Profile picture (see amsSetAvatar in js/publicvariable.js) */
.ams-avatar-img { background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; color: transparent !important; font-size: 0 !important; }