@import "tailwindcss";
@import "tippy.js/dist/tippy.css";
@import "./vendor/lexxy/lexxy-variables.css";
@import "./vendor/lexxy/lexxy-content.css";
@import "./vendor/lexxy/lexxy-editor.css";

@font-face {
  font-family: "BuezliInter";
  src: url("/assets/inter-variable-f3a91dd5.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "BuezliInterTight";
  src: url("/assets/inter-tight-variable-8801b1cf.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@theme {
  --font-sans: "Inter", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  /* Marketing pages use the app's slate/orange palette with self-hosted Inter and Inter Tight. */
  --font-marketing: "BuezliInter", "Inter", "Segoe UI", system-ui, sans-serif;
  --font-display: "BuezliInterTight", "Inter Tight", "BuezliInter", "Inter", system-ui, sans-serif;
  --color-brand-50: #fff7ed;
  --color-brand-100: #ffedd5;
  --color-brand-500: #f97316;
  --color-brand-600: #ea580c;
  /* The app's only elevation: reserve it for surfaces that float above the page (menus, popovers, toasts). */
  --shadow-overlay: 0 1px 2px rgb(15 23 42 / 0.06), 0 10px 28px -6px rgb(15 23 42 / 0.16);
}

.tippy-box[data-theme~="buezli"] {
  @apply rounded-md bg-slate-950 px-1 py-0.5 text-xs text-white shadow-overlay;
}

@layer base {
  button, a { @apply focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-orange-500; }
  button { @apply cursor-pointer; }
  textarea { resize: none; }

  input[type="number"] {
    -moz-appearance: textfield;
  }

  input[type="number"]::-webkit-inner-spin-button,
  input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
}

@utility mk-button {
  @apply inline-flex min-h-11 items-center justify-center gap-2 rounded-lg border px-5 text-[15px] font-semibold whitespace-nowrap transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-orange-500;
}

@layer components {
  .mk-display {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.05;
    text-wrap: balance;
  }

  .mk-heading {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.15;
    text-wrap: balance;
  }

  .mk-button-primary {
    @apply mk-button border-orange-600 bg-orange-600 text-white shadow-sm shadow-orange-600/20 hover:bg-orange-700;
  }

  .mk-button-secondary {
    @apply mk-button border-slate-300 bg-white text-slate-700 shadow-sm hover:bg-slate-50;
  }

  .mk-button-dark {
    @apply mk-button border-slate-950 bg-slate-950 text-white hover:bg-slate-800;
  }

  .mk-card {
    @apply rounded-xl border border-slate-200 bg-white text-slate-900 shadow-sm;
  }

  .mk-field {
    @apply block w-full min-w-0 rounded-lg border border-slate-300 bg-white px-3 py-2.5 text-base text-slate-900 shadow-sm placeholder:text-slate-400 focus:border-orange-500 focus:outline-none focus:ring-2 focus:ring-orange-500/15;
  }

  .mk-link {
    @apply font-semibold text-orange-700 hover:text-orange-800;
  }

  .mk-prose p + p {
    margin-top: 1em;
  }

  /* Long-form Markdown in blog articles. */
  .mk-article {
    @apply text-[1.0625rem] leading-8 text-slate-700;

    & > :not(figure, table) { @apply max-w-[70ch]; }

    & h2 { @apply font-display font-bold tracking-[-0.025em] text-balance leading-[1.15] mt-12 mb-4 scroll-mt-8 text-2xl text-slate-950 sm:text-3xl; }
    & h3 { @apply font-display font-bold tracking-[-0.025em] text-balance leading-[1.15] mt-9 mb-3 scroll-mt-8 text-xl text-slate-950; }
    & h4 { @apply mt-7 mb-2 font-semibold text-slate-950; }
    & p, & ul, & ol, & table, & pre, & blockquote, & figure { @apply my-5; }
    & ul { @apply list-disc pl-6; }
    & ol { @apply list-decimal pl-6; }
    & li { @apply my-1.5 pl-1 marker:text-slate-400; }
    & strong { @apply font-semibold text-slate-900; }
    & a { @apply font-semibold text-orange-700 hover:text-orange-800 underline decoration-orange-200 underline-offset-4; }
    & blockquote { @apply rounded-r-lg border-l-4 border-orange-300 bg-orange-50 px-5 py-3 text-slate-700; }
    & code { @apply rounded bg-slate-100 px-1.5 py-0.5 font-mono text-[0.9em]; }
    & pre { @apply overflow-x-auto rounded-xl bg-slate-950 p-5 text-sm text-slate-100; }
    & pre code { @apply bg-transparent p-0; }
    & hr { @apply my-10 border-slate-200; }
    & table { @apply w-full border-collapse text-[0.95rem] leading-6; }
    & th { @apply border-b border-slate-300 py-2 pr-4 text-left font-semibold text-slate-900; }
    & td { @apply border-b border-slate-200 py-2 pr-4 align-top; }
    & img { @apply w-full rounded-xl border border-slate-200 shadow-sm; }
    & figcaption { @apply mt-2 text-sm leading-6 text-slate-500; }

    & .mk-checklist { @apply list-none divide-y divide-slate-200 overflow-hidden rounded-xl border border-slate-200 bg-white p-0 shadow-sm; }
    & .mk-checklist li { @apply m-0 p-0; }
    & .mk-checklist label { @apply flex cursor-pointer items-start gap-3 px-4 py-3 leading-7 transition hover:bg-slate-50; }
    & .mk-checklist input { @apply mt-1.5 size-4 shrink-0 cursor-pointer rounded accent-orange-600; }
    & .mk-checklist label:has(input:checked) { @apply text-slate-400 line-through decoration-slate-300; }
  }
}

.marketing-grid {
  background-image:
    linear-gradient(to right, rgb(15 23 42 / 0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(15 23 42 / 0.045) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
}

@layer components {
  /* SortableJS: the row left in the list while dragging, and the copy that follows the pointer. */
  .sortable-ghost {
    @apply bg-orange-50/70;
  }

  .sortable-ghost > * {
    @apply opacity-30;
  }

  .sortable-drag {
    @apply rounded-lg bg-white shadow-overlay ring-1 ring-slate-200;
    opacity: 1 !important;
  }

  lexxy-editor {
    @apply min-h-56 rounded-xl border border-slate-300 bg-white text-sm;
  }

  lexxy-editor lexxy-toolbar {
    @apply sticky top-0 z-10 flex-wrap rounded-t-xl bg-white;
  }

  .btn {
    @apply inline-flex cursor-pointer items-center justify-center gap-1.5 rounded-lg border px-3 py-2 text-sm font-semibold transition-colors;
  }

  .btn:disabled {
    @apply cursor-not-allowed border-slate-300 bg-slate-200 text-slate-500;
  }

  .btn:disabled:hover {
    @apply bg-slate-200;
  }

  .btn-primary {
    @apply border-orange-600 bg-orange-600 text-white hover:bg-orange-700;
  }

  .btn-primary[aria-expanded="true"] {
    @apply border-orange-800 bg-orange-800 shadow-inner hover:bg-orange-800;
  }

  .btn-secondary {
    @apply border-slate-300 bg-white text-slate-700 hover:bg-slate-50;
  }

  .btn-secondary[aria-expanded="true"] {
    @apply border-orange-400 bg-orange-50 text-orange-800 shadow-inner hover:bg-orange-100;
  }

  .icon-button {
    @apply inline-flex size-9 items-center justify-center rounded-lg text-slate-500 hover:bg-slate-100 hover:text-slate-800;
  }

  .nav-label {
    @apply mb-1 px-3 text-[11px] font-bold uppercase tracking-[0.08em] text-slate-500;
  }

  .nav-link {
    @apply relative mb-0.5 flex h-9 items-center gap-2.5 rounded-lg px-3 text-sm font-medium text-slate-600 transition-colors duration-150 hover:bg-slate-200/60 hover:text-slate-950 active:bg-slate-200/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-orange-500/30;
  }

  .nav-link > [data-lucide] {
    @apply shrink-0 text-slate-400 transition-colors duration-150 group-hover:text-orange-500;
  }

  .nav-link--active {
    @apply bg-orange-50 font-semibold text-orange-700 hover:bg-orange-50 hover:text-orange-700 active:bg-orange-50;
  }

  .nav-link--active > [data-lucide] {
    @apply text-orange-500;
  }

  .nav-link--disabled {
    @apply cursor-default opacity-70 hover:bg-transparent hover:text-slate-600;
  }

  .nav-link--disabled:hover > [data-lucide] {
    @apply text-slate-400;
  }

  .field {
    @apply w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm text-slate-900 placeholder:text-slate-400 focus:border-orange-500 focus:outline-none focus:ring-2 focus:ring-orange-500/15;
  }

  .field:disabled {
    @apply cursor-not-allowed border-slate-200 bg-slate-100 text-slate-400;
  }

  .field-suffix {
    @apply pointer-events-none absolute inset-y-0 right-3 flex items-center text-sm leading-5 text-slate-400;
  }

  .field-prefix {
    @apply pointer-events-none absolute inset-y-0 left-3 flex items-center text-sm leading-5 text-slate-400;
  }

  select.field {
    @apply appearance-none pr-10;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2364748b' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
  }

  .label {
    @apply mb-1.5 block text-sm font-semibold text-slate-700;
  }

  .card {
    @apply rounded-xl border border-slate-200 bg-white;
  }

  .data-table {
    @apply overflow-hidden rounded-xl border border-slate-200 bg-white;
  }

  .data-table th {
    @apply border-b border-slate-200 bg-white px-4 py-2.5 text-xs font-medium text-slate-600;
  }

  .data-table td {
    @apply relative border-b border-slate-100 p-0 text-sm text-slate-700;
  }

  .data-table tbody tr:last-child td {
    @apply border-b-0;
  }

  .data-table tbody tr {
    @apply transition-colors hover:bg-orange-50/35;
  }

  .report-summary-grid {
    @apply grid gap-3 sm:grid-cols-2 xl:grid-cols-4;
  }

  .report-stat {
    @apply relative h-full overflow-hidden rounded-xl border border-slate-200 bg-white p-5;
  }

  .report-stat-icon {
    @apply mb-4 flex size-9 items-center justify-center rounded-lg bg-orange-50 text-orange-600;
  }

  .report-stat-label {
    @apply text-[13px] font-medium text-slate-600;
  }

  .report-stat-value {
    @apply mt-1 text-2xl font-bold leading-tight tabular-nums text-slate-950;
  }

  .report-stat-supporting {
    @apply mt-2 text-[13px] leading-5 text-slate-500;
  }

  .report-table {
    @apply overflow-hidden rounded-xl border border-slate-200 bg-white;
  }

  .report-table th {
    @apply border-b border-slate-200 bg-white px-4 py-2.5 text-left text-xs font-medium text-slate-600;
  }

  .report-table td {
    @apply border-b border-slate-100 px-4 py-3 text-sm text-slate-700;
  }

  .report-table tbody tr {
    @apply transition-colors hover:bg-orange-50/35;
  }

  .report-table tbody tr:last-child td {
    @apply border-b-0;
  }

  .report-table-total td {
    @apply bg-slate-50/80 font-semibold text-slate-900;
  }

  .report-section-heading {
    @apply flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between;
  }

  .scroll-shadow-left {
    background: linear-gradient(to right, rgb(203 213 225 / 0.45) 0, transparent 100%);
  }

  .scroll-shadow-right {
    background: linear-gradient(to left, rgb(203 213 225 / 0.45) 0, transparent 100%);
  }

  .status-badge {
    @apply inline-flex items-center rounded-md border px-2.5 py-1 text-sm font-semibold;
  }

  .data-table .status-badge {
    @apply px-2 py-0.5 text-xs;
  }

  .status-badge--draft { @apply border-slate-200 bg-slate-100 text-slate-600; }
  .status-badge--sending { @apply border-amber-200 bg-amber-50 text-amber-800; }
  .status-badge--sent { @apply border-blue-200 bg-blue-50 text-blue-700; }
  .status-badge--late { @apply border-red-200 bg-red-50 text-red-700; }
  .status-badge--paid { @apply border-emerald-200 bg-emerald-50 text-emerald-700; }
  .status-badge--void { @apply border-slate-200 bg-white text-slate-400 line-through; }
  .status-badge--closed { @apply border-violet-200 bg-violet-50 text-violet-700; }

  /* The baseline is an inset shadow so the active tab's underline covers it instead of sitting above it. */
  .tab-list {
    box-shadow: inset 0 -1px 0 var(--color-slate-200);
  }

  .tab-link {
    @apply relative inline-flex items-center gap-2 border-b-2 px-1 py-2.5 text-sm font-semibold;
  }

  .tab-link--active { @apply border-orange-500 text-slate-950; }
  .tab-link--inactive { @apply border-transparent text-slate-500 hover:text-slate-800; }

  .document-text strong { @apply font-bold; }
  .document-text em { @apply italic; }
  .document-text p + p { @apply mt-3; }
  .document-text ul { @apply my-2 list-disc space-y-1 pl-5; }
  .document-text ol { @apply my-2 list-decimal space-y-1 pl-5; }
  .document-text a { @apply font-semibold text-orange-700 underline decoration-orange-300 underline-offset-2 hover:text-orange-800; }
}