@import url("../landing-tokens.css"); /* ============================================================ Dashboard (#mainContent) — light business theme, landing palette + Inter. Loaded LAST in workspace.html (after auth-theme.css) so it wins the cascade. EVERY rule is scoped under #mainContent. It does NOT touch #authContainer (login), the shared sidebar, auth.js, /api, or any id / onclick handler. Never sets `display` on #mainContent (auth.js controls visibility + the .authenticated reveal). Colours via var(--li-*); the two literals (#9b2c2c muted red, neutral rgba shadow) have no landing token. ============================================================ */ #mainContent{ background:var(--li-white); color:var(--li-ink); font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; } /* form controls + table don't inherit font-family by default — force Inter */ #mainContent button, #mainContent input, #mainContent select, #mainContent textarea, #mainContent table{ font-family:inherit; } /* ---- top row: just the Log out button, aligned top-right ---- */ /* The old company label (Company: … (ID: …)) was removed from the DOM (workspace.html); only the Log out button remains, wrapped in .topbar-logout. */ #mainContent .topbar-logout{ display:flex; align-items:center; justify-content:flex-end; margin-bottom:20px; padding:0; background:none; border:none; border-radius:0; box-shadow:none; /* no empty card — only Log out remains, top-right */ } /* ---- Log out: business silhouette, muted brick red ---- */ #mainContent .topbar-logout button{ display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 22px; background:#9b2c2c; /* muted brick red — no red token in palette */ color:var(--li-white); border:none; border-radius:999px; font-size:.95rem; font-weight:600; cursor:pointer; transition:background .15s ease; } #mainContent .topbar-logout button:hover{ background:#7a2222; } #mainContent .topbar-logout button:focus-visible{ outline:3px solid var(--li-blue); outline-offset:3px; } /* sidebar toggle (#sidebarToggle) styling moved to sidebar-theme.css so it is unified across all sidebar pages, not just the dashboard. */ /* ---- action buttons (Send Email to All / Call to All / Import / Export…) ---- */ #mainContent .search-box{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:22px; } #mainContent .search-box button{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:0 20px; background:var(--li-blue); color:var(--li-white); border:none; border-radius:999px; font-size:.95rem; font-weight:600; cursor:pointer; transition:background .15s ease; } #mainContent .search-box button:hover{ background:var(--li-blue-dark); } #mainContent .search-box button:focus-visible{ outline:3px solid var(--li-blue); outline-offset:3px; } /* ---- loading line ---- */ #mainContent #loadingDiv{ color:var(--li-gray); font-size:.95rem; padding:12px 0; } /* ---- table card (keeps horizontal scroll for the many columns) ---- */ #mainContent .table-wrapper{ background:var(--li-white); border:1px solid var(--li-border); border-radius:12px; box-shadow:0 2px 8px rgba(0,0,0,.06); overflow-x:auto; } /* ---- leads table ---- */ #mainContent .data-table{ width:100%; border-collapse:collapse; background:var(--li-white); color:var(--li-ink); font-size:.9rem; } #mainContent .data-table thead th{ background:var(--li-tint); /* very light neutral-blue header */ color:var(--li-ink); font-weight:600; text-align:left; padding:12px 14px; border-bottom:1px solid var(--li-border); white-space:nowrap; /* keep header on one line (uppercase kept from base CSS) */ } #mainContent .data-table tbody td{ padding:10px 14px; border-bottom:1px solid var(--li-border); color:var(--li-ink); } #mainContent .data-table tbody tr:nth-child(even){ background:var(--li-tint-2); } #mainContent .data-table tbody tr:hover{ background:var(--li-tint); } #mainContent .data-table .no-results{ color:var(--li-gray); text-align:center; padding:24px; font-size:.95rem; } /* ---- pagination (JS toggles its container display; we only style the buttons) ---- */ #mainContent .pagination{ margin-top:16px; } #mainContent .pagination button{ min-height:44px; min-width:44px; padding:0 14px; background:var(--li-white); color:var(--li-ink); border:1px solid var(--li-border); border-radius:8px; font-size:.9rem; font-weight:500; cursor:pointer; transition:background .15s ease, border-color .15s ease; } #mainContent .pagination button:hover{ background:var(--li-tint); border-color:var(--li-blue); } #mainContent .pagination button:focus-visible{ outline:3px solid var(--li-blue); outline-offset:2px; } #mainContent .pagination button:disabled{ opacity:.5; cursor:default; } /* ---- reduced motion ---- */ @media (prefers-reduced-motion: reduce){ #mainContent .search-box button, #mainContent .topbar-logout button, #mainContent .pagination button{ transition:none; } }