/* ================================================================================================
// 	File Name: Style.scss
// 	Description: RTL Style for customization.
// 	----------------------------------------------------------------------------------------------
// 	Item Name: Chameleon Admin - Modern Bootstrap 4 WebApp & Dashboard HTML Template + UI Kit
// 	Version: 1.0
// 	Author: ThemeSelection
// 	Author URL: https://themeselection.com/
// ================================================================================================

NOTE:
------
A FILE FOR RTL SUPPORT RELATED ONLY
PLACE HERE YOUR OWN SCSS CODES AND IF NEEDED, OVERRIDE THE STYLES FROM THE OTHER STYLESHEETS.
WE WILL RELEASE FUTURE UPDATES SO IN ORDER TO NOT OVERWRITE YOUR STYLES IT'S BETTER LIKE THIS.  */

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
.btn,
.card-title,
.content-header-title,
.navigation,
h1,
h2,
h3,
h4,
h5,
h6,
body,
p {
  letter-spacing: 0px !important;
}

.ql-editor {
  text-align: right !important;
}

/* Quill Editor RTL Support & Enhanced UI/UX */
.quill-editor-wrapper {
  margin-bottom: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  overflow: visible !important;
  transition: box-shadow 0.3s ease;
  position: relative;
  z-index: 1;
}

/* Ensure parent containers allow dropdown overflow */
.card-body,
.form-group,
.fieldset {
  overflow: visible !important;
}

.quill-editor-wrapper:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.ql-container {
  direction: rtl;
  text-align: right;
  font-family: Vazir, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

.ql-editor {
  direction: rtl;
  text-align: right;
  min-height: 200px;
  padding: 20px;
  font-family: Vazir, Arial, sans-serif;
}

.ql-editor.ql-blank::before {
  color: #999;
  font-style: normal;
  font-family: Vazir, Arial, sans-serif;
  right: 20px;
  left: auto;
}

.ql-toolbar {
  direction: rtl;
  text-align: right;
  background: #f8f9fa;
  border-bottom: 2px solid #e9ecef;
  padding: 10px 12px;
  border-top-right-radius: 8px;
  border-top-left-radius: 8px;
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-height: auto;
  width: 100%;
  overflow: visible !important;
  box-sizing: border-box;
  position: relative;
  z-index: auto;
}

.ql-toolbar * {
  box-sizing: border-box;
}

.ql-toolbar.ql-snow {
  border: none;
  border-bottom: 2px solid #e9ecef;
}

.ql-toolbar.ql-snow .ql-stroke {
  stroke: #495057;
  stroke-width: 2;
}

.ql-toolbar.ql-snow .ql-fill {
  fill: #495057;
}

.ql-toolbar.ql-snow .ql-picker-label {
  color: #495057;
  font-size: 13px;
}

.ql-container.ql-snow {
  border: none;
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;
  background: #fff;
  overflow: visible;
  position: relative;
}

.ql-toolbar .ql-formats {
  display: inline-flex !important;
  align-items: center !important;
  gap: 2px;
  margin: 0 !important;
  padding: 4px !important;
  background: transparent;
  border-radius: 4px;
  transition: background 0.2s ease;
  flex-shrink: 0 !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative;
  z-index: 5;
  width: auto !important;
  height: auto !important;
  min-width: auto !important;
  min-height: auto !important;
}

.ql-toolbar .ql-formats:hover {
  background: rgba(0, 0, 0, 0.03);
}

.ql-toolbar .ql-formats:not(:last-child) {
  margin-left: 8px;
  position: relative;
}

.ql-toolbar .ql-formats:not(:last-child)::after {
  content: "";
  position: absolute;
  left: -6px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 24px;
  background: #dee2e6;
}

.ql-toolbar button {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease;
  border-radius: 4px;
  padding: 0 !important;
  margin: 0 !important;
  border: none;
  background: transparent;
  cursor: pointer;
  position: relative;
  visibility: visible !important;
  opacity: 1 !important;
  flex-shrink: 0 !important;
  overflow: visible !important;
}

.ql-toolbar button svg {
  width: 18px !important;
  height: 18px !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  flex-shrink: 0 !important;
}

.ql-toolbar button:hover {
  background: #e9ecef;
}

.ql-toolbar button:active {
  background: #dee2e6;
  transform: scale(0.95);
}

.ql-toolbar button.ql-active {
  background: #007bff;
  color: #fff;
}

.ql-toolbar button.ql-active .ql-stroke {
  stroke: #fff;
  stroke-width: 2.5;
}

.ql-toolbar button.ql-active .ql-fill {
  fill: #fff;
}

.ql-toolbar .ql-picker {
  height: 32px !important;
  min-height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  border-radius: 4px;
  padding: 0 8px;
  margin: 0 !important;
  transition: all 0.2s ease;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 13px;
  visibility: visible !important;
  opacity: 1 !important;
  flex-shrink: 0 !important;
  position: relative;
  z-index: 10;
  overflow: visible !important;
  width: auto !important;
}

.ql-toolbar .ql-picker:hover {
  background: #e9ecef;
}

.ql-toolbar .ql-picker-label {
  padding: 4px 8px;
  display: inline-flex;
  align-items: center;
}

/* Hide ONLY the dropdown arrow SVG with specific polygons (arrow icon) */
.ql-toolbar .ql-picker-arrow {
  display: none !important;
  visibility: hidden !important;
}

/* Hide SVG arrow with viewBox 0 0 18 18 that contains polygon.ql-stroke */
.ql-toolbar .ql-picker-label svg[viewBox="0 0 18 18"]:has(polygon.ql-stroke) {
  display: none !important;
}

/* Fallback: hide SVG that contains polygons with those specific points */
.ql-toolbar .ql-picker-label svg:has(polygon[points*="7 11 9 13 11 11"]),
.ql-toolbar .ql-picker-label svg:has(polygon[points*="7 7 9 5 11 7"]) {
  display: none !important;
}

/* Direct: hide polygons with ql-stroke class inside picker labels (the arrow) */
.ql-toolbar .ql-picker-label svg polygon.ql-stroke {
  display: none !important;
}

/* Ensure all OTHER content (text and icons) remains visible */
.ql-toolbar .ql-picker-label {
  display: inline-flex !important;
  align-items: center !important;
  visibility: visible !important;
}

/* Keep color picker SVGs and other content SVGs visible */
.ql-toolbar .ql-picker.ql-color .ql-picker-label svg,
.ql-toolbar .ql-picker.ql-background .ql-picker-label svg,
.ql-toolbar .ql-picker-label svg:not([viewBox="0 0 18 18"]) {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.ql-toolbar .ql-picker-options {
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border: 1px solid #e9ecef;
  padding: 6px;
  background: #fff;
  margin-top: 4px;
  max-height: 300px;
  overflow-y: auto;
  z-index: 9999 !important;
  position: absolute !important;
  display: none !important;
  visibility: visible !important;
  opacity: 1 !important;
  min-width: 150px;
}

.ql-toolbar .ql-picker.ql-expanded .ql-picker-options {
  display: block !important;
}

.ql-toolbar .ql-picker-item {
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.ql-toolbar .ql-picker-item:hover {
  background: #f8f9fa;
}

.ql-toolbar .ql-picker-item.ql-selected {
  background: #007bff;
  color: #fff;
}

.ql-toolbar .ql-picker.ql-expanded .ql-picker-label {
  color: #007bff;
}

/* Color Picker Specific Styles */
.ql-toolbar .ql-picker.ql-color,
.ql-toolbar .ql-picker.ql-background {
  position: relative;
  z-index: 100;
}

.ql-toolbar .ql-picker.ql-color .ql-picker-label,
.ql-toolbar .ql-picker.ql-background .ql-picker-label {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  display: inline-block !important;
  border-radius: 4px;
  border: 2px solid #dee2e6;
  padding: 2px;
  box-sizing: border-box;
  visibility: visible !important;
  opacity: 1 !important;
}

.ql-toolbar .ql-picker.ql-color .ql-picker-label svg,
.ql-toolbar .ql-picker.ql-background .ql-picker-label svg {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.ql-toolbar .ql-picker.ql-color .ql-picker-options,
.ql-toolbar .ql-picker.ql-background .ql-picker-options {
  padding: 8px;
  display: none !important;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  width: auto;
  min-width: 200px;
  right: 0;
  left: auto;
  position: absolute !important;
  margin-top: 8px;
  z-index: 99999 !important;
}

.ql-toolbar .ql-picker.ql-color.ql-expanded .ql-picker-options,
.ql-toolbar .ql-picker.ql-background.ql-expanded .ql-picker-options {
  display: grid !important;
}

.ql-toolbar .ql-picker.ql-color .ql-picker-item,
.ql-toolbar .ql-picker.ql-background .ql-picker-item {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  border: 2px solid #dee2e6;
  padding: 0;
  margin: 0;
  display: block !important;
  visibility: visible !important;
  cursor: pointer;
  transition: all 0.2s ease;
}

.ql-toolbar .ql-picker.ql-color .ql-picker-item:hover,
.ql-toolbar .ql-picker.ql-background .ql-picker-item:hover {
  border-color: #007bff;
  transform: scale(1.1);
}

.ql-toolbar .ql-picker.ql-color .ql-picker-item.ql-selected,
.ql-toolbar .ql-picker.ql-background .ql-picker-item.ql-selected {
  border-color: #007bff;
  border-width: 3px;
}

.ql-editor ol,
.ql-editor ul {
  padding-right: 1.5em;
  padding-left: 0;
}

.ql-editor blockquote {
  border-right: 4px solid #007bff;
  border-left: none;
  padding-right: 16px;
  padding-left: 0;
  margin: 16px 0;
  font-style: italic;
  color: #6c757d;
}

.ql-editor pre.ql-syntax {
  background: #f8f9fa;
  border-radius: 6px;
  padding: 16px;
  margin: 16px 0;
  border: 1px solid #e9ecef;
  direction: ltr;
  text-align: right;
  font-family: "Courier New", monospace;
  font-size: 14px;
  overflow-x: auto;
}

.ql-editor img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  margin: 16px 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.ql-editor .ql-video {
  width: 100%;
  height: 400px;
  border-radius: 6px;
  margin: 16px 0;
}

.ql-editor a {
  color: #007bff;
  text-decoration: none;
  border-bottom: 1px solid #007bff;
  transition: all 0.2s ease;
}

.ql-editor a:hover {
  color: #0056b3;
  border-bottom-color: #0056b3;
}

/* Focus state */
.ql-container.ql-snow.ql-focused {
  border: 2px solid #007bff;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

/* Responsive design */
@media (max-width: 768px) {
  .ql-toolbar {
    padding: 8px;
    gap: 2px;
  }

  .ql-toolbar button {
    width: 28px;
    height: 28px;
    margin: 0 1px;
  }

  .ql-toolbar button svg {
    width: 16px;
    height: 16px;
  }

  .ql-toolbar .ql-picker {
    height: 28px;
    padding: 0 6px;
    font-size: 12px;
  }

  .ql-toolbar .ql-formats {
    margin-left: 6px;
    padding: 2px;
  }

  .ql-toolbar .ql-formats:not(:last-child)::after {
    left: -4px;
    height: 20px;
  }

  .ql-editor {
    padding: 16px;
    min-height: 250px;
  }
}

/* Custom scrollbar for editor */
.ql-editor::-webkit-scrollbar {
  width: 8px;
}

.ql-editor::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

.ql-editor::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 4px;
}

.ql-editor::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}