/* re:H Thailand CRM - Main Styles */

/* Base Styles */
* {
    box-sizing: border-box;
}

body {
    font-family: 'Sarabun', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f9fafb;
}

/* Loading Screen */
#loading-screen {
    transition: opacity 0.3s ease-in-out;
}

/* Navigation */
.sidebar-link {
    transition: all 0.2s ease;
}

.sidebar-link:hover {
    background-color: #f3f4f6;
    color: #2563eb;
}

.sidebar-link.active {
    background-color: #eff6ff;
    color: #2563eb;
    border-left: 3px solid #2563eb;
}

/* Form Styles */
.form-input,
.form-select,
.form-textarea {
    @apply w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* Button Styles */
.btn-primary {
    @apply bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2;
    transition: all 0.2s ease;
}

.btn-secondary {
    @apply bg-gray-600 text-white px-4 py-2 rounded-lg hover:bg-gray-700 focus:ring-2 focus:ring-gray-500 focus:ring-offset-2;
    transition: all 0.2s ease;
}

.btn-outline {
    @apply border border-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-50 focus:ring-2 focus:ring-gray-500 focus:ring-offset-2;
    transition: all 0.2s ease;
}

/* Card Styles */
.card {
    @apply bg-white rounded-lg shadow p-6;
}

/* Table Styles */
.table-container {
    @apply bg-white rounded-lg shadow overflow-hidden;
}

.data-table {
    @apply min-w-full divide-y divide-gray-200;
}

.data-table th {
    @apply px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider;
}

.data-table td {
    @apply px-6 py-4 whitespace-nowrap text-sm text-gray-900;
}

/* Notification Styles */
.notification {
    @apply rounded-lg shadow-lg p-4 mb-2 max-w-sm;
    animation: slideIn 0.3s ease-out;
}

.notification-success {
    @apply bg-green-100 text-green-800 border border-green-200;
}

.notification-error {
    @apply bg-red-100 text-red-800 border border-red-200;
}

.notification-warning {
    @apply bg-yellow-100 text-yellow-800 border border-yellow-200;
}

.notification-info {
    @apply bg-blue-100 text-blue-800 border border-blue-200;
}

.notification-content {
    @apply flex items-center justify-between;
}

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

/* Modal Styles */
.modal-overlay {
    @apply fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50;
    animation: fadeIn 0.2s ease-out;
}

.modal-content {
    @apply bg-white rounded-lg shadow-xl max-h-[90vh] overflow-hidden;
    animation: scaleIn 0.2s ease-out;
}

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

@keyframes scaleIn {
    from { 
        transform: scale(0.95);
        opacity: 0;
    }
    to { 
        transform: scale(1);
        opacity: 1;
    }
}

/* Status Badge Styles */
.status-active {
    @apply bg-green-100 text-green-800 px-2 py-1 text-xs font-semibold rounded-full;
}

.status-inactive {
    @apply bg-red-100 text-red-800 px-2 py-1 text-xs font-semibold rounded-full;
}

.status-pending {
    @apply bg-yellow-100 text-yellow-800 px-2 py-1 text-xs font-semibold rounded-full;
}

/* Action Button Styles */
.action-btn {
    @apply inline-flex items-center px-2 py-1 text-sm font-medium rounded transition-colors duration-200;
}

.action-btn-view {
    @apply text-blue-600 hover:text-blue-800 hover:bg-blue-50;
}

.action-btn-edit {
    @apply text-green-600 hover:text-green-800 hover:bg-green-50;
}

.action-btn-delete {
    @apply text-red-600 hover:text-red-800 hover:bg-red-50;
}

/* Responsive Styles */
@media (max-width: 768px) {
    .sidebar {
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }
    
    .sidebar.open {
        transform: translateX(0);
    }
    
    .main-content {
        margin-left: 0;
    }
}

/* Thai Font Support */
.font-thai {
    font-family: 'Sarabun', sans-serif;
}

/* Utility Classes */
.text-shadow {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.gradient-bg {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* Loading Spinner */
.spinner {
    @apply animate-spin rounded-full border-2 border-gray-300 border-t-blue-600;
}

/* Form Validation Styles */
.field-error {
    @apply border-red-500 focus:border-red-500 focus:ring-red-500;
}

.error-message {
    @apply text-red-500 text-sm mt-1;
}

/* Dashboard KPI Cards */
.kpi-card {
    @apply bg-white p-6 rounded-lg shadow transition-transform duration-200 hover:scale-105;
}

.kpi-icon {
    @apply p-3 rounded-full text-2xl;
}

/* Empty State Styles */
.empty-state {
    @apply text-center py-12;
}

.empty-state-icon {
    @apply text-6xl text-gray-300 mb-4;
}

.empty-state-title {
    @apply text-xl font-medium text-gray-900 mb-2;
}

.empty-state-description {
    @apply text-gray-600 mb-4;
}

/* Search Box Styles */
.search-box {
    @apply relative;
}

.search-icon {
    @apply absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400;
}

.search-input {
    @apply pl-10 pr-4 py-2 border border-gray-300 rounded-lg w-full focus:ring-2 focus:ring-blue-500 focus:border-blue-500;
}