/*
 * Alfred brand theme — extends Bootstrap 5.3 (already loaded via CDN in
 * base.html) with the tokens from the Alfred brand identity guide v1
 * (cream & forest direction). Load this AFTER the Bootstrap stylesheet.
 *
 * Approach: retint Bootstrap's own component classes (.btn, .card, .badge,
 * .form-control, .navbar, .alert, .table) via CSS variables and targeted
 * overrides, rather than introducing a parallel class system. Existing
 * templates (queue.html, action_detail.html, customer_lookup.html, etc.)
 * need no markup changes — their existing Bootstrap classes (btn-primary,
 * bg-secondary, badge, card…) simply render in the new palette.
 *
 * Fonts are self-hosted (app/static/fonts/), not loaded from Google's CDN —
 * avoids an external network dependency + IP leak on every page load, in
 * keeping with this project's existing privacy discipline (e.g. Sentry's
 * send_default_pii=False). Both families are variable fonts; Google serves
 * one file per script subset covering the whole weight range, not one file
 * per discrete weight — confirmed by fetching the real Google Fonts CSS
 * before assuming otherwise, same "check the real thing" discipline this
 * project applies to every external API.
 */

@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('/static/fonts/bricolage-grotesque-variable.woff2') format('woff2');
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/static/fonts/hanken-grotesk-variable.woff2') format('woff2');
}

:root {
  --alfred-cream: #FBF7EF;
  --alfred-card: #F1E9D8;
  --alfred-border: #DCCBAA;
  --alfred-tan: #B99F6E;
  --alfred-ink: #2A2419;
  --alfred-ink-2: #635A44;
  --alfred-forest: #2F4A32;
  --alfred-forest-dark: #23381F;
  --alfred-forest-tint: #E3ECDF;
  /* The brand's one deliberate red — previously only used inline for
     excluded.html's suspected-phishing row highlight (table-danger below),
     never promoted to a token. Reused here rather than inventing a new
     color, so there's still only one "red" in the whole app. */
  --alfred-red: #7A3226;
  --alfred-red-tint: #F1DAD3;
  --alfred-red-border: #E0B8AC;
  --alfred-heading-font: 'Bricolage Grotesque', sans-serif;
  --alfred-body-font: 'Hanken Grotesk', sans-serif;

  --bs-body-font-family: var(--alfred-body-font);
  --bs-body-color: var(--alfred-ink);
  --bs-body-bg: var(--alfred-cream);
  --bs-link-color: var(--alfred-forest);
  --bs-link-color-rgb: 47, 74, 50;
  --bs-link-hover-color: var(--alfred-forest-dark);
  --bs-border-color: var(--alfred-border);
  --bs-border-radius: 0.625rem;
  --bs-border-radius-sm: 0.5rem;
  --bs-border-radius-lg: 0.875rem;
  --bs-border-radius-xl: 1rem;
  --bs-border-radius-pill: 999px;

  /* Bootstrap's "subtle background / emphasis text" utility pair
     (bg-info-subtle / text-info-emphasis, used by users.html's Team
     Leader badge) reads from these variables — not the plainer
     .badge.bg-info rule below, which is a different Bootstrap pattern.
     Mapped to the same forest-tint/forest-dark pairing already used for
     bg-success/bg-warning below, for a consistent "affirmative" tone. */
  --bs-info-bg-subtle: var(--alfred-forest-tint);
  --bs-info-text-emphasis: var(--alfred-forest-dark);

  /* Design refresh (2026-08-03, Claude Design's Queue/Action Detail mock) —
     cards render at a more generous 16px radius and badges/pills are fully
     rounded rather than the 10px-rectangle Bootstrap default. Overriding
     Bootstrap's own component-scoped variables (not the global
     --bs-border-radius, which buttons/inputs/etc. also read) keeps this
     scoped to cards and badges only, everywhere in the app at once, rather
     than hand-editing every template. --bs-card-inner-border-radius must
     move with --bs-card-border-radius or a card's header/footer corners
     stay at the old 10px and visibly clash with its own rounder outline. */
  --bs-card-border-radius: var(--bs-border-radius-xl);
  --bs-card-inner-border-radius: var(--bs-border-radius-xl);
  --bs-badge-border-radius: var(--bs-border-radius-pill);
}

body {
  background: var(--alfred-cream);
  color: var(--alfred-ink);
}

h1, h2, h3, h4, h5, h6, .navbar-brand, .card-title, .fw-semibold {
  font-family: var(--alfred-heading-font);
}

a { color: var(--alfred-forest); }
a:hover { color: var(--alfred-forest-dark); }

::selection { background: var(--alfred-forest-tint); color: var(--alfred-forest-dark); }

.navbar {
  background: var(--alfred-cream) !important;
  border-bottom: 1px solid var(--alfred-border);
  box-shadow: none !important;
}
.navbar .nav-link-brand {
  color: var(--alfred-ink-2) !important;
  font-weight: 500;
  opacity: 1 !important;
}
.navbar .nav-link-brand:hover,
.navbar .nav-link-brand.active {
  color: var(--alfred-forest-dark) !important;
}
.navbar-brand { color: var(--alfred-ink) !important; font-weight: 600; }

.btn { font-family: var(--alfred-body-font); font-weight: 600; }
.btn-primary, .btn-success {
  background-color: var(--alfred-forest);
  border-color: var(--alfred-forest);
  color: var(--alfred-cream);
}
.btn-primary:hover, .btn-success:hover,
.btn-primary:active, .btn-success:active {
  background-color: var(--alfred-forest-dark) !important;
  border-color: var(--alfred-forest-dark) !important;
  color: var(--alfred-cream) !important;
}
.btn-dark {
  background-color: var(--alfred-forest);
  border-color: var(--alfred-forest);
  color: var(--alfred-cream);
}
.btn-dark:hover, .btn-dark:active {
  background-color: var(--alfred-forest-dark) !important;
  border-color: var(--alfred-forest-dark) !important;
}
.btn-outline-secondary, .btn-outline-primary {
  color: var(--alfred-ink);
  border-color: var(--alfred-border);
}
.btn-outline-secondary:hover, .btn-outline-primary:hover,
.btn-outline-secondary:active, .btn-outline-primary:active {
  background-color: var(--alfred-forest-tint) !important;
  border-color: var(--alfred-border) !important;
  color: var(--alfred-forest-dark) !important;
}
/* Reject/Decline confirm buttons — a muted, non-alarming confirm state
   rather than red, in keeping with the brand's calm/no-orange palette. */
.btn-danger, .btn-secondary {
  background-color: var(--alfred-tan);
  border-color: var(--alfred-tan);
  color: var(--alfred-ink);
}
.btn-danger:hover, .btn-secondary:hover {
  filter: brightness(0.94);
  color: var(--alfred-ink) !important;
}
.btn-outline-danger, .btn-outline-success {
  color: var(--alfred-ink-2);
  border-color: var(--alfred-border);
}
.btn-outline-danger:hover, .btn-outline-success:hover {
  background-color: var(--alfred-card) !important;
  border-color: var(--alfred-border) !important;
  color: var(--alfred-ink) !important;
}
/* Deactivate — a real caution action (found live, on users.html), same
   muted-tan "confirm state" reasoning as .btn-danger/.btn-secondary above,
   just as an outline rather than filled. */
.btn-outline-warning {
  color: var(--alfred-ink-2);
  border-color: var(--alfred-tan);
}
.btn-outline-warning:hover {
  background-color: var(--alfred-tan) !important;
  border-color: var(--alfred-tan) !important;
  color: var(--alfred-ink) !important;
}
.btn:focus-visible, .form-control:focus, .form-select:focus {
  outline: 2px solid var(--alfred-forest);
  outline-offset: 1px;
  box-shadow: none !important;
  border-color: var(--alfred-forest) !important;
}
.btn-check:checked + .btn,
.btn.active {
  background-color: var(--alfred-forest) !important;
  border-color: var(--alfred-forest) !important;
  color: var(--alfred-cream) !important;
}

.card {
  background: var(--alfred-card);
  border-color: var(--alfred-border);
  box-shadow: 0 1px 2px rgba(42, 36, 25, 0.06) !important;
  /* Without this, a card's own rounded corner only clips its background —
     content flush against that corner (e.g. queue.html's "Review" button,
     the last thing in the last table row) visually pokes past the curve
     into the page background behind it, since border-radius alone doesn't
     crop child elements. Confirmed no dropdown/tooltip/popover content
     anywhere relies on overflowing a .card, so this is safe app-wide. */
  overflow: hidden;
}
.card-header, .card-footer {
  background: transparent;
  border-color: var(--alfred-border);
}

.form-control, .form-select {
  background-color: var(--alfred-cream);
  border-color: var(--alfred-border);
  color: var(--alfred-ink);
}
.form-control::placeholder { color: var(--alfred-ink-2); opacity: 0.7; }
.form-check-input:checked {
  background-color: var(--alfred-forest);
  border-color: var(--alfred-forest);
}

/* Badges — remap Bootstrap contextual colors to brand tones so the
   existing STATUS_BADGE / STATUS_COLOR maps in queue.html and
   action_detail.html need no changes. */
.badge.bg-secondary { background-color: var(--alfred-card) !important; color: var(--alfred-ink-2) !important; border: 1px solid var(--alfred-border); }
.badge.bg-warning   { background-color: var(--alfred-forest-tint) !important; color: var(--alfred-forest-dark) !important; }
.badge.bg-success   { background-color: var(--alfred-forest-tint) !important; color: var(--alfred-forest-dark) !important; }
.badge.bg-info      { background-color: var(--alfred-card) !important; color: var(--alfred-ink) !important; border: 1px solid var(--alfred-border); }
.badge.bg-danger    { background-color: var(--alfred-ink) !important; color: var(--alfred-cream) !important; }
.badge.bg-dark      { background-color: var(--alfred-tan) !important; color: var(--alfred-cream) !important; }
.badge.bg-light     { background-color: var(--alfred-cream) !important; color: var(--alfred-ink-2) !important; border: 1px solid var(--alfred-border); }
/* A deliberately stronger, genuinely red variant for a status that needs to
   actually alarm the viewer (e.g. a connector's real, broken health state)
   -- distinct from the shared .badge.bg-danger above, which every other
   "something's wrong" badge across the app already uses and which this
   change is deliberately not touching. Same solid-fill/light-text weight
   as bg-danger, just red instead of ink. */
.badge-alert-red    { background-color: var(--alfred-red) !important; color: var(--alfred-cream) !important; }

.alert-success { background-color: var(--alfred-forest-tint); color: var(--alfred-forest-dark); border-color: var(--alfred-forest-tint); }
.alert-warning { background-color: var(--alfred-card); color: var(--alfred-ink); border-color: var(--alfred-border); }
.alert-danger  { background-color: var(--alfred-ink); color: var(--alfred-cream); border-color: var(--alfred-ink); }
.alert-info    { background-color: var(--alfred-card); color: var(--alfred-ink-2); border-color: var(--alfred-border); }

.table > :not(caption) > * > * { background-color: transparent; color: var(--alfred-ink); }
.table-light, thead.table-light th { background-color: var(--alfred-card) !important; color: var(--alfred-ink-2); border-color: var(--alfred-border); }
.table-hover > tbody > tr:hover > * { background-color: var(--alfred-forest-tint); }
.table > :not(:first-child) { border-color: var(--alfred-border); }
/* excluded.html flags a suspected-phishing row with table-danger. Bootstrap
   normally reads this variant through --bs-table-bg on each cell, but the
   generic cell rule two lines up hardcodes background-color: transparent
   (confirmed live — the variable-only approach silently did nothing), so
   this needs the same direct !important override already used for
   .table-light above, not Bootstrap's own variable mechanism. A dusty-rose
   tint rather than reusing badge.bg-danger's solid dark treatment: that one
   is sized for a small badge, not a full row of body text. Values now
   pulled from the shared --alfred-red* tokens above (added alongside
   .badge-alert-red) rather than hardcoded a second time — same colors,
   same rendered result. */
.table-danger, .table-danger > * {
  background-color: var(--alfred-red-tint) !important;
  color: var(--alfred-red) !important;
  border-color: var(--alfred-red-border) !important;
}
/* A Subject cell can hold a very long, unbroken string with no natural
   break point — a URL or a class name inside an alert email's own subject
   line (real example: a Sentry/GoDaddy notification landing in the queue).
   Bootstrap's default auto table layout sizes a column to fit such content
   without ever wrapping it, which can push the whole table wider than its
   .card — and .card clips that overflow (see the .card rule above), so the
   row's own trailing button (Review, Requeue) silently disappears off the
   right edge. Letting long content break anywhere keeps the column, and so
   the table, within the card's real width. */
.subject-cell {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.bg-primary { background-color: var(--alfred-forest) !important; color: var(--alfred-cream) !important; }
.bg-light   { background-color: var(--alfred-forest-tint) !important; color: var(--alfred-forest-dark) !important; }

textarea.font-monospace { font-family: var(--alfred-body-font) !important; font-size: 0.9rem; line-height: 1.6; }

/* Cookie consent card — a small corner card shown once per browser (per
   re-ask window) on the public marketing pages (homepage, pilot-request),
   driven by /static/js/cookie-consent.js. Lives here rather than a
   page-scoped <style> block since it's meant to be shared markup, not
   homepage-specific. Nothing is actually gated behind either choice today
   (no analytics/marketing cookies exist yet) — the two answers are kept
   distinct on purpose so a future tracker can check
   window.alfredCookieConsent.allowsAll() before loading, once one exists. */
.cookie-consent {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 1050;
  width: 340px;
  max-width: calc(100vw - 2rem);
  background: var(--alfred-cream);
  border: 1px solid var(--alfred-border);
  border-radius: var(--bs-border-radius-lg);
  box-shadow: 0 10px 30px rgba(42, 36, 25, 0.18);
  padding: 1.1rem 1.2rem 1.2rem;
  font-family: var(--alfred-body-font);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}
.cookie-consent.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.cookie-consent-text { margin: 0 0 0.85rem; font-size: 0.85rem; line-height: 1.5; color: var(--alfred-ink-2); }
.cookie-consent-text a { color: var(--alfred-forest); font-weight: 600; }
.cookie-consent-actions { display: flex; gap: 0.5rem; }
.cookie-consent-btn {
  flex: 1;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.5rem 0.7rem;
  border-radius: var(--bs-border-radius);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  font-family: var(--alfred-body-font);
}
.cookie-consent-btn-primary { background: var(--alfred-forest); color: var(--alfred-cream); }
.cookie-consent-btn-primary:hover { background: var(--alfred-forest-dark); }
.cookie-consent-btn-secondary { background: transparent; color: var(--alfred-ink); border-color: var(--alfred-border); }
.cookie-consent-btn-secondary:hover { background: var(--alfred-card); }

@media (max-width: 420px) {
  .cookie-consent { right: 0.6rem; bottom: 0.6rem; left: 0.6rem; width: auto; }
  .cookie-consent-actions { flex-direction: column; }
}

/* "Alfred is thinking" indicator — shared by every chat surface (the
   floating widget, the embedded connector-setup panels, the standalone
   customer lookup, and the review-page assistant), all of which already
   render an assistant reply as a bg-light bubble; this reuses that same
   shape so it reads as "a reply is on its way," not a separate widget. */
.chat-thinking-bubble { display: inline-flex; align-items: center; gap: 0.3rem; }
.chat-thinking-dot {
  display: inline-block;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--alfred-ink-2);
  animation: chat-thinking-bounce 1.1s infinite ease-in-out both;
}
.chat-thinking-dot:nth-child(1) { animation-delay: -0.24s; }
.chat-thinking-dot:nth-child(2) { animation-delay: -0.12s; }
.chat-thinking-dot:nth-child(3) { animation-delay: 0s; }

@keyframes chat-thinking-bounce {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }
  40% { transform: scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .chat-thinking-dot { animation: none; opacity: 0.85; }
}

/* ===================================================================
   Header redesign (base.html's authenticated app header only) — the
   3-item nav (Queue/Customers/History), the connector-status pill, and
   the account-menu chip/dropdown. `.navbar` itself stays untouched since
   it's shared by the homepage/login/pricing/pilot-request pages and the
   super-admin tool — a dedicated .alfred-app-header class scopes this
   header's own height/padding without touching any of those.
   =================================================================== */
.alfred-app-header { min-height: 64px; padding-top: 0; padding-bottom: 0; }
.alfred-app-header .navbar-brand { font-size: 21px; letter-spacing: -0.01em; }

.alfred-nav { align-self: stretch; }
.alfred-nav-link {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  color: var(--alfred-ink-2);
  font-weight: 400;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  text-decoration: none;
}
.alfred-nav-link:hover { color: var(--alfred-forest-dark); }
.alfred-nav-link.active { color: var(--alfred-ink); font-weight: 600; border-bottom-color: var(--alfred-forest); }

.alfred-nav-badge {
  min-width: 21px;
  height: 19px;
  padding: 0 6px;
  border-radius: var(--bs-border-radius-pill);
  background: var(--alfred-forest);
  color: var(--alfred-cream);
  font-size: 11.5px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* The Queue page's own "To review"/"Excluded" tab strip reuses the same
   underline treatment as the header nav (.alfred-nav-link) — one visual
   pattern, not two near-duplicates — but its inactive-tab count badge is
   a quieter, outlined variant (a tab you're not on shouldn't compete with
   the header's own solid badge for attention). */
.alfred-tab-strip { display: flex; align-items: stretch; gap: 28px; border-bottom: 1px solid var(--alfred-border); }
.alfred-tab-strip .alfred-nav-link { padding-bottom: 11px; }
.alfred-tab-badge-inactive {
  background: var(--alfred-card);
  border: 1px solid var(--alfred-border);
  color: var(--alfred-ink-2);
  box-sizing: border-box;
}

.alfred-status-pill {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border-radius: var(--bs-border-radius-pill);
  background: var(--alfred-forest-tint);
  border: 1px solid transparent;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--alfred-forest-dark);
  text-decoration: none;
}
.alfred-status-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--alfred-forest); flex-shrink: 0; }
/* The transparent 1px border above matches this element's height to the
   error state below, so the header doesn't visibly jump the moment a
   connector actually breaks. */
.alfred-status-pill.is-error {
  background: var(--alfred-red-tint);
  border-color: var(--alfred-red-border);
  color: var(--alfred-red);
  font-weight: 600;
}
.alfred-status-pill.is-error .dot { background: var(--alfred-red); width: 14px; height: 14px; border-radius: 3px; }

.alfred-account-chip {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 4px 10px 4px 4px;
  border: 1px solid var(--alfred-border);
  border-radius: var(--bs-border-radius-pill);
  background: var(--alfred-card);
  color: var(--alfred-ink);
  font-size: 13.5px;
}
.alfred-account-chip:hover, .alfred-account-chip[aria-expanded="true"] {
  background: #E9DEC6; /* one step darker than --alfred-card, matching the spec's "open" state — no existing token for this specific shade */
  border-color: var(--alfred-tan);
}
.alfred-account-chip .avatar {
  position: relative;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--alfred-forest);
  color: var(--alfred-cream);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.alfred-account-chip .avatar .warning-dot {
  position: absolute;
  top: -1px;
  right: -1px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--alfred-red);
  border: 1.5px solid var(--alfred-card);
}
.alfred-account-chip .chevron { color: var(--alfred-ink-2); transition: transform 0.15s ease; }
.alfred-account-chip[aria-expanded="true"] .chevron { transform: rotate(180deg); }

/* First real use of Bootstrap's dropdown component in this codebase —
   brand-retinted rather than left at Bootstrap's default white/grey. */
.alfred-account-menu.dropdown-menu {
  width: 276px;
  border-radius: var(--bs-border-radius-lg);
  border: 1px solid var(--alfred-border);
  background: var(--alfred-cream);
  box-shadow: 0 14px 34px rgba(42, 36, 25, 0.14);
  padding: 6px;
}
.alfred-account-menu .dropdown-item {
  padding: 8px 13px;
  border-radius: 9px;
  font-size: 13.5px;
  color: var(--alfred-ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.alfred-account-menu .dropdown-item:hover, .alfred-account-menu .dropdown-item:focus {
  background: var(--alfred-card);
  color: var(--alfred-ink);
}
.alfred-account-menu .dropdown-header {
  padding: 4px 13px 6px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.09em;
  color: var(--alfred-tan);
  text-transform: uppercase;
}
.alfred-account-menu .dropdown-divider { border-color: var(--alfred-border); margin: 0 5px; }
.alfred-account-menu .identity-block { padding: 8px 13px 10px; }
.alfred-account-menu .identity-block .account-name { font-size: 14px; font-weight: 600; color: var(--alfred-ink); }
.alfred-account-menu .identity-block .user-email { font-size: 12.5px; color: var(--alfred-ink-2); }
.alfred-account-menu .item-meta { font-size: 12px; color: var(--alfred-forest-dark); }
.alfred-account-menu .item-meta.is-error { color: var(--alfred-red); }
.alfred-account-menu .item-meta.is-muted { color: var(--alfred-ink-2); }

/* Below the navbar-expand-md breakpoint, the account menu's own contents
   fold into the hamburger panel instead of staying a click-to-open
   dropdown (the spec's own explicit "the account menu contents collapse
   into the hamburger panel" instruction) — forced open/inline via CSS
   rather than a second, duplicated set of markup for mobile. The trigger
   button hides since there's nothing left to toggle once the menu is
   always shown. */
@media (max-width: 767.98px) {
  #nav-account-chip-btn { display: none; }
  #nav-account-menu {
    display: block !important;
    position: static !important;
    inset: auto !important;
    transform: none !important;
    width: 100%;
    margin: 0;
    box-shadow: none;
    border: none;
    background: transparent;
    padding: 0;
  }
}