/* more-ui.css - Frenzon member portal: the More page, redesigned.
   Hero with member identity, shortcut tiles, notification feed, Help Centre topics,
   support contact cards, install card, app info rows.
   Reads theme.css tokens and the .f-* topic colours of account-ui.css. Load after pay-ui.css. */

.more-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------------- HERO ---------------- */
.more-page .more-hero { position: relative; overflow: hidden; margin-bottom: 18px; padding: 18px 16px 16px; border-radius: 24px; color: #fff;
  background: radial-gradient(120% 140% at 100% 0%, #2b8a62 0%, #14432f 62%); box-shadow: var(--shadow-md); }
.more-hero-glow { position: absolute; right: -50px; top: -50px; width: 190px; height: 190px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(224,176,74,.34), transparent 68%); }
.more-hero-art { position: absolute; right: 4px; top: 4px; width: 118px; height: auto; pointer-events: none; opacity: .75; }
.more-page .more-h1 { position: relative; margin: 0 0 12px; color: #f6e3b0; font-size: .74rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.more-id { position: relative; display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.more-avatar { position: relative; flex: none; display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; overflow: hidden;
  background: linear-gradient(145deg, #e0b04a, #b9851a); color: #3b2a02; font-size: 1.3rem; font-weight: 800; box-shadow: 0 0 0 3px rgba(255,255,255,.28); }
.more-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.more-avatar.has-photo span { visibility: hidden; }
.more-id-txt { min-width: 0; }
.more-name { font-size: 1.22rem; font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; }
.more-number { margin-top: 3px; display: inline-block; padding: 3px 10px; border-radius: 99px; background: rgba(255,255,255,.16); color: #f6e3b0; font-size: .76rem; font-weight: 800; letter-spacing: .04em; }

.more-tiles { position: relative; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 560px) { .more-tiles { grid-template-columns: repeat(4, 1fr); } }
.more-tile { display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 10px 12px; border: 1px solid rgba(255,255,255,.2); border-radius: 18px;
  background: rgba(255,255,255,.12); backdrop-filter: blur(4px); color: #fff; font: inherit; text-align: left; cursor: pointer; transition: background .15s, transform .1s; }
.more-tile:hover { background: rgba(255,255,255,.2); }
.more-tile:active { transform: scale(.97); }
.more-tile-ic { position: relative; flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; background: #e0b04a; color: #3b2a02; }
.more-tile-ic svg, .more-ic svg, .more-out-ic svg, .more-row-ic svg, .more-search-ic svg, .notif-ic svg, .notif-empty-ic svg, .faq-cat-ic svg {
  width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.more-tile-t { font-size: .85rem; font-weight: 800; line-height: 1.15; }
.more-unread { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; display: grid; place-items: center; border-radius: 99px;
  background: #d92d20; color: #fff; font-size: .68rem; font-weight: 800; box-shadow: 0 0 0 2px #14432f; }
.more-unread.hidden { display: none; }

/* ---------------- sections ---------------- */
.more-label { margin: 18px 4px 8px; font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); }
.more-page .more-card, .more-page .more-signout, .more-page .more-exec, .more-page .more-install { margin-bottom: 14px; scroll-margin-top: 76px; border-radius: 20px; }
.more-head { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; }
.more-ic { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 16px; color: #fff; background: var(--fc, var(--primary-500));
  box-shadow: 0 6px 14px -6px var(--fc, var(--primary-500)); }
.more-head-txt { flex: 1; min-width: 0; }
.more-title { margin: 0; font-size: 1.04rem; font-weight: 800; line-height: 1.2; }
.more-sub { margin: 3px 0 0; font-size: .78rem; line-height: 1.4; color: var(--text-muted); }
.more-head .btn { flex: none; }

.more-exec { border: 0; }
.more-signout { padding: 12px; }
.more-signout .btn { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; font-weight: 800; }
.more-out-ic { display: inline-grid; place-items: center; }

/* ---------------- NOTIFICATIONS ---------------- */
.notification-list { display: grid; gap: 10px; }
.notification-item { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 13px 14px; border: 1px solid var(--border-color); border-radius: 18px; background: var(--surface); cursor: pointer;
  transition: transform .1s, box-shadow .15s, border-color .15s; }
.notification-item:hover { box-shadow: var(--shadow-sm); border-color: var(--border-dark); }
.notification-item:active { transform: scale(.99); }
.notification-item.unread { background: linear-gradient(180deg, #f5fcf8, #ebf7f0); border-color: #bfe3cf; }
.notification-item.unread::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 4px; border-radius: 0 4px 4px 0; background: var(--primary-500); }
.notif-ic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 14px; background: #eaeee9; color: #4a5a52; }
.notif-ic.k-pay { background: #e1f3e9; color: #1f6b4a; }
.notif-ic.k-loan { background: #e0eff7; color: #1f6f98; }
.notif-ic.k-fine { background: #fbe6e3; color: #b42318; }
.notif-ic.k-profit { background: #fbefd3; color: #a86f0b; }
.notif-ic.k-member { background: #ece6f8; color: #5b43a6; }
.notification-content { flex: 1; min-width: 0; display: grid; gap: 3px; }
.notification-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.notification-title { font-size: .93rem; font-weight: 800; line-height: 1.25; }
.notification-time { flex: none; font-size: .72rem; font-weight: 700; color: var(--text-muted); white-space: nowrap; }
.notification-message { font-size: .84rem; line-height: 1.5; color: var(--text-muted); white-space: pre-line; overflow-wrap: anywhere; }
#notificationsPreview .notification-message { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; }
.notif-new { justify-self: start; margin-top: 2px; padding: 2px 9px; border-radius: 99px; background: var(--primary-500); color: #fff; font-size: .64rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.notif-day { margin: 10px 2px 0; font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.notif-day:first-child { margin-top: 0; }
.notif-empty { display: grid; justify-items: center; gap: 4px; padding: 22px 12px; text-align: center; }
.notif-empty-ic { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: #e1f3e9; color: #1f6b4a; margin-bottom: 4px; }
.notif-empty-ic svg { width: 26px; height: 26px; }
.notif-empty-t { font-weight: 800; }
.notif-empty-s { max-width: 30ch; font-size: .8rem; line-height: 1.45; color: var(--text-muted); }
.notification-tools { display: flex; justify-content: flex-end; gap: 8px; margin: 8px 0; }

/* ---------------- HELP CENTRE ---------------- */
.more-search { position: relative; margin-bottom: 14px; }
.more-search-ic { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); display: grid; color: var(--text-muted); pointer-events: none; z-index: 1; }
.more-search .form-control { padding-left: 42px; min-height: 48px; border-radius: 16px; }
.faq-list { display: grid; gap: 10px; }
.faq-group { border: 1px solid var(--border-color); border-radius: 18px; background: var(--surface); overflow: hidden; }
.faq-group > summary { display: flex; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer; list-style: none; font-weight: 800; }
.faq-group > summary::-webkit-details-marker { display: none; }
.faq-group > summary::after { content: ""; flex: none; width: 9px; height: 9px; margin: -3px 4px 0 2px; border-right: 2px solid var(--text-muted); border-bottom: 2px solid var(--text-muted); transform: rotate(45deg); transition: transform .18s; }
.faq-group[open] > summary::after { content: ""; margin-top: 3px; transform: rotate(-135deg); }
.faq-group[open] > summary { border-bottom: 1px solid var(--border-color); }
.faq-group > summary > span.faq-cat-ic { flex: none; width: 38px; height: 38px; }
.faq-cat-ic { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 13px; color: #fff; background: var(--fc, var(--primary-500)); }
.faq-group > summary > .faq-cat-name { flex: 1; min-width: 0; font-size: .95rem; }
.faq-count { flex: none; padding: 2px 9px; border-radius: 99px; background: var(--bg-subtle); font-size: .7rem; font-weight: 700; color: var(--text-muted); }
.faq-group-body { display: grid; gap: 0; padding: 4px 6px 6px; }
.faq-group .faq-item { border: 0; border-radius: 12px; background: transparent; }
.faq-group .faq-item + .faq-item { border-top: 1px solid var(--border-color); border-radius: 0; }
.faq-group .faq-item > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 10px; font-size: .9rem; font-weight: 700; line-height: 1.35; cursor: pointer; list-style: none; }
.faq-group .faq-item > summary::after { float: none; content: "+"; flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--bg-subtle); color: var(--primary); font-weight: 800; }
.faq-group .faq-item[open] > summary::after { content: "\2212"; background: var(--primary-light); }
.faq-group .faq-item[open] > summary { color: var(--primary); }
.faq-answer { padding: 0 10px 14px; font-size: .88rem; line-height: 1.6; }
.faq-answer p { margin: 0 0 8px; }
.faq-contact-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; padding: 14px; border: 0; border-radius: 18px;
  background: linear-gradient(135deg, #fbf3dc, #f6e7bd); color: #4a3405; font-size: .84rem; font-weight: 700; }

/* ---------------- SUPPORT ---------------- */
#supportContacts .support-list { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 640px) { #supportContacts .support-list { grid-template-columns: repeat(2, 1fr); } }
.support-person { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--border-color); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-sm); }
.support-person-head { display: flex; align-items: center; gap: 12px; }
.support-avatar { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; color: #fff; font-weight: 800; background: linear-gradient(145deg, #2b8a62, #14432f); }
.support-person.role-treasurer .support-avatar { background: linear-gradient(145deg, #e0b04a, #a86f0b); color: #3b2a02; }
.support-person.role-loans_officer .support-avatar { background: linear-gradient(145deg, #3b97c4, #1f6f98); }
.support-person.role-secretary .support-avatar { background: linear-gradient(145deg, #8a73d1, #5b43a6); }
.support-person.role-chairperson .support-avatar { background: linear-gradient(145deg, #2b8a62, #14432f); }
.support-person.role-vice_chairperson .support-avatar { background: linear-gradient(145deg, #6b7280, #3f4752); }
.support-who { display: grid; gap: 2px; min-width: 0; }
.support-person-name { font-size: 1rem; line-height: 1.2; overflow-wrap: anywhere; }
.support-role { justify-self: start; padding: 2px 9px; border-radius: 99px; background: var(--info-light); color: #174a85; font-size: .68rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.support-help { font-size: .8rem; line-height: 1.45; color: var(--text-muted); }
.support-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.support-actions .btn { flex: 1 1 auto; justify-content: center; border-radius: 99px; min-height: 40px; font-weight: 800; }
.support-actions .btn-primary { background: #1f9d55; border-color: #1f9d55; color: #fff; flex-basis: 100%; }
#supportContacts .profile-grid { display: grid; gap: 8px; margin-top: 12px; }

/* ---------------- INSTALL + ABOUT ---------------- */
.more-install { display: flex; align-items: center; gap: 12px; }
.more-install.hidden { display: none; }
.more-install .more-ic { background: var(--f-savings, #1f6b4a); }
.more-rows { display: grid; gap: 0; }
.more-row { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 12px; padding: 12px 2px; }
.more-row + .more-row { border-top: 1px solid var(--border-color); }
.more-row-ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; background: var(--bg-subtle); color: var(--text-muted); }
.more-row-l { font-size: .8rem; font-weight: 700; color: var(--text-muted); }
.more-row-v { font-size: .86rem; font-weight: 800; text-align: right; overflow-wrap: anywhere; }
.more-row-v a { color: var(--primary); text-decoration: none; }

/* ---------------- NOTIFICATIONS POP-UP ---------------- */
#notificationsModal .modal-body { padding: 8px 16px 20px; }

/* office details as tidy rows */
#supportContacts .profile-grid { gap: 0; margin-top: 14px; border: 1px solid var(--border-color); border-radius: 16px; overflow: hidden; }
#supportContacts .profile-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; background: var(--surface); border-radius: 0; }
#supportContacts .profile-item + .profile-item { border-top: 1px solid var(--border-color); }
#supportContacts .profile-label { font-size: .78rem; font-weight: 700; color: var(--text-muted); }
#supportContacts .profile-value { font-size: .86rem; font-weight: 800; text-align: right; }
#supportContacts .profile-item .btn { border-radius: 99px; min-height: 36px; }