/* Hosted page only (9/30): what the extension page got from being a Chrome extension page. */
body { margin: 0; }
#siErr:empty { display: none; }
.topbar .link { background: none; border: 0; color: var(--accent); cursor: pointer; padding: 0 6px; font: inherit; }
#extNote a { color: var(--accent); }
/* New Role, Roles and Admin: the admin page, full width and height under the tabs, no frame edge. */
#adminWrap { margin: 0 -20px; }
#adminFrame { display: block; width: 100%; min-height: calc(100vh - 118px); border: 0; background: transparent; overflow: hidden; }
#userSearch { min-width: 260px; }
/* Simple mode (recruiters): only who to contact. No verdict, score or reason columns, no filters
   by verdict, no downloads; the list shows Fits only. */
body.simple #tableWrap table th:nth-child(3), body.simple #tableWrap table td:nth-child(3),
body.simple #tableWrap table th:nth-child(4), body.simple #tableWrap table td:nth-child(4),
body.simple #tableWrap table th:nth-child(6), body.simple #tableWrap table td:nth-child(6) { display: none; }
body.simple #chips, body.simple #btnDownload, body.simple #btnDownloadFits, body.simple .progress, body.simple #status, body.simple #activity { display: none; }
body.simple #search { max-width: 360px; }
/* New version bar (9/30). */
.update-bar { position: sticky; top: 0; z-index: 20; display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: center; padding: 8px 16px; background: var(--accent-soft); border-bottom: 1px solid var(--accent-line); color: var(--text); font-size: 13.5px; font-weight: 600; }
/* Sign-in form (the extension's styles only cover inputs inside its own panels). */
#signin { max-width: 460px; margin: 40px auto 0; width: 100%; }
#siForm label { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 4px; color: var(--muted); }
#siForm input { box-sizing: border-box; width: 100%; max-width: none; padding: 9px 11px; border: 1px solid var(--card-border); border-radius: 8px; background: var(--soft, transparent); color: var(--text); font: inherit; }
#siForm input:focus { outline: 2px solid var(--accent-line); border-color: var(--accent); }
#siForm .row .btn { flex: 0 0 auto; }
/* Contact labels (9/30): Personal / Work, Mobile / Landline / Work / VoIP, and the source. */
.list-table .ctag { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 999px; border: 1px solid var(--card-border); font-size: 10.5px; font-weight: 600; color: var(--muted); white-space: nowrap; }
/* Lists by client (9/30): a client row drops down to its roles. */
.list-table.ov tr.client-row { cursor: pointer; }
.list-table.ov tr.client-row .chev { display: inline-block; width: 16px; color: var(--muted); }
.list-table.ov tr.role-row td:first-child { padding-left: 36px; }
.list-table.ov tr.role-row { cursor: pointer; background: var(--soft, transparent); }
/* Why column (9/30): three lines, click for the whole reason. */
.list-table td.why .why-txt { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; cursor: pointer; }
.list-table td.why .why-txt.open { display: block; -webkit-line-clamp: unset; line-clamp: unset; }

/* Contact card (9/30). */
.list-table .more-btn { background: none; border: 0; padding: 0 2px; color: var(--accent); font: inherit; font-size: 12px; font-weight: 650; cursor: pointer; text-decoration: underline; }
#ctDlg { width: min(560px, calc(100vw - 32px)); }
#ctDlg .ct-h { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 4px 0 6px; }
#ctDlg .ct-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 0; border-top: 1px solid var(--card-border); }
#ctDlg .ct-row:first-child { border-top: 0; }
#ctDlg .ct-row .ctag { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 999px; border: 1px solid var(--card-border); font-size: 10.5px; font-weight: 600; color: var(--muted); }
#ctDlg .ct-row .btn { flex: 0 0 auto; }

/* Outreach setup on the upload (10/1): the template box and the "sending as" line. */
.tpl-box { border: 1px solid var(--card-border); border-radius: 10px; padding: 8px 12px; }
.tpl-box > summary { cursor: pointer; list-style-position: inside; }
.tpl-box textarea { width: 100%; min-height: 160px; resize: vertical; font: inherit; }
.tpl-box input { width: 100%; }
.tpl-box code { font-size: 12px; }
.md-from { margin-top: 4px; }
.md-from b { color: var(--accent, inherit); }

/* Top bar mailbox light (10/1): green = connected, red = not. */
.topbar .mailstate { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; }
.mail-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; background: #e5484d; box-shadow: 0 0 0 2px color-mix(in srgb, #e5484d 25%, transparent); }
.mail-dot.on { background: #30a46c; box-shadow: 0 0 0 2px color-mix(in srgb, #30a46c 25%, transparent); }
.topbar .barright { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* The signature under each email preview (10/1): what the reader will see, not editable here. */
.md-sig { margin-top: 10px; padding: 10px 12px; border: 1px dashed var(--card-border); border-radius: 8px; font-family: Aptos, Calibri, Arial, sans-serif; font-size: 14px; line-height: 1.35; }
.md-sig a { color: #4f8cff; }
.md-sig img { margin-top: 6px; display: block; }
.md-sig-note { margin-top: 6px; font-family: inherit; }

/* Lists tab (10/1): My roles + All roles, like the Search Kit. */
.browse-h { margin: 6px 0 8px; font-size: 15px; }
#browseBody .scroll8 thead th { position: sticky; top: 0; background: var(--card, var(--bg)); z-index: 1; }
/* Lists tab filters (10/27): side by side, wrapping on a narrow screen, like the Roles tab. */
#browseFilters .list-filter { flex: 0 1 160px; width: 160px; min-width: 120px; }
#browseFilters #lfClient { flex-basis: 190px; width: 190px; }
#browseFilters .lf-date { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
#browseFilters input[type=date] { font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--card-border); border-radius: 6px; padding: 6px 8px; color-scheme: light dark; }
#btnClearListFilters { flex: none; }
#listsCount { white-space: nowrap; }