/* =====================================================================================================================================
   oc-ui.css  -  THE OurChapter look and feel.   One stylesheet for the whole site.

   WHERE TO CHANGE THINGS
     * Colours and the whole colour theme ........ octhemecore.tpl  (the theme module: one block per theme)
     * Shape, spacing, fonts, shadows, buttons ... this file: change the tokens in section 1 and every page that uses them changes.
     * The title bar (.pagetitle), header buttons (.pagebutton), green action button (.submit), blue button (.button) that EVERY older
       page uses are skinned in section 3, so changing them here changes those pages too.
     * New pages: build them from the oc-* components in section 4 (card, header bar, buttons, tables, switches ...) - no page-level CSS.

   HOW IT IS LOADED:  ocheader.tpl loads this file (and the theme module) on every page.  Without a chosen theme every value falls back to the
   original blue look, so nothing changes until a theme or a token is changed.
   ===================================================================================================================================== */

/* ---- 1. TOKENS ------------------------------------------------------------------------------------------------------------------ */
:root {
  /* colours: taken from the chosen theme (octhemecore.tpl); the second value is the default look */
  --oc-head:   var(--topbar-gradient, linear-gradient(135deg, #01579b 0%, #0288d1 60%, #29b6f6 100%));   /* header bars */
  --oc-accent: var(--accent, #0ea5e9);
  --oc-dark:   var(--blue-dark, #01579b);
  --oc-mid:    var(--blue-mid, #0369a1);
  --oc-light:  var(--blue-light, #38bdf8);
  --oc-pale:   var(--blue-pale, #e0f2fe);
  --oc-card:   var(--section-bg, #ffffff);        /* card / panel background */
  --oc-text:   var(--section-text, #1e293b);      /* text on cards */
  --oc-muted:  var(--muted, #64748b);             /* secondary text */
  --oc-line:   var(--border, #e2e8f0);            /* borders and dividers */
  --oc-th:     var(--th-bg, #f1f5f9);             /* table heading */
  --oc-odd:    var(--row-odd, #f8fafc);           /* table rows */
  --oc-even:   var(--row-even, #ffffff);
  --oc-hover:  var(--row-hover, #e0f2fe);
  /* meaning colours (do not change with the theme) */
  --oc-ok: #15803d;  --oc-bad: #b91c1c;  --oc-warn: #b45309;  --oc-go: #16a34a;
  /* shape */
  --oc-radius: 14px;  --oc-radius-sm: 8px;  --oc-radius-pill: 999px;
  --oc-shadow: 0 1px 3px rgba(0,0,0,.08);   --oc-shadow-lg: 0 8px 24px rgba(0,0,0,.18);
  --oc-gap: 12px;
  /* older pages */
  --oc-legacy-radius: 15px;
}

/* ---- 2. SITE-WIDE RULES (moved here from ocheader.tpl, unchanged) ------------------------------------------------------------- */
@media (min-width: 1100px) { .container { width: 1080px; } }
@media (min-width: 1200px) { .container { width: 1180px; } }
@media (min-width: 1300px) { .container { width: 1280px; } }
@media (min-width: 1400px) { .container { width: 1380px; } }
@media (min-width: 1500px) { .container { width: 1480px; } }
@media (min-width: 1600px) { .container { width: 1580px; } }
@media (min-width: 1700px) { .container { width: 1680px; } }
@media (min-width: 1800px) { .container { width: 1780px; } }
@media print { a[href]:after { display: none; visibility: hidden; } }

.navbar-inverse .navbar-nav li a { color: black; }
.navbar-inverse .navbar-nav li a:hover { color: #a2a2a2; }
.navbar-inverse .navbar-nav li a:visited { color: black; }
icon-bar { color: black; }
list { padding-right: 10px; }
.panel-heading { font-size: 18px; }
.nav-mod { background: #D4E1F1; color: white; font-size: 18px; }
.nav-ul:hover { font-size: 22px; }

#popupbox {               /* the login pop-up */
  margin: 0; margin-left: 40%; margin-right: 40%; margin-top: 50px; padding-top: 10px;
  width: 300px; height: 370px; position: absolute; background: #FBFBF0; border: solid #000000 2px; z-index: 9;
  font-family: arial; visibility: hidden;
}
a { color: black; }
a:hover, a:focus { color: white; }
label { font-weight: bolder; }
.bgc { background: #add8e6; }                  /* background colour for the header */
.headertext { color: blue; }
.back { font-size: 12px; width: 40px; }
.table-responsive a:hover { color: blue; }
.med a:hover { color: blue; }
[data-title]:hover:after { opacity: 1; transition: all 0.1s ease 0.5s; visibility: visible; }
[data-title]:after {
  content: attr(data-title); position: absolute; bottom: -1.6em; left: 100%; padding: 4px 4px 4px 8px; color: #222; white-space: nowrap;
  border-radius: 5px; font-size: 130%; box-shadow: 0px 0px 4px #222; background-image: linear-gradient(to bottom, #f8f8f8, #cccccc);
  opacity: 0; z-index: 99999; visibility: hidden;
}
[data-title] { position: relative; }

/* ---- 3. THE OLDER PAGE CLASSES: the original look, and the chosen theme's colours when a theme is picked -------------------------------- */
.pagetitle {              /* the title bar at the top of (almost) every page */
  color: white; background: linear-gradient(#2030ad, #1e70ff);
  font-size: 20px; padding: 10px; border-radius: var(--oc-legacy-radius); border-color: white; border-width: 5px;
}
.pagebutton {             /* buttons on the title bar */
  background-color: #0440B0; border: 2px solid #00d7c3; border-radius: var(--oc-legacy-radius);
  -webkit-transition: all .15s ease-in-out; transition: all .15s ease-in-out; color: #20ffff; font-size: 14px; padding: 5px;
}
.pagebutton:hover { box-shadow: 0 0 3px 0 #00d7c3 inset, 0 0 5px 2px #00d7c3; border: 2px solid #00d7c3; color: #20ffff; }
.submit {                 /* the green "go" button */
  background: green; color: white; border: 2px solid green; border-radius: var(--oc-legacy-radius);
  -webkit-transition: all .15s ease-in-out; transition: all .25s ease-in-out; font-size: 16px; padding: 5px;
}
.submit:hover { box-shadow: 0 0 3px 0 green inset, 0 0 5px 2px green; border: 2px solid white; color: white; }
.button { color: white; font-size: 16px; background: #0080FF; border-radius: 10px; padding: 5px; }
a.button { color: white; }
.buttonchk { color: white; font-size: 14px; background: grey; border-radius: 10px; padding: 3px 5px; }                          /* check all / uncheck all */
.weblink { color: white; font-size: 14px; background: #0080FF; border-radius: 10px; padding: 3px 5px; }
.submitOLD { color: white; font-size: 16px; background: green; padding: 2px 10px; border-radius: 10px; }

/* with a theme chosen (any page that has the theme module: every page that uses ocheader.tpl) */
html[data-theme] .pagetitle { background: var(--topbar-gradient); }
html[data-theme] .pagebutton { background-color: var(--blue-dark); border-color: var(--blue-light); color: var(--blue-pale); }
html[data-theme] .pagebutton:hover { box-shadow: 0 0 3px 0 var(--blue-light) inset, 0 0 5px 2px var(--blue-light); border-color: var(--blue-light); color: var(--blue-pale); }
html[data-theme] .button, html[data-theme] .weblink { background: var(--accent); }
html[data-theme] footer .panel-heading { background: var(--blue-mid) !important; }

/* ---- 4. COMPONENTS for new pages (use these instead of page-level CSS) ------------------------------------------------------------------ */
.oc-page { max-width: 1280px; margin: 0 auto 30px; color: var(--oc-text); }
.oc-page.narrow { max-width: 980px; }

/* header bar:  <div class="oc-head"><a class="oc-back"><img></a><div class="oc-title"><h1>..</h1><small>..</small></div><div class="oc-actions">buttons</div></div> */
.oc-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--oc-gap); background: var(--oc-head); color: #fff; border-radius: var(--oc-radius); padding: 12px 18px; margin: 10px 0 14px; box-shadow: 0 2px 8px rgba(0,0,0,.18); }
.oc-head a.oc-back img { width: 32px; display: block; }
.oc-title { flex: 1 1 280px; }
.oc-title h1 { margin: 0; font-size: 22px; font-weight: 700; line-height: 1.2; color: #fff; }
.oc-title h1 a, .oc-title h1 a:hover { color: #fff; text-decoration: none; }
.oc-title small { display: block; font-size: 13px; color: rgba(255,255,255,.88); margin-top: 2px; }
.oc-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.oc-hbtn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid rgba(255,255,255,.45); background: rgba(255,255,255,.16); color: #fff; border-radius: 9px; padding: 6px 13px; font-size: 13px; font-weight: 700; text-decoration: none; cursor: pointer; }
.oc-hbtn:hover { background: rgba(255,255,255,.3); color: #fff; text-decoration: none; }
.oc-hbtn.primary { background: #fff; color: #0f3d6e; border-color: #fff; }
.oc-hbtn.primary:hover { background: #f1f5f9; color: #0f3d6e; }
.oc-hbtn img { width: 18px; height: 18px; object-fit: contain; }

/* cards and sections */
.oc-card { background: var(--oc-card); border: 1px solid var(--oc-line); border-radius: var(--oc-radius); box-shadow: var(--oc-shadow); padding: 14px 18px; margin-bottom: 14px; }
.oc-card h2 { margin: 0 0 6px; font-size: 13px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--oc-text); padding-bottom: 8px; border-bottom: 2px solid var(--oc-accent); }
.oc-sechead { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 2px solid var(--oc-accent); }
.oc-sechead h2 { margin: 0; padding: 0; border: 0; font-size: 18px; font-weight: 800; text-transform: none; letter-spacing: 0; }
.oc-sechead .sp { flex: 1; }
.oc-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-bottom: 14px; }
.oc-stat { background: var(--oc-card); border: 1px solid var(--oc-line); border-radius: 12px; padding: 10px 16px; box-shadow: var(--oc-shadow); }
.oc-stat small { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--oc-muted); }
.oc-stat b { display: block; font-size: 24px; line-height: 1.2; color: var(--oc-text); font-variant-numeric: tabular-nums; }
.oc-note { border-radius: 10px; padding: 9px 14px; margin-bottom: 10px; font-size: 14px; line-height: 1.4; background: var(--oc-pale); border: 1px solid var(--oc-line); color: #1e293b; }
.oc-note.warn { background: #fef9c3; border-color: #fde68a; color: #713f12; }
.oc-note.bad { background: #fef2f2; border-color: #fecaca; color: #991b1b; }

/* form rows:  <div class="oc-row"><div class="oc-lab"><b>Label</b><span>help</span></div><div class="oc-ctl">control</div></div> */
.oc-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; padding: 11px 0; border-bottom: 1px solid var(--oc-line); }
.oc-row:last-child { border-bottom: 0; }
.oc-lab { flex: 0 0 230px; max-width: 100%; }
.oc-lab b { display: block; font-size: 15px; color: var(--oc-text); }
.oc-lab span { display: block; font-size: 12px; color: var(--oc-muted); margin-top: 1px; }
.oc-ctl { flex: 1 1 300px; min-width: 0; }
.oc-input, .oc-select { border: 1px solid var(--oc-line); border-radius: var(--oc-radius-sm); padding: 6px 10px; font-size: 14px; background: rgba(255,255,255,.96); color: #1e293b; height: 34px; max-width: 100%; }
.oc-select { min-width: 220px; }
textarea.oc-input { height: auto; min-height: 34px; line-height: 1.45; resize: vertical; }
/* compact card for dense forms:  <div class="oc-card tight">  - slimmer rows, narrow labels, help text hidden; wrap rows in <div class="oc-cols"> to put two side by side */
.oc-card.tight { padding: 8px 16px 2px; margin-bottom: 10px; }
.oc-card.tight h2 { padding-bottom: 5px; margin-bottom: 2px; }
.oc-card.tight .oc-row { padding: 5px 0; gap: 4px 12px; }
.oc-card.tight .oc-lab { flex: 0 0 96px; }
.oc-card.tight .oc-lab b { font-size: 14px; }
.oc-card.tight .oc-lab span { display: none; }
.oc-card.tight .oc-input, .oc-card.tight .oc-select { height: 30px; padding: 3px 9px; }
.oc-card.tight textarea.oc-input { height: auto; }
.oc-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
@media (max-width: 800px) { .oc-cols { grid-template-columns: 1fr; } }
/* rich text editor (TinyMCE) in a compact card: small icons and a narrow block-style box so the whole toolbar fits on one line */
.oc-card.tight .tox .tox-toolbar__primary, .oc-card.tight .tox .tox-toolbar, .oc-card.tight .tox .tox-toolbar-overlord { padding: 0 2px; }
.oc-card.tight .tox .tox-toolbar__group { padding: 0 2px; }
.oc-card.tight .tox .tox-tbtn { height: 24px; width: 24px; margin: 1px 0; }
.oc-card.tight .tox .tox-tbtn svg { transform: scale(.7); transform-origin: center; }
.oc-card.tight .tox .tox-tbtn--select { width: auto; padding: 0 4px; }
.oc-card.tight .tox .tox-tbtn--bespoke .tox-tbtn__select-label { width: 4.6em; font-size: 12px; }
.oc-card.tight .tox .tox-tbtn__select-chevron { width: 12px; }
.oc-card.tight .tox .tox-tbtn--bespoke, .oc-card.tight .tox .tox-tbtn:not(.tox-tbtn--select) .tox-tbtn__select-label { font-size: 12px; }
.oc-card.tight .tox .tox-statusbar { padding: 0 8px; height: 20px; }

/* segmented choice (radio buttons):  <div class="oc-seg"><label><input type="radio" ..><span>Text</span></label>..</div> */
.oc-seg { display: inline-flex; flex-wrap: wrap; border: 2px solid var(--oc-accent); border-radius: 10px; overflow: hidden; }
.oc-seg label { margin: 0; cursor: pointer; font-weight: normal; }
.oc-seg input { position: absolute; opacity: 0; pointer-events: none; }
.oc-seg span { display: block; padding: 7px 16px; font-size: 14px; font-weight: 700; color: var(--oc-text); background: transparent; border-right: 1px solid var(--oc-accent); }
.oc-seg label:last-child span { border-right: 0; }
.oc-seg input:checked + span { background: var(--oc-accent); color: #fff; }
.oc-seg input:focus-visible + span { outline: 3px solid #1d4ed8; outline-offset: -3px; }
.oc-seg label:hover span { background: var(--oc-hover); }
.oc-seg input:checked + span:hover { background: var(--oc-accent); }

/* switch (checkbox):  <label class="oc-sw"><input type="checkbox" ..><i></i>Text</label> */
.oc-sw { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; margin: 0; font-weight: 600; font-size: 14px; color: var(--oc-text); }
.oc-sw input { position: absolute; opacity: 0; pointer-events: none; }
.oc-sw i { position: relative; width: 46px; height: 26px; border-radius: 26px; background: #94a3b8; transition: background .15s; flex: 0 0 46px; }
.oc-sw i:after { content: ""; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: left .15s; box-shadow: 0 1px 3px rgba(0,0,0,.4); }
.oc-sw input:checked + i { background: var(--oc-accent); }
.oc-sw input:checked + i:after { left: 23px; }
.oc-sw input:focus-visible + i { outline: 3px solid #1d4ed8; outline-offset: 2px; }

/* buttons and chips */
.oc-btn { border: 1px solid var(--oc-line); background: #fff; color: #0f3d6e; border-radius: var(--oc-radius-sm); padding: 5px 12px; font-size: 13px; font-weight: 700; cursor: pointer; height: 32px; }
.oc-btn:hover { background: #eff6ff; border-color: #93c5fd; }
/* standard PDF button (use on every page that makes a PDF):  <a class="oc-btn oc-pdf" href=".." target="_blank" rel="noopener" aria-label="PDF of ..."><img src="{$data['host']}/img/pdffile.png" width="16" height="16" alt="">PDF</a>
   in a page header use  class="oc-hbtn oc-pdf"  */
.oc-pdf { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; text-decoration: none; }
.oc-pdf img { width: 16px; height: 16px; object-fit: contain; flex: 0 0 16px; }
.oc-pdf:hover { text-decoration: none; }
/* saved rich text (meeting notes etc.) shown on a page:  <div class="oc-rich">..html..</div> */
.oc-rich { line-height: 1.55; overflow-wrap: anywhere; color: var(--oc-text); }
.oc-rich > :first-child { margin-top: 0; } .oc-rich > :last-child { margin-bottom: 0; }
.oc-rich h1, .oc-rich h2, .oc-rich h3, .oc-rich h4 { margin: 14px 0 6px; font-weight: 700; line-height: 1.25; }
.oc-rich h2 { font-size: 18px; } .oc-rich h3 { font-size: 16px; } .oc-rich h4 { font-size: 14px; }
.oc-rich p { margin: 0 0 9px; } .oc-rich ul, .oc-rich ol { margin: 0 0 9px; padding-left: 24px; }
.oc-rich img { max-width: 100%; height: auto; border-radius: 6px; }
.oc-rich blockquote { margin: 0 0 9px; padding: 2px 14px; border-left: 4px solid var(--oc-accent); color: var(--oc-muted); font-size: inherit; }
.oc-rich table { border-collapse: collapse; max-width: 100%; margin: 0 0 9px; } .oc-rich td, .oc-rich th { border: 1px solid var(--oc-line); padding: 4px 8px; }
.oc-rich a { text-decoration: underline; }
.oc-go { background: var(--oc-accent); color: #fff; border: 0; border-radius: 10px; padding: 11px 26px; font-size: 16px; font-weight: 800; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,.25); }
.oc-go:hover { filter: brightness(1.08); }
.oc-go:disabled { opacity: .7; cursor: wait; }
.oc-chip { border: 2px solid var(--oc-accent); background: transparent; color: var(--oc-text); border-radius: var(--oc-radius-pill); padding: 3px 13px; font-size: 12px; font-weight: 700; cursor: pointer; }
.oc-chip.on { background: var(--oc-accent); color: #fff; }
.oc-badge { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; border-radius: 6px; padding: 2px 8px; margin-right: 6px; vertical-align: middle; background: var(--oc-accent); color: #fff; }
.oc-badge.dark { background: #334155; }

/* sticky action bar at the bottom of a form */
.oc-bar { position: sticky; bottom: 0; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; background: var(--oc-card); border: 1px solid var(--oc-line); border-radius: var(--oc-radius); box-shadow: 0 -2px 12px rgba(0,0,0,.18); padding: 12px 18px; margin-top: 6px; }
.oc-sum { flex: 1 1 300px; font-size: 13px; color: var(--oc-muted); line-height: 1.45; }
.oc-sum b { color: var(--oc-text); }

/* tables:  <div class="oc-wrap"><table class="oc-table"> */
.oc-wrap { overflow-x: auto; border: 1px solid var(--oc-line); border-radius: 10px; }
table.oc-table { width: 100%; border-collapse: collapse; }
table.oc-table th { background: var(--oc-th); color: var(--oc-text); text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; padding: 9px 12px; white-space: nowrap; border-bottom: 2px solid var(--oc-line); }
table.oc-table th.s { cursor: pointer; user-select: none; }
table.oc-table th.s:hover { color: var(--oc-accent); }
table.oc-table th.s:after { content: " \2195"; opacity: .4; font-size: 11px; }
table.oc-table th.s.asc:after { content: " \25B2"; opacity: 1; }
table.oc-table th.s.desc:after { content: " \25BC"; opacity: 1; }
table.oc-table td { padding: 9px 12px; border-top: 1px solid var(--oc-line); vertical-align: middle; font-size: 14px; }
table.oc-table tbody tr:nth-child(odd) td { background: var(--oc-odd); }
table.oc-table tbody tr:nth-child(even) td { background: var(--oc-even); }
table.oc-table tbody tr:hover td { background: var(--oc-hover); }
table.oc-table td a.t { color: var(--oc-text); font-weight: 700; text-decoration: none; border-bottom: 1px dotted var(--oc-accent); }
table.oc-table td a.t:hover { color: var(--oc-accent); }
table.oc-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.oc-empty { text-align: center; padding: 26px 10px; color: var(--oc-muted); }
.oc-empty b { display: block; color: var(--oc-text); font-size: 16px; margin-bottom: 4px; }

/* modal pop-up:  <div class="oc-modal"><div class="box">..</div></div>  (show with style display:block) */
.oc-modal { display: none; position: fixed; z-index: 10000; left: 0; top: 0; right: 0; bottom: 0; background: rgba(15,23,42,.55); overflow-y: auto; }
.oc-modal .box { position: relative; margin: 40px auto; background: #fff; color: #1e293b; border-radius: var(--oc-radius); width: 640px; max-width: 94%; box-shadow: 0 12px 40px rgba(0,0,0,.4); overflow: hidden; }
.oc-toast { display: none; position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%); z-index: 9999; background: #0f172a; color: #fff; border-radius: 10px; padding: 11px 20px; font-size: 14px; box-shadow: 0 6px 20px rgba(0,0,0,.4); }

/* progress steps:  <ol class="oc-steps"><li class="done">Upload</li><li class="now">Verify</li><li>Review</li></ol> */
.oc-steps { display: flex; gap: 0; margin: 14px 0 18px; padding: 0; list-style: none; counter-reset: ocst; }
.oc-steps li { flex: 1; position: relative; text-align: center; padding: 8px 4px 0; font-size: 13px; color: var(--oc-muted); counter-increment: ocst; }
.oc-steps li:before { content: counter(ocst); display: block; width: 30px; height: 30px; line-height: 30px; margin: 0 auto 4px; border-radius: 50%; background: rgba(128,128,128,.28); color: var(--oc-muted); font-weight: 700; position: relative; z-index: 1; }
.oc-steps li:after { content: ""; position: absolute; top: 23px; left: -50%; width: 100%; height: 2px; background: rgba(128,128,128,.28); }
.oc-steps li:first-child:after { display: none; }
.oc-steps li.done:before { background: var(--oc-go); color: #fff; content: "¹3"; }
.oc-steps li.done:after, .oc-steps li.now:after { background: var(--oc-go); }
.oc-steps li.now:before { background: var(--oc-accent); color: #fff; box-shadow: 0 0 0 4px rgba(128,128,128,.25); }
.oc-steps li.now { color: var(--oc-text); font-weight: 700; }

/* small helpers */
.oc-help { color: var(--oc-muted); margin: 0 0 12px; }
.oc-foot { margin: 16px 0 8px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.oc-foot a { color: var(--oc-text); text-decoration: underline; }
.oc-foot a:hover { color: var(--oc-accent); }
.oc-badge.off { background: rgba(128,128,128,.35); color: var(--oc-text); }
.oc-pills { margin: 0 0 12px; }
.oc-pill { display: inline-block; border-radius: 14px; padding: 3px 12px; margin: 0 6px 4px 0; font-weight: 700; font-size: 13px; background: #e0e7ff; color: #3730a3; }
.oc-pill.ok { background: #dcfce7; color: #166534; }
.oc-pill.warn { background: #fef9c3; color: #854d0e; }
.oc-pill.bad { background: #fee2e2; color: #991b1b; }
.oc-pill.off { background: rgba(128,128,128,.25); color: var(--oc-text); }
/* searchable pick list under a text box (e.g. choose a member):  <input class="oc-input"> then <div class="oc-pick"><button type="button">Name<small>email</small></button>..</div> */
.oc-pick { display: block; max-width: 420px; max-height: 168px; overflow-y: auto; margin-top: 4px; border: 1px solid var(--oc-line); border-radius: var(--oc-radius-sm); background: var(--oc-card); }
.oc-pick[hidden] { display: none; }
.oc-pick button { display: block; width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--oc-line); background: transparent; color: var(--oc-text); padding: 6px 10px; font-size: 14px; cursor: pointer; }
.oc-pick button:last-child { border-bottom: 0; }
.oc-pick button:hover, .oc-pick button:focus-visible { background: var(--oc-hover); }
.oc-pick button small { margin-left: 8px; color: var(--oc-muted); font-size: 12px; }
/* action tiles (a grid of big buttons, each with a title and a one-line description):  <div class="oc-tiles"><button class="oc-tile" name=".." value="Y"><span class="oc-badge">PDF</span><b>Title</b><span>What it does</span></button>..</div>
   an <a class="oc-tile"> works too; a disabled tile is greyed out */
.oc-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.oc-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-align: left; background: var(--oc-card); color: var(--oc-text); border: 1px solid var(--oc-line); border-left: 4px solid var(--oc-accent); border-radius: 12px; padding: 11px 14px; cursor: pointer; text-decoration: none; box-shadow: var(--oc-shadow); font: inherit; }
.oc-tile b { font-size: 15px; font-weight: 700; }
.oc-tile > span:not(.oc-badge) { font-size: 12.5px; line-height: 1.4; color: var(--oc-muted); }
.oc-tile .oc-badge { margin: 0 0 2px; }
.oc-tile:hover:not(:disabled) { background: var(--oc-hover); color: var(--oc-text); text-decoration: none; }
.oc-tile:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
/* a count shown beside a section title */
.oc-count { font-size: 13px; font-weight: 700; color: var(--oc-muted); }
/* fixed-width box for code / long lists to copy */
.oc-code { width: 100%; font-family: Consolas, Menlo, monospace; font-size: 13px; }
/* a <canvas> preview (report layouts etc.): always a light sheet, scaled to fit */
.oc-canvas { display: block; max-width: 100%; height: auto; background: #fff; border: 1px solid var(--oc-line); border-radius: 8px; }
/* people cards (officers, contacts, volunteers):  <div class="oc-people"><div class="oc-person"><span class="oc-avatar">AB</span><div><span class="role">President</span><span class="nm">Name</span><span class="ph">phone</span></div></div>..</div>
   with a picture use <img class="oc-avatar" src=".." alt=""> instead of the initials span */
.oc-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 12px; }
.oc-person { display: flex; align-items: center; gap: 14px; background: var(--oc-card); border: 1px solid var(--oc-line); border-left: 4px solid var(--oc-accent); border-radius: 12px; padding: 14px 16px; box-shadow: var(--oc-shadow); }
.oc-avatar { flex: 0 0 76px; width: 76px; height: 76px; border-radius: 50%; object-fit: cover; background: var(--oc-pale); color: var(--oc-dark); display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 800; letter-spacing: .02em; border: 2px solid var(--oc-line); }
.oc-person > div { min-width: 0; }
.oc-person .role { display: block; font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--oc-accent); }
.oc-person .nm { display: block; font-size: 18px; font-weight: 700; line-height: 1.25; color: var(--oc-text); overflow-wrap: anywhere; }
.oc-person .ph { display: block; margin-top: 2px; font-size: 14px; color: var(--oc-muted); }
.oc-person .ph a { color: inherit; text-decoration: none; }
.oc-person .ph a:hover { text-decoration: underline; }

/* tab bar for a multi-step or multi-page function (event wizard, event dashboard...):
   <nav class="oc-tabbar" aria-label=".."><a class="oc-tab on" href=".." aria-current="page"><i>1</i>Info</a><a class="oc-tab" href="..">..</a><span class="oc-tab off">..</span></nav> */
.oc-tabbar { display: flex; flex-wrap: wrap; gap: 4px;   /* every tab always shows: a long row wraps instead of scrolling */ background: var(--oc-card); border: 1px solid var(--oc-line); border-radius: 12px; padding: 6px; margin: 0 0 12px; box-shadow: var(--oc-shadow); }
.oc-tab { display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; border-radius: 9px; white-space: nowrap; font-size: 13px; font-weight: 700; line-height: 1.2; color: var(--oc-text); text-decoration: none; border: 0; background: transparent; }
.oc-tab i { font-style: normal; flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; background: var(--oc-pale); color: var(--oc-dark); }
.oc-tab:hover:not(.on):not(.off) { background: var(--oc-hover); color: var(--oc-text); text-decoration: none; }
.oc-tab.on { background: var(--oc-accent); color: #fff; }
.oc-tab.on i { background: #fff; color: var(--oc-accent); }
.oc-tab.off { opacity: .45; cursor: default; }
.oc-tab:focus-visible { outline: 3px solid #1d4ed8; outline-offset: -2px; }

/* "working" overlay with a swirl and a seconds counter (show with style display:block, put the seconds in .secs) */
.oc-busy { display: none; position: fixed; z-index: 9999; left: 0; top: 0; right: 0; bottom: 0; background: rgba(17,24,39,.6); }
.oc-busy .box { position: absolute; left: 50%; top: 40%; transform: translate(-50%,-50%); background: #fff; color: #111827; border-radius: 12px; padding: 28px 36px; text-align: center; min-width: 300px; max-width: 90%; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.oc-busy .swirl { width: 56px; height: 56px; margin: 0 auto 14px; border: 6px solid #dbe5ff; border-top-color: #1e70ff; border-radius: 50%; animation: ocspin 0.9s linear infinite; }
@keyframes ocspin { to { transform: rotate(360deg); } }
.oc-busy .msg { font-size: 18px; font-weight: 700; color: #111827; }
.oc-busy .secs { font-size: 28px; font-weight: 700; color: #1e70ff; margin: 6px 0 2px; font-variant-numeric: tabular-nums; }
.oc-busy .hint { font-size: 13px; color: #6b7280; }

@media (max-width: 760px) {
  .oc-lab { flex-basis: 100%; }
  .oc-select { min-width: 0; width: 100%; }
  .oc-go { width: 100%; }
  table.oc-table th.hm, table.oc-table td.hm { display: none; }
}

/* ---- 5. DUES AND FINANCE PAGES (the du-* classes; moved here from ocduesstyle.tpl). Colours follow the chosen theme, defaults unchanged. ------ */
:root { --du-navy:var(--section-text,#0f3c5e); --du-line:var(--border,#e2e8f0); --du-muted:var(--muted,#475569); --du-ok:#15803d; --du-bad:#b91c1c; }
.du-page { max-width:1320px; }
.du-head { display:flex; flex-wrap:wrap; align-items:center; gap:12px; background:var(--header-gradient,linear-gradient(135deg,#0b3a63,#1d5fa8)); color:#fff; border-radius:12px; padding:8px 16px; margin:4px 0 10px; }
.du-head a.du-back img { width:30px; display:block; }
.du-title { flex:1 1 260px; }
.du-title h1 { margin:0; font-size:20px; font-weight:600; line-height:1.15; color:#fff; }
.du-title small { display:block; margin-top:1px; font-size:12px; color:#cfe3f4; }
.du-actions { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.du-btn { display:inline-flex; align-items:center; gap:5px; border:1px solid rgba(255,255,255,.4); background:rgba(255,255,255,.14); color:#fff; border-radius:8px; padding:4px 11px; font-size:13px; font-weight:600; text-decoration:none; cursor:pointer; line-height:1.2; }
.du-btn:hover { background:rgba(255,255,255,.28); color:#fff; text-decoration:none; }
.du-btn img { width:16px; height:16px; object-fit:contain; }
.du-btn.on { background:#fff; color:#0b3a63; }
.du-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:8px; margin-bottom:10px; }
.du-card { display:block; background:var(--section-bg,#fff); border:1px solid var(--du-line); border-radius:10px; padding:6px 14px; color:inherit; text-decoration:none; }
a.du-card:hover { border-color:#93c5fd; background:var(--row-hover,#f8fbff); text-decoration:none; color:inherit; }
.du-card small { display:block; color:var(--du-muted); font-size:11px; text-transform:uppercase; letter-spacing:.04em; }
.du-card b { display:block; font-size:18px; color:var(--du-navy); font-variant-numeric:tabular-nums; line-height:1.25; }
.du-card i { display:block; font-style:normal; font-size:11px; color:var(--du-muted); }
.du-sec { background:var(--section-bg,#fff); border:1px solid var(--du-line); border-radius:12px; padding:12px 16px 14px; margin-bottom:12px; }
.du-sec h2 { margin:0 0 10px; font-size:13px; font-weight:700; color:var(--du-navy); text-transform:uppercase; letter-spacing:.06em; padding-bottom:6px; border-bottom:1px solid var(--du-line); }
.du-note { border-radius:10px; padding:9px 14px; margin-bottom:10px; font-size:14px; line-height:1.4; }
.du-note.hint { background:#fef9c3; border:1px solid #fde68a; color:#713f12; }
.du-note.warn { background:#fff7ed; border:1px solid #fed7aa; color:#9a3412; }
.du-note.info { background:#eff6ff; border:1px solid #bfdbfe; color:#1e3a8a; }
.du-note a { font-weight:700; }
.du-tools { display:flex; flex-wrap:wrap; gap:10px 18px; align-items:center; background:var(--section-bg,#fff); border:1px solid var(--du-line); border-radius:12px; padding:8px 14px; margin-bottom:10px; }
.du-tools label { font-size:12px; font-weight:700; color:var(--muted,#475569); text-transform:uppercase; letter-spacing:.04em; margin:0 6px 0 0; }
.du-tools label.chk { font-size:13px; color:var(--section-text,#334155); display:flex; align-items:center; gap:6px; text-transform:none; letter-spacing:0; font-weight:500; margin:0; }
.du-tools .chk input { margin:0; }
.du-in, .du-tools input[type=text], .du-tools select, .du-grid input[type=text], .du-grid input[type=number], .du-grid select, .du-f input[type=text], .du-f select { border:1px solid #cbd5e1; border-radius:8px; padding:5px 9px; font-size:13px; background-color:#fff; color:#0f172a; height:auto; box-sizing:border-box; }
.du-in:focus, .du-tools input:focus, .du-grid input:focus, .du-grid select:focus { outline:2px solid #93c5fd; border-color:#3b82f6; }
.du-search { min-width:220px; padding-left:30px !important; background-repeat:no-repeat; background-position:8px 6px; background-size:16px; }
.du-pills { display:flex; flex-wrap:wrap; gap:6px; }
.du-pill { border:1px solid #cbd5e1; background:#fff; color:#334155; border-radius:999px; padding:3px 12px; font-size:12px; font-weight:600; cursor:pointer; }
.du-pill:hover { background:var(--row-hover,#f1f5f9); }
.du-pill.on { background:#0b3a63; color:#fff; border-color:#0b3a63; }
.du-pill b { font-weight:700; opacity:.75; margin-left:3px; }
.du-tablewrap { background:var(--section-bg,#fff); border:1px solid var(--du-line); border-radius:12px; overflow:auto; }
.du-tablewrap.fixed { max-height:calc(100vh - 380px); min-height:340px; }
table.du-grid { width:100%; border-collapse:separate; border-spacing:0; font-size:13px; }
table.du-grid th { position:sticky; top:0; z-index:2; background:#f1f5f9; color:var(--muted,#475569); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; text-align:left; padding:7px 10px; border-bottom:1px solid var(--du-line); white-space:nowrap; }
table.du-grid td { padding:4px 10px; border-bottom:1px solid #eef2f7; vertical-align:middle; }
table.du-grid tbody tr:nth-child(even) td { background:var(--row-even,#fafcff); }
table.du-grid tbody tr:hover td { background:var(--row-hover,#f1f7ff); }
table.du-grid tr.chg td { background:#fffbe6 !important; }
table.du-grid tr.bad td { background:#fee2e2 !important; }
table.du-grid td.r, table.du-grid th.r { text-align:right; }
table.du-grid td.num { font-variant-numeric:tabular-nums; }
table.du-grid a { color:var(--oc-link,#1d5fa8); text-decoration:none; }
table.du-grid a:hover { text-decoration:underline; }
table.du-grid .nm { font-weight:600; color:var(--section-text,#0f172a); }
table.du-grid .sub { display:block; font-size:12px; color:var(--du-muted); font-weight:400; }
table.du-grid select.du-type { width:170px; }
table.du-grid input.du-amt { width:84px; text-align:right; }
table.du-grid input.du-dt { width:104px; }
.du-chip { display:inline-block; border-radius:999px; padding:1px 9px; font-size:11px; font-weight:700; white-space:nowrap; }
.du-chip.ok { background:#dcfce7; color:#166534; }
.du-chip.soon { background:#fef3c7; color:#92400e; }
.du-chip.expired { background:#fee2e2; color:#991b1b; }
.du-chip.none { background:#e2e8f0; color:var(--muted,#475569); }
.du-chip.life { background:#fef3c7; color:#854d0e; border:1px solid #fcd34d; }
.du-chip.pp { background:#dbeafe; color:#1e40af; }
.du-ico { display:inline-block; width:22px; height:22px; vertical-align:middle; opacity:.9; }
.du-bar { position:sticky; bottom:0; z-index:5; display:flex; flex-wrap:wrap; gap:10px 18px; align-items:center; background:var(--section-bg,rgba(255,255,255,.97)); border-top:1px solid var(--du-line); padding:10px 0; margin-top:8px; }
.du-bar label { font-size:12px; font-weight:700; color:var(--muted,#475569); text-transform:uppercase; letter-spacing:.04em; margin:0 6px 0 0; }
.du-bar .sum { font-size:14px; color:var(--section-text,#334155); flex:1 1 200px; }
.du-bar .sum b { color:var(--du-navy); font-size:16px; }
.du-save { border:0; background:#15803d; color:#fff; border-radius:8px; padding:9px 24px; font-size:14px; font-weight:700; cursor:pointer; }
.du-save:hover { background:#166534; }
.du-save:disabled { background:#94a3b8; cursor:not-allowed; }
.du-link { font-size:14px; color:var(--muted,#475569); }
.du-tip { position:relative; display:inline-block; }
.du-tip .du-tiptext { visibility:hidden; opacity:0; transition:opacity .15s; position:absolute; z-index:20; left:0; top:100%; margin-top:4px; width:560px; max-width:86vw; background:var(--section-bg,#fff); color:var(--section-text,#0f172a); border:1px solid #94a3b8; border-radius:10px; padding:10px 12px; box-shadow:0 10px 28px rgba(15,23,42,.28); font-size:12px; font-weight:400; }
.du-tip:hover .du-tiptext, .du-tip:focus .du-tiptext, .du-tip:focus-within .du-tiptext { visibility:visible; opacity:1; }
.dh-title { font-weight:700; color:var(--du-navy); margin-bottom:5px; font-size:13px; }
table.dh { width:100%; border-collapse:collapse; }
table.dh th { background:#f1f5f9; color:var(--muted,#475569); font-size:10px; text-transform:uppercase; padding:3px 6px; text-align:left; }
table.dh td { padding:3px 6px; border-bottom:1px solid #eef2f7; }
table.dh td.r { text-align:right; }
.du-empty { padding:40px 16px; text-align:center; color:var(--du-muted); font-size:15px; }
.du-ro { background:#fef3c7; border:1px solid #fde68a; color:#78350f; border-radius:10px; padding:9px 14px; font-size:14px; }
.du-f label { display:block; font-size:12px; font-weight:700; color:var(--muted,#475569); text-transform:uppercase; letter-spacing:.04em; margin:0 0 3px; }
.du-form-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:12px 20px; }
@media (max-width:760px) { .du-tablewrap.fixed { max-height:none; } .du-search { min-width:150px; } }

/* editor with a picture column beside it (event description) */
.oc-edit2 { display:grid; grid-template-columns:minmax(0,1fr) 270px; gap:var(--oc-gap); align-items:start; }
@media (max-width:860px) { .oc-edit2 { grid-template-columns:minmax(0,1fr); } }
.oc-edit2 > .oc-card { margin-bottom:0; }
.oc-drop { border:2px dashed var(--oc-light); border-radius:10px; background:var(--oc-pale); padding:12px 8px; text-align:center; color:var(--oc-dark); cursor:pointer; font-size:13px; transition:.15s; }
.oc-drop:hover, .oc-drop.over, .oc-drop:focus { border-color:var(--oc-accent); background:#fff; outline:none; }
.oc-drop b { display:block; font-size:14px; }
.oc-drop small { display:block; color:var(--oc-muted); font-size:11.5px; }
.oc-imgopts { display:flex; flex-wrap:wrap; gap:6px 12px; align-items:center; margin:8px 0; font-size:12.5px; }
.oc-imgopts label { margin:0; font-weight:600; }
.oc-imgopts select { font-size:12.5px; padding:2px 4px; border:1px solid var(--oc-line); border-radius:6px; }
.oc-imglist { display:grid; grid-template-columns:minmax(0,1fr); gap:8px; }
.oc-imgopt { display:flex; flex-direction:column; gap:3px; margin:4px 0; font-size:12px; text-align:left; }
.oc-imgopt label { margin:0; font-weight:600; display:block; }
.oc-imgopt select { display:block; width:100%; font-size:12.5px; padding:2px 4px; border:1px solid var(--oc-line); border-radius:6px; margin-top:2px; }
.oc-imgopt input { margin-right:3px; }
.oc-imgitem { border:1px solid var(--oc-line); border-radius:8px; padding:4px; text-align:center; background:var(--oc-card); }
.oc-imgitem .th { height:90px; display:flex; align-items:center; justify-content:center; overflow:hidden; border-radius:5px; background:var(--oc-th); }
.oc-imgitem .th img { max-width:100%; max-height:90px; }
.oc-imgitem .cap { font-size:11px; color:var(--oc-muted); margin:2px 0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.oc-imgitem .oc-chip { padding:1px 10px; }
.oc-imgitem.bad { border-color:var(--oc-bad); }

/* AI Format suggestion dialog: preview, star rating, Use / Keep (shared by the rich text editors) */
.oc-aiov { position:fixed; inset:0; background:rgba(15,23,42,.55); z-index:100001; display:none; align-items:center; justify-content:center; padding:12px; }
.oc-aibox { background:var(--oc-card); color:var(--oc-text); border-radius:var(--oc-radius); width:760px; max-width:100%; max-height:92vh; display:flex; flex-direction:column; box-shadow:var(--oc-shadow-lg); overflow:hidden; }
.oc-aihead { display:flex; align-items:center; justify-content:space-between; padding:12px 18px; border-bottom:1px solid var(--oc-line); font-size:17px; }
.oc-aihead span { font-size:12px; font-weight:400; color:var(--oc-muted); margin-left:8px; }
.oc-aix { border:0; background:none; font-size:26px; line-height:1; color:var(--oc-muted); cursor:pointer; }
.oc-aibody { padding:14px 18px; overflow-y:auto; }
.oc-ainote { background:var(--oc-pale); border-radius:6px; padding:8px 12px; margin-bottom:12px; font-size:13px; color:var(--oc-dark); }
.oc-aiprev { border:1px solid var(--oc-line); border-radius:6px; padding:14px 18px; font-family:Arial,Helvetica,sans-serif; font-size:14px; max-height:50vh; overflow-y:auto; background:#fff; color:#1e293b; }
.oc-aiprev img { max-width:100%; height:auto; }
.oc-aifoot { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; padding:10px 18px; border-top:1px solid var(--oc-line); }
.oc-airate { display:flex; align-items:center; gap:10px; font-size:13px; color:var(--oc-muted); }
.oc-aistars { font-size:28px; line-height:1; cursor:pointer; user-select:none; margin-top:-4px; }
.oc-aistar { color:#d6dbe3; padding:0 1px; }
.oc-aistar.on, .oc-aistar.hover { color:#facc15; text-shadow:0 1px 2px rgba(180,130,0,.45); }
.oc-aistar:hover { transform:scale(1.12); }
.oc-aiask { order:3; flex-basis:100%; display:none; font-size:12.5px; color:#92400e; background:#fef3c7; border:1px solid #fcd34d; border-radius:6px; padding:5px 10px; }
.oc-aiask.shake { animation:ocaishake .4s; }
@keyframes ocaishake { 0%,100% { transform:translateX(0); } 25% { transform:translateX(-6px); } 75% { transform:translateX(6px); } }
.oc-aibtns { display:flex; gap:8px; white-space:nowrap; }
.oc-aibtns button:disabled { opacity:.45; cursor:not-allowed; }

/* link-style buttons keep a readable text colour in every state (the old site-wide a:hover / a:focus rule turned link text white, which vanished on these light buttons) */
a.oc-btn, a.oc-btn:link, a.oc-btn:visited, a.oc-btn:hover, a.oc-btn:focus, a.oc-btn:active { color: #0f3d6e; text-decoration: none; }
.oc-btn:hover, .oc-btn:focus, .oc-btn:active { background: #eff6ff; border-color: #93c5fd; color: #0f3d6e; }
.oc-btn:focus-visible { outline: 3px solid #1d4ed8; outline-offset: 1px; }
a.oc-go, a.oc-go:link, a.oc-go:visited, a.oc-go:hover, a.oc-go:focus, a.oc-go:active { color: #fff; text-decoration: none; }
a.oc-hbtn, a.oc-hbtn:link, a.oc-hbtn:visited, a.oc-hbtn:hover, a.oc-hbtn:focus, a.oc-hbtn:active { color: #fff; text-decoration: none; }
a.oc-hbtn.primary, a.oc-hbtn.primary:hover, a.oc-hbtn.primary:focus, a.oc-hbtn.primary:active, a.oc-hbtn.primary:visited { color: #0f3d6e; }
a.oc-tab, a.oc-tab:link, a.oc-tab:visited, a.oc-tab:hover, a.oc-tab:focus, a.oc-tab:active { color: var(--oc-text); text-decoration: none; }
a.oc-tab.on, a.oc-tab.on:hover, a.oc-tab.on:focus, a.oc-tab.on:active, a.oc-tab.on:visited { color: #fff; }