/* ==========================================================================
   1. RESET & GLOBAIS
   ========================================================================== */
* { margin:0; padding:0; box-sizing:border-box; outline:none; }

html, body {
  width:100%;
  height:100%;
  overflow:hidden;
  font-family:"Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
  background-color:#eef2f6;
}

input[type="file"] { display:none; }

#app-root {
  display:flex;
  flex-direction:column;
  height:100vh;
  width:100vw;
}

#hidden-assets { display:none !important; }

/* ==========================================================================
   2. LEGADO (Viewer)
   ========================================================================== */
#loading {
  position:fixed; inset:0;
  z-index:99999;
  background:rgba(255,255,255,0.9);
  display:flex;
  justify-content:center;
  align-items:center;
}

#viewer-container {
  width:100%;
  height:100%;
  position:relative;
  display:block;
  overflow:hidden;
  background:#fff;
}

/* ==========================================================================
   3. LAYOUT MANAGER
   ========================================================================== */
.lm-nav {
  height:54px;
  background:#fff;
  border-bottom:1px solid #e2e8f0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 20px;
  box-shadow:0 1px 2px rgba(0,0,0,0.03);
  z-index:10;
  flex-shrink:0;
}

.lm-subnav {
  height:48px;
  background:#f8fafc;
  border-bottom:1px solid #e2e8f0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 20px;
  flex-shrink:0;
}

#lm-workspace {
  flex:1;
  display:flex;
  overflow:hidden;
  padding:8px;
  position:relative;
  min-width:0;
  min-height:0;
}

/* Splits */
.lm-split {
  display:flex;
  flex:1;
  width:100%;
  height:100%;
  min-width:0 !important;
  min-height:0 !important;
  flex-basis:0 !important;
  gap:0 !important;
  align-items:stretch;
}

/* ✅ FIX REAL: nunca usar .row / .col (Bootstrap). */
.lm-split.lm-row { flex-direction:row; }
.lm-split.lm-col { flex-direction:column; }

/* Widgets */
.lm-widget-wrapper {
  display:flex !important;
  flex-direction:column !important;
  padding:4px !important; /* espaço uniforme */
  min-width:0 !important;
  min-height:0 !important;
  flex-basis:0 !important;
}

.lm-widget-card {
  flex:1;
  display:flex;
  flex-direction:column;
  background:#fff;
  border-radius:8px;
  box-shadow:0 2px 4px rgba(0,0,0,0.05);
  border:1px solid transparent;
  overflow:hidden;
  min-width:0;
  min-height:0;
}

.lm-pane-header {
  height:40px;
  background:#fff;
  border-bottom:1px solid #f1f5f9;
  display:flex;
  align-items:center;
  padding:0 12px;
  justify-content:space-between;
  flex-shrink:0;
  user-select:none;
}

.lm-pane-content {
  flex:1;
  position:relative;
  overflow:auto;
  background:#fff;
  min-width:0;
  min-height:0;
}

/* ==========================================================================
   4. EDIT MODE
   ========================================================================== */
.is-editing .lm-widget-card { border:1px dashed #94a3b8; box-shadow:none; }
.is-editing .lm-widget-wrapper { background:rgba(0,0,0,0.02); border-radius:8px; }
.is-editing .lm-pane-header { background:#f1f5f9; }

.move-target .lm-widget-card {
  border:2px dashed #2563eb !important;
  background:#eff6ff !important;
  opacity:0.8;
}

/* ==========================================================================
   4.1 RESIZER (não ocupa espaço)
   ========================================================================== */
.lm-resizer {
  flex:0 0 0px !important;
  width:0px !important;
  height:0px !important;
  background:transparent !important;
  position:relative;
  z-index:200;
  margin:0 !important;
  padding:0 !important;
  pointer-events:none;
}

.lm-resizer.v { width:0px !important; height:100% !important; }
.lm-resizer.h { height:0px !important; width:100% !important; }

.lm-resizer::after {
  content:"";
  position:absolute;
  background:transparent;
  pointer-events:auto;
}

.lm-resizer.v::after { top:0; bottom:0; left:-6px; width:12px; cursor:col-resize; }
.lm-resizer.h::after { left:0; right:0; top:-6px; height:12px; cursor:row-resize; }

.lm-resizer::before {
  content:"";
  position:absolute;
  background:#cbd5e1;
  border-radius:2px;
  z-index:201;
  pointer-events:none;
  transition:background 0.2s;
}

.lm-resizer.v::before { width:2px; height:24px; left:-1px; top:50%; transform:translateY(-50%); }
.lm-resizer.h::before { height:2px; width:24px; top:-1px; left:50%; transform:translateX(-50%); }

.is-editing .lm-resizer:hover::before { background:#3b82f6; }

/* ==========================================================================
   5. UI (botões/tabs/select)
   ========================================================================== */
.lm-btn {
  padding:6px 12px;
  border-radius:6px;
  font-size:12px;
  font-weight:600;
  cursor:pointer;
  border:1px solid #e2e8f0;
  background:#fff;
  color:#475569;
  display:inline-flex;
  align-items:center;
  gap:6px;
  transition:all 0.2s;
}
.lm-btn:hover { background:#f8fafc; border-color:#cbd5e1; color:#1e293b; }

.lm-btn-primary { background:#2563eb; color:#fff; border-color:#2563eb; }
.lm-btn-primary:hover { background:#1d4ed8; }

.lm-btn-success { background:#10b981; color:#fff; border-color:#10b981; }
.lm-btn-success:hover { background:#059669; }

.lm-btn-danger { color:#ef4444; border-color:#fca5a5; }
.lm-btn-danger:hover { background:#fef2f2; color:#dc2626; }

.lm-tab {
  padding:6px 16px;
  border-radius:20px;
  font-size:13px;
  font-weight:500;
  cursor:pointer;
  color:#64748b;
  border:1px solid transparent;
  transition:0.2s;
}
.lm-tab:hover { background:#e2e8f0; color:#1e293b; }
.lm-tab.active { background:#eff6ff; color:#2563eb; font-weight:600; }

.lm-select {
  border:1px solid #e2e8f0;
  padding:2px 6px;
  border-radius:4px;
  font-size:12px;
  cursor:pointer;
  color:#334155;
  font-weight:600;
}

.lm-mini-btn {
  width:24px;
  height:24px;
  border:1px solid #e2e8f0;
  background:#fff;
  border-radius:4px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  color:#64748b;
  font-size:10px;
  padding:0;
}
.lm-mini-btn:hover { color:#3b82f6; border-color:#cbd5e1; background:#f1f5f9; }

/* Fora do modo edição: não mostrar as alças (linha). */
#app-root:not(.is-editing) .lm-resizer::before {
  display: none !important;
}

/* Fora do modo edição: opcional — não permitir arrastar */
#app-root:not(.is-editing) .lm-resizer::after {
  pointer-events: none !important;
  cursor: default !important;
}