/* Generic list wrapper and colour variants
   - .list-wrapper: common container used by Projects, Participant panels, etc.
   - .list-color-amber / .list-color-orange: colour modifiers that control the visible border
   Notes:
   - Keep rules lightweight — colour modifiers apply the visible 1px border + subtle inset ring.
   - Existing legacy classes (.projects-list-wrapper, .participant-list-wrapper) are still respected.
*/
body { margin: 0; background-image: url('/images/bg-tile.png'); background-repeat: repeat; background-position: top left; background-size: auto; }
.container { padding-left: 0 !important; padding-right: 0 !important; }
.list-wrapper {
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  padding: 6px !important;
  background: #ffffff !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.02) !important;
}

/* Amber (Projects) */
.list-color-amber {
  border-color: #e19f1e !important;
  box-shadow: inset 0 0 0 1px rgba(225,159,30,0.03) !important;
}

/* Orange (Participant panels) */
.list-color-orange {
  border-color: #d94f0f !important;
  box-shadow: inset 0 0 0 1px rgba(217,79,15,0.03) !important;
}
/* Blue (Studies) */
.list-color-blue {
  border-color: #05ADE6 !important;
  box-shadow: inset 0 0 0 1px rgba(5,173,230,0.03) !important;
}

/* Backwards-compatibility: ensure legacy classes inherit the generic wrapper */
.projects-list-wrapper { composes: list-wrapper; }
.participant-list-wrapper {
  composes: list-wrapper;
  /* Apply the same visible orange border and inset ring used on Projects */
  border-color: #d94f0f !important;
  box-shadow: inset 0 0 0 1px rgba(217,79,15,0.03) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* Ensure tertiary (purple, underlined) link style applies to project links inside the Studies list */
.studies-container .project-link {
  color: #6940a5 !important;
  text-decoration: underline !important;
}
.studies-container .project-link:hover {
  color: #5a3393 !important;
  text-decoration: underline !important;
}
@tailwind base;
@tailwind components;
@tailwind utilities;
/* Remove top padding on the page main so the header sits flush across all pages (matches Projects view) */
main.p-3 { padding-top: 0 !important; }

:root {
  --selected-accent-width: 4px;
}
/* Tailwind component utilities for AmethystApp
   Converted from @apply usage to explicit CSS so PostCSS/Tailwind builds reliably
*/
@layer components {
  .icon-nav-24 {
    /* Topnav icons: increase to 32x32 as requested */
    width: 32px;
    height: 32px;
    display: inline-block;
    vertical-align: middle;
  }

  .icon-action-22 {
    width: 22px;
    height: 22px;
    display: inline-block;
    vertical-align: middle;
  }

  .icon-header-32 {
    width: 32px;
    height: 32px;
    display: inline-block;
    vertical-align: middle;
  }

  .btn-pill {
    border-radius: 9999px;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
  }

  .projects-toggle-btn {
    border: 1px solid #e19f1e;
    color: #e19f1e;
    background: transparent;
    border-radius: 6px;
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 10px;
    padding-bottom: 10px;
    line-height: 1;
    display: inline-block;
  }
}

/* Small helpers — use explicit hex fallbacks so PostCSS/Tailwind theme() isn't required at runtime */
.text-brand { color: #6940a5; }
.bg-amber { background-color: #e19f1e; color: white; }

/* Keep this file intentionally small - migrate selectors incrementally */

/* Usage examples:
   - Replace inline svg sizing with: <svg class="icon-nav-24"> or <x-flux.icon ... class="icon-action-22" />
   - "Add project" button: use classes "btn-pill bg-white border-brand text-brand hover:bg-brand hover:text-white"
   - Toggle buttons: replace .projects-container .btn-group .projects-toggle-btn styles by applying "projects-toggle-btn" class
*/
/* Nav icon & Projects/Participants fixes
   - Ensure svg icons are fully visible and centered
   - Restore participants hover/active colour
   - Provide a secondary-style "Add project" button (white bg, purple outline & text)
*/
.navbar-nav .nav-link {
  overflow: visible !important;
}

.navbar-nav .nav-link svg,
.navbar-nav .nav-link svg * {
  /* Ensure icons are block-level and centered, but do not force width/height here.
     Per-icon rules (e.g. .nav-icon-projects) should control sizing to preserve aspect ratio. */
  display: block !important;
  margin: 0 auto 4px !important;
  vertical-align: middle !important;
  overflow: visible !important;
}

/* Participants nav icon hover/active colour (highlight) */
.nav-link.nav-icon-participants:hover svg path,
.nav-link.nav-icon-participants.active svg path,
.nav-link.nav-icon-participants[aria-current="page"] svg path {
  /* requested highlight colour */
  fill: #d94f0f !important;
  color: #d94f0f !important;
}

/* Dashboard nav icon hover/active colour */
.nav-link.nav-icon-dashboard:hover svg path,
.nav-link.nav-icon-dashboard.active svg path,
.nav-link.nav-icon-dashboard[aria-current="page"] svg path {
  fill: #128d87 !important;
  color: #128d87 !important;
}

/* Insights nav icon hover/active colour */
.nav-link.nav-icon-insights:hover svg path,
.nav-link.nav-icon-insights.active svg path,
.nav-link.nav-icon-insights[aria-current="page"] svg path {
  fill: #d82650 !important;
  color: #d82650 !important;
}

/* Projects nav icon — ensure full visibility and hover colour */
.nav-link.nav-icon-projects svg,
.nav-link.nav-icon-projects svg * {
  /* Prevent clipping and ensure the SVG scales to the nav icon height.
     Use explicit height and let width be automatic so aspect ratio is preserved. */
  overflow: visible !important;
  height: 24px !important;
  width: auto !important;
  max-height: 24px !important;
  display: block !important;
}
.nav-link.nav-icon-projects:hover svg path,
.nav-link.nav-icon-projects.active svg path,
.nav-link.nav-icon-projects[aria-current="page"] svg path {
  fill: #e19f1e !important;
  color: #e19f1e !important;
}

/* Primary button — match website style (purple bg, white text, rounded) */
.btn-primary {
  background: #6940a5 !important;
  color: #ffffff !important;
  border: 2px solid transparent !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  padding: 0.625rem 1.5rem !important;
  transition: all 0.2s ease !important;
}
.btn-primary:hover,
.btn-primary:focus {
  background: #523080 !important;
  color: #ffffff !important;
}

/* Tertiary button — btn-link in brand purple */
.btn-link {
  color: #6940a5 !important;
  text-decoration: none !important;
  font-weight: 500 !important;
}
.btn-link:hover,
.btn-link:focus {
  color: #523080 !important;
  text-decoration: underline !important;
}

/* btn-link next to btn-primary in form actions should match font size */
.d-flex > .btn-link + .btn-primary,
.d-flex > .btn-primary,
.d-flex > .btn-link {
  font-size: 0.95rem !important;
  padding: 0.625rem 1rem !important;
  line-height: 1.5 !important;
}


/* Match action button sizing — all buttons inside action wrappers use compact size with borders */
.action-btn-wrapper .btn {
  padding: 0.25rem 0.5rem !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  border: 2px solid transparent !important;
  transition: all 0.2s ease !important;
}
.action-btn-wrapper .btn-outline-secondary {
  border-color: #6940a5 !important;
  color: #6940a5 !important;
  background: transparent !important;
}
.action-btn-wrapper .btn-outline-secondary:hover {
  background: #6940a5 !important;
  color: #fff !important;
}
.action-btn-wrapper .btn-outline-danger {
  border-color: #dc3545 !important;
  color: #dc3545 !important;
  background: transparent !important;
}
.action-btn-wrapper .btn-outline-danger:hover {
  background: #dc3545 !important;
  color: #fff !important;
}
.action-btn-wrapper .btn-outline-warning {
  border-color: #e19f1e !important;
  color: #e19f1e !important;
  background: transparent !important;
}
.action-btn-wrapper .btn-outline-warning:hover {
  background: #e19f1e !important;
  color: #fff !important;
}

/* Secondary-style Add Project button (white background, purple border + text) */
/* Use class names: add-project btn-secondary or .btn-secondary.add-project */
.btn-secondary.add-project,
.projects-container .btn-secondary.add-project,
.add-project.btn-secondary {
  background: #ffffff !important;
  border: 1px solid #6940a5 !important;
  color: #6940a5 !important;
  box-shadow: none !important;
  border-radius: 9999px !important;
  padding: 6px 14px !important;
  font-weight: 600 !important;
}

/* Hover / focus: invert to purple bg with white text (consistent with other buttons) */
.btn-secondary.add-project:hover,
.projects-container .btn-secondary.add-project:hover,
.add-project.btn-secondary:hover,
.btn-secondary.add-project:focus {
  background: #6940a5 !important;
  color: #ffffff !important;
  border-color: #6940a5 !important;
}

/* Compatibility helper:
   If templates currently use .btn-primary.add-project, add the .btn-secondary class at render time
   or keep the legacy selector to map to the same visual.
*/
.projects-container .btn-primary.add-project.btn-secondary,
.projects-container .btn-primary.add-project.add-secondary {
  background: #ffffff !important;
  border: 1px solid #6940a5 !important;
  color: #6940a5 !important;
}
/* Topnav visibility fixes: force topnav text/icons and user/org name to be visible on white backgrounds */
.custom-navbar-border {
  color: #6940a5 !important;
}

/* Ensure the brand uses the brand colour but do not override pattern/image fills */
.custom-navbar-border .navbar-brand {
  color: #6940a5 !important;
}
.custom-navbar-border .navbar-brand svg {
  /* Increase logo height to ~48px to match requested size */
  max-height: 48px !important;
  height: auto !important;
  display: inline-block !important;
}

/* Topnav link text and icon paths should use the brand colour so icons using currentColor render correctly */
.custom-navbar-border .nav-link,
.custom-navbar-border .nav-link * {
  color: #6940a5 !important;
  fill: currentColor !important;
}

/* Organisation link and user dropdown should also use the brand purple */
.custom-navbar-border .org-link,
.custom-navbar-border .btn-link.dropdown-toggle,
.custom-navbar-border .btn-link.dropdown-toggle * {
  color: #6940a5 !important;
  fill: currentColor !important;
  font-weight: 600 !important;
}

/* Dropdown toggle (user name) */
.custom-navbar-border .btn-link.dropdown-toggle {
  color: #6940a5 !important;
  font-weight: 600 !important;
}

/* Remove padding from avatar dropdown button */
.custom-navbar-border .user-dropdown-btn {
  padding: 0 !important;
}

/* Message notification icon in researcher topnav */
.custom-navbar-border .msg-notification-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  transition: background .15s ease;
  color: #6940a5;
}
.custom-navbar-border .msg-notification-icon:hover {
  background: rgba(105,64,165,0.08);
  color: #5a3393;
}
.custom-navbar-border .msg-notification-icon svg {
  width: 20px;
  height: 20px;
}
.custom-navbar-border .msg-notification-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  border-radius: 999px;
  background: #d94f0f;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  padding: 0 4px;
}

/* Safety: make sure the navbar brand area has proper height and is visible */
.custom-navbar-border .navbar-brand {
  height: 56px !important;
  overflow: visible !important;
}
/* Strong navbar visibility overrides — ensure nothing hides icons or names for logged-in users
   NOTE: do not override `fill` globally (this breaks logos that use image/pattern fills). */
.custom-navbar-border,
.custom-navbar-border * {
  color: #6940a5 !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Ensure nav links & brand text are displayed and not clipped */
.custom-navbar-border .nav-link,
.custom-navbar-border .nav-link * {
  display: inline-block !important;
  color: #6940a5 !important;
  fill: currentColor !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Ensure dropdown toggle (user name) is visible */
.custom-navbar-border .btn-link.dropdown-toggle,
.custom-navbar-border .btn-link.dropdown-toggle * {
  color: #6940a5 !important;
  fill: currentColor !important;
  visibility: visible !important;
  opacity: 1 !important;
}
/* NOTE: removed the previous rule that forcibly reset rect/use/image fills inside the brand SVG.
   That rule interfered with the inline pattern/image fills used by the logo and caused the logo to
   render as a solid rectangle. We now avoid touching rect/image/use fills; instead we make sure
   the brand SVG is visible and that individual logo image elements are not clipped.

   Additionally: size project & action icons explicitly so they preserve aspect ratio and are not clipped.
*/

/* Ensure brand SVG elements are visible and not clipped (do not override rect/image fills) */
.custom-navbar-border .navbar-brand svg {
  /* Increase logo height to ~48px to match requested size */
  max-height: 48px !important;
  height: auto !important;
  display: inline-block !important;
  overflow: visible !important;
}

/* Projects nav icon: explicit sizing to preserve aspect ratio (prevents cropping) */
.nav-link.nav-icon-projects svg,
.nav-link.nav-icon-projects svg * {
  overflow: visible !important;
  height: 24px !important;
  width: auto !important;
  max-height: 24px !important;
  display: block !important;
}

/* Small action icons on project rows: make edit/archive/unarchive consistent (22px) */
.projects-container .btn-sm[title="Edit project"] svg,
.projects-container .btn-sm[title="Archive project"] svg,
.projects-container .btn-sm[title="Unarchive project"] svg {
  height: 22px !important;
  width: auto !important;
  max-height: 22px !important;
  display: inline-block !important;
  overflow: visible !important;
}

/* Fallback for other small icons to remain compact */
.projects-container .list-group .btn-sm svg,
.projects-container .list-group .btn-sm svg * {
  max-height: 22px !important;
  width: auto !important;
}
/* Archive button font-size override: ensure archive label is readable (16px) */
.projects-container .btn-outline-danger,
.projects-container .btn-sm.btn-outline-danger {
  font-size: 16px !important;
  /* Keep existing compact padding but allow slightly larger text */
  padding: 5px 10px !important;
  line-height: 1 !important;
}
/* Participant panels — visual parity with Projects list
   - Use the same amber highlight as Projects (#e19f1e)
   - Adds outer border, neutral dividers, and consistent action button sizing
   - Targets .participant-panels-container (add this class to the Participant Panels wrapper if not present)
*/
.participant-panels-container .participant-list-wrapper {
  /* outer border removed to avoid double-border when templates also apply a wrapper */
  border: none !important;
  outline: none !important;
  border-radius: 10px !important;
  padding: 6px 0 !important;
/* Participant panels: remove top spacing so the header and page heading sit flush (match Projects) */
.participant-panels-container {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* If the participant panels page uses main.p-3, ensure it has no top padding */
.participant-panels-container main.p-3,
.participant-panels-container .p-3 {
  padding-top: 0 !important;
/* Override Bootstrap vertical spacing utilities applied on the participant panels wrapper.
   The template uses `py-4` which sets padding-top / padding-bottom; remove the top padding so
   the header and page heading sit flush like Projects. Keep bottom padding unless templates
   require it — we only reset the top here. */
.participant-panels-container.py-4,
.participant-panels-container.container.py-4,
.participant-panels-container.py-3,
.participant-panels-container.py-2 {
  padding-top: 0 !important;
}
}

/* Remove extra top margin/padding from page headings inside participant panels */
.participant-panels-container h1,
.participant-panels-container h2,
.participant-panels-container .page-heading,
.participant-panels-container .page-header {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
  background: #ffffff !important;
  box-shadow: none !important;
}

/* Participant panels use a table for rows — apply neutral dividers between rows */
.participant-panels-container table {
  border-collapse: collapse;
  width: 100%;
}
.participant-panels-container tbody tr {
  border-bottom: 1px solid #e9ecef;
}
.participant-panels-container tbody tr:last-child {
  border-bottom: none;
}

/* Ensure header divider and cell padding matches Projects look */
.participant-panels-container thead tr {
  border-bottom: 1px solid #e9ecef;
}
.participant-panels-container th,
.participant-panels-container td {
  padding: 12px 12px !important;
  vertical-align: middle !important;
}

/* Make the "selected" state use the amber highlight for the panels list where needed */
.participant-panels-container tbody tr.selected,
.participant-panels-container tbody tr.active {
  background: rgba(225,159,30,0.06) !important;
  border-left: var(--selected-accent-width) solid #e19f1e !important;
  padding-left: 10px !important;
}

/* Action buttons (Edit / Upload / Pause) — match Project action styles */
.participant-panels-container .btn-sm {
  padding: 5px 10px !important;
  font-size: 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  line-height: 1 !important;
}

/* Ensure small action SVGs keep aspect ratio and are the same visual size as Projects */
.participant-panels-container .btn-sm svg,
.participant-panels-container .btn-sm svg * {
  height: 22px !important;
  width: auto !important;
  max-height: 22px !important;
  display: inline-block !important;
  vertical-align: middle !important;
  overflow: visible !important;
}

/* Map outline-secondary actions to project-like purple where used (edit/upload) */
.participant-panels-container .btn-outline-secondary {
  border-color: #6940a5 !important;
  color: #6940a5 !important;
}
.participant-panels-container .btn-outline-secondary:hover,
.participant-panels-container .btn-outline-secondary:focus {
  background: #6940a5 !important;
  color: #fff !important;
  border-color: #6940a5 !important;
}

/* Pause button / Pause state — use outline-danger for red semantic or outline-warning if amber is desired.
   Prefer controlling color from templates.
*/

/* Small helper: if templates are not yet adding .participant-panels-container,
   you can scope these rules to the existing Livewire wrapper by adding the class to:
   resources/views/livewire/participant-panels.blade.php outer <div class="..."> */
/* Make project selected-left-accent match participant panels thickness (visual parity) */
.projects-container .list-group .list-group-item.selected,
.projects-container .list-group .list-group-item.active {
  border-left: var(--selected-accent-width) solid #e19f1e !important;
  padding-left: 10px !important; /* match visual inset used for panels */
}
/* Force participant panels wrapper to use orange only (override other .projects-list-wrapper rules)
*/
.participant-list-wrapper.projects-list-wrapper,
.participant-list-wrapper.projects-list-wrapper > .list-group,
.participant-list-wrapper.projects-list-wrapper > .list-group .list-group-item {
  /* disable forced orange outline to prevent duplicate borders;
     keep background/box-shadow neutral so templates can control visual wrapper */
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: #ffffff !important;
}

/* Ensure no outer inset/outer ring from box-shadow or outline remains */
.participant-list-wrapper.projects-list-wrapper * {
  box-shadow: none !important;
  outline: none !important;
}
/* Participant panels: participant count pill — use orange color instead of amber */
.participant-list-wrapper .project-count {
  display: inline-block !important;
  padding: 4px 10px !important;
  font-size: 12px !important;
  border-radius: 999px !important;
  background: #d94f0f !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  margin-right: 6px !important;
  border: none !important;
}
/* Force-remove any duplicate outer borders on list wrappers (safety override)
   NOTE: only remove borders for participant-list-wrapper here. Projects/studies panels
   should be allowed to display their coloured border variants.
*/
.participant-list-wrapper {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}
/* Authoritative override: ensure legacy participant wrapper displays the orange border */
.participant-list-wrapper {
  border: 1px solid #d94f0f !important;
  box-shadow: inset 0 0 0 1px rgba(217,79,15,0.03) !important;
  outline: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* Schedule tab: ensure calendar/flux icons render at 32px */
.study-schedule .calendar-icon svg,
.study-schedule .calendar-icon * {
  width: 32px !important;
  height: 32px !important;
  max-width: 32px !important;
  max-height: 32px !important;
  display: inline-block !important;
  vertical-align: middle !important;
}
/* Make top navigation slightly translucent */
nav.navbar.bg-white {
  background-color: rgba(255,255,255,0.75) !important;
}
/* Ensure participant panel orange framed wrapper is enforced (high specificity + important)
   This addresses cases where earlier rules remove borders; the selector below matches the
   exact wrapper structure used in the template and forces the orange border + inset ring.
*/
.participant-panels-container .list-wrapper.participant-list-wrapper.list-color-orange {
  border: 1px solid #d94f0f !important;
  box-shadow: inset 0 0 0 1px rgba(217,79,15,0.03) !important;
  border-radius: 10px !important;
  background: #ffffff !important;
}
/* Enforce blue-framed panel for study create/edit (high specificity to override other wrappers) */
.studies-container .list-wrapper.projects-list-wrapper.list-color-blue {
  border: 1px solid #05ADE6 !important;
  box-shadow: inset 0 0 0 1px rgba(5,173,230,0.03) !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  padding: 6px !important;
}
/* Force blue panel border for study pages (placed at file end to override later rules) */
.studies-container .list-wrapper.projects-list-wrapper.list-color-blue,
.list-wrapper.projects-list-wrapper.list-color-blue {
  border: 1px solid #05ADE6 !important;
  box-shadow: inset 0 0 0 1px rgba(5,173,230,0.03) !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  padding: 6px !important;
}
/* ---------------------------------------------------------------------------
   Topnav: sticky behaviour + hover-only labels (tooltips) positioned below
   - Tooltips use white text on charcoal background #323236
   - Tooltips only appear on hover/focus-capable pointers; fall back to focus for keyboard users
   - Main receives top padding so page content scrolls beneath the sticky topnav
   --------------------------------------------------------------------------- */
nav.topnav-sticky {
  position: sticky;
  top: 0;
  z-index: 1040; /* above most content, below modals */
  background: rgba(255,255,255,0.95); /* slightly opaque */
  -webkit-backdrop-filter: saturate(120%) blur(4px);
  backdrop-filter: saturate(120%) blur(4px);
  /* keep existing border/padding visuals */
}

/* ensure container still keeps spacing but reduce vertical bounce when sticky */
nav.topnav-sticky .container {
  padding-top: 6px;
  padding-bottom: 6px;
}

/* Make main content leave room for sticky nav (adjust if nav height changes) */
nav.topnav-sticky + main,
nav.topnav-sticky + .container,
nav.topnav-sticky + .page-wrapper {
  margin-top: calc(var(--topnav-height) + var(--alert-banner-h, 0px) + var(--topnav-gap, 36px)) !important;
  padding-top: 0 !important;
}

/* Tooltip (label below icon) styling */
.navbar-nav .nav-link {
  position: relative;
  /* ensure hover area remains intact */
  -webkit-tap-highlight-color: transparent;
}

/* hidden by default */
.navbar-nav .nav-tooltip {
  display: none;
  position: absolute;
  top: calc(100% + 8px); /* position below the nav item */
  left: 50%;
  transform: translateX(-50%);
  background: #323236; /* charcoal requested */
  color: #ffffff;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 0.85rem;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
  z-index: 2000;
  pointer-events: none; /* avoid intercepting hover */
  opacity: 0;
  transition: opacity 0.18s ease, transform 0.18s ease;
  transform-origin: top center;
}

/* reveal tooltip on hover for devices that support hover */
@media (hover: hover) and (pointer: fine) {
  .navbar-nav .nav-link:hover .nav-tooltip,
  .navbar-nav .nav-link:focus .nav-tooltip {
    display: block;
    pointer-events: auto;
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* keep tooltips accessible for keyboard focus too */
.navbar-nav .nav-link:focus .nav-tooltip,
.navbar-nav .nav-link:active .nav-tooltip {
  display: block;
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* small caret (optional) — subtle pointer below tooltip */
.navbar-nav .nav-tooltip::after {
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px 6px 0 6px;
  border-style: solid;
  border-color: #323236 transparent transparent transparent;
  width: 0;
  height: 0;
}

/* Ensure tooltips don't overflow the viewport on small screens */
@media (max-width: 480px) {
  .navbar-nav .nav-tooltip {
    font-size: 0.8rem;
    padding: 5px 6px;
  }
}

/* Keep existing inline label fallbacks hidden (in case any templates still render them) */
/* These selectors are conservative — they only hide immediate text nodes replaced by .nav-tooltip */
.navbar-nav .nav-link > .nav-text,
.navbar-nav .nav-link > span.label,
.navbar-nav .nav-link > small {
  display: none !important;
}
/* ---------------------------------------------------------------------------
   Topnav — high-priority overrides (appended to ensure precedence)
   Fixes:
   1) Hide tooltip labels by default and reveal only on hover/focus (uses !important)
   2) Make the topnav fixed at the top so page content scrolls beneath it
   3) Ensure the organisation name looks like a link (underline + pointer)
   --------------------------------------------------------------------------- */

:root { --topnav-height: 60px; }
:root { --topnav-gap: 36px; }

nav.topnav-sticky {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 1040 !important;
  background: rgba(255,255,255,0.85) !important;
  border-bottom: 1px solid rgba(0,0,0,0.08) !important;
  -webkit-backdrop-filter: saturate(120%) blur(4px) !important;
  backdrop-filter: saturate(120%) blur(4px) !important;
}

/* Alert banner: fixed above the topnav */
[data-alert-banner] ~ nav.topnav-sticky {
  top: var(--alert-banner-h, 0px) !important;
}

/* keep container vertical spacing tidy when fixed */
nav.topnav-sticky .container {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}

/* Reserve space at top of page so initial content is not hidden under the fixed nav.
   Use margin-top instead of padding-top to avoid layout shift during Livewire navigation. */
main, body > .container, .page-wrapper {
  margin-top: calc(var(--topnav-height) + var(--alert-banner-h, 0px) + var(--topnav-gap, 36px)) !important;
  padding-top: 0 !important;
}

/* Tooltip: hidden by default (authoritative) */
.navbar-nav .nav-tooltip {
  display: none !important;
  position: absolute !important;
  top: calc(100% + 4px) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background: #323236 !important;
  color: #ffffff !important;
  padding: 6px 8px !important;
  border-radius: 6px !important;
  font-size: 0.85rem !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25) !important;
  z-index: 2000 !important;
  pointer-events: none !important;
  opacity: 0 !important;
  transition: opacity 0.18s ease, transform 0.18s ease !important;
  transform-origin: top center !important;
}

/* Reveal tooltip when hovering (pointer-capable devices) */
@media (hover: hover) and (pointer: fine) {
  .navbar-nav .nav-link:hover .nav-tooltip,
  .navbar-nav .nav-link:focus .nav-tooltip {
    display: block !important;
    pointer-events: auto !important;
    opacity: 1 !important;
    transform: translateX(-50%) translateY(0) !important;
  }
}

/* Accessibility: reveal on keyboard focus / active as well */
.navbar-nav .nav-link:focus .nav-tooltip,
.navbar-nav .nav-link:active .nav-tooltip {
  display: block !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateX(-50%) translateY(0) !important;
}

/* Tooltip caret */
.navbar-nav .nav-tooltip::after {
  content: "" !important;
  position: absolute !important;
  top: -6px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  border-width: 6px 6px 0 6px !important;
  border-style: solid !important;
  border-color: #323236 transparent transparent transparent !important;
  width: 0 !important;
  height: 0 !important;
}

/* Small-screen sizing safety */
@media (max-width: 480px) {
  .navbar-nav .nav-tooltip {
    font-size: 0.8rem !important;
    padding: 5px 6px !important;
  }
}

/* Hide possible legacy inline label fallbacks (conservative) */
.navbar-nav .nav-link > .nav-text,
.navbar-nav .nav-link > span.label,
.navbar-nav .nav-link > small {
  display: none !important;
}

/* Make the organisation link visually identifiable */
.custom-navbar-border .org-link {
  text-decoration: underline !important;
  cursor: pointer !important;
  color: #6940a5 !important;
}
/* Remove tooltip caret (user requested). Keep gap small (4px) so tooltip sits just below icon */
.navbar-nav .nav-tooltip::after {
  display: none !important;
}
/* Tighten tooltip positioning: anchor tooltip to the icon wrapper and remove extra svg bottom margin
   - Ensure the icon wrapper is the positioning context for the tooltip
   - Remove the default 4px svg bottom margin so the tooltip sits immediately below icon
   - Use a 4px gap between icon and tooltip as requested
*/
.nav-icon-wrapper {
  position: relative !important;
  display: inline-block !important;
  line-height: 0 !important; /* avoid extra inline spacing */
}

/* Remove the 4px bottom margin applied globally so our tooltip gap is predictable */
.nav-icon-wrapper > svg,
.nav-icon-wrapper .icon-nav-24,
.nav-icon-wrapper svg,
.nav-icon-wrapper svg * {
  margin-bottom: 0 !important;
  display: block !important;
}

/* Position tooltip relative to the icon wrapper and use a 4px gap */
.nav-icon-wrapper .nav-tooltip {
  position: absolute !important;
  top: calc(100% + 4px) !important; /* 4px gap below icon */
  left: 50% !important;
  transform: translateX(-50%) !important;
  pointer-events: none !important;
}

/* When revealed, ensure it doesn't pop too far (keep the transform simple) */
@media (hover: hover) and (pointer: fine) {
  .nav-icon-wrapper:hover .nav-tooltip,
  .nav-icon-wrapper:focus-within .nav-tooltip {
    opacity: 1 !important;
    transform: translateX(-50%) translateY(0) !important;
    pointer-events: auto !important;
  }
}

/* Accessibility: allow tooltip on focus of child link */
.nav-icon-wrapper :focus + .nav-tooltip,
.nav-icon-wrapper :focus-within .nav-tooltip {
  opacity: 1 !important;
  pointer-events: auto !important;
}
/* Participant list card styles — added to support card layout in participant-list.blade.php */
.participant-card {
  border: 1px solid #e9ecef;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(16,24,40,0.03);
  background: #ffffff;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.participant-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(16,24,40,0.06);
}
.participant-card .card-body {
  display: flex;
  flex-direction: column;
  min-height: 160px;
}
.participant-card .badge {
  font-size: 0.75rem;
  padding: 0.35rem 0.5rem;
  border-radius: 999px;
}
.participant-card .text-muted.small {
  color: #6b6b6b !important;
}
.participant-card .btn-link {
  color: inherit;
  opacity: 0.9;
}
.participant-card.paused {
  background: rgba(250, 243, 224, 0.8); /* subtle amber tint for paused participants */
  border-color: rgba(225,159,30,0.25);
}
@media (max-width: 576px) {
  .participant-card .card-body { min-height: 120px; }
}
/* Enforce orange border for participant lists (override any amber/project wrappers)
   Ensures participant-list wrappers show the intended orange (#d94f0f) border and inset ring.
   Placed last to take precedence over earlier .projects-list-wrapper/amber rules.
*/
.participant-list-wrapper,
.list-wrapper.participant-list-wrapper,
.participant-list-wrapper.projects-list-wrapper,
.participant-list-wrapper.list-color-amber,
.participant-list-wrapper > .list-group,
.participant-list-wrapper > .list-group .list-group-item {
  border: 1px solid #d94f0f !important;
  box-shadow: inset 0 0 0 1px rgba(217,79,15,0.03) !important;
  background: #ffffff !important;
}
/* Participant list page override — force orange border for participant lists/cards
   This is appended to the public overrides so it takes precedence over earlier amber rules.
*/
.participant-panels-container .projects-list-wrapper,
.participant-panels-container .projects-list-wrapper > .list-group,
.participant-panels-container .participant-list-wrapper,
.participant-list-wrapper,
.participant-list-wrapper > .list-group,
.participant-list-wrapper > .list-group .list-group-item,
.participant-card {
  border: 1px solid #d94f0f !important;
  box-shadow: inset 0 0 0 1px rgba(217,79,15,0.03) !important;
  background: #ffffff !important;
}
/* High-specificity override: ensure participant list wrapper shows orange even if other amber rules apply.
   Targets combinations likely present in templates (e.g. element having both .projects-list-wrapper and .participant-list-wrapper,
   or being inside a .projects-container). Placed last so it takes precedence.
*/
.projects-container .participant-list-wrapper.projects-list-wrapper,
.participant-panels-container .participant-list-wrapper.projects-list-wrapper,
.participant-list-wrapper.projects-list-wrapper,
.participant-list-wrapper.projects-list-wrapper > .list-group,
.participant-panels-container .projects-list-wrapper.participant-list-wrapper {
  border: 1px solid #d94f0f !important;
  box-shadow: inset 0 0 0 1px rgba(217,79,15,0.03) !important;
  background: #ffffff !important;
}
/* Force orange when participant wrapper also includes .list-color-amber */
.participant-list-wrapper.list-color-amber,
.projects-container .participant-list-wrapper.list-color-amber,
.container.projects-container .participant-list-wrapper.list-color-amber,
.participant-list-wrapper.list-color-amber > .list-group {
  border: 1px solid #d94f0f !important;
  box-shadow: inset 0 0 0 1px rgba(217,79,15,0.03) !important;
  background: #ffffff !important;
}
/* Remove inset ring / double-border for participant lists when orange border is intended */
.participant-list-wrapper.list-color-orange,
.participant-list-wrapper.list-color-orange > .list-group,
.participant-list-wrapper[style*="#d94f0f"] {
  box-shadow: none !important;
  outline: none !important;
  border: 1px solid #d94f0f !important;
}

/* Card sort category input placeholder styling */
.form-control::placeholder {
  color: #6c757d !important;
  opacity: 1 !important;
}

/* More specific styling for card sort category inputs */
.card-sort-config .form-control::placeholder {
  color: #495057 !important;
  opacity: 1 !important;
}

/* Even more specific styling for inputs that bind to card sort categories */
input[wire-model*="cardSortBlockData"][wire-model*="categories"]::placeholder {
  color: #495057 !important;
  opacity: 1 !important;
}