/* ==========================================================================
   ClearMint Essentials — customizable dashboard layout (edit mode)
   ========================================================================== */

/* 12-column grid for dashboard pages */
[data-dl-grid]{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:16px;
  margin-bottom:18px;
  align-items:stretch;
}
[data-dl-grid].dl-kpis{
  grid-auto-rows:minmax(88px,auto);
}
[data-dl-grid].dl-panels{
  grid-auto-rows:minmax(200px,auto);
}
@media(max-width:1100px){
  [data-dl-grid]{grid-template-columns:repeat(6,minmax(0,1fr))}
}
@media(max-width:640px){
  [data-dl-grid]{grid-template-columns:1fr;gap:12px}
}

/* Widget shell */
[data-dl-widget]{
  position:relative;
  min-width:0;
  min-height:0;
  transition:box-shadow .15s,opacity .15s;
}
[data-dl-widget][data-dl-span]{
  grid-column:span var(--dl-span,6);
}
@media(max-width:1100px){
  [data-dl-widget][data-dl-span]{grid-column:span min(var(--dl-span,6),6)}
}
@media(max-width:640px){
  [data-dl-widget][data-dl-span]{grid-column:1/-1}
}

/* Locked (default) — no accidental drags */
body:not(.dl-edit-mode) [data-dl-widget] .dl-drag-handle,
body:not(.dl-edit-mode) [data-dl-widget] .dl-resize-handle{display:none}

/* Edit mode */
body.dl-edit-mode .content [data-dl-page]{
  outline:1px dashed rgba(61,167,124,.25);
  outline-offset:6px;
  border-radius:14px;
}
body.dl-edit-mode [data-dl-widget]{
  cursor:default;
  box-shadow:0 0 0 1px rgba(61,167,124,.18),var(--shadow-sm);
  border-radius:var(--r-lg);
}
body.dl-edit-mode [data-dl-widget].dl-dragging{
  opacity:.72;
  z-index:40;
  box-shadow:0 16px 40px rgba(15,31,46,.18);
  cursor:grabbing;
}
body.dl-edit-mode [data-dl-widget] .panel,
body.dl-edit-mode [data-dl-widget].kpi,
body.dl-edit-mode [data-dl-widget].cff-ind,
body.dl-edit-mode [data-dl-widget].subx-kpi{
  pointer-events:none;
}
body.dl-edit-mode [data-dl-widget] .dl-drag-handle,
body.dl-edit-mode [data-dl-widget] .dl-resize-handle{
  pointer-events:auto;
}

/* Drag / resize handles */
.dl-drag-handle{
  position:absolute;top:10px;left:10px;z-index:5;
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:8px;
  border:1px solid var(--line);background:var(--surface);
  color:var(--ink-500);cursor:grab;
  box-shadow:var(--shadow-sm);
}
.dl-drag-handle:active{cursor:grabbing}
.dl-drag-handle svg{display:block}
.dl-resize-handle{
  position:absolute;right:8px;bottom:8px;z-index:5;
  width:18px;height:18px;border-radius:4px;
  border:1px solid var(--mint-300);background:var(--mint-50);
  cursor:nwse-resize;
}
.dl-resize-handle::after{
  content:'';position:absolute;right:3px;bottom:3px;
  width:8px;height:8px;
  border-right:2px solid var(--mint-600);
  border-bottom:2px solid var(--mint-600);
}

/* Drop placeholder */
.dl-drop-placeholder{
  border:2px dashed var(--mint-400);
  border-radius:var(--r-lg);
  background:rgba(61,167,124,.06);
  min-height:80px;
  grid-column:span var(--dl-ph-span,6);
}

/* Toolbar */
.dl-toolbar{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  margin:0 0 16px;padding:10px 14px;
  border:1px solid var(--line);border-radius:12px;
  background:var(--surface);
  box-shadow:var(--shadow-sm);
}
.dl-toolbar-label{
  font-size:13px;font-weight:600;color:var(--ink-700);
  margin-right:4px;
}
.dl-toolbar .sp{flex:1}
.dl-toolbar-hint{
  font-size:12px;color:var(--ink-500);
}
body:not(.dl-edit-mode) .dl-toolbar{display:none}

/* Legacy row2/kpis still work when not yet converted */
.row2.dl-converted{display:contents}
.kpis.dl-converted{display:contents}