/****************************************************
 * PAGE-LEVEL WRAPPER — Prevents interference
 ****************************************************/
.page-admin-homepage-editor #page {
  padding: 0;
}

.page-admin-homepage-editor .uniroma-dashboard-wrapper {
  display: flex;
  width: 100%;
  background: #f5f5f5;
  font-family: Arial, sans-serif;
  min-height: 100vh;
}

/****************************************************
 * LEFT SIDEBAR
 ****************************************************/
.page-admin-homepage-editor .uniroma-dashboard-wrapper .uniroma-dashboard-left {
  flex: 0 0 auto;
  /* Sidebar width = content width */
  width: auto;
  /* Remove fixed width */
  max-width: 350px;
  /* Optional safety max */
  padding: 15px;
  background-color: #333;
  color: #e2e2e2;
  border-right: 2px solid #111;
  overflow-y: hidden;
}

/****************************************************
 * RIGHT PANEL
 ****************************************************/
.page-admin-homepage-editor .uniroma-dashboard-wrapper .uniroma-dashboard-right {
  flex: 1 1 auto;
  /* Fill remaining space */
  min-width: 0;
  /* Prevent overflow */
  background: #ffffff;
  padding: 20px;
  overflow-y: auto;
}

.page-admin-homepage-editor .uniroma-dashboard-wrapper .uniroma-placeholder {
  color: #777;
  font-style: italic;
  padding: 10px;
}

/****************************************************
 * TREE STRUCTURE
 ****************************************************/
.page-admin-homepage-editor .uniroma-dashboard-wrapper .uniroma-tree {
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}

.page-admin-homepage-editor .uniroma-dashboard-wrapper .uniroma-tree-item {
  margin-bottom: 6px;
  transition: all 0.2s ease;
}

/****************************************************
 * ICONS
 ****************************************************/
.page-admin-homepage-editor .uniroma-dashboard-wrapper .uniroma-icon {
  font-size: 14px;
  margin-right: 6px;
  opacity: 0.9;
  min-width: 16px;
}

/****************************************************
 * LABELS
 ****************************************************/
.page-admin-homepage-editor .uniroma-dashboard-wrapper .item-label {
  padding: 8px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  color: #fff !important;
  display: flex;
  align-items: center;
  text-decoration: none !important;
  line-height: 18px;
}

.page-admin-homepage-editor .uniroma-dashboard-wrapper .item-label:hover {
  background: #3b3d42;
}

.page-admin-homepage-editor .uniroma-dashboard-wrapper .label-text {
  flex-grow: 1;
}

/****************************************************
 * ACTIVE ITEM
 ****************************************************/
.page-admin-homepage-editor .uniroma-dashboard-wrapper .item-label.active,
.page-admin-homepage-editor .uniroma-dashboard-wrapper .uniroma-tree-item.active>.item-label {
  background: #5566ff !important;
  color: #fff !important;
}

.page-admin-homepage-editor .uniroma-dashboard-wrapper .uniroma-tree-item.active {
  border-left: 3px solid #5566ff;
  padding-left: 5px;
}

/****************************************************
 * CHILDREN COLLAPSIBLE
 ****************************************************/
.page-admin-homepage-editor .uniroma-dashboard-wrapper .children {
  display: none;
  margin-left: 14px;
  border-left: 1px solid #333;
  padding-left: 10px;
}

.page-admin-homepage-editor .uniroma-dashboard-wrapper .children.expanded {
  display: block !important;
}

/****************************************************
 * SCROLLBAR
 ****************************************************/
.page-admin-homepage-editor .uniroma-dashboard-wrapper .uniroma-dashboard-left::-webkit-scrollbar,
.page-admin-homepage-editor .uniroma-dashboard-wrapper .uniroma-dashboard-right::-webkit-scrollbar {
  width: 8px;
}

.page-admin-homepage-editor .uniroma-dashboard-wrapper .uniroma-dashboard-left::-webkit-scrollbar-thumb,
.page-admin-homepage-editor .uniroma-dashboard-wrapper .uniroma-dashboard-right::-webkit-scrollbar-thumb {
  background: #444;
  border-radius: 4px;
}

/****************************************************
 * ETUF FIELD LAYOUT
 ****************************************************/
.page-admin-homepage-editor .uniroma-dashboard-wrapper .etuf-translated-field {
  display: flex;
  flex-direction: row;
  gap: 12px;
  align-items: flex-start;
}

.page-admin-homepage-editor .uniroma-dashboard-wrapper .etuf-translated-field>div {
  flex: 1 1 50%;
  display: flex;
  flex-direction: column;
}

/****************************************************
 * TOGGLE BUTTON (inside left menu)
 ****************************************************/
.uniroma-dashboard-wrapper .uniroma-sidebar-toggle {
  width: 100%;
  padding: 10px 12px;
  background: #333;
  color: #fff;
  border-radius: 4px;
  cursor: pointer;
  margin-bottom: 10px;
  text-align: left;
  display: flex;
  align-items: center;
}

.uniroma-dashboard-wrapper .uniroma-sidebar-toggle i {
  font-size: 18px;
}

/****************************************************
 * SIDEBAR COLLAPSED
 ****************************************************/
.uniroma-dashboard-wrapper.sidebar-collapsed .uniroma-dashboard-left {
  width: 48px;
  padding: 10px 5px;
  overflow: hidden;
}

.uniroma-dashboard-wrapper.sidebar-collapsed .uniroma-sidebar-toggle {
  text-align: center;
  justify-content: center;
}

.uniroma-dashboard-wrapper.sidebar-collapsed .uniroma-tree {
  display: none;
}

.uniroma-dashboard-wrapper.sidebar-collapsed .uniroma-dashboard-right {
  width: calc(100% - 48px);
}

/****************************************************
 * TRANSITIONS
 ****************************************************/
.uniroma-dashboard-wrapper .uniroma-dashboard-left,
.uniroma-dashboard-wrapper .uniroma-dashboard-right {
  transition: all .25s ease;
}

/****************************************************
 * PARAGRAPHS UI IMPROVEMENTS (Dashboard only)
 ****************************************************/
.page-admin-homepage-editor .field-type-paragraphs {
  background: #fafafa;
  border: 1px solid #ddd;
  padding: 15px;
  border-radius: 6px;
  margin-bottom: 25px;
}

/* Each Paragraph Item (when added) */
.page-admin-homepage-editor .paragraphs-item {
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 15px;
  margin-bottom: 15px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

/* Title of each component (“Hero”, “Research”, etc.) */
.page-admin-homepage-editor .paragraphs-item .form-item>label {
  font-weight: bold;
  margin-bottom: 6px;
}

/* Add-more buttons row */
.page-admin-homepage-editor .paragraphs-add-more-submit {
  background: #5566ff !important;
  color: #fff !important;
  border: none !important;
  padding: 6px 12px !important;
  border-radius: 4px;
  margin-right: 6px !important;
  margin-top: 10px;
  cursor: pointer;
}

.page-admin-homepage-editor .paragraphs-add-more-submit:hover {
  background: #4455d9 !important;
}

/* Remove button styling */
.page-admin-homepage-editor .paragraphs-item .form-submit {
  background: #d9534f !important;
  color: white !important;
  border-radius: 4px;
  padding: 4px 10px !important;
}

.page-admin-homepage-editor .paragraphs-item .form-submit:hover {
  background: #c9302c !important;
}

/* Make fields inside paragraphs breathe */
.page-admin-homepage-editor .paragraphs-item .form-item {
  margin-bottom: 12px;
}

/* Optional: accordion-like separation between paragraphs */
.page-admin-homepage-editor .paragraphs-item+.paragraphs-item {
  border-top: 2px dashed #ddd;
  padding-top: 20px;
}
/****************************************************
 * PARAGRAPHS — HORIZONTAL CARD UI FOR DASHBOARD
 ****************************************************/
.page-admin-homepage-editor tr.paragraphs-item-type-hero,
.page-admin-homepage-editor tr[class*="paragraphs-item-type-"],
.page-admin-homepage-editor tbody tr.draggable[class*="paragraphs-item-type-"] {
  background: #fff !important;
  border: 1px solid #ddd !important;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  margin-bottom: 15px !important;
  display: flex !important;
  flex-direction: row;
  align-items: flex-start;
  padding: 12px;
}

/****************************************************
 * DRAG HANDLE COLUMN (left)
 ****************************************************/
.page-admin-homepage-editor tr[class*="paragraphs-item-type-"] td.field-multiple-drag {
  width: 32px !important;
  padding-right: 12px;
  border: none !important;
}

.page-admin-homepage-editor tr[class*="paragraphs-item-type-"] td.field-multiple-drag .tabledrag-handle .handle {
  width: 18px;
  height: 18px;
  opacity: .6;
}

.page-admin-homepage-editor tr[class*="paragraphs-item-type-"] td.field-multiple-drag .tabledrag-handle:hover .handle {
  opacity: 1;
}

/* Hide header row of Paragraphs editor table for field_components */
.page-admin-homepage-editor #field-components-values thead {
  display: none !important;
  visibility: hidden !important;
}

/****************************************************
 * MAIN PARAGRAPH CONTENT (middle)
 ****************************************************/
.page-admin-homepage-editor tr[class*="paragraphs-item-type-"]>td:nth-child(2) {
  flex: 1 1 auto;
  padding: 0 15px;
  border: none !important;
}

.page-admin-homepage-editor .paragraphs-item-type-hero-item .entity,
.page-admin-homepage-editor .paragraphs-item-type-hero .entity {
  border: none !important;
  padding: 0 !important;
}

/****************************************************
 * BUTTONS (Edit / Remove)
 ****************************************************/
.page-admin-homepage-editor tr[class*="paragraphs-item-type-"] .form-actions {
  margin-top: 10px;
}

.page-admin-homepage-editor tr[class*="paragraphs-item-type-"] input.form-submit {
  border-radius: 4px !important;
  padding: 5px 12px !important;
  margin-right: 6px;
}

.page-admin-homepage-editor tr[class*="paragraphs-item-type-"] input[value="Modifica"] {
  background: #5566ff !important;
  color: white !important;
}

.page-admin-homepage-editor tr[class*="paragraphs-item-type-"] input[value="Elimina"] {
  background: #d9534f !important;
  color: white !important;
}

/****************************************************
 * NESTED PARAGRAPHS LISTING (horizontal stacking)
 ****************************************************/
/* Converts table into horizontal card stack */
.page-admin-homepage-editor .field-multiple-table,
.page-admin-homepage-editor .field-multiple-table tbody {
  display: flex !important;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

/* For deeper nesting — horizontal layout of inner paragraphs */
.page-admin-homepage-editor .paragraphs-item-type-hero .field-type-paragraphs .field-multiple-table tbody tr {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch;
}

/****************************************************
 * REMOVE WEIGHT / DELTA COLUMN
 ****************************************************/
.page-admin-homepage-editor tr[class*="paragraphs-item-type-"] td.delta-order {
  display: none !important;
}

/****************************************************
 * PREVIEW CARD FIXES
 ****************************************************/
.page-admin-homepage-editor .paragraphs-editor-preview .entity {
  border-radius: 6px;
  padding: 10px;
  background: #fafafa;
  margin-bottom: 10px;
}

/****************************************************
 * ICONPICKER
 ****************************************************/
.page-admin-homepage-editor .iconpicker .iconpicker-item {
  padding: 0;
  box-shadow: none;
  font-size: 18px;
}