/* ============================================================
 * AlwaysOnTax — hand-written component CSS
 *
 * Design tokens (--color-primary, --radius-sm, etc.) are published
 * by static/css/tailwind.css via its @theme block. Load tailwind.css
 * BEFORE this file in every page template.
 *
 * To change a brand token site-wide, edit the @theme block in
 * static/css/tailwind.input.css and rebuild:
 *   tailwindcss -i static/css/tailwind.input.css -o static/css/tailwind.css
 *
 * No hex literals should appear in this file — use var(--color-*).
 *
 * Everything below is wrapped in @layer base so Tailwind utilities
 * (which live in @layer utilities) can override these defaults. The
 * layer order is declared in tailwind.input.css.
 * ============================================================ */

@layer base {

/* ------------------------------------------------------------
 * Reset + base
 * ------------------------------------------------------------ */
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  line-height: 1.5;
  color: var(--color-text);
  background: var(--color-bg);
}

/* ------------------------------------------------------------
 * Top bar (logged-in shell + public pages)
 * ------------------------------------------------------------ */
.app-topbar,
header {
  background: var(--color-primary);
  color: #fff;
  padding: 0.75rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 50;
}
header h1 { font-size: 1.25rem; font-weight: 600; margin: 0; }
.header-logo-link { display: inline-flex; align-items: center; }
.header-logo { height: 1.5rem; width: auto; display: block; }
.app-topbar-left,
header .header-left { display: flex; align-items: center; gap: 0.6rem; }
.app-topbar .user-info,
header .user-info { font-size: 0.875rem; }
.app-topbar a,
header a { color: var(--color-primary-on-dark); text-decoration: none; }
.app-topbar a:hover,
header a:hover { text-decoration: underline; }

/* Hide the public-pages-only header rule from breaking when base.html
   uses .app-topbar instead. .app-topbar is the canonical class going
   forward; the bare `header` selector remains for base_public.html. */

/* Hamburger menu */
.hamburger-btn {
  background: none; border: none; color: #fff; cursor: pointer;
  padding: 0.25rem; display: flex; align-items: center; font-size: 1.3rem;
  line-height: 1; border-radius: var(--radius-sm);
}
.hamburger-btn:hover { background: rgba(255, 255, 255, 0.12); }

.nav-dropdown {
  position: absolute; top: 100%; left: 0; z-index: 100;
  background: var(--color-surface); color: var(--color-text-dropdown);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-dropdown); min-width: 260px;
  padding: 0.35rem 0; margin-top: 0.25rem;
}
.nav-dropdown a {
  display: block; padding: 0.55rem 1rem; color: var(--color-text-dropdown);
  font-size: 0.88rem; text-decoration: none; white-space: nowrap;
}
.nav-dropdown a:hover {
  background: var(--color-dropdown-hover);
  color: var(--color-primary);
  text-decoration: none;
}

/* User menu (top-right) */
.user-menu { position: relative; }
.user-menu-btn {
  background: none; border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff; cursor: pointer; padding: 0.3rem 0.7rem;
  border-radius: var(--radius-sm); font-size: 0.875rem; font-family: inherit;
  display: inline-flex; align-items: center; gap: 0.35rem;
}
.user-menu-btn:hover { background: rgba(255, 255, 255, 0.12); }
.user-menu-btn .caret { font-size: 0.7rem; line-height: 1; transition: transform 0.15s; }
.user-menu-btn[aria-expanded="true"] .caret { transform: rotate(180deg); }
.user-menu .nav-dropdown { right: 0; left: auto; min-width: 195px; }
.user-menu .nav-dropdown a.danger { color: var(--color-danger-soft); }
.user-menu .nav-dropdown a.danger:hover {
  background: var(--color-danger-soft-bg);
  color: var(--color-danger-hover);
}

/* Logout link rendered as a CSRF-protected POST form (Django 4.1+
   removed GET on LogoutView). The <form> + <button> are styled to
   match the surrounding link/menuitem so the visual UX is unchanged. */
.logout-link-form { margin: 0; }
.nav-dropdown .logout-link-button {
  display: block; width: 100%; text-align: left;
  background: none; border: 0; cursor: pointer;
  padding: 0.55rem 1rem; color: var(--color-text-dropdown);
  font-size: 0.88rem; font-family: inherit; line-height: inherit;
}
.nav-dropdown .logout-link-button:hover {
  background: var(--color-dropdown-hover);
  color: var(--color-primary);
}

/* ------------------------------------------------------------
 * Layout
 * ------------------------------------------------------------ */
.app-main {
  max-width: 900px;
  margin: 1.5rem auto;
  padding: 0 1rem;
}

/* App shell: sidebar + main content. The shell itself is a flex row;
   the sidebar takes a fixed column at desktop, and `main` keeps its
   existing 900px max-width centered inside the remaining space. */
.app-shell {
  display: flex;
  align-items: flex-start;
  min-height: calc(100vh - 60px);
}
.app-main {
  flex: 1 1 auto;
  min-width: 0;
}

/* Sidebar */
.app-sidebar {
  flex: 0 0 160px;
  width: 160px;
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
  padding: 1.25rem 0.75rem;
  align-self: stretch;
  position: sticky;
  top: 60px; /* below the topbar */
  max-height: calc(100vh - 60px);
  overflow-y: auto;
}
.nav-section + .nav-section { margin-top: 1.5rem; }
.nav-section-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-faint);
  padding: 0 0.75rem;
  margin: 0 0 0.4rem;
  border: 0;
}
.nav-list, .nav-sublist {
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.45rem 0.75rem;
  border-radius: var(--radius-sm);
  color: var(--color-text-dropdown);
  font-size: 0.92rem;
  text-decoration: none;
  cursor: pointer;
  line-height: 1.3;
}
.nav-link:hover {
  background: var(--color-dropdown-hover);
  color: var(--color-primary);
  text-decoration: none;
}
.nav-link.is-active {
  background: var(--color-dropdown-hover);
  color: var(--color-primary);
  font-weight: 600;
}
.nav-group { padding: 0; }
.nav-group > summary { list-style: none; }
.nav-group > summary::-webkit-details-marker { display: none; }
.nav-group-self { flex: 1 1 auto; color: inherit; text-decoration: none; }
.nav-group-self:hover { text-decoration: none; }
.nav-caret {
  font-size: 0.65rem;
  color: var(--color-text-faint);
  transition: transform 0.15s ease;
}
.nav-group[open] > summary .nav-caret { transform: rotate(180deg); }
.nav-sublist { padding-left: 0.75rem; margin-top: 0.15rem; }
.nav-link--sub { font-size: 0.88rem; padding: 0.35rem 0.75rem; }
.nav-link--deep { font-size: 0.85rem; color: var(--color-text-muted); }

.app-sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 60;
}

/* Mobile: sidebar slides over instead of taking column space. */
@media (max-width: 1023px) {
  .app-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    max-height: 100vh;
    width: 280px;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    z-index: 70;
    box-shadow: var(--shadow-dropdown);
    padding-top: 1.5rem;
  }
  .app-sidebar--open { transform: translateX(0); }
  .app-sidebar-backdrop { display: block; }
}

/* Desktop: hide the topbar hamburger; the sidebar is always visible. */
@media (min-width: 1024px) {
  .app-shell-toggle { display: none; }
}

.card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}
.card h2 {
  font-size: 1.125rem;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--color-border);
}

/* ------------------------------------------------------------
 * Messages
 * ------------------------------------------------------------ */
.messages {
  list-style: none;
  margin-bottom: 1rem;
}
.messages li {
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm);
  margin-bottom: 0.5rem;
}
.messages .success { background: var(--color-success-bg); color: var(--color-success-text); }
.messages .error   { background: var(--color-danger-bg);  color: var(--color-danger-text); }
.messages .warning { background: var(--color-warning-bg); color: var(--color-warning-text); }
.messages .info    { background: var(--color-info-bg);    color: var(--color-info-text); }

/* ------------------------------------------------------------
 * Buttons
 * ------------------------------------------------------------ */
.btn {
  display: inline-block;
  padding: 0.5rem 1.25rem;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  cursor: pointer;
  text-decoration: none;
  font-weight: 500;
}
.btn-primary   { background: var(--color-primary);   color: #fff; }
.btn-primary:hover   { background: var(--color-primary-hover); }
.btn-success   { background: var(--color-success);   color: #fff; }
.btn-success:hover   { background: var(--color-success-hover); }
.btn-secondary { background: var(--color-secondary); color: #fff; }
.btn-secondary:hover { background: var(--color-secondary-hover); }

/* ------------------------------------------------------------
 * Tables
 * ------------------------------------------------------------ */
table {
  width: 100%;
  border-collapse: collapse;
}
th, td {
  text-align: left;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--color-border);
}
th { font-weight: 600; font-size: 0.85rem; color: var(--color-text-muted); }

/* ------------------------------------------------------------
 * Form fields (shared across planning pages)
 * ------------------------------------------------------------ */
.field-group { margin-bottom: 1.25rem; }
.field-label {
  display: block;
  font-weight: 500;
  margin-bottom: 0.35rem;
  font-size: 0.95rem;
  color: var(--color-text);
}
.field-input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  font-family: inherit;
}
.field-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-primary-focus-ring);
}
.field-error {
  color: var(--color-danger);
  font-size: 0.85rem;
  margin-top: 0.25rem;
}
.field-hint {
  color: var(--color-text-subtle);
  font-size: 0.85rem;
  margin-top: 0.2rem;
}

.radio-group { display: flex; gap: 1.25rem; margin-top: 0.35rem; }
.radio-option {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  font-size: 0.95rem;
}
.radio-option input[type="radio"] { margin: 0; }

/* ------------------------------------------------------------
 * Progress bar
 * ------------------------------------------------------------ */
.progress-bar-container {
  background: var(--color-progress-track);
  border-radius: var(--radius-sm);
  height: 6px;
  margin-bottom: 1.5rem;
  overflow: hidden;
}
.progress-bar-fill {
  background: var(--color-primary);
  height: 100%;
  border-radius: var(--radius-sm);
  transition: width 0.3s ease;
}

/* ------------------------------------------------------------
 * Misc
 * ------------------------------------------------------------ */
.disqualify-banner {
  background: var(--color-warning-bg);
  border: 1px solid var(--color-warning);
  border-radius: var(--radius-md);
  padding: 1rem 1.25rem;
  margin: 1rem 0;
  color: var(--color-warning-text);
}

.btn-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
}

[x-cloak] { display: none !important; }

/* ============================================================
 * A11Y BASELINE
 *
 * Visible focus rings for keyboard users (using :focus-visible
 * so mouse clicks don't show the ring). Skip-link for screen-
 * reader / keyboard users to bypass the topbar+sidebar.
 * Respects prefers-reduced-motion.
 * ============================================================ */
:where(a, button, [role="button"], input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.skip-link {
  position: absolute;
  top: -40px;
  left: 0.5rem;
  background: var(--color-primary);
  color: #fff;
  padding: 0.5rem 1rem;
  text-decoration: none;
  border-radius: var(--radius-sm);
  z-index: 1000;
  font-size: 0.9rem;
}
.skip-link:focus,
.skip-link:focus-visible {
  top: 0.5rem;
  outline: 2px solid #fff;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* sr-only — visually hidden but available to screen readers */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* ============================================================
 * SHARED UI COMPONENTS
 *
 * Generic primitives used by Django partials in
 * templates/components/. Keep these visually equivalent to the
 * inline styles they replace so adopting partials is a no-op
 * visual change.
 * ============================================================ */

/* ── Eyebrow: small-caps label above a heading (marketing) ── */
.eyebrow {
  color: var(--color-marketing-muted);
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}

/* ── Marketing-page outer wrap: consistent max-width + padding ── */
.marketing-wrap {
  margin: 3rem auto 4rem;
  padding: 0 1.5rem;
  color: var(--color-marketing-text);
}
.marketing-wrap--narrow { max-width: 760px; }
.marketing-wrap--readable { max-width: 820px; }
.marketing-wrap--wide { max-width: 1100px; }

/* ── Section heading: consistent h2 spacing ── */
.section-heading {
  font-size: 1.35rem;
  margin-top: 2.75rem;
  margin-bottom: 0.75rem;
  color: var(--color-marketing-text);
}

/* ── Status pill: inline status indicator ──
   Replaces .status-badge, .status-label, .conf-badge across
   documents/* templates. Colors keyed by data-status / variant. */
.status-pill {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.9rem;
  line-height: 1.2;
}
.status-pill--sm {
  padding: 0.15rem 0.5rem;
  border-radius: 3px;
  font-size: 0.8rem;
  font-weight: 500;
}
.status-pill--xs {
  padding: 0.1rem 0.45rem;
  border-radius: 3px;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
}
.status-pill--success,
.status-pill--completed,
.status-pill--confirmed,
.status-pill--manual           { background: var(--color-success-bg); color: var(--color-success-text); }
.status-pill--warning,
.status-pill--computing,
.status-pill--extracted,
.status-pill--no_extraction    { background: var(--color-warning-bg); color: var(--color-warning-text); }
.status-pill--danger,
.status-pill--error,
.status-pill--failed           { background: var(--color-danger-bg);  color: var(--color-danger-text); }
.status-pill--info,
.status-pill--pending,
.status-pill--processing       { background: var(--color-info-bg);    color: var(--color-info-text); }
.status-pill--neutral          { background: var(--color-panel-muted); color: var(--color-text-muted); }

/* ── Callout: bordered info panel ──
   Replaces .what-is-block, .strategy-outcome, .contact-success,
   .disqualify-banner, etc. Variant chooses the color scheme;
   --accent variant adds a left border without changing bg. */
.callout {
  border-radius: var(--radius-sm);
  padding: 1rem 1.25rem;
  margin: 1rem 0;
  font-size: 0.95rem;
  line-height: 1.65;
}
.callout > .callout-title {
  display: block;
  font-weight: 600;
  margin-bottom: 0.4rem;
}
.callout--info {
  background: var(--color-dropdown-hover);
  border-left: 4px solid var(--color-primary);
  color: var(--color-text-dropdown);
}
.callout--info > .callout-title { color: var(--color-primary); }
.callout--success {
  background: var(--color-success-bg);
  border: 1px solid #c3e6cb;
  color: var(--color-success-text);
}
.callout--success-soft {
  background: var(--color-marketing-success-bg);
  border-left: 3px solid var(--color-marketing-success);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  color: var(--color-text-dropdown);
}
.callout--success-soft > .callout-title { color: var(--color-marketing-success-text); }
.callout--warning {
  background: var(--color-warning-bg);
  border: 1px solid var(--color-warning);
  color: var(--color-warning-text);
}
.callout--danger {
  background: var(--color-danger-bg);
  border: 1px solid var(--color-danger);
  color: var(--color-danger-text);
}

/* ── Step stack: numbered progression (onboarding, how-it-works) ──
   Two sizes: --md (32px circle, used in onboarding) and --lg
   (48px circle, used in how-it-works). */
.step-stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 1rem 0 1.75rem;
}
.step-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  background: var(--color-surface);
  border: 1px solid var(--color-marketing-border);
  border-radius: var(--radius-lg);
  padding: 1rem 1.25rem;
}
.step-item--bare {
  background: transparent;
  border: 0;
  padding: 0;
  align-items: start;
}
.step-badge-col {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}
.step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-weight: 700;
  flex-shrink: 0;
}
.step-number--md { width: 32px; height: 32px; font-size: 0.875rem; }
.step-number--lg { width: 48px; height: 48px; font-size: 1.2rem; background: var(--color-marketing-blue); }
.step-content { flex: 1; min-width: 0; }
.step-content h4 {
  font-size: 0.97rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
  color: var(--color-text);
}
.step-content--lg h4 {
  font-size: 1.1rem;
  margin: 0.4rem 0 0.5rem;
  color: var(--color-marketing-text);
}
.step-content p {
  font-size: 0.88rem;
  color: var(--color-text-muted);
  line-height: 1.55;
  margin: 0;
}
.step-content--lg p {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-text-dropdown);
  margin: 0.4rem 0;
}
.step-arrow {
  text-align: center;
  font-size: 0.95rem;
  color: var(--color-text-disabled);
  margin: -0.25rem 0;
  padding-left: 1rem;
}
.step-time-badge {
  font-size: 0.72rem;
  color: var(--color-text-faint);
  background: var(--color-marketing-border-soft);
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 0.15rem 0.5rem;
  white-space: nowrap;
}

/* ── Onboarding stepper ──
   Horizontal progress indicator for the multi-page onboarding flow.
   Renders all steps on desktop; collapses to "Step N of M · Label"
   line on narrow viewports. */
.onboarding-stepper {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.85rem 1rem;
  margin-bottom: 1.5rem;
}
.onboarding-stepper-summary {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin: 0 0 0.75rem;
}
.onboarding-stepper-summary strong {
  color: var(--color-text);
  font-weight: 600;
}
.onboarding-stepper-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 0.5rem;
  align-items: start;
}
.onboarding-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  position: relative;
  text-align: center;
  font-size: 0.85rem;
  line-height: 1.25;
}
/* Connector line between markers (drawn from each step's marker
   to the next via a pseudo-element). Hidden on the last step. */
.onboarding-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 14px;
  left: calc(50% + 16px);
  right: calc(-50% + 16px);
  height: 2px;
  background: var(--color-border-strong);
  z-index: 0;
}
.onboarding-step--done:not(:last-child)::after {
  background: var(--color-primary);
}
.onboarding-step-marker {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-surface);
  border: 2px solid var(--color-border-strong);
  color: var(--color-text-muted);
  font-weight: 700;
  font-size: 0.85rem;
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.onboarding-step-label {
  color: var(--color-text-muted);
  font-weight: 500;
}

.onboarding-step--current .onboarding-step-marker {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
.onboarding-step--current .onboarding-step-label {
  color: var(--color-text);
  font-weight: 600;
}
.onboarding-step--done .onboarding-step-marker {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  font-size: 0.95rem;
}
.onboarding-step--done .onboarding-step-label {
  color: var(--color-text);
}
.onboarding-step--upcoming .onboarding-step-marker {
  /* Default — uses base styles. */
}

/* Mobile: hide the per-step list; the summary line carries the info. */
@media (max-width: 640px) {
  .onboarding-stepper-list { display: none; }
  .onboarding-stepper-summary { margin-bottom: 0; }
}

/* Toggle switch */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 42px;
  height: 24px;
  cursor: pointer;
}
.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--color-toggle-off);
  border-radius: 24px;
  transition: background 0.2s;
}
.toggle-slider::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 3px;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
}
.toggle-switch input:checked + .toggle-slider {
  background: var(--color-success);
}
.toggle-switch input:checked + .toggle-slider::before {
  transform: translateX(18px);
}

/* Icon delete button */
.btn-icon-delete {
  background: none;
  border: none;
  color: var(--color-danger);
  font-size: 1.4rem;
  font-weight: 700;
  cursor: pointer;
  padding: 0 0.4rem;
  line-height: 1;
  border-radius: var(--radius-sm);
  transition: background 0.15s;
}
.btn-icon-delete:hover {
  background: var(--color-danger-tint-bg);
}

} /* end @layer base */