/* ══════════════════════════════════════════════════════════════════════════════
   global.css  —  EmailFeed shared styles
   Covers: CSS custom properties (design tokens), top nav, footer, layout offset
   Loaded on every app page via includes/header.php
══════════════════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════════════════════
   DESIGN TOKENS  —  :root CSS custom properties
   All colours, radii, shadows and transitions are defined here so every
   component stays consistent. Edit here first; touch nothing else.
══════════════════════════════════════════════════════════════════════════════ */
:root {

    /* ── Palette ──────────────────────────────────────────────────────────── */
    --bg-page:          #F4F6FA;      /* page background                      */
    --bg-surface:       #FFFFFF;      /* cards, nav, modals                   */
    --bg-elevated:      #F0F2F7;      /* hover tray, table rows               */
    --bg-hover:         #ECEEF4;      /* subtle hover state                   */

    --border-subtle:    #E8EAF0;      /* lightest divider                     */
    --border-mid:       #D4D7E3;      /* input borders, card outlines         */

    --text-primary:     #141820;      /* headings, labels                     */
    --text-secondary:   #3B4260;      /* body copy, active nav                */
    --text-muted:       #7C83A3;      /* placeholders, secondary labels       */

    /* Brand accent — indigo */
    --accent:           #4F5FE8;
    --accent-dark:      #3849D6;
    --accent-dim:       #EEF0FD;      /* pill backgrounds, active nav bg      */
    --accent-glow:      rgba(79, 95, 232, 0.25);

    /* Status colours */
    --green:            #22C55E;
    --green-dim:        #DCFCE7;
    --red:              #EF4444;
    --red-dim:          #FEE2E2;
    --amber:            #F59E0B;
    --amber-dim:        #FEF3C7;

    /* ── Typography ───────────────────────────────────────────────────────── */
    --font-display:     'DM Sans', 'Segoe UI', system-ui, sans-serif;
    --font-body:        'DM Sans', 'Segoe UI', system-ui, sans-serif;
    --font-mono:        'JetBrains Mono', 'Fira Code', monospace;

    /* ── Shape ────────────────────────────────────────────────────────────── */
    --r-sm:             6px;
    --r-md:             10px;
    --r-lg:             14px;
    --r-xl:             20px;

    /* ── Shadows ──────────────────────────────────────────────────────────── */
    --shadow-sm:        0 1px 3px rgba(20, 24, 32, 0.08);
    --shadow-md:        0 4px 12px rgba(20, 24, 32, 0.10);
    --shadow-lg:        0 8px 28px rgba(20, 24, 32, 0.13);

    /* ── Motion ───────────────────────────────────────────────────────────── */
    --t:                160ms ease;

    /* ── Nav dimensions ───────────────────────────────────────────────────── */
    --nav-h:            64px;         /* desktop single row                   */
    --nav-h-mobile:     112px;        /* mobile two rows                      */

    /* ── Layout ───────────────────────────────────────────────────────────── */
    --max-w:            1300px;       /* global max-width cap                 */
}


/* ══════════════════════════════════════════════════════════════════════════════
   RESET / BASE
══════════════════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
    font-family: var(--font-body);
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--text-primary);
    background: var(--bg-page);
    -webkit-font-smoothing: antialiased;
}


/* ══════════════════════════════════════════════════════════════════════════════
   TOP NAVIGATION BAR
   Fixed to top. Single row on desktop; two rows on mobile.

   Desktop (≥ 900 px):
     [logo  200 px]  [nav links — 1fr centre]  [account — 200 px]

   Mobile (< 900 px):
     Row 1 — Logo (left) · Account controls (right)
     Row 2 — Nav links (scrollable)
══════════════════════════════════════════════════════════════════════════════ */

/* ── Nav shell ─────────────────────────────────────────────────────────────── */
.ef-nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 200;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-subtle);
    display: flex;
    flex-direction: column;
}

/* ── Inner grid ────────────────────────────────────────────────────────────── */
/*
   Three explicit columns so the nav links land dead-centre regardless of how
   wide the logo or account areas happen to be:
     col 1 — logo      (200 px fixed)
     col 2 — nav links (stretches, content centred)
     col 3 — account   (200 px fixed)
*/
.ef-nav__inner {
    display: grid;
    grid-template-columns: 200px 1fr 200px;
    grid-template-rows: var(--nav-h);
    align-items: center;
    padding: 0 24px;
    width: 100%;
    max-width: var(--max-w);
    margin: 0 auto;
    gap: 0 16px;
}


/* ── Logo ──────────────────────────────────────────────────────────────────── */
.ef-nav__logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: opacity var(--t);
    justify-self: start;
}

.ef-nav__logo:hover { opacity: 0.75; }

.ef-nav__logo img {
    width: 200px;
    max-height: 40px;          /* keeps logo tidy inside the 64 px bar        */
    object-fit: contain;
    object-position: left center;
    display: block;
}


/* ── Nav links ─────────────────────────────────────────────────────────────── */
.ef-nav__links {
    display: flex;
    align-items: center;
    gap: 2px;
    justify-self: center;      /* dead-centre in the 1fr column               */
}

.ef-nav__link {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: var(--r-sm);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-muted);
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--t), color var(--t);
    position: relative;
}

.ef-nav__link svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    opacity: 0.70;
    transition: opacity var(--t);
}

.ef-nav__link:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.ef-nav__link:hover svg { opacity: 1; }

/* Active / current page state */
.ef-nav__link--active {
    background: var(--accent-dim);
    color: var(--accent-dark);
    font-weight: 600;
}

.ef-nav__link--active svg {
    opacity: 1;
    color: var(--accent);
}


/* ── Account area ──────────────────────────────────────────────────────────── */
.ef-nav__account {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-self: end;         /* stays right in its column                   */
}

/* User initial avatar circle */
.ef-nav__avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent) 0%, #7C3AED 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.75rem;
    color: #fff;
    flex-shrink: 0;
    user-select: none;
    letter-spacing: 0.03em;
    transition: box-shadow var(--t);
    cursor: default;
}

.ef-nav__avatar:focus,
.ef-nav__avatar:hover {
    outline: none;
    box-shadow: 0 0 0 2px var(--bg-surface),
                0 0 0 4px var(--accent-glow),
                0 0 14px var(--accent-glow);
}

/* Logout button */
.ef-nav__logout {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: var(--r-sm);
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-muted);
    background: none;
    border: 1px solid var(--border-mid);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--t), color var(--t), border-color var(--t);
}

.ef-nav__logout svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    opacity: 0.70;
}

.ef-nav__logout:hover {
    background: var(--red-dim);
    color: var(--red);
    border-color: transparent;
}

.ef-nav__logout:hover svg { opacity: 1; }


/* ══════════════════════════════════════════════════════════════════════════════
   LAYOUT OFFSET
   Every app page must clear the fixed nav.
   Use .layout wrapper (opened in header.php, closed in footer.php).
══════════════════════════════════════════════════════════════════════════════ */
.layout {
    padding-top: var(--nav-h);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.layout__content {
    flex: 1;                   /* pushes footer to bottom on short pages      */
}


/* ══════════════════════════════════════════════════════════════════════════════
   FOOTER
   Simple one-row bar: copyright left · links right
══════════════════════════════════════════════════════════════════════════════ */
.ef-footer {
    background: var(--bg-surface);
    border-top: 1px solid var(--border-subtle);
    padding: 18px 24px;
    margin-top: auto;
}

.ef-footer__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    max-width: var(--max-w);
    margin: 0 auto;
    flex-wrap: wrap;           /* wraps gracefully on narrow screens          */
}

/* Copyright text */
.ef-footer__copy {
    font-size: 0.8rem;
    color: var(--text-muted);
    white-space: nowrap;
}

/* Footer nav links */
.ef-footer__links {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.ef-footer__link {
    font-size: 0.8rem;
    color: var(--text-muted);
    text-decoration: none;
    padding: 3px 8px;
    border-radius: var(--r-sm);
    transition: color var(--t), background var(--t);
}

.ef-footer__link:hover {
    color: var(--text-secondary);
    background: var(--bg-elevated);
}

/* Dot separator between footer links */
.ef-footer__dot {
    display: inline-block;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--border-mid);
    flex-shrink: 0;
}


/* ══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE  —  Mobile (< 900 px)
   Row 1: Logo · Account controls (space-between)
   Row 2: Nav links (scrollable, full width)
══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 899px) {

    /* Switch from grid to flex so links can drop to a second row */
    .ef-nav__inner {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        grid-template-columns: unset;
        grid-template-rows: unset;
        height: auto;
        padding: 0;
        gap: 0;
        max-width: 100%;
    }

    /* Row 1: logo + account each fill half the bar */
    .ef-nav__logo,
    .ef-nav__account {
        flex: 1;
        height: 56px;
        display: flex;
        align-items: center;
    }

    .ef-nav__logo   { padding: 0 16px; }
    .ef-nav__account { padding: 0 16px; justify-content: flex-end; }

    /* Constrain logo image on mobile */
    .ef-nav__logo img {
        width: 140px;
        max-height: 32px;
    }

    /* Row 2: full-width scrollable link bar */
    .ef-nav__links {
        order: 3;
        flex: 0 0 100%;
        width: 100%;
        justify-content: flex-start;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 0 12px;
        border-top: 1px solid var(--border-subtle);
        gap: 0;
        height: 48px;
    }

    .ef-nav__links::-webkit-scrollbar { display: none; }

    .ef-nav__link {
        flex-shrink: 0;
        padding: 6px 11px;
        font-size: 0.82rem;
    }

    /* Footer stacks on mobile */
    .ef-footer__inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .layout { padding-top: var(--nav-h-mobile); }
}


/* ── Very narrow (< 400 px): hide logo text, shrink account area ───────────── */
@media (max-width: 400px) {

    .ef-nav__logo img { width: 110px; }

    .ef-nav__logout span { display: none; }   /* icon only on tiny screens   */

    .ef-nav__logout {
        padding: 6px 8px;
        border: none;
    }
}


/* ══════════════════════════════════════════════════════════════════════════════
   PAGE SHELL
   Consistent inner wrapper used by all app pages.
   Centres content, applies horizontal gutters, separates header from body.
══════════════════════════════════════════════════════════════════════════════ */
.ef-page {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 40px 24px 60px;
}


/* ══════════════════════════════════════════════════════════════════════════════
   PAGE HEADER  —  welcome row + action buttons
══════════════════════════════════════════════════════════════════════════════ */
.ef-page__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 28px;
    flex-wrap: wrap;
}

.ef-page__title {
    font-family: var(--font-display);
    font-size: 1.55rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.25;
    margin-bottom: 4px;
}

.ef-page__subtitle {
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.ef-page__subtitle strong {
    color: var(--text-secondary);
    font-weight: 600;
}


/* ══════════════════════════════════════════════════════════════════════════════
   BANNER  —  contextual call-to-action strip
   Usage: <div class="ef-banner ef-banner--info"> … </div>

   Modifier variants:
     --info    blue  (default — used for onboarding prompts)
     --success green
     --warning amber
══════════════════════════════════════════════════════════════════════════════ */
.ef-banner {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 22px;
    border-radius: var(--r-lg);
    margin-bottom: 32px;
    flex-wrap: wrap;
}

/* ── Colour variants ──────────────────────────────────────────────────────── */
.ef-banner--info {
    background: linear-gradient(135deg, #4F5FE8 0%, #6B7BF0 100%);
    color: #fff;
}

.ef-banner--success {
    background: linear-gradient(135deg, #16A34A 0%, #22C55E 100%);
    color: #fff;
}

.ef-banner--warning {
    background: var(--amber-dim);
    color: #92400E;
}

/* ── Icon circle ──────────────────────────────────────────────────────────── */
.ef-banner__icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.20);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ef-banner--warning .ef-banner__icon {
    background: rgba(180, 83, 9, 0.12);
}

.ef-banner__icon svg {
    width: 20px;
    height: 20px;
}

/* ── Body copy ────────────────────────────────────────────────────────────── */
.ef-banner__body {
    flex: 1;
    min-width: 0;
}

.ef-banner__heading {
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 3px;
}

.ef-banner__copy {
    font-size: 0.85rem;
    opacity: 0.88;
    line-height: 1.5;
}

.ef-banner--warning .ef-banner__copy { opacity: 1; }

/* ── CTA button ───────────────────────────────────────────────────────────── */
.ef-banner__cta {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    padding: 9px 18px;
    border-radius: var(--r-md);
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    border: 1px solid rgba(255, 255, 255, 0.30);
    transition: background var(--t), border-color var(--t);
}

.ef-banner__cta svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.ef-banner__cta:hover {
    background: rgba(255, 255, 255, 0.32);
    border-color: rgba(255, 255, 255, 0.50);
}

.ef-banner--warning .ef-banner__cta {
    background: #92400E;
    color: #fff;
    border-color: transparent;
}

.ef-banner--warning .ef-banner__cta:hover {
    background: #78350F;
}


/* ══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE  —  dashboard / page shell
══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 899px) {

    .ef-page {
        padding: 24px 16px 48px;
    }

    .ef-page__title {
        font-size: 1.3rem;
    }

    /* On mobile the banner stacks vertically */
    .ef-banner {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .ef-banner__cta {
        width: 100%;
        justify-content: center;
    }
}


/* ══════════════════════════════════════════════════════════════════════════════
   PULSE STRIP  —  four stat cards in a row
   Each card: coloured icon · label · big number · delta badge · note
══════════════════════════════════════════════════════════════════════════════ */

/* ── Grid shell ───────────────────────────────────────────────────────────── */
.ef-pulse {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 36px;
}

/* ── Individual card ──────────────────────────────────────────────────────── */
.ef-pulse__card {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-lg);
    padding: 22px 24px;
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: flex-start;
    gap: 16px;
    transition: box-shadow var(--t), border-color var(--t);
}

.ef-pulse__card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--border-mid);
}

/* ── Icon circle ──────────────────────────────────────────────────────────── */
.ef-pulse__icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: var(--r-md);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ef-pulse__icon svg {
    width: 22px;
    height: 22px;
}

/* Per-card colour variants */
.ef-pulse__icon--widgets     { background: #EEF0FD; color: var(--accent); }
.ef-pulse__icon--responses   { background: #DCFCE7; color: #16A34A; }
.ef-pulse__icon--avg-rating  { background: #FEF3C7; color: #D97706; }
.ef-pulse__icon--comments    { background: #FCE7F3; color: #DB2777; }

/* ── Body text ────────────────────────────────────────────────────────────── */
.ef-pulse__body {
    flex: 1;
    min-width: 0;
}

.ef-pulse__label {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ef-pulse__value {
    font-family: var(--font-display);
    font-size: 1.9rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.1;
    margin-bottom: 8px;
    white-space: nowrap;
}

.ef-pulse__suffix {
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-muted);
}

/* ── Meta row: delta badge + note ─────────────────────────────────────────── */
.ef-pulse__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Delta badge base */
.ef-pulse__delta {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 99px;
    white-space: nowrap;
}

.ef-pulse__delta svg {
    width: 10px;
    height: 10px;
    flex-shrink: 0;
}

/* Delta colour variants */
.ef-pulse__delta--up    { background: var(--green-dim);  color: #15803D; }
.ef-pulse__delta--down  { background: var(--red-dim);    color: #B91C1C; }
.ef-pulse__delta--flat  { background: var(--bg-elevated); color: var(--text-muted); }
.ef-pulse__delta--new   { background: var(--accent-dim);  color: var(--accent-dark); }

/* Contextual note ("last 30 days", "all time") */
.ef-pulse__note {
    font-size: 0.78rem;
    color: var(--text-muted);
    white-space: nowrap;
}


/* ══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE  —  pulse strip
══════════════════════════════════════════════════════════════════════════════ */

/* Tablet: 2-column grid */
@media (max-width: 1024px) {
    .ef-pulse {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile: single column */
@media (max-width: 599px) {
    .ef-pulse {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .ef-pulse__card {
        padding: 18px 20px;
    }

    .ef-pulse__value {
        font-size: 1.6rem;
    }
}