@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap");

:root {
  --portal-navy: #101c2c;
  --portal-ink: #17243a;
  --portal-muted: #657287;
  --portal-teal: #0bb9a2;
  --portal-teal-dark: #087b70;
  --portal-mint: #dff8f2;
  --portal-bg: #f5f7f8;
  --portal-white: #fff;
  --portal-line: #e3e8eb;
  --portal-sidebar: 252px;
  --portal-topbar: 74px;
  --portal-radius: 12px;
}

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
body.professional-portal { min-width: 0; margin: 0; overflow-x: hidden; background: var(--portal-bg); color: var(--portal-ink); font-family: "DM Sans", sans-serif; letter-spacing: 0; }
.professional-portal *, .professional-portal *::before, .professional-portal *::after { box-sizing: border-box; }
.professional-portal button, .professional-portal input, .professional-portal select, .professional-portal textarea { font: inherit; }
.professional-portal button:focus-visible, .professional-portal a:focus-visible, .professional-portal input:focus-visible, .professional-portal select:focus-visible, .professional-portal textarea:focus-visible { outline: 3px solid rgba(11,185,162,.35); outline-offset: 2px; }

.professional-portal .portal-topbar { position: fixed; z-index: 80; top: 0; right: 0; left: var(--portal-sidebar); width: auto; height: var(--portal-topbar); min-height: var(--portal-topbar); padding: 0; border-bottom: 1px solid var(--portal-line); background: rgba(255,255,255,.97); box-shadow: none; backdrop-filter: blur(10px); }
.professional-portal .main-header-container { width: 100%; height: 100%; max-width: none; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 34px; }
.topbar-business-context { min-width: 0; display: flex; align-items: center; gap: 12px; }
.professional-portal .dashboard-header-avatar { width: 38px; height: 38px; flex: 0 0 38px; display: flex; align-items: center; justify-content: center; overflow: hidden; border: 1px solid var(--portal-line); border-radius: 50%; background: var(--portal-navy); color: var(--portal-white); font: 700 .78rem/1 "Manrope", sans-serif; }
.professional-portal .dashboard-header-avatar img, .professional-portal .dashboard-side-menu-avatar img, .professional-portal .customer-profile-avatar img { width: 100%; height: 100%; display: block; border-radius: inherit; object-fit: cover; object-position: center center; }
.professional-portal .dashboard-header-name { max-width: min(42vw, 480px); overflow: hidden; color: var(--portal-navy); font: 700 .9rem/1.3 "Manrope", sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.professional-portal .dashboard-header-profile-group { display: flex; align-items: center; gap: 6px; margin: 0; }
.professional-portal .dashboard-header-icon-btn, .topbar-profile-button, .portal-menu-button, .portal-drawer-close { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; margin: 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--portal-ink); cursor: pointer; transition: background-color .18s ease, color .18s ease; }
.professional-portal .dashboard-header-icon-btn:hover, .topbar-profile-button:hover, .portal-menu-button:hover, .portal-drawer-close:hover { background: #edf3f2; color: var(--portal-teal-dark); }
.professional-portal .dashboard-header-icon { color: inherit; font-size: 22px; }
.topbar-profile-button { border: 1px solid var(--portal-line); background: var(--portal-navy); color: var(--portal-white); }
.topbar-profile-button .material-icons { font-size: 25px; }
.topbar-logout-button { display: none !important; }
.notification-control { position: relative; }
.notification-dot { position: absolute; top: 8px; right: 7px; width: 9px; height: 9px; border: 2px solid var(--portal-white); border-radius: 50%; background: var(--portal-teal); }
.professional-portal #notificationPanel { position: absolute; z-index: 1000; top: 50px; right: 0; left: auto; width: min(350px, calc(100vw - 28px)); min-width: 0; max-height: 380px; overflow-y: auto; padding: 8px; border: 1px solid var(--portal-line); border-radius: var(--portal-radius); background: var(--portal-white); color: var(--portal-ink); box-shadow: 0 18px 44px rgba(16,28,44,.14); }
.notification-panel-header { padding: 12px 12px 14px; border-bottom: 1px solid var(--portal-line); font: 700 .95rem/1.2 "Manrope", sans-serif; }
.notification-list { margin: 0; padding: 0; list-style: none; }
.notification-empty { padding: 30px 14px; color: var(--portal-muted); text-align: center; font-size: .88rem; }
.portal-menu-button { display: none; }

.professional-portal .dashboard-layout { min-height: 100vh; display: block; padding: var(--portal-topbar) 0 0 var(--portal-sidebar); background: var(--portal-bg); }
.professional-portal .dashboard-side-menu { position: fixed; z-index: 90; inset: 0 auto 0 0; width: var(--portal-sidebar); height: 100vh; display: flex; flex-direction: column; align-items: stretch; overflow-y: auto; padding: 0 14px 18px; border-right: 1px solid var(--portal-line); background: var(--portal-white); transition: transform .22s ease; }
.portal-brand { min-height: var(--portal-topbar); display: flex; align-items: center; justify-content: space-between; padding: 0 6px; border-bottom: 1px solid var(--portal-line); }
.portal-brand img { width: 112px; height: auto; display: block; }
.portal-drawer-close { display: none; }
.professional-portal .dashboard-side-menu-profile-group { display: flex; flex-direction: column; align-items: center; gap: 0; padding: 25px 10px 21px; border-bottom: 1px solid var(--portal-line); }
.professional-portal .dashboard-side-menu-avatar { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; overflow: hidden; border: 1px solid var(--portal-line); border-radius: 50%; background: var(--portal-navy); color: var(--portal-white); font: 700 1rem/1 "Manrope", sans-serif; }
.professional-portal .side-menu-profile-name { width: 100%; display: block !important; margin-top: 13px; overflow: hidden; color: var(--portal-navy); text-align: center; text-overflow: ellipsis; white-space: nowrap; font: 700 .88rem/1.35 "Manrope", sans-serif; }
.sidebar-profile-link { display: inline-flex; align-items: center; gap: 5px; margin-top: 7px; padding: 4px 6px; border: 0; background: transparent; color: var(--portal-teal-dark); cursor: pointer; font: 700 .77rem/1.2 "Manrope", sans-serif; }
.sidebar-profile-link .material-icons { font-size: 14px; }
.professional-portal .dashboard-side-menu-nav { width: 100%; margin: 16px 0 20px; }
.professional-portal .side-menu-list { width: 100%; display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.professional-portal .side-menu-link { position: relative; width: 100%; min-height: 44px; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 12px; padding: 0 13px; border-radius: 7px; background: transparent; color: #39475b; text-decoration: none; font: 700 .82rem/1.2 "Manrope", sans-serif; transition: background-color .18s ease, color .18s ease; }
.professional-portal .side-menu-link:hover, .professional-portal .side-menu-link:focus { background: #f0f5f4; color: var(--portal-teal-dark); }
.professional-portal .side-menu-link.is-active { background: var(--portal-mint); color: var(--portal-teal-dark); }
.professional-portal .side-menu-icon { flex: 0 0 21px; margin: 0; color: inherit; font-size: 20px; }
.professional-portal .side-menu-link-text { display: block; margin: 0; font-size: inherit; }
.professional-portal .side-menu-link .locked-icon, .professional-portal .side-menu-link .material-icons.lock { position: static; margin: 0 0 0 auto !important; color: #7d8998 !important; font-size: 16px !important; opacity: 1; }
.portal-sidebar-footer { margin-top: auto; }
.portal-help-card { margin: 0 5px 14px; padding: 16px; border: 1px solid #cfe7e2; border-radius: 9px; background: #f0faf8; }
.portal-help-card > .material-icons { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; margin-bottom: 11px; border: 1px solid var(--portal-teal); border-radius: 50%; color: var(--portal-teal-dark); font-size: 18px; }
.portal-help-card strong { color: var(--portal-navy); font: 700 .8rem/1.2 "Manrope", sans-serif; }
.portal-help-card p { margin: 8px 0 10px; color: var(--portal-muted); font-size: .75rem; line-height: 1.55; }
.portal-help-card a { color: var(--portal-teal-dark); text-decoration: none; font: 700 .74rem/1.3 "Manrope", sans-serif; }
.portal-logout-link { border-top: 1px solid var(--portal-line); border-radius: 0 !important; }
.portal-drawer-backdrop { display: none; }

.professional-portal .dashboard-main-content { width: 100%; min-width: 0; min-height: calc(100vh - var(--portal-topbar)); margin: 0; padding: 34px clamp(24px, 3.1vw, 48px) 54px; background: var(--portal-bg); }
.professional-portal .dashboard-section { width: 100%; min-width: 0; max-width: 1480px; margin: 0 auto; }
.portal-data-notice { max-width: 1480px; margin: 0 auto 22px; padding: 13px 16px; border: 1px solid #e7c6c1; border-radius: 8px; background: #fff3f1; color: #7a3f39; font-size: .86rem; }
.professional-portal .dashboard-welcome { margin: 0 0 24px; padding: 0; text-align: left; }
.professional-portal .dashboard-welcome-title { margin: 0 0 6px; color: var(--portal-navy); font: 700 clamp(1.65rem, 2.4vw, 2.2rem)/1.18 "Manrope", sans-serif; letter-spacing: 0; }
.professional-portal .dashboard-welcome-sub { color: var(--portal-muted); font-size: .9rem; }

.professional-portal .dashboard-stats-row { display: grid; grid-template-columns: repeat(6, minmax(140px, 1fr)); gap: 14px; margin: 0 0 24px; }
.professional-portal .dashboard-stat-card { min-width: 0; min-height: 144px; display: flex; flex-direction: column; align-items: flex-start; padding: 17px 18px 15px; border: 1px solid var(--portal-line); border-radius: var(--portal-radius); background: var(--portal-white); box-shadow: 0 5px 18px rgba(16,28,44,.035); }
.dashboard-stat-heading { display: flex; align-items: center; gap: 10px; }
.dashboard-stat-icon { width: 32px; height: 32px; flex: 0 0 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 17px; }
.stat-card-leads .dashboard-stat-icon { background: #dcf8f2; color: #069d8c; }
.stat-card-response .dashboard-stat-icon { background: #e2f1ff; color: #258bd2; }
.stat-card-conversion .dashboard-stat-icon { background: #eee8ff; color: #7655d9; }
.stat-card-won .dashboard-stat-icon { background: #e3f6e9; color: #2b9d55; }
.stat-card-lost .dashboard-stat-icon { background: #ffe8e5; color: #d85d53; }
.stat-card-completed-value .dashboard-stat-icon { background: #e8eef8; color: #34598c; }
.professional-portal .dashboard-stat-label { margin: 0; color: var(--portal-ink); font: 700 .78rem/1.3 "Manrope", sans-serif; }
.professional-portal .dashboard-stat-value { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-top: 15px; color: var(--portal-navy); font: 700 1.85rem/1 "Manrope", sans-serif; }
.professional-portal .dashboard-stat-desc { margin: 0; color: var(--portal-muted); font: 500 .72rem/1.2 "DM Sans", sans-serif; }

.professional-portal .dashboard-plan-card { min-height: 82px; display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 16px; margin: 0 0 24px; padding: 16px 18px; border: 1px solid #c9e9e3; border-radius: var(--portal-radius); background: #edf9f7; box-shadow: none; }
.dashboard-plan-icon { width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; border-radius: 9px; background: var(--portal-white); color: var(--portal-teal); font-size: 23px; }
.dashboard-plan-copy { min-width: 0; }
.professional-portal .dashboard-plan-label { margin: 0 0 5px; color: var(--portal-navy); font: 700 .94rem/1.2 "Manrope", sans-serif; }
.professional-portal .dashboard-plan-free, .professional-portal .dashboard-plan-premium { color: var(--portal-teal-dark); }
.professional-portal .dashboard-plan-desc { margin: 0; color: var(--portal-muted); font-size: .8rem; }
.dashboard-plan-actions { display: flex; gap: 8px; }
.professional-portal .dashboard-plan-upgrade-btn, .dashboard-plan-manage-btn { min-height: 42px; padding: 0 19px; border: 1px solid var(--portal-teal); border-radius: 7px; background: var(--portal-teal); color: var(--portal-white); cursor: pointer; font: 700 .78rem/1 "Manrope", sans-serif; transition: background-color .18s ease, border-color .18s ease; }
.professional-portal .dashboard-plan-upgrade-btn:hover { border-color: var(--portal-teal-dark); background: var(--portal-teal-dark); }
.dashboard-plan-manage-btn { display: none; border-color: var(--portal-teal-dark); background: transparent; color: var(--portal-teal-dark); }
.professional-portal[data-plan="premium"] .dashboard-plan-upgrade-btn { display: none; }
.professional-portal[data-plan="premium"] .dashboard-plan-manage-btn { display: inline-flex; align-items: center; }

.professional-portal .dashboard-recent-leads-section { margin: 0; padding: 22px; border: 1px solid var(--portal-line); border-radius: var(--portal-radius); background: var(--portal-white); box-shadow: 0 5px 18px rgba(16,28,44,.035); }
.professional-portal .dashboard-leads-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin: 0 0 16px; padding: 0; }
.professional-portal .dashboard-leads-title { margin: 0 0 7px; color: var(--portal-navy); font: 700 1rem/1.3 "Manrope", sans-serif; }
.professional-portal .dashboard-leads-title span { color: var(--portal-muted); font-weight: 600; }
.professional-portal .dashboard-leads-desc { margin: 0; color: var(--portal-muted) !important; font-size: .79rem !important; line-height: 1.5; }
.dashboard-leads-note { display: flex; align-items: center; gap: 6px; margin: 7px 0 0; color: #778396; font-size: .73rem; }
.dashboard-leads-note .material-icons { font-size: 15px; }
.professional-portal .dashboard-leads-viewall { flex: 0 0 auto; min-height: 36px; display: inline-flex; align-items: center; padding: 0 4px; border: 0; background: transparent; color: var(--portal-teal-dark); text-decoration: none; cursor: pointer; font: 700 .78rem/1 "Manrope", sans-serif; }
#recentLeadsContainer { min-height: 245px; }
.dashboard-empty-state { min-height: 245px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 30px 18px; border-radius: 9px; background: #f8fafb; text-align: center; }
.dashboard-empty-icon { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #dff6f1; color: var(--portal-teal); font-size: 38px; }
.dashboard-empty-state h3 { margin: 15px 0 5px; color: var(--portal-navy); font: 700 1.02rem/1.25 "Manrope", sans-serif; }
.dashboard-empty-state p { margin: 0; color: var(--portal-muted); font-size: .8rem; }
.dashboard-empty-state a { min-height: 38px; display: inline-flex; align-items: center; margin-top: 16px; padding: 0 17px; border-radius: 6px; background: var(--portal-teal); color: var(--portal-white); text-decoration: none; font: 700 .75rem/1 "Manrope", sans-serif; }
.dashboard-upgrade-prompt { align-items: center; justify-content: space-between; gap: 18px; margin-top: 14px; padding: 12px 14px; border: 1px solid #d7e6e3; border-radius: 8px; background: #f5faf9; color: var(--portal-muted); font-size: .78rem; }

.professional-portal .dashboard-recent-leads-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.professional-portal .dashboard-recent-lead-card, .professional-portal .dashboard-lead-card { min-width: 0; max-width: none; margin: 0; padding: 17px; border: 1px solid var(--portal-line); border-radius: 9px; background: var(--portal-white); box-shadow: none; }
.professional-portal .dashboard-recent-lead-card { display: flex; flex-direction: column; }
.professional-portal .dashboard-lead-tag { align-self: flex-start; margin: 0 0 11px; padding: 4px 8px; border-radius: 5px; background: var(--portal-mint); color: var(--portal-teal-dark); font-size: .68rem; font-weight: 700; }
.professional-portal .dashboard-lead-title-row { align-items: flex-start; gap: 10px; }
.professional-portal .dashboard-lead-title { color: var(--portal-navy); font: 700 .9rem/1.35 "Manrope", sans-serif; }
.professional-portal .dashboard-lead-time { color: var(--portal-muted); font-size: .68rem; text-align: right; }
.professional-portal .dashboard-lead-time span { display: block; margin: 3px 0 0 !important; color: #b14e47 !important; font-size: .66rem !important; }
.professional-portal .dashboard-lead-meta, .professional-portal .dashboard-lead-desc { color: var(--portal-muted); font-size: .76rem; line-height: 1.5; }
.professional-portal .dashboard-lead-meta { margin: 7px 0; color: var(--portal-teal-dark); }
.professional-portal .dashboard-lead-desc { flex: 1; margin-bottom: 13px; }
.professional-portal .dashboard-lead-btn { min-height: 38px; margin-top: auto; border-radius: 6px; background: var(--portal-teal); font: 700 .75rem/1 "Manrope", sans-serif; }

.professional-portal #leads-section, .professional-portal #profile-section, .professional-portal #billing-section, .professional-portal #chat-section, .professional-portal #hiring-section { padding: 4px 0 30px; }
.professional-portal #leads-section > .dashboard-leads-header, .professional-portal .dashboard-billing-header, .professional-portal .dashboard-hiring-header { margin-bottom: 22px; padding: 0; }
.professional-portal #leads-section .dashboard-leads-title, .professional-portal .dashboard-billing-title, .professional-portal .dashboard-hiring-title { color: var(--portal-navy); font: 700 1.65rem/1.2 "Manrope", sans-serif; }
.professional-portal .dashboard-leads-row { display: grid; grid-template-columns: repeat(3, minmax(240px, 1fr)); gap: 14px; }
.professional-portal .dashboard-leads-best-practice, .professional-portal .dashboard-hiring-howitworks { border: 1px solid var(--portal-line); border-radius: 8px !important; background: var(--portal-white) !important; color: var(--portal-muted) !important; font-size: .82rem !important; }
.professional-portal .dashboard-chat-container { padding: 0; border: 1px solid var(--portal-line); border-radius: var(--portal-radius); background: var(--portal-white) !important; box-shadow: none; overflow: hidden; }
.professional-portal .chat-main-area { background: #f7f9fa !important; }

.portal-loading .dashboard-stat-value { position: relative; min-width: 70px; color: transparent !important; }
.portal-loading .dashboard-stat-value * { visibility: hidden; }
.portal-loading .dashboard-stat-value::after { content: ""; position: absolute; inset: 0 auto auto 0; width: 64px; height: 28px; border-radius: 5px; background: #e9eeef; animation: portalPulse 1.2s ease-in-out infinite alternate; }
.portal-loading .dashboard-plan-desc { color: var(--portal-muted); }
@keyframes portalPulse { to { opacity: .45; } }

@media (max-width: 1280px) {
  .professional-portal .dashboard-stats-row { grid-template-columns: repeat(3, minmax(150px, 1fr)); }
  .professional-portal .dashboard-stat-card { min-height: 132px; }
  .professional-portal .dashboard-leads-row { grid-template-columns: repeat(2, minmax(240px, 1fr)); }
}

@media (max-width: 1100px) {
  .professional-portal .portal-topbar { left: 0; }
  .professional-portal .main-header-container { padding: 0 22px; }
  .portal-menu-button, .portal-drawer-close { display: inline-flex; }
  .professional-portal .dashboard-layout { padding-left: 0; }
  .professional-portal .dashboard-side-menu { transform: translateX(-102%); box-shadow: 18px 0 45px rgba(16,28,44,.16); }
  .portal-drawer-open .dashboard-side-menu { transform: translateX(0); }
  .portal-drawer-backdrop { position: fixed; z-index: 85; inset: 0; display: block; border: 0; background: rgba(16,28,44,.38); opacity: 0; pointer-events: none; transition: opacity .22s ease; }
  .portal-drawer-open .portal-drawer-backdrop { opacity: 1; pointer-events: auto; }
  .portal-drawer-open { overflow: hidden; }
}

@media (max-width: 760px) {
  .professional-portal .main-header-container { padding: 0 14px; }
  .professional-portal .dashboard-header-name { max-width: 42vw; display: block; font-size: .78rem; }
  .topbar-profile-button { display: none; }
  .topbar-logout-button { display: inline-flex !important; }
  .professional-portal #notificationPanel { position: fixed; top: calc(var(--portal-topbar) + 8px); right: 14px; left: 14px; width: auto; max-width: none; }
  .professional-portal .dashboard-main-content { padding: 25px 16px 38px; }
  .professional-portal .dashboard-welcome { margin-bottom: 20px; }
  .professional-portal .dashboard-stats-row { grid-template-columns: 1fr 1fr; gap: 10px; }
  .professional-portal .dashboard-stat-card { min-height: 128px; padding: 15px; }
  .professional-portal .dashboard-plan-card { grid-template-columns: 40px 1fr; padding: 15px; }
  .dashboard-plan-actions { grid-column: 1 / -1; }
  .professional-portal .dashboard-plan-upgrade-btn, .dashboard-plan-manage-btn { width: 100%; justify-content: center; }
  .professional-portal .dashboard-recent-leads-section { padding: 17px 14px; }
  .professional-portal .dashboard-leads-header { flex-direction: column; gap: 10px; }
  .professional-portal .dashboard-leads-viewall { align-self: flex-start; }
  #recentLeadsContainer, .dashboard-empty-state { min-height: 220px; }
  .professional-portal .dashboard-recent-leads-row, .professional-portal .dashboard-leads-row { grid-template-columns: 1fr; }
  .professional-portal #leads-section .dashboard-leads-header { align-items: stretch; }
  .professional-portal #leads-section select#serviceTypeFilter { width: 100%; }
}

@media (max-width: 400px) {
  .professional-portal .dashboard-header-name { max-width: 34vw; }
  .professional-portal .dashboard-stat-heading { gap: 7px; }
  .professional-portal .dashboard-stat-card { min-height: 122px; padding: 13px; }
  .professional-portal .dashboard-stat-label { font-size: .72rem; }
}

@media (prefers-reduced-motion: reduce) {
  .professional-portal *, .professional-portal *::before, .professional-portal *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Professional leads */
.professional-portal .leads-page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.professional-portal .leads-page-header h1 { margin: 0 0 7px; color: var(--portal-navy); font: 700 1.85rem/1.2 "Manrope", sans-serif; }
.professional-portal .leads-page-header p { margin: 0; color: var(--portal-muted); font-size: .86rem; }
.leads-page-controls { display: flex; align-items: center; gap: 9px; }
.leads-control { min-height: 42px; display: inline-flex; align-items: center; gap: 6px; padding: 0 9px 0 12px; border: 1px solid var(--portal-line); border-radius: 7px; background: var(--portal-white); color: var(--portal-muted); box-shadow: 0 3px 12px rgba(16,28,44,.025); }
.leads-control .material-icons { font-size: 17px; }
.leads-control select { min-width: 120px; height: 40px; padding: 0 26px 0 0; border: 0; outline: 0; background: transparent; color: var(--portal-ink); cursor: pointer; font: 700 .75rem/1 "Manrope", sans-serif; }
.leads-summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; margin-bottom: 22px; }
.leads-summary-card { min-height: 112px; display: flex; align-items: flex-start; gap: 13px; padding: 18px; border: 1px solid var(--portal-line); border-radius: 9px; background: var(--portal-white); box-shadow: 0 5px 18px rgba(16,28,44,.035); }
.leads-summary-icon { width: 38px; height: 38px; flex: 0 0 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; }
.leads-summary-icon .material-icons { font-size: 20px; }
.leads-summary-card--teal .leads-summary-icon { background: #dcf8f2; color: #069d8c; }
.leads-summary-card--blue .leads-summary-icon { background: #e2f1ff; color: #258bd2; }
.leads-summary-card--amber .leads-summary-icon { background: #fff1d9; color: #c77a09; }
.leads-summary-card--green .leads-summary-icon { background: #e3f6e9; color: #2b9d55; }
.leads-summary-card > div { min-width: 0; display: flex; flex-direction: column; }
.leads-summary-value { color: var(--portal-navy); font: 700 1.55rem/1 "Manrope", sans-serif; }
.leads-summary-label { margin-top: 8px; color: var(--portal-ink); font: 700 .76rem/1.2 "Manrope", sans-serif; }
.leads-summary-description { margin-top: 4px; color: var(--portal-muted); font-size: .68rem; }
.leads-summary-skeleton { height: 112px; border: 1px solid var(--portal-line); border-radius: 9px; background: linear-gradient(90deg, #fff 25%, #f1f4f5 50%, #fff 75%); background-size: 200% 100%; animation: leadsShimmer 1.4s infinite; }
.leads-list-panel { overflow: hidden; border: 1px solid var(--portal-line); border-radius: 10px; background: var(--portal-white); box-shadow: 0 5px 18px rgba(16,28,44,.035); }
.leads-list-toolbar { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 17px; border-bottom: 1px solid var(--portal-line); }
.leads-list-toolbar h2 { margin: 0; color: var(--portal-navy); font: 700 .92rem/1.2 "Manrope", sans-serif; }
.leads-list-toolbar span { color: var(--portal-muted); font-size: .72rem; }
.lead-list-header, .lead-list-row { display: grid; grid-template-columns: minmax(220px, 2.2fr) minmax(90px, .85fr) minmax(90px, .8fr) minmax(105px, .9fr) minmax(100px, .8fr) minmax(118px, auto); align-items: center; column-gap: 14px; }
.lead-list-header { min-height: 40px; padding: 0 17px; border-bottom: 1px solid var(--portal-line); background: #fbfcfc; color: #7a8798; font: 700 .66rem/1.2 "Manrope", sans-serif; }
.lead-list-row { position: relative; min-height: 82px; padding: 13px 17px; border-bottom: 1px solid #edf0f2; transition: background-color .18s ease; }
.lead-list-row:last-child { border-bottom: 0; }
.lead-list-row:hover { background: #f7fcfb; }
.lead-list-row.is-locked { background: #fbfcfc; }
.lead-list-row.is-locked .lead-list-identity, .lead-list-row.is-locked .lead-list-location, .lead-list-row.is-locked .lead-list-budget, .lead-list-row.is-locked .lead-list-date { opacity: .62; }
.lead-list-identity { min-width: 0; display: flex; align-items: center; gap: 12px; }
.lead-list-service-icon { width: 36px; height: 36px; flex: 0 0 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--portal-mint); color: var(--portal-teal-dark); }
.lead-list-service-icon .material-icons { font-size: 18px; }
.lead-list-identity > div { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.lead-list-identity strong { overflow: hidden; color: var(--portal-navy); font: 700 .77rem/1.25 "Manrope", sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.lead-list-identity span:not(.material-icons) { overflow: hidden; color: var(--portal-muted); font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }
.lead-list-location, .lead-list-budget, .lead-list-date { color: #4c5a6d; font-size: .71rem; }
.lead-list-location > span:last-child::before { content: "location_on"; margin-right: 4px; color: var(--portal-muted); vertical-align: -2px; font: 14px/1 "Material Icons"; }
.lead-list-mobile-label { display: none; }
.lead-status { min-height: 24px; display: inline-flex; align-items: center; gap: 4px; padding: 0 8px; border-radius: 5px; font: 700 .64rem/1 "Manrope", sans-serif; }
.lead-status .material-icons { font-size: 13px; }
.lead-status--new { background: #ddf7f1; color: #087b70; }
.lead-status--contacted { background: #e2f1ff; color: #257bb8; }
.lead-status--won { background: #e3f6e9; color: #247e44; }
.lead-status--lost { background: #ffe8e5; color: #a84740; }
.lead-status--locked { background: #f1f2f4; color: #697588; }
.lead-list-action { display: flex; align-items: center; justify-content: flex-end; gap: 5px; }
.lead-view-button, .lead-upgrade-button { min-height: 34px; display: inline-flex; align-items: center; justify-content: center; padding: 0 13px; border: 1px solid var(--portal-teal); border-radius: 6px; background: var(--portal-white); color: var(--portal-teal-dark); text-decoration: none; cursor: pointer; font: 700 .68rem/1 "Manrope", sans-serif; transition: background-color .18s ease, color .18s ease; }
.lead-view-button:hover, .lead-upgrade-button:hover { background: var(--portal-teal); color: var(--portal-white); }
.lead-upgrade-button { border-color: #aab3bf; color: #536174; }
.lead-row-chevron { color: #94a0af; font-size: 18px; }
.lead-list-skeletons { padding: 0 17px; }
.lead-list-skeleton { height: 82px; display: grid; grid-template-columns: 2.2fr .85fr .8fr .9fr .8fr .7fr; align-items: center; gap: 18px; border-bottom: 1px solid #edf0f2; }
.lead-list-skeleton span { height: 12px; border-radius: 4px; background: linear-gradient(90deg, #edf1f2 25%, #f7f8f8 50%, #edf1f2 75%); background-size: 200% 100%; animation: leadsShimmer 1.4s infinite; }
.leads-feedback { min-height: 300px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px; text-align: center; }
.leads-feedback > .material-icons { width: 58px; height: 58px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--portal-mint); color: var(--portal-teal-dark); font-size: 28px; }
.leads-feedback h3 { margin: 15px 0 6px; color: var(--portal-navy); font: 700 .98rem/1.25 "Manrope", sans-serif; }
.leads-feedback p { margin: 0 0 17px; color: var(--portal-muted); font-size: .78rem; }
@keyframes leadsShimmer { to { background-position: -200% 0; } }

.lead-drawer-backdrop { position: fixed; z-index: 1090; inset: 0; border: 0; background: rgba(16,28,44,.28); opacity: 0; cursor: default; transition: opacity .22s ease; }
.lead-drawer-backdrop.is-open { opacity: 1; }
.lead-details-drawer { position: fixed; z-index: 1100; top: 0; right: 0; width: min(460px, 100vw); height: 100dvh; display: flex; flex-direction: column; border-left: 1px solid var(--portal-line); background: var(--portal-white); box-shadow: -16px 0 48px rgba(16,28,44,.14); transform: translateX(100%); transition: transform .22s ease; }
.lead-details-drawer[hidden], .lead-drawer-backdrop[hidden] { display: none !important; }
.lead-details-drawer.is-open { transform: translateX(0); }
.lead-drawer-header { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 0 22px; border-bottom: 1px solid var(--portal-line); }
.lead-drawer-header h2 { margin: 0; color: var(--portal-navy); font: 700 1.05rem/1.25 "Manrope", sans-serif; }
.lead-drawer-close { width: 44px; height: 44px; flex: 0 0 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--portal-ink); cursor: pointer; }
.lead-drawer-close:hover { background: #eef4f3; color: var(--portal-teal-dark); }
.lead-drawer-content { min-height: 0; overflow-y: auto; padding: 20px 22px calc(24px + env(safe-area-inset-bottom)); overscroll-behavior: contain; }
.lead-drawer-intro { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 17px; }
.lead-drawer-service-badge { max-width: 62%; overflow: hidden; padding: 6px 9px; border-radius: 5px; background: var(--portal-mint); color: var(--portal-teal-dark); font: 700 .68rem/1.2 "Manrope", sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.lead-drawer-intro > span:last-child { color: var(--portal-muted); font-size: .68rem; text-align: right; }
.lead-detail-section { padding: 18px 0; border-top: 1px solid var(--portal-line); }
.lead-detail-section h3 { margin: 0 0 14px; color: var(--portal-navy); font: 700 .82rem/1.25 "Manrope", sans-serif; }
.lead-detail-description { margin: 0; overflow-wrap: anywhere; color: #4d5a6c; font-size: .78rem; line-height: 1.65; }
.lead-detail-row { display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: start; gap: 10px; margin-bottom: 13px; }
.lead-detail-row:last-child { margin-bottom: 0; }
.lead-detail-row > .material-icons { margin-top: 2px; color: #647287; font-size: 17px; }
.lead-detail-row > div { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.lead-detail-row span { color: var(--portal-muted); font-size: .65rem; }
.lead-detail-row strong, .lead-detail-row a { overflow-wrap: anywhere; color: var(--portal-ink); font-size: .75rem; font-weight: 600; }
.lead-detail-row a { color: var(--portal-teal-dark); }
.lead-detail-budget { display: block; color: var(--portal-navy); font: 700 1.2rem/1.2 "Manrope", sans-serif; }
.lead-detail-location { min-height: 82px; display: flex; align-items: center; gap: 13px; padding: 16px; border: 1px solid #d5e8e4; border-radius: 8px; background: #f2faf8; }
.lead-detail-location > .material-icons { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--portal-teal); color: var(--portal-white); }
.lead-detail-location > div { display: flex; flex-direction: column; gap: 4px; }
.lead-detail-location span { color: var(--portal-muted); font-size: .66rem; }
.lead-detail-location strong { color: var(--portal-navy); font: 700 .82rem/1.2 "Manrope", sans-serif; }
.lead-drawer-actions { display: grid; gap: 9px; padding-top: 4px; }
.lead-chat-button, .lead-drawer-secondary-button { min-height: 45px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--portal-teal); border-radius: 7px; cursor: pointer; font: 700 .76rem/1 "Manrope", sans-serif; }
.lead-chat-button { background: var(--portal-teal); color: var(--portal-white); }
.lead-chat-button:hover { border-color: var(--portal-teal-dark); background: var(--portal-teal-dark); }
.lead-chat-button .material-icons { font-size: 17px; }
.lead-drawer-secondary-button { background: var(--portal-white); color: var(--portal-teal-dark); }
.lead-drawer-open { overflow: hidden; }

.dashboard-recent-lead-card.lead-list-row { min-height: 0; display: flex; flex-direction: column; align-items: stretch; padding: 16px; }
.dashboard-recent-lead-card .lead-list-identity { margin-bottom: 14px; }
.dashboard-recent-lead-card .lead-list-mobile-label { display: block; margin-bottom: 3px; color: var(--portal-muted); font-size: .62rem; }
.dashboard-recent-lead-card .lead-list-location, .dashboard-recent-lead-card .lead-list-budget, .dashboard-recent-lead-card .lead-list-date { width: 100%; display: flex; justify-content: space-between; gap: 12px; margin-top: 7px; }
.dashboard-recent-lead-card .lead-list-status { align-self: flex-start; order: -1; margin: 0 0 10px auto; }
.dashboard-recent-lead-card .lead-list-action { width: 100%; margin-top: 15px; }
.dashboard-recent-lead-card .lead-view-button, .dashboard-recent-lead-card .lead-upgrade-button { width: 100%; }
.dashboard-recent-lead-card .lead-row-chevron { display: none; }

@media (max-width: 1120px) {
  .leads-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lead-list-header, .lead-list-row { grid-template-columns: minmax(200px, 2fr) minmax(80px, .8fr) minmax(85px, .8fr) minmax(95px, .85fr) minmax(110px, auto); }
  .lead-list-header > :nth-child(4), .lead-list-date { display: none; }
}

@media (max-width: 760px) {
  .professional-portal .leads-page-header { align-items: stretch; flex-direction: column; gap: 18px; }
  .leads-page-controls { display: grid; grid-template-columns: 1fr 1fr; }
  .leads-control { width: 100%; }
  .leads-control:last-child { grid-column: 1 / -1; }
  .leads-control select { width: 100%; min-width: 0; }
  .leads-summary-grid { gap: 10px; }
  .leads-summary-card { min-height: 108px; padding: 14px; }
  .leads-summary-description { line-height: 1.35; }
  .leads-list-panel { overflow: visible; border: 0; background: transparent; box-shadow: none; }
  .leads-list-toolbar { min-height: 46px; padding: 0; border: 0; }
  .lead-list-header { display: none; }
  .lead-list-body { display: grid; gap: 11px; }
  .lead-list-row { min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 13px 16px; padding: 16px; border: 1px solid var(--portal-line); border-radius: 9px; background: var(--portal-white); box-shadow: 0 4px 14px rgba(16,28,44,.03); }
  .lead-list-row:hover { background: var(--portal-white); }
  .lead-list-identity { grid-column: 1 / -1; padding-right: 82px; }
  .lead-list-identity strong, .lead-list-identity span:not(.material-icons) { white-space: normal; }
  .lead-list-location, .lead-list-budget, .lead-list-date { display: flex; flex-direction: column; gap: 3px; }
  .lead-list-date { display: flex; }
  .lead-list-mobile-label { display: block; color: var(--portal-muted); font-size: .62rem; font-weight: 600; }
  .lead-list-location > span:last-child::before { display: none; }
  .lead-list-status { position: absolute; top: 16px; right: 16px; }
  .lead-list-action { grid-column: 1 / -1; margin-top: 2px; }
  .lead-view-button, .lead-upgrade-button { width: 100%; min-height: 42px; }
  .lead-row-chevron { display: none; }
  .lead-list-skeletons { display: grid; gap: 11px; padding: 0; }
  .lead-list-skeleton { height: 190px; display: block; padding: 16px; border: 1px solid var(--portal-line); border-radius: 9px; background: var(--portal-white); }
  .lead-list-skeleton span { display: block; margin-bottom: 14px; }
  .lead-details-drawer { width: 100vw; border-left: 0; }
  .lead-drawer-header { min-height: 66px; padding: 0 16px; }
  .lead-drawer-content { padding: 17px 16px calc(20px + env(safe-area-inset-bottom)); }
}

@media (max-width: 420px) {
  .leads-summary-grid { grid-template-columns: 1fr; }
  .leads-summary-card { min-height: 94px; }
  .lead-drawer-intro { align-items: flex-start; flex-direction: column; }
  .lead-drawer-service-badge { max-width: 100%; }
  .lead-drawer-intro > span:last-child { text-align: left; }
}