/* =========================
   Layout konten
========================= */
.page-content-wrapper{
  max-width: 960px;
  margin: 0 auto;
}

/* =========================
   Wrapper toolbar (ANCHOR)
   Posisi/left/top/width di-set oleh JS (initFloatingToolbarFollowActiveFlexible)
========================= */
.editor-toolbar-wrapper{ display:none; }
body.admin-active .editor-toolbar-wrapper{
  display:block;
  position:fixed;
  left:auto; top:auto; width:auto;
  transform:none;
  z-index:4000;
}

/* =========================
   Toolbar utama
========================= */
.editor-toolbar{
  width: 95%;
  margin: 0 auto;
  background: #8738f3;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  padding: 4px 8px;
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.1);
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}

/* Saat admin + floating: toolbar memenuhi wrapper */
body.admin-active #material-editor-toolbar,
body.admin-active .editor-toolbar{
  width: 100% !important;
  margin: 0 !important;      /* penting: jangan dorong kiri/kanan */
  padding: 6px 8px;          /* kalau butuh ruang dalam */
  box-sizing: border-box;
}

body.admin-active #editorRuler{
  width: 99.75%;
  margin: 4px 0 0 2px;         /* jangan margin-left */
  box-sizing: border-box;
  border-radius: 4px;
}

/* paksa isi toolbar benar-benar memenuhi wrapper */
body.admin-active .editor-toolbar-wrapper #material-editor-toolbar,
body.admin-active .editor-toolbar-wrapper .editor-toolbar{
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;        /* ini yang menghilangkan sisa kanan-kiri */
  box-sizing: border-box;
}

/* kontrol di toolbar */
.toolbar-select{
  height: 30px;
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid #ccc;
  background: #f9f9f9;
  font-size: 13px;
}

.tb-btn,
.toolbar-btn{
  margin-top: 0;
  min-width: 28px;
  height: 30px;
  padding: 0 8px;
  border-radius: 4px;
  border: 1px solid #ccd5ff;
  background: #eef2ff;
  color: #003366;
  font-size: 13px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.tb-btn:hover,
.toolbar-btn:hover{
  background: #dde6ff;
  border-color: #99b3ff;
}

.tb-primary{
  background: #007bff;
  border-color: #007bff;
  color: #fff;
}

.tb-primary:hover{
  background: #0056b3;
  border-color: #0056b3;
}

/* =========================
   Ruler (nempel bawah toolbar)
========================= */
#editorRuler{
  position: relative;
  height: 20px;
  margin: 4px 0 0 1.5px;              /* nempel bawah toolbar */
  padding: 0 1.875rem;          /* offset kiri/kanan visual */
  background: #e3f2fd;
  border: 1.5px solid #9f18e2;
  border-radius: 4px;
  box-sizing: border-box;
  width: 100%;
  pointer-events: auto;
  z-index: 4001;                 /* di atas background wrapper */
}

#editorRuler-track{
  position: absolute;
  top: 50%;
  left: 2.25rem;
  right: 2.25rem;
  height: 1px;
  background: #d4d4d8;
}

/* Handle ruler harus bisa kena klik */
#editorRuler-margin-handle,
#editorRuler-indent-handle{
  position: absolute;
  top: 3px;
  width: 2px;                    /* sedikit dibesarkan biar mudah di-drag */
  height: 12px;
  background: #3b82f6;
  border: 0.5px solid #6811d2;
  border-radius: 2px;
  cursor: ew-resize;
  pointer-events: auto;
  z-index: 4002;
}

#editorRuler-indent-handle{
  background: #eb2f96;
}

/* =========================
   Popover/dialog tabel
   Tetap absolute relatif ke wrapper
========================= */
.insert-table-dialog,
.table-tools-popover{
  position: absolute;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(15,23,42,0.18);
  padding: 6px 8px;
  font-size: 13px;
  display: none;
  z-index: 4500;                 /* di atas toolbar+ruler */
}

/* form kecil Rows/Cols di dialog insert */
.insert-table-dialog label{
  margin-right: 6px;
  font-size: 12px;
}

.insert-table-dialog input[type="number"]{
  width: 46px;
  padding: 2px 3px;
  margin-left: 2px;
  font-size: 12px;
}

.insert-table-dialog button{
  margin-left: 4px;
}

/* tombol di popover tabel */
.table-tools-popover button{
  min-width: 28px;
  height: 26px;
  padding: 0 8px;
  border-radius: 4px;
  border: 1px solid #ccd5ff;
  background: #eef2ff;
  color: #003366;
  font-size: 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 2px 2px 0 0;
}

.table-tools-popover button:hover{
  background: #dde6ff;
  border-color: #99b3ff;
}

.tbl-tools-header{
  font-weight: 600;
  margin-bottom: 4px;
}

.tbl-tools-section{
  margin-top: 6px;
  border-top: 1px solid #e5e7eb;
  padding-top: 4px;
}

.tbl-tools-label{
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #9ca3af;
  margin-bottom: 3px;
}

.tbl-tools-section label{
  font-size: 12px;
  margin-right: 4px;
}

.tbl-tools-section input[type="color"]{
  width: 28px;
  height: 20px;
  padding: 0;
  border: 1px solid #d4d4d8;
  border-radius: 3px;
}

/* =========================
   Tabel default
========================= */
.editor-table-default{
  border-collapse: collapse;
  width: 100%;
  max-width: 100%;
  margin: 8px 0;
  table-layout: auto;
}

.editor-table-default th,
.editor-table-default td{
  border: 1px solid #d4d4d8;
  padding: 4px 6px;
  font-size: 14px;
}

.editor-table-bordered th,
.editor-table-bordered td{
  border: 1px solid #d4d4d8;
}

.editor-table-striped tr:nth-child(even){
  background-color: #f3f4ff;
}

.editor-table-header-blue th{
  background-color: #2563eb;
  color: #ffffff;
}

.editor-table-header-green th{
  background-color: #16a34a;
  color: #ffffff;
}

.editor-table-header-yellow th{
  background-color: #facc15;
  color: #111827;
}

/* =========================
   List (editor)
========================= */
#pageContent ol,
#pageContent ul{
  margin-left: 0rem;
  padding-left: 0;
  list-style-position: outside;
}

#pageContent li{
  padding-left: 0.35rem;
  text-indent: 0.5rem;
  margin-left: 1.2rem;
}

/* =========================
   Editable base + level class
========================= */
#pageContent .editable-content{
  margin-left: 0;
  padding-left: 0;
}

/* margin level (geser blok) */
#pageContent .editable-content.margin-0{ margin-left: 0; }
#pageContent .editable-content.margin-1{ margin-left: 2rem; }
#pageContent .editable-content.margin-2{ margin-left: 4rem; }
#pageContent .editable-content.margin-3{ margin-left: 6rem; }
#pageContent .editable-content.margin-4{ margin-left: 8rem; }
#pageContent .editable-content.margin-5{ margin-left: 10rem; }

/* indent level (geser teks di dalam) */
#pageContent .editable-content.indent-0{ padding-left: 0; }
#pageContent .editable-content.indent-1{ padding-left: 2rem; }
#pageContent .editable-content.indent-2{ padding-left: 4rem; }
#pageContent .editable-content.indent-3{ padding-left: 6rem; }
#pageContent .editable-content.indent-4{ padding-left: 8rem; }
#pageContent .editable-content.indent-5{ padding-left: 10rem; }

/* BASE: semua gambar resizable + bisa inline dengan teks */
.resizable-img{
  display: inline-block;
  vertical-align: middle;  /* inline sejajar teks */
  resize: both;
  overflow: hidden;        /* perlu untuk handle resize */
  border: 1px dashed rgba(0,0,0,.25);
  max-width: 100%;
}

/* IMG di dalam wrapper */
.resizable-img > img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;    /* lebih enak untuk drag-resize (klik/drag kena wrapper) */
}

/* PRESET: "inline sedang/flexible" (ukuran default relatif font, tetap bisa resize) */
.resizable-img.inline-flex-img{
  width: 10em;
  height: 6em;

  min-width: 3em;
  min-height: 2.5em;

  /* batasi biar tidak kebesaran */
  max-width: min(100%, 520px);
  max-height: 60vh;
}

/* ketika paragraf/div diberi text-align:center, inline element akan centered.
   Ini memastikan wrapper tidak 'ketarik' aneh oleh resize/width */
.resizable-img{
  margin: 0 .25em; /* optional: biar ada jarak dari teks */
}

.img-left{
  display:block !important;
  margin-left:0 !important;
  margin-right:auto !important;
}

.img-right{
  display:block !important;
  margin-left:auto !important;
  margin-right:0 !important;
}

/* (yang sudah ada) */
.img-center{
  display:block !important;
  margin-left:auto !important;
  margin-right:auto !important;
}