/**
 * Scuttle Custom Styles
 * Additional styles for ClojureScript components that can't be done inline.
 */

/* =============================================================================
   Animated Header Link
   Animated underline effect on hover - used in PatientDashboardView
   ============================================================================= */

.animated-header-link {
  display: inline-block;
  position: relative;
}

.animated-header-link::after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: 0;
  left: 0;
  /* Use Mantine's text color variable, fallback to currentColor */
  background-color: var(--mantine-color-text, currentColor);
  transform-origin: bottom right;
  transition: transform 0.3s ease-out;
}

.animated-header-link:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

/* =============================================================================
   Patient Sidebar
   Hidden on mobile, visible on desktop (md breakpoint = 768px)
   ============================================================================= */

.patient-sidebar {
  display: none !important;
}

@media (min-width: 768px) {
  .patient-sidebar {
    display: flex !important;
  }
}

/* =============================================================================
   Notes View - Mobile Responsive Layout
   On mobile, when a note is selected, hide the list and show editor full-width
   ============================================================================= */

/* Notes list panel - hidden on mobile when a note is selected */
.notes-list-panel--compressed {
  display: none !important;
}

@media (min-width: 768px) {
  .notes-list-panel--compressed {
    display: flex !important;
  }
}

/* =============================================================================
   Patient Header Back Button
   Only visible on mobile - desktop has sidebar navigation
   ============================================================================= */

.patient-header-back-btn {
  display: flex !important;
}

@media (min-width: 768px) {
  .patient-header-back-btn {
    display: none !important;
  }
}