/* ============================================================
   Path: src/RichRich.Web/wwwroot/css/support-help.css
   Session: J-164  ⚠️ MODIFIED — previously J-163 (SUPPORT-1 · HELP-1)
   LastModified: 2026-10-02
   Module: M17 Support + Help (Frontend) — styles
   ============================================================
   📝 J-164: حُذف .sp-form-card { max-width: 860px; } — نموذج طلب الدعم
      يأخذ عرض الصفحة كباقي النماذج.
   ============================================================
   🆕 NEW FILE — J-163
   طلبات الدعم (sp-*) ودليل المستخدم داخل النظام (hg-*). الألوان من
   متغيّرات الثيم (themes.css) فتتبع الثيم والوضع الليليّ. وألوان صناديق
   الدليل نفسُها ألوانُ نسخة Word (توصية/تحذير/اشتراط/ملاحظة).
   ============================================================ */

/* ─────────── Support: form + screenshot ─────────── */
.sp-shot-preview {
    display: flex; gap: .75rem; align-items: flex-start;
    border: 1px dashed var(--card-bdr); border-radius: .5rem; padding: .5rem;
}
.sp-shot-preview img { max-width: 220px; max-height: 160px; border-radius: .375rem; object-fit: contain; }
.sp-shot-meta { display: flex; flex-direction: column; gap: .5rem; min-width: 0; }

/* ─────────── Support: badges ─────────── */
.sp-priority {
    display: inline-block; padding: .15rem .55rem; border-radius: 999px;
    font-size: .75rem; font-weight: 600; white-space: nowrap;
}
.sp-priority.sp-low { background: color-mix(in srgb, var(--t3) 15%, transparent); color: var(--t2); }
.sp-priority.sp-normal { background: color-mix(in srgb, var(--info) 15%, transparent); color: var(--info); }
.sp-priority.sp-high { background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn); }
.sp-priority.sp-urgent { background: color-mix(in srgb, var(--err) 18%, transparent); color: var(--err); }
.sp-your-turn { color: var(--warn); font-weight: 600; }
.page-head-actions .sp-priority,
.page-head-actions .rr-badge-dot { align-self: center; }

/* ─────────── Support: queue counters ─────────── */
.sp-counters { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.sp-counter {
    display: flex; flex-direction: column; align-items: flex-start; gap: .15rem;
    background: var(--card-bg); border: 1px solid var(--card-bdr); border-radius: .75rem;
    padding: .75rem 1rem; text-align: start; cursor: pointer; transition: box-shadow .15s;
}
.sp-counter:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, .08); }
.sp-counter.active { outline: 2px solid var(--p); }
.sp-counter-value { font-size: 1.5rem; font-weight: 700; color: var(--t1); line-height: 1.1; }
.sp-counter-label { font-size: .8rem; color: var(--t3); }
.sp-counter.st-late { border-top: 3px solid var(--err); }
.sp-counter.st-pending { border-top: 3px solid var(--warn); }
.sp-counter.st-done { border-top: 3px solid var(--ok); }
.sp-counter-urgent { border-top: 3px solid var(--err); background: color-mix(in srgb, var(--err) 6%, var(--card-bg)); }

/* ─────────── Support: conversation ─────────── */
.sp-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 1rem; align-items: start; }
.sp-thread { display: flex; flex-direction: column; gap: .75rem; }
.sp-msg {
    background: var(--card-bg); border: 1px solid var(--card-bdr); border-radius: .75rem;
    padding: .75rem 1rem; border-inline-start: 4px solid var(--t3);
}
.sp-msg-support { border-inline-start-color: var(--p); background: color-mix(in srgb, var(--p) 5%, var(--card-bg)); }
.sp-msg-user { border-inline-start-color: var(--accent); }
.sp-msg-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .35rem; color: var(--t1); }
.sp-msg-body { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--t1); line-height: 1.7; }
.sp-msg-shot { margin-top: .6rem; display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; }
.sp-msg-shot img { max-width: 100%; max-height: 420px; border: 1px solid var(--card-bdr); border-radius: .5rem; }
.sp-tag {
    font-size: .7rem; font-weight: 600; padding: .05rem .45rem; border-radius: 999px;
    background: color-mix(in srgb, var(--p) 15%, transparent); color: var(--p);
}
.sp-side { position: sticky; top: 1rem; display: flex; flex-direction: column; gap: .75rem; }

/* ─────────── Help: layout ─────────── */
.hg-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.hg-side {
    position: sticky; top: 1rem; max-height: calc(100vh - 7rem); overflow-y: auto;
    background: var(--card-bg); border: 1px solid var(--card-bdr); border-radius: .75rem; padding: .75rem;
}
.hg-search { position: relative; margin-bottom: .75rem; }
.hg-search .bi { position: absolute; inset-inline-start: .6rem; top: 50%; transform: translateY(-50%); color: var(--t3); }
.hg-search input { padding-inline-start: 2rem; }
.hg-toc-title { font-weight: 700; color: var(--t1); margin-bottom: .35rem; }
.hg-toc a, .hg-hit {
    display: block; color: var(--t2); text-decoration: none; border-radius: .375rem; padding: .3rem .5rem;
    font-size: .85rem; line-height: 1.5;
}
.hg-toc a:hover, .hg-hit:hover { background: color-mix(in srgb, var(--p) 8%, transparent); color: var(--t1); }
.hg-toc a.active { background: color-mix(in srgb, var(--p) 14%, transparent); color: var(--p); font-weight: 600; }
.hg-toc .hg-toc-l1 { font-weight: 700; color: var(--t1); margin-top: .35rem; }
.hg-toc .hg-toc-l2 { padding-inline-start: 1.25rem; }
.hg-hit strong { display: block; color: var(--t1); font-size: .85rem; }
.hg-hit span { display: block; color: var(--t3); font-size: .78rem; }
.hg-context {
    margin-bottom: .75rem; padding: .5rem .75rem; border-radius: .5rem;
    background: color-mix(in srgb, var(--info) 10%, transparent); color: var(--t1);
}
.hg-role-select { min-width: 180px; width: auto; }

/* ─────────── Help: the guide ─────────── */
.hg-doc {
    background: var(--card-bg); border: 1px solid var(--card-bdr); border-radius: .75rem;
    padding: 1.5rem 1.75rem; color: var(--t1); line-height: 1.85; min-width: 0;
}
.hg-doc h2, .hg-doc h3, .hg-doc h4 { scroll-margin-top: 5rem; border-radius: .375rem; transition: background-color .4s; }
.hg-doc .hg-h1 {
    font-size: 1.35rem; font-weight: 700; color: var(--p-dark, var(--p));
    border-bottom: 2px solid var(--p); padding-bottom: .35rem; margin: 2rem 0 1rem;
}
.hg-doc .hg-h1:first-child { margin-top: 0; }
.hg-doc .hg-h2 { font-size: 1.12rem; font-weight: 700; color: var(--p); margin: 1.5rem 0 .6rem; }
.hg-doc .hg-h3 { font-size: 1rem; font-weight: 700; margin: 1.1rem 0 .4rem; }
.hg-doc p { margin: 0 0 .7rem; }
.hg-doc .hg-label { font-weight: 700; color: var(--p); }
.hg-doc code {
    background: color-mix(in srgb, var(--t3) 14%, transparent); color: var(--p-dark, var(--p));
    padding: 0 .3rem; border-radius: .25rem; font-size: .85em;
}
.hg-doc ol.hg-steps { padding-inline-start: 1.6rem; margin-bottom: .8rem; }
.hg-doc ol.hg-steps > li { margin-bottom: .4rem; }
.hg-doc ol.hg-steps > li::marker { color: var(--p); font-weight: 700; }
.hg-doc ul { padding-inline-start: 1.4rem; margin-bottom: .7rem; }
.hg-path {
    margin: .35rem 0 .9rem; padding: .5rem .8rem; border-radius: .375rem;
    background: color-mix(in srgb, var(--p) 7%, transparent); border-inline-start: 4px solid var(--p);
}
.hg-path-label { color: var(--t3); font-weight: 700; margin-inline-end: .25rem; }
.hg-path b { color: var(--p); }
.hg-sep { color: var(--t3); margin: 0 .2rem; }
.hg-callout {
    margin: .4rem 0 1rem; padding: .6rem .9rem; border-radius: .375rem;
    border-inline-start: 5px solid; background: #f3f4f6;
}
.hg-callout p { margin: 0 0 .35rem; }
.hg-callout p:last-child { margin-bottom: 0; }
.hg-callout-kind { font-weight: 700; margin-bottom: .2rem; }
.hg-callout.hg-tip { border-color: #2e7d32; background: #edf7ee; }
.hg-callout.hg-tip .hg-callout-kind { color: #1b5e20; }
.hg-callout.hg-warning { border-color: #c62828; background: #fdeded; }
.hg-callout.hg-warning .hg-callout-kind { color: #b71c1c; }
.hg-callout.hg-prereq { border-color: #1565c0; background: #eaf2fc; }
.hg-callout.hg-prereq .hg-callout-kind { color: #0d47a1; }
.hg-callout.hg-note { border-color: #6b7280; }
.hg-callout.hg-note .hg-callout-kind { color: #374151; }
/* التسميات داخل الصندوق بلونه — كنسخة Word. */
.hg-callout.hg-tip .hg-label { color: #1b5e20; }
.hg-callout.hg-warning .hg-label { color: #b71c1c; }
.hg-callout.hg-prereq .hg-label { color: #0d47a1; }
.hg-callout.hg-note .hg-label { color: #374151; }
.dark .hg-callout { background: color-mix(in srgb, var(--card-bg) 85%, #ffffff); color: var(--t1); }
.dark .hg-callout .hg-callout-kind,
.dark .hg-callout .hg-label { color: var(--t1); }
.hg-table-wrap { overflow-x: auto; margin: .4rem 0 1rem; }
.hg-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.hg-table th { background: var(--p-dark, var(--p)); color: #fff; font-weight: 700; padding: .45rem .6rem; text-align: start; }
.hg-table td { border: 1px solid var(--card-bdr); padding: .45rem .6rem; vertical-align: top; }
.hg-table tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--t3) 6%, transparent); }
.hg-flash { background-color: color-mix(in srgb, var(--warn) 25%, transparent); }

/* ─────────── Narrow screens ─────────── */
@media (max-width: 991.98px) {
    .sp-layout, .hg-layout { grid-template-columns: 1fr; }
    .sp-side, .hg-side { position: static; max-height: none; }
    .hg-side { max-height: 320px; }
    .hg-doc { padding: 1rem; }
}

/* J-163: زرّ «المساعدة» في شريط نقطة البيع رابطٌ لا زرّ — بلا خطّ سفليّ. */
.pos-shell a.toolbar-btn { text-decoration: none; }