/* iOS 27 Liquid Glass layer. Delete this line to go back to the previous look.
   Bump ?v= after editing ios27.css (CSS is cached for a year). */
@import url("ios27.css?v=1");

/*
 * Theme: single-hue blue accent + layout refinements.
 *
 * The project's precompiled Tailwind build (app.css) predates this palette and
 * contains no blue/* utilities, so this file supplies exactly the blue classes
 * the markup references (generated from the classes actually in use), plus the
 * layout refinements below. Loaded after app.css so it wins on conflicts.
 *
 * If app.css is ever rebuilt against the current markup, the colour block below
 * becomes redundant; keep the layout block.
 */

/* ── Palette: blue accent (slate neutrals come from app.css) ───────────── */
.bg-blue-100 { background-color: rgb(219 234 254); }
.bg-blue-50 { background-color: rgb(239 246 255); }
.bg-blue-600 { background-color: rgb(37 99 235); }
.bg-blue-900\/40 { background-color: rgb(30 58 138 / 0.40); }
.bg-blue-900\/50 { background-color: rgb(30 58 138 / 0.50); }
.border-blue-200 { border-color: rgb(191 219 254); }
:where(.dark,.dark *) .dark\:bg-blue-900\/20 { background-color: rgb(30 58 138 / 0.20); }
:where(.dark,.dark *) .dark\:bg-blue-900\/40 { background-color: rgb(30 58 138 / 0.40); }
:where(.dark,.dark *) .dark\:border-blue-800\/50 { border-color: rgb(30 64 175 / 0.50); }
:where(.dark,.dark *) .dark\:hover\:bg-blue-900\/20:hover { background-color: rgb(30 58 138 / 0.20); }
:where(.dark,.dark *) .dark\:hover\:bg-blue-900\/30:hover { background-color: rgb(30 58 138 / 0.30); }
:where(.dark,.dark *) .dark\:text-blue-300 { color: rgb(147 197 253); }
:where(.dark,.dark *) .dark\:text-blue-400 { color: rgb(96 165 250); }
:where(.dark,.dark *) .dark\:text-blue-500 { color: rgb(59 130 246); }
.focus\:ring-blue-500:focus { box-shadow: 0 0 0 2px rgb(59 130 246); }
.hover\:bg-blue-100:hover { background-color: rgb(219 234 254); }
.hover\:bg-blue-50:hover { background-color: rgb(239 246 255); }
.hover\:bg-blue-700:hover { background-color: rgb(29 78 216); }
.hover\:bg-blue-900\/60:hover { background-color: rgb(30 58 138 / 0.60); }
.hover\:border-blue-200:hover { border-color: rgb(191 219 254); }
.hover\:border-blue-300:hover { border-color: rgb(147 197 253); }
.hover\:border-blue-600:hover { border-color: rgb(37 99 235); }
.hover\:border-blue-700:hover { border-color: rgb(29 78 216); }
.hover\:text-blue-300:hover { color: rgb(147 197 253); }
.hover\:text-blue-400:hover { color: rgb(96 165 250); }
.hover\:text-blue-600:hover { color: rgb(37 99 235); }
.hover\:text-blue-800:hover { color: rgb(30 64 175); }
.hover\:text-blue-900:hover { color: rgb(30 58 138); }
.text-blue-300 { color: rgb(147 197 253); }
.text-blue-400 { color: rgb(96 165 250); }
.text-blue-500 { color: rgb(59 130 246); }
.text-blue-600 { color: rgb(37 99 235); }
.text-blue-700 { color: rgb(29 78 216); }
.text-blue-800 { color: rgb(30 64 175); }

/* Focus rings: reset the default outline so the blue ring reads cleanly. */
.focus\:ring-blue-500:focus { outline: 2px solid transparent; outline-offset: 2px; }

/* ── Layout refinements ────────────────────────────────────────────────── */

/* Pill buttons — softer, more modern controls. Icon-only buttons are square,
   so a full radius renders them as circles, which is the intended treatment. */
button,
input[type="submit"],
a.inline-flex,
a.bg-blue-600,
a.block.w-full,
.btn { border-radius: 9999px; }

/* Give the primary action a little lift so it reads as the main affordance. */
.bg-blue-600 { box-shadow: 0 1px 2px rgb(30 58 138 / 0.15); }
.bg-blue-600:hover { box-shadow: 0 2px 6px rgb(30 58 138 / 0.22); }

/* Wider content — use more of the screen on list/detail pages.
   (max-w-2xl is left alone: narrow forms stay readable.) */
main.max-w-4xl { max-width: 64rem; }
main.max-w-5xl { max-width: 72rem; }
main.max-w-7xl { max-width: 80rem; }

/* Softer cards — larger radius, gentle depth instead of a hard border look. */
main .rounded-xl,
main .rounded-2xl {
    border-radius: 1rem;
    box-shadow: 0 4px 14px -4px rgb(15 23 42 / 0.08), 0 2px 4px -2px rgb(15 23 42 / 0.04);
}
:where(.dark,.dark *) main .rounded-xl,
:where(.dark,.dark *) main .rounded-2xl {
    box-shadow: 0 4px 14px -4px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.25);
}

/* Keep small pill badges from inheriting the card radius/shadow. */
main .rounded-full { border-radius: 9999px; box-shadow: none; }

/* ── Utilities absent from the precompiled app.css ─────────────────────────
   These classes are referenced by the markup but were never emitted by the
   Tailwind build, so they rendered as no-ops (collapsed gaps, dead hover
   states on the dashboard app cards). Supplied here with stock values. */
.gap-x-3 { column-gap: 0.75rem; }
.gap-y-2 { row-gap: 0.5rem; }

.group:hover .group-hover\:bg-blue-100 { background-color: rgb(219 234 254); }
.group:hover .group-hover\:text-blue-600 { color: rgb(37 99 235); }
:where(.dark,.dark *) .group:hover .dark\:group-hover\:bg-blue-900\/60 { background-color: rgb(30 58 138 / 0.6); }
:where(.dark,.dark *) .group:hover .dark\:group-hover\:text-blue-400 { color: rgb(96 165 250); }

:where(.dark,.dark *) .dark\:hover\:border-blue-600:hover { border-color: rgb(37 99 235); }
:where(.dark,.dark *) .dark\:hover\:border-blue-700:hover { border-color: rgb(29 78 216); }
:where(.dark,.dark *) .dark\:hover\:text-blue-300:hover { color: rgb(147 197 253); }