:root {
  --app-bg: #f6f8fb;
  --app-ink: #18212f;
  --app-muted: #667085;
  --app-primary: #6f58b8;
  --app-primary-dark: #563f97;
  --app-accent: #f45d7d;
  --app-border: #e5e9f1;
  --app-soft: #f0ecfa;
  --app-sidebar-width: 220px;
  --app-topbar-height: 58px;
  --app-shadow: 0 6px 16px rgba(24, 33, 47, .06);
  --app-shadow-lg: 0 12px 32px rgba(24, 33, 47, .08);
}

* { scrollbar-width: thin; scrollbar-color: #c9cfdb transparent; }
body { min-height: 100vh; color: var(--app-ink); background: var(--app-bg); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
[x-cloak] { display: none !important; }
a { color: var(--app-primary); }
a:hover { color: var(--app-primary-dark); }
.text-muted { color: var(--app-muted) !important; }
.btn { min-height: 38px; border-radius: 6px; font-weight: 650; transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease; }
.btn:hover:not(:disabled) { transform: translateY(-1px); }
.btn-sm { min-height: 32px; }
.btn-primary, .btn-success { border-color: var(--app-primary); background: var(--app-primary); }
.btn-primary:hover, .btn-primary:focus, .btn-success:hover, .btn-success:focus { border-color: var(--app-primary-dark); background: var(--app-primary-dark); }
.btn-outline-primary { color: var(--app-primary); border-color: var(--app-primary); }
.btn-outline-primary:hover { border-color: var(--app-primary); background: var(--app-primary); }
.form-label { margin-bottom: .4rem; color: #344054; font-size: .84rem; font-weight: 700; }
.form-control, .form-select, .input-group-text { min-height: 40px; border-color: #dfe4ec; border-radius: 6px; background-color: #fff; }
.form-control:focus, .form-select:focus { border-color: #9b8bd2; box-shadow: 0 0 0 .2rem rgba(111, 88, 184, .12); }
.card, .modal-content { border: 1px solid var(--app-border); border-radius: 8px; box-shadow: var(--app-shadow); }
.modal-content { overflow: hidden; }
.modal-header, .modal-footer { border-color: var(--app-border); }
.modal-header.bg-success, .modal-header.bg-danger { background: #292f39 !important; }
.alert { border-radius: 7px; border-width: 1px; }
.badge { font-weight: 700; }
.table { color: var(--app-ink); font-size: .84rem; }
.table > :not(caption) > * > * { padding: .72rem .78rem; border-bottom-color: #edf0f5; }
.table thead th { color: var(--app-muted); font-size: .72rem; font-weight: 800; letter-spacing: .035em; text-transform: uppercase; background: #fafbfc; }

.app-topbar { position: fixed; inset: 0 0 auto 0; z-index: 1035; height: var(--app-topbar-height); display: grid; grid-template-columns: var(--app-sidebar-width) minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 0 22px; border-bottom: 1px solid var(--app-border); background: rgba(255, 255, 255, .96); box-shadow: 0 2px 10px rgba(24, 33, 47, .04); backdrop-filter: blur(10px); }
.app-brand { min-width: 0; display: flex; align-items: center; gap: 10px; color: var(--app-ink); text-decoration: none; }
.app-brand-mark { width: 28px; height: 28px; flex: 0 0 28px; display: grid; place-items: center; overflow: hidden; border-radius: 50%; color: #fff; font-size: .76rem; font-weight: 800; background: conic-gradient(#8067e6, #ff6b9d, #ffbd4a, #36c5f0, #8067e6); }
.app-brand-mark img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.app-brand-title { overflow: hidden; font-size: .96rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.app-topbar-context { min-width: 0; color: var(--app-muted); font-size: .8rem; }
.app-topbar-actions { display: flex; align-items: center; gap: 10px; }
.app-role-chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border: 1px solid var(--app-border); border-radius: 7px; color: #344054; background: #fff; font-size: .76rem; font-weight: 750; text-transform: capitalize; }
.app-role-chip::before { width: 7px; height: 7px; border-radius: 50%; background: #28a87d; content: ""; }
.admin-workspace { padding: 0 !important; }
.admin-workspace > .row { margin: 0; }
.admin-sidebar { position: fixed; top: var(--app-topbar-height); bottom: 0; left: 0; z-index: 1025; width: var(--app-sidebar-width) !important; max-width: var(--app-sidebar-width) !important; min-height: calc(100vh - var(--app-topbar-height)); display: flex !important; flex-direction: column; padding: 18px 14px !important; overflow-y: auto; border-right: 1px solid var(--app-border); color: var(--app-ink) !important; background: #fff !important; box-shadow: 4px 0 16px rgba(24, 33, 47, .035); }
.admin-sidebar .sidebar-heading { margin: 2px 8px 10px; color: #98a2b3; font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.admin-sidebar .nav { gap: 4px !important; }
.admin-sidebar .nav-link { min-height: 40px; display: flex; align-items: center; justify-content: space-between; padding: .58rem .72rem; border: 0; border-radius: 6px; color: #475467 !important; font-size: .8rem; font-weight: 700; background: transparent; transition: color .15s ease, background .15s ease, transform .15s ease; }
.admin-sidebar .nav-link:hover { color: var(--app-primary) !important; background: #f8f7fc; transform: translateX(2px); }
.admin-sidebar .nav-link.active { color: var(--app-primary) !important; background: var(--app-soft) !important; box-shadow: inset 3px 0 0 var(--app-primary); }
.sidebar-nav-label { min-width: 0; display: flex; align-items: center; gap: 10px; }
.sidebar-nav-label i { width: 18px; flex: 0 0 18px; color: #7c8799; text-align: center; }
.admin-sidebar .nav-link:hover .sidebar-nav-label i,
.admin-sidebar .nav-link.active .sidebar-nav-label i { color: var(--app-primary); }
.sidebar-nav-label span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-sidebar .btn-outline-light { color: #475467; border-color: var(--app-border); }
.admin-sidebar .btn-outline-light:hover { color: var(--app-primary); border-color: #cfc5ee; background: var(--app-soft); }
.admin-main { flex: 0 0 calc(100% - var(--app-sidebar-width)) !important; width: calc(100% - var(--app-sidebar-width)) !important; max-width: calc(100% - var(--app-sidebar-width)) !important; min-width: 0; min-height: 100vh; margin-left: var(--app-sidebar-width); padding: calc(var(--app-topbar-height) + 24px) 28px 32px !important; }
.admin-page-heading { margin-bottom: 18px !important; }
.admin-page-heading h2 { margin: 0 0 4px; font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; }
.admin-page-heading p { font-size: .82rem; }
.admin-heading-title-wrap { min-width: 0; }
.admin-heading-title-line { display: flex; align-items: center; gap: 10px; }
.admin-heading-icon-button { width: 40px; height: 40px; display: grid; place-items: center; flex: 0 0 40px; padding: 0; border: 1px solid #d9d1ef; border-radius: 9px; color: var(--app-primary); background: var(--app-soft); font-size: 1rem; transition: transform .15s ease, background .15s ease; }
.admin-heading-icon-button:hover { transform: translateY(-1px); background: #e7e0f6; }
.admin-main .card { box-shadow: var(--app-shadow); }
.admin-main .card-header { border-bottom-color: var(--app-border); background: #fff; }
.admin-main h4, .admin-main h5 { font-weight: 750; }
.admin-main .nav-pills { gap: 4px !important; padding: 4px; border: 1px solid var(--app-border); border-radius: 8px; background: #fff; }
.admin-main .nav-pills .nav-link { border-radius: 6px; color: #667085; font-size: .8rem; font-weight: 750; }
.admin-main .nav-pills .nav-link:hover { color: var(--app-primary); background: #f8f7fc; }
.admin-main .nav-pills .nav-link.active { color: var(--app-primary); background: var(--app-soft); }
.admin-main .text-bg-primary { background-color: var(--app-primary) !important; }
.admin-main .family-tree-label:hover { color: var(--app-primary) !important; background: var(--app-soft) !important; }
.admin-main .family-tree-label.is-selected { color: #fff !important; background: var(--app-primary) !important; }

/* Messages workspace, aligned with ARCH Projects Templates */
.family-chat-shell {
  min-height: calc(100vh - 150px);
  display: grid;
  grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid #dfe5ef;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 8px 18px rgba(24, 33, 47, .07);
}
.family-chat-contacts { min-width: 0; border-right: 1px solid #e4e8f0; background: #f8fafc; }
.family-chat-panel-head,
.family-chat-thread-head { min-height: 76px; display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 16px 18px; border-bottom: 1px solid #e4e8f0; background: #fff; }
.family-chat-panel-head h2,
.family-chat-thread-head h2 { margin: 0; color: #263041; font-size: 1.05rem; font-weight: 800; }
.family-chat-panel-head small,
.family-chat-thread-head small { color: var(--app-muted); }
.family-chat-head-actions { display: flex; align-items: center; gap: 8px; }
.family-chat-icon-button { width: 36px; height: 36px; min-height: 36px; display: inline-grid; place-items: center; padding: 0; border: 0; border-radius: 50%; color: var(--app-primary); background: var(--app-soft); font-size: 1rem; }
.family-chat-new { position: relative; z-index: 6; padding: 12px 16px 0; }
.family-chat-member-search { min-height: 42px; display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 9px; padding: 0 11px; border: 1px solid #dfe5ee; border-radius: 8px; color: var(--app-primary); background: #fff; }
.family-chat-member-search input { min-width: 0; width: 100%; border: 0; outline: 0; color: var(--app-ink); background: transparent; font-size: .78rem; }
.family-chat-member-search button { width: 26px; height: 26px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; color: #7b8797; background: #f0f2f5; }
.family-chat-member-results { position: absolute; top: calc(100% + 6px); right: 16px; left: 16px; max-height: 330px; overflow-y: auto; padding: 6px; border: 1px solid #dde4ed; border-radius: 10px; background: #fff; box-shadow: 0 16px 34px rgba(24,33,47,.16); }
.family-chat-member-results > button { width: 100%; display: grid; grid-template-columns: 36px minmax(0,1fr) auto; align-items: center; gap: 9px; padding: 8px; border: 0; border-radius: 8px; color: #273244; text-align: left; background: transparent; }
.family-chat-member-results > button:hover { background: var(--app-soft); }
.family-chat-member-results > button > span:nth-child(2) { min-width: 0; display: grid; }
.family-chat-member-results strong,
.family-chat-member-results small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.family-chat-member-results strong { font-size: .78rem; }
.family-chat-member-results small { color: var(--app-muted); font-size: .68rem; }
.family-chat-member-results > button > i { color: #98a2b3; font-size: .66rem; }
.family-chat-member-empty { padding: 18px 10px; color: var(--app-muted); text-align: center; font-size: .75rem; }
.family-chat-search { min-height: 42px; display: flex; align-items: center; gap: 10px; margin: 12px 16px; padding: 0 12px; border: 1px solid #e1e6ef; border-radius: 8px; color: #647086; background: #fff; }
.family-chat-search > i { color: #8a95a7; font-size: .8rem; }
.family-chat-search input { min-width: 0; width: 100%; border: 0; outline: 0; color: var(--app-ink); background: transparent; font-size: .82rem; }
.family-chat-contact-list { max-height: calc(100vh - 310px); overflow: auto; padding: 6px 10px 12px; }
.family-chat-contact { width: 100%; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px; border: 0; border-radius: 8px; color: #273244; text-align: left; background: transparent; }
.family-chat-contact.active,
.family-chat-contact:hover { color: #273244; background: var(--app-soft); }
.family-chat-avatar { width: 44px; height: 44px; display: inline-grid; place-items: center; flex: 0 0 auto; overflow: hidden; border-radius: 50%; color: #fff; font-size: .78rem; font-weight: 800; background: linear-gradient(135deg, var(--app-primary), #2f8de4); }
.family-chat-avatar.large { width: 52px; height: 52px; font-size: .9rem; }
.family-chat-avatar.small { width: 36px; height: 36px; font-size: .66rem; }
.family-chat-avatar img { width: 100%; height: 100%; display: block; object-fit: cover; }
.family-chat-avatar > span { width: 100%; height: 100%; display: grid; place-items: center; }
.family-chat-avatar.is-broken img { display: none !important; }
.family-chat-avatar.is-broken > span { display: grid !important; }
.family-chat-contact-main,
.family-chat-contact-side { min-width: 0; display: grid; gap: 3px; }
.family-chat-contact-main strong,
.family-chat-contact-main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.family-chat-contact-main small,
.family-chat-contact-side small { color: var(--app-muted); font-size: .74rem; }
.family-chat-contact-side { justify-items: end; }
.family-chat-unread { min-width: 20px; height: 20px; display: inline-grid; place-items: center; padding: 0 6px; border-radius: 999px; color: #fff; font-size: .7rem; font-weight: 800; background: #e63946; }
.family-chat-empty { padding: 28px 16px; color: var(--app-muted); text-align: center; font-size: .82rem; }
.family-chat-thread { min-width: 0; background: #f3f6fb; }
.family-chat-thread-inner { min-height: calc(100vh - 150px); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.family-chat-title { min-width: 0; display: flex; align-items: center; gap: 12px; }
.family-chat-mobile-back { display: none; width: 38px; height: 38px; flex: 0 0 38px; place-items: center; padding: 0; border: 0; border-radius: 50%; color: var(--app-primary); background: var(--app-soft); }
.family-chat-title > div { min-width: 0; }
.family-chat-title h2,
.family-chat-title small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.family-chat-thread-tools { display: flex; align-items: center; gap: 10px; }
.family-chat-thread-search { width: min(230px, 25vw); height: 38px; display: flex; align-items: center; gap: 8px; padding: 0 11px; border: 1px solid #e0e6ef; border-radius: 999px; color: #7b8799; background: #f8fafc; }
.family-chat-thread-search input { min-width: 0; width: 100%; border: 0; outline: 0; color: var(--app-ink); background: transparent; font-size: .78rem; }
.family-chat-message-list { max-height: calc(100vh - 318px); min-height: 420px; overflow: auto; display: flex; flex-direction: column; gap: 12px; padding: 20px; background: linear-gradient(180deg, rgba(247,250,252,.88), rgba(241,246,251,.96)); }
.family-chat-message { display: flex; justify-content: flex-start; }
.family-chat-message.mine { justify-content: flex-end; }
.family-chat-bubble { position: relative; max-width: min(620px, 78%); display: grid; gap: 7px; padding: 12px 14px; border: 1px solid #e4eaf3; border-radius: 12px 12px 12px 4px; color: #253044; background: #fff; box-shadow: 0 6px 14px rgba(24, 33, 47, .06); }
.family-chat-message.mine .family-chat-bubble { padding-right: 42px; border-color: var(--app-primary); border-radius: 12px 12px 4px 12px; color: #fff; background: var(--app-primary); }
.family-chat-bubble p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.family-chat-bubble small { opacity: .72; font-size: .7rem; }
.family-chat-message-menu { position: absolute; top: 5px; right: 6px; z-index: 4; }
.family-chat-message-menu-trigger { width: 28px; height: 28px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; color: #fff; background: rgba(255,255,255,.16); opacity: 0; transition: opacity .15s ease, background .15s ease; }
.family-chat-bubble:hover .family-chat-message-menu-trigger,
.family-chat-message-menu-trigger:focus,
.family-chat-message-menu-trigger[aria-expanded="true"] { opacity: 1; }
.family-chat-message-menu-trigger:hover { background: rgba(255,255,255,.27); }
.family-chat-message-menu-popover { position: absolute; top: 32px; right: 0; z-index: 5; width: 155px; display: grid; gap: 3px; padding: 5px; border: 1px solid #e0e5ed; border-radius: 9px; background: #fff; box-shadow: 0 12px 30px rgba(24,33,47,.18); }
.family-chat-message-menu-popover button { width: 100%; min-height: 36px; display: flex; align-items: center; gap: 9px; padding: 0 10px; border: 0; border-radius: 6px; color: #344054; text-align: left; background: transparent; font-size: .74rem; font-weight: 650; }
.family-chat-message-menu-popover button:hover { color: var(--app-primary); background: var(--app-soft); }
.family-chat-message-menu-popover button.danger { color: #d92d3a; }
.family-chat-message-menu-popover button.danger:hover { background: #fff0f1; }
.family-chat-message-menu-popover button i { width: 16px; text-align: center; }
.family-chat-message-edit { min-width: min(400px, 56vw); display: grid; gap: 8px; }
.family-chat-message-edit textarea { width: 100%; min-height: 76px; padding: 9px 10px; border: 1px solid rgba(255,255,255,.48); border-radius: 8px; outline: 0; color: #253044; background: #fff; resize: vertical; }
.family-chat-message-edit > div { display: flex; justify-content: flex-end; gap: 7px; }
.family-chat-message-edit button { min-height: 32px; padding: 0 11px; border: 1px solid rgba(255,255,255,.65); border-radius: 7px; color: #fff; background: transparent; font-size: .72rem; font-weight: 700; }
.family-chat-message-edit button.primary { border-color: #fff; color: var(--app-primary); background: #fff; }
.family-chat-time { display: flex; justify-content: flex-end; align-items: center; gap: 6px; }
.family-chat-time .fa-check-double { opacity: .65; }
.family-chat-message.mine .family-chat-time .fa-check-double.read { color: #b8eeff; opacity: 1; }
.family-chat-attachment-grid { display: grid; gap: 8px; min-width: min(350px, 58vw); }
.family-chat-attachment { min-width: 0; overflow: hidden; border-radius: 9px; background: rgba(255,255,255,.94); }
.family-chat-message:not(.mine) .family-chat-attachment { border: 1px solid #e4eaf3; }
.family-chat-image-button { width: 100%; max-height: 320px; display: block; padding: 0; overflow: hidden; border: 0; background: #edf1f6; cursor: zoom-in; }
.family-chat-image-button img,
.family-chat-attachment video { width: 100%; max-height: 320px; display: block; object-fit: contain; background: #17202c; }
.family-chat-attachment audio { width: 100%; min-width: 280px; display: block; }
.family-chat-attachment-caption { display: flex; justify-content: space-between; gap: 10px; padding: 7px 10px; color: #526175; text-decoration: none; font-size: .72rem; }
.family-chat-attachment-caption span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.family-chat-file { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; color: #273244; text-decoration: none; }
.family-chat-file > i:first-child { font-size: 1.6rem; color: var(--app-primary); }
.family-chat-file span { min-width: 0; display: grid; }
.family-chat-file strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .78rem; }
.family-chat-file small { color: #758196; }
.family-chat-compose { padding: 14px 16px; border-top: 1px solid #e4e8f0; background: #fff; }
.family-chat-compose-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 9px; align-items: end; padding: 5px; border: 1px solid #dfe5ee; border-radius: 16px; background: #f8fafc; }
.family-chat-compose textarea { min-height: 44px; max-height: 120px; resize: vertical; border-radius: 8px; }
.family-chat-send { width: 44px; height: 44px; min-height: 44px; display: grid; place-items: center; padding: 0; border-radius: 50%; }
.family-chat-compose textarea.form-control { border: 0; box-shadow: none; background: transparent; resize: none; }
.family-chat-attach-button { width: 44px; height: 44px; border: 0; border-radius: 50%; color: var(--app-primary); background: var(--app-soft); }
.family-chat-compose-hint { display: block; margin: 7px 5px 0; color: #7a8699; font-size: .68rem; }
.family-chat-compose-files { display: flex; gap: 8px; margin-bottom: 10px; padding-bottom: 3px; overflow-x: auto; }
.family-chat-compose-file { min-width: 210px; max-width: 280px; display: grid; grid-template-columns: 38px minmax(0,1fr) 28px; gap: 8px; align-items: center; padding: 7px; border: 1px solid #e1e7ef; border-radius: 10px; background: #fff; }
.family-chat-compose-file-icon { width: 38px; height: 38px; display: grid; place-items: center; overflow: hidden; border-radius: 8px; color: var(--app-primary); background: var(--app-soft); }
.family-chat-compose-file-icon img { width: 100%; height: 100%; object-fit: cover; }
.family-chat-compose-file > span:nth-child(2) { min-width: 0; display: grid; }
.family-chat-compose-file strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .72rem; }
.family-chat-compose-file small { color: var(--app-muted); font-size: .66rem; }
.family-chat-compose-file button { width: 28px; height: 28px; border: 0; border-radius: 50%; color: #d94b57; background: #fff0f2; }
.family-chat-media-modal { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; padding: 72px 24px 24px; background: rgba(12,17,25,.9); }
.family-chat-media-modal > img { max-width: 92vw; max-height: calc(100vh - 120px); object-fit: contain; }
.family-chat-media-toolbar { position: absolute; inset: 16px 20px auto; display: flex; align-items: center; gap: 10px; color: #fff; }
.family-chat-media-toolbar strong { min-width: 0; margin-right: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.family-chat-media-toolbar a,
.family-chat-media-toolbar button { width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 50%; color: #fff; text-decoration: none; background: rgba(255,255,255,.14); }
.family-chat-confirm-backdrop { position: fixed; inset: 0; z-index: 3000; display: grid; place-items: center; padding: 18px; background: rgba(15,23,42,.56); backdrop-filter: blur(2px); pointer-events: auto; }
.family-chat-confirm-modal { width: min(430px, 100%); display: grid; grid-template-columns: 52px minmax(0,1fr); gap: 14px; padding: 22px; border: 1px solid #e4e7ec; border-radius: 14px; background: #fff; box-shadow: 0 28px 70px rgba(15,23,42,.28); }
.family-chat-confirm-icon { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; color: #d92d3a; background: #fff0f1; font-size: 1.2rem; }
.family-chat-confirm-copy h3 { margin: 1px 0 6px; color: #202938; font-size: 1.08rem; font-weight: 800; }
.family-chat-confirm-copy p { margin: 0; color: #667085; font-size: .8rem; line-height: 1.5; }
.family-chat-confirm-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 9px; margin-top: 7px; }
.family-chat-confirm-actions button { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 15px; border-radius: 8px; font-size: .78rem; font-weight: 750; }
.family-chat-confirm-actions button.secondary { border: 1px solid #d0d5dd; color: #344054; background: #fff; }
.family-chat-confirm-actions button.danger { border: 1px solid #d92d3a; color: #fff; background: #d92d3a; }
.family-chat-confirm-actions button:disabled { opacity: .62; cursor: wait; }
.family-chat-confirm-actions button { position: relative; z-index: 1; pointer-events: auto; }
.family-chat-no-selection { min-height: calc(100vh - 150px); display: grid; place-items: center; align-content: center; gap: 10px; padding: 24px; color: var(--app-muted); text-align: center; }
.family-chat-no-selection-mark { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 18px; color: var(--app-primary); background: var(--app-soft); font-size: 1.6rem; }

/* Family dashboard feed */
.family-feed-shell { width: 100%; display: grid; gap: 18px; }
.family-feed-quick-composer { min-height: 78px; display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 18px; border: 1px solid var(--app-border); border-radius: 14px; background: #fff; box-shadow: var(--app-shadow); }
.family-feed-quick-input { min-width: 0; min-height: 48px; padding: 0 18px; overflow: hidden; border: 0; border-radius: 999px; color: #667085; text-align: left; text-overflow: ellipsis; white-space: nowrap; background: #f0f2f5; font-size: 1rem; }
.family-feed-quick-input:hover { background: #e9edf2; }
.family-feed-quick-actions { display: flex; align-items: center; gap: 8px; }
.family-feed-quick-actions button { width: 38px; height: 38px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 9px; background: transparent; font-size: 1.18rem; font-weight: 900; transition: transform .15s ease, background .15s ease; }
.family-feed-quick-actions button:hover { transform: translateY(-1px); background: #f5f6f8; }
.family-feed-quick-actions .photo { color: #45bd62; }
.family-feed-quick-actions .event { color: #f5536d; }
.family-feed-modal-backdrop { position: fixed; inset: 0; z-index: 1080; display: flex; align-items: center; justify-content: center; padding: 18px; overflow-y: auto; background: rgba(15, 23, 42, .52); backdrop-filter: blur(2px); }
.family-feed-modal { width: min(620px, 100%); max-height: calc(100vh - 36px); display: flex; flex-direction: column; overflow: hidden; border: 1px solid #dfe3ea; border-radius: 14px; background: #fff; box-shadow: 0 24px 64px rgba(15, 23, 42, .25); }
.family-feed-modal-head { position: relative; min-height: 72px; display: flex; align-items: center; justify-content: center; padding: 15px 72px; border-bottom: 1px solid var(--app-border); }
.family-feed-modal-head h3 { margin: 0; color: #1f2329; font-size: 1.35rem; font-weight: 850; text-align: center; }
.family-feed-modal-close { position: absolute; top: 14px; right: 16px; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; color: #606770; background: #e4e6eb; font-size: 2rem; font-weight: 300; line-height: 1; }
.family-feed-modal-close:hover { background: #d8dbe0; }
.family-feed-modal-body { min-height: 0; overflow-y: auto; padding: 18px 20px 12px; }
.family-feed-modal-author { display: flex; align-items: center; gap: 12px; }
.family-feed-modal-author > div { min-width: 0; display: grid; gap: 5px; }
.family-feed-modal-author strong { overflow: hidden; color: #1f2329; font-size: .95rem; text-overflow: ellipsis; white-space: nowrap; }
.family-feed-modal-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.family-feed-modal-chips span,
.family-feed-modal-chips button { min-height: 27px; display: inline-flex; align-items: center; padding: 3px 8px; border: 0; border-radius: 6px; color: #344054; background: #e4e6eb; font-size: .72rem; font-weight: 750; }
.family-feed-modal-chips button.active { color: var(--app-primary-dark); background: var(--app-soft); }
.family-feed-modal-textarea { width: 100%; min-height: 170px; margin: 15px 0 8px; padding: 0; border: 0; outline: 0; color: #20242b; background: transparent; font: inherit; font-size: 1.55rem; line-height: 1.35; resize: none; }
.family-feed-modal-textarea::placeholder { color: #65676b; opacity: 1; }
.family-feed-add-panel { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 16px; padding: 11px 14px; border: 1px solid #ced2d9; border-radius: 10px; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.family-feed-add-panel > strong { color: #252a31; font-size: .86rem; }
.family-feed-add-panel > div { display: flex; align-items: center; gap: 6px; }
.family-feed-add-action { width: 38px; height: 38px; min-height: 38px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; font-size: 1.16rem; font-weight: 850; }
.family-feed-add-action:hover { background: #f0f2f5; }
.family-feed-add-action input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.family-feed-add-action.photo { color: #45bd62; }
.family-feed-add-action.location { color: #f5533d; }
.family-feed-media-limit { display: block; margin-top: 7px; color: var(--app-muted); font-size: .7rem; text-align: right; }
.family-feed-modal-footer { padding: 8px 20px 18px; background: #fff; }
.family-feed-modal-footer .btn { min-height: 46px; border-radius: 8px; }
.family-feed-composer,
.family-feed-card,
.family-feed-empty { border: 1px solid var(--app-border); border-radius: 10px; background: #fff; box-shadow: var(--app-shadow); }
.family-feed-composer { overflow: hidden; padding: 20px; }
.family-feed-composer-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.family-feed-composer-head h5 { margin: 0 0 3px; color: #263041; font-size: 1rem; font-weight: 800; }
.family-feed-composer-head p { margin: 0; color: var(--app-muted); font-size: .78rem; }
.family-feed-avatar { width: 42px; height: 42px; display: inline-grid; place-items: center; flex: 0 0 42px; border-radius: 50%; color: #fff; font-size: .76rem; font-weight: 800; background: linear-gradient(135deg, var(--app-primary), #2f8de4); box-shadow: 0 5px 12px rgba(86,63,151,.18); }
.family-feed-avatar img { width: 100%; height: 100%; display: block; border-radius: inherit; object-fit: cover; }
.family-feed-composer-input textarea { min-height: 92px; padding: 13px 15px; border-radius: 9px; background: #f8fafc; resize: vertical; }
.family-feed-event-switch { margin: 13px 0; padding: 9px 12px 9px 42px; border: 1px solid var(--app-border); border-radius: 8px; color: #475467; background: #fafbfc; font-size: .8rem; font-weight: 700; }
.family-feed-event-switch .form-check-input { margin-left: -30px; }
.family-feed-event-fields { margin-bottom: 12px; padding: 14px 8px 6px; border: 1px solid #e2daf6; border-radius: 9px; background: #faf8ff; }
.family-feed-upload { display: grid; gap: 5px; margin-top: 12px; }
.family-feed-upload .form-control { font-size: .78rem; }
.family-feed-preview-grid { margin-top: 10px; }
.family-feed-preview { overflow: hidden; padding: 3px; border: 1px solid var(--app-border); border-radius: 8px; background: #f8fafc; }
.family-feed-preview img { width: 100%; height: 92px; object-fit: cover; border-radius: 6px; }
.family-feed-composer-actions { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--app-border); }
.family-feed-composer-actions .btn { min-width: 112px; }
.family-feed-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 2px 2px 0; }
.family-feed-section-head h6 { margin: 0 0 2px; color: #263041; font-size: .92rem; font-weight: 800; }
.family-feed-section-head small { color: var(--app-muted); }
.family-feed-section-actions { display: flex; align-items: center; gap: 8px; }
.family-feed-refresh { width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border: 1px solid var(--app-border); border-radius: 8px; color: var(--app-primary); background: #fff; }
.family-feed-refresh:hover { border-color: #cfc5ee; background: var(--app-soft); }
.family-feed-refresh:disabled { opacity: .6; }
.family-feed-count { padding: 5px 9px; border-radius: 999px; color: var(--app-primary); background: var(--app-soft); font-size: .7rem; font-weight: 800; }
.family-feed-list { display: grid; gap: 16px; }
.family-feed-card { overflow: hidden; }
.family-feed-card-head { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; border-bottom: 1px solid #edf0f5; }
.family-feed-author { min-width: 0; display: flex; align-items: center; gap: 11px; }
.family-feed-author-meta { min-width: 0; }
.family-feed-author-meta > div { color: #263041; }
.family-feed-author-meta small { display: block; margin-top: 2px; font-size: .72rem; }
.family-feed-type { padding: 3px 7px; border-radius: 999px; color: #7a4b00; background: #fff0c2; font-size: .62rem; font-weight: 850; letter-spacing: .05em; }
.family-feed-card-body { padding: 18px; }
.family-feed-copy { margin: 0 0 15px; color: #344054; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }
.family-feed-event { margin-bottom: 15px; padding: 14px 15px; border: 1px solid #ddd4f3; border-left: 4px solid var(--app-primary); border-radius: 8px; color: #3e3653; background: #faf8ff; }
.family-feed-event > div:first-child { margin-bottom: 6px; font-size: .9rem; }
.family-feed-event-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid #e7e0f5; }
.family-feed-event-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 8px; }
.family-feed-media-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; overflow: hidden; margin-top: 12px; border-radius: 9px; }
.family-feed-media-grid.media-count-1 { grid-template-columns: 1fr; }
.family-feed-media { min-height: 180px; display: block; overflow: hidden; background: #edf0f5; }
.family-feed-media-grid.media-count-1 .family-feed-media { max-height: 460px; }
.family-feed-media img { width: 100%; height: 100%; min-height: 180px; max-height: 320px; display: block; object-fit: cover; transition: transform .2s ease; }
.family-feed-media:hover img { transform: scale(1.02); }
.family-feed-comments { margin: 18px -18px -18px; padding: 14px 18px 18px; border-top: 1px solid #edf0f5; background: #fafbfc; }
.family-feed-comments-title { display: flex; align-items: center; gap: 7px; margin-bottom: 11px; color: #344054; font-size: .78rem; }
.family-feed-comments-title span { min-width: 20px; height: 20px; display: inline-grid; place-items: center; border-radius: 999px; color: var(--app-primary); background: var(--app-soft); font-size: .68rem; font-weight: 800; }
.family-feed-comment-list { display: grid; gap: 9px; margin-bottom: 11px; }
.family-feed-comment { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 9px; align-items: start; }
.family-feed-comment-avatar { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: var(--app-primary); background: var(--app-soft); font-size: .62rem; font-weight: 850; }
.family-feed-comment > div { min-width: 0; padding: 8px 10px; border: 1px solid #e7eaf0; border-radius: 4px 10px 10px 10px; background: #fff; }
.family-feed-comment-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; margin-bottom: 3px; font-size: .7rem; }
.family-feed-comment-meta strong { color: #344054; }
.family-feed-comment-meta span { color: var(--app-muted); }
.family-feed-comment p { margin: 0; color: #475467; font-size: .78rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.family-feed-comment-compose .form-control { min-height: 38px; background: #fff; }
.family-feed-comment-compose .btn { min-height: 38px; }
.family-feed-icon-action { width: 38px; min-width: 38px; min-height: 38px; display: inline-grid; place-items: center; padding: 0; }
.family-feed-empty { min-height: 180px; display: grid; place-items: center; align-content: center; gap: 7px; padding: 24px; color: var(--app-muted); text-align: center; }
.family-feed-empty-mark { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 15px; color: var(--app-primary); background: var(--app-soft); font-size: 1.25rem; }
.family-feed-empty strong { color: #344054; }

/* Family tree popup */
.family-tree-browser-backdrop { position: fixed; inset: 0; z-index: 1050; display: flex; align-items: center; justify-content: center; padding: 22px; background: rgba(15, 23, 42, .52); backdrop-filter: blur(2px); }
.family-tree-browser-modal { width: min(1080px, 100%); max-height: calc(100vh - 44px); display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; border: 1px solid var(--app-border); border-radius: 14px; background: #fff; box-shadow: 0 26px 70px rgba(15, 23, 42, .28); }
.family-tree-browser-head { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 15px 18px 15px 22px; border-bottom: 1px solid var(--app-border); background: #fff; }
.family-tree-browser-head h5 { margin: 0 0 3px; color: #263041; font-size: 1.12rem; font-weight: 850; }
.family-tree-browser-head p { font-size: .76rem; }
.family-tree-browser-actions { display: flex; align-items: center; gap: 8px; }
.family-tree-browser-close { width: 40px; height: 40px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; color: #606770; background: #e4e6eb; font-size: 1.1rem; }
.family-tree-browser-close:hover { background: #d8dbe0; }
.family-tree-browser-body { min-height: 0; overflow: auto; padding: 18px 20px 22px; background: #f8fafc; }
.family-tree-browser-body > .alert { background: #fff; }
.family-tree-browser-body .family-tree-wrap { max-height: calc(100vh - 235px); min-height: 420px; padding: 8px; }
.family-tree-browser-body > .row > div > .border { border-color: var(--app-border) !important; border-radius: 10px !important; box-shadow: 0 4px 12px rgba(24,33,47,.04); }

/* Groups workspace */
.group-page { width: 100%; }
.group-metric-card { min-height: 94px; display: flex; align-items: center; gap: 14px; padding: 17px 18px; border: 1px solid var(--app-border); border-radius: 9px; background: #fff; box-shadow: var(--app-shadow); }
.group-metric-icon { width: 48px; height: 48px; display: grid; place-items: center; flex: 0 0 48px; border-radius: 10px; color: var(--app-primary); background: var(--app-soft); font-size: 1.12rem; }
.group-metric-icon.members { color: #2878c7; background: #e8f3ff; }
.group-metric-icon.managed { color: #148467; background: #e2f7ef; }
.group-metric-card strong { display: block; color: #263041; font-size: 1.35rem; line-height: 1.1; }
.group-metric-card small { display: block; margin-top: 5px; color: var(--app-muted); font-size: .76rem; }
.group-listing-card { overflow: hidden; border: 1px solid #cfd8e8; border-radius: 10px; background: #fff; box-shadow: 0 8px 18px rgba(24,33,47,.07); }
.group-listing-toolbar { min-height: 72px; display: flex; align-items: center; gap: 16px; padding: 13px 18px; background: #e7ebf7; }
.group-listing-title { color: #3f4a61; font-size: .92rem; font-weight: 800; }
.group-listing-search { width: min(100%, 300px); height: 38px; display: flex; align-items: center; gap: 9px; margin-left: auto; padding: 0 12px; border: 1px solid #cfd7e6; border-radius: 6px; color: #7a8699; background: #fff; }
.group-listing-search input { min-width: 0; width: 100%; height: 36px; border: 0; outline: 0; color: var(--app-ink); background: transparent; font-size: .8rem; }
.group-listing-actions { display: flex; align-items: center; gap: 7px; }
.group-listing-icon { width: 34px; height: 34px; display: grid; place-items: center; padding: 0; border: 0; background: transparent; font-size: 1.05rem; }
.group-listing-icon.add { color: #28a05a; }
.group-listing-icon.refresh { color: var(--app-primary); }
.group-listing-icon:hover { border-radius: 7px; background: rgba(255,255,255,.65); }
.group-listing-table thead th { padding: 14px 18px; color: #344054; background: #fff; }
.group-listing-table tbody td { padding: 14px 18px; border-color: #e4e8ef; vertical-align: middle; }
.group-listing-table tbody tr:hover { background: #fafbfe; }
.group-row-actions { display: flex; align-items: center; gap: 5px; }
.group-row-action { width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 7px; background: transparent; }
.group-row-action.open { color: #344054; background: #f0f2f5; }
.group-row-action.edit { color: var(--app-primary); background: var(--app-soft); }
.group-row-action.delete { color: #d74343; background: #fff0f0; }
.group-row-action.roll { color: #a06a05; background: #fff6d8; }
.group-row-action:hover { filter: brightness(.96); transform: translateY(-1px); }
.group-row-action:disabled { opacity: .4; transform: none; }
.group-arisan-actions { display: flex; align-items: center; gap: 6px; }
.group-detail-backdrop { position: fixed; inset: 0; z-index: 1060; display: flex; align-items: center; justify-content: center; padding: 22px; background: rgba(15,23,42,.55); backdrop-filter: blur(2px); }
.group-detail-modal { width: min(1120px, 100%); max-height: calc(100vh - 44px); display: grid; grid-template-rows: auto minmax(0,1fr); overflow: hidden; border: 1px solid var(--app-border); border-radius: 14px; background: #fff; box-shadow: 0 28px 72px rgba(15,23,42,.3); }
.group-detail-head { min-height: 80px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 15px 18px 15px 22px; border-bottom: 1px solid var(--app-border); background: #fff; }
.group-detail-identity { min-width: 0; display: flex; align-items: center; gap: 12px; }
.group-detail-avatar { width: 48px; height: 48px; display: grid; place-items: center; flex: 0 0 48px; border-radius: 12px; color: #fff; font-size: .84rem; font-weight: 850; background: linear-gradient(135deg,var(--app-primary),#2f8de4); }
.group-detail-identity > div { min-width: 0; }
.group-detail-identity h5 { margin: 0 0 3px; overflow: hidden; color: #263041; font-size: 1.05rem; font-weight: 850; text-overflow: ellipsis; white-space: nowrap; }
.group-detail-identity p { margin: 0; overflow: hidden; color: var(--app-muted); font-size: .76rem; text-overflow: ellipsis; white-space: nowrap; }
.group-detail-close { width: 40px; height: 40px; display: grid; place-items: center; flex: 0 0 40px; padding: 0; border: 0; border-radius: 50%; color: #606770; background: #e4e6eb; }
.group-detail-body { min-height: 0; overflow-y: auto; padding: 18px 20px 24px; background: #f7f9fc; }
.group-feature-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; padding: 13px 15px; border: 1px solid var(--app-border); border-radius: 8px; color: #344054; background: #fff; }
.group-feature-title i { color: var(--app-primary); }
.group-detail-body > .mb-3 { padding: 13px 15px; border: 1px solid var(--app-border); border-radius: 8px; background: #fff; }
.group-detail-body > .row.g-2 { margin-bottom: 16px !important; padding: 14px 10px; border: 1px solid var(--app-border); border-radius: 9px; background: #fff; }
.group-detail-body > .row.g-3 > div > .card { border: 1px solid var(--app-border) !important; border-radius: 9px; box-shadow: var(--app-shadow) !important; }
.group-form-backdrop { z-index: 1080; background: rgba(15,23,42,.55); backdrop-filter: blur(2px); }
.group-roulette-backdrop { z-index: 1100; background: rgba(15,23,42,.62); backdrop-filter: blur(2px); }
.group-form-backdrop .modal-content { border-radius: 12px; }
.group-form-backdrop .modal-header { padding: 16px 20px; }
.group-form-backdrop .modal-body { padding: 18px 20px; }
.group-form-backdrop .modal-footer { padding: 13px 20px; }
.group-modal-search { min-height: 40px; display: flex; align-items: center; gap: 9px; padding: 0 12px; border: 1px solid #dfe4ec; border-radius: 7px; color: var(--app-muted); background: #f8fafc; }
.group-modal-search input { min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; font-size: .8rem; }
.group-member-picker { max-height: 320px; display: grid; gap: 6px; overflow-y: auto; padding: 8px; border: 1px solid var(--app-border); border-radius: 8px; background: #f8fafc; }
.group-member-picker > label { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid transparent; border-radius: 7px; background: #fff; cursor: pointer; }
.group-member-picker > label.active { border-color: #cfc5ee; background: var(--app-soft); }
.group-member-picker > label > span { min-width: 0; display: flex; align-items: center; justify-content: space-between; flex: 1; gap: 10px; }

/* Admin cashflow */
.cashflow-page { display: grid; gap: 18px; }
.cashflow-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; border: 1px solid var(--app-border); border-radius: 12px; background: #fff; box-shadow: var(--app-shadow); }
.cashflow-toolbar h3,
.cashflow-section-head h4 { margin: 0; color: var(--app-ink); font-weight: 850; }
.cashflow-toolbar h3 { font-size: 1.08rem; }
.cashflow-toolbar p { margin: 3px 0 0; color: var(--app-muted); font-size: .76rem; }
.cashflow-toolbar-actions { display: flex; align-items: center; gap: 9px; }
.cashflow-icon-button { width: 42px; height: 42px; display: grid; place-items: center; padding: 0; border: 1px solid #d9e0e9; border-radius: 9px; color: var(--app-primary); background: #fff; }
.cashflow-add-button { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 15px; border: 0; border-radius: 9px; color: #fff; background: var(--app-primary); font-size: .78rem; font-weight: 750; }
.cashflow-summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.cashflow-summary-card { min-width: 0; display: flex; align-items: center; gap: 13px; padding: 17px 18px; border: 1px solid var(--app-border); border-radius: 12px; background: #fff; box-shadow: var(--app-shadow); }
.cashflow-summary-card > span { width: 46px; height: 46px; display: grid; place-items: center; flex: 0 0 46px; border-radius: 12px; font-size: 1.05rem; }
.cashflow-summary-card.income > span { color: #15803d; background: #eaf8ef; }
.cashflow-summary-card.expense > span { color: #d92d3a; background: #fff0f1; }
.cashflow-summary-card.balance > span { color: var(--app-primary); background: var(--app-soft); }
.cashflow-summary-card > div { min-width: 0; display: grid; gap: 4px; }
.cashflow-summary-card small { color: var(--app-muted); font-size: .72rem; }
.cashflow-summary-card strong { overflow: hidden; color: #273244; font-size: 1rem; text-overflow: ellipsis; white-space: nowrap; }
.cashflow-filter-card { display: grid; grid-template-columns: auto repeat(4, minmax(125px,1fr)) auto; align-items: end; gap: 10px; padding: 14px; border: 1px solid var(--app-border); border-radius: 12px; background: #fff; box-shadow: var(--app-shadow); }
.cashflow-filter-title { min-height: 40px; display: flex; align-items: center; gap: 8px; padding: 0 6px; color: #344054; font-size: .75rem; font-weight: 800; }
.cashflow-filter-title i { color: var(--app-primary); }
.cashflow-filter-card label { min-width: 0; display: grid; gap: 5px; color: #667085; font-size: .65rem; font-weight: 750; }
.cashflow-filter-card input,
.cashflow-filter-card select { width: 100%; min-height: 40px; padding: 7px 9px; border: 1px solid #dbe1e9; border-radius: 8px; outline: 0; color: #344054; background: #fff; font-size: .72rem; }
.cashflow-filter-reset { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 12px; border: 1px solid #d8dee7; border-radius: 8px; color: #667085; background: #fff; font-size: .7rem; font-weight: 750; }
.cashflow-chart-card,
.cashflow-list-card { overflow: hidden; border: 1px solid var(--app-border); border-radius: 12px; background: #fff; box-shadow: var(--app-shadow); }
.cashflow-section-head { min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--app-border); }
.cashflow-section-head h4 { font-size: .96rem; }
.cashflow-section-head small { color: var(--app-muted); font-size: .7rem; }
.cashflow-chart-legend { display: flex; align-items: center; gap: 13px; color: #667085; font-size: .7rem; }
.cashflow-chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.cashflow-chart-legend i { width: 9px; height: 9px; border-radius: 3px; background: #32b768; }
.cashflow-chart-legend .expense i { background: #ef6170; }
.cashflow-chart { height: 270px; display: grid; grid-template-columns: repeat(6, minmax(42px, 1fr)); gap: 14px; align-items: end; padding: 24px 24px 18px; overflow-x: auto; background: repeating-linear-gradient(to bottom, transparent 0, transparent 49px, #edf0f4 50px); }
.cashflow-chart-column { min-width: 42px; height: 100%; display: grid; grid-template-rows: minmax(0,1fr) auto auto; gap: 4px; align-items: end; text-align: center; }
.cashflow-chart-bars { height: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 6px; }
.cashflow-chart-bar { width: min(24px, 30%); min-height: 0; border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg,#48c77a,#219653); transition: height .25s ease; }
.cashflow-chart-bar.expense { background: linear-gradient(180deg,#fb7c89,#e33f50); }
.cashflow-chart-column > strong { color: #475467; font-size: .7rem; text-transform: capitalize; }
.cashflow-chart-column > small { color: #98a2b3; font-size: .62rem; }
.cashflow-chart-empty { min-height: 220px; display: grid; place-items: center; align-content: center; gap: 10px; color: var(--app-muted); font-size: .78rem; }
.cashflow-chart-empty i { color: #c7ced9; font-size: 2rem; }
.cashflow-table thead th { padding: 11px 14px; border-bottom-color: #e4e8ef; color: #667085; background: #f8fafc; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .035em; }
.cashflow-table tbody td { padding: 13px 14px; border-bottom-color: #edf0f4; color: #475467; font-size: .76rem; }
.cashflow-type { display: inline-flex; align-items: center; min-height: 25px; padding: 3px 8px; border-radius: 999px; color: #167a3d; background: #eaf8ef; font-size: .66rem; font-weight: 800; }
.cashflow-type.out { color: #c62e3c; background: #fff0f1; }
.cashflow-category { display: inline-flex; align-items: center; gap: 7px; color: #475467; white-space: nowrap; }
.cashflow-category i { width: 23px; height: 23px; display: grid; place-items: center; border-radius: 6px; color: var(--app-primary); background: var(--app-soft); font-size: .62rem; }
.cashflow-row-actions { display: flex; justify-content: flex-end; gap: 6px; }
.cashflow-row-actions button { width: 34px; height: 34px; display: grid; place-items: center; padding: 0; border: 1px solid #dce2ea; border-radius: 8px; color: var(--app-primary); background: #fff; }
.cashflow-row-actions button.danger { color: #d92d3a; }
.cashflow-modal-backdrop { position: fixed; inset: 0; z-index: 2060; display: grid; place-items: center; padding: 18px; overflow-y: auto; background: rgba(15,23,42,.56); backdrop-filter: blur(2px); }
.cashflow-modal { width: min(560px, 100%); overflow: hidden; border: 1px solid #e1e5eb; border-radius: 14px; background: #fff; box-shadow: 0 28px 72px rgba(15,23,42,.3); }
.cashflow-modal-head { display: grid; grid-template-columns: 46px minmax(0,1fr) 38px; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--app-border); }
.cashflow-modal-icon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 11px; color: var(--app-primary); background: var(--app-soft); }
.cashflow-modal-head h3 { margin: 0; color: #273244; font-size: 1rem; font-weight: 850; }
.cashflow-modal-head p { margin: 2px 0 0; color: var(--app-muted); font-size: .7rem; }
.cashflow-modal-head > button { width: 38px; height: 38px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; color: #667085; background: #eef1f5; }
.cashflow-modal-form { display: grid; gap: 15px; padding: 18px; }
.cashflow-type-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 5px; border-radius: 10px; background: #f1f4f7; }
.cashflow-type-picker button { min-height: 40px; border: 0; border-radius: 7px; color: #667085; background: transparent; font-size: .75rem; font-weight: 750; }
.cashflow-type-picker button.active { color: #157a3c; background: #fff; box-shadow: 0 2px 7px rgba(24,33,47,.08); }
.cashflow-type-picker button.expense.active { color: #d92d3a; }
.cashflow-modal-form > label,
.cashflow-form-grid label { display: grid; gap: 6px; color: #344054; font-size: .74rem; font-weight: 750; }
.cashflow-modal-form label span small { color: #98a2b3; font-weight: 500; }
.cashflow-modal-form input,
.cashflow-modal-form select,
.cashflow-modal-form textarea { width: 100%; min-height: 42px; padding: 9px 11px; border: 1px solid #d8dee8; border-radius: 8px; outline: 0; color: #273244; background: #fff; font: inherit; font-weight: 500; }
.cashflow-modal-form input:focus,
.cashflow-modal-form select:focus,
.cashflow-modal-form textarea:focus { border-color: #a793d8; box-shadow: 0 0 0 3px rgba(111,88,184,.1); }
.cashflow-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cashflow-amount-input { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; overflow: hidden; border: 1px solid #d8dee8; border-radius: 8px; }
.cashflow-amount-input b { padding-left: 11px; color: #667085; font-size: .75rem; }
.cashflow-amount-input input { border: 0; box-shadow: none !important; }
.cashflow-modal-actions { display: flex; justify-content: flex-end; gap: 9px; padding-top: 3px; }
.cashflow-modal-actions button,
.cashflow-delete-modal footer button { min-height: 41px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 15px; border-radius: 8px; font-size: .76rem; font-weight: 750; }
.cashflow-modal-actions button.secondary,
.cashflow-delete-modal footer button { border: 1px solid #d0d5dd; color: #344054; background: #fff; }
.cashflow-modal-actions button.primary { border: 1px solid var(--app-primary); color: #fff; background: var(--app-primary); }
.cashflow-delete-modal { width: min(430px, 100%); display: grid; grid-template-columns: 50px minmax(0,1fr); gap: 14px; padding: 21px; border-radius: 14px; background: #fff; box-shadow: 0 28px 72px rgba(15,23,42,.3); }
.cashflow-delete-modal > span { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 50%; color: #d92d3a; background: #fff0f1; }
.cashflow-delete-modal h3 { margin: 1px 0 5px; color: #273244; font-size: 1rem; font-weight: 850; }
.cashflow-delete-modal p { margin: 0; color: #667085; font-size: .77rem; }
.cashflow-delete-modal footer { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 9px; margin-top: 6px; }
.cashflow-delete-modal footer button.danger { border-color: #d92d3a; color: #fff; background: #d92d3a; }

body.login-page, body.register-page, body.payment-page, body.recap-page { min-height: 100vh; padding: 28px !important; background: radial-gradient(900px 460px at 100% 0%, rgba(111, 88, 184, .12), transparent 60%), radial-gradient(700px 420px at 0% 100%, rgba(244, 93, 125, .08), transparent 60%), var(--app-bg) !important; }
.login-shell, .register-shell { max-width: 900px !important; }
.payment-shell { max-width: 880px !important; }
.recap-shell { max-width: 760px !important; }
.login-card, .register-card, .payment-card, .recap-card { overflow: hidden; border: 1px solid var(--app-border) !important; border-radius: 8px !important; background: #fff !important; box-shadow: var(--app-shadow-lg) !important; backdrop-filter: none !important; }
.login-side, .register-side { min-height: 470px; isolation: isolate; background: #242a34 !important; }
.login-side::before, .register-side::before { position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 18% 12%, rgba(128, 103, 230, .65), transparent 28%), radial-gradient(circle at 88% 88%, rgba(255, 107, 157, .28), transparent 34%); content: ""; }
.login-side::after, .register-side::after { background: rgba(255,255,255,.07) !important; }
.login-badge, .register-badge { border-radius: 6px !important; background: rgba(255,255,255,.1) !important; }
.login-card h4, .register-card h4, .payment-card h4, .recap-card h4 { color: var(--app-ink); font-weight: 800; letter-spacing: -.02em; }
.login-input, .register-input, .login-submit, .register-submit, .toggle-pass { border-radius: 6px !important; }
.price-badge { border-color: var(--app-border) !important; border-radius: 8px !important; box-shadow: 0 2px 8px rgba(24,33,47,.035); }
.price-badge:hover { border-color: #b9abe1 !important; box-shadow: 0 8px 20px rgba(111,88,184,.1) !important; }
.item-row { border-color: var(--app-border) !important; }

@media (max-width: 767.98px) {
  :root { --app-topbar-height: 56px; }
  .app-topbar { grid-template-columns: minmax(0, 1fr) auto; padding: 0 14px; }
  .app-topbar-context, .app-role-chip { display: none; }
  .admin-sidebar { top: var(--app-topbar-height) !important; width: min(86vw, 300px) !important; max-width: min(86vw, 300px) !important; min-height: calc(100vh - var(--app-topbar-height)); transform: translateX(-102%); transition: transform .2s ease; }
  .admin-sidebar.is-open { transform: translateX(0); }
  .admin-main { flex-basis: 100% !important; width: 100% !important; max-width: 100% !important; margin-left: 0; padding: calc(var(--app-topbar-height) + 18px) 16px 24px !important; }
  .admin-page-heading { align-items: flex-start !important; gap: 12px; }
  .admin-page-heading h2 { font-size: 1.2rem; }
  .admin-sidebar-backdrop { top: var(--app-topbar-height) !important; }
  body.login-page, body.register-page, body.payment-page, body.recap-page { padding: 14px !important; }
}

@media (max-width: 991.98px) {
  .family-chat-shell { display: block; min-height: calc(100vh - 105px); }
  .family-chat-contacts { min-height: calc(100vh - 105px); border-right: 0; }
  .family-chat-thread { display: none; }
  .family-chat-shell.mobile-thread-open .family-chat-contacts { display: none; }
  .family-chat-shell.mobile-thread-open .family-chat-thread { display: block; }
  .family-chat-contact-list { max-height: calc(100vh - 300px); }
  .family-chat-message-list { min-height: 360px; max-height: 62vh; }
  .family-chat-mobile-back { display: grid; }
  .family-chat-thread-head { align-items: flex-start; }
  .family-chat-thread-tools { flex: 1; justify-content: flex-end; }
  .family-chat-thread-search { width: min(190px, 42vw); }
  .family-chat-attachment-grid { min-width: min(310px, 65vw); }
  .family-chat-thread-inner,
  .family-chat-no-selection { min-height: 560px; }
  .group-listing-toolbar { align-items: stretch; flex-direction: column; }
  .group-listing-search { width: 100%; margin-left: 0; }
  .group-listing-actions { justify-content: flex-end; }
}

@media (max-width: 575.98px) {
  .family-chat-thread-head { flex-wrap: wrap; }
  .family-chat-thread-tools { width: 100%; }
  .family-chat-thread-search { width: 100%; }
  .family-chat-bubble { max-width: 92%; }
  .family-chat-attachment-grid { min-width: 0; width: 68vw; }
  .family-chat-compose-hint { display: none; }
  .family-chat-message-menu-trigger { opacity: 1; }
  .family-chat-message-edit { min-width: 62vw; }
}

@media (max-width: 767.98px) {
  .cashflow-page { gap: 13px; }
  .cashflow-toolbar { padding: 14px; }
  .cashflow-toolbar p { display: none; }
  .cashflow-add-button { width: 42px; padding: 0; }
  .cashflow-add-button span { display: none; }
  .cashflow-summary-grid { grid-template-columns: 1fr; gap: 9px; }
  .cashflow-summary-card { padding: 13px 14px; }
  .cashflow-filter-card { grid-template-columns: 1fr 1fr; }
  .cashflow-filter-title { grid-column: 1 / -1; padding: 0; }
  .cashflow-filter-reset { grid-column: 1 / -1; }
  .cashflow-chart { height: 245px; grid-template-columns: repeat(6, minmax(54px,1fr)); gap: 8px; padding: 20px 14px 15px; }
  .cashflow-chart-legend { gap: 8px; }
  .cashflow-list-card .table-responsive { overflow: visible; }
  .cashflow-table,
  .cashflow-table tbody { display: block; }
  .cashflow-table thead { display: none; }
  .cashflow-table tbody { padding: 10px; }
  .cashflow-table tbody tr { display: grid; gap: 7px; margin-bottom: 9px; padding: 12px; border: 1px solid #e3e8ef; border-radius: 10px; background: #fff; }
  .cashflow-table tbody td { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0; border: 0; text-align: right; }
  .cashflow-table tbody td::before { color: #98a2b3; font-size: .65rem; font-weight: 750; text-transform: uppercase; content: attr(data-label); }
  .cashflow-table tbody td[colspan] { display: block; }
  .cashflow-table tbody td[colspan]::before { display: none; }
  .cashflow-row-actions { margin-left: auto; }
  .cashflow-modal-backdrop { align-items: end; padding: 0; }
  .cashflow-modal { max-height: 94vh; overflow-y: auto; border-radius: 16px 16px 0 0; }
  .cashflow-form-grid { grid-template-columns: 1fr; }
  .cashflow-modal-actions button { flex: 1; }
  .cashflow-delete-modal { margin: 14px; }
}

@media (max-width: 575.98px) {
  .family-feed-quick-composer { grid-template-columns: 42px minmax(0, 1fr); gap: 9px; padding: 11px 12px; }
  .family-feed-quick-composer .family-feed-avatar { width: 42px; height: 42px; }
  .family-feed-quick-input { min-height: 44px; padding: 0 14px; font-size: .86rem; }
  .family-feed-quick-actions { grid-column: 2; justify-content: flex-end; margin-top: -4px; }
  .family-feed-modal-backdrop { align-items: flex-end; padding: 0; }
  .family-feed-modal { max-height: 94vh; border-radius: 16px 16px 0 0; }
  .family-feed-modal-head { min-height: 62px; }
  .family-feed-modal-head h3 { font-size: 1.12rem; }
  .family-feed-modal-close { top: 10px; width: 40px; height: 40px; }
  .family-feed-modal-body { padding: 15px 15px 10px; }
  .family-feed-modal-textarea { min-height: 135px; font-size: 1.22rem; }
  .family-feed-add-panel { align-items: flex-start; flex-direction: column; }
  .family-feed-add-panel > div { width: 100%; justify-content: space-between; }
  .family-feed-modal-footer { padding: 8px 15px 15px; }
  .family-tree-browser-backdrop { align-items: flex-end; padding: 0; }
  .family-tree-browser-modal { max-height: 94vh; border-radius: 16px 16px 0 0; }
  .family-tree-browser-head { align-items: flex-start; padding: 14px 14px 12px; }
  .family-tree-browser-head p { display: none; }
  .family-tree-browser-actions .badge { display: none; }
  .family-tree-browser-body { padding: 12px; }
  .family-tree-browser-body .family-tree-wrap { min-height: 380px; max-height: calc(94vh - 185px); }
  .group-detail-backdrop { align-items: flex-end; padding: 0; }
  .group-detail-modal { max-height: 94vh; border-radius: 16px 16px 0 0; }
  .group-detail-head { padding: 13px 14px; }
  .group-detail-body { padding: 12px; }
  .group-detail-identity p { display: none; }
  .group-listing-table thead th,
  .group-listing-table tbody td { padding: 12px 13px; }
  .family-feed-composer { padding: 16px; }
  .family-feed-composer-actions { align-items: stretch; flex-direction: column; }
  .family-feed-composer-actions .btn { width: 100%; }
  .family-feed-card-head { align-items: flex-start; padding: 13px 14px; }
  .family-feed-card-body { padding: 14px; }
  .family-feed-comments { margin: 16px -14px -14px; padding: 13px 14px 15px; }
  .family-feed-media { min-height: 130px; }
  .family-feed-media img { min-height: 130px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
/* Role & permissions */
.role-page{display:grid;gap:22px}.role-toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px}.role-toolbar h3{margin:0 0 5px;font-size:1.2rem;font-weight:800;color:#182230}.role-toolbar p{margin:0;color:#667085}.role-primary-button,.role-empty button{border:0;border-radius:12px;background:#1668e3;color:#fff;padding:11px 17px;font-weight:700;display:inline-flex;align-items:center;gap:9px;box-shadow:0 6px 15px rgba(22,104,227,.2)}.role-system-note{display:flex;align-items:center;gap:14px;border:1px solid #cfe0ff;background:#f3f7ff;border-radius:16px;padding:16px 18px;color:#274165}.role-system-note>i{font-size:1.35rem;color:#1668e3}.role-system-note>div:nth-child(2){display:grid;gap:2px}.role-system-note strong{color:#172b4d}.role-system-note span{font-size:.86rem}.role-system-chips{margin-left:auto;display:flex;gap:7px;flex-wrap:wrap}.role-system-chips span{background:#fff;border:1px solid #cfdcf1;border-radius:99px;padding:5px 9px;font-weight:700;color:#46566d}.role-summary-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.role-summary-grid article{display:flex;align-items:center;gap:13px;padding:17px;background:#fff;border:1px solid #e7eaf0;border-radius:15px;box-shadow:0 4px 16px rgba(15,23,42,.04)}.role-summary-icon{width:43px;height:43px;display:grid;place-items:center;border-radius:12px}.role-summary-icon.blue{background:#eaf2ff;color:#1668e3}.role-summary-icon.green{background:#e8f8ef;color:#16834d}.role-summary-icon.purple{background:#f1eaff;color:#7746c8}.role-summary-grid article div{display:grid}.role-summary-grid small{color:#778195}.role-summary-grid strong{font-size:1.35rem;color:#182230}.role-card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.role-card{background:#fff;border:1px solid #e3e7ed;border-radius:17px;padding:18px;box-shadow:0 5px 18px rgba(15,23,42,.05)}.role-card header{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:start}.role-card-icon{width:43px;height:43px;display:grid;place-items:center;background:#eaf2ff;color:#1668e3;border-radius:13px}.role-card header p{margin:5px 0 0;font-size:.88rem;color:#778195}.role-card-title{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.role-card-title h4{font-size:1.04rem;margin:0;color:#182230}.role-card-title span{font-size:.7rem;font-weight:800;border-radius:99px;padding:3px 8px}.role-card-title span.active{background:#e7f8ed;color:#158148}.role-card-title span.inactive{background:#f0f1f3;color:#667085}.role-card header>.dropdown>button{border:0;background:transparent;color:#697386;width:32px;height:32px;border-radius:8px}.role-card .dropdown-item{font-size:.88rem;display:flex;gap:9px;align-items:center}.role-permission-preview{display:flex;justify-content:space-between;align-items:center;margin:17px 0;padding:13px 0;border-top:1px solid #edf0f4;border-bottom:1px solid #edf0f4}.role-permission-preview>span{font-size:.83rem;color:#697386;font-weight:700}.role-permission-preview>div{display:flex}.role-permission-preview>div span{width:30px;height:30px;margin-left:-5px;border:2px solid #fff;border-radius:50%;display:grid;place-items:center;background:#edf3fb;color:#38628e;font-size:.75rem;font-weight:800}.role-card footer{display:flex;justify-content:space-between;align-items:center}.role-assignment-avatars{display:flex;align-items:center}.role-assignment-avatars>span{width:30px;height:30px;margin-right:-6px;border:2px solid #fff;border-radius:50%;display:grid;place-items:center;background:#dce9ff;color:#2458a5;font-size:.65rem;font-weight:800}.role-assignment-avatars>span.more{background:#eceff3;color:#5c6677}.role-assignment-avatars small{font-size:.78rem;color:#98a2b3}.role-card footer>button{border:0;background:#edf4ff;color:#1765cc;border-radius:9px;padding:8px 11px;font-size:.8rem;font-weight:700;display:flex;gap:7px;align-items:center}.role-loading,.role-empty{min-height:250px;display:flex;align-items:center;justify-content:center;gap:10px;color:#667085}.role-empty{flex-direction:column;background:#fff;border:1px dashed #d4d9e2;border-radius:17px;text-align:center}.role-empty>span{width:54px;height:54px;display:grid;place-items:center;border-radius:16px;background:#edf4ff;color:#1668e3;font-size:1.3rem}.role-empty h4,.role-empty p{margin:0}.role-empty p{color:#778195}.role-empty button{margin-top:8px}
.role-modal-backdrop{position:fixed;inset:0;z-index:1060;background:rgba(15,23,42,.54);display:grid;place-items:center;padding:18px;backdrop-filter:blur(2px)}.role-modal{width:min(920px,100%);max-height:calc(100vh - 36px);overflow:hidden;background:#fff;border-radius:19px;box-shadow:0 24px 70px rgba(15,23,42,.28);display:flex;flex-direction:column}.role-modal>header{display:flex;justify-content:space-between;align-items:flex-start;padding:19px 22px;border-bottom:1px solid #e9ecf1}.role-modal>header>div{display:flex;gap:12px}.role-modal>header>div>span{width:42px;height:42px;border-radius:12px;background:#eaf2ff;color:#1668e3;display:grid;place-items:center}.role-modal h3{margin:0;font-size:1.12rem;color:#182230}.role-modal header p{margin:4px 0 0;font-size:.85rem;color:#778195}.role-modal>header>button{width:35px;height:35px;border:0;border-radius:50%;background:#eef1f5;color:#606a78}.role-editor-modal form{overflow:auto;padding:20px 22px}.role-form-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:14px}.role-form-grid label{display:grid;gap:6px;font-size:.82rem;font-weight:700;color:#465164}.role-form-grid input,.role-member-search input{width:100%;border:1px solid #d6dbe3;border-radius:10px;padding:10px 12px;outline:none}.role-form-grid input:focus,.role-member-search:focus-within{border-color:#71a7ef;box-shadow:0 0 0 3px rgba(22,104,227,.11)}.role-active-toggle{margin:16px 0;display:flex;align-items:center;gap:10px;cursor:pointer}.role-active-toggle input{display:none}.role-active-toggle>span{width:41px;height:23px;border-radius:99px;background:#c9ced6;padding:3px;transition:.2s}.role-active-toggle>span:after{content:"";display:block;width:17px;height:17px;border-radius:50%;background:white;transition:.2s}.role-active-toggle input:checked+span{background:#1668e3}.role-active-toggle input:checked+span:after{transform:translateX(18px)}.role-active-toggle div{display:grid}.role-active-toggle small{color:#87909e;font-weight:400}.role-matrix-head{display:flex;justify-content:space-between;align-items:center;margin:18px 0 9px}.role-matrix-head h4{margin:0;font-size:1rem}.role-matrix-head p{margin:2px 0 0;font-size:.78rem;color:#87909e}.role-matrix-head button{border:0;background:#edf4ff;color:#1765cc;border-radius:8px;padding:7px 10px;font-size:.78rem;font-weight:700}.role-matrix-wrap{border:1px solid #e2e6ec;border-radius:13px;overflow:auto}.role-matrix{width:100%;border-collapse:collapse;min-width:640px}.role-matrix th{background:#f8f9fb;color:#687386;font-size:.73rem;text-transform:uppercase;letter-spacing:.04em;padding:11px;text-align:center}.role-matrix th:first-child{text-align:left}.role-matrix td{border-top:1px solid #edf0f3;padding:11px;text-align:center}.role-matrix td:first-child{text-align:left;display:flex;align-items:center;gap:9px}.role-matrix td:first-child>span{width:30px;height:30px;display:grid;place-items:center;border-radius:8px;background:#eef4fb;color:#38628e}.role-matrix td:first-child strong{font-size:.84rem}.role-permission-check{display:inline-flex;cursor:pointer}.role-permission-check input{display:none}.role-permission-check span{width:23px;height:23px;border:1px solid #cbd2dc;border-radius:6px;color:transparent;display:grid;place-items:center;font-size:.67rem}.role-permission-check input:checked+span{background:#1668e3;border-color:#1668e3;color:#fff}.role-not-applicable{color:#c1c7d0}.role-modal footer{display:flex;justify-content:flex-end;gap:9px;padding-top:18px}.role-modal footer button,.role-delete-modal footer button{border:0;border-radius:10px;padding:10px 15px;font-weight:700}.role-modal footer .secondary{background:#f0f2f5;color:#465164}.role-modal footer .primary{background:#1668e3;color:#fff;display:flex;align-items:center;gap:8px}.role-assignment-modal{width:min(620px,100%)}.role-member-search{margin:17px 20px 10px;display:flex;align-items:center;gap:9px;border:1px solid #d6dbe3;border-radius:11px;padding-left:12px;color:#8a94a3}.role-member-search input{border:0;box-shadow:none!important}.role-member-select-head{display:flex;justify-content:space-between;padding:0 21px 10px;font-size:.8rem;color:#687386}.role-member-select-head button{border:0;background:transparent;color:#1668e3;font-weight:700}.role-member-list{overflow:auto;max-height:390px;border-top:1px solid #edf0f3;border-bottom:1px solid #edf0f3}.role-member-item{position:relative;display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:11px;padding:12px 21px;cursor:pointer}.role-member-item:hover{background:#f8faff}.role-member-item>input{display:none}.role-member-item .avatar{width:39px;height:39px;border-radius:50%;display:grid;place-items:center;background:#e4edfc;color:#2458a5;font-size:.75rem;font-weight:800}.role-member-item>div{display:grid}.role-member-item div small{color:#87909e;font-size:.75rem}.role-member-item .system-role{text-transform:capitalize;background:#f0f2f5;border-radius:99px;padding:4px 8px;font-size:.68rem;font-weight:700;color:#667085}.role-member-item .check{width:22px;height:22px;border:1px solid #cbd2dc;border-radius:6px;display:grid;place-items:center;color:transparent;font-size:.65rem}.role-member-item input:checked~.check{background:#1668e3;border-color:#1668e3;color:#fff}.role-assignment-modal>footer{padding:15px 20px}.role-member-empty{text-align:center;padding:34px;color:#87909e}.role-delete-modal{width:min(430px,100%);background:#fff;border-radius:18px;padding:22px;display:grid;grid-template-columns:auto 1fr;gap:13px;box-shadow:0 24px 70px rgba(15,23,42,.28)}.role-delete-modal>span{width:43px;height:43px;border-radius:12px;display:grid;place-items:center;background:#feecec;color:#d92d20}.role-delete-modal h3{font-size:1.05rem;margin:2px 0 5px}.role-delete-modal p{margin:0;color:#667085;font-size:.88rem}.role-delete-modal footer{grid-column:1/-1;display:flex;justify-content:flex-end;gap:9px;margin-top:5px}.role-delete-modal footer button{background:#f0f2f5}.role-delete-modal footer .danger{background:#d92d20;color:#fff}
@media(max-width:767.98px){.role-toolbar{align-items:flex-start}.role-toolbar p{font-size:.84rem}.role-primary-button{padding:11px 13px}.role-primary-button span{display:none}.role-system-note{align-items:flex-start}.role-system-chips{display:none}.role-summary-grid{grid-template-columns:1fr}.role-card-grid{grid-template-columns:1fr}.role-form-grid{grid-template-columns:1fr}.role-modal-backdrop{padding:0;align-items:end}.role-modal{max-height:94vh;border-radius:19px 19px 0 0}.role-editor-modal form{padding:17px}.role-matrix-head{align-items:flex-end}.role-member-item{padding:11px 16px}.role-member-item .system-role{display:none}}
.role-matrix td:first-child>div{display:grid;gap:2px}.role-matrix td:first-child small{font-size:.68rem;color:#8a94a3;font-weight:400}.role-base-permission{width:23px;height:23px;display:inline-grid;place-items:center;border-radius:6px;background:#e8f3ff;color:#1765cc;font-size:.67rem}.role-matrix-head p i{color:#1765cc}

/* Group member selection & organization */
.group-selected-members{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 13px;padding:11px;background:#f6f9fc;border:1px solid #e2e8f0;border-radius:12px}.group-selected-members>span{display:flex;align-items:center;gap:7px;background:#fff;border:1px solid #dce3ec;border-radius:10px;padding:6px 7px;box-shadow:0 2px 7px rgba(15,23,42,.04)}.group-selected-members .selected-avatar{width:29px;height:29px;display:grid;place-items:center;border-radius:8px;background:#e7f0ff;color:#175eaf;font-size:.65rem;font-weight:800}.group-selected-members>span>span:nth-child(2){display:grid;line-height:1.15}.group-selected-members strong{font-size:.78rem;color:#253247}.group-selected-members small{font-size:.65rem;color:#778195}.group-selected-members button{border:0;background:transparent;color:#929baa;padding:2px 4px}.group-form-organization{margin-top:18px;border-top:1px solid #e6eaf0;padding-top:16px}.group-form-section-title,.group-organization-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.group-form-section-title>div,.group-organization-head>div{display:flex;align-items:center;gap:10px}.group-form-section-title>div>i,.group-organization-head>div>i{width:37px;height:37px;border-radius:10px;background:#eaf2ff;color:#1765cc;display:grid;place-items:center}.group-form-section-title span,.group-organization-head span{display:grid}.group-form-section-title small,.group-organization-head small{font-size:.7rem;color:#8390a2}.group-form-section-title a{font-size:.75rem;text-decoration:none;font-weight:700}.group-form-role-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:11px}.group-form-role-list>div{display:grid;gap:2px;padding:10px 11px;border:1px dashed #d3dae4;background:#fafbfc;border-radius:10px}.group-form-role-list>div.filled{border-style:solid;border-color:#b9d4fb;background:#f2f7ff}.group-form-role-list strong{font-size:.78rem;color:#344054}.group-form-role-list span{font-size:.7rem;color:#8490a1}.group-organization-card{margin:0 0 18px;border:1px solid #dee5ee;border-radius:14px;padding:15px;background:#fbfcfe}.group-organization-head>span{font-size:.72rem;background:#edf4ff;color:#1765cc;border-radius:99px;padding:5px 9px;font-weight:700}.group-organization-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-top:13px}.group-organization-grid article{display:flex;align-items:center;gap:9px;background:#fff;border:1px solid #dce4ed;border-radius:11px;padding:10px}.group-organization-grid article.vacant{opacity:.65;border-style:dashed}.group-organization-grid .position-icon{width:33px;height:33px;border-radius:9px;display:grid;place-items:center;background:#eaf2ff;color:#1765cc}.group-organization-grid article>div{display:grid}.group-organization-grid strong{font-size:.78rem;color:#344054}.group-organization-grid p{margin:1px 0 0;font-size:.7rem;color:#788496}.group-organization-empty{display:flex;align-items:center;gap:9px;margin-top:11px;padding:11px;border-radius:10px;background:#f4f6f8;color:#748094;font-size:.76rem}.group-confirm-backdrop{position:fixed;inset:0;z-index:1080;background:rgba(15,23,42,.55);display:grid;place-items:center;padding:18px;backdrop-filter:blur(2px)}.group-confirm-modal{width:min(430px,100%);background:#fff;border-radius:17px;padding:21px;display:grid;grid-template-columns:auto 1fr;gap:12px;box-shadow:0 22px 65px rgba(15,23,42,.3)}.group-confirm-modal>span{width:42px;height:42px;border-radius:11px;background:#feecec;color:#d92d20;display:grid;place-items:center}.group-confirm-modal h4{margin:2px 0 5px;font-size:1.02rem}.group-confirm-modal p{margin:0;color:#697386;font-size:.85rem}.group-confirm-modal footer{grid-column:1/-1;display:flex;justify-content:flex-end;gap:8px;margin-top:6px}.group-confirm-modal footer button{border:0;border-radius:9px;padding:9px 14px;font-weight:700;background:#eef1f4;display:flex;align-items:center;gap:7px}.group-confirm-modal footer .danger{background:#d92d20;color:#fff}
@media(max-width:767.98px){.group-form-role-list{grid-template-columns:1fr}.group-organization-grid{grid-template-columns:1fr}.group-form-section-title,.group-organization-head{align-items:flex-start}.group-organization-head>span{white-space:nowrap}.group-selected-members{max-height:155px;overflow:auto}}
.group-detail-members{display:flex;flex-wrap:wrap;gap:7px;margin:7px 0 11px}.group-detail-members>span:not(.empty){display:flex;align-items:center;gap:7px;padding:6px 9px 6px 6px;border:1px solid #dfe5ed;border-radius:10px;background:#fff}.group-detail-members b{width:29px;height:29px;border-radius:8px;display:grid;place-items:center;background:#edf4ff;color:#1765cc;font-size:.63rem}.group-detail-members>span>span{display:grid;line-height:1.15}.group-detail-members strong{font-size:.73rem}.group-detail-members small{font-size:.63rem;color:#7d8898;text-transform:capitalize}.group-detail-members .empty{font-size:.75rem;color:#87909e}
.group-form-role-list>.group-role-assignment-card{display:block;padding:12px}.group-role-assignment-card header{display:flex;justify-content:space-between;align-items:center}.group-role-assignment-card header>span{font-size:.65rem;background:#eef1f5;color:#687386;border-radius:99px;padding:3px 7px;font-weight:700}.group-role-assignment-card.filled header>span{background:#e5f5ec;color:#16804a}.group-role-assignment-card>p{margin:4px 0 9px;font-size:.68rem;color:#8490a1}.group-role-holder-options{display:flex;flex-wrap:wrap;gap:6px}.group-role-holder-options label{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:6px;min-width:0;padding:5px 7px;border:1px solid #dce2e9;border-radius:8px;background:#fff;cursor:pointer}.group-role-holder-options label.active{border-color:#6ca4ee;background:#eaf3ff}.group-role-holder-options input{display:none}.group-role-holder-options label>span{width:24px;height:24px;border-radius:7px;background:#edf1f6;color:#526174;display:grid;place-items:center;font-size:.57rem;font-weight:800}.group-role-holder-options label>strong{font-size:.68rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.group-role-holder-options label>i{font-size:.6rem;color:transparent}.group-role-holder-options label.active>i{color:#1765cc}.group-role-no-member{display:block;color:#87909e;font-size:.68rem}
.group-role-catalog{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:11px}.group-role-catalog button{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:9px;text-align:left;border:1px solid #dce2e9;background:#fff;border-radius:10px;padding:9px 10px;color:#5f6b7a}.group-role-catalog button>i{width:27px;height:27px;border-radius:8px;background:#f0f2f5;display:grid;place-items:center;font-size:.65rem}.group-role-catalog button>span{display:grid}.group-role-catalog button strong{font-size:.76rem;color:#344054}.group-role-catalog button small{font-size:.65rem;color:#87909e}.group-role-catalog button.active{border-color:#6ca4ee;background:#eef5ff}.group-role-catalog button.active>i{background:#1765cc;color:#fff}
@media(max-width:767.98px){.group-role-catalog{grid-template-columns:1fr}}

/* Standalone group details */
.group-details-page{display:grid;gap:15px}.group-details-toolbar{display:flex;justify-content:space-between}.group-details-toolbar button{border:0;border-radius:10px;background:#edf1f5;color:#4e5b6c;padding:9px 12px;font-weight:700;display:flex;align-items:center;gap:8px}.group-details-toolbar .refresh{width:40px;justify-content:center}.group-loading{min-height:240px;display:flex;align-items:center;justify-content:center;gap:9px;color:#758094}.group-details-layout{display:grid;gap:17px}.group-details-hero{display:flex;gap:15px;align-items:center;background:linear-gradient(135deg,#1765cc,#4c83d0);border-radius:17px;padding:20px;color:#fff;box-shadow:0 10px 27px rgba(23,101,204,.2)}.group-details-hero>span{width:61px;height:61px;display:grid;place-items:center;border-radius:16px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.3);font-size:1.25rem;font-weight:800}.group-details-hero>div{flex:1}.group-details-hero>div>div{display:flex;align-items:center;gap:10px}.group-details-hero h3{margin:0;font-size:1.3rem}.group-details-hero b{border-radius:99px;background:rgba(255,255,255,.17);padding:4px 8px;font-size:.7rem}.group-details-hero p{margin:4px 0 7px;opacity:.86}.group-details-hero small{opacity:.8}.group-details-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.group-details-panel,.group-arisan-section{background:#fff;border:1px solid #e2e7ee;border-radius:16px;padding:16px;box-shadow:0 4px 15px rgba(15,23,42,.04)}.group-details-panel>header,.group-arisan-section>header{display:flex;gap:10px;align-items:center}.group-details-panel>header>span,.group-arisan-section>header>div>span{width:39px;height:39px;display:grid;place-items:center;border-radius:11px;background:#eaf2ff;color:#1765cc}.group-details-panel h4,.group-arisan-section h4{margin:0;font-size:.98rem}.group-details-panel header p,.group-arisan-section header p{margin:2px 0 0;font-size:.7rem;color:#87909e}.group-detail-org-list{display:grid;gap:7px;margin-top:13px}.group-detail-org-list>div{display:flex;align-items:center;gap:9px;padding:9px;border:1px solid #e0e6ed;border-radius:10px}.group-detail-org-list>div.vacant{border-style:dashed;opacity:.65}.group-detail-org-list>div>span{width:31px;height:31px;display:grid;place-items:center;border-radius:8px;background:#eef4fb;color:#38628e}.group-detail-org-list>div>div{display:grid}.group-detail-org-list strong{font-size:.77rem}.group-detail-org-list p{font-size:.68rem;color:#778195;margin:1px 0 0}.group-detail-member-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:13px}.group-detail-member-list>div{display:flex;align-items:center;gap:8px;padding:8px;background:#f8fafc;border-radius:10px}.group-detail-member-list b{width:32px;height:32px;display:grid;place-items:center;border-radius:9px;background:#e7effc;color:#2458a5;font-size:.62rem}.group-detail-member-list>div>span{display:grid}.group-detail-member-list strong{font-size:.72rem}.group-detail-member-list small{font-size:.61rem;color:#7f8998;text-transform:capitalize}.group-panel-empty{display:flex;align-items:center;gap:9px;padding:17px;margin-top:13px;background:#f6f8fa;color:#7d8796;border-radius:11px;font-size:.74rem}.group-panel-empty.large{min-height:190px;flex-direction:column;justify-content:center;text-align:center}.group-panel-empty.large i{font-size:1.5rem;color:#a2acb9}.group-arisan-section>header{justify-content:space-between}.group-arisan-section>header>div{display:flex;align-items:center;gap:10px}.group-arisan-section>header>button{border:0;border-radius:10px;background:#1765cc;color:#fff;padding:9px 13px;display:flex;gap:7px;align-items:center;font-weight:700}.group-arisan-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:15px}.group-arisan-list>article{border:1px solid #e0e5ec;border-radius:13px;padding:14px}.group-arisan-list>article>header{display:flex;justify-content:space-between;gap:8px}.group-arisan-list>article>header>div{display:grid}.group-arisan-list>article>header strong{font-size:.88rem}.group-arisan-list>article>header small{font-size:.68rem;color:#8490a1}.group-arisan-list>article>header>span{font-size:.62rem;border-radius:99px;background:#eef3f9;color:#52647b;padding:4px 7px;font-weight:800}.group-arisan-meta{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0}.group-arisan-meta>span{display:grid;padding:8px;background:#f8fafc;border-radius:8px}.group-arisan-meta small{font-size:.61rem;color:#8993a2}.group-arisan-meta strong{font-size:.72rem}.group-arisan-members{display:flex;flex-wrap:wrap;gap:5px}.group-arisan-members button{border:1px solid #dce2e9;background:#fff;border-radius:8px;display:flex;align-items:center;gap:5px;padding:4px 6px}.group-arisan-members button>span{width:22px;height:22px;border-radius:6px;background:#edf1f5;display:grid;place-items:center;font-size:.52rem;font-weight:800}.group-arisan-members button b{font-size:.63rem}.group-arisan-members button i{font-size:.6rem;color:#b2bac5}.group-arisan-members button.paid{background:#eff9f3;border-color:#b9dfc8}.group-arisan-members button.paid i{color:#1b9658}.group-arisan-list article>footer{display:flex;justify-content:flex-end;gap:6px;margin-top:12px;border-top:1px solid #edf0f3;padding-top:10px}.group-arisan-list article>footer button{width:31px;height:31px;border:0;border-radius:8px;background:#eef4ff;color:#1765cc}.group-arisan-list article>footer button.danger{background:#feecec;color:#d92d20}.group-detail-backdrop{position:fixed;inset:0;z-index:1070;background:rgba(15,23,42,.55);display:grid;place-items:center;padding:18px;backdrop-filter:blur(2px)}.group-arisan-form-modal{width:min(590px,100%);max-height:calc(100vh - 36px);overflow:auto;background:#fff;border-radius:18px;box-shadow:0 22px 70px rgba(15,23,42,.28)}.group-arisan-form-modal>header{display:flex;justify-content:space-between;padding:17px 19px;border-bottom:1px solid #e8ecf1}.group-arisan-form-modal>header>div{display:flex;gap:10px}.group-arisan-form-modal>header>div>span{width:39px;height:39px;border-radius:10px;background:#eaf2ff;color:#1765cc;display:grid;place-items:center}.group-arisan-form-modal h3{font-size:1.02rem;margin:0}.group-arisan-form-modal header p{font-size:.72rem;color:#8390a2;margin:3px 0}.group-arisan-form-modal>header>button{border:0;border-radius:50%;width:34px;height:34px;background:#eef1f4}.group-arisan-form-modal form{padding:18px;display:grid;gap:12px}.group-arisan-form-modal form>div{display:grid;grid-template-columns:1fr 1fr;gap:10px}.group-arisan-form-modal label{display:grid;gap:5px;font-size:.75rem;font-weight:700;color:#526072}.group-arisan-form-modal input,.group-arisan-form-modal select,.group-arisan-form-modal textarea{border:1px solid #d7dde5;border-radius:9px;padding:9px 10px;outline:none}.group-arisan-form-modal form>footer{display:flex;justify-content:flex-end;gap:8px;margin-top:3px}.group-arisan-form-modal footer button{border:0;border-radius:9px;padding:9px 13px;font-weight:700;background:#eef1f4}.group-arisan-form-modal footer .primary{background:#1765cc;color:#fff;display:flex;align-items:center;gap:7px}
@media(max-width:767.98px){.group-details-toolbar button span{display:none}.group-details-grid,.group-arisan-list{grid-template-columns:1fr}.group-detail-member-list{grid-template-columns:1fr}.group-details-hero{align-items:flex-start;padding:16px}.group-details-hero>span{width:49px;height:49px}.group-details-hero>div>div{align-items:flex-start;flex-direction:column;gap:5px}.group-arisan-section>header>button span{display:none}.group-detail-backdrop{padding:0;align-items:end}.group-arisan-form-modal{max-height:94vh;border-radius:18px 18px 0 0}.group-arisan-form-modal form>div{grid-template-columns:1fr}}

.global-structure-card{background:#fff;border:1px solid #dfe5ed;border-radius:17px;padding:17px;box-shadow:0 4px 16px rgba(15,23,42,.04)}.global-structure-card>header{display:flex;justify-content:space-between;align-items:center;gap:15px}.global-structure-card>header>div{display:flex;align-items:center;gap:10px}.global-structure-card>header>div>span{width:40px;height:40px;display:grid;place-items:center;border-radius:11px;background:#eaf2ff;color:#1765cc}.global-structure-card h4{margin:0;font-size:1rem}.global-structure-card header p{margin:2px 0 0;font-size:.72rem;color:#7f8a9a}.global-structure-card>header>small{color:#687386;font-size:.7rem;background:#f3f5f7;border-radius:9px;padding:7px 9px}.global-structure-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:14px}.global-structure-grid article{border:1px solid #e1e6ed;border-radius:12px;padding:12px;display:grid;gap:10px}.global-structure-grid article>div:first-child{display:flex;align-items:center;gap:8px}.global-structure-grid article>div:first-child>span{width:33px;height:33px;display:grid;place-items:center;border-radius:9px;background:#eef4fb;color:#38628e}.global-structure-grid article>div:first-child>div{display:grid}.global-structure-grid article strong{font-size:.8rem}.global-structure-grid article small{font-size:.65rem;color:#8490a1}.global-holder-list{display:flex;flex-wrap:wrap;gap:5px}.global-holder-list>span{display:flex;align-items:center;gap:5px;background:#f3f6fa;border-radius:8px;padding:4px 7px;font-size:.66rem}.global-holder-list b{width:21px;height:21px;border-radius:6px;background:#dce9fb;color:#2458a5;display:grid;place-items:center;font-size:.52rem}.global-holder-list em{font-size:.68rem;color:#98a2b3}.global-structure-grid article>button{justify-self:start;border:0;border-radius:8px;background:#edf4ff;color:#1765cc;padding:7px 9px;font-size:.7rem;font-weight:700}.global-structure-card>.role-member-empty{padding:20px}
@media(max-width:767.98px){.global-structure-card>header{align-items:flex-start}.global-structure-card>header>small{display:none}.global-structure-grid{grid-template-columns:1fr}}
.group-cash-section>header>div>span{background:#e8f7ee;color:#16814c}.group-cash-no-access{display:flex;align-items:center;gap:11px;margin-top:14px;padding:17px;background:#f5f6f8;border-radius:11px;color:#687386}.group-cash-no-access>i{width:39px;height:39px;display:grid;place-items:center;border-radius:10px;background:#e7e9ed}.group-cash-no-access>div{display:grid}.group-cash-no-access strong{font-size:.82rem}.group-cash-no-access span{font-size:.7rem}.group-cash-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-top:14px}.group-cash-summary article{display:flex;align-items:center;gap:9px;padding:11px;background:#f8fafc;border-radius:11px}.group-cash-summary article>span{width:34px;height:34px;display:grid;place-items:center;border-radius:9px}.group-cash-summary .in{background:#e7f7ed;color:#16814c}.group-cash-summary .out{background:#feecec;color:#d92d20}.group-cash-summary .balance{background:#eaf2ff;color:#1765cc}.group-cash-summary article>div{display:grid}.group-cash-summary small{font-size:.61rem;color:#8490a1}.group-cash-summary strong{font-size:.77rem}.group-cash-table{display:grid;margin-top:12px;border-top:1px solid #e8ecf1}.group-cash-table>article{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:10px;padding:10px 3px;border-bottom:1px solid #edf0f3}.group-cash-table>article>span{width:33px;height:33px;display:grid;place-items:center;border-radius:9px}.group-cash-table>article>span.in{background:#e7f7ed;color:#16814c}.group-cash-table>article>span.out{background:#feecec;color:#d92d20}.group-cash-table>article>div{display:grid}.group-cash-table>article>div strong{font-size:.78rem}.group-cash-table>article>div small{font-size:.66rem;color:#87909e}.group-cash-table>article>b{font-size:.76rem}.group-cash-table>article>b.in{color:#16814c}.group-cash-table>article>b.out{color:#d92d20}.group-cash-table footer{display:flex;gap:5px}.group-cash-table footer button{width:30px;height:30px;border:0;border-radius:8px;background:#edf4ff;color:#1765cc}.group-cash-table footer .danger{background:#feecec;color:#d92d20}.group-cash-type{grid-template-columns:1fr 1fr!important}.group-cash-type button{border:1px solid #d8dee7;background:#fff;border-radius:9px;padding:9px;font-weight:700;color:#687386}.group-cash-type button.active{border-color:#4ead79;background:#ecf8f1;color:#16814c}.group-cash-type button.expense.active{border-color:#e47d75;background:#fff0ef;color:#d92d20}
@media(max-width:767.98px){.group-cash-summary{grid-template-columns:1fr}.group-cash-table>article{grid-template-columns:auto 1fr auto}.group-cash-table>article>footer{grid-column:2/-1;justify-content:flex-end}.group-cash-type{grid-template-columns:1fr 1fr!important}}
.group-member-search-trigger{width:100%;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;text-align:left;border:1px solid #dce2ea;background:#f8fafc;border-radius:11px;padding:10px 12px;color:#697586}.group-member-search-trigger>i:first-child{width:34px;height:34px;display:grid;place-items:center;border-radius:9px;background:#eaf2ff;color:#1765cc}.group-member-search-trigger>span{display:grid}.group-member-search-trigger strong{font-size:.8rem;color:#344054}.group-member-search-trigger small{font-size:.68rem;color:#87909e}.group-member-search-trigger>i:last-child{font-size:.7rem}.group-member-picker-backdrop{position:fixed;inset:0;z-index:1090;background:rgba(15,23,42,.55);display:grid;place-items:center;padding:18px;backdrop-filter:blur(2px)}.group-member-picker-modal{width:min(620px,100%);max-height:calc(100vh - 36px);background:#fff;border-radius:17px;box-shadow:0 22px 70px rgba(15,23,42,.3);display:flex;flex-direction:column;overflow:hidden}.group-member-picker-modal>header{display:flex;justify-content:space-between;align-items:flex-start;padding:17px 19px;border-bottom:1px solid #e7ebf0}.group-member-picker-modal>header>div{display:flex;align-items:center;gap:10px}.group-member-picker-modal>header>div>span{width:39px;height:39px;display:grid;place-items:center;border-radius:10px;background:#eaf2ff;color:#1765cc}.group-member-picker-modal h4{font-size:1rem;margin:0}.group-member-picker-modal header p{font-size:.7rem;color:#87909e;margin:2px 0}.group-member-picker-modal>header>button{width:33px;height:33px;border:0;border-radius:50%;background:#eef1f4}.group-member-picker-modal>.group-modal-search{margin:13px 16px}.group-member-picker-modal>.group-member-picker{margin:0 16px;max-height:390px;border-radius:11px}.group-member-picker-modal .group-member-picker>label{display:grid;grid-template-columns:auto auto 1fr auto}.group-member-picker-modal .group-member-picker>label>.picker-avatar{width:34px;min-width:34px;height:34px;display:grid;place-items:center;border-radius:9px;background:#edf2f8;color:#52677e;font-size:.62rem;font-weight:800}.group-member-picker-modal .group-member-picker>label>span:nth-of-type(2){display:grid;justify-content:stretch;gap:1px}.group-member-picker-modal .group-member-picker>label>span:nth-of-type(2) small{font-size:.67rem}.group-member-picker-modal .picker-check{color:transparent;font-size:.7rem}.group-member-picker-modal .group-member-picker>label.active .picker-check{color:#1765cc}.group-member-picker-modal>footer{display:flex;justify-content:space-between;align-items:center;padding:13px 17px;border-top:1px solid #e7ebf0;margin-top:13px}.group-member-picker-modal>footer>span{font-size:.72rem;color:#687386}.group-member-picker-modal>footer>button{border:0;border-radius:9px;background:#1765cc;color:#fff;padding:9px 13px;font-weight:700;font-size:.76rem}.group-member-picker-modal>footer>button i{margin-right:5px}
@media(max-width:767.98px){.group-member-picker-backdrop{padding:0;align-items:end}.group-member-picker-modal{max-height:92vh;border-radius:17px 17px 0 0}.group-member-picker-modal>.group-member-picker{max-height:55vh}}
.role-primary-button.secondary{background:#fff;color:#1765cc;border:1px solid #bfd5f5;box-shadow:none}.role-table-card{background:#fff;border:1px solid #e1e6ed;border-radius:16px;overflow:hidden;box-shadow:0 4px 16px rgba(15,23,42,.04)}.role-table-card table{width:100%;border-collapse:collapse;min-width:880px}.role-table-card th{padding:12px 14px;background:#f8fafc;color:#697586;font-size:.68rem;text-transform:uppercase;letter-spacing:.04em;border-bottom:1px solid #e5e9ef}.role-table-card td{padding:12px 14px;border-bottom:1px solid #edf0f3;font-size:.76rem}.role-table-card tr:last-child td{border-bottom:0}.role-table-identity{display:flex;align-items:center;gap:9px}.role-table-identity>span{width:34px;height:34px;border-radius:9px;background:#eaf2ff;color:#1765cc;display:grid;place-items:center}.role-table-identity>div{display:grid}.role-table-identity strong{font-size:.8rem}.role-table-identity small{font-size:.66rem;color:#8490a1}.role-table-status{border-radius:99px;padding:4px 8px;font-size:.66rem;font-weight:800}.role-table-status.active{background:#e7f7ed;color:#16814c}.role-table-status.inactive{background:#eef0f3;color:#737d8b}.role-permission-count{border:0;background:#eef4ff;color:#1765cc;border-radius:8px;padding:5px 8px}.role-permission-count strong{margin-right:4px}.role-reports-to{font-size:.71rem;color:#536174}.role-table-actions{display:flex;justify-content:flex-end;gap:5px}.role-table-actions button{width:31px;height:31px;border:0;border-radius:8px;background:#edf4ff;color:#1765cc}.role-table-actions button.danger{background:#feecec;color:#d92d20}.global-structure-modal{width:min(1050px,100%)}.global-structure-modal>footer{padding:14px 20px;border-top:1px solid #e7ebf0}.global-structure-body{padding:17px 20px;overflow:auto}.global-hierarchy-preview{border:1px solid #dfe5ed;background:#f8fafc;border-radius:12px;padding:12px;margin-bottom:13px}.global-hierarchy-preview>strong{display:block;font-size:.76rem;color:#526072;margin-bottom:7px}.global-hierarchy-preview>div{display:flex;align-items:center;gap:8px;padding:5px}.global-hierarchy-preview>div>i{width:23px;color:#1765cc;text-align:center}.global-hierarchy-preview>div>span{display:grid}.global-hierarchy-preview b{font-size:.72rem}.global-hierarchy-preview small{font-size:.63rem;color:#8490a1}.global-structure-editor{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.global-structure-editor>article{border:1px solid #e0e6ed;border-radius:12px;padding:12px;display:grid;gap:10px}.global-structure-editor article>header{display:flex;justify-content:space-between;align-items:center}.global-structure-editor article>header>div{display:flex;align-items:center;gap:8px}.global-structure-editor article>header>div>span{width:32px;height:32px;border-radius:9px;background:#eaf2ff;color:#1765cc;display:grid;place-items:center}.global-structure-editor article>header>div>div{display:grid}.global-structure-editor article>header strong{font-size:.78rem}.global-structure-editor article>header small{font-size:.63rem;color:#8490a1}.global-structure-editor article>header>button{border:0;border-radius:8px;background:#edf4ff;color:#1765cc;padding:6px 8px;font-size:.65rem;font-weight:700}.global-structure-editor label{display:grid;gap:5px;font-size:.69rem;font-weight:700;color:#5c6878}.global-structure-editor select,.global-structure-editor textarea{width:100%;border:1px solid #d8dee7;border-radius:8px;padding:8px 9px;font-size:.72rem;outline:none}.global-structure-editor textarea{resize:vertical}
@media(max-width:767.98px){.role-toolbar{flex-wrap:wrap}.role-toolbar>div{width:100%}.role-primary-button.secondary span{display:none}.role-table-card{background:transparent;border:0;box-shadow:none;overflow:visible}.role-table-card .table-responsive{overflow:visible}.role-table-card table,.role-table-card tbody,.role-table-card tr,.role-table-card td{display:block;min-width:0}.role-table-card thead{display:none}.role-table-card tr{background:#fff;border:1px solid #e1e6ed;border-radius:13px;padding:11px;margin-bottom:9px}.role-table-card td{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:7px 3px;border:0}.role-table-card td:before{content:attr(data-label);font-size:.64rem;color:#8a94a3;text-transform:uppercase}.role-table-card td:first-child{display:block;padding-bottom:10px;border-bottom:1px solid #edf0f3}.role-table-card td:first-child:before{display:none}.role-table-actions{justify-content:flex-end}.global-structure-editor{grid-template-columns:1fr}.global-structure-body{padding:14px}.global-structure-modal{max-height:94vh}}
.group-role-catalog{grid-template-columns:1fr}.group-detail-org-list>div>div small{font-size:.62rem;color:#8a94a3;margin-top:2px}
.global-hierarchy-empty{margin:4px 0 0;color:#8a94a3;font-size:.68rem}.global-hierarchy-preview small>span{display:inline}
.group-role-tree{display:grid;gap:8px;margin-top:11px}.group-role-tree>article{border:1px solid #dce2e9;background:#fff;border-radius:11px;overflow:hidden;transition:.18s}.group-role-tree>article.active{border-color:#8db9f2;background:#f6f9ff}.group-role-tree>article.filled{border-color:#86cba7}.group-role-tree-toggle{width:100%;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:9px;text-align:left;border:0;background:transparent;padding:10px;color:#5f6b7a}.group-role-tree-toggle>i{width:29px;height:29px;border-radius:8px;background:#f0f2f5;display:grid;place-items:center;font-size:.65rem}.group-role-tree>article.active .group-role-tree-toggle>i{background:#1765cc;color:#fff}.group-role-tree-toggle>span:nth-child(2){display:grid}.group-role-tree-toggle strong{font-size:.77rem;color:#344054}.group-role-tree-toggle small{font-size:.65rem;color:#87909e}.group-role-tree-status{font-size:.62rem;font-weight:800;border-radius:99px;padding:4px 8px;background:#eef1f5;color:#687386;white-space:nowrap}.group-role-tree>article.filled .group-role-tree-status{background:#e3f5eb;color:#16804a}.group-role-tree-holders{padding:9px 11px 11px 49px;border-top:1px solid #e2e8f0}.group-role-tree-holders>p{margin:0 0 7px;font-size:.66rem;color:#687386;font-weight:700}.group-role-tree-holders>p i{color:#1765cc;margin-right:4px}@media(max-width:575.98px){.group-role-tree>article{margin-left:0!important}.group-role-tree-toggle{grid-template-columns:auto minmax(0,1fr)}.group-role-tree-status{grid-column:2}.group-role-tree-holders{padding-left:12px}}
.role-table-card table{min-width:760px}
.group-selected-members{max-height:170px;overflow-y:auto;align-content:flex-start}.group-role-tree-holders .group-role-holder-options{max-height:170px;overflow-y:auto;align-content:flex-start;padding:2px 5px 2px 0;scrollbar-gutter:stable}.group-selected-members::-webkit-scrollbar,.group-role-tree-holders .group-role-holder-options::-webkit-scrollbar{width:6px}.group-selected-members::-webkit-scrollbar-thumb,.group-role-tree-holders .group-role-holder-options::-webkit-scrollbar-thumb{background:#c7d0dc;border-radius:99px}.group-selected-members::-webkit-scrollbar-track,.group-role-tree-holders .group-role-holder-options::-webkit-scrollbar-track{background:transparent}@media(max-width:575.98px){.group-selected-members{max-height:145px}.group-role-tree-holders .group-role-holder-options{max-height:190px}}
.group-role-holder-search{display:flex;align-items:center;gap:7px;margin:0 0 8px;padding:7px 9px;border:1px solid #d8e0ea;border-radius:8px;background:#fff;color:#87909e}.group-role-holder-search:focus-within{border-color:#7aaaea;box-shadow:0 0 0 3px rgba(23,101,204,.09)}.group-role-holder-search input{width:100%;min-width:0;border:0;outline:0;background:transparent;font-size:.69rem;color:#344054}.group-role-holder-search i{font-size:.65rem}
.group-role-selected-holders{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}.group-role-selected-holders>span{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:6px;padding:5px 6px;border:1px solid #acd7bf;border-radius:8px;background:#edf9f2}.group-role-selected-holders b{width:25px;height:25px;display:grid;place-items:center;border-radius:7px;background:#d6f0e1;color:#167344;font-size:.56rem}.group-role-selected-holders strong{font-size:.68rem;color:#315143}.group-role-selected-holders button{width:22px;height:22px;border:0;border-radius:6px;background:transparent;color:#6f8178;font-size:.62rem}.group-role-holder-autocomplete{position:relative}.group-role-holder-autocomplete .group-role-holder-search{margin-bottom:0}.group-role-holder-results{margin-top:5px;max-height:230px;overflow-y:auto;border:1px solid #dce3ec;border-radius:9px;background:#fff;box-shadow:0 8px 20px rgba(15,23,42,.09)}.group-role-holder-results>button{width:100%;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px;padding:8px 9px;border:0;border-bottom:1px solid #edf0f4;background:#fff;text-align:left}.group-role-holder-results>button:last-of-type{border-bottom:0}.group-role-holder-results>button:hover{background:#f3f7fd}.group-role-holder-results>button>span:first-child{width:29px;height:29px;display:grid;place-items:center;border-radius:8px;background:#edf3fb;color:#426181;font-size:.59rem;font-weight:800}.group-role-holder-results>button>span:nth-child(2){display:grid}.group-role-holder-results strong{font-size:.69rem;color:#344054}.group-role-holder-results small{font-size:.61rem;color:#87909e}.group-role-holder-results>button>i{color:#1765cc;font-size:.65rem}.group-role-holder-results>small{display:block;padding:12px;text-align:center;color:#87909e;font-size:.67rem}
.cashflow-filter-card{grid-template-columns:auto repeat(5,minmax(120px,1fr)) auto}.cashflow-scope-badge{display:inline-flex;align-items:center;border-radius:99px;padding:4px 8px;background:#eef4ff;color:#1765cc;font-size:.65rem;font-weight:800;white-space:nowrap}.cashflow-scope-badge.global{background:#f0eaff;color:#7041b5}@media(max-width:991.98px){.cashflow-filter-card{grid-template-columns:repeat(2,minmax(0,1fr))}.cashflow-filter-title{grid-column:1/-1}}
.cashflow-pagination{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 15px;border-top:1px solid #e8ecf1;color:#778195;font-size:.72rem}.cashflow-pagination>div{display:flex;gap:7px}.cashflow-pagination button{display:inline-flex;align-items:center;gap:7px;border:1px solid #d7dee8;border-radius:8px;background:#fff;color:#475467;padding:7px 10px;font-size:.7rem;font-weight:750}.cashflow-pagination button:not(:disabled):hover{border-color:#8bb4ea;background:#f1f6fd;color:#1765cc}.cashflow-pagination button:disabled{opacity:.45;cursor:not-allowed}@media(max-width:575.98px){.cashflow-pagination button span{display:none}.cashflow-pagination button{width:34px;height:34px;justify-content:center;padding:0}}