/* Common theme styles for Dash applications */

/* Table styling */
.dark-table {
  border-collapse: collapse;
  width: 100%;
  background-color: #1a202c;
  border: 1px solid #4a5568;
}
.dark-th {
  color: #ffffff;
  padding: 0.625rem;
  background-color: #2d3748; /* header background */
  text-align: left;
}
.dark-td {
  color: #a0aec0; /* muted text */
  padding: 0.5rem;
}

/* Buttons */
.btn-danger {
  background-color: #dc3545;
  color: #ffffff;
  border: none;
  padding: 0.3125rem 0.625rem;
  border-radius: 0.1875rem;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.btn-danger:hover {
  background-color: #c82333;
}

.btn-danger:active {
  background-color: #bd2130;
}

.btn-danger:disabled,
.btn-danger[disabled],
.btn-danger[disabled=""] {
  background-color: #4a5568 !important;
  color: #a0aec0 !important;
  cursor: not-allowed !important;
  opacity: 0.6;
  pointer-events: none;
}

.btn-danger:disabled:hover,
.btn-danger[disabled]:hover,
.btn-danger[disabled=""]:hover {
  background-color: #4a5568 !important;
}

/* Input styling */
.dark-input {
  width: 100%;
  background-color: #2d3748;
  color: white;
  border: 1px solid #4a5568;
  border-radius: 0.25rem;
  padding: 0.5rem;
}

.dark-input:focus {
  outline: none;
  border-color: #63b3ed;
  box-shadow: 0 0 0 0.125rem rgba(99, 179, 237, 0.2);
}

/* Flex container styling */
.flex-column {
  flex: 1;
  margin-right: 0.625rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Button styling */
.btn-primary {
  background-color: #28a745;
  color: white;
  border: none;
  padding: 0.625rem 1.25rem;
  border-radius: 0.3125rem;
  cursor: pointer;
  margin-top: 0.9375rem;
  transition: background-color 0.2s ease;
}

.btn-primary:hover {
  background-color: #218838;
}

.btn-primary:active {
  background-color: #1e7e34;
}

.btn-primary:disabled,
.btn-primary[disabled],
.btn-primary[disabled=""] {
  background-color: #4a5568 !important;
  color: #a0aec0 !important;
  cursor: not-allowed !important;
  opacity: 0.6;
  pointer-events: none;
}

.btn-primary:disabled:hover,
.btn-primary[disabled]:hover,
.btn-primary[disabled=""]:hover {
  background-color: #4a5568 !important;
}

.btn-primary-sm {
  background-color: #28a745;
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  cursor: pointer;
  margin-top: 0.625rem;
  transition: background-color 0.2s ease;
}

.btn-primary-sm:hover {
  background-color: #218838;
}

.btn-primary-sm:active {
  background-color: #1e7e34;
}

/* Dropdown styling */
.dark-dropdown {
  background-color: #2d3748;
  color: white;
}

/* Upload area styling */
.upload-area {
  width: 100%;
  min-height: 2.75rem;
  line-height: 1.25em;
  padding: 0.75rem;
  border-width: 1px;
  border-style: dashed;
  border-radius: 0.3125rem;
  text-align: center;
  background-color: #f8f9fa;
  color: #495057;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Button variants */
.btn-info {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 0.625rem 1.25rem;
  border-radius: 0.3125rem;
  cursor: pointer;
  margin-right: 0.625rem;
  transition: background-color 0.2s ease;
}

.btn-info:hover {
  background-color: #0056b3;
}

.btn-info:active {
  background-color: #004085;
}

/* Disabled button styles */
.btn-info:disabled,
.btn-info[disabled],
.btn-info[disabled=""] {
  background-color: #4a5568 !important;
  color: #a0aec0 !important;
  cursor: not-allowed !important;
  opacity: 0.6;
  pointer-events: none;
}

.btn-info:disabled:hover,
.btn-info[disabled]:hover,
.btn-info[disabled=""]:hover {
  background-color: #4a5568 !important;
}

.btn-secondary {
  background-color: #6c757d;
  color: white;
  border: none;
  padding: 0.625rem 1.25rem;
  border-radius: 0.3125rem;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.btn-secondary:hover {
  background-color: #545b62;
}

.btn-secondary:active {
  background-color: #3d4449;
}

.btn-secondary:disabled,
.btn-secondary[disabled],
.btn-secondary[disabled=""] {
  background-color: #4a5568 !important;
  color: #a0aec0 !important;
  cursor: not-allowed !important;
  opacity: 0.6;
  pointer-events: none;
}

.btn-secondary:disabled:hover,
.btn-secondary[disabled]:hover,
.btn-secondary[disabled=""]:hover {
  background-color: #4a5568 !important;
}

/* Input field styling */
.dark-input-field {
  width: 12.5rem;
  margin-left: 0.625rem;
  background-color: #2d3748;
  color: white;
}

/* Label styling */
.form-label {
  color: white;
  font-weight: bold;
  margin-bottom: 0.3125rem;
}

/* Flex container with margins */
.flex-column-margins {
  flex: 1;
  margin-left: 0.625rem;
  margin-right: 0.625rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Container styling */
.container {
  background-color: #1a202c;
  padding: 1.25rem;
  border-radius: 0.3125rem;
  border: 1px solid #4a5568;
}

.container-error {
  background-color: #1a202c;
  padding: 1.25rem;
  border-radius: 0.3125rem;
  border: 1px solid #dc3545;
}

/* Text color utilities */
.text-white {
  color: white;
}

.text-muted {
  color: #a0aec0;
}

.text-error {
  color: red;
}

/* GlycoShield UI Specific Styles */

/* Configuration Toggle Button */
.config-toggle-btn {
  width: 100%;
  margin-bottom: 0.9375rem;
  text-align: left;
  background-color: #4a5568;
  color: white;
  border: 1px solid #718096;
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.config-toggle-btn:hover {
  background-color: #5a6578;
  border-color: #8192a6;
}

/* Configuration Content Panel */
.config-content {
  background-color: #2d3748;
  border-radius: 0.5rem;
  padding: 1.25rem;
  border: 1px solid #4a5568;
  margin-top: -0.625rem;
}

.config-content.expanded {
  display: block;
}

.config-content.collapsed {
  display: none;
}

/* Task Status Display */
.task-completed {
  background-color: #2d3748;
  border-radius: 0.375rem;
  padding: 0.625rem;
}

.task-progress-bar {
  width: 100%;
  height: 0.5rem;
  background-color: #e5e7eb;
  border-radius: 0.25rem;
  overflow: hidden;
  margin-top: 0.5rem;
}

.task-progress-fill {
  height: 100%;
  background-color: #3b82f6;
  transition: width 0.3s ease;
}

.task-progress-text {
  font-weight: bold;
  margin-right: 0.625rem;
  color: #3b82f6;
}

.task-progress-message {
  color: #9ca3af;
}

/* Alert Styles */
.alert {
  padding: 0.9375rem;
  margin-bottom: 1.25rem;
  border: 1px solid transparent;
  border-radius: 0.5rem;
}

.alert-success {
  background-color: #d1fae5;
  border-color: #a7f3d0;
  color: #065f46;
}

.alert-error {
  background-color: #fee2e2;
  border-color: #fecaca;
  color: #991b1b;
}

/* Enhanced Text Styles */
.text-success {
  color: #059669;
  font-weight: bold;
  font-size: 1rem;
  margin: 0px;
}

/* Section Styling */
.upload-section {
  margin-bottom: 0.625rem;
}

.config-section {
  margin-bottom: 0.625rem;
}

/* Responsive Design */
@media (max-width: 768px) {
  .config-toggle-btn {
    font-size: 0.875rem;
    padding: 0.625rem 0.75rem;
  }
  
  .config-content {
    padding: 0.9375rem;
  }
  
  .task-progress-text {
    font-size: 0.875rem;
  }
}

/* State Icon Positioning and Visibility */
.state-icon-container {
  position: absolute;
  top: 0.3125rem;
  left: 0.3125rem;
  width: 1.25rem;
  height: 1.25rem;
  z-index: 10;
}

.state-icon {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.state-icon-hidden {
  visibility: hidden !important;
}

.state-icon-visible {
  visibility: visible !important;
}

/* Glycan thumbnail hover tooltip */
.glycan-name-cell {
  position: relative;
}

.glycan-name-hover {
  display: inline-block;
  cursor: help;
}

.glycan-thumbnail-tooltip {
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 0.9375rem;
  z-index: 1000;
  background-color: #2d3748;
  padding: 0.5rem;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.5);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
  white-space: nowrap;
}

/* Show tooltip when hovering over the cell (works for both the cell and its children) */
.glycan-name-cell:hover .glycan-thumbnail-tooltip {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Step Section Styles */
.step-section {
  height: 100vh;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.step-header {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  gap: 1.25rem;
  margin-bottom: 1.25rem;
  width: 100%;
}

.step-title {
  color: white;
  font-size: 3rem;
  margin: 0 !important;
  padding: 0 !important;
  flex-shrink: 0;
  flex-grow: 0;
  line-height: 1.2;
  display: flex;
  align-items: flex-end;
  white-space: nowrap;
}

.step-description {
  color: #a0aec0;
  font-size: 1.125rem;
  margin: 0 !important;
  padding: 0 !important;
  flex: 1;
  line-height: 1.5;
  min-width: 0;
  display: flex;
  align-items: flex-end;
  text-align: left;
}

/* Main App Container */
.app-main-container {
  background-color: #1a202c;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box; /* Include padding/border in width calculation */
}

/* Navigation sidebar - ensure box-sizing for desktop too */
.navigation-sidebar {
  box-sizing: border-box; /* Include padding in width calculation */
}

/* Phone responsive layout - Navigation flexible with max 1/3, Content takes remaining space */
@media (max-width: 768px) {
  /* Make app container use flexbox for flexible layout */
  .app-main-container {
    display: flex !important;
    flex-direction: column !important;
    height: 100vh !important;
    overflow: hidden !important;
  }
  
  /* Sidebar becomes top navigation bar - flexible height with max 1/3 */
  .navigation-sidebar {
    position: relative !important; /* Change from fixed to relative for flexbox */
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    max-width: 100% !important; /* Ensure it doesn't exceed viewport width */
    max-height: 33.333vh !important; /* Max 1/3 of viewport height */
    height: auto !important; /* Allow it to shrink if content is smaller */
    padding: 0.75rem !important; /* Smaller padding on phones */
    box-sizing: border-box !important; /* Include padding in width calculation */
    /* min-height is set inline from Python calculation */
    flex-shrink: 0 !important; /* Don't shrink below content size */
    overflow-y: auto !important;
    overflow-x: hidden !important;
    /* z-index removed - not needed on phones */
  }
  
  /* Inner navigation container needs min-height to contain absolutely positioned items */
  .navigation-sidebar > div[style*="position: relative"] {
    min-height: inherit !important;
    height: auto !important; /* Override 100% height on phones */
    width: 100% !important;
    max-width: 100% !important; /* Ensure it doesn't exceed parent width */
    box-sizing: border-box !important;
    overflow: hidden !important; /* Prevent absolutely positioned children from overflowing */
  }
  
  /* Hide navigation title on phones */
  .navigation-sidebar > h2 {
    display: none !important;
  }
  
  /* Main content area takes remaining space below navigation */
  #page-content {
    margin-left: 0 !important;
    margin-top: 0 !important;
    flex: 1 !important; /* Take remaining space */
    min-height: 0 !important; /* Allow shrinking below content size */
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
  
  /* Adjust navigation path display if needed */
  #page-content > div:first-child {
    position: sticky;
    top: 0;
    z-index: 100;
  }
  
  /* Step header: stack title and description vertically on phones */
  .step-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.625rem !important;
  }
  
  /* Make plugin titles smaller on phones */
  .step-title {
    font-size: 1.5rem !important;
    white-space: normal !important; /* Allow wrapping if needed */
  }
  
  /* Description below title on phones */
  .step-description {
    flex: none !important;
    width: 100% !important;
    align-items: flex-start !important;
  }
  
  /* Step sections: top-align on phones instead of centering */
  .step-section {
    height: auto !important; /* Remove fixed height on phones */
    min-height: 100% !important; /* At least fill available space */
    justify-content: flex-start !important; /* Top-align content */
    padding: 1.25rem !important; /* Consistent padding */
  }
  
  /* Remove scroll snapping on phones for now */
  #page-content {
    scroll-snap-type: none !important;
  }
  
  .step-section {
    scroll-snap-align: none !important;
    scroll-snap-stop: normal !important;
  }
}