/*
 * 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.
 */

/* Prospects styles migrated to Basecoat UI in prospects/index.html.erb */
/* Basecoat UI theme variables are in app/assets/tailwind/application.css */

/* Ads styles migrated to Basecoat UI in ads/index.html.erb */

/* Team Members styles migrated to Basecoat UI in team_members/index.html.erb */

/* Scripts styles migrated to Basecoat UI in scripts/index.html.erb */

/* Notes styles migrated to Basecoat UI in notes/index.html.erb */

/* Site Navigation */
.site-nav {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

/* Mobile hamburger menu (driven by the nav-menu Stimulus controller, which
   toggles .menu-open on the nav). Below Tailwind's md breakpoint the link
   list hides behind the toggle button and expands in-flow as a full-width
   column under the bar; the brand and Account/Sign out stay in the bar.
   767px (not 768) so this never overlaps the button's md:hidden, which
   kicks in at min-width 768px. Selectors are prefixed with .site-nav to
   outrank the Tailwind utility classes (e.g. .flex-wrap), which load after
   this file. */
/* Hidden on desktop; the media query below reveals it. Visibility lives
   here (not in a Tailwind md:hidden utility) because these unlayered rules
   would beat Tailwind's @layer utilities in the cascade anyway. */
.nav-menu-toggle {
  display: none;
  background: none;
  border: none;
  padding: 0.5rem;
  margin: -0.5rem 0;
  cursor: pointer;
  color: inherit;
  align-items: center;
}

.nav-menu-icon-close {
  display: none;
}

.site-nav.menu-open .nav-menu-icon-open {
  display: none;
}

.site-nav.menu-open .nav-menu-icon-close {
  display: inline;
}

@media (max-width: 767px) {
  .nav-menu-toggle {
    display: inline-flex;
  }

  .site-nav .site-nav-links {
    display: none;
    order: 4;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-top: 0.5rem;
  }

  .site-nav.menu-open .site-nav-links {
    display: flex;
  }

  .site-nav .site-nav-links a {
    padding: 0.625rem 0.25rem;
    border-top: 1px solid var(--border, #e5e7eb);
  }

  /* Own full-width row under the bar, always visible. Ordered before the link
     list (order 4) so opening the hamburger pushes the links below the search
     box rather than between it and the bar. A search box hidden behind a menu
     toggle defeats the purpose of having one. */
  .site-nav .site-nav-search {
    order: 3;
    flex-basis: 100%;
    max-width: none;
    margin-top: 0.5rem;
  }
}

/* Global name search (nav). The dropdown is driven by the search Stimulus
   controller; .site-nav-search is the positioning context for it. */
.site-nav-search {
  position: relative;
  flex: 1 1 12rem;
  max-width: 20rem;
  min-width: 0;
}

/* Leading room for the magnifying glass, so the icon identifies the field at a
   glance without the user having to read the placeholder. */
.site-nav-search .input {
  width: 100%;
  padding-left: 2rem;
}

.site-nav-search-icon {
  position: absolute;
  left: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted-foreground, #6b7280);
  /* Clicks fall through to the input underneath. */
  pointer-events: none;
}

/* Colors come from the theme tokens (app/assets/tailwind/application.css) so
   the dropdown follows the light/dark theme. Older rules in this file predate
   those tokens and hardcode hex values — don't copy that. */
.search-suggestions {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  right: 0;
  z-index: 50;
  max-height: 24rem;
  overflow-y: auto;
  background-color: var(--popover, #fff);
  color: var(--popover-foreground, inherit);
  border: 1px solid var(--border, #dee2e6);
  border-radius: var(--radius, 0.375rem);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.search-suggestions[hidden] {
  display: none;
}

.search-suggestion-group {
  padding: 0.375rem 0.75rem 0.25rem;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted-foreground, #6b7280);
}

.search-suggestion {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.5rem 0.75rem;
  text-align: left;
  cursor: pointer;
  background: none;
  border: none;
  color: inherit;
  font: inherit;
}

.search-suggestion:hover,
.search-suggestion[aria-selected="true"] {
  background-color: var(--accent, #f3f4f6);
  color: var(--accent-foreground, inherit);
}

.search-suggestion-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-suggestion-badge {
  flex-shrink: 0;
  font-size: 0.6875rem;
  color: var(--muted-foreground, #6b7280);
}

.search-suggestion-all {
  border-top: 1px solid var(--border, #dee2e6);
  font-size: 0.875rem;
  color: var(--muted-foreground, #6b7280);
}

.search-suggestion-empty {
  padding: 0.75rem;
  font-size: 0.875rem;
  color: var(--muted-foreground, #6b7280);
}

/* Index pages center their card grids with this max-width (see the inline
   style on each grid). Page titles and action rows carry this class so they
   center identically and share the grid's left edge on wide screens instead
   of hugging the viewport edge.

   Show/edit/new pages carry it on their top-level blocks for the same reason,
   so navigating from an index doesn't shift the content sideways. Their
   narrower cards and forms keep their own max-w-* inside this column rather
   than on it — putting both on one element would center the card itself
   mid-viewport instead of aligning it with the index's left edge. */
.page-width {
  max-width: calc(5 * 300px + 4 * 1rem);
  margin-inline: auto;
}

/* Environment badge (non-production only): pinned bottom-left so it never
   overlaps the nav, row actions, or the bottom-center undo toast. It
   replaced a fixed top-right corner ribbon that covered Account/Sign out
   and floated over card content. */
.environment-badge {
  position: fixed;
  bottom: 0.75rem;
  left: 0.75rem;
  z-index: 40;
  pointer-events: none;
  background: #e53e3e;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

/* Simple Calendar Styling */
.simple-calendar {
  margin: 0 auto;
  max-width: 100%;
}

.calendar-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  padding: 1rem;
  background-color: #f8f9fa;
  border-radius: 8px;
}

.calendar-title {
  font-size: 1.5rem;
  font-weight: bold;
  color: #333;
}

.calendar-heading nav {
  display: flex;
  gap: 0.5rem;
}

.calendar-heading nav a {
  padding: 0.5rem 1rem;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  text-decoration: none;
  color: #333;
  transition: background-color 0.2s ease;
}

.calendar-heading nav a:hover {
  background-color: #e9ecef;
}

.simple-calendar table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 2px;
  background-color: #f8f9fa;
  border-radius: 8px;
  overflow: hidden;
}

.simple-calendar thead th {
  background-color: #343a40;
  color: white;
  text-align: center;
  padding: 1rem;
  font-weight: bold;
  border: none;
}

.simple-calendar tbody td {
  background-color: white;
  border: 1px solid #dee2e6;
  vertical-align: top;
  width: 14.28%;
  height: 120px;
  padding: 0.75rem;
  position: relative;
}

.simple-calendar tbody td:hover {
  background-color: #f8f9fa;
}

/* Day number styling */
.simple-calendar tbody td {
  font-size: 1rem;
  font-weight: 500;
}

/* Current month days */
.simple-calendar .current-month {
  background-color: white;
}

/* Previous/next month days */
.simple-calendar .prev-month,
.simple-calendar .next-month {
  background-color: #f8f9fa;
  color: #6c757d;
}

/* Today highlighting */
.simple-calendar .today {
  background-color: #e3f2fd !important;
  border: 2px solid #2196f3 !important;
  font-weight: bold;
}

/* Weekend styling */
.simple-calendar .weekend {
  background-color: #fafafa;
}

/* Event styling */
.simple-calendar .event {
  background-color: #007bff;
  color: white;
  padding: 0.25rem;
  margin: 0.25rem 0;
  border-radius: 3px;
  font-size: 0.75rem;
  line-height: 1.2;
}

/* Tags input styling */
.tags-container {
  min-height: 40px;
  border: 1px solid #ced4da;
  border-radius: 0.375rem;
  padding: 0.5rem;
  background-color: #fff;
}

.tags-container:empty {
  padding: 1rem;
}

.tags-container .badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.875rem;
}

.tags-container .btn-close {
  font-size: 0.5em;
  margin-left: 0.25rem;
}

/* Script filter styling */
.script-filter-container {
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 0.5rem;
  padding: 1rem;
}

.filter-suggestions {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border: 1px solid #dee2e6;
}

/* Script card filter animations (data-script-tags attribute for filter controller) */
.card[data-script-tags] {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.card[data-script-tags][style*="display: none"] {
  opacity: 0;
  transform: scale(0.95);
}

/* Calendar Events Styling */
.calendar-legend {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 1rem;
  padding: 1rem;
  background-color: #f8f9fa;
  border-radius: 0.5rem;
  border: 1px solid #dee2e6;
}

/* Also the calendar's filter control (calendar_filter_controller.js), hence a
   real <button>: it's operable by keyboard and announces its own state. */
.legend-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  font-weight: 500;
  background: none;
  border: none;
  padding: 0.25rem 0.5rem;
  margin: -0.25rem -0.5rem;
  border-radius: 0.375rem;
  color: inherit;
  font-family: inherit;
  cursor: pointer;
}

.legend-item:hover {
  background-color: var(--accent, #f3f4f6);
}

/* Filtered out: dimmed, with the swatch hollowed so the state reads without
   relying on opacity alone. */
.legend-item[aria-pressed="false"] {
  opacity: 0.55;
}

.legend-item[aria-pressed="false"] .legend-color {
  background-color: transparent !important;
  border: 1px solid currentColor;
}

.legend-item[aria-pressed="false"] span:last-child {
  text-decoration: line-through;
}

.legend-color {
  width: 16px;
  height: 16px;
  border-radius: 3px;
  border: 1px solid rgba(0,0,0,0.1);
}

.calendar-day {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.day-number {
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.events-container {
  flex: 1;
  overflow-y: auto;
}

.calendar-event {
  margin-bottom: 0.25rem;
  border-radius: 3px;
  font-size: 0.7rem;
  line-height: 1.2;
  transition: opacity 0.2s ease;
}

.calendar-event:hover {
  opacity: 0.8;
}

.event-link {
  display: block;
  padding: 0.2rem 0.3rem;
  text-decoration: none;
  color: inherit;
}

.event-title {
  display: block;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.event-status,
.event-priority {
  display: block;
  font-size: 0.6rem;
  opacity: 0.8;
  text-transform: uppercase;
  margin-top: 0.1rem;
}

/* Prospect follow-up events */
.prospect-event {
  background-color: #4285f4;
  color: white;
}

.legend-color.prospect-event {
  background-color: #4285f4;
}

/* Note due date events with priority colors */
.note-event {
  background-color: #ff9800;
  color: white;
}

.note-event.priority-urgent {
  background-color: #f44336;
}

.note-event.priority-high {
  background-color: #ff5722;
}

.note-event.priority-medium {
  background-color: #ff9800;
}

.note-event.priority-low {
  background-color: #4caf50;
}

.note-event.priority-none {
  background-color: #9e9e9e;
}

.legend-color.note-event {
  background-color: #ff9800;
}

/* Meetings (the Meet page). Purple keeps them distinct from the prospect blue
   and note orange at a glance. */
.meeting-event {
  background-color: #7e57c2;
  color: white;
}

.legend-color.meeting-event {
  background-color: #7e57c2;
}

/* The time the user's own clock reads — the headline of a meeting block. */
.event-time {
  display: block;
  font-weight: 700;
}

/* The wall clock the meeting was agreed in, when it differs from the reader's. */
.event-origin-time {
  display: block;
  font-size: 0.6rem;
  opacity: 0.8;
  margin-top: 0.1rem;
}

/* Person picker on the Meet page (native <dialog>). The explicit margin
   restores the UA's auto-centering, which the global CSS reset removes. */
.person-picker-dialog {
  margin: auto;
  width: 100%;
  max-width: 28rem;
  max-height: 80vh;
  padding: 0;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: var(--radius, 0.5rem);
  background-color: var(--popover, #fff);
  color: var(--popover-foreground, inherit);
  overflow: hidden;
}

.person-picker-dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.5);
}

.person-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border, #e5e7eb);
}

.person-picker-close {
  background: none;
  border: none;
  color: var(--muted-foreground, #6b7280);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 0.25rem;
}

.person-picker-body {
  padding: 1rem 1.25rem 1.25rem;
}

/* The search box reuses .site-nav-search for its icon positioning; that rule
   caps the width for the nav bar, which this dialog doesn't want. */
.person-picker-body .site-nav-search {
  max-width: none;
  margin-bottom: 0.75rem;
}

.person-picker-results {
  max-height: 45vh;
  overflow-y: auto;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: var(--radius, 0.375rem);
}

/* .search-suggestion is styled for the nav dropdown's anchors; here the rows
   are buttons, which don't inherit the surrounding width or text alignment. */
.person-picker-results .search-suggestion {
  justify-content: space-between;
}

/* Responsive card grid shared by the Prospects and Team Members indexes.
   Was an inline style duplicated across both views; the max-width caps the
   grid at five columns so cards don't stretch on ultrawide displays. */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  max-width: calc(5 * 300px + 4 * 1rem);
}

/* Let the browser skip layout and paint for cards scrolled out of view.
   contain-intrinsic-size supplies a placeholder height so the scrollbar stays
   honest; `auto` lets the browser remember each card's real height once it has
   been rendered, since card height varies with how many fields are filled in.
   Scoped to .card-grid rather than .card so modals and one-off cards — where
   containment would fight sticky positioning — are unaffected. */
.card-grid > .card {
  content-visibility: auto;
  contain-intrinsic-size: auto 22rem;
}

/* Pagination (shared/_pagination.html.erb). Button styling comes from
   Basecoat's .btn-sm-* classes; these rules handle layout and the disabled
   edge controls, which are <span>s rather than real buttons. */
.pagination {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin: 2rem auto;
  padding: 0 1rem;
}

.pagination-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
}

.pagination-page {
  min-width: 2.25rem;
  justify-content: center;
}

/* Not real buttons, so Basecoat's :disabled styles don't apply. */
.pagination [aria-disabled="true"] {
  opacity: 0.5;
  pointer-events: none;
}

.pagination-gap {
  padding: 0 0.25rem;
  color: var(--muted-foreground, #6b7280);
  user-select: none;
}

.pagination-summary {
  font-size: 0.875rem;
  color: var(--muted-foreground, #6b7280);
}

/* One DOM serves both layouts. Below Tailwind's sm breakpoint the full row
   would wrap to three lines, so PaginationHelper marks the outer page
   neighbours and the First/Last jumps hide-sm; Prev/Next, the current page and
   its immediate siblings still fit on one line. The helper also balances the
   ellipses across the two layouts, hence a gap can be marked either way. */
@media (max-width: 639px) {
  .pagination-hide-sm {
    display: none;
  }
}

@media (min-width: 640px) {
  .pagination-hide-md {
    display: none;
  }
}

/* Profile Avatar */
.profile-avatar {
  border-radius: 9999px;
  object-fit: cover;
  flex-shrink: 0;
}

.profile-avatar-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #d1d5db;
  color: #374151;
  font-weight: 700;
}

.profile-avatar-sm {
  width: 2rem;
  height: 2rem;
  font-size: 0.8rem;
}

.profile-avatar-md {
  width: 2.5rem;
  height: 2.5rem;
  font-size: 1rem;
}

.profile-avatar-lg {
  width: 3.5rem;
  height: 3.5rem;
  font-size: 1.25rem;
}

/* Photo Upload Dropzone */
.photo-upload-dropzone {
  border: 2px dashed #d1d5db;
  border-radius: 0.5rem;
  padding: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s;
  min-height: 120px;
}

.photo-upload-dropzone:hover {
  border-color: #6366f1;
  background-color: rgba(99, 102, 241, 0.04);
}

.photo-upload-dragover {
  border-color: #6366f1;
  background-color: rgba(99, 102, 241, 0.08);
}

.photo-upload-dropzone > * {
  pointer-events: none;
}

.photo-upload-preview-img {
  width: 5rem;
  height: 5rem;
  border-radius: 9999px;
  object-fit: cover;
}