/* ===== Girlguiding Guides brand ===== */
@font-face {
    font-family: 'Poppins';
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/poppins-400.woff2') format('woff2');
}
@font-face {
    font-family: 'Poppins';
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/poppins-600.woff2') format('woff2');
}
@font-face {
    font-family: 'Poppins';
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/poppins-700.woff2') format('woff2');
}

:root {
    /* Guides colour palette */
    --midnight: #173a86;
    --dusk: #8cb5e2;
    --sky: #b7e2fa;
    --gg-blue: #161b4e;
    --emerald: #00a469;
    --coral: #ff8087;
    --honey: #ffd500;
    --straw: #ffea70;
    --candy: #f3a1c6;
    --mint: #8fd7b9;
    --ink: #1d1d1b;
    --white: #ffffff;

    --radius: 16px;
    --shadow: 0 2px 10px rgba(23, 58, 134, .12);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: 'Poppins', 'Segoe UI', system-ui, sans-serif;
    color: var(--ink);
    background: linear-gradient(180deg, var(--sky) 0%, #e8f5fd 40%, #ffffff 100%) fixed;
    min-height: 100vh;
}

h1, h2, h3 { color: var(--midnight); font-weight: 700; line-height: 1.15; }
h1 { font-size: 1.6rem; margin: .4rem 0 .6rem; }
h2 { font-size: 1.15rem; }

a { color: var(--midnight); }

.muted { color: #5a6478; }
.small { font-size: .85rem; }
.error { color: #c0303a; font-weight: 600; }

/* ===== Header ===== */
.topbar {
    background: var(--midnight);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .4rem .8rem;
    flex-wrap: wrap;
    padding: .45rem .9rem;
    position: sticky;
    top: 0;
    z-index: 10;
    box-shadow: var(--shadow);
}
.brand {
    display: flex;
    align-items: center;
    gap: .6rem;
    color: var(--white);
    text-decoration: none;
    font-weight: 700;
    font-size: 1.15rem;
    min-width: 0;
}
.brand img { height: 40px; width: 40px; border-radius: 8px; flex: none; }
.topnav { display: flex; gap: 1.3rem; }
.topnav a {
    color: var(--sky);
    text-decoration: none;
    font-weight: 600;
    font-size: .95rem;
    padding: .35rem 0;
}
/* On narrow screens the nav drops to its own full-width row under the title. */
@media (max-width: 600px) {
    .brand { font-size: 1.05rem; flex: 1 1 100%; }
    .topnav {
        flex: 1 1 100%;
        justify-content: flex-start;
        gap: 1.6rem;
        border-top: 1px solid rgba(255, 255, 255, .18);
        padding-top: .35rem;
    }
}
.topnav a:active { color: var(--white); }

.container { max-width: 720px; margin: 0 auto; padding: 1rem .9rem 3rem; }

.flash {
    background: var(--mint);
    color: var(--gg-blue);
    border-radius: var(--radius);
    padding: .7rem 1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    box-shadow: var(--shadow);
}

.page-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.back { display: inline-block; margin-bottom: .4rem; font-weight: 600; text-decoration: none; }

/* ===== Buttons & forms ===== */
button, input, select, textarea { font: inherit; }

.btn-primary, .btn-secondary, .btn-approve, .btn-reject, .btn-small, .file-label {
    display: inline-block;
    border: 0;
    border-radius: 999px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
}
.btn-primary {
    background: var(--midnight);
    color: var(--white);
    padding: .75rem 1.6rem;
    font-size: 1rem;
}
.btn-primary:disabled { opacity: .45; cursor: default; }
.btn-big { width: 100%; padding: 1rem; font-size: 1.1rem; }
.btn-secondary { background: var(--dusk); color: var(--gg-blue); padding: .6rem 1.2rem; }
.btn-approve { background: var(--emerald); color: var(--white); padding: .9rem 1.4rem; font-size: 1.05rem; }
.btn-reject { background: var(--coral); color: var(--gg-blue); padding: .9rem 1.2rem; }
.btn-small { background: var(--dusk); color: var(--gg-blue); padding: .3rem .8rem; font-size: .85rem; }
.btn-danger { background: var(--coral); }

form label { display: block; font-weight: 600; margin: .7rem 0 .25rem; color: var(--gg-blue); }
form label.check { display: flex; align-items: center; gap: .5rem; }
input[type=text], input[type=password], input[type=number], input[type=time],
input:not([type]), textarea, select {
    width: 100%;
    padding: .65rem .8rem;
    border: 2px solid var(--dusk);
    border-radius: 12px;
    background: var(--white);
    font-size: 1rem;
}
input:focus, textarea:focus, select:focus { outline: 3px solid var(--sky); border-color: var(--midnight); }
form button[type=submit] { margin-top: .9rem; }

.inline-form { display: flex; align-items: end; gap: .6rem; flex-wrap: wrap; }
.inline-form label { margin: 0; }
.inline-form input, .inline-form select { width: auto; }
.inline-form button { margin-top: 0 !important; }
.form-row { display: flex; gap: .8rem; flex-wrap: wrap; }
.form-row label { flex: 1 1 8rem; }

fieldset {
    border: 2px solid var(--sky);
    border-radius: var(--radius);
    margin: 1rem 0;
    padding: .8rem 1rem;
}
legend { font-weight: 700; color: var(--midnight); padding: 0 .4rem; }

/* ===== Join / login ===== */
.join-card, .countdown-card {
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.6rem 1.4rem;
    margin: 2rem auto 0;
    max-width: 420px;
    text-align: center;
}
.join-logo { width: 96px; height: 96px; border-radius: 18px; }
.join-card form { text-align: left; }
.join-card .btn-primary { width: 100%; margin-top: 1rem; }

/* ===== Countdown ===== */
.countdown {
    font-size: 3.2rem;
    font-weight: 700;
    color: var(--midnight);
    letter-spacing: 2px;
    margin: .6rem 0;
    font-variant-numeric: tabular-nums;
}

/* ===== Mission list ===== */
.mission-list {
    display: flex;
    flex-direction: column;
    gap: .7rem;
    margin-top: .8rem;
}
.mission-card {
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: .85rem 1rem;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    gap: .25rem;
    border-left: 8px solid var(--dusk);
}
.mission-card.type-photo { border-left-color: var(--candy); }
.mission-card.type-video { border-left-color: var(--coral); }
.mission-card.type-gpscheckin { border-left-color: var(--mint); }
.mission-card.type-textanswer { border-left-color: var(--straw); }
.mission-top { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.mission-type { font-size: .78rem; font-weight: 600; color: #5a6478; }
.mission-title { font-weight: 700; font-size: 1.1rem; color: var(--gg-blue); }
.mission-points { font-size: .85rem; font-weight: 700; color: var(--midnight); white-space: nowrap; }
.mission-desc { font-size: .92rem; color: #47506a; line-height: 1.35; }
.mission-card.status-approved { opacity: .7; background: #f2fbf7; }
.mission-card.status-approved .mission-desc { display: none; }
.mission-card .badge { margin-top: .3rem; }

.badge {
    align-self: flex-start;
    border-radius: 999px;
    padding: .15rem .6rem;
    font-size: .75rem;
    font-weight: 700;
}
.badge-done { background: var(--emerald); color: var(--white); }
.badge-pending { background: var(--honey); color: var(--ink); }
.badge-rejected { background: var(--coral); color: var(--gg-blue); }

/* ===== Do page ===== */
.do-card {
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.2rem 1.1rem 1.5rem;
    border-top: 8px solid var(--dusk);
}
.do-card.type-photo { border-top-color: var(--candy); }
.do-card.type-video { border-top-color: var(--coral); }
.do-card.type-gpscheckin { border-top-color: var(--mint); }
.do-card.type-textanswer { border-top-color: var(--straw); }
.mission-points-big { font-weight: 700; color: var(--midnight); margin: 0 0 .6rem; }
.mission-desc { font-size: 1.05rem; }

.state {
    border-radius: 12px;
    padding: .9rem 1rem;
    font-weight: 600;
    margin: .8rem 0;
}
.state span { display: block; font-weight: 400; margin-top: .3rem; }
.state-done { background: #dff5ec; color: #045b3c; }
.state-pending { background: var(--straw); color: #6b5b00; }
.state-rejected { background: #ffe4e6; color: #a12832; }

.upload-thumb { max-width: 100%; max-height: 260px; border-radius: 12px; margin-top: .6rem; }
.progress-wrap {
    background: var(--sky);
    border-radius: 999px;
    height: 14px;
    margin: .7rem 0 .3rem;
    overflow: hidden;
}
.progress-bar {
    background: var(--emerald);
    height: 100%;
    width: 0;
    border-radius: 999px;
    transition: width .3s;
}
.file-label { background: var(--midnight); color: var(--white); padding: 1rem; width: 100%; margin-top: .5rem; }

/* ===== Leaderboard ===== */
.banner {
    border-radius: var(--radius);
    padding: .9rem 1.1rem;
    font-weight: 700;
    margin: .6rem 0 1rem;
    box-shadow: var(--shadow);
}
.banner span, .banner p { font-weight: 400; display: block; margin: .25rem 0 0; }
.banner-over { background: var(--honey); color: var(--ink); }
.banner-warn { background: var(--straw); color: var(--ink); }

.leaderboard-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--white);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
}
.leaderboard-table th {
    background: var(--midnight);
    color: var(--white);
    text-align: left;
    padding: .6rem .8rem;
    font-size: .85rem;
}
.leaderboard-table td { padding: .65rem .8rem; border-top: 1px solid #eef3fb; }
.leaderboard-table .rank { width: 2.4rem; font-weight: 700; }
.leaderboard-table .name { font-weight: 600; color: var(--gg-blue); }
.leaderboard-table .points { font-weight: 700; color: var(--midnight); }
.leaderboard-table tr.me { background: var(--sky); }

/* ===== Gallery ===== */
.gallery {
    columns: 2;
    column-gap: .6rem;
    margin-top: .8rem;
}
@media (min-width: 620px) {
    .gallery { columns: 3; }
}
.gallery-item {
    break-inside: avoid;
    margin: 0 0 .6rem;
    background: var(--white);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow);
}
.gallery-item img,
.gallery-item video {
    width: 100%;
    display: block;
    background: var(--sky);
}
.gallery-cap {
    padding: .45rem .6rem .55rem;
    font-size: .82rem;
    line-height: 1.25;
}
.gallery-cap strong { color: var(--gg-blue); }

/* ===== Admin ===== */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: .7rem;
    margin: .8rem 0;
}
.stat-card {
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1rem;
    text-align: center;
    text-decoration: none;
}
.stat-card.stat-alert { background: var(--honey); }
.stat-num { display: block; font-size: 1.8rem; font-weight: 700; color: var(--midnight); }
.stat-label { color: #5a6478; font-weight: 600; font-size: .85rem; }

.admin-panel {
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1rem 1.1rem;
    margin: 1rem 0;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--white);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    font-size: .92rem;
}
.admin-table th { background: var(--midnight); color: var(--white); text-align: left; padding: .5rem .7rem; }
.admin-table td { padding: .5rem .7rem; border-top: 1px solid #eef3fb; vertical-align: middle; }
.admin-table tr.inactive { opacity: .5; }
.admin-table .actions { display: flex; gap: .3rem; flex-wrap: wrap; }
.admin-table .actions form { display: inline; }
.admin-table .inline-form input { width: 9rem; padding: .3rem .5rem; }

.chip {
    display: inline-block;
    border-radius: 999px;
    padding: .1rem .55rem;
    font-size: .75rem;
    font-weight: 700;
}
.chip-warn { background: var(--straw); color: #6b5b00; }
.chip-off { background: #e2e6ee; color: #5a6478; }
.chip-pending { background: var(--honey); color: var(--ink); }
.chip-approved { background: var(--emerald); color: var(--white); }
.chip-rejected { background: var(--coral); color: var(--gg-blue); }

/* ===== Review ===== */
.review-card {
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1rem 1.1rem 1.3rem;
}
.review-meta { display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap; font-size: 1.05rem; }
.review-media {
    max-width: 100%;
    max-height: 65vh;
    border-radius: 12px;
    display: block;
    margin: .6rem auto;
    background: var(--ink);
}
.review-answer {
    background: var(--sky);
    border-radius: 12px;
    padding: .9rem 1rem;
    margin: .8rem 0;
    font-size: 1.2rem;
}
.review-answer strong { display: block; }
.review-actions { display: flex; gap: .7rem; margin-top: 1rem; align-items: stretch; flex-wrap: wrap; }
.review-actions form { display: flex; gap: .5rem; flex: 1 1 12rem; }
.review-actions .btn-approve { flex: 1; }
.reject-form input { flex: 2; }

/* ===== QR sheet ===== */
.qr-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}
.qr-card {
    background: var(--white);
    border: 3px dashed var(--dusk);
    border-radius: var(--radius);
    padding: 1rem;
    text-align: center;
    page-break-inside: avoid;
    break-inside: avoid;
}
.qr-card h2 { margin: .4rem 0; }
.qr-logo { width: 56px; height: 56px; border-radius: 10px; }
.qr-img { width: 180px; height: 180px; image-rendering: pixelated; }
.qr-token { font-family: Consolas, monospace; font-size: 1.3rem; font-weight: 700; letter-spacing: 3px; margin: .3rem 0; }
.qr-url { font-size: .8rem; color: #5a6478; overflow-wrap: anywhere; word-break: break-word; }
.qr-url strong { color: var(--midnight); }

@media print {
    .topbar, .no-print, .flash { display: none !important; }
    body { background: var(--white); }
    .container { max-width: none; padding: 0; }
    .qr-card { border-color: #999; }
}

/* ===== Small screens ===== */
@media (max-width: 420px) {
    h1 { font-size: 1.35rem; }
}