/*
 * 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 */
button:not(:disabled),
a:not([disabled]),
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,
.cursor-not-allowed {
  cursor: not-allowed;
}

/* Scrollbar width compensation for drawers/modals */
:root {
  --scrollbar-width: 0px;
}

.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 negative margin to pull content over the reserved gutter space */
.scrollbar-compensate {
  scrollbar-gutter: stable;
}

.scrollbar-compensate > * > * {
  margin-right: -10px;
}

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