/* The app's own styles on top of Sneat (core.css + theme-default.css). The accent is Sneat's primary, #696cff. */

/* The brand: the logo (img/logo.svg) and the product's name in Sora, as SalesBullet's wordmark */
.brand-logo { height: 30px; width: auto; display: block; }
.brand-word { font-family: 'Sora', 'Public Sans', sans-serif; font-weight: 700; letter-spacing: -0.02em; color: var(--bs-heading-color); }
/* The name breaks only between "SalesBullet" and "Email Verifier" (_BrandName) — a phone's sign-in card wraps it there */
.brand-word .brand-first, .brand-word .brand-rest { white-space: nowrap; }

/* The top bar: the page's title on the left; never wider than a phone */
#navbar-collapse { min-width: 0; }
.navbar-title { min-width: 0; }
.navbar-email { max-width: 18rem; }

/* The template never wraps a field's label: a long one went past a phone's edge */
body .form-label { white-space: normal; }

/* htmx: a spinner shows only while its request runs (the icon beside it steps aside) */
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: inline-block; }
.htmx-request .htmx-hide-on-request { display: none; }

/* Sign-in pages (_BlankLayout): one card in the middle — Sneat's "basic" auth page */
.authentication-wrapper { display: flex; min-height: 100vh; width: 100%; }
.authentication-wrapper.authentication-basic { align-items: center; justify-content: center; }
.authentication-wrapper .authentication-inner { width: 100%; max-width: 440px; }
.authentication-wrapper .card { padding: 1.25rem; }
.authentication-wrapper .app-brand { justify-content: center; margin-bottom: 1.5rem; }
.authentication-wrapper .brand-logo { height: 36px; }
.authentication-wrapper .brand-word { font-size: 1.5rem; }
@media (max-width: 575.98px) { .authentication-wrapper .card { padding: 0.5rem; } }

/* "Continue with Google" (_GoogleSignIn): Google's own white button, then an "or with your email" divider */
.btn-google { --bs-btn-bg: #fff; --bs-btn-border-color: #dadce0; --bs-btn-color: #1f1f1f;
  --bs-btn-hover-bg: #f7f8f8; --bs-btn-hover-border-color: #dadce0; --bs-btn-hover-color: #1f1f1f;
  --bs-btn-active-bg: #f1f3f4; --bs-btn-active-border-color: #dadce0; --bs-btn-active-color: #1f1f1f;
  display: flex; align-items: center; justify-content: center; gap: 0.6rem; font-weight: 500; }
.auth-or { display: flex; align-items: center; gap: 0.75rem; margin: 1.4rem 0; color: #8b8fae; font-size: 0.85rem; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: #e7e8f3; }

/* A verdict (Views/Shared/_StatusBadge): the public site's pill and colours (marketing.css .status), so the site and the
   app say "Safe" the same way — darker than Sneat's label colours, which are too faint to read on their tints */
.status-badge { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.28rem 0.7rem; border-radius: 999px; font-size: 0.8125rem; font-weight: 700; line-height: 1.2; white-space: nowrap; }
.status-badge i { font-size: 1.05rem; }
.status-badge.status-safe { background: #e8fbf1; color: #16935c; }
.status-badge.status-invalid { background: #fdecec; color: #d03b3b; }
.status-badge.status-catch_all { background: #fff6e5; color: #b97700; }
.status-badge.status-unknown { background: #eef0f6; color: #5c6183; }

/* Admin → Overview: the counters (two by two on a phone) and the result of "Check an address" */
@media (max-width: 575.98px) { .stat-card .card-body { flex-direction: column; align-items: flex-start !important; gap: 0.75rem !important; padding: 1.25rem; } }
.check-result .result-email { font-size: 1.125rem; word-break: break-all; }
.check-result .badge { font-size: 0.875rem; }
.check-result dl { margin-bottom: 0; }
.check-result dt { font-weight: 500; color: var(--bs-secondary-color); }
.check-result dd { word-break: break-word; }

/* Admin → Error logs */
.log-table td { vertical-align: top; }
@media (min-width: 768px) { .log-table .log-message { min-width: 18rem; } }
.log-table .log-text { white-space: pre-wrap; word-break: break-word; }
.log-table details summary { cursor: pointer; }
.log-stack { white-space: pre-wrap; font-size: 0.75rem; background: var(--bs-gray-60); padding: 0.5rem 0.75rem; border-radius: 0.375rem; margin: 0.5rem 0 0; max-height: 24rem; overflow: auto; }

/* ---- The customer app (Views/App) ---- */

/* The menu's brand (both areas): the logo and the name stacked — "SalesBullet" over a smaller "Email Verifier" — clear of
   the collapse button on the menu's edge (on one line the whole name ran 9px past the menu) */
.layout-menu .app-brand { padding-right: 1rem; }
.layout-menu .app-brand-text { font-size: 1rem; display: inline-flex; flex-direction: column; line-height: 1.15; }
.layout-menu .app-brand-text .brand-rest { font-size: 0.75rem; font-weight: 600; letter-spacing: 0; color: var(--bs-secondary-color); }

/* Credits (Dashboard, larger on Plan) */
.credits-number { font-size: 2rem; font-weight: 700; line-height: 1.15; color: var(--bs-heading-color); }
.credits-card-lg .credits-number { font-size: 2.75rem; }
.credits-progress { height: 6px; }

/* Verify: the four results, a line each */
.result-meanings li { display: flex; align-items: center; gap: 0.75rem; padding: 0.35rem 0; }
.result-meanings .status-badge { min-width: 6.75rem; justify-content: center; }

/* Lists: the upload box, the progress, the results in one line (a dot in each status's colour) and as tiles */
.upload-drop { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; margin: 0; padding: 2rem 1rem; text-align: center; border: 2px dashed var(--bs-border-color); border-radius: 0.5rem; cursor: pointer; }
.upload-drop i { font-size: 2.5rem; color: var(--bs-primary); }
.upload-drop:hover, .upload-drop.upload-drop-over { border-color: var(--bs-primary); background: rgba(105, 108, 255, 0.06); }
.list-tabs .nav-link { padding: 0.35rem 0.85rem; }
.lists-table .list-name { min-width: 9rem; word-break: break-word; }
.lists-table .list-state { min-width: 7rem; }
.lists-table tbody tr.clickable-row { cursor: pointer; }
.list-progress { height: 6px; max-width: 8rem; }
.list-progress-lg { height: 10px; }
.list-heading { min-width: 0; }
.list-counts .count { display: inline-flex; align-items: center; gap: 0.35rem; margin-right: 0.75rem; font-size: 0.8125rem; }
.list-counts .count::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--dot); }
.count-safe { --dot: #16935c; }
.count-invalid { --dot: #d03b3b; }
.count-catch_all { --dot: #b97700; }
.count-unknown { --dot: #5c6183; }
.count-tile { padding: 0.875rem 1rem; border-radius: 0.5rem; }
.count-tile-safe { background: #e8fbf1; color: #16935c; }
.count-tile-invalid { background: #fdecec; color: #d03b3b; }
.count-tile-catch_all { background: #fff6e5; color: #b97700; }
.count-tile-unknown { background: #eef0f6; color: #5c6183; }
.count-tile-number { font-size: 1.5rem; font-weight: 700; line-height: 1.2; }
.count-tile-label { display: flex; justify-content: space-between; gap: 0.5rem; font-size: 0.8125rem; font-weight: 600; }
.count-tile-label span { font-weight: 500; opacity: 0.8; }
.download-button .download-count { margin-left: 0.5rem; padding: 0 0.45rem; border-radius: 999px; background: rgba(105, 108, 255, 0.16); font-size: 0.75rem; }
.results-table .result-cell { min-width: 11rem; overflow-wrap: anywhere; }

/* API keys, Webhooks: example code */
.code-snippet { margin: 0; padding: 0.875rem 1rem; border-radius: 0.375rem; background: #f5f5f9; color: #384551; font-size: 0.8125rem; line-height: 1.5; white-space: pre; overflow-x: auto; }
.code-snippet code { color: inherit; font-size: inherit; }

/* Status pages (Views/Error): the code, large and quiet, above the title */
.error-code { font-family: 'Sora', 'Public Sans', sans-serif; font-size: 3rem; font-weight: 700; line-height: 1; color: var(--bs-primary); opacity: 0.85; }