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

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