* { box-sizing: border-box; }
body { font-family: "Segoe UI", system-ui, sans-serif; font-size: 13px; margin: 0; padding: 10px 14px; background: #fafafa; color: #1a1a1a; }
.app-title { font-size: 20px; margin: 0; outline: none; border: none; user-select: none; } /* static heading -- never shows a selection/focus outline, selected or not */

/* Three-column grid (not flex + space-between) so "MailTrack" sits genuinely centered
   in the window regardless of how wide the logo or the right-hand controls are --
   space-between only visually centers the middle when both sides are equal width. */
.app-header { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; margin-bottom: 10px; }
.app-header .app-logo { grid-column: 1; justify-self: start; }
.app-header .app-title { grid-column: 2; justify-self: center; }
.app-header .header-right { grid-column: 3; justify-self: end; }

.app-logo { height: 30px; width: auto; display: block; }
.header-right { display: flex; align-items: center; gap: 10px; }
.signed-in-as { font-size: 12px; color: #555; display: flex; align-items: center; gap: 8px; }
.signed-in-as form { display: inline; margin: 0; }

/* Login / setup-link pages (plain HTML, served outside the Blazor render tree) */
.auth-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.auth-card { background: #fff; border: 1px solid #ddd; border-radius: 6px; padding: 24px 28px; width: 320px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 4px 20px rgba(0,0,0,.08); }
.auth-card .app-title { text-align: center; } /* centered under the logo above it */
.auth-card label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: #555; }
.auth-card input { font-size: 13px; padding: 6px 8px; border: 1px solid #ccc; border-radius: 3px; }
.auth-card button { margin-top: 6px; }
.auth-logo { height: 40px; width: auto; align-self: center; display: block; }

.toolbar { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; margin-bottom: 8px; }
.toolbar label { display: flex; flex-direction: column; gap: 2px; font-size: 11px; color: #555; }
.toolbar select, .toolbar input { font-size: 13px; padding: 3px 5px; }
.toolbar-sep { width: 1px; align-self: stretch; background: #ddd; margin: 0 4px; }
.toolbar-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.refresh-inline { background: #fef3c7; border: 1px solid #f59e0b; padding: 3px 10px; border-radius: 3px; font-size: 12px; white-space: nowrap; }
button { font-size: 13px; padding: 4px 12px; cursor: pointer; border: 1px solid #999; background: #fff; border-radius: 3px; }
button:hover:not(:disabled) { background: #eef4ff; }
button:disabled { opacity: .5; cursor: default; }
button.primary { background: #2563eb; border-color: #2563eb; color: #fff; }
button.primary:hover:not(:disabled) { background: #1d4ed8; }
button.release-btn { font-weight: bold; background: #15803d; border-color: #15803d; color: #fff; }
button.release-btn:hover:not(:disabled) { background: #116932; }
button.report-fp-btn { font-weight: bold; background: #C0FFC0; border-color: #8fd98f; color: #000; } /* same light green as the .o-success row colour */
button.report-fp-btn:hover:not(:disabled) { background: #a8f0a8; }
button.report-arm-btn { font-weight: bold; background: #000; border-color: #000; color: #fff; }
button.report-arm-btn:hover:not(:disabled) { background: #2a2a2a; }
button.already-sniffed-btn { background: #d1d5db; border-color: #d1d5db; color: #000; } /* shown instead of report-arm-btn once Sniffer Score > 1 */
.safeserve-score-flag { display: inline-block; padding: 2px 8px; border-radius: 3px; background: #FFFF80; border: 2px solid #000; color: #000; font-weight: bold; font-size: 150%; white-space: nowrap; } /* default yellow, same as the .o-harvest row colour */
.safeserve-score-flag.score-green { background: #C0FFC0; } /* score > 25 -- same light green as .o-success / report-fp-btn */
.safeserve-score-flag.score-red { background: #FF8080; } /* score > 24 (and not > 25, so only exactly 25 for integer scores) -- same light red as .o-smtpblock */
button.small { padding: 1px 8px; font-size: 12px; }
button.small.active { background: #2563eb; border-color: #2563eb; color: #fff; }

.status { color: #555; }
.error { color: #b91c1c; }
.ok { color: #15803d; }
.muted { color: #777; }
.warnings summary { cursor: pointer; color: #92400e; }
.refresh-banner { background: #fef3c7; border: 1px solid #f59e0b; padding: 6px 10px; margin-bottom: 8px; border-radius: 3px; display: flex; gap: 10px; align-items: center; }
.counters { align-self: center; white-space: nowrap; }
.chip { align-self: center; background: #dbeafe; border: 1px solid #93c5fd; border-radius: 10px; padding: 2px 8px; white-space: nowrap; }
.chip-x { border: none; background: none; padding: 0 0 0 4px; }

.content-row { display: flex; gap: 0; height: calc(100vh - 170px); min-height: 320px; }
.table-scroll { overflow: auto; border: 1px solid #ccc; background: #fff; flex: 1 1 auto; }
.grid { border-collapse: collapse; width: 100%; }
.grid th { position: sticky; top: 0; background: #f1f5f9; border-bottom: 2px solid #94a3b8; padding: 4px 8px; text-align: left; cursor: pointer; white-space: nowrap; user-select: none; overflow: hidden; text-overflow: ellipsis; }
.grid td { padding: 3px 8px; border-bottom: 1px solid #eee; white-space: nowrap; max-width: 340px; overflow: hidden; text-overflow: ellipsis; }
.grid tbody tr { height: 27px; cursor: default; }
.grid tbody tr.selected td { outline: 2px solid #2563eb; outline-offset: -2px; }

/* Fixed column widths (set per-column in Home.razor) so columns don't visually shift
   as virtualized rows scroll in/out, or as scores populate live in the background —
   table-layout:auto would otherwise recompute widths from whatever rows are currently
   rendered. Scoped to the main grid only; the report modal's small, non-virtualized
   table is fine with the browser's normal content-based auto layout. */
.main-grid { table-layout: fixed; }

/* Compact mode (ToggleViewMode): tighter horizontal padding on every column, freeing up
   more width for Subject Line -- which is itself left unconstrained (ColWidth in
   Home.razor) so it's the one column that actually absorbs that freed-up space, rather
   than it being spread thinly across every remaining column. */
.main-grid.compact th, .main-grid.compact td { padding-left: 4px; padding-right: 4px; }

/* Outcome colours: defaults from the WinForms app's settings */
.o-success        { background: #C0FFC0; color: #000; }
.o-smtpblock      { background: #FF8080; color: #000; }
.o-blacklisted    { background: #000000; color: #fff; }
.o-spam           { background: #9ACD32; color: #000; }
.o-harvest        { background: #FFFF80; color: #000; }
.o-datafail       { background: #FFC080; color: #000; }
.o-authfail       { background: #800000; color: #fff; }
.o-servicena      { background: #80FFFF; color: #000; }
.o-nouser         { background: #7B68EE; color: #000; }

.detail-resizer { flex: 0 0 auto; width: 10px; margin: 0 -1px; cursor: col-resize; position: relative; z-index: 1; }
.detail-resizer:hover::after, .detail-resizer:active::after {
    content: ""; position: absolute; top: 0; bottom: 0; left: 4px; width: 2px; background: #2563eb;
}

.detail-panel { flex: 0 0 auto; min-width: 0; border: 1px solid #ccc; background: #fff; display: flex; flex-direction: column; }
.detail-panel.collapsed { width: auto; }
.detail-header { display: flex; gap: 8px; align-items: center; padding: 5px 8px; border-bottom: 1px solid #ddd; background: #f1f5f9; }
.detail-header .collapse-btn { flex: 0 0 auto; }
.detail-lines { flex: 1; overflow: auto; margin: 0; padding: 8px; font-size: 11px; line-height: 1.45; white-space: pre-wrap; word-break: break-all; }
.detail-panel .muted { padding: 8px; }

/* align-items is flex-start (not center) with a fixed top padding, not centered --
   centering re-measures against the modal's content height, which varies email to
   email (attachments, status/error banners, ...), so the modal's top edge -- and the
   Close/nav arrows anchored to it -- would shift a few pixels on every navigation. */
.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.35); display: flex; align-items: flex-start; justify-content: center; padding-top: 6vh; z-index: 10; }
/* overflow:auto (rather than visible) is required for `resize` to take effect, and also
   means that if a modal is resized shorter than its own content, the whole box scrolls
   as a unit instead of clipping. */
.modal { position: relative; background: #fff; border-radius: 6px; padding: 12px 16px; max-width: 90vw; max-height: 85vh; min-width: 520px; min-height: 260px; display: flex; flex-direction: column; overflow: auto; resize: both; box-shadow: 0 8px 30px rgba(0,0,0,.25); }
.modal.email-modal { width: 1100px; max-width: 92vw; } /* default size the first time it's opened; mailtrackInitEmailModalResize (mailtrack.js) restores whatever size was last dragged after that */
.modal-title { padding-right: 50px; margin-bottom: 6px; } /* right-hand gap clears the X close button in the corner */
.email-modal .modal-title { padding-right: 480px; } /* wider still, to also clear the floating Safeserve score badge + "Already in Sniffer spam database" + arrows group */
.modal-scroll { overflow: auto; max-height: 60vh; }
.modal-actions { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.ai-analysis-box { background: #eff6ff; border: 1px solid #93c5fd; border-radius: 4px; padding: 8px 12px; margin-bottom: 8px; line-height: 1.4; }
.ai-analysis-box.error { background: #fef2f2; border-color: #fca5a5; }

.report-grid tbody { user-select: none; } /* avoid native text-selection fighting with shift-click range select */

/* Pinned to the modal's top-right corner instead of sitting in the title row's flex
   flow -- otherwise the row had to be as tall as this whole stack (Close + both arrows),
   which pushed the actions row well below the filename. Floating it here also means it
   stays put as you navigate rows (filename length/content changing no longer reflows it). */
/* align-items:flex-end (not center) so the arrow stack lines up under the right edge of
   the row above it -- i.e. under Close specifically -- regardless of how wide that row
   gets from the "Sniffed" flag or the ARM Research button also living in it. */
.close-nav-group { position: absolute; top: 34px; right: 16px; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; } /* top matches the modal-actions button row below the filename, not the filename itself */
.close-row { display: flex; flex-direction: row; align-items: center; gap: 8px; }
/* Same font-size/padding as an ordinary button (no "small"), but filled/bold like .primary
   so Close reads clearly against the rest of the modal's actions. */
.close-btn { width: 30px; height: 30px; padding: 0; font-weight: 900; font-size: 16px; line-height: 1; color: #fff; background: #dc2626; border-color: #dc2626; }
.close-btn:hover { background: #b91c1c; }
.report-close-btn { position: absolute; top: 12px; right: 16px; } /* flush with the modal's own top-right corner -- no arrow stack below it to align with, unlike the email modal's close-nav-group */
.email-nav { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.email-nav .nav-arrow { width: auto; height: auto; padding: 8px; display: flex; align-items: center; justify-content: center; }
.email-nav .nav-arrow-icon { width: 28px; height: 28px; fill: currentColor; display: block; }
.email-nav .nav-down .nav-arrow-icon { transform: rotate(180deg); }
.email-nav .nav-arrow:hover:not(:disabled) { background: #2563eb; border-color: #2563eb; color: #fff; }

.email-meta { font-size: 12px; line-height: 1.6; margin-bottom: 8px; }
.email-attachments { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.email-frame { width: 100%; height: 50vh; border: 1px solid #ccc; background: #fff; }

.hover-anchor { position: relative; overflow: visible !important; }
/* Position (left/top) is set by JS (mailtrackInitHoverTooltip in mailtrack.js), tracking
   the actual cursor rather than the row's position in the table -- important once a row's
   hover-anchor cell can be scrolled far from the cursor horizontally. */
.hover-tooltip {
    position: fixed; z-index: 30;
    background: #fff; color: #1a1a1a; border: 1px solid #ccc; padding: 6px 10px; border-radius: 4px;
    font-size: 12px; line-height: 1.4; white-space: normal; max-width: 420px;
    box-shadow: 0 4px 14px rgba(0,0,0,.25); pointer-events: none;
}