@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;
}

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

/* Form elements */
.form-control {
  padding: 10px;
}

.upload-box {
    border: 2px dashed #dee2e6;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
}

.upload-box:hover {
    border-color: #228be6;
    background-color: rgba(34, 139, 230, 0.05);
}

.upload-box.drag-active {
    border-color: #228be6;
    background-color: rgba(34, 139, 230, 0.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: 2rem;
}

@media (max-width: 600px) {
    .responsive-group {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 1rem !important;
    }
    
    .responsive-group .mantine-Title-root {
        text-align: center !important;
    }
}

.text-success {
    color: #28a745;
}

.text-muted {
    color: #6c757d;
}

.mb-3 {
    margin-bottom: 1rem;
}

.mt-2 {
    margin-top: 0.5rem;
}

.mt-3 {
    margin-top: 1rem;
}

.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 */
@media (max-width: 768px) {
    .mobile-only {
        display: block;
    }
    
    .desktop-table {
        display: none;
    }
    
    .mobile-cards {
        display: block !important;
    }
}

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