/* ============================================================================
   Participant & Family Portal - brand tokens (Ankush, 30 Sep 2026)

   ONE place for the website look. Every portal page (login, Peter's cards,
   the family pages, the RING YWL sheet) reads these tokens. When the public
   website is refreshed, change the values here and nowhere else.

   Values lifted from yourwayliving.com.au's own stylesheet:
     Manrope; primary #1E3A6E (dark #142849, muted #4A5D80, tint #E8EDF6);
     gold #D9A420 (dark #A87A0D); background #FCFBFA; text #1A1A1A;
     40px grid texture (navy lines at 5%).

   Deliberately NOT brand-coloured (Ankush's rule):
     - RING YWL and "I need help now" stay red (--alert) and unmistakable.
     - A tapped medication button is a tick PLUS a solid fill, never colour alone.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
    --brand-font: Manrope, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --navy: #1E3A6E;
    --navy-dark: #142849;
    --navy-muted: #4A5D80;
    --navy-tint: #E8EDF6;
    --gold: #D9A420;
    --gold-dark: #A87A0D;
    --bg: #FCFBFA;
    --ink: #1A1A1A;
    --muted: #4A5D80;
    --line: #E3E6EC;
    --card: #FFFFFF;
    --alert: #A32D2D;            /* RING YWL / urgent - never re-brand this */
    --alert-tint: #FDECEC;
    --ok: #1E3A6E;               /* medication "done" fill (tick + solid) */
    --ok-tint: #E8EDF6;
    --radius-card: 1.2rem;
    --radius-btn: 0.9rem;
    --radius-field: 0.9rem;
    --shadow-card: 0 12px 34px rgba(30, 58, 110, 0.12);
    --shadow-btn: 0 6px 16px rgba(30, 58, 110, 0.25);
    --grid: linear-gradient(90deg, rgba(30, 58, 110, 0.05) 1px, transparent 1px),
            linear-gradient(rgba(30, 58, 110, 0.05) 1px, transparent 1px);
    --grid-size: 40px 40px;
    /* kept for older template rules that still name these */
    --teal: #1E3A6E;
    --teal-light: #E8EDF6;
    --red: #A32D2D;
}

/* ── Base (applies to every portal page) ─────────────────────────────────── */
body {
    font-family: var(--brand-font);
    background-color: var(--bg);
    background-image: var(--grid);
    background-size: var(--grid-size);
    color: var(--ink);
}

/* Navy band with the logo (login, cards, chat) */
.band { background: var(--navy); color: #fff; border-bottom: 0.3rem solid var(--gold); }
.band .org, .band .tagline { color: #fff; }

/* Cards, fields, buttons used by the new pages */
.card { background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-card); border: 1px solid var(--line); }
.btn-navy, .signin { background: var(--navy); color: #fff; border-radius: var(--radius-btn); box-shadow: var(--shadow-btn); }
.btn-navy:hover, .signin:hover { background: var(--navy-dark); }
.btn-red, .ring-btn, .ring-go { background: var(--alert); color: #fff; }

/* ── Family pages (dashboard, schedule, notes, goals, settings, messages) ──
   These older templates carry their own purple palette inline; this file is
   linked after it, so the rules below win. Same selectors, brand values.  */
.navbar { background: #fff; border-bottom: 0.25rem solid var(--gold); box-shadow: 0 2px 8px rgba(30, 58, 110, 0.08); }
.navbar-brand { color: var(--navy); font-weight: 800; }
.navbar-menu a { color: var(--navy-muted); }
.navbar-menu a:hover, .navbar-menu a.active { color: var(--navy); }
.logout-btn { background: var(--navy-tint); color: var(--navy); }
.back-btn { color: var(--navy); }
.quick-btn, .btn-primary, .send-btn, .btn-normal { background: var(--navy); color: #fff; box-shadow: var(--shadow-btn); }
.quick-btn:hover, .btn-primary:hover, .send-btn:hover, .btn-normal:hover { background: var(--navy-dark); box-shadow: var(--shadow-btn); transform: none; }
.quick-btn-secondary, .btn-secondary { background: var(--navy-tint); color: var(--navy); box-shadow: none; }
.card-icon, .note-type, .goal-area { background: var(--navy-tint); color: var(--navy); }
.shift-item, .note-item, .goal-item, .shift-card, .note-card, .goal-card, .info-group { border-left-color: var(--navy); }
.shift-worker, .shift-time, .section-title, .message-from { color: var(--navy); }
.progress-fill { background: var(--navy); }
.form-group input:focus, .form-group textarea:focus { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(217, 164, 32, 0.35); }
.message-item.to-provider { border-left-color: var(--navy); background: var(--navy-tint); }
.message-item.to-family { border-left-color: var(--gold); }
.message-from.staff { color: var(--gold-dark); }
.unread-badge { background: var(--alert); }