/* ================================================
   CMI Custom CSS
   ================================================ */

/* Konten utama - jarak dari sidebar */
@media (min-width: 1200px) {
  .main {
    margin-left: 280px;
    padding: 20px 24px;
  }
}

/* ================================================
   Quill Editor - Image Float & Resize
   ================================================ */

/* Gambar di dalam Quill bisa di-float */
.ql-editor img {
  max-width: 100%;
  height: auto;
  cursor: pointer;
  transition: outline .15s;
}

.ql-editor img.img-selected {
  outline: 2px solid #1a6b3c;
  outline-offset: 2px;
}

/* Float kiri - teks mengalir di kanan */
.ql-editor img.img-float-left {
  float: left;
  margin: 0 16px 8px 0;
}

/* Float kanan - teks mengalir di kiri */
.ql-editor img.img-float-right {
  float: right;
  margin: 0 0 8px 16px;
}

/* Tengah - full width, tidak float */
.ql-editor img.img-center {
  display: block;
  float: none;
  margin: 8px auto;
}

/* Clearfix setelah float */
.ql-editor p:after,
.ql-editor div:after {
  content: "";
  display: table;
  clear: both;
}

/* ================================================
   Image Toolbar (muncul saat klik gambar)
   ================================================ */
#img-toolbar {
  position: absolute;
  background: #1e1e1e;
  border-radius: 8px;
  padding: 4px 6px;
  display: none;
  gap: 4px;
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(0,0,0,.3);
  flex-wrap: wrap;
  max-width: 260px;
}

#img-toolbar button {
  background: transparent;
  border: 1px solid transparent;
  color: #fff;
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s;
}

#img-toolbar button:hover {
  background: rgba(255,255,255,.15);
}

#img-toolbar button.active {
  background: #1a6b3c;
  border-color: #1a6b3c;
}

#img-toolbar .toolbar-sep {
  width: 1px;
  background: rgba(255,255,255,.2);
  margin: 2px 2px;
}

/* ================================================
   Pratinjau isi berita (di halaman view website nanti)
   ================================================ */
.konten-berita img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
}

.konten-berita img.img-float-left {
  float: left;
  margin: 0 16px 8px 0;
}

.konten-berita img.img-float-right {
  float: right;
  margin: 0 0 8px 16px;
}

.konten-berita img.img-center {
  display: block;
  float: none;
  margin: 8px auto;
}

.konten-berita::after {
  content: "";
  display: table;
  clear: both;
}

/* ================================================
   Fix sidebar nav-link active text color
   ================================================ */
.sidebar .nav-item > .nav-link.active,
.sidebar .nav-link.active {
  color: #ffffff !important;
}