@tailwind base;
@tailwind components;
@tailwind utilities;

/* TomSelect - Match form input styling */
.ts-wrapper {
  @apply mt-1;
  width: 100% !important;
}

.ts-wrapper .ts-control {
  @apply block w-full rounded-md border-gray-300 shadow-sm py-2 px-3 text-base;
  @apply focus:border-indigo-500 focus:ring-indigo-500;
  background-image: none !important;
  min-height: 42px;
  height: auto;
}

/* Selected item as blue badge with X */
.ts-wrapper .ts-control .item {
  @apply bg-indigo-100 text-indigo-800 rounded-md px-2 py-1 text-sm font-medium inline-flex items-center gap-1;
}

.ts-wrapper .ts-control .item .remove {
  @apply text-indigo-600 hover:text-indigo-800 cursor-pointer ml-1;
  font-size: 14px;
  line-height: 1;
}

.ts-wrapper .ts-control .item .remove:hover {
  @apply text-red-600;
}

.ts-wrapper.focus .ts-control {
  @apply border-indigo-500 ring-1 ring-indigo-500;
}

.ts-wrapper .ts-control input {
  @apply text-base flex-grow;
  width: 100% !important;
}

.ts-wrapper .ts-control input::placeholder {
  @apply text-gray-400;
  text-overflow: ellipsis;
}

.ts-wrapper .ts-dropdown {
  @apply mt-1 rounded-md border border-gray-300 shadow-lg bg-white z-50;
}

.ts-wrapper .ts-dropdown .ts-dropdown-content {
  @apply max-h-60 overflow-y-auto;
}

.ts-wrapper .ts-dropdown .option {
  @apply py-2 px-3 text-sm text-gray-900 cursor-pointer;
}

.ts-wrapper .ts-dropdown .option:hover,
.ts-wrapper .ts-dropdown .option.active {
  @apply bg-indigo-50 text-indigo-900;
}

.ts-wrapper .ts-dropdown .option.selected {
  @apply bg-indigo-100;
}

.ts-wrapper .ts-dropdown .create {
  @apply py-2 px-3 text-sm text-indigo-600 font-medium cursor-pointer border-t border-gray-200;
}

.ts-wrapper .ts-dropdown .create:hover {
  @apply bg-indigo-50;
}

.ts-wrapper .ts-dropdown .no-results {
  @apply py-2 px-3 text-sm text-gray-500;
}

/* Trix editor customizations - Word-like look, A4 size */
trix-editor {
  width: 100%;
  min-height: 1000px; /* Approximate A4 content height */
  padding: 60px 80px;
  margin: 0 auto;
  background-color: white;
  box-shadow: none;
  font-family: Arial, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: #000;
  border: none !important;
  outline: none !important;
}

trix-toolbar {
  @apply mb-4;
  background: white;
  padding: 8px 12px;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

trix-toolbar .trix-button-group {
  @apply border-gray-200;
}

/* Trix editor content styles */
trix-editor h1 {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 16px;
  margin-top: 24px;
  color: #000;
}

trix-editor strong {
  font-weight: bold;
}

trix-editor em {
  font-style: italic;
}

trix-editor del {
  text-decoration: line-through;
}

trix-editor a {
  color: #4f46e5;
  text-decoration: underline;
}

trix-editor blockquote {
  border-left: 4px solid #d1d5db;
  padding-left: 16px;
  font-style: italic;
  color: #4b5563;
  margin: 16px 0;
}

trix-editor pre {
  background: #f3f4f6;
  padding: 16px;
  border-radius: 4px;
  font-family: monospace;
  font-size: 11px;
  overflow-x: auto;
  margin: 16px 0;
}

trix-editor ul {
  list-style-type: disc;
  list-style-position: inside;
  margin: 8px 0 8px 16px;
}

trix-editor ol {
  list-style-type: decimal;
  list-style-position: inside;
  margin: 8px 0 8px 16px;
}

trix-editor li {
  margin: 4px 0;
}

trix-editor p {
  margin-bottom: 8px;
}

/* Contract Preview - Force black text */
.contract-preview-content,
.contract-preview-content * {
  color: #000 !important;
}

/* Trix Editor Styling - Indigo toolbar */
.trix-editor-wrapper trix-toolbar {
  @apply bg-indigo-50 border-indigo-200;
}

.trix-editor-wrapper trix-toolbar .trix-button-group {
  @apply border-indigo-200;
}

.trix-editor-wrapper trix-toolbar .trix-button {
  @apply text-gray-700 hover:bg-indigo-100;
}

.trix-editor-wrapper trix-toolbar .trix-button.trix-active {
  @apply bg-indigo-200 text-indigo-900;
}

.trix-editor-wrapper trix-editor {
  @apply bg-white;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */