/* Custom overrides — Tailwind handles the heavy lifting */

/* ── Form base styles ─────────────────────────────────────────────── */
.form-label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.375rem;
    letter-spacing: 0.01em;
}
.dark .form-label {
    color: #d1d5db;
}

.form-input {
    display: block;
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.5rem;
    color: #111827;
    background-color: #ffffff;
    border: 1px solid #e4e4e7;
    border-radius: 0.625rem;
    box-shadow: 0 1px 2px rgba(16, 16, 20, 0.04);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.form-input:focus {
    outline: none;
    border-color: #18181b;
    box-shadow: 0 0 0 4px rgba(24, 24, 27, 0.08);
}

.form-input:hover:not(:focus) {
    border-color: #d1d5db;
}

.form-input::placeholder {
    color: #9ca3af;
    font-weight: 400;
}

.dark .form-input {
    color: #ededef;
    background-color: #0f0f11;
    border-color: #26262a;
}

.dark .form-input:focus {
    border-color: #52525b;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.05);
}

.dark .form-input:hover:not(:focus) {
    border-color: #34343a;
}

.dark .form-input::placeholder {
    color: #6b7280;
}

/* Select arrow colour in dark mode */
.dark select.form-input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 1rem;
}

/* Textarea */
textarea.form-input {
    resize: vertical;
    min-height: 4rem;
}

/* Disabled state */
.form-input:disabled,
.form-input[readonly] {
    background-color: #f9fafb;
    color: #6b7280;
    cursor: not-allowed;
    border-color: #e5e7eb;
}

.dark .form-input:disabled,
.dark .form-input[readonly] {
    background-color: #0c0c0d;
    color: #71717a;
    border-color: #222226;
}

/* Sidebar transition */
aside {
    will-change: transform;
}

/* Table utility */
.data-table th {
    font-size: 0.70rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    white-space: nowrap;
}

.data-table td {
    font-size: 0.875rem;
    vertical-align: middle;
}

/* Form focus ring */
input:focus,
select:focus,
textarea:focus {
    outline: none;
}

/* Print styles */
@media print {
    .no-print { display: none !important; }
    body { background: white !important; }
    .print-full { width: 100% !important; max-width: 100% !important; }

    /* Hide the app chrome (sidebar, navbar, breadcrumbs, footer, toasts) so
       printed pages (invoices, receipts, ledgers, reports) only show the
       page content — not the dashboard shell around it. */
    aside,
    header,
    nav[aria-label="Breadcrumb"],
    footer,
    #toast-container {
        display: none !important;
    }

    /* Content area is normally offset to make room for the sidebar */
    body > div.transition-all {
        margin-left: 0 !important;
    }

    main {
        padding: 0 !important;
        min-height: 0 !important;
    }

    @page { size: A4; margin: 10mm; }

    /* Paper is white: in the dark theme every light text colour would vanish. */
    html, body, main, main * {
        color: #111 !important;
        background: transparent !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }
    main .text-green-600, main .text-green-400 { color: #15803d !important; }
    main .text-red-500, main .text-red-400, main .text-red-600 { color: #b91c1c !important; }
    main *, main *::before, main *::after { border-color: #d4d4d8 !important; }

    /* Filters, buttons and inputs are for the screen. */
    .print\:hidden,
    main form[method="GET"], main form[method="get"],
    main button, main select, main input[type="date"],
    main a[href].px-4.py-2 { display: none !important; }
    main .rounded-xl.p-4:has(> form[method="GET"]) { display: none !important; }

    /* Show whole tables, repeat their headings on every page, keep rows whole. */
    .overflow-x-auto, .overflow-hidden, .overflow-y-auto { overflow: visible !important; max-height: none !important; }
    table { width: 100% !important; font-size: 9pt; border-collapse: collapse; }
    thead { display: table-header-group; }
    tfoot { display: table-footer-group; }
    tr, .break-inside-avoid { break-inside: avoid; page-break-inside: avoid; }
    th, td { padding-top: 3px !important; padding-bottom: 3px !important; }
    main .rounded-xl { border: 1px solid #d4d4d8 !important; border-radius: 4px !important; }
    main .space-y-6 > * + * { margin-top: 10px !important; }
    main a { text-decoration: none !important; }

    .print-only { display: block !important; }
    .print-head { margin-bottom: 8px; padding-bottom: 6px; border-bottom: 2px solid #111; }
    .print-store { font-size: 14pt; font-weight: 700; margin: 0; }
    .print-meta { font-size: 9pt; margin: 2px 0 0; }
    canvas { max-width: 100% !important; }
}
.print-only { display: none; }

/* Loading spinner */
@keyframes spin {
    to { transform: rotate(360deg); }
}
.animate-spin {
    animation: spin 1s linear infinite;
}

/* Transition for flash messages */
[x-cloak] { display: none !important; }


/* ════════════════════════════════════════════════════════════════════
   Ivory & Ink — premium layer
   Views use plain Tailwind utilities; these rules refine them in one
   place so all 70+ screens share the same buttons, cards and type.
   Light-only rules are scoped to html:not(.dark) so they never leak
   into the graphite dark theme further down.
   ════════════════════════════════════════════════════════════════════ */

body {
    font-feature-settings: "cv11", "ss01";
    letter-spacing: -0.006em;
}
h1, h2, h3, .text-2xl, .text-xl, .text-3xl { letter-spacing: -0.022em; }

/* Money, invoice numbers, SKUs: numbers line up in columns. */
.font-mono { font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }

tbody tr { transition: background-color .12s ease; }
span.rounded-full[class*="bg-"][class*="text-"] { letter-spacing: 0; font-weight: 600; }

/* Keyboard focus is always visible (accessibility). */
a:focus-visible, button:focus-visible, [role="button"]:focus-visible {
    outline: 2px solid #b8914a;
    outline-offset: 2px;
}
::selection { background: #ead9b3; color: #18181b; }

/* Shared motion for every button style below. */
.bg-blue-600.text-white, .bg-brand-600.text-white, .bg-primary-600.text-white,
.bg-green-600.text-white, .bg-red-600.text-white {
    transition: transform .12s ease, box-shadow .2s ease, filter .2s ease, background-color .2s ease;
}
.bg-blue-600.text-white:active, .bg-brand-600.text-white:active, .bg-primary-600.text-white:active,
.bg-green-600.text-white:active, .bg-red-600.text-white:active { transform: translateY(1px); }
.bg-blue-600.text-white:disabled, .bg-blue-600.text-white[disabled] { opacity: .45; box-shadow: none; cursor: not-allowed; }

/* ── LIGHT: ivory canvas, white cards, ink buttons ────────────────── */
html:not(.dark) body.bg-gray-100 { background-color: #f7f7f5; }

html:not(.dark) :is(.bg-blue-600, .bg-brand-600, .bg-primary-600).text-white {
    background-image: linear-gradient(180deg, #2a2a2e 0%, #121214 100%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.10) inset,
        0 1px 2px rgba(16, 16, 20, 0.20),
        0 4px 12px -4px rgba(16, 16, 20, 0.35);
}
html:not(.dark) :is(.bg-blue-600, .bg-brand-600, .bg-primary-600).text-white:hover {
    filter: brightness(1.18);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.12) inset,
        0 2px 4px rgba(16, 16, 20, 0.18),
        0 10px 22px -8px rgba(16, 16, 20, 0.45);
}
html:not(.dark) :is(.bg-green-600, .bg-red-600, .bg-emerald-600, .bg-amber-500).text-white {
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.14) inset, 0 1px 2px rgba(16, 16, 20, 0.18);
}

html:not(.dark) button.border.bg-white, html:not(.dark) a.border.bg-white {
    border-color: #e4e4e7;
    box-shadow: 0 1px 2px rgba(16, 16, 20, 0.05);
}
html:not(.dark) button.border.bg-white:hover, html:not(.dark) a.border.bg-white:hover { border-color: #c4c4c9; }

html:not(.dark) :is(.bg-white.rounded-xl, .bg-white.rounded-2xl):not([class*="shadow-lg"]):not([class*="shadow-xl"]):not([class*="shadow-2xl"]) {
    border: 1px solid #ececee;
    box-shadow: 0 1px 2px rgba(16, 16, 20, 0.04), 0 2px 8px -2px rgba(16, 16, 20, 0.05);
}

html:not(.dark) thead.bg-gray-50 th, html:not(.dark) thead th.bg-gray-50, html:not(.dark) .data-table th {
    color: #71717a;
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
}

/* Secondary actions (Import, Print, Export…) share one quiet outline style
   so the ink primary leads. Pills (rounded-full) keep their colour — there
   it marks the active filter. */
html:not(.dark) :is(a, button):is(.bg-purple-600, .bg-teal-600, .bg-orange-600, .bg-orange-500, .bg-emerald-600, .bg-violet-600, .bg-cyan-600).text-white:not(.rounded-full) {
    background: #ffffff;
    color: #18181b;
    border: 1px solid #e4e4e7;
    box-shadow: 0 1px 2px rgba(16, 16, 20, 0.05);
}
html:not(.dark) :is(a, button):is(.bg-purple-600, .bg-teal-600, .bg-orange-600, .bg-orange-500, .bg-emerald-600, .bg-violet-600, .bg-cyan-600).text-white:not(.rounded-full):hover {
    background: #fafafa;
    border-color: #c4c4c9;
}

/* Active sidebar item: ink pill with a gold marker on the left edge. */
.sidebar-active { position: relative; }
.sidebar-active::before {
    content: "";
    position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px;
    border-radius: 0 3px 3px 0;
    background: #cfa961;
}
html:not(.dark) .sidebar-active {
    background-image: linear-gradient(180deg, #27272a 0%, #121214 100%);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 4px 10px -4px rgba(16, 16, 20, 0.4);
}

/* ── DARK: graphite. Black canvas, layered greys, no white blocks. ──
   Surfaces step up by small amounts (#0a → #13 → #1c) and edges are
   white at 6–10% so nothing glares. */
html.dark body { background-color: #0a0a0b; }

/* The views' dark:gray utilities were zinc-600/700 — too bright on black. */
html.dark .dark\:bg-gray-700      { background-color: #1a1a1d; }
html.dark .dark\:bg-gray-700\/50  { background-color: rgba(30, 30, 34, 0.6); }
html.dark .dark\:bg-gray-700\/40  { background-color: rgba(30, 30, 34, 0.5); }
html.dark .dark\:bg-gray-700\/30  { background-color: rgba(30, 30, 34, 0.4); }
html.dark .dark\:bg-gray-700\/20  { background-color: rgba(30, 30, 34, 0.3); }
html.dark .dark\:bg-gray-600      { background-color: #222226; }
html.dark .dark\:hover\:bg-gray-600:hover { background-color: #26262a; }
html.dark .dark\:border-gray-600  { border-color: #26262a; }

/* Cards: graphite with a hairline edge and a faint top highlight. */
html.dark :is(.bg-white.rounded-xl, .bg-white.rounded-2xl, .dark\:bg-ink-800.rounded-xl, .dark\:bg-ink-800.rounded-2xl) {
    border-color: rgba(255, 255, 255, 0.06);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 1px 2px rgba(0, 0, 0, 0.4);
}

html.dark thead th, html.dark .data-table th {
    color: #71717a;
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
}

/* Primary: raised graphite, light text — never a white slab. */
html.dark :is(.bg-blue-600, .bg-brand-600, .bg-primary-600).text-white {
    background-image: linear-gradient(180deg, #2e2e33 0%, #1d1d21 100%);
    color: #f4f4f5;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.09),
        inset 0 1px 0 rgba(255, 255, 255, 0.10),
        0 1px 2px rgba(0, 0, 0, 0.5);
}
html.dark :is(.bg-blue-600, .bg-brand-600, .bg-primary-600).text-white:hover {
    background-image: linear-gradient(180deg, #38383e 0%, #232328 100%);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 4px 14px -6px rgba(0, 0, 0, 0.7);
}

/* Secondary actions: same graphite family, flatter than primary. */
html.dark :is(a, button):is(.bg-purple-600, .bg-teal-600, .bg-orange-600, .bg-orange-500, .bg-emerald-600, .bg-violet-600, .bg-cyan-600).text-white:not(.rounded-full) {
    background: #141416;
    color: #e4e4e7;
    border: 1px solid rgba(255, 255, 255, 0.08);
}
html.dark :is(a, button):is(.bg-purple-600, .bg-teal-600, .bg-orange-600, .bg-orange-500, .bg-emerald-600, .bg-violet-600, .bg-cyan-600).text-white:not(.rounded-full):hover {
    background: #1c1c1f;
    border-color: rgba(255, 255, 255, 0.14);
}

/* Save/delete keep their meaning but sit lower in saturation on black. */
html.dark .bg-green-600.text-white { background-color: #15803d; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10); }
html.dark .bg-red-600.text-white   { background-color: #b91c1c; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10); }

html.dark .sidebar-active {
    background-image: linear-gradient(180deg, #232327 0%, #19191c 100%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

html.dark ::selection { background: #5c4524; color: #f4f4f5; }
html.dark ::-webkit-scrollbar-thumb { background: #2a2a2e; }

/* Accent text (links, highlighted values, tinted icons) was blue-400 —
   on the ink ramp that is a muddy grey on black. Dark mode reads it as gold. */
html.dark :is(.dark\:text-blue-400, .dark\:text-blue-300, .dark\:text-indigo-400) { color: #d6b676; }
html.dark :is(.dark\:hover\:text-blue-400, .dark\:hover\:text-blue-300):hover { color: #e6cf9c; }
/* Same for accent text that never got a dark: variant (e.g. table edit icons):
   ink on black would vanish. */
html.dark :is(.text-blue-500, .text-blue-600, .text-blue-700, .text-indigo-600, .text-brand-600, .text-primary-600):not([class*="dark:text-"]) { color: #d6b676; }

/* ════════════════════════════════════════════════════════════════════
   Form controls — one look on every screen
   Views style inputs with many different utility strings; these rules
   give every text field, dropdown and textarea the same border, radius,
   focus ring and dropdown arrow. Borderless controls (border-0) and
   error states (border-red-*) are left alone.
   ════════════════════════════════════════════════════════════════════ */
:is(
    input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=hidden]):not([type=color]),
    select,
    textarea
):not([class*="border-0"]):not([class*="border-red"]) {
    background-color: #ffffff;
    border: 1px solid #e4e4e7;
    border-radius: 0.625rem;
    color: #18181b;
    box-shadow: 0 1px 2px rgba(16, 16, 20, 0.04);
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
:is(input, select, textarea):not([type=checkbox]):not([type=radio]):not([class*="border-0"]):not([class*="border-red"]):hover:not(:focus):not(:disabled) {
    border-color: #d4d4d8;
}
:is(input, select, textarea):not([type=checkbox]):not([type=radio]):not([class*="border-0"]):not([class*="border-red"]):focus {
    outline: none;
    border-color: #18181b;
    box-shadow: 0 0 0 4px rgba(24, 24, 27, 0.08);
}
:is(input, textarea)::placeholder { color: #a1a1aa; opacity: 1; }
:is(input, select, textarea):is(:disabled, [readonly]):not([type=checkbox]):not([type=radio]) {
    background-color: #fafafa;
    color: #71717a;
    cursor: not-allowed;
}

/* Dropdowns: our own chevron instead of each browser's default arrow. */
select:not([multiple]):not([class*="border-0"]) {
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2371717a' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.7rem center;
    background-size: 0.95rem;
    padding-right: 2.25rem !important;
    cursor: pointer;
}
select[class*="text-xs"]:not([multiple]):not([class*="border-0"]) {
    background-position: right 0.4rem center;
    background-size: 0.75rem;
    padding-right: 1.5rem !important;
}

/* Date pickers follow the theme; checkboxes and radios use the ink accent. */
input[type=date], input[type=datetime-local], input[type=time] { color-scheme: light; }
input[type=checkbox], input[type=radio] { accent-color: #18181b; width: 1rem; height: 1rem; cursor: pointer; }

/* ── Dark ─────────────────────────────────────────────────────────── */
html.dark :is(
    input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=hidden]):not([type=color]),
    select,
    textarea
):not([class*="border-0"]):not([class*="border-red"]) {
    background-color: #0f0f11;
    border-color: #26262a;
    color: #ededef;
    box-shadow: none;
}
html.dark :is(input, select, textarea):not([type=checkbox]):not([type=radio]):not([class*="border-0"]):not([class*="border-red"]):hover:not(:focus):not(:disabled) {
    border-color: #34343a;
}
html.dark :is(input, select, textarea):not([type=checkbox]):not([type=radio]):not([class*="border-0"]):not([class*="border-red"]):focus {
    border-color: #52525b;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.05);
}
html.dark :is(input, textarea)::placeholder { color: #52525b; }
html.dark :is(input, select, textarea):is(:disabled, [readonly]):not([type=checkbox]):not([type=radio]) { background-color: #0c0c0d; color: #71717a; }
html.dark select:not([multiple]):not([class*="border-0"]) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23a1a1aa' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
}
html.dark select option { background-color: #141416; color: #ededef; }
html.dark :is(input[type=date], input[type=datetime-local], input[type=time]) { color-scheme: dark; }
html.dark :is(input[type=checkbox], input[type=radio]) { accent-color: #d6b676; }

/* ── Collapsible sidebar (desktop): an icon rail ─────────────────────
   Labels, section headings and the store name hide; icons stay and the
   link's name shows as a tooltip (title set from the sidebar markup). */
@media (min-width: 1024px) {
    aside.sidebar-collapsed { width: 4.5rem; }
    aside.sidebar-collapsed nav { padding-left: .625rem; padding-right: .625rem; overflow-x: hidden; }
    aside.sidebar-collapsed nav { scrollbar-width: none; }
    aside.sidebar-collapsed nav::-webkit-scrollbar { display: none; }
    aside.sidebar-collapsed nav a { justify-content: center; gap: 0; padding-left: 0; padding-right: 0; }
    aside.sidebar-collapsed nav a > span,
    aside.sidebar-collapsed nav .pt-3.pb-1 > p { display: none; }
    aside.sidebar-collapsed nav .pt-3.pb-1 { padding: .5rem .5rem; }
    aside.sidebar-collapsed nav .pt-3.pb-1::before {
        content: ""; display: block; height: 1px; background: #ececee;
    }
    html.dark aside.sidebar-collapsed nav .pt-3.pb-1::before { background: rgba(255, 255, 255, .07); }
    aside.sidebar-collapsed .sidebar-active::before { left: -10px; }

    /* Brand: logo only, centred. */
    aside.sidebar-collapsed > div:first-child { justify-content: center; padding-left: 0; padding-right: 0; }
    aside.sidebar-collapsed > div:first-child a > div { display: none; }

    /* User footer: avatar only. */
    aside.sidebar-collapsed > div:last-child { padding-left: 0; padding-right: 0; }
    aside.sidebar-collapsed > div:last-child > div { justify-content: center; }
    aside.sidebar-collapsed > div:last-child > div > :not(:first-child) { display: none; }
}