/**
 * Layout Paragraphs Edit Page — Clean List View
 *
 * Overrides LP's default "preview + hover controls" behavior.
 * Shows each component as a simple labeled row with always-visible action buttons.
 * No SCSS/gulp needed — this is a small standalone CSS file.
 */

/* Hide all rendered paragraph field content inside LP components */
.lp-builder .js-lpb-component > .field,
.lp-builder .js-lpb-component > .paragraph,
.lp-builder .js-lpb-component > .clearfix,
.lp-builder .js-lpb-component > article,
.lp-builder .js-lpb-component > div:not(.lpb-controls):not(.js-lpb-ui) {
  display: none !important;
}

/* Override LP's absolute positioning — make controls static and always visible */
.lp-builder .js-lpb-component > .lpb-controls {
  position: static !important;
  opacity: 1 !important;
  display: flex !important;
  width: 100%;
  box-shadow: none;
  border-radius: 0;
  padding: 10px 12px;
  background-color: #fff;
  border: 1px solid #d4d4d8;
  border-radius: 4px;
}

/* Give each component row spacing and a clean look */
.lp-builder .js-lpb-component {
  margin-bottom: 4px;
  outline: none !important;
  min-height: auto !important;
}

/* Make the component label take up available space */
.lp-builder .lpb-controls-label {
  flex: 1;
  font-weight: 600;
  font-size: 14px;
  color: #1a2a36;
  padding: 0 8px;
}

/* Hide field content in Dragula drag mirror (clone shown while dragging) */
.gu-mirror > .field,
.gu-mirror > .paragraph,
.gu-mirror > .clearfix,
.gu-mirror > article,
.gu-mirror > div:not(.lpb-controls):not(.js-lpb-ui) {
  display: none !important;
}

.gu-mirror > .lpb-controls {
  position: static !important;
  opacity: 1 !important;
  display: flex !important;
  width: 100%;
  padding: 10px 12px;
  background-color: #fff;
  border: 1px solid #d4d4d8;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Stack all edit modal form fields vertically, left-aligned */
.layout-paragraphs-component-form,
.ui-dialog.entity-browser-modal .ui-dialog-content form {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: left;
}

/* Save as Master button — matches LP's existing icon button style */
.lpb-save-master {
  cursor: pointer;
  height: 30px;
  width: 30px;
  border-radius: 3px;
  margin: 0;
  padding: 0;
  opacity: .5;
  /* Floppy disk / save icon (30x30 SVG, black fill) */
  background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 8C8.44772 8 8 8.44772 8 9V21C8 21.5523 8.44772 22 9 22H21C21.5523 22 22 21.5523 22 21V11.4142C22 11.1488 21.8946 10.8946 21.7071 10.7071L19.2929 8.29289C19.1054 8.10536 18.8512 8 18.5858 8H9Z' fill='%23000000'/%3E%3Cpath d='M11 8V12H18V8' stroke='white' stroke-width='1.5'/%3E%3Crect x='11' y='15' width='8' height='5' rx='0.5' fill='white'/%3E%3C/svg%3E%0A");
  background-size: cover;
  text-indent: -9999px;
  display: inline-block;
}
.lpb-save-master:hover {
  opacity: 1;
  background-color: rgba(0, 0, 0, .1);
}
.lpb-save-master:focus {
  outline: 2px solid blue;
}
/* White variant for layout section controls (dark background) */
.is-layout .lpb-save-master {
  opacity: 1;
  background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 8C8.44772 8 8 8.44772 8 9V21C8 21.5523 8.44772 22 9 22H21C21.5523 22 22 21.5523 22 21V11.4142C22 11.1488 21.8946 10.8946 21.7071 10.7071L19.2929 8.29289C19.1054 8.10536 18.8512 8 18.5858 8H9Z' fill='white'/%3E%3Cpath d='M11 8V12H18V8' stroke='%23333' stroke-width='1.5'/%3E%3Crect x='11' y='15' width='8' height='5' rx='0.5' fill='%23333'/%3E%3C/svg%3E%0A");
}
.is-layout .lpb-save-master:hover {
  background-color: rgba(0, 0, 0, .25);
}
.is-layout .lpb-save-master:focus {
  outline-color: white;
}

/* ===================================================================
   Component Chooser Modal — Premium UX (Task 9)
   =================================================================== */

/* 9.1 — Widen the chooser dialog */
.ui-dialog.lpb-dialog:has(.lpb-component-list) {
  width: 720px !important;
  max-width: 90vw !important;
  left: 50% !important;
  transform: translateX(-50%);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(0, 0, 0, 0.05);
}
/* Sleek title bar */
.ui-dialog.lpb-dialog:has(.lpb-component-list) .ui-dialog-titlebar {
  background: linear-gradient(135deg, #1a2a36 0%, #2d4a5e 100%);
  color: #fff;
  border: none;
  padding: 16px 20px;
  border-radius: 0;
}
.ui-dialog.lpb-dialog:has(.lpb-component-list) .ui-dialog-title {
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.ui-dialog.lpb-dialog:has(.lpb-component-list) .ui-dialog-titlebar-close {
  color: #fff;
  opacity: 0.7;
}
.ui-dialog.lpb-dialog:has(.lpb-component-list) .ui-dialog-titlebar-close:hover {
  opacity: 1;
}
/* Content area */
.ui-dialog.lpb-dialog:has(.lpb-component-list) .ui-dialog-content {
  padding: 0 !important;
  background: #f8f9fb;
}

/* 9.4 — Premium search input */
.lpb-component-list__search {
  padding: 16px 20px;
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
}
.lpb-component-list-search-input {
  width: 100%;
  padding: 12px 16px 12px 40px;
  border: 1px solid #d4d4d8;
  border-radius: 8px;
  font-size: 14px;
  background: #f8f9fb url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.333 12.667A5.333 5.333 0 107.333 2a5.333 5.333 0 000 10.667zM14 14l-2.9-2.9' stroke='%239ca3af' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 14px center no-repeat;
  box-sizing: border-box;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.lpb-component-list-search-input:focus {
  outline: none;
  border-color: #0071b8;
  box-shadow: 0 0 0 3px rgba(0, 113, 184, 0.12);
  background-color: #fff;
}

/* 9.2 — Card grid layout */
.lpb-component-list__group {
  padding: 16px 20px 20px;
}
.lpb-component-list__group--content,
.lpb-component-list__group--layout {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 12px !important;
}
.lpb-component-list__item {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 20px 12px 16px;
  text-align: center;
  transition: all 0.2s ease;
  cursor: pointer;
}
.lpb-component-list__item:hover {
  border-color: #38D9C2;
  box-shadow: 0 4px 12px rgba(56, 217, 194, 0.15);
  transform: translateY(-2px);
}
.lpb-component-list__item a {
  text-decoration: none !important;
  font-weight: 600;
  font-size: 12.5px;
  color: #1a2a36;
  display: block;
  line-height: 1.3;
}
.lpb-component-list__item:hover a {
  color: #0071b8;
}

/* Layout items — distinct style */
.lpb-component-list__group--layout .lpb-component-list__item {
  background: linear-gradient(135deg, #f0f4ff 0%, #e8eeff 100%);
  border-color: #c5d3ef;
}
.lpb-component-list__group--layout .lpb-component-list__item:hover {
  border-color: #3b6db5;
  box-shadow: 0 4px 12px rgba(59, 109, 181, 0.15);
}

/* 9.3 — Component type icons */
.lpb-component-list__item a::before {
  display: block;
  font-size: 28px;
  margin-bottom: 8px;
  line-height: 1;
  filter: grayscale(0.2);
}
/* Page structure */
.type-hero_section a::before { content: "\1F3AC"; }
.type-featured_text_block a::before { content: "\1F4DD"; }
.type-get_started_cta a::before { content: "\1F680"; }
.type-trial_cta a::before { content: "\2728"; }
/* Data & stats */
.type-statistics_section a::before { content: "\1F4CA"; }
.type-track_record_section a::before { content: "\1F3AF"; }
.type-timeline_section a::before { content: "\1F552"; }
/* Content cards & lists */
.type-card_grid a::before { content: "\1F0CF"; }
.type-marketing_card_grid a::before { content: "\1F5C3"; }
.type-news_list a::before { content: "\1F4F0"; }
.type-entity_reference_list a::before { content: "\1F4D1"; }
.type-view_embed a::before { content: "\1F50D"; }
/* People */
.type-author_biography a::before { content: "\1F464"; }
.type-author_quote a::before { content: "\1F4AC"; }
.type-bca_staff_members a::before { content: "\1F465"; }
.type-strategists_section a::before { content: "\1F9D1\200D\1F4BC"; }
.type-featured_author a::before { content: "\2B50"; }
/* Media & visuals */
.type-logos_quote a::before { content: "\1F3F7"; }
.type-image_text_blocks a::before { content: "\1F5BC"; }
/* Products */
.type-macro_research_products a::before { content: "\1F4DA"; }
/* Sign-off / misc */
.type-sign_off_advert a::before { content: "\1F4E2"; }

/* Items without a specific icon get a generic component icon */
.lpb-component-list__item a:not([class])::before { content: "\1F9E9"; }

/* ===================================================================
   "From Library" — Visually separated in the component chooser
   =================================================================== */

/* Make "From library" span the full grid width as a distinct section */
.type-from_library {
  grid-column: 1 / -1 !important;
  background: linear-gradient(135deg, #fef9e7 0%, #fef3cd 100%) !important;
  border: 2px solid #f0c040 !important;
  border-radius: 10px;
  padding: 16px 20px !important;
  display: flex !important;
  align-items: center;
  gap: 12px;
  text-align: left !important;
}
.type-from_library a::before {
  content: "\1F4E6" !important;
  font-size: 32px !important;
  margin-bottom: 0 !important;
  flex-shrink: 0;
}
.type-from_library a {
  font-size: 14px !important;
  font-weight: 700 !important;
}
.type-from_library a::after {
  content: " - Insert a shared component from the library";
  font-weight: 400;
  color: #666;
  font-size: 12px;
  display: block;
}
.type-from_library:hover {
  border-color: #e6a800 !important;
  box-shadow: 0 4px 12px rgba(240, 192, 64, 0.3) !important;
}

/* ===================================================================
   Shared Component Warning (Task 11.5)
   =================================================================== */

.shared-component-warning {
  background-color: #fef3cd;
  border: 1px solid #ffc107;
  border-radius: 6px;
  padding: 12px 16px;
  margin-bottom: 16px;
  font-size: 14px;
  font-weight: 600;
  color: #664d03;
  line-height: 1.5;
}

/* Edit library item link (Task 11.4) */
.edit-library-item-link {
  margin: 16px 0 8px;
}
.edit-library-item-link .button {
  font-size: 14px;
  padding: 10px 20px;
  font-weight: 600;
}
.edit-library-item-link .button--primary {
  background-color: #0071b8;
  color: #fff;
  border: none;
  border-radius: 6px;
}
.edit-library-item-link .button--primary:hover {
  background-color: #005a94;
}

/* Read-only library item preview in LP edit modal */
.library-item-preview {
  padding: 12px 16px;
  background: #f8f9fb;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  font-size: 14px;
  color: #1a2a36;
  margin-bottom: 8px;
}

/* Library help text below the autocomplete field */
.library-help-text {
  margin-top: 8px;
  font-size: 13px;
  color: #666;
}
.library-help-text p {
  margin: 0 0 4px;
}
.library-help-text a {
  color: #0071b8;
  text-decoration: underline;
  font-weight: 600;
}

/* From Library component row — visual distinction in LP builder */
.lp-builder .js-lpb-component .lpb-controls-label[data-type="from_library"],
.lp-builder .paragraph-type--from-library > .lpb-controls .lpb-controls-label {
  color: #0071b8;
  font-style: italic;
}
.lp-builder .paragraph-type--from-library > .lpb-controls {
  border-left: 3px solid #0071b8;
}