/*
 * Dashboard UI components (no build step, no framework).
 *
 * Lifted from the access-token workspace and dashboard index redesign
 * (common-dashboard.css, dashboard-index.css) so older pages can match them
 * without Bootstrap 2. Everything is prefixed `ui-` so it can't collide with
 * the website CSS or the scoped Bootstrap 2 still used by some pages.
 * Brand colors come from the --brand-* variables printed by main_dashboard.php.
 *
 * Live reference: /dashboard/components (local/dev only).
 */

:root {
    --ui-ink: #2a251f;
    --ui-muted: #5a534a;
    --ui-subtle: #8a8177;
    --ui-faint: #b3aca2;

    --ui-line: #e5e5e5;
    --ui-line-warm: #eee6df;
    --ui-line-row: #f0efec;
    --ui-line-control: #ddd3cb;
    --ui-line-card: #e7e1db;

    --ui-surface: #ffffff;
    --ui-surface-sunken: #fafafa;
    --ui-surface-control: #f7f7f7;
    --ui-surface-head: #f5f5f5;
    --ui-surface-hover: #f6f0ea;

    --ui-radius-sm: 6px;
    --ui-radius: 7px;
    --ui-radius-card: 9px;
    --ui-radius-lg: 10px;
    --ui-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    --ui-shadow-raised: 0 1px 2px rgba(42, 37, 31, 0.04), 0 8px 24px rgba(42, 37, 31, 0.06);

    --ui-accent: var(--brand-primary-strong, #f0503a);
    --ui-accent-hover: var(--brand-primary-hover, #d94330);
    --ui-accent-deep: var(--brand-primary-deep, #c23f2d);
    --ui-accent-border: var(--brand-primary-border, #f0b6a8);
    --ui-accent-soft: var(--brand-primary-soft, #fffaf8);
    --ui-accent-wash: color-mix(in srgb, var(--ui-accent) 10%, white);

    /* Status colors, shared by buttons, alerts, badges, banners and icons:
       base (borders, icons), ink (text), wash (soft backgrounds), line (soft borders) */
    --ui-info: #4a72a8;
    --ui-info-ink: #3d5f86;
    --ui-success: #4a8b62;
    --ui-success-ink: #2d6a45;
    --ui-warning: #e2aa45;
    --ui-warning-ink: #7a5a12;
    --ui-danger: #b5473a;
    --ui-danger-ink: #9a3a2f;
    --ui-info-wash: color-mix(in srgb, var(--ui-info) 13%, white);
    --ui-success-wash: color-mix(in srgb, var(--ui-success) 13%, white);
    --ui-warning-wash: color-mix(in srgb, var(--ui-warning) 16%, white);
    --ui-danger-wash: color-mix(in srgb, var(--ui-danger) 11%, white);
    --ui-info-line: color-mix(in srgb, var(--ui-info) 35%, white);
    --ui-success-line: color-mix(in srgb, var(--ui-success) 35%, white);
    --ui-warning-line: color-mix(in srgb, var(--ui-warning) 45%, white);
    --ui-danger-line: color-mix(in srgb, var(--ui-danger) 35%, white);
}

/* ------------------------------------------------------------------ */
/* Page header                                                          */
/* ------------------------------------------------------------------ */

.ui-page-header {
    margin: 6px 0 22px;
}
.ui-page-header h1,
.ui-page-header h2 {
    color: var(--ui-ink);
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.3px;
    line-height: 1.2;
    margin: 0 0 6px;
}
.ui-page-header p {
    color: var(--ui-muted);
    font-size: 15px;
    line-height: 1.5;
    margin: 0;
}
/* Title at the top of a dashboard tab (Playground greeting, Access Tokens, Analytics): one size for every
   tab, smaller than a full-page .ui-page-header because the side nav already says where you are. */
.ui-tab-header {
    margin: 0 0 20px;
}
.ui-tab-header h2,
.ui-tab-header h3 {
    color: var(--ui-ink);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.2px;
    line-height: 1.3;
    margin: 0 0 6px;
}
.ui-tab-header p {
    color: var(--ui-muted);
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
}
.ui-tab-header p + p {
    margin-top: 4px;
}
.ui-tab-header a {
    color: var(--ui-accent);
}
.ui-section-title {
    color: var(--ui-ink);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.2px;
    line-height: 1.3;
    margin: 0 0 8px;
}
.ui-text-muted {
    color: var(--ui-muted);
}
/* Link that opens another site: <a class="ui-external" target="_blank">Docs</a>. The icon takes the
   link colour and never wraps onto its own line. */
.ui-external {
    white-space: nowrap;
}
.ui-external::after {
    background-color: currentColor;
    content: "";
    display: inline-block;
    height: 0.8em;
    margin-left: 0.3em;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 2.5h4.5V7'/%3E%3Cpath d='M13.5 2.5 7 9'/%3E%3Cpath d='M11.5 9.5v3a1 1 0 0 1-1 1h-7a1 1 0 0 1-1-1v-7a1 1 0 0 1 1-1h3'/%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 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 2.5h4.5V7'/%3E%3Cpath d='M13.5 2.5 7 9'/%3E%3Cpath d='M11.5 9.5v3a1 1 0 0 1-1 1h-7a1 1 0 0 1-1-1v-7a1 1 0 0 1 1-1h3'/%3E%3C/svg%3E") center / contain no-repeat;
    opacity: 0.6;
    vertical-align: -0.05em;
    width: 0.8em;
}
.ui-text-center {
    text-align: center;
}
@media (max-width: 767px) {
    .ui-hide-mobile {
        display: none;
    }
}
.ui-link,
.ui-page-header a {
    color: var(--ui-accent);
    text-decoration: none;
}
.ui-link:hover,
.ui-link:focus,
.ui-page-header a:hover {
    color: var(--ui-accent-deep);
    text-decoration: none;
}

/* ------------------------------------------------------------------ */
/* Cards                                                                */
/* ------------------------------------------------------------------ */

.ui-card {
    background: var(--ui-surface);
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-radius-card);
    color: var(--ui-ink);
    margin-bottom: 18px;
    overflow: hidden;
}
.ui-card-head {
    align-items: center;
    background: var(--ui-surface-head);
    border-bottom: 1px solid var(--ui-line);
    display: flex;
    font-size: 13px;
    font-weight: 700;
    gap: 8px;
    letter-spacing: 0.2px;
    margin: 0;
    padding: 13px 18px;
    text-transform: uppercase;
}
.ui-card-body,
.ui-card-pad {
    padding: 18px;
}
.ui-card-body > :last-child {
    margin-bottom: 0;
}
.ui-card-foot {
    background: #f8f8f8;
    border-top: 1px solid var(--ui-line);
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 16px 18px;
}

/* Larger standalone panel, like the access-token workspace */
.ui-panel {
    background: var(--ui-surface);
    border: 1px solid var(--ui-line-card);
    border-radius: var(--ui-radius-lg);
    box-shadow: var(--ui-shadow-raised);
    color: var(--ui-ink);
    margin: 0 auto 50px;
    max-width: 680px;
    overflow: hidden;
}
/* Short panels: questionnaire, status pages, set password, change email */
.ui-panel-narrow {
    max-width: 440px;
}
/* Page wrapper for a short, stand-alone panel (questionnaire, _statusPanel, set password, change email; pair it with
   .ui-panel-narrow). The panel sits in the upper third: the gap under the header grows with the window
   height, so it doesn't look stranded on a tall screen and doesn't move when errors appear.
   Long forms (profile, cancel subscription) keep the normal top spacing: don't use it there. */
.ui-page-standalone > .container {
    padding-top: clamp(16px, 10vh, 140px);
}
.ui-panel-head {
    border-bottom: 1px solid var(--ui-line);
    padding: 28px 32px 20px;
}
.ui-panel-head h1 {
    color: var(--ui-ink);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    margin: 18px 0 0;
}
.ui-panel-head h1:first-child {
    margin-top: 0;
}
.ui-panel-head p {
    color: var(--ui-muted);
    font-size: 14px;
    line-height: 1.5;
    margin: 8px 0 0;
}
.ui-panel-body {
    padding: 22px 32px 4px;
}
.ui-panel-foot {
    background: var(--ui-surface);
    border-top: 1px solid var(--ui-line);
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 16px 32px 26px;
}
.ui-back-link {
    align-items: center;
    color: var(--ui-accent);
    display: inline-flex;
    font-size: 13px;
    font-weight: 600;
    gap: 6px;
    text-decoration: none;
}
.ui-back-link:hover,
.ui-back-link:focus {
    color: var(--ui-accent-deep);
    text-decoration: none;
}

/* ------------------------------------------------------------------ */
/* Buttons                                                              */
/* ------------------------------------------------------------------ */
/*
 * Shape and hover behaviour follow the website's login/signup/header buttons.
 *
 *   ui-btn                        neutral: white, grey border
 *   ui-btn ui-btn-primary         brand fill; turns to outline on hover
 *   ui-btn ui-btn-{info|success|warning|danger}
 *                                 soft tinted fill; turns to outline on hover
 *   ui-btn ui-btn-{info|success|warning|danger} ui-btn-outline
 *                                 outline; soft tint on hover
 *   ui-btn ui-btn-primary ui-btn-outline
 *                                 outline; brand fill on hover
 *   Status colors never go to a full fill, so they don't compete with the primary button.
 *   sizes:  ui-btn-sm, (default), ui-btn-lg
 *   ui-btn-caps                   uppercase, for the occasional marketing-style CTA
 */

.ui-btn {
    --ui-btn-color: var(--ui-ink);
    --ui-btn-on: #ffffff;
    align-items: center;
    background: var(--ui-surface);
    border: 1px solid #d3c8be;
    border-radius: 4px;
    box-shadow: none;
    box-sizing: border-box;
    --ui-btn-fg: var(--ui-ink);
    cursor: pointer;
    display: inline-flex;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    gap: 6px;
    justify-content: center;
    line-height: 18px;
    margin: 0;
    padding: 10px 18px;
    text-decoration: none;
    text-shadow: none;
    text-transform: none;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    white-space: nowrap;
}
.ui-btn:hover,
.ui-btn:focus {
    background: var(--ui-surface-hover);
    border-color: #cfc5bc;
    --ui-btn-fg: var(--ui-ink);
    text-decoration: none;
}
.ui-btn:focus-visible {
    outline: 2px solid var(--ui-accent-border);
    outline-offset: 2px;
}

/* Colors. Status buttons use the same tokens as alerts and badges (--ui-{color}, -ink, -wash, -line). */
.ui-btn-primary { --ui-btn-color: var(--ui-accent); }
.ui-btn-info    { --ui-btn-color: var(--ui-info);    --ui-btn-ink: var(--ui-info-ink);    --ui-btn-wash: var(--ui-info-wash);    --ui-btn-line: var(--ui-info-line); }
.ui-btn-success { --ui-btn-color: var(--ui-success); --ui-btn-ink: var(--ui-success-ink); --ui-btn-wash: var(--ui-success-wash); --ui-btn-line: var(--ui-success-line); }
.ui-btn-warning { --ui-btn-color: var(--ui-warning); --ui-btn-ink: var(--ui-warning-ink); --ui-btn-wash: var(--ui-warning-wash); --ui-btn-line: var(--ui-warning-line); }
.ui-btn-danger  { --ui-btn-color: var(--ui-danger);  --ui-btn-ink: var(--ui-danger-ink);  --ui-btn-wash: var(--ui-danger-wash);  --ui-btn-line: var(--ui-danger-line); }

/* Primary: brand fill, turns to outline on hover (like the website's buttons) */
.ui-btn-primary {
    background: var(--ui-btn-color);
    border-color: var(--ui-btn-color);
    --ui-btn-fg: var(--ui-btn-on);
}
.ui-btn-primary:hover,
.ui-btn-primary:focus {
    background: transparent;
    border-color: var(--ui-btn-color);
    --ui-btn-fg: var(--ui-btn-color);
}
.ui-btn-primary.ui-btn-outline {
    background: transparent;
    border-color: var(--ui-btn-color);
    --ui-btn-fg: var(--ui-btn-color);
}
.ui-btn-primary.ui-btn-outline:hover,
.ui-btn-primary.ui-btn-outline:focus {
    background: var(--ui-btn-color);
    border-color: var(--ui-btn-color);
    --ui-btn-fg: var(--ui-btn-on);
}

/* Info / success / warning / danger: soft tint, swapping to outline on hover */
.ui-btn-info,
.ui-btn-success,
.ui-btn-warning,
.ui-btn-danger {
    background: var(--ui-btn-wash);
    border-color: var(--ui-btn-line);
    --ui-btn-fg: var(--ui-btn-ink);
}
.ui-btn-info:hover, .ui-btn-info:focus,
.ui-btn-success:hover, .ui-btn-success:focus,
.ui-btn-warning:hover, .ui-btn-warning:focus,
.ui-btn-danger:hover, .ui-btn-danger:focus {
    background: var(--ui-surface);
    border-color: var(--ui-btn-color);
    --ui-btn-fg: var(--ui-btn-ink);
}

/* ...and the reverse: outline, soft tint on hover */
.ui-btn-info.ui-btn-outline,
.ui-btn-success.ui-btn-outline,
.ui-btn-warning.ui-btn-outline,
.ui-btn-danger.ui-btn-outline {
    background: var(--ui-surface);
    border-color: var(--ui-btn-color);
    --ui-btn-fg: var(--ui-btn-ink);
}
.ui-btn-info.ui-btn-outline:hover, .ui-btn-info.ui-btn-outline:focus,
.ui-btn-success.ui-btn-outline:hover, .ui-btn-success.ui-btn-outline:focus,
.ui-btn-warning.ui-btn-outline:hover, .ui-btn-warning.ui-btn-outline:focus,
.ui-btn-danger.ui-btn-outline:hover, .ui-btn-danger.ui-btn-outline:focus {
    background: var(--ui-btn-wash);
    border-color: var(--ui-btn-color);
    --ui-btn-fg: var(--ui-btn-ink);
}

/* Buttons set --ui-btn-fg instead of color, and this one rule applies it. The extra selectors beat
   link colors such as Bootstrap 2's `.bootstrap-dashboard a` / `a:hover`, so <a class="ui-btn">
   looks the same as <button class="ui-btn"> anywhere on the page. */
.ui-btn,
a.ui-btn,
.bootstrap-dashboard a.ui-btn,
.bootstrap-dashboard a.ui-btn:hover,
.bootstrap-dashboard a.ui-btn:focus,
.bootstrap-dashboard a.ui-btn:visited {
    color: var(--ui-btn-fg);
}

/* Sizes */
.ui-btn-sm {
    font-size: 12.5px;
    padding: 6px 12px;
}
.ui-btn-lg {
    font-size: 16px;
    padding: 14px 28px;
}
.ui-btn-caps {
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.ui-btn[disabled],
.ui-btn.is-disabled {
    cursor: not-allowed;
    opacity: 0.55;
    pointer-events: none;
}
.ui-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* ------------------------------------------------------------------ */
/* Form fields                                                          */
/* ------------------------------------------------------------------ */

.ui-field {
    margin-bottom: 18px;
}
.ui-label {
    color: var(--ui-subtle);
    display: block;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.3px;
    margin: 0 0 8px;
    text-transform: uppercase;
}
.ui-label .required {
    color: var(--ui-accent);
}
.ui-input,
.ui-select,
.ui-textarea {
    background: var(--ui-surface);
    border: 1px solid var(--ui-line-control);
    border-radius: var(--ui-radius);
    box-shadow: none;
    box-sizing: border-box;
    color: var(--ui-ink);
    display: block;
    font-family: inherit;
    font-size: 14px;
    height: auto;
    line-height: 20px;
    margin: 0;
    padding: 10px 12px;
    width: 100%;
}
.ui-select {
    padding-right: 32px;
}
.ui-textarea {
    font-family: ui-monospace, Menlo, Monaco, Consolas, monospace;
    font-size: 13px;
    min-height: 60px;
    resize: vertical;
}
.ui-input::placeholder,
.ui-textarea::placeholder {
    color: var(--ui-subtle);
}
.ui-input:focus,
.ui-select:focus,
.ui-textarea:focus {
    background: #ffffff;
    border-color: var(--ui-accent-border);
    box-shadow: 0 0 0 3px var(--ui-accent-wash);
    outline: none;
}
.ui-input[readonly],
.ui-input[disabled] {
    background: var(--ui-surface-control);
    color: var(--ui-muted);
    cursor: not-allowed;
}
.ui-help {
    color: var(--ui-subtle);
    font-size: 12px;
    line-height: 1.5;
    margin: 8px 0 0;
}
.ui-error,
.ui-field .errorMessage {
    color: var(--ui-danger-ink);
    font-size: 12.5px;
    line-height: 1.5;
    margin: 6px 0 0;
}
.ui-field.has-error .ui-input,
.ui-field.has-error .ui-select,
.ui-field.has-error .ui-textarea,
.ui-input.error,
.ui-select.error,
.ui-textarea.error {
    border-color: var(--ui-danger-line);
}
.ui-check {
    align-items: center;
    color: var(--ui-ink);
    display: flex;
    font-size: 13px;
    font-weight: normal;
    gap: 8px;
    margin: 0 0 8px;
}
.ui-check input {
    accent-color: var(--ui-accent);
    margin: 0;
}

/* Two-column field grid that collapses on small screens */
.ui-grid-2 {
    display: grid;
    gap: 0 18px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 600px) {
    .ui-grid-2 {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ------------------------------------------------------------------ */
/* Tables                                                               */
/* ------------------------------------------------------------------ */

.ui-table-wrap {
    background: var(--ui-surface);
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-radius-lg);
    box-shadow: var(--ui-shadow);
    overflow-x: auto;
}
.ui-table {
    border-collapse: collapse;
    border-spacing: 0;
    margin: 0;
    width: 100%;
}
.ui-table th {
    background: var(--ui-surface);
    border-bottom: 1px solid var(--ui-line-warm);
    color: var(--ui-subtle);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 12px 18px;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}
.ui-table td {
    border-bottom: 1px solid var(--ui-line-row);
    color: var(--ui-ink);
    font-size: 14px;
    padding: 14px 18px;
    text-align: left;
    vertical-align: middle;
}
.ui-table tbody tr:last-child td {
    border-bottom: 0;
}
.ui-table tbody tr:hover td {
    background: var(--ui-accent-soft);
}
/* Dense data tables (reports): smaller cells, grid lines */
.ui-table-compact th {
    padding: 8px 12px;
}
.ui-table-compact td {
    font-size: 13px;
    padding: 7px 12px;
}
.ui-table-bordered {
    border: 1px solid var(--ui-line-card);
}
.ui-table-bordered th,
.ui-table-bordered td,
.ui-table-bordered tbody tr:last-child td {
    border: 1px solid var(--ui-line-warm);
}
.ui-table .is-numeric {
    font-variant-numeric: tabular-nums;
    text-align: right;
}

/* Label / value list, e.g. account details */
.ui-details {
    display: grid;
    gap: 10px 24px;
    grid-template-columns: minmax(140px, max-content) minmax(0, 1fr);
    margin: 0;
}
.ui-details dt {
    color: var(--ui-subtle);
    font-size: 13px;
    font-weight: 500;
}
.ui-details dd {
    color: var(--ui-ink);
    font-size: 14px;
    margin: 0;
    overflow-wrap: anywhere;
}
@media (max-width: 600px) {
    .ui-details {
        grid-template-columns: minmax(0, 1fr);
    }
    .ui-details dd {
        margin-bottom: 8px;
    }
}

/* ------------------------------------------------------------------ */
/* Tabs (underline) and side navigation (pills)                         */
/* ------------------------------------------------------------------ */

.ui-tabs {
    border-bottom: 1px solid var(--ui-line-warm);
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    list-style: none;
    margin: 0 0 18px;
    padding: 0;
}
.ui-tabs > li {
    margin: 0 0 -1px;
}
.ui-tabs a,
.ui-tabs button {
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    color: var(--ui-subtle);
    cursor: pointer;
    display: block;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    padding: 8px 14px;
    text-decoration: none;
}
.ui-tabs a:hover,
.ui-tabs button:hover {
    border-bottom-color: #e5d8d0;
    color: var(--ui-ink);
    text-decoration: none;
}
.ui-tabs .is-active > a,
.ui-tabs .is-active > button,
.ui-tabs .active > a,
.ui-tabs a[aria-selected="true"],
.ui-tabs button[aria-selected="true"] {
    border-bottom-color: var(--ui-accent);
    color: var(--ui-accent);
}

/* Centred tab row, e.g. above a report */
.ui-tabs-center {
    justify-content: center;
}

/* Tab panels. js/bootstrap-tab.js (data-toggle="tab") moves .active between the
   tab <li> and its .tab-pane and fires the show/shown events other scripts listen to. */
.tab-content > .tab-pane {
    display: none;
}
.tab-content > .tab-pane.active {
    display: block;
}

.ui-sidenav {
    list-style: none;
    margin: 0;
    padding: 0;
}
.ui-sidenav > li {
    margin: 0 0 2px;
}
.ui-sidenav a {
    border-radius: 8px;
    color: var(--ui-muted);
    display: block;
    font-size: 14px;
    font-weight: 500;
    padding: 10px 14px;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}
.ui-sidenav a:hover,
.ui-sidenav a:focus {
    background: var(--ui-surface-hover);
    color: var(--ui-ink);
    text-decoration: none;
}
.ui-sidenav .is-active > a,
.ui-sidenav .active > a,
.ui-sidenav a[aria-current="page"] {
    background: var(--ui-accent-wash);
    color: var(--ui-accent);
    font-weight: 600;
}

/* ------------------------------------------------------------------ */
/* Alerts and badges                                                    */
/* ------------------------------------------------------------------ */

.ui-alert {
    border: 0;
    border-radius: var(--ui-radius);
    font-size: 13px;
    line-height: 1.5;
    margin: 0 0 16px;
    padding: 14px 16px;
}
.ui-alert > :last-child {
    margin-bottom: 0;
}
.ui-alert strong {
    font-weight: 700;
}
.ui-alert a {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
}
.ui-alert-info {
    background: var(--ui-info-wash);
    color: var(--ui-info-ink);
}
.ui-alert-success {
    background: var(--ui-success-wash);
    color: var(--ui-success-ink);
}
.ui-alert-warning {
    background: var(--ui-warning-wash);
    color: var(--ui-warning-ink);
}
.ui-alert-danger,
.ui-alert-error {
    background: var(--ui-danger-wash);
    color: var(--ui-danger-ink);
}

.ui-badge {
    background: var(--ui-line);
    border-radius: 20px;
    color: var(--ui-muted);
    display: inline-block;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.3px;
    line-height: 1.4;
    padding: 4px 9px;
    text-transform: uppercase;
    white-space: nowrap;
}
.ui-badge-accent {
    background: var(--ui-accent-wash);
    color: var(--ui-accent-deep);
}
.ui-badge-success {
    background: var(--ui-success-wash);
    color: var(--ui-success-ink);
}
.ui-badge-warning {
    background: var(--ui-warning-wash);
    color: var(--ui-warning-ink);
}

.ui-badge-info {
    background: var(--ui-info-wash);
    color: var(--ui-info-ink);
}
.ui-badge-danger {
    background: var(--ui-danger-wash);
    color: var(--ui-danger-ink);
}
/* Leading status dot, e.g. "● Active" */
.ui-badge-dot::before {
    background: currentColor;
    border-radius: 50%;
    content: "";
    display: inline-block;
    height: 6px;
    margin: 0 6px 1px 0;
    vertical-align: middle;
    width: 6px;
}

/* Code / token values */
.ui-code {
    background: var(--ui-surface-control);
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-radius-sm);
    color: var(--ui-accent-deep);
    font-family: ui-monospace, Menlo, Monaco, Consolas, monospace;
    font-size: 13px;
    overflow-wrap: anywhere;
    padding: 8px 12px;
    white-space: normal;
}

/* Empty state */
.ui-empty {
    color: var(--ui-subtle);
    font-size: 13px;
    padding: 24px 0;
    text-align: center;
}

/* ------------------------------------------------------------------ */
/* Section heading with icon (token page sections)                      */
/* ------------------------------------------------------------------ */

.ui-section-head {
    align-items: center;
    color: var(--ui-ink);
    display: flex;
    font-size: 13px;
    font-weight: 700;
    gap: 8px;
    letter-spacing: 0.2px;
    margin: 0 0 12px;
    text-transform: uppercase;
}
.ui-icon-square {
    align-items: center;
    background: var(--ui-subtle);
    border-radius: 6px;
    color: #ffffff;
    display: inline-flex;
    flex-shrink: 0;
    font-size: 12px;
    height: 22px;
    justify-content: center;
    width: 22px;
}
.ui-icon-square.is-accent  { background: var(--ui-accent); }
.ui-icon-square.is-info    { background: var(--ui-info); }
.ui-icon-square.is-success { background: var(--ui-success); }
.ui-icon-square.is-warning { background: #c69036; }
.ui-icon-square.is-danger  { background: var(--ui-danger); }

/* ------------------------------------------------------------------ */
/* Stat tiles                                                           */
/* ------------------------------------------------------------------ */

.ui-stats {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    margin: 0 0 18px;
}
.ui-stat {
    background: var(--ui-surface);
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-radius-card);
    padding: 14px 16px;
}
.ui-stat-label {
    color: var(--ui-subtle);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}
.ui-stat-value {
    color: var(--ui-ink);
    font-size: 24px;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    line-height: 1.2;
    margin-top: 4px;
}
.ui-stat-meta {
    color: var(--ui-muted);
    font-size: 12.5px;
    margin-top: 4px;
}
.ui-stat-warning {
    background: var(--ui-warning-wash);
    border-color: var(--ui-warning-line);
}
.ui-stat-warning .ui-stat-value {
    color: var(--ui-warning-ink);
}

/* ------------------------------------------------------------------ */
/* Copy field: value + copy button (js/ui-components.js)                */
/* ------------------------------------------------------------------ */

.ui-copy {
    align-items: stretch;
    display: inline-flex;
    max-width: 100%;
}
.ui-copy .ui-code {
    border-bottom-right-radius: 0;
    border-right: 0;
    border-top-right-radius: 0;
    min-width: 0;
}
.ui-copy-button {
    align-items: center;
    background: var(--ui-surface);
    border: 1px solid var(--ui-line);
    border-radius: 0 var(--ui-radius-sm) var(--ui-radius-sm) 0;
    color: var(--ui-muted);
    cursor: pointer;
    display: inline-flex;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 500;
    gap: 6px;
    padding: 0 12px;
    white-space: nowrap;
}
.ui-copy-button:hover,
.ui-copy-button:focus {
    background: var(--ui-surface-hover);
    color: var(--ui-ink);
}
.ui-copy-button.is-copied {
    color: var(--ui-success-ink);
}

/* ------------------------------------------------------------------ */
/* Segmented control (radio buttons, CSS only)                          */
/* ------------------------------------------------------------------ */

.ui-segmented {
    background: var(--ui-surface-control);
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-radius);
    display: inline-flex;
    gap: 2px;
    padding: 2px;
}
.ui-segmented label {
    cursor: pointer;
    margin: 0;
}
.ui-segmented input {
    opacity: 0;
    pointer-events: none;
    position: absolute;
}
.ui-segmented span {
    border-radius: 5px;
    color: var(--ui-subtle);
    display: block;
    font-size: 13px;
    font-weight: 500;
    padding: 5px 12px;
}
.ui-segmented label:hover span {
    color: var(--ui-ink);
}
.ui-segmented input:checked + span {
    background: var(--ui-surface);
    box-shadow: 0 1px 2px rgba(42, 37, 31, 0.12);
    color: var(--ui-ink);
}
.ui-segmented input:focus-visible + span {
    outline: 2px solid var(--ui-accent-border);
}

/* ------------------------------------------------------------------ */
/* Tooltip (hover/focus, CSS only) and popover (click, <details>)        */
/* ------------------------------------------------------------------ */

.ui-tip {
    cursor: help;
    display: inline-block;
    position: relative;
}
.ui-tip-icon {
    align-items: center;
    border: 1px solid var(--ui-faint);
    border-radius: 50%;
    color: var(--ui-subtle);
    display: inline-flex;
    font-size: 10px;
    font-style: normal;
    font-weight: 700;
    height: 14px;
    justify-content: center;
    line-height: 1;
    width: 14px;
}
.ui-tip::after {
    background: var(--ui-ink);
    border-radius: 6px;
    bottom: calc(100% + 8px);
    color: #ffffff;
    content: attr(data-tip);
    font-size: 12px;
    font-weight: 400;
    left: 50%;
    line-height: 1.45;
    opacity: 0;
    padding: 7px 10px;
    pointer-events: none;
    position: absolute;
    text-align: left;
    text-transform: none;
    transform: translateX(-50%);
    transition: opacity 0.15s ease;
    white-space: normal;
    width: max-content;
    max-width: 260px;
    z-index: 30;
}
.ui-tip:hover::after,
.ui-tip:focus::after,
.ui-tip:focus-within::after {
    opacity: 1;
}

.ui-popover,
.ui-dropdown {
    display: inline-block;
    position: relative;
}
.ui-popover > summary,
.ui-dropdown > summary {
    cursor: pointer;
    list-style: none;
}
.ui-popover > summary {
    font-size: 14px;
}
.ui-tip {
    font-size: 14px;
}
.ui-popover > summary::-webkit-details-marker,
.ui-dropdown > summary::-webkit-details-marker {
    display: none;
}
.ui-popover-panel,
.ui-menu {
    background: var(--ui-surface);
    border: 1px solid var(--ui-line-card);
    border-radius: var(--ui-radius-card);
    box-shadow: var(--ui-shadow-raised);
    color: var(--ui-ink);
    left: 0;
    margin-top: 6px;
    position: absolute;
    top: 100%;
    z-index: 40;
}
.ui-popover-panel {
    font-size: 13px;
    line-height: 1.5;
    padding: 12px 14px;
    width: 280px;
}
.ui-menu {
    min-width: 180px;
    padding: 4px;
}
.ui-dropdown.is-right .ui-menu,
.ui-popover.is-right .ui-popover-panel {
    left: auto;
    right: 0;
}
.ui-menu a,
.ui-menu button {
    background: none;
    border: 0;
    border-radius: 5px;
    color: var(--ui-ink);
    cursor: pointer;
    display: block;
    font-family: inherit;
    font-size: 13.5px;
    padding: 7px 10px;
    text-align: left;
    text-decoration: none;
    width: 100%;
}
.ui-menu a:hover,
.ui-menu button:hover,
.ui-menu a:focus,
.ui-menu button:focus {
    background: var(--ui-surface-hover);
    color: var(--ui-ink);
    text-decoration: none;
}
.ui-menu hr {
    border: 0;
    border-top: 1px solid var(--ui-line-row);
    margin: 4px 0;
}
.ui-caret::after {
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    content: "";
    display: inline-block;
    margin-left: 2px;
    vertical-align: middle;
}

/* ------------------------------------------------------------------ */
/* Filter toolbar and joined input group (e.g. a date range)            */
/* ------------------------------------------------------------------ */

.ui-toolbar {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 12px;
    margin: 0 0 18px;
}
.ui-toolbar-label {
    color: var(--ui-muted);
    font-size: 13.5px;
}
.ui-toolbar .ui-input,
.ui-toolbar .ui-select {
    padding-bottom: 7px;
    padding-top: 7px;
    width: auto;
}
/* An auto-width select grows to its longest option (e.g. long token labels) */
.ui-toolbar .ui-select {
    max-width: 280px;
    min-width: 200px;
}
/* One control height across the row */
.ui-toolbar .ui-input,
.ui-toolbar .ui-select,
.ui-toolbar .ui-input-group-text,
.ui-toolbar .ui-btn {
    height: 36px;
    padding-bottom: 0;
    padding-top: 0;
}
.ui-toolbar .ui-btn {
    padding-bottom: 7px;
    padding-top: 7px;
}
.ui-input-group {
    align-items: stretch;
    display: inline-flex;
}
/* Doubled class: beats bootstrap-datepicker's .input-daterange corners */
.ui-input-group.ui-input-group > * {
    border-radius: 0;
    margin: 0 0 0 -1px;
}
.ui-input-group.ui-input-group > :first-child {
    border-radius: var(--ui-radius) 0 0 var(--ui-radius);
    margin-left: 0;
}
.ui-input-group.ui-input-group > :last-child {
    border-radius: 0 var(--ui-radius) var(--ui-radius) 0;
}
.ui-input-group-text {
    align-items: center;
    background: var(--ui-surface-control);
    border: 1px solid var(--ui-line-control);
    color: var(--ui-muted);
    display: inline-flex;
    font-size: 13px;
    padding: 0 10px;
}

/* ------------------------------------------------------------------ */
/* Pagination                                                           */
/* ------------------------------------------------------------------ */

.ui-pagination {
    align-items: center;
    color: var(--ui-subtle);
    display: flex;
    flex-wrap: wrap;
    font-size: 12.5px;
    gap: 12px;
    justify-content: space-between;
    padding: 12px 16px;
}
.ui-pagination-pages {
    align-items: center;
    display: inline-flex;
    gap: 4px;
}
.ui-pagination-pages a,
.ui-pagination-pages span {
    border: 1px solid transparent;
    border-radius: 4px;
    color: var(--ui-muted);
    min-width: 28px;
    padding: 4px 8px;
    text-align: center;
    text-decoration: none;
}
.ui-pagination-pages a:hover {
    background: var(--ui-surface-hover);
    color: var(--ui-ink);
    text-decoration: none;
}
.ui-pagination-pages .is-current {
    border-color: var(--ui-line-control);
    color: var(--ui-ink);
    font-weight: 600;
}
.ui-pagination-pages .is-disabled {
    opacity: 0.45;
    pointer-events: none;
}
.ui-table-wrap > .ui-pagination {
    border-top: 1px solid var(--ui-line-row);
}

/* ------------------------------------------------------------------ */
/* Confirm dialog (<dialog>, opened by js/ui-components.js)             */
/* ------------------------------------------------------------------ */

.ui-dialog {
    /* Re-centre: the website CSS reset removes the browser default margin:auto on <dialog> */
    inset: 0;
    margin: auto;
    position: fixed;
    border: 1px solid var(--ui-line-card);
    border-radius: var(--ui-radius-lg);
    box-shadow: 0 20px 60px rgba(42, 37, 31, 0.25);
    color: var(--ui-ink);
    max-width: calc(100vw - 32px);
    padding: 0;
    width: 440px;
}
.ui-dialog::backdrop {
    background: rgba(42, 37, 31, 0.35);
}
.ui-dialog-body {
    padding: 22px 24px 8px;
}
.ui-dialog-body h3 {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 8px;
}
.ui-dialog-body p {
    color: var(--ui-muted);
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
}
.ui-dialog-foot {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    padding: 18px 24px 22px;
}

/* ------------------------------------------------------------------ */
/* Loading                                                              */
/* ------------------------------------------------------------------ */

.ui-spinner {
    animation: ui-spin 0.8s linear infinite;
    border: 2px solid var(--ui-line);
    border-radius: 50%;
    border-top-color: var(--ui-accent);
    display: inline-block;
    height: 16px;
    vertical-align: middle;
    width: 16px;
}
.ui-loading {
    align-items: center;
    color: var(--ui-subtle);
    display: flex;
    font-size: 13px;
    gap: 10px;
    justify-content: center;
    padding: 24px 0;
}
.ui-skeleton {
    animation: ui-pulse 1.4s ease-in-out infinite;
    background: var(--ui-line-row);
    border-radius: 4px;
    display: block;
    height: 12px;
    margin: 8px 0;
}
@keyframes ui-spin {
    to { transform: rotate(360deg); }
}
@keyframes ui-pulse {
    50% { opacity: 0.5; }
}
@media (prefers-reduced-motion: reduce) {
    .ui-spinner,
    .ui-skeleton {
        animation: none;
    }
}

/* ------------------------------------------------------------------ */
/* Banner (page-wide notice, e.g. admin mode)                           */
/* ------------------------------------------------------------------ */

.ui-banner {
    align-items: center;
    background: var(--ui-accent-wash);
    border-bottom: 1px solid var(--ui-accent-border);
    color: var(--ui-ink);
    display: flex;
    flex-wrap: wrap;
    font-size: 13.5px;
    gap: 6px 10px;
    justify-content: center;
    padding: 10px 16px;
    text-align: center;
}
.ui-banner strong {
    color: var(--ui-accent-deep);
}
.ui-banner-info {
    background: var(--ui-info-wash);
    border-bottom-color: var(--ui-info-line);
}
.ui-banner-warning {
    background: var(--ui-warning-wash);
    border-bottom-color: var(--ui-warning-line);
}
.ui-banner-info strong { color: var(--ui-info-ink); }
.ui-banner-warning strong { color: var(--ui-warning-ink); }