/* تخصيص حاوية جدول الأحداث فقط */
#events-table-container .tags-table-scroll {
  max-height: 70vh;
  overflow-y: auto;
}

/* الجدول table-layout:fixed وأعرض أعمدته المعلنة في colgroup تبلغ نحو
 * 1117px قبل عمود المحتوى. وwidth:100% كان يمنعه من تجاوز حاويته، فلا
 * يجد المتصفح الا سحق اعمدة الى **صفر بكسل**: عند 891px تنهار
 * «المحتوى» و«التفاصيل» و«الإنشاء» فيصير الجدول عديم الفائدة، والعمود
 * المنهار يبقى قابلا للفرز من رأس لا يُرى.
 *
 * min-width:max-content يجعل الجدول بعرض ما تحتاجه اعمدته فعلا،
 * فيفيض على الحاوية — وفيها overflow-x:auto اصلا — فيُمرَّر افقيا بدل
 * ان ينهار. (كشفه المستخدم بجولة على الانتاج 2026-08-27) */
#events-table-container .tags-table {
  min-width: max-content;
}
/* ===== Design Tokens — Idrak Brand Identity ===== */
:root {
  --ff: 'Tajawal', sans-serif;
  --ff-content: 'Tajawal', sans-serif;
  --mono: 'Tajawal', sans-serif;

  /* Brand colours */
  --brand-blue-dark:   #446378;
  --brand-blue:        #537B91;
  --brand-gold-dark:   #B29A70;
  --brand-gold:        #CDB380;
  --brand-blue-light:  #e8f0f5;
  --brand-gold-light:  #f5f0e8;

  --color-bg-primary:    #ffffff;
  --color-bg-secondary:  #FAFAF8;   /* warm beige off-white */
  --color-bg-tertiary:   #F9F8F6;   /* warm page bg — very light */
  --color-text-primary:  #1e2d38;   /* very dark blue-gray */
  --color-text-secondary:#3A5567;   /* darker brand blue */
  --color-text-tertiary: #7A8F9E;   /* muted brand blue */
  --color-border-tertiary:  rgba(178,154,112,0.25);
  --color-border-secondary: rgba(68,99,120,0.20);
  /* الرمز العام: كان مستعملا في 12 موضعا وغير معرف في اي ملف، فيبطل
     اختصار border كله وترسم الحقول بلا حد — ومنها حقل العنوان المطلوب
     في نموذج اضافة حدث (مراجعة مظهر 2026-08-25). قيمته حد الادخال
     القياسي نفسه. */
  --color-border:           rgba(68,99,120,0.20);

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 20px;

  /* ── Type scale (base = 15px on html) ── */
  --fs-2xs:  0.667rem;   /* 10px — أصغر metadata */
  --fs-xs:   0.733rem;   /* 11px — footer, pk */
  --fs-sm:   0.8rem;     /* 12px — تاغات، labels صغيرة */
  --fs-base: 0.867rem;   /* 13px — محتوى البطاقة، inputs */
  --fs-nav:  0.933rem;   /* 14px — عناصر القوائم */
  --fs-md:   1rem;       /* 15px — نص رئيسي */

  /* Default accent (used when no data-etype match) */
  --card-accent: #B29A70;
  --card-accent-bg: transparent;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg-primary:    #1a2530;
    --color-bg-secondary:  #212f3d;
    --color-bg-tertiary:   #172028;
    --color-text-primary:  #e8f0f5;
    --color-text-secondary:#8aa3b1;
    --color-text-tertiary: #537B91;
    --color-border-tertiary:  rgba(83,123,145,0.18);
    --color-border-secondary: rgba(83,123,145,0.35);
    --color-border:           rgba(83,123,145,0.35);
  }
}

/* ===== Template accent colours (via data-etempl attribute) ===== */
[data-etempl="عسكري أمني"]       { --card-accent: #C0392B; --card-accent-bg: #FDECEA; }
[data-etempl="سياسي"]            { --card-accent: #446378; --card-accent-bg: #e2edf3; }
[data-etempl="دولي"]             { --card-accent: #3A5567; --card-accent-bg: #dfe9ef; }
[data-etempl="محلي"]             { --card-accent: #537B91; --card-accent-bg: #e8f0f5; }
[data-etempl="اقتصادي"]          { --card-accent: #B29A70; --card-accent-bg: #F5F0E8; }
[data-etempl="إنساني"]           { --card-accent: #1D8A6E; --card-accent-bg: #E2F3EE; }
[data-etempl="لاجئون"]           { --card-accent: #2C6E8A; --card-accent-bg: #e0f0f7; }
[data-etempl="مظاهرات إضرابات"]   { --card-accent: #D4851F; --card-accent-bg: #FDF0E0; }
[data-etempl="أخرى"]             { --card-accent: #7A8F9E; --card-accent-bg: #EEF2F5; }

@media (prefers-color-scheme: dark) {
  [data-etempl="عسكري أمني"]     { --card-accent-bg: rgba(192,57,43,0.08); }
  [data-etempl="سياسي"]          { --card-accent-bg: rgba(68,99,120,0.08); }
  [data-etempl="دولي"]           { --card-accent-bg: rgba(58,85,103,0.08); }
  [data-etempl="محلي"]           { --card-accent-bg: rgba(83,123,145,0.08); }
  [data-etempl="اقتصادي"]        { --card-accent-bg: rgba(178,154,112,0.08); }
  [data-etempl="إنساني"]         { --card-accent-bg: rgba(29,138,110,0.08); }
  [data-etempl="لاجئون"]         { --card-accent-bg: rgba(44,110,138,0.08); }
  [data-etempl="مظاهرات إضرابات"] { --card-accent-bg: rgba(212,133,31,0.08); }
  [data-etempl="أخرى"]           { --card-accent-bg: rgba(122,143,158,0.08); }
}

/* ===== Layout Reset ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 15px;
}

body {
  height: 100%;
  overflow: hidden;
  font-family: var(--ff);
  background: var(--color-bg-tertiary);
  color: var(--color-text-primary);
  font-size: var(--fs-md);
}

button,
input,
select,
option,
textarea {
  font-family: var(--ff);
}

a { text-decoration: none; color: inherit; }
li { list-style: none; }

/* Text selection */
::selection { background: rgba(178,154,112,0.25); color: var(--color-text-primary); }

/* Custom scrollbar */
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: var(--color-bg-secondary); }
::-webkit-scrollbar-thumb { background: var(--brand-gold-dark); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--brand-blue-dark); }

/* ===== Main content area ===== */
main {
  position: fixed;
  top: 94px;   /* 52px topbar + 42px navbar11 */
  left: 0;
  right: 0;
  bottom: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-top: 12px;
  padding-left: 14px;
  padding-right: 14px;
}

/* No navbar11 (login page): main starts below topbar only */
body:not(:has(.navbar11)) main {
  top: 52px;
}

/* Events page: remove top padding so toolbar is flush with navbar */
main:has(.events-toolbar),
main:has(#events-persistent-bar) {
  padding-top: 0;
}

/* Tags page: lock main scroll, keep scrolling inside tags table panel only */
main:has(#tags-container),
main:has(#entities-container),
main:has(#individuals-container),
main:has(#locations-container),
main:has(#events-table-container) {
  overflow: hidden;
  padding-top: 0;
}
#tags-container,
#entities-container,
#individuals-container,
#locations-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.tags-sticky-header {
  position: relative;
  top: auto;
  flex: 0 0 auto;
  z-index: 15;
  background: var(--color-bg-tertiary);
  padding: 10px 16px 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.tags-table-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: auto;
  padding: 0 16px 12px;
}

.tags-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  direction: rtl;
}

.tags-top-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tags-add-btn {
  padding: 4px 10px;
  border: 1px solid var(--brand-gold-dark);
  border-radius: 6px;
  background: var(--brand-gold-light);
  color: var(--brand-blue-dark);
  font-size: var(--fs-xs);
  font-family: 'Tajawal', sans-serif;
  cursor: pointer;
}

.new-tag-form {
  display: grid;
  grid-template-columns: 1.2fr .8fr .9fr 1fr 1fr auto auto;
  gap: 6px;
  margin-bottom: 8px;
  direction: rtl;
}

.new-tag-input,
.new-tag-select {
  width: 100%;
  box-sizing: border-box;
  padding: 5px 8px;
  border: 1px solid var(--color-border-secondary);
  border-radius: 6px;
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  font-size: var(--fs-sm);
  font-family: 'Tajawal', sans-serif;
  text-align: right;
}

.new-tag-save,
.new-tag-cancel {
  padding: 5px 10px;
  border-radius: 6px;
  font-size: var(--fs-sm);
  font-family: 'Tajawal', sans-serif;
  cursor: pointer;
  white-space: nowrap;
}

.new-tag-save {
  border: 1px solid var(--brand-blue-dark);
  background: var(--brand-blue-dark);
  color: #fff;
}

.new-tag-cancel {
  border: 1px solid var(--color-border-secondary);
  background: var(--color-bg-secondary);
  color: var(--color-text-secondary);
}

.tags-meta-sm {
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
}

.tags-meta-xs {
  font-size: var(--fs-xs);
  color: var(--color-text-secondary);
}

.tags-search-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  direction: rtl;
}

.tags-search-input {
  flex: 1;
  padding: 5px 10px;
  border: 1px solid var(--color-border-secondary);
  border-radius: 6px;
  font-size: var(--fs-sm);
  font-family: 'Tajawal', sans-serif;
  text-align: right;
  direction: rtl;
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
}

.qcol-dropdown {
  position: relative;
}

.qcol-toggle {
  padding: 5px 8px;
  border: 1px solid var(--color-border-secondary);
  border-radius: 6px;
  font-size: var(--fs-sm);
  font-family: 'Tajawal', sans-serif;
  background: var(--color-bg-secondary);
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 3px;
}

.qcol-panel {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 60;
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-secondary);
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  padding: 8px 10px;
  min-width: 140px;
  direction: rtl;
  margin-top: 4px;
}

.qcol-option-label {
  display: block;
  padding: 3px 0;
  font-size: var(--fs-sm);
  cursor: pointer;
}

.qcol-option-label input[type="checkbox"] {
  accent-color: var(--brand-gold-dark);
}

.tags-filter-select {
  padding: 5px 8px;
  border: 1px solid var(--color-border-secondary);
  border-radius: 6px;
  font-size: var(--fs-sm);
  font-family: 'Tajawal', sans-serif;
  background: var(--color-bg-secondary);
  color: var(--color-text-secondary);
}

.af-views-bar {
  display: none;
  direction: rtl;
  margin-bottom: 8px;
}

.tags-wrap-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}

.tags-wrap-toggle input[type="checkbox"] {
  accent-color: var(--brand-gold-dark);
}

.tags-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  direction: ltr;
  border: 1px solid var(--color-border-tertiary);
  border-radius: 6px;
}

/* Vertical separators for all table cells */
.tags-table thead th,
.tags-table tbody td {
  border-right: 1px solid rgba(68, 99, 120, 0.32);
}
.tags-table thead th:last-child,
.tags-table tbody td:last-child {
  border-right: none;
}

.tags-head-row {
  border-bottom: 1px solid var(--color-border-tertiary);
}

.tags-th-c2 {
  text-align: center;
  padding: 4px 2px;
}

.tags-th-c6 {
  text-align: center;
  padding: 4px 6px;
}

.tags-th-r6 {
  text-align: right;
  padding: 4px 6px;
}

.tags-th-r10 {
  text-align: right;
  padding: 4px 10px;
}

.tags-th-select {
  width: 24px;
  text-align: center;
}

/* Sticky thead — top value set by JS after render */
#tags-container thead th,
#entities-container thead th,
#individuals-container thead th,
#locations-container thead th,
#events-table-container thead th {
  position: sticky;
  top: 0;
  z-index: 12;
}

/* Table pages: make table panel own the scrolling, not the whole page */
#mainlistdiv:has(#tags-container),
#mainlistdiv:has(#entities-container),
#mainlistdiv:has(#individuals-container),
#mainlistdiv:has(#locations-container),
#mainlistdiv:has(#events-table-container) {
  height: 100%;
  min-height: 0;
  margin-bottom: 0 !important;
  overflow: hidden;
}

/* ===== Background watermark ===== */
.background1 {
  position: fixed;
  opacity: 3%;
  display: block;
  z-index: -20;
  user-select: none;
  width: 70%;
  right: 15%;
  top: 15%;
}

/* ===== Topbar (navbar1) ===== */
.navbar1 {
  position: fixed;
  top: 0;
  width: 100%;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  background: linear-gradient(135deg, #3A5567 0%, var(--brand-blue-dark) 50%, #3A5567 100%);
  border-bottom: 2px solid var(--brand-gold-dark);
  z-index: 100;
}

/* Three-zone layout */
.nav-zone { display: flex; align-items: center; }
.nav-zone-right { flex: 0 0 auto; }
.nav-zone-center {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.nav-zone-left {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
}

.navbrand1 { display: inline-flex; align-items: center; gap: 9px; }
/* اسم العلامة بجانب الشعار — يظهر حين لا تحمل الصورة الكلمة
   (brand.show_name). ابيض كالشعار: هذا الشريط داكن دائما، والصورة
   نفسها تُقلَب الى الابيض بـfilter اسفله. */
.navbrand1-text {
  font-size: 1.05rem; font-weight: 700; letter-spacing: .5px;
  color: #fff; white-space: nowrap;
}
/* وسم مرحلي بجانب الاسم («قيد التطوير»). اخفّ من الاسم وزنا وحجما
   وعتامةً: يُقرأ حين يُبحث عنه ولا ينازع الاسم. ولا يظهر اصلا حين
   يكون brand.status فارغا. */
.navbrand1-status {
  font-size: .72rem; font-weight: 500; color: #fff; opacity: .62;
  white-space: nowrap; margin-inline-start: -3px;
}
@media (max-width: 520px) { .navbrand1-status { display: none; } }
.navbrand1 img {
  width: auto; height: 35px;
  filter: brightness(0) invert(1);
  transition: opacity .15s;
}
.navbrand1:hover img { opacity: 0.85; }

.navitem1 {
  display: inline-flex;
  align-items: center;
  position: relative;
  cursor: pointer;
  font-weight: 500;
  font-size: var(--fs-nav);
  white-space: nowrap;
  color: rgba(255,255,255,0.72);
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  transition: background .15s, color .15s, border-color .15s;
  border-bottom: 2px solid transparent;
  gap: 4px;
}
.navitem1:hover { color: #ffffff; border-bottom-color: var(--brand-gold); }
.navitem1 a { color: inherit; }
.navitem1.nav-active { color: #ffffff; border-bottom-color: var(--brand-gold); }

.nav-arrow {
  font-size: 0.65em; opacity: 0.6;
  transition: transform .25s ease;
  display: inline-block;
}
.nav-dropdown.is-open > span > .nav-arrow,
.nav-dropdown.is-open > .nav-user-trigger > .nav-arrow { transform: rotate(180deg); }

/* ===== Filter / secondary bar (navbar11) ===== */
/* ملاحظة 2026-05-12: GPU/compositor hacks (translate3d, will-change,
   backface-visibility) أُزيلت — كانت تُسبِّب layer شفاف على Chrome
   موبايل (الشريط يستقبل الضغط لكنه غير مرئي). */
.navbar11 {
  position: fixed;
  top: 52px;
  inset-inline: 0;        /* RTL-safe: maps to left:0/right:0 correctly */
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  /* Reset UA <ul> defaults that were pushing items sideways in RTL. */
  margin: 0;
  padding: 0 1.25rem;
  list-style: none;
  background: var(--color-bg-primary);
  border-bottom: 1px solid var(--color-border-tertiary);
  overflow-x: auto;
  box-sizing: border-box;
  z-index: 90;
}
/* Hide horizontal scrollbar but keep scrolling functional. Without
   this, Chrome reserves ~7px for the scrollbar on the start edge in
   RTL, which visually offsets the centered items. */
.navbar11::-webkit-scrollbar { display: none; }
.navbar11 { scrollbar-width: none; }

/* Chip style for navbar11 items */
.navbar11 .navitem1 {
  padding: 3px 14px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  border: 0.5px solid var(--color-border-secondary);
  background: transparent;
  color: var(--brand-blue-dark);
  margin: 0;
  transition: all .2s;
}
.navbar11 .navitem1:hover {
  background: var(--brand-blue-dark);
  color: #ffffff;
  border-color: var(--brand-blue-dark);
}
.navbar11 .navitem1 a { color: inherit; }
.events-add-btn {
  padding: 4px 12px;
  border: 1px solid var(--brand-gold-dark);
  border-radius: 6px;
  background: var(--brand-gold-light);
  color: var(--brand-blue-dark);
  font-size: var(--fs-xs);
  font-family: var(--ff);
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.events-add-btn:hover {
  background: var(--brand-gold-dark);
  color: #fff;
}
.navbar11 .navitem1.nav11-active {
  background: var(--brand-blue-dark);
  color: #ffffff;
  border-color: var(--brand-blue-dark);
}

/* Mobile: لا center (العَناصر تَفيض على الجانِبَين فلا يُمكِن الوُصول
   إليها). flex-start + padding أَضيق + chip أَصغَر. هذه القَواعِد بَعد
   كل قَواعِد .navbar11 لِيَتَغَلَّب الـ cascade على الإعدادات العامّة
   (نَفس specificity → الـ later wins). */
@media (max-width: 768px) {
  .navbar11 {
    justify-content: flex-start !important;
    padding: 0 0.5rem !important;
    gap: 6px !important;
    /* البار يكبر ليتسع أهداف لمس 44px؛ main.top يُضبط تبعا أدناه */
    height: 50px !important;
  }
  .navbar11 .navitem1 {
    padding: 0 14px !important;
    font-size: var(--fs-sm) !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    min-height: 40px !important;
  }
  /* الرابط يملأ الشيب فتصير كل مساحته قابلة للمس (كان 13px فقط) */
  .navbar11 .navitem1 a {
    display: flex; align-items: center;
    min-height: 40px; padding: 0 2px;
  }
  /* main.top ثابتة 94px (52 topbar + 42 navbar11) — تُحدَّث للبار الأطول.
     للصفحات التي فيها الشريط الثانوي وحدها: كانت تُطبَّق على كل الصفحات
     فتترك فراغ 50px تحت الترويسة حيث لا شريط ثانوي (بقية الصفحات على
     52px — body:not(:has(.navbar11)) main اعلاه). */
  body:has(.navbar11) main { top: 102px !important; }  /* 52 + 50 */
}

/* ===== Events toolbar ===== */
#events-persistent-bar {
  width: 100%;
  padding: 17px 0 6px;
  direction: rtl;
  position: sticky;
  top: -1px;
  z-index: 50;
  background: #F1EFE9;
  border-bottom: 1px solid var(--color-border-tertiary);
  margin-bottom: 10px;
}
.events-toolbar {
  width: 100%;
  padding: 17px 0 6px;
  direction: rtl;
  position: sticky;
  top: -1px;
  z-index: 50;
  background: #F1EFE9;
  border-bottom: 1px solid var(--color-border-tertiary);
  margin-bottom: 10px;
}
.events-toolbar-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  width: 70%;
  max-width: 820px;
  margin: 0 auto;
}
.events-search-input {
  flex: 1;
  min-width: 100px;
  padding: 4px 10px;
  border: 1px solid var(--color-border-secondary);
  border-radius: 6px;
  font-size: var(--fs-xs);
  font-family: var(--ff);
  text-align: right;
  direction: rtl;
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
  height: 26px;
}
.events-search-input:focus {
  outline: none;
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 2px rgba(83,123,145,0.15);
}
.events-toolbar-select {
  padding: 2px 6px;
  border: 1px solid var(--color-border-secondary);
  border-radius: 6px;
  font-size: var(--fs-xs);
  font-family: var(--ff);
  background: var(--color-bg-secondary);
  color: var(--color-text-secondary);
  cursor: pointer;
  height: 26px;
}
.events-toolbar-select:focus {
  outline: none;
  border-color: var(--brand-blue);
}
.events-toolbar-addbtn {
  appearance: none; -webkit-appearance: none;
  border: 1px solid var(--brand-blue-dark);
  background: linear-gradient(135deg, #3A5567 0%, var(--brand-blue-dark) 50%, #3A5567 100%);
  color: #fff;
  padding: 2px 6px;
  min-width: 24px;
  height: 26px;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-shadow: none;
  outline: none;
  transition: opacity .15s;
}
.events-toolbar-addbtn:hover { opacity: .85; }
.events-toolbar-count {
  text-align: center;
  font-size: var(--fs-s);
  color: var(--color-text-tertiary);
  font-family: var(--ff);
  margin-top: 6px;
  width: 70%;
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}
.events-toolbar-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
  padding: 0 2px;
  font-size: var(--fs-2xs);
  color: var(--color-text-tertiary);
  font-family: var(--ff);
}
.events-toolbar-info .events-add-btn {
  padding: 2px 8px;
  font-size: var(--fs-2xs);
  border-radius: 5px;
}
/* Card action buttons — top left next to kebab */
.card-action-buttons {
  position: absolute;
  top: 8px;
  left: 36px;
  z-index: 9;
  display: flex;
  align-items: center;
  opacity: 0;
  transition: opacity .15s ease;
}
.recordcontainer1:hover .card-action-buttons,
.event-edit-shell:not(.is-readonly) .card-action-buttons {
  opacity: 1;
}

/* Event card action buttons */
.card-btn {
  appearance: none; -webkit-appearance: none;
  color: #fff;
  padding: 2px 6px;
  min-width: 24px;
  height: 22px;
  border-radius: 5px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-shadow: none;
  outline: none;
  font-size: 11px;
}
.card-btn .material-icons { font-size: 14px; line-height: 1; }
.card-btn-blue {
  border: 1px solid var(--brand-blue-dark);
  background: linear-gradient(135deg, #3A5567 0%, var(--brand-blue-dark) 50%, #3A5567 100%);
}
.card-btn-gold {
  border: 1px solid var(--brand-gold-dark);
  background: linear-gradient(135deg, #c4a96a 0%, var(--brand-gold-dark) 50%, #c4a96a 100%);
}
.card-btn:hover { opacity: .85; }
.tag-item-wrap { display: inline-flex; align-items: center; gap: 0; position: relative; }

/* Logs popup */
.logs-popup {
  display: none;
  position: absolute;
  bottom: 100%;
  left: 1.15rem;
  z-index: 200;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-secondary);
  border-radius: 6px;
  padding: 4px 8px;
  max-width: 340px;
  max-height: 60vh;            /* السطر المفتوح على تعديله قد يطول */
  overflow-y: auto;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
}

/* Custom confirm dialog */
.tei-confirm-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.75);
  z-index: 600; display: flex; align-items: center; justify-content: center;
}
.tei-confirm-box {
  background: var(--color-bg-primary); border-radius: 10px;
  width: min(360px, 90vw); padding: 1.25rem 1.5rem;
  box-shadow: 0 12px 40px rgba(0,0,0,.4); direction: rtl;
  font-family: var(--ff);
}
.tei-confirm-msg {
  font-size: var(--fs-sm); color: var(--color-text-primary);
  margin-bottom: 1rem; line-height: 1.6;
}
.tei-confirm-actions {
  display: flex; gap: 8px; justify-content: flex-end;
}
.tei-confirm-actions button {
  padding: 6px 18px; border-radius: 6px; cursor: pointer;
  font-size: var(--fs-sm); font-family: var(--ff); border: none;
}
.tei-confirm-cancel {
  background: transparent; color: var(--color-text-secondary);
  border: 1px solid var(--color-border-secondary) !important;
}
.tei-confirm-ok {
  background: #c0392b; color: #fff;
}
.tei-confirm-ok:hover { opacity: .85; }

/* Toast notification */
.tei-toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  z-index: 700; padding: 8px 20px; border-radius: 8px;
  font-size: var(--fs-sm); font-family: var(--ff);
  color: #fff; box-shadow: 0 4px 16px rgba(0,0,0,.2);
  animation: toastIn .3s ease-out;
}
.tei-toast-success { background: #27ae60; }
.tei-toast-error { background: #c0392b; }
.tei-toast-info { background: var(--brand-blue-dark); }
.tei-toast-warning { background: #F57F17; top: 90px; bottom: auto; animation: toastInDown .3s ease-out; }
@keyframes toastIn { from { opacity:0; transform:translateX(-50%) translateY(12px); } to { opacity:1; transform:translateX(-50%) translateY(0); } }
@keyframes toastInDown { from { opacity:0; transform:translateX(-50%) translateY(-12px); } to { opacity:1; transform:translateX(-50%) translateY(0); } }

/* Read-only card meta */
.card-meta-readonly {
  pointer-events: none;
  opacity: 0.7;
}
.card-meta-readonly span {
  padding: 4px 8px;
}
.card-content-readonly {
  user-select: text;
}
@media (max-width: 768px) {
  .events-toolbar-row { gap: 4px; width: 96%; }
  .events-toolbar-count { width: 96%; }
  .events-search-input { min-width: 80px; }
}

/* ===== Dropdown menus ===== */
.nav-dropdown { position: relative; }

.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background: var(--brand-blue-dark);
  border: none;
  border-top: 2px solid var(--brand-gold);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  list-style: none;
  padding: 4px 0;
  margin: 0;
  min-width: 190px;
  z-index: 200;
  box-shadow: 0 8px 28px rgba(30,45,56,0.35);
  white-space: nowrap;
  /* hidden + animated */
  visibility: hidden;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity .2s ease, transform .2s ease, visibility 0s .2s;
}
.nav-dropdown:hover > .nav-dropdown-menu,
.nav-dropdown.is-open > .nav-dropdown-menu {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  transition: opacity .2s ease, transform .2s ease, visibility 0s 0s;
}

.nav-dropdown-menu li {
  padding: 0; margin: 0; display: block; position: relative;
}
.nav-dropdown-menu li a,
.nav-dropdown-menu li form.nav-logout-form button,
.nav-dropdown-menu li > span.nav-sub-label {
  display: block;
  padding: 7px 14px;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: rgba(255,255,255,0.85);
  cursor: pointer;
  transition: background .12s, color .12s, padding-right .15s;
}
.nav-dropdown-menu li a:hover,
.nav-dropdown-menu li form.nav-logout-form button:hover,
.nav-dropdown-menu li > span.nav-sub-label:hover {
  background: var(--brand-blue);
  color: #ffffff;
  padding-right: 20px;
}
/* زر الخروج داخل نموذج POST (Django 5 ألغى الخروج عبر GET) — يرث مظهر
   بنود القائمة عبر القواعد أعلاه، وهنا نصفّر سمات الزر الافتراضية. */
.nav-dropdown-menu li form.nav-logout-form { margin: 0; }
.nav-dropdown-menu li form.nav-logout-form button {
  width: 100%; text-align: right; background: none; border: none;
  font-family: inherit;
}
.nav-danger { color: #ef6b6b !important; }
.nav-danger:hover { background: rgba(192,57,43,0.2) !important; }
.nav-sep { height: 1px; background: rgba(255,255,255,0.1); margin: 4px 0; }

/* Sub-menu (second level) */
.nav-sub-menu {
  position: absolute;
  top: 0;
  right: 100%;
  background: var(--brand-blue-dark);
  border: none;
  border-right: 2px solid var(--brand-gold);
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  list-style: none;
  padding: 4px 0;
  margin: 0;
  min-width: 170px;
  z-index: 201;
  box-shadow: -4px 6px 20px rgba(68,99,120,0.25);
  white-space: nowrap;
  /* hidden + animated */
  visibility: hidden;
  opacity: 0;
  transform: translateX(8px);
  transition: opacity .2s ease, transform .2s ease, visibility 0s .2s;
}
.nav-dropdown-menu li:hover > .nav-sub-menu,
.nav-dropdown.is-open > .nav-sub-menu {
  visibility: visible;
  opacity: 1;
  transform: translateX(0);
  transition: opacity .2s ease, transform .2s ease, visibility 0s 0s;
}
.nav-sub-menu li a {
  display: block;
  padding: 7px 14px;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: rgba(255,255,255,0.85);
}
.nav-sub-menu li a:hover {
  background: var(--brand-blue);
  color: #ffffff;
  padding-right: 20px;
}
/* User dropdown: sub-menus open to the left (avoid overflow on RTL left-side menu) */
.nav-user-menu .nav-sub-menu {
  right: auto;
  left: 100%;
  border-right: none;
  border-left: 2px solid var(--brand-gold);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  box-shadow: 4px 6px 20px rgba(68,99,120,0.25);
}

/* ===== User dropdown ===== */
.nav-user-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
  color: rgba(255,255,255,0.8);
  font-size: var(--fs-sm);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  transition: color .15s, background .15s;
}
.nav-user-trigger:hover { color: #fff; background: rgba(255,255,255,0.08); }
.nav-user-icon { font-size: 20px; color: var(--brand-gold); }
.nav-user-name { font-weight: 500; letter-spacing: 0.02em; }
.nav-user-menu { left: 0; right: auto; min-width: 150px; }

/* Login link */
.nav-login-link {
  display: inline-flex; align-items: center;
  color: rgba(255,255,255,0.65);
  transition: color .15s; padding: 4px;
}
.nav-login-link:hover { color: var(--brand-gold); }
.nav-login-link .material-icons { font-size: 22px; }

/* ===== Notification bell & panel ===== */
.nav-notif-wrapper { position: relative; }
.nav-notif-trigger {
  display: inline-flex; align-items: center;
  cursor: pointer; user-select: none;
  position: relative; padding: 4px;
  border-radius: var(--radius-sm);
  transition: background .15s;
}
.nav-notif-trigger:hover { background: rgba(255,255,255,0.08); }
#notif-icon { font-size: 1.4em; color: var(--brand-gold); transition: color .15s; }
#notif-icon:hover { color: var(--brand-gold-dark); }
#notif-badge-wrap { position: absolute; top: -2px; right: 0; }

#notif-panel {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0; transform: none;
  width: 230px; max-height: 420px;
  overflow-y: auto;
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-tertiary);
  border-top: 2px solid var(--brand-gold);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  box-shadow: 0 6px 20px rgba(30,45,56,0.18);
  color: var(--color-text-primary);
  z-index: 9999;
  animation: navSlideDown .2s ease;
}
#notif-panel.notif-open { display: block; }

.notif-panel-header {
  padding: 6px 10px;
  border-bottom: 1px solid var(--color-border-tertiary);
  display: flex; justify-content: space-between; align-items: center;
  position: sticky; top: 0;
  background: var(--color-bg-primary);
  font-size: var(--fs-xs); z-index: 1;
}
.notif-clear-btn {
  cursor: pointer; font-size: var(--fs-2xs);
  color: var(--color-text-tertiary); transition: color .15s;
}
.notif-clear-btn:hover { color: var(--brand-gold-dark); }

.notif-see-all-btn {
  display: block;
  text-align: center;
  padding: 8px 10px;
  font-size: var(--fs-2xs);
  color: var(--brand-blue-dark);
  text-decoration: none;
  border-top: 1px solid var(--color-border-tertiary);
  background: var(--color-bg-secondary);
  position: sticky; bottom: 0;
  transition: background .15s;
}
.notif-see-all-btn:hover { background: rgba(178,154,112,.12); color: var(--brand-gold-dark); }

/* Notification items */
.notif-item {
  display: flex; gap: 6px; align-items: center;
  padding: 5px 10px;
  border-bottom: 1px solid var(--color-border-tertiary);
  transition: background .15s;
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--color-bg-secondary); }

/* Icon — small inline, no circle */
.notif-icon-circle {
  width: 14px; height: 14px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-top: 2px;
}
.notif-icon-circle .material-icons { font-size: 0.6rem; }
.notif-icon-success { background: #e8f5e9; color: #2e7d32; }
.notif-icon-info    { background: var(--brand-blue-light); color: var(--brand-blue-dark); }
.notif-icon-warning { background: #fff3e0; color: #e65100; }
.notif-icon-error   { background: #fdecea; color: #c62828; }
@media (prefers-color-scheme: dark) {
  .notif-icon-success { background: rgba(46,125,50,.15); color: #66bb6a; }
  .notif-icon-warning { background: rgba(230,81,0,.15); color: #ffb74d; }
  .notif-icon-error   { background: rgba(198,40,40,.15); color: #ef9a9a; }
}

/* Notification text */
.notif-body { flex: 1; min-width: 0; }
.notif-msg {
  font-size: var(--fs-xs); line-height: 1.4;
  font-weight: 500; color: var(--color-text-secondary);
  display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
.notif-meta {
  font-size: 0.6rem; color: var(--color-text-tertiary);
  margin-top: 1px; cursor: default;
}
.notif-actor {
  font-weight: 600; color: var(--brand-blue-dark);
}

/* Empty state */
.notif-empty {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 2px;
  padding: 1.2rem 0.8rem;
  color: var(--color-text-tertiary); font-size: var(--fs-xs);
}

/* Sync status section */
.notif-sync-section {
  border-top: 1px solid var(--color-border-tertiary);
  padding: 5px 10px; direction: rtl;
  font-size: var(--fs-2xs); color: var(--color-text-secondary);
  display: flex; flex-wrap: wrap; gap: 2px 8px;
  align-items: center;
}
.sync-badge {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 0 5px; border-radius: var(--radius-pill);
  font-size: 0.6rem; font-weight: 600;
}
.sync-badge-on  { background: #e8f5e9; color: #2e7d32; }
.sync-badge-off { background: #fdecea; color: #c62828; }
@media (prefers-color-scheme: dark) {
  .sync-badge-on  { background: rgba(46,125,50,.15); color: #66bb6a; }
  .sync-badge-off { background: rgba(198,40,40,.15); color: #ef9a9a; }
}
.sync-stat {
  display: flex; align-items: center; gap: 2px;
}
.sync-stat .material-icons { font-size: 0.72rem; opacity: 0.5; }

/* Operations icon spin */
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
#notif-icon.spinning { animation: spin 1.2s linear infinite; }

@keyframes navSlideDown {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ===== Hamburger (mobile) ===== */
.nav-hamburger {
  display: none; align-items: center; justify-content: center;
  background: none; border: none;
  color: rgba(255,255,255,0.85);
  cursor: pointer; padding: 4px;
  border-radius: var(--radius-sm);
  transition: background .15s, color .15s;
}
.nav-hamburger:hover { background: rgba(255,255,255,0.1); color: #fff; }
.nav-hamburger .material-icons { font-size: 26px; }

/* ===== Responsive navbar ===== */
@media (max-width: 768px) {
  .nav-hamburger { display: flex; }

  .nav-zone-center {
    display: none;
    position: absolute;
    top: 100%; right: 0; left: 0;
    flex-direction: column;
    align-items: stretch;
    background: linear-gradient(180deg, var(--brand-blue-dark), #3A5567);
    border-bottom: 2px solid var(--brand-gold-dark);
    padding: 8px 0;
    box-shadow: 0 8px 24px rgba(30,45,56,0.35);
    z-index: 200;
  }
  .nav-zone-center.nav-menu-open { display: flex; }

  .nav-zone-center .navitem1 {
    padding: 12px 20px; border-bottom: none;
    border-radius: 0; font-size: var(--fs-base);
    width: 100%; justify-content: flex-end; text-align: right;
  }
  .nav-zone-center .navitem1:hover { background: rgba(255,255,255,0.08); }

  /* Mobile dropdowns: inline */
  .nav-zone-center .nav-dropdown-menu {
    position: static; visibility: visible; opacity: 1;
    transform: none; transition: none;
    box-shadow: none; border-radius: 0;
    border-top: 1px solid rgba(255,255,255,0.08);
    background: rgba(0,0,0,0.12); min-width: auto;
    display: none;
  }
  .nav-zone-center .nav-dropdown:hover > .nav-dropdown-menu { display: none; }
  .nav-zone-center .nav-dropdown.is-open > .nav-dropdown-menu { display: block; }

  .nav-zone-center .nav-sub-menu {
    position: static; visibility: visible; opacity: 1;
    transform: none; transition: none;
    box-shadow: none; border-right: none; border-radius: 0;
    border-top: 1px solid rgba(255,255,255,0.08);
    background: rgba(0,0,0,0.08); padding-right: 16px;
    display: none;
  }
  .nav-zone-center .nav-dropdown-menu li:hover > .nav-sub-menu { display: none; }
  .nav-zone-center .nav-dropdown.is-open > .nav-sub-menu { display: block; }

  .nav-user-name { display: none; }

  #notif-panel {
    width: min(220px, 88vw); left: auto; right: -10px;
    animation: none;
  }
}

/* ===== Event Cards (recordcontainer1) ===== */
.recordcontainer1 {
  background: var(--color-bg-primary);
  background-image: linear-gradient(to left, var(--card-accent-bg, transparent) 0%, transparent 50%);
  border: 0.5px solid var(--color-border-tertiary);
  border-radius: var(--radius-lg);
  margin: 0 auto 9px;
  width: 70%;
  max-width: 820px;
  position: relative;
  overflow: hidden;
  transition: border-color .15s, transform .1s;
  padding: 12px 1.15rem 0;
}
.recordcontainer1:hover {
  border-color: var(--color-border-secondary);
  transform: translateY(-1px);
}

/* Double-click hint: readonly cards show text cursor on hover */
.event-edit-shell.is-readonly article,
.event-edit-shell.is-readonly .card-meta,
.event-edit-shell.is-readonly .tagsitem {
  cursor: default;
}

/* Colored right-edge bar — background set inline via data-etype */
.card-bar {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--card-accent, var(--brand-gold));
}

/* Card meta row (date + selects) */
.card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

/* Content (container1) */
.container1 {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.container1item {
  font-family: var(--ff-content);
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--color-text-primary);
  white-space: pre-wrap;
  text-align: justify;
  /* 8px 10px كالمودال (.edm-content) بدل 1px: كان النص ملتصقا بحوافه
     في البطاقة ومريحا في المودال، وكان يقفز عند التعديل لان قاعدة
     الحقل القابل للكتابة تفرض حشوتها. السقف رفع بما يعوض الحشوة
     فيبقى عدد الاسطر قبل «المزيد» كما هو. */
  padding: 7px 10px;
  max-height: 122px;
  overflow-y: hidden;
  background: var(--color-bg-secondary);
  border-radius: var(--radius-sm);
  outline: none;
  border: none;
}
.content-box-wrap {
  position: relative;
}
.container1item:focus {
  background: var(--color-bg-secondary);
  border-radius: var(--radius-sm);
}
/* ===== Event Detail Modal (edm-*) ===== */
.edm-shell {
  width: min(920px, 96vw);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  background: var(--color-bg-primary);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 40px rgba(0,0,0,.4);
  overflow: hidden;
  font-size: calc(1rem + 2px);
}
.edm-header {
  padding: 0.45rem 1rem;
  border-bottom: 2px solid var(--brand-gold);
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--brand-blue-dark);
}
.edm-pk {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--brand-gold);
}
.edm-meta-light {
  font-size: var(--fs-2xs);
  color: rgba(255,255,255,.55);
}
/* .material-icons تفرض font-size:24px، فاي font-size على الزر نفسه
   ميت. ازرار التعديل/الحذف/الحفظ هي نفسها في البطاقة بايقونة 14px،
   فكان راس المودال يظهرها باكبر من ضعفها (مسح اتساق 2026-08-25). */
.edm-header-btn .material-icons { font-size: 16px; line-height: 1; }
.edm-header-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: background .12s;
}
.edm-header-btn:hover { background: rgba(255,255,255,.12); }
.edm-header-btn-danger { color: #fff; }
.edm-header-btn-danger:hover { background: rgba(220,38,38,.35); }
.edm-header-btn-save { color: #fff; }
.edm-header-btn-save:hover { background: rgba(74,222,128,.2); }
.edm-close-btn {
  cursor: pointer;
  color: #fff;
  font-size: 1.3em;
  padding: 0 8px;
  border-radius: 4px;
  transition: background .15s;
  margin-right: -4px;
}
.edm-close-btn:hover { background: rgba(255,255,255,.15); }

.edm-body {
  flex: 1;
  display: flex;
  min-height: 0;
  overflow: hidden;
  position: relative;
}
.edm-body > .edm-sidebar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 380px;
}
.edm-body > .edm-main {
  margin-left: 380px;
}
/* Event modal: narrower sidebar (original size) */
.edm-shell-event .edm-body > .edm-sidebar { width: 300px; }
.edm-shell-event .edm-body > .edm-main { margin-left: 300px; }

/* Main content column */
.edm-main {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 1.2rem;
  min-width: 0;
}
.edm-main.edm-editing {
  background: rgba(178,154,112,.03);
}
.edm-fields {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 1rem;
}
.edm-label {
  font-size: var(--fs-2xs);
  font-weight: 600;
  color: var(--color-text-tertiary);
  font-family: var(--ff);
}
.edm-input {
  font-family: var(--ff);
  font-size: var(--fs-base);
  padding: 4px 8px;
  border: 1px solid var(--color-border-secondary);
  border-radius: var(--radius-sm);
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
}
.edm-input:disabled {
  background: transparent;
  border-color: transparent;
  color: var(--color-text-primary);
  opacity: 1;
  -webkit-appearance: none;
}

.edm-title {
  font-family: var(--ff);
  font-size: 1.15em;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0 0 0.7rem 0;
  outline: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 4px;
  transition: border-color .15s;
}
.edm-title[contenteditable="true"] {
  border-bottom-color: var(--color-border-secondary);
}
.edm-content-wrap {
  margin-bottom: 1rem;
}
.edm-content {
  font-family: var(--ff-content);
  font-size: var(--fs-base);
  line-height: 1.7;
  color: var(--color-text-primary);
  white-space: pre-wrap;
  text-align: justify;
  padding: 8px 10px;
  background: var(--color-bg-secondary);
  border-radius: var(--radius-sm);
  outline: none;
  border: 1px solid transparent;
  min-height: 2em;
  transition: border-color .15s;
}
.edm-content:empty { min-height: 0; padding: 4px 10px; }
.edm-content[contenteditable="true"] {
  border-color: var(--color-border-secondary);
  background: var(--color-bg-primary);
}

/* ── Title row ── */
.edm-title-row {
  margin-bottom: 0.5rem;
}

/* ── Section wrapper ── */
.edm-section {
  margin-bottom: 1rem;
}
.edm-section:last-child { margin-bottom: 0; }

/* ── Field groups (labeled date inputs etc.) ── */
.edm-field-group {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
}
.edm-field-label {
  font-size: var(--fs-2xs);
  font-weight: 600;
  color: var(--color-text-tertiary);
  font-family: var(--ff);
}

.edm-chips-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.edm-chip-section {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.edm-chip-section > .edm-label {
  flex-shrink: 0;
  min-width: 48px;
  align-self: center;
  font-size: var(--fs-xs);
  color: var(--color-text-secondary);
}
/* Chipbox — WordPress/Airtable style */
.edm-chipbox {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  min-height: 30px;
  padding: 4px 6px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  transition: border-color .15s, background .15s;
  cursor: default;
  flex: 1;
}
.edm-chipbox .tagsitem {
  font-size: var(--fs-sm);
}
.edm-chipbox .edm-chip-input {
  font-family: var(--ff);
  font-size: var(--fs-xs);
  padding: 2px 4px;
  border: none;
  background: transparent;
  color: var(--color-text-primary);
  outline: none;
  min-width: 60px;
  flex: 1;
  display: none;
}
.edm-chipbox .chip-delete-btn { display: none; }

/* Edit mode */
.edm-editing .edm-chipbox {
  border-color: var(--color-border-secondary);
  background: var(--color-bg-primary);
  cursor: text;
}
.edm-editing .edm-chipbox:focus-within {
  /* ازرق كبقية حقول المودال — كان ذهبيا فيقرا كحالة تنبيه لا تركيز */
  border-color: var(--brand-blue);
}
.edm-editing .edm-chipbox .edm-chip-input { display: inline-block; }
.edm-editing .edm-chipbox .chip-delete-btn {
  display: inline-flex;
  position: relative;
  margin-right: -6px;
  margin-left: 0;
  margin-top: 4px;
  width: auto;
  height: auto;
  padding: 0 3px;
  border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
  background: transparent;
  color: inherit;
  font-size: 1em;
  opacity: .6;
  font-weight: 600;
}
.edm-editing .edm-chipbox .chip-delete-btn:hover {
  opacity: 1;
  background: rgba(220,38,38,.12);
  color: #991B1B;
}
@media (prefers-color-scheme: dark) {
  .edm-editing .edm-chipbox .chip-delete-btn:hover { color: #ffc2c2; }
}

/* Comments sidebar */
.edm-sidebar {
  border-right: 1px solid var(--color-border-secondary);
  display: flex;
  flex-direction: column;
  background: var(--color-bg-secondary);
  overflow: hidden;
}
/* Sidebar tabs */
.edm-sidebar-tabs {
  display: flex;
  flex-shrink: 0;
  border-bottom: 1px solid var(--color-border-secondary);
}
.edm-sidebar-tab {
  flex: 1;
  padding: 7px 0;
  font-family: var(--ff);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-tertiary);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: color .15s, border-color .15s;
}
.edm-sidebar-tab:hover { color: var(--color-text-primary); }
.edm-sidebar-tab-active {
  color: var(--brand-blue-dark);
  border-bottom-color: var(--brand-blue-dark);
}
/* Tab panels */
.edm-tab-panel {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.edm-tab-hidden { display: none !important; }
.edm-tab-panel .edm-comments-list { flex: 1; min-height: 0; overflow-y: auto; }
.edm-badge {
  font-size: 0.65rem;
  color: var(--color-text-tertiary);
  background: var(--color-bg-primary);
  padding: 1px 7px;
  border-radius: 8px;
  font-weight: 600;
}
.edm-comments-list {
  flex: 1;
  overflow-y: auto;
  padding: 0.6rem 0.8rem;
  min-height: 0;
}
.edm-comment-form {
  flex-shrink: 0;
  padding: 0.6rem 0.8rem;
  border-top: 1px solid var(--color-border-secondary);
}
.edm-comment-form textarea {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid var(--color-border-secondary);
  border-radius: var(--radius-sm);
  font-family: var(--ff);
  resize: vertical;
  min-height: 42px;
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  font-size: var(--fs-2xs);
  box-sizing: border-box;
}
.edm-comment-form button {
  margin-top: 4px;
}

/* Comment items in sidebar — notification style */
.edm-cmt-item {
  padding: 5px 0;
  border-bottom: 1px solid var(--color-border-tertiary);
  transition: background .15s;
}
.edm-cmt-item:last-child { border-bottom: none; }
.edm-cmt-item.edm-cmt-resolved { opacity: 0.5; }
.edm-cmt-body {
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--color-text-secondary);
  font-weight: 500;
  white-space: pre-wrap;
}
/* Clamp text to 2 lines (for related events, etc.) */
.edm-clamp2 {
  white-space: normal !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: var(--fs-sm);
}
.edm-cmt-meta {
  font-size: 0.6rem;
  color: var(--color-text-tertiary);
  margin-top: 2px;
  cursor: default;
}
.edm-cmt-author {
  font-weight: 600;
  color: var(--brand-blue-dark);
}
.edm-cmt-row {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}
.edm-cmt-row .edm-cmt-body { flex: 1; min-width: 0; }
.edm-cmt-resolve-btn {
  cursor: pointer;
  color: var(--color-text-tertiary);
  flex-shrink: 0;
  padding: 2px;
  border-radius: 50%;
  transition: color .15s, background .15s;
  display: flex;
  align-items: center;
}
.edm-cmt-resolve-btn .material-icons { font-size: 16px; }
.edm-cmt-resolve-btn:hover {
  color: var(--color-success-text);
  background: var(--color-success-bg, rgba(46,125,50,.1));
}

/* Tag groups */
.tagsstyle {
  display: flex;
  position: relative;
  padding-right: 3px;
  font-size: var(--fs-sm);
  font-weight: 500;
  align-items: flex-start;
  text-align: right;
  max-width: 100%;
  margin-top: 4px;
  flex-direction: column;
  justify-content: flex-start;
  margin-bottom: 4px;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

/* Tag pills */
.tagsitem {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: 500;
  white-space: nowrap;
  background: var(--brand-gold-light);
  color: var(--brand-blue-dark);
  border: 0.5px solid var(--brand-gold);
  margin-top: 4px;
  line-height: 18px;
}

/* Tag pill colour variants */
.tagsitem-group {
  background: var(--color-bg-secondary);
  border-color: var(--color-border-secondary);
  color: var(--color-text-secondary);
}
.tagsitem-entity {
  background: var(--brand-blue-light);
  border-color: rgba(83,123,145,0.3);
  color: var(--brand-blue-dark);
}
.tagsitem-individual {
  background: #EDF2EE;
  border-color: rgba(68,99,90,0.22);
  color: #3A5E50;
}
.tagsitem-location {
  background: #FAF4E8;
  border-color: rgba(178,154,112,0.35);
  color: #7A6537;
}
@media (prefers-color-scheme: dark) {
  .tagsitem-entity {
    background: rgba(83,123,145,0.2);
    border-color: rgba(83,123,145,0.35);
    color: #8aa3b1;
  }
  .tagsitem-individual {
    background: rgba(68,99,90,0.15);
    border-color: rgba(68,99,90,0.25);
    color: #8AAFA0;
  }
  .tagsitem-location {
    background: rgba(178,154,112,0.18);
    border-color: rgba(178,154,112,0.35);
    color: #C9AE7C;
  }
}

/* Chip type dot indicator */
.chip-type-icon {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-top: 4px;
  margin-left: -1px;
  flex-shrink: 0;
}
.chip-type-icon-tag        { background: var(--brand-gold); }
.chip-type-icon-group      { background: var(--color-text-tertiary); }
.chip-type-icon-entity     { background: rgba(83,123,145,0.6); }
.chip-type-icon-individual { background: rgba(68,99,90,0.5); }
.chip-type-icon-location   { background: rgba(178,154,112,0.65); }
@media (prefers-color-scheme: dark) {
  .chip-type-icon-tag        { background: var(--brand-gold-dark, #9a8460); }
  .chip-type-icon-entity     { background: rgba(83,123,145,0.7); }
  .chip-type-icon-individual { background: rgba(68,99,90,0.6); }
}

/* Detail modal — photos grid */
.edm-pics { margin-top: 10px; }
.edm-pics-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.edm-pics-grid img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-secondary);
  cursor: pointer;
  transition: transform .12s, box-shadow .12s;
}
.edm-pics-grid img:hover {
  transform: scale(1.05);
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}

/* Table name cell — open detail icon on hover */
.td-name-cell { position: relative; }
.td-name-open-btn {
  display: none;
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  color: var(--brand-blue);
  cursor: pointer;
  opacity: .55;
  z-index: 2;
  transition: opacity .12s;
}
.td-name-open-btn:hover { opacity: 1; }
.td-name-cell:hover .td-name-open-btn { display: block; }

/* Chip delete button */
.chip-delete-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(220, 38, 38, 0.1);
  color: #991B1B;
  font-size: 9px;
  cursor: pointer;
  margin-top: 4px;
  margin-right: -1px;
  flex-shrink: 0;
  transition: background .15s, color .15s;
  line-height: 1;
  border: none;
}
.chip-delete-btn:hover {
  background: rgba(220, 38, 38, 0.25);
  color: #7F1D1D;
}
@media (prefers-color-scheme: dark) {
  .chip-delete-btn { color: #ff9b9b; }
  .chip-delete-btn:hover { color: #ffc2c2; }
}
.event-edit-shell:not(.is-readonly) .chip-delete-btn {
  display: inline-flex;
}

/* Chip hover effect */
.tag-item-wrap:hover .tagsitem {
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.event-edit-shell:not(.is-readonly) .tag-item-wrap:hover .tagsitem {
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
}

/* Context menu items */
.ctx-item {
  padding: 5px 10px;
  cursor: pointer;
  color: var(--color-text-primary);
  font-size: var(--fs-base);
  transition: background .1s;
}
.ctx-item:hover { background: var(--color-bg-secondary); }
.ctx-danger { color: #c0392b; }
.ctx-danger:hover { background: #fff5f5; }

.Xstyle {
  height: 18px;
  width: 18px;
  background: rgba(220, 38, 38, 0.08);
  text-align: center;
  cursor: pointer;
  border-radius: var(--radius-pill);
  border: 0.5px solid rgba(220,38,38,0.2);
  margin-right: -1px;
  margin-top: 4px;
  line-height: 18px;
  font-size: 10px;
  color: #991B1B;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
@media (prefers-color-scheme: dark) {
  .Xstyle { color: #ff9b9b; border-color: rgba(220,38,38,0.4); }
}

/* في قراءة البطاقة تختفي مداخل الشيبس الخمسة كما تفعل في المودال
   (.edm-chipbox .edm-chip-input مخفي ولا يظهر الا في .edm-editing) —
   كانت خمسة صناديق ذهبية فارغة تعلن «اكتب هنا» ولا تستجيب، وصف بلا
   علاقات يظهر كصفوف فارغة مؤطرة (مسح اتساق 2026-08-25).
   ملاحظة: تبقى في DOM لان الحفظ يقرا منها. */
.event-edit-shell.is-readonly .inputbox { display: none; }
/* وصف العلاقة الفارغ كله يختفي في القراءة — لا شيء يعرض فيه */
.event-edit-shell.is-readonly .tagsstyle:not(:has(.tagsitem)) { display: none; }

/* Tag text input */
.inputbox {
  font-family: var(--ff);
  font-size: var(--fs-sm);
  height: 22px;
  width: 75px;
  margin-top: 4px;
  border: 0.5px solid var(--brand-gold);
  border-radius: var(--radius-pill);
  padding: 2px 8px;
  background: var(--color-bg-primary);
  color: var(--brand-blue-dark);
  outline: none;
}
.inputbox:focus { border-color: var(--brand-blue); }

/* ===== Event Detail Modal — mobile (single column, full screen) =====
   على الشاشات الضيقة تخطيط العمودين (محتوى + شريط تعليقات absolute بعرض
   300px) كان يسحق أحد العمودين إلى ~35px فيصير النص عموديا غير مقروء.
   هنا نلغي الـ absolute ونكدّس عموديا: المحتوى فوق، التعليقات تحت، بملء
   الشاشة. القواعد بعد كل قواعد edm ليتغلب الـ cascade (نفس specificity). */
@media (max-width: 768px) {
  #event-detail-overlay { align-items: stretch !important; justify-content: stretch !important; }
  .edm-shell {
    width: 100vw !important;
    max-width: 100vw !important;
    max-height: none !important;
    height: 100dvh !important;
    border-radius: 0 !important;
    font-size: 1rem !important;
  }
  .edm-body { flex-direction: column !important; overflow-y: auto !important; }
  /* الشريط الجانبي (التعليقات/الإجراءات) يعود لتدفق المستند تحت المحتوى */
  .edm-body > .edm-sidebar,
  .edm-shell-event .edm-body > .edm-sidebar {
    position: static !important;
    width: 100% !important;
    inset: auto !important;
    border-top: 2px solid var(--brand-gold);
    min-height: 40vh;
  }
  .edm-body > .edm-main,
  .edm-shell-event .edm-body > .edm-main {
    margin-left: 0 !important;
    margin-right: 0 !important;
    overflow: visible !important;
  }
  /* أزرار الرأس بحجم لمس مريح */
  .edm-header-btn, .edm-close-btn { min-width: 40px; min-height: 40px; }
}

/* ===== Form controls ===== */
.container2item {
  font-family: var(--ff-content);
  font-size: var(--fs-sm);
  border: 0.5px solid var(--color-border-secondary);
  border-radius: var(--radius-md);
  padding: 4px 8px;
  background: var(--color-bg-primary);
  color: var(--brand-blue-dark);
  outline: none;
  transition: border-color .15s;
  cursor: pointer;
}
.container2item:hover:not(:disabled) { border-color: var(--brand-gold-dark); }
.container2item:focus:not(:disabled) { border-color: var(--brand-blue); }
/* صف البيانات الوصفية في بطاقة الحدث يتبع قيم المودال: حد 1px ونصف
   قطر 4px بدل 0.5px/8px، والمعطل بلا اطار — «الاطار يدل على القابلية
   للكتابة» (مراجعة مظهر 2026-08-25). خارج الوقائع تبقى القيم كما هي. */
.card-meta .container2item,
.card-meta .datestyle1 {
  border-width: 1px;
  border-radius: var(--radius-sm);
}
.card-meta .container2item:disabled,
.card-meta .datestyle1:disabled {
  border-color: transparent;
  background: transparent;
  color: var(--color-text-primary);
  cursor: default;
}

.datestyle1 {
  font-family: var(--ff);
  font-size: var(--fs-sm);
  background: transparent;
  border: 0.5px solid var(--color-border-secondary);
  border-radius: var(--radius-md);
  padding: 4px 8px;
  color: var(--brand-blue-dark);
  outline: none;
  display: inline-block;
  cursor: pointer;
}
.datestyle1:focus { border-color: var(--brand-blue); }

/* حارس تاريخ الحدث (teiScript.js dateGuardUpdate): التاريخ بالكلمات بجانب
   الحقل، فلا يمر يوم/شهر مقلوب دون أن يُرى */
.date-guard {
  font-size: var(--fs-2xs);
  color: var(--color-text-tertiary);
  white-space: nowrap;
  align-self: center;
}
.date-guard-warn { color: var(--color-danger, #b3261e); font-weight: 600; }

.datepicker1 {
  font-family: var(--ff);
  font-size: var(--fs-base);
  padding: 6px 10px;
  border-radius: var(--radius-md);
  background: transparent;
  border: 0.5px solid var(--color-border-secondary);
  outline: none;
  color: var(--color-text-primary);
}

.textarea1 {
  font-size: 1.1em;
  font-family: var(--ff);
  resize: vertical;
  padding: 10px;
  border-radius: var(--radius-md);
  background: var(--color-bg-secondary);
  border: 0.5px solid var(--color-border-secondary);
  outline: none;
  text-align: justify;
  color: var(--color-text-primary);
  width: 100%;
}

.buttom1 {
  font-family: var(--ff);
  font-size: var(--fs-base);
  padding: 6px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--brand-gold-dark);
  background: var(--brand-gold-dark);
  color: #ffffff;
  cursor: pointer;
  transition: all .15s;
  font-weight: 500;
}
.buttom1:hover { background: var(--brand-blue-dark); border-color: var(--brand-blue-dark); color: #ffffff; }

/* ===== Card action menu (⋮) =====
   .card-kebab-btn حُذفت مع زرّ ⋮ في البطاقة (كان بلا قائمة منذ بتر
   Airtable). قائمة صفّ الجدول تستعمل .card-drop ادناه ولا تحتاجها. */

.card-drop {
  background: var(--color-bg-primary, #fff);
  border: none;
  border-top: 3px solid var(--brand-gold-dark);
  border-radius: 7px;
  box-shadow: 0 6px 24px rgba(30,45,56,.2);
  min-width: 175px;
  overflow: hidden;
  z-index: 9999;
  font-size: var(--fs-base);
}
.cdrop-item {
  display: block;
  padding: 7px 13px;
  cursor: pointer;
  color: var(--color-text-primary);
  text-decoration: none;
  transition: background .1s;
}
.cdrop-item:hover { background: var(--color-bg-secondary); }
.cdrop-sep { height: 1px; background: var(--color-border-secondary); margin: 2px 0; }
.cdrop-danger { color: #c0392b; }
.cdrop-danger:hover { background: #fff5f5; }

/* ===== Table row kebab menu (⋮) ===== */
.row-kebab-btn {
  cursor: pointer;
  font-size: 1.1em;
  color: var(--color-text-tertiary);
  padding: 2px 6px;
  border-radius: 4px;
  transition: background .12s, color .12s;
  user-select: none;
}
.row-kebab-btn:hover {
  background: var(--color-bg-secondary);
  color: var(--brand-blue-dark);
}

/* Table readonly: inputs look like plain text */
.table-readonly .container2item,
.table-readonly select.container2item {
  pointer-events: none;
  border: none !important;
  background: transparent !important;
  color: var(--color-text-primary) !important;
  font-size: inherit !important;
  font-weight: inherit;
  font-family: inherit;
  line-height: inherit;
  -webkit-appearance: none;
  appearance: none;
  padding: 0 !important;
  margin: 0;
  height: auto;
  border-radius: 0;
  width: 100% !important;
  box-sizing: border-box;
  text-overflow: ellipsis;
  overflow: hidden;
}
/* wrap-text spans: match input appearance */
.table-readonly .wrap-text {
  color: var(--color-text-primary) !important;
  font-size: inherit !important;
  font-family: inherit;
  line-height: inherit;
}
.table-readonly .container2item::-webkit-search-cancel-button { display: none; }

/* Keep text position stable in these columns across wrap on/off */
.table-readonly td[data-col-name="parent"] .container2item,
.table-readonly td[data-col-name="synonyms"] .container2item,
.table-readonly td[data-col-name="name"] .container2item {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
}

.table-readonly td[data-col-name="parent"] .wrap-text,
.table-readonly td[data-col-name="synonyms"] .wrap-text,
.table-readonly td[data-col-name="name"] .wrap-text {
  display: block !important;
  width: 100%;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: right !important;
  direction: rtl !important;
}

/* Row or cell in edit mode: override readonly */
tr.row-editing .container2item,
tr.row-editing select.container2item,
td.cell-editing .container2item,
td.cell-editing select.container2item {
  pointer-events: auto !important;
  border: 1px solid var(--brand-gold-dark) !important;
  background: var(--color-bg-primary) !important;
  -webkit-appearance: auto;
  appearance: auto;
}

/* In editing mode, show inputs and hide display text */
tr.row-editing td[data-col-name="parent"] .container2item,
tr.row-editing td[data-col-name="synonyms"] .container2item,
tr.row-editing td[data-col-name="name"] .container2item,
tr.row-editing td[data-col-name="type"] .container2item,
td.cell-editing[data-col-name="parent"] .container2item,
td.cell-editing[data-col-name="synonyms"] .container2item,
td.cell-editing[data-col-name="name"] .container2item,
td.cell-editing[data-col-name="type"] .container2item {
  position: static !important;
  width: 100% !important;
  height: auto !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  overflow: visible !important;
}

tr.row-editing td[data-col-name="parent"] .wrap-text,
tr.row-editing td[data-col-name="synonyms"] .wrap-text,
tr.row-editing td[data-col-name="name"] .wrap-text,
tr.row-editing td[data-col-name="type"] .wrap-text,
td.cell-editing[data-col-name="parent"] .wrap-text,
td.cell-editing[data-col-name="synonyms"] .wrap-text,
td.cell-editing[data-col-name="name"] .wrap-text,
td.cell-editing[data-col-name="type"] .wrap-text {
  display: none !important;
}

/* ===== Row multi-select ===== */
.row-select-cb {
  width: 15px; height: 15px;
  cursor: pointer;
  accent-color: var(--brand-gold-dark);
  opacity: 0;
  transition: opacity .15s;
  margin: 0;
}
tr:hover .row-select-cb,
.selecting-mode .row-select-cb { opacity: 0.35; }
.selecting-mode .row-select-cb,
.row-select-cb:checked { opacity: 1; }
tr.row-selected { background: rgba(178,154,112,0.08) !important; }

.bulk-action-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 10px 16px;
  background: var(--color-bg-primary);
  border-top: 2px solid var(--brand-blue);
  box-shadow: 0 -4px 16px rgba(0,0,0,.15);
  font-size: var(--fs-sm);
  font-family: 'Tajawal', sans-serif;
  direction: rtl;
}

/* ===== Table toolbar ===== */
.table-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  direction: rtl;
  flex-wrap: wrap;
}
.table-toolbar label,
.table-toolbar select,
.table-toolbar button {
  font-family: 'Tajawal', sans-serif;
  font-size: var(--fs-xs);
  color: var(--color-text-secondary);
}
.table-toolbar select {
  padding: 3px 6px;
  border: 1px solid var(--color-border-secondary);
  border-radius: 5px;
  background: var(--color-bg-secondary);
  cursor: pointer;
}
.table-toolbar .toolbar-toggle {
  padding: 3px 10px;
  border: 1px solid var(--color-border-secondary);
  border-radius: 5px;
  background: var(--color-bg-secondary);
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.table-toolbar .toolbar-toggle.active {
  background: var(--brand-gold-light);
  border-color: var(--brand-gold-dark);
  color: var(--brand-blue-dark);
}

/* Placeholder styling */
.table-readonly .container2item::placeholder {
  color: var(--color-text-tertiary);
  opacity: 0.35;
}

/* Text wrap mode */
.text-wrap-on td {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  word-break: break-word;
  line-height: 1.3 !important;
  height: auto !important;
  max-height: none !important;
}
.text-wrap-on td input.container2item,
.text-wrap-on td select.container2item {
  position: absolute !important; width:1px !important; height:1px !important; opacity:0 !important; pointer-events:none !important; overflow:hidden !important; padding:0 !important; margin:0 !important;
}
.text-wrap-on td { position: relative; }
.text-wrap-on td .wrap-text {
  display: block !important;
  width: 100%;
  margin: 0;
  font-size: inherit !important;
  line-height: inherit !important;
  font-family: inherit !important;
  color: inherit !important;
  white-space: normal !important;
  word-break: break-word;
  text-align: inherit;
  direction: inherit;
  overflow: visible !important;
  max-height: none;
}

.text-wrap-on td[data-col-name="parent"] .wrap-text,
.text-wrap-on td[data-col-name="synonyms"] .wrap-text,
.text-wrap-on td[data-col-name="name"] .wrap-text {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}
/* Edit textarea — always wraps text */
.cell-edit-area {
  display: block;
  width: 100%; box-sizing: border-box;
  min-height: 2.4em; max-height: 50vh;
  resize: vertical; overflow-y: auto;
  padding: 4px 6px;
  border: 1px solid var(--brand-gold-dark);
  border-radius: 3px;
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  font-family: 'Tajawal', sans-serif;
  font-size: inherit;
  text-align: right; direction: rtl;
  word-break: break-word; white-space: pre-wrap;
  line-height: 1.5;
  outline: none;
  z-index: 2;
}
.cell-edit-area:focus {
  box-shadow: 0 0 0 2px rgba(178,154,112,0.25);
}
/* Cell editing: allow overflow so textarea is fully visible */
td.cell-editing {
  overflow: visible !important;
  position: relative;
}
.wrap-text { display: none; word-break: break-word; line-height: inherit; }

/* Font size classes — spread: 10px / 12.5px / 15px */
.table-font-sm td, .table-font-sm td input, .table-font-sm td select,
.table-font-sm td .wrap-text { font-size: var(--fs-2xs) !important; line-height: 1.3 !important; }
.table-font-md td, .table-font-md td input, .table-font-md td select,
.table-font-md td .wrap-text { font-size: var(--fs-sm) !important; line-height: 1.3 !important; }
.table-font-lg td, .table-font-lg td input, .table-font-lg td select,
.table-font-lg td .wrap-text { font-size: var(--fs-md) !important; line-height: 1.3 !important; }

/* Sort arrow (inline, doesn't eat column width) */
.sort-arrow { font-size:0.7em; vertical-align:middle; margin-right:1px; color:var(--brand-gold); }

/* ===== Column inline filter ===== */
.col-filter-icon {
  display: inline-block;
  width: 12px; height: 12px;
  vertical-align: middle;
  margin-right: 2px;
  cursor: pointer;
  opacity: 0;
  transition: opacity .15s;
  user-select: none;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 2h14l-5 6v5l-4 2V8z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 2h14l-5 6v5l-4 2V8z'/%3E%3C/svg%3E") center/contain no-repeat;
  color: rgba(255,255,255,0.5);
}
th:hover .col-filter-icon { opacity: 0.5; }
.col-filter-icon:hover { opacity: 1 !important; color: var(--brand-gold); }
.col-filter-icon.active { opacity: 1 !important; color: var(--brand-gold); }

.col-filter-popup {
  position: absolute;
  top: calc(100% + 2px);
  z-index: 60;
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-secondary);
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,.18);
  padding: 10px 12px;
  min-width: 190px;
  direction: rtl;
  font-family: 'Tajawal', sans-serif;
  font-size: var(--fs-sm);
}
.col-filter-popup select,
.col-filter-popup input {
  width: 100%;
  box-sizing: border-box;
  padding: 5px 8px;
  border: 1px solid var(--color-border-secondary);
  border-radius: 5px;
  font-size: var(--fs-sm);
  font-family: 'Tajawal', sans-serif;
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
  margin-bottom: 6px;
  text-align: right;
}
.col-filter-popup .cfp-actions {
  display: flex; gap: 6px; justify-content: flex-start; margin-top: 4px;
}
.col-filter-popup .cfp-btn {
  padding: 4px 14px;
  border-radius: 5px;
  font-size: var(--fs-xs);
  font-family: 'Tajawal', sans-serif;
  cursor: pointer;
  border: none;
}
.col-filter-popup .cfp-apply {
  background: var(--brand-blue); color: #fff;
}
.col-filter-popup .cfp-clear {
  background: transparent; color: var(--color-text-secondary);
  border: 1px solid var(--color-border-secondary);
}

/* Active filter chips bar */
.active-filters-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  direction: rtl;
  margin-bottom: 8px;
}
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-family: 'Tajawal', sans-serif;
  background: var(--brand-gold-light);
  color: var(--brand-blue-dark);
  border: 1px solid rgba(178,154,112,0.3);
  white-space: nowrap;
}
.filter-chip .chip-remove {
  cursor: pointer;
  opacity: 0.5;
  font-size: 0.85em;
  transition: opacity .15s;
}
.filter-chip .chip-remove:hover { opacity: 1; }

/* Column resize handle */
.col-resize-handle {
  position: absolute; top: 0; left: 0; width: 4px; height: 100%;
  cursor: col-resize; background: transparent; z-index: 5;
}
.col-resize-handle:hover,
.col-resize-handle.dragging { background: var(--brand-blue); opacity: 0.4; }

/* Hidden column cell — keeps layout position, just invisible */
th.col-hidden, td.col-hidden {
  visibility: hidden !important;
  padding: 0 !important;
  overflow: hidden !important;
  font-size: 0 !important;
  line-height: 0 !important;
  border: none !important;
}
th.col-hidden *, td.col-hidden * {
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 0 !important;
  overflow: hidden !important;
}

/* Column drag reorder */
th[draggable="true"] { cursor: grab; }
th[draggable="true"]:active { cursor: grabbing; }
th.col-drag-over { box-shadow: inset -3px 0 0 var(--brand-blue); }
th.col-dragging { opacity: 0.4; }

/* Column visibility dropdown */
.col-vis-dropdown {
  position: relative;
  display: inline-block;
}
.col-vis-panel {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 50;
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-secondary);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,.10);
  padding: 6px 0;
  min-width: 140px;
  direction: rtl;
}
.col-vis-panel.open { display: block; }
.col-vis-panel label {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  cursor: pointer;
  font-size: var(--fs-xs);
  transition: background .1s;
}
.col-vis-panel label:hover { background: var(--color-bg-secondary); }

/* ===== Card footer (navbar3) ===== */
.navbar3 {
  border-top: 0.5px solid var(--color-border-tertiary);
  padding: 7px 4px;
  margin-top: 8px;
  font-family: var(--mono);
  font-size: var(--fs-xs);
  color: var(--color-text-tertiary);
  background: var(--brand-blue-light);
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  margin-left: -1.15rem;
  margin-right: -1.15rem;
  width: calc(100% + 2.3rem);
  padding: 7px 1.15rem;
}
.navbar3 ul {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 0;
  margin: 0;
  flex-wrap: wrap;
}

.navitem3 {
  font-weight: 500;
  color: var(--brand-blue-dark);
  display: inline-block;
  cursor: pointer;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  transition: background .12s, color .12s;
  font-size: var(--fs-xs);
}
.navitem3:hover { background: var(--brand-blue-dark); color: #ffffff; }
.navitem3 a { color: inherit; }

.pkitem {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--brand-gold-dark);
  position: absolute;
  right: 1.15rem;
}

.lm {
  font-family: var(--mono);
  font-size: var(--fs-2xs);
  color: var(--brand-blue);
  position: absolute;
  left: 1.15rem;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

/* ===== Expand / Collapse button ===== */
.card-expand-btn {
  display: none;
  position: absolute;
  bottom: 4px;
  left: 6px;
  background: var(--color-bg-secondary);
  border: none;
  color: var(--brand-blue);
  font-size: var(--fs-2xs);
  font-family: var(--ff);
  cursor: pointer;
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  z-index: 2;
  opacity: 0.85;
  transition: opacity .15s;
}
.card-expand-btn:hover { opacity: 1; color: var(--brand-blue-dark); }
.container1item.has-overflow ~ .card-expand-btn { display: inline-flex; align-items: center; gap: 3px; }
/* زر «المزيد» absolute أسفل يسار الصندوق كان يتراكب فوق آخر سطر نص.
   نحجز شريطا سفليا (border-box: ضمن max-height) في المقصوصة فقط فيجلس
   الزر في فراغ لا فوق النص. */
.container1item.has-overflow { padding-bottom: 1.7em; }
.container1item.expanded { max-height: none !important; }
.container1item.expanded ~ .card-expand-btn .expand-text { display: none; }
.container1item:not(.expanded) ~ .card-expand-btn .collapse-text { display: none; }

/* ===== Sync status dot ===== */
.sync-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  vertical-align: middle;
}
.sync-dot-synced  { background: #2E7D32; }
.sync-dot-pending { background: var(--brand-gold-dark); }
.sync-dot-none    { background: var(--color-text-tertiary); opacity: 0.4; }

/* ===== Card copy button ===== */
.card-copy-btn {
  appearance: none; -webkit-appearance: none;
  background: none;
  border: none;
  color: var(--color-text-tertiary);
  cursor: pointer;
  padding: 1px;
  line-height: 1;
  vertical-align: middle;
  transition: color .15s;
}
.card-copy-btn:hover { color: var(--brand-blue-dark); }
.card-copy-btn .material-icons { font-size: 13px; }

/* ===== Card footer creator ===== */
.card-footer-creator {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.card-footer-creator .material-icons { font-size: 12px; }

/* ===== Footer separator ===== */
.card-footer-sep {
  color: var(--color-border-secondary);
  margin: 0 2px;
  font-size: var(--fs-2xs);
}

/* ===== Utility ===== */
.link1 {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0; right: 0;
  z-index: -1;
  cursor: pointer;
}

mark {
  background-color: rgba(178,154,112,0.25);
  color: var(--brand-blue-dark);
  padding: 1px 3px;
  border-radius: 2px;
}

.htmx-indicator {
  opacity: 0;
  pointer-events: none;
  transition: opacity 1ms ease-in;
}

/* ===== Footer ===== */
footer {
  position: fixed;
  right: 0; bottom: 0;
  height: 1%;
  width: 100%;
  background: var(--brand-blue-dark);
  border-top: 2px solid var(--brand-gold);
  z-index: 4;
}

/* ===== Table (Tags table view) ===== */
.mytable {
  font-family: var(--ff);
  position: relative;
  top: 0;
  right: 15%;
  width: 70%;
  border-collapse: collapse;
  border: none;
}
table th {
  border: none;
  border-left: 1px solid rgba(255,255,255,0.15);
  border-bottom: 2px solid var(--brand-gold-dark);
  padding: 4px 4px;
  background: var(--brand-blue-dark);
  color: rgba(255,255,255,0.9);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.2;
}
table td {
  border: none;
  border-bottom: 1px solid var(--color-border-tertiary);
  text-align: start;
  font-size: 12.5px;
  font-weight: 500;
  padding: 3px 8px;
}

/* ===== MODAL DIALOG ===== */
#modal {
  position: fixed;
  top: 0; bottom: 0; left: 0; right: 0;
  background: rgba(0,0,0,0.35);
  z-index: 1000;
  overflow: scroll;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: fadeIn 150ms ease;
}
#modal > .modal-underlay {
  position: absolute;
  z-index: -1;
  top: 0; bottom: 0; left: 0; right: 0;
}
#modal > .modal-content {
  margin-top: 8vh;
  width: 80%;
  max-width: 600px;
  border: none;
  border-top: 3px solid var(--brand-gold-dark);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 48px rgba(30,45,56,0.25);
  background: var(--color-bg-primary);
  padding: 20px;
  animation: zoomIn 150ms ease;
}
#modal.closing { animation: fadeOut 150ms ease; }
#modal.closing > .modal-content { animation: zoomOut 150ms ease; }

@keyframes fadeIn  { 0%{opacity:0} 100%{opacity:1} }
@keyframes fadeOut { 0%{opacity:1} 100%{opacity:0} }
@keyframes zoomIn  { 0%{transform:scale(.92)} 100%{transform:scale(1)} }
@keyframes zoomOut { 0%{transform:scale(1)}   100%{transform:scale(.92)} }

/* ===== Overlay (legacy) ===== */
#overlay {
  position: fixed;
  display: none;
  width: 50%; height: 50%;
  top: 0; left: 0; right: 0; bottom: 0;
  background: white;
  z-index: 4;
  cursor: pointer;
}
#text {
  position: absolute;
  top: 50%; left: 50%;
  font-size: 50px; color: white;
  transform: translate(-50%,-50%);
}

/* ===== Settings Page ===== */
.sett-wrap { max-width: 1080px; margin: 24px auto; padding: 0 14px; direction: rtl; }
.sett-card {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-secondary);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 20px rgba(0,0,0,.06);
  overflow: hidden;
}
.sett-header {
  padding: 18px; border-bottom: 1px solid var(--color-border-tertiary);
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.sett-header h2 {
  margin: 0; font-size: 1.08rem; color: var(--color-text-primary);
  display: flex; align-items: center; gap: 8px;
}
.sett-header h2 .material-icons { font-size: 1.2rem; color: var(--brand-blue); }
.sett-header-sub { font-size: var(--fs-sm); color: var(--color-text-tertiary); margin-top: 4px; }
.sett-back { font-size: var(--fs-sm); color: var(--brand-gold-dark); text-decoration: none; }
.sett-back:hover { color: var(--brand-gold); }
.sett-grid {
  padding: 18px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px;
}
/* شبكة التفضيلات الشخصية في صفحة الإعدادات — صنف مستقل عن .sett-grid
   عمداً كي لا تلتقطها طبقة «القراءة فقط» المركَّبة على شبكة النظام. */
.sett-personal-grid {
  padding: 18px 18px 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px;
}
.sett-tile {
  height: 100%; border: 1px solid var(--color-border-secondary); border-radius: 10px;
  padding: 14px; background: var(--color-bg-secondary);
  display: flex; flex-direction: column; gap: 10px;
}
.sett-tile-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.sett-tile-title {
  font-weight: 600; color: var(--color-text-primary);
  display: flex; align-items: center; gap: 6px;
}
.sett-tile-title .material-icons { font-size: 1rem; color: var(--brand-blue); opacity: .7; }
.sett-tile-desc { font-size: var(--fs-sm); color: var(--color-text-tertiary); line-height: 1.5; }
.sett-badge {
  font-size: var(--fs-2xs); padding: 2px 8px; border-radius: var(--radius-pill);
  white-space: nowrap;
}
.sett-badge-on  { color: #2f7d32; background: #e8f5e9; }
.sett-badge-off { color: #8a5a00; background: #fff4d6; }
.sett-badge-soon {
  color: var(--color-text-tertiary); background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border-tertiary);
  display: inline-flex; align-items: center; gap: 3px;
}
.sett-badge-soon .material-icons { font-size: .65rem; }
.sett-status {
  border-radius: var(--radius-md); padding: 10px 12px; font-size: var(--fs-base);
}
.sett-status-on  { border: 1px solid #b8e0c1; background: #eef9f1; color: #1f5e2f; }
.sett-status-off { border: 1px solid #efd7a6; background: #fff9ec; color: #7a4e00; }

/* Toggle switch */
.sett-toggle { position: relative; display: inline-flex; align-items: center; cursor: pointer; gap: 8px; }
.sett-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.sett-toggle-track {
  width: 34px; height: 18px; background: var(--color-border-secondary);
  border-radius: 9px; transition: background .2s; position: relative; flex-shrink: 0;
}
.sett-toggle-track::after {
  content: ''; position: absolute; top: 2px; right: 2px;
  width: 14px; height: 14px; background: #fff; border-radius: 50%;
  transition: transform .2s;
}
.sett-toggle input:checked ~ .sett-toggle-track { background: var(--brand-blue); }
.sett-toggle input:checked ~ .sett-toggle-track::after { transform: translateX(-16px); }
.sett-toggle-label { font-size: var(--fs-base); color: var(--color-text-primary); }

.sett-toggle-sm .sett-toggle-track { width: 26px; height: 14px; border-radius: 7px; }
.sett-toggle-sm .sett-toggle-track::after { width: 10px; height: 10px; }
.sett-toggle-sm input:checked ~ .sett-toggle-track::after { transform: translateX(-12px); }

.sett-disabled { opacity: .5; pointer-events: none; }
.sett-disabled .sett-toggle-track { background: var(--color-border-tertiary); }

.sett-submit {
  border: none; background: var(--brand-gold-dark); color: #fff;
  padding: 8px 14px; border-radius: var(--radius-md); cursor: pointer;
  font-size: var(--fs-sm); font-family: var(--ff); transition: background .15s;
}
.sett-submit:hover { background: var(--brand-blue-dark); }
.sett-actions { margin-top: auto; display: flex; justify-content: flex-end; }
.sett-autosave-ok {
  display: inline-flex; align-items: center; gap: 3px;
  color: #2E7D32; font-size: var(--fs-xs); font-weight: 500;
  animation: sett-fade-in .3s ease;
}
@keyframes sett-fade-in { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-color-scheme: dark) {
  .sett-badge-on  { color: #66bb6a; background: rgba(46,125,50,.15); }
  .sett-badge-off { color: #ffb74d; background: rgba(255,183,77,.12); }
  .sett-status-on  { border-color: rgba(46,125,50,.3); background: rgba(46,125,50,.1); color: #81c784; }
  .sett-status-off { border-color: rgba(255,183,77,.3); background: rgba(255,183,77,.08); color: #ffb74d; }
}

/* ===== navbar2 (used in some templates) ===== */
.navbar2 {
  position: fixed;
  right: 15%;
  width: 70%;
  display: flex;
  align-items: center;
  background: var(--color-bg-secondary);
  border-top: 0.5px solid var(--color-border-tertiary);
  border-bottom: 0.5px solid var(--color-border-tertiary);
  z-index: 4;
  padding: 4px 8px;
  top: 94px;
  gap: 8px;
}


/* ═══════════════════════════════════════════════════════════════
   Activity Log System
   ═══════════════════════════════════════════════════════════════ */

/* ── Activity Page ── */
.act-page {
  max-width: 900px;
  margin: 1.5rem auto;
  padding: 0 1rem;
}
.act-page-header {
  margin-bottom: 1rem;
}
.act-page-title {
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--color-text-primary);
}
.act-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 1rem;
  align-items: center;
}

/* ── Activity Row (page) ── */
.act-row {
  padding: 10px 14px;
  border-bottom: 1px solid var(--color-border-tertiary);
  cursor: pointer;
  transition: background 0.15s;
}
.act-row:hover {
  background: var(--color-bg-secondary);
}
.act-row-main {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: var(--fs-sm);
  line-height: 1.6;
}
.act-row-action {
  font-weight: 500;
  white-space: nowrap;
}
.act-row-summary {
  color: var(--color-text-secondary);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.act-row-meta {
  margin-inline-start: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-2xs);
  color: var(--color-text-tertiary);
  white-space: nowrap;
}
.act-row-user { font-weight: 500; }
.act-row-ip { opacity: 0.7; }
/* شارة المصدر: القيد منسوب دائما لمستخدم، والشارة تقول عبر اي طريق نُفِّذ.
   «يدوي» لا شارة له — هو الحال الغالب فتصير الشارة ضجيجا على كل صف. */
.act-src-badge {
  font-size: 0.62rem;
  padding: 1px 6px;
  border-radius: 8px;
  font-weight: 600;
  white-space: nowrap;
  background: rgba(150, 150, 150, 0.16);
  color: var(--color-text-secondary);
}
.act-src-mcp { background: rgba(68, 99, 120, 0.14); color: var(--brand-blue-dark, #446378); }
.act-src-radar { background: rgba(178, 154, 112, 0.20); color: var(--brand-gold-dark, #8C7550); }
.act-expand-arrow {
  font-size: 10px;
  color: var(--color-text-tertiary);
  transition: transform 0.2s;
}

/* ── Icons per action type ── */
.act-icon {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  flex-shrink: 0;
  color: #fff;
}
.act-icon::before { font-family: 'Material Icons'; font-size: 12px; }
.act-icon-create { background: #4CAF50; }
.act-icon-create::before { content: '\e145'; }
.act-icon-edit { background: #2196F3; }
.act-icon-edit::before { content: '\e3c9'; }
.act-icon-delete { background: #f44336; }
.act-icon-delete::before { content: '\e872'; }
.act-icon-push { background: #9C27B0; }
.act-icon-push::before { content: '\e2c3'; }
.act-icon-import { background: #FF9800; }
.act-icon-import::before { content: '\e884'; }
.act-icon-login { background: #00BCD4; }
.act-icon-login::before { content: '\e8e8'; }
.act-icon-logout { background: #607D8B; }
.act-icon-logout::before { content: '\e9ba'; }
.act-icon-login_fail { background: #FF5722; }
.act-icon-login_fail::before { content: '\e628'; }
.act-icon-denied { background: #E91E63; }
.act-icon-denied::before { content: '\e14b'; }
.act-icon-comment { background: #8BC34A; }
.act-icon-comment::before { content: '\e0b9'; }
.act-icon-comment_resolve { background: #009688; }
.act-icon-comment_resolve::before { content: '\e876'; }
.act-icon-error { background: #f44336; }
.act-icon-error::before { content: '\e000'; }
.act-icon-system { background: #78909C; }
.act-icon-system::before { content: '\e8b8'; }

/* ── Expandable detail ── */
.act-detail {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease, padding 0.25s ease;
  padding: 0 8px;
  font-size: var(--fs-2xs);
}
.act-detail-open {
  max-height: 400px;
  padding: 8px;
  overflow-y: auto;
}
.act-change-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 2px 0;
  flex-wrap: wrap;
  line-height: 1.5;
  color: var(--color-text-secondary);
}
.act-field-name {
  font-weight: 600;
  color: var(--color-text-primary);
  min-width: 60px;
}
.act-old {
  text-decoration: line-through;
  opacity: 0.6;
  word-break: break-word;
}
.act-arrow {
  color: var(--color-text-tertiary);
  flex-shrink: 0;
}
.act-new {
  color: var(--color-text-primary);
  font-weight: 500;
  word-break: break-word;
}

/* ── Arrow rotation when expanded ── */
.act-row:has(.act-detail-open) .act-expand-arrow {
  transform: rotate(90deg);
}

/* ===== View Toggle Group ===== */
.view-toggle-group {
  display: inline-flex;
  border: 1px solid var(--color-border-secondary);
  border-radius: 6px;
  overflow: hidden;
  margin-inline-start: 8px;
}
.view-toggle-btn {
  padding: 3px 8px;
  border: none;
  background: var(--color-bg-primary);
  color: var(--color-text-tertiary);
  cursor: pointer;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  transition: background .15s, color .15s;
}
.view-toggle-btn:not(:last-child) {
  border-left: 1px solid var(--color-border-secondary);
}
.view-toggle-btn.active {
  background: var(--brand-blue);
  color: #fff;
  cursor: default;
}
.view-toggle-btn:not(.active):hover {
  background: var(--brand-gold-light);
  color: var(--brand-blue-dark);
}

/* ===== Events Table Container ===== */
#events-table-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

/* ===== تصنيف الاحداث v2: صف القوائم + combobox النوع ===== */
.card-meta-v2 { margin-top: 4px; gap: 6px; flex-wrap: wrap; }
/* شارة Jev: حكم آلي يخالف تصنيف v2 (EventClassJudgment) — للمراجعة */
.jev-hint { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; margin-top: 4px;
    font-size: 12px; color: var(--color-text-secondary); }
.jev-hint-tag { font-family: var(--mono); font-size: 11px; font-weight: 600; padding: 0 6px;
    border: 1px solid var(--brand-gold); border-radius: var(--radius-sm); color: var(--brand-gold); }
.jev-hint-diff { font-weight: 600; color: var(--color-text-primary); }
.jev-hint-conf { font-family: var(--mono); font-size: 11px; color: var(--color-text-tertiary); }
.jev-hint-sep { color: var(--color-text-tertiary); }
/* صفحة مراجعة أحكام Jev */
.jev-row { display: grid; gap: 4px; padding: 8px 10px; cursor: pointer;
    border: 1px solid var(--color-border-tertiary); border-radius: var(--radius-sm);
    background: var(--color-bg-secondary); }
.jev-row:hover, .jev-row:focus-visible { border-color: var(--brand-gold); outline: none; }
.jev-row-head { display: flex; gap: 8px; align-items: baseline; font-size: var(--fs-sm); min-width: 0; }
.jev-row-id, .jev-row-date { flex: none; font-family: var(--mono); font-size: 11px; color: var(--color-text-tertiary); }
.jev-row-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.jev-row-cmp { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; font-size: 12px;
    color: var(--color-text-secondary); }
.jev-row-lab { font-size: 11px; padding: 0 6px; border: 1px solid var(--color-border-secondary);
    border-radius: var(--radius-sm); color: var(--color-text-tertiary); }
/* صفحة المكررات: احكام Jev على ازواج الوقائع (jev_dups) */
.jev-dup-chip { font-size: var(--fs-2xs); font-weight: 600; margin-right: 6px; padding: 1px 8px;
    border: 1px solid var(--brand-gold); border-radius: var(--radius-pill); color: var(--brand-gold); }
.jev-dup-verdict { flex: none; max-width: 45%; font-size: 11px; padding: 0 6px; border-radius: var(--radius-sm);
    border: 1px solid var(--color-border-secondary); color: var(--color-text-secondary); overflow-wrap: anywhere; }
.jev-dup-l0 { border-color: #c0392b; color: #c0392b; font-weight: 600; }
.jev-dup-l2 { border-color: var(--brand-gold); color: var(--color-text-primary); }
.jev-dup-warn { margin-top: 6px; padding: 4px 8px; font-size: var(--fs-2xs); color: #c0392b;
    border: 1px solid #c0392b; border-radius: var(--radius-sm); }
.dup-member { flex-wrap: wrap; }
@media (max-width: 600px) { .jev-dup-verdict { max-width: 100%; flex-basis: 100%; } }
.classv2-select { max-width: 42%; }
.classv2-combo { position: relative; display: inline-block; }
.classv2-combo-input { min-width: 120px; }
.classv2-combo-list {
    position: absolute; z-index: 60; top: 100%; inset-inline-start: 0;
    min-width: 220px; max-height: 260px; overflow-y: auto;
    background: var(--color-bg-primary); border: 1px solid var(--brand-gold);
    border-radius: var(--radius-sm); box-shadow: 0 4px 14px rgba(0,0,0,.18);
    padding: 4px 0;
}
.classv2-combo-fam {
    padding: 3px 10px; font-size: var(--fs-2xs); font-weight: 700;
    color: var(--brand-gold-dark); background: var(--color-bg-secondary);
    position: sticky; top: 0;
}
.classv2-combo-opt {
    padding: 4px 14px; font-size: var(--fs-2xs); cursor: pointer;
    color: var(--color-text-primary); white-space: nowrap;
}
.classv2-combo-opt:hover { background: var(--brand-blue); color: #fff; }

/* ===== ودجات «لوحتي اليومية» (teiapp/widgets.py) =====
   تعيش هنا لا في fragment اللوحة: htmx يُسقط <style> من مطلع
   المحتوى المبدَل (يُرفَع إلى head عند التحليل ويؤخذ body وحده). */
  .wgx-head { display:flex; align-items:center; gap:6px; margin:0 0 10px; }
  .wgx-head-title { font-size:0.9rem; font-weight:700; color:var(--brand-blue-dark); }
  .wgx-customize {
    display:inline-flex; align-items:center; gap:4px; border:0; background:none;
    font-family:inherit; font-size:var(--fs-2xs); font-weight:600;
    color:var(--color-text-tertiary); cursor:pointer; padding:2px 6px; border-radius:6px;
  }
  .wgx-customize:hover { color:var(--brand-blue); background:var(--color-bg-secondary); }
  .wgx-customize .material-icons { font-size:0.9rem; }
  .wgx-grid {
    display:grid; grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
    gap:14px; margin-bottom:14px;
    /* لا align-items:start هنا: كانت تترك كل بطاقة على ارتفاعها فيظهر
       الصف مسنّناً — التمدد الافتراضي يساوي ارتفاعات الصف الواحد. */
  }
  .wgx-card {
    background:var(--color-bg-primary); border:1px solid var(--color-border-tertiary);
    border-radius:10px; padding:14px 16px; min-width:0; overflow:hidden;
    display:flex; flex-direction:column;
  }
  /* ذيل البطاقة (تاريخ هجري، تنويه الأسعار، شريط السودوكو…) يلتصق
     بأسفلها كي تبدو البطاقات المتساوية مقصودة لا مفرّغة. */
  .wgx-foot { margin-top:auto; padding-top:8px; }
  .wgx-card-title {
    display:flex; align-items:center; gap:6px; margin:0 0 10px; padding-bottom:8px;
    border-bottom:1px solid var(--color-border-tertiary);
    font-size:var(--fs-sm); font-weight:700; color:var(--brand-blue-dark);
  }
  .wgx-card-title .material-icons { font-size:1rem; color:var(--brand-blue); opacity:.7; }
  .wgx-card-sub { font-size:var(--fs-2xs); color:var(--color-text-tertiary); font-weight:400; }
  .wgx-spacer { flex:1; }
  .wgx-prayer-row {
    display:flex; align-items:center; justify-content:space-between;
    padding:4px 8px; border-radius:6px; font-size:var(--fs-sm);
    color:var(--color-text-secondary);
  }
  .wgx-prayer-row.passed { color:var(--color-text-tertiary); }
  .wgx-prayer-row .wgx-time { font-weight:700; direction:ltr; }
  .wgx-prayer-next {
    background:var(--brand-gold-light); border:1px solid var(--color-border-tertiary);
    padding:5px 8px;
  }
  .wgx-prayer-next, .wgx-prayer-next .wgx-time { color:var(--brand-gold-dark); font-weight:700; }
  .wgx-otd-row {
    border-inline-start:3px solid var(--card-accent);
    background:var(--card-accent-bg); border-radius:6px; padding:7px 10px;
    cursor:pointer;
  }
  .wgx-otd-ago { font-size:var(--fs-2xs); font-weight:700; color:var(--card-accent); margin-bottom:2px; }
  .wgx-otd-text { font-size:var(--fs-xs); color:var(--color-text-primary); line-height:1.5;
                  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .wgx-hol-row { display:flex; align-items:center; gap:8px; }
  .wgx-hol-date {
    width:36px; height:40px; border-radius:8px; flex-shrink:0;
    background:var(--color-bg-secondary); border:1px solid var(--color-border-secondary);
    display:flex; flex-direction:column; align-items:center; justify-content:center;
  }
  .wgx-hol-row.first .wgx-hol-date {
    background:var(--brand-gold-light); border-color:var(--color-border-tertiary);
  }
  .wgx-hol-day { font-size:0.9rem; font-weight:800; color:var(--brand-blue); line-height:1; }
  .wgx-hol-row.first .wgx-hol-day, .wgx-hol-row.first .wgx-hol-mon { color:var(--brand-gold-dark); }
  .wgx-hol-mon { font-size:0.6rem; color:var(--brand-blue); }
  .wgx-hol-name { font-size:var(--fs-sm); font-weight:700; color:var(--color-text-primary); }
  .wgx-hol-when { font-size:var(--fs-2xs); color:var(--color-text-tertiary); }
  .wgx-quote-strip {
    background:var(--color-bg-primary); border:1px solid var(--color-border-tertiary);
    border-inline-start:3px solid var(--brand-gold); border-radius:10px;
    padding:12px 16px; display:flex; align-items:center; gap:12px; margin-bottom:22px;
  }
  .wgx-mini-sudoku {
    display:grid; grid-template-columns:repeat(9, 19px); grid-auto-rows:19px;
    border:2px solid var(--brand-blue-dark); direction:ltr; margin:0 auto;
  }
  .wgx-mini-sudoku span {
    display:flex; align-items:center; justify-content:center; font-size:10px;
    border-left:1px solid var(--color-border-secondary);
    border-top:1px solid var(--color-border-secondary);
    color:var(--color-text-primary); font-weight:700; background:var(--color-bg-primary);
  }
  .wgx-mini-sudoku span:nth-child(9n+1) { border-left:none; }
  .wgx-mini-sudoku span:nth-child(-n+9) { border-top:none; }
  .wgx-mini-sudoku span:nth-child(9n+4), .wgx-mini-sudoku span:nth-child(9n+7)
    { border-left:2px solid var(--brand-blue-dark); }
  .wgx-mini-sudoku span:nth-child(n+28):nth-child(-n+36),
  .wgx-mini-sudoku span:nth-child(n+55):nth-child(-n+63)
    { border-top:2px solid var(--brand-blue-dark); }
  .wgx-play-btn {
    display:inline-flex; align-items:center; padding:4px 14px; border:0;
    border-radius:var(--radius-pill); background:var(--brand-blue); color:#fff;
    font-family:inherit; font-size:var(--fs-xs); font-weight:700; cursor:pointer;
  }
  .wgx-play-btn:hover { background:var(--brand-blue-dark); }
  .wgx-invite {
    display:flex; align-items:center; gap:10px; margin-bottom:22px;
    padding:10px 16px; border:1px dashed var(--color-border-secondary);
    border-radius:10px; background:var(--color-bg-secondary);
    font-size:var(--fs-xs); color:var(--color-text-tertiary);
  }

/* ── شريط الترقيم المشترك (‎_pager.html‎) ────────────────────────────
   الشاشات الاربع كانت بـ«تحميل المزيد» وحده: ‎7551‎ كيانا = ‎152‎ صفحة
   و‎151‎ نقرة، بلا علم اين انت. */
.pager { display:inline-flex; align-items:center; gap:4px; }
.pager-btn { display:inline-flex; align-items:center; justify-content:center;
  min-width:26px; height:26px; padding:0 6px; border:1px solid var(--color-border);
  border-radius:6px; background:var(--color-bg-primary); cursor:pointer;
  color:var(--brand-blue); font-size:var(--fs-sm); line-height:1;
  text-decoration:none; user-select:none; }
.pager-btn:hover { background:var(--color-bg-secondary); }
.pager-off { color:var(--color-text-tertiary); cursor:default; opacity:.5; }
.pager-off:hover { background:var(--color-bg-primary); }
.pager-pos { font-size:var(--fs-xs); color:var(--color-text-secondary);
  white-space:nowrap; padding:0 4px; }
.pager-jump { width:58px; height:26px; padding:0 6px; text-align:center;
  border:1px solid var(--color-border); border-radius:6px;
  background:var(--color-bg-primary); color:var(--color-text-primary);
  font-size:var(--fs-xs); }

/* ── عائلات الشريط العلوي (nav-group) ───────────────────────────────
   البند الفعّال داخل العائلة المنسدلة: ذهبيّ كي يُعرف اين انت بعد ان
   صار اسمه مطويّا تحت اسم العائلة. المنسدلة نفسها ترث قواعد
   nav-dropdown-menu بلا زيادة. */
.nav-dropdown-menu li a.nav-active { color: var(--brand-gold); }

/* تاريخ التعديلات (change_history.py): ابراز الكلمات، ما تغيّر في كل نسخة،
   وعلامة القيد المستنتج من النسخ */
.vd-ins { background: rgba(46,160,67,.18); text-decoration: none; border-radius: 2px; }
.vd-del { background: rgba(192,57,43,.15); text-decoration: line-through; border-radius: 2px; }
.ver-summary { color: var(--color-text-tertiary); font-size: var(--fs-2xs); max-width: 260px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ver-changes { border: 1px solid var(--color-border-tertiary); border-radius: 6px;
  padding: 6px 8px; margin-bottom: 8px; background: var(--color-bg-secondary); }
.ver-changes-title, .ver-full-title { font-weight: 600; color: var(--brand-blue-dark);
  margin-bottom: 4px; }
.ver-full-title { color: var(--color-text-tertiary); font-weight: 500; }
.ver-also { font-weight: 400; color: var(--color-text-tertiary); }
.ver-change-row { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap;
  padding: 3px 0; border-top: 1px dashed var(--color-border-tertiary); line-height: 1.6; }
.ver-change-row:first-of-type { border-top: 0; }
.ver-change-label { font-weight: 600; min-width: 70px; color: var(--color-text-secondary); }
.ver-diff { word-break: break-word; }
.act-inferred { font-size: var(--fs-2xs); color: var(--color-text-tertiary); margin-top: 4px;
  font-style: italic; }