/* ============================================================================ Pulse — Mobile Stylesheet (consolidated) Loads AFTER style.css. Only takes effect inside @media (max-width: 768px) or when the body carries .in-capacitor (the Pulse native app shell). Last reorganised: 16 May 2026 (Session 8) Replaces an evolved file that had 14 layered fix blocks. All final values are preserved here in one organised pass. Obsolete intermediate versions (typography V1/V2, scroll-fix V1) were dropped. ──────────── SECTIONS ──────────── 1. Safe-area + Capacitor environment 2. Tap behaviour 3. Page-scroll architecture (html = scroll container) 4. Main content padding 5. Mobile menu button (hamburger) 6. Sidebar drawer 7. Sidebar inner: nav, footer, sign out 8. Page header 9. Typography scale (compact / info-dense) 10. Cards 11. Buttons 12. Form inputs 13. Filter search box 14. Segmented tabs (.seg) 15. Tables 16. KPI cards 17. Top performers 18. Motivation banner 19. Pills (stage labels) 20. WhatsApp / Call action buttons 21. MIS diagnostic banners 22. Pagination 23. Contact list (mobile grid layout) 24. Kanban (opportunities) 25. Chatbot panel 26. Login page 27. Chat page 28. Email inbox (custom 3-line grid per row) 29. Attendance 30. Social Media 31. Super-small phones (<=380px) NOTE on iOS form-zoom: form inputs are intentionally set below 16px to match the compact scale. In iOS Safari this may zoom on focus; inside the Pulse Capacitor app there is no auto-zoom so this is fine in production. To stop the Safari zoom too, add maximum-scale=1 to the viewport meta. ============================================================================ */ /* ─── 1. Safe-area + Capacitor environment ──────────────────────────────── */ @supports (padding: max(0px)) { body.in-capacitor .mobile-menu-btn { top: calc(12px + env(safe-area-inset-top, 0px)); } body.in-capacitor .main, body.in-capacitor .main-full { padding-top: calc(60px + env(safe-area-inset-top, 0px)) !important; padding-bottom: calc(30px + env(safe-area-inset-bottom, 0px)) !important; padding-left: max(14px, env(safe-area-inset-left, 0px)) !important; padding-right: max(14px, env(safe-area-inset-right, 0px)) !important; } body.in-capacitor .sidebar { padding-top: env(safe-area-inset-top, 0px); } body.in-capacitor .chatbot-fab { bottom: calc(20px + env(safe-area-inset-bottom, 0px)); } body.in-capacitor .auth-wrap { padding-top: max(20px, env(safe-area-inset-top, 0px)) !important; padding-bottom: max(20px, env(safe-area-inset-bottom, 0px)) !important; } } /* ─── 2. Tap behaviour ──────────────────────────────────────────────────── */ body.in-capacitor * { -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; } body.in-capacitor input, body.in-capacitor textarea { -webkit-touch-callout: default; -webkit-user-select: text; } body.in-capacitor .browser-only { display: none !important; } @media (max-width: 768px) { .btn:active, .nav-item:active, .chatbot-fab:active, .claim-btn:active, .mobile-menu-btn:active { transform: scale(0.97); transition: transform 0.05s ease; } } /* ─── 3. Page-scroll architecture ───────────────────────────────────────── */ /* is THE page scroll container. body and .main pass scroll through (overflow-y: visible). overflow-x: clip clips horizontal overflow WITHOUT creating a scroll container (unlike overflow-x: hidden which silently forces overflow-y to auto and breaks nested vertical scroll). */ @media (max-width: 768px) { html { overflow-x: clip !important; overflow-y: auto !important; height: 100dvh !important; -webkit-overflow-scrolling: touch !important; } body { overflow-x: clip !important; overflow-y: visible !important; height: auto !important; min-height: 100dvh !important; max-width: 100vw !important; background: #f6f7fb !important; display: block !important; padding: 0 !important; margin: 0 !important; -webkit-overflow-scrolling: touch !important; } .main, .main-full { overflow-x: clip !important; overflow-y: visible !important; height: auto !important; max-height: none !important; } body.in-capacitor { overflow-y: visible !important; overscroll-behavior-y: contain !important; -webkit-overflow-scrolling: touch !important; } img { max-width: 100%; height: auto; } } /* ─── 4. Main content padding ───────────────────────────────────────────── */ @media (max-width: 768px) { .main, .main-full { display: block !important; width: 100vw !important; max-width: 100vw !important; min-height: auto !important; margin: 0 !important; padding: 54px 10px 78px !important; } .main > *:first-child, .main-full > *:first-child { margin-top: 0 !important; } } /* ─── 5. Mobile menu button (hamburger) ─────────────────────────────────── */ @media (max-width: 768px) { .mobile-menu-btn { display: flex !important; width: 38px !important; height: 38px !important; top: 8px !important; left: 10px !important; border-radius: 12px !important; font-size: 20px !important; z-index: 10000 !important; } } /* ─── 6. Sidebar drawer ─────────────────────────────────────────────────── */ /* z-index: 10000 keeps the sidebar ABOVE .sidebar-backdrop (9998) so the drawer is tappable / scrollable when open. */ @media (max-width: 768px) { aside.sidebar, html body aside.sidebar { position: fixed !important; top: 0 !important; left: 0 !important; width: min(82vw, 300px) !important; height: 100dvh !important; max-height: 100dvh !important; padding: 14px 10px 12px !important; margin: 0 !important; transform: translateX(-104%) !important; transition: transform .22s ease !important; z-index: 10000 !important; overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch !important; overscroll-behavior: contain !important; touch-action: pan-y !important; } html body aside.sidebar.open, .sidebar.open { transform: translateX(0) !important; } .sidebar-backdrop, html body .sidebar-backdrop { z-index: 9998 !important; } .sidebar-backdrop.open { display: block !important; } } /* ─── 7. Sidebar inner: nav, footer, sign out ───────────────────────────── */ @media (max-width: 768px) { .brand { margin: 0 4px 10px !important; padding-bottom: 10px !important; } .pulse-logo-img { max-width: 150px !important; } .nav-section { margin-bottom: 8px !important; } .nav-label { font-size: 10.5px !important; padding: 4px 10px 5px !important; letter-spacing: 1px !important; } .nav-item { min-height: 42px !important; padding: 10px 11px !important; border-radius: 10px !important; font-size: 11px !important; gap: 9px !important; } .nav-ico { width: 16px !important; height: 16px !important; } /* Show sign-out footer; hide the "Created by" branding strip */ .sidebar-footer { display: block !important; margin-top: 12px !important; padding-top: 10px !important; border-top: 1px solid rgba(255,255,255,0.08) !important; } .sidebar-credit { display: none !important; } .logout-btn { display: flex !important; align-items: center !important; gap: 9px !important; padding: 10px 11px !important; font-size: 13px !important; min-height: 42px !important; border-radius: 10px !important; } } /* ─── 8. Page header ────────────────────────────────────────────────────── */ @media (max-width: 768px) { .page-head, html body .page-head { display: flex !important; flex-direction: column !important; gap: 8px !important; margin: 0 0 10px !important; padding-left: 0 !important; /* hamburger sits on its own row above */ } .page-head h1 { font-size: 16px !important; line-height: 1.2 !important; margin: 0 !important; } .page-head .muted { font-size: 12.5px !important; line-height: 1.25 !important; } .page-head .actions { display: grid !important; grid-template-columns: 1fr 1fr !important; width: 100% !important; gap: 7px !important; } } /* ─── 9. Typography scale (compact / info-dense) ────────────────────────── */ @media (max-width: 768px) { html, body { width: 100% !important; font-size: 11px !important; line-height: 1.4 !important; } h2, h3 { line-height: 1.25 !important; } } /* ─── 10. Cards ─────────────────────────────────────────────────────────── */ @media (max-width: 768px) { .card { border-radius: 14px !important; padding: 13px !important; margin-bottom: 10px !important; box-shadow: 0 1px 2px rgba(17,24,39,.05) !important; } .card-head { margin-bottom: 10px !important; gap: 8px !important; align-items: flex-start !important; } .card-head h2 { font-size: 12px !important; } } /* ─── 11. Buttons ───────────────────────────────────────────────────────── */ @media (max-width: 768px) { .btn, button, a.btn { min-height: 34px !important; padding: 7px 11px !important; font-size: 12px !important; border-radius: 9px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; } .btn-primary { min-height: 36px !important; padding: 8px 14px !important; font-size: 12.5px !important; } /* Small buttons (inline / table action buttons) */ .btn.small, a.btn.small { font-size: 10.5px !important; min-height: 26px !important; padding: 3px 7px !important; border-radius: 6px !important; gap: 4px !important; white-space: nowrap !important; line-height: 1.2 !important; } .table .btn.small, .table a.btn.small { font-size: 10px !important; min-height: 24px !important; padding: 3px 6px !important; } /* Dashboard date preset chips */ .dash-preset-btn { min-height: 32px !important; font-size: 11.5px !important; padding: 6px 8px !important; border-radius: 9px !important; text-align: center !important; } .dashboard-preset-bar { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 7px !important; } } /* ─── 12. Form inputs ───────────────────────────────────────────────────── */ @media (max-width: 768px) { input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"], input[type="search"], input[type="url"], input[type="date"], input[type="time"], input[type="datetime-local"], textarea { font-size: 12px !important; min-height: 34px !important; padding: 7px 10px !important; border-radius: 8px !important; } select, html body select { font-size: 12px !important; min-height: 34px !important; padding: 6px 9px !important; border-radius: 8px !important; } label { padding: 4px 0; display: inline-block; } } /* ─── 13. Filter search box ─────────────────────────────────────────────── */ @media (max-width: 768px) { .filter-bar { display: grid !important; grid-template-columns: 1fr !important; gap: 7px !important; } .filter-search { margin-bottom: 8px !important; } .filter-search input { font-size: 12.5px !important; height: 36px !important; min-height: 36px !important; padding: 7px 10px 7px 32px !important; } } /* ─── 14. Segmented tabs (.seg) ─────────────────────────────────────────── */ @media (max-width: 768px) { .seg { gap: 0 !important; border-radius: 9px !important; } .seg a, .seg button, .seg > * { font-size: 11px !important; padding: 6px 9px !important; min-height: 32px !important; line-height: 1.2 !important; } } /* ─── 15. Tables ────────────────────────────────────────────────────────── */ @media (max-width: 768px) { .table { display: block !important; width: 100% !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; white-space: nowrap !important; font-size: 13px !important; } .table th, .table td { padding: 6px 7px !important; } .table td.actions, .table td .actions { white-space: nowrap !important; text-align: right !important; } } /* ─── 16. KPI cards (Dashboard) ─────────────────────────────────────────── */ @media (max-width: 768px) { .kpi-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; margin-bottom: 10px !important; } .kpi { padding: 12px !important; border-radius: 14px !important; } .kpi-label { font-size: 8px !important; letter-spacing: .3px !important; line-height: 1.2 !important; } .kpi-value { font-size: 14px !important; line-height: 1.15 !important; margin: 5px 0 3px !important; word-break: break-word !important; } .kpi-sub { font-size: 9px !important; line-height: 1.2 !important; } } /* ─── 17. Top performers ────────────────────────────────────────────────── */ @media (max-width: 768px) { .grid-2, .top-perf-row { display: grid !important; grid-template-columns: 1fr !important; gap: 8px !important; } .perf-card { padding: 11px !important; border-radius: 13px !important; } .perf-label { font-size: 10.5px !important; } .perf-name { font-size: 14px !important; } .perf-value { font-size: 16px !important; } .leaderboard { padding-left: 18px !important; } } /* ─── 18. Motivation banner ─────────────────────────────────────────────── */ @media (max-width: 768px) { .motivation-banner { border-radius: 14px !important; padding: 10px 12px !important; margin-bottom: 10px !important; } .motivation-icon { font-size: 24px !important; } .motivation-title { font-size: 11.5px !important; } .motivation-body { font-size: 14px !important; line-height: 1.35 !important; } } /* ─── 19. Pills (stage labels) ──────────────────────────────────────────── */ @media (max-width: 768px) { .pill { font-size: 9.5px !important; padding: 3px 7px !important; border-radius: 5px !important; white-space: nowrap !important; max-width: 100% !important; overflow: hidden !important; text-overflow: ellipsis !important; } } /* ─── 20. WhatsApp / Call action buttons ────────────────────────────────── */ @media (max-width: 768px) { .wa-btn, .call-btn, .wa-btn.small, .call-btn.small { font-size: 10.5px !important; min-height: 28px !important; padding: 4px 8px !important; gap: 4px !important; border-radius: 7px !important; white-space: nowrap !important; } } /* ─── 21. MIS diagnostic banners ────────────────────────────────────────── */ @media (max-width: 768px) { .mis-diag-warn, .mis-diag-info { padding: 9px 10px !important; border-radius: 12px !important; margin-bottom: 10px !important; font-size: 12.5px !important; } } /* ─── 22. Pagination ────────────────────────────────────────────────────── */ @media (max-width: 768px) { .pagination-bar { margin-top: 8px !important; padding: 10px !important; border: 1px solid var(--border) !important; border-radius: 14px !important; background: #fff !important; } .pagination-controls { width: 100% !important; display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 6px !important; } .pagination-size { grid-column: 1 / -1 !important; } .page-num { display: none !important; } } /* ─── 23. Contact list (mobile grid layout) ─────────────────────────────── */ @media (max-width: 768px) { .contacts-filter-card { padding: 10px !important; } .contacts-filter-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 7px !important; } .contacts-filter-grid select, .contacts-filter-grid input, .contacts-filter-grid .btn { width: 100% !important; min-width: 0 !important; font-size: 13px !important; min-height: 40px !important; } .contacts-card { padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } .contacts-list { display: flex !important; flex-direction: column !important; gap: 8px !important; } .contact-row, .contact-row:not(:has(.contact-bulk-check)) { display: grid !important; grid-template-columns: 26px 1fr auto !important; grid-template-areas: "avatar main actions" "avatar meta actions" !important; gap: 8px !important; align-items: start !important; padding: 11px !important; border: 1px solid var(--border) !important; border-radius: 14px !important; background: #fff !important; box-shadow: 0 1px 2px rgba(17,24,39,.05) !important; } .contact-row:has(.contact-bulk-check) { grid-template-columns: 22px 30px 1fr auto !important; grid-template-areas: "check avatar main actions" "check avatar meta actions" !important; } .contact-row::before { display: none !important; } .contact-bulk-check { grid-area: check !important; padding-top: 6px !important; } .contact-avatar { grid-area: avatar !important; width: 30px !important; height: 30px !important; font-size: 12.5px !important; } .contact-main { grid-area: main !important; min-width: 0 !important; } .contact-name-row { display: block !important; margin-bottom: 3px !important; } .contact-name { display: block !important; font-size: 14.5px !important; line-height: 1.2 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } .contact-meta { grid-area: meta !important; display: flex !important; flex-direction: column !important; gap: 1px !important; font-size: 12px !important; line-height: 1.25 !important; } .contact-meta span { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; max-width: 100% !important; } /* Hide less-essential metadata to keep cards compact */ .contact-pipeline, .contact-source, .contact-owner, .contact-tag, .contact-tag-pill { display: none !important; } .contact-actions { grid-area: actions !important; display: grid !important; grid-template-columns: repeat(2, 30px) !important; gap: 5px !important; align-self: center !important; } .contact-action-btn { width: 32px !important; height: 32px !important; min-height: 32px !important; font-size: 12.5px !important; border-radius: 10px !important; } .bulk-action-strip, .bulk-reassign-card { padding: 10px !important; border-radius: 14px !important; gap: 8px !important; } .bulk-reassign-form, .bulk-actions-row { display: grid !important; grid-template-columns: 1fr !important; width: 100% !important; } } /* ─── 24. Kanban (opportunities) ────────────────────────────────────────── */ @media (max-width: 768px) { .opp-col-head { padding: 10px 11px !important; } .opp-col-title { font-size: 13px !important; } .opp-col-count { font-size: 10.5px !important; padding: 2px 7px !important; min-height: 0 !important; } .opp-col-sub { font-size: 9.5px !important; letter-spacing: .4px !important; } .opp-col-dot { width: 8px !important; height: 8px !important; } .opp-card-new { padding: 10px !important; border-radius: 12px !important; margin-bottom: 8px !important; } .opp-card-head { gap: 8px !important; margin-bottom: 6px !important; align-items: center !important; } .opp-avatar { width: 28px !important; height: 28px !important; font-size: 12px !important; flex-shrink: 0 !important; } .opp-name { font-size: 13px !important; line-height: 1.2 !important; min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } .opp-line { font-size: 11px !important; line-height: 1.35 !important; gap: 5px !important; } .opp-meta { font-size: 10.5px !important; } .opp-card-head .call-btn, .opp-card-head .wa-btn, .opp-actions .call-btn, .opp-actions .wa-btn, .opp-actions a.btn { width: 30px !important; height: 30px !important; min-height: 30px !important; padding: 0 !important; } .opp-card-foot { gap: 5px !important; margin-top: 6px !important; padding-top: 6px !important; flex-wrap: wrap !important; } .opp-tag, .opp-tag-referrer { font-size: 9.5px !important; padding: 3px 7px !important; border-radius: 5px !important; letter-spacing: .3px !important; } .opp-filter-pill { font-size: 11px !important; padding: 5px 10px !important; } .opp-toolbar { gap: 6px !important; } } /* ─── 25. Chatbot panel ─────────────────────────────────────────────────── */ @media (max-width: 768px) { .chatbot-fab { width: 46px !important; height: 46px !important; right: 12px !important; bottom: 12px !important; } .chatbot-fab svg { width: 22px !important; height: 22px !important; } .chatbot-panel { width: calc(100vw - 20px) !important; right: 10px !important; left: 10px !important; bottom: 68px !important; max-height: 72dvh !important; border-radius: 16px !important; } .chatbot-header { padding: 11px 12px !important; } .chatbot-header strong { font-size: 13px !important; line-height: 1.2 !important; } .chatbot-header .muted, .chatbot-header .muted.small { font-size: 10.5px !important; line-height: 1.3 !important; margin-top: 2px !important; } .chatbot-close { width: 28px !important; height: 28px !important; min-height: 28px !important; font-size: 13px !important; padding: 0 !important; border-radius: 6px !important; } .chatbot-messages { padding: 11px !important; } .chatbot-msg { margin-bottom: 8px !important; } .chatbot-bubble { font-size: 12px !important; line-height: 1.5 !important; padding: 9px 11px !important; border-radius: 12px !important; } .chatbot-action-card { font-size: 11.5px !important; padding: 8px 10px !important; border-radius: 10px !important; } .chatbot-input-row { padding: 8px !important; gap: 6px !important; } #chatbotInput { font-size: 12px !important; min-height: 32px !important; padding: 6px 9px !important; border-radius: 8px !important; } .chatbot-mic, .chatbot-send { min-height: 32px !important; font-size: 12px !important; padding: 6px 11px !important; border-radius: 8px !important; } /* Main content must not be hidden behind the FAB */ .main, .main-full { padding-bottom: 80px !important; } } /* ─── 26. Login page ────────────────────────────────────────────────────── */ @media (max-width: 768px) { .auth-card { padding: 22px 18px !important; border-radius: 14px !important; max-width: 360px !important; } .auth-brand { font-size: 12px !important; margin-bottom: 12px !important; } .auth-card h1 { font-size: 20px !important; line-height: 1.2 !important; margin: 0 0 4px !important; } .auth-card .muted { font-size: 12px !important; } .auth-card .muted.small, .auth-card a.muted.small { font-size: 11px !important; } .auth-card label { font-size: 11.5px !important; margin-bottom: 10px !important; display: block !important; } .auth-card input[type="email"], .auth-card input[type="password"], .auth-card input[type="text"] { font-size: 13px !important; min-height: 36px !important; padding: 8px 10px !important; width: 100% !important; margin-top: 3px !important; border-radius: 8px !important; } .auth-card .btn, .auth-card .btn-primary, .auth-card .btn.full, .auth-card button[type="submit"] { font-size: 13px !important; min-height: 40px !important; padding: 9px 14px !important; border-radius: 9px !important; width: 100% !important; } } /* ─── 27. Chat page ─────────────────────────────────────────────────────── */ @media (max-width: 768px) { .chat-layout { gap: 0 !important; } .chat-sidebar-head { padding: 11px !important; } .chat-sidebar-head input { font-size: 12px !important; height: 32px !important; } .chat-conv-item { padding: 9px 10px !important; gap: 9px !important; } .conv-avatar { width: 32px !important; height: 32px !important; font-size: 12px !important; } .conv-row1 { font-size: 12.5px !important; } .conv-preview { font-size: 10.5px !important; } .conv-badge { font-size: 9.5px !important; padding: 1px 5px !important; } .chat-header { padding: 11px 12px !important; } .chat-header strong, .chat-header > div strong { font-size: 13px !important; } .chat-header .muted, .chat-header small { font-size: 10.5px !important; } .chat-empty { font-size: 12px !important; padding: 18px 14px !important; line-height: 1.5 !important; } .chat-bubble { font-size: 12px !important; padding: 7px 10px !important; max-width: 82% !important; } .chat-body-text { font-size: 12px !important; line-height: 1.45 !important; } .chat-author { font-size: 10.5px !important; } .chat-time { font-size: 9.5px !important; } .chat-day-divider { font-size: 10.5px !important; } .chat-input-bar { padding: 8px !important; gap: 6px !important; } .chat-input-bar input, .chat-input-bar textarea { font-size: 12px !important; min-height: 34px !important; padding: 7px 10px !important; } .chat-attach-btn, .chat-voice-btn { width: 32px !important; height: 32px !important; min-height: 32px !important; font-size: 14px !important; padding: 0 !important; } } /* ─── 28. Email inbox (custom 3-line grid per row) ──────────────────────── */ /* Layout: [check] [avatar] Name date Subject (wraps to 2 lines if long) Snippet (1 line, muted, ellipsis) From-address line is hidden on phones (name is enough). Subject wraps to 2 lines max — full subject is readable in the list without any scrolling or tapping. Tap row to open the email for the full body. Settings button forced to right column under Compose. */ @media (max-width: 768px) { .email-layout { gap: 8px !important; } .email-folders { padding: 8px !important; } .email-folder { padding: 8px 10px !important; gap: 8px !important; border-radius: 8px !important; } .email-folder-icon { font-size: 14px !important; } .email-folder-label { font-size: 12.5px !important; } .email-folder-count { font-size: 10.5px !important; padding: 1px 5px !important; } .email-list-card { padding: 0 !important; } .email-list { gap: 0 !important; } /* Settings button (3rd action) goes to the right column under Compose */ .email-layout ~ .page-head .actions > *:nth-child(3), .page-head .actions > a[href*="email_settings"] { grid-column: 2 !important; } .email-row { display: flex !important; align-items: flex-start !important; gap: 8px !important; padding: 10px !important; } .email-check { flex-shrink: 0 !important; padding-top: 4px !important; } .email-link { display: grid !important; grid-template-columns: 32px 1fr auto !important; grid-template-areas: "avatar name date" "avatar subj subj" "avatar snip snip" !important; column-gap: 9px !important; row-gap: 2px !important; flex: 1 !important; min-width: 0 !important; text-decoration: none !important; } /* Wrappers pass-through into the parent grid */ .email-link > .email-from, .email-link > .email-content, .email-link > .email-meta { display: contents !important; } .email-link > .email-from > .email-avatar { grid-area: avatar !important; width: 32px !important; height: 32px !important; font-size: 12px !important; flex-shrink: 0 !important; } .email-link > .email-from > div:not(.email-avatar) { grid-area: name !important; min-width: 0 !important; overflow: hidden !important; } .email-from-name { font-size: 12.5px !important; line-height: 1.25 !important; font-weight: 600 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } .email-from-addr { display: none !important; } /* Subject wraps to 2 lines; snippet to 1 line. No scrolling needed — full subject is visible by default. Tap to open the email for the rest. */ .email-link > .email-content > .email-subject { grid-area: subj !important; font-size: 12px !important; line-height: 1.3 !important; white-space: normal !important; display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important; overflow: hidden !important; text-overflow: ellipsis !important; min-width: 0 !important; word-break: break-word !important; } .email-link > .email-content > .email-snippet { grid-area: snip !important; font-size: 10.5px !important; line-height: 1.3 !important; color: #6b7280 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; min-width: 0 !important; } .email-link > .email-meta > .email-date { grid-area: date !important; font-size: 10px !important; color: #9ca3af !important; white-space: nowrap !important; align-self: start !important; } .bulk-bar { padding: 9px 10px !important; font-size: 12px !important; } .bulk-count { font-size: 11px !important; } } /* ─── 29. Attendance ────────────────────────────────────────────────────── */ @media (max-width: 768px) { .att-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; } .att-card { padding: 11px 12px !important; border-radius: 12px !important; gap: 9px !important; } .att-icon { font-size: 22px !important; width: auto !important; } .att-num { font-size: 22px !important; line-height: 1.1 !important; font-weight: 700 !important; } .att-label { font-size: 9.5px !important; letter-spacing: .4px !important; line-height: 1.2 !important; } .att-pill { font-size: 10.5px !important; padding: 3px 7px !important; } } /* ─── 30. Social Media ──────────────────────────────────────────────────── */ @media (max-width: 768px) { .sm-period-bar { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; margin-bottom: 12px !important; } .sm-period-btn, .period { font-size: 11.5px !important; padding: 6px 10px !important; min-height: 32px !important; border-radius: 9px !important; } .sm-kpi-row { display: grid !important; grid-template-columns: 1fr !important; gap: 8px !important; } .sm-kpi { padding: 12px 13px !important; gap: 11px !important; border-radius: 14px !important; } .sm-kpi-icon { width: 38px !important; height: 38px !important; font-size: 18px !important; flex-shrink: 0 !important; } .sm-kpi-label { font-size: 10px !important; letter-spacing: .4px !important; } .sm-kpi-num { font-size: 22px !important; line-height: 1.1 !important; margin: 2px 0 !important; } .sm-kpi-trend { font-size: 10.5px !important; } .sm-platforms { gap: 7px !important; } .sm-platform-row { padding: 9px 10px !important; gap: 9px !important; } .sm-platform-icon { width: 26px !important; height: 26px !important; } .sm-platform-label { font-size: 12px !important; } .sm-platform-stats { font-size: 10.5px !important; } } /* ─── 31. Super-small phones (<=380px) ──────────────────────────────────── */ @media (max-width: 380px) { .contacts-filter-grid, .kpi-grid, .dashboard-preset-bar { grid-template-columns: 1fr !important; } .page-head .actions { grid-template-columns: 1fr !important; } .contact-actions { grid-template-columns: 30px !important; } }