/* App shell and dark theme. Loaded after Tailwind's CDN styles, so the dark overrides use !important.
   The side menu keeps the same dark navy in both themes; the page itself switches. */

:root { --side-bg: #0f172a; --side-line: #1e293b; --side-text: #cbd5e1; --side-muted: #64748b; }

.side { background: var(--side-bg); color: var(--side-text); border-right: 1px solid var(--side-line); }
.side-title { color: var(--side-muted); }
.side-link { color: var(--side-text); text-decoration: none; }
.side-link:hover { background: #1e293b; color: #fff; }
.side-link.is-on { background: #10b981; color: #052e24; font-weight: 600; }
.side-foot { border-color: var(--side-line); }
.side-foot summary::-webkit-details-marker { display: none; }
.side-pop { background: #1e293b; color: var(--side-text); border: 1px solid #334155; }
.side-pop-link:hover { background: #334155; color: #fff; }

.topbar { background: rgba(255, 255, 255, .9); backdrop-filter: blur(6px); border-color: #e2e8f0; }
.theme-btn { border-color: #cbd5e1; background: transparent; color: inherit; cursor: pointer; }
.theme-btn:hover { background: rgba(100, 116, 139, .15); }

/* ---------- dark theme ---------- */
.dark body { background-color: #0b1220 !important; color: #e2e8f0 !important; }
.dark .topbar { background: rgba(11, 18, 32, .92); border-color: #1e293b; }
.dark .theme-btn { border-color: #334155; }

.dark .bg-white { background-color: #111c33 !important; }
.dark .bg-slate-50 { background-color: #0b1220 !important; }
.dark .bg-slate-100 { background-color: #1a2742 !important; }
.dark .bg-slate-200 { background-color: #26334f !important; }
.dark .bg-slate-900 { background-color: #334a73 !important; }
.dark .bg-slate-900:hover, .dark .hover\:bg-slate-700:hover { background-color: #41598a !important; }
.dark .bg-slate-700 { background-color: #3b4a68 !important; }

.dark .text-slate-900, .dark .text-slate-800 { color: #e2e8f0 !important; }
.dark .text-slate-700 { color: #cbd5e1 !important; }
.dark .text-slate-600, .dark .text-slate-500 { color: #94a3b8 !important; }
.dark .text-slate-400 { color: #7c8ba3 !important; }

.dark .border-slate-300, .dark .border-slate-200, .dark .border, .dark .border-b, .dark .border-t { border-color: #2b3a5a !important; }
.dark .divide-y > :not([hidden]) ~ :not([hidden]) { border-color: #24324f !important; }
.dark .shadow, .dark .shadow-md, .dark .shadow-lg { box-shadow: 0 1px 3px rgba(0, 0, 0, .55) !important; }
.dark .ring-slate-200 { --tw-ring-color: #2b3a5a !important; }

.dark input, .dark select, .dark textarea { background-color: #0d172b !important; color: #e2e8f0 !important; border-color: #2b3a5a !important; }
.dark input::placeholder, .dark textarea::placeholder { color: #64748b !important; }
.dark input[type=file] { background: transparent !important; }
.dark .rounded.bg-slate-100 { background-color: #0d172b !important; }       /* address / code boxes */

/* status colours */
.dark .bg-emerald-50 { background-color: rgba(16, 185, 129, .12) !important; }
.dark .bg-emerald-100 { background-color: rgba(16, 185, 129, .2) !important; }
.dark .border-emerald-200 { border-color: rgba(16, 185, 129, .35) !important; }
.dark .text-emerald-700, .dark .text-emerald-800, .dark .text-emerald-900 { color: #6ee7b7 !important; }
.dark .bg-amber-50 { background-color: rgba(245, 158, 11, .12) !important; }
.dark .border-amber-200, .dark .border-amber-400 { border-color: rgba(245, 158, 11, .45) !important; }
.dark .text-amber-700, .dark .text-amber-800, .dark .text-amber-900 { color: #fcd34d !important; }
.dark .bg-red-50 { background-color: rgba(239, 68, 68, .12) !important; }
.dark .border-red-200 { border-color: rgba(239, 68, 68, .4) !important; }
.dark .text-red-700, .dark .text-red-800 { color: #fca5a5 !important; }
.dark .ring-amber-300 { --tw-ring-color: rgba(245, 158, 11, .6) !important; }
.dark a.underline { color: inherit; }
.dark .text-emerald-600 { color: #34d399 !important; }

/* QR codes and receipt pictures stay on a light background so they remain readable */
.dark svg[viewBox*="0 0"] { color-scheme: light; }
.dark .qr-box { background: #fff !important; }

.ico { display: inline-block; width: 18px; height: 18px; flex-shrink: 0; background-color: currentColor; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }

/* Form controls follow the page theme, not the operating system's. */
html { color-scheme: light; }
html.dark { color-scheme: dark; }
html:not(.dark) input:not([type=checkbox]):not([type=radio]):not([type=file]), html:not(.dark) select, html:not(.dark) textarea { background-color: #fff; color: #0f172a; }

.side nav { scrollbar-width: thin; scrollbar-color: #334155 transparent; }
.side nav::-webkit-scrollbar { width: 6px; }
.side nav::-webkit-scrollbar-thumb { background: #334155; border-radius: 3px; }

/* classes used by a few older pages */
.dark .bg-gray-100 { background-color: #1a2742 !important; }
.dark .bg-gray-200 { background-color: #26334f !important; }
.dark .bg-gray-900 { background-color: #334a73 !important; }
.dark .bg-gray-700, .dark .bg-gray-800 { background-color: #3b4a68 !important; }
.dark .text-gray-900, .dark .text-gray-800 { color: #e2e8f0 !important; }
.dark .text-gray-700 { color: #cbd5e1 !important; }
.dark .text-gray-600, .dark .text-gray-500 { color: #94a3b8 !important; }
.dark .text-gray-400 { color: #7c8ba3 !important; }
.dark .border-gray-200, .dark .border-gray-300, .dark .border-gray-400 { border-color: #2b3a5a !important; }
.dark .ring-gray-300 { --tw-ring-color: #2b3a5a !important; }
.dark .bg-amber-100 { background-color: rgba(245, 158, 11, .2) !important; }
.dark .bg-red-100 { background-color: rgba(239, 68, 68, .2) !important; }
.dark .text-red-900 { color: #fecaca !important; }
.dark .bg-sky-100 { background-color: rgba(14, 165, 233, .15) !important; }
.dark .text-sky-800 { color: #7dd3fc !important; }
.dark .border-blue-300, .dark .border-blue-700, .dark .border-blue-800 { border-color: rgba(59, 130, 246, .5) !important; }