@import 'tailwindcss';

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source '../**/*.blade.php';
@source '../../app/**/*.php';

/*
 * Dark mode is driven by a class on <html> rather than the OS preference
 * alone, because a shop can pin the interface to light or dark in settings.
 */
@custom-variant dark (&:where(.dark, .dark *));

@theme {
    --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';

    /*
     * Brand tokens are only fallbacks. The real values are injected as inline
     * custom properties on <html> by ThemeManager, so each shop's colours
     * apply without rebuilding the CSS bundle.
     */
    --color-brand: #2563eb;
    --color-brand-soft: #eff6ff;
    --color-brand-hover: #1d4ed8;
}

@layer base {
    :root {
        --tx-primary: #2563eb;
        --tx-primary-rgb: 37, 99, 235;
        --tx-primary-soft: #eff6ff;
        --tx-primary-hover: #1d4ed8;
        --tx-primary-ring: #93c5fd;
        --tx-on-primary: #ffffff;
        --tx-accent: #0ea5e9;
        --tx-accent-soft: #e0f2fe;
        --tx-on-accent: #ffffff;
        --tx-radius: 8px;
        --tx-row-height: 2.6rem;
        --tx-cell-pad: 0.55rem;
        --tx-font-size: 0.875rem;
        --tx-font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
    }

    html {
        font-family: var(--tx-font-family);
        -webkit-text-size-adjust: 100%;
    }

    body {
        @apply bg-slate-50 text-slate-800 antialiased dark:bg-slate-950 dark:text-slate-200;
        font-size: var(--tx-font-size);
    }

    /* Numeric columns line up only if the digits are tabular. */
    .tabular,
    td.num,
    th.num,
    input[type='number'] {
        font-variant-numeric: tabular-nums;
    }

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

    ::-webkit-scrollbar {
        width: 10px;
        height: 10px;
    }

    ::-webkit-scrollbar-thumb {
        @apply rounded-full bg-slate-300 dark:bg-slate-700;
    }

    ::-webkit-scrollbar-track {
        @apply bg-transparent;
    }
}

@layer components {
    /* ---------------------------------------------------------------- brand */

    .btn {
        @apply inline-flex items-center justify-center gap-2 whitespace-nowrap border px-3.5 py-2 text-sm
               font-medium transition select-none
               focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1
               disabled:cursor-not-allowed disabled:opacity-50;
        border-radius: var(--tx-radius);
    }

    .btn-primary {
        background-color: var(--tx-primary);
        border-color: var(--tx-primary);
        color: var(--tx-on-primary);
    }

    .btn-primary:hover:not(:disabled) {
        background-color: var(--tx-primary-hover);
        border-color: var(--tx-primary-hover);
    }

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

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

    .btn-ghost {
        @apply border-transparent bg-transparent text-slate-600 hover:bg-slate-100
               dark:text-slate-300 dark:hover:bg-slate-800;
    }

    .btn-sm {
        @apply px-2.5 py-1.5 text-xs;
    }

    .btn-lg {
        @apply px-5 py-2.5 text-base;
    }

    /* ---------------------------------------------------------------- forms */

    .field-label {
        @apply mb-1.5 block text-xs font-medium text-slate-600 dark:text-slate-400;
    }

    .field-input {
        @apply block w-full border border-slate-300 bg-white px-3 py-2 text-sm text-slate-900
               placeholder:text-slate-400 disabled:bg-slate-100 disabled:text-slate-500
               dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100 dark:disabled:bg-slate-800;
        border-radius: var(--tx-radius);
    }

    .field-input:focus {
        @apply outline-none ring-2;
        border-color: var(--tx-primary);
        --tw-ring-color: var(--tx-primary-ring);
    }

    .field-error {
        @apply mt-1 text-xs text-red-600 dark:text-red-400;
    }

    .field-hint {
        @apply mt-1 text-xs text-slate-500 dark:text-slate-400;
    }

    /* --------------------------------------------------------------- panels */

    .card {
        @apply border border-slate-200 bg-white shadow-sm dark:border-slate-800 dark:bg-slate-900;
        border-radius: calc(var(--tx-radius) + 4px);
    }

    .card-header {
        @apply flex flex-wrap items-center justify-between gap-3 border-b border-slate-200 px-5 py-3.5
               dark:border-slate-800;
    }

    .card-body {
        @apply p-5;
    }

    /* --------------------------------------------------------------- tables */

    .table {
        @apply w-full text-left text-sm;
    }

    .table thead th {
        @apply border-b border-slate-200 bg-slate-50 px-3 py-2.5 text-xs font-semibold uppercase
               tracking-wide text-slate-500 dark:border-slate-800 dark:bg-slate-900/60 dark:text-slate-400;
    }

    .table tbody td {
        @apply border-b border-slate-100 text-slate-700 dark:border-slate-800/70 dark:text-slate-300;
        padding: var(--tx-cell-pad) 0.75rem;
    }

    .table tbody tr:hover {
        @apply bg-slate-50/80 dark:bg-slate-800/40;
    }

    /* --------------------------------------------------------------- badges */

    .badge {
        @apply inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium;
    }

    .badge-gray   { @apply bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-300; }
    .badge-blue   { @apply bg-blue-50 text-blue-700 dark:bg-blue-950 dark:text-blue-300; }
    .badge-green  { @apply bg-emerald-50 text-emerald-700 dark:bg-emerald-950 dark:text-emerald-300; }
    .badge-red    { @apply bg-red-50 text-red-700 dark:bg-red-950 dark:text-red-300; }
    .badge-amber  { @apply bg-amber-50 text-amber-700 dark:bg-amber-950 dark:text-amber-300; }
    .badge-orange { @apply bg-orange-50 text-orange-700 dark:bg-orange-950 dark:text-orange-300; }
    .badge-purple { @apply bg-purple-50 text-purple-700 dark:bg-purple-950 dark:text-purple-300; }
    .badge-indigo { @apply bg-indigo-50 text-indigo-700 dark:bg-indigo-950 dark:text-indigo-300; }

    /* ------------------------------------------------------------ nav items */

    .nav-item {
        @apply flex items-center gap-3 px-3 py-2 text-sm font-medium transition;
        border-radius: var(--tx-radius);
    }

    .nav-item-idle {
        @apply text-slate-600 hover:bg-slate-100 dark:text-slate-400 dark:hover:bg-slate-800/70;
    }

    .nav-item-active {
        background-color: var(--tx-primary-soft);
        color: var(--tx-primary-hover);
        @apply font-semibold dark:bg-slate-800 dark:text-white;
    }

    .sidebar-dark .nav-item-idle {
        @apply text-slate-400 hover:bg-white/10 hover:text-white;
    }

    .sidebar-dark .nav-item-active {
        @apply bg-white/10 text-white;
    }
}

@layer utilities {
    .text-brand {
        color: var(--tx-primary);
    }

    .bg-brand {
        background-color: var(--tx-primary);
    }

    .bg-brand-soft {
        background-color: var(--tx-primary-soft);
    }

    .border-brand {
        border-color: var(--tx-primary);
    }

    .ring-brand {
        --tw-ring-color: var(--tx-primary-ring);
    }
}

/*
 * Print rules live here rather than in each receipt template so that any page
 * — a Livewire screen, a receipt, a report — prints predictably.
 */
@media print {
    .no-print,
    nav,
    aside,
    header.app-header {
        display: none !important;
    }

    body {
        background: #fff !important;
        font-size: 12px;
    }

    .print-full {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }

    .page-break {
        page-break-after: always;
    }
}
