/* Reference Tailwind for @apply directives in this imported file */
@reference "tailwindcss";

/* Module shared styles (empty states, structural CSS for Blade templates) */
@import "./modules.css";

/* ================================================================
   VISUAL BUILDER STYLES - Divi-style component system
   ================================================================ */

/* ----------------------------------------------------------------
   DRAG & DROP STYLES
   ---------------------------------------------------------------- */
.vb-ghost {
    opacity: 0.4;
    background: rgba(59, 130, 246, 0.1) !important; /* primary/blue with opacity */
    border: 2px dashed rgb(59, 130, 246) !important;
}
.vb-chosen {
    opacity: 0.9;
}
.vb-drag {
    opacity: 0.9;
}

/* ----------------------------------------------------------------
   SUB-ELEMENT HOVER - Evidenzia gli elementi interni cliccabili
   Appare solo quando il modulo padre è selezionato.
   ---------------------------------------------------------------- */
.vb-subelement-hover {
    /* inset box-shadow: non viene clippato da overflow:hidden del parent */
    box-shadow: inset 0 0 0 2px #10b981 !important; /* emerald-500 */
    cursor: pointer !important;
    position: relative;
    z-index: 10;
}

/* ----------------------------------------------------------------
   DRAWER LOCK - Feedback visivo quando il drawer è aperto
   Gli elementi non selezionati mostrano cursore not-allowed.
   Il blocco funzionale è gestito in JS (useComponentSelection).
   ---------------------------------------------------------------- */
.vb-canvas-locked .vb-hover-target:not(.vb-selected) {
    cursor: not-allowed !important;
}

/* ----------------------------------------------------------------
   HOVER SYSTEM - Divi-style rings via ::after overlay
   Uses pseudo-element with inset box-shadow to ensure rings are
   always visible above content (images, positioned elements).
   ---------------------------------------------------------------- */
.vb-hover-target {
    position: relative;
}

.vb-hover-target::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 50;
    pointer-events: none;
    box-shadow: none;
    transition: box-shadow 0.15s ease-in-out;
}

/* Ring colors for hover/selected state - color-coded by component type */
.vb-section-ring::after {
    box-shadow: inset 0 0 0 3px rgb(168 85 247) !important; /* purple-500 */
}
.vb-row-ring::after {
    box-shadow: inset 0 0 0 3px rgb(59 130 246) !important; /* blue-500 */
}
.vb-column-ring::after {
    box-shadow: inset 0 0 0 3px rgb(34 197 94) !important; /* green-500 */
}
.vb-content-ring::after {
    box-shadow: inset 0 0 0 3px rgb(107 114 128) !important; /* gray-500 */
}

/* ----------------------------------------------------------------
   COMPONENT ACTIONS - Floating action buttons
   ---------------------------------------------------------------- */
.vb-actions {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 100; /* Increased from 20 to ensure actions are always on top */
    display: flex;
    gap: 0.125rem;
    padding: 0.25rem 0.375rem;
    border-radius: 0 0 0 0.5rem; /* solo angolo bottom-left arrotondato */
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}
.vb-actions button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 0.25rem;
    background: transparent;
    color: white;
    transition: all 0.15s ease-in-out;
}
.vb-actions button:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Action container colors by component type */
.vb-actions--section { background-color: rgb(168 85 247); } /* purple-500 */
.vb-actions--row { background-color: rgb(59 130 246); } /* blue-500 */
.vb-actions--column { background-color: rgb(34 197 94); } /* green-500 */

/* Module actions: positioned at top center, fully visible above module content */
.vb-actions--content,
.vb-actions--text,
.vb-actions--heading,
.vb-actions--image,
.vb-actions--button,
.vb-actions--divider,
.vb-actions--spacer,
.vb-actions--video,
.vb-actions--gallery,
.vb-actions--icon,
.vb-actions--social-icons,
.vb-actions--counter,
.vb-actions--accordion,
.vb-actions--tabs,
.vb-actions--slider,
.vb-actions--pricing-table,
.vb-actions--call-to-action,
.vb-actions--popup {
    background-color: rgb(107 114 128); /* gray-500 */
    top: 0;
    right: 50%;
    transform: translate(50%, -50%); /* il bordo superiore passa al centro */
    border-radius: 0.5rem;
}

/* Drag handle cursor */
.vb-action-drag { cursor: grab; }
.vb-action-drag:active { cursor: grabbing; }

/* Drag handle classes for sortable */
.vb-section-handle,
.vb-row-handle,
.vb-column-handle,
.vb-content-handle {
    cursor: grab;
}
.vb-section-handle:active,
.vb-row-handle:active,
.vb-column-handle:active,
.vb-content-handle:active {
    cursor: grabbing;
}

/* ----------------------------------------------------------------
   ADD BUTTON - Divi-style centered button
   ---------------------------------------------------------------- */
.vb-add-button {
    z-index: 30;
}
/* Absolute positioning for component-level add buttons */
.vb-section .vb-add-button,
.vb-row .vb-add-button,
.vb-column .vb-add-button {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 50%);
}
.vb-add-button button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 9999px;
    background-color: rgb(59, 130, 246); /* primary-500 fallback */
    color: white;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    transition: all 0.15s ease-in-out;
}
.vb-add-button button:hover {
    background-color: rgb(37, 99, 235); /* primary-600 */
    transform: scale(1.1);
}

/* ----------------------------------------------------------------
   BORDER BUTTONS (Add Siblings) - Positioned outside at bottom border
   ---------------------------------------------------------------- */

/* Add section button (border - adds sibling section) */
.vb-add-section-button {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 50%);
    z-index: 25;
}
.vb-add-section-button button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 9999px;
    background-color: rgb(168 85 247); /* purple-500 - Divi section color */
    color: white;
    box-shadow: 0 2px 4px rgb(0 0 0 / 0.1);
    transition: all 0.15s ease-in-out;
}
.vb-add-section-button button:hover {
    background-color: rgb(147 51 234); /* purple-600 */
    transform: scale(1.1);
}

/* Add row button (border - adds sibling row) */
.vb-add-row-button {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 50%);
    z-index: 25;
}
.vb-add-row-button button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 9999px;
    background-color: rgb(59 130 246); /* blue-500 - Divi row color */
    color: white;
    box-shadow: 0 2px 4px rgb(0 0 0 / 0.1);
    transition: all 0.15s ease-in-out;
}
.vb-add-row-button button:hover {
    background-color: rgb(37 99 235); /* blue-600 */
    transform: scale(1.1);
}


/* ----------------------------------------------------------------
   INTERNAL BUTTONS (Add Children) - Positioned inside at bottom
   ---------------------------------------------------------------- */

/* Add row internal button (adds child row to section - centered when empty) */
.vb-add-row-internal {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 25;
}
.vb-add-row-internal button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 9999px;
    background-color: rgb(59 130 246); /* blue-500 - adds row (child) */
    color: white;
    box-shadow: 0 2px 4px rgb(0 0 0 / 0.1);
    transition: all 0.15s ease-in-out;
}
.vb-add-row-internal button:hover {
    background-color: rgb(37 99 235); /* blue-600 */
    transform: scale(1.1);
}

/* Global element badge (top-left corner) */
.vb-global-badge {
    position: absolute;
    top: 4px;
    left: 4px;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background-color: rgb(107 114 128); /* gray-500 default (modules) */
    color: white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    pointer-events: none;
}
.vb-global-badge--section { background-color: rgb(168 85 247); } /* purple-500 */
.vb-global-badge--row { background-color: rgb(59 130 246); } /* blue-500 */

/* Add module button (border - adds sibling module below) */
.vb-add-module-button {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 50%);
    z-index: 25;
}
.vb-add-module-button button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 9999px;
    background-color: rgb(107 114 128); /* gray-500 - module color */
    color: white;
    box-shadow: 0 2px 4px rgb(0 0 0 / 0.1);
    transition: all 0.15s ease-in-out;
}
.vb-add-module-button button:hover {
    background-color: rgb(75 85 99); /* gray-600 */
    transform: scale(1.1);
}

/* Add content internal button (adds child module to column - centered when empty) */
.vb-add-content-internal {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 25;
}
.vb-add-content-internal button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.125rem;
    height: 1.125rem;
    border-radius: 9999px;
    background-color: rgb(107 114 128); /* gray-500 - adds module (child) */
    color: white;
    box-shadow: 0 2px 4px rgb(0 0 0 / 0.1);
    transition: all 0.15s ease-in-out;
}
.vb-add-content-internal button:hover {
    background-color: rgb(75 85 99); /* gray-600 */
    transform: scale(1.1);
}

/* ----------------------------------------------------------------
   COMPONENT CONTAINERS - Minimum heights and spacing
   ---------------------------------------------------------------- */
.vb-section {
    position: relative;
}

/* Section Divider SVG overlays */
.vb-section-divider {
    position: absolute;
    left: 0;
    width: 100%;
    line-height: 0;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}
.vb-section-divider--top {
    top: 0;
}
.vb-section-divider--bottom {
    bottom: 0;
}
.vb-section-divider svg {
    display: block;
    width: 100%;
    height: 100%;
}

.vb-row {
    position: relative;
}
.vb-row > .vb-sortable-columns {
    display: flex;
    flex-wrap: nowrap;
    gap: inherit;
}

.vb-column {
    position: relative;
    flex: 1 1 0%;
    min-width: 0;
    overflow: clip;
    overflow-clip-margin: 2rem;
}

.vb-content {
    position: relative;
}

/* Image module: clip content to respect border-radius */
.vb-module-image {
    border-radius: inherit;
    overflow: hidden;
}
.vb-module-image img {
    max-width: 100%;
    height: auto;
    display: block;
}
.vb-content:last-child {
    margin-bottom: 0;
}

/* Sortable containers */
.vb-sortable-sections,
.vb-sortable-rows,
.vb-sortable-columns,
.vb-sortable-content {
    min-height: 20px;
}

/* ----------------------------------------------------------------
   EMPTY STATES
   ---------------------------------------------------------------- */
.vb-empty-section {
    @apply flex items-center justify-center min-h-[60px] border-2 border-dashed border-purple-300 dark:border-purple-700 rounded-lg bg-purple-50/50 dark:bg-purple-900/10;
}

.vb-empty-row {
    @apply flex items-center justify-center min-h-[40px] border-2 border-dashed border-blue-300 dark:border-blue-700 rounded-lg bg-blue-50/50 dark:bg-blue-900/10;
}

.vb-empty-column {
    @apply flex items-center justify-center min-h-[30px] border-2 border-dashed border-green-300 dark:border-green-700 rounded-lg bg-green-50/50 dark:bg-green-900/10;
}

/* ----------------------------------------------------------------
   UTILITY CLASSES - Reusable patterns for PropTypes and UI
   ---------------------------------------------------------------- */

/* Labels */
.vb-label {
    @apply text-sm font-medium text-gray-700 dark:text-gray-300 block mb-2;
}

.vb-label-sm {
    @apply text-xs text-gray-500 dark:text-gray-400 block mb-1;
}

/* Input Groups */
.vb-input-row {
    @apply flex gap-1;
}

.vb-input-row > .p-inputnumber,
.vb-input-row > .p-inputtext {
    @apply flex-1;
}

.vb-input-row > .p-select {
    width: 5rem !important;
    min-width: 5rem !important;
    @apply flex-shrink-0;
}

/* SizeInput Component (number + unit selector) */
.vb-size-input {
    @apply flex gap-1;
}

.vb-size-input > .p-inputnumber {
    @apply flex-1;
}

.vb-size-input > .p-select {
    width: 6rem !important;
    min-width: 6rem !important;
    @apply flex-shrink-0;
}

/* Slider with value display */
.vb-slider-row {
    @apply flex gap-2 items-center;
}

.vb-slider-row > .p-slider {
    @apply flex-1;
}

.vb-slider-value {
    @apply text-xs text-gray-500 w-12 text-right flex-shrink-0;
}

/* Color picker with input */
.vb-color-row {
    @apply flex items-center gap-2;
}

.vb-color-row > .p-inputtext {
    @apply flex-1;
}

/* Toggle/Link buttons (for paired values) */
.vb-btn-link {
    @apply p-1.5 rounded transition;
}

.vb-btn-link--active {
    @apply text-primary-500 bg-primary-50 dark:bg-primary-900/30;
}

.vb-btn-link--inactive {
    @apply text-gray-400 hover:text-gray-600 dark:hover:text-gray-300;
}

/* Reset button (small text link) */
.vb-btn-reset {
    @apply text-xs text-gray-500 hover:text-primary-600 dark:text-gray-400 dark:hover:text-primary-400 transition;
}

.vb-btn-reset:disabled {
    @apply opacity-50 cursor-not-allowed;
}

/* Toolbar buttons */
.vb-btn-toolbar {
    @apply p-2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition;
    @apply inline-flex items-center justify-center;
}

.vb-btn-toolbar--with-chevron {
    @apply gap-0.5;
}

.vb-btn-toolbar:disabled {
    @apply opacity-40 cursor-not-allowed;
}

.vb-btn-toolbar--active {
    @apply bg-gray-200 dark:bg-gray-700 text-gray-900 dark:text-white;
}

/* Alignment button group */
.vb-btn-group {
    @apply flex gap-1;
}

.vb-btn-option {
    @apply flex-1 py-2 px-3 border rounded text-sm transition;
    @apply bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:border-gray-400;
}

.vb-btn-option--active {
    @apply bg-primary-500 border-primary-500 text-white;
}

/* Preview boxes */
.vb-preview {
    @apply bg-gray-100 dark:bg-gray-800 rounded p-4 flex items-center justify-center;
}

.vb-preview-box {
    @apply w-16 h-16 rounded bg-gradient-to-br from-blue-500 to-purple-600 shadow-lg;
}

/* Grid layouts */
.vb-grid-2 {
    @apply grid grid-cols-2 gap-2;
}

.vb-grid-3 {
    @apply grid grid-cols-3 gap-2;
}

/* Divider */
.vb-divider {
    @apply border-gray-200 dark:border-gray-700;
}

/* Help text (small description under inputs) */
.vb-help-text {
    @apply text-xs text-gray-500 dark:text-gray-400 mt-1;
}

/* Checkbox label (inline with checkbox) */
.vb-checkbox-label {
    @apply text-sm text-gray-700 dark:text-gray-300 cursor-pointer;
}

/* PropType input overrides (compact) */
.vb-proptype-compact .p-inputnumber-input,
.vb-proptype-compact .p-inputtext {
    @apply py-1.5 px-2 text-xs text-center;
}

.vb-proptype-compact .p-select-label {
    @apply py-1.5 px-2 text-xs;
}

.vb-proptype-compact .p-select-dropdown {
    @apply w-6 p-0;
}

/* Filter/Slider row with label header and reset */
.vb-filter-header {
    @apply flex items-center justify-between mb-1;
}

.vb-btn-reset-icon {
    @apply text-xs text-gray-400 hover:text-primary-500 transition;
}

/* Reset icon SVG */
.vb-icon-reset {
    @apply w-3 h-3;
}