/* =====================================================================
   DOWELS Member Portal v2 — design system
   Teal #175A56 primary · deep-teal navigation · gold accent · green for "done"
   Type: Plus Jakarta Sans (headings, figures) + Inter (interface)
   ===================================================================== */
:root {
  /* Brand: DOWELS teal #175A56 with a warm gold accent */
  --paper: #F3F6F5;
  --paper-2: #E7EEEC;
  --surface: #FFFFFF;
  --ink: #0E3633;          /* sidebar + dark panels (deep teal) */
  --ink-2: #134440;
  --ink-3: #1D5A55;
  --text: #17302D;
  --muted: #5A6B68;
  --faint: #879794;
  --line: #D6E0DE;
  --line-2: #9DB0AC;       /* input borders — darker so fields are easy to see */

  --clay: #175A56;         /* primary: buttons, links, focus */
  --clay-600: #11433F;
  --clay-700: #0B302D;
  --clay-100: #D4E7E4;
  --clay-50: #EBF4F2;
  --gold: #C9973F;         /* accent: active marks, highlights */
  --gold-50: #FAF3E4;

  --sage: #2E7D4F;
  --sage-100: #D3EBDD;
  --sage-50: #EAF5EE;
  --amber: #A86B12;
  --amber-50: #FBF1DE;
  --rose: #B23A2E;
  --rose-50: #FBEAE7;
  --slate: #1F6F6A;
  --slate-50: #E6F2F1;
  --plum: #7A4E8C;
  --plum-50: #F3ECF6;

  --radius: 14px;
  --radius-sm: 10px;
  --shadow-1: 0 1px 0 rgba(14, 54, 51, .04), 0 1px 3px rgba(14, 54, 51, .06);
  --shadow-2: 0 2px 4px rgba(14, 54, 51, .05), 0 12px 32px -16px rgba(14, 54, 51, .25);
  --shadow-3: 0 30px 70px -30px rgba(14, 54, 51, .5);
  --sidebar-w: 264px;
  --serif: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;   /* display face for headings & figures */
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --bs-body-font-family: var(--sans);
  --bs-body-bg: var(--paper);
  --bs-body-color: var(--text);
  --bs-primary: #175A56;
  --bs-primary-rgb: 23, 90, 86;
  --bs-link-color: var(--clay);
  --bs-link-color-rgb: 23, 90, 86;
  --bs-link-hover-color: var(--clay-600);
  --bs-border-color: var(--line);
  --bs-border-radius: 10px;
  --bs-secondary-color: var(--muted);
  --bs-emphasis-color: var(--text);
}

html { -webkit-text-size-adjust: 100%; }
body { font-size: .94rem; line-height: 1.55; -webkit-font-smoothing: antialiased; font-feature-settings: "cv11", "ss01"; }
h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5 { font-family: var(--serif); color: var(--text); font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
h6, .h6 { font-family: var(--sans); font-weight: 700; color: var(--ink); }
a { text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
.btn:hover, .nav-link:hover, .dropdown-item:hover, .list-group-item:hover, .card-hover:hover, .chip:hover, .page-link:hover { text-decoration: none; }
.text-muted, .text-body-secondary { color: var(--muted) !important; }
.text-primary-brand { color: var(--ink) !important; }
.text-accent { color: var(--clay) !important; }
.text-sage { color: var(--sage) !important; }
.bg-brand { background: var(--ink) !important; color: #fff !important; }
.serif { font-family: var(--serif); }
.tnum { font-variant-numeric: tabular-nums; }
.min-w-0 { min-width: 0; }
.small-caps { font-size: .78rem; font-weight: 600; color: var(--muted); letter-spacing: 0; }
::selection { background: var(--clay-100); color: var(--ink); }
:focus-visible { outline: 2px solid var(--clay); outline-offset: 2px; }

/* ---------------- Buttons ---------------- */
.btn { font-weight: 600; border-radius: 10px; padding: .58rem 1.05rem; letter-spacing: -.005em; transition: background .15s, border-color .15s, box-shadow .15s, transform .08s; }
.btn:active { transform: translateY(1px); }
.btn-sm { padding: .36rem .72rem; border-radius: 8px; font-size: .82rem; }
.btn-lg { padding: .78rem 1.35rem; border-radius: 12px; font-size: 1rem; }
.btn-primary {
  --bs-btn-color: #fff; --bs-btn-bg: var(--clay); --bs-btn-border-color: var(--clay);
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--clay-600); --bs-btn-hover-border-color: var(--clay-600);
  --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--clay-700); --bs-btn-active-border-color: var(--clay-700);
  --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: #8DB3AE; --bs-btn-disabled-border-color: #8DB3AE;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 1px 2px rgba(142, 66, 38, .35);
}
.btn-brand, .btn-dark {
  --bs-btn-color: #fff; --bs-btn-bg: var(--ink); --bs-btn-border-color: var(--ink);
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--ink-3); --bs-btn-hover-border-color: var(--ink-3);
  --bs-btn-active-color: #fff; --bs-btn-active-bg: #000; --bs-btn-active-border-color: #000;
}
.btn-success { --bs-btn-bg: var(--sage); --bs-btn-border-color: var(--sage); --bs-btn-hover-bg: #336852; --bs-btn-hover-border-color: #336852; --bs-btn-active-bg: #2a5644; }
.btn-danger { --bs-btn-bg: var(--rose); --bs-btn-border-color: var(--rose); --bs-btn-hover-bg: #962f25; --bs-btn-hover-border-color: #962f25; }
.btn-outline-primary { --bs-btn-color: var(--clay-600); --bs-btn-border-color: var(--line-2); --bs-btn-bg: var(--surface);
  --bs-btn-hover-bg: var(--clay-50); --bs-btn-hover-color: var(--clay-700); --bs-btn-hover-border-color: var(--clay);
  --bs-btn-active-bg: var(--clay-100); --bs-btn-active-color: var(--clay-700); --bs-btn-active-border-color: var(--clay); }
.btn-light { --bs-btn-bg: var(--surface); --bs-btn-color: var(--ink); --bs-btn-border-color: var(--line-2);
  --bs-btn-hover-bg: var(--paper); --bs-btn-hover-border-color: var(--line-2); --bs-btn-active-bg: var(--paper-2); }
.btn-soft, .btn-soft-brand { background: var(--paper-2); color: var(--ink); border: 1px solid transparent; }
.btn-soft:hover, .btn-soft-brand:hover { background: var(--line); color: var(--ink); }
.btn-soft-clay { background: var(--clay-50); color: var(--clay-700); border: 1px solid var(--clay-100); }
.btn-soft-clay:hover { background: var(--clay-100); color: var(--clay-700); }
.btn-soft-sage { background: var(--sage-50); color: var(--sage); border: 1px solid var(--sage-100); }
.btn-soft-sage:hover { background: var(--sage-100); color: #2a5644; }
.btn-soft-danger { background: var(--rose-50); color: var(--rose); border: 1px solid #F3CFC9; }
.btn-soft-danger:hover { background: #F7D9D4; color: #8f2c22; }
.btn-soft-warning { background: var(--amber-50); color: var(--amber); border: 1px solid #F1DDB4; }
.btn-soft-warning:hover { background: #F6E5C3; color: #835310; }
.btn-icon { width: 38px; height: 38px; padding: 0; display: inline-grid; place-items: center; }

/* ---------------- Forms ---------------- */
.form-label { font-weight: 600; font-size: .84rem; color: var(--ink-2); margin-bottom: .35rem; }
.form-control, .form-select { border-radius: 10px; border: 1px solid var(--line-2); padding: .6rem .82rem; background-color: var(--surface); color: var(--text); transition: border-color .15s, box-shadow .15s; }
.form-select { padding-right: 2.4rem; background-position: right .8rem center; }
.form-control::placeholder { color: var(--faint); }
.form-control:hover, .form-select:hover { border-color: #C9C2B2; }
.form-control:focus, .form-select:focus { border-color: var(--clay); box-shadow: 0 0 0 .22rem rgba(23, 90, 86, .14); }
.form-control:disabled, .form-select:disabled, fieldset:disabled .form-control, fieldset:disabled .form-select { background: var(--paper); color: var(--muted); border-color: var(--line); }
.form-control-lg { border-radius: 12px; padding: .78rem 1rem; font-size: 1rem; }
.form-control-sm, .form-select-sm { padding: .36rem .7rem; border-radius: 8px; font-size: .84rem; }
.form-select-sm { padding-right: 2.1rem; }
.form-text { color: var(--muted); font-size: .8rem; }
.form-check-input { border-color: #BDB5A4; }
.form-check-input:checked { background-color: var(--clay); border-color: var(--clay); }
.form-check-input:focus { box-shadow: 0 0 0 .2rem rgba(23, 90, 86, .15); border-color: var(--clay); }
.form-switch .form-check-input:focus { --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23175A56'/%3e%3c/svg%3e"); }
.input-group-text { background: var(--paper); border-color: var(--line-2); color: var(--ink-2); font-weight: 600; border-radius: 10px; }
.phone-group .input-group-text { font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.input-icon { position: relative; }
.input-icon > .bi:first-child { position: absolute; left: .9rem; top: 50%; transform: translateY(-50%); color: var(--faint); z-index: 4; pointer-events: none; }
.input-icon > .form-control { padding-left: 2.55rem; }
.input-icon .pw-toggle { position: absolute; right: .4rem; top: 50%; transform: translateY(-50%); z-index: 5; border: 0; background: transparent; color: var(--muted); padding: .35rem .5rem; border-radius: 8px; }
.input-icon .pw-toggle:hover { color: var(--ink); background: var(--paper); }
.required::after { content: " *"; color: var(--clay); }
.was-validated .form-control:valid, .form-control.is-valid { border-color: var(--line-2); background-image: none; padding-right: .82rem; }
.was-validated .form-select:valid { border-color: var(--line-2); }
.pw-meter { height: 5px; border-radius: 6px; background: var(--paper-2); overflow: hidden; margin-top: .5rem; }
.pw-meter > span { display: block; height: 100%; width: 0; transition: width .25s, background .25s; border-radius: 6px; }
.form-section-title { display: flex; align-items: center; gap: .65rem; font-size: 1.12rem; margin: 0 0 1.1rem; }
.form-section-title .bi { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: var(--clay-50); color: var(--clay); font-size: 1rem; }
.form-section-title small { font-family: var(--sans); font-size: .8rem; color: var(--muted); font-weight: 500; margin-left: auto; }

/* Declaration — the confirmation every applicant must tick */
.declaration { position: relative; display: flex; gap: 1rem; align-items: flex-start; padding: 1.25rem 1.35rem; border-radius: 14px;
  background: var(--clay-50); border: 1.5px solid var(--clay-100); cursor: pointer; transition: border-color .2s, background .2s, box-shadow .2s; }
.declaration:hover { border-color: #E8BFA9; }
.declaration .form-check-input { width: 1.6rem; height: 1.6rem; margin: .1rem 0 0; flex-shrink: 0; border-width: 2px; border-color: var(--clay); border-radius: 7px; cursor: pointer; }
.declaration .decl-title { font-family: var(--serif); font-size: 1.12rem; font-weight: 600; color: var(--ink); line-height: 1.3; }
.declaration .decl-text { font-size: .9rem; color: var(--ink-2); margin-top: .3rem; }
.declaration.checked { background: var(--sage-50); border-color: var(--sage); box-shadow: 0 0 0 4px rgba(46, 125, 79, .1); }
.declaration.checked .form-check-input { background-color: var(--sage); border-color: var(--sage); }
.was-validated .declaration:has(.form-check-input:invalid) { border-color: var(--rose); background: var(--rose-50); }

/* Human verification */
.captcha-box { display: flex; gap: .6rem; align-items: stretch; flex-wrap: wrap; }
.captcha-img { height: 52px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--paper); display: block; }
.captcha-box .form-control { flex: 1 1 140px; letter-spacing: .25em; font-weight: 700; text-transform: uppercase; font-size: 1.05rem; }
.captcha-refresh { width: 52px; }
.captcha-label { display: flex; align-items: center; gap: .4rem; }
.captcha-label .bi { color: var(--sage); }

/* ---------------- Cards ---------------- */
.card { border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-1); background: var(--surface); }
.card-header { background: transparent; border-bottom: 1px solid var(--line); padding: 1rem 1.3rem; font-weight: 600; color: var(--ink); font-size: .95rem; }
.card-header .bi { color: var(--clay); }
.card-body { padding: 1.3rem; }
.card-footer { background: #FBFAF7; border-top: 1px solid var(--line); border-radius: 0 0 var(--radius) var(--radius) !important; padding: .8rem 1.3rem; }
.card-hover { transition: box-shadow .18s, border-color .18s; }
.card-hover:hover { box-shadow: var(--shadow-2); border-color: var(--line-2); }
.card-quiet { background: var(--paper); border-style: dashed; box-shadow: none; }

/* Stat tiles */
.stat .stat-icon { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 1.15rem; flex-shrink: 0; }
.stat .stat-value { font-family: var(--serif); font-size: 1.75rem; font-weight: 600; color: var(--ink); line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: lining-nums tabular-nums; }
.stat .stat-label { color: var(--muted); font-size: .82rem; font-weight: 500; }
.ic-brand { background: var(--paper-2); color: var(--ink); }
.ic-accent, .ic-clay { background: var(--clay-50); color: var(--clay); }
.ic-success { background: var(--sage-50); color: var(--sage); }
.ic-warning { background: var(--amber-50); color: var(--amber); }
.ic-danger { background: var(--rose-50); color: var(--rose); }
.ic-info { background: var(--slate-50); color: var(--slate); }

/* Hero — ink panel with a heartbeat line, the portal's signature motif */
.hero { position: relative; overflow: hidden; color: #E6F0EE; border: 0; background: linear-gradient(135deg, #175A56 0%, #0E3633 100%); }
.hero::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(600px 260px at 105% -10%, rgba(201, 151, 63, .28), transparent 65%), radial-gradient(500px 300px at -10% 120%, rgba(46, 125, 79, .28), transparent 60%); }
.hero > * { position: relative; z-index: 1; }
.hero h1, .hero h2, .hero h3, .hero h4 { color: #fff; }
.hero .text-muted { color: rgba(230, 240, 238, .7) !important; }
.hero .chip { background: rgba(255, 255, 255, .08); color: #E6F0EE; border: 1px solid rgba(255, 255, 255, .14); }
.hero .btn-light { --bs-btn-bg: rgba(255, 255, 255, .08); --bs-btn-color: #fff; --bs-btn-border-color: rgba(255, 255, 255, .2); --bs-btn-hover-bg: rgba(255, 255, 255, .16); --bs-btn-hover-color: #fff; --bs-btn-hover-border-color: rgba(255, 255, 255, .3); }

.chip { display: inline-flex; align-items: center; gap: .4rem; padding: .28rem .65rem; border-radius: 8px; font-size: .78rem; font-weight: 600; background: var(--paper-2); color: var(--ink-2); border: 1px solid transparent; }
a.chip:hover { border-color: var(--line-2); }

/* Badges — soft pill with a status dot */
.badge { font-weight: 600; padding: .38em .7em; border-radius: 999px; font-size: .74rem; letter-spacing: 0; display: inline-flex; align-items: center; gap: .35em; }
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; display: inline-block; font-style: normal; }
.badge-soft-success { background: var(--sage-50) !important; color: var(--sage) !important; }
.badge-soft-warning { background: var(--amber-50) !important; color: var(--amber) !important; }
.badge-soft-danger { background: var(--rose-50) !important; color: var(--rose) !important; }
.badge-soft-secondary, .badge-soft-light { background: var(--paper-2) !important; color: var(--muted) !important; }
.badge-soft-info { background: var(--slate-50) !important; color: var(--slate) !important; }
.badge-soft-hold { background: var(--plum-50) !important; color: var(--plum) !important; }
.badge-soft-clay { background: var(--clay-50) !important; color: var(--clay-700) !important; }
.badge-count { background: var(--clay); color: #fff; border-radius: 999px; font-size: .7rem; padding: .15rem .45rem; font-weight: 700; }

/* Alerts */
.alert { border: 1px solid transparent; border-radius: 12px; padding: .85rem 1rem; display: flex; gap: .7rem; align-items: flex-start; font-size: .9rem; }
.alert > .bi { font-size: 1.05rem; line-height: 1.35; }
.alert-success { background: var(--sage-50); color: #2b5a47; border-color: var(--sage-100); }
.alert-danger { background: var(--rose-50); color: #8b2c22; border-color: #F3CFC9; }
.alert-warning { background: var(--amber-50); color: #7a4f0e; border-color: #F1DDB4; }
.alert-info { background: var(--slate-50); color: #2f4766; border-color: #D5DFEC; }
.alert-hold { background: var(--plum-50); color: #5d3a6c; border-color: #E2D3EA; }
.alert .btn-close { margin-left: auto; padding: .4rem; }

/* Status banner on member pages */
.status-banner { display: flex; gap: 1rem; align-items: center; padding: 1rem 1.15rem; border-radius: 14px; margin-bottom: 1.25rem; border: 1px solid; flex-wrap: wrap; }
.status-banner .sb-icon { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 1.2rem; flex-shrink: 0; background: rgba(255, 255, 255, .7); }
.status-banner .sb-title { font-family: var(--serif); font-weight: 600; font-size: 1.05rem; color: var(--ink); }
.status-banner .sb-text { font-size: .88rem; }
.status-banner.st-pending { background: var(--amber-50); border-color: #F1DDB4; color: #7a4f0e; }
.status-banner.st-under_review { background: var(--slate-50); border-color: #D5DFEC; color: #2f4766; }
.status-banner.st-on_hold { background: var(--plum-50); border-color: #E2D3EA; color: #5d3a6c; }
.status-banner.st-rejected { background: var(--rose-50); border-color: #F3CFC9; color: #8b2c22; }

/* Tables */
.table { --bs-table-bg: transparent; margin: 0; --bs-table-color: var(--text); }
.table > :not(caption) > * > * { padding: .78rem 1rem; border-bottom-color: #EFEBE3; }
.table thead th { font-size: .78rem; color: var(--muted); font-weight: 600; background: #FBFAF7; border-bottom: 1px solid var(--line); white-space: nowrap; }
.table-hover > tbody > tr:hover > * { --bs-table-bg-state: #FBF8F3; }
.table td { vertical-align: middle; }
.table-card { overflow: hidden; }
.table-sm > :not(caption) > * > * { padding: .55rem .8rem; }

/* Avatar */
.avatar { width: 40px; height: 40px; border-radius: 50%; display: inline-grid; place-items: center; font-weight: 700; font-size: .82rem; color: var(--clay-700); background: var(--clay-100); flex-shrink: 0; object-fit: cover; overflow: hidden; }
img.avatar { background: var(--paper-2); }
.avatar-lg { width: 76px; height: 76px; font-size: 1.45rem; font-family: var(--serif); }
.avatar-xl { width: 112px; height: 112px; font-size: 2rem; font-family: var(--serif); }
.avatar-sm { width: 32px; height: 32px; font-size: .72rem; }
.avatar-ring { box-shadow: 0 0 0 3px var(--surface), 0 0 0 4px var(--line-2); }
.avatar-edit { position: relative; display: inline-block; }
.avatar-edit label { position: absolute; right: -2px; bottom: -2px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--clay); color: #fff; cursor: pointer; border: 3px solid var(--surface); }
.avatar-edit label:hover { background: var(--clay-600); }

/* ---------------- App shell ---------------- */
.app { min-height: 100vh; }
.sidebar { position: fixed; inset: 0 auto 0 0; width: var(--sidebar-w); z-index: 1040; display: flex; flex-direction: column; background: var(--ink); color: #C7DAD7; transition: transform .26s cubic-bezier(.4, 0, .2, 1); }
.sidebar-brand { display: flex; align-items: center; gap: .75rem; padding: 1.2rem 1.25rem 1rem; color: #fff; }
.sidebar-brand:hover { text-decoration: none; color: #fff; }
.sidebar-brand img { width: 42px; height: 42px; background: #fff; border-radius: 11px; padding: 3px; }
.sidebar-brand .t1 { font-family: var(--serif); font-weight: 700; font-size: 1.2rem; line-height: 1; letter-spacing: .01em; }
.sidebar-brand .t2 { font-size: .74rem; color: #8FB0AB; margin-top: .28rem; }
.sidebar-nav { flex: 1; overflow-y: auto; padding: .4rem .75rem 1rem; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .12) transparent; }
.sidebar-nav .nav-section { font-size: .74rem; color: #77A09A; font-weight: 600; padding: 1.05rem .75rem .4rem; }
.sidebar-nav .nav-link { position: relative; display: flex; align-items: center; gap: .75rem; color: #C7DAD7; padding: .56rem .75rem; border-radius: 9px; font-weight: 500; font-size: .9rem; margin-bottom: 1px; }
.sidebar-nav .nav-link .bi { font-size: 1.02rem; width: 20px; text-align: center; color: #8FB0AB; }
.sidebar-nav .nav-link:hover { background: rgba(255, 255, 255, .05); color: #fff; }
.sidebar-nav .nav-link.active { background: rgba(255, 255, 255, .08); color: #fff; font-weight: 600; }
.sidebar-nav .nav-link.active::before { content: ""; position: absolute; left: -.75rem; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--gold); }
.sidebar-nav .nav-link.active .bi { color: #E2B866; }
.sidebar-nav .nav-link .badge-count { margin-left: auto; }
.sidebar-foot { padding: .85rem; border-top: 1px solid rgba(255, 255, 255, .07); }
.sidebar-user { display: flex; gap: .7rem; align-items: center; padding: .55rem; border-radius: 12px; color: #fff; }
.sidebar-user:hover { background: rgba(255, 255, 255, .05); text-decoration: none; color: #fff; }
.sidebar-user .name { font-weight: 600; font-size: .85rem; line-height: 1.2; }
.sidebar-user .meta { font-size: .74rem; color: #8FB0AB; }
.sidebar .avatar { box-shadow: 0 0 0 2px rgba(255, 255, 255, .12); }

.main { margin-left: var(--sidebar-w); min-height: 100vh; display: flex; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 1020; display: flex; align-items: center; gap: .9rem; padding: .8rem 2rem; background: rgba(245, 243, 237, .86);
  backdrop-filter: saturate(150%) blur(10px); -webkit-backdrop-filter: saturate(150%) blur(10px); border-bottom: 1px solid var(--line); }
.topbar .page-title { font-size: 1.22rem; margin: 0; }
.topbar .crumb { font-size: .76rem; color: var(--muted); }
.topbar .crumb .bi { font-size: .62rem; }
.content { padding: 1.75rem 2rem 2.5rem; flex: 1; max-width: 1480px; width: 100%; }
.app-footer { padding: 1rem 2rem 1.5rem; font-size: .78rem; color: var(--muted); }
.sidebar-backdrop { display: none; }
.bell { position: relative; }
.bell .badge-count { position: absolute; top: -4px; right: -4px; }

@media (max-width: 991.98px) {
  .sidebar { transform: translateX(-100%); box-shadow: var(--shadow-3); }
  .sidebar.show { transform: none; }
  .sidebar-backdrop.show { display: block; position: fixed; inset: 0; background: rgba(14, 54, 51, .45); z-index: 1035; }
  .main { margin-left: 0; }
  .topbar { padding: .7rem 1rem; }
  .content { padding: 1.1rem 1rem 2rem; }
  .app-footer { padding: 1rem; }
}

.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.4rem; }
.page-head h1 { font-size: 1.7rem; margin: 0; }
.page-head p { margin: .3rem 0 0; color: var(--muted); max-width: 62ch; }

/* Tabs */
.nav-pills-brand { gap: .2rem; background: var(--surface); border: 1px solid var(--line); padding: .3rem; border-radius: 12px; display: inline-flex; flex-wrap: wrap; }
.nav-pills-brand .nav-link { color: var(--muted); font-weight: 600; border-radius: 9px; padding: .48rem .9rem; font-size: .86rem; }
.nav-pills-brand .nav-link:hover { color: var(--ink); background: var(--paper); }
.nav-pills-brand .nav-link.active { background: var(--ink); color: #fff; }
.nav-pills-brand .nav-link .badge { background: rgba(0, 0, 0, .06) !important; }
.nav-pills-brand .nav-link.active .badge { background: rgba(255, 255, 255, .16) !important; color: #fff !important; }

/* Info list */
.info-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1.1rem 1.5rem; }
.info-list .k { font-size: .78rem; color: var(--muted); font-weight: 500; margin-bottom: .1rem; }
.info-list .v { font-weight: 600; color: var(--ink); word-break: break-word; }

.empty { text-align: center; padding: 2.4rem 1rem; color: var(--muted); }
.empty .bi { font-size: 2rem; color: var(--line-2); display: block; margin-bottom: .5rem; }

/* Progress ring */
.ring { --p: 0; --size: 108px; width: var(--size); height: var(--size); border-radius: 50%; display: grid; place-items: center; position: relative;
  background: conic-gradient(var(--clay) calc(var(--p) * 1%), rgba(255, 255, 255, .1) 0); }
.ring::before { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: var(--ink); }
.ring > span { position: relative; font-family: var(--serif); font-weight: 600; font-size: 1.4rem; color: #fff; }
.ring.light { background: conic-gradient(var(--clay) calc(var(--p) * 1%), var(--paper-2) 0); }
.ring.light::before { background: var(--surface); }
.ring.light > span { color: var(--ink); }

/* Fee calendar */
.fee-grid { display: grid; grid-template-columns: 70px repeat(12, minmax(44px, 1fr)) 96px; gap: 5px; align-items: center; min-width: 840px; }
.fee-grid .hd { font-size: .74rem; font-weight: 600; color: var(--muted); text-align: center; }
.fee-grid .yr { font-family: var(--serif); font-weight: 600; color: var(--ink); font-size: 1.02rem; }
.fee-grid .tot { text-align: right; font-weight: 600; color: var(--ink); font-size: .85rem; font-variant-numeric: tabular-nums; }
.fee-cell { height: 38px; border-radius: 8px; display: grid; place-items: center; font-size: .72rem; font-weight: 600; border: 1px dashed var(--line-2); color: var(--faint); background: #FBFAF7; font-variant-numeric: tabular-nums; }
.fee-cell.paid { background: var(--sage); border: 0; color: #fff; }
.fee-cell.part { background: var(--sage-100); border: 0; color: #2b5a47; }
.fee-cell.unpaid { background: var(--rose-50); border: 1px solid #EFC4BD; color: var(--rose); }
.fee-cell.future { opacity: .45; }
.legend-dot { width: 12px; height: 12px; border-radius: 4px; display: inline-block; vertical-align: -1px; margin-right: .35rem; }

/* Upload */
.dropzone { border: 1.5px dashed var(--line-2); border-radius: var(--radius); background: #FBFAF7; padding: 2rem 1.25rem; text-align: center; transition: border-color .2s, background .2s; cursor: pointer; position: relative; }
.dropzone:hover, .dropzone.drag { border-color: var(--clay); background: var(--clay-50); }
.dropzone > .bi { font-size: 2.1rem; color: var(--clay); }
.dropzone input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.dropzone.locked { cursor: not-allowed; opacity: .6; }
.progress { height: 10px; border-radius: 99px; background: var(--paper-2); }
.progress-bar { background: var(--clay); border-radius: 99px; }
.progress-bar.bg-success { background: var(--sage) !important; }
.progress.lg { height: 20px; }
.progress.lg .progress-bar { font-weight: 700; font-size: .74rem; }

.doc-tile { display: flex; gap: 1rem; align-items: flex-start; }
.doc-tile .doc-ic { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; font-size: 1.3rem; flex-shrink: 0; }
.doc-tile.done .doc-ic { background: var(--sage-50); color: var(--sage); }
.doc-tile.todo .doc-ic { background: var(--paper-2); color: var(--muted); }

.repeat-card { border: 1px solid var(--line); border-radius: 12px; padding: 1rem 1rem .25rem; background: #FCFBF9; position: relative; margin-bottom: 1rem; }
.repeat-card .repeat-num { position: absolute; top: -10px; left: 14px; background: var(--ink); color: #fff; font-size: .7rem; font-weight: 600; border-radius: 6px; padding: .12rem .5rem; }
.repeat-card .repeat-remove { position: absolute; top: .55rem; right: .55rem; }

/* Timeline */
.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li { position: relative; padding: 0 0 1.1rem 1.55rem; }
.timeline li::before { content: ""; position: absolute; left: 4px; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--surface); border: 2px solid var(--clay); }
.timeline li::after { content: ""; position: absolute; left: 8px; top: 20px; bottom: 0; width: 2px; background: var(--line); }
.timeline li:last-child::after { display: none; }
.timeline li.t-approve::before, .timeline li.t-verified::before { border-color: var(--sage); background: var(--sage); }
.timeline li.t-reject::before { border-color: var(--rose); background: var(--rose); }
.timeline li.t-hold::before { border-color: var(--plum); background: var(--plum); }

/* Progress steps (member journey) */
.journey { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; }
.journey .j { position: relative; padding-top: 1.6rem; font-size: .8rem; color: var(--muted); font-weight: 500; }
.journey .j::before { content: ""; position: absolute; top: .45rem; left: 0; right: 0; height: 3px; border-radius: 3px; background: var(--line); }
.journey .j::after { content: ""; position: absolute; top: 0; left: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--surface); border: 2px solid var(--line-2); }
.journey .j.done { color: var(--ink); }
.journey .j.done::before { background: var(--sage); }
.journey .j.done::after { background: var(--sage); border-color: var(--sage); }
.journey .j.now { color: var(--ink); font-weight: 700; }
.journey .j.now::after { border-color: var(--clay); box-shadow: 0 0 0 4px var(--clay-100); }
.journey .j.bad::after { background: var(--rose); border-color: var(--rose); }

/* Membership card with QR */
.member-card { position: relative; border-radius: 18px; padding: 1.4rem; background: linear-gradient(135deg, #175A56 0%, #0E3633 100%); color: #E6F0EE; overflow: hidden; }
.member-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(420px 220px at 110% -20%, rgba(201, 151, 63, .35), transparent 65%); pointer-events: none; }
.member-card > * { position: relative; }
.member-card .mc-id { font-family: var(--serif); font-size: 1.6rem; font-weight: 600; color: #fff; letter-spacing: .02em; }
.member-card .mc-name { font-weight: 600; color: #fff; }
.member-card .mc-meta { font-size: .78rem; color: rgba(230, 240, 238, .65); }
.qr-box { background: #fff; border-radius: 12px; padding: 10px; display: inline-block; line-height: 0; }
.qr-box canvas, .qr-box img { width: 132px; height: 132px; image-rendering: pixelated; }

/* ---------------- Auth (member + staff) ---------------- */
.auth { min-height: 100vh; display: grid; grid-template-columns: minmax(380px, 1fr) minmax(0, 1.15fr); background: var(--paper); }
.auth.auth-wide { grid-template-columns: minmax(340px, .72fr) minmax(0, 1.5fr); }
.auth-aside { position: sticky; top: 0; height: 100vh; overflow: hidden; color: #E6F0EE; padding: 2.75rem 3rem; display: flex; flex-direction: column; background: linear-gradient(160deg, #175A56 0%, #0E3633 100%); }
.auth-aside::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(700px 420px at 120% 0%, rgba(201, 151, 63, .25), transparent 60%), radial-gradient(520px 380px at -20% 110%, rgba(46, 125, 79, .3), transparent 60%); }
.auth-aside > * { position: relative; }
.auth-aside .brand-chip { align-self: flex-start; display: inline-flex; align-items: center; background: #fff; border-radius: 12px; padding: .5rem .8rem; }
.auth-aside .brand-chip img { height: 38px; width: auto; }
.auth-aside h1 { color: #fff; font-size: clamp(2rem, 3.2vw, 2.8rem); line-height: 1.08; font-weight: 600; letter-spacing: -.025em; margin: 2.6rem 0 1rem; max-width: 13ch; }
.auth-aside p.lead { color: rgba(230, 240, 238, .72); font-size: 1rem; max-width: 34ch; }
.auth-points { margin-top: auto; display: grid; gap: .9rem; max-width: 30rem; }
.auth-points div { display: flex; gap: .8rem; align-items: flex-start; font-size: .86rem; color: rgba(230, 240, 238, .72); }
.auth-points b { color: #fff; font-weight: 600; display: block; font-size: .9rem; }
.auth-points .bi { color: #E2B866; font-size: 1.05rem; margin-top: .05rem; }
.auth-aside .foot { margin-top: 1.6rem; font-size: .76rem; color: rgba(230, 240, 238, .45); }
.auth-main { display: flex; align-items: center; justify-content: center; padding: 2.5rem 1.5rem; }
.auth-card { width: 100%; max-width: 430px; }
.auth-wide .auth-card { max-width: 880px; }
.auth-card .mobile-logo { display: none; height: 40px; margin-bottom: 1.5rem; }
.auth-card h2 { font-size: 2rem; margin-bottom: .35rem; letter-spacing: -.02em; }
.auth-card .sub { color: var(--muted); margin-bottom: 1.6rem; }
.auth-divider { display: flex; align-items: center; gap: .75rem; color: var(--muted); font-size: .8rem; margin: 1.5rem 0; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--line-2); }
.auth-steps { display: flex; gap: .5rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.auth-steps .s { flex: 1; min-width: 110px; padding: .55rem .7rem; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); font-size: .8rem; font-weight: 600; color: var(--muted); display: flex; gap: .5rem; align-items: center; }
.auth-steps .s i { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; background: var(--paper-2); font-style: normal; font-weight: 700; font-size: .74rem; color: var(--ink); }
.auth-steps .s.active { border-color: var(--clay-100); background: var(--clay-50); color: var(--clay-700); }
.auth-steps .s.active i { background: var(--clay); color: #fff; }
.staff-auth { min-height: 100vh; display: grid; place-items: center; padding: 2rem 1rem; background: var(--ink); position: relative; overflow: hidden; }
.staff-auth::before { content: ""; position: absolute; inset: 0; background: radial-gradient(800px 480px at 100% 0%, rgba(201, 151, 63, .22), transparent 60%), radial-gradient(600px 400px at 0% 100%, rgba(46, 125, 79, .22), transparent 60%); }
.staff-auth .card { position: relative; width: 100%; max-width: 440px; box-shadow: var(--shadow-3); border: 0; }
.role-tag { font-size: .7rem; font-weight: 700; background: var(--clay); color: #fff; padding: .14rem .45rem; border-radius: 6px; }

@media (max-width: 991.98px) {
  .auth, .auth.auth-wide { grid-template-columns: 1fr; }
  .auth-aside { display: none; }
  .auth-card .mobile-logo { display: block; }
  .auth-main { align-items: flex-start; padding-top: 2rem; }
}

/* Staff */
.filters { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; }
.chart-box { position: relative; height: 290px; }
.counter-tile { border-radius: 12px; padding: .85rem 1rem; background: var(--surface); border: 1px solid var(--line); }
.counter-tile .n { font-family: var(--serif); font-size: 1.5rem; font-weight: 600; color: var(--ink); line-height: 1.1; font-variant-numeric: tabular-nums; }
.counter-tile .l { font-size: .78rem; font-weight: 500; color: var(--muted); }
.counter-tile.ok .n { color: var(--sage); }
.counter-tile.warn .n { color: var(--amber); }
.counter-tile.bad .n { color: var(--rose); }
.counter-tile.info .n { color: var(--slate); }
.log-box { max-height: 240px; overflow: auto; font-size: .8rem; background: var(--ink); color: #D8D2C4; border-radius: 12px; padding: .8rem 1rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.notif { display: flex; gap: .8rem; padding: .85rem 1rem; border-bottom: 1px solid var(--line); color: var(--text); }
.notif:hover { background: #FBF8F3; text-decoration: none; color: var(--text); }
.notif.unread { background: var(--clay-50); }
.notif .n-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; }
.notif .n-title { font-weight: 600; font-size: .88rem; color: var(--ink); }
.notif .n-body { font-size: .82rem; color: var(--muted); }
.notif .n-time { font-size: .74rem; color: var(--faint); white-space: nowrap; }
.action-panel { border: 1.5px solid var(--clay-100); background: var(--clay-50); border-radius: var(--radius); }
.action-panel .card-header { border-bottom-color: var(--clay-100); }
.readonly-note { display: inline-flex; align-items: center; gap: .4rem; font-size: .78rem; color: var(--muted); background: var(--paper-2); padding: .3rem .6rem; border-radius: 8px; }

.dropdown-menu { border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-2); padding: .35rem; }
.dropdown-item { border-radius: 8px; padding: .5rem .75rem; font-weight: 500; font-size: .88rem; color: var(--text); }
.dropdown-item:hover { background: var(--paper); }
.dropdown-item:active { background: var(--clay); color: #fff; }
.modal-content { border: 0; border-radius: 16px; box-shadow: var(--shadow-3); }
.modal-header { border-bottom-color: var(--line); }
.modal-footer { border-top-color: var(--line); }
.pagination { --bs-pagination-color: var(--ink); --bs-pagination-active-bg: var(--ink); --bs-pagination-active-border-color: var(--ink); --bs-pagination-hover-bg: var(--paper); --bs-pagination-focus-box-shadow: 0 0 0 .2rem rgba(23, 90, 86, .15); gap: 4px; }
.pagination .page-link { border-radius: 8px !important; border-color: var(--line); min-width: 34px; text-align: center; }
.list-group-item { border-color: var(--line); }
.tooltip { --bs-tooltip-bg: var(--ink); font-size: .78rem; }
hr { border-color: var(--line); opacity: 1; }

@media print { .sidebar, .topbar, .app-footer, .no-print { display: none !important; } .main { margin: 0; } .card { box-shadow: none; } }
.btn-on-dark { --bs-btn-bg: rgba(255, 255, 255, .08); --bs-btn-color: #fff; --bs-btn-border-color: rgba(255, 255, 255, .2); --bs-btn-hover-bg: rgba(255, 255, 255, .16); --bs-btn-hover-color: #fff; --bs-btn-hover-border-color: rgba(255, 255, 255, .3); --bs-btn-active-bg: rgba(255, 255, 255, .2); --bs-btn-active-color: #fff; }

/* ---- v2.1 additions ---- */
/* Hidden tab panes must never take up space (fixes the empty gap above Family cards) */
.tab-content .tab-pane:not(.active) { display: none !important; }

/* Disabled family tabs for unmarried members */
.nav-pills-brand .nav-link.disabled { color: var(--faint); opacity: .6; cursor: not-allowed; }
.nav-pills-brand .nav-link.disabled .bi-lock { font-size: .75rem; }

/* Login: prominent "Apply for membership" */
.auth-topbar { display: flex; align-items: center; justify-content: flex-end; gap: .9rem; flex-wrap: wrap; padding: 1.25rem 1.75rem 0; }
.auth-topbar .t { font-size: .9rem; color: var(--muted); font-weight: 500; }
.btn-apply { --bs-btn-color: #2b1d05; --bs-btn-bg: var(--gold); --bs-btn-border-color: var(--gold);
  --bs-btn-hover-color: #2b1d05; --bs-btn-hover-bg: #b9852c; --bs-btn-hover-border-color: #b9852c;
  --bs-btn-active-color: #2b1d05; --bs-btn-active-bg: #a5761f; --bs-btn-active-border-color: #a5761f;
  font-weight: 700; border-radius: 999px; padding: .62rem 1.25rem; box-shadow: 0 8px 20px -10px rgba(169, 116, 30, .9); }
.apply-card { display: flex; gap: 1rem; align-items: center; border-radius: 16px; padding: 1.1rem 1.2rem; color: #fff;
  background: linear-gradient(120deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .04)); border: 1px solid rgba(255, 255, 255, .22); margin-top: 1.8rem; max-width: 30rem; }
.apply-card .ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--gold); color: #2b1d05; font-size: 1.3rem; flex-shrink: 0; }
.apply-card b { display: block; font-size: 1.02rem; }
.apply-card span { font-size: .85rem; color: rgba(230, 240, 238, .78); }
.signin-card { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 2rem; box-shadow: var(--shadow-2); }
.signin-card .signin-head { display: flex; gap: .9rem; align-items: center; margin-bottom: 1.4rem; }
.signin-card .signin-head .ic { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--clay-50); color: var(--clay); font-size: 1.35rem; }
.signin-card h2 { margin: 0; font-size: 1.7rem; }
.signin-card .sub { margin: .15rem 0 0; }
.auth-main-col { display: flex; flex-direction: column; min-height: 100vh; }
.auth-main-col .auth-main { flex: 1; }
@media (max-width: 575.98px) { .signin-card { padding: 1.35rem; } .auth-topbar { justify-content: center; padding: 1rem 1rem 0; } }

/* Mobile first-digit hint */
.phone-group .form-control:invalid:not(:placeholder-shown) { border-color: var(--rose); }