:root { --rotary-royal:#17458f; --rotary-azure:#005daa; --rotary-sky:#019fcb; --rotary-gold:#f7a81b; --rotary-gold-deep:#d88b00; --ink:#17253b; --muted:#5c6b7d; --surface:#fff; --canvas:#f3f6fa; --border:#dce4ed; --shadow:0 10px 32px rgb(23 69 143 / 9%); --bs-primary:#17458f; --bs-primary-rgb:23,69,143; --bs-link-color:#005daa; --bs-link-hover-color:#17458f; }
html { min-height:100%; }
body { min-height:100vh; display:flex; flex-direction:column; color:var(--ink); background:var(--canvas); }
a { text-underline-offset:.18em; }
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible { outline:3px solid rgb(247 168 27 / 75%); outline-offset:2px; box-shadow:none!important; }
.skip-link { position:fixed; z-index:1100; top:.5rem; left:.5rem; transform:translateY(-150%); padding:.65rem 1rem; border-radius:.5rem; color:#fff; background:var(--rotary-royal); }
.skip-link:focus { transform:translateY(0); }
.site-header { position:relative; z-index:1020; background:var(--surface); border-bottom:1px solid var(--border); box-shadow:0 4px 18px rgb(23 69 143 / 8%); }
.site-header::after { position:absolute; right:0; bottom:-1px; left:0; height:3px; content:""; background:linear-gradient(90deg,var(--rotary-gold) 0 22%,var(--rotary-azure) 52%,var(--rotary-royal) 100%); }
.topbar { display:flex; min-height:4.25rem; align-items:center; gap:.9rem; padding:.55rem .75rem; }
.menu-toggle { display:flex; width:2.65rem; height:2.65rem; flex:0 0 auto; flex-direction:column; align-items:center; justify-content:center; gap:.28rem; padding:0; border:0; border-radius:.7rem; color:var(--rotary-gold); background:var(--rotary-royal); box-shadow:0 4px 12px rgb(23 69 143 / 20%); transition:transform .15s ease,background-color .15s ease,box-shadow .15s ease; }
.menu-toggle span { display:block; width:1.15rem; height:2px; border-radius:1rem; background:currentColor; }
.menu-toggle:hover,.menu-toggle:focus { color:#fff; background:var(--rotary-azure); box-shadow:0 6px 16px rgb(0 93 170 / 24%); transform:translateY(-1px); }
.brand-lockup { display:flex; min-width:0; align-items:center; gap:.7rem; color:var(--ink); line-height:1.08; text-decoration:none; }
.brand-lockup:hover { color:var(--rotary-royal); }
.brand-lockup strong { display:block; color:var(--rotary-royal); font-size:.98rem; letter-spacing:-.01em; }
.brand-lockup small { display:block; margin-top:.22rem; max-width:15rem; overflow:hidden; color:var(--muted); font-size:.7rem; font-weight:650; text-overflow:ellipsis; white-space:nowrap; }
.brand-mark { display:grid; width:2.25rem; height:2.25rem; flex:0 0 auto; place-items:center; border:2px solid var(--rotary-gold); border-radius:50%; color:var(--rotary-royal); background:#fff8e9; font-family:Georgia,serif; font-size:1.08rem; font-weight:700; }
.topbar-year { width:8rem; margin-left:auto; }
.topbar-year .form-select { border-color:#c7d7e8; color:var(--rotary-royal); background-color:#f6f9fc; font-weight:750; }
.topbar-user { display:flex; min-width:0; align-items:center; gap:.55rem; margin-left:auto; padding:.35rem .55rem .35rem .4rem; border:1px solid #d8e3ef; border-radius:2rem; color:var(--ink); background:#f6f9fc; }
.topbar-year + .topbar-user { margin-left:0; }
.user-avatar { display:grid; width:2rem; height:2rem; flex:0 0 auto; place-items:center; border-radius:50%; color:#fff; background:var(--rotary-royal); font-weight:800; }
.user-details { display:grid; min-width:0; padding-right:.3rem; line-height:1.1; }
.user-name { max-width:10rem; overflow:hidden; font-size:.78rem; text-overflow:ellipsis; white-space:nowrap; }
.user-details small { margin-top:.15rem; color:var(--muted); font-size:.62rem; }
.navigation-drawer { right:auto; left:0; width:min(23rem,92vw); border:0; box-shadow:1rem 0 3rem rgb(17 54 111 / 22%); }
.drawer-header { min-height:6rem; color:#fff; background:linear-gradient(125deg,#11366f,var(--rotary-royal)); border-bottom:4px solid var(--rotary-gold); }
.drawer-eyebrow { margin:0 0 .25rem; color:rgb(255 255 255 / 68%); font-size:.68rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.drawer-body { display:flex; flex-direction:column; padding:0; }
.sidebar-nav { padding:1rem; }
.drawer-link { display:flex; align-items:center; min-height:2.75rem; margin:.12rem 0; padding:.6rem .75rem; border-radius:.55rem; color:var(--ink); font-weight:650; text-decoration:none; }
.drawer-link:hover,.drawer-link:focus { color:var(--rotary-royal); background:#eaf1f9; }
.drawer-section-label { margin:1.25rem .75rem .35rem; color:var(--rotary-azure); font-size:.68rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; }
.drawer-controls { margin-top:auto; padding:1rem; border-top:1px solid var(--border); background:#f6f8fb; }
.drawer-select+.drawer-select { margin-top:.85rem; }
.drawer-select label { display:block; margin-bottom:.25rem; color:var(--muted); font-size:.7rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.drawer-session { display:grid; gap:.8rem; margin-top:1rem; padding-top:1rem; border-top:1px solid var(--border); }
.drawer-session>div { display:flex; align-items:center; gap:.55rem; }
.drawer-user-name { min-width:0; overflow:hidden; font-weight:650; text-overflow:ellipsis; white-space:nowrap; }
.page-shell { flex:1; width:100%; padding-top:2rem; padding-bottom:3rem; }
.page-heading { padding-left:1rem; border-left:4px solid var(--rotary-gold); }
.eyebrow { margin-bottom:.35rem; color:var(--rotary-azure); font-size:.75rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; }
.card { border-radius:.85rem; box-shadow:var(--shadow); }
.card-header,.card-footer { border-color:var(--border); }
.btn { border-radius:.55rem; font-weight:650; }
.btn-primary { border-color:var(--rotary-royal); background:var(--rotary-royal); }
.btn-primary:hover,.btn-primary:focus { border-color:#10366f; background:#10366f; }
.btn-outline-primary { border-color:var(--rotary-royal); color:var(--rotary-royal); }
.btn-outline-primary:hover { border-color:var(--rotary-royal); background:var(--rotary-royal); }
.badge.text-bg-primary { background:var(--rotary-royal)!important; }
.form-control,.form-select { border-color:#bdc9d6; border-radius:.5rem; }
.form-control:focus,.form-select:focus { border-color:var(--rotary-azure); box-shadow:0 0 0 .22rem rgb(0 93 170 / 16%); }
.table { --bs-table-striped-bg:#f6f8fb; margin-bottom:0; }
.table thead th { border-bottom:2px solid #c7d3e0; color:#405169; background:#eef3f8; font-size:.75rem; letter-spacing:.035em; text-transform:uppercase; white-space:nowrap; }
.table>:not(caption)>*>* { padding:.75rem .8rem; }
.report-table { max-height:68vh; border:1px solid var(--border); border-radius:.75rem; background:var(--surface); box-shadow:var(--shadow); }
.report-table thead { position:sticky; z-index:1; top:0; }
.empty-state { padding:3.5rem 1.5rem; border:1px dashed #aebdcd; border-radius:.85rem; text-align:center; background:rgb(255 255 255 / 65%); }
.metric-card { position:relative; overflow:hidden; }
.metric-card::before { position:absolute; top:0; right:0; left:0; height:4px; content:""; background:linear-gradient(90deg,var(--rotary-gold),var(--rotary-azure)); }
.metric-value { color:var(--rotary-royal); font-size:clamp(1.8rem,4vw,2.7rem); font-weight:800; line-height:1; }
.quick-link { display:flex; height:100%; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 1.1rem; border:1px solid var(--border); border-radius:.7rem; color:var(--ink); background:var(--surface); text-decoration:none; transition:transform .15s ease,box-shadow .15s ease; }
.quick-link:hover { color:var(--rotary-royal); box-shadow:var(--shadow); transform:translateY(-2px); }
.quick-link::after { color:var(--rotary-gold-deep); content:"→"; font-size:1.25rem; }
.pre-wrap { white-space:pre-wrap; }
.dues-year-form { min-width:14rem; max-width:24rem; }
.dues-legend { display:flex; flex-wrap:wrap; gap:.7rem 1.1rem; font-size:.82rem; }
.dues-legend span { display:inline-flex; align-items:center; gap:.35rem; }
.dues-dot { width:.7rem; height:.7rem; border-radius:50%; background:#e8edf2; }
.dues-dot.paid,.dues-cell.paid { background:#dff3e7; }
.dues-dot.partial,.dues-cell.partial { background:#fff1c9; }
.dues-dot.unpaid,.dues-cell.unpaid { background:#fde3e3; }
.dues-tracker { max-height:68vh; }
.dues-tracker table { min-width:86rem; font-size:.82rem; }
.dues-tracker thead { position:sticky; z-index:3; top:0; }
.dues-tracker .month-heading { min-width:5.5rem; }
.dues-tracker .sticky-member { position:sticky; z-index:2; left:0; min-width:15rem; background:#fff; box-shadow:2px 0 0 #d8e3ef; }
.dues-tracker thead .sticky-member { z-index:4; background:#edf4fa; }
.dues-tracker .member-number { display:block; color:var(--muted); font-size:.68rem; font-weight:600; }
.receipt-link { font-size:.65rem; font-weight:700; white-space:nowrap; }
.receipt-brand { display:flex; align-items:start; justify-content:space-between; gap:1rem; }
.receipt-number { color:var(--rotary-royal); }
.fiscal-receipt-block { border-top:2px solid var(--rotary-gold); }
.attendance-year-form { min-width:14rem; max-width:24rem; }
.attendance-check-grid>div { display:grid; grid-template-columns:repeat(auto-fit,minmax(14rem,1fr)); gap:.65rem; }
.attendance-check-grid>div>div { min-width:0; padding:.75rem; border:1px solid var(--border); border-radius:.65rem; background:#f8fafc; }
.attendance-check-grid label { display:flex; align-items:center; gap:.65rem; margin:0; font-weight:650; cursor:pointer; }
.attendance-check-grid input[type="checkbox"] { width:1.1rem; height:1.1rem; flex:0 0 auto; accent-color:var(--rotary-royal); }
.attendance-check-grid label:has(input:checked) { color:var(--rotary-royal); }
.manual-contents { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr)); gap:.65rem 1.5rem; }
.manual-chapter { scroll-margin-top:6rem; }
.manual-chapter .card-body { max-width:65rem; }
.club-logo { max-width:14rem; max-height:8rem; object-fit:contain; }
.attendance-analytics-table { min-width:70rem; font-size:.82rem; }
.attendance-rate { display:grid; grid-template-columns:minmax(5rem,1fr) auto; align-items:center; gap:.2rem .55rem; min-width:10rem; }
.attendance-rate meter { width:100%; height:.85rem; accent-color:var(--rotary-royal); }
.attendance-rate small { grid-column:2; color:var(--muted); }
.site-footer { padding:1.2rem 0; border-top:1px solid var(--border); color:var(--muted); background:#fff; font-size:.82rem; }
@media (max-width:767.98px) { .topbar-year{display:none}.topbar-user{margin-left:auto} }
@media (max-width:575.98px) { .page-shell{padding-top:1.25rem}.topbar{min-height:3.85rem;gap:.55rem;padding-inline:.65rem}.brand-mark{display:none}.brand-lockup strong{font-size:.86rem}.brand-lockup small{max-width:8rem}.topbar-user{padding:.25rem;border:0;background:transparent}.topbar-user .user-details{display:none}.table>:not(caption)>*>*{padding:.6rem} }
@media print { .site-header,.site-footer,.btn,form,.receipt-actions{display:none!important}body{background:#fff}.page-shell{padding:0}.card,.report-table{box-shadow:none}.printable-receipt{border:1px solid #d9e2ec!important}.printable-receipt a{color:inherit;text-decoration:none} }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important} }