@font-face {
  font-family: "VanillaExtract";
  src: url("/media/VanillaExtract.ttf");
}
body { 
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
a {
  text-decoration: none !important;
}
nav:before {
  content: " ";
  display: block;
  position: absolute;
  left: 0;
  bottom: 100%;
  height: 100vh;
  width: 100vw;
  background: inherit;
}
.navbar-brand {
  font-family: "VanillaExtract";
  font-size: 2em;
}
.feature-card { transition: transform 0.3s; }
.feature-card:hover { transform: translateY(-10px); }
.btn-get-started { background-color: #28a745; border: none; }
.btn-get-started:hover { background-color: #218838; }
.supportCentered {
  text-align: center;
}
.table-responsive {
 max-width: 1200px;
 margin: 0 auto;
 font-size: 0.75rem;
}
.table thead th {
 background-color: #343a40;
 color: white;
}
.table-striped tbody tr:nth-of-type(odd) {
 background-color: #e9ecef;
}
.section-header {
 font-weight: bold;
 background-color: #6c757d;
 color: white;
}
.node {
 border: 1px solid #ddd;
 border-radius: 6px;
 padding: .5rem;
 margin: 1rem 0;
 background: #fff;
 position: relative;
 min-height: 24px;
 box-shadow: 0 1px 2px rgba(0,0,0,.05);
 font-size: .8rem;
}
.node::before {
 content: attr(data-tag);
 position: absolute;
 top: -10px;
 left: 6px;
 background: inherit;
 font-size: .65rem;
 color: #0066cc;
 font-weight: bold;
 padding: 0 4px;
 border: 1px solid #ddd;
 border-radius: 3px;
}
.node:after {
 display: block;
}
.node[data-id]::after {
 content: '#' attr(data-id);
 font-size: .65rem;
 color: #d73a49;
 margin-left: .4rem;
}
.node[data-class]::after {
 content: '.' attr(data-class);
 font-size: .65rem;
 color: #22863a;
 margin-left: .2rem;
}
.indent {
 margin-left: 1.8rem;
}
.node.hidden {
 opacity: .3;
 border-style: dashed;
}
.sections-wrapper {
 display: flex;
 gap: 2rem;
 flex-wrap: wrap;
}
.section {
 flex: 1;
 min-width: 300px;
}
@media (max-width: 800px) {
 .sections-wrapper {
   flex-direction: column;
 }
}
footer {
  background-color: transparent;
  padding: 1.5rem 0;
  border-top: 1px solid #dee2e6;
}
footer a {
  color: #0d6efd;
  text-decoration: none;
}
footer a:hover {
  text-decoration: underline;
}




/* Dark Theme Adjustments */
[data-bs-theme="dark"] {
  background-color: #212529 !important;
  color: #e9ecef !important;
}

/* Ensure Bootstrap components respect dark mode */
[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .dropdown-menu,
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-check-input {
  background-color: #343a40 !important;
  color: #e9ecef !important;
  border-color: #495057 !important;
}

/* Ensure dropdown items have proper contrast */
[data-bs-theme="dark"] .dropdown-item {
  color: #e9ecef !important;
  background-color: #343a40 !important;
}

[data-bs-theme="dark"] .dropdown-item:hover,
[data-bs-theme="dark"] .dropdown-item:focus {
  background-color: #495057 !important;
  color: #ffffff !important;
}

/* Fix form switch in dark mode */
[data-bs-theme="dark"] .form-check-label {
  color: #e9ecef !important;
}

[data-bs-theme="dark"] .node {
  background-color: #343a40 !important;
}

[data-bs-theme="dark"] .bg-light,
[data-bs-theme="dark"] .bg-white {
  background-color: #343a40 !important;
}