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

/* Shared UI component styles */
@layer components {
  .btn-primary {
    @apply inline-flex items-center justify-center min-h-touch px-4 py-2 md:min-h-[40px] md:px-3 md:py-1.5 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition-colors;
  }
  
  .btn-secondary {
    @apply inline-flex items-center justify-center min-h-touch px-4 py-2 md:min-h-[40px] md:px-3 md:py-1.5 bg-gray-700 hover:bg-gray-600 text-white font-medium rounded-lg transition-colors;
  }
  
  .card {
    @apply bg-gray-800 border border-gray-700 rounded-lg shadow-sm;
  }
  
  .form-input {
    @apply w-full min-h-touch px-3 py-2 md:min-h-[40px] bg-gray-700 border border-gray-600 text-white placeholder-gray-400 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500;
  }
  
  .form-label {
    @apply block text-sm font-medium text-gray-300 mb-2;
  }
}

/* Profile flyout / dropup (sidebar-flyout Stimulus controller) — used by
   the Admin Portal. The identity row in the nav rail footer
   (desktop) or the mobile menu footer triggers a floating panel carrying the
   cross-portal links, Dev Tools, and Log out. */

/* Mobile menu footer: the profile section is a floating dropup panel
   (sidebar-flyout controller, top placement) — the identity row is the
   trigger; the panel carries the cross-portal links, Dev Tools, and Log out.
   The chevron points up at rest and flips while the panel is open; the
   trigger gets a pressed-surface treatment (tap feedback plus a held state
   while open) in the rail's white-alpha language. */
.mobile-profile-trigger:active {
  background-color: rgba(255, 255, 255, 0.1);
}

/* Held-open state: mirrors the .side-nav-rail-scoped override on the same
   button state further down — both out-specify the shared gray-700
   .sidebar-flyout-open rule to keep the trigger on the surface's
   white-alpha language while the panel is open. Don't collapse them into
   the shared rule. */
.mobile-menu-footer .sidebar-flyout-open > [data-sidebar-flyout-target="button"] {
  background-color: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.mobile-profile-trigger-chevron {
  transition: transform 150ms ease;
}

.sidebar-flyout-open .mobile-profile-trigger-chevron {
  transform: rotate(180deg);
}

/* Open-flyout: keep the trigger's hover treatment active so users see a
   continuous visual link between the open menu and its trigger. The
   sidebar-flyout controller toggles .sidebar-flyout-open on its host element
   in open()/close(). */
.sidebar-flyout-open > [data-sidebar-flyout-target="button"],
.sidebar-flyout-open > .relative > [data-sidebar-flyout-target="button"] {
  background-color: rgb(55 65 81); /* gray-700 — matches hover:bg-gray-700 */
  color: white;
}

/* Rail profile flyout: while the menu is open, hold the trigger on the rail's
   white-alpha hover overlay instead of gray-700 so the open state speaks the
   rail's visual language on the midnight-navy surface. */
.side-nav-rail .sidebar-flyout-open > .relative > [data-sidebar-flyout-target="button"] {
  background-color: rgba(255, 255, 255, 0.1);
  color: #fff;
}

/* Rail profile flyout surface: consume the rail's custom properties instead
   of hardcoded grays so the menu matches each portal's rail palette. The
   left transition mirrors the rail's width transition (200ms ease, see
   side_nav_rail_component.css): the menu opens pre-anchored to the rail's
   expanded edge, and any residual re-anchor slides with the rail instead of
   teleporting. Opening from hidden does not animate — transitions don't run
   from display: none. */
.sidebar-flyout-menu {
  background: var(--side-nav-rail-surface);
  border-color: var(--side-nav-rail-border);
}

/* Scoped to the right placement: the slide contract mirrors the rail-edge
   anchor; the "top" placement never participates in the rail transition. */
.sidebar-flyout-menu.placement-right {
  transition: left 200ms ease;
}

/* Flyout menu hitbox bridge.
   The sidebar-flyout controller sets either .placement-right or .placement-top
   on its menu target. We add a transparent pseudo-element on the side facing
   the trigger so the cursor's hover hitbox is continuous across the visible
   gap between trigger and menu. Pseudo-elements participate in hit-testing as
   part of their parent, so cursor over the bridge counts as cursor over the
   menu (a descendant of the controller element) — which means mouseleave on
   the controller does not fire mid-transit, and we can close instantly. */
[data-sidebar-flyout-target="menu"].placement-right::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -16px;
  width: 16px;
}
[data-sidebar-flyout-target="menu"].placement-top::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -16px;
  height: 16px;
}

/* Cursor utilities for interactive and disabled elements.
   `:not([aria-disabled="true"])` keeps aria-disabled controls (which stay
   natively enabled so they retain focus — e.g. the seats stepper buttons) out
   of the pointer rule; otherwise this unlayered selector would beat Tailwind's
   layered `aria-disabled:cursor-not-allowed` utility. */
button:not(:disabled):not([aria-disabled="true"]),
a:not([disabled]):not([aria-disabled="true"]),
input[type="submit"]:not(:disabled),
input[type="button"]:not(:disabled),
input[type="reset"]:not(:disabled),
select:not(:disabled),
.btn,
.cursor-pointer {
  cursor: pointer;
}

button:disabled,
input:disabled,
select:disabled,
[aria-disabled="true"],
.cursor-not-allowed {
  cursor: not-allowed;
}

/* Scrollbar width compensation for drawers/modals */
:root {
  --scrollbar-width: 0px;
  /* Width a `scrollbar-gutter: stable` scroll container actually reserves:
     ~8–10px for classic scrollbars, 0 for overlay scrollbars (macOS default,
     touch). Published by dashboard JS (`setReservedScrollbarWidth`); 0 is the
     safe fallback so compensation never over-shifts before JS runs or where the
     variable is unset. */
  --reserved-scrollbar: 0px;
  /* How much of the reserved scrollbar gutter to leave UNTRIMMED when a scroll
     panel trims its padding by `--reserved-scrollbar` (so cards keep their design
     width). Keeping a few px prevents a card edge from sitting flush against — and
     being clipped by — a scrollbar that some browsers paint slightly wider than the
     reserved gutter. Gated through `max(0px, reserved - safety)` at each use site,
     so overlay-scrollbar contexts (reserved 0) are unaffected. */
  --scrollbar-trim-safety: 3px;
}

.drawer-open {
  overflow: hidden !important;
}

@media (min-width: 768px) {
  .drawer-open {
    padding-right: var(--scrollbar-width, 0px) !important;
  }
}

/* Scrollbar compensation for content that needs consistent width
   Apply to scrolling containers to reserve space for scrollbar, preventing layout shift
   The scrollbar-gutter must be on the element with overflow, not its children
   The grandchild gets a negative margin to pull content over the reserved gutter.
   The pull MUST equal the gutter the browser actually reserves (`--reserved-scrollbar`),
   not a hardcoded 10px: on overlay scrollbars the gutter is 0, so a fixed -10px
   would drag content 10px past the right edge ("missing right-side padding"). */
.scrollbar-compensate {
  scrollbar-gutter: stable;
}

.scrollbar-compensate > * > * {
  margin-right: calc(-1 * var(--reserved-scrollbar, 0px));
}

/* ============================================
   TinyMCE Editor & Agreement Preview Styling
   ============================================ */

/* ============================================
   Legal Document Content Styling
   Used for agreement/amendment rendering across:
   - TinyMCE editor (via content_style)
   - Preview tabs
   - View modals
   - Dashboard displays
   
   NOTE: Keep in sync with TinyMCE content_style in
   tinymce_editor_controller.js
   ============================================ */
/* Make TinyMCE fill available height in flex containers */
/* Note: min-height is set via inline style from component (default 300px) */
.legal-document-editor {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.legal-document-editor .tox.tox-tinymce {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.legal-document-editor .tox .tox-editor-container {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.legal-document-editor .tox .tox-sidebar-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.legal-document-editor .tox .tox-edit-area {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.legal-document-editor .tox .tox-edit-area__iframe {
  flex: 1;
  height: 100% !important;
}

/* Editor container styling */
.tox.tox-tinymce {
  border-radius: 0.5rem !important;
}

/* Focus effect on the entire TinyMCE container (using JS-added class since iframe blocks :focus-within) */
.tinymce-focused .tox.tox-tinymce {
  border-color: #3b82f6 !important; /* blue-500 */
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5) !important; /* blue-500 ring */
}

/* Remove default focus indicators from inner TinyMCE elements */
.tox .tox-edit-area,
.tox .tox-edit-area:focus,
.tox .tox-edit-area:focus-within,
.tox .tox-edit-area__iframe,
.tox .tox-edit-area__iframe:focus,
.tox .tox-sidebar-wrap,
.tox .tox-sidebar-wrap:focus-within {
  outline: none !important;
  box-shadow: none !important;
}

.tox:not(.tox-tinymce-inline) .tox-editor-header {
  box-shadow: none !important;
}

/* Hide pseudo-elements that TinyMCE uses for focus ring */
.tox .tox-edit-area::before,
.tox .tox-edit-area::after {
  display: none !important;
}

/* Primary button styling */
.tox .tox-button:not(.tox-button--secondary) {
  background-color: #3b82f6 !important; /* blue-500 */
  border-color: #3b82f6 !important;
}

.tox .tox-button:not(.tox-button--secondary):hover {
  background-color: #2563eb !important; /* blue-600 */
}

/* Active toolbar button styling */
.tox .tox-tbtn--enabled,
.tox .tox-tbtn--enabled:hover {
  background-color: #3b82f6 !important; /* blue-500 */
  color: white !important;
}