/* ==================== INTEGRATIONS PANEL ==================== */
    .integrations-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 24px;
      margin-bottom: 24px;
    }

    .integrations-panel {
      height: fit-content;
    }

    .integrations-search {
      padding: 16px 20px;
      border-bottom: 1px solid var(--border);
    }

    .integrations-search input {
      width: 100%;
      padding: 10px 14px;
      background: var(--secondary);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      color: var(--foreground);
      font-size: 0.9rem;
      outline: none;
      transition: all 0.2s ease;
    }

    .integrations-search input:focus {
      border-color: var(--primary);
    }

    .integrations-categories {
      display: flex;
      gap: 8px;
      padding: 16px 20px;
      border-bottom: 1px solid var(--border);
      overflow-x: auto;
    }

    .category-btn {
      padding: 6px 14px;
      background: var(--secondary);
      border: 1px solid var(--border);
      border-radius: 20px;
      color: var(--muted);
      font-size: 0.8rem;
      cursor: pointer;
      transition: all 0.2s ease;
      white-space: nowrap;
    }

    .category-btn:hover {
      border-color: var(--muted);
      color: var(--foreground);
    }

    .category-btn.active {
      background: var(--primary);
      border-color: var(--primary);
      color: var(--background);
    }

    .integrations-list {
      padding: 16px 20px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      max-height: 400px;
      overflow-y: auto;
    }

    .integration-item {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 14px;
      background: var(--secondary);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .integration-item:hover {
      border-color: var(--primary);
      transform: translateX(4px);
    }

    .integration-icon {
      width: 44px;
      height: 44px;
      border-radius: var(--radius-sm);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.5rem;
      flex-shrink: 0;
    }

    .integration-info {
      flex: 1;
      min-width: 0;
    }

    .integration-name {
      font-weight: 600;
      color: var(--foreground);
      font-size: 0.9rem;
    }

    .integration-category {
      font-size: 0.75rem;
      color: var(--muted);
      margin-top: 2px;
    }

    .integration-status {
      padding: 4px 10px;
      border-radius: 12px;
      font-size: 0.7rem;
      font-weight: 600;
      text-transform: uppercase;
    }

    .integration-status.connected {
      background: rgba(34, 197, 94, 0.15);
      color: var(--success);
    }

    .integration-status.available {
      background: rgba(59, 130, 246, 0.15);
      color: var(--info);
    }

    /* ==================== RECENT WORKFLOWS ==================== */
    .recent-workflows {
      height: fit-content;
    }

    .workflows-list {
      padding: 16px 20px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .workflow-item {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 14px;
      background: var(--secondary);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .workflow-item:hover {
      border-color: var(--primary);
    }

    .workflow-apps {
      display: flex;
      align-items: center;
    }

    .workflow-app-icon {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      border: 2px solid var(--card);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.9rem;
      margin-left: -8px;
    }

    .workflow-app-icon:first-child {
      margin-left: 0;
    }

    .workflow-meta {
      flex: 1;
      min-width: 0;
    }

    .workflow-name {
      font-weight: 600;
      color: var(--foreground);
      font-size: 0.9rem;
    }

    .workflow-runs {
      font-size: 0.75rem;
      color: var(--muted);
      margin-top: 2px;
    }

    .workflow-toggle {
      width: 44px;
      height: 24px;
      background: var(--border);
      border-radius: 12px;
      position: relative;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .workflow-toggle.active {
      background: var(--primary);
    }

    .workflow-toggle::after {
      content: '';
      position: absolute;
      top: 2px;
      left: 2px;
      width: 20px;
      height: 20px;
      background: white;
      border-radius: 50%;
      transition: all 0.2s ease;
    }

    .workflow-toggle.active::after {
      left: 22px;
    }

    /* ==================== ACTIVITY LOGS TABLE ==================== */
    .logs-section {
      margin-top: 24px;
    }

    .table-controls {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 20px;
      border-bottom: 1px solid var(--border);
    }

    .filter-tabs {
      display: flex;
      gap: 8px;
    }

    .filter-tab {
      padding: 6px 14px;
      background: transparent;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      color: var(--muted);
      font-size: 0.8rem;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .filter-tab:hover {
      border-color: var(--muted);
      color: var(--foreground);
    }

    .filter-tab.active {
      background: var(--primary);
      border-color: var(--primary);
      color: var(--background);
    }

    .table-wrapper {
      overflow-x: auto;
    }

    .data-table {
      width: 100%;
      border-collapse: collapse;
    }

    .data-table th {
      text-align: left;
      padding: 14px 20px;
      font-size: 0.75rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--muted);
      background: var(--secondary);
      border-bottom: 1px solid var(--border);
    }

    .data-table td {
      padding: 16px 20px;
      font-size: 0.9rem;
      color: var(--foreground);
      border-bottom: 1px solid var(--border);
    }

    .data-table tbody tr {
      transition: background 0.2s ease;
    }

    .data-table tbody tr:hover {
      background: var(--secondary);
    }

    .log-workflow {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .log-icon {
      width: 36px;
      height: 36px;
      border-radius: var(--radius-sm);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1rem;
    }

    .status-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 4px 10px;
      border-radius: 12px;
      font-size: 0.75rem;
      font-weight: 500;
    }

    .status-badge.success {
      background: rgba(34, 197, 94, 0.15);
      color: var(--success);
    }

    .status-badge.failed {
      background: rgba(239, 68, 68, 0.15);
      color: var(--error);
    }

    .status-badge.pending {
      background: rgba(245, 158, 11, 0.15);
      color: var(--warning);
    }

    .status-badge.running {
      background: rgba(59, 130, 246, 0.15);
      color: var(--info);
    }

    .status-badge svg {
      width: 12px;
      height: 12px;
    }

    .table-pagination {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 20px;
      border-top: 1px solid var(--border);
    }

    .pagination-info {
      font-size: 0.85rem;
      color: var(--muted);
    }

    .pagination-controls {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .page-btn {
      width: 36px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--secondary);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      color: var(--muted);
      cursor: pointer;
      transition: all 0.2s ease;
      font-size: 0.85rem;
    }

    .page-btn:hover:not(:disabled) {
      border-color: var(--muted);
      color: var(--foreground);
    }

    .page-btn.active {
      background: var(--primary);
      border-color: var(--primary);
      color: var(--background);
    }

    .page-btn:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    .page-btn svg {
      width: 16px;
      height: 16px;
    }

    /* ==================== RESPONSIVE DESIGN ==================== */