.wizard-step { transition: all 0.3s ease; }
.form-card { @apply bg-white rounded-lg shadow-sm border p-6 mb-6; }
.flash-message { animation: fadeIn 0.3s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

/* Print styles */
@media print {
    header, footer, .flash-message { display: none !important; }
    body { background: white !important; }
    main { max-width: 100% !important; padding: 0 !important; margin: 0 !important; }
    .print-clean { box-shadow: none !important; border: none !important; border-radius: 0 !important; }
}

/* ---------------------------------------------------------------- dark mode
 *
 * The public side is 41 views built from a handful of light-mode utilities and
 * no `dark:` variants. Rather than edit every file, the theme is a remap of the
 * utilities those views actually use, applied when <html> carries `.dark`.
 *
 * `html.dark .x` outranks a bare `.x`, so these win wherever they apply. A view
 * that does declare its own `dark:` variant is not broken by this — the remap
 * simply supplies its shade instead.
 *
 * Palette matches the admin side (navy 900-400 in layouts/public.php).
 */
html.dark body { background-color: #10121a; }

/* surfaces */
html.dark .bg-white { background-color: #181b2e; }
html.dark .bg-gray-50 { background-color: #10121a; }
html.dark .bg-gray-100 { background-color: #1e2238; }
html.dark .bg-gray-200 { background-color: #252a42; }
html.dark .hover\:bg-gray-50:hover { background-color: #1e2238; }
html.dark .hover\:bg-gray-100:hover { background-color: #252a42; }

/* text */
html.dark .text-gray-900,
html.dark .text-gray-800 { color: #f3f4f6; }
html.dark .text-gray-700 { color: #e5e7eb; }
html.dark .text-gray-600 { color: #d1d5db; }
html.dark .text-gray-500 { color: #9ca3af; }
html.dark .text-gray-400 { color: #6b7280; }
html.dark .text-gray-300 { color: #4b5563; }

/* borders — every weight collapses to one, so cards keep a visible edge */
html.dark .border,
html.dark .border-b,
html.dark .border-t,
html.dark .border-l,
html.dark .border-r,
html.dark .border-gray-100,
html.dark .border-gray-200,
html.dark .border-gray-300 { border-color: #2a2f48; }
html.dark .divide-y > :not([hidden]) ~ :not([hidden]) { border-color: #2a2f48; }

/* form controls */
html.dark input,
html.dark select,
html.dark textarea {
    background-color: #1e2238;
    border-color: #2a2f48;
    color: #e5e7eb;
}
html.dark input::placeholder,
html.dark textarea::placeholder { color: #6b7280; }

/* tinted panels: keep the hue, drop the brightness so text stays readable */
html.dark .bg-blue-50 { background-color: #1c2740; }
html.dark .bg-blue-100 { background-color: #22304e; }
html.dark .bg-amber-50 { background-color: #33270f; }
html.dark .bg-green-50 { background-color: #122a1c; }
html.dark .bg-green-100 { background-color: #17351f; }
html.dark .bg-red-50 { background-color: #331519; }
html.dark .bg-purple-50 { background-color: #241d3a; }
html.dark .bg-yellow-50 { background-color: #332b0f; }
html.dark .hover\:bg-blue-50:hover { background-color: #22304e; }

/* tinted text on those panels */
html.dark .text-blue-800 { color: #93c5fd; }
html.dark .text-amber-800,
html.dark .text-amber-700 { color: #fcd34d; }
html.dark .text-green-800 { color: #86efac; }
html.dark .text-red-800 { color: #fca5a5; }
html.dark .text-blue-600 { color: #60a5fa; }

/* borders on tinted panels */
html.dark .border-amber-200 { border-color: #5c4813; }
html.dark .border-blue-200 { border-color: #2c4270; }
html.dark .border-green-200 { border-color: #1f5133; }
html.dark .border-red-200 { border-color: #6b2229; }

/* Buttons and badges keep their own solid colours — bg-blue-600, bg-green-600
 * and the status pills are readable as-is and are deliberately left alone. */

/* ──────────────────────────────────────────────────────────────────────────
   Rich text produced by the Quill editors
   ──────────────────────────────────────────────────────────────────────────
   Status letters, notification bodies and a form's terms & conditions are all
   written in Quill and rendered back here. Quill's own stylesheet is only
   loaded on the pages that *edit* — pulling it into every public page for the
   sake of a bulleted list is not worth the request — and Tailwind's preflight
   strips list markers and heading sizes, so the output needs these rules or a
   numbered clause renders as an unnumbered paragraph.

   Kept to what the toolbar can actually emit.
   ────────────────────────────────────────────────────────────────────────── */
.rich-content > :first-child { margin-top: 0; }
.rich-content > :last-child { margin-bottom: 0; }
.rich-content p { margin: 0 0 0.75em; }
.rich-content h1 { font-size: 1.5em; font-weight: 700; margin: 1em 0 0.5em; }
.rich-content h2 { font-size: 1.25em; font-weight: 700; margin: 1em 0 0.5em; }
.rich-content h3 { font-size: 1.1em; font-weight: 600; margin: 1em 0 0.5em; }
.rich-content strong { font-weight: 700; }
.rich-content em { font-style: italic; }
.rich-content u { text-decoration: underline; }
.rich-content s { text-decoration: line-through; }
.rich-content ol { list-style: decimal; padding-left: 1.5em; margin: 0 0 0.75em; }
.rich-content ul { list-style: disc; padding-left: 1.5em; margin: 0 0 0.75em; }
.rich-content li { margin: 0.25em 0; }
.rich-content blockquote {
    border-left: 3px solid #d1d5db;
    padding-left: 0.875em;
    margin: 0 0 0.75em;
    color: #4b5563;
}
.rich-content a { color: #2563eb; text-decoration: underline; }
.rich-content img { max-width: 100%; height: auto; }

/* Quill writes alignment and indentation as classes, not inline styles. */
.rich-content .ql-align-center { text-align: center; }
.rich-content .ql-align-right { text-align: right; }
.rich-content .ql-align-justify { text-align: justify; }
.rich-content .ql-indent-1 { padding-left: 3em; }
.rich-content .ql-indent-2 { padding-left: 6em; }
.rich-content .ql-indent-3 { padding-left: 9em; }
.rich-content .ql-indent-4 { padding-left: 12em; }

/* The age an identity number gives, measured against the range the institution
   accepts — green inside it, red outside. Written here rather than as utility
   classes because the read-back line is built by script after the page has
   loaded, and styling it must not depend on anything re-scanning the DOM.
   Colours match the palette the rest of the page uses. */
.age-in-range { color: #16a34a; font-weight: 600; }
.age-out-of-range { color: #dc2626; font-weight: 600; }

/*
 * A box that says whether what is in it will be accepted.
 *
 * Only on the identity number, and only where the institution takes the MyKad
 * alone — a green border is a promise that something was checked, and a
 * passport has no shape to check it against.
 *
 * Colour is not the only signal: the same answer is written out in words under
 * the box, because a border is invisible to anyone who cannot distinguish the
 * two colours, and the words are what say *what* is wrong.
 */
.field-valid { border-color: #16a34a !important; }
.field-invalid { border-color: #dc2626 !important; }

/* The searchable dropdown's styling moved to assets/css/searchable.css, which
 * the admin layout loads too — it does not load this file. */