// Workflow Builder Styles - DBIM Compliant
// =========================================

// Host element - full screen overlay approach
:host {
  display: block;
  position: fixed;
  top: 64px; // Header height
  left: 280px; // Sidebar width
  right: 0;
  bottom: 48px; // Footer height
  z-index: 10;

  // CSS Variables
  --builder-bg: #f8fafc;
  --canvas-bg: #ffffff;
  --canvas-grid: rgba(29, 10, 105, 0.03);
  --panel-bg: #ffffff;
  --border-color: rgba(29, 10, 105, 0.08);
  --node-width: 240px;
  --node-min-height: 100px;
}

.workflow-builder {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  background: var(--builder-bg);
  overflow: hidden;
  box-sizing: border-box;
}

// ========== Header ==========
.builder-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  background: linear-gradient(135deg, var(--dbim-blue-dark, #1D0A69) 0%, var(--dbim-blue-mid, #2563EB) 100%);
  color: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  z-index: 100;

  .header-left {
    display: flex;
    align-items: center;
    gap: 12px;

    button {
      color: white;
    }

    .header-title {
      h1 {
        margin: 0;
        font-size: 1.25rem;
        font-weight: 600;
      }

      .subtitle {
        margin: 0;
        font-size: 0.75rem;
        opacity: 0.8;
      }
    }
  }

  .header-center {
    flex: 1;
    max-width: 400px;
    margin: 0 24px;

    .workflow-name-input {
      .name-field {
        width: 100%;

        ::ng-deep {
          .mat-mdc-text-field-wrapper {
            background: rgba(255, 255, 255, 0.15);
            border-radius: 8px;
          }

          .mat-mdc-form-field-subscript-wrapper {
            display: none;
          }

          input {
            color: white;
            font-weight: 500;

            &::placeholder {
              color: rgba(255, 255, 255, 0.6);
            }
          }

          .mat-mdc-form-field-icon-prefix {
            color: rgba(255, 255, 255, 0.7);
          }

          .mdc-notched-outline__leading,
          .mdc-notched-outline__notch,
          .mdc-notched-outline__trailing {
            border-color: rgba(255, 255, 255, 0.3) !important;
          }
        }
      }
    }
  }

  .header-right {
    display: flex;
    align-items: center;
    gap: 16px;

    .workflow-stats {
      display: flex;
      gap: 16px;

      .stat {
        display: flex;
        align-items: center;
        gap: 4px;
        font-size: 0.8rem;
        opacity: 0.9;

        mat-icon {
          font-size: 16px;
          width: 16px;
          height: 16px;
        }
      }
    }

    .unsaved-badge {
      display: flex;
      align-items: center;
      gap: 4px;
      padding: 4px 10px;
      background: rgba(255, 193, 7, 0.2);
      border-radius: 12px;
      font-size: 0.75rem;
      color: #ffc107;

      mat-icon {
        font-size: 14px;
        width: 14px;
        height: 14px;
      }
    }

    button {
      &[mat-stroked-button] {
        border-color: rgba(255, 255, 255, 0.4);
        color: white;
      }

      &[mat-flat-button] {
        background: white;
        color: var(--dbim-blue-dark, #1D0A69);
      }
    }
  }
}

// ========== Main Content Layout ==========
.builder-content {
  display: flex;
  flex: 1;
  overflow: hidden;
  min-width: 0; // Prevent flex item from overflowing
  width: 100%;
}

// ========== Left Toolbar ==========
.toolbar-left {
  width: 56px;
  background: var(--panel-bg);
  border-right: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  padding: 12px 8px;
  gap: 8px;

  .toolbar-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;

    .toolbar-label {
      font-size: 0.6rem;
      text-transform: uppercase;
      color: var(--dbim-grey-2, #8E8E8E);
      letter-spacing: 0.5px;
      margin-bottom: 4px;
    }

    button {
      width: 40px;
      height: 40px;
      border-radius: 8px;
      transition: all 0.2s ease;

      &.active {
        background: var(--dbim-blue-subtle, #DBEAFE);
        color: var(--dbim-blue-mid, #2563EB);
      }

      &:hover:not(.active) {
        background: var(--dbim-linen, #EBEAEA);
      }
    }
  }

  mat-divider {
    margin: 8px 0;
  }

  .toolbar-spacer {
    flex: 1;
  }

  .zoom-indicator {
    text-align: center;
    font-size: 0.7rem;
    color: var(--dbim-grey-2, #8E8E8E);
    padding: 4px;
    background: var(--dbim-linen, #EBEAEA);
    border-radius: 4px;
  }
}

// ========== Canvas Container ==========
.canvas-container {
  flex: 1;
  position: relative;
  overflow: auto;
  min-width: 0; // Prevent flex item from overflowing
  background: var(--canvas-bg);
  background-image:
    linear-gradient(var(--canvas-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--canvas-grid) 1px, transparent 1px);
  background-size: 20px 20px;

  .loading-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.9);
    gap: 16px;

    p {
      color: var(--dbim-grey-3, #606060);
    }
  }
}

.canvas {
  position: relative;
  width: 3000px;
  height: 2000px;
  cursor: default;
}

// ========== SVG Connections Layer ==========
.connections-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;

  .connection-group {
    pointer-events: all;
    cursor: pointer;

    &:hover {
      .connection-path {
        stroke: var(--dbim-error, #DC3545);
        stroke-width: 3;
      }
    }
  }

  .connection-path {
    fill: none;
    stroke: var(--dbim-blue-mid, #2563EB);
    stroke-width: 2;
    transition: stroke 0.2s ease, stroke-width 0.2s ease;

    &.highlighted {
      stroke: var(--dbim-success, #198754);
      stroke-width: 3;
    }
  }

  .connection-hitbox {
    fill: none;
    stroke: transparent;
    stroke-width: 20;
  }

  .connecting-line {
    stroke: var(--dbim-blue-mid, #2563EB);
    stroke-width: 2;
    stroke-dasharray: 8 4;
    animation: dash 0.5s linear infinite;
  }

  @keyframes dash {
    to {
      stroke-dashoffset: -12;
    }
  }
}

// ========== Stage Nodes ==========
.stage-node {
  position: absolute;
  width: var(--node-width);
  min-height: var(--node-min-height);
  background: var(--panel-bg);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  border: 2px solid var(--border-color);
  cursor: grab;
  transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
  z-index: 10;

  &:hover {
    box-shadow: 0 4px 16px rgba(29, 10, 105, 0.12);
    border-color: var(--dbim-blue-light, #3B82F6);
  }

  &.selected {
    border-color: var(--dbim-blue-mid, #2563EB);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2), 0 4px 16px rgba(29, 10, 105, 0.15);
  }

  &.start-node {
    border-color: var(--dbim-success, #198754);

    .node-header {
      background: linear-gradient(135deg, #198754 0%, #20c997 100%);
    }
  }

  &.end-node {
    border-color: var(--crypto-purple, #8B5CF6);

    .node-header {
      background: linear-gradient(135deg, #8B5CF6 0%, #a78bfa 100%);
    }
  }

  &.connecting-from {
    border-color: var(--dbim-warning, #FFC107);
    animation: pulse-border 1s ease-in-out infinite;
  }

  &:active {
    cursor: grabbing;
  }

  // CDK Drag styles
  &.cdk-drag-dragging {
    box-shadow: 0 8px 32px rgba(29, 10, 105, 0.2);
    z-index: 100;
  }

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

@keyframes pulse-border {
  0%, 100% {
    border-color: var(--dbim-warning, #FFC107);
  }
  50% {
    border-color: var(--dbim-blue-mid, #2563EB);
  }
}

.node-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: linear-gradient(135deg, var(--dbim-blue-dark, #1D0A69) 0%, var(--dbim-blue-mid, #2563EB) 100%);
  border-radius: 10px 10px 0 0;
  color: white;

  &.has-department {
    // Keep the default gradient
  }

  .node-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;

    mat-icon {
      font-size: 18px;
      width: 18px;
      height: 18px;
    }
  }

  .node-title {
    flex: 1;
    min-width: 0;

    .stage-name {
      display: block;
      font-weight: 600;
      font-size: 0.9rem;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .department-name {
      display: block;
      font-size: 0.7rem;
      opacity: 0.8;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;

      &.unassigned {
        font-style: italic;
        opacity: 0.6;
      }
    }
  }

  .node-menu-btn {
    width: 28px;
    height: 28px;
    line-height: 28px;
    opacity: 0;
    transition: opacity 0.2s ease;

    mat-icon {
      font-size: 18px;
      width: 18px;
      height: 18px;
    }
  }

  .stage-node:hover & .node-menu-btn {
    opacity: 1;
  }
}

.node-body {
  padding: 12px;
  min-height: 40px;

  .node-description {
    margin: 0 0 8px;
    font-size: 0.75rem;
    color: var(--dbim-grey-3, #606060);
    line-height: 1.4;
  }

  .node-badges {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;

    .badge {
      padding: 2px 8px;
      border-radius: 10px;
      font-size: 0.65rem;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.3px;

      &.required {
        background: rgba(25, 135, 84, 0.1);
        color: var(--dbim-success, #198754);
      }

      &.parallel {
        background: rgba(139, 92, 246, 0.1);
        color: var(--crypto-purple, #8B5CF6);
      }
    }
  }
}

// ========== Connection Points ==========
.connection-point {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: white;
  border: 3px solid var(--dbim-blue-mid, #2563EB);
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 20;

  &:hover {
    transform: scale(1.3);
    background: var(--dbim-blue-mid, #2563EB);
  }

  &.input {
    top: -7px;
    left: 50%;
    transform: translateX(-50%);

    &.can-connect {
      animation: pulse-point 1s ease-in-out infinite;
      border-color: var(--dbim-success, #198754);
    }
  }

  &.output {
    bottom: -7px;
    left: 50%;
    transform: translateX(-50%);

    &.connecting {
      background: var(--dbim-warning, #FFC107);
      border-color: var(--dbim-warning, #FFC107);
    }
  }
}

@keyframes pulse-point {
  0%, 100% {
    transform: translateX(-50%) scale(1);
    box-shadow: 0 0 0 0 rgba(25, 135, 84, 0.4);
  }
  50% {
    transform: translateX(-50%) scale(1.2);
    box-shadow: 0 0 0 8px rgba(25, 135, 84, 0);
  }
}

// ========== Connecting Mode Indicator ==========
.connecting-indicator {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: var(--dbim-blue-dark, #1D0A69);
  color: white;
  border-radius: 24px;
  font-size: 0.85rem;
  box-shadow: 0 4px 16px rgba(29, 10, 105, 0.3);
  animation: slide-up 0.3s ease;

  mat-icon {
    font-size: 18px;
    width: 18px;
    height: 18px;
  }
}

@keyframes slide-up {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

// ========== Canvas Empty State ==========
.canvas-empty-state {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  padding: 48px;

  mat-icon {
    font-size: 64px;
    width: 64px;
    height: 64px;
    color: var(--dbim-grey-1, #C6C6C6);
    margin-bottom: 16px;
  }

  h3 {
    margin: 0 0 8px;
    font-size: 1.25rem;
    color: var(--dbim-brown, #150202);
  }

  p {
    margin: 0 0 24px;
    color: var(--dbim-grey-2, #8E8E8E);
  }
}

// ========== Right Config Panel ==========
.config-panel {
  width: 320px;
  background: var(--panel-bg);
  border-left: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s ease;

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

  .panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    border-bottom: 1px solid var(--border-color);

    h3 {
      margin: 0;
      font-size: 1rem;
      font-weight: 600;
      color: var(--dbim-brown, #150202);
    }
  }

  .panel-content {
    flex: 1;
    padding: 16px;
    overflow-y: auto;

    form {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .full-width {
      width: 100%;
    }

    .checkbox-field {
      padding: 8px 0;

      .field-hint {
        margin: 4px 0 0 32px;
        font-size: 0.75rem;
        color: var(--dbim-grey-2, #8E8E8E);
      }
    }

    .panel-actions {
      margin-top: 8px;

      button {
        width: 100%;
      }
    }

    .danger-zone {
      margin-top: 24px;
      padding-top: 16px;

      h4 {
        margin: 0 0 12px;
        font-size: 0.85rem;
        color: var(--dbim-error, #DC3545);
      }

      button {
        width: 100%;
      }
    }
  }

  .panel-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px;
    text-align: center;

    mat-icon {
      font-size: 48px;
      width: 48px;
      height: 48px;
      color: var(--dbim-grey-1, #C6C6C6);
      margin-bottom: 16px;
    }

    h4 {
      margin: 0 0 8px;
      font-size: 1rem;
      color: var(--dbim-brown, #150202);
    }

    p {
      margin: 0;
      font-size: 0.85rem;
      color: var(--dbim-grey-2, #8E8E8E);
    }
  }
}

.dept-option {
  display: flex;
  align-items: center;
  gap: 8px;

  mat-icon {
    font-size: 18px;
    width: 18px;
    height: 18px;
    color: var(--dbim-grey-2, #8E8E8E);
  }
}

// ========== Footer ==========
.builder-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 20px;
  background: var(--panel-bg);
  border-top: 1px solid var(--border-color);

  .footer-left {
    .request-type-field {
      width: 200px;

      ::ng-deep .mat-mdc-form-field-subscript-wrapper {
        display: none;
      }
    }
  }

  .footer-center {
    .keyboard-hint {
      font-size: 0.75rem;
      color: var(--dbim-grey-2, #8E8E8E);

      kbd {
        padding: 2px 6px;
        background: var(--dbim-linen, #EBEAEA);
        border-radius: 4px;
        font-family: monospace;
        font-size: 0.7rem;
      }
    }
  }
}

// ========== Delete Menu Item ==========
.delete-item {
  color: var(--dbim-error, #DC3545) !important;

  mat-icon {
    color: inherit !important;
  }
}

// ========== Material Form Field Overrides ==========
::ng-deep {
  .config-panel {
    .mat-mdc-form-field {
      .mat-mdc-form-field-icon-prefix {
        color: var(--dbim-grey-2, #8E8E8E);
      }
    }
  }
}

// ========== Responsive Adjustments ==========

// Large tablets and small desktops
@media (max-width: 1200px) {
  .config-panel {
    width: 280px;
  }

  .stage-node {
    --node-width: 200px;
    width: var(--node-width);
  }
}

// Tablets - sidebar collapses to 72px
@media (max-width: 1024px) {
  :host {
    left: 72px; // Collapsed sidebar width
  }

  .builder-content {
    position: relative;
  }

  // Hide config panel by default, show as overlay when open
  .config-panel {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 300px;
    z-index: 50;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
    transform: translateX(100%);

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

  .canvas-container {
    width: 100%;
  }

  .stage-node {
    --node-width: 180px;
    width: var(--node-width);

    .node-header {
      padding: 10px;
      gap: 8px;

      .node-icon {
        width: 28px;
        height: 28px;

        mat-icon {
          font-size: 16px;
          width: 16px;
          height: 16px;
        }
      }

      .node-title {
        .stage-name {
          font-size: 0.8rem;
        }

        .department-name {
          font-size: 0.65rem;
        }
      }
    }

    .node-body {
      padding: 10px;

      .node-description {
        font-size: 0.7rem;
      }

      .node-badges .badge {
        font-size: 0.6rem;
        padding: 2px 6px;
      }
    }
  }

  .builder-header {
    .header-center {
      max-width: 280px;
    }

    .workflow-stats {
      display: none;
    }
  }
}

// Mobile devices - full screen overlay
@media (max-width: 768px) {
  :host {
    left: 0;
    top: 64px;
    bottom: 48px;
    z-index: 150; // Above sidebar (z-index: 100)
  }

  .builder-header {
    padding: 8px 12px;
    flex-wrap: wrap;
    gap: 8px;

    .header-left {
      .header-title {
        h1 {
          font-size: 1rem;
        }

        .subtitle {
          display: none;
        }
      }
    }

    .header-center {
      order: 3;
      flex: 0 0 100%;
      margin: 8px 0 0;
      max-width: none;

      .name-field {
        ::ng-deep input {
          font-size: 14px;
        }
      }
    }

    .header-right {
      gap: 8px;

      .workflow-stats,
      .unsaved-badge {
        display: none;
      }

      button[mat-stroked-button] {
        display: none;
      }

      button[mat-flat-button] {
        padding: 8px 12px;
        font-size: 13px;

        mat-icon {
          margin-right: 4px;
        }
      }
    }
  }

  .builder-content {
    flex-direction: column;
  }

  // Horizontal toolbar at bottom on mobile
  .toolbar-left {
    order: 2;
    width: 100%;
    height: auto;
    flex-direction: row;
    border-right: none;
    border-top: 1px solid var(--border-color);
    padding: 8px 12px;
    gap: 4px;
    overflow-x: auto;

    .toolbar-section {
      flex-direction: row;
      gap: 4px;

      .toolbar-label {
        display: none;
      }

      button {
        width: 36px;
        height: 36px;
        flex-shrink: 0;
      }
    }

    mat-divider {
      width: 1px;
      height: 24px;
      margin: 0 4px;
    }

    .toolbar-spacer {
      display: none;
    }

    .zoom-indicator {
      margin-left: auto;
      padding: 6px 10px;
    }
  }

  .canvas-container {
    order: 1;
    flex: 1;
    // Enable touch scrolling
    -webkit-overflow-scrolling: touch;
  }

  .canvas {
    // Smaller canvas for mobile
    width: 2000px;
    height: 1500px;
  }

  .stage-node {
    --node-width: 160px;
    width: var(--node-width);
    min-height: 80px;

    .node-header {
      padding: 8px;
      gap: 6px;

      .node-icon {
        width: 24px;
        height: 24px;

        mat-icon {
          font-size: 14px;
          width: 14px;
          height: 14px;
        }
      }

      .node-title {
        .stage-name {
          font-size: 0.75rem;
        }

        .department-name {
          font-size: 0.6rem;
        }
      }

      .node-menu-btn {
        width: 24px;
        height: 24px;
        opacity: 1; // Always visible on mobile

        mat-icon {
          font-size: 16px;
          width: 16px;
          height: 16px;
        }
      }
    }

    .node-body {
      padding: 8px;
      min-height: 30px;

      .node-description {
        display: none; // Hide on mobile to save space
      }

      .node-badges {
        .badge {
          font-size: 0.55rem;
          padding: 1px 4px;
        }
      }
    }
  }

  .connection-point {
    width: 16px;
    height: 16px;
    border-width: 3px;

    // Larger touch targets
    &::before {
      content: '';
      position: absolute;
      top: -8px;
      left: -8px;
      right: -8px;
      bottom: -8px;
    }
  }

  // Config panel as full-screen modal on mobile
  .config-panel {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100vh;
    z-index: 200;
    transform: translateY(100%);
    border-radius: 16px 16px 0 0;

    &.open {
      transform: translateY(0);
    }

    .panel-header {
      padding: 12px 16px;
      border-bottom: 1px solid var(--border-color);

      h3 {
        font-size: 1.1rem;
      }
    }

    .panel-content {
      padding: 16px;
      overflow-y: auto;
      max-height: calc(100vh - 60px);

      form {
        gap: 12px;
      }
    }

    .panel-empty {
      padding: 24px;

      mat-icon {
        font-size: 40px;
        width: 40px;
        height: 40px;
      }
    }
  }

  .connecting-indicator {
    bottom: 80px; // Above the toolbar
    padding: 8px 16px;
    font-size: 0.75rem;

    mat-icon {
      font-size: 16px;
      width: 16px;
      height: 16px;
    }
  }

  .canvas-empty-state {
    padding: 24px;

    mat-icon {
      font-size: 48px;
      width: 48px;
      height: 48px;
    }

    h3 {
      font-size: 1.1rem;
    }

    p {
      font-size: 0.85rem;
    }
  }

  .builder-footer {
    display: none; // Hide footer on mobile, integrate into toolbar
  }
}

// Small mobile devices
// Small mobile devices
@media (max-width: 480px) {
  :host {
    top: 56px; // Smaller header on small mobile
    bottom: 40px; // Smaller footer
  }

  .builder-header {
    .header-left {
      button[mat-icon-button] {
        width: 36px;
        height: 36px;
      }

      .header-title h1 {
        font-size: 0.9rem;
      }
    }

    .header-right {
      button[mat-flat-button] {
        padding: 6px 10px;
        font-size: 12px;

        span:not(.mat-icon) {
          display: none;
        }

        mat-icon {
          margin-right: 0;
        }
      }
    }
  }

  .stage-node {
    --node-width: 140px;
    width: var(--node-width);
  }

  .toolbar-left {
    padding: 6px 8px;

    .toolbar-section button {
      width: 32px;
      height: 32px;
    }
  }
}
