/** @format */
/**
 * =============================================================================
 *
 * field-help.css
 *
 * Styles for the admin field help system
 * - Help icons next to field labels
 * - Help modals with formatted content
 * - Special colored boxes for examples, notes, and warnings
 *
 * =============================================================================
 */

/* ====== Help Icon Styles ====== */

.field-help-icon {
  color: #337ab7; /* Bootstrap primary blue */
  font-size: 16px;
  margin-left: 6px;
  cursor: pointer;
  transition: color 0.2s ease-in-out;
  vertical-align: middle;
}

.field-help-icon:hover {
  color: #23527c; /* Darker blue on hover */
  text-decoration: none;
}

.field-help-icon:focus {
  outline: 2px solid #337ab7;
  outline-offset: 2px;
}

/* ====== Modal Styles ====== */

.field-help-modal .modal-header {
  background-color: #337ab7;
  color: #ffffff;
  padding: 15px 20px;
  border-bottom: 1px solid #2e6da4;
}

.field-help-modal .modal-title {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
}

.field-help-modal .modal-header .close {
  color: #ffffff;
  opacity: 0.8;
  text-shadow: none;
  font-size: 28px;
  font-weight: 300;
}

.field-help-modal .modal-header .close:hover {
  opacity: 1;
  color: #ffffff;
}

.field-help-modal .modal-body {
  padding: 20px 25px;
  font-size: 14px;
  line-height: 1.6;
  color: #333;
}

.field-help-modal .modal-content {
  border-radius: 4px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}

/* ====== Help Content Formatting ====== */

.field-help-modal p {
  margin-bottom: 12px;
}

.field-help-modal p:last-child {
  margin-bottom: 0;
}

.field-help-modal ul,
.field-help-modal ol {
  margin-bottom: 12px;
  padding-left: 25px;
}

.field-help-modal li {
  margin-bottom: 6px;
}

.field-help-modal code {
  background-color: #f4f4f4;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 2px 6px;
  font-family: 'Courier New', Courier, monospace;
  font-size: 13px;
  color: #c7254e;
}

.field-help-modal strong,
.field-help-modal b {
  font-weight: 600;
}

/* ====== Special Colored Boxes ====== */

.help-example,
.help-note,
.help-warning {
  padding: 12px 15px;
  margin: 12px 0;
  border-left: 4px solid;
  border-radius: 4px;
  font-size: 14px;
}

/* Blue box for examples */
.help-example {
  background-color: #d9edf7;
  border-color: #31708f;
  color: #31708f;
}

.help-example strong {
  color: #1f4e66;
}

/* Yellow box for notes and tips */
.help-note {
  background-color: #fcf8e3;
  border-color: #8a6d3b;
  color: #8a6d3b;
}

.help-note strong {
  color: #66512c;
}

/* Red box for warnings and important info */
.help-warning {
  background-color: #f2dede;
  border-color: #a94442;
  color: #a94442;
}

.help-warning strong {
  color: #843534;
}

/* ====== Responsive Design ====== */

@media (max-width: 768px) {
  .field-help-icon {
    font-size: 14px;
    margin-left: 4px;
  }

  .field-help-modal .modal-body {
    padding: 15px;
    font-size: 13px;
  }

  .field-help-modal .modal-title {
    font-size: 16px;
  }

  .help-example,
  .help-note,
  .help-warning {
    padding: 10px 12px;
    margin: 10px 0;
    font-size: 13px;
  }
}

/* ====== Accessibility ====== */

/* Ensure sufficient contrast for accessibility */
.field-help-modal .modal-body {
  color: #333;
}

/* Keyboard focus indicator */
.field-help-icon:focus-visible {
  outline: 2px solid #337ab7;
  outline-offset: 2px;
  border-radius: 2px;
}

/* Screen reader only text */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ====== Z-Index Management ====== */

/* Ensure help modals appear above other content */
.field-help-modal {
  z-index: 1050; /* Bootstrap modal default */
}

.field-help-modal .modal-backdrop {
  z-index: 1040;
}