:root {
  --user-dark-bg: #08110f;
  --user-dark-bg-soft: #0d1816;
  --user-dark-surface: #121f1c;
  --user-dark-surface-2: #182723;
  --user-dark-surface-3: #21322e;
  --user-dark-border: #2b403a;
  --user-dark-text: #f1f5f4;
  --user-dark-text-soft: #cbd5d1;
  --user-dark-muted: #94a39e;
}

[data-theme-icon="sun"] { display: none; }
[data-theme-icon="moon"] { display: block; }
.dark [data-theme-icon="sun"] { display: block; }
.dark [data-theme-icon="moon"] { display: none; }

body.user-app {
  transition: background-color 160ms ease, color 160ms ease;
  overflow-x: hidden;
}

html.dark body.user-app {
  background: linear-gradient(145deg, #08110f 0%, #0c1715 48%, #111b20 100%) fixed !important;
  color: var(--user-dark-text);
}

html.dark body.user-app .bg-white,
html.dark body.user-app [class~="bg-white/95"],
html.dark body.user-app [class~="bg-white/97"],
html.dark body.user-app [class~="bg-white/90"] {
  background-color: var(--user-dark-surface) !important;
}

html.dark body.user-app .bg-gray-50,
html.dark body.user-app .bg-slate-50,
html.dark body.user-app [class*="from-gray-50"][class*="to-slate-50"] {
  background-color: var(--user-dark-surface-2) !important;
  background-image: none !important;
}

html.dark body.user-app .bg-gray-100,
html.dark body.user-app .bg-slate-100 {
  background-color: var(--user-dark-surface-3) !important;
}

html.dark body.user-app .bg-gray-200,
html.dark body.user-app .bg-slate-200 {
  background-color: #2b3c38 !important;
}

html.dark body.user-app .text-gray-900,
html.dark body.user-app .text-slate-900 {
  color: var(--user-dark-text) !important;
}

html.dark body.user-app .text-gray-800,
html.dark body.user-app .text-slate-800 {
  color: #e2e8e5 !important;
}

html.dark body.user-app .text-gray-700,
html.dark body.user-app .text-slate-700 {
  color: var(--user-dark-text-soft) !important;
}

html.dark body.user-app .text-gray-600,
html.dark body.user-app .text-slate-600 {
  color: #b2c0bb !important;
}

html.dark body.user-app .text-gray-500,
html.dark body.user-app .text-slate-500 {
  color: var(--user-dark-muted) !important;
}

html.dark body.user-app .text-gray-400,
html.dark body.user-app .text-slate-400 {
  color: #80918b !important;
}

html.dark body.user-app .text-gray-300,
html.dark body.user-app .text-slate-300 {
  color: #6f817b !important;
}

html.dark body.user-app .border-gray-100,
html.dark body.user-app .border-gray-200,
html.dark body.user-app .border-gray-300,
html.dark body.user-app .border-slate-100,
html.dark body.user-app .border-slate-200,
html.dark body.user-app .border-slate-300 {
  border-color: var(--user-dark-border) !important;
}

html.dark body.user-app .divide-gray-100 > :not([hidden]) ~ :not([hidden]),
html.dark body.user-app .divide-gray-200 > :not([hidden]) ~ :not([hidden]),
html.dark body.user-app .divide-slate-100 > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--user-dark-border) !important;
}

html.dark body.user-app input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]),
html.dark body.user-app select,
html.dark body.user-app textarea {
  background-color: #101c19 !important;
  border-color: #344b44 !important;
  color: var(--user-dark-text) !important;
}

html.dark body.user-app input::placeholder,
html.dark body.user-app textarea::placeholder {
  color: #71827c !important;
  opacity: 1;
}

html.dark body.user-app input:focus,
html.dark body.user-app select:focus,
html.dark body.user-app textarea:focus {
  background-color: #15231f !important;
}

html.dark body.user-app tbody tr:hover,
html.dark body.user-app .hover\:bg-gray-50:hover,
html.dark body.user-app .hover\:bg-slate-50:hover,
html.dark body.user-app .hover\:bg-gray-100:hover,
html.dark body.user-app .hover\:bg-slate-100:hover {
  background-color: #1a2a26 !important;
}

html.dark body.user-app .bg-emerald-50,
html.dark body.user-app .bg-emerald-100,
html.dark body.user-app .bg-green-50,
html.dark body.user-app .bg-green-100 {
  background-color: #102d25 !important;
}
html.dark body.user-app .text-emerald-700,
html.dark body.user-app .text-emerald-800,
html.dark body.user-app .text-green-700,
html.dark body.user-app .text-green-800 { color: #6ee7b7 !important; }
html.dark body.user-app .border-emerald-100,
html.dark body.user-app .border-emerald-200 { border-color: #285f4f !important; }

html.dark body.user-app .bg-blue-50,
html.dark body.user-app .bg-blue-100,
html.dark body.user-app .bg-sky-50,
html.dark body.user-app .bg-sky-100 {
  background-color: #10283a !important;
}
html.dark body.user-app .text-blue-700,
html.dark body.user-app .text-blue-800,
html.dark body.user-app .text-sky-700,
html.dark body.user-app .text-sky-800 { color: #7dd3fc !important; }
html.dark body.user-app .border-blue-100,
html.dark body.user-app .border-blue-200,
html.dark body.user-app .border-sky-100,
html.dark body.user-app .border-sky-200 { border-color: #26526b !important; }

html.dark body.user-app .bg-amber-50,
html.dark body.user-app .bg-amber-100,
html.dark body.user-app .bg-yellow-50,
html.dark body.user-app .bg-yellow-100 {
  background-color: #33280f !important;
}
html.dark body.user-app .text-amber-700,
html.dark body.user-app .text-amber-800,
html.dark body.user-app .text-yellow-700 { color: #fcd34d !important; }
html.dark body.user-app .border-amber-100,
html.dark body.user-app .border-amber-200 { border-color: #6c5420 !important; }

html.dark body.user-app .bg-red-50,
html.dark body.user-app .bg-red-100,
html.dark body.user-app .bg-rose-50,
html.dark body.user-app .bg-rose-100 {
  background-color: #39191d !important;
}
html.dark body.user-app .text-red-700,
html.dark body.user-app .text-red-800,
html.dark body.user-app .text-rose-700,
html.dark body.user-app .text-rose-800 { color: #fda4af !important; }
html.dark body.user-app .border-red-100,
html.dark body.user-app .border-red-200,
html.dark body.user-app .border-rose-100,
html.dark body.user-app .border-rose-200 { border-color: #71323a !important; }

html.dark body.user-app .bg-violet-50,
html.dark body.user-app .bg-violet-100 { background-color: #281d3d !important; }
html.dark body.user-app .text-violet-700,
html.dark body.user-app .text-violet-800 { color: #c4b5fd !important; }

html.dark body.user-app .shadow-sm,
html.dark body.user-app .shadow,
html.dark body.user-app .shadow-md,
html.dark body.user-app .shadow-lg,
html.dark body.user-app .shadow-xl,
html.dark body.user-app .shadow-2xl {
  --tw-shadow-color: rgba(0, 0, 0, .34) !important;
}

html.dark body.user-app .dk-modal,
html.dark body.user-app .tm-modal-card {
  background: var(--user-dark-surface) !important;
  color: var(--user-dark-text) !important;
}

html.dark body.user-app .gl-num {
  background: #101c19 !important;
  border-color: #344b44 !important;
  color: var(--user-dark-text) !important;
}
html.dark body.user-app .gl-num:focus { background: #15231f !important; }
html.dark body.user-app .gl-num.dirty { background: #123127 !important; border-color: #2b725b !important; }
html.dark body.user-app .save-pill.idle { background: #21322e; color: #aab8b3; }
html.dark body.user-app .save-pill.saving { background: #3a2d12; color: #fcd34d; }
html.dark body.user-app .save-pill.saved { background: #123127; color: #6ee7b7; }

html.dark body.user-app .tm-map-card { background: #182723; border-color: #2b403a; }
html.dark body.user-app .tm-filter-bar,
html.dark body.user-app .tm-filter-select,
html.dark body.user-app .tm-filter-reset,
html.dark body.user-app .tm-legend-item,
html.dark body.user-app .tm-ob,
html.dark body.user-app .tm-tn {
  background-color: #14211e !important;
  border-color: #344b44 !important;
  color: #dce5e2 !important;
}
html.dark body.user-app .tm-filter-label,
html.dark body.user-app .tm-filter-group label,
html.dark body.user-app .tm-srow,
html.dark body.user-app .tm-his .h-row { color: #b8c5c1 !important; }
html.dark body.user-app .tm-filter-counter,
html.dark body.user-app .tm-pill { background: #21322e; color: #b8c5c1; }
html.dark body.user-app .tm-mh,
html.dark body.user-app .tm-mf,
html.dark body.user-app .tm-his { border-color: #2b403a !important; }
html.dark body.user-app .tm-mf { background: #0f1a18 !important; }
html.dark body.user-app .tm-mh h3 { color: var(--user-dark-text) !important; }
html.dark body.user-app .tm-mh .sub,
html.dark body.user-app .tm-his .h-note,
html.dark body.user-app .tm-his .h-meta { color: var(--user-dark-muted) !important; }
html.dark body.user-app .tm-bt-g { color: #b8c5c1; }
html.dark body.user-app .tm-bt-g:hover { background: #21322e; color: #fff; }

html.dark body.user-app .topbar,
html.dark body.user-app .filter-card,
html.dark body.user-app .location-card {
  background: var(--user-dark-surface) !important;
  border-color: var(--user-dark-border) !important;
  color: var(--user-dark-text) !important;
}
html.dark body.user-app .filter-card label,
html.dark body.user-app .location-info { color: var(--user-dark-text-soft) !important; }
html.dark body.user-app .stats-alert { background: #102d25 !important; color: #6ee7b7 !important; }
html.dark body.user-app .page-link { border-color: var(--user-dark-border) !important; color: #8ed9c6 !important; }
html.dark body.user-app .page-link:hover { background: var(--user-dark-surface-3) !important; }

html.dark body.user-app .login-bg {
  background: linear-gradient(145deg, #030907 0%, #07130f 55%, #0d1916 100%) !important;
}

html.dark body.user-app .file-upload {
  background: #101c19 !important;
  border-color: #344b44 !important;
}
html.dark body.user-app .file-upload:hover,
html.dark body.user-app .file-upload.dragover {
  background: #152b25 !important;
  border-color: var(--brand) !important;
}
html.dark body.user-app .file-upload.has-file {
  background: #102d25 !important;
  border-color: #2b725b !important;
}
html.dark body.user-app .file-upload .text { color: var(--user-dark-muted) !important; }
html.dark body.user-app .file-upload .filename { color: #6ee7b7 !important; }

html.dark body.user-app .jf-theme-toggle {
  background: var(--user-dark-surface-2) !important;
  border-color: var(--user-dark-border) !important;
  color: var(--user-dark-text-soft) !important;
}
html.dark body.user-app .jf-theme-toggle:hover {
  background: var(--user-dark-surface-3) !important;
  color: #fff !important;
}

@media (prefers-reduced-motion: reduce) {
  body.user-app { transition: none; }
}

@media (max-width: 359px) {
  body.user-app .user-mobile-page-badge,
  body.user-app .user-mobile-status-badge {
    display: none !important;
  }

  body.user-app .user-mobile-theme-toggle {
    width: 36px !important;
    height: 36px !important;
    margin-right: 16px;
  }
}