/* ─────────────────────────────────────────────────────────────────────
   File: wwwroot/css/site.css
   Purpose: Minimal application-wide overrides on top of Tailwind v4.
            Almost every visual rule lives in Tailwind classes — this
            file only holds the few things that can't be expressed in
            utility classes cleanly.
   Phase: 1 (Foundation)
   ─────────────────────────────────────────────────────────────────── */

/* Alpine.js `x-cloak` — keeps elements hidden until Alpine initialises
   so we don't get a flash of the wrong state on first paint. */
[x-cloak] {
    display: none !important;
}

/* Slightly nicer scrollbars on Windows/Chromium without being intrusive. */
* {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}
*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
*::-webkit-scrollbar-track {
    background: transparent;
}
*::-webkit-scrollbar-thumb {
    background-color: #cbd5e1;
    border-radius: 6px;
}
*::-webkit-scrollbar-thumb:hover {
    background-color: #94a3b8;
}

/* Focus-visible only — hide focus rings for mouse clicks but keep them
   for keyboard navigation. Tailwind's `focus:` modifier already applies
   on both, so we tighten it here. */
:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
}

/* Smooth font rendering on macOS / iOS */
html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Print: hide the chrome (sidebar, topbar, bottom nav) for clean prints. */
@media print {
    aside, header, nav, [data-no-print] {
        display: none !important;
    }
    main {
        margin: 0 !important;
        padding: 0 !important;
    }
}