/* =========================================================================
   منصة متابعة مشروع تطوير منطقة الخالدية — نظام التصميم
   شركة دور العمران — إدارة المشاريع
   ========================================================================= */

/* ---------- 1. الرموز (Design Tokens) ---------- */
:root {
  --bg:            #F4F6F8;
  --bg-elevated:   #EBEEF2;
  --surface:       #FFFFFF;
  --surface-2:     #F8FAFB;
  --surface-3:     #EFF2F5;
  --border:        #DFE4EA;
  --border-strong: #C4CCD6;
  --text:          #14202D;
  --text-2:        #45566A;
  --muted:         #6B7C90;
  --faint:         #97A5B5;

  --brand:         #123A5E;
  --brand-2:       #1B5286;
  --brand-soft:    #E7EEF5;
  --accent:        #B08130;
  --accent-soft:   #FAF2E2;

  --ok:            #1B7F63;
  --ok-soft:       #E4F3ED;
  --warn:          #B9761B;
  --warn-soft:     #FBF0DF;
  --danger:        #B23A32;
  --danger-soft:   #FAE9E7;
  --info:          #2A6BB0;
  --info-soft:     #E8F0F9;
  --neutral:       #7B8896;
  --neutral-soft:  #EDF0F3;

  --shadow-sm: 0 1px 2px rgba(16, 30, 47, .06);
  --shadow:    0 2px 8px rgba(16, 30, 47, .08);
  --shadow-lg: 0 12px 40px rgba(16, 30, 47, .16);

  --r-sm: 6px;  --r: 10px;  --r-lg: 14px;  --r-xl: 20px;
  --sidebar-w: 244px;
  --header-h: 60px;

  --font: 'Segoe UI', 'IBM Plex Sans Arabic', 'Noto Kufi Arabic', Tahoma, Arial, sans-serif;
  --mono: 'Cascadia Mono', 'Consolas', 'Courier New', monospace;
}

[data-theme="dark"] {
  --bg:            #0C1420;
  --bg-elevated:   #0F1926;
  --surface:       #131E2C;
  --surface-2:     #182534;
  --surface-3:     #1E2C3D;
  --border:        #253546;
  --border-strong: #35485D;
  --text:          #E7EDF4;
  --text-2:        #B3C1D1;
  --muted:         #8A9BB0;
  --faint:         #6B7D93;

  --brand:         #4E8FC9;
  --brand-2:       #6BA6DA;
  --brand-soft:    #16293D;
  --accent:        #D3A44E;
  --accent-soft:   #2C2313;

  --ok:            #46B98F;
  --ok-soft:       #102E25;
  --warn:          #DCA04A;
  --warn-soft:     #302411;
  --danger:        #E06B60;
  --danger-soft:   #331815;
  --info:          #5C9BE0;
  --info-soft:     #10243A;
  --neutral:       #93A3B5;
  --neutral-soft:  #1D2A38;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow:    0 2px 10px rgba(0,0,0,.45);
  --shadow-lg: 0 16px 48px rgba(0,0,0,.6);
}

/* ---------- 2. الأساسيات ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
/* اتجاه شبكة الجدول الزمني يتبع اللغة */
html[dir="rtl"] { --gantt-grid-dir: left; }
html[dir="ltr"] { --gantt-grid-dir: right; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.35; letter-spacing: -.01em; }
p { margin: 0; }
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--brand-2); text-decoration: none; }
table { border-collapse: collapse; width: 100%; }
[hidden] { display: none !important; }
.num { font-variant-numeric: tabular-nums; direction: ltr; display: inline-block; }
/* خلية الجدول تبقى خلية: display:inline-block يخرجها من نموذج الأعمدة فتنزاح الصفوف */
td.num, th.num { display: table-cell; }
.ltr { direction: ltr; text-align: left; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 8px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }

/* ---------- 3. شاشة الدخول ---------- */
.auth-screen {
  position: fixed; inset: 0; z-index: 100;
  display: grid; grid-template-columns: 1fr 460px;
  background: var(--surface);
}
.auth-art {
  position: relative; overflow: hidden;
  background: linear-gradient(155deg, #0B2439 0%, #123A5E 45%, #1B5286 100%);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 44px 48px; color: #fff;
}
.auth-art::after {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 78% 18%, rgba(176,129,48,.30), transparent 46%),
    radial-gradient(circle at 12% 84%, rgba(78,143,201,.28), transparent 52%);
}
.auth-art > * { position: relative; z-index: 1; }
.auth-art h1 { font-size: 34px; font-weight: 700; margin-bottom: 12px; }
.auth-art .sub { color: rgba(255,255,255,.78); font-size: 15px; max-width: 44ch; }
.auth-brand { display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: 16px; }
.auth-stats { display: flex; gap: 34px; flex-wrap: wrap; }
.auth-stats div span { display: block; }
.auth-stats .v { font-size: 27px; font-weight: 700; font-variant-numeric: tabular-nums; }
.auth-stats .l { font-size: 12.5px; color: rgba(255,255,255,.66); }
.auth-panel { display: flex; flex-direction: column; justify-content: center; padding: 40px 46px; overflow-y: auto; }
.auth-panel h2 { font-size: 23px; margin-bottom: 6px; }
.auth-panel .lead { color: var(--muted); margin-bottom: 26px; font-size: 13.5px; }
.auth-error {
  background: var(--danger-soft); color: var(--danger);
  border: 1px solid color-mix(in srgb, var(--danger) 32%, transparent);
  padding: 10px 13px; border-radius: var(--r-sm); font-size: 13px; margin-bottom: 16px;
}
.auth-note {
  margin-top: 22px; padding: 13px 15px; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--r); font-size: 12.5px; color: var(--muted);
}

/* ---------- 4. الحقول ---------- */
.field { margin-bottom: 15px; }
.field > label { display: block; font-size: 12.5px; font-weight: 600; color: var(--text-2); margin-bottom: 6px; }
.field .hint { font-size: 11.5px; color: var(--faint); margin-top: 5px; font-weight: 400; }
.input, .select, .textarea {
  width: 100%; padding: 9px 12px;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--r-sm); outline: none; transition: border-color .15s, box-shadow .15s;
}
.textarea { min-height: 78px; resize: vertical; line-height: 1.6; }
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--brand-2);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-2) 18%, transparent);
}
.input:disabled, .select:disabled, .textarea:disabled { background: var(--surface-3); color: var(--muted); cursor: not-allowed; }
.select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: left 14px top 51%, left 9px top 51%; background-size: 5px 5px; background-repeat: no-repeat; padding-left: 30px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.field-row-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; }
.check { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; user-select: none; }
.check input { width: 15px; height: 15px; accent-color: var(--brand-2); cursor: pointer; }

/* ---------- 5. الأزرار ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 8px 15px; border-radius: var(--r-sm); border: 1px solid var(--border-strong);
  background: var(--surface); color: var(--text); font-size: 13px; font-weight: 600;
  transition: background .14s, border-color .14s, transform .06s; white-space: nowrap;
}
.btn:hover { background: var(--surface-3); border-color: var(--muted); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-2); border-color: var(--brand-2); }
.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-danger:hover { filter: brightness(1.08); background: var(--danger); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--text-2); }
.btn-ghost:hover { background: var(--surface-3); border-color: transparent; }
.btn-block { width: 100%; }
.btn-lg { padding: 11px 20px; font-size: 14px; }
.btn-sm { padding: 5px 10px; font-size: 12px; }
.btn-icon { padding: 6px; width: 30px; height: 30px; }
/* الأيقونة بلا مقاس صريح تتمدّد بتمدّد الزر — تظهر عملاقة متى صار الزر
   عريضًا (كما في شريط أدوات الجوال). نثبّت مقاسها. */
.btn svg { width: 15px; height: 15px; flex: 0 0 15px; }
.btn-lg svg { width: 17px; height: 17px; flex-basis: 17px; }
.btn-sm svg { width: 13px; height: 13px; flex-basis: 13px; }
.btn-icon svg { width: 16px; height: 16px; flex-basis: 16px; }

/* ---------- 6. الهيكل ---------- */
.app { display: none; min-height: 100vh; }
.app.ready { display: block; }
/* الشريط الجانبي يتبع اتجاه اللغة: يمينًا في العربية، يسارًا في الإنجليزية */
.sidebar {
  position: fixed; inset-block: 0; inset-inline-start: 0; width: var(--sidebar-w);
  background: var(--surface); border-inline-end: 1px solid var(--border);
  display: flex; flex-direction: column; z-index: 40;
}
.sidebar-head { padding: 17px 18px; border-bottom: 1px solid var(--border); }
.logo { display: flex; align-items: center; gap: 11px; }
/* مربّع الهوية: يحمل شعار مدير المشروع، ويعود لحرفين إن تعذّر تحميل الصورة */
.logo-mark {
  width: 38px; height: 38px; border-radius: 9px; flex: 0 0 38px; overflow: hidden;
  background: linear-gradient(140deg, var(--brand) 0%, var(--brand-2) 100%);
  display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 15px;
}
.logo-mark.has-img {
  background: #fff; border: 1px solid var(--border-strong); padding: 4px;
}
.logo-mark img { width: 100%; height: 100%; object-fit: contain; display: block; }
.auth-brand .logo-mark.has-img { border-color: rgba(255,255,255,.35); }
.logo-text .t { font-size: 13.5px; font-weight: 700; line-height: 1.25; }
.logo-text .s { font-size: 11px; color: var(--muted); }
.nav { flex: 1; overflow-y: auto; padding: 12px 10px; }
.nav-group { font-size: 10.5px; font-weight: 700; color: var(--faint); letter-spacing: .07em; padding: 13px 10px 6px; }
.nav-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 11px; margin-bottom: 2px; border: 0; background: transparent;
  border-radius: var(--r-sm); color: var(--text-2); font-size: 13.5px; font-weight: 500;
  text-align: start; transition: background .13s, color .13s;
}
.nav-item:hover { background: var(--surface-3); color: var(--text); }
.nav-item.active { background: var(--brand-soft); color: var(--brand-2); font-weight: 600; }
.nav-item svg { width: 17px; height: 17px; flex: 0 0 17px; stroke-width: 1.9; }
.nav-badge { margin-inline-start: auto; background: var(--danger); color: #fff; font-size: 10.5px; font-weight: 700; padding: 1px 6px; border-radius: 9px; }
.sidebar-foot { padding: 12px; border-top: 1px solid var(--border); }
.user-chip { display: flex; align-items: center; gap: 10px; padding: 7px 9px; border-radius: var(--r-sm); background: var(--surface-2); }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 12.5px; flex: 0 0 32px; }
.user-chip .n { font-size: 12.5px; font-weight: 600; line-height: 1.3; }
.user-chip .r { font-size: 11px; color: var(--muted); }

.main { margin-inline-start: var(--sidebar-w); min-height: 100vh; display: flex; flex-direction: column; }
.topbar {
  height: var(--header-h); position: sticky; top: 0; z-index: 30;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 14px; padding: 0 22px;
}
.topbar h1 { font-size: 17px; }
.topbar .crumb { font-size: 12px; color: var(--muted); }
.topbar-actions { margin-inline-start: auto; display: flex; align-items: center; gap: 8px; }
.content { padding: 22px; flex: 1; }
.page { display: none; animation: fade .22s ease; }
.page.active { display: block; }
@keyframes fade { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

/* ---------- 7. البطاقات ---------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
.card-head { display: flex; align-items: center; gap: 12px; padding: 15px 18px; border-bottom: 1px solid var(--border); }
.card-head h3 { font-size: 14.5px; }
.card-head .sub { font-size: 12px; color: var(--muted); }
.card-head .actions { margin-inline-start: auto; display: flex; gap: 7px; align-items: center; }
.card-body { padding: 18px; }
.card-body.flush { padding: 0; }

.grid { display: grid; gap: 16px; }
.g-kpi  { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.g-2    { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.g-2-1  { grid-template-columns: 2fr 1fr; }
.g-3    { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
@media (max-width: 1150px) { .g-2-1 { grid-template-columns: 1fr; } }

.kpi { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 16px 17px; box-shadow: var(--shadow-sm); position: relative; overflow: hidden; }
.kpi::before { content: ''; position: absolute; inset-block-start: 0; inset-inline: 0; height: 3px; background: var(--accent-line, var(--brand)); }
.kpi .l { font-size: 12px; color: var(--muted); font-weight: 600; margin-bottom: 7px; display: flex; align-items: center; gap: 6px; }
.kpi .v { font-size: 27px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.kpi .v small { font-size: 15px; font-weight: 600; color: var(--muted); }
.kpi .d { font-size: 11.5px; color: var(--muted); margin-top: 6px; }
.kpi .d.up { color: var(--ok); } .kpi .d.down { color: var(--danger); }

/* ---------- 8. الشارات ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px; border-radius: 20px; font-size: 11.5px; font-weight: 600; white-space: nowrap;
}
.badge::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.badge.no-dot::before { display: none; }
/* شارة ممتلئة بلون الحالة — تباين قوي يُقرأ من مسافة */
.badge.badge-solid {
  background: var(--sc); color: #fff; font-weight: 700;
  border: 1px solid color-mix(in srgb, var(--sc) 80%, #000);
  padding: 2px 10px; letter-spacing: .01em;
}
.b-ok      { background: var(--ok-soft);      color: var(--ok); }
.b-warn    { background: var(--warn-soft);    color: var(--warn); }
.b-danger  { background: var(--danger-soft);  color: var(--danger); }
.b-info    { background: var(--info-soft);    color: var(--info); }
.b-neutral { background: var(--neutral-soft); color: var(--neutral); }
.b-accent  { background: var(--accent-soft);  color: var(--accent); }

/* ---------- 9. الجداول ---------- */
.tbl-wrap { overflow-x: auto; }
.tbl { font-size: 13px; }
.tbl thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--surface-2); text-align: start; font-weight: 600; font-size: 11.5px;
  color: var(--muted); letter-spacing: .02em; padding: 9px 12px;
  border-bottom: 1px solid var(--border); white-space: nowrap; user-select: none;
}
.tbl thead th.sortable { cursor: pointer; }
.tbl thead th.sortable:hover { color: var(--text); }
.tbl thead th .arrow { font-size: 9px; opacity: .55; }
.tbl tbody td { padding: 9px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.tbl tbody tr:hover { background: var(--surface-2); }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl .t-name { font-weight: 600; color: var(--text); }
.tbl .t-note { font-size: 11.5px; color: var(--muted); margin-top: 2px; max-width: 46ch; }
.row-actions { display: flex; gap: 4px; opacity: .35; transition: opacity .13s; }
tr:hover .row-actions { opacity: 1; }
.stage-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-inline-end: 7px; flex: 0 0 8px; }

.bar { height: 6px; border-radius: 4px; background: var(--surface-3); overflow: hidden; min-width: 62px; }
.bar > i { display: block; height: 100%; border-radius: 4px; background: var(--ok); transition: width .3s; }
.bar-cell { display: flex; align-items: center; gap: 9px; }
.bar-cell .pct { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; min-width: 34px; }

/* ---------- 10. شريط الأدوات والفلاتر ---------- */
.toolbar { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 15px; }
.toolbar .grow { flex: 1; min-width: 170px; }
.search { position: relative; }
.search .input { padding-inline-start: 34px; }
.search svg { position: absolute; inset-inline-start: 10px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--faint); pointer-events: none; }
.chip-row { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  padding: 4px 11px; border-radius: 20px; border: 1px solid var(--border-strong);
  background: var(--surface); font-size: 12px; font-weight: 600; color: var(--text-2);
}
.chip:hover { border-color: var(--muted); }
.chip.on { background: var(--brand); border-color: var(--brand); color: #fff; }

/* ---------- 11. مخطط جانت ---------- */
.gantt-wrap {
  overflow: auto; position: relative;
  /* قيمةٌ احتياطية حتى يقيس JS الارتفاع الحقيقي بعد أول رسم */
  max-height: calc(100vh - 250px);
  overscroll-behavior: contain;   /* التمرير يبقى في الجدول لا ينزلق للصفحة */
}
/* «الكل»: المشروع بعرض الشاشة، فلا تمرير أفقي ولا أسبوع يختفي عند حافّة */
.gantt-wrap.fit { overflow-x: hidden; }
.gantt-wrap.fit .gantt { min-width: 0; }
/* العناوين متقاربة في هذا العرض، فتُصغَّر ولا تُقصّ */
.gantt-wrap.fit .gantt-tick { font-size: 9.5px; padding-inline: 0; }
.gantt { min-width: max-content; font-size: 12px; position: relative; }
.gantt-row { display: flex; border-bottom: 1px solid var(--border); min-height: 34px; position: relative; }

/* ---- السحب لإعادة الترتيب ---- */
/* مقبض السحب: ظاهر دائمًا ليكون مكتشَفًا، ويتضح أكثر عند المرور */
.drag-handle {
  display: inline-grid; place-items: center;
  width: 18px; height: 20px; flex: 0 0 18px; margin-inline-end: 6px;
  color: var(--muted); font-size: 14px; line-height: 1; letter-spacing: -1px;
  border-radius: 4px; cursor: grab; user-select: none;
  transition: background .13s, color .13s;
}
.gantt-row.draggable:hover .drag-handle {
  color: var(--brand-2); background: var(--brand-soft);
}
.drag-handle:active { cursor: grabbing; }
.gantt-row.draggable .gantt-label {
  cursor: grab; user-select: none; touch-action: pan-x;
}
.gantt-row.dragging { opacity: .5; }
.gantt-row.dragging .gantt-label { cursor: grabbing; }
body.is-dragging, body.is-dragging * { cursor: grabbing !important; user-select: none !important; }
/* هدف إفلات غير صالح */
.gantt-row.drop-invalid { outline: 2px dashed var(--danger); outline-offset: -2px; }
.gantt-row.drop-invalid .gantt-label { background: var(--danger-soft); }
/* مؤشر موضع الإفلات — فوق العمود الملتصق */
.gantt-row.drop-before::after,
.gantt-row.drop-after::after {
  content: ''; position: absolute; inset-inline: 0; height: 3px;
  background: var(--brand-2); z-index: 9; pointer-events: none;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand-2) 40%, transparent);
}
.gantt-row.drop-before::after { top: -1px; }
.gantt-row.drop-after::after  { bottom: -1px; }
.gantt-row:hover { background: var(--surface-2); }
.gantt-row.stage-row { background: var(--surface-3); font-weight: 700; position: sticky; z-index: 3; }
.gantt-label {
  position: sticky; inset-inline-start: 0; z-index: 5;
  width: 320px; flex: 0 0 320px; padding: 7px 12px;
  background: var(--surface); border-inline-end: 1px solid var(--border-strong);
  display: flex; align-items: center; gap: 8px; overflow: hidden;
}
.gantt-row:hover .gantt-label { background: var(--surface-2); }
.gantt-row.stage-row .gantt-label { background: var(--surface-3); }
.gantt-label .txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.gantt-label .meta { font-size: 10.5px; color: var(--muted); }
.gantt-track { position: relative; flex: 1; }
.gantt-head { display: flex; position: sticky; top: 0; z-index: 6; background: var(--surface-2); border-bottom: 1px solid var(--border-strong); }
.gantt-head .gantt-label { background: var(--surface-2); z-index: 7; font-weight: 700; font-size: 11.5px; color: var(--muted); }
.gantt-scale { display: flex; }
.gantt-tick {
  flex: 0 0 auto; text-align: center; font-size: 10px; color: var(--muted);
  border-inline-start: 1px solid var(--border); padding: 5px 2px; white-space: nowrap; overflow: hidden;
}
.gantt-tick.q { font-weight: 700; color: var(--text-2); background: var(--surface-3); }
/* الخانة تحمل خبرًا، فتُشعر العين بأنّها تُسأل */
.gantt-tick[data-tip] { cursor: help; }
.gantt-tick[data-tip]:hover { background: var(--brand-soft); color: var(--brand-2); }
.gantt-grid { position: absolute; inset: 0; display: flex; pointer-events: none; }
.gantt-grid > i { flex: 0 0 auto; border-inline-start: 1px solid var(--border); opacity: .55; }
.gbar {
  position: absolute; height: 13px; border-radius: 4px; top: 5px;
  display: flex; align-items: center; cursor: pointer; transition: filter .13s;
}
.gbar:hover { filter: brightness(1.12); }
.gbar.plan { background: var(--brand); opacity: .34; }
.gbar.actual { top: 20px; height: 9px; background: var(--ok); }
.gbar.fill { position: absolute; inset-block: 0; inset-inline-start: 0; border-radius: 4px; background: currentColor; }
.gbar-label { position: absolute; inset-inline-start: calc(100% + 7px); top: 50%; transform: translateY(-50%); font-size: 10.5px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.gmilestone {
  position: absolute; width: 12px; height: 12px; top: 6px;
  background: var(--gc, var(--accent)); transform: rotate(45deg);
  border-radius: 2px; cursor: pointer;
}
/* معلم تابع لنشاط رئيسي: مفرّغ ليطابق شكل الأنشطة الفرعية */
.gantt-row.sub .gmilestone {
  background: color-mix(in srgb, var(--gc) 22%, transparent);
  border: 1.5px solid color-mix(in srgb, var(--gc) 70%, transparent);
  width: 11px; height: 11px; top: 7px;
}
.today-line { position: absolute; inset-block: 0; width: 2px; background: var(--danger); z-index: 4; pointer-events: none; }
/* بطاقة «اليوم» كانت ملصقةً بأعلى الخطّ، والخطّ يبدأ من أول الصفوف —
   فتخرج من الشاشة بمجرّد النزول في القائمة ويبقى الخطّ بلا تسمية.
   الآن تلتصق بأعلى منطقة الجدول تحت رأس الأسابيع، فتُرى دائمًا وتبقى
   على عمود اليوم نفسه لأنّها ابنةُ الخطّ لا تفارقه أفقيًا. */
.today-line::before {
  content: 'اليوم';
  position: sticky;
  top: calc(var(--gantt-head-h, 30px) + 3px);
  display: block; width: max-content;
  margin-inline-start: 3px;
  font-size: 9.5px; font-weight: 700; color: var(--danger);
  background: var(--surface); padding: 0 3px; border-radius: 3px;
  box-shadow: 0 1px 3px rgba(0,0,0,.14);
}
.gantt-legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--muted); padding: 11px 18px; border-top: 1px solid var(--border); }
.gantt-legend span { display: flex; align-items: center; gap: 6px; }
.gantt-legend i { width: 16px; height: 8px; border-radius: 3px; display: inline-block; }

/* ---------- 12. الرسوم ---------- */
.chart { width: 100%; display: block; overflow: visible; }
.chart text { font-family: var(--font); fill: var(--muted); font-size: 10.5px; }
.chart .grid-line { stroke: var(--border); stroke-width: 1; }
.chart .axis-line { stroke: var(--border-strong); stroke-width: 1; }
.chart-legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--text-2); margin-top: 10px; justify-content: center; }
.chart-legend span { display: flex; align-items: center; gap: 6px; }
.chart-legend i { width: 11px; height: 11px; border-radius: 3px; }
.stage-prog { display: flex; flex-direction: column; gap: 13px; }
.stage-prog .row .top { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; font-size: 12.5px; }
.stage-prog .row .top .nm { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stage-prog .row .top .ct { color: var(--muted); font-size: 11.5px; }
.stage-prog .row .top .pc { margin-inline-start: auto; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- 13. النوافذ ---------- */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 90; background: rgba(9, 18, 29, .55);
  backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: 22px;
  animation: fade .16s ease;
}
.modal {
  background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--shadow-lg);
  width: 100%; max-width: 660px; max-height: 90vh; display: flex; flex-direction: column;
  border: 1px solid var(--border); animation: pop .2s cubic-bezier(.2,.9,.3,1.1);
}
@keyframes pop { from { opacity: 0; transform: scale(.96) translateY(10px); } to { opacity: 1; transform: none; } }
.modal.wide { max-width: 900px; }
.modal.narrow { max-width: 430px; }
.modal-head { display: flex; align-items: center; gap: 12px; padding: 17px 21px; border-bottom: 1px solid var(--border); }
.modal-head h3 { font-size: 16px; }
.modal-head .sub { font-size: 12px; color: var(--muted); }
.modal-body { padding: 21px; overflow-y: auto; flex: 1; }
.modal-foot { display: flex; gap: 9px; justify-content: flex-start; padding: 15px 21px; border-top: 1px solid var(--border); background: var(--surface-2); border-radius: 0 0 var(--r-xl) var(--r-xl); }
.modal-foot .spacer { flex: 1; }

.toast-host { position: fixed; bottom: 20px; inset-inline-start: 20px; z-index: 200; display: flex; flex-direction: column; gap: 9px; }
.toast {
  background: var(--surface); border: 1px solid var(--border); border-inline-start: 3px solid var(--ok);
  border-radius: var(--r); padding: 11px 15px; box-shadow: var(--shadow-lg); font-size: 13px;
  min-width: 250px; max-width: 380px; animation: slide .24s cubic-bezier(.2,.9,.3,1.1);
}
@keyframes slide { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }
.toast.err { border-inline-start-color: var(--danger); }
.toast.warn { border-inline-start-color: var(--warn); }
.toast .tt { font-weight: 600; margin-bottom: 2px; }
.toast .tm { color: var(--muted); font-size: 12px; }

/* =========================================================================
   13-أ. التسلسل الهرمي: نشاط رئيسي / فرعي
   المبدأ: النشاط الفرعي يرث لون مجموعته (--gc) من نشاطه الرئيسي،
   فيُقرأ الأب وفروعه كعائلة لونية واحدة، ويتمايزان بالشكل والامتلاء:
     رئيسي  = شريط تجميعي ممتلئ داكن بأطراف مدببة
     فرعي   = شريط مفرّغ بإطار من لون المجموعة
     مستقل  = شريط عادي نصف شفاف
   ========================================================================= */

/* ---- علامات وشارات مشتركة ---- */
.tree-mark {
  color: var(--gc, var(--faint)); font-weight: 700; margin-inline-end: 5px;
  display: inline-block; transform: scaleX(-1); opacity: .75;
}
html[dir="ltr"] .tree-mark { transform: none; }
.grp-marker {
  width: 9px; height: 9px; flex: 0 0 9px; border-radius: 2px;
  background: var(--gc, var(--brand)); margin-inline-end: 7px; display: inline-block;
  vertical-align: -1px;
}
.sub-count {
  font-size: 10px; font-weight: 700; padding: 0 6px; border-radius: 9px;
  background: color-mix(in srgb, var(--gc, var(--brand)) 16%, transparent);
  color: color-mix(in srgb, var(--gc, var(--brand)) 80%, var(--text));
  margin-inline-start: 5px;
}
.type-pill {
  font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 9px;
  margin-inline-start: 6px; white-space: nowrap; vertical-align: 1px;
}
.type-pill.main {
  background: color-mix(in srgb, var(--gc) 15%, transparent);
  color: color-mix(in srgb, var(--gc) 82%, var(--text));
  border: 1px solid color-mix(in srgb, var(--gc) 32%, transparent);
}
.type-pill.sub {
  background: transparent; color: color-mix(in srgb, var(--gc) 72%, var(--text));
  border: 1px dashed color-mix(in srgb, var(--gc) 45%, transparent);
}
.parent-ref { color: color-mix(in srgb, var(--gc) 62%, var(--muted)) !important; font-weight: 500; }

/* ---- جدول الأنشطة ----
   الخط الجانبي بلون الحالة (--sc) لا المجموعة، ليُقرأ وضع النشاط أولًا. */
.tbl tbody tr.row-summary {
  background: color-mix(in srgb, var(--gc) 6%, transparent);
  box-shadow: inset 4px 0 0 0 var(--sc, var(--gc));
}
html[dir="ltr"] .tbl tbody tr.row-summary { box-shadow: inset -4px 0 0 0 var(--sc, var(--gc)); }
.tbl tbody tr.st-delayed { background: color-mix(in srgb, var(--sc) 6%, transparent); }
.tbl tbody tr.st-delayed:hover { background: color-mix(in srgb, var(--sc) 11%, transparent); }
.tbl tbody tr.st-completed .t-name { color: var(--text-2); }
.tbl tbody tr.row-summary:hover { background: color-mix(in srgb, var(--gc) 11%, transparent); }
.tbl tbody tr.row-summary .t-name { font-weight: 700; font-size: 13.5px; }
.tbl tbody tr.row-sub {
  background: color-mix(in srgb, var(--gc) 2.5%, transparent);
  box-shadow: inset 4px 0 0 0 var(--sc, var(--gc));
}
html[dir="ltr"] .tbl tbody tr.row-sub { box-shadow: inset -4px 0 0 0 var(--sc, var(--gc)); }
.tbl tbody tr.row-solo { box-shadow: inset 4px 0 0 0 var(--sc); }
html[dir="ltr"] .tbl tbody tr.row-solo { box-shadow: inset -4px 0 0 0 var(--sc); }
.tbl tbody tr.row-sub:hover { background: color-mix(in srgb, var(--gc) 7%, transparent); }
.tbl tbody tr.row-sub .t-name { font-weight: 500; color: var(--text-2); }
.tbl tbody tr.row-sub td:first-child { color: var(--faint); }

/* ---- الجدول الزمني: الصفوف ---- */
.gantt-row.summary { background: color-mix(in srgb, var(--gc) 7%, transparent); }
.gantt-row.summary:hover { background: color-mix(in srgb, var(--gc) 12%, transparent); }
.gantt-row.summary .gantt-label { background: color-mix(in srgb, var(--gc) 7%, var(--surface)); }
.gantt-row.summary:hover .gantt-label { background: color-mix(in srgb, var(--gc) 12%, var(--surface)); }
.gantt-row.summary .gantt-label .txt { font-weight: 700; }

.gantt-row.sub { min-height: 30px; background: color-mix(in srgb, var(--gc) 3%, transparent); }
.gantt-row.sub:hover { background: color-mix(in srgb, var(--gc) 8%, transparent); }
.gantt-row.sub .gantt-label { background: color-mix(in srgb, var(--gc) 3%, var(--surface)); }
.gantt-row.sub:hover .gantt-label { background: color-mix(in srgb, var(--gc) 8%, var(--surface)); }
.gantt-row.sub .gantt-label .txt { color: var(--text-2); font-size: 11.5px; }
/* عمود رابط يصل الفروع ببعضها بصريًا تحت أبيها */
.gantt-row.sub .gantt-label::before {
  content: ''; position: absolute; inset-block: 0; inset-inline-start: 19px;
  width: 2px; background: var(--gc); opacity: .3;
}

/* ---- الجدول الزمني: الأشرطة ----
   الشريط يحمل هويّتين: لون المجموعة (--gc) في خلفيته، ولون الحالة (--sc)
   في تعبئته الداخلية بمقدار نسبة الإنجاز — وهي الإشارة الأقوى في الصف. */
.gbar.plan { background: color-mix(in srgb, var(--gc, var(--brand)) 26%, transparent); opacity: 1; overflow: hidden; }
.gfill {
  position: absolute; inset-block: 0; inset-inline-start: 0;
  background: var(--sc); border-radius: inherit; display: block;
}

/* رئيسي: ممتلئ وداكن بأطراف مدببة كأشرطة التجميع في برامج الجدولة */
.gbar.plan.summary {
  height: 13px; top: 4px; border-radius: 2px;
  background: color-mix(in srgb, var(--gc) 38%, transparent);
  border: 1.5px solid var(--gc);
  clip-path: polygon(0 0, 100% 0, 100% 100%, calc(100% - 7px) 42%, 7px 42%, 0 100%);
}
/* فرعي: مفرّغ بإطار من لون المجموعة نفسه */
.gbar.plan.sub {
  height: 11px; top: 6px; border-radius: 3px;
  background: color-mix(in srgb, var(--gc) 16%, transparent);
  border: 1.5px solid color-mix(in srgb, var(--gc) 60%, transparent);
}
/* مستقل: شريط عادي */
.gbar.plan.solo {
  height: 12px; top: 5px; border-radius: 4px;
  border: 1px solid color-mix(in srgb, var(--gc) 45%, transparent);
}
/* المنتهي: تعبئة كاملة بلون النجاح مع إطار مطابق */
.gbar.plan.done { border-color: var(--sc); }
.gmilestone.done { background: var(--sc); box-shadow: 0 0 0 2px color-mix(in srgb, var(--sc) 30%, transparent); }

/* ---- إشارات الحالة داخل عمود الأسماء ---- */
/* لا تُعِد تعيين position هنا: الخانة sticky لتبقى ثابتة عند التمرير
   الأفقي، وrelative يهزمها لأنّه أخصّ منها — فينزلق عمود الأسماء تحت
   رأس الجدول ويبدو أنّ شريط الأسابيع هو الذي يتحرّك. والشريط الملوّن
   أدناه لا يحتاج relative أصلًا: sticky عنصرٌ مُموضَع يصلح مرجعًا
   للأبناء المطلقين. */
/* شريط جانبي بلون الحالة على حافة كل صف */
.gantt-row .gantt-label::after {
  content: ''; position: absolute; inset-block: 0; inset-inline-start: 0;
  width: 4px; background: var(--sc); opacity: .9;
}
.st-dot {
  width: 9px; height: 9px; border-radius: 50%; flex: 0 0 9px;
  background: var(--sc); position: relative;
}
.st-dot[data-done]::after {
  content: '✓'; position: absolute; inset: 0; display: grid; place-items: center;
  color: #fff; font-size: 7px; font-weight: 900; line-height: 1;
}
/* التخصيص هنا مقصود: يتجاوز `.gantt-label .meta { color: var(--muted) }` */
.gantt-label .meta.st-pct { color: var(--sc); font-weight: 700; font-size: 11px; }
/* الصفوف المتأخرة والمنتهية تُقرأ من مسافة */
.gantt-row.st-delayed .gantt-label { background: color-mix(in srgb, var(--sc) 7%, var(--surface)); }
.gantt-row.st-delayed:hover .gantt-label { background: color-mix(in srgb, var(--sc) 12%, var(--surface)); }
.gantt-row.st-completed .gantt-label .txt { color: var(--muted); }

/* ---- مفاتيح الرسم ---- */
.gantt-legend .lg-summary {
  background: var(--brand); height: 10px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, calc(100% - 4px) 40%, 4px 40%, 0 100%);
}
.gantt-legend .lg-sub {
  background: color-mix(in srgb, var(--brand) 20%, transparent);
  border: 1.5px solid color-mix(in srgb, var(--brand) 65%, transparent);
}
.gantt-legend .lg-solo { background: var(--brand); opacity: .42; }

.inline-ic { width: 14px; height: 14px; vertical-align: -2px; }

/* ---------- 13-ب. الجهات ---------- */
.ent-rings {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px;
}
.ent-ring {
  background: transparent; border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 14px 10px; text-align: center; transition: border-color .14s, background .14s, transform .08s;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.ent-ring:hover { border-color: var(--border-strong); background: var(--surface-2); }
.ent-ring:active { transform: translateY(1px); }
.ent-ring .ring-host { line-height: 0; margin-bottom: 6px; }
.ent-ring-name { font-size: 13px; font-weight: 700; line-height: 1.3; }
.ent-ring-role { font-size: 11px; color: var(--muted); }
.ent-ring-meta { font-size: 11px; color: var(--faint); margin-top: 3px; }

.ent-chip {
  display: inline-flex; align-items: center; gap: 5px; margin-inline-end: 4px; margin-block: 1px;
  padding: 2px 8px; border-radius: 20px; font-size: 11.5px; font-weight: 600;
  background: color-mix(in srgb, var(--ec) 12%, transparent);
  color: color-mix(in srgb, var(--ec) 78%, var(--text));
  border: 1px solid color-mix(in srgb, var(--ec) 26%, transparent); white-space: nowrap;
}
.ent-chip > i { width: 6px; height: 6px; border-radius: 50%; background: var(--ec); flex: 0 0 6px; }
.ent-mini {
  font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 10px; white-space: nowrap;
  background: color-mix(in srgb, var(--ec) 14%, transparent);
  color: color-mix(in srgb, var(--ec) 80%, var(--text));
}
.ent-card .card-body { padding: 15px 16px; }
.ent-head { display: flex; align-items: center; gap: 11px; }
.ent-logo { width: 42px; height: 42px; object-fit: contain; flex: 0 0 42px; border-radius: 6px; background: #fff; padding: 3px; }
.ent-badge { width: 40px; height: 40px; border-radius: 9px; flex: 0 0 40px; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 14px; }
.ent-name { font-size: 14.5px; font-weight: 700; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ent-role { font-size: 11.5px; color: var(--muted); }
.ent-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 9px; }

/* =========================================================================
   شريط أدوات الجدول الزمني

   تسعة عناصر في صفٍّ واحد يلتفّ تُنتج حوافَّ متعرّجة وارتفاعاتٍ متفاوتة،
   ولا يُعرف أيّها فلترةٌ وأيّها إجراء. فصفّان: ما يُعرض، ثم كيف يُعرض وما
   يُفعل به. والبدائل تُضمّ في علبةٍ رماديّة يبرز فيها المختار وحده.
   ========================================================================= */
.toolbar.tb-stack { flex-direction: column; align-items: stretch; gap: 9px; }
.tb-row { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
/* الحقل يتمدّد ولا يبتلع الصفّ: حقل بحثٍ بعرض ثمانمئة بكسل يوحي بأنّ
   المكتوب فيه طويل، وهو كلمة. */
.tb-row .grow { flex: 1 1 230px; min-width: 0; max-width: 420px; }
.tb-gap { flex: 1 1 0; min-width: 0; }

/* ارتفاعٌ واحد لكل ما في الصفّ: الحقل أطول من الزرّ بثلاث بكسلات، وهي
   تكفي لتبدو الحافّة متعرّجة. نثبّته لا نتركه لحاصل الحشو والخطّ. */
.tb-row > .btn, .tb-row > .select, .tb-row .input,
.tb-row .seg, .tb-row > .chip, .tb-row .ent-filter-btn {
  height: 38px; min-height: 38px; padding-block: 0;
}
.tb-row .search { display: flex; }
.tb-row > .select { max-width: 185px; }

/* العلبة: بدائل يُختار منها واحد */
.seg {
  display: inline-flex; align-items: center; gap: 2px; padding: 3px;
  background: var(--surface-2); border: 1px solid var(--border-strong);
  border-radius: 9px; flex: 0 0 auto;
}
.seg .chip {
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: transparent; border-radius: 6px;
  padding: 5px 13px; font-size: 12px; font-weight: 600; color: var(--muted);
  transition: background .13s, color .13s;
}
.seg .chip:hover { background: var(--surface-3); color: var(--text); }
/* المختار يرتفع عن أرضيّة العلبة بلونٍ فاتحٍ وظلٍّ خفيف، لا بكتلةٍ داكنة
   تجذب العين إلى أربع كتلٍ متنافسة في شريطٍ واحد. */
.seg .chip.on {
  background: var(--surface); color: var(--brand-2);
  box-shadow: 0 1px 3px rgba(0,0,0,.10);
}

/* المسار الحرج مفتاحٌ لا بديل، فيبقى خارج العلبة بهيئته الخاصة */
.tb-row > .cp-chip { padding: 7px 14px; border-radius: 9px; }

@media (max-width: 980px) {
  .tb-row { gap: 7px; }
  .tb-row .grow { flex: 1 1 100%; }
  .tb-gap { display: none; }
  /* العلبة تتمدّد وتتقاسم عرضها بالتساوي بدل أن تنكمش على نصف كلمة */
  .seg { flex: 1 1 100%; }
  .seg .chip { flex: 1 1 0; min-width: 0; padding: 7px 6px; }
  .tb-row > .btn { flex: 1 1 calc(50% - 4px); }
  .tb-row > .cp-chip { flex: 1 1 100%; }
  .tb-row > .select, .tb-row .ent-filter { flex: 1 1 calc(50% - 4px); }
  .tb-row > .select { max-width: none; }
  .tb-row .ent-filter-btn { width: 100%; }
}

/* =========================================================================
   مستندات الجهة

   المستند يأتي من ثلاثة مصادر ويبقى فيها، فالشارة تقول من أين جاء: من
   اجتماعٍ برمزه، أو مراسلةٍ برمزها، أو رُفع على الجهة رأسًا.
   ========================================================================= */
.doc-sec { margin-top: 13px; }
.doc-lbl {
  font-size: 11.5px; font-weight: 700; color: var(--muted);
  letter-spacing: .2px; margin-bottom: 7px;
}
.doc-list { display: flex; flex-direction: column; gap: 6px; }
.doc-row {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  padding: 8px 11px; border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface-2);
}
.doc-row:hover { border-color: var(--border-strong); background: var(--surface); }
.doc-ic { font-size: 16px; line-height: 1; flex: 0 0 auto; }
.doc-main { min-width: 0; flex: 1; }
.doc-n {
  font-size: 12.5px; font-weight: 600; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.doc-meta {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 3px; font-size: 10.5px; color: var(--muted);
}
.doc-t { max-width: 32ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* اسم الملف كما جاء من الجهاز: يبقى للتحقّق ولا ينافس العنوان */
.doc-file {
  font-size: 10.5px; color: var(--faint); margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* تاريخ المستند أبرز من تاريخ رفعه، فهو المقصود عند البحث */
.doc-date { font-weight: 700; color: var(--text-2); }
.doc-note {
  margin-top: 5px; font-size: 11.5px; line-height: 1.65; color: var(--text-2);
  background: var(--surface-3); border-radius: 5px; padding: 5px 8px;
  white-space: pre-line;
}
/* زرّ المستندات في بطاقة الجهة: تابعٌ لزرّ الأعمال لا منافسٌ له */
.ent-docs-btn { margin-top: 6px; color: var(--muted); }
.ent-docs-btn:hover { color: var(--text); }
.doc-act { display: flex; gap: 4px; flex: 0 0 auto; }

/* شارة المصدر */
.doc-src {
  padding: 1px 7px; border-radius: 20px; font-weight: 700;
  background: var(--surface-3); color: var(--text-2); border: 1px solid var(--border);
}
.doc-src b { font-weight: 800; margin-inline-start: 3px; }
.doc-src.doc-meeting  { background: var(--brand-soft); color: var(--brand-2); border-color: transparent; }
.doc-src.doc-comm     { background: var(--info-soft);  color: var(--info);    border-color: transparent; }
.doc-src.doc-contract { background: var(--ok-soft);    color: var(--ok);      border-color: transparent; }

/* نافذة الإسناد */
.doc-pick { display: flex; flex-direction: column; gap: 5px; max-height: 54vh; overflow-y: auto; }
.doc-pickrow {
  display: flex; align-items: center; gap: 10px; min-width: 0; cursor: pointer;
  padding: 8px 11px; border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface-2); user-select: none;
}
.doc-pickrow:hover { border-color: var(--brand-2); }
.doc-pickrow:has(input:checked) { border-color: var(--brand-2); background: var(--brand-soft); }
.doc-pickrow input { width: 15px; height: 15px; accent-color: var(--brand-2); flex: 0 0 auto; }
.doc-pickrow .doc-main { display: block; }
.doc-pickrow .doc-n { display: block; }
.doc-pickrow .doc-meta { display: flex; }
/* المُسنَد لجهةٍ أخرى: يُرى ولا يُخفى، فقد يكون الإسناد خطأً يُصحَّح */
.doc-pickrow.taken { opacity: .72; }
.doc-taken { color: var(--warn); font-weight: 700; }

@media (max-width: 640px) {
  .doc-row, .doc-pickrow { flex-wrap: wrap; }
  .doc-act { width: 100%; justify-content: flex-end; }
  .doc-t { max-width: 100%; }
}

/* الشارة الحمراء تنبض ما دامت المحاولة جارية: السكون يوحي بأنّ الأمر
   انتهى عند الفشل، والنبض يقول إنّ المنصة ما زالت تحاول. */
.badge.is-retry { animation: retryPulse 1.6s ease-in-out infinite; }
@keyframes retryPulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .badge.is-retry { animation: none; } }

/* ---- «تذكّرني» في شاشة الدخول ---- */
.auth-remember { align-items: flex-start; gap: 9px; margin: 2px 0 16px; }
.auth-remember input { margin-top: 2px; flex: 0 0 auto; }
.auth-remember span { display: flex; flex-direction: column; gap: 2px; font-weight: 600; }
.auth-remember small { font-size: 11.5px; color: var(--muted); font-weight: 400; line-height: 1.6; }

/* ---- فلترة المهام بالجهات: زرٌّ ولوحةٌ تحته ---- */
.ent-filter { position: relative; }
.ent-filter-btn { gap: 6px; }
.ent-filter-btn.on { border-color: var(--brand-2); color: var(--brand-2); background: var(--brand-soft); }
.ent-filter-n {
  font-style: normal; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
  background: var(--brand-2); color: #fff; font-size: 10.5px; font-weight: 800;
  display: grid; place-items: center; line-height: 1;
}
.ent-filter-pop {
  position: absolute; inset-block-start: calc(100% + 6px); inset-inline-start: 0; z-index: 40;
  width: min(430px, 88vw); background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--r-sm); box-shadow: 0 14px 38px rgba(0,0,0,.17); padding: 12px;
}
.efp-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 3px; }
.efp-hint { font-size: 11.5px; color: var(--muted); margin-bottom: 9px; line-height: 1.6; }
.efp-list { max-height: 46vh; overflow-y: auto; }
.efp-foot {
  display: flex; gap: 8px; justify-content: flex-end;
  margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--border);
}
.efp-foot .btn[disabled] { opacity: .45; pointer-events: none; }

/* اللوحة على الجوّال: لا متّسع بجانب الزرّ، فتصير ورقةً في أسفل الشاشة
   بدل أن ينزلق نصفها خارج الحافّة حيث لا تُدرَك ولا تُمرَّر إليها. */
@media (max-width: 700px) {
  .ent-filter-pop {
    position: fixed; inset-block-start: auto; inset-block-end: 12px;
    inset-inline-start: 12px; inset-inline-end: 12px; width: auto;
    max-height: min(72vh, 560px); overflow-y: auto;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }
  .efp-list { max-height: none; }
}

.chk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 5px; }
.check.ent-pick {
  border: 1px solid var(--border); border-radius: var(--r-sm); padding: 6px 9px; background: var(--surface-2);
}
.check.ent-pick:has(input:checked) { border-color: var(--brand-2); background: var(--brand-soft); }
.check.ent-pick span { display: flex; flex-direction: column; line-height: 1.3; font-size: 12.5px; font-weight: 600; }
.check.ent-pick small { font-size: 10.5px; color: var(--muted); font-weight: 400; }

/* منتقي الحالة بالألوان */
.status-pick { display: flex; gap: 6px; flex-wrap: wrap; }
.st-opt {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 20px; font-size: 12.5px; font-weight: 600;
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-2);
  transition: border-color .13s, background .13s, color .13s;
}
.st-opt > i { width: 8px; height: 8px; border-radius: 50%; background: var(--sc); flex: 0 0 8px; }
.st-opt:hover { border-color: var(--sc); }
.st-opt.on {
  border-color: var(--sc); color: #fff; background: var(--sc);
}
.st-opt.on > i { background: rgba(255,255,255,.9); }
.st-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 7px; }

/* ---------- شريط الشعارات ----------
   لدن والعيوني (التحالف) بحجم بارز، ودور العمران مصغّرًا بجانبه «إدارة المشروع». */
.brand-logos {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 13px 12px; border-top: 1px solid var(--border);
}
.bl-main { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; }
.bl-main .bl-lg { height: 36px; max-width: 88px; object-fit: contain; }
.bl-pm {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding-top: 10px; border-top: 1px solid var(--border);
}
.bl-pm .bl-sm { height: 19px; max-width: 48px; object-fit: contain; opacity: .9; }
.bl-pm-label {
  font-size: 9.5px; font-weight: 600; color: var(--muted);
  letter-spacing: .02em; line-height: 1.2; white-space: nowrap;
}
[data-theme="dark"] .brand-logos img { background: rgba(255,255,255,.93); border-radius: 4px; padding: 2px 3px; }

/* النسخة الظاهرة على خلفية شاشة الدخول الداكنة */
.auth-logos { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.auth-logos .bl-main { gap: 16px; }
.auth-logos .bl-lg {
  height: 46px; max-width: 116px; object-fit: contain;
  background: rgba(255,255,255,.95); border-radius: 7px; padding: 6px 9px;
}
.auth-logos .bl-pm {
  width: auto; padding-top: 0; border-top: 0;
  padding-inline-start: 20px; border-inline-start: 1px solid rgba(255,255,255,.22);
}
.auth-logos .bl-sm {
  height: 26px; max-width: 66px; object-fit: contain;
  background: rgba(255,255,255,.95); border-radius: 6px; padding: 4px 6px;
}
.auth-logos .bl-pm-label { font-size: 10.5px; color: rgba(255,255,255,.72); }

/* ---------- 13-ج. قسم إدارة المشروع ---------- */
.soft-pill {
  background: color-mix(in srgb, var(--sc) 14%, transparent);
  color: color-mix(in srgb, var(--sc) 82%, var(--text));
  border: 1px solid color-mix(in srgb, var(--sc) 30%, transparent);
  font-weight: 600;
}
/* ---- جدول سجل الاتصال: أعمدة ثابتة والموضوع يتّسع ---- */
/* التخطيط ثابت والعرض الكلي أوسع من الحاوية، فيتمرّر أفقيًا بدل أن ينضغط النص.
   الأعمدة الثابتة مجموعها 784px والباقي كله لعمود الموضوع (~500px). */
/* أعمدة سجل الاتصال بترتيب ورقتَي الإكسل */
.comm-tbl { min-width: 1808px; table-layout: fixed; }
.comm-tbl .c-no     { width: 46px; }
.comm-tbl .c-code   { width: 112px; font-size: 11.5px; color: var(--muted); }
.comm-tbl .c-date   { width: 96px; font-size: 12px; }
.comm-tbl .c-ch     { width: 114px; }
.comm-tbl .c-dir    { width: 90px; }
.comm-tbl .c-party  { width: 158px; font-size: 12px; }
.comm-tbl .c-own    { width: 158px; font-size: 12px; }
.comm-tbl .c-subj   { width: auto; min-width: 240px; }
.comm-tbl .c-summ   { width: 300px; }
.comm-tbl .c-files  { width: 92px; }
.comm-tbl .c-follow { width: 230px; }
.comm-tbl .c-st     { width: 118px; }
.comm-tbl .c-act    { width: 74px; }
.comm-tbl td { vertical-align: top; padding-top: 11px; }
.comm-tbl .c-subj .t-name { white-space: normal; line-height: 1.65; }
.comm-tbl .t-note { max-width: none; white-space: normal; line-height: 1.7; }
.comm-tbl .t-note.pre { white-space: pre-line; }
.comm-tbl .t-note.follow { color: var(--warn); }
.comm-tbl .c-party, .comm-tbl .c-own { white-space: normal; line-height: 1.6; }

/* النص الطويل محدود بأربعة أسطر فيبقى ارتفاع الصف منتظمًا — والنص كاملًا في النموذج */
.comm-tbl .clamp {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4;
  overflow: hidden;
}
.comm-tbl .file-list.tight .file-chip { padding: 3px 6px; font-size: 10.5px; }
.comm-tbl .file-list.tight .fc-n { max-width: 62px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* جدول الاجتماعات: الأعمدة الثابتة 806px والباقي لعمود العنوان (~475px) */
.mtg-tbl { min-width: 1420px; table-layout: fixed; }
.mtg-tbl.has-summ { min-width: 1720px; }
.mtg-tbl .m-code  { width: 118px; font-size: 11.5px; color: var(--muted); }
.mtg-tbl .m-date  { width: 100px; font-size: 12px; }
.mtg-tbl .m-title { width: auto; }
.mtg-tbl .m-type  { width: 132px; }
.mtg-tbl .m-place { width: 146px; font-size: 12px; }
.mtg-tbl .m-att   { width: 60px; }
.mtg-tbl .m-files { width: 122px; }
.mtg-tbl .m-no    { width: 46px; }
.mtg-tbl .m-recs  { width: 96px; }
.mtg-tbl .m-st    { width: 110px; }
.mtg-tbl .m-act   { width: 74px; }
.mtg-tbl td { vertical-align: top; padding-top: 11px; }
.mtg-tbl .m-title .t-name { white-space: normal; line-height: 1.65; }
.mtg-tbl .t-note { max-width: none; white-space: normal; }
.mtg-tbl .m-place { white-space: normal; line-height: 1.5; }

/* رقائق الملفات */
.file-list { display: flex; flex-direction: column; gap: 5px; margin: 7px 0; }
.file-list.tight { margin: 6px 0 0; }
.file-chip {
  display: inline-flex; align-items: center; gap: 7px; max-width: 100%;
  padding: 4px 9px; border-radius: 20px; text-decoration: none;
  background: var(--surface-2); border: 1px solid var(--border);
  font-size: 11.5px; color: var(--text-2); transition: background .13s, border-color .13s;
}
.file-chip:hover { background: var(--brand-soft); border-color: var(--brand-2); color: var(--brand-2); }
.file-chip .fc-ic { color: var(--ok); font-size: 12px; flex: 0 0 auto; }
.file-chip .fc-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-chip .fc-mb { color: var(--faint); font-size: 10.5px; flex: 0 0 auto; margin-inline-start: auto; }

/* أيقونات المرفقات */
.att-row { display: flex; gap: 4px; }
.att {
  width: 22px; height: 22px; border-radius: 5px; display: grid; place-items: center;
  font-size: 12px; line-height: 1; text-decoration: none;
}
/* مرفق موجود بلا رابط: إطار متقطّع */
.att.on {
  background: var(--ok-soft); color: var(--ok);
  border: 1px dashed color-mix(in srgb, var(--ok) 45%, transparent);
}
/* مرفق مرتبط برابط: قابل للفتح */
.att.on.linked {
  border-style: solid; border-color: color-mix(in srgb, var(--ok) 40%, transparent);
  cursor: pointer; transition: background .13s, color .13s, transform .08s;
  position: relative; font-family: inherit; padding: 0;
}
.att.on.linked:hover { background: var(--ok); color: #fff; transform: translateY(-1px); }
/* ملف محفوظ محليًا مقابل رابط Drive فقط */
.att.on.linked.drive { border-style: dotted; color: var(--info); background: var(--info-soft); }
.att.on.linked.drive:hover { background: var(--info); color: #fff; }
.att-n {
  position: absolute; inset-block-start: -5px; inset-inline-end: -5px;
  min-width: 13px; height: 13px; padding: 0 3px; border-radius: 7px;
  background: var(--brand-2); color: #fff; font-size: 9px; font-weight: 800;
  font-style: normal; display: grid; place-items: center; line-height: 1;
}
.att.off { background: var(--surface-3); color: var(--faint); border: 1px solid var(--border); }
/* الصف الوردي: اجتماع بلا أي مرفق — كما في ملف الإكسل الأصلي */
.tbl tbody tr.no-att { background: color-mix(in srgb, var(--danger) 4%, transparent); }
.tbl tbody tr.no-att:hover { background: color-mix(in srgb, var(--danger) 8%, transparent); }

.att-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 11px; }
.att-field { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 10px 12px; }
.att-field .check { margin-bottom: 7px; font-weight: 600; }

/* التوصيات */
.act-item {
  display: flex; align-items: flex-start; gap: 10px; padding: 11px 13px; margin-bottom: 8px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm);
  box-shadow: inset 3px 0 0 0 var(--sc);
}
html[dir="ltr"] .act-item { box-shadow: inset -3px 0 0 0 var(--sc); }

/* اتجاه الاتصال */
.dir-tag { font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.dir-tag.outgoing { color: var(--info); }
.dir-tag.incoming { color: var(--accent); }

/* مصفوفة العقود */
.ct-tbl { min-width: 1120px; table-layout: fixed; }
.ct-tbl td { vertical-align: top; }
.ct-tbl .ct-party { width: 210px; }
.ct-tbl .ct-col   { width: auto; }
.ct-tbl .ct-prog  { width: 96px; }
.ct-cell { transition: background .13s; }
.ct-cell:hover { background: color-mix(in srgb, var(--sc) 9%, transparent); }
.ct-box { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.ct-logo { width: 30px; height: 30px; object-fit: contain; background: #fff; border-radius: 5px; padding: 2px; flex: 0 0 30px; }
.ct-link { font-size: 11px; font-weight: 600; }

/* ---------- 14. متفرقات ---------- */
.empty { text-align: center; padding: 52px 22px; color: var(--muted); }
.empty svg { width: 42px; height: 42px; opacity: .35; margin-bottom: 13px; }
.empty h4 { font-size: 15px; color: var(--text-2); margin-bottom: 5px; }
.empty p { font-size: 13px; max-width: 42ch; margin: 0 auto 16px; }
.sec-title { font-size: 12px; font-weight: 700; color: var(--faint); letter-spacing: .05em; margin: 26px 0 11px; }
.sec-title:first-child { margin-top: 0; }
.divider { height: 1px; background: var(--border); margin: 20px 0; }
.list-editor { display: flex; flex-direction: column; gap: 8px; }
.list-editor .item { display: flex; align-items: center; gap: 9px; padding: 8px 11px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); }
.list-editor .item .nm { flex: 1; font-size: 13px; font-weight: 500; }
.swatch { width: 22px; height: 22px; border-radius: 5px; border: 1px solid var(--border-strong); padding: 0; cursor: pointer; flex: 0 0 22px; }
.matrix { display: grid; grid-template-columns: auto repeat(5, 1fr); gap: 3px; font-size: 11px; }
.matrix .cell { aspect-ratio: 1.7; display: grid; place-items: center; border-radius: 4px; font-weight: 700; color: #fff; cursor: default; }
.matrix .lbl { display: grid; place-items: center; color: var(--muted); font-weight: 600; font-size: 10.5px; }
.report-block { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 26px; }

@media (max-width: 980px) {
  :root { --sidebar-w: 0px; }
  .sidebar { transition: transform .22s; box-shadow: var(--shadow-lg); width: 244px; }
  html[dir="rtl"] .sidebar { transform: translateX(100%); }
  html[dir="ltr"] .sidebar { transform: translateX(-100%); }
  .sidebar.open { transform: none !important; }
  .main { margin-inline-start: 0; }
  .ent-rings { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
  .auth-screen { grid-template-columns: 1fr; }
  .auth-art { display: none; }
  .content { padding: 15px; }
  .field-row, .field-row-3 { grid-template-columns: 1fr; }
}
.menu-btn { display: none; }
@media (max-width: 980px) { .menu-btn { display: inline-flex; } }

@media print {
  .sidebar, .topbar, .toolbar, .no-print { display: none !important; }
  .main { margin: 0; }
  .content { padding: 0; }
  body { background: #fff; font-size: 11px; }
  .card { box-shadow: none; break-inside: avoid; }
  .page { display: none !important; }
  .page.active { display: block !important; }
}

/* ---- عمود التوصيات داخل سجل الاجتماعات ---- */
.rec-list { display: flex; flex-direction: column; gap: 7px; }
.rec-item {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: 7px 9px;
  box-shadow: inset 3px 0 0 0 var(--sc);
}
html[dir="ltr"] .rec-item { box-shadow: inset -3px 0 0 0 var(--sc); }
.rec-tx { font-size: 11.5px; line-height: 1.65; color: var(--text-2); white-space: normal; }
.rec-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 5px; }
.rec-own { font-size: 10.5px; font-weight: 700; color: var(--brand-2); }
.rec-meta .badge { font-size: 10px; padding: 1px 7px; }

/* ---- فواصل طولية بين أعمدة جداول إدارة المشروع ---- */
/* حدود فيزيائية لا منطقية: خلايا .num اتجاهها ltr فينقلب inline-start على حافتها الخطأ */
html[dir="rtl"] .mtg-tbl th, html[dir="rtl"] .mtg-tbl td,
html[dir="rtl"] .comm-tbl th, html[dir="rtl"] .comm-tbl td,
html[dir="rtl"] .rec-tbl th, html[dir="rtl"] .rec-tbl td {
  border-right: 1px solid var(--border); border-left: 0;
}
html[dir="rtl"] .mtg-tbl tr > :first-child,
html[dir="rtl"] .comm-tbl tr > :first-child,
html[dir="rtl"] .rec-tbl tr > :first-child { border-right: 0; }

html[dir="ltr"] .mtg-tbl th, html[dir="ltr"] .mtg-tbl td,
html[dir="ltr"] .comm-tbl th, html[dir="ltr"] .comm-tbl td,
html[dir="ltr"] .rec-tbl th, html[dir="ltr"] .rec-tbl td {
  border-left: 1px solid var(--border); border-right: 0;
}
html[dir="ltr"] .mtg-tbl tr > :first-child,
html[dir="ltr"] .comm-tbl tr > :first-child,
html[dir="ltr"] .rec-tbl tr > :first-child { border-left: 0; }

/* حدّ سفلي أوضح للصفوف + تظليل متناوب ليُقرأ الصف كوحدة واحدة */
.mtg-tbl tbody tr, .comm-tbl tbody tr { border-bottom: 1px solid var(--border-strong); }
.mtg-tbl tbody tr:nth-child(even), .comm-tbl tbody tr:nth-child(even) { background: var(--surface-2); }
.mtg-tbl tbody tr:hover, .comm-tbl tbody tr:hover { background: var(--brand-soft); }
.mtg-tbl thead th, .comm-tbl thead th {
  border-bottom: 2px solid var(--border-strong);
  background: var(--surface-3);
}

/* ---- شارة حالة قابلة للتغيير مباشرة ---- */
.st-pick { position: relative; display: inline-flex; align-items: center; }
.st-pick .badge { padding-inline-end: 6px; }
.st-caret { font-style: normal; font-size: 8px; opacity: .8; margin-inline-start: 2px; }
.st-sel {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer; border: 0; padding: 0; appearance: none;
}
.st-pick:hover .badge { filter: brightness(1.08); box-shadow: 0 0 0 2px color-mix(in srgb, var(--sc) 26%, transparent); }
.st-sel:focus-visible + .badge, .st-pick:focus-within .badge {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sc) 34%, transparent);
}

/* ---- عدّاد التوصيات على بطاقة الجهة ---- */
.ent-recs {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 10px; padding-top: 9px; border-top: 1px dashed var(--border);
  font-size: 11.5px; color: var(--muted);
}
.ent-recs .er-l { font-weight: 600; color: var(--text-2); }
.ent-recs .er-sep { opacity: .5; }

/* ---- جدول التوصيات داخل نافذة الجهة ---- */
.rec-tbl td { vertical-align: top; }
.rec-tbl tbody tr { box-shadow: inset 3px 0 0 0 var(--sc); }
html[dir="ltr"] .rec-tbl tbody tr { box-shadow: inset -3px 0 0 0 var(--sc); }
.rec-tbl .rec-tx { white-space: normal; line-height: 1.65; font-size: 12.5px; }

/* علامة تجاوز الموعد بجانب حالة التوصية */
.od-flag {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--danger); color: #fff;
  font-size: 11px; font-weight: 800; line-height: 1;
  margin-inline-start: 5px; cursor: help; flex: none;
}

/* ---- زر التوصيات المختصر في صف الاجتماع ---- */
.rec-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px; border-radius: 999px;
  border: 1px solid var(--border-strong); background: var(--surface);
  font-size: 12px; font-weight: 600; color: var(--text-2);
  transition: background .14s, border-color .14s, transform .06s;
}
.rec-btn:hover { background: var(--surface-3); border-color: var(--muted); transform: translateY(-1px); }
.rec-btn:active { transform: none; }
.rec-btn .rb-ic { font-size: 11px; opacity: .65; }
.rec-btn .rb-n  { font-weight: 700; color: var(--text); }
.rec-btn .rb-open, .rec-btn .rb-ok {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px;
  font-size: 10.5px; font-weight: 800; color: #fff;
}
.rec-btn .rb-open { background: var(--warn); }
.rec-btn .rb-ok   { background: var(--ok); }
.rec-btn.late { border-color: color-mix(in srgb, var(--danger) 48%, var(--border-strong)); background: var(--danger-soft); }
.rec-btn.late .rb-open { background: var(--danger); }
.rec-btn.done { border-color: color-mix(in srgb, var(--ok) 40%, var(--border-strong)); background: var(--ok-soft); }

/* جدول التوصيات داخل النافذة: عمود النص هو الأوسع */
.rec-tbl { table-layout: auto; }
.rec-tbl .rec-own { font-size: 11.5px; }

/* =========================================================================
   المسار الحرج في الجدول الزمني — عرض اختياري
   ========================================================================= */
.cp-chip.on { background: var(--danger); border-color: var(--danger); color: #fff; }
.cp-chip.on:hover { background: color-mix(in srgb, var(--danger) 88%, #000); }

.cp-banner {
  display: flex; align-items: flex-start; gap: 11px;
  margin: 0 16px 4px; padding: 11px 14px;
  background: var(--danger-soft);
  border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent);
  border-radius: var(--r); font-size: 12.5px; color: var(--text-2);
}
.cp-banner.warn { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 32%, transparent); }
.cp-banner .cpb-ic { color: var(--danger); font-size: 15px; line-height: 1.4; }
.cp-banner.warn .cpb-ic { color: var(--warn); }
.cp-banner b { color: var(--text); }
.cp-banner .cpb-sub { margin-top: 4px; color: var(--muted); font-size: 11.5px; line-height: 1.7; }

/* الحرج يبرز، وغير الحرج يخفت — ليقود البصر إلى السلسلة الحاكمة */
.gantt-row.cp-off .gbar.plan { opacity: .32; }
.gantt-row.cp-off .gantt-label .txt { opacity: .6; }
.gantt-row.cp-on { background: color-mix(in srgb, var(--danger) 5%, transparent); }
.gantt-row.cp-on .gbar.plan {
  outline: 2px solid var(--danger);
  outline-offset: 1px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger) 16%, transparent);
}
.gantt-row.cp-on .gantt-label .txt { font-weight: 700; }
.cp-mark { color: var(--danger); font-size: 9px; margin-inline-end: 3px; flex: none; }

/* الفائض: امتداد مخطّط بعد الشريط بمقدار ما يمكن تأخيره دون أثر */
.gslack {
  position: absolute; top: 50%; transform: translateY(-50%);
  height: 8px; border-radius: 4px; pointer-events: auto;
  background: repeating-linear-gradient(
    45deg, color-mix(in srgb, var(--muted) 26%, transparent) 0 4px,
    transparent 4px 8px);
  border: 1px dashed color-mix(in srgb, var(--muted) 42%, transparent);
}
.gantt-legend .lg-crit { background: var(--danger); }
.gantt-legend .lg-slack {
  background: repeating-linear-gradient(
    45deg, color-mix(in srgb, var(--muted) 34%, transparent) 0 3px, transparent 3px 6px);
  border: 1px dashed var(--border-strong);
}



/* ---- اختيار الأنشطة السابقة: منسدلة للإضافة، وقائمة بترتيب الجدول الزمني ---- */
.dep-add { margin-bottom: 9px; }
.dep-list { display: flex; flex-direction: column; gap: 5px; }
.dep-item {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 10px; border-radius: var(--r-sm);
  background: var(--surface-2); border: 1px solid var(--border);
  box-shadow: inset 3px 0 0 0 var(--dc);
}
html[dir="ltr"] .dep-item { box-shadow: inset -3px 0 0 0 var(--dc); }
.dep-item .dep-seq {
  min-width: 22px; text-align: center; flex: none;
  font-size: 10.5px; font-weight: 800; color: var(--muted);
  background: var(--surface-3); border-radius: 4px; padding: 1px 4px;
}
.dep-item .dep-nm {
  flex: 1; min-width: 0; font-size: 12.5px; font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dep-item .dep-wk { font-size: 10.5px; color: var(--faint); flex: none; }
.dep-item .dep-x {
  flex: none; width: 20px; height: 20px; border: 0; border-radius: 50%;
  background: transparent; color: var(--muted); font-size: 11px; line-height: 1;
}
.dep-item .dep-x:hover { background: var(--danger-soft); color: var(--danger); }
.dep-empty {
  padding: 9px 11px; border-radius: var(--r-sm);
  background: var(--surface-2); border: 1px dashed var(--border-strong);
  font-size: 11.5px; color: var(--muted);
}

/* خط اليوم يستقبل المؤشر ليظهر تلميح التاريخ رغم أن طبقته تتجاهل الفأرة */
.today-line { pointer-events: auto; cursor: help; }
.gantt-legend .lg-today { cursor: help; }
.gantt-legend .lg-today b { color: var(--danger); font-variant-numeric: tabular-nums; }

/* ---- عمود ملخص الاجتماع ---- */
.mtg-tbl .m-summ { width: 300px; }
.mtg-tbl .m-summ .t-note { white-space: pre-line; line-height: 1.7; }
.mtg-tbl .clamp {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden;
}

/* زر توصيات فارغ: دعوة للإضافة لا شرطة صمّاء */
.rec-btn.empty {
  border-style: dashed; color: var(--muted); background: transparent;
  min-width: 34px; justify-content: center;
}
.rec-btn.empty:hover { border-color: var(--brand-2); color: var(--brand-2); background: var(--brand-soft); }
.rec-btn.empty .rb-ic { font-size: 13px; opacity: 1; }

/* ---- صور المراسلات ---- */
.shot-grid { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 9px; }
.shot { position: relative; width: 108px; height: 78px; }
.shot img {
  width: 100%; height: 100%; object-fit: cover; cursor: zoom-in;
  border-radius: var(--r-sm); border: 1px solid var(--border-strong);
}
.shot img:hover { border-color: var(--brand-2); }
.shot-x {
  position: absolute; inset-block-start: -6px; inset-inline-end: -6px;
  width: 20px; height: 20px; border-radius: 50%; border: 0;
  background: var(--danger); color: #fff; font-size: 11px; line-height: 1;
}
.comm-tbl .c-shots { width: 88px; }
.shot-btn {
  position: relative; padding: 0; border: 1px solid var(--border-strong);
  border-radius: var(--r-sm); background: none; width: 62px; height: 44px; overflow: hidden;
}
.shot-btn img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shot-btn:hover { border-color: var(--brand-2); }
.shot-btn .shot-n {
  position: absolute; inset-block-end: 2px; inset-inline-end: 2px;
  background: rgba(0,0,0,.72); color: #fff; font-style: normal;
  font-size: 10px; padding: 0 4px; border-radius: 3px;
}

/* مرفقات الوثيقة في خانتها: أيقونة تفتح الملفات، لا نموذج العقد */
.ct-atts { display: flex; gap: 4px; margin-top: 6px; }

/* ---- لوحة التحديثات في لوحة المؤشرات ---- */
.upd-row {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 13px 16px; border-bottom: 1px solid var(--border);
  cursor: pointer; transition: background .14s;
}
.upd-row:last-child { border-bottom: 0; }
.upd-row:hover { background: var(--surface-2); }
.upd-row.hot { box-shadow: inset 3px 0 0 0 var(--warn); background: var(--warn-soft); }
html[dir="ltr"] .upd-row.hot { box-shadow: inset -3px 0 0 0 var(--warn); }
.upd-row.hot:hover { background: color-mix(in srgb, var(--warn-soft) 82%, var(--surface)); }
.upd-av {
  width: 30px; height: 30px; flex: 0 0 30px; font-size: 11px;
  background: var(--surface-3); color: var(--text-2);
}
.upd-main { flex: 1; min-width: 0; }
.upd-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.upd-top b { font-size: 13.5px; }
.upd-type { font-size: 10.5px; }
.upd-rel { margin-inline-start: auto; font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.upd-body {
  color: var(--text-2); font-size: 12.5px; line-height: 1.75; margin-top: 4px;
  white-space: pre-line;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.upd-by { font-size: 11px; color: var(--faint); margin-top: 4px; }
.upd-edit { flex: none; color: var(--faint); opacity: 0; transition: opacity .14s; }
.upd-row:hover .upd-edit { opacity: 1; }

/* لافتة الحساب المقيَّد */
.scope-note {
  margin: 0 24px; margin-block-start: 16px;
  padding: 9px 14px; border-radius: var(--r-sm);
  background: var(--info-soft); color: var(--info);
  border: 1px solid color-mix(in srgb, var(--info) 26%, transparent);
  font-size: 12.5px; font-weight: 600;
}

/* ---- صندوق الملفات: رفع من الجهاز واستعراض وتنزيل ---- */
.fbox-actions {
  display: flex; align-items: center; gap: 10px; margin-top: 9px; flex-wrap: wrap;
}
.fbox-actions .t-note { font-size: 11.5px; }
.file-chip .fc-a {
  flex: 0 0 auto; font-size: 11px; font-weight: 600; color: var(--brand-2);
  text-decoration: none; padding: 1px 6px; border-radius: 4px;
  border: 1px solid transparent;
}
.file-chip .fc-a:hover { border-color: var(--brand-2); background: var(--surface); }
.file-chip .fc-n { min-width: 0; }
/* مشبك بدل المصغّرة: الملف في القاعدة لا صورةً تُرسَم في الجدول */
.shot-btn.is-file {
  display: grid; place-items: center; font-size: 17px; color: var(--muted);
  background: var(--surface-2);
}
.shot-btn.is-file:hover { color: var(--brand-2); }

/* ---- بطاقة المرفق: رفع من الجهاز، والرابط السابق يبقى ظاهرًا ---- */
.att-field .att-up { margin-top: 6px; }
.att-field .att-up .fbox-actions { margin-top: 6px; }
.att-field .att-up .hint { display: none; }
.att-field .file-chip.old-link { margin-top: 7px; opacity: .8; }
.att-field .lnk-toggle {
  margin-top: 7px; background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: 11px; color: var(--muted); text-decoration: underline;
}
.att-field .lnk-toggle:hover { color: var(--brand-2); }
.att-field .input.ltr { margin-top: 6px; }

/* ---- الإجراء المتخذ: سطر تحت اسم النشاط، أوضح من الملاحظة ---- */
.t-act {
  font-size: 11.5px; line-height: 1.6; color: var(--text-2); margin-top: 2px;
  padding-inline-start: 9px; border-inline-start: 2px solid var(--brand-2);
}
html[dir="ltr"] .t-act { border-inline-start: 2px solid var(--brand-2); }

/* =============================================================================
   الجوال — آيفون وأندرويد
   -----------------------------------------------------------------------------
   الشاشة الصغيرة ليست شاشةً كبيرة مصغَّرة. ما يلي يعالج ما ينكسر فعلًا عليها:
   تكبير iOS التلقائي عند لمس الحقول، وقصّ الحافة المنحنية والشقّ العلوي،
   وأهدافُ لمسٍ أصغر من الإصبع، ونوافذُ تطفو في وسط شاشةٍ لا تتسع لها.
   ============================================================================= */

/* الارتفاع الديناميكي: شريط عنوان المتصفح في الجوال يظهر ويختفي، و100vh
   يتجاهل ذلك فيُقصّ أسفل الصفحة. dvh يتبع الارتفاع المرئي فعلًا. */
@supports (height: 100dvh) {
  .app { min-height: 100dvh; }
  .main { min-height: 100dvh; }
  .gantt-wrap { max-height: calc(100dvh - 250px); }
}

@media (max-width: 640px) {
  /* --- الحقول: 16px حدٌّ أدنى --- */
  /* iOS Safari يكبّر الصفحة تلقائيًا عند لمس حقلٍ خطّه أصغر من 16px، ثم لا
     يعيدها. الرفع إلى 16 يمنع القفزة من أصلها. */
  .input, .select, .textarea { font-size: 16px; padding: 11px 13px; }
  .select { background-position: left 14px top 53%, left 9px top 53%; }

  /* --- حواف الجهاز: الشقّ العلوي وشريط الإيماءات السفلي --- */
  .topbar { padding-inline: max(14px, env(safe-area-inset-left, 0px)) max(14px, env(safe-area-inset-right, 0px)); }
  .content { padding: 14px max(14px, env(safe-area-inset-right, 0px)) max(22px, env(safe-area-inset-bottom, 0px)) max(14px, env(safe-area-inset-left, 0px)); }
  .sidebar { padding-block-end: env(safe-area-inset-bottom, 0px); }

  /* --- الشريط العلوي: مساحة للعنوان لا للزخرفة --- */
  .topbar { gap: 9px; }
  .topbar h1 { font-size: 15.5px; }
  .topbar .crumb { display: none; }          /* اسم المشروع معروف لمن فتح المنصة */
  .topbar-actions { gap: 5px; }
  .topbar-actions .badge { font-size: 10.5px; padding: 2px 7px; }

  /* --- اللمس: الإصبع أعرض من مؤشّر الفأرة --- */
  .btn { min-height: 40px; padding: 9px 14px; }
  .btn-sm { min-height: 34px; }
  .btn-icon { width: 40px; height: 40px; }
  .row-actions { opacity: 1; }               /* لا مرورَ للماوس في الجوال */
  .check input { width: 18px; height: 18px; }

  /* --- البطاقات والجداول --- */
  .card-head { padding: 13px 14px; flex-wrap: wrap; }
  .card-head .actions { margin-inline-start: 0; width: 100%; }
  .tbl { font-size: 12px; }
  .tbl tbody td, .tbl thead th { padding: 8px 9px; }
  .tbl .t-note { max-width: 28ch; }
  /* الجدول العريض ينزلق أفقيًا بإصبع واحدة بدل أن يفيض على الصفحة */
  .tbl-wrap { -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }

  /* --- شريط الأدوات: كل عنصر بعرض كامل، فالصفّ الواحد لا يتّسع --- */
  .toolbar { gap: 7px; }
  .toolbar .grow { min-width: 100%; }
  .toolbar > .btn, .toolbar > .select { flex: 1 1 46%; }

  /* --- النوافذ: ملء الشاشة --- */
  /* نافذةٌ عائمة داخل شاشة 375px تترك هوامش لا تنفع وتضيّق المحتوى. */
  .modal-backdrop { padding: 0; align-items: stretch; }
  .modal, .modal.wide, .modal.narrow {
    max-width: none; max-height: none; height: 100dvh; border-radius: 0; border: 0;
  }
  .modal-head { padding: 14px 15px; padding-block-start: max(14px, env(safe-area-inset-top, 0px)); }
  .modal-body { padding: 15px; }
  .modal-foot { padding: 12px 15px; padding-block-end: max(12px, env(safe-area-inset-bottom, 0px)); }
  .modal-foot .btn { flex: 1; }

  /* --- الجدول الزمني --- */
  .gantt-label { width: 190px; flex: 0 0 190px; padding: 7px 9px; }
  /* في «الكل» يتقاسم العمودُ والمخططُ شاشةً ضيّقة، فيتنازل العمود */
  .gantt-wrap.fit .gantt-label { width: 130px; flex: 0 0 130px; padding: 7px 7px; }
  .gantt-wrap.fit .gantt-label .meta { display: none; }
  .gantt-wrap { max-height: calc(100dvh - 210px); }
  .drag-handle { display: none; }            /* السحب لإعادة الترتيب لا يصلح باللمس */

  /* --- لوحة المؤشرات --- */
  .ent-rings { grid-template-columns: repeat(2, 1fr); gap: 9px; }
  .g-kpi { grid-template-columns: repeat(2, 1fr); }
  .att-grid { grid-template-columns: 1fr; }

  /* --- شاشة الدخول --- */
  .auth-panel { padding: 26px 20px; }
}

/* --- الشاشات الضيّقة جدًا --- */
/* آيفون 12 mini و SE عرضهما 375: عمودان يتّسعان فيهما، فلا نهبط
   إلى عمود واحد إلا في الشاشات الأضيق فعلًا. */
@media (max-width: 340px) {
  .ent-rings, .g-kpi { grid-template-columns: 1fr; }
  .gantt-label { width: 160px; flex: 0 0 160px; }
  .topbar-actions .badge.num { display: none; }   /* رقم الأسبوع يظهر في الصفحة */
}

/* --- ستارة تغلق القائمة الجانبية باللمس خارجها --- */
.nav-scrim {
  position: fixed; inset: 0; z-index: 39; background: rgba(9, 18, 29, .42);
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.nav-scrim.on { opacity: 1; pointer-events: auto; }
@media (min-width: 981px) { .nav-scrim { display: none; } }

/* القائمة المنزلقة خارج الشاشة تُبقي عرضًا يمكن التمرير إليه، فتنزاح الصفحة
   كلها مع الإصبع وكأنها مكسورة. نمنع التمرير الأفقي عن المستند وحده:
   clip لا ينشئ حاوية تمرير، فتبقى الرؤوس اللاصقة تعمل — و hidden احتياط. */
@media (max-width: 980px) {
  html, body { overflow-x: hidden; }
}
@supports (overflow: clip) {
  @media (max-width: 980px) {
    html, body { overflow-x: clip; }
  }
}

/* حلقات الجهات في الجوال: عمودان لا عمود، والحلقة تتقلّص مع بطاقتها.
   حجمها مكتوب في السمة width/height، فنتجاوزه بعرضٍ نسبيّ. */
@media (max-width: 640px) {
  .ent-ring { padding: 11px 7px; }
  .ent-ring .ring-host svg { width: 100%; height: auto; max-width: 108px; }
  .ent-ring-name { font-size: 12px; }
  .ent-ring-role, .ent-ring-meta { font-size: 10.5px; }
}

/* الشريط العلوي في الجوال: العنوان الطويل يلتفّ سطرين فيدفع زرّ القائمة
   خارج الشريط. نمنع الالتفاف ونقصّ الزائد بنقاط، ونثبّت الزرّ. */
@media (max-width: 640px) {
  .topbar { flex-wrap: nowrap; }
  .topbar > div { min-width: 0; flex: 1 1 auto; }
  .topbar h1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .menu-btn { flex: 0 0 auto; }
  .topbar-actions { flex: 0 0 auto; }
}

/* حقل البحث في شريط الأدوات: العرض الكامل بلا تجاوز الحاوية */
@media (max-width: 640px) {
  .toolbar .grow { flex: 1 1 100%; min-width: 0; }
  .toolbar > .btn, .toolbar > .select { flex: 1 1 calc(50% - 4px); min-width: 0; }
}

/* عنصر الشبكة عرضه الأدنى = عرض محتواه ما لم يُقيَّد، فاسم ملفٍ طويل يوسّع
   عموده ويدفع النموذج كله خارج الشاشة. نسمح للأسماء بأن تُقصّ. */
.att-grid > * { min-width: 0; }
.file-chip { max-width: 100%; min-width: 0; }
.file-chip .fc-n { min-width: 0; }

@media (max-width: 640px) {
  .fbox-actions { flex-wrap: wrap; }
  .fbox-actions .t-note { flex: 1 1 100%; }
  .modal-body .field-row, .modal-body .field-row-3 { grid-template-columns: 1fr; }
  .chk-grid { grid-template-columns: 1fr 1fr; }
  .status-pick { flex-wrap: wrap; }
}

/* التقارير في الجوال: حشوة أصغر، والجداول داخلها تنزلق أفقيًا بدل أن تفيض */
@media (max-width: 640px) {
  .report-block { padding: 15px 13px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .report-block .tbl { min-width: 420px; }
}

/* =============================================================================
   ترتيب الجوال — تصحيحات بعد الاختبار على جهاز حقيقي
   ============================================================================= */
@media (max-width: 640px) {

  /* --- عنوان الشاشة --- */
  /* كان يُقصّ إلى «لوحة المؤ…» لأن الشارات تزاحمه. شارة مصدر البيانات
     معلومةٌ تشخيصية تُقرأ مرة، فتُخفى ما دام كل شيء على ما يرام، وتظهر
     وحدها حين يتغيّر الحال: يحفظ · لم يصل · حُفظ من جهاز آخر. */
  .topbar #srcBadge.is-idle { display: none; }
  .topbar h1 { font-size: 16px; }
  .topbar-actions .badge.num { font-size: 10px; padding: 2px 6px; }
  #langBtn { padding: 6px 9px; font-size: 11.5px; }

  /* --- شريط أقسام الاجتماعات --- */
  /* التفافها على أربعة صفوف بحوافّ متعرّجة يبدو مبعثرًا. صفٌّ واحد ينزلق
     بالإصبع: مرتّب، ويُبقي الأقسام كلها في مكان واحد. */
  .chip-row {
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity; padding-block-end: 6px;
    margin-inline: -14px; padding-inline: 14px;   /* ينزلق حتى حافة الشاشة */
    scrollbar-width: none;
  }
  .chip-row::-webkit-scrollbar { display: none; }
  .chip { flex: 0 0 auto; scroll-snap-align: start; padding: 7px 13px; font-size: 12.5px; }
}

/* تلاشٍ عند حافة شريط الأقسام يقول للعين: هنا مزيد، اسحب. */
@media (max-width: 640px) {
  .chip-row {
    -webkit-mask-image: linear-gradient(to left, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
            mask-image: linear-gradient(to left, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
  }
  html[dir="ltr"] .chip-row {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
  }
}

/* =============================================================================
   بطاقة النشاط لمن يطّلع ولا يعدّل
   -----------------------------------------------------------------------------
   لا حقول ولا إطارات: الاسم يتصدّر كعنوان، والإجراء نصٌّ يُقرأ لا قيمةُ حقل،
   والجهات شاراتٌ ملوّنة. ترتيبٌ رأسيّ واحد يُقرأ من أعلى إلى أسفل بلا بحث.
   ============================================================================= */
.tv { display: flex; flex-direction: column; }

.tv-name {
  font-size: 19px; font-weight: 700; line-height: 1.45; color: var(--text);
  letter-spacing: -.01em;
}
.tv-name-en {
  font-size: 13.5px; color: var(--muted); margin-top: 5px; line-height: 1.5;
}
.tv-name-en.is-empty { color: var(--faint); font-style: italic; }

.tv-sec { margin-top: 20px; padding-top: 17px; border-top: 1px solid var(--border); }

.tv-lbl {
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  color: var(--faint); text-transform: uppercase; margin-bottom: 9px;
}

/* الإجراء نصٌّ سرديّ: خطٌّ جانبيّ يحدّه، وسطورٌ متباعدة تُريح القراءة */
.tv-act {
  font-size: 14px; line-height: 1.85; color: var(--text-2); white-space: pre-wrap;
  background: var(--surface-2); border-radius: var(--r-sm);
  padding: 13px 15px; box-shadow: inset 3px 0 0 0 var(--brand-2);
}
html[dir="ltr"] .tv-act { box-shadow: inset -3px 0 0 0 var(--brand-2); }

.tv-empty {
  font-size: 13px; color: var(--faint); font-style: italic;
  padding: 11px 3px;   /* الميل الإيطالي يدفع أول حرف خارج الحدّ */
}

.tv-ents { display: flex; flex-wrap: wrap; gap: 6px; }
.tv-ents .ent-chip { font-size: 12.5px; padding: 4px 11px; }

@media (max-width: 640px) {
  .tv-name { font-size: 17px; }
  .tv-act { font-size: 13.5px; padding: 12px 13px; }
}

/* حالة النشاط وإنجازه في صفٍّ واحد أعلى البطاقة */
.tv-state {
  display: flex; align-items: center; gap: 12px; margin-top: 15px;
  padding: 12px 14px; background: var(--surface-2); border-radius: var(--r-sm);
}
.tv-state .tv-bar { flex: 1; min-width: 0; }
.tv-state .bar-cell { margin: 0; }

/* التواريخ: بدايةٌ ونهاية بينهما سهم يتبع اتجاه اللغة */
.tv-dates {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface-2); border-radius: var(--r-sm); padding: 12px 14px;
}
.tv-dates > div:not(.d-arrow) { flex: 1; min-width: 0; }
.tv-dates .d-lbl { display: block; font-size: 11px; color: var(--faint); margin-bottom: 3px; }
.tv-dates .d-val { font-size: 14px; font-weight: 700; color: var(--text); }
.tv-dates .d-arrow { color: var(--faint); font-size: 15px; flex: 0 0 auto; }
html[dir="ltr"] .tv-dates .d-arrow { transform: scaleX(-1); }
.tv-dur { font-size: 12px; color: var(--muted); margin-top: 8px; }

@media (max-width: 640px) {
  /* الشارة صغيرة والشريط مرن: يتّسعان لصفٍّ واحد حتى في ٣٧٥px */
  .tv-state { gap: 10px; padding: 11px 12px; }
  .tv-state .tv-bar { flex: 1 1 auto; }
  .tv-dates .d-val { font-size: 13px; }
}

/* صفوف «عنوان: قيمة» في بطاقات العرض */
.v-rows {
  margin-top: 15px; background: var(--surface-2);
  border-radius: var(--r-sm); padding: 4px 14px;
}
.v-row {
  display: flex; align-items: baseline; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid var(--border);
}
.v-row:last-child { border-bottom: 0; }
.v-lbl { flex: 0 0 40%; font-size: 12px; color: var(--faint); }
.v-val { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; color: var(--text); }
@media (max-width: 640px) {
  .v-lbl { flex: 0 0 42%; font-size: 11.5px; }
  .v-val { font-size: 13px; }
}