/* DoremiNova downstream visual layer
 *
 * This file is intentionally additive. It changes only surfaces, background,
 * borders and shadows; the existing JavaScript, DOM structure, route wiring,
 * API calls and interaction classes remain in the verified production bundle.
 */
:root {
  --doremi-glass-ink: #253044;
  --doremi-glass-muted: #64748b;
  --doremi-glass-border: rgba(148, 163, 184, 0.24);
  --doremi-glass-surface: rgba(255, 255, 255, 0.66);
  --doremi-glass-surface-strong: rgba(255, 255, 255, 0.78);
  --doremi-glass-shadow: 0 18px 44px rgba(93, 132, 156, 0.12);
}

/* The authenticated downstream shell keeps its original layout and spacing. */
#app > .min-h-screen.bg-gray-50 {
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  color: var(--doremi-glass-ink);
  background:
    radial-gradient(circle at 9% 0%, rgba(196, 238, 239, 0.54), transparent 31%),
    radial-gradient(circle at 90% 7%, rgba(219, 211, 250, 0.42), transparent 29%),
    linear-gradient(135deg, #f8fcff 0%, #eef9fa 48%, #f6f2ff 100%) !important;
}

#app > .min-h-screen.bg-gray-50 > .bg-mesh-gradient {
  z-index: 0;
  opacity: 0.72 !important;
  background:
    radial-gradient(circle at 16% 18%, rgba(130, 221, 218, 0.22), transparent 25%),
    radial-gradient(circle at 78% 24%, rgba(192, 177, 242, 0.18), transparent 23%),
    radial-gradient(circle at 54% 92%, rgba(160, 222, 229, 0.16), transparent 30%) !important;
  filter: blur(22px) saturate(112%);
  transform: scale(1.06);
}

#app > .min-h-screen.bg-gray-50 > .relative.min-h-screen {
  position: relative;
  z-index: 1;
}

/* Shared glass surfaces: subtle translucency, a thin edge and a soft lift. */
#app > .min-h-screen.bg-gray-50 .glass,
#app > .min-h-screen.bg-gray-50 .glass-card,
#app > .min-h-screen.bg-gray-50 .card-glass,
#app > .min-h-screen.bg-gray-50 .card {
  background: linear-gradient(135deg, var(--doremi-glass-surface-strong), var(--doremi-glass-surface)) !important;
  border-color: var(--doremi-glass-border) !important;
  box-shadow: var(--doremi-glass-shadow) !important;
  -webkit-backdrop-filter: blur(22px) saturate(128%);
  backdrop-filter: blur(22px) saturate(128%);
}

#app > .min-h-screen.bg-gray-50 .glass,
#app > .min-h-screen.bg-gray-50 .glass-card,
#app > .min-h-screen.bg-gray-50 .card-glass {
  border-radius: 1.1rem;
}

#app > .min-h-screen.bg-gray-50 .card {
  border-radius: 1rem;
}

/* Keep the original sidebar, including its bottom theme/collapse controls. */
#app > .min-h-screen.bg-gray-50 .sidebar {
  z-index: 40;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(246, 252, 255, 0.62)) !important;
  border-color: rgba(148, 163, 184, 0.2) !important;
  box-shadow: 18px 0 44px rgba(86, 128, 151, 0.1) !important;
  -webkit-backdrop-filter: blur(24px) saturate(132%);
  backdrop-filter: blur(24px) saturate(132%);
}

#app > .min-h-screen.bg-gray-50 .sidebar-header,
#app > .min-h-screen.bg-gray-50 .sidebar > .mt-auto {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(148, 163, 184, 0.18) !important;
}

#app > .min-h-screen.bg-gray-50 .sidebar-link {
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.08);
}

#app > .min-h-screen.bg-gray-50 .sidebar-link:hover {
  background: rgba(255, 255, 255, 0.54) !important;
  border-color: rgba(125, 211, 212, 0.24) !important;
  box-shadow: 0 8px 20px rgba(99, 148, 168, 0.08);
}

#app > .min-h-screen.bg-gray-50 .sidebar-link-active {
  background: linear-gradient(135deg, rgba(209, 245, 244, 0.82), rgba(231, 224, 255, 0.68)) !important;
  border-color: rgba(92, 182, 187, 0.28) !important;
  box-shadow: 0 10px 24px rgba(105, 155, 177, 0.1);
}

/* Header, menus and form controls stay in their original locations. */
#app > .min-h-screen.bg-gray-50 .dropdown,
#app > .min-h-screen.bg-gray-50 .input,
#app > .min-h-screen.bg-gray-50 select,
#app > .min-h-screen.bg-gray-50 textarea {
  background: rgba(255, 255, 255, 0.7) !important;
  border-color: rgba(148, 163, 184, 0.28) !important;
  -webkit-backdrop-filter: blur(18px) saturate(125%);
  backdrop-filter: blur(18px) saturate(125%);
}

#app > .min-h-screen.bg-gray-50 .input:focus,
#app > .min-h-screen.bg-gray-50 select:focus,
#app > .min-h-screen.bg-gray-50 textarea:focus {
  border-color: rgba(76, 174, 181, 0.62) !important;
  box-shadow: 0 0 0 3px rgba(113, 207, 211, 0.16) !important;
}

#app > .min-h-screen.bg-gray-50 .tabs {
  background: rgba(226, 239, 242, 0.48) !important;
  border: 1px solid rgba(148, 163, 184, 0.16);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

#app > .min-h-screen.bg-gray-50 .tab-active {
  background: rgba(255, 255, 255, 0.74) !important;
  box-shadow: 0 8px 20px rgba(93, 132, 156, 0.1) !important;
}

/* Neutral inner dashboard blocks should read as one layered glass surface. */
#app > .min-h-screen.bg-gray-50 .card [class~="bg-gray-50"],
#app > .min-h-screen.bg-gray-50 .card [class~="bg-gray-50/50"],
#app > .min-h-screen.bg-gray-50 .card [class~="bg-gray-50/60"],
#app > .min-h-screen.bg-gray-50 .card [class~="bg-white"] {
  background-color: rgba(255, 255, 255, 0.22) !important;
}

@media (prefers-reduced-transparency: reduce) {
  #app > .min-h-screen.bg-gray-50 .glass,
  #app > .min-h-screen.bg-gray-50 .glass-card,
  #app > .min-h-screen.bg-gray-50 .card-glass,
  #app > .min-h-screen.bg-gray-50 .card,
  #app > .min-h-screen.bg-gray-50 .sidebar {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(255, 255, 255, 0.94) !important;
  }
}

/* Dark mode remains functional, with neutral charcoal glass instead of navy. */
.dark #app > .min-h-screen.bg-gray-50 {
  color: #e6edf3;
  background:
    radial-gradient(circle at 10% 0%, rgba(53, 117, 119, 0.22), transparent 31%),
    radial-gradient(circle at 88% 7%, rgba(104, 85, 150, 0.2), transparent 29%),
    linear-gradient(135deg, #1a252d 0%, #17272b 50%, #211f30 100%) !important;
}

.dark #app > .min-h-screen.bg-gray-50 .glass,
.dark #app > .min-h-screen.bg-gray-50 .glass-card,
.dark #app > .min-h-screen.bg-gray-50 .card-glass,
.dark #app > .min-h-screen.bg-gray-50 .card {
  background: linear-gradient(135deg, rgba(38, 53, 61, 0.78), rgba(28, 40, 47, 0.72)) !important;
  border-color: rgba(148, 163, 184, 0.18) !important;
  box-shadow: 0 18px 44px rgba(3, 12, 18, 0.24) !important;
}

.dark #app > .min-h-screen.bg-gray-50 .sidebar {
  background: linear-gradient(180deg, rgba(32, 47, 55, 0.88), rgba(24, 37, 44, 0.84)) !important;
  border-color: rgba(148, 163, 184, 0.16) !important;
}

.dark #app > .min-h-screen.bg-gray-50 .sidebar-link:hover {
  background: rgba(86, 132, 141, 0.22) !important;
}

.dark #app > .min-h-screen.bg-gray-50 .sidebar-link-active {
  background: linear-gradient(135deg, rgba(53, 116, 122, 0.4), rgba(89, 73, 126, 0.34)) !important;
  border-color: rgba(119, 207, 208, 0.26) !important;
}

.dark #app > .min-h-screen.bg-gray-50 .dropdown,
.dark #app > .min-h-screen.bg-gray-50 .input,
.dark #app > .min-h-screen.bg-gray-50 select,
.dark #app > .min-h-screen.bg-gray-50 textarea {
  background: rgba(31, 47, 55, 0.84) !important;
  border-color: rgba(148, 163, 184, 0.2) !important;
}

.dark #app > .min-h-screen.bg-gray-50 .tabs {
  background: rgba(23, 39, 46, 0.68) !important;
}

.dark #app > .min-h-screen.bg-gray-50 .tab-active {
  background: rgba(58, 75, 84, 0.86) !important;
}

.dark #app > .min-h-screen.bg-gray-50 .card [class~="bg-gray-50"],
.dark #app > .min-h-screen.bg-gray-50 .card [class~="bg-gray-50/50"],
.dark #app > .min-h-screen.bg-gray-50 .card [class~="bg-gray-50/60"],
.dark #app > .min-h-screen.bg-gray-50 .card [class~="bg-white"] {
  background-color: rgba(47, 64, 73, 0.42) !important;
}