/* ============================================================
 * WMAPP custom theme, extends Tailwind utility classes.
 * Tailwind handles 95% of styling; this file is for things
 * Tailwind can't express ergonomically (safe-area insets,
 * native form-control resets, native tap highlights).
 * ============================================================ */

:root {
    --wm-safe-top:    env(safe-area-inset-top, 0px);
    --wm-safe-bottom: env(safe-area-inset-bottom, 0px);

    --wm-ink-rgb:         28 28 30;
    --wm-ink-soft-rgb:    58 58 60;
    --wm-ink-muted-rgb:   142 142 147;
    --wm-surface-rgb:     255 255 255;
    --wm-surface-alt-rgb: 245 246 248;
    --wm-rule-color:      rgb(0 0 0 / 0.10);
    --wm-rule-soft:       rgb(0 0 0 / 0.05);
    --wm-card-shadow:     0 1px 3px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.04);
    --wm-sheet-shadow:    0 -8px 24px rgba(0,0,0,0.10);
    color-scheme:         light;
}

:root.dark {
    --wm-ink-rgb:         245 245 247;
    --wm-ink-soft-rgb:    199 199 204;
    --wm-ink-muted-rgb:   142 142 147;
    --wm-surface-rgb:     28 28 30;
    --wm-surface-alt-rgb: 10 10 12;
    --wm-rule-color:      rgb(255 255 255 / 0.12);
    --wm-rule-soft:       rgb(255 255 255 / 0.06);
    --wm-card-shadow:     0 1px 3px rgba(0,0,0,0.45), 0 6px 16px rgba(0,0,0,0.35);
    --wm-sheet-shadow:    0 -8px 24px rgba(0,0,0,0.55);
    color-scheme:         dark;
}

/* Dark-mode utility overrides: flip baked-in light atoms centrally. */
.dark .bg-white          { background-color: rgb(var(--wm-surface-rgb)); }
.dark .bg-white\/85      { background-color: rgb(var(--wm-surface-rgb) / 0.85); }
.dark .bg-white\/70      { background-color: rgb(var(--wm-surface-rgb) / 0.70); }
.dark .bg-white\/15      { background-color: rgb(var(--wm-surface-rgb) / 0.15); }
.dark .bg-white\/10      { background-color: rgb(var(--wm-surface-rgb) / 0.10); }

.dark .border-black\/5   { border-color: var(--wm-rule-soft); }
.dark .border-black\/10  { border-color: var(--wm-rule-color); }
.dark .border-black\/15  { border-color: rgb(255 255 255 / 0.15); }
.dark .border-black\/20  { border-color: rgb(255 255 255 / 0.20); }

.dark .divide-black\/5   > :not([hidden]) ~ :not([hidden]) { border-color: var(--wm-rule-soft); }
.dark .divide-black\/10  > :not([hidden]) ~ :not([hidden]) { border-color: var(--wm-rule-color); }

.dark .bg-black\/5       { background-color: rgb(255 255 255 / 0.06); }

.dark .ring-black\/5     { --tw-ring-color: var(--wm-rule-soft); }
.dark .ring-black\/10    { --tw-ring-color: var(--wm-rule-color); }
.dark .ring-white        { --tw-ring-color: rgb(var(--wm-surface-rgb)); }

.dark .to-white {
    --tw-gradient-to: rgb(var(--wm-surface-rgb)) var(--tw-gradient-to-position);
}
.dark .via-white {
    --tw-gradient-via: rgb(var(--wm-surface-rgb)) var(--tw-gradient-via-position);
}
.dark .from-white {
    --tw-gradient-from: rgb(var(--wm-surface-rgb)) var(--tw-gradient-from-position);
}

.dark input:not([type="checkbox"]):not([type="radio"]),
.dark select,
.dark textarea {
    background-color: rgb(var(--wm-surface-alt-rgb));
    border-color: var(--wm-rule-color);
    color: rgb(var(--wm-ink-rgb));
}

.wm-invalid {
    border-color: rgb(248 113 113) !important;
}
.wm-invalid:focus {
    border-color: rgb(239 68 68) !important;
    --tw-ring-color: rgb(239 68 68 / 0.5) !important;
}
.dark input::placeholder,
.dark textarea::placeholder { color: rgb(var(--wm-ink-muted-rgb)); }

/* Status bar / scroll-area system color in dark */
.dark body { background-color: rgb(var(--wm-surface-alt-rgb)); }

/* primary-soft: bright tint in light, more present tint of primary in dark */
.dark .bg-primary-soft       { background-color: rgb(var(--wm-primary-rgb) / 0.24); }
.dark .bg-primary-soft\/40   { background-color: rgb(var(--wm-primary-rgb) / 0.12); }
.dark .active\:bg-primary-soft:active { background-color: rgb(var(--wm-primary-rgb) / 0.30); }

.avatar-fallback {
    background-color: rgb(var(--wm-primary-soft-rgb));
    color: rgb(var(--wm-primary-rgb));
}
.dark .avatar-fallback {
    background-color: rgb(var(--wm-primary-rgb));
    color: rgb(255 255 255);
}

/* Light status tints (red/amber/emerald/green/sky 50/100/200 + /N modifiers).
   Two tiers: card bg ~22% so card reads on dark surface; tile icon bg ~38% so the
   little square stays visible against the card. */
.dark .bg-red-50         { background-color: rgb(239 68 68 / 0.20); }
.dark .bg-red-50\/30     { background-color: rgb(239 68 68 / 0.10); }
.dark .bg-red-50\/40     { background-color: rgb(239 68 68 / 0.12); }
.dark .bg-red-50\/60     { background-color: rgb(239 68 68 / 0.16); }
.dark .bg-red-100        { background-color: rgb(239 68 68 / 0.38); }
.dark .bg-amber-50       { background-color: rgb(245 158 11 / 0.20); }
.dark .bg-amber-50\/60   { background-color: rgb(245 158 11 / 0.16); }
.dark .bg-amber-100      { background-color: rgb(245 158 11 / 0.38); }
.dark .bg-amber-200      { background-color: rgb(245 158 11 / 0.50); }
.dark .active\:bg-amber-200:active { background-color: rgb(245 158 11 / 0.55); }
.dark .bg-emerald-50     { background-color: rgb(16 185 129 / 0.20); }
.dark .bg-emerald-50\/50 { background-color: rgb(16 185 129 / 0.12); }
.dark .bg-emerald-100    { background-color: rgb(16 185 129 / 0.38); }
.dark .bg-green-50       { background-color: rgb(34 197 94 / 0.20); }
.dark .bg-sky-100        { background-color: rgb(14 165 233 / 0.38); }

/* Lift text colors so they read on the darker tints + on dark surface.
   Includes the /80 alpha variants used by StatCallout subtitles. */
.dark .text-red-600          { color: rgb(252 165 165); }
.dark .text-red-700          { color: rgb(252 165 165); }
.dark .text-red-800          { color: rgb(254 202 202); }
.dark .text-red-900          { color: rgb(254 226 226); }
.dark .text-red-100          { color: rgb(254 226 226); }
.dark .text-red-800\/80      { color: rgb(254 202 202 / 0.85); }
.dark .text-red-800\/90      { color: rgb(254 202 202 / 0.95); }
.dark .text-amber-700        { color: rgb(253 224 71); }
.dark .text-amber-800        { color: rgb(253 224 71); }
.dark .text-amber-900        { color: rgb(254 240 138); }
.dark .text-amber-800\/80    { color: rgb(254 240 138 / 0.88); }
.dark .text-emerald-600      { color: rgb(110 231 183); }
.dark .text-emerald-700      { color: rgb(110 231 183); }
.dark .text-emerald-800      { color: rgb(167 243 208); }
.dark .text-emerald-900      { color: rgb(167 243 208); }
.dark .text-emerald-800\/80  { color: rgb(167 243 208 / 0.88); }
.dark .text-green-600        { color: rgb(134 239 172); }
.dark .text-green-700        { color: rgb(134 239 172); }
.dark .text-sky-800          { color: rgb(125 211 252); }

/* Status borders + rings: soften (alpha-on-color so they stay visible on dark) */
.dark .border-red-100    { border-color: rgb(239 68 68 / 0.30); }
.dark .border-red-200    { border-color: rgb(239 68 68 / 0.40); }
.dark .border-red-300    { border-color: rgb(239 68 68 / 0.50); }
.dark .border-red-400    { border-color: rgb(239 68 68 / 0.55); }
.dark .border-red-500    { border-color: rgb(239 68 68 / 0.60); }
.dark .border-amber-200  { border-color: rgb(245 158 11 / 0.40); }
.dark .border-emerald-300{ border-color: rgb(16 185 129 / 0.50); }
.dark .ring-red-200      { --tw-ring-color: rgb(239 68 68 / 0.35); }
.dark .ring-red-400      { --tw-ring-color: rgb(239 68 68 / 0.55); }
.dark .ring-red-500      { --tw-ring-color: rgb(239 68 68 / 0.60); }
.dark .ring-amber-200    { --tw-ring-color: rgb(245 158 11 / 0.35); }
.dark .ring-amber-300    { --tw-ring-color: rgb(245 158 11 / 0.45); }
.dark .ring-amber-400    { --tw-ring-color: rgb(245 158 11 / 0.55); }
.dark .ring-emerald-200  { --tw-ring-color: rgb(16 185 129 / 0.40); }

/* Google Maps InfoWindow uses its own DOM, force it onto our surface */
.dark .gm-style-iw,
.dark .gm-style-iw-d,
.dark .gm-style-iw-c {
    background-color: rgb(var(--wm-surface-rgb)) !important;
    color: rgb(var(--wm-ink-rgb)) !important;
}
.dark .gm-style-iw-tc::after {
    background: rgb(var(--wm-surface-rgb)) !important;
}
.dark .gm-ui-hover-effect > span {
    background-color: rgb(var(--wm-ink-muted-rgb)) !important;
}

html, body, #app {
    height: 100%;
    overflow: hidden;
    overscroll-behavior-y: none;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    font: -apple-system-body;
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

body {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}

/* Native form-control polish */
input, textarea, select, button {
    font-family: inherit;
    color: inherit;
}
input:focus, textarea:focus, select:focus, button:focus {
    outline: none;
}

/* Sub-12px sizes: Tailwind's smallest token is text-xs (12px); these fill the gap. */
.text-mini  { font-size: 0.6875rem; line-height: 1rem;   }
.text-micro { font-size: 0.625rem;  line-height: 0.9rem; }

/* iOS safe-area helpers */
.safe-top    { padding-top:    var(--wm-safe-top); }
.safe-bottom { padding-bottom: var(--wm-safe-bottom); }

.route-enter-active, .route-leave-active {
    transition: opacity 0.18s ease, transform 0.18s ease;
}
.route-enter-from { opacity: 0; transform: translateY(6px); }
.route-leave-to   { opacity: 0; transform: translateY(-6px); }

.news-article-enter-active { transition: opacity 0.18s ease, transform 0.22s cubic-bezier(0.2, 0.9, 0.3, 1); }
.news-article-leave-active { transition: opacity 0.14s ease, transform 0.18s cubic-bezier(0.4, 0, 0.6, 1); }
.news-article-enter-from   { opacity: 0; transform: translateX(24px); }
.news-article-leave-to     { opacity: 0; transform: translateX(24px); }

/* ============================================================
 * News article body (rendered via v-html, Tailwind classes can't
 * reach inside, so style server-emitted HTML here.)
 * ============================================================ */
.news-body { line-height: 1.55; }
.news-body p           { margin: 0 0 0.75em; }
.news-body p:last-child{ margin-bottom: 0; }

.werkbon-preview { line-height: 1.7; color: #1c1c1e; }
.werkbon-preview p { margin: 0 0 0.85em; }
.werkbon-preview p:empty { margin: 0.4em 0; }
.werkbon-preview u b, .werkbon-preview b u { display: inline-block; margin-top: 0.4em; }
.werkbon-preview p:first-child { margin-top: 0; }
.werkbon-preview p:last-child  { margin-bottom: 0; }
.news-body h1, .news-body h2, .news-body h3, .news-body h4 {
    font-weight: 600;
    color: rgb(var(--wm-ink-rgb));
    margin: 1em 0 0.4em;
    line-height: 1.3;
}
.news-body h1 { font-size: 1.15em; }
.news-body h2 { font-size: 1.05em; }
.news-body h3, .news-body h4 { font-size: 1em; }
.news-body ul, .news-body ol { padding-left: 1.4em; margin: 0 0 0.75em; }
.news-body li { margin: 0.25em 0; }
.news-body strong, .news-body b { font-weight: 600; }
.news-body img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 0.5em 0;
}
.news-body a {
    color: rgb(var(--wm-primary-rgb));
    text-decoration: underline;
    text-decoration-color: rgb(var(--wm-primary-rgb) / 0.45);
    text-underline-offset: 2px;
    word-break: break-word;
}
.news-body a:hover  { text-decoration-color: rgb(var(--wm-primary-rgb)); }
.news-body a:active { opacity: 0.7; }
.news-body hr {
    border: 0;
    border-top: 1px solid var(--wm-rule-color);
    margin: 1em 0;
}
.news-body blockquote {
    margin: 0.5em 0;
    padding: 0.4em 0.9em;
    border-left: 3px solid rgb(var(--wm-primary-rgb));
    background: rgb(var(--wm-primary-rgb) / 0.05);
    color: rgb(var(--wm-ink-soft-rgb));
    border-radius: 4px;
}
.news-body table {
    width: 100%;
    border-collapse: collapse;
    font-size: 1em;
    margin: 0.25em 0 0.75em;
}
.news-body thead td, .news-body th {
    text-align: left;
    font-weight: 600;
    border-bottom: 1px solid var(--wm-rule-color);
    padding: 0.6em 0.6em;
}
.news-body tbody td {
    padding: 0.25em 0.5em;
    vertical-align: top;
}
.news-body table:not(:has(thead)) td:first-child {
    width: auto !important;
    padding-left: 0;
    color: rgb(var(--wm-ink-soft-rgb));
}
.news-body table:not(:has(thead)) td + td {
    text-align: right;
    padding-right: 0;
}
.news-body tbody tr.even { background: var(--wm-rule-soft); }
.news-body tbody tr:last-child td { border-bottom: 0; }
.news-body .totaal { margin: 0.4em 0 0; font-weight: 600; }
.news-body #printdatum { display: none; }

/* dark mode: override hardcoded-black inline colors from CMS paste */
.dark .news-body [style*="windowtext"],
.dark .news-body [style*="color:#000000"],
.dark .news-body [style*="color: #000000"],
.dark .news-body [style*="color:black"],
.dark .news-body [style*="color: black"],
.dark .news-body [style*="color:rgb(0,0,0)"],
.dark .news-body [style*="color: rgb(0, 0, 0)"],
.dark .news-body font[color="#000000"],
.dark .news-body font[color="black"] {
    color: rgb(var(--wm-ink-soft-rgb)) !important;
}

* {
    scrollbar-width: none;
    -ms-overflow-style: none;
}
*::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}