/* GODSON CRM — WhatsApp and Email menus. Uses the CRM's Poppins/Lora look, navy, gold and green. */
.hub-root { --hub-navy: #104449; --hub-ink: #1f4144; --hub-muted: #688588; --hub-line: #d5eae3; --hub-card: #ffffff; --hub-soft: #f4f9f7; --hub-green: #2f9a77; --hub-gold: #fb8034; --hub-red: #c4574a;
  display: block; margin-bottom: 22px; color: var(--hub-ink); }
.hub-root .hub-icon { width: 16px; height: 16px; flex: none; }
.hub-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.hub-head .btn { display: inline-flex; align-items: center; gap: 6px; }
.hub-tabs { display: flex; gap: 6px; margin: 16px 0 18px; padding: 5px; border-radius: 16px; background: var(--hub-soft); border: 1px solid var(--hub-line); overflow-x: auto; scrollbar-width: none; }
.hub-tabs button { display: inline-flex; align-items: center; gap: 7px; flex: none; border: 0; background: transparent; color: var(--hub-muted); font: 600 .86rem/1 inherit; padding: 11px 15px; border-radius: 12px; cursor: pointer; min-height: 44px; }
.hub-tabs button[aria-selected="true"] { background: var(--hub-navy); color: #ffffff; box-shadow: 0 6px 16px #10444933; }
.hub-tabs button:not([aria-selected="true"]):hover { background: #ffffff; color: var(--hub-navy); }
.hub-gate { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 16px; margin-bottom: 16px; border: 1px solid #cfe9dc; background: #f1faf5; }
.hub-gate.warn { border-color: #f4c3a4; background: #fff3eb; }
.hub-gate .hub-icon { width: 22px; height: 22px; color: var(--hub-green); margin-top: 2px; }
.hub-gate.warn .hub-icon { color: #b85010; }
.hub-gate strong { display: block; font-size: .95rem; }
.hub-gate p { margin: 3px 0 0; color: var(--hub-muted); font-size: .84rem; line-height: 1.5; }
.hub-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 14px; }
.hub-kpi { padding: 16px; border-radius: 16px; background: var(--hub-card); border: 1px solid var(--hub-line); display: grid; gap: 4px; }
.hub-kpi span { color: var(--hub-muted); font-size: .8rem; font-weight: 600; }
.hub-kpi b { font: 700 1.9rem/1.1 Lora, Georgia, serif; color: var(--hub-navy); }
.hub-kpi small { color: var(--hub-muted); font-size: .74rem; }
.hub-kpi.green b { color: var(--hub-green); } .hub-kpi.red b { color: var(--hub-red); } .hub-kpi.grey b { color: #89a1a3; }
.hub-card { background: var(--hub-card); border: 1px solid var(--hub-line); border-radius: 18px; padding: 16px 18px; min-width: 0; }
.hub-card > header { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.hub-card h3 { margin: 0; font: 700 1.05rem Lora, Georgia, serif; color: var(--hub-navy); }
.hub-card header small { color: var(--hub-muted); font-size: .78rem; }
.hub-limit { display: flex; align-items: center; gap: 18px; margin-bottom: 14px; flex-wrap: wrap; }
.hub-limit > div:first-child { display: grid; gap: 2px; min-width: 220px; }
.hub-limit small { color: var(--hub-muted); font-size: .78rem; }
.hub-bar { flex: 1; min-width: 160px; height: 10px; border-radius: 99px; background: #e1f0eb; overflow: hidden; }
.hub-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--hub-green), #6cc3a1); }
.hub-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.hub-wide { grid-column: 1 / -1; }
.hub-chart { width: 100%; height: auto; display: block; }
.hub-chart text { font: 10px Poppins, sans-serif; fill: var(--hub-muted); }
.hub-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .74rem; color: var(--hub-muted); margin-top: 6px; }
.hub-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--c); margin-right: -8px; transform: translateY(1px); }
.hub-stats { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.hub-stats li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px dashed var(--hub-line); font-size: .86rem; }
.hub-stats li:last-child { border-bottom: 0; }
.hub-stats span small { display: block; color: var(--hub-muted); font-size: .72rem; }
.hub-stats b { font-size: 1rem; color: var(--hub-navy); }
.hub-tpl { font-size: .72rem !important; padding: 4px 9px; border-radius: 99px; }
.hub-tpl.ok { background: #e7f4ec; color: #2f7a55 !important; } .hub-tpl.wait { background: #fff0e5; color: #a14b16 !important; }
.hub-note { font-size: .76rem; margin: 10px 0 0; }
.hub-link { border: 0; background: none; color: #0b656b; font: 600 .8rem inherit; cursor: pointer; padding: 6px 0; }
.hub-pipe { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.hub-pipe button { width: 100%; display: grid; grid-template-columns: 110px 1fr 44px; align-items: center; gap: 10px; border: 0; background: none; padding: 6px 4px; border-radius: 10px; cursor: pointer; font: inherit; color: inherit; text-align: left; min-height: 36px; }
.hub-pipe button:hover { background: var(--hub-soft); }
.hub-pipe span { font-size: .82rem; font-weight: 600; }
.hub-pipe i { display: block; height: 10px; border-radius: 99px; min-width: 4px; background: #cadbdc; }
.hub-pipe b { text-align: right; color: var(--hub-navy); }
.hub-pipe .fresh, .hub-lead.fresh, .hub-lead-select.fresh { background: #e9f9fa; color: #349098; }
.hub-pipe .contacted, .hub-lead.contacted, .hub-lead-select.contacted { background: #eef2f3; color: #4d6668; }
.hub-pipe .follow_up, .hub-lead.follow_up, .hub-lead-select.follow_up { background: #fff0e5; color: #903f0c; }
.hub-pipe .interested, .hub-lead.interested, .hub-lead-select.interested { background: #e6f5ee; color: #2f7a55; }
.hub-pipe .donated, .hub-lead.donated, .hub-lead-select.donated { background: #fff0e5; color: #903f0c; }
.hub-pipe .not_interested, .hub-lead.not_interested, .hub-lead-select.not_interested { background: #f6eceb; color: #9b4b43; }
.hub-pipe .do_not_contact, .hub-lead.do_not_contact, .hub-lead-select.do_not_contact { background: #2c3535; color: #ffffff; }
.hub-pipe i.fresh { background: #83d1d8; } .hub-pipe i.contacted { background: #9bb1b3; } .hub-pipe i.follow_up { background: var(--hub-gold); } .hub-pipe i.interested { background: var(--hub-green); }
.hub-pipe i.donated { background: #e17532; } .hub-pipe i.not_interested { background: #d58b82; } .hub-pipe i.do_not_contact { background: #4c5d5f; }
.hub-camps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.hub-camps li { display: grid; gap: 2px; padding-bottom: 10px; border-bottom: 1px dashed var(--hub-line); }
.hub-camps small { color: var(--hub-muted); font-size: .76rem; }
.hub-filters { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.hub-filters label { display: grid; gap: 4px; font-size: .78rem; font-weight: 600; color: var(--hub-muted); }
.hub-search { flex: 1; min-width: 220px; }
.hub-filters input, .hub-filters select, .hub-form input, .hub-form select, .hub-form textarea, .hub-date, .hub-lead-select {
  font: 500 .9rem Poppins, sans-serif; color: var(--hub-ink); border: 1px solid #deccc1; border-radius: 12px; padding: 10px 12px; background: #ffffff; min-height: 44px; box-sizing: border-box; width: 100%; }
.hub-filters .btn, .hub-actions .btn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
.hub-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.hub-chips > button, .hub-chip span { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #deccc1; background: #ffffff; color: var(--hub-ink); font: 600 .8rem inherit; padding: 8px 12px; border-radius: 99px; cursor: pointer; min-height: 38px; box-sizing: border-box; }
.hub-chips > button[aria-pressed="true"] { background: var(--hub-navy); color: #ffffff; border-color: var(--hub-navy); }
.hub-chip input { position: absolute; opacity: 0; pointer-events: none; }
.hub-chip input:checked + span { background: var(--hub-navy); color: #ffffff; border-color: var(--hub-navy); }
.hub-chip input:focus-visible + span { outline: 2px solid var(--hub-gold); outline-offset: 2px; }
.hub-count { color: var(--hub-muted); font-size: .82rem; margin: 0 0 8px; }
.hub-table-wrap { overflow-x: auto; border: 1px solid var(--hub-line); border-radius: 16px; background: #ffffff; -webkit-overflow-scrolling: touch; }
.hub-table { width: 100%; border-collapse: collapse; font-size: .84rem; }
.hub-table th { text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--hub-muted); background: var(--hub-soft); padding: 10px 12px; white-space: nowrap; }
.hub-table td { padding: 10px 12px; border-top: 1px solid #e1f0eb; vertical-align: middle; }
.hub-table td small { display: block; color: var(--hub-muted); font-size: .72rem; margin-top: 2px; }
.hub-table a { color: #0b656b; font-weight: 600; text-decoration: none; }
.hub-lead { display: inline-block; padding: 5px 10px; border-radius: 99px; font-size: .76rem; font-weight: 700; }
.hub-lead-select { width: auto; min-width: 140px; font-weight: 700; font-size: .8rem; border: 0; cursor: pointer; }
.hub-date { width: auto; min-width: 140px; }
.hub-consent { display: inline-block; padding: 4px 9px; border-radius: 99px; font-size: .74rem; font-weight: 700; background: #eef2f3; color: #4d6668; }
.hub-consent.ok { background: #e7f4ec; color: #2f7a55; } .hub-consent.no { background: #f6eceb; color: #9b4b43; }
.hub-pager { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 12px; font-size: .82rem; color: var(--hub-muted); }
.hub-empty { text-align: center; padding: 40px 16px; color: var(--hub-muted); background: #ffffff; border: 1px dashed #deccc1; border-radius: 18px; }
.hub-empty .hub-icon { width: 34px; height: 34px; color: var(--hub-gold); }
.hub-empty h3 { margin: 8px 0 4px; color: var(--hub-navy); font-family: Lora, Georgia, serif; }
.hub-error { padding: 12px 14px; border-radius: 12px; background: #f6eceb; color: #7f3a33; margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.hub-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.hub-form label, .hub-form fieldset { display: grid; gap: 5px; font-size: .8rem; font-weight: 600; color: var(--hub-muted); min-width: 0; }
.hub-form fieldset { border: 0; padding: 0; margin: 0; }
.hub-form legend { font-size: .8rem; font-weight: 600; margin-bottom: 6px; }
.hub-form small { font-weight: 400; font-size: .74rem; }
.hub-form textarea { resize: vertical; line-height: 1.5; }
.hub-full { grid-column: 1 / -1; }
.hub-preview { display: grid; gap: 8px; padding: 14px; border-radius: 14px; background: #d9ece6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Ccircle cx='2' cy='2' r='1' fill='%23d8d0c2'/%3E%3C/svg%3E"); }
.hub-bubble { justify-self: start; max-width: min(420px, 100%); background: #dcf8c6; border-radius: 4px 14px 14px 14px; padding: 10px 12px; box-shadow: 0 1px 1px #00000011; }
.hub-bubble p { margin: 0 0 6px; font-size: .88rem; line-height: 1.5; color: #1f2d1f; overflow-wrap: anywhere; }
.hub-bubble small, .hub-email small { color: #567072; font-size: .72rem; }
.hub-email { background: #ffffff; border-radius: 12px; padding: 14px; display: grid; gap: 6px; box-shadow: 0 1px 2px #00000011; }
.hub-email p { margin: 0; font-size: .88rem; line-height: 1.55; overflow-wrap: anywhere; }
.hub-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.hub-actions .btn-primary { margin-left: auto; }
.hub-audience { display: grid; gap: 2px; padding: 8px 12px; border-radius: 12px; background: #f1faf5; border: 1px solid #cfe9dc; }
.hub-audience small { color: var(--hub-muted); font-size: .74rem; }
.hub-spinner { display: inline-block; width: 26px; height: 26px; border-radius: 50%; border: 3px solid #e1f0eb; border-top-color: var(--hub-gold); animation: hub-spin 1s linear infinite; }
@keyframes hub-spin { to { transform: rotate(360deg); } }
.hub-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 1000; background: var(--hub-navy, #104449); color: #ffffff; padding: 12px 18px; border-radius: 14px; font: 500 .88rem Poppins, sans-serif; box-shadow: 0 12px 30px #00000033; max-width: min(92vw, 520px); }
.hub-nav-item { display: contents; }
/* The Email menu replaces the CRM's "page not found" card. */
.hub-email-page main.main > :not(.hub-root):not(.roaming-companion) { display: none !important; }
@media (max-width: 760px) {
  .hub-grid, .hub-form { grid-template-columns: 1fr; }
  .hub-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hub-kpi b { font-size: 1.5rem; }
  .hub-filters input, .hub-filters select, .hub-form input, .hub-form select, .hub-form textarea, .hub-date, .hub-lead-select { font-size: 16px; }
  .hub-table thead { display: none; }
  .hub-table, .hub-table tbody, .hub-table tr, .hub-table td { display: block; width: 100%; box-sizing: border-box; }
  .hub-table tr { padding: 10px 12px; border-top: 1px solid #e1f0eb; }
  .hub-table td { border: 0; padding: 5px 0; display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 8px; align-items: center; }
  .hub-table td::before { content: attr(data-label); color: var(--hub-muted); font-size: .72rem; font-weight: 600; }
  .hub-table td:not([data-label]) { display: block; }
  .hub-table-wrap { overflow: visible; }
  .hub-actions .btn-primary { margin-left: 0; width: 100%; justify-content: center; }
  .hub-pipe button { grid-template-columns: 96px 1fr 36px; }
}

/* v9.6: report periods and editable daily limit */
.hub-report-filters input[type=date] { min-width: 150px; }
.hub-range { margin: -4px 0 12px; }
.hub-limit .hub-bar { flex: 1 1 200px; }
.hub-limit-form { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; flex-basis: 100%; }
.hub-limit-form label { display: grid; gap: 4px; font-size: .78rem; font-weight: 600; color: var(--hub-muted); }
.hub-limit-form input { width: 140px; min-height: 40px; border: 1px solid #dacbc1; border-radius: 10px; padding: 6px 10px; font: inherit; }
.hub-limit-form .hub-limit-hint { flex-basis: 100%; color: var(--hub-muted); font-size: .78rem; }
@media (max-width: 720px) { .hub-limit-form input { font-size: 16px; width: 120px; } .hub-report-filters label { flex: 1 1 140px; } .hub-report-filters select, .hub-report-filters input { width: 100%; } }