/* Custom styles to complement Tailwind CSS */
@layer utilities {
    .glass-card {
        background: rgba(255, 255, 255, 0.85);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }
    .dark .glass-card {
        background: rgba(30, 41, 59, 0.85);
    }
}

/* Custom scrollbars */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 9999px;
}
.dark ::-webkit-scrollbar-thumb {
    background: #475569;
}

/* Horizontal tab bars remain swipeable without showing a distracting scrollbar. */
.scrollbar-none {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.scrollbar-none::-webkit-scrollbar {
    display: none;
}

/*
 * Main menu strip: when the options do not fit, it scrolls sideways with a thin visible
 * scrollbar (so it is clear there is more), and the right edge fades to hint at the hidden options.
 */
.nav-strip {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    scrollbar-color: #94a3b8 transparent;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
    padding-right: 28px;
    mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
}
.nav-strip::-webkit-scrollbar { height: 6px; }
.nav-strip::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 9999px; }
.dark .nav-strip { scrollbar-color: #64748b transparent; }
.dark .nav-strip::-webkit-scrollbar-thumb { background: #64748b; }
.nav-strip > * { flex-shrink: 0; }

/* Pulse animation for SOS button */
@keyframes sos-pulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
    50% { transform: scale(1.04); box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
}
.animate-sos {
    animation: sos-pulse 2s infinite;
}

/*
 * Readable text in light mode (WCAG AA, 4.5:1 on white, slate-50 and slate-100 panels).
 * Tailwind's 400/500/600 text shades of these colors are too light for small text; each is
 * darkened within its own hue. Dark mode keeps its own dark: variants. The brand color is
 * adjusted in PHP (Setting::accessiblePalette), because it comes from the chosen palette.
 */
html:not(.dark) body:not(.surface-dark) .text-slate-400 { color: #5f6f84; }
html:not(.dark) body:not(.surface-dark) .text-slate-500 { color: #526176; }
html:not(.dark) body:not(.surface-dark) .text-emerald-500,
html:not(.dark) body:not(.surface-dark) .text-emerald-600 { color: #047857; }
html:not(.dark) body:not(.surface-dark) .text-green-500,
html:not(.dark) body:not(.surface-dark) .text-green-600 { color: #15803d; }
html:not(.dark) body:not(.surface-dark) .text-amber-500,
html:not(.dark) body:not(.surface-dark) .text-amber-600 { color: #b45309; }
html:not(.dark) body:not(.surface-dark) .text-yellow-500,
html:not(.dark) body:not(.surface-dark) .text-yellow-600 { color: #854d0e; }
html:not(.dark) body:not(.surface-dark) .text-orange-500,
html:not(.dark) body:not(.surface-dark) .text-orange-600 { color: #c2410c; }
html:not(.dark) body:not(.surface-dark) .text-red-500,
html:not(.dark) body:not(.surface-dark) .text-red-600 { color: #b91c1c; }
html:not(.dark) body:not(.surface-dark) .text-rose-500,
html:not(.dark) body:not(.surface-dark) .text-rose-600 { color: #be123c; }
html:not(.dark) body:not(.surface-dark) .text-sky-500,
html:not(.dark) body:not(.surface-dark) .text-sky-600 { color: #0369a1; }
html:not(.dark) body:not(.surface-dark) .text-teal-500,
html:not(.dark) body:not(.surface-dark) .text-teal-600 { color: #0f766e; }

/* Filled buttons with white text (both themes): emerald-600 and cyan-600 are below 4.5:1, use 700 (hover 800). */
.bg-emerald-600 { background-color: #047857; }
.hover\:bg-emerald-700:hover { background-color: #065f46; }
.bg-cyan-600 { background-color: #0e7490; }
.hover\:bg-cyan-700:hover { background-color: #155e75; }

/*
 * Readable text in dark mode (WCAG AA on slate-800/900 panels). slate-500 is too dark there, and
 * status colors written without a dark: variant keep their light-mode 500/600 shade. Elements that
 * declare their own dark:text-* color are left alone.
 */
html.dark .dark\:text-slate-500,
body.surface-dark .dark\:text-slate-500,
html.dark .text-slate-500:not([class*="dark:text-"]),
body.surface-dark .text-slate-500:not([class*="dark:text-"]) { color: #94a3b8; }
html.dark .text-emerald-500:not([class*="dark:text-"]),
body.surface-dark .text-emerald-500:not([class*="dark:text-"]),
html.dark .text-emerald-600:not([class*="dark:text-"]),
body.surface-dark .text-emerald-600:not([class*="dark:text-"]) { color: #34d399; }
html.dark .text-green-500:not([class*="dark:text-"]),
body.surface-dark .text-green-500:not([class*="dark:text-"]),
html.dark .text-green-600:not([class*="dark:text-"]),
body.surface-dark .text-green-600:not([class*="dark:text-"]) { color: #4ade80; }
html.dark .text-amber-500:not([class*="dark:text-"]),
body.surface-dark .text-amber-500:not([class*="dark:text-"]),
html.dark .text-amber-600:not([class*="dark:text-"]),
body.surface-dark .text-amber-600:not([class*="dark:text-"]) { color: #fbbf24; }
html.dark .text-yellow-500:not([class*="dark:text-"]),
body.surface-dark .text-yellow-500:not([class*="dark:text-"]),
html.dark .text-yellow-600:not([class*="dark:text-"]),
body.surface-dark .text-yellow-600:not([class*="dark:text-"]) { color: #facc15; }
html.dark .text-orange-500:not([class*="dark:text-"]),
body.surface-dark .text-orange-500:not([class*="dark:text-"]),
html.dark .text-orange-600:not([class*="dark:text-"]),
body.surface-dark .text-orange-600:not([class*="dark:text-"]) { color: #fb923c; }
html.dark .text-red-500:not([class*="dark:text-"]),
body.surface-dark .text-red-500:not([class*="dark:text-"]),
html.dark .text-red-600:not([class*="dark:text-"]),
body.surface-dark .text-red-600:not([class*="dark:text-"]) { color: #f87171; }
html.dark .text-rose-500:not([class*="dark:text-"]),
body.surface-dark .text-rose-500:not([class*="dark:text-"]),
html.dark .text-rose-600:not([class*="dark:text-"]),
body.surface-dark .text-rose-600:not([class*="dark:text-"]) { color: #fb7185; }
html.dark .text-sky-500:not([class*="dark:text-"]),
body.surface-dark .text-sky-500:not([class*="dark:text-"]),
html.dark .text-sky-600:not([class*="dark:text-"]),
body.surface-dark .text-sky-600:not([class*="dark:text-"]) { color: #38bdf8; }
html.dark .text-teal-600:not([class*="dark:text-"]),
body.surface-dark .text-teal-600:not([class*="dark:text-"]) { color: #2dd4bf; }
html.dark .text-indigo-600:not([class*="dark:text-"]),
body.surface-dark .text-indigo-600:not([class*="dark:text-"]) { color: rgb(var(--brand-400-rgb)); }