/* UL PowerPlus additions on top of the Axim stylesheet (globals.css): data-table affordances, list footers, drawers, filters. */

/* Sortable headers: the whole header is the control, the active one is highlighted */
th.is-sorted{color:var(--primary)}
th a{display:inline-flex;align-items:center;gap:4px;text-decoration:none;color:inherit;border-bottom:1px dotted transparent}
th a:hover,th[data-sort]:hover{color:var(--primary);border-bottom-color:var(--primary)}
th[data-sort]{cursor:pointer;user-select:none}
th .sort-mark{font-size:.6rem;color:var(--primary);margin-left:4px}
th.eye-col,td.eye-col{width:44px;padding-right:0}
td.eye-col .button{padding:4px 6px;min-height:28px;color:var(--secondary-text)}
td.eye-col .button:hover{color:var(--primary);background:var(--accent-soft)}
table.compact td,table.compact th{padding-top:9px;padding-bottom:9px}
tfoot td{font-weight:600;background:var(--soft-background);border-top:1px solid var(--border)}
.rate-cell{display:flex;align-items:center;gap:10px;min-width:150px}
.rate-cell .funnel-track{flex:1;margin:0}
.rate-cell strong{min-width:40px;text-align:right;font-variant-numeric:tabular-nums}
.num{font-variant-numeric:tabular-nums}

/* List footer: showing x–y of n · rows per page · previous / next */
.list-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;border-top:1px solid var(--line);padding:11px 20px;font-size:.8125rem;color:var(--secondary-text)}
.list-foot strong{color:var(--strong-text);font-weight:600}
.list-foot label{display:inline-flex;align-items:center;gap:8px}
.list-foot select{width:auto;min-height:32px;padding:4px 28px 4px 10px;font-size:.8125rem;border-radius:7px}
.list-foot .pages{display:inline-flex;align-items:center;gap:6px}
.list-foot .button{min-height:32px;padding:5px 10px;font-size:.8125rem}
.list-foot .button[disabled],.list-foot .button[aria-disabled=true]{opacity:.4;cursor:not-allowed;pointer-events:none}

/* Filter bar: one row. Dates fixed, selects share the rest, search gets the most, actions hug their content. */
.filter-grid{display:grid;grid-template-columns:124px 124px minmax(112px,1fr) minmax(100px,.9fr) minmax(150px,1.5fr) minmax(88px,.8fr) minmax(80px,.7fr) minmax(84px,.8fr) auto;gap:8px 10px;align-items:end;padding:14px 18px 16px}
.filter-grid .field{gap:4px;min-width:0}
.filter-grid .field>span:first-child{font-size:.75rem;letter-spacing:.02em;white-space:nowrap}
.filter-grid input,.filter-grid select{min-height:36px;padding:6px 9px;font-size:.8125rem;border-radius:8px;min-width:0}
.filter-grid select{padding-right:24px;text-overflow:ellipsis}
.filter-grid input[type=date]{padding-right:4px}
.filter-grid .filter-actions{display:flex;gap:4px;align-items:center;white-space:nowrap}
.filter-grid .filter-actions .button{min-height:36px;padding:6px 12px;font-size:.8125rem}
.filter-grid .filter-actions .button.text{padding:6px 8px}
@media (max-width:1240px){.filter-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.filter-grid .filter-actions{grid-column:1/-1;justify-content:flex-start}}

/* Drawer contents */
.drawer-body dl.meta{grid-template-columns:minmax(0,2fr) minmax(0,3fr);font-size:.875rem;column-gap:12px}
.drawer-body dl.meta dt{font-weight:600;color:var(--strong-text);overflow-wrap:anywhere}
.drawer-body dl.meta dd{overflow-wrap:anywhere}
.drawer-body .section-title{font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--secondary-text);font-weight:600;margin:14px 0 6px}

/* Page sections on the dashboard */
.section-lead{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.chip.group-paid{color:var(--ok);background:var(--ok-soft);border-color:var(--ok-line)}
.chip.group-failed{color:var(--danger);background:var(--danger-soft);border-color:var(--danger-line)}
.chip.group-pending{color:var(--primary);background:var(--accent-soft);border-color:var(--accent-line)}
.chip.group-unknown{color:var(--amber);background:var(--amber-soft);border-color:var(--amber-line)}
.chip.group-other{color:var(--secondary-text)}
@media (max-width:900px){.filter-grid .filter-actions{grid-column:1/-1}.list-foot{justify-content:flex-start}}

/* Rows per page at the right of a list header (fragments/parts :: headTools; app.js adds it to data-list tables): the footer's control, repeated */
.panel-head .head-tools{display:inline-flex;align-items:center;gap:8px;flex-shrink:0;align-self:center;font-size:.8125rem;color:var(--secondary-text)}
.panel-head .head-tools label{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.panel-head .head-tools select{width:auto;min-height:32px;padding:4px 28px 4px 10px;font-size:.8125rem;border-radius:7px}

/* Waiting for the server (app.js): the clicked button or link shows a spinner in place of its icon, every other call to action is held until the page answers */
.is-busy{pointer-events:none;cursor:progress}
button.is-busy:disabled,.button.is-busy{opacity:.8}
.is-locked{pointer-events:none}
a.is-locked,[role=menuitem].is-locked{opacity:.55}
body.is-waiting,body.is-waiting *{cursor:progress!important}

/* Dashboard charts (static/charts.js). Status hues validated for colour-vision separation in stack order paid, failed, unknown, pending; other is neutral. */
:root{--chart-paid:#1F6F43;--chart-failed:#B3261E;--chart-unknown:#3b7dd8;--chart-pending:#C85103;--chart-other:#8A837B;--chart-grid:#EFEAE3}
.fill-paid{fill:var(--chart-paid)}.fill-failed{fill:var(--chart-failed)}.fill-unknown{fill:var(--chart-unknown)}.fill-pending{fill:var(--chart-pending)}.fill-other{fill:var(--chart-other)}
.bg-paid{background:var(--chart-paid)}.bg-failed{background:var(--chart-failed)}.bg-unknown{background:var(--chart-unknown)}.bg-pending{background:var(--chart-pending)}.bg-other{background:var(--chart-other)}
.segmented{display:inline-flex;border:1px solid var(--border);border-radius:9px;padding:3px;background:var(--soft-background);gap:2px;flex-shrink:0;align-self:center}
.segmented button{border:0;background:none;border-radius:7px;padding:5px 11px;font-size:.8125rem;font-weight:500;color:var(--secondary-text);cursor:pointer;font-family:inherit}
.segmented button.is-on{background:var(--white);color:var(--strong-text);font-weight:600;box-shadow:0 1px 2px #17151214}
.panel-box[data-view=chart] .view-table,.panel-box[data-view=chart] .head-tools{display:none}
.panel-box[data-view=table] .view-chart{display:none}
.chart-body{padding:16px 22px 20px;display:grid;gap:12px}
.chart-sub{font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--secondary-text);font-weight:600;margin-top:8px}
.chart-legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:.8125rem;color:var(--secondary-text)}
.chart-legend.stack{flex-direction:column;gap:8px}
.chart-legend .item{display:inline-flex;align-items:center;gap:7px;color:inherit;text-decoration:none;border-radius:6px}
.chart-legend a.item:hover{color:var(--primary)}
.chart-legend i{width:10px;height:10px;border-radius:3px;display:inline-block;flex-shrink:0}
.chart-legend b{color:var(--strong-text);font-weight:600;font-variant-numeric:tabular-nums}
.chart-legend small{font-size:.75rem}
.donut-wrap{display:grid;grid-template-columns:190px 1fr;gap:22px;align-items:center}
.donut svg{width:100%;height:auto;display:block;overflow:visible}
.donut path{transition:opacity .12s}
.donut path.is-hot{opacity:.78}
.donut .donut-big{font-size:30px;font-weight:600;fill:var(--strong-text);letter-spacing:-.5px}
.donut .donut-small{font-size:11px;fill:var(--secondary-text);letter-spacing:.06em;text-transform:uppercase}
svg a.mark-link{cursor:pointer}
svg a.mark-link:focus-visible{outline:none}
svg a.mark-link:focus-visible rect,svg a.mark-link:focus-visible path{stroke:var(--primary);stroke-width:2}
.hbars{display:grid;gap:9px}
.hbar{display:grid;grid-template-columns:minmax(96px,170px) 1fr auto;gap:12px;align-items:center;font-size:.8125rem;min-width:0}
.hbar .label{min-width:0;display:grid;line-height:1.3}
.hbar .label a,.hbar .label span{color:var(--strong-text);font-weight:600;text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hbar .label a:hover{color:var(--primary)}
.hbar .label small{color:var(--secondary-text);font-size:.75rem}
.hbar .track{display:flex;gap:2px;height:18px;min-width:3px}
.hbar .seg{display:block;height:100%;min-width:3px;flex-basis:0;border-radius:0}
.hbar .seg:last-child{border-radius:0 4px 4px 0}
.hbar .seg:hover,.hbar .seg:focus-visible{filter:brightness(1.12);outline:none}
.hbar .value{white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--strong-text);font-weight:600;text-align:right}
.hbar .value a{color:inherit;text-decoration:none}
.hbar .value small{color:var(--secondary-text);font-weight:400;margin-left:8px;font-size:.75rem}
.columns{min-height:230px}
.columns svg{width:100%;height:auto;display:block;overflow:visible}
.columns .tick{font-size:11px;fill:var(--secondary-text);font-variant-numeric:tabular-nums}
.columns .grid{stroke:var(--chart-grid);stroke-width:1}
.columns .hit{fill:transparent}
.columns .col.is-hot rect:not(.hit){opacity:.82}
.columns .col.is-hot .hit{fill:var(--soft-background)}
.columns .crosshair{stroke:var(--secondary-text);stroke-width:1;opacity:0;pointer-events:none}
.chart-tip{position:fixed;z-index:70;pointer-events:none;background:var(--secondary);color:var(--white);border-radius:8px;padding:8px 11px;font-size:.75rem;line-height:1.45;min-width:150px;max-width:280px;box-shadow:0 8px 24px #17151233;opacity:0;transition:opacity .12s}
.chart-tip.is-on{opacity:1}
.chart-tip .t{font-weight:600;margin-bottom:4px;font-size:.8125rem}
.chart-tip .r{display:flex;align-items:center;gap:8px}
.chart-tip .r i{width:10px;height:3px;border-radius:2px;flex-shrink:0}
.chart-tip .r b{font-weight:600;min-width:40px;text-align:right;font-variant-numeric:tabular-nums}
.chart-tip .r span{color:#FFFFFFB8}
.chart-tip .f{margin-top:5px;color:#FFFFFF8C;font-size:.6875rem}
.kpi .spark{display:block;height:34px;margin-top:6px}
.kpi .spark svg{display:block;overflow:visible}
.spark-area{fill:var(--primary);opacity:.1}
.spark-line{fill:none;stroke:var(--primary);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.spark-dot{fill:var(--primary);stroke:var(--white);stroke-width:2}
.kpi .funnel-track{margin-top:8px}
.cta-strip{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 22px;flex-wrap:wrap}
.cta-strip h2{font-size:1.05rem;font-weight:600}
.cta-strip p{font-size:.875rem;color:var(--secondary-text);margin-top:4px;max-width:60ch}
.cta-strip .actions{display:flex;gap:8px;flex-wrap:wrap}
@media (max-width:900px){.donut-wrap{grid-template-columns:1fr}.donut{max-width:220px;margin:0 auto}.hbar{grid-template-columns:minmax(80px,120px) 1fr auto}}

/* Health page: one card per component, the status chip and latency at the right, the details as a definition list */
.health-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:20px;margin-top:20px}
.health-card{display:flex;flex-direction:column}
.health-card .panel-head{align-items:flex-start}
.health-card.is-down{border-color:var(--danger-line)}
.health-card.is-warn{border-color:var(--amber-line)}
.health-state{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex-shrink:0}
.health-state small{font-size:.75rem;color:var(--secondary-text);font-variant-numeric:tabular-nums}
.health-meta{padding:14px 22px 18px;grid-template-columns:170px 1fr;font-size:.875rem}
.health-meta dd{overflow-wrap:anywhere}

/* Sessions page */
.live-toggle{display:inline-flex;align-items:center;gap:7px;font-size:.8125rem;color:var(--secondary-text);cursor:pointer;user-select:none}
.live-toggle input{width:auto;min-height:0;padding:0;margin:0;accent-color:var(--primary)}
.session-you{font-size:.7rem;color:var(--primary);font-weight:600;letter-spacing:.04em;text-transform:uppercase;margin-left:6px}
td form.inline{display:inline}

/* Rate limits page: compact inputs inside the rules table */
table.rules input:not([type=checkbox]),table.rules select{min-height:32px;padding:5px 8px;font-size:.8125rem;border-radius:7px;width:100%}
table.rules select{min-width:96px;padding-right:22px}
table.rules td{vertical-align:middle}
table.rules td.num input{width:96px;text-align:right}
table.rules input[type=checkbox]{width:16px;height:16px;min-height:0;padding:0;margin:0;accent-color:var(--primary)}
table.rules tr.new-rule td{background:var(--soft-background)}
.checkbox-line{display:flex;align-items:flex-start;gap:10px;font-size:.875rem}
.checkbox-line input[type=checkbox]{width:16px;height:16px;min-height:0;padding:0;margin-top:3px;accent-color:var(--primary)}

/* Sign-in page: the form panel is 20% wider than the original (340-440px → 408-528px); the story panel keeps its
   heading and the orbit, with the orbit sized to the viewport so it is never clipped and always centred */
.signin{grid-template-columns:clamp(408px,38.4vw,528px) minmax(0,1fr)}
.signin-inner{max-width:408px}
.signin-description{max-width:360px}
.signin-story{justify-content:center}
.story-heading{padding:28px 0 0}
.story-orbit{flex:0 1 auto;padding:18px 0 28px}
.story-orbit .orbit{width:min(520px,70vw,calc(100dvh - 330px));min-width:300px}

/* User form: corridor branches as a wrapped grid of checkboxes; filter bar: the branch restriction note on its own row */
.branch-grid{display:flex;flex-wrap:wrap;gap:8px 18px}
.branch-grid .checkbox-line{align-items:center}
.branch-grid label{font-size:.875rem}
.filter-grid .branch-note{grid-column:1/-1;margin:2px 0 0;display:flex;align-items:center;gap:6px}