/*-----------------------------------------------------------------------------
 * Project : ai4good - CFP Arts
 * File    : frontend/css/app-shell.css
 * Stylesheet : app shell
 * Author  : Johann Sievering
 * AI Support : Claude AI
 * Date    : 2026-06-11 (start of the project)
 * Rev     : 2026-07-03 Full code review: bug fixes, hardening, cartridge headers (Claude AI)
 * Version : 0.9.0
 *-----------------------------------------------------------------------------
 * Fixed header, bottom tab bar, content shell and their responsive rules.
 *---------------------------------------------------------------------------*/

/* =====================================================================
 * app-shell.css — sticky header + footer + scrollable content area.
 *
 * Required after variables.css. Adapted from ISAI's app-shell with our
 * brand palette and our 5-section footer (Home / Scan / Assemble /
 * Analyse / About).
 *
 *   ┌─────────────────────────────────────┐ ← .app-header (fixed top)
 *   │  AI4Good · Atelier      FR EN DE IT │
 *   ├─────────────────────────────────────┤
 *   │                                     │
 *   │           .app-content              │ ← scrollable
 *   │                                     │
 *   ├─────────────────────────────────────┤
 *   │ 🏠   📷   🧩   ✨   ℹ️             │ ← .app-footer (fixed bottom)
 *   └─────────────────────────────────────┘
 * ===================================================================== */

/* ── Body reset ─────────────────────────────────────────────────────── */
body.app {
    margin: 0;
    padding: 0;
    font-family: var(--font-family);
    color: var(--text);
    background: var(--bg);
    line-height: var(--line-height);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;

    opacity: 0;                           /* FOUC prevention until JS init */
}
body.app.ready {
    opacity: 1;
    transition: opacity 0.15s ease-in;
}

/* ── Header ────────────────────────────────────────────────────────── */
.app-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--header-height);
    z-index: var(--z-header);

    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--space-md);

    background: linear-gradient(135deg, var(--blue-900) 0%, var(--blue) 100%);
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.app-header__brand {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    text-decoration: none;
    color: #fff;
    white-space: nowrap;
    user-select: none;
    -webkit-user-select: none;
    transition: opacity var(--transition-fast);
}
.app-header__brand:hover { opacity: 0.85; }

.app-header__brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}
.app-header__title {
    font-size: var(--font-size-lg);
    font-weight: 700;
    letter-spacing: 0.03em;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.app-header__subtitle {
    font-size: 0.65rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255,255,255,0.8);
}

/* ── Right side of the header: user badge + language pills ───────── */
.app-header__right {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    min-width: 0;               /* lets the badge's name ellipsize */
    position: relative;         /* anchors the badge's dropdown menu */
}

/* Dropdown under the badge: "my space" + sign out. */
.app-header__menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 13rem;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.25);
    padding: 6px;
    z-index: 50;
    display: flex;
    flex-direction: column;
}
.app-header__menu-item {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border: none;
    border-radius: 8px;
    background: none;
    color: #1a1a1a;
    font: inherit;
    font-weight: 600;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}
.app-header__menu-item:hover { background: #eef3f8; }

/* Signed-in user badge (hidden for visitors; filled by AppHeader.js). */
.app-header__user {
    border: none;
    font: inherit;
    cursor: pointer;
}
.app-header__user {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(4px);
    color: #fff;
    font-size: var(--font-size-sm);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.app-header__user:hover { background: rgba(255,255,255,0.28); }
.app-header__user-name {
    max-width: 9rem;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Small phones: the name would crowd the pills — keep just the icon. */
@media (max-width: 480px) {
    .app-header__user-name { display: none; }
}

/* ── Language pills (inside the header) ──────────────────────────── */
.app-header__langs {
    display: flex;
    gap: 2px;
    background: rgba(255,255,255,0.15);
    border-radius: var(--radius-pill);
    padding: 2px;
    backdrop-filter: blur(4px);
}

.lang-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 10px;
    min-width: 36px;
    min-height: 36px;
    border: none;
    border-radius: var(--radius-pill);
    background: transparent;
    color: rgba(255,255,255,0.75);
    font: inherit;
    font-size: var(--font-size-xs);
    font-weight: 600;
    cursor: pointer;
    line-height: 1;
    transition: background var(--transition-fast), color var(--transition-fast);
    -webkit-tap-highlight-color: transparent;
}
.lang-pill:hover {
    background: rgba(255,255,255,0.15);
    color: #fff;
}
.lang-pill--active,
.lang-pill--active:hover {
    background: rgba(255,255,255,0.92);
    color: var(--blue-900);
}

/* ── Content area ─────────────────────────────────────────────────── */
.app-content {
    min-height: 100vh;
    max-width: 760px;
    margin: 0 auto;
    box-sizing: border-box;
    padding-top:    calc(var(--header-height) + var(--space-md));
    padding-bottom: calc(var(--footer-height) + env(safe-area-inset-bottom, 0px) + var(--space-md));
    padding-left:   var(--space-md);
    padding-right:  var(--space-md);
}

/* ── Footer navigation ────────────────────────────────────────────── */
.app-footer {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: calc(var(--footer-height) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    z-index: var(--z-footer);

    display: flex;
    align-items: center;
    justify-content: space-around;

    background: var(--bg-card);
    box-shadow: 0 -1px 4px rgba(0,0,0,0.08);
}

.app-footer__item {
    flex: 1;
    height: 100%;
    padding: var(--space-xs) 0;
    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;

    text-decoration: none;
    color: var(--text-light);
    font-size: var(--font-size-xs);
    font-weight: 500;
    transition: color var(--transition-fast);

    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    cursor: pointer;
}
.app-footer__item:hover { color: var(--primary); }

.app-footer__icon {
    font-size: 1.35rem;
    line-height: 1;
}
.app-footer__label {
    font-size: 0.7rem;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 80px;
    text-align: center;
}

.app-footer__item--active {
    color: var(--primary);
    font-weight: 700;
}
.app-footer__item--active .app-footer__icon { transform: scale(1.1); }

/* Section-specific active colors (one accent per tab).
   data-section values are set by AppFooter.js — keep both in sync. */
.app-footer__item--active[data-section="accueil"] { color: var(--section-accueil); }
.app-footer__item--active[data-section="compose"] { color: var(--section-compose); }
.app-footer__item--active[data-section="create"]  { color: var(--section-create);  }
.app-footer__item--active[data-section="learn"]   { color: var(--section-learn);   }
.app-footer__item--active[data-section="contact"] { color: var(--section-contact); }
.app-footer__item--active[data-section="more"]    { color: var(--section-more);    }

/* ── Desktop-only shell elements (header nav, © page footer) ──────────
   Built by AppFooter on EVERY page that mounts the shell — participant
   AND admin. Hidden by default; the desktop block below reveals and
   styles them behind the ≥1200px + mouse gate (phones and tablets never
   match it — the mobile interfaces stay untouched). */
.app-header__nav { display: none; }
.app-pagefoot    { display: none; }

/* « Mode développement » — shown only when the server is not in production
   (public config appEnv). In the header on phones and tablets, in the page
   foot on desktop (the header copy hides once the foot exists). */
.dev-note {
    display: inline-flex; align-items: center;
    padding: 2px 8px; border-radius: var(--radius-pill);
    font-size: var(--font-size-xs); font-weight: 700; white-space: nowrap;
    color: var(--orange); background: var(--orange-50); border: 1px solid var(--orange);
}
/* A site label (APP_LABEL, e.g. PREVIEW): blue, next to the app name. */
.dev-note--label, .app-header__label {
    display: inline-flex; align-items: center; vertical-align: middle;
    margin-left: 6px; padding: 1px 7px; border-radius: var(--radius-pill);
    font-size: 0.7em; font-weight: 800; letter-spacing: 0.04em; white-space: nowrap;
    color: var(--blue-900); background: var(--blue-50); border: 1px solid var(--blue);
    text-shadow: none;          /* the header title's shadow stops at the pill */
}

@media (min-width: 1200px) and (hover: hover) and (pointer: fine) {

    /* The bottom tab bar gives way to the header navigation. */
    .app-footer { display: none; }

    .app-header__nav {
        display: flex;
        align-items: center;
        gap: 4px;
        margin: 0 var(--space-lg);
        flex: 1;
        min-width: 0;
    }
    .app-header__nav-item {
        padding: 8px 14px;
        border-radius: var(--radius-pill);
        color: rgba(255, 255, 255, 0.82);
        text-decoration: none;
        font-size: var(--font-size-sm);
        font-weight: 600;
        white-space: nowrap;
        cursor: pointer;
        transition: background var(--transition-fast), color var(--transition-fast);
    }
    .app-header__nav-item:hover {
        background: rgba(255, 255, 255, 0.14);
        color: #fff;
    }
    .app-header__nav-item--active,
    .app-header__nav-item--active:hover {
        background: rgba(255, 255, 255, 0.22);
        color: #fff;
        font-weight: 700;
    }

    /* The "⋮" menu: compact anchored dropdown (Matériel AV pattern). */
    .app-header__nav-more { position: relative; display: inline-flex; }
    .app-header__nav-ellipsis {
        border: 0;
        background: transparent;
        font: inherit;
        font-size: 1.15rem;
        font-weight: 700;
        line-height: 1;
        padding: 8px 12px;
    }
    .app-header__more {
        display: none;
        position: absolute;
        top: calc(100% + 10px);
        left: 0;
        min-width: 15rem;
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
        padding: 6px;
        z-index: 60;
    }
    .app-header__more.open { display: block; }
    .app-header__more-item {
        display: block;
        padding: 10px 14px;
        border-radius: var(--radius-sm);
        color: var(--text);
        text-decoration: none;
        font-size: var(--font-size-sm);
        font-weight: 600;
        white-space: nowrap;
    }
    .app-header__more-item:hover { background: var(--gray-50); color: var(--blue-900); }

    /* Slim © page footer — a FIXED full-width bar, always visible, one
       step darker than the canvas (hex fallback where color-mix is
       missing):  © 2026 Swiss Informatics Society · Atelier Prompt vX ·
       Vie privée */
    .app-pagefoot {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: var(--z-footer);
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: baseline;
        gap: 4px 10px;
        padding: 12px var(--space-lg);
        font-size: var(--font-size-xs);
        color: var(--text-light);
        border-top: 1px solid var(--border);
        background: #E8E5DB;
        background: color-mix(in srgb, var(--gray-50) 70%, var(--gray-border) 30%);
        box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.06);
    }
    .app-pagefoot__dot { user-select: none; }
    .app-pagefoot__link {
        color: var(--text-light);
        font-weight: 600;
        text-decoration: none;
        transition: color var(--transition-fast);
    }
    .app-pagefoot__link:hover { color: var(--blue-900); text-decoration: underline; }
    .app-pagefoot__app { color: var(--text); font-weight: 700; }
    .app-pagefoot__app:hover { color: var(--blue-900); }
    .app-header__dev { display: none; }          /* the page foot shows it here */
}

/* ── Responsive ───────────────────────────────────────────────────── */
@media (max-width: 599px) {
    .app-header        { padding: 0 var(--space-sm); }
    .app-header__title { font-size: 1rem; }
    .app-content       { padding-left: var(--space-sm); padding-right: var(--space-sm); }
    .app-footer__icon  { font-size: 1.15rem; }
    .app-footer__label { font-size: 0.6rem; max-width: 56px; }
}

@media (min-width: 1024px) {
    .app-header        { padding: 0 var(--space-xl); }
    .app-header__title { font-size: var(--font-size-xl); }
    .app-header__subtitle { font-size: 0.7rem; }
    .app-content       { padding-left: var(--space-xl); padding-right: var(--space-xl); }
    .app-footer__icon  { font-size: 1.5rem; }
}