@font-face {
  font-family: "Strasua";
  src: url("/assets/strasua.woff") format("woff"),
    url("/assets/strasua.woff2") format("woff2");
}

/* Logo font */
.logo-text {
  font-family: "Strasua", sans-serif;
}

/* Navbar: align Bootstrap primary with Mantine indigo */
.navbar.bg-primary {
  background-color: var(--mantine-color-indigo-7) !important;
}
.navbar.bg-primary .navbar-nav .nav-link {
  color: rgba(255, 255, 255, 0.9) !important;
}
.navbar.bg-primary .navbar-nav .nav-link:hover,
.navbar.bg-primary .navbar-nav .nav-link.active {
  color: white !important;
  background-color: rgba(255, 255, 255, 0.1);
}
.navbar.bg-primary .navbar-brand {
  color: white !important;
}

/* Table styles */
.dash-table-container .row {
  display: block;
  margin: 0;
}

/* Form elements */
.form-control {
  padding: var(--mantine-spacing-sm);
}

.upload-box {
    border: 2px dashed var(--mantine-color-gray-3);
    border-radius: var(--mantine-radius-md);
    padding: var(--mantine-spacing-lg);
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
    box-shadow: none;
}

.upload-box:hover {
    border-color: var(--mantine-primary-color-6);
    background-color: var(--mantine-primary-color-0);
}

.upload-box.drag-active {
    border-color: var(--mantine-primary-color-6);
    background-color: var(--mantine-primary-color-1);
}
/* Loading indicator */
.dash-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

/* Auto-resizing images */
.auto-resize-750 {
  width: 100%;
  max-width: 750px;
  height: auto;
}

/* Responsive layout for title group */
.responsive-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--mantine-spacing-xl);
}

@media (max-width: 36em) {
    .responsive-group {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: var(--mantine-spacing-md) !important;
    }
    
    .responsive-group .mantine-Title-root {
        text-align: center !important;
    }
}

.text-success {
    color: var(--mantine-color-green-6);
}

.text-muted {
    color: var(--mantine-color-gray-6);
}

.mb-3 {
    margin-bottom: var(--mantine-spacing-md);
}

.mt-2 {
    margin-top: var(--mantine-spacing-sm);
}

.mt-3 {
    margin-top: var(--mantine-spacing-md);
}

.text-center {
    text-align: center;
}
.dash-bio-alignmentchart {
    width: 100% !important;
    min-height: 200px;
    overflow: auto;
}

/* Hide toggle button on desktop */
.mobile-only {
    display: none;
}

/* Mobile styles - Mantine breakpoint-sm (48em) */
@media (max-width: 48em) {
    .mobile-only {
        display: block;
    }
    
    .desktop-table {
        display: none;
    }
    
    .mobile-cards {
        display: block !important;
    }
}

/* Desktop styles */
@media (min-width: 48.0625em) {
    .mobile-cards {
        display: none !important;
    }
    
    .desktop-table {
        display: block;
    }
}