// wireframe-editor.component.scss

// Professional Black & White Theme Variables
$primary-black: #212529;
$secondary-black: #495057;
$light-gray: #f8f9fa;
$medium-gray: #e9ecef;
$border-gray: #dee2e6;
$text-gray: #6c757d;
$white: #ffffff;
$success-green: #28a745;
$danger-red: #dc3545;
$warning-orange: #fd7e14;
$info-blue: #17a2b8;

// Animation Variables
$transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
$transition-fast: all 0.2s ease;
$shadow-light: 0 2px 8px rgba(0, 0, 0, 0.05);
$shadow-medium: 0 4px 12px rgba(0, 0, 0, 0.1);
$shadow-heavy: 0 8px 25px rgba(0, 0, 0, 0.15);

.zoom-controls {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  width: '50px';
  
  button {
    width: 32px;
    height: 32px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.infinite-grid {
  background-image: 
    linear-gradient(rgba(0, 0, 0, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.1) 1px, transparent 1px);
  background-size: 20px 20px;
  opacity: 0.8;
  z-index: 1;
}

.connected-sections {
  display: flex;
  flex-direction: column;
  gap: 0;
  
  .section-wrapper {
    width: 100%;
    margin: 0;
    padding: 0;
    
    .section-content {
      width: 100% ;
      max-width: 100% ;
      
      > * {
        margin: 0 ;
        padding: 0 ;
        max-width: 100% ;
      }
    }
  }
}

.wireframe-editor {
  position: relative ;
  width: 100% ;
  height: 100vh ;
  overflow: hidden ;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif ;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) ;

  // Fixed Right Sidebar
  .wireframe-controls-sidebar {
    position: fixed ;
  top: 50px; // Start from -30px as requested
  transition: width 0.3s ease, transform 0.3s ease;
  
  &.collapsed {
    width: 60px;
    
    .sidebar-header h2,
    .control-section h3,
    .action-btn span,
    label,
    .form-control {
      opacity: 0;
      pointer-events: none;
    }
    
    .action-btn {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      padding: 0;
      margin: 5px auto;
      
      i {
        margin: 0;
      }
    }
  }
    right: 0 ;
    width: 380px ;
    height: 100vh ;
    background: linear-gradient(135deg, $white 0%, $light-gray 50%, $medium-gray 100%) ;
    border-left: 2px solid $border-gray ;
    z-index: 1500 ;
    overflow-y: auto ;
    box-shadow: -8px 0 30px rgba(0, 0, 0, 0.15) ;
    backdrop-filter: blur(20px) ;

    // Custom Scrollbar
    &::-webkit-scrollbar {
      width: 8px ;
    }

    &::-webkit-scrollbar-track {
      background: rgba(241, 241, 241, 0.5) ;
      border-radius: 4px ;
    }

    &::-webkit-scrollbar-thumb {
      background: linear-gradient(135deg, #c1c1c1 0%, #a8a8a8 100%) ;
      border-radius: 4px ;
      transition: $transition-fast ;

      &:hover {
        background: linear-gradient(135deg, #a8a8a8 0%, #9a9a9a 100%) ;
      }
    }

    // Sidebar Header
    .sidebar-header {
      padding: 30px 25px ;
      border-bottom: 2px solid $border-gray ;
      background: linear-gradient(135deg, $white 0%, rgba(248, 249, 250, 0.8) 100%) ;
      position: sticky ;
      top: 0 ;
      z-index: 10 ;
      backdrop-filter: blur(10px) ;
      display: flex ;
      flex-direction: row;

      h2 {
        margin: 0 ;
        font-size: 20px ;
        font-weight: 700 ;
        color: $primary-black ;
        background: linear-gradient(135deg, $primary-black 0%, $secondary-black 100%) ;
        -webkit-background-clip: text ;
        -webkit-text-fill-color: transparent ;
        background-clip: text ;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) ;
      }
    }

    // Sidebar Content
    .sidebar-content {
      padding: 25px ;

      .control-section {
        background: rgba(255, 255, 255, 0.9) ;
        border-radius: 12px ;
        padding: 20px ;
        margin-bottom: 20px ;
        border: 1px solid rgba(222, 226, 230, 0.8) ;
        box-shadow: $shadow-light ;
        backdrop-filter: blur(10px) ;
        transition: $transition-smooth ;
        position: relative ;
        overflow: hidden ;

        &::before {
          content: '' ;
          position: absolute ;
          top: 0 ;
          left: 0 ;
          right: 0 ;
          height: 3px ;
          background: linear-gradient(90deg, $primary-black 0%, $secondary-black 50%, $primary-black 100%) ;
          opacity: 0 ;
          transition: $transition-smooth ;
        }

        &:hover {
          transform: translateY(-2px) ;
          box-shadow: $shadow-medium ;
          border-color: rgba(33, 37, 41, 0.2) ;

          &::before {
            opacity: 1 ;
          }
        }

        h3 {
          margin: 0 0 15px 0 ;
          font-size: 16px ;
          font-weight: 600 ;
          color: $secondary-black ;
          position: relative ;
          padding-bottom: 8px ;

          &::after {
            content: '' ;
            position: absolute ;
            bottom: 0 ;
            left: 0 ;
            width: 30px ;
            height: 2px ;
            background: linear-gradient(90deg, $primary-black 0%, $secondary-black 100%) ;
            border-radius: 1px ;
          }
        }

        // Action Buttons
        .action-btn {
          width: 100% ;
          margin-bottom: 12px ;
          padding: 12px 16px ;
          border: none ;
          border-radius: 8px ;
          cursor: pointer ;
          font-size: 13px ;
          font-weight: 600 ;
          transition: $transition-smooth ;
          display: flex ;
          align-items: center ;
          justify-content: center ;
          gap: 8px ;
          text-decoration: none ;
          position: relative ;
          overflow: hidden ;

          &::before {
            content: '' ;
            position: absolute ;
            top: 0 ;
            left: -100% ;
            width: 100% ;
            height: 100% ;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) ;
            transition: left 0.5s ;
          }

          &:hover::before {
            left: 100% ;
          }

          &.primary {
            background: linear-gradient(135deg, $primary-black 0%, $secondary-black 100%) ;
            color: $white ;
            box-shadow: $shadow-light ;

            &:hover:not(:disabled) {
              transform: translateY(-2px) scale(1.02) ;
              box-shadow: $shadow-heavy ;
              background: linear-gradient(135deg, $secondary-black 0%, $primary-black 100%) ;
            }

            &:active {
              transform: translateY(-1px) scale(0.98) ;
            }
          }

          &.secondary {
            background: linear-gradient(135deg, $white 0%, $light-gray 100%) ;
            color: $primary-black ;
            border: 2px solid $border-gray ;

            &:hover:not(:disabled) {
              transform: translateY(-2px) scale(1.02) ;
              box-shadow: $shadow-medium ;
              border-color: $primary-black ;
              background: linear-gradient(135deg, $light-gray 0%, $white 100%) ;
            }

            &:active {
              transform: translateY(-1px) scale(0.98) ;
            }
          }

          &.small {
            padding: 10px 14px ;
            font-size: 12px ;
            margin-bottom: 8px ;
          }

          i {
            font-size: 14px ;
            transition: $transition-fast ;
          }

          &:hover i {
            transform: scale(1.1) rotate(3deg) ;
          }
        }

        // Form Controls
        .form-control {
          width: 100% ;
          padding: 10px 14px ;
          border: 2px solid $border-gray ;
          border-radius: 6px ;
          font-size: 13px ;
          transition: $transition-smooth ;
          background: rgba(255, 255, 255, 0.8) ;
          margin-bottom: 12px ;

          &:focus {
            outline: none ;
            border-color: $primary-black ;
            box-shadow: 0 0 0 3px rgba(33, 37, 41, 0.1) ;
            background: $white ;
            transform: translateY(-1px) ;
          }

          &:hover {
            border-color: $secondary-black ;
            transform: translateY(-1px) ;
          }
        }

        // Style Grid
        .style-grid {
          display: grid ;
          grid-template-columns: 1fr 1fr ;
          gap: 12px ;
          margin-bottom: 12px ;
        }

        // Color Controls
        .color-controls {
          display: flex ;
          gap: 12px ;
          margin-bottom: 15px ;

          .color-input-group {
            flex: 1 ;
            display: flex ;
            flex-direction: column ;
            align-items: center ;
            gap: 6px ;

            .color-label {
              font-size: 11px ;
              font-weight: 600 ;
              color: $text-gray ;
              text-transform: uppercase ;
              letter-spacing: 0.5px ;
            }

            .color-picker {
              width: 50px ;
              height: 35px ;
              border: 2px solid $border-gray ;
              border-radius: 6px ;
              cursor: pointer ;
              transition: $transition-smooth ;

              &:hover {
                transform: scale(1.05) ;
                box-shadow: $shadow-medium ;
                border-color: $primary-black ;
              }
            }
          }
        }
        .wf-section-list {
  max-height: 300px !important;
  overflow-y: auto !important;
  margin: 12px 0 !important;
  border: 1px solid #e9ecef !important;
  border-radius: 8px !important;
  padding: 8px !important;
  background: #ffffff !important;
  
  .wf-section-item {
    display: flex !important;
    align-items: center !important;
    padding: 12px !important;
    margin-bottom: 8px !important;
    border: 1px solid #e9ecef !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    position: relative !important;
    background: #f8f9fa !important;
    
    &:hover {
      border-color: #007bff !important;
      background-color: #ffffff !important;
      transform: translateY(-2px) !important;
      box-shadow: 0 3px 6px rgba(0,0,0,0.1) !important;
    }
    
    .section-icon {
      width: 40px !important;
      height: 40px !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      background: #ffffff !important;
      border-radius: 6px !important;
      margin-right: 12px !important;
      border: 1px solid #dee2e6 !important;
      
      i {
        font-size: 18px !important;
        color: #007bff !important;
      }
    }
    
    .section-info {
      flex: 1 !important;
      
      .section-name {
        font-weight: 600 !important;
        font-size: 14px !important;
        color: #2c3e50 !important;
        margin-bottom: 4px !important;
      }
      
      .section-desc {
        font-size: 12px !important;
        color: #7f8c8d !important;
        line-height: 1.4 !important;
      }
    }
    
    .delete-custom-btn {
      position: absolute !important;
      top: 50% !important;
      right: 12px !important;
      transform: translateY(-50%) !important;
      width: 28px !important;
      height: 28px !important;
      border: none !important;
      background: #dc3545 !important;
      color: white !important;
      border-radius: 50% !important;
      display: none !important;
      align-items: center !important;
      justify-content: center !important;
      cursor: pointer !important;
      transition: background 0.2s ease !important;
      
      &:hover {
        background: #c82333 !important;
      }
    }
    
    &:hover .delete-custom-btn {
      display: flex !important;
    }
  }
}

        // Custom Section for adding new sections
        .add-custom-section {
          display: flex ;
          align-items: center ;
          gap: 12px ;
          margin-top: 20px ;
          padding: 12px ;
          background: rgba(255, 255, 255, 0.9) ;
          border-radius: 8px ;
          box-shadow: $shadow-light ;
          transition: $transition-smooth ;

          &:hover {
            transform: translateY(-2px) ;
            box-shadow: $shadow-medium ;
          }

          .add-icon {
            font-size: 24px ;
            color: $primary-black ;
            cursor: pointer ;

            &:hover {
              color: $secondary-black ;
            }
          }

          .add-text {
            font-size: 14px ;
            color: $text-gray ;
            font-weight: 600 ;
          }
        }
      }
    }
  }

  .zoom-controls-new {
  position: fixed;
  bottom: 30px;
  left: 30px;
  display: flex;
  gap: 8px;
  z-index: 1000;
  
  .zoom-btn {
    width: 45px;
    height: 45px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    color: $primary-black;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: $transition-smooth;
    font-size: 16px;
    box-shadow: $shadow-medium;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(222, 226, 230, 0.8);

    &:hover {
      transform: translateY(-2px) scale(1.05);
      box-shadow: $shadow-heavy;
      background: $primary-black;
      color: white;
    }
  }
}

/* Enhanced Loading Styles */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.9);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;

  
  .loading-container {
    text-align: center;
    max-width: 400px;
    padding: 2rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    
    .loading-text {
  text-align: center;
  margin-top: 10px;
  color: #333;
  font-weight: 500;
}
    
    .loading-subtext {
      color: #666;
      font-size: 0.9rem;
      margin-bottom: 1.5rem;
    }
    
    .progress-bar {
  width: 300px;
  height: 20px;
  background: #f0f0f0;
  border-radius: 10px;
  overflow: hidden;

      
      .progress-fill {
  height: 100%;
  background: #2196F3;
  transition: width 0.3s ease;
}
    }
    
    mat-spinner {
      margin: 0 auto;
    }
  }
}


  // Main Canvas Area
  .canvas-main-area {
    position: relative ;
   width: calc(100% - 380px);
  margin-left: 0px !important;
  transition: width 0.3s ease;
  &.sidebar-collapsed {
    width: calc(100% - 60px);
  }
    height: 100vh ;
    overflow: hidden ;
    background: #fafafa ;

    // Infinite Grid Background
    .infinite-grid {
      position: absolute ;
      top: 0 ;
      left: 0 ;
      width: 200% ;
      height: 200% ;
      background-image: 
        radial-gradient(circle, #ddd 1px, transparent 1px),
        radial-gradient(circle, #eee 1px, transparent 1px) ;
      background-size: 25px 25px, 5px 5px ;
      background-position: 0 0, 12.5px 12.5px ;
      opacity: 0.6 ;
      pointer-events: none ;
      transform-origin: 0 0 ;
      transition: transform 0.1s ease-out ;
    }

    // Canvas Container
    .canvas-container {
      position: relative ;
      width: 100% ;
      height: 100% ;
      overflow: auto ;
      cursor: grab ;

      &:active {
        cursor: grabbing ;
      }

      &.panning {
        cursor: grabbing ;
      }
    }


    .page-actions-new {
  position: fixed;
  top: 20px;
  left: 20px;
  display: flex;
  gap: 10px;
  z-index: 1000;
  
  .action-btn {
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: $transition-smooth;
    display: flex;
    align-items: center;
    gap: 6px;
    box-shadow: $shadow-light;
    
    &.primary {
      background: $primary-black;
      color: white;
      
      &:hover {
        background: $secondary-black;
        transform: translateY(-1px);
      }
    }
    
    &.success {
      background: $success-green;
      color: white;
      
      &:hover {
        background: darken($success-green, 10%);
        transform: translateY(-1px);
      }
    }
    
    i {
      font-size: 12px;
    }
  }
}

// Responsive updates
@media (max-width: 768px) {
  .canvas-main-area {
    &.sidebar-collapsed {
      width: 100%;
    }
  }
  
  .zoom-controls-new {
    bottom: 20px;
    left: 20px;
    
    .zoom-btn {
      width: 40px;
      height: 40px;
      font-size: 14px;
    }
  }
  
  .page-actions-new {
    top: 15px;
    left: 15px;
    
    .action-btn {
      padding: 8px 12px;
      font-size: 12px;
    }
  }
}
.search-section {
  .search-container {
    position: relative;
    margin-bottom: 15px;
    
    .search-input {
      width: 100%;
      padding: 12px 40px 12px 15px;
      border: 2px solid #e9ecef;
      border-radius: 25px;
      font-size: 14px;
      transition: all 0.3s ease;
      background: #f8f9fa;
      
      &:focus {
        outline: none;
        border-color: #007bff;
        background: white;
        box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
      }
      
      &::placeholder {
        color: #6c757d;
        font-style: italic;
      }
    }
    
    .search-icon {
      position: absolute;
      right: 15px;
      top: 50%;
      transform: translateY(-50%);
      color: #6c757d;
      pointer-events: none;
    }
  }
}





.navbar-editor-modal {
  max-width: 600px;
  max-height: 80vh;
  overflow-y: auto;
  
  .navbar-links-section {
    margin-top: 20px;
    
    h4 {
      margin-bottom: 15px;
      color: #333;
      border-bottom: 1px solid #e9ecef;
      padding-bottom: 5px;
    }
    
    .navbar-link-item {
      background: #f8f9fa;
      border-radius: 8px;
      padding: 15px;
      margin-bottom: 15px;
      position: relative;
      
      .link-inputs {
        display: grid;
        grid-template-columns: 1fr 1fr auto;
        gap: 15px;
        align-items: end;
        
        .form-group {
          margin-bottom: 0;
          
          label {
            font-size: 12px;
            font-weight: 600;
            color: #666;
            margin-bottom: 5px;
          }
        }
        
        .remove-btn {
          background: #dc3545;
          color: white;
          border: none;
          padding: 8px 12px;
          border-radius: 6px;
          cursor: pointer;
          height: fit-content;
          
          &:hover {
            background: #c82333;
          }
        }
      }
    }
  }
}

.add-custom-section {
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px dashed #dee2e6;
}

.page-actions {
  position: fixed;
  top: 60px;
  right: 420px;
  display: flex;
  gap: 10px;
  z-index: 2000;
  
  .action-btn {
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.2s ease;
    
    &.primary {
      background: #212529;
      color: white;
      
      &:hover {
        background: #495057;
      }
    }
    
    &.success {
      background: #28a745;
      color: white;
      
      &:hover {
        background: #218838;
      }
    }
  }
}
    // Page Navigation Controls
    .page-navigation {
      position: fixed ;
      bottom: 30px ;
      left: 50% ;
      transform: translateX(-50%) ;
      display: flex ;
      gap: 15px ;
      background: rgba(255, 255, 255, 0.95) ;
      padding: 15px 20px ;
      border-radius: 50px ;
      box-shadow: $shadow-heavy ;
      backdrop-filter: blur(15px) ;
      z-index: 1000 ;
      border: 1px solid rgba(222, 226, 230, 0.8) ;

      .nav-btn {
        background: linear-gradient(135deg, $primary-black 0%, $secondary-black 100%) ;
        color: $white ;
        border: none ;
        padding: 12px 20px ;
        border-radius: 25px ;
        cursor: pointer ;
        font-size: 14px ;
        font-weight: 600 ;
        transition: $transition-smooth ;
        display: flex ;
        align-items: center ;
        gap: 8px ;

        &:hover:not(:disabled) {
          transform: translateY(-2px) scale(1.05) ;
          box-shadow: $shadow-medium ;
          background: linear-gradient(135deg, $secondary-black 0%, $primary-black 100%) ;
        }

        &:disabled {
          opacity: 0.5 ;
          cursor: not-allowed ;
          background: $text-gray ;
        }

        i {
          font-size: 16px ;
        }
      }

      .page-indicator {
        display: flex ;
        align-items: center ;
        background: $light-gray ;
        padding: 12px 20px ;
        border-radius: 25px ;
        font-size: 14px ;
        font-weight: 600 ;
        color: $primary-black ;
        border: 1px solid $border-gray ;

        .page-title {
          margin: 0 10px ;
          color: $secondary-black ;
        }
      }
    }

    // Full Page Display
    .page-display {
      position: relative ;
      width: 100% ;
      min-height: 100vh ;
      transform-origin: 0 0 ;
      transition: transform 0.1s ease-out ;
      background: $white ;
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.1) ;

      // Connected Sections (no gaps)
      .connected-sections {
        width: 100% ;
        
        .section-wrapper {
          width: 100% ;
          position: relative ;
          border: none ;
          margin: 0 ;
          padding: 0 ;

          // Section content fills completely
          .section-content {
            width: 100% ;
            position: relative ;
            background: transparent ;

            // Remove any default styling that creates gaps
            > * {
              margin: 0 ;
              padding: 0 ;
            }
          }

          // Hover overlay for editing
          .section-overlay {
            position: absolute ;
            top: 0 ;
            left: 0 ;
            right: 0 ;
            bottom: 0 ;
            background: rgba(0, 123, 255, 0.1) ;
            border: 2px solid rgba(0, 123, 255, 0.3) ;
            opacity: 0 ;
            transition: $transition-fast ;
            pointer-events: none ;
            z-index: 10 ;

            .section-label {
              position: absolute ;
              top: 10px ;
              left: 10px ;
              background: rgba(0, 123, 255, 0.9) ;
              color: $white ;
              padding: 4px 8px ;
              border-radius: 4px ;
              font-size: 12px ;
              font-weight: 600 ;
            }
          }

          &:hover .section-overlay {
            opacity: 1 ;
          }

          // Edit mode styling
          &.editing {
            .section-overlay {
              background: rgba(255, 193, 7, 0.1) ;
              border-color: rgba(255, 193, 7, 0.5) ;
              opacity: 1 ;

              .section-label {
                background: rgba(255, 193, 7, 0.9) ;
                color: $primary-black ;
              }
            }

            .section-content {
              outline: 2px solid #ffc107 ;
              outline-offset: -2px ;
            }
          }
        }
      }
    }

    // Loading State
    .loading-overlay {
      position: absolute ;
      top: 0 ;
      left: 0 ;
      right: 0 ;
      bottom: 0 ;
      background: rgba(255, 255, 255, 0.95) ;
      display: flex ;
      flex-direction: column ;
      align-items: center ;
      justify-content: center ;
      z-index: 100 ;
      backdrop-filter: blur(5px) ;

      .spinner {
        width: 60px ;
        height: 60px ;
        border: 4px solid $border-gray ;
        border-top: 4px solid $primary-black ;
        border-radius: 50% ;
        animation: spin 1s linear infinite ;
        margin-bottom: 20px ;
      }

      .loading-text {
        font-size: 16px ;
        color: $text-gray ;
        font-weight: 500 ;
      }
    }
  }
  .canvas-main-area {
  position: relative;
  z-index: 1; // Ensure content is above grid
}

.infinite-grid {
  z-index: 0; // Grid stays behind content
  pointer-events: none;
}
.connected-sections {
  display: flex;
  flex-direction: column;
  gap: 0 ;
  
  .section-wrapper {
    width: 100%;
    margin: 0 ;
    padding: 0 ;
    border-bottom: 1px solid #eee;
    
    &:last-child {
      border-bottom: none;
    }
    
    .section-content {
      width: 100% ;
      min-height: 100px;
      position: relative;
    }
  }
}



  // Zoom Controls
  .zoom-controls {
    // position: fixed ;
    top: 20px ;
    left: 20px ;
    z-index: 1000 ;
    display: flex ;
    gap: 10px ;
    background: rgba(255, 255, 255, 0.95) ;
    padding: 12px ;
    border-radius: 25px ;
    box-shadow: $shadow-medium ;
    backdrop-filter: blur(10px) ;
    border: 1px solid rgba(222, 226, 230, 0.8) ;
    width: fit-content ;
    flex-direction: row ;

    .zoom-btn {
      width: 40px ;
      height: 40px ;
      border: none ;
      border-radius: 50% ;
      background: linear-gradient(135deg, $primary-black 0%, $secondary-black 100%) ;
      color: $white ;
      cursor: pointer ;
      display: flex ;
      align-items: center ;
      justify-content: center ;
      transition: $transition-smooth ;
      font-size: 14px ;

      &:hover {
        transform: scale(1.1) ;
        box-shadow: $shadow-medium ;
        background: linear-gradient(135deg, $secondary-black 0%, $primary-black 100%) ;
      }

      &:active {
        transform: scale(0.95) ;
      }
    }
  }
}

// Modal Overlay for various dialogs
.modal-overlay {
  position: fixed ;
  top: 0 ;
  left: 0 ;
  width: 100% ;
  height: 100% ;
  background: rgba(0, 0, 0, 0.6) ;
  z-index: 2000 ;
  display: flex ;
  align-items: center ;
  justify-content: center ;
  backdrop-filter: blur(5px) ;
  animation: fadeIn 0.3s ease-out ;

  .modal-content {
    background: $white ;
    border-radius: 16px ;
    max-width: 600px ;
    width: 90% ;
    max-height: 80vh ;
    overflow-y: auto ;
    box-shadow: $shadow-heavy ;
    animation: modalSlideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) ;

    .modal-header {
      padding: 25px 30px 20px ;
      border-bottom: 2px solid $border-gray ;
      display: flex ;
      align-items: center ;
      justify-content: space-between ;
      background: linear-gradient(135deg, $light-gray 0%, $white 100%) ;
      border-radius: 16px 16px 0 0 ;

      h3 {
        margin: 0 ;
        font-size: 18px ;
        font-weight: 700 ;
        color: $primary-black ;
      }

      .close-btn {
        background: none ;
        border: none ;
        color: $text-gray ;
        cursor: pointer ;
        padding: 8px ;
        border-radius: 50% ;
        transition: $transition-smooth ;
        font-size: 16px ;

        &:hover {
          background: $danger-red ;
          color: $white ;
          transform: rotate(90deg) scale(1.1) ;
        }
      }
    }

    .modal-body {
      padding: 25px ;

      .form-group {
        margin-bottom: 20px ;

        label {
          display: block ;
          margin-bottom: 6px ;
          font-weight: 600 ;
          color: $secondary-black ;
          font-size: 13px ;
        }

        .form-control, textarea {
          width: 100% ;
          padding: 12px 16px ;
          border: 2px solid $border-gray ;
          border-radius: 8px ;
          font-size: 14px ;
          transition: $transition-smooth ;
          font-family: inherit ;

          &:focus {
            outline: none ;
            border-color: $primary-black ;
            box-shadow: 0 0 0 3px rgba(33, 37, 41, 0.1) ;
          }
        }

        textarea {
          resize: vertical ;
          min-height: 80px ;
        }
      }
    }

    .modal-footer {
      padding: 20px 25px ;
      display: flex ;
      gap: 12px ;
      justify-content: flex-end ;
      border-top: 1px solid $border-gray ;
      background: linear-gradient(135deg, $white 0%, $light-gray 100%) ;
      border-radius: 0 0 16px 16px ;
    }
  }
}

// Animations
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes modalSlideIn {
  from {
    transform: scale(0.8) translateY(-50px);
    opacity: 0;
  }
  to {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

// Responsive Design
@media (max-width: 1200px) {
  .wireframe-editor {
    .wireframe-controls-sidebar {
      width: 320px ;
       top: 50px;
    }

    .canvas-main-area {
      width: calc(100% - 320px) ;
    }
  }
}

@media (max-width: 768px) {
  .wireframe-editor {
    .wireframe-controls-sidebar {
      width: 100% ;
      transform: translateX(100%) ;
      transition: transform 0.3s ease ;

      &.mobile-open {
        transform: translateX(0) ;
      }
    }

    .canvas-main-area {
      width: 100% ;
    }

    .zoom-controls {
      top: 10px ;
      left: 10px ;
    }

    .page-navigation {
      bottom: 20px ;
      padding: 12px 16px ;

      .nav-btn {
        padding: 10px 16px ;
        font-size: 13px ;
      }
    }
  }
}

.sidebar-collapse-toggle {
  position: absolute;
  top: -15px;
  left: -15px;
  width: 30px;
  height: 30px;
  background: $primary-black;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1600;
  box-shadow: $shadow-medium;
  transition: $transition-smooth;
  
  &:hover {
    transform: scale(1.1);
    background: $secondary-black;
  }
  
  i {
    font-size: 12px;
  }
}


/* Add these styles */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255,255,255,0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.hide-scroll {
    overflow: hidden;
    -ms-overflow-style: none;
    scrollbar-width: none;
    
    &::-webkit-scrollbar {
        display: none;
    }
}

.section-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100px;
}

.page-list {
    max-height: 60vh;
    overflow-y: auto;
}


.page-list {
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 8px;
  margin: 12px 0;

  &-item {
    padding: 12px;
    margin: 6px 0;
    background: #f8f9fa;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: transform 0.2s ease;

    .handle {
      cursor: move;
      margin-right: 8px;
      color: #6c757d;
    }

    &:hover {
      background: #e9ecef;
    }

    &.cdk-drag-preview {
      background: white;
      box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    }

    &.cdk-drag-placeholder {
      opacity: 0.4;
    }

    &.cdk-drag-animating {
      transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
    }
  }
}

.cdk-drop-list-dragging .page-list-item:not(.cdk-drag-placeholder) {
  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}


/* Add to your styles */
.connected-sections {
  min-height: 100px;
  position: relative;
}
/* Add these styles */
.drag-handle {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 30px;
  background: rgba(224, 221, 221, 0.05);
  cursor: grab;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: background 0.2s ease;

  &:hover {
    background: rgba(0,0,0,0.08);
  }

  .fa-grip-vertical {
    opacity: 0.5;
    transition: opacity 0.2s ease;
  }
}

.cdk-drag-preview {
  cursor: grabbing !important;
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
  opacity: 0.8;
  
  .drag-handle {
    cursor: grabbing !important;
  }
}

.cdk-drag-placeholder {
  opacity: 0.3;
}

.cdk-drag-animating {
  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}

.connected-sections.cdk-drop-list-dragging .section-wrapper:not(.cdk-drag-placeholder) {
  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}
