/* ==================== Root Variables ==================== */
:root {
  --primary: #0f766e;
  --primary-dark: #115e59;
  --primary-light: #14b8a6;
  --accent: #f59e0b;
  --accent-dark: #d97706;
  --bg: #f8fafc;
  --bg-card: #ffffff;
  --bg-dark: #0f172a;
  --sidebar-bg: #1e293b;
  --sidebar-hover: #334155;
  --text: #0f172a;
  --text-muted: #64748b;
  --text-light: #94a3b8;
  --border: #e2e8f0;
  --border-dark: #cbd5e1;
  --success: #10b981;
  --warning: #f59e0b;
  --danger: #ef4444;
  --info: #3b82f6;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
  --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.10);
  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 16px;
  --transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==================== Reset ==================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 15px;
}

body {
  font-family: 'Tajawal', 'Cairo', 'Segoe UI', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  direction: rtl;
  line-height: 1.6;
  min-height: 100vh;
}

a {
  color: var(--primary);
  text-decoration: none;
  transition: color var(--transition);
}
a:hover { color: var(--primary-dark); }

/* ==================== Layout ==================== */
.app {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  width: 260px;
  background: var(--sidebar-bg);
  color: #e2e8f0;
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  overflow-y: auto;
  padding: 1.5rem 0;
  z-index: 100;
  transition: transform var(--transition);
}

.sidebar-brand {
  padding: 0 1.5rem 1.5rem;
  border-bottom: 1px solid #334155;
  margin-bottom: 1rem;
}
.sidebar-brand h1 {
  font-size: 1.35rem;
  font-weight: 800;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.sidebar-brand .logo {
  width: 38px;
  height: 38px;
  background: linear-gradient(135deg, var(--primary-light), var(--primary));
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.2rem;
  box-shadow: 0 4px 12px rgba(20, 184, 166, 0.3);
}
.sidebar-brand .tagline {
  font-size: 0.75rem;
  color: #94a3b8;
  margin-top: 4px;
  font-weight: 400;
}

.nav-section {
  padding: 0.5rem 0;
}
.nav-section-title {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #64748b;
  padding: 0.75rem 1.5rem 0.5rem;
  font-weight: 700;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 1.5rem;
  color: #cbd5e1;
  font-weight: 500;
  font-size: 0.925rem;
  transition: all var(--transition);
  border-right: 3px solid transparent;
  position: relative;
}
.nav-item:hover {
  background: var(--sidebar-hover);
  color: #fff;
}
.nav-item.active {
  background: linear-gradient(90deg, rgba(20, 184, 166, 0.15), transparent);
  color: var(--primary-light);
  border-right-color: var(--primary-light);
}
.nav-item .icon {
  width: 20px;
  text-align: center;
  font-size: 1rem;
}
.nav-item .badge {
  margin-right: auto;
  background: var(--danger);
  color: #fff;
  font-size: 0.7rem;
  padding: 2px 7px;
  border-radius: 10px;
  font-weight: 700;
}
.nav-badge {
  margin-inline-start: auto;
  background: #0ea5e9;
  color: #fff;
  font-size: 0.68rem;
  padding: 2px 7px;
  border-radius: 10px;
  font-weight: 700;
  min-width: 20px;
  text-align: center;
  line-height: 1.4;
}
.nav-badge-urgent {
  background: var(--danger);
  animation: badge-pulse 2s infinite;
}
@keyframes badge-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .7; }
}

.main {
  flex: 1;
  margin-right: 260px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  /* .main عنصر flex داخل .app، وقيمة min-width الابتدائية لعنصر flex هي auto
     فيرفض الانكماش تحت العرض الطبيعي لمحتواه: جدول عرضه 2000px يفرض على .main
     أن يصير 2260px مهما كانت الشاشة، فتفيض الصفحة كلها أفقياً ولا يعمل تمرير
     أي حاوية داخلية (overflow:auto لا يجد ما يقصّه). min-width:0 يرفع المنع
     فينكمش العمود ويتحرّك التمرير داخل الجدول — في كل المقاسات لا الجوال وحده.
     (لا نلمس <table> نفسه: display:block عليه يهدم التخطيط ويكسر النص.) */
  min-width: 0;
}

.topbar {
  background: #fff;
  border-bottom: 1px solid var(--border);
  padding: 1rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: var(--shadow-sm);
}

.page-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text);
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.user-badge {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  background: var(--bg);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}
.user-avatar {
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.9rem;
}
.user-info { line-height: 1.2; }
.user-name { font-weight: 600; font-size: 0.875rem; }
.user-role {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.notif-btn {
  position: relative;
  width: 40px;
  height: 40px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition);
}
.notif-btn:hover { background: var(--border); }
.notif-btn .badge {
  position: absolute;
  top: -4px;
  left: -4px;
  background: var(--danger);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
}

.content {
  padding: 2rem;
  flex: 1;
}

/* ==================== Cards ==================== */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition);
}
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}
.card-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* ==================== Stats Grid (Dashboard) ==================== */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
  position: relative;
  overflow: hidden;
  transition: all var(--transition);
}
.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}
.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 100px;
  height: 100px;
  background: radial-gradient(circle, var(--accent-color, var(--primary)) 0%, transparent 70%);
  opacity: 0.08;
  border-radius: 50%;
  transform: translate(30%, -30%);
}
.stat-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent-color, var(--primary)) 12%, transparent);
  color: var(--accent-color, var(--primary));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  margin-bottom: 0.75rem;
}
.stat-value {
  font-size: 2rem;
  font-weight: 800;
  color: var(--text);
  line-height: 1;
  margin-bottom: 0.25rem;
}
.stat-label {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-weight: 500;
}

/* Stat accent colors */
.stat-card.primary { --accent-color: var(--primary); }
.stat-card.success { --accent-color: var(--success); }
.stat-card.warning { --accent-color: var(--warning); }
.stat-card.danger { --accent-color: var(--danger); }
.stat-card.info { --accent-color: var(--info); }
.stat-card.accent { --accent-color: var(--accent); }

/* ==================== Buttons ==================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.25rem;
  font-size: 0.925rem;
  font-weight: 600;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition);
  font-family: inherit;
  line-height: 1.3;
  text-decoration: none;
}
.btn-primary {
  background: var(--primary);
  color: #fff;
}
.btn-primary:hover {
  background: var(--primary-dark);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}
.btn-success { background: var(--success); color: #fff; }
.btn-success:hover { background: #059669; color: #fff; }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { background: #dc2626; color: #fff; }
.btn-warning { background: var(--warning); color: #fff; }
.btn-warning:hover { background: var(--accent-dark); color: #fff; }
.btn-info { background: var(--info); color: #fff; }
.btn-info:hover { background: #2563eb; color: #fff; }
.btn-outline {
  background: transparent;
  border-color: var(--border-dark);
  color: var(--text);
}
.btn-outline:hover {
  background: var(--bg);
  border-color: var(--primary);
  color: var(--primary);
}
.btn-sm {
  padding: 0.4rem 0.8rem;
  font-size: 0.825rem;
}
.btn-lg {
  padding: 0.85rem 1.75rem;
  font-size: 1.05rem;
}
.btn-block { width: 100%; justify-content: center; }

/* ==================== Forms ==================== */
.form-group {
  margin-bottom: 1.25rem;
}
.form-label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
  color: var(--text);
  font-size: 0.9rem;
}
.form-label .required { color: var(--danger); }
.form-control {
  width: 100%;
  padding: 0.65rem 0.85rem;
  font-size: 0.95rem;
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--text);
  font-family: inherit;
  transition: all var(--transition);
}
.form-control:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.1);
}
textarea.form-control {
  min-height: 80px;
  resize: vertical;
}
.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}
.form-hint {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 0.25rem;
}

/* ==================== Tables ==================== */
.table-wrapper {
  overflow-x: auto;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: #fff;
}
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.table thead {
  background: #f8fafc;
  border-bottom: 1px solid var(--border);
}
.table th {
  padding: 0.85rem 1rem;
  text-align: right;
  font-weight: 700;
  color: var(--text-muted);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.table td {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}
.table tbody tr:hover {
  background: rgba(15, 118, 110, 0.02);
}
.table tbody tr:last-child td {
  border-bottom: none;
}

/* ==================== Badges ==================== */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.7rem;
  font-size: 0.78rem;
  font-weight: 600;
  border-radius: 999px;
  white-space: nowrap;
}
.badge-success { background: rgba(16, 185, 129, 0.12); color: #059669; }
.badge-danger { background: rgba(239, 68, 68, 0.12); color: #dc2626; }
.badge-warning { background: rgba(245, 158, 11, 0.12); color: #d97706; }
.badge-info { background: rgba(59, 130, 246, 0.12); color: #2563eb; }
.badge-primary { background: rgba(15, 118, 110, 0.12); color: var(--primary-dark); }
.badge-neutral { background: var(--bg); color: var(--text-muted); border: 1px solid var(--border); }

/* ==================== Alerts ==================== */
.alert {
  padding: 0.9rem 1.25rem;
  border-radius: var(--radius-sm);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-right: 4px solid transparent;
  font-weight: 500;
}
.alert-success { background: #ecfdf5; color: #065f46; border-right-color: var(--success); }
.alert-danger { background: #fef2f2; color: #991b1b; border-right-color: var(--danger); }
.alert-warning { background: #fffbeb; color: #92400e; border-right-color: var(--warning); }
.alert-info { background: #eff6ff; color: #1e40af; border-right-color: var(--info); }

/* ==================== Filters bar ==================== */
.filters-bar {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
  align-items: end;
}
.filters-bar .form-group { margin-bottom: 0; flex: 1; min-width: 180px; }
.filters-bar .btn { height: 40px; }

/* ==================== Login ==================== */
.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #0f172a 0%, #115e59 60%, #14b8a6 100%);
  padding: 2rem;
  position: relative;
  overflow: hidden;
}
.login-wrap::before {
  content: '';
  position: absolute;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245, 158, 11, 0.15) 0%, transparent 70%);
  top: -200px;
  right: -100px;
}
.login-wrap::after {
  content: '';
  position: absolute;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(20, 184, 166, 0.2) 0%, transparent 70%);
  bottom: -150px;
  left: -100px;
}
.login-card {
  background: #fff;
  border-radius: 24px;
  padding: 2.5rem;
  width: 100%;
  max-width: 420px;
  position: relative;
  z-index: 1;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.25);
}
.login-logo {
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, var(--primary-light), var(--primary-dark));
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.75rem;
  margin: 0 auto 1.25rem;
  box-shadow: 0 8px 24px rgba(15, 118, 110, 0.3);
}
.login-card h1 {
  text-align: center;
  font-size: 1.5rem;
  margin-bottom: 0.25rem;
  color: var(--text);
}
.login-subtitle {
  text-align: center;
  color: var(--text-muted);
  margin-bottom: 2rem;
  font-size: 0.925rem;
}
.demo-credentials {
  margin-top: 1.5rem;
  padding: 0.875rem 1rem;
  background: var(--bg);
  border-radius: var(--radius-sm);
  border: 1px dashed var(--border-dark);
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.8;
}
.demo-credentials strong { color: var(--primary); }

/* ==================== Goal Stages ==================== */
.goal-pipeline {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 1.5rem 0;
  overflow-x: auto;
  padding: 0.5rem 0;
}
.pipeline-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 120px;
  flex: 1;
  position: relative;
}
.pipeline-step::after {
  content: '';
  position: absolute;
  top: 18px;
  right: 60%;
  width: 80%;
  height: 2px;
  background: var(--border);
  z-index: 0;
}
.pipeline-step:last-child::after { display: none; }
.pipeline-step.done::after {
  background: var(--success);
}
.pipeline-circle {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--border-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--text-muted);
  position: relative;
  z-index: 1;
  font-size: 0.85rem;
}
.pipeline-step.active .pipeline-circle {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(15, 118, 110, 0.15);
}
.pipeline-step.done .pipeline-circle {
  background: var(--success);
  border-color: var(--success);
  color: #fff;
}
.pipeline-step.rejected .pipeline-circle {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
}
.pipeline-label {
  margin-top: 0.5rem;
  font-size: 0.78rem;
  color: var(--text-muted);
  text-align: center;
  font-weight: 500;
}
.pipeline-step.active .pipeline-label,
.pipeline-step.done .pipeline-label {
  color: var(--text);
  font-weight: 600;
}

/* ==================== Score Display ==================== */
.score-big {
  text-align: center;
  padding: 1.5rem;
  border-radius: var(--radius);
  background: linear-gradient(135deg, #f0fdfa, #ccfbf1);
  border: 1px solid #5eead4;
}
.score-value {
  font-size: 3rem;
  font-weight: 800;
  color: var(--primary-dark);
  line-height: 1;
}
.score-label {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-top: 0.5rem;
}

/* ==================== Leaderboard ==================== */
.leaderboard-podium {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  gap: 1rem;
  align-items: end;
  margin-bottom: 2rem;
  padding: 2rem 1rem 0;
}
.podium-place {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 1.25rem 1rem;
  text-align: center;
  border: 2px solid var(--border);
  position: relative;
  transition: transform var(--transition);
}
.podium-place:hover { transform: translateY(-4px); }
.podium-rank {
  position: absolute;
  top: -18px;
  right: 50%;
  transform: translateX(50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 800;
  box-shadow: var(--shadow);
}
.podium-1 { border-color: #f59e0b; background: linear-gradient(to bottom, #fef3c7, #fff); }
.podium-1 .podium-rank { background: linear-gradient(135deg, #f59e0b, #d97706); color: #fff; }
.podium-1 { transform: scale(1.08); }
.podium-2 { border-color: #94a3b8; background: linear-gradient(to bottom, #f1f5f9, #fff); }
.podium-2 .podium-rank { background: linear-gradient(135deg, #94a3b8, #64748b); color: #fff; }
.podium-3 { border-color: #d97706; background: linear-gradient(to bottom, #fed7aa, #fff); }
.podium-3 .podium-rank { background: linear-gradient(135deg, #ea580c, #c2410c); color: #fff; }

.podium-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0.75rem auto;
}
.podium-name {
  font-weight: 700;
  margin-bottom: 0.25rem;
}
.podium-score {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--primary);
}

/* ==================== Progress Bar ==================== */
.progress {
  width: 100%;
  height: 8px;
  background: var(--border);
  border-radius: 4px;
  overflow: hidden;
}
.progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--primary-light));
  border-radius: 4px;
  transition: width 600ms ease;
}
.progress-bar.success { background: linear-gradient(90deg, var(--success), #34d399); }
.progress-bar.warning { background: linear-gradient(90deg, var(--warning), #fbbf24); }
.progress-bar.danger { background: linear-gradient(90deg, var(--danger), #f87171); }

/* ==================== Timeline ==================== */
.timeline {
  position: relative;
  padding-right: 30px;
}
.timeline::before {
  content: '';
  position: absolute;
  right: 10px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--border);
}
.timeline-item {
  position: relative;
  padding-bottom: 1.25rem;
}
.timeline-item::before {
  content: '';
  position: absolute;
  right: -24px;
  top: 6px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--primary);
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px var(--primary);
}
.timeline-date {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 0.15rem;
}
.timeline-content {
  font-size: 0.9rem;
}

/* ==================== Modal ==================== */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.6);
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.modal-backdrop.open { display: flex; }
.modal {
  background: #fff;
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 1.5rem;
  box-shadow: var(--shadow-lg);
}
.modal-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.modal-close {
  background: none;
  border: none;
  font-size: 1.25rem;
  cursor: pointer;
  color: var(--text-muted);
  padding: 0.25rem 0.5rem;
}

/* ==================== Page Header ==================== */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  gap: 1rem;
}
.page-header h2 {
  font-size: 1.5rem;
  font-weight: 700;
}
.breadcrumb {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-top: 0.25rem;
}
.breadcrumb a { color: var(--text-muted); }

/* ==================== Empty State ==================== */
.empty-state {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--text-muted);
}
.empty-state .icon {
  font-size: 3rem;
  opacity: 0.3;
  margin-bottom: 1rem;
}
.empty-state h3 {
  color: var(--text);
  margin-bottom: 0.5rem;
}

/* ==================== Two Column Layout ==================== */
.two-col {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 1.5rem;
}
@media (max-width: 960px) {
  .two-col { grid-template-columns: 1fr; }
}

/* ==================== Responsive ==================== */
.sidebar-toggle {
  display: block;   /* الزر ظاهر دائماً — على الديسكتوب يطوي القائمة، وعلى الموبايل يفتحها */
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--text);
}

/* 🪟 طيّ القائمة الجانبية على الشاشات الكبيرة (يتذكّر الاختيار عبر localStorage) */
@media (min-width: 901px) {
  .sidebar { transition: transform 0.25s ease; }
  .main { transition: margin-right 0.25s ease; }
  body.sidebar-collapsed .sidebar {
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .25s ease, visibility 0s linear .25s;
  }
  body.sidebar-collapsed .main { margin-right: 0; }
}

@media (max-width: 900px) {
  html { font-size: 14px; }
  /* 📱 الشاشة العمودية: الشريط العلوي كان flex بلا التفاف، فمع كثرة عناصره
     (مركز التحكم + الإشعارات + مبدّل الدور + بطاقة المستخدم) يفيض المحتوى
     ويخرج زر القائمة عن حدود الشاشة — فلا يظهر إلا بتدوير الجهاز أفقياً.
     نسمح بالالتفاف، ونمنع العنوان من ابتلاع المساحة، ونثبّت الزر بحيث
     لا ينكمش ولا يُدفع أبداً. */
  .topbar { flex-wrap: wrap; gap: .5rem; padding: .6rem .75rem; }
  .topbar > * { min-width: 0; }
  .sidebar-toggle {
    flex: 0 0 auto;          /* لا ينكمش ولا يُزاح */
    order: -1;               /* أول عنصر دائماً */
    display: block !important;
    font-size: 1.6rem; padding: .25rem .4rem;
  }
  .page-title {
    min-width: 0; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; font-size: 1.05rem;
  }
  .topbar-actions { flex-wrap: wrap; gap: .5rem; margin-inline-start: auto; }

  /* الإخفاء بـtranslateX وحده يعتمد على عرض الصفحة: لو فاضت الصفحة أفقياً
     (أعرض من الشاشة — جدول عريض مثلاً) فإن إزاحة القائمة بعرضها لا تُخرجها
     عن منطقة التمرير، فتستقر داخل الصفحة وتظهر عند التمرير يميناً ولا تختفي.
     visibility مناعتها من العرض مطلقة، فنضيفها ونؤخّرها حتى تنتهي الحركة. */
  /* القائمة المزاحة خارج الشاشة تمدّ منطقة التمرير الأفقي للصفحة (664px بدل
     375px)، فيستطيع المستخدم التمرير يميناً إلى فراغ. clip يقصّ الفائض دون
     إنشاء حاوية تمرير — فلا يكسر position:sticky داخل الصفحة كما يفعل hidden. */
  html, body { overflow-x: clip; }
  /* min-width:0 على .main (السبب الجذري لتمدّد الصفحة أفقياً) صار في القاعدة
     الأساسية أعلاه لأن العطل نفسه يقع على الديسكتوب مع الجداول العريضة. */
  .sidebar {
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .25s ease, visibility 0s linear .25s;
  }
  .sidebar.open {
    transform: translateX(0);
    visibility: visible;
    transition: transform .25s ease, visibility 0s;
  }
  .main { margin-right: 0; }
  .sidebar-toggle { display: block; }
  .content { padding: 1rem; }
  .topbar { padding: 0.75rem 1rem; }
  .form-row { grid-template-columns: 1fr; }
  .leaderboard-podium { grid-template-columns: 1fr; }
  .podium-1 { transform: none; }
}

/* ==================== الجداول العريضة ====================
   `.table-responsive` كانت مستعملة في 18 قالباً لكنها **غير معرَّفة** إطلاقاً،
   فالجدول العريض يفيض بعرض الصفحة كلها بدل أن يمرّر داخل نفسه. وأثر ذلك يتجاوز
   الشكل: الصفحة تصير أعرض من الشاشة، فإخفاء القائمة الجانبية بالإزاحة لا
   يُخرجها عن منطقة التمرير فتبقى ظاهرة. التمرير يكون داخل الحاوية لا الصفحة.
   ملاحظة: لا نضع display:block على <table> — يهدم تخطيط الجدول ويكسر النص. */
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

/* ==================== Utilities ==================== */
.text-muted { color: var(--text-muted); }
.text-primary { color: var(--primary); }
.text-success { color: var(--success); }
.text-danger { color: var(--danger); }
.text-warning { color: var(--warning); }
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-sm { font-size: 0.85rem; }
.text-xs { font-size: 0.75rem; }
.fw-bold { font-weight: 700; }
.fw-semibold { font-weight: 600; }
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.d-flex { display: flex; }
.gap-1 { gap: 0.5rem; }
.gap-2 { gap: 1rem; }
.align-center { align-items: center; }
.justify-between { justify-content: space-between; }
.flex-wrap { flex-wrap: wrap; }
.w-full { width: 100%; }

/* ==================== Animations ==================== */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.content > * { animation: fadeIn 400ms ease; }

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
.pulse { animation: pulse 2s infinite; }

/* ==================== Info Grid ==================== */
.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}
.info-item {
  background: var(--bg);
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}
.info-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: 0.25rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.info-value {
  font-weight: 600;
  color: var(--text);
}

/* ============ Goal Status Badges (Global) ============ */
.badge-draft { background: #e2e8f0; color: #475569; padding: 0.3rem 0.7rem; border-radius: 12px; font-size: 0.78rem; font-weight: 600; }
.badge-pending_approval { background: #fef3c7; color: #92400e; padding: 0.3rem 0.7rem; border-radius: 12px; font-size: 0.78rem; font-weight: 600; }
.badge-approved { background: #dbeafe; color: #1e40af; padding: 0.3rem 0.7rem; border-radius: 12px; font-size: 0.78rem; font-weight: 600; }
.badge-rejected { background: #fee2e2; color: #991b1b; padding: 0.3rem 0.7rem; border-radius: 12px; font-size: 0.78rem; font-weight: 600; }
.badge-completed_by_employee { background: #cffafe; color: #155e75; padding: 0.3rem 0.7rem; border-radius: 12px; font-size: 0.78rem; font-weight: 600; }
.badge-evaluated { background: #d1fae5; color: #065f46; padding: 0.3rem 0.7rem; border-radius: 12px; font-size: 0.78rem; font-weight: 600; }

/* Utility classes used across templates */
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; }
.d-block { display: block; }
.d-inline { display: inline; }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mb-0 { margin-bottom: 0; }
.text-center { text-align: center; }
.text-xs { font-size: 0.75rem; }
.text-success { color: #10b981; }
.text-warning { color: #f59e0b; }
.text-danger { color: #ef4444; }
.text-info { color: #0ea5e9; }
.text-muted { color: #94a3b8; }
.required { color: #ef4444; }
.btn-block { display: block; width: 100%; text-align: center; }
.btn-warning { background: #f59e0b; color: #fff; }
.btn-warning:hover { background: #d97706; }
.btn-success { background: #10b981; color: #fff; }
.btn-success:hover { background: #059669; }
.btn-danger { background: #ef4444; color: #fff; }
.btn-danger:hover { background: #b91c1c; }
.btn-sm { padding: 0.3rem 0.6rem; font-size: 0.8rem; }
.alert-info { background: #e0f2fe; color: #075985; padding: 0.75rem 1rem; border-radius: 8px; border-right: 4px solid #0ea5e9; margin-bottom: 1rem; }
.alert-danger { background: #fee2e2; color: #991b1b; padding: 0.75rem 1rem; border-radius: 8px; border-right: 4px solid #ef4444; margin-bottom: 1rem; }
.alert-success { background: #d1fae5; color: #065f46; padding: 0.75rem 1rem; border-radius: 8px; border-right: 4px solid #10b981; margin-bottom: 1rem; }

/* بنر التوجيه لبوابة الخدمات الموحّدة */
.portal-banner {
    display: flex;
    gap: 1rem;
    align-items: center;
    background: linear-gradient(135deg, #0ea5e9 0%, #06b6d4 50%, #14b8a6 100%);
    color: #fff;
    padding: 0.9rem 1.25rem;
    border-radius: 12px;
    margin-bottom: 1.25rem;
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.25);
    position: relative;
    overflow: hidden;
}
.portal-banner::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -20%;
    width: 40%;
    height: 200%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
    transform: rotate(25deg);
    animation: banner-shine 4s ease-in-out infinite;
}
@keyframes banner-shine {
    0% { left: -20%; }
    50%, 100% { left: 120%; }
}
.portal-banner > i {
    font-size: 1.8rem;
    flex-shrink: 0;
    animation: sparkle 2s ease-in-out infinite;
}
@keyframes sparkle {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50% { transform: scale(1.15) rotate(10deg); }
}
.portal-banner a {
    color: #fff;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}
.portal-banner a:hover {
    text-decoration-thickness: 3px;
}
.portal-banner strong {
    font-weight: 700;
}

/* ==================== تبديل الدور (لمتعددي الأدوار) ==================== */
.role-switch { position: relative; }

.role-switch-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.85rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
}
.role-switch-btn:hover { border-color: var(--primary); color: var(--primary); }
.role-switch-btn > .fa-user-shield { color: var(--primary); font-size: 0.85rem; }
.role-switch-label { max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
.role-switch-caret { font-size: 0.62rem; color: var(--text-light); transition: transform var(--transition); }
.role-switch.open .role-switch-caret { transform: rotate(180deg); }
.role-switch.open .role-switch-btn { border-color: var(--primary); color: var(--primary); }

.role-switch-menu {
  position: absolute;
  top: calc(100% + 8px);
  inset-inline-start: 0;
  min-width: 220px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 0.35rem;
  z-index: 120;
}
.role-switch-head {
  font-size: 0.68rem;
  color: var(--text-light);
  font-weight: 700;
  padding: 0.4rem 0.6rem 0.5rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0.25rem;
}
.role-switch-menu form { margin: 0; }
.role-switch-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.6rem;
  background: none;
  border: 0;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  text-align: start;
  transition: background var(--transition);
}
.role-switch-item:hover:not(:disabled) { background: var(--bg); }
.role-switch-item > span:nth-child(2) { flex: 1; }
.role-switch-item .fa-check { color: var(--primary); font-size: 0.75rem; }
.role-switch-item:disabled { cursor: default; color: var(--primary); }
.role-switch-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--border-dark);
  flex-shrink: 0;
}
.role-switch-item.is-active .role-switch-dot { background: var(--primary); }

@media (max-width: 768px) {
  .role-switch-label { display: none; }
  .role-switch-menu { inset-inline-start: auto; inset-inline-end: 0; }
}

/* ========== 🔎 بحث موحّد داخل قوائم اختيار الموظف ==========
   يستعمله كل قالب فيه قائمة بطاقات أو جدول موظفين (emp-search.js). */
.emp-search-wrap { position: relative; margin-bottom: .6rem; }
.emp-search-wrap > i.emp-search-icon {
  position: absolute; top: 50%; transform: translateY(-50%);
  inset-inline-start: .8rem; color: #94a3b8; pointer-events: none;
}
.emp-search {
  width: 100%; padding: .6rem .9rem; padding-inline-start: 2.2rem;
  border: 2px solid #e2e8f0; border-radius: 10px; font-size: .92rem;
  font-family: inherit; background: #fff; color: inherit;
}
.emp-search:focus {
  outline: none; border-color: var(--primary, #8b5cf6);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, .15);
}
.emp-search::-webkit-search-cancel-button { cursor: pointer; }
.emp-count { display: block; margin-top: .35rem; color: #64748b; font-size: .78rem; }
.emp-empty {
  display: none; padding: .9rem; text-align: center; color: #b45309;
  background: #fffbeb; border: 1px dashed #fbbf24; border-radius: 10px;
}
.emp-empty.show { display: block; }
/* مربع بحث فوق جدول: يبقى ظاهراً عند تمرير الجدول الطويل */
.emp-search-wrap.sticky { position: sticky; top: 0; z-index: 3; background: #fff; padding-top: .25rem; }