/* ===== 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);

  --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 — نص رئيسي */

  /* Category accent colours */
  --accent-حوادث:    #C0392B; --accent-bg-حوادث:    #FDECEA; --accent-tx-حوادث:    #922B21;
  --accent-تصريحات:  #537B91; --accent-bg-تصريحات:  #e8f0f5; --accent-tx-تصريحات:  #446378;
  --accent-سياسة:    #6C5A8E; --accent-bg-سياسة:    #EEE9F5; --accent-tx-سياسة:    #4A3870;
  --accent-اقتصاد:   #B29A70; --accent-bg-اقتصاد:   #F5F0E8; --accent-tx-اقتصاد:   #7A6340;
  --accent-اجتماع:   #1D8A6E; --accent-bg-اجتماع:   #E2F3EE; --accent-tx-اجتماع:   #0D5E49;
  --accent-default:  #B29A70;
}

@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);
  }
}

/* ===== 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);
}

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 filter bar */
  left: 0;
  right: 0;
  bottom: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-top: 12px;
  padding-left: 14px;
  padding-right: 14px;
}

/* Tags page: lock main scroll, keep scrolling inside tags table panel only */
main:has(#tags-container) {
  overflow: hidden;
  padding-top: 0;
}
#tags-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 {
  position: sticky;
  top: 0;
  z-index: 12;
}

/* Tags page only: make table panel own the scrolling, not the whole page */
#mainlistdiv:has(#tags-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;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  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;
}

.navbrand1 {
  position: absolute;
  right: 20px;
}

.navitem1 {
  margin-left: 1.2%;
  display: inline-block;
  position: relative;
  cursor: pointer;
  font-weight: 500;
  font-size: var(--fs-nav);
  white-space: nowrap;
  color: rgba(255,255,255,0.75);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  transition: background .15s, color .15s, border-color .15s;
  border-bottom: 2px solid transparent;
}
.navitem1:hover { background: transparent; color: #ffffff; border-bottom-color: var(--brand-gold); }
.navitem1 a { color: inherit; }

/* ===== Filter / secondary bar (navbar11) ===== */
.navbar11 {
  position: fixed;
  top: 52px;
  width: 100%;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 1.25rem;
  background: var(--color-bg-primary);
  border-bottom: 1px solid var(--color-border-tertiary);
  overflow-x: auto;
  z-index: 90;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: transform;
}

/* 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-left: 0;
  transition: all .15s;
}
.navbar11 .navitem1:hover {
  background: var(--brand-blue-dark);
  color: #ffffff;
  border-color: var(--brand-blue-dark);
}
.navbar11 .navitem1 a { color: inherit; }

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

.nav-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  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 6px 20px rgba(68,99,120,0.3);
  white-space: nowrap;
}
.nav-dropdown:hover > .nav-dropdown-menu { display: block; }

.nav-dropdown-menu li {
  padding: 0; margin: 0; display: block; position: relative;
}
.nav-dropdown-menu li a,
.nav-dropdown-menu li > span.nav-sub-label {
  display: block;
  padding: 8px 16px;
  font-size: var(--fs-nav);
  font-weight: 500;
  color: rgba(255,255,255,0.85);
  cursor: pointer;
  transition: background .12s, color .12s;
}
.nav-dropdown-menu li a:hover,
.nav-dropdown-menu li > span.nav-sub-label:hover {
  background: var(--brand-blue);
  color: #ffffff;
}

/* Sub-menu (second level) */
.nav-sub-menu {
  display: none;
  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;
}
.nav-dropdown-menu li:hover > .nav-sub-menu { display: block; }
.nav-sub-menu li a {
  display: block;
  padding: 8px 16px;
  font-size: var(--fs-nav);
  font-weight: 500;
  color: rgba(255,255,255,0.85);
}
.nav-sub-menu li a:hover {
  background: var(--brand-blue);
  color: #ffffff;
}

/* ===== Notification panel ===== */
#notif-panel {
  right: auto !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  border-top: 2px solid var(--brand-gold) !important;
}

/* Operations icon spin */
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
#notif-icon.spinning { animation: spin 1.2s linear infinite; }
#notif-icon { color: var(--brand-gold) !important; }
#notif-icon:hover { color: var(--brand-gold-dark) !important; }

/* ===== Event Cards (recordcontainer1) ===== */
.recordcontainer1 {
  background: var(--color-bg-primary);
  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);
}

/* Colored right-edge bar — background set inline via data-etype */
.card-bar {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: 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;
  padding: 6px 4px;
  max-height: 110px;
  overflow-y: auto;
  background: transparent;
  outline: none;
  border: none;
}
.container1item:focus {
  background: var(--color-bg-secondary);
  border-radius: var(--radius-sm);
}

/* 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;
}

/* 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;
}

/* Tag text input */
.inputbox {
  font-family: var(--ff);
  font-size: var(--fs-sm);
  height: 22px;
  width: 110px;
  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); }

/* ===== 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:focus, .container2item:hover { border-color: var(--brand-gold-dark); color: var(--brand-blue-dark); }

.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); }

.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 kebab (⋮) menu ===== */
.card-kebab-btn {
  position: absolute;
  top: 8px;
  left: 10px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1.1em;
  color: var(--color-text-tertiary);
  transition: background .12s, color .12s;
  z-index: 10;
  user-select: none;
  line-height: 1;
}
.card-kebab-btn:hover { background: var(--color-bg-secondary); color: var(--brand-blue-dark); }

.card-drop {
  background: white;
  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); 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,
td.cell-editing[data-col-name="parent"] .container2item,
td.cell-editing[data-col-name="synonyms"] .container2item,
td.cell-editing[data-col-name="name"] .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,
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 {
  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: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 8px 16px;
  background: var(--color-bg-primary);
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -2px 8px rgba(0,0,0,.08);
  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: 8em;
  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;
}

/* ===== 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;
  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%);
}

/* ===== 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;
}