:root{
  --primary:#00843D;
--primary-hover: #076B32;
  --accent:#FFC400;
--danger: #D21034;
  --dark:#151E17;
  --muted:#69766B;
  --border:#E5EAE4;
  --surface:#ffffff;
  --bg:#F2F4F1;
  --shadow:0 14px 34px rgba(0,0,0,.10);
  --shadow2:0 18px 44px rgba(17,24,39,.14);
}

.topbar{
  position: sticky;
  top: 20px;
  z-index: 900;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: 0 8px 24px rgba(20,30,25,0.08);
  padding: 16px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 20px;
  font-family: "Cairo", "Tajawal", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.top-left{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width: 220px;
}
.top-eyebrow{
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.page-title{
  font-weight: 800;
  color: var(--dark);
  font-size: 1.3rem;
}
.page-sub{
  color: var(--muted);
  font-size: .82rem;
}

.top-right{
  display:flex;
  align-items:center;
  gap: 10px;
  flex: 1;
  justify-content: flex-end;
}

/* =========================
   SEARCH (clickable icon)
   AR: icon LEFT
   EN: icon RIGHT
========================= */
.top-search{
  position: relative;
  flex: 1;
  max-width: 760px;
  min-width: 520px;
}

.top-search input{
  width:100%;
  height: 42px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #fff;
  outline: none;
  font-size: .9rem;
}

.top-search input:focus{
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(0, 132, 61,.12);
}

/* circular clickable button */
.top-search-btn{
  position:absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #F2F4F1;
  cursor:pointer;
  display:grid;
  place-items:center;
  font-size: 1rem;
  color: var(--muted);
  transition: .15s ease;
}
.top-search-btn:hover{
  background: var(--primary);
  border-color: var(--primary);
  color:#fff;
  box-shadow: 0 8px 18px rgba(0, 132, 61,.18);
}

/* EN (LTR): icon RIGHT, padding-right */
html[dir="ltr"] .top-search input{ padding: 0 54px 0 14px; }
html[dir="ltr"] .top-search-btn{ right: 8px; left:auto; }

/* AR (RTL): icon LEFT, padding-left */
html[dir="rtl"] .top-search input{ padding: 0 14px 0 54px; }
html[dir="rtl"] .top-search-btn{ left: 8px; right:auto; }

/* =========================
   Single language button
========================= */
.lang-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 38px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background:#fff;
  font-weight: 950;
  color: var(--dark);
  text-decoration:none;
  font-size: .86rem;
  white-space: nowrap;
  transition: .15s ease;
}
.lang-btn:hover{
  border-color: var(--primary);
  box-shadow: 0 8px 18px rgba(0, 132, 61,.12);
}

/* =========================
   Icon button + badge
========================= */
.top-icon-btn{
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background:#fff;
  cursor:pointer;
  display:grid;
  place-items:center;
  font-size: 1.05rem;
  transition:.15s ease;
  overflow: visible;
}
.top-icon-btn:hover{
  border-color: var(--primary);
  box-shadow: 0 8px 18px rgba(0, 132, 61,.12);
}

.notif-badge{
  position:absolute;
  top:-7px;
  right:-7px;
  background: #D21034;
  color:#fff;
  border-radius: 999px;
  font-size:.72rem;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  font-weight: 950;
  border: 2px solid #fff;
  display:flex;
  align-items:center;
  justify-content:center;
  line-height: 1;
  box-shadow: 0 8px 18px rgba(0,0,0,.14);
}
html[dir="rtl"] .notif-badge{ right:auto; left:-7px; }

/* =========================
   User menu
========================= */
.top-user{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 0;
  border-radius: 12px;
  border: none;
  background: transparent;
  cursor:pointer;
  user-select:none;
  transition:.15s ease;
}
.top-user:hover{
  opacity: .85;
}

.user-meta{ display:flex; flex-direction:column; line-height: 1.1; }
.user-name{
  font-weight: 950;
  font-size:.9rem;
  color: var(--dark);
  display:flex;
  align-items:center;
  gap:6px;
}
.user-role{ font-size:.76rem; color: var(--muted); }

.dd-arrow{
  font-size:.75rem;
  color: var(--muted);
  transform: translateY(1px);
}
.top-user.is-open .dd-arrow{ transform: translateY(1px) rotate(180deg); }

.user-avatar{
  width: 38px;
  height: 38px;
  border-radius: 12px;
  overflow:hidden;
  background: var(--primary);
  color: #fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 800;
  font-size: 13px;
  flex: none;
}
.user-avatar img{ width:100%; height:100%; object-fit: cover; }

/* =========================
   Dropdowns (MUST be fixed and in BODY)
========================= */
.dd{
  position: fixed;
  width: 360px;
  max-width: calc(100vw - 24px);
  background: var(--surface, #fff);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow2);
  padding: 10px;
  z-index: 100000;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-6px) scale(0.98);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}

.dd.dd-open{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.dd-head{ padding: 6px 8px 10px; }
.dd-title{ font-weight: 950; font-size:.95rem; color: var(--dark); }
.dd-sub{ color: var(--muted); font-size: .78rem; margin-top: 2px; }

.dd-sep{ height:1px; background:#eef2f7; margin: 8px 2px; }

.dd-scroll{
  max-height: 320px;
  overflow:auto;
  padding: 2px 4px;
}

.dd a{
  display:flex;
  gap:10px;
  align-items:center;
  width:100%;
  padding: 10px 10px;
  border-radius: 14px;
  color: var(--dark);
  text-decoration:none;
  background: transparent;
  cursor:pointer;
  font-size: .92rem;
  font-weight: 900;
  transition:.12s ease;
}
.dd a:hover{ background: var(--bg); }

.dd a.danger{ color:#b91c1c; }
.dd a.danger:hover{ background:#fef2f2; }

.notif-item{
  display:flex;
  gap:10px;
  padding:12px;
  border-radius: 16px;
  border: 1px solid #eef2f7;
  margin: 8px 2px;
  background:#fff;
  cursor:pointer;
  transition:.12s ease;
}
.notif-item:hover{
  background: var(--bg);
  border-color: rgba(0, 132, 61,.22);
}
.notif-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  margin-top: 6px;
  background: #16a34a;
}
.notif-item.unread .notif-dot{ background:#D21034; }
.notif-body{ flex:1; }
.notif-text{ font-weight: 950; color: var(--dark); font-size: .86rem; line-height: 1.35; }
.notif-time{ font-size: .76rem; color: var(--muted); margin-top: 3px; }

.dd-actions{
  display:flex;
  gap:10px;
  padding: 10px 4px 4px;
}
.dd-actions button{
  flex:1;
  height: 38px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background:#fff;
  cursor:pointer;
  font-weight: 950;
  font-family: inherit;
  transition:.12s ease;
}
.dd-actions button:hover{
  border-color: var(--primary);
  box-shadow: 0 8px 18px rgba(0, 132, 61,.10);
}
.dd-actions button.primary{
  background: var(--primary);
  border-color: var(--primary);
  color:#fff;
}

@media (max-width: 1100px){
  .top-search{ max-width: 560px; min-width: 280px; }
}
@media (max-width: 900px){
  .top-left{ display:none; }
  .top-search{ max-width: 100%; min-width: 220px; }
  .dd{ width: 340px; }
}

/* =========================================
   DARK MODE (Added without changing originals)
   Activate by: <html class="dark">
========================================= */
html.dark{
--primary: #2FBE72;
--primary-hover: #26A863;
--accent: #FFD23F;
--danger: #F1495F;
  --dark:#F1F4F1;
  --muted:#8FA091;
  --border:rgba(255,255,255,.10);
  --surface:#161A15;
  --bg:#0D100D;
  --shadow:0 14px 34px rgba(0,0,0,.35);
  --shadow2:0 18px 44px rgba(0,0,0,.45);
}

/* Topbar card in dark */
html.dark .topbar{
  background: var(--surface);
  border-color: var(--border);
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
}

/* Inputs & buttons surfaces */
html.dark .top-search input{
  background: rgba(15,23,42,.88);
  color: var(--dark);
  border-color: var(--border);
}
html.dark .top-search input::placeholder{ color: rgba(156,163,175,.9); }

html.dark .top-search-btn{
  background: rgba(15,23,42,.92);
  border-color: var(--border);
  color: var(--muted);
}

html.dark .lang-btn,
html.dark .top-icon-btn,
html.dark .top-user{
  background: rgba(15,23,42,.92);
  border-color: var(--border);
  color: var(--dark);
}


/* Dropdowns */
html.dark .dd{
  background: rgba(15,23,42,.96);
  border-color: var(--border);
}
html.dark .dd-sep{ background: rgba(255,255,255,.08); }
html.dark .dd a:hover{ background: rgba(255,255,255,.06); }

html.dark .notif-item{
  background: rgba(15,23,42,.92);
  border-color: rgba(255,255,255,.08);
}
html.dark .notif-item:hover{
  background: rgba(255,255,255,.06);
  border-color: rgba(0, 132, 61,.28);
}

/* Badge border in dark */
html.dark .notif-badge{ border-color: rgba(15,23,42,.96); }