// Futuristik Detay Sayfası
@import '../pano/.component.less';

:host {
  display: block;
  color: #e0e7ff !important;
  font-family: 'Courier New', 'Consolas', monospace;

  h1, h2, h3, h4, h5, h6 {
    color: #e0e7ff !important;
  }

  p, span, div, label, a {
    color: inherit;
  }
}

.qr-detail-facility {
  min-height: 100vh;
  background: linear-gradient(135deg, @dark-bg 0%, #0f1419 50%, @dark-bg 100%);
  padding: 2rem;
  position: relative;

  &::before {
    content: '';
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image:
      linear-gradient(rgba(42, 63, 95, 0.3) 1px, transparent 1px),
      linear-gradient(90deg, rgba(42, 63, 95, 0.3) 1px, transparent 1px);
    background-size: 30px 30px;
    animation: gridScroll 20s linear infinite;
    pointer-events: none;
    z-index: 0;
  }

  > * { position: relative; z-index: 1; }
}

.detail-grid {
  display: grid;
  grid-template-columns: 350px 1fr;
  gap: 2rem;
  margin-top: 2rem;
}

// Sol Panel
.left-panel {
  .qr-card {
    background: @dark-card;
    border: 2px solid @primary-cyan;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 0 30px rgba(0, 243, 255, 0.2);

    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 1.5rem;

      h3 {
        font-size: 1.2rem;
        color: @primary-cyan;
        margin: 0;
      }
    }

    .card-body {
      .qr-display {
        background: white;
        padding: 1.5rem;
        border-radius: 8px;
        text-align: center;
        margin-bottom: 1rem;

        canvas { display: inline-block; }
      }

      .qr-actions {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
      }
    }
  }

  .quick-stats {
    .stat-item {
      display: flex;
      gap: 1rem;
      padding: 1rem;
      background: @dark-card;
      border: 1px solid @grid-line;
      border-radius: 8px;
      margin-bottom: 0.5rem;

      .stat-icon {
        font-size: 2rem;
        filter: drop-shadow(0 0 10px @primary-cyan);
      }

      .stat-info {
        flex: 1;

        .stat-label {
          color: @text-secondary;
          font-size: 0.8rem;
          margin-bottom: 0.25rem;
        }

        .stat-value {
          color: @text-primary;
          font-weight: bold;
        }
      }
    }
  }
}

// Sağ Panel
.right-panel {
  background: @dark-panel;
  border: 1px solid @grid-line;
  border-radius: 12px;
  padding: 1.5rem;

  .tab-menu {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;

    .tab-btn {
      padding: 0.75rem 1.5rem;
      background: @dark-card;
      border: 2px solid @grid-line;
      color: @text-secondary;
      cursor: pointer;
      border-radius: 6px;
      transition: all 0.3s ease;
      font-size: 0.9rem;

      &.active {
        background: rgba(0, 243, 255, 0.1);
        border-color: @primary-cyan;
        color: @primary-cyan;
        box-shadow: 0 0 15px rgba(0, 243, 255, 0.3);
      }

      &:hover:not(.active) {
        border-color: @primary-cyan;
        color: @text-primary;
      }
    }
  }

  .tab-content {
    .tab-pane {
      animation: fadeIn 0.3s ease;
    }

    .form-section {
      .section-subtitle {
        color: @primary-cyan;
        font-size: 1.1rem;
        margin: 1.5rem 0 1rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
      }

      .form-row {
        display: grid;
        gap: 1.5rem;
        margin-bottom: 1.5rem;

        &.two-cols { grid-template-columns: repeat(2, 1fr); }
        &.three-cols { grid-template-columns: repeat(3, 1fr); }

        .form-group {
          &.full-width { grid-column: 1 / -1; }

          .form-label {
            display: block;
            color: @text-secondary;
            font-size: 0.85rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            margin-bottom: 0.5rem;
          }

          .input-hint {
            font-size: 0.75rem;
            color: @text-secondary;
            margin-top: 0.25rem;
            font-style: italic;
          }
        }
      }
    }

    .lifecycle-timeline {
      position: relative;

      &::before {
        content: '';
        position: absolute;
        left: 10px;
        top: 0;
        bottom: 0;
        width: 2px;
        background: @grid-line;
      }

      .timeline-item {
        position: relative;
        padding-left: 2.5rem;
        margin-bottom: 2rem;

        .timeline-dot {
          position: absolute;
          left: 5px;
          top: 5px;
          width: 12px;
          height: 12px;
          background: @primary-cyan;
          border-radius: 50%;
          box-shadow: 0 0 10px @primary-cyan;
        }

        .timeline-content {
          .timeline-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 0.5rem;

            .timeline-date {
              color: @text-secondary;
              font-size: 0.85rem;
            }

            .timeline-action {
              color: @primary-cyan;
              font-weight: bold;
              font-size: 0.9rem;
            }
          }

          .timeline-desc {
            color: @text-primary;
            margin-bottom: 0.25rem;
          }

          .timeline-user,
          .timeline-location {
            color: @text-secondary;
            font-size: 0.8rem;
            margin-top: 0.25rem;
          }
        }
      }
    }
  }

  .action-bar {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid @grid-line;
  }
}

.cyber-textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  background: @dark-bg;
  border: 2px solid @grid-line;
  border-radius: 4px;
  color: @text-primary;
  font-family: 'Courier New', monospace;
  font-size: 0.95rem;
  resize: vertical;
  transition: all 0.3s ease;

  &:focus {
    outline: none;
    border-color: @primary-cyan;
    box-shadow: 0 0 15px rgba(0, 243, 255, 0.3);
  }

  &::placeholder {
    color: @text-secondary;
  }
}

.cyber-btn-block {
  width: 100%;
  justify-content: center;
}

.loading-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: @dark-bg;

  .spinner-large {
    width: 80px;
    height: 80px;
    border: 4px solid @grid-line;
    border-top-color: @primary-cyan;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 2rem;
  }

  .loading-text {
    color: @text-primary;
    font-size: 1.5rem;
    letter-spacing: 0.1em;
  }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

.spinner {
  display: inline-block;
  animation: spin 1s linear infinite;
}

// Responsive
// Tablet
@media (max-width: 1024px) {
  .quantum-control-center {
    padding: 1.5rem;

    &::before {
      background-size: 20px 20px;
    }
  }

  .holo-header .holo-title .cyber-title {
    font-size: 2.5rem;
    letter-spacing: 0.1em;
  }

  .detail-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .left-panel {
    .qr-display {
      .qr-code {
        width: 280px;
        height: 280px;
      }
    }
  }

  .right-panel {
    .tab-menu {
      overflow-x: auto;
      flex-wrap: nowrap;
      padding: 0.5rem;

      .tab-btn {
        padding: 0.6rem 1rem;
        font-size: 0.9rem;
        white-space: nowrap;
      }
    }
  }
}

// Mobil
@media (max-width: 768px) {
  .quantum-control-center {
    padding: 1rem;

    &::before {
      background-size: 15px 15px;
    }
  }

  .holo-header {
    margin-bottom: 2rem;

    .holo-title {
      padding: 1.5rem 1rem;

      .cyber-title {
        font-size: 1.8rem;
        letter-spacing: 0.05em;
      }

      .subtitle {
        font-size: 0.8rem;
        letter-spacing: 0.2em;
      }
    }
  }

  .detail-container {
    max-width: none;
    padding: 1rem;
  }

  .detail-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  // Sol panel - QR görüntü
  .left-panel {
    padding: 1.5rem 1rem;

    .qr-display {
      margin-bottom: 1.5rem;

      .qr-title {
        font-size: 1.2rem;
        margin-bottom: 1rem;
      }

      .qr-code {
        width: 250px;
        height: 250px;
        padding: 1rem;
        margin: 0 auto 1rem;

        canvas {
          max-width: 100%;
          height: auto;
        }
      }

      .qr-actions {
        flex-direction: column;
        gap: 0.75rem;

        .cyber-btn {
          width: 100%;
          justify-content: center;
          padding: 0.8rem 1rem;
        }
      }
    }

    .quick-info {
      padding: 1rem;
      gap: 0.8rem;

      .info-chip {
        flex: 1;
        min-width: 120px;
        padding: 0.6rem 0.8rem;
        font-size: 0.75rem;

        .chip-icon {
          font-size: 1rem;
        }

        .chip-text {
          font-size: 0.7rem;
        }
      }

    // Mobilde sol panel altta göster
    @media (max-width: 768px) {
      order: 2; // Sağ panelden sonra gelsin
      margin-top: 2rem;
      padding-top: 2rem;
      border-top: 2px solid @grid-line;
      background: linear-gradient(135deg, rgba(0, 243, 255, 0.02) 0%, rgba(255, 0, 255, 0.02) 100%);

      .qr-display {
        margin-bottom: 1rem;

        .qr-title {
          font-size: 1rem;
          margin-bottom: 0.8rem;
        }

        .qr-code {
          width: 200px;
          height: 200px;
          padding: 0.8rem;
          margin: 0 auto 0.8rem;
        }

        .qr-actions {
          flex-direction: row;
          gap: 0.5rem;

          .cyber-btn {
            flex: 1;
            padding: 0.6rem 0.8rem;
            font-size: 0.8rem;
          }
        }
      }

      .quick-info {
        flex-direction: row;
        flex-wrap: wrap;
        padding: 0.8rem;
        gap: 0.6rem;

        .info-chip {
          flex: 1;
          min-width: 100px;
          padding: 0.5rem 0.6rem;
          font-size: 0.7rem;

          .chip-icon {
            font-size: 0.9rem;
          }

          .chip-text {
            font-size: 0.65rem;
          }
        }
      }
    }
  }

  // Sağ panel - Tab içerik
  .right-panel {
    padding: 1.5rem 1rem;

    // Mobilde sağ panel yukarıda gelsin
    @media (max-width: 768px) {
      order: 1; // Sol panelden önce gelsin
      padding: 1rem;
    }

    .tab-menu {
      padding: 0.5rem;
      margin-bottom: 1.5rem;
      border-width: 1px;

      @media (max-width: 768px) {
        padding: 0.3rem;
        margin-bottom: 1rem;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
        display: flex;
        gap: 0.3rem;

        &::-webkit-scrollbar {
          height: 4px;
        }

        &::-webkit-scrollbar-track {
          background: @dark-panel;
          border-radius: 2px;
        }

        &::-webkit-scrollbar-thumb {
          background: @grid-line;
          border-radius: 2px;
        }
      }

      .tab-btn {
        padding: 0.8rem 1rem;
        font-size: 0.85rem;
        border-width: 1px;
        white-space: nowrap;
        gap: 0.5rem;
        flex-shrink: 0;

        @media (max-width: 768px) {
          padding: 0.6rem 0.8rem;
          font-size: 0.75rem;
          gap: 0.3rem;
          min-width: auto;

          .tab-icon {
            font-size: 0.9rem;
          }
        }
      }
    }

    .tab-content {
      padding: 1rem;

      .form-section {
        margin-bottom: 1.5rem;

        .section-title {
          font-size: 1rem;
          margin-bottom: 1rem;
          padding-bottom: 0.5rem;
        }
      }

      // Form grid responsive
      .form-grid {
        gap: 1rem;

        .form-group {
          .form-label {
            font-size: 0.8rem;
            margin-bottom: 0.4rem;
          }

          .cyber-input,
          .cyber-select {
            padding: 0.7rem 0.9rem;
            font-size: 0.9rem;
          }
        }
      }

      // Form satırları mobilde tek kolon
      .form-row.two-cols,
      .form-row.three-cols,
      .form-row.four-cols {
        grid-template-columns: 1fr;
        gap: 1rem;
      }

      // Form action'ları ve action bar
      .form-actions {
        margin-top: 2rem;
        padding-top: 1rem;

        .cyber-btn {
          padding: 0.8rem 1.5rem;
          font-size: 0.9rem;
        }
      }

      // Action bar mobil optimizasyonu
      .action-bar {
        @media (max-width: 768px) {
          display: flex;
          flex-direction: column;
          gap: 0.8rem;
          margin-top: 2rem;
          padding-top: 1.5rem;
          border-top: 1px solid @grid-line;

          .cyber-btn {
            width: 100%;
            justify-content: center;
            padding: 0.8rem 1.2rem;
            font-size: 0.9rem;

            .btn-text {
              font-size: 0.9rem;
            }
          }
        }
      }

      // İstatistikler
      .stats-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;

        .stat-card {
          padding: 1rem;

          .stat-icon {
            font-size: 2rem;
          }

          .stat-data {
            .stat-value {
              font-size: 1.5rem;
            }

            .stat-label {
              font-size: 0.7rem;
            }
          }
        }
      }

      // Yaşam döngüsü timeline
      .timeline {
        padding-left: 2rem;

        &::before {
          left: 8px;
          width: 2px;
        }

        .timeline-item {
          margin-bottom: 1rem;

          .timeline-dot {
            left: 3px;
            width: 10px;
            height: 10px;
          }

          .timeline-content {
            .timeline-time {
              font-size: 0.7rem;
            }

            .timeline-action {
              font-size: 0.9rem;
            }

            .timeline-desc {
              font-size: 0.8rem;
            }
          }
        }

        // Timeline mobil optimizasyonu
        @media (max-width: 768px) {
          padding-left: 1.5rem;

          &::before {
            left: 6px;
            width: 2px;
          }

          .timeline-item {
            margin-bottom: 1.2rem;
            padding-bottom: 1.2rem;

            .timeline-dot {
              left: 2px;
              width: 8px;
              height: 8px;
            }

            .timeline-content {
              .timeline-time {
                font-size: 0.65rem;
                margin-bottom: 0.3rem;
              }

              .timeline-action {
                font-size: 0.85rem;
                margin-bottom: 0.4rem;
                color: @primary-cyan;
              }

              .timeline-desc {
                font-size: 0.75rem;
                line-height: 1.4;
                margin-bottom: 0.5rem;
              }

              .timeline-user,
              .timeline-location {
                font-size: 0.7rem;
                opacity: 0.8;
              }
            }
          }
        }
      }
    }
  }

  // Modal mobil
  .cyber-modal {
    .modal-content {
      width: 95%;
      max-width: none;

      .modal-header {
        padding: 1rem;

        h2 {
          font-size: 1.2rem;
        }
      }

      .modal-body {
        padding: 1rem;
      }

      .modal-footer {
        padding: 1rem;
        flex-direction: column-reverse;

        .cyber-btn {
          width: 100%;
          margin: 0.25rem 0;
        }
      }
    }
  }

  // Loading mobil
  .loading-screen {
    .spinner-large {
      width: 60px;
      height: 60px;
      border-width: 3px;
    }

    .loading-text {
      font-size: 1.2rem;
    }
  }
}

// Çok küçük ekranlar
@media (max-width: 375px) {
  .holo-header .holo-title .cyber-title {
    font-size: 1.5rem;
  }

  .left-panel .qr-display .qr-code {
    width: 200px;
    height: 200px;
  }

  .right-panel {
    .tab-menu {
      padding: 0.3rem;

      .tab-btn {
        padding: 0.6rem 0.8rem;
        font-size: 0.75rem;
        gap: 0.3rem;

        .tab-icon {
          font-size: 0.9rem;
        }
      }
    }

    .tab-content .stats-container {
      grid-template-columns: 1fr;
    }
  }

  .left-panel .quick-info {
    flex-direction: column;
    gap: 0.5rem;

    .info-chip {
      min-width: auto;
      padding: 0.5rem 0.8rem;
    }
  }
}
}