:root{
  --navy-950:#0a1128;
  --navy-900:#0e1836;
  --navy-800:#16264f;
  --navy-700:#23366b;
  --navy-650:#2c3f79;
  --gold-700:#8a6a2f;
  --gold-400:#d4af6a;
  --gold-200:#f0dfae;
  --parchment:#f3ecd9;
  --ink:#eef1f8;
  --muted:#9fb0d0;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:radial-gradient(ellipse at 50% 0%, var(--navy-800) 0%, var(--navy-950) 62%);
  color:var(--ink);
  font-family:"Source Serif 4",Georgia,"Times New Roman",serif;
  min-height:100vh;
}

.page-watermark{
  position:fixed; inset:0; z-index:-1;
  display:flex; align-items:center; justify-content:center;
  pointer-events:none; overflow:hidden;
}
.page-watermark img{
  width:52vmin; max-width:560px; min-width:200px;
  opacity:.05; filter:grayscale(30%);
}

.eyebrow{
  font-family:"Cinzel",Georgia,serif;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gold-400);
}
h1,h2,h3{
  font-family:"Cinzel",Georgia,serif;
  font-weight:600;
  color:var(--parchment);
  text-wrap:balance;
  margin:0;
}
button{font-family:inherit;}
a{color:var(--gold-200);}
.mono{font-family:"JetBrains Mono",ui-monospace,Menlo,monospace;}

.topbar{
  display:flex; align-items:center; justify-content:center; gap:.6em;
  padding:18px 20px 0; text-align:center;
}
.topbar-rule{width:34px; height:1px; background:linear-gradient(90deg,transparent,var(--gold-700));}
.topbar-rule.flip{background:linear-gradient(90deg,var(--gold-700),transparent);}
.topbar span{
  font-size:11px; letter-spacing:.22em; color:var(--muted);
  font-family:"Cinzel",Georgia,serif; text-transform:uppercase;
}

.screen{max-width:1100px; margin:0 auto; padding:36px 20px 80px;}
[hidden]{display:none !important;}

/* ---------- HUB ---------- */
/* A 3-column grid, not a centered flex row: centering .hub-main together with the sidebar as
   one unit would shift the orbit (and everything keyed to the page's true center, like the
   fixed .page-watermark behind it) off to the left. The two minmax(0,1fr) tracks stay equal
   width no matter what's in the sidebar, so .hub-main always lands dead center; the sidebar
   just occupies the right track alongside it. Falls back to a single centered column (sidebar
   below, not overlapping) once there isn't room for all three tracks side by side. */
#screen-hub{
  display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:start; justify-items:center; column-gap:24px; row-gap:12px;
  text-align:center; padding:16px 20px 14px; box-sizing:border-box; max-width:1500px;
}
.hub-main{grid-column:2; display:flex; flex-direction:column; align-items:center; min-width:0; max-width:900px;}
.pending-clubs-sidebar{grid-column:3; justify-self:start;}
.hub-head{max-width:560px; margin-bottom:4px;}
.hub-head h1{font-size:clamp(20px,3vw,32px); margin-top:6px;}
.hub-head p{color:var(--muted); font-size:14px; margin:6px 0 0;}
.motto{
  font-family:"Cinzel",Georgia,serif; color:var(--gold-400); font-size:11px;
  letter-spacing:.2em; text-transform:uppercase; margin-top:4px;
}

.orbit-wrap{
  position:relative; width:min(94vw,900px); height:min(94vw,900px);
  max-width:900px; max-height:900px; margin:12px auto;
  display:flex; align-items:center; justify-content:center;
}
.sunburst{
  position:absolute; inset:0; border-radius:50%;
  background:repeating-conic-gradient(from 0deg, rgba(212,175,106,.14) 0deg 4deg, rgba(212,175,106,0) 4deg 18deg);
  animation:spin 140s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}
.orbit-ring{position:absolute; border:1px solid var(--navy-650); border-radius:50%;}

.seal-center{
  position:relative; z-index:3; display:flex; flex-direction:column; align-items:center; gap:10px;
  background:none; border:none; padding:8px; cursor:pointer; font-family:inherit; color:inherit;
  transition:transform .2s ease;
}
.seal-center:hover, .seal-center:focus-visible{transform:scale(1.045);}
.seal-center img{
  width:clamp(132px,21vw,204px); height:clamp(132px,21vw,204px); object-fit:contain;
  border-radius:50%; background:var(--navy-900); padding:12px;
  box-shadow:0 0 0 3px var(--navy-950), 0 0 0 4px var(--gold-700), 0 12px 32px rgba(0,0,0,.45);
}
.seal-center .region-name{
  font-family:"Cinzel",Georgia,serif; color:var(--parchment); font-size:13px;
  letter-spacing:.1em; text-transform:uppercase; max-width:200px;
}
.seal-center .region-hint{
  font-family:"Cinzel",Georgia,serif; font-size:9.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted);
}

.club-node{
  position:absolute; top:50%; left:50%; display:flex; flex-direction:column; align-items:center; gap:8px;
  width:136px; margin:-68px 0 0 -68px; z-index:2; background:none; border:none; cursor:pointer;
  padding:0; transition:transform .18s ease;
}
.club-node:hover, .club-node:focus-visible{transform:scale(1.07);}
.club-node img{
  width:112px; height:112px; object-fit:contain; border-radius:50%; background:var(--navy-900);
  padding:8px; box-shadow:0 0 0 2px var(--navy-650), 0 8px 20px rgba(0,0,0,.4);
}
.club-node .club-label{
  font-family:"Cinzel",Georgia,serif; font-size:10.5px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--muted); line-height:1.3; text-align:center; max-width:130px;
}
.orbit-grid{display:none; flex-wrap:wrap; gap:22px 14px; justify-content:center; margin-top:8px; padding:0 6px;}
.orbit-grid .club-node{position:static; margin:0; width:104px;}
.orbit-grid .club-node img{width:88px; height:88px;}
.orbit-grid .club-node .club-label{font-size:9.5px; max-width:100px;}

.roster-count{margin-top:0; font-size:12px; color:var(--muted);}
.roster-count b{color:var(--gold-200); font-weight:600;}
/* Phase 7.51: clubs still in formation - a sidebar beside the real orbit (see #screen-hub
   above), not a button since there's no login/access flow for a club that doesn't exist yet. */
.pending-clubs-sidebar{
  display:flex; flex-direction:column; align-items:center; gap:16px;
  width:150px; padding-top:64px;
}
.pending-clubs-title{
  font-family:"Cinzel",Georgia,serif; font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted);
}
.pending-clubs-stack{display:flex; flex-direction:column; gap:24px; align-items:center;}
.pending-club-tile{display:flex; flex-direction:column; align-items:center; gap:8px; width:140px; opacity:.85;}
.pending-club-tile img{
  width:96px; height:96px; object-fit:contain; border-radius:50%; background:var(--navy-900);
  padding:8px; box-shadow:0 0 0 2px var(--navy-700), 0 8px 20px rgba(0,0,0,.35);
}
.pending-club-tile .club-label{
  font-family:"Cinzel",Georgia,serif; font-size:10.5px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--muted); line-height:1.3; text-align:center; max-width:136px;
}
/* Once there's no room for all three grid tracks side by side, drop back to a single centered
   column - .hub-main alone decides the page's center again, with the sidebar's own line below
   it instead of a track beside it. */
@media (max-width:1040px){
  #screen-hub{display:flex; flex-direction:column; align-items:center;}
  .pending-clubs-sidebar{width:100%; padding-top:22px; margin-top:20px; border-top:1px dashed var(--navy-700);}
  .pending-clubs-stack{flex-direction:row; flex-wrap:wrap; justify-content:center;}
}
.seal-mobile{display:none; margin:0 auto 14px;}
@media (max-width:680px){.orbit-wrap{display:none;} .orbit-grid{display:flex;} .seal-mobile{display:flex;}}

/* ---------- CLUB / REGION LANDING ---------- */
.back-link{
  display:inline-flex; align-items:center; gap:6px; font-family:"Cinzel",Georgia,serif;
  font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
  text-decoration:none; background:none; border:none; cursor:pointer; padding:0; margin-bottom:26px;
}
.back-link:hover{color:var(--gold-200);}
.dash-topbar{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:4px 16px; margin-bottom:26px;}
.dash-topbar .back-link{margin-bottom:0;}
.club-header{
  display:flex; align-items:center; gap:22px; padding-bottom:26px;
  border-bottom:1px solid var(--navy-700); margin-bottom:30px;
}
.club-header img{
  width:96px; height:96px; object-fit:contain; border-radius:50%; background:var(--navy-900);
  padding:8px; box-shadow:0 0 0 2px var(--navy-950), 0 0 0 3px var(--gold-700); flex:none;
}
.club-header h2{font-size:clamp(22px,3.4vw,30px);}
.club-header .sub{margin-top:6px; font-size:13px; color:var(--muted);}

.access-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:18px;}
@media (max-width:560px){.access-grid{grid-template-columns:1fr;}}
.access-grid.single{grid-template-columns:1fr; max-width:380px;}
.access-card{
  background:var(--navy-800); border:1px solid var(--navy-700); border-radius:6px; padding:26px 22px;
  text-align:left; cursor:pointer; color:inherit; display:flex; flex-direction:column; gap:12px;
  transition:border-color .18s ease, transform .18s ease, background .18s ease;
}
.access-card:hover{border-color:var(--gold-400); background:var(--navy-650); transform:translateY(-2px);}
.access-icon{
  width:38px; height:38px; border-radius:50%; border:1px solid var(--gold-700);
  display:flex; align-items:center; justify-content:center; color:var(--gold-400); flex:none;
}
.access-card h3{font-size:16px;}
.access-card p{margin:0; font-size:13.5px; color:var(--muted); line-height:1.5;}
.access-card .cta{
  margin-top:auto; font-family:"Cinzel",Georgia,serif; font-size:11px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--gold-200);
}

/* ---------- ACCESS CODE ---------- */
#screen-access{max-width:440px;}
.plaque{background:var(--navy-800); border:1px solid var(--navy-700); border-radius:8px; padding:34px 30px; text-align:center;}
.plaque .role-tag{
  display:inline-block; font-family:"Cinzel",Georgia,serif; font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--navy-950); background:var(--gold-400); padding:4px 10px;
  border-radius:3px; margin-bottom:16px;
}
.plaque h2{font-size:20px;}
.plaque .club-mini{display:flex; align-items:center; justify-content:center; gap:8px; margin-top:8px; color:var(--muted); font-size:12.5px;}
.plaque .club-mini img{width:20px; height:20px; object-fit:contain; border-radius:50%; background:var(--navy-900);}
.code-form{margin-top:26px; text-align:left;}
.code-form label{
  display:block; font-family:"Cinzel",Georgia,serif; font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); margin-bottom:8px;
}
.code-form input{
  width:100%; background:var(--navy-950); border:1px solid var(--navy-650); border-radius:4px;
  padding:13px 14px; color:var(--parchment); font-size:16px; letter-spacing:.12em;
}
.code-form input:focus{outline:2px solid var(--gold-400); outline-offset:1px; border-color:var(--gold-400);}
.submit-btn{
  width:100%; margin-top:16px; background:var(--gold-400); color:var(--navy-950); border:none;
  border-radius:4px; padding:13px 14px; font-family:"Cinzel",Georgia,serif; font-size:12.5px;
  letter-spacing:.12em; text-transform:uppercase; font-weight:600; cursor:pointer;
}
.submit-btn:hover{background:var(--gold-200);}
.plaque .back-link{margin:22px auto 0; justify-content:center; display:flex;}
.code-hint{margin-top:10px; font-size:11.5px; color:var(--muted); text-align:left; line-height:1.5;}

/* ---------- DASHBOARD ---------- */
.sample-banner{
  display:inline-flex; align-items:center; gap:7px; font-family:"JetBrains Mono",monospace;
  font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--navy-950);
  background:var(--gold-400); padding:5px 11px; border-radius:3px; margin-bottom:22px;
}
.dash-header{
  display:flex; align-items:center; gap:18px; padding-bottom:22px;
  border-bottom:1px solid var(--navy-700); margin-bottom:26px;
}
.dash-header img{
  width:64px; height:64px; object-fit:contain; border-radius:50%; background:var(--navy-900);
  padding:6px; box-shadow:0 0 0 2px var(--navy-950), 0 0 0 3px var(--gold-700); flex:none;
}
.dash-header h2{font-size:clamp(20px,3vw,26px);}
.dash-header .sub{margin-top:5px; font-size:13px; color:var(--muted);}
.dash-section{margin-bottom:36px;}
.dash-section h3{font-size:15px; margin-bottom:14px; padding-bottom:10px; border-bottom:1px solid var(--navy-700);}
.table-wrap{overflow-x:auto; border:1px solid var(--navy-700); border-radius:6px;}
.ledger-table{width:100%; border-collapse:collapse; font-size:13.5px; min-width:420px;}
.ledger-table th{
  text-align:left; font-family:"Cinzel",Georgia,serif; font-size:10px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted); background:var(--navy-900); padding:11px 14px; white-space:nowrap;
}
.ledger-table td{padding:11px 14px; border-top:1px solid var(--navy-700); color:var(--ink);}
.ledger-table td.num, .ledger-table th.num{font-family:"JetBrains Mono",monospace;}
.ledger-table tbody tr:hover{background:rgba(212,175,106,.05);}
.ledger-table tbody tr.clickable-row{cursor:pointer;}
.ledger-table tbody tr.clickable-row:hover{background:rgba(212,175,106,.12);}
/* Phase 7.12: the consolidated "Total Stock" row above an item name's individual tagged
   batches - a gold-tinted background sets it apart the same way .stmt-row.grand marks the
   final line of a Statement, so it reads as the summary rather than another batch. */
.ledger-table tbody tr.inv-total-row{background:rgba(212,175,106,.09); border-bottom:1px solid var(--gold-700);}
.ledger-table tbody tr.inv-total-row:hover{background:rgba(212,175,106,.16);}
/* Phase 7.48: the word "Eagle(s)" gets a brush-script flourish everywhere it appears - club
   names, member titles ("Eagle"/"Lady Eagle"), headings, and printable reports - via the
   brushEagles() JS helper wrapping each occurrence in this span rather than restyling whole
   strings (a club name like "Agusan Valley Eagles Club" should only have "Eagles" scripted, not
   the whole name). Sized up slightly since script faces read smaller than their point size at
   the same baseline as surrounding serif/Cinzel text; a nowrap safety net keeps a mid-word line
   break from cutting a cursive letterform in half.
   @media print here keeps the letterhead documents' generated <style> blocks (each printed
   report writes its own <head>) unaffected - only this main stylesheet defines the rule
   normally, so it also covers window.print() straight off the live page, matching every other
   print-area helper class in this file. */
.brush-eagle{
  font-family:"Yellowtail", cursive !important; font-size:1.2em; line-height:1; letter-spacing:.01em !important;
  white-space:nowrap; text-transform:none !important; display:inline-block;
}
/* Phase 7.48: strict facsimile of the national office's own TFOE-PE Form 2 (ID Application
   Form) table, used both on-screen and inside the standalone print window. */
.official-form-table{width:100%; border-collapse:collapse; font-family:"Source Serif 4",Georgia,serif; margin-top:10px;}
.official-form-table td{border:1px solid var(--navy-650); padding:6px 8px; vertical-align:top; font-size:13px;}
.official-form-table .of-label{font-weight:700; font-size:10px; text-transform:uppercase; letter-spacing:.02em; color:var(--muted);}
.official-form-table .of-sub{font-size:12px; margin-top:4px;}
.official-form-table .of-value{margin-top:3px; min-height:16px;}
.pill{
  display:inline-block; font-family:"Cinzel",Georgia,serif; font-size:10px; letter-spacing:.06em;
  text-transform:uppercase; padding:3px 9px; border-radius:99px; border:1px solid currentColor;
}
.pill-good{color:#8fc08a;} .pill-warn{color:#e0aa5a;} .pill-bad{color:#e0897a;} .pill-muted{color:var(--muted);}

.modal-overlay{
  position:fixed; inset:0; background:rgba(6,10,24,.72); z-index:80;
  display:flex; align-items:center; justify-content:center; padding:20px;
}
.modal-box{
  background:var(--navy-900); border:1px solid var(--gold-700); border-radius:8px;
  box-shadow:0 20px 60px rgba(0,0,0,.55); padding:26px 24px; width:100%; max-width:400px;
}
.modal-title{
  font-family:"Cinzel",Georgia,serif; font-size:16px; letter-spacing:.05em; color:var(--parchment);
  margin:0 0 10px;
}
.modal-message{font-size:13px; color:var(--muted); line-height:1.5; margin:0 0 14px;}
.modal-input{
  width:100%; background:var(--navy-950); border:1px solid var(--navy-650); border-radius:4px;
  padding:10px 11px; color:var(--parchment); font-size:14px; font-family:inherit; margin-bottom:6px;
  box-sizing:border-box;
}
.modal-input:focus{outline:2px solid var(--gold-400); outline-offset:1px; border-color:var(--gold-400);}
.modal-actions{display:flex; justify-content:flex-end; align-items:center; gap:18px; margin-top:18px;}
.modal-actions .back-link{margin:0;}

.toast{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(12px);
  background:var(--navy-900); border:1px solid var(--gold-700); color:var(--gold-200); font-size:12.5px;
  padding:11px 18px; border-radius:6px; box-shadow:0 10px 30px rgba(0,0,0,.4);
  opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease; z-index:60;
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

@media (prefers-reduced-motion:reduce){.sunburst{animation:none;} .club-node, .access-card{transition:none;}}

/* ---------- TABS / SEGMENTED CONTROLS ---------- */
/* On a narrow screen the tab bar scrolls horizontally rather than wrapping (there's no room
   for 7 tabs to wrap sensibly) - the fade on the right edge is a visual hint that more tabs
   sit off-screen, since a plain scrollable row gives no such hint on its own. Hidden on wide
   screens where the bar isn't likely to overflow in the first place. */
.tab-bar-wrap{position:relative;}
.tab-bar-wrap::after{
  content:""; position:absolute; top:0; right:0; bottom:0; width:32px;
  background:linear-gradient(to right, transparent, var(--navy-900) 75%);
  pointer-events:none;
}
@media (min-width:900px){.tab-bar-wrap::after{display:none;}}
.tab-bar{display:flex; gap:2px; border-bottom:1px solid var(--navy-700); margin-bottom:28px; overflow-x:auto;}
.tab-btn{
  font-family:"Cinzel",Georgia,serif; font-size:11.5px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--muted); background:none; border:none; border-bottom:2px solid transparent;
  padding:11px 16px; cursor:pointer; white-space:nowrap;
}
.tab-btn:hover{color:var(--gold-200);}
.tab-btn.active{color:var(--gold-200); border-bottom-color:var(--gold-400);}

.seg-bar{
  display:inline-flex; background:var(--navy-900); border:1px solid var(--navy-700); border-radius:6px;
  padding:3px; gap:2px; margin-bottom:22px; flex-wrap:wrap;
}
.seg-btn{
  font-family:"Cinzel",Georgia,serif; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase;
  padding:8px 15px; border-radius:4px; border:none; background:none; color:var(--muted); cursor:pointer;
}
.seg-btn:hover{color:var(--gold-200);}
.seg-btn.active{background:var(--gold-400); color:var(--navy-950);}

/* ---------- FORMS ---------- */
.activity-form{
  display:grid; grid-template-columns:150px 1fr; gap:12px 16px; padding:16px;
  background:var(--navy-900); border:1px solid var(--navy-700); border-radius:6px;
  margin-bottom:24px; align-items:start;
}
@media (max-width:640px){.activity-form{grid-template-columns:1fr;}}
.activity-form .full{grid-column:1 / -1;}
.activity-form > div{display:flex; flex-direction:column;}
.activity-form label{
  font-family:"Cinzel",Georgia,serif; font-size:9.5px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--muted); margin-bottom:6px;
}
.activity-form input[type="text"], .activity-form select{
  background:var(--navy-950); border:1px solid var(--navy-650); border-radius:4px; padding:9px 10px;
  color:var(--parchment); font-size:13px; font-family:inherit;
}
.activity-form input:focus, .activity-form select:focus{outline:2px solid var(--gold-400); outline-offset:1px; border-color:var(--gold-400);}
.activity-form input[type="file"]{color:var(--muted); padding:8px 0; border:none; background:none; font-size:12px;}

.team-form{
  display:grid; grid-template-columns:150px 1fr; gap:12px 16px; padding:16px;
  background:var(--navy-900); border:1px solid var(--navy-700); border-radius:6px;
  margin-bottom:16px; align-items:start;
}
@media (max-width:640px){.team-form{grid-template-columns:1fr;}}
.team-form .full{grid-column:1 / -1;}
.team-form > div{display:flex; flex-direction:column;}
.team-form label{
  font-family:"Cinzel",Georgia,serif; font-size:9.5px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--muted); margin-bottom:6px;
}
.team-form input[type="text"], .team-form select{
  background:var(--navy-950); border:1px solid var(--navy-650); border-radius:4px; padding:9px 10px;
  color:var(--parchment); font-size:13px; font-family:inherit;
}
.team-form input:focus, .team-form select:focus{outline:2px solid var(--gold-400); outline-offset:1px; border-color:var(--gold-400);}

.scope-select{
  background:var(--navy-950); border:1px solid var(--navy-650); border-radius:4px; padding:9px 10px;
  color:var(--parchment); font-size:13px; font-family:inherit; min-width:240px;
}
.scope-select:focus{outline:2px solid var(--gold-400); outline-offset:1px; border-color:var(--gold-400);}

.add-btn{
  background:var(--gold-400); color:var(--navy-950); border:none; border-radius:4px; padding:9px 16px;
  font-family:"Cinzel",Georgia,serif; font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  font-weight:600; cursor:pointer; white-space:nowrap;
}
.add-btn:hover{background:var(--gold-200);}

.queue-actions{display:flex; gap:8px;}
.btn-ghost{
  font-family:"Cinzel",Georgia,serif; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase;
  padding:6px 11px; border-radius:4px; border:1px solid var(--navy-650); background:transparent;
  color:var(--muted); cursor:pointer;
}
.btn-ghost:hover{border-color:var(--gold-400); color:var(--gold-200);}
.btn-ghost.reject:hover{border-color:#e0897a; color:#e0897a;}

.include-check{transform:scale(1.1); vertical-align:middle; cursor:pointer; accent-color:var(--gold-400);}
.include-check:disabled{opacity:.4; cursor:not-allowed;}
.override-toggle{display:inline-flex; align-items:center; gap:5px; margin-left:14px; font-size:11px; color:var(--muted); cursor:pointer;}
.override-toggle input{cursor:pointer; accent-color:var(--gold-400);}
.show-toggle{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--muted); margin-bottom:14px; cursor:pointer;}
.show-toggle input{cursor:pointer; accent-color:var(--gold-400);}

/* ---------- LEDGER ENTRY FORM ---------- */
.entry-form{
  display:grid; grid-template-columns:140px 1fr 1fr 130px auto; gap:10px; align-items:end;
  margin-bottom:20px; padding:16px; background:var(--navy-900); border:1px solid var(--navy-700); border-radius:6px;
}
.entry-form.with-category{grid-template-columns:120px 140px 1fr 1fr 120px auto;}
@media (max-width:900px){.entry-form, .entry-form.with-category{grid-template-columns:1fr 1fr;}}
@media (max-width:520px){.entry-form, .entry-form.with-category{grid-template-columns:1fr;}}
.entry-form div{display:flex; flex-direction:column;}
.entry-form label{
  font-family:"Cinzel",Georgia,serif; font-size:9.5px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--muted); margin-bottom:6px;
}
.entry-form input, .entry-form select{
  background:var(--navy-950); border:1px solid var(--navy-650); border-radius:4px; padding:9px 10px;
  color:var(--parchment); font-size:13px; font-family:inherit;
}
.entry-form input:focus, .entry-form select:focus{outline:2px solid var(--gold-400); outline-offset:1px; border-color:var(--gold-400);}
.entry-form input[type="file"]{background:none; border:none; padding:8px 0; color:var(--muted); font-size:12px;}

/* Phase 7.16: the "+ Add Line Item" form under an activity's own Financial Report - same
   look/field styling as .entry-form, just its own column count (Category/Description/Amount/
   button) since it lives nested inside an activity's own list item rather than a dash-section. */
.finitem-form{
  display:grid; grid-template-columns:130px 1fr 130px auto; gap:10px; align-items:end;
  margin:10px 0; padding:14px; background:var(--navy-900); border:1px solid var(--navy-700); border-radius:6px;
}
@media (max-width:640px){.finitem-form{grid-template-columns:1fr 1fr;}}
.finitem-form div{display:flex; flex-direction:column;}
.finitem-form label{
  font-family:"Cinzel",Georgia,serif; font-size:9.5px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--muted); margin-bottom:6px;
}
.finitem-form input, .finitem-form select{
  background:var(--navy-950); border:1px solid var(--navy-650); border-radius:4px; padding:9px 10px;
  color:var(--parchment); font-size:13px; font-family:inherit;
}
.finitem-form input:focus, .finitem-form select:focus{outline:2px solid var(--gold-400); outline-offset:1px; border-color:var(--gold-400);}
.finitem-category-label{
  font-family:"Cinzel",Georgia,serif; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--gold-200); margin:10px 0 6px;
}

.table-total{
  margin-top:10px; text-align:right; font-family:"Cinzel",Georgia,serif; font-size:12.5px;
  letter-spacing:.04em; color:var(--gold-200);
}
.row-actions{display:flex; gap:6px; align-items:center; justify-content:flex-end;}
.icon-btn{
  background:none; border:1px solid var(--navy-650); border-radius:4px; width:26px; height:26px;
  display:inline-flex; align-items:center; justify-content:center; color:var(--muted); cursor:pointer;
  font-size:12.5px; line-height:1; padding:0;
}
.icon-btn:hover{border-color:var(--gold-400); color:var(--gold-200);}

.attachment-chips{display:flex; flex-wrap:wrap; gap:6px; align-items:center;}
.attachment-chip{
  display:inline-flex; align-items:center; gap:5px; font-size:10.5px; color:var(--muted);
  background:var(--navy-950); border:1px solid var(--navy-650); border-radius:12px; padding:4px 8px;
  text-decoration:none; white-space:nowrap;
}
.attachment-chip:hover{border-color:var(--gold-400); color:var(--gold-200);}
.attachment-remove{color:var(--muted); font-size:12px; line-height:1;}
.attachment-remove:hover{color:#e0897a;}
.attachment-add{
  display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px;
  border:1px dashed var(--navy-650); border-radius:50%; color:var(--muted); cursor:pointer; font-size:13px;
}
.attachment-add:hover{border-color:var(--gold-400); color:var(--gold-200);}
.icon-btn.delete-btn:hover{border-color:#e0897a; color:#e0897a;}

/* ---------- BEGINNING BALANCE + STATEMENT ---------- */
.balance-setup{
  background:var(--navy-900); border:1px solid var(--navy-700); border-radius:6px; padding:16px;
  margin-bottom:24px; max-width:420px;
}
.balance-setup-label{
  font-family:"Cinzel",Georgia,serif; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); margin-bottom:10px;
}
.balance-form{display:flex; gap:10px;}
.period-remarks-input{
  flex-basis:100%; min-height:60px; background:var(--navy-950); border:1px solid var(--navy-650);
  border-radius:4px; padding:9px 10px; color:var(--parchment); font-size:13px; font-family:inherit; resize:vertical;
}
.period-remarks-input:focus{outline:2px solid var(--gold-400); outline-offset:1px; border-color:var(--gold-400);}
.balance-form input{
  flex:1; background:var(--navy-950); border:1px solid var(--navy-650); border-radius:4px; padding:9px 10px;
  color:var(--parchment); font-size:14px;
}
.balance-form input:focus{outline:2px solid var(--gold-400); outline-offset:1px; border-color:var(--gold-400);}

.statement{max-width:560px;}
.statement-section-title{
  margin:0 0 12px; font-family:"Cinzel",Georgia,serif; font-size:11px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--gold-400);
}
.statement-section-title.spaced{margin-top:34px;}
.stmt-row{display:flex; justify-content:space-between; gap:14px; padding:9px 0; font-size:14px; border-top:1px solid var(--navy-700);}
.stmt-row:first-of-type{border-top:none;}
.stmt-row.total{border-top:1px solid var(--navy-650); margin-top:2px; font-weight:600; color:var(--parchment);}
.stmt-row.grand{
  border-top:2px solid var(--gold-400); border-bottom:2px solid var(--gold-400); margin-top:4px;
  padding:14px 0; font-size:16.5px; color:var(--gold-200); font-family:"Cinzel",Georgia,serif; letter-spacing:.02em;
}
.stmt-row .amt{font-family:"JetBrains Mono",monospace;}

/* ---------- ACTIVITY LOG ---------- */
.activity-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px;}
.activity-list li{display:flex; flex-wrap:wrap; gap:6px 14px; padding:12px 14px; border-top:1px solid var(--navy-700); font-size:13.5px;}
.activity-list li:first-child{border-top:none;}
.activity-list .a-date{font-family:"JetBrains Mono",monospace; color:var(--muted); flex:none; width:96px;}
.activity-list .a-body{flex:1; min-width:180px;}
.activity-list .a-actions{margin-left:auto;}
.activity-list .a-body b{color:var(--parchment); font-weight:600;}
.activity-list .a-body .a-club{display:block; color:var(--muted); font-size:11.5px; margin-top:1px;}
.activity-list .a-body .a-details{display:block; color:var(--muted); font-size:12px; margin-top:2px;}
.activity-list .a-body .a-accomplishment{display:block; color:var(--gold-200); font-size:12px; margin-top:4px;}
.activity-list .a-body .a-accomplishment b{color:var(--gold-200);}
.attendance-section{margin-top:12px; width:100%;}
.attendance-title{
  font-family:"Cinzel",Georgia,serif; font-size:10.5px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--muted); margin-bottom:8px; display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.activity-list .a-actions{display:flex; gap:6px; align-items:flex-start;}

.photo-grid{display:flex; flex-wrap:wrap; gap:8px; margin-top:8px;}
.photo-thumb{position:relative; width:72px; height:72px; border-radius:4px; overflow:hidden; border:1px solid var(--navy-650);}
.photo-thumb img{width:100%; height:100%; object-fit:cover; display:block;}
.photo-thumb .photo-remove{
  position:absolute; top:2px; right:2px; width:18px; height:18px; border-radius:3px; border:none;
  background:rgba(10,17,40,.8); color:var(--gold-200); font-size:11px; line-height:1; cursor:pointer;
}
.photo-upload-label{
  display:inline-flex; align-items:center; justify-content:center; width:72px; height:72px;
  border:1px dashed var(--navy-650); border-radius:4px; color:var(--muted); font-size:11px;
  cursor:pointer; text-align:center; padding:4px;
}
.photo-upload-label:hover{border-color:var(--gold-400); color:var(--gold-200);}
.photo-upload-label input{display:none;}

/* ---------- REPORTS (President's / Governor's) ---------- */
.report-doc{max-width:660px;}
.report-form{display:flex; flex-direction:column; gap:16px; margin-bottom:32px;}
.report-form label{
  font-family:"Cinzel",Georgia,serif; font-size:10px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--muted); margin-bottom:6px; display:block;
}
.report-form input, .report-form textarea{
  width:100%; background:var(--navy-950); border:1px solid var(--navy-650); border-radius:4px;
  padding:10px 12px; color:var(--parchment); font-size:13.5px; font-family:"Source Serif 4",serif; resize:vertical;
}
.report-form input:focus, .report-form textarea:focus{outline:2px solid var(--gold-400); outline-offset:1px; border-color:var(--gold-400);}
.report-form .two-col{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
@media (max-width:600px){.report-form .two-col{grid-template-columns:1fr;}}

.report-period{
  font-family:"Cinzel",Georgia,serif; font-size:11px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--gold-400); margin-bottom:16px;
}
.report-lead{font-size:14.5px; line-height:1.75; color:var(--ink); margin:0 0 28px; white-space:pre-line;}
.report-subhead{
  font-family:"Cinzel",Georgia,serif; font-size:12.5px; letter-spacing:.04em; color:var(--parchment);
  margin:0 0 12px; padding-bottom:8px; border-bottom:1px solid var(--navy-700);
}
.report-list{margin:0 0 28px; padding-left:20px; color:var(--ink); font-size:14px; line-height:1.7;}
.report-list li{margin-bottom:7px;}
.report-sign{margin-top:44px; max-width:320px; padding-top:12px; border-top:1px solid var(--navy-650);}
.report-sign-name{font-family:"Cinzel",Georgia,serif; font-size:14.5px; color:var(--parchment); letter-spacing:.02em;}
.report-sign-title{margin-top:4px; font-size:12px; color:var(--muted);}

/* Phase 7.22: isolates one printable section regardless of how deep it sits in the dashboard's
   own markup - visibility (not display) is what makes this work at any nesting depth: every
   element is hidden, then re-shown just for .print-area and its own descendants, and the area
   is pulled out to the page's top-left so the printed sheet shows only it, not wherever it
   happened to be scrolled to on screen. A section still under [hidden] stays hidden either way,
   so this is safe to leave on multiple sections (region's and club's) at once. */
@media print {
  html, body{background:#fff !important;}
  body *{visibility:hidden;}
  .print-area, .print-area *{visibility:visible;}
  .print-area{position:absolute; top:0; left:0; width:100%; padding:0.4in; background:#fff;}
  .print-area .no-print{display:none !important;}
}
.printable-report-title{font-family:"Cinzel",Georgia,serif; font-size:18px; color:var(--parchment); margin-bottom:2px;}
.printable-report-meta{font-size:12.5px; color:var(--muted); margin-bottom:18px;}
.printable-report-total{margin-top:14px; font-family:"Cinzel",Georgia,serif; font-size:14px; color:var(--gold-400); text-align:right;}
/* On screen this reuses .ledger-table's own dark styling; on paper everything in a print-area
   forces to plain black-on-white regardless of theme, since nobody wants a navy background
   eating printer ink (or rendering as a solid black rectangle on some printers/PDF exports). */
@media print {
  .print-area .printable-report-title, .print-area .printable-report-meta, .print-area .printable-report-total,
  .print-area .ledger-table td, .print-area .ledger-table th{color:#000 !important;}
  .print-area .ledger-table{border-collapse:collapse; width:100%; background:#fff !important;}
  .print-area .ledger-table th, .print-area .ledger-table td{border:1px solid #999; padding:6px 8px; font-size:11px; background:#fff !important;}
}

/* Phase 7.24: a minimal, always-present footer so Privacy Policy/Terms are reachable from
   every screen, and the organization's own identity is visible on the page itself. */
.site-footer{
  text-align:center; padding:22px 16px 28px; font-size:11.5px; color:var(--muted);
  border-top:1px solid var(--navy-700); margin-top:40px;
}
.site-footer a{color:var(--gold-200); text-decoration:none;}
.site-footer a:hover{text-decoration:underline;}
.site-footer-credit{margin-top:8px; font-size:10.5px; color:var(--muted);}
@media print{.site-footer{display:none;}}