{"id":1438,"date":"2021-12-30T09:03:17","date_gmt":"2021-12-30T09:03:17","guid":{"rendered":"https:\/\/hadarat-hail.org.sa\/?page_id=1438"},"modified":"2025-10-20T07:04:53","modified_gmt":"2025-10-20T07:04:53","slug":"%d8%a3%d8%b3%d9%85%d8%a7%d8%a1-%d8%a7%d9%84%d8%ac%d9%85%d8%b9%d9%8a%d8%a9-%d8%a7%d9%84%d8%b9%d9%85%d9%88%d9%85%d9%8a%d8%a9","status":"publish","type":"page","link":"https:\/\/hadarat-hail.org.sa\/?page_id=1438","title":{"rendered":"\u0623\u0633\u0645\u0627\u0621 \u0627\u0644\u062c\u0645\u0639\u064a\u0629 \u0627\u0644\u0639\u0645\u0648\u0645\u064a\u0629"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1438\" class=\"elementor elementor-1438\" data-elementor-settings=\"{&quot;element_pack_global_tooltip_width&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;element_pack_global_tooltip_width_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;element_pack_global_tooltip_width_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;element_pack_global_tooltip_padding&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;top&quot;:&quot;&quot;,&quot;right&quot;:&quot;&quot;,&quot;bottom&quot;:&quot;&quot;,&quot;left&quot;:&quot;&quot;,&quot;isLinked&quot;:true},&quot;element_pack_global_tooltip_padding_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;top&quot;:&quot;&quot;,&quot;right&quot;:&quot;&quot;,&quot;bottom&quot;:&quot;&quot;,&quot;left&quot;:&quot;&quot;,&quot;isLinked&quot;:true},&quot;element_pack_global_tooltip_padding_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;top&quot;:&quot;&quot;,&quot;right&quot;:&quot;&quot;,&quot;bottom&quot;:&quot;&quot;,&quot;left&quot;:&quot;&quot;,&quot;isLinked&quot;:true},&quot;element_pack_global_tooltip_border_radius&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;top&quot;:&quot;&quot;,&quot;right&quot;:&quot;&quot;,&quot;bottom&quot;:&quot;&quot;,&quot;left&quot;:&quot;&quot;,&quot;isLinked&quot;:true},&quot;element_pack_global_tooltip_border_radius_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;top&quot;:&quot;&quot;,&quot;right&quot;:&quot;&quot;,&quot;bottom&quot;:&quot;&quot;,&quot;left&quot;:&quot;&quot;,&quot;isLinked&quot;:true},&quot;element_pack_global_tooltip_border_radius_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;top&quot;:&quot;&quot;,&quot;right&quot;:&quot;&quot;,&quot;bottom&quot;:&quot;&quot;,&quot;left&quot;:&quot;&quot;,&quot;isLinked&quot;:true}}\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c2cc30c e-flex e-con-boxed e-con e-parent\" data-id=\"c2cc30c\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c7ce1c5 elementor-widget elementor-widget-html\" data-id=\"c7ce1c5\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"ar\" dir=\"rtl\">\r\n<head>\r\n  <meta charset=\"utf-8\" \/>\r\n  <meta name=\"viewport\" content=\"width=device-width,initial-scale=1\" \/>\r\n  <link href=\"https:\/\/fonts.googleapis.com\/css2?family=El+Messiri:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n  <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n  <style>\r\n    :root {\r\n      --accent: #fb8519;\r\n      --accent-dark: #d66d00;\r\n      --accent-light: #ffb366;\r\n      --muted: #666;\r\n      --light-bg: #f9f9f9;\r\n      --card-bg: #ffffff;\r\n      --text: #333333;\r\n      --border: rgba(0,0,0,0.08);\r\n      --shadow: rgba(0,0,0,0.05);\r\n      --shadow-hover: rgba(0,0,0,0.12);\r\n      --modal-overlay: rgba(0, 0, 0, 0.7);\r\n    }\r\n    \r\n    * { box-sizing: border-box }\r\n    html, body { height: 100%; margin: 0; padding: 0; background: transparent }\r\n    body { font-family: 'El Messiri', sans-serif; color: var(--text); font-size: 15px; background-color: var(--light-bg) }\r\n\r\n    \/* wrapper fits host element exactly *\/\r\n    .members-widget { width: 100%; padding: 0; margin: 0 }\r\n\r\n    \/* Header Section *\/\r\n    .mw-header {\r\n      background: var(--card-bg);\r\n      color: var(--text);\r\n      padding: 20px;\r\n      border-radius: 16px;\r\n      margin-bottom: 20px;\r\n      box-shadow: 0 4px 12px var(--shadow);\r\n      position: relative;\r\n      overflow: hidden;\r\n    }\r\n    \r\n    .header-content {\r\n      display: flex;\r\n      justify-content: space-between;\r\n      align-items: center;\r\n      flex-wrap: wrap;\r\n      gap: 15px;\r\n      margin-bottom: 20px;\r\n    }\r\n    \r\n    .header-title {\r\n      font-size: 22px;\r\n      font-weight: 700;\r\n      margin: 0;\r\n      color: var(--accent);\r\n    }\r\n    \r\n    .header-date {\r\n      font-size: 14px;\r\n      color: var(--muted);\r\n      display: flex;\r\n      align-items: center;\r\n      gap: 8px;\r\n    }\r\n    \r\n    .header-date i {\r\n      color: var(--accent);\r\n    }\r\n    \r\n    .stats-container {\r\n      display: flex;\r\n      flex-direction: column;\r\n      gap: 15px;\r\n    }\r\n    \r\n    .main-stats {\r\n      display: grid;\r\n      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\r\n      gap: 15px;\r\n    }\r\n    \r\n    .share-stats {\r\n      display: grid;\r\n      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\r\n      gap: 12px;\r\n    }\r\n    \r\n    .stat-card {\r\n      background: var(--card-bg);\r\n      border-radius: 12px;\r\n      padding: 18px;\r\n      text-align: center;\r\n      transition: all 0.3s ease;\r\n      box-shadow: 0 4px 8px var(--shadow);\r\n      border: 1px solid var(--border);\r\n      position: relative;\r\n      overflow: hidden;\r\n      cursor: pointer;\r\n    }\r\n    \r\n    .stat-card::before {\r\n      content: '';\r\n      position: absolute;\r\n      top: 0;\r\n      right: 0;\r\n      width: 100%;\r\n      height: 4px;\r\n      background: linear-gradient(135deg, var(--accent), var(--accent-dark));\r\n    }\r\n    \r\n    .stat-card.highlight {\r\n      background: linear-gradient(135deg, rgba(251, 133, 25, 0.05), rgba(214, 109, 0, 0.05));\r\n      border-color: var(--accent-light);\r\n    }\r\n    \r\n    .stat-card:hover {\r\n      transform: translateY(-5px);\r\n      box-shadow: 0 8px 16px var(--shadow-hover);\r\n    }\r\n    \r\n    .stat-card.active {\r\n      background: linear-gradient(135deg, rgba(251, 133, 25, 0.1), rgba(214, 109, 0, 0.1));\r\n      border-color: var(--accent);\r\n    }\r\n    \r\n    .stat-value {\r\n      font-size: 32px;\r\n      font-weight: 700;\r\n      margin-bottom: 5px;\r\n      display: block;\r\n      color: var(--accent);\r\n      font-feature-settings: \"tnum\";\r\n    }\r\n    \r\n    .stat-card.highlight .stat-value {\r\n      color: var(--accent-dark);\r\n    }\r\n    \r\n    .stat-label {\r\n      font-size: 14px;\r\n      color: var(--muted);\r\n      font-weight: 500;\r\n    }\r\n\r\n    \/* controls row *\/\r\n    .mw-controls {\r\n      display: flex;\r\n      gap: 16px;\r\n      align-items: center;\r\n      justify-content: space-between;\r\n      margin-bottom: 20px;\r\n      padding: 12px 16px;\r\n      background: var(--card-bg);\r\n      border-radius: 16px;\r\n      box-shadow: 0 4px 12px var(--shadow);\r\n    }\r\n    \r\n    .mw-controls .left { display: flex; gap: 12px; align-items: center; flex: 1 }\r\n    \r\n    .search-wrap { min-width: 200px; flex: 1; position: relative }\r\n    .search-wrap input {\r\n      width: 100%;\r\n      padding: 12px 16px 12px 44px;\r\n      border-radius: 12px;\r\n      border: 1px solid var(--border);\r\n      outline: none;\r\n      background-color: var(--light-bg);\r\n      transition: all 0.3s ease;\r\n      font-family: 'El Messiri', sans-serif;\r\n    }\r\n    .search-wrap input:focus {\r\n      border-color: var(--accent);\r\n      box-shadow: 0 0 0 3px rgba(251, 133, 25, 0.2);\r\n    }\r\n    .search-wrap::before {\r\n      content: '\\f002';\r\n      font-family: 'Font Awesome 6 Free';\r\n      font-weight: 900;\r\n      position: absolute;\r\n      left: 16px;\r\n      top: 50%;\r\n      transform: translateY(-50%);\r\n      color: var(--muted);\r\n      z-index: 1;\r\n    }\r\n    \r\n    .view-toggle { display: flex; gap: 8px }\r\n    .btn-ico {\r\n      display: inline-grid;\r\n      place-items: center;\r\n      width: 44px;\r\n      height: 44px;\r\n      border-radius: 10px;\r\n      border: 1px solid var(--border);\r\n      background: var(--card-bg);\r\n      cursor: pointer;\r\n      transition: all 0.3s ease;\r\n      font-size: 18px;\r\n    }\r\n    .btn-ico:hover {\r\n      transform: translateY(-2px);\r\n      box-shadow: 0 4px 8px var(--shadow);\r\n    }\r\n    .btn-ico.active {\r\n      background: linear-gradient(135deg, var(--accent), var(--accent-dark));\r\n      color: #fff;\r\n      box-shadow: 0 8px 22px rgba(215, 100, 15, 0.18);\r\n      border: none;\r\n    }\r\n\r\n    \/* table *\/\r\n    .table-wrap {\r\n      width: 100%;\r\n      overflow: auto;\r\n      background: var(--card-bg);\r\n      border-radius: 16px;\r\n      box-shadow: 0 4px 12px var(--shadow);\r\n      padding: 8px;\r\n    }\r\n    \r\n    table {\r\n      width: 100%;\r\n      border-collapse: separate;\r\n      border-spacing: 0 8px;\r\n    }\r\n    \r\n    thead th {\r\n      font-weight: 700;\r\n      text-align: right;\r\n      padding: 16px 18px;\r\n      color: var(--accent);\r\n      cursor: pointer;\r\n      position: relative;\r\n      border-bottom: 1px solid var(--border);\r\n      transition: all 0.3s ease;\r\n    }\r\n    \r\n    thead th:hover {\r\n      background-color: rgba(251, 133, 25, 0.05);\r\n    }\r\n    \r\n    thead th .arrow {\r\n      display: inline-block;\r\n      margin-left: 8px;\r\n      font-size: 12px;\r\n      opacity: 0.7;\r\n      transition: all 0.3s ease;\r\n    }\r\n    \r\n    tbody td {\r\n      background: var(--card-bg);\r\n      padding: 16px 18px;\r\n      border-radius: 12px;\r\n      border: 1px solid var(--border);\r\n      transition: all 0.3s ease;\r\n    }\r\n    \r\n    tbody tr {\r\n      transition: transform 0.3s ease, box-shadow 0.3s ease;\r\n    }\r\n    \r\n    tbody tr:hover {\r\n      transform: translateY(-4px);\r\n      box-shadow: 0 8px 24px var(--shadow-hover);\r\n    }\r\n    \r\n    tbody tr:hover td {\r\n      border-color: var(--accent-light);\r\n    }\r\n\r\n    \/* pagination *\/\r\n    .pagination {\r\n      display: flex;\r\n      gap: 8px;\r\n      align-items: center;\r\n      justify-content: center;\r\n      margin-top: 20px;\r\n      padding: 12px;\r\n      background: var(--card-bg);\r\n      border-radius: 16px;\r\n      box-shadow: 0 4px 12px var(--shadow);\r\n    }\r\n    \r\n    .pg-btn {\r\n      padding: 10px 16px;\r\n      border-radius: 10px;\r\n      border: 1px solid var(--border);\r\n      background: var(--card-bg);\r\n      cursor: pointer;\r\n      transition: all 0.3s ease;\r\n      font-family: 'El Messiri', sans-serif;\r\n      font-weight: 500;\r\n    }\r\n    \r\n    .pg-btn:hover:not(.active) {\r\n      background-color: var(--light-bg);\r\n      transform: translateY(-2px);\r\n    }\r\n    \r\n    .pg-btn.active {\r\n      background: linear-gradient(135deg, var(--accent), var(--accent-dark));\r\n      color: #fff;\r\n      border: none;\r\n      box-shadow: 0 8px 22px rgba(215, 100, 15, 0.18);\r\n    }\r\n\r\n    \/* cards: professional business-card style *\/\r\n    .cards {\r\n      display: none;\r\n      gap: 20px;\r\n    }\r\n    \r\n    .card {\r\n      position: relative;\r\n      overflow: hidden;\r\n      border-radius: 18px;\r\n      padding: 20px;\r\n      color: var(--text);\r\n      min-height: 140px;\r\n      display: flex;\r\n      flex-direction: column;\r\n      justify-content: space-between;\r\n      background: var(--card-bg);\r\n      transition: all 0.4s cubic-bezier(0.2, 0.9, 0.3, 1);\r\n      box-shadow: 0 6px 18px var(--shadow);\r\n      border: 1px solid var(--border);\r\n    }\r\n    \r\n    \/* decorative gradient strip *\/\r\n    .card::before {\r\n      content: '';\r\n      position: absolute;\r\n      left: 0;\r\n      top: 0;\r\n      bottom: 0;\r\n      width: 96px;\r\n      background: linear-gradient(135deg, var(--accent), var(--accent-dark));\r\n      transform: skewX(-12deg);\r\n      opacity: 0.12;\r\n      transition: opacity 0.3s ease;\r\n    }\r\n    \r\n    .card:hover::before {\r\n      opacity: 0.2;\r\n    }\r\n    \r\n    .card .brand {\r\n      display: flex;\r\n      align-items: center;\r\n      gap: 14px;\r\n    }\r\n    \r\n    .avatar {\r\n      width: 60px;\r\n      height: 60px;\r\n      border-radius: 12px;\r\n      background: linear-gradient(135deg, #fff, rgba(255, 255, 255, 0.8));\r\n      flex-shrink: 0;\r\n      display: grid;\r\n      place-items: center;\r\n      font-weight: 700;\r\n      color: var(--accent);\r\n      box-shadow: 0 6px 18px var(--shadow);\r\n      border: 2px solid rgba(251, 133, 25, 0.1);\r\n      font-size: 18px;\r\n      position: relative;\r\n      z-index: 1;\r\n    }\r\n    \r\n    .card h4 {\r\n      margin: 0;\r\n      font-size: 18px;\r\n      font-weight: 700;\r\n      position: relative;\r\n      z-index: 1;\r\n    }\r\n    \r\n    .card .meta {\r\n      display: flex;\r\n      gap: 10px;\r\n      flex-wrap: wrap;\r\n      margin-top: 8px;\r\n      position: relative;\r\n      z-index: 1;\r\n    }\r\n    \r\n    .pill {\r\n      background: rgba(251, 133, 25, 0.1);\r\n      padding: 6px 12px;\r\n      border-radius: 999px;\r\n      font-size: 13px;\r\n      color: var(--accent-dark);\r\n      font-weight: 500;\r\n      display: flex;\r\n      align-items: center;\r\n      gap: 6px;\r\n    }\r\n    \r\n    .pill i {\r\n      font-size: 12px;\r\n    }\r\n    \r\n    .card .foot {\r\n      display: flex;\r\n      justify-content: space-between;\r\n      align-items: center;\r\n      margin-top: 12px;\r\n      position: relative;\r\n      z-index: 1;\r\n    }\r\n    \r\n    .card .location {\r\n      color: var(--muted);\r\n      font-size: 14px;\r\n      display: flex;\r\n      align-items: center;\r\n      gap: 6px;\r\n    }\r\n    \r\n    .card .cta {\r\n      padding: 10px 16px;\r\n      border-radius: 10px;\r\n      background: linear-gradient(135deg, var(--accent), var(--accent-dark));\r\n      color: #fff;\r\n      border: none;\r\n      cursor: pointer;\r\n      font-family: 'El Messiri', sans-serif;\r\n      font-weight: 600;\r\n      transition: all 0.3s ease;\r\n      box-shadow: 0 4px 12px rgba(215, 100, 15, 0.2);\r\n    }\r\n    \r\n    .card .cta:hover {\r\n      transform: translateY(-2px);\r\n      box-shadow: 0 6px 16px rgba(215, 100, 15, 0.3);\r\n    }\r\n\r\n    \/* card hover effects *\/\r\n    .card:hover {\r\n      transform: translateY(-8px) scale(1.02);\r\n      box-shadow: 0 16px 40px var(--shadow-hover);\r\n    }\r\n\r\n    \/* Modal Styles *\/\r\n    .modal-overlay {\r\n      position: fixed;\r\n      top: 0;\r\n      left: 0;\r\n      right: 0;\r\n      bottom: 0;\r\n      background: var(--modal-overlay);\r\n      display: none;\r\n      justify-content: center;\r\n      align-items: center;\r\n      z-index: 1000;\r\n      animation: fadeIn 0.3s ease;\r\n      padding: 20px;\r\n    }\r\n\r\n    .modal-overlay.active {\r\n      display: flex;\r\n    }\r\n\r\n    .modal {\r\n      background: white;\r\n      border-radius: 20px;\r\n      width: 95%;\r\n      max-width: 800px;\r\n      max-height: 85vh;\r\n      overflow: hidden;\r\n      box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);\r\n      transform: scale(0.8) translateY(20px);\r\n      opacity: 0;\r\n      transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n      position: relative;\r\n      display: flex;\r\n      flex-direction: column;\r\n    }\r\n\r\n    .modal.active {\r\n      transform: scale(1) translateY(0);\r\n      opacity: 1;\r\n    }\r\n\r\n    .modal-header {\r\n      background: linear-gradient(135deg, var(--accent), var(--accent-dark));\r\n      color: white;\r\n      padding: 20px;\r\n      position: relative;\r\n      text-align: center;\r\n      flex-shrink: 0;\r\n    }\r\n\r\n    .modal-close {\r\n      position: absolute;\r\n      top: 15px;\r\n      left: 20px;\r\n      background: rgba(255, 255, 255, 0.2);\r\n      border: none;\r\n      color: white;\r\n      width: 40px;\r\n      height: 40px;\r\n      border-radius: 50%;\r\n      cursor: pointer;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      font-size: 18px;\r\n      transition: all 0.3s ease;\r\n    }\r\n\r\n    .modal-close:hover {\r\n      background: rgba(255, 255, 255, 0.3);\r\n      transform: rotate(90deg);\r\n    }\r\n\r\n    .modal-avatar {\r\n      width: 80px;\r\n      height: 80px;\r\n      border-radius: 50%;\r\n      background: white;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      font-size: 24px;\r\n      font-weight: 700;\r\n      color: var(--accent);\r\n      margin: 0 auto 10px;\r\n      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);\r\n      border: 3px solid rgba(255, 255, 255, 0.3);\r\n    }\r\n\r\n    .modal-title {\r\n      font-size: 22px;\r\n      font-weight: 700;\r\n      margin: 0 0 5px 0;\r\n    }\r\n\r\n    .modal-subtitle {\r\n      opacity: 0.9;\r\n      font-size: 16px;\r\n      margin-bottom: 5px;\r\n    }\r\n\r\n    .modal-body {\r\n      padding: 20px;\r\n      overflow-y: auto;\r\n      flex-grow: 1;\r\n    }\r\n\r\n    .modal-info {\r\n      display: grid;\r\n      grid-template-columns: 1fr;\r\n      gap: 15px;\r\n    }\r\n\r\n    .info-item {\r\n      display: flex;\r\n      align-items: center;\r\n      gap: 12px;\r\n      padding: 15px;\r\n      background: var(--light-bg);\r\n      border-radius: 10px;\r\n      transition: all 0.3s ease;\r\n      border-right: 3px solid var(--accent);\r\n    }\r\n\r\n    .info-item:hover {\r\n      transform: translateX(-3px);\r\n      background: rgba(251, 133, 25, 0.05);\r\n    }\r\n\r\n    .info-icon {\r\n      width: 40px;\r\n      height: 40px;\r\n      background: linear-gradient(135deg, var(--accent), var(--accent-dark));\r\n      border-radius: 8px;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      color: white;\r\n      font-size: 16px;\r\n      flex-shrink: 0;\r\n    }\r\n\r\n    .info-content h4 {\r\n      margin: 0 0 5px 0;\r\n      color: var(--accent);\r\n      font-size: 14px;\r\n    }\r\n\r\n    .info-content p {\r\n      margin: 0;\r\n      color: var(--text);\r\n      font-size: 14px;\r\n      font-weight: 500;\r\n    }\r\n\r\n    \/* responsive rules *\/\r\n    @media (min-width: 1200px) {\r\n      .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }\r\n      .main-stats { grid-template-columns: repeat(2, 1fr); }\r\n    }\r\n    \r\n    @media (min-width: 980px) and (max-width: 1199px) {\r\n      .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }\r\n      .main-stats { grid-template-columns: repeat(2, 1fr); }\r\n    }\r\n    \r\n    @media (min-width: 768px) and (max-width: 979px) {\r\n      .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }\r\n      .main-stats { grid-template-columns: repeat(2, 1fr); }\r\n      .share-stats { grid-template-columns: repeat(3, 1fr); }\r\n    }\r\n    \r\n    @media (max-width: 767px) {\r\n      .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }\r\n      \r\n      thead { display: none }\r\n      table, tbody, tr, td { display: block; width: 100% }\r\n      tbody td { display: flex; justify-content: space-between; padding: 12px }\r\n      tbody td::before {\r\n        content: attr(data-label);\r\n        font-weight: 700;\r\n        color: var(--accent);\r\n      }\r\n      \r\n      .mw-controls { flex-direction: column; align-items: stretch }\r\n      .view-toggle { justify-content: flex-start; margin-top: 12px }\r\n\r\n      .modal {\r\n        width: 95%;\r\n        margin: 10px;\r\n      }\r\n\r\n      .modal-body {\r\n        padding: 15px;\r\n      }\r\n\r\n      .info-item {\r\n        flex-direction: column;\r\n        text-align: center;\r\n        gap: 8px;\r\n      }\r\n      \r\n      .header-content {\r\n        flex-direction: column;\r\n        align-items: flex-start;\r\n      }\r\n      \r\n      .main-stats, .share-stats {\r\n        grid-template-columns: 1fr;\r\n      }\r\n      \r\n      .mw-header {\r\n        padding: 15px;\r\n      }\r\n      \r\n      .modal-avatar {\r\n        width: 70px;\r\n        height: 70px;\r\n        font-size: 20px;\r\n      }\r\n      \r\n      .modal-title {\r\n        font-size: 20px;\r\n      }\r\n      \r\n      .modal-header {\r\n        padding: 15px;\r\n      }\r\n    }\r\n    \r\n    @media (max-width: 480px) {\r\n      .cards { grid-template-columns: 1fr; }\r\n      .pagination { flex-wrap: wrap; }\r\n      .card { min-height: 120px; padding: 15px; }\r\n      .stat-card { padding: 15px; }\r\n      .stat-value { font-size: 28px; }\r\n      .modal-overlay {\r\n        padding: 10px;\r\n      }\r\n    }\r\n\r\n    \/* focused accessibility *\/\r\n    .btn-ico:focus, .pg-btn:focus, .cta:focus, .search-wrap input:focus {\r\n      outline: 3px solid rgba(251, 133, 25, 0.2);\r\n    }\r\n    \r\n    \/* loading animation *\/\r\n    @keyframes fadeIn {\r\n      from { opacity: 0; transform: translateY(10px); }\r\n      to { opacity: 1; transform: translateY(0); }\r\n    }\r\n    \r\n    .card, tbody tr {\r\n      animation: fadeIn 0.5s ease forwards;\r\n    }\r\n    \r\n    \/* custom scrollbar *\/\r\n    .table-wrap::-webkit-scrollbar {\r\n      height: 8px;\r\n    }\r\n    \r\n    .table-wrap::-webkit-scrollbar-track {\r\n      background: var(--light-bg);\r\n      border-radius: 4px;\r\n    }\r\n    \r\n    .table-wrap::-webkit-scrollbar-thumb {\r\n      background: var(--accent-light);\r\n      border-radius: 4px;\r\n    }\r\n    \r\n    .table-wrap::-webkit-scrollbar-thumb:hover {\r\n      background: var(--accent);\r\n    }\r\n    \r\n    \/* Counter animation *\/\r\n    @keyframes countUp {\r\n      from { transform: translateY(20px); opacity: 0; }\r\n      to { transform: translateY(0); opacity: 1; }\r\n    }\r\n    \r\n    .counting {\r\n      animation: countUp 0.8s ease-out forwards;\r\n    }\r\n    \r\n    \/* Filter active state *\/\r\n    .filter-active {\r\n      position: relative;\r\n      padding: 5px 10px;\r\n      background: rgba(251, 133, 25, 0.1);\r\n      border-radius: 20px;\r\n      margin-bottom: 10px;\r\n      display: inline-flex;\r\n      align-items: center;\r\n      gap: 8px;\r\n    }\r\n    \r\n    .filter-active button {\r\n      background: none;\r\n      border: none;\r\n      color: var(--accent);\r\n      cursor: pointer;\r\n      font-size: 16px;\r\n    }\r\n    \r\n    \/* Modal scrollbar *\/\r\n    .modal-body::-webkit-scrollbar {\r\n      width: 6px;\r\n    }\r\n    \r\n    .modal-body::-webkit-scrollbar-track {\r\n      background: var(--light-bg);\r\n      border-radius: 3px;\r\n    }\r\n    \r\n    .modal-body::-webkit-scrollbar-thumb {\r\n      background: var(--accent-light);\r\n      border-radius: 3px;\r\n    }\r\n    \r\n    .modal-body::-webkit-scrollbar-thumb:hover {\r\n      background: var(--accent);\r\n    }\r\n  <\/style>\r\n<\/head>\r\n<body>\r\n  <div class=\"members-widget\" id=\"membersWidget\">\r\n    \r\n    <!-- Header Section -->\r\n    <div class=\"mw-header\">\r\n      <div class=\"header-content\">\r\n        <h1 class=\"header-title\">\u0628\u064a\u0627\u0646 \u0623\u0639\u0636\u0627\u0621 \u0627\u0644\u062c\u0645\u0639\u064a\u0629 \u0627\u0644\u0639\u0645\u0648\u0645\u064a\u0629<\/h1>\r\n        <div class=\"header-date\">\r\n          <i class=\"fas fa-calendar-alt\"><\/i>\r\n          <span id=\"currentDate\">\u0661\u0664 \u0631\u0628\u064a\u0639 \u0627\u0644\u0623\u0648\u0644 \u0661\u0664\u0664\u0667 \u0647\u0640<\/span>\r\n        <\/div>\r\n      <\/div>\r\n      \r\n      <div id=\"activeFilter\" class=\"filter-active\" style=\"display: none;\">\r\n        <span id=\"filterText\"><\/span>\r\n        <button id=\"clearFilter\"><i class=\"fas fa-times\"><\/i><\/button>\r\n      <\/div>\r\n      \r\n      <div class=\"stats-container\">\r\n        <div class=\"main-stats\">\r\n          <div class=\"stat-card highlight\" id=\"totalMembersCard\">\r\n            <span class=\"stat-value\" id=\"totalMembers\">0<\/span>\r\n            <span class=\"stat-label\">\u0625\u062c\u0645\u0627\u0644\u064a \u0627\u0644\u0623\u0639\u0636\u0627\u0621<\/span>\r\n          <\/div>\r\n          <div class=\"stat-card highlight\" id=\"totalSharesCard\">\r\n            <span class=\"stat-value\" id=\"totalShares\">0<\/span>\r\n            <span class=\"stat-label\">\u0625\u062c\u0645\u0627\u0644\u064a \u0627\u0644\u0623\u0633\u0647\u0645<\/span>\r\n          <\/div>\r\n        <\/div>\r\n        \r\n        <div class=\"share-stats\" id=\"shareStats\">\r\n          <!-- Statistics will be populated by JavaScript -->\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"mw-controls\">\r\n      <div class=\"left\">\r\n        <div class=\"search-wrap\"><input id=\"mwSearch\" type=\"search\" placeholder=\"\u0627\u0628\u062d\u062b (\u0627\u0644\u0627\u0633\u0645)\" aria-label=\"\u0628\u062d\u062b\" \/><\/div>\r\n      <\/div>\r\n      <div class=\"view-toggle\" role=\"tablist\" aria-label=\"\u062a\u0628\u062f\u064a\u0644 \u0627\u0644\u0639\u0631\u0636\">\r\n        <button id=\"mwTableBtn\" class=\"btn-ico active\" title=\"\u0639\u0631\u0636 \u062c\u062f\u0648\u0644\" aria-pressed=\"true\"><i class=\"fas fa-table\"><\/i><\/button>\r\n        <button id=\"mwCardsBtn\" class=\"btn-ico\" title=\"\u0639\u0631\u0636 \u0628\u0637\u0627\u0642\u0627\u062a\" aria-pressed=\"false\"><i class=\"fas fa-th-large\"><\/i><\/button>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"table-wrap\" id=\"tableWrap\">\r\n      <table id=\"mwTable\" aria-label=\"\u0642\u0627\u0626\u0645\u0629 \u0627\u0644\u0623\u0639\u0636\u0627\u0621\">\r\n        <thead>\r\n          <tr>\r\n            <th data-col=\"0\">#<\/th>\r\n            <th data-col=\"1\">\u0627\u0644\u0627\u0633\u0645 <span class=\"arrow\">\u2195<\/span><\/th>\r\n            <th data-col=\"2\">\u0639\u062f\u062f \u0627\u0644\u0623\u0633\u0647\u0645 <span class=\"arrow\">\u2195<\/span><\/th>\r\n          <\/tr>\r\n        <\/thead>\r\n        <tbody id=\"mwTbody\"><\/tbody>\r\n      <\/table>\r\n    <\/div>\r\n\r\n    <div class=\"cards\" id=\"mwCards\" aria-hidden=\"true\"><\/div>\r\n\r\n    <div class=\"pagination\" id=\"mwPagination\" aria-label=\"\u062a\u0635\u0641\u062d \u0627\u0644\u0635\u0641\u062d\u0627\u062a\"><\/div>\r\n  <\/div>\r\n\r\n  <!-- Modal for Member Details -->\r\n  <div class=\"modal-overlay\" id=\"modalOverlay\">\r\n    <div class=\"modal\" id=\"memberModal\">\r\n      <div class=\"modal-header\">\r\n        <button class=\"modal-close\" id=\"modalClose\">\r\n          <i class=\"fas fa-times\"><\/i>\r\n        <\/button>\r\n        <div class=\"modal-avatar\" id=\"modalAvatar\">AA<\/div>\r\n        <h2 class=\"modal-title\" id=\"modalName\">\u0627\u0633\u0645 \u0627\u0644\u0639\u0636\u0648<\/h2>\r\n      <\/div>\r\n      <div class=\"modal-body\">\r\n        <div class=\"modal-info\">\r\n          <div class=\"info-item\">\r\n            <div class=\"info-icon\">\r\n              <i class=\"fas fa-user\"><\/i>\r\n            <\/div>\r\n            <div class=\"info-content\">\r\n              <h4>\u0627\u0644\u0627\u0633\u0645 \u0627\u0644\u0643\u0627\u0645\u0644<\/h4>\r\n              <p id=\"modalFullName\">-<\/p>\r\n            <\/div>\r\n          <\/div>\r\n          <div class=\"info-item\">\r\n            <div class=\"info-icon\">\r\n              <i class=\"fas fa-chart-pie\"><\/i>\r\n            <\/div>\r\n            <div class=\"info-content\">\r\n              <h4>\u0639\u062f\u062f \u0627\u0644\u0623\u0633\u0647\u0645<\/h4>\r\n              <p id=\"modalShares\">-<\/p>\r\n            <\/div>\r\n          <\/div>\r\n          <div class=\"info-item\">\r\n            <div class=\"info-icon\">\r\n              <i class=\"fas fa-calendar-alt\"><\/i>\r\n            <\/div>\r\n            <div class=\"info-content\">\r\n              <h4>\u062a\u0627\u0631\u064a\u062e \u0627\u0644\u0627\u0646\u0636\u0645\u0627\u0645<\/h4>\r\n              <p id=\"modalJoinDate\">-<\/p>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <script>\r\n    (function(){\r\n      \/\/ data (from user input) - 27 members with correct information\r\n      const DATA = [\r\n        ['1', '\u062f. \u062d\u0645\u0648\u062f \u0628\u0646 \u0647\u0627\u062f\u064a \u0627\u0644\u0639\u0646\u0632\u064a', '5', '\u062c\u0627\u0645\u0639\u0629 \u062d\u0627\u0626\u0644', '\u062f\u0643\u062a\u0648\u0631\u0627\u0629', '10\/21\/2024'],\r\n        ['2', '\u0632\u0627\u0647\u064a \u0635\u0627\u0644\u062d \u0627\u0644\u0634\u0645\u0631\u064a', '10', '\u0644\u0627 \u064a\u0648\u062c\u062f', '\u0644\u0627 \u064a\u0648\u062c\u062f', '10\/21\/2024'],\r\n        ['3', '\u062f. \u062c\u0632\u0627\u0639 \u0628\u0646 \u0641\u0631\u062d\u0627\u0646 \u0628\u0646 \u0645\u0646\u0648\u0631 \u0627\u0644\u0634\u0645\u0631\u064a', '5', '\u062c\u0627\u0645\u0639\u0629 \u062d\u0627\u0626\u0644', '\u062f\u0643\u062a\u0648\u0631\u0627\u0647', '10\/21\/2024'],\r\n        ['4', '\u062f. \u0645\u0631\u064a\u0645 \u0641\u0631\u064a\u062d \u0639\u0628\u062f\u0627\u0644\u0644\u0647 \u0627\u0644\u0645\u0647\u0648\u0633', '3', '\u062c\u0627\u0645\u0639\u0629 \u062d\u0627\u0626\u0644', '\u062f\u0643\u062a\u0648\u0631\u0627\u0647', '10\/21\/2024'],\r\n        ['5', '\u062f.\u0648\u0627\u0641\u064a \u0641\u0647\u064a\u062f \u0627\u0644\u0634\u0645\u0631\u064a', '31', '\u062c\u0627\u0645\u0639\u0629 \u062d\u0627\u0626\u0644', '\u062f\u0643\u062a\u0648\u0631\u0627\u0647', '10\/21\/2024'],\r\n        ['6', '\u0627.\u062f..\u0645\u0646\u064a\u0631\u0629 \u0628\u0646\u062a \u0645\u062f\u0639\u062b \u0627\u0644\u0641\u062d\u0637\u0627\u0646\u064a', '5', '\u062c\u0627\u0645\u0639\u0629 \u0627\u0644\u0623\u0645\u064a\u0631\u0629 \u0646\u0648\u0631\u0629 \u0628\u0646\u062a \u0639\u0628\u062f\u0627\u0644\u0631\u062d\u0645\u0646', '\u062f\u0643\u062a\u0648\u0631\u0627\u0647', '10\/21\/2024'],\r\n        ['7', '\u0633\u0639\u0648\u062f \u0645\u0637\u0646\u064a \u0647\u0628\u0627\u0633 \u0627\u0644\u0634\u0645\u0631\u064a', '10', '\u0647\u064a\u0626\u0629 \u062a\u0637\u0648\u064a\u0631 \u0645\u062d\u0645\u064a\u0629 \u0627\u0644\u0645\u0644\u0643 \u0633\u0644\u0645\u0627\u0646 \u0628\u0646 \u0639\u0628\u062f\u0627\u0644\u0639\u0632\u064a\u0632 \u0627\u0644\u0645\u0644\u0643\u064a\u0629', '\u0628\u0643\u0627\u0644\u0648\u0631\u064a\u0648\u0633', '10\/21\/2024'],\r\n        ['8', '\u062f. \u0645\u0646\u0648\u0631 \u0646\u0627\u064a\u0641 \u0645\u062d\u0645\u062f \u0627\u0644\u0634\u0645\u0631\u064a', '10', '\u062c\u0627\u0645\u0639\u0629 \u062d\u0627\u0626\u0644', '\u062f\u0643\u062a\u0648\u0631\u0627\u0647', '10\/21\/2024'],\r\n        ['9', '\u0645\u0634\u0639\u0644 \u0628\u0646 \u0645\u0647\u062c\u0639 \u062f\u0647\u0627\u0645 \u0627\u0644\u0634\u0645\u0631\u064a', '9', '\u0627\u062f\u0627\u0631\u0629 \u0627\u0644\u062a\u0639\u0644\u064a\u0645 - \u0628\u062d\u0627\u0626\u0644', '\u062f\u0643\u062a\u0648\u0631\u0627\u0647', '10\/21\/2024'],\r\n        ['10', '\u0647\u0646\u062f \u0645\u062d\u0645\u064a\u062f \u062d\u0645\u062f \u0627\u0644\u0641\u0642\u064a\u0647', '5', '\u0627\u0644\u0625\u062f\u0627\u0631\u0629 \u0627\u0644\u0639\u0627\u0645\u0629 \u0644\u0644\u062a\u0639\u0644\u064a\u0645 \u0628\u062d\u0627\u0626\u0644', '\u0645\u0627\u062c\u0633\u062a\u064a\u0631 \u0625\u062f\u0627\u0631\u0629 \u062a\u0631\u0628\u0648\u064a\u0629', '10\/21\/2024'],\r\n        ['11', '\u0627.\u062f..\u0645\u0646\u0649 \u062d\u0633\u064a\u0646 \u0639\u0644\u064a \u0627\u0644\u0642\u062d\u0637\u0627\u0646\u064a', '10', '\u062c\u0627\u0645\u0639\u0629 \u0627\u0644\u0625\u0645\u064a\u0631\u0629 \u0646\u0648\u0631\u0629', '\u062f\u0643\u062a\u0648\u0631\u0627\u0647', '10\/21\/2024'],\r\n        ['12', '\u0645\u0627\u062c\u062f \u0628\u0646 \u0635\u0644\u0627\u0644 \u0627\u0644\u0645\u0637\u0644\u0642', '6', '\u0645\u062a\u0642\u0627\u0639\u062f', '\u0628\u0643\u0627\u0644\u0648\u0631\u064a\u0648\u0633', '10\/21\/2024'],\r\n        ['13', '\u062f. \u0632\u064a\u062f \u0628\u0646 \u0639\u0644\u064a \u0628\u0646 \u0639\u0628\u062f \u0627\u0644\u0643\u0631\u064a\u0645 \u0627\u0644\u0641\u0636\u064a\u0644', '3', '\u0645\u0631\u0643\u0632 \u0627\u0644\u062e\u0644\u064a\u062c \u0644\u0644\u0623\u0628\u062d\u0627\u062b', '\u062f\u0643\u062a\u0648\u0631\u0627\u0647', '10\/21\/2024'],\r\n        ['14', '\u062d\u0627\u062a\u0645 \u0623\u062d\u0645\u062f \u0645\u062d\u0645\u062f \u0627\u0644\u0634\u0645\u0631\u064a', '7', '\u062c\u0627\u0645\u0639\u0629 \u062d\u0627\u0626\u0644', '\u0645\u0627\u062c\u0633\u062a\u064a\u0631', '10\/21\/2024'],\r\n        ['15', '\u062f. \u062e\u0627\u062a\u0645 \u0641\u0636\u064a \u0641\u0627\u0626\u0632 \u0627\u0644\u0634\u0645\u0631\u064a ', '3', '\u0648\u0632\u0627\u0631\u0629 \u0627\u0644\u062a\u0639\u0644\u064a\u0645', '\u062f\u0643\u062a\u0648\u0631\u0627\u0647', '10\/21\/2024'],\r\n        ['16', '\u062f. \u062d\u0645\u0648\u062f \u0645\u062d\u0645\u062f \u0635\u0627\u0644\u062d \u0627\u0644\u0634\u0645\u0631\u064a', '25', '\u0627\u0644\u062a\u0639\u0644\u064a\u0645', '\u062f\u0643\u062a\u0648\u0631\u0627\u0647', '10\/21\/2024'],\r\n        ['17', '\u0637\u0644\u0627\u0644 \u0628\u0646 \u0637\u0627\u0631\u0634 \u0627\u0644\u0634\u0645\u0631\u064a', '10', '\u062c\u0627\u0645\u0639\u0629 \u0627\u0644\u0627\u0645\u0627\u0645 \u0645\u062d\u0645\u062f', '\u062f\u0643\u062a\u0648\u0631\u0627\u0647', '10\/21\/2024'],\r\n        ['18', '\u0627.\u062f. \u0627\u062d\u0645\u062f \u0645\u0647\u062c\u0639 \u0631\u0627\u0628\u062d \u0627\u0644\u0634\u0645\u0631\u064a', '12', '\u062c\u0627\u0645\u0639\u0629 \u062d\u0627\u0626\u0644', '\u062f\u0643\u062a\u0648\u0631\u0627\u0647', '10\/21\/2024'],\r\n        ['19', '\u0627.\u062f. \u062e\u0644\u064a\u0641 \u0635\u063a\u064a\u0631 \u0627\u0644\u062d\u0633\u064a\u0646\u064a \u0627\u0644\u0634\u0645\u0631\u064a', '31', '\u062c\u0627\u0645\u0639\u0629 \u062d\u0627\u0626\u0644', '\u062f\u0643\u062a\u0648\u0627\u0631\u0629', '10\/21\/2024'],\r\n        ['20', '\u062f. \u0645\u0641\u0631\u062d \u062d\u0645\u064a\u062f \u0633\u0646\u064a\u062f \u0627\u0644\u0639\u0646\u0632\u064a', '15', '\u062c\u0627\u0645\u0639\u0629 \u062d\u0627\u0626\u0644', '\u062f\u0643\u062a\u0648\u0631\u0627\u0647', '10\/21\/2024'],\r\n        ['21', '\u0623. \u0627\u062d\u0645\u062f \u0639\u0628\u062f \u0627\u0644\u0639\u0632\u064a\u0632 \u0627\u0644\u0639\u064a\u062f\u064a', '31', '\u062c\u0627\u0645\u0639\u0629 \u062d\u0641\u0631 \u0627\u0644\u0628\u0627\u0637\u0646', '\u0623\u0633\u062a\u0627\u0630', '10\/21\/2024'],\r\n        ['22', '\u062f. \u0639\u064a\u0633\u0649 \u0632\u064a\u062f\u0627\u0646 \u0627\u0644\u0634\u0645\u0631\u064a', '3', '\u062c\u0627\u0645\u0639\u0629 \u062d\u0627\u0626\u0644', '\u062f\u0643\u062a\u0648\u0631\u0627\u0647', '10\/21\/2024'],\r\n        ['23', '\u0623.\u0646\u0627\u0635\u0631 \u062e\u0644\u064a\u0641 \u0635\u063a\u064a\u0651\u0631 \u0627\u0644\u0634\u0645\u0631\u064a', '18', '\u0637\u0627\u0644\u0628 \u062c\u0627\u0645\u0639\u064a', '\u0637\u0627\u0644\u0628 \u062c\u0627\u0645\u0639\u064a', '10\/21\/2024'],\r\n        ['24', '\u062f. \u064a\u0648\u0633\u0641 \u0634\u0631\u0639\u0627\u0646 \u0627\u0644\u0633\u0648\u064a\u062f\u064a', '5', '\u0648\u0632\u0627\u0631\u0629 \u0627\u0644\u062a\u0639\u0644\u064a\u0645', '\u062f\u0643\u062a\u0648\u0631\u0627\u0647', '10\/21\/2024'],\r\n        ['25', '\u0623.\u0645\u0646\u064a\u0641 \u0645\u0631\u0639\u064a \u0641\u0631\u062d\u0627\u0646 \u0627\u0644\u0648\u064a\u0628\u0627\u0631\u064a', '10', '\u0648\u0632\u0627\u0631\u0629 \u0627\u0644\u0635\u062d\u0629', '\u062b\u0627\u0646\u0648\u064a', '10\/21\/2024'],\r\n        ['26', '\u0627\u062d\u0645\u062f \u0628\u0646 \u0639\u0628\u062f\u0627\u0644\u0644\u0647 \u0628\u0646 \u062e\u0644\u0641 \u0627\u0644\u0634\u063a\u062f\u0644\u064a', '3', '\u0645\u062f\u064a\u0646\u0629 \u062d\u0627\u0626\u0644', '\u0645\u062a\u0642\u0627\u0639\u062f', '-'],\r\n        ['27', '\u062f. \u062a\u0631\u0643\u064a \u0644\u064a\u0644\u064a \u0645\u0635\u064a\u062d \u0627\u0644\u0634\u0644\u0627\u0642\u064a', '31', '\u063a\u064a\u0631 \u0645\u062a\u0648\u0641\u0631', '\u062f\u0643\u062a\u0648\u0631\u0627\u0647', '10\/21\/2024']\r\n      ];\r\n\r\n      \/\/ Process names to replace abbreviations with full titles\r\n\/\/ Process names to replace abbreviations with full titles\r\nfunction processName(name) {\r\n  \/\/ Remove any existing prefixes like \u062f. \u0623. \u0627.\u062f.. \u0623.\u062f.\r\n  let cleanName = name.replace(\/^(\u062f\\.|\u0623\\.|\u0627\\.\u062f\\.|\u0623\\.\u062f\\.)\\s*\/g, '').trim();\r\n\r\n  \/\/ List of female names or keywords\r\n  const femaleKeywords = ['\u0628\u0646\u062a', '\u0647\u0646\u062f', '\u0645\u0631\u064a\u0645', '\u0645\u0646\u064a\u0631\u0629', '\u0645\u0646\u0649', '\u0645\u0646\u064a\u0631\u0629', '\u0647\u0646\u062f'];\r\n  const isFemale = femaleKeywords.some(keyword => cleanName.includes(keyword));\r\n\r\n  \/\/ Extract academic title from original name\r\n  const hasDoctorate = \/^(\u062f\\.|\u0627\\.\u062f\\.|\u0623\\.\u062f\\.)\/.test(name);\r\n  const hasProfessor = \/^(\u0627\\.\u062f\\.|\u0623\\.\u062f\\.)\/.test(name);\r\n\r\n  let title = '';\r\n  if (hasProfessor) {\r\n    title = `\u0627\u0644\u0623\u0633\u062a\u0627\u0630${isFemale ? '\u0629' : ''} \u0627\u0644\u062f\u0643\u062a\u0648\u0631${isFemale ? '\u0629' : ''}`;\r\n  } else if (hasDoctorate) {\r\n    title = `\u0627\u0644\u062f\u0643\u062a\u0648\u0631${isFemale ? '\u0629' : ''}`;\r\n  } else {\r\n    title = `\u0627\u0644\u0623\u0633\u062a\u0627\u0630${isFemale ? '\u0629' : ''}`;\r\n  }\r\n\r\n  return `${title} \/ ${cleanName}`;\r\n}\r\n      \/\/ Process all names in DATA\r\n      const PROCESSED_DATA = DATA.map(row => {\r\n        const processedRow = [...row];\r\n        processedRow[1] = processName(row[1]);\r\n        return processedRow;\r\n      });\r\n\r\n      \/\/ state\r\n      let state = {\r\n        data: PROCESSED_DATA.slice(),\r\n        filtered: PROCESSED_DATA.slice(),\r\n        sortCol: null,\r\n        sortDir: null, \/\/ 'asc' or 'desc'\r\n        page: 1,\r\n        perPage: 10,\r\n        view: localStorage.getItem('mw_view') || 'table',\r\n        activeFilter: null\r\n      };\r\n\r\n      \/\/ elements\r\n      const tbody = document.getElementById('mwTbody');\r\n      const cardsEl = document.getElementById('mwCards');\r\n      const paginationEl = document.getElementById('mwPagination');\r\n      const search = document.getElementById('mwSearch');\r\n      const tableBtn = document.getElementById('mwTableBtn');\r\n      const cardsBtn = document.getElementById('mwCardsBtn');\r\n      const theadCols = Array.from(document.querySelectorAll('#mwTable thead th'));\r\n      const currentDateEl = document.getElementById('currentDate');\r\n      const totalMembersEl = document.getElementById('totalMembers');\r\n      const totalSharesEl = document.getElementById('totalShares');\r\n      const shareStatsEl = document.getElementById('shareStats');\r\n      const activeFilterEl = document.getElementById('activeFilter');\r\n      const filterTextEl = document.getElementById('filterText');\r\n      const clearFilterBtn = document.getElementById('clearFilter');\r\n      const totalMembersCard = document.getElementById('totalMembersCard');\r\n      const totalSharesCard = document.getElementById('totalSharesCard');\r\n\r\n      \/\/ modal elements\r\n      const modalOverlay = document.getElementById('modalOverlay');\r\n      const memberModal = document.getElementById('memberModal');\r\n      const modalClose = document.getElementById('modalClose');\r\n      const modalAvatar = document.getElementById('modalAvatar');\r\n      const modalName = document.getElementById('modalName');\r\n      const modalFullName = document.getElementById('modalFullName');\r\n      const modalShares = document.getElementById('modalShares');\r\n      const modalJoinDate = document.getElementById('modalJoinDate');\r\n\r\n      \/\/ helpers\r\n      const escape = s => String(s).replace(\/[&<>\"']\/g,c=>({'&':'&amp;','<':'&lt;','>':'&gt;','\"':'&quot;',\"'\":\"&#39;\"}[c]));\r\n\r\n      \/\/ Counter animation\r\n      function animateValue(element, start, end, duration) {\r\n        let startTimestamp = null;\r\n        const step = (timestamp) => {\r\n          if (!startTimestamp) startTimestamp = timestamp;\r\n          const progress = Math.min((timestamp - startTimestamp) \/ duration, 1);\r\n          const value = Math.floor(progress * (end - start) + start);\r\n          element.textContent = value.toLocaleString();\r\n          if (progress < 1) {\r\n            window.requestAnimationFrame(step);\r\n          }\r\n        };\r\n        window.requestAnimationFrame(step);\r\n      }\r\n\r\n      \/\/ Calculate statistics - ALL unique share counts\r\n      function calculateStats() {\r\n        const totalMembers = state.data.length;\r\n        const totalShares = state.data.reduce((sum, member) => sum + parseInt(member[2]), 0);\r\n        \r\n        \/\/ Count members by ALL unique share counts\r\n        const shareCounts = {};\r\n        state.data.forEach(member => {\r\n          const shares = parseInt(member[2]);\r\n          shareCounts[shares] = (shareCounts[shares] || 0) + 1;\r\n        });\r\n        \r\n        \/\/ Get ALL unique share counts sorted by count (descending)\r\n        const allShareCounts = Object.entries(shareCounts)\r\n          .sort((a, b) => b[1] - a[1]);\r\n        \r\n        return {\r\n          totalMembers,\r\n          totalShares,\r\n          allShareCounts\r\n        };\r\n      }\r\n\r\n      \/\/ Render statistics - ALL unique share counts\r\n      function renderStats() {\r\n        const stats = calculateStats();\r\n        \r\n        \/\/ Animate main stats\r\n        animateValue(totalMembersEl, 0, stats.totalMembers, 1500);\r\n        animateValue(totalSharesEl, 0, stats.totalShares, 1500);\r\n        \r\n        \/\/ Render ALL share stats\r\n        let html = '';\r\n        stats.allShareCounts.forEach(([shares, count]) => {\r\n          html += `\r\n            <div class=\"stat-card\" data-shares=\"${shares}\">\r\n              <span class=\"stat-value\">${count}<\/span>\r\n              <span class=\"stat-label\">\u0639\u0636\u0648 \u0628\u0640 ${shares} \u0633\u0647\u0645<\/span>\r\n            <\/div>\r\n          `;\r\n        });\r\n        \r\n        shareStatsEl.innerHTML = html;\r\n        \r\n        \/\/ Animate share stats after a delay\r\n        setTimeout(() => {\r\n          document.querySelectorAll('.share-stats .stat-value').forEach((el, index) => {\r\n            const count = parseInt(stats.allShareCounts[index][1]);\r\n            animateValue(el, 0, count, 1000);\r\n          });\r\n        }, 500);\r\n      }\r\n\r\n      function renderTable(){\r\n        \/\/ compute current page slice\r\n        const start = (state.page-1)*state.perPage;\r\n        const pageRows = state.filtered.slice(start,start+state.perPage);\r\n        \r\n        \/\/ Add data-labels for responsive design\r\n        tbody.innerHTML = pageRows.map(r=>{\r\n          return `<tr>\r\n            <td data-label=\"#\">${escape(r[0])}<\/td>\r\n            <td data-label=\"\u0627\u0644\u0627\u0633\u0645\">${escape(r[1])}<\/td>\r\n            <td data-label=\"\u0639\u062f\u062f \u0627\u0644\u0623\u0633\u0647\u0645\">${escape(r[2])}<\/td>\r\n          <\/tr>`;\r\n        }).join('');\r\n      }\r\n\r\n      function renderCards(){\r\n        const start = (state.page-1)*state.perPage;\r\n        const pageRows = state.filtered.slice(start,start+state.perPage);\r\n        cardsEl.innerHTML = pageRows.map((r,idx)=>{\r\n          const initials = getInitials(r[1]);\r\n          return `\\n            <div class=\"card\" role=\"article\" tabindex=\"0\">\\n              <div class=\"brand\">\\n                <div class=\"avatar\">${escape(initials)}<\/div>\\n                <div>\\n                  <h4>${escape(r[1])}<\/h4>\\n                  <div class=\"meta\">\\n                    <div class=\"pill\"><i class=\"fas fa-chart-pie\"><\/i>${escape(r[2])} \u0633\u0647\u0645<\/div>\\n                  <\/div>\\n                <\/div>\\n              <\/div>\\n              <div class=\"foot\">\\n                <button class=\"cta\" data-member-id=\"${idx}\" aria-label=\"\u0639\u0631\u0636 \u062a\u0641\u0627\u0635\u064a\u0644 ${escape(r[1])}\"><i class=\"fas fa-eye\"><\/i> \u062a\u0641\u0627\u0635\u064a\u0644<\/button>\\n              <\/div>\\n            <\/div>`;\r\n        }).join('');\r\n      }\r\n\r\n      function renderPagination(){\r\n        const total = state.filtered.length;\r\n        const pages = Math.max(1,Math.ceil(total\/state.perPage));\r\n        let html = '';\r\n        \/\/ prev\r\n        html += `<button class=\"pg-btn\" data-page=\"${Math.max(1,state.page-1)}\" aria-label=\"\u0627\u0644\u0635\u0641\u062d\u0629 \u0627\u0644\u0633\u0627\u0628\u0642\u0629\"><i class=\"fas fa-chevron-right\"><\/i><\/button>`;\r\n        \/\/ page numbers (compact: show up to 5 with ellipsis)\r\n        const range = getPageRange(state.page,pages,5);\r\n        range.forEach(p=>{\r\n          if(p === '...') html += `<div style=\"padding:0 8px;color:var(--muted)\">...<\/div>`;\r\n          else html += `<button class=\"pg-btn ${p===state.page ? 'active':''}\" data-page=\"${p}\">${p}<\/button>`;\r\n        });\r\n        \/\/ next\r\n        html += `<button class=\"pg-btn\" data-page=\"${Math.min(pages,state.page+1)}\" aria-label=\"\u0627\u0644\u0635\u0641\u062d\u0629 \u0627\u0644\u062a\u0627\u0644\u064a\u0629\"><i class=\"fas fa-chevron-left\"><\/i><\/button>`;\r\n        paginationEl.innerHTML = html;\r\n      }\r\n\r\n      function getPageRange(cur,total,maxLen){\r\n        \/\/ returns array of pages and '...' tokens\r\n        if(total<=maxLen) return Array.from({length:total},(_,i)=>i+1);\r\n        const half = Math.floor(maxLen\/2);\r\n        let start = Math.max(1, cur-half);\r\n        let end = Math.min(total, cur+half);\r\n        if(start===1) end = maxLen;\r\n        if(end===total) start = total - maxLen +1;\r\n        const range = [];\r\n        if(start>1) range.push(1), range.push('...');\r\n        for(let i=start;i<=end;i++) range.push(i);\r\n        if(end<total) range.push('...', total);\r\n        return range;\r\n      }\r\n\r\n      function getInitials(name){\r\n        \/\/ Remove prefix to get the actual name\r\n        const cleanName = name.replace(\/^[^\/]+\\\/\\s*\/, '');\r\n        const parts = cleanName.split(' ').filter(Boolean);\r\n        if(parts.length===0) return '';\r\n        if(parts.length===1) return parts[0].slice(0,2);\r\n        return (parts[0][0] + parts[parts.length-1][0]).toUpperCase();\r\n      }\r\n\r\n      \/\/ Modal functions\r\n      function openModal(memberData) {\r\n        modalAvatar.textContent = getInitials(memberData[1]);\r\n        modalName.textContent = memberData[1];\r\n        modalFullName.textContent = memberData[1];\r\n        modalShares.textContent = `${memberData[2]} \u0633\u0647\u0645`;\r\n        \r\n        \/\/ Format join date - only Hijri\r\n        const hijriDate = '\u0661\u0664 \u0631\u0628\u064a\u0639 \u0627\u0644\u0623\u0648\u0644 \u0661\u0664\u0664\u0667 \u0647\u0640';\r\n        modalJoinDate.textContent = hijriDate;\r\n        \r\n        modalOverlay.classList.add('active');\r\n        setTimeout(() => {\r\n          memberModal.classList.add('active');\r\n        }, 10);\r\n        \r\n        document.body.style.overflow = 'hidden';\r\n      }\r\n\r\n      function closeModal() {\r\n        memberModal.classList.remove('active');\r\n        setTimeout(() => {\r\n          modalOverlay.classList.remove('active');\r\n          document.body.style.overflow = 'auto';\r\n        }, 300);\r\n      }\r\n\r\n      \/\/ apply search filter\r\n      function applyFilter(q){\r\n        if(!q) {\r\n          state.filtered = state.data.slice();\r\n        } else {\r\n          const s = q.toLowerCase();\r\n          state.filtered = state.data.filter(r=> r.join(' ').toLowerCase().includes(s) );\r\n        }\r\n        state.page = 1; \/\/ reset page\r\n        updateAll();\r\n      }\r\n\r\n      \/\/ apply shares filter\r\n      function filterByShares(shares) {\r\n        state.filtered = state.data.filter(r => parseInt(r[2]) === parseInt(shares));\r\n        state.page = 1;\r\n        state.activeFilter = shares;\r\n        \r\n        \/\/ Update UI to show active filter\r\n        activeFilterEl.style.display = 'flex';\r\n        filterTextEl.textContent = `\u0639\u0631\u0636 \u0627\u0644\u0623\u0639\u0636\u0627\u0621 \u0628\u0640 ${shares} \u0633\u0647\u0645`;\r\n        \r\n        updateAll();\r\n      }\r\n\r\n      \/\/ clear filter\r\n      function clearFilter() {\r\n        state.filtered = state.data.slice();\r\n        state.page = 1;\r\n        state.activeFilter = null;\r\n        activeFilterEl.style.display = 'none';\r\n        \r\n        \/\/ Remove active class from all stat cards\r\n        document.querySelectorAll('.stat-card').forEach(card => {\r\n          card.classList.remove('active');\r\n        });\r\n        \r\n        updateAll();\r\n      }\r\n\r\n      \/\/ sort toggle\r\n      function sortBy(col){\r\n        if(state.sortCol === col) state.sortDir = (state.sortDir==='asc'?'desc':'asc');\r\n        else{ state.sortCol = col; state.sortDir = 'asc'; }\r\n        const isNum = state.data.every(r=> !isNaN(Number(r[col])));\r\n        state.data.sort((a,b)=>{\r\n          const A = a[col]; const B = b[col];\r\n          if(isNum) return state.sortDir==='asc' ? (Number(A)-Number(B)) : (Number(B)-Number(A));\r\n          return state.sortDir==='asc' ? A.localeCompare(B,'ar') : B.localeCompare(A,'ar');\r\n        });\r\n        applyFilter(search.value.trim()); \/\/ re-filter after sort\r\n      }\r\n\r\n      \/\/ update views\r\n      function updateAll(){\r\n        renderTable();\r\n        renderCards();\r\n        renderPagination();\r\n        updateSortArrows();\r\n        renderStats();\r\n      }\r\n\r\n      function updateSortArrows(){\r\n        theadCols.forEach(th=>{\r\n          const col = Number(th.getAttribute('data-col'));\r\n          const arrow = th.querySelector('.arrow');\r\n          if (arrow) {\r\n            arrow.innerHTML = (state.sortCol===col ? (state.sortDir==='asc' ? '<i class=\"fas fa-arrow-up\"><\/i>' : '<i class=\"fas fa-arrow-down\"><\/i>') : '<i class=\"fas fa-arrows-alt-v\"><\/i>');\r\n          }\r\n        });\r\n      }\r\n\r\n      \/\/ initial render\r\n      updateAll();\r\n\r\n      \/\/ events\r\n      search.addEventListener('input', e=>{ \r\n        applyFilter(e.target.value.trim()); \r\n      });\r\n      \r\n      tableBtn.addEventListener('click', ()=>{ \r\n        state.view='table'; \r\n        localStorage.setItem('mw_view','table'); \r\n        showView(); \r\n      });\r\n      \r\n      cardsBtn.addEventListener('click', ()=>{ \r\n        state.view='cards'; \r\n        localStorage.setItem('mw_view','cards'); \r\n        showView(); \r\n      });\r\n\r\n      function showView(){\r\n        if(state.view==='cards'){\r\n          document.getElementById('tableWrap').style.display='none';\r\n          cardsEl.style.display='grid';\r\n          cardsEl.setAttribute('aria-hidden','false');\r\n          tableBtn.classList.remove('active'); \r\n          cardsBtn.classList.add('active');\r\n        } else {\r\n          document.getElementById('tableWrap').style.display='block';\r\n          cardsEl.style.display='none';\r\n          cardsEl.setAttribute('aria-hidden','true');\r\n          tableBtn.classList.add('active'); \r\n          cardsBtn.classList.remove('active');\r\n        }\r\n      }\r\n      showView();\r\n\r\n      \/\/ header sort\r\n      theadCols.forEach(th=> {\r\n        if (th.getAttribute('data-col') !== '0') { \/\/ Don't add sort to serial number column\r\n          th.addEventListener('click', ()=> sortBy(Number(th.getAttribute('data-col'))));\r\n        }\r\n      });\r\n\r\n      \/\/ pagination click (event delegation)\r\n      paginationEl.addEventListener('click', e=>{\r\n        const btn = e.target.closest('button[data-page]');\r\n        if(!btn) return;\r\n        const p = Number(btn.getAttribute('data-page'));\r\n        state.page = p;\r\n        updateAll();\r\n      });\r\n\r\n      \/\/ modal events\r\n      modalClose.addEventListener('click', closeModal);\r\n      modalOverlay.addEventListener('click', (e) => {\r\n        if (e.target === modalOverlay) {\r\n          closeModal();\r\n        }\r\n      });\r\n\r\n      \/\/ keyboard accessibility for modal\r\n      document.addEventListener('keydown', (e) => {\r\n        if (e.key === 'Escape' && modalOverlay.classList.contains('active')) {\r\n          closeModal();\r\n        }\r\n      });\r\n\r\n      \/\/ card details click (event delegation)\r\n      document.addEventListener('click', e=>{\r\n        const cta = e.target.closest('.cta');\r\n        if(!cta) return;\r\n        \r\n        const memberId = parseInt(cta.getAttribute('data-member-id'));\r\n        const start = (state.page-1)*state.perPage;\r\n        const memberData = state.filtered[start + memberId];\r\n        \r\n        if (memberData) {\r\n          openModal(memberData);\r\n        }\r\n      });\r\n\r\n      \/\/ share stats filter click\r\n      document.addEventListener('click', e=>{\r\n        const statCard = e.target.closest('.stat-card');\r\n        if(!statCard) return;\r\n        \r\n        \/\/ Remove active class from all stat cards\r\n        document.querySelectorAll('.stat-card').forEach(card => {\r\n          card.classList.remove('active');\r\n        });\r\n        \r\n        \/\/ Add active class to clicked card\r\n        statCard.classList.add('active');\r\n        \r\n        const shares = statCard.getAttribute('data-shares');\r\n        if (shares) {\r\n          filterByShares(shares);\r\n        } else if (statCard.id === 'totalMembersCard' || statCard.id === 'totalSharesCard') {\r\n          clearFilter();\r\n        }\r\n      });\r\n\r\n      \/\/ clear filter button\r\n      clearFilterBtn.addEventListener('click', clearFilter);\r\n\r\n      \/\/ responsive: re-render cards on resize (keeps layout tidy)\r\n      window.addEventListener('resize', ()=>{ renderCards(); });\r\n\r\n    })();\r\n  <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u0628\u064a\u0627\u0646 \u0623\u0639\u0636\u0627\u0621 \u0627\u0644\u062c\u0645\u0639\u064a\u0629 \u0627\u0644\u0639\u0645\u0648\u0645\u064a\u0629 \u0661\u0664 \u0631\u0628\u064a\u0639 \u0627\u0644\u0623\u0648\u0644 \u0661\u0664\u0664\u0667 \u0647\u0640 0 \u0625\u062c\u0645\u0627\u0644\u064a \u0627\u0644\u0623\u0639\u0636\u0627\u0621 0 \u0625\u062c\u0645\u0627\u0644\u064a \u0627\u0644\u0623\u0633\u0647\u0645 # \u0627\u0644\u0627\u0633\u0645 \u2195 \u0639\u062f\u062f \u0627\u0644\u0623\u0633\u0647\u0645 \u2195 AA \u0627\u0633\u0645 \u0627\u0644\u0639\u0636\u0648 \u0627\u0644\u0627\u0633\u0645 \u0627\u0644\u0643\u0627\u0645\u0644 &#8211; \u0639\u062f\u062f \u0627\u0644\u0623\u0633\u0647\u0645 &#8211; \u062a\u0627\u0631\u064a\u062e \u0627\u0644\u0627\u0646\u0636\u0645\u0627\u0645 &#8211;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"class_list":["post-1438","page","type-page","status-publish","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/hadarat-hail.org.sa\/index.php?rest_route=\/wp\/v2\/pages\/1438","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hadarat-hail.org.sa\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/hadarat-hail.org.sa\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/hadarat-hail.org.sa\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hadarat-hail.org.sa\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1438"}],"version-history":[{"count":67,"href":"https:\/\/hadarat-hail.org.sa\/index.php?rest_route=\/wp\/v2\/pages\/1438\/revisions"}],"predecessor-version":[{"id":2528,"href":"https:\/\/hadarat-hail.org.sa\/index.php?rest_route=\/wp\/v2\/pages\/1438\/revisions\/2528"}],"wp:attachment":[{"href":"https:\/\/hadarat-hail.org.sa\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1438"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}