/* Cookie consent banner - built and mounted entirely by assets/12_consent.js.
   Its own file (moved out of 01_general.css) because two documents need it:
   Dash auto-links it on every app page, and the server-rendered landing page
   (templates/landing/index.html) links just this file instead of the app's
   whole stylesheet. The landing page defines the few theme variables it reads
   (--bg-color, --text-main, ...) in its own inline CSS. */

/* --- Marketing cookie consent banner -------------------------------------
   Built and mounted entirely by assets/12_consent.js, which appends it to
   document.body outside the Dash tree - same "zero permanent Dash
   components" reasoning as .cg-busy-bar/.cg-busy-pill above. Only ever
   shown on the six public marketing paths (see PUBLIC_PATHS in
   pages/callbacks/app_session_callbacks.py); a signed-in teacher on the
   gradebook never sees it, since assets/14_tags.js's whole reason for
   existing - ad tags - is confined to those same paths.
   z-index matches .cg-busy-bar/.cg-busy-pill (10070): a banner blocking a
   modal beneath it would be as wrong as a busy-pill doing the same. */
.cg-consent-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10070;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 24px;
    /* --bg-color, NOT --glass-bg: --glass-bg is a 3-5% tint meant to sit on
       top of an already-opaque card/page background (see its definition in
       theme-dark.css/theme-light.css) - used bare, on a fixed overlay with
       nothing solid behind it, --text-main ends up rendered over whatever
       happens to show through instead of a real background, which is what
       made the banner's text unreadable in dark mode. --bg-color is each
       theme's actual solid page background, guaranteeing contrast with
       --text-main regardless of what's scrolled underneath. */
    background: var(--bg-color);
    border-top: 1px solid var(--glass-border);
    backdrop-filter: blur(8px);
    color: var(--text-main);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.35);
}
.cg-consent-banner-text {
    flex: 1 1 320px;
    font-size: 0.9rem;
    line-height: 1.5;
}
.cg-consent-banner-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.cg-consent-banner button {
    border-radius: 8px;
    padding: 9px 18px;
    font-weight: 600;
    font-size: 0.85rem;
    border: 1px solid var(--glass-border);
    background: transparent;
    color: var(--text-main);
    cursor: pointer;
}
.cg-consent-banner button.cg-consent-accept {
    border: none;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    color: #fff;
}

/* Settings panel: same card treatment, shown in place of the banner text
   when "Manage preferences" is clicked - not a separate dbc.Modal, since
   this script mounts outside Dash entirely. */
.cg-consent-settings-panel {
    flex: 1 1 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.cg-consent-settings-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px solid var(--glass-border);
}
.cg-consent-settings-row:last-of-type {
    border-bottom: none;
}
.cg-consent-settings-row-label {
    font-weight: 600;
    font-size: 0.88rem;
}
.cg-consent-settings-row-desc {
    color: var(--text-muted);
    font-size: 0.8rem;
    margin-top: 2px;
}

@media (max-width: 640px) {
    .cg-consent-banner {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 12px 16px;
    }
    .cg-consent-banner-text {
        flex: 1 1 auto;
        font-size: 0.82rem;
        line-height: 1.4;
    }
    /* One row, not three stacked full-width buttons: the stack is what made
       this banner fill most of a phone screen. Accept and Reject keep the same
       width and weight (German DSK equal-prominence guidance); only the
       settings label is shorter. */
    .cg-consent-banner-actions {
        flex-wrap: nowrap;
        gap: 8px;
    }
    .cg-consent-banner-actions button {
        flex: 1 1 0;
        min-width: 0;
        padding: 8px 6px;
        font-size: 0.78rem;
        white-space: nowrap;
    }
}