/*
 * Small hand-written overrides that don't fit Tailwind utility classes.
 * There is no build step (no Node.js) - this file is served as-is, and
 * Tailwind/Alpine are loaded from CDN in resources/views/layouts/*.blade.php.
 */

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

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

::-webkit-scrollbar-thumb {
    background-color: rgb(203 213 225);
    border-radius: 9999px;
}

/*
 * Print-friendly stylesheet: PDF templates (invoices/prescriptions/reports)
 * are rendered by dompdf from their own standalone Blade views and never hit
 * this file. This block only covers printing an in-app page directly
 * (Ctrl+P) - it hides the app chrome so a manual browser print isn't
 * dominated by the sidebar/topbar.
 */
@media print {
    .no-print,
    aside,
    header {
        display: none !important;
    }

    main {
        padding: 0 !important;
    }

    body {
        background: #fff !important;
    }
}

/*
 * Native <input type="date"> draws its own closed-state text using the
 * DEVICE/browser locale - on many phones that defaults to MM-DD-YYYY and
 * there is no HTML/CSS attribute to force a different order on the native
 * control itself. On mobile only, the native text is hidden and a
 * JS-synced DD-MM-YYYY label (see public/js/date-format.js) is drawn on
 * top of it instead; the input element - and its native tap-to-open
 * calendar - is left completely alone. Desktop is untouched since this
 * was only reported as a mobile issue.
 */
.date-display-overlay {
    display: none;
}

@media (max-width: 767px) {
    input[type="date"] {
        color: transparent !important;
    }

    div:has(> input[type="date"]) {
        position: relative;
    }

    .date-display-overlay {
        display: flex;
        align-items: center;
        position: absolute;
        pointer-events: none;
        white-space: nowrap;
        overflow: hidden;
        color: #0f172a;
    }

    .dark .date-display-overlay {
        color: #f1f5f9;
    }

    .date-display-overlay--placeholder {
        color: #94a3b8;
    }
}

/*
 * UI redesign, Section 4 baseline: <x-data-table> (resources/views/
 * components/data-table.blade.php) is the single most-repeated pattern in
 * the app (~40+ list pages) and previously only ever horizontally
 * scrolled on mobile. Below the breakpoint this collapses each row into a
 * stacked "card" instead - no columns/actions are hidden or removed, only
 * re-laid-out - using the classic CSS-only responsive-table technique:
 * public/js/data-table.js stamps each <td> with data-label="<column
 * label>" (already available from the same `columns` prop every page
 * already passes in), and this pseudo-element prints it as a left-hand
 * label once the real <thead> is hidden. Applies only to tables carrying
 * the .dt-mobile-cards class (added once, in data-table.blade.php itself)
 * - nothing else on the page is affected.
 *
 * Breakpoint is 1023px (Tailwind's lg-1), not 767px: the sidebar/topbar
 * switch to their mobile (hamburger) layout at `lg:` (1024px) - a table
 * with enough columns (e.g. Patients' 8) genuinely doesn't fit the
 * narrowed content area between 768-1023px if it stayed in desktop-table
 * form there, causing real horizontal page overflow. Matching the same
 * breakpoint as the nav removes that gap for every table using this class,
 * not just the ones with many columns.
 */
@media (max-width: 1023px) {
    .dt-mobile-cards thead {
        display: none;
    }

    .dt-mobile-cards,
    .dt-mobile-cards tbody,
    .dt-mobile-cards tr {
        display: block;
        width: 100%;
    }

    .dt-mobile-cards tbody tr {
        margin-bottom: 0.75rem;
        border-radius: 0.75rem;
        border: 1px solid #f1f5f9;
        overflow: hidden;
    }

    .dark .dt-mobile-cards tbody tr {
        border-color: #334155;
    }

    .dt-mobile-cards tbody tr:last-child {
        margin-bottom: 0;
    }

    .dt-mobile-cards td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        text-align: right;
        border-bottom: 1px solid #f8fafc !important;
    }

    .dark .dt-mobile-cards td {
        border-bottom-color: #1e293b !important;
    }

    .dt-mobile-cards td:last-child {
        border-bottom: none !important;
    }

    .dt-mobile-cards td[data-label]:not([data-label=""])::before {
        content: attr(data-label);
        flex-shrink: 0;
        text-align: left;
        font-size: 0.6875rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: #94a3b8;
    }

    /* The checkbox/actions columns keep an empty label - shown edge-to-edge
       instead of as a labeled row, since a blank label line would just be
       visual noise. */
    .dt-mobile-cards td[data-label=""] {
        justify-content: flex-end;
    }
}