@import "tailwindcss";
html, body {
margin: 0;
padding: 0;
}
html {
height: 100%;
font-size: 14px;
}
body {
display: flex;
flex-direction: column;
height: 100%;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
background: #f8f8f8;
color: #4b4b4b;
}
.header {
margin: 24px 24px 0 24px;
padding: 12px;
border-radius: 12px;
background: #fff;
color: #888;
box-shadow: 0 0 24px #f4f4f4;
text-align: center;
}
.header svg {
height: 48px;
}
.content {
flex-grow: 1;
display: flex;
align-items: center;
}
.content_i {
flex-grow: 1;
padding: 0 24px;
}
.footer {
border-top: 1px solid #e6e8ec;
margin: 24px 24px 0;
padding: 24px;
text-align: center;
}
.footer_copyright a {
color: #838b99;
text-decoration: none;
}
.footer_copyright a:hover {
color: #0b7794;
text-decoration: underline;
}
.footer_icons {
padding-top: 16px;
display: flex;
justify-content: center;
}
.footer_icons a {
margin: 0 12px;
text-decoration: none;
}
.footer_icons svg {
height: 32px;
fill: #838b99;
}
.footer_icons a:hover svg {
fill: #0b7794;
}
.text-center {
text-align: center;
}
/* ============================================================
Dark mode
Class-based theme retrofit: when carries `.dark`, we
re-colour the handful of Tailwind utility classes the app
actually uses. `html.dark .x` outranks Tailwind's `.x`
(single-class) on specificity, so no markup changes and no
!important are needed. Coloured buttons (bg-*-600/700 with
light text) are intentionally left untouched.
============================================================ */
html.dark { color-scheme: dark; }
/* Theme toggle: show the icon for the action it performs. */
.theme-icon-sun { display: none; }
html.dark .theme-icon-sun { display: inline-block; }
html.dark .theme-icon-moon { display: none; }
body { transition: background-color .2s ease, color .2s ease; }
/* Custom shells from this stylesheet */
html.dark body { background: #0f172a; color: #cbd5e1; }
html.dark .header { background: #1e293b; color: #94a3b8; box-shadow: 0 0 24px rgba(0,0,0,.35); }
html.dark .footer { border-top-color: #334155; }
html.dark .footer_copyright a { color: #94a3b8; }
html.dark .footer_copyright a:hover { color: #34d399; }
/* App chrome surface (the sales/admin wrapper) */
html.dark .bg-gray-50 { background-color: #0f172a; }
/* Surfaces */
html.dark .bg-white { background-color: #1e293b; }
html.dark .bg-gray-100 { background-color: #334155; }
html.dark .bg-gray-200 { background-color: #475569; }
/* Hover surfaces */
html.dark .hover\:bg-gray-50:hover { background-color: #334155; }
html.dark .hover\:bg-gray-100:hover { background-color: #475569; }
html.dark .hover\:bg-gray-300:hover { background-color: #475569; }
/* Text */
html.dark .text-gray-900 { color: #f1f5f9; }
html.dark .text-gray-800 { color: #e2e8f0; }
html.dark .text-gray-700 { color: #cbd5e1; }
html.dark .text-gray-600 { color: #94a3b8; }
html.dark .text-gray-500 { color: #94a3b8; }
html.dark .text-gray-400 { color: #64748b; }
/* Borders */
html.dark .border-gray-50,
html.dark .border-gray-100 { border-color: #273549; }
html.dark .border-gray-200,
html.dark .border-gray-300 { border-color: #334155; }
html.dark .divide-gray-100 > :not([hidden]) ~ :not([hidden]) { border-color: #273549; }
/* Form controls (covers inputs without an explicit bg-white) */
html.dark input,
html.dark select,
html.dark textarea { background-color: #1e293b; color: #e2e8f0; border-color: #334155; }
html.dark input::placeholder,
html.dark textarea::placeholder { color: #64748b; }
/* Give shadowed cards a faint edge so they read on the dark canvas */
html.dark .shadow-sm,
html.dark .shadow,
html.dark .shadow-xl { box-shadow: 0 1px 3px rgba(0,0,0,.45); }
/* Coloured tint badges/chips: darken the light fills, lighten the dark text */
html.dark .bg-emerald-50,
html.dark .bg-emerald-100 { background-color: rgba(16,185,129,.16); }
html.dark .bg-blue-50,
html.dark .bg-blue-100 { background-color: rgba(59,130,246,.16); }
html.dark .bg-rose-50,
html.dark .bg-rose-100 { background-color: rgba(244,63,94,.16); }
html.dark .bg-red-50,
html.dark .bg-red-100 { background-color: rgba(239,68,68,.16); }
html.dark .bg-amber-50,
html.dark .bg-amber-100 { background-color: rgba(245,158,11,.16); }
html.dark .bg-indigo-50,
html.dark .bg-indigo-100 { background-color: rgba(99,102,241,.16); }
html.dark .bg-purple-50,
html.dark .bg-purple-100 { background-color: rgba(168,85,247,.16); }
html.dark .text-emerald-700,
html.dark .text-emerald-800 { color: #6ee7b7; }
html.dark .text-blue-700,
html.dark .text-blue-800 { color: #93c5fd; }
html.dark .text-rose-700,
html.dark .text-rose-800 { color: #fda4af; }
html.dark .text-red-700 { color: #fca5a5; }
html.dark .text-amber-700,
html.dark .text-amber-800 { color: #fcd34d; }
html.dark .text-indigo-700 { color: #a5b4fc; }
html.dark .text-purple-700 { color: #d8b4fe; }