/* Colour scale variables (--primary-500 etc.) are injected by index.html for light and dark themes. */
/* Mobile: never let long text (addresses etc.) make the page wider than the screen */
html, body { max-width: 100%; overflow-x: clip; } /* clip (not hidden) keeps sticky headers/buttons working */
main, .grid > *, .flex-1 { min-width: 0; }
:root {
  --color-primary: #0099df;
  --color-bg: #f2f7fc;
  --color-text: #11181C;
  --radius: 14px;
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --app-bg:
    radial-gradient(900px 520px at -8% -10%, rgba(0,153,223,.16), transparent 60%),
    radial-gradient(700px 480px at 108% -6%, rgba(255,153,0,.14), transparent 60%),
    radial-gradient(800px 600px at 50% 115%, rgba(120,40,200,.08), transparent 60%),
    linear-gradient(180deg, #f5faff 0%, #f2f7fc 100%);
  --side-bg: linear-gradient(180deg, rgba(255,255,255,.94) 0%, rgba(238,247,254,.94) 100%);
  color-scheme: light;
}
html.dark {
  --color-bg: #111116;
  --color-text: #ececf1;
  --app-bg:
    radial-gradient(900px 520px at -8% -10%, rgba(0,153,223,.16), transparent 60%),
    radial-gradient(700px 480px at 108% -6%, rgba(255,153,0,.10), transparent 60%),
    linear-gradient(180deg, #121218 0%, #0f0f14 100%);
  --side-bg: linear-gradient(180deg, rgba(24,24,30,.97) 0%, rgba(19,19,25,.97) 100%);
  color-scheme: dark;
}
html, body { font-family: var(--font-sans); background: var(--color-bg); color: var(--color-text); -webkit-tap-highlight-color: transparent; }
/* never let one wide element push the whole screen sideways on small phones */
body { max-width: 100%; overflow-x: clip; }
main { min-width: 0; }
img, video, canvas { max-width: 100%; }
body { overscroll-behavior-y: none; background: var(--app-bg); background-attachment: fixed; min-height: 100vh; transition: background-color .25s, color .25s; }
.side-bg { background: var(--side-bg); }
.accent-line { background: linear-gradient(90deg, #0099df, #00c2e0 35%, #ffb020 70%, #ff9900); }

/* Dark mode: white surfaces become dark surfaces */
html.dark .bg-white,
html.dark [class*="bg-white/6"], html.dark [class*="bg-white/7"], html.dark [class*="bg-white/8"], html.dark [class*="bg-white/9"] { background-color: rgb(var(--surface)) !important; }
html.dark .hover\:bg-white:hover { background-color: rgb(var(--default-200)) !important; }
html.dark .bg-default-900 { background-color: #26262e !important; }
html.dark .from-white { --tw-gradient-from: rgb(var(--surface)) var(--tw-gradient-from-position) !important; --tw-gradient-to: rgb(var(--surface) / 0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
html.dark .shadow-sm, html.dark [class*="shadow-[0_1px"] { box-shadow: 0 1px 2px rgba(0,0,0,.4) !important; }
html.dark .logo-plate { background: rgba(255,255,255,.94); border-radius: 12px; padding: 4px 8px; }
html.dark input, html.dark textarea, html.dark select { color: var(--color-text); }
html.dark ::placeholder { color: rgb(var(--default-500)); }

.safe-bottom { padding-bottom: env(safe-area-inset-bottom); }
.safe-top { padding-top: env(safe-area-inset-top); }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }
@keyframes e3s-pop { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes e3s-fade { from { opacity: 0; } to { opacity: 1; } }
.anim-pop { animation: e3s-pop .18s ease-out; }
.anim-fade { animation: e3s-fade .15s ease-out; }
@keyframes e3s-drawer { from { transform: translateY(24px); opacity: .6; } to { transform: none; opacity: 1; } }
@keyframes e3s-drawer-x { from { transform: translateX(40px); opacity: .6; } to { transform: none; opacity: 1; } }
.anim-drawer { animation: e3s-drawer .22s cubic-bezier(.2,.9,.3,1); }
@media (min-width: 640px) { .anim-drawer { animation: e3s-drawer-x .24s cubic-bezier(.2,.9,.3,1); } }
input[type=number]::-webkit-inner-spin-button { opacity: .4; }
@keyframes e3s-spin { to { transform: rotate(360deg); } }
.anim-spin { animation: e3s-spin .8s linear infinite; }
@keyframes e3s-rot { from { transform: rotate(-90deg) scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
.anim-rot { animation: e3s-rot .35s cubic-bezier(.2,.9,.3,1.3); }
input[type=date], input[type=time], input[type=datetime-local], input[type=month] { min-height: 1.5rem; }
.chat-bubble { white-space: pre-wrap; word-break: break-word; }
@media print {
  .no-print { display: none !important; }
  body { background: #fff; }
  .print-only { display: block !important; }
}
.print-only { display: none; }