/* ============================================================
   COLOR TOKENS
============================================================ */
:root {
  --navy: #0b1c2d;
  --navy-hover: #132f4c;
  --navy-light: #e9eff6;
}

/* ============================================================
   EDITOR ROOT (QUILL MOUNT POINT)
============================================================ */
#editor {
  min-height: 520px;
  background: #ffffff;
  border-radius: 12px;
}

/* ============================================================
   TOOLBAR
============================================================ */
.ql-toolbar {
  border-radius: 12px 12px 0 0;
  border-color: #dee2e6;
}

/* Toolbar layout */
#toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* Toolbar buttons & pickers */
.ql-toolbar button,
.ql-toolbar .ql-picker-label {
  color: var(--navy);
}

/* Hover */
.ql-toolbar button:hover,
.ql-toolbar .ql-picker-label:hover {
  color: var(--navy-hover);
}

/* Active */
.ql-toolbar button.ql-active,
.ql-toolbar .ql-picker-label.ql-active {
  background-color: var(--navy-light);
  border-radius: 6px;
}

/* ============================================================
   ✅ SVG ICONS (NO SQUARES)
============================================================ */
.ql-toolbar button svg,
.ql-toolbar .ql-picker svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* Prevent icon overrides */
.ql-toolbar i,
.ql-toolbar svg {
  font-style: normal !important;
}

/* ============================================================
   CONTAINER (CRITICAL FOR TYPING)
============================================================ */
.ql-container {
  min-height: 520px;
  border-radius: 0 0 12px 12px;
  border-color: #dee2e6;
}

/* ============================================================
   EDITABLE CONTENT AREA
============================================================ */
.ql-editor {
  min-height: 480px;
  padding: 22px;
  font-size: 1.05rem;
  line-height: 1.9;
  color: #212529;
}

/* Placeholder */
.ql-editor.ql-blank::before {
  color: #adb5bd;
  font-style: italic;
}

/* ============================================================
   CONTENT STYLES
============================================================ */
.ql-editor a {
  color: var(--navy);
  font-weight: 500;
  text-decoration: underline;
}

.ql-editor a:hover {
  color: var(--navy-hover);
  text-decoration: none;
}

.ql-editor img {
  max-width: 100%;
  height: auto;
  cursor: pointer;
}

/* ============================================================
   ACCESSIBILITY
============================================================ */
.ql-toolbar button:focus,
.ql-toolbar .ql-picker-label:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(11, 28, 45, 0.2);
}

/* ============================================================
   DESKTOP (LARGE SCREENS)
============================================================ */
@media (min-width: 992px) {
  #editor {
    min-height: 620px;
  }

  .ql-container {
    min-height: 620px;
  }

  .ql-editor {
    min-height: 580px;
    font-size: 1.08rem;
  }
}

/* ============================================================
   MOBILE (COMPACT)
============================================================ */
@media (max-width: 576px) {
  #editor {
    min-height: 420px;
  }

  .ql-container {
    min-height: 420px;
  }

  .ql-editor {
    min-height: 380px;
    padding: 16px;
    font-size: 1rem;
  }
}

/* ============================================================
   OPTIONAL: FULLSCREEN MODE
============================================================ */
.editor-fullscreen {
  position: fixed !important;
  inset: 0;
  z-index: 9999;
  background: #ffffff;
  padding: 16px;
  overflow: auto;
}

.editor-fullscreen #editor,
.editor-fullscreen .ql-container {
  min-height: calc(100vh - 80px);
}


/* ============================================================
   DIFF VIEW – SIDE BY SIDE (ENTERPRISE)
============================================================ */

/* Shared diff container */
.diff-box {
  border-radius: 14px;
  padding: 18px;
  background: #ffffff;
  overflow-y: auto;
  height: 100%;
  line-height: 1.75;
  font-size: 0.95rem;
  word-wrap: break-word;
}

/* =========================
   LIVE (CURRENT) VERSION
========================= */
#diffCurrent {
  border: 2px solid #198754;          
  background: #f6fffa;
  box-shadow: inset 0 0 0 1px rgba(25, 135, 84, 0.08);
}

/* =========================
   OLD / SELECTED VERSION
========================= */
#diffOld {
  border: 2px dashed #adb5bd;
  background: #fcfcfd;
  box-shadow: inset 0 0 0 1px rgba(173, 181, 189, 0.2);
}

/* ============================================================
   DIFF HIGHLIGHTS
============================================================ */

/* Removed text (only appears in LIVE side) */
.diff-remove {
  background: #f8d7da;
  color: #842029;
  padding: 2px 4px;
  border-radius: 4px;
  text-decoration: line-through;
  margin: 0 1px;
}

/* Added text (only appears in OLD side) */
.diff-add {
  background: #d1f7d6;
  color: #0f5132;
  padding: 2px 4px;
  border-radius: 4px;
  margin: 0 1px;
}

/* ============================================================
   SCROLLBAR (OPTIONAL POLISH)
============================================================ */
.diff-box::-webkit-scrollbar {
  width: 8px;
}

.diff-box::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 8px;
}

.diff-box::-webkit-scrollbar-track {
  background: transparent;
}