@import 'tailwindcss';

@source '../js/**/*.tsx';
@source '../js/**/*.ts';
@source '../views/**/*.blade.php';

/* BizBook: blue, with a light purple accent, on a cool soft workspace. System fonts only (no font download: pages
   stay small on mobile data), big touch targets for low-cost Android phones. A business can pick its own colour
   (--brand, set from its Branding settings). */
@theme {
    --font-sans: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-weight-semibold: 600;
    --font-weight-bold: 650;
    --font-weight-extrabold: 750;

    --color-canvas: #f5f6fb;
    --color-panel: #ffffff;
    --color-ink: #0f172a;
    --color-ink-2: #334155;
    --color-muted: #64748b;
    --color-line: #e2e8f0;
    --color-line-2: #f1f5f9;

    --color-deep-text: #cbd5e1;
    --color-deep-dim: #94a3b8;

    /* the light purple accent */
    --color-accent: #8b5cf6;
    --color-accent-soft: #ede9fe;

    --radius-card: 14px;
    --shadow-card: 0 1px 2px rgb(15 23 42 / 0.05);
    --shadow-pop: 0 12px 32px -4px rgb(15 23 42 / 0.18), 0 2px 6px rgb(15 23 42 / 0.06);
}

@theme inline {
    --color-brand: var(--brand, #2563eb);
    --color-deep: var(--deep, #1e1b4b);
}

@layer base {
    html { -webkit-tap-highlight-color: transparent; }
    body { font-feature-settings: 'tnum' 1; }
    :focus-visible { outline: 2px solid var(--brand, #2563eb); outline-offset: 2px; }
    ::selection { background: color-mix(in srgb, var(--brand, #2563eb) 22%, transparent); }
}

@layer components {
    .field-input {
        @apply block w-full rounded-lg border border-line bg-white px-3 py-3 text-base text-ink shadow-xs transition
            placeholder:text-muted/70 focus:border-brand focus:ring-4 focus:ring-brand/12 focus:outline-none
            disabled:bg-line-2 disabled:text-muted sm:py-2.5 sm:text-sm;
    }
    .field-input[aria-invalid='true'] { @apply border-rose-400 focus:border-rose-500 focus:ring-rose-500/12; }
}

@utility scrollbar-thin {
    scrollbar-width: thin;
}
@utility no-scrollbar {
    scrollbar-width: none;
    &::-webkit-scrollbar { display: none; }
}
@utility pb-safe {
    padding-bottom: env(safe-area-inset-bottom);
}

@keyframes toast-in { from { opacity: 0; transform: translateY(-8px) scale(0.98); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes pop-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } }
@keyframes sheet-in { from { transform: translateY(100%); } }
.animate-toast-in { animation: toast-in 0.25s ease-out; }
.animate-fade-in { animation: fade-in 0.2s ease-out; }
.animate-pop-in { animation: pop-in 0.22s ease-out; }
.animate-sheet-in { animation: sheet-in 0.22s ease-out; }
@media (prefers-reduced-motion: reduce) {
    .animate-toast-in, .animate-fade-in, .animate-pop-in, .animate-sheet-in { animation: none; }
}

/* Tables on phones: each row is a card, each cell a "label  value" line (labels come from the column headings) */
@media (max-width: 639px) {
    .stack-table { display: block; }
    .stack-table > tr { display: block; padding: 0.875rem 1.25rem; border-bottom: 1px solid var(--color-line-2); }
    .stack-table > tr:last-child { border-bottom: 0; }
    .stack-table > tr > td { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.25rem 0 !important; border: 0 !important; text-align: right; white-space: normal; }
    .stack-table > tr > td::before { content: attr(data-label); flex-shrink: 0; font-size: 0.75rem; font-weight: 600; color: var(--color-muted); text-align: left; }
    .stack-table > tr > td[data-label=""]::before { content: none; }
    .stack-table > tr > td[data-label=""] { justify-content: flex-end; }
    .stack-table > tr > td:first-child { display: block; text-align: left; padding-bottom: 0.5rem !important; }
    .stack-table > tr > td:first-child::before { content: none; }
    .stack-table > tr > td:empty { display: none; }
}