/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Custom utility classes for enhanced Tailwind CSS components */

/* Enhanced search result styling */
.search-result-item {
  @apply transition-colors duration-150 ease-in-out;
}

.search-result-item:hover {
  @apply bg-gray-50;
}

.search-result-item[data-highlighted="true"] {
  @apply bg-blue-50 border-l-4 border-blue-500;
}

/* Search input focus enhancement */
.search-input:focus {
  @apply ring-2 ring-blue-500 ring-opacity-20;
}

/* Enhanced dropdown animations */
.search-dropdown {
  @apply transition-all duration-150 ease-in-out;
  @apply shadow-lg ring-1 ring-black ring-opacity-5;
}

.search-dropdown.hidden {
  @apply opacity-0 scale-95 pointer-events-none;
}

.search-dropdown:not(.hidden) {
  @apply opacity-100 scale-100;
}

/* Tab styling enhancements */
.tab-button {
  @apply transition-all duration-200 ease-in-out;
}

.tab-button.active {
  @apply border-indigo-500 text-indigo-600;
}

.tab-button:hover {
  @apply text-gray-700 border-gray-300;
}

/* Card hover effects */
.card-hover {
  @apply transition-shadow duration-200 ease-in-out;
}

.card-hover:hover {
  @apply shadow-lg;
}

/* Status badge enhancements */
.status-badge {
  @apply inline-flex items-center rounded-md px-2 py-1 text-xs font-medium ring-1 ring-inset;
}

.status-badge.success {
  @apply bg-green-50 text-green-700 ring-green-600/20;
}

.status-badge.warning {
  @apply bg-yellow-50 text-yellow-700 ring-yellow-600/20;
}

.status-badge.error {
  @apply bg-red-50 text-red-700 ring-red-600/20;
}

.status-badge.info {
  @apply bg-blue-50 text-blue-700 ring-blue-600/20;
}

/* Form field enhancements */
.form-field {
  @apply block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6;
}

.form-field.readonly {
  @apply bg-gray-50 cursor-not-allowed;
}

/* Button enhancements */
.btn {
  @apply inline-flex items-center justify-center rounded-md px-3 py-2 text-sm font-semibold shadow-sm transition-all duration-200 ease-in-out;
}

.btn:focus-visible {
  @apply outline outline-2 outline-offset-2 outline-indigo-600;
}

.btn.primary {
  @apply bg-indigo-600 text-white hover:bg-indigo-500 focus-visible:outline-indigo-600;
}

.btn.secondary {
  @apply bg-white text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus-visible:outline-gray-600;
}

.btn.success {
  @apply bg-green-600 text-white hover:bg-green-500 focus-visible:outline-green-600;
}

.btn.danger {
  @apply bg-red-600 text-white hover:bg-red-500 focus-visible:outline-red-600;
}

/* ── Left sidebar app shell ──────────────────────────────────────────────
   Plain CSS (served raw via Propshaft) so the structural layout works
   without a Tailwind rebuild. Colors/typography come from Tailwind utility
   classes in the markup. */
:root {
  --sidebar-w: 16rem;
  --sidebar-w-collapsed: 4rem;
  --topbar-h: 4rem;
}

.app-sidebar {
  position: fixed;
  top: var(--topbar-h);
  left: 0;
  height: calc(100vh - var(--topbar-h));
  width: var(--sidebar-w);
  z-index: 40;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  transition: width 0.2s ease, transform 0.2s ease;
  /* Complementary neutral: light gray (light mode) / dark gray (dark mode) */
  background-color: #f3f4f6;
}
.dark .app-sidebar {
  background-color: #1f2937;
}

/* Brand gradient (navy -> primary blue) for card headers etc. Replaces the old
   hardcoded from-blue-600 to-indigo-600 gradient. */
.brand-gradient {
  background-image: linear-gradient(to right, #004b87, #039dfc);
}
.app-sidebar.collapsed {
  width: var(--sidebar-w-collapsed);
}

.app-shell-main {
  margin-left: var(--sidebar-w);
  padding-top: var(--topbar-h);
  min-height: 100vh;
  transition: margin-left 0.2s ease;
}
.app-shell-main.collapsed {
  margin-left: var(--sidebar-w-collapsed);
}

.app-topbar {
  /* Full-width header fixed across the top of the window, above the sidebar. */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--topbar-h);
  z-index: 50;
  display: flex;
  align-items: center;
  /* Brand header */
  background-color: #004b87;
  border-bottom-color: transparent;
  color: #ffffff;
}
/* Header controls (hamburger, dark-mode) stay legible on the navy header.
   The account-menu trigger and its popover keep their own explicit colors. */
.app-topbar .topbar-btn {
  color: #ffffff;
}
.app-topbar .topbar-btn:hover {
  background-color: rgba(255, 255, 255, 0.15);
  color: #ffffff;
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  white-space: nowrap;
}
.sidebar-link svg {
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
}

/* Collapsed = icon rail: hide labels, center icons */
.app-sidebar.collapsed .sidebar-label,
.app-sidebar.collapsed .sidebar-brand-text {
  display: none;
}
.app-sidebar.collapsed .sidebar-link {
  justify-content: center;
  gap: 0;
}
.app-sidebar.collapsed .sidebar-brand {
  justify-content: center;
}

.sidebar-backdrop {
  display: none;
}

/* Mobile: off-canvas drawer. Desktop "collapsed" state is neutralized here so
   the drawer is always full-width with labels. */
@media (max-width: 767px) {
  .app-sidebar,
  .app-sidebar.collapsed {
    transform: translateX(-100%);
    width: var(--sidebar-w);
  }
  .app-sidebar.open,
  .app-sidebar.collapsed.open {
    transform: translateX(0);
  }
  .app-sidebar.collapsed .sidebar-label,
  .app-sidebar.collapsed .sidebar-brand-text {
    display: revert;
  }
  .app-sidebar.collapsed .sidebar-link {
    justify-content: flex-start;
    gap: 0.75rem;
  }
  .app-shell-main,
  .app-shell-main.collapsed {
    margin-left: 0;
  }
  .sidebar-backdrop.open {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 39;
  }
}