/* ==========================================================================
   TKT-UI — مكتب الدعم (قائمة التذاكر في الإدارة)
   مستقل عن ملف Tailwind المبني. نفس لغة تصميم المحادثات (nh-chat.css).
   ========================================================================== */

.nhd {
    --d-primary: #203526;
    --d-accent: #51ba74;
    --d-bg: #ffffff;
    --d-soft: #f6f8f7;
    --d-line: #e5e9e7;
    --d-fg: #17221b;
    --d-fg-2: #5b6b61;
    --d-fg-3: #8a978f;
    --d-hover: #f3f6f4;
    color: var(--d-fg);
    font-size: 14px;
}
.dark .nhd {
    --d-bg: #1f2937;
    --d-soft: #1a2230;
    --d-line: #2d3748;
    --d-fg: #e8ece9;
    --d-fg-2: #a3b0a8;
    --d-fg-3: #7d8a83;
    --d-hover: #232d3b;
}
.nhd *, .nhd *::before, .nhd *::after { box-sizing: border-box; }
.nhd form { margin: 0; }

/* ── الرأس ───────────────────────────────────────────────────────────── */
.nhd-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.nhd-top h1 { font-size: 22px; font-weight: 700; margin: 0; }
.nhd-top p { margin: 2px 0 0; font-size: 13px; color: var(--d-fg-2); }
.nhd-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.nhd-btn {
    display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 10px; font-size: 13px; font-weight: 500;
    background: var(--d-bg); color: var(--d-fg); border: 1px solid var(--d-line); text-decoration: none; cursor: pointer; white-space: nowrap;
}
.nhd-btn:hover { border-color: var(--d-accent); }
.nhd-btn i { font-size: 12px; color: var(--d-fg-2); }
.nhd-btn--primary { background: var(--d-primary); border-color: var(--d-primary); color: #fff; }
.nhd-btn--primary i { color: #fff; }

/* ── مؤشرات الأداء ───────────────────────────────────────────────────── */
.nhd-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); background: var(--d-bg); border: 1px solid var(--d-line); border-radius: 14px; margin-bottom: 18px; overflow: hidden; }
.nhd-kpi { padding: 14px 18px; border-inline-start: 1px solid var(--d-line); }
.nhd-kpi:first-child { border-inline-start: 0; }
.nhd-kpi__label { font-size: 12px; color: var(--d-fg-2); margin: 0; display: flex; align-items: center; gap: 6px; }
.nhd-kpi__value { font-size: 20px; font-weight: 700; margin: 4px 0 0; font-variant-numeric: tabular-nums; }
.nhd-kpi__value small { font-size: 12px; font-weight: 500; color: var(--d-fg-3); }
.nhd-kpi.is-alert .nhd-kpi__value { color: #b42318; }
.dark .nhd-kpi.is-alert .nhd-kpi__value { color: #fca5a5; }
@media (max-width: 900px) {
    .nhd-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .nhd-kpi { border-inline-start: 0; border-top: 1px solid var(--d-line); }
    .nhd-kpi:nth-child(-n+2) { border-top: 0; }
    .nhd-kpi:nth-child(even) { border-inline-start: 1px solid var(--d-line); }
}

/* ── بطاقة القائمة ───────────────────────────────────────────────────── */
.nhd-card { background: var(--d-bg); border: 1px solid var(--d-line); border-radius: 14px; overflow: hidden; }
.nhd-tabs { display: flex; gap: 2px; padding: 0 10px; border-bottom: 1px solid var(--d-line); overflow-x: auto; scrollbar-width: none; }
.nhd-tabs::-webkit-scrollbar { display: none; }
.nhd-tab {
    display: inline-flex; align-items: center; gap: 7px; padding: 13px 12px 11px; font-size: 13.5px; color: var(--d-fg-2);
    text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.nhd-tab:hover { color: var(--d-fg); }
.nhd-tab.is-on { color: var(--d-primary); border-bottom-color: var(--d-primary); font-weight: 600; }
.dark .nhd-tab.is-on { color: var(--d-accent); border-bottom-color: var(--d-accent); }
.nhd-count { min-width: 22px; padding: 1px 7px; border-radius: 999px; font-size: 11.5px; background: var(--d-soft); color: var(--d-fg-2); text-align: center; font-variant-numeric: tabular-nums; }
.nhd-tab.is-on .nhd-count { background: var(--d-primary); color: #fff; }
.nhd-count.is-warn { background: #fef3c7; color: #92400e; }

.nhd-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--d-line); background: var(--d-soft); }
.nhd-search { flex: 1 1 260px; display: flex; align-items: center; gap: 8px; background: var(--d-bg); border: 1px solid var(--d-line); border-radius: 10px; padding: 0 12px; }
.nhd-search i { color: var(--d-fg-3); font-size: 12px; }
.nhd-search input { flex: 1; border: 0; background: transparent; padding: 8px 0; font-size: 13px; color: var(--d-fg); outline: none; box-shadow: none; }
.nhd-select {
    flex: 0 1 auto; min-width: 130px; border: 1px solid var(--d-line); background-color: var(--d-bg); color: var(--d-fg);
    border-radius: 10px; padding: 7px 12px; font-size: 13px; outline: none; box-shadow: none;
}
.nhd-select.is-set { border-color: var(--d-accent); }
.nhd-clear { font-size: 12.5px; color: var(--d-fg-2); text-decoration: none; padding: 6px 4px; white-space: nowrap; }
.nhd-clear:hover { color: #b42318; }

/* ── صفوف التذاكر ────────────────────────────────────────────────────── */
.nhd-head, .nhd-row {
    display: grid;
    grid-template-columns: minmax(0, 2.6fr) minmax(0, 1.5fr) minmax(0, 1fr) 128px 112px;
    gap: 16px; align-items: center; padding: 12px 18px;
}
.nhd-head { font-size: 11.5px; color: var(--d-fg-3); font-weight: 600; padding-top: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--d-line); }
.nhd-row { border-bottom: 1px solid var(--d-line); text-decoration: none; color: inherit; position: relative; }
.nhd-row:last-child { border-bottom: 0; }
.nhd-row:hover { background: var(--d-hover); }
.nhd-row.is-urgent::before, .nhd-row.is-high::before { content: ""; position: absolute; inset-block: 10px; inset-inline-start: 0; width: 3px; border-radius: 3px; }
.nhd-row.is-urgent::before { background: #dc2626; }
.nhd-row.is-high::before { background: #f59e0b; }

.nhd-subject { min-width: 0; }
.nhd-subject__line { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.nhd-id { font-size: 12px; color: var(--d-fg-3); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.nhd-title { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nhd-snippet { font-size: 12.5px; color: var(--d-fg-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.nhd-from { font-weight: 600; }
.nhd-from i { font-size: 10.5px; margin-inline-end: 2px; }
.nhd-from.is-staff { color: var(--d-primary); }
.nhd-from.is-staff i { color: var(--d-accent); }
.dark .nhd-from.is-staff { color: #a9e1bc; }
.nhd-from.is-cust { color: #9a5b00; }
.dark .nhd-from.is-cust { color: #f5c46b; }
.nhd-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.nhd-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; padding: 2px 8px; border-radius: 999px; background: var(--d-soft); color: var(--d-fg-2); border: 1px solid var(--d-line); white-space: nowrap; }
.nhd-chip--late { background: #fef2f2; color: #b42318; border-color: #fbd5d5; }
.nhd-chip--prio-urgent { background: #fef2f2; color: #b42318; border-color: #fbd5d5; }
.nhd-chip--prio-high { background: #fffbeb; color: #92400e; border-color: #fde68a; }
.dark .nhd-chip--late, .dark .nhd-chip--prio-urgent { background: rgba(239,68,68,.12); color: #fca5a5; border-color: rgba(239,68,68,.3); }
.dark .nhd-chip--prio-high { background: rgba(245,158,11,.12); color: #fcd34d; border-color: rgba(245,158,11,.3); }

.nhd-person { display: flex; align-items: center; gap: 10px; min-width: 0; }
.nhd-avatar { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; overflow: hidden; background: var(--d-soft); color: var(--d-primary); font-weight: 700; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--d-line); }
.dark .nhd-avatar { color: var(--d-accent); }
.nhd-avatar img { width: 100%; height: 100%; object-fit: cover; }
.nhd-person__text { min-width: 0; display: flex; flex-direction: column; }
.nhd-person__name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 6px; }
.nhd-person__sub { font-size: 12px; color: var(--d-fg-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nhd-agent { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nhd-agent.is-none { color: var(--d-fg-3); }

.nhd-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.nhd-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.nhd-status--new { background: #e8f6ee; color: #1d6b3d; }
.nhd-status--pending { background: #eef2ff; color: #3949ab; }
.nhd-status--waiting_customer { background: #fff7e6; color: #9a5b00; }
.nhd-status--resolved { background: #ecfdf3; color: #146c3c; }
.nhd-status--closed { background: var(--d-soft); color: var(--d-fg-2); }
.dark .nhd-status--new { background: rgba(81,186,116,.15); color: #9be3b4; }
.dark .nhd-status--pending { background: rgba(99,102,241,.15); color: #a5b4fc; }
.dark .nhd-status--waiting_customer { background: rgba(245,158,11,.15); color: #fcd34d; }
.dark .nhd-status--resolved { background: rgba(81,186,116,.12); color: #9be3b4; }

.nhd-when { text-align: end; }
.nhd-when__time { font-size: 12.5px; color: var(--d-fg-2); white-space: nowrap; }
.nhd-when__msgs { font-size: 11.5px; color: var(--d-fg-3); margin-top: 2px; }

.nhd-empty { padding: 56px 20px; text-align: center; color: var(--d-fg-3); }
.nhd-empty i { font-size: 30px; display: block; margin-bottom: 10px; color: var(--d-line); }
.nhd-empty p { margin: 0; }
.nhd-empty strong { display: block; color: var(--d-fg); margin-bottom: 4px; }
.nhd-pager { padding: 12px 18px; border-top: 1px solid var(--d-line); }

@media (max-width: 1100px) {
    .nhd-head { display: none; }
    .nhd-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "subj status" "cust when"; row-gap: 10px; }
    .nhd-row > .nhd-subject { grid-area: subj; }
    .nhd-row > .nhd-status-cell { grid-area: status; justify-self: end; }
    .nhd-row > .nhd-cust { grid-area: cust; }
    .nhd-row > .nhd-when { grid-area: when; }
    .nhd-row > .nhd-agent-cell { display: none; }
}

/* ── صفحة العضو: تذاكري ──────────────────────────────────────────────── */
.nhd--member { max-width: 80rem; } /* TKT-25: نفس عرض صفحات الدعم الأخرى */
.nhd-row--member, .nhd-head--member { grid-template-columns: minmax(0, 1fr) 150px 120px; grid-template-areas: none; }
.nhd-head--member { display: grid; }
.nhd-row--member { grid-template-areas: "subj status when"; }
.nhd-row--member > .nhd-subject { grid-area: subj; }
.nhd-row--member > .nhd-status-cell { grid-area: status; justify-self: start; }
.nhd-row--member > .nhd-when { grid-area: when; }
.nhd-row--member.has-new { background: #f7fbf8; }
.dark .nhd-row--member.has-new { background: rgba(81,186,116,.06); }
.nhd-row--member.has-new .nhd-title { font-weight: 700; }
.nhd-new {
    display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px;
    background: var(--d-accent); color: #fff; white-space: nowrap; flex-shrink: 0;
}
.nhd-chip--action { background: #fff7e6; color: #9a5b00; border-color: #f3d9a4; }
.dark .nhd-chip--action { background: rgba(245,158,11,.12); color: #fcd34d; border-color: rgba(245,158,11,.3); }
.nhd-banner {
    display: flex; align-items: center; gap: 10px; padding: 11px 16px; margin-bottom: 14px; border-radius: 12px; font-size: 13.5px;
    background: #f0f8f3; border: 1px solid #cfe9d8; color: #1d5a35;
}
.dark .nhd-banner { background: rgba(81,186,116,.1); border-color: rgba(81,186,116,.3); color: #9be3b4; }
.nhd-banner i { color: var(--d-accent); }
@media (max-width: 760px) {
    .nhd-head--member { display: none; }
    .nhd-row--member { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "subj subj" "status when"; row-gap: 10px; }
    .nhd-row--member > .nhd-subject { grid-area: subj; }
    .nhd-row--member > .nhd-status-cell { grid-area: status; }
    .nhd-row--member > .nhd-when { grid-area: when; }
}

/* ── أداء الوكلاء ────────────────────────────────────────────────────── */
.nhd-perf { margin-top: 18px; background: var(--d-bg); border: 1px solid var(--d-line); border-radius: 14px; overflow: hidden; }
.nhd-perf summary { cursor: pointer; padding: 13px 18px; font-weight: 600; font-size: 14px; list-style: none; display: flex; align-items: center; justify-content: space-between; }
.nhd-perf summary::-webkit-details-marker { display: none; }
.nhd-perf summary span { font-size: 12px; font-weight: 400; color: var(--d-fg-3); }
.nhd-perf[open] summary { border-bottom: 1px solid var(--d-line); }
.nhd-perf table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.nhd-perf th { text-align: start; font-weight: 600; font-size: 11.5px; color: var(--d-fg-3); padding: 10px 18px; background: var(--d-soft); }
.nhd-perf td { padding: 10px 18px; border-top: 1px solid var(--d-line); }

/* ==========================================================================
   TKT-SHOW — صفحة التذكرة في الإدارة
   ========================================================================== */
.nht-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.nht-title { min-width: 0; flex: 1 1 420px; }
.nht-back { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--d-fg-2); text-decoration: none; margin-bottom: 6px; }
.nht-back:hover { color: var(--d-accent); }
.nht-back i { font-size: 11px; }
.nht-title h1 { font-size: 20px; font-weight: 700; margin: 0 0 8px; line-height: 1.5; overflow-wrap: anywhere; }
.nht-title h1 .nhd-id { font-size: 15px; font-weight: 500; margin-inline-end: 4px; }
.nht-title .nhd-meta { gap: 6px; }
.nht-banner--error { background: #fef3f2; border-color: #fecdca; color: #912018; }
.nht-banner--error i { color: #d92d20; }
.nht-presence { display: flex; align-items: center; gap: 8px; padding: 10px 14px; margin-bottom: 14px; border-radius: 12px; font-size: 13px; background: #fffaeb; border: 1px solid #fedf89; color: #93370d; }
.nht-presence[hidden] { display: none; }

.nht-grid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 18px; align-items: start; }
.nht-main { min-width: 0; }
.nht-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.nht-box { padding: 16px; }
.nht-h { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; margin: 0 0 12px; }
.nht-h i, .nht-fold summary i:first-child { color: var(--d-accent); font-size: 12px; }
.nht-label { font-size: 11.5px; font-weight: 600; color: var(--d-fg-3); margin: 14px 0 6px; }
.nht-muted { color: var(--d-fg-3); }
.nht-hint { font-size: 12px; color: var(--d-fg-2); margin: 0 0 10px; }
.nht-num { font-variant-numeric: tabular-nums; }

.nht-person { display: flex; align-items: center; gap: 12px; }
.nht-avatar { width: 44px; height: 44px; font-size: 16px; }
.nht-person__text { min-width: 0; }
.nht-person__name { margin: 0; font-weight: 700; font-size: 14.5px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.nht-person__sub { margin: 2px 0 0; font-size: 12.5px; color: var(--d-fg-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: end; }
.nht-note { margin: 10px 0 0; font-size: 12px; color: var(--d-fg-2); display: flex; gap: 6px; align-items: center; }
.nht-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.nht-links a { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 8px; border: 1px solid var(--d-line); font-size: 12.5px; color: var(--d-fg); text-decoration: none; }
.nht-links a:hover { border-color: var(--d-accent); }
.nht-links a i { font-size: 11px; color: var(--d-accent); }

.nht-facts { margin: 12px 0 0; padding: 0; font-size: 13px; }
.nht-facts > div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid var(--d-line); }
.nht-facts > div:first-child { border-top: 0; }
.nht-box > .nht-h + .nht-facts { margin-top: 0; }
.nht-facts dt { color: var(--d-fg-2); flex-shrink: 0; }
.nht-facts dd { margin: 0; font-weight: 600; text-align: end; overflow-wrap: anywhere; }
.nht-facts dd small { display: block; font-weight: 400; font-size: 11.5px; color: var(--d-fg-3); }

.nht-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 10px; }
.nht-field label { font-size: 11.5px; font-weight: 600; color: var(--d-fg-3); }
.nht-field .nhd-select { width: 100%; }
.nht-btn-sm { padding: 6px 12px; font-size: 12.5px; justify-content: center; }
.nht-btn-sm[hidden] { display: none; }

.nht-sla { border-top: 1px solid var(--d-line); margin-top: 4px; }
.nht-sla__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 5px 0; font-size: 12.5px; }
.nht-sla__row small { display: block; font-size: 11.5px; color: var(--d-fg-3); font-variant-numeric: tabular-nums; }
.nht-sla__state { flex-shrink: 0; font-size: 11.5px; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: var(--d-soft); color: var(--d-fg-2); }
.nht-sla__state.is-met { background: #ecfdf3; color: #067647; }
.nht-sla__state.is-overdue { background: #fef3f2; color: #b42318; }
.dark .nht-sla__state.is-met { background: rgba(81,186,116,.15); color: #a9e1bc; }
.dark .nht-sla__state.is-overdue { background: rgba(240,68,56,.15); color: #fca5a5; }

.nht-tags { border-top: 1px solid var(--d-line); margin-top: 8px; }
.nht-tags__list { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.nht-tag { position: relative; cursor: pointer; }
.nht-tag input { position: absolute; opacity: 0; pointer-events: none; }
.nht-tag span { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: 12px; border: 1px solid var(--d-line); color: var(--d-fg-2); background: var(--d-bg); }
.nht-tag span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--tag, var(--d-fg-3)); margin-inline-end: 6px; }
.nht-tag input:checked + span { border-color: var(--tag, var(--d-accent)); color: var(--d-fg); font-weight: 600; background: var(--d-soft); }
.nht-tag input:focus-visible + span { outline: 2px solid var(--d-accent); outline-offset: 1px; }

.nht-rating__value { margin: 0; font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.nht-rating__value span { font-size: 13px; font-weight: 500; color: var(--d-fg-2); }
.nht-rating__text { margin: 8px 0 0; font-size: 13px; color: var(--d-fg-2); }
.nht-rating .nht-h i { color: #f5b301; }

.nht-fold { padding: 0; }
.nht-fold summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; padding: 13px 16px; font-size: 13.5px; font-weight: 700; }
.nht-fold summary::-webkit-details-marker { display: none; }
.nht-fold summary > span { display: flex; align-items: center; gap: 8px; }
.nht-fold__icon { font-size: 11px; color: var(--d-fg-3); transition: transform .15s; }
.nht-fold[open] .nht-fold__icon { transform: rotate(180deg); }
.nht-fold[open] summary { border-bottom: 1px solid var(--d-line); }
.nht-fold > :not(summary) { margin-inline: 16px; }
.nht-fold > :last-child { margin-bottom: 14px; }
.nht-fold > .nht-label:first-of-type, .nht-fold > .nht-hint { margin-top: 12px; }

.nht-list { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.nht-list li { border-top: 1px solid var(--d-line); }
.nht-list li:first-child { border-top: 0; }
.nht-list li > a, .nht-list li > div { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 6px 0; color: var(--d-fg); text-decoration: none; }
.nht-list li > a:hover { color: var(--d-accent); }
.nht-list li > a > span, .nht-list li > div > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nht-list small { flex-shrink: 0; font-size: 11.5px; color: var(--d-fg-3); }
.nht-list li.nht-muted { padding: 6px 0; }

.nht-log { list-style: none; margin: 10px 16px 14px; padding: 0; max-height: 300px; overflow-y: auto; font-size: 12.5px; }
.nht-log li { padding: 6px 0; border-top: 1px solid var(--d-line); color: var(--d-fg-2); }
.nht-log li:first-child { border-top: 0; }
.nht-log strong { color: var(--d-fg); font-weight: 600; }
.nht-log small { display: block; color: var(--d-fg-3); font-size: 11px; margin-top: 1px; }

@media (max-width: 1100px) {
    .nht-grid { grid-template-columns: minmax(0, 1fr); }
    .nht-side { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); align-items: start; }
}
/* ==========================================================================
   MSG-UI — الرسائل الجماعية والتلقائية + عناصر النماذج العامة (nhf)
   ========================================================================== */
.nhd .nhc-tabs { margin-bottom: 16px; }
.nhf-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.nhf-field[hidden] { display: none; }
.nhf-label { font-size: 13px; font-weight: 600; color: var(--d-fg); }
.nhf-label span { font-weight: 400; color: var(--d-fg-3); font-size: 12px; }
.nhf-input {
    width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--d-line); background: var(--d-bg); color: var(--d-fg);
    font: inherit; font-size: 14px; line-height: 1.6; outline: none; appearance: auto;
}
textarea.nhf-input { resize: vertical; min-height: 120px; }
.nhf-input:focus { border-color: var(--d-accent); box-shadow: 0 0 0 3px rgba(81,186,116,.18); }
.nhf-input::placeholder { color: var(--d-fg-3); }
.nhf-input--short { max-width: 140px; }
.nhf-input--mid { max-width: 280px; }
.nhf-input--tiny { width: 76px; padding: 6px 8px; text-align: center; }
.nhf-hint { margin: 0; font-size: 12px; color: var(--d-fg-2); line-height: 1.7; }
.nhf-var { font: inherit; font-family: ui-monospace, monospace; font-size: 11.5px; padding: 1px 6px; border-radius: 6px; border: 1px solid var(--d-line); background: var(--d-soft); color: var(--d-fg); cursor: pointer; }
.nhf-var:hover { border-color: var(--d-accent); }
.nhf-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.nhf-search { position: relative; }
.nhf-results { position: absolute; inset-inline: 0; top: calc(100% + 4px); z-index: 20; list-style: none; margin: 0; padding: 4px; background: var(--d-bg); border: 1px solid var(--d-line); border-radius: 10px; box-shadow: 0 8px 24px rgba(16,24,20,.12); max-height: 260px; overflow-y: auto; }
.nhf-results[hidden] { display: none; }
.nhf-results button { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 8px 10px; border: 0; border-radius: 8px; background: none; color: var(--d-fg); font: inherit; font-size: 13px; text-align: start; cursor: pointer; }
.nhf-results button:hover { background: var(--d-hover); }
.nhf-results small { color: var(--d-fg-3); font-size: 11.5px; }
.nhf-picked { display: flex; flex-wrap: wrap; gap: 6px; }
.nhf-picked:empty { display: none; }
.nhf-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 10px; border-radius: 999px; background: var(--d-soft); border: 1px solid var(--d-line); font-size: 12.5px; }
.nhf-chip button { border: 0; background: none; color: var(--d-fg-3); cursor: pointer; font-size: 14px; line-height: 1; padding: 0 4px; }
.nhf-switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 12.5px; color: var(--d-fg-2); }
.nhf-switch input[type=checkbox] { position: absolute; opacity: 0; width: 1px; height: 1px; }
.nhf-switch__track { width: 36px; height: 20px; border-radius: 999px; background: var(--d-line); position: relative; transition: background .15s; flex-shrink: 0; }
.nhf-switch__track::after { content: ""; position: absolute; top: 2px; inset-inline-start: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: inset-inline-start .15s; }
.nhf-switch input:checked ~ .nhf-switch__track { background: var(--d-accent); }
.nhf-switch input:checked ~ .nhf-switch__track::after { inset-inline-start: 18px; }
.nhf-switch input:focus-visible ~ .nhf-switch__track { outline: 2px solid var(--d-accent); outline-offset: 2px; }

.nhm-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
.nhm-box { padding: 20px; }
.nhm-audience { display: flex; align-items: center; gap: 10px; padding: 11px 14px; margin: 2px 0 18px; border-radius: 10px; background: #f0f8f3; border: 1px solid #cfe9d8; color: #1d5a35; font-size: 13.5px; }
.nhm-audience i { color: var(--d-accent); }
.nhm-audience b { font-size: 16px; font-variant-numeric: tabular-nums; }
.nhm-audience.is-empty { background: #fffaeb; border-color: #fedf89; color: #93370d; }
.nhm-audience.is-empty i { color: #dc6803; }
.dark .nhm-audience { background: rgba(81,186,116,.1); border-color: rgba(81,186,116,.3); color: #a9e1bc; }
.nhm-preview { position: sticky; top: 90px; }
.nhm-bubble { background: var(--d-soft); border: 1px solid var(--d-line); border-radius: 14px; border-start-start-radius: 4px; padding: 12px 14px; font-size: 13.5px; line-height: 1.8; white-space: pre-line; overflow-wrap: anywhere; max-height: 360px; overflow-y: auto; }
.nhm-bubble__text.is-placeholder { color: var(--d-fg-3); }
.nhm-notes { list-style: none; margin: 14px 0 0; padding: 0; font-size: 12.5px; color: var(--d-fg-2); display: flex; flex-direction: column; gap: 7px; }
.nhm-notes i { width: 16px; color: var(--d-accent); margin-inline-end: 4px; }

.nhm-row { grid-template-columns: minmax(0, 1fr) 120px 70px 90px 70px; }
.nhm-num { text-align: center; font-variant-numeric: tabular-nums; font-weight: 600; }
.nhm-num small { font-weight: 400; color: var(--d-fg-3); font-size: 11px; }
.nhd-head .nhm-num { font-weight: 600; }
.nhm-rec { grid-template-columns: minmax(0, 1fr) 150px 100px; }
.nhm-end { text-align: end; }
.nhm-read { color: #1570ef; font-size: 12.5px; }
.nhm-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.nhm-kpi-text { font-size: 16px; }
.nhm-danger { color: #b42318; border-color: #fecdca; }
.nhm-danger i { color: #b42318; }

.nhm-autos { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; align-items: start; }
.nhm-auto { display: flex; flex-direction: column; gap: 12px; }
.nhm-auto.is-on { border-color: var(--d-accent); }
.nhm-auto__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.nhm-days { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--d-fg-2); }

.nhm-row, .nhm-rec { grid-template-areas: none; }
.nhd-row.nhm-row > *, .nhd-row.nhm-rec > * { grid-area: auto; }
.nhd-head.nhm-row, .nhd-head.nhm-rec { display: grid; }
@media (max-width: 900px) {
    .nhm-grid { grid-template-columns: minmax(0, 1fr); }
    .nhm-preview { position: static; }
    .nhm-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .nhd-head.nhm-row, .nhd-head.nhm-rec { display: none; }
    .nhd-row.nhm-row { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 10px; }
    .nhd-row.nhm-row > .nhd-subject { grid-column: 1 / -1; }
    .nhd-row.nhm-row > .nhd-status-cell { grid-column: 1 / -1; justify-self: start; }
    .nhd-row.nhm-row > .nhm-num::before { content: attr(data-label); display: block; font-size: 11px; font-weight: 400; color: var(--d-fg-3); }
    .nhd-row.nhm-rec { grid-template-columns: minmax(0, 1fr) auto; }
    .nhd-row.nhm-rec > .nhd-person { grid-column: 1 / -1; }
    .nhm-box { padding: 16px; }
}

@media (max-width: 640px) {
    .nht-title h1 { font-size: 17px; }
    .nht-top .nhd-actions { width: 100%; }
    .nht-top .nhd-actions form { flex: 1; }
    .nht-top .nhd-actions .nhd-btn { width: 100%; justify-content: center; }
}

/* ── TKT-29: تحديد التذاكر والإجراءات الجماعية ─────────────────────────── */
.nhd-bulkrow { display: flex; align-items: stretch; border-bottom: 1px solid var(--d-line); }
.nhd-bulkrow:last-of-type { border-bottom: 0; }
.nhd-bulkrow > .nhd-row { flex: 1; min-width: 0; border-bottom: 0; }
.nhd-bulkrow.is-picked, .nhd-bulkrow.is-picked > .nhd-row { background: rgba(81,186,116,.07); }
.nhd-pick { display: flex; align-items: center; justify-content: center; width: 38px; flex-shrink: 0; cursor: pointer; }
.nhd-pick:hover { background: var(--d-hover); }
.nhd-pick input { width: 16px; height: 16px; accent-color: var(--d-accent); cursor: pointer; }
.nhd-head--bulk { padding-inline-start: 56px; }
.nhd-bulk { position: sticky; top: 8px; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; padding: 10px 14px; background: var(--d-bg); border: 1px solid var(--d-accent); border-radius: 12px; box-shadow: 0 6px 20px rgba(16,24,40,.08); }
.nhd-bulk[hidden] { display: none; }
.nhd-bulk__all { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; margin-inline-end: auto; }
.nhd-bulk__all input { width: 16px; height: 16px; accent-color: var(--d-accent); }
.nhd-bulk select[hidden] { display: none; }

/* ── TKT-28: عدّاد مهلة أول رد ─────────────────────────────────────────── */
.nhd-status-cell { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.nhd-sla { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.nhd-sla i { font-size: 10px; }
.nhd-sla--green { background: #ecfdf3; color: #067647; }
.nhd-sla--amber { background: #fffaeb; color: #b54708; }
.nhd-sla--red { background: #fef3f2; color: #b42318; }
.nhd-sla--late { background: #b42318; color: #fff; }
.dark .nhd-sla--green { background: rgba(81,186,116,.15); color: #9be3b4; }
.dark .nhd-sla--amber { background: rgba(245,158,11,.15); color: #fcd34d; }
.dark .nhd-sla--red { background: rgba(240,68,56,.15); color: #fca5a5; }
@media (max-width: 900px) { .nhd-head--bulk { padding-inline-start: 18px; } }