/* Docs widget (مستندات) — sidebar with toggle and mobile drawer, inline rename, trash, save tag, print preview. */

/* ── split + sidebar ── */
.dx-split { position: relative; min-height: 0; overflow: hidden; }
.dx-split .dside { width: 262px; flex: none; display: flex; flex-direction: column; min-height: 0; background: var(--muted); border-inline-end: 1px solid var(--border); overflow: hidden; transition: width .22s var(--ease), transform .24s var(--ease); z-index: 6; }
.dx-split .dside > * { min-width: 262px; }
.dx-split.side-off .dside { width: 0; border-inline-end-color: transparent; }
.dx-split .dtop { display: grid; gap: 4px; padding: 10px 10px 6px; }
.dx-split .dtop-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.dx-split .dtop-t { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; font-family: Morabba; font-size: 15px; }
.dx-split .dtop-t .i { width: 15px; height: 15px; flex: none; }
.dx-split .dtop .srch { flex: 1; min-width: 0; height: 34px; display: flex; align-items: center; gap: 6px; padding: 0 10px; background: var(--card); }
.dx-split .dtop .srch .i { width: 14px; height: 14px; flex: none; color: var(--muted-foreground); }
.dx-split .dtop .srch input { flex: 1; min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; font: inherit; font-size: 13px; color: inherit; }
.dx-split .dtop .srch.focus { box-shadow: 0 0 0 2px var(--primary); }
.dx-split .dtop .btn { flex: none; }
.dx-split .dcount { font-size: 11.5px; padding: 0 2px; }
.dx-split .dlist { flex: 1; min-height: 0; overflow: auto; padding: 0 8px 8px; }
.dx-split .dfold { display: flex; gap: 6px; align-items: center; font-size: 12px; color: var(--muted-foreground); padding: 10px 6px 4px; min-width: 0; }
.dx-split .dfold span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dx-split .dfold .i { width: 13px; height: 13px; flex: none; }
.dx-split .dempty { font-size: 12px; padding: 4px 8px 8px; }
.dx-split .dbot { display: grid; gap: 6px; padding: 8px 10px; border-top: 1px solid var(--border); }
.dx-split .dbot .btn { justify-content: flex-start; min-width: 0; }
.dx-split .dbot .dnew { width: 100%; }
.dx-split .dtrash .tc { white-space: nowrap; }

/* rows */
.dx-split .dr { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 6px 0 8px; border-radius: 8px; cursor: pointer; font-size: 13.5px; min-width: 0; }
.dx-split .dr-ic { flex: none; display: inline-flex; }
.dx-split .dr-ic .i { width: 14px; height: 14px; }
.dx-split .dr .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dx-split .dr .dm { flex: none; opacity: 0; }
.dx-split .dr:hover .dm, .dx-split .dr.sel .dm, .dx-split .dr:focus-within .dm { opacity: 1; }
.dx-split .dr-in { flex: 1; min-width: 0; height: 26px; padding: 0 6px; font: inherit; font-size: 13.5px; color: var(--foreground); background: var(--card); border: 1px solid var(--primary); border-radius: 6px; outline: 0; }
.dx-split .dr-tr { height: auto; min-height: 44px; padding: 6px 6px 6px 8px; cursor: default; }
.dx-split .dr-tr .nm { display: grid; gap: 1px; }
.dx-split .dr-tr .nm small { font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dx-split .dr-tr .btn { flex: none; height: 26px; }
.dx-split .dpurge { color: var(--red); }

/* ── header row: breadcrumb root with save tag pinned on its left, actions at the far left ── */
.dx-split .dhead { flex-wrap: nowrap; min-width: 0; }
.dx-split .dhead .dtog { flex: none; }
.dx-split .dhead .bc2 { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dx-split .dhead .dsp { flex: 1 1 0; min-width: 0; }
.dx-split .dhead .dacts { display: flex; gap: 4px; flex: none; }
.dx-split .dhead .dacts .i { width: 14px; height: 14px; }

/* save status tag */
.dsst { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 99px; font-size: 12px; white-space: nowrap; flex: none; }
.dsst .i { width: 12px; height: 12px; }
.dsst.saving { color: var(--foreground); background: color-mix(in srgb, var(--amber) 18%, var(--card)); }
.dsst.saving .i { color: var(--amber); }
.dsst.saved { color: var(--success-ink, var(--green)); background: color-mix(in srgb, var(--green) 18%, var(--card)); }
.dsst.idle { display: none; }

/* ── print / PDF body (shared by the preview dialog and the print root) ── */
.pd-doc { direction: rtl; font-family: Morabba, system-ui, sans-serif; line-height: 1.9; color: var(--foreground); }
.pd-doc .pd-t { font-size: 24px; font-weight: 700; margin: 0 0 10px; line-height: 1.4; }
.pd-doc h2 { font-size: 20px; font-weight: 700; margin: 14px 0 4px; }
.pd-doc h3 { font-size: 17px; font-weight: 700; margin: 10px 0 2px; }
.pd-doc p { margin: 4px 0; }
.pd-doc .pd-li { padding-inline-start: 8px; }
.pd-doc .pd-done { text-decoration: line-through; opacity: .6; }
.pd-doc blockquote { border-inline-start: 3px solid #888; padding-inline-start: 12px; margin: 8px 0; color: #555; }
.pd-doc pre { direction: ltr; text-align: left; background: #f3f3f3; padding: 8px 10px; border-radius: 6px; white-space: pre-wrap; font-family: ui-monospace, monospace; }
.pd-doc hr { border: 0; border-top: 1px solid #ccc; margin: 12px 0; }
.dx-pdf .dx-pdfp { background: #fff; color: #111; border: 1px solid var(--border); border-radius: 8px; padding: 22px 26px; max-height: 300px; overflow: auto; margin: 10px 0 4px; }
.dx-pdf .dx-pdfp .pd-doc { color: #111; }
.dx-pdf .dx-pdfp .pd-doc .pd-t { font-size: 20px; }
.dx-pdf .dx-pdfp .pd-doc h2 { font-size: 17px; }
.dx-pdf .dx-pdfp .pd-doc h3 { font-size: 15px; }
#hb-print-root { display: none; }
@media print {
  body.hb-printing > :not(#hb-print-root) { display: none !important; }
  #hb-print-root { display: block !important; position: static; background: #fff; color: #000; padding: 0; }
  #hb-print-root .pd-doc { color: #000; font-size: 13pt; }
  #hb-print-root .pd-doc .pd-t { font-size: 22pt; }
  #hb-print-root .pd-doc h2 { font-size: 16pt; }
  #hb-print-root .pd-doc h3 { font-size: 14pt; }
}

/* ── mobile: sidebar becomes an overlay drawer from the right edge ── */
[data-dev="mobile"] .dx-split .dside { position: absolute; inset-block: 0; inset-inline-start: 0; width: min(84%, 300px) !important; transform: translateX(105%); box-shadow: var(--shadow-pop); border-inline-end: 0; border-inline-start: 1px solid var(--border); }
[data-dev="mobile"] .dx-split.side-on .dside { transform: none; }
[data-dev="mobile"] .dx-split .dscrim { display: none; }
[data-dev="mobile"] .dx-split.side-on .dscrim { display: block; position: absolute; inset: 0; z-index: 5; background: rgba(0, 0, 0, .28); }
[data-dev="mobile"] .dx-split .dmain { min-width: 0; }
[data-dev="mobile"] .dx-split .dhead { flex-wrap: wrap; row-gap: 6px; }
[data-dev="mobile"] .dx-split .dhead .dsp { display: none; }
[data-dev="mobile"] .dx-split .dhead .bc2 { flex: 1 1 120px; }
[data-dev="mobile"] .dx-split .dr .dm { opacity: 1; }
[data-dev="mobile"] .dx-pdf .dx-pdfp { padding: 16px 14px; }