/* 
 * Form Styles - Final Drastic Refactoring
 * This file has been drastically simplified to remove ALL button styling conflicts.
 * It only contains layout rules essential for the dynamic form builder and the definitive
 * fix for the dropdown overlay issue. All button styles are now deferred to
 * unified-styles.css and other primary stylesheets.
 */

/* ==================================================================
   FORM GROUPS AND ARRAY LAYOUT
   - These rules define the structure of the form, but not the look and feel.
   - All hover transforms have been removed.
   ================================================================== */

   .form-group-card,
   .array-card {
       border: 1px solid #dee2e6;
       border-radius: 0.75rem;
       margin-bottom: 10px !important;
       background-color: #fff;
   }
   
   .card-header,
   .form-group-header,
    
   .card-body,
   .form-group-body,
   .array-card .card-body {
        padding: 10px !important;
   }
   
   .card-footer,
   
   .item-title {
       font-weight: 600;
       color: #495057;
       font-size: 1rem;
   }
   
   .array-items {
       padding: 10px !important;
       background-color: #f8f9fa;
       border-radius: 0.25rem;
   }
   
   .array-item {
       background-color: #fff;
       border: 1px solid #dee2e6;
       border-radius: 0.5rem;
       margin-bottom: 1rem;
   }
   
   .array-field-container {
       margin-bottom: 1.5rem;
   }
   
   .array-field-label {
       display: block;
       font-weight: 600;
       margin-bottom: 0.5rem;
       color: #ffffff00;
       display: none !important;
   }
   .array-item:last-child {
       margin-bottom: 0;
   }
   
   .array-item .card-header {
       gap: 5px;
   }
   
   .array-controls,
   .array-item-controls {
       display: flex;
       align-items: center;
       gap: 0.5rem;
   }
   
   /* ==================================================================
      FORM FIELD STYLES
      ================================================================== */
   .form-group {
       margin-bottom: 1rem;
       position: relative;
   }
   
   .form-label {
       display: block;
       margin-bottom: 0.25rem;
       font-weight: 500;
   }
   
   /* Date Input Styles - Comprende anche input dinamici JS */
   .form-control[type="date"],
   .form-control[type="datetime-local"],
   .form-control[type="time"],
   .form-control.date-text-input,
   .form-control.form-control-sm {
       background-color: #fff;
       border: 1px solid #dee2e6;
       border-radius: 0.5rem;
       padding: 0.5rem 0.75rem;
       font-size: 0.9rem;
       color: #495057;
       transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
   }
   
   .form-control[type="date"]:focus,
   .form-control[type="datetime-local"]:focus,
   .form-control[type="time"]:focus,
   .form-control.date-text-input:focus,
   .form-control.form-control-sm:focus {
       border-color: #007aff;
       outline: 0;
       box-shadow: 0 0 0 0.2rem rgba(0, 122, 255, 0.25);
   }
   
   /* Date Input Group Styles */
   .date-input-group {
       display: flex;
       width: 100%;
       margin-bottom: 0px;
   }
   
   .date-input-container {
       width: 100%;
       margin-bottom: 0.5rem;
   }
   
   .date-input-group .form-control,
   .date-input-group .date-text-input {
       flex-grow: 1;
       border-radius: 0.5rem 0 0 0.5rem;
       border-right: none;
   }
   
   .date-input-group .calendar-btn {
       flex-shrink: 0;
       border-radius: 0 0.5rem 0.5rem 0;
       background-color: #f8f9fa;
       border: 1px solid #dee2e6;
       border-left: none;
       padding: 0.5rem 0.75rem;
       color: #495057;
       cursor: pointer;
       transition: background-color 0.15s ease-in-out;
       margin-bottom: 10px;
   }
   
   .date-input-group .calendar-btn:hover {
       background-color: #e9ecef;
       color: #007aff;
   }
   
   /* Date Range Compact Styles - Mancanti */
   .date-range-compact-container {
       width: 100%;
       margin-bottom: 1rem;
   }
   
   .date-range-compact-title {
       font-size: 0.875rem;
       font-weight: 600;
       color: #495057;
       margin-bottom: 0.5rem;
   }
   
   .date-range-inputs-container {
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: 0.5rem;
       width: 100%;
   }
   
   .date-range-field {
       display: flex;
       flex-direction: column;
       width: 100%;
   }
   
   .date-range-label {
       font-size: 0.75rem;
       font-weight: 500;
       color: #6c757d;
       margin-bottom: 0.25rem;
   }
   
   .date-range-input {
       width: 100%;
       border: 1px solid #dee2e6;
       border-radius: 0.375rem;
       padding: 0.375rem 0.5rem;
       font-size: 0.875rem;
   }
   
   .date-range-input:focus {
       border-color: #007aff;
       box-shadow: 0 0 0 0.2rem rgba(0, 122, 255, 0.15);
       outline: none;
   }
   
   
   
   
   /* ==================================================================
      VALIDATION AND ERROR STYLES
      ================================================================== */
   
   .form-group.has-error .form-label {
       color: #dc3545;
   }
   
   .form-control.is-invalid,
   .form-select.is-invalid {
       border-color: #dc3545;
   }
   
   .invalid-feedback {
       display: none;
       width: 100%;
       margin-top: .25rem;
       font-size: .875em;
       color: #dc3545;
   }
   
   .form-group.has-error .invalid-feedback {
       display: block;
   }
   
   .form-label.required::after,
   .form-group.required-field .form-label::after {
       content: " *";
       color: #dc3545;
       font-weight: bold;
   }
   
   
   /* ==================================================================
      DROPDOWN OVERLAY FIX (Definitive)
      ================================================================== */
   
   /* When a special label dropdown is open, disable transforms on any potential
      stacking context creators to prevent the dropdown from being trapped.
      This targets classes from form-styles, apple-design-system, and toolbar-unified. */
   .special-label-dropdown-open .modern-card:hover,
   .special-label-dropdown-open .form-group-card:hover,
   .special-label-dropdown-open .array-card:hover,
   .special-label-dropdown-open .array-item:hover,
   .special-label-dropdown-open .unified-card:hover,
   .special-label-dropdown-open .apple-card:hover,
   .special-label-dropdown-open .form-control:hover,
   .special-label-dropdown-open .form-select:hover,
   .special-label-dropdown-open .btn-action:hover,
   .special-label-dropdown-open .toolbar-btn-expandable:hover,
   .special-label-dropdown-open .visionato-btn:hover {
       transform: none;
   }
   
   /* Ensure the dropdown menu itself has a high z-index to appear on top.
      This works because we've removed the stacking context traps. */
   .special-label-dropdown .dropdown-menu.show {
       z-index: 1060; /* Higher than Bootstrap's default modal z-index (1050) */
   }
   
   /* Animazione per toggle */
   .toggle-animation {
       transition: transform 0.2s ease-in-out;
   }
   
   .toggle-animation.rotated {
       transform: rotate(180deg);
   }
   
   /* Miglioramenti per gestione testo lungo e affollamento */
   .form-control {
       width: 100%;
       max-width: 100%;
       word-wrap: break-word;
       overflow-wrap: break-word;
   }
   
   /* Quando il titolo è troppo lungo, metti i controlli sulla riga successiva */
   @media (max-width: 576px), (max-width: 100%) {
       .array-item .card-header {
           flex-direction: column;
           align-items: flex-start;
       }
       
       .array-item-controls {
           align-self: flex-end;
           margin-top: 0.5rem;
       }
       
       .item-title {
           max-width: 100%;
       }
   }
   
   /* Permettere ai campi di textarea di adattarsi */
   textarea.form-control {
       min-height: 80px;
       height: auto;
       resize: vertical;
   }
   
   /* Campi di testo più flessibili */
   input[type="text"].form-control {
       height: auto;
       min-height: 38px;
       margin-bottom: 10px;
   }
   
   /* Tutti gli stili precedentemente presenti in injectFormStyles */
   .form-group {
       margin-bottom: 0px !important;
       position: relative;
   }
   
   /* Stili per campi con errore di validazione (required non compilati) */
   .form-group.has-error .form-label {
       color: #dc3545 !important;
   }
   
   .form-control.is-invalid,
   .form-select.is-invalid,
   .form-check-input.is-invalid {
       border-color: #dc3545 !important;
       background-color: #fff0f3 !important;
       box-shadow: 0 0 0 0.15rem rgba(220,53,69,0.08) !important;
       padding-right: calc(1.5em + .75rem);
       background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
       background-repeat: no-repeat;
       background-position: right calc(.375em + .1875rem) center;
       background-size: calc(.75em + .375rem) calc(.75em + .375rem);
       transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
   }
   
   .form-check-input.is-invalid ~ .form-check-label {
       color: #dc3545 !important;
   }
   
   .invalid-feedback {
       display: none;
       width: 100%;
       margin-top: .25rem;
       font-size: .875em;
       color: #dc3545;
       font-weight: 500;
       background: #fff5f5;
       border-left: 3px solid #dc3545;
       border-radius: 0.25rem;
       padding: 0.5rem 0.75rem;
       position: relative;
       z-index: 10;
       animation: slideInError 0.3s ease-out;
   }
   
   .invalid-feedback::before {
       content: '⚠';
       color: #dc3545;
       font-weight: bold;
       margin-right: 0.5rem;
   }
   
   .form-group.has-error .invalid-feedback {
       display: block;
   }
   
   /* Multiple invalid feedback messages */
   .form-group:has(.invalid-feedback + .invalid-feedback) .invalid-feedback {
       margin-top: 0.125rem;
       font-size: 0.8em;
       padding: 0.375rem 0.5rem;
   }
   
   .form-group:has(.invalid-feedback + .invalid-feedback) .invalid-feedback::before {
       content: '•';
       font-size: 0.9rem;
   }
   
   /* Stack invalid feedback properly */
   .form-group .invalid-feedback:not(:first-of-type) {
       margin-top: 0.125rem;
       border-radius: 0.125rem;
   }
   
   /* Ensure invalid feedback doesn't overlap with subsequent elements */
   .form-group:has(.invalid-feedback) {
       margin-bottom: 1.75rem;
   }
   
   .form-group:has(.invalid-feedback) + .form-group {
       margin-top: 0.5rem;
   }
   
   /* Animazione shake per i campi non validi (opzionale, per maggiore evidenza) */
   @keyframes shake {
       0% { transform: translateX(0); }
       20% { transform: translateX(-4px); }
       40% { transform: translateX(4px); }
       60% { transform: translateX(-3px); }
       80% { transform: translateX(3px); }
       100% { transform: translateX(0); }
   }
   .form-control.is-invalid {
       animation: shake 0.25s;
   }
   
   /* Evidenzia i campi obbligatori con un asterisco rosso accanto alla label */
   .form-label.required::after,
   .form-group.required-field .form-label::after {
       content: " *";
       color: #dc3545;
       font-weight: bold;
       margin-left: 0.15em;
       font-size: 1em;
       vertical-align: middle;
   }
   
   /* Opzionale: sfondo leggermente evidenziato per i campi required */
   .form-group.required .form-control,
   .form-group.required .form-select,
   .form-group.required-field .form-control,
   .form-group.required-field .form-select,
   .form-group.required-field .search-select-current {
       background-color: #fff8f0 !important;
       border-left: 4px solid #ffc107 !important;
       z-index: unset !important;
   }
   
   .form-group.required .form-control:focus,
   .form-group.required .form-select:focus,
   .form-group.required-field .form-control:focus,
   .form-group.required-field .form-select:focus,
   .form-group.required-field .search-select-current:focus {
       background-color: #fff3e0 !important;
       border-left: 4px solid #ffa000 !important;
   }
   
   /* Stile specifico per i campi search-select required */
   .search-select-current.required-field {
       background-color: #fff8f0 !important;
       border-left: 4px solid #ffc107 !important;
   }
   
   .search-select-current.required-field:hover {
       background-color: #fff3e0 !important;
       border-left: 4px solid #ffa000 !important;
   }
   
   /* ===== STILI PER LA GESTIONE MIGLIORATA DEI TEMPLATE ARRAY ===== */
   
   /* Animazione per i nuovi elementi aggiunti */
   .array-item.highlight-new {
       animation: highlightNew 2s ease-out;
       border-color: #28a745 !important;
   }
   
   @keyframes highlightNew {
       0% {
           background-color: #d4edda;
           border-color: #28a745;
           transform: scale(1.02);
           box-shadow: 0 0.5rem 1rem rgba(40, 167, 69, 0.3);
       }
       50% {
           background-color: #f8f9fa;
           transform: scale(1.01);
       }
       100% {
           background-color: #fff;
           border-color: #e7eaf3;
           transform: scale(1);
           box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.08);
       }
   }
   
   /* Stile per elementi marcati come nuovi */
   .array-item[data-is-new="true"] {
       position: relative;
   }
   
   .array-item[data-is-new="true"]::before {
       content: "NUOVO";
       position: absolute;
       top: -8px;
       right: 10px;
       background: linear-gradient(45deg, #28a745, #20c997);
       color: white;
       padding: 2px 8px;
       border-radius: 12px;
       font-size: 0.7rem;
       font-weight: bold;
       z-index: 10;
       animation: fadeInOut 3s ease-out forwards;
   }
   
   @keyframes fadeInOut {
       0% { opacity: 0; transform: translateY(-10px); }
       20% { opacity: 1; transform: translateY(0); }
       80% { opacity: 1; transform: translateY(0); }
       100% { opacity: 0; transform: translateY(-10px); }
   }
   
   /* Errori di template */
   .template-error {
       background: linear-gradient(135deg, #fff3cd, #ffeaa7);
       border-left: 4px solid #ffc107;
       padding: 0.75rem;
       margin: 0.5rem 0;
       border-radius: 0.375rem;
       animation: slideInError 0.3s ease-out;
   }
   
   @keyframes slideInError {
       from {
           opacity: 0;
           transform: translateX(-20px);
       }
       to {
           opacity: 1;
           transform: translateX(0);
       }
   }
   
   /* Miglioramenti per i pulsanti di azione array */
   .array-controls .btn-action {
       transition: all 0.2s ease-in-out;
       position: relative;
       overflow: hidden;
   }
   
   .array-controls .btn-action::before {
       content: '';
       position: absolute;
       top: 50%;
       left: 50%;
       width: 0;
       height: 0;
       background: rgba(255, 255, 255, 0.3);
       border-radius: 50%;
       transform: translate(-50%, -50%);
       transition: width 0.3s, height 0.3s;
   }
   
   .array-controls .btn-action:hover::before {
       width: 100%;
       height: 100%;
   }
   
   .array-controls .btn-action:active {
       transform: scale(0.95);
   }