:root {
  --primary-dark: #17512f;
  --primary: #1e7245;
  --primary-light: #6fb896;
  --mint: #dff3e8;
  --mint-text: #1a6b43;
  --gold: #e3b74f;
  --danger: #c0392b;
  --danger-bg: #fbe9e7;
  --text-dark: #1f2a24;
  --bg: #f5f7f6;
}

body {
  font-family: 'Tajawal', sans-serif;
  background: var(--bg);
  color: var(--text-dark);
}

/* ===== الهيدر العلوي ===== */
.top-nav {
  background: #fff;
  border-bottom: 1px solid #e7ece9;
  box-shadow: 0 1px 6px rgba(0,0,0,.03);
}
.school-logo {
  height: 52px;
  width: auto;
}
.school-name {
  font-weight: 900;
  font-size: 1.05rem;
  color: var(--primary-dark);
}
.system-name {
  font-size: .8rem;
  color: #6b7d74;
}
.nav-link-item {
  color: var(--text-dark);
  text-decoration: none;
  font-weight: 500;
  padding: 6px 12px;
}
.nav-link-item:hover { color: var(--primary); }

/* ===== أزرار الكبسولة (Pill) ===== */
.btn-pill {
  display: inline-block;
  padding: 8px 20px;
  border-radius: 50px;
  font-weight: 700;
  font-size: .9rem;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: .15s;
}
.btn-pill-solid {
  background: var(--primary-dark);
  color: #fff;
}
.btn-pill-solid:hover { background: var(--primary); color: #fff; }
.btn-pill-outline {
  background: #fff;
  color: var(--primary-dark);
  border: 1.5px solid #d7e3dc;
}
.btn-pill-outline:hover { background: #f0f6f2; color: var(--primary-dark); }

/* ===== البانر الرئيسي (Hero) ===== */
.hero-banner {
  background: linear-gradient(90deg, var(--primary-light) 0%, var(--primary-dark) 100%);
  border-radius: 16px;
  padding: 28px 30px;
  color: #fff;
  margin-bottom: 24px;
}
.hero-banner h2 {
  font-weight: 900;
  margin-bottom: 6px;
}
.hero-banner p {
  opacity: .9;
  margin-bottom: 14px;
}
.hero-badge {
  display: inline-block;
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 50px;
  padding: 6px 16px;
  font-size: .85rem;
  margin-inline-start: 8px;
  margin-bottom: 6px;
}

/* ===== البطاقات ===== */
.card {
  border: none;
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(23,81,47,.06);
}
.filter-card {
  background: #fff;
  border-radius: 16px;
  padding: 20px;
}

/* ===== شارات صغيرة نعناعية ===== */
.badge-mint {
  background: var(--mint);
  color: var(--mint-text);
  font-weight: 700;
  border-radius: 50px;
  padding: 4px 12px;
  font-size: .78rem;
}
.badge-positive { background: var(--mint); color: var(--mint-text); }
.badge-negative { background: var(--danger-bg); color: var(--danger); }

/* ===== تسجيل الدخول ===== */
.login-wrapper {
  min-height: 75vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.login-card {
  width: 100%;
  max-width: 400px;
}

/* ===== قائمة الطالبات في صفحة المعلمات ===== */
.student-check {
  border: 1px solid #e2e5ec;
  border-radius: 12px;
  padding: 10px 14px;
  margin-bottom: 8px;
  transition: .15s;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.student-check:hover { background: #f3f9f5; }
.student-check.disabled-cap {
  opacity: .55;
  background: #f4f4f4;
}
.cap-note {
  font-size: .74rem;
  color: var(--danger);
  font-weight: 700;
}
.positive-total-tag {
  font-size: .72rem;
  color: var(--mint-text);
  background: var(--mint);
  border-radius: 50px;
  padding: 2px 10px;
  margin-inline-start: 6px;
}

/* ===== الجداول ===== */
.table thead th {
  background: var(--primary-dark);
  color: #fff;
  border: none;
}
.table td { vertical-align: middle; }
.score-cell { font-weight: 800; font-size: 1rem; }

/* ===== أوتوكومبليت اسم الراصدة ===== */
.autocomplete-wrapper { position: relative; }
.autocomplete-list {
  position: absolute;
  z-index: 20;
  background: #fff;
  border: 1px solid #e2e5ec;
  border-radius: 10px;
  width: 100%;
  max-height: 220px;
  overflow-y: auto;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
  display: none;
}
.autocomplete-item {
  padding: 8px 14px;
  cursor: pointer;
}
.autocomplete-item:hover, .autocomplete-item.active {
  background: var(--mint);
}

/* ===== الفوتر ===== */
.site-footer {
  color: #6b7d74;
}
.heart { color: #d9455f; }

/* ===== شاهد (صورة) ===== */
.witness-thumb {
  width: 46px;
  height: 46px;
  object-fit: cover;
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid #e2e5ec;
}

/* ===== ملخصات الإيجابي/السلبي في تفاصيل الطالبة ===== */
.summary-box {
  border-radius: 14px;
  padding: 16px 22px;
  text-align: center;
  min-width: 140px;
}
.summary-positive { background: var(--mint); color: var(--mint-text); }
.summary-negative { background: var(--danger-bg); color: var(--danger); }
.summary-box .num { font-size: 1.6rem; font-weight: 900; }