/* Box-sizing reset — all other styles handled by Tailwind CSS */
*, *::before, *::after { box-sizing: border-box; }

/* Fonts: the Vem family fonts, self-hosted (static/vendor/vem-design/dist/fonts.css). */

/* ──────────────────────────────────────────────────────────────────────────
   Vemhere global polish layer
   Styles the shared primitives every template renders through — especially the
   bare Django-widget form controls (`{{ form.field }}`) that carry no Tailwind
   classes — so the whole app reads premium with zero per-template edits.
   Loaded AFTER tailwind.css, so any control that DOES have utility classes
   keeps its own look (a class selector beats these element selectors).
   ────────────────────────────────────────────────────────────────────────── */

/* Crisper, more even text rendering app-wide */
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }

/* Instrument Sans has a narrow space (0.2em); small links ran words together. */
body { word-spacing: var(--vem-word-spacing, 0.06em); }

/* Brand-tinted text selection */
::selection { background: rgba(13, 181, 157, 0.22); }

/* ── Bare form controls — text-like inputs, selects, textareas ──────────────
   Excludes checkboxes / radios / buttons / file / range / color (left native). */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="image"]):not([type="reset"]):not([type="range"]):not([type="color"]),
select,
textarea {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;                 /* slate-200 */
    border-radius: 12px;
    padding: 0.55rem 0.8rem;
    color: #14110F;                            /* ink */
    line-height: 1.45;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
textarea { line-height: 1.6; }

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="image"]):not([type="reset"]):not([type="range"]):not([type="color"]):focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: #0DB59D;                     /* brand 500 */
    box-shadow: 0 0 0 3px rgba(15, 181, 192, 0.18);
}

::placeholder { color: #94a3b8; opacity: 1; }  /* slate-400 */

/* Dark-mode surfaces for the same bare controls */
html.dark input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="image"]):not([type="reset"]):not([type="range"]):not([type="color"]),
html.dark select,
html.dark textarea {
    background-color: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.12);
    color: #f1f5f9;
}
html.dark input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="image"]):not([type="reset"]):not([type="range"]):not([type="color"]):focus,
html.dark select:focus,
html.dark textarea:focus {
    border-color: #45C4B2;
    box-shadow: 0 0 0 3px rgba(31, 192, 203, 0.22);
}
html.dark ::placeholder { color: #64748b; }    /* slate-500 */

/* Messages (templates/components/flash.html) stack with a gap. */
.vem-flash-list { display: grid; gap: 8px; margin-bottom: 16px; }

/* Danger text inside a vem-menu (the activity page's Delete). */
.vem-danger-text { color: var(--vem-danger); }

/* Contrast (PLAN-VERTICALS D6, measured with axe): Tailwind's slate-400/500
   and emerald-600 fail WCAG AA as small text on white and on the bone ground,
   and no single grey passes on both light and dark surfaces. Each theme takes
   the family's muted / success colour instead (vem-design, all AA). */
html:not(.dark) .text-slate-400, html:not(.dark) .text-slate-500 { color: var(--vem-muted); }
html.dark .text-slate-500, html.dark .dark\:text-slate-500 { color: var(--vem-muted); }
html:not(.dark) .text-emerald-600 { color: var(--vem-success); }
/* The brand teal (600) is 4.0:1 under small text on white; light text uses
   the family primary (teal-700, 5.8:1) - the same rule vem-design gates on. */
html:not(.dark) .text-ocean-600, html:not(.dark) .text-brand-600 { color: var(--vem-primary); }

/* Print (PLAN-VERTICALS D6): the page's content only - no sidebar, header,
   breadcrumbs, footer, menus or buttons; tables print whole. */
@media print {
  .vh-header, .vh-sidebar, .vh-crumbbar, .vh-scrim, footer, .vem-skip,
  .vem-menu, .vem-tabs, button, [data-host-tools], [data-checkin-tools] { display: none !important; }
  .vh-main, .vh-content, main { margin: 0 !important; padding: 0 !important; width: auto !important; }
  body { background: #fff !important; color: #000 !important; }
  .overflow-x-auto, .vem-table-wrap { overflow: visible !important; }
  a { color: inherit !important; text-decoration: none !important; }
}

/* Icon ink: an svg draws in currentColor and takes a role colour from one of these,
   because an svg's stroke/fill attribute cannot read a CSS variable. */
.vem-ink-primary    { color: var(--vem-primary); }
.vem-ink-on-primary { color: var(--vem-on-primary); }
.vem-ink-success    { color: var(--vem-success); }
.vem-ink-danger     { color: var(--vem-danger); }
.vem-ink-warning    { color: var(--vem-warning); }
.vem-ink-muted      { color: var(--vem-muted); }
.vem-ink-text-2     { color: var(--vem-text-2); }
.vem-ink-text       { color: var(--vem-text); }

/* Text and icons on a primary fill (.bg-brand-gradient is the primary variable; see
   tailwind.config.js). The primary is light teal on the dark theme and may be an
   institution's colour, so "white on it" is on-primary, never a literal white. */
.bg-brand-gradient.text-white,
.bg-brand-gradient [class*="text-white"],
.bg-brand-gradient[class*="text-white"] { color: var(--vem-on-primary); }
.bg-brand-gradient svg[stroke="#fff"], .bg-brand-gradient svg[stroke="white"],
.bg-brand-gradient[stroke="#fff"] { stroke: var(--vem-on-primary); }
.bg-brand-gradient svg [fill="#fff"], .bg-brand-gradient svg[fill="#fff"] { fill: var(--vem-on-primary); }