/* ═══════════════════════════════════════════════════════════
   WW Network Members — Frontend Styles
   Sony sound, Fisher Price controls.
   ═══════════════════════════════════════════════════════════ */

/* ── Reset / Base ──────────────────────────────────────── */
.wwn-wrap { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif; color: #2c3e50; line-height: 1.5; max-width: 1100px; margin: 0 auto; }
.wwn-wrap *, .wwn-wrap *::before, .wwn-wrap *::after { box-sizing: border-box; }
.wwn-wrap [x-cloak] { display: none !important; }
.wwn-wrap h2 { font-size: 1.35rem; font-weight: 600; margin: 0 0 .75rem; color: #1a1a2e; }
.wwn-wrap h3 { font-size: 1.1rem; font-weight: 600; margin: 0 0 .5rem; color: #1a1a2e; }
.wwn-wrap h4 { font-size: .95rem; font-weight: 600; margin: 0 0 .5rem; color: #444; }
.wwn-wrap p { margin: 0 0 .5rem; }

/* ── Header ────────────────────────────────────────────── */
.wwn-header { background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); color: #fff; border-radius: 8px 8px 0 0; padding: 14px 20px; }
.wwn-header-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
.wwn-chapter-name { font-size: 1.2rem; font-weight: 700; letter-spacing: .3px; }
.wwn-header-actions { font-size: .9rem; }
.wwn-header-actions strong { color: #a8d8ea; }

/* ── Tabs ──────────────────────────────────────────────── */
.wwn-tabs { display: flex; flex-wrap: wrap; gap: 0; background: #f0f2f5; border-bottom: 2px solid #dfe3e8; padding: 0 8px; }
.wwn-tab { padding: 10px 18px; border: none; background: none; font-size: .9rem; font-weight: 500; color: #5a6270; cursor: pointer; border-bottom: 3px solid transparent; transition: all .15s; margin-bottom: -2px; }
.wwn-tab:hover { color: #1a1a2e; background: rgba(26, 26, 46, .04); }
.wwn-tab.active { color: #1a1a2e; border-bottom-color: #2563eb; font-weight: 600; }
.wwn-tab-right { margin-left: auto; }

.wwn-sub-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 16px; padding: 8px 0; }
.wwn-sub-tab { padding: 6px 14px; border: 1px solid #dfe3e8; border-radius: 20px; background: #fff; font-size: .82rem; font-weight: 500; color: #5a6270; cursor: pointer; transition: all .15s; }
.wwn-sub-tab.active { background: #1a1a2e; color: #fff; border-color: #1a1a2e; }

/* ── Card ──────────────────────────────────────────────── */
.wwn-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 0 0 8px 8px; padding: 24px; margin-bottom: 16px; }
.wwn-card + .wwn-card { border-radius: 8px; }

/* ── Flash Message ─────────────────────────────────────── */
.wwn-flash { padding: 12px 18px; border-radius: 6px; margin: 12px 0; font-size: .9rem; font-weight: 500; }
.wwn-flash-success { background: #d1fae5; color: #065f46; border: 1px solid #6ee7b7; }
.wwn-flash-error { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }

/* ── Notice ────────────────────────────────────────────── */
.wwn-notice { background: #fef3c7; color: #92400e; padding: 10px 14px; border-radius: 6px; border: 1px solid #fbbf24; font-size: .88rem; margin-bottom: 16px; }
.wwn-error { color: #dc2626; font-size: .88rem; margin: 6px 0; }
.wwn-success { color: #059669; font-size: .88rem; margin: 6px 0; }
.wwn-loading, .wwn-empty { text-align: center; padding: 40px; color: #9ca3af; font-size: .95rem; }

/* ── Forms ─────────────────────────────────────────────── */
.wwn-field { margin-bottom: 16px; }
.wwn-field > label { display: block; font-size: .85rem; font-weight: 600; color: #374151; margin-bottom: 4px; }
.wwn-req { color: #dc2626; }
.wwn-input, .wwn-select, .wwn-textarea { width: 100%; padding: 9px 12px; border: 1px solid #d1d5db; border-radius: 6px; font-size: .9rem; color: #1f2937; background: #fff; transition: border-color .15s, box-shadow .15s; font-family: inherit; }
.wwn-input:focus, .wwn-select:focus, .wwn-textarea:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, .1); }
.wwn-textarea { resize: vertical; min-height: 70px; }
.wwn-select { appearance: auto; }
.wwn-file-input { font-size: .88rem; }
.wwn-file-input + small { display: block; color: #9ca3af; font-size: .78rem; margin-top: 2px; }
.wwn-vis-select { width: auto; padding: 3px 8px; font-size: .78rem; border-radius: 4px; }
.wwn-select-sm { width: auto; padding: 6px 8px; font-size: .85rem; }
.wwn-input-inline { border: none; border-bottom: 1px solid #d1d5db; border-radius: 0; padding: 4px 6px; width: 160px; font-size: .85rem; }

/* ── Buttons ───────────────────────────────────────────── */
.wwn-btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 20px; border: none; border-radius: 6px; font-size: .9rem; font-weight: 600; cursor: pointer; transition: all .15s; font-family: inherit; text-decoration: none; }
.wwn-btn:disabled { opacity: .5; cursor: not-allowed; }
.wwn-btn-primary { background: #2563eb; color: #fff; }
.wwn-btn-primary:hover:not(:disabled) { background: #1d4ed8; }
.wwn-btn-secondary { background: #f3f4f6; color: #374151; border: 1px solid #d1d5db; }
.wwn-btn-secondary:hover:not(:disabled) { background: #e5e7eb; }
.wwn-btn-danger { background: #fee2e2; color: #dc2626; }
.wwn-btn-danger:hover { background: #fecaca; }
.wwn-btn-success { background: #d1fae5; color: #065f46; }
.wwn-btn-muted { background: #f3f4f6; color: #9ca3af; }
.wwn-btn-sm { padding: 6px 12px; font-size: .82rem; }
.wwn-btn-xs { padding: 4px 10px; font-size: .78rem; border-radius: 4px; }
.wwn-btn-icon { background: none; border: none; color: #9ca3af; cursor: pointer; font-size: 1rem; padding: 4px; }
.wwn-btn-icon:hover { color: #dc2626; }
.wwn-link-btn { background: none; border: none; color: #2563eb; cursor: pointer; text-decoration: underline; font-size: inherit; font-family: inherit; padding: 0; }
.wwn-link-btn:hover { color: #1d4ed8; }

/* ── Pills ─────────────────────────────────────────────── */
.wwn-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.wwn-pill { display: inline-flex; align-items: center; gap: 4px; padding: 7px 14px; border: 2px solid #d1d5db; border-radius: 24px; font-size: .85rem; font-weight: 500; color: #4b5563; background: #fff; cursor: pointer; transition: all .15s; font-family: inherit; }
.wwn-pill:hover { border-color: #2563eb; color: #2563eb; }
.wwn-pill.selected { background: #2563eb; color: #fff; border-color: #2563eb; }
.wwn-pill-sm { padding: 3px 10px; font-size: .78rem; cursor: default; }
.wwn-pill-removable { padding-right: 6px; }
.wwn-pill-removable button { background: none; border: none; color: inherit; cursor: pointer; font-size: .85rem; padding: 0 4px; opacity: .7; }
.wwn-pill-removable button:hover { opacity: 1; }

/* ── Toggles ───────────────────────────────────────────── */
.wwn-toggle { position: relative; display: inline-block; width: 44px; height: 24px; }
.wwn-toggle input { opacity: 0; width: 0; height: 0; }
.wwn-toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background: #d1d5db; border-radius: 24px; transition: .2s; }
.wwn-toggle-slider::before { content: ''; position: absolute; height: 18px; width: 18px; left: 3px; bottom: 3px; background: #fff; border-radius: 50%; transition: .2s; }
.wwn-toggle input:checked + .wwn-toggle-slider { background: #2563eb; }
.wwn-toggle input:checked + .wwn-toggle-slider::before { transform: translateX(20px); }
.wwn-toggle-sm { width: 36px; height: 20px; }
.wwn-toggle-sm .wwn-toggle-slider::before { height: 14px; width: 14px; }
.wwn-toggle-sm input:checked + .wwn-toggle-slider::before { transform: translateX(16px); }
.wwn-toggle-field { display: flex; align-items: center; gap: 12px; }

/* ── Profile Grid ──────────────────────────────────────── */
.wwn-profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; }
.wwn-profile-field { }
.wwn-field-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.wwn-field-header label { font-size: .85rem; font-weight: 600; color: #374151; }
.wwn-field-full { grid-column: 1 / -1; }
.wwn-contact-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.wwn-sms-label { display: flex; align-items: center; gap: 4px; font-size: .82rem; color: #6b7280; white-space: nowrap; }

/* ── Bar Chart ─────────────────────────────────────────── */
.wwn-chart-section { margin-top: 24px; padding-top: 20px; border-top: 1px solid #e5e7eb; }
.wwn-bar-chart { display: flex; flex-direction: column; gap: 8px; }
.wwn-bar-row { display: flex; align-items: center; gap: 10px; }
.wwn-bar-label { min-width: 140px; font-size: .85rem; font-weight: 500; color: #374151; text-align: right; }
.wwn-bar-track { flex: 1; background: #f3f4f6; border-radius: 4px; height: 22px; overflow: hidden; }
.wwn-bar-fill { height: 100%; background: linear-gradient(90deg, #2563eb, #3b82f6); border-radius: 4px; transition: width .4s ease; min-width: 2px; }
.wwn-bar-count { min-width: 30px; font-size: .85rem; font-weight: 600; color: #1f2937; }

/* ── Directory ─────────────────────────────────────────── */
.wwn-directory-controls { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; align-items: center; }
.wwn-search-input { max-width: 260px; }
.wwn-filter-select { width: auto; max-width: 200px; }
.wwn-email-bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 6px; margin-bottom: 16px; font-size: .88rem; }
.wwn-email-bar a { text-decoration: none; }
/* Text / SMS selection bar */
.wwn-sms-bar { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; background: #f0fdf4; border: 1px solid #86efac; border-radius: 6px; margin-bottom: 16px; font-size: .88rem; }
.wwn-sms-bar-top { display: flex; align-items: center; gap: 10px; }
.wwn-sms-message-input { width: 100%; box-sizing: border-box; }
.wwn-sms-bar-bottom { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.wwn-sms-warn { margin: 0; font-size: .8rem; color: #92400e; background: #fef3c7; border: 1px solid #fcd34d; border-radius: 4px; padding: 4px 8px; }
/* Individual links panel */
.wwn-sms-links-bar { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; background: #f0fdf4; border: 1px solid #86efac; border-radius: 6px; margin-bottom: 16px; font-size: .88rem; }
.wwn-sms-links-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wwn-sms-links-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.wwn-btn-sms { background: #16a34a !important; color: #fff !important; text-decoration: none; }
.wwn-btn-sms-sent { background: #d1d5db !important; color: #6b7280 !important; text-decoration: none; }
/* Dimmed cards with no SMS number in text mode */
.wwn-card-no-sms { opacity: .45; pointer-events: none; }
/* Segmented send button */
.wwn-btn-segment { display: inline-flex; border-radius: 6px; overflow: hidden; border: 1px solid #6b7280; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.wwn-btn-seg-l, .wwn-btn-seg-r { padding: 6px 13px; font-size: .82rem; font-weight: 500; cursor: pointer; border: none; background: #f9fafb; color: #374151; line-height: 1.4; transition: background .15s, color .15s; }
.wwn-btn-seg-l { border-right: 1px solid #6b7280; }
.wwn-btn-seg-l:hover, .wwn-btn-seg-r:hover { background: #16a34a; color: #fff; }
.wwn-directory-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.wwn-member-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 0; display: flex; flex-direction: column; transition: box-shadow .15s; position: relative; overflow: hidden; }
.wwn-member-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.wwn-card-checkbox { position: absolute; top: 8px; left: 8px; z-index: 2; background: rgba(255,255,255,.85); border-radius: 4px; padding: 2px 4px; cursor: pointer; }
.wwn-card-selectable .wwn-card-body { padding-top: 32px; }
.wwn-card-headshot { text-align: center; padding: 14px 14px 0; }
.wwn-card-headshot img { max-width: 150px; max-height: 210px; border-radius: 6px; object-fit: cover; }
.wwn-card-body { flex: 1; min-width: 0; padding: 14px 16px 8px; }
.wwn-card-logo { padding: 4px 16px 12px; text-align: right; }
.wwn-card-logo img { max-width: 150px; max-height: 150px; border-radius: 4px; object-fit: contain; }
.wwn-card-name { font-size: 1rem; font-weight: 700; color: #1a1a2e; margin: 0 0 2px; }
.wwn-card-category { font-size: .82rem; color: #2563eb; font-weight: 600; margin: 0 0 2px; }
.wwn-card-company { font-size: .88rem; color: #4b5563; margin: 0 0 6px; }
.wwn-card-detail { font-size: .82rem; color: #6b7280; margin: 2px 0; }
.wwn-card-detail a { color: #2563eb; text-decoration: none; }
.wwn-card-detail a:hover { text-decoration: underline; }
.wwn-icon { display: inline-block; font-size: .7rem; font-weight: 700; color: #9ca3af; text-transform: uppercase; min-width: 32px; letter-spacing: .3px; }
.wwn-card-blurb { font-size: .82rem; color: #6b7280; margin-top: 6px; font-style: italic; }
.wwn-card-elevator span { font-size: .8rem; line-height: 1.4; }
.wwn-card-vcard { margin-top: 6px; }
.wwn-icon-svg { width: 15px; height: 15px; display: inline-block; vertical-align: -2px; color: #6b7280; margin-right: 4px; }

/* ── Award ─────────────────────────────────────────────── */
.wwn-award-questions { padding-left: 20px; margin: 0 0 16px; }
.wwn-award-questions li { font-size: .9rem; color: #4b5563; margin-bottom: 4px; font-style: italic; }

/* ── Admin Table ───────────────────────────────────────── */
.wwn-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.wwn-table th { text-align: left; padding: 8px 10px; background: #f9fafb; border-bottom: 2px solid #e5e7eb; font-weight: 600; color: #374151; font-size: .82rem; text-transform: uppercase; letter-spacing: .3px; }
.wwn-table td { padding: 8px 10px; border-bottom: 1px solid #f3f4f6; }
.wwn-table tbody tr:nth-child(even) td { background: #f9fafb; }
.wwn-table tr.wwn-inactive td { opacity: .5; }

/* ── Submissions ───────────────────────────────────────── */
.wwn-submission-card { border: 1px solid #e5e7eb; border-radius: 6px; padding: 14px; margin-bottom: 10px; }
.wwn-sub-header { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.wwn-sub-date { font-size: .78rem; color: #9ca3af; }
.wwn-sub-types { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.wwn-sub-text { font-size: .88rem; color: #4b5563; margin-bottom: 4px; }
.wwn-sub-files { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.wwn-file-link { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; background: #eff6ff; color: #2563eb; border-radius: 4px; font-size: .82rem; text-decoration: none; }
.wwn-file-link:hover { background: #dbeafe; }

/* ── Nomination ────────────────────────────────────────── */
.wwn-nomination-item { padding: 8px 0; border-bottom: 1px solid #f3f4f6; font-size: .88rem; }
.wwn-nom-reason { color: #6b7280; font-style: italic; }
.wwn-nomination-item small { display: block; color: #9ca3af; font-size: .78rem; }

/* ── Email Routes ──────────────────────────────────────── */
.wwn-route-row { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 12px; flex-wrap: wrap; }
.wwn-route-label { min-width: 180px; font-size: .88rem; font-weight: 600; color: #374151; padding-top: 6px; }
.wwn-pill-input { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; flex: 1; position: relative; }
.wwn-autocomplete { position: absolute; top: 100%; left: 0; background: #fff; border: 1px solid #d1d5db; border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,.1); z-index: 100; max-height: 200px; overflow-y: auto; width: 240px; }
.wwn-ac-item { display: block; width: 100%; text-align: left; padding: 8px 12px; border: none; background: none; cursor: pointer; font-size: .85rem; font-family: inherit; }
.wwn-ac-item:hover { background: #eff6ff; }

/* ── Modal ─────────────────────────────────────────────── */
.wwn-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; z-index: 9999; padding: 20px; }
.wwn-modal { background: #fff; border-radius: 12px; padding: 28px; width: 100%; max-width: 420px; position: relative; box-shadow: 0 20px 40px rgba(0,0,0,.15); max-height: 90vh; overflow-y: auto; }
.wwn-modal-lg { max-width: 700px; }
.wwn-modal-close { position: absolute; top: 12px; right: 14px; background: none; border: none; font-size: 1.2rem; color: #9ca3af; cursor: pointer; }
.wwn-modal-close:hover { color: #1f2937; }
.wwn-modal-actions { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.wwn-first-visit-info { background: #f9fafb; padding: 14px; border-radius: 6px; margin: 12px 0; }
.wwn-first-visit-info p { margin: 2px 0; font-size: .9rem; }

/* ── Home Content ──────────────────────────────────────── */
.wwn-home-content { line-height: 1.7; }
.wwn-home-content h1, .wwn-home-content h2, .wwn-home-content h3 { margin: 1rem 0 .5rem; }
.wwn-home-content p { margin: 0 0 1rem; }
.wwn-home-content img { max-width: 100%; height: auto; border-radius: 6px; }
.wwn-home-content a { color: #2563eb; text-decoration: underline; }
.wwn-home-content ul, .wwn-home-content ol { margin: 0 0 1rem 1.5rem; }

/* ── Directory Viewer Preferences ─────────────────────── */
.wwn-dir-prefs { display: flex; gap: 16px; margin-bottom: 14px; flex-wrap: wrap; }
.wwn-checkbox-label { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; color: #4b5563; cursor: pointer; }
.wwn-checkbox-label input[type="checkbox"] { accent-color: #2563eb; width: 16px; height: 16px; }

/* ── Image Uploads (My Account) ───────────────────────── */
.wwn-image-uploads { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.wwn-image-upload-block { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px; padding: 14px; }
.wwn-image-upload-block > label { display: block; font-weight: 600; font-size: .9rem; color: #374151; margin-bottom: 8px; }
.wwn-image-preview { margin-bottom: 10px; }
.wwn-image-preview img { max-width: 150px; max-height: 150px; border-radius: 6px; object-fit: contain; border: 1px solid #e5e7eb; }
.wwn-headshot-preview img { max-width: 120px; max-height: 168px; object-fit: cover; }
.wwn-image-inputs { display: flex; flex-direction: column; gap: 8px; }
.wwn-upload-label { font-size: .85rem; color: #4b5563; }
.wwn-upload-label input[type="file"] { display: block; margin-top: 4px; font-size: .82rem; }
.wwn-url-input-row { display: flex; gap: 6px; align-items: center; }
.wwn-url-input-row .wwn-input { flex: 1; font-size: .85rem; }

/* ── Admin Image Indicators ───────────────────────────── */
.wwn-th-icons { width: 60px; text-align: center; }
.wwn-img-indicators { font-size: .85rem; white-space: nowrap; text-align: center; }

/* ── Add Member Form ──────────────────────────────────── */
.wwn-add-member-form { background: #f0f9ff; border: 1px solid #bfdbfe; border-radius: 8px; padding: 16px; margin-bottom: 16px; }

/* ── Dues Badges ─────────────────────────────────────── */
.wwn-dues-badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: .75rem; font-weight: 600; text-transform: capitalize; line-height: 1.4; }
.wwn-dues-current { background: #dcfce7; color: #166534; }
.wwn-dues-waived { background: #dbeafe; color: #1e40af; }
.wwn-dues-pastdue { background: #fee2e2; color: #991b1b; }
.wwn-dues-cancelled { background: #f3f4f6; color: #6b7280; }
.wwn-dues-none { background: #f9fafb; color: #9ca3af; }

/* ── Contribution Picker ─────────────────────────────── */
.wwn-contrib-btn { padding: 6px 16px; border: 2px solid #d1d5db; border-radius: 20px; background: #fff; color: #374151; font-size: .85rem; font-weight: 500; cursor: pointer; transition: all .15s; }
.wwn-contrib-btn:hover { border-color: #9ca3af; background: #f9fafb; }
.wwn-contrib-active { border-color: #2563eb; background: #eff6ff; color: #1d4ed8; font-weight: 600; }

/* ── Subtle Links ────────────────────────────────────── */
.wwn-link-subtle { font-size: .8rem; color: #9ca3af; text-decoration: underline; cursor: pointer; }
.wwn-link-subtle:hover { color: #6b7280; }

/* ── Responsive ────────────────────────────────────────── */
@media (max-width: 640px) {
    .wwn-profile-grid { grid-template-columns: 1fr; }
    .wwn-directory-grid { grid-template-columns: 1fr; }
    .wwn-image-uploads { grid-template-columns: 1fr; }
    .wwn-bar-label { min-width: 100px; font-size: .78rem; }
    .wwn-tabs { gap: 0; }
    .wwn-tab { padding: 8px 12px; font-size: .82rem; }
    .wwn-tab-right { margin-left: 0; }
    .wwn-header-inner { flex-direction: column; text-align: center; }
    .wwn-card { padding: 16px; }
    .wwn-route-row { flex-direction: column; }
    .wwn-route-label { min-width: auto; }
    .wwn-url-input-row { flex-direction: column; }
}