/* ==========================================================================
   Montiliya admin site — the dashboard (admin/dash.js): tabs, KPI tiles, charts, tables, a person's detail; and the new parts of the templates screen (admin/templates.js): the create
   dialog, category and tags, the Master Creative Prompt editor with its history, publication. Same tokens as the app; the accent marks the active tab and the brand series.
   ========================================================================== */

.admin-view:has(.dash) { padding: 0; background: var(--glow), var(--panel); }
.dash { width: 100%; max-width: 1240px; margin-inline: auto; padding: var(--s6) var(--s8) var(--s16); display: flex; flex-direction: column; gap: var(--s6); }
.dash-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: var(--s4); }
.dash-eyebrow { display: inline-flex; align-items: center; gap: var(--s1); margin: 0 0 var(--s1); color: var(--accent); font-size: var(--fs-xs); font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; }
:lang(ar) .dash-eyebrow { text-transform: none; }
.dash-eyebrow .icon { width: 14px; height: 14px; }
.dash-head h1 { margin: 0; font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.4rem); font-weight: 700; letter-spacing: -0.035em; }
.dash-head h1:focus { outline: none; }
.dash-tabs { display: flex; gap: 2px; padding: 4px; border-radius: var(--r-full); border: 1px solid var(--line-strong); background: var(--panel-2); max-width: 100%; overflow-x: auto; }
.dash-tab { display: inline-flex; align-items: center; min-height: 38px; padding-inline: var(--s5); border-radius: var(--r-full); color: var(--ink-3); font-weight: 600; white-space: nowrap; border: 1px solid transparent; }
.dash-tab:hover { color: var(--ink); }
.dash-tab[aria-selected='true'] { color: var(--ink); background: var(--panel-3); border-color: var(--line-strong); box-shadow: inset 0 -2px 0 var(--accent); }
.dash-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.dash-panel { display: flex; flex-direction: column; gap: var(--s6); min-width: 0; }

/* filters */
.dash-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4); }
.dash-range { display: flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: var(--r-full); border: 1px solid var(--line-strong); background: var(--panel-2); }
.dash-range-b { min-height: 34px; padding-inline: var(--s4); border-radius: var(--r-full); color: var(--ink-3); font-size: var(--fs-sm); font-weight: 600; }
.dash-range-b:hover { color: var(--ink); }
.dash-range-b[aria-pressed='true'] { background: var(--ink); color: var(--on-ink); }
.dash-custom { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s3); }
.dash-custom label { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-xs); color: var(--ink-3); }
.dash-custom input { min-height: 38px; padding-inline: var(--s3); border-radius: var(--r-md); border: 1px solid var(--line-strong); background: var(--panel-2); color: var(--ink); }
.dash-period { margin: 0; color: var(--ink-3); font-size: var(--fs-sm); }

/* tiles */
.dash-overview { display: flex; flex-direction: column; gap: var(--s6); }
.dash-overview[aria-busy='true'] { opacity: 0.6; transition: opacity var(--t-med); }
.dash-sec { display: flex; flex-direction: column; gap: var(--s3); min-width: 0; }
.dash-sec h2 { margin: 0; font-size: var(--fs-lg); font-weight: 650; letter-spacing: -0.01em; }
.dash-sec h3 { margin: var(--s3) 0 0; font-size: var(--fs-md); font-weight: 650; }
.dash-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); gap: var(--s3); }
.dash-grid.tight { grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); }
.dash-tile { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: var(--s4); border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--panel-2); }
.dash-tile.skel { min-height: 96px; animation: dash-pulse 1.4s ease-in-out infinite; }
@keyframes dash-pulse { 50% { opacity: 0.5; } }
.dash-tile-l { color: var(--ink-3); font-size: var(--fs-sm); font-weight: 550; }
.dash-tile-v { font-size: clamp(1.4rem, 1.1rem + 0.8vw, 1.85rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; overflow-wrap: anywhere; }
.dash-tile-s { color: var(--ink-3); font-size: var(--fs-xs); }
.dash-tile.test { border-style: dashed; }
.dash-unavail { display: flex; gap: var(--s3); padding: var(--s5); border-radius: var(--r-lg); border: 1px dashed var(--line-strong); background: var(--panel-2); }
.dash-unavail .icon { color: var(--ink-3); margin-top: 2px; }
.dash-unavail strong { display: block; margin-bottom: var(--s1); }
.dash-unavail p { margin: 0; color: var(--ink-2); font-size: var(--fs-sm); max-width: 70ch; }
.dash-fine { margin: var(--s1) 0 0; color: var(--ink-3); font-size: var(--fs-xs); }
.dash-test { padding: var(--s3) var(--s4); border-radius: var(--r-lg); border: 1px dashed var(--line-strong); }
.dash-test summary { cursor: pointer; font-weight: 600; font-size: var(--fs-sm); }
.dash-test .dash-grid { margin-top: var(--s3); }

/* charts */
.dash-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: var(--s4); }
.dash-chart { display: flex; flex-direction: column; gap: var(--s2); min-width: 0; padding: var(--s5); border-radius: var(--r-xl); border: 1px solid var(--line); background: var(--panel-2); }
.dash-chart h3 { margin: 0; font-size: var(--fs-md); font-weight: 650; }
.dash-chart-d { margin: 0; color: var(--ink-3); font-size: var(--fs-xs); }
.dash-plot { position: relative; min-height: 220px; border-radius: var(--r-md); }
.dash-plot:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.dash-svg { display: block; width: 100%; height: auto; overflow: visible; }
.dash-svg .grid line { stroke: var(--line); stroke-width: 1; }
.dash-svg text { fill: var(--ink-3); font-size: 11px; font-family: var(--font); font-variant-numeric: tabular-nums; }
.dash-svg .bar.s-brand { fill: var(--s-brand); }
.dash-svg .bar.s-ok { fill: var(--s-ok); }
.dash-svg .bar.s-bad { fill: var(--s-bad); }
.dash-svg .ln { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.dash-svg .ln.s-brand { stroke: var(--s-brand); }
.dash-svg .pt.s-brand { fill: var(--s-brand); stroke: var(--panel-2); stroke-width: 2; }
.dash-svg .cross { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 3 3; }
.dash-legend { display: flex; flex-wrap: wrap; gap: var(--s4); margin-bottom: var(--s2); color: var(--ink-2); font-size: var(--fs-xs); }
.dash-legend span, .dash-tip span { display: inline-flex; align-items: center; gap: 6px; }
.dash-legend i, .dash-tip i { width: 10px; height: 10px; border-radius: 3px; }
i.s-brand { background: var(--s-brand); } i.s-ok { background: var(--s-ok); } i.s-bad { background: var(--s-bad); }
.dash-tip { position: absolute; inset-block-start: 28px; inset-inline-start: 0; z-index: 3; display: flex; flex-direction: column; gap: 2px; min-width: 150px; padding: var(--s2) var(--s3); border-radius: var(--r-md);
  border: 1px solid var(--line-strong); background: var(--panel); box-shadow: var(--shadow-pop); font-size: var(--fs-xs); pointer-events: none; transform: translateX(var(--x, 0)); }
[dir='rtl'] .dash-tip { inset-inline-start: auto; left: 0; }
.dash-tip strong { font-size: var(--fs-sm); }
.dash-tip b { margin-inline-start: auto; padding-inline-start: var(--s3); color: var(--ink); }
.dash-table summary { cursor: pointer; color: var(--ink-3); font-size: var(--fs-xs); font-weight: 600; }
.dash-table summary:hover { color: var(--ink); }
.dash-empty { margin: 0; padding: var(--s6) 0; color: var(--ink-3); font-size: var(--fs-sm); text-align: center; }
.dash-hbars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s3); }
.dash-hbars li { display: grid; grid-template-columns: minmax(0, 9rem) 1fr auto; align-items: center; gap: var(--s3); }
.dash-hb-l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-sm); }
.dash-hb-track { height: 10px; border-radius: var(--r-full); background: var(--panel-3); overflow: hidden; }
.dash-hb { display: block; height: 100%; width: calc(var(--w, 0) * 100%); min-width: 4px; border-radius: var(--r-full); background: var(--s-brand); }
.dash-hb-v { font-size: var(--fs-sm); font-weight: 650; }

/* tables */
.dash-table-w { max-width: 100%; overflow-x: auto; border-radius: var(--r-lg); }
.dash-table-w table, .dash-tbl { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.dash-tbl { min-width: 760px; }
.dash-table-w th, .dash-table-w td { padding: var(--s2) var(--s3); text-align: start; border-bottom: 1px solid var(--line); white-space: nowrap; }
.dash-table-w thead th { color: var(--ink-3); font-weight: 600; font-size: var(--fs-xs); position: sticky; top: 0; background: var(--panel-2); }
.dash-table-w td.num { text-align: end; }
.dash-tbl tbody tr[data-user] { cursor: pointer; }
.dash-tbl tbody tr[data-user]:hover { background: var(--hover); }
.dash-tbl tbody th a { font-weight: 600; }
.dash-tbl tbody th a:hover { text-decoration: underline; }
.dash-tbl tr.test td { color: var(--ink-3); }
.dash-tbl td.neg { color: var(--ink-2); } .dash-tbl td.pos { color: var(--ink); }
.dash-st { display: inline-flex; align-items: center; padding: 1px var(--s2); border-radius: var(--r-full); font-size: var(--fs-xs); font-weight: 600; background: var(--panel-3); color: var(--ink-2); }
.dash-st.st-disabled, .dash-st.st-failed, .dash-st.st-interrupted { color: var(--danger); background: var(--danger-bg); }
.dash-st.st-complete, .dash-st.st-active { color: var(--ink); }
.dash-chip { display: inline-flex; padding: 0 var(--s2); border-radius: var(--r-full); border: 1px solid var(--accent-line); color: var(--accent); font-size: 11px; font-weight: 650; }
.dash-chip.test { border-color: var(--line-strong); color: var(--ink-3); }
.dash-search { display: flex; align-items: center; gap: var(--s2); flex: 1 1 320px; max-width: 420px; min-height: 42px; padding-inline: var(--s4); border-radius: var(--r-full); border: 1px solid var(--line-strong); background: var(--panel-2); color: var(--ink-3); }
.dash-search:focus-within { border-color: var(--accent); }
.dash-search input { flex: 1; min-width: 0; border: 0; background: none; outline: none; color: var(--ink); }
.dash-count { margin: 0; color: var(--ink-3); font-size: var(--fs-sm); }
.dash-pager { display: flex; align-items: center; justify-content: center; gap: var(--s4); padding-top: var(--s3); font-size: var(--fs-sm); }
.dash-pager .btn { min-height: 36px; }
.dash-pager .btn[disabled] { opacity: 0.45; cursor: default; }
.dash-skel-rows { display: flex; flex-direction: column; gap: var(--s2); }
.dash-skel-rows span { height: 40px; border-radius: var(--r-md); background: var(--panel-2); animation: dash-pulse 1.4s ease-in-out infinite; }
.dash-state { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s3); padding: var(--s5); border-radius: var(--r-lg); border: 1px solid var(--line-strong); background: var(--panel-2); }
.dash-state p { margin: 0; }

/* a person */
.dash-back { display: inline-flex; align-items: center; gap: var(--s2); align-self: flex-start; color: var(--ink-3); font-weight: 600; font-size: var(--fs-sm); }
.dash-back:hover { color: var(--ink); }
.dash-back .back-ic { transform: scaleX(-1); }
[dir='rtl'] .dash-back .back-ic { transform: none; }
.dash-person { display: flex; align-items: center; gap: var(--s4); }
.dash-person h2 { margin: 0; font-size: var(--fs-h2); font-weight: 700; letter-spacing: -0.02em; }
.dash-person h2:focus { outline: none; }
.dash-person p { margin: 0; color: var(--ink-3); font-size: var(--fs-sm); }
.dash-avatar { display: grid; place-items: center; width: 52px; height: 52px; border-radius: var(--r-full); background: var(--accent-soft); color: var(--accent); font-size: var(--fs-xl); font-weight: 700; }
.dash-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: var(--s4); }
.dash-card { display: flex; flex-direction: column; gap: var(--s3); min-width: 0; padding: var(--s5); border-radius: var(--r-xl); border: 1px solid var(--line); background: var(--panel-2); }
.dash-card h3 { margin: 0; font-size: var(--fs-md); font-weight: 650; }
.dash-card .dash-tile { background: var(--panel); }
.dash-dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s2) var(--s4); margin: 0; font-size: var(--fs-sm); }
.dash-dl dt { color: var(--ink-3); }
.dash-dl dd { margin: 0; overflow-wrap: anywhere; }
.dash-brand { display: inline-flex; align-items: center; gap: var(--s2); }
.dash-swatch { width: 14px; height: 14px; border-radius: var(--r-full); background: var(--c, var(--panel-3)); box-shadow: inset 0 0 0 1px rgba(127, 127, 127, 0.5); }
.dash-vids { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: var(--s3); }
.dash-vid { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--s3); padding: var(--s3); border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--panel-2); }
.dash-vthumb { position: relative; display: grid; place-items: center; width: 96px; aspect-ratio: 9 / 16; border-radius: var(--r-md); overflow: hidden; background: var(--panel-3); color: var(--ink-3); }
.dash-vthumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dash-vthumb[disabled] { cursor: default; }
.dash-play { position: absolute; display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--r-full); background: rgba(0, 0, 0, 0.55); color: #fff; }
.dash-play .icon { width: 16px; height: 16px; fill: currentColor; }
.dash-vmeta { display: flex; flex-direction: column; gap: 3px; min-width: 0; font-size: var(--fs-xs); color: var(--ink-3); }
.dash-vmeta strong { color: var(--ink); font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-err { color: var(--danger); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.dash-player { width: min(560px, calc(100vw - 32px)); padding: 0; }
.dash-player-h { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s3) var(--s4); }
.dash-player video { display: block; width: 100%; max-height: calc(100dvh - 120px); background: #000; }

/* the templates tab hosts the templates screen (admin/templates.js) inside the dashboard's own scroll */
.dash-tpl.adm-host { padding: 0; overflow: visible; }
.dash-tpl .adm { max-width: none; }

/* ---- the templates screen: new parts ---- */
.adm-head-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--s3); }
.adm-head-row h1 { margin: 0; }
.adm-tools { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s4); }
.adm-add { background: var(--accent); color: var(--accent-ink); }
.adm-arch { display: inline-flex; align-items: center; gap: var(--s2); color: var(--ink-3); font-size: var(--fs-sm); cursor: pointer; }
.adm-arch input, .adm-check input { width: 18px; height: 18px; accent-color: var(--accent); }
.adm-check { display: inline-flex; align-items: center; gap: var(--s2); color: var(--ink-2); font-size: var(--fs-sm); cursor: pointer; }
.adm-pub, .adm-cat { display: inline-flex; padding: 2px var(--s2); border-radius: var(--r-full); font-size: var(--fs-xs); font-weight: 650; border: 1px solid var(--line-strong); color: var(--ink-2); }
.adm-pub[data-pub='published'] { border-color: var(--accent-line); color: var(--accent); background: var(--accent-soft); }
.adm-pub[data-pub='archived'] { color: var(--ink-3); border-style: dashed; }
.adm-card[data-pub='archived'] { opacity: 0.7; }
.adm-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: var(--s3); }
.adm-form select, .adm-create select { min-height: 42px; padding-inline: var(--s3); border-radius: var(--r-md); border: 1px solid var(--line-strong); background: var(--panel-2); color: var(--ink); }
.adm-prompt, .adm-publication { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s4); border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--panel); }
.adm-prompt > summary { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s2); cursor: pointer; font-weight: 650; }
.adm-psum { color: var(--ink-3); font-size: var(--fs-xs); font-weight: 500; }
.adm-prompt[open] > summary { margin-bottom: var(--s2); }
.adm-prompt .field, .adm-create .field { display: flex; flex-direction: column; gap: var(--s1); }
.adm-prompt-ta { width: 100%; min-height: 260px; padding: var(--s3); border-radius: var(--r-md); border: 1px solid var(--line-strong); background: var(--panel-2); color: var(--ink);
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 12.5px; line-height: 1.55; resize: vertical; tab-size: 2; }
.adm-prompt-ta:focus { outline: none; border-color: var(--accent); }
.adm-count { align-self: flex-end; color: var(--ink-3); font-size: var(--fs-xs); }
.adm-count[data-over='true'] { color: var(--danger); font-weight: 650; }
.adm-prompt input[type='text'] { min-height: 40px; padding-inline: var(--s3); border-radius: var(--r-md); border: 1px solid var(--line-strong); background: var(--panel-2); color: var(--ink); }
.adm-hist { margin: var(--s2) 0 0; padding-inline-start: var(--s5); display: flex; flex-direction: column; gap: var(--s2); font-size: var(--fs-sm); }
.adm-hist li { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s1) var(--s3); }
.adm-hist-meta { color: var(--ink-3); font-size: var(--fs-xs); }
.adm-pview { max-height: 360px; overflow: auto; margin: 0; padding: var(--s3); border-radius: var(--r-md); border: 1px solid var(--line); background: var(--panel-2); white-space: pre-wrap; font-size: 12px; line-height: 1.5; }
.adm-publication h3 { margin: 0; font-size: var(--fs-md); }
.adm-pub-state { margin: 0; color: var(--ink-2); font-size: var(--fs-sm); }
.adm-why { margin: 0; padding-inline-start: var(--s5); color: var(--ink-2); font-size: var(--fs-sm); }
.adm-dlg { width: min(720px, calc(100vw - 32px)); }
.adm-create { display: flex; flex-direction: column; gap: var(--s4); padding: var(--s6); }
.adm-create h2 { margin: 0; font-size: var(--fs-xl); }
.adm-create input[type='text'], .adm-create textarea:not(.adm-prompt-ta) { width: 100%; min-height: 42px; padding: var(--s2) var(--s3); border-radius: var(--r-md); border: 1px solid var(--line-strong); background: var(--panel-2); color: var(--ink); }
.adm-create .adm-prompt-ta { min-height: 200px; }

@media (max-width: 900px) {
  .dash { padding: var(--s4) var(--s4) var(--s12); }
  .dash-head { align-items: flex-start; }
  .dash-hbars li { grid-template-columns: minmax(0, 6rem) 1fr auto; }
}
@media (prefers-reduced-motion: reduce) { .dash-tile.skel, .dash-skel-rows span { animation: none; } }