@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    body {
        /* 'font-sans' is already on the body tag in layout.html via Tailwind config.
           If a specific base text color is desired globally, it can be set here.
           Example: @apply text-gray-800;
           However, components will often define their own text colors.
        */
    }

    h1 {
        @apply text-3xl font-semibold text-gray-900 mb-4; /* Corresponds to 30px from spec (text-3xl is 30px) */
    }
    h2 {
        @apply text-2xl font-semibold text-gray-900 mb-4; /* Corresponds to 24px from spec (text-2xl is 24px) */
    }
    h3 {
        @apply text-xl font-semibold text-gray-900 mb-3; /* Corresponds to 20px from spec (text-xl is 20px) */
    }
    h4 {
        @apply text-lg font-semibold text-gray-900 mb-3; /* Corresponds to 18px from spec (text-lg is 18px) */
    }
    h5 {
        @apply text-base font-semibold text-gray-900 mb-2; /* Corresponds to 16px from spec (text-base is 16px) */
    }
    h6 {
        @apply text-sm font-semibold text-gray-900 mb-2; /* Corresponds to 14px from spec (text-sm is 14px) */
    }

    p {
        @apply mb-4 text-base text-gray-700 leading-relaxed; /* Default paragraph: 16px, Inter regular */
    }

    ul {
        @apply list-disc list-inside mb-4 pl-4 text-gray-700;
    }
    ol {
        @apply list-decimal list-inside mb-4 pl-4 text-gray-700;
    }
    li {
        @apply mb-1; /* Space between list items */
    }

    /* Class for code/data text using JetBrains Mono */
    .font-code {
        @apply font-mono text-sm; /* font-mono is configured to JetBrains Mono */
    }

    /* Basic link styling */
    a {
        @apply text-primary-600 hover:text-primary-700 transition-colors duration-150;
        /* Default browser underline is often preferred for accessibility.
           To remove it and add on hover:
           @apply no-underline hover:underline;
        */
        /*
        Consider global focus styles for accessibility if not handled by components:
        @apply focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2;
        However, many components (buttons, inputs) will define their own focus rings.
        Applying it globally to all `<a>` might be too much, especially for nav links
        that might have different focus treatments.
        */
    }
}

/* Print-specific styles for Proforma Builder Preview */
@media print {
    body.printing-preview {
        -webkit-print-color-adjust: exact !important; /* Chrome, Safari */
        color-adjust: exact !important; /* Firefox, Edge */
    }

    body.printing-preview > header,
    body.printing-preview > nav,
    body.printing-preview > main > div:not(.container), /* Hide elements outside the main proforma builder container */
    body.printing-preview > footer,
    body.printing-preview .fixed.bottom-0, /* Status bar */
    body.printing-preview .lg\:hidden.fixed.inset-0, /* Mobile preview modal */
    body.printing-preview [x-data*="proformaBuilder"] > .container > .mb-6, /* Step Navigation */
    body.printing-preview [x-data*="proformaBuilder"] > .container > .grid > div:first-child, /* Form Section */
    body.printing-preview [x-data*="proformaBuilder"] > .container > .grid > div:last-child > div:not(.border.rounded-lg.shadow-sm.bg-white), /* Hide style selector, etc. within preview column */
    body.printing-preview #proformaPreviewContentArea ~ * /* Hide siblings of preview content if any were accidentally included */
     {
        display: none !important;
    }

    body.printing-preview #proformaPreviewContentArea {
        display: block !important;
        position: static !important; /* Reset sticky positioning */
        width: 100% !important;
        height: auto !important;
        overflow: visible !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
        background-color: white !important;
    }

    /* Make the main container and relevant parents full width */
    body.printing-preview [x-data*="proformaBuilder"] > .container,
    body.printing-preview [x-data*="proformaBuilder"] > .container > .grid,
    body.printing-preview [x-data*="proformaBuilder"] > .container > .grid > div:last-child {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }


    /* Ensure the content within the preview scales and fits well */
    /* The preview HTML is generated with inline styles, so direct overrides might be needed if those are too restrictive */
    body.printing-preview #proformaPreviewContentArea > div {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important; /* Center content if it's narrower */
        padding: 1cm !important; /* Standard A4 margins, adjust if needed */
        border: none !important;
        box-shadow: none !important;
        font-size: 10pt !important;
        background: white !important;
        color: black !important;
    }

    /* Ensure tables take full width and borders are visible */
    body.printing-preview #proformaPreviewContentArea table {
        width: 100% !important;
        border-collapse: collapse !important;
    }
    body.printing-preview #proformaPreviewContentArea th,
    body.printing-preview #proformaPreviewContentArea td {
        border: 1px solid #ccc !important; /* Use a light gray for print */
        padding: 4px 8px !important;
        color: black !important; /* Ensure text is black */
        background-color: transparent !important; /* Remove background colors from table cells */
    }
    body.printing-preview #proformaPreviewContentArea th {
        background-color: #f0f0f0 !important; /* Light gray for table headers if desired */
    }

    /* Attempt to force page breaks before/after elements if needed, e.g., for multi-page previews */
    /* .page-break-before { page-break-before: always; } */
    /* .page-break-after { page-break-after: always; } */
}