/* ========================================
   MERGED STYLES - Canvas + Traditional
   ======================================== */

/* Tab Navigation */
.tab-btn {
    @apply py-3 px-4 border-b-2 border-transparent text-gray-500 font-medium transition-colors;
}

.tab-btn.active {
    @apply border-indigo-500 text-indigo-700;
}

.tab-btn:hover {
    @apply text-indigo-600;
}

.tab-content {
    @apply animate-fadeIn;
}

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

/* Canvas Styles */
.canvas-container {
    width: 100%;
    height: 600px;
    overflow: auto;
    border: 2px solid #ccc;
    border-radius: 8px;
    position: relative;
    cursor: grab;
    background: #f9fafb;
}

.canvas-container:active {
    cursor: grabbing;
}

canvas {
    display: block;
    background: white;
}

/* Traditional Tree Styles */
.search-result {
    @apply p-2 border-b border-gray-200 cursor-pointer hover:bg-indigo-50;
}

.member-node {
    @apply inline-block px-2 py-1 border border-gray-400 rounded bg-gray-100 cursor-pointer text-xs;
}

.parent-node {
    @apply inline-block px-2 py-1 border-2 border-indigo-500 rounded bg-indigo-50 cursor-pointer font-bold;
}

.wife-node {
    @apply ml-2 px-2 py-1 border border-gray-400 rounded bg-gray-100 cursor-pointer text-xs;
}

.child-node {
    @apply inline-block px-2 py-1 border border-indigo-400 rounded bg-indigo-50 cursor-pointer text-xs;
}

.expand-btn {
    @apply w-6 h-6 bg-indigo-600 text-white text-xs rounded flex items-center justify-center mr-2 cursor-pointer hover:bg-indigo-700;
}

.spouse-unknown {
    @apply text-gray-500 italic;
}

/* Toast Notification */
.toast {
    @apply fixed top-4 right-4 bg-green-600 text-white px-6 py-3 rounded shadow-lg z-50;
    animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Context Menu */
.context-menu {
    position: fixed;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    z-index: 1000;
    padding: 4px 0;
}

.context-menu button {
    display: block;
    width: 100%;
    padding: 8px 16px;
    text-align: left;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 14px;
}

.context-menu button:hover {
    background: #f0f0f0;
}

/* Canvas Node Styles */
.canvas-node-selected {
    box-shadow: 0 0 10px rgba(99, 102, 241, 0.8);
}

/* Utility Classes */
.hidden {
    display: none !important;
}

/* Loading Spinner */
.spinner {
    border: 3px solid #f3f3f3;
    border-top: 3px solid #6366f1;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    margin: 20px auto;
}

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