/* Project-specific overrides on top of Tailwind. */

html {
    scroll-behavior: smooth;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Subtle scrollbar styling */
* {
    scrollbar-width: thin;
    scrollbar-color: rgb(203 213 225) transparent;
}
.dark * {
    scrollbar-color: rgb(51 65 85) transparent;
}
*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
*::-webkit-scrollbar-thumb {
    background-color: rgb(203 213 225);
    border-radius: 9999px;
}
.dark *::-webkit-scrollbar-thumb {
    background-color: rgb(51 65 85);
}
*::-webkit-scrollbar-track {
    background-color: transparent;
}

/* Apply a sensible dark theme to form controls that aren't class-styled (e.g. inputs in third-party widgets). */
.dark input,
.dark select,
.dark textarea {
    color-scheme: dark;
}
input,
select,
textarea {
    color-scheme: light;
}

/* In dark mode, give form inputs (with the standard Tailwind border-slate-200 class)
   a dark surface and lighter text so legacy markup without explicit dark: variants still reads OK. */
.dark input.border-slate-200,
.dark select.border-slate-200,
.dark textarea.border-slate-200 {
    background-color: rgb(15 23 42); /* slate-900 */
    color: rgb(241 245 249);          /* slate-100 */
    border-color: rgb(51 65 85);      /* slate-700 */
}
.dark input.border-slate-200:disabled,
.dark select.border-slate-200:disabled,
.dark textarea.border-slate-200:disabled {
    background-color: rgb(30 41 59);  /* slate-800 */
    color: rgb(148 163 184);          /* slate-400 */
}
.dark input.border-slate-200::placeholder,
.dark textarea.border-slate-200::placeholder {
    color: rgb(100 116 139);          /* slate-500 */
}

/* Remove the default disclosure triangle on <details>/<summary> popovers. */
.fix-popover summary::-webkit-details-marker { display: none; }
.fix-popover summary { list-style: none; }

/* M6: visible keyboard focus on collapsible disclosures.
   The browser default focus ring is invisible inside our dark-mode popovers,
   so we draw an explicit brand-colored ring on focus-visible. */
.fix-popover summary:focus-visible,
details > summary:focus-visible {
    outline: 2px solid rgb(124 109 240);   /* brand-400 */
    outline-offset: 2px;
    border-radius: 8px;
}

/* M4: bump light-mode secondary text contrast.
   `text-slate-500` on white is right at the AA threshold for normal text.
   We rewrite it to slate-600 globally in the light theme, while leaving
   dark mode untouched (where slate-500 reads fine on slate-900). */
:root:not(.dark) .text-slate-500 { color: rgb(71 85 105); /* slate-600 */ }

/* ---- Print: invoice-only rendering ---- */
@media print {
    /* M7: consistent paper margins across browsers (defaults vary 6–25mm). */
    @page { margin: 18mm; }

    /* Force light look regardless of theme */
    html, body { background: white !important; color: black !important; color-scheme: light !important; }

    /* Hide everything except the invoice card and its content */
    body * { visibility: hidden !important; }
    .invoice-printable, .invoice-printable * { visibility: visible !important; }

    /* Reposition the invoice to fill the page */
    .invoice-printable {
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: white !important;
        color: black !important;
        box-shadow: none !important;
        border: 0 !important;
        border-radius: 0 !important;
    }

    /* Inside the invoice, drop dark backgrounds and round corners */
    .invoice-printable [class*="bg-slate-"],
    .invoice-printable [class*="bg-brand-"] { background: white !important; }
    .invoice-printable [class*="text-slate-"],
    .invoice-printable [class*="text-brand-"] { color: black !important; }

    /* Force borders to a print-safe gray */
    .invoice-printable [class*="border-slate-"] { border-color: #cbd5e1 !important; }

    /* M7: don't split line-items rows or the payment-instructions block across pages.
       The selector keys off the existing `payment-instructions` wrapper from
       views/payment-instructions.js, plus tables inside the invoice. */
    .invoice-printable table,
    .invoice-printable thead,
    .invoice-printable tr,
    .invoice-printable .payment-instructions { page-break-inside: avoid; break-inside: avoid; }
}