/* AbhiLeads — "Directory" design layer over the prebuilt app bundle.
   White paper, ink type, one directory-yellow accent. Re-themes the app by
   overriding its Tailwind tokens; no React nodes are mutated. */

  :root {
    --paper: oklch(99.2% 0.003 95);
    --wash: oklch(96.4% 0.006 95);
    --rule: oklch(89.5% 0.006 265);
    --rule-strong: oklch(80% 0.01 265);
    --ink: oklch(21% 0.025 265);
    --ink-2: oklch(38% 0.02 265);
    --ink-3: oklch(52% 0.015 265);
    --yellow: oklch(87.5% 0.165 92);
    --yellow-deep: oklch(80% 0.165 85);
    --yellow-wash: oklch(96% 0.06 95);
    --ok: oklch(55% 0.13 155);
    --bad: oklch(56% 0.19 27);
    --font: "Archivo", ui-sans-serif, system-ui, sans-serif;

    /* app tokens (Tailwind v4 theme vars) */
    --color-bg-primary: var(--paper);
    --color-bg-secondary: #fff;
    --color-bg-tertiary: var(--wash);
    --color-bg-card: #fff;
    --color-bg-input: #fff;
    --color-bg-sidebar: #fff;
    --color-accent: var(--yellow);
    --color-accent-hover: var(--yellow-deep);
    --color-text-primary: var(--ink);
    --color-text-secondary: var(--ink-2);
    --color-text-muted: var(--ink-3);
    --color-border: var(--rule);
    --color-success: var(--ok);
    --color-error: var(--bad);
    --color-zinc-700: oklch(93% 0.005 265);
    --color-zinc-800: oklch(95% 0.005 265);
    --color-zinc-900: oklch(97% 0.004 265);
    color-scheme: light;
  }

  html, body, #root { background: var(--paper); color: var(--ink); }
  body, button, input, select, textarea { font-family: var(--font) !important; }
  body { -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; }
  ::selection { background: var(--yellow); color: var(--ink); }
  :focus-visible { outline: 2px solid var(--ink) !important; outline-offset: 2px; }
  * { scrollbar-width: thin; scrollbar-color: var(--rule-strong) transparent; }

  /* hard-coded dark greys in the bundle */
  .border-\[\#3f3f46\], .border-\[\#3f3f46\]\/40, .border-\[\#52525b\], .border-border { border-color: var(--rule) !important; }
  .hover\:border-\[\#52525b\]:hover { border-color: var(--rule-strong) !important; }
  .shadow-lg, .shadow-xl, .shadow-sm, [class*="shadow-accent"], [class*="shadow-amber"] { box-shadow: none !important; }
  .bg-accent, .bg-accent.text-white, .bg-accent .text-white { color: var(--ink) !important; }
  .bg-accent { background: var(--yellow) !important; }
  .bg-accent:hover, .hover\:bg-accent-hover:hover { background: var(--yellow-deep) !important; }
  .disabled\:bg-accent\/50:disabled { background: var(--wash) !important; color: var(--ink-3) !important; }
  .text-accent { color: var(--ink) !important; }
  .hover\:text-accent:hover { color: var(--ink) !important; text-decoration: underline; text-underline-offset: 3px; }
  [class*="from-amber"], [class*="from-orange"] { background: var(--ink) !important; color: var(--yellow) !important; }
  input, select, textarea { border-radius: 6px !important; }
  input:focus, select:focus, textarea:focus { border-color: var(--ink) !important; box-shadow: 0 0 0 3px var(--yellow-wash) !important; }

  /* License gate → landing page: see /al/landing.css */

  /* ───────────── App shell ───────────── */
  aside.sidebar { background: #fff !important; border-right: 1px solid var(--rule); }
  aside.sidebar > div:first-child { border-color: var(--rule) !important; }
  aside.sidebar > div:first-child img { content: url(/al-mark-v2.svg); border-radius: 6px !important; width: 34px !important; height: 34px !important; }
  aside.sidebar > div:first-child h1 { font-weight: 800 !important; font-stretch: 112%; font-size: 16px !important; }
  aside.sidebar > div:first-child p { color: var(--ink-3) !important; text-transform: lowercase; letter-spacing: 0 !important; font-weight: 500 !important; font-size: 12px !important; }
  aside.sidebar > div:first-child p::first-letter { text-transform: uppercase; }
  aside.sidebar nav p.uppercase { text-transform: none !important; letter-spacing: 0 !important; font-size: 12px !important; color: var(--ink-3) !important; font-weight: 600 !important; }
  aside.sidebar nav button { border-radius: 6px !important; color: var(--ink-2) !important; border-color: transparent !important; }
  aside.sidebar nav button:hover { background: var(--wash) !important; color: var(--ink) !important; }
  aside.sidebar nav button.bg-accent\/12 { background: var(--yellow) !important; color: var(--ink) !important; font-weight: 700 !important; }
  aside.sidebar nav button.opacity-50, aside.sidebar nav button[class*="opacity"] { opacity: .55; }
  aside.sidebar [class*="text-amber"] { color: var(--ink-3) !important; }
  aside.sidebar > div:last-child > div:first-child { background: var(--wash) !important; border-color: var(--rule) !important; border-radius: 6px !important; }

  .page-header { background: var(--paper); border-bottom: 1px solid var(--rule); }
  .page-header h1 { font-size: 26px !important; font-weight: 800 !important; font-stretch: 110%; letter-spacing: -0.02em; }

  main .card, main .rounded-xl.bg-bg-card { background: #fff !important; border: 1px solid var(--rule) !important; border-radius: 8px !important; box-shadow: none !important; }
  main .card h3 { font-size: 15px !important; font-weight: 700 !important; }
  /* History / list rows: bundle hard-codes .card-elevated as a dark panel (#242429) — dark text on it was unreadable (owner, 21 Oct) */
  main .card-elevated { background: #fff !important; border: 1px solid var(--rule) !important; border-radius: 8px !important; box-shadow: none !important; }
  main .card-elevated:hover { border-color: var(--ink-3) !important; }
  main .rounded-lg.bg-zinc-800\/40 { background: var(--wash) !important; color: var(--ink-2) !important; }
  main [class*="hover:bg-zinc"]:hover { background: var(--wash) !important; }

  /* "How to use" helper: out of the way, at the bottom */
  .al-howto { order: 99; }

  /* Dashboard figures: one ledger strip instead of four floating tiles */
  main .grid.grid-cols-4:has(> .card.border-l-\[3px\]) { gap: 0 !important; border: 1px solid var(--rule); border-radius: 8px; background: #fff; overflow: hidden; }
  main .grid.grid-cols-4 > .card.border-l-\[3px\] { border: 0 !important; border-radius: 0 !important; border-left: 1px solid var(--rule) !important; padding: 22px 24px !important; }
  main .grid.grid-cols-4 > .card.border-l-\[3px\]:first-child { border-left: 0 !important; }
  main .grid.grid-cols-4 > .card .w-12.h-12 { display: none !important; }
  main .grid.grid-cols-4 > .card p.uppercase { text-transform: none !important; letter-spacing: 0 !important; font-size: 13px !important; font-weight: 500 !important; color: var(--ink-3) !important; }
  main .grid.grid-cols-4 > .card p.text-2xl { font-size: 40px !important; line-height: 1; font-weight: 850 !important; font-stretch: 112%; letter-spacing: -0.03em; }

  /* Charts */
  .recharts-cartesian-grid line { stroke: var(--rule) !important; }
  .recharts-text, .recharts-cartesian-axis-tick-value { fill: var(--ink-3) !important; font-family: var(--font); }
  .recharts-cartesian-axis-line, .recharts-cartesian-axis-tick-line { stroke: var(--rule-strong) !important; }
  /* series colours: emails = ink, phones = yellow (bundle uses #3B82F6 / #10B981) */
  main svg [fill="#3B82F6"], main svg [fill="#0A66C2"], main svg [fill="#1877F2"], main svg [fill="#E4405F"], main svg [fill="#000000"] { fill: var(--ink) !important; }
  main svg [stroke="#3B82F6"] { stroke: var(--ink) !important; }
  main svg [fill="#10B981"] { fill: var(--yellow) !important; }
  main svg [stroke="#10B981"] { stroke: var(--yellow-deep) !important; }
  main svg circle.recharts-dot { fill: #fff !important; }
  main .rounded-full.bg-accent { background: var(--ink) !important; }
  main .rounded-full.bg-success { background: var(--yellow) !important; }
  .recharts-default-tooltip { background: #fff !important; border: 1px solid var(--rule-strong) !important; color: var(--ink) !important; box-shadow: none !important; border-radius: 6px !important; }
  .recharts-legend-item-text { color: var(--ink-2) !important; }

  /* Results */
  main .flex.items-center.gap-1.bg-bg-card.overflow-x-auto { min-width: 0; flex: 1 1 0; scrollbar-width: none; border-radius: 6px !important; }
  main .flex.items-center.gap-1.bg-bg-card.overflow-x-auto::-webkit-scrollbar { display: none; }
  main .flex.items-center.gap-1.bg-bg-card.overflow-x-auto > button { border-radius: 4px !important; }
  main td .truncate.max-w-48 { max-width: 20rem !important; }
  main td p.text-xs.text-text-muted { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; max-width: 34rem; }
  main table thead th { position: sticky; top: 0; z-index: 1; background: #fff; text-transform: none !important; letter-spacing: 0 !important; font-size: 13px !important; color: var(--ink-3) !important; font-weight: 600 !important; }
  main table tbody tr { border-color: var(--rule) !important; }
  main table tbody tr:hover { background: var(--yellow-wash) !important; }
  main td .rounded-lg.text-\[11px\] { background: transparent !important; border: 1px solid var(--rule-strong); border-radius: 4px !important; color: var(--ink-2) !important; font-weight: 600 !important; }
  main .bg-success { background: var(--ink) !important; }
  main td svg { color: var(--ink-3) !important; }
  main .bg-bg-tertiary { background: var(--wash) !important; }

  @media (max-width: 1100px) {
    main .grid.grid-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    main .grid.grid-cols-4 > .card.border-l-\[3px\]:nth-child(3) { border-left: 0 !important; }
    main .grid.grid-cols-4 > .card.border-l-\[3px\]:nth-child(n+3) { border-top: 1px solid var(--rule) !important; }
  }
  @media (max-width: 768px) {
    aside.sidebar { width: 64px !important; }
    aside.sidebar nav span.truncate, aside.sidebar nav p.uppercase,
    aside.sidebar .overflow-hidden > h1, aside.sidebar .overflow-hidden > p { display: none !important; }
    aside.sidebar nav button { justify-content: center; padding-left: 0 !important; padding-right: 0 !important; }
    aside.sidebar > div:last-child { display: none; }
    main .px-10 { padding-left: 16px !important; padding-right: 16px !important; }
    main .py-8 { padding-top: 18px !important; padding-bottom: 18px !important; }
    main .grid.grid-cols-4 > .card.border-l-\[3px\] { padding: 16px !important; }
    main .grid.grid-cols-4 > .card p.text-2xl { font-size: 28px !important; }
    .page-header .flex.items-center.justify-between { flex-wrap: wrap; gap: 12px; }
    main .flex.items-center.gap-4 { flex-wrap: wrap; gap: 10px !important; }
    main .relative.flex-1.max-w-sm { flex: 1 1 100% !important; max-width: none !important; }
    main .flex.items-center.gap-4 > select { flex: 1 1 auto; }
    main .flex.items-center.gap-1.bg-bg-card.overflow-x-auto { flex: 1 1 100% !important; }
    main .card:has(table) { overflow-x: auto; }
  }
  @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* leftover dark dividers and all-caps labels inside the app */
main .card [class*="border-[#"], main .card [class*="divide-[#"] > *, main .card hr, main .card .border-t, main .card .border-b { border-color: var(--rule) !important; }
main .uppercase { text-transform: none !important; letter-spacing: 0 !important; }

/* plan-needed bar */
#al-planbar { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 1000; display: flex; align-items: center; gap: 16px; padding: 12px 14px 12px 18px; background: var(--ink); color: var(--paper); border-radius: 8px; font-family: var(--font); font-size: 14px; max-width: calc(100vw - 32px); box-shadow: 0 8px 24px rgba(0,0,0,.18); }
#al-planbar b { color: var(--yellow); }
#al-planbar a { background: var(--yellow); color: var(--ink); padding: 8px 14px; border-radius: 6px; font-weight: 700; text-decoration: none; white-space: nowrap; }
#al-planbar button { background: none; border: 0; color: var(--paper); font-size: 20px; line-height: 1; cursor: pointer; padding: 0 4px; opacity: .7; }
@media (max-width: 600px) { #al-planbar { flex-wrap: wrap; bottom: 12px; } }
main .recharts-bar-rectangle path { fill: var(--ink) !important; }

/* sidebar upgrade button */
#al-upgrade { display: block; margin-top: 10px; padding: 9px 12px; border-radius: 6px; background: var(--yellow); color: var(--ink) !important; font-weight: 700; font-size: 13px; text-align: center; text-decoration: none; }
#al-upgrade:hover { background: var(--yellow-deep); }
aside.sidebar.w-\[72px\] #al-upgrade { display: none; }
@media (max-width: 768px) { #al-upgrade { display: none; } }

/* feedback */
#al-fb-open { display: block; width: 100%; margin-top: 8px; padding: 6px 0 2px; background: none; border: 0; color: var(--ink-2); font-size: 13px; font-weight: 600; text-align: center; text-decoration: underline; text-decoration-color: var(--rule-strong); text-underline-offset: 3px; cursor: pointer; }
#al-fb-open:hover { color: var(--ink); text-decoration-color: var(--yellow-deep); }
aside.sidebar.w-\[72px\] #al-fb-open { display: none; }
#al-fb { position: fixed; inset: 0; z-index: 1100; background: rgba(20, 24, 42, .35); display: grid; place-items: center; padding: 16px; font-family: var(--font); }
#al-fb .al-fb-box { width: min(480px, 100%); background: #fff; border: 1px solid var(--rule-strong); border-radius: 10px; padding: 22px; color: var(--ink); }
#al-fb h3 { margin: 0 0 14px; font-size: 20px; font-weight: 800; font-stretch: 110%; letter-spacing: -0.01em; }
#al-fb .al-fb-kinds { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
#al-fb .al-fb-kinds label { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--rule-strong); border-radius: 6px; font-size: 13px; cursor: pointer; }
#al-fb .al-fb-kinds label:has(input:checked) { background: var(--yellow); border-color: var(--yellow-deep); font-weight: 700; }
#al-fb .al-fb-kinds input { accent-color: var(--ink); margin: 0; }
#al-fb textarea, #al-fb input:not([type=radio]) { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--rule-strong); border-radius: 6px; font: inherit; font-size: 14px; color: var(--ink); background: #fff; resize: vertical; }
#al-fb input:not([type=radio]) { margin-top: 10px; }
#al-fb .al-fb-status { min-height: 18px; margin: 10px 0 0; font-size: 13px; color: var(--ink-2); }
#al-fb .al-fb-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 12px; }
#al-fb .al-fb-actions button { padding: 10px 16px; border-radius: 6px; border: 1px solid var(--rule-strong); background: #fff; font: inherit; font-weight: 600; font-size: 14px; color: var(--ink); cursor: pointer; }
#al-fb .al-fb-actions .al-fb-send { background: var(--ink); border-color: var(--ink); color: var(--paper); }
#al-fb .al-fb-actions .al-fb-send:disabled { opacity: .5; }
#al-fb-fab { display: none; }
@media (max-width: 768px) { #al-fb-fab { display: block; position: fixed; right: 14px; bottom: 14px; z-index: 900; padding: 10px 14px; border-radius: 999px; border: 0; background: var(--ink); color: var(--paper); font-family: var(--font); font-weight: 700; font-size: 13px; box-shadow: 0 4px 14px rgba(0,0,0,.18); } }
#al-trial-left { margin: 10px 0 0; font-size: 12px; font-weight: 600; color: var(--ink-2); }