/* Shared app navigation and theme. Keep styles usable without Tailwind utilities. */
:root {
  color-scheme: light;
  --ovh-nav-surface: #ffffff;
  --ovh-nav-text: #334155;
  --ovh-nav-muted: #64748b;
  --ovh-nav-border: #e2e8f0;
  --ovh-nav-hover: #f1f5f9;
  --ovh-nav-active: #dbeafe;
  --ovh-nav-active-text: #1d4ed8;
}
html.dark {
  color-scheme: dark;
  --ovh-nav-surface: #172235;
  --ovh-nav-text: #e2e8f0;
  --ovh-nav-muted: #cbd5e1;
  --ovh-nav-border: #334155;
  --ovh-nav-hover: #28384d;
  --ovh-nav-active: #1e3a5f;
  --ovh-nav-active-text: #bfdbfe;
}
.ovh-shell {
  background: var(--ovh-nav-surface);
  color: var(--ovh-nav-text);
  border-bottom: 1px solid var(--ovh-nav-border);
  position: sticky;
  top: 0;
  z-index: 30;
}
.ovh-shell-inner, .ovh-nav-desktop, .ovh-mobile-nav {
  max-width: 80rem;
  margin-inline: auto;
  padding-inline: 1rem;
}
.ovh-shell-inner {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  justify-content: space-between;
  align-items: center;
  min-height: 4rem;
  padding-block: .55rem;
}
.ovh-brand { font-weight: 750; font-size: 1.125rem; white-space: nowrap; color: var(--ovh-nav-text); }
.ovh-shell-controls { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.ovh-shell-action, .ovh-theme-toggle {
  border: 1px solid var(--ovh-nav-border);
  background: var(--ovh-nav-surface);
  color: var(--ovh-nav-text);
  padding: .48rem .75rem;
  border-radius: .55rem;
  font-size: .875rem;
  line-height: 1.4;
  cursor: pointer;
}
.ovh-shell-action:hover, .ovh-theme-toggle:hover { background: var(--ovh-nav-hover); }
.ovh-shell-action-primary {
  background: #1d4ed8;
  color: white;
  border-color: #1d4ed8;
}
.ovh-shell-action-primary:hover { background: #1e40af; }
.ovh-shell-action:disabled { opacity: .55; cursor: wait; }
.ovh-nav-desktop { display: flex; flex-wrap: wrap; gap: .2rem; padding-bottom: .55rem; }
.ovh-nav-link {
  display: inline-block;
  font-size: .84rem;
  line-height: 1.4;
  padding: .48rem .7rem;
  border-radius: .5rem;
  text-decoration: none;
  color: var(--ovh-nav-text);
}
.ovh-nav-link:hover { background: var(--ovh-nav-hover); }
.ovh-nav-link.is-active {
  color: var(--ovh-nav-active-text);
  background: var(--ovh-nav-active);
  font-weight: 650;
}
.ovh-mobile-nav { display: none; padding-bottom: .65rem; }
.ovh-mobile-nav summary { cursor: pointer; font-size: .875rem; font-weight: 650; padding: .35rem 0; }
.ovh-nav-mobile-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .3rem; padding-top: .5rem; }
.ovh-nav-mobile-link { overflow-wrap: anywhere; }
.ovh-nav-link:focus-visible, .ovh-shell-action:focus-visible, .ovh-theme-toggle:focus-visible {
  outline: 3px solid #60a5fa;
  outline-offset: 2px;
}
@media (max-width: 767px) {
  .ovh-nav-desktop { display: none; }
  .ovh-mobile-nav { display: block; }
  .ovh-shell-inner { gap: .5rem; }
  .ovh-shell-controls { gap: .35rem; }
  .ovh-shell-action, .ovh-theme-toggle { font-size: .8rem; padding: .4rem .55rem; }
}
@media (max-width: 360px) {
  .ovh-nav-mobile-links { grid-template-columns: 1fr; }
}

/* Existing pages use light-only Tailwind utility classes. Override their
   surfaces and text when dark is selected, including AJAX-rendered content. */
html.dark body, html.dark .bg-gray-50, html.dark .bg-slate-50 {
  background-color: #0b1220 !important;
  color: #e2e8f0;
}
html.dark body.bg-gradient-to-br {
  background-image: linear-gradient(135deg, #101b2e, #18213a) !important;
}
html.dark .bg-white, html.dark .bg-gray-100, html.dark .bg-slate-100 {
  background-color: #172235 !important;
}
html.dark .bg-gray-200, html.dark .bg-slate-200 { background-color: #28384d !important; }
html.dark .bg-blue-50, html.dark .bg-blue-100 { background-color: #1e3a5f !important; }
html.dark .bg-green-50, html.dark .bg-green-100 { background-color: #123c33 !important; }
html.dark .bg-red-50, html.dark .bg-red-100 { background-color: #4a2631 !important; }
html.dark .bg-orange-50, html.dark .bg-orange-100 { background-color: #472d1d !important; }
html.dark .bg-amber-50, html.dark .bg-amber-100,
html.dark .bg-yellow-50, html.dark .bg-yellow-100 { background-color: #44331e !important; }
html.dark .text-gray-900, html.dark .text-gray-800, html.dark .text-gray-700,
html.dark .text-slate-900, html.dark .text-slate-800, html.dark .text-slate-700 {
  color: #e2e8f0 !important;
}
html.dark .text-gray-600, html.dark .text-gray-500, html.dark .text-gray-400,
html.dark .text-slate-600, html.dark .text-slate-500, html.dark .text-slate-400 {
  color: #cbd5e1 !important;
}
html.dark .text-blue-900, html.dark .text-blue-800, html.dark .text-blue-700,
html.dark .text-blue-600 { color: #93c5fd !important; }
html.dark .text-green-900, html.dark .text-green-800, html.dark .text-green-700 { color: #86efac !important; }
html.dark .text-orange-900, html.dark .text-orange-800, html.dark .text-orange-700 { color: #fdba74 !important; }
html.dark .text-red-900, html.dark .text-red-800, html.dark .text-red-700, html.dark .text-red-600, html.dark .text-red-500 { color: #fca5a5 !important; }
html.dark .text-amber-900, html.dark .text-amber-800, html.dark .text-amber-700,
html.dark .text-yellow-900, html.dark .text-yellow-800, html.dark .text-yellow-700 {
  color: #fcd34d !important;
}
html.dark .border, html.dark .border-b, html.dark .border-t,
html.dark [class*="border-gray-"], html.dark [class*="border-slate-"] {
  border-color: #334155 !important;
}
html.dark .border-red-200 { border-color: #7f3d45 !important; }
html.dark .border-amber-200, html.dark .border-orange-200 { border-color: #785229 !important; }
html.dark .border-green-400 { border-color: #347d67 !important; }
html.dark input, html.dark select, html.dark textarea {
  background-color: #111c2e !important;
  color: #e2e8f0 !important;
  border-color: #475569 !important;
}
html.dark input::placeholder, html.dark textarea::placeholder { color: #94a3b8 !important; }
html.dark option { background-color: #111c2e; color: #e2e8f0; }
html.dark [class*="hover:bg-gray-100"]:hover,
html.dark [class*="hover:bg-slate-100"]:hover,
html.dark [class*="hover:bg-slate-50"]:hover,
html.dark [class*="hover:bg-blue-50"]:hover {
  background-color: #28384d !important;
}

/* RAM group dividers have a solid surface in both themes. The previous
   translucent bg-blue-50/70 utility did not inherit dark-mode overrides. */
.ovh-ram-group {
  background-color: #eff6ff;
  border-color: #bfdbfe;
}
.ovh-ram-group > th {
  color: #1e3a8a;
  border-left-color: #2563eb;
}
html.dark .ovh-ram-group {
  background-color: #243e62 !important;
  border-color: #45658f !important;
}
html.dark .ovh-ram-group > th {
  color: #dbeafe !important;
  border-left-color: #60a5fa !important;
}
.ovh-config-price { font-variant-numeric: tabular-nums; }
html.dark .ovh-config-price { color: #f1f5f9 !important; }
/* Dialogs are browser top-layer elements, outside the body background flow. */
html.dark dialog {
  background-color: #172235 !important;
  color: #e2e8f0 !important;
  border-color: #475569 !important;
}