/* PayFlow — Custom CSS on top of Tailwind */
:root {
  --primary: #2563eb;
  --primary-hover: #1d4ed8;
  --primary-light: #eff6ff;
  --sidebar-bg: #1e293b;
  --sidebar-text: #cbd5e1;
  --sidebar-active: #2563eb;
}

body {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* RTL overrides */
[dir="rtl"] .ml-auto { margin-left: 0 !important; margin-right: auto !important; }
[dir="rtl"] .mr-2 { margin-right: 0 !important; margin-left: 0.5rem !important; }
[dir="rtl"] .mr-3 { margin-right: 0 !important; margin-left: 0.75rem !important; }
[dir="rtl"] .space-x-3 > :not([hidden]) ~ :not([hidden]) { --tw-space-x-reverse: 1; }
[dir="rtl"] .text-right { text-align: left; }
[dir="rtl"] .text-left { text-align: right; }
[dir="rtl"] .left-0 { left: auto !important; right: 0 !important; }
[dir="rtl"] .right-0 { right: auto !important; left: 0 !important; }
[dir="rtl"] .justify-start { justify-content: flex-end; }
[dir="rtl"] .justify-end { justify-content: flex-start; }

/* ========== SIDEBAR ========== */
.sidebar-link {
  @apply flex items-center px-4 py-3 text-sm rounded-lg transition-colors;
  color: var(--sidebar-text);
}
.sidebar-link:hover {
  background: rgba(255,255,255,0.1);
  color: white;
}
.sidebar-link.active {
  background: var(--sidebar-active);
  color: white;
}

/* ========== CARDS ========== */
.stat-card {
  @apply bg-white rounded-xl shadow-sm border border-gray-200 p-6 transition-all;
}
.stat-card:hover {
  @apply shadow-md border-gray-300;
}

/* ========== TABLES ========== */
.table-header {
  @apply px-4 py-3 text-xs font-semibold uppercase tracking-wider text-gray-500 bg-gray-50;
}
.table-cell {
  @apply px-4 py-3 text-sm text-gray-700;
}

/* Table row dividers */
table.w-full tbody tr {
  border-bottom: 1px solid #f3f4f6;
}
table.w-full tbody tr:last-child {
  border-bottom: none;
}

/* ========== BUTTONS ========== */
.btn-primary {
  @apply inline-flex items-center px-5 py-2.5 rounded-lg text-sm font-medium text-white transition-all;
  background: var(--primary);
  border: 2px solid #1d4ed8;
  box-shadow: 0 1px 3px rgba(37, 99, 235, 0.25);
}
.btn-primary:hover {
  background: var(--primary-hover);
  border-color: #1e40af;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.35);
  transform: translateY(-1px);
}
.btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(37, 99, 235, 0.2);
}
.btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.btn-secondary {
  @apply inline-flex items-center px-5 py-2.5 rounded-lg text-sm font-medium text-gray-700 bg-white transition-all;
  border: 2px solid #d1d5db;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.btn-secondary:hover {
  @apply bg-gray-50;
  border-color: #9ca3af;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.btn-danger {
  @apply inline-flex items-center px-5 py-2.5 rounded-lg text-sm font-medium text-white transition-all;
  background: #dc2626;
  border: 2px solid #b91c1c;
  box-shadow: 0 1px 3px rgba(220, 38, 38, 0.25);
}
.btn-danger:hover {
  background: #b91c1c;
  border-color: #991b1b;
  box-shadow: 0 2px 6px rgba(220, 38, 38, 0.35);
  transform: translateY(-1px);
}

/* ========== FORM INPUTS ========== */
.form-input {
  @apply w-full px-4 py-2.5 rounded-lg text-sm transition-all;
  border: 2px solid #d1d5db;
  background: #fff;
}
.form-input:focus {
  @apply outline-none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.form-input:hover {
  border-color: #9ca3af;
}
.form-label {
  @apply block text-sm font-medium text-gray-700 mb-1.5;
}

/* ========== SECTION DIVIDERS ========== */
.section-divider {
  @apply border-b-2 border-gray-200 pb-3 mb-6;
}

/* Form section header */
.form-section-title {
  @apply text-base font-bold text-gray-800;
  border-bottom: 2px solid #e5e7eb;
  padding-bottom: 0.5rem;
  margin-bottom: 1.25rem;
}

/* Salary summary box */
.salary-summary {
  @apply bg-blue-50 border-2 border-blue-200 rounded-lg p-4 mt-3;
}

/* ========== LOADING SPINNER ========== */
.spinner {
  border: 3px solid #f3f3f3;
  border-top: 3px solid var(--primary);
  border-radius: 50%;
  width: 24px;
  height: 24px;
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
[dir="rtl"] .spinner { animation: spin-rtl 0.8s linear infinite; }
@keyframes spin-rtl {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(-360deg); }
}

/* ========== TOAST ========== */
.toast {
  @apply fixed bottom-4 right-4 z-50 px-6 py-3 rounded-lg shadow-lg text-white text-sm font-medium transition-all duration-300;
  transform: translateY(100px);
  opacity: 0;
}
.toast.show {
  transform: translateY(0);
  opacity: 1;
}
.toast-success { @apply bg-green-600; }
.toast-error { @apply bg-red-600; }
[dir="rtl"] .toast { right: auto; left: 1rem; }

/* ========== MOBILE NAV ========== */
.mobile-nav {
  @apply fixed inset-0 z-40 bg-gray-900 bg-opacity-50 transition-opacity;
}
.mobile-nav-panel {
  @apply fixed inset-y-0 left-0 z-50 w-64 bg-gray-900 shadow-xl transform transition-transform;
}
[dir="rtl"] .mobile-nav-panel { left: auto; right: 0; }

/* ========== AUTH PAGES ========== */
.auth-card {
  @apply bg-white rounded-2xl shadow-2xl border border-gray-100 p-8;
}