/* Custom RTL styles for Khabircom */
body {
    font-family: 'Tajawal', Arial, sans-serif;
}

/* RTL specific adjustments */
.rtl-flip {
    transform: scaleX(-1);
}

/* Custom scrollbar for RTL */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* Toast notifications */
.toast {
    position: fixed;
    top: 20px;
    left: 20px;
    background: #10b981;
    color: white;
    padding: 12px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
}

.toast.show {
    transform: translateX(0);
}

.toast.error {
    background: #ef4444;
}

.toast.warning {
    background: #f59e0b;
}

.toast.info {
    background: #3b82f6;
}

/* Loading spinner */
.spinner {
    border: 2px solid #f3f3f3;
    border-top: 2px solid #3b82f6;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin 1s linear infinite;
}

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

/* Custom form styles */
.form-input {
    @apply w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500;
}

.form-select {
    @apply w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white;
}

.form-textarea {
    @apply w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 resize-vertical;
}

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

.btn-secondary {
    @apply bg-gray-600 hover:bg-gray-700 text-white font-medium py-2 px-4 rounded-md transition-colors duration-200;
}

.btn-success {
    @apply bg-green-600 hover:bg-green-700 text-white font-medium py-2 px-4 rounded-md transition-colors duration-200;
}

.btn-danger {
    @apply bg-red-600 hover:bg-red-700 text-white font-medium py-2 px-4 rounded-md transition-colors duration-200;
}

.btn-outline {
    @apply border border-gray-300 hover:bg-gray-50 text-gray-700 font-medium py-2 px-4 rounded-md transition-colors duration-200;
}

/* Card styles */
.card {
    @apply bg-white rounded-lg shadow-md overflow-hidden;
}

.card-header {
    @apply px-6 py-4 border-b border-gray-200 bg-gray-50;
}

.card-body {
    @apply px-6 py-4;
}

.card-footer {
    @apply px-6 py-4 border-t border-gray-200 bg-gray-50;
}

/* Enhanced Table styles with column spacing */
.table {
    @apply w-full divide-y divide-gray-200;
    border-spacing: 12px 0;
    border-collapse: separate;
    table-layout: auto;
}

.table th {
    @apply px-6 md:px-10 py-4 text-right text-xs font-medium text-gray-500 uppercase tracking-wider bg-gray-50;
    white-space: nowrap;
    border-right: 3px solid #e5e7eb;
    position: relative;
    box-shadow: inset -1px 0 0 0 #d1d5db;
}

.table th:first-child {
    @apply pr-8 md:pr-12;
}

.table th:last-child {
    border-right: none;
    box-shadow: none;
    @apply pl-8 md:pl-12;
}

.table td {
    @apply px-6 md:px-10 py-6 text-sm text-gray-900;
    word-wrap: break-word;
    max-width: 200px;
    border-right: 3px solid #f3f4f6;
    vertical-align: top;
    position: relative;
}

.table td:first-child {
    @apply pr-8 md:pr-12;
}

.table td:last-child {
    border-right: none;
    @apply pl-8 md:pl-12;
}

/* Column separator enhancement */
.table th::after,
.table td::after {
    content: '';
    position: absolute;
    right: -1.5px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: linear-gradient(to bottom, transparent 10%, #d1d5db 50%, transparent 90%);
}

.table th:last-child::after,
.table td:last-child::after {
    display: none;
}

.table td.nowrap {
    @apply whitespace-nowrap;
}

.table td.truncate {
    @apply truncate;
    max-width: 150px;
}

.table td.wide {
    max-width: 300px;
}

.table tbody tr:nth-child(even) {
    @apply bg-gray-50;
}

.table tbody tr:hover {
    @apply bg-blue-50;
}

/* Responsive table container */
.table-container {
    @apply overflow-x-auto;
    -webkit-overflow-scrolling: touch;
}

/* Responsive table spacing */
@media (max-width: 1024px) {
    .table {
        border-spacing: 8px 0;
    }

    .table th {
        @apply px-4 md:px-6 py-3;
        border-right: 2px solid #e5e7eb;
    }

    .table td {
        @apply px-4 md:px-6 py-4;
        border-right: 2px solid #f3f4f6;
    }

    .table th:first-child,
    .table td:first-child {
        @apply pr-6 md:pr-8;
    }

    .table th:last-child,
    .table td:last-child {
        @apply pl-6 md:pl-8;
    }
}

/* Mobile table adjustments */
@media (max-width: 768px) {
    .table {
        border-spacing: 4px 0;
    }

    .table th,
    .table td {
        @apply px-3 py-2 text-xs;
        border-right: 1px solid #e5e7eb;
    }

    .table th:first-child,
    .table td:first-child {
        @apply pr-4;
    }

    .table th:last-child,
    .table td:last-child {
        @apply pl-4;
        border-right: none;
    }

    .table td.truncate {
        max-width: 100px;
    }

    .table td.wide {
        max-width: 150px;
    }

    .table .actions-column {
        min-width: 80px;
    }

    .table th::after,
    .table td::after {
        display: none;
    }
}

/* Table cell content alignment */
.table .text-center {
    @apply text-center;
}

.table .font-mono {
    @apply font-mono;
}

/* Action buttons in tables */
.table .action-buttons {
    @apply flex space-x-1 space-x-reverse justify-center;
}

.table .action-buttons button {
    @apply p-1;
}

/* Badge styles */
.badge {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
}

.badge-success {
    @apply bg-green-100 text-green-800;
}

.badge-warning {
    @apply bg-yellow-100 text-yellow-800;
}

.badge-danger {
    @apply bg-red-100 text-red-800;
}

.badge-info {
    @apply bg-blue-100 text-blue-800;
}

.badge-secondary {
    @apply bg-gray-100 text-gray-800;
}

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

.modal-container {
    @apply relative top-20 mx-auto p-5 border w-11/12 md:w-3/4 lg:w-1/2 shadow-lg rounded-md bg-white;
}

/* Typeahead styles */
.typeahead-container {
    @apply relative;
}

.typeahead-dropdown {
    @apply absolute z-10 w-full bg-white border border-gray-300 rounded-md shadow-lg max-h-60 overflow-auto;
}

.typeahead-item {
    @apply px-4 py-2 hover:bg-blue-50 cursor-pointer;
}

.typeahead-item.active {
    @apply bg-blue-100;
}

/* Map styles */
.map-container {
    @apply w-full h-96 rounded-lg overflow-hidden shadow-md;
}

.map-filters {
    @apply bg-white p-4 rounded-lg shadow-md mb-4;
}

/* Print styles */
@media print {
    .no-print {
        display: none !important;
    }
    
    body {
        background: white !important;
    }
    
    .card {
        box-shadow: none !important;
        border: 1px solid #ddd !important;
    }
}

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

/* Animation classes */
.fade-in {
    animation: fadeIn 0.3s ease-in;
}

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

.slide-in-right {
    animation: slideInRight 0.3s ease-out;
}

@keyframes slideInRight {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

/* Status indicators */
.status-dot {
    @apply inline-block w-2 h-2 rounded-full mr-2;
}

.status-active {
    @apply bg-green-500;
}

.status-pending {
    @apply bg-yellow-500;
}

.status-inactive {
    @apply bg-red-500;
}

.status-draft {
    @apply bg-gray-500;
}