/* MisahaTech — صناديق الأكواد (فوق Prism)
   نفس لغة تصميم جداول القالب (.mt-table-card): بطاقة بإطار وظل القالب، رأس فاتح فيه اسم اللغة وزر النسخ،
   وجسم داكن دائماً (أريح لقراءة الكود). فالوضع الليلي الرأس كياخد نفس ألوان الجداول الليلية. */

/* الحروف العربية داخل الكود (تعليقات/نصوص) كتاخد خط Tajawal بدل خط برمجي كيفرّق الحروف */
@font-face {
  font-family: "MT Code Arabic";
  font-display: swap;
  font-weight: 400 700;
  src: url("../fonts/tajawal-v12-arabic_latin-regular.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}

/* ---------- البطاقة ---------- */
:is(.article-body, .entry-content) div.code-toolbar {
  display: flex;
  flex-direction: column;
  margin: 1.5em 0;
  border: 1px solid var(--clr-border, #e4e8ee);
  border-radius: var(--radius, 12px);
  box-shadow: var(--shadow, 0 2px 12px rgba(0, 0, 0, .06));
  background: var(--clr-white, #fff);
  overflow: hidden;
  direction: rtl;
}

/* ---------- الرأس (نفس رأس الجدول) ---------- */
:is(.article-body, .entry-content) div.code-toolbar > .toolbar {
  order: -1;
  position: static;
  opacity: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
  padding: 7px 10px 7px 14px;
  border: 0;
  border-bottom: 1px solid var(--clr-border, #e4e8ee);
  border-radius: 0;
  background: var(--clr-light, #f5f7fa);
  font-family: var(--font, Tajawal), sans-serif;
  transition: none;
}
:is(.article-body, .entry-content) div.code-toolbar > .toolbar > .toolbar-item { display: flex; }

/* اسم اللغة */
:is(.article-body, .entry-content) div.code-toolbar > .toolbar > .toolbar-item > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0;
  color: var(--clr-muted, #6b7280);
  font-family: var(--font, Tajawal), sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.6;
  white-space: nowrap;
}
:is(.article-body, .entry-content) div.code-toolbar > .toolbar > .toolbar-item > span::before {
  content: "";
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: rgba(var(--clr-primary-rgb, 0, 221, 162), .14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23007A62' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 9l-3 3 3 3M16 9l3 3-3 3M13.5 6.5l-3 11'/%3E%3C/svg%3E") center / 14px no-repeat;
}

/* زر النسخ (نفس أزرار الجدول) */
:is(.article-body, .entry-content) div.code-toolbar > .toolbar .copy-to-clipboard-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--radius-sm, 8px);
  background: transparent;
  color: var(--clr-muted, #6b7280);
  font-family: var(--font, Tajawal), sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background .2s, color .2s;
}
:is(.article-body, .entry-content) div.code-toolbar > .toolbar .copy-to-clipboard-button:hover {
  color: var(--clr-hover, var(--clr-primary-dk, #007A62));
  background: rgba(var(--clr-hover-rgb, var(--clr-primary-rgb, 0, 221, 162)), .14);
}
:is(.article-body, .entry-content) div.code-toolbar > .toolbar .copy-to-clipboard-button:focus-visible {
  outline: 2px solid var(--clr-primary, #00DDA2);
  outline-offset: 1px;
}
:is(.article-body, .entry-content) div.code-toolbar > .toolbar .copy-to-clipboard-button::before {
  content: "";
  width: 15px;
  height: 15px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='12' height='12' rx='2'/%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='12' height='12' rx='2'/%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E") center / contain no-repeat;
}
:is(.article-body, .entry-content) div.code-toolbar > .toolbar .copy-to-clipboard-button[data-copy-state="copy-success"] {
  color: var(--clr-primary-dk, #007A62);
}
:is(.article-body, .entry-content) div.code-toolbar > .toolbar .copy-to-clipboard-button[data-copy-state="copy-success"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

/* ---------- جسم الكود ---------- */
:is(.article-body, .entry-content) div.code-toolbar > pre,
:is(.article-body, .entry-content) div.code-toolbar > pre[class*="language-"] {
  margin: 0;
  padding: 14px 16px;
  border: 0;
  border-radius: 0;
  background: #1e2433;
  color: #e6e9f0;
  direction: ltr;
  text-align: left;
  overflow: auto;
  max-height: 560px;
  font-size: .9rem;
  line-height: 1.75;
  text-shadow: none;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .22) transparent;
}
:is(.article-body, .entry-content) div.code-toolbar > pre > code {
  background: none;
  color: inherit;
  font-family: "MT Code Arabic", Consolas, "Cascadia Mono", "SF Mono", Menlo, Monaco, "DejaVu Sans Mono", "Liberation Mono", "Courier New", var(--font, Tajawal), monospace;
  font-size: inherit;
  line-height: inherit;
  padding: 0;
  text-shadow: none;
  white-space: pre;
}
:is(.article-body, .entry-content) div.code-toolbar > pre::-webkit-scrollbar { height: 8px; width: 8px; }
:is(.article-body, .entry-content) div.code-toolbar > pre::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .22); border-radius: 8px; }

/* ألوان الكود: ألوان Prism الأصلية (خلفية داكنة دائماً) + لغات CMD/Bash */
.mt-code .token.command { color: #66d9ef; }
.mt-code .token.parameter { color: #a6e22e; }
.mt-code .token.prompt { color: #75809a; user-select: none; }

/* ترقيم الأسطر (إلا زدت class: line-numbers) */
:is(.article-body, .entry-content) div.code-toolbar > pre.line-numbers { padding-left: 3.6em; }
:is(.article-body, .entry-content) div.code-toolbar .line-numbers .line-numbers-rows { border-right-color: rgba(255, 255, 255, .12); }
:is(.article-body, .entry-content) div.code-toolbar .line-numbers-rows > span::before { color: #5d6782; }

/* ---------- الوضع الليلي (نفس ألوان الجداول) ---------- */
html[data-theme="dark"] :is(.article-body, .entry-content) div.code-toolbar {
  background: var(--dm-bg2, #1a1d27);
  border-color: var(--dm-border, #2a2f3d);
  box-shadow: none;
}
html[data-theme="dark"] :is(.article-body, .entry-content) div.code-toolbar > .toolbar {
  background: var(--dm-bg3, #222633);
  border-bottom-color: var(--dm-border, #2a2f3d);
}
html[data-theme="dark"] :is(.article-body, .entry-content) div.code-toolbar > .toolbar > .toolbar-item > span,
html[data-theme="dark"] :is(.article-body, .entry-content) div.code-toolbar > .toolbar .copy-to-clipboard-button { color: var(--dm-muted, #9aa3b5); }
html[data-theme="dark"] :is(.article-body, .entry-content) div.code-toolbar > .toolbar .copy-to-clipboard-button:hover {
  color: var(--clr-hover, var(--clr-primary, #00DDA2));
  background: rgba(var(--clr-hover-rgb, var(--clr-primary-rgb, 0, 221, 162)), .18);
}
html[data-theme="dark"] :is(.article-body, .entry-content) div.code-toolbar > .toolbar .copy-to-clipboard-button[data-copy-state="copy-success"] { color: var(--clr-primary, #00DDA2); }
html[data-theme="dark"] :is(.article-body, .entry-content) div.code-toolbar > .toolbar > .toolbar-item > span::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300DDA2' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 9l-3 3 3 3M16 9l3 3-3 3M13.5 6.5l-3 11'/%3E%3C/svg%3E");
}
html[data-theme="dark"] :is(.article-body, .entry-content) div.code-toolbar > pre { background: #131722; }

/* ---------- الجوال (نفس مقاسات الجدول) ---------- */
@media (max-width: 560px) {
  :is(.article-body, .entry-content) div.code-toolbar > .toolbar { padding: 6px 8px 6px 10px; }
  :is(.article-body, .entry-content) div.code-toolbar > .toolbar > .toolbar-item > span,
  :is(.article-body, .entry-content) div.code-toolbar > .toolbar .copy-to-clipboard-button { font-size: 11.5px; }
  :is(.article-body, .entry-content) div.code-toolbar > pre { font-size: .82rem; padding: 12px; }
}