/* ATF Portal — Base Stylesheet (shared by client, vendor, and staff pages)
   Source: d:\GC\scripts\alltimefavorites.com\cloudflare\public-assets\atf-portal-base.css
   Served:  https://atfapps.alltimefavorites.com/public/atf-portal-base.css
   Update:  gcloud storage cp "d:\GC\scripts\alltimefavorites.com\cloudflare\public-assets\atf-portal-base.css" gs://atfpublic/atf-portal-base.css --content-type "text/css"
*/

/* ── CSS Custom Properties ────────────────────────────────────
   Each page sets --atf-bg inline (PHP-injected from JWT/DB).
   All other vars are overridable per-account or per-theme.
   Client users: --atf-bg only (for now). Vendors: --atf-accent + --atf-font coming.
──────────────────────────────────────────────────────────────── */
:root {
    --atf-bg:           #e8ecf0;          /* page background — overridden per page */
    --atf-font:         Helvetica, Arial, sans-serif;
    --atf-accent:       #0066cc;          /* primary blue */
    --atf-accent-dark:  #0055aa;          /* hover state */
    --atf-accent-light: #f0f6ff;          /* card hover bg */
    --atf-accent-text:  #fff;             /* text on accent bg */
    --atf-text:         #333;             /* primary text */
    --atf-text-muted:   #555;             /* secondary text */
    --atf-text-light:   #888;             /* placeholder / empty state */
    --atf-card-bg:      #fff;             /* card/panel background */
    --atf-border:       #ddd;             /* dividers and table borders */
}

/* ── Reset & Base ─────────────────────────────────────────── */
* { box-sizing: border-box; }
html, body {
    background-color: var(--atf-bg);
}
body {
    padding: 12px;
    font-family: var(--atf-font);
    color: var(--atf-text);
}
img { max-width: 100%; height: auto; }

/* ── Links ────────────────────────────────────────────────── */
a:link    { text-decoration: none; }
a:visited { text-decoration: none; }
a:hover   { text-decoration: underline; }

/* ── Layout ───────────────────────────────────────────────── */
.page-wrap {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}
.page-wrap-narrow {
    max-width: 560px;
    margin: 0 auto;
    text-align: center;
}

/* ── Typography ───────────────────────────────────────────── */
.page-title   { font-size: clamp(16px, 4vw, 22px); margin: 0 0 8px; font-weight: bold; }
.section-head {
    font-size: clamp(16px, 4vw, 20px);
    font-weight: bold;
    color: var(--atf-accent);
    margin: 28px 0 12px 0;
    text-align: center;
}
.signed-in { font-size: clamp(14px, 3.5vw, 18px); margin: 4px 0; }
.sub-info  { font-size: clamp(12px, 3vw, 15px); color: var(--atf-text-muted); margin: 4px 0; }
.empty-msg { color: var(--atf-text-light); text-align: center; font-size: 14px; padding: 16px 0; }

/* ── Navigation / Switch Buttons ──────────────────────────── */
.switch-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    background: #f5f5f5;
    border: 1px solid #aaa;
    border-radius: 6px;
    padding: 10px 18px;
    text-decoration: none;
    color: var(--atf-text);
    font-size: 14px;
    margin: 4px;
}
.switch-btn:hover { background: #e8e8e8; text-decoration: none; }

/* ── Primary Action Button ────────────────────────────────── */
.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    background: var(--atf-accent);
    color: var(--atf-accent-text);
    border: none;
    border-radius: 6px;
    padding: 10px 24px;
    font-size: 15px;
    font-weight: bold;
    text-decoration: none;
    cursor: pointer;
    margin: 4px;
}
.btn-primary:hover { background: var(--atf-accent-dark); text-decoration: none; color: var(--atf-accent-text); }

/* ── Forms ────────────────────────────────────────────────── */
.form-wrap {
    max-width: 480px;
    margin: 0 auto;
    text-align: left;
}
.form-wrap label { display: block; font-size: 14px; margin: 12px 0 4px; color: var(--atf-text); }
.form-wrap input,
.form-wrap select,
.form-wrap textarea {
    width: 100%;
    padding: 9px 12px;
    font-size: 14px;
    border: 1px solid #bbb;
    border-radius: 5px;
    min-height: 44px;
}

/* ── Footer ───────────────────────────────────────────────── */
.page-footer {
    font-size: 13px;
    color: var(--atf-text-muted);
    margin: 16px 0 4px;
    text-align: center;
}

/* ── ATF Page Header ──────────────────────────────────────── */
.atf-logo-wrap { text-align: center; padding: 12px 0 4px; }
.atf-logo { max-width: 220px; height: auto; }
.atf-tagline {
    font-size: clamp(11px, 2.8vw, 13px);
    color: var(--atf-text-muted);
    margin-top: 5px;
    font-style: italic;
}
.atf-nav-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 4px;
    padding: 6px 2px;
    margin-top: 4px;
}
.atf-breadcrumb {
    font-size: clamp(13px, 3.5vw, 15px);
    color: var(--atf-text-muted);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px;
}
.atf-bc-sep     { color: #aaa; margin: 0 3px; }
.atf-bc-link    { color: var(--atf-accent); }
.atf-bc-link:hover { text-decoration: underline; }
.atf-bc-current { color: var(--atf-text); font-weight: bold; }
.atf-right-nav {
    font-size: clamp(13px, 3.5vw, 15px);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px;
    white-space: nowrap;
}
.atf-rnav-link       { color: var(--atf-accent); }
.atf-rnav-link:hover { text-decoration: underline; }
.atf-rnav-sep        { color: #bbb; }
.atf-signed-in-bar {
    font-size: clamp(13px, 3.5vw, 16px);
    margin: 4px 0 6px;
    text-align: center;
}
.atf-header-hr { border: none; border-top: 1px solid var(--atf-border); margin: 8px 0 14px; }