/* ===================================================================
   P&DAA — Peterborough & District Angling Association
   Brand stylesheet shared by expenses.html and accounting.html
   Brand: green ring + white logotype on black, accent emerald.
   Pattern follows Hydroscape Hub conventions (Hanken Grotesk,
   white panels, rounded corners, slate-grey body text).
   =================================================================== */

:root {
    /* Aligned to the public site (pdaa-site.css) on 5 September 2026. The green
       ramp, the neutrals and the gold are lifted from there so the CRM and
       fishinginpeterborough.co.uk read as one estate rather than two products.
       Status colours below are deliberately NOT rethemed: a rejected pill has
       to read red and a pending one amber, whatever the brand palette is. */
    --pdaa-green:        #16a34a;   /* site --green-500, already identical */
    --pdaa-green-dark:   #1b5e20;   /* site --green-700 */
    --pdaa-green-soft:   #eef5ef;   /* site --green-050 */
    --pdaa-black:        #16201a;   /* site --ink */
    --pdaa-text:         #2f3d34;   /* one step up from ink, same hue family */
    --pdaa-muted:        #5c6a60;   /* site --muted */
    --pdaa-faint:        #6a7a6f;   /* lighter step on the same ramp. Was #8b9a8f,
                                     which measured 2.95 on white and failed AA
                                     on hints, footers and muted labels across
                                     ten pages. This is 4.54 on the same hue. */
    --pdaa-line:         #e0e8e1;   /* site --line */
    --pdaa-bg:           #f5f8f5;   /* site --bg */
    --pdaa-card:         #ffffff;   /* site --card */
    --pdaa-amber:        #f59e0b;   /* status, unchanged */
    --pdaa-red:          #dc2626;   /* status, unchanged */
    --pdaa-blue:         #2563eb;   /* status, unchanged */

    /* From the site, so the two share a shape language. The 2px green card
       outline is kept: it is the CRM's own signature and Rob wants it. */
    --pdaa-gold:         #e9b949;   /* site --gold */
    --pdaa-radius:       16px;
    --pdaa-radius-sm:    10px;
    --pdaa-shadow:       0 1px 2px rgba(15,40,20,.05), 0 8px 24px rgba(15,40,20,.07);
    --pdaa-shadow-lg:    0 12px 44px rgba(15,40,20,.16);
}

* { box-sizing: border-box; }
html {
    margin: 0;
    padding: 0;
    background: var(--pdaa-bg);
    min-height: 100vh;
}
/* The Office runs on the public site's stylesheet, loaded first. Everything
   here is the application layer on top of it. body deliberately sets almost
   nothing: --bg, --font, --ink and the line height all come from the site, so
   a page here and a page there are painted by the same rules. */
body {
    margin: 0;
    padding: 0;
    color: var(--pdaa-text);
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
}
/* The bridge photograph that used to sit behind every page has gone. The
   public site paints a flat --bg and puts its photography inside the content,
   which is the look this now follows. The image itself is still in the pack;
   put it back here if that decision is reversed. */
a { color: var(--pdaa-green-dark); }

/* ── Page shell ─────────────────────────────────────────────────── */
.page-shell {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 16px 80px;
}

/* ── Header (form) ──────────────────────────────────────────────── */
.form-header {
    background: var(--pdaa-card);
    border: 1px solid var(--pdaa-line);
    border-radius: 16px;
    padding: 18px 22px;
    margin-top: 16px;
    margin-bottom: 16px;
}
.logo-block {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    color: inherit;
}
.logo-block img {
    width: 56px;
    height: 56px;
    border-radius: 12px;
}
.logo-name {
    font-weight: 800;
    font-size: 16px;
    color: var(--pdaa-black);
    line-height: 1.1;
}
.logo-tag {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--pdaa-green-dark);
    margin-top: 3px;
}

/* ── Intro ──────────────────────────────────────────────────────── */
.intro {
    background: var(--pdaa-card);
    border: 1px solid var(--pdaa-line);
    border-radius: 16px;
    padding: 22px 24px 14px;
    margin-bottom: 18px;
}
.intro h1 {
    font-size: 28px;
    font-weight: 800;
    color: var(--pdaa-black);
    margin: 0 0 12px;
    line-height: 1.15;
}
.intro p {
    font-size: 15px;
    line-height: 1.55;
    color: var(--pdaa-muted);
    margin: 0 0 16px;
}
.callout {
    display: flex;
    gap: 12px;
    padding: 14px 16px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 12px;
    margin-bottom: 24px;
    color: #92400e;
    font-size: 13px;
    line-height: 1.5;
}
.callout i { color: var(--pdaa-amber); margin-top: 2px; }
.callout strong { color: #78350f; }

/* ── Fieldsets ──────────────────────────────────────────────────── */
.expense-form { display: flex; flex-direction: column; gap: 18px; }
.card-fieldset {
    border: 1px solid var(--pdaa-line);
    background: var(--pdaa-card);
    border-radius: 16px;
    padding: 20px;
    margin: 0;
}
/* Reset browser default legend position so it sits as a normal heading
   inside the card, not floating on the top border. */
.card-fieldset legend {
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--pdaa-green-dark);
    padding: 0;
    margin: 0 0 16px;
    float: left;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
}
/* Clear the float so siblings layout properly */
.card-fieldset legend + * {
    clear: both;
}
.step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: var(--green-600, #2e7d32);
    color: white;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 800;
}
.card-fieldset > div + div { margin-top: 14px; }

/* ── Form controls ──────────────────────────────────────────────── */
.form-label {
    display: block;
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--pdaa-muted);
    margin-bottom: 10px;
}
.form-label .req { color: var(--pdaa-red); }
.form-label .muted { color: var(--pdaa-faint); font-weight: 600; }
.form-input {
    width: 100%;
    background: white;
    border: 1px solid var(--pdaa-line);
    border-radius: 10px;
    padding: 13px 15px;
    font-size: 17px;
    font-family: inherit;
    color: var(--pdaa-text);
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.form-input:focus {
    border-color: var(--pdaa-green);
    box-shadow: 0 0 0 3px rgba(22,163,74,0.12);
}
textarea.form-input { resize: vertical; min-height: 88px; }
select.form-input { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%2364748b' d='M5 6L0 1l1.4-1L5 3.2 8.6 0 10 1z'/></svg>"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px; }

.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
@media (max-width: 540px) {
    .grid-2 { grid-template-columns: 1fr; }
}

.hint {
    font-size: 12px;
    color: var(--pdaa-faint);
    margin: 6px 0 0;
}
.hint.center { text-align: center; }

/* ── Radio pills ────────────────────────────────────────────────── */
.radio-row { display: flex; gap: 10px; flex-wrap: wrap; }
.radio-pill {
    flex: 1 1 140px;
    cursor: pointer;
    border: 1px solid var(--pdaa-line);
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 14px;
    font-weight: 700;
    color: var(--pdaa-text);
    background: white;
    transition: all .15s;
    display: flex;
    align-items: center;
    gap: 10px;
}
.radio-pill input { accent-color: var(--pdaa-green); margin: 0; }
.radio-pill:has(input:checked) {
    border-color: var(--pdaa-green);
    background: var(--pdaa-green-soft);
    color: var(--pdaa-green-dark);
}

/* ── Dropzone ───────────────────────────────────────────────────── */
.dropzone {
    border: 2px dashed var(--pdaa-line);
    border-radius: 14px;
    padding: 28px 20px;
    text-align: center;
    background: var(--pdaa-bg);
    transition: all .15s;
    cursor: pointer;
}
.dropzone:hover, .dropzone.drag {
    border-color: var(--pdaa-green);
    background: var(--pdaa-green-soft);
}
.dropzone i { font-size: 32px; color: var(--pdaa-green); margin-bottom: 8px; }
.dropzone p { margin: 4px 0; font-size: 14px; color: var(--pdaa-text); }
.dropzone p.hint { font-size: 12px; color: var(--pdaa-faint); }

.file-list { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-direction: column; gap: 8px; }
.file-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--pdaa-bg);
    border: 1px solid var(--pdaa-line);
    border-radius: 10px;
    font-size: 13px;
}
.file-item i:first-child { color: var(--pdaa-green-dark); font-size: 16px; }
.file-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.file-size { color: var(--pdaa-faint); font-size: 11px; font-weight: 700; }
.file-remove {
    background: none;
    border: 0;
    color: var(--pdaa-faint);
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 6px;
}
.file-remove:hover { color: var(--pdaa-red); background: #fef2f2; }

/* ── Buttons ────────────────────────────────────────────────────── */
.submit-btn {
    width: 100%;
    background: var(--pdaa-green);
    color: white;
    border: 0;
    border-radius: 12px;
    padding: 16px 20px;
    font-size: 15px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: background .15s, transform .05s;
    box-shadow: 0 4px 12px rgba(22,163,74,0.25);
}
.submit-btn:hover:not(:disabled) { background: var(--pdaa-green-dark); }
.submit-btn:active:not(:disabled) { transform: translateY(1px); }
.submit-btn:disabled { opacity: 0.55; cursor: wait; }
.submit-btn.ghost {
    background: white;
    color: var(--pdaa-green-dark);
    border: 1px solid var(--pdaa-green);
    box-shadow: none;
    margin-top: 16px;
}
.submit-btn.ghost:hover:not(:disabled) { background: var(--pdaa-green-soft); }

/* ── Form error ─────────────────────────────────────────────────── */
.form-error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 13px;
    font-weight: 600;
}

/* ── Success splash ─────────────────────────────────────────────
   Fills the viewport so submission feedback is unmissable.
   Replaces both the form intro and form fieldset on submit. */
.success-panel {
    background: white;
    border: 1px solid var(--pdaa-line);
    border-radius: 20px;
    padding: 56px 32px 48px;
    text-align: center;
    box-shadow: 0 12px 40px rgba(22,163,74,0.15);
    max-width: 560px;
    margin: 32px auto;
    animation: splashIn 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.success-panel .tick {
    width: 96px;
    height: 96px;
    margin: 0 auto 24px;
    border-radius: 50%;
    background: var(--pdaa-green-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--pdaa-green-dark);
    font-size: 48px;
    animation: tickPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s both;
}
.success-panel h2 {
    font-size: 30px;
    font-weight: 800;
    color: var(--pdaa-black);
    margin: 0 0 16px;
    letter-spacing: -0.01em;
}
.success-panel p {
    font-size: 17px;
    line-height: 1.55;
    color: var(--pdaa-text);
    margin: 0 0 18px;
    max-width: 440px;
    margin-left: auto;
    margin-right: auto;
}
.success-panel p strong {
    background: var(--pdaa-green-soft);
    color: var(--pdaa-green-dark);
    padding: 2px 10px;
    border-radius: 6px;
    font-weight: 800;
    letter-spacing: 0.02em;
}
.success-panel .submit-btn {
    margin-top: 12px;
}
.success-panel .hint {
    font-size: 14px;
    color: var(--pdaa-muted);
    margin-top: 8px;
}

@keyframes splashIn {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes tickPop {
    0%   { transform: scale(0); }
    60%  { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* ── Footer ─────────────────────────────────────────────────────── */
.page-footer {
    background: var(--pdaa-card);
    border: 1px solid var(--pdaa-line);
    border-radius: 16px;
    margin-top: 24px;
    padding: 18px 22px;
    text-align: center;
    font-size: 11px;
    color: var(--pdaa-faint);
}
.page-footer p { margin: 4px 0; }
.page-footer a:not(.btn) { color: var(--pdaa-muted); text-decoration: underline; }

/* ====================================================================
   ACCOUNTING TOOL — extends the same vocabulary
   ==================================================================== */

.acct-shell { padding: 0; }
.max-7xl { max-width: 1280px; margin: 0 auto; padding: 18px 16px 0; }

.acct-header {
    background: var(--pdaa-card);
    border-bottom: 1px solid var(--pdaa-line);
    box-shadow: 0 1px 2px rgba(0,0,0,0.02);
}
.acct-header-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 16px;
    height: 68px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.acct-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}
.acct-brand img { width: 44px; height: 44px; border-radius: 10px; }
.acct-title { font-size: 19px; font-weight: 800; color: var(--pdaa-black); text-transform: uppercase; letter-spacing: 0.05em; line-height: 1; }
.acct-sub   { font-size: 13px; font-weight: 700; color: var(--pdaa-muted); margin-top: 5px; letter-spacing: 0.02em; }

.acct-actions { display: flex; gap: 8px; align-items: center; }
.btn {
    height: 42px;
    padding: 0 18px;
    border-radius: 10px;
    border: 1px solid var(--pdaa-line);
    background: white;
    color: var(--pdaa-text);
    font-family: inherit;
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all .15s;
}
.btn:hover { background: var(--pdaa-bg); color: var(--pdaa-text); }
.btn-primary {
    /* The site paints primary buttons --green-600 #2e7d32, which carries
       white text at 5.13:1. The Office was using --pdaa-green #16a34a at
       3.30, which fails AA. The brief is to look like the site, so take
       the site's green: it matches and it passes, in one change. */
    background: var(--green-600, #2e7d32);
    color: #fff;
    border-color: var(--green-600, #2e7d32);
}
.btn-primary:hover { background: var(--green-700, #1b5e20); border-color: var(--green-700, #1b5e20); }
.btn-danger {
    background: var(--pdaa-red);
    color: white;
    border-color: var(--pdaa-red);
}
.btn-danger:hover { background: #b91c1c; color: white; }
.btn-ghost { background: transparent; }

/* Tabs */
.tab-group { display: flex; flex-wrap: wrap; gap: 2px; padding: 4px; background: var(--pdaa-bg); border-radius: 12px; }
.tab-btn {
    padding: 12px 18px;
    border: 0;
    background: transparent;
    color: var(--pdaa-muted);
    font-family: inherit;
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    transition: all .15s;
}
.tab-btn.active {
    background: white;
    color: var(--pdaa-black);
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.tab-btn:hover:not(.active) { color: var(--pdaa-text); }
.tab-btn .count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 22px;
    padding: 0 8px;
    background: var(--pdaa-green);
    color: white;
    border-radius: 11px;
    font-size: 12px;
    font-weight: 800;
    margin-left: 2px;
}
.tab-btn .count.amber { background: var(--pdaa-amber); }
.tab-btn .count.red { background: var(--pdaa-red); }

/* Summary cards */
.text-green { color: var(--pdaa-green-dark); }
.text-red   { color: var(--pdaa-red); }
.text-amber { color: var(--pdaa-amber); }
.text-blue  { color: var(--pdaa-blue); }
.text-slate { color: var(--pdaa-text); }
.text-muted { color: var(--pdaa-muted); }
.text-faint { color: var(--pdaa-faint); }

/* Section panels */
.section-panel {
    background: white;
    border: 1px solid var(--pdaa-line);
    border-radius: 14px;
    padding: 16px;
}
.section-title {
    font-size: 15px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--pdaa-text);
    margin: 0 0 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.section-title i { color: var(--pdaa-green); }

/* Filter bar */
.filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.filter-row .form-input { padding: 10px 14px; font-size: 15px; height: 46px; max-width: 240px; }

/* Entry rows */
.entry-list { display: flex; flex-direction: column; gap: 8px; }
.entry-row {
    background: white;
    border: 1px solid var(--pdaa-line);
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    transition: border-color .12s;
}
.entry-row:hover { border-color: var(--pdaa-green); }
.entry-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}
.entry-icon.in  { background: var(--pdaa-green-soft); color: var(--pdaa-green-dark); }
.entry-icon.out { background: #fef2f2; color: var(--pdaa-red); }
.entry-meta { min-width: 0; flex: 1; }
.entry-desc { font-size: 17px; font-weight: 800; color: var(--pdaa-black); display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.entry-sub  { font-size: 14px; font-weight: 600; color: var(--pdaa-muted); margin-top: 5px; }
.entry-amount { font-size: 18px; font-weight: 800; text-align: right; }
.entry-bal { font-size: 13px; font-weight: 700; color: var(--pdaa-faint); margin-top: 2px; }
.entry-actions { display: flex; gap: 2px; }
.icon-btn {
    width: 34px;
    height: 34px;
    border: 0;
    background: transparent;
    color: var(--pdaa-muted);
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: all .15s;
}
.icon-btn:hover { background: var(--pdaa-bg); color: var(--pdaa-text); }
.icon-btn.danger:hover { color: var(--pdaa-red); background: #fef2f2; }

.badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.badge-rec     { background: #eff6ff; color: var(--pdaa-blue); }
.badge-unpaid  { background: #fef3c7; color: #d97706; }
.badge-partial { background: #dbeafe; color: var(--pdaa-blue); }
.badge-pending { background: #fef3c7; color: #92400e; }
.badge-approved { background: var(--pdaa-green-soft); color: var(--pdaa-green-dark); }
.badge-rejected { background: #fee2e2; color: #991b1b; }

/* Empty state */
.empty-state {
    text-align: center;
    padding: 56px 20px;
    background: white;
    border: 1px solid var(--pdaa-line);
    border-radius: 14px;
}
.empty-state i { font-size: 38px; color: var(--pdaa-line); margin-bottom: 12px; }
.empty-state p { font-size: 17px; font-weight: 700; color: var(--pdaa-faint); margin: 0; }

/* Modal */
.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: rgba(15,23,42,0.6);
    backdrop-filter: blur(4px);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
    overflow-y: auto;
}
.modal-overlay.show { display: flex; }
.modal {
    background: white;
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.25);
    width: 100%;
    max-width: 520px;
    max-height: 92vh;
    overflow-y: auto;
}
.modal.lg { max-width: 720px; }
.modal-header {
    padding: 18px 22px;
    border-bottom: 1px solid var(--pdaa-line);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.modal-title { font-size: 17px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--pdaa-black); margin: 0; }
.modal-body { padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.modal-footer { padding: 16px 22px; border-top: 1px solid var(--pdaa-line); display: flex; gap: 10px; justify-content: flex-end; }

/* Receipts viewer */
.receipts-list { display: flex; flex-direction: column; gap: 8px; }
.receipt-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--pdaa-bg);
    border: 1px solid var(--pdaa-line);
    border-radius: 10px;
    font-size: 16px;
    text-decoration: none;
    color: inherit;
    transition: all .12s;
}
.receipt-item:hover { border-color: var(--pdaa-green); background: var(--pdaa-green-soft); }
.receipt-item i:first-child { color: var(--pdaa-green-dark); font-size: 20px; flex-shrink: 0; }
.receipt-item .file-name { flex: 1; font-weight: 700; }
.receipt-item .open-icon { color: var(--pdaa-faint); }

/* Login / dashboard pages */
.center-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.login-card {
    background: white;
    border: 1px solid var(--pdaa-line);
    border-radius: 18px;
    padding: 32px;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.06);
    text-align: center;
}
.login-card img { width: 80px; height: 80px; border-radius: 16px; margin-bottom: 14px; }
.login-card h1 { font-size: 22px; font-weight: 800; color: var(--pdaa-black); margin: 0 0 4px; }
.login-card p.sub { font-size: 13px; color: var(--pdaa-muted); margin: 0 0 22px; }
.login-card form { display: flex; flex-direction: column; gap: 12px; }
.login-card .form-input { text-align: left; }

/* Period bar */
.period-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 12px 0 8px; }
.year-select { height: 44px; padding: 0 16px; font-size: 14px; font-weight: 800; color: var(--pdaa-text); background: white; border: 1px solid var(--pdaa-line); border-radius: 10px; cursor: pointer; outline: none; }

/* Quarter cards */
.quarter-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 768px) { .quarter-grid { grid-template-columns: repeat(4, 1fr); } }
.quarter-card {
    border-radius: 12px;
    border: 1px solid var(--pdaa-line);
    background: var(--pdaa-bg);
    padding: 16px;
    font-size: 15px;
}
.quarter-card.current { border-color: var(--pdaa-green); background: var(--pdaa-green-soft); }
.quarter-card .qhead { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--pdaa-muted); margin-bottom: 10px; }
.quarter-card.current .qhead { color: var(--pdaa-green-dark); }
.quarter-card .qrow { display: flex; justify-content: space-between; padding: 4px 0; }
.quarter-card .qrow.total { border-top: 1px solid var(--pdaa-line); margin-top: 6px; padding-top: 8px; font-weight: 800; }

/* Category tables */
.cat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--pdaa-bg);
    font-size: 15px;
}
.cat-row:last-child { border-bottom: 0; }
.cat-row .name { font-weight: 700; color: var(--pdaa-text); }
.cat-row .val  { font-weight: 800; }

/* P&L rows */
.pnl-row {
    display: flex;
    justify-content: space-between;
    padding: 9px 0;
    font-size: 16px;
}
.pnl-row.subtotal { border-top: 1px solid var(--pdaa-line); padding-top: 10px; margin-top: 6px; font-weight: 800; }
.pnl-row.total    { border-top: 2px solid var(--pdaa-text); padding-top: 14px; margin-top: 8px; font-weight: 800; font-size: 19px; }

/* Monthly grid */
.monthly-grid {
    display: grid;
    grid-template-columns: 200px repeat(12, minmax(80px, 1fr)) 100px;
    font-size: 13px;
    overflow-x: auto;
}
.monthly-grid > div {
    padding: 8px 10px;
    border-bottom: 1px solid var(--pdaa-bg);
}
.monthly-grid .mg-header {
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--pdaa-muted);
    background: var(--pdaa-bg);
    position: sticky;
    top: 0;
    font-size: 12px;
}
.monthly-grid .mg-label { font-weight: 700; color: var(--pdaa-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.monthly-grid .mg-total { font-weight: 800; background: var(--pdaa-green-soft); }
.monthly-grid .text-right { text-align: right; }

/* Toast */
.toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}
.toast {
    background: white;
    border-left: 4px solid var(--pdaa-green);
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.12);
    padding: 16px 20px;
    font-size: 16px;
    font-weight: 600;
    color: var(--pdaa-text);
    pointer-events: auto;
    min-width: 260px;
    max-width: 380px;
    animation: toastIn .25s ease-out;
}
.toast.error   { border-left-color: var(--pdaa-red); }
.toast.warn    { border-left-color: var(--pdaa-amber); }
.toast.info    { border-left-color: var(--pdaa-blue); }
@keyframes toastIn { from { transform: translateX(20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* Loader */
.loader {
    border: 2px solid var(--pdaa-line);
    border-top: 2px solid var(--pdaa-green);
    border-radius: 50%;
    width: 14px;
    height: 14px;
    animation: spin .8s linear infinite;
    display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Status bar */
.status-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    color: var(--pdaa-muted);
}

/* Skip link */
.skip-link {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    background: var(--pdaa-green);
    color: white;
    font-weight: 700;
    font-size: 13px;
    padding: 12px 24px;
    border-radius: 0 0 8px 0;
    text-decoration: none;
}
.skip-link:focus { position: fixed; left: 0; top: 0; width: auto; height: auto; z-index: 99999; }

/* Utility */
.hidden { display: none !important; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 16px; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 12px; }
.mb-4 { margin-bottom: 16px; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.font-bold { font-weight: 700; }
.font-extra { font-weight: 800; }
.text-xs { font-size: 14px; }
.text-sm { font-size: 16px; }
.uppercase { text-transform: uppercase; letter-spacing: 0.08em; }

/* ====================================================================
   CONDITIONAL STEP REVEAL (expenses form)
   Steps unlock progressively as previous required fields validate.
   .locked = hidden, removed from tab order and AT.
   ==================================================================== */
.step {
    transition: opacity .25s ease, transform .25s ease;
}
.step.locked {
    display: none;
}
.step:not(.locked) {
    animation: stepReveal .35s ease-out;
}
@keyframes stepReveal {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ====================================================================
   CONSENT ROW (checkbox + body text)
   ==================================================================== */
.consent-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: var(--pdaa-bg);
    border: 1px solid var(--pdaa-line);
    border-radius: 12px;
    cursor: pointer;
    font-size: 13px;
    line-height: 1.55;
    color: var(--pdaa-text);
    transition: all .15s;
}
.consent-row:hover { border-color: var(--pdaa-green); }
.consent-row:has(input:checked) {
    border-color: var(--pdaa-green);
    background: var(--pdaa-green-soft);
}
.consent-row input[type="checkbox"] {
    flex-shrink: 0;
    margin-top: 2px;
    width: 18px;
    height: 18px;
    accent-color: var(--pdaa-green);
    cursor: pointer;
}
.consent-row a:not(.btn) { color: var(--pdaa-green-dark); font-weight: 700; }

/* ====================================================================
   PAYMENT CARDS (admin Payments tab)
   Each card represents one bank-detail submission. Sensitive fields
   are hidden by default behind a Reveal action.
   ==================================================================== */
.payment-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 12px;
}
.payment-card {
    background: white;
    border: 1px solid var(--pdaa-line);
    border-radius: 14px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: border-color .15s;
}
.payment-card:hover { border-color: var(--pdaa-green); }

.payment-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}
.payment-name {
    font-size: 18px;
    font-weight: 800;
    color: var(--pdaa-black);
    line-height: 1.25;
}
.payment-meta {
    font-size: 14px;
    color: var(--pdaa-muted);
    font-weight: 600;
    margin-top: -4px;
}

.payment-bank-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 10px 12px;
    background: var(--pdaa-bg);
    border-radius: 10px;
}
.payment-bank-row > div { display: flex; flex-direction: column; gap: 2px; }
.payment-bank-row .form-label { margin-bottom: 0; }
.payment-bank-name, .payment-last4 {
    font-size: 16px;
    font-weight: 700;
    color: var(--pdaa-text);
}

.payment-revealed {
    background: var(--pdaa-green-soft);
    border: 1px solid var(--pdaa-green);
    border-radius: 10px;
    padding: 12px;
    animation: stepReveal .25s ease-out;
}
.payment-revealed.hidden { display: none; }
.payment-revealed-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.payment-revealed-grid > div { display: flex; flex-direction: column; gap: 4px; }
.payment-revealed-grid .form-label { margin-bottom: 0; color: var(--pdaa-green-dark); }
.payment-mono {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
    font-size: 19px;
    font-weight: 800;
    color: var(--pdaa-black);
    background: white;
    padding: 8px 12px;
    border-radius: 6px;
    display: inline-block;
    user-select: all;
    cursor: text;
}
.payment-revealed-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(22,163,74,0.2);
    font-size: 13px;
    font-weight: 700;
    color: var(--pdaa-green-dark);
}
.payment-revealed-foot i { color: var(--pdaa-green-dark); }

.payment-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ====================================================================
   GOOGLE SIGN-IN BUTTON
   Standard Google button styling so committee members recognise it.
   ==================================================================== */
.google-signin-btn {
    width: 100%;
    background: white;
    color: #1f1f1f;
    border: 1px solid #dadce0;
    border-radius: 12px;
    padding: 14px 20px;
    font-size: 15px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    transition: background .15s, border-color .15s, box-shadow .15s;
}
.google-signin-btn:hover:not(:disabled) {
    background: #f8f9fa;
    border-color: #c4c7c8;
    box-shadow: 0 1px 3px rgba(60, 64, 67, 0.08);
}
.google-signin-btn:active:not(:disabled) { background: #f1f3f4; }
.google-signin-btn:disabled { opacity: 0.55; cursor: wait; }
.google-signin-btn svg { flex-shrink: 0; }

/* ====================================================================
   BANK ACCOUNTS
   Manually maintained balance snapshots. Cards in a responsive grid.
   ==================================================================== */
.bank-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}
.bank-card {
    background: white;
    border: 1px solid var(--pdaa-line);
    border-radius: 14px;
    padding: 16px;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    transition: border-color .12s, box-shadow .12s;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 110px;
}
.bank-card:hover {
    border-color: var(--pdaa-green);
    box-shadow: 0 2px 8px rgba(22,163,74,0.08);
}
.bank-name {
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--pdaa-muted);
}
.bank-balance {
    font-size: 26px;
    font-weight: 800;
    color: var(--pdaa-black);
    line-height: 1.05;
}
.bank-meta {
    font-size: 12px;
    font-weight: 600;
    color: var(--pdaa-faint);
    margin-top: auto;
}
.bank-add {
    background: transparent;
    border: 2px dashed var(--pdaa-line);
    color: var(--pdaa-muted);
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    flex-direction: column;
    gap: 8px;
}
.bank-add i { font-size: 22px; color: var(--pdaa-faint); }
.bank-add:hover {
    border-color: var(--pdaa-green);
    background: var(--pdaa-green-soft);
    color: var(--pdaa-green-dark);
    box-shadow: none;
}
.bank-add:hover i { color: var(--pdaa-green-dark); }

/* ====================================================================
   MOBILE RESPONSIVE BREAKPOINTS

   Phones (≤480): single-column, condensed header, hidden non-essential
                  text, full-width controls.
   Small phones to small tablets (481–768): improved flow, period bar
                                             wraps, modals comfortable.
   ==================================================================== */

/* Tablet and below — admin tool spacing */
@media (max-width: 768px) {
    .max-7xl { padding-left: 12px; padding-right: 12px; }

    .acct-header-inner { height: auto; padding: 12px; gap: 8px; }
    .acct-brand img { width: 40px; height: 40px; }
    .acct-title { font-size: 16px; }
    .acct-sub   { font-size: 12px; }
    .acct-actions { flex-wrap: wrap; gap: 6px; justify-content: flex-end; }

    .btn { height: 40px; padding: 0 12px; font-size: 13px; gap: 6px; }

    .section-panel { padding: 14px; }
    .modal-body { padding: 18px; }
    .modal-footer { padding: 14px 18px; flex-wrap: wrap; }
}

/* Phones */
@media (max-width: 540px) {
    /* Hide non-essential header text on small screens */
    .hidden-sm { display: none !important; }

    .acct-actions { gap: 4px; }
    .btn {
        height: 38px;
        padding: 0 10px;
        font-size: 12px;
        letter-spacing: 0.04em;
    }
    /* Icon-only buttons (e.g. gear, sign-out) need a square-ish footprint.
       This used to square up EVERY .btn-ghost under 540px, but the class is
       also worn by 56 buttons that carry a label: Cancel, View, Edit, Delete,
       Copy emails, Add reference. All of them collapsed to a 38px box on a
       phone with the words spilling out of it. The fault was `width: 38px`
       pinning every one of them shut. A minimum width keeps the icon-only
       buttons square and lets a labelled one size to its text. */
    .btn-ghost {
        padding: 0 10px;
        min-width: 38px;
        justify-content: center;
    }

    /* Period bar — let it wrap */
    .period-bar { gap: 6px; }
    .period-bar .btn { height: 36px; padding: 0 10px; font-size: 12px; }
    .year-select { height: 36px; padding: 0 12px; font-size: 13px; }

    /* Tabs scroll horizontally if needed */
    .tab-group { padding: 3px; }
    .tab-btn {
        padding: 9px 12px;
        font-size: 12px;
        letter-spacing: 0.04em;
    }
    .tab-btn .count {
        min-width: 20px;
        height: 18px;
        font-size: 11px;
    }

    /* Summary cards 2-col */

    /* Entry rows — keep horizontal but tighten and shrink elements */
    .entry-row {
        padding: 12px;
        gap: 10px;
    }
    .entry-row .entry-icon {
        width: 36px; height: 36px; font-size: 13px;
    }
    .entry-row .entry-amount { font-size: 15px; }
    .entry-actions { flex-shrink: 0; }
    .icon-btn { width: 32px; height: 32px; font-size: 13px; }

    .entry-desc { font-size: 15px; }
    .entry-sub  { font-size: 13px; }

    /* Bank cards single column on smallest phones gets handled by auto-fill,
       but tighten padding */
    .bank-card { padding: 14px; min-height: 100px; }
    .bank-balance { font-size: 22px; }

    /* Filter row — search input fills row */
    .filter-row { gap: 6px; }
    .filter-row .form-input {
        max-width: 100%;
        flex: 1 1 100%;
        height: 42px;
        font-size: 16px;  /* 16px minimum to prevent iOS Safari zoom on focus */
    }

    /* Quarter cards */
    .quarter-card { padding: 12px; font-size: 13px; }
    .quarter-card .qhead { font-size: 11px; }

    /* Cat / P&L rows */
    .cat-row { font-size: 13px; padding: 7px 0; }
    .pnl-row { font-size: 14px; padding: 7px 0; }
    .pnl-row.total { font-size: 16px; }

    /* Modal — fill viewport on phones */
    .modal-overlay { padding: 8px; }
    .modal {
        max-width: 100% !important;
        max-height: 96vh;
        border-radius: 14px;
    }
    .modal-header { padding: 14px 16px; }
    .modal-title { font-size: 14px; }
    .modal-body { padding: 16px; gap: 12px; }
    .modal-footer { padding: 12px 16px; gap: 8px; }
    .modal-footer .btn { flex: 1 1 auto; }

    /* Toast — fit viewport with margin */
    .toast-container { top: 12px; right: 12px; left: 12px; }
    .toast {
        min-width: auto;
        max-width: 100%;
        font-size: 14px;
        padding: 12px 16px;
    }

    /* Payment cards — stack the 2-col grids */
    .payment-bank-row,
    .payment-revealed-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .payment-mono { font-size: 16px; padding: 7px 10px; }

    /* Form pages — tighter card padding */
    .page-shell { padding: 0 12px 60px; }
    .form-header { padding: 14px 16px; margin-top: 12px; margin-bottom: 12px; }
    .form-header img { width: 44px; height: 44px; }
    .logo-name { font-size: 15px; }
    .logo-tag  { font-size: 10px; }

    .intro { padding: 18px 18px 10px; margin-bottom: 14px; }
    .intro h1 { font-size: 23px; }
    .intro p  { font-size: 14px; }

    .card-fieldset { padding: 16px; }
    .card-fieldset legend { font-size: 11px; }
    .step-num { width: 20px; height: 20px; font-size: 10px; }

    .form-input { padding: 12px 13px; font-size: 16px; }
    /* Note: 16px input is required to prevent iOS Safari from zooming in
       on focus. Don't drop below this. */
    textarea.form-input { min-height: 80px; }

    .submit-btn { padding: 14px 18px; font-size: 14px; letter-spacing: 0.05em; }

    /* Success splash — softer on small screens */
    .success-panel {
        padding: 40px 22px 36px;
        margin: 16px auto;
    }
    .success-panel .tick { width: 76px; height: 76px; font-size: 40px; }
    .success-panel h2 { font-size: 24px; }
    .success-panel p { font-size: 16px; }

    .page-footer { padding: 14px 16px; margin-top: 18px; }

    /* Login/dashboard card */
    .login-card { padding: 24px 20px; }
    .login-card img { width: 64px; height: 64px; }
    .login-card h1 { font-size: 19px; }
    .login-card p.sub { font-size: 12px; }
}

/* Smallest phones (≤380px) — extra tightening */
@media (max-width: 380px) {
    .acct-brand { gap: 8px; }
    .acct-brand img { width: 36px; height: 36px; }
    .acct-title { font-size: 14px; letter-spacing: 0.03em; }
    .btn { height: 36px; padding: 0 9px; font-size: 11px; }
    .bank-balance { font-size: 20px; }
}

/* ====================================================================
   PERIOD BAR REFINEMENTS
   Custom date range only shows when "Custom" period is active.
   Period label sits beneath the bar on a solid card background.
   ==================================================================== */
.custom-range {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--pdaa-line);
    max-width: 480px;
}
.custom-range > div { display: flex; flex-direction: column; }
.custom-range .form-label { margin-bottom: 6px; }
.custom-range .form-input {
    height: 44px;
    padding: 9px 13px;
    font-size: 15px;
    width: 100%;
}

.period-status {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--pdaa-line);
}
.period-label-text {
    font-size: 14px;
    font-weight: 700;
    color: var(--pdaa-text);
}

@media (max-width: 540px) {
    .custom-range { grid-template-columns: 1fr; gap: 8px; max-width: 100%; }
    .period-status { flex-wrap: wrap; gap: 8px; }
    .period-label-text { font-size: 13px; }
}

/* ====================================================================
   THREE-CARD LAYOUT (Overview / Activity / Tools)
   The admin tool's main content is reorganised into three big panels
   with internal sub-sections instead of many free-floating cards.
   ==================================================================== */

.mb-2 { margin-bottom: 8px; }

.overview-card,
.activity-card,
.tools-card {
    background: white;
    border: 1px solid var(--pdaa-line);
    border-radius: 16px;
    padding: 18px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.02);
}

.overview-divider {
    height: 1px;
    background: var(--pdaa-line);
    margin: 18px -18px;  /* full-bleed */
}

.overview-section {
    /* No background of its own — sits inside overview-card. */
}
.overview-section-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.overview-section-title {
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--pdaa-muted);
}

/* Summary stats — flat strip, no inner borders */
.stats-strip {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
@media (min-width: 640px) { .stats-strip { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .stats-strip { grid-template-columns: repeat(5, 1fr); } }
.stat .lbl {
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--pdaa-muted);
    margin-bottom: 6px;
}
.stat .val {
    font-size: 26px;
    font-weight: 800;
    line-height: 1.05;
}
.stat .sub {
    font-size: 12px;
    font-weight: 700;
    color: var(--pdaa-faint);
    margin-top: 4px;
}

/* Income / Expenditure category strip inside activity card */
.cat-strip {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    padding: 14px 0;
    border-top: 1px solid var(--pdaa-line);
    border-bottom: 1px solid var(--pdaa-line);
    margin: 14px 0;
}
@media (max-width: 640px) {
    .cat-strip { grid-template-columns: 1fr; gap: 14px; }
}
.cat-block-title {
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* Totals bar at bottom of ledger view */
.totals-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 14px;
    margin-top: 14px;
    border-top: 1px solid var(--pdaa-line);
}

/* Empty states inside the activity card — flatter, no card bg */
.empty-state.inline-empty {
    background: transparent;
    border: 0;
    padding: 40px 20px;
}

/* Phone tightening */
@media (max-width: 540px) {
    .overview-card,
    .activity-card,
    .tools-card { padding: 14px; }
    .overview-divider { margin: 14px -14px; }
    .stat .val { font-size: 22px; }
}

/* Bottom row — 50/50 split for bank balances + Square today on desktop,
   stacks on mobile. */
.bottom-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
@media (max-width: 768px) {
    .bottom-row { grid-template-columns: 1fr; gap: 12px; }
}

/* ====================================================================
   AUDIT LOG MODAL
   Scrollable list of admin actions, with sensitive-action badges.
   ==================================================================== */
.audit-list-wrap {
    max-height: 50vh;
    min-height: 200px;
    overflow-y: auto;
    border: 1px solid var(--pdaa-line);
    border-radius: 10px;
    background: var(--pdaa-bg);
    padding: 6px;
}
.audit-list { display: flex; flex-direction: column; gap: 6px; }
.audit-row {
    background: white;
    border: 1px solid var(--pdaa-line);
    border-radius: 8px;
    padding: 10px 12px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 12px;
    font-size: 13px;
    line-height: 1.4;
}
.audit-row.sensitive { border-left: 3px solid var(--pdaa-amber); }
.audit-row.danger    { border-left: 3px solid var(--pdaa-red); }
.audit-row.info      { border-left: 3px solid var(--pdaa-blue); }
.audit-action {
    font-weight: 800;
    color: var(--pdaa-black);
    font-size: 13px;
}
.audit-time {
    font-size: 12px;
    color: var(--pdaa-faint);
    text-align: right;
    white-space: nowrap;
}
.audit-detail {
    grid-column: 1 / -1;
    font-size: 13px;
    color: var(--pdaa-text);
    word-break: break-word;
}
.audit-user {
    grid-column: 1 / -1;
    font-size: 11px;
    color: var(--pdaa-muted);
    font-weight: 700;
}
.audit-empty {
    text-align: center;
    padding: 30px 16px;
    color: var(--pdaa-faint);
    font-size: 14px;
    font-weight: 700;
}

.audit-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
    flex-wrap: wrap;
    gap: 8px;
}

@media (max-width: 540px) {
    .audit-list-wrap { max-height: 60vh; }
    .audit-row { font-size: 12px; padding: 9px 10px; }
}

/* ====================================================================
   PERIOD BAR — MOBILE: stack period + year + view tabs vertically
   The original layout works on tablet/desktop where there's room.
   On phones, force each tab-group onto its own row so buttons wrap
   readably instead of overflowing horizontally.
   ==================================================================== */
@media (max-width: 640px) {
    .period-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    .period-bar > * {
        width: 100% !important;
        margin-left: 0 !important;
    }
    .period-bar .tab-group {
        justify-content: flex-start;
    }
    .period-bar .tab-btn {
        flex: 1 1 auto;
        min-width: 0;
    }
    .period-bar .year-select {
        width: 100%;
    }
}

/* ====================================================================
   ADMIN HEADER — MOBILE: ensure brand block allows shrink + truncation
   so action buttons never push off-viewport.
   ==================================================================== */
@media (max-width: 640px) {
    .acct-header-inner {
        flex-wrap: wrap;
        gap: 10px;
        padding: 10px 12px;
    }
    .acct-brand {
        flex: 1 1 auto;
        min-width: 0;
    }
    .acct-brand img { flex-shrink: 0; }
    .acct-title,
    .acct-sub {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }
    .acct-actions {
        flex: 0 0 auto;
        flex-wrap: nowrap;
    }
    .acct-actions .btn {
        flex-shrink: 0;
    }
}

/* On the very smallest phones, push actions to their own row below the
   brand so neither competes for width. */
@media (max-width: 420px) {
    .acct-header-inner {
        flex-direction: column;
        align-items: stretch;
    }
    .acct-actions {
        justify-content: flex-end;
        width: 100%;
    }
}

/* ====================================================================
   MANAGEMENT HUB (/index.html post-sign-in)
   Department-card grid for the management team.
   ==================================================================== */

.hub-intro {
    margin-bottom: 24px;
    background: var(--pdaa-card);
    border: 1px solid var(--pdaa-line);
    border-radius: 16px;
    padding: 22px 26px;
}
.hub-intro h1 {
    font-size: 28px;
    font-weight: 800;
    color: var(--pdaa-black);
    margin: 0 0 6px;
    letter-spacing: -0.01em;
}
.hub-intro-sub {
    font-size: 15px;
    color: var(--pdaa-muted);
    line-height: 1.55;
    margin: 0;
    max-width: 720px;
}

.hub-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 32px;
}
@media (max-width: 980px) {
    .hub-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .hub-grid { grid-template-columns: 1fr; }
}

.dept-card {
    background: var(--pdaa-card);
    border: 1px solid var(--pdaa-line);
    border-radius: 16px;
    padding: 22px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    transition: border-color .15s, box-shadow .15s, transform .12s;
}
.dept-card:not(.soon):not(.locked):hover {
    box-shadow: 0 8px 24px rgba(22,163,74,0.12);
    transform: translateY(-2px);
}

/* Variants */
.dept-card.soon {
    border-color: var(--pdaa-line);
    background: var(--pdaa-bg);
    opacity: 0.85;
}
.dept-card.locked {
    border-color: var(--pdaa-line);
    background: var(--pdaa-card);
}

.dept-icon {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    border-radius: 14px;
    background: var(--pdaa-green-soft);
    color: var(--pdaa-green-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}
.dept-card.soon .dept-icon,
.dept-card.locked .dept-icon {
    background: var(--pdaa-line);
    color: var(--pdaa-faint);
}

.dept-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dept-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}
.dept-title {
    font-size: 18px;
    font-weight: 800;
    color: var(--pdaa-black);
    margin: 0;
    line-height: 1.15;
}

.dept-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}
.dept-pill.live   { background: var(--pdaa-green-soft); color: var(--pdaa-green-dark); }
.dept-pill.soon   { background: #eff6ff; color: var(--pdaa-blue); }
.dept-pill.locked { background: #fef3c7; color: #92400e; }

.dept-desc {
    font-size: 14px;
    color: var(--pdaa-muted);
    line-height: 1.5;
    margin: 0;
}

.dept-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    padding: 10px 16px;
    background: var(--pdaa-green);
    color: white;
    border: 0;
    border-radius: 10px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-decoration: none;
    cursor: pointer;
    align-self: flex-start;
    transition: background .15s;
}
a.dept-cta:hover { background: var(--pdaa-green-dark); color: white; }

.dept-cta.locked {
    background: white;
    color: var(--pdaa-muted);
    border: 1px solid var(--pdaa-line);
    cursor: pointer;
}
.dept-cta.locked:hover {
    background: var(--pdaa-bg);
    color: var(--pdaa-text);
}

.dept-cta.soon {
    background: transparent;
    color: var(--pdaa-faint);
    border: 1px dashed var(--pdaa-line);
    cursor: not-allowed;
    pointer-events: none;
}

.hub-footer {
    text-align: center;
    padding: 24px 0;
    color: var(--pdaa-faint);
    font-size: 12px;
}
.hub-footer p { margin: 0; }

@media (max-width: 540px) {
    .hub-intro { padding: 18px 20px; }
    .hub-intro h1 { font-size: 22px; }
    .hub-intro-sub { font-size: 14px; }
    .hub-grid { gap: 12px; }
    .dept-card { padding: 18px; gap: 14px; }
    .dept-icon { width: 48px; height: 48px; font-size: 20px; }
    .dept-title { font-size: 16px; }
    .dept-desc { font-size: 13px; }
}

/* ====================================================================
   BAILIFF FORM (/bailiffs.html)
   ==================================================================== */

/* External-link button — used to link to PDF guides, rules pages, etc. */
.btn-link-out {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    background: var(--pdaa-green-soft);
    color: var(--pdaa-green-dark);
    border: 1px solid var(--pdaa-line);
    border-radius: 10px;
    font-weight: 700;
    text-decoration: none;
    font-size: 14px;
    line-height: 1.3;
    transition: background .15s, transform .12s;
}
.btn-link-out:hover {
    background: var(--pdaa-green);
    color: white;
    transform: translateY(-1px);
}
.btn-link-out.btn-link-secondary {
    background: white;
    color: var(--pdaa-text);
    border-color: var(--pdaa-line);
}
.btn-link-out.btn-link-secondary:hover {
    background: var(--pdaa-bg);
    color: var(--pdaa-black);
    border-color: var(--pdaa-muted);
}

/* Warning callout — distinct from informational .callout */
.callout-warn {
    background: #fef3c7;
    border: 1px solid #fde68a;
    border-left: 4px solid #f59e0b;
    border-radius: 10px;
    padding: 14px 16px;
    margin: 14px 0;
    color: #78350f;
}
.callout-warn p { margin: 0 0 8px; }
.callout-warn p:last-child { margin-bottom: 0; }
.callout-warn strong { color: #78350f; }

/* Plain bulleted list inside form steps (no fancy rewards icons) */
.plain-list {
    margin: 8px 0 0;
    padding-left: 22px;
}
.plain-list li {
    margin-bottom: 6px;
    line-height: 1.5;
}

/* Rewards list — icon + text rows, used in step 4 */
.rewards-list {
    list-style: none;
    margin: 12px 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.rewards-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 14px;
    background: var(--pdaa-green-soft);
    border-radius: 8px;
    line-height: 1.5;
}
.rewards-list li i {
    color: var(--pdaa-green-dark);
    margin-top: 3px;
    font-size: 16px;
    width: 20px;
    flex-shrink: 0;
    text-align: center;
}

/* Dropzone for photo upload (single file) */
.dropzone-icon {
    font-size: 36px;
    color: var(--pdaa-green);
    margin-bottom: 8px;
}
.dropzone-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* Signature pad */
.signature-wrap {
    position: relative;
    border: 2px solid var(--pdaa-line);
    border-radius: 10px;
    background: white;
    overflow: hidden;
    margin-top: 8px;
}
.signature-canvas {
    display: block;
    width: 100%;
    height: 180px;
    background:
        linear-gradient(to bottom, transparent 0, transparent calc(100% - 30px), #c3cfc6 calc(100% - 30px), #c3cfc6 calc(100% - 29px), transparent calc(100% - 29px));
    cursor: crosshair;
    touch-action: none;
}
.signature-clear {
    position: absolute;
    top: 6px;
    right: 6px;
    background: white;
    border: 1px solid var(--pdaa-line);
    color: var(--pdaa-muted);
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 700;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.signature-clear:hover {
    background: var(--pdaa-bg);
    color: var(--pdaa-text);
    border-color: var(--pdaa-muted);
}

/* Small muted helper used in rewards/footnote text */
.small { font-size: 13px; line-height: 1.5; }

/* ====================================================================
   ENFORCEMENT PAGE (/enforcement.html)
   ==================================================================== */

.hub-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-right: 10px;
    border-radius: 8px;
    background: var(--pdaa-bg);
    color: var(--pdaa-muted);
    text-decoration: none;
    transition: background .15s, color .15s;
}
.hub-back:hover { background: var(--pdaa-green-soft); color: var(--pdaa-green-dark); }

.no-access {
    display: flex;
    justify-content: center;
    margin-top: 40px;
}
.no-access .login-card { text-align: center; }

/* Card containers for the three application lists */
.enf-card {
    background: var(--pdaa-card);
    border: 2px solid var(--pdaa-line);
    border-radius: 16px;
    padding: 0;
    margin-bottom: 18px;
    overflow: hidden;
}
.enf-card-head {
    padding: 16px 20px;
    background: var(--pdaa-bg);
    border-bottom: 1px solid var(--pdaa-line);
}
.enf-card-head h2 {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    color: var(--pdaa-black);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    gap: 10px;
}
.enf-card-head h2 i { color: var(--pdaa-green-dark); }
.enf-card-body {
    padding: 8px 0;
}
.enf-empty {
    padding: 22px 20px;
    margin: 0;
    text-align: center;
    font-style: italic;
}

/* Status pill (sits next to card title and inside detail modal) */
.enf-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 99px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
}
.enf-pill-amber { background: #fef3c7; color: #92400e; }
.enf-pill-green { background: var(--pdaa-green-soft); color: var(--pdaa-green-dark); }
.enf-pill-grey  { background: var(--pdaa-line); color: var(--pdaa-muted); }

/* Application row */
.enf-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--pdaa-line);
}
.enf-row:last-child { border-bottom: 0; }
.enf-row:hover { background: var(--pdaa-bg); }
.enf-row-main { flex: 1; min-width: 0; }
.enf-row-name {
    font-weight: 700;
    color: var(--pdaa-black);
    font-size: 15px;
}
.enf-row-sub {
    color: var(--pdaa-text);
    font-size: 13px;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.enf-row-meta {
    color: var(--pdaa-faint);
    font-size: 12px;
    margin-top: 4px;
}
.enf-row-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}
.btn.btn-sm {
    padding: 7px 12px;
    font-size: 12px;
}

/* Footer with copy-link button */
.enf-footer {
    background: var(--pdaa-card);
    border: 2px dashed var(--pdaa-line);
    border-radius: 16px;
    padding: 22px;
    margin: 26px 0 32px;
    text-align: center;
}
.enf-footer p {
    margin: 0 0 14px;
    color: var(--pdaa-muted);
    font-size: 14px;
}
.enf-footer-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ── Modal (different naming from existing modal-overlay) ── */
.modal-shell {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 16px;
    overflow-y: auto;
}
.modal-card {
    background: var(--pdaa-card);
    border-radius: 16px;
    width: 100%;
    max-width: 540px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0,0,0,0.25);
    max-height: 92vh;
    display: flex;
    flex-direction: column;
}
.modal-card-wide { max-width: 880px; }
.modal-head {
    padding: 16px 22px;
    border-bottom: 1px solid var(--pdaa-line);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.modal-head h2 {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    color: var(--pdaa-black);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.modal-close {
    background: none;
    border: 0;
    font-size: 18px;
    color: var(--pdaa-muted);
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: 6px;
}
.modal-close:hover { background: var(--pdaa-bg); color: var(--pdaa-black); }
.modal-body {
    padding: 22px;
    overflow-y: auto;
    flex: 1;
}
.modal-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--pdaa-line);
    flex-wrap: wrap;
}

/* Detail modal contents */
.detail-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--pdaa-line);
    margin-bottom: 16px;
}
.detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}
@media (max-width: 720px) {
    .detail-grid { grid-template-columns: 1fr; }
}
.detail-col h3 {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 800;
    color: var(--pdaa-green-dark);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.detail-photo {
    display: block;
    width: 100%;
    max-height: 280px;
    object-fit: contain;
    border: 1px solid var(--pdaa-line);
    border-radius: 10px;
    background: var(--pdaa-bg);
}
.detail-signature {
    display: block;
    width: 100%;
    height: 140px;
    object-fit: contain;
    border: 1px solid var(--pdaa-line);
    border-radius: 10px;
    background: white;
}

/* Key-value rows used in detail modal */
.kv-row {
    display: flex;
    gap: 12px;
    padding: 6px 0;
    border-bottom: 1px dashed var(--pdaa-line);
}
.kv-row:last-of-type { border-bottom: 0; }
.kv-k {
    flex-shrink: 0;
    width: 38%;
    font-size: 13px;
    font-weight: 700;
    color: var(--pdaa-muted);
}
.kv-v {
    flex: 1;
    font-size: 14px;
    color: var(--pdaa-text);
    word-break: break-word;
}

/* ====================================================================
   GUIDE PAGES (/bailiff-best-practice, /freshwater-fisheries-enforcement)
   Use the same card look as .card-fieldset but with <h2> headings
   instead of <legend>. Read in-browser; no PDF version.
   ==================================================================== */

.guide {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.guide-section {
    /* Inherits .card-fieldset look, but heading is <h2> not <legend>. */
}
.guide-section > h2 {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 18px;
    font-weight: 800;
    color: var(--pdaa-black);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 10px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--pdaa-line);
}
.guide-section > h2 .step-num {
    /* Re-uses the same green pill from the form */
    flex-shrink: 0;
}
.guide-section h3 {
    font-size: 15px;
    font-weight: 800;
    color: var(--pdaa-green-dark);
    margin: 18px 0 8px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.guide-section p {
    margin: 0 0 10px;
    line-height: 1.6;
    color: var(--pdaa-text);
}
.guide-section p:last-child { margin-bottom: 0; }

.guide-section a:not(.btn) {
    color: var(--pdaa-green-dark);
    font-weight: 700;
}

/* Legal quotes (Section 3 of the Criminal Law Act etc.) */
.legal-quote {
    font-style: italic;
    padding: 12px 16px;
    background: var(--pdaa-bg);
    border-left: 4px solid var(--pdaa-green);
    border-radius: 0 8px 8px 0;
    margin: 8px 0;
    color: var(--pdaa-text);
}

/* The "Read & understood" card at the bottom of guide pages */
.guide-return {
    background: var(--pdaa-green-soft);
    margin-top: 4px;
}
.guide-return .consent-row {
    font-size: 16px;
}
.guide-return .muted {
    margin-top: 10px;
    margin-bottom: 0;
}

/* Vehicle registration field — monospace, uppercase, plate-style */
.form-input-plate {
    font-family: 'Hanken Grotesk', system-ui, sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-weight: 700;
    font-size: 16px;
    max-width: 220px;
}
.form-input.input-error {
    border-color: var(--pdaa-red, #dc2626);
}
.btn-link-plain {
    background: none;
    border: 0;
    padding: 0;
    color: var(--pdaa-green-dark);
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    text-decoration: underline;
}
.btn-link-plain:hover { color: var(--pdaa-green); }

/* Vehicle reg pill on enforcement detail + row */
.vehicle-pill {
    display: inline-block;
    padding: 4px 10px;
    margin-right: 6px;
    background: #fef3c7;
    border: 1px solid #fcd34d;
    border-radius: 6px;
    font-family: 'Hanken Grotesk', system-ui, sans-serif;
    font-weight: 800;
    letter-spacing: 0.1em;
    font-size: 13px;
    color: #92400e;
}

.enf-row-vehicles {
    margin-top: 6px;
}

.modal-actions-spacer {
    flex: 1;
}

/* ====================================================================
   POLICY PAGES (/policies/, /policies/*)
   ==================================================================== */

/* Policy index — 6-card responsive grid */
.policy-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin: 0 0 28px;
}
@media (max-width: 980px) { .policy-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .policy-grid { grid-template-columns: 1fr; } }

.policy-card {
    background: var(--pdaa-card);
    border: 1px solid var(--pdaa-line);
    border-radius: 16px;
    color: var(--pdaa-text);
    display: flex;
    flex-direction: column;
    transition: transform .15s, box-shadow .15s;
    overflow: hidden;
}
.policy-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(22, 163, 74, 0.18);
}
.policy-card-link {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 22px 22px 14px;
    text-decoration: none;
    color: inherit;
}
.policy-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--pdaa-green-soft);
    color: var(--pdaa-green-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 14px;
}
.policy-card h2 {
    margin: 0 0 6px;
    font-size: 17px;
    font-weight: 800;
    color: var(--pdaa-black);
}
.policy-card p {
    flex: 1;
    margin: 0;
    color: var(--pdaa-text);
    font-size: 14px;
    line-height: 1.5;
}
.policy-card-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 22px 18px;
    border-top: 1px solid var(--pdaa-line);
    margin-top: 4px;
}
.policy-card-cta {
    font-size: 13px;
    font-weight: 800;
    color: var(--pdaa-green-dark);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-decoration: none;
}
.policy-card-cta i { margin-left: 6px; transition: transform .15s; }
.policy-card:hover .policy-card-cta i { transform: translateX(3px); }

.policy-card-copy {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--pdaa-bg);
    color: var(--pdaa-muted);
    border: 1px solid var(--pdaa-line);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}
.policy-card-copy:hover {
    background: var(--pdaa-green-soft);
    color: var(--pdaa-green-dark);
    border-color: var(--pdaa-green);
}
.policy-card-copy.copied {
    background: var(--pdaa-green);
    color: white;
    border-color: var(--pdaa-green);
}

/* Tables inside policy pages (legal-basis grid in Privacy, etc.) */
.table-wrap {
    overflow-x: auto;
    margin: 8px 0;
}
.policy-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.policy-table th {
    text-align: left;
    padding: 10px 12px;
    background: var(--pdaa-green-soft);
    color: var(--pdaa-green-dark);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 12px;
    border-bottom: 2px solid var(--pdaa-green);
}
.policy-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--pdaa-line);
    vertical-align: top;
}
.policy-table tr:last-child td { border-bottom: 0; }

/* ====================================================================
   MEDIA PAGE (/media)
   ==================================================================== */

/* Channels grid */
.channel-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    padding: 14px 20px;
}
@media (max-width: 980px) { .channel-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .channel-grid { grid-template-columns: 1fr; } }

.channel-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 18px 14px;
    border: 1px solid var(--pdaa-line);
    border-radius: 12px;
    background: var(--pdaa-card);
    text-align: center;
    transition: transform .15s, box-shadow .15s, border-color .15s;
}
.channel-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
    border-color: var(--pdaa-green);
}
.channel-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: white;
}
.channel-facebook  .channel-icon { background: #1877f2; }
.channel-instagram .channel-icon { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); }
.channel-linkedin  .channel-icon { background: #0a66c2; }
.channel-website   .channel-icon { background: var(--pdaa-green); }

.channel-name {
    font-weight: 800;
    font-size: 15px;
    color: var(--pdaa-black);
}
.channel-handle {
    font-size: 12px;
    color: var(--pdaa-muted);
    word-break: break-word;
}
.channel-actions {
    display: flex;
    gap: 6px;
    margin-top: 4px;
    flex-wrap: wrap;
    justify-content: center;
}
.channel-copy.copied {
    background: var(--pdaa-green) !important;
    color: white !important;
    border-color: var(--pdaa-green) !important;
}

/* Media library — head + tools */
.media-library-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.media-library-tools {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.media-search {
    width: 260px;
    max-width: 100%;
    font-size: 14px;
    padding: 6px 10px;
}
@media (max-width: 540px) {
    .media-search { width: 100%; }
}

/* Folder strip */
.folder-strip {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    padding: 12px 20px;
    border-bottom: 1px solid var(--pdaa-line);
    background: var(--pdaa-bg);
}
.folder-chip-wrap {
    display: inline-flex;
    align-items: center;
    background: white;
    border: 1px solid var(--pdaa-line);
    border-radius: 99px;
    overflow: hidden;
    transition: border-color .15s, background .15s;
}
.folder-chip-wrap.active {
    border-color: var(--pdaa-green);
    background: var(--pdaa-green-soft);
}
.folder-chip {
    background: transparent;
    border: 0;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 700;
    color: var(--pdaa-text);
    cursor: pointer;
    font-family: inherit;
}
.folder-chip.active {
    color: var(--pdaa-green-dark);
}
/* Standalone (no wrap, e.g. "All files") */
button.folder-chip {
    background: white;
    border: 1px solid var(--pdaa-line);
    border-radius: 99px;
    margin-right: 0;
}
button.folder-chip.active {
    border-color: var(--pdaa-green);
    background: var(--pdaa-green-soft);
}
.folder-chip-del {
    background: transparent;
    border: 0;
    border-left: 1px solid var(--pdaa-line);
    padding: 6px 10px;
    font-size: 12px;
    color: var(--pdaa-muted);
    cursor: pointer;
}
.folder-chip-del:hover {
    background: #fee2e2;
    color: #dc2626;
}

/* Media tile grid */
.media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
    padding: 16px 20px;
}
.media-tile {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--pdaa-line);
    border-radius: 12px;
    background: white;
    overflow: hidden;
    transition: box-shadow .15s, border-color .15s;
}
.media-tile:hover {
    box-shadow: 0 6px 16px rgba(0,0,0,0.08);
    border-color: var(--pdaa-green);
}
.media-tile-preview {
    aspect-ratio: 4 / 3;
    background: var(--pdaa-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.media-tile-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.media-tile-preview.placeholder {
    color: var(--pdaa-muted);
    font-size: 48px;
}
.media-tile-body {
    padding: 10px 12px;
    flex: 1;
}
.media-tile-name {
    font-weight: 700;
    font-size: 13px;
    color: var(--pdaa-black);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.media-tile-desc {
    font-size: 12px;
    color: var(--pdaa-text);
    margin-top: 4px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.media-tile-meta {
    font-size: 11px;
    color: var(--pdaa-faint);
    margin-top: 6px;
}
.media-tile-actions {
    display: flex;
    gap: 6px;
    padding: 8px 12px;
    border-top: 1px solid var(--pdaa-line);
    background: var(--pdaa-bg);
}
.media-tile-actions .btn {
    flex: 1;
    justify-content: center;
}
.media-tile-actions .delete-btn {
    flex: 0;
}

/* Resource cards (press kit + brand guidelines link cards) */
.resource-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 14px 20px;
}
@media (max-width: 720px) { .resource-grid { grid-template-columns: 1fr; } }

.resource-card {
    display: flex;
    flex-direction: column;
    padding: 22px;
    border: 1px solid var(--pdaa-line);
    border-radius: 12px;
    background: var(--pdaa-card);
    text-decoration: none;
    color: var(--pdaa-text);
    transition: transform .15s, box-shadow .15s;
}
.resource-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(22, 163, 74, 0.18);
}
.resource-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--pdaa-green-soft);
    color: var(--pdaa-green-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 14px;
}
.resource-card h3 {
    margin: 0 0 6px;
    font-size: 17px;
    font-weight: 800;
    color: var(--pdaa-black);
}
.resource-card p {
    flex: 1;
    margin: 0 0 14px;
    color: var(--pdaa-text);
    font-size: 14px;
    line-height: 1.5;
}
.resource-cta {
    font-size: 13px;
    font-weight: 800;
    color: var(--pdaa-green-dark);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.resource-cta i { margin-left: 6px; transition: transform .15s; }
.resource-card:hover .resource-cta i { transform: translateX(3px); }

/* Press kit + brand guidelines page bits */
.press-asset-row {
    display: flex;
    align-items: flex-start;
    gap: 22px;
    flex-wrap: wrap;
    margin-top: 6px;
}
.press-logo {
    width: 120px;
    height: 120px;
    border: 1px solid var(--pdaa-line);
    border-radius: 12px;
    padding: 14px;
    background: white;
    object-fit: contain;
}

.brand-swatch-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 6px;
}
@media (max-width: 720px) { .brand-swatch-grid { grid-template-columns: 1fr; } }

.brand-swatch {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px;
    border: 1px solid var(--pdaa-line);
    border-radius: 10px;
    background: white;
}
.brand-swatch-chip {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    border-radius: 10px;
}
.brand-swatch-info { flex: 1; }
.brand-swatch-info strong { font-size: 14px; }
.brand-swatch code {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    background: var(--pdaa-bg);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 12px;
}

/* ====================================================================
   CRM (/crm)
   ==================================================================== */

/* Tabs */
.crm-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 2px solid var(--pdaa-line);
    margin: 16px 0;
    overflow-x: auto;
}
.crm-tab {
    background: transparent;
    border: 0;
    padding: 10px 18px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    color: var(--pdaa-muted);
    cursor: pointer;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    white-space: nowrap;
}
.crm-tab:hover { color: var(--pdaa-text); }
.crm-tab.active {
    color: var(--pdaa-green-dark);
    border-bottom-color: var(--pdaa-green);
}
.crm-tab i { margin-right: 6px; }

.crm-pane { margin-top: 8px; }

/* CRM tables */
.crm-table-wrap { overflow-x: auto; }
.crm-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    margin: 8px 0;
}
.crm-table th {
    text-align: left;
    padding: 10px 12px;
    background: var(--pdaa-green-soft);
    color: var(--pdaa-green-dark);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 11px;
    border-bottom: 2px solid var(--pdaa-green);
    white-space: nowrap;
}
.crm-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--pdaa-line);
    vertical-align: top;
}
.crm-table tr:hover td { background: var(--pdaa-bg); }

/* Status pills */
.status-pill {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 99px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: var(--pdaa-bg);
    color: var(--pdaa-muted);
    border: 1px solid var(--pdaa-line);
}
.status-pill.status-active   { background: var(--pdaa-green-soft); color: var(--pdaa-green-dark); border-color: var(--pdaa-green); }
.status-pill.status-lapsed   { background: #fef3c7; color: #92400e; border-color: #fbbf24; }
.status-pill.status-former   { background: var(--pdaa-bg); color: var(--pdaa-muted); }
.status-pill.status-declined { background: #fee2e2; color: #991b1b; border-color: #f87171; }
.status-pill.status-banned   { background: #16201a; color: white; border-color: #16201a; }
.status-pill.status-waiting  { background: #e0e7ff; color: #3730a3; border-color: #818cf8; }
.status-pill.status-offered  { background: #ddd6fe; color: #5b21b6; border-color: #a78bfa; }
.status-pill.status-accepted { background: var(--pdaa-green-soft); color: var(--pdaa-green-dark); border-color: var(--pdaa-green); }
.status-pill.status-withdrawn { background: var(--pdaa-bg); color: var(--pdaa-muted); }

/* Person detail */
.person-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--pdaa-line);
}
.person-detail-grid {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 12px 16px;
    padding: 8px 0;
}
@media (max-width: 540px) {
    .person-detail-grid { grid-template-columns: 1fr; gap: 4px 16px; }
}
.note-item {
    padding: 8px 10px;
    background: var(--pdaa-bg);
    border-left: 3px solid var(--pdaa-green);
    margin-bottom: 6px;
    border-radius: 4px;
}
.note-meta {
    font-size: 11px;
    color: var(--pdaa-muted);
    margin-bottom: 4px;
}

/* List cards (in Waiting Lists tab) */
.list-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
    padding: 12px 0;
}
.list-card {
    display: flex;
    gap: 14px;
    padding: 16px;
    border: 1px solid var(--pdaa-line);
    border-radius: 12px;
    background: white;
    align-items: center;
}
.list-card:hover { border-color: var(--pdaa-green); box-shadow: 0 4px 12px rgba(22,163,74,0.1); }
.list-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--pdaa-green-soft);
    color: var(--pdaa-green-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}
.list-card-body { flex: 1; min-width: 0; }
.list-card-body h3 { margin: 0 0 4px; font-size: 15px; font-weight: 800; }
.list-card-body p { margin: 0; font-size: 13px; color: var(--pdaa-text); }

.list-detail-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px 0 14px;
    border-bottom: 1px solid var(--pdaa-line);
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.list-priority-h {
    margin: 18px 0 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--pdaa-line);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--pdaa-green-dark);
}

/* Form layout helpers */
.form-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 12px;
}
.form-grid-3 {
    display: grid;
    grid-template-columns: 2fr 2fr 1fr;
    gap: 10px;
}
@media (max-width: 540px) {
    .form-grid-2, .form-grid-3 { grid-template-columns: 1fr; }
}
.form-section-h {
    margin: 18px 0 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--pdaa-line);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--pdaa-muted);
}

/* Large modal variant */
.modal-card.modal-lg {
    max-width: 800px;
    width: 95%;
}

/* CRM bulk import — mode choice */
.import-mode-choice {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 8px 0;
}
@media (max-width: 540px) {
    .import-mode-choice { grid-template-columns: 1fr; }
}
.import-mode-btn {
    display: flex;
    gap: 14px;
    align-items: center;
    padding: 18px;
    border: 2px solid var(--pdaa-line);
    border-radius: 12px;
    background: white;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: border-color 0.15s, transform 0.05s;
}
.import-mode-btn:hover {
    border-color: var(--pdaa-green);
    background: var(--pdaa-green-soft);
}
.import-mode-btn:active { transform: translateY(1px); }
.import-mode-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--pdaa-green-soft);
    color: var(--pdaa-green-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}
.import-mode-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.import-mode-text strong {
    font-size: 15px;
    font-weight: 700;
}
.import-mode-text span {
    font-size: 13px;
    color: var(--pdaa-muted);
    line-height: 1.4;
}

/* CRM person form — list checkboxes */
.check-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--pdaa-line);
    border-radius: 8px;
    margin: 6px 0;
    cursor: pointer;
    background: white;
    transition: border-color 0.15s, background 0.15s;
}
.check-row:hover { border-color: var(--pdaa-green); background: var(--pdaa-green-soft); }
.check-row input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--pdaa-green);
    cursor: pointer;
    flex-shrink: 0;
}
.check-row span { font-size: 14px; }

/* CRM — Copy emails control group in list detail header */
.copy-emails-group {
    display: flex;
    gap: 6px;
    align-items: center;
}
@media (max-width: 540px) {
    .copy-emails-group { width: 100%; }
    .copy-emails-group select { flex: 1; }
}

/* CRM — Search row inside list detail */
.list-search-row {
    display: flex;
    gap: 12px;
    align-items: center;
    margin: 12px 0 8px;
    flex-wrap: wrap;
}
.list-search-row input[type="search"] {
    flex: 1;
    min-width: 200px;
    max-width: 400px;
    font-size: 14px;
    padding: 8px 12px;
}
.list-search-row p { margin: 0; }

/* ====================================================================
   CRM — mobile optimisations
   ==================================================================== */

@media (max-width: 768px) {
    /* Tabs scroll horizontally rather than wrap */
    .crm-tabs {
        gap: 2px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }
    .crm-tab {
        padding: 10px 14px;
        font-size: 13px;
    }

    /* All CRM tables get horizontal scroll on the wrap container.
       Keep cells from breaking words mid-email. */
    .crm-table-wrap,
    .crm-pane .crm-table { /* tables not inside .crm-table-wrap */
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .crm-table {
        font-size: 13px;
        min-width: 600px;   /* forces horizontal scroll on phone */
    }
    .crm-table th,
    .crm-table td {
        padding: 8px 10px;
        white-space: nowrap;
    }
    /* Notes-style cells can wrap (we don't want to scroll forever for a note) */
    .crm-table td:last-child {
        white-space: normal;
    }

    /* List detail header — stack on small screens */
    .list-detail-head {
        gap: 8px;
    }
    .list-detail-head h2 {
        font-size: 18px;
        flex: 1 1 100%;
        order: 2;
    }
    .list-detail-head #backToListsBtn {
        order: 1;
    }
    .list-detail-head .copy-emails-group {
        order: 3;
        flex: 1 1 100%;
    }
    .list-detail-head > div[style*="flex:1"] {
        display: none;     /* the spacer is irrelevant once stacked */
    }

    /* Copy emails group — full width and stretch the button */
    .copy-emails-group {
        width: 100%;
        gap: 8px;
    }
    .copy-emails-group select {
        flex: 1;
        min-width: 0;
    }
    .copy-emails-group button {
        flex: 0 0 auto;
    }

    /* People tab toolbar — search/status/add stack cleanly */
    .media-library-head .media-library-tools {
        flex-wrap: wrap;
        gap: 8px;
        width: 100%;
    }
    .media-library-tools .media-search,
    .media-library-tools input[type="search"] {
        flex: 1 1 100%;
        min-width: 0;
    }
    .media-library-tools select {
        flex: 1 1 auto;
    }

    /* List card grid — single column already, but tighten */
    .list-cards {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .list-card {
        padding: 14px;
    }

    /* Search row — input goes full-width */
    .list-search-row input[type="search"] {
        max-width: none;
        flex: 1 1 100%;
    }

    /* Inline status dropdown in entry row — keep readable */
    .entry-status {
        margin-top: 4px;
    }

    /* Modal padding tightened */
    .modal-card.modal-lg {
        width: 100%;
        max-width: 100%;
        margin: 0;
        min-height: 100vh;
        border-radius: 0;
    }

    /* Person detail action buttons wrap */
    .person-actions {
        gap: 6px;
    }
    .person-actions .btn {
        flex: 0 1 auto;
        font-size: 12px;
        padding: 6px 10px;
    }

    /* Form section headers tighter */
    .form-section-h {
        margin: 14px 0 6px;
    }
}

@media (max-width: 540px) {
    /* Tab labels shrink further; icons stay for tap target */
    .crm-tab {
        padding: 8px 10px;
        font-size: 12px;
    }

    /* Copy emails button text shrinks; icon carries it */
    .copy-emails-group button {
        padding: 6px 10px;
    }

    /* Sub-headings shrink */
    .list-priority-h {
        font-size: 12px;
    }
}

@media (max-width: 420px) {
    /* Stack copy emails dropdown above button on the tiniest screens */
    .copy-emails-group {
        flex-direction: column;
        align-items: stretch;
    }
    .copy-emails-group select,
    .copy-emails-group button {
        width: 100%;
    }
}

/* Subscribe page — consent block + success state */
.consent-block .check-row {
    align-items: flex-start;
    padding: 14px;
}
.consent-block .check-row input[type="checkbox"] {
    margin-top: 2px;
}
.consent-block .check-row span {
    font-size: 14px;
    line-height: 1.55;
}
.consent-block a:not(.btn) {
    color: var(--pdaa-green-dark);
    text-decoration: underline;
}

.success-splash {
    background: white;
    border: 1px solid var(--pdaa-line);
    border-radius: 12px;
    padding: 48px 28px;
    text-align: center;
    margin: 24px 0;
}
.success-tick {
    width: 96px;
    height: 96px;
    background: var(--pdaa-green-soft);
    color: var(--pdaa-green);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 44px;
    margin-bottom: 18px;
}
.success-splash h2 {
    color: var(--pdaa-green);
    margin: 0 0 12px;
    font-size: 24px;
}
.success-splash p {
    margin: 0 0 8px;
    font-size: 16px;
}

/* CRM — insert entry modal + band headers */
.list-band-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.list-band-head .list-priority-h { margin-bottom: 0; }

.seg-toggle {
    display: inline-flex;
    border: 1px solid var(--pdaa-line);
    border-radius: 8px;
    overflow: hidden;
    margin: 4px 0 12px;
}
.seg-btn {
    padding: 8px 18px;
    border: none;
    background: white;
    font-family: inherit;
    font-size: 14px;
    cursor: pointer;
    color: var(--pdaa-muted);
    transition: background 0.15s, color 0.15s;
}
.seg-btn:hover { background: var(--pdaa-green-soft); }
.seg-btn.active {
    background: var(--pdaa-green);
    color: white;
    font-weight: 700;
}

.insert-results {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 8px 0;
    max-height: 280px;
    overflow-y: auto;
}
.insert-result-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left;
    padding: 10px 12px;
    border: 1px solid var(--pdaa-line);
    border-radius: 8px;
    background: white;
    cursor: pointer;
    font-family: inherit;
    transition: border-color 0.15s, background 0.15s;
}
.insert-result-row:hover { border-color: var(--pdaa-green); background: var(--pdaa-green-soft); }
.insert-result-row.selected {
    border-color: var(--pdaa-green);
    background: var(--pdaa-green-soft);
    box-shadow: inset 0 0 0 1px var(--pdaa-green);
}
.insert-result-row strong { font-size: 14px; }

/* CRM — Team Member application detail */
.team-detail {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px 16px;
    margin-bottom: 14px;
}
.team-detail-row {
    padding: 8px 0;
    border-bottom: 1px solid var(--pdaa-line);
    font-size: 14px;
    line-height: 1.55;
}
.team-detail-row strong { color: var(--pdaa-muted); font-weight: 600; margin-right: 6px; }
@media (min-width: 720px) {
    .team-detail { grid-template-columns: 1fr 1fr; }
}
.modal-card-lg { max-width: 760px; }

/* Team applications — photo grid in detail modal */
.team-photos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 14px;
}
@media (max-width: 600px) {
    .team-photos-grid { grid-template-columns: 1fr; }
}
.team-photo-tile {
    display: block;
    border: 1px solid var(--pdaa-line);
    border-radius: 8px;
    overflow: hidden;
    background: var(--pdaa-line);
    aspect-ratio: 1 / 1;
}
.team-photo-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.team-photo-error {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--pdaa-muted);
    font-size: 13px;
    text-align: center;
    padding: 16px;
}

/* Catch report statuses */
.status-pill.status-new      { background: #dbeafe; color: #1e40af; border-color: #60a5fa; }
.status-pill.status-reviewed { background: var(--pdaa-green-soft); color: var(--pdaa-green-dark); border-color: var(--pdaa-green); }
.status-pill.status-featured { background: #fef3c7; color: #92400e; border-color: #f59e0b; }

/* Catch form — slider styling */
.weight-slider {
    width: 100%;
    margin-top: 6px;
}
.form-label-sub {
    display: block;
    font-size: 13px;
    color: var(--pdaa-muted);
    margin-bottom: 4px;
}

/* Cards follow the public site: white, hairline, soft shadow. The 2px green
   outline they used to carry was a P&DAA-specific flourish that does not exist
   anywhere on fishinginpeterborough.co.uk, so it goes. The green is still doing
   work on the loader arc, the table header rules and the map frame, where it
   marks something rather than decorating a box. */
.card, .card-fieldset, .section-panel, .login-card, .payment-card, .bank-card,
.activity-card, .tools-card, .hub-intro, .dept-card, .policy-card,
.resource-card, .success-splash, .empty-state {
    box-shadow: var(--shadow, 0 1px 2px rgba(15,40,20,.05), 0 8px 24px rgba(15,40,20,.07));
}

/* The header button. The site styles it white with green text and only sets
   the colour in .nav-cta .btn-primary, leaving the ground to the base rule.
   Our .btn-primary paints the ground green, so the two combined gave green
   text on green at 2.38. Match the site outright rather than fight it. */
.nav-cta .btn-primary,
.nav-cta .btn-primary:hover {
    background: #fff;
    border-color: #fff;
    color: var(--green-700, #1b5e20);
}

/* The signed-in address in the header, beside the sign out button. Hidden on
   narrow screens: on a phone the header has room for the mark and one control,
   and the address is on the page anyway. */
.office-who {
    color: rgba(255,255,255,.82);
    font-size: 13px;
    margin-right: 12px;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
@media (max-width: 900px) { .office-who { display: none; } }

/* The version and review line at the foot of every policy. It is governance
   metadata, not decoration: a policy without its version and review date is
   not much use in a dispute. Sits inside the content, above the site footer. */
.doc-version {
    max-width: 1120px;
    margin: 32px auto 8px;
    padding: 0 20px;
    color: var(--pdaa-muted);
    text-align: center;
}

/* ── Incident pin map ────────────────────────────────────────────────
   Leaflet map on the two incident forms. The pin is optional; the water
   selector above it stays the required field. */
.pinmap-wrap { margin-top: 14px; grid-column: 1 / -1; }
.pinmap .leaflet-tile-pane { filter: saturate(.32) brightness(1.06) contrast(.96); }
.pinmap-optional {
    font-weight: 600; font-size: 11px; letter-spacing: .06em;
    color: var(--pdaa-muted); text-transform: uppercase; margin-left: 6px;
}
.pinmap {
    height: 300px;
    border: 2px solid var(--pdaa-green);
    border-radius: var(--pdaa-radius-sm);
    overflow: hidden;
    background: var(--pdaa-green-soft);
}
.pinmap-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
/* Both pin map buttons carry a label, so they share the row evenly. */
.pinmap-btn { flex: 1 1 auto; justify-content: center; }
/* .btn sets display, which beats the browser's [hidden]{display:none}.
   Without this the Clear pin button shows when there is no pin to clear. */
.pinmap-actions [hidden] { display: none !important; }
.pinmap-status {
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--pdaa-muted);
}
.pinmap-status-set  { color: var(--pdaa-green-dark); font-weight: 600; }
.pinmap-status-warn { color: #92400e; }
.leaflet-container { font-family: inherit; }
@media (max-width: 560px) { .pinmap { height: 240px; } }