/* ── Adactive Attendance System – Global Styles ──────────────────────────── */

/* RTL base */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  direction: rtl;
  scroll-behavior: smooth;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
               'Helvetica Neue', Arial, 'Noto Sans Hebrew', sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ── Navigation link ─────────────────────────────────────────────────────── */
.nav-link {
  display: inline-block;
  padding: 0.375rem 0.875rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #bfdbfe; /* blue-200 */
  transition: background-color 150ms, color 150ms;
}
.nav-link:hover {
  background-color: rgba(255,255,255,0.15);
  color: #ffffff;
}
.nav-link.active {
  background-color: rgba(255,255,255,0.2);
  color: #ffffff;
  font-weight: 600;
}

/* ── Button helpers ──────────────────────────────────────────────────────── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  background-color: #1d4ed8; /* blue-700 */
  color: #ffffff;
  font-weight: 600;
  padding: 0.5rem 1.25rem;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  transition: background-color 150ms;
  cursor: pointer;
  border: none;
}
.btn-primary:hover  { background-color: #1e40af; }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  background-color: #eff6ff; /* blue-50 */
  color: #1d4ed8;
  font-weight: 600;
  padding: 0.5rem 1.25rem;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  border: 1px solid #bfdbfe;
  transition: background-color 150ms;
  cursor: pointer;
}
.btn-secondary:hover { background-color: #dbeafe; }

/* ── Card ────────────────────────────────────────────────────────────────── */
.card {
  background: #ffffff;
  border-radius: 1rem;
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / .07), 0 1px 2px -1px rgb(0 0 0 / .07);
  border: 1px solid #f1f5f9;
}

/* ── Table ───────────────────────────────────────────────────────────────── */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.data-table thead th {
  background-color: #f8fafc;
  color: #64748b;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.75rem 1rem;
  text-align: right;
  border-bottom: 1px solid #e2e8f0;
}
.data-table tbody td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #f1f5f9;
  color: #374151;
}
.data-table tbody tr:hover {
  background-color: #f9fafb;
}
.data-table tbody tr:last-child td {
  border-bottom: none;
}

/* ── Status badges ───────────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.625rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
}
.badge-green  { background:#dcfce7; color:#166534; }
.badge-red    { background:#fee2e2; color:#991b1b; }
.badge-yellow { background:#fef9c3; color:#854d0e; }
.badge-gray   { background:#f1f5f9; color:#475569; }
.badge-blue   { background:#dbeafe; color:#1e40af; }

/* ── Form inputs (global override) ──────────────────────────────────────── */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="datetime-local"],
input[type="month"],
select,
textarea {
  font-size: 0.875rem;
  font-family: inherit;
}

/* Number inputs: hide spinners in Firefox */
input[type="number"] { -moz-appearance: textfield; }
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; }

/* ── Modal backdrop animation ────────────────────────────────────────────── */
.modal-enter {
  animation: modalIn 0.2s ease-out;
}
@keyframes modalIn {
  from { opacity:0; transform:scale(0.95); }
  to   { opacity:1; transform:scale(1); }
}

/* ── Toast ───────────────────────────────────────────────────────────────── */
.toast {
  padding: 0.75rem 1.25rem;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #fff;
  box-shadow: 0 4px 12px rgb(0 0 0 / .15);
  pointer-events: auto;
  transition: opacity 0.3s ease;
}
.toast-success { background-color: #16a34a; }
.toast-error   { background-color: #dc2626; }
.toast-info    { background-color: #2563eb; }

/* ── Spinner ─────────────────────────────────────────────────────────────── */
@keyframes spin {
  to { transform: rotate(360deg); }
}
.animate-spin {
  animation: spin 0.8s linear infinite;
}

/* ── Scrollbar (webkit) ──────────────────────────────────────────────────── */
::-webkit-scrollbar       { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ── RTL table override ──────────────────────────────────────────────────── */
table { direction: rtl; }
th, td { text-align: right; }

/* ── Utility ─────────────────────────────────────────────────────────────── */
.truncate-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}