/*
 * 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;
}

/* User Manuals link, pinned at the foot of the sidebar. Given its own dark-grey
   treatment so it reads as a persistent utility rather than another nav
   destination. Written here rather than as Tailwind utilities because the
   bg-gray-* classes are not in this project's compiled build, which can't be
   regenerated in this environment — they would silently do nothing.
   The icon inherits the white via fill="currentColor". */
.sidebar-link.sidebar-manuals {
  background-color: #374151;
  color: #ffffff;
}
.sidebar-link.sidebar-manuals svg { color: #ffffff; }
.sidebar-link.sidebar-manuals:hover { background-color: #4b5563; }
/* Current page: a subtle inset ring keeps the affordance without changing the
   colour the link was asked to have. */
.sidebar-link.sidebar-manuals.is-current {
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35);
}

/* 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;
  }
}

/* Rendered markdown for the onboarding manuals (/manuals).
   Hand-written rather than Tailwind's typography plugin: that plugin isn't
   installed and this project's Tailwind build can't be regenerated here, so
   utility classes that aren't already compiled would silently do nothing.
   Colours come from the same custom properties the rest of the app themes with,
   so this follows light/dark automatically. */
.manual-prose {
  color: var(--foreground);
  line-height: 1.65;
  font-size: 0.95rem;
}
.manual-prose > :first-child { margin-top: 0; }
.manual-prose h1 { font-size: 1.875rem; font-weight: 700; margin: 0 0 0.75rem; }
.manual-prose h2 {
  font-size: 1.375rem; font-weight: 650; margin: 2.25rem 0 0.75rem;
  padding-bottom: 0.35rem; border-bottom: 1px solid var(--border);
}
.manual-prose h3 { font-size: 1.1rem; font-weight: 650; margin: 1.75rem 0 0.5rem; }
.manual-prose p { margin: 0.85rem 0; }
.manual-prose ul,
.manual-prose ol { margin: 0.85rem 0; padding-left: 1.5rem; }
.manual-prose ul { list-style: disc; }
.manual-prose ol { list-style: decimal; }
.manual-prose li { margin: 0.35rem 0; }
.manual-prose li > ul,
.manual-prose li > ol { margin: 0.35rem 0; }
.manual-prose a { color: var(--primary); text-decoration: underline; }
.manual-prose a:hover { text-decoration: none; }
.manual-prose strong { font-weight: 650; color: var(--foreground); }
.manual-prose hr { border: 0; border-top: 1px solid var(--border); margin: 2rem 0; }
.manual-prose blockquote {
  margin: 1rem 0; padding: 0.6rem 1rem;
  border-left: 3px solid var(--primary);
  background: var(--muted); border-radius: 0 0.375rem 0.375rem 0;
}
.manual-prose blockquote p { margin: 0.35rem 0; }
.manual-prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85em; padding: 0.15em 0.4em;
  background: var(--muted); border-radius: 0.25rem;
}
.manual-prose pre {
  margin: 1rem 0; padding: 0.9rem 1rem; overflow-x: auto;
  background: var(--muted); border: 1px solid var(--border); border-radius: 0.5rem;
}
.manual-prose pre code { padding: 0; background: none; font-size: 0.85rem; }

/* Wide tables scroll inside their own box rather than stretching the page. */
.manual-prose .table-scroll { overflow-x: auto; margin: 1.25rem 0; }
.manual-prose table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.manual-prose th,
.manual-prose td {
  border: 1px solid var(--border); padding: 0.5rem 0.75rem;
  text-align: left; vertical-align: top;
}
.manual-prose th { background: var(--muted); font-weight: 650; }

/* Count badge on the reminder filter pills.
   Reproduces the intended Tailwind badge —
     inline-flex items-center rounded-md bg-blue-400/10 px-2 py-1 text-xs
     font-medium text-blue-400 inset-ring inset-ring-blue-400/30
   — as plain CSS, because the colour and ring utilities in that set
   (text-blue-400, bg-blue-400/10, inset-ring, inset-ring-blue-400/30) are NOT
   in this project's compiled Tailwind build, and it can't be regenerated here.
   Written out, the badge renders identically and is build-independent. */
.count-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 0.375rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  background-color: rgb(96 165 250 / 0.1);
  color: #60a5fa;
  box-shadow: inset 0 0 0 1px rgb(96 165 250 / 0.3);
}

/* On the selected pill the background is already primary blue, so the blue
   badge would nearly vanish. Invert it to read against it. */
.count-badge--current {
  background-color: rgb(255 255 255 / 0.2);
  color: #ffffff;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.45);
}

/* Merge-variable buttons under the email body in the template editor.
   Reproduces Tailwind's light-grey badge —
     inline-flex items-center rounded-md bg-gray-400/10 px-2 py-1 text-xs
     font-medium text-gray-400 inset-ring inset-ring-gray-400/20
   — as plain CSS, because bg-gray-400/10, inset-ring and inset-ring-gray-400/20
   are absent from this project's compiled Tailwind build, which cannot be
   regenerated here.

   One deliberate departure: gray-400 text on a light background is ~2.5:1
   contrast, below the 4.5:1 needed to be readable, and these are interactive
   buttons rather than decorative labels. The grey fill and ring are kept; the
   label uses a tone that stays legible in each theme. */
.merge-chip {
  display: inline-flex;
  align-items: center;
  border-radius: 0.375rem;
  padding: 0.25rem 0.5rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  background-color: rgb(156 163 175 / 0.1);
  color: #4b5563;
  box-shadow: inset 0 0 0 1px rgb(156 163 175 / 0.2);
  cursor: pointer;
  user-select: none;
}
.dark .merge-chip {
  color: #9ca3af;
}
.merge-chip:hover {
  background-color: rgb(156 163 175 / 0.2);
}
.merge-chip:active {
  transform: translateY(1px);
}
.merge-chip:focus-visible {
  outline: 2px solid #6b7280;
  outline-offset: 2px;
}

/* Stale-queue warning in the email template editor's right rail.
   Plain CSS because border-warning / bg-warning-background are not in this
   project's compiled Tailwind build, which cannot be regenerated here. Uses the
   --warning custom property the theme already defines, so it tracks the palette
   and follows light/dark. */
.stale-warning {
  border: 1px solid color-mix(in srgb, var(--warning) 45%, transparent);
  background-color: color-mix(in srgb, var(--warning) 12%, transparent);
  border-radius: 0.5rem;
  padding: 1rem;
}
.stale-warning-icon {
  color: var(--warning);
}

/* Email History panel on each reminder card. Same color-mix technique as
   .stale-warning above — tinting over transparent keeps it correct in both
   light and dark — but over --primary rather than --warning. Amber is already
   spoken for on this page: the reminder type badge beside this panel renders
   variant: :warning, so an amber panel would read as "something is wrong with
   this club" when it is only a record of what has already been sent. */
.email-history {
  border: 1px solid color-mix(in srgb, var(--primary) 35%, transparent);
  background-color: color-mix(in srgb, var(--primary) 8%, transparent);
  border-radius: 0.5rem;
}