/* =========================================================
   mehdiaskari.ir — shared UI components (vanilla, theme-aware)
   Matches the site's design language: glass, teal/amber,
   dark/light via html[data-theme]. RTL-safe (logical props).
   ========================================================= */

/* ---------- Badge ---------- */
.badge{
  display:inline-flex; align-items:center; gap:6px;
  font-family:'IBM Plex Mono', monospace; font-size:0.7rem; font-weight:600; line-height:1;
  padding:4px 10px; border-radius:999px;
  color:var(--text); background:var(--glass-2);
  border:1px solid var(--border-soft);
  backdrop-filter:blur(10px);
}
.badge.teal{
  color:var(--teal);
  border-color:color-mix(in srgb, var(--teal) 42%, transparent);
  background:var(--teal-dim);
}
.badge.amber{
  color:var(--amber);
  border-color:color-mix(in srgb, var(--amber) 42%, transparent);
  background:color-mix(in srgb, var(--amber) 12%, transparent);
}

/* ---------- Tabs ---------- */
.tabs{
  border:1px solid var(--border-soft); border-radius:16px; overflow:hidden;
  background:var(--glass); backdrop-filter:blur(18px); margin:16px 0 20px;
}
.tab-list{
  display:flex; gap:4px; padding:6px;
  border-bottom:1px solid var(--border-soft);
  background:color-mix(in srgb, var(--glass-2) 60%, transparent);
}
.tab{
  flex:1; appearance:none; cursor:pointer; border:0; background:transparent;
  color:var(--text-muted); font:inherit; font-weight:600; font-size:0.9rem;
  padding:9px 12px; border-radius:10px; transition:color .2s ease, background .2s ease;
}
.tab:hover{ color:var(--text); }
.tab[aria-selected="true"]{
  color:#08090D; background:linear-gradient(135deg, var(--teal), var(--teal-2));
  box-shadow:0 8px 20px -10px rgba(47,224,196,.6);
}
html[data-theme="light"] .tab[aria-selected="true"]{ color:#08090D; }
.tab-panel{ padding:16px 16px 4px; display:none; }
.tab-panel.is-active{ display:block; animation:tabIn .25s ease; }
@keyframes tabIn{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;} }

/* ---------- Accordion ---------- */
.accordion{
  border:1px solid var(--border-soft); border-radius:16px; overflow:hidden;
  background:var(--glass); backdrop-filter:blur(16px); margin:16px 0 20px;
}
.acc-item + .acc-item{ border-top:1px solid var(--border-soft); }
.acc-head{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px;
  appearance:none; border:0; background:transparent; color:var(--text);
  font:inherit; font-weight:700; font-size:0.98rem; text-align:start;
  padding:15px 18px; cursor:pointer; transition:color .2s ease;
}
.acc-head:hover{ color:var(--teal); }
.acc-head .chev{ flex:none; color:var(--text-muted); transition:transform .25s ease; }
.acc-item.is-open .acc-head{ color:var(--teal); }
.acc-item.is-open .acc-head .chev{ transform:rotate(180deg); }
.acc-body{ max-height:0; overflow:hidden; transition:max-height .3s ease; }
.acc-body > div{ padding:0 18px 16px; color:var(--text-muted); }

/* ---------- Tooltip (CSS-only, via data-tip) ---------- */
[data-tip]{ position:relative; cursor:help; border-bottom:1px dotted var(--text-dim); }
[data-tip]:hover::after, [data-tip]:focus-visible::after{
  content:attr(data-tip);
  position:absolute; bottom:calc(100% + 6px); inset-inline-start:0;
  width:max-content; max-width:260px; white-space:normal;
  background:#08090D; color:#F3F5F7; border:1px solid var(--border);
  padding:8px 11px; border-radius:8px; font-size:.8rem; font-weight:500; line-height:1.5;
  z-index:60; box-shadow:var(--card-shadow); pointer-events:none;
}
html[data-theme="light"] [data-tip]:hover::after,
html[data-theme="light"] [data-tip]:focus-visible::after{ background:#10151C; color:#F3F5F7; }

/* ---------- Dialog / Modal ---------- */
.dialog-backdrop{
  position:fixed; inset:0; z-index:100;
  background:rgba(4,6,10,.6); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center; padding:20px;
  opacity:0; pointer-events:none; transition:opacity .2s ease;
}
.dialog-backdrop.is-open{ opacity:1; pointer-events:auto; }
.dialog-card{
  position:relative; width:min(640px, 100%); max-height:86vh; overflow:auto;
  background:var(--glass-2); border:1px solid var(--border); border-radius:18px;
  box-shadow:var(--card-shadow); padding:24px;
  transform:translateY(12px) scale(.98); transition:transform .2s ease;
}
.dialog-backdrop.is-open .dialog-card{ transform:none; }
.dialog-card h3{ margin:0 0 12px; font-size:1.05rem; }
.dialog-card .prose-compact{ color:var(--text-muted); font-size:.92rem; }
.dialog-card .prose-compact pre{ margin:10px 0; }
.dialog-close{
  position:absolute; top:12px; inset-inline-end:12px;
  width:34px; height:34px; display:grid; place-items:center;
  border-radius:10px; border:1px solid var(--border-soft); background:var(--glass);
  color:var(--text-muted); cursor:pointer; transition:.2s;
}
.dialog-close:hover{ color:var(--text); border-color:var(--teal); }
.dialog-close svg{ width:16px; height:16px; fill:currentColor; }

/* =========================================================
   Modern enhancements: copy/highlight, reading bar, TOC,
   stat counters, blog search, cursor glow
   ========================================================= */

/* ---------- Code copy button + token highlight ---------- */
.prose pre{ position:relative; }
.copy-btn{
  position:absolute; top:8px; inset-inline-end:10px; z-index:3;
  display:inline-flex; align-items:center; gap:5px;
  font-family:'IBM Plex Mono', monospace; font-size:.66rem; font-weight:600;
  color:var(--text-muted); background:var(--glass-2);
  border:1px solid var(--border-soft); border-radius:8px; padding:4px 8px;
  cursor:pointer; opacity:0; transition:opacity .2s ease, color .2s ease, border-color .2s ease;
}
.prose pre:hover .copy-btn, .copy-btn:focus-visible{ opacity:1; }
.copy-btn:hover{ color:var(--teal); border-color:var(--teal); }
.copy-btn.copied{ color:var(--teal); border-color:var(--teal); }
.copy-btn svg{ width:13px; height:13px; fill:currentColor; }
.tok-num{ color:var(--teal-2); }
.tok-fn{ color:var(--teal); }
.tok-str{ color:var(--amber); }
.tok-com{ color:var(--text-dim); font-style:italic; }
.tok-op{ color:var(--text-muted); }

/* modern code-block: larger mono, generous line-height, line-number gutter */
.prose pre{
  font-family:'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  font-size:.82rem; line-height:1.75; letter-spacing:.01em;
  font-feature-settings:'tnum' 1, 'liga' 1;
  counter-reset:cl;
  padding:48px 18px 18px;
}
.prose pre .cl{
  display:block; position:relative; counter-increment:cl;
  padding-inline-start:2.8em; min-height:1.75em;
  border-radius:6px; transition:background .15s ease;
}
.prose pre .cl:hover{ background:rgba(127,127,127,.08); }
.prose pre .cl::before{
  content:counter(cl);
  position:absolute; inset-inline-start:0; top:0; width:1.9em; text-align:right;
  color:var(--text-dim); opacity:.42; user-select:none;
  font-variant-numeric:tabular-nums; font-size:.82em;
}
.prose pre .cl:only-child{ padding-inline-start:0; }
.prose pre .cl:only-child::before{ content:none; }
.prose pre .cl .tok-com{ opacity:.8; }

/* ---------- Reading progress bar ---------- */
.reading-bar{
  position:fixed; top:0; inset-inline-start:0; height:3px; width:0;
  background:linear-gradient(90deg, var(--teal), var(--teal-2), var(--amber));
  z-index:95; transition:width .08s linear; box-shadow:0 0 10px var(--teal-dim);
}

/* ---------- Table of contents ---------- */
.toc{
  border:1px solid var(--border-soft); border-radius:14px; background:var(--glass);
  backdrop-filter:blur(16px); padding:14px 16px; margin:0 0 22px;
}
.toc-title{ font-size:.8rem; font-weight:700; color:var(--text-dim); margin-bottom:8px; letter-spacing:.02em; }
.toc ol{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
.toc a{
  display:block; padding:5px 10px; border-radius:8px; color:var(--text-muted);
  font-size:.86rem; border-inline-start:2px solid transparent; transition:.18s;
  text-decoration:none; border-bottom:none;
}
.toc a:hover{ color:var(--text); background:var(--glass-2); }
.toc a.active{ color:var(--teal); border-inline-start-color:var(--teal); background:var(--teal-dim); }
.toc li.lvl-3 a{ padding-inline-start:22px; font-size:.82rem; }
.reading-time{ font-size:.78rem; color:var(--text-dim); }

/* ---------- Stat counters ---------- */
.stats-band{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; margin:8px 0 4px;
}
.stat{
  text-align:center; padding:20px 12px; border-radius:16px;
  border:1px solid var(--border-soft); background:var(--glass); backdrop-filter:blur(16px);
  box-shadow:var(--card-shadow);
}
.stat-num{
  font-size:2.1rem; font-weight:800; line-height:1;
  background:linear-gradient(135deg, var(--teal), var(--teal-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.stat-label{ margin-top:8px; font-size:.82rem; color:var(--text-muted); }
@media (max-width:720px){ .stats-band{ grid-template-columns:repeat(2, 1fr); } }

/* ---------- Blog search / filter ---------- */
.blog-search{
  width:100%; font:inherit; font-size:.95rem; color:var(--text);
  background:var(--glass-2); border:1px solid var(--border-soft); border-radius:12px;
  padding:12px 16px; margin-bottom:14px;
}
.blog-search:focus-visible{ outline:2px solid var(--teal); outline-offset:2px; }
.tag-filter{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; }
.chip{
  appearance:none; cursor:pointer; font:inherit; font-size:.8rem; font-weight:600;
  color:var(--text-muted); background:var(--glass-2);
  border:1px solid var(--border-soft); border-radius:999px; padding:6px 14px; transition:.18s;
}
.chip:hover{ color:var(--text); }
.chip.active{ color:#08090D; background:linear-gradient(135deg, var(--teal), var(--teal-2)); border-color:transparent; }
.blog-empty{ color:var(--text-dim); padding:24px; text-align:center; }
mark.hl{ background:var(--teal-dim); color:var(--text); border-radius:3px; padding:0 2px; }

/* ---------- Cursor glow ---------- */
.cursor-glow{
  position:fixed; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,30%),
            color-mix(in srgb, var(--teal) 12%, transparent), transparent 60%);
  opacity:0; transition:opacity .4s ease;
}
.cursor-glow.on{ opacity:1; }

/* ---------- COMMAND PALETTE (Cmd/Ctrl+K) ---------- */
.cmdk-hint{
  display:flex; align-items:center; gap:5px;
  font-family:'IBM Plex Mono', monospace; font-size:0.7rem; color:var(--text-dim);
  border:1px solid var(--border); background:var(--glass-2);
  padding:5px 9px; border-radius:8px; cursor:pointer; flex-shrink:0;
  transition:border-color .2s ease, color .2s ease;
}
.cmdk-hint:hover, .cmdk-hint:focus-visible{border-color:var(--teal); color:var(--teal);}
.cmdk-hint kbd{font-family:inherit;}
@media (max-width:700px){ .cmdk-hint{display:none;} }

.cmdk-overlay{
  position:fixed; inset:0; z-index:300;
  background:rgba(5,6,9,0.55); backdrop-filter:blur(6px);
  display:flex; align-items:flex-start; justify-content:center;
  padding:12vh 20px 20px;
  opacity:0; pointer-events:none; transition:opacity .2s ease;
}
.cmdk-overlay.open{opacity:1; pointer-events:auto;}
.cmdk-modal{
  width:min(560px, 100%); max-height:70vh; display:flex; flex-direction:column;
  background:var(--glass-2); border:1px solid var(--border);
  backdrop-filter:blur(28px) saturate(180%);
  border-radius:18px; overflow:hidden;
  box-shadow:0 30px 80px -20px rgba(0,0,0,0.55);
  transform:translateY(-10px) scale(0.98); transition:transform .2s cubic-bezier(.2,.8,.2,1);
}
.cmdk-overlay.open .cmdk-modal{transform:translateY(0) scale(1);}
.cmdk-input-row{display:flex; align-items:center; gap:10px; padding:14px 18px; border-bottom:1px solid var(--border-soft);}
.cmdk-input-row svg{width:16px; height:16px; fill:var(--text-dim); flex-shrink:0;}
.cmdk-input{
  flex:1; background:none; border:none; outline:none; color:var(--text);
  font-family:'Vazirmatn', sans-serif; font-size:0.95rem;
}
.cmdk-input::placeholder{color:var(--text-dim);}
.cmdk-esc{font-family:'IBM Plex Mono', monospace; font-size:0.68rem; color:var(--text-dim); border:1px solid var(--border-soft); border-radius:6px; padding:2px 7px; flex-shrink:0;}
.cmdk-list{overflow-y:auto; padding:8px;}
.cmdk-empty{padding:24px; text-align:center; color:var(--text-dim); font-size:0.85rem;}
.cmdk-item{
  display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:10px;
  cursor:pointer; font-size:0.88rem; color:var(--text-muted);
}
.cmdk-item .cmdk-ic{
  width:30px; height:30px; border-radius:9px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--glass); border:1px solid var(--border); font-size:0.85rem;
}
.cmdk-item .cmdk-label{flex:1; color:var(--text);}
.cmdk-item .cmdk-group{font-size:0.68rem; color:var(--text-dim); font-family:'IBM Plex Mono', monospace;}
.cmdk-item.active{background:var(--teal-dim);}
.cmdk-item.active .cmdk-ic{border-color:var(--teal); color:var(--teal);}
@media (hover:none){ .cursor-glow{ display:none; } }
@media (prefers-reduced-motion: reduce){ .cursor-glow{ display:none; } }