/* ── Navigation progress loader ────────────────────────────────────────── */
#nav-loader {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 3px;
  z-index: 10000;
  pointer-events: none;
  display: none;
}
#nav-loader-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--ejada-primary, #1a56db), #7e3af2);
  box-shadow: 0 0 8px rgba(26, 86, 219, .55);
  border-radius: 0 2px 2px 0;
  animation: nav-progress 1.6s ease-out forwards;
}
@keyframes nav-progress {
  0%  { width: 0%; }
  40% { width: 55%; }
  70% { width: 75%; }
  100%{ width: 88%; }
}

/* ── Ejada Design System ───────────────────────────────────────────────── */
:root {
  --ejada-primary:   #1a56db;
  --ejada-secondary: #1e2a3b;
  --ejada-sidebar-w: 260px;
  --ejada-sidebar-bg: #ffffff;
  --ejada-sidebar-text: #374151;
  --ejada-sidebar-hover: #f0f4ff;
  --ejada-sidebar-active: #1a56db;
}

/* ── Layout ────────────────────────────────────────────────────────────── */
body { background: #f3f4f8; font-family: 'Segoe UI', system-ui, sans-serif; }

.wrapper { display: flex; min-height: 100vh; }

/* ── Sidebar ───────────────────────────────────────────────────────────── */
#sidebar {
  width: var(--ejada-sidebar-w);
  background: var(--ejada-sidebar-bg);
  color: var(--ejada-sidebar-text);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 1040;
  transition: width 0.3s ease, transform 0.3s ease;
  overflow: hidden;
}

/* ── Collapsed sidebar (desktop) ───────────────────────────────────────── */
#sidebar.collapsed { width: 64px; }
#sidebar.collapsed .sidebar-logo-img { display: none; }
#sidebar.collapsed .sidebar-brand { justify-content: center; padding: 1.25rem 0; }
#sidebar.collapsed .nav-label { display: none; }
#sidebar.collapsed .nav-link { justify-content: center; padding: .65rem 0; margin: 2px 4px; }
#sidebar.collapsed .nav-icon { font-size: 1.25rem; opacity: 1; }

#sidebar .sidebar-brand {
  padding: 1.25rem 1.25rem;
  border-bottom: 1px solid rgba(0,0,0,.08);
}

#sidebar {
  border-right: 1px solid #e5e7eb;
}

#sidebar .nav-link {
  color: var(--ejada-sidebar-text);
  padding: .65rem 1.25rem;
  border-radius: 6px;
  margin: 2px 10px;
  transition: all .2s;
  font-size: .9rem;
  display: flex;
  align-items: center;
  gap: 10px;
}
#sidebar .nav-link:hover  { background: var(--ejada-sidebar-hover); color: var(--ejada-primary); }
#sidebar .nav-link.active { background: var(--ejada-sidebar-active); color: #fff; }
#sidebar .nav-icon { font-size: 1rem; opacity: 1; }

/* ── Main content ──────────────────────────────────────────────────────── */
#main-content {
  margin-left: var(--ejada-sidebar-w);
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  transition: margin-left 0.3s ease;
}
#main-content.sidebar-collapsed { margin-left: 64px; }

/* ── Topbar ────────────────────────────────────────────────────────────── */
.topbar {
  height: 60px;
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  padding: 0 1.5rem;
  gap: 1rem;
  position: sticky;
  top: 0;
  z-index: 1030;
}
.topbar .page-title { font-weight: 600; font-size: 1.05rem; flex: 1; }

/* ── Page body ─────────────────────────────────────────────────────────── */
.page-body { padding: 1.75rem; flex: 1; }

/* ── Cards ─────────────────────────────────────────────────────────────── */
.stat-card {
  border: none;
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.stat-card .stat-value { font-size: 2rem; font-weight: 700; color: var(--ejada-primary); }
.stat-card .stat-label { font-size: .85rem; color: #6b7280; margin-top: 4px; }
/* Coloured accent variants — left border strip + matching value colour */
.stat-card.stat-card--total      { border-left: 4px solid #1a56db; }
.stat-card.stat-card--total      .stat-value { color: #1a56db; }
.stat-card.stat-card--completed  { border-left: 4px solid #10b981; }
.stat-card.stat-card--completed  .stat-value { color: #10b981; }
.stat-card.stat-card--inprogress { border-left: 4px solid #f59e0b; }
.stat-card.stat-card--inprogress .stat-value { color: #f59e0b; }
.stat-card.stat-card--overdue    { border-left: 4px solid #ef4444; }
.stat-card.stat-card--overdue    .stat-value { color: #ef4444; }
.stat-card .stat-icon { font-size: 1.6rem; line-height: 1; margin-bottom: .35rem; }

/* ── DataTables ─────────────────────────────────────────────────────────── */
.dt-container { background: #fff; border-radius: 12px; padding: 1rem; box-shadow: 0 1px 4px rgba(0,0,0,.06); }
table.dataTable thead th { background: #f9fafb; font-weight: 600; font-size: .82rem; text-transform: uppercase; letter-spacing: .3px; }

/* ── Badges ─────────────────────────────────────────────────────────────── */
.badge { font-size: .75rem; padding: .35em .65em; border-radius: 6px; }

/* ── Modal improvements ─────────────────────────────────────────────────── */
.modal-header { border-bottom: 2px solid #f3f4f8; }
.modal-footer { border-top: 1px solid #f3f4f8; }

/* ── Password strength bar ──────────────────────────────────────────────── */
.strength-bar { height: 5px; border-radius: 3px; transition: width .4s, background .4s; }

/* ── Filter bar ─────────────────────────────────────────────────────────── */
.filter-bar { background: #fff; border-radius: 12px; padding: 1rem 1.25rem; margin-bottom: 1.25rem; box-shadow: 0 1px 4px rgba(0,0,0,.06); }

/* ── Mobile responsive ──────────────────────────────────────────────────── */
@media (max-width: 768px) {
  #sidebar { transform: translateX(-100%); width: var(--ejada-sidebar-w) !important; }
  #sidebar.show { transform: translateX(0); }
  #main-content, #main-content.sidebar-collapsed { margin-left: 0; }
}

/* ── Full-calendar tweaks ───────────────────────────────────────────────── */
.fc .fc-toolbar-title { font-size: 1rem; font-weight: 600; }
.fc-event { border-radius: 4px; font-size: .78rem; padding: 1px 4px; }

/* ── Login page ─────────────────────────────────────────────────────────── */
.login-page { background: linear-gradient(135deg, #1e2a3b 0%, #1a56db 100%); min-height: 100vh; }
.login-card { border-radius: 16px; box-shadow: 0 8px 32px rgba(0,0,0,.18); }
.login-logo-img { max-width: 180px; height: auto; display: block; margin: 0 auto; }

/* ── Sidebar logo ────────────────────────────────────────────────────────── */
.sidebar-logo-img {
  max-width: 150px;
  height: auto;
  display: block;
}

/* ── User avatar ────────────────────────────────────────────────────────── */
.user-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--ejada-primary);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .85rem;
  overflow: hidden;
  border: 2px solid rgba(26,86,219,.25);
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color .2s, box-shadow .2s;
}
.user-avatar:hover { border-color: var(--ejada-primary); box-shadow: 0 0 0 3px rgba(26,86,219,.15); }
.user-avatar img   { width: 100%; height: 100%; object-fit: cover; }

/* ── Topbar user block ──────────────────────────────────────────────────── */
.topbar-user { display: flex; align-items: center; gap: .6rem; }
.topbar-user .user-name  { font-weight: 600; font-size: .88rem; line-height: 1.1; }
.topbar-user .user-role  { font-size: .72rem; }

/* dropdown arrow hide */
.user-avatar.dropdown-toggle::after { display: none; }

/* ── Gender-based avatar colours ────────────────────────────────────────── */
.user-avatar.gender-male   { background: #1a56db; }   /* blue  */
.user-avatar.gender-female { background: #c2185b; }   /* rose  */