/* Custom styles for TechToolsHub */

/* Button Styles */
.btn-primary {
    @apply inline-flex items-center px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors duration-200;
}

.btn-secondary {
    @apply inline-flex items-center px-4 py-2 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-sm font-medium rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 transition-colors duration-200;
}

.btn-success {
    @apply inline-flex items-center px-4 py-2 bg-green-600 text-white text-sm font-medium rounded-lg hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 transition-colors duration-200;
}

.btn-danger {
    @apply inline-flex items-center px-4 py-2 bg-red-600 text-white text-sm font-medium rounded-lg hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 transition-colors duration-200;
}

/* Monaco Editor Dark Theme Override */
.monaco-editor.vs-dark {
    background-color: rgb(31, 41, 55) !important;
}

.monaco-editor .margin {
    background-color: rgb(31, 41, 55) !important;
}

/* Tree View Styles */
.tree-node {
    @apply pl-4 py-1 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700 rounded transition-colors;
}

.tree-node-expanded > .tree-node-content > .tree-toggle::before {
    content: '▼';
}

.tree-node-collapsed > .tree-node-content > .tree-toggle::before {
    content: '▶';
}

.tree-toggle {
    @apply inline-block w-4 text-gray-400 select-none;
}

.tree-key {
    @apply font-medium text-blue-600 dark:text-blue-400;
}

.tree-value-string {
    @apply text-green-600 dark:text-green-400;
}

.tree-value-number {
    @apply text-orange-600 dark:text-orange-400;
}

.tree-value-boolean {
    @apply text-purple-600 dark:text-purple-400;
}

.tree-value-null {
    @apply text-red-600 dark:text-red-400;
}

.tree-type {
    @apply text-xs text-gray-500 dark:text-gray-400 ml-2;
}

.tree-children {
    @apply pl-4 border-l border-gray-200 dark:border-gray-600 ml-2;
}

.tree-node-collapsed > .tree-children {
    @apply hidden;
}

.tree-node-content {
    @apply flex items-center;
}

.tree-search-highlight {
    @apply bg-yellow-200 dark:bg-yellow-800 px-1 rounded;
}

.syntax-punctuation {
    @apply text-gray-600 dark:text-gray-400;
}

/* Operation Button Highlighting */
.operation-btn {
    @apply transition-all duration-200;
}

.operation-btn.active {
    @apply bg-blue-700 ring-2 ring-blue-300 shadow-lg transform scale-105;
}

.operation-btn.active.btn-secondary {
    @apply bg-gray-300 ring-2 ring-gray-400;
}

/* Custom Scrollbar */
.custom-scrollbar::-webkit-scrollbar {
    width: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    @apply bg-gray-100 dark:bg-gray-700 rounded;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    @apply bg-gray-300 dark:bg-gray-500 rounded hover:bg-gray-400 dark:hover:bg-gray-400;
}

/* Loading Animation */
.loading-spinner {
    @apply inline-block w-4 h-4 border-2 border-gray-300 border-t-blue-600 rounded-full animate-spin;
}

/* Responsive Design Enhancements */
@media (max-width: 768px) {
    .btn-primary,
    .btn-secondary,
    .btn-success,
    .btn-danger {
        @apply px-3 py-2 text-xs;
    }
    
    .container {
        @apply px-2;
    }
}

/* Focus States for Accessibility */
button:focus,
input:focus,
select:focus {
    @apply outline-none ring-2 ring-blue-500 ring-offset-2;
}

/* Dark mode transitions */
* {
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

/* Monaco Editor Container */
.monaco-container {
    @apply border border-gray-200 dark:border-gray-600 rounded;
}

/* File drop zone */
.drop-zone {
    @apply border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-lg p-8 text-center;
}

.drop-zone.drag-over {
    @apply border-blue-500 bg-blue-50 dark:bg-blue-900/20;
}

/* Toast Notifications */
.toast {
    @apply fixed top-4 right-4 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg p-4 z-50 transform transition-transform duration-300;
}

.toast.show {
    @apply translate-x-0;
}

.toast.hide {
    @apply translate-x-full;
}

/* Keyboard Shortcuts Display */
.shortcut-key {
    @apply inline-block bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 px-2 py-1 rounded text-xs font-mono border border-gray-300 dark:border-gray-600;
}

/* Error state for inputs */
.input-error {
    @apply border-red-500 bg-red-50 dark:bg-red-900/20;
}

/* Success state for inputs */
.input-success {
    @apply border-green-500 bg-green-50 dark:bg-green-900/20;
}

/* Syntax highlighting for tree view */
.syntax-string {
    @apply text-green-600 dark:text-green-400;
}

.syntax-number {
    @apply text-blue-600 dark:text-blue-400;
}

.syntax-boolean {
    @apply text-purple-600 dark:text-purple-400;
}

.syntax-null {
    @apply text-red-600 dark:text-red-400;
}

.syntax-key {
    @apply text-gray-900 dark:text-gray-100 font-medium;
}

.syntax-punctuation {
    @apply text-gray-600 dark:text-gray-400;
}