/* CSI St. Matthew's portal - mobile-first. Phones get a bottom tab bar, card lists and big tap targets;
   wider screens get the top navigation and real tables. */
:root {
  --navy: #1f3a5f; --navy-2: #2c4f7c; --gold: #c8963e; --cream: #f6f3ec; --paper: #ffffff;
  --ink: #1d2733; --muted: #667085; --line: #e6e1d6; --ok: #1f7a4d; --warn: #b7791f; --bad: #b42318;
  --radius: 14px; --shadow: 0 1px 2px rgba(31,58,95,.08), 0 6px 18px rgba(31,58,95,.07);
  --tab-h: 62px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--cream); color: var(--ink); line-height: 1.55; font-size: 16px;
  font-family: system-ui, -apple-system, "Segoe UI", "Noto Sans Tamil", "Latha", Roboto, sans-serif;
  padding-bottom: calc(var(--tab-h) + env(safe-area-inset-bottom)); }
a { color: var(--navy-2); }
h1, h2, h3 { line-height: 1.25; margin: 0 0 .5rem; color: var(--navy); }
h1 { font-size: 1.45rem; } h2 { font-size: 1.1rem; } h3 { font-size: 1rem; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 14px; }
.muted { color: var(--muted); } .small { font-size: .86rem; } .right { text-align: right; }
.inline { display: inline; margin: 0; }
.only-desktop { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---- header ---- */
.top { background: var(--navy); color: #fff; position: sticky; top: 0; z-index: 40; }
.top-in { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 14px; }
.brand { color: #fff; text-decoration: none; font-weight: 700; font-size: 1rem; line-height: 1.2; min-width: 0;
  display: flex; align-items: center; gap: 8px; }
.brand .cross { font-size: 1.3rem; color: var(--gold); }
.brand span.name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 52vw; }
.top-right { display: flex; gap: 8px; align-items: center; font-size: .9rem; }
.top-right a, .linkbtn { color: #fff; text-decoration: none; background: none; border: 0; cursor: pointer; font: inherit; padding: 0; }
.lang-switch { display: inline-flex; border: 1px solid rgba(255,255,255,.4); border-radius: 999px; overflow: hidden; }
.lang-switch a { padding: 4px 11px; font-size: .85rem; }
.lang-switch a.on { background: var(--gold); color: #1d2733; font-weight: 700; }
.userlink { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- bottom tab bar (phones only) ---- */
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; height: calc(var(--tab-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom); background: #fff; border-top: 1px solid var(--line);
  display: grid; grid-template-columns: repeat(5, 1fr); box-shadow: 0 -4px 16px rgba(31,58,95,.08); }
.tabbar a, .tabbar button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  color: var(--muted); text-decoration: none; font-size: .7rem; background: none; border: 0; font-family: inherit; cursor: pointer; padding: 4px 2px; min-width: 0; }
.tabbar .ic { font-size: 1.35rem; line-height: 1; }
.tabbar a.on, .tabbar button.on { color: var(--navy); font-weight: 700; }
.tabbar a.on .ic { transform: translateY(-1px); }
.tabbar .lbl { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- hamburger + side menu: slide-in drawer on phones/tablets, fixed left sidebar on desktop ---- */
:root { --top-h: 58px; --side-w: 264px; }
.burger { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 0 11px; margin-left: -8px;
  background: none; border: 0; cursor: pointer; flex: 0 0 auto; }
.burger span { display: block; height: 2.5px; border-radius: 2px; background: #fff; transition: transform .2s, opacity .2s; }
body.menu-open .burger span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
body.menu-open .burger span:nth-child(2) { opacity: 0; }
body.menu-open .burger span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
.top-in { padding: 7px 14px; min-height: var(--top-h); }
.top-in .brand { flex: 1 1 auto; }
.logo { display: inline-flex; align-items: center; }
.logo img { height: 40px; width: 40px; display: block; border-radius: 50%; box-shadow: 0 0 0 2px var(--gold); }
.login-logo { text-align: center; font-size: 2rem; color: var(--gold); margin-bottom: 6px; }
.login-logo img { height: 84px; width: auto; max-width: 100%; }
.guest-links a { margin-right: 14px; }
#side-back { position: fixed; inset: 0; z-index: 58; background: rgba(15,25,40,.5); display: none; }
body.menu-open #side-back { display: block; }
body.menu-open { overflow: hidden; }
.side { position: fixed; top: 0; bottom: 0; left: 0; z-index: 60; width: min(86vw, 320px); background: #fff; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 12px 12px calc(24px + env(safe-area-inset-bottom)); box-shadow: 8px 0 30px rgba(0,0,0,.25);
  transform: translateX(-102%); transition: transform .22s ease; visibility: hidden; }
body.menu-open .side { transform: none; visibility: visible; }
.side-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 6px 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px; color: var(--navy); }
.side-head .linkbtn { color: var(--muted); font-size: 1.2rem; width: 40px; height: 40px; }
.side .grp { padding: 6px 0; }
.side .grp + .grp { border-top: 1px solid #f0ece3; }
.side h3 { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 8px 8px 4px; }
.side .grp > a { display: flex; align-items: center; gap: 11px; padding: 0 12px; min-height: 46px; border-radius: 11px; color: var(--ink); text-decoration: none; font-size: .98rem; }
.side .grp > a .ic { width: 1.5rem; text-align: center; font-size: 1.15rem; }
.side .grp > a:hover { background: #f4efe4; }
.side .grp > a.on { background: var(--navy); color: #fff; font-weight: 600; }
.side .signout { margin-top: 14px; }

main.wrap { padding-top: 16px; padding-bottom: 28px; }
footer { border-top: 1px solid var(--line); background: #fff; padding: 16px 0; font-size: .86rem; color: var(--muted); }
footer .wrap { display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: space-between; }

/* ---- page heading + floating action button ---- */
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.page-head h1 { margin: 0; }
.page-head .sub { margin: 2px 0 0; color: var(--muted); font-size: .9rem; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; }
.fab { position: fixed; right: 16px; bottom: calc(var(--tab-h) + 16px + env(safe-area-inset-bottom)); z-index: 44; background: var(--gold); color: #1d2733;
  text-decoration: none; font-weight: 700; padding: 0 20px; height: 52px; border-radius: 999px; display: inline-flex; align-items: center; gap: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,.28); }
.fab .plus { font-size: 1.4rem; line-height: 1; }

/* ---- messages ---- */
.msg { padding: 11px 14px; border-radius: 12px; margin: 0 0 12px; background: #eef4ff; border: 1px solid #cfdcf5; word-break: break-word; }
.msg.success { background: #ecf8f1; border-color: #bfe5cf; } .msg.error { background: #fdeceb; border-color: #f2c4c0; }
.msg.warning { background: #fff7e6; border-color: #f1d9a6; }
.msg a { font-weight: 600; }

/* ---- cards + grid ---- */
.card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 15px 16px; box-shadow: var(--shadow); }
.card + .card { margin-top: 12px; }
a.card { display: block; text-decoration: none; color: inherit; }
.grid { display: grid; gap: 12px; }
.grid.two, .grid.three { grid-template-columns: 1fr; }
.hero { background: linear-gradient(135deg, var(--navy), var(--navy-2)); color: #fff; border-radius: 18px; padding: 26px 20px; }
.hero h1, .hero h2 { color: #fff; font-size: 1.5rem; }
.verse { border-left: 5px solid var(--gold); background: #fffaf0; }
.verse blockquote { margin: 0 0 6px; font-size: 1.1rem; font-family: Georgia, "Noto Serif Tamil", serif; }
.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.row.between { justify-content: space-between; }
.stack > * + * { margin-top: 12px; }
.section-title { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }

/* quick actions on the dashboard */
.quick { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 0 0 14px; }
.quick a { display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: 16px; background: #fff; border: 1px solid var(--line);
  box-shadow: var(--shadow); text-decoration: none; color: var(--ink); min-height: 88px; position: relative; }
.quick a .ic { font-size: 1.6rem; line-height: 1; }
.quick a b { font-size: .95rem; }
.quick a small { color: var(--muted); font-size: .78rem; line-height: 1.3; }
.quick a.primary { background: var(--navy); color: #fff; border-color: var(--navy); }
.quick a.primary small { color: #cfd9e8; }
.quick a .count { position: absolute; top: 10px; right: 10px; background: var(--bad); color: #fff; border-radius: 999px; font-size: .75rem; min-width: 22px; text-align: center; padding: 1px 6px; }

/* ---- buttons + forms (16px text stops iOS zooming; 46px tap targets) ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; background: var(--navy); color: #fff; border: 0; padding: 0 18px;
  min-height: 44px; border-radius: 11px; cursor: pointer; text-decoration: none; font: inherit; font-size: .95rem; font-weight: 600; gap: 6px; }
.btn:hover { background: var(--navy-2); }
.btn.gold { background: var(--gold); color: #1d2733; } .btn.light { background: #ece6d9; color: var(--ink); }
.btn.danger { background: var(--bad); } .btn.small { min-height: 36px; padding: 0 13px; font-size: .86rem; } .btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn.block { width: 100%; }
.input, select.input, textarea.input { width: 100%; padding: 11px 12px; min-height: 46px; border: 1px solid #cfc9bd; border-radius: 11px; font: inherit; font-size: 1rem; background: #fff; }
textarea.input { min-height: 110px; }
.input:focus { outline: 3px solid rgba(200,150,62,.35); border-color: var(--gold); }
.field { margin-bottom: 16px; } .field label { display: block; font-weight: 600; margin-bottom: 5px; font-size: .95rem; }
.field .help { color: var(--muted); font-size: .84rem; margin-top: 4px; }
.field .err { color: var(--bad); font-size: .88rem; margin-top: 4px; }
.field.check label { display: flex; gap: 10px; align-items: center; font-weight: 500; min-height: 40px; }
.field.check input { width: 22px; height: 22px; }
.form-narrow { max-width: 640px; }
.formbar { display: flex; gap: 10px; flex-wrap: wrap; }
.formbar .btn { flex: 1 1 140px; }

.filters { margin-bottom: 12px; }
.filters summary { list-style: none; cursor: pointer; }
.filters summary::-webkit-details-marker { display: none; }
.searchrow { display: flex; gap: 8px; }
.searchrow .input { flex: 1; }
.filter-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; padding: 12px; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.filter-grid label { display: block; font-size: .78rem; color: var(--muted); margin-bottom: 2px; }
.filter-grid .full { grid-column: 1 / -1; }
.chipbar { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 10px; margin: 0 -14px; padding-left: 14px; padding-right: 14px; scrollbar-width: none; }
.chipbar::-webkit-scrollbar { display: none; }
.chipbar a { flex: 0 0 auto; padding: 7px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--line); text-decoration: none; color: var(--ink); font-size: .9rem; }
.chipbar a.on { background: var(--navy); color: #fff; border-color: var(--navy); }

/* ---- lists: cards on phones, tables on desktop ---- */
.tablewrap { background: transparent; }
table { border-collapse: collapse; width: 100%; font-size: .93rem; }
th, td { padding: 10px 12px; text-align: left; vertical-align: top; }
td.num, th.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rt thead { display: none; }
.rt, .rt tbody { display: block; }
.rt tr { display: block; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 11px 14px; margin: 0 0 10px; box-shadow: var(--shadow); }
.rt td { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 3px 0; border: 0; text-align: right; }
.rt td::before { content: attr(data-label); color: var(--muted); font-size: .8rem; text-align: left; flex: 0 0 34%; }
.rt td.title { display: block; text-align: left; font-size: 1.02rem; padding-bottom: 4px; }
.rt td.title::before, .rt td.nolabel::before { display: none; }
.rt td.acts { display: flex; justify-content: flex-start; gap: 8px; padding-top: 8px; margin-top: 6px; border-top: 1px solid #f0ece3; text-align: left; }
.rt td.acts::before { display: none; }
.rt td:empty { display: none; }
.rt td.num { white-space: normal; }
.badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .78rem; background: #eee8dc; color: var(--ink); white-space: nowrap; }
.badge.ok { background: #dff3e8; color: var(--ok); } .badge.warn { background: #fdf0d3; color: var(--warn); }
.badge.bad { background: #fbe0dd; color: var(--bad); } .badge.navy { background: #dbe6f5; color: var(--navy); }
dl.detail { display: grid; grid-template-columns: 1fr; gap: 2px; margin: 0; }
dl.detail dt { color: var(--muted); font-size: .85rem; margin-top: 8px; } dl.detail dd { margin: 0; white-space: pre-wrap; word-break: break-word; }
.pager { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; align-items: center; justify-content: space-between; }

/* ---- finance ---- */
.stat .big { font-size: 1.5rem; font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; }
.bar { height: 10px; border-radius: 6px; background: #eee8dc; overflow: hidden; margin: 3px 0; }
.bar > span, .bar > i { display: block; height: 100%; background: var(--gold); border-radius: 6px; }
.bar.exp > span { background: #c76a60; }

/* ---- gallery ---- */
.albums h2 { margin-top: 20px; }
.photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.photos a { display: block; aspect-ratio: 1; overflow: hidden; border-radius: 10px; background: #ddd; position: relative; }
.photos img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photos .cap { display: none; }
.photo-big { max-width: 100%; border-radius: 12px; }

/* ---- chat widget (sits above the tab bar on phones) ---- */
#chat-fab { position: fixed; left: 14px; bottom: calc(var(--tab-h) + 16px + env(safe-area-inset-bottom)); z-index: 43; background: #fff; color: var(--navy); border: 1px solid var(--line);
  border-radius: 999px; height: 46px; padding: 0 16px; font-weight: 700; cursor: pointer; box-shadow: var(--shadow); font-size: .9rem; }
#chat-panel { position: fixed; left: 8px; right: 8px; bottom: calc(var(--tab-h) + 8px + env(safe-area-inset-bottom)); z-index: 70; display: none; max-height: 72vh;
  flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 8px 30px rgba(0,0,0,.25); overflow: hidden; }
#chat-panel.open { display: flex; }
#chat-panel header { background: var(--navy); color: #fff; padding: 12px 14px; font-weight: 600; display: flex; justify-content: space-between; }
#chat-log { padding: 12px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 8px; min-height: 160px; }
.bubble { padding: 9px 12px; border-radius: 14px; max-width: 88%; white-space: pre-wrap; word-break: break-word; font-size: .95rem; }
.bubble.me { align-self: flex-end; background: var(--navy); color: #fff; } .bubble.bot { align-self: flex-start; background: #f1ece2; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; } .chip { border: 1px solid var(--gold); background: #fffaf0; border-radius: 999px; padding: 6px 12px; font-size: .85rem; cursor: pointer; }
#chat-form { display: flex; gap: 6px; padding: 10px; border-top: 1px solid var(--line); }

/* ---- wide screens ---- */
@media (min-width: 900px) {
  :root { --tab-h: 0px; }
  body { padding-bottom: 0; }
  .only-mobile, .tabbar, #side-back { display: none !important; }
  body.guest .burger { display: none; }
  /* desktop: permanent grouped menu on the left, under the header */
  body.authed .side { top: var(--top-h); width: var(--side-w); transform: none; visibility: visible; box-shadow: none; border-right: 1px solid var(--line); z-index: 30; }
  body.authed .page { margin-left: var(--side-w); transition: margin-left .2s; }
  body.authed .side { transition: width .2s; }
  body.guest .side { display: none; }
  .side-head { display: none; }
  body.menu-open { overflow: auto; }
  .only-desktop { display: initial !important; }
  .btn.only-desktop, a.only-desktop { display: inline-flex !important; }
  .wrap { padding: 0 20px; }
  h1 { font-size: 1.7rem; } h2 { font-size: 1.2rem; }
  main.wrap { padding-top: 24px; padding-bottom: 60px; }
  .grid.two { grid-template-columns: repeat(2, 1fr); } .grid.three { grid-template-columns: repeat(3, 1fr); }
  .quick { grid-template-columns: repeat(4, 1fr); }
  dl.detail { grid-template-columns: minmax(130px, 220px) 1fr; gap: 8px 16px; } dl.detail dt { margin-top: 0; }
  .photos { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
  .photos .cap { display: block; position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(transparent, rgba(0,0,0,.65)); color: #fff; padding: 14px 8px 6px; font-size: .78rem; }
  .filter-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .chipbar { margin: 0; padding-left: 0; }
  /* tables are real tables again */
  .tablewrap { overflow-x: auto; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
  .rt { display: table; } .rt thead { display: table-header-group; } .rt tbody { display: table-row-group; }
  .rt tr { display: table-row; border: 0; border-radius: 0; padding: 0; margin: 0; box-shadow: none; background: transparent; }
  .rt td { display: table-cell; text-align: left; padding: 10px 12px; border-bottom: 1px solid #f0ece3; }
  .rt td::before { display: none; } .rt td.num { text-align: right; } .rt td.acts { border-top: 0; margin: 0; padding-top: 10px; white-space: nowrap; }
  .rt td:empty { display: table-cell; } .rt tr:last-child td { border-bottom: 0; }
  th { background: #f6f2ea; font-weight: 600; color: var(--navy); white-space: nowrap; border-bottom: 1px solid var(--line); }
  .btn { min-height: 40px; } .btn.small { min-height: 32px; }
  #chat-fab { left: auto; right: 18px; bottom: 18px; background: var(--gold); border: 0; color: #1d2733; }
  #chat-panel { left: auto; right: 18px; bottom: 74px; width: 380px; }
  .formbar .btn { flex: 0 0 auto; }
}
@media print { .top, .side, #side-back, .tabbar, footer, #chat-fab, .fab, .no-print { display: none !important; } body { background: #fff; padding: 0; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* optional fields folded away on the member submit form */
.more-opts{border:1px dashed var(--line);border-radius:12px;padding:10px 12px}
.more-opts>summary{cursor:pointer;font-weight:600;color:var(--navy-2);min-height:32px;display:flex;align-items:center}

/* tablets: hamburger drawer, no bottom bar, page keeps its comfortable width */
@media (min-width: 600px) and (max-width: 899px) {
  :root { --tab-h: 0px; }
  body { padding-bottom: 0; }
  .tabbar { display: none; }
  .wrap { padding: 0 22px; }
  .grid.two { grid-template-columns: repeat(2, 1fr); }
  .quick { grid-template-columns: repeat(4, 1fr); }
  #chat-fab { left: auto; right: 16px; bottom: 16px; }
  .fab { bottom: 84px; }
  #chat-panel { left: auto; right: 16px; bottom: 70px; width: 380px; }
}

/* collapsible side menu (desktop): rail with icons only */
@media (min-width: 900px) {
  .side-collapsed { --side-w: 68px; }
  .side-collapsed body.authed .side { overflow-x: hidden; padding-left: 8px; padding-right: 8px; }
  .side-collapsed .side .lbl, .side-collapsed .side h3 { display: none; }
  .side-collapsed .side .grp > a { justify-content: center; padding: 0; }
  .side-collapsed .side .grp > a .ic { width: auto; font-size: 1.3rem; }
  .side-collapsed .side .grp { padding: 4px 0; }
  body.menu-open { overflow: auto; }
  .bell-wrap { position: relative; }
  #bell-panel { right: 0; left: auto; width: 380px; }
}

/* notification bell */
.bell-wrap { display: inline-flex; }
#bell-btn { position: relative; background: none; border: 0; color: #fff; cursor: pointer; width: 42px; height: 42px; font-size: 1.3rem; border-radius: 999px; }
#bell-btn:hover { background: rgba(255,255,255,.12); }
.bell-count { position: absolute; top: 3px; right: 1px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background: #d92d20; color: #fff;
  font-size: .7rem; font-weight: 700; line-height: 19px; text-align: center; border: 2px solid var(--navy); box-sizing: content-box; }
#bell-panel { display: none; position: fixed; top: calc(var(--top-h) + 6px); left: 10px; right: 10px; z-index: 80; background: #fff; color: var(--ink); border: 1px solid var(--line);
  border-radius: 16px; box-shadow: 0 14px 40px rgba(0,0,0,.3); overflow: hidden; }
@media (min-width: 900px) { #bell-panel { position: absolute; top: 48px; } }
#bell-panel.open { display: block; }
.bp-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.bp-head .linkbtn { color: var(--navy-2); font-size: .85rem; }
.bp-list { max-height: min(60vh, 460px); overflow-y: auto; }
.bp-all { display: block; text-align: center; padding: 12px; border-top: 1px solid var(--line); font-weight: 600; text-decoration: none; }
.notif { display: flex; gap: 12px; padding: 12px 14px; text-decoration: none; color: var(--ink); border-bottom: 1px solid #f3efe6; align-items: flex-start; }
.notif:hover { background: #faf7f0; }
.notif.unread { background: #eef4ff; }
.notif .ic { font-size: 1.3rem; line-height: 1.3; }
.notif .tx { display: flex; flex-direction: column; min-width: 0; }
.notif .t { color: var(--ink); overflow-wrap: anywhere; font-size: .93rem; }
.notif .when { color: var(--muted); font-size: .78rem; margin-top: 2px; }
.notif-list .notif { border-radius: 10px; }

/* file preview pop-up */
#pv[hidden] { display: none; }
#pv { position: fixed; inset: 0; z-index: 90; background: rgba(15,25,40,.72); display: flex; align-items: center; justify-content: center; padding: 10px; }
.pv-box { background: #fff; border-radius: 16px; width: min(1000px, 100%); height: min(92vh, 100%); display: flex; flex-direction: column; overflow: hidden; }
.pv-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.pv-bar strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.pv-actions { display: flex; flex-wrap: wrap; gap: 6px; }
#pv-body { flex: 1; min-height: 0; background: #e9e6df; display: flex; align-items: center; justify-content: center; overflow: auto; }
#pv-body iframe { width: 100%; height: 100%; border: 0; background: #fff; }
#pv-body img { max-width: 100%; max-height: 100%; object-fit: contain; }
.filebtns { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.top-right #bell-panel a, .top-right #bell-panel a.notif { color: var(--ink); }
.top-right #bell-panel .bp-all { color: var(--navy-2); }
@media (min-width: 900px) { #bell-panel { position: absolute; top: 48px; left: auto; right: 0; width: 380px; } }

/* =====================================================================================================
   PWA + mobile polish (Update 5): installable app feel, safe areas, calmer typography, faster taps
   ===================================================================================================== */
html { -webkit-tap-highlight-color: transparent; }
a, button, .btn, summary, label { touch-action: manipulation; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2 { letter-spacing: -.01em; }
h1 { font-size: 1.55rem; }
img { max-width: 100%; }

/* press feedback so taps feel instant */
.btn, a.card, .quick a, .tabbar a, .tabbar button, .side .grp > a { transition: transform .12s ease, background-color .15s ease, box-shadow .15s ease; }
.btn:active, a.card:active, .quick a:active { transform: scale(.975); }
.tabbar a:active, .tabbar button:active { transform: scale(.93); }

/* header: notch / status-bar safe area (needed when launched from the home screen) */
.top { padding-top: env(safe-area-inset-top, 0px); box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 4px 18px rgba(15,25,40,.18); }
.side { padding-top: calc(12px + env(safe-area-inset-top, 0px)); }
.wrap { padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); }

/* classier surfaces */
.card { border-radius: 18px; border-color: #ece7dc; box-shadow: 0 1px 2px rgba(31,58,95,.05), 0 8px 24px rgba(31,58,95,.06); }
.hero { background: radial-gradient(120% 140% at 0% 0%, #3a62924d 0%, transparent 60%), linear-gradient(135deg, #1d3558, #2c4f7c); box-shadow: 0 10px 30px rgba(31,58,95,.25); }
.section-title h2, .card > h2 { position: relative; }
.badge { border-radius: 999px; }

/* install-the-app banner (phones) */
#install-bar { position: fixed; left: 10px; right: 10px; z-index: 46; display: flex; align-items: center; gap: 10px;
  bottom: calc(var(--tab-h) + 10px + env(safe-area-inset-bottom, 0px)); padding: 10px 10px 10px 12px;
  background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 10px 34px rgba(15,25,40,.28); }
#install-bar[hidden] { display: none; }
#install-bar img { width: 44px; height: 44px; border-radius: 12px; flex: 0 0 auto; }
#install-bar .txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
#install-bar .txt strong { font-size: .92rem; color: var(--navy); }
#install-bar .txt span { font-size: .78rem; color: var(--muted); }
#install-bar .x { background: none; border: 0; font-size: 1.1rem; color: var(--muted); width: 34px; height: 34px; cursor: pointer; flex: 0 0 auto; }
body.has-install #chat-fab { bottom: calc(var(--tab-h) + 86px + env(safe-area-inset-bottom, 0px)); }
body.has-install .fab { bottom: calc(var(--tab-h) + 86px + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 900px) { #install-bar { display: none !important; } }

/* install guide page */
.install-page .hero { padding: 28px 20px; }
.install-page .hero p { color: #dbe5f3; max-width: 520px; margin: 6px auto 14px; }
.app-icon { border-radius: 22px; box-shadow: 0 8px 24px rgba(0,0,0,.3); margin-bottom: 10px; }
ol.steps { list-style: none; counter-reset: s; margin: 8px 0 0; padding: 0; }
ol.steps li { counter-increment: s; position: relative; padding: 4px 0 12px 42px; min-height: 34px; }
ol.steps li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--navy); color: #fff; font-weight: 700; display: grid; place-items: center; font-size: .9rem; }
ul.ticks { list-style: none; margin: 8px 0 0; padding: 0; }
ul.ticks li { position: relative; padding: 3px 0 8px 28px; }
ul.ticks li::before { content: "✓"; position: absolute; left: 0; top: 2px; color: var(--ok); font-weight: 700; }

/* app mode (launched from the home screen): no browser chrome, so tidy the page */
html.standalone .hide-standalone { display: none !important; }
html.standalone footer { display: none; }
html.standalone body { overscroll-behavior-y: none; }

@media (max-width: 599px) {
  .brand span.name { max-width: calc(100vw - 232px); font-size: .95rem; letter-spacing: -.005em; }
  #bell-panel { top: calc(var(--top-h) + env(safe-area-inset-top, 0px) + 6px); }
  /* bottom tab bar: frosted, with a pill under the active item */
  .tabbar { background: rgba(255,255,255,.94); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); }
  .tabbar a, .tabbar button { font-size: .72rem; position: relative; }
  .tabbar a.on::before { content: ""; position: absolute; top: 5px; width: 52px; height: 30px; border-radius: 999px; background: #e8eef7; z-index: -1; }
  .tabbar a.on .ic { transform: none; }
  /* chat becomes a compact round button so it never covers content */
  #chat-fab { font-size: 0; width: 48px; height: 48px; padding: 0; display: grid; place-items: center; }
  #chat-fab::before { content: "💬"; font-size: 1.35rem; }
  .quick { gap: 12px; }
  .quick a { border-radius: 18px; min-height: 96px; }
  .quick a.primary { background: linear-gradient(145deg, #2c4f7c, #1d3558); }
  main.wrap { padding-top: 14px; }
  .page-head h1 { font-size: 1.45rem; }
}

/* ---- giving (member ledger, approvals, queries) ---- */
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 12px; }
.stat { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.stat span { font-size: .78rem; color: var(--muted); } .stat b { font-size: 1.25rem; color: var(--navy); overflow-wrap: anywhere; } .stat small { color: var(--muted); font-size: .78rem; }
.stat.main { grid-column: 1 / -1; background: linear-gradient(145deg, #2c4f7c, #1d3558); border: 0; color: #fff; }
.stat.main span, .stat.main small { color: #cfd9e8; } .stat.main b { color: #fff; font-size: 1.9rem; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 4px; }
.pills a { padding: 7px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: .88rem; }
.pills a.on { background: var(--navy); color: #fff; border-color: var(--navy); font-weight: 600; }
.badge.ok { background: #e3f5ea; color: var(--ok); }
.nowrap { white-space: nowrap; }
.appr { display: flex; flex-wrap: wrap; gap: 10px 16px; justify-content: space-between; align-items: center; padding: 12px 0; border-top: 1px solid #f0ece3; }
.appr:first-of-type { border-top: 0; }
.decide { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.diff del { color: var(--bad); } .diff ins { color: var(--ok); text-decoration: none; font-weight: 600; }
.qrow { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 12px 4px; border-top: 1px solid #f0ece3; color: inherit; text-decoration: none; }
.qrow:first-child { border-top: 0; }
.thread { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.msgbox { max-width: 92%; padding: 10px 13px; border-radius: 14px; background: #f4efe4; word-break: break-word; }
.msgbox.mine { align-self: flex-start; } .msgbox.staff { align-self: flex-end; background: #e8eef7; }
.msgbox .who { font-size: .75rem; color: var(--muted); margin-bottom: 3px; }
@media (min-width: 700px) { .stats { grid-template-columns: 2fr repeat(4, 1fr); } .stat.main { grid-column: auto; } }
@media print { .stats .stat { box-shadow: none; } .stat.main { background: #fff !important; color: #000; border: 1px solid #999; } .stat.main b, .stat.main span, .stat.main small { color: #000; } .actions, .pills, .btn { display: none !important; } }

/* ---- church emblems, footer, About page ---- */
.emblems { display: inline-flex; align-items: center; justify-content: center; gap: 14px; }
.emblems img { width: auto; max-width: 30vw; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0,0,0,.18)); }
.login-logo { display: flex; justify-content: center; margin-bottom: 8px; }
.hero-emblems { display: flex; justify-content: center; margin-bottom: 6px; }
.hero-emblems .emblems { background: rgba(255,255,255,.96); border-radius: 18px; padding: 8px 16px; box-shadow: 0 6px 20px rgba(0,0,0,.2); }
footer .foot { display: flex; flex-direction: column; gap: 14px; }
.foot-id { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.foot-id .emblems { gap: 8px; } .foot-id .emblems img { max-width: 44px; filter: none; }
.foot-links { display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: space-between; width: 100%; border-top: 1px solid var(--line); padding-top: 10px; }
.about-hero { text-align: center; }
.about-hero h1 { font-size: 1.6rem; margin-top: 8px; }
.about-hero .tagline { font-family: Georgia, "Noto Serif Tamil", serif; font-style: italic; font-size: 1.15rem; color: #f0d9a4; margin: 4px 0; }
.about-hero .dio { color: #cfd9e8; margin: 0 0 12px; font-size: .92rem; }
.about-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 480px; margin: 0 auto; }
.about-stats div { background: rgba(255,255,255,.1); border-radius: 14px; padding: 10px 4px; display: flex; flex-direction: column; }
.about-stats b { font-size: 1.35rem; color: #fff; } .about-stats span { font-size: .76rem; color: #cfd9e8; }
.kv { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--line); }
.kv:last-of-type { border-bottom: 0; }
.people { display: grid; gap: 10px; }
.person { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: #fffdf8; }
.person > div:nth-child(2) { flex: 1 1 160px; min-width: 0; }
.avatar { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(145deg, #2c4f7c, #1d3558); color: #f0d9a4; display: grid; place-items: center; font-weight: 700; font-size: 1.1rem; flex: 0 0 auto; }
.branch { padding: 8px 0; border-bottom: 1px dashed var(--line); } .branch:last-child { border-bottom: 0; }
.chips-list { display: flex; flex-wrap: wrap; gap: 8px; }
@media (min-width: 700px) { .people { grid-template-columns: repeat(3, 1fr); } .person { flex-direction: column; align-items: flex-start; } footer .foot { flex-direction: column; } }
@media print { .emblems img { filter: none; } }

/* ---- banner + round logo ---- */
.banner { display: block; margin: 0 0 6px; border-radius: 16px; overflow: hidden; box-shadow: 0 6px 20px rgba(14,32,64,.18); background: #cfe3f5; }
.banner img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 1; object-fit: cover; }
@media (max-width: 700px) { .banner img { aspect-ratio: 2.2 / 1; } .banner { border-radius: 12px; } }
.round-logo { width: 84px; height: 84px; border-radius: 50%; box-shadow: 0 0 0 3px var(--gold), 0 4px 12px rgba(0,0,0,.2); }
.foot-id .emblems { gap: 10px; } .foot-id .emblems img { max-width: 56px; }
.hero h1.sr { position: absolute !important; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip: rect(0 0 0 0); }
.hero.home-hero { margin-top: 12px; padding-top: 22px; } .hero.home-hero::before { display: none; }

/* ---- speed & feel: 4-in-a-row buttons, tags, page cross-fade, progress bar, update toast ---- */
.cta4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 4px; }
.cta4 .btn { padding: 0 4px; min-height: 44px; font-size: .84rem; line-height: 1.15; text-align: center; white-space: normal; }
@media (min-width: 700px) { .cta4 { grid-template-columns: repeat(4, max-content); } .cta4 .btn { padding: 0 22px; font-size: .95rem; } }
a.badge.tag { text-decoration: none; cursor: pointer; }
a.badge.tag:active { transform: scale(.96); }
a, button, .btn, .badge, summary { touch-action: manipulation; -webkit-tap-highlight-color: rgba(31,58,95,.12); }
#nav-bar { position: fixed; left: 0; top: 0; height: 3px; width: 0; background: var(--gold); z-index: 9999; opacity: 0; pointer-events: none; transition: width .25s ease-out, opacity .2s; }
#nav-bar.on { opacity: 1; }
#upd { position: fixed; left: 12px; right: 12px; bottom: calc(var(--tab-h, 0px) + 14px + env(safe-area-inset-bottom)); z-index: 9998; background: var(--navy); color: #fff; border-radius: 14px;
  padding: 10px 12px 10px 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.28); max-width: 520px; margin: 0 auto; }
#upd[hidden] { display: none; } #upd .btn { min-height: 38px; padding: 0 16px; }
#ptr { position: fixed; top: calc(var(--top-h, 56px) + env(safe-area-inset-top, 0px) + 6px); left: 50%; transform: translate(-50%, -200px); opacity: 0; visibility: hidden; width: 38px; height: 38px; border-radius: 50%; background: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.25);
  display: flex; align-items: center; justify-content: center; font-size: 1.2rem; z-index: 9997; transition: transform .15s; pointer-events: none; }
#ptr.spin span { display: inline-block; animation: ptrspin .7s linear infinite; } @keyframes ptrspin { to { transform: rotate(360deg); } }
.hero.home-hero { padding-top: 16px; padding-bottom: 20px; }

#ptr.show { opacity: 1; visibility: visible; }
/* keep the bottom tab bar glued to the screen on iPhones (no rubber-band drift) */
html, body { overscroll-behavior-y: none; }
.tabbar { transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); will-change: transform; }

/* announcements: flyer + rich text */
.ann { background: var(--paper); border-radius: 16px; overflow: hidden; box-shadow: 0 2px 14px rgba(31,58,95,.10); margin-bottom: 14px; }
.ann-flyer { background: #0f1b2d; text-align: center; }
.ann-flyer img { display: block; width: 100%; max-height: 80vh; object-fit: contain; margin: 0 auto; }
.ann-body { padding: 16px 18px 18px; }
.ann-body h1 { margin: 8px 0 10px; line-height: 1.25; }
.ann-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-block; padding: 3px 10px; border-radius: 999px; background: #1f3a5f; color: #fff; font-size: .78rem; font-weight: 600; }
.chip.soft { background: #eef1f6; color: #1f3a5f; }
.chip.gold { background: #c9a24b; color: #1b2433; }
.rich { font-size: 1.02rem; line-height: 1.65; overflow-wrap: anywhere; }
.rich h2 { font-size: 1.3rem; margin: 1.1em 0 .35em; color: #1f3a5f; }
.rich h3 { font-size: 1.1rem; margin: 1em 0 .3em; color: #8a6a1f; }
.rich p, .rich ul, .rich ol { margin: .5em 0; }
.rich ul, .rich ol { padding-left: 1.4em; }
.rich blockquote { margin: .8em 0; padding: 8px 14px; border-left: 4px solid #c9a24b; background: #faf6ea; border-radius: 0 10px 10px 0; }
.rich a { color: #1f5fbf; text-decoration: underline; }
.rte { border: 1px solid var(--line, #cfd6e2); border-radius: 12px; overflow: hidden; background: #fff; }
.rte-bar { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px; background: #f3f5f9; border-bottom: 1px solid var(--line, #cfd6e2); position: sticky; top: 0; z-index: 2; }
.rte-bar button { min-width: 36px; height: 36px; border: 1px solid #d5dbe6; background: #fff; border-radius: 8px; font-size: 1rem; cursor: pointer; }
.rte-bar button:active { background: #e3e9f3; }
.rte-bar .sep { width: 6px; }
.rte-area { min-height: 180px; padding: 12px; border: 0 !important; border-radius: 0 !important; outline: none; line-height: 1.6; background: #fff; }
.rte-area:empty:before { content: attr(data-ph); color: #8a93a6; }
.rte-area h2 { font-size: 1.25rem; } .rte-area h3 { font-size: 1.08rem; }
.rte-area blockquote { margin: .6em 0; padding: 6px 12px; border-left: 4px solid #c9a24b; background: #faf6ea; }
@media (max-width: 600px) { .ann-body { padding: 14px; } .rich { font-size: 1rem; } }
@media print { .ann { box-shadow: none; } .ann-flyer img { max-height: none; } }

/* notification panel: .top-right a{padding:0} was stripping the row padding */
.top-right #bell-panel a.notif { padding: 12px 14px; display: flex; gap: 12px; align-items: flex-start; }
.top-right #bell-panel .bp-all { display: block; padding: 12px; text-align: center; }
.notif .ic { flex: 0 0 28px; width: 28px; text-align: center; }
.notif .tx { flex: 1; min-width: 0; gap: 1px; }
.notif .tx strong { font-size: .95rem; }
.bp-head { padding: 12px 16px; }

/* announcements: dashboard tiles and the list feed */
.ann-tile { display: grid; grid-template-columns: 84px 1fr; gap: 12px; align-items: start; padding: 12px; margin: 0 0 10px; border: 1px solid var(--line); border-radius: 14px; background: #fff; text-decoration: none !important; color: var(--ink) !important; }
.ann-tile:hover { border-color: var(--gold); box-shadow: 0 4px 14px rgba(31,58,95,.10); }
.ann-tile.pinned { background: #fffaf0; border-color: #e6cf99; }
.ann-tile .th { width: 84px; height: 84px; border-radius: 10px; overflow: hidden; background: linear-gradient(135deg, #1f3a5f, #2c4f7c); display: flex; align-items: center; justify-content: center; font-size: 2rem; color: #fff; }
.ann-tile .th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ann-tile .bd { min-width: 0; }
.ann-tile .tt { display: block; font-weight: 700; font-size: 1.02rem; line-height: 1.3; color: var(--navy); margin-bottom: 4px; overflow-wrap: anywhere; }
.ann-tile .mt { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.ann-tile .ex { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .9rem; color: #55607a; line-height: 1.45; }
.ann-tile .chip { font-size: .72rem; padding: 2px 8px; }
.ann-feed { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; margin-top: 12px; }
.ann-card { display: flex; flex-direction: column; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow); text-decoration: none !important; color: var(--ink) !important; border: 1px solid transparent; }
.ann-card:hover { border-color: var(--gold); }
.ann-card.pinned { border-color: #e6cf99; }
.ann-card .im { aspect-ratio: 16 / 9; background: linear-gradient(135deg, #1f3a5f, #2c4f7c); display: flex; align-items: center; justify-content: center; font-size: 2.6rem; color: #fff; overflow: hidden; }
.ann-card .im img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ann-card .bd { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.ann-card .tt { font-weight: 700; font-size: 1.08rem; line-height: 1.3; color: var(--navy); }
.ann-card .ex { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: .92rem; color: #55607a; }
.ann-card .mt { display: flex; flex-wrap: wrap; gap: 6px; }
.ann-card .ft { margin-top: auto; padding-top: 6px; font-size: .85rem; color: var(--navy-2); font-weight: 600; }
@media (max-width: 420px) { .ann-tile { grid-template-columns: 68px 1fr; } .ann-tile .th { width: 68px; height: 68px; } .ann-feed { grid-template-columns: 1fr; } }