/* Admin only. Tokens and primitives come from theme.css; the page shell (header, sky, glass panel, footer,
   .sr-only, [hidden]) comes from shell.css. Same look as the public site. */
.shell { grid-template-columns: minmax(0, 1fr); } /* wide tables scroll inside their region instead of stretching the page */
.tools { display: flex; gap: 8px; }
.stage { display: block; padding-block: 8px clamp(32px, 6vh, 72px); }
.stage h1 { margin: 0 0 16px; font-size: 26px; font-weight: 600; line-height: 1.4; }
.narrow { max-width: 420px; margin: 6vh auto; }
.small { font-size: 13px; }
.clip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Tabs and the refresh row. */
.bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-block-end: 16px; }
.tabs { display: flex; gap: 4px; margin-inline-end: auto; min-width: 0; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; } /* six tabs scroll inside their own row on phones, never the page */
.tab { flex: none; min-height: 44px; padding: 0 16px; font: inherit; white-space: nowrap; color: var(--muted); background: transparent; border: 0; border-bottom: 2px solid transparent; cursor: pointer; }
.tab:hover { color: var(--text); }
.tab[aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.tab:focus-visible, [role="tabpanel"]:focus-visible, .tablewrap:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.badge { border: 1px solid var(--border); border-radius: 999px; padding: 4px 14px; color: var(--accent); }

/* Messages and subscribers (unchanged behaviour, glass look). */
.sub { margin-block: 12px; background: rgba(8,12,32,.62); }
.sub.unread { border-inline-start: 3px solid var(--accent); }
.sub-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.body { white-space: pre-wrap; overflow-wrap: anywhere; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; }
.counts { display: flex; flex-wrap: wrap; gap: 8px; margin-block: 16px; }
.counts .badge { display: inline-flex; gap: 8px; }
.tablewrap { position: relative; overflow-x: auto; } /* positioned so the hidden caption and header cells stay clipped inside the scroll region */
.subs, .dtable { width: 100%; border-collapse: collapse; }
.subs { min-width: 720px; }
.dtable { min-width: 460px; }
.subs th, .subs td, .dtable th, .dtable td { padding: 10px 12px; text-align: start; border-bottom: 1px solid var(--border); vertical-align: middle; }
.subs th, .dtable th { color: var(--muted); font-weight: 400; white-space: nowrap; }
.subs td.when { white-space: nowrap; }
.subs td.email { min-width: 12em; overflow-wrap: anywhere; }
#subList .tablewrap, #mailList .tablewrap { border: 1px solid rgba(234,241,255,.1); border-radius: 16px; background: rgba(8,12,32,.62); backdrop-filter: blur(18px) saturate(1.15); }
.st-confirmed { color: var(--ok); }
.st-unsubscribed { color: var(--muted); }
.subs td:first-child { min-width: 9em; }
.use { min-width: 11em; }
.purpose { min-width: 10em; }
#mailList .subs th, #mailList .subs td { padding-inline: 8px; }
#mailList .subs td.email { font-size: .85em; }

/* Dashboard. */
.toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; margin-block-end: 16px; }
.range { display: flex; flex-wrap: wrap; gap: 8px; }
.range .btn { padding-inline: 18px; }
.range .btn[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.dgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 16px; margin-block-end: 16px; align-items: start; }
.dgrid > .wide { grid-column: 1 / -1; }
.dcard { padding: clamp(18px, 2vw, 24px); min-width: 0; }
.dcard h2 { margin: 0 0 12px; font-size: 18px; font-weight: 600; line-height: 1.4; }
.dcard h3 { margin: 0 0 8px; font-size: 15px; font-weight: 600; color: var(--soft); }
.dcard > .btn { margin-block-start: 12px; }
.dcard .msg { min-height: 0; margin-block: 8px 0; }
.note { margin: 0; padding: 12px 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--soft); }
.note.warn { border-color: var(--danger); color: var(--text); margin-block: 8px; }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 12px; }
.kpi { padding: 16px; border: 1px solid rgba(234,241,255,.1); border-radius: 14px; background: rgba(8,12,32,.62); backdrop-filter: blur(18px) saturate(1.15); min-width: 0; }
.kpi p { margin: 0; }
.kpi-label { font-size: 14px; color: var(--soft); }
.kpi-value { font-size: clamp(26px, 3vw, 34px); font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.kpi-delta { font-size: 13px; }
.kpi-delta.up { color: var(--ok); }
.kpi-delta.down { color: var(--danger); }
.kpi-note { font-size: 13px; }

/* Chart: bars for visits, a line for visitors. Always left to right (time), whatever the page direction. */
.chart-svg { display: block; width: 100%; height: clamp(140px, 24vw, 220px); }
.chart-svg .grid { stroke: var(--border); stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart-svg .bar-views { fill: var(--accent2); }
.chart-svg .line-visitors { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.axis { display: flex; justify-content: space-between; margin: 6px 0 0; font-size: 12px; }
.legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; margin: 0 0 8px; font-size: 13px; }
.key::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-inline-end: 6px; border-radius: 3px; vertical-align: -1px; }
.key.views::before { background: var(--accent2); }
.key.visitors::before { background: var(--accent); }
.key.hist::before { background: var(--accent); }
.key.band::before { background: var(--accent); opacity: .3; }
.key.proj::before, .key.slo::before { width: 16px; height: 0; border-radius: 0; background: none; vertical-align: 4px; }
.key.proj::before { border-top: 2px dashed var(--accent); }
.key.slo::before { border-top: 2px dashed var(--danger); }

/* Performance and Growth: lines, band, target line, SLO badges, capacity badge. Same tokens as the dashboard. */
.chart-svg.mini { height: clamp(90px, 14vw, 120px); }
.chart-svg .ln { fill: none; stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.chart-svg .ln.solid { stroke: var(--accent); }
.chart-svg .ln.dash { stroke-dasharray: 6 4; }
.chart-svg .ln.slo { stroke: var(--danger); stroke-width: 1.5; stroke-dasharray: 6 4; }
.chart-svg .band { fill: var(--accent); fill-opacity: .18; stroke: none; }
.chart-svg .split { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 2 4; vector-effect: non-scaling-stroke; }
.sloflag { display: flex; align-items: center; gap: 4px; margin: 4px 0 0; font-size: 13px; font-weight: 600; }
.sloflag.within, .st-within { color: var(--ok); }
.sloflag.over, .st-over { color: var(--danger); font-weight: 600; }
.dtable.dwide { min-width: 860px; }
#perfBody .kpi-value { font-family: var(--sans); } /* "n/a" in Arabic must not fall back to letter spaced mono */
.dtable td.code { min-width: 13em; }
.dtable .ltr { unicode-bidi: isolate; overflow-wrap: anywhere; }
.dtable td.when { white-space: nowrap; }
.dtable tr.breach td { background: var(--surface); }
.dtable tr.breach td:first-child { border-inline-start: 3px solid var(--danger); }
.cmd { margin: 8px 0; padding: 12px 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; user-select: all; }
.rec { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 8px; padding: 6px 18px; border: 1px solid currentColor; border-radius: 999px; font-weight: 600; }
.rec.ok { color: var(--ok); }
.rec.watch { color: var(--text); border-style: dashed; }
.rec.act { color: var(--danger); border-width: 2px; }
.reasons { margin: 0 0 8px; padding-inline-start: 20px; }
.dcard .kpis { margin-block-end: 12px; }
.dcard .two { margin-block-end: 12px; }

/* Share and ranking bars: <progress>, decorative (the numbers beside them are the data). */
.share { display: block; width: 100%; height: 8px; border: 0; border-radius: 999px; background: var(--border); appearance: none; -webkit-appearance: none; overflow: hidden; }
.share::-webkit-progress-bar { background: var(--border); }
.share::-webkit-progress-value { background: var(--accent); border-radius: 999px; }
.share::-moz-progress-bar { background: var(--accent); border-radius: 999px; }
.sharecell { min-width: 150px; }
.sharecell .share { display: inline-block; width: 90px; vertical-align: middle; margin-inline-end: 10px; }
.bars, .latest { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.latest { margin-block-end: 4px; }
.bar-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; min-width: 0; }
.bar-name { overflow-wrap: anywhere; }
.bars .share { margin-block-start: 4px; }
.latest li { min-width: 0; padding-block-end: 10px; border-bottom: 1px solid var(--border); }
.latest p { margin: 0; }
.two { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 20px 32px; }

.sys { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 16px; margin: 0; }
.sys dt, .sys dd { margin: 0; }
.sys dd { text-align: end; overflow-wrap: anywhere; }
.sys .ok { color: var(--ok); }
.sys .bad { color: var(--danger); }
.attrib { margin: 8px 0 0; }
.attrib a { color: var(--soft); text-underline-offset: 4px; }
.attrib a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

@media (max-width: 560px) {
  .tab { padding: 0 10px; font-size: 15px; }
  .tabs { flex: 1 1 100%; margin-inline-end: 0; }
  .range { width: 100%; }
  .range .btn { flex: 1 1 0; min-width: 0; padding-inline: 6px; font-size: 14px; line-height: 1.3; }
  .actions .btn { flex: 1 1 100%; }
  #perfBody .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #perfBody .kpi-value { font-size: 24px; }
}