/* Go Links Custom Styles with Dark Mode Support */

/* Link Card Component */
.link-card {
    @apply bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-4 hover:shadow-md transition-shadow;
}

/* Primary Button */
.btn-primary {
    @apply bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-lg transition-colors;
}

/* Secondary Button */
.btn-secondary {
    @apply bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 text-gray-900 dark:text-gray-100 font-medium py-2 px-4 rounded-lg transition-colors;
}

/* Form Input */
.form-input {
    @apply w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500;
}

/* Tag Component */
.tag {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200;
}

/* Success Tag */
.tag-success {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200;
}

/* Warning Tag */
.tag-warning {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200;
}

/* Error Tag */
.tag-error {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-200;
}

/* Table Styles */
.table-wrapper {
    @apply overflow-x-auto bg-white dark:bg-gray-800 shadow-sm rounded-lg border border-gray-200 dark:border-gray-700;
}

.table {
    @apply min-w-full divide-y divide-gray-200 dark:divide-gray-700;
}

.table-header {
    @apply bg-gray-50 dark:bg-gray-700;
}

.table-header th {
    @apply px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider;
}

.table-row {
    @apply bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors;
}

.table-cell {
    @apply px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100;
}

/* Card Styles */
.card {
    @apply bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6;
}

.card-header {
    @apply border-b border-gray-200 dark:border-gray-700 pb-4 mb-4;
}

.card-title {
    @apply text-lg font-semibold text-gray-900 dark:text-white;
}

.card-subtitle {
    @apply text-sm text-gray-500 dark:text-gray-400;
}

/* Stats Card */
.stats-card {
    @apply bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-4;
}

.stats-value {
    @apply text-2xl font-bold text-gray-900 dark:text-white;
}

.stats-label {
    @apply text-sm font-medium text-gray-500 dark:text-gray-400;
}

/* Navigation Styles */
.nav-link {
    @apply block py-2 pr-4 pl-3 text-gray-700 dark:text-gray-300 border-b border-gray-100 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700 lg:hover:bg-transparent lg:border-0 lg:hover:text-blue-700 dark:lg:hover:text-blue-400 lg:p-0 transition-colors;
}

.nav-link-active {
    @apply text-blue-700 dark:text-blue-400 lg:bg-blue-50 dark:lg:bg-blue-900/20;
}

/* Search Input */
.search-input {
    @apply bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 text-gray-900 dark:text-white dark:placeholder-gray-400 sm:text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5;
}

/* Notification Styles */
.notification {
    @apply fixed top-4 right-4 z-50 p-4 rounded-lg shadow-lg transition-all duration-300 max-w-sm;
}

.notification-success {
    @apply bg-green-500 text-white;
}

.notification-error {
    @apply bg-red-500 text-white;
}

.notification-warning {
    @apply bg-yellow-500 text-white;
}

.notification-info {
    @apply bg-blue-500 text-white;
}

/* Loading Spinner */
.loading-spinner {
    @apply animate-spin rounded-full h-5 w-5 border-b-2 border-white;
}

/* Breadcrumb */
.breadcrumb {
    @apply flex items-center space-x-1 text-sm font-medium md:space-x-2;
}

.breadcrumb-item {
    @apply inline-flex items-center text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400;
}

.breadcrumb-separator {
    @apply w-6 h-6 text-gray-400 dark:text-gray-500;
}

/* Form Styles */
.form-group {
    @apply mb-6;
}

.form-label {
    @apply block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2;
}

.form-help {
    @apply mt-2 text-sm text-gray-500 dark:text-gray-400;
}

.form-error {
    @apply mt-1 text-sm text-red-600 dark:text-red-400;
}

.form-success {
    @apply mt-1 text-sm text-green-600 dark:text-green-400;
}

/* Checkbox Styles */
.checkbox {
    @apply w-4 h-4 text-blue-600 bg-gray-100 dark:bg-gray-700 border-gray-300 dark:border-gray-600 rounded focus:ring-blue-500 dark:focus:ring-blue-400 focus:ring-2;
}

/* Toggle Switch */
.toggle-switch {
    @apply relative inline-flex h-6 w-11 items-center rounded-full bg-gray-200 dark:bg-gray-600 transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2;
}

.toggle-switch-active {
    @apply bg-blue-600;
}

.toggle-switch-handle {
    @apply inline-block h-4 w-4 transform rounded-full bg-white transition-transform;
}

.toggle-switch-handle-active {
    @apply translate-x-6;
}

/* Dropdown Styles */
.dropdown {
    @apply relative inline-block text-left;
}

.dropdown-menu {
    @apply absolute right-0 z-10 mt-2 w-56 origin-top-right rounded-md bg-white dark:bg-gray-800 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none;
}

.dropdown-item {
    @apply block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer;
}

/* Modal Styles */
.modal-overlay {
    @apply fixed inset-0 bg-gray-600 bg-opacity-50 dark:bg-gray-900 dark:bg-opacity-60 overflow-y-auto h-full w-full z-50;
}

.modal-content {
    @apply relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700;
}

/* Pagination */
.pagination {
    @apply flex items-center justify-between border-t border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 px-4 py-3 sm:px-6;
}

.pagination-button {
    @apply relative inline-flex items-center px-2 py-2 text-sm font-medium text-gray-500 dark:text-gray-400 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700;
}

.pagination-button-active {
    @apply z-10 bg-blue-50 dark:bg-blue-900/20 border-blue-500 dark:border-blue-400 text-blue-600 dark:text-blue-400;
}

/* Utility Classes */
.text-muted {
    @apply text-gray-500 dark:text-gray-400;
}

.bg-muted {
    @apply bg-gray-100 dark:bg-gray-700;
}

.border-muted {
    @apply border-gray-200 dark:border-gray-700;
}

.hover-lift {
    @apply hover:shadow-lg hover:-translate-y-1 transition-all duration-200;
}

/* Dark mode specific utilities */
.dark-mode-transition {
    @apply transition-colors duration-200;
}

/* Scrollbar Styles for dark mode */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    @apply bg-gray-100 dark:bg-gray-800;
}

::-webkit-scrollbar-thumb {
    @apply bg-gray-300 dark:bg-gray-600 rounded-md;
}

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

/* Firefox scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: #CBD5E0 #F7FAFC;
}

.dark * {
    scrollbar-color: #4A5568 #1A202C;
}

/* Focus styles for accessibility */
.focus-visible {
    @apply focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-gray-800;
}

/* Print styles */
@media print {
    .no-print {
        display: none !important;
    }
    
    body {
        color: black !important;
        background: white !important;
    }
}