@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";

@theme {
  --font-sans: "Inter", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --color-brand-50: #fff7ed;
  --color-brand-100: #ffedd5;
  --color-brand-500: #f97316;
  --color-brand-600: #ea580c;
}

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

@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;
  }
}

.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 {
  lexxy-editor {
    @apply min-h-56 rounded-xl border border-slate-300 bg-white text-sm shadow-sm;
  }

  lexxy-editor lexxy-toolbar {
    @apply sticky top-0 z-10 flex-wrap 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 shadow-sm transition-colors;
  }

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

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

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

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

  .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-[10px] font-bold uppercase tracking-[0.09em] text-slate-400;
  }

  .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 shadow-sm 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 shadow-none;
  }

  .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 shadow-sm shadow-slate-950/[0.025];
  }

  .data-table {
    @apply overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm shadow-slate-950/[0.025];
  }

  .data-table th {
    @apply border-b border-slate-200 bg-slate-50/70 px-4 py-2.5 text-[11px] font-semibold uppercase tracking-wide text-slate-500;
  }

  .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 shadow-sm shadow-slate-950/[0.025];
  }

  .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-xs font-semibold uppercase tracking-wide text-slate-500;
  }

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

  .report-stat-supporting {
    @apply mt-2 text-xs leading-5 text-slate-500;
  }

  .report-table {
    @apply overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm shadow-slate-950/[0.025];
  }

  .report-table th {
    @apply border-b border-slate-200 bg-slate-50/70 px-4 py-2.5 text-left text-[11px] font-semibold uppercase tracking-wide text-slate-500;
  }

  .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--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; }

  .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; }
}